/* ==========================================================
   ATLAZ MEDIA — Premium Landing Page Styles
   Orange accent • Light/Dark mode • Mobile-first
   ========================================================== */

/* --- CSS CUSTOM PROPERTIES --- */
:root {
    --font-primary: 'Inter', sans-serif;
    --font-display: 'Plus Jakarta Sans', sans-serif;

    /* Orange Palette - Light */
    --primary-color: #e8590c;
    --primary-rgb: 232, 89, 12;
    --primary-hover: #d14b08;
    --accent-color: #f97316;
    --accent-rgb: 249, 115, 22;
    --accent-secondary: #fb923c;
    --accent-secondary-rgb: 251, 146, 60;

    --bg-body: #fafaf9;
    --bg-body-rgb: 250, 250, 249;
    --bg-surface: #ffffff;
    --bg-surface-rgb: 255, 255, 255;
    --bg-alt: #f5f0eb;

    --border-color: #e7e0d8;
    --border-color-rgb: 231, 224, 216;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.5rem;
    --border-radius: 0.5rem;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
    --shadow-glow: 0 0 60px rgba(var(--primary-rgb),0.15);
    --shadow-glow-lg: 0 0 100px rgba(var(--primary-rgb),0.25);

    --text-primary: #1c1917;
    --text-secondary: #57534e;
    --text-muted: #726d68;

    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    --gradient-hero: linear-gradient(135deg, rgba(var(--primary-rgb),0.08) 0%, rgba(var(--accent-rgb),0.05) 50%, rgba(var(--accent-secondary-rgb),0.03) 100%);
    --gradient-text: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 50%, var(--accent-secondary) 100%);

    --color-success: #10b981;
    --color-success-subtle: rgba(16,185,129,0.1);
    --color-danger: #ef4444;
    --color-danger-subtle: rgba(239,68,68,0.1);

    --banner-height: 40px;
    /* Side gutter for everything in .container, navbar included. Widened on
       phones below — 24px reads as cramped next to display type at 375px. */
    --gutter: 1.5rem;
    --transition-base: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 600px) {
    :root {
        --gutter: 2rem;
    }
}

[data-theme="dark"] {
    --primary-color: #f97316;
    --primary-rgb: 249, 115, 22;
    --primary-hover: #fb923c;
    --accent-color: #fb923c;
    --accent-rgb: 251, 146, 60;
    --accent-secondary: #fdba74;
    --accent-secondary-rgb: 253, 186, 116;

    --bg-body: #0c0a09;
    --bg-body-rgb: 12, 10, 9;
    --bg-surface: #1c1917;
    --bg-surface-rgb: 28, 25, 23;
    --bg-alt: #292524;

    --border-color: #292524;
    --border-color-rgb: 41, 37, 36;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 60px rgba(var(--primary-rgb),0.2);
    --shadow-glow-lg: 0 0 100px rgba(var(--primary-rgb),0.3);

    --text-primary: #fafaf9;
    --text-secondary: #d6d3d1;
    --text-muted: #918b87;

    --gradient-hero: linear-gradient(135deg, rgba(var(--primary-rgb),0.1) 0%, rgba(var(--accent-rgb),0.08) 50%, rgba(var(--accent-secondary-rgb),0.05) 100%);

    --color-success: #34d399;
    --color-danger: #f87171;
}

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

html, body {
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-body);
    color: var(--text-primary);
    transition: background-color 0.4s ease, color 0.4s ease;
    line-height: 1.6;
}

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

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.15;
}

a { color: var(--primary-color); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--primary-hover); }

img { max-width: 100%; height: auto; }

.text-center { text-align: center; }
.me-2 { margin-right: 0.5rem; }

