/* ============================================
   WATOKO — Clean light theme, ElevenLabs quality.
   ============================================ */

:root {
    --orange: #F16001;
    --orange-bright: #E85002;
    --orange-dim: rgba(241, 96, 1, 0.10);
    --orange-glow: rgba(241, 96, 1, 0.05);
    --orange-text: #D14E00;
    --green: #22C55E;
    --green-dim: rgba(34, 197, 94, 0.12);
    --green-glow: rgba(34, 197, 94, 0.06);
    --surface-dark: #0A0A0A;
    --surface-dark-border: rgba(255, 255, 255, 0.08);
    --bg: #ffffff;
    --bg-page: #FAFAFA;
    --bg-card: #F5F5F5;
    --bg-card-hover: #EFEFEF;
    --border: #EEEEEE;
    --border-hover: #DDDDDD;
    --text: #000000;
    --text-secondary: #555555;
    --text-tertiary: #888888;
    --text-muted: #aaaaaa;
    --white: #ffffff;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --max-width: 1280px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-card-hover: 0 8px 28px rgba(0,0,0,0.08);
    --transition-spring: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-gradient: 0.5s ease;
    --card-radius-lg: 16px;
    --space-section: 80px;
    --space-header: 48px;
    --space-gap: 24px;
    /* Gradient accents for product cards — soft pastel, ElevenLabs style */
    --gradient-cool: linear-gradient(135deg, #B8D4E3, #A0C4D8, #C2D0DC);
    --gradient-warm: linear-gradient(135deg, #F0C6A8, #E8B0A0, #D4A088);
    --gradient-purple: linear-gradient(135deg, #C8B8E0, #B8A8D4, #D0C4E0);
    --gradient-earth: linear-gradient(135deg, #D4C8A8, #C8BC98, #B8B090);
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--bg);
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection {
    background: var(--orange-bright);
    color: var(--white);
}

/* ============================================
   Keyframe Animations
   ============================================ */

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

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes dotPulse {
    0% { box-shadow: 0 0 0 0 currentColor; }
    70% { box-shadow: 0 0 0 4px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ============================================
   Layout
   ============================================ */

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

/* ============================================
   Buttons
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font);
    font-weight: 500;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    letter-spacing: -0.01em;
    border-radius: 100px;
}

.btn-primary {
    background: var(--text);
    color: var(--white);
    padding: 12px 24px;
}

.btn-primary:hover {
    background: #333;
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    padding: 12px 24px;
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    border-color: var(--text);
}

.btn-arrow {
    transition: transform var(--transition);
}

.btn-primary:hover .btn-arrow,
.btn-secondary:hover .btn-arrow {
    transform: translateX(3px);
}

.btn-full {
    width: 100%;
    justify-content: center;
}

/* ============================================
   Opening Screen — WebGL Mesh Gradient
   ============================================ */

.opening-screen {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    background: #fff9f5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.opening-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.opening-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
    will-change: transform;
}

.opening-phrase {
    font-family: 'Inter', sans-serif;
    font-size: clamp(26px, 3.8vw, 52px);
    font-weight: 400;
    opacity: 1;
    line-height: 1.35;
    color: rgba(0, 0, 0, 0.88);
    letter-spacing: -0.5px;
    margin: 0;
}

.opening-phrase em {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.05em;
    letter-spacing: 0.03em;
}

.opening-scroll-hint {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(0,0,0,0.35);
    animation: scrollHintFade 3s ease-in-out infinite;
}

@keyframes scrollHintFade {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1.0; }
}

.opening-scroll-dot {
    animation: scrollDotBounce 2s ease-in-out infinite;
}

@keyframes scrollDotBounce {
    0%, 100% { cy: 10; }
    50% { cy: 22; }
}

@media (max-width: 768px) {
    .opening-screen {
        min-height: 500px;
    }
    .opening-scroll-hint {
        bottom: 28px;
    }
}

/* ============================================
   Navigation — Ramp-style
   ============================================ */

.nav {
    position: fixed;
    top: 38px;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background var(--transition), border-color var(--transition), backdrop-filter var(--transition), top 0.3s ease;
}

.announcement-bar.hidden + .nav {
    top: 0;
}

.nav.scrolled {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: var(--border);
}

.nav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    height: 56px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.nav-logo {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.03em;
    transition: color var(--transition);
}

.logo-dot {
    color: var(--orange);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    justify-content: center;
}

.nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.nav-links a,
.nav-links .nav-dropdown-trigger {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color var(--transition);
}

.nav-links a:hover {
    color: var(--text);
}

.nav-cta {
    background: var(--text);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 100px;
    font-weight: 500;
    font-size: 14px;
    transition: background var(--transition);
    white-space: nowrap;
}

.nav-cta:hover {
    background: #333;
    color: var(--white);
}

.nav-mobile-cta {
    display: none;
}

/* Nav dropdown / Mega menu */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color var(--transition);
}

.nav-dropdown-trigger:hover {
    color: var(--text);
}

.dropdown-arrow {
    transition: transform var(--transition);
    display: inline-block;
    margin-top: 1px;
}

.nav-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

/* Invisible bridge so mouse can travel from trigger to dropdown */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -40px;
    right: -40px;
    height: 24px;
    display: none;
}

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

/* Dropdown — contained card */
.mega-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 200;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    min-width: 280px;
}

.mega-menu-wide {
    min-width: 520px;
}

.nav-dropdown.open .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mega-menu-inner {
    display: flex;
    gap: 0;
}

.mega-menu-section {
    display: flex;
    flex-direction: column;
    min-width: 220px;
}

.mega-menu-section + .mega-menu-section {
    border-left: 1px solid var(--border);
    padding-left: 24px;
    margin-left: 24px;
}

.mega-menu-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: block;
    padding: 0 12px;
}

.mega-menu-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.mega-menu-item:hover {
    background: var(--bg-page);
}

.mega-menu-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.01em;
}

.mega-menu-desc {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.4;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--text);
    transition: all var(--transition);
}

/* ============================================
   Hero
   ============================================ */

.hero {
    padding: 120px 0 40px;
    position: relative;
    overflow: hidden;
    background: var(--bg);
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 48px;
    align-items: center;
}

.hero-eyebrow {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 20px;
    letter-spacing: 0;
}

.hero-title {
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 28px;
}

.accent {
    color: var(--orange);
}

.hero-subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 460px;
    margin-bottom: 40px;
}

.hero-cta-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.email-capture {
    display: flex;
    max-width: 480px;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: var(--bg);
    transition: border-color var(--transition), box-shadow var(--transition);
    overflow: hidden;
}

.email-capture:focus-within {
    border-color: var(--text);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.email-capture input {
    flex: 1;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 400;
    padding: 16px 20px;
    border: none;
    background: transparent;
    color: var(--text);
    outline: none;
    min-width: 0;
}

.email-capture input::placeholder {
    color: var(--text-muted);
}

.email-capture button {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    padding: 14px 24px;
    border: none;
    background: var(--text);
    color: var(--white);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition);
    margin: 4px;
    border-radius: 100px;
}

.email-capture button:hover {
    background: #333;
}

.hero-explore {
    font-size: 14px;
    color: var(--text-secondary);
    transition: color var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.hero-explore:hover {
    color: var(--text);
}

.hero-explore span {
    transition: transform var(--transition);
}

.hero-explore:hover span {
    transform: translateX(3px);
}

/* ============================================
   Hero — Dashboard Card + iPhone (ElevenLabs quality)
   ============================================ */

.hero-visual {
    position: relative;
    padding-bottom: 0;
}

/* Dashboard — clean card, no device frame */
.hero-dash {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.06);
    font-family: var(--font);
}

.hero-dash-body {
    display: flex;
    min-height: 380px;
}

/* Sidebar — ElevenLabs style with sections */
.hero-dash-sidebar {
    width: 180px;
    padding: 16px 0;
    border-right: 1px solid var(--border);
    background: #FAFAFA;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.hero-dash-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.hero-dash-sidebar-logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-dash-sidebar-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.hero-dash-sidebar-section {
    padding: 0 10px;
    margin-bottom: 12px;
}

.hero-dash-sidebar-label {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 6px;
    margin-bottom: 4px;
}

.hero-dash-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: default;
}

.hero-dash-nav-item.active {
    background: var(--white);
    color: var(--text);
    font-weight: 500;
    border: 1px solid var(--border);
}

.hero-dash-nav-item svg {
    flex-shrink: 0;
    opacity: 0.5;
}

.hero-dash-nav-item.active svg {
    opacity: 0.8;
}

.hero-dash-nav-badge {
    font-size: 8px;
    font-weight: 600;
    background: var(--orange-dim);
    color: var(--orange);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: auto;
}

/* Main content area */
.hero-dash-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.hero-dash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}

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

.hero-dash-topbar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse 2s ease-in-out infinite;
}

.hero-dash-topbar-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
}

.hero-dash-topbar-right {
    display: flex;
    gap: 6px;
}

.hero-dash-topbar-btn {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-tertiary);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--white);
}

.hero-dash-topbar-btn.active {
    color: var(--text);
    background: var(--bg-card);
}

/* Greeting + tabs */
.hero-dash-greeting {
    padding: 16px 20px 0;
}

.hero-dash-workspace {
    font-size: 9px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.hero-dash-hello {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.hero-dash-tabs {
    display: flex;
    gap: 0;
    padding: 12px 20px 0;
    border-bottom: 1px solid var(--border);
}

.hero-dash-tab {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 6px 10px;
    cursor: default;
    position: relative;
}

.hero-dash-tab.active {
    color: var(--text);
}

.hero-dash-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text);
    border-radius: 2px 2px 0 0;
}

/* Metrics row — ElevenLabs style */
.hero-dash-metrics {
    display: flex;
    gap: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.hero-dash-metric {
    flex: 1;
    padding: 0 12px;
    border-right: 1px solid var(--border);
}

.hero-dash-metric:first-child {
    padding-left: 0;
}

.hero-dash-metric:last-child {
    border-right: none;
    padding-right: 0;
}

.hero-dash-metric-label {
    font-size: 9px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.hero-dash-metric-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.hero-dash-metric-unit {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 2px;
}

/* Chart area */
.hero-dash-chart {
    flex: 1;
    padding: 16px 20px;
    position: relative;
}

.hero-dash-chart-svg {
    width: 100%;
    height: 100px;
    display: block;
}

.hero-dash-chart-labels {
    display: flex;
    justify-content: space-between;
    padding-top: 6px;
    font-size: 8px;
    color: var(--text-muted);
}

/* Bottom stat cards */
.hero-dash-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 20px 16px;
}

.hero-dash-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}

.hero-dash-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.hero-dash-stat-title {
    font-size: 9px;
    color: var(--text-muted);
}

.hero-dash-stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.hero-dash-stat-bar {
    height: 32px;
}

/* iPhone — clean modern design */
.hero-phone {
    position: absolute;
    bottom: -20px;
    right: -28px;
    width: 190px;
    height: 392px;
    z-index: 10;
    background: #1d1d1f;
    border-radius: 32px;
    padding: 3px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.hero-phone-screen {
    background: #FAFAFA;
    border-radius: 29px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Dynamic Island */
.hero-phone-island {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 14px;
    background: #000;
    border-radius: 10px;
    z-index: 5;
}

/* Modern chat UI */
.hero-chat {
    font-family: var(--font);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hero-chat-header {
    background: #fff;
    padding: 28px 10px 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}

.hero-chat-back {
    color: var(--text-muted);
    flex-shrink: 0;
}

.hero-chat-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.hero-chat-info {
    flex: 1;
}

.hero-chat-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.hero-chat-status {
    font-size: 7px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}

.hero-chat-status-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
}

.hero-chat-body {
    background: #FAFAFA;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    overflow: hidden;
}

.hero-chat-msg {
    max-width: 84%;
    padding: 7px 10px;
    font-size: 8px;
    line-height: 1.45;
}

.hero-chat-msg.incoming {
    background: #fff;
    color: #1a1a1a;
    align-self: flex-start;
    border-radius: 12px 12px 12px 4px;
    border: 1px solid var(--border);
}

.hero-chat-msg.outgoing {
    background: var(--text);
    color: #fff;
    align-self: flex-end;
    border-radius: 12px 12px 4px 12px;
}

.hero-chat-msg-time {
    font-size: 6px;
    color: #aaa;
    text-align: right;
    margin-top: 3px;
}

.hero-chat-msg.outgoing .hero-chat-msg-time {
    color: rgba(255,255,255,0.45);
}

/* Typing indicator */
.hero-chat-typing {
    align-self: flex-start;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px 12px 12px 4px;
    padding: 8px 14px;
    display: flex;
    gap: 3px;
    align-items: center;
}

.hero-chat-typing span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #bbb;
    animation: typingDot 1.4s ease-in-out infinite;
}

.hero-chat-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.hero-chat-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-2px); }
}

/* Action pill */
.hero-chat-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 7.5px;
    font-weight: 600;
    max-width: none;
}

.hero-chat-action svg {
    flex-shrink: 0;
    color: #16a34a;
}

.hero-chat-input {
    background: #fff;
    padding: 6px 8px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
}

.hero-chat-input-field {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 6px 10px;
    font-size: 7.5px;
    color: #bbb;
}

