/* =========================================================
   DAANAK Global — CINEMATIC LAYER
   =========================================================

   Loaded after style.css. This file does not replace the base
   system; it adds the storytelling layer on top of it.

   THE VISUAL LANGUAGE
   -------------------
   DAANAK's product idea is literally a geometry: scattered
   signals converge into one core, the core applies intelligence,
   intelligence becomes action, action becomes outcome. So the
   whole visual vocabulary is built from three primitives and
   nothing else — no decoration that does not mean something:

     NODE     a system, a source, a moment in a process
     PATH     the connection between them
     SIGNAL   what actually travels along a path

   The core is a hexagon, taken from the DAANAK logo mark.

   SCENE RHYTHM
   ------------
   The page alternates between LIGHT scenes (explanation, product,
   proof) and DARK scenes (transformation, intelligence, decision).
   Dark is used for the moments where something CHANGES. That is
   what makes it feel cinematic rather than merely styled — the
   contrast carries meaning, and white space stays the premium
   canvas it already was.

   MOTION
   ------
   Every animation is transform/opacity only, so it stays on the
   compositor. Nothing loops in the viewport except two deliberate
   ambient signals in the hero. `prefers-reduced-motion` settles
   everything to its final state instantly — the story still reads,
   it just doesn't move.
   ========================================================= */

:root {
  /* Scene seam + depth (Master Obsidian Palette) */
  --scene-dark: #0d121c;
  --scene-dark-2: #151b26;
  --scene-deep: #080b12;
  --glass-on-dark: rgba(255, 255, 255, 0.04);
  --glass-border-on-dark: rgba(255, 255, 255, 0.08);
  --signal-gold: #c5a059;
  --signal-teal: #d4af37;

  /* Motion */
  --dur-scene: 900ms;
  --ease-scene: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-signal: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   1. MOTION SYSTEM
   ENTRY -> MOVEMENT -> TRANSFORMATION -> SETTLE
   ========================================================= */

[data-anim] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--dur-scene) var(--ease-scene),
    transform var(--dur-scene) var(--ease-scene),
    filter var(--dur-scene) var(--ease-scene),
    clip-path var(--dur-scene) var(--ease-scene);
}
[data-anim="rise"]    { transform: translate3d(0, 34px, 0); }
[data-anim="rise-sm"] { transform: translate3d(0, 16px, 0); }
[data-anim="fade"]    { transform: none; }
[data-anim="scale"]   { transform: scale(0.94); }
[data-anim="lift"]    { transform: translate3d(0, 40px, 0) scale(0.97); }
[data-anim="left"]    { transform: translate3d(-32px, 0, 0); }
[data-anim="right"]   { transform: translate3d(32px, 0, 0); }
[data-anim="blur"]    { transform: translate3d(0, 20px, 0); filter: blur(10px); }
[data-anim="wipe"]    { clip-path: inset(0 100% 0 0); opacity: 1; }

[data-anim].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}
/* Once settled, stop reserving a compositor layer. */
[data-anim].is-settled { will-change: auto; }

/* Staggered children — the parent reveals, the children follow in
   sequence. The eye gets a direction to travel rather than eight
   things appearing at once. */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 720ms var(--ease-scene), transform 720ms var(--ease-scene);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: 90ms; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: 180ms; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: 270ms; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: 360ms; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: 450ms; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: 540ms; }
[data-stagger].is-in > *:nth-child(8) { transition-delay: 630ms; }

[data-anim-delay="1"] { transition-delay: 100ms; }
[data-anim-delay="2"] { transition-delay: 200ms; }
[data-anim-delay="3"] { transition-delay: 300ms; }
[data-anim-delay="4"] { transition-delay: 420ms; }
[data-anim-delay="5"] { transition-delay: 540ms; }

/* Self-drawing SVG paths. */
.draw-path {
  stroke-dasharray: var(--path-len, 1000);
  stroke-dashoffset: var(--path-len, 1000);
  transition: stroke-dashoffset 1600ms var(--ease-scene);
}
.is-in .draw-path, .draw-path.is-in { stroke-dashoffset: 0; }

/* REDUCED MOTION — settle everything, immediately, with no exceptions. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim], [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .draw-path { stroke-dashoffset: 0 !important; transition: none !important; }
  .signal-dot, .ambient-drift, .core-pulse, .orbit-ring,
  .spine-signal, .flow-pulse, .particle {
    animation: none !important;
  }
  * { scroll-behavior: auto !important; }
}

/* =========================================================
   2. SCENE SYSTEM
   ========================================================= */

.scene {
  position: relative;
  padding: clamp(88px, 11vw, 168px) 0;
  /* `clip`, NOT `hidden`. Both contain the scene's glow and field grid,
     but `overflow: hidden` establishes a scroll container and silently
     kills `position: sticky` in every descendant — which is exactly
     what happened to the pinned how-it-works diagram: it scrolled away
     after the first step and left the column empty. `clip` does the
     same visual job without creating a scroll port. */
  overflow: clip;
}
.scene-tight { padding: clamp(64px, 7vw, 104px) 0; }

.scene--light { background: var(--bg-primary); }
.scene--tint  { background: var(--bg-secondary); }

.scene--dark {
  background: var(--scene-dark);
  color: var(--text-on-dark);
}
.scene--deep {
  background:
    radial-gradient(1100px 620px at 22% 0%, rgba(49, 176, 171, 0.16), transparent 62%),
    radial-gradient(900px 560px at 88% 108%, rgba(229, 170, 57, 0.13), transparent 60%),
    var(--scene-deep);
  color: var(--text-on-dark);
}
.scene--dark h1, .scene--dark h2, .scene--dark h3, .scene--dark h4,
.scene--deep h1, .scene--deep h2, .scene--deep h3, .scene--deep h4 { color: var(--text-on-dark); }
.scene--dark p, .scene--deep p { color: var(--text-on-dark-secondary); }

/* The seam between a dark scene and the light one after it. A hard
   cut reads as two unrelated pages; a short gradient reads as one
   continuous film. */
.scene--dark::after, .scene--deep::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.28));
  pointer-events: none;
}
.scene--seam-top::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), transparent);
  pointer-events: none;
}

