/* ═══ HOMEPAGE V2 — Cinematic Narrative ═══ */
/* Variable bridge: map shorthand names to real ASI tokens */
:root{
--maxw:100%;--pad:clamp(40px,6vw,100px);
--text-1: var(--text-heading);
--text-2: var(--text-body);
--text-3: var(--text-muted);
--bg-1: #fafbfe;
--bg-2: #f0f2fa;
--bg-card: rgba(255,255,255,.6);
--border-1: rgba(0,0,0,.06);
--border-2: rgba(0,0,0,.04);
--accent-blue: #3b82f6;
--accent-blue-gradient: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #2563eb 100%);
--accent-cyan: var(--accent-tertiary);
}
[data-theme="dark"]{
--bg-1: #060a14;
--bg-2: #0c1020;
--bg-card: rgba(255,255,255,.025);
--border-1: rgba(255,255,255,.07);
--border-2: rgba(255,255,255,.04);
}
/* ── Reveal animation ── */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv2{transition-delay:.08s}.rv3{transition-delay:.16s}.rv4{transition-delay:.24s}.rv5{transition-delay:.32s}.rv6{transition-delay:.4s}
/* ── Shared typography ── */
.hp2-eyebrow{font:600 .65rem/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-blue);display:flex;align-items:center;gap:14px;margin-bottom:20px}
.hp2-eyebrow::before{content:none}
.hp2-eb-num{color:var(--accent-blue);font-weight:700}
.hp2-eb-line{width:42px;height:1px;background:var(--accent-blue);opacity:.5}
.hp2-sec-title{font:800 clamp(32px,5vw,72px)/1.05 var(--font-headline);letter-spacing:-.03em;margin-bottom:16px;color:var(--text-1)}
.hp2-sec-title em{font-style:normal;background:var(--accent-blue-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hp2-sec-hook{font:500 clamp(18px,2vw,28px)/1.35 var(--font-headline);letter-spacing:-.015em;color:var(--text-2);margin-bottom:16px;max-width:52ch}
.hp2-sec-hook em{font-style:normal;color:var(--accent-blue);font-weight:700}
.hp2-sec-lead{font:400 clamp(15px,1.2vw,18px)/1.65 var(--font-sans);color:var(--text-3);max-width:56ch}
.hp2-mw{max-width:100%;margin:0 auto;padding:0}
.hp2-section{border-top:1px solid var(--border-1);padding:clamp(40px,5vh,72px) var(--pad);position:relative;overflow:hidden;background:linear-gradient(170deg,#f0f4ff 0%,#fafbff 60%,#f5f2ff 100%)}
.hp2-section.alt{background:linear-gradient(170deg,#e8edfa 0%,#f0f2fd 50%,#eae7f8 100%)}
.hp2-grad{background:var(--accent-blue-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* ── Hero override: fully centered ── */
.hp2-hero{position:relative;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000;border-top:none}
.hp2-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) brightness(.5) saturate(.7);z-index:0}
.hp2-hero .hero-ov{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 40%,rgba(59,130,246,.08),transparent 60%),linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.3) 40%,rgba(0,0,0,.85) 100%)}
.hp2-hero-inner{position:relative;z-index:2;text-align:center;max-width:900px;padding:0 var(--pad);display:flex;flex-direction:column;align-items:center}
.hp2-hero-tag{font:600 .65rem/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-blue);margin-bottom:32px}
.hp2-hero h1{font:800 clamp(40px,7vw,96px)/.95 var(--font-headline);letter-spacing:-.035em;color:#fff;margin-bottom:24px}
.hp2-hero-sub{font:300 clamp(15px,1.3vw,19px)/1.7 var(--font-sans);color:rgba(255,255,255,.8);max-width:640px;margin-bottom:40px}
.hp2-hero-stats{display:flex;gap:clamp(28px,5vw,56px);border-top:1px solid rgba(255,255,255,.1);padding-top:24px;margin-bottom:32px}
.hp2-hero-stats .v{font:700 clamp(22px,2.5vw,32px)/1 var(--font-headline);color:#fff;display:block}
.hp2-hero-stats .l{font:500 .58rem/1 var(--font-mono);color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.14em;margin-top:6px;display:block}
.hp2-hero-cta{display:flex;gap:1rem}
.hp2-hero-cta .btn{font:600 .82rem/1 var(--font-sans);padding:.7rem 1.5rem;border-radius:6px;border:none;cursor:pointer;transition:all .25s;display:inline-flex;align-items:center;gap:.5rem}
.hp2-hero-cta .btn-p{background:var(--accent-blue);color:#fff}
.hp2-hero-cta .btn-p:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 6px 24px rgba(59,130,246,.3)}
.hp2-hero-cta .btn-s{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.2)}
.hp2-hero-cta .btn-s:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05)}
.thesis-sec{position:relative;overflow:hidden;background:linear-gradient(170deg,#f0f4ff 0%,#fafbff 60%,#f5f2ff 100%)}
/* Thesis-Mismatch merge transition */
.thesis-to-mismatch-transition{width:100%;height:clamp(20px,3vh,40px);background:transparent;position:relative;z-index:2}
.mismatch-zone{position:relative;width:100%;z-index:2}
.thesis-bg{display:none}
.thesis-scan{display:none}
.thesis-glow-orb{display:none}
.thesis-particles{display:none}
.circuit-svg{position:absolute;inset:0;width:100%;height:100%}
.thesis-bg-ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.55) 35%,rgba(0,0,0,.3) 60%,rgba(0,0,0,.05) 100%)}
/* SVG Circuit — Traces */
.c-trace-thick{fill:none;stroke:#38bdf8;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.c-trace{fill:none;stroke:#38bdf8;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.c-trace-thin{fill:none;stroke:#38bdf8;stroke-width:0.8;stroke-linecap:round;stroke-linejoin:round}
/* SVG Circuit — Via pads */
.c-via-ring{fill:none;stroke:#38bdf8;stroke-width:0.8;opacity:.6}
.c-via-hole{fill:#38bdf8;opacity:.15}
/* SVG Circuit — ICs */
.c-ic-body{fill:rgba(56,189,248,.03);stroke:#38bdf8;stroke-width:0.5;opacity:.5}
.c-ic-pad{fill:#38bdf8;opacity:.25}
/* SVG Circuit — SMD pads */
.c-smd{fill:#38bdf8;opacity:.2}
/* SVG Circuit — Junction nodes (glow) */
.c-node{fill:#38bdf8;opacity:.7}
/* SVG Circuit — Animated pulses */
.c-pulse{fill:#67e8f9;opacity:.8}
.thesis-scan{position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,rgba(56,189,248,.3),transparent);z-index:3;animation:scanMove 6s ease-in-out infinite;opacity:.4}
@keyframes scanMove{0%{transform:translateY(0)}50%{transform:translateY(100vh)}100%{transform:translateY(0)}}
.thesis-inner{position:relative;z-index:2;max-width:1440px;width:100%;margin:0 auto;padding:0 clamp(24px,5vw,80px);opacity:0;transform:translateY(28px);transition:all 1s cubic-bezier(.2,.7,.2,1)}
.thesis-inner.in{opacity:1;transform:none}
/* ── Thesis Split Layout (text left, bars right — hero-style viewport) ── */
.thesis-split{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:45% 1fr;gap:0;align-items:center;padding:clamp(40px,5vh,72px) clamp(40px,6vw,100px);opacity:0;transform:translateY(28px);transition:all 1s cubic-bezier(.2,.7,.2,1)}
.thesis-split.in{opacity:1;transform:none}
.thesis-split-text{position:relative;padding-right:clamp(24px,3vw,48px)}
.thesis-split-text .thesis-content{position:relative}
.thesis-split-bars{display:flex;flex-direction:column;justify-content:flex-end;padding-left:clamp(24px,3vw,48px);border-left:1px solid rgba(255,255,255,.06)}
/* Stacked bar grid for right column */
.mm-proof-grid-stacked{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:end;min-height:clamp(300px,40vh,440px);width:100%}
/* Insight spans full grid width inside thesis-split */
.thesis-split-insight{grid-column:1 / -1;padding:clamp(20px,2.5vh,32px) 0 0;text-align:center}
/* Stagger animation from thesis-split */
.thesis-split.in .thesis-stagger{opacity:1;transform:none}
/* Light mode divider */
[data-theme="light"] .thesis-split-bars{border-left-color:rgba(0,0,0,.06)}
@media(max-width:960px){
.thesis-split{grid-template-columns:1fr;min-height:auto;padding:clamp(60px,8vh,100px) clamp(24px,5vw,60px)}
.thesis-split-text{padding-right:0}
.thesis-split-bars{padding-left:0;border-left:none;border-top:1px solid rgba(255,255,255,.06);padding-top:clamp(32px,4vh,48px);margin-top:clamp(32px,4vh,48px)}
}
/* Scroll-fade: thesis content fades as user scrolls into mismatch */
.thesis-inner.scroll-fading{opacity:var(--thesis-opacity,1);transform:translateY(calc(var(--thesis-shift,0) * -1px))}
.thesis-content{position:relative}
/* Subtle 01 watermark */
.thesis-chapter-marker{position:absolute;top:0;left:0;transform:translateY(-65%);font:800 clamp(100px,14vw,180px)/1 var(--font-headline);color:rgba(255,255,255,.03);letter-spacing:-.04em;user-select:none;pointer-events:none}
/* Typography — hero-level scale for thesis opener */
.thesis-main-h{font:800 clamp(48px,6.5vw,96px)/.95 var(--font-headline);letter-spacing:-.04em;color:#fff;margin-bottom:16px;position:relative}
.thesis-sub-h{font:500 clamp(18px,2vw,28px)/1.35 var(--font-headline);letter-spacing:-.015em;color:rgba(255,255,255,.6);margin-bottom:16px}
.thesis-grad{background:var(--accent-blue-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.thesis-body{font:400 clamp(15px,1.2vw,18px)/1.65 var(--font-sans);color:rgba(255,255,255,.4);max-width:56ch}
.thesis-read-more{display:none}
/* ── Staggered text reveal ── */
.thesis-stagger{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--stagger,0) * .18s + .3s)}
.thesis-inner.in .thesis-stagger{opacity:1;transform:none}
/* ── Animated accent line ── */
.thesis-accent-line{width:clamp(60px,8vw,120px);height:2px;background:var(--accent-blue-gradient);transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:.55s;margin-bottom:16px}
.thesis-inner.in .thesis-accent-line{transform:scaleX(1)}
/* ── Shimmer sweep on gradient text ── */
.thesis-shimmer{position:relative}
/* shimmer sweep disabled */
@keyframes shimmerSweep{0%{left:-100%}30%{left:150%}100%{left:150%}}
/* ── Floating glow orb ── */
.thesis-glow-orb{position:absolute;width:clamp(300px,40vw,600px);height:clamp(300px,40vw,600px);border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.08) 0%,rgba(59,130,246,.03) 40%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;animation:orbPulse 8s ease-in-out infinite;pointer-events:none}
@keyframes orbPulse{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-48%,-52%) scale(1.15)}}
/* ── Floating particles ── */
.thesis-particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.thesis-particles span{position:absolute;width:3px;height:3px;background:rgba(59,130,246,.4);border-radius:50%;animation:particleDrift 6s ease-in-out infinite}
.thesis-particles span:nth-child(2n){width:2px;height:2px;background:rgba(59,130,246,.25)}
.thesis-particles span:nth-child(3n){width:4px;height:4px;background:rgba(96,165,250,.3);box-shadow:0 0 6px rgba(59,130,246,.2)}
@keyframes particleDrift{0%,100%{transform:translateY(0) scale(1);opacity:.4}50%{transform:translateY(-20px) scale(1.3);opacity:.8}}
/* Sec-marker (other sections) */
.sec-marker{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.sec-marker-num{font:700 .65rem/1 var(--font-mono);color:var(--accent-blue);letter-spacing:.02em;flex-shrink:0}
.sec-marker-line{flex:0 0 42px;height:1px;background:var(--accent-blue);opacity:.5}
.sec-marker-label{font:600 .65rem/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
/* ═══ SECTION 3b: THE MISMATCH ═══ */
.mismatch-sec{position:relative;padding:0;overflow:hidden;background:linear-gradient(180deg,#020617 0%,#0a0f1e 50%,#080b14 100%)}
.mismatch-sec::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.10) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.mismatch-sec::after{content:"";position:absolute;inset:0;opacity:.015;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,");pointer-events:none}
/* Section transition — visual chapter break from Section 01 */
.mismatch-transition{height:1px;max-width:1440px;margin:0 auto;background:linear-gradient(90deg,transparent,rgba(59,130,246,.15) 20%,rgba(59,130,246,.2) 50%,rgba(59,130,246,.15) 80%,transparent)}
.mismatch-header{max-width:1440px;margin:0 auto;padding:clamp(56px,8vh,96px) clamp(24px,5vw,80px) clamp(20px,2.5vh,32px);opacity:0;transform:translateY(28px);transition:all 1s cubic-bezier(.2,.7,.2,1)}
.mismatch-header.in{opacity:1;transform:none}
.thesis-chapter-title{font:800 clamp(32px,5vw,72px)/1.05 var(--font-headline);letter-spacing:-.03em;color:#fff;margin-bottom:16px}
.mismatch-body{font:300 clamp(15px,1.2vw,18px)/1.75 var(--font-sans);color:rgba(255,255,255,.6);max-width:none}
/* ═══ BOM COMPARISON — editorial two-column layout ═══ */
.bom-compare{max-width:100%;margin:0 auto;padding:0 0 clamp(32px,4vh,48px);display:grid;grid-template-columns:1fr auto 1fr;gap:0;opacity:0;transform:translateY(28px);transition:all 1s cubic-bezier(.2,.7,.2,1) .15s}
.bom-compare.in{opacity:1;transform:none}
/* Center divider line */
.bom-col-divider{width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.18) 20%,rgba(255,255,255,.18) 80%,transparent);margin:0 clamp(12px,2vw,32px)}
/* Columns — glassmorphic card treatment */
.bom-col{padding:clamp(28px,3vw,40px);position:relative}
.bom-col.highlight{overflow:hidden}
.bom-glass-card{border:1px solid rgba(255,255,255,.1);border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 8px 32px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.08);transition:border-color .4s,box-shadow .4s,transform .4s}
.bom-glass-card:hover{border-color:rgba(255,255,255,.18);box-shadow:0 12px 40px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.12);transform:translateY(-2px)}
.bom-glass-accent{border-color:rgba(59,130,246,.18);background:linear-gradient(135deg,rgba(59,130,246,.08) 0%,rgba(59,130,246,.02) 100%);box-shadow:0 8px 32px rgba(59,130,246,.08),inset 0 1px 0 rgba(59,130,246,.12)}
.bom-glass-accent:hover{border-color:rgba(59,130,246,.35);box-shadow:0 16px 48px rgba(59,130,246,.12),inset 0 1px 0 rgba(59,130,246,.2),0 0 60px rgba(59,130,246,.04);transform:translateY(-2px)}
/* Card icon — floated top-right */
.bom-card-icon-float{position:absolute;top:clamp(20px,2.5vw,32px);right:clamp(20px,2.5vw,32px);width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35)}
/* Body paragraph */
.bom-card-body{font:400 clamp(13px,.9vw,15px)/1.65 var(--font-sans);color:rgba(255,255,255,.5);margin:clamp(10px,1.2vh,16px) 0 0}
/* Card gist — single summary line */
.bom-card-gist{font:400 clamp(14px,1vw,16px)/1.7 var(--font-sans);color:rgba(255,255,255,.55);margin:0}
/* Assembly chips */
.bom-assembly-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:clamp(14px,1.5vh,20px)}
.bom-chip{display:inline-block;padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);font:500 clamp(10px,.7vw,12px)/1.3 var(--font-sans);color:rgba(255,255,255,.45);letter-spacing:.02em;transition:border-color .3s}
.bom-glass-card:hover .bom-chip{border-color:rgba(255,255,255,.12)}
/* Inference line */
.bom-card-inference{margin-top:clamp(14px,1.5vh,20px);padding-top:clamp(12px,1.5vh,16px);border-top:1px solid rgba(255,255,255,.06);font:500 clamp(13px,.9vw,15px)/1.5 var(--font-sans);color:rgba(59,130,246,.8);font-style:italic}
/* State indicators — hidden */
.bom-state-indicators{display:none}
.bom-col-tag{font:500 clamp(11px,.75vw,13px)/1 var(--font-sans);letter-spacing:.02em;color:rgba(255,255,255,.4);margin-bottom:clamp(14px,1.5vh,20px);margin-top:4px}
.bom-col-title{font:700 clamp(22px,2.2vw,28px)/1.15 var(--font-headline);letter-spacing:-.015em;color:#fff;margin:0 0 2px}
.bom-col-desc{font:400 clamp(12px,.85vw,14px)/1.65 var(--font-sans);color:rgba(255,255,255,.55);margin-bottom:clamp(20px,2.5vw,32px);max-width:40ch}
/* Bullet list variant for scannable card content */
.bom-col-bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
.bom-col-bullets li{font:400 clamp(13px,.9vw,15px)/1.55 var(--font-sans);color:rgba(255,255,255,.55);padding-left:14px;position:relative}
.bom-col-bullets li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.2)}
.bom-col.highlight .bom-col-bullets li::before{background:rgba(59,130,246,.4)}
.bom-col-bullets li:last-child{color:rgba(255,255,255,.75);font-weight:500}
/* Metric rows — horizontal: label left, number right */
.bom-col-metrics{display:flex;flex-direction:column;gap:clamp(20px,2.5vw,32px)}
.bom-metric{position:relative}
.bom-metric-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.bom-metric-label{font:500 clamp(11px,.85vw,14px)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.bom-metric-val{font:700 clamp(28px,2.8vw,40px)/1 var(--font-headline);color:rgba(255,255,255,.75);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bom-metric-val.glow{color:#60a5fa;text-shadow:0 0 12px rgba(59,130,246,.2)}
.bom-metric-pct{font:400 clamp(13px,1.2vw,16px)/1 var(--font-headline);color:rgba(255,255,255,.4);margin-left:1px}
.bom-metric-val.glow .bom-metric-pct{color:rgba(59,130,246,.6)}
/* Progress tracks — enhanced thickness + animated fill */
.bom-card-track{height:6px;background:rgba(255,255,255,.06);overflow:hidden;position:relative;border-radius:3px}
.bom-card-fill{position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:left;transform:scaleX(0);border-radius:3px;transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.bom-card-fill.dim{background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.25))}
.bom-card-fill.accent{background:linear-gradient(90deg,#3b82f6,#60a5fa,#2563eb);box-shadow:0 0 8px rgba(59,130,246,.15)}
.bom-card-fill.pulse{animation:barPulse 2.5s ease-in-out infinite 2s}
@keyframes barPulse{0%,100%{box-shadow:0 0 8px rgba(59,130,246,.15)}50%{box-shadow:0 0 20px rgba(59,130,246,.35),0 0 6px rgba(59,130,246,.2)}}
.bom-compare.in-view .bom-card-fill{transform:scaleX(var(--w,1))}
/* Payoff strip — enhanced */
.bom-payoff-section{max-width:1440px;margin:0 auto;padding:0 clamp(24px,5vw,80px) clamp(64px,8vh,100px);opacity:0;transform:translateY(20px);transition:all 1s cubic-bezier(.2,.7,.2,1) .2s}
.bom-payoff-section.in{opacity:1;transform:none}
.bom-payoff-insight{border:1px solid rgba(59,130,246,.1);border-left:3px solid #3b82f6;padding:clamp(28px,3vw,44px);background:rgba(59,130,246,.02);border-radius:0 8px 8px 0;position:relative;overflow:hidden;animation:payoffBorderGlow 3s ease-in-out infinite}
@keyframes payoffBorderGlow{0%,100%{border-left-color:#3b82f6;box-shadow:inset 3px 0 12px rgba(59,130,246,0)}50%{border-left-color:#60a5fa;box-shadow:inset 3px 0 12px rgba(59,130,246,.08)}}
.bom-payoff-text{font:400 clamp(14px,1.15vw,18px)/1.7 var(--font-sans);color:rgba(255,255,255,.7)}
.bom-payoff-text strong{color:#fff;font-weight:600}
.bom-payoff-grad{font-weight:700;font-size:1.1em;background:linear-gradient(135deg,#60a5fa,#3b82f6,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.bom-payoff-cta{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:600 .65rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#60a5fa;text-decoration:none;transition:all .3s}
.bom-payoff-cta:hover{color:#93bbfd;gap:12px}
/* Light theme */
[data-theme="dark"] .thesis-sec{background:var(--bg-1)}
[data-theme="light"] .thesis-bg-ov{background:linear-gradient(90deg,rgba(244,245,249,.95),rgba(244,245,249,.8),rgba(244,245,249,.5))}
/* Light mode SVG circuit */
[data-theme="light"] .c-traces{opacity:.12}
[data-theme="light"] .c-trace-thick,[data-theme="light"] .c-trace,[data-theme="light"] .c-trace-thin{stroke:#1e293b}
[data-theme="light"] .c-via-ring{stroke:#334155;opacity:.3}
[data-theme="light"] .c-via-hole{fill:#334155;opacity:.08}
[data-theme="light"] .c-ic-body{fill:rgba(30,41,59,.02);stroke:#334155;opacity:.25}
[data-theme="light"] .c-ic-pad{fill:#334155;opacity:.12}
[data-theme="light"] .c-smd{fill:#334155;opacity:.1}
[data-theme="light"] .c-node{fill:#1e40af;opacity:.25}
[data-theme="light"] .c-nodes{filter:none}
[data-theme="light"] .c-pulse{fill:#1e40af;opacity:.3}
[data-theme="light"] .c-vias{opacity:.2}
[data-theme="light"] .c-ics{opacity:.15}
[data-theme="light"] .c-smds{opacity:.15}
[data-theme="light"] .thesis-chapter-num{color:rgba(10,88,202,.08)}
[data-theme="light"] .thesis-chapter-title{color:#0c0f1a}
[data-theme="light"] .thesis-h{color:#334155}
[data-theme="light"] .thesis-main-h{color:#0c0f1a}
[data-theme="light"] .thesis-sub-h{color:#334155}
[data-theme="light"] .thesis-grad{background:linear-gradient(135deg,#7c3aed,#0a58ca,#0d9488);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
[data-theme="light"] .thesis-body{color:#727891}
[data-theme="light"] .thesis-scan{background:linear-gradient(90deg,transparent,rgba(10,88,202,.15),transparent)}
[data-theme="light"] .sec-marker-num{color:#0a58ca}
[data-theme="light"] .sec-marker-line{background:rgba(10,88,202,.2)}
[data-theme="light"] .sec-marker-label{color:rgba(0,0,0,.35)}
[data-theme="light"] .thesis-chapter-marker{color:rgba(0,0,0,.03)}
[data-theme="light"] .mismatch-sec{background:#f4f5f9}
[data-theme="light"] .thesis-chapter-title{color:#0c0f1a}
[data-theme="light"] .mismatch-body{color:#727891}
[data-theme="light"] .mismatch-transition{background:linear-gradient(90deg,transparent,rgba(10,88,202,.12) 20%,rgba(10,88,202,.15) 50%,rgba(10,88,202,.12) 80%,transparent)}
[data-theme="light"] .bom-col-divider{background:linear-gradient(180deg,transparent,rgba(0,0,0,.1) 20%,rgba(0,0,0,.1) 80%,transparent)}
[data-theme="light"] .bom-col-tag{color:rgba(0,0,0,.4)}
[data-theme="light"] .bom-col-tag.accent{color:#0a58ca}
[data-theme="light"] .bom-col-title{color:#0c0f1a}
[data-theme="light"] .bom-col-title.accent-title{color:#0a58ca}
[data-theme="light"] .bom-col-desc{color:#727891}
[data-theme="light"] .bom-col-bullets li{color:#727891}
[data-theme="light"] .bom-col-bullets li::before{background:rgba(0,0,0,.15)}
[data-theme="light"] .bom-col.highlight .bom-col-bullets li::before{background:rgba(10,88,202,.3)}
[data-theme="light"] .bom-col-bullets li:last-child{color:#334155}
[data-theme="light"] .bom-metric-label{color:rgba(0,0,0,.3)}
[data-theme="light"] .bom-metric-val{color:rgba(0,0,0,.4)}
[data-theme="light"] .bom-metric-val.glow{color:#0a58ca;text-shadow:none}
[data-theme="light"] .bom-metric-pct{color:rgba(0,0,0,.2)}
[data-theme="light"] .bom-card-track{background:rgba(0,0,0,.04)}
[data-theme="light"] .bom-card-fill.dim{background:rgba(0,0,0,.1)}
[data-theme="light"] .bom-card-fill.accent{background:linear-gradient(90deg,#0a58ca,#0d9488)}
[data-theme="light"] .bom-payoff-insight{border-color:rgba(10,88,202,.1);border-left-color:#0a58ca;background:rgba(10,88,202,.02)}
[data-theme="light"] .bom-payoff-text{color:#727891}
[data-theme="light"] .bom-payoff-text strong{color:#0c0f1a}
[data-theme="light"] .bom-glass-card{border-color:rgba(0,0,0,.08);background:rgba(255,255,255,.7);backdrop-filter:none}
[data-theme="light"] .bom-glass-card:hover{border-color:rgba(0,0,0,.12)}
[data-theme="light"] .bom-glass-accent{border-color:rgba(10,88,202,.12);background:rgba(10,88,202,.03)}
[data-theme="light"] .bom-glass-accent:hover{border-color:rgba(10,88,202,.25);box-shadow:0 0 40px rgba(10,88,202,.06)}
[data-theme="light"] .bom-col-icon{border-color:rgba(0,0,0,.08);background:rgba(0,0,0,.03);color:rgba(0,0,0,.3)}
[data-theme="light"] .bom-col-icon.accent-icon{border-color:rgba(10,88,202,.15);background:rgba(10,88,202,.06);color:#0a58ca}
[data-theme="light"] .bom-state.yes{color:rgba(22,163,74,.8)}
[data-theme="light"] .bom-state.yes svg{stroke:rgba(22,163,74,.8)}
[data-theme="light"] .bom-state.no{color:rgba(220,38,38,.6)}
[data-theme="light"] .bom-state.no svg{stroke:rgba(220,38,38,.7)}
[data-theme="light"] .bom-payoff-grad{background:linear-gradient(135deg,#0a58ca,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
[data-theme="light"] .bom-payoff-cta{color:#0a58ca}
[data-theme="light"] .bom-payoff-cta:hover{color:#7c3aed}
[data-theme="light"] .bom-card-track{background:rgba(0,0,0,.06)}
/* ── Industry Grid (rebuilt) ── */
.ind-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px)}
/* Card shell */
.ind-card{
display:flex;flex-direction:column;
border:1px solid var(--border-1);
border-radius:14px;
overflow:hidden;background:var(--bg-1);
text-decoration:none;color:inherit;
transition:border-color .4s,transform .4s,box-shadow .4s;
padding:0;position:relative;
-webkit-tap-highlight-color:transparent;
outline:none;
}
/* Gradient accent along left edge */
.ind-card::before{
content:"";position:absolute;top:0;left:0;bottom:0;width:3px;z-index:3;
background:var(--ind-grad, var(--ind-accent, #3b82f6));
opacity:.5;transition:opacity .4s;
}
.ind-card:hover::before{opacity:1}
.ind-card:hover{
border-color:color-mix(in srgb,var(--ind-accent, #3b82f6) 40%,transparent);
transform:translateY(-5px);
box-shadow:0 16px 48px color-mix(in srgb,var(--ind-accent, #3b82f6) 12%,rgba(0,0,0,.2));
}
/* Image — full bleed */
.ind-card-img{
position:relative;width:100%;
aspect-ratio:2.2/1;overflow:hidden;
background:#111;flex-shrink:0;
}
.ind-card-img img{
display:block;width:100%;height:100%;
object-fit:cover;
filter:grayscale(60%) brightness(.7);
transition:filter .5s,transform .5s;
}
.ind-card:hover .ind-card-img img{
filter:grayscale(0%) brightness(.8);
transform:scale(1.05);
}
.ind-card-img::after{
content:"";position:absolute;bottom:0;left:0;right:0;height:50%;
background:linear-gradient(to top,var(--bg-1),transparent);
pointer-events:none;
}
.ind-badge{
position:absolute;top:12px;left:12px;z-index:2;
font:600 clamp(9px,.65vw,11px)/1 var(--font-sans);
letter-spacing:.08em;text-transform:uppercase;
color:#fff;
padding:6px 14px;border-radius:6px;
background:var(--ind-grad, var(--ind-accent, #3b82f6));
box-shadow:0 2px 8px color-mix(in srgb,var(--ind-accent, #3b82f6) 30%,transparent);
}
/* Yellow/light gradient badges need dark text */
.ind-card:nth-child(4) .ind-badge{color:#1a1a2e}
.ind-card:nth-child(5) .ind-badge{color:#042f2e}
/* Card body — centre children horizontally */
.ind-card-body{
padding:24px;
display:flex;flex-direction:column;
align-items:center;flex:1;
background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--ind-accent, #3b82f6) 3%,transparent) 100%);
}
/* Headline — centred block */
.ind-name{
font:700 clamp(17px,1.5vw,22px)/1.3 var(--font-headline);
letter-spacing:-.02em;color:var(--text-1);
text-align:center;margin:0 0 10px;
width:100%;
}
.ind-name em{
font-style:normal;
background:var(--ind-grad, var(--ind-accent, var(--accent-blue)));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
/* Consumer Electronics: yellow gradient unreadable on light bg — use dark amber */
.ind-card:nth-child(4) .ind-name em{
background:linear-gradient(135deg, #b45309, #92400e, #78350f);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
[data-theme="dark"] .ind-card:nth-child(4) .ind-name em{
background:linear-gradient(135deg, #fde047, #facc15, #ca8a04);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
/* Description — centred */
.ind-desc{
font:400 clamp(12.5px,.9vw,14px)/1.6 var(--font-sans);
color:var(--text-2);text-align:center;
margin:0;width:100%;
}
/* Pill label — left-aligned, full width, with accent underline */
.ind-chip-label{
font:600 clamp(9px,.65vw,10.5px)/1 var(--font-sans);
letter-spacing:.14em;text-transform:uppercase;
color:var(--text-3);opacity:.55;
margin:auto 0 12px;padding-top:24px;
width:100%;align-self:flex-start;
border-top:1px solid color-mix(in srgb,var(--ind-accent, #3b82f6) 15%,transparent);
}
/* Pills — 2 rows max */
.ind-chips{
display:flex;flex-wrap:wrap;gap:8px;
width:100%;align-self:flex-start;
max-height:calc(2 * (18px + clamp(11px,.8vw,13px)) + 8px);overflow:hidden;
}
.ind-chip{
font:500 clamp(11px,.8vw,13px)/1 var(--font-sans);
padding:8px 16px;
border:1px solid color-mix(in srgb,var(--ind-accent, #3b82f6) 22%,transparent);
border-radius:6px;
background:color-mix(in srgb,var(--ind-accent, #3b82f6) 6%,transparent);
color:var(--text-2);white-space:nowrap;
transition:all .35s cubic-bezier(.2,.7,.2,1);
}
.ind-card:hover .ind-chip{
border-color:color-mix(in srgb,var(--ind-accent, #3b82f6) 45%,transparent);
background:color-mix(in srgb,var(--ind-accent, #3b82f6) 12%,transparent);
color:var(--text-1);
}
/* CTA — gradient pill button, bottom of card */
.ind-cta{
font:600 clamp(11px,.8vw,13px)/1 var(--font-sans);
letter-spacing:.03em;
color:#fff;
margin-top:20px;align-self:flex-start;
display:inline-flex;align-items:center;gap:8px;
padding:10px 20px;border-radius:8px;
background:var(--ind-grad, var(--ind-accent, #3b82f6));
box-shadow:0 2px 10px color-mix(in srgb,var(--ind-accent, #3b82f6) 20%,transparent);
transition:all .35s;
}
/* Yellow/teal CTA need dark text for contrast */
.ind-card:nth-child(4) .ind-cta{color:#1a1a2e}
.ind-card:nth-child(5) .ind-cta{color:#042f2e}
.ind-cta i{font-size:.7em;transition:transform .3s}
.ind-card:hover .ind-cta{
box-shadow:0 4px 16px color-mix(in srgb,var(--ind-accent, #3b82f6) 35%,transparent);
transform:translateX(2px);
}
.ind-card:hover .ind-cta i{transform:translateX(3px)}
/* Light mode: neutral bg, slightly stronger card body tint */
[data-theme="light"] .ind-card{
background:#fff;
border-color:rgba(0,0,0,.06);
}
[data-theme="light"] .ind-card:hover{
border-color:color-mix(in srgb,var(--ind-accent, #3b82f6) 35%,transparent);
box-shadow:0 16px 48px color-mix(in srgb,var(--ind-accent, #3b82f6) 10%,rgba(0,0,0,.08));
}
[data-theme="light"] .ind-card-body{
background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--ind-accent, #3b82f6) 4%,transparent) 100%);
}
[data-theme="light"] .ind-chip{
border-color:color-mix(in srgb,var(--ind-accent, #3b82f6) 20%,transparent);
background:color-mix(in srgb,var(--ind-accent, #3b82f6) 7%,transparent);
color:var(--text-1);
}
[data-theme="light"] .ind-card-img img{
filter:grayscale(40%) brightness(.8);
}
/* ── Root Cause v2 (single row, full-width) ── */
.rc-grid{
max-width:100%;margin:0 auto;
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--border-1);
padding:0;
}
.rc-card-v2{
position:relative;
background:var(--bg-1);border:none;
padding:clamp(20px,2vw,28px) clamp(22px,2.5vw,32px);
overflow:hidden;
transition:background .4s,transform .4s;
}
.rc-card-v2:hover{
background:var(--bg-2);
transform:translateY(-3px);
}
.rc-card-v2::after{
content:"";position:absolute;bottom:0;left:0;right:0;height:2px;
background:var(--accent-blue-gradient);
transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.rc-card-v2:hover::after{transform:scaleX(1)}
/* Ghost number */
.rc-num{
font:800 clamp(40px,4.5vw,56px)/1 var(--font-headline);
letter-spacing:-.05em;
color:var(--text-1);opacity:.12;
margin-bottom:6px;
transition:opacity .5s;
user-select:none;
}
.rc-card-v2:hover .rc-num{opacity:.2}
/* Headline */
.rc-card-v2 h3{
font:700 clamp(15px,1.3vw,19px)/1.25 var(--font-headline);
letter-spacing:-.02em;color:var(--text-1);
margin-bottom:10px;
}
/* Evidence bullets */
.rc-evidence{
list-style:none;padding:0;margin:0;
display:flex;flex-direction:column;gap:4px;
}
.rc-evidence li{
font:400 clamp(12px,.85vw,14px)/1.5 var(--font-sans);
color:var(--text-2);
padding-left:20px;position:relative;
}
.rc-evidence li::before{
content:"✕";position:absolute;left:0;top:0;
font:600 11px/1.5 var(--font-mono);
color:rgba(239,68,68,.5);
}
[data-theme="dark"] .rc-evidence li::before{color:rgba(248,113,113,.5)}
/* Detail paragraph — hidden, reveals on hover */
.rc-detail{
font:400 clamp(12px,.8vw,13px)/1.6 var(--font-sans);
color:var(--text-3);
margin-top:16px;padding-top:14px;
border-top:1px solid var(--border-1);
max-height:0;overflow:hidden;opacity:0;
transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .4s,margin-top .4s,padding-top .4s;
margin-top:0;padding-top:0;border-color:transparent;
}
.rc-card-v2:hover .rc-detail{
max-height:120px;opacity:1;
margin-top:16px;padding-top:14px;
border-color:var(--border-1);
}
/* ── Process section spacing ── */
.process-section .hp2-sec-lead{margin-bottom:0}
/* ── Process Cards (2×2 Premium) ── */
.proc-grid{
max-width:var(--maxw);margin:28px auto 0;
display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
.proc-card{
background:var(--bg-1);
border:1px solid var(--border-1);border-radius:14px;
padding:clamp(30px,3.5vw,44px);
display:flex;flex-direction:column;
cursor:pointer;position:relative;overflow:hidden;
transition:border-color .4s,transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,background .4s;
}
/* Top gradient accent bar */
.proc-card::before{
content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;
background:var(--accent-blue-gradient);border-radius:14px 14px 0 0;
opacity:.3;transition:opacity .4s;
}
.proc-card:hover::before,.proc-card.expanded::before{opacity:1}
/* Corner ambient glow */
.proc-card::after{
content:"";position:absolute;bottom:-40px;right:-40px;
width:200px;height:200px;border-radius:50%;
background:radial-gradient(circle,rgba(59,130,246,.06) 0%,transparent 70%);
pointer-events:none;opacity:0;
transition:opacity .5s;
}
.proc-card:hover::after{opacity:1}
[data-theme="dark"] .proc-card::after{
background:radial-gradient(circle,rgba(59,130,246,.08) 0%,transparent 70%);
}
/* Step number — right side */
.proc-ghost{
position:absolute;top:clamp(20px,2.5vw,32px);right:clamp(24px,3vw,40px);
font:900 clamp(48px,5vw,72px)/1 var(--font-headline);
letter-spacing:-.05em;color:var(--text-1);opacity:.06;
user-select:none;pointer-events:none;
transition:opacity .5s;
}
.proc-card:hover .proc-ghost{opacity:.1}
.proc-card:hover{
border-color:color-mix(in srgb,var(--accent-blue) 25%,transparent);
transform:translateY(-4px);
box-shadow:0 20px 50px rgba(0,0,0,.08);
background:var(--bg-2);
}
[data-theme="dark"] .proc-card:hover{
box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.proc-card.expanded{background:var(--bg-2)}
/* Title */
.proc-title{
font:700 clamp(19px,1.6vw,24px)/1.25 var(--font-headline);
letter-spacing:-.02em;color:var(--text-1);
margin-bottom:clamp(10px,1.2vw,16px);
position:relative;z-index:1;
}
.proc-title em{font-style:normal;color:var(--accent-blue)}
/* Hook line — typographic anchor */
.proc-hook{
font:600 clamp(15px,1.15vw,17px)/1.55 var(--font-sans);
color:var(--text-1);
margin-bottom:8px;
position:relative;z-index:1;
}
/* Description */
.proc-desc{
font:400 clamp(13px,.95vw,14.5px)/1.7 var(--font-sans);
color:var(--text-2);position:relative;z-index:1;
}
/* Expand takeaway */
.proc-takeaway{
font:500 clamp(12px,.85vw,13.5px)/1.6 var(--font-sans);
color:var(--text-3);
margin-top:18px;padding-top:14px;
border-top:1px solid var(--border-1);
font-style:italic;
}
/* Expand panel */
.proc-expand{
max-height:0;overflow:hidden;opacity:0;
transition:max-height .55s cubic-bezier(.2,.7,.2,1),opacity .4s,margin .4s,padding .4s;
margin-top:0;padding-top:0;
position:relative;z-index:1;
}
.proc-card.expanded .proc-expand{
max-height:800px;opacity:1;
margin-top:clamp(20px,2vw,28px);
padding-top:clamp(20px,2vw,28px);
border-top:1px solid var(--border-1);
}
/* Stat row */
.proc-stats{
display:flex;gap:0;margin-bottom:24px;
border:1px solid var(--border-1);border-radius:10px;overflow:hidden;
background:rgba(59,130,246,.02);
}
[data-theme="dark"] .proc-stats{background:rgba(59,130,246,.04)}
.proc-stat{
flex:1;padding:18px 20px;text-align:center;
border-right:1px solid var(--border-1);
}
.proc-stat:last-child{border-right:none}
.proc-stat-num{
font:800 clamp(24px,2.2vw,32px)/1 var(--font-headline);
letter-spacing:-.03em;color:var(--accent-blue);
margin-bottom:6px;
}
.proc-stat-label{
font:500 clamp(10px,.7vw,11px)/1.3 var(--font-sans);
letter-spacing:.02em;color:var(--text-3);
}
/* Bullets with accent bars */
.proc-points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.proc-points li{
font:400 clamp(13px,.95vw,14.5px)/1.7 var(--font-sans);
color:var(--text-2);padding-left:20px;position:relative;
}
.proc-points li::before{
content:"";position:absolute;left:0;top:11px;
width:8px;height:2px;
background:var(--accent-blue);opacity:.4;
border-radius:1px;
}
.proc-points li strong{color:var(--text-1);font-weight:600}
/* Staggered reveal */
.proc-card.expanded .proc-points li{
animation:procFadeIn .4s ease both;
}
.proc-card.expanded .proc-points li:nth-child(1){animation-delay:.05s}
.proc-card.expanded .proc-points li:nth-child(2){animation-delay:.1s}
.proc-card.expanded .proc-points li:nth-child(3){animation-delay:.15s}
.proc-card.expanded .proc-points li:nth-child(4){animation-delay:.2s}
.proc-card.expanded .proc-points li:nth-child(5){animation-delay:.25s}
.proc-card.expanded .proc-stats{
animation:procFadeIn .35s ease both;
}
@keyframes procFadeIn{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:none}
}
/* Inline links in surface + expand */
.proc-hook a,.proc-desc a,.proc-points a,.proc-expand a.proc-inline{
color:inherit;text-decoration:none;
font-weight:inherit;
transition:opacity .3s;
}
.proc-hook a:hover,.proc-desc a:hover,.proc-points a:hover,.proc-expand a.proc-inline:hover{
opacity:.75;
}
/* Expand hint */
.proc-more{
display:inline-flex;align-items:center;gap:6px;
font:500 clamp(11px,.8vw,12px)/1 var(--font-mono);
letter-spacing:.08em;text-transform:uppercase;
color:var(--accent-blue);opacity:.5;
margin-top:16px;
transition:opacity .3s,gap .3s;
}
.proc-more i{font-size:9px;transition:transform .3s}
.proc-card:hover .proc-more{opacity:.8}
.proc-card.expanded .proc-more{display:none}
/* Expand arrow */
.proc-arrow{
position:absolute;top:clamp(30px,3.5vw,44px);right:clamp(30px,3.5vw,44px);
color:var(--text-3);opacity:.25;
transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1),color .3s;
z-index:1;
}
.proc-arrow i{font-size:13px}
.proc-card:hover .proc-arrow{opacity:.5}
.proc-card.expanded .proc-arrow{
opacity:.6;color:var(--accent-blue);
transform:rotate(180deg);
}
/* Responsive */
@media(max-width:768px){
.proc-grid{grid-template-columns:1fr;gap:12px}
}
/* ── CTA v2 (Centered Premium) ── */
.cta-section-v2{background:var(--bg-1);position:relative;overflow:hidden}
.cta-section-v2::before{content:"";position:absolute;top:50%;left:50%;width:clamp(400px,60vw,800px);height:clamp(400px,60vw,800px);border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.04) 0%,transparent 70%);transform:translate(-50%,-50%);pointer-events:none}
.cta-centered{max-width:820px;margin:0 auto;text-align:center}
.cta-title-c{font:800 clamp(36px,5vw,72px)/1.0 var(--font-headline);letter-spacing:-.03em;margin-bottom:16px;color:var(--text-1)}
.cta-sub-c{font:400 clamp(15px,1.2vw,18px)/1.65 var(--font-sans);color:var(--text-2);margin-bottom:40px}
.cta-card-c{background:var(--bg-card);border:1px solid var(--border-1);padding:clamp(32px,4vw,48px);text-align:left;position:relative;border-radius:8px}
.cta-card-c::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:2px;background:var(--accent-blue-gradient);border-radius:8px 8px 0 0}
.cta-card-c .cta-pkg{font:500 .58rem/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-bottom:24px}
/* Timeline strip */
.cta-timeline-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-bottom:24px}
.cta-tl-step{padding:16px;background:rgba(59,130,246,.03);border:1px solid rgba(59,130,246,.06);border-radius:4px;transition:background .3s,border-color .3s}
.cta-tl-step:hover{background:rgba(59,130,246,.06);border-color:rgba(59,130,246,.15)}
.cta-tl-week{display:block;font:700 clamp(14px,1.2vw,18px)/1 var(--font-headline);color:var(--accent-blue);margin-bottom:6px}
.cta-tl-label{font:400 clamp(11px,.8vw,13px)/1.45 var(--font-sans);color:var(--text-2)}
.cta-pilot-note{font:500 clamp(13px,1.1vw,16px)/1.5 var(--font-sans);color:var(--accent-blue);padding:12px 20px;border:1px dashed rgba(59,130,246,.2);background:rgba(59,130,246,.02);border-radius:4px;margin-bottom:24px;text-align:center}
/* What we bring - horizontal row */
.cta-what-we-bring{border-top:1px solid var(--border-1);padding-top:20px;margin-bottom:24px}
.cta-bring-label{font:600 .55rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-blue);margin-bottom:14px}
.cta-bring-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cta-bring-item{display:flex;align-items:flex-start;gap:10px;font:400 clamp(12px,.9vw,14px)/1.5 var(--font-sans);color:var(--text-2)}
.cta-bring-item i{color:var(--accent-blue);font-size:14px;margin-top:2px;flex-shrink:0;opacity:.6}
/* CTA Buttons */
.cta-actions-c{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid var(--border-1);padding-top:20px}
.btn-cta-c{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 24px;font:600 .72rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;transition:all .3s;text-decoration:none;border-radius:6px}
.btn-cta-c.primary{background:var(--accent-blue);color:#fff}
.btn-cta-c.primary:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 6px 24px rgba(59,130,246,.3)}
.btn-cta-c.secondary{border:1px solid var(--border-1);color:var(--text-1);background:transparent}
.btn-cta-c.secondary:hover{border-color:var(--accent-blue);color:var(--accent-blue)}
.cta-mail-c{font:400 .78rem/1 var(--font-mono);color:var(--text-3);text-align:center;margin-top:16px}
.cta-mail-c a{color:var(--accent-blue);text-decoration:underline;text-underline-offset:3px}
/* ── Fact Cards v2 (hero numbers) ── */
.fact-grid-v2{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fact-grid-3col{grid-template-columns:repeat(3,1fr)}
.fact-card-v2{position:relative;border:1px solid var(--border-1);padding:clamp(24px,2.5vw,36px);background:var(--bg-card);overflow:hidden;transition:border-color .4s,transform .4s,box-shadow .4s}
.fact-card-v2:hover{border-color:rgba(59,130,246,.15);transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.1)}
.fact-accent-bar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent-blue-gradient);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.fact-card-v2:hover .fact-accent-bar,.fact-card-v2.counted-parent .fact-accent-bar{transform:scaleX(1)}
.fact-label-v2{font:600 .55rem/1 var(--font-mono);letter-spacing:.18em;color:var(--accent-blue);margin-bottom:8px}
.fact-big-num-v2{font:800 clamp(48px,5.5vw,80px)/1 var(--font-headline);letter-spacing:-.04em;background:linear-gradient(135deg,#a78bfa 0%,#3b82f6 50%,#2563eb 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px;transform:scale(.85);opacity:.4;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s cubic-bezier(.2,.7,.2,1)}
.fact-big-num-v2.counted{transform:scale(1);opacity:1}
.fact-headline-v2{font:700 clamp(14px,1.1vw,17px)/1.25 var(--font-headline);letter-spacing:-.01em;margin-bottom:12px;color:var(--text-1)}
.fact-headline-v2 em{font-style:normal;color:var(--accent-blue)}
.fact-body-v2{font-size:13px;line-height:1.6;color:var(--text-3);opacity:.75;transition:opacity .4s}
.fact-card-v2:hover .fact-body-v2{opacity:1}
/* ═══ WORK SHOWCASE (Product Study + Case Study Marquees) ═══ */
.work-showcase{overflow:hidden}
.work-row-label{
font:600 clamp(11px,.8vw,12.5px)/1 var(--font-mono);
letter-spacing:.12em;text-transform:uppercase;
color:var(--text-3);margin-bottom:24px;
display:flex;align-items:center;gap:14px;
}
.work-showcase .hp2-sec-lead{margin-bottom:clamp(24px,3vw,32px)}
.work-row-label::after{content:"";flex:1;height:1px;background:var(--border-1)}
/* Carousel container */
.work-carousel{
position:relative;
overflow:hidden;
mask-image:linear-gradient(90deg,transparent 0%,#000 1.5%,#000 98.5%,transparent 100%);
-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 1.5%,#000 98.5%,transparent 100%);
margin-bottom:36px;
}
.work-track{
display:flex;gap:18px;width:max-content;
animation:workScrollL 55s linear infinite;
}
.work-track:hover{animation-play-state:paused}
.work-track.reverse{animation:workScrollR 55s linear infinite}
@keyframes workScrollL{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes workScrollR{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
/* Card — premium */
.work-card{
flex-shrink:0;width:clamp(260px,20vw,340px);
border-radius:12px;overflow:hidden;
background:var(--bg-card);
border:1px solid var(--border-1);
text-decoration:none;color:inherit;
display:flex;flex-direction:column;
transition:transform .35s cubic-bezier(.4,0,.2,1),border-color .3s,box-shadow .3s;
}
.work-card:hover{
transform:translateY(-5px);
border-color:color-mix(in srgb,var(--card-accent, #3b82f6) 40%,transparent);
box-shadow:0 14px 36px rgba(0,0,0,.08);
}
[data-theme="dark"] .work-card:hover{
box-shadow:0 14px 36px rgba(0,0,0,.3);
border-color:color-mix(in srgb,var(--card-accent, #3b82f6) 35%,transparent);
}
/* Card image — product studies */
.work-card-img{
position:relative;width:100%;height:clamp(155px,12vw,200px);
overflow:hidden;display:flex;align-items:center;justify-content:center;
background:linear-gradient(145deg,#f0f2f5,#e8eaef 50%,#f0f2f5);
}
[data-theme="dark"] .work-card-img{
background:radial-gradient(circle at center,rgba(255,255,255,.92),rgba(220,225,240,.78));
}
.work-card-img img{
width:100%;height:100%;object-fit:contain;
padding:.75rem;transition:transform .4s ease;
}
.work-card:hover .work-card-img img{transform:scale(1.05)}
/* Case study cards — blue tint (matching global case studies page) */
.work-card--cs .work-card-img{
background:var(--bg-2);
}
.work-card--cs .work-card-img img{
object-fit:cover;padding:0;
filter:blur(4px) saturate(0.6) brightness(0.4);
transform:scale(1.06);
transition:transform .5s cubic-bezier(.23,1,.32,1),filter .5s;
}
.work-card--cs:hover .work-card-img img{
filter:blur(2px) saturate(0.8) brightness(0.5);
transform:scale(1.1);
}
[data-theme="light"] .work-card--cs .work-card-img img{
filter:blur(4px) saturate(0.7) brightness(0.55);
}
[data-theme="light"] .work-card--cs:hover .work-card-img img{
filter:blur(2px) saturate(0.85) brightness(0.65);
}
/* Gradient overlay on case study images */
.work-card--cs .work-card-img::after{
content:"";position:absolute;inset:0;
background:linear-gradient(170deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.45) 100%);
pointer-events:none;z-index:1;
}
[data-theme="light"] .work-card--cs .work-card-img::after{
background:linear-gradient(170deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.04) 50%,rgba(0,0,0,.18) 100%);
}
/* Impact number overlay on case study cards */
.work-card-impact{
position:absolute;inset:0;z-index:2;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;pointer-events:none;
}
.work-card-impact .impact-val{
font:900 clamp(24px,2.5vw,36px)/1 var(--font-headline);
color:#fff;letter-spacing:-.02em;
text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.work-card-impact .impact-label{
font:600 clamp(8px,.6vw,9.5px)/1 var(--font-mono);
letter-spacing:.12em;text-transform:uppercase;
color:rgba(255,255,255,.8);margin-top:6px;
text-shadow:0 1px 4px rgba(0,0,0,.4);
}
/* Industry tag */
.work-card-tag{
position:absolute;top:10px;left:10px;z-index:3;
font:600 clamp(8px,.6vw,9.5px)/1 var(--font-mono);
letter-spacing:.1em;text-transform:uppercase;
color:var(--card-accent, var(--accent-blue));
background:rgba(255,255,255,.92);
backdrop-filter:blur(8px);
padding:5px 10px;border-radius:5px;
border:1px solid color-mix(in srgb,var(--card-accent, #3b82f6) 25%,transparent);
}
[data-theme="dark"] .work-card-tag{
background:rgba(10,10,15,.7);
color:var(--card-accent, var(--accent-blue));
border:1px solid color-mix(in srgb,var(--card-accent, #3b82f6) 35%,transparent);
}
/* Card info */
.work-card-info{padding:14px 16px}
.work-card-info h4{
font:700 clamp(13px,.95vw,15px)/1.3 var(--font-headline);
color:var(--text-1);margin:0 0 5px;
letter-spacing:-.01em;
transition:color .3s;
}
.work-card:hover .work-card-info h4{color:var(--text-1)}
.work-card-info p{
font:400 clamp(11px,.8vw,12.5px)/1.5 var(--font-sans);
color:var(--text-3);margin:0;
}
/* Case study static grid (no marquee) */
.work-cs-grid{
display:flex;flex-wrap:wrap;gap:18px;
justify-content:center;
margin-bottom:36px;
}
/* CTA buttons */
.work-ctas{
display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;
justify-content:center;
}
.work-cta-link{
font:600 clamp(11px,.8vw,12.5px)/1 var(--font-mono);
letter-spacing:.08em;text-transform:uppercase;
color:var(--accent-blue);text-decoration:none;
display:inline-flex;align-items:center;gap:10px;
padding:14px 28px;
border:1px solid var(--border-1);
border-radius:8px;
background:var(--bg-card);
transition:all .3s cubic-bezier(.4,0,.2,1);
}
.work-cta-link:hover{
border-color:rgba(59,130,246,.2);
background:rgba(59,130,246,.04);
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(0,0,0,.04);
}
[data-theme="dark"] .work-cta-link:hover{box-shadow:0 4px 12px rgba(0,0,0,.2)}
.work-cta-link i{font-size:10px;transition:transform .2s}
.work-cta-link:hover i{transform:translateX(3px)}
/* ═══ PIPELINE DIAGRAM (hp2 system, light/dark) ═══ */
.hp2-pipe-section{position:relative;overflow:hidden}
/* Subtle background radial */
.hp2-pipe-section::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(59,130,246,.02) 0%,transparent 70%);
}
[data-theme="dark"] .hp2-pipe-section::before{
background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(59,130,246,.04) 0%,transparent 70%);
}
/* Flow grid */
.hp2-pipe-flow{
display:grid;
grid-template-columns:.65fr 60px 400px 60px .65fr;
align-items:center;
margin-top:clamp(40px,5vw,56px);
position:relative;z-index:1;
}
/* Column label */
.hp2-pipe-col-label{
font:600 clamp(9px,.7vw,10.5px)/1 var(--font-mono);
letter-spacing:.14em;text-transform:uppercase;
color:var(--accent-blue);opacity:.55;
margin-bottom:18px;padding-left:4px;
}
/* Cards */
.hp2-pipe-col{display:flex;flex-direction:column;gap:14px}
.hp2-pipe-card{
position:relative;
display:flex;align-items:center;gap:16px;
background:var(--bg-card);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border:1px solid var(--border-1);
border-radius:14px;
padding:clamp(24px,2.4vw,32px) clamp(22px,2.2vw,28px);
min-height:110px;
transition:transform .5s cubic-bezier(.4,0,.2,1),border-color .4s,box-shadow .5s;
}
/* Accent top bar */
.hp2-pipe-card::before{
content:"";position:absolute;top:0;left:24px;right:24px;height:2px;
background:linear-gradient(90deg,rgba(59,130,246,.18),rgba(59,130,246,.03));
border-radius:0 0 2px 2px;
transition:opacity .3s;opacity:.4;
}
.hp2-pipe-card:hover::before{opacity:1}
.hp2-pipe-card:hover{
transform:translateY(-4px);
border-color:rgba(59,130,246,.2);
box-shadow:0 16px 40px rgba(59,130,246,.06),0 4px 12px rgba(0,0,0,.03);
}
[data-theme="dark"] .hp2-pipe-card{
background:rgba(15,23,42,.6);
border-color:rgba(255,255,255,.06);
}
[data-theme="dark"] .hp2-pipe-card:hover{
border-color:rgba(59,130,246,.25);
box-shadow:0 16px 48px rgba(59,130,246,.08),0 4px 16px rgba(0,0,0,.2);
}
[data-theme="dark"] .hp2-pipe-card::before{
background:linear-gradient(90deg,rgba(59,130,246,.3),rgba(59,130,246,.05));
}
/* Output cards */
.hp2-pipe-card--out:hover{border-color:rgba(59,130,246,.25)}
.hp2-pipe-icon{
flex-shrink:0;
width:42px;height:42px;border-radius:11px;
background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(59,130,246,.03));
display:flex;align-items:center;justify-content:center;
font-size:1rem;color:var(--accent-blue);
transition:transform .3s,box-shadow .3s;
box-shadow:0 2px 8px rgba(59,130,246,.06);
}
[data-theme="dark"] .hp2-pipe-icon{
background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(59,130,246,.06));
box-shadow:0 2px 8px rgba(59,130,246,.1);
}
.hp2-pipe-icon--out{background:linear-gradient(135deg,rgba(59,130,246,.06),rgba(59,130,246,.02))}
[data-theme="dark"] .hp2-pipe-icon--out{background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(59,130,246,.05))}
.hp2-pipe-card:hover .hp2-pipe-icon{
transform:scale(1.12);
box-shadow:0 6px 16px rgba(59,130,246,.15);
}
.hp2-pipe-card h4{
font:700 clamp(14px,1.05vw,16px)/1.3 var(--font-headline);
color:var(--text-1);margin:0 0 6px;
}
.hp2-pipe-card p{
font:400 clamp(12px,.85vw,13.5px)/1.6 var(--font-sans);
color:var(--text-3);margin:0;
}
.hp2-pipe-sub{
font:400 clamp(11px,.8vw,12.5px)/1.4 var(--font-sans);
color:var(--text-3);margin:0 0 10px;font-style:italic;opacity:.7;
}
/* Pills */
.hp2-pipe-pills{
display:flex;flex-wrap:wrap;gap:8px;
margin-top:14px;
}
.hp2-pipe-pill{
display:inline-flex;align-items:center;
font:500 clamp(11px,.8vw,13px)/1 var(--font-sans);
color:var(--text-2);
background:rgba(59,130,246,.04);
border:1px solid rgba(59,130,246,.1);
border-radius:7px;
padding:8px 15px;
transition:all .3s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"] .hp2-pipe-pill{
background:rgba(59,130,246,.06);
border-color:rgba(59,130,246,.14);
}
.hp2-pipe-card:hover .hp2-pipe-pill{
background:rgba(59,130,246,.07);
border-color:rgba(59,130,246,.2);
transform:translateY(-1px);
}
/* Connectors — CSS gradient line with shimmer */
.hp2-pipe-conn{
display:flex;align-items:center;justify-content:center;
position:relative;
}
.hp2-pipe-conn::before{
content:"";display:block;
width:100%;height:2px;
background:linear-gradient(90deg,transparent,rgba(59,130,246,.15) 30%,rgba(59,130,246,.15) 70%,transparent);
position:relative;
}
.hp2-pipe-conn::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,transparent 0%,rgba(59,130,246,.4) 50%,transparent 100%);
background-size:200% 100%;
height:2px;top:50%;transform:translateY(-50%);
animation:hp2ConnShimmer 3s ease-in-out infinite;
}
[data-theme="dark"] .hp2-pipe-conn::before{
background:linear-gradient(90deg,transparent,rgba(59,130,246,.2) 30%,rgba(59,130,246,.2) 70%,transparent);
}
[data-theme="dark"] .hp2-pipe-conn::after{
background:linear-gradient(90deg,transparent 0%,rgba(59,130,246,.6) 50%,transparent 100%);
background-size:200% 100%;
}
@keyframes hp2ConnShimmer{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}
/* Engine center */
.hp2-pipe-engine{
position:relative;
display:flex;align-items:center;justify-content:center;
width:400px;height:400px;
}
/* Radial glow behind engine */
.hp2-pipe-engine::before{
content:"";position:absolute;
width:300px;height:300px;
top:50%;left:50%;transform:translate(-50%,-50%);
border-radius:50%;
background:radial-gradient(circle,rgba(59,130,246,.05) 0%,transparent 70%);
animation:hp2EngineGlow 5s ease-in-out infinite;
pointer-events:none;
}
[data-theme="dark"] .hp2-pipe-engine::before{
background:radial-gradient(circle,rgba(59,130,246,.1) 0%,transparent 70%);
}
@keyframes hp2EngineGlow{
0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.95)}
50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
}
/* Animated gradient border */
.hp2-pipe-engine-body{
position:relative;z-index:2;
width:280px;
background:var(--bg-card);
border-radius:20px;
padding:34px 26px 28px;
text-align:center;
box-shadow:0 0 0 2px rgba(59,130,246,.08),0 8px 32px rgba(59,130,246,.04),0 4px 16px rgba(0,0,0,.03);
transition:box-shadow .4s,transform .4s;
}
.hp2-pipe-engine-body::before{
content:"";position:absolute;inset:-2px;border-radius:22px;
background:conic-gradient(from 0deg,rgba(59,130,246,.2),rgba(59,130,246,.05),rgba(59,130,246,.15),rgba(59,130,246,.03),rgba(59,130,246,.2));
z-index:-1;
animation:hp2BorderSpin 8s linear infinite;
}
@keyframes hp2BorderSpin{to{transform:rotate(360deg)}}
.hp2-pipe-engine-body::after{
content:"";position:absolute;inset:1px;border-radius:19px;
background:var(--bg-card);z-index:-1;
}
.hp2-pipe-engine-body:hover{
transform:scale(1.02);
box-shadow:0 0 0 2px rgba(59,130,246,.15),0 12px 40px rgba(59,130,246,.08),0 8px 24px rgba(0,0,0,.04);
}
[data-theme="dark"] .hp2-pipe-engine-body{
background:rgba(15,23,42,.85);
box-shadow:0 0 0 2px rgba(59,130,246,.15),0 8px 40px rgba(59,130,246,.06),0 4px 16px rgba(0,0,0,.2);
}
[data-theme="dark"] .hp2-pipe-engine-body::before{
background:conic-gradient(from 0deg,rgba(59,130,246,.35),rgba(59,130,246,.08),rgba(59,130,246,.25),rgba(59,130,246,.05),rgba(59,130,246,.35));
}
[data-theme="dark"] .hp2-pipe-engine-body::after{background:rgba(15,23,42,.85)}
[data-theme="dark"] .hp2-pipe-engine-body:hover{
box-shadow:0 0 0 2px rgba(59,130,246,.2),0 16px 56px rgba(59,130,246,.1),0 8px 28px rgba(0,0,0,.25);
}
.hp2-pipe-engine-label{
font:700 clamp(11px,.8vw,13px)/1 var(--font-mono);
letter-spacing:.12em;text-transform:uppercase;
color:var(--accent-blue);opacity:.6;margin-bottom:8px;
}
.hp2-pipe-engine-title{
font:800 clamp(30px,2.8vw,42px)/1 var(--font-headline);
color:var(--text-1);letter-spacing:-.02em;
margin-bottom:16px;
}
.hp2-pipe-engine-split{
display:flex;
border-top:1px solid var(--border-1);
padding-top:14px;margin-top:6px;
gap:0;
}
.hp2-pipe-ehalf{
flex:1;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:5px;
padding:4px 2px;
}
.hp2-pipe-ehalf:not(:last-child){border-right:1px solid var(--border-1)}
.hp2-pipe-ehalf i{
font-size:clamp(14px,1.1vw,17px);
color:var(--accent-blue);
opacity:.7;
transition:opacity .3s;
}
.hp2-pipe-engine-body:hover .hp2-pipe-ehalf i{opacity:1}
.hpe-name{
font:600 clamp(10px,.75vw,12px)/1 var(--font-headline);
color:var(--text-1);letter-spacing:.02em;
}
/* Responsive */
@media(max-width:960px){
.hp2-pipe-flow{
grid-template-columns:1fr;
gap:28px;
}
.hp2-pipe-conn{
height:50px;width:100%;
transform:rotate(90deg);
}
.hp2-pipe-conn .hp2-pipe-svg{height:50px;width:50px}
.hp2-pipe-engine{width:300px;height:300px;margin:0 auto}
.hp2-pipe-engine-body{width:220px;padding:24px 18px 20px}
}
/* ── Misallocation Visual (Effort vs BOM bars) ── */
.misalloc-visual{max-width:1440px;margin:0 auto;padding:clamp(32px,4vh,56px) clamp(24px,5vw,80px);opacity:0;transform:translateY(24px);transition:all 1s cubic-bezier(.2,.7,.2,1) .1s}
.misalloc-visual.in{opacity:1;transform:none}
.misalloc-row{margin-bottom:clamp(20px,2.5vh,32px)}
.misalloc-label{font:500 clamp(11px,.85vw,14px)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:12px}
.misalloc-bar-wrap{display:flex;height:clamp(48px,5vh,64px);border-radius:6px;overflow:hidden;gap:2px}
.misalloc-seg{width:var(--seg-w);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .6s cubic-bezier(.2,.7,.2,1);position:relative;cursor:default}
.misalloc-seg span{font:700 clamp(14px,1.5vw,20px)/1 var(--font-headline);letter-spacing:-.02em}
.misalloc-seg small{font:500 clamp(9px,.7vw,11px)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;margin-top:4px;opacity:.8}
.seg-mech{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
.seg-ee{background:rgba(59,130,246,.2);color:#93bbfd}
.seg-prop{background:rgba(139,92,246,.15);color:#c4b5fd}
.seg-mech:hover{background:rgba(255,255,255,.12)}
.seg-ee:hover{background:rgba(59,130,246,.3)}
.seg-prop:hover{background:rgba(139,92,246,.25)}
.misalloc-insight{font:400 clamp(13px,1.1vw,16px)/1.6 var(--font-sans);color:rgba(255,255,255,.5);max-width:64ch;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.misalloc-highlight{font-weight:700;color:#60a5fa}
/* Light theme - Misallocation */
[data-theme="light"] .misalloc-label{color:rgba(0,0,0,.4)}
[data-theme="light"] .seg-mech{background:rgba(0,0,0,.06);color:rgba(0,0,0,.6)}
[data-theme="light"] .seg-ee{background:rgba(10,88,202,.12);color:#0a58ca}
[data-theme="light"] .seg-prop{background:rgba(139,92,246,.1);color:#7c3aed}
[data-theme="light"] .misalloc-insight{color:#727891;border-top-color:rgba(0,0,0,.06)}
[data-theme="light"] .misalloc-highlight{color:#0a58ca}
/* ═══ MISMATCH — 3-BEAT VERTICAL NARRATIVE ═══ */
/* Beat container — each beat gets its own viewport moment */
.mm-beat{position:relative;z-index:2;opacity:0;transform:translateY(32px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.mm-beat.in{opacity:1;transform:none}
.mm-beat-inner{max-width:100%;margin:0 auto;padding:0 clamp(40px,6vw,100px)}
/* Beat 1: The Claim — generous breathing room */
.mm-beat-claim{padding:clamp(64px,10vh,120px) 0 clamp(48px,6vh,80px)}
.mm-claim-hook{font:500 clamp(18px,2vw,28px)/1.35 var(--font-headline);letter-spacing:-.015em;margin-bottom:16px}
.mm-claim-body{font:400 clamp(15px,1.2vw,18px)/1.65 var(--font-sans);color:rgba(255,255,255,.5)}
.mm-accent-line{transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1) .4s}
.mm-beat-claim.in .mm-accent-line{transform:scaleX(1)}
/* ═══ CLAIM SPLIT — text left, card right ═══ */
.mm-claim-split{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,4vw,60px);align-items:start}
.mm-claim-text{min-width:0}
.mm-claim-visual{min-width:0;display:flex;align-items:start}
.mm-merged-card{padding:clamp(32px,3.5vw,48px);width:100%;display:flex;flex-direction:column;opacity:0;transform:translateX(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) .3s,transform .8s cubic-bezier(.2,.7,.2,1) .3s}
.mm-beat-claim.in .mm-merged-card{opacity:1;transform:none}
.mm-merged-header{font:600 clamp(11px,.75vw,13px)/1 var(--font-sans);color:rgba(255,255,255,.45);margin-bottom:clamp(28px,3.5vh,40px);text-align:center;letter-spacing:.04em;text-transform:uppercase}
.mm-merged-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;flex:1}
.mm-merged-divider{width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.1) 20%,rgba(255,255,255,.1) 80%,transparent);margin:0 clamp(24px,3vw,40px)}
.mm-card-footer{margin-top:auto;padding-top:clamp(24px,3vh,36px);border-top:1px solid rgba(255,255,255,.06);width:100%}
/* Ring columns */
.mm-ring-col{display:flex;flex-direction:column;align-items:center;text-align:center}
/* ── Horizontal progress bars (range display) ── */
.mm-bar-wrap{display:flex;align-items:baseline;justify-content:center;gap:3px;margin-bottom:clamp(12px,1.5vh,20px)}
.mm-bar-value{font:700 clamp(30px,3vw,44px)/1 var(--font-headline);color:#fff}
.mm-bar-unit{font:500 clamp(14px,1.2vw,18px)/1 var(--font-sans);color:rgba(255,255,255,.4)}
.mm-bar-track{width:100%;height:8px;border-radius:4px;background:rgba(255,255,255,.06);position:relative;overflow:hidden;margin-bottom:clamp(16px,2vh,24px)}
.mm-bar-fill{position:absolute;top:0;left:0;height:100%;border-radius:4px;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.mm-bar-fill-mech{background:linear-gradient(90deg,#34d399,#06b6d4);z-index:2}
.mm-bar-fill-mech-range{background:linear-gradient(90deg,rgba(52,211,153,.3),rgba(6,182,212,.12));z-index:1}
.mm-bar-fill-elec{background:linear-gradient(90deg,var(--ring-accent,#f97316),#ef4444);z-index:2}
.mm-bar-fill-elec-range{background:linear-gradient(90deg,rgba(249,115,22,.3),rgba(239,68,68,.12));z-index:1}
/* Mobile select — hidden on desktop */
.mm-mobile-select-wrap{display:none}
/* Swipe dots — hidden on desktop */
.mm-swipe-dots{display:none}
/* Industry nav — hidden on desktop */
.mm-industry-nav{display:none}
/* Mobile split bar — hidden on desktop */
.mm-mobile-split{display:none}
/* Ring labels */
.mm-ring-title{font:700 clamp(14px,1.1vw,17px)/1 var(--font-headline);color:#fff;margin-bottom:4px}
.mm-ring-sub{font:500 clamp(10px,.7vw,12px)/1 var(--font-sans);color:rgba(255,255,255,.3);margin-bottom:clamp(14px,1.6vh,20px);letter-spacing:.02em}
/* Ring chips */
.mm-ring-chips{justify-content:center;margin-bottom:clamp(18px,2.2vh,26px);gap:6px}
.mm-ring-chips .bom-chip{padding:4px 10px;font-size:clamp(9px,.6vw,11px)}
/* Ring gist */
.mm-ring-gist{font:400 clamp(12px,.8vw,14px)/1.6 var(--font-sans);color:rgba(255,255,255,.4);margin:0}
/* Card footer text */
.mm-card-footer p{font:400 clamp(11px,.8vw,13px)/1.6 var(--font-sans);color:rgba(255,255,255,.38);margin:0;max-width:100%}
/* Light theme */
[data-theme="light"] .mm-merged-header{color:rgba(0,0,0,.5)}
[data-theme="light"] .mm-merged-divider{background:linear-gradient(180deg,transparent,rgba(0,0,0,.08) 20%,rgba(0,0,0,.08) 80%,transparent)}
[data-theme="light"] .mm-bar-value{color:var(--c-text)}
[data-theme="light"] .mm-bar-unit{color:rgba(0,0,0,.4)}
[data-theme="light"] .mm-bar-track{background:rgba(0,0,0,.06)}
[data-theme="light"] .mm-ring-title{color:var(--c-text)}
[data-theme="light"] .mm-ring-sub{color:rgba(0,0,0,.4)}
[data-theme="light"] .mm-ring-gist{color:rgba(0,0,0,.4)}
[data-theme="light"] .mm-card-footer{border-top-color:rgba(0,0,0,.06)}
[data-theme="light"] .mm-card-footer p{color:rgba(0,0,0,.45)}
[data-theme="light"] .bom-chip{border-color:rgba(0,0,0,.12);background:rgba(0,0,0,.04);color:rgba(0,0,0,.5)}
/* Responsive — tablet (layout stacks, pills wrap) */
@media(max-width:960px){
.mm-claim-split{grid-template-columns:1fr;gap:40px}
.mm-claim-visual{justify-content:center}
.mm-merged-card{max-width:100%;padding:clamp(24px,4vw,36px)}
.mm-pill-strip{grid-template-columns:repeat(4,1fr)}
.mm-bar-value{font-size:clamp(26px,3.5vw,34px)}
.mm-merged-divider{margin:0 clamp(16px,2vw,24px)}
}
/* Responsive — medium desktop (pill strip tighter) */
@media(max-width:1200px) and (min-width:961px){
.mm-pill-strip{gap:6px}
.mm-pill{padding:8px 8px;font-size:clamp(10px,.7vw,12px)}
.mm-merged-card{padding:clamp(24px,2.5vw,32px)}
}
/* Responsive — small tablet / landscape phone */
@media(max-width:680px) and (min-width:541px){
.mm-pill-strip{grid-template-columns:repeat(4,1fr);gap:6px}
.mm-pill{font-size:11px;padding:8px 6px}
.mm-bar-value{font-size:clamp(24px,5vw,30px)}
.mm-merged-header{margin-bottom:16px}
}
/* Mismatch filter dropdown */
/* ── Exhibit label ── */
.mm-exhibit-label{font:italic 600 clamp(11px,.75vw,13px)/1 var(--font-mono);letter-spacing:.08em;color:rgba(255,255,255,.3);margin-bottom:clamp(16px,1.8vh,22px);text-align:center}
[data-theme="light"] .mm-exhibit-label{color:rgba(0,0,0,.3)}
/* ── Pill tab buttons (square-rounded) ── */
.mm-pill-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:clamp(20px,2.5vh,30px)}
.mm-pill{
font:500 clamp(11px,.75vw,13px)/1 var(--font-sans);
padding:9px 10px;
border-radius:8px;
border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.04);
color:rgba(255,255,255,.5);
cursor:pointer;
transition:all .2s ease;
white-space:nowrap;
text-align:center
}
.mm-pill:hover{
border-color:rgba(255,255,255,.3);
background:rgba(255,255,255,.08);
color:rgba(255,255,255,.8)
}
.mm-pill:active{transform:scale(.97)}
.mm-pill-active{
background:linear-gradient(135deg,#1e40af,#6366f1);
border-color:transparent;
color:#fff;
box-shadow:0 2px 12px rgba(99,102,241,.3);
font-weight:600
}
.mm-pill-active:hover{background:linear-gradient(135deg,#1e3a8a,#5b5bd6)}
.mm-pill:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}
/* Light mode */
[data-theme="light"] .mm-pill{border-color:rgba(0,0,0,.12);background:rgba(0,0,0,.03);color:rgba(0,0,0,.5)}
[data-theme="light"] .mm-pill:hover{border-color:rgba(0,0,0,.2);background:rgba(0,0,0,.06);color:rgba(0,0,0,.75)}
[data-theme="light"] .mm-pill-active{background:linear-gradient(135deg,#1e40af,#4f46e5);color:#fff;border-color:transparent;box-shadow:0 2px 12px rgba(30,64,175,.2)}
/* Source attribution line */
.mm-source{font:400 clamp(10px,.7vw,12px)/1.6 var(--font-sans);color:rgba(255,255,255,.3);text-align:center;margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}
.mm-source strong{font-weight:600;color:rgba(255,255,255,.4)}
[data-theme="light"] .mm-source{color:rgba(0,0,0,.3);border-top-color:rgba(0,0,0,.06)}
[data-theme="light"] .mm-source strong{color:rgba(0,0,0,.45)}
/* ── Colorful mismatch card — glassmorphic ── */
.mm-merged-card.bom-glass-card{
border:1px solid rgba(255,255,255,.15);
background:
linear-gradient(145deg,rgba(34,197,94,0.08) 0%,rgba(255,255,255,.03) 40%,rgba(249,115,22,0.08) 100%),
linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.01) 100%);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
box-shadow:
0 8px 40px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.1),
0 0 60px rgba(34,197,94,0.04),
0 0 60px rgba(249,115,22,0.04)
}
.mm-merged-card.bom-glass-card:hover{
border-color:rgba(255,255,255,.22);
box-shadow:
0 16px 56px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,.14),
0 0 50px rgba(34,197,94,0.08),
0 0 50px rgba(249,115,22,0.08)
}
[data-theme="light"] .mm-merged-card.bom-glass-card{
border-color:rgba(0,0,0,.08);
background:
linear-gradient(145deg,rgba(22,163,74,0.06) 0%,rgba(255,255,255,.9) 40%,rgba(234,88,12,0.06) 100%);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
box-shadow:
0 4px 24px rgba(0,0,0,.06),
inset 0 1px 0 rgba(255,255,255,.6),
0 0 40px rgba(22,163,74,0.04),
0 0 40px rgba(234,88,12,0.04)
}
[data-theme="light"] .mm-merged-card.bom-glass-card:hover{
border-color:rgba(0,0,0,.12);
box-shadow:
0 8px 36px rgba(0,0,0,.08),
inset 0 1px 0 rgba(255,255,255,.7),
0 0 40px rgba(22,163,74,0.06),
0 0 40px rgba(234,88,12,0.06)
}
/* ── Chip shuffle: max 2 rows, fade transition ── */
.mm-chip-shuffle{
transition:opacity 0.3s ease;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:6px
}
.mm-chip-fade{opacity:0}
/* Colored chip variants */
.mm-chip-commodity{
border-color:rgba(34,197,94,0.2) !important;
background:rgba(34,197,94,0.08) !important;
color:rgba(34,197,94,0.8) !important
}
.mm-chip-commodity:hover{background:rgba(34,197,94,0.15) !important}
.mm-chip-blackbox{
border-color:rgba(249,115,22,0.2) !important;
background:rgba(249,115,22,0.08) !important;
color:rgba(249,115,22,0.8) !important
}
.mm-chip-blackbox:hover{background:rgba(249,115,22,0.15) !important}
/* Light theme colored chips */
[data-theme="light"] .mm-chip-commodity{
border-color:rgba(22,163,74,0.2) !important;
background:rgba(22,163,74,0.06) !important;
color:rgba(22,163,74,0.9) !important
}
[data-theme="light"] .mm-chip-blackbox{
border-color:rgba(234,88,12,0.2) !important;
background:rgba(234,88,12,0.06) !important;
color:rgba(234,88,12,0.9) !important
}
/* Light theme bar color overrides */
[data-theme="light"] .mm-vbar{background:rgba(22,163,74,0.1)}
[data-theme="light"] .mm-vbar:hover{background:rgba(22,163,74,0.18)}
[data-theme="light"] .mm-vbar > .mm-vbar-val{color:#16a34a}
[data-theme="light"] .mm-vbar-accent{background:rgba(234,88,12,0.1)}
[data-theme="light"] .mm-vbar-accent:hover{background:rgba(234,88,12,0.18)}
[data-theme="light"] .mm-vbar-accent .mm-vbar-val{color:#ea580c}
[data-theme="light"] .mm-vbar-dim{background:rgba(99,102,241,0.08)}
[data-theme="light"] .mm-vbar-dim:hover{background:rgba(99,102,241,0.15)}
[data-theme="light"] .mm-vbar-dim .mm-vbar-val{color:#6366f1}
/* ── Multi-color text highlights ── */
.mm-hl-green{color:#34d399;font-weight:600}
.mm-hl-orange{color:#fb923c;font-weight:600}
.mm-hl-accent{color:#60a5fa;font-weight:700}
[data-theme="light"] .mm-hl-green{color:#16a34a}
[data-theme="light"] .mm-hl-orange{color:#ea580c}
[data-theme="light"] .mm-hl-accent{color:#2563eb}
/* ── Thesis footnote + Exhibit link ── */
.mm-proof-footnote{
font:400 clamp(11px,.75vw,13px)/1.5 var(--font-sans);
color:rgba(255,255,255,.3);
text-align:center;
width:100%;
min-width:100%;
box-sizing:border-box;
margin:clamp(16px,2vh,24px) 0 0 0;
padding-top:clamp(12px,1.5vh,20px);
border-top:1px solid rgba(255,255,255,.06)
}
.mm-exhibit-link{
color:#60a5fa;
text-decoration:none;
font-weight:600;
border-bottom:1px solid rgba(96,165,250,.3);
transition:color .2s,border-color .2s
}
.mm-exhibit-link:hover{color:#93c5fd;border-color:#93c5fd}
[data-theme="light"] .mm-proof-footnote{color:rgba(0,0,0,.35);border-top-color:rgba(0,0,0,.08)}
[data-theme="light"] .mm-exhibit-link{color:#2563eb;border-bottom-color:rgba(37,99,235,.3)}
[data-theme="light"] .mm-exhibit-link:hover{color:#1d4ed8;border-color:#1d4ed8}
/* Ring gradient strokes work via inline stroke="url(#gradX)" attributes — no CSS override needed */
/* Beat 2: The Proof — vertical bar chart */
.mm-beat-proof{padding:clamp(48px,8vh,96px) 0}
.mm-proof-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:end;min-height:clamp(300px,40vh,420px)}
.mm-proof-col{display:flex;flex-direction:column;align-items:center}
.mm-proof-label{font:600 clamp(11px,.85vw,14px)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:clamp(24px,3vh,40px);text-align:center}
.mm-vbar-stack{display:flex;gap:clamp(8px,1vw,16px);align-items:flex-end;height:clamp(240px,32vh,360px);width:100%;justify-content:center}
/* Individual vertical bars */
.mm-vbar{width:clamp(90px,9vw,130px);height:0;border-radius:6px 6px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;transition:height 1.5s cubic-bezier(.16,1,.3,1),background .3s;cursor:default;background:rgba(34,197,94,0.15);padding:8px 4px}
.mm-beat-proof.in .mm-vbar{height:var(--h)}
.mm-vbar::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 100%);pointer-events:none}
.mm-vbar-val{font:700 clamp(18px,2vw,28px)/1 var(--font-headline);color:#34d399;letter-spacing:-.02em}
.mm-vbar-val small{font-size:.6em;opacity:.6;font-weight:400}
.mm-vbar-tag{font:500 clamp(9px,.7vw,11px)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);text-align:center;max-width:100%;word-break:break-word}
.mm-vbar-sub{font:400 clamp(7px,.55vw,9px)/1.2 var(--font-mono);letter-spacing:.04em;text-transform:none;opacity:.6;display:block;margin-top:3px}
[data-theme="light"] .mm-vbar-sub{opacity:.5}
.mm-vbar:hover{background:rgba(34,197,94,0.25)}
/* Accent bar (Black Box) — Orange */
.mm-vbar-accent{background:rgba(249,115,22,0.15)}
.mm-vbar-accent .mm-vbar-val{color:#fb923c}
.mm-vbar-accent .mm-vbar-tag{color:rgba(249,115,22,.6)}
.mm-vbar-accent:hover{background:rgba(249,115,22,0.25)}
/* Dim bar (Proprietary) — Purple */
.mm-vbar-dim{background:rgba(139,92,246,.1)}
.mm-vbar-dim .mm-vbar-val{color:#c4b5fd}
.mm-vbar-dim .mm-vbar-tag{color:rgba(196,181,253,.5)}
.mm-vbar-dim:hover{background:rgba(139,92,246,.2)}
/* Legend row below bars */
.mm-vbar-legend{
display:flex;gap:clamp(12px,1.5vw,20px);
justify-content:center;
margin-top:clamp(16px,2vh,24px);
}
.mm-legend-item{
display:flex;align-items:center;gap:6px;
font:500 clamp(10px,.75vw,12px)/1 var(--font-mono);
letter-spacing:.06em;text-transform:uppercase;
color:rgba(255,255,255,.45);
}
.mm-legend-swatch{
width:10px;height:10px;border-radius:3px;flex-shrink:0;
background:rgba(34,197,94,0.3);
}
.mm-legend-swatch--accent{background:rgba(249,115,22,0.3)}
.mm-legend-swatch--dim{background:rgba(139,92,246,.25)}
[data-theme="light"] .mm-legend-item{color:rgba(0,0,0,.4)}
[data-theme="light"] .mm-legend-swatch{background:rgba(22,163,74,0.2)}
[data-theme="light"] .mm-legend-swatch--accent{background:rgba(234,88,12,0.2)}
[data-theme="light"] .mm-legend-swatch--dim{background:rgba(99,102,241,.15)}
/* Center divider */
.mm-proof-divider{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 clamp(16px,2vw,32px);align-self:center}
.mm-proof-divider-line{width:1px;height:clamp(40px,6vh,80px);background:linear-gradient(180deg,transparent,rgba(255,255,255,.15),transparent)}
.mm-proof-divider-label{font:700 clamp(11px,.8vw,13px)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.25)}
/* Proof insight line */
.mm-proof-insight{font:400 clamp(14px,1.15vw,17px)/1.6 var(--font-sans);color:rgba(255,255,255,.5);text-align:center;max-width:52ch;margin:clamp(24px,3vh,40px) auto 0;padding-top:clamp(16px,2vh,24px);border-top:1px solid rgba(255,255,255,.06)}
/* Beat 3: The Detail — cards and payoff */
.mm-beat-detail{padding:clamp(48px,6vh,80px) 0 clamp(32px,4vh,56px)}
.mm-beat-detail .bom-compare{padding-left:0;padding-right:0}
.mm-beat-detail .bom-payoff-section{padding-left:0;padding-right:0}
/* ═══ FULL-WIDTH BOM STRIPS ═══ */
.mm-strip{padding:clamp(36px,4vh,56px) 0;opacity:0;transform:translateY(20px);transition:all .8s cubic-bezier(.2,.7,.2,1)}
.mm-strip.in{opacity:1;transform:none}
.mm-strip-header{display:flex;align-items:center;gap:12px;margin-bottom:clamp(12px,1.5vh,20px)}
.mm-strip-icon{width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4)}
.mm-strip-icon-accent{border-color:rgba(59,130,246,.15);background:rgba(59,130,246,.06);color:#60a5fa}
.mm-strip-tag{font:700 .65rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.mm-strip-tag-accent{color:rgba(59,130,246,.8)}
.mm-strip-title{font:700 clamp(24px,2.5vw,36px)/1.15 var(--font-headline);letter-spacing:-.02em;color:#fff;margin-bottom:clamp(16px,2vh,24px)}
.mm-strip-title-accent{color:#60a5fa}
.mm-strip-content{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,4vw,56px);align-items:start}
.mm-strip-narrative{max-width:72ch}
.mm-strip-narrative p{font:400 clamp(14px,1.1vw,17px)/1.7 var(--font-sans);color:rgba(255,255,255,.55);margin-bottom:clamp(12px,1.5vh,18px)}
.mm-strip-narrative p:last-child{margin-bottom:0}
.mm-strip-highlight{border-left:3px solid #3b82f6;padding-left:clamp(16px,1.5vw,24px);color:rgba(255,255,255,.75) !important;font-weight:500 !important}
.mm-strip-states{display:flex;flex-direction:column;gap:10px;padding-top:4px;min-width:clamp(180px,16vw,240px)}
/* Accent strip — subtle left border + glow */
.mm-strip-accent{padding-left:clamp(24px,2vw,36px);border-left:3px solid rgba(59,130,246,.3);position:relative}
.mm-strip-accent::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:clamp(100px,15vw,200px);background:linear-gradient(90deg,rgba(59,130,246,.04),transparent);pointer-events:none}
/* Divider between strips */
.mm-strip-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 20%,rgba(255,255,255,.08) 80%,transparent);margin:clamp(8px,1vh,16px) 0}
/* ── Light Theme — Strips ── */
[data-theme="light"] .mm-strip-icon{border-color:rgba(0,0,0,.08);background:rgba(0,0,0,.03);color:rgba(0,0,0,.3)}
[data-theme="light"] .mm-strip-icon-accent{border-color:rgba(10,88,202,.15);background:rgba(10,88,202,.06);color:#0a58ca}
[data-theme="light"] .mm-strip-tag{color:rgba(0,0,0,.4)}
[data-theme="light"] .mm-strip-tag-accent{color:#0a58ca}
[data-theme="light"] .mm-strip-title{color:#0c0f1a}
[data-theme="light"] .mm-strip-title-accent{color:#0a58ca}
[data-theme="light"] .mm-strip-narrative p{color:#727891}
[data-theme="light"] .mm-strip-highlight{border-left-color:#0a58ca;color:#334155 !important}
[data-theme="light"] .mm-strip-accent{border-left-color:rgba(10,88,202,.2)}
[data-theme="light"] .mm-strip-accent::before{background:linear-gradient(90deg,rgba(10,88,202,.03),transparent)}
[data-theme="light"] .mm-strip-divider{background:linear-gradient(90deg,transparent,rgba(0,0,0,.06) 20%,rgba(0,0,0,.06) 80%,transparent)}
/* ── Responsive — Strips ── */
@media(max-width:768px){
.mm-strip-content{grid-template-columns:1fr}
.mm-strip-states{flex-direction:row;flex-wrap:wrap;gap:8px;min-width:auto}
.mm-strip-accent{padding-left:16px}
}
/* ── Light Theme — Beats ── */
[data-theme="light"] .mm-claim-body{color:#727891}
[data-theme="light"] .mm-proof-label{color:rgba(0,0,0,.4)}
[data-theme="light"] .mm-vbar{background:rgba(22,163,74,0.1)}
[data-theme="light"] .mm-vbar:hover{background:rgba(22,163,74,0.18)}
[data-theme="light"] .mm-vbar-val{color:#16a34a}
[data-theme="light"] .mm-vbar-tag{color:rgba(0,0,0,.35)}
[data-theme="light"] .mm-vbar-accent{background:rgba(234,88,12,0.1)}
[data-theme="light"] .mm-vbar-accent:hover{background:rgba(234,88,12,0.18)}
[data-theme="light"] .mm-vbar-accent .mm-vbar-val{color:#ea580c}
[data-theme="light"] .mm-vbar-accent .mm-vbar-tag{color:rgba(234,88,12,.5)}
[data-theme="light"] .mm-vbar-dim{background:rgba(99,102,241,0.08)}
[data-theme="light"] .mm-vbar-dim:hover{background:rgba(99,102,241,0.15)}
[data-theme="light"] .mm-vbar-dim .mm-vbar-val{color:#6366f1}
[data-theme="light"] .mm-vbar-dim .mm-vbar-tag{color:rgba(99,102,241,.4)}
[data-theme="light"] .mm-proof-divider-line{background:linear-gradient(180deg,transparent,rgba(0,0,0,.1),transparent)}
[data-theme="light"] .mm-proof-divider-label{color:rgba(0,0,0,.2)}
[data-theme="light"] .mm-proof-insight{color:#727891;border-top-color:rgba(0,0,0,.06)}
/* ── Responsive — Beats ── */
@media(max-width:768px){
.mm-proof-grid{grid-template-columns:1fr;gap:clamp(24px,4vh,40px)}
.mm-proof-divider{flex-direction:row;padding:0}
.mm-proof-divider-line{width:clamp(40px,8vw,80px);height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent)}
.mm-vbar-stack{height:clamp(180px,28vh,260px)}
.mm-vbar{width:clamp(60px,20vw,90px)}
}
/* ── Root Cause Payoff ── */
.rc-payoff{margin-top:32px;padding:clamp(20px,2.5vw,32px);border:1px solid rgba(59,130,246,.1);border-left:3px solid var(--accent-blue);background:rgba(59,130,246,.02);border-radius:0 6px 6px 0}
.rc-payoff p{font:500 clamp(15px,1.3vw,20px)/1.5 var(--font-sans);color:var(--text-1)}
.rc-payoff strong{color:var(--accent-blue)}
/* ── Responsive ── */
@media(max-width:1200px){
.rc-cards{grid-template-columns:repeat(2,1fr)}
.fact-grid-v2{grid-template-columns:repeat(2,1fr)}
.cta-timeline-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
.bom-compare{grid-template-columns:1fr;gap:16px}
.bom-col-divider{width:100%;height:1px;margin:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 20%,rgba(255,255,255,.08) 80%,transparent)}
.bom-state-indicators{flex-direction:row;flex-wrap:wrap;gap:12px}
.bom-payoff-insight{text-align:center}
.bom-payoff-cta{justify-content:center;width:100%}
.ind-grid{grid-template-columns:repeat(2,1fr)}
.phase-grid{grid-template-columns:1fr}
.study-card{width:280px}
.misalloc-seg small{font-size:9px}
.misalloc-bar-wrap{height:44px}
.cta-bring-row{grid-template-columns:1fr}
.cta-actions-c{grid-template-columns:1fr}
}
@media(max-width:600px){
.cta-timeline-strip{grid-template-columns:1fr}
.hp2-hero-cta{flex-direction:column;width:100%}
.hp2-hero-cta .btn{width:100%;justify-content:center}
.trend-row{grid-template-columns:90px 1fr 32px;gap:6px}
.misalloc-bar-wrap{flex-direction:column;height:auto}
.misalloc-seg{width:100%;height:36px;flex-direction:row;gap:8px}
}
/* ═══ MOBILE UX V2 — 360-448px (Samsung S21 → Pixel 9 Pro XL) ═══ */
@media(max-width:768px){
/* ── Global mobile spacing ── */
.hp2-section{padding:clamp(32px,4vh,52px) clamp(24px,6vw,40px)}
.hp2-sec-title{font-size:clamp(28px,7vw,42px)}
.hp2-sec-hook{font-size:clamp(16px,4.2vw,22px);margin-bottom:12px}
.hp2-sec-lead{font-size:clamp(14px,3.6vw,16px)}
.hp2-eyebrow{margin-bottom:16px;font-size:clamp(9px,2.5vw,11px)}
.hp2-eb-line{width:28px}
.hp2-mw{margin-bottom:24px!important}
/* ══ C2: THESIS — 2-line truncation + subtle read more + chart visible ══ */
.thesis-split{padding:clamp(40px,7vh,64px) clamp(24px,6vw,40px)}
.thesis-split{flex-direction:column}
.thesis-main-h{font-size:clamp(32px,8.5vw,48px)}
.thesis-sub-h{font-size:clamp(16px,4.2vw,22px)}
.thesis-body{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
font-size:clamp(14px,3.6vw,16px);
position:relative;
transition:all .4s ease;
}
.thesis-body.expanded{
-webkit-line-clamp:unset;
overflow:visible;
}
/* Read more — subtle, centered, not a loud CTA */
.thesis-read-more{
display:block !important;
margin:10px auto 0;
font:400 clamp(12px,3.2vw,14px)/1 var(--font-sans);
color:rgba(255,255,255,.35);
cursor:pointer;
border:none;
background:none;
padding:6px 0;
min-height:32px;
letter-spacing:.03em;
text-align:center;
transition:color .2s;
}
.thesis-read-more:hover,
.thesis-read-more:active{
color:rgba(255,255,255,.55);
}
[data-theme="light"] .thesis-read-more{
color:rgba(0,0,0,.3);
}
[data-theme="light"] .thesis-read-more:hover,
[data-theme="light"] .thesis-read-more:active{
color:rgba(0,0,0,.5);
}
/* Charts always visible, tight spacing right after text */
.thesis-split-bars{
display:block;
margin-top:16px;
}
.thesis-split-insight{
margin-top:16px;
}
.thesis-split-insight .mm-proof-insight{
font-size:clamp(14px,3.6vw,16px);
text-align:left;
padding:16px 20px;
background:var(--bg-card);
border-radius:10px;
border:1px solid var(--border-1);
}
/* See the data toggle — hidden (charts always visible) */
.thesis-data-toggle{
display:none !important;
}
/* Compact side-by-side chart when revealed */
.mm-proof-grid-stacked{
flex-direction:row!important;
gap:12px;
}
.mm-proof-col{flex:1}
.mm-vbar-stack{height:180px;gap:4px}
.mm-vbar{width:clamp(50px,15vw,70px)}
.mm-vbar-val{font-size:clamp(14px,3.8vw,18px)}
.mm-proof-label{font-size:clamp(9px,2.5vw,11px)}
.mm-vbar-legend{gap:6px;margin-top:8px;flex-wrap:wrap}
.mm-legend-item{font-size:clamp(8px,2.2vw,10px)}
.mm-legend-swatch{width:8px;height:8px}
.mm-proof-divider{padding:0 4px}
.mm-proof-divider-label{font-size:10px}
/* ═ C5: MISMATCH — reduce transition gap ══ */
.thesis-to-mismatch-transition{height:clamp(32px,4vh,48px)}
.mismatch-zone{padding:clamp(24px,4vh,48px) clamp(24px,6vw,40px) 0}
.mm-claim-split{grid-template-columns:1fr;gap:20px}
.mm-claim-text{padding-right:0}
.thesis-chapter-title{font-size:clamp(28px,7vw,42px)}
.mm-claim-hook{font-size:clamp(18px,4.8vw,24px)}
.mm-claim-body{
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden;font-size:clamp(14px,3.6vw,16px);
}
.mm-claim-body.expanded{-webkit-line-clamp:unset;overflow:visible}
/* ══ C3: BOM CARD — mobile split bar ══ */
/* ── Reduce mismatch zone horizontal padding to match page ── */
.mismatch-zone{padding-left:0 !important;padding-right:0 !important}
.mm-claim-split{gap:16px}
/* ── Card: full-width, spacious ── */
.mm-merged-card{
padding:32px 24px 24px;
border-radius:18px;
touch-action:pan-y;
position:relative;
}
/* ── Hide ALL desktop elements ── */
.mm-pill-strip{display:none !important}
.mm-mobile-select-wrap{display:none !important}
.mm-industry-nav{display:none !important}
.mm-merged-header{display:none !important}
.mm-merged-grid{display:none !important}
.mm-card-footer{display:none !important}
.mm-source{display:none !important}
/* ── Exhibit label ── */
.mm-exhibit-label{font-size:10px;margin-bottom:20px}
/* ── Mobile split layout: VISIBLE ── */
.mm-mobile-split{
display:block !important;
transition:opacity .3s ease, transform .3s ease;
}
.mm-merged-card.mm-transitioning .mm-mobile-split{
opacity:0;
transform:translateX(16px);
}
.mm-merged-card.mm-entering .mm-mobile-split{
opacity:0;
transform:translateX(-16px);
}
/* ── Industry name: centered, prominent ── */
.mm-split-industry{
font:700 18px/1.2 var(--font-headline);
color:#fff;
text-align:center;
margin-bottom:4px;
letter-spacing:.01em;
}
[data-theme="light"] .mm-split-industry{color:var(--c-text)}
/* ── Subtitle ── */
.mm-split-subtitle{
font:400 11px/1 var(--font-sans);
color:rgba(255,255,255,.25);
text-align:center;
text-transform:uppercase;
letter-spacing:.1em;
margin-bottom:32px;
}
[data-theme="light"] .mm-split-subtitle{color:rgba(0,0,0,.3)}
/* ── Two stats side by side ── */
.mm-split-stats{
display:flex;
justify-content:space-between;
align-items:flex-end;
margin-bottom:20px;
padding:0 4px;
}
.mm-split-stat{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.mm-split-stat-right{
align-items:flex-end;
text-align:right;
}
.mm-split-pct{
font:800 clamp(38px,10vw,52px)/1 var(--font-headline);
color:#fff;
letter-spacing:-1px;
}
.mm-split-unit{
font:500 clamp(15px,3.8vw,19px)/1 var(--font-sans);
color:rgba(255,255,255,.3);
margin-left:2px;
display:inline;
}
.mm-split-stat:first-child .mm-split-pct{color:#22c55e}
.mm-split-stat-right .mm-split-pct{color:#f97316}
.mm-split-label{
font:500 11px/1 var(--font-sans);
color:rgba(255,255,255,.35);
margin-top:8px;
letter-spacing:.03em;
}
/* Light theme stats */
[data-theme="light"] .mm-split-pct{color:var(--c-text)}
[data-theme="light"] .mm-split-stat:first-child .mm-split-pct{color:#16a34a}
[data-theme="light"] .mm-split-stat-right .mm-split-pct{color:#ea580c}
[data-theme="light"] .mm-split-unit{color:rgba(0,0,0,.25)}
[data-theme="light"] .mm-split-label{color:rgba(0,0,0,.4)}
/* ── Proportional split bar ── */
.mm-split-bar{
display:flex;
height:14px;
border-radius:7px;
overflow:hidden;
gap:2px;
margin-bottom:28px;
}
.mm-split-fill-left{
background:linear-gradient(90deg,#22c55e,#4ade80);
border-radius:7px 0 0 7px;
transition:width .5s cubic-bezier(.4,0,.2,1);
}
.mm-split-fill-right{
background:linear-gradient(90deg,#f97316,#fb923c);
border-radius:0 7px 7px 0;
flex:1;
transition:width .5s cubic-bezier(.4,0,.2,1);
}
/* ── Structured source block ── */
.mm-split-src-block{
border-top:1px solid rgba(255,255,255,.06);
padding-top:20px;
text-align:center;
}
.mm-split-src-label{
font:600 9px/1 var(--font-sans);
color:rgba(255,255,255,.2);
letter-spacing:.14em;
text-transform:uppercase;
margin-bottom:8px;
}
.mm-split-src-product{
font:500 13px/1.3 var(--font-headline);
color:rgba(255,255,255,.55);
margin-bottom:4px;
}
.mm-split-src-detail{
font:400 10px/1.4 var(--font-sans);
color:rgba(255,255,255,.2);
}
/* Light theme source */
[data-theme="light"] .mm-split-src-block{border-top-color:rgba(0,0,0,.06)}
[data-theme="light"] .mm-split-src-label{color:rgba(0,0,0,.2)}
[data-theme="light"] .mm-split-src-product{color:rgba(0,0,0,.55)}
[data-theme="light"] .mm-split-src-detail{color:rgba(0,0,0,.25)}
/* ── Industry tab strip ── */
.mm-swipe-dots{
display:flex !important;
justify-content:center;
gap:4px;
padding-top:24px;
flex-wrap:wrap;
}
.mm-dot{
padding:5px 10px;
border-radius:20px;
font:500 10px/1 var(--font-sans);
color:rgba(255,255,255,.3);
background:transparent;
transition:all .3s ease;
cursor:pointer;
letter-spacing:.02em;
white-space:nowrap;
}
.mm-dot-active{
background:linear-gradient(135deg,var(--accent-blue),#6366f1);
color:#fff;
}
[data-theme="light"] .mm-dot{color:rgba(0,0,0,.3)}
[data-theme="light"] .mm-dot-active{
background:linear-gradient(135deg,var(--accent-blue),#6366f1);
color:#fff;
}
/* ══ C4: INDUSTRY — full visual cards ══ */
.ind-grid{
grid-template-columns:1fr!important;
gap:18px;
border:none!important;border-radius:0!important;overflow:visible!important;
}
.ind-card{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
border-radius:14px!important;
border:1px solid var(--border-1)!important;
margin:0!important;
padding:0!important;
background:var(--bg-card,var(--bg-1))!important;
overflow:hidden!important;
text-decoration:none!important;
transition:transform .2s ease;
}
.ind-card:active{transform:scale(.985)}
/* ── Image: full-width hero, 200px tall ── */
.ind-card-img{
display:block!important;
position:relative!important;
width:100%!important;
height:200px!important;
aspect-ratio:auto!important;
margin:0!important;
padding:0!important;
border-radius:0!important;
overflow:hidden!important;
flex-shrink:0!important;
background:#111!important;
}
.ind-card-img img{
display:block!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
filter:grayscale(60%) brightness(.75)!important;
}
/* Gradient fade at bottom of image */
.ind-card-img::after{
content:''!important;
display:block!important;
position:absolute!important;
bottom:0!important;left:0!important;right:0!important;
height:50%!important;
background:linear-gradient(to top,var(--bg-card,var(--bg-1)),transparent)!important;
top:auto!important;
width:auto!important;
margin:0!important;font-size:0!important;
transform:none!important;
border-radius:0!important;
color:transparent!important;
pointer-events:none;
}
/* ── Badge: glassmorphism on image, top-left (same as desktop) ── */
.ind-badge{
display:inline-flex!important;
position:absolute!important;
top:12px!important;
left:12px!important;
bottom:auto!important;
z-index:2;
font:600 10px/1 var(--font-sans)!important;
letter-spacing:.08em!important;
text-transform:uppercase!important;
color:rgba(255,255,255,.9)!important;
margin:0!important;
padding:6px 12px 6px 14px!important;
border-radius:4px!important;
background:rgba(0,0,0,.45)!important;
backdrop-filter:blur(8px)!important;
-webkit-backdrop-filter:blur(8px)!important;
border:1px solid rgba(255,255,255,.1)!important;
border-left:3px solid var(--ind-accent,#3b82f6)!important;
}
.ind-badge::before{display:none!important}
/* ── Card body ── */
.ind-card-body{
padding:22px 20px 24px!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
flex:1!important;
gap:0!important;
max-height:none!important;
overflow:visible!important;
opacity:1!important;
}
/* ── Headline: unclamped, let thesis breathe ── */
.ind-name{
font:700 clamp(16px,4.2vw,19px)/1.3 var(--font-headline)!important;
letter-spacing:-.02em!important;
text-align:left!important;
margin:0 0 20px!important;
color:var(--text-1)!important;
width:100%!important;
-webkit-line-clamp:unset!important;
display:block!important;
overflow:visible!important;
}
.ind-name em{
font-style:normal!important;
color:var(--ind-accent,var(--accent-blue))!important;
}
/* ── Description: HIDE on mobile — headline says it all ── */
.ind-desc{display:none!important}
/* ── Chip label: hide ── */
.ind-chip-label{display:none!important}
/* ── Chips: HIDE on mobile — headline is enough ── */
.ind-chips{display:none!important}
/* ── CTA: text link, NOT button ── */
.ind-cta{
font:600 12.5px/1 var(--font-sans)!important;
color:var(--ind-accent,var(--accent-blue))!important;
display:inline-flex!important;
align-items:center!important;
gap:6px!important;
opacity:1!important;
margin-top:auto!important;
align-self:flex-start!important;
max-height:none!important;
overflow:visible!important;
/* Reset desktop button styles */
background:none!important;
padding:0!important;
border-radius:0!important;
box-shadow:none!important;
border:none!important;
letter-spacing:.02em!important;
}
.ind-cta i{font-size:10px!important}
.ind-card:hover{transform:none!important;box-shadow:none!important}
/* ══ C1: ROOT CAUSE — 1-column accordion ══ */
.rc-grid{
grid-template-columns:1fr!important;
gap:0;background:none;
border:1px solid var(--border-1);border-radius:12px;
overflow:hidden;
}
.rc-card-v2{
padding:clamp(16px,4vw,20px) clamp(16px,4vw,20px);
border-bottom:1px solid var(--border-1);
cursor:pointer;
}
.rc-card-v2:last-child{border-bottom:none}
.rc-card-v2::after{display:none} /* Remove hover underline */
.rc-num{
position:static;
display:inline-block;
font-size:clamp(16px,4vw,20px);
opacity:.35;
margin-right:10px;
vertical-align:middle;
margin-bottom:0;
}
.rc-card-v2 h3{
display:inline;
font-size:clamp(14px,3.8vw,16px);
vertical-align:middle;
}
/* Hide evidence and detail by default — accordion */
.rc-evidence{display:none}
.rc-detail{display:none}
/* Show when expanded */
.rc-card-v2.rc-expanded .rc-evidence{
display:block;
margin-top:12px;
font-size:clamp(12px,3.2vw,14px);
}
.rc-card-v2.rc-expanded .rc-detail{
display:block;
margin-top:8px;
font-size:clamp(12px,3.2vw,14px);
-webkit-line-clamp:unset;
}
.rc-card-v2.rc-expanded .rc-num{opacity:.15}
/* Chevron indicator */
.rc-card-v2::before{
content:"\f078";
font-family:"Font Awesome 6 Free";font-weight:900;
float:right;font-size:12px;
color:var(--text-3);margin-top:4px;
transition:transform .3s;
}
.rc-card-v2.rc-expanded::before{
transform:rotate(180deg);
}
/* ══ H2: PROCESS — hide desc, keep title + hook only ══ */
.proc-card{padding:clamp(18px,4.5vw,24px) clamp(16px,4vw,22px)}
.proc-title{font-size:clamp(20px,5.5vw,26px)}
.proc-ghost{font-size:clamp(56px,16vw,72px)}
.proc-desc{display:none} /* Hide long description — expand reveals it */
/* ── Stat pills — horizontal 3-column with accent flair ── */
.proc-stats{
flex-direction:row!important;
gap:0!important;
border:1px solid color-mix(in srgb,var(--accent-blue) 12%,transparent)!important;
border-radius:12px!important;
overflow:hidden!important;
background:color-mix(in srgb,var(--accent-blue) 3%,transparent)!important;
}
[data-theme="dark"] .proc-stats{
background:rgba(59,130,246,.06)!important;
border-color:rgba(59,130,246,.12)!important;
}
.proc-stat{
flex:1!important;
border-right:1px solid color-mix(in srgb,var(--accent-blue) 8%,transparent)!important;
border-bottom:none!important;
padding:14px 10px!important;
text-align:center!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
gap:4px!important;
}
.proc-stat:last-child{border-right:none!important}
.proc-stat-num{
font-size:clamp(22px,6vw,28px)!important;
background:linear-gradient(135deg,var(--accent-blue),#6366f1)!important;
-webkit-background-clip:text!important;
-webkit-text-fill-color:transparent!important;
background-clip:text!important;
}
.proc-stat-label{
font-size:clamp(9px,2.4vw,10.5px)!important;
text-align:center!important;
line-height:1.25!important;
}
/* ── 05 Product Studies — tighten ── */
.work-showcase .hp2-sec-lead{display:none}
.study-card{width:clamp(260px,72vw,300px)}
/* ── 06 Pipeline — compact stacked layout ── */
.hp2-pipe-flow{gap:12px}
.hp2-pipe-card:not(.hp2-pipe-card--out) p{display:none}
.hp2-pipe-card{
padding:clamp(14px,3.5vw,20px);
flex-direction:row;align-items:center;gap:12px;
min-height:auto;
}
.hp2-pipe-icon{width:36px;height:36px;font-size:14px;flex-shrink:0;margin:0}
.hp2-pipe-card h4{font-size:clamp(13px,3.5vw,15px);margin:0}
/* Compact engine card */
.hp2-pipe-engine{width:clamp(240px,65vw,300px);height:auto;min-height:180px}
.hp2-pipe-engine-body{width:clamp(200px,55vw,260px);padding:18px 16px 14px}
.engine-title{font-size:clamp(26px,7vw,36px)}
/* Compact output cards */
.hp2-pipe-card--out{padding:clamp(14px,3.5vw,20px)}
.hp2-pipe-card--out h4{font-size:clamp(14px,3.8vw,16px)}
.hp2-pipe-card--out p{font-size:clamp(12px,3.2vw,14px)}
.hp2-pipe-pills{gap:6px}
.hp2-pipe-pill{font-size:clamp(10px,2.8vw,12px);padding:5px 10px}
.hp2-pipe-conn{height:28px}
/* ══ H4: FACT CARDS — 2×2, bigger numbers, hide body ══ */
.fact-grid-v2{grid-template-columns:repeat(2,1fr);gap:10px}
.fact-grid-3col{grid-template-columns:1fr!important}
.fact-card-v2{padding:clamp(16px,4vw,22px)}
.fact-accent-bar{display:none} /* Remove accent bar on mobile */
.fact-big-num-v2{font-size:clamp(40px,11vw,56px)}
.fact-headline-v2{font-size:clamp(11px,3vw,13px);-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
.fact-body-v2{display:none}
.fact-label-v2{font-size:clamp(9px,2.5vw,11px)}
/* ── CTA section — tighter ── */
.cta-section-v2{padding:clamp(36px,6vh,64px) clamp(20px,5vw,36px)}
/* ── Kill hover effects on touch ── */
.ind-card:hover,.rc-card-v2:hover,.fact-card-v2:hover,.proc-card:hover{
transform:none;box-shadow:none;
}
}
/* ── Extra-small: Samsung S21/S22/S23 base (360px) ── */
@media(max-width:380px){
.fact-grid-v2{gap:8px}
.fact-card-v2{padding:14px}
.fact-big-num-v2{font-size:36px}
.fact-headline-v2{font-size:10px}
.ind-card{padding:14px 14px 14px 18px}
.rc-card-v2{padding:14px}
.hp2-pipe-engine{width:220px}
.hp2-pipe-engine-body{width:180px;padding:16px 12px 14px}
.engine-title{font-size:24px}
.thesis-main-h{font-size:30px}
.thesis-split{padding:36px 20px}
.mm-bar-value{font-size:18px}
.mm-ring-chips{max-height:36px}
.mm-ring-chips .bom-chip{font-size:8px;padding:2px 6px}
}
/* ═══ PREMIUM DARK MODE ENHANCEMENTS ═══ */
[data-theme="dark"] .hp2-section{border-top-color:rgba(255,255,255,.04);background:var(--bg-1)}
[data-theme="dark"] .hp2-section.alt{background:var(--bg-2)}
/* Subtle noise texture for depth */
[data-theme="dark"] .hp2-section::after{content:"";position:absolute;inset:0;opacity:.012;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,");pointer-events:none;z-index:0}
/* Dark mode card ambient glow */
[data-theme="dark"] .phase-card{box-shadow:0 2px 24px rgba(0,0,0,.25)}
[data-theme="dark"] .phase-card:hover{box-shadow:0 12px 48px rgba(0,0,0,.4),0 0 60px rgba(59,130,246,.04)}
[data-theme="dark"] .rc-card{background:rgba(255,255,255,.015)}
[data-theme="dark"] .rc-card:hover{background:rgba(255,255,255,.03)}
[data-theme="dark"] .fact-card-v2{box-shadow:0 2px 16px rgba(0,0,0,.2)}
[data-theme="dark"] .fact-card-v2:hover{box-shadow:0 8px 40px rgba(0,0,0,.35),0 0 40px rgba(59,130,246,.04)}
[data-theme="dark"] .cta-card-c{box-shadow:0 4px 32px rgba(0,0,0,.3)}
[data-theme="dark"] .cta-tl-step{background:rgba(59,130,246,.04);border-color:rgba(59,130,246,.08)}
[data-theme="dark"] .cta-tl-step:hover{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.2)}
/* Dark mode improved text hierarchy */
[data-theme="dark"] .rc-card p{color:rgba(255,255,255,.5)}
[data-theme="dark"] .phase-card p{color:rgba(255,255,255,.5)}
[data-theme="dark"] .cta-tl-label{color:rgba(255,255,255,.5)}
[data-theme="dark"] .fact-body-v2{color:rgba(255,255,255,.35)}
[data-theme="dark"] .fact-card-v2:hover .fact-body-v2{color:rgba(255,255,255,.6)}
/* ═══ LIGHT MODE READABILITY FIXES ═══ */
[data-theme="light"] .rc-card{background:#fff;border:1px solid rgba(0,0,0,.06)}
[data-theme="light"] .rc-cards{background:rgba(0,0,0,.04);border-radius:6px;overflow:hidden}
[data-theme="light"] .rc-card:hover{background:#f8f9fc}
[data-theme="light"] .rc-card p{color:#5a5e70;font-size:13.5px}
[data-theme="light"] .rc-card h3{color:#0c0f1a}
[data-theme="light"] .rc-card-num{color:rgba(59,130,246,.06)}
[data-theme="light"] .rc-card:hover .rc-card-num{color:rgba(59,130,246,.1)}
[data-theme="light"] .phase-card{background:#fff;border-color:rgba(0,0,0,.08)}
[data-theme="light"] .phase-card:hover{border-color:rgba(59,130,246,.15);box-shadow:0 8px 40px rgba(0,0,0,.06)}
[data-theme="light"] .phase-card p{color:#5a5e70}
[data-theme="light"] .phase-num{color:rgba(59,130,246,.08)}
[data-theme="light"] .phase-card:hover .phase-num{color:rgba(59,130,246,.15)}
[data-theme="light"] .phase-footer{border-top-color:rgba(0,0,0,.06)}
[data-theme="light"] .phase-deliv{color:#727891}
[data-theme="light"] .phase-deliv span{color:#0a58ca}
[data-theme="light"] .phase-badge{color:#0a58ca;border-color:rgba(10,88,202,.15);background:rgba(10,88,202,.04)}
[data-theme="light"] .cta-section-v2{background:#fff}
[data-theme="light"] .cta-section-v2::before{background:radial-gradient(circle,rgba(59,130,246,.03) 0%,transparent 70%)}
[data-theme="light"] .cta-card-c{background:#fafbfd;border-color:rgba(0,0,0,.08);box-shadow:0 4px 24px rgba(0,0,0,.04)}
[data-theme="light"] .cta-tl-step{background:rgba(59,130,246,.03);border-color:rgba(59,130,246,.08)}
[data-theme="light"] .cta-tl-step:hover{background:rgba(59,130,246,.06)}
[data-theme="light"] .cta-pilot-note{color:#0a58ca;border-color:rgba(10,88,202,.15);background:rgba(10,88,202,.02)}
[data-theme="light"] .cta-bring-item{color:#5a5e70}
[data-theme="light"] .btn-cta-c.secondary{border-color:rgba(0,0,0,.1);color:#333}
[data-theme="light"] .btn-cta-c.secondary:hover{border-color:#0a58ca;color:#0a58ca}
[data-theme="light"] .fact-card-v2{background:#fff;border-color:rgba(0,0,0,.06);box-shadow:0 2px 12px rgba(0,0,0,.03)}
[data-theme="light"] .fact-card-v2:hover{border-color:rgba(59,130,246,.12);box-shadow:0 6px 28px rgba(0,0,0,.06)}
[data-theme="light"] .fact-big-num-v2{background:linear-gradient(135deg,#7c3aed 0%,#0a58ca 50%,#0d47a1 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
[data-theme="light"] .fact-body-v2{color:#727891}
[data-theme="light"] .fact-card-v2:hover .fact-body-v2{color:#5a5e70}
[data-theme="light"] .fact-headline-v2 em{color:#0a58ca}
/* Light mode mismatch zone inside thesis */
[data-theme="light"] .mismatch-zone .mismatch-header{max-width:1440px;margin:0 auto}
[data-theme="light"] .mismatch-zone .thesis-chapter-title{color:#0c0f1a}
[data-theme="light"] .mismatch-zone .mismatch-body{color:#727891}
[data-theme="light"] .mismatch-zone .sec-marker-num{color:#0a58ca}
[data-theme="light"] .mismatch-zone .sec-marker-label{color:rgba(0,0,0,.35)}
/* ═══ SCROLL PROGRESS BAR ═══ */
.scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--accent-blue-gradient);z-index:10000;width:0;transition:none;pointer-events:none}
/* ═══ PIPELINE RESPONSIVE FIX ═══ */
@media(max-width:1200px){
.hp2-pipe-flow{grid-template-columns:1fr 40px 1fr 40px 1fr}
.hp2-pipe-engine{width:auto;height:auto;min-height:200px}
.hp2-pipe-engine-body{width:100%;min-width:180px;max-width:300px}
}
/* ═══ HOMEPAGE CTA EMAIL PILL ═══ */
.hp-cta-email-pill{display:inline-flex;align-items:center;gap:12px;padding:14px 28px;background:rgba(255,255,255,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.25);border-radius:12px;cursor:pointer;transition:all .4s cubic-bezier(.23,1,.32,1);font:500 clamp(14px,1.1vw,17px)/1 var(--font-mono);color:#fff;position:relative;user-select:none;letter-spacing:.01em}
.hp-cta-email-pill:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.4);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.2)}
.hp-cta-email-pill i:first-child{font-size:16px;opacity:.8}
.hp-cta-copy-icon{font-size:13px;opacity:.5;transition:opacity .3s}
.hp-cta-email-pill:hover .hp-cta-copy-icon{opacity:.9}
.hp-cta-email-pill.copied{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.5)}
.hp-cta-email-pill.copied .hp-cta-copy-icon{opacity:0}
@media(max-width:768px){
.hp-cta-email-pill{font-size:13px;gap:8px;padding:12px 20px}
}