/* ════════════════════════════════════════════
   LONGMA LABS · DESIGN SYSTEM
   龍馬 · Bet on the fastest horse
   ════════════════════════════════════════════ */

:root{
  /* PALETTE — obsidian + purple, cyan ONLY for live-pulse */
  --bg: #050405;
  --bg-1: #0a0810;
  --bg-2: #0f0d18;
  --purple-deep: #5B21B6;
  --purple: #7B3FF2;
  --purple-bright: #A855F7;
  --purple-glow: #B98DFF;
  --purple-mute: #3D1F66;
  --silver: #E5E7EB;
  --silver-dim: #9CA3AF;
  --text: #F8F8FA;
  --text-muted: #9CA3AF;
  --text-dim: #4B5563;
  --text-fade: #2A2F3A;
  --accent-cyan: #22D3EE;
  --rule: rgba(155, 130, 255, 0.10);
  --rule-2: rgba(155, 130, 255, 0.05);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* proximity (not mandatory) → chain sections gently ANCHOR as you scroll near
   them, but the hero/convergence still scroll freely (no scroll-trapping). */
html{scroll-behavior:smooth; scroll-snap-type:y proximity; overflow-x:clip}
html,body{min-height:100%;background:var(--bg);color:var(--text)}
body{
  font-family:'Inter Tight', system-ui, -apple-system, sans-serif;
  font-weight:400; line-height:1.55; font-size:16px;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'tnum','ss01';
  /* clip (not hidden): clips the phantom horizontal overflow WITHOUT turning
     body into a scroll container — which would break the sticky header at the finale. */
  overflow-x:clip;
  min-height:100vh;
}
::selection{background:var(--purple);color:var(--bg)}
img,svg,canvas{display:block;max-width:100%}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* TYPE SYSTEM */
.mono{font-family:'JetBrains Mono', monospace;font-weight:400;letter-spacing:.04em}
.condensed{font-family:'Inter Tight', system-ui, sans-serif;font-weight:900;font-stretch:condensed;letter-spacing:-0.04em}
.heavy{font-weight:900;letter-spacing:-0.03em}

/* GRID */
.app{max-width:1480px;margin:0 auto;padding:0 32px;position:relative;z-index:2}

/* ════════════════════════════════════════════
   GLOBAL BACKGROUND — Three.js shard scene
   Shards drift + rotate everywhere. On the home page,
   they recomposite into the actual 3D dragon-horse model
   at the convergence section.
   ════════════════════════════════════════════ */
#shard-3d{position:fixed;inset:0;z-index:0;pointer-events:none}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 70% at 25% 30%, rgba(123,63,242,.16), transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 70%, rgba(91,33,182,.12), transparent 65%),
    var(--bg);
}
body::after{
  content:'';position:fixed;inset:0;z-index:998;pointer-events:none;
  background:radial-gradient(ellipse 110% 100% at 50% 50%,transparent 50%,rgba(5,4,5,.55) 100%);
}

/* ════════════════════════════════════════════
   CONVERGENCE SECTION (home page finale)
   ════════════════════════════════════════════ */
.converge{
  position:relative; min-height:108vh;
  display:grid; place-items:end center;   /* bottom-align the stage → tagline drops near the footer, freeing the upper band for the (now bigger) horse */
  margin-top:100px;
  padding:24px 0;
  overflow:hidden;
}
.converge .stage{
  position:relative; width:100%;
  display:grid; place-items:center;
  min-height:110vh;            /* taller → drops the .below tagline lower, clear of the horse */
  text-align:center;
}
/* Stage-area: viewport-sized spacer.
   The shattered 3D dragon-horse pieces are rendered by the global
   #shard-3d canvas, which positions them at screen-centre. The
   stage-area just reserves space in the layout so the text sits
   around it — and hosts a subtle background video layer underneath. */
