/* ============================================================
   SYRAX GLOBAL — Shared Stylesheet
   Design system, nav, footer, hero, section utilities
   ============================================================ */

/* ── DARK (default) — the ecosystem CHARCOAL ramp, 5 Sep 2026 ─────────────
   Moved off the Syrax teal-black (#030c0d/#061113/#091618/#0d1f22/#122629) so
   this site matches app.syrax.global and the admin panel. Until now the
   marketing site was the last surface on the retired stack, which meant the
   most public thing in the estate was the one that did not match.

   ⭐ #030c0d → #111e26 is a HUE fix as much as a lightness one: the old ground
   carried more red and less blue than the surfaces sitting on it — the same
   lightness in a different hue, which reads as a colour mismatch rather than
   as depth.

   ⚠️ THIS SITE HAS FIVE GROUND STEPS; THE PORTAL HAS FOUR. All five are in real
   use here (surface alone appears 85 times), so collapsing two would flatten a
   distinction the pages rely on. --surface2 (#2b4757) therefore CONTINUES the
   charcoal ramp by one step rather than repeating #233c49 — it is derived from
   the sequence, not picked. The other four are the portal's values exactly.

   ⛔ Do not "simplify" --surface2 to #233c49: surface2 is lighter than surface
   in the original and carries that relationship on 19 call sites. */
:root{
  --bg:#111e26;--bg2:#122029;--bg3:#1a2d38;
  --surface:#233c49;--surface2:#2b4757;
  /* Border alpha lifts with the ground. The old ramp sat near-black, where a
     0.08 hairline still read; on charcoal it disappears. Same reason the
     portal moved its border from 0.16 to 0.24. */
  --border:rgba(15,168,176,0.14);--border2:rgba(15,168,176,0.24);--border3:rgba(15,168,176,0.40);
  --text:#eaf5f4;--text2:#b6d2d8;--text3:#93b0b7;
  --accent:#0fa8b0;--accent-dark:#0a7a80;--accent2:#0d8f96;--accent3:#1dd9e8;
  --accent-glow:rgba(15,168,176,0.12);--accent-glow2:rgba(15,168,176,0.25);
  --gold:#c8a96e;--gold2:#a8894e;--green:#0fa898;
  --mono:'JetBrains Mono',monospace;--sans:'DM Sans',sans-serif;--display:'Syne',sans-serif;

  /* Glass mechanics tokens — see design-tokens/tokens.css for the canonical spec */
  --edge-light:rgba(255,255,255,.06);
  --blur-sm:4px;--blur-md:8px;--blur-lg:16px;
  --ease-spring:cubic-bezier(.32,1.25,.5,1);
  --shadow-card:inset 0 1px 0 var(--edge-light),0 4px 16px rgba(0,0,0,.32),0 4px 16px var(--accent-glow);
  --shadow-hover:inset 0 1px 0 var(--edge-light),0 10px 30px rgba(0,0,0,.42),0 10px 30px var(--accent-glow2)
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease}
.hero-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none}

/* ── NAV ──────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(17,30,38,0.92);backdrop-filter:blur(24px) saturate(1.8);border-bottom:1px solid var(--border);padding:0 2rem;height:90px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo img{height:36px;width:auto;object-fit:contain;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.nav-links{display:flex;align-items:center;list-style:none}
.nav-links a{color:var(--text2);text-decoration:none;font-size:.78rem;font-weight:500;letter-spacing:.04em;padding:0 .8rem;height:90px;display:flex;align-items:center;transition:color .2s;border-bottom:2px solid transparent;white-space:nowrap}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--accent3);border-bottom-color:var(--accent)}
.nav-cta{display:flex;align-items:center;gap:.75rem}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.5rem;border:none;background:transparent}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--text2);border-radius:2px;transition:all .3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:90px;left:0;right:0;background:rgba(17,30,38,0.97);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);z-index:999;padding:1rem 1.5rem 1.5rem;bottom:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;color:var(--text2);text-decoration:none;font-size:.88rem;font-weight:500;padding:.75rem 0;border-bottom:1px solid var(--border);transition:color .2s}
.mobile-menu a:last-of-type{border-bottom:none}
.mobile-menu a:hover{color:var(--accent3)}
.mobile-menu strong{display:block;color:var(--text);font-size:.78rem;font-weight:600;letter-spacing:.06em;padding:.6rem 0 .4rem;border-bottom:1px solid var(--border);margin-bottom:.25rem}
.mobile-menu-cta{margin-top:1rem;display:flex;flex-direction:column;gap:.75rem}
.mobile-menu-cta a{border-bottom:none!important;padding:0!important}
/* ...except the CTA buttons themselves, which the padding:0 above flattened
   to a 24px sliver once Launch Application became visible again. */
.mobile-menu-cta .btn-primary,.mobile-menu-cta .btn-ghost,.mobile-menu-cta .theme-toggle{padding:.85rem 1.1rem!important;min-height:48px;align-items:center}
.nav-dropdown{position:relative}
.nav-dropdown-menu{position:absolute;top:100%;left:0;min-width:220px;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:1rem;display:none;z-index:200;box-shadow:0 24px 60px rgba(0,0,0,.75)}
.nav-dropdown:hover .nav-dropdown-menu{display:block}
.nav-dropdown.nav-dropdown--closing .nav-dropdown-menu{display:none!important}
.nav-dropdown-menu a{display:block;height:auto;padding:.75rem 1rem;font-size:.8rem;font-weight:500;letter-spacing:.01em;border-radius:7px;border-bottom:none;color:var(--text2);border:1px solid transparent;transition:background .15s,color .15s,border-color .15s}
.nav-dropdown-menu a:hover{background:var(--surface2);border-color:var(--border2);color:var(--text)}

/* ── ECOSYSTEM MEGAMENU ───────────────────────────────────── */
.nav-mega{position:static} /* the menu centres on the nav bar, not on its trigger: centred on the trigger it ran off the left edge below ~1340px */
.nav-mega-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(860px,90vw);background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:1.5rem;display:none;z-index:200;box-shadow:0 24px 60px rgba(0,0,0,.75);grid-template-columns:1fr 1fr;gap:.5rem}
.nav-mega:hover .nav-mega-menu,.nav-mega-menu:hover{display:grid}
.nav-mega.nav-mega--closing .nav-mega-menu{display:none!important}
.nav-mega-item{display:flex;gap:1rem;align-items:flex-start;padding:.85rem 1rem;border-radius:8px;text-decoration:none;color:inherit;transition:background .15s,border-color .15s;border:1px solid transparent}
.nav-mega-item:hover{background:var(--surface2);border-color:var(--border2)}
.nav-mega-icon{width:38px;height:38px;border-radius:9px;flex-shrink:0;background:rgba(15,168,176,.07);border:1px solid rgba(15,168,176,.15);display:flex;align-items:center;justify-content:center;transition:border-color .2s,box-shadow .2s}
.nav-mega-item:hover .nav-mega-icon{border-color:var(--accent);box-shadow:0 0 12px rgba(15,168,176,.25)}
.nav-mega-icon svg{width:18px;height:18px;color:var(--accent)}
.nav-mega-title{font-family:var(--display);font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:.2rem;letter-spacing:-.01em}
.nav-mega-desc{font-size:.74rem;color:var(--text2);line-height:1.5;font-weight:300}
.nav-mega-status{display:inline-block;font-family:var(--mono);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;padding:.12rem .45rem;border-radius:100px;margin-top:.3rem}
.nav-mega-status.live{background:rgba(15,168,176,.12);color:var(--accent3);border:1px solid rgba(15,168,176,.25)}
.nav-mega-status.operational{background:rgba(40,200,120,.1);color:#4dd99a;border:1px solid rgba(40,200,120,.25)}
.nav-mega-status.dev{background:rgba(200,169,110,.1);color:var(--gold);border:1px solid rgba(200,169,110,.25)}
.nav-mega-status.prelaunce{background:rgba(61,110,117,.1);color:var(--text2);border:1px solid rgba(61,110,117,.25)}
.nav-mega-head{grid-column:1/-1;padding:.2rem 1rem .75rem;border-bottom:1px solid var(--border);margin-bottom:.25rem}
.nav-mega-head-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text3)}
@media(max-width:1100px){.nav-mega-menu{display:none!important}}

