/* ============================================================
   ONLYCYBER — secure broadcast channel
   ============================================================ */

/* ---------- 1. TOKENS ------------------------------------ */

:root{
  /* palette */
  --void:        #020817;
  --navy:        #06152F;
  --navy-lift:   #0A1E3D;
  --blue:        #087DF2;
  --cyan:        #08BFF5;
  --green:       #63D43B;
  --leek:        #D9FFB8;
  --ink:         #F4FAFF;
  --muted:       #8EA6C4;

  /* derived */
  --line:        rgba(8,191,245,.16);
  --line-strong: rgba(8,191,245,.34);
  --glow:        rgba(8,191,245,.30);

  /* type */
  --f-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* fluid scale — clamped so mobile never overflows */
  --t-hero:  clamp(2.35rem, 1.05rem + 6.1vw,  6.25rem);
  --t-h2:    clamp(1.75rem, 1.02rem + 3.0vw,  3.5rem);
  --t-h3:    clamp(1.05rem, .95rem  + .45vw,  1.35rem);
  --t-body:  clamp(1rem,    .97rem  + .18vw,  1.125rem);
  --t-lead:  clamp(1.05rem, .99rem  + .34vw,  1.3rem);
  --t-label: clamp(.66rem,  .63rem  + .12vw,  .78rem);

  /* metrics */
  --wrap: 1280px;
  --wrap-wide: 1440px;
  --gutter: clamp(1.15rem, .55rem + 2.4vw, 3rem);
  --sec-y: clamp(4.5rem, 2.6rem + 7.4vw, 9rem);
  --nav-h: 72px;
  --notch: 14px;

  /* notched terminal-panel corners (top-left + bottom-right) */
  --clip: polygon(
     var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)),
     calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));

  --ease: cubic-bezier(.22,.68,.28,1);
}

/* ---------- 2. RESET / BASE ------------------------------ */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--cyan); }
button{ font:inherit; color:inherit; }

h1,h2,h3{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.03;
  letter-spacing:-.012em;
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:var(--t-hero); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); letter-spacing:.02em; line-height:1.2; }
p{ margin:0; text-wrap:pretty; }

::selection{ background:var(--cyan); color:var(--void); }

.vh{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px; }

.skip{
  position:absolute; left:50%; top:0; transform:translate(-50%,-140%);
  z-index:200; background:var(--cyan); color:var(--void);
  font-family:var(--f-mono); font-size:.8rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.85rem 1.4rem; text-decoration:none; transition:transform .18s var(--ease);
}
.skip:focus-visible{ transform:translate(-50%,0); }

/* ---------- 3. LAYOUT ------------------------------------ */

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--wide{ max-width:var(--wrap-wide); }

.section{ position:relative; padding-block:var(--sec-y); scroll-margin-top:calc(var(--nav-h) + 12px); }
.section > .wrap{ position:relative; z-index:2; }

.section + .section::before{
  content:""; position:absolute; inset-inline:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 22%,var(--line-strong) 78%,transparent);
}

/* ---------- 4. AMBIENT BACKDROP -------------------------- */