.hero-chat-input-send {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

/* Scroll-triggered chat animation */
.hero-chat-animate {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero-chat-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Typing indicator hidden until triggered */
.hero-chat-typing {
    opacity: 0;
    max-height: 0;
    padding: 0 14px;
    margin-top: -5px;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

.hero-chat-typing.visible {
    opacity: 1;
    max-height: 30px;
    padding: 8px 14px;
    margin-top: 0;
}

.hero-chat-typing.fade-out {
    opacity: 0;
    max-height: 0;
    padding: 0 14px;
    margin-top: -5px;
    transition: opacity 0.2s ease, max-height 0.25s ease 0.1s, padding 0.25s ease 0.1s, margin 0.25s ease 0.1s;
}

.mock-glow {
    display: none;
}

.mock-window {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.mock-window:hover {
    transform: none;
}

.mock-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #FAFAFA;
    border-bottom: 1px solid var(--border);
}

.mock-dots {
    display: flex;
    gap: 6px;
}

.mock-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.mock-dots span:first-child { background: #ff5f57; }
.mock-dots span:nth-child(2) { background: #febc2e; }
.mock-dots span:last-child { background: #28c840; }

.mock-tabs {
    display: flex;
    gap: 0;
    margin-left: 4px;
}

.mock-tab {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: default;
}

.mock-tab.active {
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--border);
}

.mock-url {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    margin-left: auto;
}

.mock-body {
    display: flex;
    min-height: 320px;
}

.mock-sidebar {
    width: 48px;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    background: #FAFAFA;
}

.mock-sidebar-logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--orange);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.mock-sidebar-item {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: default;
    transition: color 0.15s;
}

.mock-sidebar-item.active {
    color: var(--orange);
    background: rgba(241, 96, 1, 0.15);
}

.mock-main {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mock-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: transparent;
}

.mock-breadcrumb {
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
}

.mock-breadcrumb-sep {
    color: var(--text-muted);
    margin: 0 4px;
}

.mock-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mock-date-range {
    font-size: 10px;
    color: var(--text-tertiary);
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.mock-export-btn {
    font-size: 10px;
    font-weight: 500;
    color: var(--text);
    background: var(--bg-card);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.mock-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px 16px;
}

.mock-metric {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
}

.mock-metric-label {
    display: block;
    font-size: 10px;
    color: var(--text-tertiary);
    margin-bottom: 6px;
    letter-spacing: 0.03em;
}

.mock-metric-value {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 4px;
}

.mock-metric-delta {
    font-size: 11px;
    color: var(--orange);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mock-live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    display: inline-block;
    animation: pulse 2s ease-in-out infinite;
}

.mock-sparkline {
    display: block;
    margin-top: 6px;
    opacity: 0.7;
}

.mock-chart {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    margin: 0 16px;
    flex: 1;
}

.mock-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.mock-chart-title {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.03em;
}

.mock-chart-legend {
    display: flex;
    gap: 12px;
}

.mock-legend-item {
    font-size: 9px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.mock-legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
}

.mock-legend-dot.secondary {
    background: var(--text-muted);
    opacity: 0.6;
}

.mock-area-chart {
    display: flex;
    gap: 0;
}

.mock-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 8px;
    font-size: 8px;
    color: var(--text-muted);
    width: 24px;
    flex-shrink: 0;
}

.mock-chart-body {
    flex: 1;
    position: relative;
    height: 80px;
}

.mock-grid-lines {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mock-grid-lines span {
    display: block;
    height: 1px;
    background: var(--border);
}

.mock-area-svg {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 1;
}

.mock-x-axis {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    color: var(--text-muted);
    padding-top: 6px;
    padding-left: 24px;
}

.mock-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 16px;
}

.mock-feed-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-secondary);
}

.mock-feed-item:last-child {
    border-bottom: none;
}

.mock-feed-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mock-feed-icon.blue {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.mock-feed-icon.orange {
    background: var(--orange-dim);
    color: var(--orange);
}

.mock-feed-icon.green {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.mock-feed-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.mock-feed-badge.action {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.mock-feed-badge.alert {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.mock-feed-badge.completed {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.mock-feed-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mock-time {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 10px;
}

/* Floating notification */
.mock-notification {
    position: absolute;
    bottom: -28px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    box-shadow: var(--shadow-card);
    animation: notifFloat 3s ease-in-out infinite;
}

@keyframes notifFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.mock-notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(241, 96, 1, 0.15);
    color: var(--orange);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mock-notif-status {
    font-size: 9px;
    font-weight: 600;
    background: var(--green-dim);
    color: var(--green);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

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

.mock-notif-content {
    display: flex;
    flex-direction: column;
}

.mock-notif-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.mock-notif-desc {
    font-size: 11px;
    color: var(--text-muted);
}

/* ============================================
   Device Frames — Monitor (iMac/Cinema Display style like Ramp)
   ============================================ */

.device-laptop {
    position: relative;
}

.device-laptop-screen {
    background: #E5E5E5;
    border-radius: 10px 10px 0 0;
    padding: 8px 8px 0;
    position: relative;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Camera dot */
.device-laptop-screen::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: #c0c0c0;
    border-radius: 50%;
    z-index: 5;
}

.device-laptop-screen .mock-window {
    border-radius: 6px 6px 0 0;
}

/* Monitor chin / base */
.device-laptop-base {
    height: 16px;
    background: #E5E5E5;
    border-radius: 0 0 10px 10px;
    position: relative;
}

/* Stand connector */
.device-laptop-notch {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 20px;
    background: #E5E5E5;
    border-radius: 0 0 4px 4px;
}

/* Stand foot */
.device-laptop-notch::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: #E5E5E5;
    border-radius: 0 0 4px 4px;
}

/* ============================================
   Device Frames — Phone (iPhone-style like Ramp)
   ============================================ */

.device-phone {
    position: relative;
    background: #F0F0F0;
    border-radius: 28px;
    padding: 10px 6px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    max-width: 380px;
    margin: 0 auto;
}

.device-phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 20px;
    background: #1a1a1a;
    border-radius: 0 0 12px 12px;
    z-index: 10;
}

.device-phone-screen {
    border-radius: 26px;
    overflow: hidden;
    position: relative;
    background: var(--bg-card);
}

.device-phone-screen .feature-card {
    border-radius: 0;
    border: none;
}

/* ============================================
   Stats Bar
   ============================================ */

.stats-bar {
    padding: 48px 0;
    background: var(--bg-page);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.stats-bar-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
}

.stats-bar-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.stats-bar-value {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.02em;
}

.stats-bar-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
}

.stats-bar-divider {
    width: 1px;
    height: 32px;
    background: var(--border);
}

/* ============================================
   Platform / Product Suite — Ramp-style grid
   ============================================ */

.platform {
    padding: var(--space-section) 0;
    position: relative;
    overflow: hidden;
    background: var(--bg);
}

.platform-header {
    text-align: left;
    margin-bottom: var(--space-header);
}

.platform-eyebrow {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 16px;
    letter-spacing: 0;
}

.platform-title {
    font-size: clamp(32px, 4vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.platform-desc {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    max-width: 520px;
    line-height: 1.6;
}

.product-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-gap);
}

.product-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid transparent;
    border-radius: 16px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    text-decoration: none;
    overflow: hidden;
    min-height: 0;
    will-change: transform;
}

/* Brain — top left */
.product-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

/* Market — spans 2 rows, middle column */
.product-card:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / 3;
}

/* Ecosystem — top right */
.product-card:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

/* Labs — bottom, spans left and right columns */
.product-card:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
}

.product-card.tilting {
    transition: none;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Featured card — no longer spans 2 rows */
.product-card.featured {
    background: var(--gradient-warm);
    border: none;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}

.product-card.featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Gradient product card variants — pastel backgrounds with dark text */
.product-card.gradient-cool,
.product-card.gradient-warm,
.product-card.gradient-purple,
.product-card.gradient-earth,
.product-card.featured {
    border: none;
}

.product-card.gradient-cool {
    background:
        radial-gradient(ellipse at 20% 40%, rgba(100, 181, 246, 0.55), transparent 50%),
        radial-gradient(ellipse at 75% 25%, rgba(77, 208, 225, 0.45), transparent 45%),
        radial-gradient(ellipse at 55% 80%, rgba(129, 212, 250, 0.4), transparent 45%),
        radial-gradient(ellipse at 90% 75%, rgba(165, 214, 167, 0.3), transparent 40%),
        linear-gradient(155deg, #122a3a, #1a2e35);
}

.product-card.gradient-warm {
    background:
        radial-gradient(ellipse at 25% 35%, rgba(255, 183, 77, 0.55), transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(255, 138, 101, 0.45), transparent 45%),
        radial-gradient(ellipse at 50% 75%, rgba(255, 213, 79, 0.4), transparent 45%),
        radial-gradient(ellipse at 15% 80%, rgba(239, 154, 154, 0.3), transparent 40%),
        linear-gradient(155deg, #2a1f12, #2e2118);
}

.product-card.gradient-purple {
    background:
        radial-gradient(ellipse at 20% 45%, rgba(186, 147, 230, 0.55), transparent 50%),
        radial-gradient(ellipse at 80% 25%, rgba(149, 117, 205, 0.45), transparent 45%),
        radial-gradient(ellipse at 55% 80%, rgba(206, 147, 216, 0.4), transparent 45%),
        radial-gradient(ellipse at 85% 75%, rgba(121, 134, 203, 0.3), transparent 40%),
        linear-gradient(155deg, #1e1530, #221a35);
}

.product-card.gradient-earth {
    background:
        radial-gradient(ellipse at 25% 40%, rgba(76, 175, 80, 0.5), transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(174, 168, 100, 0.45), transparent 45%),
        radial-gradient(ellipse at 50% 75%, rgba(200, 180, 100, 0.4), transparent 45%),
        radial-gradient(ellipse at 15% 80%, rgba(139, 195, 74, 0.3), transparent 40%),
        linear-gradient(155deg, #1a2614, #24261a);
}

.product-card.gradient-cool .product-card-title,
.product-card.gradient-warm .product-card-title,
.product-card.gradient-purple .product-card-title,
.product-card.gradient-earth .product-card-title,
.product-card.featured .product-card-title {
    color: rgba(255, 255, 255, 0.95);
}

.product-card.gradient-cool .product-card-desc,
.product-card.gradient-warm .product-card-desc,
.product-card.gradient-purple .product-card-desc,
.product-card.gradient-earth .product-card-desc,
.product-card.featured .product-card-desc,
.product-card.featured .product-card-subtitle {
    color: rgba(255, 255, 255, 0.65);
}

.product-card.gradient-cool .product-card-subtitle,
.product-card.gradient-warm .product-card-subtitle,
.product-card.gradient-purple .product-card-subtitle,
.product-card.gradient-earth .product-card-subtitle {
    color: rgba(255, 255, 255, 0.75);
}

.product-card.gradient-cool .product-card-icon,
.product-card.gradient-warm .product-card-icon,
.product-card.gradient-purple .product-card-icon,
.product-card.gradient-earth .product-card-icon,
.product-card.featured .product-card-icon {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.15);
}

.product-card-top {
    padding: 36px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.product-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.product-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-page);
    border-radius: 10px;
    color: var(--orange);
    flex-shrink: 0;
}

.product-card-title {
    font-size: 24px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.02em;
}

.product-card-subtitle {
    font-size: 14px;
    color: var(--text-tertiary);
    margin-top: 16px;
}

.product-card-subtitle + .product-card-desc {
    margin-top: auto;
    padding-top: 16px;
}

.product-card-agents {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 14px;
    width: fit-content;
}

.product-card-desc {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: auto;
    padding-top: 40px;
}

.product-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color var(--transition);
    margin-top: 16px;
}

.product-card:hover .product-card-link {
    color: var(--text);
}

.product-card-link span {
    transition: transform var(--transition);
}

.product-card:hover .product-card-link span {
    transform: translateX(3px);
}

/* Product card previews */
.product-card-preview {
    padding: 0 28px 28px;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.preview-row, .preview-research-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.preview-label {
    font-size: 11px;
    color: var(--text-muted);
}

.preview-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
}

.preview-bar {
    height: 3px;
    background: rgba(0, 0, 0, 0.06);
    margin-bottom: 12px;
    border-radius: 2px;
    overflow: hidden;
}

.preview-bar-fill {
    height: 100%;
    background: var(--orange);
    border-radius: 2px;
    opacity: 0.6;
}

.preview-bar-fill.labs {
    background: #6366f1;
}

.preview-action {
    font-size: 11px;
    color: var(--orange-text);
    font-weight: 500;
    margin-top: 4px;
}

.preview-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.preview-price-row:last-child {
    border-bottom: none;
}

.preview-commodity {
    font-size: 12px;
    color: var(--text-secondary);
}

.preview-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.preview-change {
    font-size: 10px;
    margin-left: 6px;
}

.preview-change.up {
    color: var(--orange);
}

.preview-service {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-check {
    color: var(--orange);
    font-size: 12px;
}

.preview-pending {
    color: var(--text-tertiary);
    font-size: 12px;
}

/* ============================================
   Feature Sections
   ============================================ */

.feature {
    padding: var(--space-section) 0;
    position: relative;
    background: var(--bg);
}

.feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.feature-reverse .feature-grid {
    grid-template-columns: 1fr 1fr;
}

.feature-reverse .feature-content {
    order: 2;
}

.feature-reverse .feature-visual {
    order: 1;
}

.feature-eyebrow {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 16px;
    letter-spacing: 0;
}

.feature-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.feature-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.feature-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    padding: 10px 20px;
    border: 1px solid var(--border);
    border-radius: 100px;
    transition: all var(--transition);
}

.feature-link:hover {
    border-color: var(--text);
}

.feature-link span {
    transition: transform var(--transition);
}

.feature-link:hover span {
    transform: translateX(3px);
}

/* Feature laptop — sized for feature sections */
.feature-laptop {
    max-width: 100%;
}

.feature-laptop .device-laptop-screen {
    padding: 6px 6px 0;
}

.feature-laptop .feature-card {
    border-radius: 6px 6px 0 0;
}

/* Feature Dashboard — ElevenLabs style clean cards */
.feature-dash {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: visible;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.06);
    font-family: var(--font);
}

.feature-dash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: #FAFAFA;
}

.feature-dash-topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-dash-logo {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: var(--orange);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-dash-breadcrumb {
    font-size: 11px;
    color: var(--text);
    font-weight: 500;
}

.feature-dash-breadcrumb span {
    color: var(--text-muted);
}

.feature-dash-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 500;
    color: var(--green);
}

.feature-dash-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse 2s ease-in-out infinite;
}

.feature-dash-tabs {
    display: flex;
    gap: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
}

.feature-dash-tab {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 8px 10px;
    position: relative;
    cursor: default;
}

.feature-dash-tab.active {
    color: var(--text);
}

.feature-dash-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--text);
    border-radius: 2px 2px 0 0;
}

.feature-dash-metrics {
    display: flex;
    gap: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.feature-dash-metric {
    flex: 1;
    padding: 0 10px;
    border-right: 1px solid var(--border);
}

.feature-dash-metric:first-child { padding-left: 0; }
.feature-dash-metric:last-child { border-right: none; padding-right: 0; }

.feature-dash-metric-label {
    font-size: 9px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.feature-dash-metric-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.feature-dash-metric-unit {
    font-size: 9px;
    font-weight: 400;
    color: var(--text-muted);
}

.feature-dash-metric-delta {
    font-size: 9px;
    color: var(--orange);
    font-weight: 500;
}

.feature-dash-content {
    padding: 14px 16px;
}

.feature-dash-chart {
    width: 100%;
    height: 80px;
    display: block;
    margin-bottom: 8px;
}

.feature-dash-chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.feature-dash-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 16px 14px;
}

.feature-dash-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}

.feature-dash-card-label {
    font-size: 9px;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.feature-dash-card-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.feature-dash-card-sub {
    font-size: 8px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* Feature list items (for Ecosystem services) */
.feature-dash-list {
    padding: 0 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.feature-dash-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-secondary);
}

.feature-dash-list-item:last-child {
    border-bottom: none;
}

.feature-dash-list-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
}

.feature-dash-list-icon.green {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.feature-dash-list-icon.blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.feature-dash-list-icon.amber {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.feature-dash-list-text {
    flex: 1;
    font-weight: 500;
    color: var(--text);
}

.feature-dash-list-detail {
    font-size: 10px;
    color: var(--text-muted);
}

.feature-dash-list-badge {
    font-size: 8px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.feature-dash-list-badge.green { background: rgba(34,197,94,0.1); color: #16a34a; }
.feature-dash-list-badge.blue { background: rgba(59,130,246,0.1); color: #3b82f6; }
.feature-dash-list-badge.amber { background: rgba(245,158,11,0.1); color: #d97706; }

/* Floating notification card */
.feature-notif {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    font-family: var(--font);
    white-space: nowrap;
    cursor: default;
    animation: notifBreathe 5s ease-in-out infinite;
}

.feature-notif:hover {
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.10);
}

/* Icon */
.feature-notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-notif-icon.green {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.feature-notif-icon.orange {
    background: rgba(241, 96, 1, 0.10);
    color: var(--orange);
}

.feature-notif-icon.blue {
    background: rgba(59, 130, 246, 0.10);
    color: #3b82f6;
}

/* Text */
.feature-notif-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.feature-notif-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.feature-notif-desc {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Timestamp */
.feature-notif-time {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 1px;
}

/* Slow, organic breathing */
@keyframes notifBreathe {
    0%, 100% { transform: translateY(0) translateX(0); }
    33% { transform: translateY(-5px) translateX(1px); }
    66% { transform: translateY(-2px) translateX(-1px); }
}

/* Entrance animation — slides up and fades in */
.feature-notif-enter {
    opacity: 0;
    transform: translateY(16px);
    animation: none;
}

.feature-notif-enter.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* After entrance, start breathing */
.feature-notif-enter.breathing {
    animation: notifBreathe 5s ease-in-out infinite;
    transition: none;
}

/* Feature visual cards */
.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.feature-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card);
}

.fv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.fv-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fv-tag {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}

.fv-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-page);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    letter-spacing: 0.02em;
}

.fv-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

.fv-dot.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Feature visual: Brain */
.fv-map-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--bg-page);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 10px;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border);
}

.fv-map-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}

.fv-map-coords {
    flex: 1;
}

.fv-map-alt {
    color: var(--text-muted);
}

.fv-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 20px;
}

