/* 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);
}

body.homepage-black-white .mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

body.homepage-black-white .mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: #000000;
    transition: all 0.3s 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) {

    body.homepage-black-white .nav-menu,
    body.homepage-black-white .nav-actions {
        display: none;
    }

    body.homepage-black-white .nav-menu.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 24px;
        gap: 16px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    body.homepage-black-white .nav-actions.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 200px);
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 24px;
        gap: 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    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(5px, 5px);
    }

    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(7px, -6px);
    }

    .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 .main-nav {
        overflow: visible;
    }

    body.homepage-black-white .nav-container {
        position: relative;
        flex-wrap: wrap;
        height: 72px;
        align-items: center;
    }

    body.homepage-black-white .main-nav.mobile-open .nav-container {
        height: auto;
        padding-bottom: 16px;
    }

    body.homepage-black-white .nav-menu.active,
    body.homepage-black-white .nav-actions.active {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        width: 100%;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border: 0;
    }

    body.homepage-black-white .nav-menu.active {
        padding: 16px 0 10px;
        gap: 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        margin-top: 10px;
    }

    body.homepage-black-white .nav-actions.active {
        padding: 12px 0 0;
        gap: 10px;
    }

    body.homepage-black-white .nav-actions.active .btn-primary,
    body.homepage-black-white .nav-actions.active .btn-login {
        width: 100%;
        text-align: center;
        /* Both buttons are inline-flex, and text-align does not position a flex
           item - the label sat hard left in the full-width bar. */
        justify-content: center;
    }

    /* Line 1 is sized by its tallest item, so when the panel opens the row
       collapses from the bar's 72px to the 44px toggle and the logo snaps up
       against the very top edge of the screen. Hold the closed height. */
    body.homepage-black-white .main-nav.mobile-open .nav-brand,
    body.homepage-black-white .main-nav.mobile-open .mobile-menu-toggle {
        min-height: 72px;
    }

    /* The open panel lives INSIDE the fixed bar, and .nav-container wraps. Flex
       lines are filled in DOM order - brand, menu, actions, toggle - so once the
       menu and the actions take a full-width line each, the hamburger is pushed
       onto a fourth line: the close button lands at the BOTTOM of the open
       panel, under "Join waitlist", instead of staying beside the logo. Ordering
       the four children explicitly keeps the logo and the toggle together on the
       first line and drops the panel underneath them. */
    body.homepage-black-white .nav-brand { order: 1; }
    body.homepage-black-white .mobile-menu-toggle {
        order: 2;
        /* The icon is 40x30 (24px bars + 8px padding), under the 44px
           minimum touch target. Grow the hit box, not the icon. */
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    body.homepage-black-white .nav-menu { order: 3; }
    body.homepage-black-white .nav-actions { order: 4; }

    /* The bar is position:fixed and the toggle handler sets body{overflow:hidden},
       so a panel taller than the viewport - Resources expanded, or any phone in
       landscape under 768px - has nothing left to scroll and the CTA and close
       button become unreachable. Let the bar itself scroll. */
    body.homepage-black-white .main-nav.mobile-open {
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* .nav-menu keeps align-items:center from its desktop rule, so the links
       centre themselves while the full-width Resources row and the CTA stay left
       and full-bleed - three different alignments in one panel. Stretch every row
       to one left edge and give the links a real tap target. */
    body.homepage-black-white .nav-menu.active {
        align-items: stretch;
    }
    body.homepage-black-white .nav-menu.active > li > .nav-link {
        display: block;
        padding: 12px 0;
        font-size: 17px;
    }
    /* Matches the `> li >` child selector above rather than the flatter
       descendant form: `> li > .nav-link` counts an extra element (0,4,2)
       and would otherwise force this button to display:block, where a
       <button>'s UA text-align:center pushes "Resources" to the middle of
       the row while every other link sits left. */
    body.homepage-black-white .nav-menu.active > li > .nav-dropdown-toggle {
        display: flex;
        padding: 12px 0;
        font-size: 17px;
        text-align: left;
    }
    /* The desktop hover underline spans the whole row once the link is a block,
       drawing a rule across the panel. .active already reads as bold black. */
    body.homepage-black-white .nav-menu.active .nav-link::after {
        content: none;
    }

    .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;
    }
}