/* Field texture: the faint measured grid that says "system", used
   at very low opacity so it reads as depth, not decoration. */
.field-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%);
  pointer-events: none;
}
.field-grid--light {
  background-image:
    linear-gradient(rgba(17, 78, 75, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 78, 75, 0.05) 1px, transparent 1px);
}

/* =========================================================
   3. TYPOGRAPHY AS CINEMA
   ========================================================= */

/* Scale is used intentionally, not maximally. An earlier pass set the
   ceiling at 4rem with a 17ch measure, which pushed every statement to
   four or five lines and made the highlight span most of the block —
   the emphasis stopped meaning anything and the section became a wall.
   A wider measure with a lower ceiling reads as more confident, not
   less. */
.statement {
  font-size: clamp(1.9rem, 1.15rem + 2.5vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: 21ch;
  text-wrap: balance;
}
.statement--wide { max-width: 28ch; }
.statement em {
  font-style: normal;
  color: var(--gold-400);
}
.scene--light .statement em, .scene--tint .statement em { color: var(--brand-primary); }

.lede-lg {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 56ch;
}
.scene--dark .lede-lg, .scene--deep .lede-lg { color: var(--text-on-dark-secondary); }

/* Scene index — the small "01 / 06" marker that tells the visitor
   they are moving through a sequence, not browsing a page. */
.scene-index {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.scene--dark .scene-index, .scene--deep .scene-index { color: rgba(185, 201, 198, 0.75); }
.scene-index b { color: var(--accent-primary); font-weight: 700; }
.scene-index::after {
  content: "";
  width: 44px; height: 1px;
  background: currentColor;
  opacity: 0.4;
}

/* =========================================================
   4. THE SPINE
   One continuous line down the page. Every scene is a station on
   it. This is what turns ten sections into one story — the answer
   to "sections feel independent".
   ========================================================= */

.spine {
  position: fixed;
  left: max(24px, calc((100vw - var(--container-max)) / 2 - 26px));
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--ease-scene);
}
.spine.is-active { opacity: 1; }
.spine-track {
  position: absolute;
  top: 18vh; bottom: 18vh;
  left: 0; width: 2px;
  background: currentColor;
  opacity: 0.14;
}
.spine-fill {
  position: absolute;
  top: 18vh;
  left: 0; width: 2px;
  height: calc((100vh - 36vh) * var(--spine-progress, 0));
  background: linear-gradient(to bottom, var(--signal-teal), var(--signal-gold));
  box-shadow: 0 0 12px rgba(81, 204, 200, 0.55);
}
.spine-head {
  position: absolute;
  left: -3px;
  top: calc(18vh + (100vh - 36vh) * var(--spine-progress, 0));
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal-gold);
  box-shadow: 0 0 14px rgba(229, 170, 57, 0.9);
  transform: translateY(-50%);
}
.spine-label {
  position: absolute;
  left: 18px;
  top: calc(18vh + (100vh - 36vh) * var(--spine-progress, 0));
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-tertiary);
  opacity: 0.85;
  transition: opacity 300ms var(--ease-scene);
}
body.spine-on-dark .spine { color: #fff; }
body.spine-on-dark .spine-label { color: rgba(255, 255, 255, 0.6); }

@media (max-width: 1180px) { .spine { display: none; } }

/* =========================================================
   5. NODE / PATH / SIGNAL VOCABULARY
   ========================================================= */

.sysnode {
  fill: var(--scene-deep);
  stroke: var(--signal-teal);
  stroke-width: 1.5;
}
.sysnode--gold { stroke: var(--signal-gold); }
.syspath {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
}
.syspath--live {
  stroke: url(#daanakSignalGrad);
  stroke-width: 1.75;
}

/* A signal travelling a path. offset-path keeps it on the compositor. */
.signal-dot {
  fill: var(--signal-gold);
  offset-rotate: 0deg;
  animation: signalTravel 3.4s var(--ease-signal) infinite;
}
@keyframes signalTravel {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  82%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

.core-pulse { transform-origin: center; animation: corePulse 4.2s ease-in-out infinite; }
@keyframes corePulse {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  50%      { opacity: 0.06; transform: scale(1.28); }
}

.ambient-drift { animation: ambientDrift 9s ease-in-out infinite; }
@keyframes ambientDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}
.ambient-drift--b { animation-duration: 11s; animation-delay: -3s; }
.ambient-drift--c { animation-duration: 13s; animation-delay: -6s; }

/* =========================================================
   6. HERO — THE OPENING SCENE
   ========================================================= */

.hero-cine {
  position: relative;
  min-height: min(94vh, 940px);
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height) + 56px) 0 96px;
  background:
    radial-gradient(1200px 700px at 18% 8%, rgba(197, 160, 89, 0.16), transparent 60%),
    radial-gradient(900px 640px at 92% 88%, rgba(212, 175, 55, 0.12), transparent 58%),
    linear-gradient(168deg, #151b26 0%, var(--scene-deep) 58%, #080b12 100%);
  color: var(--text-on-dark);
  overflow: hidden;
}
.hero-cine::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.hero-cine .container {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 3vw, 56px);
  align-items: center;
  width: 100%;
}
/* Sized so each of the three masked lines stays on ONE visual line in
   the copy column. If a masked line wraps, the reveal animation breaks
   into fragments and the opening title stops reading as three beats. */
