:root { --navy:#3a2922; --ink:#33231c; --muted:#766052; --teal:#c45c26; --cyan:#2b8c95; --soft:#e2f0ed; --line:#decdbb; --white:#fffaf2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#f5eadb; font:15px/1.65 "Manrope",sans-serif; }
a { color:inherit; text-decoration:none; }
.skip { position:fixed; top:-100px; left:1rem; z-index:10; padding:.7rem 1rem; background:white; border:2px solid var(--teal); }
.skip:focus { top:1rem; }
:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.site-header { height:76px; padding:0 max(24px,calc((100% - 1160px)/2)); display:flex; align-items:center; justify-content:space-between; background:rgba(255,250,242,.94); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; font-weight:800; letter-spacing:-.04em; }
.brand > span { width:34px; height:34px; display:grid; place-items:center; margin-right:.55rem; border-radius:9px; color:white; background:var(--cyan); }
.brand strong { color:var(--teal); }
nav { display:flex; align-items:center; gap:1.65rem; font-size:.84rem; font-weight:600; }
.button { display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1.2rem; border-radius:8px; color:white; background:var(--teal); font-weight:700; box-shadow:0 8px 24px #c45c2628; }
.button:hover { background:#98421f; }
.button.small { padding:.5rem .85rem; }
.button.ghost { color:var(--teal); background:var(--white); border:1px solid #d3a98e; box-shadow:none; }
.hero { max-width:1160px; margin:auto; padding:7rem 2rem 5rem; text-align:center; background:radial-gradient(circle at 50% 20%,#cceae5 0,transparent 36%); }
.eyebrow { margin:0 0 .5rem; color:var(--teal); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:850px; margin:0 auto 1.3rem; font-size:clamp(2.7rem,7vw,5.3rem); line-height:1.05; letter-spacing:-.065em; }
.lead { max-width:680px; margin:0 auto; color:var(--muted); font-size:1.1rem; }
.actions { margin:2rem 0 4rem; display:flex; justify-content:center; align-items:center; gap:1.4rem; }
.text-link { color:var(--teal); font-weight:700; }
.product-card { overflow:hidden; max-width:930px; margin:auto; text-align:left; background:var(--white); border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 80px #6f49331a; }
.product-top { display:flex; align-items:center; gap:.35rem; padding:.75rem 1rem; color:var(--muted); background:#efe1d0; font-size:.7rem; }
.product-top i { width:8px; height:8px; border-radius:50%; background:#b8c8d4; }
.product-top span { margin-left:.5rem; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.metrics div { padding:1.5rem; background:var(--white); }
.metrics span,.listing span { display:block; color:var(--muted); font-size:.72rem; }
.metrics strong { display:block; margin-top:.3rem; font-size:1.6rem; }
.listing { padding:1.4rem 1.5rem; display:grid; grid-template-columns:auto 1fr auto auto; gap:1rem; align-items:center; }
.home-icon { width:34px; height:34px; display:grid!important; place-items:center; color:var(--teal)!important; border-radius:9px; background:var(--soft); font-size:1.2rem!important; }
.listing em { padding:.2rem .6rem; border-radius:99px; color:#5d734f; background:#e5eddf; font-size:.7rem; font-style:normal; font-weight:700; }
.proof-strip { max-width:930px; margin:-1rem auto 0; padding:1rem 1.4rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; color:#fff8ed; background:var(--navy); border-radius:10px; box-shadow:0 18px 40px #6f493326; }
.proof-strip div { display:flex; flex-direction:column; gap:.05rem; padding-left:1rem; border-left:2px solid var(--cyan); }
.proof-strip strong { font-size:1rem; }
.proof-strip span { color:#d2b9a3; font-size:.78rem; }
.section { max-width:1160px; margin:auto; padding:6rem 2rem; }
.section-heading { max-width:650px; margin-bottom:2.5rem; }
h2 { font-size:clamp(2rem,4vw,3.2rem); line-height:1.15; letter-spacing:-.05em; }
.section-heading > p:last-child { color:var(--muted); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.feature-grid article,.plan-grid article { padding:1.7rem; background:white; border:1px solid var(--line); border-radius:12px; }
.feature-grid article > span { color:var(--teal); font-size:.68rem; font-weight:800; }
.feature-grid h3 { margin:.9rem 0 .35rem; }
.feature-grid p { margin:0; color:var(--muted); }
.workflow { padding-top:2rem; }
.workflow-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.workflow-steps article { display:flex; gap:1rem; padding:1.2rem; border-top:3px solid var(--cyan); background:rgba(255,250,242,.58); }
.workflow-steps article > span { color:var(--teal); font-size:.75rem; font-weight:800; }
.workflow-steps h3 { margin:0 0 .3rem; }
.workflow-steps p { margin:0; color:var(--muted); font-size:.9rem; }
.plans { max-width:none; background:var(--navy); color:white; }
.plans > * { max-width:1096px; margin-left:auto; margin-right:auto; }
.plans .section-heading > p:last-child,.plans small { color:#d2b9a3; }
.plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.plan-grid article { display:flex; flex-direction:column; min-height:360px; color:var(--ink); }
.plan-grid article.featured { border-color:var(--cyan); box-shadow:inset 0 4px var(--cyan); }
.plan-grid h3 { font-size:1.4rem; }
.plan-grid > article > strong { font-size:1.6rem; }
.plan-grid ul { flex:1; padding-left:1.2rem; color:var(--muted); }
.plan-grid li { margin:.55rem 0; }
.cta { padding:6rem 2rem; color:white; text-align:center; background:var(--teal); }
.cta .eyebrow { color:#b6e0dc; }
.cta h2 { max-width:700px; margin:0 auto 2rem; }
.button.light { color:var(--teal); background:white; }
footer { max-width:1160px; margin:auto; padding:2.5rem 2rem; display:flex; align-items:center; gap:2rem; }
footer p { flex:1; margin:0; color:var(--muted); }
footer > a:last-child { color:var(--teal); font-weight:700; }
@media (max-width:800px) { nav > a:not(.button) { display:none; } .hero { padding-top:4.5rem; } .feature-grid,.plan-grid,.workflow-steps { grid-template-columns:1fr; } .metrics { grid-template-columns:repeat(2,1fr); } .proof-strip { margin:0 1rem; grid-template-columns:1fr; gap:.7rem; } }
@media (max-width:520px) { .site-header { height:68px; } .brand { font-size:.86rem; } .brand > span { width:30px;height:30px; } .hero,.section { padding-left:1rem;padding-right:1rem; } h1 { font-size:2.7rem; } .actions { flex-direction:column; } .listing { grid-template-columns:auto 1fr; } .listing > b,.listing > em { grid-column:2; justify-self:start; } footer { align-items:flex-start; flex-direction:column; gap:1rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }