/* ============================================================
   NBG x TikTok GO, Creator Landing Page
   Design system: bg #0A0B0A · lime #C8FF00 · text #F4F5EF
   Display: Sora · Body: Inter · Data: IBM Plex Mono
   ============================================================ */

:root {
  --bg:   #0A0B0A;
  --bg2:  #111311;
  --bg3:  #171A16;
  --line: #262922;
  --lime: #C8FF00;
  --lime-dim: #9ABF1A;
  --ink:  #F4F5EF;
  --mut:  #8E9387;
  --mut2: #5E6258;
  --disp: 'Sora', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --cta-url: '#join'; /* swap via JS with Dub.co short link */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lime);
}
h1, h2, h3 {
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
}
section { padding: clamp(64px, 9vw, 104px) 0; position: relative; }
.sec-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 48px); }
.sec-head h2 { font-size: clamp(28px, 4vw, 46px); margin: 14px 0; }
.sec-head p { color: var(--mut); font-size: 18px; }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
  background: var(--lime);
  color: #0A0B0A;
  padding: 14px 26px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(200,255,0,.25); }
.btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn.ghost:hover { border-color: var(--lime); box-shadow: none; }

/* ---- NAV ---- */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10,11,10,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.logo { display: flex; align-items: center; gap: 12px; font-family: var(--disp); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.logo a { display: flex; align-items: center; gap: 12px; }
.logo-mark { height: 34px; width: auto; display: block; }
.logo-mark.lg { height: 44px; }
.logo-x { color: var(--mut); font-weight: 400; font-size: 13px; }
@media (max-width: 520px) {
  .logo-mark { height: 28px; }
  .logo-x { display: none; }
}
.navlinks { display: flex; gap: 28px; font-size: 14px; color: var(--mut); }
.navlinks a:hover { color: var(--ink); }
.navlinks a:focus-visible { outline: 2px solid var(--lime); border-radius: 3px; }
.nav-cta { font-size: 14px; padding: 9px 18px; }
/* logo lockup is wider than the old wordmark: hide the links sooner so the nav never crowds */
@media (max-width: 980px) { .navlinks { display: none; } }

/* ---- TRUST BADGE ---- */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(200,255,0,.35);
  background: rgba(200,255,0,.06);
  border-radius: 100px;
  padding: 7px 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--lime);
  margin-bottom: 22px;
}
.trust-badge svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---- HERO, single full-bleed image with Ken-Burns drift ---- */
.hero {
  position: relative;
  min-height: clamp(560px, 82vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0A0B0A;
  border-bottom: 1px solid var(--line);
}
.hero-bg {
  position: absolute;
  inset: 0;
  /* lime-tinted gradient shows through if hero.jpg is missing */
  background: linear-gradient(160deg, #1c2018, #0c0f0a);
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 62% 42%;
  filter: grayscale(.3) brightness(.72) contrast(1.04) saturate(1.05);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-bg img { animation: kenburns 12s ease-in-out infinite alternate; }
}
@keyframes kenburns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.08); }
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 100% at 14% 96%, rgba(10,11,10,.96), transparent 60%),
    linear-gradient(90deg, rgba(10,11,10,.92), transparent 70%),
    linear-gradient(0deg, rgba(10,11,10,.92), transparent 52%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 0 clamp(48px, 7vw, 72px); }
.hero h1 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(40px, 6.6vw, 74px);
  letter-spacing: -.035em;
  text-transform: lowercase;
  line-height: 1.02;
  max-width: 17ch;
}
.hero h1 em { font-style: normal; color: var(--lime); }
.hero .eyebrow { text-transform: lowercase; margin-bottom: 20px; }
.hero-kicker {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 19px);
  letter-spacing: -.01em;
  color: var(--lime);
  margin: 22px 0 0;
}
.hero-kicker span { color: var(--ink); }
.hero-cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 600px) {
  .hero { min-height: 76vh; }
  .hero-inner { padding-bottom: 44px; }
  .hero h1 { max-width: 100%; }
}

