/* =========================================================
   TEN Programming Language — shared stylesheet
   Clean, editorial, documentation-site aesthetic.
   No background grid, no glow/shine/particle effects.
   ========================================================= */

:root{
  --navy-900:#0a1930;
  --navy-800:#0f2547;
  --navy-700:#1c3a63;
  --blue-600:#2f6fb5;
  --blue-100:#eaf1fa;

  --yellow-500:#ffd43b;
  --yellow-600:#e8b800;
  --yellow-100:#fff6d9;

  --ink-900:#171a21;
  --ink-700:#333844;
  --ink-500:#5b6070;
  --ink-300:#8a8f9c;

  --bg:#ffffff;
  --bg-soft:#f6f7f9;
  --bg-code:#0f172a;
  --border:#e3e6ec;
  --border-soft:#edeff3;

  --ok:#1f8a5f;
  --warn:#a35c00;

  /* ---------- extended colour grading ----------
     Brand stays navy/yellow, but everything with "glow", "grad", or
     "glass" in the name below is new: a violet mid-tone bridges blue
     and yellow so gradients have a real hue journey instead of a flat
     two-stop blend, and glass/spotlight tokens back the new hover
     treatments further down this file. */
  --violet-500:#7c5cff;
  --violet-600:#6a45f0;
  --cyan-400:#3fd0e0;
  --brand-grad:linear-gradient(120deg,var(--blue-600) 0%,var(--violet-500) 52%,var(--yellow-500) 100%);
  --brand-grad-soft:linear-gradient(120deg,rgba(47,111,181,.12),rgba(124,92,255,.12),rgba(255,212,59,.12));
  --glow-yellow:rgba(255,212,59,.5);
  --glow-violet:rgba(124,92,255,.45);
  --glass-bg:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.5);

  --radius:6px;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --disp:'Space Grotesk',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --maxw:1180px;

  /* ---------- motion tokens ----------
     Every animation on this site is built from these two curves and
     animates only `transform` / `opacity` (compositor-friendly, no
     layout or paint work) so it stays smooth up to high refresh
     rates (120Hz) on capable displays. */
  --ease-out:cubic-bezier(.16,.8,.24,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  --dur-fast:.18s;
  --dur-base:.32s;
  --dur-slow:.6s;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink-700);
  font-family:var(--body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Respect users who've asked for reduced motion: strip every
   animation/transition down to instant. This overrides everything
   below it, so it must stay near the top of the cascade only in
   terms of specificity/!important, not source order. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- ambient backdrop ----------
   A fixed, full-viewport layer sitting behind all content: a slow
   drifting aurora wash (three soft radial blobs, transform-only
   animation) plus a faint SVG-noise grain on top for texture. Both
   are decorative, inert (pointer-events:none) and sit at z-index -1
   so they never affect layout or interaction. */
#ambient-bg{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
}
#ambient-bg::before{
  content:'';
  position:absolute;inset:-20%;
  background:
    radial-gradient(38% 32% at 12% 8%, rgba(47,111,181,.14), transparent 65%),
    radial-gradient(34% 30% at 88% 18%, rgba(124,92,255,.12), transparent 65%),
    radial-gradient(40% 34% at 50% 92%, rgba(255,212,59,.13), transparent 65%);
  animation:auroraDrift 26s ease-in-out infinite alternate;
  will-change:transform;
}
#ambient-bg::after{
  content:'';
  position:absolute;inset:0;
  opacity:.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);}
  100%{transform:translate3d(2%,-3%,0) rotate(6deg) scale(1.08);}
}
@media (prefers-reduced-motion: reduce){
  #ambient-bg::before{animation:none;}
}

/* ---------- scroll progress bar ----------
   Injected by script.js; fixed hairline under the header that fills
   left-to-right with reading position via a single transform:scaleX
   (compositor-only, no layout cost per scroll frame). */
#scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:1200;
  transform-origin:0 50%;transform:scaleX(0);
  background:var(--brand-grad);
  transition:transform .08s linear;
}

/* ---------- cursor spotlight ----------
   Fine-pointer only (desktop): a soft radial glow that follows the
   cursor, positioned via CSS custom properties updated in script.js.
   Sits above the ambient backdrop but below content, blended so it
   reads as ambient light rather than a literal circle. */