.hero-cine h1 {
  font-size: clamp(1.95rem, 1.15rem + 2.1vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-top: var(--space-lg);
  max-width: 24ch;
}
.hero-cine h1 .hl {
  background: linear-gradient(100deg, var(--gold-300), var(--teal-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-cine .lede {
  margin-top: var(--space-lg);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  color: var(--text-on-dark-secondary);
  max-width: 46ch;
}
.hero-cine .hero-actions { margin-top: var(--space-2xl); }

/* Line-by-line headline reveal — the opening title of the film. */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1000ms var(--ease-scene);
}
.is-in .line-mask > span { transform: none; }
.is-in .line-mask:nth-child(2) > span { transition-delay: 110ms; }
.is-in .line-mask:nth-child(3) > span { transition-delay: 220ms; }
@media (prefers-reduced-motion: reduce) {
  .line-mask > span { transform: none !important; transition: none !important; }
}

.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.82;
  max-height: 560px;
  /* The glass fragments are positioned relative to this box and must
     stay inside it — an earlier pass let one run past the viewport
     edge. Padding reserves the gutter they live in. */
  padding: 6% 4%;
}
.hero-stage svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Floating interface fragments — the "product exists" cue, kept
   abstract so nothing implies a Marketplace product that does not
   exist yet. */
.ui-fragment {
  position: absolute;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--glass-border-on-dark);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  padding: 11px 13px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  z-index: 4;
}
.ui-fragment .uf-label {
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  font-weight: 700;
}
.ui-fragment .uf-value {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-top: 3px;
  letter-spacing: -0.01em;
}
.ui-fragment .uf-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  margin-top: 8px;
  overflow: hidden;
}
.ui-fragment .uf-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--signal-teal), var(--signal-gold));
  width: var(--w, 60%);
}

.hero-scroll-cue {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.hero-scroll-cue span.rail {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  position: relative; overflow: hidden;
}
.hero-scroll-cue span.rail::after {
  content: ""; position: absolute; left: 0; top: -40px;
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--signal-gold));
  animation: cueFall 2.4s ease-in-out infinite;
}
@keyframes cueFall { 0% { top: -40px; } 60%, 100% { top: 40px; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll-cue span.rail::after { animation: none; } }

@media (max-width: 980px) {
  .hero-cine .container { grid-template-columns: 1fr; gap: 40px; }
  .hero-cine { min-height: auto; padding-top: calc(var(--nav-height) + 40px); }
  .hero-stage { max-height: 420px; aspect-ratio: 1 / 0.8; padding: 2%; }
  .hero-scroll-cue { display: none; }
}
/* §28: recompose, don't shrink. At phone width the stage is small
   enough that the three glass fragments land on top of the diagram's
   own node labels and both become unreadable. The system diagram is
   the part that carries the meaning, so the fragments step aside
   rather than competing with it. */
@media (max-width: 620px) {
  .hero-stage .ui-fragment { display: none; }
  .hero-stage { max-height: 320px; }
}

/* =========================================================
   7. FRAGMENTATION SCENE
   Scattered tools that literally converge as you scroll.
   ========================================================= */

.frag-field {
  position: relative;
  /* Taller than the original chip cloud: the clusters carry real
     process detail and must not be clipped at the bottom edge. */
  height: clamp(520px, 52vw, 660px);
  margin-top: var(--space-3xl);
}
/* A cluster is one real process family (Procure to Pay, Order to Cash,
   Export, ...). Each converges toward the core as its own group, so the
   visitor reads "these are related pieces of work" rather than "here is
   a cloud of words". --cx/--cy are the travel vectors computed in JS. */
.frag-cluster {
  position: absolute;
  width: min(268px, 30%);
  padding: 12px 13px;
  border-radius: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  transform: translate3d(
      calc(var(--cx, 0px) * var(--converge, 0)),
      calc(var(--cy, 0px) * var(--converge, 0)), 0)
    scale(calc(1 - 0.42 * var(--converge, 0)));
  opacity: calc(1 - 0.78 * var(--converge, 0));
  transition: transform 260ms linear, opacity 260ms linear;
}
.frag-cluster .fc-title {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--brand-primary);
  margin-bottom: 8px;
}
.frag-cluster .fc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.frag-cluster .fc-chips span {
  font-size: 11px;
  line-height: 1.25;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  white-space: nowrap;
}

.frag-core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(calc(0.82 + 0.18 * var(--converge, 0)));
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 26px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: var(--text-on-dark);
  font-weight: 600;
  box-shadow: 0 18px 46px rgba(17, 78, 75, calc(0.16 + 0.24 * var(--converge, 0)));
  transition: transform 260ms linear, box-shadow 260ms linear;
  z-index: 3;
}
.frag-core img { height: 24px; }
.frag-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.frag-lines line {
  stroke: var(--border-default);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: calc(0.25 + 0.75 * var(--converge, 0));
  transition: opacity 260ms linear;
}
.frag-mobile { display: none; }

@media (max-width: 900px) {
  .frag-field { display: none; }
  .frag-mobile {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin-top: var(--space-2xl);
  }
  .frag-mobile .frag-cluster {
    position: static; transform: none; opacity: 1; width: auto;
  }
  .frag-mobile .frag-core {
    position: static; transform: none; grid-column: 1 / -1;
    justify-self: center; margin-top: var(--space-md);
  }
}

/* =========================================================
   8. STICKY SEQUENCE
   The single biggest change: the how-it-works flow stops being a
   row of five boxes and becomes a pinned scene whose diagram
   advances as the visitor scrolls through the steps.
   ========================================================= */

.seq { position: relative; }
.seq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 80px);
  /* MUST be stretch, not start. A sticky element can only travel
     within its containing block; with `align-items: start` the left
     grid item is only as tall as the diagram, so the diagram unstuck
     and scrolled away after the first step or two, leaving the whole
     left column empty for the rest of the sequence. Stretching the
     item to the full row height is what lets it stay pinned for the
     entire read. */
  align-items: stretch;
}
.seq-sticky {
  position: sticky;
  /* Centred in the reading area rather than parked near the top, so the
     diagram sits opposite whichever step is currently being read. */
  top: calc(var(--nav-height) + 4vh);
  height: min(72vh, 620px);
  display: flex;
  align-items: center;
}
/* The diagram needs to read as a designed object, not an SVG floating
   in white. A soft field panel gives it edges and lets the lit nodes
   register against something. */