/* --- ANIMATIONS --- */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes particle-float {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

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

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

.reveal, .reveal-pop {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal {
    transform: translateY(30px);
}

.reveal-pop {
    transform: translateY(30px) scale(0.9);
}

/* Force visible state */
.reveal.visible, 
.reveal-pop.visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* --- SCROLL PROGRESS --- */
.scroll-progress {
    position: fixed; top: 0; left: 0; width: 0%; height: 3px;
    background: var(--gradient-primary);
    z-index: 9999;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 10px rgba(var(--primary-rgb),0.5);
}

/* --- BANNER --- */
.construction-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--banner-height);
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    font-size: 0.85rem;
    font-weight: 800;
    text-align: center;
    padding: 0 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.construction-banner i {
    margin-right: 0.5rem;
}

/* --- NAVBAR --- */
.navbar {
    position: fixed; 
    top: var(--banner-height); 
    left: 0; 
    right: 0; 
    z-index: 1000;
    padding: 1rem 0;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, padding 0.3s ease, top 0.3s ease;
}
.navbar.scrolled {
    /* padding-block so this doesn't wipe the horizontal inset the pill needs
       at >=1200px (see below) every time the page is scrolled. */
    padding-block: 0.5rem;
}
.nav-container {
    display: flex; align-items: center; justify-content: space-between; position: relative;
}
@media (min-width: 1200px) {
    /* The pill IS .container, so its distance from the screen edge is only
       whatever the viewport has spare beyond max-width: 1200px — which is
       nothing at a 1200px window, and the pill ends up flush against both
       edges. Inset the fixed bar itself so the pill always keeps a gutter
       no matter how narrow the window gets. */
    .navbar {
        padding-inline: var(--gutter);
    }

    .nav-container {
        background-color: rgba(var(--bg-surface-rgb), 0.75);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(var(--border-color-rgb), 0.5);
        border-radius: 50rem;
        padding: 0.5rem 1rem 0.5rem 1.5rem;
        box-shadow: var(--shadow-lg);
    }
}
@media (max-width: 1199px) {
    .navbar.scrolled {
        background-color: rgba(var(--bg-body-rgb), 0.9);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    /* Keep the same side gutter as .container. Zeroing it outright pushed the
       logo and the menu button flush into the screen edges on phones — the
       pill padding this was cancelling only ever applies at 1200px and up. */
    .nav-container { padding: 0 var(--gutter); }
}
.navbar-brand {
    font-family: var(--font-display); font-weight: 800;
    color: var(--primary-color) !important; font-size: 1.6rem; text-decoration: none;
    display: flex; align-items: center;
}
.nav-links { display: flex; gap: 0.25rem; position: absolute; left: 50%; transform: translateX(-50%); }
.nav-link {
    position: relative;
    font-weight: 600; color: var(--text-secondary); text-decoration: none;
    padding: 0.5rem 0.85rem; border-radius: 50rem; white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-link:hover { color: var(--text-primary); background-color: var(--bg-alt); }
.nav-badge {
    position: absolute; top: -4px; right: -2px;
    font-size: 0.5rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
    color: #fff; background: var(--gradient-primary);
    padding: 1px 5px; border-radius: 50rem; line-height: 1.5;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb),0.45);
    pointer-events: none;
}
.nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.theme-toggle-btn {
    background: none; border: 1px solid var(--border-color);
    color: var(--text-secondary); width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; transition: all 0.3s ease;
}
.theme-toggle-btn:hover { color: var(--primary-color); border-color: var(--primary-color); }

/* Mobile menu button */
.mobile-menu-btn {
    display: none; background: none; border: none; cursor: pointer;
    width: 30px; height: 24px; position: relative; z-index: 1001;
}
.mobile-menu-btn span {
    display: block; width: 100%; height: 2px; background: var(--text-primary);
    border-radius: 2px; transition: all 0.3s ease; position: absolute; left: 0;
}
.mobile-menu-btn span:nth-child(1) { top: 0; }
.mobile-menu-btn span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.mobile-menu-btn span:nth-child(3) { bottom: 0; }
.mobile-menu-btn.active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

.mobile-menu {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999;
    background: rgba(var(--bg-body-rgb), 0.97); backdrop-filter: blur(20px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.5rem; opacity: 0; pointer-events: none;
    padding: 0 var(--gutter);
    transition: opacity 0.3s ease;
}
.mobile-menu.active { opacity: 1; pointer-events: auto; }
.mobile-nav-link {
    font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
    color: var(--text-primary); text-decoration: none; transition: color 0.2s ease;
}
.mobile-nav-link:hover { color: var(--primary-color); }
.mobile-cta { margin-top: 1rem; }

/* The full link bar needs 1280px to clear the CTA button; below that the
   hamburger takes over. */
@media (max-width: 1279px) {
    .nav-links { display: none; }
    .nav-actions .btn { display: none; }
    .mobile-menu-btn { display: block; }
}

/* --- BUTTONS --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700;
    padding: 0.75rem 1.75rem; border-radius: 50rem; border: none;
    cursor: pointer; font-size: 0.95rem; text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1); position: relative; overflow: hidden;
}
.btn span { position: relative; z-index: 1; }
.btn-lg { padding: 1rem 2.5rem; font-size: 1.1rem; }
.btn-full { width: 100%; }

.btn-fancy-solid {
    background: var(--gradient-primary); color: white;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb),0.3);
}
.btn-fancy-solid::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-secondary) 100%);
    opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.btn-fancy-solid:hover {
    transform: translateY(-4px) scale(1.02); color: white;
    box-shadow: 0 20px 50px rgba(var(--primary-rgb),0.4);
}
.btn-fancy-solid:hover::before { opacity: 1; }

.btn-fancy-ghost {
    background: transparent; color: var(--primary-color);
    border: 2px solid rgba(var(--primary-rgb),0.3);
}
.btn-fancy-ghost::before {
    content: ''; position: absolute; inset: 0;
    background: var(--gradient-primary); opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.btn-fancy-ghost:hover {
    border-color: transparent; color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(var(--primary-rgb),0.3);
}
.btn-fancy-ghost:hover::before { opacity: 1; }

/* --- HERO --- */
.hero {
    padding: calc(160px + var(--banner-height)) 0 100px; position: relative; overflow: hidden;
    background: var(--bg-body);
}
.hero::before {
    content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
    width: 100%; height: 100%;
    background: var(--gradient-hero); z-index: -2;
}
.hero-content { max-width: 900px; margin: 0 auto; text-align: center; }

.hero-orb {
    position: absolute; border-radius: 50%; filter: blur(80px);
    z-index: -1; animation: float 20s ease-in-out infinite;
}
.hero-orb-1 {
    width: 600px; height: 600px; background: rgba(var(--primary-rgb),0.15);
    top: -200px; left: -100px;
}
.hero-orb-2 {
    width: 500px; height: 500px; background: rgba(var(--accent-rgb),0.12);
    top: 100px; right: -150px; animation-delay: -7s;
}
.hero-orb-3 {
    width: 400px; height: 400px; background: rgba(var(--accent-secondary-rgb),0.1);
    bottom: -100px; left: 30%; animation-delay: -14s;
}

.particles-container {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.particle {
    position: absolute; width: 4px; height: 4px;
    background: rgba(var(--primary-rgb),0.4); border-radius: 50%;
    animation: particle-float linear infinite;
}
.particle:nth-child(odd) { background: rgba(var(--accent-rgb),0.3); }
.particle:nth-child(3n) { width: 6px; height: 6px; background: rgba(var(--accent-secondary-rgb),0.25); }

.gradient-text {
    background: var(--gradient-text); background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

.hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.05; letter-spacing: -0.02em; }
.hero-lead { font-size: 1.15rem; color: var(--text-secondary); max-width: 650px; margin: 1.5rem auto 0; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.5rem; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(var(--primary-rgb),0.1);
    border: 1px solid rgba(var(--primary-rgb),0.2);
    padding: 0.5rem 1rem; border-radius: 50rem;
    font-size: 0.85rem; font-weight: 600; color: var(--primary-color);
    margin-bottom: 1.5rem;
}
.hero-badge i { font-size: 0.75rem; }

.hero-stats {
    display: flex; align-items: center; justify-content: center;
    gap: 2rem; margin-top: 3.5rem; flex-wrap: wrap;
}
.hero-stat { text-align: center; }
.hero-stat-value {
    font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
    background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
.hero-stat-divider { width: 1px; height: 40px; background: var(--border-color); }

/* --- PLATFORMS --- */
.section-platforms { padding: 0.5rem 0 4rem; text-align: center; }
.platforms-label {
    font-size: 0.85rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-muted); margin-bottom: 1.5rem;
}
.platforms-row { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; }
.platform-icon {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    color: var(--text-muted); transition: color 0.3s ease;
}
.platform-icon i { font-size: 2rem; }
.platform-icon span { font-size: 0.75rem; font-weight: 600; }
.platform-icon:hover { color: var(--primary-color); }

/* --- HERO VIDEO --- */
.section.hero-video-section {
    padding: 1rem 0 1.5rem;
    background: var(--bg-body);
}
.hero-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    border: 1px solid rgba(var(--border-color-rgb), 0.3);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    background: var(--bg-surface);
}
.hero-video-wrapper iframe,
.hero-video-wrapper #heroYTPlayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.yt-volume-btn {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.8;
}
.yt-volume-btn:hover {
    opacity: 1;
    background: rgba(var(--primary-rgb), 0.8);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.4);
}