.fv-data {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fv-data-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.fv-data-label {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.fv-data-badge {
    font-size: 8px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.fv-data-badge.amber {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.fv-data-badge.blue {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.fv-data-badge.green {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.fv-data-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.fv-bar {
    height: 3px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.fv-bar-fill {
    height: 100%;
    background: var(--orange);
    border-radius: 2px;
    opacity: 0.6;
}

.fv-decision {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    background: linear-gradient(135deg, var(--orange-glow) 0%, rgba(241, 96, 1, 0.08) 100%);
}

.fv-decision-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.fv-decision-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--orange-text);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}

.fv-confidence {
    font-size: 10px;
    font-weight: 600;
    color: var(--orange);
}

.fv-decision-action {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.fv-decision-icon {
    flex-shrink: 0;
}

/* Feature visual: Market */
.fv-trade-list {
    padding: 8px 20px;
}

.fv-trade-row:last-child {
    border-bottom: none;
}

.fv-trade-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fv-trade-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.fv-trade-origin {
    font-size: 11px;
    color: var(--text-muted);
}

.fv-trade-price {
    text-align: right;
}

.fv-trade-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.fv-trade-change {
    display: block;
    font-size: 11px;
    font-weight: 500;
}

.fv-trade-change.up {
    color: var(--orange);
}

/* Market header tabs */
.fv-header-tabs {
    display: flex;
    gap: 0;
}

.fv-htab {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: default;
}

.fv-htab.active {
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--border);
}

/* Market trade extras */
.fv-trade-lot {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    font-family: 'SF Mono', 'Fira Code', monospace;
    margin-top: 2px;
}

.fv-trade-unit {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 12px;
}

.fv-sparkline-wrap {
    flex-shrink: 0;
}

.fv-spark {
    display: block;
}

/* Market trade row: 3-column layout */
.fv-trade-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.fv-passport {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    background: linear-gradient(135deg, var(--orange-glow) 0%, rgba(241, 96, 1, 0.08) 100%);
}

.fv-passport-label {
    display: block;
    font-size: 10px;
    color: var(--orange-text);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
}

.fv-passport-items {
    display: flex;
    gap: 16px;
}

.fv-passport-check {
    font-size: 12px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Feature visual: Ecosystem */
.fv-services {
    padding: 8px 20px 20px;
}

.fv-service {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.fv-service:last-child {
    border-bottom: none;
}

.fv-service-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fv-service-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 12px;
    flex-shrink: 0;
}

.fv-service-icon.done {
    background: var(--orange-dim);
    color: var(--orange);
}

.fv-service-icon.progress {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.fv-service-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.fv-service-detail {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.fv-service-time {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.fv-service-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.fv-service-amount,
.fv-service-coverage {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.fv-service-score {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.fv-service-status {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.02em;
}

.fv-service-status.green {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.fv-service-status.blue {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.fv-service-status.amber {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.fv-mesh-count {
    font-size: 11px;
    color: var(--text-muted);
}

.fv-service-progress-bar {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.fv-service-progress-fill {
    height: 100%;
    background: #d97706;
    border-radius: 2px;
}

/* ============================================
   Compound / Network Effect
   ============================================ */

.compound {
    padding: var(--space-section) 0;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

.compound-header {
    margin-bottom: var(--space-header);
}

.compound-eyebrow {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.compound-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.compound-desc {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 640px;
}

.compound-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    position: relative;
}

.compound-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    transition: border-color var(--transition);
    position: relative;
}

.compound-card:hover {
    border-color: var(--border-hover);
}

/* Connection chevrons between cards */
.compound-card:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: translateY(-50%) rotate(-45deg);
    opacity: 0.25;
    z-index: 2;
}

.compound-card-art {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compound-card-art svg {
    width: 180px;
    height: 180px;
    color: var(--text);
    opacity: 0.65;
}

.compound-card-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 8px;
}

.compound-card-desc {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ============================================
   Scale / Audience
   ============================================ */

.scale {
    padding: var(--space-section) 0;
    position: relative;
    background: var(--bg);
}

.scale-header {
    text-align: left;
    margin-bottom: var(--space-header);
}

.scale-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.scale-desc {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 560px;
}

/* Grid: 12-col for flexible row layouts */
.scale-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.scale-card:nth-child(1) { grid-column: span 7; }
.scale-card:nth-child(2) { grid-column: span 5; }
.scale-card:nth-child(3) { grid-column: span 4; }
.scale-card:nth-child(4) { grid-column: span 4; }
.scale-card:nth-child(5) { grid-column: span 4; }
.scale-card:nth-child(6) { grid-column: span 6; }
.scale-card:nth-child(7) { grid-column: span 6; }

.scale-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    transition: border-color var(--transition);
    position: relative;
    overflow: hidden;
}

.scale-card:hover {
    border-color: var(--border-hover);
}

/* Featured card — dreamy gradient */
.scale-card-featured {
    background:
        radial-gradient(ellipse at 25% 40%, rgba(76, 175, 80, 0.55), transparent 50%),
        radial-gradient(ellipse at 80% 25%, rgba(100, 181, 246, 0.45), transparent 45%),
        radial-gradient(ellipse at 55% 75%, rgba(255, 183, 77, 0.4), transparent 45%),
        radial-gradient(ellipse at 90% 80%, rgba(236, 148, 164, 0.25), transparent 40%),
        linear-gradient(155deg, #14261e, #162436);
    border: none;
    min-height: 420px;
    padding: 36px;
}

.scale-card-featured .scale-card-title {
    color: rgba(255,255,255,0.95);
}

.scale-card-featured .scale-card-desc {
    color: rgba(255,255,255,0.65);
}

/* Chat inside featured card */
.scale-chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: auto;
    padding-bottom: 32px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

.scale-chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
}

.scale-chat-msg.incoming {
    background: rgba(255,255,255,0.92);
    color: #1a1a1a;
    align-self: flex-start;
    border-radius: 14px 14px 14px 4px;
}

.scale-chat-msg.outgoing {
    background: rgba(255,255,255,0.18);
    color: #fff;
    align-self: flex-end;
    border-radius: 14px 14px 4px 14px;
}

.scale-chat-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.88);
    color: #16a34a;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    align-self: flex-start;
}

.scale-chat-action svg {
    flex-shrink: 0;
}

/* Scale chat scroll animation */
.scale-chat-animate {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.scale-chat-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Scale typing indicator */
.scale-chat-typing {
    align-self: flex-start;
    background: rgba(255,255,255,0.92);
    border-radius: 14px 14px 14px 4px;
    display: flex;
    gap: 4px;
    align-items: center;
    opacity: 0;
    max-height: 0;
    padding: 0 16px;
    margin-top: -8px;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

.scale-chat-typing.visible {
    opacity: 1;
    max-height: 40px;
    padding: 10px 16px;
    margin-top: 0;
}

.scale-chat-typing.fade-out {
    opacity: 0;
    max-height: 0;
    padding: 0 16px;
    margin-top: -8px;
    transition: opacity 0.2s ease, max-height 0.25s ease 0.1s, padding 0.25s ease 0.1s, margin 0.25s ease 0.1s;
}

.scale-chat-typing span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #999;
    animation: typingDot 1.4s ease-in-out infinite;
}

.scale-chat-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.scale-chat-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Chart visual for second card */
.scale-card-chart {
    margin-bottom: auto;
    padding-bottom: 24px;
}

.scale-card-chart-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.scale-card-chart-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.scale-card-chart svg {
    width: 100%;
    height: 64px;
    display: block;
}

/* Icon container — ElevenLabs style */
.scale-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #EBEBEB;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    flex-shrink: 0;
    margin-bottom: auto;
}

.scale-card-text {
    margin-top: auto;
}

.scale-card-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.scale-card-desc {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ============================================
   About
   ============================================ */

.about {
    padding: var(--space-section) 0;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

.about-inner {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 56px;
}

.about-headline {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    max-width: 700px;
    margin-bottom: 60px;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.about-col p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.about-col p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Contact
   ============================================ */

.contact {
    padding: 140px 0;
    background: var(--bg);
}

.contact-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.contact-title {
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 500;
    line-height: 1.08;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.contact-desc {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.7;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.form-group input,
.form-group select,
.form-group textarea {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 400;
    padding: 12px 16px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    border-radius: 8px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-dim);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23999' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

/* ============================================
   Stories / People Section — Staggered Masonry
   ============================================ */

/* ============================================
   Vision — "Redefining what's possible"
   ============================================ */
.vision {
    padding: var(--space-section) 0;
    background: var(--bg);
    position: relative;
}

.vision-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--space-header);
}

.vision-header-left {
    max-width: 600px;
}

.vision-eyebrow {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.vision-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
}

.vision-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    padding: 10px 20px;
    border: 1px solid var(--border);
    border-radius: 100px;
    transition: all var(--transition);
    white-space: nowrap;
}

.vision-link:hover {
    border-color: var(--text);
}

.vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.vision-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    transition: border-color var(--transition);
}

.vision-card:hover {
    border-color: var(--border-hover);
}

.vision-card-art {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vision-card-art svg {
    width: 180px;
    height: 180px;
    color: var(--text);
    opacity: 0.65;
}

.vision-card-text {}

.vision-card-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 8px;
}

.vision-card-desc {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ============================================
   Footer
   ============================================ */

.footer {
    padding: 80px 0 40px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 48px;
    margin-bottom: 64px;
}

.footer .nav-logo {
    color: var(--text);
    font-size: 20px;
}

.footer-tagline {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-top: 12px;
    line-height: 1.6;
}

.footer-grid {
    display: flex;
    gap: 64px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 140px;
}

.footer-col-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 4px;
}

.footer-col a {
    font-size: 14px;
    color: var(--text-tertiary);
    transition: color var(--transition);
}

.footer-col a:hover {
    color: var(--text);
}

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-bottom span {
    font-size: 12px;
    color: var(--text-muted);
}

.footer-bottom-links {
    display: flex;
    gap: 24px;
}

.footer-bottom-links a {
    font-size: 12px;
    color: var(--text-muted);
    transition: color var(--transition);
}

.footer-bottom-links a:hover {
    color: var(--text);
}

/* ============================================
   Product page (subpages) — expanded
   ============================================ */

.page-hero {
    padding: 160px 0 80px;
    position: relative;
    overflow: hidden;
    background: var(--bg);
}

.page-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.page-hero-tag {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
}

.page-hero-index {
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.page-hero-title {
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    max-width: 600px;
}

.page-hero-desc {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 520px;
}

.page-section {
    padding: 100px 0;
    background: var(--bg);
}

.page-section:nth-child(even) {
    background: var(--bg);
}

.page-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.page-section-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.page-capabilities-list {
    list-style: none;
}

.page-capabilities-list li {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary);
    padding: 10px 0;
    line-height: 1.6;
}

.page-highlight-box {
    background: var(--bg);
    border-left: 2px solid var(--border);
    padding: 32px 0 32px 32px;
    border-radius: 0;
}

.page-highlight-box h3 {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 16px;
}

.page-highlight-box p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-secondary);
}

.page-cta {
    padding: 120px 0;
    background: var(--bg);
}

.page-cta-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.page-cta-desc {
    font-size: 17px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 32px;
    max-width: 440px;
    line-height: 1.7;
}

/* ============================================
   Product page — new components (redesign)
   ============================================ */

/* Hero stats pills */
.page-hero-stats {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.page-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.page-hero-stat span {
    color: var(--text-tertiary);
    font-weight: 400;
}

/* Hero user badges */
.page-hero-users {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.page-hero-user {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
}

/* Section title & description (used in new sections) */
.page-section-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.page-section-desc {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 640px;
    margin-bottom: 48px;
}

/* Agent grid & cards */
.agent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.agent-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--card-radius-lg);
    padding: 0;
    transition: border-color var(--transition-spring), box-shadow var(--transition-spring), transform var(--transition-spring), opacity 0.3s ease, background var(--transition-gradient);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Header zone gradient reveal */
.agent-card-header-zone {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px 0;
    transition: background var(--transition-gradient);
    border-radius: var(--card-radius-lg) var(--card-radius-lg) 0 0;
    position: relative;
}

.agent-card-header-zone .agent-card-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color var(--transition-spring), background var(--transition-spring);
    color: var(--text-tertiary);
}

.agent-card-header-zone .agent-card-icon-box svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

.agent-card:hover .agent-card-icon-box svg,
.agent-card.open .agent-card-icon-box svg {
    animation: iconFloat 1.5s ease infinite;
}

/* Agent card trigger/body get internal padding */
.agent-card .agent-card-trigger {
    padding: 16px 24px;
}

.agent-card .agent-card-body {
    padding: 0 24px;
}

/* Agent card hover: lift + deep shadow */
.agent-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

/* Group hover: dim siblings, highlight hovered/open */
.agent-grid:hover .agent-card {
    opacity: 0.6;
    transform: scale(0.99);
}
.agent-grid:hover .agent-card:hover,
.agent-grid:hover .agent-card.open {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

/* ---- 38 UNIQUE AGENT GRADIENTS ---- */
/* Brain (12) — Cool blues/cyans */
[data-product="brain"] .agent-card:nth-child(1):hover .agent-card-header-zone,
[data-product="brain"] .agent-card:nth-child(1).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 20% 80%, rgba(100,181,246,0.3), transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(77,208,225,0.2), transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(61,141,181,0.15), transparent 70%), #1a2a35;
}
[data-product="brain"] .agent-card:nth-child(2):hover .agent-card-header-zone,
[data-product="brain"] .agent-card:nth-child(2).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 70% 70%, rgba(77,208,225,0.35), transparent 60%), radial-gradient(ellipse at 20% 30%, rgba(100,181,246,0.2), transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(38,198,218,0.15), transparent 70%), #1a2a35;
}
[data-product="brain"] .agent-card:nth-child(3):hover .agent-card-header-zone,
[data-product="brain"] .agent-card:nth-child(3).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 30% 20%, rgba(129,212,250,0.3), transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(100,181,246,0.25), transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(61,141,181,0.18), transparent 65%), #1a2a35;
}
[data-product="brain"] .agent-card:nth-child(4):hover .agent-card-header-zone,
[data-product="brain"] .agent-card:nth-child(4).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 60% 30%, rgba(77,208,225,0.28), transparent 55%), radial-gradient(ellipse at 20% 70%, rgba(128,222,234,0.22), transparent 60%), radial-gradient(ellipse at 80% 60%, rgba(61,141,181,0.15), transparent 70%), #1a2a35;
}
[data-product="brain"] .agent-card:nth-child(5):hover .agent-card-header-zone,
[data-product="brain"] .agent-card:nth-child(5).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 80% 40%, rgba(100,181,246,0.32), transparent 58%), radial-gradient(ellipse at 30% 80%, rgba(77,208,225,0.2), transparent 55%), radial-gradient(ellipse at 50% 20%, rgba(56,142,60,0.12), transparent 70%), #1a2a35;
}
[data-product="brain"] .agent-card:nth-child(6):hover .agent-card-header-zone,
[data-product="brain"] .agent-card:nth-child(6).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 40% 60%, rgba(129,212,250,0.3), transparent 55%), radial-gradient(ellipse at 70% 20%, rgba(100,181,246,0.25), transparent 60%), radial-gradient(ellipse at 20% 40%, rgba(61,141,181,0.18), transparent 65%), #1a2a35;
}
[data-product="brain"] .agent-card:nth-child(7):hover .agent-card-header-zone,
[data-product="brain"] .agent-card:nth-child(7).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 50% 80%, rgba(77,208,225,0.3), transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(144,202,249,0.25), transparent 60%), radial-gradient(ellipse at 20% 50%, rgba(61,141,181,0.15), transparent 70%), #1a2a35;
}
[data-product="brain"] .agent-card:nth-child(8):hover .agent-card-header-zone,
[data-product="brain"] .agent-card:nth-child(8).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 20% 40%, rgba(100,181,246,0.28), transparent 55%), radial-gradient(ellipse at 70% 60%, rgba(255,183,77,0.15), transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(61,141,181,0.18), transparent 65%), #1a2a35;
}
[data-product="brain"] .agent-card:nth-child(9):hover .agent-card-header-zone,
[data-product="brain"] .agent-card:nth-child(9).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 60% 70%, rgba(100,181,246,0.3), transparent 55%), radial-gradient(ellipse at 30% 20%, rgba(186,147,230,0.18), transparent 55%), radial-gradient(ellipse at 80% 40%, rgba(61,141,181,0.15), transparent 70%), #1a2a35;
}
[data-product="brain"] .agent-card:nth-child(10):hover .agent-card-header-zone,
[data-product="brain"] .agent-card:nth-child(10).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 70% 50%, rgba(77,208,225,0.28), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(100,181,246,0.22), transparent 60%), radial-gradient(ellipse at 50% 20%, rgba(61,141,181,0.18), transparent 65%), #1a2a35;
}
[data-product="brain"] .agent-card:nth-child(11):hover .agent-card-header-zone,
[data-product="brain"] .agent-card:nth-child(11).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 30% 30%, rgba(144,202,249,0.3), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(186,147,230,0.2), transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(61,141,181,0.15), transparent 70%), #1a2a35;
}
[data-product="brain"] .agent-card:nth-child(12):hover .agent-card-header-zone,
[data-product="brain"] .agent-card:nth-child(12).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 40% 20%, rgba(77,208,225,0.32), transparent 55%), radial-gradient(ellipse at 70% 70%, rgba(100,181,246,0.22), transparent 60%), radial-gradient(ellipse at 20% 60%, rgba(61,141,181,0.18), transparent 65%), #1a2a35;
}

/* Market (8) — Warm oranges/ambers */
[data-product="market"] .agent-card:nth-child(1):hover .agent-card-header-zone,
[data-product="market"] .agent-card:nth-child(1).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 20% 80%, rgba(255,183,77,0.3), transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(255,138,101,0.2), transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(212,133,74,0.15), transparent 70%), #2a1f15;
}
[data-product="market"] .agent-card:nth-child(2):hover .agent-card-header-zone,
[data-product="market"] .agent-card:nth-child(2).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 70% 70%, rgba(255,138,101,0.35), transparent 60%), radial-gradient(ellipse at 20% 30%, rgba(255,183,77,0.2), transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(255,167,38,0.15), transparent 70%), #2a1f15;
}
[data-product="market"] .agent-card:nth-child(3):hover .agent-card-header-zone,
[data-product="market"] .agent-card:nth-child(3).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 30% 20%, rgba(255,204,128,0.3), transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(255,183,77,0.25), transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(212,133,74,0.18), transparent 65%), #2a1f15;
}
[data-product="market"] .agent-card:nth-child(4):hover .agent-card-header-zone,
[data-product="market"] .agent-card:nth-child(4).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 60% 30%, rgba(255,138,101,0.28), transparent 55%), radial-gradient(ellipse at 20% 70%, rgba(255,224,130,0.22), transparent 60%), radial-gradient(ellipse at 80% 60%, rgba(212,133,74,0.15), transparent 70%), #2a1f15;
}
[data-product="market"] .agent-card:nth-child(5):hover .agent-card-header-zone,
[data-product="market"] .agent-card:nth-child(5).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 80% 40%, rgba(255,183,77,0.32), transparent 58%), radial-gradient(ellipse at 30% 80%, rgba(255,138,101,0.2), transparent 55%), radial-gradient(ellipse at 50% 20%, rgba(76,175,80,0.12), transparent 70%), #2a1f15;
}
[data-product="market"] .agent-card:nth-child(6):hover .agent-card-header-zone,
[data-product="market"] .agent-card:nth-child(6).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 40% 60%, rgba(255,204,128,0.3), transparent 55%), radial-gradient(ellipse at 70% 20%, rgba(255,183,77,0.25), transparent 60%), radial-gradient(ellipse at 20% 40%, rgba(212,133,74,0.18), transparent 65%), #2a1f15;
}
[data-product="market"] .agent-card:nth-child(7):hover .agent-card-header-zone,
[data-product="market"] .agent-card:nth-child(7).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 50% 80%, rgba(255,138,101,0.3), transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(255,224,130,0.25), transparent 60%), radial-gradient(ellipse at 20% 50%, rgba(212,133,74,0.15), transparent 70%), #2a1f15;
}
[data-product="market"] .agent-card:nth-child(8):hover .agent-card-header-zone,
[data-product="market"] .agent-card:nth-child(8).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 20% 40%, rgba(255,183,77,0.28), transparent 55%), radial-gradient(ellipse at 70% 60%, rgba(255,138,101,0.22), transparent 55%), radial-gradient(ellipse at 50% 80%, rgba(212,133,74,0.18), transparent 65%), #2a1f15;
}

/* Ecosystem (10) — Purple/violet */
[data-product="ecosystem"] .agent-card:nth-child(1):hover .agent-card-header-zone,
[data-product="ecosystem"] .agent-card:nth-child(1).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 20% 80%, rgba(186,147,230,0.3), transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(149,117,205,0.2), transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(138,108,184,0.15), transparent 70%), #1f1a2a;
}
[data-product="ecosystem"] .agent-card:nth-child(2):hover .agent-card-header-zone,
[data-product="ecosystem"] .agent-card:nth-child(2).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 70% 70%, rgba(149,117,205,0.35), transparent 60%), radial-gradient(ellipse at 20% 30%, rgba(186,147,230,0.2), transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(171,134,218,0.15), transparent 70%), #1f1a2a;
}
[data-product="ecosystem"] .agent-card:nth-child(3):hover .agent-card-header-zone,
[data-product="ecosystem"] .agent-card:nth-child(3).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 30% 20%, rgba(206,178,242,0.3), transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(186,147,230,0.25), transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(138,108,184,0.18), transparent 65%), #1f1a2a;
}
[data-product="ecosystem"] .agent-card:nth-child(4):hover .agent-card-header-zone,
[data-product="ecosystem"] .agent-card:nth-child(4).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 60% 30%, rgba(149,117,205,0.28), transparent 55%), radial-gradient(ellipse at 20% 70%, rgba(206,178,242,0.22), transparent 60%), radial-gradient(ellipse at 80% 60%, rgba(138,108,184,0.15), transparent 70%), #1f1a2a;
}
[data-product="ecosystem"] .agent-card:nth-child(5):hover .agent-card-header-zone,
[data-product="ecosystem"] .agent-card:nth-child(5).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 80% 40%, rgba(186,147,230,0.32), transparent 58%), radial-gradient(ellipse at 30% 80%, rgba(149,117,205,0.2), transparent 55%), radial-gradient(ellipse at 50% 20%, rgba(100,181,246,0.12), transparent 70%), #1f1a2a;
}
[data-product="ecosystem"] .agent-card:nth-child(6):hover .agent-card-header-zone,
[data-product="ecosystem"] .agent-card:nth-child(6).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 40% 60%, rgba(206,178,242,0.3), transparent 55%), radial-gradient(ellipse at 70% 20%, rgba(186,147,230,0.25), transparent 60%), radial-gradient(ellipse at 20% 40%, rgba(138,108,184,0.18), transparent 65%), #1f1a2a;
}
[data-product="ecosystem"] .agent-card:nth-child(7):hover .agent-card-header-zone,
[data-product="ecosystem"] .agent-card:nth-child(7).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 50% 80%, rgba(149,117,205,0.3), transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(206,178,242,0.25), transparent 60%), radial-gradient(ellipse at 20% 50%, rgba(138,108,184,0.15), transparent 70%), #1f1a2a;
}
[data-product="ecosystem"] .agent-card:nth-child(8):hover .agent-card-header-zone,
[data-product="ecosystem"] .agent-card:nth-child(8).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 20% 40%, rgba(186,147,230,0.28), transparent 55%), radial-gradient(ellipse at 70% 60%, rgba(149,117,205,0.22), transparent 55%), radial-gradient(ellipse at 50% 80%, rgba(138,108,184,0.18), transparent 65%), #1f1a2a;
}
[data-product="ecosystem"] .agent-card:nth-child(9):hover .agent-card-header-zone,
[data-product="ecosystem"] .agent-card:nth-child(9).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 70% 50%, rgba(206,178,242,0.3), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(186,147,230,0.22), transparent 60%), radial-gradient(ellipse at 50% 20%, rgba(138,108,184,0.18), transparent 65%), #1f1a2a;
}
[data-product="ecosystem"] .agent-card:nth-child(10):hover .agent-card-header-zone,
[data-product="ecosystem"] .agent-card:nth-child(10).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 30% 30%, rgba(186,147,230,0.3), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(100,181,246,0.18), transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(138,108,184,0.15), transparent 70%), #1f1a2a;
}

/* Labs (8) — Earth greens/olives */
[data-product="labs"] .agent-card:nth-child(1):hover .agent-card-header-zone,
[data-product="labs"] .agent-card:nth-child(1).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 20% 80%, rgba(139,195,74,0.3), transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(102,187,106,0.2), transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(109,140,58,0.15), transparent 70%), #1a2515;
}
[data-product="labs"] .agent-card:nth-child(2):hover .agent-card-header-zone,
[data-product="labs"] .agent-card:nth-child(2).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 70% 70%, rgba(102,187,106,0.35), transparent 60%), radial-gradient(ellipse at 20% 30%, rgba(139,195,74,0.2), transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(76,175,80,0.15), transparent 70%), #1a2515;
}
[data-product="labs"] .agent-card:nth-child(3):hover .agent-card-header-zone,
[data-product="labs"] .agent-card:nth-child(3).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 30% 20%, rgba(174,213,129,0.3), transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(139,195,74,0.25), transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(109,140,58,0.18), transparent 65%), #1a2515;
}
[data-product="labs"] .agent-card:nth-child(4):hover .agent-card-header-zone,
[data-product="labs"] .agent-card:nth-child(4).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 60% 30%, rgba(102,187,106,0.28), transparent 55%), radial-gradient(ellipse at 20% 70%, rgba(174,213,129,0.22), transparent 60%), radial-gradient(ellipse at 80% 60%, rgba(109,140,58,0.15), transparent 70%), #1a2515;
}
[data-product="labs"] .agent-card:nth-child(5):hover .agent-card-header-zone,
[data-product="labs"] .agent-card:nth-child(5).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 80% 40%, rgba(139,195,74,0.32), transparent 58%), radial-gradient(ellipse at 30% 80%, rgba(102,187,106,0.2), transparent 55%), radial-gradient(ellipse at 50% 20%, rgba(255,183,77,0.12), transparent 70%), #1a2515;
}
[data-product="labs"] .agent-card:nth-child(6):hover .agent-card-header-zone,
[data-product="labs"] .agent-card:nth-child(6).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 40% 60%, rgba(174,213,129,0.3), transparent 55%), radial-gradient(ellipse at 70% 20%, rgba(139,195,74,0.25), transparent 60%), radial-gradient(ellipse at 20% 40%, rgba(109,140,58,0.18), transparent 65%), #1a2515;
}
[data-product="labs"] .agent-card:nth-child(7):hover .agent-card-header-zone,
[data-product="labs"] .agent-card:nth-child(7).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 50% 80%, rgba(102,187,106,0.3), transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(174,213,129,0.25), transparent 60%), radial-gradient(ellipse at 20% 50%, rgba(109,140,58,0.15), transparent 70%), #1a2515;
}
[data-product="labs"] .agent-card:nth-child(8):hover .agent-card-header-zone,
[data-product="labs"] .agent-card:nth-child(8).open .agent-card-header-zone {
    background: radial-gradient(ellipse at 20% 40%, rgba(139,195,74,0.28), transparent 55%), radial-gradient(ellipse at 70% 60%, rgba(102,187,106,0.22), transparent 55%), radial-gradient(ellipse at 50% 80%, rgba(109,140,58,0.18), transparent 65%), #1a2515;
}

