/* Syrax hub component layer -- ported from app.syrax.global (4 Aug 2026).
 *
 * Kept OUT of styles.css on purpose: index.html links no external stylesheet
 * (it is a self-contained inline SPA), so styles.css never reaches the
 * homepage. This file is linked from all 72 pages, last in <head> so it beats
 * page-level inline <style> blocks.
 */
/* ══════════════════════════════════════════════════════════════════════════
   HUB DESIGN LANGUAGE — ported from app.syrax.global (4 Aug 2026)
   ──────────────────────────────────────────────────────────────────────────
   The ecosystem hub moved its flat 2D icon tiles and flat buttons to a
   "lit chip" language: a tilted rounded tile with a specular top edge, a
   shaded underside and a gloss overlay, so the element reads as a physical
   object catching light from above-left rather than a coloured square.

   Source of truth: Gateway/user/components/hub/EcosystemHub.module.css
   (.iconWrap / .signInBtn). Geometry, easing and the shadow ORDER are copied
   exactly so the two properties read as one system.

   ⚠️ Colour is deliberately NOT copied. The hub is dark-only, so its chip is a
   translucent cyan pane over near-black, which on this LIGHT-default site turns
   into a muddy grey smear. Dark uses the hub's own values verbatim; light keeps
   the construction but re-derives every colour — see the light block below.

   ⚠️ Light is NOT a solid teal tile with a white glyph. That was the first
   attempt and it read as a mobile app icon. Light is a near-white surface with
   a deep-teal glyph and a 5deg rake. Do not "restore" the saturated version.
   ══════════════════════════════════════════════════════════════════════════ */

/* Shared easing — the hub's card/chip curve. Declared before first use. */
:root{--ease-hub:cubic-bezier(.22,1,.36,1)}


/* ── 3D icon chip — replaces the flat .eco-icon tile ────────────────────── */
.eco-icon{
  /* position:relative is load-bearing — the ::after gloss is absolutely
     positioned, and without it the gloss anchors to .eco-card (which IS
     positioned) and smears across the entire card. */
  position:relative;
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(152deg,rgba(74,226,240,.30) 0%,rgba(22,132,145,.20) 42%,rgba(5,30,35,.34) 100%);
  border:1px solid rgba(29,217,232,.30);
  box-shadow:
    inset 0 1.5px 0 rgba(200,250,255,.50),   /* specular top edge */
    inset 1.5px 0 0 rgba(160,240,250,.22),   /* left edge catch   */
    inset 0 -2px 0 rgba(0,0,0,.42),          /* underside shade   */
    inset 0 -10px 18px rgba(0,0,0,.30),      /* interior depth    */
    0 10px 20px -8px rgba(0,0,0,.66),        /* cast shadow       */
    0 0 26px rgba(29,217,232,.16);           /* ambient glow      */
  /* The tilt is what sells it as a chip lying in space, not a flat square. */
  transform:perspective(220px) rotateX(9deg);
  transition:transform .3s var(--ease-hub),box-shadow .3s ease;
}
.eco-icon::after{
  content:"";position:absolute;inset:1px 1px 45% 1px;
  border-radius:13px 13px 40% 40%;
  background:linear-gradient(180deg,rgba(220,253,255,.26),rgba(220,253,255,0));
  pointer-events:none;
}
/* The site's icons are STROKED line SVGs, not filled glyphs, so the hub's
   background-clip:text gradient does not apply. The extrusion is carried by
   the same stacked drop-shadows instead, which do work on strokes. */
