/* =========================================================================
   PROJBRAIN — INTERACTIVE PITCH DECK CSS
   Enterprise-Grade Editorial Deep Tech Aesthetic
   ========================================================================= */

:root {
    /* Color Palette — Cursor System */
    --cream: #f7f7f4;            /* Cursor's warm light grey background */
    --accent: #26251e;           /* Cursor's dark — NO orange, NO teal */
    --black: #26251e;            /* Cursor's warm near-black text */
    --g5: #6b6a64;
    --g4: #9a9990;
    --g3: #c3c2ba;
    --g2: #e2e2dc;               /* Warm neutral border */
    --g1: #f0f0eb;               /* Lightest warm tonal — used for mobile section backgrounds */
    --white: #FFFFFF;

    /* Semantic Colors */
    --warn: #8a7340;
    --crit: #8a3a30;
    --ok: #2d4a3e;

    /* Typography */
    --font-serif: 'Instrument Serif', Georgia, serif;
    --font-sans: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --ff-heading: var(--font-serif);
    --ff-mono: var(--font-mono);

    /* Spacing & Layout */
    --grid-gap: 24px;
    --section-pad-y: 80px;
    --section-pad-x: 40px;
    --max-w: 1280px;
    --border-radius: 4px;

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --hover-trans: all 0.3s var(--ease-out);
}

/* ────────── 1. GLOBAL RESET & BASE ────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    background-color: var(--cream);
    /* Cohere-style polygon tessellation — shows on light sections, hidden by dark overrides */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cg fill='none' stroke='%2326251e' stroke-width='0.5' opacity='0.015'%3E%3Cpolygon points='0,0 180,48 58,195 0,160'/%3E%3Cpolygon points='180,48 378,12 255,188 58,195'/%3E%3Cpolygon points='378,12 568,58 430,215 255,188'/%3E%3Cpolygon points='568,58 748,18 620,200 430,215'/%3E%3Cpolygon points='748,18 950,54 805,208 620,200'/%3E%3Cpolygon points='950,54 1200,0 1200,180 805,208'/%3E%3Cpolygon points='0,160 58,195 42,375 0,380'/%3E%3Cpolygon points='58,195 255,188 200,378 42,375'/%3E%3Cpolygon points='255,188 430,215 380,395 200,378'/%3E%3Cpolygon points='430,215 620,200 560,405 380,395'/%3E%3Cpolygon points='620,200 805,208 755,385 560,405'/%3E%3Cpolygon points='805,208 1200,180 1200,390 755,385'/%3E%3Cpolygon points='0,380 42,375 80,565 0,570'/%3E%3Cpolygon points='42,375 200,378 260,558 80,565'/%3E%3Cpolygon points='200,378 380,395 455,572 260,558'/%3E%3Cpolygon points='380,395 560,405 640,568 455,572'/%3E%3Cpolygon points='560,405 755,385 830,560 640,568'/%3E%3Cpolygon points='755,385 1200,390 1200,580 830,560'/%3E%3Cpolygon points='0,570 80,565 60,758 0,800'/%3E%3Cpolygon points='80,565 260,558 240,775 60,758'/%3E%3Cpolygon points='260,558 455,572 430,800 240,775'/%3E%3Cpolygon points='455,572 640,568 650,785 430,800'/%3E%3Cpolygon points='640,568 830,560 840,800 650,785'/%3E%3Cpolygon points='830,560 1200,580 1200,800 840,800'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-attachment: fixed;
    color: var(--black);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

strong { font-weight: 700; color: var(--black); }
em { font-family: var(--font-serif); font-style: italic; color: var(--accent); }

/* Scroll Progress Bar */
.scroll-progress-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 4px;
    background: transparent; z-index: 1000;
}
.scroll-progress-bar {
    height: 100%; width: 0%; background: var(--accent);
    transition: width 0.1s ease-out;
}

/* Layout Utilities */
.content-container { width: 100%; }
.deck-section {
    width: 100%;
    min-height: auto;
    padding: var(--section-pad-y) var(--section-pad-x);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid var(--g2);
}
/* Hero is the ONLY section that fills the viewport */
.hero-section { min-height: 100vh; }
.section-inner {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.split-layout {
    display: flex;
    gap: 48px;
    align-items: center;
}
.split-left { flex: 1; min-width: 0; }
.split-right { flex: 1; position: relative; min-width: 0; }
.section-top-split {
    display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px;
}
.sts-left { flex: 0 0 65%; }
.sts-right { flex: 0 0 32%; padding-top: 24px; color: var(--g5); font-size: 15px; }
.sts-right-aligned { flex: 0 0 32%; display: flex; flex-direction: column; align-items: flex-end; padding-top: 16px; }

/* Typographic Scales */
.brand-tag {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px;
}
.brand-dot-sm { width: 10px; height: 10px; background: var(--accent); }
.brand-tag-logo { flex-shrink: 0; }
.brand-tag-name { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--g5); }

.label-row { display: none; }
.badge-outline {
    font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; border: 1px solid var(--black); padding: 4px 10px;
}
.label-mono {
    font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--g5);
    text-transform: uppercase; letter-spacing: 2px;
}
.label-dot-black { display: none; }
.label-dot-accent { display: none; }

.section-title-lg {
    font-family: var(--font-serif); font-size: clamp(28px, 5vw + 6px, 72px); line-height: 1.1; letter-spacing: -2px; margin-bottom: 24px;
}
.section-body { font-size: 18px; color: var(--g5); line-height: 1.6; max-width: 600px; }
.accent-text { color: var(--accent); }
.subtitle-mono { font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; color: var(--g5); text-transform: uppercase; }

/* Animation Utilities */
.animate-up {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.animate-up.visible { opacity: 1; transform: translateY(0); }
/* Hero elements auto-reveal (no JS dependency) */
.hero-section .animate-up { animation: heroReveal 0.8s var(--ease-out) forwards; }
.hero-section .animate-up.delay-1 { animation-delay: 0.1s; }
.hero-section .animate-up.delay-2 { animation-delay: 0.2s; }
.hero-section .animate-up.delay-3 { animation-delay: 0.3s; }
@keyframes heroReveal { to { opacity: 1; transform: translateY(0); } }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* ────────── 2. HERO SECTION ────────── */
.hero-section {
    background: var(--black); color: var(--cream);
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    position: relative; overflow: hidden;
}
.hero-particle-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; opacity: 0.35;
}
.hero-topbar {
    position: absolute; top: 0; left: 0; width: 100%; padding: 32px 48px;
    z-index: 2; text-align: left;
}
.hero-brand {
    display: flex; flex-direction: column; gap: 10px;
}
.hero-brand-row { display: flex; align-items: center; gap: 12px; }
.hero-logo { flex-shrink: 0; filter: drop-shadow(0 0 12px rgba(255,255,255,0.1)); }
.brand-name { font-family: var(--font-sans); font-size: 18px; font-weight: 700; letter-spacing: 0.3px; color: var(--white); line-height: 1; }
.brand-sub { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 2px; color: rgba(255,255,255,0.55); text-transform: uppercase; line-height: 1; position: absolute; left: 50%; transform: translateX(-50%); top: 40px; white-space: nowrap; }
.hero-inner { max-width: 900px; width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }

.hero-headline h1 { font-family: var(--font-serif); font-size: clamp(36px, 7vw + 8px, 120px); font-weight: 400; line-height: 1; margin-bottom: 28px; letter-spacing: -4px; }
.hero-headline .accent-italic { font-style: italic; color: rgba(247,247,244,0.65); } /* On dark hero — subtle cream italic, not pigmented */
.hero-tagline { font-family: var(--font-mono); font-size: 16px; color: var(--g4); margin-bottom: 40px; line-height: 1.6; }
.hero-tagline-strong { color: var(--cream) !important; font-weight: 700; }
.hero-tagline-sub { opacity: 0.6; font-weight: 400; }

/* Pills Navigation */
.hero-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 40px; max-width: 800px; }
.pill {
    padding: 10px 20px; border: 1px solid rgba(255,255,255,0.2); border-radius: 40px;
    font-size: 13px; font-weight: 500; color: var(--white); text-decoration: none;
    transition: var(--hover-trans); background: transparent; cursor: pointer;
}
.pill:hover, .pill.active { background: var(--white); color: var(--black); }

/* Ask Bar */
.hero-ask-bar {
    width: 100%; max-width: 600px; position: relative; display: flex; align-items: center;
}
#heroAskInput {
    width: 100%; padding: 20px 60px 20px 24px; border: none; border-radius: 8px;
    background: rgba(255,255,255,0.1); color: var(--white); font-size: 18px; outline: none; border: 1px solid rgba(255,255,255,0.2);
    transition: var(--hover-trans);
}
#heroAskInput:focus { border-color: rgba(247,247,244,0.5); background: rgba(255,255,255,0.15); box-shadow: 0 0 0 4px rgba(247,247,244,0.1); }
#heroAskInput::placeholder { color: var(--g4); }
#heroAskBtn {
    position: absolute; right: 12px; background: var(--accent); border: none; color: var(--white);
    width: 40px; height: 40px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: var(--hover-trans);
}
#heroAskBtn:hover { transform: scale(1.05); }

/* ────────── 3. MISSION (01) ────────── */
.icon-grid-3x3 {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.ig-item {
    background: var(--white); border: 1px solid var(--g2); padding: 24px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    aspect-ratio: 1; transition: var(--hover-trans); cursor: default;
}
.ig-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-color: var(--accent); }
.ig-icon { margin-bottom: 16px; width: 40px; height: 40px; }
.ig-item span { font-size: 13px; font-weight: 700; color: var(--black); }

/* ────────── 4. PROBLEM (02) ────────── */
.stats-grid-3x2 {
    display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--g2);
}
.stat-cell {
    padding: 40px 32px; border: 1px solid var(--g2); margin: -1px; /* Overlap borders */
    display: flex; flex-direction: column;
}
.stat-cell-icon { width: 32px; height: 32px; margin-bottom: 24px; }
.stat-val { font-family: var(--font-mono); font-size: clamp(28px, 4vw + 8px, 56px); font-weight: 800; color: var(--black); line-height: 1; margin-bottom: 16px; }
.stat-cell h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.stat-cell p { font-size: 13px; color: var(--g5); line-height: 1.6; }

