/* ========== TOKENS (dark theme) ========== */
:root{
    /* Surfaces */
    --ink-0:        #121212; /* page base */
    --ink-1:        #181818; /* alternating section */
    --surface:      #1e1e1e; /* cards */
    --surface-hover:#252525;
    --line:         rgba(255,255,255,.09);
    --line-strong:  rgba(255,255,255,.20);

    /* Text */
    --cream:        #faf8f1; /* primary text on dark */
    --cream-dim:    rgba(250,248,241,.64);
    --cream-faint:  rgba(250,248,241,.40);

    /* Accents: pulled from the Build Launch palette, repurposed for dark */
    --gold:         #B4B671; /* was --green-light, now primary luxury accent */
    --gold-dim:     rgba(180,182,113,.14);
    --forest:       #4F6E4C; /* secondary accent */
    --forest-dim:   rgba(79,110,76,.18);
    --slate:        #91A8BD; /* lightened from --blue #566E8A for legibility on dark */
    --slate-dim:    rgba(86,110,138,.18);

    /* Partner-brand accents: used only on their own logo chips, not the site-wide accent */
    --claude-accent:     #CC785C; /* approximation of Claude's clay/terracotta, swap for the exact brand hex if you have it */
    --claude-accent-dim: rgba(204,120,92,.16);
    --wunderbuild-accent:     #34ca50;
    --wunderbuild-accent-dim: rgba(52,202,80,.16);

    /* Claude's light cream, used only for the one "breather" light section */
    --claude-bg:        #F0EEE6; /* approximation of Claude's product background, swap for the exact hex if you have it */
    --claude-grid-line: rgba(0,0,0,.035);
    --claude-ink:       #1c1b18;
    --claude-ink-dim:   rgba(28,27,24,.62);

    --shadow-sm:   0 2px 10px rgba(0,0,0,.35);
    --shadow-md:   0 12px 34px rgba(0,0,0,.45);
    --shadow-lg:   0 26px 64px rgba(0,0,0,.55);
    --radius-card: 10px;
    --transition:  0.3s cubic-bezier(0.4,0,0.2,1);

    /* Shared blueprint-grid texture, layered into section backgrounds */
    --grid-line: rgba(255,255,255,.035);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
    font-family:'Poppins',sans-serif;
    background:var(--ink-0);
    color:var(--cream);
    line-height:1.7;
    font-size:15px;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.mono{font-family:'JetBrains Mono',monospace;}

/* ========== UTILITIES ========== */
.container{max-width:1140px;margin:0 auto;padding:0 2rem;}
.section{padding:96px 0;position:relative;}
.section-sm{padding:56px 0;position:relative;}

/* Shared blueprint-grid texture for plain (non-hero) sections */
.problem,.blocks,.practice,.stack,.scarcity,.addon{
    background-color:var(--ink-1);
    background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                      linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
    background-size:64px 64px;
}
.blocks,.stack{ background-color:var(--ink-0); }

/* Modern kicker label: replaces the filled pill */
.label{
    display:inline-flex;align-items:center;gap:10px;
    color:var(--gold);font-size:11px;font-weight:600;
    letter-spacing:.22em;text-transform:uppercase;margin-bottom:22px;
}
.divider-line{width:40px;height:2px;background:var(--gold);margin-bottom:26px;opacity:.55;}
.divider-line.center{margin-left:auto;margin-right:auto;}
.section-head{max-width:680px;margin-bottom:56px;}
.section-head.centered{margin-left:auto;margin-right:auto;text-align:center;}
.section-title{font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:700;color:var(--cream);line-height:1.2;margin-bottom:14px;}
.section-title.long{font-size:clamp(1.55rem,2.6vw,2.25rem);line-height:1.3;}
.section-title span{color:var(--gold);}
.heading-wb{font-style:normal;display:inline-flex;align-items:center;gap:0.12em;color:var(--wunderbuild-accent);}
.heading-wb-logo{height:0.72em;width:auto;object-fit:contain;}
.section-sub{font-size:1rem;color:var(--cream-dim);line-height:1.8;}

/* ========== BUTTONS: rectangular, restrained, no curve ========== */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:16px 34px;border-radius:0;font-family:'Poppins',sans-serif;
    font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    cursor:pointer;border:1px solid transparent;transition:var(--transition);
    text-decoration:none;
}
.btn-gold{background:var(--gold);color:#141310;border-color:var(--gold);}
.btn-gold:hover{background:transparent;color:var(--gold);transform:translateY(-1px);}
.btn-outline-light{background:transparent;color:var(--cream);border-color:var(--line-strong);}
.btn-outline-light:hover{border-color:var(--gold);color:var(--gold);}
.btn-primary{background:var(--surface);color:var(--cream);border-color:var(--line-strong);}
.btn-primary:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px);}

.fade-up{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
.fade-up.visible{opacity:1;transform:translateY(0);}
.fade-up[data-delay="1"]{transition-delay:.05s;}
.fade-up[data-delay="2"]{transition-delay:.12s;}
.fade-up[data-delay="3"]{transition-delay:.19s;}
.fade-up[data-delay="4"]{transition-delay:.26s;}
.fade-up[data-delay="5"]{transition-delay:.33s;}
.fade-up[data-delay="6"]{transition-delay:.40s;}
.fade-up[data-delay="7"]{transition-delay:.47s;}
.fade-up[data-delay="8"]{transition-delay:.54s;}

/* ========== MINI BAR ========== */
.bar{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:0 2rem;background:rgba(18,18,18,.86);backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.bar-inner{max-width:1140px;margin:0 auto;height:68px;display:flex;align-items:center;justify-content:space-between;}
.bar-logo img{height:32px;width:auto;}
.bar-cta{font-size:12px !important;padding:11px 22px !important;}

/* ========== HERO ========== */
.hero{
    min-height:100vh;display:flex;align-items:center;
    position:relative;overflow:hidden;padding:150px 0 90px;
    background-color:var(--ink-0);
    background-image:
        radial-gradient(ellipse 55% 65% at 12% 18%, var(--gold-dim) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 92% 88%, var(--slate-dim) 0%, transparent 60%),
        linear-gradient(var(--grid-line) 1px,transparent 1px),
        linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
    background-size:auto,auto,64px 64px,64px 64px;
}
.hero-bg-layer{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:880px;margin:0 auto;}
.hero-brandrow{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:40px;}
.hero-brandrow .x{color:rgba(250,248,241,.45);font-size:26px;font-weight:300;}
.hero-mark{display:flex;align-items:center;gap:13px;font-weight:700;font-size:26px;color:var(--cream);letter-spacing:.01em;}
.hero-mark-logo{height:46px;width:auto;object-fit:contain;}
.hero-title{font-size:clamp(1.8rem,3.6vw,2.85rem);font-weight:800;color:var(--cream);line-height:1.22;letter-spacing:-.015em;margin-bottom:24px;}
.hero-title em{font-style:normal;color:var(--gold);}
.hero-sub{font-size:1.08rem;color:rgba(250,248,241,.88);line-height:1.8;max-width:640px;margin:0 auto 38px;}
.hero-sub strong{color:var(--cream);}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;}
.hero-fine{font-size:12.5px;color:rgba(250,248,241,.60);max-width:520px;margin:0 auto;line-height:1.7;}

/* Video / demo frame */
.hero-video{
    margin:56px auto 0;max-width:820px;border-radius:var(--radius-card);overflow:hidden;
    border:1px solid var(--line);box-shadow:var(--shadow-lg);
    position:relative;aspect-ratio:16/9;background:#0c0c0c;
}
.hero-video iframe{width:100%;height:100%;border:0;display:block;}
.hero-video video{width:100%;height:100%;border:0;display:block;background:#000;object-fit:cover;}
.hero-video-placeholder{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    background:linear-gradient(160deg,rgba(180,182,113,.10),rgba(12,12,12,.94));
}
.hero-play{
    width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.08);
    border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;
}
.hero-play svg{width:20px;height:20px;fill:var(--gold);margin-left:3px;}
.hero-video-placeholder span{color:var(--cream-faint);font-size:13px;max-width:360px;text-align:center;line-height:1.6;}

/* ========== PROBLEM ========== */
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.problem-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
    padding:32px 28px;transition:var(--transition);
}
.problem-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--claude-accent);}
.problem-icon{width:48px;height:48px;border-radius:11px;background:var(--claude-accent-dim);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.problem-icon svg{width:24px;height:24px;fill:var(--claude-accent);}
.problem-title{font-size:16px;font-weight:700;color:var(--cream);margin-bottom:10px;}
.problem-desc{font-size:13.5px;color:var(--cream-dim);line-height:1.75;text-align:justify;}

/* ========== MCP BUILDING BLOCKS ========== */
.blocks-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.block-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
    padding:26px 18px;text-align:center;transition:var(--transition);position:relative;overflow:hidden;
}
.block-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transition:var(--transition);}
.block-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--line-strong);}
.block-card:hover::after{transform:scaleX(1);}
.block-icon{width:48px;height:48px;border-radius:11px;background:var(--wunderbuild-accent-dim);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.block-icon svg{width:22px;height:22px;fill:var(--wunderbuild-accent);}
.block-name{font-size:14px;font-weight:700;color:var(--cream);margin-bottom:8px;}
.block-desc{font-size:12px;color:var(--cream-dim);line-height:1.6;}

/* ========== IN PRACTICE (chat bubbles) ========== */
.practice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.practice-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:22px 18px;transition:var(--transition);}
.practice-card:hover{box-shadow:var(--shadow-md);border-color:var(--slate);transform:translateY(-3px);}
.practice-icon{width:24px;height:24px;margin-bottom:14px;}
.practice-icon svg{width:100%;height:100%;fill:var(--slate);}
.practice-q{font-size:13.5px;font-weight:600;color:var(--cream);line-height:1.5;margin-bottom:10px;}
.practice-q span{color:var(--gold);}
.practice-a{font-size:12px;color:var(--cream-dim);line-height:1.6;}

/* ========== HOW IT WORKS (flow) ========== */
.flow{
    background-color:var(--ink-1);position:relative;overflow:hidden;
    background-image:
        radial-gradient(ellipse 45% 55% at 88% 15%, var(--forest-dim) 0%, transparent 60%),
        linear-gradient(var(--grid-line) 1px,transparent 1px),
        linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
    background-size:auto,44px 44px,44px 44px;
}
.flow-wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
.flow-diagram{display:flex;flex-direction:column;gap:0;}
.flow-node{
    background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--radius-card);
    padding:16px 20px;display:flex;align-items:center;gap:14px;
}
.flow-node.active{border-color:rgba(180,182,113,.4);background:var(--gold-dim);}
.flow-node .n{
    width:30px;height:30px;flex-shrink:0;border-radius:6px;background:var(--gold-dim);
    color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.flow-node .t{color:var(--cream);font-size:13.5px;font-weight:600;}
.flow-node .d{color:var(--cream-faint);font-size:12px;margin-top:2px;}
.flow-arrow{display:flex;justify-content:center;padding:6px 0;color:rgba(180,182,113,.5);}
.flow-arrow svg{width:16px;height:16px;fill:currentColor;}
.flow-note{
    margin-top:26px;padding:18px 20px;border-radius:var(--radius-card);
    background:rgba(255,255,255,.025);border:1px solid var(--line);
    color:var(--cream-dim);font-size:12.5px;line-height:1.7;
}
.flow-note strong{color:var(--gold);}
@media (max-width:900px){ .flow-wrap{grid-template-columns:1fr;} }

/* ========== VALUE STACK (the package) ========== */
.stack-intro{max-width:720px;margin:0 auto 56px;text-align:center;}
.stack-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.stack-card{
    position:relative;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius-card);padding:36px 28px 28px;transition:var(--transition);
}
.stack-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--gold);}
.stack-num{
    position:absolute;top:-15px;left:28px;width:34px;height:34px;border-radius:8px;
    background:var(--gold);color:#141310;display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:14px;box-shadow:var(--shadow-sm);
}
.stack-tag{
    display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;
}
.stack-tag::before{content:'';width:14px;height:1px;background:var(--gold);}
.stack-title{font-size:17px;font-weight:700;color:var(--cream);margin-bottom:10px;line-height:1.35;}
.stack-desc{font-size:13.5px;color:var(--cream-dim);line-height:1.75;text-align:justify;}

/* ========== LIGHT SECTION (Claude-cream breather, applied via .light-section) ========== */
.light-section{
    background-color:var(--claude-bg);
    background-image:linear-gradient(var(--claude-grid-line) 1px,transparent 1px),
                      linear-gradient(90deg,var(--claude-grid-line) 1px,transparent 1px);
    background-size:64px 64px;
}
.light-section .label{color:var(--forest);}
.light-section .label::before{background:var(--forest);}
.light-section .divider-line{background:var(--forest);opacity:.7;}
.light-section .section-title{color:var(--claude-ink);}
.light-section .section-title span{color:var(--forest);}
.light-section .section-sub{color:var(--claude-ink-dim);}
.light-section .stack-card{background:#fff;border-color:rgba(0,0,0,.08);}
.light-section .stack-card:hover{border-color:var(--forest);box-shadow:0 16px 40px rgba(0,0,0,.12);}
.light-section .stack-num{background:var(--forest);color:#fff;box-shadow:0 4px 14px rgba(79,110,76,.3);}
.light-section .stack-tag{color:var(--forest);}
.light-section .stack-tag::before{background:var(--forest);}
.light-section .stack-title{color:var(--claude-ink);}
.light-section .stack-desc{color:var(--claude-ink-dim);}

/* ========== GUARANTEES ========== */
.guarantee{
    position:relative;overflow:hidden;
    background-color:var(--ink-0);
    background-image:
        radial-gradient(ellipse 55% 70% at 50% 0%, var(--forest-dim) 0%, transparent 65%),
        linear-gradient(var(--grid-line) 1px,transparent 1px),
        linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
    background-size:auto,64px 64px,64px 64px;
}
.guarantee-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;}
.guarantee-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
    padding:32px 30px;
}
.guarantee-icon{width:48px;height:48px;border-radius:11px;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.guarantee-icon svg{width:22px;height:22px;fill:var(--gold);}
.guarantee-title{font-size:17px;font-weight:700;color:var(--cream);margin-bottom:10px;}
.guarantee-desc{font-size:13.5px;color:var(--cream-dim);line-height:1.75;text-align:justify;}
@media (max-width:900px){ .guarantee-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .guarantee-grid{grid-template-columns:1fr;} }

/* ========== VALUE STACK BREAKDOWN (sharp table, no curve) ========== */
.valuebreak{
    position:relative;overflow:hidden;
    background-color:var(--ink-1);
    background-image:
        radial-gradient(ellipse 50% 60% at 6% 92%, var(--gold-dim) 0%, transparent 60%),
        linear-gradient(var(--grid-line) 1px,transparent 1px),
        linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
    background-size:auto,64px 64px,64px 64px;
}
.vb-table{
    width:100%;border-collapse:collapse;
    border:1px solid var(--line-strong);
    background:var(--surface);
    border-radius:0;
    overflow:hidden;
}
.vb-table thead th{
    text-align:left;padding:18px 28px;
    background:rgba(255,255,255,.03);border-bottom:1px solid var(--line-strong);
    text-transform:uppercase;letter-spacing:.1em;font-size:13px;font-weight:700;color:var(--gold);
}
.vb-table td{
    padding:24px 28px;border-bottom:1px solid var(--line);
    font-size:16.5px;color:var(--cream);line-height:1.65;
}
.vb-table td span{color:var(--cream-dim);font-weight:400;}
.vb-table tbody tr:last-child td{border-bottom:none;}
.vb-value{text-align:right;font-weight:600;white-space:nowrap;}
.vb-value small{display:block;font-size:13px;font-weight:400;color:var(--cream-faint);margin-top:5px;letter-spacing:.02em;}

.vb-total td{background:rgba(255,255,255,.035);font-weight:700;font-size:18px;}

.vb-offer td{background:var(--gold-dim);color:var(--gold);font-weight:700;font-size:19px;position:relative;animation:vb-glow 3s ease-in-out infinite;}
.vb-offer td:first-child::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);}
.vb-offer .vb-value{color:var(--gold);font-size:28px;font-weight:800;}
.vb-offer .vb-value small{color:rgba(180,182,113,.75);font-size:13px;}
@keyframes vb-glow{
    0%,100%{box-shadow:inset 0 0 0 rgba(180,182,113,0);}
    50%{box-shadow:inset 0 0 26px rgba(180,182,113,.16);}
}

