/* ================================================================
   FlowCraft Web — styles.css

   FILE STRUCTURE GUIDE:
   1. Variables & Reset
   2. Typography & Base
   3. Layout Utilities
   4. Buttons
   5. Navbar
   6. Hero Section + Dashboard Mockup
   7. Benefit Bar
   8. Problem Section
   9. Services Section
   10. Packages Section
   11. Demo Section
   12. Automation Flow Section
   13. How It Works Section
   14. Why Section
   15. FAQ Section
   16. CTA Section
   17. Contact Form Section
   18. Footer
   19. Animations
   20. Mobile Responsive

   TO CHANGE COLORS: edit the :root variables below
   TO CHANGE FONTS: change the font-family in the body rule
================================================================ */

/* ================================================================
   1. VARIABLES & RESET
   EDIT these to change your brand colors globally
================================================================ */
:root {
    /* Colors — edit these to change the whole site at once */
    --bg:           #FFFFFF;   /* Main background */
    --bg-card:      #FFFFFF;   /* Card backgrounds */
    --blue:         #2563EB;   /* Primary blue — buttons, accents */
    --green:        #22C55E;   /* Flow green — highlights, numbers */
    --blue-light:   #2563EB;   /* Blue accent — same as primary for light mode contrast */
    --text:         #0F172A;   /* Primary dark text */
    --text-muted:   #475569;   /* Secondary gray text */
    --border:       #E2E8F0;   /* Card borders */
    --blue-dim:     #DBEAFE;   /* Light blue background tint */
    --green-dim:    rgba(34,197,94,0.1);

    /* Spacing */
    --section-pad:  100px;
    --radius:       12px;
    --radius-sm:    8px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--bg);
    /* Clean white background — dot pattern removed for airier light mode */
    color: var(--text);
    /* EDIT font: change "Sora" to any Google Font you've loaded */
    font-family: 'Sora', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ================================================================
   2. TYPOGRAPHY
================================================================ */
h1, h2, h3, h4, h5 {
    color: var(--text);
    line-height: 1.2;
    font-weight: 700;
}

p { color: var(--text-muted); }

/* Gradient text effect — used on headlines */
.gradient-text {
    background: linear-gradient(120deg, var(--blue-light), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section label — small uppercase label above headlines */
.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green);
    background: var(--green-dim);
    border: 1px solid rgba(34,197,94,0.25);
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 16px;
}

.section-headline {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    margin-bottom: 16px;
}

.section-sub {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto 48px;
    line-height: 1.75;
}

/* ================================================================
   3. LAYOUT UTILITIES
================================================================ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: var(--section-pad) 0;
}

/* Alternating section background tint for rhythm — clean light off-white */
.problem-section,
.packages-section,
.how-section,
.faq-section {
    background: #F8FAFC;
}

/* ================================================================
   4. BUTTONS
   EDIT button styles here (color, padding, border-radius)
================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

/* Primary: filled blue */
.btn-primary {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(37,99,235,0.4);
}
.btn-primary:hover {
    background: #1d4ed8;
    box-shadow: 0 4px 20px rgba(37,99,235,0.35);
    transform: translateY(-1px);
}

/* Ghost: transparent with white border */
.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-ghost:hover {
    border-color: var(--blue-light);
    color: var(--blue-light);
    background: rgba(96,165,250,0.05);
}

/* Outline: transparent with blue border */
.btn-outline {
    background: transparent;
    color: var(--blue-light);
    border: 1px solid rgba(96,165,250,0.4);
}
.btn-outline:hover {
    background: var(--blue-dim);
    border-color: var(--blue-light);
}

.btn-lg  { padding: 14px 28px; font-size: 1rem; }
.btn-xl  { padding: 16px 36px; font-size: 1.05rem; border-radius: 10px; }

/* ================================================================
   5. NAVBAR
   EDIT: nav height, logo font size, link styles
================================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 20px 0;
    background: rgba(255,255,255,0);
    transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease, border-color 0.35s ease;
    border-bottom: 1px solid transparent;
}

/* Added by JS when user scrolls down — stays clean and light */
.navbar.scrolled {
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 8px 24px -12px rgba(15,23,42,0.10);
    border-bottom-color: rgba(226,232,240,0.7);
    padding: 12px 0;
}

.nav-container {
    display: flex;
    align-items: center;
    gap: 32px;
}

/* Logo (mark + wordmark) — "Crafted F" identity */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 1.1rem;
    letter-spacing: -0.025em;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.logo:hover { transform: translateY(-1px); }

/* Mark: solid blue chip with the F glyph centered. Solid color reads
   sharper than a gradient at small sizes (favicon, mobile). The thin
   1px hairline + soft brand-blue shadow gives it weight without noise. */
.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--blue);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 0 0 1px rgba(15,23,42,0.04),
        0 6px 14px -2px rgba(37,99,235,0.32);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
/* Subtle top-edge sheen — gives the mark a touch of depth like an app icon */
.logo-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.16), transparent 50%);
    pointer-events: none;
}
.logo:hover .logo-mark {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 0 0 1px rgba(15,23,42,0.04),
        0 8px 20px -2px rgba(37,99,235,0.42);
}

/* Wordmark: weight + size + color contrast between "FlowCraft" and "Web"
   creates real typographic hierarchy instead of the previous flat all-bold treatment */
.logo-text {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    line-height: 1;
}
.logo-main {
    color: var(--text);
    font-weight: 800;
}
.logo-accent {
    color: #64748B;
    font-weight: 500;
    font-size: 0.92em;
    letter-spacing: -0.012em;
}

/* Nav links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.nav-links li a.nav-link,
.nav-links li > a:not(.btn) {
    position: relative;
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: 6px;
    transition: color 0.2s ease;
}

/* Underline-grow indicator (shared by hover + active states) */
.nav-links li a.nav-link::after,
.nav-links li > a:not(.btn)::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--blue), var(--green));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}
.nav-links li a.nav-link:hover,
.nav-links li > a:not(.btn):hover {
    color: var(--text);
}
.nav-links li a.nav-link:hover::after,
.nav-links li > a:not(.btn):hover::after,
.nav-links li a.nav-link.active::after {
    transform: scaleX(1);
}
.nav-links li a.nav-link.active {
    color: var(--text);
    font-weight: 600;
}

/* Desktop CTA — shown only on desktop */
.nav-cta-desktop {
    margin-left: 12px;
    padding: 10px 18px;
    font-size: 0.88rem;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.4) inset,
        0 6px 16px rgba(37,99,235,0.25);
}
.nav-cta-desktop svg {
    transition: transform 0.25s ease;
}
.nav-cta-desktop:hover svg {
    transform: translateX(3px);
}

/* Mobile CTA — shown only inside mobile menu */
.nav-cta-mobile { display: none; }

/* Hamburger button — shown only on mobile */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 4px;
    margin-left: auto;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* ================================================================
   6. HERO SECTION
================================================================ */
.hero {
    position: relative;
    padding: 180px 0 110px;
    overflow: hidden;
}

/* Subtle dot-grid texture — gives the hero light premium texture
   without resorting to generic AI-style gradients */
.hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(15,23,42,0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: 0 0;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 75%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

/* Background glow blobs — softened for clean light mode */
.hero-glow-1,
.hero-glow-2 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
    opacity: 0.55;
    z-index: 0;
}
.hero-glow-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(37,99,235,0.18), transparent 70%);
    top: -200px;
    left: -100px;
}
.hero-glow-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(34,197,94,0.12), transparent 70%);
    bottom: 0;
    right: 100px;
}

.hero-container {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Hero copy (left side) */
.hero-content { max-width: 580px; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #1e3a8a;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 7px 14px 7px 12px;
    border-radius: 100px;
    margin-bottom: 24px;
    box-shadow: 0 4px 14px rgba(15,23,42,0.05);
}

.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
    animation: badge-pulse 2.2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0.08); }
}

.hero-headline {
    font-size: clamp(2.3rem, 4.8vw, 3.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin-bottom: 22px;
}

.hero-sub {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 36px;
    max-width: 520px;
}

.hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

/* Premium primary CTA in hero — stronger lift, glow, and shine on hover */
.hero-ctas .btn-primary {
    position: relative;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.35) inset,
        0 8px 24px rgba(37,99,235,0.30);
}
.hero-ctas .btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
    pointer-events: none;
}
.hero-ctas .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.4) inset,
        0 14px 32px rgba(37,99,235,0.36);
}
.hero-ctas .btn-primary:hover::after { left: 130%; }
.hero-ctas .btn-primary svg {
    transition: transform 0.25s ease;
}
.hero-ctas .btn-primary:hover svg {
    transform: translateX(4px);
}

/* Ghost CTA refinement */
.hero-ctas .btn-ghost {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(4px);
    border-color: #CBD5E1;
}
.hero-ctas .btn-ghost:hover {
    background: #FFFFFF;
    border-color: var(--blue);
    color: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}

