:root,
[data-theme="light"] {
    --text-xs: clamp(.75rem, .7rem + .2vw, .875rem);
    --text-sm: clamp(.9rem, .84rem + .25vw, 1rem);
    --text-base: clamp(1rem, .96rem + .2vw, 1.1rem);
    --text-lg: clamp(1.15rem, 1.02rem + .55vw, 1.45rem);
    --text-xl: clamp(1.6rem, 1.15rem + 1.4vw, 2.45rem);
    --text-2xl: clamp(2.2rem, 1.35rem + 3vw, 4.5rem);
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --color-bg: #f6f4ef;
    --color-surface: #fffdf9;
    --color-surface-2: #f0ede5;
    --color-surface-3: #e7e2d7;
    --color-border: #d8d1c5;
    --color-text: #25211b;
    --color-text-muted: #6c665f;
    --color-text-faint: #8a8379;
    --color-primary: #0f6b63;
    --color-primary-hover: #0b534d;
    --color-primary-soft: #d7e8e3;
    --color-accent: #b4881f;
    --color-accent-soft: #efe2bf;
    --color-success: #48782f;
    --radius-sm: .45rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.4rem;
    --radius-full: 999px;
    --shadow-sm: 0 4px 16px rgba(26, 22, 17, .05);
    --shadow-md: 0 18px 48px rgba(26, 22, 17, .09);
    --font-body: 'Manrope', system-ui, sans-serif;
    --font-display: 'Fraunces', Georgia, serif;
    --content: 1180px
}

[data-theme="dark"] {
    --color-bg: #171512;
    --color-surface: #201d19;
    --color-surface-2: #28241f;
    --color-surface-3: #312b25;
    --color-border: #433d35;
    --color-text: #eee7dc;
    --color-text-muted: #b7ae9f;
    --color-text-faint: #908677;
    --color-primary: #74b4ab;
    --color-primary-hover: #92cbc3;
    --color-primary-soft: #253633;
    --color-accent: #d4af58;
    --color-accent-soft: #4b4025;
    --color-success: #88b96a;
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, .18);
    --shadow-md: 0 18px 48px rgba(0, 0, 0, .35);
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
    text-size-adjust: none
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg)
}

h1,
h2,
h3,
p,
ul {
    margin: 0
}

a {
    text-decoration: none;
    color: inherit
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto
}

button,
input,
textarea {
    font: inherit;
    color: inherit
}

button {
    cursor: pointer;
    background: none
}

.skip {
    position: absolute;
    left: -9999px
}

.skip:focus {
    left: 1rem;
    top: 1rem;
    background: var(--color-surface);
    padding: .8rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    z-index: 100
}

.container {
    width: min(calc(100% - 2rem), var(--content));
    margin: auto
}

.section {
    padding: clamp(3rem, 7vw, 6rem) 0
}

.section-tight {
    padding: var(--space-10) 0
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .72rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase
}

.eyebrow:before {
    content: '';
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: currentColor
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 48px;
    padding: .92rem 1.2rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    transition: all .18s ease
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary)
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover)
}

.btn-secondary {
    background: var(--color-surface)
}

.btn-secondary:hover {
    background: var(--color-surface-2)
}

.btn-ghost {
    border-color: transparent;
    color: var(--color-text-muted)
}

.btn-ghost:hover {
    color: var(--color-text)
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--color-bg) 84%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid color-mix(in oklab, var(--color-border) 75%, transparent)
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0
}

.brand {
    display: flex;
    align-items: center;
    gap: .95rem;
    min-height: 44px
}

.brand-mark {
    width: 44px;
    height: 44px;
    color: var(--color-primary)
}

.brand strong {
    display: block;
    font-size: .95rem;
    letter-spacing: .05em
}

.brand span {
    display: block;
    font-size: .78rem;
    color: var(--color-text-muted)
}

.nav {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    flex-wrap: wrap
}

.nav a {
    font-size: var(--text-sm);
    color: var(--color-text-muted)
}

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

.theme-toggle {
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface)
}

.hero {
    padding: clamp(4rem, 9vw, 7rem) 0 var(--space-12)
}

.grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: var(--space-8);
    align-items: center
}

.hero h1 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: .98;
    max-width: 11ch;
    margin: 1rem 0 1rem
}

.hero p {
    max-width: 60ch;
    color: var(--color-text-muted);
    font-size: var(--text-lg)
}

.actions,
.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.6rem
}

.trust-row {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    margin-top: 1.6rem
}

.trust-pill {
    padding: .55rem .8rem;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid color-mix(in oklab, var(--color-border) 82%, transparent);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-muted)
}

.hero-card {
    padding: 1.6rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
    border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden
}

.hero-card::after {
    content: "";
    position: absolute;
    right: -3rem;
    top: -3rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: color-mix(in oklab, var(--color-accent) 18%, transparent)
}

.hero-card h2 {
    font-size: var(--text-lg);
    margin-bottom: .6rem;
    max-width: 18ch
}

.hero-card p {
    color: var(--color-text-muted)
}

.offer-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.2rem 0
}

.offer-box {
    padding: 1rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent)
}

.offer-box strong {
    display: block;
    font-size: 1.9rem;
    line-height: 1;
    font-family: var(--font-display)
}

.offer-box span {
    font-size: var(--text-sm);
    color: var(--color-text-muted)
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    margin-top: 1.2rem
}

.choice {
    background: var(--color-surface);
    border: 1px solid color-mix(in oklab, var(--color-border) 82%, transparent);
    border-radius: 1.2rem;
    padding: 1.35rem;
    box-shadow: var(--shadow-md)
}

.choice h3 {
    font-size: 1.2rem;
    margin-bottom: .5rem
}

.choice p {
    color: var(--color-text-muted);
    margin-bottom: 1rem
}

.choice ul {
    padding-left: 1.1rem;
    color: var(--color-text-muted)
}

.choice li {
    margin: .35rem 0
}

.section-head {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
    margin-bottom: 2rem
}

.section-head h2 {
    font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.8rem);
    font-family: var(--font-display);
    line-height: 1
}

.section-head p {
    max-width: 54ch;
    color: var(--color-text-muted)
}

.cards-3,
.offers,
.proofs,
.steps {
    display: grid;
    gap: 1.2rem
}

.cards-3,
.offers,
.proofs {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.steps {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.card,
.offer,
.proof,
.contact-card,
.quote,
.band,
.faq-item {
    background: var(--color-surface);
    border: 1px solid color-mix(in oklab, var(--color-border) 82%, transparent);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm)
}

.card,
.offer,
.proof,
.contact-card,
.quote,
.faq-item {
    padding: 1.45rem
}

.card h3,
.offer h3,
.proof h3,
.faq-item h3 {
    font-size: var(--text-lg);
    margin-bottom: .55rem
}

.card p,
.offer p,
.proof p,
.faq-item p {
    color: var(--color-text-muted)
}

.icon-chip {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: .9rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: grid;
    place-items: center;
    margin-bottom: 1rem
}

.offer.featured {
    background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary-soft) 65%, var(--color-surface)), var(--color-surface));
    border-color: color-mix(in oklab, var(--color-primary) 24%, var(--color-border))
}

.badge {
    display: inline-flex;
    padding: .35rem .65rem;
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    font-size: var(--text-xs);
    font-weight: 800;
    color: var(--color-text-muted);
    margin-bottom: .8rem
}

.price {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    margin: .4rem 0 .8rem
}

.offer ul {
    padding-left: 1.1rem;
    color: var(--color-text-muted)
}

.offer li {
    margin: .4rem 0
}

.band {
    padding: 1.2rem 1.3rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center
}

.band p {
    color: var(--color-text-muted)
}

.step {
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid color-mix(in oklab, var(--color-border) 82%, transparent)
}

.step .num {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 800;
    margin-bottom: .85rem
}

.proof small,
.quote small {
    display: block;
    margin-top: 1rem;
    color: var(--color-text-faint)
}

.quote p {
    font-size: var(--text-lg);
    color: var(--color-text);
    max-width: 38ch
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr);
    gap: 1.2rem
}

.contact-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .8rem;
    margin-top: 1rem
}

.contact-list li {
    color: var(--color-text-muted)
}

.form-grid {
    display: grid;
    gap: 1rem
}

.faq {
    display: grid;
    gap: 1rem
}

label {
    display: grid;
    gap: .45rem;
    font-size: var(--text-sm);
    font-weight: 700
}

input,
textarea {
    width: 100%;
    padding: .95rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    min-height: 46px
}

textarea {
    min-height: 150px;
    resize: vertical
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem
}

.panel {
    background: var(--color-surface);
    border: 1px solid color-mix(in oklab, var(--color-border) 82%, transparent);
    border-radius: 1.4rem;
    padding: 1.45rem;
    box-shadow: var(--shadow-md)
}

.list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .75rem
}

.list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    color: var(--color-text-muted)
}

.list li:before {
    content: '';
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--color-primary);
    margin-top: .42rem
}

.footer {
    padding: var(--space-10) 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm)
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid color-mix(in oklab, var(--color-border) 82%, transparent);
    padding-top: 1.4rem
}

@media (max-width: 980px) {
    .nav a {
        display: none
    }

    .grid,
    .cards-3,
    .offers,
    .proofs,
    .steps,
    .contact-grid,
    .offer-boxes {
        grid-template-columns: 1fr
    }

    .section-head,
    .band,
    .footer-inner {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important
    }
}