/* ── Reset & tokens ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FAFAF8;--bg2:#F2F2EE;--white:#fff;
  --border:#E8E8E4;--border2:#E2E2DC;
  --text:#111;--muted:#555;--dim:#999;
  --accent:#5C8A00;--ab:#C5D930;--dark:#111;
  --fl:'Syne',sans-serif;
  --fh:'Unbounded',sans-serif;
  --fb:'DM Sans',sans-serif;
  --max:1100px;--pad:clamp(24px,5vw,64px)
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--fb);font-weight:400;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}

/* ── Nav ── */
nav{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);background:rgba(250,250,248,.96);border-bottom:1px solid transparent;backdrop-filter:blur(12px);transition:border-color .3s,box-shadow .3s}
nav.scrolled{border-bottom-color:var(--border);box-shadow:0 2px 20px rgba(0,0,0,.04)}
.nl{font-family:var(--fl);font-weight:800;font-size:20px;letter-spacing:-.02em}
.nl span{color:var(--accent)}
.nl-sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-left:10px;padding-left:10px;border-left:1px solid var(--border)}
.nv{display:flex;gap:32px;align-items:center}
.nv a{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);transition:color .2s}
.nv a:hover{color:var(--text)}
.nc{padding:10px 22px!important;background:var(--text);color:var(--bg)!important;font-family:var(--fh);font-weight:700;font-size:10px!important;letter-spacing:.08em!important;transition:background .2s!important}
.nc:hover{background:#2E2E2E!important}
.hb{display:none;flex-direction:column;gap:5px;cursor:pointer}
.hb span{display:block;width:22px;height:1.5px;background:var(--text)}

/* ── Buttons ── */
.btn-p{display:inline-block;padding:14px 32px;background:var(--text);color:var(--bg);font-family:var(--fh);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;transition:all .2s}
.btn-p:hover{background:#2E2E2E;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ab)}
.btn-o{display:inline-block;padding:14px 32px;background:transparent;color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--border2);transition:all .2s}
.btn-o:hover{border-color:var(--text);color:var(--text)}
.btn-l{display:inline-block;padding:16px 36px;background:var(--ab);color:var(--text);font-family:var(--fh);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;transition:background .2s;white-space:nowrap}
.btn-l:hover{background:#d4e840}

/* ── Layout ── */
.dv{height:1px;background:var(--border);margin:0 var(--pad)}
.sc{max-width:var(--max);margin:0 auto;padding:80px var(--pad)}
.sl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:16px}
.sh{font-family:var(--fh);font-size:clamp(20px,2.8vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--text)}

/* ── Hero ── */
.hero{max-width:var(--max);margin:0 auto;padding:clamp(80px,11vw,130px) var(--pad) clamp(60px,8vw,90px)}
.ey{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:20px;opacity:0;animation:fu .6s .05s forwards}
.h1{font-family:var(--fh);font-size:clamp(30px,5.5vw,66px);font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--text);margin-bottom:32px;opacity:0;animation:fu .65s .15s forwards}
.h1 em{color:var(--accent);font-style:normal}
.hs{font-size:17px;color:var(--muted);max-width:500px;line-height:1.8;margin-bottom:40px;opacity:0;animation:fu .65s .28s forwards}
.ha{display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:fu .65s .38s forwards}

/* ── Pain points ── */
.pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px}
.pain-card{padding:32px 28px;background:var(--white);border:1px solid var(--border)}
.pain-icon{font-size:24px;margin-bottom:16px}
.pain-title{font-family:var(--fh);font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.3}
.pain-desc{font-size:13px;color:var(--muted);line-height:1.7}
.pain-cost{display:inline-block;margin-top:12px;font-family:var(--fh);font-size:10px;font-weight:700;color:var(--accent);letter-spacing:.1em;text-transform:uppercase}

/* ── How it works ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;position:relative}
.step{padding:32px 24px;background:var(--white);border:1px solid var(--border);position:relative}
.step-num{font-family:var(--fh);font-size:40px;font-weight:800;color:var(--border2);line-height:1;margin-bottom:16px}
.step-title{font-family:var(--fh);font-size:12px;font-weight:700;color:var(--accent);margin-bottom:8px;letter-spacing:.02em}
.step-desc{font-size:13px;color:var(--muted);line-height:1.65}
.step-arrow{display:none}

/* ── Tools grid ── */
.tools-section{background:var(--bg2);padding:80px var(--pad)}
.tools-inner{max-width:var(--max);margin:0 auto}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:2px;margin-top:36px}
.tool-card{background:var(--white);border:1px solid var(--border);padding:20px 18px;display:flex;align-items:center;gap:12px;transition:border-color .2s,transform .2s}
.tool-card:hover{border-color:#C0C0B8;transform:translateY(-2px)}
.tool-icon{font-size:22px}
.tool-name{font-size:13px;font-weight:500;color:var(--text)}
.tool-cat{font-size:10px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}

/* ── Use cases ── */
.uc-tabs{display:flex;gap:2px;margin-bottom:2px;flex-wrap:wrap}
.uc-tab{padding:12px 24px;background:var(--bg2);border:1px solid var(--border);font-family:var(--fh);font-size:11px;font-weight:700;color:var(--dim);cursor:pointer;letter-spacing:.05em;transition:all .2s}
.uc-tab.active{background:var(--dark);color:var(--ab);border-color:var(--dark)}
.uc-tab:hover:not(.active){color:var(--text)}
.uc-panel{display:none}
.uc-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.uc-card{background:var(--white);border:1px solid var(--border);padding:32px 28px}
.uc-before{margin-bottom:20px}
.uc-label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.uc-label.before{color:var(--dim)}
.uc-label.after{color:var(--accent)}
.uc-text{font-size:14px;color:var(--muted);line-height:1.65}
.uc-text.after{color:#2D5A00}
.uc-after{padding-top:20px;border-top:1px solid var(--border)}
.uc-saving{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 12px;background:#F0F7E6;border:1px solid #C8DFA0;font-family:var(--fh);font-size:10px;font-weight:700;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}

/* ── CTA strip ── */
.cs{background:var(--dark);padding:72px var(--pad);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:32px}
.cs h2{font-family:var(--fh);font-size:clamp(16px,2vw,26px);font-weight:800;color:#FAFAF8;letter-spacing:-.02em;margin-bottom:10px;line-height:1.2}
.cs p{font-size:14px;color:#666}

/* ── Parent brand link ── */
.brand-bar{background:var(--bg2);border-top:1px solid var(--border);padding:16px var(--pad);display:flex;justify-content:center;align-items:center;gap:10px}
.brand-bar p{font-size:12px;color:var(--dim)}
.brand-bar a{font-size:12px;color:var(--accent);font-weight:500;border-bottom:1px solid #C8DFA0}
.brand-bar a:hover{color:var(--text)}

/* ── Footer ── */
footer{border-top:1px solid var(--border);padding:36px var(--pad);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.flo{font-family:var(--fl);font-weight:800;font-size:18px}
.flo span{color:var(--accent)}
.flo-sub{font-size:11px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;margin-left:8px}
.fli{display:flex;gap:24px}
.fli a{font-size:12px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;transition:color .2s}
.fli a:hover{color:var(--text)}
.fco{font-size:11px;color:#BBB}

/* ── Contact form ── */
.cg{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;align-items:start}
.ci{display:flex;flex-direction:column;gap:36px}
.ih h3{font-family:var(--fh);font-size:12px;font-weight:700;margin-bottom:8px}
.ih p,.ih a{font-size:14px;color:var(--muted);line-height:1.7;transition:color .2s}
.ih a:hover{color:var(--accent)}
.pb{background:var(--bg2);border:1px solid var(--border2);padding:24px 28px}
.pb h3{font-family:var(--fh);font-size:12px;font-weight:700;margin-bottom:14px}
.pi{display:flex;flex-direction:column;gap:10px}
.pi p{display:flex;gap:10px;font-size:13px;color:var(--muted)}
.pi p::before{content:'→';color:var(--accent);font-weight:700;min-width:16px}
.cf{display:flex;flex-direction:column;gap:18px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ff{display:flex;flex-direction:column;gap:7px}
.ff label{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);font-weight:500}
.ff input,.ff textarea,.ff select{background:var(--white);border:1px solid var(--border);color:var(--text);font-family:var(--fb);font-size:14px;padding:13px 15px;outline:none;transition:border-color .2s;width:100%;appearance:none;-webkit-appearance:none;border-radius:0}
.ff input:focus,.ff textarea:focus,.ff select:focus{border-color:var(--accent)}
.ff textarea{resize:vertical;min-height:120px}
.ff select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;cursor:pointer}
.sb-btn{display:inline-block;padding:14px 36px;background:var(--text);color:var(--bg);font-family:var(--fh);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:none;cursor:pointer;align-self:flex-start;transition:all .2s}
.sb-btn:hover{background:#2E2E2E;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ab)}
.fsucc{display:none;background:#F0F7E6;border:1px solid #C8DFA0;padding:32px;text-align:center}
.fsucc.show{display:block}
.fsucc h3{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--accent);margin-bottom:8px}
.fsucc p{font-size:13px;color:var(--muted)}

/* ── Animations ── */
@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.visible{opacity:1;transform:translateY(0)}

/* ── Mobile ── */
@media(max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
  .uc-panel.active{grid-template-columns:1fr}
  .cg{grid-template-columns:1fr;gap:48px}
}
@media(max-width:768px){
  .nv{display:none;flex-direction:column;position:absolute;top:58px;left:0;right:0;background:rgba(250,250,248,.98);padding:20px var(--pad) 28px;border-bottom:1px solid var(--border);gap:18px}
  .nv.open{display:flex}
  .nc{display:none!important}
  .hb{display:flex}
  .steps{grid-template-columns:1fr}
  .fr{grid-template-columns:1fr}
  .nl-sub{display:none}
}