@font-face{font-family:"Saira Extra Condensed";src:url("assets/fonts/SairaExtraCondensed-Regular.ttf") format("truetype");font-display:swap}
:root{--void:#05040b;--surface:#0d0a16;--line:#2b2340;--blue:#53e4ff;--magenta:#f34cb5;--ink:#f2edf8;--muted:#928aa3;--danger:#ff5068;--green:#4ce5a5;--display:"Saira Extra Condensed","Arial Narrow",sans-serif;--body:Inter,"Trebuchet MS",Arial,sans-serif;--mono:"Courier New",monospace}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 42%,#17102b 0,#080610 34%,var(--void) 68%);color:var(--ink);font-family:var(--body);display:grid;place-items:center;padding:22px;overflow:hidden}
body:before,body:after{content:"";position:fixed;pointer-events:none}
body:before{inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(83,228,255,.018) 3px 4px)}
body:after{width:75vw;height:1px;left:12.5vw;top:18%;background:linear-gradient(90deg,transparent,var(--blue),transparent);box-shadow:0 0 16px var(--blue);opacity:.45}
.gate-shell{width:min(670px,100%)}
.gate-card{position:relative;padding:48px 48px 38px;background:rgba(9,7,16,.94);border:1px solid #26576d;clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);box-shadow:0 35px 100px rgba(0,0,0,.65)}
.gate-card:before,.gate-card:after{content:"";position:absolute;background:var(--blue);box-shadow:0 0 13px var(--blue)}
.gate-card:before{width:30%;height:2px;right:8%;top:-1px}.gate-card:after{width:2px;height:28%;left:-1px;bottom:14%}
.signal-mark{height:34px;display:flex;gap:8px;align-items:end;margin-bottom:24px}.signal-mark span{display:block;width:4px;background:var(--blue);box-shadow:0 0 10px var(--blue)}.signal-mark span:nth-child(1){height:10px}.signal-mark span:nth-child(2){height:22px}.signal-mark span:nth-child(3){height:34px;background:var(--magenta);box-shadow:0 0 10px var(--magenta)}
.eyebrow,.status,.fineprint,label{font:700 10px var(--mono);letter-spacing:.13em}.eyebrow{color:var(--magenta);margin:0 0 13px}h1{font:900 clamp(38px,8vw,68px)/.92 var(--body);letter-spacing:-.045em;margin:0;color:#ff4b43}h1 span{color:var(--blue)}.intro{max-width:520px;color:#b9b1c6;line-height:1.65;margin:22px 0 30px}
label{display:block;color:#aaa2b8;margin-bottom:8px}.pin-row{display:grid;grid-template-columns:1fr auto;gap:9px}input,button{min-height:48px;border-radius:0;font:inherit}input{min-width:0;background:#05040a;color:var(--ink);border:1px solid #3a3150;padding:0 15px;font:700 22px var(--mono);letter-spacing:.28em}input:focus{outline:2px solid var(--blue);outline-offset:2px}button{position:relative;padding:0 24px;border:1px solid var(--blue);background:#0b0a12;color:var(--blue);clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);font:700 18px var(--display);letter-spacing:.09em;cursor:pointer}button:hover{background:#10202a;box-shadow:0 0 22px rgba(83,228,255,.18)}
.status{min-height:14px;margin:12px 0 0;color:var(--muted)}.status.denied{color:var(--danger)}.status.granted{color:var(--green)}.agreement{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line);color:#b9b1c6;font-size:12px;line-height:1.6}.agreement a{color:var(--blue)}.fineprint{color:#625b70;margin:20px 0 0}
.gate-card.shake{animation:shake .28s linear}@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
@media(max-width:560px){.gate-card{padding:36px 22px 28px}.pin-row{grid-template-columns:1fr}.pin-row button{width:100%}.intro{font-size:13px}}