/* --- SECTIONS --- */
.section { padding: 100px 0; position: relative; overflow: hidden; background: var(--bg-body); }
.section-alt {
    background: var(--bg-surface); position: relative; overflow: hidden;
}
.section-alt::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(var(--primary-rgb),0.03) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(var(--accent-rgb),0.02) 0%, transparent 50%);
    pointer-events: none;
}
.section-gradient {
    background:
        radial-gradient(ellipse 100% 80% at 10% 20%, rgba(var(--primary-rgb),0.08) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 90% 80%, rgba(var(--accent-rgb),0.06) 0%, transparent 50%),
        var(--bg-body);
}
.section-dots::after {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(var(--primary-rgb),0.08) 1px, transparent 1px);
    background-size: 24px 24px; pointer-events: none; opacity: 0.5;
    z-index: 0;
}
.section-grid-bg::after {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(var(--border-color-rgb),0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--border-color-rgb),0.3) 1px, transparent 1px);
    background-size: 60px 60px; pointer-events: none; opacity: 0.4;
    z-index: 0;
}

/* These decorative overlays are absolutely positioned, so they paint on top of
   the section's own in-flow content — the grid lines were running straight
   across the consultation button and step cards. The overlay stays at z-index 0
   and the content is lifted above it. They already had pointer-events: none, so
   only the look was affected, never the clicking. */
.section-grid-bg > .container,
.section-dots > .container {
    position: relative;
    z-index: 1;
}

.section-header { max-width: 700px; margin: 0 auto 4rem; }
.eyebrow {
    color: var(--primary-color); font-weight: 700; font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem;
    display: block; font-size: 0.85rem;
}
.section-lead { color: var(--text-secondary); font-size: 1.1rem; margin-top: 1rem; }

/* --- COMPARISON CARDS --- */
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 768px) { .comparison-grid { grid-template-columns: 1fr; } }

.comparison-card {
    background: var(--bg-surface); border: 1px solid rgba(var(--border-color-rgb),0.5);
    border-radius: var(--border-radius-xl); padding: 2.5rem; position: relative; overflow: hidden;
}
.comparison-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.comparison-card-pain::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.comparison-card-solution::before { background: var(--gradient-primary); }
.comparison-card h3 { margin-bottom: 1.5rem; }

.comparison-list { list-style: none; }
.comparison-list li { display: flex; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem; }
.comparison-list li:last-child { margin-bottom: 0; }
.comparison-list i { font-size: 1.5rem; margin-top: 0.15rem; flex-shrink: 0; }
.comparison-list h5 { margin-bottom: 0.25rem; font-size: 1rem; }
.comparison-list p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; }
.icon-success { color: var(--color-success); }
.icon-danger { color: var(--color-danger); }

/* --- FEATURE CARDS --- */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; position: relative; z-index: 1; }
@media (max-width: 768px) { .features-grid { grid-template-columns: 1fr; } }

.feature-card {
    background: var(--bg-surface); border: 1px solid rgba(var(--border-color-rgb),0.5);
    border-radius: var(--border-radius-xl); padding: 2.5rem;
    transition: all 0.5s cubic-bezier(0.16,1,0.3,1); position: relative; overflow: hidden;
}
.feature-card::before {
    content: ''; position: absolute; inset: 0; border-radius: var(--border-radius-xl);
    padding: 1px; background: var(--gradient-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0;
    transition: opacity 0.4s ease;
}
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg), var(--shadow-glow); }
.feature-card:hover::before { opacity: 1; }
.feature-card h3 { margin: 1rem 0 0.75rem; }
.feature-card p { color: var(--text-secondary); font-size: 0.95rem; }

.feature-icon {
    width: 60px; height: 60px; border-radius: var(--border-radius);
    background: var(--gradient-primary); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; box-shadow: 0 8px 20px rgba(var(--primary-rgb),0.3);
}
.feature-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.feature-tag {
    background: rgba(var(--primary-rgb),0.1); color: var(--primary-color);
    padding: 0.25rem 0.75rem; border-radius: 50rem; font-size: 0.75rem; font-weight: 600;
}

/* --- SPLIT SECTION (Content + Visual) --- */
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
@media (max-width: 768px) { .split-section { grid-template-columns: 1fr; } }
.split-content h2 { margin: 0.75rem 0 1rem; }

.icon-list { list-style: none; }
.icon-list li { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.icon-list-icon {
    width: 44px; height: 44px; border-radius: var(--border-radius);
    background: var(--gradient-primary); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0; box-shadow: 0 6px 16px rgba(var(--primary-rgb),0.25);
}
.icon-list h5 { margin-bottom: 0.25rem; font-size: 1rem; }
.icon-list p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; }

/* Phone Mockups */
.phone-mockup-grid { display: flex; gap: 1.5rem; justify-content: center; }
.phone-mockup {
    width: 200px; border-radius: 1.5rem;
    background: var(--bg-surface); border: 2px solid rgba(var(--border-color-rgb),0.5);
    box-shadow: var(--shadow-lg); overflow: hidden;
}
.phone-mockup-offset { margin-top: 3rem; }
.phone-screen { padding: 1.5rem 1rem; }
.phone-header {
    font-weight: 700; font-size: 0.85rem; margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary);
}
.phone-content {
    text-align: center; padding: 2rem 0;
}
.phone-content i.fa-play-circle { font-size: 3rem; color: var(--primary-color); display: block; margin-bottom: 1rem; }
.phone-content span { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.phone-stats {
    display: flex; justify-content: center; gap: 1rem; margin-top: 1rem;
    font-size: 0.75rem; color: var(--text-muted);
}
.phone-stats i { color: var(--primary-color); margin-right: 0.25rem; }

/* --- STEPS --- */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
}

@media (max-width: 992px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .step-arrow { display: none; }
}

@media (max-width: 576px) {
    .steps-grid { grid-template-columns: 1fr; }
}

.step-card {
    background: var(--bg-surface);
    border: 1px solid rgba(var(--border-color-rgb), 0.5);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    position: relative;
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: default;
}

.step-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    background-color: var(--bg-alt);
}

.step-card:hover .step-number {
    opacity: 0.25;
    transform: scale(1.1) translateY(-5px);
}

.step-card:hover h3 {
    color: var(--primary-color);
}

.step-arrow {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
    margin-left: 1rem;
    font-size: 1.25rem;
    color: var(--primary-color);
    z-index: 2;
    opacity: 0.8;
}

.step-number {
    font-family: var(--font-display);
    font-size: 3.5rem;
    color: var(--primary-color);
    opacity: 0.1;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-weight: 800;
    line-height: 1;
    transition: var(--transition-base);
}

/* Steps 1-3 carry a photo behind the copy. The scrim is doing real work: the
   artwork is high contrast and the body copy is muted grey, so over the bright
   areas the text would be unreadable without it. */
.step-card.step-photo {
    background-size: cover;
    background-position: center 22%;
    background-repeat: no-repeat;
    /* The card's border is half transparent, and by default the background
       paints under it while the scrim below only covers the padding box — so
       the raw photo showed through the border as a bright line around the
       edge. Clipping to the padding box keeps the photo inside the scrim.
       overflow:hidden does not help here; it clips children, not the
       element's own background. */
    background-clip: padding-box;
    overflow: hidden;
}

.step-card.step-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(12, 10, 9, 0.74) 0%,
        rgba(12, 10, 9, 0.88) 55%,
        rgba(12, 10, 9, 0.95) 100%);
    z-index: 0;
    transition: background 0.3s ease;
    pointer-events: none;
}

/* Lifted individually rather than with a blanket `> *`, because the number and
   the arrow are absolutely positioned and a shared position:relative would
   knock them out of place. */
.step-card.step-photo > h3,
.step-card.step-photo > p {
    position: relative;
    z-index: 1;
}

.step-card.step-photo > .step-number { z-index: 1; }
.step-card.step-photo > .step-arrow { z-index: 2; }

/* The scrim above is dark in both themes, so the copy on it has to stay light
   in both. Following the theme put near-black text on a near-black scrim in
   light mode. Same values dark mode already uses, so the cards look identical
   either way. */
.step-card.step-photo h3 { color: #fafaf9; }
.step-card.step-photo p { color: #d6d3d1; }
.step-card.step-photo:hover h3 { color: var(--primary-color); }

/* At 0.1 the number is a watermark on flat surface; over a photo it vanishes.
   Step 4 matches even though it has no photo, so the four numbers read as one
   set rather than three bright ones and a nearly invisible fourth. */
.step-card.step-photo .step-number,
.step-card.step-icon-card .step-number { opacity: 0.4; }

.step-card.step-photo:hover .step-number,
.step-card.step-icon-card:hover .step-number { opacity: 0.55; }

/* Steps 1 and 2 show each other's photo, so the rule numbers do not line
   up with the filenames. */
.step-photo-1 { background-image: url("steps/step-02.webp"); }
.step-photo-2 { background-image: url("steps/step-01.webp"); }
.step-photo-3 { background-image: url("steps/step-03.webp"); }

/* Step 4 has no photo, so an icon keeps the row from ending on a blank card. */
.step-icon-bg {
    /* Centred in the card as a watermark. It used to be anchored bottom-right
       with negative offsets, which hung it off the edge of the card. */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7rem;
    line-height: 1;
    color: var(--primary-color);
    /* Sits next to three cards carrying full photos, so it needs enough
       presence not to read as the one unfinished card in the row. */
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
    transition: var(--transition-base);
}

.step-icon-card:hover .step-icon-bg {
    opacity: 0.24;
    transform: scale(1.05) rotate(-3deg);
}

.step-icon-card > h3,
.step-icon-card > p {
    position: relative;
    z-index: 1;
}

.step-card h3 {
    margin-bottom: 1rem;
    font-size: 1.4rem;
    position: relative;
    transition: color 0.3s ease;
}

.step-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* --- INDUSTRIES --- */
.industries-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 768px) { 
    .industries-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 0.75rem;
    } 
}

.industry-card {
    background: var(--bg-surface);
    border: 1px solid rgba(var(--border-color-rgb), 0.5);
    border-radius: var(--border-radius-xl); /* Softer corners */
    padding: 3rem 1.5rem;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease,
                background-color 0.4s ease;
    cursor: default;
    overflow: hidden;
}

.industry-card:hover { 
    transform: translateY(-12px) scale(1.03);
    box-shadow: var(--shadow-xl), var(--shadow-glow);
    border-color: var(--primary-color);
    background-color: var(--bg-alt);
}

.industry-card:hover .industry-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 24px rgba(var(--primary-rgb), 0.4);
}

.industry-card:hover h5 {
    color: var(--primary-color);
}
.industry-icon {
    width: 56px; height: 56px; border-radius: var(--border-radius);
    background: var(--gradient-primary); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin: 0 auto 1rem;
    box-shadow: 0 8px 20px rgba(var(--primary-rgb),0.3);
    transition: var(--transition-base);
}
.industry-card h5 { 
    font-size: 0.95rem; 
    margin: 0;
    transition: color 0.3s ease;
}

@media (max-width: 768px) {
    .industry-card {
        padding: 1.25rem 0.75rem;
    }
    .industry-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    .industry-card h5 {
        font-size: 0.8rem;
    }
}

/* --- TEAM --- */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 4rem; position: relative; z-index: 1; margin-top: 3rem; }
.team-member { max-width: 800px; display: flex; flex-direction: column; align-items: center; text-align: center; }
@media (min-width: 992px) {
    .team-member { flex-direction: row; text-align: left; align-items: flex-start; gap: 3rem; }
}

.team-member-info { flex: 1; }

.team-photo {
    width: 240px; height: 240px; border-radius: 2rem; margin-bottom: 1.5rem;
    flex-shrink: 0;
    background: var(--bg-surface); border: 2px solid rgba(var(--border-color-rgb),0.5);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-lg), var(--shadow-glow); overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.team-member:hover .team-photo { transform: translateY(-6px); border-color: var(--primary-color); }
.team-member h3 { margin-bottom: 0.25rem; font-size: 1.8rem; }
.team-member .role { color: var(--primary-color); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; display: block; }
.team-bio { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; }
.team-bio p { margin-bottom: 1.25rem; }
/* The line that hands off to the next person in the lineup. */
.team-handoff { color: var(--text-muted); font-style: italic; margin-bottom: 0 !important; }
.team-closer {
    max-width: 820px; margin: 4rem auto 0; text-align: center; position: relative; z-index: 1;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.5;
    color: var(--text-primary);
}

/* --- CLIENTS --- */
.clients-marquee-container {
    overflow: hidden;
    padding: 3rem 0;
    position: relative;
    width: 100%;
}

.clients-marquee-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: marquee 40s linear infinite;
}

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

.client-box {
    background: var(--bg-surface); border: 1px solid rgba(var(--border-color-rgb),0.5);
    border-radius: var(--border-radius); padding: 1.5rem 2.5rem;
    font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
    color: var(--text-muted); transition: all 0.3s ease;
    display: flex; align-items: center; justify-content: center; min-width: 200px;
    box-shadow: var(--shadow-sm); filter: grayscale(100%); opacity: 0.7;
    animation: float-slow 4s ease-in-out infinite;
    white-space: nowrap;
}
.client-box:nth-child(even) { animation-delay: -2s; }

.client-box.construction-highlight {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    filter: grayscale(0%);
    opacity: 1;
    background: rgba(var(--primary-rgb), 0.05);
    box-shadow: var(--shadow-glow);
}

.client-box:hover {
    color: var(--text-primary); border-color: var(--primary-color);
    box-shadow: var(--shadow-md), var(--shadow-glow); filter: grayscale(0%); opacity: 1;
    transform: translateY(-4px);
}

/* Real client logos, running as one continuous line with no chip behind them.
   The set mixes dark and light artwork, so each one is knocked out to a flat
   white silhouette — that is the only treatment that keeps every logo legible
   on a near-black background without boxing it. Relies on the artwork being
   transparent; a logo with a solid plate would render as a white rectangle. */
.client-box.client-logo {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    padding: 0 3.375rem;
    filter: brightness(0) invert(1);
    opacity: 0.55;
    /* no bobbing — the row should read as a single steady line */
    animation: none;
    transition: opacity 0.3s ease;
}

.client-box.client-logo img {
    display: block;
    height: 60px;
    width: auto;
    max-width: 255px;
    object-fit: contain;
}

.client-box.client-logo:hover {
    filter: brightness(0) invert(1);
    opacity: 1;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

@media (max-width: 600px) {
    .client-box.client-logo {
        padding: 0 2.25rem;
    }

    .client-box.client-logo img {
        height: 45px;
        max-width: 195px;
    }
}

/* --- AUTOPLAY VSL SOUND PROMPT --- */
/* Shown only when the browser refuses the automatic unmute. See the
   AUTOPLAY VSL PLAYERS block in script.js. */
.yt-sound-btn {
    position: absolute; inset: 0; z-index: 2;
    display: none; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.45);
    border: none; cursor: pointer; padding: 1rem;
}
.video-shell.needs-sound .yt-sound-btn { display: flex; }
.yt-sound-pill {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 1.6rem; border-radius: 50rem;
    background: var(--gradient-primary); color: #fff;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(0.95rem, 2.2vw, 1.2rem);
    box-shadow: 0 10px 30px rgba(var(--primary-rgb),0.45);
}

/* --- SERVICES SHOWCASE --- */
#services-showcase .showcase-container { margin-top: 3rem; }
.reels-header h4 {
    margin-bottom: 2rem; color: var(--text-primary); text-align: center;
    font-size: 1.5rem; font-family: var(--font-display);
}
.reels-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.reels-container .reel-item {
    flex: 1;
    min-width: 300px;
    max-width: 350px;
    display: flex;
    justify-content: center;
}
.instagram-media {
    margin: 0 auto !important;
    border: none !important;
    box-shadow: var(--shadow-lg) !important;
    min-width: unset !important;
    width: 100% !important;
}

/* --- EXCLUSION SECTION --- */
#exclusion .comparison-card {
    background: rgba(239, 68, 68, 0.05); /* Red tint */
    border-color: rgba(239, 68, 68, 0.2);
}

#exclusion .comparison-list li i {
    color: #ef4444; /* icon-danger */
}

/* --- BIG QUOTE --- */
.big-quote {
    max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 1;
}
.big-quote-icon { font-size: 3rem; color: rgba(var(--primary-rgb),0.3); margin-bottom: 1rem; }
.big-quote blockquote {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.15;
}
.big-quote-sub { color: var(--text-secondary); max-width: 600px; margin: 1.5rem auto 0; font-size: 1.05rem; }

/* --- FAQ --- */
.faq-container { max-width: 750px; margin: 0 auto; }
.faq-item {
    background: var(--bg-surface); border: 1px solid rgba(var(--border-color-rgb),0.5);
    border-radius: var(--border-radius-lg); margin-bottom: 1rem; overflow: hidden;
}
.faq-question {
    width: 100%; background: none; border: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 1.5rem; font-weight: 600; font-size: 1rem;
    color: var(--text-primary); text-align: left;
    font-family: var(--font-primary);
    transition: background-color 0.3s ease;
}
.faq-question:hover { background: rgba(var(--primary-rgb),0.05); }
.faq-question i {
    transition: transform 0.3s ease; color: var(--text-muted); flex-shrink: 0; margin-left: 1rem;
}
.faq-question[aria-expanded="true"] i { transform: rotate(180deg); }
.faq-question[aria-expanded="true"] {
    background: linear-gradient(135deg, rgba(var(--primary-rgb),0.08), rgba(var(--accent-rgb),0.05));
}
.faq-answer {
    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 1.5rem;
}
.faq-answer.open { max-height: 300px; padding: 1.25rem 1.5rem 1.5rem; }
.faq-answer p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; }

/* --- QUALIFY SECTION --- */
.qualify-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
@media (max-width: 768px) { .qualify-section { grid-template-columns: 1fr; } }
.qualify-content h2 { margin: 0.75rem 0 1rem; }
.qualify-checklist { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.qualify-check {
    display: flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: 0.95rem;
}
.qualify-check i { color: var(--primary-color); font-size: 1.25rem; }

.qualify-form-wrapper {
    position: relative; z-index: 1;
}
.qualify-form {
    background: var(--bg-surface); border: 1px solid rgba(var(--border-color-rgb),0.5);
    border-radius: var(--border-radius-xl); padding: 2.5rem;
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.qualify-form h3 { margin-bottom: 1.5rem; text-align: center; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; }
.form-group input, .form-group select {
    width: 100%; padding: 0.75rem 1rem; border-radius: var(--border-radius);
    border: 1px solid var(--border-color); background: var(--bg-body);
    color: var(--text-primary); font-family: var(--font-primary); font-size: 0.95rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input:focus, .form-group select:focus {
    outline: none; border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.2);
}
.form-group input::placeholder { color: var(--text-muted); }
.form-disclaimer { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 1rem; }

/* --- FINAL CTA --- */
.final-cta { max-width: 700px; margin: 0 auto; }
.final-cta h2 { margin-bottom: 1rem; }
.final-cta .btn { margin-top: 1.5rem; }

/* --- FOOTER --- */
footer {
    position: relative; padding: 4rem 0 2rem; background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
}
footer::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 200px; height: 2px; background: var(--gradient-primary); border-radius: 2px;
}
.footer-content {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
}
@media (max-width: 768px) { .footer-content { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-content { grid-template-columns: 1fr; } }

.footer-brand p { color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.75rem; }
.footer-socials { display: flex; gap: 1rem; margin-top: 1rem; }
.footer-socials a {
    color: var(--text-muted); font-size: 1.25rem; transition: color 0.2s ease;
}
.footer-socials a:hover { color: var(--primary-color); }

.footer-links h5 { font-size: 0.9rem; margin-bottom: 1rem; }
.footer-links a { display: block; color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.5rem; text-decoration: none; }
.footer-links a:hover { color: var(--primary-color); }

.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-color);
    flex-wrap: wrap; gap: 1rem;
}
.footer-bottom p { color: var(--text-muted); font-size: 0.85rem; margin: 0; }
.footer-bottom a { color: var(--text-muted); font-size: 0.85rem; margin-left: 1.5rem; text-decoration: none; }
.footer-bottom a:hover { color: var(--primary-color); }

/* --- UTILITIES & COMPONENTS --- */
.icon-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.icon-list li {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.icon-list-icon {
    width: 44px;
    height: 44px;
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.icon-list h5 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
}

.icon-list p {
    font-size: 0.95rem;
    opacity: 0.8;
    margin: 0;
}

.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .hero { padding: 130px 0 80px; }
    .hero h1 { font-size: 2.2rem; }
    .section { padding: 70px 0; }
    .section-header { margin-bottom: 2.5rem; }
    .hero-stats { gap: 1.5rem; }
    .hero-stat-divider { display: none; }
    .phone-mockup { width: 160px; }
}
@media (max-width: 480px) {
    .hero h1 { font-size: 1.8rem; }
    .hero-lead { font-size: 1rem; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; }
    .qualify-form { padding: 1.5rem; }
}

/* ==========================================================
   HOMEPAGE V2
   Sections that sit on a fixed dark background (hero, logo band,
   "not for everyone", final CTA) keep light text in BOTH themes;
   letting that text follow the theme is what made copy disappear
   in light mode before. Everything else uses the theme tokens.
   ========================================================== */

/* --- 1. HERO --- */
.hv-hero {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center;
    padding: calc(130px + var(--banner-height)) 0 90px;
    background:
        radial-gradient(55% 50% at 85% 30%, rgba(249, 115, 22, 0.22), transparent 70%),
        radial-gradient(45% 40% at 5% 95%, rgba(251, 146, 60, 0.12), transparent 70%),
        #0c0a09;
}
/* Slot for the 6-8s loop (drone of a finished build, owner on site, leads
   stacking). See the commented <video> in index.html. */
