/* ════════════════════════════════════════════════════════════
   PROMOCLICKS — PREMIUM EXECUTIVE DESIGN SYSTEM v3
   Palette: Navy/Graphite · Accent: Teal/Emerald
   Type: Sora (display) + Inter (body)
════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ────────────────────────────────────────── */
:root {
    /* Surfaces */
    --bg:          #080C14;
    --bg-mid:      #0B1020;
    --bg-card:     #0F1829;
    --bg-card-h:   #131E33;
    --bg-overlay:  rgba(8,12,20,.88);

    /* Borders */
    --bdr:         rgba(255,255,255,.07);
    --bdr-strong:  rgba(255,255,255,.13);
    --bdr-accent:  rgba(14,207,179,.28);

    /* Text */
    --t1:  #EEF4FF;
    --t2:  #7B91B4;
    --t3:  #3F506C;
    --t-inv: #07090F;

    /* Accent — Teal */
    --accent:      #0ECFB3;
    --accent-dim:  #0BA896;
    --accent-glow: rgba(14,207,179,.22);
    --accent-muted:rgba(14,207,179,.08);

    /* Secondary accent — Indigo (very contained) */
    --acc2:        #818CF8;
    --acc2-muted:  rgba(129,140,248,.08);

    /* Status */
    --green:       #22D3A0;
    --green-muted: rgba(34,211,160,.1);
    --red:         #F43F5E;
    --red-muted:   rgba(244,63,94,.1);

    /* Type */
    --fD: 'Sora', system-ui, sans-serif;
    --fB: 'Inter', system-ui, sans-serif;
    --fM: 'DM Mono', ui-monospace, monospace;

    /* Scale */
    --t-xs: .72rem; --t-sm: .875rem; --t-base: 1rem;
    --t-lg: 1.125rem; --t-xl: 1.25rem; --t-2xl: 1.5rem;
    --t-3xl: 2rem; --t-4xl: 2.6rem; --t-5xl: 3.4rem;

    /* Space */
    --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
    --s5:1.25rem; --s6:1.5rem; --s8:2rem; --s10:2.5rem;
    --s12:3rem; --s16:4rem; --s20:5rem; --s24:6rem;

    /* Radii */
    --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px;
    --r-2xl:20px; --r-full:9999px;

    /* Shadows */
    --sh-sm:  0 1px 4px rgba(0,0,0,.4);
    --sh-md:  0 4px 20px rgba(0,0,0,.55);
    --sh-lg:  0 16px 48px rgba(0,0,0,.65);
    --sh-accent: 0 8px 32px rgba(14,207,179,.18);

    /* Motion */
    --ease:     cubic-bezier(.16,1,.3,1);
    --ease-io:  cubic-bezier(.4,0,.2,1);
    --dur-f:   170ms; --dur-b: 280ms; --dur-s: 450ms;

    /* Gradients */
    --grad-brand: linear-gradient(135deg, #0ECFB3 0%, #0BA896 100%);
    --grad-hero:  radial-gradient(ellipse 70% 50% at 70% -10%, rgba(14,207,179,.14) 0%, transparent 60%),
                  radial-gradient(ellipse 50% 60% at -10% 90%, rgba(129,140,248,.09) 0%, transparent 55%);
}

[data-theme="light"] {
    --bg:         #F4F6FB;
    --bg-mid:     #EBF0F8;
    --bg-card:    #FFFFFF;
    --bg-card-h:  #F8FAFD;
    --bg-overlay: rgba(244,246,251,.9);
    --bdr:        rgba(0,0,0,.07);
    --bdr-strong: rgba(0,0,0,.13);
    --t1:  #0A1020;
    --t2:  #445572;
    --t3:  #8899B4;
    --t-inv: #FFFFFF;
    --sh-sm: 0 1px 4px rgba(0,0,0,.06);
    --sh-md: 0 4px 20px rgba(0,0,0,.08);
    --sh-lg: 0 16px 48px rgba(0,0,0,.12);
}

/* ─── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; scroll-padding-top:104px; -webkit-text-size-adjust:100%; }
body {
    font-family: var(--fB);
    background: var(--bg);
    color: var(--t1);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background var(--dur-s) var(--ease-io), color var(--dur-s) var(--ease-io);
}
h1,h2,h3,h4 { font-family:var(--fD); color:var(--t1); line-height:1.14; letter-spacing:-.03em; font-weight:700; }
p { color:var(--t2); }
a { color:inherit; text-decoration:none; transition:color var(--dur-f) var(--ease); }
strong { color:var(--t1); font-weight:600; }
em { color:var(--t1); font-style:italic; }
code {
    font-family: var(--fM);
    font-size: var(--t-xs);
    color: var(--t3);
    background: var(--bdr);
    padding: .15em .5em;
    border-radius: var(--r-sm);
}
ul { list-style:none; }
img, svg, canvas { display:block; max-width:100%; }

/* ─── UTILITIES ─────────────────────────────────────────────── */
.container { width:100%; max-width:1160px; margin:0 auto; padding:0 var(--s6); }
.text-teal { color:var(--accent); }
.text-gradient-teal {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mt-5 { margin-top:var(--s5) !important; }

/* ─── SCROLL ANIMATIONS ─────────────────────────────────────── */
.fade-up {
    opacity:0; transform:translateY(22px);
    transition: opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
    transition-delay: var(--delay, 0s);
}
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ─── HEADER ─────────────────────────────────────────────────── */
.site-header {
    position:sticky; top:0; z-index:200;
    background: var(--bg-overlay);
    border-bottom: 1px solid var(--bdr);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background var(--dur-b), border-color var(--dur-b);
}
.site-header.scrolled { border-color:var(--bdr-strong); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand-logo { display:flex; align-items:center; }

.site-nav { display:flex; align-items:center; gap:var(--s8); }
.nav-link {
    font-size:var(--t-sm); font-weight:500; color:var(--t2);
    position:relative; padding-bottom:2px;
}
.nav-link::after {
    content:''; position:absolute; bottom:-2px; left:0;
    width:0; height:1.5px; background:var(--accent);
    transition:width var(--dur-b) var(--ease);
}
.nav-link:hover { color:var(--t1); }
.nav-link:hover::after { width:100%; }
.nav-link.active { color:var(--accent); }
.nav-link.active::after { width:100%; }

.header-actions { display:flex; align-items:center; gap:var(--s3); }

.btn-sm-primary {
    padding:.45rem 1rem;
    background:var(--grad-brand);
    color:#fff; font-size:var(--t-sm); font-weight:600;
    border-radius:var(--r-md); border:none; cursor:pointer;
    box-shadow:0 2px 10px var(--accent-glow);
    transition:transform var(--dur-f), box-shadow var(--dur-f), filter var(--dur-f);
    display:none;
}
@media(min-width:1024px){ .btn-sm-primary { display:inline-flex; align-items:center; gap:var(--s2); } }
.btn-sm-primary:hover { transform:translateY(-1px); box-shadow:0 4px 16px var(--accent-glow); filter:brightness(1.07); }

.btn-icon {
    width:36px; height:36px; background:none;
    border:1px solid var(--bdr-strong); border-radius:var(--r-full);
    color:var(--t2); cursor:pointer; font-size:1.1rem;
    display:flex; align-items:center; justify-content:center;
    transition:all var(--dur-f);
}
.btn-icon:hover { background:var(--bdr); color:var(--t1); }

.nav-hamburger {
    display:none; background:none;
    border:1px solid var(--bdr-strong); border-radius:var(--r-sm);
    color:var(--t2); cursor:pointer; padding:var(--s2) var(--s3); font-size:1.2rem;
}
.mobile-nav { display:none; flex-direction:column; background:var(--bg-mid); border-top:1px solid var(--bdr); }
.mobile-nav.open { display:flex; }
.mobile-nav-link { padding:var(--s4) var(--s6); font-size:var(--t-sm); font-weight:500; color:var(--t2); border-bottom:1px solid var(--bdr); }
.mobile-nav-link:hover { color:var(--accent); }

/* ─── LENS BAR ───────────────────────────────────────────────── */
.lens-bar {
    background:var(--bg-mid); border-bottom:1px solid var(--bdr);
    padding:var(--s3) 0; position:sticky; top:64px; z-index:100;
    backdrop-filter:blur(12px);
}
.lens-inner { display:flex; align-items:center; gap:var(--s6); flex-wrap:wrap; }
.lens-label { font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--t3); display:flex; align-items:center; gap:var(--s2); white-space:nowrap; }
.lens-chips { display:flex; gap:var(--s2); flex-wrap:wrap; }
.chip {
    padding:.28rem .85rem; border-radius:var(--r-full);
    font-size:var(--t-xs); font-weight:600; cursor:pointer;
    border:1px solid var(--bdr-strong); background:none; color:var(--t2);
    transition:all var(--dur-f) var(--ease);
}
.chip:hover { border-color:var(--t2); color:var(--t1); }
.chip.active { background:var(--t1); color:var(--t-inv); border-color:var(--t1); }

.ctx-item { transition:all var(--dur-b) var(--ease); border-left:2px solid transparent; }
.ctx-item.active-ctx { border-left-color:var(--accent); padding-left:var(--s4); background:var(--accent-muted); border-radius:0 var(--r-sm) var(--r-sm) 0; }

/* ─── BUTTONS ─────────────────────────────────────────────────── */
.btn-primary-teal {
    display:inline-flex; align-items:center; gap:var(--s2);
    background:var(--grad-brand); color:#fff;
    padding:.75rem 1.5rem; border-radius:var(--r-md);
    font-family:var(--fD); font-weight:600; font-size:var(--t-sm);
    border:none; cursor:pointer;
    box-shadow:0 4px 20px var(--accent-glow);
    transition:transform var(--dur-f), box-shadow var(--dur-f), filter var(--dur-f);
    letter-spacing:-.01em; text-decoration:none;
}
.btn-primary-teal:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--accent-glow); filter:brightness(1.08); color:#fff; }
.btn-primary-teal.lg { padding:.9rem 2rem; font-size:var(--t-base); }

.btn-ghost {
    display:inline-flex; align-items:center; gap:var(--s2);
    background:none; border:1px solid var(--bdr-strong);
    color:var(--t2); padding:.75rem 1.4rem;
    border-radius:var(--r-md); font-weight:500; font-size:var(--t-sm);
    cursor:pointer; transition:all var(--dur-f) var(--ease);
    text-decoration:none;
}
.btn-ghost:hover { border-color:var(--t2); color:var(--t1); background:var(--bdr); }

.btn-ghost-teal {
    display:inline-flex; align-items:center; gap:var(--s2);
    background:none; border:1px solid var(--bdr-accent);
    color:var(--accent); padding:.75rem 1.4rem;
    border-radius:var(--r-md); font-weight:600; font-size:var(--t-sm);
    cursor:pointer; transition:all var(--dur-f) var(--ease);
    text-decoration:none;
}
.btn-ghost-teal:hover { background:var(--accent-muted); }

/* ─── EYEBROW / SECTION TAGS ────────────────────────────────── */
.eyebrow-tag {
    display:inline-flex; align-items:center; gap:var(--s2);
    font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.1em;
    color:var(--t3); border:1px solid var(--bdr-strong);
    background:var(--bdr); padding:.3rem .9rem; border-radius:var(--r-full);
    margin-bottom:var(--s5);
}
.eyebrow-tag.accent-teal { color:var(--accent); border-color:var(--bdr-accent); background:var(--accent-muted); }

/* ─── SECTIONS ──────────────────────────────────────────────── */
.section { padding:var(--s24) 0; }
.section-dark { background:var(--bg-mid); }
.section-intro {
    display:flex; align-items:flex-start; gap:var(--s8);
    margin-bottom:var(--s12);
}
.section-num {
    font-family:var(--fM); font-size:var(--t-xs); color:var(--t3);
    background:var(--bdr); border:1px solid var(--bdr-strong);
    padding:.3rem .65rem; border-radius:var(--r-sm);
    flex-shrink:0; margin-top:.4rem; letter-spacing:.05em;
}
.section-title { font-size:clamp(var(--t-2xl),3.5vw,var(--t-4xl)); font-weight:800; margin-bottom:var(--s3); }
.section-sub { font-size:var(--t-base); color:var(--t2); max-width:54ch; line-height:1.7; }

/* ─── HERO ───────────────────────────────────────────────────── */
.hero {
    padding:var(--s24) 0 0;
    position:relative;
    overflow:hidden;
    background:var(--bg);
}
.hero-bg {
    position:absolute; inset:0; pointer-events:none;
}
.hbg-glow {
    position:absolute; border-radius:var(--r-full);
    filter:blur(80px); opacity:.55;
}
.hbg-1 { width:600px; height:400px; top:-100px; right:-60px; background:radial-gradient(circle, rgba(14,207,179,.18) 0%, transparent 70%); }
.hbg-2 { width:500px; height:400px; bottom:0; left:-80px; background:radial-gradient(circle, rgba(129,140,248,.1) 0%, transparent 70%); }
.hbg-grid {
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

.hero-layout {
    display:grid; grid-template-columns:1fr;
    gap:var(--s12); align-items:center;
    padding-bottom:var(--s20);
    position:relative; z-index:1;
}
@media(min-width:1024px){ .hero-layout { grid-template-columns:1.1fr 1fr; } }

.hero-headline {
    font-size:clamp(2.2rem,5vw,3.6rem);
    font-weight:900; letter-spacing:-.05em;
    line-height:1.04; margin-bottom:var(--s6);
}
.hero-sub {
    font-size:clamp(var(--t-base),1.8vw,var(--t-lg));
    color:var(--t2); line-height:1.7; max-width:50ch;
    margin-bottom:var(--s8);
}
.hero-actions { display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s10); }

/* Stat Pills */
.stat-pills { display:flex; gap:var(--s3); flex-wrap:wrap; }
.stat-pill {
    display:flex; flex-direction:column;
    background:var(--bg-card); border:1px solid var(--bdr);
    border-radius:var(--r-xl); padding:var(--s4) var(--s5);
    min-width:120px; transition:border-color var(--dur-f);
}
.stat-pill:hover { border-color:var(--bdr-accent); }
.sp-num {
    font-family:var(--fD); font-size:var(--t-2xl); font-weight:900;
    color:var(--t1); line-height:1; font-variant-numeric:tabular-nums;
}
.sp-unit { font-size:var(--t-xl); font-weight:700; color:var(--accent); line-height:1; }
.sp-desc { font-size:var(--t-xs); color:var(--t3); margin-top:var(--s2); max-width:14ch; line-height:1.4; }

/* ─── HERO MOCKUP ────────────────────────────────────────────── */
.hero-mockup { position:relative; }

.mockup-frame {
    background:var(--bg-card);
    border:1px solid var(--bdr-strong);
    border-radius:var(--r-2xl);
    overflow:hidden;
    box-shadow: var(--sh-lg), 0 0 0 1px var(--bdr-accent);
}
.mockup-hdr {
    display:flex; align-items:center; justify-content:space-between;
    padding:var(--s4) var(--s6);
    border-bottom:1px solid var(--bdr);
    background:var(--bg-mid);
}
.mockup-hdr-left { display:flex; align-items:center; gap:var(--s3); }
.mh-dot { width:8px; height:8px; border-radius:var(--r-full); background:var(--accent); box-shadow:0 0 8px var(--accent); }
.mh-title { font-family:var(--fM); font-size:var(--t-xs); font-weight:500; color:var(--t2); text-transform:uppercase; letter-spacing:.08em; }
.mh-live { display:flex; align-items:center; gap:var(--s2); font-size:var(--t-xs); font-weight:700; color:var(--green); letter-spacing:.06em; }
.live-dot { width:6px; height:6px; border-radius:var(--r-full); background:var(--green); animation:pulse-live 2s infinite; }
@keyframes pulse-live { 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(34,211,160,.5);} 50%{opacity:.7; box-shadow:0 0 0 4px rgba(34,211,160,0);} }