/* ---- PROOF ---- */
.proof {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
}
.proof .wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding-top: 46px;
  padding-bottom: 46px;
}
.stat { padding: 8px 14px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; }
.stat .num {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px);
  color: var(--lime);
  letter-spacing: -.02em;
}
.stat .lbl { font-size: 13px; color: var(--mut); margin-top: 4px; }
.proof-label {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: var(--mut);
  padding-bottom: 22px;
}
@media (max-width: 860px) {
  .proof .wrap { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .stat { border-left: none; }
  .proof-label { grid-column: 1 / -1; }
}

/* ---- VIDEO ROW ---- */
.vrow {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 24px 22px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.vrow::-webkit-scrollbar { height: 8px; }
.vrow::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

.vcard {
  flex: 0 0 210px;
  scroll-snap-align: start;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #1c2018, #0d0f0c);
  display: block;
  transition: transform .18s ease, border-color .18s;
}
.vcard:hover { transform: translateY(-4px) scale(1.03); border-color: var(--lime); }
.vcard:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.vcard .thumb-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity .4s ease;
  opacity: 0;
}
.vcard .thumb-bg.loaded { opacity: 1; }
.vcard .thumb-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #1c2018 30%, #252b1f 50%, #1c2018 70%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .vcard .thumb-skeleton { animation: shimmer 1.5s infinite; }
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.vcard .grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(200,255,0,.04), transparent 35%, rgba(0,0,0,.82));
}
.vcard .play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(200,255,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}
.vcard:hover .play { transform: translate(-50%, -50%) scale(1.1); }
.vcard .play svg { width: 20px; height: 20px; margin-left: 3px; }
.vcard .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; }
.vcard .h { font-family: var(--mono); font-size: 12px; color: var(--lime); font-weight: 600; }
.vcard .ht { font-size: 13px; font-weight: 600; margin: 5px 0 8px; line-height: 1.25; }
.vcard .row { display: flex; gap: 8px; flex-wrap: wrap; }
.vcard .pill {
  font-family: var(--mono);
  font-size: 11px;
  background: rgba(255,255,255,.08);
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--ink);
}
.vcard .pill.sale { background: rgba(200,255,0,.16); color: var(--lime); }
.vnote { font-family: var(--mono); font-size: 12px; color: var(--mut2); text-align: center; margin-top: 6px; }

/* ---- HOW IT WORKS, clean numbered steps ---- */
.steps-3 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
/* thin hairline connecting the icon row across the three steps */
.steps-line {
  position: absolute;
  left: 28px; right: 28px;
  top: 95px;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.step { position: relative; z-index: 1; }
.step-num {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 46px;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--lime);
}
.step-ic {
  width: 54px; height: 54px;
  margin: 18px 0 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg2);   /* opaque, masks the hairline so it reads as a connector */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lime);
}
.step-ic svg { width: 26px; height: 26px; }
.step h3 { font-size: 19px; margin-bottom: 9px; letter-spacing: -.01em; }
.step p { font-size: 14.5px; color: var(--mut); line-height: 1.6; max-width: 34ch; }
@media (max-width: 860px) {
  .steps-3 { grid-template-columns: 1fr; gap: 30px; max-width: 460px; margin: 0 auto; }
  .steps-line { display: none; }
}

/* ---- WHAT YOU GET, vibe cards (wide, never 9:16) ---- */
.vibes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vibe {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .2s ease, border-color .2s ease;
}
.vibe:hover { transform: translateY(-4px); border-color: var(--lime); }
.vibe:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.vibe-img {
  position: absolute; inset: 0;
  /* lime-tinted gradient fallback if the photo is missing */
  background: linear-gradient(160deg, #1c2018, #0c0f0a);
}
.vibe-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); }
.vibe-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,11,10,.97) 4%, rgba(10,11,10,.6) 42%, rgba(10,11,10,.18) 100%);
  transition: background .2s ease;
}
.vibe:hover .vibe-scrim { background: linear-gradient(0deg, rgba(10,11,10,.97) 4%, rgba(10,11,10,.55) 44%, rgba(200,255,0,.05) 100%); }
.vibe-text { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; }
.vibe-label {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--ink);
}
.vibe-sub { font-size: 13.5px; color: var(--mut); margin-top: 6px; line-height: 1.45; }
@media (max-width: 860px) { .vibes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .vibes { grid-template-columns: 1fr; } }