/* Header zone text color on gradient reveal */
.agent-card:hover .agent-card-header-zone .agent-card-icon-box,
.agent-card.open .agent-card-header-zone .agent-card-icon-box {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
}

/* Open card gradient animation */
.agent-card.open .agent-card-header-zone {
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
}

/* Expandable agent card (collapsed default) */
.agent-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.agent-card.open .agent-card-body {
    max-height: 400px;
}

.agent-card-trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.agent-card-trigger-left {
    flex: 1;
    min-width: 0;
}

.agent-card-trigger-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.agent-card-chevron {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.agent-card.open .agent-card-chevron {
    transform: rotate(180deg);
}

.agent-card-oneliner {
    font-size: 14px;
    color: var(--text-tertiary);
    margin-top: 4px;
    line-height: 1.5;
}

.agent-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.agent-card-name {
    font-size: 17px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.agent-card-desc {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.agent-card-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-card-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.agent-card-row-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 52px;
    flex-shrink: 0;
    padding-top: 2px;
}

.agent-card-row-value {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Input tags inside agent cards */
.agent-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.agent-tag {
    display: inline-flex;
    padding: 3px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* Impact metric */
.agent-card-impact {
    font-size: 14px;
    font-weight: 500;
    color: var(--orange-text);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Autonomy badges */
.agent-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}

.agent-badge-autonomous {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.agent-badge-approval {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.agent-badge-action {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

/* Workflow section */
.workflow {
    display: flex;
    align-items: flex-start;
    gap: 0;
    position: relative;
}

.workflow-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    padding-right: 24px;
}

.workflow-step:last-child {
    padding-right: 0;
}

.workflow-step-number {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--text);
    color: var(--white);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.workflow-step-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.workflow-step-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Connector line between workflow steps */
.workflow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 36px;
    right: 0;
    height: 1px;
    background: var(--border);
    z-index: 0;
}

/* Interface grid & cards */
.interface-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.interface-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.interface-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.interface-card-user {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 4px;
}

.interface-card-channel {
    font-size: 13px;
    font-weight: 500;
    color: var(--orange-text);
    margin-bottom: 12px;
}

.interface-card-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Data sources grid & cards */
.datasource-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.datasource-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    transition: border-color 0.3s ease;
}

.datasource-card:hover {
    border-color: var(--border-hover);
}

.datasource-card-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 8px;
}

.datasource-card-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}

.datasource-card-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.datasource-card-tag {
    display: inline-flex;
    padding: 3px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-tertiary);
}

/* Cross-product connections */
.connections-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.connection-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.connection-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.connection-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.connection-card-product {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}

.connection-card-arrow {
    font-size: 13px;
    color: var(--text-muted);
}

.connection-card-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Onboarding timeline */
.onboarding {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    max-width: 640px;
}

.onboarding-step {
    display: flex;
    gap: 20px;
    padding-bottom: 32px;
    position: relative;
}

.onboarding-step:last-child {
    padding-bottom: 0;
}

/* Vertical line connecting steps */
.onboarding-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 36px;
    left: 17px;
    width: 1px;
    bottom: 0;
    background: var(--border);
}

.onboarding-step-number {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--text);
    color: var(--white);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.onboarding-step-content {
    flex: 1;
    padding-top: 6px;
}

.onboarding-step-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 4px;
}

.onboarding-step-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
}

.onboarding-step-time {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ============================================
   Pricing page (subpage)
   ============================================ */

.pricing-page-hero {
    padding: 160px 0 80px;
    position: relative;
    overflow: hidden;
    background: var(--bg);
}

.pricing-page-hero .section-title-lg {
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--text);
    letter-spacing: -0.02em;
    max-width: 600px;
    margin-bottom: 20px;
}

.pricing-page-hero .section-number {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.pricing-page-hero .section-desc {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    max-width: 520px;
    line-height: 1.6;
}

.pricing-page-section {
    padding: 0 0 100px;
    background: var(--bg);
}

/* Card columns — no card background, dashed column separators */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    border-right: 1px dashed var(--border);
}

.pricing-card:last-child {
    border-right: none;
}

/* Header box — rounded, inside the column */
.pricing-card-header {
    padding: 32px 24px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border);
    transition: background 0.5s ease, border-color 0.5s ease;
}

.pricing-card-header h3 {
    font-size: 26px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    transition: color 0.5s ease;
}

.pricing-model {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-tertiary);
    transition: color 0.5s ease;
}

/* ==============================================
   Default state: Market (2nd card) shows its gradient on page load
   ============================================== */
.pricing-card:nth-child(2) .pricing-card-header {
    background:
        radial-gradient(ellipse at 25% 35%, rgba(255, 183, 77, 0.55), transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(255, 138, 101, 0.45), transparent 45%),
        radial-gradient(ellipse at 50% 75%, rgba(255, 213, 79, 0.4), transparent 45%),
        radial-gradient(ellipse at 15% 80%, rgba(239, 154, 154, 0.3), transparent 40%),
        linear-gradient(155deg, #2a1f12, #2e2118);
    border-color: transparent;
}

.pricing-card:nth-child(2) .pricing-card-header h3 {
    color: rgba(255, 255, 255, 0.95);
}

.pricing-card:nth-child(2) .pricing-card-header .pricing-model {
    color: rgba(255, 255, 255, 0.55);
}

/* ==============================================
   When grid is hovered: ALL cards reset to gray
   ============================================== */
.pricing-grid:hover .pricing-card .pricing-card-header {
    background: var(--bg-card);
    border-color: var(--border);
}

.pricing-grid:hover .pricing-card .pricing-card-header h3 {
    color: var(--text);
}

.pricing-grid:hover .pricing-card .pricing-card-header .pricing-model {
    color: var(--text-tertiary);
}

/* ==============================================
   Hovered card reveals its rich gradient
   ============================================== */

/* Brain — cool (same as home page product card) */
.pricing-grid:hover .pricing-card:nth-child(1):hover .pricing-card-header {
    background:
        radial-gradient(ellipse at 20% 40%, rgba(100, 181, 246, 0.55), transparent 50%),
        radial-gradient(ellipse at 75% 25%, rgba(77, 208, 225, 0.45), transparent 45%),
        radial-gradient(ellipse at 55% 80%, rgba(129, 212, 250, 0.4), transparent 45%),
        radial-gradient(ellipse at 90% 75%, rgba(165, 214, 167, 0.3), transparent 40%),
        linear-gradient(155deg, #122a3a, #1a2e35);
    border-color: transparent;
}

/* Market — warm */
.pricing-grid:hover .pricing-card:nth-child(2):hover .pricing-card-header {
    background:
        radial-gradient(ellipse at 25% 35%, rgba(255, 183, 77, 0.55), transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(255, 138, 101, 0.45), transparent 45%),
        radial-gradient(ellipse at 50% 75%, rgba(255, 213, 79, 0.4), transparent 45%),
        radial-gradient(ellipse at 15% 80%, rgba(239, 154, 154, 0.3), transparent 40%),
        linear-gradient(155deg, #2a1f12, #2e2118);
    border-color: transparent;
}

/* Ecosystem — purple */
.pricing-grid:hover .pricing-card:nth-child(3):hover .pricing-card-header {
    background:
        radial-gradient(ellipse at 20% 45%, rgba(186, 147, 230, 0.55), transparent 50%),
        radial-gradient(ellipse at 80% 25%, rgba(149, 117, 205, 0.45), transparent 45%),
        radial-gradient(ellipse at 55% 80%, rgba(206, 147, 216, 0.4), transparent 45%),
        radial-gradient(ellipse at 85% 75%, rgba(121, 134, 203, 0.3), transparent 40%),
        linear-gradient(155deg, #1e1530, #221a35);
    border-color: transparent;
}

/* Labs — earth */
.pricing-grid:hover .pricing-card:nth-child(4):hover .pricing-card-header {
    background:
        radial-gradient(ellipse at 25% 40%, rgba(76, 175, 80, 0.5), transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(174, 168, 100, 0.45), transparent 45%),
        radial-gradient(ellipse at 50% 75%, rgba(200, 180, 100, 0.4), transparent 45%),
        radial-gradient(ellipse at 15% 80%, rgba(139, 195, 74, 0.3), transparent 40%),
        linear-gradient(155deg, #1a2614, #24261a);
    border-color: transparent;
}

/* White text for all hovered gradient headers */
.pricing-grid:hover .pricing-card:hover .pricing-card-header h3 {
    color: rgba(255, 255, 255, 0.95);
}

.pricing-grid:hover .pricing-card:hover .pricing-card-header .pricing-model {
    color: rgba(255, 255, 255, 0.55);
}

/* CTA button per card */
.pricing-card-btn {
    display: block;
    text-align: center;
    padding: 14px 24px;
    margin: 16px 0 0;
    background: var(--text);
    color: var(--white);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition);
}

.pricing-card-btn:hover {
    background: #333;
}

/* Feature list */
.pricing-features {
    padding: 28px 0 32px;
    flex: 1;
}

.pricing-feature {
    padding: 12px 0;
    border-bottom: 1px dashed var(--border);
}

.pricing-feature:last-child {
    border-bottom: none;
}

.pricing-feature span {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* FAQs */
.pricing-faqs {
    padding: 100px 0;
    background: var(--bg);
}

.pricing-faqs-title {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 32px;
}

.pricing-faq-list {
}

.pricing-faq-item {
    border-bottom: 1px dashed var(--border);
}

.pricing-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 24px;
    font-family: var(--font);
}

.pricing-faq-question span:first-child {
    font-size: 16px;
    font-weight: 400;
    color: var(--text);
    line-height: 1.5;
}

.pricing-faq-icon {
    font-size: 20px;
    font-weight: 300;
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: transform 0.3s ease;
    width: 24px;
    text-align: center;
}

.pricing-faq-item.open .pricing-faq-icon {
    transform: rotate(45deg);
}

.pricing-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease;
}

.pricing-faq-item.open .pricing-faq-answer {
    max-height: 300px;
}

.pricing-faq-answer p {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.7;
    padding-bottom: 24px;
    max-width: 640px;
}

/* Pricing FAQ Two-Column Grid */
.pricing-faqs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.pricing-faqs-col {
    min-width: 0;
}

.pricing-blog-list {
    display: flex;
    flex-direction: column;
}

.pricing-blog-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px dashed var(--border);
    text-decoration: none;
    transition: opacity 0.2s;
}

.pricing-blog-item:hover {
    opacity: 0.7;
}

.pricing-blog-item-content {
    min-width: 0;
}

.pricing-blog-item-type {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #D4A855;
    margin-bottom: 6px;
}

.pricing-blog-item-title {
    font-size: 16px;
    font-weight: 400;
    color: var(--text);
    line-height: 1.4;
}

.pricing-blog-item-arrow {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--text-tertiary);
    transition: transform 0.2s;
}

.pricing-blog-item:hover .pricing-blog-item-arrow {
    transform: translate(2px, -2px);
}

.pricing-blog-item-upcoming {
    pointer-events: none;
}

.pricing-blog-item-upcoming .pricing-blog-item-type {
    color: var(--text-muted);
}

.pricing-blog-item-upcoming .pricing-blog-item-title {
    color: var(--text-tertiary);
}

.pricing-blog-item-upcoming .pricing-blog-item-arrow {
    display: none;
}

.pricing-blog-item-upcoming-badge {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 3px 10px;
    border-radius: 100px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.pricing-faqs-view-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    padding: 10px 24px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.pricing-faqs-view-link:hover {
    border-color: var(--text-tertiary);
    color: var(--text);
}

/* Headline price on overview cards */
.pricing-headline-price {
    display: block;
    font-size: 28px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-top: 12px;
    line-height: 1.2;
    transition: color 0.5s ease;
}

.pricing-price-unit {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-tertiary);
    transition: color 0.5s ease;
}

.pricing-card:nth-child(2) .pricing-card-header .pricing-headline-price {
    color: rgba(255, 255, 255, 0.95);
}

.pricing-card:nth-child(2) .pricing-card-header .pricing-price-unit {
    color: rgba(255, 255, 255, 0.55);
}

.pricing-grid:hover .pricing-card .pricing-card-header .pricing-headline-price {
    color: var(--text);
}

.pricing-grid:hover .pricing-card .pricing-card-header .pricing-price-unit {
    color: var(--text-tertiary);
}

.pricing-grid:hover .pricing-card:hover .pricing-card-header .pricing-headline-price {
    color: rgba(255, 255, 255, 0.95);
}

.pricing-grid:hover .pricing-card:hover .pricing-card-header .pricing-price-unit {
    color: rgba(255, 255, 255, 0.55);
}

/* ============================================
   Pricing Detail Sections
   ============================================ */
.pricing-detail {
    padding: 80px 0;
    background: var(--bg);
    border-top: 1px dashed var(--border);
}

.pricing-detail-header {
    margin-bottom: 48px;
    max-width: 640px;
}

.pricing-detail-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 12px;
}

.pricing-detail-label .nav-product-dot {
    width: 8px;
    height: 8px;
}

.pricing-detail-desc {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
}

.pricing-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.pricing-tier {
    padding: 32px 24px;
    border-right: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pricing-tier:last-child {
    border-right: none;
}

.pricing-tier-popular {
    background: var(--bg-card);
    border-radius: 16px;
    border-right: none;
}

.pricing-tier-popular + .pricing-tier {
    border-right: none;
}

.pricing-tier-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pricing-tier-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.pricing-tier-range {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
}

.pricing-tier-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.pricing-tier-amount {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
}

.pricing-tier-unit {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
}

.pricing-tier-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pricing-tier-features span {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
}

.pricing-tier-features a {
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
}

.pricing-tier-features a:hover {
    text-decoration: underline;
}

/* Callouts below tier grids */
.pricing-detail-callouts {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pricing-detail-callout {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    padding: 16px 20px;
    background: var(--bg-card);
    border-radius: 12px;
    max-width: 640px;
}

.pricing-detail-callout strong {
    color: var(--text);
    font-weight: 600;
}

.pricing-detail-callout a {
    color: var(--text);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--text-tertiary);
    text-underline-offset: 2px;
}

.pricing-detail-callout a:hover {
    text-decoration-color: var(--text);
}

.pricing-detail-callout-grant {
    border-left: 3px solid #4CAF50;
}

/* ============================================
   Pricing — Platform Economics (Compound Effect)
   ============================================ */
.pricing-compound {
    padding: 100px 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.pricing-compound-inner {
    max-width: 960px;
}

.pricing-compound-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.pricing-compound-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.pricing-compound-desc {
    font-size: 17px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 640px;
    margin-bottom: 48px;
}

.pricing-compound-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.pricing-compound-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 32px 28px;
}

.pricing-compound-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
}

.pricing-compound-card p {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ============================================
   Pricing — Start Section (Two-Card CTA)
   ============================================ */
.pricing-start {
    padding: 100px 0 120px;
    background: var(--bg);
}

.pricing-start-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 56px;
}

.pricing-start-title {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 16px;
}

.pricing-start-desc {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.pricing-start-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.pricing-start-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
}

.pricing-start-card-grant {
    border-left: 4px solid #4CAF50;
}

.pricing-start-card-label {
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: 24px;
}

.pricing-start-card-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 24px;
}

.pricing-start-card-stat {
    margin-bottom: 24px;
}

.pricing-start-card-stats .pricing-start-card-stat {
    margin-bottom: 0;
}

.pricing-start-card-stat-value {
    display: block;
    font-size: 36px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.pricing-start-card-stat-unit {
    display: block;
    font-size: 14px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.pricing-start-card-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    flex-grow: 1;
    margin-bottom: 28px;
}

.pricing-start-card-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pricing-start-text-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
    transition: color var(--transition);
}

.pricing-start-text-link:hover {
    color: var(--text);
}

/* ============================================
   Case Study — Compound Effect Section
   ============================================ */
.story-compound {
    margin-top: 56px;
    margin-bottom: 32px;
    padding: 32px 28px;
    background: var(--bg-card);
    border-radius: 16px;
    border-left: 3px solid var(--text-tertiary);
}

.story-compound-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.story-compound p {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* Story hook — large display quote at top */
.story-hook {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 400;
    line-height: 1.35;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 48px;
    max-width: 640px;
}

/* ============================================
   Customers Page
   ============================================ */

.customers-hero {
    padding: 160px 0 80px;
    position: relative;
    overflow: hidden;
    background: var(--bg);
}

.customers-hero-title {
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.customers-hero-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 60px;
}

.customers-logo-bar {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-top: 40px;
}

.customers-logo-bar-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
}

.customers-logos {
    display: flex;
    align-items: center;
    gap: 40px;
}

.customer-logo-item {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: -0.01em;
    opacity: 0.5;
    transition: opacity var(--transition);
}

.customer-logo-item:hover {
    opacity: 0.8;
}

/* Featured Stories Grid — 1 large + 2 small */
.customers-featured {
    padding: 0 0 100px;
    background: var(--bg);
}

.customers-featured-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
}

.customers-featured-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.customers-featured-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    text-decoration: none;
    will-change: transform;
}

.customers-featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Gradient area fills entire card as background */
.customers-featured-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.customers-featured-large {
    min-height: 480px;
}

.customers-featured-small {
    flex: 1;
}

/* Logo text — white, positioned top-left */
.customers-featured-logo-text {
    position: absolute;
    top: 32px;
    left: 32px;
    font-size: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: -0.02em;
    opacity: 1;
    z-index: 1;
}

.customers-featured-small .customers-featured-logo-text {
    font-size: 17px;
    top: 28px;
    left: 28px;
}

/* Content — positioned at bottom over gradient */
.customers-featured-content {
    position: relative;
    z-index: 1;
    padding: 32px;
    margin-top: auto;
}

.customers-featured-small .customers-featured-content {
    padding: 28px;
}

.customers-featured-title {
    font-size: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}

.customers-featured-large .customers-featured-title {
    font-size: 22px;
}

.customers-featured-tags {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
}

/* Stats Carousel */
.customers-stats {
    padding: 60px 0;
    background: var(--bg);
}

.customers-stats-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.customers-stats-scroll::-webkit-scrollbar {
    display: none;
}