.backdrop{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

/* circuit grid */
.backdrop::before{
  content:""; position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(8,191,245,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,191,245,.055) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 110% 78% at 50% 30%, #000 8%, transparent 76%);
          mask-image:radial-gradient(ellipse 110% 78% at 50% 30%, #000 8%, transparent 76%);
}
/* deep colour wash */
.backdrop::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(58rem 40rem at 50% -8%, rgba(8,125,242,.20), transparent 66%),
    radial-gradient(46rem 34rem at 96% 22%, rgba(8,191,245,.10), transparent 62%),
    radial-gradient(40rem 34rem at 2% 74%,  rgba(99,212,59,.055), transparent 62%);
}

/* faint three-leaf brand motif */
.motif{
  position:absolute; inset:0; opacity:.5;
  background-image:url("leaf-motif.svg");
  background-size:340px 340px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 45%, #000, transparent 72%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 45%, #000, transparent 72%);
}

/* slow vertical scan bar */
.scanbar{
  position:absolute; inset-inline:0; height:34vh; top:0;
  background:linear-gradient(180deg,transparent,rgba(8,191,245,.045) 46%,rgba(8,191,245,.075) 52%,transparent);
  animation:scanDown 17s linear infinite;
}
@keyframes scanDown{ from{ transform:translateY(-40vh); } to{ transform:translateY(115vh); } }

/* horizontal data packets */
.packets{ position:absolute; inset:0; }
.packets i{
  position:absolute; left:-14%;
  width:clamp(56px,9vw,130px); height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:0; animation:packet linear infinite;
}
.packets i:nth-child(1){ top:16%; animation-duration:9s;  animation-delay:0s; }
.packets i:nth-child(2){ top:37%; animation-duration:13s; animation-delay:2.4s; }
.packets i:nth-child(3){ top:58%; animation-duration:11s; animation-delay:5.1s; }
.packets i:nth-child(4){ top:79%; animation-duration:15s; animation-delay:7.8s; }
.packets i:nth-child(5){ top:26%; animation-duration:12s; animation-delay:9.6s;
  background:linear-gradient(90deg,transparent,var(--green),transparent); }
@keyframes packet{
  0%{ transform:translateX(0); opacity:0; }
  8%{ opacity:.85; }
  88%{ opacity:.85; }
  100%{ transform:translateX(135vw); opacity:0; }
}

/* ---------- 5. TERMINAL LABEL ---------------------------- */

.label{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-mono); font-size:var(--t-label); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:1.15rem;
}
.label::before{
  content:""; width:.62em; height:.62em; flex:none;
  background:var(--green); box-shadow:0 0 10px var(--green);
  animation:blip 2.1s steps(1) infinite;
}
@keyframes blip{ 0%,62%{ opacity:1; } 63%,100%{ opacity:.22; } }
.label--center{ display:flex; justify-content:center; }

/* ---------- 6. PANELS ------------------------------------ */
/* 1px gradient hairline + notched corners via two clipped layers */

.panel{
  position:relative;
  padding:1px;
  clip-path:var(--clip);
  background:linear-gradient(155deg,var(--line-strong),rgba(8,191,245,.07) 46%,rgba(99,212,59,.20));
  transition:background .35s var(--ease);
}
.panel__in{
  position:relative; height:100%; overflow:hidden;
  clip-path:var(--clip);
  background:linear-gradient(160deg, rgba(10,30,61,.86), rgba(4,13,32,.90));
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  padding:clamp(1.35rem,.85rem + 1.5vw,2rem);
}

.panel--live{ transition:transform .4s var(--ease), background .35s var(--ease); }
.panel--live .panel__in::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(8,191,245,.12) 50%,transparent 62%);
  transform:translateX(-115%); transition:transform .8s var(--ease);
}
@media (hover:hover){
  .panel--live:hover{
    transform:translateY(-4px);
    background:linear-gradient(155deg,var(--cyan),rgba(8,191,245,.22) 46%,var(--green));
  }
  .panel--live:hover .panel__in::after{ transform:translateX(115%); }
}
.panel--live:focus-within{
  background:linear-gradient(155deg,var(--cyan),rgba(8,191,245,.22) 46%,var(--green));
}

/* ---------- 7. BUTTONS ----------------------------------- */

.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:52px; padding:.85rem 1.6rem;
  font-family:var(--f-mono); font-size:.82rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); background:transparent;
  border:1px solid var(--line-strong);
  clip-path:var(--clip);
  cursor:pointer;
  transition:color .25s var(--ease), background .25s var(--ease),
             border-color .25s var(--ease), transform .18s var(--ease);
}
.btn__arrow{ transition:transform .3s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

/* fast cyan scan across the surface on hover */
.btn::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.30) 50%,transparent 66%);
  transform:translateX(-110%);
}
.btn:hover::after,
.btn:focus-visible::after{ animation:btnScan .55s var(--ease) forwards; }
@keyframes btnScan{ to{ transform:translateX(110%); } }
.btn:active{ transform:translateY(1px); }