/* Trust row — multiple colored dots like "people online" indicator */
.hero-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.trust-dots {
    display: inline-flex;
    align-items: center;
}
.trust-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 3px rgba(15,23,42,0.15);
    margin-left: -6px;
    flex-shrink: 0;
}
.trust-dot:first-child { margin-left: 0; }
.trust-dot-blue  { background: linear-gradient(135deg, #60A5FA, #2563EB); }
.trust-dot-green { background: linear-gradient(135deg, #4ADE80, #22C55E); }
.trust-dot-amber { background: linear-gradient(135deg, #FBBF24, #F59E0B); }

.trust-text { line-height: 1.5; }

/* ── DASHBOARD MOCKUP ────────────────────────────────────────── */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.dashboard-window {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    max-width: 480px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 1px 2px rgba(15,23,42,0.04),
        0 12px 24px -8px rgba(15,23,42,0.08),
        0 30px 60px -12px rgba(15,23,42,0.18),
        0 0 90px rgba(37,99,235,0.08);
}

.window-titlebar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #F8FAFC;
    border-bottom: 1px solid var(--border);
}

.window-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.wdot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.wdot-red    { background: #FF5F57; }
.wdot-yellow { background: #FFBD2E; }
.wdot-green  { background: #28C840; }

.window-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.dashboard-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border-bottom: 1px solid var(--border);
}

.dash-stat {
    padding: 16px;
    background: var(--bg-card);
    text-align: center;
}

.dash-num {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}
.dash-num.green { color: var(--green); }
.dash-num.blue  { color: var(--blue-light); }

.dash-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}

.dash-table-header {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1fr 0.7fr;
    padding: 8px 16px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: #F8FAFC;
}

.dash-leads { padding: 4px 0; }

.dash-lead-row {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1fr 0.7fr;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #F1F5F9;
    transition: background 0.15s;
}
.dash-lead-row:last-child { border-bottom: none; }
.dash-lead-row:hover { background: #F8FAFC; }

.lead-name  { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.lead-svc   { font-size: 0.8rem; color: var(--text-muted); }
.lead-time  { font-size: 0.75rem; color: var(--text-muted); }

.lead-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 600;
}
.badge-new       { background: rgba(34,197,94,0.12); color: var(--green); }
.badge-contacted { background: rgba(96,165,250,0.12); color: var(--blue-light); }
.badge-booked    { background: rgba(37,99,235,0.18); color: #818cf8; }

.dash-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 0.72rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: #F8FAFC;
}

.pulse-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--green);
    font-weight: 600;
}

.pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse-anim 1.8s ease-in-out infinite;
}

@keyframes pulse-anim {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.75); }
}

/* Floating notification cards — clean light mode to match the rest of the site */
.float-card {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px 16px;
    max-width: 220px;
    box-shadow: 0 12px 30px rgba(15,23,42,0.10);
    animation: float-bob 3s ease-in-out infinite;
}

.float-card strong { font-size: 0.8rem; color: #0F172A; display: block; }
.float-card p      { font-size: 0.72rem; color: #475569; margin: 2px 0 0; }
.float-icon        { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }

.float-card-1 { bottom: 20px; left: -30px; animation-delay: 0s; }
.float-card-2 { top: 20px;    right: -30px; animation-delay: 1.5s; }

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

/* ================================================================
   7. BENEFIT BAR
================================================================ */
.benefit-bar {
    padding: 20px 0;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    background: #F8FAFC;
    overflow-x: auto;
}

.benefits-row {
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
    justify-content: center;
    flex-wrap: wrap;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #334155;
}

.benefit-sep {
    color: #CBD5E1;
    font-size: 1.2rem;
    line-height: 1;
}

/* ================================================================
   8. PROBLEM SECTION
================================================================ */
.problem-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    text-align: left;
}

.problem-body p {
    color: var(--text-muted);
    margin-bottom: 16px;
    font-size: 1rem;
    line-height: 1.75;
}
.problem-body p:first-child {
    font-size: 1.15rem;
    color: var(--text);
}

.pain-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pain-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
    padding: 20px 24px;
}

.pain-quote {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.6;
}
.pain-quote::before { content: '"'; color: var(--blue-light); }
.pain-quote::after  { content: '"'; color: var(--blue-light); }

/* ================================================================
   9. SERVICES SECTION
================================================================ */
.services-section .section-sub { text-align: center; }

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.service-card:hover {
    border-color: rgba(37,99,235,0.25);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(15,23,42,0.08);
}

.svc-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.svc-icon-blue  { background: var(--blue-dim); color: var(--blue-light); }
.svc-icon-green { background: var(--green-dim); color: var(--green); }

.service-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 0.9rem;
    line-height: 1.65;
}

/* ================================================================
   10. PACKAGES SECTION
================================================================ */
.packages-section { text-align: center; }
.packages-section .section-sub { margin-bottom: 56px; }

.packages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 32px;
}

.pkg-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(15,23,42,0.06);
}
.pkg-card:hover {
    border-color: rgba(37,99,235,0.3);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(15,23,42,0.10);
}

/* Most popular card — featured with a softly pulsing blue/green halo.
   The pulse animates the rgba opacity stops only — no scale change,
   so layout stays still and the effect feels premium, not gimmicky. */
.pkg-card.most-popular {
    border-color: var(--blue);
    background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 45%);
    transform: scale(1.03);
    animation: pkg-popular-pulse 5.5s ease-in-out infinite;
}
.pkg-card.most-popular:hover {
    transform: scale(1.03) translateY(-4px);
    box-shadow:
        0 0 0 1px var(--blue),
        0 32px 70px rgba(37,99,235,0.28),
        0 12px 36px rgba(37,99,235,0.20),
        0 0 110px rgba(37,99,235,0.22),
        0 0 170px rgba(34,197,94,0.14);
    animation-play-state: paused;
}

@keyframes pkg-popular-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px var(--blue),
            0 24px 56px rgba(37,99,235,0.20),
            0 8px 28px rgba(37,99,235,0.12),
            0 0 80px rgba(37,99,235,0.14),
            0 0 140px rgba(34,197,94,0.09);
    }
    50% {
        box-shadow:
            0 0 0 1px var(--blue),
            0 24px 56px rgba(37,99,235,0.26),
            0 8px 28px rgba(37,99,235,0.18),
            0 0 95px rgba(37,99,235,0.20),
            0 0 160px rgba(34,197,94,0.12);
    }
}

/* Respect users who've opted out of motion */
@media (prefers-reduced-motion: reduce) {
    .pkg-card.most-popular { animation: none; }
}

/* Custom Build card — distinct soft green tint */
.pkg-card.pkg-custom {
    background: linear-gradient(135deg, rgba(34,197,94,0.06) 0%, #FFFFFF 60%);
    border-color: rgba(34,197,94,0.3);
}

.popular-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--blue) 0%, #1d4ed8 100%);
    color: #fff;
    padding: 5px 12px 5px 10px;
    border-radius: 100px;
    margin-bottom: 12px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 4px 12px rgba(37,99,235,0.35);
}
.popular-tag svg { color: #FBBF24; flex-shrink: 0; }

.pkg-header { margin-bottom: 20px; }

.pkg-name {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.pkg-best-for {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.pkg-price-block { margin-bottom: 20px; }

.pkg-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
}

.pkg-price-label {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted);
}

.pkg-monthly {
    font-size: 0.85rem;
    color: var(--blue-light);
    font-weight: 600;
    margin-top: 4px;
}

.pkg-features {
    list-style: none;
    margin-bottom: 24px;
    flex: 1;
}

.pkg-features li {
    font-size: 0.83rem;
    color: var(--text-muted);
    padding: 7px 0;
    border-bottom: 1px solid #F1F5F9;
    padding-left: 20px;
    position: relative;
    line-height: 1.45;
}
.pkg-features li:last-child { border-bottom: none; }
.pkg-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green);
    font-size: 0.75rem;
    font-weight: 700;
    top: 7px;
}

/* First item in Growth package is "Everything in Starter, plus:" */
.pkg-card.most-popular .pkg-features li:first-child::before,
.pkg-card:nth-child(3) .pkg-features li:first-child::before {
    content: '';
}
.pkg-card.most-popular .pkg-features li:first-child,
.pkg-card:nth-child(3) .pkg-features li:first-child {
    color: var(--blue-light);
    font-weight: 600;
    padding-left: 0;
}

.pkg-cta { width: 100%; text-align: center; }

.packages-note {
    font-size: 0.83rem;
    color: var(--text-muted);
    text-align: center;
}

/* ================================================================
   11. DEMO SECTION
================================================================ */
.demo-section { text-align: center; }
.demo-section .section-sub { margin-bottom: 48px; }

.demo-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 48px;
    text-align: left;
}

.demo-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue-light);
}

.demo-title {
    font-size: 1.7rem;
    font-weight: 800;
    margin: 8px 0 16px;
}

.demo-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.demo-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: #F8FAFC;
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: 100px;
}

.demo-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 28px;
}

.demo-results {
    display: flex;
    gap: 28px;
    margin-bottom: 28px;
}

.demo-result { display: flex; flex-direction: column; gap: 4px; }

.result-val {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}
.result-val.green { color: var(--green); }
.result-val.blue  { color: var(--blue-light); }

.result-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Browser window mockup (CSS-drawn) — light theme to match site */
.demo-browser {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15,23,42,0.10);
}

.browser-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #F1F5F9;
    border-bottom: 1px solid var(--border);
}

.browser-dots { display: flex; gap: 5px; }
.b-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border);
}
.browser-dots .b-dot:nth-child(1) { background: #FF5F57; }
.browser-dots .b-dot:nth-child(2) { background: #FFBD2E; }
.browser-dots .b-dot:nth-child(3) { background: #28C840; }

.browser-url {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 4px 12px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.browser-body {
    padding: 20px;
    background: #FFFFFF;
}

/* CSS-drawn placeholder website layout — light skeleton */
.mock-nav-bar {
    height: 10px;
    background: #E2E8F0;
    border-radius: 3px;
    margin-bottom: 20px;
}

.mock-hero-block { margin-bottom: 20px; }

.mock-line {
    height: 8px;
    border-radius: 4px;
    background: #E2E8F0;
    margin-bottom: 8px;
}
.mock-h1   { width: 80%; height: 12px; background: #CBD5E1; }
.mock-sub  { width: 65%; }
.mock-sub.short { width: 45%; }

.mock-btn-bar {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.mock-cta-btn {
    width: 90px;
    height: 22px;
    border-radius: 5px;
    background: #2563EB;
}
.mock-ghost-btn {
    width: 70px;
    height: 22px;
    border-radius: 5px;
    background: #F1F5F9;
    border: 1px solid var(--border);
}

.mock-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.mock-card-sm {
    height: 50px;
    border-radius: 6px;
    background: #F8FAFC;
    border: 1px solid var(--border);
}

.mock-form-block {
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px;
}
.mock-form-line {
    height: 8px;
    background: #E2E8F0;
    border-radius: 3px;
    margin-bottom: 8px;
}
.mock-form-btn {
    width: 80px;
    height: 20px;
    border-radius: 4px;
    background: #2563EB;
    margin-top: 4px;
}

/* ================================================================
   12. AUTOMATION FLOW SECTION
================================================================ */
.automation-section { text-align: center; }
.automation-section .section-sub { margin-bottom: 56px; }

.flow-track {
    display: grid;
    grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr;
    align-items: start;
    gap: 0;
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.flow-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--blue-dim);
    border: 2px solid rgba(37,99,235,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.flow-num {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--blue-light);
    letter-spacing: 0.05em;
}

.flow-content { padding: 0 8px; }

.flow-emoji {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.flow-content h4 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
}

.flow-content p {
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.flow-connector {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 22px;
    color: var(--border);
    font-size: 1.2rem;
}

.flow-connector::before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-dim), rgba(37,99,235,0.3));
    border-radius: 2px;
    margin-top: 4px;
}

/* ================================================================
   13. HOW IT WORKS SECTION
================================================================ */
.how-section { text-align: center; }

.how-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    text-align: left;
    margin-top: 56px;
}

/* Connecting line across steps */
.how-steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 60px;
    right: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-dim), rgba(37,99,235,0.4), var(--blue-dim));
    z-index: 0;
}

.how-step {
    position: relative;
    z-index: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    transition: border-color 0.25s, transform 0.25s;
}
.how-step:hover {
    border-color: rgba(96,165,250,0.3);
    transform: translateY(-3px);
}

.how-step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(37,99,235,0.22);
}

.how-step-body h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-badge {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--green-dim);
    color: var(--green);
    border: 1px solid rgba(34,197,94,0.3);
    padding: 2px 8px;
    border-radius: 100px;
}

.how-step-body p {
    font-size: 0.87rem;
    line-height: 1.65;
    color: var(--text-muted);
}

/* ================================================================
   14. WHY SECTION
================================================================ */
.why-section { text-align: center; }
.why-section .section-headline { margin-bottom: 48px; }

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

/* Last row: 2 items centered */
.why-grid .why-card:nth-child(4),
.why-grid .why-card:nth-child(5) {
    grid-column: span 1;
}

.why-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    text-align: left;
    transition: border-color 0.25s, transform 0.25s;
}
.why-card:hover {
    border-color: rgba(96,165,250,0.25);
    transform: translateY(-2px);
}

.why-icon {
    font-size: 1.5rem;
    margin-bottom: 14px;
}

.why-card h4 {
    font-size: 0.98rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.why-card p {
    font-size: 0.87rem;
    line-height: 1.65;
}

/* ================================================================
   15. FAQ SECTION
================================================================ */
.faq-section { text-align: center; }

.faq-container { max-width: 760px; }

.faq-list {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s;
}

.faq-item.open { border-color: rgba(96,165,250,0.3); }

.faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s;
}
.faq-q:hover { color: var(--blue-light); }

.faq-toggle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-muted);
    transition: background 0.2s, transform 0.3s, color 0.2s;
}

.faq-item.open .faq-toggle {
    background: var(--blue);
    color: #fff;
    transform: rotate(45deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-a.open {
    max-height: 200px;
    padding-bottom: 20px;
}

.faq-a p {
    padding: 0 24px;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ================================================================
   16. FINAL CTA SECTION
================================================================ */
.cta-section {
    position: relative;
    text-align: center;
    overflow: hidden;
}

.cta-glow {
    position: absolute;
    width: 700px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(37,99,235,0.08) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cta-container {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.cta-sub {
    margin: 0 auto 40px;
}

.cta-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.cta-note {
    font-size: 0.83rem;
    color: var(--text-muted);
}

/* ================================================================
   17. CONTACT FORM SECTION
================================================================ */
.contact-section { text-align: center; }
.contact-section .section-sub { margin-bottom: 56px; }

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    text-align: left;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.req { color: var(--blue-light); }

.form-group input,
.form-group select,
.form-group textarea {
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    outline: none;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { background: #FFFFFF; }

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #94A3B8;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.form-group select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.form-group textarea { resize: vertical; min-height: 120px; }

/* Checkbox group */
.checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.cb-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 14px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.cb-label:hover {
    border-color: rgba(37,99,235,0.35);
    background: #EFF6FF;
    color: var(--text);
}

.cb-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    accent-color: var(--blue);
    border: 1px solid var(--border);
    padding: 0;
    background: var(--bg);
}

/* Submit button */
.btn-submit {
    width: 100%;
    font-size: 1rem;
    padding: 14px;
}

/* Status message (success/error after form submit) */
.form-status {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    display: none;
}

.form-status.success {
    display: block;
    background: var(--green-dim);
    color: var(--green);
    border: 1px solid rgba(34,197,94,0.3);
}

.form-status.error {
    display: block;
    background: rgba(239,68,68,0.08);
    color: #F87171;
    border: 1px solid rgba(239,68,68,0.3);
}

/* Sidebar */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.sidebar-card-last { border-color: rgba(34,197,94,0.2); }

.sidebar-card h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.sidebar-card p {
    font-size: 0.85rem;
    line-height: 1.65;
    margin-bottom: 16px;
}

.sidebar-card p:last-child { margin-bottom: 0; }

.sidebar-email {
    color: var(--blue-light);
    font-weight: 500;
    font-size: 0.9rem;
}

/* ================================================================
   18. FOOTER
================================================================ */
.footer {
    border-top: 1px solid var(--border);
    padding: 64px 0 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.footer-logo { font-size: 1.1rem; margin-bottom: 8px; }

.footer-tagline {
    font-size: 0.85rem;
    color: var(--blue-light);
    font-weight: 500;
    margin-bottom: 10px;
}

.footer-desc {
    font-size: 0.85rem;
    line-height: 1.7;
    max-width: 340px;
}

.footer-links-col h5,
.footer-contact-col h5 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.footer-links-col ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links-col a {
    font-size: 0.88rem;
    color: var(--text-muted);
    transition: color 0.2s;
}
.footer-links-col a:hover { color: var(--blue-light); }

.footer-contact-col p {
    margin-bottom: 12px;
}

.footer-contact-col a {
    font-size: 0.88rem;
    color: var(--text-muted);
    transition: color 0.2s;
}
.footer-contact-col a:hover { color: var(--blue-light); }

.social-row {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.social-ico {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.social-ico:hover {
    border-color: var(--blue-light);
    color: var(--blue-light);
    background: var(--blue-dim);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.footer-legal {
    display: flex;
    gap: 20px;
}
.footer-legal a {
    color: var(--text-muted);
    transition: color 0.2s;
}
.footer-legal a:hover { color: var(--blue-light); }

/* ================================================================
   18b. BRANDS WE WORK WITH — infinite horizontal marquee
   Premium light-mode logo strip with edge fade masks,
   grayscale-to-color hover, scale on hover, pause on hover
================================================================ */
.brands-section {
    background: #FFFFFF;
    text-align: center;
    padding: 80px 0;
    overflow: hidden;
    position: relative;
}

.brands-container { padding-bottom: 8px; }

.brands-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: 12px;
}

.brands-subtitle {
    font-size: 0.95rem;
    color: #64748B;
    max-width: 520px;
    margin: 0 auto 40px;
    line-height: 1.65;
}

/* Marquee viewport */
.brands-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 24px 0;
    /* very subtle premium top/bottom hairline */
    border-top: 1px solid #F1F5F9;
    border-bottom: 1px solid #F1F5F9;
    background:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(37,99,235,0.04), transparent 70%),
        #FFFFFF;
}

/* Edge fade masks — light gradients (no black) */
.brands-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.brands-fade-left {
    left: 0;
    background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
}
.brands-fade-right {
    right: 0;
    background: linear-gradient(-90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
}

/* Scrolling rail — uses width: max-content + transform animation */
.brands-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: brand-scroll 50s linear infinite;
    will-change: transform;
}

/* Pause animation when user hovers anywhere over the marquee */
.brands-marquee:hover .brands-track {
    animation-play-state: paused;
}

@keyframes brand-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Each brand "tile" */
.brand-item {
    flex-shrink: 0;
    margin: 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    position: relative;
}

/* Soft hover halo behind each logo */
.brand-item::before {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37,99,235,0.14), transparent 70%);
    opacity: 0;
    filter: blur(12px);
    transition: opacity 0.4s ease;
    z-index: 0;
}
.brand-item:hover::before { opacity: 1; }

.brand-item img {
    height: 48px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    filter: none;
    opacity: 0.95;
    transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
    position: relative;
    z-index: 1;
}

.brand-item:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.1);
}

/* ================================================================
   19. SCROLL ANIMATIONS
   Elements with class "fade-up" start invisible and slide up
   when they enter the viewport (handled by JavaScript)
================================================================ */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay for grid items */
.services-grid .service-card:nth-child(2) { transition-delay: 0.1s; }
.services-grid .service-card:nth-child(3) { transition-delay: 0.2s; }
.services-grid .service-card:nth-child(4) { transition-delay: 0.3s; }

.packages-grid .pkg-card:nth-child(2) { transition-delay: 0.1s; }
.packages-grid .pkg-card:nth-child(3) { transition-delay: 0.2s; }
.packages-grid .pkg-card:nth-child(4) { transition-delay: 0.3s; }

.why-grid .why-card:nth-child(2) { transition-delay: 0.1s; }
.why-grid .why-card:nth-child(3) { transition-delay: 0.2s; }
.why-grid .why-card:nth-child(4) { transition-delay: 0.15s; }
.why-grid .why-card:nth-child(5) { transition-delay: 0.25s; }

.how-steps .how-step:nth-child(2) { transition-delay: 0.1s; }
.how-steps .how-step:nth-child(3) { transition-delay: 0.2s; }
.how-steps .how-step:nth-child(4) { transition-delay: 0.3s; }

/* ================================================================
   20. MOBILE RESPONSIVE
   Breakpoints: 1024px (tablet), 768px (mobile), 480px (small)
================================================================ */

/* Tablet: 1024px and below */
@media (max-width: 1024px) {

    :root { --section-pad: 80px; }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .hero-content { max-width: 100%; text-align: center; }
    .hero-ctas { justify-content: center; }
    .hero-trust { justify-content: center; }
    .hero-visual { justify-content: center; }
    .float-card-1 { left: -10px; }
    .float-card-2 { right: -10px; }

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

    .pkg-card.most-popular { transform: none; }
    .pkg-card.most-popular:hover { transform: translateY(-2px); }

    .how-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .how-steps::before { display: none; }

    .flow-track {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .flow-connector {
        width: 2px;
        height: 32px;
        margin: 0 auto;
        padding: 0;
    }
    .flow-connector::before {
        width: 2px;
        height: 32px;
        background: linear-gradient(180deg, var(--blue-dim), rgba(37,99,235,0.3));
    }

    .demo-card {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    .contact-layout {
        grid-template-columns: 1fr;
    }
    .contact-sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .sidebar-card-last {
        grid-column: 1 / -1;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .footer-brand { grid-column: 1 / -1; }
}

/* Mobile: 768px and below */
@media (max-width: 768px) {

    :root { --section-pad: 64px; }

    /* Navbar mobile — light dropdown panel */
    .nav-links {
        display: none;
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        flex-direction: column;
        align-items: stretch;
        padding: 20px 24px 28px;
        border-bottom: 1px solid #E2E8F0;
        box-shadow: 0 8px 24px rgba(15,23,42,0.06);
        gap: 4px;
        z-index: 99;
    }

    .nav-links.open { display: flex; }

    .nav-links li a {
        display: block;
        padding: 12px 16px;
        font-size: 1rem;
        border-radius: 8px;
    }

    /* Disable the desktop underline indicator inside the mobile dropdown */
    .nav-links li a.nav-link::after,
    .nav-links li > a:not(.btn)::after {
        display: none;
    }
    .nav-links li a.nav-link:hover,
    .nav-links li > a:not(.btn):hover {
        background: rgba(37,99,235,0.06);
    }

    .nav-cta-mobile {
        display: block;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
    }

    .nav-cta-mobile a {
        display: block;
        text-align: center;
        padding: 14px;
    }

    .nav-cta-desktop { display: none; }

    .hamburger {
        display: flex;
        margin-left: auto;
    }

    /* Hamburger → X animation */
    .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Hero */
    .hero { padding: 130px 0 80px; }
    .hero-headline { font-size: 2.1rem; }
    .float-card { display: none; }
    .hero-trust { justify-content: center; flex-wrap: wrap; }

    /* Problem */
    .problem-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Services */
    .services-grid { grid-template-columns: 1fr; }

    /* Packages */
    .packages-grid { grid-template-columns: 1fr; }

    /* Benefit bar */
    .benefits-row { justify-content: flex-start; }
    .benefit-sep { display: none; }

    /* How it works */
    .how-steps { grid-template-columns: 1fr; }

    /* Why */
    .why-grid { grid-template-columns: 1fr; }

    /* Contact form */
    .form-row { grid-template-columns: 1fr; }

    .contact-sidebar {
        grid-template-columns: 1fr;
    }
    .sidebar-card-last { grid-column: auto; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    /* Section headlines */
    .section-headline { font-size: 1.7rem; }

    /* Demo */
    .demo-card { padding: 28px; }
    .demo-results { flex-wrap: wrap; gap: 20px; }

    /* Brands marquee — smaller logos and tighter spacing on mobile */
    .brands-section { padding: 60px 0; }
    .brand-item { margin: 0 22px; }
    .brand-item img { height: 36px; max-width: 90px; }
    .brands-fade { width: 60px; }
    .brands-track { animation-duration: 38s; }
}

/* Small phones: 480px and below */
@media (max-width: 480px) {
    .hero-headline { font-size: 1.7rem; }
    .hero-ctas { flex-direction: column; }
    .hero-ctas .btn { width: 100%; }
    .cta-btns { flex-direction: column; align-items: center; }
    .cta-btns .btn { width: 100%; max-width: 320px; }
    .checkbox-row { flex-direction: column; }
    .packages-note { font-size: 0.75rem; }
}

/* ================================================================
   21. HERO + FOOTER LOCATION LINE (Massachusetts messaging)
================================================================ */
.hero-location {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 6px 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 100px;
    box-shadow: 0 2px 6px rgba(15,23,42,0.04);
}
.hero-location svg { color: var(--blue); flex-shrink: 0; }
.hero-location strong { color: var(--text); font-weight: 600; }

.footer-location {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.footer-location svg { color: var(--blue); flex-shrink: 0; }

/* ================================================================
   22. HOMEPAGE CONTACT CTA STRIP
   Replaces the full contact section. One clear next step.
================================================================ */
.contact-strip {
    padding: 80px 0 100px;
    background: #FFFFFF;
}

.contact-strip-card {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 44px 48px;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    box-shadow: 0 18px 40px -12px rgba(15,23,42,0.08);
    position: relative;
    overflow: hidden;
}

.contact-strip-card::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(37,99,235,0.10), transparent 70%);
    pointer-events: none;
}

.strip-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #1e3a8a;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 6px 12px;
    border-radius: 100px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(15,23,42,0.04);
}

.strip-headline {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.strip-sub {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 480px;
}

.contact-strip-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.contact-strip-actions .btn-primary {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.35) inset,
        0 8px 24px rgba(37,99,235,0.30);
}
.contact-strip-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.4) inset,
        0 14px 32px rgba(37,99,235,0.36);
}

.strip-email {
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: color 0.2s;
}
.strip-email:hover { color: var(--blue); }

/* ================================================================
   23. CONTACT PAGE — page-specific hero, form additions, trust strip
   ── Future automation hookup notes:
      · Form payload structured under contact / project / metadata
      · script.js auto-fills lead_id, page_url, referrer, UTMs
      · Honeypot field .hp-field is hidden from real users
================================================================ */

/* Page hero */
.contact-hero {
    position: relative;
    padding: 160px 0 64px;
    overflow: hidden;
    text-align: center;
}

.contact-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.contact-hero-badge {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 22px;
}

.contact-hero-headline {
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
}

.contact-hero-sub {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0 auto 28px;
    max-width: 580px;
}

.contact-hero-meta {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 24px;
    padding: 12px 20px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 100px;
    box-shadow: 0 4px 14px rgba(15,23,42,0.05);
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #334155;
}
.meta-item svg { flex-shrink: 0; }

/* The contact section on contact.html runs tighter than the homepage */
.contact-page .contact-section {
    padding: 56px 0 80px;
}

/* Pre-fill notice — appears above the contact form when the visitor
   arrived via a homepage package "View Details" button. */
.package-prefill-note {
    background: #EFF6FF;
    border: 1px solid rgba(37,99,235,0.25);
    color: #1e3a8a;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 0.85rem;
    line-height: 1.5;
}
.package-prefill-note strong { color: var(--blue); font-weight: 700; }

/* Honeypot — visually hidden but still in the DOM for bots to fill */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Consent checkbox — sits below the message field */
.consent-group {
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}

.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-muted);
    cursor: pointer;
}

.consent-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--blue);
    flex-shrink: 0;
}

.consent-label span { flex: 1; }

/* "Where we work" sidebar card */
.sidebar-card-location {
    border-color: rgba(37,99,235,0.18);
    background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 60%);
}
.sidebar-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 6px rgba(15,23,42,0.04);
    margin-bottom: 12px;
}

/* Sidebar button override (no inline style on the contact page) */
.sidebar-btn {
    width: 100%;
    text-align: center;
    display: flex !important;
    justify-content: center;
}

.sidebar-email-row { margin-bottom: 0 !important; }

/* Mini trust strip below the form */
.contact-trust {
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    padding: 56px 0;
}

.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.trust-item-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15,23,42,0.04);
}

.trust-item strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.trust-item p {
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

/* ================================================================
   24. AI CHAT WIDGET (PLACEHOLDER)
   ── Future AI integration notes:
      · The visual states (closed → open, message bubbles, typing
        indicator) are styled here.
      · The reply behavior is in script.js → "CHAT WIDGET" section.
      · Currently shows a canned reply — wire in a real backend
        (n8n, OpenAI/Anthropic, Crisp, etc.) inside chatForm's
        submit handler. Markup below stays the same.
================================================================ */
.chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 200;
    font-family: 'Sora', sans-serif;
}

/* ── Toggle button (closed state) ─────────────────────────── */
.chat-toggle {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--blue);
    color: #fff;
    cursor: pointer;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 6px 16px rgba(37,99,235,0.40),
        0 12px 28px rgba(15,23,42,0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    overflow: hidden;
}
.chat-toggle:hover {
    transform: translateY(-2px);
    background: #1d4ed8;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 8px 22px rgba(37,99,235,0.50),
        0 16px 36px rgba(15,23,42,0.20);
}

.chat-toggle-label { display: none; }

.chat-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.chat-toggle-close { position: absolute; opacity: 0; transform: scale(0.6) rotate(-45deg); }

.chat-widget[data-state="open"] .chat-toggle-bubble {
    opacity: 0;
    transform: scale(0.6) rotate(45deg);
}
.chat-widget[data-state="open"] .chat-toggle-close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Soft pulse ring on the toggle */
.chat-toggle-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(37,99,235,0.35);
    z-index: -1;
    animation: chat-pulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes chat-pulse {
    0%   { transform: scale(0.95); opacity: 0.6; }
    70%  { transform: scale(1.4);  opacity: 0;   }
    100% { transform: scale(1.4);  opacity: 0;   }
}
.chat-widget[data-state="open"] .chat-toggle-pulse { display: none; }

/* ── Panel (open state) ───────────────────────────────────── */
.chat-panel {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 360px;
    max-height: 560px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 24px 60px -12px rgba(15,23,42,0.22),
        0 12px 28px -8px rgba(15,23,42,0.10);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.chat-widget[data-state="open"] .chat-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Header */
.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--blue) 0%, #1d4ed8 100%);
    color: #fff;
    flex-shrink: 0;
}

.chat-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255,255,255,0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset;
}

.chat-headline { flex: 1; line-height: 1.2; }
.chat-headline strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
}
.chat-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.85);
    margin-top: 2px;
}
.chat-status .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 0 3px rgba(74,222,128,0.30);
    flex-shrink: 0;
}

.chat-close {
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
.chat-close:hover { background: rgba(255,255,255,0.22); }

/* Messages area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.55;
    animation: chat-msg-in 0.25s ease both;
}
@keyframes chat-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-msg p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.chat-msg p + p { margin-top: 6px; }

.chat-msg-bot {
    align-self: flex-start;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: var(--text);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}

.chat-msg-user {
    align-self: flex-end;
    background: var(--blue);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Typing indicator */
.chat-msg-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
}
.chat-msg-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94A3B8;
    animation: chat-bounce 1.2s ease-in-out infinite;
}
.chat-msg-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-msg-typing span:nth-child(3) { animation-delay: 0.30s; }

@keyframes chat-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1;   }
}

/* Quick reply chips below the greeting */
.chat-quick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.chat-quick {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 100px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--blue);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.chat-quick:hover {
    background: #EFF6FF;
    border-color: rgba(37,99,235,0.4);
    transform: translateY(-1px);
}

/* Input row */
.chat-input-row {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.chat-input {
    flex: 1;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 100px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.chat-input::placeholder { color: #94A3B8; }
.chat-input:focus {
    background: #FFFFFF;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.chat-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(37,99,235,0.30);
}
.chat-send:hover { background: #1d4ed8; transform: translateY(-1px); }
.chat-send:disabled { background: #CBD5E1; cursor: not-allowed; box-shadow: none; transform: none; }

.chat-foot {
    margin: 0;
    padding: 10px 16px 12px;
    font-size: 0.74rem;
    color: var(--text-muted);
    background: #FFFFFF;
    border-top: 1px solid #F1F5F9;
    text-align: center;
}
.chat-foot a { color: var(--blue); font-weight: 600; }
.chat-foot a:hover { text-decoration: underline; }

/* ================================================================
   25. MOBILE BREAKPOINTS — new components
================================================================ */

/* Tablet adjustments */
@media (max-width: 1024px) {

    .contact-strip-card {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 36px;
        text-align: left;
    }
    .contact-strip-actions { align-items: flex-start; }

    .trust-strip { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* Mobile (<= 768px) */
@media (max-width: 768px) {

    .contact-strip { padding: 56px 0 72px; }
    .contact-strip-card { padding: 28px; border-radius: 14px; }

    .contact-hero { padding: 120px 0 48px; }
    .contact-hero-headline { font-size: 1.8rem; }
    .contact-hero-meta {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        border-radius: 14px;
        padding: 14px 18px;
    }

    .trust-strip { grid-template-columns: 1fr; }

    /* Chat widget: full-width sheet sliding from the bottom */
    .chat-widget { bottom: 16px; right: 16px; left: 16px; }
    .chat-toggle { margin-left: auto; }
    .chat-panel {
        position: fixed;
        bottom: 88px;
        left: 16px;
        right: 16px;
        width: auto;
        max-height: calc(100vh - 120px);
    }
}

/* Small phones */
@media (max-width: 480px) {
    .contact-hero-headline { font-size: 1.55rem; }
    .contact-strip-card { padding: 24px; }
    .strip-headline { font-size: 1.35rem; }
    .contact-strip-actions .btn { width: 100%; }
}

/* ================================================================
   26. PACKAGES — refinement: spec strip, soft buttons,
   one-time alternative card, polished comparison note,
   subtle "spotlight" radial behind the Most Popular card.
================================================================ */

/* Soft button variant — used on non-primary package CTAs and the
   demo section. Lower visual weight than .btn-primary so the
   Most Popular card's primary CTA reads as the only main action. */
.btn-soft {
    background: #FFFFFF;
    color: var(--blue);
    border: 1px solid #DBEAFE;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.btn-soft:hover {
    background: #EFF6FF;
    border-color: rgba(37,99,235,0.45);
    color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15,23,42,0.06);
}

/* Subtle "spotlight" radial behind the section — adds depth to the
   Most Popular card position without being a generic AI gradient. */
.packages-section { position: relative; overflow: hidden; }
.packages-section::before {
    content: '';
    position: absolute;
    top: 38%;
    left: 50%;
    width: 720px;
    height: 480px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(37,99,235,0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.packages-section .container { position: relative; z-index: 1; }

/* Cards layout polish — slightly bigger gap, better baseline align */
.packages-grid { gap: 22px; align-items: stretch; }

/* Spec strip — clean horizontal rows for fast scanning */
.pkg-spec {
    margin: 4px 0 18px;
    padding: 12px 0;
    border-top: 1px solid #F1F5F9;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pkg-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 0.78rem;
    line-height: 1.4;
}
.pkg-spec-row dt {
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}
.pkg-spec-row dd {
    color: var(--text);
    font-weight: 600;
    text-align: right;
}

/* Includes list label */
.pkg-includes-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* Tighten existing pkg-features when paired with the new structure */
.pkg-card .pkg-features { margin-bottom: 20px; }

/* CTA at the bottom of each card sits flush */
.pkg-cta { margin-top: auto; }

/* ── ONE-TIME ALTERNATIVE CARD ───────────────────────────── */
.pkg-alt {
    margin-top: 32px;
    background: linear-gradient(135deg, rgba(34,197,94,0.05) 0%, #FFFFFF 65%);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 10px 28px rgba(15,23,42,0.05);
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.pkg-alt:hover {
    transform: translateY(-2px);
    border-color: rgba(34,197,94,0.4);
    box-shadow: 0 18px 36px rgba(15,23,42,0.08);
}

.pkg-alt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(34,197,94,0.10);
    border: 1px solid rgba(34,197,94,0.25);
    padding: 5px 12px;
    border-radius: 100px;
    margin-bottom: 16px;
}
.alt-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}

.pkg-alt-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 36px;
    align-items: start;
    text-align: left;
}

.pkg-alt-name {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: -0.015em;
}

.pkg-alt-tag {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 18px;
}

.pkg-alt-price-block { margin-bottom: 18px; }

.pkg-alt-sub {
    font-size: 0.85rem;
    color: var(--green);
    font-weight: 600;
    margin-top: 4px;
}

.pkg-spec-alt {
    margin: 0;
    padding: 12px 0 0;
    border-bottom: none;
}

.pkg-alt-right {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pkg-alt-right .pkg-features {
    margin-bottom: 16px;
}

.pkg-alt-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    background: #F8FAFC;
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 18px;
    line-height: 1.55;
}

.pkg-alt .pkg-cta { align-self: flex-start; }

/* ── REFINED COMPARISON NOTE ─────────────────────────────── */
.packages-note {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    margin: 36px auto 0;
    padding: 10px 18px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 100px;
    font-size: 0.83rem;
    color: var(--text-muted);
    box-shadow: 0 4px 14px rgba(15,23,42,0.04);
    width: auto;
}
.packages-note .note-item { font-weight: 500; color: #334155; }
.packages-note .note-sep  { color: #CBD5E1; }
.packages-section { text-align: center; }
.packages-section .packages-note { display: inline-flex; }

/* ── PACKAGE STAGGER (refined reveal cascade) ────────────── */
.packages-grid .pkg-card:nth-child(1) { transition-delay: 0s; }
.packages-grid .pkg-card:nth-child(2) { transition-delay: 0.08s; }
.packages-grid .pkg-card:nth-child(3) { transition-delay: 0.16s; }
.packages-grid .pkg-card:nth-child(4) { transition-delay: 0.24s; }
.pkg-alt { transition-delay: 0.32s; }

/* ── MOBILE BREAKPOINTS for new pkg styles ───────────────── */
@media (max-width: 1024px) {
    .pkg-alt-grid { grid-template-columns: 1fr; gap: 24px; }
    .pkg-alt { padding: 24px; }
}

@media (max-width: 768px) {
    .pkg-spec-row { font-size: 0.82rem; }
    .pkg-alt { padding: 22px; margin-top: 24px; }
    .pkg-alt-name { font-size: 1.15rem; }
    .packages-note {
        flex-direction: column;
        gap: 4px;
        border-radius: 14px;
        padding: 14px 18px;
    }
    .packages-note .note-sep { display: none; }
}

/* ================================================================
   27. DEMO SHOWCASE — Car Detailing Case Study (FICTIONAL)
   ── All dark-themed brand styling for the fictional client is
   scoped under .demo-slide / .dg-* selectors. The wrapping
   FlowCraft section stays light and consistent with the rest
   of the homepage.
   ── Editing notes:
      · Brand intro card: see .demo-brand block in index.html
      · Each slide: <div class="demo-slide" data-caption="...">
      · Tab labels are kept in sync by index — same number of
        .demo-tab buttons and .demo-slide blocks, in same order.
================================================================ */

/* Section frame — keep it visually intentional and a touch tinted */
.demo-section {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}

/* ── Brand intro card (light, FlowCraft-style) ───────────── */
.demo-brand {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 20px 28px;
    margin-bottom: 28px;
    box-shadow: 0 8px 24px -10px rgba(15,23,42,0.10);
}
.demo-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #0F1115;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -2px rgba(15,17,21,0.30);
}
.demo-brand-info { min-width: 0; }
.demo-brand-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.demo-brand-name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.demo-brand-tag {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0;
}
.demo-brand-stats {
    display: flex;
    gap: 28px;
}
.bs-item { display: flex; flex-direction: column; align-items: flex-end; }
.bs-num {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}
.bs-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
    letter-spacing: 0.02em;
}

/* ── Showcase wrapper ─────────────────────────────────────── */
.demo-showcase { margin-top: 8px; }

/* Tabs strip */
.demo-tabs {
    display: flex;
    gap: 4px;
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(15,23,42,0.04);
    margin-bottom: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}
.demo-tabs::-webkit-scrollbar { display: none; }

.demo-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.88rem;
    cursor: pointer;
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background 0.2s ease, color 0.2s ease;
}
.demo-tab:hover { color: var(--text); background: #F1F5F9; }
.demo-tab-num {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    transition: color 0.2s ease;
}
.demo-tab-name { font-weight: 600; }
.demo-tab.is-active {
    background: var(--text);
    color: #FFFFFF;
    box-shadow: 0 6px 14px -4px rgba(15,23,42,0.30);
}
.demo-tab.is-active .demo-tab-num { color: var(--green); }

/* Viewport: browser-window frame around the slides */
.demo-viewport {
    position: relative;
    border-radius: 16px;
}

.demo-browser-window {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 30px 60px -16px rgba(15,23,42,0.18),
        0 12px 28px -8px rgba(15,23,42,0.10);
}

.demo-browser-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #F1F5F9;
    border-bottom: 1px solid #E2E8F0;
}

.demo-browser-url {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.74rem;
    color: var(--text-muted);
    font-family: 'Sora', sans-serif;
}

.demo-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 7px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.demo-expand-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: #EFF6FF;
}

/* Slides track — only one .is-active visible at a time. Subtle
   crossfade + slight rise so transitions feel deliberate. */
.demo-slides-track {
    position: relative;
    background: #0F1115; /* fallback for the dark brand */
    min-height: 480px;
}

.demo-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.32s ease, transform 0.32s ease;
}
.demo-slide.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Controls below the viewport */
.demo-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
}
.demo-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 10px rgba(15,23,42,0.05);
}
.demo-arrow:hover {
    border-color: var(--blue);
    color: var(--blue);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15,23,42,0.08);
}
.demo-arrow:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.demo-caption {
    text-align: center;
    max-width: 460px;
    line-height: 1.4;
}
.demo-caption strong {
    display: block;
    font-size: 0.92rem;
    color: var(--text);
    margin-bottom: 2px;
}
.demo-caption span {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ================================================================
   28. GLOSS GARAGE — Brand-scoped DARK styling for the slides
   These rules apply only inside .demo-slide and the .demo-modal-body.
   They do NOT affect the rest of the homepage.
================================================================ */

.demo-slide .dg-page,
.demo-modal-body .dg-page {
    background: #0F1115;
    color: #FFFFFF;
    min-height: 480px;
    padding: 24px 28px;
    font-family: 'Sora', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ── Top nav (inside the client page mockup) ─────────────── */
.dg-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}
.dg-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}
.dg-logo-mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #B6FF6E;
    color: #0F1115;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
}
.dg-nav-links {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-left: auto;
}
.dg-nav-links li {
    font-size: 0.82rem;
    color: #9CA3AF;
    padding: 6px 12px;
    border-radius: 6px;
}

