/* Match the app's dark console palette on desktop; phone/tablet styling is retained. */
@media (min-width: 861px) {
  :root {
    --bg: #030207;
    --bg-deep: #020106;
    --panel: #0c0715;
    --panel-strong: #11091e;
    --panel-soft: #140b23;
    --line: rgba(157, 100, 255, .38);
    --line-strong: rgba(190, 142, 255, .76);
    --violet: #9d64ff;
    --violet-light: #b78bff;
    --pink: #ff6bd6;
    --cyan: #58cfff;
    --mint: #58efb5;
    --text: #fbf9ff;
    --muted: #c9c0da;
    --muted-2: #a89bbd;
    --shadow: 0 24px 80px rgba(0, 0, 0, .64), 0 0 42px rgba(127, 66, 255, .12);
  }

  body {
    background:
      radial-gradient(ellipse at 80% 9%, rgba(60, 111, 255, .12), transparent 32rem),
      radial-gradient(ellipse at 12% 34%, rgba(151, 55, 242, .12), transparent 34rem),
      linear-gradient(145deg, #030207, #080411 52%, #030207);
  }
  body::before { opacity: .3; }
  .site-header { background: rgba(3, 2, 7, .95); border-bottom-color: rgba(157, 100, 255, .28); }
  .site-brand img { box-shadow: 0 0 22px rgba(137, 82, 255, .4); }
  .site-nav a:hover, .site-nav a.active { background: rgba(157, 100, 255, .19); }
  .site-nav a.nav-cta {
    color: #e9dcff; border-color: rgba(173, 118, 255, .62);
    background: linear-gradient(120deg, rgba(121, 56, 225, .28), rgba(56, 111, 231, .18));
    box-shadow: inset 0 1px rgba(223, 199, 255, .1), 0 0 20px rgba(127, 66, 255, .12);
  }
  .site-nav a.nav-cta:hover { background: rgba(157, 100, 255, .28); }

  .hero, .page-hero {
    background:
      radial-gradient(ellipse at 87% 50%, rgba(47, 105, 225, .1), transparent 52%),
      linear-gradient(145deg, #140a24, #05030b 50%, #080b16);
    border-color: rgba(165, 111, 255, .47);
  }
  .hero::before { background: radial-gradient(circle at 55% 48%, rgba(143, 76, 255, .22), transparent 52%); }
  .hero h1 em {
    color: #bb87ff;
    background: linear-gradient(105deg, #b77aff, #bd93ff 54%, #58cfff);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .hero-description { color: #c9c0da; }
  .hero-description a { color: #d6baff; }
  .hero-lead { color: #d7cfe5; }
  .eyebrow span { background: var(--violet); box-shadow: 0 0 14px rgba(157, 100, 255, .8); }

  .button.primary, .purchase-strip, .format-strip b {
    background: linear-gradient(120deg, #7135d6, #8845df 47%, #2863c8);
    box-shadow: 0 10px 28px rgba(118, 69, 230, .34), inset 0 1px rgba(255, 255, 255, .26);
    color: #fff;
  }
  .button.primary:hover { box-shadow: 0 12px 32px rgba(118, 69, 230, .46), inset 0 1px rgba(255, 255, 255, .32); }
  .button.secondary, .legal-back { color: #e9dcff; background: rgba(143, 87, 237, .12); border-color: var(--line); }
  .button.secondary:hover, .legal-back:hover { background: rgba(157, 100, 255, .2); border-color: var(--line-strong); }
  .play-all { background: linear-gradient(135deg, #8f4fff, #4b9dff); box-shadow: 0 0 22px rgba(111, 90, 255, .4); }

  .app-preview {
    background: linear-gradient(145deg, #180c2a, #06040d 70%);
    border-color: rgba(173, 118, 255, .6);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .7), 0 0 42px rgba(130, 66, 245, .22), inset 0 1px rgba(220, 192, 255, .12);
  }
  .credit-panel, .mixer-panel { background: #07040e; border-color: rgba(173, 118, 255, .35); }
  .balance { background: #030207; border-color: rgba(190, 132, 255, .18); }
  .balance > b { color: #d5b1ff; }
  .credit-chip { color: #d5b1ff; border-color: rgba(173, 118, 255, .45); background: rgba(157, 100, 255, .14); }
  .stem-row { background: linear-gradient(90deg, rgba(111, 55, 204, .16), #0a0712); border-color: rgba(162, 107, 255, .34); }
  .stem-row i { color: var(--cyan); background: rgba(88, 207, 255, .1); }
  .stem-row span { background: rgba(255, 255, 255, .14); }
  .stem-row span::before { background: linear-gradient(90deg, var(--pink), var(--violet), var(--cyan)); }
  .format-strip { background: #05030a; border-color: rgba(190, 132, 255, .18); }
  .format-strip .selected { background: rgba(141, 92, 255, .44); }
  .scan-glow { background: rgba(125, 67, 246, .26); }

  .journey-section, .trust-section, .device-card, .gallery-cta,
  .legal-aside, .legal-copy, .request-panel, .deletion-steps {
    background: linear-gradient(145deg, #140a22, #08050f 64%);
    border-color: var(--line); box-shadow: var(--shadow);
  }
  .channel-grid article, .interface-grid article, .deletion-steps li, .removal-grid article {
    background: linear-gradient(145deg, #12091f, #07040d);
    border-color: var(--line);
  }
  .channel-grid article::after { opacity: .025; }
  .channel-icon.pink { color: var(--pink); }
  .channel-icon.rose { color: #f58bcd; }
  .channel-icon.violet { color: #af7aff; }
  .channel-icon.blue { color: #739fff; }
  .channel-icon.cyan { color: var(--cyan); }
  .channel-icon.mint { color: var(--mint); }
  .price-card { background: linear-gradient(145deg, #1c0b31, #08050f 70%); }
  .pricing-copy { background: radial-gradient(circle at 92% 14%, rgba(82, 113, 241, .12), transparent 40%), linear-gradient(145deg, #10091c, #06040c); }
  .check-list p, .trust-actions a, .legal-status, .request-address { background: #0a0613; border-color: rgba(157, 100, 255, .32); }
  .final-cta { background: linear-gradient(110deg, #180c2b, #090613 60%, #080e1d); border-color: rgba(157, 100, 255, .42); }
  .retention-note { background: #0c0716; border-color: rgba(157, 100, 255, .32); }
  .delete-symbol { background: radial-gradient(circle, rgba(157, 100, 255, .2), #05030a 65%); }
  .site-footer { border-top-color: rgba(157, 100, 255, .3); }
}