/* ============================================================
   LAYOUT — 3D path-card arc + responsive
   ============================================================ */

/* ---------- DESKTOP WIDE (≥1181px): orb hero + 3D card fan ---------- */
@media (min-width: 1181px) {
  .stage { display: block; position: relative; min-height: 0; padding-bottom: 70px; overflow-x: clip; }

  /* HERO BAND */
  .scene {
    position: relative;
    inset: auto;
    height: clamp(500px, 66vh, 740px);
    margin: 0 -40px 0;
  }
  #orb-canvas { position: absolute; inset: 0; }

  .hero {
    position: absolute;
    z-index: 6;
    left: 40px;
    top: clamp(36px, 7vh, 90px);
    max-width: 468px;
    margin: 0;
    padding-top: 0;
  }

  /* glass stat cards angled toward the orb */
  .sc-1 { left: 40%;  top: 9%;  right: auto; }
  .sc-2 { left: 39%;  top: 60%; right: auto; }
  .sc-3 { right: 4%;  top: 11%; left: auto; }
  .sc-4 { right: 6%;  top: 56%; left: auto; }

  /* PATH FAN: six slabs wrapping a shallow ring around the orb's axis */
  .paths-stage {
    position: relative;
    margin-top: clamp(4px, 2.5vh, 30px);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    perspective: 1900px;
    perspective-origin: 50% -12%;
    transform-style: preserve-3d;
    padding: 26px 4px 64px;
  }

  /* etched gold floor rings beneath the fan */
  .paths-stage::before,
  .paths-stage::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -120px;
    transform: translateX(-50%) rotateX(78deg);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
  }
  .paths-stage::before {
    width: 100%;
    height: 380px;
    border: 1px solid oklch(0.75 0.09 var(--gold-h) / 0.20);
    box-shadow:
      0 0 calc(70px * var(--glow)) oklch(0.7 0.1 var(--gold-h) / 0.14),
      inset 0 0 120px oklch(0.7 0.1 var(--gold-h) / 0.10);
  }
  .paths-stage::after {
    width: 84%;
    height: 280px;
    border: 1px solid oklch(0.75 0.09 var(--gold-h) / 0.12);
  }

  .path-card {
    min-height: 296px;
    padding: 22px 20px 20px;
  }
  .path-card h3 { font-size: 19px; }
  .path-card p { font-size: 13px; max-width: 92%; }
  .path-card .icon { height: 94px; }

  /* the ring arrangement: outer cards swing back and face the center */
  .pc-1 { --ry: 16deg;  --tz: -88px; --lift: -22px; }
  .pc-2 { --ry: 9deg;   --tz: -30px; --lift: -8px; }
  .pc-3 { --ry: 2.5deg; --tz: 0px;   --lift: 0px; }
  .pc-4 { --ry: -2.5deg;--tz: 0px;   --lift: 0px; }
  .pc-5 { --ry: -9deg;  --tz: -30px; --lift: -8px; }
  .pc-6 { --ry: -16deg; --tz: -88px; --lift: -22px; }

  .scorecard { margin: 14px auto 10px; }
  .scroll-cue { display: flex; }
}

/* ---------- DESKTOP NARROW (1025–1180px): flat 3-col grid ---------- */
@media (min-width: 1025px) and (max-width: 1180px) {
  .stage { display: block; position: relative; min-height: 0; padding-bottom: 70px; overflow-x: clip; }

  .scene {
    position: relative;
    inset: auto;
    height: clamp(460px, 58vh, 640px);
    margin: 0 -40px 0;
  }
  #orb-canvas { position: absolute; inset: 0; }

  .hero {
    position: absolute;
    z-index: 6;
    left: 40px;
    top: clamp(32px, 6vh, 80px);
    max-width: 430px;
    margin: 0;
    padding-top: 0;
  }

  .sc-1 { left: 42%;  top: 9%;  right: auto; }
  .sc-2 { left: 41%;  top: 60%; right: auto; }
  .sc-3 { right: 3%;  top: 11%; left: auto; }
  .sc-4 { right: 5%;  top: 56%; left: auto; }

  .paths-stage {
    position: relative;
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    perspective: 1600px;
  }
  .path-card { min-height: 250px; }

  .scorecard { margin: 32px auto 10px; }
  .scroll-cue { display: flex; }
}

/* ---------- TABLET / MOBILE: stacked list ---------- */
@media (max-width: 1024px) {
  .wrap { padding: 0 22px; }
  :root { --nav-h: 78px; }

  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger {
    display: grid; place-items: center;
    width: 50px; height: 50px;
    border-radius: 999px;
    border: 1px solid var(--gold-line);
    color: var(--gold-bright);
    background: oklch(0.85 0.05 var(--gold-h) / 0.04);
    cursor: pointer;
  }
  .nav-burger svg { width: 22px; height: 22px; }

  .stage { min-height: auto; padding-bottom: 20px; display: flex; flex-direction: column; }

  /* orb scene becomes a banner at the top */
  .scene {
    position: relative;
    inset: auto;
    height: 340px;
    margin: 4px -22px 6px;
    order: -1;
  }
  #orb-canvas { position: absolute; inset: 0; height: 100%; }
  .orb-label { top: 42%; font-size: 15px; }

  /* shrink + reposition floating stat cards as a tight cluster */
  .stat-card { width: 138px; padding: 9px 11px; transform: none !important; }
  .stat-card .sc-big { font-size: 17px; }
  .stat-card .sc-title { font-size: 9.5px; margin-bottom: 5px; }
  .stat-card svg.mini { width: 54px; height: 26px; transform: none; flex: none; }
  .sc-1 { left: 28px;  top: 8%; }
  .sc-2 { left: 24px;  top: 50%; }
  .sc-3 { right: 28px; top: 6%; }
  .sc-4 { right: 24px; top: 48%; }

  .hero { max-width: 100%; padding-top: 8px; margin-top: 6px; }
  .hero h1 { font-size: clamp(34px, 9vw, 52px); }
  .hero p { max-width: 320px; }

  /* path cards: stacked horizontal list rows */
  .paths-stage { position: static; height: auto; display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }
  .path-card {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    display: grid;
    grid-template-columns: 96px 1fr 44px;
    grid-template-areas: "icon body go";
    align-items: center;
    column-gap: 16px;
    padding: 18px 18px;
  }
  .path-card .icon { grid-area: icon; height: 74px; margin: 0; transform: none; }
  .path-card .icon::before { width: 90px; height: 60px; }
  .path-card .icon::after { width: 70px; height: 10px; }
  .path-card .num { grid-area: auto; position: absolute; left: 122px; top: 16px; font-size: 13px; }
  .path-card .pc-body { grid-area: body; padding-top: 4px; }
  .path-card h3 { font-size: 18px; margin: 18px 0 5px; }
  .path-card p { font-size: 13px; max-width: 100%; }
  .path-card .go { grid-area: go; position: static; justify-self: end; }

  .scorecard { margin: 26px auto 36px; max-width: 100%; }
  .scorecard .txt { font-size: 13.5px; }
}

@media (max-width: 460px) {
  .path-card { grid-template-columns: 74px 1fr 40px; column-gap: 12px; }
  .path-card .num { left: 96px; }
  .path-card .icon { height: 60px; }
}