/* ═══════════════════════════════════════════════════════════════
   NethricAI — static landing page
   Short, top-to-bottom, no tabs or accordions. Same cyber palette:
   venom-green = proven, violet = reasoning.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg-0:#030712; --bg-1:#090d16; --bg-2:#0f172a; --bg-3:#1e293b; --bg-4:#334155;
  --line:rgba(255,255,255,0.05); --line-2:rgba(255,255,255,0.08); --line-3:rgba(255,255,255,0.15);
  --txt-0:#f8fafc; --txt-1:#94a3b8; --txt-2:#64748b; --txt-3:#475569;

  --acc:#00f2fe; --acc-2:#00e5a0; --acc-glow:rgba(0,242,254,0.15);
  --vio:#8b5cf6; --cyan:#06b6d4;
  --crit:#f43f5e; --med:#eab308;

  --r-s:8px; --r-m:12px; --r-l:20px;
  --sh-2:0 10px 40px -15px rgba(0,0,0,0.7);
  --sh-3:0 30px 80px -25px rgba(0,0,0,0.8);

  --mono:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --display:"Outfit","Plus Jakarta Sans",sans-serif;

  --shell:1140px;
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{font-family:var(--sans);background:var(--bg-0);color:var(--txt-0);font-size:15px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
button{background:none;border:0;cursor:pointer;font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse}
::selection{background:rgba(0,242,254,0.25);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg-0)}
::-webkit-scrollbar-thumb{background:var(--line-3);border:2px solid var(--bg-0);border-radius:20px}

.skip{position:absolute;left:-9999px;top:10px;z-index:999;background:var(--acc);color:#030712;
  padding:9px 16px;border-radius:8px;font-weight:600}
.skip:focus{left:16px}

/* ── ambient ─────────────────────────────────────────────── */
.bg-grid,.bg-glow,.bg-noise{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),
  linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:0.65;
  mask-image:radial-gradient(ellipse 80% 50% at 50% 0%,#000 15%,transparent 85%)}
.bg-glow{background:
  radial-gradient(900px 500px at 10% -10%,rgba(0,242,254,0.12),transparent 60%),
  radial-gradient(800px 500px at 90% -10%,rgba(139,92,246,0.12),transparent 60%),
  radial-gradient(1000px 600px at 50% 50%,rgba(0,229,160,0.04),transparent 70%)}
.bg-noise{opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Floating Aurora Orbs */
.aurora-orb {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  animation: float 20s infinite alternate ease-in-out;
}
.aurora-orb--cyan {
  background: var(--acc);
  top: -150px;
  left: 20%;
  animation-duration: 25s;
}
.aurora-orb--violet {
  background: var(--vio);
  top: 15%;
  right: 15%;
  animation-duration: 30s;
  animation-delay: -5s;
}
.aurora-orb--emerald {
  background: var(--acc-2);
  top: 45%;
  left: 10%;
  animation-duration: 35s;
  animation-delay: -10s;
}

@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -60px) scale(1.1); }
  100% { transform: translate(-20px, 40px) scale(0.95); }
}

.shell{position:relative;z-index:1;width:min(var(--shell),calc(100% - 44px));margin-inline:auto}