.eco-icon svg{position:relative;z-index:1;stroke:#eafcfe;
  filter:drop-shadow(0 1px 0 rgba(3,32,37,.95)) drop-shadow(0 2px 0 rgba(3,26,30,.75))
         drop-shadow(0 3px 4px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(29,217,232,.45));
}
.eco-card:hover .eco-icon{
  transform:perspective(220px) rotateX(3deg) translateY(-3px) scale(1.04);
  border-color:rgba(29,217,232,.55);
  box-shadow:
    inset 0 1.5px 0 rgba(215,252,255,.60),
    inset 1.5px 0 0 rgba(160,240,250,.26),
    inset 0 -2px 0 rgba(0,0,0,.42),
    inset 0 -10px 18px rgba(0,0,0,.30),
    0 16px 26px -8px rgba(0,0,0,.72),
    0 0 38px rgba(29,217,232,.30);
}

/* ── Light: a machined surface, not a glossy button ──────────────────────
   First attempt made the light chip a SOLID saturated teal with a white glyph
   and a strong gloss sweep. On a white card that reads as a mobile app icon --
   toy-like, and wrong for an institutional product.

   Premium on light comes from restraint, not from more effect: a near-white
   surface with a cool tint, a hairline edge, ONE thin specular line, and a
   short soft shadow. The glyph is deep teal rather than white, which is what
   removes the "app icon" read entirely. Depth is still there -- just measured
   in single pixels instead of announced.

   The tilt drops 9deg -> 5deg with a longer perspective: at 28-44px a 9deg
   rake is a visible skew rather than an implied one. */
