/* Bold Black & White Homepage - High-End Design */
/* Inspired by dashboard.css aesthetic with modern styling */
/* Updated: 2025-10-14 - Major cleanup and optimization */
/* Changes:
   - Removed duplicate navigation styles (was defined twice)
   - Eliminated excessive !important declarations (50+ removed)
   - Added will-change hints for animation performance
   - Added proper mobile menu styling with animations
   - Fixed CSS specificity using body.homepage-black-white scope
   - Added webkit prefixes for better browser support
*/

/* ============================================
   RESET & BASE STYLES
============================================ */

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

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

body.homepage-black-white {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: #ffffff;
    color: #000000;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure no gaps at top of page */
body.homepage-black-white::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: transparent;
    z-index: 999;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================
   NAVIGATION
============================================ */

/* Scoped navigation styles for homepage - using body selector for higher specificity without !important */
body.homepage-black-white .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
    padding: 0;
}

body.homepage-black-white .main-nav.scrolled {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 10px 30px rgba(0, 0, 0, 0.06);
}

body.homepage-black-white .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88px;
    padding: 0 24px;
    max-width: none;
    width: 100%;
}

body.homepage-black-white .nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 20px;
    color: #000000;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

body.homepage-black-white .nav-brand:hover {
    opacity: 0.8;
}

body.homepage-black-white .brand-icon svg {
    width: 28px;
    height: 28px;
    stroke: #000000;
}

/* Brand wordmark logo (replaces the old icon + text). Unscoped so it
   applies on every public page that loads marketing.css, incl. faqs. */
.nav-brand .brand-logo {
    height: 56px;
    width: auto;
    display: block;
}

@media (max-width: 768px) {
    .nav-brand .brand-logo {
        height: 36px;
    }
}

/* Desktop: true-centre the middle menu regardless of how wide the logo
   or the action buttons are. Equal flex on the two side columns pushes
   the nav-menu to the exact horizontal centre of the bar. */
@media (min-width: 769px) {
    body.homepage-black-white .nav-container {
        padding: 0 40px;
    }
    body.homepage-black-white .nav-brand {
        flex: 1 1 0;
        min-width: 0;
    }
    body.homepage-black-white .nav-menu {
        flex: 0 0 auto;
    }
    body.homepage-black-white .nav-actions {
        flex: 1 1 0;
        justify-content: flex-end;
    }
}

/* ============================================
   NAV DROPDOWN (Company, etc.)
   Unscoped so it works on every public page that
   loads marketing.css. Desktop: opens on hover;
   touch/keyboard: opens on click (see inline JS).
   ============================================ */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.nav-dropdown-caret {
    margin-top: 1px;
    transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown.open .nav-dropdown-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    min-width: 210px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
}

/* Invisible bridge so the menu doesn't close in the hover gap. */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

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

.nav-dropdown-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-dropdown-menu a {
    display: block;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #4a4a4a;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-menu a:hover {
    background: #f5f5f5;
    color: #000000;
}