.mockup-body { padding:var(--s6); display:flex; flex-direction:column; gap:var(--s6); }

/* Ring metric */
.ring-metric-wrap {
    position:relative; width:160px; height:160px; margin:0 auto;
}
.ring-metric { width:160px; height:160px; transform:rotate(-90deg); }
.ring-bg { fill:none; stroke:var(--bdr-strong); stroke-width:8; }
.ring-fill { fill:none; stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 1.6s var(--ease); }
.ring-center {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.rc-val { font-family:var(--fD); font-size:var(--t-2xl); font-weight:900; color:var(--t1); line-height:1; }
.rc-label { font-size:var(--t-xs); color:var(--t3); margin-top:var(--s1); }
.ring-pulse {
    position:absolute; inset:-12px;
    border:1.5px solid var(--accent-glow);
    border-radius:var(--r-full);
    animation:ring-expand 3s ease-out infinite;
}
@keyframes ring-expand { 0%{opacity:.6; transform:scale(.9);} 100%{opacity:0; transform:scale(1.2);} }

/* Mission list */
.mission-list { display:flex; flex-direction:column; gap:var(--s3); }
.mission-item {
    display:flex; align-items:center; gap:var(--s3);
    background:var(--bg-mid); border:1px solid var(--bdr);
    border-radius:var(--r-lg); padding:var(--s3) var(--s4);
    transition:border-color var(--dur-f);
}
.mission-item.done { border-color:rgba(34,211,160,.2); }
.mission-item.active { border-color:rgba(14,207,179,.25); }
.mi-ico { font-size:1.1rem; flex-shrink:0; }
.mi-ico.done { color:var(--green); }
.mi-ico.active { color:var(--accent); animation:spin-slow 4s linear infinite; }
@keyframes spin-slow { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.mi-info { flex:1; min-width:0; }
.mi-name { display:block; font-size:var(--t-xs); font-weight:500; color:var(--t1); margin-bottom:var(--s1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mi-bar { height:4px; background:var(--bdr-strong); border-radius:var(--r-full); overflow:hidden; }
.mi-prog { height:100%; border-radius:var(--r-full); background:var(--grad-brand); transition:width 1.5s var(--ease); }
.mi-pts { font-family:var(--fM); font-size:var(--t-xs); color:var(--t3); flex-shrink:0; }
.mi-pts.pos { color:var(--green); }

/* Mockup KPIs */
.mockup-kpis {
    display:flex; align-items:center;
    background:var(--bg-mid); border:1px solid var(--bdr);
    border-radius:var(--r-lg); padding:var(--s4);
}
.mk-item { flex:1; text-align:center; }
.mk-val { display:block; font-family:var(--fD); font-size:var(--t-lg); font-weight:800; color:var(--t1); }
.mk-val.teal { color:var(--accent); }
.mk-val.green { color:var(--green); }
.mk-label { display:block; font-size:var(--t-xs); color:var(--t3); margin-top:2px; }
.mk-sep { width:1px; height:36px; background:var(--bdr-strong); }

/* Floating badges */
.float-badge {
    position:absolute;
    display:inline-flex; align-items:center; gap:var(--s2);
    font-size:var(--t-xs); font-weight:600;
    background:var(--bg-card); border:1px solid var(--bdr-strong);
    border-radius:var(--r-full); padding:.4rem 1rem;
    color:var(--t2);
    box-shadow:var(--sh-md);
    animation:float-bob 4s ease-in-out infinite;
}
.float-badge i { color:var(--accent); }
.fb-1 { top:-16px; right:20px; animation-delay:0s; }
.fb-2 { bottom:-16px; left:20px; animation-delay:2s; }
@keyframes float-bob {
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
}

/* ─── PROOF BAR ──────────────────────────────────────────────── */
.proof-bar {
    background:var(--bg-mid); border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr);
    padding:var(--s4) 0;
}
.proof-bar-inner {
    display:flex; align-items:center; gap:var(--s8); flex-wrap:wrap;
}
.pb-label { font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--t3); flex-shrink:0; white-space:nowrap; }
.pb-case {
    display:flex; align-items:center; gap:var(--s3);
    background:var(--bg-card); border:1px solid var(--bdr-strong);
    border-left:3px solid var(--accent);
    border-radius:var(--r-lg); padding:var(--s3) var(--s5);
}
.pb-case i { color:var(--accent); font-size:1.2rem; }
.pb-case strong { font-family:var(--fD); font-size:var(--t-sm); font-weight:800; }
.pb-tag {
    font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--accent); background:var(--accent-muted); border:1px solid var(--bdr-accent);
    padding:.15rem .65rem; border-radius:var(--r-full);
}
.pb-divider { width:1px; height:32px; background:var(--bdr-strong); flex-shrink:0; }
.pb-trust { display:flex; gap:var(--s2); flex-wrap:wrap; }
.trust-pill {
    display:flex; align-items:center; gap:var(--s2);
    font-size:var(--t-xs); font-weight:600; color:var(--t2);
    border:1px solid var(--bdr-strong); background:var(--bg-card);
    padding:.3rem .8rem; border-radius:var(--r-full);
    transition:all var(--dur-f);
}
.trust-pill i { color:var(--green); }
.trust-pill:hover { border-color:var(--green); color:var(--t1); background:var(--green-muted); }

/* ─── TIMELINE ───────────────────────────────────────────────── */
.tl-grid { display:grid; grid-template-columns:1fr; gap:var(--s6); }
@media(min-width:768px){ .tl-grid { grid-template-columns:280px 1fr; } }

.tl-steps { display:flex; flex-direction:row; gap:0; overflow-x:auto; }
@media(min-width:768px){ .tl-steps { flex-direction:column; } }

.tl-step {
    display:flex; align-items:center; gap:var(--s4);
    padding:var(--s4) var(--s5); background:none;
    border:1px solid var(--bdr); border-radius:var(--r-lg);
    cursor:pointer; text-align:left;
    transition:all var(--dur-b) var(--ease);
    width:100%; min-width:150px; flex-shrink:0;
}
@media(min-width:768px){ .tl-step { min-width:auto; flex-shrink:1; } }
.tl-step:not(:last-of-type) { margin-bottom:var(--s2); }
.tl-step:hover { border-color:var(--bdr-strong); background:var(--bg-card); }
.tl-step.active { border-color:var(--accent); background:var(--bg-card); box-shadow:inset 3px 0 0 var(--accent); }
@media(max-width:767px){ .tl-step.active { box-shadow:inset 0 -3px 0 var(--accent); } }

.tl-line { flex-shrink:0; height:1px; background:var(--bdr); margin:var(--s1) 0; display:none; }
@media(min-width:768px){ .tl-line { display:block; height:12px; width:1px; margin:0 0 0 22px; } }

.tls-num { font-family:var(--fM); font-size:var(--t-xs); color:var(--t3); flex-shrink:0; transition:color var(--dur-f); }
.tl-step.active .tls-num { color:var(--accent); }
.tls-era { display:block; font-size:var(--t-xs); color:var(--t3); margin-bottom:2px; }
.tls-name { display:block; font-family:var(--fD); font-size:var(--t-sm); font-weight:600; color:var(--t2); transition:color var(--dur-f); }
.tl-step.active .tls-name { color:var(--t1); }

.tl-content {
    background:var(--bg-card); border:1px solid var(--bdr-strong);
    border-radius:var(--r-2xl); padding:var(--s10); min-height:280px;
}
.tl-panel { display:none; animation:fadeIn .35s var(--ease) forwards; }
.tl-panel.active { display:block; }
@keyframes fadeIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.tlp-era { font-family:var(--fM); font-size:var(--t-xs); font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin-bottom:var(--s3); }
.tl-content h3 { font-size:var(--t-xl); font-weight:700; margin-bottom:var(--s4); }
.tl-content p { font-size:var(--t-sm); line-height:1.75; }
.tlp-callout {
    margin-top:var(--s6); padding:var(--s4) var(--s5);
    background:var(--accent-muted); border:1px solid var(--bdr-accent);
    border-radius:var(--r-lg); font-size:var(--t-sm); color:var(--t2);
    display:flex; align-items:flex-start; gap:var(--s3);
}
.tlp-callout i { color:var(--accent); font-size:1.1rem; flex-shrink:0; margin-top:2px; }
.tlp-callout.success { background:var(--green-muted); border-color:rgba(34,211,160,.25); }
.tlp-callout.success i { color:var(--green); }

/* ─── PILLARS ────────────────────────────────────────────────── */
.pillars-grid { display:grid; grid-template-columns:1fr; gap:var(--s4); margin-bottom:var(--s8); }
@media(min-width:768px){ .pillars-grid { grid-template-columns:repeat(3,1fr); } }

.pillar {
    background:var(--bg-card); border:1px solid var(--bdr);
    border-radius:var(--r-2xl); padding:var(--s8);
    display:flex; flex-direction:column; gap:var(--s4);
    position:relative; overflow:hidden;
    transition:all var(--dur-b) var(--ease);
}
.pillar::after {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--grad-brand); opacity:0; transition:opacity var(--dur-b);
}
.pillar:hover { border-color:var(--bdr-strong); transform:translateY(-3px); box-shadow:var(--sh-md); }
.pillar:hover::after { opacity:1; }
.pillar-icon { width:44px; height:44px; border-radius:var(--r-md); background:var(--bdr); border:1px solid var(--bdr-strong); display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:var(--t2); }
.pillar-tag { font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); background:var(--accent-muted); border:1px solid var(--bdr-accent); padding:.2rem .7rem; border-radius:var(--r-full); width:fit-content; }
.pillar h3 { font-size:var(--t-lg); font-weight:700; }
.pillar p { font-size:var(--t-sm); line-height:1.7; flex:1; }

