/* ============================================================
   TCOMM — sections.css
   Sections 2–10. Each block is namespaced (.s2 … .s10 / .ft)
   so it maps to a WordPress template-part. No shared state.
   ============================================================ */

/* content shell sits above the sticky hero as it scrolls up */
.page-body { position: relative; z-index: 5; background: var(--bg); }

/* bilingual text pattern: BM primary, EN secondary ----------- */
.bi-en { display: block; color: var(--grey-dim); font-weight: 400; }
.section-head .bi-en, h2 .bi-en { font-size: 0.5em; letter-spacing: 0; margin-top: 0.5em; }

/* ============================================================
   Section 2 — Immersive intro (meteor depth + scrollytelling)
   Sticky canvas stage: a connection meteor descends from the hero,
   explodes at the headline core, then the headline scroll-tells.
   ============================================================ */
.s2 { position: relative; height: 340vh; background: var(--scene-0); }
.s2-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background:
    /* soft green light bleeding down from the hero globe */
    radial-gradient(120% 80% at 58% -16%, rgba(86,224,138,0.12), rgba(86,224,138,0.035) 42%, transparent 68%),
    /* faint arc = the globe's lower limb peeking into the top of Section 2 */
    radial-gradient(132% 152% at 58% -60%, transparent 58%, rgba(120,220,165,0.11) 59.4%, rgba(120,220,165,0.03) 61%, transparent 63%),
    /* base: dark at the top (continuous with the hero) brightening toward the meteor */
    radial-gradient(120% 92% at 50% 66%, var(--scene-2) 0%, var(--scene-1) 48%, var(--scene-0) 90%);
}
.s2-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.s2-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center; pointer-events: none;
}

.s2-eyebrow {
  margin: 0 0 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 11px;
  opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
/* match the shared .eyebrow exactly: live LED dot + animated fiber line */
.s2-eyebrow::before {
  content: ""; flex: 0 0 auto; order: -1;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 9px var(--green); opacity: .5;
}
.s2-eyebrow::after {
  content: ""; flex: 0 0 auto; align-self: center;
  width: 56px; height: 1px;
  background-color: rgba(86, 224, 138, 0.42);
  background-image: linear-gradient(90deg, transparent 0%, var(--green-bright) 50%, transparent 100%);
  background-repeat: no-repeat; background-size: 22px 100%; background-position: -26px 0;
  transform: scaleX(0); transform-origin: left center;
}
.s2-eyebrow.lit { opacity: 1; transform: none; }
.s2-eyebrow.lit::before { opacity: 1; }
.s2-eyebrow.lit::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .s2-eyebrow::after { transition: transform .75s var(--ease); }
  .s2-eyebrow.lit::before { animation: eyebrow-led 1.7s steps(1, end) infinite; }
  .s2-eyebrow.lit::after { animation: eyebrow-pulse 2.6s linear infinite .5s; }
}

.s2-lead {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 5vw, 68px); line-height: 1.06; letter-spacing: -0.02em;
  max-width: 17ch; color: var(--ink);
}
.s2-lead .w {
  display: inline-block; opacity: 0; transform: translateY(0.5em) scale(0.96); filter: blur(8px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
  will-change: opacity, transform, filter;
}
.s2-lead .w.accent { color: var(--green); }
.s2-lead .w.lit { opacity: 1; transform: none; filter: none; }
.s2-lead .w.accent.lit { text-shadow: 0 0 26px rgba(86,224,138,0.45); }

.s2-body {
  margin-top: clamp(32px, 5vh, 56px); max-width: 540px;
  opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.s2-body.lit { opacity: 1; transform: none; }
.s2-body p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--grey); }
.s2-meta { margin-top: 26px; display: flex; gap: 10px; align-items: center; }
.s2-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

@media (prefers-reduced-motion: reduce) {
  .s2 { height: auto; }
  .s2-stage { position: relative; height: auto; padding: var(--section-y) 0; }
  .s2-inner { justify-content: flex-start; }
  .s2-eyebrow, .s2-body { opacity: 1; transform: none; }
  .s2-lead .w { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   Section 3 — Scope of Services (scrollytelling, dark)
   ============================================================ */
.s3 { background: var(--surface-1); padding: clamp(40px,8vh,120px) 0 var(--section-y); position: relative; }
.s3::before {  /* faint telco line-art wash */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(86,224,138,0.025) 38px 39px),
    radial-gradient(60% 50% at 88% 18%, rgba(86,224,138,0.05), transparent 70%);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.s3 .grid { position: relative; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(32px, 6vw, 96px); }
.s3 .sticky { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 60px 0; }
.s3 .sticky h2 { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.04; }
.s3 .sticky .bi-en { font-size: clamp(14px, 1.4vw, 18px); margin-top: 14px; }
.s3 .sticky .progress { margin-top: 34px; display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--grey-dim); }
.s3 .sticky .progress .bar { width: 120px; height: 2px; background: var(--grey-faint); position: relative; overflow: hidden; }
.s3 .sticky .progress .bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--green); transition: width .4s var(--ease); }
.s3 .sticky .progress .count b { color: var(--green); }

