@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }

:root { --navy: #1F317D; --navy-d: #14215c; --sky: #85C5EB; --gold: #a9803a; --ink: #141a3d; --muted: #4a5179; --line: #d9e4ec; --err: #b3261e; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.gate { font: 400 17px/1.6 "Figtree", system-ui, sans-serif; color: var(--ink); background: #cfe3f1; -webkit-font-smoothing: antialiased; }
.gate-wrap { position: relative; min-height: 100%; display: grid; place-items: center; padding: 28px 18px 120px; overflow: hidden; isolation: isolate; }
.gate-wrap::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--bg) center 62% / cover no-repeat; transform: scale(1.04); }
.gate-wrap::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(31, 49, 125, .55) 0%, rgba(31, 49, 125, .25) 45%, rgba(133, 197, 235, .35) 100%); }

.gate-card { width: min(100%, 460px); padding: clamp(28px, 5vw, 44px); border-radius: 36px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 40px 80px -30px rgba(12, 20, 56, .75); text-align: center; animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.gate-logo { width: 150px; height: auto; margin: 0 auto 22px; }
.gate-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 12px/1 "Figtree", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.gate-eyebrow::before { content: ""; width: 30px; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M2 2 Q17 14 32 2' fill='none' stroke='%23a9803a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.gate-card h1 { margin: 0 0 12px; font: 400 clamp(1.9rem, 5vw, 2.5rem)/1.08 "Fraunces", Georgia, serif; letter-spacing: -.02em; color: var(--navy); }
.gate-card h1 em { font-style: italic; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M1.500 2.500 Q50 14 98.500 2.500' fill='none' stroke='%2385C5EB' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .3em; padding-bottom: .14em; }
.gate-text { margin: 0 0 24px; color: var(--muted); font-size: 16px; }

.gate-form { text-align: left; }
.gate-form label { display: block; margin-bottom: 8px; font: 700 12px/1 "Figtree", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.gate-field { position: relative; }
.gate-field input { width: 100%; padding: 16px 54px 16px 20px; border: 2px solid var(--line); border-radius: 999px; background: #fff; font: 500 17px/1.2 "Figtree", sans-serif; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.gate-field input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 5px rgba(133, 197, 235, .45); }
.gate-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.gate-eye:hover, .gate-eye:focus-visible { background: #eef5f9; color: var(--navy); outline: none; }
.gate-hint, .gate-error { margin: 10px 4px 0; min-height: 1.5em; font-size: 14px; }
.gate-hint { color: var(--muted); }
.gate-error { color: var(--err); font-weight: 600; }
.gate-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 18px; padding: 16px 24px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: 700 16px/1.2 "Figtree", sans-serif; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(31, 49, 125, .8); transition: transform .25s, background .25s; }
.gate-btn:hover { background: var(--navy-d); transform: translateY(-2px); }
.gate-btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

.gate-smile { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(60px, 9vw, 110px); z-index: 1; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .gate-card { animation: none; } * { transition: none !important; } }