/* ==========================================================================
   SOLON — BLACK GOLD.

   The design system for every brand page, and the same visual language as
   the SOLON DApp: a deep black ground, one metallic gold, warm white type.
   Loaded after web3.css (which the game pages keep for their own shell) and
   solon.css, so most of the work here is redefining the tokens underneath.

     space   deep black with a brown undertone, never blue, never grey
     metal   the DApp gold (#FF9D01) as a lit ramp, pale shoulder to copper
     UI      near-black cards, a hairline gold edge, glow only under touch
     depth   a quiet gold network field drifting behind everything

   Restraint is the rule: large areas stay black, gold marks what matters
   (brand, titles, actions, tags, hover), and nothing glows at rest.

   Type scale is strict and descends: home hero > home section > subpage
   hero > section > subtitle > body > label. Nothing may outrank the hero.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Space ---- */
  --pearl: #060504;            /* page ground — deep black, warm */
  --card: #110E0A;             /* raised ground */
  --ice: #1A140C;
  --lavender: #20170B;
  --soft-cyan: #150F08;

  /* ---- Type ---- */
  --text: #F4EEE3;             /* warm white */
  --muted: #A89F90;
  --dim: #6F675B;

  /* ---- SOLON gold ---- */
  --gold-deep: #E08A00;        /* borders of intent, arrows */
  --gold: #FF9D01;             /* the DApp gold — the page's one accent */
  --gold-light: #FFC04D;       /* gradient light end */
  --gold-pale: #FFE2A6;        /* metal highlight */
  --copper: #9A5B0B;           /* dark gold, gradients and edges only */
  --gold-btn: #FF9D01;
  --gold-btn-hi: #FFB02E;
  --sand: rgba(255, 170, 50, .14);   /* hairline border */
  --net: #B87A1E;
  --halo: #FF9D01;

  /* Older component classes name the hues; keep them as aliases of the ramp. */
  --blue: var(--gold);
  --blue-deep: var(--gold-deep);
  --purple: var(--gold-deep);
  --purple-deep: var(--gold-light);
  --aqua: var(--gold-light);

  --g-brand: linear-gradient(100deg, #FFD27A 0%, #FF9D01 55%, #E08A00 100%);
  --g-brand-soft: linear-gradient(100deg, rgba(255, 157, 1, .14), rgba(154, 91, 11, .14));
  --g-gold: linear-gradient(100deg, #FFC04D 0%, #FF9D01 100%);
  --g-hero: linear-gradient(100deg, #FFE2A6 0%, #FF9D01 100%);
  --g-soft: linear-gradient(100deg, #FFC04D 0%, #FFE2A6 100%);
  --g-blue: linear-gradient(100deg, #FFB02E 0%, #E08A00 100%);
  --g-purple: linear-gradient(100deg, #FF9D01 0%, #C07400 100%);
  --g-cyan: linear-gradient(100deg, #FFC04D 0%, #FF9D01 100%);

  /* Filled buttons: a lit gold bar, pale shoulder to copper edge, so the
     gold reads as metal rather than as a flat fill. */
  --g-btn: linear-gradient(160deg, #FFD98C 0%, #FFB02E 30%, #FF9D01 62%, #D97E00 100%);
  --g-btn-hi: linear-gradient(160deg, #FFE4A8 0%, #FFBE4A 30%, #FFA414 62%, #E68A00 100%);
  --g-btn-alt: linear-gradient(160deg, #C98A2E 0%, #9A5B0B 60%, #6E3F06 100%);
  --g-btn-soft: linear-gradient(160deg, rgba(40, 30, 16, .9) 0%, rgba(20, 15, 9, .9) 100%);
  --btn-edge: inset 0 1px 0 rgba(255, 244, 214, .6), inset 0 -1px 0 rgba(90, 45, 0, .35);

  /* ---- Surfaces ---- */
  /* Cards are a shade above the ground; the gold hairline does the
     separating, never a light shadow. */
  --glass: linear-gradient(180deg, rgba(26, 20, 12, .82) 0%, rgba(14, 11, 7, .82) 100%);
  --glass-strong: linear-gradient(180deg, rgba(36, 27, 14, .92) 0%, rgba(18, 14, 8, .92) 100%);
  --glass-line: rgba(255, 170, 50, .12);
  --glass-edge: rgba(255, 170, 50, .16);
  --glass-blur: saturate(120%) blur(18px);
  --glass-sh: 0 1px 0 rgba(255, 214, 140, .05) inset, 0 18px 40px -26px rgba(0, 0, 0, .9);
  --glass-sh-hi: 0 1px 0 rgba(255, 214, 140, .09) inset, 0 26px 60px -28px rgba(0, 0, 0, .95), 0 0 44px -18px rgba(255, 157, 1, .35);
  --glow: 0 0 0 1px rgba(255, 157, 1, .28), 0 18px 44px -24px rgba(255, 157, 1, .45);

  /* ---- Type scale ---- */
  --t-hero: clamp(40px, 7vw, 100px);
  --t-home-sec: clamp(23px, 2.7vw, 35px);
  --t-sub-hero: clamp(23px, 2.7vw, 35px);
  --t-sec: clamp(23px, 2.7vw, 35px);
  --t-subtitle: clamp(17px, 1.6vw, 23px);
  --t-body: 17px;
  --t-label: 13px;

  /* ---- Inherited aliases, so the older component classes stay valid ---- */
  --ink: var(--pearl);
  --ink-2: #0B0906;
  --panel: rgba(20, 16, 10, .82);
  --panel-solid: #110E0A;
  --panel-2: rgba(30, 23, 13, .9);
  --line: var(--glass-edge);
  --line-strong: rgba(255, 170, 50, .26);
  --surf: linear-gradient(168deg, rgba(34, 26, 15, .8), rgba(14, 11, 7, .8));
  --surf-2: linear-gradient(168deg, rgba(28, 22, 13, .76), rgba(12, 9, 6, .76));
  --surf-3: linear-gradient(168deg, rgba(40, 30, 16, .88), rgba(16, 12, 8, .88));
  --cyan: var(--blue);
  --cyan-soft: var(--gold-light);
  --violet: var(--purple);
  --mint: var(--blue);
  --magenta: var(--purple);
  --red: #FF6B5E;
  --glow-cyan: none; --glow-violet: none; --glow-gold: none;
  --edge: inset 0 1px 0 rgba(255, 214, 140, .06);
  --edge-strong: inset 0 1px 0 rgba(255, 214, 140, .1);
  --sh-1: var(--glass-sh);
  --sh-2: var(--glass-sh);
  --sh-3: var(--glass-sh-hi);
  --sunk: inset 0 1px 3px rgba(0, 0, 0, .6);
  --r: 14px; --r-lg: 20px; --r-xl: 26px;
  --shell: 1240px;
  --nav-h: 76px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
  background: var(--pearl);
  color: var(--text);
  font-size: var(--t-body);
  letter-spacing: -.011em;
}
/* The ground: black, with two very low warm fields and a faint digital grid
   that fades out towards the edges. Felt more than seen. */
body::before {
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(255, 157, 1, .10), transparent 64%),
    radial-gradient(900px 700px at 100% 40%, rgba(154, 91, 11, .08), transparent 62%),
    radial-gradient(900px 700px at 0% 90%, rgba(154, 91, 11, .06), transparent 62%),
    var(--pearl);
}
body::after {
  display: block;
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 170, 50, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 170, 50, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask: radial-gradient(120% 80% at 50% 0%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
  mask: radial-gradient(120% 80% at 50% 0%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 85%);
}
.card::after, .stat::after, .chest::after,
.hero-stats .hs::after, .modal-card::after { display: none; }

/* The network field. Drawn by solon.js, kept far behind the content: the
   lines are texture, never a pattern. */
#aifx {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: .7;
}

::selection { background: rgba(255, 157, 1, .28); color: #fff; }

/* --------------------------------------------------------------------------
   Glass — the one surface recipe.
   -------------------------------------------------------------------------- */
.glass {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-sh);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, border-color .4s;
}
/* The gold edge only shows on hover, so the default state stays quiet. */
.glass::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255, 226, 166, .9), rgba(255, 157, 1, .55) 40%, rgba(154, 91, 11, .15) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.glass:hover, .glass.on {
  transform: translateY(-6px);
  background: var(--glass-strong);
  box-shadow: var(--glass-sh-hi);
}
.glass:hover::before, .glass.on::before { opacity: .8; }
.glass:active { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .glass, .glass:hover { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Chrome
   -------------------------------------------------------------------------- */
.nav {
  background: rgba(6, 5, 4, .72);
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid rgba(255, 170, 50, .1);
  box-shadow: none;
}
.logo { color: var(--text); font-weight: 800; letter-spacing: -.022em; }
.logo-mark { background: transparent; box-shadow: 0 0 22px -6px rgba(255, 157, 1, .55); }
.logo small { color: var(--dim); font-weight: 650; }

.nav-links a { color: var(--muted); font-weight: 600; border-radius: 999px; }
.nav-links a:hover { color: var(--gold-light); background: rgba(255, 157, 1, .08); }
.nav-links a.on { color: var(--gold); background: rgba(255, 157, 1, .1); box-shadow: none; }
.nav-links a.on::after { background: var(--g-brand); }

.lang { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--glass-edge); border-radius: 999px; }
.lang button { color: var(--dim); border-radius: 999px; }
.lang button.on { color: #1A0F00; background: var(--g-btn); box-shadow: var(--btn-edge); }
.nav-burger { color: var(--gold); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--glass-edge); border-radius: 12px; }
.nav-links.open {
  background: rgba(14, 11, 7, .96);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sh-hi), inset 0 0 0 1px var(--glass-edge);
  border-radius: 18px;
}

.foot { background: transparent; border-top: 1px solid rgba(255, 170, 50, .1); margin-top: 0; }
.foot-bottom { color: var(--dim); border-top: none; padding: 46px 0 44px; }
.foot-bottom nav a { color: var(--muted); }
.foot-bottom nav a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
/* Every filled button is the same lit gold bar, labelled in a near-black
   brown — the DApp's primary action. */
.btn {
  border-radius: 999px;
  padding: 14px 26px;
  font-weight: 650;
  background: var(--g-btn);
  color: #1A0F00;
  box-shadow: var(--btn-edge), 0 10px 26px -14px rgba(255, 157, 1, .7);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, background .3s, color .3s;
}
.btn:hover {
  background: var(--g-btn-hi);
  color: #1A0F00;
  transform: scale(1.02);
  box-shadow: var(--btn-edge), 0 14px 34px -14px rgba(255, 157, 1, .9), 0 0 0 1px rgba(255, 210, 122, .5);
}
.btn:active { transform: scale(.99); }
.btn.gold { background: var(--g-btn); color: #1A0F00; box-shadow: var(--btn-edge), 0 10px 26px -14px rgba(255, 157, 1, .7); }
.btn.gold:hover {
  background: var(--g-btn-hi);
  color: #1A0F00;
  box-shadow: var(--btn-edge), 0 14px 34px -14px rgba(255, 157, 1, .9), 0 0 0 1px rgba(255, 210, 122, .5);
}
.btn.gold.hero-cta::before { display: none; }
.btn.mint { background: var(--g-btn); color: #1A0F00; }
/* Secondary: black with a gold hairline, gold on hover. */
.btn.ghost, .btn.violet, .btn.outline-gold, .btn.glassw {
  background: var(--g-btn-soft);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255, 170, 50, .32);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.btn.ghost:hover, .btn.violet:hover, .btn.outline-gold:hover, .btn.glassw:hover {
  color: var(--gold);
  background: linear-gradient(160deg, rgba(52, 38, 18, .95) 0%, rgba(24, 18, 10, .95) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 157, 1, .7), 0 14px 34px -20px rgba(255, 157, 1, .6);
}
/* The second action runs the copper end of the same metal. */
.btn.alt {
  background: var(--g-btn-alt);
  color: #FFF1D6;
  box-shadow: inset 0 1px 0 rgba(255, 226, 166, .35), 0 10px 26px -16px rgba(154, 91, 11, .9);
}
.btn.alt:hover { color: #FFF8EA; box-shadow: inset 0 1px 0 rgba(255, 226, 166, .45), 0 14px 32px -16px rgba(255, 157, 1, .6), 0 0 0 1px rgba(255, 170, 50, .45); }

.btn.lilac {
  background: var(--g-btn);
  color: #1A0F00;
  box-shadow: var(--btn-edge), 0 10px 26px -14px rgba(255, 157, 1, .7);
}
.btn.lilac:hover {
  background: var(--g-btn-hi);
  color: #1A0F00;
  box-shadow: var(--btn-edge), 0 14px 34px -14px rgba(255, 157, 1, .9), 0 0 0 1px rgba(255, 210, 122, .5);
}

.btn.big { padding: 17px 34px; font-size: 16px; border-radius: 999px; }
.btn.sm { padding: 9px 18px; font-size: 13.5px; border-radius: 999px; }
.btn.hero-cta { padding: 18px 38px; font-size: 16.5px; border-radius: 999px; }
.btn:disabled { opacity: .4; }

.badge {
  color: var(--muted);
  border-color: var(--glass-edge);
  background: rgba(255, 157, 1, .06);
  border-radius: 999px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.badge.mint, .badge.gold, .badge.violet { color: var(--gold); border-color: rgba(255, 157, 1, .3); }
.tag { color: var(--gold-light); border-color: var(--glass-edge); background: rgba(255, 157, 1, .06); }
.live-dot { background: var(--blue); box-shadow: 0 0 10px rgba(255, 157, 1, .8); }
.eyebrow { color: var(--dim); font-size: var(--t-label); letter-spacing: .2em; }
.eyebrow::before { background: rgba(255, 170, 50, .4); }

/* --------------------------------------------------------------------------
   Gradient text — used sparingly: hero, the three words, key numbers.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   The headline colour.

   Metal lit from above: a pale highlight at the top of the letters running
   down through the DApp gold into copper at the foot. On black the whole
   ramp holds, so the headline carries without any glow behind it.
   -------------------------------------------------------------------------- */
.hero-light h1 {
  background: linear-gradient(172deg,
    #FFF1CF 0%,
    #FFD27A 24%,
    var(--gold) 58%,
    #C46F00 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.grad, .grad-blue, .grad-purple, .grad-cyan {
  background: var(--g-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.grad-blue { background-image: var(--g-blue); }
.grad-purple { background-image: var(--g-purple); }
.grad-cyan { background-image: var(--g-cyan); }

/* --------------------------------------------------------------------------
   Section bands — the mood layer, one very light gradient per chapter.
   -------------------------------------------------------------------------- */
/* Each band fades up from nothing and back out again, so neighbouring
   chapters dissolve into one another with no seam anywhere.

   Two things make the transition read as natural rather than as a stack of
   stripes. The profile is eased: seven stops tracing a bell, so the alpha
   never changes at a constant rate — a linear ramp is what the eye picks out
   as an edge. And there is no plateau: the band peaks at one point and
   immediately starts leaving again, so no section has a flat middle for a
   boundary to sit against.

   The peaks are held between .18 and .26 — at that weight the tint is a
   change in temperature rather than a colour, and neighbouring bands overlap
   without ever adding up to a visible step. */
.band { position: relative; }
.band-01 { background: linear-gradient(180deg, transparent 0%, rgba(255, 157, 1, .018) 30%, rgba(255, 157, 1, .03) 52%, rgba(255, 157, 1, .018) 74%, transparent 100%); }
.band-02 { background: linear-gradient(180deg, transparent 0%, rgba(154, 91, 11, .03) 30%, rgba(154, 91, 11, .05) 52%, rgba(154, 91, 11, .03) 74%, transparent 100%); }
.band-03 { background: linear-gradient(180deg, transparent 0%, rgba(255, 157, 1, .015) 30%, rgba(255, 157, 1, .025) 52%, rgba(255, 157, 1, .015) 74%, transparent 100%); }
.band-04 { background: linear-gradient(180deg, transparent 0%, rgba(154, 91, 11, .025) 30%, rgba(154, 91, 11, .045) 52%, rgba(154, 91, 11, .025) 74%, transparent 100%); }
.band-05 { background: radial-gradient(60% 90% at 50% 100%, rgba(255, 157, 1, .08), transparent 70%); }
.band-clear { background: transparent; }
/* The chapter wash: two faint gold fields placed inside the section so they
   fade out at both edges. The network field shows through it exactly as it
   does on the rest of the page. */
.band-soft { background: none; }
/* Carried on a masked layer so the wash dissolves at the top and bottom of
   the section and no boundary is ever visible. */
.band-soft::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(76% 130% at 16% 18%, rgba(255, 157, 1, .07), transparent 74%),
    radial-gradient(72% 130% at 84% 82%, rgba(255, 157, 1, .06), transparent 74%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 14%, #000 34%, #000 66%, rgba(0, 0, 0, .35) 86%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 14%, #000 34%, #000 66%, rgba(0, 0, 0, .35) 86%, transparent 100%);
}
/* --------------------------------------------------------------------------
   Chapter head — label, then the title, then the subtitle.
   -------------------------------------------------------------------------- */
.ch { padding: 150px 0; }
.ch-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 48px;
  /* Aligned to the top so a longer right-hand column grows downward and can
     never rise above the chapter label on the left. */
  align-items: start;
  margin-bottom: 76px;
}
.ch-label {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--t-label); font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 22px;
}
.ch-label i {
  width: 30px; height: 2px; border-radius: 2px;
  background: var(--g-brand); font-style: normal;
}
.ch-label .ch-num { font-size: 24px; font-weight: 800; letter-spacing: .1em; line-height: 1; }
.ch-title {
  margin: 0;
  font-size: var(--t-home-sec);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.04em;
  text-wrap: balance;
}
/* Dropped to sit level with the chapter title, clear of the label. */
.ch-right { padding-top: 40px; }
.ch-sub {
  margin: 0;
  font-size: var(--t-subtitle);
  font-weight: 500;
  line-height: 1.62;
  color: var(--muted);
  letter-spacing: -.015em;
}
/* A second line in the same voice as the subtitle above it. */
.ch-sub.more { margin-top: 16px; }
/* Subpages sit one step down the scale. */
.sub-page .ch-title { font-size: var(--t-sec); }

/* --------------------------------------------------------------------------
   Typographic lists
   -------------------------------------------------------------------------- */
.tl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.tl-item {
  padding: 26px 26px;
  border-radius: var(--r-lg);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.5;
}
.tl-h {
  font-size: var(--t-label); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 22px;
}
.tl-h + .tl { margin-bottom: 0; }
.tl-group + .tl-group { margin-top: 58px; }

/* A plain vertical run of lines — no boxes. */
.vlist { border-top: 1px solid rgba(255, 170, 50, .18); }
.vlist p {
  margin: 0;
  padding: 24px 4px;
  border-bottom: 1px solid rgba(255, 170, 50, .18);
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 550;
  letter-spacing: -.025em;
  color: var(--muted);
  transition: color .32s, padding-left .36s cubic-bezier(.2, .7, .2, 1);
}
.vlist p:hover { color: var(--text); padding-left: 14px; }


/* Three big statement words, e.g. ONE ENTRY. ONE ECOSYSTEM. ONE NETWORK. */
/* Plain at rest, left with the rest of the chapter; the glass arrives only
   under the cursor or a touch. The negative offset keeps the text on the
   same left edge as everything above it. */
.statement-box {
  margin: 76px 0 0 -22px;
  max-width: 900px;
  padding: 24px 22px;
  text-align: left;
  border-radius: var(--r-xl);
  font-size: clamp(17px, 2.1vw, 27px);
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: -.02em;
  transition: transform .34s cubic-bezier(.2, .7, .2, 1), background-color .34s,
              box-shadow .34s;
}
.statement-box:hover, .statement-box:active {
  transform: translateY(-4px);
  box-shadow: var(--glass-sh), 0 0 34px -14px rgba(255, 157, 1, .85);
}
.statement-box:not(.grad):hover, .statement-box:not(.grad):active {
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* ONE ENTRY. ONE ECOSYSTEM. ONE NETWORK. — one row, quietly. */
.statement-lines {
  margin-top: 76px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 8px 20px;
}
.statement-lines div {
  font-size: clamp(15px, 1.7vw, 21px);
  font-weight: 750; letter-spacing: .01em; line-height: 1.4;
}
.statement-lines .sfoot {
  flex-basis: 100%; margin-top: 14px; text-align: center;
  font-size: 15px; color: var(--muted); font-weight: 500; letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   Mission — typography only.
   -------------------------------------------------------------------------- */
.tl-item b { font-weight: 750; }
/* Two-column chapters: the left column is today, the right is the intent.
   Hold the left one back so the pair reads as a direction, not as a list
   beside another list. */
.st-cols.past .st-col:first-child .tl-h { color: var(--dim); }
.st-cols.past .st-col:first-child .tl-item { color: var(--dim); font-weight: 500; }
.mission-note { margin: 48px 0 0; font-size: var(--t-subtitle); color: var(--muted); font-weight: 500; line-height: 1.62; }
/* The closing statement continues in the same voice, on the same line-up. */
.mission-note.second { margin-top: 12px; }

/* --------------------------------------------------------------------------
   Three principles
   -------------------------------------------------------------------------- */
/* The three words run across the page, small and in the brand gradient. */
/* A line under a chapter title, set at the size of the words it names. */
.ch-note {
  margin-top: 14px;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  color: var(--text);
}

.pr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 34px; }
.pr-col { min-width: 0; }
/* Smaller than the lines it heads, and in the brand gradient. */
.pr-word {
  margin-bottom: 14px;
  padding-left: 18px;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  word-break: keep-all;
  width: fit-content;
  background: var(--g-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --------------------------------------------------------------------------
   Brand spirit — type over the network.
   -------------------------------------------------------------------------- */
.sp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; align-items: start; }
.sp-name { font-size: clamp(34px, 5.4vw, 72px); font-weight: 850; line-height: .98; letter-spacing: -.055em; }
.sp-split > div:last-child .sp-name { font-size: clamp(26px, 3.6vw, 46px); line-height: 1.08; }
.sp-name span { display: block; margin-top: 16px; font-size: var(--t-label); font-weight: 700; color: var(--dim); letter-spacing: .2em; text-transform: uppercase; }
.sp-para { margin: 0 0 20px; font-size: var(--t-body); line-height: 1.85; color: var(--muted); }
.sp-stages { margin-top: 74px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; align-items: center; }
.sp-stage { padding: 26px 24px; border-radius: var(--r-lg); text-align: center; }
.sp-stage b { display: block; font-size: 19px; font-weight: 750; letter-spacing: -.025em; }
.sp-stage span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--dim); }
.sp-map { margin-top: 64px; }
/* At rest these are plain rows on a hairline; the glass arrives only under
   the cursor or a touch, with a small lift and a lavender glow. */
.sp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: center; gap: 16px;
  padding: 24px 18px;
  border-bottom: 1px solid rgba(255, 170, 50, .18);
  border-radius: 18px;
  transition: transform .34s cubic-bezier(.2, .7, .2, 1), background-color .34s,
              box-shadow .34s, color .34s;
}
.sp-row:hover, .sp-row:active {
  transform: translateY(-4px);
  background: var(--glass-strong);
  box-shadow: var(--glass-sh), 0 0 32px -14px rgba(255, 157, 1, .85);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.sp-row:hover .a, .sp-row:active .a { color: var(--muted); }
.sp-row:hover .arw, .sp-row:active .arw { opacity: 1; }
.sp-row:first-child { border-top: 1px solid rgba(255, 170, 50, .18); }
.sp-row .a { color: var(--dim); font-size: clamp(16px, 1.7vw, 20px); }
.sp-row .arw { justify-self: center; color: var(--purple); opacity: .7; }
.sp-row .b { font-size: clamp(17px, 1.9vw, 22px); font-weight: 650; letter-spacing: -.025em; }
.sp-pairs { margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.sp-pair { padding: 30px 28px; border-radius: var(--r-lg); }
.sp-pair b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.025em; }
.sp-pair span { display: block; margin-top: 12px; color: var(--muted); font-size: 15.5px; line-height: 1.8; }
/* The closing line reads at body size, on the left with the text above it. */
.sp-close {
  margin-top: 56px;
  text-align: left;
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Manifesto
   -------------------------------------------------------------------------- */
/* The declaration: one row of three, small and gradient. */
.mf { padding: 120px 0; text-align: center; }
.mf-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 18px; }
.mf-line { font-size: clamp(17px, 2.1vw, 27px); font-weight: 800; line-height: 1.4; letter-spacing: -.02em; }
.mf-rule {
  width: 0; height: 1px; align-self: center;
  background: linear-gradient(90deg, transparent, var(--blue), var(--purple), transparent);
  transition: width 1.1s cubic-bezier(.2, .7, .2, 1);
}
.mf.in .mf-rule { width: 56px; }

/* --------------------------------------------------------------------------
   Rings — value loop and ecosystem mesh, drawn light.
   -------------------------------------------------------------------------- */
.loop-track { stroke: rgba(255, 170, 50, .28); }
.loop-run { stroke: url(#solonFlow); stroke-width: 2.4; filter: none; }
.loop-step circle { fill: rgba(20, 15, 9, .95); stroke: rgba(255, 170, 50, .4); }
.loop-step text { fill: var(--muted); font-size: 12.5px; font-weight: 600; }
.loop-step .n { fill: var(--purple-deep); }
.loop-step:hover circle { stroke: var(--purple); filter: none; }
.loop-step:hover text { fill: var(--text); }
.loop-center { fill: var(--text); }
.net-link { stroke: rgba(255, 170, 50, .26); }
.net-ring { stroke: rgba(255, 170, 50, .16); }
.net-flow { stroke: url(#solonFlow); stroke-width: 1.8; filter: none; }
.net-node rect { fill: #120E09; stroke: rgba(255, 170, 50, .4); }
.net-node text { fill: var(--text); font-size: 12.5px; font-weight: 650; }
.net-node:hover rect { stroke: var(--gold-deep); filter: none; }
.net-node:hover text { fill: var(--text); }
.net-core .core-box { fill: url(#solonCoreL); stroke: rgba(255, 226, 166, .7); stroke-width: 1.5; }
.net-core text { fill: #1A0F00; font-size: 19px; }
.net-wrap .halo { background: radial-gradient(closest-side, rgba(255, 157, 1, .16), transparent 72%); }

/* --------------------------------------------------------------------------
   Vision
   -------------------------------------------------------------------------- */
.vs-para { margin: 0 0 20px; max-width: 64ch; font-size: var(--t-body); line-height: 1.9; color: var(--muted); }
/* The one statement the chapter turns on, set above the chain. */
.vs-lead {
  margin: 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.02em;
}
/* The chain runs across the page and wraps when it has to, the arrows holding
   the links together at full strength rather than separating them faintly.

   Each link takes the same treatment as a row in the brand spirit chapter: a
   plain outlined box at rest, filling in with the lift and the gold glow only
   under the cursor or a touch. */
.vs-chain { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; }
.vs-chain span {
  padding: 14px 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 170, 50, .18);
  font-size: clamp(16px, 1.8vw, 21px); font-weight: 650; letter-spacing: -.02em;
  transition: transform .34s cubic-bezier(.2, .7, .2, 1), background-color .34s,
              box-shadow .34s, color .34s;
}
.vs-chain span:hover, .vs-chain span:active {
  transform: translateY(-4px);
  background: var(--glass-strong);
  box-shadow: var(--glass-sh), 0 0 32px -14px rgba(255, 157, 1, .85);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.vs-chain i {
  color: var(--gold-deep); font-style: normal; opacity: 1;
  font-size: 19px; font-weight: 700; line-height: 1;
}
.vs-tags-lead { margin: 48px 0 0; font-size: var(--t-body); color: var(--muted); }
.vs-tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; }
.vs-tags span { padding: 11px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text); }
.vs-word {
  margin-top: 80px; text-align: center;
  font-size: clamp(18px, 2.4vw, 32px);
  font-weight: 800; line-height: 1.35; letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   Wide rows — games and questions.
   -------------------------------------------------------------------------- */
.rows { display: flex; flex-direction: column; gap: 14px; }
.row-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  padding: 30px 32px;
  border-radius: var(--r-lg);
  color: var(--text);
}
.row-card .no { font-size: 15px; font-weight: 750; letter-spacing: .12em; color: var(--dim); transition: color .35s; }
.row-card:hover .no { color: transparent; background: var(--g-brand); -webkit-background-clip: text; background-clip: text; }
.row-card .name { font-size: clamp(20px, 2.4vw, 30px); font-weight: 750; letter-spacing: -.035em; }
.row-card .name small { display: block; margin-top: 7px; font-size: 14px; font-weight: 500; color: var(--dim); letter-spacing: 0; }
.row-card .go {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); transition: color .35s, transform .35s cubic-bezier(.2, .7, .2, 1);
  white-space: nowrap;
}
.row-card:hover .go { color: var(--purple-deep); transform: translateX(6px); }

/* Questions: a plain list, not cards. */
.q-list { border-top: 1px solid rgba(255, 170, 50, .18); }
.q-row {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center; gap: 22px;
  padding: 34px 4px;
  border-bottom: 1px solid rgba(255, 170, 50, .18);
  color: var(--text);
  transition: padding-left .36s cubic-bezier(.2, .7, .2, 1);
}
.q-row:hover { padding-left: 16px; }
.q-row .no { font-size: 14px; font-weight: 750; letter-spacing: .12em; color: var(--dim); }
.q-row .qt { font-size: clamp(18px, 2.1vw, 26px); font-weight: 600; letter-spacing: -.03em; color: var(--muted); transition: color .35s; }
.q-row:hover .qt { color: transparent; background: var(--g-brand); -webkit-background-clip: text; background-clip: text; }
.q-row .arw { color: var(--dim); transition: color .35s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.q-row:hover .arw { color: var(--purple); transform: translateX(7px); }

/* --------------------------------------------------------------------------
   Full question and answer, on the Ecosystem page.
   -------------------------------------------------------------------------- */
.qa-item { padding: 80px 0; border-bottom: 1px solid rgba(255, 170, 50, .18); scroll-margin-top: 110px; }
.qa-item:first-child { padding-top: 0; }
.qa-k { font-size: var(--t-label); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qa-question { margin: 18px 0 0; font-size: var(--t-sec); font-weight: 750; line-height: 1.18; letter-spacing: -.04em; text-wrap: balance; }
.qa-k.a { margin-top: 48px; color: var(--dim); }
.qa-answer { margin: 16px 0 0; max-width: 70ch; font-size: var(--t-body); line-height: 1.9; color: var(--muted); }

/* --------------------------------------------------------------------------
   Hero and the closing screens.
   -------------------------------------------------------------------------- */
.hero-light { position: relative; padding: 118px 0 112px; overflow: hidden; }
/* The headline owns the full measure; the orb sits behind its right side. */
.hero-grid { position: relative; }
.hero-light .hero-copy {
  position: relative; z-index: 2;
  max-width: 1160px;
  margin: 0 auto; padding: 0;
  text-align: center;
}
.hero-kicker { font-size: var(--t-label); font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
.hero-light h1 {
  margin: 28px 0 0;
  text-wrap: nowrap;
  font-size: var(--t-hero);
  font-weight: 850;
  line-height: .96;
  letter-spacing: -.055em;
}
.hero-light .hsub {
  margin: 32px auto 0; max-width: 46ch;
  font-size: var(--t-subtitle); font-weight: 500; color: var(--muted); letter-spacing: -.018em; line-height: 1.6;
}
.hero-light .hero-cta-row { margin-top: 44px; justify-content: center; gap: 16px; }
.orb-host {
  position: absolute; top: 50%; left: 50%;
  width: 132%; max-width: 1500px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  pointer-events: none; z-index: 0;
  opacity: .85;
  /* Dissolve the edges so the field has no boundary. */
  -webkit-mask: radial-gradient(closest-side, #000 42%, rgba(0, 0, 0, .45) 66%, transparent 88%);
  mask: radial-gradient(closest-side, #000 42%, rgba(0, 0, 0, .45) 66%, transparent 88%);
}
.orb-host canvas { width: 100%; aspect-ratio: 1; display: block; }
.orb-host::before {
  content: "";
  position: absolute; inset: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 157, 1, .18), rgba(255, 157, 1, .1) 58%, transparent 76%);
  filter: blur(30px);
  pointer-events: none;
}

/* Subpage hero: one step below the home hero. */
.hero-sub-page { padding: 96px 0 84px; text-align: center; }
.hero-sub-page h1 { margin: 26px 0 0; font-size: var(--t-sub-hero); font-weight: 850; line-height: 1.02; letter-spacing: -.05em; }
/* Pale yellow into deep, the home headline's ramp. It starts a shade deeper
   than the home page does: this title sets at a third of that size, and the
   palest end of the ramp does not hold at 35px. Games carries no brand mark
   in its heading, so this is where its colour comes from; elsewhere the gold
   is the word SOLON sitting inside the line. */
.page-eco .hero-sub-page h1,
.page-games .hero-sub-page h1 {
  background: linear-gradient(172deg, #FFE8B8 0%, #FFC04D 32%, var(--gold) 64%, #C97500 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-sub-page .hsub { margin: 28px auto 0; max-width: 46ch; font-size: var(--t-subtitle); color: var(--muted); font-weight: 500; }
/* Three statements on three lines need more room between them than a single
   heading does. */
.page-eco .hero-sub-page h1 { line-height: 1.3; letter-spacing: -.03em; }

.screen { padding: 130px 0; text-align: center; }
/* Title and subtitle share one row, at a quieter size. */
.screen .srow {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 16px;
}
.screen h2 {
  margin: 0;
  font-size: clamp(19px, 2.3vw, 30px);
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -.03em;
}
.screen .hero-cta-row { margin-top: 38px; justify-content: center; gap: 16px; }


/* --------------------------------------------------------------------------
   Product cards, forms and panels inherited from the platform pages.
   -------------------------------------------------------------------------- */
.card, .stat, .act-card {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-sh);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.card .sheen { display: none; }
.card.in:hover, .card:not(.rv):hover, .stat.in:hover, .stat:not(.rv):hover {
  transform: translateY(-6px);
  border-color: rgba(255, 157, 1, .45);
  box-shadow: var(--glass-sh-hi);
}
.act-rows .ar { background: rgba(255, 255, 255, .02); border: 1px solid var(--glass-line); border-radius: var(--r-lg); box-shadow: none; }
.act-rows .ar:hover { box-shadow: var(--glow); }
.input, .field input {
  background: rgba(0, 0, 0, .45);
  color: var(--text);
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  box-shadow: none;
}
.input::placeholder { color: var(--dim); }
.input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(255, 157, 1, .12); outline: none; }
.field label { color: var(--muted); }
.kv, .kv-row { border-color: var(--glass-edge); }
.kv-row .k { color: var(--muted); }
.progress { background: rgba(255, 170, 50, .16); box-shadow: none; }
.progress i { background: var(--g-brand); box-shadow: none; }
.progress .stripes { opacity: .2; }
.toast { background: rgba(18, 14, 9, .96); color: var(--text); border-color: rgba(255, 157, 1, .35); box-shadow: var(--glass-sh-hi); backdrop-filter: blur(10px); }
.toast.good, .toast.warn, .toast.bad { color: var(--text); border-color: rgba(255, 157, 1, .35); }
.modal-back { background: rgba(0, 0, 0, .66); backdrop-filter: blur(8px); }
.modal-card { background: #110D08; border: 1px solid var(--glass-line); box-shadow: var(--glass-sh-hi); backdrop-filter: var(--glass-blur); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero-light .hero-copy { max-width: none; text-align: center; }
  .orb-host { position: relative; top: auto; right: auto; transform: none; width: 100%; max-width: 380px; margin: 34px auto 0; }
  .ch-head { grid-template-columns: 1fr; gap: 20px; align-items: start; margin-bottom: 48px; }
  .ch-sub { padding-bottom: 0; }
  .sp-split { grid-template-columns: 1fr; gap: 32px; }
  .sp-row { grid-template-columns: 1fr; gap: 8px; }
  .sp-row .arw { justify-self: start; transform: rotate(90deg); }
}
@media (max-width: 900px) {
  .pr-cols { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 720px) {
  .tl-plain.cols2 { grid-template-columns: 1fr; }
  .ch { padding: 84px 0; }
  .mf { padding: 104px 0; }
  .screen { padding: 96px 0; }
  .hero-light { padding: 64px 0 78px; }
  .hero-sub-page { padding: 60px 0 54px; }
  .hero-light .hero-copy { text-align: center; }
  .hero-light h1 { text-wrap: balance; }
  .hero-light .hero-cta-row, .screen .hero-cta-row { justify-content: center; }
  .hero-light .hsub { margin-inline: auto; }
  .row-card { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 22px 20px; }
  .row-card .go { grid-column: 2; justify-content: flex-start; }
  .q-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 24px 2px; }
  .statement-lines, .vs-word { margin-top: 58px; }
  .qa-item { padding: 52px 0; }
}

/* --------------------------------------------------------------------------
   Chinese sets tighter than Latin at display sizes.
   -------------------------------------------------------------------------- */
:root[lang="zh-CN"] .hero-light h1 { font-size: clamp(32px, 6.5vw, 94px); line-height: 1.16; letter-spacing: -.02em; }
:root[lang="zh-CN"] .ch-title,
:root[lang="zh-CN"] .screen h2,
:root[lang="zh-CN"] .hero-sub-page h1 { line-height: 1.2; letter-spacing: -.02em; }
:root[lang="zh-CN"] .mission-type .ml,
:root[lang="zh-CN"] .statement-lines div,
:root[lang="zh-CN"] .mf-line,
:root[lang="zh-CN"] .sp-close,
:root[lang="zh-CN"] .qa-question,
:root[lang="zh-CN"] .vs-word,

/* --------------------------------------------------------------------------
   Games — one game per row: a large cover beside the full introduction, so
   each game reads as a poster rather than a thumbnail. Covers alternate
   sides down the page.
   -------------------------------------------------------------------------- */
.game-grid-l { display: grid; grid-template-columns: 1fr; gap: 28px; }
.game-tile {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  min-height: 380px;
  overflow: hidden;
  color: var(--text);
}
.game-tile:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.game-tile:nth-child(even) .gt-cover { order: 2; }
.gt-cover {
  position: relative;
  display: block;
  min-height: 380px;
  overflow: hidden;
  background: #0B0906;
}
.gt-cover svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.game-tile:hover .gt-cover svg { transform: scale(1.06); }
/* A low shade at the foot and a touch of gold ties each cover to the page. */
.gt-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 5, 4, .55)), linear-gradient(120deg, rgba(255, 157, 1, .10), transparent 60%);
  pointer-events: none;
}
.gt-no {
  position: absolute; top: 20px; left: 22px; z-index: 2;
  font-size: 15px; font-weight: 800; letter-spacing: .14em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}
.gt-body { padding: 44px 48px 40px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.gt-name { font-size: clamp(26px, 2.8vw, 38px); font-weight: 750; letter-spacing: -.035em; line-height: 1.15; }
.gt-zh { font-size: 16px; color: var(--dim); font-weight: 500; }
.gt-desc {
  margin-top: 8px;
  font-size: 17px; line-height: 1.8; color: var(--muted);
  max-width: 52ch;
}
.game-tile .go {
  margin-top: 22px;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 30px;
  font-size: 14.5px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
}
.game-tile:hover .go { transform: translateY(-1px) scale(1.02); }
/* The Games page opens straight onto the games. */
.page-games .hero-sub-page { padding: 64px 0 40px; }
.page-games .ch.sub-page { padding: 24px 0 110px; }

@media (max-width: 900px) {
  .game-grid-l { gap: 20px; }
  .game-tile, .game-tile:nth-child(even) { grid-template-columns: 1fr; min-height: 0; }
  .game-tile:nth-child(even) .gt-cover { order: 0; }
  .gt-cover { min-height: 0; aspect-ratio: 16 / 10; }
  .gt-body { padding: 26px 22px 28px; }
  .gt-name { font-size: 26px; }
  .gt-zh { font-size: 14.5px; }
  .gt-desc { font-size: 15.5px; line-height: 1.75; }
  .game-tile .go { align-self: stretch; justify-content: center; padding: 15px 20px; font-size: 14px; }
  .page-games .hero-sub-page { padding: 40px 0 24px; }
  .page-games .ch.sub-page { padding: 12px 0 64px; }
}

/* The brand mark in running text always carries the gradient. */
.brandgrad {
  background: var(--g-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 750;
}
.logo b { background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --------------------------------------------------------------------------
   A chapter title can sit one step down the scale.
   -------------------------------------------------------------------------- */
.ch-title.sm { font-size: var(--t-sec); }

/* --------------------------------------------------------------------------
   The value loop as a rectangular circuit, SOLON in the middle.
   -------------------------------------------------------------------------- */
/* The steps sit on an actual circle, evenly spaced. A grid could only put
   seven boxes around a centre by leaving one cell of the ring empty, which
   read as a missing step rather than as a loop. Seven points on a circle are
   symmetrical by construction, so nothing has to be left out to balance it. */
.loop-box {
  position: relative;
  width: 100%;
  max-width: 660px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
/* The track: inset 11% of a square leaves a circle of radius 39%, which is
   exactly the radius the step positions below are placed on. */
.loop-box::before {
  content: "";
  position: absolute; inset: 11%;
  border: 1px dashed rgba(255, 170, 50, .4);
  border-radius: 50%;
  pointer-events: none;
}
.lb-step {
  position: absolute;
  width: 150px;
  padding: 15px 12px;
  text-align: center;
  transform: translate(-50%, -50%);
}
/* The card recipe lifts on hover with a plain translate, which would drop the
   box off its own point; keep the centring and lift by scale instead. */
.loop-box .lb-step:hover, .loop-box .lb-step.on { transform: translate(-50%, -50%) scale(1.04); }
.loop-box .lb-step:active { transform: translate(-50%, -50%) scale(1.01); }
.lb-no {
  display: block;
  font-size: 12px; font-weight: 800; letter-spacing: .16em;
  background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lb-t { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.35; }
/* Clockwise from the top, one seventh of a turn apart: the centre of each box
   is at 50% + 39%·cos(a), 50% + 39%·sin(a), starting at a = -90deg. */
.lb-1 { left: 50%;    top: 11%; }
.lb-2 { left: 80.5%;  top: 25.7%; }
.lb-3 { left: 88%;    top: 58.7%; }
.lb-4 { left: 66.9%;  top: 85.1%; }
.lb-5 { left: 33.1%;  top: 85.1%; }
.lb-6 { left: 12%;    top: 58.7%; }
.lb-7 { left: 19.5%;  top: 25.7%; }
.lb-core {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  font-size: clamp(20px, 2.6vw, 30px); font-weight: 850; letter-spacing: .12em;
}

/* What the loop comes to, set from the left margin under the diagram. */
.lb-close { margin-top: 56px; text-align: left; }
.lb-close-lead { margin: 0; color: var(--muted); font-size: var(--t-body); }
.lb-close-chain {
  margin: 12px 0 0;
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 750;
  letter-spacing: -.01em;
  background: var(--g-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  width: fit-content;
}
.lb-close-note { margin: 14px 0 0; color: var(--muted); font-size: var(--t-body); line-height: 1.85; }
/* --------------------------------------------------------------------------
   Ecosystem chapters.
   -------------------------------------------------------------------------- */
/* The name, the role beneath it and the paragraph that follows all set from
   the left margin, on the same edge as the chapter title above them. The name
   is a person rather than the brand mark, so it stays in the text colour and
   takes no gold. */
.st-name { text-align: left; margin-bottom: 30px; }
/* Smaller than the chapter title it sits under: at 38px it outranked the
   heading above it, which is not what it is. */
.st-name b { display: block; font-size: clamp(20px, 2vw, 27px); font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.st-name span { display: block; margin-top: 10px; font-size: var(--t-label); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.st-lead { max-width: none; margin: 0 0 34px; text-align: left; color: var(--muted); font-size: var(--t-body); line-height: 1.9; }
/* The line that closes a chapter sets from the left, on the same margin as
   the chapter title above it, rather than centred under it. */
/* Directly under the paragraph it closes: near it, and clear of whatever
   comes next, so it reads as the end of the statement and not as a heading
   for the row below. */
.st-lead + .st-foot { margin: 24px 0 44px; }
.st-foot { max-width: 62ch; margin: 44px 0 0; text-align: left; color: var(--muted); font-size: var(--t-body); line-height: 1.85; }

.st-stack { display: flex; flex-direction: column; gap: 12px; }
.st-stack.tight { gap: 9px; margin-top: 14px; }
.st-mini { font-size: 15px; color: var(--muted); }
.st-stages { display: flex; align-items: flex-start; justify-content: center; gap: 18px; flex-wrap: wrap; }
.st-stage { flex: 1 1 230px; min-width: 220px; }
/* A chapter whose columns are far apart in length can ask for its heads to
   travel with their own boxes: head and stack centre together as one group,
   the head centred across the column it names. Columns of nearly even length
   keep the default, where every head sits on one line across the top. */
.st-stages.centred { align-items: stretch; }
.st-stages.centred .st-stage { display: flex; flex-direction: column; justify-content: center; }
.st-stages.centred .tl-h { text-align: center; }
.st-stages.centred .st-step-arrow { padding-top: 26px; }
/* The arrow is what says these three columns are a sequence, so it is set at
   full strength in the deep gold rather than as a faint separator. */
.st-step-arrow {
  align-self: center; flex: none;
  color: var(--gold-deep); opacity: 1;
  font-size: 30px; line-height: 1; font-weight: 700;
  padding-top: 40px;
  text-shadow: 0 0 14px rgba(255, 157, 1, .45);
}

.st-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.st-card { padding: 30px 28px; }
.st-card h3 { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -.03em; }
.st-card p { margin: 12px 0 0; color: var(--muted); font-size: 14.8px; line-height: 1.75; }
.st-phase { font-size: 12px; font-weight: 800; letter-spacing: .2em; margin-bottom: 12px; }

.st-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; align-items: start; }
.st-chain { display: flex; flex-direction: column; gap: 6px; }
.st-link { padding: 16px 20px; text-align: center; font-size: 15.5px; font-weight: 650; letter-spacing: -.015em; }
/* The chain arrow carries the sequence, so it is set at full strength in the
   deep gold rather than as a faint tick between the boxes. */
.st-arrow {
  text-align: center; line-height: 1;
  color: var(--gold-deep); opacity: 1;
  font-size: 22px; font-weight: 700;
  margin: 2px 0;
  text-shadow: 0 0 14px rgba(255, 157, 1, .45);
}
/* The left column is the platform model being left behind and the right one
   is where Solon goes; set the left back so the pair reads as a shift. */
.st-cols.flow .st-col:first-child .tl-h,
.st-cols.flow .st-col:first-child .st-link { color: var(--dim); font-weight: 500; }
.st-col.lit .st-link { color: var(--text); font-weight: 650; box-shadow: var(--glass-sh), inset 0 0 0 1px rgba(255, 157, 1, .22); }

.st-table { display: flex; flex-direction: column; gap: 10px; }
.st-tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-tr:not(.head) { padding: 20px 24px; }
.st-tr.head { padding: 0 24px 4px; }
.st-tr.head .st-td { font-size: var(--t-label); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.st-td { font-size: 16px; }
.st-tr:not(.head) .st-td:first-child { color: var(--dim); }
.st-td.lit { font-weight: 700; letter-spacing: -.02em; }

/* Two statements, one row each. The 64ch measure sat a few characters
   above the longer line, so it held on a wide screen and broke into four
   rows as soon as the window narrowed; let the lines have the shell. */
.st-paras { max-width: none; margin: 0 auto; text-align: center; }
/* The measure and the auto margins both come from the dark base; drop the
   cap so each statement holds one row, and keep the centring. */
.st-para { max-width: none; margin: 0 auto 20px; font-size: clamp(16px, 1.8vw, 20px); line-height: 1.9; color: var(--muted); }
/* The list that follows the statements is the answer to the last of them,
   so it needs room to read as an answer and not as a fifth line. */
.st-paras + .tl { margin-top: 34px; }

@media (max-width: 860px) {
  /* Ring labels are allowed to spill on desktop; on a phone they must not. */
  .net-wrap svg { overflow: hidden; }
  .loop-box { aspect-ratio: auto; display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
  .loop-box::before { display: none; }
  .lb-step, .loop-box .lb-step:hover, .loop-box .lb-step:active {
    position: static; width: auto; transform: none;
  }
  .lb-core { position: static; transform: none; padding: 18px 0; order: -1; }
  .st-step-arrow { padding-top: 0; transform: rotate(90deg); }
  .st-tr { grid-template-columns: 1fr; gap: 6px; }
}

/* The spirit chapter runs as a single column now the brand mark is gone. */
.sp-split.single { grid-template-columns: minmax(0, 1fr); max-width: 860px; }


/* --------------------------------------------------------------------------
   Centred chapters: an eyebrow, a headline, a short line, then the grid.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   A plain run of lines, left aligned on hairlines. The glass arrives only
   under the cursor or a touch: a small lift and a lavender glow, nothing at
   rest. Size and colour are the body's own.
   -------------------------------------------------------------------------- */
.tl-plain { border-top: 1px solid rgba(255, 170, 50, .18); }
/* Two to a row, each line still its own hover surface. */
.tl-plain.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
.tl-plain-line {
  margin: 0;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(255, 170, 50, .18);
  border-radius: 16px;
  font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.5;
  text-align: left;
  color: var(--text);
  transition: transform .34s cubic-bezier(.2, .7, .2, 1), background-color .34s,
              box-shadow .34s;
}
.tl-plain-line:hover, .tl-plain-line:active {
  transform: translateY(-4px);
  background: var(--glass-strong);
  box-shadow: var(--glass-sh), 0 0 32px -14px rgba(255, 157, 1, .85);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Gradient text inside a glass box keeps its own paint on hover. */
.statement-box .gtext { color: var(--muted); }

/* --------------------------------------------------------------------------
   Subpages carry the home background unchanged — the mood layer, the section
   bands and the soft wash are all inherited, so moving between pages never
   changes the ground underfoot. Nothing is redefined for `body.sub` here.
   -------------------------------------------------------------------------- */



/* ==========================================================================
   Discovery — the home page and the Ecosystem directory.

   A product portal, not a brand page: a short entrance, then cards. The
   palette is the same black and gold, held back further here. Headlines are
   warm white, gold marks only tags, the one primary action and the active
   filter, and nothing glows — hover is a hairline turning gold and a small
   lift. The pictures do the talking.
   ========================================================================== */
.page-dx .btn, .page-dx .btn:hover, .page-dx .btn.gold, .page-dx .btn.gold:hover { box-shadow: var(--btn-edge); }
.page-dx .btn.ghost { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.page-dx .btn.ghost:hover { box-shadow: inset 0 0 0 1px rgba(255, 157, 1, .5); }
.page-dx #aifx { opacity: .4; }

/* ---- Entrance ---- */
.dx-hero { padding: 96px 0 44px; text-align: center; }
.dx-hero .hero-kicker { color: var(--gold); opacity: .85; }
.dx-hero h1 {
  margin: 22px 0 0;
  font-size: clamp(36px, 5.2vw, 66px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.045em;
  color: var(--text);
}
/* The headline holds one line at every width, in both languages: it
   scales with the viewport rather than wrapping. */
.dx-hero h1 { font-size: clamp(15px, 4.5vw, 60px); white-space: nowrap; }
:root[lang="zh-CN"] .dx-hero h1 { font-size: clamp(18px, 5.8vw, 66px); letter-spacing: -.02em; }
.dx-hero-sm { padding: 72px 0 24px; }
.dx-hero-sm h1 { margin: 0; font-size: var(--t-sub-hero); }

.dx-search {
  display: flex; align-items: center; gap: 12px;
  max-width: 560px; height: 54px;
  margin: 36px auto 0; padding: 0 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: box-shadow .25s, background .25s;
}
.dx-search:focus-within { background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 157, 1, .55); }
.dx-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--dim); stroke-width: 2; stroke-linecap: round; }
.dx-search input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 16px;
}
.dx-search input::placeholder { color: var(--dim); }
.dx-search input::-webkit-search-cancel-button { filter: grayscale(1) invert(.6); }

.dx-stats { margin-top: 22px; display: flex; justify-content: center; gap: 28px; font-size: 14px; color: var(--dim); }
.dx-stats b { color: var(--text); font-weight: 750; }

/* ---- Sections ---- */
.dx-sec { padding: 36px 0 44px; scroll-margin-top: 90px; }
.dx-h { margin: 0 0 20px; font-size: 20px; font-weight: 750; letter-spacing: -.02em; color: var(--text); }

/* ---- Cards ---- */
.pc {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: #0E0B08;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  color: var(--text);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.pc:hover, .pc:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 157, 1, .45); outline: none; }
.pc-art {
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0C0A07;
}
.pc-art svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  filter: saturate(.8);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .4s;
}
.pc:hover .pc-art svg { transform: scale(1.03); filter: none; }
.pc-hub:hover .pc-art svg { transform: none; }
.pc-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.pc-tag { font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); opacity: .85; }
.pc-name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.pc-line { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pc-empty { grid-column: 1 / -1; margin: 0; padding: 48px 0; text-align: center; color: var(--dim); }

/* The games card: one project holding every game, two columns wide, its
   picture a mosaic of the covers. The height matches a single card: two
   widths plus the gap at 32:10 is one width at 16:10. */
.pc-hub { grid-column: span 2; }
.pc-hub .pc-art { aspect-ratio: 32 / 10; }
.pc-mosaic {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
  gap: 2px; background: #0C0A07;
}
.pc-mosaic > span { position: relative; overflow: hidden; }

/* The standing slot at the end of the directory. */
.pc-next {
  align-items: center; justify-content: center; text-align: center; gap: 4px;
  min-height: 250px; padding: 24px;
  background: transparent;
  box-shadow: none;
  border: 1px dashed rgba(255, 255, 255, .14);
}
.pc-next:hover { transform: none; box-shadow: none; }
.pc-next .pc-name { color: var(--muted); font-size: 16px; }
.pc-next .pc-line { color: var(--dim); font-size: 13px; }
.pc-plus {
  width: 44px; height: 44px; margin-bottom: 10px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 300; color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(255, 157, 1, .35);
}

/* ---- Category chips ---- */
.pc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pc-filter button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  color: var(--muted);
  font: inherit; font-size: 13.5px; font-weight: 650;
  cursor: pointer;
  transition: color .2s, box-shadow .2s, background .2s;
}
.pc-filter button:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 157, 1, .4); }
.pc-filter button.on { color: #1A0F00; background: var(--gold); box-shadow: none; }

/* ---- SOLON itself: last, one line ---- */
.dx-about { padding: 20px 0 72px; }
.dx-about a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 26px 4px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: var(--muted); font-size: 17px; font-weight: 600;
}
.dx-about b { color: var(--gold); font-weight: 700; font-size: 15px; white-space: nowrap; transition: transform .3s; }
.dx-about a:hover b { transform: translateX(4px); }

@media (max-width: 720px) {
  .dx-hero { padding: 56px 0 28px; }
  .dx-hero-sm { padding: 44px 0 12px; }
  .dx-search { margin-top: 26px; height: 50px; }
  .dx-sec { padding: 24px 0 32px; }
  .pc-hub .pc-art { aspect-ratio: 2 / 1; }
  .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pc-body { padding: 11px 12px 14px; }
  .pc-name { font-size: 15px; }
  .pc-line { font-size: 12.5px; }
  .pc-tag { font-size: 10px; }
  .pc-next { min-height: 0; padding: 18px 10px; }
  .dx-about a { font-size: 15px; }
}

/* The story on the Ecosystem page opens with its own heading, one step
   below the directory's title in rank and in warm white. */
#story .hero-sub-page { padding-top: 110px; border-top: 1px solid rgba(255, 255, 255, .06); }
.story-title {
  margin: 26px 0 0;
  font-size: var(--t-sub-hero); font-weight: 850;
  line-height: 1.3; letter-spacing: -.03em;
  color: var(--text);
}
:root[lang="zh-CN"] .story-title { line-height: 1.3; letter-spacing: -.02em; }

/* ==========================================================================
   The story in pictures (Ecosystem page, after the directory).

   Eight modules, each a label, a short title and a diagram. Icons are one
   line weight in hairline tiles; gold marks what is live or connected, the
   rest stays in the muted text colour. No glow, no motion.
   ========================================================================== */
.vz { position: relative; padding: 92px 0; border-top: 1px solid rgba(255, 255, 255, .05); }
.vz-anchor { position: absolute; top: -70px; }
.vz-head { margin-bottom: 48px; }
.vz-head .ch-label { margin-bottom: 16px; }
.vz-title { margin: 0; font-size: clamp(18px, 1.8vw, 24px); font-weight: 750; letter-spacing: -.025em; line-height: 1.25; color: var(--text); }

/* ---- Node: an icon tile with a label under it ---- */
.vz-node { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--text); }
.vz-tile {
  width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center;
  background: #0E0B08;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  color: var(--muted);
  transition: box-shadow .25s, transform .25s, color .25s;
}
.vz-ic { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vz-lbl { font-size: 14.5px; font-weight: 650; color: var(--muted); white-space: nowrap; letter-spacing: -.01em; }
.vz-node.lit .vz-tile { color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255, 157, 1, .4); }
.vz-node.lit .vz-lbl { color: var(--text); }
.vz-node.dim { opacity: .5; }
a.vz-node:hover .vz-tile { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 157, 1, .8); }

/* ---- Arrows between steps: a hairline with a head ---- */
.vz-arrow { position: relative; flex: none; width: 44px; height: 64px; }
.vz-arrow::before { content: ""; position: absolute; left: 4px; right: 7px; top: 50%; height: 1px; background: rgba(255, 157, 1, .5); }
.vz-arrow::after {
  content: ""; position: absolute; right: 6px; top: calc(50% - 4px);
  width: 8px; height: 8px;
  border-top: 1px solid rgba(255, 157, 1, .75); border-right: 1px solid rgba(255, 157, 1, .75);
  transform: rotate(45deg);
}
.vz-arrow.big { align-self: center; width: 56px; }
.vz-arrow.down { width: 40px; height: 40px; transform: rotate(90deg); }

/* ---- A row of steps ---- */
.vz-steps { display: flex; align-items: flex-start; justify-content: center; gap: 14px; }
.vz-note { margin: 40px auto 0; max-width: 60ch; text-align: center; color: var(--muted); font-size: 16px; line-height: 1.7; }

/* ---- Two panels with an arrow between: before and after ---- */
.vz-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; }
.vz-panel {
  margin: 0; padding: 22px 22px 30px;
  border-radius: 20px;
  background: #0B0906;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.vz-panel figcaption { font-size: 12px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.vz-panel.dim figcaption { color: var(--dim); }
.vz-panel.dim .vz-node { opacity: .6; }
.vz-cap { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--dim); }
.vz-cap.lit { color: var(--gold); }

/* ---- Stages: nodes placed over a drawing of their links ---- */
.vz-stage { position: relative; aspect-ratio: 1 / .8; margin: 10px 8% 18px; }
.vz-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vz-lines line { stroke: rgba(255, 157, 1, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vz-loop { fill: none; stroke: rgba(255, 157, 1, .5); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.vz-at { position: absolute; transform: translate(-50%, -50%); }
.vz-stage .vz-node { position: relative; }
.vz-stage .vz-tile { width: 50px; height: 50px; border-radius: 14px; }
.vz-stage .vz-ic { width: 23px; height: 23px; }
.vz-stage .vz-lbl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 7px; font-size: 13px; }
.vz-core {
  display: grid; place-items: center;
  padding: 13px 18px; border-radius: 14px;
  background: #140F08;
  box-shadow: inset 0 0 0 1px rgba(255, 157, 1, .6);
  color: var(--gold); font-size: 14px; font-weight: 850; letter-spacing: .14em;
}

/* The hub: the widest stage; its spokes are grey except to what is live. */
.vz-hub { max-width: 820px; margin: 0 auto; aspect-ratio: 1.7 / 1; }
.vz-hub .vz-lines line { stroke: rgba(255, 255, 255, .1); }
.vz-hub .vz-lines line.on { stroke: rgba(255, 157, 1, .6); }
.vz-legend { display: flex; justify-content: center; gap: 24px; margin-top: 44px; font-size: 13px; color: var(--dim); }
.vz-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--dim); vertical-align: 1px; }
.vz-legend i.on { background: var(--gold); box-shadow: none; }

/* The old model: many users feeding one box. */
.vz-funnel { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 0 4px; }
.vz-row3 { display: flex; gap: 12px; }
.vz-row3 .vz-lbl { display: none; }
.vz-row3 .vz-tile { width: 46px; height: 46px; border-radius: 13px; }

/* ---- Four tiles ---- */
.vz-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vz-tiles .vz-node { padding: 30px 12px 26px; border-radius: 18px; background: #0B0906; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }

/* ---- The road: three rings, widening ---- */
.vz-road { display: flex; align-items: flex-start; justify-content: center; gap: 10px; }
.vz-road > .vz-arrow { margin-top: 63px; }
.vz-phase { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 210px; }
.vz-phase svg { width: 190px; height: 190px; }
.vz-phase b { font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--gold); }
.vz-phase span { font-size: 17px; font-weight: 700; color: var(--text); }
.vz-phase line { stroke: rgba(255, 157, 1, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vz-orbit { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vz-dot { fill: #0B0906; stroke: var(--gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.vz-hubdot { fill: var(--gold); }

/* ---- The declaration: five words ---- */
.vz-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.vz-chips span {
  padding: 14px 24px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 157, 1, .32);
  font-size: 17px; font-weight: 700; color: var(--text);
}

@media (max-width: 900px) {
  .vz-pair { grid-template-columns: minmax(0, 1fr); }
  .vz-pair > .vz-arrow.big { justify-self: center; transform: rotate(90deg); height: 44px; }
  .vz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .vz { padding: 60px 0; }
  .vz-head { margin-bottom: 32px; }
  /* Steps and the road run downwards on a phone. */
  .vz-steps, .vz-road { flex-direction: column; align-items: center; gap: 6px; }
  .vz-steps > .vz-arrow, .vz-road > .vz-arrow { transform: rotate(90deg); height: 36px; width: 36px; }
  .vz-road > .vz-arrow { margin-top: 0; }
  .vz-phase svg { width: 150px; height: 150px; }
  .vz-hub { aspect-ratio: 1 / 1.05; }
  .vz-hub .vz-tile { width: 40px; height: 40px; border-radius: 12px; }
  .vz-hub .vz-ic { width: 19px; height: 19px; }
  .vz-hub .vz-lbl { font-size: 11px; margin-top: 5px; }
  .vz-stage { margin: 10px 2% 26px; aspect-ratio: 1 / .95; }
  .vz-stage .vz-tile { width: 40px; height: 40px; border-radius: 12px; }
  .vz-stage .vz-ic { width: 19px; height: 19px; }
  .vz-stage .vz-lbl { font-size: 11.5px; margin-top: 5px; }
  .vz-core { padding: 9px 12px; font-size: 12px; border-radius: 11px; }
  .vz-chips span { padding: 11px 18px; font-size: 15px; }
}