/* =========================================================================
   DBR77 — Industrial Intelligence Platform · Investor Pitch Deck 2026
   Premium VC-grade design system · Montserrat exclusive · 1920×1080
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
    --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Surfaces */
    --bg: #07061b;
    --bg-2: #0d0a2b;
    --bg-3: #100f34;
    --surface: #14152e;
    --surface-2: #1a1c3a;
    --surface-elev: #20234a;

    /* Text */
    --txt: #ffffff;
    --txt-2: #c9cae3;
    --txt-3: #94a3b8;
    --txt-4: #64748b;
    --txt-5: #475569;

    /* Borders & strokes */
    --line: rgba(255, 255, 255, 0.07);
    --line-2: rgba(255, 255, 255, 0.14);
    --line-3: rgba(255, 255, 255, 0.22);

    /* Brand accents (locked per brand kit) */
    --iot: #10b981;
    --iot-d: #047857;
    --dt: #2563eb;
    --dt-d: #1d4ed8;
    --iris: #a020f0;
    --iris-d: #7b1ebd;
    --mp: #92004f;
    --mp-d: #6d003a;
    --cn: #c9447e;
    --cn-d: #8a2456;

    /* Semantic */
    --warn: #f59e0b;
    --ok: #10b981;
    --err: #ef4444;
    --info: #3b82f6;

    /* Per-slide accent default */
    --accent: #a020f0;
    --accent-2: #2563eb;

    /* Type scale (px @ 1920) */
    --t-display: 108px;
    --t-h1: 92px;
    --t-h2: 56px;
    --t-h3: 28px;
    --t-h4: 18px;
    --t-lead: 22px;
    --t-body: 14.5px;
    --t-label: 11px;
    --t-meta: 10.5px;

    /* Type scale — design system extension (cards, micro UI) */
    --t-card-title: 17px;
    --t-card-body: 12.5px;
    --t-card-eyebrow: 10.5px;
    --t-card-tag: 10.5px;
    --t-micro: 10.5px;
    --t-pill: 10px;
    --t-foot: 11px;

    /* Geometry */
    --slide-w: 1920px;
    --slide-h: 1080px;
    --pad-x: 96px;
    --pad-y: 72px;

    /* Radius rhythm — only these values across the deck */
    --radius-xs: 4px;     /* chips, pills (small) */
    --radius-sm: 8px;     /* small cards, buttons */
    --radius: 10px;       /* inner cells, secondary panels */
    --radius-md: 12px;    /* primary cards */
    --radius-lg: 14px;    /* hero cards */
    --radius-xl: 16px;    /* panels */

    /* Spacing rhythm — design system */
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 14px;
    --space-lg: 22px;
    --space-xl: 36px;

    /* Card system tokens — coherent across all slides */
    --card-pad-sm: 14px 16px;
    --card-pad: 18px 22px;
    --card-pad-lg: 22px 26px;
    --card-bg: linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.005));
    --card-bg-soft: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
    --card-border: 1px solid var(--line);
    --card-border-hover: 1px solid var(--line-2);
    --card-shadow: 0 12px 28px -16px rgba(0,0,0,0.45);
    --card-shadow-hover: 0 18px 38px -16px rgba(0,0,0,0.6);

    /* Coda / head rhythm */
    --coda-margin-top: 22px;
    --head-centered-mb: 32px;

    /* Motion */
    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* -------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: #000; }

body {
    font-family: var(--font);
    color: var(--txt);
    background-color: var(--bg);
    overflow: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
em, i, cite, address { font-style: normal; }
::selection { background: var(--iris); color: #fff; }

/* -------------------------------------------------------------------------
   3. Ambient atmosphere
   ------------------------------------------------------------------------- */
.ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(160, 32, 240, 0.10), transparent 60%),
        radial-gradient(ellipse at 100% 80%, rgba(37, 99, 235, 0.10), transparent 60%),
        var(--bg);
}

.ambient-grid {
    position: absolute;
    inset: -1px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
    background-size: 96px 96px;
}

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.45;
    mix-blend-mode: screen;
    animation: orbDrift 24s ease-in-out infinite alternate;
}

.ambient-orb--a {
    width: 720px; height: 720px;
    top: -120px; left: -160px;
    background: radial-gradient(circle, #a020f0 0%, transparent 70%);
}

.ambient-orb--b {
    width: 820px; height: 820px;
    bottom: -240px; right: -200px;
    background: radial-gradient(circle, #2563eb 0%, transparent 70%);
    animation-delay: -12s;
}

@keyframes orbDrift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, 40px) scale(1.06); }
}

.ambient-noise {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   4. Header
   ------------------------------------------------------------------------- */
.deck-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(7, 6, 27, 0.65);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--line);
    z-index: 200;
}

.deck-logo { display: flex; align-items: center; gap: 16px; transition: opacity 0.18s var(--ease); }
.deck-logo:hover { opacity: 0.82; }

.logo-mark { height: 26px; width: auto; }
.logo-divider { width: 1px; height: 18px; background: var(--line-3); }
.logo-subtext { font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; color: var(--txt-4); }

.deck-header-actions { display: flex; gap: 10px; align-items: center; }

.hbtn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 18px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; border-radius: 8px;
    transition: all 0.18s var(--ease); white-space: nowrap;
}

.hbtn--ghost {
    color: var(--txt-2);
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, 0.02);
}
.hbtn--ghost:hover { color: var(--txt); border-color: var(--line-3); background: rgba(255, 255, 255, 0.06); }

.hbtn--primary {
    color: #fff;
    background: linear-gradient(135deg, #a020f0 0%, #2563eb 100%);
    border: 1px solid transparent;
    position: relative;
}
.hbtn--primary::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #b232ff 0%, #3473ff 100%);
    opacity: 0;
    transition: opacity 0.18s var(--ease);
}
.hbtn--primary:hover::before { opacity: 1; }
.hbtn--primary > * { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   5a. Floating prev/next nav arrows
   ------------------------------------------------------------------------- */
.nav-arrow {
    position: fixed;
    bottom: 24px;
    z-index: 195;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 22px;
    color: var(--txt-2);
    background: rgba(20, 21, 46, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    transition: all 0.22s var(--ease);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.nav-arrow:hover {
    color: var(--txt);
    border-color: rgba(160, 32, 240, 0.6);
    background: rgba(160, 32, 240, 0.22);
    box-shadow: 0 8px 24px -10px rgba(160, 32, 240, 0.5);
    transform: translateY(-2px);
}

.nav-arrow:active { transform: translateY(0) scale(0.96); }

.nav-arrow:disabled {
    opacity: 0.28;
    pointer-events: none;
}

.nav-arrow--prev { left: 24px; }
.nav-arrow--next { right: 24px; }

.nav-arrow-label {
    display: inline-block;
    line-height: 1;
}

/* -------------------------------------------------------------------------
   5. Sidebar
   ------------------------------------------------------------------------- */
.deck-sidebar {
    position: fixed; top: 50%; right: 24px;
    transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center;
    gap: 18px;
    padding: 18px 11px;
    background: rgba(20, 21, 46, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--line);
    border-radius: 8px;
    z-index: 190;
}

.slide-indicator { font-size: 11px; font-weight: 600; color: var(--txt-3); letter-spacing: 0.08em; }
.slide-indicator .current-idx { color: var(--txt); }
.slide-indicator .divider { color: var(--txt-4); margin: 0 3px; }

.dots-container { display: flex; flex-direction: column; gap: 8px; }

.nav-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: all 0.18s var(--ease);
    position: relative;
}
.nav-dot:hover { background: rgba(255, 255, 255, 0.5); transform: scale(1.2); }
.nav-dot.is-active {
    width: 22px; border-radius: 4px;
    background: linear-gradient(90deg, #a020f0, #2563eb);
}

.nav-dot[data-title]::before {
    content: attr(data-title);
    position: absolute; right: calc(100% + 14px); top: 50%;
    transform: translateY(-50%);
    padding: 5px 11px;
    background: var(--surface-elev);
    border: 1px solid var(--line-2);
    border-radius: 4px;
    font-size: 10.5px; font-weight: 500; color: var(--txt);
    white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity 0.18s var(--ease);
    letter-spacing: 0.02em;
}
.nav-dot:hover::before { opacity: 1; }

.keyboard-hint {
    font-size: 10.5px; font-weight: 600; color: var(--txt-4);
    letter-spacing: 0.2em; padding-top: 6px;
    border-top: 1px solid var(--line);
}

/* -------------------------------------------------------------------------
   6. Viewport + slides
   ------------------------------------------------------------------------- */
.presentation-viewport {
    position: fixed;
    top: 50%; left: 50%;
    width: var(--slide-w);
    height: var(--slide-h);
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
    background: var(--bg);
    overflow: hidden;
    z-index: 1;
    border-radius: 4px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 60px 120px -20px rgba(0, 0, 0, 0.5);
}

.slide {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    padding: var(--pad-y) var(--pad-x);
    display: none;
    flex-direction: column;
    background: var(--bg);
    --accent: #a020f0;
    --accent-2: #2563eb;
}

.slide.is-active { display: flex; animation: slideIn 0.55s var(--ease) both; }

@keyframes slideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* stagger reveal for direct children of slide-body */
.slide.is-active .slide-body > * { animation: fadeUp 0.65s var(--ease) both; }
.slide.is-active .slide-body > *:nth-child(1) { animation-delay: 0.05s; }
.slide.is-active .slide-body > *:nth-child(2) { animation-delay: 0.13s; }
.slide.is-active .slide-body > *:nth-child(3) { animation-delay: 0.21s; }
.slide.is-active .slide-body > *:nth-child(4) { animation-delay: 0.29s; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide--accent-iris { --accent: #a020f0; --accent-2: #c346ff; }
.slide--accent-dt   { --accent: #2563eb; --accent-2: #60a5fa; }

/* -------------------------------------------------------------------------
   7. Slide head/foot
   ------------------------------------------------------------------------- */
.slide-head { margin-bottom: 36px; flex-shrink: 0; }

.category-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--t-label); font-weight: 700;
    letter-spacing: 0.22em; color: var(--txt-3);
    text-transform: uppercase;
    padding: 6px 0;
    margin-bottom: 22px;
}
.tag-bullet { color: var(--accent); font-size: 10px; }

.slide-overline {
    font-size: 15px; font-weight: 500;
    color: var(--txt-2); letter-spacing: 0.04em;
    margin-bottom: 14px;
    line-height: 1.45;
}
.slide-overline strong { color: var(--txt); font-weight: 600; }

.slide-overline--center {
    text-align: center;
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 500;
    color: var(--txt-2);
    letter-spacing: 0.06em;
    line-height: 1.5;
    max-width: 1280px;
}

.slide-title {
    font-size: var(--t-h2);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.028em;
    color: var(--txt);
    max-width: 1620px;
}
.slide-title em {
    font-style: normal;
    font-weight: 500;
    color: var(--txt-2);
}
.title-em {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}
.title-em--iris { background: linear-gradient(135deg, #a020f0, #c346ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title-em--dt   { background: linear-gradient(135deg, #2563eb, #60a5fa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title-em--mp   { background: linear-gradient(135deg, #92004f, #c9447e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title-em--rose { background: linear-gradient(135deg, #c346ff, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title-em--ok   { background: linear-gradient(135deg, #10b981, #34d399); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title-em--grad { background: linear-gradient(135deg, #10b981, #2563eb 50%, #a020f0); -webkit-background-clip: text; background-clip: text; color: transparent; }

.slide-deck {
    font-size: var(--t-lead);
    font-weight: 400;
    line-height: 1.45;
    color: var(--txt-2);
    margin-top: 22px;
    max-width: 1280px;
    letter-spacing: -0.005em;
}
.slide-deck strong { color: var(--txt); font-weight: 600; }
.slide-deck em { color: var(--txt); font-style: normal; font-weight: 500; }
.qm { color: var(--txt-3); font-style: normal; }

.slide-body {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
}

.slide-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 18px;
    margin-top: 28px;
    border-top: 1px solid var(--line);
    font-size: var(--t-foot);
    font-weight: 600;
    color: var(--txt-4);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.slide-foot span:last-child { color: var(--txt-2); font-weight: 700; font-feature-settings: "tnum"; }

/* -------------------------------------------------------------------------
   8. SLIDE 1 — Cover
   ------------------------------------------------------------------------- */
.slide--cover {
    position: relative;
    padding: 56px 96px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(160, 32, 240, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(37, 99, 235, 0.18) 0%, transparent 50%),
        var(--bg);
}

.cover-aurora { position: absolute; inset: 0; pointer-events: none; }
.aurora-blob { position: absolute; border-radius: 50%; filter: blur(100px); mix-blend-mode: screen; }
.aurora-blob--1 { width: 700px; height: 700px; top: -120px; left: -100px; background: radial-gradient(circle, #a020f0 0%, transparent 65%); opacity: 0.6; }
.aurora-blob--2 { width: 800px; height: 800px; top: 30%; right: -160px; background: radial-gradient(circle, #2563eb 0%, transparent 65%); opacity: 0.55; }
.aurora-blob--3 { width: 500px; height: 500px; bottom: -120px; left: 30%; background: radial-gradient(circle, #10b981 0%, transparent 70%); opacity: 0.30; }

.cover-top, .cover-foot, .cover-body { position: relative; z-index: 1; }

.cover-top {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.cover-mark, .cover-confidential {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.22em; color: var(--txt-3);
}
.cover-confidential { color: var(--warn); }

.cover-body {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    gap: 26px;
    padding-top: 60px;
}

.cover-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.20em; text-transform: uppercase;
    color: var(--txt-2);
}
.eyebrow-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
    animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.05); }
}

.cover-title {
    font-size: var(--t-display);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.045em;
    color: var(--txt);
    white-space: nowrap;
}
.cover-title-grad {
    background: linear-gradient(135deg, #a020f0 0%, #2563eb 50%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

.cover-lead {
    font-size: 26px;
    font-weight: 500;
    color: var(--txt-2);
    letter-spacing: 0.04em;
    line-height: 1.4;
    max-width: 900px;
}

.cover-engine {
    display: inline-flex; align-items: center; gap: 18px;
    padding: 16px 26px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    align-self: flex-start;
}
.engine-pulse {
    width: 10px; height: 10px;
    background: #a020f0;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(160, 32, 240, 0.2), 0 0 16px rgba(160, 32, 240, 0.5);
    animation: pulseDot 2s ease-in-out infinite;
}
.engine-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; color: #a020f0; }
.engine-divider { width: 1px; height: 14px; background: var(--line-2); }
.engine-value { font-size: 14px; font-weight: 500; color: var(--txt); }
.engine-value strong { font-weight: 700; }

.cover-foot {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
.presenter { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; border-left: 2px solid var(--accent); }
.presenter--meta { border-left-color: var(--ok); }
.presenter-name { font-size: 16px; font-weight: 600; color: var(--txt); letter-spacing: -0.005em; }
.presenter-role { font-size: 11px; font-weight: 500; color: var(--txt-3); letter-spacing: 0.08em; text-transform: uppercase; }

/* -------------------------------------------------------------------------
   8b. NARRATIVE FORMULA — corner tag · centered head · 3 columns · bottom coda
        (slide 2 — also reusable for any "title + 3 columns + slogan" slide)
   ------------------------------------------------------------------------- */
.slide--narrative {
    padding: 56px 96px 48px;
    position: relative;
}

.slide-tag-corner {
    position: absolute;
    top: 48px;
    right: 96px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--txt-2);
    background: rgba(255, 255, 255, 0.030);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 5;
}
.slide-tag-corner .tag-bullet {
    color: var(--accent);
    font-size: 10px;
}
.slide-tag-corner--warn .tag-bullet { color: var(--warn); }
.slide-tag-corner--ok   .tag-bullet { color: var(--ok); }
.slide-tag-corner--dt   .tag-bullet { color: var(--dt); }
.slide-tag-corner--iris .tag-bullet { color: var(--iris); }
.slide-tag-corner--rose .tag-bullet { color: #ec4899; }
.slide-tag-corner--mp   .tag-bullet { color: #c9447e; }
.slide-tag-corner--info .tag-bullet { color: var(--info); }

.tag-divider {
    width: 1px;
    height: 11px;
    background: var(--line-3);
}

.tag-sub {
    color: var(--txt-3);
    font-weight: 600;
    letter-spacing: 0.18em;
}

.slide-head--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1500px;
    margin: 0 auto 48px;
}

.slide-head--no-tag { margin-top: 36px; }

.slide-head--centered .category-tag {
    margin-bottom: 22px;
}

.slide-title--center {
    text-align: center;
    max-width: 1400px;
}

.title-em--warn {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: normal;
    font-weight: 600;
}

.slide-deck--center {
    text-align: center;
    max-width: 1200px;
    color: var(--txt-2);
    margin-left: auto;
    margin-right: auto;
}
.slide-deck--center strong {
    color: var(--txt);
    font-weight: 700;
}

/* 3-column grid for the body — subgrid keeps head / title / divider / desc
   on identical Y baselines across all 3 cards, regardless of content length. */
.three-col-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 24px;
    row-gap: 0;
    flex: 1;
    min-height: 0;
}

.col-card {
    position: relative;
    padding: 44px 40px 60px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.025) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.005) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
    overflow: hidden;
    transition: transform 0.30s var(--ease), border-color 0.30s var(--ease), box-shadow 0.30s var(--ease);
    --cc: #ffffff;
}

.col-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cc), transparent);
    opacity: 0.85;
}

.col-card::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: 50%;
    width: 240px;
    height: 240px;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--cc), transparent 60%);
    opacity: 0.06;
    pointer-events: none;
    transition: opacity 0.30s var(--ease);
}

.col-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-2);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
}

.col-card:hover::after { opacity: 0.14; }

/* Problem chapter (slides 2 & 3) — both unified under DBR77 purple */
.col-card--warn { --cc: #a020f0; }
.col-card--info { --cc: #a020f0; }
.col-card--ok   { --cc: #10b981; }

.col-card-head {
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 26px;
}

.col-num {
    font-size: 48px;
    font-weight: 200;
    color: var(--cc);
    line-height: 1;
    letter-spacing: -0.04em;
    font-feature-settings: "tnum";
    flex-shrink: 0;
}

.col-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--cc), transparent);
    opacity: 0.35;
}

.col-title {
    grid-row: 2;
    font-size: 28px;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.25;
    letter-spacing: -0.018em;
}

/* Row 3 = visible divider (consistent baseline across all cards via subgrid) */
.col-divider {
    grid-row: 3;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
    align-self: end;
    margin-top: 24px;
    opacity: 0.9;
}

/* Row 4 = breathing space — flexible spacer (1fr) so dividers align */
/* Row 5 = description, anchored under the divider */
.col-desc {
    grid-row: 5;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--txt-3);
    letter-spacing: -0.002em;
    padding-top: 18px;
}
.col-desc strong { color: var(--txt); font-weight: 700; }
.col-desc em { color: var(--txt-2); font-weight: 500; }