/* ---- COMPOUNDING, growth trend beside the copy ---- */
/* shorter than a full section: the copy carries the weight, the chart supports it */
#compound { padding: clamp(48px, 6vw, 72px) 0; }
.cmp-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.growth {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 24px;
}
.growth-svg { display: block; width: 100%; height: 208px; overflow: visible; }
.growth-grid line { stroke: var(--line); stroke-width: 1; opacity: .45; }

.cmp-copy h2 {
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.06;
  margin: 14px 0;
}
.cmp-copy > p { color: var(--mut); font-size: 19px; line-height: 1.5; }

/* The curve climbs from month 0 to month 12, holds at the top, fades and
   repeats, so the section always reads as growth rather than a static chart.
   The group opacity hides the reset; the dot rides the line via animateMotion. */
/* pathLength="1" on the path normalises these, so the draw stays in sync
   with the dot no matter how the curve geometry changes. */
.growth-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.growth-area { opacity: 1; }
.growth-anim { opacity: 0; }
.growth-clip { width: 0; }
/* Same curve as #growthPath above. Kept in sync by hand: if the path data
   changes, change it here too. */
.growth-dot {
  offset-path: path("M12,256 C20,255.5 44,254.5 60,253 C76,251.5 92,250 108,247 C124,244 140,240 156,235 C172,230 188,223.5 204,217 C220,210.5 236,204.5 252,196 C268,187.5 284,176 300,166 C316,156 332,146 348,136 C364,126 380,115 396,106 C412,97 428,90 444,82 C460,74 476,65.5 492,58 C508,50.5 524,44 540,37 C556,30 580,19.5 588,16");
  offset-rotate: 0deg;
  offset-distance: 0%;
}

.reveal.in .growth-anim  { animation: growth-cycle 6s ease-in-out infinite; }
.reveal.in .growth-line  { animation: growth-draw  6s cubic-bezier(.33,.1,.4,1) infinite; }
.reveal.in .growth-clip  { animation: growth-clip  6s cubic-bezier(.33,.1,.4,1) infinite; }
.reveal.in .growth-dot   { animation: growth-ride  6s cubic-bezier(.33,.1,.4,1) infinite; }

/* The curve climbs for the first ~55% of the cycle, then holds complete for
   the rest. Only the last 300ms fades out before it regrows, so the panel is
   showing a finished curve nearly the whole time rather than sitting empty. */
@keyframes growth-cycle {
  0%          { opacity: 0; }
  3%          { opacity: 1; }
  95%         { opacity: 1; }
  100%        { opacity: 0; }
}
@keyframes growth-draw {
  0%          { stroke-dashoffset: 1; }
  55%, 100%   { stroke-dashoffset: 0; }
}
@keyframes growth-clip {
  0%          { width: 0; }
  55%, 100%   { width: 600px; }
}
@keyframes growth-ride {
  0%          { offset-distance: 0%; }
  55%, 100%   { offset-distance: 100%; }
}

/* Motion off: show the finished curve, no cycling. */
@media (prefers-reduced-motion: reduce) {
  .growth-line { stroke-dashoffset: 0; }
  .growth-area, .growth-anim { opacity: 1; }
  .growth-clip { width: 600px; }
  .growth-dot { offset-distance: 100%; }
  .reveal.in .growth-anim,
  .reveal.in .growth-line,
  .reveal.in .growth-clip,
  .reveal.in .growth-dot { animation: none; }
  .growth-dot { display: none; }
}

@media (max-width: 860px) {
  .cmp-grid { grid-template-columns: 1fr; }
  .growth { order: 2; }
  .cmp-copy { order: 1; }
  .growth-svg { height: 180px; }
}