.converge .stage-area{
  position:relative; width:min(820px, 78vw); aspect-ratio:1;
  display:block;
}
.converge .stage-area .stage-video{
  position:absolute; inset:-8% -10%;
  width:120%; height:116%;
  object-fit:cover;
  opacity:0;
  mix-blend-mode:screen;
  pointer-events:none;
  transition:opacity 1.4s var(--ease);
  filter:blur(.3px) saturate(1.05);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 35%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 35%, transparent 90%);
}
.converge.formed .stage-area .stage-video{
  opacity:.18;
}
.converge .above{
  position:absolute; top:48px; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  z-index:3;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
/* the intro header rises UP and leaves the viewport as the horse settles in —
   handing the stage to the formed horse + the tagline rising in below it. */
.converge.crystallized .above{ transform:translateY(-72px); opacity:0; pointer-events:none; }
.converge .above .marker{
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.32em; color:var(--silver-dim); text-transform:uppercase;
}
.converge .above .marker .dot{display:inline-block;width:6px;height:6px;background:var(--accent-cyan);border-radius:50%;box-shadow:0 0 6px var(--accent-cyan);animation:cyan-pulse 1.5s ease-in-out infinite;vertical-align:middle;margin:0 8px 2px}
.converge .above h2{
  font-family:'Inter Tight',sans-serif; font-weight:900;
  font-size:clamp(22px, 2.4vw, 36px); line-height:.95;
  letter-spacing:-0.03em; color:var(--text);
  font-stretch:condensed; text-transform:uppercase;
  opacity:0; transform:translateY(8px);
  transition:opacity .8s .2s var(--ease), transform .8s .2s var(--ease), color .6s var(--ease), text-shadow .7s var(--ease);
}
.converge.formed .above h2{opacity:1;transform:translateY(0)}

/* ── Crystallisation climax: glow ignition + dramatic-text flare ──
   The engine adds .crystallized to #converge the instant the gems solidify
   into the exact model. Light blooms in a halo around the horse and the
   framing text ignites — the "glow start" punctuating the reveal. */
.converge .stage-glow{
  position:absolute; left:50%; top:33%; transform:translate(-50%,-50%) scale(.62);
  width:min(680px,62vw); height:min(680px,62vw); border-radius:50%;
  background:radial-gradient(circle, transparent 0%, rgba(123,63,242,.20) 32%, rgba(123,63,242,.07) 54%, transparent 72%);
  filter:blur(12px); opacity:0; pointer-events:none; z-index:0;
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.converge.crystallized .stage-glow{
  opacity:.5; transform:translate(-50%,-50%) scale(1);
  animation:crys-flare 1.5s var(--ease);
}
@keyframes crys-flare{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.62); filter:blur(24px)}
  42%{opacity:.95; transform:translate(-50%,-50%) scale(1.16); filter:blur(7px)}
  100%{opacity:.5; transform:translate(-50%,-50%) scale(1); filter:blur(12px)}
}
.converge.crystallized .above h2{
  color:#fff;
  text-shadow:0 0 34px rgba(155,130,255,.85), 0 0 78px rgba(123,63,242,.55);
}
.converge.crystallized .above .marker{color:var(--purple-glow)}
.converge.crystallized .below .tagline{
  text-shadow:0 0 36px rgba(155,130,255,.6), 0 0 90px rgba(123,63,242,.45);
}
.converge.crystallized .below .tagline .pg{
  filter:drop-shadow(0 0 22px rgba(123,63,242,.95));
}