.s3 .list { position: relative; padding-left: clamp(20px, 3vw, 44px); }
.s3 .list .rail { position: absolute; left: 0; top: calc(-1 * clamp(40px, 8vh, 120px)); bottom: calc(-1 * var(--section-y)); width: 2px; background: var(--grey-faint); }
.s3 .list .rail span { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(var(--green), var(--green-net)); box-shadow: 0 0 12px rgba(86,224,138,0.5); transition: height .5s var(--ease); }
.scope-item { padding: clamp(40px, 8vh, 86px) 0; opacity: .32; transition: opacity .5s var(--ease); }
.scope-item:first-child { padding-top: clamp(20px,4vh,40px); }
.scope-item.active { opacity: 1; }
.scope-item .num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.3em; color: var(--green); display: flex; align-items: center; gap: 14px; }
.scope-item .num::after { content: ""; height: 1px; width: 46px; background: var(--green); opacity: 0; transform: scaleX(0); transform-origin: left; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.scope-item.active .num::after { opacity: .7; transform: scaleX(1); }
.scope-item h3 { font-size: clamp(22px, 2.5vw, 34px); line-height: 1.1; margin: 18px 0 0; max-width: 18ch; }
.scope-item .desc { margin-top: 16px; font-size: 15.5px; line-height: 1.65; color: var(--grey); max-width: 46ch; }
.scope-item .desc .bi-en { color: var(--grey-dim); font-size: 14px; margin-top: 8px; }

/* ============================================================
   Section 4 — Peranan OSA (3D WebGL scene)
   Tall scroll section with a pinned canvas stage; camera dollies
   along a glowing fiber conduit linking 4 nodes. Tokenised.
   ============================================================ */
.s4 { position: relative; height: 300vh; background: #020304; border-top: 1px solid var(--hairline); }
.s4-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(26px, 5vh, 58px);
  background: radial-gradient(120% 80% at 50% 46%, #070b0c 0%, #040506 56%, #010203 100%);
}
.s4-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.s4-head .eyebrow { margin-bottom: 18px; justify-content: center; }
.s4-title {
  font-size: clamp(24px, 3vw, 40px); line-height: 1.16; letter-spacing: -0.02em;
  max-width: 900px; color: var(--ink); text-wrap: balance;
}
.s4-title .accent { color: var(--green); }
.s4-band { position: relative; width: 100%; height: clamp(340px, 62vh, 660px); }
.s4-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s4-foot { text-align: center; min-height: 56px; display: flex; justify-content: center; }
/* attractive CTA — fades + lifts in once the 4th node is reached */
.s4-cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 30px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  color: #fff; text-decoration: none; white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.06) 42%, transparent 72%),
    linear-gradient(165deg, rgba(86,224,138,0.94) 0%, rgba(31,138,82,0.96) 58%, rgba(18,92,56,0.97) 100%);
  border: 1px solid rgba(190,255,214,0.55);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 18px 46px -18px rgba(20,90,55,0.6);
  opacity: 0; transform: translateY(16px) scale(0.96); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .25s var(--ease);
}
.s4-cta.show { opacity: 1; transform: none; pointer-events: auto; }
.s4-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg); opacity: 0; transition: left .55s var(--ease);
}
.s4-cta > * { position: relative; z-index: 1; }
.s4-cta:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), 0 26px 58px -18px rgba(20,90,55,0.66), 0 0 0 1px rgba(86,224,138,0.4);
}
.s4-cta:hover::after { left: 130%; opacity: .9; }
.s4-cta-arr { transition: transform .25s var(--ease); }
.s4-cta:hover .s4-cta-arr { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .s4-cta { opacity: 1; transform: none; pointer-events: auto; } }

/* fixed explanation card — RIGHT side of the section, overlaying the 3D scene;
   icon (left) + text (right), liquid glass. The enlarged 3D node it describes
   is framed to its left. Content + icon swap on scroll. */