@media (hover:hover) and (pointer:fine){
  #cursor-glow{
    position:fixed;top:0;left:0;width:520px;height:520px;z-index:-1;
    transform:translate(calc(var(--cx,50vw) - 50%), calc(var(--cy,50vh) - 50%));
    background:radial-gradient(circle, var(--glow-violet), transparent 70%);
    opacity:0;transition:opacity .4s var(--ease-out);
    pointer-events:none;mix-blend-mode:plus-lighter;
    will-change:transform;
  }
  body:hover #cursor-glow{opacity:.5;}
}
@media (prefers-reduced-motion: reduce), (hover:none), (pointer:coarse){
  #cursor-glow{display:none;}
}

/* ---------- spotlight cards ----------
   A radial highlight tracks the pointer within each card via
   --mx/--my, set by a single delegated listener in script.js so it
   works even for grids (language packs, platforms, pipeline steps)
   that are generated by JS after this stylesheet has already
   matched — targeting the components directly here (rather than a
   JS-added marker class) means there's no race with that generation.
   Falls back gracefully to each component's existing hover state
   with JS disabled. */
.feat-card, .dl-card, .cm-card, .lang-cell, .sponsor-tier,
.pipe-node, .tl-item, .team-card, .docs-body{position:relative;}
.feat-card::after, .dl-card::after, .cm-card::after, .lang-cell::after, .sponsor-tier::after,
.pipe-node::after, .tl-item::after, .team-card::after, .docs-body::after{
  content:'';
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(124,92,255,.14), transparent 70%);
  opacity:0;transition:opacity var(--dur-base) var(--ease-smooth);
  pointer-events:none;
}
.feat-card:hover::after, .dl-card:hover::after, .cm-card:hover::after, .lang-cell:hover::after, .sponsor-tier:hover::after,
.pipe-node:hover::after, .tl-item:hover::after, .team-card:hover::after, .docs-body:hover::after{opacity:1;}
.feat-card > *, .dl-card > *, .cm-card > *, .lang-cell > *, .sponsor-tier > *,
.pipe-node > *, .tl-item > *, .team-card > *, .docs-body > *{position:relative;z-index:1;}

/* ---------- magnetic buttons ----------
   script.js nudges primary/accent buttons a few px toward the
   pointer while hovered (translate only) for a tactile, "novel"
   micro-interaction; this just widens the transition so the pull
   and release both feel eased rather than snapping. */
.btn-primary, .btn-accent{transition-duration:var(--dur-fast), var(--dur-fast), var(--dur-fast), .15s, var(--dur-fast);}

/* Tilt for .preview-card (via --rx/--ry set by script.js on
   pointermove) is wired directly into its rule further down this
   file, alongside its existing hover lift, so the two don't fight
   over the `transform` property. */

/* ---------- gradient text ---------- */
.grad-text{
  background:var(--brand-grad);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradPan 6s ease-in-out infinite;
}
@keyframes gradPan{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
@media (prefers-reduced-motion: reduce){.grad-text{animation:none;}}

/* ---------- scroll-reveal ----------
   script.js adds `.reveal` right before it starts observing an
   element, so content is never hidden if JS doesn't run — then
   `.in-view` is added once, the first time each element crosses
   into the viewport (IntersectionObserver, not a scroll listener,
   so there's no per-frame layout cost). Only transform/opacity
   animate, and the observer unobserves after firing once so nothing
   keeps ticking in the background.
   This block is placed early, before any per-component :hover rule,
   on purpose: `.reveal.in-view` and e.g. `.feat-card:hover` are the
   same specificity (two selector components each), so whichever is
   declared LATER in the file wins when both match. Keeping this
   block up here means every later hover-lift rule still overrides
   the resting reveal position once an element has settled in. */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay:var(--reveal-delay,0s);
  will-change:transform,opacity;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
  will-change:auto;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}
