/* ============================================
   MAPPIN LANDING — COMPONENT STYLES
   Sections will add their own styles here
   ============================================ */

/* Section styles will be added as we build each section */

/* ============================================
   NAVBAR STYLES
   ============================================ */

.nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 1.25rem 0;
    /* Use transform for shrink effect — GPU-only, no layout */
    transform: translateZ(0);
    will-change: transform;
    pointer-events: none;
}

/* Shrink effect via transform scale instead of padding change */
.nav-wrapper.scrolled {
    padding: 0.75rem 0;
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    pointer-events: auto;
    /* Smooth shrink via transform (compositor-only) */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0) scale(1);
    transform-origin: top center;
    will-change: transform;
}

.nav-wrapper.scrolled .nav-container {
    transform: translateY(-6px) scale(0.98);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.75rem 0.75rem 1.5rem;
    border-radius: 9999px;
    position: relative;
    background: rgba(10, 10, 26, 0.6);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(148, 163, 184, 0.08);
    /* Only transition cheap properties — no layout, no filter */
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
    will-change: background-color, box-shadow;
    /* GPU promotion */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.nav-wrapper.scrolled .nav-inner {
    background: rgba(10, 10, 26, 0.85);
    border-color: rgba(148, 163, 184, 0.15);
    box-shadow: 
        0 10px 40px -10px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(124, 92, 255, 0.05);
}

/* Pause backdrop filter recalc during rapid scroll (perf) */
body.is-scrolling .nav-inner {
    /* Keep filter but browsers optimize compositor layers better this way */
    will-change: auto;
}

/* ---------- LOGO ---------- */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.nav-logo:hover {
    transform: scale(1.03);
}

.nav-logo-icon {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-logo:hover .nav-logo-icon {
    transform: rotate(-10deg) scale(1.1);
}

.nav-logo-glow {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.5), transparent 70%);
    opacity: 0.5;
    z-index: -1;
    filter: blur(8px);
    animation: pulse-glow 3s ease-in-out infinite;
}

.nav-logo:hover .nav-logo-glow {
    opacity: 1;
}

.nav-logo-text {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}

/* ---------- DESKTOP NAV LINKS ---------- */
.nav-links {
    display: none;
    position: relative;
    align-items: center;
    gap: 0.25rem;
    /* ADD THESE: give the indicator room to breathe at edges */
    padding: 0 0.5rem;
    background: rgba(148, 163, 184, 0.03);
    border-radius: 9999px;
}

@media (min-width: 1024px) {
    .nav-links {
        display: flex;
    }
}

.nav-link {
    position: relative;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
    z-index: 1;
    border-radius: 9999px;
}

.nav-link:hover {
    color: #ffffff;
}

.nav-link.active {
    color: #ffffff;
    font-weight: 600;
}

/* Animated indicator that slides */
.nav-link-indicator {
    position: absolute;
    height: calc(100% - 8px);           /* was 100% — shrink slightly so it doesn't touch edges */
    top: 4px;                            /* was 0 — center it vertically */
    left: 0;
    width: 0;
    opacity: 0;
    background: rgba(124, 92, 255, 0.15);
    border: 1px solid rgba(124, 92, 255, 0.25);
    border-radius: 9999px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
    z-index: 0;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(124, 92, 255, 0.15);
    will-change: transform, width;
}

/* ---------- RIGHT ACTIONS ---------- */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Status pill */
.nav-status {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    color: #6ee7b7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (min-width: 1280px) {
    .nav-status {
        display: flex;
    }
}

.nav-status-text {
    white-space: nowrap;
}

/* Sign In link */
.nav-signin {
    display: none;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #cbd5e1;
    text-decoration: none;
    border-radius: 9999px;
    transition: all 0.2s ease;
}

@media (min-width: 640px) {
    .nav-signin {
        display: block;
    }
}

.nav-signin:hover {
    color: #ffffff;
    background: rgba(148, 163, 184, 0.08);
}

/* CTA Button */
.nav-cta {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #7c5cff 0%, #6d3fff 100%);
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px -4px rgba(124, 92, 255, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    position: relative;
    overflow: hidden;
}

@media (min-width: 640px) {
    .nav-cta {
        display: inline-flex;
    }
}

.nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 30px -4px rgba(124, 92, 255, 0.7),
                0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.nav-cta-arrow {
    transition: transform 0.3s ease;
}

.nav-cta:hover .nav-cta-arrow {
    transform: translateX(3px);
}

/* Glow pulse behind CTA */
.nav-cta::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, #7c5cff, #a855f7, #06b6d4);
    z-index: -1;
    opacity: 0;
    filter: blur(12px);
    transition: opacity 0.3s ease;
}

.nav-cta:hover::before {
    opacity: 0.6;
}

/* ---------- MOBILE MENU BUTTON ---------- */
.nav-mobile-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (min-width: 1024px) {
    .nav-mobile-btn {
        display: none;
    }
}

.nav-mobile-btn:hover {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(124, 92, 255, 0.3);
}

.nav-mobile-line {
    display: block;
    width: 18px;
    height: 2px;
    background: #cbd5e1;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.nav-mobile-btn.active .nav-mobile-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background: #7c5cff;
}

.nav-mobile-btn.active .nav-mobile-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-mobile-btn.active .nav-mobile-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background: #7c5cff;
}

/* ---------- MOBILE MENU DRAWER ---------- */
.nav-mobile-menu {
    position: fixed;
    top: 90px;
    left: 1.5rem;
    right: 1.5rem;
    z-index: 49;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.nav-mobile-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-mobile-inner {
    padding: 1.5rem;
    border-radius: 1.5rem;
    background: rgba(10, 10, 26, 0.95);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.5);
}

.nav-mobile-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #cbd5e1;
    text-decoration: none;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateX(-20px);
}

.nav-mobile-menu.active .nav-mobile-link {
    animation: mobile-link-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes mobile-link-in {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.nav-mobile-link:hover {
    background: rgba(124, 92, 255, 0.1);
    color: white;
    padding-left: 1.25rem;
}

.nav-mobile-link i {
    color: #7c5cff;
}

.nav-mobile-divider {
    height: 1px;
    background: rgba(148, 163, 184, 0.1);
    margin: 0.75rem 0;
}

.nav-mobile-signin {
    display: block;
    padding: 0.85rem 1rem;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #cbd5e1;
    text-decoration: none;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(10px);
}

.nav-mobile-menu.active .nav-mobile-signin {
    animation: mobile-btn-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

.nav-mobile-signin:hover {
    background: rgba(148, 163, 184, 0.08);
    color: white;
}

.nav-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #7c5cff, #6d3fff);
    text-decoration: none;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px -8px rgba(124, 92, 255, 0.5);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
}

.nav-mobile-menu.active .nav-mobile-cta {
    animation: mobile-btn-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes mobile-btn-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-mobile-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(124, 92, 255, 0.7);
}

.nav-mobile-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    color: #6ee7b7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
}

.nav-mobile-menu.active .nav-mobile-footer {
    animation: fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

/* ---------- SPACER ---------- */
.nav-spacer {
    height: 100px;
}

@media (max-width: 640px) {
    .nav-spacer {
        height: 90px;
    }
}

/* ============================================
   HERO SECTION STYLES
   ============================================ */

.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 2rem 0 6rem;
    z-index: 10;
}

/* ---------- BACKGROUND BLOBS ---------- */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

.hero-blob-1 {
    width: 700px;
    height: 700px;
    top: -200px;
    right: -100px;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.18) 0%, transparent 70%);
}

.hero-blob-2 {
    width: 500px;
    height: 500px;
    bottom: 0;
    left: -100px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, transparent 70%);
}

.hero-blob-3 {
    width: 400px;
    height: 400px;
    top: 40%;
    left: 30%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
}

/* ---------- LAYOUT ---------- */
.hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 10;
}

@media (min-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr 1.1fr;
        gap: 5rem;
        min-height: calc(100vh - 100px);
    }
}

/* ---------- CONTENT (LEFT) ---------- */
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 2rem;
}

@media (min-width: 1024px) {
    .hero-content {
        padding-top: 0;
    }
}

/* Announcement Badge */
.hero-badge-wrap {
    display: flex;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem 0.45rem 0.6rem;
    background: rgba(124, 92, 255, 0.08);
    border: 1px solid rgba(124, 92, 255, 0.2);
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.8125rem;
    color: #cbd5e1;
}

.hero-badge:hover {
    background: rgba(124, 92, 255, 0.15);
    border-color: rgba(124, 92, 255, 0.4);
    color: white;
    transform: translateY(-1px);
}

.hero-badge-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7c5cff;
    box-shadow: 0 0 8px rgba(124, 92, 255, 0.8);
    animation: pulse 2s ease-in-out infinite;
}

.hero-badge-new {
    font-weight: 700;
    font-size: 0.7rem;
    color: #a5a8ff;
    background: rgba(124, 92, 255, 0.2);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'JetBrains Mono', monospace;
}

.hero-badge-text {
    font-weight: 500;
}

.hero-badge-arrow {
    color: #7c5cff;
    flex-shrink: 0;
}

/* Main Heading */
.hero-heading-wrap {}

.hero-heading {
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: #ffffff;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
}

.hero-heading-line-1 {
    display: block;
    color: #ffffff;
}

.hero-heading-line-2 {
    display: block;
    color: #ffffff;
}

.hero-heading-line-3 {
    display: block;
    background: linear-gradient(135deg, #e2e8f0 0%, #a5a8ff 40%, #c084fc 70%, #67e8f9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-heading-accent {
    font-style: italic;
    font-weight: 400;
    font-family: 'Instrument Serif', serif;
    color: #94a3b8;
    -webkit-text-fill-color: #94a3b8;
    background: none;
    font-size: 0.85em;
}

.hero-heading-highlight {
    position: relative;
    display: inline-block;
}

.hero-underline-svg {
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 12px;
    overflow: visible;
}

.hero-underline-svg path {
    stroke-dasharray: 250;
    stroke-dashoffset: 250;
    animation: draw-underline 1.2s ease 0.8s forwards;
}

@keyframes draw-underline {
    to { stroke-dashoffset: 0; }
}

/* Tagline */
.hero-tagline-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.hero-tagline {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    line-height: 1.4;
}

.hero-typewriter-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 220px;
}

.hero-typewriter {
    font-weight: 700;
    font-size: inherit;
}

.hero-cursor {
    color: #7c5cff;
    font-weight: 300;
    margin-left: 1px;
}

.hero-subtext {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
    max-width: 480px;
}

/* CTAs */
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
}