/* ── reveal ──────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ── nav ─────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  border-bottom:1px solid transparent;transition:background 0.4s, border-color 0.4s, backdrop-filter 0.4s}
.nav.is-stuck{background:rgba(3,7,18,0.7);backdrop-filter:blur(20px) saturate(180%);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:24px;height:var(--nav-h)}

.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand-logo {
  height: 34px;
  width: auto;
  display: block;
}

.nav__links{display:flex;gap:4px;margin-left:auto}
.nav__links a{font-size:13.5px;font-weight:500;color:var(--txt-1);padding:8px 14px;border-radius:8px;transition:all 0.2s ease;border:1px solid transparent}
.nav__links a:hover{color:var(--txt-0);background:rgba(255,255,255,0.03);border-color:var(--line)}

.burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto;background:rgba(255,255,255,0.02);transition:all 0.2s}
.burger:hover{background:rgba(255,255,255,0.05);border-color:var(--line-3)}
.burger span{display:block;width:16px;height:1.5px;background:var(--txt-0);border-radius:2px;transition:.26s var(--ease)}
.burger.is-on span:first-child{transform:translateY(3.2px) rotate(45deg)}
.burger.is-on span:last-child{transform:translateY(-3.2px) rotate(-45deg)}

/* ── shared type ─────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:16px;font-weight:500}
.eyebrow::before{content:"";width:20px;height:1.5px;background:var(--acc);opacity:.75}

h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.015em}
h2{font-size:clamp(26px,3.2vw,36px);line-height:1.2;max-width:34ch;text-wrap:balance}
h2.big{font-size:clamp(28px,4vw,44px);max-width:22ch;line-height:1.15;letter-spacing:-.02em}
.lede{font-size:16px;color:var(--txt-1);margin-top:18px;line-height:1.7;max-width:66ch;font-weight:400}
.tiny{font-size:12px;color:var(--txt-2);line-height:1.55}
.tiny--pad{margin-top:14px;max-width:76ch}

.dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none;display:inline-block;
  box-shadow:0 0 0 3px rgba(0,229,160,.13)}
.dot--amber{background:var(--med);box-shadow:0 0 0 3px rgba(255,201,61,.12)}
.dot--off{background:var(--txt-3);box-shadow:none}

/* ── buttons / commands ──────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 20px;
  border-radius:10px;font-size:13.5px;font-weight:600;border:1px solid var(--line-2);
  background:var(--bg-3);transition:.2s var(--ease)}
.btn svg{width:16px;height:16px;flex:none;fill:currentColor;stroke:none}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:linear-gradient(180deg,var(--acc),var(--acc-2));border-color:transparent;
  color:#04120d;font-weight:700;box-shadow:0 6px 22px -6px rgba(0,229,160,.5)}
.btn--primary:hover{box-shadow:0 12px 32px -8px rgba(0,229,160,.6);filter:brightness(1.06)}

.tlink{display:inline-block;font-size:13.5px;color:var(--acc);font-weight:500;transition:.16s}
.tlink:hover{opacity:.75}

.cmd{display:flex;align-items:center;gap:10px;padding:12px 15px;border-radius:10px;
  background:var(--bg-1);border:1px solid var(--line-2);max-width:520px;margin-top:18px}
.cmd code{flex:1;min-width:0;font-family:var(--mono);font-size:13px;color:var(--txt-0);
  overflow-x:auto;white-space:pre}
.cmd code::before{content:"$ ";color:var(--acc);opacity:.7}
.cmd--hero{border-color:rgba(0,229,160,.28);background:linear-gradient(180deg,rgba(0,229,160,.05),var(--bg-1))}

.copy{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;
  color:var(--txt-2);padding:4px 9px;border-radius:6px;border:1px solid var(--line-2);
  transition:.16s;flex:none}
.copy svg{width:12px;height:12px;fill:none;stroke:currentColor}
.copy:hover{color:var(--acc);border-color:rgba(0,229,160,.34);background:rgba(0,229,160,.07)}
.copy.is-done{color:var(--acc);border-color:rgba(0,229,160,.4)}

/* ── logo wall ───────────────────────────────────────────── */
.logowall{padding:32px 0;border-block:1px solid var(--line);background:rgba(255,255,255,0.015);backdrop-filter:blur(8px);position:relative;z-index:2}
.logowall__title{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-2);text-align:center;margin-bottom:22px;opacity:0.7}
.logowall__grid{display:flex;align-items:center;justify-content:center;gap:56px;flex-wrap:wrap}
.logo-item{display:flex;align-items:center;gap:10px;color:var(--txt-1);transition:all 0.25s ease;filter:opacity(0.5) grayscale(100%)}
.logo-item svg{width:22px;height:22px;fill:currentColor;transition:transform 0.25s ease}
.logo-item span{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-0.01em}
.logo-item:hover{filter:opacity(1) grayscale(0%);color:var(--acc);transform:translateY(-1px)}
.logo-item:hover svg{transform:scale(1.1)}

/* ── hero ────────────────────────────────────────────────── */
.hero{padding:calc(var(--nav-h) + 20px) 0 32px}
.hero__grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:40px;align-items:center;margin-bottom:32px}
.hero__left{display:flex;flex-direction:column;justify-content:center}
.hero__right{display:flex;justify-content:center;position:relative;z-index:2}

.ribbon{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--acc);background:rgba(0,242,254,.07);border:1px solid rgba(0,242,254,.24);
  padding:5px 13px;border-radius:20px;margin-bottom:14px;align-self:flex-start}
