/* 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. */

@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)}