.s4-label {
  position: absolute; z-index: 3;
  right: clamp(18px, 4vw, 60px); left: auto; top: 50%; bottom: auto;
  width: min(400px, 44%);
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px; border: 1px solid rgba(255,255,255,0.16); border-radius: 18px;
  overflow: hidden;
  background: rgba(10,34,24,0.42);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  transform: translateY(-50%) translateX(18px); opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  box-shadow: 0 28px 70px -30px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.18);
}
.s4-label::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 40%, transparent 72%);
}
.s4-label > * { position: relative; z-index: 1; }
.s4-label.show { opacity: 1; transform: translateY(-50%) translateX(0); }
.s4-label-icon {
  flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: 14px; border: 1px solid rgba(86,224,138,0.30);
  background: rgba(86,224,138,0.10); color: var(--green-bright);
  box-shadow: inset 0 0 18px rgba(86,224,138,0.18);
}
.s4-label-icon svg { width: 40px; height: 40px; display: block; }
.s4-label-icon.pop { animation: s4IconPop .5s var(--ease); }
@keyframes s4IconPop { 0% { transform: scale(0.55); opacity: 0; } 55% { transform: scale(1.16); } 100% { transform: scale(1); opacity: 1; } }
.s4-label-text { display: flex; flex-direction: column; min-width: 0; }
.s4-label-num { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.3em; color: var(--green); }
.s4-label-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); margin-top: 6px; }
.s4-label-desc { display: block; font-size: 12.5px; line-height: 1.45; color: var(--grey); margin-top: 7px; }

/* static fallback (mobile / reduced-motion / no WebGL) */
.s4-fallback { position: absolute; inset: 0; z-index: 1; display: none; flex-direction: column; justify-content: center; gap: clamp(36px,6vh,60px); padding: 0 var(--pad-x); }
.s4-fallback.on { display: flex; }
.s4-stage.fallback .s4-head, .s4-stage.fallback .s4-band, .s4-stage.fallback .s4-foot { display: none; }

/* the relay diagram (reused inside the fallback) */
.relay { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: clamp(8px,1.4vw,18px); max-width: 760px; }
.relay .node { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; padding: 14px 10px; border: 1px solid var(--grey-faint); border-radius: 4px; color: var(--grey); background: rgba(255,255,255,0.012); }
.relay .node.mid { color: #042012; background: var(--green); border-color: var(--green); font-weight: 600; box-shadow: 0 10px 30px -14px rgba(86,224,138,0.8); }
.relay .wire { position: relative; height: 2px; background: var(--grey-faint); overflow: hidden; }
.relay .wire span { position: absolute; inset: 0 0 0 0; background: linear-gradient(90deg, transparent, var(--green)); }
.chips { display: flex; flex-wrap: wrap; gap: 12px; max-width: 760px; }
.chip { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-bright); padding: 10px 16px; border: 1px solid var(--hairline); border-radius: 100px; background: rgba(86,224,138,0.05); }

/* ============================================================
   Section 5 — Impact stats (grey, counters)
   ============================================================ */
.s5 { background: var(--surface-3); padding: clamp(72px,11vh,140px) 0; border-top: 1px solid var(--hairline); }
.s5 .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px,3vw,48px); }
.stat { border-left: 1px solid var(--hairline); padding-left: clamp(16px,1.6vw,26px); }
.stat .val { font-family: var(--font-display); font-weight: 700; font-size: clamp(46px, 6vw, 86px); line-height: 0.95; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; }
.stat .val .unit { color: var(--green); font-size: 0.42em; margin-left: 4px; letter-spacing: 0; }
.stat .label { margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); line-height: 1.5; }
.stat .label .bi-en { color: var(--grey-dim); letter-spacing: 0.04em; margin-top: 4px; }
.s5 .foot { margin-top: clamp(40px,6vh,64px); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--grey-dim); }

/* ============================================================
   Section 6 — Vision (full-bleed pinned image)
   ============================================================ */
.s6 { position: relative; height: 320vh; background: var(--scene-0); }
.s6 .pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.s6 .bg { position: absolute; inset: -6% -2%; z-index: 0; }
.s6 .bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.s6 .grade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg-light-2) 0%, var(--bg-light-2) 6%, transparent 30%),
    linear-gradient(to top, rgba(18,26,22,0.86) 0%, rgba(18,26,22,0.60) 22%, rgba(18,26,22,0.32) 44%, rgba(18,26,22,0.10) 64%, transparent 80%),
    linear-gradient(100deg, rgba(18,26,22,0.62) 0%, rgba(18,26,22,0.22) 36%, transparent 64%); }