:root[data-theme="light"] .eco-icon{
  background:linear-gradient(157deg,#ffffff 0%,#f4fafb 48%,#e8f2f4 100%);
  border:1px solid rgba(12,88,95,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(12,44,50,.05),
    0 1px 2px rgba(12,44,50,.05),
    0 8px 18px -12px rgba(12,44,50,.28);
  transform:perspective(300px) rotateX(5deg);
}
/* No gloss sweep on light — the inset specular above is the whole highlight. */
:root[data-theme="light"] .eco-icon::after{background:none}
:root[data-theme="light"] .eco-icon svg{stroke:var(--accent);
  filter:drop-shadow(0 1px 1px rgba(12,44,50,.16));
}
:root[data-theme="light"] .eco-card:hover .eco-icon{
  transform:perspective(300px) rotateX(2deg) translateY(-2px);
  border-color:rgba(12,88,95,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(12,44,50,.05),
    0 2px 4px rgba(12,44,50,.06),
    0 14px 26px -14px rgba(12,44,50,.34);
}

/* ── The same chip, applied to every other icon TILE on the site ─────────
   These range 28px-44px, so nothing here sets width/height/border-radius --
   each tile keeps its own geometry and just gains the lit-chip surface. The
   ::after gloss uses border-radius:inherit for the same reason.

   .rwa-icon is deliberately excluded: it has no background, border or radius
   at all -- it is a bare centred glyph, never a tile, so giving it a chip
   would be inventing a new element rather than porting an existing one. */
.zk-feat-icon,.card-icon,.ind-icon,.product-card-icon,.gov-cat-icon,
.problem-icon,.product-icon,.market-icon,.model-icon,.nav-mega-icon{
  position:relative;
  background:linear-gradient(152deg,rgba(74,226,240,.30) 0%,rgba(22,132,145,.20) 42%,rgba(5,30,35,.34) 100%);
  border:1px solid rgba(29,217,232,.30);
  box-shadow:
    inset 0 1.5px 0 rgba(200,250,255,.50),
    inset 1.5px 0 0 rgba(160,240,250,.22),
    inset 0 -2px 0 rgba(0,0,0,.42),
    inset 0 -8px 14px rgba(0,0,0,.28),
    0 8px 16px -7px rgba(0,0,0,.60),
    0 0 20px rgba(29,217,232,.14);
  transform:perspective(200px) rotateX(9deg);
  transition:transform .3s var(--ease-hub),box-shadow .3s ease;
}
.zk-feat-icon::after,.card-icon::after,.ind-icon::after,
.product-card-icon::after,.gov-cat-icon::after,
.problem-icon::after,.product-icon::after,.market-icon::after,.model-icon::after,
.nav-mega-icon::after{
  content:"";position:absolute;inset:1px 1px 45% 1px;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(220,253,255,.24),rgba(220,253,255,0));
  pointer-events:none;
}
.zk-feat-icon svg,.card-icon svg,.ind-icon svg,
.product-card-icon svg,.gov-cat-icon svg,
.problem-icon svg,.product-icon svg,.market-icon svg,.model-icon svg,
.nav-mega-icon svg{
  position:relative;z-index:1;stroke:#eafcfe;
  filter:drop-shadow(0 1px 0 rgba(3,32,37,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
:root[data-theme="light"] .zk-feat-icon,:root[data-theme="light"] .card-icon,
:root[data-theme="light"] .ind-icon,:root[data-theme="light"] .product-card-icon,
:root[data-theme="light"] .gov-cat-icon,
:root[data-theme="light"] .problem-icon,:root[data-theme="light"] .product-icon,
:root[data-theme="light"] .market-icon,:root[data-theme="light"] .model-icon,
:root[data-theme="light"] .nav-mega-icon{
  background:linear-gradient(157deg,#ffffff 0%,#f4fafb 48%,#e8f2f4 100%);
  border:1px solid rgba(12,88,95,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(12,44,50,.05),
    0 1px 2px rgba(12,44,50,.05),
    0 7px 15px -11px rgba(12,44,50,.26);
  transform:perspective(300px) rotateX(5deg);
}
:root[data-theme="light"] .zk-feat-icon::after,:root[data-theme="light"] .card-icon::after,
:root[data-theme="light"] .ind-icon::after,:root[data-theme="light"] .product-card-icon::after,
:root[data-theme="light"] .gov-cat-icon::after,
:root[data-theme="light"] .problem-icon::after,:root[data-theme="light"] .product-icon::after,
:root[data-theme="light"] .market-icon::after,:root[data-theme="light"] .model-icon::after,
:root[data-theme="light"] .nav-mega-icon::after{
  background:none;
}
:root[data-theme="light"] .zk-feat-icon svg,:root[data-theme="light"] .card-icon svg,
:root[data-theme="light"] .ind-icon svg,:root[data-theme="light"] .product-card-icon svg,
:root[data-theme="light"] .gov-cat-icon svg,
:root[data-theme="light"] .problem-icon svg,:root[data-theme="light"] .product-icon svg,
:root[data-theme="light"] .market-icon svg,:root[data-theme="light"] .model-icon svg,
:root[data-theme="light"] .nav-mega-icon svg{
  stroke:var(--accent);
  filter:drop-shadow(0 1px 1px rgba(12,44,50,.16));
}

/* ── Primary button — the hub's Sign in button ───────────────────────────
   Covers "Launch Application" on all 70 pages without touching any markup.

   DARK reproduces the hub's .signInBtn EXACTLY: a translucent glass chip with
   a thin cyan border over the dark page, NOT a bright filled teal button. That
   distinction is the whole character of the hub's button and getting it wrong
   is what makes the two sites look unrelated.

   LIGHT cannot use it: a translucent near-black pane over #fbfdfd reads as a
   grey smudge and the #eafcfe label fails contrast outright. Light therefore
   keeps a solid teal fill with a white label -- same geometry, same specular
   and gloss, same hover lift, legible on white. */
.btn-primary{
  position:relative;overflow:hidden;
  border-radius:12px;
  gap:.5rem;
  border:1px solid rgba(29,217,232,.32);
  background:linear-gradient(152deg,rgba(74,226,240,.26) 0%,rgba(22,132,145,.20) 45%,rgba(6,30,35,.42) 100%);
  backdrop-filter:blur(10px) saturate(115%);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  color:#eafcfe;
  box-shadow:
    inset 0 1.5px 0 rgba(200,250,255,.42),
    inset 0 -2px 0 rgba(0,0,0,.38),
    0 10px 20px -8px rgba(0,0,0,.6),
    0 0 24px rgba(29,217,232,.16);
  transition:box-shadow .28s ease,transform .22s var(--ease-hub),border-color .28s ease;
}
.btn-primary::before{
  content:"";position:absolute;inset:1px 1px 52% 1px;
  border-radius:11px 11px 40% 40%;
  background:linear-gradient(180deg,rgba(220,253,255,.22),rgba(220,253,255,0));
  pointer-events:none;
}
.btn-primary:hover{
  transform:translateY(-2px);
  border-color:rgba(29,217,232,.62);
  background:linear-gradient(152deg,rgba(74,226,240,.34) 0%,rgba(22,132,145,.26) 45%,rgba(6,30,35,.42) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(215,252,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.38),
    0 16px 26px -8px rgba(0,0,0,.66),
    0 0 34px rgba(29,217,232,.30);
}
.btn-primary:active{transform:translateY(0) scale(.985)}
/* Light: solid teal object, white label — the glass pane does not survive here. */
:root[data-theme="light"] .btn-primary{
  background:linear-gradient(152deg,#3fc9d8 0%,var(--accent) 45%,var(--accent-dark) 100%);
  border:1px solid rgba(10,107,116,.42);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  color:#ffffff;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(4,52,57,.26),
    0 10px 20px -8px rgba(12,44,50,.30),
    0 0 20px rgba(15,168,176,.12);
}
/* Must restate background AND border-color: the dark :hover rule above sets
   both, and box-shadow alone would leave a light button turning translucent
   dark on hover. */
:root[data-theme="light"] .btn-primary:hover{
  background:linear-gradient(152deg,#54d4e1 0%,var(--accent2) 45%,var(--accent) 100%);
  border-color:rgba(10,107,116,.62);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.68),
    inset 0 -2px 0 rgba(4,52,57,.26),
    0 16px 26px -8px rgba(12,44,50,.36),
    0 0 28px rgba(15,168,176,.22);
}

/* ── Status pills — brand-aligned ────────────────────────────────────────
   These carried a green "available" and a tan/gold "in development", neither
   of which is in the palette. Two extra hues on a teal site read as a traffic
   light and cheapen the page.

   Status is now carried by WEIGHT within one hue: a tinted teal pill for the
   shipped state, a quiet outline in the muted text colour for the unshipped
   one. Still unambiguous at a glance, no new colours introduced.

   Colours are set per-theme rather than via --accent because the token is
   tuned for large fills; at 0.6rem uppercase mono it needs to be a stop or two
   deeper on light to clear contrast for small text. */
.product-status.avail,.nav-mega-status.live,.nav-mega-status.operational,
.sx-status.is-live{
  background:rgba(15,168,176,.12);
  color:var(--accent3);
  border:1px solid rgba(15,168,176,.30);
}
.product-status.dev,.nav-mega-status.dev,.nav-mega-status.prelaunce,
.sx-status.is-soon,.sx-status.is-testnet,.sx-status.is-poc{
  background:transparent;
  color:var(--text3);
  border:1px solid var(--border2);
}
:root[data-theme="light"] .product-status.avail,
:root[data-theme="light"] .nav-mega-status.live,
:root[data-theme="light"] .nav-mega-status.operational,
:root[data-theme="light"] .sx-status.is-live{
  background:rgba(10,138,145,.10);
  color:#07666d;                      /* deeper than --accent: small text needs it */
  border-color:rgba(10,138,145,.28);
}
:root[data-theme="light"] .product-status.dev,
:root[data-theme="light"] .nav-mega-status.dev,
:root[data-theme="light"] .nav-mega-status.prelaunce,
:root[data-theme="light"] .sx-status.is-soon,
:root[data-theme="light"] .sx-status.is-testnet,
:root[data-theme="light"] .sx-status.is-poc{
  color:#4d676b;
  border-color:rgba(12,88,95,.22);
}

/* ── Status pills — the hub's LIVE / TESTNET / SOON vocabulary ──────────── */
.sx-status{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--mono);font-size:.58rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.2rem .55rem;border-radius:100px;
  border:1px solid transparent;white-space:nowrap;
}
.sx-status::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
/* Variant colours live in the brand-aligned block above — deliberately not
   repeated here. They used to be defined at this point in the file, which
   silently won over that block and reintroduced the gold testnet pill. */

/* ── Mobile touch targets ────────────────────────────────────────────────
   Footer links rendered at 140×21px with a 10px margin — a 21px tap target
   where 44px is the accepted minimum, and visually cramped with it. Swapping
   the margin for padding grows the target to ~43px while barely changing the
   footer's overall height, so the fix reads as breathing room rather than
   as a taller footer. */
@media (max-width: 768px) {
  .footer-col a{
    display:flex;align-items:center;
    min-height:44px;
    padding:.15rem 0;
    margin-bottom:0;
  }
  /* The nav dropdown's own links are laid out by the mega-menu, not stacked,
     so only the footer columns need this. */
}

@media(prefers-reduced-motion:reduce){
  .eco-icon,.btn-primary{transition:none}
  .eco-card:hover .eco-icon,.btn-primary:hover{transform:none}
}

/* Nav dropdown tiles: same chip, damped. Eight of them sit in a dense hover
   menu, where the full cast shadow and rake read as clutter rather than depth. */
.nav-mega-icon{transform:perspective(300px) rotateX(4deg)}
.nav-mega-icon,:root[data-theme="light"] .nav-mega-icon{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 5px -3px rgba(12,44,50,.30)}
.nav-mega-item:hover .nav-mega-icon{transform:perspective(300px) rotateX(1deg) translateY(-1px)}

/* ── Theme swap: suppress transitions for one frame ──────────────────────────
   A property whose value comes from a custom property does NOT reliably get
   re-resolved when that variable changes while a transition is declared on it.
   The element keeps painting the OLD theme's colour until something else
   forces a restyle.

   Measured on the mobile menu, which is the surface where it shows: with
   `.mobile-menu a{transition:color .2s}`, toggling dark→light left the links
   at #b6d2d8 on the #fbfdfd panel — 2.29:1, unreadable — and they stayed
   there. Suppressing the transition made the same toggle resolve correctly to
   #3f6068 at 6.67:1, which is how the cause was confirmed rather than guessed.

   Desktop dropdowns hid the bug: they are display:none until hovered, so
   reopening one forces a fresh style resolution. The mobile menu stays open,
   so the stale colour persists — which is exactly why this read as "desktop
   updated, mobile didn't".

   Killing the transitions outright would fix it and cost every hover on the
   site. Suppressing them only for the frame in which the theme changes keeps
   the hover feel and removes the whole bug class in one place — it covers
   `.theme-toggle` (transition:all) and `.btn-ghost` too, not just the links.
   js/theme.js adds and removes the class. */
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after{
  transition:none!important;
}

/* ── Ecosystem status pills inside the mobile menu ───────────────────────────
   These were hardcoded inline styles with no class at all — green #4dd99a for
   "Operational", gold for "In Development" — so the brand-aligned rules above
   could never reach them: an inline style beats any stylesheet declaration
   without !important, and there was no class to select in the first place.

   The desktop mega menu used the classes and so picked up the teal treatment;
   the mobile menu was hand-styled markup and kept the old palette. That is why
   the two never matched, on any viewport, in either theme.

   Now both use .nav-mega-status. The inline styles also carried the horizontal
   spacing, which the class does not (it is built for a stacked mega-menu tile,
   hence margin-top), so the inline-row geometry is restored here. */
.mobile-menu a .nav-mega-status{
  margin-top:0;
  margin-left:.4rem;
  vertical-align:middle;
}