.customers-stat-card {
    flex: 0 0 260px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 28px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.customers-stat-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.customers-stat-logo {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: -0.01em;
    opacity: 0.6;
}

.customers-stat-number {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.customers-stat-value {
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
}

.customers-stat-unit {
    font-size: 20px;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.customers-stat-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Testimonial */
.customers-testimonial {
    padding: 0;
}

.customers-testimonial-inner {
    background: var(--bg);
    padding: 100px 24px;
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.customers-testimonial-content {
    max-width: 700px;
}

.customers-testimonial-quote {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 400;
    color: var(--text);
    line-height: 1.5;
    letter-spacing: -0.02em;
    margin-bottom: 32px;
    font-style: normal;
}

.customers-testimonial-author {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 24px;
}

.customers-testimonial-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.customers-testimonial-role {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
}

.customers-testimonial-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color var(--transition);
}

.customers-testimonial-link:hover {
    color: var(--text);
}

.customers-testimonial-link span {
    transition: transform var(--transition);
}

.customers-testimonial-link:hover span {
    transform: translateX(3px);
}

/* All Stories Grid */
.customers-all {
    padding: 100px 0;
    background: var(--bg);
}

.customers-all-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 48px;
}

.customers-all-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.customers-story-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    text-decoration: none;
    will-change: transform;
    min-height: 320px;
}

.customers-story-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Gradient area fills entire card */
.customers-story-logo-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

/* Logo — white, top-left */
.customers-story-logo {
    position: absolute;
    top: 28px;
    left: 28px;
    font-size: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: -0.02em;
    opacity: 1;
    z-index: 1;
}

/* Content at bottom */
.customers-story-content {
    position: relative;
    z-index: 1;
    padding: 28px;
    margin-top: auto;
}

.customers-story-title {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}

.customers-story-tags {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
}

/* Customers CTA */
.customers-cta {
    padding: 100px 0;
    background: var(--bg);
}

.customers-cta-inner {
}

.customers-cta-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.customers-cta-desc {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 40px;
    line-height: 1.6;
}

/* ============================================
   Individual Customer Story Page
   ============================================ */

.story-hero {
    padding-top: 68px;
}

.story-hero-img {
    width: 100%;
    height: 480px;
    background: linear-gradient(135deg, #F0F0F0, #E8E8E8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-hero-placeholder {
    font-size: 48px;
    font-weight: 600;
    color: var(--text);
    opacity: 0.25;
    letter-spacing: -0.03em;
}

/* Two-column layout */
.story-body {
    padding: 80px 0;
    background: var(--bg);
}

.story-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 80px;
    align-items: start;
}

/* Main story content */
.story-main {
    max-width: 680px;
}

.story-intro {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 24px;
}

.story-main p {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.story-main p strong {
    color: var(--text);
    font-weight: 600;
}

/* Section labels and titles */
.story-section {
    margin-top: 56px;
    margin-bottom: 32px;
    padding-top: 48px;
}

.story-section-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.story-section-title {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
}

/* Inline quotes */
.story-quote {
    margin: 40px 0;
    padding: 0;
    border-left: 2px solid var(--text);
    padding-left: 28px;
}

.story-quote p {
    font-size: 18px !important;
    font-weight: 400;
    font-style: italic;
    line-height: 1.7;
    color: var(--text) !important;
    margin-bottom: 0 !important;
}

.story-quote cite {
    display: block;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-top: 12px;
}

/* Results grid */
.story-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 40px 0;
}

.story-result {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.story-result-value {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
}

.story-result-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Sticky sidebar */
.story-sidebar {
    position: relative;
}

.story-sidebar-inner {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.story-meta-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.story-meta-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.story-meta-value {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
}

.story-meta-about {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-tertiary);
}

.story-meta-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.story-meta-links a {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    transition: color var(--transition);
}

.story-meta-links a:hover {
    color: var(--text);
}

/* Story lists */
.story-list {
    list-style: none;
    margin: 24px 0;
    padding: 0;
}

.story-list li {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.7;
    padding: 10px 0;
    padding-left: 20px;
    position: relative;
}

.story-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text);
}

.story-list li strong {
    color: var(--text);
}

/* (Old column styles removed — now using mega-menu-section) */

/* Nav active state */
.nav-active {
    color: var(--white) !important;
}

.nav.scrolled .nav-active {
    color: var(--text) !important;
}

/* Nav dropdown active pill (like Ramp) */
.nav-dropdown-trigger.active-section {
    background: var(--orange-dim);
    color: var(--orange) !important;
    padding: 6px 14px;
    border-radius: 20px;
}

/* ============================================
   Scroll reveal
   ============================================ */

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   Mission Section
   ============================================ */

.mission {
    padding: var(--space-section) 0;
    background: var(--bg);
    position: relative;
}

.mission-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    min-height: 480px;
}

.mission-content {
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mission-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.mission-visual svg {
    width: 100%;
    max-width: 320px;
    height: auto;
    opacity: 0.6;
}

.mission-eyebrow {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 20px;
}

.mission-title {
    font-size: clamp(26px, 2.5vw, 36px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.mission-body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.mission-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    padding: 10px 20px;
    border: 1px solid var(--border);
    border-radius: 100px;
    transition: all var(--transition);
    width: fit-content;
}

.mission-link:hover {
    border-color: var(--text);
}

/* ============================================
   Declaration Section
   ============================================ */

.declaration {
    padding: var(--space-section) 0;
    position: relative;
    background: var(--bg);
}

.declaration-header {
    text-align: left;
    margin-bottom: 60px;
    max-width: 760px;
}

.declaration-eyebrow {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.declaration-title {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.declaration-desc {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 640px;
}

/* System Flow — card-based pipeline */
.system-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 0;
    align-items: center;
    margin-bottom: 40px;
}

.system-flow-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color var(--transition);
}

.system-flow-card:hover {
    border-color: var(--border-hover);
}

.system-flow-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.system-flow-card-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.01em;
}

.system-flow-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.system-flow-card-desc {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.system-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    padding: 0 8px;
    flex-shrink: 0;
}

/* System Stats — pill row */
.system-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.system-stats-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.system-stats-pill span {
    color: var(--text-tertiary);
    font-weight: 400;
}

/* ============================================
   Four Products Section
   ============================================ */

.four-products {
    padding: var(--space-section) 0;
    position: relative;
    background: var(--bg);
}

.four-products-header {
    text-align: left;
    margin-bottom: var(--space-header);
}

.four-products-eyebrow {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.four-products-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
}

.four-products-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.four-product-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 64px 0;
    border-bottom: 1px solid var(--border);
}

.four-product-block:first-child {
    border-top: 1px solid var(--border);
}

.four-product-block:last-child {
    border-bottom: none;
}

.four-product-reverse .four-product-content {
    order: 2;
}

.four-product-reverse .four-product-visual {
    order: 1;
}

.four-product-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.01em;
    padding: 7px 16px 7px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 100px;
    margin-bottom: 20px;
}

.four-product-headline {
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 400;
    line-height: 1.25;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.four-product-stats {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.four-product-stats span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.four-product-stats span:not(:last-child)::after {
    content: ' \00B7 ';
    color: var(--text-muted);
    font-weight: 700;
}

.four-product-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.four-product-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-phone-inline {
    position: static;
    width: 220px;
    height: 440px;
}

.feature-dash-compact {
    transform: none;
    margin: 0;
}

.four-product-visual .feature-dash {
    width: 100%;
}

.feature-dash-card-value-sm {
    font-size: 14px;
    font-weight: 600;
}

/* ============================================
   Why Now Section
   ============================================ */

.why-now {
    padding: var(--space-section) 0;
    background: var(--bg);
}

.why-now-header {
    margin-bottom: var(--space-header);
}

.why-now-eyebrow {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.why-now-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
}

.why-now-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.why-now-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    transition: border-color var(--transition);
}

.why-now-card:hover {
    border-color: var(--border-hover);
}

.why-now-card-step {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.why-now-card-art {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-now-card-art svg {
    width: 180px;
    height: 180px;
    color: var(--text);
    opacity: 0.65;
}

.why-now-card-text {}

.why-now-card-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.why-now-card-body {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ============================================
   Network Section (replaces Scale/Audience)
   ============================================ */

.network {
    padding: var(--space-section) 0;
    position: relative;
    background: var(--bg);
}

.network-header {
    text-align: left;
    margin-bottom: var(--space-header);
}

.network-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.network-desc {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 560px;
}

.network-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.network-card:nth-child(1) { grid-column: span 7; }
.network-card:nth-child(2) { grid-column: span 5; }
.network-card:nth-child(3) { grid-column: span 4; }
.network-card:nth-child(4) { grid-column: span 4; }
.network-card:nth-child(5) { grid-column: span 4; }

.network-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 200px;
    transition: border-color var(--transition);
}

.network-card:hover {
    border-color: var(--border-hover);
}

.network-card-featured {
    background:
        radial-gradient(ellipse at 25% 40%, rgba(76, 175, 80, 0.55), transparent 50%),
        radial-gradient(ellipse at 80% 25%, rgba(100, 181, 246, 0.45), transparent 45%),
        radial-gradient(ellipse at 55% 75%, rgba(255, 183, 77, 0.4), transparent 45%),
        radial-gradient(ellipse at 90% 80%, rgba(236, 148, 164, 0.25), transparent 40%),
        linear-gradient(155deg, #14261e, #162436);
    border: none;
    min-height: 380px;
    padding: 24px;
    overflow: hidden;
}

.network-card-featured .network-card-text {
    padding: 8px;
}

.network-card-featured .network-card-title {
    color: var(--white);
}

.network-card-featured .network-card-desc {
    color: rgba(255, 255, 255, 0.65);
}

.network-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #EBEBEB;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    flex-shrink: 0;
    margin-bottom: auto;
}

.network-card-text {
    margin-top: auto;
}

.network-card-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.network-card-desc {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ============================================
   Frontier Section (From Ground to Orbit)
   ============================================ */

.frontier {
    padding: var(--space-section) 0;
    background: var(--bg);
    position: relative;
}

.frontier-header {
    margin-bottom: 40px;
}

.frontier-eyebrow {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.frontier-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
}

.frontier-body {
    max-width: 760px;
    margin-bottom: 48px;
}

.frontier-body p {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.frontier-body p:last-child {
    margin-bottom: 0;
}

.frontier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* ============================================
   Founder Quote Section
   ============================================ */

.founder-quote {
    padding: 100px 0;
    background: var(--bg);
    position: relative;
}

.founder-quote-inner {
    max-width: 760px;
}

.founder-quote-eyebrow {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 32px;
}

.founder-quote-text {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 400;
    font-style: italic;
    line-height: 1.7;
    color: var(--text);
    letter-spacing: -0.01em;
    margin: 0 0 32px;
    border: none;
    padding: 0;
}

.founder-quote-attribution {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 32px;
}

.founder-quote-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}

.founder-quote-role {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-tertiary);
}

/* ============================================
   Final CTA (replaces contact section on index)
   ============================================ */

.final-cta {
    padding: var(--space-section) 0;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

.final-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.final-cta-left {
    max-width: 480px;
}

.final-cta-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.final-cta-desc {
    font-size: 17px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 32px;
}

.final-cta-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.btn-secondary-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 100px;
    transition: background var(--transition), border-color var(--transition);
}

.btn-secondary-light:hover {
    background: var(--bg-card);
    border-color: var(--text);
}

.final-cta-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.final-cta-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-card);
    min-height: 220px;
    text-decoration: none;
    transition: border-color var(--transition);
}

.final-cta-card:hover {
    border-color: var(--border-hover);
}

.final-cta-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #EBEBEB;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    flex-shrink: 0;
    margin-bottom: auto;
}

.final-cta-card-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.final-cta-card-desc {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
}

.final-cta .btn-primary {
    background: var(--text);
    color: var(--white);
}

/* ============================================
   Demo Modal
   ============================================ */

.demo-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.demo-modal.active {
    opacity: 1;
    visibility: visible;
}

.demo-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.demo-modal-container {
    position: relative;
    width: 94%;
    max-width: 1020px;
    max-height: 92vh;
    overflow: hidden;
    background: var(--white);
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
    padding: 0;
    z-index: 1;
}

.demo-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    border-radius: 50%;
    transition: all var(--transition);
    z-index: 2;
}

.demo-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--white);
}

.demo-modal-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    min-height: 560px;
    position: relative;
    z-index: 1;
}

/* Left panel — gradient marketing side */
.demo-modal-left {
    background:
        radial-gradient(ellipse at 20% 25%, rgba(56, 189, 248, 0.45), transparent 50%),
        radial-gradient(ellipse at 75% 65%, rgba(99, 102, 241, 0.35), transparent 45%),
        radial-gradient(ellipse at 45% 90%, rgba(76, 175, 80, 0.25), transparent 50%),
        radial-gradient(ellipse at 85% 15%, rgba(168, 85, 247, 0.2), transparent 40%),
        linear-gradient(155deg, #0f1b2d, #162436, #1a1f3a);
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.demo-modal-title {
    font-size: clamp(26px, 2.5vw, 34px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--white);
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.demo-modal-subtitle {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin-bottom: 40px;
}

.demo-modal-quote {
    border-left: 2px solid rgba(255, 255, 255, 0.2);
    padding-left: 20px;
}

.demo-modal-quote blockquote {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 10px;
}

.demo-modal-quote cite {
    font-size: 13px;
    font-style: normal;
    color: rgba(255, 255, 255, 0.35);
}

/* Right panel — clean form side */
.demo-modal-right {
    padding: 44px 44px;
    overflow-y: auto;
    max-height: 92vh;
}

/* Modal form */
.demo-modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.demo-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.demo-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.demo-form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.demo-form-group label .optional {
    font-weight: 400;
    color: var(--text-muted);
}

.demo-form-group input,
.demo-form-group select,
.demo-form-group textarea {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    padding: 10px 14px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text);
    border-radius: 10px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.demo-form-group input:focus,
.demo-form-group select:focus,
.demo-form-group textarea:focus {
    border-color: var(--text);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.demo-form-group input::placeholder,
.demo-form-group textarea::placeholder {
    color: var(--text-muted);
}

.demo-form-group textarea {
    resize: vertical;
    min-height: 68px;
}

.demo-form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23aaaaaa' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.demo-form-group select option {
    background: var(--white);
    color: var(--text);
}

.demo-form-submit {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 500;
    padding: 13px 24px;
    background: var(--text);
    color: var(--white);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: background var(--transition);
    margin-top: 4px;
}

.demo-form-submit:hover {
    background: #333;
}

.demo-form-submit span {
    margin-left: 4px;
}

/* Modal success state */
.demo-modal-success {
    display: none;
    text-align: center;
    padding: 60px 40px;
    position: relative;
    z-index: 1;
}

.demo-modal-success.show {
    display: block;
}

.demo-modal-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--green-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--green);
    font-size: 28px;
}

.demo-modal-success h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.demo-modal-success p {
    font-size: 15px;
    color: var(--text-secondary);
}

body.modal-open {
    overflow: hidden;
}

/* ============================================
   Section Dividers
   ============================================ */
.section-divider {
    border: none;
    border-top: 1px dashed var(--border);
    max-width: 200px;
    margin: 0 auto;
}

/* ============================================
   Inline Testimonials
   ============================================ */
.inline-testimonial {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-section) 0;
}

.inline-testimonial blockquote {
    font-size: 18px;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 16px;
    font-weight: 300;
}

.inline-testimonial cite {
    font-size: 14px;
    color: var(--text-tertiary);
    font-style: normal;
    font-weight: 400;
}

/* ============================================
   Colored Dots (nav + hero)
   ============================================ */
.nav-product-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
    transition: box-shadow 0.3s ease;
}

.nav-product-dot.dot-brain {
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.6), transparent 50%), radial-gradient(circle, #64B5F6, #4DD0E1, #3d8db5);
    box-shadow: 0 0 0 2px rgba(100,181,246,0.2);
}
.nav-product-dot.dot-market {
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.6), transparent 50%), radial-gradient(circle, #FFB74D, #FF8A65, #d4854a);
    box-shadow: 0 0 0 2px rgba(255,183,77,0.2);
}
.nav-product-dot.dot-ecosystem {
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.6), transparent 50%), radial-gradient(circle, #BA93E6, #9575CD, #8a6cb8);
    box-shadow: 0 0 0 2px rgba(186,147,230,0.2);
}
.nav-product-dot.dot-labs {
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.6), transparent 50%), radial-gradient(circle, #8BC34A, #66BB6A, #6d8c3a);
    box-shadow: 0 0 0 2px rgba(139,195,74,0.2);
}

.mega-menu-item:hover .nav-product-dot {
    animation: dotPulse 1s ease infinite;
}
.mega-menu-item:hover .nav-product-dot.dot-brain { color: rgba(100,181,246,0.4); }
.mega-menu-item:hover .nav-product-dot.dot-market { color: rgba(255,183,77,0.4); }
.mega-menu-item:hover .nav-product-dot.dot-ecosystem { color: rgba(186,147,230,0.4); }
.mega-menu-item:hover .nav-product-dot.dot-labs { color: rgba(139,195,74,0.4); }

.page-hero-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.page-hero-dot.dot-brain {
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.6), transparent 50%), radial-gradient(circle, #64B5F6, #4DD0E1, #3d8db5);
    box-shadow: 0 0 0 2px rgba(100,181,246,0.25);
}
.page-hero-dot.dot-market {
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.6), transparent 50%), radial-gradient(circle, #FFB74D, #FF8A65, #d4854a);
    box-shadow: 0 0 0 2px rgba(255,183,77,0.25);
}
.page-hero-dot.dot-ecosystem {
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.6), transparent 50%), radial-gradient(circle, #BA93E6, #9575CD, #8a6cb8);
    box-shadow: 0 0 0 2px rgba(186,147,230,0.25);
}
.page-hero-dot.dot-labs {
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.6), transparent 50%), radial-gradient(circle, #8BC34A, #66BB6A, #6d8c3a);
    box-shadow: 0 0 0 2px rgba(139,195,74,0.25);
}

/* ============================================
   Security & Trust Section
   ============================================ */
.security-section {
    padding: var(--space-section) 0;
}

.security-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.security-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    transition: border-color 0.3s ease;
}

.security-card:hover {
    border-color: var(--border-hover);
}

.security-card-icon {
    font-size: 24px;
    margin-bottom: 16px;
}

.security-card-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 8px;
}

.security-card-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.security-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.security-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
}

.security-badge-icon {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}

/* ============================================
   Integrations Section
   ============================================ */
.integrations-section {
    padding: var(--space-section) 0;
}

.integration-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.integration-category h4 {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.integration-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.integration-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.integration-tag:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

/* ============================================
   Grant Callout Card
   ============================================ */
.grant-callout {
    background: var(--bg-card);
    border: 1px dashed var(--border-hover);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-top: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.grant-callout-content {
    flex: 1;
}

.grant-callout-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 8px;
}

.grant-callout-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.grant-callout .btn {
    flex-shrink: 0;
}

/* ============================================
   FAQ on Product Pages (reuse pricing FAQ)
   ============================================ */
.product-faq {
    padding: var(--space-section) 0;
}

.product-faq .pricing-faq-list {
    max-width: 800px;
}

/* ============================================
   Grants Page
   ============================================ */
.grants-hero {
    padding: 160px 0 80px;
    background: var(--bg);
}

.grants-hero-title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: 20px;
}

.grants-hero-desc {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 640px;
}

.grants-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.grants-step {
    text-align: center;
    padding: 32px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.grants-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--orange-dim);
    color: var(--orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
}

.grants-step-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 8px;
}

.grants-step-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.grants-section {
    padding: var(--space-section) 0;
}

.grants-coverage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.grants-coverage-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.grants-coverage-card h4 {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 8px;
}

