/* Full-width scroll-snap apply experience — DA black/white + roomy sections */
:root {
  --da-black: #0a0a0a;
  --da-ink: #111;
  --da-white: #f7f7f5;
  --da-muted: #6b6b6b;
  --da-line: rgba(255,255,255,.12);
  --cyan: #3db4ff;
  --font: "Satoshi", Inter, system-ui, sans-serif;
  --mono: "Space Grotesk", ui-monospace, monospace;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --snap-ms: 900ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
html, body { margin: 0; height: 100%; background: var(--da-black); color: #fff; font-family: var(--font); }
body { overflow: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; }

.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, #fff, var(--cyan));
  z-index: 100; transition: width .25s linear;
}
.cursor-glow {
  position: fixed; width: 420px; height: 420px; border-radius: 50%;
  pointer-events: none; z-index: 2; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(61,180,255,.14), transparent 65%);
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s;
}
body:hover .cursor-glow { opacity: 1; }

/* chrome inspired by DA / Indeed company header */
.chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .75rem clamp(1rem, 3vw, 2rem);
  background: rgba(10,10,10,.82); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.da-brand {
  display: flex; align-items: center; gap: .65rem; text-decoration: none; color: #fff;
}
.da-mark {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: #fff; color: #000; font-weight: 800; font-size: .85rem; letter-spacing: -.04em;
}
.da-brand strong { display: block; font-size: .95rem; letter-spacing: -.02em; }
.da-brand small { display: block; color: #8a8a8a; font-size: .68rem; }
.chrome-nav { display: flex; flex-wrap: wrap; gap: .15rem; }
.chrome-nav a {
  text-decoration: none; color: #9a9a9a; font-size: .78rem;
  padding: .35rem .55rem; border-radius: 999px;
}
.chrome-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.chrome-meta { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.chip {
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  padding: .3rem .7rem; font-size: .72rem; color: #cfcfcf;
}
.chip.live { border-color: rgba(255,255,255,.35); color: #fff; }

/* snap container */
.snap {
  height: 100vh; height: 100dvh;
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}
.panel {
  min-height: 100vh; min-height: 100dvh;
  scroll-snap-align: start; scroll-snap-stop: always;
  position: relative; display: flex; align-items: center;
  padding: 5.5rem clamp(1.25rem, 4vw, 4rem) 3rem;
}
.panel.dark { background: var(--da-black); color: #fff; }
.panel.light { background: var(--da-white); color: #111; }
.panel-inner { width: min(1200px, 100%); margin: 0 auto; position: relative; z-index: 1; }
.panel-inner.wide { width: min(1280px, 100%); }
.panel-inner.full { width: min(1400px, 100%); }
.panel-inner.center { text-align: center; }

.checker {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(42vw, 520px);
  background:
    linear-gradient(135deg, transparent 40%, rgba(255,255,255,.03)),
    repeating-conic-gradient(#fff 0% 25%, #000 0% 50%) 0 0 / 28px 28px;
  opacity: .9; mask-image: linear-gradient(90deg, transparent, #000 40%);
  pointer-events: none;
}

.eyebrow {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: #8f8f8f; margin: 0 0 1rem;
}
.eyebrow.dark { color: #6a6a6a; }
.display {
  margin: 0 0 1.25rem; font-weight: 600; letter-spacing: -.045em;
  font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: .98; max-width: 12ch;
}
.display .play {
  position: relative; display: inline-block; cursor: pointer;
  border-bottom: 2px solid rgba(255,255,255,.35);
}
.display .play::after {
  content: "▶"; position: absolute; left: 50%; top: -0.15em;
  transform: translateX(-50%); font-size: .35em; opacity: .85;
  border: 1.5px solid rgba(255,255,255,.7); border-radius: 999px;
  width: 1.4em; height: 1.4em; display: grid; place-items: center;
  background: rgba(0,0,0,.35);
}
.h2 {
  margin: 0 0 1rem; font-weight: 600; letter-spacing: -.04em;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; max-width: 16ch;
}
.h2.dark { color: #111; }
.sub, .lede {
  margin: 0 0 1.5rem; font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.55; max-width: 52ch; color: #a8a8a8;
}
.lede.dark, .sub.dark { color: #555; }
.scroll-hint {
  margin-top: 3rem; font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; color: #666; font-family: var(--mono);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
  text-decoration: none; border: 1px solid transparent; transition: transform .2s var(--ease), background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn.solid { background: #fff; color: #000; }
.btn.solid.dark { background: #111; color: #fff; }
.btn.ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.btn.ghost.dark { border-color: rgba(0,0,0,.18); color: #111; }
.hero-cta, .btn-row { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: inherit; }

.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0;
}
@media (max-width: 900px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat {
  border: 1px solid rgba(0,0,0,.08); border-radius: 20px; padding: 1.25rem 1.2rem;
  background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.04);
}
.stat b {
  display: block; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.04em;
  font-weight: 600; color: #111;
}
.stat span { display: block; margin-top: .35rem; font-weight: 600; font-size: .9rem; color: #222; }
.stat small { display: block; margin-top: .25rem; color: #777; font-size: .78rem; }

.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }
.glass {
  border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
  padding: 1.25rem 1.35rem; background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
}
.glass.dark-on-light {
  background: #fff; border-color: rgba(0,0,0,.08); color: #111;
  box-shadow: 0 16px 40px rgba(0,0,0,.04);
}
.glass h3 { margin: 0 0 .6rem; font-size: 1.05rem; letter-spacing: -.02em; }
.glass ul { margin: 0; padding-left: 1.1rem; color: #a8a8a8; line-height: 1.55; font-size: .92rem; }
.glass.dark-on-light ul, .glass.dark-on-light p { color: #555; }
.glass p { margin: 0 0 .85rem; color: #a8a8a8; line-height: 1.5; }

/* brain */
.brain-sec .panel-inner.full {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1.5rem; align-items: center;
}
@media (max-width: 960px) { .brain-sec .panel-inner.full { grid-template-columns: 1fr; } }
.brain-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.brain-tags button {
  border: 1px solid rgba(255,255,255,.18); background: transparent; color: #ccc;
  border-radius: 999px; padding: .45rem .85rem; font-size: .8rem; cursor: pointer;
}
.brain-tags button.on { background: #fff; color: #000; border-color: #fff; }
.brain-detail { color: #a8a8a8; line-height: 1.55; max-width: 42ch; min-height: 4.5em; }
.brain-stage {
  position: relative; border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); background: #020608;
  min-height: min(70vh, 560px); height: 62vh;
}
.brain-stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.brain-fs { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 2; }

/* flows */
.flow {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; margin: 1.5rem 0 1rem;
}
@media (max-width: 900px) { .flow { grid-template-columns: 1fr 1fr; } }
.flow-node {
  border: 1px solid rgba(0,0,0,.1); background: #fff; color: #111;
  border-radius: 18px; padding: 1.1rem .9rem; text-align: left; cursor: pointer;
  font-weight: 600; font-size: .92rem; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.flow-node span {
  display: block; font-family: var(--mono); font-size: .65rem; letter-spacing: .14em;
  color: #888; margin-bottom: .35rem;
}
.flow-node:hover, .flow-node.on {
  transform: translateY(-4px); border-color: #111; box-shadow: 0 18px 40px rgba(0,0,0,.1);
}
.flow-node.light {
  background: rgba(255,255,255,.05); color: #fff; border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
.flow-node.light span { color: #7a7a7a; }
.flow-node.light:hover, .flow-node.light.on {
  background: #fff; color: #000; border-color: #fff;
}
.info-panel {
  min-height: 120px; transition: opacity .35s var(--ease), transform .35s var(--ease), filter .35s;
}
.info-panel h3 { margin: 0 0 .4rem; font-size: 1.15rem; letter-spacing: -.02em; }
.info-panel p { margin: 0; line-height: 1.55; font-size: .95rem; }

/* countries */
.country-row { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.25rem 0; }
.country {
  border: 1px solid rgba(0,0,0,.12); background: #fff; color: #333;
  border-radius: 999px; padding: .5rem .95rem; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.country.on { background: #111; color: #fff; border-color: #111; }
.policy-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem;
}
@media (max-width: 800px) { .policy-grid { grid-template-columns: 1fr; } }
.policy-card {
  border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 1.1rem 1.15rem;
  background: #fff; box-shadow: 0 12px 36px rgba(0,0,0,.04);
  opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.policy-card.in { opacity: 1; transform: none; }
.policy-card h4 { margin: 0 0 .35rem; font-size: .95rem; }
.policy-card p { margin: 0; color: #555; font-size: .88rem; line-height: 1.45; }
.fine { font-size: .75rem; color: #888; margin-top: 1.25rem; }
.fine.dark { color: #777; }

.train-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin: 1.5rem 0;
}
@media (max-width: 900px) { .train-grid { grid-template-columns: 1fr 1fr; } }
.train-card {
  border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 1.2rem 1.1rem;
  background: rgba(255,255,255,.04);
}
.train-card .n {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; color: #7a7a7a;
}
.train-card h3 { margin: .45rem 0 .4rem; font-size: 1.05rem; letter-spacing: -.02em; }
.train-card p { margin: 0; color: #a0a0a0; font-size: .88rem; line-height: 1.45; }
.kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.25rem;
}
@media (max-width: 700px) { .kpi-row { grid-template-columns: 1fr 1fr; } }
.kpi-row b {
  display: block; font-size: 1.8rem; letter-spacing: -.03em; font-weight: 600;
}
.kpi-row span { color: #888; font-size: .78rem; }

/* scroll reveals */
.reveal {
  opacity: 0; transform: translateY(28px) scale(.98); filter: blur(8px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
.panel.in-view .reveal { opacity: 1; transform: none; filter: none; }
.panel.in-view .reveal.delay-1 { transition-delay: .1s; }
.panel.in-view .reveal.delay-2 { transition-delay: .2s; }
.panel.in-view .reveal.delay-3 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .snap { scroll-snap-type: none; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .cursor-glow { display: none; }
}