/* Mobile: render the dropdown inline inside the stacked menu. */
@media (max-width: 768px) {
    .nav-dropdown,
    .nav-dropdown-toggle {
        width: 100%;
    }

    .nav-dropdown-toggle {
        justify-content: space-between;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        display: none;
        min-width: 0;
        margin-top: 10px;
        padding: 4px 0 0 14px;
        border: none;
        border-left: 2px solid rgba(0, 0, 0, 0.1);
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

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

    .nav-dropdown.open .nav-dropdown-menu {
        display: block;
    }

    /* `.nav-dropdown.open .nav-dropdown-menu` above (0,3,0) sets
       translateX(-50%) for the desktop popover, and outranks the
       `.nav-dropdown-menu` reset in this block (0,1,0) - a media query adds no
       specificity. Matching that selector here, later in the file, is what
       actually lands. Without it the submenu renders half a panel-width off the
       left edge of the phone screen, showing an empty white box. */
    .nav-dropdown.open .nav-dropdown-menu {
        transform: none;
    }
}

body.homepage-black-white .nav-menu {
    display: flex;
    list-style: none;
    gap: 32px;
    margin: 0;
    padding: 0;
    align-items: center;
}

body.homepage-black-white .nav-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.homepage-black-white .nav-link {
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: #4a4a4a;
    text-decoration: none;
    transition: color 0.2s ease;
    position: relative;
    padding: 8px 2px;
}

body.homepage-black-white .nav-link:hover {
    color: #000000;
}

body.homepage-black-white .nav-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: #000000;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.homepage-black-white .nav-link:hover::after,
body.homepage-black-white .nav-link.active::after {
    transform: scaleX(1);
}

body.homepage-black-white .nav-link.active {
    color: #000000;
    font-weight: 600;
}

body.homepage-black-white .nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.homepage-black-white .btn-login {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 11px 22px;
    border: 1.5px solid #dcdcdc;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: #1a1a1a;
    background: transparent;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

body.homepage-black-white .btn-login:hover {
    border-color: #111111;
    background: #f6f6f6;
    color: #000000;
}

body.homepage-black-white .btn-primary {
    background: #000000;
    color: #ffffff;
    padding: 13px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-block;
}

body.homepage-black-white .btn-primary:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

body.homepage-black-white .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

/* ── Nav CTA - clean solid button, matched in height/shape to the
   Login outline button so the two read as an intentional pair. ── */
body.homepage-black-white .nav-actions .btn-primary {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding: 11px 26px;
    border: 1.5px solid #000000;
    border-radius: 10px;
    background: #000000;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

body.homepage-black-white .nav-actions .btn-primary:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
}

body.homepage-black-white .nav-actions .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* The hamburger: a 48px rounded tile (the 44px touch minimum with room to
   spare), three 22px bars 8px apart so the two outer ones meet as an X when
   each turns 45deg and moves 4px in. */
body.homepage-black-white .mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

body.homepage-black-white .mobile-menu-toggle:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.16);
}

/* The phone menu panel (components/public_nav.html) exists only under 768px;
   its styles live in the mobile block near the end of this file. */
.mobile-nav-overlay {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-nav-overlay,
    .mobile-nav-list > li,
    body.homepage-black-white .mobile-menu-toggle span {
        transition: none;
    }
}

body.homepage-black-white .mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 3px 0;
    background: #000000;
    border-radius: 2px;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

/* ============================================
   FOCUS-VISIBLE (keyboard navigation)
   Strict B&W: a black ring on light surfaces, a
   white ring on dark ones. The nav selectors are
   left UNSCOPED so every public page's nav is
   covered - including faqs (own body class) and
   the guides/faqs nav re-implementations.
============================================ */
.nav-link:focus-visible,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown-menu a:focus-visible,
.nav-brand:focus-visible,
.btn-login:focus-visible,
.btn-primary:focus-visible,
.btn-hero-primary:focus-visible,
.btn-hero-secondary:focus-visible,
body.homepage-black-white a:focus-visible,
body.homepage-black-white button:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
    border-radius: 6px;
}

/* Dark (black) surfaces need a light ring to stay visible. */
.cta-btn-primary-bw:focus-visible,
.cta-btn-secondary-bw:focus-visible {
    outline-color: #fff;
}

/* ============================================
   HERO SECTION - CENTERED MACBOOK STYLE
============================================ */

.hero-centered {
    /* Height is driven by content (no forced 100vh) so the next section
       is reachable without scrolling a full viewport. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    background: #fff;
    padding: 130px 24px 96px;
}

/* Background - subtle dot grid that fades out toward the edges. */
.hero-bg-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.05) 1px, transparent 1.5px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(ellipse 75% 58% at 50% 34%, #000 34%, transparent 78%);
    mask-image: radial-gradient(ellipse 75% 58% at 50% 34%, #000 34%, transparent 78%);
}

/* Legacy background elements - no longer rendered. */
.grid-overlay,
.gradient-orb {
    display: none;
}

/* Container */
.hero-centered-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1160px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 56px;
    text-align: left;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* Status dot (used by faqs / help-centre badges) - mono, black on light. */
.badge-dot {
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Main Headline */
.hero-main-headline {
    font-size: clamp(2.6rem, 4.3vw, 4rem);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.045em;
    color: #0a0a0a;
    margin-bottom: 26px;
    text-align: left;
    animation: fadeSlideUp 0.8s ease forwards;
    animation-delay: 0.1s;
    opacity: 0;
}

/* The hook - black text with a thick underline accent (no block). */
.headline-accent {
    position: relative;
    display: inline-block;
    color: #0a0a0a;
    white-space: nowrap;
}

.headline-accent::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.02em;
    height: 0.11em;
    background: #000;
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: left center;
    animation: accentUnderline 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.55s;
}

@keyframes accentUnderline {
    to {
        transform: scaleX(1);
    }
}

/* Right column: stacked feature cards */
.hero-feature-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: fadeSlideUp 0.8s ease forwards;
    animation-delay: 0.25s;
    opacity: 0;
}