.converge .below{
  position:absolute; bottom:20px; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  z-index:3;
}
.converge .below .tagline{
  font-family:'Inter Tight',sans-serif; font-weight:900;
  font-size:clamp(26px, 3.6vw, 52px); line-height:.92;
  letter-spacing:-0.05em; color:var(--text);
  font-stretch:condensed; text-transform:uppercase;
  opacity:0; transform:translateY(20px);
  transition:opacity 1s .4s var(--ease), transform 1s .4s var(--ease);
  text-shadow:0 0 60px rgba(123,63,242,.4);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.converge .below .tagline .pg{
  background:linear-gradient(180deg,#B98DFF 0%,#7B3FF2 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.converge .below .tagline .line2{
  font-size:.62em; font-weight:900;
  letter-spacing:-0.04em;
  color:var(--purple-glow);
  margin-top:4px;
}
.converge .below .tagline .line2 .dim{
  color:var(--text-dim); font-weight:500;
}
/* the tagline appears AS THE HORSE SETTLES (crystallized = gems fusing), not on
   raw scroll — so the formation reads: horse circles → lands → text rises in. */
.converge.crystallized .below .tagline{opacity:1;transform:translateY(0)}

.converge .below .small-cool{
  font-family:'JetBrains Mono',monospace; font-size:12px;
  letter-spacing:.32em; color:var(--silver-dim); text-transform:uppercase;
  display:flex; align-items:center; gap:24px;
  opacity:0; transform:translateY(8px);
  transition:opacity 1s .7s var(--ease), transform 1s .7s var(--ease);
}
.converge.crystallized .below .small-cool{opacity:1;transform:translateY(0)}
.converge .below .small-cool .han{
  font-family:'Noto Serif TC', serif;
  font-size:22px;
  color:var(--purple-glow);
  letter-spacing:.08em;
  text-shadow:0 0 18px rgba(123,63,242,.5);
}
.converge .below .small-cool .sep{color:var(--text-fade)}
.converge .below .small-cool .pg{color:var(--purple-glow)}

.converge .below .meta-row{
  display:flex; gap:36px; flex-wrap:wrap; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.22em; color:var(--text-dim); text-transform:uppercase;
  opacity:0;
  transition:opacity 1s .9s var(--ease);
}
.converge .below .meta-row b{color:var(--silver-dim);font-weight:500}
.converge.formed .below .meta-row{opacity:1}

/* Side markers */
/* CLEAN FINALE: declutter to a horse → tagline → footer stack (the side
   instrument panels + meta-row crowded the band and clashed with the horse). */
.converge .below .meta-row{ display:none; }
.converge .below .tagline .line2{ overflow:hidden; }      /* collapses as it fades out */
.converge .side-left, .converge .side-right{
  display:none;                                            /* hidden for the clean finale */
  position:absolute; top:50%; transform:translateY(-50%);
  flex-direction:column; gap:14px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.22em; color:var(--text-dim); text-transform:uppercase;
  z-index:2;
  opacity:0; transition:opacity 1.4s .8s var(--ease);
}
.converge.formed .side-left, .converge.formed .side-right{opacity:1}
.converge .side-left{left:24px;text-align:left}
.converge .side-right{right:24px;text-align:right}
.converge .side-left .v{color:var(--purple-glow)}
.converge .side-right .v{color:var(--purple-glow)}

@media (max-width:780px){
  .converge .side-left,.converge .side-right{display:none}
  .converge .above{top:24px}
  .converge .below{bottom:24px;gap:14px}
  .converge .below .small-cool{font-size:10px;gap:14px}
  .converge .below .meta-row{display:none}
}

/* ════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════ */
.head{
  position:sticky; top:0; z-index:50;   /* nav stays present through the whole page incl. the finale */
  display:grid; grid-template-columns:auto 1fr auto auto;
  gap:42px; align-items:center;
  padding:18px 0;
  border-bottom:1px solid var(--rule);
}
/* dark scrim behind the header so the nav stays readable over the shattering
   gems (the intro explosion fills the viewport with bright particles) */
.head::before{
  content:''; position:absolute; left:-50vw; right:-50vw; top:-26px; bottom:-1px;
  background:linear-gradient(to bottom, #050405, #050405 66%, rgba(5,4,8,.9) 100%);
  z-index:-1; pointer-events:none;
}
.head .brand, .head .nav a, .head .nav .live, .head .cta-apply{
  text-shadow:0 1px 14px rgba(5,4,8,.9);
}
/* hiring hook — sits beside the persistent Apply CTA (the text Mark wants by "apply") */
.hire-hook{display:flex;flex-direction:column;gap:3px;justify-self:end;text-align:right;text-decoration:none}
.hire-hook .hh-top{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--purple-glow);display:inline-flex;align-items:center;justify-content:flex-end;gap:7px;text-shadow:0 1px 12px rgba(5,4,8,.9)}
.hire-hook .hh-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-cyan);box-shadow:0 0 8px var(--accent-cyan)}
.hire-hook .hh-sub{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:-0.01em;color:var(--text-muted);white-space:nowrap;transition:color .25s var(--ease);text-shadow:0 1px 12px rgba(5,4,8,.9)}
.hire-hook:hover .hh-sub{color:var(--text)}
@media(max-width:1240px){.hire-hook{display:none}}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit;
}
.brand .mark{width:32px;height:32px;display:grid;place-items:center;flex-shrink:0}
.brand .wm{
  font-family:'Inter Tight',sans-serif;font-weight:900;
  font-size:14.5px;letter-spacing:.08em;color:var(--text);
  display:flex;flex-direction:column;line-height:1;
}
.brand .wm .top{display:flex;align-items:center;gap:8px}
.brand .wm .sep{
  width:18px;height:2px;background:var(--purple);
}
.brand .wm .sub{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--silver-dim);letter-spacing:.18em;margin-top:5px;font-weight:400}

