:root{
  color-scheme:dark;
  --bg:#060a0e;--ink:#f2f7fb;--muted:#a9b8c5;--dim:#7a8d9c;
  --cyan:#21d7ed;--orange:#ff7e26;--line:#6e8b9b2c;
  --font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;min-height:100svh;position:relative;isolation:isolate;overflow-x:hidden;
  color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- background ---------- */
body:before{content:"";pointer-events:none;position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(ellipse 55% 50% at 50% 38%,#10304399 0%,transparent 70%),
    radial-gradient(ellipse 35% 36% at 78% 70%,#40211538 0%,transparent 75%),var(--bg)}
body:after{content:"";pointer-events:none;position:fixed;inset:0;z-index:-1;opacity:.12;
  background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent)}
.aurora{position:fixed;inset:-20%;pointer-events:none;z-index:-2;filter:blur(30px);
  background:radial-gradient(circle at 28% 45%,#00baff18,transparent 24%),radial-gradient(circle at 72% 50%,#ff752b10,transparent 26%);
  animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.08)}}

/* ---------- layout ---------- */
.skip{position:absolute;left:-999px;top:8px;background:#0c303d;color:#fff;padding:8px 14px;border-radius:6px;z-index:10}
.skip:focus{left:12px}
.shell{min-height:100vh;min-height:100svh;max-width:1200px;margin:auto;padding:24px clamp(22px,6vw,72px) 20px;display:flex;flex-direction:column}
header,footer{display:flex;justify-content:space-between;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;color:#eaf6fb;text-decoration:none;letter-spacing:.08em;font-size:14px;font-weight:800}
.brand img{width:34px;height:34px;border-radius:9px}
.brand b{color:var(--orange);font-weight:800}
.header-note{font-size:10px;font-weight:700;letter-spacing:.22em;color:#8a9eae;text-transform:uppercase}
main{flex:1;display:flex;justify-content:center;align-items:center;text-align:center;padding:18px 0 28px}
.hero{max-width:780px;width:100%;display:flex;align-items:center;flex-direction:column}

/* ---------- hero pieces ---------- */
.status{border:1px solid #23717b80;background:#09222c99;color:#b3eef4;border-radius:999px;padding:8px 15px;display:inline-flex;gap:10px;align-items:center;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.status i{height:7px;width:7px;border-radius:50%;background:#28e8c9;box-shadow:0 0 12px #28e8c9;display:block;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}

.emblem{margin-top:4px;position:relative;width:clamp(150px,calc(100vh - 560px),340px);width:clamp(150px,calc(100svh - 560px),340px);aspect-ratio:1;display:grid;place-items:center}
.emblem.small{width:clamp(140px,26vh,230px)}
.emblem:before{content:"";position:absolute;inset:14%;border-radius:50%;
  box-shadow:0 0 110px 30px #03c9ed1c,0 0 90px 34px #ff892010;animation:breathe 6s ease-in-out infinite}
.emblem img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 14px #0bbfda26);animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}

.eyebrow{margin-top:4px;color:var(--cyan);font-weight:700;font-size:clamp(9px,1.7vw,12px);letter-spacing:clamp(.17em,.5vw,.39em);text-transform:uppercase}
h1{margin:14px 0 10px;letter-spacing:-.06em;font-size:clamp(46px,9vw,84px);font-weight:780;line-height:1.02}
h1 .grad{background:linear-gradient(110deg,#fbfeff 26%,#9eafbf);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
h1 .dot{color:var(--orange)}
.description{margin:0;max-width:540px;color:var(--muted);font-size:clamp(14px,2vw,17px);line-height:1.75}

.chips{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chips li{border:1px solid #2a4452;background:#0b1820aa;color:#c4d3de;border-radius:999px;padding:7px 14px;font-size:12px;font-weight:600;letter-spacing:.02em}

.small-rule{margin:20px auto 18px;width:68px;height:2px;border-radius:3px;background:linear-gradient(90deg,var(--cyan) 0 45%,var(--orange) 45% 100%)}

.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn{display:inline-flex;justify-content:center;gap:10px;align-items:center;text-decoration:none;font:inherit;color:#edfaff;font-size:13px;font-weight:700;border-radius:10px;padding:14px 22px;cursor:pointer;
  transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}
.btn svg{width:17px;height:17px;stroke:var(--cyan);flex:none}
.btn.primary{border:1px solid #2f6577;background:linear-gradient(120deg,#0e3948,#142631)}
.btn.ghost{border:1px solid #2a3e4a;background:transparent;color:#c4d3de}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);border-color:#43e1eb;box-shadow:0 6px 30px #06d4fb26;outline:0}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.toast{position:fixed;left:50%;bottom:78px;transform:translate(-50%,8px);max-width:calc(100vw - 40px);background:#0c303df2;border:1px solid #2f6577;border-radius:10px;padding:9px 16px;font-size:12px;font-weight:700;color:#8ff5e2;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

footer{padding-top:16px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.035em;color:var(--dim)}
footer a{color:#a7c3d1;text-decoration:none}
footer a:hover{text-decoration:underline}

/* ---------- entrance ---------- */
.rise{opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}.d6{animation-delay:.55s}.d7{animation-delay:.62s}.d8{animation-delay:.7s}

/* ---------- responsive ---------- */
@media(max-width:560px){
  .shell{padding:16px 20px 14px}
  .header-note{display:none}
  main{padding:10px 0 16px}
  .status{font-size:9px;letter-spacing:.14em;padding:7px 12px}
  .emblem{width:clamp(130px,calc(100svh - 600px),240px)}
  h1{font-size:clamp(40px,12.5vw,56px);margin:12px 0 8px}
  .description{font-size:14px;line-height:1.65}
  .chips{gap:6px;margin-top:14px}
  .chips li{font-size:11px;padding:5px 10px}
  .small-rule{margin:16px auto 14px}
  .actions{flex-wrap:nowrap;width:100%;gap:10px}
  .btn{flex:1;padding:13px 10px;font-size:12.5px;gap:8px}
  .toast{bottom:64px}
  footer{font-size:10px;flex-direction:column;gap:6px;text-align:center;padding-top:12px}
}
@media(max-height:760px) and (min-width:561px){
  .chips{margin-top:16px}.small-rule{margin:18px auto}h1{margin:12px 0 10px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
}