/* ─── BEFORE/AFTER ──────────────────────────────────────────── */
.before-after {
    background:var(--bg-card); border:1px solid var(--bdr);
    border-radius:var(--r-2xl); padding:var(--s8); margin-bottom:var(--s8);
}
.ba-header {
    display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
    margin-bottom:var(--s6); padding-bottom:var(--s6); border-bottom:1px solid var(--bdr);
}
.ba-scenario {
    display:flex; align-items:center; gap:var(--s3); flex:1;
    font-family:var(--fD); font-size:var(--t-base); font-weight:700;
}
.ba-scenario.neg i { color:var(--red); }
.ba-scenario.pos i { color:var(--green); }
.ba-rate { font-size:var(--t-xs); font-weight:600; padding:.25rem .7rem; border-radius:var(--r-full); margin-left:auto; }
.neg-rate { background:var(--red-muted); color:var(--red); }
.pos-rate { background:var(--green-muted); color:var(--green); }
.ba-vs { font-size:1.5rem; color:var(--t3); }
.ba-body { display:grid; grid-template-columns:1fr; gap:var(--s6); margin-bottom:var(--s6); }
@media(min-width:640px){ .ba-body { grid-template-columns:1fr 1fr; } }
.ba-col {}
.ba-list { display:flex; flex-direction:column; gap:var(--s3); }
.ba-list li { display:flex; align-items:center; gap:var(--s3); font-size:var(--t-sm); color:var(--t2); }
.ba-col-neg .ba-list li i { color:var(--red); }
.ba-col-pos .ba-list li i { color:var(--green); }
.ba-bar-wrap {}
.ba-label-row { display:flex; justify-content:space-between; align-items:center; font-size:var(--t-xs); color:var(--t3); margin-bottom:var(--s2); }
.ba-reduction { font-weight:700; color:var(--green); }
.ba-track { height:8px; background:var(--bdr-strong); border-radius:var(--r-full); overflow:hidden; position:relative; }
.ba-fill-neg { position:absolute; left:0; top:0; height:100%; background:var(--red); border-radius:var(--r-full); opacity:.35; }
.ba-fill-pos { position:absolute; left:0; top:0; height:100%; background:var(--grad-brand); border-radius:var(--r-full); transition:width 1.5s var(--ease); }

/* ─── COMPLIANCE CALLOUT ─────────────────────────────────────── */
.compliance-callout {
    display:flex; align-items:flex-start; gap:var(--s5);
    background:var(--bg-card); border:1px solid var(--bdr);
    border-left:3px solid var(--green);
    border-radius:var(--r-xl); padding:var(--s6) var(--s8);
}
.cc-icon { width:44px; height:44px; border-radius:var(--r-md); background:var(--green-muted); border:1px solid rgba(34,211,160,.2); display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--green); flex-shrink:0; }
.cc-body h4 { font-size:var(--t-base); font-weight:700; margin-bottom:var(--s2); }
.cc-body p { font-size:var(--t-sm); margin-bottom:var(--s4); }
.cc-badges { display:flex; gap:var(--s2); flex-wrap:wrap; }
.cc-badge { display:inline-flex; align-items:center; gap:var(--s1); font-size:var(--t-xs); font-weight:600; color:var(--green); background:var(--green-muted); border:1px solid rgba(34,211,160,.2); padding:.2rem .65rem; border-radius:var(--r-full); }

/* ─── ROULETTE SECTION ───────────────────────────────────────── */
.roulette-section {
    position:relative; overflow:hidden;
}
.roulette-bg { position:absolute; inset:0; pointer-events:none; }
.rbg-glow { position:absolute; border-radius:var(--r-full); filter:blur(100px); }
.rbg-1 { width:500px; height:500px; top:50%; left:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(14,207,179,.12) 0%, transparent 70%); }
.rbg-2 { width:400px; height:400px; bottom:-100px; right:-100px; background:radial-gradient(circle, rgba(129,140,248,.08) 0%, transparent 70%); }