.nav{display:flex; gap:0; justify-self:center; align-items:center}
.nav a{
  font-family:'Inter Tight',sans-serif;font-weight:700;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--silver-dim); text-decoration:none;
  padding:12px 18px; transition:color .2s var(--ease);
  position:relative;
}
.nav a:hover{color:var(--text)}
.nav a.active{color:var(--purple-glow)}
.nav a.active::after{
  content:''; position:absolute; left:18px; right:18px; bottom:6px;
  height:1px; background:var(--purple);
}
.nav .live{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  letter-spacing:.14em; color:var(--silver-dim);
  padding-left:18px; margin-left:12px;
  border-left:1px solid var(--rule);
}
.nav .live .dot{
  width:6px; height:6px; background:var(--accent-cyan); border-radius:50%;
  box-shadow:0 0 8px var(--accent-cyan);
  animation:cyan-pulse 1.5s ease-in-out infinite;
}
@keyframes cyan-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.7)}
}

.cta-apply{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Inter Tight',sans-serif; font-weight:700;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text); background:transparent;
  padding:14px 22px; text-decoration:none;
  border:1px solid var(--purple);
  transition:all .2s var(--ease);
  cursor:pointer;
}
.cta-apply:hover{
  background:var(--purple); color:var(--text);
  box-shadow:0 0 0 1px var(--purple), 0 12px 36px -8px rgba(123,63,242,.6);
  transform:translateX(2px);
}
.cta-apply .arrow{transition:transform .2s var(--ease)}
.cta-apply:hover .arrow{transform:translateX(4px)}

/* ════════════════════════════════════════════
   SECTION HEADER
   ════════════════════════════════════════════ */
.sec-id{
  display:inline-flex; align-items:center; gap:14px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.22em; color:var(--purple-glow); text-transform:uppercase;
  margin-bottom:24px;
}
.sec-id::before{
  content:''; width:32px; height:1px; background:var(--purple);
}
.sec-id .meta{color:var(--silver-dim)}

h2.display{
  font-family:'Inter Tight',sans-serif; font-weight:900;
  font-size:clamp(40px, 5.5vw, 80px); line-height:.95;
  letter-spacing:-0.04em; color:var(--text);
  font-stretch:condensed;
}
h2.display .pg{color:var(--purple-glow)}

p.lead{
  font-family:'Inter Tight',sans-serif; font-weight:500;
  font-size:clamp(17px, 1.4vw, 22px); line-height:1.45;
  color:var(--text); max-width:62ch;
  letter-spacing:-0.005em;
}
p.lead b{color:var(--purple-glow);font-weight:500}
p.lead em{font-style:normal;color:var(--accent-cyan)}

/* ════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Inter Tight',sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:18px 28px; text-decoration:none;
  border:1px solid var(--purple);
  transition:all .25s var(--ease); cursor:pointer; background:transparent;
}
.btn-primary{
  background:var(--purple); color:var(--text);
  box-shadow:0 0 0 1px var(--purple), 0 24px 60px -16px rgba(123,63,242,.6);
}
.btn-primary:hover{
  background:var(--purple-bright); border-color:var(--purple-bright);
  transform:translateX(4px); box-shadow:0 0 0 1px var(--purple-bright), 0 32px 80px -16px rgba(168,85,247,.7);
}
.btn-ghost{color:var(--text);}
.btn-ghost:hover{background:var(--purple);color:var(--text);transform:translateX(4px)}
.btn .arrow{transition:transform .25s var(--ease);font-family:'JetBrains Mono',monospace}
.btn:hover .arrow{transform:translateX(6px)}

/* ════════════════════════════════════════════
   CARDS — never glassmorph, always solid
   ════════════════════════════════════════════ */
