:root {
            --bg: #0f1218;
            --surface: #171c25;
            --surface-soft: #202735;
            --fg: #f5f0e8;
            --muted: #b6b2ac;
            --accent: #d8a85c;
            --accent-light: #f0cf94;
            --blue: #607fa3;
            --ring: rgba(255, 255, 255, .12);
            --white: #ffffff;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background: var(--bg);
            color: var(--fg);
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1.7;
        }

        a {
            color: var(--accent-light);
        }

        a:hover,
        a:focus {
            color: var(--white);
        }

        .skip-link {
            position: absolute;
            top: -5rem;
            left: 1rem;
            z-index: 1100;
            padding: .75rem 1rem;
            background: var(--white);
            color: #111;
        }

        .skip-link:focus {
            top: 1rem;
        }

        .navbar,
        .footer {
            background: rgba(15, 18, 24, .96);
        }

        .navbar {
            border-bottom: 1px solid var(--ring);
            backdrop-filter: blur(12px);
        }

        .navbar-brand {
            color: var(--fg);
            font-weight: 700;
            letter-spacing: -.03em;
        }

        .navbar-brand:hover,
        .navbar-brand:focus {
            color: var(--white);
        }

        .nav-link {
            color: var(--muted);
        }

        .nav-link:hover,
        .nav-link:focus,
        .nav-link.active {
            color: var(--white);
        }

        .hero {
            position: relative;
            min-height: 760px;
            display: flex;
            align-items: center;
            overflow: hidden;
            background:
                linear-gradient(90deg, rgba(15, 18, 24, .97) 0%, rgba(15, 18, 24, .82) 52%, rgba(15, 18, 24, .35) 100%),
                url("/images/life-story-music-hero.jpg") center/cover no-repeat;
            border-bottom: 1px solid var(--ring);
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 170px;
            background: linear-gradient(transparent, var(--bg));
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 850px;
            padding-top: 7rem;
            padding-bottom: 9rem;
        }

        .kicker {
            color: var(--accent);
            font-size: .8rem;
            font-weight: 700;
            letter-spacing: .16em;
            text-transform: uppercase;
        }

        .display-title {
            max-width: 900px;
            font-size: clamp(3.2rem, 8vw, 7rem);
            font-weight: 700;
            letter-spacing: -.065em;
            line-height: .92;
        }

        .lead-copy {
            max-width: 760px;
            color: #d5d1ca;
            font-size: clamp(1.1rem, 2vw, 1.35rem);
        }

        .section {
            padding-top: 6rem;
            padding-bottom: 6rem;
        }

        .section-sm {
            padding-top: 3.5rem;
            padding-bottom: 3.5rem;
        }

        .section-light {
            background: #f5f0e8;
            color: #25231f;
        }

        .section-light .text-muted-custom {
            color: #69645d;
        }

        .display-heading {
            font-size: clamp(2.2rem, 5vw, 4.5rem);
            font-weight: 700;
            letter-spacing: -.05em;
            line-height: 1.02;
        }

        .text-muted-custom {
            color: var(--muted);
        }

        .panel {
            height: 100%;
            padding: 2rem;
            background: var(--surface);
            border: 1px solid var(--ring);
            border-radius: 1.25rem;
        }

        .panel-soft {
            background: var(--surface-soft);
        }

        .icon-box {
            display: inline-flex;
            width: 3.5rem;
            height: 3.5rem;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            color: var(--bg);
            background: var(--accent);
            border-radius: 1rem;
            font-size: 1.25rem;
        }

        .sound-card {
            position: relative;
            min-height: 330px;
            display: flex;
            align-items: flex-end;
            overflow: hidden;
            padding: 2rem;
            background: var(--surface);
            border: 1px solid var(--ring);
            border-radius: 1.25rem;
        }

        .sound-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 75% 20%, rgba(216, 168, 92, .34), transparent 28%),
                linear-gradient(145deg, rgba(96, 127, 163, .38), rgba(15, 18, 24, .94) 70%);
        }

        .sound-card:nth-child(2)::before {
            background:
                radial-gradient(circle at 20% 25%, rgba(109, 78, 130, .5), transparent 30%),
                linear-gradient(145deg, rgba(28, 37, 52, .6), rgba(15, 18, 24, .96) 72%);
        }

        .sound-card:nth-child(3)::before {
            background:
                radial-gradient(circle at 70% 22%, rgba(80, 132, 113, .46), transparent 30%),
                linear-gradient(145deg, rgba(28, 37, 52, .65), rgba(15, 18, 24, .96) 72%);
        }

        .sound-card-content {
            position: relative;
            z-index: 1;
        }

        .quote-panel {
            padding: clamp(2rem, 6vw, 5rem);
            background:
                linear-gradient(135deg, rgba(216, 168, 92, .16), transparent 60%),
                var(--surface);
            border: 1px solid var(--ring);
            border-radius: 1.5rem;
        }

        .quote-panel blockquote {
            max-width: 1000px;
            margin: 0;
            font-size: clamp(1.7rem, 4vw, 3.5rem);
            font-weight: 600;
            letter-spacing: -.035em;
            line-height: 1.2;
        }

        .creator-image {
            min-height: 580px;
            background:
                linear-gradient(rgba(15, 18, 24, .08), rgba(15, 18, 24, .4)),
                url("/images/taurus-james-life-story-music-studio.jpg") center/cover no-repeat;
            border: 1px solid var(--ring);
            border-radius: 1.5rem;
        }

        .step-number {
            color: var(--accent);
            font-size: .85rem;
            font-weight: 700;
            letter-spacing: .13em;
        }

        .btn-primary-custom {
            padding: .9rem 1.4rem;
            background: var(--accent);
            border: 1px solid var(--accent);
            color: #17130d;
            font-weight: 700;
        }

        .btn-primary-custom:hover,
        .btn-primary-custom:focus {
            background: var(--accent-light);
            border-color: var(--accent-light);
            color: #17130d;
        }

        .btn-outline-custom {
            padding: .9rem 1.4rem;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, .6);
            color: var(--white);
            font-weight: 700;
        }

        .btn-outline-custom:hover,
        .btn-outline-custom:focus {
            background: var(--white);
            color: var(--bg);
        }

        .ecosystem-link {
            display: block;
            height: 100%;
            padding: 1.75rem;
            color: inherit;
            text-decoration: none;
            border: 1px solid #d8d0c4;
            border-radius: 1rem;
            transition: transform .2s ease, border-color .2s ease;
        }

        .ecosystem-link:hover,
        .ecosystem-link:focus {
            color: inherit;
            border-color: #7f6a48;
            transform: translateY(-4px);
        }

        .faq-item {
            padding: 2rem 0;
            border-bottom: 1px solid var(--ring);
        }

        .cta {
            padding: clamp(2rem, 6vw, 5rem);
            background:
                linear-gradient(120deg, rgba(96, 127, 163, .33), transparent 56%),
                var(--surface);
            border: 1px solid var(--ring);
            border-radius: 1.5rem;
        }

        .footer {
            color: var(--muted);
            border-top: 1px solid var(--ring);
        }

        @media (max-width: 991.98px) {
            .hero {
                min-height: 680px;
                background-position: 62% center;
            }

            .creator-image {
                min-height: 440px;
            }
        }

        @media (max-width: 767.98px) {
            .hero {
                min-height: auto;
                background:
                    linear-gradient(rgba(15, 18, 24, .86), rgba(15, 18, 24, .94)),
                    url("/images/life-story-music-hero.jpg") center/cover no-repeat;
            }

            .hero-content {
                padding-top: 6rem;
                padding-bottom: 7rem;
            }

            .section {
                padding-top: 4.5rem;
                padding-bottom: 4.5rem;
            }

            .sound-card {
                min-height: 280px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            .ecosystem-link {
                transition: none;
            }
        }