/* ═══════════════════════════════════════════════════
   FusionAuth Custom Theme — Main Stylesheet
   Dark identity platform theme
═══════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   CSS Custom Properties (Design Tokens)
────────────────────────────────────────────── */
:root {
    /* Colors */
    --color-bg:          #08080f;
    --color-bg-alt:      #0a0a16;
    --color-bg-card:     #0e0e1c;
    --color-bg-card-2:   #12122a;
    --color-border:      rgba(255,255,255,.08);
    --color-border-hover:rgba(255,255,255,.18);

    --color-primary:     #FF6B35;
    --color-primary-dark:#E8551F;
    --color-primary-glow:rgba(255,107,53,.25);

    --color-accent-purple:#8B5CF6;
    --color-accent-blue:  #06B6D4;
    --color-accent-green: #10B981;
    --color-accent-pink:  #EC4899;

    --color-text:        #F1F1F5;
    --color-text-muted:  #9CA3AF;
    --color-text-faint:  #6B7280;

    /* Typography */
    --font-body:   'Inter', system-ui, -apple-system, sans-serif;
    --font-display:'Space Grotesk', 'Inter', sans-serif;

    --text-xs:   .75rem;
    --text-sm:   .875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;
    --text-7xl:  4.5rem;

    /* Spacing */
    --space-1:  .25rem;
    --space-2:  .5rem;
    --space-3:  .75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Radius */
    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-xl:  28px;
    --radius-full:9999px;

    /* Shadows */
    --shadow-card: 0 2px 20px rgba(0,0,0,.4);
    --shadow-glow: 0 0 40px rgba(255,107,53,.15);

    /* Transitions */
    --transition: 250ms cubic-bezier(.4,0,.2,1);
    --transition-slow: 500ms cubic-bezier(.4,0,.2,1);
}

/* ──────────────────────────────────────────────
   Reset & Base
────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-bg);
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary); }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }

/* ──────────────────────────────────────────────
   Typography
────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}
h1 { font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl)); }
h2 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p  { color: var(--color-text-muted); }

em { font-style: normal; color: var(--color-primary); }

/* ──────────────────────────────────────────────
   Layout Utilities
────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-6);
}
.section-pad     { padding-block: var(--space-20); }
.text-center     { text-align: center; }
.mt-2            { margin-top: var(--space-8); }
.mt-3            { margin-top: var(--space-12); }
.bg-dark-alt     { background: var(--color-bg-alt); }

/* ──────────────────────────────────────────────
   Section Headers
────────────────────────────────────────────── */
.section-header   { margin-bottom: var(--space-12); }
.section-title    { margin-bottom: var(--space-4); }
.section-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 640px;
    margin-inline: auto;
}

/* ──────────────────────────────────────────────
   Buttons
────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-sm);
    letter-spacing: .02em;
    border-radius: var(--radius-full);
    padding: .625rem 1.375rem;
    transition: all var(--transition);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.08);
    opacity: 0;
    transition: opacity var(--transition);
}
.btn:hover::before { opacity: 1; }
.btn:active { transform: scale(.97); }

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    box-shadow: 0 4px 20px var(--color-primary-glow);
}
.btn-primary:hover {
    color: #fff;
    box-shadow: 0 6px 30px rgba(255,107,53,.45);
    transform: translateY(-1px);
}

.btn-ghost {
    background: rgba(255,255,255,.07);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn-ghost:hover {
    background: rgba(255,255,255,.12);
    border-color: var(--color-border-hover);
    color: var(--color-text);
}

.btn-outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-sm  { padding: .4rem 1rem; font-size: var(--text-sm); }
.btn-lg  { padding: .875rem 2rem; font-size: var(--text-base); }

.btn-mini {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
}

/* Pulse animation for primary CTA */
.pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: var(--color-primary);
    opacity: 0;
    animation: pulse-ring 2s ease-out infinite;
    z-index: -1;
}
@keyframes pulse-ring {
    0%   { transform: scale(.95); opacity: .4; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* ──────────────────────────────────────────────
   HEADER / NAV
────────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding-block: 1rem;
    background: #0f172a;
    transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}
.site-header.scrolled {
    background: rgba(15,23,42,.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 var(--color-border);
    padding-block: .625rem;
}

.nav-container {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    position: relative;
}

/* Logo */
.site-logo { flex-shrink: 0; }
.logo-text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-xl);
    color: var(--color-text);
}

/* Nav menu */
.primary-nav { flex: 1; }
.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.nav-menu li { position: relative; }
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: .5rem .875rem;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
}
.nav-link:hover, .nav-link.active {
    color: var(--color-text);
    background: rgba(255,255,255,.06);
}

.dropdown-arrow { transition: transform var(--transition); }
.nav-menu li:hover .dropdown-arrow { transform: rotate(180deg); }

/* Dropdown */
.nav-menu li:hover > ul,
.nav-menu li:focus-within > ul {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.nav-menu li > ul {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--color-bg-card-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    min-width: 180px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: all var(--transition);
    box-shadow: var(--shadow-card);
}
.nav-menu li > ul li a {
    display: block;
    padding: .5rem .875rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.nav-menu li > ul li a:hover { color: var(--color-text); background: rgba(255,255,255,.06); }

/* Nav CTA */
.nav-cta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex-shrink: 0;
}

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    margin-left: auto;
}
.hamburger span {
    display: block;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: all var(--transition);
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ──────────────────────────────────────────────
   HERO SECTION
────────────────────────────────────────────── */
.hero-section {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-top: 88px;
    overflow: hidden;
    background-image:
        radial-gradient(ellipse 22% 35% at 100% 40.88%, rgba(193,162,255,.30) 0%, rgba(130,70,255,.05) 54.49%, rgba(15,23,42,.00) 100%),
        radial-gradient(ellipse 100.26% 44.85% at 77% 35.55%, rgba(217,70,239,.40) 0%, rgba(192,38,211,.16) 49.88%, rgba(15,23,42,.01) 100%),
        radial-gradient(ellipse 66.43% 68.53% at 0% 8.48%, rgba(245,131,32,.24) 0%, rgba(112,26,117,.08) 58.52%, rgba(27,33,64,.00) 100%),
        linear-gradient(202deg, #3730A3 0%, #0F172A 44.64%, #0F172A 100%);
}

/* Background blobs */
.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .65;
}
/* Left blob: warm reddish-brown glow matching image left */
.blob-1 {
    width: 1000px; height: 1000px;
    background: radial-gradient(circle, rgba(160,45,55,.70) 0%, rgba(110,25,35,.45) 40%, transparent 68%);
    bottom: -300px; left: -300px;
    animation: blob-float 8s ease-in-out infinite;
}
/* Right upper blob: bright blue-purple glow matching image right */
.blob-2 {
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(75,55,200,.60) 0%, rgba(50,38,160,.35) 45%, transparent 70%);
    top: -220px; right: -220px;
    animation: blob-float 11s ease-in-out infinite reverse;
}
/* Center accent: neutral purple bridge */
.blob-3 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(90,40,140,.22) 0%, transparent 65%);
    top: 28%; left: 38%;
    animation: blob-float 14s ease-in-out infinite 2s;
}
@keyframes blob-float {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(20px,-20px) scale(1.05); }
    66%      { transform: translate(-15px,15px) scale(.96); }
}

