/* Firm Heartbeat site.css - Lora + Plus Jakarta Sans */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --green:#1D9E75;--green-dark:#0F6E56;--green-light:#E1F5EE;--green-mid:#9FE1CB;
  --green-glow:rgba(29,158,117,.28);--dark:#080C10;--text:#18181B;--text-2:#52525B;
  --text-3:#A1A1AA;--border:#E4E4E7;--bg:#F9F9F8;--surface:#fff;
  --serif:'Lora',Georgia,serif;--sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --radius:10px;--radius-lg:16px;--max:1100px;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--surface);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:16px;line-height:1.6;font-weight:400}
a{color:inherit;text-decoration:none}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;height:64px;display:flex;align-items:center;padding:0 48px;background:rgba(8,12,16,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:.5px solid rgba(255,255,255,.07);transition:background .3s}
.nav.scrolled{background:rgba(8,12,16,.94)}
.nav.nav-light{background:rgba(255,255,255,.92);border-bottom:.5px solid var(--border)}
.nav.nav-light.scrolled{background:rgba(255,255,255,.97)}
.nav-brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.nav-mark{width:32px;height:32px;background:var(--green);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff}
.nav-name{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.02em}
.nav-light .nav-name{color:var(--text)}
.nav-links{display:flex;align-items:center;gap:36px;margin-right:32px}
.nav-links a{font-size:14px;color:rgba(255,255,255,.5);transition:color .15s;font-weight:500}
.nav-links a:hover,.nav-links a.active{color:rgba(255,255,255,.92)}
.nav-light .nav-links a{color:var(--text-2)}
.nav-light .nav-links a:hover,.nav-light .nav-links a.active{color:var(--text)}
.nav-login{font-size:14px;color:rgba(255,255,255,.45);margin-right:16px;transition:color .15s;font-weight:500}
.nav-login:hover{color:#fff}
.nav-light .nav-login{color:var(--text-2)}
.nav-cta{background:var(--green);color:#fff;padding:8px 20px;border-radius:8px;font-size:14px;font-weight:600;transition:background .15s,transform .12s}
.nav-cta:hover{background:var(--green-dark);transform:translateY(-1px)}

/* HERO */
.hero{min-height:100vh;background:var(--dark);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 48px 0;position:relative;overflow:hidden;text-align:center}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px;animation:grid-drift 24s linear infinite}
@keyframes grid-drift{from{transform:translate(0,0)}to{transform:translate(64px,64px)}}
.hero-glow{position:absolute;width:900px;height:600px;background:radial-gradient(ellipse at center,rgba(29,158,117,.17) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;animation:pulse-glow 4s ease-in-out infinite}
@keyframes pulse-glow{0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}50%{opacity:.65;transform:translate(-50%,-50%) scale(1.06)}}
.hero-orb{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(29,158,117,.13) 0%,transparent 70%);pointer-events:none;animation:orb-float linear infinite}
@keyframes orb-float{0%{transform:translateY(0) translateX(0) scale(1);opacity:.55}33%{transform:translateY(-28px) translateX(14px) scale(1.04);opacity:1}66%{transform:translateY(14px) translateX(-9px) scale(.96);opacity:.65}100%{transform:translateY(0) translateX(0) scale(1);opacity:.55}}
.hero-inner{position:relative;z-index:1;max-width:820px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(29,158,117,.12);border:1px solid rgba(29,158,117,.28);border-radius:99px;padding:6px 16px;font-size:12px;font-weight:600;color:#5DCAA5;margin-bottom:32px;animation:fade-up .8s ease both}
.hero-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.hero h1{font-family:var(--serif);font-size:clamp(40px,5.5vw,68px);line-height:1.12;color:#fff;letter-spacing:-.015em;margin-bottom:24px;animation:fade-up .8s .1s ease both;font-weight:600}
.hero h1 em{font-style:italic;color:var(--green)}
.hero-sub{font-size:18px;color:rgba(255,255,255,.5);line-height:1.75;max-width:540px;margin:0 auto 44px;font-weight:400;animation:fade-up .8s .2s ease both}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:72px;animation:fade-up .8s .3s ease both}
.hero-stats{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:72px;animation:fade-up .8s .4s ease both}
.hero-stat{padding:0 44px;border-right:.5px solid rgba(255,255,255,.1)}
.hero-stat:first-child{padding-left:0}
.hero-stat:last-child{padding-right:0;border-right:none}
.hero-stat-num{font-family:var(--serif);font-size:42px;color:#fff;line-height:1;margin-bottom:6px;font-weight:600}
.hero-stat-num span{color:var(--green)}
.hero-stat-lbl{font-size:12px;color:rgba(255,255,255,.32);font-weight:400}

/* PAGE HERO (light) */
.page-hero{padding:140px 48px 80px;background:var(--bg);border-bottom:.5px solid var(--border);position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 60%,rgba(29,158,117,.06) 0%,transparent 55%)}
.page-hero-inner{max-width:var(--max);margin:0 auto;position:relative}
.page-hero-label{display:inline-flex;align-items:center;gap:8px;background:var(--green-light);border:1px solid var(--green-mid);border-radius:99px;padding:5px 14px;font-size:11px;font-weight:700;color:var(--green-dark);text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px}
.page-hero h1{font-family:var(--serif);font-size:clamp(34px,4.5vw,58px);line-height:1.12;color:var(--text);letter-spacing:-.015em;margin-bottom:20px;font-weight:600;max-width:680px}
.page-hero p{font-size:18px;color:var(--text-2);line-height:1.75;max-width:540px;margin-bottom:32px}
.page-hero-actions{display:flex;align-items:center;gap:12px}

/* BUTTONS */
.btn-hero{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;padding:14px 28px;border-radius:10px;font-size:15px;font-weight:600;font-family:var(--sans);border:none;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}
.btn-hero:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 8px 32px var(--green-glow)}
.btn-hero-ghost{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);padding:14px 24px;border-radius:10px;font-size:15px;font-weight:500;font-family:var(--sans);border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:all .15s}
.btn-hero-ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.25)}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;padding:12px 24px;border-radius:var(--radius);font-size:15px;font-weight:600;font-family:var(--sans);border:none;cursor:pointer;transition:background .15s,transform .12s,box-shadow .15s}
.btn-primary:hover{background:var(--green-dark);transform:translateY(-1px);box-shadow:0 6px 24px var(--green-glow)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;background:none;color:var(--text-2);padding:12px 22px;border-radius:var(--radius);font-size:15px;font-weight:500;font-family:var(--sans);border:1px solid var(--border);cursor:pointer;transition:all .15s}
.btn-outline:hover{border-color:var(--green);color:var(--green-dark)}