.s6 .pin .container { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(48px, 8vh, 110px); }
.s6 .vision { max-width: 22ch; }
.s6 .eyebrow { color: var(--green-deep); text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
.s6 .eyebrow::before { background: var(--green-deep); opacity: 0.95; box-shadow: 0 0 9px rgba(31,138,82,0.7); }
.s6 .eyebrow::after { background-color: rgba(31,138,82,0.5); background-image: linear-gradient(90deg, transparent, #4fd089, transparent); }
.s6 .vision h2 { font-size: clamp(30px, 5vw, 70px); line-height: 1.03; color: var(--ink); text-shadow: 0 2px 22px rgba(0,0,0,0.72), 0 1px 6px rgba(0,0,0,0.6); }
.s6 .vision h2 .accent { color: var(--green-bright); text-shadow: 0 2px 22px rgba(0,0,0,0.6), 0 0 26px rgba(86,224,138,0.35); }
.s6 .vision .bi-en { font-family: var(--font-body); font-weight: 400; font-size: clamp(16px,1.7vw,22px); line-height: 1.45; margin-top: 22px; color: rgba(235,255,240,0.78); max-width: 30ch; }
.s6 .missions { margin-top: clamp(40px,6vh,70px); display: grid; gap: 14px; max-width: 640px; counter-reset: m; }
.mission { display: flex; gap: 18px; align-items: flex-start; padding: 16px 20px; border-left: 2px solid rgba(86,224,138,0.5); background: rgba(20,28,24,0.42); backdrop-filter: blur(4px); border-radius: 0 6px 6px 0;
  opacity: 0; transform: translateX(-16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.mission.in { opacity: 1; transform: none; }
.mission .mi-num { counter-increment: m; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--green); padding-top: 3px; }
.mission .mi-num::before { content: "0" counter(m); }
.mission .mi-txt { font-size: 15px; line-height: 1.5; color: var(--ink); }
.mission .mi-txt .bi-en { color: rgba(235,255,240,0.6); font-size: 13.5px; margin-top: 5px; }

/* ============================================================
   Section 7 — Deployment partners (grey)
   ============================================================ */
.s7 { background: var(--surface-2); padding: var(--section-y) 0; border-top: 1px solid var(--hairline); }
.s7 .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(40px,6vh,64px); }
.s7 .head h2 { font-size: clamp(24px,3vw,40px); }
.s7 .head .bi-en { font-size: clamp(14px,1.3vw,17px); margin-top: 10px; }
.partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; }
.partner { background: var(--surface-1); min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; filter: grayscale(1) opacity(0.62); transition: filter .35s var(--ease), background .35s; }
.partner:hover { filter: none; background: var(--surface-3); }
.partner .logo { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.partner .logo b { color: var(--green); }
.partner .kind { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-dim); }

/* ============================================================
   Section 8 — Latest news (dark)
   ============================================================ */
.s8 { background: var(--surface-1); padding: var(--section-y) 0; border-top: 1px solid var(--hairline); }
.s8 .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px,5vh,56px); }
.s8 .head h2 { font-size: clamp(24px,3vw,40px); }
.s8 .head .bi-en { font-size: clamp(14px,1.3vw,17px); margin-top: 10px; }
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2vw,28px); }
.card { position: relative; display: flex; flex-direction: column; border: 1px solid rgba(20,60,40,0.10); border-radius: 24px; overflow: hidden; background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); text-decoration: none; box-shadow: 0 30px 80px -42px rgba(30,60,45,0.28), inset 0 1px 0 rgba(255,255,255,0.85); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.card::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: radial-gradient(75% 55% at 92% -10%, rgba(255,255,255,0.6), rgba(255,255,255,0.10) 22%, transparent 48%); }
.card:hover { transform: translateY(-5px); border-color: rgba(31,138,82,0.30); box-shadow: 0 44px 92px -40px rgba(30,60,45,0.34), 0 0 0 1px rgba(31,138,82,0.16), inset 0 1px 0 rgba(255,255,255,0.9); }
.card .thumb { aspect-ratio: 16/10; position: relative; }
.card .thumb image-slot,
.card .thumb img,
.card .thumb .thumb-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; background: transparent; }
.card .date { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-deep); }
.card h3 { font-size: 19px; line-height: 1.22; letter-spacing: -0.01em; color: var(--ink-dark); }
.card .excerpt { font-size: 14px; line-height: 1.6; color: var(--grey-dark); }
.card .more { margin-top: 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-dark); transition: color .2s; }
.card:hover .more { color: var(--green-deep); }
.news-cta { display: none; }   /* shown only as the final slide in the mobile carousel */

/* ============================================================
   Section 9 — Contact CTA (dark)
   ============================================================ */
