@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Jost:wght@300;400;500&display=swap');

        /* ============================================
           CSS VARIABLES - HERNEST SYSTEMS BRAND
           ============================================ */
        :root {
            --alignment-blue: #1D2B64;
            --hernest-gold: #C7A24B;
            --deep-navy: #16202A;
            --graphite: #2B2B2B;
            --charcoal: #1A1A1A;
            --teal: #0D4A4D;
            --coral: #D06E6B;
            --white: #FFFFFF;
            --ivory: #F9F7F3;
            --sand: #E8E3DA;
            --light-gray: #F5F5F5;
            --medium-gray: #E0E0E0;
            --emerald: #92C9A9;
            --success: #22c55e;
            --warning: #f59e0b;
            --error: #ef4444;
            --font-display: 'Montserrat', system-ui, sans-serif;
            --font-body: 'Merriweather', Georgia, serif;
            --space-xs: 0.25rem;
            --space-sm: 0.5rem;
            --space-md: 1rem;
            --space-lg: 1.5rem;
            --space-xl: 2rem;
            --space-2xl: 3rem;
            --space-3xl: 4rem;
            --max-width: 1200px;
            --radius-sm: 0.375rem;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
            --radius-xl: 1rem;
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
            --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
        }

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: var(--font-body);
            background: var(--ivory);
            color: var(--graphite);
            line-height: 1.7;
            min-height: 100vh;
        }
        a { color: var(--alignment-blue); text-decoration: none; transition: opacity 0.2s; }
        a:hover { opacity: 0.8; }
        img { max-width: 100%; height: auto; }

        /* Layout */
        .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); }
        .section { padding: var(--space-3xl) 0; }
        .section--dark { background: var(--deep-navy); color: var(--white); }
        .section--teal { background: var(--teal); color: var(--white); }
        .section--sand { background: var(--sand); }

        /* Navigation */
        .nav {
            position: sticky;
            top: 0;
            background: rgba(249, 247, 243, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--medium-gray);
            z-index: 1000;
            padding: var(--space-md) 0;
        }
        .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
        .nav__brand { display: flex; align-items: center; gap: var(--space-md); }
        .nav__logo { width: 40px; height: 40px; }
        .nav__title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--alignment-blue); }
        .nav__subtitle { font-size: 0.75rem; color: var(--graphite); opacity: 0.7; }
        .nav__links { display: flex; align-items: center; gap: var(--space-lg); list-style: none; }
        .nav__link { font-family: var(--font-display); font-size: 0.875rem; font-weight: 500; color: var(--graphite); }
        .nav__link:hover { color: var(--alignment-blue); }
        .nav__link--active { color: var(--alignment-blue); }
        .nav__toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-sm); }
        
        @media (max-width: 768px) {
            .nav__toggle { display: block; }
            .nav__links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: var(--white);
                flex-direction: column;
                padding: var(--space-lg);
                border-bottom: 1px solid var(--medium-gray);
            }
            .nav__links.active { display: flex; }
        }

        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-sm);
            padding: var(--space-md) var(--space-xl);
            font-family: var(--font-display);
            font-size: 0.9375rem;
            font-weight: 600;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn--primary { background: var(--alignment-blue); color: var(--white); }
        .btn--primary:hover { background: #162050; transform: translateY(-1px); }
        .btn--secondary { background: transparent; color: var(--alignment-blue); border: 2px solid var(--alignment-blue); }
        .btn--secondary:hover { background: var(--alignment-blue); color: var(--white); }
        .btn--gold { background: var(--hernest-gold); color: var(--white); }
        .btn--gold:hover { background: #b8943f; }
        .btn--white { background: var(--white); color: var(--alignment-blue); }
        .btn--white:hover { background: var(--sand); }
        .btn--lg { padding: var(--space-lg) var(--space-2xl); font-size: 1rem; }

        /* Privacy Banner */
        .privacy-banner {
            background: linear-gradient(90deg, var(--teal), var(--alignment-blue));
            color: var(--white);
            padding: var(--space-sm) 0;
            text-align: center;
            font-size: 0.875rem;
        }
        .privacy-banner__text {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-sm);
        }
        .privacy-banner__icon {
            width: 16px;
            height: 16px;
        }

        /* Hero Section */
        .hero {
            padding: var(--space-3xl) 0;
            background: linear-gradient(135deg, var(--ivory) 0%, var(--sand) 100%);
            position: relative;
            overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 60%;
            height: 150%;
            background: radial-gradient(ellipse, rgba(29,43,100,0.03) 0%, transparent 70%);
            pointer-events: none;
        }
        .hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
        .hero__badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-sm);
            background: rgba(29,43,100,0.08);
            padding: var(--space-sm) var(--space-md);
            border-radius: var(--radius-xl);
            font-family: var(--font-display);
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--alignment-blue);
            margin-bottom: var(--space-lg);
        }
        .hero__title {
            font-family: var(--font-display);
            font-size: 3rem;
            font-weight: 700;
            color: var(--deep-navy);
            line-height: 1.1;
            margin-bottom: var(--space-lg);
        }
        .hero__title span { color: var(--hernest-gold); }
        .hero__subtitle {
            font-size: 1.25rem;
            color: var(--graphite);
            margin-bottom: var(--space-xl);
            max-width: 540px;
        }
        .hero__cta { display: flex; gap: var(--space-md); flex-wrap: wrap; }
        .hero__visual { display: flex; justify-content: center; align-items: center; }
        .hero__card {
            background: var(--white);
            border-radius: var(--radius-xl);
            padding: var(--space-2xl);
            box-shadow: var(--shadow-lg);
            max-width: 400px;
            border: 1px solid rgba(0,0,0,0.05);
        }
        .hero__card-header {
            display: flex;
            align-items: center;
            gap: var(--space-md);
            margin-bottom: var(--space-lg);
            padding-bottom: var(--space-lg);
            border-bottom: 1px solid var(--medium-gray);
        }
        .hero__card-logo { width: 56px; height: 56px; }
        .hero__card-title { font-family: var(--font-display); font-weight: 700; color: var(--alignment-blue); }
        .hero__card-subtitle { font-size: 0.875rem; color: var(--graphite); }

        @media (max-width: 900px) {
            .hero__inner { grid-template-columns: 1fr; text-align: center; }
            .hero__title { font-size: 2.25rem; }
            .hero__subtitle { margin-left: auto; margin-right: auto; }
            .hero__cta { justify-content: center; }
            .hero__visual { order: -1; }
        }

        /* Cards */
        .card {
            background: var(--white);
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            box-shadow: var(--shadow-md);
            border: 1px solid rgba(0,0,0,0.03);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
        .card__icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--alignment-blue), #2a3d7a);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: 1.5rem;
            margin-bottom: var(--space-md);
        }
        .card__icon--gold { background: linear-gradient(135deg, var(--hernest-gold), #d4b366); }
        .card__icon--teal { background: linear-gradient(135deg, var(--teal), #0f5c5f); }
        .card__title {
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 1.125rem;
            color: var(--deep-navy);
            margin-bottom: var(--space-sm);
        }
        .card__text { color: var(--graphite); font-size: 0.9375rem; }
        .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
        @media (max-width: 900px) { .features-grid { grid-template-columns: 1fr; } }

        /* Section Headers */
        .section-header { text-align: center; max-width: 700px; margin: 0 auto var(--space-2xl); }
        .section-header__eyebrow {
            font-family: var(--font-display);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--hernest-gold);
            margin-bottom: var(--space-sm);
        }
        .section-header__title {
            font-family: var(--font-display);
            font-size: 2.25rem;
            font-weight: 700;
            color: var(--deep-navy);
            margin-bottom: var(--space-md);
        }
        .section--dark .section-header__title { color: var(--white); }
        .section-header__text { font-size: 1.125rem; color: var(--graphite); }
        .section--dark .section-header__text { color: rgba(255,255,255,0.8); }

        /* Steps */
        .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); counter-reset: step; }
        .step {
            position: relative;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
        }
        .step::before {
            counter-increment: step;
            content: counter(step);
            position: absolute;
            top: calc(-1 * var(--space-md));
            left: var(--space-lg);
            width: 32px;
            height: 32px;
            background: var(--hernest-gold);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.875rem;
        }
        .step__title {
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 1.125rem;
            color: var(--white);
            margin-bottom: var(--space-sm);
        }
        .step__text { color: rgba(255,255,255,0.75); font-size: 0.9375rem; }
        @media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

        /* VAERUS Preview */
        .vaerus-preview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
        .vaerus-preview__title {
            font-family: var(--font-display);
            font-size: 2rem;
            font-weight: 700;
            color: var(--deep-navy);
            margin-bottom: var(--space-md);
        }
        .vaerus-preview__text { color: var(--graphite); margin-bottom: var(--space-lg); }
        .vaerus-preview__features { list-style: none; margin-bottom: var(--space-xl); }
        .vaerus-preview__features li {
            display: flex;
            align-items: flex-start;
            gap: var(--space-md);
            margin-bottom: var(--space-md);
        }
        .vaerus-preview__features li::before {
            content: '✓';
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: var(--emerald);
            color: var(--white);
            border-radius: 50%;
            font-size: 0.75rem;
            flex-shrink: 0;
        }
        .vaerus-preview__visual {
            background: var(--white);
            border-radius: var(--radius-xl);
            padding: var(--space-xl);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--medium-gray);
        }
        @media (max-width: 900px) { .vaerus-preview { grid-template-columns: 1fr; } }

        /* CTA Section */
        .cta-section {
            text-align: center;
            padding: var(--space-3xl);
            background: linear-gradient(135deg, var(--alignment-blue) 0%, #2a3d7a 100%);
            border-radius: var(--radius-xl);
            margin: var(--space-3xl) 0;
        }
        .cta-section__title {
            font-family: var(--font-display);
            font-size: 2rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: var(--space-md);
        }
        .cta-section__text {
            color: rgba(255,255,255,0.85);
            margin-bottom: var(--space-xl);
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        .cta-section__buttons { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }

        /* Footer */
        .footer { background: var(--deep-navy); color: var(--white); padding: var(--space-3xl) 0 var(--space-xl); }
        .footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-2xl); }
        .footer__brand { max-width: 280px; }
        .footer__logo { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
        .footer__logo svg { width: 40px; height: 40px; }
        .footer__logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
        .footer__tagline { color: rgba(255,255,255,0.7); font-size: 0.9375rem; }
        .footer__heading {
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 0.875rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: var(--space-md);
            color: var(--hernest-gold);
        }
        .footer__links { list-style: none; }
        .footer__links li { margin-bottom: var(--space-sm); }
        .footer__links a { color: rgba(255,255,255,0.7); font-size: 0.9375rem; transition: color 0.2s; }
        .footer__links a:hover { color: var(--white); opacity: 1; }
        .footer__bottom {
            margin-top: var(--space-2xl);
            padding-top: var(--space-lg);
            border-top: 1px solid rgba(255,255,255,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.875rem;
            color: rgba(255,255,255,0.5);
        }
        @media (max-width: 900px) {
            .footer__inner { grid-template-columns: 1fr 1fr; }
            .footer__brand { grid-column: span 2; }
        }
        @media (max-width: 600px) {
            .footer__inner { grid-template-columns: 1fr; }
            .footer__brand { grid-column: span 1; }
            .footer__bottom { flex-direction: column; gap: var(--space-md); text-align: center; }
        }

        /* Page System */
        .page { display: none; }
        .page.active { display: block; }

        /* Tool Header */
        .tool-header {
            background: linear-gradient(135deg, var(--alignment-blue) 0%, #2a3d7a 100%);
            padding: var(--space-2xl) 0;
            color: var(--white);
        }
        .tool-header__inner { display: flex; align-items: center; gap: var(--space-lg); }
        .tool-header__logo { width: 64px; height: 64px; }
        .tool-header__title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; }
        .tool-header__subtitle { color: var(--hernest-gold); font-style: italic; }

        /* Page Header */
        .page-header {
            background: linear-gradient(135deg, var(--deep-navy) 0%, var(--alignment-blue) 100%);
            padding: var(--space-3xl) 0;
            color: var(--white);
        }
        .page-header__title {
            font-family: var(--font-display);
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: var(--space-md);
        }
        .page-header__subtitle {
            font-size: 1.25rem;
            color: rgba(255,255,255,0.85);
            max-width: 600px;
        }

        /* VAERUS Tool */
        .vaerus-input {
            background: var(--white);
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            box-shadow: var(--shadow-md);
            margin-bottom: var(--space-xl);
        }
        .vaerus-input__label {
            display: block;
            font-family: var(--font-display);
            font-weight: 600;
            color: var(--deep-navy);
            margin-bottom: var(--space-md);
        }
        .vaerus-input__textarea {
            width: 100%;
            min-height: 150px;
            padding: var(--space-md);
            border: 2px solid var(--medium-gray);
            border-radius: var(--radius-md);
            font-family: var(--font-body);
            font-size: 1rem;
            resize: vertical;
            transition: border-color 0.2s;
        }
        .vaerus-input__textarea:focus { outline: none; border-color: var(--alignment-blue); }
        .vaerus-input__actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: var(--space-md);
        }
        .vaerus-input__hint { font-size: 0.875rem; color: var(--graphite); }

        /* Results */
        .vaerus-results { display: none; }
        .vaerus-results.visible { display: block; }
        .result-card {
            background: var(--white);
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            box-shadow: var(--shadow-md);
            margin-bottom: var(--space-lg);
        }
        .result-card--highlight { border-left: 4px solid var(--hernest-gold); }
        .result-card--coral { border-left: 4px solid var(--coral); }
        .result-card--blue { border-left: 4px solid var(--alignment-blue); }
        .result-card__title {
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 1rem;
            color: var(--deep-navy);
            margin-bottom: var(--space-md);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }
        .result-card__content { color: var(--graphite); }

        /* Score Bars */
        .score-bar { margin-bottom: var(--space-md); }
        .score-bar__header { display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: var(--space-xs); }
        .score-bar__label { font-weight: 500; color: var(--deep-navy); }
        .score-bar__track { width: 100%; height: 8px; background: var(--medium-gray); border-radius: 4px; overflow: hidden; }
        .score-bar__fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
        .score-bar__fill--coral { background: var(--coral); }
        .score-bar__fill--blue { background: var(--alignment-blue); }

        /* Stability */
        .stability-display {
            display: flex;
            align-items: center;
            gap: var(--space-xl);
            padding: var(--space-lg);
            background: var(--light-gray);
            border-radius: var(--radius-md);
            margin-bottom: var(--space-lg);
        }
        .stability-display__score { font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1; }
        .stability-display__bar { flex: 1; }
        .stability-display__bar-track { width: 100%; height: 16px; background: var(--medium-gray); border-radius: 8px; overflow: hidden; }
        .stability-display__bar-fill { height: 100%; border-radius: 8px; transition: width 0.7s ease; }

        /* Recommendations */
        .recommendation {
            display: flex;
            align-items: flex-start;
            gap: var(--space-md);
            padding: var(--space-md);
            background: var(--light-gray);
            border-radius: var(--radius-md);
            margin-bottom: var(--space-md);
        }
        .recommendation__number {
            width: 28px;
            height: 28px;
            background: var(--hernest-gold);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 0.875rem;
            flex-shrink: 0;
        }
        .recommendation__text { color: var(--graphite); }

        .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
        @media (max-width: 768px) { .results-grid { grid-template-columns: 1fr; } }

        /* Loading */
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid var(--white);
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 0.8s linear infinite;
            margin-right: var(--space-sm);
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Alert */
        .alert { padding: var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-lg); }
        .alert--error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
        .hidden { display: none !important; }

        /* Investor Page */
        .investor-hero {
            padding: var(--space-3xl) 0;
            background: linear-gradient(135deg, var(--deep-navy) 0%, var(--alignment-blue) 100%);
            color: var(--white);
        }
        .investor-hero__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-3xl); align-items: center; }
        .investor-hero__title { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; margin-bottom: var(--space-lg); }
        .investor-hero__text { font-size: 1.125rem; color: rgba(255,255,255,0.85); margin-bottom: var(--space-xl); }
        .investor-form {
            background: var(--white);
            border-radius: var(--radius-xl);
            padding: var(--space-2xl);
            box-shadow: var(--shadow-lg);
        }
        .investor-form__title {
            font-family: var(--font-display);
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--deep-navy);
            margin-bottom: var(--space-lg);
        }
        .form-group { margin-bottom: var(--space-md); }
        .form-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--graphite); margin-bottom: var(--space-xs); }
        .form-input, .form-select, .form-textarea {
            width: 100%;
            padding: var(--space-md);
            border: 1px solid var(--medium-gray);
            border-radius: var(--radius-md);
            font-family: var(--font-body);
            font-size: 1rem;
            transition: border-color 0.2s;
        }
        .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--alignment-blue); }
        .form-textarea { min-height: 100px; resize: vertical; }
        @media (max-width: 900px) {
            .investor-hero__inner { grid-template-columns: 1fr; }
            .investor-hero__title { font-size: 2rem; }
        }

        /* Legal & Ethics Page */
        .legal-content { max-width: 800px; margin: 0 auto; }
        .legal-section { margin-bottom: var(--space-2xl); }
        .legal-section__title {
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--deep-navy);
            margin-bottom: var(--space-md);
            display: flex;
            align-items: center;
            gap: var(--space-sm);
        }
        .legal-section__content { color: var(--graphite); }
        .legal-section__content p { margin-bottom: var(--space-md); }
        .legal-highlight {
            background: linear-gradient(135deg, rgba(13,74,77,0.05), rgba(29,43,100,0.05));
            border-left: 4px solid var(--teal);
            padding: var(--space-lg);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            margin: var(--space-lg) 0;
        }
        .legal-highlight__title {
            font-family: var(--font-display);
            font-weight: 600;
            color: var(--teal);
            margin-bottom: var(--space-sm);
        }

        /* FAQ Page */
        .faq-list { max-width: 800px; margin: 0 auto; }
        .faq-item {
            background: var(--white);
            border-radius: var(--radius-lg);
            padding: var(--space-xl);
            margin-bottom: var(--space-lg);
            box-shadow: var(--shadow-sm);
            border: 1px solid rgba(0,0,0,0.03);
        }
        .faq-item__question {
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 1.125rem;
            color: var(--deep-navy);
            margin-bottom: var(--space-md);
            display: flex;
            align-items: flex-start;
            gap: var(--space-md);
        }
        .faq-item__question::before {
            content: 'Q';
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            background: var(--alignment-blue);
            color: var(--white);
            border-radius: 50%;
            font-size: 0.875rem;
            flex-shrink: 0;
        }
        .faq-item__answer {
            color: var(--graphite);
            padding-left: calc(28px + var(--space-md));
        }
        .faq-item__answer::before {
            content: 'A: ';
            font-weight: 600;
            color: var(--hernest-gold);
        }

        /* Data Promise Box */
        .data-promise {
            background: linear-gradient(135deg, var(--deep-navy), var(--alignment-blue));
            color: var(--white);
            border-radius: var(--radius-xl);
            padding: var(--space-2xl);
            text-align: center;
            margin: var(--space-2xl) 0;
        }
        .data-promise__icon {
            width: 64px;
            height: 64px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto var(--space-lg);
            font-size: 2rem;
        }
        .data-promise__title {
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: var(--space-md);
        }
        .data-promise__text {
            color: rgba(255,255,255,0.9);
            max-width: 600px;
            margin: 0 auto;
            font-size: 1.125rem;
        }
        .data-promise__list {
            display: flex;
            justify-content: center;
            gap: var(--space-xl);
            margin-top: var(--space-xl);
            flex-wrap: wrap;
        }
        .data-promise__item {
            display: flex;
            align-items: center;
            gap: var(--space-sm);
            color: var(--hernest-gold);
            font-family: var(--font-display);
            font-weight: 600;
        }

        /* Utilities */
        .text-center { text-align: center; }
        .text-gold { color: var(--hernest-gold); }
        .text-coral { color: var(--coral); }
        .text-blue { color: var(--alignment-blue); }
        .mt-lg { margin-top: var(--space-lg); }
        .mb-lg { margin-bottom: var(--space-lg); }

    
    :root {
      --alignment-blue: #1D2B64;
      --hernest-gold: #C7A24B;
      --graphite: #1A1A1A;
      --soft-cream: #FAFAF8;
      --pale-gray: #E8E6E3;
      --muted-blue: #2D3E6E;
      --deep-navy: #0F172A;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      scroll-behavior: smooth;
    }
    
    body {
      font-family: 'Jost', sans-serif;
      background: var(--soft-cream);
      color: var(--graphite);
      overflow-x: hidden;
    }
    
    /* ==================== HERO SECTION ==================== */
    .vaerus-hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      background: linear-gradient(180deg, var(--deep-navy) 0%, var(--alignment-blue) 100%);
      overflow: hidden;
    }
    
    .vaerus-hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(ellipse at 50% 30%, rgba(199, 162, 75, 0.08) 0%, transparent 60%);
      pointer-events: none;
    }
    
    .hero-logo {
      margin-bottom: 40px;
      opacity: 0;
      animation: fadeInDown 1s ease-out 0.3s forwards;
    }
    
    .hero-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(32px, 6vw, 56px);
      font-weight: 300;
      letter-spacing: 12px;
      color: var(--soft-cream);
      text-transform: uppercase;
      margin-bottom: 16px;
      opacity: 0;
      animation: fadeInUp 1s ease-out 0.6s forwards;
    }
    
    .hero-subtitle {
      font-size: 13px;
      font-weight: 300;
      letter-spacing: 4px;
      color: var(--hernest-gold);
      text-transform: uppercase;
      margin-bottom: 60px;
      opacity: 0;
      animation: fadeInUp 1s ease-out 0.8s forwards;
    }
    
    .hero-tagline {
      max-width: 600px;
      text-align: center;
      font-family: 'Cormorant Garamond', serif;
      font-size: 20px;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(250, 250, 248, 0.7);
      font-style: italic;
      opacity: 0;
      animation: fadeInUp 1s ease-out 1s forwards;
    }
    
    .scroll-indicator {
      position: absolute;
      bottom: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      opacity: 0;
      animation: fadeInUp 1s ease-out 1.4s forwards;
    }
    
    .scroll-indicator span {
      font-size: 10px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(250, 250, 248, 0.4);
    }
    
    .scroll-line {
      width: 1px;
      height: 40px;
      background: linear-gradient(180deg, var(--hernest-gold), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }
    
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes scrollPulse {
      0%, 100% { opacity: 0.3; transform: scaleY(1); }
      50% { opacity: 1; transform: scaleY(1.2); }
    }
    
    /* ==================== SECTION STYLES ==================== */
    .section {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 100px 40px;
      position: relative;
    }
    
    .section-intro {
      background: var(--soft-cream);
    }
    
    .intro-content {
      max-width: 800px;
      text-align: center;
    }
    
    .intro-content h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(24px, 4vw, 36px);
      font-weight: 400;
      color: var(--alignment-blue);
      margin-bottom: 40px;
      line-height: 1.4;
    }
    
    .intro-content p {
      font-size: 16px;
      font-weight: 300;
      line-height: 1.9;
      color: #666;
      max-width: 600px;
      margin: 0 auto;
    }
    
    /* ==================== SNAPSHOT SECTIONS ==================== */
    .snapshot-section {
      background: var(--graphite);
      position: relative;
      overflow: hidden;
    }
    
    .snapshot-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 20% 50%, rgba(29, 43, 100, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(199, 162, 75, 0.08) 0%, transparent 50%);
      pointer-events: none;
    }
    
    .snapshot-section.alt {
      background: var(--alignment-blue);
    }
    
    .snapshot-section.alt::before {
      background: 
        radial-gradient(circle at 80% 30%, rgba(199, 162, 75, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 20% 70%, rgba(15, 23, 42, 0.3) 0%, transparent 50%);
    }
    
    .snapshot-container {
      max-width: 1100px;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    
    .snapshot-label {
      font-size: 10px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--hernest-gold);
      margin-bottom: 16px;
    }
    
    .snapshot-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 400;
      color: var(--soft-cream);
      margin-bottom: 24px;
      line-height: 1.2;
    }
    
    .snapshot-micro {
      font-size: 15px;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(250, 250, 248, 0.6);
      font-style: italic;
      border-left: 2px solid var(--hernest-gold);
      padding-left: 20px;
    }
    
    /* Flow Diagram */
    .flow-diagram {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    
    .flow-block {
      background: rgba(250, 250, 248, 0.03);
      border: 1px solid rgba(250, 250, 248, 0.08);
      padding: 28px 32px;
      position: relative;
      opacity: 0;
      transform: translateX(40px);
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .flow-block.visible {
      opacity: 1;
      transform: translateX(0);
    }
    
    .flow-block:nth-child(1) { transition-delay: 0.1s; }
    .flow-block:nth-child(2) { transition-delay: 0.3s; }
    .flow-block:nth-child(3) { transition-delay: 0.5s; }
    
    .flow-block h4 {
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--hernest-gold);
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .flow-block h4::before {
      content: '';
      width: 8px;
      height: 8px;
      background: var(--hernest-gold);
      border-radius: 50%;
      opacity: 0.6;
    }
    
    .flow-block ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
    }
    
    .flow-block li {
      font-size: 13px;
      font-weight: 300;
      color: rgba(250, 250, 248, 0.7);
      position: relative;
      padding-left: 12px;
    }
    
    .flow-block li::before {
      content: '·';
      position: absolute;
      left: 0;
      color: var(--hernest-gold);
    }
    
    .flow-arrow {
      display: flex;
      justify-content: center;
      padding: 12px 0;
      opacity: 0;
      transition: opacity 0.4s ease 0.2s;
    }
    
    .flow-arrow.visible {
      opacity: 1;
    }
    
    .flow-arrow svg {
      width: 20px;
      height: 20px;
      color: var(--hernest-gold);
      opacity: 0.5;
    }
    
    /* ==================== ANTHROPOLOGY SECTION ==================== */
    .anthropology-section {
      background: var(--soft-cream);
      min-height: auto;
      padding: 120px 40px;
    }
    
    .anthro-container {
      max-width: 1000px;
      width: 100%;
    }
    
    .anthro-header {
      text-align: center;
      margin-bottom: 80px;
    }
    
    .anthro-header h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(28px, 4vw, 40px);
      font-weight: 400;
      color: var(--alignment-blue);
      margin-bottom: 16px;
    }
    
    .anthro-header p {
      font-size: 14px;
      font-weight: 300;
      letter-spacing: 2px;
      color: #888;
      text-transform: uppercase;
    }
    
    /* Vertical Flow */
    .anthro-flow {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }
    
    .anthro-node {
      background: white;
      border: 1px solid var(--pale-gray);
      padding: 32px 48px;
      text-align: center;
      max-width: 500px;
      width: 100%;
      position: relative;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .anthro-node.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    .anthro-node.primary {
      background: var(--alignment-blue);
      border-color: var(--alignment-blue);
    }
    
    .anthro-node.primary h3 {
      color: var(--soft-cream);
    }
    
    .anthro-node.primary p {
      color: rgba(250, 250, 248, 0.7);
    }
    
    .anthro-node.gold-accent {
      border-color: var(--hernest-gold);
      border-width: 2px;
    }
    
    .anthro-node h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 22px;
      font-weight: 500;
      color: var(--graphite);
      margin-bottom: 8px;
      letter-spacing: 2px;
    }
    
    .anthro-node p {
      font-size: 13px;
      font-weight: 300;
      color: #666;
    }
    
    .anthro-connector {
      width: 2px;
      height: 50px;
      background: linear-gradient(180deg, var(--pale-gray), var(--hernest-gold), var(--pale-gray));
      position: relative;
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    
    .anthro-connector.visible {
      opacity: 1;
    }
    
    .anthro-connector::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid var(--hernest-gold);
    }
    
    /* Three Pillars */
    .anthro-pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 50px;
      width: 100%;
      max-width: 800px;
    }
    
    .pillar {
      background: white;
      border: 1px solid var(--pale-gray);
      padding: 32px 24px;
      text-align: center;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .pillar.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    .pillar:nth-child(1) { transition-delay: 0.1s; }
    .pillar:nth-child(2) { transition-delay: 0.25s; }
    .pillar:nth-child(3) { transition-delay: 0.4s; }
    
    .pillar-icon {
      width: 48px;
      height: 48px;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(29, 43, 100, 0.06);
      border-radius: 50%;
    }
    
    .pillar-icon svg {
      width: 24px;
      height: 24px;
      color: var(--alignment-blue);
    }
    
    .pillar h4 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 16px;
      font-weight: 500;
      color: var(--graphite);
      margin-bottom: 8px;
      letter-spacing: 1px;
    }
    
    .pillar p {
      font-size: 12px;
      font-weight: 300;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    .pillar-arrow {
      display: flex;
      justify-content: center;
      padding: 16px 0;
    }
    
    .pillar-arrow svg {
      width: 16px;
      height: 16px;
      color: var(--hernest-gold);
      opacity: 0.6;
    }
    
    .pillar-result {
      font-size: 13px;
      font-weight: 400;
      color: var(--alignment-blue);
      padding-top: 16px;
      border-top: 1px solid var(--pale-gray);
      margin-top: 16px;
    }
    
    /* Final Outcome */
    .anthro-outcome {
      margin-top: 60px;
      background: var(--graphite);
      padding: 48px;
      text-align: center;
      max-width: 700px;
      width: 100%;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .anthro-outcome.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    .anthro-outcome h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 24px;
      font-weight: 400;
      color: var(--soft-cream);
      margin-bottom: 24px;
      letter-spacing: 3px;
    }
    
    .outcome-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px 32px;
    }
    
    .outcome-list span {
      font-size: 13px;
      font-weight: 300;
      color: rgba(250, 250, 248, 0.7);
      position: relative;
      padding-left: 16px;
    }
    
    .outcome-list span::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6px;
      height: 6px;
      background: var(--hernest-gold);
      border-radius: 50%;
    }
    
    /* ==================== CLOSING SECTION ==================== */
    .closing-section {
      min-height: 60vh;
      background: var(--alignment-blue);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 80px 40px;
    }
    
    .closing-content {
      max-width: 700px;
    }
    
    .closing-content blockquote {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(22px, 3.5vw, 32px);
      font-weight: 300;
      font-style: italic;
      line-height: 1.6;
      color: var(--soft-cream);
      margin-bottom: 32px;
    }
    
    .closing-content cite {
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--hernest-gold);
      font-style: normal;
    }
    
    /* ==================== RESPONSIVE ==================== */
    @media (max-width: 900px) {
      .snapshot-container {
        grid-template-columns: 1fr;
        gap: 50px;
      }
      
      .anthro-pillars {
        grid-template-columns: 1fr;
        max-width: 400px;
      }
    }
    
    @media (max-width: 600px) {
      .section {
        padding: 80px 24px;
      }
      
      .snapshot-container {
        gap: 40px;
      }
      
      .flow-block {
        padding: 20px 24px;
      }
      
      .anthro-node {
        padding: 24px 32px;
      }
    }