/* HERO WINDOW */
.hero-window-wrap{width:100%;max-width:1000px;margin:0 auto;animation:fade-up .8s .5s ease both;position:relative}
.hero-window-wrap::before{content:'';position:absolute;inset:-1px;border-radius:14px 14px 0 0;background:linear-gradient(135deg,rgba(29,158,117,.4),rgba(29,158,117,.05));z-index:0}
.hero-window{position:relative;z-index:1;background:#111820;border-radius:12px 12px 0 0;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-bottom:none}
.hero-window-chrome{background:#1A2330;padding:14px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.wc-dot{width:12px;height:12px;border-radius:50%}
.wc-url{flex:1;text-align:center;font-size:11px;color:rgba(255,255,255,.22);background:rgba(255,255,255,.05);border-radius:6px;padding:4px 12px;margin:0 60px}
.hero-dash{background:#F2F1ED;padding:20px;display:grid;grid-template-columns:190px 1fr;gap:0;min-height:300px}
.dash-sidebar{background:#1A1A18;border-radius:8px 0 0 8px;padding:16px 12px}
.dash-sb-logo{display:flex;align-items:center;gap:7px;padding:0 6px;margin-bottom:20px}
.dash-sb-mark{width:22px;height:22px;background:var(--green);border-radius:5px;font-size:9px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}
.dash-sb-name{font-size:12px;font-weight:600;color:#fff}
.dash-sb-item{padding:7px 8px;border-radius:6px;font-size:11px;color:rgba(255,255,255,.38);margin-bottom:2px}
.dash-sb-item.active{background:rgba(29,158,117,.2);color:#5DCAA5}
.dash-main{background:#F2F1ED;border-radius:0 8px 8px 0;padding:16px}
.dash-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.dash-kpi{background:#fff;border-radius:8px;padding:12px 14px;border:1px solid #E8E7E2}
.dash-kpi.hi{border-left:3px solid var(--green);background:var(--green-light)}
.dash-kpi-lbl{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#A09E98;margin-bottom:6px}
.dash-kpi-val{font-family:var(--serif);font-size:20px;color:#0F0F0E;line-height:1;font-weight:600}
.dash-kpi.hi .dash-kpi-val{color:var(--green-dark)}
.dash-kpi-sub{font-size:10px;color:var(--green);font-weight:600;margin-top:3px}
.dash-funnel-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dash-card{background:#fff;border-radius:8px;padding:12px 14px;border:1px solid #E8E7E2}
.dash-card-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#A09E98;margin-bottom:10px}
.dash-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.dash-bar-lbl{font-size:9px;color:#5F5E5A;width:40px;flex-shrink:0}
.dash-bar-track{flex:1;height:6px;background:#F2F1ED;border-radius:3px;overflow:hidden}
.dash-bar-fill,.bar-animated{height:100%;border-radius:3px;transition:width 1.3s cubic-bezier(.4,0,.2,1);width:0}
.dash-bar-fill.in,.bar-animated.in{width:var(--bar-w) !important}
.dash-spec-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.dash-spec-av{width:22px;height:22px;border-radius:50%;background:#E8E7E2;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#5F5E5A}
.dash-spec-name{font-size:10px;font-weight:600;color:#0F0F0E;flex:1}
.dash-spec-val{font-size:10px;font-weight:700;color:var(--green)}

/* PROOF STRIP */
.proof-strip{background:var(--bg);border-bottom:.5px solid var(--border);padding:20px 48px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.proof-label{font-size:12px;color:var(--text-3);font-weight:500;margin-right:6px}
.proof-pill{font-size:12px;font-weight:600;color:var(--text-2);background:var(--surface);border:.5px solid var(--border);border-radius:99px;padding:5px 16px;cursor:default}


/* SECTIONS */
.section{padding:96px 48px}
.section-alt{background:var(--bg)}
.section-dark{background:var(--dark)}
.inner{max-width:var(--max);margin:0 auto}
.center{text-align:center}
.center .section-sub{margin-left:auto;margin-right:auto}
.eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--green);margin-bottom:14px}
.eyebrow-dark{color:#5DCAA5}
.section-title{font-family:var(--serif);font-size:clamp(28px,3.5vw,46px);line-height:1.15;color:var(--text);letter-spacing:-.015em;margin-bottom:16px;font-weight:600}
.section-title-dark{color:#fff}
.section-sub{font-size:17px;color:var(--text-2);line-height:1.75;max-width:560px;margin-bottom:56px;font-weight:400}
.section-sub-dark{color:rgba(255,255,255,.4)}

/* BENTO */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.bento-card{background:var(--surface);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:28px;transition:border-color .2s,box-shadow .2s,transform .2s;position:relative;overflow:hidden}
.bento-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(29,158,117,.05) 0%,transparent 60%);opacity:0;transition:opacity .3s}
.bento-card:hover{border-color:rgba(29,158,117,.4);box-shadow:0 8px 32px rgba(29,158,117,.09);transform:translateY(-3px)}
.bento-card:hover::before{opacity:1}
.bento-card.wide{grid-column:span 2}
.bento-icon{width:44px;height:44px;border-radius:12px;background:var(--green-light);margin-bottom:18px;display:flex;align-items:center;justify-content:center}
.bento-icon svg{width:20px;height:20px;stroke:var(--green-dark);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bento-h{font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px}
.bento-p{font-size:14px;color:var(--text-2);line-height:1.7}
.bento-funnel{margin-top:20px;display:flex;flex-direction:column;gap:5px}
.bf-row{display:flex;align-items:center;gap:10px}
.bf-lbl{font-size:11px;color:var(--text-2);width:52px;flex-shrink:0}
.bf-track{flex:1;height:28px;background:var(--bg);border-radius:5px;overflow:hidden}
.bf-fill{height:100%;border-radius:5px;display:flex;align-items:center;padding:0 10px;font-size:11px;font-weight:700;color:#fff;transition:width 1.3s cubic-bezier(.4,0,.2,1);width:0}
.bf-fill.in{width:var(--fw)}
.mini-board{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.mb-row{display:flex;align-items:center;gap:10px}
.mb-av{width:28px;height:28px;border-radius:50%;background:var(--bg);border:.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--text-2);flex-shrink:0}
.mb-name{flex:1;font-size:12px;font-weight:600;color:var(--text)}
.mb-rate{font-size:12px;font-weight:700;color:var(--green)}
.roi-bars{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.roi-row{display:flex;align-items:center;gap:10px}
.roi-lbl{font-size:11px;font-weight:600;color:var(--text);width:72px}
.roi-track{flex:1;height:8px;background:var(--bg);border-radius:4px;overflow:hidden}
.roi-fill{height:100%;border-radius:4px;transition:width 1.4s cubic-bezier(.4,0,.2,1);width:0}
.roi-fill.in{width:var(--rw)}
.roi-val{font-size:11px;font-weight:700;color:var(--text);width:36px;text-align:right}

/* SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split.flip{direction:rtl}
.split.flip > *{direction:ltr}
.split-visual{background:var(--bg);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:28px}
.split-bullets{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:20px}
.split-bullets li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text-2);line-height:1.6}
.split-check{width:20px;height:20px;border-radius:50%;background:var(--green-light);border:1.5px solid var(--green-mid);flex-shrink:0;margin-top:2px}

/* PLANS */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.plan{border:.5px solid var(--border);border-radius:var(--radius-lg);padding:32px 28px;background:var(--surface);position:relative;transition:box-shadow .2s,transform .2s}
.plan:hover{box-shadow:0 8px 32px rgba(0,0,0,.07);transform:translateY(-2px)}
.plan.featured{border:2px solid var(--green)}
.plan.featured:hover{box-shadow:0 8px 32px var(--green-glow)}
.plan-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:11px;font-weight:700;padding:4px 14px;border-radius:99px;white-space:nowrap}
.plan-name{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-bottom:16px}
.plan-price{font-family:var(--serif);font-size:44px;color:var(--text);line-height:1;margin-bottom:4px;font-weight:600}
.plan-price sup{font-size:22px;vertical-align:top;margin-top:8px;font-family:var(--sans);font-weight:700}
.plan-price sub{font-size:15px;font-family:var(--sans);font-weight:400;color:var(--text-3)}
.plan-sub{font-size:14px;color:var(--text-3);margin-bottom:24px;line-height:1.5}
.plan-divider{height:.5px;background:var(--border);margin:20px 0}
.plan-cta{display:block;width:100%;text-align:center;padding:11px;border-radius:var(--radius);font-size:15px;font-weight:600;cursor:pointer;border:none;font-family:var(--sans);transition:all .15s;margin-bottom:20px}
.plan-cta.dark{background:var(--text);color:#fff}
.plan-cta.dark:hover{background:#333}
.plan-cta.green{background:var(--green);color:#fff}
.plan-cta.green:hover{background:var(--green-dark)}
.plan-cta.outline{background:none;border:1px solid var(--border);color:var(--text)}
.plan-cta.outline:hover{border-color:var(--green);color:var(--green-dark)}
.plan-feat{font-size:14px;color:var(--text-2);margin-bottom:10px;display:flex;align-items:flex-start;gap:10px;line-height:1.45}
.plan-check{width:16px;height:16px;border-radius:50%;background:var(--green-light);flex-shrink:0;margin-top:2px}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:56px}
.step{padding:40px 32px;background:var(--surface);border:.5px solid var(--border);transition:background .2s;text-align:center}
.step:first-child{border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
.step:last-child{border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.step:hover{background:var(--bg)}
.step-num{width:48px;height:48px;border-radius:50%;border:2px solid var(--green);color:var(--green);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;margin:0 auto 20px;font-weight:600}
.step-h{font-size:17px;font-weight:700;color:var(--text);margin-bottom:10px}
.step-p{font-size:15px;color:var(--text-2);line-height:1.7}

/* FAQ */
.faq-list{max-width:700px;margin:56px auto 0}
.faq-item{border-bottom:.5px solid var(--border)}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:22px 0;font-size:16px;font-weight:600;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:var(--sans);gap:16px;transition:color .15s}
.faq-q:hover{color:var(--green-dark)}
.faq-icon{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-3);line-height:1;transition:all .2s}
.faq-q.open .faq-icon{background:var(--green);border-color:var(--green);color:#fff;transform:rotate(45deg)}
.faq-a{font-size:15px;color:var(--text-2);line-height:1.8;padding-bottom:22px;display:none}
.faq-a.open{display:block}

/* CTA STRIP */
.cta-strip{background:var(--dark);padding:96px 48px;text-align:center;position:relative;overflow:hidden}
.cta-strip::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(29,158,117,.18) 0%,transparent 65%)}
.cta-strip-inner{max-width:640px;margin:0 auto;position:relative}
.cta-strip h2{font-family:var(--serif);font-size:clamp(28px,3.5vw,46px);color:#fff;margin-bottom:16px;letter-spacing:-.015em;font-weight:600}
.cta-strip p{font-size:17px;color:rgba(255,255,255,.4);margin-bottom:36px;line-height:1.65}
.cta-actions{display:flex;align-items:center;justify-content:center;gap:14px}

/* SUBSCRIBE */
.subscribe-strip{background:var(--green-light);border-top:.5px solid var(--green-mid);border-bottom:.5px solid var(--green-mid);padding:52px 48px;text-align:center}
.subscribe-strip h3{font-family:var(--serif);font-size:28px;color:var(--green-dark);margin-bottom:8px;font-weight:600}
.subscribe-strip p{font-size:15px;color:var(--green-dark);opacity:.65;margin-bottom:24px}
.subscribe-form{display:flex;gap:10px;max-width:500px;margin:0 auto}
.sub-input{flex:1;padding:11px 16px;border:1.5px solid var(--green-mid);border-radius:9px;font-size:15px;font-family:var(--sans);background:#fff;outline:none;color:var(--text);transition:border-color .15s}
.sub-input:focus{border-color:var(--green)}
.sub-input::placeholder{color:var(--text-3)}
.sub-btn{padding:11px 22px;background:var(--green);color:#fff;border:none;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--sans);white-space:nowrap;transition:background .15s}
.sub-btn:hover{background:var(--green-dark)}
.subscribe-note{font-size:12px;color:var(--green-dark);opacity:.5;margin-top:12px}

/* DEMO FORM */
.demo-grid{display:grid;grid-template-columns:1fr 420px;gap:72px;align-items:start}
.demo-proof{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.demo-proof-item{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text-2);line-height:1.6}
.demo-proof-check{width:20px;height:20px;border-radius:50%;background:var(--green-light);border:1.5px solid var(--green-mid);flex-shrink:0;margin-top:2px}
.demo-form-card{background:var(--bg);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-field{margin-bottom:16px}
.form-label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2);margin-bottom:6px}
.form-input,.form-select{width:100%;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);font-size:15px;color:var(--text);font-family:var(--sans);outline:none;transition:border-color .15s,box-shadow .15s}
.form-input:focus,.form-select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(29,158,117,.12)}
.form-input::placeholder{color:var(--text-3)}
.form-submit{width:100%;padding:13px;background:var(--green);color:#fff;border:none;border-radius:var(--radius);font-size:16px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:background .15s;margin-top:6px}
.form-submit:hover{background:var(--green-dark)}
.form-submit:disabled{opacity:.6;cursor:not-allowed}
.form-note{font-size:13px;color:var(--text-3);text-align:center;margin-top:12px;line-height:1.5}
.form-success{text-align:center;padding:36px 0}
.form-success-icon{width:56px;height:56px;border-radius:50%;background:var(--green-light);border:2px solid var(--green-mid);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.form-success-h{font-size:20px;font-weight:700;margin-bottom:8px;color:var(--text)}
.form-success-p{font-size:15px;color:var(--text-2);line-height:1.6}

/* BLOG */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.blog-card{border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);transition:border-color .15s,box-shadow .15s,transform .2s;cursor:pointer;display:block}
.blog-card:hover{border-color:var(--green-mid);box-shadow:0 6px 24px rgba(0,0,0,.07);transform:translateY(-3px)}
.blog-card-img{height:180px;background:var(--green-light)}
.blog-card-body{padding:22px}
.blog-card-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--green);margin-bottom:8px}
.blog-card-h{font-size:17px;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.35;font-family:var(--serif)}
.blog-card-p{font-size:14px;color:var(--text-2);line-height:1.65;margin-bottom:14px}
.blog-card-meta{font-size:13px;color:var(--text-3)}
.blog-coming{text-align:center;padding:80px 40px;border:.5px dashed var(--border);border-radius:var(--radius-lg);margin-top:48px;background:var(--bg)}
.blog-coming-icon{width:64px;height:64px;border-radius:50%;background:var(--green-light);border:2px solid var(--green-mid);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.blog-coming-h{font-size:22px;font-weight:700;color:var(--text);margin-bottom:10px}
.blog-coming-p{font-size:15px;color:var(--text-2);line-height:1.7;margin-bottom:28px;max-width:480px;margin-left:auto;margin-right:auto}

/* ABOUT STATS */
.about-stat-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:28px;margin-bottom:16px;transition:border-color .2s,background .2s}
.about-stat-card:last-child{margin-bottom:0}
.about-stat-card:hover{border-color:rgba(29,158,117,.3);background:rgba(29,158,117,.05)}
.about-stat-num{font-family:var(--serif);font-size:44px;color:#fff;line-height:1;margin-bottom:8px;font-weight:600}
.about-stat-num.green{color:var(--green)}
.about-stat-lbl{font-size:14px;color:rgba(255,255,255,.4);line-height:1.5}

/* FEATURES VISUALS */
.funnel-visual{display:flex;flex-direction:column;gap:6px}
.funnel-step{border-radius:7px;padding:11px 16px;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600}
.leaderboard-visual{display:flex;flex-direction:column;gap:0}
.lb-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:.5px solid var(--border)}
.lb-row:last-child{border-bottom:none}
.lb-av{width:32px;height:32px;border-radius:50%;background:var(--bg);border:.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--text-2);flex-shrink:0}
.lb-name{flex:1;font-size:14px;font-weight:600;color:var(--text)}
.lb-type{font-size:12px;color:var(--text-3)}
.lb-rate{font-size:14px;font-weight:700;color:var(--green)}
.roi-visual{display:flex;flex-direction:column;gap:14px}
.roi-visual-row{display:flex;align-items:center;gap:12px}
.roi-visual-lbl{font-size:13px;font-weight:600;color:var(--text);width:80px;flex-shrink:0}
.roi-visual-track{flex:1;height:10px;background:var(--bg);border-radius:5px;overflow:hidden}
.roi-visual-fill{height:100%;border-radius:5px;transition:width 1.4s cubic-bezier(.4,0,.2,1);width:0}
.roi-visual-fill.in{width:var(--rw)}
.roi-visual-val{font-size:13px;font-weight:700;color:var(--text);width:40px;text-align:right}

/* FOOTER */
.footer{background:var(--dark);padding:64px 48px 40px}
.footer-inner{max-width:var(--max);margin:0 auto}
.footer-top{display:grid;grid-template-columns:280px 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:.5px solid rgba(255,255,255,.07);margin-bottom:32px}
.footer-brand-name{font-size:15px;font-weight:700;color:#fff;margin:12px 0 8px}
.footer-brand-sub{font-size:14px;color:rgba(255,255,255,.28);line-height:1.65}
.footer-col-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.24);margin-bottom:16px}
.footer-links{display:flex;flex-direction:column;gap:11px}
.footer-links a{font-size:14px;color:rgba(255,255,255,.42);transition:color .12s}
.footer-links a:hover{color:rgba(255,255,255,.85)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between}
.footer-copy{font-size:13px;color:rgba(255,255,255,.2)}
.footer-legal{display:flex;gap:20px}
.footer-legal a{font-size:13px;color:rgba(255,255,255,.2);transition:color .12s}
.footer-legal a:hover{color:rgba(255,255,255,.5)}

/* LEGAL */
.legal-wrap{max-width:720px;margin:0 auto;padding:64px 48px 88px}
.legal-wrap h1{font-family:var(--serif);font-size:42px;margin-bottom:8px;font-weight:600}
.legal-date{font-size:14px;color:var(--text-3);margin-bottom:44px;display:block}
.legal-wrap h2{font-size:20px;font-weight:700;margin:40px 0 12px;color:var(--text)}
.legal-wrap p,.legal-wrap li{font-size:16px;color:var(--text-2);line-height:1.8;margin-bottom:14px}
.legal-wrap ul{margin:0 0 18px 24px}
.legal-wrap a{color:var(--green)}
.legal-wrap a:hover{text-decoration:underline}
.legal-divider{height:.5px;background:var(--border);margin:56px 0}

/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.reveal.in{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* RESPONSIVE */
@media (max-width:900px){
  .nav{padding:0 24px}
  .nav-links{display:none}
  .hero{padding:100px 24px 0}
  .hero-stats{flex-direction:column;gap:24px}
  .hero-stat{border-right:none;padding:0}
  .hero-dash{grid-template-columns:1fr}
  .dash-sidebar{display:none}
  .dash-kpi-row{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:1fr}
  .bento-card.wide{grid-column:span 1}
  .steps{grid-template-columns:1fr;gap:0}
  .step:first-child{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .step:last-child{border-radius:0 0 var(--radius-lg) var(--radius-lg)}
  .split,.split.flip{grid-template-columns:1fr;direction:ltr;gap:36px}
  .plans{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}
  .demo-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .subscribe-form{flex-direction:column}
  .section{padding:64px 24px}
  .proof-strip{padding:20px 24px}
  .page-hero{padding:120px 24px 64px}
}

/* ── SHARED INNER PAGE STYLES ─────────────────────────────── */
.page-hero {
  background: #080C10; padding: 140px 48px 80px;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(29,158,117,.15) 0%, transparent 60%);
}
.page-hero-inner { max-width: 700px; margin: 0 auto; text-align: center; position: relative; }
.page-hero h1 { font-family: 'Lora',Georgia,serif; font-size: clamp(34px,5vw,56px); color: #fff; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 18px; }
.page-hero h1 em { font-style: italic; color: #1D9E75; }
.page-hero p { font-size: 17px; color: rgba(255,255,255,.44); line-height: 1.7; max-width: 520px; margin: 0 auto; }

/* ── FEATURE SPLIT SECTIONS ───────────────────────────────── */
.feat-section { padding: 80px 48px; }
.feat-section:nth-child(even) { background: #F8F7F3; }
.feat-inner { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.feat-inner.flip { direction: rtl; }
.feat-inner.flip > * { direction: ltr; }
.feat-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: #1D9E75; margin-bottom: 14px; }
.feat-h { font-family: 'Lora',Georgia,serif; font-size: 32px; color: #0D0F0E; line-height: 1.2; margin-bottom: 14px; letter-spacing: -.02em; }
.feat-p { font-size: 15px; color: #4A4A47; line-height: 1.75; margin-bottom: 20px; }
.feat-bullets { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.feat-bullets li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: #4A4A47; line-height: 1.5; }
.feat-check { width: 20px; height: 20px; border-radius: 50%; background: #E1F5EE; border: 1.5px solid #9FE1CB; flex-shrink: 0; margin-top: 2px; }
.mock-panel { background: #fff; border: .5px solid #E4E3DC; border-radius: 16px; padding: 24px; }

/* Funnel in mock panels */
.funnel-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.funnel-label { font-size: 12px; color: #5F5E5A; width: 52px; flex-shrink: 0; }
.funnel-track { flex: 1; height: 32px; background: #F8F7F3; border-radius: 6px; overflow: hidden; }
.funnel-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding: 0 12px; font-size: 12px; font-weight: 700; color: #fff; transition: width 1.3s cubic-bezier(.4,0,.2,1); width: 0; }
.funnel-fill.in { width: var(--fw); }
.funnel-drop { font-size: 11px; color: #E24B4A; padding: 0 0 8px 64px; }

/* Leaderboard */
.lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: .5px solid #F2F1ED; }
.lb-row:last-child { border-bottom: none; }
.lb-rank { font-size: 13px; font-weight: 700; color: #D3D1C7; width: 20px; flex-shrink: 0; }
.lb-av { width: 32px; height: 32px; border-radius: 50%; background: #E8E7E2; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #5F5E5A; flex-shrink: 0; }
.lb-name { flex: 1; }
.lb-name-main { font-size: 13px; font-weight: 600; color: #0D0F0E; }
.lb-name-sub  { font-size: 11px; color: #9A9994; }
.lb-stats { display: flex; gap: 20px; }
.lb-stat { text-align: right; }
.lb-stat-val { font-size: 13px; font-weight: 700; color: #1D9E75; }
.lb-stat-lbl { font-size: 10px; color: #9A9994; }

/* ROI bars in mock panels */
.roi-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.roi-source { font-size: 12px; font-weight: 600; color: #0D0F0E; width: 68px; flex-shrink: 0; }
.roi-track { flex: 1; height: 10px; background: #F8F7F3; border-radius: 5px; overflow: hidden; }
.roi-fill { height: 100%; border-radius: 5px; transition: width 1.4s cubic-bezier(.4,0,.2,1); width: 0; }
.roi-fill.in { width: var(--rw); }
.roi-val { font-size: 12px; font-weight: 700; color: #0D0F0E; width: 40px; text-align: right; }

/* Dark feature cards */
.dark-feat-card { background: rgba(255,255,255,.04); border: .5px solid rgba(255,255,255,.1); border-radius: 14px; padding: 28px; transition: background .2s, border-color .2s; }
.dark-feat-card:hover { background: rgba(29,158,117,.08); border-color: rgba(29,158,117,.3); }
.dark-feat-icon { width: 40px; height: 40px; background: rgba(29,158,117,.2); border-radius: 10px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; }
.dark-feat-h { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.dark-feat-p { font-size: 13px; color: rgba(255,255,255,.44); line-height: 1.65; }

/* ── PRICING PAGE ─────────────────────────────────────────── */
.pricing-plans { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 48px; max-width: 1000px; margin-left: auto; margin-right: auto; }
.pricing-plan { background: #fff; border: .5px solid #E4E3DC; border-radius: 16px; padding: 32px 28px; position: relative; transition: box-shadow .2s, transform .2s; }
.pricing-plan:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08); transform: translateY(-3px); }
.pricing-plan.featured { border: 2px solid #1D9E75; }
.pricing-plan.featured:hover { box-shadow: 0 8px 32px rgba(29,158,117,.2); }
.plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: #1D9E75; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 16px; border-radius: 99px; white-space: nowrap; }
.plan-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #9A9994; margin-bottom: 16px; }
.plan-price { font-family: 'Lora',Georgia,serif; font-size: 48px; color: #0D0F0E; line-height: 1; margin-bottom: 4px; }
.plan-price sup { font-size: 22px; vertical-align: top; margin-top: 10px; font-family: 'DM Sans',sans-serif; font-weight: 600; }
.plan-price sub { font-size: 15px; font-family: 'DM Sans',sans-serif; font-weight: 400; color: #9A9994; }
.plan-tagline { font-size: 13px; color: #9A9994; margin-bottom: 24px; }
.plan-btn { display: block; width: 100%; text-align: center; padding: 11px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; font-family: 'DM Sans',sans-serif; transition: all .15s; margin-bottom: 22px; }
.plan-btn.dark { background: #0D0F0E; color: #fff; }
.plan-btn.dark:hover { background: #333; }
.plan-btn.green { background: #1D9E75; color: #fff; }
.plan-btn.green:hover { background: #0F6E56; }
.plan-divider { height: .5px; background: #E4E3DC; margin: 0 0 18px; }
.plan-feat { font-size: 13px; color: #4A4A47; margin-bottom: 9px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.plan-feat-check { width: 16px; height: 16px; border-radius: 50%; background: #E1F5EE; border: 1.5px solid #9FE1CB; flex-shrink: 0; margin-top: 1px; }

/* ── ABOUT PAGE ───────────────────────────────────────────── */
.about-stat-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 24px; margin-bottom: 16px; }
.about-stat-num { font-family: 'Lora',Georgia,serif; font-size: 44px; color: #fff; line-height: 1; margin-bottom: 6px; }
.about-stat-lbl { font-size: 13px; color: rgba(255,255,255,.38); line-height: 1.5; }

/* ── DEMO PAGE ────────────────────────────────────────────── */
.demo-page-grid { display: grid; grid-template-columns: 1fr 440px; gap: 72px; align-items: start; max-width: 1060px; margin: 0 auto; }
.demo-proof-item { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: #4A4A47; line-height: 1.6; margin-bottom: 14px; }
.demo-check { width: 22px; height: 22px; border-radius: 50%; background: #E1F5EE; border: 1.5px solid #9FE1CB; flex-shrink: 0; margin-top: 2px; }
.demo-form-wrap { background: #F8F7F3; border: .5px solid #E4E3DC; border-radius: 16px; padding: 32px; }
.form-field { margin-bottom: 16px; }
.form-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #4A4A47; margin-bottom: 7px; }
.form-input, .form-select { width: 100%; padding: 11px 14px; background: #fff; border: 1px solid #E4E3DC; border-radius: 9px; font-size: 14px; color: #0D0F0E; font-family: 'DM Sans',sans-serif; outline: none; transition: border-color .15s; }
.form-input:focus, .form-select:focus { border-color: #1D9E75; box-shadow: 0 0 0 3px rgba(29,158,117,.1); }
.form-input::placeholder { color: #9A9994; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-submit { width: 100%; padding: 13px; background: #1D9E75; color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: 'DM Sans',sans-serif; transition: background .15s; margin-top: 6px; }
.form-submit:hover { background: #0F6E56; }
.form-note { font-size: 12px; color: #9A9994; text-align: center; margin-top: 12px; line-height: 1.5; }
.form-success { text-align: center; padding: 32px 0; }
.form-success-icon { width: 56px; height: 56px; border-radius: 50%; background: #E1F5EE; border: 2px solid #9FE1CB; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.form-success-h { font-family: 'Lora',Georgia,serif; font-size: 22px; margin-bottom: 8px; color: #0D0F0E; }
.form-success-p { font-size: 14px; color: #4A4A47; line-height: 1.65; }

@media(max-width:900px){
  .feat-section { padding: 56px 24px; }
  .feat-inner, .feat-inner.flip { grid-template-columns: 1fr; direction: ltr; gap: 36px; }
  .page-hero { padding: 120px 24px 60px; }
  .pricing-plans { grid-template-columns: 1fr; max-width: 440px; }
  .demo-page-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ── CUSTOM SELECT DROPDOWN ──────────────────────────────── */
.fhb-select-wrap{position:relative;width:100%}
.fhb-select-trigger{
  width:100%;padding:11px 40px 11px 14px;background:#fff;
  border:1px solid #E4E3DC;border-radius:9px;font-size:14px;
  color:#0D0F0E;font-family:'DM Sans',sans-serif;outline:none;
  cursor:pointer;text-align:left;display:flex;align-items:center;
  justify-content:space-between;transition:border-color .15s;
  appearance:none;-webkit-appearance:none;position:relative;
}
.fhb-select-trigger:focus,.fhb-select-trigger.open{
  border-color:#1D9E75;box-shadow:0 0 0 3px rgba(29,158,117,.1)
}
.fhb-select-trigger .fhb-select-val{flex:1;color:#0D0F0E}
.fhb-select-trigger .fhb-select-val.placeholder{color:#9A9994}
.fhb-select-arrow{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:#9A9994;transition:transform .2s;
}
.fhb-select-trigger.open .fhb-select-arrow{transform:translateY(-50%) rotate(180deg)}
.fhb-select-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:#fff;border:1px solid #E4E3DC;border-radius:9px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:400;
  overflow:hidden;max-height:220px;overflow-y:auto;display:none;
}
.fhb-select-dropdown.open{display:block}
.fhb-select-option{
  padding:10px 14px;font-size:14px;color:#4A4A47;
  cursor:pointer;transition:background .1s;display:flex;
  align-items:center;gap:8px;
}
.fhb-select-option:hover{background:#F8F7F3;color:#0D0F0E}
.fhb-select-option.selected{background:#E1F5EE;color:#0F6E56;font-weight:600}
.fhb-select-option.placeholder-opt{color:#9A9994;font-style:italic}