.feature-card {
    padding: 22px 26px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, 0.22);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.feature-card-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #0a0a0a;
}

.feature-card-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #6a6a6a;
}

/* Split → single centred column on narrower screens */
@media (max-width: 900px) {
    .hero-centered-container {
        grid-template-columns: 1fr;
        gap: 44px;
        max-width: 600px;
    }

    .hero-copy {
        align-items: center;
        text-align: center;
    }

    .hero-main-headline,
    .hero-subheadline {
        text-align: center;
    }

    .hero-subheadline {
        max-width: 100%;
    }
}

/* Subheadline */
.hero-subheadline {
    font-size: clamp(1.02rem, 1.15vw, 1.15rem);
    color: #555;
    line-height: 1.6;
    max-width: 480px;
    margin-bottom: 30px;
    text-align: left;
    animation: fadeSlideUp 0.8s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

/* CTA Buttons */
.hero-cta-centered {
    display: flex;
    gap: 14px;
    margin-bottom: 40px;
    animation: fadeSlideUp 0.8s ease forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border: 1.5px solid #000;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-hero-primary:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

.btn-hero-primary:active {
    transform: translateY(0);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border: 1.5px solid #e2e2e2;
    border-radius: 12px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.btn-hero-secondary:hover {
    border-color: #111;
    background: #f6f6f6;
    transform: translateY(-2px);
}

/* Trust Section */
.hero-trust-centered {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 0;
    animation: fadeSlideUp 0.8s ease forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

.hero-trust-centered .trust-avatars {
    display: flex;
}

.hero-trust-centered .trust-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.72rem;
    margin-left: -10px;
    border: 2px solid #fff;
}

.hero-trust-centered .trust-avatar:first-child {
    margin-left: 0;
}

.hero-trust-centered .trust-avatar-more {
    background: #f0f0f0;
    color: #666;
}

.trust-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.trust-stars {
    color: #000;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.hero-trust-centered .trust-text {
    font-size: 0.82rem;
    color: #666;
}

@media (max-width: 768px) {
    .hero-cta-centered {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
    }
}

/* NOTE: .macbook-notch / .macbook-screen / .macbook-base were previously
   defined here too, but the only page that renders a MacBook mockup
   (index.html) also loads how-it-works.css, which defines all three with
   different values and wins by load order. The duplicate/conflicting copies
   were removed - how-it-works.css is the single source of truth for them. */

.action-btn {
    width: 80px;
    height: 32px;
    background: #222;
    border-radius: 6px;
}

.action-btn.primary {
    background: #fff;
}

.card-title {
    width: 70%;
    height: 14px;
    background: #fff;
    border-radius: 3px;
    margin-bottom: 8px;
}

.card-meta {
    width: 50%;
    height: 10px;
    background: #444;
    border-radius: 3px;
}

@keyframes scrollBounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateX(-50%) translateY(10px);
        opacity: 0.3;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .hero-centered {
        padding: 100px 20px 40px;
    }

    .hero-cta-centered {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
        justify-content: center;
    }

    .hero-trust-centered {
        flex-direction: column;
        text-align: center;
    }

    .trust-info {
        align-items: center;
    }
}

/* Eyebrow Badge */

.eyebrow-dot {
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}


/* Bold Headline */

.headline-line {
    display: block;
    overflow: hidden;
}

.word-reveal {
    display: inline-block;
    animation: wordReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(100%);
}

.headline-line:nth-child(1) .word-reveal {
    animation-delay: 0.2s;
}

.headline-line:nth-child(2) .word-reveal {
    animation-delay: 0.35s;
}

.headline-line:nth-child(3) .word-reveal {
    animation-delay: 0.5s;
}

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

/* (removed a stray .headline-accent override that forced white text) */

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Trust Signals */
.trust-avatars {
    display: flex;
}

.trust-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #000;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-left: -10px;
}

.trust-avatar:first-child {
    margin-left: 0;
}

.trust-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


/* Right Visual Side - Stats Showcase */


/* Main Stat */

.stat-value {
    font-size: clamp(80px, 12vw, 120px);
    font-weight: 900;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.05em;
    line-height: 1;
    display: block;
}


/* Stats Grid */


.stat-number {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.02em;
    display: block;
}


/* Feature Pills */

.pill {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    transition: all 0.3s ease;
}

.pill:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Scroll Cue */


@keyframes scrollPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scaleY(1);
    }

    50% {
        opacity: 1;
        transform: scaleY(1.2);
    }
}