.seq-stage {
  position: relative;
  width: 100%;
  padding: clamp(20px, 3vw, 36px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(700px 380px at 50% 45%, rgba(17, 78, 75, 0.055), transparent 72%),
    var(--bg-secondary);
  border: 1px solid var(--border-subtle);
}
.seq-stage::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(17, 78, 75, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 78, 75, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, #000 20%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, #000 20%, transparent 76%);
  pointer-events: none;
}
.seq-stage svg { position: relative; width: 100%; height: auto; display: block; overflow: visible; }

.seq-steps { display: flex; flex-direction: column; }
.seq-step {
  padding: clamp(24px, 4vh, 44px) 0;
  /* Tall enough that each step gets its own moment, short enough that
     the scene doesn't become a corridor of white space. */
  min-height: 34vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.3;
  transition: opacity 420ms var(--ease-scene);
}
.seq-step.is-current { opacity: 1; }
.seq-step h3 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  letter-spacing: -0.022em;
  margin-top: 12px;
}
.seq-step p { margin-top: 12px; max-width: 46ch; }
.seq-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  font-size: 12px; font-weight: 700;
  border: 1px solid currentColor;
  opacity: 0.5;
  transition: all 420ms var(--ease-scene);
}
.seq-step.is-current .seq-num {
  opacity: 1;
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--on-accent);
}

/* The diagram's own state, driven by which step is current. */
.seq-node { transition: opacity 500ms var(--ease-scene), transform 500ms var(--ease-scene); transform-origin: center; }
.seq-node[data-state="idle"]   { opacity: 0.26; }
.seq-node[data-state="active"] { opacity: 1; }
.seq-node[data-state="done"]   { opacity: 0.6; }
.seq-link { transition: stroke-dashoffset 700ms var(--ease-scene), opacity 500ms var(--ease-scene); }

@media (max-width: 980px) {
  .seq-grid { grid-template-columns: 1fr; gap: 24px; }
  .seq-sticky {
    position: sticky;
    top: calc(var(--nav-height) + 8px);
    height: auto;
    padding: 14px 0;
    background: inherit;
    z-index: 5;
  }
  .seq-step { min-height: 0; padding: 22px 0; opacity: 1; }
  .seq-step:not(.is-current) { opacity: 0.55; }
}

/* =========================================================
   9. INTELLIGENCE (AI) SCENE
   Signals -> pattern -> recommendation. Never a robot head.
   ========================================================= */

.intel-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.62;
  max-height: 460px;
}
.intel-stage svg { width: 100%; height: 100%; overflow: visible; }
.intel-readout {
  position: absolute;
  right: 2%;
  bottom: 6%;
  width: min(310px, 74%);
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  border: 1px solid var(--glass-border-on-dark);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 15px 17px;
  box-shadow: 0 22px 52px rgba(0,0,0,0.4);
}
.intel-readout .ir-tag {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-400); font-weight: 700;
}
.intel-readout .ir-line {
  font-size: 14px; color: #fff; margin-top: 8px; line-height: 1.45;
}
.intel-readout .ir-meta {
  margin-top: 11px; display: flex; gap: 8px; flex-wrap: wrap;
}
.intel-readout .ir-meta b {
  font-size: 10px; font-weight: 600; padding: 3px 8px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.72);
}

/* The named ladder beside the AI stage: signals -> data -> pattern ->
   recommendation -> human decision -> action. It states in words the
   sequence the chart shows, so the philosophy (AI supports the
   decision, it does not take it) is explicit rather than implied. */
.intel-ladder { display: grid; gap: 0; }
.intel-ladder > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.intel-ladder > div:first-child { border-top: 0; }
.intel-ladder b {
  font-size: var(--fs-body-sm);
  font-weight: 650;
  color: #fff;
  letter-spacing: -0.008em;
}
.intel-ladder > div:nth-child(4) b,
.intel-ladder > div:nth-child(5) b { color: var(--gold-400); }
.intel-ladder span { font-size: var(--fs-body-sm); color: rgba(255, 255, 255, 0.62); }
@media (max-width: 620px) {
  .intel-ladder > div { grid-template-columns: 1fr; gap: 2px; }
}

/* =========================================================
   10. AUTOMATION SCENE — work moving, not a dashboard
   ========================================================= */

