:root {
            --teal: #28514D;
            --teal-deep: #1D3C39;
            --teal-soft: rgba(40, 81, 77, 0.07);
            --beige: #E0DBC6;
            --beige-warm: #F4F1E8;
            --olive: #968659;
            --olive-soft: rgba(150, 134, 89, 0.08);
            --gold: #BAA36C;
            --gold-dim: #A89358;

            --bg: #F8F7F3;
            --surface: #FFFFFF;
            --dark: #131312;
            --text: #2C2C2A;
            --text-mid: rgba(44, 44, 42, 0.65);
            --text-dim: rgba(44, 44, 42, 0.42);
            --text-light: #F4F1E8;
            --text-light-mid: rgba(244, 241, 232, 0.55);
            --text-light-dim: rgba(244, 241, 232, 0.35);
            --line: rgba(44, 44, 42, 0.09);
            --line-dark: rgba(244, 241, 232, 0.1);

            --serif: 'Instrument Serif', Georgia, serif;
            --sans: 'Inter', -apple-system, system-ui, sans-serif;

            --space-section: 48px;
        }

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

        html {
            font-size: 18px;
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--sans);
            font-weight: 400;
            color: var(--text);
            background: var(--bg);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
            line-height: 1.6;
        }

        ::selection { background: var(--teal); color: var(--beige); }

        .wrap { max-width: 660px; margin: 0 auto; padding: 0 32px; }
        .wrap-w { max-width: 880px; margin: 0 auto; padding: 0 32px; }

        /* ====== URGENCY ====== */
        .bar {
            background: var(--teal);
            color: var(--beige);
            text-align: center;
            padding: 13px 24px;
            font-size: 0.72rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        /* ====== HERO ====== */
        .hero {
            background: var(--dark);
            color: var(--text-light);
            padding: 100px 32px 80px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            background: url('../img/hero-bg.jpg') center center / cover no-repeat;
            opacity: 0.4;
            pointer-events: none;
        }

        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(19,19,18,0.15) 0%, rgba(19,19,18,0.7) 100%);
            z-index: 1;
            pointer-events: none;
        }

        .hero::after { display: none; }

        .hero > *:not(.hero-bg) {
            position: relative;
            z-index: 2;
        }

        .tag {
            display: inline-block;
            border: 1px solid var(--line-dark);
            color: var(--text-light-dim);
            font-size: 0.67rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            padding: 7px 20px;
            border-radius: 100px;
            margin-bottom: 32px;
        }

        .tag-s {
            display: inline-block;
            border: 1px solid var(--line);
            color: var(--text-dim);
            font-size: 0.65rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            padding: 6px 18px;
            border-radius: 100px;
            margin-bottom: 28px;
        }

        .hero h1 {
            font-family: var(--serif);
            font-size: clamp(2.4rem, 5.6vw, 3.8rem);
            font-weight: 400;
            line-height: 1.12;
            max-width: 740px;
            margin: 0 auto 32px;
            position: relative;
        }

        .hero h1 em {
            font-style: italic;
            color: var(--gold);
        }

        .hero .lead {
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.75;
            color: var(--text-light-mid);
            max-width: 480px;
            margin: 0 auto 44px;
        }

        /* ====== CTA ====== */
        .cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--gold);
            color: var(--dark);
            font-family: var(--sans);
            font-size: 0.82rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            padding: 18px 44px;
            border-radius: 6px;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .cta:hover {
            background: var(--gold-dim);
            transform: translateY(-1px);
            box-shadow: 0 14px 40px rgba(186, 163, 108, 0.28);
        }

        .cta .a { transition: transform 0.3s ease; font-size: 1em; }
        .cta:hover .a { transform: translateX(3px); }

        .cta-teal { background: var(--teal); color: var(--beige); }
        .cta-teal:hover { background: var(--teal-deep); box-shadow: 0 14px 40px rgba(40,81,77,0.25); }

        /* ====== PROSE (narrative) ====== */
        .prose {
            padding: var(--space-section) 32px;
        }

        .prose p {
            font-size: 1.05rem;
            line-height: 1.8;
            color: var(--text-mid);
            margin-bottom: 28px;
            font-weight: 300;
        }

        .prose p strong {
            color: var(--text);
            font-weight: 500;
        }

        .prose blockquote {
            font-family: var(--serif);
            font-style: italic;
            font-size: 1.4rem;
            line-height: 1.45;
            color: var(--teal);
            border-left: 2px solid var(--teal);
            padding-left: 28px;
            margin: 32px 0;
        }

        .prose .big {
            font-family: var(--serif);
            font-size: 1.8rem;
            line-height: 1.3;
            color: var(--text);
            margin: 28px 0;
        }

        .prose .big em {
            font-style: italic;
            color: var(--teal);
        }

        .hr {
            width: 48px;
            height: 1px;
            background: var(--line);
            margin: 32px 0;
        }

        /* ====== SECTION HEADINGS ====== */
        .sh {
            text-align: center;
            margin-bottom: 40px;
        }

        .sh h2 {
            font-family: var(--serif);
            font-size: clamp(1.8rem, 3.6vw, 2.6rem);
            font-weight: 400;
            line-height: 1.2;
            max-width: 540px;
            margin: 0 auto 18px;
        }

        .sh h2 em {
            font-style: italic;
            color: var(--teal);
        }

        .sh p {
            font-size: 0.95rem;
            color: var(--text-mid);
            font-weight: 300;
            line-height: 1.7;
            max-width: 440px;
            margin: 0 auto;
        }

        /* ====== METHOD CARDS ====== */
        .method {
            background: var(--beige-warm);
            padding: var(--space-section) 32px;
        }

        .grid4 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            max-width: 720px;
            margin: 0 auto;
        }

        .card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 36px 30px 32px;
            transition: transform 0.35s ease, box-shadow 0.35s ease;
        }

        .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 56px rgba(0, 0, 0, 0.045);
        }

        .card .num {
            font-family: var(--serif);
            font-size: 2.2rem;
            color: var(--olive);
            opacity: 0.3;
            line-height: 1;
            margin-bottom: 22px;
        }

        .card h3 {
            font-family: var(--sans);
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.35;
            margin-bottom: 10px;
            color: var(--text);
        }

        .card p {
            font-size: 0.84rem;
            line-height: 1.7;
            color: var(--text-mid);
            font-weight: 300;
        }

        /* ====== COMPARE ====== */
        .comp {
            padding: var(--space-section) 32px;
        }

        .grid2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            max-width: 760px;
            margin: 0 auto;
        }

        .col {
            border-radius: 12px;
            padding: 36px 30px;
        }

        .col-bad { background: var(--olive-soft); border: 1px solid rgba(150,134,89,0.1); }
        .col-good { background: var(--teal-soft); border: 1px solid rgba(40,81,77,0.1); }

        .col-label {
            font-size: 0.64rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.13em;
            margin-bottom: 28px;
        }

        .col-bad .col-label { color: var(--olive); }
        .col-good .col-label { color: var(--teal); }

        .row {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
            font-size: 0.86rem;
            line-height: 1.6;
            font-weight: 300;
            color: var(--text);
        }

        .row:last-child { margin-bottom: 0; }

        .row .icon {
            flex-shrink: 0;
            font-weight: 600;
            margin-top: 1px;
        }

        .col-bad .icon { color: var(--olive); }
        .col-good .icon { color: var(--teal); }

        /* ====== PROMISE (dark teal) ====== */
        .promise {
            background: var(--teal);
            color: var(--text-light);
            padding: var(--space-section) 32px;
            text-align: center;
        }

        .promise h2 {
            font-family: var(--serif);
            font-size: clamp(1.9rem, 4.2vw, 2.8rem);
            font-weight: 400;
            line-height: 1.2;
            max-width: 580px;
            margin: 0 auto 32px;
        }

        .promise h2 em {
            font-style: italic;
            color: var(--gold);
        }

        .promise p {
            font-size: 1rem;
            line-height: 1.8;
            color: var(--text-light-mid);
            max-width: 460px;
            margin: 0 auto;
            font-weight: 300;
        }

        .promise .key {
            font-family: var(--serif);
            font-style: italic;
            font-size: 1.2rem;
            color: var(--beige);
            max-width: 480px;
            margin: 28px auto 40px;
            line-height: 1.55;
        }

        /* ====== PRICING ====== */
        .pricing {
            padding: var(--space-section) 32px;
            text-align: center;
        }

        .pricing h2 {
            font-family: var(--serif);
            font-size: clamp(1.6rem, 3.2vw, 2.2rem);
            font-weight: 400;
            margin-bottom: 12px;
        }

        .pricing .sub {
            font-size: 0.92rem;
            color: var(--text-mid);
            font-weight: 300;
            margin-bottom: 32px;
        }

        .box {
            max-width: 420px;
            margin: 0 auto;
            text-align: center;
        }

        .box .installment {
            font-size: 0.82rem;
            color: var(--text-dim);
            font-weight: 400;
            letter-spacing: 0.04em;
            margin-bottom: 4px;
        }

        .box .price {
            font-family: var(--serif);
            font-size: clamp(3.2rem, 8vw, 4.8rem);
            font-weight: 400;
            color: var(--teal);
            line-height: 1;
            margin-bottom: 4px;
        }

        .box .cash {
            font-size: 0.82rem;
            color: var(--text-dim);
            font-weight: 300;
            margin-bottom: 36px;
        }

        .box .cta { }

        /* ====== GUARANTEE ====== */
        .guarantee {
            padding: 0 32px 48px;
        }

        .guar {
            max-width: 560px;
            margin: 0 auto;
            border-top: 1px solid var(--line);
            padding-top: 32px;
            text-align: center;
        }

        .guar h3 {
            font-family: var(--serif);
            font-size: 1.1rem;
            font-weight: 400;
            margin-bottom: 10px;
            color: var(--text);
        }

        .guar p {
            font-size: 0.84rem;
            line-height: 1.75;
            color: var(--text-mid);
            font-weight: 300;
            max-width: 440px;
            margin: 0 auto;
        }

        .guar p strong { color: var(--text); font-weight: 500; }

        /* ====== FINAL CTA ====== */
        .final {
            background: var(--beige-warm);
            padding: var(--space-section) 32px;
            text-align: center;
        }

        .final h2 {
            font-family: var(--serif);
            font-size: clamp(1.6rem, 3.2vw, 2.2rem);
            font-weight: 400;
            margin-bottom: 40px;
        }

        .opts {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            max-width: 640px;
            margin: 0 auto 44px;
            text-align: left;
        }

        .opt {
            border-radius: 12px;
            padding: 32px 28px;
        }

        .opt-a { background: var(--olive-soft); border: 1px solid rgba(150,134,89,0.08); }
        .opt-b { background: var(--teal-soft); border: 1px solid rgba(40,81,77,0.08); }

        .opt-tag {
            font-size: 0.64rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            margin-bottom: 14px;
        }

        .opt-a .opt-tag { color: var(--olive); }
        .opt-b .opt-tag { color: var(--teal); }

        .opt p {
            font-size: 0.88rem;
            line-height: 1.7;
            font-weight: 300;
            color: var(--text);
        }

        .opt p strong { font-weight: 500; }

        /* ====== FOOTER ====== */
        footer {
            border-top: 1px solid var(--line);
            padding: 32px;
            text-align: center;
            font-size: 0.72rem;
            color: var(--text-dim);
            font-weight: 300;
        }

        /* ====== CTA BREAK (between sections) ====== */
        .cta-break {
            text-align: center;
            padding: 28px 32px;
        }

        /* ====== ANIMATIONS ====== */
        .rv {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1),
                        transform 0.35s cubic-bezier(0.4,0,0.2,1);
        }

        .rv.v { opacity: 1; transform: translateY(0); }

        .d1 { transition-delay: 0.08s; }
        .d2 { transition-delay: 0.16s; }
        .d3 { transition-delay: 0.24s; }
        .d4 { transition-delay: 0.32s; }

        .h1 { animation: fade 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }
        .h2 { animation: fade 0.4s 0.1s cubic-bezier(0.4,0,0.2,1) forwards; opacity: 0; }
        .h3 { animation: fade 0.4s 0.2s cubic-bezier(0.4,0,0.2,1) forwards; opacity: 0; }
        .h4 { animation: fade 0.4s 0.3s cubic-bezier(0.4,0,0.2,1) forwards; opacity: 0; }

        @keyframes fade {
            from { opacity: 0; transform: translateY(16px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ====== RESPONSIVE ====== */
        @media (max-width: 680px) {
            :root { --space-section: 36px; }
            html { font-size: 16px; }
            .hero { padding: 64px 24px 88px; }
            .tag { margin-bottom: 32px; }
            .grid4, .grid2, .opts { grid-template-columns: 1fr; }
            .prose, .method, .comp, .promise, .pricing, .final, .cta-break { padding-left: 24px; padding-right: 24px; }
            .guarantee { padding-left: 24px; padding-right: 24px; }
            .cta { width: 100%; justify-content: center; }
        }