/* ────────── 5. LATENCY LOOP (03) ────────── */
.loop-cards-4 {
    display: flex; gap: 2px; background: var(--black); border: 2px solid var(--black); margin-top: 32px;
}
.loop-card {
    flex: 1; padding: 32px 24px; background: var(--cream);
    display: flex; flex-direction: column; position: relative;
    transition: var(--hover-trans);
}
.loop-card:hover {
    transform: translateY(-4px); z-index: 2;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.loop-card.danger { background: var(--accent); color: var(--white); }
.lc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.lc-num { font-family: var(--font-serif); font-size: 48px; font-weight: 400; color: var(--g2); line-height: 1; font-style: italic; }
.loop-card.danger .lc-num { color: rgba(255,255,255,0.4); }
.lc-icon { font-size: 28px; }
.lc-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; color: var(--black); }
.loop-card.danger .lc-title { color: var(--white); }
.lc-sub { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--g4); letter-spacing: 1.5px; margin-bottom: 16px; display: block; }
.loop-card.danger .lc-sub { color: rgba(255,255,255,0.7); }
.lc-desc { font-size: 13px; color: var(--g5); line-height: 1.7; flex: 1; }
.loop-card.danger .lc-desc { color: var(--white); }
.lc-status {
    margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--g2);
    font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--g4);
}
.loop-card.danger .lc-status { border-top-color: rgba(255,255,255,0.2); color: var(--white); }
.lc-status.warn { color: #c86e1a; }
.lc-bar-fill { height: 4px; background: var(--g2); width: 100%; margin-top: auto; }
.loop-card.danger .lc-bar-fill { background: var(--white); }
.loop-card.danger .lc-status.critical { color: var(--white); font-weight: 800; }

/* ────────── 6. VALUE DELIVERY (04) ────────── */
.transform-cols-3 {
    display: flex; gap: 2px; margin-top: 32px;
    border: 2px solid var(--black); background: var(--black);
}
.tcol {
    padding: 44px 32px; background: var(--cream);
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
    transition: background 0.3s ease;
}
.tcol:hover {
    background: #ebeae4;
}
.tcol-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 28px; }
.transform-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.t-old { font-family: var(--font-serif); font-size: 44px; color: var(--g2); text-decoration: line-through; font-style: italic; }
.t-arrow { font-size: 24px; color: var(--accent); font-weight: 700; }
.t-new { font-family: var(--font-serif); font-size: 44px; color: var(--black); font-style: italic; }
.t-outcome { font-size: 15px; font-weight: 700; color: var(--black); margin-top: 4px; }

.comparison-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px;
}
.comp-col { padding: 24px; background: var(--white); border: 1px solid var(--g2); border-radius: 2px; display: flex; flex-direction: column; gap: 16px; }
.comp-block p { font-size: 13px; color: var(--g5); line-height: 1.7; }
.comp-label-legacy { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--g4); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
.comp-label-pj { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
.comp-pj { border-left: 3px solid var(--accent); padding-left: 16px; background: rgba(38,37,30,0.03); padding: 16px; padding-left: 19px; border-radius: 2px; }
.comp-pj p { color: var(--black); font-weight: 600; }

/* ────────── 7. SOLUTION (05) ARCHITECTURE — SLIDE 5 EXACT ────────── */
.s5-main {
    display: grid; grid-template-columns: 240px 1fr 240px; gap: 16px;
    margin-top: 48px; min-height: 500px; overflow: visible; position: relative;
}
.s5-col-left, .s5-col-right { display: flex; flex-direction: column; }
.s5-col-label { font-family: 'Instrument Serif', serif; font-size: 20px; color: var(--accent); text-align: center; margin-bottom: 16px; }
.s5-icon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; align-content: center; }
.s5-ic {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 14px 8px; cursor: default; position: relative;
}
.s5-ic-shape {
    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
    animation: iconFloat 4s ease-in-out infinite;
    transition: filter 0.4s ease;
}
.s5-ic:hover .s5-ic-shape {
    filter: drop-shadow(0 0 8px rgba(38,37,30,0.25));
}
.s5-ic-label {
    font-size: 10px; font-weight: 700; color: var(--black); text-transform: uppercase;
    letter-spacing: 0.5px; text-align: center; line-height: 1.3;
    transition: color 0.3s ease;
}
.s5-ic:hover .s5-ic-label { color: var(--accent); }

/* Individual icon animations — each icon gets unique motion */
@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
@keyframes iconRock {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
}
@keyframes iconBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-8px) scale(1.05); }
    60% { transform: translateY(-3px) scale(1); }
}
@keyframes iconSpin {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(8deg) scale(1.08); }
}
@keyframes iconBreathe {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* Left column — Project Data icons */
.s5-col-left .s5-ic:nth-child(1) .s5-ic-shape { animation: iconFloat 3.5s ease-in-out infinite; }       /* PDFs */
.s5-col-left .s5-ic:nth-child(2) .s5-ic-shape { animation: iconPulse 4s ease-in-out infinite 0.3s; }    /* Schedules */
.s5-col-left .s5-ic:nth-child(3) .s5-ic-shape { animation: iconBreathe 3s ease-in-out infinite 0.5s; }  /* Voice */
.s5-col-left .s5-ic:nth-child(4) .s5-ic-shape { animation: iconRock 4.5s ease-in-out infinite 0.2s; }   /* Emails */
.s5-col-left .s5-ic:nth-child(5) .s5-ic-shape { animation: iconSpin 5s ease-in-out infinite 0.4s; }     /* Site Photos */
.s5-col-left .s5-ic:nth-child(6) .s5-ic-shape { animation: iconBounce 4s ease-in-out infinite 0.6s; }   /* Drawings */
.s5-col-left .s5-ic:nth-child(7) .s5-ic-shape { animation: iconPulse 3.5s ease-in-out infinite 0.8s; }  /* ERP */
.s5-col-left .s5-ic:nth-child(8) .s5-ic-shape { animation: iconFloat 4.2s ease-in-out infinite 1s; }    /* Project Mgmt */

/* Right column — Intelligence icons */
.s5-col-right .s5-ic:nth-child(1) .s5-ic-shape { animation: iconFloat 3.5s ease-in-out infinite; }        /* Pre-construction Intelligence */
.s5-col-right .s5-ic:nth-child(2) .s5-ic-shape { animation: iconPulse 3.5s ease-in-out infinite 0.3s; }  /* Claims Radar */
.s5-col-right .s5-ic:nth-child(3) .s5-ic-shape { animation: iconBreathe 4s ease-in-out infinite 0.5s; }  /* Analytics */
.s5-col-right .s5-ic:nth-child(4) .s5-ic-shape { animation: iconSpin 4.5s ease-in-out infinite 0.7s; }   /* Predict */
.s5-col-right .s5-ic:nth-child(5) .s5-ic-shape { animation: iconFloat 3.8s ease-in-out infinite 0.2s; }  /* Auto Reports */
.s5-col-right .s5-ic:nth-child(6) .s5-ic-shape { animation: iconRock 4s ease-in-out infinite 0.4s; }     /* Drawing Intel */
.s5-col-right .s5-ic:nth-child(7) .s5-ic-shape { animation: iconBounce 3.5s ease-in-out infinite 0.6s; } /* RFI Automation */
.s5-col-right .s5-ic:nth-child(8) .s5-ic-shape { animation: iconBounce 4.5s ease-in-out infinite 0.8s; } /* Risk */

/* Hover intensifies animation */
.s5-ic:hover .s5-ic-shape {
    animation-duration: 0.8s !important;
    animation-timing-function: ease-in-out !important;
}

/* Center — Interactive Canvas */
.s5-center { display: flex; align-items: center; justify-content: center; position: relative; min-height: 540px; overflow: visible; }
.s5-kg-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: crosshair;
    -webkit-mask-image: radial-gradient(ellipse 88% 82% at 50% 50%, black 22%, rgba(0,0,0,0.65) 48%, rgba(0,0,0,0.2) 65%, transparent 80%);
    mask-image: radial-gradient(ellipse 88% 82% at 50% 50%, black 22%, rgba(0,0,0,0.65) 48%, rgba(0,0,0,0.2) 65%, transparent 80%);
}
.s5-hub-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 10; pointer-events: none; }
.s5-hub {
    width: 100px; height: 100px; background: var(--accent); border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 0 0 8px rgba(38,37,30,0.15), 0 0 0 20px rgba(38,37,30,0.06), 0 0 40px rgba(38,37,30,0.1);
    animation: hubPulse 3s ease-in-out infinite;
}
@keyframes hubPulse {
    0%, 100% { box-shadow: 0 0 0 8px rgba(38,37,30,0.15), 0 0 0 20px rgba(38,37,30,0.06), 0 0 40px rgba(38,37,30,0.1); }
    50% { box-shadow: 0 0 0 12px rgba(38,37,30,0.2), 0 0 0 28px rgba(38,37,30,0.09), 0 0 60px rgba(38,37,30,0.14); }
}
.s5-hub-dot { width: 32px; height: 32px; background: var(--white); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 20px; font-weight: 800; color: var(--black); line-height: 1; }
.s5-hub-text { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: var(--white); margin-top: 4px; text-transform: uppercase; }

/* Flows */
.s5-flow-l { position: absolute; top: 50%; left: -20px; width: 100px; height: 1.5px; background: linear-gradient(to right, var(--g2), var(--accent)); z-index: 2; }
.s5-flow-r { position: absolute; top: 50%; right: -20px; width: 100px; height: 1.5px; background: linear-gradient(to left, var(--g2), var(--accent)); z-index: 2; }
.s5-flow-l::after { content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; border-left: 5px solid var(--accent); }
.s5-flow-r::before { content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; border-right: 5px solid var(--accent); }