.hero__h1{font-size:clamp(38px,5vw,52px);line-height:1.06;letter-spacing:-.015em;font-weight:700;max-width:16ch}
.hero__h1 em{font-style:normal;color:var(--acc);text-shadow:0 0 34px var(--acc-glow)}
.hero__sub{font-size:15px;color:var(--txt-1);margin-top:14px;max-width:62ch;line-height:1.65}
.hero__sub b{color:var(--txt-0);font-weight:600}

/* ── Silicon Valley Workflow Pipeline ── */
.hero-workflow {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, rgba(15,23,42,0.4), rgba(9,13,22,0.7));
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  padding: 20px 24px;
  backdrop-filter: blur(16px);
  box-shadow: var(--sh-3);
  position: relative;
}
.workflow-header {
  margin-bottom: 16px;
}
.workflow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--acc);
  background: rgba(0, 242, 254, 0.08);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 242, 254, 0.15);
  margin-bottom: 6px;
}
.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 8px var(--acc);
  animation: pulse 1.8s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.25); }
}
.workflow-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--txt-0);
  letter-spacing: -0.01em;
  font-family: var(--display);
}
.workflow-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.workflow-line-bg {
  position: absolute;
  left: 14px;
  top: 15px;
  bottom: 15px;
  width: 2px;
  background: var(--line-2);
  z-index: 0;
}
.workflow-line-fill {
  position: absolute;
  left: 14px;
  top: 15px;
  bottom: 15px;
  width: 2px;
  background: linear-gradient(to bottom, var(--acc), var(--vio));
  z-index: 0;
  transform-origin: top;
  animation: flowLineFill 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.workflow-line-dot {
  position: absolute;
  left: 14px;
  top: 15px;
  bottom: 15px;
  width: 2px;
  z-index: 1;
  pointer-events: none;
}
.workflow-line-dot::after {
  content: "";
  position: absolute;
  left: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px 3px var(--acc);
  transform: translateY(-50%);
  animation: flowLineDot 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes flowLineFill {
  0%, 20% { transform: scaleY(0); opacity: 1; }
  25%, 40% { transform: scaleY(0.333); opacity: 1; }
  45%, 60% { transform: scaleY(0.666); opacity: 1; }
  65%, 80% { transform: scaleY(1); opacity: 1; }
  85%, 100% { transform: scaleY(0); opacity: 0; }
}

@keyframes flowLineDot {
  0%, 20% { top: 0%; opacity: 1; }
  25%, 40% { top: 33.3%; opacity: 1; }
  45%, 60% { top: 66.6%; opacity: 1; }
  65%, 80% { top: 100%; opacity: 1; }
  85%, 100% { top: 0%; opacity: 0; }
}
.workflow-step {
  display: flex;
  gap: 14px;
  position: relative;
  z-index: 1;
}
/* Synchronized Step highlight keyframes - Accumulating like a sand timer */
@keyframes stepActive1 {
  0%, 80% { opacity: 1; transform: translateX(4px); color: var(--acc); }
  85%, 100% { opacity: 0.55; transform: translateX(0); color: var(--txt-2); }
}
@keyframes stepActive2 {
  0%, 19% { opacity: 0.55; transform: translateX(0); color: var(--txt-2); }
  20%, 80% { opacity: 1; transform: translateX(4px); color: var(--acc); }
  85%, 100% { opacity: 0.55; transform: translateX(0); color: var(--txt-2); }
}
@keyframes stepActive3 {
  0%, 39% { opacity: 0.55; transform: translateX(0); color: var(--txt-2); }
  40%, 80% { opacity: 1; transform: translateX(4px); color: var(--acc); }
  85%, 100% { opacity: 0.55; transform: translateX(0); color: var(--txt-2); }
}
@keyframes stepActive4 {
  0%, 59% { opacity: 0.55; transform: translateX(0); color: var(--txt-2); }
  60%, 80% { opacity: 1; transform: translateX(4px); color: var(--acc); }
  85%, 100% { opacity: 0.55; transform: translateX(0); color: var(--txt-2); }
}

.workflow-step:nth-of-type(1) { animation: stepActive1 5s infinite ease-in-out; }
.workflow-step:nth-of-type(2) { animation: stepActive2 5s infinite ease-in-out; }
.workflow-step:nth-of-type(3) { animation: stepActive3 5s infinite ease-in-out; }
.workflow-step:nth-of-type(4) { animation: stepActive4 5s infinite ease-in-out; }
.step-icon {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-1);
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  flex-shrink: 0;
  transition: all 0.4s ease;
  box-shadow: var(--sh-2);
}
.step-icon svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.2;
}
.step-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.step-num {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--txt-3);
}
.step-info h4 {
  font-size: 13px;
  font-weight: 700;
  color: inherit;
  margin: 1px 0 2px;
  font-family: var(--display);
  transition: color 0.4s ease;
}
.step-info p {
  font-size: 11.5px;
  color: var(--txt-1);
  line-height: 1.4;
}
.step-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 4px;
  font-weight: 600;
}
.step-tag--warn {
  background: rgba(234, 179, 8, 0.08);
  color: var(--med);
  border: 1px solid rgba(234, 179, 8, 0.15);
}
.step-tag--acc {
  background: rgba(0, 242, 254, 0.08);
  color: var(--acc);
  border: 1px solid rgba(0, 242, 254, 0.15);
}
.step-tag--violet {
  background: rgba(139, 92, 246, 0.08);
  color: var(--vio);
  border: 1px solid rgba(139, 92, 246, 0.15);
}