.grants-coverage-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.grants-stats {
    display: flex;
    gap: 48px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.grants-stat {
    text-align: center;
}

.grants-stat-value {
    font-size: 36px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.02em;
}

.grants-stat-label {
    font-size: 14px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.grants-eligibility {
    margin-top: 32px;
}

.grants-eligibility li {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    padding: 8px 0;
    padding-left: 24px;
    position: relative;
    list-style: none;
}

.grants-eligibility li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 17px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange-dim);
    border: 2px solid var(--orange);
}

/* ============================================
   Code Block — Developers page
   ============================================ */

.code-block {
    background: #0A0A0A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 24px;
    overflow-x: auto;
    margin-top: 16px;
}

.code-block pre {
    margin: 0;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 13px;
    line-height: 1.7;
    color: #E0E0E0;
    white-space: pre;
    tab-size: 2;
}

.code-block .code-comment { color: #6A737D; }
.code-block .code-keyword { color: #FF7B72; }
.code-block .code-string { color: #A5D6FF; }
.code-block .code-function { color: #D2A8FF; }
.code-block .code-number { color: #79C0FF; }
.code-block .code-property { color: #FFA657; }

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: 13px;
    color: #888;
    font-family: var(--font);
}

.code-block-header + .code-block {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ============================================
   Partner Grid — Partnerships page
   ============================================ */

.partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.partner-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 24px;
    transition: all var(--transition);
}

.partner-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.partner-card-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.partner-card-type {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.partner-card-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.partner-tier-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

/* ============================================
   API Card — Developers page
   ============================================ */

.api-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 24px;
    transition: all var(--transition);
}

.api-card:hover {
    border-color: var(--border-hover);
}

.api-card-icon {
    font-size: 24px;
    margin-bottom: 16px;
}

.api-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.api-card-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.api-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.api-endpoint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 13px;
    margin-bottom: 8px;
}

.api-method {
    font-weight: 600;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.api-method.get { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.api-method.post { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.api-method.put { background: rgba(245, 158, 11, 0.12); color: #d97706; }

.api-path {
    color: var(--text-secondary);
}

/* ============================================
   Timeline — Company page
   ============================================ */

.timeline {
    position: relative;
    padding-left: 32px;
    margin-top: 32px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.timeline-item {
    position: relative;
    padding-bottom: 36px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -32px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--border);
    z-index: 1;
}

.timeline-item:first-child .timeline-marker {
    border-color: var(--orange);
    background: var(--orange);
}

.timeline-year {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.timeline-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.timeline-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ============================================
   Team Grid — Company page
   ============================================ */

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.team-card {
    text-align: center;
    padding: 32px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.team-card-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-page);
    border: 2px solid var(--border);
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.team-card-role {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.team-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ============================================
   Values Grid — Company page
   ============================================ */

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.values-card {
    padding: 28px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.values-card-icon {
    font-size: 24px;
    margin-bottom: 16px;
}

.values-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.values-card-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ============================================
   Offline Section — Works Everywhere
   ============================================ */

.offline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.offline-card {
    padding: 28px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.offline-card-icon {
    font-size: 24px;
    margin-bottom: 16px;
}

.offline-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.offline-card-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ============================================
   Card System Unification — Gradient Hovers
   ============================================ */

/* 5A. Product-tinted hover for interface/datasource/connection cards */
.interface-card,
.datasource-card,
.connection-card {
    transition: border-color var(--transition-spring), box-shadow var(--transition-spring), transform var(--transition-spring), background var(--transition-gradient);
    border-radius: var(--card-radius-lg);
}

.interface-card:hover,
.datasource-card:hover,
.connection-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

[data-product="brain"] .interface-card:hover,
[data-product="brain"] .datasource-card:hover,
[data-product="brain"] .connection-card:hover { background: linear-gradient(135deg, rgba(100,181,246,0.08), var(--bg-card)); }
[data-product="market"] .interface-card:hover,
[data-product="market"] .datasource-card:hover,
[data-product="market"] .connection-card:hover { background: linear-gradient(135deg, rgba(255,183,77,0.08), var(--bg-card)); }
[data-product="ecosystem"] .interface-card:hover,
[data-product="ecosystem"] .datasource-card:hover,
[data-product="ecosystem"] .connection-card:hover { background: linear-gradient(135deg, rgba(186,147,230,0.08), var(--bg-card)); }
[data-product="labs"] .interface-card:hover,
[data-product="labs"] .datasource-card:hover,
[data-product="labs"] .connection-card:hover { background: linear-gradient(135deg, rgba(76,175,80,0.08), var(--bg-card)); }

/* 5B. Security Cards — Gradient flip on hover */
.security-card {
    transition: all var(--transition-spring);
    border-radius: var(--card-radius-lg);
    position: relative;
    overflow: hidden;
}

.security-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-gradient);
    z-index: 0;
    border-radius: inherit;
}

.security-card > * { position: relative; z-index: 1; }

.security-card:hover {
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    color: rgba(255,255,255,0.9);
}

.security-card:hover::before { opacity: 1; }
.security-card:hover .security-card-title { color: #fff; }
.security-card:hover .security-card-desc { color: rgba(255,255,255,0.8); }
.security-card:hover .security-card-icon { opacity: 0.9; }

/* Security card gradients per product */
[data-product="brain"] .security-card:nth-child(1)::before { background: radial-gradient(ellipse at 30% 80%, rgba(100,181,246,0.4), transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(77,208,225,0.3), transparent 50%), #1a2a35; }
[data-product="brain"] .security-card:nth-child(2)::before { background: radial-gradient(ellipse at 70% 70%, rgba(77,208,225,0.4), transparent 60%), radial-gradient(ellipse at 20% 30%, rgba(100,181,246,0.3), transparent 50%), #1a2a35; }
[data-product="brain"] .security-card:nth-child(3)::before { background: radial-gradient(ellipse at 20% 40%, rgba(129,212,250,0.4), transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(61,141,181,0.3), transparent 60%), #1a2a35; }
[data-product="brain"] .security-card:nth-child(4)::before { background: radial-gradient(ellipse at 60% 30%, rgba(100,181,246,0.4), transparent 55%), radial-gradient(ellipse at 30% 70%, rgba(77,208,225,0.3), transparent 60%), #1a2a35; }
[data-product="brain"] .security-card:nth-child(5)::before { background: radial-gradient(ellipse at 80% 60%, rgba(77,208,225,0.35), transparent 55%), radial-gradient(ellipse at 20% 20%, rgba(100,181,246,0.3), transparent 55%), #1a2a35; }
[data-product="brain"] .security-card:nth-child(6)::before { background: radial-gradient(ellipse at 40% 50%, rgba(129,212,250,0.35), transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(61,141,181,0.3), transparent 60%), #1a2a35; }

[data-product="market"] .security-card:nth-child(1)::before { background: radial-gradient(ellipse at 30% 80%, rgba(255,183,77,0.4), transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(255,138,101,0.3), transparent 50%), #2a1f15; }
[data-product="market"] .security-card:nth-child(2)::before { background: radial-gradient(ellipse at 70% 70%, rgba(255,138,101,0.4), transparent 60%), radial-gradient(ellipse at 20% 30%, rgba(255,183,77,0.3), transparent 50%), #2a1f15; }
[data-product="market"] .security-card:nth-child(3)::before { background: radial-gradient(ellipse at 20% 40%, rgba(255,204,128,0.4), transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(212,133,74,0.3), transparent 60%), #2a1f15; }
[data-product="market"] .security-card:nth-child(4)::before { background: radial-gradient(ellipse at 60% 30%, rgba(255,183,77,0.4), transparent 55%), radial-gradient(ellipse at 30% 70%, rgba(255,138,101,0.3), transparent 60%), #2a1f15; }
[data-product="market"] .security-card:nth-child(5)::before { background: radial-gradient(ellipse at 80% 60%, rgba(255,138,101,0.35), transparent 55%), radial-gradient(ellipse at 20% 20%, rgba(255,183,77,0.3), transparent 55%), #2a1f15; }
[data-product="market"] .security-card:nth-child(6)::before { background: radial-gradient(ellipse at 40% 50%, rgba(255,204,128,0.35), transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(212,133,74,0.3), transparent 60%), #2a1f15; }

[data-product="ecosystem"] .security-card:nth-child(1)::before { background: radial-gradient(ellipse at 30% 80%, rgba(186,147,230,0.4), transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(149,117,205,0.3), transparent 50%), #1f1a2a; }
[data-product="ecosystem"] .security-card:nth-child(2)::before { background: radial-gradient(ellipse at 70% 70%, rgba(149,117,205,0.4), transparent 60%), radial-gradient(ellipse at 20% 30%, rgba(186,147,230,0.3), transparent 50%), #1f1a2a; }
[data-product="ecosystem"] .security-card:nth-child(3)::before { background: radial-gradient(ellipse at 20% 40%, rgba(206,178,242,0.4), transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(138,108,184,0.3), transparent 60%), #1f1a2a; }
[data-product="ecosystem"] .security-card:nth-child(4)::before { background: radial-gradient(ellipse at 60% 30%, rgba(186,147,230,0.4), transparent 55%), radial-gradient(ellipse at 30% 70%, rgba(149,117,205,0.3), transparent 60%), #1f1a2a; }
[data-product="ecosystem"] .security-card:nth-child(5)::before { background: radial-gradient(ellipse at 80% 60%, rgba(149,117,205,0.35), transparent 55%), radial-gradient(ellipse at 20% 20%, rgba(186,147,230,0.3), transparent 55%), #1f1a2a; }
[data-product="ecosystem"] .security-card:nth-child(6)::before { background: radial-gradient(ellipse at 40% 50%, rgba(206,178,242,0.35), transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(138,108,184,0.3), transparent 60%), #1f1a2a; }

[data-product="labs"] .security-card:nth-child(1)::before { background: radial-gradient(ellipse at 30% 80%, rgba(139,195,74,0.4), transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(102,187,106,0.3), transparent 50%), #1a2515; }
[data-product="labs"] .security-card:nth-child(2)::before { background: radial-gradient(ellipse at 70% 70%, rgba(102,187,106,0.4), transparent 60%), radial-gradient(ellipse at 20% 30%, rgba(139,195,74,0.3), transparent 50%), #1a2515; }
[data-product="labs"] .security-card:nth-child(3)::before { background: radial-gradient(ellipse at 20% 40%, rgba(174,213,129,0.4), transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(109,140,58,0.3), transparent 60%), #1a2515; }
[data-product="labs"] .security-card:nth-child(4)::before { background: radial-gradient(ellipse at 60% 30%, rgba(139,195,74,0.4), transparent 55%), radial-gradient(ellipse at 30% 70%, rgba(102,187,106,0.3), transparent 60%), #1a2515; }
[data-product="labs"] .security-card:nth-child(5)::before { background: radial-gradient(ellipse at 80% 60%, rgba(102,187,106,0.35), transparent 55%), radial-gradient(ellipse at 20% 20%, rgba(139,195,74,0.3), transparent 55%), #1a2515; }
[data-product="labs"] .security-card:nth-child(6)::before { background: radial-gradient(ellipse at 40% 50%, rgba(174,213,129,0.35), transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(109,140,58,0.3), transparent 60%), #1a2515; }

/* Grid-level dim for security grids */
.security-grid:hover .security-card { opacity: 0.6; transition: opacity 0.3s ease, transform var(--transition-spring), box-shadow var(--transition-spring); }
.security-grid:hover .security-card:hover { opacity: 1; }

/* 5C. Offline Cards — Brain gradient flip (6 cards) */
.offline-card {
    transition: all var(--transition-spring);
    border-radius: var(--card-radius-lg) !important;
    position: relative;
    overflow: hidden;
}

.offline-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-gradient);
    z-index: 0;
    border-radius: inherit;
}

.offline-card > * { position: relative; z-index: 1; }

.offline-card:hover {
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.offline-card:hover::before { opacity: 1; }
.offline-card:hover .offline-card-title { color: #fff; }
.offline-card:hover .offline-card-desc { color: rgba(255,255,255,0.8); }
.offline-card:hover .offline-card-icon { filter: brightness(2); }

.offline-card:nth-child(1)::before { background: radial-gradient(ellipse at 30% 80%, rgba(100,181,246,0.4), transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(77,208,225,0.3), transparent 50%), #1a2a35; }
.offline-card:nth-child(2)::before { background: radial-gradient(ellipse at 70% 70%, rgba(77,208,225,0.4), transparent 60%), radial-gradient(ellipse at 20% 30%, rgba(100,181,246,0.3), transparent 50%), #1a2a35; }
.offline-card:nth-child(3)::before { background: radial-gradient(ellipse at 20% 40%, rgba(129,212,250,0.4), transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(61,141,181,0.3), transparent 60%), #1a2a35; }
.offline-card:nth-child(4)::before { background: radial-gradient(ellipse at 60% 30%, rgba(100,181,246,0.4), transparent 55%), radial-gradient(ellipse at 30% 70%, rgba(77,208,225,0.3), transparent 60%), #1a2a35; }
.offline-card:nth-child(5)::before { background: radial-gradient(ellipse at 80% 60%, rgba(77,208,225,0.35), transparent 55%), radial-gradient(ellipse at 20% 20%, rgba(100,181,246,0.3), transparent 55%), #1a2a35; }
.offline-card:nth-child(6)::before { background: radial-gradient(ellipse at 40% 50%, rgba(129,212,250,0.35), transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(61,141,181,0.3), transparent 60%), #1a2a35; }

/* Grid-level dim for offline grids */
.offline-grid:hover .offline-card { opacity: 0.6; transition: opacity 0.3s ease, transform var(--transition-spring), box-shadow var(--transition-spring); }
.offline-grid:hover .offline-card:hover { opacity: 1; }

/* 5D. API/Developer Cards — Dark code-themed flip */
.api-card {
    transition: all var(--transition-spring);
    border-radius: var(--card-radius-lg);
    position: relative;
    overflow: hidden;
}

.api-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-gradient);
    z-index: 0;
    border-radius: inherit;
}

.api-card > * { position: relative; z-index: 1; }

.api-card:hover {
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.api-card:hover::before { opacity: 1; }
.api-card:hover .api-card-title { color: #fff; }
.api-card:hover .api-card-desc { color: rgba(255,255,255,0.8); }
.api-card:hover .api-card-icon { filter: brightness(2); }

.api-card:nth-child(1)::before { background: radial-gradient(ellipse at 30% 80%, rgba(38,198,218,0.35), transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(0,172,193,0.25), transparent 50%), #0f1a1e; }
.api-card:nth-child(2)::before { background: radial-gradient(ellipse at 70% 70%, rgba(0,188,212,0.35), transparent 60%), radial-gradient(ellipse at 20% 30%, rgba(38,198,218,0.25), transparent 50%), #0f1a1e; }
.api-card:nth-child(3)::before { background: radial-gradient(ellipse at 20% 40%, rgba(77,208,225,0.35), transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(38,198,218,0.25), transparent 60%), #0f1a1e; }
.api-card:nth-child(4)::before { background: radial-gradient(ellipse at 60% 30%, rgba(38,198,218,0.35), transparent 55%), radial-gradient(ellipse at 30% 70%, rgba(0,172,193,0.25), transparent 60%), #0f1a1e; }
.api-card:nth-child(5)::before { background: radial-gradient(ellipse at 80% 60%, rgba(0,188,212,0.3), transparent 55%), radial-gradient(ellipse at 20% 20%, rgba(38,198,218,0.25), transparent 55%), #0f1a1e; }
.api-card:nth-child(6)::before { background: radial-gradient(ellipse at 40% 50%, rgba(77,208,225,0.3), transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(0,172,193,0.25), transparent 60%), #0f1a1e; }
.api-card:nth-child(7)::before { background: radial-gradient(ellipse at 50% 80%, rgba(38,198,218,0.35), transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(77,208,225,0.2), transparent 60%), #0f1a1e; }
.api-card:nth-child(8)::before { background: radial-gradient(ellipse at 20% 40%, rgba(0,188,212,0.3), transparent 55%), radial-gradient(ellipse at 70% 60%, rgba(38,198,218,0.25), transparent 55%), #0f1a1e; }
.api-card:nth-child(9)::before { background: radial-gradient(ellipse at 70% 50%, rgba(77,208,225,0.3), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(38,198,218,0.25), transparent 60%), #0f1a1e; }

/* Grid-level dim for API grids */
.api-grid:hover .api-card { opacity: 0.6; transition: opacity 0.3s ease, transform var(--transition-spring), box-shadow var(--transition-spring); }
.api-grid:hover .api-card:hover { opacity: 1; }

/* 5E. Partner Cards — Brand orange tint */
.partner-card {
    transition: all var(--transition-spring);
    border-radius: var(--card-radius-lg);
}

.partner-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    background: linear-gradient(135deg, rgba(241,96,1,0.06), var(--bg-card));
}

/* 5F. Team Cards — Gradient avatar on hover */
.team-card {
    transition: all var(--transition-spring);
    border-radius: var(--card-radius-lg);
}

.team-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.team-card-avatar {
    transition: background var(--transition-gradient);
}

.team-card:hover .team-card-avatar {
    background: linear-gradient(135deg, #FFB74D, #FF8A65, #F16001);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 5G. Values Cards — Brand orange tint */
.values-card {
    transition: all var(--transition-spring);
    border-radius: var(--card-radius-lg);
}

.values-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    background: linear-gradient(135deg, rgba(241,96,1,0.06), var(--bg-card));
}

/* ============================================
   Geometric Decorations
   ============================================ */

/* 6A. CSS-only dot grid pattern */
.section-accent-dots {
    position: relative;
}

.section-accent-dots::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
    height: 120px;
    background: radial-gradient(circle, var(--border) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

/* 6B. Geometric section divider */
.section-divider-diamond {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 auto;
    max-width: 200px;
    padding: 32px 0;
}

.section-divider-diamond::before,
.section-divider-diamond::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.section-divider-diamond span {
    width: 8px;
    height: 8px;
    background: var(--border-hover);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* 6C. Connection card background connector */
.connections-grid {
    position: relative;
}

.connections-grid::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 1px;
    border-top: 2px dashed var(--border);
    z-index: 0;
    pointer-events: none;
}

.connection-card {
    position: relative;
    z-index: 1;
}

/* Flashlight border effect (developers page) */
.api-grid-flashlight {
    position: relative;
}

.api-grid-flashlight::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius-lg);
    background: radial-gradient(300px circle at var(--mouse-x, -300px) var(--mouse-y, -300px), rgba(38,198,218,0.15), transparent 40%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.api-grid-flashlight:hover::after {
    opacity: 1;
}

/* ============================================
   Responsive — Tablet
   ============================================ */

@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero {
        min-height: auto;
    }

    .hero-dash-sidebar {
        width: 140px;
    }

    .hero-phone {
        width: 160px;
        height: 330px;
        right: -12px;
        bottom: -16px;
    }

    .device-laptop {
        max-width: 640px;
        margin: 0 auto;
    }

    .device-phone {
        max-width: 320px;
    }

    .mock-window {
        transform: none;
    }

    .mock-window:hover {
        transform: none;
    }

    .product-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-card:nth-child(1),
    .product-card:nth-child(2),
    .product-card:nth-child(3),
    .product-card:nth-child(4) {
        grid-column: auto;
        grid-row: auto;
    }

    .product-card.featured {
        grid-row: span 1;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .feature-reverse .feature-content {
        order: 0;
    }

    .feature-reverse .feature-visual {
        order: 0;
    }

    .compound-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .compound-card:not(:last-child)::after {
        display: none;
    }

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

    .scale-card:nth-child(1) { grid-column: span 2; }
    .scale-card:nth-child(2) { grid-column: span 2; }
    .scale-card:nth-child(3) { grid-column: span 1; }
    .scale-card:nth-child(4) { grid-column: span 1; }
    .scale-card:nth-child(5) { grid-column: span 2; }
    .scale-card:nth-child(6) { grid-column: span 1; }
    .scale-card:nth-child(7) { grid-column: span 1; }

    .scale-card-featured {
        min-height: 360px;
    }

    .mission-card {
        grid-template-columns: 1fr;
    }

    .mission-visual {
        order: -1;
        padding: 40px 48px 0;
    }

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

    .vision-card {
        min-height: 360px;
    }

    .vision-card:nth-child(3) {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }

    .story-card:nth-child(2),
    .story-card:nth-child(5) {
        margin-top: 0;
    }

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

    .pricing-card {
        border-right: 1px dashed var(--border);
    }

    .pricing-card:nth-child(2),
    .pricing-card:last-child {
        border-right: none;
    }

    .pricing-card:nth-child(n+3) {
        border-top: 1px dashed var(--border);
        padding-top: 24px;
        margin-top: 24px;
    }

    .pricing-start-grid {
        gap: 20px;
    }

    .pricing-tiers {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-tier {
        border-right: 1px dashed var(--border);
    }

    .pricing-tier:nth-child(2),
    .pricing-tier:last-child {
        border-right: none;
    }

    .pricing-tier:nth-child(n+3) {
        border-top: 1px dashed var(--border);
        padding-top: 32px;
    }

    .pricing-compound-grid {
        grid-template-columns: 1fr 1fr;
    }

    .page-section-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Product page new components — tablet */
    .agent-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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

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

    .integration-categories {
        grid-template-columns: repeat(2, 1fr);
    }

    .grant-callout {
        flex-direction: column;
        align-items: flex-start;
    }

    .grants-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .workflow {
        flex-direction: column;
        gap: 0;
    }

    .workflow-step {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding-right: 0;
        padding-bottom: 28px;
    }

    .workflow-step:last-child {
        padding-bottom: 0;
    }

    .workflow-step:not(:last-child)::after {
        top: 36px;
        left: 17px;
        right: auto;
        width: 1px;
        height: calc(100% - 18px);
        bottom: 0;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-grid {
        flex-wrap: wrap;
        gap: 40px;
    }

    /* Customers page tablet */
    .customers-featured-grid {
        grid-template-columns: 1fr 1fr;
    }

    .customers-all-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Story page tablet */
    .story-layout {
        grid-template-columns: 1fr 280px;
        gap: 48px;
    }

    /* Modal tablet */
    .demo-modal-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .demo-modal-left {
        padding: 36px 32px;
    }

    .demo-modal-right {
        padding: 32px;
        max-height: none;
    }

    /* Pioneers / Fellowship tablet */
    .pioneers-value-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pioneers-region-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pioneers-hero-stats {
        gap: 32px;
    }

    .fellows-role-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fellows-kampala-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .fellows-exchange-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .pricing-faqs-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Declaration / System flow tablet */
    .system-flow {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .system-flow-arrow {
        display: none;
    }

    /* Four Products tablet */
    .four-product-block {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .four-product-reverse .four-product-content {
        order: 0;
    }

    .four-product-reverse .four-product-visual {
        order: 0;
    }

    /* Why Now tablet */
    .why-now-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Network tablet */
    .network-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .network-card:nth-child(1) { grid-column: span 2; }
    .network-card:nth-child(2) { grid-column: span 1; }
    .network-card:nth-child(3) { grid-column: span 1; }
    .network-card:nth-child(4) { grid-column: span 1; }
    .network-card:nth-child(5) { grid-column: span 1; }

    /* Frontier tablet */
    .frontier-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .frontier-grid .vision-card:nth-child(3) {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }

    .final-cta-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

/* ============================================
   Pioneers Fellowship Page
   ============================================ */

/* Hero */
.pioneers-hero {
    position: relative;
    padding: 160px 0 100px;
    text-align: center;
    overflow: hidden;
}

.pioneers-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(212,168,85,0.12), transparent),
        radial-gradient(ellipse 50% 60% at 80% 20%, rgba(241,96,1,0.08), transparent),
        radial-gradient(ellipse 70% 40% at 50% 50%, rgba(107,163,190,0.06), transparent);
    pointer-events: none;
}

.pioneers-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 100px;
    background: rgba(212,168,85,0.1);
    border: 1px solid rgba(212,168,85,0.2);
    color: #D4A855;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 32px;
}

.pioneers-hero-title {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: 20px;
}

.pioneers-hero-subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 580px;
    margin: 0 auto 48px;
}

.pioneers-hero-stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 48px;
}

.pioneers-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pioneers-hero-stat-number {
    font-size: 32px;
    font-weight: 700;
    color: #D4A855;
    letter-spacing: -0.02em;
}

.pioneers-hero-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

.pioneers-hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.btn-pioneers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: linear-gradient(135deg, #D4A855, #C4944A);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-pioneers:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(212,168,85,0.3);
}

.btn-pioneers-lg {
    padding: 16px 40px;
    font-size: 16px;
    width: 100%;
}

.pioneers-explore {
    font-size: 15px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.pioneers-explore:hover {
    color: #D4A855;
}

.pioneers-explore span {
    display: inline-block;
    transition: transform 0.2s;
}

.pioneers-explore:hover span {
    transform: translateX(3px);
}

/* Thesis */
.pioneers-thesis {
    font-size: 20px;
    line-height: 1.7;
    color: var(--text-secondary);
    text-align: center;
    font-style: italic;
}

/* Value Cards */
.pioneers-value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.pioneers-value-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius-lg);
    padding: 32px;
    transition: var(--transition-spring);
    position: relative;
    overflow: hidden;
}

.pioneers-value-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: inherit;
    z-index: 0;
}

.pioneers-value-card:nth-child(1)::before { background: radial-gradient(ellipse at 30% 20%, rgba(212,168,85,0.12), transparent 70%); }
.pioneers-value-card:nth-child(2)::before { background: radial-gradient(ellipse at 70% 20%, rgba(241,96,1,0.10), transparent 70%); }
.pioneers-value-card:nth-child(3)::before { background: radial-gradient(ellipse at 30% 80%, rgba(107,163,190,0.12), transparent 70%); }
.pioneers-value-card:nth-child(4)::before { background: radial-gradient(ellipse at 70% 80%, rgba(186,147,230,0.10), transparent 70%); }
.pioneers-value-card:nth-child(5)::before { background: radial-gradient(ellipse at 50% 20%, rgba(76,175,80,0.10), transparent 70%); }
.pioneers-value-card:nth-child(6)::before { background: radial-gradient(ellipse at 50% 80%, rgba(255,183,77,0.12), transparent 70%); }

.pioneers-value-card:hover::before {
    opacity: 1;
}

.pioneers-value-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(212,168,85,0.2);
}

.pioneers-value-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(212,168,85,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4A855;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    transition: var(--transition-spring);
}

.pioneers-value-card:hover .pioneers-value-icon {
    background: rgba(212,168,85,0.18);
}

.pioneers-value-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.pioneers-value-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
}

/* Archetype Cards */
.pioneers-archetype-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.pioneers-archetype-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius-lg);
    padding: 36px;
    transition: var(--transition-spring);
    position: relative;
    overflow: hidden;
}

.pioneers-archetype-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #D4A855, #C4944A, #D4A855);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pioneers-archetype-card:hover::before {
    opacity: 1;
}

.pioneers-archetype-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(212,168,85,0.2);
}

.pioneers-archetype-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(212,168,85,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4A855;
    margin-bottom: 20px;
    transition: var(--transition-spring);
}

.pioneers-archetype-card:hover .pioneers-archetype-icon {
    background: rgba(212,168,85,0.15);
    transform: scale(1.05);
}

.pioneers-archetype-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
}

.pioneers-archetype-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.pioneers-archetype-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pioneers-archetype-tags span {
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(212,168,85,0.08);
    color: #D4A855;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Regional Cards */
.pioneers-regions-section {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.pioneers-region-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
}

.pioneers-region-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius-lg);
    padding: 28px;
    transition: var(--transition-spring);
    position: relative;
    overflow: hidden;
}

.pioneers-region-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pioneers-region-card[data-region="africa"]::after { background: linear-gradient(90deg, #D4A855, #F16001); }
.pioneers-region-card[data-region="south-america"]::after { background: linear-gradient(90deg, #66BB6A, #8BC34A); }
.pioneers-region-card[data-region="asia"]::after { background: linear-gradient(90deg, #FF7043, #FF5722); }
.pioneers-region-card[data-region="europe"]::after { background: linear-gradient(90deg, #BA93E6, #9575CD); }
.pioneers-region-card[data-region="north-america"]::after { background: linear-gradient(90deg, #6BA3BE, #4DD0E1); }

.pioneers-region-card:hover::after {
    opacity: 1;
}

.pioneers-region-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

.pioneers-region-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.pioneers-region-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.pioneers-region-flag {
    color: var(--text-muted);
}

.pioneers-region-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.pioneers-region-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pioneers-region-cities span {
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.pioneers-region-card[data-region="africa"]:hover .pioneers-region-cities span { border-color: rgba(212,168,85,0.3); color: #D4A855; }
.pioneers-region-card[data-region="south-america"]:hover .pioneers-region-cities span { border-color: rgba(102,187,106,0.3); color: #66BB6A; }
.pioneers-region-card[data-region="asia"]:hover .pioneers-region-cities span { border-color: rgba(255,112,67,0.3); color: #FF7043; }
.pioneers-region-card[data-region="europe"]:hover .pioneers-region-cities span { border-color: rgba(186,147,230,0.3); color: #BA93E6; }
.pioneers-region-card[data-region="north-america"]:hover .pioneers-region-cities span { border-color: rgba(107,163,190,0.3); color: #6BA3BE; }

/* Journey Timeline */
.pioneers-journey-timeline {
    margin-top: 56px;
    position: relative;
    padding-left: 80px;
}

.pioneers-journey-timeline::before {
    content: '';
    position: absolute;
    left: 35px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(to bottom, rgba(212,168,85,0.4), var(--border), rgba(212,168,85,0.4));
}

.pioneers-journey-step {
    position: relative;
    padding-bottom: 48px;
}

.pioneers-journey-step:last-child {
    padding-bottom: 0;
}

.pioneers-journey-marker {
    position: absolute;
    left: -80px;
    top: 0;
    width: 50px;
    display: flex;
    justify-content: center;
}

.pioneers-journey-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid rgba(212,168,85,0.3);
    color: #D4A855;
    font-size: 13px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.pioneers-journey-step:first-child .pioneers-journey-number,
.pioneers-journey-step:last-child .pioneers-journey-number {
    border-color: #D4A855;
    background: rgba(212,168,85,0.1);
}

.pioneers-journey-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.pioneers-journey-time {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #D4A855;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.pioneers-journey-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 560px;
}

/* Selection Criteria */
.pioneers-selection-criteria {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pioneers-criteria-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: var(--transition-spring);
}

.pioneers-criteria-item:hover {
    border-color: rgba(212,168,85,0.2);
    transform: translateX(4px);
}

.pioneers-criteria-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(212,168,85,0.1);
    color: #D4A855;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pioneers-criteria-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.pioneers-criteria-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Fellows Activity Cards (What Fellows Do) */
.fellows-role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.fellows-role-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius-lg);
    padding: 32px;
    transition: var(--transition-spring);
    position: relative;
    overflow: hidden;
}

.fellows-role-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(212,168,85,0.2);
}

.fellows-role-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(212,168,85,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4A855;
    margin-bottom: 20px;
}

.fellows-role-card:hover .fellows-role-icon {
    background: rgba(212,168,85,0.18);
}

.fellows-role-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
}

.fellows-role-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.fellows-role-time {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #D4A855;
    letter-spacing: 0.3px;
    padding: 4px 12px;
    border-radius: 100px;
    background: rgba(212,168,85,0.08);
}

.fellows-role-footer {
    text-align: center;
    margin-top: 32px;
    font-size: 14px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Kampala Summit Section */
.fellows-kampala-section {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.fellows-kampala-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 64px;
    margin-top: 48px;
    align-items: start;
}

.fellows-kampala-block {
    margin-bottom: 32px;
}

.fellows-kampala-block:last-child {
    margin-bottom: 0;
}

.fellows-kampala-block-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.fellows-kampala-block-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.fellows-kampala-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fellows-kampala-stat {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: var(--transition-spring);
}

.fellows-kampala-stat:hover {
    border-color: rgba(212,168,85,0.2);
    transform: translateY(-2px);
}

.fellows-kampala-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #D4A855;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.fellows-kampala-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Exchange Section (What You Receive / What You Give) */
.fellows-exchange-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
    margin-top: 48px;
}

.fellows-exchange-col-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(212,168,85,0.2);
}

.fellows-exchange-col-title.give {
    border-bottom-color: var(--border);
}

/* CTA Section */
.pioneers-cta-section {
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.pioneers-apply-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
    text-align: left;
}

.pioneers-apply-form input,
.pioneers-apply-form select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s;
    -webkit-appearance: none;
}

.pioneers-apply-form input:focus,
.pioneers-apply-form select:focus {
    outline: none;
    border-color: #D4A855;
}

.pioneers-apply-form select {
    cursor: pointer;
    color: var(--text-secondary);
}

.pioneers-cta-note {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 12px;
    text-align: center;
}

/* ============================================
   Announcement Bar
   ============================================ */

.announcement-bar {
    background: #000;
    text-align: center;
    padding: 0 48px 0 20px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.announcement-bar a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.announcement-bar a:hover {
    color: #fff;
}

.announcement-bar-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    background: linear-gradient(135deg, #D4A855, #F16001);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.announcement-bar-arrow {
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
}

.announcement-bar a:hover .announcement-bar-arrow {
    opacity: 1;
    transform: translateX(2px);
}

.announcement-bar-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}

.announcement-bar-close:hover {
    color: rgba(255,255,255,0.8);
}

.announcement-bar.hidden {
    display: none;
}

/* ============================================
   Blog / Letter Page
   ============================================ */

.letter {
    padding: 140px 20px 80px;
}

.letter-container {
    max-width: 680px;
    margin: 0 auto;
}

.letter-header {
    text-align: left;
    margin-bottom: 80px;
}

.letter-header-meta {
    display: flex;
    align-items: baseline;
    gap: 24px;
    margin-bottom: 32px;
}

.letter-brand {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--text);
}

.letter-date {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.letter-header-type {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.6;
}

.letter-header-rule {
    width: 100%;
    height: 1px;
    background: var(--border);
    margin-bottom: 48px;
}

.letter-title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: 12px;
    text-align: left;
}

.letter-subtitle {
    font-size: 17px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.letter-subtitle-role {
    font-size: 15px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

/* Letter body — literary serif feel */
.letter-body {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.letter-body p {
    margin-bottom: 24px;
}

.letter-body h2 {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #D4A855;
    margin-top: 8px;
    margin-bottom: 28px;
}

.letter-body em {
    font-style: italic;
}

.letter-divider {
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 56px auto;
}

.letter-pullquote {
    padding: 32px 0;
    margin: 40px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 17px;
    line-height: 1.85;
    color: var(--text);
    font-style: italic;
}

.letter-final-quote {
    font-size: 22px;
    text-align: center;
    color: var(--text);
    margin: 40px 0;
    font-style: italic;
}

.letter-closing-line {
    font-size: 20px;
    text-align: center;
    color: var(--text);
    font-weight: 500;
    margin-top: 40px;
    margin-bottom: 0;
}

/* Signature block */
.letter-signature-block {
    margin-top: 80px;
    text-align: left;
}

.letter-signature-rule {
    width: 100%;
    height: 1px;
    background: var(--border);
    margin-bottom: 56px;
}

.letter-wtklogo {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 5px;
    color: var(--text);
    margin-bottom: 4px;
}

.letter-wtktagline {
    font-family: 'Lora', serif;
    font-size: 15px;
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: 56px;
}

.letter-signature-img {
    display: block;
    margin-bottom: -4px;
}

.letter-signature-img img {
    width: 420px;
    height: auto;
}

.letter-signature-details {
    text-align: left;
}

.letter-signature-details p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 2;
    color: var(--text-secondary);
}

.letter-signature-name {
    font-weight: 600;
    font-size: 16px !important;
    color: var(--text) !important;
    letter-spacing: 0.3px;
}

.letter-signature-role {
    color: var(--text-secondary) !important;
    font-size: 14px !important;
}

.letter-signature-location {
    color: var(--text-muted) !important;
    font-size: 13px !important;
}

.letter-signature-email a {
    color: var(--text-secondary) !important;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: color 0.2s, border-color 0.2s;
}

.letter-signature-email a:hover {
    color: var(--text) !important;
    border-color: var(--text-muted);
}

.letter-signature-date {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    margin-top: 8px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Blog post cards */
.blog-post-card {
    display: block;
    padding: 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    text-decoration: none;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    margin-bottom: 24px;
}

.blog-post-card:hover {
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.blog-post-card-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.blog-post-card-type {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #D4A855;
}

.blog-post-card-meta time {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-muted);
}

.blog-post-card-title {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 12px;
    letter-spacing: -0.3px;
}

.blog-post-card-excerpt {
    font-family: 'Lora', serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 20px;
}

.blog-post-card-read {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.3px;
}

.blog-post-card-read span {
    transition: transform 0.2s;
    display: inline-block;
}

.blog-post-card:hover .blog-post-card-read span {
    transform: translateX(4px);
}

/* Closing tagline */
.letter-closing-tagline {
    margin-top: 72px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
    text-align: left;
}

.letter-closing-tagline p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ============================================
   Careers Page — v3 Redesign
   ============================================ */

/* Manifesto Prose — light theme */
.careers-manifesto-prose {
    max-width: 720px;
    margin-top: 48px;
}

.careers-manifesto-prose p {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.85;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.careers-manifesto-prose p:last-child {
    margin-bottom: 0;
}

.careers-manifesto-prose .manifesto-lora {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    color: var(--text);
    display: block;
    margin: 36px 0;
    font-size: 18px;
    line-height: 1.7;
}

.careers-manifesto-prose .manifesto-standalone {
    margin-top: 36px;
    margin-bottom: 36px;
    color: var(--text);
    font-weight: 500;
}

.careers-manifesto-prose .manifesto-bold {
    color: var(--text);
    font-weight: 500;
}

.careers-manifesto-prose-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    padding: 12px 28px;
    border: 1px solid var(--border);
    border-radius: 100px;
    transition: all var(--transition);
    margin-top: 40px;
}

.careers-manifesto-prose-cta:hover {
    border-color: var(--text);
}

/* Roles — Collapsible accordion (uses .page-section wrapper) */

.careers-role-category-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 16px;
    padding-top: 8px;
}

.careers-role-category + .careers-role-category {
    margin-top: 48px;
}

.careers-role-row {
    border-bottom: 1px solid var(--border);
}

.careers-role-row:first-child {
    border-top: 1px solid var(--border);
}

.careers-role-row.role-featured {
    border-left: 3px solid;
    border-image: linear-gradient(180deg, #64B5F6, #4DD0E1) 1;
    padding-left: 20px;
}

.careers-role-row.role-featured-warm {
    border-image: linear-gradient(180deg, #FFB74D, #FF8A65) 1;
}

.careers-role-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 20px 0;
    gap: 16px;
    user-select: none;
}

.careers-role-row-header:hover {
    opacity: 0.8;
}

.careers-role-row-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.careers-role-row-dept {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.careers-role-row-title {
    font-size: 17px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.careers-role-row-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.careers-role-row-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.careers-role-row-chevron {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.careers-role-row.open .careers-role-row-chevron {
    transform: rotate(180deg);
}

.careers-role-row-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.careers-role-row.open .careers-role-row-content {
    max-height: 800px;
}

.careers-role-row-body {
    padding: 0 0 28px;
}

.careers-role-row-desc {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 720px;
}

.careers-role-row-list {
    list-style: none;
    margin-bottom: 24px;
}

.careers-role-row-list li {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
    padding: 5px 0;
    padding-left: 18px;
    position: relative;
}

.careers-role-row-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-hover);
}

.careers-role-row-apply {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    padding: 10px 20px;
    border: 1px solid var(--border);
    border-radius: 100px;
    transition: all var(--transition);
}

.careers-role-row-apply:hover {
    border-color: var(--text);
}

.careers-role-row-apply span {
    transition: transform var(--transition);
}

.careers-role-row-apply:hover span {
    transform: translateX(3px);
}

/* Principles Compact — 7 one-liners */
.careers-principles-compact {
    padding: 100px 0;
    background: var(--bg);
}

.careers-principles-compact-inner {
    max-width: 720px;
}

.careers-principles-compact-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 48px;
}

.careers-principles-compact-list {
    list-style: none;
    counter-reset: principle;
}

.careers-principles-compact-list li {
    counter-increment: principle;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 16px;
    align-items: baseline;
}

.careers-principles-compact-list li:first-child {
    border-top: 1px solid var(--border);
}

.careers-principles-compact-list li::before {
    content: counter(principle);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 16px;
    font-variant-numeric: tabular-nums;
}

.careers-principles-compact-link {
    margin-top: 32px;
}

/* ============================================
   Company Page — Monumental Redesign
   ============================================ */

/* Epigraph (hero quote) */
.company-epigraph {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 16px;
    color: #D4A855;
    margin-bottom: 32px;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

/* Origin Story */
.company-origin {
    padding: 100px 0;
    background: var(--bg);
}

.company-origin-inner {
    max-width: 720px;
    margin: 0 auto;
}

.company-origin-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.company-origin-title {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 40px;
}

.company-origin-body {
    font-family: 'Lora', Georgia, serif;
    font-size: 18px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.company-origin-body p {
    margin-bottom: 28px;
}

.company-origin-body p:last-child {
    margin-bottom: 0;
}

/* Scale Stats */
.company-scale-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.company-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid #D4A855;
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
}

.company-stat-card-number {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.company-stat-card-label {
    font-size: 14px;
    color: var(--text-tertiary);
    line-height: 1.4;
}

.company-scale-prose {
    max-width: 720px;
}

.company-scale-prose p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.company-scale-prose p:last-child {
    margin-bottom: 0;
}

/* Principles */
.company-principles {
    max-width: 800px;
    margin: 0 auto;
}

.company-principle {
    padding-bottom: 48px;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--border);
}

.company-principle:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.company-principle-number {
    font-size: 13px;
    color: #D4A855;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 8px;
}

.company-principle-title {
    font-size: 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.company-principle-body {
    font-family: 'Lora', Georgia, serif;
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.company-principle-body p {
    margin-bottom: 16px;
}

.company-principle-body p:last-child {
    margin-bottom: 0;
}

/* Invitation */
.company-invitation {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    padding: 80px 0;
}

.company-invitation-title {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(24px, 2.5vw, 32px);
    color: #D4A855;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 32px;
}

.company-invitation-body {
    font-family: 'Lora', Georgia, serif;
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.company-invitation-body p {
    margin-bottom: 20px;
}

.company-invitation-body p:last-child {
    margin-bottom: 0;
}

.company-invitation-sig {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 32px;
    letter-spacing: 0.02em;
}

/* CTA Actions */
.company-cta-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.company-cta-actions .btn-text-link {
    font-size: 15px;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}

.company-cta-actions .btn-text-link:hover {
    color: var(--text);
    border-color: var(--text);
}

/* ============================================
   Responsive — Mobile
   ============================================ */

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

    /* Nav mobile */
    .nav-inner {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        height: 60px;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 24px 20px;
        gap: 20px;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a,
    .nav-links .nav-dropdown-trigger {
        color: var(--text-secondary);
    }

    .nav-links a:hover {
        color: var(--text);
    }

    .nav-toggle {
        display: flex;
    }

    .nav-actions {
        display: none;
    }

    .nav-mobile-cta {
        display: block;
        text-align: center;
        width: 100%;
        background: var(--text);
        color: var(--white);
        padding: 12px 20px;
        border-radius: 100px;
        font-weight: 500;
        font-size: 15px;
    }

    /* Mega menu mobile */
    .mega-menu {
        position: static;
        width: 100%;
        transform: none;
        left: 0;
        border: none;
        border-radius: 0;
        padding: 8px 0 0;
        background: transparent;
        box-shadow: none;
        min-width: 0;
    }

    .mega-menu-wide {
        min-width: 0;
    }

    .nav-dropdown.open .mega-menu {
        transform: none;
    }

    .mega-menu-inner {
        flex-direction: column;
        gap: 16px;
    }

    .mega-menu-section + .mega-menu-section {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
        border-top: 1px solid var(--border);
        padding-top: 16px;
    }

    .mega-menu-label {
        padding: 0;
        margin-bottom: 8px;
    }

    .mega-menu-item {
        padding: 8px 0;
    }

    .mega-menu-item:hover {
        background: transparent;
    }


    .mega-menu-title {
        color: var(--text);
    }

    .mega-menu-desc {
        color: var(--text-tertiary);
    }

    .mega-menu-icon {
        background: var(--bg-page);
    }

    /* Hero mobile */
    .hero {
        padding: 100px 0 48px;
        min-height: auto;
    }

    .hero-title {
        font-size: clamp(32px, 8vw, 44px);
    }

    .hero-dash-sidebar {
        display: none;
    }

    .hero-dash-metrics {
        flex-wrap: wrap;
    }

    .hero-dash-metric {
        min-width: 60px;
    }

    .email-capture {
        flex-direction: column;
        border-radius: 16px;
    }

    .email-capture input,
    .email-capture button {
        padding: 14px 20px;
    }

    .email-capture button {
        border-radius: 100px;
        margin: 0 4px 4px 4px;
    }

    .hero-visual {
        display: none;
    }

    .device-phone {
        max-width: 100%;
        border-radius: 28px;
        padding: 10px 6px;
    }

    .device-phone-notch {
        width: 60px;
        height: 18px;
        top: 10px;
    }

    .device-phone-screen {
        border-radius: 22px;
    }

    /* Stats bar mobile */
    .stats-bar-grid {
        flex-direction: column;
        gap: 24px;
    }

    .stats-bar-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
    }

    .stats-bar-divider {
        width: 40px;
        height: 1px;
        background: var(--border);
    }

    /* Product cards mobile */
    .product-cards {
        grid-template-columns: 1fr;
    }

    .product-card {
        min-height: 220px;
    }

    .product-card:nth-child(1),
    .product-card:nth-child(2),
    .product-card:nth-child(3),
    .product-card:nth-child(4) {
        grid-column: auto;
        grid-row: auto;
    }

    .product-card.featured {
        grid-row: span 1;
    }

    .product-card-preview {
        display: none;
    }

    /* Platform */
    .platform {
        padding: 80px 0;
    }

    /* Features mobile */
    .feature {
        padding: 60px 0;
    }

    .feature-grid {
        gap: 32px;
    }

    .feature-title {
        font-size: clamp(28px, 7vw, 36px);
    }

    /* Compound mobile */
    .compound {
        padding: 80px 0;
    }

    .compound-title {
        font-size: clamp(28px, 7vw, 36px);
    }

    .compound-grid {
        grid-template-columns: 1fr;
    }

    .compound-card {
        min-height: auto;
    }

    /* Scale mobile */
    .scale {
        padding: 80px 0;
    }

    .scale-grid {
        grid-template-columns: 1fr;
    }

    .scale-card:nth-child(1),
    .scale-card:nth-child(2),
    .scale-card:nth-child(3),
    .scale-card:nth-child(4),
    .scale-card:nth-child(5),
    .scale-card:nth-child(6),
    .scale-card:nth-child(7) {
        grid-column: span 1;
    }

    .scale-card {
        min-height: 180px;
    }

    .scale-card-featured {
        min-height: 340px;
    }

    .scale-title {
        font-size: clamp(28px, 7vw, 36px);
    }

    /* About mobile */
    .about {
        padding: 80px 0;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Mission mobile */
    .mission {
        padding: 80px 0;
    }

    .mission-card {
        grid-template-columns: 1fr;
    }

    .mission-content {
        padding: 32px 28px;
    }

    .mission-visual {
        order: -1;
        padding: 28px 28px 0;
    }

    .mission-visual svg {
        max-width: 200px;
    }

    /* Stories mobile */
    .vision {
        padding: 80px 0;
    }

    .vision-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .vision-grid {
        grid-template-columns: 1fr;
    }

    .vision-card {
        min-height: 320px;
    }

    .vision-card:nth-child(3) {
        grid-column: span 1;
        max-width: 100%;
    }

    .story-card:nth-child(2),
    .story-card:nth-child(5) {
        margin-top: 0;
    }

    /* Final CTA mobile */
    .final-cta {
        padding: 80px 0;
    }

    .final-cta-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .final-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .final-cta-actions .btn,
    .final-cta-actions .btn-secondary-light {
        text-align: center;
        justify-content: center;
    }

    /* Modal mobile */
    .demo-modal-container {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
        overflow-y: auto;
    }

    .demo-modal-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .demo-modal-left {
        padding: 32px 20px 28px;
    }

    .demo-modal-right {
        padding: 28px 20px 32px;
        max-height: none;
    }

    .demo-form-row {
        grid-template-columns: 1fr;
    }

    .demo-modal-quote {
        display: none;
    }

    .demo-modal-close {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Footer mobile */
    .footer-grid {
        flex-direction: column;
        gap: 32px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .footer-bottom-links {
        flex-wrap: wrap;
        gap: 16px;
    }

    /* Customers page mobile */
    .customers-hero {
        padding: 120px 0 60px;
    }

    .customers-hero-title {
        font-size: clamp(40px, 10vw, 64px);
    }

    .customers-logo-bar {
        flex-direction: column;
        gap: 16px;
    }

    .customers-logos {
        flex-direction: column;
        gap: 16px;
    }

    .customers-featured {
        padding: 0 0 60px;
    }

    .customers-featured-grid {
        grid-template-columns: 1fr;
    }

    .customers-featured-large {
        min-height: 340px;
    }

    .customers-testimonial-inner {
        padding: 60px 20px;
    }

    .customers-all {
        padding: 60px 0;
    }

    .customers-all-grid {
        grid-template-columns: 1fr;
    }

    .customers-story-card {
        min-height: 280px;
    }

    /* About card mobile */
    .about-inner {
        padding: 36px 24px;
    }

    /* Careers page mobile */
    .careers-role-row-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .careers-role-row-badge {
        display: none;
    }

    .careers-principles-compact {
        padding: 60px 0;
    }

    /* Company page mobile */
    .company-origin {
        padding: 60px 0;
    }

    .company-scale-stats {
        grid-template-columns: 1fr 1fr;
    }

    .company-principles {
        max-width: 100%;
    }

    .company-principle {
        padding-bottom: 36px;
        margin-bottom: 36px;
    }

    .company-principle-title {
        font-size: 20px;
    }

    .company-invitation {
        padding: 60px 0;
    }

    .company-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .company-cta-actions .btn,
    .company-cta-actions .btn-secondary-light,
    .company-cta-actions .btn-text-link {
        text-align: center;
        justify-content: center;
    }

    .customers-cta {
        padding: 60px 0;
    }

    .customers-stats {
        padding: 40px 0;
    }

    /* Story page mobile */
    .story-hero-img {
        height: 280px;
    }

    .story-hero-placeholder {
        font-size: 32px;
    }

    .story-body {
        padding: 48px 0;
    }

    .story-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .story-sidebar-inner {
        position: static;
    }

    .story-results-grid {
        grid-template-columns: 1fr;
    }

    .story-section {
        margin-top: 40px;
        padding-top: 32px;
    }

    /* Pricing page mobile */
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card {
        border-right: none;
        padding: 0;
    }

    .pricing-card + .pricing-card {
        border-top: 1px dashed var(--border);
        padding-top: 24px;
        margin-top: 24px;
    }

    .pricing-card:nth-child(2) {
        border-right: none;
    }

    .pricing-card:nth-child(3),
    .pricing-card:nth-child(4) {
        border-top: 1px dashed var(--border);
        padding-top: 24px;
        margin-top: 24px;
    }

    .pricing-page-hero {
        padding: 120px 0 60px;
    }

    .pricing-page-section {
        padding: 0 0 60px;
    }

    .pricing-card-header {
        min-height: 160px;
    }

    .pricing-faqs {
        padding: 60px 0;
    }

    .pricing-start {
        padding: 60px 0 80px;
    }

    .pricing-start-header {
        margin-bottom: 36px;
    }

    .pricing-start-grid {
        grid-template-columns: 1fr;
    }

    .pricing-start-card {
        padding: 32px 24px;
    }

    .pricing-start-card-stats {
        flex-wrap: wrap;
        gap: 24px;
    }

    .pricing-start-card-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .pricing-tiers {
        grid-template-columns: 1fr;
    }

    .pricing-tier {
        border-right: none;
        padding: 24px 0;
    }

    .pricing-tier + .pricing-tier {
        border-top: 1px dashed var(--border);
    }

    .pricing-tier:nth-child(2) {
        border-right: none;
    }

    .pricing-tier-popular {
        padding: 24px;
    }

    .pricing-detail {
        padding: 60px 0;
    }

    .pricing-compound {
        padding: 60px 0;
    }

    .pricing-compound-grid {
        grid-template-columns: 1fr;
    }

    .story-hook {
        font-size: 22px;
        margin-bottom: 36px;
    }

    /* Product page mobile */
    .page-hero {
        padding: 120px 0 60px;
    }

    .page-section {
        padding: 60px 0;
    }

    .page-cta {
        padding: 60px 0;
    }

    /* Product page new components — mobile */
    .page-hero-stats {
        gap: 8px;
    }

    .agent-grid {
        grid-template-columns: 1fr;
    }

    .interface-grid {
        grid-template-columns: 1fr;
    }

    .datasource-grid {
        grid-template-columns: 1fr;
    }

    .connections-grid {
        grid-template-columns: 1fr;
    }

    .security-grid {
        grid-template-columns: 1fr;
    }

    .security-badges {
        flex-direction: column;
        gap: 16px;
    }

    .integration-categories {
        grid-template-columns: 1fr;
    }

    .grant-callout {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }

    .grants-steps {
        grid-template-columns: 1fr;
    }

    .grants-coverage-grid {
        grid-template-columns: 1fr;
    }

    .grants-stats {
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }

    .inline-testimonial {
        padding: 48px 0;
    }

    .inline-testimonial blockquote {
        font-size: 16px;
    }

    .grants-hero {
        padding: 120px 0 60px;
    }

    .workflow {
        flex-direction: column;
    }

    .workflow-step {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding-right: 0;
        padding-bottom: 28px;
    }

    .workflow-step:last-child {
        padding-bottom: 0;
    }

    .workflow-step:not(:last-child)::after {
        top: 36px;
        left: 17px;
        right: auto;
        width: 1px;
        height: calc(100% - 18px);
    }

    .workflow-step-content {
        flex: 1;
    }

    .code-block {
        padding: 16px;
        font-size: 12px;
    }
    .code-block pre {
        font-size: 12px;
    }

    .partner-grid {
        grid-template-columns: 1fr;
    }

    .api-grid {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: 1fr 1fr;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .offline-grid {
        grid-template-columns: 1fr;
    }

    .timeline {
        padding-left: 28px;
    }

    /* Pioneers mobile */
    .pioneers-hero {
        padding: 120px 0 60px;
    }

    .pioneers-hero-title {
        font-size: 32px;
    }

    .pioneers-hero-subtitle {
        font-size: 16px;
    }

    .pioneers-hero-stats {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .pioneers-hero-stat {
        min-width: 100px;
    }

    .pioneers-hero-stat-number {
        font-size: 26px;
    }

    .pioneers-hero-cta {
        flex-direction: column;
        gap: 16px;
    }

    .pioneers-thesis {
        font-size: 17px;
    }

    .pioneers-value-grid {
        grid-template-columns: 1fr;
    }

    .pioneers-archetype-grid {
        grid-template-columns: 1fr;
    }

    .pioneers-region-grid {
        grid-template-columns: 1fr;
    }

    .pioneers-journey-timeline {
        padding-left: 60px;
    }

    .pioneers-journey-timeline::before {
        left: 24px;
    }

    .pioneers-journey-marker {
        left: -60px;
        width: 36px;
    }

    .pioneers-journey-number {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .pioneers-journey-title {
        font-size: 16px;
    }

    .pioneers-criteria-item {
        flex-direction: column;
        gap: 12px;
    }

    .fellows-role-grid {
        grid-template-columns: 1fr;
    }

    .fellows-kampala-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .fellows-exchange-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pricing-faqs-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Blog / Letter mobile */
    .announcement-bar {
        font-size: 12px;
        padding: 8px 40px 8px 16px;
    }

    .announcement-bar-badge {
        font-size: 9px;
    }

    .letter {
        padding: 120px 20px 60px;
    }

    .letter-title {
        font-size: 28px;
    }

    .letter-body {
        font-size: 16px;
    }

    .letter-body h2 {
        font-size: 12px;
    }

    .letter-pullquote {
        font-size: 15px;
        padding: 24px 0;
    }

    .letter-final-quote {
        font-size: 18px;
    }

    .letter-signature-img img {
        width: 300px;
    }

    .letter-header-meta {
        flex-direction: column;
        gap: 6px;
    }

    /* Declaration mobile */
    .system-flow {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .system-flow-arrow {
        display: none;
    }

    .system-stats {
        gap: 8px;
    }

    .system-stats-pill {
        font-size: 13px;
        padding: 6px 14px;
    }

    /* Four Products mobile */
    .four-product-block {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 48px 0;
    }

    .four-product-reverse .four-product-content,
    .four-product-reverse .four-product-visual {
        order: 0;
    }

    .hero-phone-inline {
        width: 180px;
        height: 360px;
        margin: 0 auto;
    }

    .four-product-stats span {
        font-size: 13px;
    }

    /* Why Now mobile */
    .why-now-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .why-now-card {
        min-height: auto;
    }

    /* Network mobile */
    .network-grid {
        grid-template-columns: 1fr;
    }

    .network-card:nth-child(1),
    .network-card:nth-child(2),
    .network-card:nth-child(3),
    .network-card:nth-child(4),
    .network-card:nth-child(5) {
        grid-column: span 1;
    }

    .network-card-featured {
        min-height: 320px;
    }

    /* Frontier mobile */
    .frontier-grid {
        grid-template-columns: 1fr;
    }

    .frontier-grid .vision-card:nth-child(3) {
        grid-column: span 1;
        max-width: 100%;
    }

    /* Founder quote mobile */
    .founder-quote {
        padding: 60px 0;
    }

    .founder-quote-text {
        font-size: 18px;
    }

    /* Final CTA mobile */
    .final-cta-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}