.roulette-supp { font-size:var(--t-sm); color:var(--t3); font-style:italic; margin-top:var(--s4); }

.roulette-layout {
    display:grid; grid-template-columns:1fr;
    gap:var(--s12); align-items:start;
    margin-bottom:var(--s12);
}
@media(min-width:900px){ .roulette-layout { grid-template-columns:1fr 1fr; align-items:center; } }

/* Roulette frame */
.roulette-wrap { display:flex; flex-direction:column; align-items:center; gap:var(--s6); position:relative; z-index:1; }
.roulette-frame { position:relative; display:flex; align-items:center; justify-content:center; }
.roulette-pointer {
    position:absolute; top:-18px; left:50%; transform:translateX(-50%);
    z-index:10; filter:drop-shadow(0 4px 8px rgba(14,207,179,.5));
}
.roulette-ring-outer {
    position:absolute; inset:-10px;
    border-radius:var(--r-full);
    border:2px solid var(--bdr-accent);
    box-shadow:0 0 30px rgba(14,207,179,.15), inset 0 0 30px rgba(14,207,179,.05);
    pointer-events:none;
}
#roulette-canvas {
    border-radius:var(--r-full);
    cursor:pointer;
    filter:drop-shadow(0 0 40px rgba(14,207,179,.15));
    max-width:min(480px, 100%);
    height:auto;
    transition:transform var(--dur-f);
}
#roulette-canvas:hover { transform:scale(1.01); }
.roulette-hub {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:56px; height:56px; border-radius:var(--r-full);
    background:var(--bg);
    border:2px solid var(--accent);
    display:flex; align-items:center; justify-content:center;
    z-index:5;
    box-shadow:0 0 20px rgba(14,207,179,.3);
}
.hub-logo { font-family:var(--fD); font-size:var(--t-sm); font-weight:800; color:var(--accent); }

.roulette-controls { display:flex; gap:var(--s3); flex-wrap:wrap; justify-content:center; }
.btn-spin {
    display:flex; align-items:center; gap:var(--s3);
    background:var(--grad-brand); color:#fff;
    padding:.85rem 2rem; border-radius:var(--r-xl);
    font-family:var(--fD); font-weight:700; font-size:var(--t-base);
    border:none; cursor:pointer;
    box-shadow:0 6px 30px var(--accent-glow);
    transition:all var(--dur-f) var(--ease);
    letter-spacing:-.01em;
}
.btn-spin:hover { transform:translateY(-2px); box-shadow:0 10px 40px var(--accent-glow); filter:brightness(1.08); }
.btn-spin:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-spin i { font-size:1.25rem; }
.btn-reset {
    display:flex; align-items:center; gap:var(--s2);
    background:none; border:1px solid var(--bdr-strong);
    color:var(--t2); padding:.75rem 1.4rem;
    border-radius:var(--r-xl); font-weight:600; font-size:var(--t-sm);
    cursor:pointer; transition:all var(--dur-f);
}
.btn-reset:hover { border-color:var(--t2); color:var(--t1); }

/* Roulette result panel */
.roulette-result {
    background:var(--bg-card); border:1px solid var(--bdr-strong);
    border-radius:var(--r-2xl); padding:var(--s10);
    display:flex; flex-direction:column; gap:var(--s5);
    opacity:0; transform:translateX(30px);
    transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.roulette-result.show { opacity:1; transform:translateX(0); }

.result-eyebrow {
    display:inline-flex; align-items:center; gap:var(--s2);
    font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    color:var(--accent); background:var(--accent-muted); border:1px solid var(--bdr-accent);
    padding:.3rem .85rem; border-radius:var(--r-full); width:fit-content;
}
.result-kpi {
    font-family:var(--fD); font-size:5rem; font-weight:900;
    letter-spacing:-.06em; line-height:1;
    background:var(--grad-brand); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text;
}
.result-headline { font-size:var(--t-2xl); font-weight:800; letter-spacing:-.03em; margin-top:calc(var(--s2) * -1); }
.result-body { font-size:var(--t-sm); color:var(--t2); line-height:1.7; }
.result-meta { display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5) 0; border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr); }
.rm-row { display:flex; justify-content:space-between; align-items:center; }
.rm-label { font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--t3); }
.rm-val { font-size:var(--t-sm); font-weight:600; color:var(--t2); }
.rm-val.teal { color:var(--accent); }