/* Color-only emphasis inside col-desc — no bold, no italic, just accent tint */
.col-hi {
    color: var(--cc);
    font-weight: 500;
}

/* Source / citation pin (bottom-right) — placeholder until articles are linked */
.col-source {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line-2);
    color: var(--txt-4);
    transition: all 0.20s var(--ease);
    z-index: 3;
}
.col-source:hover {
    color: var(--cc);
    border-color: var(--cc);
    background: color-mix(in srgb, var(--cc) 12%, transparent);
    transform: scale(1.08);
}
.col-source[data-citation-pending="true"] {
    border-style: dashed;
}

/* Bottom coda — centered punchline statement */
.slide-coda {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: 1500px;
    margin: 36px auto 0;
    padding: 0 8px;
}

.coda-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-3), transparent);
}

.coda-text {
    font-size: 22px;
    font-weight: 400;
    color: var(--txt-2);
    line-height: 1.45;
    letter-spacing: -0.005em;
    text-align: center;
    max-width: 1100px;
    flex-shrink: 0;
}

.coda-text em {
    color: var(--txt);
    font-weight: 500;
}

.coda-text strong {
    background: linear-gradient(135deg, var(--coda-grad-a, #a020f0), var(--coda-grad-b, #c346ff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

/* Color-only emphasis for the coda punchline — replaces previous bold+gradient */
.coda-hi {
    background: linear-gradient(135deg, var(--coda-grad-a, #a020f0), var(--coda-grad-b, #c346ff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

/* Default coda fallback — DBR77 purple (replaces old yellow fallback) */
.slide-coda { --coda-grad-a: #a020f0; --coda-grad-b: #c346ff; }

.slide-coda--warn { --coda-grad-a: #fbbf24; --coda-grad-b: #f59e0b; }
.slide-coda--iris { --coda-grad-a: #a020f0; --coda-grad-b: #c346ff; }
.slide-coda--ok   { --coda-grad-a: #10b981; --coda-grad-b: #34d399; }
.slide-coda--dt   { --coda-grad-a: #60a5fa; --coda-grad-b: #2563eb; }
.slide-coda--mp   { --coda-grad-a: #c9447e; --coda-grad-b: #92004f; }
.slide-coda--rose { --coda-grad-a: #c346ff; --coda-grad-b: #ec4899; }
.slide-coda--info { --coda-grad-a: #60a5fa; --coda-grad-b: #2563eb; }

/* -------------------------------------------------------------------------
   9. Generic two-column layouts
   ------------------------------------------------------------------------- */
.two-col-65-35 {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    gap: 32px;
    flex: 1; min-height: 0;
    align-items: stretch;
}

.col-cards { display: flex; flex-direction: column; gap: 14px; }

/* -------------------------------------------------------------------------
   10. Surface card primitive (problem cards on slides 2, 3)
   ------------------------------------------------------------------------- */
.surface-card {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 22px; align-items: start;
    padding: 24px 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: all 0.28s var(--ease);
    overflow: hidden;
}

.surface-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0;
    transition: opacity 0.28s var(--ease);
}

.surface-card:hover {
    transform: translateY(-2px);
    border-color: var(--line-2);
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
}
.surface-card:hover::before { opacity: 0.6; }

.surface-card--problem {
    --accent: #a020f0;
}

.card-index {
    font-size: 30px;
    font-weight: 200;
    color: var(--txt-3);
    letter-spacing: -0.02em;
    line-height: 1;
    font-feature-settings: "tnum";
}

.surface-card--problem .card-index { color: var(--iris); opacity: 0.75; }

.card-body h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.card-body p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--txt-3);
}

/* -------------------------------------------------------------------------
   11. Key takeaway block
   ------------------------------------------------------------------------- */
.key-takeaway {
    position: relative;
    padding: 32px 32px;
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.07), transparent 50%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    display: flex; flex-direction: column; gap: 18px;
    overflow: hidden;
}

.key-eyebrow {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.24em; color: var(--warn);
}

.key-text {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--txt);
    letter-spacing: -0.005em;
}
.key-text strong { font-weight: 700; color: var(--warn); }

.key-vis { display: flex; flex-direction: column; gap: 6px; margin-top: auto; opacity: 0.6; }
.kv-line { display: block; height: 1px; background: linear-gradient(90deg, var(--warn), transparent); width: 100%; }
.kv-line--gap { width: 60%; background: linear-gradient(90deg, var(--line-3), transparent); }

/* -------------------------------------------------------------------------
   12. SLIDE 4 — Industrial Intelligence Loop (circular diagram + flanks)
   ------------------------------------------------------------------------- */
.slide--loop .loop-stage-wrap {
    display: grid;
    grid-template-columns: 1fr 600px 1fr;
    gap: 36px;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

/* ----- SIDE FLANK PANELS ----- */
.loop-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px 30px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
    justify-content: center;
}

.loop-side--neg {
    border-color: rgba(245, 158, 11, 0.16);
    background:
        radial-gradient(circle at 0% 0%, rgba(245, 158, 11, 0.05), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
}
.loop-side--pos {
    border-color: rgba(16, 185, 129, 0.25);
    background:
        radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.07), transparent 55%),
        linear-gradient(180deg, rgba(16, 185, 129, 0.03), rgba(255,255,255,0.005));
}

.loop-side-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.loop-side-mark {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.loop-side-mark--neg { background: rgba(245, 158, 11, 0.12); color: var(--warn); border: 1px solid rgba(245, 158, 11, 0.40); }
.loop-side-mark--pos { background: rgba(16, 185, 129, 0.14); color: var(--ok);   border: 1px solid rgba(16, 185, 129, 0.45); }

.loop-side-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.loop-side-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.loop-side-list--broken li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 10px 14px 10px 4px;
    font-size: 14px;
    color: var(--txt-3);
    line-height: 1.5;
    letter-spacing: -0.005em;
}
.loop-side-list--broken .ls-mark {
    color: var(--warn);
    opacity: 0.55;
    font-weight: 700;
    text-align: center;
}

.loop-side-list--connected {
    position: relative;
    padding-left: 8px;
}
.ls-thread {
    position: absolute;
    left: 19px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: linear-gradient(180deg, #10b981 0%, #2563eb 25%, #a020f0 50%, #92004f 75%, #c9447e 100%);
    border-radius: 2px;
    opacity: 0.55;
}
.loop-side-list--connected li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 10px 10px 10px 0;
    font-size: 14.5px;
    color: var(--txt);
    line-height: 1.5;
    letter-spacing: -0.005em;
    position: relative;
}
.ls-num {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: var(--bg);
    border: 1.5px solid var(--ln-c, var(--txt-3));
    color: var(--ln-c, var(--txt-2));
    border-radius: 999px;
    width: 30px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: "tnum";
    z-index: 2;
}
.ls-num--m { --ln-c: #10b981; }
.ls-num--o { --ln-c: #2563eb; }
.ls-num--e { --ln-c: #a020f0; }
.ls-num--a { --ln-c: #92004f; }
.ls-num--r { --ln-c: #c9447e; }

.loop-side-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-2), transparent);
    margin: 4px 0 2px;
}

.loop-side-coda {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.loop-side-coda--neg { color: var(--txt-2); }
.loop-side-coda--pos { color: var(--txt); }
.lsc-hi-neg {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-weight: 700;
}
.lsc-hi-pos {
    background: linear-gradient(135deg, #34d399, #10b981);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    font-weight: 700;
}

/* ----- CENTER LOOP STAGE ----- */
.loop-stage {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 0 auto;
}

.loop-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    overflow: visible;
}

/* Subtle continuous "energy" flow on each arc */
.loop-arc {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.08));
}

/* Center label (orb) */
.loop-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(160, 32, 240, 0.22), rgba(7, 6, 27, 0.95) 65%);
    border: 1px solid rgba(160, 32, 240, 0.35);
    border-radius: 50%;
    z-index: 5;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 40px -8px rgba(160, 32, 240, 0.30);
}

.loop-center-pulse {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(160, 32, 240, 0.4);
    opacity: 0;
    animation: loopCenterPulse 3s ease-out infinite;
}
@keyframes loopCenterPulse {
    0%   { transform: scale(1);   opacity: 0.5; }
    100% { transform: scale(1.15); opacity: 0; }
}

.loop-center-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--iris);
    margin-bottom: 8px;
}

.loop-center-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: -0.015em;
    line-height: 1.15;
}

/* Phase nodes */
.loop-node {
    position: absolute;
    left: var(--lx);
    top: var(--ly);
    transform: translate(-50%, -50%);
    width: 158px;
    padding: 12px 16px 14px;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 70%),
        rgba(7, 6, 27, 0.92);
    border: 1.5px solid var(--lnc, var(--txt-3));
    border-radius: 999px;
    text-align: center;
    z-index: 4;
    box-shadow:
        0 8px 22px -6px rgba(0, 0, 0, 0.6),
        0 0 0 4px rgba(7, 6, 27, 0.6),
        0 0 20px -4px var(--lnc-glow, transparent);
    transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.loop-node:hover {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow:
        0 12px 30px -6px rgba(0, 0, 0, 0.7),
        0 0 0 4px rgba(7, 6, 27, 0.6),
        0 0 30px -4px var(--lnc-glow, rgba(255, 255, 255, 0.25));
}

.loop-node--m { --lnc: #10b981; --lnc-glow: rgba(16, 185, 129, 0.5); }
.loop-node--o { --lnc: #2563eb; --lnc-glow: rgba(37, 99, 235, 0.5); }
.loop-node--e { --lnc: #a020f0; --lnc-glow: rgba(160, 32, 240, 0.5); }
.loop-node--a { --lnc: #92004f; --lnc-glow: rgba(146, 0, 79, 0.6); }
.loop-node--r { --lnc: #c9447e; --lnc-glow: rgba(201, 68, 126, 0.5); }

.ln-step {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--lnc);
    letter-spacing: 0.20em;
    margin-bottom: 2px;
    font-feature-settings: "tnum";
}

.ln-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: -0.01em;
    line-height: 1;
    margin-bottom: 3px;
}

.ln-sub {
    font-size: 10.5px;
    color: var(--txt-3);
    line-height: 1.3;
    letter-spacing: 0.005em;
}

/* -------------------------------------------------------------------------
   13. SLIDE 5 — Platform: 5 pillars in a row + Vector engine bar
   Header / subtitle inherit narrative defaults to stay analogous to slides 2-4.
   ------------------------------------------------------------------------- */
.platform-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
}

/* --- pillars row (5 products, left-to-right flow) --- */
.pillars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    min-height: 0;
}

.pillar {
    position: relative;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(255,255,255,0.030), rgba(255,255,255,0.008));
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    transition: transform 0.30s var(--ease), border-color 0.30s var(--ease), box-shadow 0.30s var(--ease);
    --p: #ffffff;
    --p-soft: rgba(255,255,255,0.20);
}

.pillar::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--p);
    opacity: 0.9;
    z-index: 4;
}

.pillar::after {
    content: "";
    position: absolute; left: 50%; bottom: -90px;
    width: 220px; height: 220px;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--p), transparent 62%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.40s var(--ease);
    z-index: 0;
}

.pillar:hover {
    transform: translateY(-4px);
    border-color: var(--p-soft);
    box-shadow:
        0 20px 44px -28px rgba(0,0,0,0.6),
        0 0 0 1px var(--p-soft);
}
.pillar:hover::after { opacity: 0.10; }

.pillar--iot  { --p: #10b981; --p-soft: rgba(16,185,129,0.28); }
.pillar--dt   { --p: #2563eb; --p-soft: rgba(37,99,235,0.28); }
.pillar--iris { --p: #a020f0; --p-soft: rgba(160,32,240,0.30); }
.pillar--mp   { --p: #d63384; --p-soft: rgba(214,51,132,0.30); }
.pillar--cn   { --p: #f5a3c3; --p-soft: rgba(245,163,195,0.32); }

/* --- product thumbnail (uniform across all cards, soft fade into card body) --- */
.pillar-thumb {
    position: relative;
    width: 100%;
    height: 200px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #0a0928 0%, #07061b 100%);
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.pillar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.50s var(--ease), filter 0.40s var(--ease);
    filter: saturate(0.97) brightness(0.96);
}

.pillar:hover .pillar-thumb img {
    transform: scale(1.04);
    filter: saturate(1.04) brightness(1.02);
}

.pillar-thumb-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 32%;
    background: linear-gradient(180deg,
        rgba(7,6,27,0) 0%,
        rgba(7,6,27,0.28) 35%,
        rgba(7,6,27,0.72) 75%,
        rgba(7,6,27,0.95) 100%);
    pointer-events: none;
}

/* --- pillar text body --- */
.pillar-step {
    align-self: flex-start;
    margin: 14px 22px 0;
    padding: 4px 9px 3px;
    font-size: 10.5px; font-weight: 700;
    color: var(--p);
    letter-spacing: 0.22em;
    border: 1px solid var(--p-soft);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}

.pillar-name {
    margin: 10px 22px 6px;
    font-size: 20px;
    font-weight: 500;
    color: var(--txt);
    letter-spacing: -0.018em;
    line-height: 1.18;
}
.pillar-name span {
    font-weight: 700;
    color: var(--p);
}

.pillar-lead {
    margin: 0 22px 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--txt-2);
    letter-spacing: -0.005em;
    line-height: 1.38;
}

.pillar-desc {
    margin: 4px 22px 14px;
    font-size: 12.5px;
    color: var(--txt-2);
    line-height: 1.55;
}

.pillar-link {
    margin: auto 22px 18px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--txt-3);
    letter-spacing: 0.06em;
    text-transform: lowercase;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.pillar-link span {
    font-size: 12px;
    transition: transform 0.25s var(--ease);
}
.pillar:hover .pillar-link {
    color: var(--p);
    border-top-color: var(--p-soft);
}
.pillar:hover .pillar-link span {
    transform: translateX(3px);
}

/* --- Vector engine bar (full-width below pillars, clickable) --- */
.vector-engine--bar {
    position: relative;
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 22px;
    align-items: center;
    padding: 14px 26px 16px 14px;
    background:
        radial-gradient(circle at 12% 50%, rgba(160, 32, 240, 0.16), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(160, 32, 240, 0.25);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.30s var(--ease), border-color 0.30s var(--ease), box-shadow 0.30s var(--ease);
}

.vector-engine--bar::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        #10b981 0%,
        #2563eb 28%,
        #a020f0 52%,
        #d63384 76%,
        #f5a3c3 100%
    );
    z-index: 3;
}

.vector-engine--bar:hover {
    transform: translateY(-3px);
    border-color: rgba(160, 32, 240, 0.45);
    box-shadow: 0 18px 44px -22px rgba(160, 32, 240, 0.35);
}

.vector-engine--bar .vector-orb {
    width: 108px; height: 108px;
    margin: 0 auto;
}

.vector-engine--bar .vector-meta {
    display: flex; flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-right: 188px;
}

.vector-engine--bar .vector-eyebrow {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 700;
    color: #c346ff;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 3px 10px 2px;
    border: 1px solid rgba(160, 32, 240, 0.34);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(160,32,240,0.06), rgba(160,32,240,0));
}

.vector-engine--bar .vector-eyebrow .engine-bullet {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #c346ff;
    box-shadow: 0 0 8px #c346ff;
    animation: enginePulse 2.6s ease-in-out infinite;
}

@keyframes enginePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.35); }
}