/* ---- SUCCESS STORIES, creator cards ---- */
.creators {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.creator {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, transform .18s ease;
}
.creator:hover { border-color: rgba(200,255,0,.35); transform: translateY(-3px); }
/* Cards are text-only: the handle line and status badge share the top row. */
.creator-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.creator-badge {
  flex: none;
  background: var(--lime); color: #0A0B0A;
  font-family: var(--mono); font-weight: 600; font-size: 10px;
  letter-spacing: .03em;
  padding: 5px 11px; border-radius: 100px;
  white-space: nowrap;
}
.creator-hd { font-family: var(--mono); font-size: 12.5px; line-height: 1.45; color: var(--lime); min-width: 0; }
.creator-body { padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.creator-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.creator-tag {
  font-family: var(--mono); font-size: 11px;
  background: rgba(200,255,0,.12); color: var(--lime);
  padding: 4px 10px; border-radius: 100px;
  white-space: nowrap;
}
.creator-bio { font-size: 13.5px; color: var(--mut); font-style: italic; line-height: 1.5; margin: 0; }
/* Each creator's proof is a different shape (earnings, GMV, orders, views),
   so this is one free-text headline rather than a comparable bar. */
.creator-stat {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--disp);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
  color: var(--lime);
  letter-spacing: -.01em;
}
.honest { font-size: 13px; color: var(--mut2); margin-top: 24px; font-style: italic; }
@media (max-width: 860px) { .creators { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
@media (min-width: 861px) and (max-width: 1040px) { .creators { grid-template-columns: 1fr 1fr; } }

/* ---- MAP ---- */
.maphead { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px; margin-bottom: 24px; }
.toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 100px;
  overflow: hidden;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 13px;
}
.toggle button { background: transparent; color: var(--mut); border: none; padding: 10px 18px; cursor: pointer; }
.toggle button.on { background: var(--lime); color: #0A0B0A; }
.toggle button:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
/* The headline carries this section; the map is supporting evidence, so it
   sits narrower, shorter and quieter than the full-bleed version. */
.mapgrid { display: grid; grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }

#mapviz {
  background: transparent;
  border: none;
  border-radius: 14px;
  padding: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  opacity: .82;
  transition: opacity .3s ease;
}
#mapviz:hover { opacity: 1; }
.map-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(10,11,10,.94);
  border: 1px solid var(--lime);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .12s;
  z-index: 10;
}
.map-tooltip .tt-city { font-weight: 600; color: var(--lime); font-size: 13px; }
.map-tooltip .tt-cnt { color: var(--mut); margin-top: 2px; }
.map-zoom {
  position: absolute;
  bottom: 14px; right: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}
.map-zoom button {
  width: 30px; height: 30px;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}
.map-zoom { opacity: .5; transition: opacity .3s ease; }
#mapviz:hover .map-zoom { opacity: 1; }
.map-zoom button:hover { border-color: var(--lime); color: var(--lime); }
.map-zoom button:focus-visible { outline: 2px solid var(--lime); }
.map-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  fill: rgba(244,245,239,.5);
  pointer-events: none;
  text-anchor: middle;
}

/* dot pulse */
@keyframes dot-pulse {
  0%, 100% { opacity: .45; }
  50%        { opacity: .85; }
}
.dot-pulse { animation: dot-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dot-pulse { animation: none; } }

#map { padding: clamp(48px, 6vw, 76px) 0; }
.mapnote { font-family: var(--mono); font-size: 11px; color: var(--mut2); margin: 14px auto 0; max-width: 760px; }
@media (max-width: 860px) {
  #mapviz { min-height: 320px; }
}