/* Responsive Design for Bold B&W Hero */
@media (max-width: 640px) {
    .stat-value {
        font-size: 72px;
    }
}

/* Hero Container */
.hero-container {
    position: relative;
    z-index: 10;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/* Floating Badge/Chip */


@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}


/* Main Headline */
.hero-headline {
    font-size: clamp(48px, 10vw, 96px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #000;
    margin: 0;
}


.headline-row .word {
    display: inline-block;
    animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(100%);
}

.headline-row:nth-child(1) .word:nth-child(1) {
    animation-delay: 0.3s;
}

.headline-row:nth-child(1) .word:nth-child(2) {
    animation-delay: 0.4s;
}

.headline-row:nth-child(2) .word {
    animation-delay: 0.5s;
}

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

.headline-row .word.accent {
    position: relative;
    display: inline-block;
    background: #000;
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards,
        shimmer 3s ease-in-out infinite;
    animation-delay: 0.5s, 1.5s;
}

@keyframes shimmer {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* @keyframes fadeIn - already defined above */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

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

@media (max-width: 768px) {
    .hero-container {
        gap: 24px;
    }
}

/* ============================================
   ANIMATIONS
============================================ */


/* Footer styling moved to footer.css (single source of truth).
   Do not re-add .footer-* rules here - they conflict with the
   global footer component. */


.footer-badges .badge {
    font-size: 12px;
    color: #666666;
}

/* ============================================
   ANIMATIONS
============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cursorBlink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

@keyframes slideInCard {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes progressFill {
    0% {
        width: 0%;
    }

    50% {
        width: 75%;
    }

    100% {
        width: 100%;
    }
}

@keyframes dots {
    0% {
        content: '';
    }

    33% {
        content: '.';
    }

    66% {
        content: '..';
    }

    100% {
        content: '...';
    }
}

/* ============================================
   CTA SECTION - BOLD BLACK & WHITE
============================================ */

.cta-section-bw {
    position: relative;
    padding: 120px 0;
    background: #ffffff;
    overflow: hidden;
}

/* Background Elements */
.cta-bg-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.cta-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: none;
}

.cta-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
}

.cta-glow-1 {
    width: 400px;
    height: 400px;
    background: rgba(0, 0, 0, 0.05);
    top: -100px;
    left: -100px;
}

.cta-glow-2 {
    width: 300px;
    height: 300px;
    background: rgba(0, 0, 0, 0.03);
    bottom: -50px;
    right: -50px;
}

/* Main CTA Card */
.cta-card-bw {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 64px 72px;
    background: #000000;
    border-radius: 32px;
    overflow: hidden;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.3),
        0 20px 50px rgba(0, 0, 0, 0.2);
}

/* Centered variant */
.cta-card-bw.cta-centered {
    justify-content: center;
    text-align: center;
    padding: 64px 120px;
}

.cta-card-bw.cta-centered .cta-main {
    max-width: 700px;
    margin: 0 auto;
}