button{font-family:inherit;}
code, pre{font-family:var(--mono);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

h1,h2,h3,h4{font-family:var(--disp);color:var(--ink-900);font-weight:700;line-height:1.15;}
h1{font-size:clamp(32px,4.6vw,54px);letter-spacing:-.01em;}
h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.005em;}
h3{font-size:18px;}
p{color:var(--ink-500);}
a.inline-link{color:var(--blue-600);border-bottom:1px solid transparent;}
a.inline-link:hover{border-bottom-color:var(--blue-600);}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-600);
  display:flex;align-items:center;gap:10px;
  margin-bottom:12px;
  font-weight:600;
}
.eyebrow::before{content:'';width:20px;height:2px;background:var(--yellow-500);}

/* ---------- wordmark ---------- */
.wm{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;}
.wm .mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:7px;
  background:#000;color:var(--yellow-500);
  overflow:hidden;flex-shrink:0;
  transition:transform var(--dur-base) var(--ease-out);
}
.wm:hover .mark{transform:rotate(-8deg) scale(1.06);}
.wm .mark img{width:100%;height:100%;object-fit:cover;display:block;}
.wm .word{letter-spacing:.02em;font-size:18px;color:var(--ink-900);}
.footer-logo .word{color:#fff;}

/* ---------- layout sections ---------- */
.section{padding:88px 0;border-bottom:1px solid var(--border-soft);}
.section.tight{padding:64px 0;}
.section-head{max-width:680px;margin-bottom:44px;}
.section-head p{margin-top:12px;font-size:16px;}
.section-head.center{max-width:640px;margin-left:auto;margin-right:auto;text-align:center;}
.section.alt{background:var(--bg-soft);}

/* ---------- top utility bar ---------- */
.utility-bar{background:var(--navy-900);color:#c9d3e0;font-family:var(--mono);font-size:12px;}
.utility-bar .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;}
.utility-bar a{color:#c9d3e0;opacity:.85;}
.utility-bar a:hover{opacity:1;color:var(--yellow-500);}

/* ---------- header / nav ---------- */
header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(6px);
  box-shadow:0 0 0 rgba(10,25,48,0);
  transition:box-shadow var(--dur-base) var(--ease-smooth);
}
header.scrolled{box-shadow:0 6px 20px -14px rgba(10,25,48,.35);}
nav{display:flex;align-items:center;justify-content:space-between;height:66px;}
.nav-links{display:flex;gap:6px;font-size:14px;}
.nav-links a{
  position:relative;
  padding:8px 12px;border-radius:5px;color:var(--ink-700);font-weight:500;
  transition:background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.nav-links a:hover{background:var(--bg-soft);color:var(--navy-900);transform:translateY(-1px);}
.nav-links a:active{transform:translateY(0);}
.nav-links a.active{color:var(--navy-900);background:var(--yellow-100);font-weight:600;}
.nav-cta{display:flex;gap:10px;align-items:center;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;}
.hamburger span{width:20px;height:2px;background:var(--ink-900);display:block;}
.mobile-menu{display:none;border-top:1px solid var(--border);padding:10px 0 16px;}
.mobile-menu a{display:block;padding:10px 4px;font-size:14px;color:var(--ink-700);}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--body);
  font-size:14px;font-weight:600;
  padding:11px 20px;
  border-radius:var(--radius);
  display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth),
             color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
  border:1px solid var(--border);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.98);}
