/* =============================================================
   ZARAS — /platform — Atmosphere v3
   -------------------------------------------------------------
   Restraint pass over v2.

   Background:
     v2 swung big — added a hero proof panel, page-level grid
     overlay, per-section radial+grid tints, panel-around-each-
     surface "stages", strengthened handoffs, modules-index card,
     and a closing grid overlay. Result was visually busy, with
     three layers of atmospheric grids competing across the page.

     v3 keeps the strongest moves and cuts the redundant ones:

   KEEP from v2:
     - Hero proof panel (the page needed a right-side product
       anchor; the existing route mesh alone was thin)
     - Per-workflow scene tones (Win warm-teal, Run cool-blue,
       Paid amber, See violet)
     - Strengthened handoff strips (transitional moment)
     - Strengthened closing atmosphere
     - Modules-index card

   CUT from v2:
     - main::before page-level grid overlay (too much wallpaper,
       and the existing per-section workflow-bg patterns from
       operating-layer.v1.css already provide texture)
     - workflow::after 88px grid behind each section (same problem,
       just scoped per-section — three grids stacking)
     - workflow-stage padded mount around each surface (panel-in-
       panel; surfaces already have their own borders/shadows)
     - closing::before grid overlay (decorative, doesn't signify)
     - body-level radial gradients (already handled by per-section
       tints + page-glow.v4)

   TUNE from v2:
     - Hero proof panel: simplified — kept title/pipeline/AI alert,
       cut redundant header+footer status rows. 6 zones → 3 zones.
     - Workflow h2 tinted underline: shortened from 74px to 48px,
       kept scene-tinted, reads as a tick rather than a designerly
       flourish.
     - Scene tone alphas: nudged down ~10–15% so the existing
       workflow-bg patterns from operating-layer.v1 read through
       cleanly underneath.

   Loaded AFTER operating-layer.v1.css so this file's tones can
   layer over (not under) the existing scene patterns. All rules
   scoped under body[data-page="platform"] — cannot leak.
   ============================================================= */


/* -------- Defensive: prevent 100vw / inset overlays from forcing
   a horizontal scrollbar on this page. clip > hidden (better
   behavior with position:fixed descendants). ------------------ */
html { overflow-x: clip; }
body[data-page="platform"] { overflow-x: clip; }


/* =============================================================
   1. HERO — proof panel + atmospheric layer
   ============================================================= */

body[data-page="platform"] .hero {
  isolation: isolate;
}

/* Subtle teal-cool atmospheric layer behind the hero. Sits at
   z-index 0, below the existing route mesh (z-index 1) and
   content (z-index 2). One radial source, low alpha — the
   existing route mesh remains the visual hero, not this. */
body[data-page="platform"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 78% 42%,
      rgba(118, 199, 178, 0.085),
      transparent 64%),
    linear-gradient(180deg,
      rgba(11, 10, 9, 0) 0%,
      rgba(13, 17, 17, 0.42) 100%);
}

/* Slight desaturation of the existing route-mesh so the proof
   panel competes less. Still very visible — just not pulling
   the eye away from the panel. */
body[data-page="platform"] .hero-map {
  opacity: 0.78;
  -webkit-mask-image: radial-gradient(
    ellipse 78% 64% at 62% 42%, black 0%, transparent 84%);
          mask-image: radial-gradient(
    ellipse 78% 64% at 62% 42%, black 0%, transparent 84%);
}


/* ---- Hero proof panel ---------------------------------------
   Three zones: customer/job header, the operational pipeline
   showing where this job sits, an AI surface chip showing what
   the system has noticed. Replaces the v2 design's six zones.

   Hidden on narrow viewports — the hero already has a tall
   headline + meta strip + CTAs + stage row; on phones the panel
   would push everything below the fold. Desktop (>=1040) only. */
.platform-hero-panel {
  position: relative;
  display: none;
  border: 1px solid rgba(255, 250, 240, 0.092);
  border-radius: 18px;
  background:
    linear-gradient(180deg,
      rgba(19, 17, 15, 0.92),
      rgba(10, 14, 14, 0.78)),
    var(--bg-sub);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 32px 88px -54px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(118, 199, 178, 0.022);
}

/* Top accent — single hairline gradient. Replaces v2's denser
   grid-overlay pseudo. */
.platform-hero-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(118, 199, 178, 0.55),
    transparent);
  pointer-events: none;
}

/* Bottom corner accent dot — subtle "live" marker */
.platform-hero-panel::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0.55;
  box-shadow: 0 0 10px rgba(118, 199, 178, 0.45);
  pointer-events: none;
}

.platform-hero-panel-inner {
  position: relative;
  padding: 24px 26px 28px;
  display: grid;
  gap: 22px;
}

