/* Jambvant Theme and Base Styles */

:root {
    --primary-purple: #FF8C00;
    --primary-purple-dark: #E07B00;
    --primary-purple-light: #FFB347;
    --text-dark: #1a1a1a;
    --text-gray: #666666;
    --bg-light: #FFF5E1; /* cream background used across hero and panels for consistent pattern */
    --bg-cool: #F2F5FA;  /* soft slate accent — used sparingly to break orange fatigue */
    --bg-white: #ffffff;
    --border-color: #e0e0e0;
    --bronze: #8B5A3C;
    --silver: #A8A9A9;
    --gold: #FFD700;
    --platinum: #B997EC;
    --emerald: #50C878;
    --diamond: #1E90FF;
    /* Semantic graph/data-viz tokens — kept distinct from brand orange because they
       carry meaning (role/state), not decoration. Used by insights.html. */
    --viz-seeker: #10B981;    /* green = growing, looking for help */
    --viz-provider: #2563EB;  /* blue = stable, offering help */
    --viz-current-user: #7C3AED; /* purple = "this is you" */
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --card-bg: var(--bg-white);
}

/* Dark Theme */
[data-theme="dark"] {
    --primary-purple: #FFB347;
    --primary-purple-dark: #FF8C00;
    --primary-purple-light: #FFC875;
    --text-dark: #e8e8e8;
    --text-gray: #b0b0b0;
    /* Warm-toned dark backgrounds preserve the saffron brand feel
       instead of going to neutral charcoal. */
    --bg-light: #1f1813;
    --bg-cool: #181c22;
    --bg-white: #15110d;
    --border-color: #333333;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    /* card background slightly lighter than page background */
    --card-bg: #1c1612;
}

[data-theme="dark"] body {
    background-color: var(--bg-white);
    color: var(--text-dark);
}

[data-theme="dark"] .hero {
    background: #1a1a1a;
}

[data-theme="dark"] .steps-section {
    background: var(--bg-white);
}

[data-theme="dark"] .step-card {
    background: #1a1a1a;
}

[data-theme="dark"] .info-bar {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme="dark"] .tier-badge.silver,
[data-theme="dark"] .tier-badge.gold,
[data-theme="dark"] .tier-badge.platinum {
    color: #1a1a1a;
}