.s9 { position: relative; background: var(--surface-1); padding: clamp(96px,15vh,200px) 0; border-top: 1px solid var(--hairline); overflow: hidden; }
.s9 .arc { position: absolute; right: -18%; top: 50%; transform: translateY(-50%); width: min(60vw, 760px); aspect-ratio: 1; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, transparent 58%, rgba(86,224,138,0.10) 60%, transparent 63%, transparent 70%, rgba(86,224,138,0.06) 72%, transparent 74%);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 60%); }
.s9 .grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px,6vw,90px); align-items: center; }
.s9 .invite { font-size: clamp(30px, 4.6vw, 64px); line-height: 1.05; max-width: 16ch; text-wrap: balance; }
.s9 .invite .accent { color: var(--green); }
.s9 .invite .bi-en { font-family: var(--font-body); font-weight: 400; font-size: clamp(16px,1.7vw,21px); line-height: 1.4; margin-top: 20px; color: var(--grey); max-width: 26ch; }
.s9 .cta { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; }
.contact-card { border: 1px solid var(--hairline); border-radius: 10px; padding: clamp(24px,3vw,36px); background: rgba(255,255,255,0.012); display: grid; gap: 20px; }
.contact-card .row .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--green); margin-bottom: 7px; }
.contact-card .row .v { font-size: 15px; line-height: 1.55; color: var(--ink); }
.contact-card .row .v a { color: var(--ink); text-decoration: none; transition: color .2s; }
.contact-card .row .v a:hover { color: var(--green-bright); }

/* ============================================================
   Section 10 — Footer (near-black)
   ============================================================ */
.ft { background: #020303; border-top: 1px solid var(--hairline); padding: clamp(64px,9vh,104px) 0 0; }
.ft .grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.1fr; gap: clamp(28px,4vw,64px); }
.ft .col h4 { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--grey-dim); margin-bottom: 18px; }
.ft .brand-col .brand { margin-bottom: 16px; }
.ft .brand-col p { font-size: 14px; line-height: 1.6; color: var(--grey); max-width: 34ch; }
.ft .col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ft .col ul a, .ft .col ul li { font-size: 14px; color: var(--grey); text-decoration: none; transition: color .2s; }
.ft .col ul a:hover { color: var(--green-bright); }
.ft .members { display: flex; flex-wrap: wrap; gap: 8px; }
.ft .members span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--grey); border: 1px solid var(--hairline); border-radius: 100px; padding: 7px 13px; }
.ft .social { display: flex; gap: 10px; margin-top: 18px; }
.ft .social svg { width: 17px; height: 17px; display: block; }
.ft .social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: 8px; color: var(--grey); text-decoration: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; transition: border-color .2s, color .2s, background .2s; }
.ft .social a:hover { color: var(--green-bright); border-color: var(--green); background: rgba(86,224,138,0.06); }
.ft .bar { margin-top: clamp(48px,7vh,80px); border-top: 1px solid var(--hairline); padding: 26px 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ft .bar .copy { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--grey-dim); }
.ft .bar .copy-col { display: flex; flex-direction: column; gap: 7px; }
.ft .bar .dev-credit {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--grey-dark); opacity: 0.5; text-decoration: none; width: max-content;
  transition: color .2s var(--ease), opacity .2s var(--ease);
}
.ft .bar .dev-credit:hover { opacity: 1; color: var(--green-deep); }
.ft .bar .switch { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--grey-dim); background: none; border: 0; cursor: pointer; }
.ft .bar .switch b { color: var(--green-bright); }

/* ============================================================
   v2 — LIGHT surface overrides (Sections 3, 5, 7)
   Placed after the originals so identical selectors win the cascade.
   ============================================================ */
.s3 { background: var(--bg-light); }
.s3::before {
  background:
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(20,60,40,0.030) 38px 39px),
    radial-gradient(60% 50% at 88% 18%, rgba(31,138,82,0.06), transparent 70%);
}
.s3 .eyebrow { color: var(--green-deep); }
.s3 .eyebrow::before { background: var(--green-deep); box-shadow: 0 0 8px rgba(31,138,82,0.45); }
.s3 .eyebrow::after { background-color: rgba(31,138,82,0.34); background-image: linear-gradient(90deg, transparent, var(--green-deep), transparent); }
.s3 .sticky h2 { color: var(--ink-dark); }
.s3 .sticky .progress { color: var(--grey-dark); }
.s3 .sticky .progress .bar { background: var(--hair-dark); }
.s3 .sticky .progress .bar span { background: var(--green-deep); }
.s3 .sticky .progress .count b { color: var(--green-deep); }
.s3 .list .rail { background: var(--hair-dark); }
.s3 .list .rail span { background: linear-gradient(var(--green-deep), var(--green-net)); box-shadow: 0 0 12px rgba(31,138,82,0.30); }
.scope-item .num { color: var(--green-deep); }
.scope-item .num::after { background: var(--green-deep); }
.scope-item h3 { color: var(--ink-dark); }
.scope-item .desc { color: var(--grey-dark); }