/* Panel head — kept, but lightweight: just label + status pill.
   Was in v2 but with an extra animated dot; simplified here. */
.platform-hero-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.platform-hero-panel-head .name {
  color: var(--ink-mute);
}
.platform-hero-panel-head .status {
  position: relative;
  padding-left: 14px;
  color: var(--signal-ink);
}
.platform-hero-panel-head .status::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(118, 199, 178, 0.18);
}

/* Inner card — the actual job/customer payload */
.platform-hero-card {
  position: relative;
  display: grid;
  gap: 18px;
}
.platform-hero-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.platform-hero-card-top .tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(118, 199, 178, 0.12);
  border: 1px solid rgba(118, 199, 178, 0.32);
  color: var(--signal-ink);
  font-size: 9.5px;
  letter-spacing: 0.12em;
}
.platform-hero-title {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.18;
  color: var(--ink);
}
.platform-hero-subline {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-sub);
  line-height: 1.5;
}

/* Pipeline — the operational where-this-job-is row */
.platform-hero-pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 4px;
  padding-top: 22px;
}
.platform-hero-pipeline::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 10px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(118, 199, 178, 0.18),
    rgba(118, 199, 178, 0.42),
    rgba(118, 199, 178, 0.06));
}
.platform-hero-step {
  position: relative;
  display: grid;
  gap: 10px;
  justify-items: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
}
.platform-hero-step .node {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-sub);
  border: 1px solid rgba(118, 199, 178, 0.28);
  position: relative;
  z-index: 1;
}
.platform-hero-step.is-live .node {
  background: var(--signal);
  border-color: var(--signal);
  box-shadow:
    0 0 0 4px rgba(118, 199, 178, 0.16),
    0 0 14px rgba(118, 199, 178, 0.32);
}
.platform-hero-step.is-live { color: var(--signal-ink); }

/* AI surface chip — what the system noticed */
.platform-hero-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid rgba(118, 199, 178, 0.22);
  background: rgba(118, 199, 178, 0.085);
}
.platform-hero-alert .spark {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(118, 199, 178, 0.14);
}
.platform-hero-alert .label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-ink);
  margin-bottom: 4px;
}
.platform-hero-alert .msg {
  display: block;
  color: var(--ink-sub);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Hide v2's panel foot — redundant with the header status. */
.platform-hero-panel-foot { display: none; }

/* Show panel only on wide viewports where the hero has room. */
@media (min-width: 1040px) {
  /* Two-column hero: left = headline + supporting elements,
     right = proof panel. The panel spans rows 1–7 so its top
     aligns with the kicker and its bottom aligns roughly with
     the stage row. */
  body[data-page="platform"] .hero .shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
    column-gap: clamp(48px, 6vw, 84px);
    align-items: center;
  }
  body[data-page="platform"] .hero-kicker,
  body[data-page="platform"] .hero h1,
  body[data-page="platform"] .hero-sub,
  body[data-page="platform"] .hero-actions,
  body[data-page="platform"] .hero-fit,
  body[data-page="platform"] .hero-chain,
  body[data-page="platform"] .hero-scroll-cue {
    grid-column: 1;
  }
  .platform-hero-panel {
    grid-column: 2;
    grid-row: 1 / span 7;
    display: block;
  }
  /* Tighten headline so it doesn't overrun the panel column */
  body[data-page="platform"] .hero h1 {
    max-width: 15ch;
  }
}
@media (max-width: 1039px) {
  .platform-hero-panel { display: none; }
}


/* =============================================================
   2. WORKFLOW SCENE TONES — Win/Run/Paid/See
   -------------------------------------------------------------
   Each section gets a single radial tint at the scene tone.
   That's it. No grid overlay, no "stage" mount around the
   surface. The existing workflow-bg patterns from
   operating-layer.v1.css already supply per-scene texture
   underneath; this file just adds tonal warmth.
   ============================================================= */

body[data-page="platform"] .workflow {
  --scene-rgb: 118 199 178;
  --scene-alpha: 0.075;
  --scene-x: 50%;
  --scene-y: 26%;
  position: relative;
  isolation: isolate;
}