/* ===== ICON SHAPES (CSS-only, accent color) ===== */
/* LEFT: Data Sources */
.s-doc { width: 24px; height: 30px; border: 2.5px solid var(--accent); position: relative; }
.s-doc::after { content: ''; position: absolute; top: 6px; left: 4px; right: 4px; height: 2px; background: var(--accent); opacity: 0.4; box-shadow: 0 5px 0 rgba(38,37,30,0.3), 0 10px 0 rgba(38,37,30,0.2); }
.s-cal { width: 26px; height: 24px; border: 2.5px solid var(--accent); border-top: 5px solid var(--accent); position: relative; }
.s-cal::after { content: ''; position: absolute; top: 4px; left: 4px; width: 5px; height: 4px; background: var(--accent); opacity: 0.5; box-shadow: 8px 0 0 rgba(38,37,30,0.4); }
.s-mic { width: 14px; height: 24px; border: 2.5px solid var(--accent); border-radius: 7px; }
.s-mail { width: 26px; height: 18px; border: 2.5px solid var(--accent); position: relative; }
.s-mail::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 8px solid var(--accent); opacity: 0.4; }
.s-cam { width: 26px; height: 20px; border: 2.5px solid var(--accent); border-radius: 3px; position: relative; }
.s-cam::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border: 2px solid var(--accent); border-radius: 50%; transform: translate(-50%, -50%); }
.s-dwg { width: 26px; height: 26px; border: 2.5px solid var(--accent); position: relative; }
.s-dwg::before { content: ''; position: absolute; top: 50%; left: 4px; right: 4px; height: 1.5px; background: var(--accent); opacity: 0.3; }
.s-dwg::after { content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1.5px; background: var(--accent); opacity: 0.3; }
.s-erp { width: 26px; height: 26px; border: 2.5px solid var(--accent); border-radius: 50%; position: relative; }
.s-erp::before { content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border: 2px solid var(--accent); border-radius: 50%; opacity: 0.4; }
.s-pm { width: 28px; height: 20px; position: relative; }
.s-pm-bar { width: 100%; height: 3.5px; background: var(--accent); margin-bottom: 3px; border-radius: 2px; }
.s-pm-bar:nth-child(2) { width: 75%; opacity: 0.7; }
.s-pm-bar:nth-child(3) { width: 50%; opacity: 0.4; }
/* RIGHT: Intelligence Outputs */
.s-bolt { width: 18px; height: 28px; }
.s-bolt-z { width: 100%; height: 100%; background: var(--accent); clip-path: polygon(55% 0%, 10% 48%, 40% 48%, 20% 100%, 90% 42%, 55% 42%, 75% 0%); }
.s-shield { width: 24px; height: 28px; background: var(--accent); clip-path: polygon(50% 0%, 100% 20%, 100% 65%, 50% 100%, 0% 65%, 0% 20%); }
.s-chart { width: 26px; height: 22px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); display: flex; align-items: flex-end; gap: 2px; padding: 0 0 2px 2px; }
.s-b { background: var(--accent); width: 4.5px; }
.s-clock { width: 26px; height: 26px; border: 2.5px solid var(--accent); border-radius: 50%; position: relative; }
.s-clock::before { content: ''; position: absolute; top: 5px; left: 50%; width: 2px; height: 8px; background: var(--accent); transform: translateX(-50%) rotate(25deg); transform-origin: bottom; }
.s-report { width: 22px; height: 26px; border: 2.5px solid var(--accent); position: relative; }
.s-report::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; color: var(--accent); font-weight: 900; }
.s-dintel { width: 26px; height: 26px; border: 2.5px dashed var(--accent); position: relative; }
.s-dintel::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border: 2.5px solid var(--accent); border-radius: 50%; transform: translate(-50%, -50%); }
.s-precon { width: 30px; height: 30px; border: 2.5px solid var(--accent); position: relative; }
.s-precon::before { content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border: 1.5px dashed var(--accent); opacity: 0.45; }
.s-precon::after { content: ''; position: absolute; top: 8px; left: 8px; width: 6px; height: 6px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.s-rfi { width: 28px; height: 32px; position: relative; }
.s-rfi-doc { width: 28px; height: 22px; border: 2.5px solid var(--accent); position: absolute; top: 0; }
.s-rfi-doc::after { content: ''; position: absolute; top: 5px; left: 4px; right: 4px; height: 2px; background: var(--accent); opacity: 0.35; box-shadow: 0 5px 0 rgba(38,37,30,0.25); }
.s-rfi-arr { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 10px; border: 2px solid var(--accent); border-top: none; border-radius: 0 0 9px 9px; }
.s-rfi-arr::after { content: ''; position: absolute; top: -4px; right: -2px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--accent); }
.s-risk { width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 26px solid var(--accent); position: relative; }
.s-risk::after { content: '!'; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 900; color: var(--white); }

/* ────────── 8. PRODUCT GTM (06) ────────── */
.columns-3 {
    display: flex; gap: 0; border: 1px solid var(--g2); margin-top: 48px; background: var(--white);
}
.col-box {
    flex: 1; padding: 32px 28px; border-right: 1px solid var(--g2);
    display: flex; flex-direction: column;
}
.col-box:last-child { border-right: none; }
.cb-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.cb-icon { font-size: 20px; color: var(--g4); }
.cb-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--g4); text-transform: uppercase; letter-spacing: 2px; }
.cb-title { font-size: 20px; font-weight: 800; color: var(--black); margin-bottom: 16px; line-height: 1.2; }
.cb-desc { font-size: 13px; color: var(--g5); line-height: 1.6; flex: 1; padding-bottom: 32px; }
.cb-mech {
    margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--g2);
}
.cbm-label { font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--g4); text-transform: uppercase; letter-spacing: 1.5px; display: block; margin-bottom: 8px; }
.cbm-value { font-size: 12px; font-weight: 700; color: var(--black); line-height: 1.5; }

/* ────────── 9. PRODUCT MOCKUP (07) ────────── */
.iphone-mockup {
    width: 320px; max-width: 100%; height: 620px;
    /* Background IS the WhatsApp beige — so it's never white even during animation */
    background: #efeae2;
    border: 8px solid var(--black);
    border-radius: 32px; position: relative; overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); margin: 0 auto;
    display: flex; flex-direction: column;
}
.iphone-notch {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 120px; height: 24px; background: var(--black); border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; z-index: 10;
}
.whatsapp-header {
    background: #008069; padding: 40px 16px 16px; display: flex; align-items: center; gap: 12px; color: var(--white);
    flex-shrink: 0;
}
.wa-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--white); color: var(--black); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.wa-avatar::after { content: 'P'; }
.wa-info { display: flex; flex-direction: column; }
.wa-info strong { color: var(--white); font-size: 15px; }
.wa-info span { font-size: 11px; opacity: 0.8; }
.whatsapp-body {
    background: #efeae2;
    flex: 1;
    min-height: 0; /* CRITICAL: allows flex child to shrink below content size */
    padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    overflow-y: auto; scroll-behavior: smooth;
}
.wa-msg { padding: 10px 12px; border-radius: 8px; font-size: 13px; max-width: 85%; line-height: 1.4; position: relative; }
.wa-msg.date { align-self: center; background: rgba(0,0,0,0.05); color: var(--g5); font-size: 11px; padding: 4px 12px; border-radius: 12px; max-width: auto; }
.wa-msg.in { align-self: flex-end; background: #d9fdd3; }
.wa-msg.out { align-self: flex-start; background: #fff; }
.wa-author { font-size: 11px; font-weight: 600; color: #008069; margin-bottom: 4px; }

/* Scenario strip — ALWAYS pinned at bottom, never pushed off screen */
.wa-scenario-strip {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 16px;
    background: #f0ece4;
    border-top: 1px solid rgba(0,0,0,0.1);
    flex-shrink: 0; /* CRITICAL: never let this get compressed or hidden */
    z-index: 5;
}
.wa-scenario-dot {
    width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent;
}
.wa-scenario-dot.active { background: #008069; border-color: #008069; filter: brightness(1.1); transform: scale(1.15); }
.wa-scenario-dot:hover:not(.active) { background: rgba(0,128,105,0.15); transform: scale(1.1); }

/* WhatsApp context label — hidden on desktop (inside absolute overlay), shown on mobile */
.wa-context-label {
    display: none; /* Hidden by default — shown on mobile via media query */
    font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--accent); background: rgba(38,37,30,0.06);
    border: 1px solid rgba(38,37,30,0.12); border-radius: 100px;
    padding: 6px 16px; text-align: center; margin: 0 auto 16px;
    width: fit-content;
}

/* Typing indicator */
.wa-typing { display: flex; gap: 4px; align-items: center; padding: 12px 16px; }
.wa-typing-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #999;
    animation: typingBounce 1.4s ease-in-out infinite;
}
.wa-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.wa-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* Message animation */
.wa-msg { opacity: 0; transform: translateY(12px); animation: waFadeIn 0.4s ease forwards; }
@keyframes waFadeIn { to { opacity: 1; transform: translateY(0); } }



.browser-mockup {
    width: 100%; height: 500px; background: var(--white); border: 1px solid var(--g2);
    border-radius: 8px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}
.browser-header {
    background: var(--cream); padding: 12px 16px; display: flex; align-items: center; border-bottom: 1px solid var(--g2); gap: 16px;
}
.b-dots { display: flex; gap: 6px; }
.b-dot { width: 10px; height: 10px; border-radius: 50%; }
.b-dot.red { background: #ff5f56; } .b-dot.yellow { background: #ffbd2e; } .b-dot.green { background: #27c93f; }
.b-url { background: var(--white); padding: 4px 16px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--g5); flex: 1; text-align: center; }
.browser-body { display: flex; height: calc(100% - 40px); }
.b-sidebar { width: 60px; border-right: 1px solid var(--g2); padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; background: #f4f4f2; }
.nav-item { 
    width: 32px; height: 32px; border-radius: 8px; 
    display: flex; align-items: center; justify-content: center;
    background: var(--g2); transition: background 0.2s ease;
}
.nav-item.active { background: #2d6a4f; }
.nav-item::before {
    content: ''; display: block;
    width: 14px; height: 14px;
    background: rgba(120,120,120,0.4);
    border-radius: 2px;
}
.nav-item.active::before { background: rgba(255,255,255,0.85); }
.b-content { flex: 1; padding: 32px; }
.b-title { font-size: 18px; font-weight: 700; margin-bottom: 24px; }
.b-stats { display: flex; gap: 24px; margin-bottom: 32px; }
.b-stat { display: flex; flex-direction: column; gap: 4px; }
.bs-val { font-family: var(--font-mono); font-size: 32px; font-weight: 800; color: var(--black); }
.bs-val.warn { color: var(--warn); } .bs-val.crit { color: var(--crit); }
.bs-lbl { font-size: 11px; color: var(--g5); text-transform: uppercase; font-weight: 600; letter-spacing: 1px; }

.b-table { border: 1px solid var(--g2); border-radius: 4px; overflow: hidden; }
.bt-row { display: grid; grid-template-columns: 2fr 1fr 1fr; border-bottom: 1px solid var(--g2); }
.bt-row:last-child { border-bottom: none; }
.bt-row.hdr { background: #f9f9f9; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; font-weight: 700; color: var(--g4); }
.bt-cell { padding: 12px 16px; font-size: 13px; display: flex; align-items: center; }
.status { padding: 4px 8px; border-radius: 40px; font-size: 11px; font-weight: 600; border: 1px solid transparent; }
.status.ok { color: #2e7d32; background: #e8f5e9; border-color: #c8e6c9; }
.status.warn { color: #e65100; background: #fff3e0; border-color: #ffe0b2; }
.status.crit { color: #c62828; background: #ffebee; border-color: #ffcdd2; }

/* ────────── 10. MARKET (08) ────────── */
.brutalist-stack { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 48px; }
.b-block {
    border: 2px solid var(--black); display: flex; align-items: center; justify-content: space-between;
    padding: 32px 48px; background: var(--cream);
    box-shadow: -8px 8px 0 var(--black); transition: var(--hover-trans);
}
.b-block:hover { transform: translate(4px, -4px); box-shadow: -12px 12px 0 var(--black); }
.b-tam { width: 100%; }
.b-sam { width: 85%; }
.b-som { width: 70%; background: var(--accent); color: var(--white); border-color: var(--black); }
.b-val { font-family: var(--font-serif); font-size: clamp(36px, 6vw + 8px, 80px); line-height: 1; letter-spacing: -3px; }
.b-som .b-val { color: var(--white); }
.b-info { display: flex; flex-direction: column; width: 300px; max-width: 100%; text-align: left; }
.b-lbl { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 2px; margin-bottom: 8px; }
.b-desc { font-size: 14px; font-weight: 500; }
.b-som .b-lbl, .b-som .b-desc { color: var(--cream); }

/* ────────── 11. BUSINESS MODEL (09) ────────── */
/* Side-by-side: revenue cards left, ROI engine right */
.model-roi-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 72px;
    margin-top: 40px;
    align-items: start;
}
.mrc-left, .mrc-right { display: flex; flex-direction: column; }
.mrc-left .section-title-lg { margin-bottom: 0; }
.mrc-left .rev-grid-2x2 { width: auto; margin-top: 28px; }
.mrc-divider-v { display: none; }

/* Vertical ROI flow — editorial metric blocks */
.roi-metrics {
    display: flex; flex-direction: column; margin-top: 32px;
}
.roi-metric-row {
    display: flex; flex-direction: column; padding: 28px 0;
    border-top: 1px solid var(--g2);
}
.roi-metric-row:last-child { border-bottom: 1px solid var(--g2); }
.roi-big {
    font-family: var(--ff-heading); font-size: clamp(28px, 4vw + 8px, 52px); font-weight: 800;
    letter-spacing: -2px; line-height: 1; color: var(--black);
}
.roi-mid {
    font-family: var(--ff-heading); font-size: clamp(24px, 3.5vw + 6px, 40px); font-weight: 800;
    letter-spacing: -1px; line-height: 1; color: var(--black);
}
.roi-huge {
    font-family: var(--ff-heading); font-size: clamp(36px, 6vw + 8px, 80px); font-weight: 800;
    letter-spacing: -4px; line-height: 1; color: var(--black);
}
.roi-label {
    font-family: var(--ff-mono); font-size: 11px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--g4); margin-top: 8px;
}
.roi-metric-highlight {
    background: var(--black); padding: 48px 40px; margin: 0 -28px;
    border: none;
}
.roi-metric-highlight .roi-huge { color: var(--cream); }
.roi-metric-highlight .roi-label { color: rgba(255,255,255,0.5); }

.section-inner-divider { border-top: 1px solid var(--g2); margin: 80px 0 72px; }
.rev-grid-2x2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; max-width: 600px;
    border: 1px solid var(--black); position: relative; margin-top: 32px; background: var(--white);
}
.rev-card { padding: 32px 28px; border: 1px solid var(--black); margin: -1px; display: flex; flex-direction: column; z-index: 2; background: var(--white); transition: var(--hover-trans); }
.rev-card:hover { background: var(--cream); }
.rc-num { font-family: var(--font-mono); font-size: 28px; font-weight: 800; color: var(--g2); margin-bottom: 16px; }
.rc-type { font-family: var(--font-serif); font-size: 26px; color: var(--accent); margin: 6px 0; line-height: 1.2; }
.rc-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }
.rc-desc { font-size: 12px; color: var(--g4); line-height: 1.4; }
.rev-pattern { position: absolute; left: -100px; bottom: -100px; width: 250px; height: 250px; z-index: 1; opacity: 0.5; pointer-events: none; }

/* ────────── 12. ROI ENGINE (10) ────────── */
.roi-flow-container {
    position: relative; height: 320px; width: 100%; margin-top: 64px;
}
.roi-axis { position: absolute; top: 160px; left: 0; right: 0; height: 2px; background: var(--black); z-index: 1; }
.roi-axis .arrow-head { position: absolute; right: 0; top: -6px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 14px solid var(--black); }
.node { position: absolute; top: 160px; transform: translateY(-50%); z-index: 10; display: flex; align-items: center; justify-content: center; }
.node-1 { left: 40px; }
.node-2 { left: 340px; }
.node-3 { right: 40px; }

.circle { border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 180px; height: 180px; }
.circle-black { background: var(--black); color: var(--white); }
.circle-outline { background: var(--cream); border: 3px solid var(--black); color: var(--black); }
.n-val { font-family: var(--font-serif); font-size: 64px; line-height: 1; letter-spacing: -2px; }
.circle-black .n-val { color: var(--white); } .circle-outline .n-val { color: var(--black); }
.n-desc { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-top: 8px; }
.circle-black .n-desc { color: var(--white); }

.rect-accent {
    width: 280px; height: 280px; background: var(--accent); color: var(--cream);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transform: rotate(3deg); box-shadow: -12px 12px 0 var(--black); border: 2px solid var(--black);
    transition: var(--hover-trans);
}
.rect-accent:hover { transform: rotate(0deg); box-shadow: -8px 8px 0 var(--black); }
.n-huge { font-family: var(--font-serif); font-size: 110px; line-height: 1; margin-bottom: -10px; letter-spacing: -6px; }
.n-sub { font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.n-val2 { font-family: var(--font-serif); font-size: 48px; line-height: 1; margin-top: 16px; letter-spacing: -1px; }

.label-bot-1 {
    position: absolute; bottom: 0; left: 40px; border-top: 1px solid var(--g2); padding-top: 16px; width: 240px;
    display: flex; justify-content: space-between; font-size: 13px; font-weight: 600;
}
.label-bot-1 .lb-val { color: var(--accent); }

/* ────────── 13. COMPETITION TABLE (11) ────────── */
.comp-table-card {
    background: var(--white); border: 1px solid var(--black); box-shadow: -6px 6px 0 var(--black); margin-top: 48px;
}
.ct-hdr, .ct-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; border-bottom: 1px solid var(--g2); }
.ct-row:last-child { border-bottom: none; }
.ct-hdr { background: var(--black); color: var(--white); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; border-bottom: none; }
.ct-col, .ct-col-l { padding: 14px 12px; display: flex; align-items: center; justify-content: center; }
.ct-col-l { justify-content: flex-start; font-size: 12px; font-weight: 600; border-right: 1px solid var(--g2); line-height: 1.35; min-width: 0; }
.ct-hdr .ct-col-l { border-right: 1px solid rgba(255,255,255,0.2); }
.ct-col.brand { background: rgba(38,37,30,0.04); color: var(--accent); font-weight: 700; border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.ct-hdr .ct-col.brand { background: var(--accent); color: var(--white); border-color: var(--accent); }
.ct-row .ct-col.brand { border-bottom: 1px solid var(--accent); }
.ct-row:last-child .ct-col.brand { border-bottom: none; }
.ct-col svg { width: 20px; height: 20px; }
.ct-col svg.check { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ct-col svg.x { stroke: var(--g4); stroke-width: 2; }
.ct-col.txt { font-size: 12px; font-weight: 600; color: var(--g5); }

.comp-table-card .ct-row.separator { background: var(--black); }
.comp-table-card .ct-row.separator .ct-col-l {
    font-family: var(--font-mono); font-size: 10px; color: var(--white);
    text-transform: uppercase; letter-spacing: 2px; justify-content: flex-start;
    border-right: none; grid-column: 1 / -1;
}
.comp-bottom-quote {
    font-size: 15px; color: var(--g5); margin-top: 32px; line-height: 1.6;
}
.comp-bottom-quote em { color: var(--black); font-style: italic; }
.label-dot-accent {
    width: 10px; height: 10px; background: var(--accent); display: inline-block; border-radius: 2px;
}
.quad-top-label {
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px; color: var(--g4);
    display: block; text-align: right; margin-bottom: 16px;
}

.iso-container { display: flex; flex-direction: column; gap: 24px; padding-left: 48px; border-left: 1px dashed var(--g4); }
.iso-block { padding: 32px; background: var(--white); border: 1px solid var(--g2); position: relative; }
.iso-waste { border-left: 4px solid var(--warn); }
.iso-tech { border-left: 4px solid var(--accent); }
.iso-val { font-family: var(--font-serif); font-size: 64px; display: block; line-height: 1; margin-bottom: 8px; letter-spacing: -2px; }
.iso-lbl { font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--g5); }

/* ────────── 14. COMPETITION MATRIX (12) ────────── */

.ce-matrix {
    width: 100%; aspect-ratio: 1; position: relative;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px;
    background: transparent; border: none;
}
.ce-axis-y { position: absolute; top: -20px; bottom: -20px; left: 50%; width: 2px; background: var(--g2); z-index: 10; margin-left: -1px; }
.ce-axis-x { position: absolute; left: -20px; right: -20px; top: 50%; height: 2px; background: var(--g2); z-index: 10; margin-top: -1px; }

.ce-lbl { position: absolute; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--g5); letter-spacing: 1.5px; background: transparent; padding: 4px; z-index: 11; text-transform: uppercase; }
.ce-lbl.top { top: -10px; left: 50%; transform: translateX(-50%); }
.ce-lbl.bot { bottom: -10px; left: 50%; transform: translateX(-50%); }
.ce-lbl.left { left: -10px; top: 50%; transform: translateY(-50%); }
.ce-lbl.right { right: -10px; top: 50%; transform: translateY(-50%); }

.ce-quad {
    background: var(--cream); padding: 32px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    transition: all 0.4s var(--ease-out); position: relative; z-index: 5;
}
.ce-quad:hover { background: var(--white); z-index: 6; transform: scale(1.02); box-shadow: 0 8px 30px rgba(0,0,0,0.06); }

/* Clean integrated ProjBrain quadrant! */
.ce-highlight { 
    background: var(--white); 
    box-shadow: 0 16px 40px rgba(0,0,0,0.08); 
    z-index: 8; 
    border-top: 3px solid var(--black);
    transform: scale(1.02); 
}
.ce-highlight:hover { transform: scale(1.04); box-shadow: 0 20px 50px rgba(0,0,0,0.12); }

.ce-q-hdr { font-size: 16px; font-weight: 700; color: var(--g4); margin-bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ce-highlight .ce-q-hdr { color: var(--black); font-size: 24px; font-family: var(--font-serif); font-weight: 800; font-style: italic; }

.ce-q-sub { font-size: 12px; font-weight: 400; color: var(--g5); line-height: 1.5; }
.ce-highlight .ce-q-sub { color: var(--g4); font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.5px; text-transform: uppercase; font-size: 10px; }

/* Hide chart bars for minimalism */
.ce-q-chart { display: none; }

.brand-dot-sm.bg-white { background: var(--accent); width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex-shrink: 0; border: 2px solid var(--white); outline: 1px solid var(--accent); box-sizing: border-box; }

/* ────────── 15. TRACTION (13) ────────── */
.traction-layout { display: flex; justify-content: space-between; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black); padding: 48px 0; margin-top: 48px; }
.logo-group { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.logo-group.right { align-items: flex-end; text-align: right; border-left: 1px dashed var(--g4); padding-left: 48px; }
.logo-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--g4); text-transform: uppercase; letter-spacing: 2px; }
.logo-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.logo-group.right .logo-row { justify-content: flex-end; }
.logo-text {
    font-family: var(--font-sans); font-size: 13px; font-weight: 800; color: var(--g4); letter-spacing: 0.5px;
    padding: 16px 24px; border: 1px solid var(--g2); border-radius: 4px; background: var(--white); text-transform: uppercase; transition: all 0.3s var(--ease-out);
}
.logo-text:hover { color: var(--black); border-color: var(--black); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

.traction-milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
.tm-item { border-left: 2px solid var(--accent); padding-left: 24px; }
.tm-icon { margin-bottom: 16px; color: var(--accent); background: rgba(38,37,30,0.06); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.tm-icon svg { width: 20px; height: 20px; }
.tm-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.tm-desc { font-size: 13px; color: var(--g5); line-height: 1.6; }

/* ────────── 16. TEAM (14) ────────── */
.founder-cards { display: flex; flex-direction: column; gap: 32px; }
.fc-card {
    background: var(--white); border: 1px solid var(--g2); padding: 32px;
    display: grid; grid-template-columns: 80px 1fr; gap: 24px; align-items: start;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: var(--hover-trans);
}
.fc-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.fc-avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: var(--g2); border: 2px solid var(--white); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.fc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fc-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 24px; color: var(--g5); background: var(--cream); }
.fc-name { font-size: 20px; font-weight: 800; color: var(--black); margin-bottom: 4px; grid-column: 2; grid-row: 1; align-self: end; }
.fc-role { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; grid-column: 2; grid-row: 2; margin-bottom: 16px; }
.fc-bullets { grid-column: 2; grid-row: 3; padding-left: 20px; }
.fc-bullets li { font-size: 13px; color: var(--g5); margin-bottom: 8px; line-height: 1.5; }

.hiring-box { margin-top: 48px; border-top: 1px solid var(--g2); padding-top: 32px; }
.hb-lbl { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--g4); letter-spacing: 2px; margin-bottom: 16px; display: block; }
.hb-grid { display: flex; flex-direction: column; gap: 12px; }
.hb-card { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--white); border: 1px dashed var(--g4); }
.hb-role { font-size: 14px; font-weight: 700; color: var(--black); }
.hb-desc { font-family: var(--font-mono); font-size: 11px; color: var(--g5); }

/* ────────── 17. FINANCIAL ROADMAP (15) ────────── */
.roadmap-cards { display: flex; gap: 2px; background: var(--black); border: 2px solid var(--black); margin-top: 48px; }
.rm-card { flex: 1; background: var(--cream); padding: 32px 24px; display: flex; flex-direction: column; position: relative; transition: var(--hover-trans); }
.rm-card:hover { transform: translateY(-4px); z-index: 2; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.rm-card.highlight { background: var(--accent); color: var(--white); }
.rm-val { font-family: var(--font-serif); font-size: 40px; line-height: 1; margin-bottom: 8px; }
.rm-mon { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--g4); margin-bottom: 16px; }
.rm-card.highlight .rm-mon { color: rgba(255,255,255,0.8); }
.rm-desc { font-size: 13px; line-height: 1.5; color: var(--g5); flex: 1; margin-bottom: 24px; }
.rm-card.highlight .rm-desc { color: var(--white); }
.rm-bar-fill { height: 4px; background: var(--g2); width: 100%; align-self: flex-end; }
.rm-card.highlight .rm-bar-fill { background: var(--white); }
.rm-c1 .rm-bar-fill { width: 10%; background: var(--accent); }
.rm-c2 .rm-bar-fill { width: 30%; background: var(--accent); }
.rm-c3 .rm-bar-fill { width: 60%; background: var(--accent); }

.rm-metrics { display: flex; justify-content: space-between; padding: 24px 0; border-bottom: 1px solid var(--g2); margin-top: 24px; }
.metric { display: flex; flex-direction: column; gap: 8px; }
.m-lbl { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--g4); text-transform: uppercase; letter-spacing: 1px; }
.m-val { font-family: var(--font-serif); font-size: 28px; font-weight: 400; color: var(--black); display: block; line-height: 1.2; }

/* ────────── 18. THE ASK (16) ────────── */
.split-ask { align-items: stretch; }
.ask-card-main { background: var(--white); color: var(--black); padding: 48px; display: flex; flex-direction: column; justify-content: center; height: 100%; margin-top: 32px; border: 1px solid var(--g2); box-shadow: 0 20px 40px rgba(0,0,0,0.04); position: relative; }
.ask-card-main::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--black); }
.ac-top { margin-bottom: 24px; }
.ac-lbl { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--g5); letter-spacing: 2px; }
.ac-amt { font-family: var(--font-serif); font-size: clamp(36px, 6vw + 8px, 80px); line-height: 1; letter-spacing: -3px; margin-bottom: 16px; color: var(--black); }
.ac-runway { font-family: var(--font-mono); padding: 8px 16px; border: 1px dashed var(--g3); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; margin-bottom: 32px; color: var(--g5); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.ac-desc { font-size: 16px; line-height: 1.6; color: var(--g4); font-weight: 500;}

.funds-breakdown { margin-bottom: 48px; }
.fb-title { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--g4); letter-spacing: 2px; margin-bottom: 24px; }
.fb-row { margin-bottom: 16px; }
.fb-info { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.fbi-lbl { font-family: var(--font-mono); color: var(--accent); }
.fb-bar { height: 4px; background: var(--g2); width: 100%; }
.fb-fill { height: 100%; background: var(--accent); }
.fb-sub { font-size: 12px; color: var(--g5); margin-top: 4px; line-height: 1.4; }
.m-accent { font-family: var(--font-serif); color: var(--accent); font-style: italic; }

.ask-milestones { border-top: 1px solid var(--g2); padding-top: 32px; }
.am-title { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--g4); letter-spacing: 2px; margin-bottom: 24px; }
.am-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.am-item { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.am-item svg { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 3; }

/* ────────── 19. CLOSE (17) ────────── */
.close-section { background: var(--black); color: var(--white); border-bottom: none; }
.close-section .section-body { color: var(--g4); }
.close-section .section-body strong { color: var(--white); }
.close-section .section-title-lg { color: var(--white); }
.close-section .accent-text { color: var(--accent); }
.close-section .brand-tag-name { color: var(--white); }

.contact-details { margin-top: 48px; display: flex; flex-direction: column; gap: 24px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 32px; }
.cd-item { display: flex; flex-direction: column; gap: 4px; }
.cd-item strong { color: var(--white); font-size: 18px; }
.cd-item span { font-family: var(--font-mono); font-size: 11px; color: var(--g4); text-transform: uppercase; letter-spacing: 1px; }
.cd-item a { color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 600; transition: var(--hover-trans); }
.cd-item a:hover { color: var(--white); }
.cd-conf { font-family: var(--font-mono); font-size: 10px; color: var(--g5); margin-top: 24px; }

.lead-form-card { background: var(--white); color: var(--black); padding: 48px; border-radius: 8px; }
.lf-title { font-family: var(--font-serif); font-size: 32px; margin-bottom: 32px; }
.lead-form { display: flex; flex-direction: column; gap: 24px; }
.lf-row { display: flex; gap: 16px; }
.lf-group { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.lf-group.w-full { flex: 1 1 100%; }
.lf-group label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--g4); text-transform: uppercase; letter-spacing: 1px; }
.lf-group input, .lf-group textarea {
    padding: 12px 16px; border: 1px solid var(--g2); border-radius: 4px; font-family: var(--font-sans); font-size: 14px;
    background: #fafafa; transition: var(--hover-trans); outline: none; resize: none;
}
.lf-group input:focus, .lf-group textarea:focus { border-color: var(--accent); background: var(--white); }
.lf-submit {
    background: var(--accent); color: var(--white); border: none; padding: 16px; font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: var(--hover-trans); border-radius: 4px; margin-top: 16px;
}
.lf-submit:hover { background: var(--black); }