/* ── INDUSTRIES MEGAMENU ──────────────────────────────────── */
.nav-ind{position:relative}
.nav-ind-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(920px,92vw);background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:1.5rem;display:none;z-index:200;box-shadow:0 24px 60px rgba(0,0,0,.75)}
.nav-ind:hover .nav-ind-menu,.nav-ind-menu:hover{display:block}
.nav-ind-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem}
.nav-ind-col-head{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:.5rem .5rem .35rem;border-bottom:1px solid var(--border);margin-bottom:.3rem}
.nav-ind-link{display:block;font-size:.8rem;color:var(--text2);text-decoration:none;padding:.28rem .5rem;border-radius:5px;transition:color .15s,background .15s;white-space:nowrap}
.nav-ind-link:hover{color:var(--accent3);background:rgba(15,168,176,.06)}
.nav-ind-footer{border-top:1px solid var(--border);padding-top:.75rem;margin-top:.75rem;display:flex;justify-content:space-between;align-items:center}
.nav-ind-footer-label{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.nav-ind-footer-cta{font-size:.78rem;color:var(--accent3);text-decoration:none;font-family:var(--mono);letter-spacing:.04em;transition:color .15s}
.nav-ind-footer-cta:hover{color:var(--text)}
@media(max-width:1100px){.nav-ind-menu{display:none!important}}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--text2);font-family:var(--sans);font-size:.8rem;font-weight:500;padding:.5rem 1.1rem;border-radius:6px;cursor:pointer;transition:border-color .3s var(--ease-spring),color .3s var(--ease-spring),background .3s var(--ease-spring),transform .2s var(--ease-spring);letter-spacing:.02em;text-decoration:none;display:inline-flex;align-items:center}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent3)}
.btn-ghost:active{transform:scale(.98)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border:1px solid var(--accent);color:#fff;font-family:var(--sans);font-size:.8rem;font-weight:600;padding:.5rem 1.1rem;border-radius:6px;cursor:pointer;transition:background .3s var(--ease-spring),box-shadow .3s var(--ease-spring),transform .2s var(--ease-spring);letter-spacing:.02em;text-decoration:none;display:inline-flex;align-items:center}
.btn-primary:hover{background:linear-gradient(135deg,var(--accent3),var(--accent));box-shadow:0 0 20px var(--accent-glow2)}
.btn-primary:active{transform:scale(.98)}
.btn-lg{font-size:.9rem;padding:.85rem 1.75rem;border-radius:8px}
.btn-primary.btn-lg:hover{background:linear-gradient(135deg,var(--accent3),var(--accent));box-shadow:0 0 28px var(--accent-glow2);transform:translateY(-1px)}
.btn-ghost.btn-lg:hover{border-color:var(--accent);color:var(--accent3);background:rgba(15,168,176,.07)}

/* ── PAGE HERO ────────────────────────────────────────────── */
.page-hero{padding:3rem 2rem 2rem;border-bottom:1px solid var(--border);background:linear-gradient(to bottom,rgba(10,24,26,0.55),rgba(17,30,38,0.45));position:relative;overflow:hidden;margin-top:90px}
.page-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(15,168,176,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(15,168,176,.025) 1px,transparent 1px);background-size:40px 40px}
.hero-glow-bg{position:absolute;top:0;left:50%;transform:translateX(-50%);width:800px;height:400px;background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(15,168,176,.09),transparent 65%);pointer-events:none}
.page-hero-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(15,168,176,.07);border:1px solid rgba(15,168,176,.2);color:var(--accent);font-family:var(--mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .9rem;border-radius:100px;margin-bottom:2rem}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent3);box-shadow:0 0 6px var(--accent);animation:pulse-dot 2s ease infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
.page-hero h1{font-family:var(--display);font-size:clamp(2rem,4vw,3.5rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin-bottom:1.25rem;text-shadow:0 0 18px rgba(15,168,176,0.5),0 0 45px rgba(15,168,176,0.22)}
.page-hero h1 .ac{color:var(--accent3)}
.page-hero p{font-size:1.05rem;color:var(--text2);max-width:640px;line-height:1.75;font-weight:300;margin-bottom:2.5rem}
.hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;border-top:1px solid var(--border);padding-top:2rem}
.hero-stat{display:flex;flex-direction:column;gap:.75rem;padding:1.5rem;background:rgba(15,168,176,.04);border:1px solid var(--border);border-radius:12px;transition:all .2s ease}
.hero-stat:hover{background:rgba(15,168,176,.08);border-color:var(--border2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,168,176,.08)}
.hero-stat-val{font-family:var(--display);font-size:1.75rem;font-weight:800;color:var(--accent3);letter-spacing:-.02em;order:1}
.hero-stat-val.hero-stat-url{font-family:var(--mono);font-weight:600;font-size:1.15rem;letter-spacing:-.01em;word-break:normal;overflow-wrap:break-word}
.hero-stat-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);order:0}
.stat-num{font-family:var(--display);font-size:1.5rem;font-weight:800;color:var(--accent3);letter-spacing:-.02em}
.stat-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-top:.2rem}
.hero-sub{font-size:1.05rem;color:var(--text2);max-width:640px;line-height:1.75;font-weight:300;margin-bottom:2.5rem}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.75rem;transition:border-color .2s,transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s}
.feature-card:hover::before{opacity:1}
.feature-card:hover{border-color:var(--border3);transform:translateY(-2px);box-shadow:var(--shadow-hover)}

/* ── SECTIONS ─────────────────────────────────────────────── */
section{padding:3.5rem 2rem;position:relative}
.section-inner{max-width:1200px;margin:0 auto}
.section-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;display:flex;align-items:center;gap:.75rem}
.section-label::before{content:'';display:block;width:24px;height:1px;background:var(--accent)}
.section-title{font-family:var(--display);font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:1.25rem;text-shadow:0 0 18px rgba(15,168,176,0.5),0 0 45px rgba(15,168,176,0.22),0 0 90px rgba(15,168,176,0.08)}
.section-sub{font-size:1rem;color:var(--text2);max-width:580px;line-height:1.75;font-weight:300}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent);max-width:1200px;margin:0 auto}
.back-btn{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);text-decoration:none;padding:.4rem .85rem;border:1px solid var(--border2);border-radius:8px;transition:all .22s;margin-bottom:1.25rem}
.back-btn:hover{color:var(--accent);border-color:rgba(15,168,176,.4);background:rgba(15,168,176,.06)}
.section-title-sm{font-family:var(--display);font-size:1.6rem;font-weight:700;line-height:1.15;letter-spacing:-.015em;margin-bottom:1rem}