/* ---- COMMUNITY GALLERY, real event photos ---- */
.gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 200px);
  gap: 12px;
}
.gal figure {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  margin: 0;
  /* lime-tinted gradient fallback shows if the photo is missing */
  background: linear-gradient(160deg, #1c2018, #0c0f0a);
}
/* lead tile (event-01) is the largest: 2 cols x 2 rows */
.gal .big { grid-column: span 2; grid-row: span 2; }
.gal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 12.5px; line-height: 1.35;
  padding: 24px 14px 12px;
  background: linear-gradient(transparent, rgba(10,11,10,.92));
  color: var(--ink);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
/* desktop: caption on hover/focus */
.gal figure:hover figcaption,
.gal figure:focus-within figcaption { opacity: 1; transform: none; }
/* touch devices: keep captions visible */
@media (hover: none) { .gal figcaption { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gal .big { grid-column: span 2; grid-row: span 2; }
  .gal figcaption { opacity: 1; transform: none; }
}

/* ---- FAQ ---- */
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary {
  font-family: var(--disp); font-weight: 600; font-size: 17px;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--lime); font-size: 22px; font-weight: 300; }
.faq details[open] summary::after { content: '\2212'; }
.faq summary:focus-visible { outline: 2px solid var(--lime); border-radius: 3px; }
.faq p { color: var(--mut); font-size: 15px; margin-top: 12px; max-width: 70ch; }

/* ---- FINAL CTA ---- */
.final {
  text-align: center;
  background: radial-gradient(700px 360px at 50% 120%, rgba(200,255,0,.12), transparent 60%);
}
.final h2 { font-size: clamp(30px, 5vw, 56px); font-weight: 800; max-width: 16ch; margin: 0 auto 18px; }
.final p { color: var(--mut); font-size: 18px; margin-bottom: 30px; }

/* ---- JOIN FORM ---- */
.joinform {
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(22px, 3vw, 32px);
}
.jf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jf-field { display: block; margin-bottom: 16px; }
.jf-field > span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 8px;
}
.jf-field input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.jf-field input::placeholder { color: var(--mut2); }
.jf-field input:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(200,255,0,.14);
}
.jf-field input.invalid { border-color: #FF6B57; }
.jf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jf-submit { width: 100%; justify-content: center; font-size: 16px; padding: 15px 28px; margin-top: 6px; }
.jf-submit[disabled] { opacity: .6; cursor: not-allowed; }
.jf-status {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 14px 0 0;
  min-height: 1.2em;
  color: var(--mut);
}
.jf-status.ok  { color: var(--lime); }
.jf-status.err { color: #FF6B57; }
.jf-fine {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mut2);
  margin: 14px 0 0;
  line-height: 1.5;
}
.joinform.sent .jf-row, .joinform.sent .jf-field, .joinform.sent .jf-submit, .joinform.sent .jf-fine { display: none; }
.joinform.sent .jf-status { font-size: 15px; text-align: center; }

@media (max-width: 560px) {
  .jf-row { grid-template-columns: 1fr; gap: 0; }
}

/* ---- FOOTER ---- */
footer { border-top: 1px solid var(--line); padding: 40px 0; background: var(--bg2); }
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
footer .fl { display: flex; gap: 22px; font-size: 14px; color: var(--mut); }
footer .cp { font-family: var(--mono); font-size: 12px; color: var(--mut2); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero {
  padding: 86px 0 64px;
  background: radial-gradient(900px 520px at 78% -10%, rgba(200,255,0,.10), transparent 60%);
  border-bottom: 1px solid var(--line);
}
.about-hero .eyebrow { text-transform: lowercase; }
.about-hero h1 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(38px, 6vw, 68px);
  letter-spacing: -.035em;
  text-transform: lowercase;
  line-height: 1.02;
  max-width: 15ch;
  margin: 18px 0 0;
}
.about-hero h1 em { font-style: normal; color: var(--lime); }
.about-hero .lead { color: var(--mut); font-size: clamp(16px, 2vw, 20px); max-width: 62ch; margin: 26px 0 0; }

.partner-callout {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--lime);
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 36px;
  max-width: 760px;
}
.partner-callout svg { width: 26px; height: 26px; color: var(--lime); flex-shrink: 0; }
.partner-callout p { font-size: 15.5px; color: var(--ink); }
.partner-callout b { color: var(--lime); }

.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat-card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
}
.stat-card .sc-num {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(30px, 4vw, 42px);
  color: var(--lime); letter-spacing: -.02em;
}
.stat-card .sc-lbl { font-size: 14px; color: var(--mut); margin-top: 8px; line-height: 1.45; }
@media (max-width: 860px) { .about-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .about-stats { grid-template-columns: 1fr; } }