.step-icon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--acc);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

@keyframes iconPulse1 {
  0% { transform: scale(0.95); opacity: 1; box-shadow: 0 0 8px rgba(0, 242, 254, 0.4); }
  10% { transform: scale(1.35); opacity: 0; }
  20% { opacity: 0; }
  25%, 100% { opacity: 0; }
}
@keyframes iconPulse2 {
  0%, 19% { opacity: 0; }
  20% { transform: scale(0.95); opacity: 1; box-shadow: 0 0 8px rgba(0, 242, 254, 0.4); }
  30% { transform: scale(1.35); opacity: 0; }
  40% { opacity: 0; }
  45%, 100% { opacity: 0; }
}
@keyframes iconPulse3 {
  0%, 39% { opacity: 0; }
  40% { transform: scale(0.95); opacity: 1; box-shadow: 0 0 8px rgba(0, 242, 254, 0.4); }
  50% { transform: scale(1.35); opacity: 0; }
  60% { opacity: 0; }
  65%, 100% { opacity: 0; }
}
@keyframes iconPulse4 {
  0%, 59% { opacity: 0; }
  60% { transform: scale(0.95); opacity: 1; box-shadow: 0 0 8px rgba(0, 242, 254, 0.4); }
  70% { transform: scale(1.35); opacity: 0; }
  80% { opacity: 0; }
  85%, 100% { opacity: 0; }
}

.workflow-step:nth-of-type(1) .step-icon::after { animation: iconPulse1 5s infinite ease-out; }
.workflow-step:nth-of-type(2) .step-icon::after { animation: iconPulse2 5s infinite ease-out; }
.workflow-step:nth-of-type(3) .step-icon::after { animation: iconPulse3 5s infinite ease-out; }
.workflow-step:nth-of-type(4) .step-icon::after { animation: iconPulse4 5s infinite ease-out; }

@media (max-width: 960px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 24px;
  }
  .hero-workflow {
    max-width: 100%;
  }
}

.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin-top:24px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.stat{background:var(--bg-2);padding:16px 14px;text-align:center}
.stat b{display:block;font-size:20px;font-weight:400;letter-spacing:-.003em;color:var(--acc)}
.stat span{display:block;font-size:11px;color:var(--txt-2);margin-top:4px;line-height:1.4}

/* ── sections ────────────────────────────────────────────── */
.sec{padding:78px 0}
.sec--alt{background:linear-gradient(180deg,transparent,rgba(13,17,25,.55) 10%,rgba(13,17,25,.55) 90%,transparent);
  border-block:1px solid var(--line)}
.sec--cta{padding:86px 0 96px;text-align:center}
.cta h2{margin-inline:auto}
.cta .lede{margin-inline:auto}
.cta .cmd{margin-inline:auto;margin-top:26px}
.cta__btns{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:26px}

/* ── trio cards ──────────────────────────────────────────── */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:34px}
.tcard{padding:28px 24px;border:1px solid var(--line);border-radius:var(--r-l);
  background:linear-gradient(180deg, rgba(15,23,42,0.5), rgba(9,13,22,0.7));backdrop-filter:blur(10px);
  transition:all 0.3s var(--ease);box-shadow:var(--sh-2);position:relative;overflow:hidden}
