/* ===========================================================================
   Theme 01 — Control Room
   The brand's own idea, finished: a pre-dawn instrument panel. Deep indigo
   black, one hot amber light source, glass instruments, film grain.
   Display: Bricolage Grotesque · Body: Inter Tight · Data: JetBrains Mono
   Dark = "here's what we found". Light = "here's how we work" — kept.
   =========================================================================== */
@font-face { font-family: 'Bricolage Grotesque'; src: url('../../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Inter Tight';         src: url('../../fonts/inter-tight-latin-wght-normal.woff2') format('woff2');         font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono';      src: url('../../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');      font-weight: 100 800; font-display: swap; }

@property --cr-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root[data-theme="control-room"] {
  --predawn: #070A15;  --predawn-lift: #0E1325;
  --fog: #EEF1F6;      --fog-lift: #E2E7EF;
  --ink: #0A0F1F;      --slate: #566079;
  --amber: #FFB547;
  --leak: #D6482B;     --leak-on-dark: #FF8061;   --leak-on-light: #B03519;
  --slate-on-dark: #9DA8C6;  --slate-on-light: #4F5A74;

  --hair-on-dark: rgba(214, 224, 255, 0.12);   --hair-strong-dark: rgba(214, 224, 255, 0.26);
  --hair-on-light: rgba(10, 15, 31, 0.12);     --hair-strong-light: rgba(10, 15, 31, 0.26);
  --edge-on-dark: rgba(214, 224, 255, 0.45);   --edge-on-light: rgba(10, 15, 31, 0.55);

  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-display-xl: clamp(2.75rem, 1rem + 6.6vw, 6.4rem);
  --t-display-l:  clamp(2.1rem, 1.1rem + 3.4vw, 3.9rem);
  --t-display-m:  clamp(1.5rem, 1.05rem + 1.5vw, 2.25rem);
  --t-body-l:     clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
  --t-body:       1.0625rem;

  --shell: 1240px;
  --marginal: 120px;
  --radius: 10px;
  --spot: rgba(255, 181, 71, 0.13);
  --orb-o: 0.42;
  --progress: linear-gradient(90deg, #FFB547, #FF7A45);

  color-scheme: dark;
}

:root[data-theme="control-room"] {
  ::selection { background: var(--amber); color: #1A1204; }

  body { background: var(--fog); letter-spacing: -0.003em; }

  /* ---- Dark bands: aurora of two lights + grid + film grain ------------- */
  .band--dark {
    background:
      radial-gradient(1100px 560px at 88% -12%, rgba(255, 181, 71, 0.11), transparent 62%),
      radial-gradient(900px 520px at -8% 112%, rgba(70, 104, 255, 0.14), transparent 62%),
      var(--predawn);
  }
  .band--dark::before {
    background-image:
      linear-gradient(to right,  rgba(214, 224, 255, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(214, 224, 255, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 90% at 70% 20%, #000 0%, transparent 78%);
  }
  .band--dark::after {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    pointer-events: none;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .band--lift::before {
    background-image: radial-gradient(rgba(10, 15, 31, 0.10) 1px, transparent 1.2px);
    background-size: 22px 22px;
  }
  .band--light { background: linear-gradient(180deg, #F4F6FA 0%, var(--fog) 100%); }

  /* ---- Type ------------------------------------------------------------- */
  .display-xl, .display-l, .display-m { font-weight: 600; letter-spacing: -0.04em; }
  .display-xl { line-height: 0.98; letter-spacing: -0.05em; }
  .display-l  { line-height: 1.04; }
  .hero__head { max-width: 16ch; color: #fff; }
  .hero__sub  { color: var(--slate-on-dark); max-width: 52ch; }
  .fx-w.is-em {
    background: linear-gradient(100deg, #FFDB93 0%, #FFB547 42%, #FF7A45 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    padding-bottom: 0.06em;
  }
  .hero__note {
    font-family: var(--font-mono); font-size: 0.78rem;
    border: 1px solid var(--hair-on-dark); border-radius: 999px;
    padding: 0.5rem 0.95rem; background: rgba(255, 255, 255, 0.03);
  }
  .doc-aside { font-size: 0.72rem; }
  .doc-aside .rule { width: 36px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--amber), transparent); }

  /* ---- Buttons ----------------------------------------------------------- */
  .btn { border-radius: 999px; font-weight: 600; letter-spacing: -0.01em; position: relative; overflow: hidden; }
  .btn--primary {
    background: linear-gradient(180deg, #FFC972, #FFA73A);
    color: #1A1204;
    box-shadow: 0 0 0 1px rgba(255, 181, 71, 0.55), 0 12px 34px -10px rgba(255, 160, 50, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    &::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
      transform: translateX(-130%);
      transition: transform 0.8s var(--ease-out);
    }
    &:hover { background: linear-gradient(180deg, #FFD28A, #FFB04A); transform: translateY(-2px); }
    &:hover::after { transform: translateX(130%); }
  }
  .band--light .btn--primary, .band--lift .btn--primary {
    background: var(--ink); color: #fff;
    box-shadow: 0 14px 30px -14px rgba(10, 15, 31, 0.7);
    &:hover { background: #1A2344; }
  }
  .btn--ghost { background: rgba(255, 255, 255, 0.035); backdrop-filter: blur(8px); }
  .band--light .btn--ghost, .band--lift .btn--ghost { background: transparent; }

  /* ---- Nav --------------------------------------------------------------- */
  .nav { background: #070A15; backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid rgba(214, 224, 255, 0.07); }
  .nav.is-stuck { background: rgba(7, 10, 21, 0.82); }
  .nav__cta { padding: 0.68rem 1.2rem; font-size: 0.9rem; }
  .nav__link { font-size: 0.93rem; }

  /* ---- Readout: a glass instrument with a live edge --------------------- */
  .readout {
    position: relative;
    border-radius: 20px;
    border: 1px solid rgba(214, 224, 255, 0.13);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.015));
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.09);
    &::before {
      content: '';
      position: absolute; inset: 0; border-radius: inherit; padding: 1px;
      background: conic-gradient(from var(--cr-ang), transparent 0 60%, rgba(255, 181, 71, 0) 64%, rgba(255, 181, 71, 0.95) 80%, rgba(255, 122, 69, 0) 92%, transparent);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      animation: cr-spin 8s linear infinite;
      pointer-events: none;
    }
  }
  .readout__bar { padding: 1rem 1.6rem; }
  .readout__body { padding: 0.5rem 1.6rem 1rem; }
  .readout__foot { padding: 1.2rem 1.6rem; background: rgba(255, 181, 71, 0.05); }
  .ro-row__k { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.03em; }
  .ro-row__i { color: var(--amber); }
  .hero__readout { max-width: 52rem; }

  /* ---- Hero orbs --------------------------------------------------------- */
  .hero-fx .o1 { width: 520px; height: 520px; right: -60px; top: -120px; background: #FF9A3D; animation: cr-drift 22s ease-in-out infinite alternate; }
  .hero-fx .o2 { width: 460px; height: 460px; left: -160px; bottom: -160px; background: #3B5BFF; animation: cr-drift 28s ease-in-out infinite alternate-reverse; }
  .hero-fx .o3 { display: none; }

  /* ---- Ladder ------------------------------------------------------------ */
  .rung { padding-inline: 1.1rem; margin-inline: -1.1rem; border-radius: 14px; transition: background 0.35s var(--ease); }
  @media (min-width: 820px) { .rung { grid-template-columns: 2.6rem minmax(0, 16rem) minmax(0, 1fr) 13.5rem; } }
  a.rung:hover { background: linear-gradient(90deg, rgba(255, 181, 71, 0.12), transparent 72%); }
  .band--dark a.rung:hover { background: linear-gradient(90deg, rgba(255, 181, 71, 0.10), transparent 72%); }
  .rung__name { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.035em; }
  .rung__i { font-size: 0.85rem; }
  .rung--primary { background: linear-gradient(90deg, rgba(255, 181, 71, 0.10), transparent 60%); }

  .rung-full { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
  .rung-full__price { font-size: 1.05rem; font-weight: 500; }
  .spec__k { font-size: 0.72rem; }

  /* ---- Beats, teardowns, caps, facts ------------------------------------ */
  .beats { gap: 1.25rem; }
  @media (min-width: 900px) { .beats { gap: 0 1.25rem; } }
  .beat {
    padding: 1.6rem; border: 1px solid var(--c-hair); border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.005));
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
    &:hover { transform: translateY(-4px); border-color: var(--c-hair-strong); }
  }
  .beat + .beat { margin-top: 1.25rem; }
  @media (min-width: 900px) { .beat + .beat { margin-top: 0; } }
  .beat--leak { box-shadow: inset 0 2px 0 var(--c-leak); }
  .beat--result { box-shadow: inset 0 2px 0 var(--amber); }
  .band--light .beat, .band--lift .beat { background: #fff; box-shadow: 0 30px 50px -40px rgba(10, 15, 31, 0.35); }
  .band--light .beat--leak, .band--lift .beat--leak { box-shadow: inset 0 2px 0 var(--c-leak), 0 30px 50px -40px rgba(10, 15, 31, 0.35); }
  .beat__v { font-size: 1.05rem; }

  .teardown__grid { gap: 1.25rem; }
  .teardown__block {
    border: 1px solid var(--c-hair); border-radius: 18px; padding: 1.6rem;
    background: #fff; box-shadow: 0 30px 50px -40px rgba(10, 15, 31, 0.3);
    transition: transform 0.4s var(--ease);
    &:hover { transform: translateY(-3px); }
  }
  .teardown__block--leak { box-shadow: inset 3px 0 0 var(--c-leak), 0 30px 50px -40px rgba(10, 15, 31, 0.3); }
  .teardown { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
  .tag { border-radius: 999px; padding: 0.3rem 0.75rem; }

  .caps { border-top: 0; gap: 1.25rem; }
  .cap { border: 1px solid var(--c-hair); border-radius: 18px; padding: 1.7rem; background: #fff; box-shadow: 0 30px 50px -40px rgba(10, 15, 31, 0.3); }
  .band--dark .cap { background: rgba(255, 255, 255, 0.04); box-shadow: none; }
  .cap__k { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; }

  .facts { border: 1px solid var(--c-hair); border-radius: 20px; padding: 0.4rem 1.7rem; background: rgba(255, 255, 255, 0.55); }
  .fact:last-child { border-bottom: 0; }

  .notice, .alert { border-radius: 16px; }
  .notice { background: #fff; }

  /* ---- Marquee ------------------------------------------------------------ */
  .marquee {
    display: block; overflow: hidden;
    background: var(--predawn);
    border-block: 1px solid var(--hair-on-dark);
    padding-block: 1.25rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    --marquee-t: 50s;
  }
  .marquee__item { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); font-weight: 500; letter-spacing: -0.03em; color: var(--slate-on-dark); padding-inline: 2rem; white-space: nowrap; }
  .marquee__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 14px var(--amber); flex: none; }

  /* ---- Forms -------------------------------------------------------------- */
  .input, .select, .textarea { border-radius: 12px; background: #fff; border-color: var(--hair-strong-light); padding: 0.95rem 1.05rem; }
  .input:focus, .select:focus, .textarea:focus { box-shadow: 0 0 0 4px rgba(255, 181, 71, 0.28); }

  /* ---- CTA band + footer -------------------------------------------------- */
  .cta-band .display-l { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.6rem); line-height: 1; max-width: 18ch; }
  .band--dark.cta-band { background: radial-gradient(900px 420px at 80% 120%, rgba(255, 181, 71, 0.22), transparent 62%), var(--predawn); }
  .footer { background: linear-gradient(180deg, #070A15, #05070F); position: relative; }
  .footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 181, 71, 0.6), transparent); }
  .footer__bottom { border-top-color: var(--hair-on-dark); }

  /* ---- Forms on dark bands: glass, not white ---------------------------- */
  .band--dark .input, .band--dark .select, .band--dark .textarea {
    background: rgba(255, 255, 255, 0.05); color: #fff; border-color: rgba(214, 224, 255, 0.28);
    &:hover { border-color: rgba(214, 224, 255, 0.5); }
    &:focus { background: rgba(255, 181, 71, 0.08); border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 181, 71, 0.22); }
    &::placeholder { color: #7F8AA8; }
  }
  .band--dark .field__label { color: #fff; }
  .band--dark .btn--primary:not(.sticky-cta__btn) { background: linear-gradient(180deg, #FFC972, #FFA73A); color: #1A1204; }

  /* ---- Conversion components, in Control Room dress ---------------------- */
  .tiles, .symptoms, .steps { background: none; border: 0; gap: 1.1rem; }
  .tile, .symptom, .step, .fit__col, .start3__card, .qcard, .lc-next__card, .takeaway, .pricebox { border-radius: 18px; }

  .tile { background: #fff; border: 1px solid var(--hair-on-light); box-shadow: 0 30px 50px -40px rgba(10, 15, 31, 0.35);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    &:hover { transform: translateY(-4px); box-shadow: 0 40px 60px -36px rgba(10, 15, 31, 0.4); }
  }
  .tile__i { color: var(--amber); font-weight: 500; filter: saturate(1.3) brightness(0.78); }

  .symptom {
    border: 1px solid rgba(214, 224, 255, 0.13);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
    &:hover { transform: translateY(-4px); border-color: rgba(255, 181, 71, 0.55); background: linear-gradient(180deg, rgba(255, 181, 71, 0.10), rgba(255, 255, 255, 0.015)); }
  }
  .symptom__q { color: #fff; }

  .step {
    border: 1px solid rgba(214, 224, 255, 0.13);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    position: relative; overflow: hidden;
    &::before { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--amber), transparent 70%); }
  }
  .band--light .step, .band--lift .step { background: #fff; border-color: var(--hair-on-light); }
  .step__n { font-weight: 500; }
  .step__k { color: inherit; }

  .matrix { border-top: 0; }
  .mrow { padding-inline: 1.1rem; margin-inline: -1.1rem; border-bottom-color: transparent; border-top: 1px solid var(--c-hair);
    transition: background 0.35s var(--ease);
    &:hover { background: linear-gradient(90deg, rgba(255, 181, 71, 0.12), transparent 72%); }
  }
  .matrix__head { border-bottom: 0; padding-inline: 1.1rem; margin-inline: -1.1rem; }
  @media (max-width: 1019px) { .matrix__head { margin-inline: 0; padding-inline: 0; } }
  .mrow .tag { white-space: normal; }
  @media (max-width: 1019px) { .mrow { margin-inline: 0; padding-inline: 0; } }

  .finding { border-radius: 20px; border-color: rgba(255, 181, 71, 0.35);
    box-shadow: 0 50px 80px -44px rgba(10, 15, 31, 0.55), 0 0 0 1px rgba(255, 181, 71, 0.08);
  }
  .finding__title { font-weight: 600; }

  .insight { border-radius: 0 16px 16px 0; background: linear-gradient(90deg, rgba(255, 181, 71, 0.13), rgba(255, 181, 71, 0.02)); }
  .band--dark .insight__v { color: #fff; }

  .fit__col { background: rgba(255, 255, 255, 0.5); }
  .band--dark .fit__col { background: rgba(255, 255, 255, 0.04); }
  .fit__col--yes { box-shadow: inset 0 2px 0 var(--amber); }
  .fit__col--no  { box-shadow: inset 0 2px 0 var(--c-leak); }

  .faq { max-width: 56rem; border-top: 0; }
  .faq__item { border: 1px solid var(--c-hair); border-radius: 16px; margin-bottom: 0.7rem; padding-inline: 1.4rem; background: rgba(255, 255, 255, 0.6);
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
    &:hover { border-color: var(--c-hair-strong); }
    &[open] { background: #fff; border-color: rgba(255, 181, 71, 0.6); box-shadow: 0 30px 50px -40px rgba(10, 15, 31, 0.35); }
  }
  .faq__q { font-weight: 600; letter-spacing: -0.025em; }
  .faq__q::before, .faq__q::after { right: 0.1rem; border-radius: 2px; }

  .start3__card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); border-color: rgba(214, 224, 255, 0.14);
    &:hover { border-color: rgba(255, 181, 71, 0.7); background: linear-gradient(180deg, rgba(255, 181, 71, 0.10), rgba(255, 255, 255, 0.015)); }
  }
  .start3__card--hot { border-color: rgba(255, 181, 71, 0.55); box-shadow: 0 0 60px -24px rgba(255, 181, 71, 0.55); }

  .chooser__to { border-bottom: 0; background: var(--ink); color: #fff; padding: 0.7rem 1.1rem; border-radius: 999px; font-size: 0.93rem;
    transition: background 0.25s var(--ease), transform 0.25s var(--ease);
    &:hover { background: #1A2344; color: #fff; transform: translateY(-2px); }
  }
  .chooser__row--soft .chooser__to { background: transparent; color: var(--c-muted); border: 1px solid var(--hair-strong-light); }
  .chooser__row--soft .chooser__to:hover { background: rgba(10, 15, 31, 0.05); color: var(--ink); }

  .timeline__item { position: relative; }
  .timeline__d { color: #8A5300; font-weight: 600; } /* explicit dark amber: 6.3:1 on white (a CSS filter is invisible to contrast checkers) */

  .pricebox { background: linear-gradient(135deg, rgba(255, 181, 71, 0.10), rgba(255, 255, 255, 0.02) 55%); border-color: rgba(255, 181, 71, 0.4); }
  .pricebox__v { background: linear-gradient(100deg, #FFDB93, #FFB547 45%, #FF7A45); -webkit-background-clip: text; background-clip: text; color: transparent; }

  .qcard { background: #fff; box-shadow: 0 30px 50px -44px rgba(10, 15, 31, 0.4); }
  .qcard__n { color: #8A5300; font-weight: 600; }
  .qopt label { border-radius: 12px; }
  .scorebar--top .scorebar__v { color: var(--ink); font-weight: 600; }
  .takeaway { box-shadow: 0 30px 50px -44px rgba(10, 15, 31, 0.4); }
  .lc-next__card--hot { box-shadow: 0 30px 60px -38px rgba(255, 150, 40, 0.5); border-color: rgba(255, 181, 71, 0.7); }

  .linklist a { border-bottom-color: var(--c-hair); }

  /* the readout and its siblings keep working at phone width */
  @media (max-width: 819px) {
    --orb-o: 0.26;
    .rung { margin-inline: 0; padding-inline: 0.2rem; }
    .hero__head { max-width: none; }
  }
}

@keyframes cr-spin  { to { --cr-ang: 360deg; } }
@keyframes cr-drift { to { transform: translate3d(-60px, 50px, 0) scale(1.12); } }