.card{
  background:var(--bg-1);
  border:1px solid var(--rule);
  padding:32px;
  position:relative; overflow:hidden;
  transition:all .35s var(--ease);
  display:flex; flex-direction:column;
}
.card::before{
  content:''; position:absolute; top:0; left:0; height:1px; width:0;
  background:var(--purple); transition:width .5s var(--ease);
}
.card:hover{
  background:var(--bg-2); border-color:var(--purple-mute);
  transform:translateX(2px);
}
.card:hover::before{width:100%}

/* ════════════════════════════════════════════
   PAGE HERO (sub-pages)
   ════════════════════════════════════════════ */
.page-hero{padding:80px 0 60px;position:relative}
.page-hero .crumb{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  color:var(--silver-dim); letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:32px;
}
.page-hero .crumb a{color:var(--purple-glow);text-decoration:none}
.page-hero .crumb a:hover{color:var(--text)}
.page-hero .crumb .sep{color:var(--text-fade)}
.page-hero h1{
  font-family:'Inter Tight',sans-serif; font-weight:900;
  font-size:clamp(54px, 8.5vw, 132px); line-height:.92;
  letter-spacing:-0.05em; color:var(--text);
  font-stretch:condensed;
}
.page-hero h1 .pg{color:var(--purple-glow)}
.page-hero .sub{
  font-family:'Inter Tight',sans-serif; font-weight:500;
  font-size:clamp(18px, 1.5vw, 24px); color:var(--text-muted);
  margin-top:24px; max-width:62ch; line-height:1.45;
}
.page-hero .sub em{font-style:normal;color:var(--purple-glow);font-weight:500}
.page-hero .meta-strip{
  display:flex; flex-wrap:wrap; gap:38px;
  margin-top:38px; padding-top:28px;
  border-top:1px solid var(--rule);
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  color:var(--silver-dim); letter-spacing:.16em; text-transform:uppercase;
}
.page-hero .meta-strip b{color:var(--text);font-weight:500}

/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */
.foot{
  position:relative; z-index:4; background:var(--bg);   /* solid → occludes the fixed gem canvas; starts cleanly below the horse */
  margin-top:0; padding:16px 0 10px;
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr auto;
  gap:14px 28px; align-items:start;
}
.foot h5{
  font-family:'Inter Tight',sans-serif;font-weight:700;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:6px;
}
.foot a{
  display:block; font-size:12.5px; line-height:1.35; color:var(--text-muted);
  text-decoration:none; padding:1px 0;
  transition:color .15s var(--ease);
  font-family:'Inter Tight',sans-serif;font-weight:500;
}
.foot a:hover{color:var(--purple-glow)}
.foot .brand-col p{
  font-size:12px; color:var(--text-muted); margin:7px 0 5px;
  line-height:1.4; font-family:'Inter Tight',sans-serif;
}
.foot .han{
  font-family:'Noto Serif TC', serif; font-size:30px;
  color:var(--purple); line-height:1; align-self:start;
  font-weight:500;
  text-shadow:0 0 30px rgba(123,63,242,.4);
}
.foot-bot{
  position:relative; z-index:4; background:var(--bg);
  padding:8px 0; margin-top:6px;
  border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:center;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--text-dim); letter-spacing:.18em; text-transform:uppercase;
}
.foot-bot .socials{display:flex;gap:18px}
.foot-bot .socials a{color:var(--silver-dim);text-decoration:none;transition:color .15s var(--ease)}
.foot-bot .socials a:hover{color:var(--purple-glow)}

/* ════════════════════════════════════════════
   SPEED STREAK utility classes
   ════════════════════════════════════════════ */
