/* V2 tone balance: neutral foundations, VI blue as accent, soft lilac warmth. */
    @media not all {
    :root {
      --vi-warm-white: #fbfaf8;
      --vi-warm-paper: #f7f6f3;
      --vi-lilac: #d7b9ed;
      --vi-blush: #efc9dc;
      --vi-night: #09090b;
      --vi-night-blue: #111318;
      --vi-surface: var(--vi-warm-white);
      --vi-gradient: linear-gradient(135deg, #b3c5f7 0%, #b6d8f3 45%, #d7b9ed 78%, #efc9dc 100%);
      --vi-gradient-strong: linear-gradient(135deg, #4d91f2 0%, #7ea6f6 55%, #bc9ddd 100%);
      --ink: var(--vi-night);
      --charcoal: var(--vi-night-blue);
      --ivory: var(--vi-warm-white);
      --line: rgba(255, 255, 255, .18);
    }

    body { background: var(--vi-night); }
    .slide {
      background:
        radial-gradient(circle at 88% 8%, rgba(215, 185, 237, .075), transparent 30%),
        radial-gradient(circle at 12% 96%, rgba(77, 145, 242, .045), transparent 27%),
        linear-gradient(145deg, #111216, #08080a 68%);
    }
    .slide::before {
      opacity: .32;
      background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    }
    .slide::after {
      background: radial-gradient(circle at 40% 35%, rgba(215, 185, 237, .11), rgba(126, 166, 246, .035) 42%, transparent 70%);
    }
    .slide.light {
      background:
        radial-gradient(circle at 90% 7%, rgba(215, 185, 237, .22), transparent 26%),
        radial-gradient(circle at 4% 96%, rgba(220, 235, 254, .58), transparent 31%),
        var(--vi-warm-white);
    }
    .slide.light::before {
      opacity: .48;
      background-image:
        linear-gradient(rgba(17, 24, 39, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 24, 39, .035) 1px, transparent 1px);
    }
    .slide.light::after {
      background: radial-gradient(circle at 40% 35%, rgba(239, 201, 220, .16), rgba(215, 185, 237, .08) 48%, transparent 70%);
    }

    .kicker { color: rgba(251, 250, 248, .66); }
    .hero { background: #09090b; }
    .hero-bg { filter: saturate(.78) contrast(1.03); }
    .hero-shade {
      background:
        linear-gradient(90deg, rgba(8, 8, 10, .98) 0%, rgba(13, 13, 17, .80) 38%, rgba(17, 17, 21, .10) 76%),
        linear-gradient(0deg, rgba(8, 8, 10, .88), transparent 45%),
        radial-gradient(circle at 74% 18%, rgba(215, 185, 237, .12), transparent 35%);
    }
    .hero .tagline { color: rgba(251, 250, 248, .78); }

    .loss-slide {
      background:
        radial-gradient(circle at 88% 8%, rgba(215, 185, 237, .09), transparent 29%),
        linear-gradient(145deg, #111216, #08080a 70%);
    }
    .loss-slide::after { background: radial-gradient(circle at 40% 35%, rgba(215, 185, 237, .11), transparent 66%); }
    .loss-stat span,
    .loss-reason p,
    .loss-source,
    .pain-card p,
    .cap-item p,
    .industry p,
    .case-copy .detail,
    .case-title .meta { color: rgba(251, 250, 248, .60); }
    .loss-reason,
    .pain-card,
    .industry { background: linear-gradient(135deg, rgba(255, 255, 255, .035), rgba(126, 166, 246, .025)); }

    .video-frame,
    .case-media { background: #0b0b0e; }
    .video-frame video.brand-video { background: #09090b; }
    .closure { background: linear-gradient(110deg, #15161a, #202126); }

    .brand-wall-footer {
      background: rgba(10, 10, 12, .95);
      box-shadow: 0 -18px 45px rgba(0, 0, 0, .20);
    }
    .light .brand-wall-footer {
      background: rgba(251, 250, 248, .95);
      box-shadow: 0 -18px 45px rgba(77, 145, 242, .045);
    }

    .cta { background: #09090b; }
    .cta-bg { filter: saturate(.72) contrast(1.08); }
    .cta-shade {
      background:
        linear-gradient(90deg, rgba(8, 8, 10, .99) 0%, rgba(12, 12, 16, .86) 45%, rgba(18, 18, 23, .34)),
        linear-gradient(0deg, rgba(8, 8, 10, .84), transparent),
        radial-gradient(circle at 82% 18%, rgba(215, 185, 237, .11), transparent 34%);
    }
    .video-zoom-badge,
    .video-lightbox-close { background: rgba(10, 10, 13, .78); }
    .video-lightbox::backdrop { background: rgba(5, 5, 7, .92); }

    @media (max-width: 760px) {
      .hero-shade {
        background:
          linear-gradient(90deg, rgba(8, 8, 10, .96), rgba(16, 16, 20, .55)),
          linear-gradient(0deg, rgba(8, 8, 10, .92), transparent 65%),
          radial-gradient(circle at 72% 18%, rgba(215, 185, 237, .11), transparent 34%);
      }
    }
    }