:root { --ink:#eff5ff; --muted:#9caac2; --blue:#43a5ff; --violet:#765cff; --night:#060a16; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--night); }
body { margin:0; min-height:100vh; color:var(--ink); font-family:"DM Sans",sans-serif; background:var(--night); }
.page-shell { position:relative; isolation:isolate; min-height:100vh; overflow:hidden; display:flex; flex-direction:column; padding:32px clamp(24px,7vw,112px) 26px; }
.grid { position:absolute; z-index:-2; inset:0; opacity:.34; background-image:linear-gradient(rgba(98,149,227,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(98,149,227,.11) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,black,rgba(0,0,0,.22)); }
.glow { position:absolute; z-index:-1; border-radius:50%; filter:blur(5px); pointer-events:none; }
.glow-one { width:620px; height:620px; left:-260px; top:100px; background:radial-gradient(circle,rgba(35,117,255,.28),transparent 66%); }
.glow-two { width:580px; height:580px; right:-260px; bottom:-190px; background:radial-gradient(circle,rgba(113,57,255,.24),transparent 66%); }
.topbar, footer { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font:700 24px/1 "Outfit",sans-serif; letter-spacing:-1px; }
.brand > span:last-child span { color:var(--blue); }
.brand-mark { width:32px; height:26px; display:flex; align-items:center; gap:3px; transform:rotate(-42deg); }
.brand-mark i { width:12px; height:21px; display:block; border:3px solid var(--blue); border-radius:14px 14px 4px 14px; box-shadow:0 0 17px rgba(67,165,255,.65); }
.brand-mark i:last-child { border-color:#8c6fff; border-radius:14px 14px 14px 4px; box-shadow:0 0 17px rgba(118,92,255,.6); }
.status { color:#b7c5dc; font-size:13px; display:flex; align-items:center; gap:8px; }
.status span { display:block; width:8px; height:8px; background:#43e6a2; border-radius:50%; box-shadow:0 0 0 5px rgba(67,230,162,.11),0 0 13px #43e6a2; }
.hero { width:min(790px,100%); margin:auto; padding:80px 0 50px; text-align:center; }
.eyebrow { color:#74b6ff; font-size:11px; font-weight:700; letter-spacing:2.4px; margin:0 0 22px; }
h1 { margin:0; font:700 clamp(43px,7vw,77px)/1.03 "Outfit",sans-serif; letter-spacing:-3.3px; }
h1 em { font-style:normal; background:linear-gradient(95deg,#45b7ff 12%,#8c6fff 83%); background-clip:text; -webkit-background-clip:text; color:transparent; }
.intro { max-width:610px; color:var(--muted); margin:28px auto 38px; font-size:17px; line-height:1.65; }
.notify-card { padding:25px; text-align:left; background:linear-gradient(135deg,rgba(18,32,59,.78),rgba(12,18,38,.78)); border:1px solid rgba(144,184,255,.2); border-radius:18px; box-shadow:0 18px 70px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(12px); }
.notify-card strong { display:block; font:600 18px "Outfit",sans-serif; letter-spacing:-.25px; }
.notify-card > div span { display:block; color:#9ba9c0; font-size:13px; margin-top:5px; }
form { display:flex; gap:9px; margin-top:19px; }
input { flex:1; min-width:0; border:1px solid rgba(148,176,223,.22); outline:0; border-radius:9px; padding:0 15px; height:48px; color:#f6f9ff; background:rgba(3,8,21,.54); font:14px "DM Sans",sans-serif; transition:border-color .2s; }
input:focus { border-color:#48a7ff; }
button { border:0; border-radius:9px; padding:0 18px; cursor:pointer; background:linear-gradient(100deg,#319aff,#7460ff); color:#fff; font:700 13px "DM Sans",sans-serif; box-shadow:0 8px 25px rgba(70,126,255,.25); transition:transform .2s,filter .2s; }
button:hover { transform:translateY(-2px); filter:brightness(1.1); } button b { margin-left:8px; font-size:17px; }
.form-message { min-height:0; margin:0; color:#71edb8; font-size:13px; }
.features { display:flex; justify-content:center; gap:25px; flex-wrap:wrap; color:#a6b4ca; font-size:13px; margin-top:30px; }
.features span { display:flex; align-items:center; gap:7px; }.features b { color:#69b7ff; font-size:18px; }
footer { color:#8391a7; font-size:12px; } footer a { color:#a8b6cc; text-decoration:none; transition:color .2s; } footer a:hover { color:#6ab7ff; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (max-width:560px) { .page-shell { padding:24px 20px 22px; } .brand { font-size:21px; } .status { font-size:11px; } .hero { padding:72px 0 48px; } h1 { letter-spacing:-2.5px; } .intro { font-size:15px; margin:23px auto 31px; } .notify-card { padding:20px; } form { flex-direction:column; } button { height:48px; } .features { gap:11px 16px; font-size:11px; } footer { align-items:flex-start; flex-direction:column; gap:8px; } }