@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --bg:#f7f3ea;            /* warm cream */
  --bg2:#efe9da;           /* warmer band */
  --card:#ffffff;
  --ink:#2c3326;           /* warm near-black green */
  --muted:#6d7464;
  --line:#e7e0d0;
  --green:#3a9b5c; --green-d:#2c7a47; --green-soft:#e7f3ea;
  --purple:#8b5cf6; --purple-d:#7141d8; --purple-soft:#efeafe;
  --amber:#c47d12; --amber-soft:#fbf0d8; --red:#d4574f;
  --radius:16px; --radius-lg:22px;
  --font:'Nunito',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --grad:linear-gradient(100deg,var(--green),var(--purple));
  --max:1000px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg) url('pattern.svg'); background-size:300px; color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.75; font-weight:400;}
a{color:var(--purple-d); text-decoration:none; font-weight:700;}
a:hover{text-decoration:underline;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px;}

/* header */
header{position:sticky; top:0; z-index:10; background:rgba(247,243,234,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; gap:18px; max-width:var(--max); margin:0 auto; padding:14px 22px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.04em; font-size:19px; color:var(--ink);}
.brand:hover{text-decoration:none;}
.leaf{width:30px; height:30px; border-radius:50%; background:var(--grad); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px;}
.nav .links{display:flex; gap:18px; margin-left:auto; align-items:center; flex-wrap:wrap;}
.nav .links a{color:var(--ink); font-size:16px; font-weight:700;}
.nav .links a:hover{color:var(--purple-d); text-decoration:none;}
.btn{display:inline-block; background:var(--grad); color:#fff !important; font-weight:800; padding:12px 24px; border-radius:999px; font-size:16px; box-shadow:0 6px 18px rgba(113,65,216,.25);}
.btn:hover{text-decoration:none; transform:translateY(-2px); box-shadow:0 9px 22px rgba(113,65,216,.32); transition:.15s;}
.btn-ghost{background:#fff; color:var(--green-d) !important; border:2px solid var(--green); box-shadow:none;}

/* hero */
.hero{text-align:center; padding:70px 0 30px;}
.hero h1{font-size:52px; letter-spacing:.02em; margin:0 0 8px; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero .tag{color:var(--green-d); font-size:19px; font-weight:700; margin:0 0 22px;}
.hero p.lede{color:var(--ink); font-size:21px; max-width:660px; margin:0 auto 30px; line-height:1.7;}
.hero .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* sections */
section{padding:46px 0;}
h2{font-size:34px; margin:0 0 8px; font-weight:800;}
h3{font-size:20px; margin:0 0 4px; font-weight:800;}
.sub{color:var(--muted); font-size:18px; margin:0 0 28px;}
.center{text-align:center;}

/* cards */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; display:block; color:var(--ink); box-shadow:0 4px 16px rgba(44,51,38,.05);}
.card:hover{text-decoration:none; transform:translateY(-4px); box-shadow:0 12px 28px rgba(113,65,216,.14); border-color:var(--purple); transition:.18s;}
.card .ico{font-size:34px; margin-bottom:10px;}
.card h3{color:var(--ink);}
.card p{color:var(--muted); font-size:16px; margin:8px 0 0;}
.card .soon{display:inline-block; margin-top:12px; font-size:12px; font-weight:800; color:var(--purple-d); background:var(--purple-soft); border-radius:999px; padding:4px 12px;}

/* tier ladder */
.ladder{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px;}
.tier{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; box-shadow:0 4px 16px rgba(44,51,38,.05);}
.tier .lvl{font-size:13px; font-weight:800; color:var(--purple-d); text-transform:uppercase; letter-spacing:.06em;}
.tier h3{margin:6px 0 4px;}
.tier p{color:var(--muted); font-size:15px; margin:0;}

/* prose */
.prose{max-width:780px; margin:0 auto;}
.prose p{color:var(--ink); font-size:18px;}
.prose h2{margin-top:34px;}
.callout{background:var(--amber-soft); border:1px solid #ecd9a8; color:#8a5a0b; border-radius:var(--radius); padding:16px 18px; font-size:16px; margin:20px 0;}
.qa{border-bottom:1px solid var(--line); padding:22px 0;}
.qa h3{color:var(--ink); margin-bottom:8px;}
.qa p{color:var(--muted); margin:0; font-size:17px;}

/* newsletter band */
.signup{background:linear-gradient(120deg,var(--green-soft),var(--purple-soft)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px; text-align:center; margin:24px 0;}
.signup h2{margin:0 0 8px;}
.signup p{color:var(--ink); font-size:18px; max-width:560px; margin:0 auto 20px;}

/* footer */
footer{border-top:1px solid var(--line); margin-top:30px; padding:34px 0; color:var(--muted); font-size:15px; background:var(--bg2);}
footer .frow{display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between; align-items:center;}
footer .flinks a{color:var(--ink); margin-right:16px;}
footer .legal{font-size:13px; color:var(--muted); margin-top:16px; line-height:1.7;}

@media(max-width:600px){
  body{font-size:16px;}
  .hero h1{font-size:38px;}
  .hero p.lede{font-size:19px;}
  h2{font-size:28px;}
}