/* Discovery cards */
.discovery-cards {
    display:grid; grid-template-columns:1fr; gap:var(--s4);
    opacity:0; transform:translateY(20px);
    transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
    margin-bottom:var(--s6);
}
@media(min-width:768px){ .discovery-cards { grid-template-columns:repeat(3,1fr); } }
.discovery-cards.show { opacity:1; transform:translateY(0); }

.dc-card {
    background:var(--bg-card); border:1px solid var(--bdr);
    border-radius:var(--r-xl); padding:var(--s8);
    display:flex; flex-direction:column; gap:var(--s4);
    transition:all var(--dur-b) var(--ease);
}
.dc-card:hover { border-color:var(--bdr-strong); transform:translateY(-2px); box-shadow:var(--sh-md); }
.dc-card.dc-featured { border-color:var(--bdr-accent); background:linear-gradient(135deg, rgba(14,207,179,.06) 0%, var(--bg-card) 60%); }
.dc-ico { width:44px; height:44px; border-radius:var(--r-md); background:var(--bdr); border:1px solid var(--bdr-strong); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--t2); }
.dc-ico.featured { background:var(--accent-muted); border-color:var(--bdr-accent); color:var(--accent); }
.dc-tag { font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--t3); }
.dc-tag.teal { color:var(--accent); }
.dc-card h4 { font-size:var(--t-base); font-weight:700; line-height:1.3; }
.dc-card p { font-size:var(--t-sm); line-height:1.65; }
.dc-stat-display { font-family:var(--fD); font-size:3rem; font-weight:900; letter-spacing:-.05em; line-height:1; background:var(--grad-brand); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-top:auto; }

.roulette-cta {
    display:flex; gap:var(--s4); flex-wrap:wrap; justify-content:center;
    opacity:0; transition:opacity var(--dur-s) var(--ease); margin-top:var(--s4);
}
.roulette-cta.show { opacity:1; }

/* Confetti canvas */
#confetti-canvas {
    position:absolute; inset:0; pointer-events:none; z-index:10;
    width:100%; height:100%;
}

/* ─── COMPETITOR GRID ───────────────────────────────────────── */
.eco-tabs { display:flex; gap:var(--s2); flex-wrap:wrap; border-bottom:1px solid var(--bdr); padding-bottom:var(--s4); margin-bottom:var(--s8); }
.eco-tab {
    background:none; border:1px solid var(--bdr); color:var(--t2);
    font-size:var(--t-sm); font-weight:500; padding:.45rem 1.1rem;
    border-radius:var(--r-md); cursor:pointer;
    display:flex; align-items:center; gap:var(--s2);
    transition:all var(--dur-f) var(--ease);
}
.eco-tab:hover { border-color:var(--bdr-strong); color:var(--t1); }
.eco-tab.active { background:var(--t1); color:var(--t-inv); border-color:var(--t1); }

.comp-grid { display:grid; grid-template-columns:1fr; gap:var(--s4); }
@media(min-width:640px){ .comp-grid { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .comp-grid { grid-template-columns:repeat(3,1fr); } }

.cc {
    display:flex; flex-direction:column; gap:var(--s3);
    background:var(--bg-card); border:1px solid var(--bdr);
    border-radius:var(--r-lg); padding:var(--s6);
    transition:all var(--dur-b) var(--ease);
    text-decoration:none; position:relative; overflow:hidden;
}
.cc::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad-brand); opacity:0; transition:opacity var(--dur-b); }
.cc:hover { border-color:var(--bdr-strong); transform:translateY(-3px); box-shadow:var(--sh-md); }
.cc:hover::before { opacity:1; }
.cc.hidden { display:none; }
.cc-top { display:flex; align-items:center; justify-content:space-between; }
.cc-badge { font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:.2rem .65rem; border-radius:var(--r-full); }
.cc-badge.billing { background:rgba(96,165,250,.12); color:#60A5FA; }
.cc-badge.loyalty { background:rgba(167,139,250,.12); color:#A78BFA; }
.cc-badge.indirect { background:rgba(156,163,175,.1); color:#9CA3AF; }
.cc-arrow { color:var(--t3); font-size:1.1rem; transition:all var(--dur-f); }
.cc:hover .cc-arrow { color:var(--accent); transform:translate(2px,-2px); }
.cc h4 { font-size:var(--t-base); font-weight:700; }
.cc p { font-size:var(--t-sm); color:var(--t2); line-height:1.6; flex:1; }
.cc code { align-self:flex-start; }

/* ─── MATRIX ────────────────────────────────────────────────── */
.matrix-layout { display:grid; grid-template-columns:1fr; gap:var(--s6); }
@media(min-width:1024px){ .matrix-layout { grid-template-columns:1fr 320px; align-items:start; } }

.matrix-table-wrap {
    background:var(--bg-card); border:1px solid var(--bdr);
    border-radius:var(--r-2xl); overflow:hidden; overflow-x:auto;
}
.matrix-table { width:100%; border-collapse:collapse; text-align:left; min-width:560px; }
.matrix-table thead tr { background:var(--bg-mid); border-bottom:1px solid var(--bdr); }
.matrix-table th { padding:var(--s4) var(--s5); font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--t3); }
.matrix-table td { padding:var(--s4) var(--s5); font-size:var(--t-sm); color:var(--t2); border-bottom:1px solid var(--bdr); }
.matrix-table tbody tr { cursor:pointer; transition:background var(--dur-f); }
.matrix-table tbody tr:hover { background:var(--bg-card-h); }
.matrix-table tbody tr:last-child td { border-bottom:none; }
.mt-promo { background:rgba(14,207,179,.04); }
.mt-promo td { color:var(--t1); font-weight:500; }
.player-dot { display:inline-block; width:7px; height:7px; border-radius:var(--r-full); background:var(--accent); box-shadow:0 0 6px var(--accent); margin-right:var(--s2); vertical-align:middle; }
.matrix-table tbody tr.active-row { background:rgba(14,207,179,.06) !important; }

.matrix-insight {
    background:var(--bg-card); border:1px solid var(--bdr);
    border-radius:var(--r-2xl); padding:var(--s8);
    position:sticky; top:136px;
    min-height:220px; display:flex; align-items:center;
    transition:all var(--dur-b);
}
.mi-idle { display:flex; flex-direction:column; align-items:center; gap:var(--s4); text-align:center; width:100%; }
.mi-idle-ico { font-size:2rem; color:var(--t3); animation:bob 3s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }
.mi-idle p { font-size:var(--t-sm); color:var(--t3); max-width:20ch; line-height:1.5; }
.mi-active { display:flex; flex-direction:column; gap:var(--s5); width:100%; }
.mi-player-tag { font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); background:var(--accent-muted); border:1px solid var(--bdr-accent); padding:.3rem .8rem; border-radius:var(--r-full); width:fit-content; }
.mi-text { font-size:var(--t-sm); color:var(--t2); line-height:1.7; }
.mi-badge { display:flex; align-items:center; gap:var(--s2); font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--green); padding-top:var(--s4); border-top:1px solid var(--bdr); }