.streak-in{opacity:0;transform:translateX(-32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.streak-in.on{opacity:1;transform:translateX(0)}
.streak-in.d1{transition-delay:.08s}.streak-in.d2{transition-delay:.16s}.streak-in.d3{transition-delay:.24s}.streak-in.d4{transition-delay:.32s}.streak-in.d5{transition-delay:.4s}.streak-in.d6{transition-delay:.48s}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
/* ── mobile hamburger + full-screen menu ── */
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--rule);cursor:pointer;padding:0;flex-shrink:0}
.burger span{display:block;width:20px;height:2px;background:var(--text);transition:transform .3s var(--ease),opacity .2s}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;inset:0;z-index:90;background:rgba(5,4,8,.985);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:80px 24px}
body.menu-open{overflow:hidden}
body.menu-open .mobile-menu{display:flex}
.mobile-menu a{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--text);text-decoration:none;padding:10px 0}
.mobile-menu a.active{color:var(--purple-glow)}
.mobile-menu a.mm-apply{margin-top:22px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-glow);border:1px solid var(--purple);padding:15px 30px}
.mm-close{position:absolute;top:20px;right:20px;width:44px;height:44px;background:transparent;border:1px solid var(--rule);color:var(--text);font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}

@media (max-width:1180px){
  .nav{display:none}
  .nav .live{display:none}
  .head{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .cta-apply{display:none}
  .burger{display:flex}
}
@media (max-width:780px){
  .app{padding:0 18px}
  .foot{grid-template-columns:1fr 1fr;gap:36px}
  .foot .han{grid-column:1/-1;font-size:42px}
  .page-hero h1{font-size:48px}
  .page-hero .meta-strip{gap:20px;font-size:9.5px}
  .cta-apply{padding:11px 16px;font-size:10.5px}
}

/* ════════════════════════════════════════════
   DIRECTORY — shared inner-page pattern: a list; click a row to open its full
   article in place. No 3D field; calm, premium, content-first. Per-item accent
   via --cb (set inline). Used by chains / products / initiatives / community / join.
   ════════════════════════════════════════════ */
.dir{margin-top:34px;border-top:1px solid var(--rule)}
.dir-item{position:relative;border-bottom:1px solid var(--rule);--cb:var(--purple-glow)}
.dir-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--cb);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);opacity:.9}
.dir-item.open::before{transform:scaleY(1)}
.dir-item.open{background:radial-gradient(120% 100% at 0% 0%, color-mix(in srgb,var(--cb) 7%,transparent), transparent 60%)}
.dir-row{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;color:var(--text);font:inherit;
  display:grid;grid-template-columns:84px 56px 1fr auto 30px;align-items:center;gap:26px;
  padding:32px 22px 32px 14px;transition:padding .35s var(--ease);
}
.dir-row:hover{padding-left:24px}
.dir-rank{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:40px;line-height:1;letter-spacing:-0.04em;font-stretch:condensed;color:var(--rule);transition:color .35s var(--ease)}
.dir-item:hover .dir-rank,.dir-item.open .dir-rank{color:color-mix(in srgb,var(--cb) 62%,var(--text-dim))}
.dir-mark{width:48px;height:48px;display:grid;place-items:center}
.dir-mark svg,.dir-mark img{width:46px;height:46px;object-fit:contain;transition:filter .35s var(--ease)}
.dir-item.open .dir-mark svg,.dir-item.open .dir-mark img{filter:drop-shadow(0 0 13px color-mix(in srgb,var(--cb) 72%,transparent))}
.dir-head{display:flex;flex-direction:column;gap:7px;min-width:0}
.dir-name{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(26px,3.1vw,38px);letter-spacing:-0.025em;line-height:1;color:var(--text);transition:color .3s var(--ease)}
.dir-item.open .dir-name{color:var(--cb)}
.dir-tag{font-family:'Inter Tight',sans-serif;font-weight:500;font-style:italic;font-size:15.5px;color:var(--text-muted)}
.dir-flag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);text-align:right;white-space:nowrap}
.dir-flag b{color:var(--cb);font-weight:500}
.dir-chev{position:relative;width:20px;height:20px;justify-self:end}
.dir-chev::before,.dir-chev::after{content:'';position:absolute;top:50%;left:50%;background:var(--silver-dim);transition:transform .4s var(--ease),background .3s var(--ease)}
.dir-chev::before{width:15px;height:1.5px;transform:translate(-50%,-50%)}
.dir-chev::after{width:1.5px;height:15px;transform:translate(-50%,-50%)}
.dir-item.open .dir-chev::before{background:var(--cb)}
.dir-item.open .dir-chev::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.dir-article{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.dir-item.open .dir-article{grid-template-rows:1fr}
.dir-article > .clip{overflow:hidden}
.dir-art-in{
  display:grid;grid-template-columns:1.55fr 1fr;gap:54px;
  padding:4px 22px 54px 154px;
  opacity:0;transform:translateY(14px);transition:opacity .55s .12s var(--ease),transform .55s .12s var(--ease);
}
.dir-item.open .dir-art-in{opacity:1;transform:none}
.dir-lead{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:20px;line-height:1.5;color:var(--text);margin-bottom:16px;letter-spacing:-0.01em}
.dir-prose{font-family:'Inter Tight',sans-serif;font-weight:400;font-size:16px;line-height:1.68;color:var(--text-muted);max-width:60ch}
.dir-prose p{margin-bottom:13px}
.dir-prose p strong{color:var(--text);font-weight:600}
.dir-prose .pos{color:var(--cb);font-weight:600}
.dir-rail{display:flex;flex-direction:column}
.dir-rail-h{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}
.dir-spec{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--rule)}
.dir-spec .l{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--silver-dim);letter-spacing:.16em;text-transform:uppercase}
.dir-spec .v{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--text);font-variant-numeric:tabular-nums;text-align:right}
.dir-spec .v .pg{color:var(--cb)}
.dir-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:22px}
.dir-link{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cb);text-decoration:none;border:1px solid color-mix(in srgb,var(--cb) 35%,transparent);padding:11px 16px;transition:background .25s var(--ease)}
.dir-link:hover{background:color-mix(in srgb,var(--cb) 12%,transparent)}
.dir-link.ghost{color:var(--silver-dim);border-color:var(--rule)}
.dir-link.ghost:hover{color:var(--text)}
.idx-cta{margin-top:70px;padding:80px 24px 110px;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;border-top:1px solid var(--rule)}
.idx-intro{max-width:62ch}
@media (max-width:880px){
  .dir-row{grid-template-columns:42px 1fr 26px;gap:14px;padding:24px 4px}
  .dir-row .dir-mark{display:none}
  .dir-flag{display:none}
  .dir-rank{font-size:26px}
  .dir-art-in{grid-template-columns:1fr;gap:26px;padding:0 4px 36px 4px}
}

