/* ===== nav (fixed) ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:20px 52px;opacity:0;transition:opacity .8s ease .1s,background .3s,border-color .3s;
  border-bottom:1px solid transparent}
body.revealed .nav{opacity:1}
.nav.scrolled{background:rgba(8,10,14,.72);backdrop-filter:blur(14px);border-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:.2px}
.mk{width:30px;height:30px;border-radius:9px;display:inline-flex;overflow:hidden;flex:none;
  box-shadow:0 0 14px rgba(37,99,235,.4)}
.mk img{width:100%;height:100%;display:block;object-fit:cover}
.nlinks{display:flex;gap:26px;font-size:13.5px;color:var(--muted);font-weight:500}
.nlinks a:hover{color:var(--ink)}
.navcta{padding:9px 17px;font-size:13px;border:1px solid var(--line2);border-radius:9px;color:var(--ink)}
.navcta:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:900px){.nlinks{display:none}}

/* ===== hero ===== */
.hero{position:relative;z-index:5;min-height:100vh;display:grid;grid-template-columns:1fr 380px;
  align-items:center;gap:40px;padding:120px 52px 90px;opacity:0}
body.revealed .hero{opacity:1;transition:opacity 1s ease}
@media(max-width:1000px){.hero{grid-template-columns:1fr}.panels{display:none}}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px rgba(47,211,154,.7);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
h1{font-size:clamp(40px,6vw,82px);font-weight:800;letter-spacing:-2px;line-height:1.0}
h1 .grad{background:linear-gradient(100deg,var(--cyan),var(--green));-webkit-background-clip:text;background-clip:text;
  color:transparent;filter:drop-shadow(0 0 22px rgba(52,216,238,.25))}
.lede{max-width:520px;margin:24px 0 0;color:var(--muted);font-size:16.5px}
.cta{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:12px;font-size:14.5px;
  font-weight:600;cursor:pointer;transition:.22s}
.btn.primary{color:#06121a;background:linear-gradient(180deg,#f4f8ff,#dbe6f5);border:none;
  box-shadow:0 10px 30px -12px rgba(52,216,238,.5)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 42px -12px rgba(52,216,238,.72)}
.btn.ghost{color:var(--ink);border:1px solid var(--line2);background:rgba(255,255,255,.03)}
.btn.ghost:hover{background:rgba(255,255,255,.08);border-color:var(--accent)}
.btn .px{width:14px;height:14px;border-radius:3px;background:
  conic-gradient(#06121a 0 25%,transparent 0 50%,#06121a 0 75%,transparent 0);background-size:7px 7px;opacity:.75}
.backed{display:flex;align-items:center;gap:14px;margin-top:40px;flex-wrap:wrap}
.backed label{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--soft)}
.backed span:not(label){font-size:13px;color:var(--muted);opacity:.8}

/* ===== glass panels ===== */
.panels{display:grid;gap:16px;align-content:center}
.glass{border:1px solid var(--line);border-radius:16px;background:var(--glass);backdrop-filter:blur(18px);
  padding:20px;box-shadow:0 30px 80px -50px rgba(0,0,0,.9)}
.g-bar{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;color:var(--muted);margin-bottom:14px;
  display:flex;align-items:center;gap:8px}
.g-bar.between{justify-content:space-between}
.g-bar .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.featured h3{font-size:22px;font-weight:700;letter-spacing:-.5px;margin-bottom:8px}
.featured p{color:var(--muted);font-size:13.5px;margin-bottom:14px}
.mini{font-size:13px;font-weight:600;color:var(--cyan)}
.feed ul{list-style:none;display:grid;gap:11px}
.feed li{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;font-size:13px}
.feed li .t{font-family:var(--mono);font-size:10px;color:var(--soft)}
.feed li .n{color:var(--ink);font-family:var(--mono);letter-spacing:.3px}
.feed li .s{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green)}
.feed li.dim .s{background:var(--soft);box-shadow:none}

/* hero footer bar */
.hero-foot{position:absolute;left:52px;right:52px;bottom:26px;display:flex;align-items:flex-end;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--soft)}
.hero-foot #formName{color:var(--accent)}
.scrollcue{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--soft)}
.scrollcue i{width:1px;height:26px;background:linear-gradient(var(--accent),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* reveal + scramble */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.sc{white-space:pre-wrap}

/* ===== feature callouts ===== */
.callouts{position:fixed;inset:0;z-index:6;pointer-events:none;transition:opacity .4s}
.colines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.colines line{stroke-width:1.2;stroke-dasharray:2 5;opacity:.85;animation:coDash 14s linear infinite;transition:stroke .5s}
@keyframes coDash{to{stroke-dashoffset:-140}}
.colines .anchor{opacity:.9;transform-box:fill-box;transform-origin:center;animation:coPulse 2.6s ease-in-out infinite;transition:fill .5s}
@keyframes coPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.7);opacity:.45}}
.callout{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:11px;
  background:rgba(10,14,20,.55);backdrop-filter:blur(10px);border:1px solid var(--line2);white-space:nowrap;
  transform:translateY(8px);opacity:0;transition:opacity .55s,transform .55s,border-color .5s}
.callout.in{opacity:1;transform:none}
.callout .co-dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 9px currentColor}
.callout .co-body{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.callout .co-tag{font-family:var(--mono);font-size:9px;letter-spacing:1.4px;color:var(--soft)}
.callout .co-text{font-size:13px;font-weight:600;color:var(--ink)}
@media(max-width:1040px){.callouts{display:none}}