.vector-engine--bar .vector-title {
    margin-top: 2px;
    font-size: 20px;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: -0.018em;
    line-height: 1.2;
}

.vector-engine--bar .vector-desc {
    font-size: 12.5px;
    color: var(--txt-2);
    line-height: 1.5;
    max-width: 1100px;
}

.vector-engine--bar .vector-desc-quiet {
    display: inline-block;
    margin-left: 8px;
    color: var(--txt-3);
}

.vector-engine--bar .vector-link {
    position: absolute;
    right: 18px;
    bottom: 14px;
    white-space: nowrap;
    padding: 9px 16px;
    border: 1px solid rgba(160, 32, 240, 0.34);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(160,32,240,0.10), rgba(160,32,240,0.02));
    font-size: 10.5px;
    font-weight: 600;
    color: #c346ff;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
    z-index: 2;
}

.vector-engine--bar .vector-link span {
    font-size: 12px;
    transition: transform 0.25s var(--ease);
}

.vector-engine--bar:hover .vector-link {
    background: linear-gradient(180deg, rgba(160,32,240,0.16), rgba(160,32,240,0.05));
    border-color: rgba(160, 32, 240, 0.55);
    color: #fff;
}
.vector-engine--bar:hover .vector-link span {
    transform: translateX(3px);
}

/* Vector engine base (still used by slide 6 mini variant) */
.vector-engine {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px; align-items: center;
    padding: 28px 40px;
    background:
        radial-gradient(circle at 20% 50%, rgba(160, 32, 240, 0.12), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(160, 32, 240, 0.22);
    border-radius: var(--radius);
}

.vector-orb {
    position: relative;
    width: 180px; height: 180px;
    margin: 0 auto;
}

.orb-core {
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #c346ff, #a020f0 40%, #5a0eb8 100%);
    box-shadow:
        0 0 40px rgba(160, 32, 240, 0.5),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    animation: orbPulse 4s ease-in-out infinite;
}

@keyframes orbPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

.orb-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(160, 32, 240, 0.35);
}
.orb-ring--1 { inset: 18%; animation: orbRotate 16s linear infinite; }
.orb-ring--2 { inset: 6%; border-color: rgba(37, 99, 235, 0.25); animation: orbRotate 24s linear infinite reverse; }
.orb-ring--3 { inset: -6%; border-color: rgba(16, 185, 129, 0.18); animation: orbRotate 32s linear infinite; border-style: dashed; }

@keyframes orbRotate {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   14. SLIDE 6 — Vector pipeline (inputs → engine → capabilities)
   Tech-spec, monospaced tags, color-coded flow: cyan-blue → iris → rose-pink.
   ------------------------------------------------------------------------- */
.slide--vector .slide-head--centered { margin-bottom: 26px; }

.vector-pipeline {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 0.58fr 1fr;
    gap: 26px;
    min-height: 0;
    align-items: stretch;
}

/* --- column tokens (per side) --- */
.vp-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    --vp: #ffffff;
    --vp-soft: rgba(255,255,255,0.22);
    --vp-glow: rgba(255,255,255,0.08);
}
.vp-col--inputs  { --vp: #60a5fa; --vp-soft: rgba(96,165,250,0.32);  --vp-glow: rgba(96,165,250,0.12); }
.vp-col--engine  { --vp: #c346ff; --vp-soft: rgba(160,32,240,0.34);  --vp-glow: rgba(160,32,240,0.16); }
.vp-col--outputs { --vp: #f472b6; --vp-soft: rgba(244,114,182,0.32); --vp-glow: rgba(244,114,182,0.12); }

/* --- column header bar (eyebrow + label) --- */
.vp-col-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.vp-col-head--right { justify-content: flex-end; text-align: right; }

.vp-col-tag {
    display: inline-flex; align-items: center;
    font-size: 10.5px; font-weight: 700;
    color: var(--vp);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 4px 11px 3px;
    border: 1px solid var(--vp-soft);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    white-space: nowrap;
}

.vp-col-title {
    font-size: 12px;
    color: var(--txt-3);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 500;
}

/* --- 4 stacked cards per column --- */
.vp-cards {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 12px;
    flex: 1;
    min-height: 0;
}

/* --- single card (icon + content) --- */
.vp-card {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.030), rgba(255,255,255,0.006));
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
}

.vp-card::before {
    content: "";
    position: absolute; top: 0; left: 14px; right: 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vp), transparent);
    opacity: 0.55;
}

.vp-card:hover {
    transform: translateY(-2px);
    border-color: var(--vp-soft);
    box-shadow: 0 14px 30px -22px rgba(0,0,0,0.5);
}

.vp-card--ou {
    grid-template-columns: 1fr 48px;
}
.vp-card--ou .vp-icon  { order: 2; }
.vp-card--ou .vp-content { order: 1; text-align: right; }

/* --- icon block --- */
.vp-icon {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background:
        radial-gradient(circle at 50% 50%, var(--vp-glow), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.005));
    border: 1px solid var(--vp-soft);
    color: var(--vp);
    flex-shrink: 0;
    align-self: center;
    transition: transform 0.30s var(--ease), background 0.30s var(--ease);
}

.vp-card:hover .vp-icon {
    transform: scale(1.06);
    background:
        radial-gradient(circle at 50% 50%, var(--vp-glow), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01));
}

.vp-icon svg {
    width: 22px; height: 22px;
}

/* --- card text --- */
.vp-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    justify-content: center;
}

.vp-num {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--vp);
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.vp-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: -0.012em;
    line-height: 1.18;
    margin-top: 2px;
}

.vp-desc {
    font-size: 13px;
    color: var(--txt-2);
    line-height: 1.5;
    margin-top: 3px;
}

/* --- ENGINE COLUMN (center) --- */
.vp-col--engine {
    align-items: stretch;
    justify-content: center;
}

.vp-engine {
    position: relative;
    width: 100%;
    padding: 30px 24px 26px;
    text-align: center;
    background:
        radial-gradient(80% 60% at 50% 40%, rgba(160, 32, 240, 0.20), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(160, 32, 240, 0.30);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    overflow: hidden;
}

.vp-engine::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #60a5fa 0%, #a020f0 50%, #f472b6 100%);
}

.vp-engine-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10.5px; font-weight: 700;
    color: #c346ff;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 4px 11px 3px;
    border: 1px solid rgba(160, 32, 240, 0.36);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(160,32,240,0.06), rgba(160,32,240,0));
}

.vp-engine-eyebrow .engine-bullet {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #c346ff;
    box-shadow: 0 0 8px #c346ff;
    animation: enginePulse 2.6s ease-in-out infinite;
}

.vp-engine-orb {
    position: relative;
    width: 158px; height: 158px;
    margin: 6px 0 2px;
}

.vp-engine-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: -0.025em;
    line-height: 1.08;
}
.vp-engine-title span {
    background: linear-gradient(135deg, #a020f0 0%, #c346ff 60%, #f472b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vp-engine-sub {
    font-size: 13px;
    color: var(--txt-3);
    line-height: 1.45;
    max-width: 280px;
    margin: -2px auto 0;
}

.vp-engine-specs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    width: 100%;
    align-items: center;
    list-style: none;
    padding: 0;
}

.vp-spec {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--txt-2);
    letter-spacing: 0.06em;
    padding: 5px 13px 4px;
    border: 1px solid rgba(160, 32, 240, 0.22);
    border-radius: 999px;
    background: rgba(160, 32, 240, 0.05);
}

.vp-spec .spec-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #c346ff;
    box-shadow: 0 0 6px rgba(195, 70, 255, 0.7);
}

/* -------------------------------------------------------------------------
   15. SLIDE 7 — Market convergence (6 Bloomberg-style ticker cards · 3×2)
   ------------------------------------------------------------------------- */
.market-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.market-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 18px;
    flex: 1;
    min-height: 0;
}

/* ─── CARD SHELL ─── */
.market-card {
    position: relative;
    padding: 20px 22px 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.006));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
    overflow: hidden;
    --mc: #ffffff;
    --mc-soft: rgba(255,255,255,0.18);
    --mc-glow: rgba(255,255,255,0.08);
}

.market-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--mc);
    opacity: 0.85;
}

.market-card:hover {
    transform: translateY(-2px);
    border-color: var(--mc-soft);
    box-shadow: 0 18px 36px -26px rgba(0,0,0,0.55);
}

/* segment color tokens */
.market-card--iot     { --mc: #10b981; --mc-soft: rgba(16,185,129,0.32);  --mc-glow: rgba(16,185,129,0.12); }
.market-card--dt      { --mc: #2563eb; --mc-soft: rgba(37,99,235,0.32);   --mc-glow: rgba(37,99,235,0.12); }
.market-card--iris    { --mc: #a020f0; --mc-soft: rgba(160,32,240,0.32);  --mc-glow: rgba(160,32,240,0.12); }
.market-card--mp      { --mc: #d946ef; --mc-soft: rgba(217,70,239,0.32);  --mc-glow: rgba(217,70,239,0.12); }
.market-card--cn      { --mc: #ec4899; --mc-soft: rgba(236,72,153,0.32);  --mc-glow: rgba(236,72,153,0.12); }
.market-card--vector  { --mc: #c346ff; --mc-soft: rgba(195,70,255,0.36);  --mc-glow: rgba(195,70,255,0.16); }

/* Vector card: rainbow top + soft inner glow */
.market-card--vector::before {
    background: linear-gradient(90deg, #60a5fa 0%, #a020f0 50%, #ec4899 100%);
    height: 3px;
    opacity: 1;
}
.market-card--vector {
    background:
        radial-gradient(70% 50% at 50% 0%, rgba(160,32,240,0.10), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.008));
    border-color: rgba(160,32,240,0.22);
}

/* "NATIVE CATEGORY" badge — only on Vector card */
.mc-badge {
    position: absolute;
    top: 14px;
    right: 56px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #c346ff;
    padding: 3px 9px 2px;
    border: 1px solid rgba(195,70,255,0.36);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(195,70,255,0.06), rgba(195,70,255,0));
    z-index: 2;
}

/* ─── HEAD (stage tag + info pin) ─── */
.mc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mc-stage {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 11px 3px;
    border: 1px solid var(--mc-soft);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
}

.mc-stage-num {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-3);
    letter-spacing: 0.18em;
    font-feature-settings: "tnum";
}

.mc-stage-bullet {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--mc);
    box-shadow: 0 0 6px var(--mc-soft);
}

.mc-stage-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--mc);
    letter-spacing: 0.22em;
}

/* info pin — same pattern as col-source */
.mc-source {
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--line-2);
    color: var(--txt-4);
    transition: all 0.20s var(--ease);
    flex-shrink: 0;
}
.mc-source:hover {
    color: var(--mc);
    border-color: var(--mc);
    background: var(--mc-glow);
    transform: scale(1.08);
}
.mc-source[data-citation-pending="true"] {
    border-style: dashed;
}