/* ════════════════════════════════════════════
   INITIATIVE BADGE — shows a product's parent initiative (kanji + name + accent).
   Attached on products; clickable through to the initiative. --cb set inline.
   ════════════════════════════════════════════ */
.ibadge{display:inline-flex;align-items:center;gap:11px;text-decoration:none;border:1px solid color-mix(in srgb,var(--cb,#7B3FF2) 38%,transparent);background:color-mix(in srgb,var(--cb,#7B3FF2) 9%,transparent);padding:8px 15px 8px 11px;border-radius:9px;transition:background .25s var(--ease),border-color .25s var(--ease)}
.ibadge:hover{background:color-mix(in srgb,var(--cb,#7B3FF2) 17%,transparent);border-color:color-mix(in srgb,var(--cb,#7B3FF2) 60%,transparent)}
.ibadge .ig{font-family:'Noto Serif TC',serif;font-size:22px;line-height:1;color:var(--cb,#7B3FF2);text-shadow:0 0 13px color-mix(in srgb,var(--cb,#7B3FF2) 55%,transparent)}
.ibadge .it{display:flex;flex-direction:column;gap:2px;line-height:1.05}
.ibadge .il{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--silver-dim)}
.ibadge .in{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:13.5px;color:var(--text);letter-spacing:-0.01em}
.ibadge.indep{border-style:dashed;background:none;border-color:var(--rule)}
.ibadge.indep .ig{font-size:15px;color:var(--text-dim)}
.ibadge.indep .in{color:var(--text-muted)}
/* product → initiative chips on the initiative bands (reverse link) */
.ib-ships{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--silver-dim)}
.ib-ships .chip{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:13px;letter-spacing:-0.01em;text-transform:none;color:var(--text);text-decoration:none;border:1px solid color-mix(in srgb,var(--cb,#7B3FF2) 32%,transparent);padding:5px 11px;border-radius:7px;transition:background .2s var(--ease)}
.ib-ships .chip:hover{background:color-mix(in srgb,var(--cb,#7B3FF2) 13%,transparent)}