/* ===== RESET & TOKENS ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Light palette — balanced, lots of whitespace */
    --bg:           #FFFFFF;
    --bg-soft:      #FAFAF7;
    --bg-cream:     #F4F2EC;
    --bg-tint:      #E8F8F0;       /* very light green hint */
    --ink:          #0F1410;       /* near-black for headlines */
    --ink-soft:     #2C322E;
    --text:         #4A5651;       /* body */
    --text-muted:   #7A8780;
    --line:         rgba(15, 20, 16, 0.08);
    --line-strong:  rgba(15, 20, 16, 0.14);

    /* NorthCore brand greens */
    --nc-green:     #0CC481;
    --nc-green-bright: #14FFB0;
    --nc-green-deep:   #0AA06A;
    --nc-green-darker: #087A50;
    --nc-green-ink:    #052A1B;     /* darkest, used on green section text */
    --nc-green-glow:   rgba(20, 255, 176, 0.35);

    /* Pink/peach accent (sparingly — for floating-card highlights) */
    --warm:         #FFD2A6;
    --warm-soft:    #FFE9D6;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-xl: 36px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 8px rgba(15, 20, 16, 0.04), 0 1px 2px rgba(15, 20, 16, 0.04);
    --shadow-md: 0 8px 24px rgba(15, 20, 16, 0.06), 0 2px 6px rgba(15, 20, 16, 0.04);
    --shadow-lg: 0 24px 60px rgba(15, 20, 16, 0.10), 0 8px 16px rgba(15, 20, 16, 0.06);
    --shadow-glow: 0 0 60px rgba(12, 196, 129, 0.25), 0 0 120px rgba(12, 196, 129, 0.10);

    --container: 1240px;
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

h1, h2, h3, h4, h5 {
    font-family: var(--font);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
h1 { font-size: clamp(1.95rem, 4.2vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; }
h2 { font-size: clamp(2.0rem, 4.0vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 600; }
h4 { font-size: 1.15rem; font-weight: 600; }

/* Liquid-glass eyebrow chip — translucent, blurred, with inner highlights.
   Pattern from 21st.dev/community/components/suraj-xd/liquid-glass */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nc-green-deep);
    margin-bottom: 24px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.30));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 8px 28px rgba(15, 20, 16, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(15, 20, 16, 0.04);
    position: relative;
    overflow: hidden;
}
.eyebrow::after {
    /* glossy specular highlight that shimmers across the chip */
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 50%;
    height: 200%;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: glassShimmer 6s ease-in-out infinite;
}
@keyframes glassShimmer {
    0%, 100% { transform: translateX(-30%) skewX(-20deg); opacity: 0; }
    50%      { transform: translateX(180%) skewX(-20deg); opacity: 0.6; }
}
/* Pulsing dot ::before removed — clean glass chips, no blinking node */

/* Dark variant — for use on dark sections (Slack Brain, etc.) */
.eyebrow.glass-dark {
    color: var(--nc-green-bright);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30);
}
.eyebrow.glass-dark::after {
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    font-size: 0.96rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    transition: all 0.25s ease;
    cursor: pointer;
    white-space: nowrap;
}
.btn-primary {
    background: var(--ink);
    color: #fff;
}
.btn-primary:hover { background: var(--nc-green-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-green {
    background: linear-gradient(135deg, rgba(20, 255, 176, 0.55), rgba(12, 196, 129, 0.32));
    color: var(--ink);
    font-weight: 700;
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(12, 196, 129, 0.50);
    box-shadow:
        0 6px 18px rgba(12, 196, 129, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(15, 20, 16, 0.05);
}
.btn-green:hover {
    background: linear-gradient(135deg, rgba(20, 255, 176, 0.75), rgba(12, 196, 129, 0.45));
    border-color: rgba(12, 196, 129, 0.7);
    transform: translateY(-1px);
    box-shadow:
        0 10px 28px rgba(12, 196, 129, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--line-strong);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--bg-soft); }
.btn-lg { padding: 18px 32px; font-size: 1.05rem; }

/* ===== NAV — sticky liquid glass (Apple-style frosted, locked to top) ===== */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    isolation: isolate;
    background:
        linear-gradient(120deg, rgba(34, 36, 42, 0.58) 0%, rgba(44, 46, 52, 0.52) 100%);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.18),
        0 10px 36px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16);
    transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    /* visible so the Services dropdown (.nav-dd-menu) can drop below the bar.
       The shimmer ::after stays within the bar height and fades to 0 opacity
       before it reaches the edges, so nothing visibly spills. */
    overflow: visible;
}
/* Subtle top-edge gloss — Apple-style neutral sheen, no chromatic tint */
.nav::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, transparent 55%);
    z-index: 0;
}
/* Specular highlight that drifts across the bar.
   Animated via background-position on a nav-sized layer (inset:0) so the streak
   is geometrically bounded to the bar — it can't spill now that .nav is overflow:visible. */
.nav::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, 0.45) 50%, transparent 58%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    background-position: 150% 0;
    animation: navGlassShimmer 9s ease-in-out infinite;
    z-index: 0;
}
@keyframes navGlassShimmer {
    0%   { background-position: 150% 0; opacity: 0; }
    45%  { opacity: 0.55; }
    100% { background-position: -50% 0; opacity: 0; }
}
.nav-inner { position: relative; z-index: 1; }
.nav.scrolled {
    background:
        linear-gradient(120deg, rgba(28, 30, 36, 0.80) 0%, rgba(38, 40, 46, 0.74) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.14);
    box-shadow:
        0 12px 42px rgba(0, 0, 0, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}
.nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #F5F5F7;
    letter-spacing: -0.01em;
    font-size: 1.08rem;
}
.nav-brand-img {
    width: 32px; height: 32px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}
.nav-links a {
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(245, 245, 247, 0.72);
    transition: color 0.2s ease;
}
.nav-links a:hover { color: #F5F5F7; }
.nav-ctas {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nav-ctas .btn { padding: 10px 20px; font-size: 0.88rem; }
.nav .btn-ghost {
    color: #F5F5F7;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.04);
}
.nav .btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.10);
}

.nav-toggle { display: none; font-size: 1.4rem; color: #F5F5F7; }

@media (max-width: 940px) {
    .nav-links, .nav-ctas .btn-ghost { display: none; }
    .nav-toggle { display: block; }
}

/* Section stacking — gravity-stage sits above white sections; pin keeps its own context.
   NOTE: .nav is intentionally excluded — it must stay position:fixed (see .nav rule above). */
.hero, .press, .scaling-pitch, .solution,
.mia-pin-wrap, .slack, .live, .reviews, .how, .scale-cta, .footer {
    position: relative;
    z-index: 1;
}
.mia-pin-wrap, .slack { z-index: 2; }
.cta-card { z-index: auto; }

/* ===== HERO — two-column: pitch left, morphing-logo video right ===== */
.hero {
    position: relative;
    padding: 120px 0 48px;
    background: transparent;
    text-align: left;
    overflow: visible;
}
.hero .container {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr);
    column-gap: 52px;
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 1;
    grid-column: 1;
    max-width: none;
    margin: 0;
}
.hero h1 {
    margin-bottom: 12px;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: 1;
}
.hero h1 .accent {
    color: var(--nc-green-deep);
}

/* Animated gradient text — pattern from 21st.dev/community/components/aliimam/gradient-text */
.gradient-text {
    background: linear-gradient(
        90deg,
        #0AA06A 0%,
        #14FFB0 25%,
        #0CC481 50%,
        #14FFB0 75%,
        #0AA06A 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: gradientShift 5s linear infinite;
}
.gradient-text-light {
    background: linear-gradient(
        90deg,
        #14FFB0 0%,
        #FFFFFF 25%,
        #14FFB0 50%,
        #FFFFFF 75%,
        #14FFB0 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: gradientShift 5s linear infinite;
}
@keyframes gradientShift {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}
.hero-tagline {
    font-size: clamp(1.15rem, 2.2vw, 1.55rem);
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 20px;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.hero p.lede {
    font-size: 1.0rem;
    color: var(--text);
    margin: 0 0 24px;
    max-width: 640px;
    line-height: 1.55;
}
.hero p.lede .em {
    color: var(--ink);
    font-weight: 600;
}
.hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 22px;
}
/* Hero visual (artisan.co style — sits below the headline, anchors above the fold on desktop) */
.hero-visual {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin: 36px auto 0;
}
.hero-visual--top {
    grid-column: 2;
    width: 100%;
    max-width: 560px;
    justify-self: center;
    margin: 0;
    padding: 0;
}
.hero-visual-frame {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
        var(--shadow-lg),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset,
        0 80px 120px -40px rgba(12, 196, 129, 0.22);
    overflow: hidden;
}
.hero-visual-frame::before {
    /* subtle grid behind the portrait */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(15, 20, 16, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 20, 16, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
            mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    z-index: 0;
}
.hero-visual-frame::after {
    /* green spotlight on the portrait — stronger, brighter halo behind NorthCore */
    content: '';
    position: absolute;
    top: -25%; left: 20%;
    width: 80%; height: 150%;
    background:
        radial-gradient(ellipse at 50% 55%, rgba(20, 255, 176, 0.55) 0%, rgba(12, 196, 129, 0.30) 28%, transparent 60%),
        radial-gradient(ellipse at 50% 55%, rgba(20, 255, 176, 0.18) 35%, transparent 80%);
    filter: blur(2px);
    pointer-events: none;
    z-index: 0;
    animation: miaGlowPulse 4.5s ease-in-out infinite;
}
@keyframes miaGlowPulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.06); }
}
.hero-visual-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    filter:
        drop-shadow(0 0 35px rgba(20, 255, 176, 0.55))
        drop-shadow(0 0 80px rgba(12, 196, 129, 0.45))
        drop-shadow(0 30px 50px rgba(12, 196, 129, 0.30));
}

/* Hero morphing-logo video — sized to the animation's native ratio, fills edge-to-edge */
.hero-visual-frame--logo {
    aspect-ratio: 916 / 720;
    background: transparent;
    border-color: var(--line-strong);
    box-shadow: var(--shadow-lg);
}
.hero-visual-frame--logo::before { display: none; }
.hero-visual-frame--logo::after { display: none; }
.hero-visual-frame--logo video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    filter: none;
}

/* ===== THE THREE ROADS — the trap owners fall into ===== */
.roads { padding: 96px 0 40px; background: transparent; }
.roads-header { text-align: center; max-width: 800px; margin: 0 auto 52px; }
.roads-header .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nc-green-deep); margin-bottom: 14px; }
.roads-header h2 { font-size: clamp(2rem, 4vw, 3rem); }
.roads-header h2 em { font-style: italic; color: var(--nc-green-deep); }
.roads-header p { margin-top: 14px; color: var(--text); font-size: 1.05rem; line-height: 1.6; }
.roads-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1160px; margin: 0 auto; }
.road-card { position: relative; background: #FFFFFF; border: 1px solid rgba(15, 20, 16, 0.09); border-radius: 20px; padding: 34px 30px; box-shadow: 0 6px 18px rgba(15, 20, 16, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.road-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15, 20, 16, 0.08); }
.road-card .road-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.road-card h3 { font-size: 1.22rem; font-weight: 700; line-height: 1.3; margin-bottom: 12px; color: var(--ink); }
.road-card p { color: var(--text); font-size: 0.97rem; line-height: 1.6; margin: 0; }
.road-card .road-cost { display: block; margin-top: 16px; font-weight: 700; color: #C0392B; font-size: 0.95rem; }
.roads-payoff { max-width: 1160px; margin: 26px auto 0; border-radius: 24px; padding: 40px 44px; background: radial-gradient(circle at 18% 0%, rgba(12, 196, 129, 0.20), transparent 55%), radial-gradient(circle at 82% 100%, rgba(20, 255, 176, 0.16), transparent 55%), #0F1410; border: 1px solid rgba(20, 255, 176, 0.30); box-shadow: 0 24px 60px -20px rgba(12, 196, 129, 0.25); text-align: center; }
.roads-payoff .road-tag { color: var(--nc-green-bright); }
.roads-payoff h3 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 14px; }
.roads-payoff p { color: rgba(255,255,255,0.82); font-size: 1.02rem; line-height: 1.6; max-width: 780px; margin: 0 auto; }
@media (max-width: 880px) { .roads-grid { grid-template-columns: 1fr; } }

/* ===== WHEN TO BRING US IN — pain-signal mirror ===== */
.when { padding: 80px 0 40px; background: transparent; }
.when-layout { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 48px; max-width: 1160px; margin: 0 auto; align-items: start; }
.when-intro { position: sticky; top: 100px; }
.when-intro .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nc-green-deep); margin-bottom: 14px; }
.when-intro h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; }
.when-intro h2 em { font-style: italic; color: var(--nc-green-deep); }
.when-intro > p { margin: 16px 0 26px; color: var(--text); font-size: 1.05rem; line-height: 1.6; }
.when-answer { position: relative; border-radius: 20px; padding: 26px 28px; background: radial-gradient(circle at 18% 0%, rgba(12, 196, 129, 0.24), transparent 62%), #0F1410; border: 1px solid rgba(20, 255, 176, 0.30); box-shadow: 0 24px 60px -22px rgba(12, 196, 129, 0.28); }
.when-answer-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nc-green-bright); margin-bottom: 10px; }
.when-answer p { margin: 0; color: rgba(255,255,255,0.92); font-size: 1rem; line-height: 1.55; font-weight: 500; }
.when-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.when-list li { display: flex; gap: 16px; align-items: flex-start; background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.when-list li:hover { transform: translateX(4px); border-color: rgba(12, 196, 129, 0.4); box-shadow: var(--shadow-md); }
.when-check { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 0.9rem; color: var(--nc-green-ink); background: linear-gradient(135deg, rgba(20, 255, 176, 0.55), rgba(12, 196, 129, 0.20)); }
.when-list li p { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; margin: 0; font-weight: 500; }
@media (max-width: 880px) { .when-layout { grid-template-columns: 1fr; gap: 30px; } .when-intro { position: static; } }

/* ===== PROOF OF EXECUTION — metric band ===== */
.proof { padding: 60px 0 72px; background: transparent; }
.proof-header { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.proof-header .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nc-green-deep); margin-bottom: 14px; }
.proof-header h2 { font-size: clamp(2rem, 4vw, 3rem); }
.proof-header h2 em { font-style: italic; color: var(--nc-green-deep); }
.proof-header p { margin-top: 14px; color: var(--text); font-size: 1.05rem; line-height: 1.6; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1160px; margin: 0 auto; }
.proof-stat { background: var(--bg-soft); border: 1px solid rgba(15, 20, 16, 0.08); border-radius: 18px; padding: 30px 28px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.proof-stat:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15, 20, 16, 0.08); }
.proof-num { display: block; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 14px; color: var(--nc-green-deep); }
.proof-stat p { color: var(--text); font-size: 0.97rem; line-height: 1.55; margin: 0; }
.proof-methods { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 40px auto 0; }
.proof-methods span { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--nc-green-darker); background: var(--bg-tint); border: 1px solid rgba(12, 196, 129, 0.22); border-radius: 999px; padding: 8px 16px; }
@media (max-width: 980px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .proof-grid { grid-template-columns: 1fr; } }

/* ===== THE METHOD — cycling operator disciplines ===== */
.method-intro { padding: 60px 0 8px; text-align: center; }
.method-intro .container { max-width: 860px; }
.method-intro .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nc-green-deep); margin-bottom: 14px; }
.method-intro h2 { font-size: clamp(2rem, 4vw, 3rem); }
.method-intro h2 em { font-style: italic; color: var(--nc-green-deep); }
.method-intro p { margin: 14px auto 0; color: var(--text); font-size: 1.05rem; line-height: 1.6; max-width: 720px; }
.method-intro p strong { color: var(--nc-green-deep); font-weight: 700; }
.method-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.method-nav a { display: inline-flex; align-items: center; gap: 9px; font-size: 0.9rem; font-weight: 700; color: var(--ink); text-decoration: none; background: #FFFFFF; border: 1px solid var(--line-strong); border-radius: 999px; padding: 10px 20px 10px 12px; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.method-nav a:hover { border-color: var(--nc-green); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.method-nav a span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--nc-green-deep); color: #fff; font-size: 0.72rem; font-weight: 800; }

.method { padding: 24px 0 80px; }
.method-track { max-width: 1080px; margin: 0 auto; padding-top: 56px; scroll-margin-top: 90px; }
.method-track + .method-track { margin-top: 8px; }
.method-track-head { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 30px; }
.method-track-idx { flex: 0 0 auto; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--nc-green-deep); width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--bg-tint); border: 1px solid rgba(12, 196, 129, 0.22); }
.method-track-head .eyebrow { display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nc-green-deep); margin-bottom: 8px; }
.method-track-head h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; }
.method-track-head p { margin-top: 10px; color: var(--text); font-size: 1rem; line-height: 1.6; max-width: 660px; }
.method-stage { max-width: 1080px; margin: 0 auto; }
.method-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px; }
.method-tabs button { position: relative; overflow: hidden; font-family: inherit; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; color: var(--nc-green-darker); background: var(--bg-tint); border: 1px solid rgba(12, 196, 129, 0.22); border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease; }
.method-tabs button:hover { border-color: var(--nc-green); }
.method-tabs button.active { color: #FFFFFF; background: var(--nc-green-deep); border-color: var(--nc-green-deep); }
.method-tabs button.active::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--nc-green-bright); transform-origin: left; animation: methodProgress 5s linear; }
.method-tabs.paused button.active::after { animation: none; }
@keyframes methodProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.method-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: linear-gradient(180deg, #FFFFFF, var(--bg-soft)); border: 1px solid rgba(15, 20, 16, 0.10); border-radius: 28px; padding: 46px 48px; box-shadow: 0 8px 24px rgba(15, 20, 16, 0.06); transition: opacity 0.22s ease; }
.method-panel.swap { opacity: 0; }
.method-copy .method-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nc-green-deep); margin-bottom: 12px; }
.method-copy .method-title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 14px; }
.method-copy p { color: var(--text); font-size: 1rem; line-height: 1.65; margin: 0 0 18px; }
.method-copy ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.method-copy li { position: relative; padding-left: 24px; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); font-weight: 500; }
.method-copy li::before { content: ''; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--nc-green); box-shadow: 0 0 0 4px rgba(12, 196, 129, 0.16); }
.method-cta { margin-top: 20px; display: inline-block; font-size: 0.9rem; font-weight: 700; color: #04371f; background: var(--nc-green); border-radius: var(--radius-pill, 999px); padding: 12px 22px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; box-shadow: 0 6px 18px rgba(12, 196, 129, 0.28); }
.method-cta:hover { background: var(--nc-green-bright, #14FFB0); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(12, 196, 129, 0.38); }
.method-diagram { display: flex; align-items: center; justify-content: center; min-height: 260px; }
.method-diagram svg { width: 100%; height: auto; max-height: 300px; overflow: visible; }
@media (max-width: 820px) { .method-panel { grid-template-columns: 1fr; gap: 28px; padding: 34px 28px; } .method-diagram { order: -1; min-height: 200px; } .method-track-head { gap: 16px; } .method-track-idx { width: 44px; height: 44px; border-radius: 13px; font-size: 0.92rem; } }

/* ===== THE TEAM BEHIND THE SEAT ===== */
.builtwith { padding: 40px 0 80px; }
.team-head { max-width: 820px; margin: 0 auto 40px; text-align: center; }
.team-head .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nc-green-deep); margin-bottom: 14px; }
.team-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.team-head h2 em { font-style: italic; color: var(--nc-green-deep); }
.team-head p { margin: 16px auto 0; color: var(--text); font-size: 1.05rem; line-height: 1.65; max-width: 720px; }
.team-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.team-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 20px; padding: 30px 28px; box-shadow: var(--shadow-sm); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.team-card:hover { transform: translateY(-4px); border-color: rgba(12, 196, 129, 0.4); box-shadow: var(--shadow-md); }
.team-metric { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nc-green-ink); background: linear-gradient(135deg, rgba(20, 255, 176, 0.5), rgba(12, 196, 129, 0.18)); border-radius: 999px; padding: 6px 14px; margin-bottom: 16px; }
.team-card h3 { font-size: 1.22rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 10px; }
.team-card p { color: var(--text); font-size: 0.96rem; line-height: 1.6; margin: 0; }
.team-caps { max-width: 1080px; margin: 36px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 12px; justify-content: center; border-top: 1px solid var(--line); padding-top: 32px; }
.team-caps-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nc-green-deep); }
.team-caps-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.team-caps-chips span { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; color: var(--nc-green-darker); background: var(--bg-tint); border: 1px solid rgba(12, 196, 129, 0.22); border-radius: 999px; padding: 9px 18px; }
@media (max-width: 820px) { .team-cards { grid-template-columns: 1fr; } }

/* Floating product badge on hero visual — liquid glass */
.hero-visual .floating-badge {
    position: absolute;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.28));
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 10px 30px rgba(15, 20, 16, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(15, 20, 16, 0.04);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    z-index: 3;
    overflow: hidden;
}
.hero-visual .floating-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 50%;
    height: 200%;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: glassShimmer 6s ease-in-out infinite;
}
.hero-visual .fb-1 { top: 28px; left: 4%; animation: floatA 5s ease-in-out infinite; }

@media (max-width: 940px) {
    .hero { padding: 104px 0 48px; text-align: center; }
    .hero .container { grid-template-columns: 1fr; row-gap: 0; }
    .hero-content { grid-column: 1; }
    .hero-tagline, .hero p.lede { margin-left: auto; margin-right: auto; }
    .hero-ctas { justify-content: center; }
    .hero-visual { margin-top: 32px; }
    .hero-visual--top { grid-column: 1; margin: 0 auto 32px; }
    .hero-visual .floating-badge { display: none; }
}

/* ===== PRESS STRIP — "People talk about NorthCore... Featured on" ===== */
.press {
    position: relative;
    padding: 56px 0 40px;
    background: transparent;
    text-align: center;
    overflow: hidden;
}
.press-eyebrow {
    font-size: clamp(1.4rem, 2.6vw, 2.0rem);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}
.press-eyebrow em {
    font-style: italic;
    color: var(--nc-green-deep);
}
.press-sub {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 28px;
}
.press-marquee {
    position: relative;
    overflow: hidden;
    /* fade edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
            mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.press-track {
    display: flex;
    width: max-content;
    animation: pressScroll 38s linear infinite;
}
.press-track img {
    height: 56px;
    width: auto;
    display: block;
    margin: 0 28px;
    opacity: 0.95;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.press-track:hover { animation-play-state: paused; }
.press-track:hover img { opacity: 1; transform: scale(1.04); }
@keyframes pressScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (max-width: 640px) {
    .press-track img { height: 40px; margin: 0 18px; }
}

/* ===== SCALING PITCH — contains the falling cards (they live + scroll with this section) ===== */
.scaling-pitch {
    position: relative;
    padding: 80px 0 240px;
    min-height: 110vh;       /* enough room for the stack to land at bottom + headline at top */
    background: transparent;
    text-align: center;
    overflow: hidden;        /* clips cards before they enter from above */
}
/* .scaling-eyebrow inherits all glass styling from .eyebrow now (use class="eyebrow") */
.scaling-pitch h2 {
    max-width: 820px;
    margin: 0 auto 22px;
    font-size: clamp(2.0rem, 4.4vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}
.scaling-pitch h2 em {
    font-style: italic;
    color: var(--nc-green-deep);
}
.scaling-pitch .scaling-sub {
    max-width: 680px;
    margin: 0 auto;
    font-size: 1.05rem;
    color: var(--text);
    line-height: 1.55;
}
.scaling-pitch .scaling-sub strong {
    color: var(--ink);
    font-weight: 600;
}

/* ===== GRAVITY STAGE — lives inside .scaling-pitch =====
   Cards fall once when the section is centered, settle at the bottom of the
   section, and then scroll naturally with it. They don't re-appear elsewhere. */
.gravity-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.gcard { opacity: 0; }
.gravity-stage.active .gcard { opacity: 1; }

.gcard {
    position: absolute;
    top: 0; left: 0;
    width: 76px; height: 76px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 20, 16, 0.22), 0 4px 10px rgba(15, 20, 16, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    will-change: transform;
    /* Start way above the section — overflow:hidden on .scaling-pitch keeps them clipped */
    transform: translate3d(50vw, -200vh, 0) translate(-50%, -50%) rotate(0deg);
}
.gcard img {
    width: 56%;
    height: 56%;
    object-fit: contain;
    /* SVGs loaded via <img> can't inherit CSS color, so we recolor with a filter:
       brightness(0) → all-black silhouette; invert(1) → flip to white. */
    filter: brightness(0) invert(1);
}
/* Med-spa-recognized brand backgrounds (10 SVG + 9 text-styled industry-specific) */
.gcard[data-i="0"]  { background: #1A2D6D; } /* Boulevard — navy */
.gcard[data-i="1"]  { background: #00A88E; } /* Vagaro — teal */
.gcard[data-i="2"]  { background: #4A154B; } /* Slack — purple */
.gcard[data-i="3"]  { background: #FF7A59; } /* HubSpot — orange */
.gcard[data-i="4"]  { background: #006BFF; } /* Calendly — blue */
.gcard[data-i="5"]  { background: #000000; } /* Square — black */
.gcard[data-i="6"]  { background: #FFE01B; } /* Mailchimp — yellow */
.gcard[data-i="7"]  { background: #4285F4; } /* Google Calendar — blue */
.gcard[data-i="8"]  { background: #635BFF; } /* Stripe — purple */
.gcard[data-i="9"]  { background: #2CA01C; } /* QuickBooks — green */
.gcard[data-i="10"] { background: #FFCC22; } /* DocuSign — yellow */
.gcard[data-i="11"] { background: #03001E; } /* GoHighLevel — black */
.gcard[data-i="12"] { background: #9D2235; } /* Mindbody — dark red */
.gcard[data-i="13"] { background: #003C5F; } /* Aesthetic Record — deep blue */
.gcard[data-i="14"] { background: #251F47; } /* Klaviyo — deep purple */
.gcard[data-i="15"] { background: #FCB041; } /* BirdEye — amber */
.gcard[data-i="16"] { background: #1F2D5F; } /* Phorest — navy */
.gcard[data-i="17"] { background: #FF4D5A; } /* RepeatMD — coral */
.gcard[data-i="18"] { background: #00A1E0; } /* Salesforce — cyan */
.gcard[data-i="19"] { background: #1F8DED; } /* Podium — blue */
/* Light-bg brands need a dark logo */
.gcard[data-i="6"]  img,
.gcard[data-i="10"] img,
.gcard[data-i="15"] img { filter: brightness(0); }
/* Text-styled industry cards — brand bg + white wordmark */
.gcard.text-logo {
    font-family: var(--font);
    font-weight: 800;
    font-size: 0.82rem;
    text-align: center;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.0;
    padding: 6px;
    text-transform: lowercase;
}
/* Light-bg brand cards need dark text */
.gcard.text-logo[data-i="15"] { color: #1a1100; }  /* BirdEye amber */

@media (max-width: 640px) {
    .gcard { width: 56px; height: 56px; border-radius: 12px; }
    .gcard.text-logo { font-size: 0.62rem; }
}
/* ===== PINNED MIA SECTION — DARK + GREEN ORB ===== */
.mia-pin-wrap {
    /* Outer wrapper provides scroll runway */
    position: relative;
    background: #050807;
    height: 320vh;  /* 3.2 viewports of scroll runway */
}
.mia-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
/* Dark background — same family as the .cta-card (ink + green radial) */
.mia-pin-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 60%, rgba(20, 255, 176, 0.18) 0%, rgba(12, 196, 129, 0.08) 30%, transparent 60%),
        linear-gradient(180deg, #050807 0%, #0A100C 50%, #050807 100%);
}
/* Animated grid */
.mia-pin-bg::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(20, 255, 176, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(20, 255, 176, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
}
/* Drifting starfield + green sparks — Artisan-style ambient motion */
.mia-pin-bg::after {
    content: '';
    position: absolute; inset: -20%;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.10) 1px, transparent 1.5px),
        radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.08) 1px, transparent 1.5px),
        radial-gradient(circle at 65% 20%, rgba(20, 255, 176, 0.14) 1px, transparent 1.5px),
        radial-gradient(circle at 35% 75%, rgba(20, 255, 176, 0.10) 1px, transparent 1.5px);
    background-size: 90px 90px, 120px 120px, 160px 160px, 200px 200px;
    animation: starDrift 60s linear infinite;
}
@keyframes starDrift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-60px, -120px); }
}

/* Floating spark particles (added via DOM) */
.mia-spark {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--nc-green-bright);
    box-shadow: 0 0 12px rgba(20, 255, 176, 0.8);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
}
.mia-spark.visible { opacity: 0.7; }
.mia-spark.s1 { top: 18%; left: 22%; animation: sparkRise 9s ease-in-out infinite 0s; }
.mia-spark.s2 { top: 32%; left: 78%; animation: sparkRise 11s ease-in-out infinite 1.2s; }
.mia-spark.s3 { top: 58%; left: 15%; animation: sparkRise 10s ease-in-out infinite 2.4s; }
.mia-spark.s4 { top: 42%; left: 88%; animation: sparkRise 12s ease-in-out infinite 0.8s; }
.mia-spark.s5 { top: 70%; left: 30%; animation: sparkRise 8s  ease-in-out infinite 3.5s; }
.mia-spark.s6 { top: 25%; left: 50%; animation: sparkRise 13s ease-in-out infinite 1.8s; }
.mia-spark.s7 { top: 65%; left: 72%; animation: sparkRise 9.5s ease-in-out infinite 4.2s; }
.mia-spark.s8 { top: 48%; left: 8%;  animation: sparkRise 11.5s ease-in-out infinite 2.7s; }
@keyframes sparkRise {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    20%  { opacity: 0.9; }
    50%  { transform: translate(-8px, -60px) scale(1); opacity: 0.7; }
    80%  { opacity: 0.4; }
    100% { transform: translate(6px, -120px) scale(0.6); opacity: 0; }
}

/* The big green orb glowing behind NorthCore — brighter, anchored to bottom, pulses + drifts */
.mia-orb {
    position: absolute;
    bottom: -10%; left: 50%;
    transform: translateX(-50%);
    width: clamp(460px, 64vw, 880px);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(20, 255, 176, 0.95) 0%,
            rgba(20, 255, 176, 0.65) 18%,
            rgba(12, 196, 129, 0.40) 38%,
            rgba(12, 196, 129, 0.18) 58%,
            transparent 75%);
    filter: blur(45px);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.7s ease;
    animation: orbPulse 6s ease-in-out infinite;
}
.mia-orb.visible { opacity: 1; }
@keyframes orbPulse {
    0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
    50%      { transform: translateX(-50%) translateY(-12px) scale(1.08); }
}

/* Smaller satellite orb that drifts horizontally — adds parallax depth */
.mia-orb-2 {
    position: absolute;
    top: 30%; left: 50%;
    width: clamp(240px, 30vw, 420px);
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(20, 255, 176, 0.55) 0%,
        rgba(12, 196, 129, 0.28) 35%,
        transparent 70%);
    filter: blur(40px);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.7s ease;
    animation: orbDrift 14s ease-in-out infinite;
}
.mia-orb-2.visible { opacity: 1; }
@keyframes orbDrift {
    0%, 100% { transform: translate(-60%, 0); }
    50%      { transform: translate(-40%, -40px); }
}

/* Headline — lowered to ~14vh from top (Artisan "With Ava" pattern) so it sits
   in the upper-third with breathing room, not slammed against the nav. */
.mia-pin-header {
    position: absolute;
    top: clamp(96px, 15vh, 180px);
    left: 0; right: 0;
    z-index: 5;
    text-align: center;
    padding: 0 32px;
    pointer-events: none;
    animation: headlineFloat 8s ease-in-out infinite;
}
@keyframes headlineFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.mia-pin-headline {
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    max-width: 1100px;
    margin: 0 auto;
    text-shadow: 0 0 40px rgba(12, 196, 129, 0.25);
}
.mia-pin-headline em {
    font-style: italic;
    font-weight: 800;
    background: linear-gradient(
        90deg,
        #14FFB0 0%,
        #FFFFFF 25%,
        #14FFB0 50%,
        #FFFFFF 75%,
        #14FFB0 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: gradientShift 5s linear infinite;
}
.mia-pin-sub {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 14px;
    font-size: 1.05rem;
    font-weight: 500;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

/* NorthCore photo — transparent PNG, anchored to center-bottom (Artisan "With Ava" pattern).
   Lower 60-65% of the section height; her glow blends with the orb behind. */
.mia-photo-wrap {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: clamp(380px, 50vw, 760px);
    height: 78%;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
    pointer-events: none;
    animation: photoBreathe 7s ease-in-out infinite;
}
.mia-photo-wrap.visible { opacity: 1; }
.mia-photo-wrap img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center bottom;
    /* Match hero: strong, bright green halo around NorthCore */
    filter:
        drop-shadow(0 0 35px rgba(20, 255, 176, 0.55))
        drop-shadow(0 0 80px rgba(12, 196, 129, 0.45))
        drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}
@keyframes photoBreathe {
    0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
    50%      { transform: translateX(-50%) translateY(-8px) scale(1.012); }
}

/* Floating cards orbiting NorthCore — liquid-glass on dark bg */
.mia-card {
    position: absolute;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30),
        0 0 30px rgba(12, 196, 129, 0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 4;
    opacity: 0;
    transform: translate(0, 24px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    white-space: nowrap;
}
.mia-card.visible { opacity: 1; transform: translate(0, 0); }
/* Default icon chip — overridden per-card below */
.mia-card .icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 1.04rem;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(135deg, rgba(12, 196, 129, 0.55), rgba(12, 196, 129, 0.15));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 18px rgba(12, 196, 129, 0.30);
}
/* Per-card icon backgrounds — light opaque gradient tinted to match the icon */
.mia-card.c1 .icon { background: linear-gradient(135deg, rgba(12, 196, 129, 0.55), rgba(12, 196, 129, 0.12)); }   /* phone — green */
.mia-card.c2 .icon { background: #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); }                       /* DM — black per spec */
.mia-card.c3 .icon { background: linear-gradient(135deg, rgba(106, 158, 255, 0.65), rgba(106, 158, 255, 0.15)); }   /* calendar — blue */
.mia-card.c4 .icon { background: linear-gradient(135deg, rgba(255, 215, 96, 0.60), rgba(255, 215, 96, 0.12)); color: #1a1300; } /* star — gold */
.mia-card.c5 .icon { background: linear-gradient(135deg, rgba(120, 220, 140, 0.55), rgba(120, 220, 140, 0.12)); }   /* money — green */
.mia-card.c6 .icon { background: linear-gradient(135deg, rgba(255, 184, 92, 0.55), rgba(255, 184, 92, 0.12)); }       /* package — warm */
.mia-card .label {
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
}
.mia-card .sub {
    display: block;
    font-size: 0.74rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
    letter-spacing: 0;
}

/* Card positions — orbit the upper half so the bottom-anchored photo doesn't collide */
.mia-card.c1 { top: 36%;  left: 6%;  }
.mia-card.c2 { top: 32%;  right: 8%; }
.mia-card.c3 { top: 52%;  left: 3%;  }
.mia-card.c4 { top: 48%;  right: 4%; }
.mia-card.c5 { top: 68%;  left: 6%; }
.mia-card.c6 { top: 64%;  right: 7%; }

/* Tablet */
@media (max-width: 940px) {
    .mia-pin-wrap { height: 260vh; }
    .mia-pin-header { top: clamp(72px, 10vh, 110px); }
    .mia-pin-headline { font-size: clamp(1.9rem, 6.5vw, 3rem); }
    .mia-pin-sub { font-size: 0.95rem; padding: 0 16px; }
    .mia-photo-wrap { width: clamp(280px, 70vw, 480px); height: 70%; }
    .mia-orb { width: clamp(360px, 80vw, 600px); }
    .mia-orb-2 { width: clamp(180px, 40vw, 280px); }

    .mia-card.c1, .mia-card.c3, .mia-card.c5 { left: 2%; }
    .mia-card.c2, .mia-card.c4, .mia-card.c6 { right: 2%; }
    .mia-card { padding: 10px 14px; }
    .mia-card .label { font-size: 0.82rem; }
    .mia-card .sub { display: none; }
}

/* Mobile — 4 visible cards (top-2 + bottom-2), shorter pin runway, smaller everything */
@media (max-width: 640px) {
    .mia-pin-wrap { height: 220vh; }
    .mia-pin-header { top: 64px; }
    .mia-pin-headline { font-size: clamp(1.6rem, 7vw, 2.4rem); }
    .mia-pin-sub { font-size: 0.85rem; margin-top: 10px; }

    .mia-photo-wrap { width: 88%; height: 62%; }
    .mia-orb { width: 110%; bottom: -20%; }
    .mia-orb-2 { display: none; }

    /* Drop the middle row of cards on small screens — keep just 4 corners */
    .mia-card { padding: 8px 12px; gap: 8px; border-radius: 12px; }
    .mia-card .icon { width: 24px; height: 24px; font-size: 0.78rem; border-radius: 6px; }
    .mia-card .label { font-size: 0.72rem; }
    .mia-card.c3, .mia-card.c4 { display: none; }
    .mia-card.c1 { top: 38%; left: 3%; }
    .mia-card.c2 { top: 34%; right: 3%; }
    .mia-card.c5 { top: 72%; left: 3%; }
    .mia-card.c6 { top: 68%; right: 3%; }

    /* Fewer sparks on small screens */
    .mia-spark.s5, .mia-spark.s6, .mia-spark.s7, .mia-spark.s8 { display: none; }
}

/* ===== THE SOLUTION — under the pin, virtual receptionist framing ===== */
.solution {
    position: relative;
    padding: 130px 0 100px;
    background: transparent;
    text-align: center;
    overflow: hidden;
}
.solution::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 900px; height: 500px;
    background: radial-gradient(ellipse at top, rgba(12, 196, 129, 0.10), transparent 70%);
    pointer-events: none;
}
.solution .container { position: relative; z-index: 1; }
.solution h2 {
    max-width: 820px;
    margin: 0 auto 18px;
    font-size: clamp(2.0rem, 4.4vw, 3.4rem);
    line-height: 1.08;
}
.solution h2 em {
    font-style: italic;
    color: var(--nc-green-deep);
}
.solution-sub {
    max-width: 700px;
    margin: 0 auto 56px;
    font-size: 1.08rem;
    color: var(--text);
    line-height: 1.6;
}
.solution-sub strong { color: var(--ink); font-weight: 600; }

/* Cycling display: large card on the left, clickable list on the right.
   Auto-cycles every 4s; user click pauses + jumps to that service. */
.solution-display {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 36px;
    max-width: 1080px;
    margin: 0 auto;
    align-items: stretch;
}
.solution-stage {
    position: relative;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.65));
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow:
        0 22px 50px rgba(15, 20, 16, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(15, 20, 16, 0.04);
    border-radius: var(--radius-xl);
    padding: 48px 44px;
    overflow: hidden;
    min-height: 460px;
    display: flex;
    flex-direction: column;
}
.stage-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--nc-green-deep);
    margin-bottom: 14px;
}
.stage-title {
    font-size: clamp(1.7rem, 2.8vw, 2.2rem);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 18px;
    letter-spacing: -0.02em;
    line-height: 1.12;
}
.stage-body {
    color: var(--text);
    font-size: 1.02rem;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}
.stage-bullets {
    list-style: none;
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 22px;
}
.stage-bullets li {
    position: relative;
    padding-left: 22px;
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.45;
    font-weight: 500;
}
.stage-bullets li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 12px; height: 2px;
    background: var(--nc-green);
    border-radius: 1px;
}
/* Crossfade animation when content swaps */
.solution-stage.swap .stage-eyebrow,
.solution-stage.swap .stage-title,
.solution-stage.swap .stage-body,
.solution-stage.swap .stage-bullets { opacity: 0; transform: translateY(6px); }
.stage-eyebrow, .stage-title, .stage-body, .stage-bullets {
    transition: opacity 0.32s ease, transform 0.32s ease;
}

@media (max-width: 600px) {
    .stage-bullets { grid-template-columns: 1fr; }
}

/* Right-side list of clickable options */
.solution-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.solution-options button {
    text-align: left;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: var(--ink);
    font: inherit;
    font-size: 0.96rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 6px rgba(15, 20, 16, 0.03);
    position: relative;
    overflow: hidden;
}
.solution-options button:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateX(2px);
}
.solution-options button.active {
    background: linear-gradient(135deg, rgba(12, 196, 129, 0.14), rgba(12, 196, 129, 0.05));
    border-color: rgba(12, 196, 129, 0.45);
    color: var(--nc-green-deep);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 6px 16px rgba(12, 196, 129, 0.10);
}
/* Cycle progress bar at the bottom of the active option */
.solution-options button.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--nc-green);
    transform-origin: left center;
    animation: cycleBar 4s linear forwards;
}
.solution-options.paused button.active::after { animation: none; opacity: 0.35; }
@keyframes cycleBar {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@media (max-width: 880px) {
    .solution-display { grid-template-columns: 1fr; }
    .solution-stage { min-height: 260px; padding: 32px 28px; }
    .solution-options { flex-direction: row; flex-wrap: wrap; }
    .solution-options button { flex: 1 1 calc(50% - 4px); font-size: 0.86rem; padding: 12px 14px; }
}

/* ===== SLACK COMMAND CENTER ===== */
.slack {
    position: relative;
    padding: 120px 0;
    background: #050807;
    color: #fff;
    overflow: hidden;
}
.slack::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(12, 196, 129, 0.18), transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(20, 255, 176, 0.10), transparent 55%);
    pointer-events: none;
}
.slack::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
}
.slack .container { position: relative; z-index: 1; }
.slack-header { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.slack-header .eyebrow {
    background: rgba(12, 196, 129, 0.10);
    border-color: rgba(20, 255, 176, 0.28);
    color: var(--nc-green-bright);
}
.slack-header h2 { color: #fff; }
.slack-header h2 em {
    font-style: normal;
    background: linear-gradient(120deg, var(--nc-green-bright), #fff 80%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.slack-header p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.05rem;
    margin-top: 16px;
}

/* Interactive Slack demo — left: clickable command chips, right: terminal */
.slack-demo {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    max-width: 1080px;
    margin: 0 auto;
    align-items: start;
}
.slack-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.slack-cards button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(15, 20, 16, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.78);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    font: inherit;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.slack-cards button code {
    font-family: 'SF Mono', 'Menlo', Monaco, Consolas, monospace;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--nc-green-bright);
}
.slack-cards button span {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}
.slack-cards button:hover {
    border-color: rgba(20, 255, 176, 0.4);
    background: rgba(15, 20, 16, 0.75);
    transform: translateX(2px);
}
.slack-cards button.active {
    border-color: rgba(20, 255, 176, 0.55);
    background: rgba(12, 196, 129, 0.10);
    box-shadow: 0 0 0 3px rgba(20, 255, 176, 0.10);
}

/* Chat-bubble Slack — user (slash command, blue) + NorthCore (response with PFP) */
.slack-chat {
    background: rgba(8, 12, 10, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-lg);
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    min-height: 480px;
    display: flex;
    flex-direction: column;
}
.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.chat-header .avatar { width: 28px; height: 28px; }
.chat-header-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.chat-header-name {
    color: #fff;
    font-weight: 700;
    font-size: 0.88rem;
}
.chat-header-status {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-header-status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--nc-green-bright);
    box-shadow: 0 0 8px rgba(20, 255, 176, 0.65);
}

.chat-body {
    flex: 1;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* NorthCore avatar — black bg, light green halo, mia-glow.png face */
.avatar {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #1a1f1c 0%, #050807 75%);
    box-shadow:
        0 0 12px rgba(20, 255, 176, 0.55),
        0 0 24px rgba(20, 255, 176, 0.28),
        inset 0 0 0 1px rgba(20, 255, 176, 0.30);
    overflow: hidden;
    position: relative;
}
.avatar img {
    position: absolute;
    width: 200%;
    height: 200%;
    left: 50%;
    top: 6%;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: center top;
}

.chat-message {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 88%;
    animation: bubbleIn 0.3s ease both;
}
.chat-message.user { align-self: flex-end; flex-direction: row-reverse; }
.chat-message.mia  { align-self: flex-start; }
@keyframes bubbleIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 0.92rem;
    line-height: 1.45;
    max-width: 100%;
    word-wrap: break-word;
}
.chat-message.user .bubble {
    background: linear-gradient(135deg, #1A8CFF 0%, #006BFF 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
    font-family: 'SF Mono', 'Menlo', Monaco, Consolas, monospace;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(0, 107, 255, 0.30);
}
.chat-message.user .bubble.typing::after {
    content: '▌';
    margin-left: 2px;
    animation: caretBlink 0.8s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.chat-message.mia .bubble {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-left-radius: 4px;
    font-family: 'SF Mono', 'Menlo', Monaco, Consolas, monospace;
    font-size: 0.82rem;
    white-space: pre-wrap;
    line-height: 1.6;
}
.chat-message.mia .bubble .line {
    display: block;
}
.chat-message.mia .bubble .line.title {
    color: var(--nc-green-bright);
    font-weight: 700;
    margin-bottom: 4px;
}
/* Typing indicator (3-dot) for NorthCore thinking */
.chat-message.thinking .bubble {
    padding: 14px 18px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.chat-message.thinking .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    animation: dotBounce 1.2s ease-in-out infinite;
}
.chat-message.thinking .dot:nth-child(2) { animation-delay: 0.15s; }
.chat-message.thinking .dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
    40%           { transform: scale(1);   opacity: 1;   }
}

@media (max-width: 880px) {
    .slack-demo { grid-template-columns: 1fr; }
    .slack-cards { flex-direction: row; flex-wrap: wrap; }
    .slack-cards button { flex: 1 1 calc(50% - 6px); min-width: 0; }
}

/* ===== SEE NORTHCORE LIVE — globe + animated counter ===== */
.live {
    position: relative;
    padding: 120px 0;
    background: transparent;
    overflow: hidden;
}
.live-header { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.live-header h2 em { font-style: italic; color: var(--nc-green-deep); }
.live-sub { color: var(--text); font-size: 1.05rem; margin-top: 16px; }
.live-card {
    max-width: 980px;
    margin: 0 auto;
    background: linear-gradient(135deg, #0A100C 0%, #050807 100%);
    border-radius: var(--radius-xl);
    padding: 56px 48px;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(15, 20, 16, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.live-card::before {
    content: '';
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(circle at 20% 30%, rgba(20, 255, 176, 0.18), transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(12, 196, 129, 0.15), transparent 55%);
    pointer-events: none;
}
.live-globe {
    position: relative;
    z-index: 1;
    width: 280px;
    height: 280px;
    margin: 0 auto;
}
.live-globe canvas {
    display: block;
    width: 280px !important;
    height: 280px !important;
    max-width: 100%;
    max-height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.live-globe canvas.ready { opacity: 1; }
@media (max-width: 720px) {
    .live-globe { width: 220px; height: 220px; }
    .live-globe canvas { width: 220px !important; height: 220px !important; }
}

.live-stats {
    position: relative;
    z-index: 1;
}
.live-stat-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 14px;
}
.live-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--nc-green-bright);
    box-shadow: 0 0 0 4px rgba(20, 255, 176, 0.20);
    animation: pulse 1.6s ease-in-out infinite;
}
.live-stat-num {
    font-size: clamp(3rem, 7vw, 5.6rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, #fff, var(--nc-green-bright));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 28px;
    font-variant-numeric: tabular-nums;
}
.live-stat-meta {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.92rem;
}
.live-stat-meta strong {
    display: block;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
}
@media (max-width: 720px) {
    .live-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 40px 28px;
    }
    .live-globe svg { width: 180px; height: 180px; }
    .live-stat-meta { justify-content: center; }
}

/* ===== HOW IT WORKS — dark mode ===== */
.how {
    padding: 130px 0 110px;
    background: linear-gradient(180deg, #050807 0%, #0A100C 50%, #050807 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.how::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(12, 196, 129, 0.18), transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(20, 255, 176, 0.10), transparent 50%);
    pointer-events: none;
}
.how::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
}
.how .container { position: relative; z-index: 1; }

.section-header { text-align: center; max-width: 760px; margin: 0 auto 72px; }
.section-header p { color: rgba(255, 255, 255, 0.65); font-size: 1.08rem; margin-top: 16px; }
.how .section-header h2 { color: #fff; }
.how .section-header h2 em {
    font-style: normal;
    background: linear-gradient(120deg, var(--nc-green-bright), #fff 80%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.how .section-header .eyebrow.glass-dark {
    /* uses the existing glass-dark variant */
}

.how-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.how-step {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-lg);
    padding: 38px 30px;
    transition: all 0.3s ease;
    position: relative;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.how-step:hover {
    transform: translateY(-4px);
    border-color: rgba(20, 255, 176, 0.40);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.40),
        0 0 30px rgba(12, 196, 129, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.how-step .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--nc-green), var(--nc-green-deep));
    color: #052A1B;
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 22px;
    letter-spacing: -0.02em;
    box-shadow:
        0 8px 22px rgba(12, 196, 129, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.how-step h3 { color: #fff; margin-bottom: 12px; }
.how-step p { color: rgba(255, 255, 255, 0.70); line-height: 1.6; }

@media (max-width: 1040px) {
    .how-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
    .how-steps { grid-template-columns: 1fr; }
}

/* ===== REVIEWS — horizontal cycling marquee with photos ===== */
.reviews {
    position: relative;
    padding: 120px 0 100px;
    background: transparent;
    overflow: hidden;
}
.reviews-header { text-align: center; max-width: 820px; margin: 0 auto 56px; }
.reviews-header h2 em { font-style: italic; color: var(--nc-green-deep); }
.reviews-header p {
    color: var(--text);
    font-size: 1.05rem;
    margin-top: 16px;
}

.reviews-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* fade edges so cards smoothly enter/exit */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.reviews-track {
    display: flex;
    flex-direction: row;
    gap: 22px;
    width: max-content;
    animation: reviewsScroll 70s linear infinite;
}
.reviews-track:hover { animation-play-state: paused; }
@keyframes reviewsScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }   /* track doubled — 50% = one full set */
}

.review-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.70));
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 14px 36px rgba(15, 20, 16, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    flex-shrink: 0;
    width: 380px;
    display: flex;
    flex-direction: column;
}
.review-stars {
    display: inline-flex;
    gap: 2px;
    color: #FFB02E;
    margin-bottom: 12px;
    font-size: 0.92rem;
    letter-spacing: 0.05em;
}
.review-quote {
    color: var(--ink);
    font-size: 1.0rem;
    line-height: 1.55;
    margin-bottom: 18px;
    font-weight: 500;
    flex-grow: 1;
}
.review-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}
.review-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.8),
        0 0 0 3px rgba(12, 196, 129, 0.45),
        0 4px 12px rgba(15, 20, 16, 0.10);
}
.review-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.review-name { color: var(--ink); font-weight: 600; line-height: 1.2; }
.review-title { color: var(--text-muted); font-size: 0.78rem; line-height: 1.3; margin-top: 2px; }

@media (max-width: 720px) {
    .review-card { width: 300px; padding: 22px 22px; }
    .review-quote { font-size: 0.94rem; }
}

/* ===== SCALE CTA — dark, with front-desk image + glass Meet the Team button ===== */
.scale-cta {
    position: relative;
    background: linear-gradient(180deg, #050807 0%, #0A100C 50%, #050807 100%);
    color: #fff;
    padding: 120px 0 100px;
    overflow: hidden;
}
.scale-cta::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(12, 196, 129, 0.18), transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(20, 255, 176, 0.10), transparent 55%);
    pointer-events: none;
}
.scale-cta::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
}
.scale-cta .container { position: relative; z-index: 1; text-align: center; }

.scale-cta h2 {
    color: #fff;
    font-size: clamp(2.4rem, 5.2vw, 4.0rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0 auto 22px;
    max-width: 780px;
}
.scale-cta h2 em {
    font-style: normal;
    background: linear-gradient(
        90deg,
        #14FFB0 0%,
        #FFFFFF 25%,
        #14FFB0 50%,
        #FFFFFF 75%,
        #14FFB0 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: gradientShift 5s linear infinite;
}
.scale-cta-sub {
    max-width: 700px;
    margin: 0 auto 56px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.08rem;
    line-height: 1.6;
}
.scale-cta-sub strong { color: #fff; font-weight: 600; }

.scale-cta-image {
    position: relative;
    max-width: 760px;
    margin: 0 auto 56px;
    border-radius: var(--radius-xl);
    overflow: visible;  /* button needs to overflow the image */
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45),
        0 0 60px rgba(12, 196, 129, 0.12);
}
.scale-cta-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
}

/* All-green liquid-glass Meet the Team button — overlaps the image at the bottom-center */
.scale-cta .btn-meet {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 44px;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #052A1B;
    text-decoration: none;
    border-radius: var(--radius-pill);
    /* All-green gradient + a subtle white glass overlay across the top half */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(135deg, #14FFB0 0%, #0CC481 60%, #0AA06A 100%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 18px 50px rgba(12, 196, 129, 0.55),
        0 6px 20px rgba(12, 196, 129, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(15, 20, 16, 0.10);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
    isolation: isolate;
    z-index: 2;
    cursor: pointer;
    white-space: nowrap;
}
/* Glossy specular highlight that sweeps across to grab attention */
.scale-cta .btn-meet::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 50%;
    height: 200%;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, transparent 70%);
    transform: skewX(-22deg);
    pointer-events: none;
    animation: meetShine 3.5s ease-in-out infinite;
    z-index: -1;
}
@keyframes meetShine {
    0%, 100% { transform: translateX(-30%) skewX(-22deg); opacity: 0; }
    45%      { opacity: 0.95; }
    55%      { opacity: 0.95; }
    100%     { transform: translateX(280%) skewX(-22deg); opacity: 0; }
}
.scale-cta .btn-meet:hover {
    transform: translateX(-50%) translateY(-3px);
    box-shadow:
        0 26px 64px rgba(12, 196, 129, 0.65),
        0 10px 28px rgba(12, 196, 129, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

@media (max-width: 720px) {
    .scale-cta { padding: 80px 0 70px; }
    .scale-cta-image { margin-bottom: 48px; }
    .scale-cta .btn-meet { padding: 14px 30px; font-size: 0.96rem; bottom: -22px; }
}

/* ===== FINAL CTA (black card under How It Works) ===== */
.cta {
    padding: 140px 0 60px;
    background: var(--bg);
    text-align: center;
    position: relative;
    z-index: 1;
}

/* ===== SCHEDULER — on-page Cal.com booking ===== */
.scheduler {
    padding: 40px 0 100px;
    background: var(--bg);
    position: relative;
    text-align: center;
    overflow: hidden;
    z-index: 1;
}
.scheduler::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 900px; height: 600px;
    background: radial-gradient(ellipse at 50% 0%, rgba(20, 255, 176, 0.10) 0%, transparent 70%);
    pointer-events: none;
}
.scheduler-header { position: relative; z-index: 1; max-width: 720px; margin: 0 auto 32px; }
.scheduler-header .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nc-green-deep); margin-bottom: 14px; }
.scheduler-header h2 { font-size: clamp(2rem, 4vw, 3rem); }
.scheduler-header h2 em { font-style: italic; color: var(--nc-green-deep); }
.scheduler-header p { margin-top: 14px; color: var(--text); font-size: 1.05rem; line-height: 1.6; }
.scheduler-card {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.55));
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-xl);
    padding: 18px;
    box-shadow:
        var(--shadow-lg),
        0 60px 100px -40px rgba(12, 196, 129, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.scheduler-embed { min-height: 660px; border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.scheduler-embed iframe { border: none; width: 100%; height: 100%; min-height: 660px; border-radius: var(--radius-lg); background: #fff; }
.scheduler-fineprint { position: relative; z-index: 1; margin-top: 22px; color: var(--text-muted); font-size: 0.88rem; }
.scheduler-fineprint a { color: var(--nc-green-deep); font-weight: 600; }
@media (max-width: 640px) { .scheduler-embed, .scheduler-embed iframe { min-height: 720px; } }
.cta-card {
    max-width: 920px;
    margin: 0 auto;
    background: var(--ink);
    color: #fff;
    padding: 80px 40px;
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.cta-card::before {
    content: '';
    position: absolute;
    top: -40%; right: -20%;
    width: 60%; height: 180%;
    background: radial-gradient(ellipse at center, rgba(12, 196, 129, 0.32), transparent 70%);
    pointer-events: none;
}
.cta-card h2 {
    color: #fff;
    margin-bottom: 18px;
    position: relative;
}
.cta-card h2 .green { color: var(--nc-green-bright); }
.cta-card p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.1rem;
    margin-bottom: 36px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.cta-card .btn { position: relative; }

/* Book Your Audit — same all-green shine glass as Meet the Team, sits inside the black card */
.btn-audit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 44px;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #052A1B;
    text-decoration: none;
    border-radius: var(--radius-pill);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(135deg, #14FFB0 0%, #0CC481 60%, #0AA06A 100%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 18px 50px rgba(12, 196, 129, 0.55),
        0 6px 20px rgba(12, 196, 129, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(15, 20, 16, 0.10);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    white-space: nowrap;
}
.btn-audit::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 50%;
    height: 200%;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, transparent 70%);
    transform: skewX(-22deg);
    pointer-events: none;
    animation: meetShine 3.5s ease-in-out infinite;
    z-index: -1;
}
.btn-audit:hover {
    transform: translateY(-3px);
    box-shadow:
        0 26px 64px rgba(12, 196, 129, 0.65),
        0 10px 28px rgba(12, 196, 129, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn-audit-ghost {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow: none;
}
.btn-audit-ghost::before { display: none; }
.btn-audit-ghost:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

/* ===== FOOTER ===== */
.footer {
    padding: 64px 0 32px;
    background: rgba(250, 250, 247, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid var(--line);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}
.footer-brand p {
    color: var(--text);
    margin: 14px 0 20px;
    font-size: 0.94rem;
    max-width: 320px;
}
.footer-col h4 {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
    color: var(--ink-soft);
    font-size: 0.92rem;
    transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--nc-green-deep); }
.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.84rem;
    color: var(--text-muted);
}
.footer-disclaimer {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 0.78rem;
    line-height: 1.65;
    color: var(--text-muted);
}
.footer-disclaimer p { margin-bottom: 10px; }
.footer-disclaimer p:last-child { margin-bottom: 0; }
.footer-disclaimer strong { color: var(--ink-soft); font-weight: 600; }

@media (max-width: 880px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ===== MICRO-ANIMATIONS ===== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Varied float animations — more organic, Artisan-style */
@keyframes floatA {
    0%, 100% { transform: translate(0, 0)    rotate(-0.5deg); }
    50%      { transform: translate(0, -10px) rotate(0.5deg); }
}
@keyframes floatB {
    0%, 100% { transform: translate(0, 0)     rotate(0.3deg); }
    50%      { transform: translate(6px, -12px) rotate(-0.4deg); }
}
@keyframes floatC {
    0%, 100% { transform: translate(0, 0)      rotate(-0.4deg); }
    33%      { transform: translate(-5px, -8px) rotate(0.3deg); }
    66%      { transform: translate(4px, -14px) rotate(-0.2deg); }
}
@keyframes floatD {
    0%, 100% { transform: translate(0, 0)     rotate(0.5deg); }
    50%      { transform: translate(-8px, -6px) rotate(-0.5deg); }
}
.mia-card.visible.c1 { animation: floatA 5.2s ease-in-out infinite 0.2s; }
.mia-card.visible.c2 { animation: floatB 5.8s ease-in-out infinite 0.4s; }
.mia-card.visible.c3 { animation: floatC 6.4s ease-in-out infinite 0s;   }
.mia-card.visible.c4 { animation: floatD 5.4s ease-in-out infinite 0.5s; }
.mia-card.visible.c5 { animation: floatA 6.0s ease-in-out infinite 0.3s; }
.mia-card.visible.c6 { animation: floatC 5.6s ease-in-out infinite 0.1s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ===== HOW WE WORK — Done-With-You / Done-For-You / Business Case ===== */
.how-we-work { padding: 110px 0 120px; background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-soft) 100%); }
.hww-header { text-align: center; max-width: 780px; margin: 0 auto 56px; }
.hww-header .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nc-green-deep); margin-bottom: 14px; }
.hww-header h2 { font-size: clamp(2rem, 4vw, 3rem); }
.hww-header h2 em { font-style: italic; color: var(--nc-green-deep); }
.hww-header p { margin-top: 14px; color: var(--text); font-size: 1.05rem; line-height: 1.6; }
.hww-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 1160px; margin: 0 auto; }
.hww-card { border-radius: 28px; padding: 44px 40px; display: flex; flex-direction: column; transition: transform 0.35s ease; }
.hww-card:hover { transform: translateY(-4px); }
.hww-card .hww-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; margin-bottom: 16px; }
.hww-card h3 { font-size: clamp(1.5rem, 2.2vw, 1.85rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 14px; }
.hww-card .hww-lede { line-height: 1.6; margin-bottom: 22px; }
.hww-card ul { list-style: none; padding: 0; margin: 0 0 28px 0; display: flex; flex-direction: column; gap: 10px; }
.hww-card ul li { position: relative; padding-left: 26px; font-size: 0.96rem; line-height: 1.55; }
.hww-card ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--nc-green); box-shadow: 0 0 0 4px rgba(12, 196, 129, 0.18); }
.hww-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.98rem; padding: 14px 26px; border-radius: 999px; transition: all 0.25s ease; }
.hww-dwy { background: linear-gradient(180deg, #FFFFFF, var(--bg-soft)); border: 1px solid rgba(15, 20, 16, 0.10); color: var(--text); box-shadow: 0 8px 24px rgba(15, 20, 16, 0.06); }
.hww-dwy h3 { color: var(--ink); }
.hww-dwy .hww-eyebrow { color: var(--nc-green-deep); }
.hww-dwy .hww-cta { background: var(--ink); color: #fff; }
.hww-dwy .hww-cta:hover { background: var(--nc-green-deep); transform: translateY(-1px); }
.hww-dfy { background: radial-gradient(circle at 20% 0%, rgba(12, 196, 129, 0.20), transparent 55%), radial-gradient(circle at 80% 100%, rgba(20, 255, 176, 0.16), transparent 55%), #0F1410; color: rgba(255,255,255,0.92); border: 1px solid rgba(20, 255, 176, 0.30); box-shadow: 0 24px 60px rgba(15, 20, 16, 0.10), 0 30px 60px -20px rgba(12, 196, 129, 0.25); }
.hww-dfy h3 { color: #fff; }
.hww-dfy .hww-eyebrow { color: var(--nc-green-bright); }
.hww-dfy .hww-lede { color: rgba(255,255,255,0.78); }
.hww-dfy ul li { color: rgba(255,255,255,0.88); }
.hww-dfy ul li::before { background: var(--nc-green-bright); box-shadow: 0 0 0 4px rgba(20, 255, 176, 0.18); }
.hww-dfy .hww-cta { background: linear-gradient(135deg, rgba(20, 255, 176, 0.85), rgba(12, 196, 129, 0.65)); color: var(--nc-green-ink); border: 1px solid rgba(20, 255, 176, 0.7); box-shadow: 0 10px 30px rgba(12, 196, 129, 0.30); }
.hww-dfy .hww-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(12, 196, 129, 0.40); }
.hww-business-case { margin: 90px auto 0; max-width: 1160px; text-align: center; }
.hww-bc-header h2 { max-width: 920px; margin: 0 auto; font-size: clamp(2rem, 4vw, 3rem); }
.hww-bc-header h2 em { font-style: italic; color: var(--nc-green-deep); }
.hww-bc-header p { max-width: 680px; margin: 14px auto 40px; color: var(--text); font-size: 1.05rem; line-height: 1.6; }
.hww-bc-panel { display: grid; grid-template-columns: 1fr 1fr; text-align: left; background: linear-gradient(180deg, #FFFFFF, var(--bg-soft)); border: 1px solid var(--line-strong); border-radius: 28px; box-shadow: var(--shadow-md); overflow: hidden; }
.hww-bc-item { display: flex; gap: 18px; align-items: flex-start; padding: 38px 36px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.hww-bc-item:nth-child(2n) { border-right: none; }
.hww-bc-item:nth-child(n+3) { border-bottom: none; }
.hww-bc-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--nc-green-deep); background: var(--bg-tint); border: 1px solid rgba(12, 196, 129, 0.24); }
.hww-bc-icon svg { width: 24px; height: 24px; }
.hww-bc-item h3 { font-size: 1.14rem; font-weight: 700; line-height: 1.3; margin-bottom: 10px; color: var(--ink); }
.hww-bc-item p { color: var(--text); font-size: 0.96rem; line-height: 1.6; margin: 0; }
.hww-bc-item p strong { color: var(--ink); font-weight: 700; }
.hww-shapes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.hww-shapes span { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--nc-green-darker); background: var(--bg-tint); border: 1px solid rgba(12, 196, 129, 0.22); border-radius: 999px; padding: 8px 16px; }

/* Fractional seat layout — dark seat card + light responsibilities list */
.hww-fractional { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; max-width: 1160px; margin: 0 auto; align-items: stretch; }
.hww-seat { justify-content: flex-start; }
.hww-seat .hww-cta { margin-top: 26px; }
.hww-seat-note { margin-top: 16px; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; color: var(--nc-green-bright); }
.hww-seat-list { background: linear-gradient(180deg, #FFFFFF, var(--bg-soft)); border: 1px solid rgba(15, 20, 16, 0.10); border-radius: 28px; padding: 44px 40px; box-shadow: 0 8px 24px rgba(15, 20, 16, 0.06); }
.hww-seat-list h4 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nc-green-deep); margin-bottom: 22px; }
.hww-seat-list ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.hww-seat-list li { position: relative; padding-left: 28px; font-size: 0.98rem; line-height: 1.55; color: var(--text); }
.hww-seat-list li strong { color: var(--ink); font-weight: 700; }
.hww-seat-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--nc-green); box-shadow: 0 0 0 4px rgba(12, 196, 129, 0.18); }

/* Scarcity banner — 5 clients per quarter */
.hww-scarcity { max-width: 1160px; margin: 26px auto 0; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; border-radius: 24px; padding: 30px 36px; background: radial-gradient(circle at 12% 0%, rgba(20, 255, 176, 0.14), transparent 55%), var(--bg-tint); border: 1px solid rgba(12, 196, 129, 0.28); }
.hww-scarcity-tag { flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nc-green-ink); background: linear-gradient(135deg, rgba(20, 255, 176, 0.85), rgba(12, 196, 129, 0.55)); border-radius: 999px; padding: 9px 16px; }
.hww-scarcity p { margin: 0; flex: 1 1 320px; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.hww-scarcity p strong { color: var(--ink); font-weight: 700; }

@media (max-width: 880px) { .hww-paths, .hww-fractional, .hww-bc-panel { grid-template-columns: 1fr; } .hww-card, .hww-seat-list { padding: 32px 26px; } .hww-business-case { margin-top: 60px; } .hww-bc-item { border-right: none; padding: 30px 26px; } .hww-bc-item:nth-child(n+3) { border-bottom: 1px solid var(--line); } .hww-bc-item:last-child { border-bottom: none; } }