.s5 { background: var(--bg-light-2); border-top-color: var(--hair-dark); }
.s5 .stat { border-left-color: var(--hair-dark); }
.s5 .stat .val { color: var(--ink-dark); }
.s5 .stat .val .unit { color: var(--green-deep); }
.s5 .stat .label { color: var(--grey-dark); }
.s5 .foot { color: var(--grey-dark); }

.s7 {
  background: var(--bg-light);
  border-top: none;                /* remove the hard section divider line */
  position: relative;
  overflow: hidden;
  padding-top: clamp(150px, 20vh, 264px);
}
/* top band: continues the dark twilight water of the drawbridge image and
   fades into the light grey — a seamless dark→light handoff with a green
   shimmer echoing the bridge's reflections on the water. */
.s7::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 340px; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to bottom,
      #111a15 0%,
      #111a15 8%,
      #122620 20%,
      rgba(22,52,42,0.70) 38%,
      rgba(40,82,68,0.32) 58%,
      rgba(233,239,233,0) 84%),
    radial-gradient(150% 92% at 50% -4%, rgba(86,224,138,0.18), transparent 56%);
}
.s7 .container { position: relative; z-index: 1; }
.s7 .eyebrow { color: var(--green-deep); }
.s7 .eyebrow::before { background: var(--green-deep); box-shadow: 0 0 8px rgba(31,138,82,0.45); }
.s7 .eyebrow::after { background-color: rgba(31,138,82,0.34); background-image: linear-gradient(90deg, transparent, var(--green-deep), transparent); }
.s7 .head h2 { color: var(--ink-dark); }
.s7 .ghost-link { color: var(--green-deep); }
.s7 .ghost-link:hover { color: #0c5c34; }
.s7 .partners { background: var(--hair-dark); border-color: var(--hair-dark); }
.s7 .partner { background: var(--bg-light); filter: grayscale(1) opacity(0.55); }
.s7 .partner:hover { filter: none; background: var(--bg-light-2); }
.s7 .partner .logo { color: var(--ink-dark); }
.s7 .partner .logo b { color: var(--green-deep); }
.s7 .partner .kind { color: var(--grey-dark); }

/* ============================================================
   Light theme overrides — Sections 8, 9, Footer
   (placed last so identical selectors win the cascade)
   ============================================================ */
/* Section 8 — Latest news (light) */
.s8 { background: var(--bg-light); border-top-color: var(--hair-dark); }
.s8 .eyebrow { color: var(--green-deep); }
.s8 .eyebrow::before { background: var(--green-deep); box-shadow: 0 0 8px rgba(31,138,82,0.45); }
.s8 .eyebrow::after { background-color: rgba(31,138,82,0.34); background-image: linear-gradient(90deg, transparent, var(--green-deep), transparent); }
.s8 .head h2 { color: var(--ink-dark); }
.s8 .ghost-link { color: var(--green-deep); }
.s8 .ghost-link:hover { color: #0c5c34; }

/* Section 9 — Contact CTA (light) */
.s9 { background: var(--bg-light-2); border-top-color: var(--hair-dark); }
.s9 .arc {
  background: radial-gradient(circle, transparent 58%, rgba(31,138,82,0.12) 60%, transparent 63%, transparent 70%, rgba(31,138,82,0.07) 72%, transparent 74%);
}
.s9 .eyebrow { color: var(--green-deep); }
.s9 .eyebrow::before { background: var(--green-deep); box-shadow: 0 0 8px rgba(31,138,82,0.45); }
.s9 .eyebrow::after { background-color: rgba(31,138,82,0.34); background-image: linear-gradient(90deg, transparent, var(--green-deep), transparent); }
.s9 .invite { color: var(--ink-dark); }
.s9 .invite .accent { color: var(--green-deep); }
.s9 .contact-card {
  position: relative; overflow: hidden; border-radius: 16px;
  background: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 30px 80px -42px rgba(30,60,45,0.34);
}
.s9 .contact-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.08) 30%, transparent 60%),
    radial-gradient(120% 70% at 0% 0%, rgba(86,224,138,0.10), transparent 52%);
}
.s9 .contact-card > * { position: relative; z-index: 1; }
.s9 .contact-card .row .k { color: var(--green-deep); }
.s9 .contact-card .row .v { color: var(--ink-dark); }
.s9 .contact-card .row .v a { color: var(--ink-dark); }
.s9 .contact-card .row .v a:hover { color: var(--green-deep); }

