/* ================================================
   MAKE ME TOOLS — Custom AI tools, built to order
   v140 · The white rebrand
   Palette: near-white ground, electric purple,
   deep navy pills, lavender surfaces, lime accents
   Type: Inter Tight (display) · Inter (body)
   ================================================ */

:root {
    /* "only light" hard-opts this site out of browser auto-dark / forced-dark;
       colours never invert regardless of OS or extension dark modes */
    color-scheme: only light;

    /* Ground (themeable — dark themes flip these) */
    --bg: #FBFCFD;
    --surface: #ffffff;      /* cards, nav, sheets */
    --surface-2: color-mix(in srgb, var(--brand) 9%, var(--surface));
    --white: #ffffff;

    /* Ink */
    --ink: #0D0217;
    --ink-2: #111116;
    --body: #565672;
    --muted: #8A8A9F;

    /* ---- THEME ENGINE ----
       Every accent on the site derives from two seeds: --brand
       (the primary hue) and --accent (the pop colour). A theme is
       just those two values; everything else is mixed from them,
       so all 20 palettes stay perfectly coordinated.
       Default theme = Amethyst. */
    --brand: #7A3BFF;
    --accent: #DFFF1F;
    --accent-ink: #12121A;

    /* derived brand ramp */
    --purple: var(--brand);
    --purple-hover: color-mix(in srgb, var(--brand) 86%, #000);
    --navy: color-mix(in srgb, var(--brand) 52%, #0a0320);
    --navy-hover: color-mix(in srgb, var(--brand) 44%, #0a0320);
    --lav: color-mix(in srgb, var(--brand) 11%, var(--surface));
    --lav-deep: color-mix(in srgb, var(--brand) 20%, var(--surface));
    --lime: var(--accent);
    --purple-line: color-mix(in srgb, var(--brand) 42%, var(--surface));

    /* hero / cta gradient stops, all mixed from --brand */
    --grad-light: color-mix(in srgb, var(--brand) 72%, #fff);
    --grad-mid: var(--brand);
    --grad-deep: color-mix(in srgb, var(--brand) 74%, #14063a);
    --grad-deepest: color-mix(in srgb, var(--brand) 52%, #0c0322);
    --grad-glow: color-mix(in srgb, var(--brand) 38%, transparent);
    --grad-hi: color-mix(in srgb, var(--brand) 26%, #fff);

    /* Lines */
    --line: #ECECF4;
    --line-strong: #DFDFED;

    /* Pastel card palette (light) — dark themes override these */
    --p1-bg: #F3EFFF; --p1-bd: #E7DEFB; --p1-tl: #E7DDFF; --p1-ik: #7A3BFF; --p1-gl: rgba(122, 59, 255, 0.16);
    --p2-bg: #FFEFF6; --p2-bd: #F7DBE8; --p2-tl: #FFD9EA; --p2-ik: #E0468A; --p2-gl: rgba(224, 70, 138, 0.15);
    --p3-bg: #EAF9F0; --p3-bd: #D2EEDD; --p3-tl: #D2F0DE; --p3-ik: #1F9E58; --p3-gl: rgba(31, 162, 91, 0.15);
    --p4-bg: #EAF3FF; --p4-bd: #D6E6FA; --p4-tl: #D6E8FF; --p4-ik: #2E7BF0; --p4-gl: rgba(46, 123, 240, 0.15);
    --p5-bg: #FFF3E8; --p5-bd: #F7E2CD; --p5-tl: #FFE2C7; --p5-ik: #DB7A2C; --p5-gl: rgba(224, 126, 50, 0.16);
    --p6-bg: #EEEFFF; --p6-bd: #DEDFF8; --p6-tl: #DFE0FF; --p6-ik: #5B5FE0; --p6-gl: rgba(91, 95, 224, 0.15);

    /* Depth */
    --card-shadow: 0 0 10px 2px rgba(120, 124, 140, 0.20);
    --card-shadow-lift: 0 14px 34px -8px rgba(60, 66, 82, 0.22);

    /* Type */
    --font-display: 'Inter Tight', 'Segoe UI', -apple-system, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Layout */
    --topbar-h: 42px;
    --nav-h: 84px;
    --container: 1200px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-panel: 32px;
    --pill: 999px;
    --section-pad: clamp(72px, 9vw, 118px);

    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================
   THEME PALETTES — each seeds --brand + a matched,
   contrasting --accent. Grouped: light-shiny, light-matte,
   and full dark themes (which also flip the ground).
   ================================================ */

/* ---- Light · shiny (vivid) ---- */
:root[data-theme="amethyst"] { --brand: #7A3BFF; --accent: #DFFF1F; --accent-ink: #16130A; }
:root[data-theme="ocean"]    { --brand: #0EA5E9; --accent: #FDB022; --accent-ink: #241300; }
:root[data-theme="emerald"]  { --brand: #10B981; --accent: #FCD34D; --accent-ink: #241800; }
:root[data-theme="sunset"]   { --brand: #F97316; --accent: #38BDF8; --accent-ink: #051E2C; }
:root[data-theme="rose"]     { --brand: #F43F7E; --accent: #FACC15; --accent-ink: #241800; }
:root[data-theme="cobalt"]   { --brand: #2563EB; --accent: #C4F542; --accent-ink: #16210A; }
:root[data-theme="fuchsia"]  { --brand: #C026D3; --accent: #EEFF5A; --accent-ink: #1C2109; }
:root[data-theme="coral"]    { --brand: #FB5E4B; --accent: #2DD4BF; --accent-ink: #04231F; }
:root[data-theme="aqua"]     { --brand: #06B6D4; --accent: #FB7185; --accent-ink: #2C0710; }
:root[data-theme="grape"]    { --brand: #9333EA; --accent: #FCD34D; --accent-ink: #241800; }

/* ---- Light · matte (muted, sophisticated) ---- */
:root[data-theme="sage"]     { --brand: #6E8B6E; --accent: #C57B57; --accent-ink: #FFFFFF; }
:root[data-theme="clay"]     { --brand: #B4674E; --accent: #7F9C7F; --accent-ink: #FFFFFF; }
:root[data-theme="denim"]    { --brand: #4E6B8B; --accent: #D9A15C; --accent-ink: #2A1A05; }
:root[data-theme="plum"]     { --brand: #7C5E7C; --accent: #A0AE6E; --accent-ink: #1B2109; }
:root[data-theme="moss"]     { --brand: #5C6E3C; --accent: #C0663E; --accent-ink: #FFFFFF; }
:root[data-theme="stone"]    { --brand: #7A7267; --accent: #7E9B7E; --accent-ink: #12200F; }
:root[data-theme="dusty"]    { --brand: #A86F82; --accent: #6FA99E; --accent-ink: #04231F; }

/* ---- Grey · light site, greyscale brand + one pop accent ---- */
:root[data-theme="graphite"] { --brand: #4B5563; --accent: #F59E0B; --accent-ink: #241800; }
:root[data-theme="slate"]    { --brand: #556070; --accent: #C99A5B; --accent-ink: #241800; }
:root[data-theme="steel"]    { --brand: #546A7B; --accent: #38BDF8; --accent-ink: #051E2C; }
:root[data-theme="zinc"]     { --brand: #6B7280; --accent: #F43F7E; --accent-ink: #2C0710; }
:root[data-theme="ash"]      { --brand: #6B6B6B; --accent: #22C55E; --accent-ink: #04210F; }
:root[data-theme="pewter"]   { --brand: #7C8288; --accent: #A855F7; --accent-ink: #FFFFFF; }
:root[data-theme="gunmetal"] { --brand: #3F4A57; --accent: #EAB308; --accent-ink: #241800; }
:root[data-theme="fog"]      { --brand: #8A9099; --accent: #14B8A6; --accent-ink: #04231F; }

/* ---- Gunmetal lab · same grey brand, every accent to test ---- */
:root[data-theme="gm-amber"]   { --brand: #3F4A57; --accent: #F59E0B; --accent-ink: #241800; }
:root[data-theme="gm-orange"]  { --brand: #3F4A57; --accent: #FB8B3E; --accent-ink: #241200; }
:root[data-theme="gm-coral"]   { --brand: #3F4A57; --accent: #FB5E4B; --accent-ink: #2C0A05; }
:root[data-theme="gm-red"]     { --brand: #3F4A57; --accent: #EF4444; --accent-ink: #2C0707; }
:root[data-theme="gm-rose"]    { --brand: #3F4A57; --accent: #F43F7E; --accent-ink: #2C0712; }
:root[data-theme="gm-pink"]    { --brand: #3F4A57; --accent: #EC4899; --accent-ink: #2C0718; }
:root[data-theme="gm-fuchsia"] { --brand: #3F4A57; --accent: #D946EF; --accent-ink: #2A0730; }
:root[data-theme="gm-purple"]  { --brand: #3F4A57; --accent: #A855F7; --accent-ink: #FFFFFF; }
:root[data-theme="gm-violet"]  { --brand: #3F4A57; --accent: #8B5CF6; --accent-ink: #FFFFFF; }
:root[data-theme="gm-indigo"]  { --brand: #3F4A57; --accent: #6366F1; --accent-ink: #FFFFFF; }
:root[data-theme="gm-blue"]    { --brand: #3F4A57; --accent: #3B82F6; --accent-ink: #FFFFFF; }
:root[data-theme="gm-sky"]     { --brand: #3F4A57; --accent: #38BDF8; --accent-ink: #051E2C; }
:root[data-theme="gm-cyan"]    { --brand: #3F4A57; --accent: #06B6D4; --accent-ink: #04222A; }
:root[data-theme="gm-teal"]    { --brand: #3F4A57; --accent: #14B8A6; --accent-ink: #04231F; }
:root[data-theme="gm-emerald"] { --brand: #3F4A57; --accent: #10B981; --accent-ink: #04231A; }
:root[data-theme="gm-lime"]    { --brand: #3F4A57; --accent: #A3E635; --accent-ink: #14210A; }

/* ---- Dark · flips the whole ground ---- */
:root[data-theme="midnight"] { --brand: #A78BFA; --accent: #DFFF1F; --accent-ink: #16130A; }
:root[data-theme="obsidian"] { --brand: #FB8B3E; --accent: #FDE68A; --accent-ink: #241800; }
:root[data-theme="charcoal"] { --brand: #F05252; --accent: #E5E7EB; --accent-ink: #1A1A1A; }
:root[data-theme="carbon"]   { --brand: #A3E635; --accent: #F8FAFC; --accent-ink: #14210A; }
:root[data-theme="onyx"]     { --brand: #22D3EE; --accent: #FB7185; --accent-ink: #2C0710; }
:root[data-theme="ink"]      { --brand: #60A5FA; --accent: #FBBF24; --accent-ink: #241800; }
:root[data-theme="ember"]    { --brand: #FBBF24; --accent: #FB923C; --accent-ink: #241200; }
:root[data-theme="wine"]     { --brand: #FB6F92; --accent: #FDE68A; --accent-ink: #241800; }

/* shared dark ground + dark pastel cards for every dark theme */
:root[data-dark] {
    --bg: #0B0B12;
    --surface: #16161F;
    --surface-2: #1E1E2B;
    --ink: #F4F4F8;
    --ink-2: #FFFFFF;
    --body: #ABABBE;
    --muted: #767688;
    --line: #262634;
    --line-strong: #34344A;
    --card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
    --card-shadow-lift: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
    --p1-bg: #191325; --p1-bd: #2E2647; --p1-tl: #251C42; --p1-ik: #A78BFA; --p1-gl: rgba(139, 92, 246, 0.30);
    --p2-bg: #1F1420; --p2-bd: #3A2638; --p2-tl: #351A2E; --p2-ik: #F472B6; --p2-gl: rgba(236, 72, 153, 0.28);
    --p3-bg: #101E19; --p3-bd: #223A30; --p3-tl: #153026; --p3-ik: #34D399; --p3-gl: rgba(16, 185, 129, 0.26);
    --p4-bg: #101827; --p4-bd: #223247; --p4-tl: #15253E; --p4-ik: #60A5FA; --p4-gl: rgba(59, 130, 246, 0.26);
    --p5-bg: #201810; --p5-bd: #3B2E1E; --p5-tl: #352614; --p5-ik: #FBBF24; --p5-gl: rgba(245, 158, 11, 0.26);
    --p6-bg: #141425; --p6-bd: #29294A; --p6-tl: #1D1D3C; --p6-ik: #818CF8; --p6-gl: rgba(99, 102, 241, 0.26);
    /* dark hero/cta gradient — deep, not the bright accent --brand */
    --grad-light: color-mix(in srgb, var(--brand) 42%, #0a0a12);
    --grad-mid: color-mix(in srgb, var(--brand) 30%, #0a0a12);
    --grad-deep: color-mix(in srgb, var(--brand) 20%, #06060d);
    --grad-deepest: #06060d;
    --grad-glow: color-mix(in srgb, var(--brand) 42%, transparent);
    --grad-hi: color-mix(in srgb, var(--brand) 26%, transparent);
}

/* ---- dark: swap the white section surfaces to dark ---- */
:root[data-dark] .nav-drop-menu,
:root[data-dark] .ask-pill,
:root[data-dark] .case-card,
:root[data-dark] .faq-item,
:root[data-dark] .footer,
:root[data-dark] .theme-panel,
:root[data-dark] .nav-container .nav-links {
    background: var(--surface);
}

/* dark: the eyebrow chip needs a light label on a dark tint */
:root[data-dark] .eyebrow-pill {
    background: color-mix(in srgb, var(--brand) 20%, transparent);
    color: color-mix(in srgb, var(--brand) 45%, #fff);
    border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}

/* dark: lift the near-black company logos so they stay visible */
:root[data-dark] .logo-mono { filter: invert(1) brightness(1.9); }

/* ---- matte: the hero/cta become one flat, solid colour
        instead of the glossy multi-gradient ---- */
:root[data-matte] {
    --flat: color-mix(in srgb, var(--brand) 88%, #101014);
}
:root[data-matte] .hero-panel,
:root[data-matte] .cta-panel {
    background: var(--flat);
}
:root[data-matte] .hero-panel::before,
:root[data-matte] .cta-net { opacity: 0.5; }
:root[data-matte] .hero-aurora { display: none; }
:root[data-matte] .hero-map { opacity: 0.22; }

/* ================================================
   BASE
   ================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    font-size: 16.5px;
}

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); }

img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 10001;
    background: var(--purple);
    color: #fff;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    transition: top var(--transition-fast);
}
.skip-link:focus { top: 12px; }

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

.container-narrow { max-width: 820px; }

/* Anchor offsets under the sticky nav. Sections carry a large
   top padding of their own, so they only need a hair of margin to
   land the eyebrow just below the bar. The deep-link card headings
   sit below a ~175px preview, so they need a big offset to bring
   the whole card down below the nav. */
section[id] { scroll-margin-top: 10px; }
h3[id] { scroll-margin-top: calc(var(--nav-h) + 185px); }

/* ================================================
   SHARED TYPE
   ================================================ */
.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.12;
    text-align: center;
    color: var(--ink-2);
    margin-bottom: 18px;
    text-wrap: balance;
}

.section-subtitle {
    font-size: 1.06rem;
    color: var(--body);
    text-align: center;
    max-width: 620px;
    margin: 0 auto 54px;
    text-wrap: balance;
}

/* Lavender eyebrow pill — the Starbridge category chip */
.eyebrow-pill {
    display: table;
    margin: 0 auto 20px;
    padding: 6px 16px;
    background: var(--lav);
    color: var(--navy);
    border: 1px solid var(--purple-line);
    border-radius: var(--pill);
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.eyebrow-pill.on-dark {
    display: inline-block;
    margin: 0 0 20px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

/* ================================================
   BUTTONS — pills with the arrow-in-circle
   ================================================ */
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 7px 7px 7px 22px;
    border-radius: var(--pill);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

.btn-pill .pill-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.btn-pill .pill-circle svg { width: 15px; height: 15px; }

.btn-pill:hover { transform: translateY(-2px); }
.btn-pill:hover .pill-circle { transform: rotate(45deg); }

.btn-lg { padding: 10px 10px 10px 26px; font-size: 1rem; }
.btn-lg .pill-circle { width: 36px; height: 36px; }

/* Navy pill (primary) */
/* Primary CTA — carries the theme's accent so it always pops
   (Gunmetal → orange, Amethyst → lime, etc.) */
.btn-navy {
    background: var(--accent);
    color: var(--accent-ink);
}
.btn-navy:hover {
    background: color-mix(in srgb, var(--accent) 88%, #000);
    box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn-navy .pill-circle { background: var(--accent-ink); color: var(--accent); }

/* Accent pill (matches the primary CTA) */
.btn-purple {
    background: var(--accent);
    color: var(--accent-ink);
}
.btn-purple:hover {
    background: color-mix(in srgb, var(--accent) 88%, #000);
    box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn-purple .pill-circle { background: var(--accent-ink); color: var(--accent); }

/* Outline on dark (hero secondary) */
.btn-outline-light {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.55);
    padding: 12px 26px;
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

/* ================================================
   NAVIGATION
   ================================================ */
/* frosted glass — the blur lives on a pseudo-element so the navbar
   itself never becomes a containing block for the fixed mobile sheet */
.navbar {
    position: sticky;
    top: 0;
    height: var(--nav-h);
    border-bottom: 1px solid transparent;
    z-index: 9998;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--bg) 68%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    transition: background var(--transition-fast);
}

.navbar.scrolled {
    border-bottom-color: var(--line);
    box-shadow: 0 6px 24px -18px rgba(18, 20, 28, 0.22);
}
.navbar.scrolled::before { background: color-mix(in srgb, var(--bg) 78%, transparent); }

.nav-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 28px;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

.nav-container .logo { justify-self: start; }
.nav-container .nav-links { justify-self: center; }
.nav-container .nav-actions { justify-self: end; }

.logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--ink);
    transition: opacity var(--transition-fast);
}

.logo:hover { opacity: 0.8; }

.logo-icon { width: 32px; height: 32px; }

.logo-text {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-links > a,
.nav-drop-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 9px 13px;
    border-radius: 9px;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-links > a:hover,
.nav-drop-btn:hover,
.nav-drop.open .nav-drop-btn,
.nav-drop:focus-within .nav-drop-btn {
    background: var(--lav);
    color: var(--navy);
}

.nav-links > a.active { color: var(--purple); }

.nav-chev {
    width: 12px;
    height: 12px;
    transition: transform var(--transition-fast);
}

.nav-drop { position: relative; }

.nav-drop:hover .nav-chev,
.nav-drop.open .nav-chev,
.nav-drop:focus-within .nav-chev { transform: rotate(180deg); }

/* the dropdown panel */
.nav-drop-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 264px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--card-shadow-lift);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

/* a hover bridge so the pointer can travel to the panel */
.nav-drop-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.nav-drop:hover .nav-drop-menu,
.nav-drop.open .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-drop-menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 9px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-2);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-drop-menu a:hover {
    background: var(--lav);
    color: var(--navy);
}

.nav-drop-menu a svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--purple);
}

/* sheet-only footer (CTA + email) hidden on desktop */
.nav-sheet-foot { display: none; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-signin {
    color: var(--body);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.nav-signin:hover { color: var(--ink); }

/* email icon button */
.nav-mail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--body);
    border: 1px solid var(--line-strong);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.nav-mail svg { width: 19px; height: 19px; }

.nav-mail:hover {
    color: var(--brand);
    border-color: var(--purple-line);
    background: var(--lav);
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 10000;
}

.mobile-menu-btn span {
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: var(--transition-fast);
}

.nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(13, 2, 23, 0.4);
    z-index: 9997;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

body.menu-open .nav-scrim { opacity: 1; }

/* the page can't scroll behind an open menu */
body.menu-open { overflow: hidden; }

/* ================================================
   HERO — the rounded purple stage
   ================================================ */
.hero-wrap {
    padding: 14px clamp(10px, 1.6vw, 22px) 0;
}

.hero-panel {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    overflow: hidden;
    background:
        radial-gradient(52% 60% at 74% -2%, var(--grad-hi) 0%, transparent 58%),
        radial-gradient(70% 85% at 6% 8%, var(--grad-light) 0%, transparent 54%),
        radial-gradient(44% 52% at 72% 46%, var(--grad-glow) 0%, transparent 62%),
        radial-gradient(120% 130% at 90% 118%, var(--grad-deepest) 0%, transparent 62%),
        linear-gradient(150deg, var(--grad-light) 0%, var(--grad-mid) 46%, var(--grad-deep) 80%, var(--grad-deepest) 100%);
    padding: clamp(26px, 3.2vw, 44px) clamp(26px, 4.5vw, 72px) clamp(52px, 5.5vw, 82px);
}

/* the Starbridge move: the gradient dissolves into the page,
   so the panel has no bottom edge — the logo strip lands in
   the fade. A whisper of pink sits mid-dissolve. */
.hero-panel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(120px, 12.6vw, 190px);
    z-index: 2;
    /* Starbridge-style dissolve: stay fully clear behind the ticker
       (top ~58%), then ease into the page over many stops so there's
       no visible banding or hard edge — a long, buttery fade. */
    background:
        linear-gradient(180deg,
            transparent 0%,
            transparent 58%,
            color-mix(in srgb, var(--bg) 6%, transparent) 66%,
            color-mix(in srgb, var(--bg) 16%, transparent) 74%,
            color-mix(in srgb, var(--bg) 32%, transparent) 82%,
            color-mix(in srgb, var(--bg) 55%, transparent) 89%,
            color-mix(in srgb, var(--bg) 78%, transparent) 95%,
            var(--bg) 100%);
    pointer-events: none;
}

/* faint dot grid over the gradient */
.hero-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: radial-gradient(90% 80% at 70% 40%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(90% 80% at 70% 40%, #000 0%, transparent 78%);
    pointer-events: none;
}

/* drifting aurora — a soft pink-violet light that never sits still */
.hero-aurora {
    position: absolute;
    top: -30%;
    left: 30%;
    width: 70%;
    height: 120%;
    background: radial-gradient(45% 45% at 50% 50%, rgba(255, 150, 226, 0.34) 0%, rgba(190, 130, 255, 0.16) 45%, transparent 70%);
    filter: blur(46px);
    pointer-events: none;
    animation: auroraDrift 16s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
    0% { transform: translate(-6%, -4%) scale(1); }
    50% { transform: translate(5%, 6%) scale(1.12); }
    100% { transform: translate(-3%, 10%) scale(0.96); }
}

/* the dotted world behind the work-order cards */
.hero-map {
    position: absolute;
    top: -4%;
    right: -8%;
    width: 68%;
    max-width: 980px;
    opacity: 0.34;
    pointer-events: none;
    user-select: none;
    mask-image: linear-gradient(100deg, transparent 4%, #000 38%, #000 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(100deg, transparent 4%, #000 38%, #000 82%, transparent 100%);
    animation: mapBreathe 9s ease-in-out infinite;
}

@keyframes mapBreathe {
    0%, 100% { opacity: 0.28; }
    50% { opacity: 0.4; }
}

.hero-net {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.85;
}

.hero-net svg { width: 100%; height: 100%; }

/* routes draw themselves in, then the hubs pulse */
.net-lines path {
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: netDraw 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.net-lines path:nth-child(2) { animation-delay: 0.25s; }
.net-lines path:nth-child(3) { animation-delay: 0.5s; }
.net-lines path:nth-child(4) { animation-delay: 0.75s; }
.net-lines path:nth-child(5) { animation-delay: 1s; }
.net-lines path:nth-child(6) { animation-delay: 1.25s; }

@keyframes netDraw {
    to { stroke-dashoffset: 0; }
}

.net-dots circle {
    opacity: 0;
    animation: dotPulse 4.5s ease-in-out infinite;
}

.net-dots circle:nth-child(1) { animation-delay: 1.2s; }
.net-dots circle:nth-child(2) { animation-delay: 1.6s; }
.net-dots circle:nth-child(3) { animation-delay: 2s; }
.net-dots circle:nth-child(4) { animation-delay: 2.4s; }
.net-dots circle:nth-child(5) { animation-delay: 2.8s; }
.net-dots circle:nth-child(6) { animation-delay: 3.2s; }
.net-dots circle:nth-child(7) { animation-delay: 3.6s; }

@keyframes dotPulse {
    0% { opacity: 0; }
    12%, 55% { opacity: 0.85; }
    80%, 100% { opacity: 0.35; }
}

.hero-inner {
    position: relative;
    z-index: 3;
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.08;
    color: #fff;
    margin-bottom: 22px;
    text-wrap: balance;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.13rem);
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.7;
    max-width: 500px;
    margin-bottom: 34px;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.hero-assurance {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

/* ---- Floating work-order scene ---- */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* everything anchors to the card, so nothing can drift into
   anything else at any width. The whole unit (card + fused chips)
   drifts together as one — a calm hover, not a bounce. */
.card-wrap {
    position: relative;
    width: min(340px, 100%);
    margin: 34px 6px 36px auto;
    animation: cardDrift 9s ease-in-out infinite;
}

@keyframes cardDrift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* floating pill chips — separate from the card, spaced out,
   with a clear gap so they hover above and below it */
.float-chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--pill);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    animation: chipIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* white pill floating above the card */
.chip-lime {
    top: -46px;
    left: -22px;
    background: #fff;
    color: var(--ink-2);
    border: 1px solid var(--line);
    box-shadow: 0 14px 32px -14px rgba(28, 33, 42, 0.32);
    animation-delay: 1.2s;
}
.chip-lime .chip-dot { background: var(--accent); }

/* amber pill floating below the card */
.chip-glass {
    bottom: -46px;
    right: -22px;
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 14px 32px -14px rgba(28, 33, 42, 0.36);
    animation-delay: 1.5s;
}

@keyframes chipIn {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

.chip-glass .chip-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--accent-ink);
    color: var(--accent);
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1;
}

.chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-ink);
    animation: chipPulse 2s ease-in-out infinite;
}

@keyframes chipPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-ink) 45%, transparent); }
    55% { box-shadow: 0 0 0 5px transparent; }
}

/* stars over the map */
.twinkle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    animation: twinkle 4.2s ease-in-out infinite;
    pointer-events: none;
}

.twinkle.t1 { top: 12%; left: 8%; animation-delay: 0.8s; }
.twinkle.t2 { top: 68%; left: 2%; animation-delay: 2.1s; }
.twinkle.t3 { top: 28%; right: -4%; animation-delay: 3.3s; }

@keyframes twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    45% { opacity: 0.9; transform: scale(1.15); box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.4); }
    60% { opacity: 0.5; }
}

.hero-card {
    background: #fff;
    border-radius: 16px;
    /* glass ring + deep lift, the Starbridge card treatment */
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.12),
        0 24px 60px -20px rgba(28, 33, 42, 0.55);
}

.card-main {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hc-titlebar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.hc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lav-deep);
}

.hc-name {
    margin-left: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--body);
    letter-spacing: 0.02em;
}

.hc-body { padding: 14px 16px 10px; }

.hc-brief {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.5;
    color: var(--ink-2);
    min-height: 3em;
    margin-bottom: 10px;
}

.hc-caret {
    color: var(--purple);
    font-weight: 400;
    animation: caretBlink 0.85s step-end infinite;
}

@keyframes caretBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.hc-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 102px;
    overflow: hidden;
}

.tool-row {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--lav);
    border: 1px solid var(--lav-deep);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--body);
    opacity: 0;
    transform: translateX(-12px);
    animation: rowIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* the accent bar wipes in from the left as each row lands */
.tool-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 8px 0 0 8px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    animation: rowBar 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}
.tool-row { position: relative; overflow: hidden; }

@keyframes rowIn {
    0% { opacity: 0; transform: translateX(-12px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes rowBar { to { transform: scaleY(1); } }

.tool-row .row-check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    animation: checkIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.22s forwards;
}

@keyframes checkIn { to { transform: scale(1); } }

.tool-row .row-check svg {
    width: 9px;
    height: 9px;
    stroke: var(--accent-ink);
    stroke-width: 3.2;
    fill: none;
}

.hc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
    border-top: 1px dashed var(--line-strong);
}

.hc-note { font-size: 0.76rem; color: var(--muted); }

.hc-result {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--accent) 82%, #000);
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.hc-result.stamped { opacity: 1; transform: translateY(0); }

@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

/* ---- slim stat ticker riding the bottom of the hero graphic ---- */
.hero-ticker {
    position: relative;
    z-index: 3;
    max-width: var(--container);
    margin: clamp(22px, 3vw, 38px) auto 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.hero-ticker-track {
    display: flex;
    width: max-content;
    animation: htScroll 40s linear infinite;
}

.hero-ticker:hover .hero-ticker-track { animation-play-state: paused; }

.hero-ticker-group { display: flex; align-items: center; }

@keyframes htScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ht {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 0.98rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 1px 4px rgba(10, 4, 30, 0.35);
}

.ht b {
    color: var(--accent);
    font-weight: 700;
    margin-right: 7px;
    text-shadow: 0 1px 4px rgba(10, 4, 30, 0.4);
}

.ht-sep {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    margin: 0 24px;
}

@media (prefers-reduced-motion: reduce) {
    .hero-ticker-track { animation-duration: 140s; }
}

/* ================================================
   TRUST STRIP · scrolling company marquee
   ================================================ */
.trust-strip {
    /* sits just under the hero fade */
    margin-top: clamp(-8px, -0.5vw, 0px);
    padding: clamp(18px, 2.4vw, 32px) 0 clamp(48px, 6vw, 78px);
    text-align: center;
    overflow: hidden;
    position: relative;
    z-index: 3;
}

.trust-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 14px;
}

.trust-kicker i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--purple-line);
}

.trust-caption {
    font-size: 1.05rem;
    color: var(--body);
    max-width: 640px;
    margin: 0 auto 34px;
    padding: 0 28px;
    line-height: 1.55;
    text-wrap: balance;
}

/* the moving band, faded to nothing at both edges */
.logo-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.logo-track {
    display: flex;
    width: max-content;
    animation: logoScroll 68s linear infinite;
}

.logo-marquee:hover .logo-track { animation-play-state: paused; }

.logo-group {
    display: flex;
    align-items: center;
    gap: clamp(42px, 5vw, 76px);
    padding-right: clamp(42px, 5vw, 76px);
}

@keyframes logoScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-family: var(--font-display);
    font-size: clamp(1.24rem, 1.8vw, 1.62rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--ink-2);
    opacity: 0.94;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.trust-item:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.trust-item img,
.trust-item .ti-logo {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .logo-track { animation-duration: 220s; }
}

/* ================================================
   ASK — describe the job
   ================================================ */
.ask-section { padding: clamp(48px, 6vw, 82px) 0 0; }

.ask-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 700px;
    margin: 0 auto 16px;
    padding: 8px 8px 8px 26px;
    background: #fff;
    border: 1px solid var(--purple-line);
    border-radius: var(--pill);
    box-shadow: 0 0 0 6px var(--lav), var(--card-shadow);
}

.ask-text {
    font-family: var(--font-display);
    font-size: clamp(0.92rem, 1.5vw, 1.05rem);
    font-weight: 500;
    color: var(--ink-2);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ask-caret {
    color: var(--purple);
    font-weight: 400;
    animation: caretBlink 0.85s step-end infinite;
}

.ask-pill .btn-pill { flex-shrink: 0; }

.ask-caption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted);
}

/* ================================================
   BENTO — what we build
   ================================================ */
.build-section { padding: var(--section-pad) 0 0; }

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.bento-card {
    background: var(--lav);
    border: 1px solid var(--lav-deep);
    border-radius: var(--radius-lg);
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-lift);
}

.bento-shot { margin-bottom: 20px; }

.mini-window {
    background: #fff;
    border: 1px solid var(--lav-deep);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.mw-bar {
    display: flex;
    gap: 5px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
}

.mw-bar span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lav-deep);
}

.mw-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 104px;
    justify-content: center;
}

.mw-kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8rem;
}

.mw-kv span { color: var(--muted); }
.mw-kv b { color: var(--ink-2); font-weight: 600; }
.mw-kv b.ok { color: var(--purple); }
.mw-kv b.pending { color: var(--muted); font-weight: 500; }
.mw-kv.total { border-top: 1px dashed var(--line-strong); padding-top: 8px; }

.mw-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 52px;
    padding-bottom: 2px;
}

.mw-bars i {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: var(--lav-deep);
}

.mw-bars i.hl { background: var(--purple); }

.mw-sync {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 6px 0;
}

.mw-sync .node {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--body);
    background: var(--lav);
    border: 1px solid var(--lav-deep);
    padding: 4px 10px;
    border-radius: 7px;
}

.mw-sync .node.hub {
    background: var(--purple);
    border-color: var(--purple);
    color: #fff;
}

.mw-sync .link {
    flex: 1;
    max-width: 34px;
    height: 1px;
    background-image: linear-gradient(90deg, var(--purple-line) 55%, transparent 55%);
    background-size: 7px 1px;
}

.mw-progress {
    height: 7px;
    border-radius: 4px;
    background: var(--lav);
    overflow: hidden;
}

.mw-progress i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--purple);
}

/* ---------- living animation inside the What-we-build mockups ---------- */
/* bar charts breathe */
.bento-card .mw-bars i { transform-origin: bottom; animation: mwBar 2.8s ease-in-out infinite; }
.bento-card .mw-bars i:nth-child(2) { animation-delay: 0.2s; }
.bento-card .mw-bars i:nth-child(3) { animation-delay: 0.4s; }
.bento-card .mw-bars i:nth-child(4) { animation-delay: 0.6s; }
.bento-card .mw-bars i:nth-child(5) { animation-delay: 0.8s; }
@keyframes mwBar { 0%, 100% { transform: scaleY(0.6); } 50% { transform: scaleY(1); } }

/* progress bars fill on a loop */
.bento-card .mw-progress i { animation: mwFill 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes mwFill { 0% { width: 18%; } 45%, 55% { width: 72%; } 100% { width: 18%; } }

/* the AI hub pulses, and a data packet travels each connector */
.bento-card .mw-sync .node.hub { animation: mwHub 2s ease-in-out infinite; }
@keyframes mwHub {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--purple) 55%, transparent); }
    55% { box-shadow: 0 0 0 6px transparent; }
}
.bento-card .mw-sync .link { position: relative; overflow: hidden; }
.bento-card .mw-sync .link::after {
    content: '';
    position: absolute;
    top: 50%; left: 0;
    width: 5px; height: 5px; margin-top: -2.5px;
    border-radius: 50%;
    background: var(--accent);
    animation: mwFlow 1.8s linear infinite;
}
.bento-card .mw-sync .link:last-of-type::after { animation-delay: 0.9s; }
@keyframes mwFlow {
    0% { left: -6px; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bento-card .mw-bars i,
    .bento-card .mw-progress i,
    .bento-card .mw-sync .node.hub,
    .bento-card .mw-sync .link::after { animation: none; }
}

.mw-chat {
    font-size: 0.84rem;
    font-style: italic;
    color: var(--body);
    background: var(--lav);
    border-radius: 8px;
    padding: 8px 12px;
}

.bento-card h3 {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink-2);
    margin-bottom: 8px;
}

.bento-card p {
    font-size: 0.92rem;
    color: var(--body);
    line-height: 1.65;
    margin-bottom: 18px;
    flex-grow: 1;
}

.bento-link {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--purple);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.bento-link:hover { color: var(--purple-hover); }
.bento-link span { display: inline-block; transition: transform var(--transition-fast); }
.bento-link:hover span { transform: translateX(4px); }

/* --- animated accent touches in the What-we-build section --- */
.bento-card { position: relative; overflow: hidden; }

/* an accent line sweeps across the top on hover */
.bento-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent);
    transform: translateX(-101%);
    transition: transform var(--transition-smooth);
    z-index: 1;
}
.bento-card:hover::after { transform: translateX(0); }

/* each mock window gets a live, pulsing accent dot */
.bento-card .mw-bar span:nth-child(3) {
    background: var(--accent);
    animation: mwLive 1.9s ease-in-out infinite;
}
.bento-card:nth-child(2) .mw-bar span:nth-child(3) { animation-delay: 0.3s; }
.bento-card:nth-child(3) .mw-bar span:nth-child(3) { animation-delay: 0.6s; }
.bento-card:nth-child(4) .mw-bar span:nth-child(3) { animation-delay: 0.9s; }
.bento-card:nth-child(5) .mw-bar span:nth-child(3) { animation-delay: 1.2s; }
.bento-card:nth-child(6) .mw-bar span:nth-child(3) { animation-delay: 1.5s; }

@keyframes mwLive {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 80%, transparent); }
    60% { box-shadow: 0 0 0 5px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .bento-card .mw-bar span:nth-child(3) { animation: none; }
}

/* accent hint flashed on the card a dropdown link points to */
.card-hint {
    animation: cardHint 2.4s ease;
    position: relative;
    z-index: 2;
}
@keyframes cardHint {
    0%   { box-shadow: 0 0 0 0 var(--accent); }
    10%  { box-shadow: 0 0 0 4px var(--accent), 0 16px 40px -10px color-mix(in srgb, var(--accent) 55%, transparent); }
    35%  { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
    55%  { box-shadow: 0 0 0 4px var(--accent), 0 16px 40px -10px color-mix(in srgb, var(--accent) 45%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ================================================
   PASTEL CARD PALETTES — one cohesive set of six
   soft tints, cycled across the team / process /
   pricing cards so each grid reads colourful but
   still on-brand (Starbridge's multi-tone bento)
   ================================================ */
.team-card:nth-child(6n+1),
.process-card:nth-child(6n+1),
.price-card:nth-child(6n+1) {
    --c-bg: var(--p1-bg); --c-border: var(--p1-bd); --c-tile: var(--p1-tl); --c-ink: var(--p1-ik); --c-glow: var(--p1-gl);
}
.team-card:nth-child(6n+2),
.process-card:nth-child(6n+2),
.price-card:nth-child(6n+2) {
    --c-bg: var(--p2-bg); --c-border: var(--p2-bd); --c-tile: var(--p2-tl); --c-ink: var(--p2-ik); --c-glow: var(--p2-gl);
}
.team-card:nth-child(6n+3),
.process-card:nth-child(6n+3),
.price-card:nth-child(6n+3) {
    --c-bg: var(--p3-bg); --c-border: var(--p3-bd); --c-tile: var(--p3-tl); --c-ink: var(--p3-ik); --c-glow: var(--p3-gl);
}
.team-card:nth-child(6n+4),
.process-card:nth-child(6n+4),
.price-card:nth-child(6n+4) {
    --c-bg: var(--p4-bg); --c-border: var(--p4-bd); --c-tile: var(--p4-tl); --c-ink: var(--p4-ik); --c-glow: var(--p4-gl);
}
.team-card:nth-child(6n+5),
.process-card:nth-child(6n+5),
.price-card:nth-child(6n+5) {
    --c-bg: var(--p5-bg); --c-border: var(--p5-bd); --c-tile: var(--p5-tl); --c-ink: var(--p5-ik); --c-glow: var(--p5-gl);
}
.team-card:nth-child(6n+6),
.process-card:nth-child(6n+6),
.price-card:nth-child(6n+6) {
    --c-bg: var(--p6-bg); --c-border: var(--p6-bd); --c-tile: var(--p6-tl); --c-ink: var(--p6-ik); --c-glow: var(--p6-gl);
}

/* ================================================
   TEAMS — who it's for
   ================================================ */
.teams-section { padding: var(--section-pad) 0 0; }

.teams-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.team-card {
    position: relative;
    overflow: hidden;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 26px 26px 24px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* a soft colour bloom in the corner */
.team-card::before {
    content: '';
    position: absolute;
    top: -46px;
    right: -46px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--c-glow) 0%, transparent 70%);
    opacity: 0.9;
    transition: transform var(--transition-smooth), opacity var(--transition-fast);
    pointer-events: none;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px -20px var(--c-glow), var(--card-shadow-lift);
}

.team-card:hover::before { transform: scale(1.35); opacity: 1; }

.team-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--c-tile);
    color: var(--c-ink);
    margin-bottom: 16px;
    box-shadow: 0 6px 16px -8px var(--c-glow);
}

.team-icon svg { width: 22px; height: 22px; }

.team-card h3 {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--ink-2);
    margin-bottom: 7px;
}

.team-card p {
    position: relative;
    font-size: 0.9rem;
    color: var(--body);
    line-height: 1.6;
}

/* ================================================
   PROCESS
   ================================================ */
.process-section { padding: var(--section-pad) 0 0; }

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.process-card {
    position: relative;
    overflow: hidden;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 26px 24px 24px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.process-card::before {
    content: '';
    position: absolute;
    top: -46px;
    right: -46px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--c-glow) 0%, transparent 70%);
    transition: transform var(--transition-smooth);
    pointer-events: none;
}

.process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px -20px var(--c-glow), var(--card-shadow-lift);
}

.process-card:hover::before { transform: scale(1.35); }

/* the big ghost step number in the corner */
.process-card .pc-ghost {
    position: absolute;
    top: 8px;
    right: 16px;
    font-family: var(--font-display);
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--c-ink);
    opacity: 0.14;
    pointer-events: none;
}

.pc-num {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--c-ink);
    background: var(--c-tile);
    border-radius: 10px;
    padding: 0 10px;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px -8px var(--c-glow);
}

.process-card h3 {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.14rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--ink-2);
    margin-bottom: 8px;
}

.process-card p {
    position: relative;
    font-size: 0.9rem;
    color: var(--body);
    line-height: 1.65;
}

/* ================================================
   EXAMPLE BUILDS — case cards
   ================================================ */
.cases-section { padding: var(--section-pad) 0 0; }

.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.case-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    padding: 26px 26px 24px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.case-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-lift);
}

.case-pill {
    align-self: flex-start;
    background: var(--lime);
    color: var(--accent-ink);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 13px;
    border-radius: var(--pill);
    margin-bottom: 16px;
}

.case-card h3 {
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--ink-2);
    margin-bottom: 18px;
    flex-grow: 1;
}

.case-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px dashed var(--line-strong);
    padding-top: 16px;
    margin-bottom: 16px;
}

.case-result b {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--purple);
}

.case-result span { font-size: 0.84rem; color: var(--muted); }

.case-link {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.case-link:hover { color: var(--purple); }

/* ================================================
   PRICING
   ================================================ */
.pricing-section { padding: var(--section-pad) 0 0; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.price-card {
    position: relative;
    overflow: hidden;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 28px 26px 26px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.price-card::before {
    content: '';
    position: absolute;
    top: -46px;
    right: -46px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--c-glow) 0%, transparent 70%);
    transition: transform var(--transition-smooth);
    pointer-events: none;
}

.price-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px -20px var(--c-glow), var(--card-shadow-lift);
}

.price-card:hover::before { transform: scale(1.35); }

.price-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--c-tile);
    color: var(--c-ink);
    box-shadow: 0 6px 16px -8px var(--c-glow);
    margin-bottom: 16px;
}

.price-icon svg { width: 22px; height: 22px; }

.price-card h3 {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--ink-2);
    margin-bottom: 8px;
}

.price-card p {
    position: relative;
    font-size: 0.92rem;
    color: var(--body);
    line-height: 1.65;
}

/* ================================================
   FAQ
   ================================================ */
.faq-section { padding: var(--section-pad) 0 0; }

.faq-section .section-title { margin-bottom: 44px; }

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    transition: border-color var(--transition-fast);
}

.faq-item.open { border-color: var(--purple-line); }

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 19px 22px;
    text-align: left;
    color: var(--ink-2);
    font-family: var(--font-display);
    font-size: 1.04rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color var(--transition-fast);
}

.faq-q:hover { color: var(--purple); }

.faq-icon {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    color: var(--muted);
    transition: transform var(--transition-smooth), color var(--transition-fast);
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
    color: var(--purple);
}

.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-smooth);
}

.faq-item.open .faq-a { grid-template-rows: 1fr; }

.faq-a-inner { overflow: hidden; }

.faq-a-inner p {
    padding: 0 22px 20px;
    color: var(--body);
    font-size: 0.98rem;
    line-height: 1.75;
    max-width: 660px;
}

/* ================================================
   FINAL CTA — the gradient stage returns
   ================================================ */
.cta-section {
    padding: var(--section-pad) clamp(10px, 1.6vw, 22px) 0;
}

.cta-panel {
    position: relative;
    max-width: 1560px;
    margin: 0 auto;
    border-radius: var(--radius-panel);
    overflow: hidden;
    /* deliberately lighter than the hero: no deepest stop, a
       brighter highlight, so the closing panel feels airy */
    background:
        radial-gradient(120% 105% at 12% -10%, rgba(255, 255, 255, 0.30) 0%, transparent 48%),
        radial-gradient(90% 95% at 92% 6%, var(--grad-hi) 0%, transparent 54%),
        radial-gradient(130% 130% at 18% 120%, var(--grad-deep) 0%, transparent 60%),
        linear-gradient(205deg, var(--grad-light) 0%, var(--grad-mid) 52%, var(--grad-deep) 100%);
    padding: clamp(48px, 6.5vw, 88px) clamp(24px, 4.5vw, 72px);
}

.cta-net {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: radial-gradient(85% 85% at 30% 30%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(85% 85% at 30% 30%, #000 0%, transparent 80%);
    pointer-events: none;
}

.cta-inner {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 68px);
    align-items: center;
}

.cta-copy h2 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.2vw, 3.15rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 18px;
    text-wrap: balance;
}

.cta-copy > p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.65;
    margin-bottom: 28px;
    max-width: 500px;
}

.cta-benefits {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 26px;
}

.cta-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cta-benefits svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--lime);
}

.cta-benefits span { color: rgba(255, 255, 255, 0.92); font-size: 1.05rem; }

.cta-note {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.75);
}

.cta-note a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.cta-note a:hover { text-decoration: underline; }
.cta-note a.copied { color: var(--lime); }

.cta-cal-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px -22px rgba(28, 33, 42, 0.55);
    padding: clamp(12px, 1.6vw, 18px);
    width: 100%;
    max-width: 440px;
    justify-self: end;
}

/* Match the old site: let Cal.com auto-size its own iframe to the
   month it renders, so the full calendar shows with no scroll and
   no cut-off. min-height is just a floor for the loading state. */
.cal-embed {
    position: relative;
    width: 100%;
    min-height: 300px;
    border-radius: var(--radius);
}

.cal-embed iframe {
    width: 100% !important;
    border: none;
}

.cal-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    color: var(--body);
    font-size: 0.95rem;
    padding: 24px;
}

.cal-spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--lav-deep);
    border-top-color: var(--purple);
    animation: calSpin 0.8s linear infinite;
}

.cal-loading a {
    color: var(--purple);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
}

.cal-loading a:hover { text-decoration: underline; }

@keyframes calSpin { to { transform: rotate(360deg); } }

.cal-loading.cal-failed .cal-spinner { display: none; }

.cal-loading.cal-failed::before {
    content: "Open the booking calendar:";
    color: var(--ink-2);
    font-weight: 600;
    font-size: 1.02rem;
}

.cal-loading.cal-failed a {
    padding: 11px 20px;
    border: 1px solid var(--purple);
    border-radius: var(--pill);
    font-size: 0.95rem;
}

.cal-loading.cal-failed > span:not(.cal-spinner) { display: none; }

/* ================================================
   FOOTER
   ================================================ */
.footer {
    margin-top: var(--section-pad);
    border-top: 1px solid var(--line);
    padding: 64px 0 32px;
    background: #fff;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 56px;
    margin-bottom: 52px;
}

.footer-brand { max-width: 300px; }

.footer-brand .logo { margin-bottom: 14px; }

.footer-brand p {
    color: var(--body);
    font-size: 0.92rem;
    line-height: 1.7;
}

.footer-links {
    display: flex;
    gap: clamp(40px, 6vw, 80px);
    flex-wrap: wrap;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-col h4 {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink-2);
    margin-bottom: 6px;
}

.footer-col a {
    font-size: 0.9rem;
    color: var(--body);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-col a:hover { color: var(--purple); }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding-top: 26px;
}

.footer-bottom p {
    font-size: 0.82rem;
    color: var(--muted);
}

/* ================================================
   THEME PICKER — floating palette dock
   ================================================ */
.theme-dock {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.theme-fab {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--brand) 55%, transparent), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.theme-fab:hover { transform: translateY(-3px) scale(1.04); }
.theme-fab svg { width: 24px; height: 24px; }

.theme-panel {
    width: min(320px, calc(100vw - 40px));
    max-height: min(620px, calc(100vh - 110px));
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 24px 60px -18px rgba(28, 33, 42, 0.35);
    padding: 18px;
    transform-origin: bottom right;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.96);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.theme-group-label {
    grid-column: 1 / -1;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 10px 0 2px;
}

.theme-swatches > .theme-group-label:first-child { margin-top: 0; }

.theme-dock.open .theme-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.theme-panel-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 14px;
}

.theme-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.theme-swatch {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    background: var(--sw);
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.theme-swatch::after {
    content: '';
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sw-accent);
    box-shadow: 0 0 0 1.5px #fff;
}

.theme-swatch:hover { transform: scale(1.08); }

.theme-swatch.active {
    border-color: var(--ink-2);
    transform: scale(1.06);
}

.theme-swatch.active::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (max-width: 560px) {
    .theme-dock { right: 14px; bottom: 14px; }
    .theme-fab { width: 46px; height: 46px; }
}

/* ================================================
   REVEALS & MOTION
   ================================================ */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.delay-1 { animation-delay: 0.12s; }
.delay-2 { animation-delay: 0.24s; }
.delay-3 { animation-delay: 0.36s; }

@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* stagger siblings slightly */
.reveal.in:nth-child(2) { transition-delay: 0.07s; }
.reveal.in:nth-child(3) { transition-delay: 0.14s; }
.reveal.in:nth-child(4) { transition-delay: 0.21s; }
.reveal.in:nth-child(5) { transition-delay: 0.28s; }
.reveal.in:nth-child(6) { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .fade-up,
    .reveal {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }

    .float-chip,
    .card-main,
    .chip-dot,
    .twinkle,
    .hero-aurora,
    .hero-map { animation: none; }

    .float-chip { opacity: 1; }
    .twinkle { opacity: 0.5; }

    .net-lines path { animation: none; stroke-dashoffset: 0; }
    .net-dots circle { animation: none; opacity: 0.6; }
}

/* ================================================
   RESPONSIVE
   ================================================ */

/* ---- Laptop tier ----
   The hero is tuned for large desktop monitors, where the 1400px panel
   floats centred with breathing room. On laptop-class viewports the panel
   fills the screen edge-to-edge, so the same sizes read as "zoomed in" and
   the logo strip gets pushed below the fold. Scale the hero down and tighten
   its vertical rhythm so it feels roomy and the logos come into view.
   Height-independent so it helps 13"–15" laptops; big monitors (>1680px)
   keep the look the user likes. */
@media (min-width: 1081px) and (max-width: 1680px) {
    .hero-panel {
        /* narrow the panel so it floats with real side gutters like on a
           big monitor, instead of spanning the whole laptop screen */
        max-width: 1180px;
        padding: clamp(20px, 2.2vw, 32px) clamp(24px, 3.4vw, 52px) clamp(32px, 3.4vw, 50px);
    }

    .hero-title {
        font-size: clamp(2.1rem, 3.6vw, 3.05rem);
        margin-bottom: 16px;
    }

    .hero-subtitle {
        font-size: clamp(0.98rem, 1.2vw, 1.05rem);
        line-height: 1.6;
        margin-bottom: 22px;
    }

    .hero-cta { margin-bottom: 16px; }

    .hero-inner { gap: clamp(26px, 3.2vw, 46px); }

    /* shrink the work-order card cluster (card + floating chips together)
       so it matches the smaller headline */
    .hero-visual {
        transform: scale(0.9);
        transform-origin: center right;
    }

    /* pull the logo strip up into the fade rather than far below it;
       keep the fade in proportion with the shorter panel padding */
    .hero-panel::after { height: clamp(74px, 7.6vw, 114px); }
    .trust-strip { padding-top: clamp(8px, 1.2vw, 16px); }
}

@media (max-width: 1080px) {
    .bento-grid,
    .teams-grid,
    .cases-grid,
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }

    .process-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; }

    .hero-visual { justify-content: center; }

    .card-wrap { margin: 46px auto 54px; }

    .cta-inner { grid-template-columns: 1fr; }
}

/* ---- Mobile & tablet nav: a full-width sheet that drops
        from under the bar (Starbridge's mobile pattern) ---- */
@media (max-width: 1080px) {
    /* condense the bar: logo hard-left, controls hard-right,
       nothing floating in the middle */
    :root { --nav-h: 66px; }

    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 18px;
    }

    .nav-actions { gap: 12px; }

    .logo-text { font-size: 1.28rem; }
    .logo-icon { width: 34px; height: 34px; }
    .logo { gap: 10px; }

    .nav-container .nav-links {
        position: fixed;
        justify-self: stretch;
        top: var(--menu-top, var(--nav-h));
        left: 0;
        right: 0;
        max-height: calc(100dvh - var(--menu-top, var(--nav-h)));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 30px 60px -30px rgba(18, 20, 28, 0.32);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 22px calc(24px + env(safe-area-inset-bottom, 0px));
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s;
        z-index: 9998;
    }

    body.menu-open .nav-links {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links > a {
        font-size: 1.08rem;
        font-weight: 600;
        color: var(--ink);
        padding: 15px 4px;
        border-radius: 0;
        border-bottom: 1px solid var(--line);
    }

    .nav-links > a:hover { background: none; color: var(--purple); }

    /* dropdowns become tap-to-expand accordions, collapsed by
       default so the sheet only shows the top-level items */
    .nav-drop { position: static; border-bottom: 1px solid var(--line); }

    .nav-drop-btn {
        width: 100%;
        justify-content: space-between;
        padding: 15px 4px;
        font-family: var(--font-body);
        font-size: 1.08rem;
        font-weight: 600;
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink);
        background: none;
        border-radius: 0;
    }

    .nav-drop-btn:hover { background: none; color: var(--purple); }

    .nav-chev { display: inline-block; width: 15px; height: 15px; }
    .nav-drop.open .nav-drop-btn { color: var(--purple); }
    .nav-drop.open .nav-chev { transform: rotate(180deg); }

    .nav-drop-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        background: none;
        min-width: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* override the desktop centred-panel transform so the open
       accordion doesn't shift off-screen on mobile */
    .nav-drop.open .nav-drop-menu,
    .nav-drop:hover .nav-drop-menu,
    .nav-drop:focus-within .nav-drop-menu {
        transform: none;
        left: auto;
    }

    .nav-drop.open .nav-drop-menu { max-height: 420px; }

    .nav-drop-menu::before { display: none; }

    .nav-drop-menu a { padding: 11px 4px 11px 14px; font-size: 0.98rem; }
    .nav-drop-menu a:last-child { padding-bottom: 16px; }

    .nav-sheet-foot {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding-top: 20px;
    }

    .nav-sheet-foot .nav-mobile-cta {
        display: inline-flex;
        justify-content: space-between;
        width: 100%;
    }

    .nav-sheet-email {
        text-align: center;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--body);
        text-decoration: none;
    }

    .nav-sheet-email:hover { color: var(--purple); }

    .nav-signin, .nav-mail { display: none; }
    .mobile-menu-btn { display: flex; }

    body.menu-open .nav-scrim { display: block; }

    body.menu-open .mobile-menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    body.menu-open .mobile-menu-btn span:nth-child(2) { opacity: 0; }
    body.menu-open .mobile-menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* the bar CTA survives down to phone size, then hands over
   to the sheet's full-width CTA */
@media (max-width: 560px) {
    .nav-cta { display: none; }
    .logo-text { font-size: 1.24rem; }
}

@media (max-width: 640px) {
    /* two compact cards per row so a page shows ~2 at once */
    .bento-grid,
    .teams-grid,
    .cases-grid,
    .pricing-grid,
    .process-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    /* What we build: show only the first four on phones */
    .bento-grid .bento-card:nth-child(n+5) { display: none; }

    /* shrink every card so two rows fit on screen */
    .bento-card { padding: 12px 12px 14px; border-radius: 13px; }
    .bento-shot { margin-bottom: 12px; }
    .mw-body { padding: 9px 10px; min-height: 76px; gap: 6px; }
    .mw-kv { font-size: 0.7rem; gap: 6px; }
    .mw-bar { padding: 7px 9px; }
    .bento-card h3 { font-size: 0.98rem; margin-bottom: 5px; }
    .bento-card p {
        font-size: 0.8rem; line-height: 1.45; margin-bottom: 12px;
        display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    }
    .bento-link { font-size: 0.84rem; }

    .team-card, .price-card { padding: 16px 15px 16px; }
    .process-card { padding: 16px 14px 16px; }
    .case-card { padding: 16px 15px 16px; }
    .team-icon, .price-icon { width: 38px; height: 38px; margin-bottom: 11px; }
    .team-card h3, .price-card h3, .process-card h3 { font-size: 1rem; }
    .team-card p, .price-card p, .process-card p { font-size: 0.82rem; line-height: 1.45; }
    .case-card h3 { font-size: 0.98rem; margin-bottom: 12px; }
    .case-result b { font-size: 1.15rem; }
    .pc-ghost { font-size: 2.6rem; }

    .section-subtitle { margin-bottom: 34px; }

    .hero-wrap,
    .cta-section { padding-left: 8px; padding-right: 8px; }

    .hero-panel { border-radius: 22px; }
    .cta-panel { border-radius: 22px; }

    .hero-cta .btn-pill { width: 100%; justify-content: space-between; }
    .hero-cta .btn-outline-light { justify-content: center; }

    .ask-pill {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
        border-radius: 22px;
    }

    .ask-pill .btn-pill { justify-content: space-between; }
    .ask-text { white-space: normal; min-height: 2.4em; }

    .card-wrap { margin: 44px auto 52px; }
    .chip-lime { left: 0; }
    .chip-glass { left: 0; }
    .hero-map { width: 150%; top: 0; right: -25%; opacity: 0.14; }

    .footer-content { flex-direction: column; gap: 36px; }
    .footer-bottom { justify-content: center; text-align: center; }

    .topbar { gap: 8px; }
}