/* ── REVEAL ANIMATION ─────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── CARDS (index.html pattern) ───────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.75rem;transition:border-color .2s,transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s}
.card:hover::before{opacity:1}
.card:hover{border-color:var(--border3);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.card-icon{width:44px;height:44px;border-radius:10px;background:var(--surface);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;transition:border-color .3s,box-shadow .3s}
.card:hover .card-icon{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.card-num{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;color:var(--text3);text-transform:uppercase;margin-bottom:.75rem}
.card h3{font-family:var(--display);font-size:1rem;font-weight:700;margin-bottom:.6rem;letter-spacing:-.01em}
.card p{font-size:.83rem;color:var(--text2);line-height:1.65}

/* ── GLASS MECHANICS — applied once to every elevated card-like
   surface across the site (see premium-glass-design-system.md §3).
   Keep this selector list in sync with js/nav.js's SHEEN_SELECTOR. ── */
.card,.feature-card,.panel,.app-block,.rwa-card,.product-card,
.ind-card,.challenge-item,.role-card,.blog-card,.faq-item,.glossary-term,.zk-feat{
  position:relative;
  backdrop-filter:blur(var(--blur-md)) saturate(1.2);
  -webkit-backdrop-filter:blur(var(--blur-md)) saturate(1.2);
  box-shadow:var(--shadow-card);
  transition-timing-function:var(--ease-spring)
}
.card,.feature-card,.role-card,.blog-card,.faq-item,.glossary-term{overflow:hidden}
.card::after,.feature-card::after,.panel::after,.app-block::after,.rwa-card::after,
.product-card::after,.ind-card::after,.challenge-item::after,.role-card::after,
.blog-card::after,.faq-item::after,.glossary-term::after,.zk-feat::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,18%),rgba(15,168,176,.07),transparent 46%)
}
.card:hover::after,.feature-card:hover::after,.panel:hover::after,.app-block:hover::after,
.rwa-card:hover::after,.product-card:hover::after,.ind-card:hover::after,
.challenge-item:hover::after,.role-card:hover::after,.blog-card:hover::after,
.faq-item:hover::after,.glossary-term:hover::after,.zk-feat:hover::after{opacity:1}

/* Non-interactive glass containers — blur/edge-light/tint, no cursor sheen */
.cta-band,.apply-form,.spec-table-wrap,.vis-canvas-wrap,.hero-stat{
  position:relative;
  backdrop-filter:blur(var(--blur-sm)) saturate(1.15);
  -webkit-backdrop-filter:blur(var(--blur-sm)) saturate(1.15);
  box-shadow:var(--shadow-card)
}

/* ── CARD GRID (index.html pattern) ──────────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:3rem}

/* ── ECO CARD (index.html connected grid) ─────────────────── */
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-top:3rem}
.eco-card{background:var(--bg2);padding:2.25rem;transition:background .25s;position:relative;overflow:hidden;text-decoration:none;color:inherit;display:block}
.eco-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s}
.eco-card:hover{background:var(--bg3)}
.eco-card:hover::before{opacity:1}
.eco-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;background:var(--surface);border:1px solid var(--border2);transition:border-color .3s,box-shadow .3s}
.eco-card:hover .eco-icon{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.eco-card h3{font-family:var(--display);font-size:1.05rem;font-weight:700;margin-bottom:.6rem;letter-spacing:-.01em}
.eco-card p{font-size:.85rem;color:var(--text2);line-height:1.65;font-weight:300}
.eco-arrow{margin-top:1.25rem;font-size:.75rem;color:var(--text3);font-family:var(--mono);letter-spacing:.05em;display:flex;align-items:center;gap:.5rem;transition:color .2s}
.eco-card:hover .eco-arrow{color:var(--accent)}

/* ── ZK FEAT (horizontal icon+text rows) ─────────────────── */
.zk-feat{display:flex;gap:1rem;padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;transition:border-color .2s,box-shadow .2s;position:relative;overflow:hidden}
.zk-feat::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s}
.zk-feat:hover{border-color:var(--border3);box-shadow:var(--shadow-hover)}
.zk-feat:hover::before{opacity:1}
.zk-feat-icon{width:36px;height:36px;flex-shrink:0;background:var(--accent-glow);border:1px solid rgba(15,168,176,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:border-color .3s,box-shadow .3s}
.zk-feat:hover .zk-feat-icon{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.zk-feat h4{font-family:var(--display);font-size:.9rem;font-weight:700;margin-bottom:.3rem;letter-spacing:-.01em}
.zk-feat p{font-size:.8rem;color:var(--text2);line-height:1.6}
.zk-feats{display:flex;flex-direction:column;gap:.75rem}

/* ── PHIL ITEM (numbered list) ───────────────────────────── */
.phil-list{display:flex;flex-direction:column;gap:1.5rem}
.phil-item{display:flex;gap:1.25rem;align-items:flex-start}
.phil-num{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--accent);min-width:24px;margin-top:.2rem}
.phil-content h4{font-family:var(--display);font-size:.95rem;font-weight:700;margin-bottom:.4rem;letter-spacing:-.01em}
.phil-content p{font-size:.83rem;color:var(--text2);line-height:1.65;font-weight:300}

/* ── BALANCED GRIDS — avoid orphan tiles for fixed card counts ── */
/* 4-card tiled grid as a clean 2×2 (e.g. intelligence.html stack) */
.eco-grid.eco-grid-2col{grid-template-columns:repeat(2,1fr)}
/* 4-step pipeline row that collapses 4 → 2 → 1 without an orphan */
.pipeline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3.5rem}
/* 5-card grid: 3 on top, 2 centred below (e.g. compliance.html pillars) */
.card-grid.cards-5{grid-template-columns:repeat(6,1fr)}
.card-grid.cards-5>.card{grid-column:span 2}
.card-grid.cards-5>.card:nth-child(4){grid-column:2 / span 2}
.card-grid.cards-5>.card:nth-child(5){grid-column:4 / span 2}
@media(max-width:900px){.pipeline-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.card-grid.cards-5{grid-template-columns:1fr}.card-grid.cards-5>.card,.card-grid.cards-5>.card:nth-child(4),.card-grid.cards-5>.card:nth-child(5){grid-column:auto}}
@media(max-width:640px){.eco-grid.eco-grid-2col{grid-template-columns:1fr}}
@media(max-width:560px){.pipeline-grid{grid-template-columns:1fr}}

/* ── RWA CARD ─────────────────────────────────────────────── */
.rwa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}
.rwa-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem;text-align:center;transition:all .2s}
.rwa-card:hover{border-color:var(--border3);background:rgba(15,168,176,.03);box-shadow:var(--shadow-hover)}
.rwa-val{font-family:var(--display);font-size:1.5rem;font-weight:800;color:var(--accent3);letter-spacing:-.02em;margin-bottom:.35rem}
.rwa-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}