/* Section 10 — Footer (light grey) */
.ft { background: var(--bg-light); border-top-color: var(--hair-dark); }
.ft .col h4 { color: var(--grey-dark); }
.ft .brand-col .brand .mark { color: var(--ink-dark); }
.ft .brand-col .brand .mark b { color: var(--green-deep); }
.ft .brand-col .brand .tld { color: var(--grey-dark); }
.ft .brand-col p { color: var(--grey-dark); }
.ft .col ul a, .ft .col ul li { color: var(--grey-dark); }
.ft .col ul a:hover { color: var(--green-deep); }
.ft .members span { color: var(--grey-dark); border-color: var(--hair-dark); }
.ft .social a { color: var(--grey-dark); border-color: var(--hair-dark); }
.ft .social a:hover { color: var(--green-deep); border-color: var(--green-deep); background: rgba(31,138,82,0.06); }
.ft .bar { border-top-color: var(--hair-dark); }
.ft .bar .copy { color: var(--grey-dark); }

/* typewriter caret for the mobile stat labels */
.tw-caret { display: inline-block; margin-left: 1px; color: var(--green-deep); font-weight: 400; animation: twBlink 1s steps(1) infinite; }
@keyframes twBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .s3 .grid { grid-template-columns: 1fr; }
  .s3 .sticky { position: relative; height: auto; padding: 0 0 28px; }
  .s3 .list .rail { top: 0; bottom: 0; }
  /* ---- Section 5: stats auto-slide on vertical scroll (pinned carousel) ---- */
  .s5 { height: 260vh; padding: 0; position: relative; }
  .s5 .container {
    position: sticky; top: 0; height: 100vh; max-width: none; padding: 0;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
  }
  .s5 .row {
    display: flex; flex-wrap: nowrap; width: max-content;
    grid-template-columns: none; gap: 16px;
    padding: 0 11vw; will-change: transform;
  }
  .s5 .stat {
    flex: 0 0 78vw;
    border-left: 0; padding: clamp(22px,6vw,30px);
    border-radius: 18px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(255,255,255,0.72);
    -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: 0 24px 60px -34px rgba(30,60,45,0.34), inset 0 1px 0 rgba(255,255,255,0.82);
  }
  /* pinned carousel keeps all cards mounted — show them */
  .s5 .stat.reveal { opacity: 1; transform: none; }

  /* ---- Section 8: news cards slide in one-by-one on vertical scroll (pinned) ---- */
  .s8 { height: 340vh; padding: 0; position: relative; }
  .s8 .container {
    position: sticky; top: 0; height: 100vh; max-width: none; padding: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 20px;
    overflow: hidden;
  }
  .s8 .head { margin: 0; padding: 0 var(--pad-x); }
  .s8 .ghost-link { display: none; }      /* the last slide is the "all news" link */
  .news {
    display: flex; flex-wrap: nowrap; width: max-content;
    grid-template-columns: none; gap: 16px;
    padding: 0 11vw; will-change: transform;
  }
  .news .card { flex: 0 0 80vw; }
  .news .card.reveal { opacity: 1; transform: none; }
  .news-cta {
    display: flex; flex: 0 0 80vw; flex-direction: column; justify-content: center; gap: 12px;
    padding: 36px 30px; border-radius: 24px; text-decoration: none;
    border: 1px solid rgba(31,138,82,0.30);
    background: linear-gradient(165deg, rgba(86,224,138,0.18), rgba(31,138,82,0.10));
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 28px 70px -40px rgba(30,60,45,0.4), inset 0 1px 0 rgba(255,255,255,0.7);
  }
  .news-cta .nc-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--green-deep); }
  .news-cta .nc-label { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.05; color: var(--ink-dark); }
  .news-cta .nc-sub { font-size: 14px; line-height: 1.55; color: var(--grey-dark); max-width: 26ch; }
  .news-cta .nc-go { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); }
  .news-cta .nc-arr { font-size: 18px; transition: transform .25s var(--ease); }
  .news-cta:active .nc-arr { transform: translateX(4px); }
  .s9 .grid { grid-template-columns: 1fr; }
  .ft .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .partners { grid-template-columns: repeat(2, 1fr); }
  .relay { grid-template-columns: 1fr; gap: 12px; max-width: 320px; }
  .relay .wire { height: 28px; width: 2px; justify-self: center; }
  .relay .wire span { inset: 100% 0 0 0; background: linear-gradient(180deg, transparent, var(--green)); }
  .relay.in .wire span { inset: 0 0 0 0; }
  .s6 { height: auto; }
  .s6 .pin { position: relative; height: auto; min-height: 100vh; padding: 120px 0; }

  /* ---- Section 4: scene pans on vertical scroll (pinned) on mobile ---- */
  .s4 { height: 300vh; }
  .s4-stage {
    position: sticky; height: 100vh; top: 0;
    justify-content: center; gap: 14px;
    padding: clamp(76px, 12vh, 110px) 0 clamp(20px, 5vh, 40px);
  }
  .s4-band { height: 54svh; }
  /* mobile: fixed card sits at the bottom, content tracks the scroll-panned node */
  .s4-label {
    left: 50%; right: auto; top: auto; bottom: 18px;
    width: min(92%, 460px); max-width: 460px;
    transform: translateX(-50%) translateY(12px);
    transition: opacity .4s var(--ease), transform .4s var(--ease), bottom .4s var(--ease);
  }
  .s4-label.show { transform: translateX(-50%) translateY(0); }
  /* CTA is anchored to the bottom of the pinned stage (overlay, not a flow item) */
  .s4-foot {
    position: absolute; left: 0; right: 0; bottom: 22px; z-index: 4;
    min-height: 0; padding: 0 22px; pointer-events: none;
  }
  .s4-foot .s4-cta { pointer-events: auto; }
  /* when the CTA appears (node 04), lift the card so it sits above the button */
  .s4-stage.s4-has-cta .s4-label { bottom: 98px; }
  /* the horizontal swipe layer is only for the no-WebGL / reduced fallback now */
  .s4-stage:not(.fallback) .s4-swipe,
  .s4-stage:not(.fallback) .s4-dots { display: none; }

  .s4-swipe {
    position: absolute; inset: 0; z-index: 2;
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .s4-swipe::-webkit-scrollbar { display: none; }
  .s4-slot {
    flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    padding: 0 22px clamp(14px, 3vh, 26px); pointer-events: auto;
  }
  .s4-card {
    pointer-events: auto; width: 100%; max-width: 440px; position: relative; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.16); border-radius: 14px;
    background: rgba(10,34,24,0.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    padding: 15px 18px 17px;
    box-shadow: 0 18px 50px -26px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.16);
    opacity: 0.32; transform: translateY(12px) scale(0.97);
    transition: opacity .42s var(--ease), transform .42s var(--ease);
  }
  .s4-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 42%, transparent 70%); }
  .s4-card > span { position: relative; z-index: 1; }
  .s4-slot.active .s4-card { opacity: 1; transform: none; }
  .s4-card-num { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.3em; color: var(--green); }
  .s4-card-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.15; color: var(--ink); margin-top: 7px; }
  .s4-card-desc { display: block; font-size: 13px; line-height: 1.5; color: var(--grey); margin-top: 8px; }

  .s4-dots {
    position: absolute; left: 0; right: 0; bottom: 6px; z-index: 3;
    display: flex; gap: 8px; justify-content: center; pointer-events: none;
  }
  .s4-dots i {
    width: 6px; height: 6px; border-radius: 50%; display: block;
    background: rgba(86,224,138,0.28); transition: background .3s, width .3s;
  }
  .s4-dots i.on { background: var(--green); width: 18px; border-radius: 4px; }

  /* WebGL-off fallback: cards become a clean horizontal scroll-snap row */
  .s4-stage.fallback .s4-band { height: auto; min-height: 46svh; }
  .s4-stage.fallback .s4-slot { justify-content: center; }
  .s4-stage.fallback .s4-card { opacity: 1; transform: none; }
  /* reduced-motion: stack all four, no swipe needed */
  .s4-swipe.static {
    position: relative; flex-direction: column; overflow: visible;
    scroll-snap-type: none; gap: 12px; padding: 8px 22px 4px;
  }
  .s4-swipe.static .s4-slot { flex: none; width: 100%; padding: 0; }
  .s4-swipe.static .s4-card { opacity: 1; transform: none; max-width: none; }
  .s4-swipe.static ~ .s4-dots { display: none; }
}

/* desktop / tablet: the swipe layer and dots never show */
@media (min-width: 761px) {
  .s4-swipe, .s4-dots { display: none; }
}
@media (max-width: 560px) {
  .ft .grid { grid-template-columns: 1fr; }
}