/* ===========================================
       V2 · SEN VI COLOUR SYSTEM
       Colour-only reskin. Content and structure
       intentionally remain identical to v1.
       =========================================== */
    :root {
      --vi-blue: #4d91f2;
      --vi-periwinkle: #7ea6f6;
      --vi-ice: #dcebfe;
      --vi-black: #000000;
      --vi-white: #ffffff;
      --vi-graphite: #111827;
      --vi-slate: #526173;
      --vi-night: #05070b;
      --vi-night-blue: #081426;
      --vi-surface: #f6f9ff;
      --vi-gradient: linear-gradient(135deg, #b6c1fb 0%, #9edcf5 50%, #d4b6f4 100%);
      --vi-gradient-strong: linear-gradient(135deg, #4d91f2 0%, #7ea6f6 48%, #b99bea 100%);

      /* Preserve the original semantic API while applying the VI palette. */
      --ink: var(--vi-night);
      --charcoal: var(--vi-night-blue);
      --ivory: var(--vi-white);
      --paper: var(--vi-ice);
      --sage: var(--vi-periwinkle);
      --moss: var(--vi-blue);
      --orange: var(--vi-blue);
      --brass: var(--vi-periwinkle);
      --text-blue: #356fc6;
      --text-blue-deep: #356fc6;
      --serif: "Microsoft YaHei", "微软雅黑", sans-serif;
      --sans: "Microsoft YaHei", "微软雅黑", sans-serif;
      --line: rgba(220, 235, 254, .20);
    }

    body {
      color: var(--vi-white);
      background: var(--vi-night);
    }

    .slide {
      background:
        radial-gradient(circle at 83% 10%, rgba(77, 145, 242, .12), transparent 34%),
        linear-gradient(145deg, var(--vi-night-blue), var(--vi-night) 62%);
    }
    .slide::before {
      opacity: .42;
      background-image:
        linear-gradient(rgba(126, 166, 246, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 166, 246, .035) 1px, transparent 1px);
    }
    .slide::after {
      right: -14vw;
      bottom: -24vw;
      background: radial-gradient(circle at 40% 35%, rgba(126, 166, 246, .18), rgba(77, 145, 242, .05) 38%, transparent 68%);
      filter: blur(8px);
    }
    .slide.light {
      color: var(--vi-black);
      background:
        radial-gradient(circle at 88% 9%, rgba(126, 166, 246, .22), transparent 28%),
        radial-gradient(circle at 2% 98%, rgba(220, 235, 254, .85), transparent 34%),
        var(--vi-surface);
    }
    .slide.light::before {
      opacity: .68;
      background-image:
        linear-gradient(rgba(77, 145, 242, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77, 145, 242, .055) 1px, transparent 1px);
    }
    .slide.light::after {
      background: radial-gradient(circle at 40% 35%, rgba(126, 166, 246, .24), rgba(220, 235, 254, .12) 48%, transparent 70%);
    }

    .eyebrow::before,
    .progress > i {
      background: var(--vi-gradient-strong);
    }
    .kicker { color: rgba(220, 235, 254, .67); }
    .light .kicker { color: rgba(17, 24, 39, .64); }
    .accent { color: #a9c7fb; }
    .light .accent { color: #356fc6; }
    .orange { color: var(--vi-blue); }
    .chip { border-color: rgba(220, 235, 254, .34); background: rgba(77, 145, 242, .07); }
    .light .chip { border-color: rgba(77, 145, 242, .32); background: rgba(220, 235, 254, .46); }
    .chip i {
      background: var(--vi-blue);
      box-shadow: 0 0 18px rgba(77, 145, 242, .72);
    }

    /* Hero: black-led, with a restrained blue atmospheric wash. */
    .hero { background: var(--vi-night); }
    .hero-bg { filter: saturate(.72) contrast(1.03) hue-rotate(7deg); opacity: .72; }
    .hero-shade {
      background:
        linear-gradient(90deg, rgba(2, 6, 14, .98) 0%, rgba(5, 13, 27, .82) 38%, rgba(8, 20, 38, .12) 76%),
        linear-gradient(0deg, rgba(4, 10, 20, .88), transparent 45%),
        radial-gradient(circle at 74% 18%, rgba(77, 145, 242, .22), transparent 36%);
    }
    .hero .tagline { color: rgba(235, 244, 255, .78); }
    .scroll-cue b { border-color: rgba(220, 235, 254, .28); background: rgba(77, 145, 242, .08); }

    /* Friction story: blue intensity replaces the previous warm warning colour. */
    .funnel-row { border-color: rgba(77, 145, 242, .17); background: rgba(255, 255, 255, .70); }
    .funnel-row::after { background: color-mix(in srgb, var(--vi-blue) var(--tone), transparent); }
    .funnel-row em { color: #2e6fc9; }
    .pain-point { border-top-color: rgba(77, 145, 242, .20); }
    .pain-point b { color: var(--vi-blue); }

    .loss-slide {
      background:
        radial-gradient(circle at 86% 12%, rgba(77, 145, 242, .18), transparent 32%),
        linear-gradient(145deg, #081426, #03060b 70%);
    }
    .loss-slide::after { background: radial-gradient(circle at 40% 35%, rgba(126, 166, 246, .18), transparent 66%); }
    .loss-head h2 span,
    .loss-funnel-caption .to,
    .loss-reason b { color: var(--vi-blue); }
    .loss-stat strong,
    .loss-funnel-caption .from { color: #a9c7fb; }
    .loss-stat span { color: rgba(220, 235, 254, .60); }
    .loss-funnel {
      background: rgba(126, 166, 246, .24);
      filter: drop-shadow(0 22px 36px rgba(0, 0, 0, .34));
    }
    .loss-stage { color: var(--vi-white); }
    .loss-stage.s1 { --stage-bg: linear-gradient(90deg, rgba(220, 235, 254, .10), rgba(220, 235, 254, .18)); }
    .loss-stage.s2 { --stage-bg: linear-gradient(90deg, rgba(126, 166, 246, .24), rgba(126, 166, 246, .38)); }
    .loss-stage.s3 { --stage-bg: linear-gradient(90deg, rgba(77, 145, 242, .46), rgba(77, 145, 242, .68)); }
    .loss-stage.s4 {
      --stage-bg: var(--vi-gradient-strong);
      color: #031020;
      box-shadow: inset 0 0 36px rgba(220, 235, 254, .18);
    }
    .loss-reason {
      border-color: rgba(220, 235, 254, .18);
      border-left-color: rgba(77, 145, 242, .9);
      background: linear-gradient(90deg, rgba(77, 145, 242, .10), rgba(126, 166, 246, .025));
    }
    .loss-reason::before { border-top-color: rgba(126, 166, 246, .58); }
    .loss-reason p { color: rgba(220, 235, 254, .56); }
    .loss-source { color: rgba(220, 235, 254, .40); }

    .path-title span { color: var(--vi-blue); }
    .pain-card {
      border-color: rgba(220, 235, 254, .20);
      background: linear-gradient(145deg, rgba(126, 166, 246, .075), rgba(255, 255, 255, .018));
    }
    .pain-card .num { color: var(--vi-blue); }
    .pain-card p { color: rgba(220, 235, 254, .63); }

    .manifesto .orbit { border-color: rgba(126, 166, 246, .19); }
    .manifesto .orbit::before { border-color: rgba(77, 145, 242, .27); }
    .manifesto .orbit::after {
      background: var(--vi-gradient);
      box-shadow: 0 0 42px rgba(77, 145, 242, .78);
    }
    .manifesto p { color: rgba(220, 235, 254, .68); }

    .loop-heading h2::before { color: rgba(17, 24, 39, .52); }
    .loop-steps,
    .loop-step { border-color: rgba(77, 145, 242, .19); }
    .loop-step:hover { background: rgba(126, 166, 246, .22); }
    .loop-step .dot { background: var(--vi-night-blue); color: var(--vi-white); box-shadow: 0 8px 24px rgba(77, 145, 242, .18); }

    .video-frame,
    .case-media { background: #06101e; border-color: rgba(126, 166, 246, .24); }
    .video-frame video.brand-video { background: #030811; }
    .video-frame::after,
    .case-media::after {
      background: rgba(5, 12, 24, .74);
      border-color: rgba(126, 166, 246, .28);
    }
    .cap-stack { border-top-color: rgba(220, 235, 254, .20); }
    .cap-item { border-bottom-color: rgba(220, 235, 254, .20); }
    .cap-item .index { color: var(--vi-blue); }
    .cap-item p { color: rgba(220, 235, 254, .62); }

    .matrix-card { border-color: rgba(77, 145, 242, .20); background: var(--vi-ice); }
    .matrix-card::after { background: linear-gradient(0deg, rgba(3, 8, 18, .94), rgba(8, 20, 38, .04) 64%); }
    .matrix-card .copy { color: var(--vi-white); }

    .stakeholder { border-bottom-color: rgba(77, 145, 242, .20); }
    .stakeholder .badge { border-color: rgba(77, 145, 242, .31); background: rgba(220, 235, 254, .42); }
    .stakeholder .arrow { color: var(--vi-blue); }
    .closure {
      background: linear-gradient(110deg, var(--vi-night-blue), #0b2243);
      color: var(--vi-white);
      box-shadow: inset 0 1px rgba(126, 166, 246, .22);
    }
    .closure p { color: rgba(220, 235, 254, .64); }

    .industry { border-color: rgba(220, 235, 254, .20); background: rgba(126, 166, 246, .025); }
    .industry:hover { border-color: var(--vi-periwinkle); background: rgba(77, 145, 242, .10); }
    .industry .industry-no { color: var(--vi-blue); }
    .industry p { color: rgba(220, 235, 254, .60); }
    .industry strong { color: #a9c7fb; }

    .case-copy .detail { color: rgba(220, 235, 254, .62); }
    .case-brand-taobao { color: var(--vi-white); }
    .case-brand-taobao b { color: #a9c7fb; }
    .case-title .meta { color: rgba(220, 235, 254, .58); }
    .case-title-shift { color: var(--vi-white); }
    .case-logo-image { filter: grayscale(1) brightness(2.05) contrast(.86); }

    .brand-wall-footer {
      border-top-color: rgba(126, 166, 246, .24);
      background: rgba(4, 10, 20, .94);
      box-shadow: 0 -18px 45px rgba(2, 7, 14, .22);
    }
    .light .brand-wall-footer {
      border-top-color: rgba(77, 145, 242, .18);
      background: rgba(246, 249, 255, .94);
      box-shadow: 0 -18px 45px rgba(77, 145, 242, .07);
    }
    .brand-row + .brand-row { border-top-color: rgba(126, 166, 246, .12); }
    .light .brand-row + .brand-row { border-top-color: rgba(77, 145, 242, .10); }
    .brand-item { border-right-color: rgba(126, 166, 246, .11); }
    .light .brand-item { border-right-color: rgba(77, 145, 242, .10); }
    .brand-item img { filter: grayscale(1) brightness(2.25) sepia(.08) hue-rotate(170deg); opacity: .52; }
    .light .brand-item img { filter: grayscale(1) contrast(.76) sepia(.12) hue-rotate(170deg); opacity: .59; }

    .cta { background: var(--vi-night); }
    .cta-bg { opacity: .34; filter: saturate(.66) contrast(1.1) hue-rotate(8deg); }
    .cta-shade {
      background:
        linear-gradient(90deg, rgba(2, 6, 14, .99) 0%, rgba(5, 15, 30, .87) 45%, rgba(8, 22, 43, .38)),
        linear-gradient(0deg, rgba(3, 9, 19, .84), transparent),
        radial-gradient(circle at 82% 18%, rgba(77, 145, 242, .21), transparent 34%);
    }
    .cta-link { border-bottom-color: rgba(220, 235, 254, .20); }
    .cta-link:hover { color: #a9c7fb; }
    .cta-qr img { border-color: rgba(126, 166, 246, .34); box-shadow: 0 16px 45px rgba(0, 0, 0, .28); }
    .cta-qr figcaption { color: rgba(220, 235, 254, .64); }

    .video-zoom-badge,
    .video-lightbox-close {
      color: var(--vi-white);
      background: rgba(5, 12, 24, .76);
      border-color: rgba(126, 166, 246, .30);
    }
    .video-lightbox { color: var(--vi-white); }
    .video-lightbox::backdrop { background: rgba(1, 4, 10, .90); }
    .video-lightbox video { background: #000; border-color: rgba(126, 166, 246, .26); box-shadow: 0 2rem 6rem rgba(0, 0, 0, .58); }
    .video-lightbox-title { color: rgba(220, 235, 254, .72); }

    .nav-dot { background: rgba(220, 235, 254, .32); box-shadow: 0 0 0 1px rgba(5, 12, 24, .32); }
    .nav-dot.active { background: var(--vi-blue); box-shadow: 0 0 14px rgba(77, 145, 242, .66); }
    .progress { background: rgba(126, 166, 246, .10); }
    .counter { color: rgba(220, 235, 254, .66); }

    @media (max-width: 760px) {
      .hero-shade {
        background:
          linear-gradient(90deg, rgba(2, 6, 14, .96), rgba(7, 18, 35, .58)),
          linear-gradient(0deg, rgba(3, 9, 19, .92), transparent 65%),
          radial-gradient(circle at 72% 18%, rgba(77, 145, 242, .20), transparent 34%);
      }
    }