.mission { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mission-card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
}
.mission-card .mc-ic { width: 30px; height: 30px; color: var(--lime); margin-bottom: 14px; }
.mission-card h3 { font-size: 17px; margin-bottom: 7px; }
.mission-card p { font-size: 13.5px; color: var(--mut); line-height: 1.5; }
@media (max-width: 860px) { .mission { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .mission { grid-template-columns: 1fr; } }

.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.case {
  background: linear-gradient(160deg, var(--bg3), var(--bg2));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
}
.case .case-ey { font-family: var(--mono); font-size: 12px; color: var(--lime); letter-spacing: .12em; text-transform: uppercase; }
.case h3 { font-family: var(--disp); font-weight: 700; font-size: 24px; margin: 10px 0 4px; letter-spacing: -.02em; }
.case .case-sub { font-size: 13.5px; color: var(--mut); margin-bottom: 22px; }
.case .case-metrics { display: flex; gap: 26px; flex-wrap: wrap; }
.case .cm .v { font-family: var(--disp); font-weight: 800; font-size: 26px; color: var(--ink); letter-spacing: -.02em; }
.case .cm .k { font-size: 12px; color: var(--mut); margin-top: 2px; }
@media (max-width: 760px) { .cases { grid-template-columns: 1fr; } }

/* nav active state (About page) */
.navlinks a[aria-current="page"] { color: var(--lime); }

/* ---- ABOUT, hero band over a photo ---- */
.about-band {
  position: relative;
  min-height: clamp(440px, 60vh, 600px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.band-bg { position: absolute; inset: 0; background: linear-gradient(160deg, #1c2018, #0c0f0a); }
.band-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.9); }
.band-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,11,10,.96) 0%, rgba(10,11,10,.86) 36%, rgba(10,11,10,.4) 78%, rgba(10,11,10,.25) 100%);
}
.about-band .wrap { position: relative; z-index: 2; padding-top: 40px; padding-bottom: 40px; }
.about-band h1 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(38px, 6vw, 66px);
  letter-spacing: -.035em;
  text-transform: lowercase;
  line-height: 1.02;
  max-width: 16ch;
  margin: 18px 0 0;
}
.about-band h1 em { font-style: normal; color: var(--lime); }
.about-band .lead { color: var(--mut); font-size: clamp(16px, 2vw, 19px); max-width: 56ch; margin: 22px 0 0; line-height: 1.6; }

/* ---- ABOUT, network stats (5-up) ---- */
.netstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 980px) { .netstats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .netstats { grid-template-columns: repeat(2, 1fr); } }

/* ---- ABOUT, global presence ---- */
.hubs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.hub { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.hub .hub-co { font-family: var(--disp); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.hub .hub-city { font-family: var(--mono); font-size: 12px; color: var(--lime); margin-top: 6px; letter-spacing: .04em; }
@media (max-width: 760px) { .hubs { grid-template-columns: 1fr 1fr; } }

/* ---- ABOUT, growth timeline ---- */
.timeline { position: relative; max-width: 720px; margin: 0 auto; padding-left: 36px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 30px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-node {
  position: absolute; left: -36px; top: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--lime);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--line);
}
.tl-date { font-family: var(--mono); font-size: 12px; color: var(--lime); letter-spacing: .04em; }
.tl-text { font-size: 15px; color: var(--ink); margin-top: 5px; line-height: 1.5; }

/* ---- ABOUT, purpose / vision / mission ---- */
.pvm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pvm-card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px;
}
.pvm-card .pvm-k { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.pvm-card p { font-size: 15.5px; color: var(--mut); line-height: 1.6; margin-top: 14px; }
@media (max-width: 760px) { .pvm { grid-template-columns: 1fr; } }

/* ---- ABOUT, culture two-column ---- */
.culture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.culture-fig { margin: 0; }
.culture-img {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, #1c2018, #0c0f0a);
  aspect-ratio: 3 / 2;
}
.culture-img img { width: 100%; height: 100%; object-fit: cover; }
.culture-cap { font-family: var(--mono); font-size: 12px; color: var(--mut); margin-top: 12px; letter-spacing: .02em; }
.culture-copy p { color: var(--mut); font-size: 16px; line-height: 1.65; }
.culture-copy p + p { margin-top: 16px; }
.culture-copy .pull {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--ink);
  letter-spacing: -.02em;
  text-transform: lowercase;
  margin-bottom: 22px;
}
@media (max-width: 760px) { .culture-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---- ABOUT, contact ---- */
.contact-grid { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 28px; }
.contact-addr { font-family: var(--mono); font-size: 14px; color: var(--mut); line-height: 1.7; }
.contact-addr .ca-k { color: var(--lime); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; display: block; margin-bottom: 8px; }
.contact-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---- REVEAL ANIMATION ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .seg { transform: scaleX(1) !important; }
}