.cta-card-bw.cta-centered .cta-eyebrow {
    justify-content: center;
}

.cta-card-bw.cta-centered .cta-subtext {
    margin-left: auto;
    margin-right: auto;
}

.cta-card-bw.cta-centered .cta-actions-bw {
    justify-content: center;
}

.cta-card-bw.cta-centered .cta-trust-signals {
    justify-content: center;
}

/* Card subtle gradient overlay */
.cta-card-bw::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}

/* Animated border glow */
.cta-card-bw::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 32px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Left Content */
.cta-main {
    flex: 1;
    position: relative;
    z-index: 1;
}

.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.cta-eyebrow .eyebrow-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.cta-eyebrow span:last-child {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'JetBrains Mono', monospace;
}

.cta-headline-bw {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -2px;
    color: #ffffff;
    margin-bottom: 20px;
}

.cta-subtext {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 32px;
    max-width: 480px;
}

/* CTA Buttons */
.cta-actions-bw {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.cta-btn-primary-bw {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 32px;
    background: #ffffff;
    color: #000000;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-btn-primary-bw:hover {
    background: #f5f5f5;
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(255, 255, 255, 0.15);
}

.cta-btn-primary-bw svg {
    transition: transform 0.3s ease;
}

.cta-btn-primary-bw:hover svg {
    transform: translateX(4px);
}

.cta-btn-secondary-bw {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 32px;
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-btn-secondary-bw:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Trust Signals */
.cta-trust-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.trust-item svg {
    color: #fff;
    flex-shrink: 0;
}

/* CTA Section Responsive */
@media (max-width: 1024px) {
    .cta-card-bw {
        flex-direction: column;
        padding: 48px 40px;
        text-align: center;
    }

    .cta-main {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cta-subtext {
        max-width: 100%;
    }

    .cta-actions-bw {
        justify-content: center;
    }

    .cta-trust-signals {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .cta-section-bw {
        padding: 80px 0;
    }

    .cta-card-bw {
        padding: 40px 24px;
        border-radius: 24px;
    }

    .cta-headline-bw {
        font-size: 28px;
        letter-spacing: -1px;
    }

    .cta-headline-bw br {
        display: none;
    }

    .cta-subtext {
        font-size: 15px;
    }

    .cta-actions-bw {
        flex-direction: column;
        width: 100%;
    }

    .cta-btn-primary-bw,
    .cta-btn-secondary-bw {
        width: 100%;
        justify-content: center;
    }

    .cta-trust-signals {
        flex-direction: column;
        gap: 12px;
    }
}

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

@media (max-width: 768px) {

    /* The desktop menu and buttons are not shown on a phone at all: the
       panel below (.mobile-nav-overlay) carries the same links. */
    body.homepage-black-white .nav-menu,
    body.homepage-black-white .nav-actions {
        display: none;
    }

    body.homepage-black-white .mobile-menu-toggle {
        display: flex;
    }

    body.homepage-black-white .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px);
    }

    body.homepage-black-white .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    body.homepage-black-white .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px);
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }

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

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    body.homepage-black-white .nav-container {
        padding: 0 16px;
    }
}

/* ============================================
   HOMEPAGE RESPONSIVE TUNING (MOBILE + LAPTOP)
============================================ */

/* Laptop optimization */
@media (max-width: 1280px) and (min-width: 769px) {
    body.homepage-black-white .nav-menu {
        gap: 20px;
    }

    body.homepage-black-white .nav-actions {
        gap: 10px;
    }

    body.homepage-black-white .btn-primary {
        padding: 10px 18px;
        font-size: 14px;
    }

    .hero-centered {
        padding: 108px 24px 52px;
    }

    .hero-subheadline {
        max-width: 700px;
    }
}