body[data-page="platform"] .workflow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 65% 52% at var(--scene-x) var(--scene-y),
    rgb(var(--scene-rgb) / var(--scene-alpha)) 0%,
    rgb(var(--scene-rgb) / 0.030) 38%,
    transparent 72%
  );
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Per-section overrides */
body[data-page="platform"] #win {
  --scene-rgb: 118 199 178;       /* warm teal — intake/sales */
  --scene-alpha: 0.075;
  --scene-x: 28%;
  --scene-y: 32%;
}
body[data-page="platform"] #run {
  --scene-rgb: 72 140 170;        /* cool blue — active dispatch */
  --scene-alpha: 0.090;
  --scene-x: 72%;
  --scene-y: 36%;
}
body[data-page="platform"] #paid {
  --scene-rgb: 175 144 82;        /* amber — financial */
  --scene-alpha: 0.072;
  --scene-x: 38%;
  --scene-y: 42%;
}
body[data-page="platform"] #see {
  --scene-rgb: 132 112 190;       /* violet — analytical */
  --scene-alpha: 0.078;
  --scene-x: 60%;
  --scene-y: 34%;
}

/* Headline tick — short scene-tinted underline beneath each H2.
   Was 74px in v2; reduced to 48px — reads as a left-aligned
   accent rather than a typographic flourish. */
body[data-page="platform"] .workflow-head h2 {
  position: relative;
}
body[data-page="platform"] .workflow-head h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-top: 16px;
  background: linear-gradient(90deg,
    rgb(var(--scene-rgb) / 0.55),
    transparent);
}

body[data-page="platform"] .workflow-intro {
  max-width: 62ch;
}

/* CRITICAL CUT: SD's v2 added a "stage" panel around every
   surface (workflow-stage), which produced a panel-in-panel
   effect (the surface already has a card frame). v3 neutralizes
   the stage so surfaces sit on the scene atmosphere directly. */
body[data-page="platform"] .workflow-stage {
  margin-top: 18px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
body[data-page="platform"] .workflow-stage > .surface {
  max-width: none;
}

/* Workflow chips — subtle scene-tinted outline so the chip
   reads as part of the section it labels. */
body[data-page="platform"] .workflow-chip {
  border-color: rgb(var(--scene-rgb) / 0.20);
  background: linear-gradient(180deg,
    rgb(var(--scene-rgb) / 0.055),
    rgba(14, 13, 11, 0.88));
}


/* =============================================================
   3. HANDOFF STRIPS — checkpoint crossings
   -------------------------------------------------------------
   The existing handoffs are plain text on a hairline. v3 adds
   a faint horizontal gradient behind them so each crossing
   reads as a small transitional moment.
   ============================================================= */

body[data-page="platform"] .handoff {
  position: relative;
  background:
    radial-gradient(ellipse 42% 110% at 50% 50%,
      rgba(118, 199, 178, 0.030),
      transparent 70%),
    linear-gradient(90deg,
      transparent,
      rgba(255, 250, 240, 0.022),
      transparent);
}

body[data-page="platform"] .handoff-events {
  position: relative;
}
body[data-page="platform"] .handoff-events::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    transparent,
    rgba(118, 199, 178, 0.10),
    transparent);
  z-index: -1;
}

body[data-page="platform"] .handoff-checkpoint .name {
  color: var(--signal-ink);
}


/* =============================================================
   4. MODULES INDEX — systems register
   ============================================================= */

body[data-page="platform"] .modules-index {
  position: relative;
  padding: 22px 22px;
  margin: 28px 0;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      rgba(255, 250, 240, 0.022),
      rgba(255, 250, 240, 0.005)),
    var(--bg-sub);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.028);
}
body[data-page="platform"] .modules-index .lbl {
  color: var(--ink-mute);
}
body[data-page="platform"] .modules-index .list {
  color: var(--ink-sub);
}


/* =============================================================
   5. CLOSING — terminal moment
   -------------------------------------------------------------
   Strongest controlled glow on the page. Single radial bloom
   from below center — mirrors page-glow's body-bottom pattern.
   v2's grid-overlay ::before is removed.
   ============================================================= */

body[data-page="platform"] .closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 46% at 50% 76%,
      rgba(118, 199, 178, 0.115),
      transparent 68%),
    linear-gradient(180deg,
      rgba(11, 10, 9, 0.18),
      rgba(8, 13, 12, 0.62));
}


/* =============================================================
   6. RESPONSIVE
   ============================================================= */

@media (max-width: 1039px) {
  /* Pipeline collapses to 2x2 on narrow viewports if panel
     ever shows (it doesn't currently below 1040, but kept
     defensively for future). */
  .platform-hero-pipeline {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 14px;
  }
  .platform-hero-pipeline::before { display: none; }
}

@media (max-width: 720px) {
  body[data-page="platform"] .workflow-head h2::after {
    width: 36px;
    margin-top: 12px;
  }
  body[data-page="platform"] .modules-index {
    margin: 18px 0;
    padding: 18px 16px;
  }
}


/* =============================================================
   7. REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
  /* All atmospheric layers in this file are static — nothing
     to suspend. Existing animations on the live-dot pulse and
     hero mesh are gated by their own modules. */
}