/* ── TWO-COL LAYOUT ──────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;margin-top:3.5rem}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2.5rem;position:relative;overflow:hidden}
.panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5}
.panel h3{font-family:var(--display);font-size:1.1rem;font-weight:700;margin-bottom:1rem;letter-spacing:-.01em}
.panel p{font-size:.85rem;color:var(--text2);line-height:1.8;font-weight:300}

/* ── APPLICATION BLOCKS ───────────────────────────────────── */
.app-block{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2.25rem;margin-bottom:1.5rem;position:relative;overflow:hidden}
.app-block::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(to bottom,var(--accent3),var(--accent2))}
.app-num{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem}
.app-title{font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:-.015em;margin-bottom:1.5rem}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
.app-col-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.app-col-body{font-size:.85rem;color:var(--text2);line-height:1.75;font-weight:300}
.app-col-body strong{color:var(--text);font-weight:500}
.app-use-cases{margin-top:1.25rem}
.app-use-cases ul{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-top:.6rem}
.app-use-cases li{display:flex;gap:.75rem;align-items:flex-start;font-size:.84rem;color:var(--text2);font-weight:300;line-height:1.65}
.app-use-cases li::before{content:'';display:block;width:5px;height:5px;border-radius:50%;background:var(--accent3);flex-shrink:0;margin-top:.52rem}
.app-use-cases li strong{color:var(--text);font-weight:500}

/* ── PRODUCT PILLS ────────────────────────────────────────── */
.pill{font-family:var(--mono);font-size:.63rem;letter-spacing:.05em;background:rgba(15,168,176,.08);border:1px solid rgba(15,168,176,.18);color:var(--accent);padding:.25rem .7rem;border-radius:4px}
.pill.gold{background:rgba(200,169,110,.08);border-color:rgba(200,169,110,.2);color:var(--gold)}
.pill.green{background:rgba(15,168,152,.08);border-color:rgba(15,168,152,.2);color:var(--green)}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}

/* ── CHALLENGE GRID ───────────────────────────────────────── */
.challenge-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.challenge-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.75rem}
.challenge-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.75rem}
.challenge-label.problem{color:#e07878}
.challenge-label.solution{color:var(--accent3)}
.challenge-item h4{font-family:var(--display);font-size:.95rem;font-weight:700;margin-bottom:.6rem;letter-spacing:-.01em}
.challenge-item p{font-size:.84rem;color:var(--text2);line-height:1.7;font-weight:300}

/* ── PRODUCT SECTION ──────────────────────────────────────── */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.product-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem;transition:border-color .2s}
.product-card:hover{border-color:var(--border3);box-shadow:var(--shadow-hover)}
.product-card-icon{width:38px;height:38px;border-radius:9px;background:var(--accent-glow);border:1px solid rgba(15,168,176,.2);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.product-card h4{font-family:var(--display);font-size:.9rem;font-weight:700;margin-bottom:.4rem;letter-spacing:-.01em}
.product-card p{font-size:.8rem;color:var(--text2);line-height:1.65;font-weight:300}

/* ── BREADCRUMB ───────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--text3);margin-bottom:1.75rem;flex-wrap:wrap}
.breadcrumb a{color:var(--text3);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{color:var(--text3)}
.breadcrumb .current{color:var(--text2)}

/* ── BACK NAV ─────────────────────────────────────────────── */
.back-link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);text-decoration:none;transition:color .2s;margin-bottom:1.25rem}
.back-link:hover{color:var(--accent)}
.back-link svg{width:14px;height:14px;flex-shrink:0}

/* ── CTA BAND ─────────────────────────────────────────────── */
.cta-band{background:linear-gradient(135deg,var(--surface) 0%,var(--bg3) 100%);border:1px solid var(--border);border-radius:16px;padding:3rem;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;margin-top:4rem}
.cta-band h2,.cta-band h3{font-family:var(--display);font-size:1.5rem;font-weight:800;line-height:1.2;letter-spacing:-.02em;margin-bottom:.75rem}
.cta-band p{font-size:.88rem;color:var(--text2);line-height:1.75;font-weight:300;max-width:520px}
.cta-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:flex-end}

/* ── FOOTER ───────────────────────────────────────────────── */
footer{border-top:1px solid var(--border);padding:4rem 2rem 2rem;background:rgba(17,30,38,0.85)}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 4fr 1.2fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid var(--border);margin-bottom:2rem}
.footer-cols-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.footer-brand p{font-size:.82rem;color:var(--text3);line-height:1.7;margin-top:1rem;font-weight:300;max-width:280px}
.footer-col h4{font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);margin-bottom:1rem}
.footer-col a{display:block;font-size:.78rem;color:var(--text3);text-decoration:none;margin-bottom:.5rem;transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap}
.footer-legal{font-size:.75rem;color:var(--text3);line-height:1.6;max-width:700px}
.footer-meta{font-family:var(--mono);font-size:.68rem;color:var(--text3);letter-spacing:.05em;text-align:right;flex-shrink:0}
.footer-social{display:flex;gap:.6rem;margin-top:.9rem}
.footer-social-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:rgba(15,168,176,.08);border:1px solid rgba(15,168,176,.2);color:var(--accent);transition:all .2s;text-decoration:none;padding:8px;box-sizing:border-box}
.footer-social-link:hover{background:rgba(15,168,176,.18);border-color:rgba(15,168,176,.5);transform:translateY(-2px)}
.footer-social-link svg{width:100%;height:100%;fill:var(--accent);display:block;flex-shrink:0}
.footer-social-link[aria-label="Syrax on LinkedIn"]{padding:6px}

/* ── SKIP LINK ────────────────────────────────────────────── */
.skip-link{position:absolute;top:-100px;left:1rem;background:var(--accent);color:#111e26;font-weight:600;font-size:.8rem;padding:.5rem 1rem;border-radius:6px;z-index:9999;transition:top .2s;text-decoration:none}
.skip-link:focus{top:1rem}

/* ── INDUSTRY HUB GRID ────────────────────────────────────── */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.ind-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s;position:relative;display:block;text-decoration:none}
.ind-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s}
.ind-card:hover::before{opacity:1}
.ind-card:hover{border-color:var(--border3);box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.ind-card-inner{padding:1.5rem}
.ind-icon{width:42px;height:42px;border-radius:10px;background:var(--accent-glow);border:1px solid rgba(15,168,176,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .3s,box-shadow .3s;margin-bottom:1rem}
.ind-card:hover .ind-icon{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.ind-card h3{font-family:var(--display);font-size:.95rem;font-weight:700;margin-bottom:.35rem;letter-spacing:-.01em;color:var(--text)}
.ind-tagline{font-size:.76rem;color:var(--text3);line-height:1.45;font-weight:300;margin-bottom:1rem}
.ind-cat{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);background:rgba(255,255,255,.04);border:1px solid var(--border);padding:.2rem .55rem;border-radius:4px;display:inline-block}
.ind-arrow{position:absolute;bottom:1.25rem;right:1.25rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;color:var(--text3);transition:color .2s,transform .2s}
.ind-card:hover .ind-arrow{color:var(--accent3);transform:translateX(3px)}
.ind-card.hidden{display:none}

/* SEARCH + FILTER */
.ind-controls{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom:2.5rem}
.ind-search{flex:1;min-width:240px;position:relative}
.ind-search input{width:100%;background:var(--surface);border:1px solid var(--border2);color:var(--text);font-family:var(--sans);font-size:.88rem;padding:.7rem 2.4rem .7rem 2.6rem;border-radius:8px;outline:none;transition:border-color .2s}
.ind-search input::placeholder{color:var(--text3)}
.ind-search input:focus{border-color:var(--accent)}
.ind-search-icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none}
.ind-search-clear{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);cursor:pointer;padding:0;line-height:1;display:none;font-size:1rem;transition:color .15s}
.ind-search-clear:hover{color:var(--text)}
.ind-search-clear.visible{display:block}
.ind-filters{display:flex;gap:.5rem;flex-wrap:wrap}
.ind-filter{background:transparent;border:1px solid var(--border2);color:var(--text3);font-size:.74rem;padding:.35rem .85rem;border-radius:100px;cursor:pointer;transition:all .18s;font-family:var(--sans)}
.ind-filter:hover,.ind-filter.active{background:rgba(15,168,176,.1);border-color:var(--accent);color:var(--accent3)}
.ind-count{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:1.5rem}
.ind-empty{text-align:center;padding:4rem 2rem;color:var(--text3);font-size:.9rem;display:none}
.ind-empty.show{display:block}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:1280px){
  .nav-links a{padding:0 .45rem;font-size:.74rem;letter-spacing:.02em}
  .nav-cta .btn-ghost:first-child{display:none}
  .ind-grid{grid-template-columns:repeat(3,1fr)}
}
/* Nav fit (1 Oct 2026): the top row never wraps a button. Link spacing shrinks with the viewport,
   and the Regulatory button steps out where the row cannot hold it (the compact rule above meant
   to do that, but its :first-child selector stopped matching when the theme toggle moved first).
   Widths are measured: logo 227 + side padding 64 + buttons 496 (380 without Regulatory) + link
   text 373 (342 compact) + 14 link paddings, with 24px kept spare for a desktop scrollbar. */