.auto-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 18px);
  align-items: stretch;
  margin-top: var(--space-2xl);
}
.auto-cell {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: var(--bg-primary);
  padding: clamp(14px, 1.7vw, 22px);
  box-shadow: var(--shadow-sm);
  min-height: 168px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auto-cell.is-lit {
  border-color: var(--teal-300);
  box-shadow: 0 14px 34px rgba(17, 78, 75, 0.13);
  transform: translateY(-3px);
}
.auto-cell { transition: border-color 420ms var(--ease-scene), box-shadow 420ms var(--ease-scene), transform 420ms var(--ease-scene); }
.auto-kicker {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--text-tertiary);
}
.auto-cell.is-lit .auto-kicker { color: var(--accent-primary); }
.auto-cell h4 { font-size: var(--fs-body-md); letter-spacing: -0.012em; }
.auto-cell p { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.auto-icon { color: var(--brand-primary); }
.auto-cell.is-lit .auto-icon { color: var(--accent-hover); }

/* The pulse that travels the track — automation as motion. */
.auto-rail {
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 2px;
  background: var(--border-default);
  overflow: hidden;
  border-radius: 2px;
}
.auto-rail i {
  position: absolute; top: 0; left: 0;
  height: 100%; width: 22%;
  background: linear-gradient(90deg, transparent, var(--signal-gold), transparent);
  animation: railRun 4.6s var(--ease-signal) infinite;
}
@keyframes railRun { 0% { transform: translateX(-120%); } 100% { transform: translateX(560%); } }

@media (max-width: 900px) {
  .auto-track { grid-template-columns: 1fr 1fr; }
  .auto-rail { display: none; }
}
@media (max-width: 560px) { .auto-track { grid-template-columns: 1fr; } }

/* =========================================================
   11. PLATFORM STACK — real depth, not six flat boxes
   ========================================================= */

.stack3d {
  position: relative;
  margin: var(--space-2xl) auto 0;
  max-width: 640px;
  perspective: 1400px;
}
.stack3d-inner {
  transform-style: preserve-3d;
  /* Shallower than the first attempt (52/-42), which tipped the plate
     labels far enough that the descriptions stopped being readable.
     Depth should make the architecture legible, not decorative. */
  transform: rotateX(44deg) rotateZ(-30deg);
  display: flex;
  flex-direction: column-reverse;
  gap: 20px;
}
.stack-plate {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--glass-border-on-dark);
  background: linear-gradient(140deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 18px 24px;
  box-shadow: 0 26px 50px rgba(0,0,0,0.34);
  transform: translateZ(0);
}
.stack-plate .sp-title { font-weight: 650; font-size: 1.0625rem; color: #fff; letter-spacing: -0.012em; }
.stack-plate .sp-desc { font-size: 0.8125rem; color: rgba(255,255,255,0.78); margin-top: 3px; }
.stack-plate.is-core {
  border-color: rgba(81, 204, 200, 0.42);
  background: linear-gradient(140deg, rgba(49, 176, 171, 0.26), rgba(49, 176, 171, 0.07));
}
.stack-plate.is-value {
  border-color: rgba(229, 170, 57, 0.46);
  background: linear-gradient(140deg, rgba(229, 170, 57, 0.26), rgba(229, 170, 57, 0.07));
}
/* Reveal bottom-up, so the stack assembles itself. */
.stack3d-inner .stack-plate {
  opacity: 0;
  transform: translate3d(0, 46px, 0);
  transition: opacity 760ms var(--ease-scene), transform 760ms var(--ease-scene);
}
.stack3d.is-in .stack-plate { opacity: 1; transform: none; }
.stack3d.is-in .stack-plate:nth-child(1) { transition-delay: 0ms; }
.stack3d.is-in .stack-plate:nth-child(2) { transition-delay: 95ms; }
.stack3d.is-in .stack-plate:nth-child(3) { transition-delay: 190ms; }
.stack3d.is-in .stack-plate:nth-child(4) { transition-delay: 285ms; }
.stack3d.is-in .stack-plate:nth-child(5) { transition-delay: 380ms; }
.stack3d.is-in .stack-plate:nth-child(6) { transition-delay: 475ms; }

.stack-legend {
  margin-top: var(--space-3xl);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
}
.stack-legend div {
  border-left: 2px solid rgba(255,255,255,0.16);
  padding-left: 14px;
}
.stack-legend b { display: block; color: #fff; font-size: var(--fs-body-sm); font-weight: 600; }
.stack-legend span { font-size: var(--fs-caption); color: rgba(255,255,255,0.55); }

@media (max-width: 860px) {
  .stack3d-inner { transform: none; gap: 12px; }
  .stack3d { perspective: none; max-width: 460px; }
  .stack-plate { box-shadow: 0 10px 24px rgba(0,0,0,0.26); }
}
@media (prefers-reduced-motion: reduce) {
  .stack3d-inner .stack-plate { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   12. WORKSPACE PREVIEW — "products live in one environment"
   Deliberately generic: no named product, no invented pricing.
   ========================================================= */

.ws-preview {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  background: var(--bg-primary);
  box-shadow: var(--shadow-xl);
}
.ws-chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}
.ws-chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--neutral-300); }
.ws-chrome span {
  margin-left: 10px; font-size: var(--fs-caption); color: var(--text-tertiary);
  font-weight: 500;
}
.ws-body { display: grid; grid-template-columns: 128px 1fr; min-height: 260px; }
.ws-side { border-right: 1px solid var(--border-subtle); padding: 14px 10px; background: var(--bg-secondary); }
.ws-side b {
  display: block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 9px;
}
.ws-side u {
  display: block; height: 8px; border-radius: 4px; text-decoration: none;
  background: var(--neutral-200); margin-bottom: 9px;
}
.ws-side u.on { background: var(--brand-primary); opacity: 0.85; }
.ws-main { padding: 16px; display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); align-content: start; }
.ws-tile {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 11px;
  background: var(--bg-primary);
  min-height: 74px;
}
.ws-tile b { display: block; font-size: 10px; color: var(--text-tertiary); letter-spacing: 0.1em; text-transform: uppercase; }
.ws-tile s { display: block; text-decoration: none; font-size: 19px; font-weight: 650; color: var(--text-primary); margin-top: 5px; letter-spacing: -0.02em; }
.ws-tile em { display: block; font-style: normal; font-size: 10px; color: var(--sage-600); margin-top: 3px; }
.ws-tile.wide { grid-column: span 3; min-height: 92px; display: flex; align-items: flex-end; gap: 5px; }
.ws-tile.wide i {
  display: block; flex: 1; border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, var(--teal-600), var(--teal-400));
  opacity: 0.85;
  height: var(--h, 40%);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 760ms var(--ease-scene);
}
.ws-preview.is-in .ws-tile.wide i { transform: scaleY(1); }
.ws-preview.is-in .ws-tile.wide i:nth-child(1) { transition-delay: 40ms; }
.ws-preview.is-in .ws-tile.wide i:nth-child(2) { transition-delay: 90ms; }
.ws-preview.is-in .ws-tile.wide i:nth-child(3) { transition-delay: 140ms; }
.ws-preview.is-in .ws-tile.wide i:nth-child(4) { transition-delay: 190ms; }
.ws-preview.is-in .ws-tile.wide i:nth-child(5) { transition-delay: 240ms; }
.ws-preview.is-in .ws-tile.wide i:nth-child(6) { transition-delay: 290ms; }
.ws-preview.is-in .ws-tile.wide i:nth-child(7) { transition-delay: 340ms; }
.ws-preview.is-in .ws-tile.wide i:nth-child(8) { transition-delay: 390ms; }
@media (prefers-reduced-motion: reduce) { .ws-tile.wide i { transform: scaleY(1) !important; } }

@media (max-width: 620px) {
  .ws-body { grid-template-columns: 1fr; }
  .ws-side { display: none; }
  .ws-main { grid-template-columns: repeat(2, 1fr); }
  .ws-tile.wide { grid-column: span 2; }
}

/* =========================================================
   13. OUTCOME MEASURE — statements with rhythm, not four cards
   ========================================================= */