.tcard::after{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--x, 0px) var(--y, 0px), rgba(255,255,255,0.06), transparent 80%);opacity:0;transition:opacity 0.3s;pointer-events:none}
.tcard:hover{transform:translateY(-6px);border-color:var(--line-3);box-shadow:0 20px 40px -15px rgba(0,0,0,0.8), 0 0 30px -10px var(--acc-glow)}
.tcard:hover::after{opacity:1}
.tcard__n{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--acc);font-weight:600}
.tcard h3{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:14px 0 10px;font-family:var(--display)}
.tcard p{font-size:14px;color:var(--txt-1);line-height:1.65}
.tcard__m{display:inline-block;font-family:var(--mono);font-size:11px;margin-top:20px;
  padding:4px 12px;border-radius:20px;color:var(--txt-1);background:rgba(255,255,255,0.02);border:1px solid var(--line-2);transition:all 0.2s}
.tcard--acc{border-color:rgba(0,242,254,0.18);background:linear-gradient(180deg, rgba(0,242,254,0.03), rgba(9,13,22,0.7))}
.tcard--acc:hover{border-color:var(--acc);box-shadow:0 20px 40px -15px rgba(0,0,0,0.8), 0 0 35px -10px rgba(0,242,254,0.25)}
.tcard--acc .tcard__m{color:var(--acc);background:rgba(0,242,254,0.06);border-color:rgba(0,242,254,0.2)}
.tcard--vio{border-color:rgba(139,92,246,0.18);background:linear-gradient(180deg, rgba(139,92,246,0.03), rgba(9,13,22,0.7))}
.tcard--vio:hover{border-color:var(--vio);box-shadow:0 20px 40px -15px rgba(0,0,0,0.8), 0 0 35px -10px rgba(139,92,246,0.25)}
.tcard--vio .tcard__m{color:var(--vio);background:rgba(139,92,246,0.06);border-color:rgba(139,92,246,0.2)}

/* ── interactive demo widget ────────────────────────────────── */
.demo-widget{margin-top:36px;border:1px solid var(--line-2);border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(180deg, var(--bg-1), var(--bg-0));box-shadow:var(--sh-3);position:relative;z-index:2;
  backdrop-filter:blur(20px)}
.demo-tabs{display:flex;border-bottom:1px solid var(--line);background:rgba(255,255,255,0.01);padding:6px;gap:6px}
.demo-tab{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;font-family:var(--display);
  font-size:14px;font-weight:600;color:var(--txt-2);border:1px solid transparent;transition:all 0.25s ease;background:none}
.demo-tab:hover{color:var(--txt-0);background:rgba(255,255,255,0.02)}
.demo-tab.active{color:var(--acc);background:rgba(0,242,254,0.04);border-color:rgba(0,242,254,0.15)}
.demo-tab svg{width:16px;height:16px;fill:none;stroke:currentColor}

.demo-content{position:relative}
.demo-pane{display:none}
.demo-pane.active{display:block}

.term{border:0;border-radius:0;box-shadow:none;background:transparent;margin-top:0}
.term__bar{display:flex;align-items:center;gap:12px;padding:14px 18px;background:rgba(255,255,255,0.015);
  border-bottom:1px solid var(--line)}