/* Tablet + mobile nav and hero flow */
@media (max-width: 768px) {
    body.homepage-black-white .nav-container {
        height: 72px;
        align-items: center;
    }

    /* ---- The phone menu panel ----
       Black, from the foot of the bar to the bottom of the screen, slides in
       from the right; the links follow it in one after another. It starts
       BELOW the bar rather than behind it, so the bar is left exactly as it
       is: switching the bar to solid white while the panel moved flashed
       grey at the top on every open and close. Scrolls on its own, because
       the toggle handler locks the page behind it. pointer-events:none while
       closed, so the off-screen panel never swallows a tap. */
    .mobile-nav-overlay {
        display: block;
        position: fixed;
        top: 72px;              /* the bar's height on a phone */
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;           /* under the bar (1000): they never overlap */
        background: #000000;
        color: #ffffff;
        padding: 20px 24px 24px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* translate3d keeps the panel on its own compositor layer from the
           start: with a plain translateX, iOS Safari painted it in place
           for a frame before moving it off-screen - a black blink. */
        transform: translate3d(100%, 0, 0);
        will-change: transform;
        pointer-events: none;
        /* Hidden once it has slid out, not before: visibility flips after
           the slide on close, at once on open. */
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
    }

    .mobile-nav-overlay.active {
        transform: translate3d(0, 0, 0);
        pointer-events: auto;
        visibility: visible;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
    }

    .mobile-nav-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mobile-nav-list > li {
        opacity: 0;
        transform: translateX(20px);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .mobile-nav-overlay.active .mobile-nav-list > li {
        opacity: 1;
        transform: translateX(0);
    }

    .mobile-nav-overlay.active .mobile-nav-list > li:nth-child(1) { transition-delay: 0.08s; }
    .mobile-nav-overlay.active .mobile-nav-list > li:nth-child(2) { transition-delay: 0.14s; }
    .mobile-nav-overlay.active .mobile-nav-list > li:nth-child(3) { transition-delay: 0.20s; }
    .mobile-nav-overlay.active .mobile-nav-list > li:nth-child(4) { transition-delay: 0.26s; }
    .mobile-nav-overlay.active .mobile-nav-list > li:nth-child(5) { transition-delay: 0.32s; }

    .mobile-nav-list > li > a,
    .mobile-nav-label {
        display: block;
        padding: 16px 20px;
        border-radius: 10px;
        font-size: 1.2rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .mobile-nav-label {
        padding-bottom: 8px;
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
    }

    .mobile-nav-list > li > a:hover,
    .mobile-nav-list > li > a.active {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.1);
    }

    .mobile-nav-sub {
        list-style: none;
        margin: 0;
        padding: 0 0 8px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-nav-sub a {
        display: block;
        padding: 12px 20px;
        border-radius: 10px;
        font-size: 1.05rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .mobile-nav-sub a:hover,
    .mobile-nav-sub a.active {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
    }

    .mobile-nav-cta {
        margin-top: 16px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* The buttons sit in their own box so the link rule above
       (.mobile-nav-list > li > a) never reaches them: it painted
       "Get started free" white on white. */
    .mobile-nav-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Login (outline) and Get started (solid white) read as the inverse of
       the desktop pair, since the panel is black. */
    .mobile-nav-login,
    .mobile-nav-primary {
        display: block;
        box-sizing: border-box;
        width: 100%;
        padding: 16px 24px;
        border-radius: 10px;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        text-align: center;
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .mobile-nav-login {
        border: 1.5px solid rgba(255, 255, 255, 0.3);
        color: #ffffff;
        background: transparent;
    }

    .mobile-nav-login:hover {
        border-color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
    }

    .mobile-nav-primary {
        border: 1.5px solid #ffffff;
        color: #000000;
        background: #ffffff;
    }

    .mobile-nav-primary:hover {
        background: #ededed;
        border-color: #ededed;
    }

    /* The focus ring is black elsewhere on the page; on the black panel
       it needs to be white to be seen. */
    .mobile-nav-overlay a:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 3px;
    }

    .hero-main-headline {
        font-size: clamp(2.3rem, 11vw, 3.4rem);
        line-height: 1.1;
    }

    .hero-subheadline br {
        display: none;
    }
}

/* Small phone refinement */
@media (max-width: 480px) {
    .hero-subheadline {
        font-size: 0.98rem;
        margin-bottom: 28px;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        padding: 14px 18px;
        font-size: 0.95rem;
    }

    .hero-trust-centered {
        margin-bottom: 30px;
    }
}