*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#09180f;
  --bg2:#122819;
  --panel:#173523;
  --panel2:#1d3e2a;
  --line:rgba(154,202,164,.22);
  --line2:rgba(154,202,164,.14);
  --text:#ebf3e8;
  --muted:rgba(235,243,232,.65);
  --muted2:rgba(235,243,232,.42);
  --accent:#9acaA4;
  --accent2:#6fa27a;
  --danger:#e8a48a;
  --display:'Fraunces',serif;
  --body:'General Sans',sans-serif;
  --mono:'DM Mono',monospace;
  --shadow:0 20px 70px rgba(0,0,0,.35);
}
html,body{min-height:100%}
body{font-family:var(--body);background:radial-gradient(circle at 12% -8%,rgba(111,162,122,.22),transparent 35%),radial-gradient(circle at 110% 18%,rgba(154,202,164,.12),transparent 30%),var(--bg);color:var(--text);line-height:1.7}
a{text-decoration:none;color:inherit}
.page-wrap{max-width:1180px;margin:0 auto;padding:0 34px}

.top-nav{position:sticky;top:0;z-index:40;background:rgba(9,24,15,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line2)}
.nav-inner{height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:24px;min-height:50px}
.brand-mark{display:block;width:52px;height:52px;border-radius:12px;background-image:url("./openleaf-mark.png");background-repeat:no-repeat;background-size:cover;background-position:center;box-shadow:0 10px 22px rgba(0,0,0,.32);flex:none}
.brand-word{font-family:var(--display);font-size:32px;line-height:1;color:var(--text);letter-spacing:.01em}
.brand-footer{gap:10px;min-height:40px}
.brand-mark-footer{width:38px;height:38px}
.brand-word-footer{font-size:25px}
.nav-links{display:flex;gap:18px;flex-wrap:wrap}
.nav-links a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-radius:999px;border:1px solid transparent}
.nav-links a:hover,.nav-links a.active{color:var(--text);border-color:var(--line);background:rgba(154,202,164,.08)}
.nav-cta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;border-radius:999px;background:var(--accent);color:#13321f;font-weight:700}

.hero{padding:72px 0 30px;position:relative;overflow:hidden}
.hero:after{content:'';position:absolute;right:-90px;top:30px;width:340px;height:340px;background:radial-gradient(circle,rgba(154,202,164,.22),transparent 70%);pointer-events:none}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin-bottom:14px}
.eyebrow:before{content:'';width:26px;height:1px;background:var(--accent2);opacity:.6}
.page-title{font-family:var(--display);font-size:clamp(34px,5vw,64px);line-height:1.08;margin-bottom:12px;max-width:920px}
.page-title em{font-style:italic;color:var(--accent)}
.page-sub{font-size:18px;color:var(--muted);max-width:850px}

.section{padding:28px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:16px}
.h2{font-family:var(--display);font-size:clamp(26px,3vw,42px);line-height:1.15}
.h2 em{font-style:italic;color:var(--accent)}
.lead{color:var(--muted);max-width:760px}

.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