.hero-cta-primary {
    font-size: 1rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    box-shadow: 0 8px 30px -8px rgba(124, 92, 255, 0.6),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.hero-cta-primary:hover .hero-btn-arrow {
    transform: translateX(4px);
    transition: transform 0.3s ease;
}

.hero-btn-arrow {
    transition: transform 0.3s ease;
}

.hero-cta-secondary {
    font-size: 1rem;
    padding: 1rem 1.75rem;
    border-radius: 9999px;
}

.hero-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(124, 92, 255, 0.2);
    border: 1px solid rgba(124, 92, 255, 0.3);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.hero-cta-secondary:hover .hero-play-icon {
    background: rgba(124, 92, 255, 0.35);
    transform: scale(1.1);
}

/* Live Indicators Row */
.hero-live-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.hero-live-pill {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.hero-live-count {
    color: #10b981;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
}

.hero-live-text {
    color: #64748b;
}

.hero-live-divider {
    width: 1px;
    height: 16px;
    background: rgba(148, 163, 184, 0.2);
}

/* Trust Logos */
.hero-trust {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hero-trust-label {
    font-size: 0.75rem;
    color: #475569;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}

.hero-trust-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.hero-trust-logo-item {
    padding: 0.4rem 0.85rem;
    background: rgba(148, 163, 184, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.hero-trust-logo-item:hover {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.2);
}

.hero-trust-logo-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.02em;
}

.hero-trust-logo-item:hover .hero-trust-logo-text {
    color: #94a3b8;
}

/* ---------- VISUAL (RIGHT) ---------- */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Mockup Wrapper */
.hero-mockup-wrap {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

.hero-mockup {
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateY(-3deg) rotateX(2deg);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-mockup:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

/* Browser Chrome */
.hero-browser {
    background: #0f0f23;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 40px 80px -20px rgba(0,0,0,0.7),
        0 0 100px -30px rgba(124, 92, 255, 0.3);
}

.hero-browser-bar {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    gap: 0.75rem;
}

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

.hero-browser-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.hero-browser-dot-red { background: #ff5f57; }
.hero-browser-dot-yellow { background: #ffbd2e; }
.hero-browser-dot-green { background: #28c840; }

.hero-browser-url {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 0.4rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.7rem;
    color: #64748b;
    font-family: 'JetBrains Mono', monospace;
}

.hero-browser-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.hero-browser-action-dot {
    width: 20px;
    height: 4px;
    background: rgba(148, 163, 184, 0.15);
    border-radius: 2px;
}

/* Dashboard Content */
.hero-dashboard {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    background: #080818;
}

/* Dashboard Top Bar */
.hero-dash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-dash-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.hero-dash-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #e2e8f0;
}

.hero-dash-badge {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 9999px;
    font-size: 0.65rem;
    color: #6ee7b7;
    font-family: 'JetBrains Mono', monospace;
}

.hero-dash-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c5cff, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: white;
}

/* Stat Cards */
.hero-dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.hero-dash-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.07);
    border-radius: 0.5rem;
    padding: 0.6rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hero-dash-stat-label {
    font-size: 0.55rem;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.hero-dash-stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.02em;
}

.hero-dash-stat-change {
    font-size: 0.6rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.hero-dash-stat-up { color: #10b981; }
.hero-dash-stat-down { color: #06b6d4; }

/* Chart */
.hero-dash-chart {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.07);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.hero-dash-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-dash-chart-badge {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
}

.hero-dash-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 56px;
}

.hero-dash-bar {
    flex: 1;
    height: var(--h, 50%);
    display: flex;
    align-items: stretch;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

.hero-dash-bar-fill {
    width: 100%;
    background: rgba(124, 92, 255, 0.2);
    border-radius: inherit;
    transition: background 0.3s ease;
    animation: bar-grow 1s ease forwards;
}

.hero-dash-bar:hover .hero-dash-bar-fill {
    background: rgba(124, 92, 255, 0.4);
}

.hero-dash-bar-active {
    background: linear-gradient(180deg, #7c5cff, rgba(124, 92, 255, 0.4)) !important;
    box-shadow: 0 0 12px rgba(124, 92, 255, 0.4);
}

@keyframes bar-grow {
    from { transform: scaleY(0); transform-origin: bottom; }
    to { transform: scaleY(1); transform-origin: bottom; }
}

.hero-dash-chart-labels {
    display: flex;
    gap: 6px;
    margin-top: 0.4rem;
}

.hero-dash-chart-labels span {
    flex: 1;
    text-align: center;
    font-size: 0.5rem;
    color: #334155;
    font-family: 'JetBrains Mono', monospace;
}

/* Table */
.hero-dash-table {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.07);
    border-radius: 0.5rem;
    overflow: hidden;
}

.hero-dash-table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    align-items: center;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.05);
    font-size: 0.65rem;
}

.hero-dash-table-row:last-child {
    border-bottom: none;
}

.hero-dash-table-header {
    background: rgba(255, 255, 255, 0.02);
    color: #334155;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hero-dash-partner {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #cbd5e1;
    font-weight: 600;
}

.hero-dash-partner-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    flex-shrink: 0;
}

.hero-status-pill {
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.55rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-status-active {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.hero-status-syncing {
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.hero-dash-mono {
    color: #64748b;
    font-family: 'JetBrains Mono', monospace;
}

.hero-health-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}

.hero-health-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c5cff, #a855f7);
    border-radius: 2px;
    display: block;
}

/* Mockup Glow */
.hero-mockup-glow {
    position: absolute;
    inset: -40px;
    background: radial-gradient(ellipse at center,
        rgba(124, 92, 255, 0.2) 0%,
        rgba(168, 85, 247, 0.1) 40%,
        transparent 70%);
    z-index: 0;
    pointer-events: none;
    filter: blur(30px);
    animation: pulse-glow 4s ease-in-out infinite;
}

/* ---------- FLOATING CARDS ---------- */
.hero-float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    background: rgba(15, 15, 35, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 0.875rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 5;
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    pointer-events: none;
    white-space: nowrap;
}

.hero-float-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 0.5rem;
    background: rgba(124, 92, 255, 0.15);
    border: 1px solid rgba(124, 92, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-float-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.hero-float-card-value {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
}

.hero-float-card-label {
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Card positions */
.hero-float-card-1 {
    top: -20px;
    right: -20px;
}

.hero-float-card-2 {
    bottom: 20px;
    right: -30px;
}

.hero-float-card-3 {
    top: 40%;
    left: -30px;
    transform: translateY(-50%);
}

.hero-float-card-4 {
    bottom: -15px;
    left: 20px;
}

/* ---------- SCROLL INDICATOR ---------- */
.hero-scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}

.hero-scroll-mouse {
    width: 24px;
    height: 38px;
    border: 2px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.hero-scroll-wheel {
    width: 3px;
    height: 8px;
    background: rgba(124, 92, 255, 0.6);
    border-radius: 2px;
    animation: scroll-indicator 2s ease-in-out infinite;
}

.hero-scroll-text {
    font-size: 0.65rem;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* ---------- BOTTOM FADE ---------- */
.hero-bottom-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom, transparent, rgba(5, 5, 16, 0.8));
    pointer-events: none;
    z-index: 5;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1023px) {
    .hero-visual {
        order: -1;
        padding: 1rem;
    }

    .hero-mockup {
        transform: none;
    }

    .hero-float-card-1 { top: -10px; right: -10px; }
    .hero-float-card-2 { bottom: -10px; right: -10px; }
    .hero-float-card-3 { display: none; }
    .hero-float-card-4 { display: none; }

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

    .hero-scroll-indicator {
        display: none;
    }
}

@media (max-width: 640px) {
    .hero-heading {
        font-size: 2.25rem;
    }

    .hero-float-card-1,
    .hero-float-card-2 {
        display: none;
    }

    .hero-trust-logos {
        gap: 0.5rem;
    }
}

/* ============================================
   STATS STRIP STYLES
   ============================================ */

.stats-section {
    position: relative;
    padding: 0;
    z-index: 10;
    overflow: hidden;
}

/* ---------- DECORATIVE BORDERS ---------- */
.stats-border-top {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(124, 92, 255, 0.3) 20%,
        rgba(168, 85, 247, 0.5) 50%,
        rgba(6, 182, 212, 0.3) 80%,
        transparent 100%
    );
}

.stats-border-bottom {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(6, 182, 212, 0.2) 20%,
        rgba(124, 92, 255, 0.4) 50%,
        rgba(168, 85, 247, 0.2) 80%,
        transparent 100%
    );
}

/* ---------- SHIMMER SWEEP ---------- */
.stats-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(124, 92, 255, 0.03) 40%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(6, 182, 212, 0.03) 60%,
        transparent 80%
    );
    background-size: 200% 100%;
    animation: stats-shimmer-move 6s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes stats-shimmer-move {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* ---------- BACKGROUND ---------- */
.stats-bg-glow {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 50%, rgba(124, 92, 255, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* ---------- CONTAINER ---------- */
.stats-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    position: relative;
    z-index: 2;
}

/* ---------- MICRO LABEL ---------- */
.stats-micro-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* ---------- STATS GRID ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    position: relative;
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ---------- STAT ITEM ---------- */
.stats-item {
    position: relative;
    padding: 1.75rem 1.25rem;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* Hover glow effect */
.stats-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        rgba(124, 92, 255, 0.04) 0%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.stats-item:hover::before {
    opacity: 1;
}

.stats-item-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    transition: transform 0.3s ease;
}

.stats-item:hover .stats-item-inner {
    transform: translateY(-2px);
}

/* ---------- STAT ICON ---------- */
.stats-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 0.625rem;
    background: var(--stat-color);
    border: 1px solid var(--stat-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.stats-item:hover .stats-icon-wrap {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 0 20px var(--stat-border);
}

/* ---------- STAT CONTENT ---------- */
.stats-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.stats-value-row {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.stats-value {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 900;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 40px var(--stat-glow, rgba(124, 92, 255, 0.4));
    transition: text-shadow 0.3s ease;
    display: block;
}

.stats-item:hover .stats-value {
    text-shadow: 0 0 60px var(--stat-glow, rgba(124, 92, 255, 0.6));
}

.stats-value-small {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.stats-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #cbd5e1;
    letter-spacing: -0.01em;
    display: block;
}

.stats-desc {
    font-size: 0.7rem;
    color: #475569;
    font-weight: 400;
    line-height: 1.4;
    display: block;
}

/* ---------- VERTICAL DIVIDERS ---------- */
.stats-divider {
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(148, 163, 184, 0.12) 30%,
        rgba(148, 163, 184, 0.12) 70%,
        transparent 100%
    );
    margin-left: auto;
    flex-shrink: 0;
    align-self: stretch;
}

/* Hide divider on mobile (items stack) */
@media (max-width: 1199px) {
    .stats-divider {
        display: none;
    }

    /* Add bottom borders instead on mobile */
    .stats-item {
        border-bottom: 1px solid rgba(148, 163, 184, 0.06);
    }

    .stats-item:nth-child(5),
    .stats-item:nth-child(6) {
        border-bottom: none;
    }
}

/* ---------- BOTTOM TRUST ROW ---------- */
.stats-trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(148, 163, 184, 0.07);
}

.stats-trust-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    font-family: 'JetBrains Mono', monospace;
    transition: color 0.2s ease;
}

.stats-trust-item:hover {
    color: #94a3b8;
}

.stats-trust-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.2);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .stats-trust-row {
        gap: 0.5rem;
    }

    .stats-trust-dot {
        display: none;
    }
}

/* ============================================
   FEATURES BENTO GRID STYLES
   ============================================ */

.features-section {
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.features-blob-1 {
    position: absolute;
    width: 600px;
    height: 600px;
    top: 10%;
    left: -200px;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.1) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.features-blob-2 {
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: 10%;
    right: -150px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

/* ---------- SECTION HEADER ---------- */
.features-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

.features-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.features-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

.features-subtitle {
    font-size: 1.0625rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* ---------- BENTO GRID LAYOUT ---------- */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    grid-auto-flow: dense;
}

@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 1100px) {
    .bento-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: minmax(200px, auto);
        gap: 1.25rem;
    }
}

/* Card size variants — mobile first (1 col) */
.bento-card-wide,
.bento-card-tall,
.bento-card-normal {
    grid-column: span 1;
    grid-row: span 1;
}

/* Tablet: 2 cols */
@media (min-width: 768px) and (max-width: 1099px) {
    .bento-card-wide { grid-column: span 2; }
    .bento-card-tall { grid-column: span 1; grid-row: span 1; }
    .bento-card-normal { grid-column: span 1; }
}

/* Desktop: 6-col grid — explicit placements */
@media (min-width: 1100px) {
    /* Row 1: Mapping WIDE (4 cols) + Code TALL (2 cols, spans 2 rows) */
    .bento-card-mapping {
        grid-column: span 4;
        grid-row: span 1;
    }
    .bento-card-code {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* Row 2: Sync (2 cols) + Dedup (2 cols) — Code continues */
    .bento-card-sync {
        grid-column: span 2;
    }
    .bento-card-dedup {
        grid-column: span 2;
    }

    /* Row 3: Performance WIDE (4 cols) + Master (2 cols) */
    .bento-card-perf {
        grid-column: span 4;
    }
    .bento-card-master {
        grid-column: span 2;
    }

    /* Row 4: Security (3 cols) + Analytics (3 cols) */
    .bento-card-security {
        grid-column: span 3;
    }
    .bento-card-analytics {
        grid-column: span 3;
    }
}

/* ---------- BASE BENTO CARD ---------- */
.bento-card {
    position: relative;
    background: rgba(12, 12, 28, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 1.25rem;
    padding: 1.5rem;
    overflow: hidden;
    cursor: default;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s ease,
                box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 280px;
    /* GPU promotion for smooth hover */
    will-change: transform;
    transform: translateZ(0);
}

/* Tall code card needs more room */
.bento-card-code {
    min-height: 100%;
}

/* Wide cards can be shorter */
.bento-card-mapping,
.bento-card-perf {
    min-height: 320px;
}

.bento-card:hover {
    border-color: rgba(148, 163, 184, 0.18);
    transform: translateY(-3px);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.4);
}

/* Hover glow overlay */
.bento-card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%,
        var(--glow-color, rgba(124, 92, 255, 0.1)) 0%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.bento-card:hover .bento-card-glow {
    opacity: 1;
}

/* ---------- CARD CONTENT ---------- */
.bento-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bento-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Icon wrappers */
.bento-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.bento-card:hover .bento-icon-wrap {
    transform: scale(1.1) rotate(-5deg);
}

.bento-icon-brand {
    background: rgba(124, 92, 255, 0.15);
    border: 1px solid rgba(124, 92, 255, 0.25);
    color: #a5a8ff;
}

.bento-icon-cyan {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.25);
    color: #67e8f9;
}

.bento-icon-emerald {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
}

.bento-icon-violet {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.25);
    color: #d8b4fe;
}

.bento-icon-amber {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #fcd34d;
}

.bento-icon-rose {
    background: rgba(244, 63, 94, 0.15);
    border: 1px solid rgba(244, 63, 94, 0.25);
    color: #fda4af;
}

.bento-tag {
    font-size: 0.7rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    background: rgba(124, 92, 255, 0.1);
    color: #a5a8ff;
    border: 1px solid rgba(124, 92, 255, 0.2);
}

.bento-tag-amber {
    background: rgba(245, 158, 11, 0.1);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.2);
}

.bento-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.3;
}

.bento-desc {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ---------- CARD 1: MAPPING VISUAL ---------- */
.bento-mapping-visual {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    height: 180px;
    z-index: 2;
}

.bento-map-sources {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    z-index: 2;
    flex-shrink: 0;
    width: 100px;
}

.bento-map-source {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 500;
    transition: color 0.3s ease;
    animation: source-pulse 3s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes source-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.bento-map-source-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--src-color);
    flex-shrink: 0;
    box-shadow: 0 0 6px var(--src-color);
}

.bento-map-source-name {
    font-size: 0.65rem;
}

.bento-map-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    z-index: 2;
}

.bento-map-gateway {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bento-map-gateway-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(124, 92, 255, 0.3);
    animation: ring-expand 3s ease-in-out infinite;
}

.bento-map-gateway-ring-1 {
    width: 56px;
    height: 56px;
    animation-delay: 0s;
}

.bento-map-gateway-ring-2 {
    width: 72px;
    height: 72px;
    animation-delay: 0.5s;
    border-color: rgba(124, 92, 255, 0.15);
}

@keyframes ring-expand {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 1; }
}

.bento-map-gateway-core {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c5cff, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(124, 92, 255, 0.5);
    z-index: 1;
}

.bento-map-gateway-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #7c5cff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'JetBrains Mono', monospace;
}

.bento-map-output {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    z-index: 2;
    flex-shrink: 0;
    width: 100px;
}

.bento-map-out-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    border: 1px solid;
}

.bento-map-out-countries {
    background: rgba(124, 92, 255, 0.1);
    border-color: rgba(124, 92, 255, 0.2);
    color: #a5a8ff;
}

.bento-map-out-cities {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
}

.bento-map-out-hotels {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.bento-map-out-count {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 0.7rem;
}

.bento-map-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.bento-flow-line {
    stroke-dasharray: 4 4;
    animation: dash-flow 2s linear infinite;
}

@keyframes dash-flow {
    to { stroke-dashoffset: -20; }
}

.bento-flow-dot {
    filter: drop-shadow(0 0 4px currentColor);
}

/* ---------- CARD 2: CODE BLOCK ---------- */
.bento-code-block {
    background: rgba(5, 5, 16, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    z-index: 2;
    position: relative;
}

.bento-code-topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(148, 163, 184, 0.07);
}

.bento-code-dots {
    display: flex;
    gap: 5px;
}

.bento-code-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: block;
}

.bento-code-filename {
    flex: 1;
    font-size: 0.65rem;
    color: #475569;
    font-family: 'JetBrains Mono', monospace;
}

.bento-code-copy {
    background: none;
    border: none;
    color: #475569;
    cursor: pointer;
    padding: 0.2rem;
    transition: color 0.2s ease;
}

.bento-code-copy:hover {
    color: #cbd5e1;
}

.bento-code-pre {
    margin: 0;
    padding: 1rem 0.875rem;
    font-size: 0.7rem;
    line-height: 1.7;
    overflow: hidden;
    font-family: 'JetBrains Mono', monospace;
    flex: 1;
}