/* Grid overlay — hidden for clean gradient hero */
.grid-overlay { display: none; }

/* Hero layout */
.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-12);
    position: relative;
    z-index: 1;
    padding-block: var(--space-16);
}

/* Hero content */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,107,53,.1);
    border: 1px solid rgba(255,107,53,.25);
    border-radius: var(--radius-full);
    padding: .375rem 1rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: var(--space-6);
}
.badge-dot {
    width: 6px; height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(.8); }
}

.hero-title {
    margin-bottom: var(--space-6);
    letter-spacing: -.03em;
}

.hero-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 480px;
    margin-bottom: var(--space-8);
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-12);
}

/* Hero stats */
.hero-stats {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}
.stat { text-align: center; }
.stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text);
}
.stat span { font-size: var(--text-xs); color: var(--color-text-faint); }
.stat-divider { width: 1px; height: 36px; background: var(--color-border); }

/* ──────────────────────────────────────────────
   ORBITAL GRAPHIC
────────────────────────────────────────────── */
.hero-graphic { display: flex; align-items: center; justify-content: center; }

/* Rotating pattern SVG */
.rotating-pattern {
    width: 560px;
    height: 560px;
    max-width: 100%;
    animation: pattern-spin 30s linear infinite;
    filter: drop-shadow(0 0 40px rgba(120, 60, 220, 0.35));
}
@keyframes pattern-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.orbital-wrap {
    position: relative;
    width: 480px; height: 480px;
}

.orbital-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.core-inner {
    animation: core-rotate 20s linear infinite;
}
@keyframes core-rotate { to { transform: rotate(360deg); } }

/* Orbit rings */
.orbit {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    border-width: 1px;
    border-style: dashed;
    transform: translate(-50%,-50%);
}
.orbit-1 { width: 140px; height: 140px; border-color: rgba(255,107,53,.35);  animation: orbit-spin  8s linear infinite; }
.orbit-2 { width: 230px; height: 230px; border-color: rgba(139,92,246,.25);  animation: orbit-spin 14s linear infinite reverse; }
.orbit-3 { width: 320px; height: 320px; border-color: rgba(6,182,212,.2);    animation: orbit-spin 20s linear infinite; }
.orbit-4 { width: 420px; height: 420px; border-color: rgba(255,255,255,.1);  animation: orbit-spin 28s linear infinite reverse; }

@keyframes orbit-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Orbit dots */
.orbit-dot {
    position: absolute;
    top: -5px; left: 50%;
    width: 10px; height: 10px;
    border-radius: 50%;
    transform: translateX(-50%);
}
.dot-orange  { background: var(--color-primary); box-shadow: 0 0 10px var(--color-primary); }
.dot-purple  { background: var(--color-accent-purple); box-shadow: 0 0 10px var(--color-accent-purple); top: -5px; left: 50%; }
.dot-purple-2{ background: var(--color-accent-purple); opacity: .6; top: auto; bottom: -5px; left: 50%; }
.dot-blue    { background: var(--color-accent-blue); box-shadow: 0 0 10px var(--color-accent-blue); }
.dot-pink    { background: var(--color-accent-pink); box-shadow: 0 0 10px var(--color-accent-pink); }
.dot-pink-2  { background: var(--color-accent-pink); opacity: .6; top: auto; bottom: -5px; left: 50%; }

/* Floating chips */
.floating-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(22,22,42,.9);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text);
    backdrop-filter: blur(8px);
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    animation: chip-float 4s ease-in-out infinite;
}
.chip-1 { top: 10%;  left: 5%;  animation-delay: 0s; }
.chip-2 { top: 15%;  right: 0%; animation-delay: 1s; }
.chip-3 { bottom: 20%; left: 2%; animation-delay: 2s; }
.chip-4 { bottom: 15%; right: 2%; animation-delay: .5s; }
@keyframes chip-float {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: var(--space-8); left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    animation: scroll-bounce 2s ease-in-out infinite;
}
.scroll-mouse {
    width: 24px; height: 38px;
    border: 2px solid rgba(255,255,255,.25);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}
.scroll-wheel {
    width: 3px; height: 8px;
    background: var(--color-primary);
    border-radius: 2px;
    animation: scroll-wheel 1.5s ease-in-out infinite;
}
@keyframes scroll-wheel { 0%,100% {opacity:1;transform:translateY(0)} 50%{opacity:.3;transform:translateY(6px)} }
@keyframes scroll-bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ──────────────────────────────────────────────
   FEATURES GRID (Identity Your Way)
────────────────────────────────────────────── */

/* Fingerprint background wrapper: identity-way → bottleneck */
.fingerprint-bg-wrap {
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Section background */
.identity-way-section {
    position: relative;
    overflow: hidden;
    background: #0F172A;
}
.identity-way-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 70% at 92% 55%, rgba(80,20,160,.28) 0%, transparent 65%),
        radial-gradient(ellipse 35% 50% at 100% 0%, rgba(150,60,10,.14) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}
