:root { --ink: #102628; --navy: #172b55; --teal: #007b83; --coral: #ed7650; --canvas: #f7f8f4; --muted: #607572; --line: #dbe8e3; --serif: "Fraunces", Georgia, serif; --sans: "DM Sans", Arial, sans-serif; --mono: "DM Mono", monospace; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--canvas); font-family: var(--sans); }
.gate-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 44%); }
.gate-panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 10vw, 142px); overflow: hidden; }
.gate-panel::before { content: ""; position: absolute; top: 0; left: 0; width: 7px; height: 100%; background: linear-gradient(var(--coral), #f4c95b); }
.gate-mark { display: flex; gap: 5px; align-items: end; width: 43px; height: 35px; margin-bottom: 54px; }
.gate-mark span { display: block; border-radius: 5px 5px 0 0; background: var(--teal); }
.gate-mark span:nth-child(1) { width: 9px; height: 14px; background: var(--coral); }
.gate-mark span:nth-child(2) { width: 11px; height: 27px; }
.gate-mark span:nth-child(3) { width: 12px; height: 35px; background: var(--navy); }
.eyebrow { margin: 0 0 13px; color: var(--coral); font-family: var(--mono); font-size: 10px; letter-spacing: .13em; }
h1 { max-width: 620px; margin: 0; font-family: var(--serif); font-size: clamp(47px, 6.8vw, 88px); font-weight: 500; letter-spacing: -.06em; line-height: .91; }
h1 em { color: var(--teal); font-style: italic; }
.gate-copy { max-width: 475px; margin: 26px 0 0; color: var(--muted); font-size: 16px; line-height: 1.62; }
form { max-width: 410px; margin-top: 36px; }
label { display: block; margin-bottom: 7px; color: #54706c; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.field-row { display: flex; align-items: stretch; border: 1px solid #bcd2cb; border-radius: 9px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.field-row:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0,123,131,.12); }
input { min-width: 0; flex: 1; border: 0; border-radius: 9px; padding: 14px 15px; background: transparent; color: var(--ink); font-size: 16px; outline: none; }
.reveal-button { margin: 5px; border: 0; border-radius: 6px; padding: 0 11px; background: #e9f3ef; color: var(--teal); font-size: 11px; font-weight: 700; }
.gate-error { min-height: 20px; margin: 9px 0 0; color: #b14132; font-size: 12px; line-height: 1.4; }
.unlock-button { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; min-height: 49px; margin-top: 9px; border: 0; border-radius: 8px; padding: 0 18px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; transition: transform .2s, background .2s; }
.unlock-button:hover:not(:disabled) { background: var(--teal); transform: translateY(-1px); }
.unlock-button:disabled { cursor: wait; opacity: .7; }
.unlock-button b { color: #f4c95b; font-size: 18px; }
.gate-note { max-width: 415px; margin: 22px 0 0; color: #829490; font-size: 10px; line-height: 1.55; }
.gate-aside { position: relative; overflow: hidden; background: linear-gradient(145deg, #0c315b 0%, #1b5980 54%, #e48b5a 180%); }
.gate-aside::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 26% 18%, rgba(255,223,134,.4), transparent 24%), linear-gradient(180deg, transparent 55%, rgba(4,21,43,.5)); }
.cityline { position: absolute; right: -5%; bottom: 39%; left: -5%; height: 115px; opacity: .56; background: linear-gradient(90deg, transparent 0 8%, #d8edf1 8% 11%, transparent 11% 14%, #d8edf1 14% 18%, transparent 18% 21%, #d8edf1 21% 28%, transparent 28% 31%, #d8edf1 31% 35%, transparent 35% 40%, #d8edf1 40% 47%, transparent 47% 50%, #d8edf1 50% 56%, transparent 56% 60%, #d8edf1 60% 66%, transparent 66% 70%, #d8edf1 70% 78%, transparent 78% 82%, #d8edf1 82% 90%, transparent 90%); clip-path: polygon(0 100%, 0 72%, 7% 72%, 7% 40%, 10% 40%, 10% 68%, 18% 68%, 18% 23%, 22% 23%, 22% 66%, 31% 66%, 31% 37%, 35% 37%, 35% 69%, 48% 69%, 48% 12%, 52% 12%, 52% 71%, 65% 71%, 65% 28%, 69% 28%, 69% 63%, 77% 63%, 77% 43%, 81% 43%, 81% 70%, 92% 70%, 92% 30%, 96% 30%, 96% 73%, 100% 73%, 100% 100%); }
.road { position: absolute; bottom: -15%; left: -30%; width: 150%; height: 54%; border-top: 12px solid rgba(248,250,246,.7); border-radius: 50% 50% 0 0; transform: rotate(-13deg); }
.convertible { position: absolute; right: 10%; bottom: 15%; width: min(440px, 73%); height: 155px; }
.car-body { position: absolute; right: 0; bottom: 0; left: 0; height: 76px; border-radius: 78px 70px 30px 30px; background: linear-gradient(160deg, #2c9dcc, #0d417e 58%, #072c5b); box-shadow: inset 0 8px rgba(255,255,255,.28), 0 24px 40px rgba(4,20,43,.45); }
.car-body::before { content: ""; position: absolute; top: 25px; right: 11%; width: 29px; height: 13px; border-radius: 7px; background: #f26b56; box-shadow: -19px 0 rgba(242,107,86,.75); }
.windshield { position: absolute; right: 23%; bottom: 69px; width: 50%; height: 62px; border: 8px solid #052a55; border-bottom: 0; border-radius: 90px 70px 0 0; transform: skewX(-12deg); }
.seat { position: absolute; z-index: 2; bottom: 68px; width: 58px; height: 68px; border-radius: 36px 36px 12px 12px; background: #dbe8df; }
.driver { right: 42%; }
.passenger { right: 23%; height: 63px; }
.driver::before { content: ""; position: absolute; top: -34px; left: 8px; width: 42px; height: 43px; border-radius: 45% 47% 48% 35%; background: #cf926e; box-shadow: 20px 35px 0 -12px #7387a2; }
.passenger::before { content: ""; position: absolute; top: -38px; left: 5px; width: 43px; height: 44px; border-radius: 44% 52% 43% 46%; background: #795337; box-shadow: 0 -5px 0 2px #e8b837; }
.wheel { position: absolute; z-index: 3; bottom: -18px; width: 56px; height: 56px; border: 12px solid #071a30; border-radius: 50%; background: #b7ccce; }
.wheel.left { left: 12%; }.wheel.right { right: 12%; }
.gate-aside p { position: absolute; right: 8%; bottom: 5%; margin: 0; color: rgba(255,255,255,.9); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.gate-aside p span { color: #f4c95b; padding: 0 10px; }.gate-aside p small { margin-left: 14px; color: #f4c95b; }
@media (max-width: 800px) { .gate-shell { display: block; }.gate-panel { min-height: 72vh; padding: 52px 29px 62px; }.gate-aside { height: 28vh; }.gate-mark { margin-bottom: 38px; }.gate-copy { font-size: 14px; } }