
:root{
  --bg:#eef3e8;
  --paper:#f9fbf6;
  --text:#1d241d;
  --muted:#6a7266;
  --line:rgba(29,36,29,.10);
  --green:#8fa678;
  --green-dark:#6f8460;
  --moss:#dce7d1;
  --cream:#f6f1e7;
  --card:#ffffff;
  --shadow:0 18px 60px rgba(61,80,53,.12);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg,#f3f6ef 0%, #e8efe1 100%);
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font:inherit}
.page-glow{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(circle at 20% 10%, rgba(171,191,156,.28), transparent 34%), radial-gradient(circle at 80% 20%, rgba(255,255,255,.9), transparent 30%);
}
.site-header{
  position:sticky; top:0; z-index:20;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px;
  padding:16px 28px;
  background:rgba(249,251,246,.8);
  border-bottom:1px solid rgba(29,36,29,.08);
  backdrop-filter:blur(16px);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.08em}
.brand-dot{width:12px; height:12px; border-radius:999px; background:linear-gradient(135deg,var(--green),#c2d2b4); box-shadow:0 0 0 4px rgba(143,166,120,.14)}
.nav-links{display:flex; justify-content:center; gap:28px; color:var(--muted); font-size:14px}
.nav-links a:hover{color:var(--text)}
.header-buy{
  justify-self:end; padding:12px 18px; border-radius:999px; background:var(--text); color:#fff; font-weight:700; font-size:14px;
}
.section-shell{padding:30px 28px}
.hero{
  display:grid; grid-template-columns:1.06fr .94fr; gap:38px; align-items:center;
  min-height:calc(100svh - 73px);
  max-width:1360px; margin:0 auto;
}
.hero-copy{padding:42px 0}
.eyebrow{
  display:inline-block; margin:0 0 18px; padding:8px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--green-dark); font-weight:700; font-size:13px;
}
.hero h1{margin:0; font-size:clamp(64px,10vw,132px); line-height:.9; letter-spacing:-.06em}
.subline{margin:12px 0 0; font-size:26px; line-height:1.15; max-width:560px; font-weight:600; color:#303830}
.hero-text{margin:18px 0 0; max-width:620px; font-size:17px; line-height:1.75; color:var(--muted)}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.btn{
  min-width:96px; text-align:center; padding:14px 18px; border-radius:999px; border:1px solid var(--line); font-size:13px; font-weight:800; letter-spacing:.04em; transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--text); color:#fff; border-color:var(--text)}
.btn-dark{background:#d6e2cc; color:#2c342b; border-color:#d6e2cc}
.btn-light{background:#fff; color:var(--text)}
.btn-outline{background:transparent; color:var(--text)}
.is-disabled{opacity:.42; cursor:default}
.contract-box{
  margin-top:18px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  padding:14px 16px; background:#fff; border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow); max-width:720px;
}
.contract-label{font-size:13px; font-weight:800; color:var(--text)}
.contract-box code{font-size:15px; color:var(--muted); white-space:nowrap; overflow:auto}
.contract-box button{padding:10px 16px; border:none; border-radius:12px; background:#eef2ea; color:var(--text); font-weight:700; cursor:pointer}
.hero-art{display:flex; justify-content:center}
.art-card{
  width:min(100%,540px); background:linear-gradient(180deg,#f8fbf3 0%, #e7efe0 100%); border-radius:34px; padding:26px; border:1px solid rgba(29,36,29,.08); box-shadow:var(--shadow);
}
.art-card img{width:100%; height:auto; border-radius:24px; animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.content-band{padding:18px 28px 30px}
.two-col{
  max-width:1360px; margin:0 auto; display:grid; grid-template-columns:.95fr 1.05fr; gap:38px; align-items:start;
  background:rgba(255,255,255,.62); border:1px solid rgba(29,36,29,.08); border-radius:var(--radius); padding:34px 36px; box-shadow:var(--shadow);
}
.section-kicker{margin:0 0 12px; color:var(--green-dark); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px}
.two-col h2{margin:0; font-size:clamp(40px,6vw,74px); line-height:.92; letter-spacing:-.05em}
.copy-stack{color:var(--muted); font-size:17px; line-height:1.75}
.copy-stack p{margin:0 0 18px}
.vibe-grid{
  max-width:1360px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.vibe-card{
  padding:26px; background:#fff; border-radius:26px; border:1px solid rgba(29,36,29,.08); box-shadow:var(--shadow)
}
.vibe-card span{display:inline-block; color:var(--green-dark); font-weight:800; font-size:13px; margin-bottom:18px}
.vibe-card h3{margin:0 0 10px; font-size:24px}
.vibe-card p{margin:0; color:var(--muted); line-height:1.7}
.wide-panel{
  max-width:1304px; margin:12px auto 0; position:relative; overflow:hidden; border-radius:34px; box-shadow:var(--shadow)
}
.wide-panel img{width:100%; aspect-ratio:1500/500; object-fit:cover}
.wide-panel-copy{
  position:absolute; inset:auto 22px 22px auto; padding:12px 16px; border-radius:999px; background:rgba(255,255,255,.82); color:var(--text); font-weight:700; backdrop-filter:blur(8px)
}
.quote-strip{padding:30px 28px 40px}
.quote-box{
  max-width:1360px; margin:0 auto; padding:28px 34px; border-radius:28px; background:linear-gradient(135deg,#d8e6d3 0%, #edf3e8 100%); border:1px solid rgba(29,36,29,.08)
}
.quote-box p{margin:0; font-size:clamp(28px,4vw,50px); line-height:1; letter-spacing:-.04em}
.quote-box span{display:block; margin-top:10px; color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.08em}
.site-footer{
  display:flex; justify-content:space-between; align-items:center; gap:22px; padding:24px 28px 36px; max-width:1360px; margin:0 auto; color:var(--muted)
}
.site-footer strong{display:block; color:var(--text); font-size:14px; letter-spacing:.08em}
.site-footer span{font-size:13px}
.footer-links{display:flex; flex-wrap:wrap; gap:16px}
.footer-links a{font-size:13px}
.footer-links a:hover{color:var(--text)}
@media (max-width: 980px){
  .site-header{grid-template-columns:auto auto; padding:14px 18px}
  .nav-links{display:none}
  .hero, .two-col, .vibe-grid{grid-template-columns:1fr}
  .hero{gap:18px; min-height:auto}
  .hero-copy{padding-top:18px}
  .section-shell,.content-band,.quote-strip{padding-left:18px; padding-right:18px}
  .wide-panel{margin-left:18px; margin-right:18px}
  .site-footer{padding-left:18px; padding-right:18px; flex-direction:column; align-items:flex-start}
}
@media (max-width: 640px){
  .header-buy{display:none}
  .hero h1{font-size:58px}
  .subline{font-size:22px}
  .cta-row .btn{flex:1 1 calc(50% - 6px); min-width:0}
  .contract-box{grid-template-columns:1fr; border-radius:20px}
  .contract-box button{width:100%}
  .quote-box p{font-size:28px}
}