.identity-way-section > * { position: relative; z-index: 1; }

.bottleneck-section {
    background: #0F172A;
}

.built-section {
    background: #0F172A !important;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.feature-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(4px);
}
.feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(99,102,241,.08) 0%, rgba(109,40,217,.18) 100%);
    pointer-events: none;
}
.feature-card:nth-child(2)::after {
    background: linear-gradient(160deg, rgba(180,60,10,.08) 0%, rgba(245,131,32,.15) 100%);
}
.feature-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    opacity: 0;
    transition: opacity var(--transition);
}
.feature-card:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.feature-card:hover::before { opacity: 1; }

.card-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-4);
    position: relative;
    z-index: 1;
}
.icon-orange { background: rgba(255,107,53,.15); color: var(--color-primary); }
.icon-purple { background: rgba(139,92,246,.15); color: var(--color-accent-purple); }
.icon-green  { background: rgba(16,185,129,.15); color: var(--color-accent-green); }
.icon-blue   { background: rgba(6,182,212,.15);  color: var(--color-accent-blue); }

.feature-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); position: relative; z-index: 1; }
.feature-card p  { font-size: var(--text-sm); margin-bottom: var(--space-6); position: relative; z-index: 1; }

/* Card Previews */
.card-preview {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-top: var(--space-4);
    position: relative;
    z-index: 1;
}

/* Code preview */
.code-bar {
    display: flex; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.code-dot {
    width: 10px; height: 10px; border-radius: 50%;
}
.code-dot.red    { background: #FF5F56; }
.code-dot.yellow { background: #FFBD2E; }
.code-dot.green  { background: #27C93F; }
.code-label { font-size: 11px; color: var(--color-text-faint); margin-left: auto; }

.endpoint-list { display: flex; flex-direction: column; gap: var(--space-2); }
.endpoint-list li { display: flex; align-items: center; gap: var(--space-3); font-size: 12px; }
.endpoint-list code { font-size: 11px; color: var(--color-text-muted); font-family: 'Courier New', monospace; }

.method {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    font-family: monospace;
    min-width: 36px;
    text-align: center;
}
.method.get  { background: rgba(16,185,129,.2); color: #10B981; }
.method.post { background: rgba(6,182,212,.2);  color: #06B6D4; }
.method.put  { background: rgba(255,187,0,.2);  color: #FFBB00; }
.method.del  { background: rgba(239,68,68,.2);  color: #EF4444; }

/* Users preview */
.users-table-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-3);
    font-size: var(--text-sm); font-weight: 600;
}
.users-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}
.users-row:last-child { border-bottom: none; }
.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.av-orange { background: rgba(255,107,53,.2); color: var(--color-primary); }
.av-purple { background: rgba(139,92,246,.2); color: var(--color-accent-purple); }
.av-blue   { background: rgba(6,182,212,.2);  color: var(--color-accent-blue); }
.av-green  { background: rgba(16,185,129,.2); color: var(--color-accent-green); }

.user-info { flex: 1; }
.user-info strong { display: block; font-size: 12px; font-weight: 600; }
.user-info small  { font-size: 11px; color: var(--color-text-faint); }

.badge {
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
}
.badge-active  { background: rgba(16,185,129,.15); color: #10B981; }
.badge-machine { background: rgba(6,182,212,.15);  color: #06B6D4; }

/* Pricing preview */
.pricing-items { display: flex; flex-direction: column; gap: var(--space-3); }
.pricing-item  { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Deploy preview */
.deploy-options { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.deploy-badge {
    padding: 4px 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: 11px;
}
.deploy-url {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(0,0,0,.3);
    border-radius: var(--radius-sm);
    font-size: 11px;
}
.deploy-url code { font-family: monospace; color: #10B981; font-size: 11px; }

/* ──────────────────────────────────────────────
   BOTTLENECK SECTION
────────────────────────────────────────────── */
.bottleneck-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}
.bottleneck-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), transform var(--transition);
}
.bottleneck-item:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
}
.bn-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
}
.bn-icon--green  { background: rgba(16,185,129,.15); color: var(--color-accent-green); }
.bn-icon--blue   { background: rgba(6,182,212,.15);  color: var(--color-accent-blue); }
.bn-icon--orange { background: rgba(255,107,53,.15); color: var(--color-primary); }
.bn-icon--purple { background: rgba(139,92,246,.15); color: var(--color-accent-purple); }

.bn-content h4 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.bn-content p  { font-size: var(--text-sm); }

.bottleneck-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    max-width: 700px;
    margin-inline: auto;
}
.benefit-list { display: flex; flex-direction: column; gap: var(--space-3); }
.benefit-list li {
    display: flex; align-items: center; gap: var(--space-3);
    font-size: var(--text-sm); color: var(--color-text-muted);
}

/* ──────────────────────────────────────────────
   BUILT FOR TEAMS
────────────────────────────────────────────── */
.built-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}

.built-list { display: flex; flex-direction: column; gap: 0; }
.built-list-item {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition);
    border-left: 3px solid transparent;
}
.built-list-item:hover { background: rgba(255,255,255,.04); }
.built-list-item.active {
    background: rgba(255,107,53,.07);
    border-left-color: var(--color-primary);
}
.built-list-item strong { display: block; font-size: var(--text-base); margin-bottom: var(--space-1); }
.built-list-item p  { font-size: var(--text-sm); }
.built-list-item svg { flex-shrink: 0; margin-top: 2px; }

/* Dashboard card */
.dashboard-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.dashboard-header {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background: rgba(255,255,255,.03);
}
.dashboard-title { font-size: var(--text-sm); font-weight: 600; }
.dashboard-body  { padding: var(--space-6); }

.support-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(255,255,255,.04);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm); font-weight: 500;
}
.support-orange { border-left: 3px solid var(--color-primary); }
.support-purple { border-left: 3px solid var(--color-accent-purple); }
.support-blue   { border-left: 3px solid var(--color-accent-blue); }