@media(min-width:1281px) and (max-width:1355px){.nav-cta .btn-ghost,.nav-cta .btn-primary{white-space:nowrap}.nav-links a{padding:0 min(.8rem,calc((100vw - 1184px) / 14))}}
@media(min-width:1209px) and (max-width:1280px){.nav-cta .btn-ghost,.nav-cta .btn-primary{white-space:nowrap}.nav-links a{padding:0 min(.45rem,calc((100vw - 1153px) / 14))}}
@media(min-width:1093px) and (max-width:1208px){.nav-cta .btn-ghost,.nav-cta .btn-primary{white-space:nowrap}.nav-cta .theme-toggle+.btn-ghost{display:none}.nav-links a{padding:0 min(.45rem,calc((100vw - 1037px) / 14))}}
/* 901-1092px: the row cannot hold seven links and the buttons, so tablets and small laptops get the phone menu */
@media(min-width:901px) and (max-width:1092px){.nav-links{display:none}.nav-hamburger{display:flex}.nav-cta .btn-ghost{display:none}}
/* Footer, 901-1100px: its three columns need ~1010px but the page offers 840-960, so every page scrolled sideways
   (scrollWidth 1043 at both 901 and 1024, measured 2 Oct 2026). Brand and social share the top row; the link columns take the full row below. */
@media(min-width:901px) and (max-width:1100px){.footer-brand{order:1}.footer-top>.footer-col{order:2}.footer-cols-grid{order:3;grid-column:1/-1}.footer-top{grid-template-columns:1fr auto;gap:2rem 3rem}}
@media(max-width:1024px){
  .app-grid{grid-template-columns:1fr}
  .challenge-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr 1fr}
  .eco-grid{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr;gap:2rem}
  .rwa-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .nav-hamburger{display:flex}
  .nav-links{display:none}
  .nav-cta .btn-ghost{display:none}
  .ind-grid{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-cols-grid{grid-template-columns:repeat(2,1fr);grid-column:1/-1}
  .footer-links{grid-template-columns:repeat(2,1fr)}
  .cta-band{grid-template-columns:1fr;text-align:center}
  .cta-actions{justify-content:center}
  .hero-stats{gap:1.5rem;grid-template-columns:repeat(2,1fr)}
  h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;hyphens:none}
}
@media(max-width:600px){
  nav{padding:0 1rem}
  .nav-logo img{max-width:200px;height:36px}
  .page-hero{padding:3.5rem 1.25rem 2.5rem}
  .page-hero h1{font-size:1.9rem}
  section{padding:2.5rem 1.25rem}
  .ind-grid{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column}
  .footer-meta{text-align:left}
  .footer-links{grid-template-columns:1fr 1fr;gap:1.25rem}
  .hero-stats{gap:1rem;grid-template-columns:1fr}
  .hero-stat-val{font-size:1.4rem;overflow-wrap:break-word;word-break:normal}
  .hero-stat-val.hero-stat-url{font-size:1rem}
  /* Key-value rows in panels: let value span shrink & break on narrow screens */
  .panel div[style*="justify-content:space-between"] > span:last-child{min-width:0;overflow-wrap:anywhere;word-break:normal;text-align:right}
  .cta-band{padding:1.5rem 1.25rem}
  .panel{padding:1.5rem 1.25rem}
  .app-block{padding:1.5rem 1.25rem}
  .product-grid{grid-template-columns:1fr}
  .eco-grid{grid-template-columns:1fr}
  .rwa-grid{grid-template-columns:1fr 1fr}
  .card-grid{grid-template-columns:1fr}
  .zk-feat{flex-direction:column}
  .challenge-grid{grid-template-columns:1fr}
}
@media(max-width:460px){
  .ind-grid{grid-template-columns:1fr}
}

/* ── SECTION BACKGROUND ───────────────────────────────────── */
section{background:transparent}

/* ── FOOTER STATUS / DEV-NOTICE ───────────────────────────── */
.status-item{display:flex;flex-direction:column;gap:.35rem}
.status-item label{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.status-item span{font-size:.82rem;color:var(--text2);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.tag{display:inline-block;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;padding:.15rem .45rem;border-radius:3px;border:1px solid var(--border);color:var(--text3);text-transform:uppercase;white-space:nowrap}
.tag.dev{border-color:rgba(15,168,176,0.3);color:var(--accent);background:rgba(15,168,176,0.06)}
/* ── LEGACY INDUSTRY FOOTER COMPAT ───────────────────────── */
.footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2rem}
.footer-col-title{font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);margin-bottom:1rem}