/* ── Buttons (Gloss Garage brand) ─────────────────────────── */
.dg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: -0.005em;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.dg-btn-primary {
    background: #B6FF6E;
    color: #0F1115;
    box-shadow: 0 6px 14px -2px rgba(182,255,110,0.40);
}
.dg-btn-primary:hover { transform: translateY(-1px); background: #A6F25C; }
.dg-btn-ghost {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid #2A2F36;
}
.dg-btn-ghost:hover { background: #181B20; border-color: #3A4048; }
.dg-btn-sm { padding: 8px 14px; font-size: 0.78rem; }
.dg-btn-block { width: 100%; }

/* ── Hero (Slide 1) ───────────────────────────────────────── */
.dg-hero {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 24px;
    align-items: center;
    padding: 8px 0 4px;
}
.dg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #B6FF6E;
    margin-bottom: 14px;
    font-weight: 600;
}
.dg-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #B6FF6E;
    box-shadow: 0 0 0 3px rgba(182,255,110,0.18);
}
.dg-h1 {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #FFFFFF;
    margin-bottom: 12px;
}
.dg-h1 em {
    font-style: italic;
    color: #B6FF6E;
    font-weight: 800;
}
.dg-sub {
    font-size: 0.92rem;
    color: #9CA3AF;
    line-height: 1.55;
    margin: 0 0 18px;
    max-width: 380px;
}
.dg-cta-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.dg-trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #9CA3AF;
}
.dg-stars { color: #B6FF6E; letter-spacing: 1px; font-size: 0.85rem; }
.dg-trust-text strong { color: #FFFFFF; }

.dg-photo-card {
    background: #181B20;
    border: 1px solid #2A2F36;
    border-radius: 14px;
    padding: 14px;
    position: relative;
    overflow: hidden;
}
.dg-photo-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(ellipse at top right, rgba(182,255,110,0.18), transparent 60%);
    pointer-events: none;
}
.dg-photo-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #B6FF6E;
    background: rgba(15,17,21,0.85);
    padding: 4px 10px;
    border-radius: 100px;
}
.dg-car-svg { display: block; width: 100%; height: auto; }

/* ── Service highlights row ──────────────────────────────── */
.dg-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.dg-svc-card {
    background: #181B20;
    border: 1px solid #2A2F36;
    border-radius: 12px;
    padding: 14px;
    position: relative;
    transition: border-color 0.2s, transform 0.2s;
}
.dg-svc-card:hover { border-color: #3A4048; transform: translateY(-2px); }
.dg-svc-card-feat {
    border-color: rgba(182,255,110,0.45);
    background: linear-gradient(180deg, rgba(182,255,110,0.06), #181B20 60%);
}
.dg-svc-num {
    font-size: 0.7rem;
    font-weight: 700;
    color: #B6FF6E;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.dg-svc-card h4 {
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: #FFFFFF;
    line-height: 1.2;
}
.dg-svc-card p {
    font-size: 0.78rem;
    color: #9CA3AF;
    margin-bottom: 8px;
    line-height: 1.4;
}
.dg-svc-price {
    font-size: 0.82rem;
    font-weight: 700;
    color: #B6FF6E;
}

/* ── Per-slide layout overrides ──────────────────────────────
   Higher specificity than the base .demo-slide .dg-page rule so
   the slide-specific grid layouts win the cascade. */
.demo-slide .dg-page.dg-page-split,
.demo-modal-body .dg-page.dg-page-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 22px;
}
.dg-col {
    background: #181B20;
    border: 1px solid #2A2F36;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dg-col-eyebrow {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #B6FF6E;
    margin: 0;
}
.dg-col-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Reused form primitives */
.dg-form { display: flex; flex-direction: column; gap: 10px; }
.dg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dg-field { display: flex; flex-direction: column; gap: 4px; }
.dg-field > span {
    font-size: 0.7rem;
    font-weight: 600;
    color: #9CA3AF;
    letter-spacing: 0.02em;
}
.dg-input {
    background: #21252B;
    border: 1px solid #2A2F36;
    border-radius: 8px;
    padding: 9px 12px;
    color: #FFFFFF;
    font-size: 0.85rem;
    font-family: inherit;
    line-height: 1.4;
}
.dg-input-area { min-height: 60px; }
.dg-form-foot { font-size: 0.72rem; color: #6B7280; margin: 4px 0 0; text-align: center; }

/* Owner dashboard preview */
.dg-col-dash { gap: 10px; }
.dg-dash-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    background: #21252B;
    border-radius: 10px;
    padding: 10px;
}
.dg-dash-stat { text-align: center; }
.dg-dash-stat strong {
    display: block;
    font-size: 1.15rem;
    color: #B6FF6E;
    font-weight: 800;
    line-height: 1;
}
.dg-dash-stat span {
    font-size: 0.68rem;
    color: #9CA3AF;
    margin-top: 2px;
    display: block;
}
.dg-leads { display: flex; flex-direction: column; gap: 6px; }
.dg-lead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #21252B;
    border: 1px solid #2A2F36;
    border-radius: 8px;
}
.dg-lead-info { flex: 1; min-width: 0; }
.dg-lead-info strong {
    display: block;
    font-size: 0.82rem;
    color: #FFFFFF;
    font-weight: 700;
}
.dg-lead-info span {
    font-size: 0.72rem;
    color: #9CA3AF;
}
.dg-pill {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 100px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.dg-pill-new     { background: rgba(182,255,110,0.16); color: #B6FF6E; }
.dg-pill-quoted  { background: rgba(96,165,250,0.16);  color: #93C5FD; }
.dg-pill-booked  { background: rgba(251,191,36,0.16);  color: #FBBF24; }

.dg-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(182,255,110,0.12), rgba(182,255,110,0.04));
    border: 1px solid rgba(182,255,110,0.30);
    border-radius: 10px;
    margin-top: 4px;
}
.dg-toast-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #B6FF6E;
    color: #0F1115;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
}
.dg-toast strong { display: block; font-size: 0.78rem; color: #FFFFFF; }
.dg-toast span { font-size: 0.7rem; color: #9CA3AF; }

/* ── Chat demo (Slide 3) ─────────────────────────────────── */
.demo-slide .dg-page.dg-page-chatdemo,
.demo-modal-body .dg-page.dg-page-chatdemo {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: center;
    padding: 24px 28px;
}
.dg-chat-info { display: flex; flex-direction: column; gap: 10px; }
.dg-chat-desc {
    font-size: 0.88rem;
    color: #9CA3AF;
    line-height: 1.6;
    margin: 0 0 4px;
    max-width: 380px;
}
.dg-feat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dg-feat-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #FFFFFF;
}
.dg-tick {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(182,255,110,0.18);
    color: #B6FF6E;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* Phone-frame mockup */
.dg-phone {
    width: 100%;
    max-width: 280px;
    background: #21252B;
    border: 1px solid #2A2F36;
    border-radius: 28px;
    padding: 14px 12px 14px;
    box-shadow: 0 24px 50px -16px rgba(0,0,0,0.55);
    margin: 0 auto;
    position: relative;
}
.dg-phone-notch {
    width: 70px;
    height: 5px;
    background: #0F1115;
    border-radius: 100px;
    margin: 0 auto 10px;
}
.dg-phone-screen {
    background: #0F1115;
    border-radius: 18px;
    overflow: hidden;
}
.dg-phone-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #181B20;
    border-bottom: 1px solid #2A2F36;
}
.dg-phone-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #B6FF6E;
    color: #0F1115;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.dg-phone-header strong {
    display: block;
    font-size: 0.82rem;
    color: #FFFFFF;
    font-weight: 700;
}
.dg-phone-header span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.66rem;
    color: #9CA3AF;
}
.dg-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #B6FF6E;
    box-shadow: 0 0 0 2px rgba(182,255,110,0.25);
}

