:root{
  --bg:#0f1712; --panel:#101a14; --ink:#ecf6ee; --muted:#9bb3a2; --line:#233426;
  --brand:#43c86b; --brand-2:#2ea46a; --brand-ink:#0f5132; --radius:16px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.25); --shadow-md:0 12px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6fbf7; --panel:#ffffff; --ink:#0f1a10; --muted:#5b6d5e; --line:#dce8de;
    --brand:#34b15a; --brand-2:#1e8d48; --brand-ink:#0a5a2a;
    --shadow-sm:0 1px 2px rgba(10,24,16,.08); --shadow-md:0 6px 20px rgba(10,24,16,.12);
  }
}
*{box-sizing:border-box}html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(67,200,107,.12), transparent 60%),
    radial-gradient(1200px 800px at 110% -20%, rgba(67,200,107,.10), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:16px 20px}
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(180%) blur(12px);
  background:color-mix(in oklab, var(--bg) 85%, white 15%);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.brand{display:flex; gap:10px; align-items:center}
.brand .title{font-weight:900; letter-spacing:.2px}
.brand .sub{font-size:12px; color:var(--muted)}
.nav a.btn{margin-left:8px}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  appearance:none; border:1px solid var(--line); background:color-mix(in oklab, var(--panel) 86%, var(--bg) 14%);
  color:var(--brand-ink); padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer;
  box-shadow:var(--shadow-sm); text-decoration:none;
}
.btn-primary{
  background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 30%, white 70%), color-mix(in oklab, var(--brand) 12%, white 88%));
  color:#0f5132; border-color:color-mix(in oklab, var(--brand) 50%, var(--line) 50%);
  box-shadow:0 8px 18px rgba(52,177,90,.28);
}
.btn:active{transform:translateY(1px)}
.hero{
  display:grid; gap:20px; align-items:center; grid-template-columns: 1.2fr 1fr;
  padding:28px 0;
}
.hero h1{font-size:38px; margin:0; letter-spacing:-.02em}
.hero p{color:var(--muted); font-size:16px; line-height:1.5}
.hero .cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.card{
  background:color-mix(in oklab, var(--panel) 92%, var(--bg) 8%);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md);
}
.features{display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin:20px 0}
.feature{padding:14px}
.feature h3{margin:0 0 8px 0}
.section{padding:16px 0}
footer{border-top:1px solid var(--line); color:var(--muted); font-size:13px}
.pricing-grid{display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin:16px 0}
.price-card{padding:14px; display:flex; flex-direction:column; gap:10px}
.price{font-size:26px; font-weight:800}
.muted{color:var(--muted)}
.badge{display:inline-flex; gap:6px; align-items:center; padding:4px 8px; border:1px solid var(--line); border-radius:999px; font-size:12px; background:color-mix(in oklab, var(--panel) 80%, var(--bg) 20%)}
.note{font-size:12px; color:var(--muted)}
.hero-ill{
  height:260px; border-radius:16px; border:1px solid var(--line);
  background:
    radial-gradient(800px 300px at -20% -40%, rgba(95,255,168,.12), transparent 60%),
    linear-gradient(135deg, #0e3323, #1b5a3a 45%, #2ea46a);
  box-shadow:var(--shadow-md);
}
@media (max-width: 980px){
  .hero{grid-template-columns: 1fr}
  .hero-ill{height:180px}
}
.ok{border:1px solid #1f8b4c;background:#0d1a14;color:#b6f6cf;padding:10px;border-radius:10px;margin:12px 0;display:none}
.ok.show{display:block}


/* --- v2 polish --- */
html, body {scroll-behavior:smooth}
.wrap{max-width:1080px}
h1{font-weight:900; letter-spacing:-0.02em}
.section{padding:72px 0}
.btn{border-radius:999px; padding:12px 20px; font-weight:600; transition:transform .08s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.25)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(180deg, #2fd080, #22b36d)}
.btn-primary:hover{filter:brightness(1.05)}
.nav{position:sticky; top:0; backdrop-filter:saturate(180%) blur(8px); background:rgba(15,23,18,0.6); z-index:1000; border-bottom:1px solid rgba(255,255,255,0.06)}
.card{border:1px solid rgba(255,255,255,0.08); box-shadow:0 10px 30px rgba(0,0,0,.25)}
.muted{opacity:.7}
/* improve link focus for accessibility */
a:focus-visible, button:focus-visible{outline:2px solid #2fd080; outline-offset:2px; border-radius:6px}
/* stripe buy button centering */
stripe-buy-button{display:inline-block; margin-top:16px}