/* ─── TITLE ─── */
.mc-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--txt);
    line-height: 1.22;
    letter-spacing: -0.008em;
    margin: 2px 0 0;
}

/* ─── CHART ─── */
.mc-chart-wrap {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 96px;
    margin: 4px 0 2px;
}

.mc-chart {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.mc-axis {
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
    pointer-events: none;
}

.mc-axis-tick {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--txt-4);
    letter-spacing: 0.14em;
    font-feature-settings: "tnum";
}

.mc-axis-tick--end {
    color: var(--mc);
    opacity: 0.85;
}

/* pulsing "live data" endpoint */
.mc-pulse {
    transform-origin: center;
    transform-box: fill-box;
    animation: mcPulse 2.4s ease-in-out infinite;
}

@keyframes mcPulse {
    0%, 100% { opacity: 1; r: 3.5; }
    50%      { opacity: 0.55; r: 5.2; }
}

/* ─── TICKER ROW (OPEN → TARGET) ─── */
.mc-ticker {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0));
    margin-top: 8px;
}

.mc-tk-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mc-tk-cell--target {
    text-align: right;
    align-items: flex-end;
}

.mc-tk-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-4);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.mc-tk-year {
    color: var(--txt-3);
    font-feature-settings: "tnum";
}

.mc-tk-val {
    font-size: 15px;
    font-weight: 600;
    color: var(--txt-2);
    letter-spacing: -0.012em;
    font-feature-settings: "tnum";
    line-height: 1.1;
}

.mc-tk-val--target {
    font-size: 22px;
    font-weight: 700;
    color: var(--mc);
    letter-spacing: -0.018em;
}

.mc-tk-val--grad {
    background: linear-gradient(135deg, #60a5fa 0%, #c346ff 55%, #ec4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mc-tk-arrow {
    font-size: 18px;
    font-weight: 400;
    color: var(--mc);
    opacity: 0.65;
    line-height: 1;
}

/* ─── DELTA ROW (▲ +abs +% · CAGR) ─── */
.mc-delta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
}

.mc-delta-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px 4px;
    border-radius: 8px;
    background: var(--mc-glow);
    border: 1px solid var(--mc-soft);
    font-feature-settings: "tnum";
}

.mc-delta-pill--grad {
    background: linear-gradient(90deg, rgba(96,165,250,0.10), rgba(195,70,255,0.14), rgba(236,72,153,0.10));
    border-color: rgba(195,70,255,0.32);
}

.mc-arrow {
    font-size: 10.5px;
    color: var(--mc);
    line-height: 1;
}

.mc-delta-abs {
    font-size: 11px;
    font-weight: 700;
    color: var(--mc);
    letter-spacing: 0.01em;
}

.mc-delta-pct {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--txt-3);
    letter-spacing: 0.02em;
    padding-left: 5px;
    border-left: 1px solid var(--mc-soft);
}

.mc-cagr {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-feature-settings: "tnum";
}

.mc-cagr-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-4);
    letter-spacing: 0.20em;
}

.mc-cagr-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--mc);
    letter-spacing: -0.005em;
}

.mc-cagr--grad .mc-cagr-val {
    background: linear-gradient(135deg, #60a5fa 0%, #c346ff 55%, #ec4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* -------------------------------------------------------------------------
   16. SLIDE 8 — Business Model · Three engines
   ------------------------------------------------------------------------- */
.slide--business .slide-head--centered {
    margin-bottom: 34px;
}

.engines-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    flex: 1;
    min-height: 0;
}

.engine {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 28px 24px;
    background:
        radial-gradient(90% 54% at 50% 0%, var(--e-glow), transparent 68%),
        linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.006));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.30s var(--ease), border-color 0.30s var(--ease), box-shadow 0.30s var(--ease);
    --e: #ffffff;
    --e-soft: rgba(255,255,255,0.24);
    --e-glow: rgba(255,255,255,0.08);
}

.engine:hover {
    transform: translateY(-3px);
    border-color: var(--e-soft);
    box-shadow: 0 18px 42px -28px rgba(0,0,0,0.65);
}

.engine::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--e), transparent);
}

.engine--saas { --e: #2563eb; --e-soft: rgba(37,99,235,0.34); --e-glow: rgba(37,99,235,0.12); }
.engine--mp { --e: #d946ef; --e-soft: rgba(217,70,239,0.34); --e-glow: rgba(217,70,239,0.12); }
.engine--tk { --e: #a020f0; --e-soft: rgba(160,32,240,0.34); --e-glow: rgba(160,32,240,0.13); }

.engine--featured {
    background:
        radial-gradient(90% 54% at 50% 0%, rgba(217,70,239,0.14), transparent 68%),
        linear-gradient(180deg, rgba(217,70,239,0.045), rgba(255, 255, 255, 0.006));
    border-color: rgba(217,70,239,0.28);
}

.engine-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
}

.engine-id {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-3);
    letter-spacing: 0.18em;
    line-height: 1;
    font-feature-settings: "tnum";
}

.engine-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--e);
    padding: 5px 12px 4px;
    border: 1px solid var(--e-soft);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
}

.engine-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--e);
    box-shadow: 0 0 7px var(--e);
}

.engine-metric {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-4);
    letter-spacing: 0.20em;
    text-transform: uppercase;
    white-space: nowrap;
}

.engine-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.engine-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: var(--e);
    background:
        radial-gradient(circle at 50% 50%, var(--e-glow), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.006));
    border: 1px solid var(--e-soft);
    margin-bottom: 28px;
}

.engine-icon svg {
    width: 25px;
    height: 25px;
}

.engine-name {
    font-size: 44px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 8px;
    letter-spacing: -0.035em;
    line-height: 1;
}

.engine-lead {
    font-size: 15px;
    font-weight: 600;
    color: var(--txt-2);
    margin-bottom: 26px;
    letter-spacing: 0.01em;
}

.engine-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    margin-bottom: 26px;
}
.engine-list li {
    font-size: 13.5px;
    color: var(--txt-2);
    line-height: 1.45;
    padding-left: 18px;
    position: relative;
}
.engine-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--e);
    box-shadow: 0 0 8px var(--e-soft);
}

.engine-quote {
    font-size: 14.5px;
    font-style: normal;
    color: var(--txt);
    line-height: 1.35;
    padding: 15px 18px;
    background:
        linear-gradient(180deg, var(--e-glow), rgba(255,255,255,0.01));
    border: 1px solid var(--e-soft);
    border-radius: 10px;
    letter-spacing: -0.005em;
}

.engines-coda {
    margin-top: var(--coda-margin-top);
}

/* -------------------------------------------------------------------------
   17. SLIDE 9 — GTM · Land → Expand → Monetize (L-to-R pipeline)
   ------------------------------------------------------------------------- */
.slide--gtm .slide-head--centered { margin-bottom: 28px; }

.gtm-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-height: 0;
}

/* dominant L→R flow: phase · arrow · phase · arrow · phase */
.gtm-flow-grid {
    display: grid;
    grid-template-columns: 1fr 120px 1fr 120px 1fr;
    gap: 0;
    flex: 1;
    align-items: stretch;
    min-height: 0;
}

/* ─── PHASE CARD ─── */
.gtm-phase {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 26px 24px;
    background:
        radial-gradient(85% 50% at 50% 0%, var(--g-glow), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.006));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
    --g: #ffffff;
    --g-soft: rgba(255,255,255,0.24);
    --g-glow: rgba(255,255,255,0.08);
}

.gtm-phase:hover {
    transform: translateY(-2px);
    border-color: var(--g-soft);
    box-shadow: 0 18px 42px -28px rgba(0,0,0,0.6);
}

.gtm-phase::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--g);
    opacity: 0.9;
}

.gtm-phase--land     { --g: #2563eb; --g-soft: rgba(37,99,235,0.34);  --g-glow: rgba(37,99,235,0.12); }
.gtm-phase--expand   { --g: #10b981; --g-soft: rgba(16,185,129,0.34); --g-glow: rgba(16,185,129,0.12); }
.gtm-phase--monetize { --g: #ec4899; --g-soft: rgba(236,72,153,0.34); --g-glow: rgba(236,72,153,0.12); }

/* ─── PHASE HEAD (stage tag + title + sub) ─── */
.gp-head {
    margin-bottom: 14px;
}

/* ─── PHASE EXPLAIN (light rationale layer between head & tiles) ─── */
.gp-explain {
    position: relative;
    margin: 0 0 16px;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--txt-3);
    letter-spacing: -0.003em;
}

.gp-explain::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 36px;
    height: 1px;
    background: var(--g);
    opacity: 0.6;
}

.gp-explain-hi {
    color: color-mix(in srgb, var(--g) 70%, white);
    font-weight: 600;
}

.gp-stage {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.gp-num {
    font-size: 38px;
    font-weight: 200;
    color: var(--g);
    letter-spacing: -0.04em;
    line-height: 1;
    font-feature-settings: "tnum";
}

.gp-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 4px;
    border: 1px solid var(--g-soft);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--g);
}

.gp-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--g);
    box-shadow: 0 0 7px var(--g);
}

.gp-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.25;
    letter-spacing: -0.012em;
    margin: 0 0 8px;
}

.gp-sub {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-4);
    letter-spacing: 0.20em;
    text-transform: uppercase;
}

/* ─── PRODUCT TILES (replaces flat list) ─── */
.gp-tiles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: auto 0 0;
}

.gp-tile {
    --prod: #ffffff;
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.006));
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.24s var(--ease), border-color 0.24s var(--ease);
}

.gp-tile::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: var(--prod);
    opacity: 0.85;
}

.gp-tile:hover {
    transform: translateX(2px);
    border-color: color-mix(in srgb, var(--prod) 40%, transparent);
}

.gp-tile-badge {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--prod) 22%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.005));
    border: 1px solid color-mix(in srgb, var(--prod) 36%, transparent);
}

.gp-tile-orb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--prod);
    box-shadow: 0 0 10px var(--prod), inset 0 0 4px rgba(255,255,255,0.45);
}

.gp-tile-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.gp-tile-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: -0.008em;
}

.gp-tile-desc {
    font-size: 12.5px;
    color: var(--txt-3);
    line-height: 1.5;
}

/* ─── DOMINANT FLOW ARROWS ─── */
.gp-arrow {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
}

.gp-arrow-svg {
    width: 100%;
    height: 100%;
    max-height: 260px;
    overflow: visible;
    filter: drop-shadow(0 0 18px rgba(255,255,255,0.04));
}

.gp-arrow-label {
    position: absolute;
    bottom: 14px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-4);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gp-arrow--1 .gp-arrow-label { color: #10b981; opacity: 0.85; }
.gp-arrow--2 .gp-arrow-label { color: #ec4899; opacity: 0.85; }

/* ─── CODA OVERRIDE ─── */
.gtm-coda {
    margin-top: var(--coda-margin-top);
}

/* -------------------------------------------------------------------------
   18. SLIDE 10 — Traction · Product/Market/Ecosystem/Global + Saudi proof
   ------------------------------------------------------------------------- */
.slide--traction .slide-head--centered { margin-bottom: 24px; }

.traction-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-height: 0;
}

/* 2-col split: validation sheets · hero proof photo */
.ts-layout {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 24px;
    flex: 1;
    min-height: 0;
}

/* ─── LEFT — 4 stacked validation pillars ─── */
.ts-sheets {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 12px;
    min-height: 0;
}

.ts-block {
    position: relative;
    padding: 14px 20px 14px 22px;
    background:
        radial-gradient(70% 100% at 0% 50%, var(--ts-glow), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.006));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.28s var(--ease), border-color 0.28s var(--ease);
    --ts: #ffffff;
    --ts-soft: rgba(255,255,255,0.24);
    --ts-glow: rgba(255,255,255,0.06);
}

.ts-block::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: var(--ts);
    opacity: 0.9;
}

.ts-block:hover {
    transform: translateX(2px);
    border-color: var(--ts-soft);
}

.ts-block--blue    { --ts: #2563eb; --ts-soft: rgba(37,99,235,0.34);  --ts-glow: rgba(37,99,235,0.10); }
.ts-block--emerald { --ts: #10b981; --ts-soft: rgba(16,185,129,0.34); --ts-glow: rgba(16,185,129,0.10); }
.ts-block--iris    { --ts: #a020f0; --ts-soft: rgba(160,32,240,0.34); --ts-glow: rgba(160,32,240,0.10); }
.ts-block--rose    { --ts: #ec4899; --ts-soft: rgba(236,72,153,0.34); --ts-glow: rgba(236,72,153,0.10); }

/* block header: num + pill + (optional) inline metric */
.ts-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ts-num {
    font-size: 22px;
    font-weight: 200;
    color: var(--ts);
    letter-spacing: -0.04em;
    line-height: 1;
    font-feature-settings: "tnum";
}

.ts-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 11px 3px;
    border: 1px solid var(--ts-soft);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--ts);
}

.ts-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--ts);
    box-shadow: 0 0 7px var(--ts);
}

/* inline metric (used in blocks 02 & 03) */
.ts-metric {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 2px 0 2px 14px;
    border-left: 1px solid var(--line-2);
}

.ts-metric-val {
    font-size: 24px;
    font-weight: 700;
    color: var(--ts);
    letter-spacing: -0.025em;
    line-height: 1;
    font-feature-settings: "tnum";
}

.ts-metric-val sup {
    font-size: 0.55em;
    font-weight: 700;
    vertical-align: super;
    margin-left: -0.06em;
}

.ts-metric-lbl {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-4);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* bullet list */
.ts-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
}

.ts-list li {
    position: relative;
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--txt-2);
}

.ts-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ts);
    opacity: 0.65;
    box-shadow: 0 0 6px var(--ts-soft);
}

.ts-hi {
    color: var(--txt);
    font-weight: 600;
}

.ts-block--blue    .ts-hi { color: #93c5fd; }
.ts-block--emerald .ts-hi { color: #6ee7b7; }
.ts-block--iris    .ts-hi { color: #d8b4fe; }
.ts-block--rose    .ts-hi { color: #f9a8d4; }

/* inline OEM chips */
.ts-oem {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-2);
    letter-spacing: 0.14em;
    padding: 2px 7px 1px;
    margin: 0 4px 0 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--ts-soft);
    border-radius: 4px;
    vertical-align: middle;
}

/* flag rows for block 04 */
.ts-flags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
}

.ts-flag {
    --flg: #ffffff;
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--txt-2);
    line-height: 1.3;
}

.ts-flag-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 20px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: var(--flg);
    background: color-mix(in srgb, var(--flg) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--flg) 42%, transparent);
    border-radius: 4px;
}

.ts-flag-txt {
    min-width: 0;
}

/* ─── RIGHT — Hero proof photo (Saudi) ─── */
.ts-proof {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    margin: 0;
}

.ts-proof-frame {
    position: relative;
    flex: 1;
    min-height: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(16,185,129,0.22);
    background: #0a0a14;
    box-shadow:
        0 24px 60px -32px rgba(0,0,0,0.85),
        0 0 0 1px rgba(16,185,129,0.06) inset;
}

.ts-proof-frame::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #10b981 30%, #a020f0 70%, transparent);
    z-index: 3;
    opacity: 0.85;
}

.ts-proof-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(1.05) contrast(1.02);
    transition: transform 0.6s var(--ease);
}

.ts-proof:hover .ts-proof-img {
    transform: scale(1.015);
}

.ts-proof-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10,10,20,0) 55%, rgba(10,10,20,0.72) 100%),
        linear-gradient(90deg, rgba(10,10,20,0.20) 0%, rgba(10,10,20,0) 35%);
    pointer-events: none;
    z-index: 1;
}

.ts-proof-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #fff;
    background: rgba(10,10,20,0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(16,185,129,0.40);
    border-radius: 999px;
}

.ts-proof-badge-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: tsPulse 2.4s ease-in-out infinite;
}

@keyframes tsPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.35); }
}

.ts-proof-caption {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px 2px 0;
}

.ts-proof-cap-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    color: #10b981;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.ts-proof-cap-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.35;
    letter-spacing: -0.008em;
    line-height: 1.3;
}

.ts-proof-cap-desc {
    font-size: 12.5px;
    color: var(--txt-3);
    line-height: 1.5;
}

.ts-proof-cap-desc .ts-hi {
    color: #f9a8d4;
    font-weight: 600;
}

.traction-coda {
    margin-top: var(--coda-margin-top);
}

/* -------------------------------------------------------------------------
   19. SLIDE 11 — Competition · Legacy vs Point vs DBR77 (full loop)
   ------------------------------------------------------------------------- */
.slide--comp .slide-head--centered { margin-bottom: 24px; }

.comp-body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    flex: 1;
    min-height: 0;
}

/* ─── CARD SHELL ─── */
.comp {
    position: relative;
    padding: 22px 24px 20px;
    background:
        radial-gradient(85% 50% at 50% 0%, var(--c-glow), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.006));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
    --c: #ffffff;
    --c-soft: rgba(255,255,255,0.24);
    --c-glow: rgba(255,255,255,0.06);
}

.comp::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--c);
    opacity: 0.9;
}

.comp:hover {
    transform: translateY(-2px);
    border-color: var(--c-soft);
    box-shadow: 0 18px 42px -28px rgba(0,0,0,0.65);
}

.comp--neg  { --c: #ef4444; --c-soft: rgba(239,68,68,0.22);   --c-glow: rgba(239,68,68,0.06); }
.comp--warn { --c: #f59e0b; --c-soft: rgba(245,158,11,0.22);  --c-glow: rgba(245,158,11,0.06); }
.comp--win  {
    --c: #10b981;
    --c-soft: rgba(16,185,129,0.26);
    --c-glow: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.20);
    background:
        radial-gradient(85% 50% at 50% 0%, rgba(16,185,129,0.10), transparent 70%),
        linear-gradient(180deg, rgba(16,185,129,0.028), rgba(255,255,255,0.004));
}

.comp--win::before {
    height: 3px;
    background: linear-gradient(90deg, #2563eb 0%, #10b981 50%, #a020f0 100%);
    opacity: 0.75;
}

/* "FULL LOOP" badge — only on win card */
.comp-badge {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #10b981;
    padding: 4px 10px 3px;
    border: 1px solid rgba(16,185,129,0.40);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(16,185,129,0.10), rgba(16,185,129,0.02));
}

.comp-badge-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: compPulse 2.4s ease-in-out infinite;
}

@keyframes compPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.35); }
}

/* ─── HEAD (num + stage pill) ─── */
.comp-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.comp-num {
    font-size: 22px;
    font-weight: 200;
    color: var(--c);
    letter-spacing: -0.04em;
    line-height: 1;
    font-feature-settings: "tnum";
}

.comp-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 11px 3px;
    border: 1px solid var(--c-soft);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--c);
}

.comp-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 7px var(--c);
}

/* ─── IDENTITY (icon + name) ─── */
.comp-id {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.comp-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c);
    background:
        radial-gradient(circle at 50% 50%, var(--c-glow), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.005));
    border: 1px solid var(--c-soft);
}

.comp-mark svg {
    width: 20px;
    height: 20px;
}

.comp-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: -0.012em;
    line-height: 1.22;
    margin: 0;
}

/* ─── SECTIONS (WHO / PROFILE / FLOW) ─── */
.comp-sec {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comp-sec--profile {
    flex: 1;
    min-height: 0;
}

.comp-sec-lbl {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-4);
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

/* logos as chips (WHO) */
.comp-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.comp-logos li {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-2);
    letter-spacing: 0.10em;
    padding: 4px 10px 3px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--c-soft);
    border-radius: 5px;
    white-space: nowrap;
}

/* flow chain (DBR77 — WIN card) */
.comp-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    counter-reset: cf;
}

.comp-flow li {
    counter-increment: cf;
    position: relative;
    font-size: 10.5px;
    font-weight: 700;
    color: #10b981;
    letter-spacing: 0.12em;
    padding: 4px 11px 3px;
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.32);
    border-radius: 5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
}

.comp-flow li:not(:last-child)::after {
    content: "→";
    margin-left: 8px;
    margin-right: -2px;
    color: var(--txt-4);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0;
}

/* profile bullets */
.comp-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.comp-list li {
    position: relative;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.5;
    line-height: 1.45;
    color: var(--txt-2);
}

.comp-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c);
    opacity: 0.7;
    box-shadow: 0 0 6px var(--c-soft);
}

/* ─── VERDICT (always at bottom, highlighted) ─── */
.comp-verdict {
    position: relative;
    margin-top: auto;
    padding: 14px 16px 13px;
    background:
        linear-gradient(180deg, var(--c-glow), rgba(255,255,255,0.01));
    border: 1px solid var(--c-soft);
    border-radius: 10px;
    overflow: hidden;
}

.comp-verdict::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: var(--c);
}

.comp-verdict-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--c);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.comp-verdict-headline {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.35;
    line-height: 1.35;
    letter-spacing: -0.008em;
    margin-bottom: 4px;
}

.comp-verdict-hi {
    color: var(--c);
}

.comp-verdict-desc {
    font-size: 12.5px;
    color: var(--txt-3);
    line-height: 1.5;
}

.comp-verdict--win {
    background:
        radial-gradient(80% 100% at 0% 50%, rgba(16,185,129,0.18), transparent 70%),
        linear-gradient(180deg, rgba(16,185,129,0.08), rgba(255,255,255,0.01));
    border-color: rgba(16,185,129,0.40);
}

.comp-coda {
    margin-top: var(--coda-margin-top);
}

/* -------------------------------------------------------------------------
   20. SLIDE 12 — Leadership · Core Team + Board/Advisors (photos + LinkedIn)
   ------------------------------------------------------------------------- */
.slide--team .slide-head--centered { margin-bottom: 22px; }

.team-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-height: 0;
}

.team-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.team-row--core  { flex: 1.35; }
.team-row--board { flex: 1; }

/* ─── ROW HEAD (eyebrow pill + sub) ─── */
.team-row-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.team-row-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 12px 3px;
    border: 1px solid rgba(160,32,240,0.36);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(160,32,240,0.06), rgba(160,32,240,0));
    font-size: 10.5px;
    font-weight: 700;
    color: #c346ff;
    letter-spacing: 0.22em;
}

.team-row-tag--board {
    border-color: rgba(37,99,235,0.36);
    background: linear-gradient(180deg, rgba(37,99,235,0.06), rgba(37,99,235,0));
    color: #93c5fd;
}

.team-row-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 7px currentColor;
}

.team-row-sub {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--txt-3);
    letter-spacing: 0.04em;
}

/* ─── GRID ─── */
.team-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    flex: 1;
    min-height: 0;
}

/* ─── MEMBER CARD ─── */
.member {
    position: relative;
    padding: 20px 18px 18px;
    background:
        radial-gradient(70% 40% at 50% 0%, rgba(160,32,240,0.06), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.006));
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.26s var(--ease), border-color 0.26s var(--ease), box-shadow 0.26s var(--ease);
}

.member:hover {
    transform: translateY(-2px);
    border-color: rgba(160,32,240,0.28);
    box-shadow: 0 14px 32px -22px rgba(0,0,0,0.6);
}

/* photo avatar */
.member-photo {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 0 14px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(160,32,240,0.45);
    background:
        radial-gradient(circle at 50% 50%, rgba(160,32,240,0.20), transparent 70%),
        #0d0a2b;
    box-shadow:
        0 0 0 4px rgba(160,32,240,0.07),
        0 12px 26px -14px rgba(0,0,0,0.72);
    flex-shrink: 0;
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: saturate(1.05);
    transition: transform 0.5s var(--ease);
}

.member:hover .member-photo img {
    transform: scale(1.05);
}

/* name / role / bio */
.member-name {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.25;
    letter-spacing: -0.012em;
    line-height: 1.2;
    margin: 0 0 5px;
}

.member-role {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #c346ff;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.45;
    margin-bottom: 10px;
    min-height: 28px;
}

.member-bio {
    font-size: 13px;
    color: var(--txt-3);
    line-height: 1.55;
    margin: 0 0 12px;
    flex: 1;
}

/* Description highlight — deliberately calm. We use a subtle font-weight
 * bump (500, not 600) and the standard subtitle text colour rather than a
 * vivid tint, so each card reads as an executive summary rather than a
 * LinkedIn CV. At most one phrase per person should carry this class. */
.member-hi {
    color: var(--txt-2);
    font-weight: 500;
}

/* Board/Advisors proof line — ultra-short investor-confidence statement.
   Visually distinct from .member-bio: smaller, muted, single thought. */
.member-proof {
    font-size: 11.5px;
    color: var(--txt-3);
    line-height: 1.45;
    margin: 0 0 10px;
    flex: 1;
}
.member-proof-hi {
    color: var(--txt-2);
    font-weight: 500;
}

/* LinkedIn icon — same pattern as info-pin */
.member-li {
    width: 26px;
    height: 26px;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--line-2);
    color: var(--txt-3);
    transition: all 0.20s var(--ease);
    flex-shrink: 0;
}

.member-li:hover {
    color: #0a66c2;
    border-color: #0a66c2;
    background: rgba(10,102,194,0.12);
    transform: scale(1.08);
}

.member-li[data-linkedin-pending="true"] {
    border-style: dashed;
    opacity: 0.65;
}

.member-li[data-linkedin-pending="true"]:hover {
    opacity: 1;
    color: #93c5fd;
    border-color: rgba(147,197,253,0.5);
    background: rgba(37,99,235,0.08);
}

/* ─── COMPACT VARIANT (advisors row) ─── */
.team-grid--board .member--compact {
    padding: 16px 14px 14px;
    background:
        radial-gradient(70% 40% at 50% 0%, rgba(37,99,235,0.06), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.030), rgba(255,255,255,0.005));
}

.team-grid--board .member--compact:hover {
    border-color: rgba(37,99,235,0.28);
}

.team-grid--board .member-photo {
    width: 76px;
    height: 76px;
    margin-bottom: 10px;
    border-color: rgba(37,99,235,0.45);
    box-shadow:
        0 0 0 4px rgba(37,99,235,0.06),
        0 8px 20px -12px rgba(0,0,0,0.72);
    background:
        radial-gradient(circle at 50% 50%, rgba(37,99,235,0.20), transparent 70%),
        #0d0a2b;
}

.team-grid--board .member-name {
    font-size: 14px;
    margin-bottom: 4px;
}

.team-grid--board .member-role {
    font-size: 10.5px;
    color: #93c5fd;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
    min-height: 24px;
}

/* -------------------------------------------------------------------------
   21. SLIDE 13 — Fundraising · Series A allocation (narrative pattern)
   ------------------------------------------------------------------------- */
.slide--fund .slide-head--centered { margin-bottom: 20px; }

/* longer title — keep readable but force single line in 1728px content */
.slide--fund .slide-title--center {
    font-size: 48px;
    max-width: 1700px;
    line-height: 1.08;
    letter-spacing: -0.022em;
}

.fund-body {
    display: grid;
    grid-template-columns: 1fr 1.55fr;
    gap: 20px;
    flex: 1;
    min-height: 0;
}

/* ─── PANEL CARD ─── */
.fund-panel {
    position: relative;
    padding: 22px 26px 20px;
    background:
        radial-gradient(80% 50% at 50% 0%, rgba(37,99,235,0.07), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.006));
    border: 1px solid var(--line);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    --fp: var(--dt);
}

.fund-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--fp), transparent);
    opacity: 0.7;
}

.fund-panel--alloc { --fp: #a020f0; }
.fund-panel--alloc::before {
    background: linear-gradient(90deg, transparent, #2563eb 35%, #a020f0 65%, transparent);
    opacity: 0.85;
}

/* ─── PANEL HEAD ─── */
.fp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.fp-stage {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.fp-num {
    font-size: 11px;
    font-weight: 800;
    color: var(--fp);
    letter-spacing: 0.12em;
    font-feature-settings: "tnum";
    padding: 4px 9px;
    border: 1px solid color-mix(in srgb, var(--fp) 42%, transparent);
    background: color-mix(in srgb, var(--fp) 10%, transparent);
    border-radius: 8px;
}

.fp-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fp);
    box-shadow: 0 0 8px var(--fp);
}

.fp-tag {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-2);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.fp-metric {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--txt-4);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ─── MILESTONES ─── */
.milestones {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.milestones li {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 14px;
    align-items: center;
    padding: 0 18px;
    background:
        linear-gradient(90deg, rgba(37,99,235,0.06), rgba(37,99,235,0.015) 60%, transparent);
    border: 1px solid rgba(37,99,235,0.18);
    border-left: 2px solid var(--dt);
    border-radius: 8px;
    transition: all 0.22s var(--ease);
    flex: 1;
    min-height: 0;
}

.milestones li:hover {
    border-color: rgba(37,99,235,0.40);
    border-left-color: #60a5fa;
    background: linear-gradient(90deg, rgba(37,99,235,0.10), rgba(37,99,235,0.02));
    transform: translateX(2px);
}

.ms-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(37,99,235,0.22), rgba(96,165,250,0.10));
    border: 1px solid rgba(96,165,250,0.55);
    color: #60a5fa;
    box-shadow: 0 0 12px -4px rgba(37,99,235,0.6);
}

.milestones li > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.35;
}

.milestones li strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: -0.005em;
}

.ms-sub {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--txt-3);
}

/* ─── USE OF FUNDS — donut + alloc list ─── */
.alloc-content {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 26px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.alloc-donut {
    position: relative;
    width: 240px;
    height: 240px;
    margin: 0 auto;
    align-self: center;
    filter: drop-shadow(0 8px 28px rgba(160,32,240,0.20));
}

.donut {
    width: 100%;
    height: 100%;
    transform-origin: center;
    animation: donutSpinIn 1.1s var(--ease) both;
}

@keyframes donutSpinIn {
    from { transform: rotate(-30deg) scale(0.92); opacity: 0; }
    to   { transform: rotate(0)      scale(1);    opacity: 1; }
}

.donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.dc-big {
    font-size: 38px;
    font-weight: 800;
    background: linear-gradient(135deg, #60a5fa 0%, #a020f0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.025em;
    line-height: 1;
    font-feature-settings: "tnum";
}

.dc-sub {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-3);
    letter-spacing: 0.22em;
    margin-top: 7px;
}

.alloc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-height: 0;
}

.al-row {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 14px;
    align-items: center;
    padding: 0 16px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--line);
    border-radius: 8px;
    border-left-width: 3px;
    transition: all 0.22s var(--ease);
    flex: 1;
    min-height: 0;
}

.al-row:hover {
    background: rgba(255,255,255,0.045);
    transform: translateX(2px);
}

.al-row--p { border-left-color: #a020f0; }
.al-row--g { border-left-color: #2563eb; }
.al-row--m { border-left-color: #10b981; }
.al-row--c { border-left-color: #92004f; }
.al-row--s { border-left-color: #64748b; }

.al-row--p:hover { background: rgba(160,32,240,0.06); }
.al-row--g:hover { background: rgba(37,99,235,0.06); }
.al-row--m:hover { background: rgba(16,185,129,0.06); }
.al-row--c:hover { background: rgba(146,0,79,0.07); }
.al-row--s:hover { background: rgba(100,116,139,0.07); }

.al-pct {
    font-size: 22px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -0.025em;
    font-feature-settings: "tnum";
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
}

.al-pct-unit {
    font-size: 11px;
    font-weight: 700;
    color: var(--txt-3);
    letter-spacing: 0;
    margin-left: 1px;
}

.al-row strong {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--txt);
    margin-bottom: 1px;
    letter-spacing: -0.005em;
}

.al-row span {
    font-size: 11px;
    color: var(--txt-3);
    line-height: 1.45;
}

/* ─── FUND CODA — full-width pill, replaces dual coda-rule layout ─── */
.fund-coda {
    margin-top: var(--coda-margin-top);
    gap: 0;
    max-width: none;
    padding: 0;
}

.fund-coda .coda-rule { display: none; }

.fund-coda-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 18px 32px;
    background:
        radial-gradient(circle at 0% 50%, rgba(37,99,235,0.16), transparent 55%),
        radial-gradient(circle at 100% 50%, rgba(160,32,240,0.14), transparent 55%),
        rgba(255,255,255,0.025);
    border: 1px solid var(--line-2);
    border-left: 3px solid var(--dt);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

.fund-coda-inner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #60a5fa 40%, #a020f0 60%, transparent);
    opacity: 0.55;
}

/* Stacked variant: message (top) + readiness pipeline (bottom), both centered */
.fund-coda-inner--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 28px 18px;
}

.fund-coda .coda-text {
    font-size: 17px;
    text-align: left;
    max-width: none;
    flex: 1;
    line-height: 1.4;
}

.fund-coda .fund-coda-msg {
    text-align: center;
    flex: none;
    font-size: 16px;
    line-height: 1.45;
    max-width: 1240px;
    margin: 0 auto;
}

/* ─── READINESS PIPELINE — 5-stage chip row, "why now" rationale ─── */
.fund-pipeline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 26px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.fp-step {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008));
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--txt-2);
    letter-spacing: 0.02em;
    line-height: 1.2;
    transition: border-color 0.20s var(--ease), background 0.20s var(--ease), transform 0.20s var(--ease);
}

.fp-step:hover {
    border-color: rgba(96,165,250,0.45);
    background: linear-gradient(180deg, rgba(96,165,250,0.10), rgba(96,165,250,0.02));
    transform: translateY(-1px);
}

.fp-step-num {
    font-size: 9.5px;
    font-weight: 800;
    color: #60a5fa;
    letter-spacing: 0.10em;
    font-feature-settings: "tnum";
}

.fp-step-label {
    color: var(--txt-2);
}

/* Inter-chip connector — arrow rendered as ::before on every non-first .fp-step,
   positioned in the gap so it sits between the two pills */
.fp-step + .fp-step::before {
    content: "→";
    position: absolute;
    left: -19px;
    top: 50%;
    transform: translateY(-52%);
    color: var(--txt-4);
    font-size: 13px;
    font-weight: 400;
    pointer-events: none;
    line-height: 1;
}

/* Final step (Series A scales execution) — DBR77 brand blend, slightly elevated */
.fp-step--final {
    background:
        radial-gradient(120% 100% at 100% 50%, rgba(160,32,240,0.12), transparent 70%),
        linear-gradient(135deg, rgba(37,99,235,0.10), rgba(160,32,240,0.06));
    border-color: rgba(160,32,240,0.28);
    box-shadow: 0 0 0 1px rgba(160,32,240,0.05) inset;
    color: var(--txt);
}

.fp-step--final .fp-step-num {
    color: #c346ff;
}

.fp-step--final .fp-step-label {
    color: var(--txt);
    font-weight: 700;
}

.fp-step--final:hover {
    border-color: rgba(195,70,255,0.40);
    background:
        radial-gradient(120% 100% at 100% 50%, rgba(160,32,240,0.18), transparent 70%),
        linear-gradient(135deg, rgba(37,99,235,0.14), rgba(160,32,240,0.10));
}

/* Make the connector before the final step a touch stronger */
.fp-step--final::before {
    color: var(--txt-3);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   22. SLIDE 14 — Closing
   ------------------------------------------------------------------------- */
.slide--closing {
    position: relative;
    overflow: hidden;
    padding: 56px 96px;
    background:
        radial-gradient(ellipse at 70% 30%, rgba(160, 32, 240, 0.20), transparent 60%),
        radial-gradient(ellipse at 20% 90%, rgba(16, 185, 129, 0.15), transparent 60%),
        var(--bg);
}

.closing-body {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    gap: 32px;
    position: relative; z-index: 1;
}

.closing-title {
    font-size: 156px;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.05em;
    color: var(--txt);
}

.closing-strike {
    position: relative;
    color: var(--txt-3);
    font-weight: 400;
    font-style: normal;
}
.closing-strike::after {
    content: "";
    position: absolute;
    left: -2%; right: -2%; top: 52%;
    height: 6px;
    background: linear-gradient(90deg, transparent, var(--err), transparent);
    transform: rotate(-3deg);
}

.closing-grad {
    background: linear-gradient(135deg, #a020f0 0%, #2563eb 50%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: normal;
    font-weight: 800;
}

.closing-lead {
    font-size: 26px;
    font-weight: 400;
    color: var(--txt-2);
    max-width: 1100px;
    line-height: 1.4;
    letter-spacing: -0.005em;
}
.closing-lead strong { color: var(--txt); font-weight: 700; }

/* Verb cadence supporting line — compact uppercase tagline that bridges
   the positioning statement to the "Join us." callout without bulking up. */
.closing-tagline {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt-3);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.5;
    margin-top: -10px;
    max-width: 1100px;
}

.closing-tag-hi {
    background: linear-gradient(135deg, #a020f0 0%, #2563eb 55%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

.closing-callout {
    font-size: 30px;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: -0.02em;
    margin-top: 6px;
}

.closing-cta {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 36px;
    background: linear-gradient(135deg, #a020f0, #2563eb);
    color: #fff;
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    border-radius: 8px;
    transition: transform 0.18s var(--ease);
    margin-top: 18px;
}
.closing-cta:hover { transform: translateY(-2px); }

.closing-foot {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    position: relative; z-index: 1;
}

.contact {
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
}
.contact--accent { border-left-color: #a020f0; background: rgba(160, 32, 240, 0.05); }
.contact-role { font-size: 10.5px; font-weight: 600; color: var(--txt-3); letter-spacing: 0.10em; text-transform: uppercase; }
.contact-name { font-size: 17px; font-weight: 700; color: var(--txt); letter-spacing: -0.005em; }
.contact-mail { font-size: 13px; color: var(--txt-2); transition: color 0.18s var(--ease); word-break: break-all; }
.contact-mail:hover { color: var(--accent); }

/* -------------------------------------------------------------------------
   23. SLIDE 15 — Appendix A · Vector 1.0 Whitepaper (scientific paper layout)
   ------------------------------------------------------------------------- */
.slide--vector-app { position: relative; }
.slide--vector-app::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(50% 40% at 22% 28%, rgba(160,32,240,0.10), transparent 70%),
        radial-gradient(45% 35% at 78% 60%, rgba(37,99,235,0.08), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.slide--vector-app > * { position: relative; z-index: 1; }

.slide--vector-app .slide-head--centered { margin-bottom: 20px; }
.slide--vector-app .slide-title--center { font-size: 46px; line-height: 1.08; max-width: 1600px; }

.vector-body {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    flex: 1;
    min-height: 0;
}

/* ─── LEFT — 6 ARGUMENT CARDS (2×3 grid) ─── */
.vec-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 14px;
    min-height: 0;
}

.vec-section {
    position: relative;
    padding: 18px 20px 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.005));
    border: 1px solid var(--line);
    border-top: 1px solid rgba(160,32,240,0.25);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.vec-section::before {
    content: "";
    position: absolute;
    top: 0; left: 20px; right: 20px;
    height: 2px;
    background: linear-gradient(90deg, #a020f0, transparent);
    opacity: 0.45;
}

.vec-section:hover {
    border-color: rgba(160,32,240,0.36);
    transform: translateY(-1px);
}

/* featured § (benchmark card) */
.vec-section--featured {
    background:
        radial-gradient(circle at top right, rgba(160,32,240,0.12), transparent 60%),
        radial-gradient(circle at bottom left, rgba(37,99,235,0.09), transparent 60%),
        linear-gradient(180deg, rgba(160,32,240,0.06), rgba(255,255,255,0.005));
    border-color: rgba(160,32,240,0.34);
}

.vec-section--featured::before {
    background: linear-gradient(90deg, #2563eb 0%, #a020f0 50%, #c346ff 100%);
    opacity: 0.60;
}

/* section header — §NN ─── TAG (scientific style) */
.vec-marker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vec-sect-num {
    font-size: 20px;
    font-weight: 300;
    color: #c346ff;
    letter-spacing: -0.02em;
    font-feature-settings: "tnum";
    line-height: 1;
    font-family: ui-serif, Georgia, serif;
}

.vec-sect-rule {
    flex: 0 0 16px;
    height: 1px;
    background: rgba(160,32,240,0.45);
}

.vec-sect-tag {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-3);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1;
}

.vec-sect-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0;
}

.vec-sect-body {
    font-size: 13px;
    line-height: 1.55;
    color: var(--txt-3);
    margin: 0;
    flex: 1;
}

.vec-em {
    color: var(--txt);
    font-weight: 700;
}

.vec-section--featured .vec-em {
    background: linear-gradient(135deg, #c346ff, #60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vec-hi {
    color: #c346ff;
    font-weight: 600;
}

/* ─── BENCHMARK MICRO-CHART (inside §05) ─── */
.vec-benchmark {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed rgba(160,32,240,0.30);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vb-row {
    display: grid;
    grid-template-columns: 120px 1fr 46px;
    align-items: center;
    gap: 10px;
}

.vb-lbl {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-2);
    letter-spacing: 0.12em;
}

.vb-row--mute .vb-lbl { color: var(--txt-4); }

.vb-bar {
    height: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.vb-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #a020f0, #c346ff);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(160,32,240,0.55);
    animation: vbGrow 1.2s var(--ease) both;
    transform-origin: left center;
}

.vb-fill--mute {
    background: linear-gradient(90deg, rgba(96,165,250,0.6), rgba(96,165,250,0.85));
    box-shadow: 0 0 8px rgba(96,165,250,0.4);
}

@keyframes vbGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.vb-val {
    font-size: 14px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -0.02em;
    text-align: right;
    font-feature-settings: "tnum";
    line-height: 1;
}

.vb-val small {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--txt-4);
}

.vb-row--mute .vb-val { color: var(--txt-2); }

/* ─── HERO METRICS — promoted proof at top of benchmark block ─── */
.vb-hero {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(160,32,240,0.30);
}

.vb-hero-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    min-width: 0;
}

.vb-hero-div {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent);
}

.vb-hero-num {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    background: linear-gradient(135deg, #c346ff 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-feature-settings: "tnum";
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.vb-hero-unit {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}

.vb-hero-num--time {
    gap: 6px;
    font-size: 22px;
}

.vb-hero-pre {
    font-size: 15px;
    font-weight: 600;
    color: var(--txt-3);
    -webkit-text-fill-color: var(--txt-3);
    background: none;
    letter-spacing: 0;
}

.vb-hero-arrow {
    color: var(--txt-4);
    -webkit-text-fill-color: var(--txt-4);
    background: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

.vb-hero-fast {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.vb-hero-lbl {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--txt-4);
    letter-spacing: 0.20em;
    line-height: 1.3;
}

/* Legacy meta/pill (kept for safety if referenced elsewhere) */
.vb-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.vb-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--txt-3);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-2);
    border-radius: 4px;
    font-feature-settings: "tnum";
}

.vb-pill--accent {
    color: #c346ff;
    background: rgba(160,32,240,0.10);
    border-color: rgba(160,32,240,0.40);
}

/* ═══ RIGHT — HERO WHITEPAPER PANEL ═══ */
.vec-paper-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    min-height: 0;
    padding: 22px 28px 22px;
    background:
        radial-gradient(circle at 50% 12%, rgba(160,32,240,0.14), transparent 60%),
        radial-gradient(circle at 50% 100%, rgba(37,99,235,0.08), transparent 70%),
        linear-gradient(180deg, rgba(160,32,240,0.05), rgba(255,255,255,0.005));
    border: 1px solid rgba(160,32,240,0.30);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.vec-paper-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2563eb 25%, #a020f0 50%, #c346ff 75%, transparent);
    opacity: 0.65;
}

/* HERO poster — aspect-locked to whitepaper page (17/22 ≈ 8.5"×11") */
.vec-paper-poster {
    position: relative;
    display: block;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 17 / 22;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(160,32,240,0.40);
    background:
        linear-gradient(135deg, rgba(160,32,240,0.10), rgba(37,99,235,0.08)),
        #0d0a2b;
    box-shadow:
        0 0 0 6px rgba(160,32,240,0.08),
        0 24px 48px -16px rgba(0,0,0,0.75),
        0 0 60px -10px rgba(160,32,240,0.35);
    transition: transform 0.30s var(--ease), border-color 0.30s var(--ease), box-shadow 0.30s var(--ease);
}

.vec-paper-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s var(--ease);
}

.vec-paper-poster:hover {
    transform: translateY(-2px);
    border-color: rgba(195,70,255,0.55);
    box-shadow:
        0 0 0 4px rgba(160,32,240,0.12),
        0 22px 44px -16px rgba(0,0,0,0.8);
}

.vec-paper-poster:hover img { transform: scale(1.02); }

.vpp-overlay {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.20em;
    background: linear-gradient(135deg, rgba(160,32,240,0.95), rgba(37,99,235,0.95));
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
    box-shadow: 0 12px 28px -10px rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
}

.vpp-icon { display: inline-flex; }

.vec-paper-poster:hover .vpp-overlay {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.vpp-corner {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 9px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--txt-2);
    letter-spacing: 0.18em;
    background: rgba(13,10,43,0.78);
    border: 1px solid var(--line-2);
    border-radius: 4px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* meta — eyebrow + title + sub + authors */
.vec-paper-meta {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.vpm-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    color: #c346ff;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.vpm-eyebrow-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c346ff;
    box-shadow: 0 0 3px rgba(195,70,255,0.55);
}

.vpm-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 4px 0 0;
}

.vpm-sub {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--txt-2);
    margin: 2px auto 0;
    max-width: 420px;
}

.vpm-authors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
    margin: 12px 0 0;
    padding: 10px 0 0;
    border-top: 1px dashed rgba(160,32,240,0.22);
    list-style: none;
}

.vpm-authors li {
    font-size: 10.5px;
    color: var(--txt-3);
    line-height: 1.3;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.vpm-authors li::before {
    content: "·";
    color: #c346ff;
    font-weight: 700;
}

.vpm-authors strong {
    font-weight: 600;
    color: var(--txt-2);
}

.vpm-authors span {
    font-size: 10.5px;
    color: var(--txt-4);
    letter-spacing: 0.04em;
}

/* CTA buttons */
.vec-paper-ctas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 440px;
    margin-top: auto;
}

.vpc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 16px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: 10px;
    transition: transform 0.20s var(--ease), box-shadow 0.20s var(--ease);
    text-align: center;
    line-height: 1;
}

.vpc-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #a020f0 0%, #c346ff 100%);
    border: 1px solid rgba(195,70,255,0.5);
    box-shadow: 0 8px 20px -6px rgba(160,32,240,0.65);
}

.vpc-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px -8px rgba(160,32,240,0.85);
}

.vpc-btn--ghost {
    color: var(--txt-2);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line-2);
}

.vpc-btn--ghost:hover {
    color: #c346ff;
    border-color: rgba(160,32,240,0.50);
    background: rgba(160,32,240,0.08);
}

.vector-coda { margin-top: var(--coda-margin-top); }

/* 2-line coda — main punchline + sub-line */
.vector-coda .coda-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.vector-coda .coda-text {
    margin: 0;
}

.vector-coda .coda-sub {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--txt-3);
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.005em;
}

.vector-coda .coda-sub .coda-hi {
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   24. SLIDE 16 — Pipeline Table
   ------------------------------------------------------------------------- */
/* ═══════════════════════════════════════════════════════════════════════
   SLIDE 16 — Enterprise Pipeline (strategic account matrix, dark glass)
   Replaces previous .pipeline-table spreadsheet with a premium board.
   ═══════════════════════════════════════════════════════════════════════ */
.slide--pipeline { position: relative; }
.slide--pipeline::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(160,32,240,0.06), transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(96,165,250,0.05), transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.slide--pipeline > * { position: relative; z-index: 1; }

.pipeline-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pipeline-matrix {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 26px 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(160,32,240,0.06), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.030), rgba(255,255,255,0.005));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 0;
}

.pipeline-matrix::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c346ff 25%, #a020f0 50%, #60a5fa 75%, transparent);
    opacity: 0.50;
}

/* ─── COLUMN HEADER ROW (product chips) ─── */
.pm-cols {
    display: grid;
    grid-template-columns: 240px repeat(5, 1fr);
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.pm-col-spacer { min-height: 1px; }

.pm-col {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px 7px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008));
    border: 1px solid var(--line);
    border-left: 2px solid var(--prod, var(--iris));
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--txt-2);
    letter-spacing: 0.04em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pm-col-orb {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--prod, var(--iris));
    box-shadow: 0 0 4px color-mix(in srgb, var(--prod, var(--iris)) 55%, transparent);
    flex-shrink: 0;
}

.pm-col-name { color: var(--txt); }

/* ─── ROWS (3 stages) ─── */
.pm-rows {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.pm-row {
    --pm: #a020f0;
    --pm-soft: rgba(160,32,240,0.30);
    --pm-glow: rgba(160,32,240,0.10);
    display: grid;
    grid-template-columns: 240px repeat(5, 1fr);
    gap: 10px;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

.pm-row--live    { --pm: #10b981; --pm-soft: rgba(16,185,129,0.22);  --pm-glow: rgba(16,185,129,0.06); }
.pm-row--active  { --pm: #60a5fa; --pm-soft: rgba(96,165,250,0.22);  --pm-glow: rgba(96,165,250,0.06); }
.pm-row--signal  { --pm: #c346ff; --pm-soft: rgba(195,70,255,0.22);  --pm-glow: rgba(195,70,255,0.06); }

/* ─── STAGE CELL (left, sticky-style) ─── */
.pm-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 13px;
    background:
        radial-gradient(120% 100% at 0% 50%, var(--pm-glow), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,0.040), rgba(255,255,255,0.008));
    border: 1px solid var(--line);
    border-left: 3px solid var(--pm);
    border-radius: 10px;
    overflow: hidden;
}

.pm-stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pm-stage-num {
    font-size: 11px;
    font-weight: 800;
    color: var(--pm);
    letter-spacing: 0.18em;
    font-feature-settings: "tnum";
}

.pm-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 9px 2px;
    background: color-mix(in srgb, var(--pm) 14%, transparent);
    border: 1px solid var(--pm-soft);
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    color: var(--pm);
    letter-spacing: 0.20em;
    line-height: 1.2;
}

.pm-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pm);
    box-shadow: 0 0 3px color-mix(in srgb, var(--pm) 55%, transparent);
}

.pm-stage-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 2px 0 0;
}

.pm-stage-sub {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--txt-4);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* ─── DATA CELLS (placeholder cells, type labels) ─── */
.pm-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.005));
    border: 1px solid var(--line);
    border-radius: 10px;
    text-align: center;
    transition: border-color 0.20s var(--ease), background 0.20s var(--ease), transform 0.20s var(--ease);
    overflow: hidden;
}

.pm-cell::before {
    content: "";
    position: absolute;
    top: 14px; bottom: 14px; left: 0;
    width: 2px;
    background: var(--pm);
    opacity: 0.45;
    border-radius: 0 2px 2px 0;
}

.pm-cell:hover {
    border-color: var(--pm-soft);
    background:
        radial-gradient(120% 100% at 0% 50%, var(--pm-glow), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.036), rgba(255,255,255,0.005));
    transform: translateY(-1px);
}

.pm-cell-type {
    font-size: 12px;
    font-weight: 600;
    color: var(--txt-2);
    line-height: 1.35;
    letter-spacing: -0.002em;
}

/* ─── FOOTER · LEGEND + NDA NOTE ─── */
.pm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    flex-wrap: wrap;
}

.pm-legend {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 0;
    margin: 0;
}

.pm-leg-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--txt-3);
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.pm-leg-item strong {
    color: var(--txt-2);
    font-weight: 800;
    letter-spacing: 0.16em;
    margin-right: 4px;
}

.pm-leg-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pm-leg-item--live   .pm-leg-dot { background: #10b981; box-shadow: 0 0 3px rgba(16,185,129,0.55); }
.pm-leg-item--active .pm-leg-dot { background: #60a5fa; box-shadow: 0 0 3px rgba(96,165,250,0.55); }
.pm-leg-item--signal .pm-leg-dot { background: #c346ff; box-shadow: 0 0 3px rgba(195,70,255,0.55); }

.pm-leg-item--live   strong { color: #6ee7b7; }
.pm-leg-item--active strong { color: #93c5fd; }
.pm-leg-item--signal strong { color: #d8b4fe; }

.pm-note {
    font-size: 10.5px;
    color: var(--txt-4);
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin: 0;
    text-align: right;
    max-width: 540px;
}

.pm-note-hi {
    color: var(--txt-2);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   Legacy pipeline-* / pl-* selectors (kept harmless — no longer in HTML)
   ═══════════════════════════════════════════════════════════════════════ */
.pipeline-note {
    font-size: 12px; font-style: normal;
    color: var(--txt-4);
    padding-left: 12px;
    border-left: 2px solid var(--line-3);
}

.pipeline-card {
    flex: 1;
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.005));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.pipeline-table {
    width: 100%;
    border-collapse: collapse;
}

.pipeline-table thead { background: rgba(255, 255, 255, 0.04); }
.pipeline-table th {
    padding: 16px 20px;
    text-align: left;
    font-size: 11px; font-weight: 700;
    color: var(--txt-3);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line-2);
}
.pipeline-table td {
    padding: 18px 20px;
    font-size: 13.5px;
    color: var(--txt-2);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.pipeline-table tr:last-child td { border-bottom: none; }

.pl-stage {
    font-weight: 600 !important; color: var(--txt) !important;
    display: flex; align-items: center; gap: 12px;
}
.pl-dot {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0;
}
.pl-dot--ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.20); }
.pl-dot--mid { background: var(--warn); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.20); }
.pl-dot--low { background: var(--info); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.20); }

.pl-row--active td { background: rgba(16, 185, 129, 0.04); color: var(--txt); }

/* -------------------------------------------------------------------------
   25. SLIDE 17 — Hitachi Energy Case (narrative pattern)
   ------------------------------------------------------------------------- */
.slide--case .slide-head--centered { margin-bottom: 22px; }

.case-body {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 22px;
    flex: 1;
    min-height: 0;
}

/* ─── LEFT — 3-PHASE FLOW ─── */
.case-flow {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.case-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    list-style: none;
}

.case-step {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 18px 22px;
    background:
        radial-gradient(80% 60% at 0% 50%, color-mix(in srgb, var(--cs) 10%, transparent), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.005));
    border: 1px solid var(--line);
    border-left: 3px solid var(--cs);
    border-radius: 12px;
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
        "num pill ."
        "title title title"
        "body body body";
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
    transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
}

.case-step:hover {
    transform: translateX(2px);
    border-color: color-mix(in srgb, var(--cs) 50%, var(--line));
}

.cs-num {
    grid-area: num;
    font-size: 11px;
    font-weight: 800;
    color: var(--cs);
    letter-spacing: 0.12em;
    font-feature-settings: "tnum";
    padding: 4px 9px;
    border: 1px solid color-mix(in srgb, var(--cs) 42%, transparent);
    background: color-mix(in srgb, var(--cs) 10%, transparent);
    border-radius: 8px;
}

.cs-pill {
    grid-area: pill;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--txt-3);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.cs-title {
    grid-area: title;
    font-size: 17px;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.25;
    letter-spacing: -0.012em;
    margin: 4px 0 2px;
}

.cs-hi {
    color: var(--cs);
    font-weight: 600;
}

.cs-body {
    grid-area: body;
    font-size: 13px;
    line-height: 1.55;
    color: var(--txt-3);
    margin: 0;
}

.cs-arrow {
    position: absolute;
    bottom: -22px;
    left: 32px;
    width: 22px;
    height: 28px;
    color: var(--cs);
    opacity: 0.55;
    z-index: 2;
}

/* ─── RIGHT — PHOTO + CLIENT + ENGAGEMENT BRIEF ─── */
.case-aside {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

/* Photo becomes the HERO — expands to fill remaining vertical space.
   Engagement-brief drops flex:1 below so the photo dominates. */
.case-photo {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(37,99,235,0.34);
    box-shadow:
        0 0 0 4px rgba(37,99,235,0.07),
        0 24px 60px -28px rgba(0,0,0,0.8);
    flex: 1 1 auto;
    min-height: 300px;
    margin: 0;
}

.case-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s var(--ease);
}

.case-photo:hover img { transform: scale(1.04); }

.case-photo-cap {
    position: absolute;
    top: 12px;
    left: 12px;
}

.cp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.18em;
    background: rgba(13,10,43,0.78);
    border: 1px solid rgba(96,165,250,0.45);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cp-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.22);
    animation: pulseDot 1.8s ease-in-out infinite;
}

/* client card */
.case-client {
    flex: 0 0 auto;
    padding: 14px 18px 14px 20px;
    background:
        radial-gradient(circle at 0% 50%, rgba(96,165,250,0.10), transparent 55%),
        linear-gradient(180deg, rgba(37,99,235,0.08), rgba(255,255,255,0.005));
    border: 1px solid rgba(37,99,235,0.28);
    border-left: 3px solid #60a5fa;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.cc-eyebrow {
    font-size: 11px;
    font-weight: 800;
    color: #60a5fa;
    letter-spacing: 0.22em;
}

.cc-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: -0.018em;
    margin: 0;
    line-height: 1.15;
}

.cc-meta {
    margin-left: auto;
    padding: 3px 9px 2px;
    font-size: 10px;
    font-weight: 800;
    color: #93c5fd;
    background: rgba(96,165,250,0.10);
    border: 1px solid rgba(96,165,250,0.36);
    border-radius: 999px;
    letter-spacing: 0.20em;
    line-height: 1.3;
    flex-shrink: 0;
    padding: 3px 8px;
    border: 1px solid rgba(96,165,250,0.42);
    background: rgba(37,99,235,0.10);
    border-radius: 4px;
    line-height: 1;
}

.cc-desc {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--txt-3);
    margin: 0;
}

.cc-hi {
    color: var(--txt);
    font-weight: 700;
}

.cc-flags {
    display: flex;
    gap: 14px;
    margin: 4px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
    flex-wrap: wrap;
}

.cc-flags li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--txt-3);
    letter-spacing: 0.04em;
}

.cc-flag { font-size: 14px; line-height: 1; }

/* ─── ENGAGEMENT BRIEF — compact data panel, no longer dominates ─── */
.engagement-brief {
    flex: 0 0 auto;
    padding: 12px 18px 12px;
    background:
        linear-gradient(180deg, rgba(37,99,235,0.07), rgba(255,255,255,0.005));
    border: 1px solid rgba(37,99,235,0.28);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.engagement-brief::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(96,165,250,0.55), transparent);
}

.eb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(37,99,235,0.22);
}

.eb-title {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--dt);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.eb-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ok);
    letter-spacing: 0.16em;
}

.eb-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.22);
    animation: pulseDot 1.8s ease-in-out infinite;
}

.eb-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    min-height: 0;
}

.eb-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    column-gap: 12px;
    align-items: baseline;
    padding: 5px 0 5px;
    border-bottom: 1px dashed rgba(96,165,250,0.16);
    flex: 1;
    min-height: 0;
}

.eb-row:last-child {
    border-bottom: none;
}

.eb-label {
    font-size: 10.5px;
    font-weight: 800;
    color: #60a5fa;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

.eb-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--txt-2);
    line-height: 1.45;
    margin: 0;
}

.eb-hi {
    color: var(--txt);
    font-weight: 700;
}

.case-coda { margin-top: var(--coda-margin-top); }

/* -------------------------------------------------------------------------
   26. SLIDE 18 — Architecture · 4-layer unified stack (narrative pattern)
   ------------------------------------------------------------------------- */
.slide--arch .slide-head--centered { margin-bottom: 20px; }

.arch-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.arch-layer {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 12px 14px 12px 14px;
    background:
        radial-gradient(70% 50% at 0% 50%, color-mix(in srgb, var(--al) 8%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.005));
    border: 1px solid var(--line);
    border-left: 3px solid var(--al);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 14px;
    align-items: stretch;
    overflow: hidden;
    transition: border-color 0.22s var(--ease);
}

.arch-layer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--al), transparent);
    opacity: 0.45;
}

.arch-layer:hover {
    border-color: color-mix(in srgb, var(--al) 38%, var(--line));
}

/* ─── LEFT — LAYER DESCRIPTION BOX ─── */
.arch-desc {
    position: relative;
    padding: 12px 14px 12px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--al) 10%, transparent), transparent 65%),
        rgba(255,255,255,0.025);
    border: 1px solid color-mix(in srgb, var(--al) 22%, var(--line));
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
}

.arch-desc::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 28px;
    height: 28px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--al) 22%, transparent), transparent 70%);
    pointer-events: none;
}

.arch-desc-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 2px;
    position: relative;
    z-index: 1;
}

.arch-num {
    font-size: 12px;
    font-weight: 800;
    color: var(--al);
    letter-spacing: 0.06em;
    font-feature-settings: "tnum";
    padding: 4px 9px;
    border: 1px solid color-mix(in srgb, var(--al) 45%, transparent);
    background: color-mix(in srgb, var(--al) 12%, transparent);
    border-radius: 5px;
    line-height: 1;
}

.arch-name {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--txt);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.15;
}

.arch-desc-claim {
    font-size: 13.5px;
    font-weight: 700;
    color: color-mix(in srgb, var(--al) 55%, white);
    line-height: 1.35;
    margin: 4px 0 0;
    line-height: 1.2;
    letter-spacing: -0.005em;
}

.arch-desc-body {
    font-size: 12px;
    line-height: 1.55;
    color: #adb6cc;
    margin: 0;
    flex: 1;
}

/* ─── RIGHT — CELLS GRID ─── */
.arch-cells {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    min-height: 0;
}

.arch-cells--2 { grid-template-columns: 1fr 1fr; }
.arch-cells--3 { grid-template-columns: 1.5fr 1fr 1fr; }

.arch-cell {
    --cc: var(--al);
    position: relative;
    padding: 10px 14px;
    background: rgba(255,255,255,0.030);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.20s var(--ease);
}

.arch-cell:hover {
    border-color: color-mix(in srgb, var(--cc) 38%, var(--line));
    background: rgba(255,255,255,0.045);
}

.arch-cell h5 {
    font-size: 13px;
    font-weight: 700;
    color: var(--txt);
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin: 0;
    line-height: 1.2;
}

.arch-cell p {
    font-size: 11px;
    line-height: 1.5;
    color: var(--txt-3);
    margin: 0;
}

.arch-cell-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--cc);
    letter-spacing: 0.18em;
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--cc) 42%, transparent);
    background: color-mix(in srgb, var(--cc) 10%, transparent);
    border-radius: 4px;
    margin-bottom: 2px;
}

.arch-cell-tag--iris { --cc: #a020f0; }
.arch-cell-tag--cn   { --cc: var(--cn); }
.arch-cell-tag--mp   { --cc: #d4477a; }
.arch-cell-tag--dt   { --cc: var(--dt); }
.arch-cell-tag--iot  { --cc: #10b981; }

.arch-cell--featured {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--cc) 15%, transparent), transparent 60%),
        linear-gradient(180deg, color-mix(in srgb, var(--cc) 8%, transparent), rgba(255,255,255,0.005));
    border-color: color-mix(in srgb, var(--cc) 40%, var(--line));
}

.arch-coda { margin-top: var(--coda-margin-top); }

/* -------------------------------------------------------------------------
   27. Lead Modal
   ------------------------------------------------------------------------- */
.lead-modal {
    position: fixed; inset: 0;
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}
.lead-modal[hidden] { display: none; }

.lead-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(7, 6, 27, 0.88);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    animation: fadeIn 0.22s var(--ease);
}

.lead-modal-card {
    position: relative;
    width: 100%; max-width: 600px;
    background:
        radial-gradient(circle at top right, rgba(160, 32, 240, 0.10), transparent 50%),
        linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    padding: 44px 44px 36px;
    animation: lift 0.28s var(--ease);
    z-index: 1;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lift { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.lead-modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 34px; height: 34px;
    border-radius: 50%;
    color: var(--txt-4);
    transition: all 0.18s var(--ease);
    display: flex; align-items: center; justify-content: center;
}
.lead-modal-close:hover { color: var(--txt); background: rgba(255, 255, 255, 0.06); }

.lead-modal-head { margin-bottom: 28px; }
.lead-modal-eyebrow {
    display: block;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.22em; color: #a020f0;
    margin-bottom: 14px;
}
.lead-modal-title {
    font-size: 26px; font-weight: 700;
    color: var(--txt); margin-bottom: 10px;
    line-height: 1.2; letter-spacing: -0.015em;
}
.lead-modal-sub {
    font-size: 14px; line-height: 1.5;
    color: var(--txt-3);
}

.lead-form { display: flex; flex-direction: column; gap: 16px; }
.lead-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em; color: var(--txt-4);
    text-transform: uppercase;
}
.req { color: var(--err); margin-left: 2px; }

.field input, .field select {
    height: 46px; padding: 0 16px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    color: var(--txt);
    font-size: 14px; font-weight: 500;
    transition: border-color 0.18s var(--ease);
    outline: none;
}
.field input::placeholder { color: var(--txt-5); }
.field input:focus, .field select:focus { border-color: var(--dt); background: rgba(0, 0, 0, 0.35); }
.field input[aria-invalid="true"] { border-color: var(--err); }

.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 38px;
}

.field-warn {
    font-size: 11.5px; color: var(--warn);
    line-height: 1.45; margin-top: 2px;
}

.lead-consent {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 12px; line-height: 1.5; color: var(--txt-3);
    cursor: pointer;
}
.lead-consent input[type="checkbox"] {
    width: 16px; height: 16px; margin-top: 1px;
    accent-color: #a020f0; cursor: pointer; flex-shrink: 0;
}

.lead-form-error {
    font-size: 12px; color: var(--err);
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 4px;
}

.lead-submit {
    height: 50px;
    background: linear-gradient(135deg, #a020f0, #2563eb);
    color: #fff;
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    border-radius: 8px;
    transition: transform 0.18s var(--ease);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.lead-submit:hover { transform: translateY(-1px); }
.lead-submit:disabled { opacity: 0.55; cursor: not-allowed; }

.lead-privacy {
    font-size: 10.5px; line-height: 1.55;
    color: var(--txt-4); text-align: center;
    margin-top: 4px;
}

.lead-success { text-align: center; padding: 16px 0; }
.success-check {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(16, 185, 129, 0.10);
    border: 1.5px solid var(--ok);
    color: var(--ok);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
}
.lead-success h3 {
    font-size: 22px; font-weight: 700;
    color: var(--txt); margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.lead-success p { font-size: 13.5px; color: var(--txt-3); line-height: 1.5; margin-bottom: 28px; }
.lead-success a { color: var(--dt); border-bottom: 1px solid currentColor; }
.lead-success-cta { padding-top: 22px; border-top: 1px solid var(--line); }
.lead-success-cta p { margin-bottom: 14px; font-size: 13px; color: var(--txt); }

.lead-schedule {
    display: inline-flex;
    padding: 12px 24px;
    background: linear-gradient(135deg, #a020f0, #2563eb);
    color: #fff;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    border-radius: 8px;
    transition: transform 0.18s var(--ease);
}
.lead-schedule:hover { transform: translateY(-1px); }

/* -------------------------------------------------------------------------
   28. Responsive guard
   ------------------------------------------------------------------------- */
@media (max-width: 900px), (max-height: 600px) {
    .deck-header { padding: 0 16px; }
    .logo-subtext, .keyboard-hint, .hbtn--ghost { display: none; }
    .hbtn { font-size: 11px; padding: 0 12px; }
    .deck-sidebar { display: none; }
    .nav-arrow { padding: 0 14px; height: 44px; font-size: 10px; bottom: 16px; }
    .nav-arrow-label { display: none; }
    .nav-arrow--next { right: 16px; }
    .nav-arrow--prev { left: 16px; }
}

/* -------------------------------------------------------------------------
   29. PRINT — 1920x1080 landscape · 18 pages
   -------------------------------------------------------------------------
    Drives BOTH paths:
      - browser-native print (Cmd+P → Save as PDF)
      - Playwright `page.emulateMedia('print') + page.pdf(...)`
   ------------------------------------------------------------------------- */
@page { size: 1920px 1080px; margin: 0; }

@media print {
    * { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; print-color-adjust: exact !important; }

    html, body {
        background: var(--bg) !important;
        overflow: visible !important;
        width: 1920px; height: auto;
    }

    .ambient, .deck-header, .deck-sidebar, .lead-modal, .nav-arrow,
    [data-pdf-hide="true"] {
        display: none !important;
    }

    .presentation-viewport {
        position: static !important;
        top: auto !important; left: auto !important;
        transform: none !important;
        width: 1920px !important; height: auto !important;
        border: none !important; border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .slide {
        display: flex !important;
        position: relative !important;
        width: 1920px !important; height: 1080px !important;
        page-break-after: always !important;
        break-after: page !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        animation: none !important;
        overflow: hidden;
    }

    /* Defensive: any descendant must never split across pages either. */
    .slide * {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .slide:last-of-type { page-break-after: auto !important; break-after: auto !important; }

    .slide.is-active .slide-body > * { animation: none !important; opacity: 1 !important; transform: none !important; }

    /* Disable all animations, transforms and transitions that destabilise PDF rendering */
    .surface-card, .pillar, .market-card, .engine, .gtm-phase, .tcard, .comp, .member,
    .vec-section, .vec-paper-poster, .vb-fill, .case-step, .arch-layer, .arch-cell, .fund-panel,
    .ambient-orb, .aurora-blob, .orb-core, .orb-ring, .engine-pulse, .eyebrow-dot, .eb-pulse, .cp-pulse, .tm-pulse, .pulse-dot {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

    /* Backdrop-filter often fails in print → keep panels visible with solid borders */
    .slide-tag-corner, .vec-section, .vec-paper-panel, .engagement-brief, .arch-desc {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Hover states never fire in print — neutralise any leftover :hover transforms */
    *:hover { transform: none !important; }

    /* Ensure footer / page number stay crisp on PDF */
    .slide-foot { color: var(--txt-3) !important; }
    .slide-foot span:last-child { color: var(--txt) !important; }
}

/* -------------------------------------------------------------------------
   30. PDF EXPORT MODE (screen mirror) — body.pdf-export-mode
   -------------------------------------------------------------------------
    Triggered by:
      - URL query  ?pdf=1                 (app.js boot)
      - Playwright page.evaluate(() => document.body.classList.add(...))

    Purpose: render all 18 slides stacked vertically at native 1920x1080
    on the **screen** medium, so the export looks identical whether consumed
    via @media print (Cmd+P, Playwright print emulation) or via a normal
    browser tab loaded with ?pdf=1 for visual QA before generation.

    Kept intentionally in lockstep with the @media print block above.
   ------------------------------------------------------------------------- */
body.pdf-export-mode {
    overflow: visible !important;
    background: var(--bg) !important;
}
body.pdf-export-mode .ambient,
body.pdf-export-mode .deck-header,
body.pdf-export-mode .deck-sidebar,
body.pdf-export-mode .nav-arrow,
body.pdf-export-mode .lead-modal,
body.pdf-export-mode [data-pdf-hide="true"] {
    display: none !important;
}
body.pdf-export-mode .presentation-viewport {
    position: static !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    width: 1920px !important; height: auto !important;
    border: none !important; border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin: 0 auto !important;
}
body.pdf-export-mode .slide {
    display: flex !important;
    position: relative !important;
    width: 1920px !important; height: 1080px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    overflow: hidden !important;
}
body.pdf-export-mode .slide.is-active .slide-body > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}
body.pdf-export-mode *,
body.pdf-export-mode *::before,
body.pdf-export-mode *::after {
    animation: none !important;
    transition: none !important;
}
body.pdf-export-mode *:hover { transform: none !important; }