.dashboard-metrics {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: var(--space-3); margin-top: var(--space-4);
}
.metric {
    text-align: center;
    padding: var(--space-4);
    background: rgba(255,255,255,.03);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.metric-val  { display: block; font-size: var(--text-xl); font-weight: 700; color: var(--color-text); }
.metric-lbl  { font-size: 10px; color: var(--color-text-faint); }

/* ──────────────────────────────────────────────
   DOWNLOAD CTA SECTION
────────────────────────────────────────────── */
.download-cta-section {
    position: relative;
    padding-block: var(--space-20);
    overflow: hidden;
    background: linear-gradient(90deg,
        #9333ea  0%,
        #db2777 28%,
        #ea580c 62%,
        #d97706 100%
    );
}

/* Decorative concentric rings */
.download-cta-bg { position: absolute; inset: 0; pointer-events: none; }

.cta-ring {
    position: absolute;
    top: 50%;
    border-radius: 50%;
    transform: translateY(-50%);
    width: 420px;
    height: 420px;
    border: 1.5px solid rgba(255,255,255,.22);
    box-shadow:
        0 0 0 44px  rgba(255,255,255,.09),
        0 0 0 88px  rgba(255,255,255,.06),
        0 0 0 132px rgba(255,255,255,.04),
        0 0 0 176px rgba(255,255,255,.025);
}
.cta-ring-left  { left:  -240px; }
.cta-ring-right { right: -240px; }

.download-cta-inner {
    position: relative; z-index: 1;
    max-width: 660px;
    margin-inline: 0;
    padding-left: var(--space-4);
}
.download-cta-inner h2 {
    color: #fff;
    margin-bottom: var(--space-4);
}
.download-cta-inner p {
    font-size: var(--text-lg);
    color: rgba(255,255,255,.85);
    margin-bottom: var(--space-8);
}

/* Outlined white button for the CTA banner */
.btn-cta-outline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    padding: .75rem 1.75rem;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.btn-cta-outline:hover {
    background: #fff;
    color: #c2410c;
}

@keyframes download-pulse { 0%,100% {transform:scale(1)} 50%{transform:scale(1.08)} }

/* ──────────────────────────────────────────────
   TESTIMONIALS
────────────────────────────────────────────── */
.testimonials-section {
    position: relative;
    overflow: hidden;
    background: #0F172A;
}
.testimonials-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(20,30,80,.35) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.testimonials-section .container {
    position: relative;
    z-index: 1;
}
.testimonials-section .section-subtitle a,
.testimonials-section .section-subtitle strong {
    color: #6366f1;
}
.tc-highlight {
    color: #6366f1;
    font-weight: 600;
}
.testimonials-carousel { position: relative; overflow: hidden; }
.testimonial-track { display: flex; position: relative; }
.testimonial-card {
    display: none;
    max-width: 700px; margin-inline: auto;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-12);
    animation: fade-in-card .4s ease;
}
.testimonial-card.active { display: block; }
@keyframes fade-in-card { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

blockquote {
    font-size: var(--text-xl);
    font-style: normal;
    line-height: 1.75;
    color: var(--color-text);
    font-weight: 500;
    margin-block: var(--space-6);
}
.testimonial-author {
    display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    margin-top: var(--space-6);
}
.author-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff; font-weight: 700; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.author-info { flex: 1; }
.author-info strong { display: block; font-size: var(--text-sm); }
.author-title { font-size: var(--text-xs); color: var(--color-text-faint); }
.company-logo { margin-left: auto; filter: grayscale(1); opacity: .6; }

.testimonial-rating { display: flex; gap: 2px; margin-top: var(--space-4); color: var(--color-primary); }

/* Controls */
.testimonial-controls {
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-4); margin-top: var(--space-8);
}
.tc-prev, .tc-next {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
    transition: all var(--transition);
}
.tc-prev:hover, .tc-next:hover {
    background: rgba(255,255,255,.12);
    color: var(--color-text);
    border-color: var(--color-border-hover);
}
.tc-dots { display: flex; gap: var(--space-2); }
.tc-dot  {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-border);
    transition: all var(--transition);
}
.tc-dot.active {
    background: var(--color-primary);
    width: 24px;
    border-radius: 4px;
}

/* ──────────────────────────────────────────────
   LOGOS SECTION
────────────────────────────────────────────── */
.logos-section {
    position: relative;
    padding: 56px 0 64px;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.05);
    background: #0F172A;
}

/* top eyebrow row */
.logos-top-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
    padding: 0 var(--space-6);
}
.logos-eyebrow {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-primary);
    white-space: nowrap;
}
.logos-sub {
    font-size: 13px;
    color: rgba(255,255,255,.35);
    white-space: nowrap;
}
.logos-divider {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,.15);
    flex-shrink: 0;
}

/* ── Marquee ── */
.logos-marquee-wrap {
    position: relative;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    overflow: hidden;
}
.logos-marquee-track {
    display: flex;
    gap: 0;
    width: max-content;
    animation: logos-scroll 38s linear infinite;
}
.logos-marquee-wrap:hover .logos-marquee-track {
    animation-play-state: paused;
}

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

/* individual logo chip */
.logo-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 32px;
    border-right: 1px solid rgba(255,255,255,.07);
    color: rgba(255,255,255,.3);
    transition: color .25s;
    white-space: nowrap;
    flex-shrink: 0;
}
.logo-chip:last-child { border-right: none; }
.logo-chip:hover { color: rgba(255,255,255,.75); }

/* ── Stats row ── */
.logos-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 52px;
    padding: 0 var(--space-6);
    flex-wrap: wrap;
}
.logos-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px;
}
.logos-stat-sep {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.1);
    flex-shrink: 0;
}
.lstat-num {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
}
.lstat-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: .08em;
}

@media (max-width: 768px) {
    .logos-top-row      { flex-direction: column; gap: 6px; text-align: center; }
    .logos-divider      { display: none; }
    .logos-sub          { white-space: normal; text-align: center; }
    .logos-stats-row    { gap: 24px; }
    .logos-stat         { padding: 0 20px; }
    .logos-stat-sep     { display: none; }
    .lstat-num          { font-size: 22px; }
    .logo-chip          { padding: 10px 20px; }
}