/* ── STATUS PILL SYSTEM ───────────────────────────────────── */
.status-live{background:rgba(15,168,176,.12);color:var(--accent3);border:1px solid rgba(15,168,176,.25);font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem;border-radius:100px}
.status-operational{background:rgba(40,200,120,.1);color:#4dd99a;border:1px solid rgba(40,200,120,.25);font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem;border-radius:100px}
.status-dev{background:rgba(200,169,110,.1);color:var(--gold);border:1px solid rgba(200,169,110,.25);font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem;border-radius:100px}
.status-prelaunce{background:rgba(61,110,117,.1);color:var(--text2);border:1px solid rgba(61,110,117,.25);font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem;border-radius:100px}

/* ── CAREERS PAGE ─────────────────────────────────────────── */
.role-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .25s}
.role-card:hover{border-color:rgba(15,168,176,0.25);box-shadow:var(--shadow-hover)}
.role-header{padding:2rem;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem}
.role-meta{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.75rem}
.role-num{font-family:var(--mono);font-size:.7rem;color:var(--text3);letter-spacing:.06em}
.role-title{font-family:var(--display);font-size:1.2rem;font-weight:600;color:var(--text1);margin-bottom:.5rem}
.role-summary{font-size:.88rem;color:var(--text2);line-height:1.7}
.role-toggle{font-size:1.4rem;color:var(--accent);flex-shrink:0;transition:transform .25s;line-height:1;user-select:none}
.role-toggle.open{transform:rotate(45deg)}
.role-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.role-body.open{max-height:2000px}
.role-body-inner{padding:0 2rem 2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.role-section-title{font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.75rem}
.role-list{list-style:disc;padding-left:1.2rem;color:var(--text2);font-size:.875rem;line-height:1.8}
.role-impact{background:rgba(15,168,176,0.04);border:1px solid rgba(15,168,176,0.1);border-radius:8px;padding:1.25rem;margin-top:0}
.role-impact-label{font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem}
.role-impact p{font-size:.875rem;color:var(--text2);line-height:1.7}
.apply-form{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:2.5rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem}
.form-field{display:flex;flex-direction:column;gap:.4rem}
.form-field label{font-size:.78rem;color:var(--text3);font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
.form-field input,.form-field select,.form-field textarea{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:.7rem 1rem;color:var(--text1);font-family:var(--sans);font-size:.88rem;outline:none;transition:border-color .2s;resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:rgba(15,168,176,0.4)}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--text3)}
@media(max-width:768px){.role-body-inner{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
  .ind-card{transform:none!important}
  .skip-link{transition:none}
}

/* ── PRINT ────────────────────────────────────────────────── */
@media print{
  *{color:#000!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important}
  nav,footer,.mobile-menu,.skip-link,.cta-band,.btn-primary,.btn-ghost{display:none!important}
  .page-hero{padding:2rem 0!important}
  .app-block{break-inside:avoid;border:1px solid #ccc!important}
  a[href]:after{content:" ("attr(href)")";font-size:.75em}
  a[href^="#"]:after,a[href^="javascript:"]:after{content:""}
}

/* ============================================================
   MOBILE OPTIMISATION ROUND 2
   - Touch targets (WCAG AAA 44×44)
   - Inline-style override defeats
   - Narrow viewport polish (≤400px)
   ============================================================ */

/* Touch target improvements ─────────────────────────────── */
.footer-social-link{width:44px;height:44px;padding:10px}
.footer-social-link[aria-label="Syrax on LinkedIn"]{padding:8px}
.mobile-menu a{padding:.95rem 0}
.ind-filter{padding:.5rem 1rem;font-size:.8rem}

/* Inline-style overrides at ≤600px ───────────────────────── */
@media(max-width:600px){
  /* Footer status row pattern — defeats inline gap:3rem on ~16 pages */
  div[style*="gap:3rem"][style*="flex-wrap:wrap"]{gap:1.25rem!important}

  /* RWA-grid inline override defeat (srx-token.html "Security Audit") */
  .rwa-grid{grid-template-columns:1fr 1fr!important}

  /* Forms — prevent iOS focus auto-zoom + full-width on small screens */
  .ind-search{min-width:0;width:100%}
  .ind-search input{font-size:16px}
  .form-field input,
  .form-field select,
  .form-field textarea{font-size:16px}
  #waitlist-form{flex-direction:column;align-items:stretch}
  #waitlist-form input{min-width:0!important;width:100%!important;font-size:16px!important}
  #waitlist-form button{width:100%}

  /* Panel spec/roadmap rows (direct children) — defeat inline min-width:130px */
  .panel > div[style*="justify-content:space-between"]{flex-wrap:wrap;gap:.25rem .75rem}
  .panel > div[style*="justify-content:space-between"] > span:first-child{min-width:0!important}

  /* Spec rows nested inside a column-flex container within .panel
     (blockchain.html Technical Specs, faucet.html Network Parameters) */
  .panel div[style*="flex-direction:column"] > div[style*="justify-content:space-between"]{flex-wrap:wrap;gap:.15rem .5rem}
  .panel div[style*="flex-direction:column"] > div[style*="justify-content:space-between"] > span:first-child,
  .panel div[style*="flex-direction:column"] > div[style*="justify-content:space-between"] > span:first-of-type{flex-shrink:0}

  /* careers.html hero buttons — stack full-width ──────────── */
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn-lg{width:100%;justify-content:center;text-align:center}

  /* careers.html apply form submit button — full-width ────── */
  #apply-submit{width:100%}
}

@media(max-width:460px){
  .rwa-grid{grid-template-columns:1fr!important}
}

/* Very narrow viewport polish ≤400px ─────────────────────── */
@media(max-width:400px){
  section{padding:2rem 1rem}
  .page-hero{padding:3rem 1rem 2rem}
  .panel{padding:1.25rem 1rem}
  .hero-badge{font-size:.62rem;padding:.3rem .7rem}
  .section-label{font-size:.62rem}
  .breadcrumb{font-size:.6rem}
}

/* ============================================================
   MOBILE OPTIMISATION ROUND 3
   - Nav: centered logo, hamburger always-right, hide Launch App
   - Centre all headings and subheadings on mobile
   - Remove Launch Application from hamburger dropdown
   ============================================================ */

/* Launch Application in the hamburger dropdown ───────────────
   This used to be `display:none`, de-duplicating it because the nav bar
   already showed the button. But `.nav-cta .btn-primary` is itself hidden at
   ≤900px (see below), so the two rules together left the site's primary CTA
   with nowhere to appear on a phone — no way to reach the app from any of the
   46 pages that have a mobile menu. The dropdown is the only place it fits. */
.mobile-menu-cta .btn-primary{display:inline-flex;width:100%;text-align:center;justify-content:center}

/* Nav consistency + heading alignment ≤900px ─────────────── */
@media(max-width:900px){
  /* Center logo — nav is position:fixed so it's already a positioning context */
  .nav-logo{position:absolute;left:50%;transform:translateX(-50%);z-index:1}
  /* Push nav-cta (hamburger only at mobile) to the far right */
  .nav-cta{margin-left:auto}
  /* Hide Launch Application from the top nav bar */
  .nav-cta .btn-primary{display:none}
  /* Theme toggle → far left of the nav. Sitting in .nav-cta it collided with the
     centred wordmark on narrow screens; the left corner is otherwise empty. */
  .nav-cta .theme-toggle{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);z-index:2}
  /* Centre all main headings and subheadings */
  h1,h2,h3,.section-title{text-align:center}
  .section-sub,.hero-sub{text-align:center;margin-left:auto;margin-right:auto}
  .section-label{justify-content:center}
  .section-label::before{display:none}    /* hide decorative line when centred */
  .hero-badge{display:block;width:fit-content;margin-left:auto;margin-right:auto}
  /* Centre page-hero body copy (plain <p> inside hero) */
  .page-hero p,.page-hero-inner > p{text-align:center}
  /* Centre cta-band text (already 1-col at 900px, text-align:center already set) */
  /* Ensure hero-actions stack and stretch on mobile */
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn-lg{width:100%;justify-content:center;text-align:center}
}

/* ============================================================
   VISUAL ENHANCEMENT SUITE (26 May 2026)
   Canvas wrappers, SVG visuals, timeline, progress bars
   ============================================================ */

/* Canvas wrappers ─────────────────────────────────────────── */
.vis-canvas-wrap{position:relative;width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--surface)}
.vis-canvas-wrap canvas{display:block;width:100%}

/* Payment flow SVG ─────────────────────────────────────────── */
.payment-flow-wrap{max-width:820px;margin:2.5rem auto 0;display:block;overflow:visible}

/* Token utility wheel ──────────────────────────────────────── */
.srx-wheel-wrap{display:flex;justify-content:center;margin:2.5rem auto 3rem;max-width:400px}

/* Asset → token flow ──────────────────────────────────────── */
.token-flow-wrap{margin:2.5rem 0 1rem;display:block;width:100%;overflow:visible}

/* Security stack ──────────────────────────────────────────── */
.security-stack-wrap{width:100%;max-width:320px;margin:0 auto}

/* About page timeline ──────────────────────────────────────── */
.phase-timeline-wrap{position:relative;padding-left:1.75rem}
.phase-timeline-wrap::before{content:'';position:absolute;left:4px;top:20px;bottom:20px;width:2px;background:linear-gradient(to bottom,rgba(15,168,176,0.5),rgba(15,168,176,0.08))}
.phase-tl-item{display:flex;justify-content:space-between;align-items:flex-start;padding:.9rem 0;border-bottom:1px solid var(--border);position:relative}
.phase-tl-item:last-child{border-bottom:none}
.phase-tl-item::before{content:'';position:absolute;left:-1.35rem;top:1.15rem;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 7px rgba(15,168,176,0.45)}
.phase-tl-item.future::before{background:transparent;border:1.5px solid rgba(15,168,176,0.35);box-shadow:none}
.phase-tl-item.current::before{background:var(--accent);box-shadow:0 0 10px rgba(15,168,176,0.7);animation:pulse-dot 2s infinite}
.phase-tl-label{font-family:var(--mono);font-size:.75rem;color:var(--accent);letter-spacing:.06em;min-width:80px}
.phase-tl-text{color:var(--text2);font-size:.88rem;line-height:1.6;flex:1;padding-left:.75rem}

/* Governance proposal flow connector ──────────────────────── */
.proposal-step-list{position:relative}
.proposal-step-list::before{content:'';position:absolute;left:3px;top:30px;bottom:30px;width:2px;background:linear-gradient(to bottom,rgba(15,168,176,0.45),rgba(15,168,176,0.05))}

/* Roadmap progress bars ────────────────────────────────────── */
.progress-bar{height:3px;background:rgba(15,168,176,0.1);border-radius:2px;overflow:hidden;margin-top:.85rem}
.progress-fill{height:100%;background:linear-gradient(90deg,#0fa8b0,#1dd9e8);border-radius:2px;width:0;transition:width 1.4s cubic-bezier(.4,0,.2,1)}
.reveal.visible .progress-fill{width:var(--prog,50%)}

/* Desktop/Mobile SVG swap defaults ─────────────────────────── */
.token-flow-mobile,.payment-flow-mobile{display:none}

/* Mobile: canvas + SVG visual adjustments ─────────────────── */
@media(max-width:700px){
  .vis-canvas-wrap{border-radius:8px}
  /* Allow wheel to use more of mobile width for legible text */
  .srx-wheel-wrap{max-width:380px!important}
  /* Swap horizontal SVGs for vertical mobile-optimised SVGs */
  .token-flow-desktop,.payment-flow-desktop{display:none}
  .token-flow-mobile,.payment-flow-mobile{display:block}
  /* Wide canvas wrappers (blockchain, exchange) — tighter outer padding on mobile */
  section > div[style*="max-width:1640px"]{padding:0 1rem!important;margin-top:1.5rem!important;margin-bottom:1.5rem!important}
}

/* ── FAQ accordion (GEO / AI-citation friendly, native <details>) ─────────── */
.faq-wrap{max-width:860px;margin:0 auto}
.faq-item{border:1px solid var(--border2);border-radius:14px;background:var(--surface);margin-bottom:.9rem;overflow:hidden;transition:border-color .2s ease,background .2s ease}
.faq-item[open]{border-color:var(--border3);background:var(--surface2);box-shadow:var(--shadow-hover)}
.faq-item summary{list-style:none;cursor:pointer;padding:1.15rem 1.35rem;font-family:var(--sans);font-weight:600;font-size:1.02rem;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent3)}
.faq-item summary .faq-ico{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:1px solid var(--border3);display:flex;align-items:center;justify-content:center;color:var(--accent3);transition:transform .25s ease}
.faq-item[open] summary .faq-ico{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 1.35rem 1.25rem;color:var(--text2);line-height:1.8;font-size:.97rem}
.faq-item .faq-body a{color:var(--accent3)}
@media(max-width:640px){.faq-item summary{font-size:.95rem;padding:1rem 1.1rem}.faq-item .faq-body{padding:0 1.1rem 1.1rem;font-size:.92rem}}

/* ── Key-facts spec table (featured-snippet / AI extraction friendly) ─────── */
.spec-table-wrap{max-width:760px;margin:1.5rem auto 0;border:1px solid var(--border2);border-radius:14px;overflow:hidden;background:var(--surface)}
.spec-table{width:100%;border-collapse:collapse;font-family:var(--sans)}
.spec-table th,.spec-table td{text-align:left;padding:.85rem 1.25rem;border-bottom:1px solid var(--border);vertical-align:top;font-size:.95rem;line-height:1.6}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:none}
.spec-table th{color:var(--text2);font-weight:600;width:42%;white-space:nowrap}
.spec-table td{color:var(--text)}
.spec-table caption{caption-side:top;text-align:left;padding:0 0 .35rem;color:var(--text3);font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:640px){.spec-table th,.spec-table td{padding:.7rem .85rem;font-size:.88rem}.spec-table th{white-space:normal;width:46%}}

/* ── Glossary (DefinedTermSet — topical authority / AI extraction) ────────── */
.glossary{max-width:880px;margin:0 auto;display:grid;gap:.9rem}
.glossary-term{border:1px solid var(--border2);border-radius:14px;background:var(--surface);padding:1.2rem 1.4rem}
.glossary-term dt{font-family:var(--sans);font-weight:600;font-size:1.05rem;color:var(--text);margin-bottom:.45rem}
.glossary-term dt .gl-abbr{color:var(--accent3);font-family:var(--mono);font-size:.8rem;margin-left:.5rem}
.glossary-term dd{margin:0;color:var(--text2);line-height:1.8;font-size:.96rem}
@media(max-width:640px){.glossary-term{padding:1rem 1.1rem}.glossary-term dt{font-size:.98rem}.glossary-term dd{font-size:.9rem}}

/* ── Blog / Insights ──────────────────────────────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem;max-width:1040px;margin:1.5rem auto 0}
.blog-card{display:block;text-decoration:none;border:1px solid var(--border2);border-radius:16px;background:var(--surface);padding:1.6rem;transition:border-color .2s ease,transform .2s ease,background .2s ease}
.blog-card:hover{border-color:var(--border3);background:var(--surface2);transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.blog-card .blog-tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent3)}
.blog-card h3{margin:.6rem 0 .5rem;color:var(--text);font-size:1.22rem;line-height:1.3}
.blog-card p{color:var(--text2);line-height:1.7;font-size:.95rem;margin:0}
.blog-card .blog-meta{margin-top:1rem;font-family:var(--mono);font-size:.72rem;color:var(--text3);letter-spacing:.04em}
/* article */
.article{max-width:760px;margin:0 auto}
.article .article-meta{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:1rem}
.article h2{font-family:var(--sans);font-weight:600;font-size:1.5rem;color:var(--text);margin:2.4rem 0 .9rem;line-height:1.3}
.article h3{font-family:var(--sans);font-weight:600;font-size:1.15rem;color:var(--text);margin:1.8rem 0 .6rem}
.article p,.article li{color:var(--text2);line-height:1.85;font-size:1.02rem}
.article p{margin:0 0 1.1rem}
.article ul{margin:0 0 1.1rem;padding-left:1.2rem}
.article li{margin-bottom:.5rem}
.article strong{color:var(--text);font-weight:600}
.article a{color:var(--accent3)}
.article .lead{font-size:1.15rem;color:var(--text);line-height:1.8;margin-bottom:1.6rem}
.article .article-cta{margin-top:2.5rem;padding-top:1.8rem;border-top:1px solid var(--border2)}
.article table.spec-table{margin-top:1rem}
@media(max-width:640px){.article h2{font-size:1.3rem}.article p,.article li{font-size:.96rem}}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME  —  activated by <html data-theme="light">
   Clean cool-white palette, WCAG-AA contrast for text/links.
   ════════════════════════════════════════════════════════════ */
/* Light palette = the platform app's (app.syrax.global variables.css, measured live 1 Oct 2026):
   page #eef3f4, white panels, borders #e2eaeb/#cddcde, text #0e2125/#4d676b/#576b6f. Teal as TEXT uses
   the app's own darker teals (#0a7a84, #086b73) because its #0c98a4 is 3.1:1 on the page, under
   WCAG AA; #0c98a4 stays for fills (--accent2). Gold and green are the app's text-safe stakes/success. */
:root[data-theme="light"]{
  --bg:#eef3f4;--bg2:#ffffff;--bg3:#f3f8f8;
  --surface:#ffffff;--surface2:#f3f8f8;
  --border:#e2eaeb;--border2:#cddcde;--border3:rgba(12,152,164,0.40);
  --text:#0e2125;--text2:#4d676b;--text3:#576b6f;
  --accent:#0a7a84;--accent-dark:#086b73;--accent2:#0c98a4;--accent3:#086b73;
  --accent-glow:rgba(12,152,164,0.10);--accent-glow2:rgba(12,152,164,0.18);
  --gold:#7a5f30;--gold2:#9c7d42;--green:#0f6248;

  /* Glass mechanics — light theme: edge-light reads as a brighter top bevel, softer ink shadow */
  --edge-light:rgba(255,255,255,.55);
  --shadow-card:inset 0 1px 0 var(--edge-light),0 4px 16px rgba(20,45,50,.09),0 4px 16px var(--accent-glow);
  --shadow-hover:inset 0 1px 0 var(--edge-light),0 12px 34px rgba(20,45,50,.12),0 12px 34px var(--accent-glow2)
}
/* Theme-aware overrides for selectors that hardcoded dark colours */
[data-theme="light"] nav{background:rgba(255,255,255,0.86)}
[data-theme="light"] .mobile-menu{background:rgba(255,255,255,0.97)}
[data-theme="light"] footer{background:rgba(255,255,255,0.72)}
[data-theme="light"] .page-hero{background:linear-gradient(to bottom,rgba(255,255,255,0.6),rgba(238,243,244,0.3))}
/* AA on the light palette: the skip link's dark ink was 3.3:1 on the teal; the In Development tag's
   teal on its own tint was 4.3:1 (measured 1 Oct 2026) */
[data-theme="light"] .skip-link{color:#fff}
[data-theme="light"] .tag.dev{color:var(--accent-dark)}
[data-theme="light"] .hero-badge,[data-theme="light"] .pill{color:var(--accent-dark)} /* teal on its own tint: 4.2-4.3:1 */
[data-theme="light"] .panel .section-label,[data-theme="light"] .tint-chip{color:var(--accent-dark)!important} /* set inline on faucet and roadmap */
/* teal glow on titles looks muddy on white — soften to a crisp tint */
[data-theme="light"] .page-hero h1,[data-theme="light"] .section-title{text-shadow:none}
[data-theme="light"] .challenge-label.problem{color:#c0392b}
/* Particle canvas is drawn in bright teal/cyan for a near-black canvas. On the
   near-white light theme those same values glare and compete with the content,
   so darken and fade the whole layer (canvas paint can't be recoloured by CSS).
   Keep the mobile step directly after the base rule — both are single-class
   specificity, so a media query placed earlier in the file would lose the cascade. */
[data-theme="light"] .hero-canvas{opacity:.30;filter:brightness(.5) saturate(1.15)}
@media(max-width:900px){
  /* Small viewport: the animation covers proportionally far more of the screen,
     so pull it back further still. */
  [data-theme="light"] .hero-canvas{opacity:.14;filter:brightness(.45) saturate(1.1)}
}

/* ── Theme toggle button (nav) ──────────────────────────────── */
.theme-toggle{background:transparent;border:1px solid var(--border2);color:var(--text2);width:38px;height:38px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent3)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
[data-theme="light"] .theme-toggle .icon-sun{display:block}
[data-theme="light"] .theme-toggle .icon-moon{display:none}
/* mobile full-width variant inside the menu */
.mobile-menu .theme-toggle{width:100%;height:auto;justify-content:flex-start;gap:.6rem;padding:.7rem 1rem;font-family:var(--sans);font-size:.95rem;font-weight:500}
.mobile-menu .theme-toggle .tt-label{display:inline}
.theme-toggle .tt-label{display:none}

/* ════════════════════════════════════════════════════════════
   BRANDING — wordmark recolour + page-load icon transition
   ════════════════════════════════════════════════════════════ */

/* Page-load splash — Syrax logo with the teal glow rings from the user application.
   Background follows the active theme (dark splash on dark, light splash on light);
   the full-colour Cloudinary logo reads on both, so no colour-matrix is needed. */
#syrax-loader{position:fixed;inset:0;z-index:99999;background:#111e26;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.75rem;transition:opacity .55s ease,visibility .55s ease}
[data-theme="light"] #syrax-loader{background:#eef3f4}
#syrax-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
html.no-loader #syrax-loader{display:none}
.syrax-loader-ringwrap{position:relative;width:184px;height:184px;display:flex;align-items:center;justify-content:center}
.syrax-loader-ring-outer{position:absolute;width:184px;height:184px;border-radius:50%;border:1px solid rgba(15,168,176,0.12);border-top-color:rgba(15,168,176,0.08);animation:syrax-loader-spin 2.4s linear infinite reverse}
.syrax-loader-ring{position:absolute;width:168px;height:168px;border-radius:50%;border:2px solid transparent;border-top-color:#0fa8b0;border-right-color:rgba(15,168,176,0.25);animation:syrax-loader-spin 1s linear infinite}
#syrax-loader .syrax-loader-mark{width:140px;height:140px;object-fit:contain;animation:syrax-loader-pulse 1.8s ease-in-out infinite}
.syrax-loader-label{font-family:var(--mono,'JetBrains Mono',monospace);font-size:.65rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(15,168,176,0.6)}
@keyframes syrax-loader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes syrax-loader-pulse{0%,100%{opacity:.45;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.syrax-loader-ring,.syrax-loader-ring-outer,#syrax-loader .syrax-loader-mark{animation:none}#syrax-loader{transition:opacity .2s ease}}