.dg-chat-thread { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.dg-bub {
    max-width: 85%;
    padding: 8px 11px;
    font-size: 0.78rem;
    line-height: 1.45;
    border-radius: 12px;
}
.dg-bub-bot {
    align-self: flex-start;
    background: #181B20;
    color: #FFFFFF;
    border-bottom-left-radius: 4px;
}
.dg-bub-user {
    align-self: flex-end;
    background: #B6FF6E;
    color: #0F1115;
    font-weight: 600;
    border-bottom-right-radius: 4px;
}
.dg-bub-list { list-style: none; padding: 6px 0 0; margin: 6px 0 0; border-top: 1px solid #2A2F36; }
.dg-bub-list li { font-size: 0.75rem; padding: 2px 0; color: #FFFFFF; }
.dg-bub-list strong { color: #B6FF6E; }
.dg-chat-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 10px;
}
.dg-chip {
    background: #181B20;
    border: 1px solid #2A2F36;
    color: #B6FF6E;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 100px;
    cursor: default;
    font-family: inherit;
}
.dg-chat-input {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: #181B20;
    border-top: 1px solid #2A2F36;
}
.dg-chat-placeholder {
    flex: 1;
    color: #6B7280;
    font-size: 0.78rem;
}
.dg-chat-send {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #B6FF6E;
    color: #0F1115;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Booking flow (Slide 4) ──────────────────────────────── */
.demo-slide .dg-page.dg-page-book,
.demo-modal-body .dg-page.dg-page-book {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
    align-items: start;
    padding: 22px;
}
.dg-book-main { display: flex; flex-direction: column; }
.dg-book-side {
    background: #181B20;
    border: 1px solid #2A2F36;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dg-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    grid-column: 1 / 2;
}
.dg-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #6B7280;
    font-size: 0.78rem;
    font-weight: 600;
}
.dg-step i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #21252B;
    color: #9CA3AF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-weight: 700;
    font-size: 0.74rem;
    border: 1px solid #2A2F36;
}
.dg-step.is-active { color: #FFFFFF; }
.dg-step.is-active i { background: #B6FF6E; color: #0F1115; border-color: #B6FF6E; }
.dg-step-line {
    flex: 1;
    height: 1px;
    background: #2A2F36;
    max-width: 36px;
}

.dg-pkg-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.dg-pkg-card {
    background: #181B20;
    border: 1px solid #2A2F36;
    border-radius: 10px;
    padding: 12px;
    color: #FFFFFF;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    transition: border-color 0.2s, transform 0.15s;
}
.dg-pkg-card:hover { border-color: #3A4048; transform: translateY(-1px); }
.dg-pkg-card.is-selected {
    border-color: #B6FF6E;
    background: linear-gradient(180deg, rgba(182,255,110,0.08), #181B20 70%);
    box-shadow: 0 0 0 1px rgba(182,255,110,0.45) inset;
}
.dg-pkg-tag {
    position: absolute;
    top: -8px;
    right: 10px;
    font-size: 0.62rem;
    font-weight: 700;
    background: #B6FF6E;
    color: #0F1115;
    padding: 2px 8px;
    border-radius: 100px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.dg-pkg-name { font-size: 0.85rem; font-weight: 700; }
.dg-pkg-time { font-size: 0.7rem; color: #9CA3AF; }
.dg-pkg-price { font-size: 0.85rem; font-weight: 800; color: #B6FF6E; margin-top: 2px; }

.dg-section-mini {
    font-size: 0.78rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.dg-addons { display: flex; flex-direction: column; gap: 6px; }
.dg-addon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: #181B20;
    border: 1px solid #2A2F36;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #FFFFFF;
    cursor: default;
}
.dg-addon input[type="checkbox"] {
    accent-color: #B6FF6E;
    width: 14px;
    height: 14px;
}
.dg-addon span { margin-left: auto; color: #B6FF6E; font-weight: 700; }

.dg-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.78rem;
    color: #9CA3AF;
    padding: 4px 0;
}
.dg-summary-row strong { color: #FFFFFF; font-weight: 600; text-align: right; }
.dg-summary-divider { height: 1px; background: #2A2F36; margin: 8px 0; }
.dg-summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 10px;
}
.dg-summary-total strong { color: #B6FF6E; }

/* ── Contact / Estimate (Slide 5) ────────────────────────── */
.demo-slide .dg-page.dg-page-contact,
.demo-modal-body .dg-page.dg-page-contact {
    padding: 22px;
}
.dg-contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    align-items: start;
}
.dg-contact-form-wrap {
    background: #181B20;
    border: 1px solid #2A2F36;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dg-contact-sub { font-size: 0.85rem; color: #9CA3AF; line-height: 1.55; margin: 0 0 4px; }

.dg-contact-side { display: flex; flex-direction: column; gap: 12px; }
.dg-contact-card {
    background: #181B20;
    border: 1px solid #2A2F36;
    border-radius: 12px;
    padding: 16px;
}
.dg-contact-card h5 {
    font-size: 0.78rem;
    font-weight: 700;
    color: #B6FF6E;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.dg-contact-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #9CA3AF;
    padding: 5px 0;
    margin: 0;
    border-bottom: 1px solid rgba(42,47,54,0.6);
}
.dg-contact-line:last-child { border-bottom: none; }
.dg-contact-line strong { color: #FFFFFF; font-weight: 600; }

.dg-trust-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.dg-trust-row {
    font-size: 0.8rem;
    color: #FFFFFF;
    padding: 4px 0;
    border-bottom: 1px solid rgba(42,47,54,0.6);
}
.dg-trust-row:last-child { border-bottom: none; }

/* Map placeholder — pure CSS */
.dg-map-card { padding: 12px; }
.dg-map {
    position: relative;
    height: 130px;
    border-radius: 9px;
    background: #21252B;
    overflow: hidden;
    border: 1px solid #2A2F36;
}
.dg-map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(182,255,110,0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(182,255,110,0.06) 1px, transparent 1px);
    background-size: 22px 22px;
}
.dg-map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #B6FF6E;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px #0F1115, 0 0 0 4px #B6FF6E;
    z-index: 2;
}
.dg-map-radius {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 1px dashed rgba(182,255,110,0.5);
    background: radial-gradient(circle, rgba(182,255,110,0.08), transparent 70%);
    transform: translate(-50%, -50%);
}
.dg-map-label {
    font-size: 0.75rem;
    color: #9CA3AF;
    margin: 10px 0 0;
    text-align: center;
}

/* ================================================================
   29. DEMO LIGHTBOX MODAL
================================================================ */
.demo-modal {
    position: fixed;
    inset: 0;
    z-index: 300; /* above the chat widget (z 200) */
    display: none;
}
.demo-modal[data-state="open"] { display: block; }

.demo-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: demo-fade-in 0.2s ease both;
}

.demo-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1100px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    animation: demo-pop-in 0.22s ease both;
}

@keyframes demo-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes demo-pop-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.demo-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    flex-shrink: 0;
}
.demo-modal-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.demo-modal-brand { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.demo-modal-url   { font-size: 0.72rem; color: var(--text-muted); }

.demo-modal-tabs {
    display: flex;
    gap: 2px;
    margin-left: auto;
    overflow-x: auto;
    scrollbar-width: none;
}
.demo-modal-tabs::-webkit-scrollbar { display: none; }
.demo-modal-tabs .demo-tab {
    padding: 7px 12px;
    font-size: 0.78rem;
}

.demo-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s;
}
.demo-modal-close:hover { border-color: var(--blue); color: var(--blue); }

.demo-modal-body {
    flex: 1;
    overflow-y: auto;
    background: #0F1115;
    padding: 0;
}
/* Make the cloned slide expand fully inside the modal */
.demo-modal-body .demo-slide {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}
.demo-modal-body .dg-page { min-height: auto; }

.demo-modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 16px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    flex-shrink: 0;
}
.demo-modal-caption {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    min-width: 200px;
    text-align: center;
}

/* Lock body scroll while the modal is open — JS toggles this */
body.demo-modal-open { overflow: hidden; }

/* ================================================================
   30. DEMO SHOWCASE — Mobile breakpoints
================================================================ */
@media (max-width: 1024px) {
    .demo-brand {
        grid-template-columns: auto 1fr;
        gap: 16px 18px;
    }
    .demo-brand-stats {
        grid-column: 1 / -1;
        justify-content: space-between;
        border-top: 1px solid #F1F5F9;
        padding-top: 14px;
        gap: 12px;
    }
    .bs-item { align-items: flex-start; }

    /* Slide layouts collapse on tablet so they remain readable.
       Specificity matches the rules above so they actually win. */
    .dg-hero { grid-template-columns: 1fr; }
    .demo-slide .dg-page.dg-page-split,
    .demo-modal-body .dg-page.dg-page-split { grid-template-columns: 1fr; }
    .demo-slide .dg-page.dg-page-chatdemo,
    .demo-modal-body .dg-page.dg-page-chatdemo { grid-template-columns: 1fr; gap: 18px; }
    .dg-phone { max-width: 260px; }
    .demo-slide .dg-page.dg-page-book,
    .demo-modal-body .dg-page.dg-page-book { grid-template-columns: 1fr; }
    .dg-contact-grid { grid-template-columns: 1fr; }
    .dg-services { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .demo-brand { padding: 16px 18px; }
    .demo-brand-name { font-size: 1.05rem; }
    .demo-brand-tag { font-size: 0.82rem; }

    /* Tabs scroll horizontally on mobile with snap */
    .demo-tabs { padding: 4px; gap: 2px; }
    .demo-tab { padding: 8px 12px; font-size: 0.82rem; }

    .demo-browser-bar { gap: 8px; padding: 8px 10px; }
    .demo-browser-url { padding: 4px 10px; font-size: 0.7rem; }
    .demo-expand-btn { padding: 5px 9px; font-size: 0.72rem; }
    .demo-expand-btn span { display: none; }

    .demo-slides-track { min-height: 540px; }

    /* Inside the slide pages */
    .demo-slide .dg-page,
    .demo-modal-body .dg-page {
        padding: 18px 16px;
        gap: 16px;
    }
    .dg-nav-links { display: none; }
    .dg-h1 { font-size: 1.4rem; }
    .dg-services { grid-template-columns: 1fr; }
    .dg-row { grid-template-columns: 1fr; }
    .dg-pkg-row { grid-template-columns: 1fr; }
    .dg-steps { flex-wrap: wrap; }

    .demo-controls { gap: 12px; }
    .demo-caption { max-width: none; flex: 1; }
    .demo-caption strong { font-size: 0.85rem; }
    .demo-caption span { font-size: 0.76rem; }

    /* Modal becomes a near-fullscreen sheet on mobile */
    .demo-modal-content {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }
    @keyframes demo-pop-in {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .demo-modal-header { flex-wrap: wrap; gap: 10px; }
    .demo-modal-title { order: 1; flex: 1; }
    .demo-modal-close { order: 2; }
    .demo-modal-tabs { order: 3; flex-basis: 100%; margin-left: 0; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .demo-slide { transition: opacity 0.15s ease; transform: none; }
    .demo-modal-backdrop, .demo-modal-content { animation: none; }
}

/* ================================================================
   31. DEMO SLIDE 1 — "SHOWROOM STAGE"
   Premium-automotive landing layout for the Gloss Garage demo.
   Everything is scoped under .demo-slide .dg-page-landing (and the
   modal equivalent) so the dark/glossy styling cannot leak into the
   FlowCraft site. To revert: swap data-* / class names on the slide
   back to the original .dg-hero / .dg-services markup.
================================================================ */

/* Override the base .dg-page rules just for this slide so the
   stage can run full-bleed (no gap, no padding). Higher specificity
   than .demo-slide .dg-page so this wins the cascade. */
.demo-slide .dg-page.dg-page-landing,
.demo-modal-body .dg-page.dg-page-landing {
    padding: 0;
    gap: 0;
    background: #0A0C0F;
}

/* Slim top nav inside the landing slide */
.dg-page-landing .dg-nav {
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(10,12,15,0.85);
}

/* ── Hero stage ─────────────────────────────────────────────
   Composition: dark base + perspective floor grid + diagonal
   light streak + lime underbody glow + radial vignette. The car
   SVG sits on top of all atmosphere layers. */
.dg-stage {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 50% 110%, rgba(182,255,110,0.10), transparent 60%),
        linear-gradient(180deg, #0A0C0F 0%, #14171C 100%);
    isolation: isolate;
}

/* Perspective floor grid */
.dg-stage-floor {
    position: absolute;
    bottom: 0;
    left: -10%;
    right: -10%;
    height: 38%;
    background-image:
        linear-gradient(to right,  rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 60px 32px;
    transform: perspective(420px) rotateX(58deg);
    transform-origin: center top;
    -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%);
            mask-image: linear-gradient(to top, #000 45%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* Diagonal "polished hood reflection" light streak */
.dg-stage-streak {
    position: absolute;
    top: -50%;
    left: -10%;
    width: 70%;
    height: 200%;
    background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.07) 50%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* Vignette darkening the corners */
.dg-stage-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Lime ambient glow under the car */
.dg-stage-glow {
    position: absolute;
    bottom: 6%;
    left: 50%;
    width: 55%;
    height: 90px;
    background: radial-gradient(ellipse, rgba(182,255,110,0.24), transparent 70%);
    transform: translateX(-50%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 1;
}

/* Headline overlay — top-left of the stage */
.dg-stage-content {
    position: relative;
    z-index: 4;
    padding: 36px 36px 16px;
    max-width: 60%;
}
.dg-stage-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #B6FF6E;
    margin-bottom: 18px;
    font-weight: 600;
}
.dg-stage-h1 {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #FFFFFF;
    margin: 0;
    text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.dg-stage-h1 .dg-italic {
    font-style: italic;
    font-weight: 300;
    color: #B6FF6E;
}
.dg-stage-h1 .dg-faded {
    color: rgba(255,255,255,0.55);
    font-weight: 400;
}

/* "Featured · Ceramic Coating" floating badge */
.dg-stage-badge {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(15,17,21,0.78);
    border: 1px solid rgba(182,255,110,0.40);
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #FFFFFF;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.dg-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #B6FF6E;
    box-shadow: 0 0 0 3px rgba(182,255,110,0.20);
    flex-shrink: 0;
}

/* Sportscar SVG positioned bottom-right */
.dg-stage-car {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 78%;
    max-width: 720px;
    z-index: 3;
    pointer-events: none;
    transform: translateY(6px);
}
.dg-car-art {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,0.45));
}

/* CTA + trust row sits below the stage */
.dg-stage-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 28px;
    background: linear-gradient(180deg, #0A0C0F 0%, #11141A 100%);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-wrap: wrap;
}
.dg-stage-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.dg-stage-trust {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
}
.dg-stage-trust .dg-stars {
    color: #B6FF6E;
    letter-spacing: 1px;
    font-size: 0.92rem;
}
.dg-stage-trust strong { color: #FFFFFF; font-weight: 700; }

/* ── 4-tile service grid ────────────────────────────────────
   Visually distinct from FlowCraft cards: tighter, dark, with a
   small icon chip + thin lime accent rule under the icon. */
.dg-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 22px 28px;
    background: #0F1115;
}
.dg-tile {
    position: relative;
    background: linear-gradient(180deg, #15181E 0%, #0F1115 100%);
    border: 1px solid #21252B;
    border-radius: 12px;
    padding: 18px 16px 16px;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.dg-tile:hover {
    border-color: rgba(182,255,110,0.35);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
.dg-tile-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(182,255,110,0.10);
    color: #B6FF6E;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border: 1px solid rgba(182,255,110,0.18);
}
.dg-tile-rule {
    display: block;
    width: 22px;
    height: 2px;
    background: #B6FF6E;
    margin-bottom: 10px;
    border-radius: 2px;
}
.dg-tile h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 4px;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.dg-tile p {
    font-size: 0.77rem;
    color: rgba(255,255,255,0.55);
    margin: 0 0 12px;
    line-height: 1.45;
}
.dg-tile-spec {
    font-size: 0.78rem;
    font-weight: 700;
    color: #B6FF6E;
    letter-spacing: 0.01em;
}

/* Featured tile (Ceramic) — soft inner glow + ribbon */
.dg-tile-feat {
    background: linear-gradient(180deg, rgba(182,255,110,0.08) 0%, #15181E 60%);
    border-color: rgba(182,255,110,0.45);
    box-shadow: 0 0 0 1px rgba(182,255,110,0.15) inset;
}
.dg-tile-ribbon {
    position: absolute;
    top: -8px;
    right: 14px;
    background: #B6FF6E;
    color: #0A0C0F;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 100px;
}

/* ── Bottom stat strip (premium proof points) ────────────── */
.dg-stat-strip {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 18px;
    padding: 22px 28px 26px;
    background: #0A0C0F;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.dg-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}
.dg-stat-num {
    font-size: 1.85rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.025em;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
}
.dg-stat-sub {
    font-size: 0.95rem;
    font-weight: 700;
    color: #B6FF6E;
    margin-left: 3px;
}
.dg-stat-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    margin-top: 6px;
    letter-spacing: 0.04em;
    line-height: 1.4;
}
.dg-stat-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.12), transparent);
}

/* ── Mobile & tablet adjustments ───────────────────────────── */
@media (max-width: 1024px) {
    .dg-stage { min-height: 320px; }
    .dg-stage-content { max-width: 70%; }
    .dg-stage-h1 { font-size: 2rem; }
    .dg-stage-car { width: 88%; }
    .dg-tile-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .dg-stage { min-height: 300px; }
    .dg-stage-content {
        max-width: 100%;
        padding: 22px 20px 8px;
    }
    .dg-stage-h1 { font-size: 1.55rem; }
    .dg-stage-badge {
        top: 12px;
        right: 12px;
        padding: 6px 10px;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }
    .dg-stage-car {
        width: 110%;
        right: -8%;
        opacity: 0.85; /* keep readable behind text on mobile */
    }
    .dg-stage-actions {
        padding: 16px 18px;
        gap: 12px;
    }
    .dg-tile-grid { gap: 10px; padding: 16px 18px; }
    .dg-tile { padding: 14px 14px 12px; }
    .dg-tile h4 { font-size: 0.88rem; }
    .dg-stat-strip {
        flex-wrap: wrap;
        gap: 14px;
        padding: 18px;
    }
    .dg-stat { flex: 1 1 calc(33% - 10px); }
    .dg-stat-num { font-size: 1.4rem; }
    .dg-stat-divider { display: none; }
}

/* Reduced motion already covered by section 30, but the floor grid
   uses a static transform so no extra rule needed here. */