.measures { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; }
.measure {
  padding: var(--space-xl) var(--space-lg);
  border-left: 1px solid var(--border-default);
}
.measures .measure:first-child { border-left: 0; padding-left: 0; }
.measure .m-top {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--brand-primary);
  line-height: 1.1;
}
.measure .m-label { margin-top: 10px; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.scene--dark .measure, .scene--deep .measure { border-color: rgba(255,255,255,0.14); }
.scene--dark .measure .m-top, .scene--deep .measure .m-top { color: var(--gold-400); }

@media (max-width: 700px) {
  .measure { border-left: 0; border-top: 1px solid var(--border-default); padding-left: 0; }
  .measures .measure:first-child { border-top: 0; padding-top: 0; }
}

/* =========================================================
   14. SPLIT SCENE — visual on one side, meaning on the other
   ========================================================= */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
}
/* When one column is a tall visual and the other is short copy,
   centring leaves a crater above the shorter one. Align to the top and
   let the visual lead instead. */
.split--top { align-items: start; }
.split--visual-first > *:first-child { order: -1; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split--visual-first > *:first-child { order: 0; }
}

/* =========================================================
   15. CARD REFINEMENT — depth and a reason to hover
   ========================================================= */

.card-cine {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: var(--bg-primary);
  padding: var(--space-xl);
  overflow: hidden;
  transition: transform 420ms var(--ease-scene), box-shadow 420ms var(--ease-scene), border-color 420ms var(--ease-scene);
}
.card-cine::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), rgba(17,78,75,0.07), transparent 62%);
  opacity: 0;
  transition: opacity 420ms var(--ease-scene);
  pointer-events: none;
}
.card-cine:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--teal-200); }
.card-cine:hover::before { opacity: 1; }
.card-cine h3 { font-size: var(--fs-h4); margin-top: var(--space-md); letter-spacing: -0.015em; }
.card-cine p { color: var(--text-secondary); font-size: var(--fs-body-sm); margin-top: 8px; }
.card-cine .cc-num {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.16em;
  color: var(--accent-primary);
}
.scene--dark .card-cine, .scene--deep .card-cine {
  background: var(--glass-on-dark);
  border-color: var(--glass-border-on-dark);
}
.scene--dark .card-cine:hover, .scene--deep .card-cine:hover {
  border-color: rgba(81,204,200,0.4);
  box-shadow: 0 22px 48px rgba(0,0,0,0.4);
}
.scene--dark .card-cine p, .scene--deep .card-cine p { color: rgba(255,255,255,0.62); }
.scene--dark .card-cine::before, .scene--deep .card-cine::before {
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), rgba(81,204,200,0.10), transparent 62%);
}

/* =========================================================
   16. CINEMATIC CTA — the closing scene
   ========================================================= */

.cta-cine {
  position: relative;
  text-align: center;
  padding: clamp(72px, 10vw, 140px) 0;
  overflow: hidden;
}
.cta-cine h2 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  letter-spacing: -0.032em;
  line-height: 1.06;
  max-width: 20ch;
  margin: var(--space-md) auto 0;
}
.cta-cine p { margin: var(--space-lg) auto 0; max-width: 52ch; }
.cta-cine .hero-actions { justify-content: center; margin-top: var(--space-2xl); }
.cta-halo {
  position: absolute;
  left: 50%; top: 50%;
  width: min(860px, 130vw); height: min(860px, 130vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(229,170,57,0.16), transparent 62%);
  pointer-events: none;
}

/* =========================================================
   17. AUTH — entering the platform, not filling a form
   ========================================================= */

.auth-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 100vh;
}