/* ──────────────────────────────────────────────
   G2 / AWARDS SECTION
────────────────────────────────────────────── */
.g2-section {
    position: relative;
    overflow: hidden;
    background: #0F172A;
    border-top: 1px solid #312e81;
    border-bottom: 1px solid #312e81;
}
.g2-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 80% at 100% 50%, rgba(20,30,80,.3) 0%, transparent 65%),
        radial-gradient(ellipse 30% 50% at 0% 50%,  rgba(20,30,80,.18) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.g2-section::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 520px;
    height: 340px;
    background-image: radial-gradient(rgba(99,132,241,.18) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, black 30%, transparent 75%);
}
.g2-section .container {
    position: relative;
    z-index: 1;
}
.g2-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}
.g2-eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}
.g2-text .section-title { margin-bottom: var(--space-4); }
.g2-text p { margin-bottom: var(--space-8); }

.g2-badges {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.badge-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
    transition: border-color var(--transition), transform var(--transition);
}
.badge-card:hover { border-color: var(--color-border-hover); transform: translateY(-3px); }
.badge-highlight {
    background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(245,131,32,.07));
    border-color: rgba(99,102,241,.35);
}
.badge-inner { padding: var(--space-3); }
.badge-top  { font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--color-text-faint); margin-bottom: var(--space-2); }
.badge-icon { margin: var(--space-2) auto; }
.badge-label{ font-size: 10px; color: var(--color-text-faint); margin-top: var(--space-1); }
.g2-score   { font-size: var(--text-xl); font-weight: 700; color: var(--color-text); margin-top: var(--space-1); }
.g2-stars   { color: #f58320; font-size: 14px; margin-top: var(--space-1); }
.badge-category {
    display: inline-block;
    margin-top: var(--space-3);
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ──────────────────────────────────────────────
   FOOTER
────────────────────────────────────────────── */
.site-footer { background: #0F172A; border-top: 1px solid var(--color-border); }

/* Footer CTA Band */
.footer-cta-band {
    position: relative;
    padding-block: var(--space-20);
    text-align: center;
    overflow: hidden;
    background: linear-gradient(105deg,
        #1a0a14  0%,
        #1e0f2e 20%,
        #2d1260 45%,
        #4c1d95 70%,
        #6d28d9 88%,
        #7c3aed 100%
    );
}
.footer-cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 120% at 0%   50%, rgba(120,30,10,.45)  0%, transparent 55%),
        radial-gradient(ellipse 40% 100% at 100% 50%, rgba(139,92,246,.3)  0%, transparent 50%);
    pointer-events: none;
}
.footer-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-cta-text h2 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); margin-bottom: var(--space-4); color: #fff; }
.footer-cta-text p  { margin-bottom: var(--space-8); color: rgba(255,255,255,.75); }

/* Footer Main */
.footer-main { padding-block: var(--space-16); background: #0F172A; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr repeat(5, 1fr);
    gap: var(--space-8);
}

.footer-brand .footer-logo {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
    color: var(--color-text);
    margin-bottom: var(--space-4);
}
.footer-tagline { font-size: var(--text-sm); color: var(--color-text-faint); margin-bottom: var(--space-6); max-width: 240px; }

.footer-social { display: flex; gap: var(--space-3); }
.social-link {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: rgba(255,255,255,.06);
    border: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
    transition: all var(--transition);
}
.social-link:hover { background: rgba(255,255,255,.12); color: var(--color-text); border-color: var(--color-border-hover); }

.footer-col-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}
.footer-menu { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-menu a { font-size: var(--text-sm); color: var(--color-text-faint); transition: color var(--transition); }
.footer-menu a:hover { color: var(--color-text); }

/* Footer Bottom */
.footer-bottom {
    padding-block: var(--space-6);
    border-top: 1px solid var(--color-border);
    background: #0F172A;
}
.footer-bottom-inner {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);
}
.copyright { font-size: var(--text-sm); color: var(--color-text-faint); }
.footer-legal { display: flex; gap: var(--space-6); }
.footer-legal a { font-size: var(--text-sm); color: var(--color-text-faint); }
.footer-legal a:hover { color: var(--color-text); }

/* ──────────────────────────────────────────────
   BACK TO TOP
────────────────────────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px var(--color-primary-glow);
    opacity: 0; pointer-events: none;
    transform: translateY(12px);
    transition: all var(--transition);
    z-index: 900;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top:hover   { transform: translateY(-3px); }

/* ──────────────────────────────────────────────
   ANIMATION UTILITIES
────────────────────────────────────────────── */
[data-animate] { opacity: 0; }
[data-animate].animated { opacity: 1; }

[data-animate="fade-up"]   { transform: translateY(32px); transition: opacity .7s ease, transform .7s ease; }
[data-animate="fade-right"]{ transform: translateX(-32px); transition: opacity .7s ease, transform .7s ease; }
[data-animate="fade-left"] { transform: translateX(32px);  transition: opacity .7s ease, transform .7s ease; }
[data-animate="stagger"]   { opacity: 1; }

[data-animate].animated {
    transform: none;
}

[data-animate="stagger"] [data-animate-item] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
[data-animate="stagger"].animated [data-animate-item] {
    opacity: 1;
    transform: none;
}
[data-animate="stagger"].animated [data-animate-item]:nth-child(1) { transition-delay: 0s; }
[data-animate="stagger"].animated [data-animate-item]:nth-child(2) { transition-delay: .12s; }
[data-animate="stagger"].animated [data-animate-item]:nth-child(3) { transition-delay: .24s; }
[data-animate="stagger"].animated [data-animate-item]:nth-child(4) { transition-delay: .36s; }

/* ──────────────────────────────────────────────
   CONTENT / INNER PAGES
────────────────────────────────────────────── */
.content-wrap { max-width: 840px; margin-inline: auto; }
.content-article { padding-block: var(--space-8); }
.entry-title { margin-bottom: var(--space-8); }
.entry-content p, .entry-content li { color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--space-4); }
.entry-content h2, .entry-content h3 { margin-block: var(--space-8) var(--space-4); }
.entry-content a { color: var(--color-primary); text-decoration: underline; }