[data-theme="dark"] .bronze-tier { background: linear-gradient(135deg, #2A2219 0%, #1F1A14 100%); }
[data-theme="dark"] .silver-tier { background: linear-gradient(135deg, #252525 0%, #1F1F1F 100%); }
[data-theme="dark"] .gold-tier { background: linear-gradient(135deg, #2A2714 0%, #1F1C10 100%); }
[data-theme="dark"] .platinum-tier { background: linear-gradient(135deg, #251F2A 0%, #1C181F 100%); }

[data-theme="dark"] .final-cta {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-top: 1px solid var(--primary-purple);
}

[data-theme="dark"] .cta-button {
    background: var(--primary-purple);
    color: #1a1a1a;
}

/* Light theme - final CTA has orange gradient background, so text should be white */
/* Base light theme styles (applied by default, overridden by dark theme) */
.final-cta h2 {
    color: white !important;
}

.final-cta p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.final-cta .cta-note {
    color: rgba(255, 255, 255, 0.85) !important;
}

.final-cta .cta-button {
    background: white !important;
    color: #FF8C00 !important;
}

/* Dark theme overrides for final-cta text */
[data-theme="dark"] .final-cta h2 {
    color: white !important;
}

[data-theme="dark"] .final-cta p {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .final-cta .cta-note {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="dark"] .final-cta .cta-button {
    background: var(--primary-purple) !important;
    color: #1a1a1a !important;
}

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

html {
    scroll-behavior: smooth;
}

/* Skip to main content link - Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-purple);
    color: var(--bg-white);
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--primary-purple-dark);
    outline-offset: 2px;
}

/* CTA hint text */
.hero-cta-hint,
.footer-cta-hint {
    font-size: 13px;
    color: var(--text-gray);
    margin-top: 12px;
    opacity: 0.8;
}

.footer-cta-hint {
    margin-top: 16px;
}

/* Loading skeleton styles */
.skeleton {
    background: linear-gradient(90deg, var(--bg-light) 25%, rgba(255, 140, 0, 0.1) 50%, var(--bg-light) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-text.medium {
    width: 80%;
}

.skeleton-circle {
    border-radius: 50%;
}

.skeleton-button {
    height: 48px;
    width: 160px;
    border-radius: 8px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Content loading fade-in */
.content-loading {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.content-loaded {
    opacity: 1;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Tamil', 'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Gujarati', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-white);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-white);
    box-shadow: var(--shadow);
    z-index: 1000;
    padding: 20px 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Header Navigation */
.header-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: 32px;
}

.header-nav .nav-link {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
}

.header-nav .nav-link:hover {
    color: var(--primary-purple);
    background: rgba(255, 140, 0, 0.08);
}

.header-nav .nav-link.active {
    color: var(--primary-purple);
}

.header-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: var(--primary-purple);
    border-radius: 2px;
}

[data-theme="dark"] .header-nav .nav-link {
    color: var(--text-light);
}

[data-theme="dark"] .header-nav .nav-link:hover {
    color: var(--primary-purple);
    background: rgba(255, 140, 0, 0.15);
}

@media (max-width: 768px) {
    .header-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-white);
        flex-direction: column;
        padding: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        gap: 8px;
    }

    .header-nav.mobile-visible {
        display: flex;
    }

    .header-nav .nav-link {
        width: 100%;
        text-align: center;
        padding: 12px 16px;
    }

    [data-theme="dark"] .header-nav {
        background: var(--bg-dark);
    }
}

/* Mobile Hamburger Menu */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--primary-purple);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu Styles */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .header-right {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background-color: var(--bg-white);
        flex-direction: column;
        padding: 20px;
        gap: 12px;
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 999;
    }

    .header-right.mobile-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .header-right .btn {
        width: 100%;
        text-align: center;
    }

    .header-right .user-profile-header,
    .header-right .notifications-container {
        width: 100%;
    }

    .header-right .user-profile-header .language-btn {
        width: 100%;
        justify-content: center;
    }
}

.language-selector {
    position: relative;
}

.language-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background-color: var(--bg-light);
    border: 1px solid var(--primary-purple);
    border-radius: 4px;
    color: var(--text-dark);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.language-btn:hover {
    background-color: rgba(255, 140, 0, 0.1);
}

.language-flag {
    font-size: 14px;
}

.language-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: var(--bg-white);
    border: 1px solid var(--primary-purple);
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    z-index: 3000; /* Ensure above header/modal */
    display: none;
}

.language-dropdown.active {
    display: block;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 14px;
    font-weight: 500;
}

.language-option:hover {
    background-color: var(--bg-light);
}

.language-option.selected {
    background-color: rgba(255, 140, 0, 0.1);
    color: var(--primary-purple);
}

/* Theme Toggle */
.theme-toggle {
    padding: 4px 8px;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
}

.theme-toggle:hover {
    background-color: rgba(255, 140, 0, 0.1);
    border-color: var(--primary-purple);
}

.theme-icon {
    display: inline-block;
    transition: transform 0.3s ease;
}

.theme-toggle:hover .theme-icon {
    transform: rotate(20deg);
}

.logo {
    font-size: 26.4px;
    font-weight: 700;
    color: var(--primary-purple);
    cursor: pointer;
}

.logo a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: inline-block;
}

.btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background-color: var(--primary-purple);
    color: var(--bg-white);
}

.btn-primary:hover {
    background-color: var(--primary-purple-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-purple);
    border: 2px solid var(--primary-purple);
}

.btn-secondary:hover {
    background-color: var(--primary-purple);
    color: var(--bg-white);
}

/* Hero Section */
.hero {
    margin-top: 80px;
    padding: 80px 0 100px;
    background: var(--bg-light);
    text-align: center;
    position: relative;
}

.badge {
    display: inline-block;
    padding: 8px 20px;
    background-color: rgba(255, 140, 0, 0.1);
    color: var(--primary-purple);
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
}

.hero h1 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
    color: var(--text-dark);
}

.hero .highlight {
    color: var(--primary-purple);
}

.hero p {
    font-size: 18px;
    color: var(--text-gray);
    max-width: 700px;
    margin: 24px auto 40px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Hero Social Proof */
.hero-social-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 32px auto;
    padding: 16px 32px;
    background: rgba(255, 140, 0, 0.08);
    border-radius: 50px;
    max-width: fit-content;
}

.social-proof-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.social-proof-number {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-purple);
}

.social-proof-label {
    font-size: 12px;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.social-proof-divider {
    width: 1px;
    height: 32px;
    background: var(--border-color);
}

/* Hero Navigation Preview */
.hero-nav-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 140, 0, 0.2);
}

.nav-preview-label {
    font-size: 14px;
    color: var(--text-gray);
    font-weight: 500;
}

.nav-preview-link {
    font-size: 14px;
    color: var(--primary-purple);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 20px;
    transition: all 0.3s ease;
    background: transparent;
}

.nav-preview-link:hover {
    background: rgba(255, 140, 0, 0.1);
    transform: translateY(-2px);
}

/* ============================================
   HERO ANIMATED - Eye-catching redesign
   ============================================ */

.hero-animated {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0 40px;
}

/* Animated badge */
.hero-badge-animated {
    animation: fadeInDown 0.8s ease-out;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.badge-icon {
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

/* Main headline with word cycling */
.hero-headline-animated {
    font-size: 56px !important;
    font-weight: 800;
    line-height: 1.15 !important;
    margin-bottom: 24px !important;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero-headline-static {
    display: block;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.hero-headline-dynamic {
    display: block;
    height: 70px;
    overflow: hidden;
}

.word-cycle {
    display: block;
    animation: wordCycle 8s ease-in-out infinite;
}

.word-cycle .word {
    display: block;
    height: 70px;
    line-height: 70px;
    color: var(--primary-purple);
    background: linear-gradient(135deg, #FF8C00 0%, #FFB347 50%, #FF8C00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes wordCycle {
    0%, 20% { transform: translateY(0); }
    25%, 45% { transform: translateY(-70px); }
    50%, 70% { transform: translateY(-140px); }
    75%, 95% { transform: translateY(-210px); }
    100% { transform: translateY(-280px); }
}

/* Subheadline */
.hero-subheadline {
    font-size: 22px !important;
    color: var(--text-gray) !important;
    max-width: 600px;
    margin: 0 auto 40px !important;
    animation: fadeInUp 0.8s ease-out 0.4s both;
    line-height: 1.5;
}

.hero-subheadline strong {
    color: var(--text-dark);
    font-weight: 700;
}

/* CTA Section */
.hero-cta-section {
    animation: fadeInUp 0.8s ease-out 0.6s both;
    margin-bottom: 40px;
}

.btn-large {
    padding: 16px 32px !important;
    font-size: 18px !important;
    font-weight: 600;
}

.hero-cta-pulse {
    position: relative;
    overflow: hidden;
}

.hero-cta-pulse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% { width: 0; height: 0; opacity: 0.5; }
    100% { width: 200%; height: 200%; opacity: 0; }
}

.btn-arrow {
    margin-left: 8px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.hero-cta-pulse:hover .btn-arrow {
    transform: translateX(4px);
}

/* Learn More link */
.hero-learn-more {
    display: inline-block;
    margin-top: 16px;
    color: var(--accent-color);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.hero-learn-more:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Visual accent dots */
.hero-visual-accent {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 32px 0;
    animation: fadeIn 0.8s ease-out 0.8s both;
}

.accent-dot {
    width: 8px;
    height: 8px;
    background: var(--primary-purple);
    border-radius: 50%;
    opacity: 0.4;
    animation: dotPulse 1.5s ease-in-out infinite;
}

.accent-dot:nth-child(2) { animation-delay: 0.2s; }
.accent-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* Compact stats */
.hero-stats-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    animation: fadeInUp 0.8s ease-out 1s both;
    margin-top: 20px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--primary-purple);
    line-height: 1;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: var(--text-gray);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border-color);
}

/* Fadeup animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .hero-headline-animated {
        font-size: 36px !important;
    }

    .hero-headline-dynamic {
        height: 50px;
    }

    .word-cycle .word {
        height: 50px;
        line-height: 50px;
    }

    @keyframes wordCycle {
        0%, 20% { transform: translateY(0); }
        25%, 45% { transform: translateY(-50px); }
        50%, 70% { transform: translateY(-100px); }
        75%, 95% { transform: translateY(-150px); }
        100% { transform: translateY(-200px); }
    }

    .hero-subheadline {
        font-size: 18px !important;
    }

    .hero-stats-compact {
        gap: 20px;
    }

    .stat-number {
        font-size: 22px;
    }
}

/* Scroll indicators - Up and Down buttons */
.scroll-indicator {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #FF8C00 0%, #FFB347 100%);
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(255, 140, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

[data-theme="dark"] .scroll-indicator {
    box-shadow: 0 4px 16px rgba(255, 140, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Both buttons at bottom, side by side */
.scroll-indicator.scroll-down {
    bottom: 24px;
    left: calc(50% + 6px);
    transform: none;
}

.scroll-indicator.scroll-up {
    bottom: 24px;
    left: calc(50% - 50px);
    transform: none;
}

.scroll-indicator:hover {
    transform: translateX(-50%) scale(1.15);
    box-shadow: 0 6px 24px rgba(255, 140, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.18);
}

.scroll-indicator.scroll-down:hover,
.scroll-indicator.scroll-up:hover {
    transform: scale(1.15);
}

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

.scroll-indicator-arrow {
    width: 12px;
    height: 12px;
    border-right: 2.5px solid #ffffff;
    border-bottom: 2.5px solid #ffffff;
    border-radius: 2px;
}

/* Down arrow */
.scroll-indicator.scroll-down .scroll-indicator-arrow {
    transform: rotate(45deg) translate(-2px, -2px);
    animation: scroll-bounce-down 1.5s ease-in-out infinite;
}

@keyframes scroll-bounce-down {
    0%, 100% {
        transform: rotate(45deg) translate(-2px, -2px);
    }
    50% {
        transform: rotate(45deg) translate(1px, 1px);
    }
}

/* Up arrow */
.scroll-indicator.scroll-up .scroll-indicator-arrow {
    transform: rotate(-135deg) translate(-2px, -2px);
    animation: scroll-bounce-up 1.5s ease-in-out infinite;
}

@keyframes scroll-bounce-up {
    0%, 100% {
        transform: rotate(-135deg) translate(-2px, -2px);
    }
    50% {
        transform: rotate(-135deg) translate(1px, 1px);
    }
}

/* Hide scroll indicator */
.scroll-indicator.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Mobile: position scroll indicators lower */
@media (max-width: 768px) {
    .scroll-indicator {
        width: 40px;
        height: 40px;
        bottom: 12px;
    }

    .scroll-indicator.scroll-down {
        bottom: 12px;
        left: calc(50% + 4px);
    }

    .scroll-indicator.scroll-up {
        bottom: 12px;
        left: calc(50% - 44px);
    }

    .scroll-indicator-arrow {
        width: 10px;
        height: 10px;
    }
}

/* ============================================
   MODERN SECTIONS - Matching hero style
   ============================================ */

/* Section badge */
.section-badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(255, 140, 0, 0.1);
    color: var(--primary-purple);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-header-animated h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 16px;
}

.section-header-animated p {
    font-size: 18px;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   STEPS SECTION - Clean Card Layout
   ============================================ */
.steps-section {
    padding: 60px 20px;
    background: var(--bg-white);
}

.steps-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 40px;
}

.steps-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.step-card {
    background: var(--bg-light);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(255, 140, 0, 0.15);
}

.step-number {
    width: 48px;
    height: 48px;
    background: var(--primary-purple);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto 20px;
}

.step-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.step-card p {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   FEATURES SECTION - Why Choose Jambvant
   ============================================ */
.features-section {
    padding: 80px 20px;
    background: var(--bg-white);
}

.features-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 48px;
}

.features-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.feature-card {
    background: var(--bg-light);
    border-radius: 20px;
    padding: 40px 28px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(255, 140, 0, 0.12);
    border-color: var(--accent-color);
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.6;
    margin: 0;
}

/* ============================================
   TESTIMONIALS SECTION
   ============================================ */
.testimonials-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #FFF5E1 0%, #FFE4B5 50%, #FFF5E1 100%);
}

[data-theme="dark"] .testimonials-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2a1f 50%, #1a1a1a 100%);
}

.testimonials-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 48px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
}

.testimonial-card {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

.testimonial-content {
    margin-bottom: 20px;
}

.testimonial-content p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-dark);
    font-style: italic;
    margin: 0;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 48px;
    height: 48px;
    background: var(--bg-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.author-info {
    display: flex;
    flex-direction: column;
}

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

.author-role {
    font-size: 13px;
    color: var(--text-gray);
}

/* ============================================
   FOR YOU IF... - Target Audience Section
   ============================================ */
.for-you-section {
    padding: 60px 20px;
    background: var(--bg-light);
}

.for-you-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 40px;
}

.for-you-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.for-you-card {
    background: var(--bg-white);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--border-color);
}

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

.for-you-icon {
    font-size: 32px;
    flex-shrink: 0;
    color: var(--primary-purple);
    display: flex;
    align-items: center;
    justify-content: center;
}

.for-you-card p {
    font-size: 15px;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   WHY JAMBVANT - Section Intro
   ============================================ */
.why-jambvant-intro {
    padding: 80px 20px 40px;
    background: var(--bg-white);
    text-align: center;
}

.why-jambvant-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.why-jambvant-subtitle {
    font-size: 18px;
    color: var(--text-gray);
    margin: 0;
}

/* ============================================
   USE CASES - What's Possible Section
   ============================================ */
.use-cases-section {
    padding: 80px 20px;
    background: var(--bg-white);
}

.use-cases-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.use-cases-subtitle {
    text-align: center;
    font-size: 16px;
    color: var(--text-gray);
    margin-bottom: 48px;
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.use-case-card {
    background: var(--bg-light);
    border-radius: 16px;
    padding: 28px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.use-case-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.use-case-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.use-case-icon {
    font-size: 28px;
    color: var(--primary-purple);
    display: flex;
    align-items: center;
    justify-content: center;
}

.use-case-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-gray);
    background: rgba(255, 140, 0, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
}

.use-case-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.use-case-card p {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.6;
    margin: 0;
}

/* ============================================
   INFO BAR - Combined Recognition + Trust
   ============================================ */
.info-bar {
    padding: 20px;
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.info-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.tier-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.tier-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-badge.bronze {
    background: linear-gradient(135deg, #CD7F32, #8B5A3C);
    color: white;
}

.tier-badge.silver {
    background: linear-gradient(135deg, #C0C0C0, #A8A9A9);
    color: #333;
}

.tier-badge.gold {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #333;
}

.tier-badge.platinum {
    background: linear-gradient(135deg, #E5E4E2, #B997EC);
    color: #333;
}

.divider-v {
    width: 1px;
    height: 24px;
    background: var(--border-color);
}

.trust-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.trust-row .trust-item {
    font-size: 13px;
    color: var(--text-gray);
    font-weight: 500;
}

/* ============================================
   TIER PROGRESSION SECTION
   ============================================ */
.tier-section {
    padding: 80px 20px;
    background: var(--bg-light);
}

.tier-section-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.tier-section-subtitle {
    text-align: center;
    font-size: 16px;
    color: var(--text-gray);
    margin-bottom: 48px;
}

.tier-progression {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto 40px;
    flex-wrap: wrap;
}

.tier-card {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    flex: 1;
    min-width: 180px;
    max-width: 220px;
    border: 2px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tier-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.bronze-tier { border-color: #CD7F32; background: linear-gradient(135deg, #FFF9F0 0%, #FFF5E6 100%); }
.silver-tier { border-color: #C0C0C0; background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%); }
.gold-tier { border-color: #FFD700; background: linear-gradient(135deg, #FFFEF0 0%, #FFF9E0 100%); }
.platinum-tier { border-color: #B997EC; background: linear-gradient(135deg, #FAF5FF 0%, #F3EAFF 100%); }

.tier-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.tier-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tier-icon-symbol {
    font-size: 20px;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bronze-icon {
    background: linear-gradient(145deg, #D4894A 0%, #CD7F32 50%, #A66628 100%);
}

.silver-icon {
    background: linear-gradient(145deg, #E8E8E8 0%, #C0C0C0 50%, #A8A8A8 100%);
}

.gold-icon {
    background: linear-gradient(145deg, #FFE55C 0%, #FFD700 50%, #E6BE00 100%);
}

.platinum-icon {
    background: linear-gradient(145deg, #D4B8FF 0%, #B997EC 50%, #9B7ACC 100%);
}

.platinum-icon .tier-icon-symbol {
    font-size: 24px;
}

.tier-card .tier-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.bronze-tier .tier-name { color: #CD7F32; }
.silver-tier .tier-name { color: #808080; }
.gold-tier .tier-name { color: #DAA520; }
.platinum-tier .tier-name { color: #9370DB; }

.tier-requirement {
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: 16px;
    font-weight: 500;
}

.tier-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.tier-benefits li {
    font-size: 14px;
    color: var(--text-dark);
    padding: 6px 0;
    border-top: 1px solid var(--border-color);
}

.tier-benefits li:first-child {
    border-top: none;
}

.tier-arrow {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: var(--text-gray);
    font-weight: 300;
}

.trust-badges {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.trust-badge {
    font-size: 14px;
    color: var(--text-gray);
    font-weight: 500;
}

/* ============================================
   FINAL CTA - Bold Finish
   ============================================ */
.final-cta {
    padding: 80px 20px;
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%);
    text-align: center;
}

.final-cta h2 {
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}

.final-cta p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 28px;
}

.cta-button {
    display: inline-block;
    padding: 16px 40px;
    background: white;
    color: var(--primary-purple);
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.cta-note {
    margin-top: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   MOBILE RESPONSIVE - Lower Sections
   ============================================ */
@media (max-width: 768px) {
    .steps-section {
        padding: 48px 16px;
    }

    .steps-title {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .steps-cards {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 320px;
    }

    .step-card {
        padding: 24px 20px;
    }

    .step-number {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin-bottom: 16px;
    }

    .step-card h3 {
        font-size: 16px;
    }

    .step-card p {
        font-size: 14px;
    }

    /* Features Section */
    .features-section {
        padding: 60px 16px;
    }

    .features-title {
        font-size: 26px;
        margin-bottom: 36px;
    }

    .features-cards {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 340px;
    }

    .feature-card {
        padding: 32px 24px;
    }

    .feature-icon {
        font-size: 40px;
    }

    .feature-card h3 {
        font-size: 18px;
    }

    .feature-card p {
        font-size: 14px;
    }

    /* For You If Section */
    .for-you-section {
        padding: 48px 16px;
    }

    .for-you-title {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .for-you-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 360px;
    }

    .for-you-card {
        padding: 20px;
    }

    .for-you-icon {
        font-size: 28px;
    }

    .for-you-card p {
        font-size: 14px;
    }

    /* Why Jambvant Intro */
    .why-jambvant-intro {
        padding: 60px 16px 32px;
    }

    .why-jambvant-title {
        font-size: 28px;
    }

    .why-jambvant-subtitle {
        font-size: 16px;
    }

    /* Use Cases Section */
    .use-cases-section {
        padding: 60px 16px;
    }

    .use-cases-title {
        font-size: 26px;
    }

    .use-cases-subtitle {
        font-size: 14px;
        margin-bottom: 36px;
    }

    .use-cases-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 360px;
        margin: 0 auto;
    }

    .use-case-card {
        padding: 24px;
    }

    .use-case-card h3 {
        font-size: 16px;
    }

    .use-case-card p {
        font-size: 14px;
    }

    /* Testimonials Section */
    .testimonials-section {
        padding: 60px 16px;
    }

    .testimonials-title {
        font-size: 26px;
        margin-bottom: 36px;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 360px;
        margin: 0 auto;
    }

    .testimonial-card {
        padding: 24px;
    }

    .testimonial-content p {
        font-size: 14px;
    }

    .author-avatar {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .author-name {
        font-size: 14px;
    }

    .author-role {
        font-size: 12px;
    }

    /* Tier Section */
    .tier-section {
        padding: 60px 16px;
    }

    .tier-section-title {
        font-size: 26px;
    }

    .tier-section-subtitle {
        font-size: 14px;
        margin-bottom: 36px;
    }

    .tier-progression {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .tier-card {
        min-width: 280px;
        max-width: 320px;
        width: 100%;
    }

    .tier-arrow {
        transform: rotate(90deg);
        font-size: 20px;
    }

    .tier-icon {
        font-size: 32px;
    }

    .tier-card .tier-name {
        font-size: 16px;
    }

    .trust-badges {
        gap: 16px;
    }

    .trust-badge {
        font-size: 13px;
    }

    /* Info Bar */
    .info-bar {
        padding: 16px;
    }

    .info-bar-inner {
        flex-direction: column;
        gap: 16px;
    }

    .tier-row {
        gap: 6px;
    }

    .tier-badge {
        padding: 5px 10px;
        font-size: 10px;
    }

    .divider-v {
        width: 60px;
        height: 1px;
    }

    .trust-row {
        gap: 12px;
    }

    .trust-row .trust-item {
        font-size: 12px;
    }

    /* Final CTA */
    .final-cta {
        padding: 60px 20px;
    }

    .final-cta h2 {
        font-size: 26px;
    }

    .final-cta p {
        font-size: 15px;
    }

    .cta-button {
        padding: 14px 32px;
        font-size: 15px;
        width: 100%;
        max-width: 280px;
    }

    .cta-note {
        font-size: 12px;
    }
}

/* Enhanced button hover states */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.btn-primary:hover::after {
    width: 300px;
    height: 300px;
}

/* Responsive adjustments for hero social proof */
@media (max-width: 600px) {
    .hero-social-proof {
        flex-direction: column;
        gap: 16px;
        padding: 20px 24px;
        border-radius: 16px;
    }

    .social-proof-divider {
        width: 60px;
        height: 1px;
    }

    .hero-nav-preview {
        flex-wrap: wrap;
        gap: 8px;
    }

    .nav-preview-label {
        width: 100%;
        text-align: center;
        margin-bottom: 8px;
    }
}

/* Features Section */
.features {
    padding: 100px 0;
    background-color: var(--bg-white);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-dark);
}

.section-header p {
    font-size: 18px;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.feature-card {
    background-color: var(--bg-white);
    padding: 40px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.feature-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.feature-icon-container {
    width: 64px;
    height: 64px;
    background-color: rgba(255, 140, 0, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon-container {
    transform: scale(1.05);
    background-color: rgba(255, 140, 0, 0.12);
}

.feature-icon-svg {
    width: 40px;
    height: 40px;
    color: var(--primary-purple);
}

.feature-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.feature-card p {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 1.6;
}

/* Recognition Section */
.recognition {
    padding: 100px 0;
    background: #FFF5E1;
}

/* Make Recognition headings/subtitle darker for better readability */
#recognition-title {
    color: var(--text-dark);
}

#recognition-desc {
    color: var(--text-dark);
}

/* Hide static leaderboard fallback when JS is enabled */
.js-enabled #leaderboard-fallback {
    display: none;
}

.recognition-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.recognition-logo svg {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 2px 4px rgba(107, 91, 255, 0.2));
    transition: transform 0.3s ease;
}

.recognition-logo svg:hover {
    transform: scale(1.05);
}

.recognition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.tier-card {
    background-color: var(--card-bg);
    padding: 32px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}

.tier-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.tier-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.tier-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.tier-bronze .tier-icon {
    background: radial-gradient(circle at 30% 30%, #CD7F32, #8B5A3C);
}

.tier-silver .tier-icon {
    background: radial-gradient(circle at 30% 30%, #D3D3D3, #A8A9A9);
}

.tier-gold .tier-icon {
    background: radial-gradient(circle at 30% 30%, #FFD700, #FFC700);
}

.tier-platinum .tier-icon {
    background: radial-gradient(circle at 30% 30%, #E6CCFF, #B997EC);
}

.tier-emerald .tier-icon {
    background: radial-gradient(circle at 30% 30%, #7FD8BE, #50C878);
}

.tier-diamond .tier-icon {
    background: radial-gradient(circle at 30% 30%, #00BFFF, #1E90FF);
}

.tier-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.tier-card p {
    font-size: 16px;
    color: var(--text-gray);
}

/* Security Section */
.security {
    padding: 100px 0;
    background-color: var(--bg-white);
}

.security-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.security-content.visible {
    opacity: 1;
    transform: translateY(0);
}

.security-icon {
    font-size: 80px;
    margin-bottom: 24px;
}

.security h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.security p {
    font-size: 18px;
    color: var(--text-gray);
    line-height: 1.8;
}

/* Footer CTA */
.footer-cta {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%);
    text-align: center;
    color: var(--bg-white);
}

.footer-cta h2 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 16px;
}

.footer-cta p {
    font-size: 20px;
    margin-bottom: 40px;
    opacity: 0.95;
}

.footer-cta .btn {
    background-color: var(--bg-white);
    color: var(--primary-purple);
    font-size: 18px;
    padding: 16px 40px;
}

.footer-cta .btn:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-4px);
}

/* Leaderboard Styles */
.leaderboard-section {
    margin-top: 60px;
}

.leaderboard-header {
    text-align: center;
    margin-bottom: 32px;
}

.leaderboard-header h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.leaderboard-header p {
    font-size: 14px;
    color: var(--text-dark); /* darker subtitle text */
}

/* Force strong readable colors for headings on light cream sections regardless of theme */
#leaderboard-title,
#leaderboard-subtitle,
#recognition-title,
#recognition-desc {
    color: #1a1a1a !important;
}

.leaderboard-card {
    background-color: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 18px;
    overflow: hidden;
}

.leaderboard-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 22px;
}

.leaderboard-item {
    display: grid;
    grid-template-columns: 40px 50px 1fr 100px 80px;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background-color: var(--bg-light);
    border-radius: 8px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-20px);
}

.leaderboard-item.visible {
    opacity: 1;
    transform: translateX(0);
}

.leaderboard-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow);
}

.leaderboard-rank {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-purple);
    text-align: center;
}

.leaderboard-rank.top-3 {
    font-size: 15px;
}

.leaderboard-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.leaderboard-name a {
    color: var(--primary-purple);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.leaderboard-name a:hover {
    color: var(--primary-purple-dark);
    text-decoration: underline;
}

.leaderboard-helps {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-gray);
    text-align: right;
}

.leaderboard-helps span {
    font-weight: 700;
    color: var(--text-dark);
}

.leaderboard-tier {
    display: flex;
    align-items: center;
    justify-content: center;
}

.leaderboard-tier-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.leaderboard-tier-badge.bronze {
    background: radial-gradient(circle at 30% 30%, #CD7F32, #8B5A3C);
}

.leaderboard-tier-badge.silver {
    background: radial-gradient(circle at 30% 30%, #D3D3D3, #A8A9A9);
}

.leaderboard-tier-badge.gold {
    background: radial-gradient(circle at 30% 30%, #FFD700, #FFC700);
}

.leaderboard-tier-badge.platinum {
    background: radial-gradient(circle at 30% 30%, #E6CCFF, #B997EC);
}

.leaderboard-tier-badge.emerald {
    background: radial-gradient(circle at 30% 30%, #7FD8BE, #50C878);
}

.leaderboard-tier-badge.diamond {
    background: radial-gradient(circle at 30% 30%, #00BFFF, #1E90FF);
}

/* Leaderboard Avatar Styles */
.leaderboard-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-light);
    border: 2px solid var(--border-color);
}

.leaderboard-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leaderboard-avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #FF8C00 0%, #FFB347 100%);
    text-transform: uppercase;
}

/* Animation delays for staggered effect */
.feature-card:nth-child(1) { transition-delay: 0.1s; }
.feature-card:nth-child(2) { transition-delay: 0.2s; }
.feature-card:nth-child(3) { transition-delay: 0.3s; }

.tier-card:nth-child(1) { transition-delay: 0.1s; }
.tier-card:nth-child(2) { transition-delay: 0.2s; }
.tier-card:nth-child(3) { transition-delay: 0.3s; }
.tier-card:nth-child(4) { transition-delay: 0.4s; }
.tier-card:nth-child(5) { transition-delay: 0.5s; }
.tier-card:nth-child(6) { transition-delay: 0.6s; }

.leaderboard-item:nth-child(1) { transition-delay: 0.05s; }
.leaderboard-item:nth-child(2) { transition-delay: 0.1s; }
.leaderboard-item:nth-child(3) { transition-delay: 0.15s; }
.leaderboard-item:nth-child(4) { transition-delay: 0.2s; }
.leaderboard-item:nth-child(5) { transition-delay: 0.25s; }
.leaderboard-item:nth-child(6) { transition-delay: 0.3s; }
.leaderboard-item:nth-child(7) { transition-delay: 0.35s; }
.leaderboard-item:nth-child(8) { transition-delay: 0.4s; }
.leaderboard-item:nth-child(9) { transition-delay: 0.45s; }
.leaderboard-item:nth-child(10) { transition-delay: 0.5s; }

/* Responsive Design */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 32px;
    }

    .hero p {
        font-size: 16px;
    }

    .badge {
        font-size: 16px;
    }

    .section-header h2 {
        font-size: 32px;
    }

    .features {
        padding: 60px 0;
    }

    .recognition {
        padding: 60px 0;
    }

    .security {
        padding: 60px 0;
    }

    .footer-cta {
        padding: 60px 0;
    }

    .footer-cta h2 {
        font-size: 32px;
    }

    .footer-cta p {
        font-size: 16px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .recognition-grid {
        grid-template-columns: 1fr;
    }

    .leaderboard-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .leaderboard-header h2 {
        font-size: 28px;
    }

    .leaderboard-card {
        padding: 20px;
    }

    .leaderboard-item {
        grid-template-columns: 40px 50px 1fr 100px 60px;
        gap: 12px;
        padding: 12px;
    }

    .leaderboard-rank {
        font-size: 20px;
    }

    .leaderboard-rank.top-3 {
        font-size: 24px;
    }

    .leaderboard-name {
        font-size: 16px;
    }

    .leaderboard-helps {
        font-size: 14px;
    }

    .leaderboard-tier-badge {
        width: 40px;
        height: 40px;
    }

    /* Potential Interactions Mobile Responsive */
    .help-intent-list li {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
        gap: 12px;
    }

    .help-intent-left {
        width: 100%;
    }

    /* On phones, revert to a horizontal row so the controls don't
       eat vertical space below an already-stacked card. */
    .help-intent-right {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        min-width: 0;
        justify-content: flex-end;
        gap: 8px;
    }

    .help-intent-actions summary {
        padding: 6px 12px;
        font-size: 12px;
    }

    .help-intent-status {
        font-size: 10px;
        padding: 5px 10px;
    }

    .profile-help-intent {
        padding: 20px;
    }

    #help-need-label::before,
    #help-provide-label::before {
        font-size: 18px;
    }
}

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

    .hero h1 {
        font-size: 26px;
    }

    .badge {
        font-size: 14px;
    }

    .logo {
        font-size: 20px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .leaderboard-section {
        margin-top: 40px;
    }

    .leaderboard-item {
        grid-template-columns: 35px 40px 1fr 80px 50px;
        gap: 8px;
        padding: 10px;
    }

    .leaderboard-avatar {
        width: 40px;
        height: 40px;
    }

    .leaderboard-avatar-initials {
        font-size: 16px;
    }

    .leaderboard-rank {
        font-size: 18px;
    }

    .leaderboard-rank.top-3 {
        font-size: 20px;
    }

    .leaderboard-name {
        font-size: 14px;
    }

    .leaderboard-helps {
        font-size: 12px;
    }

    .leaderboard-tier-badge {
        width: 36px;
        height: 36px;
    }
}

/* Help Intent list styling - Enhanced */
.help-intent-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-intent-list li {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-light);
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.4s ease forwards;
    position: relative;
    overflow: visible;
}

.help-intent-list li:has(.help-intent-actions[open]) {
    z-index: 1000;
}

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

.help-intent-list li:nth-child(1) { animation-delay: 0.05s; }
.help-intent-list li:nth-child(2) { animation-delay: 0.1s; }
.help-intent-list li:nth-child(3) { animation-delay: 0.15s; }
.help-intent-list li:nth-child(4) { animation-delay: 0.2s; }
.help-intent-list li:nth-child(5) { animation-delay: 0.25s; }

.help-intent-list li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-purple);
    background: var(--bg-white);
}

.help-intent-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.help-intent-left span {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dark);
    word-wrap: break-word;
}

/* Stack the row's right-side controls (status pill, View matches, Update)
   vertically so they read as a tidy column next to multi-line text instead
   of competing for horizontal space. Items keep their natural widths and
   right-align so the right edge stays flush. Mobile reverts to a row. */
.help-intent-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.help-intent-status {
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.help-intent-status.status-active {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.help-intent-status.status-active::before {
    content: '●';
    font-size: 10px;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.help-intent-status.status-resolved {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    color: white;
}

.help-intent-status.status-resolved::before {
    content: '✓';
    font-size: 12px;
    font-weight: bold;
}

.help-intent-status.status-cancelled {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    color: white;
}

.help-intent-status.status-cancelled::before {
    content: '✕';
    font-size: 12px;
}

/* View-matches deep-link button — jumps to the corresponding
   group in Network → Recommended. Visually lighter than the
   "Update" actions button so it reads as navigation, not a
   primary action. */
.help-intent-view-matches {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--primary-purple);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.help-intent-view-matches::before {
    content: '→';
    font-size: 14px;
    line-height: 1;
}

.help-intent-view-matches:hover {
    background: rgba(255, 140, 0, 0.08);
    border-color: var(--primary-purple);
    transform: translateY(-1px);
}

.help-intent-view-matches:focus-visible {
    outline: 3px solid rgba(255, 140, 0, 0.3);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .help-intent-view-matches {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* Actions dropdown (summary) styling and accessibility focus */
.help-intent-actions {
    position: relative;
}

.help-intent-actions[open] {
    z-index: 1000;
}

.help-intent-actions summary {
    cursor: pointer;
    padding: 8px 16px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    list-style: none;
    background: var(--bg-white);
    color: var(--primary-purple);
    transition: all 0.2s ease;
    user-select: none;
}

.help-intent-actions summary::after {
    content: '▼';
    margin-left: 6px;
    font-size: 10px;
    transition: transform 0.3s ease;
}

.help-intent-actions[open] summary::after {
    transform: rotate(180deg);
}

.help-intent-actions summary::-webkit-details-marker {
    display: none;
}

.help-intent-actions summary:hover {
    background: var(--primary-purple);
    color: white;
    border-color: var(--primary-purple);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3);
}

.help-intent-actions summary:focus,
.help-intent-actions summary:focus-visible {
    outline: 3px solid rgba(255,140,0,0.3);
    outline-offset: 2px;
}

.help-intent-actions .help-intent-actions-body {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--bg-white);
    border: 2px solid var(--primary-purple);
    border-radius: 12px;
    padding: 12px;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.help-intent-action-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    background: var(--bg-light);
    color: var(--text-dark);
    width: 100%;
}

.help-intent-action-btn:hover {
    background: var(--primary-purple);
    color: white;
    transform: translateX(4px);
}

.help-intent-action-btn:active {
    transform: translateX(2px);
}

/* ========================================
   Assessment badge (credibility stars) - shown on provider items
   ======================================== */
.assessment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    margin-left: 8px;
    font-size: 12px;
    cursor: help;
    white-space: nowrap;
}

.assessment-stars {
    color: #d1d5db;
    letter-spacing: 1px;
}

.assessment-stars-filled {
    color: #f59e0b;
}

.assessment-skipped-tag {
    color: #92400e;
    font-size: 10px;
}

/* ========================================
   MOBILE: stack help-intent cards vertically
   Why: at narrow widths the text column was getting squeezed next to
   the assessment stars + status pill + Update button, producing a tall
   skinny block that's hard to read. On mobile we hand the description
   the full width and drop the meta (stars + status + actions) into a
   single horizontal row below it.
   ======================================== */
@media (max-width: 768px) {
    .help-intent-list li {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 16px;
    }

    .help-intent-left {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
    }

    /* The description span sits on its own line so it never has to
       compete with the stars for horizontal room. */
    .help-intent-left > span:first-child {
        flex: 1 1 100%;
    }

    .assessment-badge {
        margin-left: 0;
        font-size: 13px;
    }

    .help-intent-right {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: 100%;
        min-width: 0;
        gap: 8px;
    }

    /* Drop-down stays anchored to its summary but widens to fit the
       longer touch-friendly action buttons. */
    .help-intent-actions .help-intent-actions-body {
        min-width: 160px;
    }
}

@media (max-width: 480px) {
    .help-intent-list li {
        padding: 12px 14px;
    }
    .help-intent-left > span:first-child {
        font-size: 14px;
    }
    .help-intent-status {
        padding: 5px 10px;
        font-size: 10px;
    }
    .help-intent-actions summary {
        padding: 7px 14px;
        font-size: 12px;
    }
}

/* ========================================
   Inline Editing for Help Intents
   ======================================== */

/* Inline add form container */
.help-intent-inline-add {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: 12px;
    border: 2px dashed var(--border-color);
    transition: all 0.3s ease;
}

.help-intent-inline-add:focus-within {
    border-color: var(--primary-purple);
    background: var(--bg-white);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
}

.help-intent-inline-add textarea {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    max-height: 120px;
    background: var(--bg-white);
    color: var(--text-dark);
    transition: border-color 0.2s ease;
}

.help-intent-inline-add textarea:focus {
    outline: none;
    border-color: var(--primary-purple);
}

.help-intent-inline-add textarea::placeholder {
    color: var(--text-gray);
}

/* Inline add button */
.btn-inline-add {
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-inline-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.btn-inline-add:active {
    transform: translateY(0);
}

.btn-inline-add:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Inline buttons container */
.inline-add-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* Inline voice button */
.btn-inline-voice {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--bg-white);
    color: var(--primary-purple);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-inline-voice:hover {
    border-color: var(--primary-purple);
    background: rgba(124, 58, 237, 0.05);
    transform: scale(1.05);
}

.btn-inline-voice.recording {
    background: #ef4444;
    border-color: #ef4444;
    animation: pulse-recording 1.5s infinite;
}

.btn-inline-voice.recording .voice-icon {
    color: white;
}

.btn-inline-voice .voice-icon {
    font-size: 20px;
}

@keyframes pulse-recording {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* Inline cancel button */
.btn-inline-cancel {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--bg-white);
    color: var(--text-gray);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-inline-cancel:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

/* Mobile responsive for inline add */
@media (max-width: 640px) {
    .help-intent-inline-add {
        flex-wrap: wrap;
    }

    .help-intent-inline-add textarea {
        order: 2;
        width: 100%;
        flex: none;
    }

    .btn-inline-voice {
        order: 1;
    }

    .inline-add-buttons {
        order: 3;
        width: 100%;
        justify-content: flex-end;
    }

    .btn-inline-add {
        flex: 1;
    }
}

/* Edit mode indicator for section */
#profileHelpIntentSection.edit-mode {
    border: 2px solid var(--primary-purple);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
    border-radius: 16px;
}

#profileHelpIntentSection.edit-mode .profile-section-header {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(124, 58, 237, 0.02) 100%);
    border-radius: 14px 14px 0 0;
}

/* Edit mode toggle button styling */
#helpIntentEditToggle {
    transition: all 0.2s ease;
}

#profileHelpIntentSection.edit-mode #helpIntentEditToggle {
    background: var(--primary-purple);
    color: white;
    border-color: var(--primary-purple);
}

/* Mobile responsive */
@media (max-width: 640px) {
    .help-intent-inline-add {
        flex-direction: column;
        gap: 12px;
    }

    .help-intent-inline-add textarea {
        width: 100%;
    }

    .btn-inline-add {
        width: 100%;
        text-align: center;
    }
}

/* ========================================
   COLLAPSIBLE SECTIONS
   ======================================== */

/* Clickable section header */
.collapsible-section .clickable-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.collapsible-section .clickable-header:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .collapsible-section .clickable-header:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Collapse/Expand button */
.section-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.section-collapse-btn:hover {
    background: var(--bg-light);
    border-color: var(--primary-purple);
}

.section-collapse-btn .collapse-icon {
    font-size: 12px;
    color: var(--text-gray);
    transition: transform 0.3s ease;
    display: inline-block;
}

/* Collapsed state */
.collapsible-section.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.collapsible-section.collapsed .section-collapsible-content {
    display: none;
}

/* Section content container */
.section-collapsible-content {
    transition: opacity 0.2s ease;
}

/* Visual indicator when collapsed */
.collapsible-section.collapsed {
    padding-bottom: 0;
}

.collapsible-section.collapsed .profile-section-header {
    border-bottom: none;
    margin-bottom: 0;
}

/* Section header controls container */
.section-header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .section-collapse-btn {
        width: 28px;
        height: 28px;
    }

    .section-collapse-btn .collapse-icon {
        font-size: 10px;
    }

    .section-header-controls {
        gap: 6px;
    }
}

/* ===== SUBSECTION STYLES (Nested within parent sections) ===== */

/* Subsection container */
.profile-subsection {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-light);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .profile-subsection {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Subsection header */
.profile-subsection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.profile-subsection-header:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .profile-subsection-header:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Subsection title */
.profile-subsection-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.profile-subsection-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.profile-subsection-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--primary);
}

/* Subsection collapse button */
.subsection-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.subsection-collapse-btn:hover {
    background: var(--bg-light);
    border-color: var(--primary);
}

.subsection-collapse-btn .collapse-icon {
    font-size: 10px;
    color: var(--text-gray);
    transition: transform 0.3s ease;
    display: inline-block;
}

/* Collapsed state for subsections */
.collapsible-subsection.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.collapsible-subsection.collapsed .subsection-collapsible-content {
    display: none;
}

/* Subsection content container */
.subsection-collapsible-content {
    transition: opacity 0.2s ease;
}

/* Visual indicator when collapsed */
.collapsible-subsection.collapsed {
    padding-bottom: 8px;
}

.collapsible-subsection.collapsed .profile-subsection-header {
    margin-bottom: 0;
}

/* Mobile adjustments for subsections */
@media (max-width: 640px) {
    .profile-subsection {
        margin-top: 16px;
        padding: 12px;
    }

    .profile-subsection-title {
        font-size: 16px;
    }

    .subsection-collapse-btn {
        width: 24px;
        height: 24px;
    }

    .subsection-collapse-btn .collapse-icon {
        font-size: 9px;
    }
}

/* Section header icons */
.profile-help-intent-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-help-intent-title::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-purple-dark) 100%);
    flex-shrink: 0;
}

#help-need-label::before {
    content: '🆘';
    font-size: 20px;
    margin-right: 8px;
}

#help-provide-label::before {
    content: '🤲';
    font-size: 20px;
    margin-right: 8px;
}

/* ========================================
   VISITOR SETTINGS BAR - Language & Theme Controls (In Header)
   ======================================== */
.visitor-settings-bar {
    display: flex;
    gap: 8px;
    align-items: center;
}

.visitor-settings-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-light, #f5f5f5);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-gray, #666);
    transition: all 0.2s ease;
}

.visitor-settings-btn:hover {
    background: var(--bg-white, #fff);
    border-color: var(--primary-purple, #FF8C00);
    color: var(--text-dark, #333);
    box-shadow: 0 2px 8px rgba(255,140,0,0.15);
}

.visitor-settings-icon {
    font-size: 16px;
}

.visitor-settings-label {
    font-weight: 500;
}

/* Dark mode adjustments for visitor settings */
[data-theme="dark"] .visitor-settings-btn {
    background: var(--card-bg, #1f2937);
    border-color: var(--border-color, #374151);
    color: var(--text-gray, #9ca3af);
}

[data-theme="dark"] .visitor-settings-btn:hover {
    background: var(--bg-light, #374151);
    color: var(--text-dark, #f3f4f6);
}

@media (max-width: 480px) {
    .visitor-settings-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    .visitor-settings-label {
        display: none;
    }
}

/* Enhanced profile help intent cards */
.profile-help-intent {
    padding: 28px;
    background: var(--card-bg);
    border-radius: 16px;
    margin-top: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    position: relative;
    overflow: visible;
    z-index: 1;
}

.profile-help-intent:has(.help-intent-actions[open]) {
    z-index: 1001;
}

.profile-help-intent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-purple) 0%, var(--primary-purple-light) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.profile-help-intent:hover::before {
    opacity: 1;
}

.profile-help-intent:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-purple);
}

/* Empty state enhancement */
.profile-empty-state {
    text-align: center;
    padding: 60px 20px;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.profile-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
}

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

/* ========================================
   Index-page layout utilities
   Absorbed from inline style= attributes on hero / for-you / story / vision
   blocks so the markup stays semantic and overrides live in one place.
   ======================================== */

/* Hero sits flush against the For-You section below it. */
.hero-animated {
    padding-bottom: 20px;
}
.hero-animated .container,
.hero-animated .hero-cta-section,
.hero-animated .hero-cta-hint {
    margin-bottom: 0;
    padding-bottom: 0;
}
.hero-animated .container {
    position: relative;
    z-index: 1;
}

/* For-You butts up under the hero — no margin/padding gap. */
.for-you-section {
    margin-top: 0;
}
.for-you-section--flush-top {
    padding-top: 10px;
}

/* Stacked story visual (Phase 1) uses a column with 3 SVG rows. */
.story-visual--stacked {
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
/* Phase 2/3 use a roomier gap between stacked SVGs. */
.story-visual--stacked-loose {
    flex-direction: column;
    gap: 15px;
    align-items: center;
}
.story-visual__row {
    display: flex;
    gap: 0;
    justify-content: center;
    align-items: center;
}

/* Vision-toggle band — neutral break between story phases. */
.vision-toggle-section {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
[data-theme="dark"] .vision-toggle-section {
    background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
}
.vision-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
}
.vision-toggle-arrow {
    transition: transform 0.3s;
}
.vision-toggle-hint {
    color: var(--text-gray);
    font-size: 14px;
    margin-top: 10px;
}

/* ========================================
   REDUCED MOTION - honour user OS preference
   Disables decorative motion (hero animations,
   pulses, floats, word-cycle, parallax shapes,
   reading progress flow). Functional transitions
   on hover stay shortened, not removed, so focus
   feedback remains visible.
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Stop SVG SMIL animations (animate, animateMotion, animateTransform)
       — these are not controlled by CSS animation properties. */
    animate, animateMotion, animateTransform {
        animation-play-state: paused !important;
    }

    .hero-cta-pulse::before,
    .accent-dot,
    .badge-icon,
    .floating-shape,
    .parallax-shape,
    .profile-empty-icon {
        animation: none !important;
    }

    .word-cycle {
        animation: none !important;
        transform: none !important;
    }
}