.term__lights{display:flex;gap:6px}
.term__lights i{width:9px;height:9px;border-radius:50%}
.term__lights i:first-child{background:#3a2530}
.term__lights i:nth-child(2){background:#3a3325}
.term__lights i:last-child{background:#1e3a30}
.term__title{font-family:var(--mono);font-size:11px;color:var(--txt-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.term-btn{margin-left:auto;color:var(--txt-2);transition:all 0.2s;padding:4px}
.term-btn:hover{color:var(--acc);transform:rotate(30deg)}
.term-btn svg{width:16px;height:16px;stroke:currentColor;fill:none}
.term__body{font-family:var(--mono);font-size:12px;line-height:1.9;padding:20px 24px;
  overflow-x:auto;color:var(--txt-1);white-space:pre}
.term__body b{color:#fff;font-weight:600}

/* Flow Tracer styling */
.flow-container{display:grid;grid-template-columns:260px 1fr;min-height:260px}
.flow-info{padding:24px;border-right:1px solid var(--line);background:rgba(255,255,255,0.005)}
.flow-info h4{font-family:var(--display);font-size:16px;color:var(--txt-0);margin-bottom:10px;font-weight:700;letter-spacing:-0.01em}
.flow-info p{font-size:13.5px;color:var(--txt-1);line-height:1.65}
.flow-svg-wrapper{display:flex;align-items:center;justify-content:center;padding:24px;overflow-x:auto;background:rgba(0,0,0,0.1)}
.flow-svg{width:100%;max-width:520px;height:auto}

.flow-node{cursor:pointer}
.flow-node .node-bg{fill:rgba(255,255,255,0.01);stroke:var(--line-2);stroke-width:1.5;transition:all 0.3s ease}
.flow-node .node-core{fill:var(--bg-2);stroke:var(--line-3);stroke-width:1.5;transition:all 0.3s ease}
.flow-node .node-lbl{font-family:var(--mono);font-size:9px;font-weight:700;fill:var(--txt-2);transition:all 0.3s ease}
.flow-node .node-tag{font-family:var(--display);font-size:11.5px;font-weight:600;fill:var(--txt-2);transition:all 0.3s ease}

.flow-node.active .node-bg{fill:rgba(0,242,254,0.06);stroke:var(--acc);stroke-width:2}
.flow-node.active .node-core{stroke:var(--acc);fill:rgba(0,242,254,0.2)}
.flow-node.active .node-lbl{fill:var(--acc)}
.flow-node.active .node-tag{fill:var(--acc)}

.flow-line{stroke:var(--line-2);stroke-width:2.5;stroke-dasharray:6 6;animation:dash 25s linear infinite;transition:all 0.4s ease}
.flow-line.active{stroke:var(--acc);stroke-width:3}

@keyframes dash {
  to { stroke-dashoffset: -1000; }
}

.c-ok{color:var(--acc)} .c-info{color:var(--cyan)} .c-warn{color:var(--med)}
.c-vio{color:var(--vio)} .c-dim{color:var(--txt-3)}

/* ── interactive proof widget ─────────────────────────────── */
.proof-widget{display:grid;grid-template-columns:240px 1fr;gap:32px;margin-top:36px}
.proof-sidebar{display:flex;flex-direction:column;gap:6px}
.proof-step-btn{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:10px;
  background:none;border:1px solid transparent;color:var(--txt-1);text-align:left;transition:all 0.25s ease;cursor:pointer}
.proof-step-btn:hover{color:var(--txt-0);background:rgba(255,255,255,0.02)}
.proof-step-btn.active{color:var(--acc);background:rgba(0,242,254,0.04);border-color:rgba(0,242,254,0.15)}
.step-num{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--txt-3);transition:color 0.25s}
.proof-step-btn.active .step-num{color:var(--acc)}
.step-lbl{font-family:var(--display);font-size:14.5px;font-weight:600}

.proof-details{background:linear-gradient(180deg, var(--bg-1), var(--bg-0));border:1px solid var(--line-2);
  border-radius:var(--r-l);padding:28px 32px;box-shadow:var(--sh-2);min-height:280px;display:flex;flex-direction:column;justify-content:center;
  backdrop-filter:blur(20px);position:relative;z-index:2}
.proof-panel{display:none;animation:fadeIn 0.35s var(--ease) forwards}
.proof-panel.active{display:block}

.panel-header{margin-bottom:16px}
.panel-tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--acc);margin-bottom:6px;background:rgba(0,242,254,0.08);padding:2px 8px;border-radius:12px;
  border:1px solid rgba(0,242,254,0.15)}
.panel-header h3{font-size:22px;font-weight:700;color:var(--txt-0);font-family:var(--display);letter-spacing:-0.015em}
.panel-header h3 span{font-weight:400}

.panel-body p{font-size:15px;color:var(--txt-1);line-height:1.7}
.panel-body code{font-family:var(--mono);font-size:12.5px;color:var(--acc);
  background:rgba(0,242,254,0.08);padding:2px 6px;border-radius:4px}

.model-visual{margin-top:20px;padding:16px 20px;background:rgba(0,0,0,0.15);border-radius:var(--r-m);border:1px solid var(--line)}
.visual-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v-box{font-family:var(--display);font-size:13px;font-weight:600;padding:8px 16px;border-radius:8px;border:1px solid var(--line)}
.v-box--acc{border-color:rgba(0,242,254,0.3);color:var(--acc);background:rgba(0,242,254,0.02)}
.v-box--vio{border-color:rgba(139,92,246,0.3);color:var(--vio);background:rgba(139,92,246,0.02)}
.v-arrow{color:var(--txt-3);font-weight:700}

.match-list{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.match-list li{font-family:var(--mono);font-size:13px;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  background:rgba(0,0,0,0.15);border-radius:8px;border:1px solid var(--line)}
.badge{font-size:10px;font-family:var(--sans);font-weight:600;padding:3px 10px;border-radius:12px;text-transform:uppercase}
.badge--warn{background:rgba(234,179,8,0.1);color:var(--med);border:1px solid rgba(234,179,8,0.2)}
.badge--dim{background:rgba(255,255,255,0.02);color:var(--txt-2);border:1px solid var(--line-2)}

.poc{display:flex;align-items:center;gap:10px;margin:16px 0 12px;padding:12px 16px;border-radius:10px;
  background:rgba(0,0,0,0.2);border:1px solid rgba(0,242,254,0.22);max-width:100%}
.poc code{flex:1;min-width:0;overflow-x:auto;white-space:pre;background:none;padding:0;font-size:12px;color:var(--acc)}

.diff{font-family:var(--mono);font-size:12px;line-height:1.75;margin-top:16px;padding:16px 0;
  background:rgba(0,0,0,0.2);border:1px solid var(--line-2);border-radius:var(--r-m);
  overflow-x:auto;white-space:pre}
.diff span{display:block;padding:0 18px}
.d-add{background:rgba(0,242,254,0.06);color:#c3f3e2}
.d-del{background:rgba(244,63,94,0.06);color:#f6c6d1}

.gaterow{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.g{font-family:var(--mono);font-size:11px;padding:5px 12px;border-radius:20px;font-weight:500}
.g--ok{color:var(--acc);background:rgba(0,242,254,0.06);border:1px solid rgba(0,242,254,0.2)}
.g--no{color:var(--crit);background:rgba(244,63,94,0.06);border:1px solid rgba(244,63,94,0.2)}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width:820px){
  .proof-widget{grid-template-columns:1fr;gap:20px}
  .proof-sidebar{flex-direction:row;overflow-x:auto;padding-bottom:10px;gap:8px}
  .proof-step-btn{flex-shrink:0;padding:10px 14px}
}

/* ── stages ──────────────────────────────────────────────── */
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:32px;counter-reset:st}
.stage{position:relative;padding:18px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--bg-2);transition:.2s var(--ease);counter-increment:st}
.stage::before{content:counter(st,decimal-leading-zero);position:absolute;top:14px;right:16px;
  font-family:var(--mono);font-size:10.5px;color:var(--txt-3)}
.stage:hover{border-color:var(--line-2);transform:translateY(-2px)}
.stage b{display:block;font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--txt-0);
  margin-bottom:7px;letter-spacing:.01em}
.stage span{display:block;font-size:12.5px;color:var(--txt-1);line-height:1.6}
.stage--acc{border-color:rgba(0,229,160,.24)}
.stage--acc b{color:var(--acc)}
.stage--vio{border-color:rgba(125,92,255,.24)}
.stage--vio b{color:var(--vio)}

/* ── comparison table ────────────────────────────────────── */
.tablewrap{margin-top:30px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m)}
.cmp{width:100%;min-width:660px;font-size:13px}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-3);font-weight:500;background:var(--bg-2)}
.cmp tbody td:first-child{color:var(--txt-2);width:24%}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover td{background:rgba(255,255,255,.014)}
.cmp .cmp--me{color:var(--txt-0);background:rgba(0,229,160,.045);font-weight:500}
.cmp thead .cmp--me{color:var(--acc);background:rgba(0,229,160,.08)}
.cmp .no{color:var(--txt-3)}