.vb-ongoing td{background:#324530;color:var(--cream);font-weight:600;}

/* Section-level fix: .valuebreak's own dark background otherwise wins the cascade
   over the generic .light-section rule since both are single-class selectors of
   equal specificity declared later in the file. This compound selector forces it. */
.valuebreak.light-section{
    background-color:var(--claude-bg);
    background-image:
        radial-gradient(ellipse 45% 55% at 8% 90%, rgba(79,110,76,.08) 0%, transparent 60%),
        linear-gradient(var(--claude-grid-line) 1px,transparent 1px),
        linear-gradient(90deg,var(--claude-grid-line) 1px,transparent 1px);
    background-size:auto,64px 64px,64px 64px;
}

/* Light variant: Claude cream background, Build Launch green as the primary ink/accent,
   Wunderbuild green called out specifically on the header rule and the offer row */
.valuebreak.light-section .vb-table{background:#fff;border-color:rgba(0,0,0,.10);}
.valuebreak.light-section .vb-table thead th{
    background:rgba(79,110,76,.07);color:var(--forest);
    border-bottom:2px solid var(--forest);
}
.valuebreak.light-section .vb-table td{color:var(--claude-ink);border-bottom-color:rgba(0,0,0,.08);}
.valuebreak.light-section .vb-table td span{color:var(--claude-ink-dim);}
.valuebreak.light-section .vb-value small{color:rgba(28,27,24,.45);}
.valuebreak.light-section .vb-total td{background:rgba(79,110,76,.08);color:var(--claude-ink);}
.valuebreak.light-section .vb-offer td{
    background:rgba(79,110,76,.10);color:var(--forest);
    animation:vb-glow-light 3s ease-in-out infinite;
}
.valuebreak.light-section .vb-offer td:first-child::before{background:var(--forest);}
.valuebreak.light-section .vb-offer .vb-value{color:var(--forest);}
.valuebreak.light-section .vb-offer .vb-value small{color:rgba(79,110,76,.65);}
.valuebreak.light-section .vb-ongoing td{background:#324530;color:var(--cream);font-weight:600;}
.valuebreak.light-section .vb-ongoing .vb-value small{color:rgba(250,248,241,.65);}
@keyframes vb-glow-light{
    0%,100%{box-shadow:inset 0 0 0 rgba(79,110,76,0);}
    50%{box-shadow:inset 0 0 22px rgba(79,110,76,.20);}
}

/* Wunderbuild's green kept to a single deliberate touch: a small marker
   on the one line item that's actually the Wunderbuild deliverable */
.wb-dot{display:inline-block;width:7px;height:7px;background:var(--wunderbuild-accent);margin-right:8px;vertical-align:middle;}

@media (max-width:640px){
    .vb-table, .vb-table thead, .vb-table tbody, .vb-table th, .vb-table td, .vb-table tr{display:block;}
    .vb-table thead{display:none;}
    .vb-table tr{border-bottom:1px solid var(--line);}
    .vb-table tr:last-child{border-bottom:none;}
    .vb-table td{border-bottom:none;padding:8px 20px;}
    .vb-table tr td:first-child{padding-top:16px;}
    .vb-table tr td:last-child{padding-bottom:16px;}
    .vb-value{text-align:left;}
    .vb-value small{margin-top:2px;}
    .vb-offer td:first-child::before{left:0;right:0;top:0;bottom:auto;width:auto;height:3px;background:var(--gold);}
    .valuebreak.light-section .vb-offer td:first-child::before{background:var(--forest);}
}

/* ========== FULL AUTOMATION UPSELL ========== */
.wb-flow-connector{
    display:flex;align-items:center;justify-content:center;
    max-width:460px;margin:8px auto 36px;
}
.wb-flow-node{
    display:flex;align-items:center;gap:10px;
    padding:13px 20px;border-radius:0;
    background:var(--surface);border:1px solid;
    font-weight:700;font-size:14px;color:var(--cream);
    white-space:nowrap;position:relative;z-index:2;
}
.wb-flow-claude{
    border-color:rgba(204,120,92,.45);
    box-shadow:0 0 16px rgba(204,120,92,.25);
}
.wb-flow-wunderbuild{
    border-color:rgba(52,202,80,.45);
    box-shadow:0 0 16px rgba(52,202,80,.25);
}
.wb-flow-icon{height:20px;width:20px;object-fit:contain;flex-shrink:0;}

.wb-flow-line{
    position:relative;flex:1;height:2px;min-width:50px;
    background:linear-gradient(90deg, var(--claude-accent), var(--wunderbuild-accent));
    margin:0 -2px;
}
.wb-flow-dot{
    position:absolute;top:50%;left:0;
    width:6px;height:6px;border-radius:50%;
    background:var(--wunderbuild-accent);
    transform:translate(-50%,-50%);
    box-shadow:0 0 6px var(--wunderbuild-accent);
    animation:wbFlowMove 2.4s linear infinite;
    opacity:0;
}
@keyframes wbFlowMove{
    0%{left:0%;opacity:0;}
    12%{opacity:1;}
    88%{opacity:1;}
    100%{left:100%;opacity:0;}
}
@media (max-width:520px){
    .wb-flow-connector{max-width:100%;}
    .wb-flow-node span{display:none;}
    .wb-flow-node{padding:12px;border-radius:0;}
}
.addon-price{
    text-align:center;font-size:15px;font-weight:600;color:var(--cream);
    font-family:'Poppins',sans-serif;line-height:1.7;max-width:520px;margin:0 auto;
    text-shadow:0 0 10px var(--wunderbuild-accent), 0 0 20px rgba(52,202,80,.45);
}
.addon-cta-row{display:flex;justify-content:center;margin-top:26px;}
.btn-wunderops{
    background:linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
    color:#1a1a1a;border-color:rgba(255,255,255,.6);
    box-shadow:
        0 0 22px rgba(52,202,80,.40),
        0 0 44px rgba(52,202,80,.18),
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -2px 2px rgba(0,0,0,.10),
        0 3px 6px rgba(0,0,0,.20);
}
.btn-wunderops:hover{
    color:#1a1a1a;transform:translateY(-1px);
    box-shadow:
        0 0 28px rgba(52,202,80,.55),
        0 0 56px rgba(52,202,80,.25),
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -2px 2px rgba(0,0,0,.10),
        0 4px 10px rgba(0,0,0,.22);
}

.wops-brand-sub{
    display:inline-flex;align-items:center;gap:0.3em;
    color:var(--wunderbuild-accent);font-weight:700;
}
.wops-logo-sub{height:1em;width:1em;object-fit:contain;flex-shrink:0;}

/* Scarcity banner */
.scarcity-inner{
    display:flex;align-items:center;gap:20px;justify-content:space-between;flex-wrap:wrap;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
    padding:26px 32px;
}
.scarcity-text{font-size:14px;color:var(--cream-dim);max-width:600px;line-height:1.7;}
.scarcity-text strong{color:var(--cream);}
.scarcity-meter{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.scarcity-dots{display:flex;gap:6px;}
.scarcity-dot{width:10px;height:10px;border-radius:50%;background:var(--line-strong);}
.scarcity-dot.filled{background:var(--gold);}
.scarcity-label{font-size:12.5px;font-weight:700;color:var(--gold);letter-spacing:.02em;white-space:nowrap;}
@media (max-width:700px){ .scarcity-inner{flex-direction:column;align-items:flex-start;} }

/* ========== FINAL CTA ========== */
.final-cta{
    text-align:center;background-color:#0e0e0e;
    background-image:
        radial-gradient(ellipse 60% 80% at 50% 100%, var(--gold-dim) 0%, transparent 65%),
        linear-gradient(var(--grid-line) 1px,transparent 1px),
        linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
    background-size:auto,64px 64px,64px 64px;
}
.final-cta .section-sub{max-width:520px;margin:0 auto 36px;}
.final-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ========== FOOTER ========== */
footer{background:#0e0e0e;border-top:1px solid var(--line);padding:36px 0;}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.footer-inner img{height:24px;}
.footer-copy{font-size:12px;color:var(--cream-faint);}
.footer-links{display:flex;gap:20px;font-size:12.5px;color:var(--cream-dim);}
.footer-links a:hover{color:var(--gold);}
.footer-powered{
    display:flex;align-items:center;gap:9px;
    padding:9px 16px;border-radius:0;
    background:linear-gradient(180deg, #232323 0%, #1a1a1a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 -1px 2px rgba(0,0,0,.45),
        0 0 14px rgba(52,202,80,.18);
    transition:var(--transition);
}
.footer-powered:hover{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 -1px 2px rgba(0,0,0,.45),
        0 0 22px rgba(52,202,80,.35);
    transform:translateY(-1px);
}
.footer-powered-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-faint);}
.footer-powered-logo{height:18px;width:auto;object-fit:contain;}

/* ========== LEAD CAPTURE MODAL ========== */
.lead-modal-overlay{
    position:fixed;inset:0;z-index:200;
    background:rgba(8,8,8,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;
}
.lead-modal-overlay.open{opacity:1;visibility:visible;transition:opacity .25s ease;}
.lead-modal{
    position:relative;width:100%;max-width:440px;
    max-height:calc(100vh - 48px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-card);
    padding:40px 36px;box-shadow:var(--shadow-lg);
    transform:translateY(16px) scale(.98);opacity:0;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s ease;
}
.lead-modal-overlay.open .lead-modal{transform:translateY(0) scale(1);opacity:1;}
.lead-modal-close{
    position:absolute;top:18px;right:18px;width:32px;height:32px;
    background:transparent;border:1px solid var(--line);color:var(--cream-dim);
    font-size:20px;line-height:1;cursor:pointer;transition:var(--transition);
}
.lead-modal-close:hover{border-color:var(--gold);color:var(--gold);}
.lead-modal-title{font-size:1.4rem;font-weight:700;color:var(--cream);margin-bottom:10px;line-height:1.3;}
.lead-modal-sub{font-size:13.5px;color:var(--cream-dim);line-height:1.7;margin-bottom:28px;}

.lead-form{flex-direction:column;gap:16px;}
.lead-form:not([hidden]){display:flex;}

.lead-loading,.lead-success{flex-direction:column;align-items:center;text-align:center;gap:14px;padding:28px 0 8px;}
.lead-loading:not([hidden]),.lead-success:not([hidden]){display:flex;}
.lead-loading p,.lead-success p{color:var(--cream-dim);font-size:14px;line-height:1.7;max-width:280px;}

.lead-spinner{
    width:34px;height:34px;border:3px solid var(--line-strong);border-top-color:var(--gold);
    border-radius:50%;animation:leadSpin .8s linear infinite;
}
@keyframes leadSpin{to{transform:rotate(360deg);}}

.lead-success-icon{
    width:52px;height:52px;border-radius:50%;
    background:var(--wunderbuild-accent-dim);color:var(--wunderbuild-accent);
    display:flex;align-items:center;justify-content:center;
}
.lead-success-icon svg{width:24px;height:24px;}
.lead-field{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-dim);}
.lead-field em{text-transform:none;font-style:normal;font-weight:400;color:var(--cream-faint);letter-spacing:0;}
.lead-field input,.lead-field textarea{
    font-family:'Poppins',sans-serif;font-size:14.5px;font-weight:400;color:var(--cream);
    background:var(--ink-0);border:1px solid var(--line-strong);border-radius:0;
    padding:13px 14px;letter-spacing:normal;text-transform:none;
    transition:var(--transition);
}
.lead-field textarea{resize:vertical;line-height:1.6;min-height:64px;}
.lead-field input::placeholder,.lead-field textarea::placeholder{color:var(--cream-faint);}
.lead-field input:focus,.lead-field textarea:focus{outline:none;border-color:var(--gold);}
.lead-field input:invalid:not(:placeholder-shown){border-color:var(--claude-accent);}

.lead-submit{width:100%;margin-top:6px;}
.lead-submit[disabled]{opacity:.6;cursor:not-allowed;}
.lead-form-status{font-size:13px;line-height:1.6;min-height:1px;}
.lead-form-status.success{color:var(--wunderbuild-accent);}
.lead-form-status.error{color:var(--claude-accent);}

@media (max-width:480px){
    .lead-modal{padding:32px 24px;}
}

/* ========== RESPONSIVE ========== */
@media (max-width:1024px){
    .blocks-grid{grid-template-columns:repeat(3,1fr);}
    .practice-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:768px){
    .problem-grid{grid-template-columns:1fr;}
    .blocks-grid{grid-template-columns:repeat(2,1fr);}
    .practice-grid{grid-template-columns:repeat(2,1fr);}
    .stack-list{grid-template-columns:1fr;}
    .section{padding:64px 0;}
    .hero{padding:130px 0 64px;}
    .hero-brandrow{gap:12px;}
    .hero-mark{font-size:18px;gap:8px;}
    .hero-mark-logo{height:32px;}
    .hero-brandrow .x{font-size:20px;}
}

/* ========== ACCESSIBILITY ========== */
.visually-hidden{
    position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
a:focus-visible,button:focus-visible{
    outline:2px solid var(--gold);outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
    .fade-up{opacity:1!important;transform:none!important;transition:none!important;}
    .vb-offer td{animation:none!important;}
    .valuebreak.light-section .vb-offer td{animation:none!important;}
    .lead-modal{transition:opacity .2s ease!important;transform:none!important;}
    .lead-spinner{animation-duration:1.6s!important;}
    .wb-flow-dot{animation:none!important;opacity:.6!important;left:50%!important;}
    *{scroll-behavior:auto!important;}
}