/* ────────── 20. AI CHAT WIDGET ────────── */

/* Container — fixed bottom-right, glass panel */
.ai-chat-container {
    position: fixed;
    bottom: 0;
    right: 24px;
    width: 420px;
    max-height: 760px;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    background: var(--cream);
    border-radius: 12px 12px 0 0;
    box-shadow:
        0 -4px 24px rgba(0, 0, 0, 0.08),
        0 -1px 4px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(0, 0, 0, 0.06);
    transition: max-height 0.4s var(--ease-out), box-shadow 0.3s ease;
    overflow: hidden;
    font-family: var(--font-sans);
}
.ai-chat-container:hover {
    box-shadow:
        0 -8px 32px rgba(0, 0, 0, 0.12),
        0 -2px 8px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Minimized state — only show header bar */
.ai-chat-container.minimized {
    max-height: 48px;
}
.ai-chat-container.minimized .chat-messages,
.ai-chat-container.minimized .chat-suggestions-wrapper,
.ai-chat-container.minimized .chat-input-area {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.ai-chat-container.minimized .chat-minimize svg {
    transform: rotate(180deg);
}

/* Header bar — always visible */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--black);
    color: var(--white);
    cursor: pointer;
    user-select: none;
    border-radius: 12px 12px 0 0;
    min-height: 48px;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.chat-header:hover {
    background: #2d2d2d;
}
.chat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.chat-title .brand-dot.small {
    width: 8px;
    height: 8px;
    background: var(--accent);
    flex-shrink: 0;
}
.chat-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
    animation: pulse-status 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulse-status {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(76, 175, 80, 0); }
}
.chat-minimize {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
    width: 24px;
    height: 24px;
}
.chat-minimize:hover { color: var(--white); }
.chat-minimize svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s var(--ease-out);
}

/* Messages area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 520px;
    min-height: 120px;
    background: var(--cream);
    transition: opacity 0.3s ease, visibility 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--g2) transparent;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb {
    background: var(--g2);
    border-radius: 4px;
}
.chat-messages::-webkit-scrollbar-thumb:hover { background: var(--g4); }

/* Message row */
.message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    animation: msg-in 0.35s var(--ease-out) both;
}
@keyframes msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* AI message — left aligned */
.message.ai { flex-direction: row; }
.message.ai .msg-bubble {
    background: var(--cream);
    color: var(--black);
    border: 1px solid var(--g2);
    border-radius: 2px 12px 12px 12px;
}

/* User message — right aligned */
.message.user {
    flex-direction: row-reverse;
}
.message.user .msg-bubble {
    background: var(--black);
    color: var(--white);
    border-radius: 12px 2px 12px 12px;
    margin-left: 40px;
}

/* Avatar */
.msg-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(38, 37, 30, 0.06);
    border-radius: 50%;
    margin-top: 2px;
}
.msg-avatar .brand-dot.small {
    width: 8px;
    height: 8px;
    background: var(--accent);
}

/* Bubble */
.msg-bubble {
    font-size: 13px;
    line-height: 1.55;
    padding: 10px 14px;
    max-width: 85%;
    word-wrap: break-word;
}
.msg-bubble strong {
    color: var(--accent);
    font-weight: 700;
}