.hv-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hv-hero-overlay {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(12, 10, 9, 0.9) 0%, rgba(12, 10, 9, 0.62) 60%, rgba(12, 10, 9, 0.45) 100%);
}
.hv-hero-inner { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 3.5rem; align-items: center; }
.hv-eyebrow-light {
    display: inline-block; margin-bottom: 1.25rem;
    font-size: 0.78rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: #fdba74; background: rgba(249, 115, 22, 0.14);
    border: 1px solid rgba(249, 115, 22, 0.35); padding: 0.45rem 0.95rem; border-radius: 50rem;
}
.hv-hero h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); color: #fafaf9; margin-bottom: 1.25rem; }
.hv-hero-sub { font-size: 1.15rem; line-height: 1.7; color: #d6d3d1; max-width: 580px; }
.hv-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: 2.25rem; }
.hv-text-link {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; font-weight: 700; color: #fdba74;
    display: inline-flex; align-items: center; gap: 0.5rem; transition: color 0.2s ease, gap 0.2s ease;
}
.hv-text-link:hover { color: #fafaf9; gap: 0.75rem; }
.hv-proof-strip {
    list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem;
    margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(250, 250, 249, 0.14);
    color: #d6d3d1; font-size: 0.92rem; font-weight: 600;
}
.hv-proof-strip li { display: flex; align-items: center; gap: 0.5rem; }
.hv-proof-strip i { color: #fb923c; }

/* Stand-in for the hero loop's last beat: leads stacking on the phone. */
.hv-lead-stack { display: flex; flex-direction: column; gap: 0.8rem; }
.hv-lead-stack-head { color: #a8a29e; font-size: 0.78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 0.5rem; }
.hv-lead-stack-head i { color: #fb923c; animation: hvRing 1.6s ease-in-out infinite; transform-origin: 50% 20%; }
.hv-lead {
    display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1rem; border-radius: 16px;
    background: rgba(28, 25, 23, 0.78); border: 1px solid rgba(250, 250, 249, 0.12);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
    opacity: 0; transform: translateY(16px) scale(0.98);
    animation: hvLeadIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hv-lead:nth-of-type(1) { animation-delay: 0.5s; }
.hv-lead:nth-of-type(2) { animation-delay: 1.4s; }
.hv-lead:nth-of-type(3) { animation-delay: 2.3s; }
.hv-lead-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--gradient-primary); color: #fff; }
.hv-lead-title { color: #fafaf9; font-weight: 800; font-size: 0.95rem; }
.hv-lead-meta { color: #a8a29e; font-size: 0.82rem; }
.hv-lead-time { margin-left: auto; align-self: flex-start; color: #a8a29e; font-size: 0.75rem; white-space: nowrap; }
@keyframes hvLeadIn { to { opacity: 1; transform: none; } }
@keyframes hvRing { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } }
@media (max-width: 992px) {
    .hv-hero-inner { grid-template-columns: 1fr; }
    .hv-lead-stack { max-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
    .hv-lead { animation: none; opacity: 1; transform: none; }
    .hv-lead-stack-head i { animation: none; }
}

/* --- 2. LOGO BAR --- */
/* A fixed dark band in both themes: the logo set mixes white and dark
   artwork, and the white silhouettes vanished on the light-mode page. */
.hv-logos { background: #0c0a09; padding: 2.5rem 0 0.5rem; border-block: 1px solid rgba(250, 250, 249, 0.07); }
.hv-logos-label { text-align: center; color: #a8a29e; font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.hv-logos .clients-marquee-container { padding: 1.75rem 0; }
.hv-logos .clients-marquee-track { animation-duration: 60s; }
/* Resting: monochrome white silhouettes, legible whatever the artwork.
   Hover: true colour. Division, HTLT and Best Metal are dark artwork, so they
   get a light plate behind them when they switch to colour. */
.hv-logos .client-box.client-logo { padding: 0.75rem 2rem; margin: 0 1.25rem; border-radius: 12px; transition: filter 0.3s ease, opacity 0.3s ease, background-color 0.3s ease; }
.hv-logos .client-box.client-logo:hover { filter: none; opacity: 1; }
.hv-logos .client-box.client-logo.needs-light-plate:hover { background-color: #fafaf9; }

/* --- 3. VSL --- */
.hv-vsl-frame {
    position: relative; max-width: 960px; margin: 2.5rem auto 0; aspect-ratio: 16 / 9;
    border-radius: var(--border-radius-xl); overflow: hidden; background: #000;
    border: 1px solid rgba(var(--border-color-rgb), 0.6); box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.hv-vsl-poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.hv-vsl-poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.hv-vsl-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 10, 9, 0.55), rgba(12, 10, 9, 0.1)); }
.hv-vsl-poster:hover img { transform: scale(1.03); }
.hv-play {
    position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%);
    width: 92px; height: 92px; border-radius: 50%; background: var(--gradient-primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.9rem; padding-left: 0.3rem;
    box-shadow: 0 0 0 10px rgba(249, 115, 22, 0.25), 0 16px 40px rgba(0, 0, 0, 0.45); transition: transform 0.3s ease;
}
.hv-vsl-poster:hover .hv-play { transform: translate(-50%, -50%) scale(1.08); }
.hv-vsl-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- 4. PROBLEM: two illustrated Instagram posts --- */
.hv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 880px; margin: 3rem auto 0; }
.hv-split-col { text-align: center; }
.hv-split-label { display: inline-block; margin-top: 1rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.hv-post { text-align: left; background: var(--bg-surface); border: 1px solid rgba(var(--border-color-rgb), 0.8); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); }
.hv-post-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.9rem; font-size: 0.88rem; font-weight: 700; color: var(--text-primary); }
.hv-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; background: var(--bg-alt); color: var(--text-muted); }
.hv-post-live .hv-avatar { background: var(--gradient-primary); color: #fff; }
.hv-verified { color: #3b82f6; font-size: 0.8rem; }
.hv-post-media { aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; font-size: 3rem; }
.hv-post-media span { font-size: 0.78rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.hv-post-dead .hv-post-media { background: linear-gradient(135deg, #57534e, #44403c); color: #e7e5e4; }
.hv-post-live .hv-post-media { background: linear-gradient(135deg, #c2410c, #f97316); color: #fff; }
.hv-post-body { padding: 0.85rem 0.9rem 1rem; font-size: 0.86rem; color: var(--text-secondary); }
.hv-post-stats { display: flex; gap: 1rem; margin-bottom: 0.35rem; font-weight: 800; color: var(--text-primary); }
.hv-post-cal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed rgba(var(--border-color-rgb), 1); font-size: 0.78rem; }
.hv-post-cal b { margin-right: 0.25rem; color: var(--text-primary); }
.hv-day { width: 32px; padding: 0.3rem 0; text-align: center; border-radius: 6px; font-weight: 700; background: var(--bg-alt); color: var(--text-muted); }
.hv-day.is-booked { background: var(--gradient-primary); color: #fff; }

/* --- 5. GUIDE --- */
.hv-guide { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; align-items: center; }
/* Stand-in pair until there is one photo of Roman and Logan on a jobsite. */
.hv-guide-photo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hv-guide-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--border-radius-xl); box-shadow: var(--shadow-lg); }
.hv-guide-photo img:nth-child(2) { margin-top: 2.5rem; }
.hv-guide h2 { margin-bottom: 1rem; }
.hv-guide-lead { color: var(--text-secondary); font-size: 1.08rem; line-height: 1.7; }
.hv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.hv-stat { padding: 1.25rem 0.75rem; text-align: center; border-radius: var(--border-radius-lg); background: var(--bg-surface); border: 1px solid rgba(var(--border-color-rgb), 0.6); }
.hv-stat-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.4rem); line-height: 1; }
.hv-stat-label { margin-top: 0.55rem; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.hv-guide-more { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.75rem; font-weight: 700; }

/* --- 6. WHAT YOU GET --- */
.hv-offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 3rem; }
.hv-offer {
    position: relative; padding: 2rem 1.5rem; border-radius: var(--border-radius-xl);
    background: var(--bg-surface); border: 1px solid rgba(var(--border-color-rgb), 0.6);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.hv-offer:hover { transform: translateY(-6px); border-color: var(--primary-color); box-shadow: var(--shadow-lg), var(--shadow-glow); }
.hv-offer-icon { width: 52px; height: 52px; margin-bottom: 1.25rem; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--gradient-primary); color: #fff; box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.3); }
.hv-offer h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.hv-offer p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; }

/* --- 7. THE PLAN --- */
.hv-plan { position: relative; margin-top: 4rem; }
.hv-plan-track { position: absolute; top: 34px; left: calc(100% / 6); right: calc(100% / 6); border-top: 3px dashed rgba(var(--primary-rgb), 0.45); }
/* Rides along the dashed line as the section scrolls into view. */
.hv-hardhat {
    position: absolute; top: 0; left: 0; transform: translate(-50%, -130%);
    width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; color: var(--primary-color); background: var(--bg-body);
    border: 2px solid var(--primary-color); box-shadow: var(--shadow-glow);
}
.hv-plan-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.hv-plan-step { text-align: center; padding: 0 0.5rem; }
.hv-plan-num {
    position: relative; z-index: 1; width: 68px; height: 68px; margin: 0 auto 1.25rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
    background: var(--gradient-primary); color: #fff; box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.35);
}
.hv-plan-step h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.hv-plan-step p { color: var(--text-secondary); }
.hv-plan-cta { text-align: center; margin-top: 3rem; }

/* --- 8. PROOF: real client reels in phone frames --- */
.hv-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; justify-items: center; margin-top: 3rem; }
.hv-phone {
    position: relative; width: 100%; max-width: 330px; aspect-ratio: 9 / 18.5;
    padding: 11px; border-radius: 42px; background: #0c0a09;
    border: 1px solid rgba(250, 250, 249, 0.14); box-shadow: var(--shadow-lg);
}
.hv-phone-screen { width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #000; }
.hv-phone-screen iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --- 9. STAKES: before / after slider --- */
/* Both layers share one layout (phone left, calendar right); only the state
   differs, so dragging the handle sweeps "keep waiting" into "start now". */
.hv-compare {
    --hv-split: 50%;
    position: relative; max-width: 940px; margin: 3rem auto 0; overflow: hidden; user-select: none;
    border-radius: var(--border-radius-xl); border: 1px solid rgba(var(--border-color-rgb), 0.8); box-shadow: var(--shadow-lg);
}
.hv-compare-pane { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 1.75rem; align-items: center; min-height: 360px; padding: 3.25rem 2.5rem 2.5rem; }
.hv-compare-before { background: var(--bg-alt); }
.hv-compare-after { position: absolute; inset: 0; background: var(--bg-surface); clip-path: inset(0 0 0 var(--hv-split)); }
.hv-compare-tag { position: absolute; top: 1rem; padding: 0.35rem 0.8rem; border-radius: 50rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.hv-compare-before .hv-compare-tag { left: 1rem; background: var(--bg-surface); color: var(--text-secondary); }
.hv-compare-after .hv-compare-tag { right: 1rem; background: var(--gradient-primary); color: #fff; }
.hv-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--hv-split); width: 3px; transform: translateX(-50%); background: var(--primary-color); pointer-events: none; }
.hv-compare-handle span {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--gradient-primary); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.hv-compare input[type="range"] { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.hv-compare input[type="range"]:focus-visible ~ .hv-compare-handle span { outline: 3px solid var(--primary-color); outline-offset: 3px; }
.hv-mini-phone { border-radius: 26px; padding: 1rem 0.9rem; min-height: 250px; background: #0c0a09; border: 1px solid rgba(250, 250, 249, 0.12); }
.hv-mini-phone-top { text-align: center; color: #a8a29e; font-size: 0.72rem; font-weight: 700; margin-bottom: 0.9rem; }
.hv-mini-empty { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding-top: 2.5rem; color: #a8a29e; font-size: 0.85rem; }
.hv-mini-empty i { font-size: 1.6rem; }
.hv-mini-note { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.5rem; padding: 0.6rem 0.65rem; border-radius: 12px; background: rgba(250, 250, 249, 0.07); color: #fafaf9; font-size: 0.78rem; font-weight: 700; }
.hv-mini-note i { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; background: var(--gradient-primary); color: #fff; }
.hv-mini-note small { display: block; color: #a8a29e; font-weight: 600; }
.hv-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
.hv-week-day { min-height: 190px; padding: 0.55rem 0.4rem; border-radius: 12px; background: var(--bg-body); border: 1px solid rgba(var(--border-color-rgb), 0.8); }
.hv-week-day b { display: block; margin-bottom: 0.5rem; text-align: center; font-size: 0.72rem; color: var(--text-muted); }
.hv-slot { margin-bottom: 0.4rem; padding: 0.4rem 0.35rem; border-radius: 7px; font-size: 0.66rem; font-weight: 700; line-height: 1.25; }
.hv-slot.walk { background: rgba(var(--primary-rgb), 0.14); color: var(--text-primary); border-left: 3px solid var(--primary-color); }
.hv-slot.signed { background: rgba(16, 185, 129, 0.16); color: var(--text-primary); border-left: 3px solid #10b981; }
.hv-slot.open { color: var(--text-muted); text-align: center; font-weight: 600; }
.hv-stakes-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 940px; margin: 2rem auto 0; }
.hv-stakes-copy div { padding: 1.5rem; border-radius: var(--border-radius-lg); background: var(--bg-surface); border: 1px solid rgba(var(--border-color-rgb), 0.6); }
.hv-stakes-copy h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.hv-stakes-copy p { color: var(--text-secondary); }
.hv-stakes-copy .is-good { border-color: rgba(var(--primary-rgb), 0.5); }

/* --- 10. WHO WE DON'T WORK WITH --- */
.hv-notfor { background: #0c0a09; }
.hv-notfor h2 { color: #fafaf9; }
.hv-x-list { list-style: none; display: grid; gap: 0.9rem; max-width: 620px; margin: 2.5rem auto 0; }
.hv-x-list li { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; border-radius: 14px; background: rgba(250, 250, 249, 0.04); border: 1px solid rgba(250, 250, 249, 0.09); color: #e7e5e4; font-size: 1.05rem; font-weight: 600; }
.hv-x-list i { width: 1.5rem; text-align: center; font-size: 1.2rem; color: #f87171; }

/* --- 12. FINAL CTA --- */
.hv-final {
    position: relative; isolation: isolate; overflow: hidden; padding: 7rem 0; text-align: center;
    background: radial-gradient(70% 90% at 50% 110%, rgba(249, 115, 22, 0.35), transparent 70%), linear-gradient(180deg, #1c1917, #0c0a09);
}
/* Slot for the golden-hour jobsite shot: set --hv-final-photo on .hv-final. */
.hv-final::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--hv-final-photo, none) center / cover no-repeat; opacity: 0.4; }
.hv-final h2 { color: #fafaf9; font-size: clamp(2.2rem, 5vw, 3.5rem); }
.hv-final p { max-width: 560px; margin: 1rem auto 2rem; color: #d6d3d1; font-size: 1.1rem; }
.hv-final small { display: block; margin-top: 1rem; color: #a8a29e; font-size: 0.9rem; }

/* --- responsive --- */
@media (max-width: 1100px) { .hv-offer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 992px) {
    .hv-guide { grid-template-columns: 1fr; }
    .hv-reels { grid-template-columns: 1fr; }
    .hv-compare-pane { grid-template-columns: 1fr; }
    .hv-mini-phone { display: none; }
}
@media (max-width: 768px) {
    .hv-split, .hv-stakes-copy { grid-template-columns: 1fr; }
    .hv-plan-track { display: none; }
    .hv-plan-steps { grid-template-columns: 1fr; gap: 2.5rem; }
    .hv-week-day { min-height: 150px; }
}
@media (max-width: 600px) {
    .hv-offer-grid, .hv-stats { grid-template-columns: 1fr; }
    .hv-compare-pane { padding: 3.25rem 1rem 1.5rem; }
    .hv-week { gap: 0.3rem; }
}

/* Light mode only: below 1200px the navbar is transparent until you scroll,
   and on the homepage it floats over the hero, which is dark in both themes.
   Its dark icons vanished there, so they go light while over the hero, and
   back to normal once scrolled or with the menu open (both light surfaces). */
@media (max-width: 1199px) {
    html:not([data-theme="dark"]) body:has(.hv-hero):not(:has(.mobile-menu.active)) .navbar:not(.scrolled) .mobile-menu-btn span { background: #fafaf9; }
    html:not([data-theme="dark"]) body:has(.hv-hero):not(:has(.mobile-menu.active)) .navbar:not(.scrolled) .theme-toggle-btn { color: #fafaf9; border-color: rgba(250, 250, 249, 0.35); }
}