.card{background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--line2);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.card.soft{box-shadow:none}
.card h3{font-family:var(--display);font-size:24px;margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}
.meta{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.stat{background:rgba(9,24,15,.45);border:1px solid var(--line);border-radius:12px;padding:12px}
.stat .num{font-family:var(--display);font-size:34px;line-height:1.1}
.stat .lab{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}

.visual-frame{background:linear-gradient(180deg,#153022,#102519);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.visual-top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line2)}
.visual-title{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted)}
.live-pill{font-family:var(--mono);font-size:10px;color:var(--accent);border:1px solid var(--line);padding:4px 10px;border-radius:999px}
.visual-body{padding:16px}
.bars{display:flex;align-items:flex-end;gap:7px;height:170px;margin-top:10px}
.bar{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,rgba(154,202,164,.85),rgba(111,162,122,.35))}
.bar.alt{background:linear-gradient(180deg,rgba(232,164,138,.82),rgba(232,164,138,.32))}
.line-grid{position:relative;height:220px;border:1px solid var(--line2);border-radius:12px;background:repeating-linear-gradient(to top,transparent 0 35px,rgba(154,202,164,.08) 35px 36px)}
.line-chart-svg{position:absolute;inset:12px 12px 24px 12px;width:calc(100% - 24px);height:calc(100% - 36px)}
.line-area{fill:rgba(154,202,164,.12)}
.line-actual{fill:none;stroke:#9acaa4;stroke-width:3}
.line-expected{fill:none;stroke:rgba(235,243,232,.8);stroke-width:2.2;stroke-dasharray:7 6}
.line-point{fill:#9acaa4;stroke:#0f2318;stroke-width:1.5}
.line-xlabels{position:absolute;left:12px;right:12px;bottom:8px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--muted2)}

.feature-list{display:grid;gap:10px;margin-top:10px}
.feature{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:rgba(9,24,15,.4);border:1px solid var(--line2);border-radius:11px}
.feature b{font-size:14px}
.feature span{color:var(--muted);font-size:14px}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.price-card{position:relative;background:linear-gradient(165deg,var(--panel),#1b3b29);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;min-height:520px}
.price-card.pop{box-shadow:0 0 52px rgba(154,202,164,.24)}
.pop-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:3px 14px;border-radius:999px;background:var(--accent);color:#13321f;font-weight:700}
.price-tier{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
.price-amt{font-family:var(--display);font-size:66px;line-height:1;margin:10px 0 6px}
.price-desc{color:var(--muted);margin-bottom:12px}
.price-list{list-style:none;display:grid;gap:8px;margin:12px 0 18px}
.price-list li{color:var(--muted);padding-left:20px;position:relative}
.price-list li:before{content:'↳';position:absolute;left:0;color:var(--accent2)}
.price-btn{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;border:none;padding:12px;border-radius:999px;background:var(--accent);color:#14321f;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-align:center}

.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.time{background:rgba(9,24,15,.35);border:1px solid var(--line2);border-radius:12px;padding:12px}
.time h4{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--accent2);margin-bottom:6px}
.time p{color:var(--muted);font-size:14px}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tab-btn{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.tab-btn.active{background:rgba(154,202,164,.12);color:var(--text)}
.tab-panel{display:none}
.tab-panel.active{display:block}

.form{display:grid;gap:12px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:rgba(9,24,15,.45);color:var(--text);font-family:var(--body)}
.field textarea{min-height:130px;resize:vertical}
.form-btn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;border:none;padding:12px 16px;border-radius:999px;background:var(--accent);color:#13321f;cursor:pointer}
.form-status{min-height:22px;font-size:13px;color:var(--muted)}
.form-status.success{color:var(--accent)}
.form-status.error{color:var(--danger)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px
}

.footer{margin-top:34px;padding:28px 0;border-top:1px solid var(--line2);display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:16px}
.footer h4{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent2);margin-bottom:10px}
.footer ul{list-style:none;display:grid;gap:8px}
.footer li a{color:var(--muted);font-size:14px}
.footer li a:hover{color:var(--text)}
.copy{grid-column:1/-1;border-top:1px solid var(--line2);padding-top:12px;color:var(--muted2);font-family:var(--mono);font-size:10px}

.faq{display:grid;gap:10px}
.faq-item{border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:rgba(9,24,15,.35)}
.faq-q{width:100%;text-align:left;padding:12px 14px;font-family:var(--display);font-size:22px;background:none;border:none;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;padding:0 14px}
.faq-a p{padding-bottom:12px;color:var(--muted)}
.faq-item.open .faq-a{max-height:220px}

@media (max-width:1100px){.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr 1fr}.grid-4{grid-template-columns:1fr 1fr}.pricing-grid{grid-template-columns:1fr}.timeline{grid-template-columns:1fr 1fr}.footer{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.page-wrap{padding:0 16px}.nav-inner{height:auto;align-items:flex-start;flex-direction:column;padding:10px 0}.brand{min-height:44px;gap:10px}.brand-mark{width:42px;height:42px}.brand-word{font-size:26px}.brand-mark-footer{width:32px;height:32px}.brand-word-footer{font-size:22px}.nav-links{width:100%}.hero{padding-top:40px}.page-sub{font-size:16px}.grid-3,.grid-4,.timeline,.footer{grid-template-columns:1fr}}