/* Syntax highlighting colors */
.code-comment { color: #475569; font-style: italic; }
.code-keyword { color: #c084fc; }
.code-var { color: #67e8f9; }
.code-op { color: #94a3b8; }
.code-fn { color: #fcd34d; }
.code-str { color: #86efac; }
.code-key { color: #67e8f9; }
.code-punct { color: #94a3b8; }

.bento-code-response {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-top: 1px solid rgba(148, 163, 184, 0.07);
    background: rgba(16, 185, 129, 0.04);
}

.bento-response-status {
    font-size: 0.65rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.bento-response-time,
.bento-response-size {
    font-size: 0.65rem;
    font-family: 'JetBrains Mono', monospace;
    color: #475569;
}

/* ---------- CARD 3: SYNC VISUAL ---------- */
.bento-sync-visual {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 2;
    position: relative;
}

.bento-sync-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bento-sync-event {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.06);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.bento-sync-event:hover {
    background: rgba(255, 255, 255, 0.04);
}

.bento-sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bento-sync-dot-pulse {
    animation: pulse-ring 1.5s ease-out infinite;
}

.bento-sync-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.bento-sync-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #cbd5e1;
}

.bento-sync-time {
    font-size: 0.65rem;
    color: #475569;
    font-family: 'JetBrains Mono', monospace;
}

.bento-sync-badge {
    font-size: 0.65rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    white-space: nowrap;
}

.bento-sync-ok {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.bento-sync-running {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    animation: pulse 2s ease-in-out infinite;
}

.bento-sync-next {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #475569;
    padding: 0 0.2rem;
}

/* ---------- CARD 4: DEDUP VISUAL ---------- */
.bento-dedup-visual {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 2;
    position: relative;
}

.bento-dedup-before,
.bento-dedup-after {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bento-dedup-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #475569;
    font-family: 'JetBrains Mono', monospace;
}

.bento-dedup-label-after {
    color: #10b981;
}

.bento-dedup-items {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.bento-dedup-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.07);
    border-radius: 0.375rem;
    font-size: 0.65rem;
    color: #94a3b8;
}

.bento-dedup-dup {
    border-color: rgba(244, 63, 94, 0.2);
    background: rgba(244, 63, 94, 0.04);
    color: #94a3b8;
    opacity: 0.7;
}

.bento-dedup-merged {
    border-color: rgba(16, 185, 129, 0.25);
    background: rgba(16, 185, 129, 0.06);
    color: #6ee7b7;
}

.bento-dedup-source {
    margin-left: auto;
    font-size: 0.55rem;
    font-family: 'JetBrains Mono', monospace;
    color: #334155;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

.bento-dedup-merged-badge {
    margin-left: auto;
    font-size: 0.55rem;
    font-family: 'JetBrains Mono', monospace;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-weight: 700;
}

.bento-dedup-arrow {
    flex-shrink: 0;
}

/* ---------- CARD 5: PERFORMANCE VISUAL ---------- */
.bento-perf-visual {
    display: flex;
    gap: 1.5rem;
    z-index: 2;
    position: relative;
}

.bento-perf-meters {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.bento-perf-meter {}

.bento-perf-meter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.bento-perf-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.bento-perf-value {
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}

.bento-perf-excellent { color: #10b981; }
.bento-perf-good { color: #7c5cff; }

.bento-perf-bar-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    position: relative;
    overflow: visible;
}

.bento-perf-bar-fill {
    height: 100%;
    width: var(--fill, 0%);
    background: var(--fill-color, #7c5cff);
    border-radius: 3px;
    box-shadow: 0 0 10px var(--fill-color, rgba(124, 92, 255, 0.5));
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: bar-fill-in 1.5s ease forwards;
}

@keyframes bar-fill-in {
    from { width: 0%; }
    to { width: var(--fill, 0%); }
}

.bento-perf-bar-target {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    background: rgba(244, 63, 94, 0.5);
    border-radius: 1px;
}

.bento-perf-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 0.55rem;
    color: #334155;
    font-family: 'JetBrains Mono', monospace;
}

/* Uptime grid */
.bento-uptime-grid {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 1100px) {
    .bento-uptime-grid { display: none; }
}

.bento-uptime-title {
    font-size: 0.65rem;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bento-uptime-bars {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 2px;
}

.bento-uptime-bar {
    height: 28px;
    border-radius: 2px;
    transition: all 0.2s ease;
}

.bento-uptime-bar:hover {
    transform: scaleY(1.2);
    transform-origin: bottom;
}

.bento-uptime-bar-ok {
    background: rgba(16, 185, 129, 0.5);
}

.bento-uptime-bar-partial {
    background: rgba(245, 158, 11, 0.5);
}

.bento-uptime-legend {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.bento-uptime-pct {
    font-size: 0.75rem;
    font-weight: 800;
    color: #10b981;
    font-family: 'JetBrains Mono', monospace;
}

.bento-uptime-legend-items {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6rem;
    color: #475569;
}

.bento-uptime-ok-dot,
.bento-uptime-partial-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.bento-uptime-ok-dot { background: rgba(16, 185, 129, 0.5); }
.bento-uptime-partial-dot { background: rgba(245, 158, 11, 0.5); }

/* ---------- CARD 6: MASTER DATA ---------- */
.bento-master-visual {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    z-index: 2;
    position: relative;
}

.bento-master-tabs {
    display: flex;
    gap: 0.25rem;
}

.bento-master-tab {
    padding: 0.3rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 0.4rem;
    border: 1px solid rgba(148, 163, 184, 0.08);
    background: transparent;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bento-master-tab:hover {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.04);
}

.bento-master-tab-active {
    background: rgba(124, 92, 255, 0.1);
    border-color: rgba(124, 92, 255, 0.2);
    color: #a5a8ff;
}

.bento-master-table {
    background: rgba(5, 5, 16, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.07);
    border-radius: 0.5rem;
    overflow: hidden;
}

.bento-master-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    padding: 0.45rem 0.6rem;
    font-size: 0.7rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.05);
    gap: 0.5rem;
    align-items: center;
    color: #94a3b8;
    transition: background 0.2s ease;
}

.bento-master-row:last-child { border-bottom: none; }

.bento-master-row:not(.bento-master-header):hover {
    background: rgba(255, 255, 255, 0.02);
}

.bento-master-header {
    color: #334155;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background: rgba(255, 255, 255, 0.02);
}

.bento-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: #64748b;
}

.bento-master-count {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.7rem;
    color: #10b981;
}

/* ---------- CARD 7: SECURITY ---------- */
.bento-security-visual {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 2;
    position: relative;
}

.bento-security-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.bento-security-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.07);
    border-radius: 0.5rem;
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 500;
    transition: all 0.2s ease;
}

.bento-security-badge:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
}

.bento-security-check {
    margin-left: auto;
    color: #10b981;
    font-weight: 700;
}

.bento-api-key {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bento-api-key-label {
    font-size: 0.65rem;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bento-api-key-value {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: rgba(5, 5, 16, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
}

.bento-api-key-prefix {
    color: #7c5cff;
    font-weight: 700;
}

.bento-api-key-masked {
    color: #334155;
    flex: 1;
    letter-spacing: 0.05em;
}

.bento-api-key-copy {
    background: none;
    border: none;
    color: #475569;
    cursor: pointer;
    padding: 0.15rem;
    transition: color 0.2s ease;
}

.bento-api-key-copy:hover {
    color: #7c5cff;
}

/* ---------- CARD 8: ANALYTICS ---------- */
.bento-analytics-visual {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 2;
    position: relative;
}

.bento-analytics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bento-analytics-metric {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}

.bento-analytics-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: #10b981;
    font-family: 'JetBrains Mono', monospace;
}

.bento-analytics-period {
    color: #475569;
    font-weight: 400;
}

.bento-sparkline {
    height: 60px;
}

.bento-sparkline-svg {
    width: 100%;
    height: 100%;
}

.bento-sparkline-path {
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
    animation: draw-line 1.5s ease 0.5s forwards;
}

@keyframes draw-line {
    to { stroke-dashoffset: 0; }
}

.bento-sparkline-fill {
    opacity: 0;
    animation: fade-in 0.5s ease 2s forwards;
}

.bento-sparkline-dot {
    filter: drop-shadow(0 0 4px #7c5cff);
}

.bento-analytics-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.07);
    border-radius: 0.5rem;
}

.bento-analytics-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.bento-analytics-stat-val {
    font-size: 0.9rem;
    font-weight: 800;
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
}

.bento-analytics-stat-lbl {
    font-size: 0.6rem;
    color: #475569;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bento-analytics-divider {
    width: 1px;
    height: 28px;
    background: rgba(148, 163, 184, 0.08);
}

/* ============================================
   PRODUCT SHOWCASE STYLES
   ============================================ */

.showcase-section {
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.showcase-blob-1 {
    position: absolute;
    width: 600px;
    height: 600px;
    top: 0;
    right: -150px;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.12) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.showcase-blob-2 {
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: 0;
    left: -150px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

/* ---------- HEADER ---------- */
.showcase-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

.showcase-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.showcase-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

.showcase-subtitle {
    font-size: 1.0625rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* ---------- TABS ---------- */
.showcase-tabs-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 3rem;
}

.showcase-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem;
    background: rgba(15, 15, 35, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 9999px;
    position: relative;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.showcase-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    white-space: nowrap;
}

.showcase-tab:hover {
    color: #cbd5e1;
}

.showcase-tab.active {
    color: #ffffff;
}

.showcase-tab-indicator {
    position: absolute;
    top: 0.375rem;
    height: calc(100% - 0.75rem);
    background: rgba(124, 92, 255, 0.2);
    border: 1px solid rgba(124, 92, 255, 0.3);
    border-radius: 9999px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    box-shadow: 0 0 20px rgba(124, 92, 255, 0.2);
}

/* Progress bar */
.showcase-progress-wrap {
    width: 200px;
    height: 2px;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 2px;
    margin-top: 1.25rem;
    overflow: hidden;
}

.showcase-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c5cff, #a855f7);
    border-radius: 2px;
    /* No transition — RAF handles smoothness */
    transition: none;
    box-shadow: 0 0 8px rgba(124, 92, 255, 0.5);
}

/* ---------- PANELS ---------- */
.showcase-content-wrap {
    position: relative;
}

.showcase-panel {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.showcase-panel.active {
    display: block;
    animation: panel-fade-in 0.5s ease forwards;
}

@keyframes panel-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.showcase-panel-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .showcase-panel-inner {
        grid-template-columns: 420px 1fr;
        gap: 4rem;
    }
}

/* ---------- FEATURE LIST (Left) ---------- */
.showcase-features-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.showcase-features-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #7c5cff;
    font-family: 'JetBrains Mono', monospace;
}

.showcase-features-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0;
}

.showcase-features-desc {
    font-size: 0.9375rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* Checklist */
.showcase-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.showcase-check-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.showcase-check-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(124, 92, 255, 0.15);
    border: 1px solid rgba(124, 92, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: #a5a8ff;
}

.showcase-check-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.showcase-check-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
}

.showcase-check-desc {
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.5;
}

.showcase-cta {
    align-self: flex-start;
    border-radius: 9999px;
}

/* ---------- BROWSER MOCKUP (Right) ---------- */
.showcase-mockup-wrap {
    position: relative;
}

.showcase-browser {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow:
        0 40px 100px -30px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    background: #0a0a1a;
}

.showcase-browser-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(148, 163, 184, 0.07);
}

.showcase-browser-dots {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.showcase-browser-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}

.showcase-browser-url {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.07);
    border-radius: 0.375rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.7rem;
    color: #64748b;
    font-family: 'JetBrains Mono', monospace;
}

.showcase-browser-reload {
    flex-shrink: 0;
}

/* Dashboard Screen */
.showcase-screen {
    display: flex;
    height: 480px;
    overflow: hidden;
    background: #060616;
}

/* ---------- SHARED DASHBOARD UI STYLES ---------- */

/* Sidebar */
.sc-sidebar {
    width: 140px;
    flex-shrink: 0;
    background: rgba(10, 10, 26, 0.8);
    border-right: 1px solid rgba(148, 163, 184, 0.06);
    display: flex;
    flex-direction: column;
    padding: 0.875rem 0.75rem;
    gap: 0.5rem;
}

.sc-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sc-sidebar-logo-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: linear-gradient(135deg, #7c5cff, #a855f7);
    flex-shrink: 0;
}

.sc-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
}

.sc-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.65rem;
    font-weight: 500;
    color: #475569;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sc-nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
}

.sc-nav-active {
    background: rgba(124, 92, 255, 0.12);
    color: #a5a8ff;
    border: 1px solid rgba(124, 92, 255, 0.15);
}

.sc-sidebar-footer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.4rem;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
    margin-top: auto;
}

.sc-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c5cff, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.sc-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    overflow: hidden;
}

.sc-user-name {
    font-size: 0.6rem;
    font-weight: 600;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-user-role {
    font-size: 0.5rem;
    color: #475569;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
}

/* Main area */
.sc-main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.sc-main::-webkit-scrollbar { width: 4px; }
.sc-main::-webkit-scrollbar-track { background: transparent; }
.sc-main::-webkit-scrollbar-thumb { background: rgba(124, 92, 255, 0.3); border-radius: 2px; }

/* Top bar */
.sc-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.sc-page-title {
    font-size: 0.875rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.sc-page-sub {
    font-size: 0.6rem;
    color: #475569;
    margin-top: 0.1rem;
}

.sc-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.sc-live-badge {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 9999px;
    font-size: 0.55rem;
    color: #6ee7b7;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}

.sc-btn-add {
    padding: 0.3rem 0.65rem;
    background: linear-gradient(135deg, #7c5cff, #6d3fff);
    border: none;
    border-radius: 0.375rem;
    font-size: 0.6rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    white-space: nowrap;
}

.sc-btn-secondary {
    padding: 0.3rem 0.65rem;
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0.375rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
}

.sc-select {
    padding: 0.3rem 0.5rem;
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0.375rem;
    font-size: 0.6rem;
    color: #64748b;
    cursor: pointer;
}

/* KPI Grid */
.sc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.sc-kpi {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.07);
    border-radius: 0.5rem;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sc-kpi-label {
    font-size: 0.55rem;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sc-kpi-value {
    font-size: 1rem;
    font-weight: 900;
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.03em;
}

.sc-kpi-delta {
    font-size: 0.55rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.sc-delta-up { color: #10b981; }
.sc-delta-down { color: #06b6d4; }

/* Chart + Partners grid */
.sc-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* Chart card */
.sc-chart-card,
.sc-partners-card,
.sc-analytics-chart,
.sc-partner-breakdown {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.07);
    border-radius: 0.5rem;
    padding: 0.6rem;
}

.sc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.sc-card-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sc-card-badge {
    font-size: 0.55rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
}

.sc-badge-green {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.sc-card-link {
    font-size: 0.6rem;
    color: #7c5cff;
    cursor: pointer;
}

/* Bars */
.sc-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 52px;
}

.sc-bar {
    flex: 1;
    height: var(--h, 50%);
    border-radius: 2px 2px 0 0;
    overflow: hidden;
}

.sc-bar-fill {
    width: 100%;
    height: 100%;
    background: rgba(124, 92, 255, 0.25);
    border-radius: inherit;
}

.sc-bar-active {
    background: linear-gradient(180deg, #7c5cff, rgba(124, 92, 255, 0.4));
    box-shadow: 0 0 10px rgba(124, 92, 255, 0.4);
}

/* Partners list */
.sc-partner-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sc-partner-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
}

.sc-partner-icon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 800;
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
}

.sc-partner-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
}

.sc-partner-calls {
    font-size: 0.55rem;
    color: #475569;
    font-family: 'JetBrains Mono', monospace;
}

.sc-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sc-status-active { background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.6); }
.sc-status-syncing { background: #f59e0b; animation: pulse 1.5s ease-in-out infinite; }

/* ---------- MASTER DATA SCREEN ---------- */
.sc-type-tabs {
    display: flex;
    gap: 0.25rem;
}

.sc-type-tab {
    padding: 0.3rem 0.65rem;
    font-size: 0.65rem;
    font-weight: 600;
    border: 1px solid rgba(148, 163, 184, 0.08);
    background: transparent;
    color: #475569;
    border-radius: 0.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.sc-type-active {
    background: rgba(124, 92, 255, 0.1);
    border-color: rgba(124, 92, 255, 0.2);
    color: #a5a8ff;
}

.sc-type-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    opacity: 0.7;
}

.sc-search-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 0.4rem;
}

.sc-search-placeholder {
    font-size: 0.65rem;
    color: #334155;
}

.sc-data-table {
    background: rgba(5, 5, 16, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.07);
    border-radius: 0.5rem;
    overflow: hidden;
}

.sc-table-header {
    display: grid;
    grid-template-columns: 2.5fr 0.6fr 0.5fr 0.5fr 0.5fr 1fr 1fr;
    padding: 0.4rem 0.6rem;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #334155;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(148, 163, 184, 0.05);
    gap: 0.3rem;
    align-items: center;
}

.sc-table-row {
    display: grid;
    grid-template-columns: 2.5fr 0.6fr 0.5fr 0.5fr 0.5fr 1fr 1fr;
    padding: 0.4rem 0.6rem;
    font-size: 0.65rem;
    color: #94a3b8;
    border-bottom: 1px solid rgba(148, 163, 184, 0.04);
    gap: 0.3rem;
    align-items: center;
    transition: background 0.15s ease;
}

.sc-table-row:last-child { border-bottom: none; }
.sc-table-row:hover { background: rgba(255, 255, 255, 0.02); }

.sc-row-selected { background: rgba(124, 92, 255, 0.05); }

.sc-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: #64748b;
}

.sc-check-yes { color: #10b981; font-weight: 700; }
.sc-check-no { color: #334155; }

.sc-status-chip {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    font-family: 'JetBrains Mono', monospace;
}

.sc-chip-full {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.sc-chip-partial {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* ---------- PLAYGROUND SCREEN ---------- */
.sc-main-playground {
    gap: 0.5rem;
}

.sc-playground-top {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.07);
    border-radius: 0.5rem;
}

.sc-method-select {
    flex-shrink: 0;
}

.sc-method-post {
    font-size: 0.6rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    padding: 0.25rem 0.5rem;
    background: rgba(124, 92, 255, 0.15);
    color: #a5a8ff;
    border-radius: 0.25rem;
}

.sc-endpoint-input {
    flex: 1;
    font-size: 0.65rem;
    font-family: 'JetBrains Mono', monospace;
    display: flex;
    align-items: center;
    gap: 0;
}

.sc-endpoint-base { color: #475569; }
.sc-endpoint-path { color: #e2e8f0; font-weight: 600; }

.sc-send-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, #7c5cff, #6d3fff);
    border: none;
    border-radius: 0.375rem;
    font-size: 0.6rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    flex-shrink: 0;
}

.sc-playground-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    flex: 1;
}

.sc-playground-pane {
    background: rgba(5, 5, 16, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.07);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sc-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.sc-pane-title {
    font-size: 0.6rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sc-pane-lang {
    font-size: 0.55rem;
    font-family: 'JetBrains Mono', monospace;
    color: #334155;
    padding: 0.1rem 0.35rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
}

.sc-pane-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.sc-status-200 {
    font-size: 0.6rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
}

.sc-response-time {
    font-size: 0.55rem;
    font-family: 'JetBrains Mono', monospace;
    color: #475569;
}

.sc-playground-code {
    margin: 0;
    padding: 0.6rem 0.65rem;
    font-size: 0.6rem;
    line-height: 1.7;
    font-family: 'JetBrains Mono', monospace;
    overflow: auto;
    flex: 1;
}

/* ---------- ANALYTICS SCREEN ---------- */
.sc-analytics-chart {
    flex-shrink: 0;
}

.sc-area-chart {
    height: 60px;
    margin-top: 0.3rem;
}

.sc-chart-legend {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.sc-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.55rem;
    color: #475569;
}

.sc-legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sc-partner-breakdown {}

.sc-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sc-breakdown-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sc-breakdown-name {
    font-size: 0.6rem;
    color: #64748b;
    width: 55px;
    flex-shrink: 0;
    font-weight: 600;
}

.sc-breakdown-bar-wrap {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    overflow: hidden;
}

.sc-breakdown-bar {
    height: 100%;
    border-radius: 3px;
}

.sc-breakdown-pct {
    font-size: 0.6rem;
    font-family: 'JetBrains Mono', monospace;
    color: #64748b;
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

/* ---------- MOCKUP GLOW ---------- */
.showcase-mockup-glow {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100px;
    background: radial-gradient(ellipse at center,
        rgba(124, 92, 255, 0.2) 0%,
        transparent 70%);
    filter: blur(30px);
    pointer-events: none;
    z-index: -1;
}

/* ---------- MOBILE ---------- */
@media (max-width: 1023px) {
    .showcase-tabs {
        flex-wrap: wrap;
        border-radius: 1rem;
        justify-content: center;
    }

    .showcase-screen {
        height: 380px;
    }

    .sc-sidebar {
        width: 110px;
    }
}

@media (max-width: 640px) {
    .showcase-tab span {
        display: none;
    }

    .showcase-tab {
        padding: 0.6rem 0.875rem;
    }

    .showcase-screen {
        height: 320px;
    }
}

/* ============================================
   HOW IT WORKS STYLES
   ============================================ */

.hiw-section {
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.hiw-blob-1 {
    position: absolute;
    width: 500px;
    height: 500px;
    top: 20%;
    left: -100px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.hiw-blob-2 {
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: 10%;
    right: -100px;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.08) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.hiw-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

/* ---------- HEADER ---------- */
.hiw-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.hiw-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

.hiw-subtitle {
    font-size: 1.0625rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* Time to first API call badge */
.hiw-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 9999px;
    font-size: 0.8125rem;
    color: #94a3b8;
    margin-top: 0.5rem;
}

.hiw-time-badge i {
    color: #10b981;
}

.hiw-time-badge strong {
    color: #6ee7b7;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
}

/* ---------- TIMELINE ---------- */
.hiw-timeline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    position: relative;
    margin-bottom: 4rem;
}

@media (min-width: 900px) {
    .hiw-timeline {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }
}

/* Animated line track (desktop only) */
.hiw-line-track {
    display: none;
    position: absolute;
    top: 28px; /* aligns with center of number badges */
    left: 12%;
    right: 12%;
    height: 2px;
    background: rgba(148, 163, 184, 0.1);
    border-radius: 2px;
    overflow: hidden;
    z-index: 0;
}

@media (min-width: 900px) {
    .hiw-line-track {
        display: block;
    }
}

.hiw-line-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #7c5cff 0%, #06b6d4 33%, #a855f7 66%, #10b981 100%);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(124, 92, 255, 0.4);
    /* Use transform scaleX instead of width — GPU-only, no layout */
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Mobile vertical line */
@media (max-width: 899px) {
    .hiw-timeline::before {
        content: '';
        position: absolute;
        top: 30px;
        bottom: 30px;
        left: 27px;
        width: 2px;
        background: linear-gradient(180deg,
            rgba(124, 92, 255, 0.3),
            rgba(6, 182, 212, 0.3),
            rgba(168, 85, 247, 0.3),
            rgba(16, 185, 129, 0.3));
        border-radius: 2px;
    }
}

/* ---------- STEP ---------- */
.hiw-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    z-index: 1;
}

@media (max-width: 899px) {
    .hiw-step {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.5rem;
    }
}

/* ---------- STEP NUMBER (Orbital rings) ---------- */
.hiw-step-number-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
}

.hiw-orbital-ring {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(124, 92, 255, 0.3);
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.hiw-orbital-ring-2 {
    border-color: rgba(6, 182, 212, 0.25);
}

/* Only animate rings on ACTIVE step (not all 8 constantly) */
.hiw-step-active .hiw-orbital-ring {
    animation: hiw-ring-expand 2.5s ease-out infinite;
}

.hiw-step-active .hiw-orbital-ring-2 {
    animation: hiw-ring-expand 2.5s ease-out infinite;
    animation-delay: 1.25s;
}

@keyframes hiw-ring-expand {
    0% { transform: scale(1) translateZ(0); opacity: 0.6; }
    100% { transform: scale(1.7) translateZ(0); opacity: 0; }
}

/* Pause rings during scroll */
body.is-scrolling .hiw-orbital-ring {
    animation-play-state: paused;
}

.hiw-step-number {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a0a1a, #12122a);
    border: 1px solid rgba(124, 92, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 
        0 0 15px rgba(124, 92, 255, 0.15),
        0 0 0 3px #050510;
    will-change: box-shadow;
    transform: translateZ(0);
}

.hiw-step.hiw-step-active .hiw-step-number {
    background: linear-gradient(135deg, #7c5cff, #6d3fff);
    border-color: rgba(124, 92, 255, 0.6);
    box-shadow: 
        0 0 25px rgba(124, 92, 255, 0.5),
        0 0 0 3px #050510;
    /* Removed scale — was causing layout thrash on scroll */
}

.hiw-step-num-text {
    font-size: 1.125rem;
    font-weight: 900;
    color: #a5a8ff;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

.hiw-step.hiw-step-active .hiw-step-num-text {
    color: #ffffff;
}

/* ---------- CARD ---------- */
.hiw-card {
    background: rgba(12, 12, 28, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    width: 100%;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    will-change: transform;
    transform: translateZ(0);
}

.hiw-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%,
        rgba(124, 92, 255, 0.08) 0%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.hiw-card:hover {
    border-color: rgba(124, 92, 255, 0.25);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
}

.hiw-card:hover::before {
    opacity: 1;
}

.hiw-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.hiw-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.hiw-card:hover .hiw-icon-wrap {
    transform: scale(1.1) rotate(-5deg);
}

.hiw-icon-brand {
    background: rgba(124, 92, 255, 0.15);
    border: 1px solid rgba(124, 92, 255, 0.25);
    color: #a5a8ff;
}

.hiw-icon-cyan {
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.25);
    color: #67e8f9;
}

.hiw-icon-violet {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.25);
    color: #d8b4fe;
}

.hiw-icon-emerald {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
}

.hiw-time-tag {
    font-size: 0.65rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #64748b;
    background: rgba(148, 163, 184, 0.06);
    padding: 0.25rem 0.55rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.hiw-card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.25;
}

.hiw-card-desc {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ---------- VISUAL AREA ---------- */
.hiw-visual {
    background: rgba(5, 5, 16, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.06);
    border-radius: 0.625rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 90px;
    position: relative;
    z-index: 1;
}

/* Signup form visual */
.hiw-mini-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hiw-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hiw-form-label {
    font-size: 0.55rem;
    color: #475569;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', monospace;
}

.hiw-form-input {
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(124, 92, 255, 0.2);
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.hiw-form-cursor {
    width: 1px;
    height: 12px;
    background: #7c5cff;
    animation: blink 1s step-end infinite;
}

.hiw-form-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem;
    background: linear-gradient(135deg, #7c5cff, #6d3fff);
    border: none;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(124, 92, 255, 0.4);
}

/* API Key visual */
.hiw-key-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hiw-key-label {
    font-size: 0.55rem;
    color: #475569;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', monospace;
}

.hiw-key-value {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.55rem;
    background: rgba(6, 182, 212, 0.05);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 0.375rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
}

.hiw-key-prefix {
    color: #06b6d4;
    font-weight: 700;
}

.hiw-key-mask {
    color: #334155;
    letter-spacing: 0.05em;
    flex: 1;
}

.hiw-key-suffix {
    color: #94a3b8;
}

.hiw-key-copy {
    background: none;
    border: none;
    color: #475569;
    cursor: pointer;
    padding: 0.15rem;
    transition: color 0.2s ease;
}

.hiw-key-copy:hover {
    color: #06b6d4;
}

.hiw-key-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.55rem;
    color: #475569;
    font-family: 'JetBrains Mono', monospace;
}

.hiw-key-scope {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.4rem;
    background: rgba(16, 185, 129, 0.1);
    color: #6ee7b7;
    border-radius: 9999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Terminal visual */
.hiw-visual-terminal {
    padding: 0;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.hiw-term-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(148, 163, 184, 0.05);
}

.hiw-term-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.hiw-term-dot-red { background: #ff5f57; }
.hiw-term-dot-yellow { background: #ffbd2e; }
.hiw-term-dot-green { background: #28c840; }

.hiw-term-title {
    margin-left: auto;
    font-size: 0.55rem;
    color: #475569;
    font-family: 'JetBrains Mono', monospace;
}

.hiw-term-body {
    padding: 0.55rem 0.65rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.hiw-term-line {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.hiw-term-prompt {
    color: #7c5cff;
    font-weight: 800;
}

.hiw-term-cmd {
    color: #cbd5e1;
}

.hiw-term-response {
    gap: 0.5rem;
    padding-top: 0.15rem;
}

.hiw-term-status {
    color: #10b981;
    font-weight: 700;
}

.hiw-term-time {
    color: #475569;
    font-size: 0.6rem;
}

.hiw-term-output {
    color: #67e8f9;
    font-size: 0.6rem;
}

/* Scale visual */
.hiw-visual-scale {
    padding: 0.5rem 0.75rem;
}

.hiw-scale-chart {
    height: 50px;
}

.hiw-scale-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hiw-scale-line {
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
    animation: draw-line 2s ease 0.5s forwards;
}

.hiw-scale-fill {
    opacity: 0;
    animation: fade-in 0.6s ease 2s forwards;
}

.hiw-scale-dot {
    filter: drop-shadow(0 0 6px #10b981);
    opacity: 0;
    animation: fade-in 0.5s ease 2.3s forwards;
}

.hiw-scale-stats {
    display: flex;
    justify-content: space-around;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
    margin-top: 0.4rem;
}

.hiw-scale-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.hiw-scale-stat-val {
    font-size: 0.85rem;
    font-weight: 900;
    color: #6ee7b7;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
}

.hiw-scale-stat-lbl {
    font-size: 0.5rem;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------- CHECKS ---------- */
.hiw-checks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hiw-checks li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 500;
}

.hiw-checks li i {
    color: #10b981;
    width: 12px;
    height: 12px;
    padding: 2px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---------- BOTTOM CTA ---------- */
.hiw-cta-wrap {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.hiw-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2.5rem;
    background: 
        radial-gradient(ellipse at top, rgba(124, 92, 255, 0.1) 0%, transparent 60%),
        rgba(12, 12, 28, 0.6);
    border: 1px solid rgba(124, 92, 255, 0.15);
    border-radius: 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hiw-cta-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 20%,
        rgba(124, 92, 255, 0.5) 50%,
        transparent 80%);
}

@media (min-width: 768px) {
    .hiw-cta-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        gap: 2rem;
    }
}

.hiw-cta-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hiw-cta-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
}

.hiw-cta-desc {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
}

.hiw-cta-buttons {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 899px) {
    .hiw-card {
        margin-left: 0;
    }

    .hiw-step-number-wrap {
        margin-top: 0.25rem;
    }
}

/* ============================================
   BUILT FOR — TRUTH-BASED SECTION
   ============================================ */

.bf-section {
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.bf-blob-1 {
    position: absolute;
    width: 600px;
    height: 600px;
    top: 10%;
    right: -200px;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.08) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.bf-blob-2 {
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: 10%;
    left: -150px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.06) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.bf-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

/* ---------- HEADER ---------- */
.bf-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.bf-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

.bf-subtitle {
    font-size: 1.0625rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* ---------- PERSONA GRID ---------- */
.bf-persona-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .bf-persona-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.bf-persona {
    position: relative;
    background: rgba(12, 12, 28, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 1.25rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s ease,
                box-shadow 0.35s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    will-change: transform;
    transform: translateZ(0);
    overflow: hidden;
}

.bf-persona::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(124, 92, 255, 0.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.bf-persona:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 92, 255, 0.25);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5);
}

.bf-persona:hover::before {
    opacity: 1;
}

/* Featured persona */
.bf-persona-featured {
    background:
        radial-gradient(ellipse at top, rgba(124, 92, 255, 0.12) 0%, transparent 60%),
        rgba(12, 12, 28, 0.75);
    border-color: rgba(124, 92, 255, 0.25);
    box-shadow: 0 10px 40px -10px rgba(124, 92, 255, 0.2);
}

.bf-persona-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.2), rgba(168, 85, 247, 0.15));
    border: 1px solid rgba(124, 92, 255, 0.35);
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #c4b5fd;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    z-index: 2;
}

/* Persona icon */
.bf-persona-icon-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bf-persona-icon {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: 0.875rem;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a5a8ff;
    transition: transform 0.35s ease;
}

.bf-persona:hover .bf-persona-icon {
    transform: rotate(-8deg) scale(1.05);
}

.bf-persona-icon-featured {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.25), rgba(168, 85, 247, 0.2));
    border-color: rgba(124, 92, 255, 0.4);
    color: #ffffff;
}

.bf-persona-icon-glow {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.3), transparent 70%);
    filter: blur(12px);
    opacity: 0.4;
    z-index: 1;
    transition: opacity 0.4s ease;
}

.bf-persona-icon-glow-featured {
    opacity: 0.7;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.5), transparent 70%);
}

.bf-persona:hover .bf-persona-icon-glow {
    opacity: 0.9;
}

.bf-persona-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    z-index: 2;
}

.bf-persona-desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.65;
    margin: 0;
    position: relative;
    z-index: 2;
}

.bf-persona-checks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    position: relative;
    z-index: 2;
    margin-top: auto;
}

.bf-persona-checks li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.8125rem;
    color: #cbd5e1;
    font-weight: 500;
    line-height: 1.4;
}

.bf-persona-checks li i {
    color: #10b981;
    padding: 2px;
    background: rgba(16, 185, 129, 0.12);
    border-radius: 50%;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* ---------- COMPARISON TABLE ---------- */
.bf-compare-wrap {
    margin-bottom: 4rem;
}

.bf-compare-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.bf-compare-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0;
}

.bf-compare-title-strike {
    position: relative;
    color: #64748b;
}

.bf-compare-title-strike::after {
    content: '';
    position: absolute;
    left: -2%;
    right: -2%;
    top: 55%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f43f5e 20%, #f43f5e 80%, transparent);
    border-radius: 2px;
    transform: rotate(-3deg);
}

.bf-compare-subtitle {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0;
}

.bf-compare-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    background: rgba(12, 12, 28, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 1.25rem;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 700px) {
    .bf-compare-grid {
        font-size: 0.85rem;
    }
}

.bf-compare-cell {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.05);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

@media (max-width: 700px) {
    .bf-compare-cell {
        padding: 0.75rem 0.6rem;
        font-size: 0.75rem;
    }
}

/* Remove border on last row */
.bf-compare-cell:nth-last-child(-n+3) {
    border-bottom: none;
}

.bf-compare-cell-header {
    padding: 1.25rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    font-weight: 700;
}

.bf-compare-cell-mappin {
    background: rgba(124, 92, 255, 0.08);
    border-left: 1px solid rgba(124, 92, 255, 0.15);
    border-right: 1px solid rgba(124, 92, 255, 0.15);
}

.bf-compare-cell-diy {
    background: rgba(148, 163, 184, 0.03);
}

.bf-compare-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.bf-compare-brand-diy {
    color: #94a3b8;
}

.bf-compare-brand-icon {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    background: rgba(124, 92, 255, 0.15);
    border: 1px solid rgba(124, 92, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a5a8ff;
    flex-shrink: 0;
}

.bf-compare-brand-icon-diy {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.15);
    color: #64748b;
}

.bf-compare-cell-label {
    color: #94a3b8;
    font-weight: 500;
}

.bf-compare-cell-label i {
    color: #64748b;
    flex-shrink: 0;
}

.bf-compare-cell-value {
    justify-content: center;
    text-align: center;
}

.bf-compare-good {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #6ee7b7;
    font-weight: 600;
}

.bf-compare-good i {
    color: #10b981;
    flex-shrink: 0;
}

.bf-compare-good strong {
    color: #ffffff;
    font-weight: 700;
}

.bf-compare-bad {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #64748b;
    font-weight: 500;
}

.bf-compare-bad i {
    color: #f43f5e;
    opacity: 0.7;
    flex-shrink: 0;
}

/* ---------- EARLY ACCESS CARD ---------- */
.bf-early-wrap {}

.bf-early-card {
    position: relative;
    background: 
        radial-gradient(ellipse at top left, rgba(124, 92, 255, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
        rgba(12, 12, 28, 0.8);
    border: 1px solid rgba(124, 92, 255, 0.2);
    border-radius: 1.5rem;
    overflow: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.bf-early-topline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(124, 92, 255, 0.6) 20%,
        rgba(168, 85, 247, 0.6) 50%,
        rgba(6, 182, 212, 0.6) 80%,
        transparent 100%);
}

.bf-early-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2.5rem;
}

@media (min-width: 900px) {
    .bf-early-inner {
        grid-template-columns: 1.3fr 1fr;
        gap: 3rem;
        padding: 3rem;
    }
}

/* Left content */
.bf-early-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bf-early-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6ee7b7;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    align-self: flex-start;
}

.bf-early-title {
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0;
}

.bf-early-desc {
    font-size: 1rem;
    color: #94a3b8;
    line-height: 1.7;
    margin: 0;
}

/* Promises list */
.bf-early-promises {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.bf-early-promises li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.bf-promise-icon {
    width: 28px;
    height: 28px;
    border-radius: 0.5rem;
    background: rgba(124, 92, 255, 0.12);
    border: 1px solid rgba(124, 92, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4b5fd;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.bf-promise-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.4;
}

.bf-promise-text strong {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
}

.bf-promise-text span {
    color: #64748b;
    font-size: 0.8rem;
}

.bf-early-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Right visual */
.bf-early-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bf-early-stat-card {
    width: 100%;
    background: rgba(5, 5, 16, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bf-early-stat-label {
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

.bf-early-stat-row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.bf-early-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
}

.bf-early-stat-value {
    font-size: 1.5rem;
    font-weight: 900;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #ffffff, #c4b5fd);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.bf-early-stat-desc {
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.bf-early-stat-divider {
    width: 1px;
    background: rgba(148, 163, 184, 0.08);
    flex-shrink: 0;
}

/* Roadmap */
.bf-roadmap {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
}

.bf-roadmap-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 0.65rem;
}

.bf-roadmap-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bf-roadmap-items li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}

.bf-roadmap-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.2);
    border: 1px solid rgba(148, 163, 184, 0.3);
    flex-shrink: 0;
}

.bf-roadmap-dot-progress {
    background: #f59e0b;
    border-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
    animation: pulse 2s ease-in-out infinite;
}

.bf-roadmap-eta {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: #475569;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

/* ---------- FEATURED CARD (SPANS FULL WIDTH) ---------- */
.tm-card-featured {
    grid-column: 1 / -1;
    padding: 2rem;
    background: 
        radial-gradient(ellipse at top left, rgba(124, 92, 255, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
        rgba(12, 12, 28, 0.75);
    border: 1px solid rgba(124, 92, 255, 0.15);
    position: relative;
}

.tm-card-featured::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(124, 92, 255, 0.5) 20%,
        rgba(168, 85, 247, 0.5) 50%,
        rgba(6, 182, 212, 0.5) 80%,
        transparent 100%);
}

@media (min-width: 1024px) {
    .tm-card-featured {
        padding: 2.5rem;
    }
}

.tm-featured-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

@media (min-width: 900px) {
    .tm-featured-inner {
        grid-template-columns: 1.4fr 1fr;
        gap: 3rem;
    }
}

.tm-featured-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    z-index: 2;
}

.tm-quote-mark {
    opacity: 0.5;
    margin-bottom: -0.5rem;
}

/* Stars */
.tm-stars {
    display: flex;
    gap: 2px;
    color: #fcd34d;
}

.tm-stars-lg {
    color: #fcd34d;
}

.tm-stars-lg i {
    filter: drop-shadow(0 0 4px rgba(252, 211, 77, 0.4));
}

/* Featured quote */
.tm-featured-quote {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.55;
    color: #e2e8f0;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.tm-highlight {
    background: linear-gradient(120deg, rgba(124, 92, 255, 0.25), rgba(168, 85, 247, 0.25));
    padding: 0.05em 0.35em;
    border-radius: 0.375rem;
    color: #ffffff;
    font-weight: 700;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.tm-highlight-sm {
    color: #c084fc;
    font-weight: 700;
}

/* Featured metrics */
.tm-featured-metrics {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: rgba(5, 5, 16, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 0.875rem;
    flex-wrap: wrap;
}

.tm-metric {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.tm-metric-value {
    font-size: 1.125rem;
    font-weight: 800;
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #7c5cff, #c084fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tm-metric-label {
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tm-metric-divider {
    width: 1px;
    height: 32px;
    background: rgba(148, 163, 184, 0.15);
    flex-shrink: 0;
}

/* Regular quote */
.tm-quote {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #cbd5e1;
    margin: 0;
    flex: 1;
    font-weight: 400;
    letter-spacing: -0.005em;
}

/* Metric pill (for smaller cards) */
.tm-metric-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    background: rgba(124, 92, 255, 0.1);
    border: 1px solid rgba(124, 92, 255, 0.2);
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #a5a8ff;
    font-family: 'JetBrains Mono', monospace;
    align-self: flex-start;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tm-metric-pill-green {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.tm-metric-pill-violet {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
}

.tm-metric-pill-cyan {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
}

/* ---------- AUTHOR ---------- */
.tm-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.tm-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--av-from, #7c5cff), var(--av-to, #a855f7));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4),
                0 0 0 2px rgba(255, 255, 255, 0.05) inset;
    position: relative;
}

.tm-avatar-lg {
    width: 52px;
    height: 52px;
    font-size: 1rem;
}

.tm-avatar::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--av-from, #7c5cff), var(--av-to, #a855f7));
    z-index: -1;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s ease;
}

.tm-card:hover .tm-avatar::after {
    opacity: 0.4;
}

.tm-author-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    overflow: hidden;
}

.tm-author-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.tm-author-role {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

.tm-author-company {
    display: flex;
    margin-top: 0.35rem;
}

.tm-company-badge {
    font-size: 0.65rem;
    font-family: 'JetBrains Mono', monospace;
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-weight: 700;
}

/* ---------- FEATURED VIDEO ---------- */
.tm-featured-video {
    position: relative;
    z-index: 2;
}

.tm-video-wrap {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease;
}

.tm-video-wrap:hover {
    transform: scale(1.02);
}

.tm-video-thumb {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a1a35 0%, #12122a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tm-video-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 30% 30%, rgba(124, 92, 255, 0.35) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(168, 85, 247, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.15) 0%, transparent 60%);
}

.tm-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
}

/* Fake person silhouette */
.tm-video-person {
    position: absolute;
    bottom: 15%;
    left: 15%;
    z-index: 1;
    filter: blur(2px);
    opacity: 0.6;
}

.tm-video-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: white;
    box-shadow: 0 0 40px rgba(124, 92, 255, 0.6);
}

/* Play button */
.tm-video-play {
    position: relative;
    z-index: 2;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tm-video-play-ring {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    animation: video-ring-pulse 2.5s ease-in-out infinite;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@keyframes video-ring-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.tm-video-play-btn {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c5cff;
    box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s ease;
}

.tm-video-play:hover .tm-video-play-btn {
    transform: scale(1.1);
    background: #ffffff;
}

/* Duration */
.tm-video-duration {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0.25rem 0.55rem;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    color: white;
    font-weight: 600;
    z-index: 3;
    backdrop-filter: blur(4px);
}

/* Caption bar */
.tm-video-caption {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 0.5rem;
    font-size: 0.7rem;
    color: white;
    font-weight: 600;
    z-index: 3;
    backdrop-filter: blur(8px);
}

/* ---------- LOGO MARQUEE ---------- */
.tm-marquee-wrap {
    padding-top: 2rem;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
}

.tm-marquee-label {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 0.75rem;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'JetBrains Mono', monospace;
}

.tm-marquee {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%);
    mask-image: linear-gradient(90deg,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%);
}

.tm-marquee-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: marquee-scroll 40s linear infinite;
    will-change: transform;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Pause on hover */
.tm-marquee:hover .tm-marquee-track {
    animation-play-state: paused;
}

/* Pause during scroll (perf) */
body.is-scrolling .tm-marquee-track {
    animation-play-state: paused;
}

.tm-logo-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1.1rem;
    background: rgba(12, 12, 28, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: -0.01em;
    flex-shrink: 0;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tm-logo-item:hover {
    border-color: rgba(124, 92, 255, 0.3);
    color: white;
    background: rgba(124, 92, 255, 0.08);
}

.tm-logo-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3);
}

/* Star fill trick for lucide */
.tm-stars i,
.tm-rating-stars i,
.tm-stars-lg i {
    fill: currentColor;
    stroke: currentColor;
}

/* ============================================
   PRICING STYLES
   ============================================ */

.pr-section {
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.pr-blob-1 {
    position: absolute;
    width: 600px;
    height: 600px;
    top: 10%;
    left: -200px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.06) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.pr-blob-2 {
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: 10%;
    right: -150px;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.08) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.pr-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

/* ---------- HEADER ---------- */
.pr-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.pr-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

.pr-subtitle {
    font-size: 1.0625rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* ---------- BILLING TOGGLE ---------- */
.pr-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem;
    background: rgba(12, 12, 28, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 9999px;
    position: relative;
    margin-top: 0.5rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pr-toggle-option {
    position: relative;
    z-index: 2;
    padding: 0.6rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.pr-toggle-option:hover {
    color: #cbd5e1;
}

.pr-toggle-option.pr-toggle-active {
    color: #ffffff;
}

.pr-toggle-save {
    font-size: 0.65rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px -1px rgba(16, 185, 129, 0.4);
}

.pr-toggle-slider {
    position: absolute;
    top: 0.375rem;
    left: 0.375rem;
    height: calc(100% - 0.75rem);
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.2), rgba(124, 92, 255, 0.15));
    border: 1px solid rgba(124, 92, 255, 0.3);
    border-radius: 9999px;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 20px rgba(124, 92, 255, 0.2);
    will-change: transform, width;
}

/* ---------- PRICING GRID ---------- */
.pr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
    align-items: stretch;
    padding-top: 1rem; /* Room for floating badge */
}

@media (min-width: 768px) {
    .pr-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

/* ---------- BASE CARD ---------- */
.pr-card {
    position: relative;
    border-radius: 1.5rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    transform: translateZ(0);
    /* Explicitly allow badge to overflow */
    overflow: visible;
}

.pr-card:hover {
    transform: translateY(-6px);
}

.pr-card-inner {
    position: relative;
    background: rgba(12, 12, 28, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 1.5rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}

/* Subtle background pattern */
.pr-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: radial-gradient(ellipse at top, rgba(124, 92, 255, 0.06) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.pr-card:hover .pr-card-inner::before {
    opacity: 1;
}

/* ---------- POPULAR CARD (Middle) ---------- */
.pr-card-popular {
    /* Slight visual boost */
}

@media (min-width: 768px) {
    .pr-card-popular {
        transform: scale(1.03);
    }

    .pr-card-popular:hover {
        transform: scale(1.03) translateY(-6px);
    }
}

.pr-card-popular .pr-card-inner {
    background:
        radial-gradient(ellipse at top, rgba(124, 92, 255, 0.15) 0%, transparent 60%),
        rgba(12, 12, 28, 0.85);
    border-color: rgba(124, 92, 255, 0.3);
    box-shadow:
        0 20px 60px -20px rgba(124, 92, 255, 0.3),
        0 0 60px -10px rgba(124, 92, 255, 0.2);
}

/* Rotating gradient border on popular */
.pr-popular-border {
    position: absolute;
    inset: -1px;
    border-radius: 1.5rem;
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0deg,
        rgba(124, 92, 255, 0.6) 90deg,
        rgba(168, 85, 247, 0.6) 180deg,
        rgba(6, 182, 212, 0.6) 270deg,
        transparent 360deg
    );
    animation: pr-border-rotate 6s linear infinite;
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
}

@keyframes pr-border-rotate {
    to { --angle: 360deg; }
}

/* Pause during scroll */
body.is-scrolling .pr-popular-border {
    animation-play-state: paused;
}

.pr-popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.95rem;
    background: linear-gradient(135deg, #7c5cff, #a855f7);
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 800;
    color: white;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 
        0 6px 20px -4px rgba(124, 92, 255, 0.6),
        0 0 0 3px rgba(5, 5, 16, 0.9),
        0 0 0 4px rgba(124, 92, 255, 0.3);
    z-index: 10;
    white-space: nowrap;
    pointer-events: none;
}

.pr-popular-badge i {
    animation: sparkle-bounce 2s ease-in-out infinite;
}

/* Pause during scroll */
body.is-scrolling .pr-popular-badge i {
    animation-play-state: paused;
}

@keyframes sparkle-bounce {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(15deg) scale(1.15); }
}

/* ---------- CARD HEADER ---------- */
.pr-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    position: relative;
    z-index: 2;
}

.pr-plan-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.75rem;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.pr-card:hover .pr-plan-icon {
    transform: rotate(-8deg) scale(1.05);
}

.pr-plan-icon-popular {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.2), rgba(168, 85, 247, 0.2));
    border-color: rgba(124, 92, 255, 0.3);
    color: #c4b5fd;
    box-shadow: 0 0 20px rgba(124, 92, 255, 0.2);
}

.pr-plan-icon-enterprise {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.25);
    color: #67e8f9;
}

.pr-plan-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.pr-plan-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}

.pr-plan-tagline {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
    font-weight: 500;
}

/* ---------- PRICE ---------- */
.pr-price-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
    z-index: 2;
}

.pr-price {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
    color: #ffffff;
    line-height: 1;
}

.pr-price-currency {
    font-size: 1.75rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: -0.03em;
    margin-right: 0.05rem;
}

.pr-price-value {
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #ffffff, #cbd5e1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: opacity 0.3s ease;
}

.pr-card-popular .pr-price-value {
    background: linear-gradient(135deg, #ffffff, #c4b5fd);
    -webkit-background-clip: text;
    background-clip: text;
}

.pr-price-period {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
    margin-left: 0.25rem;
}

.pr-price-custom {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #67e8f9, #06b6d4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pr-price-note {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 20px;
}

.pr-price-note-popular {
    color: #94a3b8;
}

.pr-price-strike {
    color: #64748b;
}

.pr-price-savings {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #10b981;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

.pr-price-annual-note {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #10b981;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

.pr-price-annual-note strong {
    color: #6ee7b7;
    font-weight: 800;
}

.pr-price-annual-note i {
    color: #10b981;
}

/* Price value smaller for larger numbers */
.pr-price-value {
    /* Adjust for Indian pricing which is longer */
    font-size: clamp(2.5rem, 5vw, 3.25rem);
}

/* ---------- CTAs ---------- */
.pr-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.pr-cta-secondary {
    background: rgba(148, 163, 184, 0.06);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.pr-cta-secondary:hover {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.3);
    color: white;
    transform: translateY(-1px);
}

.pr-cta-primary {
    background: linear-gradient(135deg, #7c5cff, #6d3fff);
    color: white;
    border: 1px solid rgba(124, 92, 255, 0.4);
    box-shadow: 
        0 8px 24px -6px rgba(124, 92, 255, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.pr-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 12px 32px -6px rgba(124, 92, 255, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.pr-cta i {
    transition: transform 0.3s ease;
}

.pr-cta:hover i {
    transform: translateX(4px);
}

/* ---------- DIVIDER ---------- */
.pr-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.7rem;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', monospace;
    position: relative;
    z-index: 2;
}

.pr-divider::before,
.pr-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(148, 163, 184, 0.08);
}

/* ---------- FEATURES ---------- */
.pr-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    position: relative;
    z-index: 2;
    flex: 1;
}

.pr-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: #cbd5e1;
    line-height: 1.5;
    font-weight: 500;
}

.pr-features li strong {
    color: #ffffff;
    font-weight: 700;
}

.pr-feature-off {
    opacity: 0.4;
}

.pr-feature-highlight {
    color: #ffffff;
}

.pr-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.pr-check-popular {
    background: rgba(124, 92, 255, 0.18);
    border-color: rgba(124, 92, 255, 0.35);
    color: #c4b5fd;
}

.pr-check-enterprise {
    background: rgba(6, 182, 212, 0.15);
    border-color: rgba(6, 182, 212, 0.3);
    color: #67e8f9;
}

.pr-check-off {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ---------- TRUST ROW ---------- */
.pr-trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    background: rgba(12, 12, 28, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 1.25rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pr-trust-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.pr-trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.08);
    flex-shrink: 0;
}

.pr-trust-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.pr-trust-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

.pr-trust-desc {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 500;
}

.pr-trust-divider {
    width: 1px;
    height: 36px;
    background: rgba(148, 163, 184, 0.1);
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .pr-trust-divider { display: none; }
}

/* ---------- VOLUME CARD ---------- */
.pr-volume-card {
    max-width: 900px;
    margin: 0 auto;
    padding: 1px;
    border-radius: 1.25rem;
    background: linear-gradient(135deg,
        rgba(124, 92, 255, 0.3),
        rgba(6, 182, 212, 0.3),
        rgba(168, 85, 247, 0.3));
    position: relative;
    overflow: hidden;
}

.pr-volume-inner {
    background: rgba(12, 12, 28, 0.95);
    border-radius: 1.25rem;
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .pr-volume-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        gap: 2rem;
    }
}

.pr-volume-content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
}

.pr-volume-icon {
    width: 52px;
    height: 52px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.2), rgba(6, 182, 212, 0.15));
    border: 1px solid rgba(124, 92, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4b5fd;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(124, 92, 255, 0.15);
}

.pr-volume-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pr-volume-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.3;
}

.pr-volume-desc {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
}

.pr-volume-desc strong {
    color: #10b981;
    font-weight: 800;
}

.pr-volume-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(124, 92, 255, 0.15);
    border: 1px solid rgba(124, 92, 255, 0.3);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #c4b5fd;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.pr-volume-btn:hover {
    background: rgba(124, 92, 255, 0.25);
    border-color: rgba(124, 92, 255, 0.5);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(124, 92, 255, 0.4);
}

.pr-volume-btn i {
    transition: transform 0.3s ease;
}

.pr-volume-btn:hover i {
    transform: translateX(4px);
}

/* ============================================
   FAQ STYLES
   ============================================ */

.faq-section {
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.faq-blob-1 {
    position: absolute;
    width: 500px;
    height: 500px;
    top: 20%;
    right: -150px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.06) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.faq-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

.faq-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .faq-inner {
        grid-template-columns: 380px 1fr;
        gap: 4rem;
        align-items: start;
    }
}

/* Header (left column) */
.faq-header {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 120px;
}

@media (max-width: 1023px) {
    .faq-header {
        position: static;
        text-align: center;
        align-items: center;
    }
}

.faq-title {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

.faq-subtitle {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* Support card */
.faq-support {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    background: rgba(12, 12, 28, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 1rem;
    margin-top: 0.75rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.faq-support-avatars {
    display: flex;
    flex-shrink: 0;
}

.faq-support-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    border: 2px solid #050510;
    margin-left: -8px;
}

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

.faq-support-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.faq-support-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #ffffff;
}

.faq-support-desc {
    font-size: 0.7rem;
    color: #64748b;
}

.faq-support-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.75rem;
    background: rgba(124, 92, 255, 0.15);
    border: 1px solid rgba(124, 92, 255, 0.3);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #c4b5fd;
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.faq-support-btn:hover {
    background: rgba(124, 92, 255, 0.25);
    color: white;
    transform: translateX(2px);
}

/* FAQ List (right column) */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    background: rgba(12, 12, 28, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 0.875rem;
    overflow: hidden;
    transition: border-color 0.3s ease, background 0.3s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.faq-item:hover {
    border-color: rgba(148, 163, 184, 0.15);
}

.faq-item.faq-open {
    background: rgba(124, 92, 255, 0.04);
    border-color: rgba(124, 92, 255, 0.2);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: #ffffff;
    transition: color 0.2s ease;
    font-family: inherit;
}

.faq-question:hover .faq-q-text {
    color: #ffffff;
}

.faq-q-text {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #cbd5e1;
    letter-spacing: -0.01em;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.faq-open .faq-q-text {
    color: #ffffff;
}

.faq-q-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-open .faq-q-icon {
    background: rgba(124, 92, 255, 0.2);
    border-color: rgba(124, 92, 255, 0.4);
    color: #c4b5fd;
    transform: rotate(45deg);
}

/* Answer - collapsed by default */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-open .faq-answer {
    max-height: 500px;
}

.faq-answer-inner {
    padding: 0 1.5rem 1.5rem;
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.75;
}

.faq-answer-inner p {
    margin: 0;
}

.faq-answer-inner strong {
    color: #ffffff;
    font-weight: 700;
}

/* ============================================
   FINAL CTA STYLES
   ============================================ */

.cta-section {
    position: relative;
    padding: 5rem 0 6rem;
    overflow: hidden;
    z-index: 10;
}

.cta-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(circle,
        rgba(124, 92, 255, 0.15) 0%,
        rgba(168, 85, 247, 0.08) 30%,
        transparent 60%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

/* Grid pattern */
.cta-grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(124, 92, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 92, 255, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

.cta-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

.cta-card {
    position: relative;
    background: 
        radial-gradient(ellipse at top, rgba(124, 92, 255, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
        rgba(10, 10, 26, 0.85);
    border: 1px solid rgba(124, 92, 255, 0.2);
    border-radius: 2rem;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.cta-topline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(124, 92, 255, 0.8) 20%,
        rgba(168, 85, 247, 0.8) 50%,
        rgba(6, 182, 212, 0.8) 80%,
        transparent 100%);
    z-index: 3;
}

.cta-corner-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.cta-corner-tl {
    top: -150px;
    left: -100px;
    background: radial-gradient(circle, rgba(124, 92, 255, 0.4), transparent 70%);
}

.cta-corner-br {
    bottom: -150px;
    right: -100px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.3), transparent 70%);
}

/* Floating particles */
.cta-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(124, 92, 255, 0.6);
    box-shadow: 0 0 12px rgba(124, 92, 255, 0.8);
    pointer-events: none;
    animation: cta-float 6s ease-in-out infinite;
}

.cta-particle-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.cta-particle-2 {
    top: 65%;
    right: 15%;
    background: rgba(6, 182, 212, 0.6);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.8);
    animation-delay: 1.5s;
}

.cta-particle-3 {
    top: 40%;
    right: 25%;
    background: rgba(168, 85, 247, 0.6);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.8);
    animation-delay: 3s;
    width: 4px;
    height: 4px;
}

@keyframes cta-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { transform: translateY(-20px) scale(1.2); opacity: 1; }
}

/* Pause during scroll */
body.is-scrolling .cta-particle {
    animation-play-state: paused;
}

.cta-inner {
    position: relative;
    z-index: 2;
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .cta-inner {
        padding: 5rem 3rem;
    }
}

.cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6ee7b7;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cta-title {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 0;
    max-width: 800px;
}

.cta-title-brand {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.03em;
}

.cta-title-break {
    display: none;
}

@media (max-width: 640px) {
    .cta-title-break {
        display: inline;
    }
}

.cta-desc {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
    max-width: 540px;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 9999px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    white-space: nowrap;
}

.cta-btn-primary {
    background: linear-gradient(135deg, #7c5cff, #6d3fff);
    color: white;
    box-shadow: 
        0 12px 32px -6px rgba(124, 92, 255, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.cta-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 16px 40px -6px rgba(124, 92, 255, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.cta-btn-primary::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, #7c5cff, #a855f7, #06b6d4);
    z-index: -1;
    opacity: 0;
    filter: blur(14px);
    transition: opacity 0.3s ease;
}

.cta-btn-primary:hover::before {
    opacity: 0.7;
}

.cta-btn-arrow {
    transition: transform 0.3s ease;
}

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

.cta-btn-secondary {
    background: rgba(148, 163, 184, 0.08);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(12px);
}

.cta-btn-secondary:hover {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.35);
    color: white;
    transform: translateY(-2px);
}

/* Trust row */
.cta-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.cta-trust-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: #64748b;
    font-weight: 500;
}

.cta-trust-item i {
    color: #10b981;
    flex-shrink: 0;
}

.cta-trust-divider {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.3);
}

@media (max-width: 640px) {
    .cta-trust-divider { display: none; }
}

/* ============================================
   FOOTER STYLES
   ============================================ */

.ft-section {
    position: relative;
    background: linear-gradient(180deg, transparent 0%, rgba(5, 5, 16, 0.6) 100%);
    border-top: 1px solid rgba(148, 163, 184, 0.06);
    padding: 4rem 0 2rem;
    z-index: 10;
    overflow: hidden;
}

.ft-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

/* ---------- TOP GRID ---------- */
.ft-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

@media (min-width: 1024px) {
    .ft-top {
        grid-template-columns: 1.2fr 2fr;
        gap: 4rem;
    }
}

/* ---------- BRAND (LEFT) ---------- */
.ft-brand {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 360px;
}

.ft-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.ft-logo:hover {
    transform: scale(1.03);
}

.ft-logo-text {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.ft-tagline {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* Newsletter */
.ft-newsletter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.ft-newsletter-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'JetBrains Mono', monospace;
}

.ft-newsletter-label i {
    color: #7c5cff;
}

.ft-newsletter-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.4rem 0.35rem 0.9rem;
    background: rgba(12, 12, 28, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.ft-newsletter-form:focus-within {
    border-color: rgba(124, 92, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.1);
}

.ft-newsletter-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: #ffffff;
    font-family: inherit;
    min-width: 0;
}

.ft-newsletter-input::placeholder {
    color: #475569;
}

.ft-newsletter-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c5cff, #6d3fff);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px -2px rgba(124, 92, 255, 0.4);
}

.ft-newsletter-btn:hover {
    transform: translateX(2px);
    box-shadow: 0 6px 16px -2px rgba(124, 92, 255, 0.6);
}

.ft-newsletter-note {
    font-size: 0.7rem;
    color: #475569;
    margin: 0;
    font-weight: 500;
}

/* ---------- LINK COLUMNS ---------- */
.ft-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
}

@media (min-width: 640px) {
    .ft-links {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ft-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ft-col-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
}

.ft-col-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ft-col-list a {
    font-size: 0.875rem;
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
}

.ft-col-list a:hover {
    color: #ffffff;
}

.ft-badge-soon {
    font-size: 0.55rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    padding: 0.1rem 0.35rem;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ft-link-status {
    color: #6ee7b7 !important;
}

.ft-link-status:hover {
    color: #10b981 !important;
}

/* ---------- BOTTOM BAR ---------- */
.ft-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding-top: 2rem;
}

@media (min-width: 900px) {
    .ft-bottom {
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
    }
}

.ft-copyright {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #475569;
    font-weight: 500;
    text-align: center;
}

.ft-copy-divider {
    color: #334155;
}

.ft-made-with {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ft-made-with i {
    animation: heart-beat 1.5s ease-in-out infinite;
}

@keyframes heart-beat {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.15); }
    50% { transform: scale(1); }
}

body.is-scrolling .ft-made-with i {
    animation-play-state: paused;
}

/* Socials */
.ft-socials {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ft-social {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ft-social:hover {
    background: rgba(124, 92, 255, 0.15);
    border-color: rgba(124, 92, 255, 0.3);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Status */
.ft-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 9999px;
    font-size: 0.7rem;
    color: #6ee7b7;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ---------- HUGE DECORATIVE BRAND ---------- */
/* .ft-huge-brand {
    font-size: clamp(120px, 22vw, 320px);
    font-weight: 900;
    line-height: 0.85;
    text-align: center;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.06);   /* was probably like 0.02 — bump it */
    /* margin-top: 40px;
    user-select: none;
    pointer-events: none; */
} */
/* .ft-huge-brand-accent {
    color: rgba(168, 85, 247, 0.18);    /* purple hint on the "IN" */
} */