:root {
    color-scheme: light;
    --ink: #242424;
    --muted: #66645f;
    --line: #e9e7e2;
    --paper: #fff;
    --soft: #faf9f6;
    --green: #31805a;
    --green-dark: #246544;
    --green-soft: #e8f5ed;
    --orange: #df762e;
    --orange-soft: #fff1e5;
    --purple: #805ad5;
    --purple-soft: #f1ebff;
    --shadow: 0 18px 50px rgba(45, 40, 31, .08);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.65; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin-top: 0; }
.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 20; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(233,231,226,.8); backdrop-filter: blur(14px); }
.nav { display: flex; height: 72px; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; letter-spacing: -.045em; font-size: 19px; }
.brand-mark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: var(--ink); color: #fff; font-size: 17px; line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 28px; color: #595752; font-size: 14px; font-weight: 550; }
.nav-links a:hover, .footer-links a:hover { color: var(--green); }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 9px; padding: 0 19px; border: 1px solid transparent; border-radius: 9px; background: var(--green-dark); color: #fff; font-size: 14px; font-weight: 650; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(30,30,30,.13); background: #1d5739; }
.button-light { background: #fff; color: var(--ink); border-color: var(--line); }
.button-light:hover { background: var(--soft); }
.button-small { min-height: 40px; padding-inline: 15px; }
.hero { position: relative; overflow: hidden; padding: 86px 0 80px; }
.hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -200px; top: -220px; border-radius: 50%; background: radial-gradient(circle, #e8f5ed 0, rgba(232,245,237,0) 70%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 64px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
h1 { max-width: 680px; margin-bottom: 22px; font-size: clamp(42px, 5.5vw, 68px); line-height: 1.04; letter-spacing: -.075em; font-weight: 750; }
.hero-copy { max-width: 590px; margin-bottom: 29px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin: 17px 0 0; color: #89867f; font-size: 12px; }
.hero-art { position: relative; min-height: 390px; display: grid; place-items: center; }
.site-card { position: relative; width: min(100%, 440px); overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: var(--shadow); transform: rotate(1deg); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 2px 0 15px; border-bottom: 1px solid #f0eee9; }
.browser-dot { width: 7px; height: 7px; border-radius: 50%; background: #e5e2dc; }.browser-address { width: 54%; margin: 0 auto; padding: 5px 10px; border-radius: 6px; background: #f7f6f2; color: #97938c; text-align: center; font-size: 9px; }
.mock-hero { margin-top: 14px; padding: 23px 20px; border-radius: 12px; background: #f1f7f2; }.mock-label { margin-bottom: 9px; color: var(--green); font-size: 8px; font-weight: 750; letter-spacing: .12em; }.mock-heading { max-width: 220px; margin-bottom: 8px; font-size: 22px; font-weight: 750; line-height: 1.08; letter-spacing: -.06em; }.mock-copy { max-width: 245px; margin-bottom: 13px; color: #74716a; font-size: 9px; line-height: 1.55; }.mock-button { display: inline-flex; padding: 7px 10px; border-radius: 6px; background: var(--green-dark); color: #fff; font-size: 8px; font-weight: 650; }
.mock-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }.mock-detail { min-height: 58px; padding: 10px 9px; border: 1px solid #efede7; border-radius: 9px; }.mock-detail span { display: block; margin-bottom: 5px; color: var(--green); font-size: 11px; }.mock-detail strong { font-size: 8px; }.mock-detail small { display: block; color: #8b877f; font-size: 7px; }
.section { padding: 82px 0; }.section-soft { background: var(--soft); }
.section-heading { max-width: 700px; margin: 0 auto 40px; text-align: center; }
.kicker { margin-bottom: 10px; color: #89857d; font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
h2 { margin-bottom: 14px; font-size: clamp(30px, 4vw, 44px); line-height: 1.14; letter-spacing: -.06em; font-weight: 700; }
.section-heading p { margin-bottom: 0; color: var(--muted); }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.problem-card { padding: 23px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.problem-icon { display: grid; width: 41px; height: 41px; margin-bottom: 17px; place-items: center; border-radius: 12px; background: var(--orange-soft); font-size: 19px; }.problem-card:nth-child(2) .problem-icon { background: var(--purple-soft); }.problem-card:nth-child(3) .problem-icon { background: var(--green-soft); }.problem-card h3 { margin-bottom: 7px; font-size: 16px; letter-spacing: -.025em; }.problem-card p { margin: 0; color: var(--muted); font-size: 13px; }
.benefit-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 62px; align-items: start; }.benefit-intro p { color: var(--muted); }.benefit-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.benefit { padding: 21px; border: 1px solid var(--line); border-radius: 13px; }.benefit-icon { margin-bottom: 11px; color: var(--green); font-size: 18px; }.benefit h3 { margin-bottom: 6px; font-size: 15px; }.benefit p { margin: 0; color: var(--muted); font-size: 12px; }
.truth-note { margin-top: 20px; padding: 16px 18px; border-left: 3px solid #d6c18c; border-radius: 0 9px 9px 0; background: #faf7ef; color: #6d634c; font-size: 12px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.step { padding: 23px; border-top: 2px solid #a4c9b0; background: #fff; }.step-number { display: block; margin-bottom: 15px; color: var(--green); font-size: 12px; font-weight: 750; letter-spacing: .1em; }.step h3 { margin-bottom: 7px; font-size: 16px; }.step p { margin: 0; color: var(--muted); font-size: 13px; }
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }.audience { padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }.audience h3 { margin-bottom: 8px; font-size: 18px; letter-spacing: -.04em; }.audience p { margin: 0; color: var(--muted); font-size: 13px; }
.cta-band { position: relative; overflow: hidden; padding: 53px; border-radius: 22px; background: #eef5ee; }.cta-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 35px; }.cta-copy { max-width: 690px; }.cta-copy .kicker { color: var(--green); }.cta-copy h2 { margin-bottom: 10px; }.cta-copy p { margin-bottom: 0; color: #5e6c61; }
.site-footer { padding: 27px 0; border-top: 1px solid var(--line); }.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.footer-brand { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }.footer-note { color: #8a867f; font-size: 11px; }.footer-links { display: flex; gap: 21px; color: #77736c; font-size: 12px; }
:focus-visible { outline: 3px solid #9ec9aa; outline-offset: 3px; }
@media (max-width: 850px) { .hero { padding: 65px 0; }.hero-grid { gap: 30px; }.section { padding: 68px 0; }.benefit-layout { gap: 32px; } }
@media (max-width: 640px) {
    .wrap { width: min(100% - 36px, 520px); }.nav { height: 64px; }.nav-links { display: none; }.nav .button { min-height: 39px; padding: 0 12px; font-size: 12px; }
    .hero { padding: 54px 0 48px; }.hero-grid { grid-template-columns: 1fr; gap: 24px; }h1 { font-size: clamp(42px, 12vw, 58px); }.hero-copy { font-size: 16px; }.hero-art { min-height: 320px; }.site-card { max-width: 410px; }
    .section { padding: 60px 0; }.section-heading { margin-bottom: 28px; text-align: left; }.problem-grid, .audience-grid, .steps { grid-template-columns: 1fr; }.benefit-layout { grid-template-columns: 1fr; gap: 22px; }.benefit-list { grid-template-columns: 1fr; gap: 10px; }.benefit { padding: 18px; }
    .cta-band { padding: 30px 23px; }.cta-inner { align-items: flex-start; flex-direction: column; gap: 22px; }.footer-inner { align-items: flex-start; flex-direction: column; }.footer-links { flex-wrap: wrap; gap: 13px 19px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }