/* ===== VARIABLES ===== */
:root {
  --g: #1a4a32;
  --g2: #245c42;
  --c: #faf6ee;
  --cd: #ede8de;
  --t: #c8673a;
  --d: #111110;
  --d2: #2a2a28;
  --g1: #6b6b68;
  --g2b: #9b9b97;
  --g3: #d4d4cf;
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--c);color:var(--d);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:100;background:rgba(250,246,238,0.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--cd)}
.nav-inner{max-width:1200px;margin:0 auto;padding:18px 40px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-tag{font-size:0.8rem;color:var(--g1)}

/* ===== HERO ===== */
.hero{max-width:1200px;margin:0 auto;padding:80px 40px 100px;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.eyebrow{font-size:0.72rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--t);margin-bottom:22px}
.eyebrow.light{color:rgba(200,103,58,0.85)}
.hero-h1{font-family:'Instrument Serif',serif;font-size:clamp(2.4rem,4.5vw,3.8rem);font-weight:400;line-height:1.08;color:var(--d);margin-bottom:26px;letter-spacing:-0.025em}
.hero-h1 em{font-style:italic;color:var(--t)}
.hero-body{font-size:1rem;line-height:1.72;color:var(--g1);max-width:460px;margin-bottom:44px}
.pipes{display:flex;flex-direction:column;gap:14px}
.pipe{display:flex;align-items:center;gap:13px;font-size:0.9rem;color:var(--d2);font-weight:500}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dot-green{background:var(--g)}
.dot-cream{background:var(--cd);border:1px solid var(--g3)}
.dot-terra{background:var(--t)}

/* browser */
.browser-wrap{position:relative}
.browser{background:var(--d);border-radius:12px;overflow:hidden;box-shadow:0 28px 72px rgba(0,0,0,0.16),0 6px 20px rgba(0,0,0,0.1)}
.browser-bar{background:var(--d2);padding:11px 14px;display:flex;align-items:center;gap:10px}
.dots{display:flex;gap:5px}
.d{width:9px;height:9px;border-radius:50%}
.d-r{background:#ff5f57}.d-y{background:#febc2e}.d-g{background:#28c840}
.url-bar{flex:1;background:var(--d);border-radius:4px;padding:4px 10px;font-size:0.68rem;color:var(--g2b);font-family:'DM Sans',sans-serif;letter-spacing:0.01em}
.site-body{padding:20px;background:var(--c);display:flex;flex-direction:column;gap:12px}
.s-hero{display:flex;flex-direction:column;gap:10px}
.s-green{height:72px;background:var(--g);border-radius:5px}
.s-text{display:flex;flex-direction:column;gap:5px}
.s-h1{height:18px;width:58%;background:var(--d);border-radius:3px}
.s-sub{height:10px;width:36%;background:var(--g3);border-radius:2px}
.s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.s-card{height:52px;background:#fff;border-radius:5px;border:1px solid var(--cd)}
.s-revs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.s-rev{height:42px;background:#fff;border-radius:5px;border:1px solid var(--cd)}
.s-cta{height:30px;background:var(--g);border-radius:5px;opacity:0.85}
.site-caption{text-align:center;font-size:0.72rem;color:var(--g2b);font-style:italic;margin-top:12px}

/* ===== HOW ===== */
.how{background:var(--d);padding:96px 40px}
.how-hd{max-width:1200px;margin:0 auto 60px}
.how-title{font-family:'Instrument Serif',serif;font-size:clamp(1.9rem,3.5vw,2.8rem);color:var(--c);font-weight:400;letter-spacing:-0.02em}
.steps{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.step{padding:0 36px 0 0;border-right:1px solid var(--d2)}
.step:first-child{padding-left:0}
.step:last-child{border-right:none;padding-left:36px;padding-right:0}
.step:nth-child(2){padding-left:36px}
.step-n{font-family:'Instrument Serif',serif;font-size:3.2rem;color:var(--d2);line-height:1;margin-bottom:20px;letter-spacing:-0.03em}
.step-ico{margin-bottom:18px}
.step-t{font-family:'Instrument Serif',serif;font-size:1.5rem;color:var(--c);margin-bottom:12px;font-weight:400;letter-spacing:-0.01em}
.step-b{font-size:0.88rem;line-height:1.7;color:var(--g2b);margin-bottom:14px}
.step-tag{font-size:0.72rem;color:var(--t);font-weight:500;border-top:1px solid var(--d2);padding-top:12px;margin-top:2px}
.step-tag.terra{color:var(--t)}

/* ===== STATS ===== */
.stats{background:var(--g);padding:56px 40px}
.stats-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:36px}
.st{text-align:center;flex:1}
.st-n{font-family:'Instrument Serif',serif;font-size:2.8rem;color:var(--c);letter-spacing:-0.03em;line-height:1;margin-bottom:8px}
.st-l{font-size:0.75rem;color:rgba(250,246,238,0.6);line-height:1.4;max-width:130px;margin:0 auto}
.st-div{width:1px;height:56px;background:rgba(255,255,255,0.12)}

/* ===== PROCESS ===== */
.proc{background:var(--c);padding:96px 40px}
.proc-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.proc-title{font-family:'Instrument Serif',serif;font-size:clamp(1.7rem,2.8vw,2.5rem);color:var(--d);font-weight:400;margin-bottom:18px;letter-spacing:-0.02em;line-height:1.15}
.proc-b{font-size:0.92rem;line-height:1.75;color:var(--g1);margin-bottom:14px}
.check-list{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.ci{display:flex;align-items:flex-start;gap:11px;font-size:0.88rem;color:var(--d2);line-height:1.5}
.ck{flex-shrink:0;margin-top:1px}

/* funnel */
.funnel{background:var(--d);border-radius:14px;padding:32px}
.fstep{display:flex;align-items:center;gap:12px}
.fl{font-size:0.72rem;color:var(--g2b);min-width:88px}
.fbar{height:9px;background:var(--d2);border-radius:3px;min-width:30px;flex:1}
.ffill{height:100%;background:var(--g);border-radius:3px}
.fbar-fill{height:100%;background:var(--g2);border-radius:3px}
.fbar-sale{height:100%;background:var(--t);border-radius:3px}
.fc{font-size:0.72rem;color:var(--c);font-weight:600;margin-left:auto}
.farr{padding:5px 0;display:flex;justify-content:center}
.fstep-sale .fl{color:var(--t)}
.fstep-sale .fc{color:var(--t)}
.rev-note{margin-top:18px;text-align:center;font-size:0.72rem;color:var(--t);font-weight:600;letter-spacing:0.05em;text-transform:uppercase}

/* ===== CLOSING ===== */
.close{background:var(--d);padding:96px 40px}
.close-inner{max-width:720px;margin:0 auto;text-align:center}
.close-h{font-family:'Instrument Serif',serif;font-size:clamp(1.8rem,3.5vw,3rem);color:var(--c);font-weight:400;letter-spacing:-0.02em;line-height:1.15;margin-bottom:26px}
.close-b{font-size:0.98rem;line-height:1.8;color:var(--g2b);margin-bottom:28px}
.close-tag{font-family:'Instrument Serif',serif;font-style:italic;font-size:1.2rem;color:var(--t)}

/* ===== FOOTER ===== */
.ft{background:var(--g);padding:26px 40px}
.ft-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.ft-logo{display:flex;align-items:center;gap:8px;font-family:'Instrument Serif',serif;font-size:1rem;color:var(--c)}
.ft-tag{font-size:0.75rem;color:rgba(250,246,238,0.45)}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:44px;padding:56px 24px 72px}
  .hero-right{order:-1}
  .steps{grid-template-columns:1fr;gap:36px}
  .step{border-right:none;border-bottom:1px solid var(--d2);padding:0 0 36px}
  .step:last-child{border-bottom:none;padding-bottom:0}
  .step:nth-child(2){padding-left:0}
  .proc-inner{grid-template-columns:1fr;gap:44px}
  .stats-inner{flex-wrap:wrap;gap:22px}
  .st-div{display:none}
  .st{flex:0 0 calc(50% - 11px)}
  .how,.proc,.close,.stats{padding-left:24px;padding-right:24px}
  .nav-inner{padding:15px 24px}
  .nav-tag{display:none}
}
@media(max-width:480px){
  .st{flex:0 0 100%}
  .stats-inner{justify-content:center}
}