.btn--primary{
  background:linear-gradient(100deg,var(--blue),var(--cyan));
  border-color:transparent; color:#01121F;
  box-shadow:0 0 0 1px rgba(8,191,245,.5), 0 10px 32px -12px var(--glow);
}
.btn--primary:hover{ background:linear-gradient(100deg,var(--cyan),var(--blue)); }

.btn--ghost:hover{ background:rgba(8,191,245,.10); border-color:var(--cyan); }

.btn--sm{ min-height:44px; padding:.6rem 1.1rem; font-size:.74rem; }

/* pending — a launch link that is not yet verified */
.btn[data-pending]{
  cursor:not-allowed; color:var(--muted);
  background:rgba(8,191,245,.05); border-color:var(--line);
  box-shadow:none;
}
.btn[data-pending]::after{ display:none; }
.btn[data-pending]:hover{ transform:none; }
.btn[data-pending] .btn__arrow{ display:none; }

.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }
.btn-row--center{ justify-content:center; }

/* ---------- 8. NAV --------------------------------------- */

.nav{
  position:fixed; inset-inline:0; top:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent; border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.nav.is-stuck{
  background:rgba(4,13,32,.86);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__bar{
  width:100%; max-width:var(--wrap-wide); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:1rem;
}

.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:none; }
.brand img{ width:38px; height:auto; filter:drop-shadow(0 0 12px rgba(8,191,245,.45)); }
.brand span{
  font-family:var(--f-display); font-weight:700; font-size:1.02rem;
  letter-spacing:.09em; color:var(--ink);
}

.nav__links{
  display:flex; align-items:center; gap:.15rem;
  margin:0 auto; padding:0; list-style:none;
}
.nav__link{
  position:relative; display:block; padding:.6rem .8rem;
  font-family:var(--f-mono); font-size:.76rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  transition:color .22s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.35rem; height:1px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="true"]{ color:var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="true"]::after{ transform:scaleX(1); }

.nav__actions{ display:flex; align-items:center; gap:.6rem; flex:none; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none;
  color:var(--muted); background:transparent;
  border:1px solid var(--line); border-radius:2px;
  text-decoration:none; cursor:pointer;
  transition:color .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
}
.icon-btn:hover{ color:var(--ink); border-color:var(--cyan); background:rgba(8,191,245,.10); }
.icon-btn svg{ width:17px; height:17px; fill:currentColor; }

.burger{ display:none; }
.burger span{
  display:block; width:19px; height:2px; background:currentColor;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span + span{ margin-top:4px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* mobile drawer — full-width terminal panel */
.drawer{
  position:fixed; inset-inline:0; top:var(--nav-h); z-index:99;
  background:rgba(3,11,27,.97);
  -webkit-backdrop-filter:blur(18px);
          backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line-strong);
  padding:1rem var(--gutter) 1.6rem;
  max-height:calc(100dvh - var(--nav-h)); overflow-y:auto;
  animation:drawerIn .26s var(--ease);
}
.drawer[hidden]{ display:none; }
@keyframes drawerIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
.drawer ul{ list-style:none; margin:0 0 1.2rem; padding:0; }
.drawer li + li{ border-top:1px solid var(--line); }
.drawer__link{
  display:flex; align-items:center; gap:.75rem;
  min-height:52px; padding:.55rem 0;
  font-family:var(--f-mono); font-size:.86rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
}
.drawer__link::before{ content:"//"; color:var(--cyan); font-size:.78em; }
.drawer .btn{ width:100%; }

@media (max-width:1000px){
  .nav__links{ display:none; }
  .nav__actions{ margin-left:auto; }
  .burger{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; }
  .nav__actions .btn--nav{ display:none; }
}

/* ---------- 9. HERO -------------------------------------- */

.hero{
  position:relative; z-index:2;
  min-height:100svh;
  padding-top:calc(var(--nav-h) + clamp(1.5rem,4vh,3rem));
  padding-bottom:clamp(3rem,7vh,5rem);
  display:flex; align-items:center;
  text-align:center;
  overflow:hidden;
}
.hero__inner{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.1rem,2.2vh,1.7rem);
}

/* official banner art, edges dissolved into the page */
.hero__art{ position:relative; width:min(100%,900px); margin-block:clamp(-1rem,-2vh,0rem); }
.hero__art img{
  width:100%; height:auto;
  -webkit-mask-image:radial-gradient(ellipse 62% 74% at 50% 50%, #000 42%, transparent 82%);
          mask-image:radial-gradient(ellipse 62% 74% at 50% 50%, #000 42%, transparent 82%);
}

/* radial scan rings behind the mark */
.rings{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(78vw,560px); aspect-ratio:1; pointer-events:none;
}
.rings i{
  position:absolute; inset:0; border:1px solid var(--line-strong); border-radius:50%;
  opacity:0; animation:ringOut 6s var(--ease) infinite;
}
.rings i:nth-child(2){ animation-delay:2s; }
.rings i:nth-child(3){ animation-delay:4s; }
@keyframes ringOut{
  0%{ transform:scale(.42); opacity:0; }
  18%{ opacity:.55; }
  100%{ transform:scale(1.35); opacity:0; }
}
.hero__glow{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(88vw,700px); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(8,125,242,.24), transparent 62%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{ 50%{ transform:scale(1.09); opacity:.78; } }

.hero h1{ text-shadow:0 0 46px rgba(8,191,245,.34); }
.hero__lead{ max-width:60ch; color:var(--muted); font-size:var(--t-lead); }
.hero .btn-row{ margin-top:.35rem; }

/* the radial mask trims the 3:1 art hard, so let it bleed past the
   gutter on narrow screens — .hero clips the masked edges anyway */
@media (max-width:700px){
  .hero__art{ width:min(134%,620px); }
}
@media (max-width:560px){
  .hero .btn-row{ width:100%; flex-direction:column; }
  .hero .btn{ width:100%; }
}

/* scroll cue */
.cue{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  margin-top:.5rem;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
}
.cue i{ display:block; width:1px; height:38px; background:linear-gradient(180deg,var(--cyan),transparent); }
.cue:hover{ color:var(--cyan); }

/* ---------- 10. CONTRACT FIELD --------------------------- */

.ca{ width:min(100%,560px); }
.ca__box{
  display:flex; align-items:stretch;
  border:1px solid var(--line-strong);
  background:rgba(2,8,23,.75);
  clip-path:var(--clip);
  text-align:left;
}
.ca__key{
  display:flex; align-items:center; flex:none;
  padding:.7rem .55rem .7rem .95rem;
  font-family:var(--f-mono); font-size:.78rem; font-weight:700;
  letter-spacing:.14em; color:var(--cyan);
}
.ca__val{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center;
  padding:.7rem .3rem;
  font-family:var(--f-mono); font-size:.8rem; color:var(--ink);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.ca__val[data-pending]{ color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
.ca__copy{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-width:52px; min-height:44px; padding:0 .9rem;
  background:rgba(8,191,245,.10); border:0; border-left:1px solid var(--line-strong);
  color:var(--cyan); cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.ca__copy:hover:not(:disabled){ background:rgba(8,191,245,.22); }
.ca__copy:disabled{ color:var(--muted); cursor:not-allowed; background:rgba(8,191,245,.04); }
.ca__copy svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
.ca__copy.is-done{ background:var(--green); color:#04210A; border-left-color:var(--green); }
.ca__note{
  display:block; margin-top:.55rem; min-height:1.1em;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--green);
  opacity:0; transition:opacity .2s var(--ease);
}
.ca__note.is-on{ opacity:1; }

/* ---------- 11. SPLIT (origin) --------------------------- */

.split{ display:grid; gap:clamp(2rem,4vw,4.5rem); align-items:center; }
@media (min-width:900px){ .split{ grid-template-columns:1.05fr .95fr; } }
@media (max-width:899px){
  .split{ grid-template-areas:"m" "t"; }
  .split__media{ grid-area:m; }
  .split__body{ grid-area:t; }
}
.split__media{ position:relative; }
.split__media .panel__in{ padding:0; }
.split__media img{ width:100%; height:auto; }

.prose > * + *{ margin-top:1.15rem; }
.prose p{ color:var(--muted); }
.prose h2 + p{ margin-top:1.5rem; }

/* ---------- 12. GRIDS / CARDS ---------------------------- */

.grid{ display:grid; gap:clamp(1rem,1.6vw,1.5rem); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); }

.card__ico{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:1rem;
  border:1px solid var(--line-strong); color:var(--cyan);
  background:rgba(8,191,245,.07);
}
.card__ico svg{
  width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.card h3{ color:var(--ink); }
.card p{ margin-top:.6rem; color:var(--muted); font-size:.95rem; }
.card__no{
  display:block; margin-bottom:.55rem;
  font-family:var(--f-mono); font-size:.66rem; font-weight:700; letter-spacing:.2em;
  color:var(--green);
}

/* ---------- 13. CYBERLEEK PROFILE ------------------------ */

.profile{ display:grid; gap:clamp(1.5rem,3.5vw,3.5rem); align-items:center; }
@media (min-width:940px){ .profile{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); } }
.profile__media .panel__in{ padding:0; }
.profile__media img{ width:100%; }
.profile__cards{ display:grid; gap:clamp(.9rem,1.4vw,1.25rem); }
@media (min-width:560px){ .profile__cards{ grid-template-columns:1fr 1fr; } }

/* ---------- 14. PROTOCOL --------------------------------- */

.protocol__halo{
  position:absolute; inset-inline:0; top:0; height:min(62vw,620px);
  z-index:1; pointer-events:none; overflow:hidden;
}
.protocol__halo img{
  width:min(1100px,124%); margin-inline:auto; opacity:.16;
  -webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 46%, #000 18%, transparent 74%);
          mask-image:radial-gradient(ellipse 58% 62% at 50% 46%, #000 18%, transparent 74%);
}

/* verified facts strip */
.facts{
  margin-top:clamp(1.5rem,2.6vw,2.25rem);
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  background:var(--line);
  border:1px solid var(--line-strong);
  clip-path:var(--clip);
}
.facts > div{ background:rgba(4,13,32,.88); padding:1.05rem 1.25rem; min-width:0; }
.facts dt{
  margin-bottom:.4rem;
  font-family:var(--f-mono); font-size:.64rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.facts dd{
  margin:0; font-family:var(--f-mono); font-size:.92rem; font-weight:700; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- 15. ACCESS SEQUENCE -------------------------- */

.steps{
  position:relative;
  display:grid; gap:clamp(1rem,1.6vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
@media (min-width:1080px){
  .steps::before{
    content:""; position:absolute; left:6%; right:6%; top:52px; height:1px; z-index:0;
    background:repeating-linear-gradient(90deg,var(--line-strong) 0 8px,transparent 8px 16px);
  }
}
.step{ position:relative; z-index:1; }
.step__no{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-bottom:1rem;
  font-family:var(--f-mono); font-size:.9rem; font-weight:700;
  color:var(--void); background:linear-gradient(135deg,var(--cyan),var(--blue));
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.step h3{ font-size:1.02rem; }
.step p{ margin-top:.6rem; color:var(--muted); font-size:.94rem; }

.notice{
  margin-top:clamp(1.4rem,2.4vw,2rem);
  display:flex; gap:.9rem; align-items:flex-start;
  padding:1.05rem 1.25rem;
  border:1px solid rgba(99,212,59,.42);
  background:rgba(99,212,59,.07);
  clip-path:var(--clip);
  color:var(--leek); font-size:.95rem;
}
.notice svg{
  width:20px; height:20px; flex:none; margin-top:.2rem;
  fill:none; stroke:var(--green); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- 16. COMMUNITY BAND --------------------------- */

.band{ position:relative; overflow:hidden; padding-block:0; }
.band__media{ position:absolute; inset:0; z-index:0; }
.band__media img{ width:100%; height:100%; object-fit:cover; object-position:22% center; }
.band__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(2,8,23,.10) 0%, rgba(2,8,23,.72) 44%, rgba(2,8,23,.94) 72%),
    radial-gradient(46rem 30rem at 78% 50%, rgba(8,125,242,.24), transparent 66%);
}
.band__inner{
  position:relative; z-index:2;
  min-height:clamp(420px,52vw,560px);
  display:flex; align-items:center; justify-content:flex-end;
  padding-block:var(--sec-y);
}
.band__body{ max-width:34rem; }
.band__body p{ color:var(--muted); margin-top:1.1rem; }
.band__body .btn-row{ margin-top:1.9rem; }

@media (max-width:860px){
  .band{ --band-art:clamp(15rem,62vw,21rem); }
  /* Cover across the whole (tall) band blows the character up until the
     headline lands on his face. Pin the art to a fixed strip at the top
     and let the copy start below it. */
  .band__media{ inset:0 0 auto 0; height:var(--band-art,17rem); }
  .band__media img{ height:100%; object-position:32% 16%; }
  .band__scrim{
    background:linear-gradient(180deg,
      rgba(2,8,23,.18) 0%, rgba(2,8,23,.55) 42%,
      rgba(2,8,23,.92) 66%, var(--void) 80%);
  }
  .band__inner{
    justify-content:center; text-align:center; min-height:0;
    padding-top:calc(var(--band-art,17rem) - 1.5rem);
  }
  .band__body .label{ justify-content:center; }
  .band__body .btn-row{ flex-direction:column; }
  .band__body .btn{ width:100%; }
}

/* ---------- 17. DISCLAIMER ------------------------------- */

.disclaimer .panel__in{ padding:clamp(1.5rem,1rem + 2vw,2.6rem); }
.disclaimer p{
  max-width:78ch;
  color:#C6D8EE; font-size:clamp(.98rem,.95rem + .2vw,1.08rem); line-height:1.75;
}
.disclaimer p + p{ margin-top:1rem; }

/* ---------- 18. FOOTER ----------------------------------- */

.footer{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  padding-block:clamp(2.5rem,5vw,3.5rem) 2rem;
}
.footer__top{
  display:flex; flex-wrap:wrap; gap:1.6rem 2rem;
  align-items:center; justify-content:space-between;
}
.footer__brand{ display:flex; align-items:center; gap:.85rem; }
.footer__brand img{ width:46px; }
.footer__brand b{ font-family:var(--f-display); font-size:1.1rem; letter-spacing:.09em; display:block; }
.footer__brand span{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; color:var(--cyan); }
.footer__links{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.4rem; }
.footer__links a{
  display:inline-flex; align-items:center; gap:.45rem; padding:.5rem 0;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
}
.footer__links a:hover{ color:var(--cyan); }
.footer__ca{ margin-top:2rem; max-width:560px; }
.footer__bottom{
  margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted);
}
.status{ display:inline-flex; align-items:center; gap:.55rem; color:var(--green); }
.status i{
  width:.55em; height:.55em; background:var(--green); border-radius:50%;
  box-shadow:0 0 9px var(--green); animation:pulse 1.9s ease-in-out infinite;
}
@keyframes pulse{ 50%{ opacity:.32; transform:scale(.82); } }

/* ---------- 19. SCROLL REVEAL ---------------------------- */

.rise{ opacity:0; transform:translateY(22px); }
.rise.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.rise.is-in[data-d="1"]{ transition-delay:.08s; }
.rise.is-in[data-d="2"]{ transition-delay:.16s; }
.rise.is-in[data-d="3"]{ transition-delay:.24s; }
/* no JS: never leave content invisible */
.no-js .rise{ opacity:1; transform:none; }

/* ---------- 20. MOTION / RESPONSIVE SAFETY --------------- */

/* trim non-essential ambience on small screens */
@media (max-width:760px){
  .scanbar,.packets,.rings{ display:none; }
  .backdrop::before{ background-size:44px 44px; }
  .motif{ opacity:.32; }
  .panel__in{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:linear-gradient(160deg,#0A1E3D,#040D20);
  }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rise{ opacity:1; transform:none; }
  .scanbar,.packets,.rings,.hero__glow{ display:none; }
}

@media (prefers-contrast: more){
  :root{
    --muted:#B9CCE4;
    --line:rgba(8,191,245,.40);
    --line-strong:rgba(8,191,245,.70);
  }
}