/* ─── CAPITAL ────────────────────────────────────────────────── */
.capital-grid { display:grid; grid-template-columns:1fr; gap:var(--s4); margin-bottom:var(--s8); }
@media(min-width:768px){ .capital-grid { grid-template-columns:1fr 1fr; } }
.capital-panel { background:var(--bg-card); border:1px solid var(--bdr); border-radius:var(--r-2xl); overflow:hidden; }
.cap-hdr { display:flex; align-items:center; gap:var(--s3); padding:var(--s5) var(--s6); border-bottom:1px solid var(--bdr); font-size:var(--t-sm); font-weight:700; color:var(--t2); background:var(--bg-mid); }
.cap-hdr i { color:var(--accent); }
.acc { border-bottom:1px solid var(--bdr); }
.acc:last-child { border-bottom:none; }
.acc > summary { padding:var(--s4) var(--s6); font-size:var(--t-sm); font-weight:600; color:var(--t2); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; transition:all var(--dur-f); }
.acc > summary::-webkit-details-marker { display:none; }
.acc > summary::after { content:'+'; font-size:1.2rem; color:var(--t3); }
.acc[open] > summary::after { content:'−'; }
.acc > summary:hover { color:var(--t1); background:var(--bg-card-h); }
.acc-body { padding:0 var(--s6) var(--s5); font-size:var(--t-sm); color:var(--t2); line-height:1.7; }

.vcf-box { background:var(--bg-card); border:1px solid var(--bdr); border-radius:var(--r-2xl); overflow:hidden; margin-bottom:var(--s12); }
.vcf-hdr { padding:var(--s5) var(--s8); border-bottom:1px solid var(--bdr); font-size:var(--t-xs); font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--t3); background:var(--bg-mid); }
.vcf-grid { display:grid; grid-template-columns:1fr; }
@media(min-width:768px){ .vcf-grid { grid-template-columns:1fr 1px 1fr; } }
.vcf-node { display:flex; flex-direction:column; gap:var(--s5); padding:var(--s8); }
@media(min-width:768px){ .vcf-node { flex-direction:row; gap:var(--s6); } }
.vcf-div { background:var(--bdr); width:100%; height:1px; }
@media(min-width:768px){ .vcf-div { width:1px; height:auto; } }
.vcf-ico { width:48px; height:48px; border-radius:var(--r-lg); background:var(--accent-muted); border:1px solid var(--bdr-accent); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--accent); flex-shrink:0; }
.vcf-node h4 { font-size:var(--t-lg); font-weight:700; margin-bottom:var(--s3); }
.vcf-node p { font-size:var(--t-sm); margin-bottom:var(--s5); }
.vcf-list { display:flex; flex-direction:column; gap:var(--s2); }
.vcf-list li { display:flex; align-items:center; gap:var(--s3); font-size:var(--t-sm); color:var(--t2); }
.vcf-list li i { color:var(--green); flex-shrink:0; }

/* Final CTA */
.final-cta {
    text-align:center; padding:var(--s12) var(--s8);
    background:linear-gradient(135deg, rgba(14,207,179,.06) 0%, rgba(129,140,248,.04) 100%);
    border:1px solid var(--bdr-accent); border-radius:var(--r-2xl);
}
.final-cta h3 { font-size:var(--t-3xl); font-weight:800; margin-bottom:var(--s4); }
.final-cta p { font-size:var(--t-base); color:var(--t2); max-width:50ch; margin:0 auto var(--s8); }
.final-cta-actions { display:flex; gap:var(--s4); flex-wrap:wrap; justify-content:center; }

/* ─── POSITIONING CARD ────────────────────────────────────────── */
.positioning-card {
    background: linear-gradient(135deg, rgba(14,207,179,.05) 0%, var(--bg-card) 100%);
    border: 1px solid var(--bdr-accent);
    border-radius: var(--r-xl);
    padding: var(--s8);
    margin-bottom: var(--s12);
    box-shadow: var(--sh-md);
}
.pc-guarda-chuva {
    margin-bottom: var(--s6);
    padding-bottom: var(--s6);
    border-bottom: 1px solid var(--bdr);
}
.pc-guarda-chuva h3 {
    font-size: clamp(var(--t-base), 2.2vw, var(--t-xl));
    font-weight: 700;
    line-height: 1.4;
    color: var(--t1);
}
.pc-label {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--s3);
}
.pc-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s8);
}
@media(min-width: 768px) {
    .pc-split { grid-template-columns: 1fr 1.2fr; }
}
.pc-diferencial h4, .pc-narrativa h4 {
    font-family: var(--fD);
    font-size: var(--t-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--accent);
    margin-bottom: var(--s3);
}
.pc-diferencial p {
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--t2);
}
.pc-narrative-list {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}
.pc-narrative-list li {
    font-size: var(--t-sm);
    color: var(--t2);
    position: relative;
    padding-left: var(--s5);
}
.pc-narrative-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

/* ─── SEGMENT ICP TABS ────────────────────────────────────────── */
.seg-tabs {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
    margin-bottom: var(--s8);
    border-bottom: 1px solid var(--bdr);
    padding-bottom: var(--s4);
}
.seg-tab {
    background: none;
    border: 1px solid var(--bdr);
    color: var(--t2);
    font-size: var(--t-sm);
    font-weight: 600;
    padding: .5rem 1.2rem;
    border-radius: var(--r-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--s2);
    transition: all var(--dur-f) var(--ease);
}
.seg-tab:hover {
    border-color: var(--bdr-strong);
    color: var(--t1);
}
.seg-tab.active {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
.seg-panels {
    min-height: 380px;
}
.seg-panel {
    display: none;
    animation: fadeIn var(--dur-s) var(--ease) forwards;
}
.seg-panel.active {
    display: block;
}
.seg-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s8);
}
@media(min-width: 900px) {
    .seg-grid { grid-template-columns: 1fr 1.1fr; }
}
.seg-info {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}
.seg-badge {
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-muted);
    border: 1px solid var(--bdr-accent);
    padding: .2rem .7rem;
    border-radius: var(--r-full);
    width: fit-content;
}
.seg-info h3 {
    font-size: var(--t-xl);
    font-weight: 800;
}
.seg-pain, .seg-promise {
    font-size: var(--t-sm);
    line-height: 1.65;
}
.seg-metrics {
    display: flex;
    gap: var(--s4);
    margin-top: var(--s4);
}
.sm-item {
    background: var(--bg-card);
    border: 1px solid var(--bdr);
    padding: var(--s4) var(--s5);
    border-radius: var(--r-lg);
    flex: 1;
    text-align: center;
}
.sm-num {
    display: block;
    font-family: var(--fD);
    font-size: var(--t-xl);
    font-weight: 800;
    color: var(--accent);
}
.sm-desc {
    font-size: var(--t-xs);
    color: var(--t3);
}
.seg-details {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}
.sd-box {
    background: var(--bg-card);
    border: 1px solid var(--bdr-strong);
    border-radius: var(--r-xl);
    padding: var(--s6);
}
.sd-box h4 {
    font-size: var(--t-sm);
    text-transform: uppercase;
    color: var(--t1);
    margin-bottom: var(--s4);
}
.sd-list {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}
.sd-list li {
    font-size: var(--t-sm);
    color: var(--t2);
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
}
.sd-list li i {
    color: var(--accent);
    margin-top: 3px;
}
.sd-case {
    background: var(--accent-muted);
    border: 1px solid var(--bdr-accent);
    border-radius: var(--r-xl);
    padding: var(--s5);
    position: relative;
}
.sd-case h5 {
    font-size: var(--t-xs);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--s2);
}
.sd-case p {
    font-size: var(--t-sm);
    font-style: italic;
    color: var(--t2);
}