/* ── support ─────────────────────────────────────────────── */
.support{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.support:has(.sup:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.sup{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-2)}
.sup h3{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;margin-bottom:9px}
.sup p{font-family:var(--mono);font-size:12.5px;color:var(--txt-1);line-height:1.7}
.sup--next p{color:var(--txt-2)}
.sup--road p{color:var(--txt-3)}

/* ── footer ──────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:26px 0;background:rgba(13,17,25,.4)}
.foot__in{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.foot__brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.foot__tag{font-size:12.5px;color:var(--txt-2);padding-left:14px;border-left:1px solid var(--line-2)}
.foot__links{display:flex;gap:18px;margin-left:auto}
.foot__links a{font-size:13px;color:var(--txt-2);transition:.16s}
.foot__links a:hover{color:var(--acc)}
.foot__c{font-size:12px;color:var(--txt-3)}

/* ── toasts ──────────────────────────────────────────────── */
.toasts{position:fixed;bottom:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:9px}
.toast{display:flex;align-items:center;gap:11px;padding:11px 15px;border-radius:var(--r-m);
  background:rgba(13,17,25,.97);border:1px solid var(--line-2);box-shadow:var(--sh-3);
  backdrop-filter:blur(14px);animation:toastIn .3s var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.toast.is-out{animation:toastOut .26s var(--ease) forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(14px)}}
.toast i{width:22px;height:22px;border-radius:7px;flex:none;position:relative;
  background:rgba(0,229,160,.12);border:1px solid rgba(0,229,160,.3)}
.toast i::after{content:"";position:absolute;left:6px;top:7px;width:8px;height:4px;
  border-left:1.7px solid var(--acc);border-bottom:1.7px solid var(--acc);transform:rotate(-45deg)}
.toast b{font-size:12.5px;font-weight:500}

/* ── Dual-Engine Architecture Section ───────────────────── */
.dual-engine-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 36px;
}