/* Suggestions wrapper */
.chat-suggestions-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: var(--white);
    min-height: 46px;
    flex-shrink: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Scroll arrows */
.scroll-arrow {
    background: none;
    border: none;
    color: var(--g4);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 8px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s ease, background 0.2s ease;
    font-family: var(--font-sans);
    user-select: none;
}
.scroll-arrow:hover {
    color: var(--accent);
    background: rgba(38, 37, 30, 0.04);
}

/* Suggestions scroll container */
.suggestions-scroll {
    display: flex;
    gap: 8px;
    padding: 8px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    flex: 1;
}
.suggestions-scroll::-webkit-scrollbar { display: none; }

/* Suggestion buttons */
.suggestion-btn {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 6px 12px;
    border: 1px solid var(--g2);
    border-radius: 100px;
    background: var(--white);
    color: var(--g5);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    scroll-snap-align: start;
    transition: var(--hover-trans);
}
.suggestion-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(38, 37, 30, 0.04);
}
.suggestion-btn:active {
    transform: scale(0.96);
}

/* Input area */
.chat-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--cream);
    border-top: none;
    flex-shrink: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.chat-input-area input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--g2);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 13px;
    background: var(--cream);
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    color: var(--black);
}
.chat-input-area input::placeholder {
    color: var(--g4);
    font-size: 12px;
}
.chat-input-area input:focus {
    border-color: var(--accent);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(38, 37, 30, 0.08);
}
.chat-input-area button {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--hover-trans);
}
.chat-input-area button:hover {
    background: var(--black);
    transform: scale(1.05);
}
.chat-input-area button svg {
    width: 16px;
    height: 16px;
}

/* ────────── Responsive Adjustments — Enterprise-Grade Mobile ────────── */
/* Strategy: Desktop-first overrides at 1024px, 768px, 600px, 480px
   Zero desktop changes — all additions below are mobile-only.
   Typography uses fluid clamp() globally (applied in base styles above). */

/* ═══════ TABLET LANDSCAPE — ≤1024px ═══════ */
@media (max-width: 1024px) {
    .deck-section { padding: 64px 32px; }
    .split-layout { flex-direction: column; gap: 48px; }
    .section-top-split { flex-direction: column; gap: 24px; }
    .sts-left, .sts-right, .sts-right-aligned { flex: 1 1 auto; align-items: flex-start; }
    .columns-3 { flex-direction: column; }
    .transform-cols-3 { flex-direction: column; }
    .comparison-grid { flex-direction: column; }
    .s5-main { grid-template-columns: 1fr; gap: 48px; }
    .roi-flow-container { height: auto; display: flex; flex-direction: column; align-items: center; gap: 48px; }
    .roi-axis { display: none; }
    .node { position: relative; top: 0; left: 0 !important; right: 0 !important; transform: none; }
    .label-bot-1 { position: relative; border: none; text-align: center; }
    .roadmap-cards { flex-direction: column; }
    .ai-chat-container { width: 380px; right: 16px; }

    /* Business Model — stack on tablet */
    .model-roi-split { grid-template-columns: 1fr; gap: 48px; }

    /* Traction — stack vertically */
    .traction-layout { flex-direction: column; gap: 32px; }
    .tl-right { border-left: none; padding-left: 0; border-top: 1px solid var(--black); padding-top: 32px; }

    /* iOS fix — disable background-attachment: fixed (causes janky scroll) */
    body { background-attachment: scroll; }
}

/* ═══════ RESPONSIVE TOGGLE UTILITIES ═══════ */
/* Mobile-only elements hidden on desktop, shown on mobile */
.mobile-only { display: none !important; }
/* Desktop-only elements shown on desktop, hidden on mobile */

/* ═══════ IPHONE OVERLAY — Desktop Positioning ═══════ */
/* Math: phone=620px × scale(0.88)=545px tall. browser=500px.
   bottom=-56px → phone top = 545-56=489px from bottom = 11px from container top.
   Notch safely inside the browser frame, no bleed above. */
.iphone-overlay {
    position: absolute;
    bottom: 0;
    left: -260px;
    transform: scale(0.88);
    transform-origin: bottom left;
    z-index: 10;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2);
}
/* mockups-container: overflow must stay VISIBLE so the iPhone (left:-260px) is not clipped */
.mockups-container {
    overflow: visible;
    border-radius: 8px;
}

/* ═══════ TABLET PORTRAIT — ≤768px ═══════ */
@media (max-width: 768px) {
    /* --- Responsive toggle --- */
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }

    .deck-section { padding: 48px 20px; }
    .hero-section { min-height: 100dvh; }

    /* Hero — spacing reduction & native scroll */
    .hero-topbar { padding: 16px 20px; }
    .brand-sub { display: none; } /* Hide overflow text on mobile — brand-name row sufficient */
    
    .hero-pills { 
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 8px;
        margin-bottom: 20px;
        max-width: 100%;
        width: 100%;
        padding: 0 4px 4px 4px; /* Side padding so first/last pill isn't edge-clipped */
    }
    .hero-pills::-webkit-scrollbar { display: none; }
    
    .hero-tagline { font-size: 13px; margin-bottom: 20px; line-height: 1.5; padding: 0; }
    /* Hero inner — push down past topbar (topbar ~60px on mobile + safe area) */
    .hero-inner { padding: 80px 12px 24px; }
    .hero-headline h1 { font-size: clamp(34px, 9vw, 56px) !important; letter-spacing: -2px !important; margin-bottom: 16px; }

    /* Touch-friendly pills — ≥44px target + snap alignment */
    .pill { 
        min-height: 40px; 
        padding: 10px 16px; 
        font-size: 12px; 
        display: inline-flex; 
        align-items: center; 
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    /* Hero ask bar — full width */
    .hero-ask-bar { max-width: 100%; margin-top: 4px; }
    .hero-ask-bar input { font-size: 16px; } /* Prevents iOS auto-zoom */

    /* Grid layouts → simplified columns */
    .icon-grid-3x3 { grid-template-columns: 1fr 1fr; gap: 12px; }
    
    /* Mission icon cards — remove square aspect-ratio, show compact row on mobile */
    .ig-item {
        aspect-ratio: unset;
        flex-direction: row;
        align-items: center;
        text-align: left;
        justify-content: flex-start;
        gap: 12px;
        padding: 16px 20px;
        min-height: 72px;
    }
    .ig-icon { margin-bottom: 0; width: 32px; height: 32px; flex-shrink: 0; }
    .ig-item span { font-size: 12px; }

    .stats-grid-3x2 { grid-template-columns: 1fr 1fr; gap: 24px; }
    .loop-cards-4 { flex-direction: column; }
    .rev-grid-2x2 { grid-template-columns: 1fr; width: 100%; }
    .rev-card { padding: 24px 20px; } /* Tighten on mobile single-col */
    .rc-num { font-size: 20px; margin-bottom: 10px; }
    .rc-type { font-size: 18px; }
    .am-grid { grid-template-columns: 1fr; }

    /* Market brutalist stack */
    .brutalist-stack .b-tam, .brutalist-stack .b-sam, .brutalist-stack .b-som { width: 100%; }
    .b-block { padding: 20px; flex-direction: column; gap: 12px; text-align: center; }
    .b-info { width: 100%; text-align: center; }

    /* Override inline styles + keep iphone as positioned container for the notch */
    .iphone-overlay {
        position: relative !important;  /* Must be relative NOT static — notch uses position:absolute;top:0 */
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        box-shadow: 0 24px 64px rgba(0,0,0,0.2) !important;
        border-radius: 40px;
    }
    .iphone-mockup { 
        width: 300px; 
        height: 580px; 
        margin: 24px auto 0 !important; /* Clean top margin — no negative overlap hack */
        display: block; 
        position: relative;
        z-index: 10;
    }
    /* Context label: float ABOVE the phone (not inside flex flow) so it doesn't
       consume height that would push the scenario strip outside the iphone bounds */
    .wa-context-label {
        display: block !important;
        position: absolute !important;
        top: -44px !important;  /* Float above the phone top edge */
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        white-space: nowrap !important;
        z-index: 20 !important;
    }
    .mockups-container { flex-direction: column !important; align-items: center !important; overflow: visible !important; border-radius: 0 !important; }
    .browser-mockup { transform: none !important; transform-origin: center !important; }

    /* Product split — stack vertically, fix inline padding */
    #product-mockup .split-layout { flex-direction: column !important; margin-top: 16px !important; }
    #product-mockup .split-left { padding-right: 0 !important; }
    .far-value { font-size: 56px !important; letter-spacing: -1px !important; }

    /* ═══ Competition — MOBILE REDESIGN ═══ */
    /* Add contrast background to the section so glassmorphism reflects */
    #competition { background: var(--g1); }

    /* Hide desktop table completely */
    #competition .comp-table-card, .comp-table-card, .comp-table, .comp-row { display: none !important; height: 0; overflow: hidden; opacity: 0; }
    .ce-matrix { display: none !important; }
    .quad-top-label { display: none !important; }
    #competition .split-right { display: none !important; }

    /* Mobile competition cards — vertical stack (Premium Edition) */
    .mobile-comp-cards { display: flex !important; flex-direction: column; gap: 16px; margin-top: 32px; }
    .mcc-card {
        display: flex; flex-direction: column; gap: 6px;
        background: linear-gradient(145deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 100%);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 8px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,1);
        border: 1px solid rgba(255,255,255,0.6);
        border-radius: 16px; padding: 22px 24px;
        position: relative; overflow: hidden;
    }
    .mcc-cap { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 24px; color: var(--black); line-height: 1.1; margin-bottom: 2px; }
    .mcc-pb { font-size: 13px; font-weight: 800; color: var(--accent); display: flex; align-items: center; letter-spacing: 0.5px; text-transform: uppercase; }
    .mcc-others { font-size: 13px; color: var(--g5); letter-spacing: 0.2px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.08); margin-top: 6px; }

    /* ISO container — remove left padding on mobile */
    .iso-container { padding-left: 24px; }
    .iso-val { font-size: clamp(32px, 8vw, 64px); }

    /* Traction milestones */
    .traction-milestones { grid-template-columns: 1fr; }

    /* Team cards — centered on mobile */
    .fc-card { grid-template-columns: 1fr; text-align: center; }
    .fc-avatar { margin: 0 auto; grid-column: 1; grid-row: 1; }
    .fc-name { grid-column: 1; grid-row: 2; }
    .fc-role { grid-column: 1; grid-row: 3; }
    .fc-bullets { grid-column: 1; grid-row: 4; text-align: left; }

    /* Form — stack inputs */
    .lf-row { flex-direction: column; gap: 16px; }
    .lead-form-card { padding: 32px 24px; }

    /* Form inputs — 16px min font to prevent iOS auto-zoom */
    .lf-group input, .lf-group textarea { font-size: 16px; }

    /* Touch-friendly submit */
    .lf-submit { min-height: 48px; font-size: 15px; }

    /* AI Chat Widget — full width ONLY when active */
    .ai-chat-container { width: calc(100% - 32px); right: 16px; left: 16px; max-height: 70vh; }
    
    /* Minimized pill state for mobile to save screen space */
    .ai-chat-container.minimized { 
        width: auto !important;
        right: 16px !important;
        left: auto !important;
        border-radius: 24px !important;
    }
    .ai-chat-container.minimized .chat-header { border-radius: 24px !important; padding: 12px 20px; }
    
    .chat-messages { max-height: 45vh; }
    .suggestion-btn { min-height: 44px; padding: 12px 16px; font-size: 13px; }

    /* Section body — ensure readable */
    .section-body { font-size: 16px; max-width: 100%; }

    /* ═══ Solution Architecture — TABLET 768px ═══ */
    /* Without this, the 240px 1fr 240px grid overflows at 601-768px */
    #solution .s5-main { 
        display: flex !important; 
        flex-direction: column !important; 
        gap: 32px; 
        margin-top: 32px;
    }
    #solution .s5-center { display: none !important; }
    #solution .s5-col-left, #solution .s5-col-right { width: 100%; }
    #solution .s5-icon-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    #solution .s5-ic { padding: 10px 6px; gap: 6px; }
    #solution .s5-ic-shape { width: 36px; height: 36px; }
    #solution .s5-ic-label { font-size: 9px; }

    /* Model ROI — stack vertically */
    .model-roi-split { grid-template-columns: 1fr; }

    /* Transform cols — full width */
    .transform-col { width: 100%; }
    .transform-old, .transform-new { font-size: clamp(22px, 4vw, 44px); }
}

/* ═══════ LARGE PHONE LANDSCAPE — ≤600px ═══════ */
@media (max-width: 600px) {
    .deck-section { padding: 48px 24px; }
    
    /* Typography bug fix: prevent words from collapsing and vertically overlapping */
    h1, h2, h3, .section-title-lg { 
        letter-spacing: normal !important; 
        word-spacing: 0.1em; 
        line-height: 1.2 !important; 
    }

    /* ═══ Solution Architecture — MOBILE REDESIGN ═══ */
    /* Complete override: 2-column icon grid, no horizontal scroll confusion */
    #knowledgeGraph { display: none; }
    .s5-center { display: none; }
    .s5-main { flex-direction: column !important; gap: 32px; margin-top: 24px; }
    .s5-col-left, .s5-col-right { width: 100% !important; }
    .s5-col-label { font-size: 16px; text-align: left; margin-bottom: 12px; }
    
    /* Clean 2-column grid — every icon is fully visible */
    .s5-col-left .s5-icon-grid, .s5-col-right .s5-icon-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Each icon card — clean card style */
    .s5-col-left .s5-icon-grid .s5-ic, .s5-col-right .s5-icon-grid .s5-ic {
        display: flex !important;
        flex: none !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 16px 8px !important;
        background: var(--white) !important;
        border: 1px solid var(--g2) !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        scroll-snap-align: unset !important;
    }
    .s5-col-left .s5-ic-shape, .s5-col-right .s5-ic-shape { width: 32px; height: 32px; }
    .s5-ic-label { font-size: 11px !important; font-weight: 700; text-align: center !important; white-space: normal !important; }
    
    /* Intelligence column — dark premium treatment */
    .s5-col-right { 
        background: var(--black); 
        border-radius: 12px;
        padding: 16px;
        margin: 0 -4px;
    }
    .s5-col-right .s5-col-label { color: rgba(255,255,255,0.5); }
    .s5-col-right .s5-icon-grid .s5-ic { 
        background: rgba(255,255,255,0.06) !important;
        border-color: rgba(255,255,255,0.1) !important;
    }
    .s5-col-right .s5-icon-grid .s5-ic .s5-ic-label { color: var(--cream) !important; }
    /* Make all icon shapes white on dark right column so they are visible */
    .s5-col-right .s-precon { border-color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-precon::before { border-color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-precon::after { border-color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-rfi-doc { border-color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-rfi-doc::after { background: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-rfi-arr { border-color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-rfi-arr::after { border-bottom-color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-shield { background: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-chart { border-color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-chart .s-b { background: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-clock { border-color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-clock::before, .s5-col-right .s-clock::after { background: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-report { border-color: rgba(255,255,255,0.85) !important; color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-report::after { color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-dintel { border-color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-dintel::after { background: rgba(255,255,255,0.85) !important; border-color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-fidic { border-color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-fidic::before { color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-risk { border-bottom-color: rgba(255,255,255,0.85) !important; }
    .s5-col-right .s-risk::after { color: rgba(255,255,255,0.85) !important; }
    /* Restore icon animations — override animation:none from prefers-reduced-motion */
    .s5-col-right .s5-ic-shape, .s5-col-left .s5-ic-shape { animation-play-state: running !important; }

    /* ROI flow — legacy responsive alignment */
    .roi-metric-highlight { padding: 20px 16px; margin: 0; border-radius: 8px; }
    .roi-big, .roi-mid { font-size: clamp(24px, 7vw, 44px); }
    .roi-huge { font-size: clamp(28px, 8vw, 56px); letter-spacing: -2px; }
    .roi-metric-row { display: flex; flex-direction: column; align-items: flex-start; }

    /* Stats — make more compact */
    .stats-grid-3x2 { grid-template-columns: 1fr; gap: 20px; }

    /* Metrics strip — 2x2 grid layout on mobile */
    .rm-metrics {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px 16px !important;
        justify-content: unset !important;
    }
    .metric { padding: 12px; background: var(--g1); border-radius: 8px; gap: 6px; }
    .m-lbl { font-size: 9px; }
    .m-val { font-size: 22px; }
}

/* ═══════ SMALL PHONES — ≤480px ═══════ */
@media (max-width: 480px) {
    .deck-section { padding: 40px 20px; }

    /* Hero refinements for small screens */
    .hero-tagline { font-size: 13px; }
    .hero-pills { gap: 8px; }
    .pill { padding: 10px 14px; font-size: 11px; flex: 0 0 auto !important; }

    /* Icon grid — 2 columns on tiny screens (1 is too long) */
    .icon-grid-3x3 { grid-template-columns: 1fr 1fr; gap: 12px; }

    /* Market — tighten + fluid values */
    .b-block { padding: 16px; }
    .b-val { font-size: clamp(28px, 7vw, 48px) !important; }

    /* iPhone mockup — keep legible at small screens */
    .iphone-mockup { width: 280px !important; height: 520px !important; }
    .wa-msg { font-size: 12px; padding: 8px 10px; }
    .whatsapp-body { padding: 12px; gap: 8px; }

    /* ROI numbers — ensure readability */
    .roi-metric-row { padding: 16px 0; }

    /* Lead form card — minimal padding */
    .lead-form-card { padding: 24px 16px; }
    .lf-title { font-size: 24px; }

    /* Roadmap cards — tighter */
    .roadmap-cards { gap: 16px; }
    .rc-card { padding: 24px 16px; }
}

/* ═══════ SAFE AREA INSETS — Notched Devices ═══════ */
@supports (padding-top: env(safe-area-inset-top)) {
    .hero-topbar {
        padding-top: calc(20px + env(safe-area-inset-top));
    }
    .ai-chat-container {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ═══════ MOBILE DESKTOP NOTICE BANNER ═══════ */
.mobile-desktop-notice {
    display: none; /* Hidden by default on desktop */
}
@media (max-width: 768px) {
    .mobile-desktop-notice {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        background: var(--black);
        color: var(--cream);
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.5px;
        position: sticky;
        top: 0;
        z-index: 1000;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .mdn-icon { font-size: 14px; flex-shrink: 0; }
    .mdn-text { flex: 1; }
    .mdn-text strong { color: var(--white); }
    .mdn-close {
        background: none; border: none; color: rgba(255,255,255,0.5);
        font-size: 14px; cursor: pointer; padding: 2px 4px; flex-shrink: 0;
    }
    /* Hero tagline sub-line — lighter weight */
    .hero-tagline-sub { opacity: 0.7; font-weight: 400; }
    .hero-tagline strong { color: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
    .animate-up {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .s5-hub { animation: none !important; }
    .dot-pulse span { animation: none !important; opacity: 0.6; }
    .wa-typing-dot { animation: none !important; opacity: 0.6; }
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════ MOBILE CANVAS OPTIMIZATION ═══════ */
/* Applied via JS: body.classList.add('mobile-perf') when width < 768 */
.mobile-perf .hero-particle-canvas {
    opacity: 0.15; /* Reduce visual weight to match reduced particle count */
}

/* Chat pulse animation for hero ask trigger */
@keyframes chatPulse {
  0% { box-shadow: 0 0 0 0 rgba(38, 37, 30, 0.4); }
  50% { box-shadow: 0 0 20px 6px rgba(38, 37, 30, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(38, 37, 30, 0); }
}

/* Typing indicator dots */
.dot-pulse {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}
.dot-pulse span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  animation: dotBounce 1.4s infinite ease-in-out both;
}
.dot-pulse span:nth-child(1) { animation-delay: 0s; }
.dot-pulse span:nth-child(2) { animation-delay: 0.2s; }
.dot-pulse span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBounce {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.1); }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 2 — PREMIUM VISUAL ENHANCEMENTS
   ═══════════════════════════════════════════════════════════ */

/* ── 2.1 Hero pill stagger animation ── */
@keyframes fadeSlideInPill {
  0%  { opacity: 0; transform: translateY(14px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Apply stagger delay to each pill via nth-child */
.hero-pills .pill { 
    animation: fadeSlideInPill 0.45s var(--ease-out) both; 
}
.hero-pills .pill:nth-child(1)  { animation-delay: 0.05s; }
.hero-pills .pill:nth-child(2)  { animation-delay: 0.10s; }
.hero-pills .pill:nth-child(3)  { animation-delay: 0.15s; }
.hero-pills .pill:nth-child(4)  { animation-delay: 0.20s; }
.hero-pills .pill:nth-child(5)  { animation-delay: 0.25s; }
.hero-pills .pill:nth-child(6)  { animation-delay: 0.30s; }
.hero-pills .pill:nth-child(7)  { animation-delay: 0.35s; }
.hero-pills .pill:nth-child(8)  { animation-delay: 0.40s; }
.hero-pills .pill:nth-child(9)  { animation-delay: 0.45s; }
.hero-pills .pill:nth-child(10) { animation-delay: 0.50s; }
.hero-pills .pill:nth-child(11) { animation-delay: 0.55s; }
.hero-pills .pill:nth-child(12) { animation-delay: 0.60s; }

/* ── 2.2 Hero ask bar focus glow ── */
@media (max-width: 768px) {
    /* Ask bar inner glow on focus */
    .hero-ask-bar input:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.25), 0 0 20px rgba(255,255,255,0.06);
    }

    /* ── 2.3 Stronger competition glassmorphism ── */
    .mcc-card {
        background: linear-gradient(
            145deg,
            rgba(255,255,255,0.82) 0%,
            rgba(255,255,255,0.52) 100%
        ) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        box-shadow: 
            0 12px 32px rgba(0,0,0,0.08),
            0 2px 8px rgba(0,0,0,0.04),
            inset 0 1px 0 rgba(255,255,255,1) !important;
        border: 1px solid rgba(255,255,255,0.75) !important;
    }

    /* ── 2.4 Chat pill minimized — glass effect ── */
    .ai-chat-container.minimized {
        background: rgba(38,37,30,0.88) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
    }
    .ai-chat-container.minimized .chat-header {
        background: transparent !important;
    }
}

/* ── 2.5 Hero heading in-view glow animation ── */
.hero-headline h1 {
    animation: heroHeadingFade 1.2s var(--ease-out) both;
}
@keyframes heroHeadingFade {
  0%  { opacity: 0; letter-spacing: -8px; }
  100% { opacity: 1; letter-spacing: -4px; }
}


/* ProjBrain final hardening */
.msg-bubble { white-space: pre-wrap; }
.agent-public-note { font-size:11px; color:var(--g5); }

#ask .ask-card-main { height: auto; }


/* ═══════════════════════════════════════════════════════════════════
   WEB SURGERY v6 — clearer problem hierarchy + premium Why ProjBrain
   ═══════════════════════════════════════════════════════════════════ */

/* Problem: keep the human problem primary; adoption stats become Why Now. */
.problem-stats-3 { margin-top: 42px; }
.problem-stats-3 .stat-cell { min-height: 250px; }
.problem-story {
    margin-top: 28px; padding: 28px 32px; background: var(--white);
    border: 1px solid var(--g2); border-left: 4px solid var(--black);
    display: grid; grid-template-columns: 190px 1fr; gap: 28px; align-items: start;
}
.problem-story-kicker {
    font-family: var(--font-mono); font-size: 10px; line-height: 1.4; font-weight: 800;
    letter-spacing: 1.8px; text-transform: uppercase; color: var(--g4);
}
.problem-story p { font-size: 16px; line-height: 1.65; color: var(--g5); max-width: 900px; }
.problem-story p strong { color: var(--black); font-weight: 700; }
.why-now-strip {
    position: relative; margin-top: 18px; padding: 24px 28px; background: var(--black); color: var(--white);
    display: grid; grid-template-columns: minmax(270px, 1.7fr) repeat(3, minmax(120px, .72fr)); gap: 0;
    border: 1px solid var(--black); overflow: hidden;
}
.wns-intro { padding-right: 28px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.wns-kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: rgba(255,255,255,.48); font-weight: 800; }
.wns-intro strong { font-family: var(--font-serif); font-size: 22px; line-height: 1.12; font-weight: 400; }
.wns-metric { padding: 0 24px; border-left: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; justify-content: center; }
.wns-val { font-family: var(--font-mono); font-size: 30px; font-weight: 800; letter-spacing: -1px; }
.wns-lbl { margin-top: 5px; font-size: 11px; line-height: 1.35; color: rgba(255,255,255,.62); }
.wns-source { position: absolute; right: 12px; bottom: 8px; font-family: var(--font-mono); font-size: 7px; letter-spacing: .5px; color: rgba(255,255,255,.28); }

/* Why ProjBrain: web-native hierarchy, no spreadsheet comparison. */
.why-win-section { background: var(--g1); }
.why-win-head { max-width: 940px; }
.why-win-lede { margin-top: 18px; max-width: 900px; font-size: 18px; line-height: 1.6; color: var(--g5); }
.why-win-lede strong { color: var(--black); }
.why-win-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
    margin-top: 46px; background: var(--black); border: 1px solid var(--black);
}
.ww-card {
    min-height: 230px; padding: 34px 36px; background: var(--cream); position: relative;
    display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto 1fr; column-gap: 22px;
    transition: background .28s var(--ease-out), transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.ww-card:hover { background: var(--white); z-index: 3; transform: translateY(-3px); box-shadow: 0 14px 35px rgba(0,0,0,.07); }
.ww-num { grid-row: 1 / 3; font-family: var(--font-serif); font-size: 46px; line-height: 1; font-style: italic; color: var(--g2); }
.ww-card h3 { font-size: 20px; line-height: 1.2; margin: 2px 0 12px; color: var(--black); }
.ww-card p { font-size: 14px; line-height: 1.65; color: var(--g5); max-width: 520px; }
.connected-proof { margin-top: 26px; background: var(--black); color: var(--white); border: 1px solid var(--black); }
.cp-head { padding: 25px 28px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(255,255,255,.13); }
.cp-kicker { font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: 1.8px; color: rgba(255,255,255,.44); }
.cp-head strong { font-family: var(--font-serif); font-size: 28px; font-weight: 400; }
.cp-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1.2fr; align-items: stretch; }
.cp-step { padding: 25px 18px; min-height: 94px; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.cp-step span { font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; color: rgba(255,255,255,.34); }
.cp-step b { font-size: 12px; line-height: 1.3; }
.cp-step.action { background: var(--white); color: var(--black); }
.cp-step.action span { color: var(--g4); }
.cp-arrow { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.28); font-size: 16px; }
.cp-note { padding: 14px 28px 18px; border-top: 1px solid rgba(255,255,255,.13); font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.55); }

/* Competition is now a separate, simple landscape rather than the Why-We-Win proof. */
.competition-simple-section { background: var(--cream); }
.comp-category-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
    background: var(--black); border: 1px solid var(--black); margin-top: 42px;
}
.comp-category-card { min-height: 310px; padding: 30px 26px; background: var(--white); display: flex; flex-direction: column; }
.ccc-tag { font-family: var(--font-mono); font-size: 9px; line-height: 1.3; letter-spacing: 1.5px; font-weight: 800; color: var(--g4); text-transform: uppercase; min-height: 28px; }
.comp-category-card h3 { margin-top: 22px; font-family: var(--font-serif); font-size: 26px; line-height: 1.05; font-weight: 400; color: var(--black); }
.comp-category-card p { margin-top: 18px; font-size: 13px; line-height: 1.65; color: var(--g5); flex: 1; }
.ccc-examples { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--g2); font-family: var(--font-mono); font-size: 9px; line-height: 1.65; color: var(--g4); }
.comp-category-card.projbrain-card { background: var(--black); color: var(--white); }
.projbrain-card .ccc-tag { color: rgba(255,255,255,.48); }
.projbrain-card h3 { color: var(--white); }
.projbrain-card p { color: rgba(255,255,255,.68); }
.projbrain-card .ccc-examples { border-top-color: rgba(255,255,255,.14); color: rgba(255,255,255,.58); }
.competition-principle { margin-top: 22px; padding: 22px 26px; border: 1px solid var(--g2); background: var(--g1); display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: center; }
.competition-principle span { font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: 1.7px; color: var(--g4); }
.competition-principle strong { font-size: 14px; line-height: 1.55; font-weight: 650; color: var(--black); }

@media (max-width: 1024px) {
    .why-now-strip { grid-template-columns: 1.5fr repeat(3, .72fr); }
    .wns-intro strong { font-size: 18px; }
    .wns-metric { padding: 0 14px; }
    .cp-flow { grid-template-columns: repeat(6, minmax(145px, 1fr)); overflow-x: auto; scrollbar-width: thin; }
    .cp-arrow { display: none; }
    .cp-step { border-right: 1px solid rgba(255,255,255,.12); }
    .comp-category-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .problem-stats-3 { grid-template-columns: 1fr !important; gap: 0 !important; }
    .problem-stats-3 .stat-cell { min-height: auto; padding: 28px 24px; }
    .problem-story { grid-template-columns: 1fr; gap: 10px; padding: 22px 22px; }
    .problem-story p { font-size: 14px; }
    .why-now-strip { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
    .wns-intro { grid-column: 1 / -1; padding: 22px; border-bottom: 1px solid rgba(255,255,255,.14); }
    .wns-intro strong { font-size: 21px; }
    .wns-metric { padding: 20px 22px; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.10); }
    .wns-metric:nth-of-type(3) { border-left: 1px solid rgba(255,255,255,.10); }
    .wns-source { position: static; grid-column: 1 / -1; padding: 10px 22px 14px; }

    .why-win-grid { grid-template-columns: 1fr; }
    .ww-card { min-height: auto; padding: 28px 24px; grid-template-columns: 48px 1fr; column-gap: 16px; }
    .ww-num { font-size: 38px; }
    .ww-card h3 { font-size: 19px; }
    .why-win-lede { font-size: 16px; }
    .cp-head { flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px; }
    .cp-head strong { font-size: 25px; }
    .cp-flow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
    .cp-step { min-width: 185px; scroll-snap-align: start; }
    .cp-note { padding: 14px 22px 18px; }

    #competition { background: var(--cream) !important; }
    .comp-category-grid { grid-template-columns: 1fr; gap: 1px; }
    .comp-category-card { min-height: auto; padding: 26px 24px; }
    .competition-principle { grid-template-columns: 1fr; gap: 8px; padding: 20px 22px; }
}

/* v6.1 visual fixes after rendered QA */
.wns-intro strong,
.cp-head strong { color: var(--white); }

@media (max-width: 767px) {
    .why-now-strip { grid-template-columns: repeat(3, 1fr); }
    .wns-intro { grid-column: 1 / -1; }
    .wns-metric { padding: 18px 10px; text-align: left; border-left: 1px solid rgba(255,255,255,.10); }
    .wns-metric:nth-of-type(2) { border-left: 0; }
    .wns-metric:nth-of-type(3) { border-left: 1px solid rgba(255,255,255,.10); }
    .wns-val { font-size: 27px; }
    .wns-lbl { font-size: 9px; }
    .wns-source { grid-column: 1 / -1; }
}

/* v6.2 mobile production polish: the site is responsive, so do not block it with a desktop warning. */
.mobile-desktop-notice { display: none !important; }

@media (max-width: 767px) {
    .ai-chat-container.minimized {
        width: 52px !important;
        height: 52px !important;
        max-height: 52px !important;
        right: 16px !important;
        left: auto !important;
        bottom: 16px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
    }
    .ai-chat-container.minimized .chat-header {
        width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--black) !important;
    }
    .ai-chat-container.minimized .chat-title,
    .ai-chat-container.minimized .chat-minimize { display: none !important; }
    .ai-chat-container.minimized .chat-header::before {
        content: 'P';
        display: flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; border-radius: 50%;
        background: var(--white); color: var(--black);
        font-family: var(--font-sans); font-size: 16px; font-weight: 800;
    }
}