/* ──────────────────────────────────────────────
   RESPONSIVE — TABLET (≤ 1024px)
────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-container      { grid-template-columns: 1fr; text-align: center; }
    .hero-content        { align-items: center; display: flex; flex-direction: column; }
    .hero-subtitle       { margin-inline: auto; }
    .hero-graphic        { display: none; }
    .hero-stats          { justify-content: center; }
    .hero-actions        { justify-content: center; }

    .features-grid       { grid-template-columns: 1fr; }
    .bottleneck-grid     { grid-template-columns: 1fr; }
    .built-grid          { grid-template-columns: 1fr; }
    .g2-inner            { grid-template-columns: 1fr; }
    .footer-grid         { grid-template-columns: repeat(3, 1fr); }
    .footer-brand        { grid-column: 1 / -1; }
    .orbital-wrap        { width: 360px; height: 360px; }
}

/* ──────────────────────────────────────────────
   RESPONSIVE — MOBILE (≤ 768px)
────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --text-5xl: 2.5rem;
        --text-4xl: 2rem;
    }

    /* Nav */
    .primary-nav {
        position: fixed;
        top: 64px; left: 0; right: 0;
        background: rgba(10,10,20,.97);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-6);
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: all var(--transition);
        z-index: 999;
    }
    .primary-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .nav-menu { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .nav-menu li > ul { position: static; opacity: 1; pointer-events: auto; transform: none; margin-left: var(--space-4); margin-top: var(--space-2); box-shadow: none; }
    .nav-cta { display: none; }
    .hamburger { display: flex; }

    /* Hero */
    .hero-section { min-height: unset; padding-block: var(--space-12); }
    .hero-stats   { flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
    .stat-divider { display: none; }

    /* Sections */
    .section-pad { padding-block: var(--space-12); }
    .bottleneck-benefits { grid-template-columns: 1fr; }
    .g2-badges  { grid-template-columns: 1fr 1fr; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .footer-cta-band { padding-block: var(--space-12); }

    .testimonial-card { padding: var(--space-6); }
    blockquote { font-size: var(--text-base); }

    .back-to-top { bottom: var(--space-4); right: var(--space-4); }
}

/* ──────────────────────────────────────────────
   RESPONSIVE — SMALL MOBILE (≤ 480px)
────────────────────────────────────────────── */
@media (max-width: 480px) {
    .container           { padding-inline: var(--space-4); }
    .features-grid       { gap: var(--space-4); }
    .g2-badges           { grid-template-columns: 1fr; }
    .footer-grid         { grid-template-columns: 1fr; }
    .hero-actions        { flex-direction: column; width: 100%; }
    .hero-actions .btn   { width: 100%; justify-content: center; }
}

/* ──────────────────────────────────────────────
   MEGA MENU — dropdown (not full-width), light bg
────────────────────────────────────────────── */

/* Nav trigger button */
.nav-btn {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: .4rem .75rem;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    white-space: nowrap;
}
.nav-btn:hover,
.nav-btn[aria-expanded="true"] {
    color: var(--color-text);
    background: rgba(255,255,255,.05);
}
.nav-btn[aria-expanded="true"] .dropdown-arrow { transform: rotate(180deg); }
.dropdown-arrow { transition: transform .2s ease; }

/* Each has-mega li is NOT the positioning anchor — header is */
.nav-item.has-mega { position: static; }

/* ── Dropdown panel ── */
.mega-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 990;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);

    /* hide */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
}
.mega-menu::before {
    display: none;
}
.mega-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ── Product mega v2 column widths ── */
.mega-col--promo-cards      { flex: 0 0 230px; }
.mega-col--platform-simple  { flex: 0 0 148px; }
.mega-col--features-v2      { flex: 1; }

/* ── Promo cards (featured dark cards with illustration) ── */
.mega-col--promo-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 20px;
    border-right: 1px solid rgba(0,0,0,.07);
}
.mega-col--promo-cards.mega-col { border-right: 1px solid rgba(0,0,0,.07); }

.mpfc {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 10px;
    padding: 14px 12px;
    text-decoration: none;
    overflow: hidden;
    flex: 1;
    min-height: 128px;
    transition: filter .18s, box-shadow .18s;
}
.mpfc:hover { filter: brightness(1.08); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.mpfc--platform { background: linear-gradient(145deg, #0c1526 0%, #131d3b 60%, #1e1b4b 100%); }
.mpfc--ai       { background: linear-gradient(145deg, #160600 0%, #1e0a00 50%, #2d1200 100%); }

.mpfc-content {
    position: relative;
    z-index: 1;
}
.mpfc-eyebrow {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin-bottom: 4px;
}
.mpfc-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 5px;
}
.mpfc-title-orange { color: #FF6B35; }
.mpfc-title-alt { color: #a78bfa; }
.mpfc-desc {
    font-size: 10.5px;
    color: rgba(255,255,255,.5);
    line-height: 1.5;
    margin: 0;
}
.mpfc-art {
    position: absolute;
    top: 10px;
    right: 8px;
    opacity: .75;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}
.mpfc:hover .mpfc-art { opacity: 1; transform: scale(1.06); }

/* ── Platform simple list (no icons) ── */
.mega-list-simple {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mega-list-simple li a {
    display: block;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0,0,0,.65);
    text-decoration: none;
    border-radius: 5px;
    transition: background .12s, color .12s;
}
.mega-list-simple li a:hover {
    background: rgba(0,0,0,.04);
    color: rgba(0,0,0,.9);
}

/* ── Explore All Features link in grid ── */
.mega-feat-link--explore {
    color: #d95a20 !important;
    font-weight: 600 !important;
}
.mega-feat-link--explore:hover {
    background: rgba(217,90,32,.06) !important;
    color: #c24f18 !important;
}

/* ── Per-menu widths — all menus are now full width ── */
.mega-product    { /* full width */ }
.mega-developers { /* full width */ }
.mega-resources  { /* full width */ }

/* Ensure menu doesn't overflow viewport on small screens */
@media (max-width: 1100px) {
    .mega-product, .mega-developers, .mega-resources { width: 100%; left: 0; right: 0; }
}

/* ── Inner container ── */
.mega-inner {
    display: flex;
    padding: 28px 40px;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
}
/* .mega-inner--product, .mega-inner--narrow, .mega-inner--dev inherit flex from .mega-inner */

/* ── Columns ── */
.mega-col {
    flex: 1;
    padding: 0 20px;
    border-right: 1px solid rgba(0,0,0,.07);
}
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child  { border-right: none; padding-right: 0; }
.mega-col--platform   { flex: 0 0 200px; } /* legacy — unused after product v2 */
.mega-col--features   { flex: 1; }         /* legacy — unused after product v2 */
.mega-col--card       { flex: 0 0 210px; } /* legacy — unused after product v2 */
.mega-col--start      { flex: 1; }
.mega-col--start-narrow { flex: 0 0 195px; }
.mega-col--quickstart { flex: 0 0 195px; }
.mega-col--devres     { flex: 0 0 195px; }
/* Developers mega v2 columns */
.mega-col--dev-start  { flex: 0 0 165px; }
.mega-col--dev-qs     { flex: 1; }
.mega-col--dev-promo  { flex: 0 0 215px; }

/* ── Column label ── */
.mega-col-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(0,0,0,.35);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,.07);
}

/* ── Platform nav items (icon + single-line name) ── */
.mega-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0,0,0,.65);
    text-decoration: none;
    transition: background .15s, color .15s;
    line-height: 1;
}
.mega-nav-item:hover {
    background: rgba(0,0,0,.04);
    color: rgba(0,0,0,.9);
}
.mega-nav-item:hover .mni-icon { opacity: 1; }

.mni-icon {
    width: 24px; height: 24px;
    flex-shrink: 0;
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    opacity: .9;
    transition: opacity .15s;
}

.mni-text {
    display: flex;
    align-items: center;
    gap: 5px;
}
.mni-text--orange { color: #d95a20; }

.mni-desc {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: rgba(0,0,0,.4);
    margin-top: 1px;
    line-height: 1.4;
}

.mni-new {
    display: inline-block;
    background: #FF6B35;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 5px;
    border-radius: 3px;
    vertical-align: middle;
}

.mni--cloud .mni-text { color: #d95a20; }
.mni--highlight:hover { background: rgba(255,107,53,.06); }

/* ── Features grid (plain 2-col text) ── */
.mega-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.mega-features-grid--single { grid-template-columns: 1fr; }

.mega-feat-link {
    display: block;
    padding: 5px 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(0,0,0,.55);
    text-decoration: none;
    border-radius: 5px;
    transition: background .12s, color .12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mega-feat-link:hover {
    background: rgba(0,0,0,.04);
    color: rgba(0,0,0,.88);
}

/* See All Features */
.mega-see-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    margin-left: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #d95a20;
    text-decoration: none;
    transition: gap .15s;
}
.mega-see-all:hover { gap: 8px; }
.mega-see-all svg { flex-shrink: 0; }

/* ── Promo card (Product col 3) ── */
.mega-promo-card {
    background: linear-gradient(145deg, rgba(255,107,53,.07) 0%, rgba(139,92,246,.05) 100%);
    border: 1px solid rgba(255,107,53,.2);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 14px;
}
.mpc-eyebrow { margin-bottom: 10px; }
.mpc-badge {
    display: inline-block;
    background: #FF6B35;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 2px 7px;
    border-radius: 20px;
}
.mpc-icon { margin-bottom: 8px; }
.mpc-title {
    font-size: 13px;
    font-weight: 700;
    color: #0a0a14;
    margin-bottom: 5px;
}
.mpc-desc {
    font-size: 11.5px;
    color: rgba(0,0,0,.5);
    line-height: 1.6;
    margin-bottom: 12px;
}
.mpc-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #d95a20;
    text-decoration: none;
    transition: gap .15s;
}
.mpc-cta:hover { gap: 8px; }

/* Deploy anywhere chips */
.mega-deploy-grid .mega-col-label { margin-bottom: 8px; }
.mdg-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.mdg-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    background: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(0,0,0,.55);
    text-decoration: none;
    transition: background .12s, color .12s;
}
.mdg-item svg { flex-shrink: 0; color: rgba(0,0,0,.3); }
.mdg-item:hover { background: rgba(0,0,0,.06); color: rgba(0,0,0,.85); }
.mdg-item:hover svg { color: rgba(0,0,0,.55); }

/* ── GitHub card ── */
.mega-gh-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 12px;
    background: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 8px;
    text-decoration: none;
    transition: background .12s, border-color .12s;
    cursor: pointer;
}
.mega-gh-card:hover { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.13); }
.mega-gh-icon { color: rgba(0,0,0,.45); flex-shrink: 0; margin-top: 1px; }
.mega-gh-body { flex: 1; }
.mega-gh-body strong {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(0,0,0,.85);
    margin-bottom: 2px;
}
.mega-gh-body span {
    font-size: 11px;
    color: rgba(0,0,0,.42);
    line-height: 1.4;
}
.mega-gh-arrow { color: rgba(0,0,0,.25); flex-shrink: 0; margin-top: 3px; }
.mega-gh-card:hover .mega-gh-arrow { color: rgba(0,0,0,.55); }

/* ── Quick Start technology grid ── */
.qs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}
.qs-grid--3col {
    grid-template-columns: 1fr 1fr 1fr;
}
.qs-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 7px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .13s;
}
.qs-item:hover { background: rgba(0,0,0,.04); }
.qs-icon {
    width: 22px; height: 22px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
}
.qs-icon--react  { background: rgba(8,126,164,.1); }
.qs-icon--angular{ background: rgba(221,0,49,.08); }
.qs-icon--vue    { background: rgba(66,184,131,.1); }
.qs-icon--next   { background: rgba(0,0,0,.06); }
.qs-icon--node   { background: rgba(83,158,67,.1); }
.qs-icon--python { background: rgba(55,118,171,.1); }
.qs-icon--go     { background: rgba(0,172,215,.1); }
.qs-icon--spring { background: rgba(109,179,63,.1); }
.qs-icon--flutter  { background: rgba(84,197,248,.1); }
.qs-icon--dotnet   { background: rgba(81,43,212,.1); }
.qs-icon--ios      { background: rgba(28,28,30,.08); }
.qs-icon--android  { background: rgba(61,220,132,.1); }
.qs-icon--java     { background: rgba(237,139,0,.1); }
.qs-icon--remix    { background: rgba(0,0,0,.07); }
.qs-icon--js       { background: rgba(247,223,30,.2); }
.qs-icon--ruby     { background: rgba(204,52,45,.1); }
.qs-icon--drupal   { background: rgba(6,120,190,.1); }
.qs-icon--rust     { background: rgba(206,66,43,.1); }
.qs-icon--flask    { background: rgba(90,90,90,.08); }
.qs-icon--nuxt     { background: rgba(0,220,130,.1); }
.qs-icon--php      { background: rgba(119,107,180,.1); }
.qs-icon--wordpress{ background: rgba(33,117,155,.1); }

/* ── Developers mega v2: promo card + compare ── */
.dev-promo-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #1a1040 0%, #0f0b2a 100%);
    border: 1px solid rgba(167,122,255,.2);
    border-radius: 10px;
    padding: 14px 14px;
    text-decoration: none;
    margin-bottom: 14px;
    transition: border-color .15s, background .15s;
}
.dev-promo-card:hover {
    border-color: rgba(167,122,255,.45);
    background: linear-gradient(135deg, #1e1248 0%, #110d32 100%);
}
.dev-promo-card__art { flex-shrink: 0; }
.dev-promo-card__body { flex: 1; }
.dev-promo-card__title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.dev-promo-card__cta {
    font-size: 12px;
    font-weight: 600;
    color: #a78bfa;
}
.dev-compare {
    border-top: 1px solid rgba(0,0,0,.08);
    padding-top: 12px;
}
.dev-compare__title {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(0,0,0,.8);
}
.dev-compare__desc {
    margin: 0 0 8px;
    font-size: 11.5px;
    color: rgba(0,0,0,.5);
    line-height: 1.4;
}
.dev-compare__link {
    font-size: 12px;
    font-weight: 600;
    color: #4f46e5;
    text-decoration: none;
}
.dev-compare__link:hover { text-decoration: underline; }

/* ── Resources mega v2 ── */
/* Two-section layout: Explore (flex:1) + Industries divider */
.mega-col--res-explore   { flex: 1; }
.mega-col--res-industries {
    flex: 0 0 210px;
    border-left: 1px solid rgba(0,0,0,.08);
    padding-left: 24px;
}

/* Explore: three sub-columns */
.res-explore-grid {
    display: flex;
    gap: 0;
    margin-top: 4px;
}
.res-explore-links {
    flex: 0 0 130px;
    padding-right: 16px;
    border-right: 1px solid rgba(0,0,0,.07);
    margin-right: 16px;
}
.res-explore-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 12px;
    margin-right: 4px;
}
.res-explore-cards + .res-explore-cards {
    border-left: 1px solid rgba(0,0,0,.07);
    padding-left: 12px;
    margin-left: 4px;
    padding-right: 0;
    margin-right: 0;
}

/* Explore feature cards (title + desc) */
.res-card {
    display: block;
    padding: 9px 10px;
    border-radius: 7px;
    text-decoration: none;
    transition: background .12s;
}
.res-card:hover { background: rgba(0,0,0,.04); }
.res-card__title {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(0,0,0,.82);
    line-height: 1.3;
}
.res-card__desc {
    margin: 0;
    font-size: 11.5px;
    color: rgba(0,0,0,.48);
    line-height: 1.4;
}

/* Industries 2-col grid */
.res-industries-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 4px;
}
.res-industry-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .12s;
}
.res-industry-item:hover { background: rgba(0,0,0,.04); }
.res-industry-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.res-industry-name {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(0,0,0,.65);
    text-align: center;
}
/* Industry icon backgrounds */
.res-iicon--healthcare   { background: rgba(16,185,129,.12); }
.res-iicon--gaming       { background: rgba(139,92,246,.12); }
.res-iicon--retail       { background: rgba(59,130,246,.12); }
.res-iicon--fintech      { background: rgba(168,85,247,.12); }
.res-iicon--entertainment{ background: rgba(99,102,241,.12); }
.qs-name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(0,0,0,.65);
    white-space: nowrap;
}
.qs-item:hover .qs-name { color: rgba(0,0,0,.9); }
.qs-see-all {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 5px 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: #d95a20;
    text-decoration: none;
    border-radius: 5px;
    transition: gap .13s, background .13s;
}
.qs-see-all:hover { gap: 8px; background: rgba(217,90,32,.05); }

/* ── Mobile ── */
@media (max-width: 768px) {
    .nav-item.has-mega   { position: static; width: 100%; }
    .nav-btn             { width: 100%; justify-content: space-between; }

    .mega-menu {
        position: static;
        width: 100% !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: rgba(0,0,0,.02);
        display: none;
        margin-top: 0;
    }
    .mega-menu::before { display: none; }
    .mega-menu.open { display: block; }

    .mega-inner {
        flex-direction: column;
        padding: 0 0 12px;
    }
    .mega-col {
        padding: 12px 0;
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,.07);
        flex: none !important;
        width: 100%;
    }
    .mega-col:last-child  { border-bottom: none; }
    .mega-col--card       { display: none; }
    .mega-promo-card      { display: none; }
    .mega-features-grid   { grid-template-columns: 1fr 1fr; }
}

/* ──────────────────────────────────────────────
   FOCUS / ACCESSIBILITY
────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 4px;
}
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ──────────────────────────────────────────────
   SCROLLBAR
────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* ──────────────────────────────────────────────
   SELECTION
────────────────────────────────────────────── */
::selection { background: var(--color-primary-glow); color: var(--color-text); }