.btn-primary{background:var(--navy-900);color:#fff;border-color:var(--navy-900);}
.btn-primary:hover{background:var(--navy-700);box-shadow:0 10px 26px -10px var(--glow-violet), 0 10px 24px -12px rgba(10,25,48,.5);}
.btn-accent{background:var(--yellow-500);color:var(--navy-900);border-color:var(--yellow-500);}
.btn-accent:hover{background:var(--yellow-600);box-shadow:0 10px 24px -14px rgba(232,184,0,.65);}
.btn-accent.btn-primary{background:var(--brand-grad);border-color:transparent;}
.btn-ghost{background:transparent;color:var(--ink-700);}
.btn-ghost:hover{border-color:var(--navy-900);color:var(--navy-900);}
.btn-disabled{opacity:.45;cursor:not-allowed;}
.btn-disabled:hover{background:transparent;border-color:var(--border);color:var(--ink-700);transform:none;box-shadow:none;}
.btn-sm{padding:7px 14px;font-size:13px;}

.badge{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;font-weight:600;
  padding:3px 8px;border-radius:20px;text-transform:uppercase;
}
.badge-soon{background:var(--yellow-100);color:var(--warn);border:1px solid #f0dca3;}
.badge-live{background:#e7f6ee;color:var(--ok);border:1px solid #bfe6d2;}

/* ---------- page header (sub-pages) ---------- */
.page-header{
  background:var(--navy-900);
  color:#fff;
  padding:64px 0 46px;
  border-bottom:4px solid var(--yellow-500);
  overflow:hidden;
}
.page-header .eyebrow{color:var(--yellow-500);}
.page-header .eyebrow::before{background:#fff;}
.page-header h1{color:#fff;font-size:clamp(28px,4vw,42px);}
.page-header p{color:#c9d3e0;max-width:640px;margin-top:12px;font-size:16px;}

/* ---------- entrance animation (page load) ----------
   transform + opacity only, staggered with animation-delay so it
   reads as one smooth sequence rather than separate hops. */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
.page-header .eyebrow{animation:fadeUp var(--dur-slow) var(--ease-out) both;}
.page-header h1{animation:fadeUp var(--dur-slow) var(--ease-out) .06s both;}
.page-header p{animation:fadeUp var(--dur-slow) var(--ease-out) .12s both;}

/* ---------- hero (home only) ---------- */
.hero{padding:72px 0 90px;border-bottom:1px solid var(--border-soft);overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero h1{margin-bottom:20px;}
.hero h1 .accent{
  color:var(--ink-900);
  border-bottom:6px solid var(--yellow-500);
  padding-bottom:2px;
}
.hero p.sub{font-size:18px;max-width:540px;margin-bottom:30px;color:var(--ink-500);}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:38px;}
.hero-stats{display:flex;gap:30px;flex-wrap:wrap;}
.stat{font-family:var(--mono);transition:transform var(--dur-base) var(--ease-out);}
.stat:hover{transform:translateY(-2px);}
.stat b{display:block;font-size:20px;color:var(--ink-900);font-family:var(--disp);}
.stat span{font-size:11px;color:var(--ink-300);letter-spacing:.06em;text-transform:uppercase;}

.hero .eyebrow{animation:fadeUp var(--dur-slow) var(--ease-out) both;}
.hero h1{animation:fadeUp var(--dur-slow) var(--ease-out) .06s both;}
.hero p.sub{animation:fadeUp var(--dur-slow) var(--ease-out) .12s both;}
.hero-actions{animation:fadeUp var(--dur-slow) var(--ease-out) .18s both;}
.hero-stats{animation:fadeUp var(--dur-slow) var(--ease-out) .24s both;}

/* ---------- compiler / dialect preview card ----------
   Dark highlight treatment: this card is the one thing on the hero
   we want the eye to land on first, so it breaks from the site's
   light/white surfaces on purpose. */
.preview-card{
  position:relative;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(124,92,255,.16), transparent 60%),
    linear-gradient(165deg,var(--navy-900),#0a1f3d 60%,var(--navy-800));
  border-radius:10px;
  padding:26px;
  font-family:var(--mono);
  color:#fff;
  animation:fadeUp var(--dur-slow) var(--ease-out) .2s both;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-out);
  box-shadow:0 30px 60px -34px rgba(10,25,48,.65), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.preview-card:hover{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px);
  box-shadow:0 34px 70px -30px rgba(10,25,48,.7), 0 0 44px -12px var(--glow-violet), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.lang-row{display:flex;gap:8px;justify-content:center;margin-bottom:16px;flex-wrap:wrap;}
.lang-chip{
  border:1px solid rgba(255,255,255,.14);padding:6px 13px;font-size:11px;border-radius:20px;color:#c9d3e0;
  background:rgba(255,255,255,.05);
  transition:transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.lang-chip.active{border-color:var(--yellow-500);color:var(--navy-900);font-weight:600;background:var(--yellow-500);box-shadow:0 0 18px -6px rgba(255,212,59,.55);}
.vis-arrow{text-align:center;color:rgba(255,255,255,.3);font-size:16px;margin:8px 0;}
.vis-box{
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  text-align:center;padding:13px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  border-radius:5px;font-weight:600;
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.preview-card:hover .vis-box{border-color:rgba(255,212,59,.5);background:rgba(255,255,255,.08);}
.vis-output{font-size:11.5px;color:#c9d3e0;text-align:center;margin-top:10px;}

/* .vis-output carries this line at the same plain weight as the rest
   of the compiler preview — no separate highlight treatment. */

/* ---------- feature grid ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.feat-card{background:#fff;padding:28px 26px;position:relative;z-index:0;transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);}
.feat-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px -20px rgba(10,25,48,.35);z-index:1;}
.feat-card .num{font-family:var(--mono);font-size:11px;color:var(--blue-600);margin-bottom:12px;display:block;font-weight:600;}
.feat-card h3{margin-bottom:8px;font-size:16px;}
.feat-card p{font-size:14px;}

/* ---------- code tabs ---------- */
.code-shell{border:1px solid var(--border);background:var(--bg-code);border-radius:10px;overflow:hidden;}
.tab-bar{display:flex;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);}
.tab-btn{
  font-family:var(--mono);font-size:13px;padding:13px 20px;color:#8b93a7;cursor:pointer;
  border-right:1px solid rgba(255,255,255,.06);transition:color .15s;background:none;border-top:none;border-left:none;border-bottom:none;
}
.tab-btn.active{color:var(--yellow-500);background:rgba(255,255,255,.03);}
.code-area{padding:26px;font-family:var(--mono);font-size:14px;color:#d7dbe4;white-space:pre;overflow-x:auto;display:none;line-height:1.8;}
.code-area.active{display:block;}
.code-area .kw{color:var(--yellow-500);}
.code-area .fn{color:#7fd6a6;}
.code-area .str{color:#f0b464;}
.code-area .cm{color:#69708a;}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--border);}
th{color:var(--ink-300);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-family:var(--mono);}
td{color:var(--ink-500);}
td.yes{color:var(--ok);font-weight:600;}
td.no{color:var(--ink-300);}
td.partial{color:var(--warn);font-weight:600;}
tr td:first-child{color:var(--ink-900);font-weight:600;}
.table-shell{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff;}
.table-shell table{margin:0;}
.table-shell th{background:var(--bg-soft);}
.table-shell tbody tr{transition:background var(--dur-fast) var(--ease-smooth);}
.table-shell tbody tr:hover{background:var(--bg-soft);}

/* ---------- pipeline (architecture) ---------- */
.pipeline{display:flex;flex-direction:column;align-items:center;gap:0;position:relative;padding:10px 0;}
.pipeline::before{
  content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%);
  background:var(--border);z-index:0;
}
.pipe-node{
  width:100%;max-width:540px;border:1px solid var(--border);background:#fff;
  padding:16px 22px 16px 58px;border-radius:8px;cursor:pointer;position:relative;
  z-index:2;
  transition:border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pipe-node:hover{transform:translateY(-2px);box-shadow:0 10px 22px -16px rgba(10,25,48,.35);}
.pipe-node::before{
  content:attr(data-step);position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-500);
  background:var(--bg-soft);font-family:var(--mono);
  transition:border-color var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.pipe-node:hover, .pipe-node.open{border-color:var(--navy-900);}
.pipe-node:hover::before, .pipe-node.open::before{border-color:var(--navy-900);color:var(--navy-900);}
.pipe-node .title{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;color:var(--ink-900);}
.pipe-node .title .toggle{font-family:var(--mono);color:var(--ink-300);font-weight:400;transition:transform var(--dur-base) var(--ease-out);}
.pipe-node.open .title .toggle{transform:rotate(45deg);}
.pipe-node .desc{max-height:0;overflow:hidden;font-size:13.5px;color:var(--ink-500);transition:max-height var(--dur-base) var(--ease-smooth);}
.pipe-node.open .desc{max-height:120px;margin-top:9px;}
.pipe-connector{width:1px;height:24px;background:var(--border);position:relative;z-index:2;}

/* ---------- language / platform grid ---------- */
.lang-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.lang-cell{background:#fff;padding:22px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:0;transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);}
.lang-cell:hover{transform:translateY(-3px);box-shadow:0 14px 24px -18px rgba(10,25,48,.35);z-index:1;}
.lang-cell .icon{width:26px;height:26px;color:var(--navy-900);transition:transform var(--dur-base) var(--ease-out);}
.lang-cell:hover .icon{transform:scale(1.1);}
.lang-cell .icon svg{width:100%;height:100%;}
.lang-cell .name{font-weight:600;font-size:14px;color:var(--ink-900);}

/* ---------- playground ---------- */
.pg-shell{border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.pg-grid{display:grid;grid-template-columns:1fr 1fr;}
@media(max-width:800px){.pg-grid{grid-template-columns:1fr;}}
.pg-pane + .pg-pane{border-left:1px solid var(--border);}
@media(max-width:800px){.pg-pane + .pg-pane{border-left:none;border-top:1px solid var(--border);}}
.pg-head{padding:10px 16px;font-family:var(--mono);font-size:11px;color:var(--ink-500);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);background:var(--bg-soft);display:flex;justify-content:space-between;align-items:center;}
.pg-editor{width:100%;height:280px;background:var(--bg-code);color:#d7dbe4;border:none;padding:18px;font-family:var(--mono);font-size:14px;resize:vertical;outline:none;line-height:1.7;}
.pg-output{height:280px;padding:18px;font-family:var(--mono);font-size:13.5px;overflow-y:auto;color:var(--ink-700);white-space:pre-wrap;background:#fff;}
.pg-output .dim{color:var(--ink-300);}
.pg-output .ok{color:var(--ok);}

/* ---------- docs ---------- */
.docs-grid{display:grid;grid-template-columns:230px 1fr;gap:40px;}
@media(max-width:800px){.docs-grid{grid-template-columns:1fr;}}
.docs-nav{display:flex;flex-direction:column;gap:2px;}
.docs-nav a{padding:8px 12px;font-size:13.5px;color:var(--ink-500);border-left:2px solid transparent;border-radius:0 4px 4px 0;}
.docs-nav a:hover{color:var(--navy-900);background:var(--bg-soft);}
.docs-nav a.active{color:var(--navy-900);border-left-color:var(--yellow-500);background:var(--bg-soft);font-weight:600;}
.docs-cat{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-300);margin:18px 0 6px 12px;}
.docs-cat:first-child{margin-top:0;}
.docs-body{border:1px solid var(--border);background:#fff;padding:34px;border-radius:10px;min-height:220px;}
.docs-body h3{margin-bottom:12px;}
.docs-body p{margin-bottom:10px;}

/* ---------- download ---------- */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.dl-card{background:#fff;padding:28px;position:relative;z-index:0;transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);}
.dl-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px -20px rgba(10,25,48,.35);z-index:1;}
.dl-card .platform{font-family:var(--disp);font-size:17px;margin-bottom:5px;font-weight:700;color:var(--ink-900);}
.dl-card .ver{font-family:var(--mono);font-size:12px;color:var(--ink-300);margin-bottom:18px;}

/* ---------- faq ---------- */
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{padding:20px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600;color:var(--ink-900);transition:color var(--dur-fast) var(--ease-smooth);}
.faq-q:hover{color:var(--blue-600);}
.faq-q .plus{font-family:var(--mono);color:var(--blue-600);font-size:16px;transition:transform var(--dur-base) var(--ease-out);}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-base) var(--ease-smooth);}
.faq-item.open .faq-a{max-height:220px;}
.faq-a p{padding-bottom:20px;font-size:14px;}

/* ---------- community / sponsors ---------- */
.cm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.cm-card{background:#fff;padding:26px;position:relative;z-index:0;transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);}
.cm-card:hover{transform:translateY(-4px);box-shadow:0 18px 30px -20px rgba(10,25,48,.35);z-index:1;}
.cm-card h3{margin-bottom:6px;}
.cm-card p{font-size:13.5px;margin-bottom:16px;}

.sponsors-row{display:flex;flex-wrap:wrap;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.sponsor-tier{flex:1;min-width:200px;background:#fff;padding:24px;text-align:center;transition:transform var(--dur-base) var(--ease-out);position:relative;z-index:0;}
.sponsor-tier:hover{transform:translateY(-3px);z-index:1;}
.sponsor-tier h4{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-300);margin-bottom:10px;}
.sponsor-tier .slot{border:1px dashed var(--border);padding:14px;font-size:12px;color:var(--ink-300);margin-top:8px;border-radius:6px;}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px;}
.team-card{text-align:center;}
.team-avatar{width:76px;height:76px;border-radius:50%;border:1px solid var(--border);background:var(--bg-soft);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:20px;color:var(--navy-900);font-weight:700;transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);}
.team-card:hover .team-avatar{transform:translateY(-3px) scale(1.05);border-color:var(--navy-900);}
.team-card h3{font-size:15px;}
.team-card span{font-size:12px;color:var(--ink-300);font-family:var(--mono);}

/* ---------- compiler team (clickable, expands to show members) ---------- */
.team-toggle{cursor:pointer;border:1px solid var(--border);border-radius:10px;padding:18px 14px;transition:border-color var(--dur-fast) var(--ease-smooth), transform var(--dur-base) var(--ease-out);}
.team-toggle:hover{border-color:var(--navy-900);}
.team-toggle:hover .team-avatar{transform:translateY(-3px) scale(1.05);border-color:var(--navy-900);}
.team-toggle h3{display:flex;align-items:center;justify-content:center;gap:6px;}
.team-toggle h3 .toggle{font-family:var(--mono);color:var(--ink-300);font-weight:400;font-size:14px;transition:transform var(--dur-base) var(--ease-out);}
.team-toggle.open h3 .toggle{transform:rotate(45deg);}
.team-toggle-body{max-height:0;overflow:hidden;transition:max-height var(--dur-base) var(--ease-smooth);}
.team-toggle.open .team-toggle-body{max-height:160px;margin-top:14px;}
.team-toggle-member{padding-top:10px;border-top:1px solid var(--border-soft);margin-top:10px;text-align:left;}
.team-toggle-member:first-child{margin-top:0;border-top:none;padding-top:0;}
.team-toggle-member b{display:block;font-family:var(--disp);font-size:13.5px;color:var(--ink-900);}
.team-toggle-member span{display:block;font-family:var(--body);font-size:12px;color:var(--ink-500);margin-top:2px;}

/* ---------- timeline (roadmap) ---------- */
.timeline{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.tl-item{background:#fff;padding:22px 26px;display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start;position:relative;z-index:0;transition:transform var(--dur-base) var(--ease-out);}
.tl-item:hover{transform:translateX(4px);z-index:1;}
@media(max-width:640px){.tl-item{grid-template-columns:1fr;gap:6px;}}
.tl-item .v{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink-900);}
.tl-item.done .v::before{content:'✓ ';color:var(--ok);}
.tl-item ul{display:flex;flex-wrap:wrap;gap:8px;}
.tl-item li{font-size:13px;color:var(--ink-500);background:var(--bg-soft);padding:5px 10px;border-radius:5px;}

/* ---------- CTA banner ---------- */
.cta-banner{
  position:relative;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(124,92,255,.35), transparent 55%),
    radial-gradient(120% 160% at 0% 100%, rgba(255,212,59,.16), transparent 55%),
    linear-gradient(160deg,var(--navy-900),#0a1f3d 60%,var(--navy-800));
  color:#fff;
  border-radius:12px;
  padding:48px;
  overflow:hidden;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.cta-banner h2{color:#fff;font-size:26px;margin-bottom:8px;}
.cta-banner p{color:#c9d3e0;max-width:420px;}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- footer ---------- */
footer{background:var(--navy-900);color:#c9d3e0;padding:56px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:30px;margin-bottom:44px;}
@media(max-width:800px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
.footer-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#7c88a3;margin-bottom:14px;}
.footer-col a{display:block;font-size:13.5px;color:#c9d3e0;padding:5px 0;}
.footer-col a:hover{color:var(--yellow-500);}
.footer-col p{color:#93a0b8;font-size:13px;max-width:230px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:#7c88a3;flex-wrap:wrap;gap:10px;}
.footer-logo{margin-bottom:10px;}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .nav-cta .btn-ghost{display:none;}
  .hamburger{display:flex;}
  .docs-grid{grid-template-columns:1fr;}
  .section{padding:56px 0;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .cta-banner{padding:32px;}
}

::selection{background:var(--yellow-500);color:var(--navy-900);}