/* ─── ROI SIMULATOR ───────────────────────────────────────────── */
.roi-simulator {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s8);
    background: var(--bg-card);
    border: 1px solid var(--bdr-strong);
    border-radius: var(--r-2xl);
    padding: var(--s8);
}
@media(min-width: 900px) {
    .roi-simulator { grid-template-columns: 1fr 1.3fr; }
}
.roi-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--s6);
}
.roi-inputs h4, .roi-outputs h4 {
    font-family: var(--fD);
    font-size: var(--t-base);
    font-weight: 700;
    margin-bottom: var(--s3);
    color: var(--t1);
}
.roi-control-group {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}
.roi-control-group label {
    font-size: var(--t-sm);
    color: var(--t2);
    font-weight: 500;
}
.roi-control-group input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
    height: 6px;
    background: var(--bg-mid);
    border-radius: var(--r-full);
    outline: none;
    cursor: pointer;
}
.roi-val-display {
    font-family: var(--fM);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--accent);
}
.roi-outputs {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}
.roi-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s4);
}
@media(min-width: 600px) {
    .roi-cards { grid-template-columns: repeat(3, 1fr); }
}
.roi-card {
    background: var(--bg-mid);
    border: 1px solid var(--bdr);
    border-radius: var(--r-xl);
    padding: var(--s5);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all var(--dur-f);
}
.roi-card.featured {
    border-color: var(--bdr-accent);
    background: linear-gradient(135deg, rgba(14,207,179,.04) 0%, var(--bg-mid) 100%);
    box-shadow: var(--sh-accent);
}
.rc-label {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--t3);
    margin-bottom: var(--s2);
}
.rc-gain {
    font-family: var(--fD);
    font-size: var(--t-lg);
    font-weight: 800;
    margin-bottom: var(--s1);
}
.rc-annual {
    font-size: var(--t-xs);
    color: var(--t2);
}
.roi-note {
    font-size: var(--t-xs);
    color: var(--t3);
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s2);
}
.roi-note i {
    color: var(--accent);
}

/* ─── MESSAGING & CHANNELS ───────────────────────────────────── */
.aud-tabs-container {
    background: var(--bg-card);
    border: 1px solid var(--bdr);
    border-radius: var(--r-2xl);
    padding: var(--s8);
    margin-bottom: var(--s10);
}
.aud-tabs {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
    border-bottom: 1px solid var(--bdr);
    padding-bottom: var(--s4);
    margin-bottom: var(--s6);
}
.aud-tab {
    background: none;
    border: 1px solid var(--bdr);
    color: var(--t2);
    font-size: var(--t-sm);
    font-weight: 600;
    padding: .45rem 1.1rem;
    border-radius: var(--r-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--s2);
    transition: all var(--dur-f);
}
.aud-tab:hover {
    border-color: var(--bdr-strong);
    color: var(--t1);
}
.aud-tab.active {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
.aud-panel {
    display: none;
    animation: fadeIn var(--dur-s) var(--ease) forwards;
}
.aud-panel.active {
    display: block;
}
.ap-quote {
    background: var(--bg-mid);
    border-left: 3px solid var(--accent);
    padding: var(--s4) var(--s5);
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    margin-bottom: var(--s5);
}
.ap-quote-text {
    font-size: var(--t-base);
    font-style: italic;
    color: var(--t1);
    line-height: 1.5;
}
.ap-bullets {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}
.ap-bullets li {
    font-size: var(--t-sm);
    color: var(--t2);
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
}
.ap-bullets li i {
    color: var(--accent);
    margin-top: 3px;
}

.channels-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s4);
}
@media(min-width: 640px) {
    .channels-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(min-width: 1024px) {
    .channels-grid { grid-template-columns: repeat(4, 1fr); }
}
.channel-card {
    background: var(--bg-card);
    border: 1px solid var(--bdr);
    border-radius: var(--r-xl);
    padding: var(--s6);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    transition: border-color var(--dur-b);
}
.channel-card:hover {
    border-color: var(--bdr-accent);
}
.cc-hdr-ico {
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    background: var(--accent-muted);
    border: 1px solid var(--bdr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--accent);
}
.channel-card h4 {
    font-size: var(--t-sm);
    font-weight: 700;
}
.channel-card p {
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--t2);
}
.channel-card ul {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}
.channel-card ul li {
    font-size: var(--t-xs);
    color: var(--t2);
    display: flex;
    align-items: flex-start;
    gap: var(--s1);
}
.channel-card ul li i {
    color: var(--accent);
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.site-footer { background:var(--bg-mid); border-top:1px solid var(--bdr); padding:var(--s12) 0; }
.footer-inner { display:flex; flex-direction:column; gap:var(--s6); }
@media(min-width:768px){ .footer-inner { flex-direction:row; align-items:center; justify-content:space-between; } }
.footer-brand { display:flex; flex-direction:column; gap:var(--s2); }
.footer-brand p { font-size:var(--t-xs); color:var(--t3); }
.footer-nav { display:flex; gap:var(--s6); flex-wrap:wrap; }
.footer-nav a { font-size:var(--t-sm); color:var(--t3); transition:color var(--dur-f); }
.footer-nav a:hover { color:var(--t1); }
.footer-copy { font-size:var(--t-xs); color:var(--t3); }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:767px){
    .site-nav { display:none; }
    .nav-hamburger { display:flex; }
    .section { padding:var(--s16) 0; }
    .section-intro { flex-direction:column; gap:var(--s4); }
    .hero-actions { flex-direction:column; align-items:flex-start; }
    .stat-pills { gap:var(--s2); }
    .pb-divider { display:none; }
    .roulette-layout { gap:var(--s8); }
    .final-cta-actions { flex-direction:column; align-items:center; }
    .float-badge { display:none; }
    .matrix-insight { position:static; }
}