/* Default / DAANAK Website Theme (Matching daanak.com) */
.auth-visual,
[data-theme="website"] .auth-visual,
html:not([data-theme="dark"]) .auth-visual {
  position: relative;
  background:
    radial-gradient(900px 560px at 26% 14%, rgba(197, 160, 89, 0.16), transparent 60%),
    radial-gradient(760px 520px at 84% 92%, rgba(212, 175, 55, 0.12), transparent 58%),
    linear-gradient(168deg, #faf5ea 0%, #f4f2ec 62%, #ede8de 100%);
  color: #111827;
  border-right: 1px solid #e5e7eb;
  padding: clamp(40px, 5.5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.auth-visual .av-mark { display: block; position: relative; z-index: 2; }
.auth-visual .av-mark img { height: 52px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08)); }
.auth-visual .av-body { position: relative; z-index: 2; margin: clamp(28px, 4vw, 48px) 0; }
.auth-visual .eyebrow {
  color: var(--gold-deep, #9a7a3a);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 11px;
}
.auth-visual .eyebrow::before {
  background: var(--gold-deep, #9a7a3a);
}
.auth-visual h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  letter-spacing: -0.028em;
  line-height: 1.15;
  max-width: 18ch;
  margin-top: var(--space-md);
  color: #111827;
}
.auth-visual p {
  color: #5b6270;
  margin-top: var(--space-md);
  max-width: 44ch;
  line-height: 1.55;
  font-size: var(--fs-body-md);
}
.auth-visual .av-points {
  margin-top: var(--space-xl);
  display: grid;
  gap: 14px;
}
.auth-visual .av-points div {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: var(--fs-body-sm);
  color: #111827;
  font-weight: 600;
}
.auth-visual .av-points svg {
  flex: none;
  color: var(--accent-gold, #c5a059);
  filter: drop-shadow(0 0 6px rgba(197, 160, 89, 0.4));
}
.auth-visual .auth-tagline {
  position: relative;
  z-index: 2;
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: #5b6270;
  font-weight: 500;
}
.auth-stage {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  z-index: 1;
  pointer-events: none;
}
.auth-stage svg { width: 100%; height: 100%; }

.auth-form-side,
[data-theme="website"] .auth-form-side,
html:not([data-theme="dark"]) .auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 4vw, 64px) clamp(20px, 3vw, 48px);
  background-color: var(--bg-surface, #fafaf9);
  background-image:
    linear-gradient(to right, rgba(17, 24, 39, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 24, 39, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}
.auth-form-inner,
[data-theme="website"] .auth-form-inner,
html:not([data-theme="dark"]) .auth-form-inner {
  width: 100%;
  max-width: 440px;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: var(--radius-xl, 20px);
  padding: clamp(32px, 4.5vw, 48px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 32px -4px rgba(0, 0, 0, 0.04);
}
.auth-form-inner h1,
[data-theme="website"] .auth-form-inner h1,
html:not([data-theme="dark"]) .auth-form-inner h1 {
  color: #111827;
}

/* =========================================================
   AUTH — Dark Theme Variant
   ========================================================= */
[data-theme="dark"] .auth-body {
  background: #0d121c;
}
[data-theme="dark"] .auth-visual {
  background:
    radial-gradient(900px 560px at 26% 14%, rgba(197, 160, 89, 0.22), transparent 60%),
    radial-gradient(760px 520px at 84% 92%, rgba(212, 175, 55, 0.18), transparent 58%),
    linear-gradient(168deg, #151b26 0%, #0d121c 62%, #080b12 100%);
  color: #ffffff;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .auth-visual .av-mark img {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
[data-theme="dark"] .auth-visual .eyebrow {
  color: var(--gold-bright, #d4af37);
}
[data-theme="dark"] .auth-visual .eyebrow::before {
  background: var(--gold-bright, #d4af37);
}
[data-theme="dark"] .auth-visual h2 {
  color: #ffffff;
}
[data-theme="dark"] .auth-visual p {
  color: rgba(255, 255, 255, 0.72);
}
[data-theme="dark"] .auth-visual .av-points div {
  color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .auth-visual .av-points svg {
  color: var(--accent-gold, #c5a059);
}
[data-theme="dark"] .auth-visual .auth-tagline {
  color: rgba(255, 255, 255, 0.48);
}
[data-theme="dark"] .auth-stage {
  opacity: 0.45;
}
[data-theme="dark"] .auth-form-side {
  background-color: #151b26;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}
[data-theme="dark"] .auth-form-inner {
  background: #161d2c;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .auth-form-inner h1 {
  color: #ffffff;
}
[data-theme="dark"] .auth-form-inner .text-secondary {
  color: #9ca3af;
}
[data-theme="dark"] .auth-form-inner .form-label {
  color: #ffffff;
}
[data-theme="dark"] .auth-form-inner .input {
  background: #0d121c;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

@media (max-width: 940px) {
  .auth-split { grid-template-columns: 1fr; min-height: auto; }
  .auth-visual { padding: 32px 24px 36px; min-height: 280px; }
  .auth-visual .av-points, .auth-stage { display: none; }
  .auth-visual h2 { font-size: 1.6rem; }
  .auth-visual p { font-size: var(--fs-body-sm); }
  .auth-form-side { padding: 32px 20px; }
  .auth-form-inner { border: none; box-shadow: none; padding: 0; background: transparent; }
}

/* =========================================================
   18. PAGE HEADERS for interior public pages
   ========================================================= */

.page-hero {
  position: relative;
  padding: calc(var(--nav-height) + clamp(56px, 7vw, 96px)) 0 clamp(52px, 6vw, 84px);
  background:
    radial-gradient(900px 520px at 14% 0%, rgba(197, 160, 89, 0.16), transparent 62%),
    radial-gradient(720px 460px at 92% 100%, rgba(212, 175, 55, 0.12), transparent 60%),
    linear-gradient(168deg, #151b26, var(--scene-deep));
  color: var(--text-on-dark);
  overflow: hidden;
}
.page-hero h1 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-top: var(--space-md);
  max-width: 20ch;
}
.page-hero .lede { color: var(--text-on-dark-secondary); margin-top: var(--space-lg); max-width: 56ch; font-size: var(--fs-body-lg); }
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.32));
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 2; }

/* =========================================================
   19. APP + ADMIN SHELL REFINEMENT
   Same design system, different job. The workspace must read as
   an operating environment, not a marketing page.
   ========================================================= */

.app-main .app-page-head {
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-xl);
}
.app-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); }
.app-stat {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
}
.app-stat::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--teal-500), var(--teal-800));
  opacity: 0.7;
}
.app-stat .as-label { font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.app-stat .as-value { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.028em; margin-top: 6px; }
.app-stat .as-note { font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: 4px; }

/* =========================================================
   0. HEADER CONTRAST SYSTEM
   =========================================================

   THE PROBLEM THIS REPLACES
   The old header styling hung off `.hero-dark .site-nav:not(.is-scrolled)`
   — an ancestor-and-state selector chain that had to be re-declared for
   every element in the header and silently missed several. The "Log in"
   button was the clearest casualty: its on-dark variant was scoped to
   `.on-dark`, but the nav sits OUTSIDE the hero, so it rendered
   near-black text on a near-black background. The logo word had the same
   class of bug.

   THE FIX
   One authoritative switch: `[data-nav-theme="dark"|"light"]` on the nav
   itself, set by main.js from what is genuinely behind the header right
   now. Every header element reads from that one attribute, so a new
   element cannot be forgotten — it inherits the theme by construction.
   The attribute defaults to "light" in the markup, which is the safe
   value if JS never runs.
   ========================================================= */

.site-nav {
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

/* --- the logo lockups: exactly one visible per theme --- */
.nav-logo { display: flex; align-items: center; gap: 0; }
.nav-logo img {
  /* Nav lockup is mark + wordmark (no tagline), so it stays legible at
     header size. Height only — width:auto preserves the native ratio, so
     the logo is never stretched. */
  height: 30px;
  width: auto;
  display: block;
}
.site-nav[data-nav-theme="light"] .logo-dark-bg,
.site-nav[data-nav-theme="dark"]  .logo-light-bg { display: none; }

/* --- DARK THEME: over a dark hero or dark scene --- */
.site-nav[data-nav-theme="dark"] {
  background: transparent;
  border-bottom-color: transparent;
}
.site-nav[data-nav-theme="dark"] .nav-links a,
.site-nav[data-nav-theme="dark"] .nav-trigger {
  color: rgba(255, 255, 255, 0.82);
}
.site-nav[data-nav-theme="dark"] .nav-links a:hover,
.site-nav[data-nav-theme="dark"] .nav-trigger:hover,
.site-nav[data-nav-theme="dark"] .nav-item.open .nav-trigger {
  color: #fff;
}
.site-nav[data-nav-theme="dark"] .nav-links a.active { color: var(--gold-400); }
.site-nav[data-nav-theme="dark"] .nav-toggle { color: #fff; }

/* The secondary CTA was the worst offender — explicitly reversed here. */
.site-nav[data-nav-theme="dark"] .nav-cta .btn-secondary {
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}
.site-nav[data-nav-theme="dark"] .nav-cta .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.55);
}

/* --- LIGHT THEME: scrolled, or over a light section --- */
.site-nav[data-nav-theme="light"] {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-nav[data-nav-theme="light"] .nav-links a,
.site-nav[data-nav-theme="light"] .nav-trigger { color: var(--text-secondary); }
.site-nav[data-nav-theme="light"] .nav-links a:hover,
.site-nav[data-nav-theme="light"] .nav-trigger:hover { color: var(--text-primary); }
.site-nav[data-nav-theme="light"] .nav-links a.active { color: var(--brand-primary); }
.site-nav[data-nav-theme="light"] .nav-toggle { color: var(--text-primary); }
.site-nav[data-nav-theme="light"] .nav-cta .btn-secondary {
  border-color: var(--border-default);
  color: var(--text-primary);
  background: transparent;
}
.site-nav[data-nav-theme="light"] .nav-cta .btn-secondary:hover {
  background: var(--bg-secondary);
  border-color: var(--text-tertiary);
}

/* Scrolled over a dark scene: a tinted dark bar, so the header stays
   readable without flipping to white mid-scroll over dark content. */
.site-nav[data-nav-theme="dark"].is-scrolled {
  background: rgba(6, 23, 22, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* The gold CTA is identical in both themes — it is the one element that
   must never change, so it always reads as the primary action. */
.site-nav .btn-accent { background: var(--accent-primary); color: var(--on-accent); }
.site-nav .btn-accent:hover { background: var(--accent-hover); }

/* Dropdown panels are always a light surface, so their contents stay on
   light-theme colours regardless of the header theme behind them. */
.site-nav[data-nav-theme="dark"] .nav-dropdown a { color: var(--text-primary); }
.site-nav[data-nav-theme="dark"] .nav-dropdown a .desc { color: var(--text-secondary); }

/* The mobile menu is its own light surface. */
.site-nav[data-nav-theme="dark"] .mobile-menu { background: var(--bg-primary); }
.site-nav[data-nav-theme="dark"] .mobile-menu a,
.site-nav[data-nav-theme="dark"] .mobile-menu summary { color: var(--text-primary); }

@media (max-width: 900px) { .nav-logo img { height: 30px; } }

/* =========================================================
   19b. CARRY-OVER CORRECTIONS
   Fixes to the pre-existing base system that the cinematic pass
   exposed. Both are genuine defects, not restyling.
   ========================================================= */

/* Interior section headings were set at --fs-display-md and centred,
   which at 1440px produced three-line headings the width of the page.
   Display scale should be reserved for the moments that deserve it. */
.section-header h2 {
  font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.35rem);
  letter-spacing: -0.028em;
  line-height: 1.12;
  text-wrap: balance;
}
.section-header.centered { max-width: 46ch; }
.section-header p { font-size: var(--fs-body-md); }

/* The nav's "Log in" button is .btn-secondary, whose on-dark variant is
   scoped to `.on-dark` — but the nav sits OUTSIDE the hero, so over a
   dark hero it rendered near-black text on a near-black background.
   Pre-existing, and much more visible now that every page opens dark. */
.hero-dark .site-nav:not(.is-scrolled) .nav-cta .btn-secondary {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text-on-dark);
}
.hero-dark .site-nav:not(.is-scrolled) .nav-cta .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Interior pages keep the base .section rhythm but inherit the scene
   padding scale, so a page mixing both does not jump. */
.section { padding: clamp(72px, 8vw, 128px) 0; }
.section-tight { padding: clamp(56px, 6vw, 96px) 0; }

/* =========================================================
   19c. WORKSPACE + ADMIN REFINEMENT
   §17/§18: the authenticated workspace is an operating environment,
   not a marketing page. It deliberately gets NO scroll storytelling —
   cinematic.js is not loaded here, because animating an environment
   somebody works in every day is a usability cost, not a feature.
   What it gets is hierarchy: clearer data emphasis, calmer surfaces,
   and empty/loading states that read as designed rather than missing.
   ========================================================= */

/* Stat tiles carried no visual weight, so the four most important
   numbers on the dashboard read as four grey boxes. A brand rail and a
   tighter numeric scale give the eye somewhere to land first. */
.stat-tile {
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.stat-tile::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--teal-500), var(--teal-800));
}
.stat-tile:hover { border-color: var(--teal-200); box-shadow: var(--shadow-md); }
.stat-tile .stat-label {
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-tertiary);
}
.stat-tile .stat-value {
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  margin-top: 6px;
  line-height: 1.1;
}

/* Empty states are a designed destination, not a gap. */
.state-panel {
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(560px 240px at 50% 0%, rgba(17, 78, 75, 0.035), transparent 70%),
    var(--bg-primary);
}
.state-panel h3 { letter-spacing: -0.02em; }

/* Tables: the data is the content, so the chrome recedes. */
.app-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: 1;
}
.app-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.app-table tbody tr:hover { background: var(--bg-secondary); }

/* The workspace name in the topbar is orientation, not decoration. */
.topbar-workspace { font-weight: 600; letter-spacing: -0.01em; }

/* Sidebar: the active item should be unambiguous at a glance. */
.app-sidebar .sidebar-nav a.active { position: relative; }
.app-sidebar .sidebar-nav a.active::before {
  content: "";
  position: absolute; left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: var(--accent-primary);
}

/* =========================================================
   20. UTILITIES
   ========================================================= */

.u-center { text-align: center; }
.u-mt-xl { margin-top: var(--space-xl); }
.u-mt-2xl { margin-top: var(--space-2xl); }
.u-mt-3xl { margin-top: var(--space-3xl); }
.u-maxw-sm { max-width: 44ch; }
.u-maxw-md { max-width: 58ch; }
.u-mx-auto { margin-left: auto; margin-right: auto; }
.u-rel { position: relative; z-index: 2; }
.dim { opacity: 0.62; }