.engine-card {
  position: relative;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.65), rgba(9, 13, 22, 0.85));
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  padding: 32px 28px;
  backdrop-filter: blur(20px);
  box-shadow: var(--sh-3);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  overflow: hidden;
}

.engine-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  opacity: 0.5;
  transition: opacity 0.3s var(--ease);
}

.engine-card--blackbox::before {
  background: linear-gradient(90deg, transparent, var(--vio), transparent);
}

.engine-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-3);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.9), 0 0 30px -10px var(--acc-glow);
}

.engine-card--blackbox:hover {
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.9), 0 0 30px -10px rgba(139, 92, 246, 0.2);
}

.engine-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acc);
  background: rgba(0, 242, 254, 0.08);
  border: 1px solid rgba(0, 242, 254, 0.2);
  padding: 5px 12px;
  border-radius: 20px;
  align-self: flex-start;
  margin-bottom: 16px;
}

.engine-badge--blackbox {
  color: var(--vio);
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.25);
}

.engine-card h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--txt-0);
}

.engine-card .engine-desc {
  font-size: 14px;
  color: var(--txt-1);
  line-height: 1.65;
  margin-bottom: 22px;
}

.engine-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.engine-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.engine-step-num {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--acc);
  flex: none;
}

.engine-card--blackbox .engine-step-num {
  color: var(--vio);
}

.engine-step-content h4 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--txt-0);
  margin-bottom: 3px;
}

.engine-step-content p {
  font-size: 12.5px;
  color: var(--txt-2);
  line-height: 1.5;
}

.engine-stride-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
  padding: 14px;
  border-radius: var(--r-m);
  background: rgba(3, 7, 18, 0.45);
  border: 1px solid var(--line);
}

.stride-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stride-pill-title {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
  color: var(--acc);
}

.stride-pill-desc {
  color: var(--txt-2);
  font-size: 11.5px;
  line-height: 1.4;
}

.engine-card--blackbox .stride-pill-title {
  color: var(--vio);
}

.engine-cmd {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.unified-banner {
  margin-top: 36px;
  padding: 24px 28px;
  border-radius: var(--r-l);
  background: linear-gradient(90deg, rgba(0, 242, 254, 0.05), rgba(139, 92, 246, 0.05), rgba(0, 229, 160, 0.05));
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.unified-banner-info h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--txt-0);
  margin-bottom: 4px;
}

.unified-banner-info p {
  font-size: 13.5px;
  color: var(--txt-1);
  max-width: 60ch;
}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:900px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trio,.stages,.support,.dual-engine-grid{grid-template-columns:1fr}
  .support:has(.sup:nth-child(2):last-child){grid-template-columns:1fr}
}
@media (max-width:760px){
  .shell{width:calc(100% - 34px)}
  .nav__links{position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;margin:0;
    background:rgba(5,7,11,.98);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
    padding:8px 17px 18px;transform:translateY(-10px);opacity:0;pointer-events:none;transition:.26s var(--ease)}
  .nav__links.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav__links a{padding:12px 4px;font-size:15px;border-radius:0;border-bottom:1px solid var(--line)}
  .burger{display:flex}
  .sec{padding:60px 0}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cstep{grid-template-columns:26px minmax(0,1fr);gap:13px}
  .cstep__n{width:26px;height:26px;font-size:10px}
  .cstep::before{left:12px;top:30px}
  .foot__in{flex-direction:column;align-items:flex-start;gap:14px}
  .foot__links{margin-left:0;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* iteration-count:1 stops the infinite mark pulse flickering at .01ms */
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}