:root{--bg:#F8F5EC;--card:#FCFAF2;--card2:#F1EAD6;--border:rgba(20,25,20,0.10);
--green:#1BAA53;--green-dk:#0E7A57;--green-glow:rgba(27,170,83,0.16);
--text:#16201C;--muted:#5C685F;--faint:rgba(22,32,28,0.62);
--radius:16px;--radius-sm:10px}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;
font-size:17px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-weight:400}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;outline:none}
::selection{background:var(--green);color:#fff}

.display{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;line-height:1.12;letter-spacing:-0.015em;color:var(--text)}
.h2{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;line-height:1.2;color:var(--text)}
.label{font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--green-dk)}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:100px 0}
@media(max-width:768px){section{padding:64px 0}}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 24px;
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
background:rgba(13,17,23,0.85);backdrop-filter:blur(20px);
border-bottom:1px solid var(--border)}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.2rem;justify-self:start}
.nav-links{display:flex;align-items:center;gap:32px;font-size:0.88rem;color:var(--muted)}
.nav-links a:hover{color:var(--text);transition:color 0.2s}
.nav-cta{background:var(--green);color:#000;padding:9px 20px;border-radius:999px;
font-weight:600;font-size:0.85rem;transition:opacity 0.2s,transform 0.2s}
.nav-cta:hover{opacity:0.88;transform:translateY(-1px)}
@media(max-width:640px){.nav-links{display:none}}

/* HERO */
.hero{padding:140px 0 70px;position:relative;overflow:hidden;display:flex;align-items:center}
.hero-glow{position:absolute;top:-200px;left:50%;transform:translateX(-50%);
width:900px;height:600px;
background:radial-gradient(ellipse at center,var(--green-glow) 0%,transparent 65%);
pointer-events:none;animation:glow-breathe 6s ease-in-out infinite}
@keyframes glow-breathe{0%,100%{opacity:0.6;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
.hero-inner{display:grid;grid-template-columns:1fr 420px;
grid-template-areas:"headline visual" "subhead visual" "action visual";
column-gap:64px;row-gap:0;align-items:start;position:relative;z-index:2}
.hero-inner>*{min-width:0}
.hero-headline{grid-area:headline}
.hero-subhead{grid-area:subhead;margin-bottom:40px}
.hero-action{grid-area:action}
.hero-visual-stage{grid-area:visual}
/* Mobile: headline → live demo → subhead → ask. Gets to the "wow" in one
   line instead of six, and the demo now acts as the concrete example that
   the subhead's list (fee reminders, attendance alerts...) generalizes
   from, instead of an abstract list the visitor reads before seeing proof. */
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;
grid-template-areas:"headline" "visual" "subhead" "action";gap:32px}
.hero-subhead{margin-bottom:0}}

.hero-visual-stage{position:relative;perspective:1200px}
.float-badge{position:absolute;z-index:5;display:flex;align-items:center;gap:8px;
padding:10px 16px;border-radius:999px;font-size:0.82rem;font-weight:600;color:var(--text);
background:linear-gradient(155deg,#FDFBF4,#F1EAD6);
box-shadow:0 16px 32px -10px rgba(22,32,28,.22),inset 0 1px 0 rgba(255,255,255,.9);
border:1px solid var(--border);
animation:float-bob 4.5s ease-in-out infinite}
.fb-1{top:-6%;right:-9%;animation-delay:0s}
.fb-2{bottom:-6%;left:-11%;animation-delay:1.4s}
.hero-visual-stage{margin:2px 20px 70px}
@media(max-width:900px){.float-badge{display:none}}
@keyframes float-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}

.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;
background:rgba(27,170,83,0.1);border:1px solid rgba(27,170,83,0.25);
border-radius:999px;padding:6px 14px;font-size:0.78rem;font-weight:600;
color:var(--green);margin-bottom:28px}
.hero-eyebrow .blink{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 1.4s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.hero-title{font-size:clamp(2rem,1.2rem + 5vw,4.8rem);margin-bottom:24px;overflow-wrap:break-word}
.hero-title .accent{color:var(--green)}
.hero-sub{font-size:1.15rem;color:var(--faint);max-width:520px;line-height:1.7}

.hero-form{display:flex;gap:12px;flex-wrap:wrap}
.hero-form input{flex:1;min-width:220px;background:var(--card);border:1px solid var(--border);
border-radius:999px;padding:14px 22px;font-size:1rem;color:var(--text);transition:border-color 0.2s}
.hero-form input::placeholder{color:var(--muted)}
.hero-form input:focus{outline:none;border-color:var(--green)}
.hero-form button{background:var(--green);color:#000;border-radius:999px;
padding:14px 28px;font-size:0.95rem;font-weight:700;transition:all 0.2s;white-space:nowrap}
.hero-form button:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(27,170,83,0.3)}
.hero-note{margin-top:14px;font-size:0.78rem;color:var(--muted)}

.hero-stats{display:flex;gap:32px;margin-top:48px;flex-wrap:wrap}
.stat-num{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.8rem}
.stat-label{font-size:0.78rem;color:var(--muted)}
.stat{display:flex;flex-direction:column;gap:2px}

/* CHAT */
.phone-hand-scene{position:relative;margin-bottom:80px}
@media(max-width:900px){.phone-hand-scene{margin-bottom:0}}
.phone-hero-wrap{position:relative;z-index:2;padding:16px 14px 30px;
background:linear-gradient(160deg,#20261F 0%,#0F1310 100%);border-radius:40px;
box-shadow:0 40px 90px -24px rgba(15,20,15,.5),inset 0 2px 0 rgba(255,255,255,.06)}
.phone-hero-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);
width:88px;height:20px;background:#0A0C0A;border-radius:0 0 14px 14px;z-index:3}
.phone-hero-home{position:absolute;bottom:11px;left:50%;transform:translateX(-50%);
width:104px;height:4px;border-radius:4px;background:rgba(255,255,255,.22)}
.hand-palm{position:absolute;left:50%;bottom:-62px;transform:translateX(-50%);
width:270px;height:130px;z-index:1;
background:radial-gradient(120% 100% at 50% 0%,#E9B78C 0%,#D89968 70%,#C7854F 100%);
border-radius:48% 48% 42% 42%/62% 62% 38% 38%}
.hand-fingers{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);
display:flex;gap:11px;z-index:1;pointer-events:none}
.hand-fingers span{width:29px;height:46px;border-radius:15px;
background:linear-gradient(165deg,#EFC299,#D89968);
box-shadow:inset 0 -6px 8px rgba(120,70,30,.22)}
.hand-fingers span:nth-child(1){height:38px}
.hand-fingers span:nth-child(4){height:38px}
.hand-thumb{position:absolute;right:-18px;bottom:36px;width:34px;height:70px;
border-radius:17px;transform:rotate(-16deg);z-index:1;
background:linear-gradient(165deg,#EFC299,#D89968);
box-shadow:inset 0 -6px 8px rgba(120,70,30,.22)}
@media(max-width:900px){.hand-palm,.hand-fingers,.hand-thumb{display:none}
.phone-hero-wrap{padding:14px 12px 26px;border-radius:32px}}
.chat-mockup{background:var(--card);border-radius:24px;overflow:hidden;
border:1px solid var(--border);box-shadow:0 30px 70px rgba(22,32,28,0.14)}
.chat-header{background:var(--green-dk);padding:16px 18px;display:flex;align-items:center;gap:12px}
.chat-avatar{width:40px;height:40px;border-radius:50%;background:#0A5C41;
display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.chat-name{font-weight:700;font-size:0.92rem;color:#fff}
.chat-status-text{font-size:0.72rem;color:rgba(255,255,255,0.75)}
.chat-body{padding:18px;background:#E9F2EB;min-height:460px;display:flex;flex-direction:column;gap:10px}
.chat-body::-webkit-scrollbar{width:5px}
.chat-body::-webkit-scrollbar-thumb{background:rgba(22,32,28,.18);border-radius:3px}
.msg{max-width:82%;padding:10px 14px;border-radius:12px;font-size:0.88rem;line-height:1.55;
animation:msg-in 0.35s cubic-bezier(0.34,1.4,0.64,1) forwards;opacity:0;box-shadow:0 1px 2px rgba(22,32,28,.08)}
@keyframes msg-in{from{opacity:0;transform:translateY(10px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.msg-them{background:#FFFFFF;color:#16201C;align-self:flex-start;border-bottom-left-radius:4px}
.msg-us{background:#D4F3DC;color:#0F2A1B;align-self:flex-end;border-bottom-right-radius:4px;font-weight:500}
.msg-time{font-size:0.68rem;opacity:0.55;text-align:right;margin-top:4px}
.msg-tick{color:#1B93E0;font-size:0.72rem}
.typing-indicator{display:flex;gap:4px;align-items:center;background:#FFFFFF;
padding:10px 14px;border-radius:12px;border-bottom-left-radius:4px;align-self:flex-start;width:56px;
box-shadow:0 1px 2px rgba(22,32,28,.08)}
.typing-indicator span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:typing 1.2s ease-in-out infinite}
.typing-indicator span:nth-child(2){animation-delay:0.2s}
.typing-indicator span:nth-child(3){animation-delay:0.4s}
@keyframes typing{0%,100%{transform:translateY(0);opacity:0.4}50%{transform:translateY(-5px);opacity:1}}

/* TRUST BAR */
.trust-bar{padding:32px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--card)}
.trust-bar-inner{display:flex;align-items:center;gap:48px;flex-wrap:wrap;justify-content:center}
.trust-item{display:flex;align-items:center;gap:10px;font-size:0.82rem;color:var(--muted)}
.trust-icon{width:34px;height:34px;border-radius:9px;
background:linear-gradient(155deg,#EAFBEF 0%,#CDEFD8 100%);
box-shadow:0 6px 14px -4px rgba(27,170,83,.3),inset 0 1px 0 rgba(255,255,255,.9);
display:flex;align-items:center;justify-content:center;font-size:1.05rem}

/* STEPS */
.problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:48px}
.problem-item{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--border);
border-radius:var(--radius-sm);padding:20px}
.problem-ic{font-size:1.1rem;flex-shrink:0}
.problem-item strong{display:block;font-size:0.95rem;margin-bottom:4px}
.problem-item span{font-size:0.85rem;color:var(--muted);line-height:1.55}

.roi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:48px}
.roi-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;text-align:center}
.roi-num{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:2.1rem;color:var(--green-dk);margin-bottom:6px}
.roi-label{font-size:0.85rem;color:var(--muted)}
.roi-note{text-align:center;font-size:0.78rem;color:var(--faint);margin-top:28px;font-style:italic}

.case-wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:48px;border:1px solid var(--border);
border-radius:var(--radius);overflow:hidden}
@media(max-width:768px){.case-wrap{grid-template-columns:1fr}}
.case-col{padding:32px}
.case-col.before{background:var(--card2)}
.case-col.after{background:linear-gradient(160deg,rgba(27,170,83,.08),var(--card) 70%)}
.case-col-label{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:0.8rem;
text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;display:block}
.case-col.before .case-col-label{color:var(--muted)}
.case-col.after .case-col-label{color:var(--green-dk)}
.case-row{display:flex;gap:10px;align-items:flex-start;font-size:0.88rem;margin-bottom:14px;line-height:1.5}
.case-row:last-child{margin-bottom:0}

.faq-item{border-bottom:1px solid var(--border);padding:20px 0}
.faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;
font-weight:600;font-size:0.98rem;gap:16px}
.faq-q .faq-arrow{transition:transform 0.2s;flex-shrink:0;color:var(--green-dk)}
.faq-item.open .faq-arrow{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.25s ease}
.faq-item.open .faq-a{max-height:300px}
.faq-a p{padding-top:12px;font-size:0.88rem;color:var(--muted);line-height:1.65}

.founder-wrap{display:flex;gap:32px;align-items:flex-start;max-width:760px;margin:48px auto 0}
@media(max-width:640px){.founder-wrap{flex-direction:column;align-items:center;text-align:center}}
.founder-av{width:64px;height:64px;border-radius:50%;background:var(--green-dk);color:#fff;flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem}
.founder-text p{font-size:0.95rem;color:var(--muted);line-height:1.75;margin-bottom:12px}
.founder-sign{font-weight:700;font-size:0.9rem;color:var(--text);margin-top:8px}

.sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:90;background:rgba(13,17,23,0.94);
backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,0.08);padding:12px 16px;
display:none;align-items:center;gap:10px;transform:translateY(100%);transition:transform 0.3s ease}
.sticky-cta.show{display:flex;transform:translateY(0)}
.sticky-cta a,.sticky-cta button{flex:1;text-align:center;padding:12px;border-radius:999px;font-size:0.85rem;font-weight:600}
.sticky-cta .sc-primary{background:var(--green);color:#000}
.sticky-cta .sc-secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.25)}
@media(min-width:769px){.sticky-cta{left:auto;right:24px;bottom:24px;width:300px;border-radius:var(--radius);border:1px solid var(--border)}}

.exit-modal-overlay{position:fixed;inset:0;background:rgba(10,12,10,0.6);z-index:200;
display:none;align-items:center;justify-content:center;padding:20px}
.exit-modal-overlay.show{display:flex}
.exit-modal{background:var(--card);border-radius:var(--radius);padding:36px 32px;max-width:420px;width:100%;
position:relative;text-align:center}
.exit-modal-close{position:absolute;top:14px;right:16px;font-size:1.3rem;color:var(--muted);cursor:pointer;background:none}
.exit-modal h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.3rem;margin-bottom:10px}
.exit-modal p{color:var(--muted);font-size:0.9rem;margin-bottom:20px}
.exit-modal input{width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);
background:var(--bg);font-size:0.9rem;margin-bottom:10px}
.exit-modal form button{width:100%;padding:12px;border-radius:999px;background:var(--green);color:#000;font-weight:600}

.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
@media(max-width:768px){.steps-grid{grid-template-columns:1fr}}
.step-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
padding:32px;transition:border-color 0.25s,transform 0.25s}
.step-card:hover{border-color:rgba(27,170,83,0.3);transform:translateY(-4px)}
.step-num{font-family:'Plus Jakarta Sans',sans-serif;font-size:3rem;font-weight:800;
color:rgba(14,122,87,0.32);line-height:1;margin-bottom:16px;
-webkit-text-stroke:1px rgba(14,122,87,0.15)}
.step-icon{width:52px;height:52px;border-radius:14px;font-size:1.5rem;margin-bottom:18px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(155deg,#EAFBEF 0%,#CDEFD8 100%);
box-shadow:0 10px 20px -6px rgba(27,170,83,.35),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 6px rgba(27,170,83,.15);
transform:perspective(400px) rotateX(6deg)}
.step-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.15rem;margin-bottom:10px}
.step-body{font-size:0.88rem;color:var(--muted);line-height:1.65}

/* USE CASES */
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}
.tab-btn{padding:9px 20px;border-radius:999px;font-size:0.85rem;font-weight:500;
border:1px solid var(--border);background:transparent;color:var(--muted);transition:all 0.2s;cursor:pointer}
.tab-btn.active,.tab-btn:hover{background:rgba(27,170,83,0.1);border-color:rgba(27,170,83,0.4);color:var(--text)}

.use-case-panel{display:none;animation:fade-up 0.4s ease forwards}
.use-case-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:768px){.use-case-panel.active{grid-template-columns:1fr}}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.uc-badge{display:inline-block;background:rgba(27,170,83,0.1);border:1px solid rgba(27,170,83,0.2);
color:var(--green);font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
padding:5px 12px;border-radius:999px;margin-bottom:20px}
.uc-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(1.4rem,1rem + 2vw,2.2rem);font-weight:800;margin-bottom:16px;overflow-wrap:break-word}
.uc-desc{color:var(--muted);margin-bottom:32px;line-height:1.7}
.uc-list{display:flex;flex-direction:column;gap:14px}
.uc-item{display:flex;align-items:flex-start;gap:12px;font-size:0.9rem}
.uc-chk{width:22px;height:22px;border-radius:6px;background:rgba(27,170,83,0.15);color:var(--green);
display:flex;align-items:center;justify-content:center;font-size:0.75rem;flex-shrink:0;margin-top:1px}
.uc-item strong{display:block;color:var(--text);margin-bottom:2px}
.uc-item span{color:var(--muted);font-size:0.82rem}

.phone-frame{width:280px;max-width:100%;margin:0 auto;background:linear-gradient(160deg,#232A26,#0F1512);border-radius:36px;padding:16px 12px;
border:1px solid rgba(0,0,0,.35);box-shadow:0 30px 60px rgba(22,32,28,.28),0 2px 0 rgba(255,255,255,.06) inset;
transform-style:preserve-3d}
@media(max-width:360px){.phone-frame{width:100%}}
.phone-notch{width:100px;height:8px;background:#0A0F0C;border-radius:999px;margin:0 auto 14px}
.phone-msgs{display:flex;flex-direction:column;gap:8px;padding:12px 8px;background:#E9F2EB;border-radius:20px;min-height:420px}
.pm{padding:8px 12px;border-radius:10px;font-size:0.78rem;line-height:1.45;max-width:90%;box-shadow:0 1px 2px rgba(22,32,28,.08)}
.pm.them{background:#FFFFFF;color:#16201C;align-self:flex-start;border-bottom-left-radius:3px}
.pm.us{background:#D4F3DC;color:#0F2A1B;align-self:flex-end;border-bottom-right-radius:3px;font-weight:500}
.pm-time{font-size:0.6rem;opacity:0.55;text-align:right;margin-top:3px}

/* INTERACTIVE PHONE — WhatsApp-authentic stacked buttons, finger cue, impact panel */
.pm-quick-replies,.msg-quick-replies{display:flex;flex-direction:column;margin-top:-4px;
align-self:flex-start;background:#FFFFFF;border-radius:0 12px 12px 12px;overflow:hidden;
box-shadow:0 1px 2px rgba(22,32,28,.08)}
.msg-quick-replies{max-width:82%}
.pm-quick-replies{max-width:92%}
.qr-btn{background:#FFFFFF;border:none;border-top:1px solid rgba(0,0,0,.08);
color:#00A551;font-weight:700;font-size:0.85rem;padding:12px 14px;text-align:center;
cursor:pointer;transition:background 0.15s;position:relative;width:100%}
.pm-quick-replies .qr-btn{font-size:0.78rem;padding:9px 12px}
.qr-btn:hover{background:rgba(27,170,83,0.08)}
.qr-btn.qr-primary{animation:qr-pulse-bg 1.7s ease-in-out infinite}
@keyframes qr-pulse-bg{0%,100%{background:#FFFFFF}50%{background:rgba(27,170,83,0.14)}}
.pm-quick-replies.answered .qr-btn,.msg-quick-replies.answered .qr-btn{color:#9CA3AF;cursor:default;animation:none}
.pm-quick-replies.answered .qr-btn:hover,.msg-quick-replies.answered .qr-btn:hover{background:#FFFFFF}
.qr-btn.qr-selected{color:var(--green)!important;font-weight:800}
.qr-btn.qr-selected::after{content:'  ✓';}
.tap-finger{position:absolute;right:14px;top:50%;transform:translateY(-50%) scale(1.4);
font-size:1.15rem;animation:tap-press 0.7s ease forwards;pointer-events:none}
@keyframes tap-press{0%{opacity:0;transform:translateY(-50%) scale(1.9)}35%{opacity:1;transform:translateY(-50%) scale(1.4)}70%{opacity:1}100%{opacity:0;transform:translateY(-50%) scale(0.85)}}
.demo-hint{font-size:0.8rem;color:var(--muted);text-align:center;margin-top:14px;display:flex;
align-items:center;justify-content:center;gap:6px}
.demo-hint .hh{animation:hint-bob 1.4s ease-in-out infinite}
.restart-demo{display:inline-flex;align-items:center;gap:6px;font-size:0.8rem;font-weight:600;
color:var(--muted);margin-top:10px;padding:7px 16px;border-radius:999px;border:1px solid var(--border);
background:var(--card);transition:all 0.18s}
.restart-demo:hover{color:var(--text);border-color:rgba(27,170,83,.4)}
@keyframes hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.uc-impact{margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
.uc-impact-label{font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
color:var(--muted);margin-bottom:12px}
.uc-impact .impact-item{font-size:0.85rem;color:var(--muted);padding:5px 0 5px 26px;position:relative;
transition:all 0.4s ease}
.uc-impact .impact-item::before{content:'○';position:absolute;left:0;color:var(--border);font-size:0.8rem}
.uc-impact .impact-item.on{color:var(--text);font-weight:600}
.uc-impact .impact-item.on::before{content:'✓';color:var(--green)}

/* HERO PILL MENU — direct-pick scrollable tabs, same phone frame beneath */
.hero-tabs-row{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.hero-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;flex:1}
.hero-tabs::-webkit-scrollbar{display:none}
.h-tab{flex-shrink:0;display:flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
border:1px solid var(--border);background:var(--card);font-size:0.82rem;font-weight:600;color:var(--muted);
transition:all 0.18s;cursor:pointer;white-space:nowrap}
.h-tab:hover{border-color:rgba(27,170,83,.45);color:var(--text)}
.h-tab.active{background:var(--text);color:#fff;border-color:var(--text)}
.h-scroll{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--card);
display:flex;align-items:center;justify-content:center;font-size:0.85rem;color:var(--text);
transition:all 0.18s;flex-shrink:0}
.h-scroll:hover{background:var(--text);color:#fff;border-color:var(--text)}
.phone-slide-track{transition:opacity 0.3s ease,transform 0.3s ease}
.phone-slide-track.switching{opacity:0;transform:scale(0.97) translateX(8px)}

/* Always-visible tap hint chip on a fresh button/list round */
.tap-hint-chip{align-self:flex-start;font-size:0.7rem;font-weight:700;color:var(--green-dk);
background:var(--green-glow);padding:4px 10px;border-radius:999px;margin-top:2px;
animation:hint-bob 1.4s ease-in-out infinite}

/* Cursor-following hint label */
.cursor-label{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
background:var(--text);color:#fff;font-size:0.72rem;font-weight:600;padding:6px 13px;
border-radius:999px;opacity:0;transition:opacity 0.2s;white-space:nowrap;transform:translate(-50%,-150%)}
.cursor-label.show{opacity:1}
@media(max-width:900px),(hover:none){.cursor-label{display:none!important}}

/* WhatsApp-authentic LIST picker (e.g. choosing a doctor/service from several options) */
.pm-list,.msg-list{display:flex;flex-direction:column;margin-top:-4px;align-self:flex-start;
background:#FFFFFF;border-radius:0 12px 12px 12px;overflow:hidden;box-shadow:0 1px 2px rgba(22,32,28,.08)}
.msg-list{max-width:82%}.pm-list{max-width:92%}
.list-header{font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
color:var(--muted);padding:9px 14px 3px}
.list-btn{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;
border:none;border-top:1px solid rgba(0,0,0,.08);background:#FFFFFF;padding:11px 14px;
text-align:left;cursor:pointer;transition:background 0.15s;color:var(--text)}
.list-btn:hover{background:rgba(27,170,83,0.08)}
.pm-list.answered .list-btn,.msg-list.answered .list-btn{color:#9CA3AF;cursor:default}
.pm-list.answered .list-btn:hover,.msg-list.answered .list-btn:hover{background:#FFFFFF}
.pm-list.answered .list-btn .sel{color:#9CA3AF}
.list-btn.selected{color:var(--text)!important}
.list-btn.selected .sel{color:var(--green-dk)!important;font-weight:800}
.list-btn strong{display:block;font-size:0.85rem}
.list-btn small{display:block;font-size:0.72rem;color:var(--muted);margin-top:1px}
.list-btn .sel{color:var(--green-dk);font-weight:700;font-size:0.74rem;flex-shrink:0}
.pm-list .list-btn{padding:9px 12px}
.pm-list .list-btn strong{font-size:0.78rem}
.pm-list .list-btn small{font-size:0.66rem}

/* Terminal CONFIRM card — summarises every choice made along the journey */
.confirm-card{background:#FFFFFF;border-radius:12px;padding:16px;box-shadow:0 3px 10px -5px rgba(22,32,28,.2);
border-left:4px solid var(--green);max-width:92%;align-self:flex-start;animation:fade-up 0.4s ease forwards}
.confirm-card .tick{width:32px;height:32px;border-radius:50%;background:var(--green);color:#06210F;
display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:0.95rem}
.confirm-card h5{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.92rem;font-weight:700;margin-bottom:8px;color:var(--text)}
.confirm-card .crow{display:flex;justify-content:space-between;font-size:0.76rem;padding:4px 0;
border-bottom:1px dashed var(--border)}
.confirm-card .crow span:first-child{color:var(--muted)}
.confirm-card .cfoot{font-size:0.7rem;color:var(--muted);margin-top:10px}

/* DEMO NUDGE — popover with a hand-drawn arrow, appears after a short dwell */
.demo-nudge{position:fixed;top:90px;right:28px;z-index:90;background:var(--card);border:1px solid var(--border);
border-radius:16px;box-shadow:0 20px 50px -12px rgba(22,32,28,.28);padding:18px 20px 18px 18px;max-width:270px;
display:flex;flex-direction:column;gap:10px;opacity:0;visibility:hidden;transform:translateY(-10px) scale(0.96);
transition:opacity 0.35s ease,transform 0.35s ease,visibility 0.35s}
.demo-nudge.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.nudge-arrow{position:absolute;top:-52px;right:24px}
.nudge-close{position:absolute;top:8px;right:10px;background:none;font-size:1.05rem;color:var(--muted)}
.nudge-close:hover{color:var(--text)}
.nudge-emoji{font-size:1.3rem}
.nudge-text strong{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.92rem;font-weight:700;color:var(--text);display:block;margin-bottom:3px}
.nudge-text span{font-size:0.8rem;color:var(--muted);line-height:1.45}
.nudge-cta{display:inline-block;align-self:flex-start;margin-top:2px;background:var(--green);color:#06210F;
font-weight:700;font-size:0.8rem;padding:8px 16px;border-radius:999px}
@media(max-width:760px){.demo-nudge{right:16px;left:16px;max-width:none;top:auto;bottom:20px}.nudge-arrow{display:none}}

/* BUSINESS FLOW STRIP — the real path a message takes, for the Businesses section */
.h-tab:active,.h-scroll:active,.tab-btn:active,.qr-btn:active,.list-btn:active{transform:scale(0.94)}
.biz-strip{display:flex;align-items:center;flex-wrap:wrap;gap:0;justify-content:center;margin-top:20px}
.biz-strip-item{font-family:'Inter',monospace;font-size:0.78rem;padding:10px 16px;border:1px solid var(--border);
border-radius:999px;background:var(--card);color:var(--muted)}
.biz-strip-arrow{color:var(--green-dk);font-size:1rem;margin:0 5px}
.biz-strip-item,.biz-strip-arrow{opacity:0;transform:translateY(6px);transition:opacity 0.4s ease,transform 0.4s ease}
.biz-strip-item.on,.biz-strip-arrow.on{opacity:1;transform:translateY(0)}

/* DASHBOARD PREVIEW */
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
box-shadow:0 20px 50px -20px rgba(22,32,28,.18);padding:28px;overflow:hidden}
.dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.dash-top h4{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1rem;color:var(--text)}
.dash-illustrative{font-size:0.7rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
color:var(--muted);background:var(--card2);border:1px solid var(--border);padding:4px 10px;border-radius:999px}
.dash-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--border);
border-radius:var(--radius-sm);overflow:hidden}
.dash-stat{padding:20px 16px;border-right:1px solid var(--border);background:var(--bg)}
.dash-stat:last-child{border-right:none}
.dash-stat .dlabel{font-size:0.66rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.dash-stat .dval{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.6rem;color:var(--text)}
.dash-stat .dval span{font-size:1rem;color:var(--muted)}
@media(max-width:900px){.dash-stats{grid-template-columns:repeat(2,1fr)}.dash-stat{border-bottom:1px solid var(--border)}}

/* INTEGRATIONS STRIP */
.int-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.int-chip{display:flex;align-items:center;gap:8px;font-size:0.86rem;font-weight:600;color:var(--text);
background:var(--card);border:1px solid var(--border);padding:11px 18px;border-radius:999px}

/* AMBIENT FALLING PARTICLES — behind the interactive Businesses demo */
.particle-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.particle{position:absolute;top:-40px;opacity:0.55;will-change:transform;
animation-name:particle-fall;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes particle-fall{
  0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0}
  8%{opacity:0.55}
  92%{opacity:0.45}
  100%{transform:translateY(115vh) translateX(var(--drift,30px)) rotate(360deg);opacity:0}
}


/* DEMO */
.demo-section{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.demo-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:768px){.demo-inner{grid-template-columns:1fr}}
.demo-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(1.5rem,1rem + 2.5vw,2.8rem);margin-bottom:16px;overflow-wrap:break-word}
.demo-sub{color:var(--muted);margin-bottom:36px;line-height:1.7}
.demo-form{display:flex;flex-direction:column;gap:14px;max-width:420px}
.demo-form input,.demo-form select{background:var(--bg);border:1px solid var(--border);
border-radius:var(--radius-sm);padding:12px 16px;font-size:0.9rem;color:var(--text);transition:border-color 0.2s;width:100%}
.demo-form input::placeholder{color:var(--muted)}
.demo-form input:focus,.demo-form select:focus{outline:none;border-color:var(--green)}
.demo-form select{background:var(--bg);color:var(--text)}
.demo-form select option{background:var(--bg)}
.demo-submit{background:var(--green);color:#000;padding:14px;border-radius:var(--radius-sm);
font-size:1rem;font-weight:700;transition:all 0.2s;border:none;cursor:pointer}
.demo-submit:hover{opacity:0.88;transform:translateY(-1px)}
.demo-result{margin-top:8px;padding:14px 16px;border-radius:var(--radius-sm);font-size:0.88rem;display:none}
.demo-result.success{background:rgba(27,170,83,0.1);border:1px solid rgba(27,170,83,0.3);color:var(--green)}
.demo-result.error{background:rgba(200,60,60,0.1);border:1px solid rgba(200,60,60,0.3);color:#f87171}
.demo-privacy{font-size:0.73rem;color:var(--muted)}

.demo-vis{position:relative;height:380px;display:flex;align-items:center;justify-content:center}
.demo-blob{position:absolute;width:300px;height:300px;
background:radial-gradient(circle,rgba(27,170,83,0.12),transparent 70%);
animation:glow-breathe 4s ease-in-out infinite;pointer-events:none}
.demo-nodes{display:flex;flex-direction:column;gap:14px;align-items:center;width:100%;position:relative;z-index:1}
.d-node{background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);
padding:12px 20px;font-size:0.82rem;display:flex;align-items:center;gap:10px;max-width:260px;width:100%}
.d-node .di{font-size:1.2rem;flex-shrink:0}
.d-node strong{color:var(--text);display:block;font-size:0.82rem}
.d-node span{color:var(--muted);font-size:0.72rem}
.d-node.hl{border-color:rgba(27,170,83,0.4);background:rgba(27,170,83,0.06)}
.d-arr{color:var(--green);font-size:1.2rem;opacity:0.6}

/* FEATURES */
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:56px}
.feat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
padding:28px;transition:all 0.25s}
.feat-card:hover{border-color:rgba(27,170,83,0.2);box-shadow:0 12px 32px rgba(22,32,28,0.12)}
.feat-icon{width:50px;height:50px;border-radius:13px;
background:linear-gradient(155deg,#EAFBEF 0%,#CDEFD8 100%);
box-shadow:0 10px 20px -6px rgba(27,170,83,.32),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 6px rgba(27,170,83,.14);
display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:18px;
transform:perspective(400px) rotateX(6deg);transition:transform .3s}
.feat-card:hover .feat-icon{transform:perspective(400px) rotateX(0deg) translateY(-3px)}
.feat-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.05rem;margin-bottom:10px}
.feat-body{font-size:0.86rem;color:var(--muted);line-height:1.65}

/* TESTIMONIALS */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:56px}
.testi-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px}
.tq{font-size:1.5rem;color:var(--green);margin-bottom:14px}
.testi-text{font-size:0.9rem;color:var(--muted);line-height:1.7;margin-bottom:20px;font-style:italic}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-av{width:42px;height:42px;border-radius:50%;background:var(--green-dk);
display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;
font-weight:700;font-size:1rem;color:#fff}
.testi-name{font-weight:600;font-size:0.88rem}
.testi-role{font-size:0.75rem;color:var(--muted)}

/* PRICING */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;max-width:380px;margin:56px auto 0}}
.price-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;position:relative}
.price-card.featured{border-color:rgba(27,170,83,0.4);background:linear-gradient(160deg,rgba(27,170,83,0.05),var(--card))}
.price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--green);
color:#000;font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
padding:4px 14px;border-radius:999px;white-space:nowrap}
.price-tier{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1rem;margin-bottom:8px;color:var(--muted)}
.price-amount{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:2.4rem;margin-bottom:4px}
.price-amount sup{font-size:1rem;font-weight:600;vertical-align:top;margin-top:8px;display:inline-block}
.price-period{font-size:0.78rem;color:var(--muted);margin-bottom:24px}
.price-features{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.pf-item{display:flex;align-items:center;gap:10px;font-size:0.85rem}
.pf-chk{color:var(--green);font-size:0.8rem;flex-shrink:0}
.pf-x{color:var(--muted);font-size:0.8rem;flex-shrink:0}
.pf-item.off{color:var(--muted)}
.price-btn{width:100%;padding:12px;border-radius:var(--radius-sm);font-size:0.9rem;font-weight:600;transition:all 0.2s;cursor:pointer}
.pbg{background:transparent;border:1px solid var(--border);color:var(--text)}
.pbg:hover{border-color:var(--green);color:var(--green)}
.pbs{background:var(--green);color:#000;border:none}
.pbs:hover{opacity:0.88;transform:translateY(-1px)}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}
.contact-form{display:flex;flex-direction:column;gap:16px}
.contact-form input,.contact-form textarea,.contact-form select{
background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
padding:13px 16px;font-size:0.9rem;color:var(--text);font-family:inherit;transition:border-color 0.2s;width:100%}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--muted)}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;border-color:var(--green)}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form select{background:var(--card);color:var(--text)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.cf-row{grid-template-columns:1fr}}
.cf-submit{background:var(--green);color:#000;padding:14px;border-radius:var(--radius-sm);
font-size:0.95rem;font-weight:700;transition:all 0.2s;border:none;cursor:pointer}
.cf-submit:hover{opacity:0.88}
.cinfo-item{display:flex;align-items:flex-start;gap:14px;margin-bottom:24px}
.cinfo-icon{width:46px;height:46px;border-radius:11px;
background:linear-gradient(155deg,#EAFBEF 0%,#CDEFD8 100%);
box-shadow:0 8px 16px -5px rgba(27,170,83,.3),inset 0 1px 0 rgba(255,255,255,.9);
display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}
.cinfo-label{font-weight:600;font-size:0.88rem;margin-bottom:3px}
.cinfo-val{font-size:0.85rem;color:var(--muted)}
.contact-result{padding:14px 16px;border-radius:var(--radius-sm);font-size:0.88rem;display:none;margin-top:4px}
.contact-result.success{background:rgba(27,170,83,0.1);border:1px solid rgba(27,170,83,0.3);color:var(--green)}
.contact-result.error{background:rgba(200,60,60,0.1);border:1px solid rgba(200,60,60,0.3);color:#f87171}

/* FINAL CTA */
.final-cta{text-align:center;position:relative;overflow:hidden}
.fcta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:800px;height:400px;background:radial-gradient(ellipse,rgba(27,170,83,0.12),transparent 65%);pointer-events:none}
.cta-btn{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#000;
padding:16px 36px;border-radius:999px;font-size:1rem;font-weight:700;transition:all 0.2s}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(27,170,83,0.3)}

/* FOOTER */
footer{padding:60px 0 40px;border-top:1px solid var(--border)}
.footer-inner{display:grid;grid-template-columns:240px 1fr 1fr 1fr;gap:48px}
@media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-inner{grid-template-columns:1fr}}
.footer-brand{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.2rem;
margin-bottom:12px;display:flex;align-items:center;gap:8px}
.footer-desc{font-size:0.82rem;color:var(--muted);line-height:1.7;max-width:200px}
.footer-col h4{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.82rem;
text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:16px}
.footer-col a{display:block;font-size:0.85rem;color:var(--muted);margin-bottom:10px;transition:color 0.2s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--border);
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:0.78rem;color:var(--muted)}
.fwa-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(27,170,83,0.1);
border:1px solid rgba(27,170,83,0.2);border-radius:999px;padding:5px 12px;font-size:0.72rem;font-weight:600;color:var(--green)}

/* SECTION HEADER */
.sh{text-align:center;margin-bottom:16px}
.sh .label{display:block;margin-bottom:12px}
.sh .h2{font-size:clamp(1.5rem,1rem + 2.5vw,2.6rem);margin-bottom:14px;overflow-wrap:break-word}
.sh p{color:var(--muted);max-width:540px;margin:0 auto;font-size:0.98rem}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.6s ease,transform 0.6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* HERO RESULT */
#hero-result{margin-top:12px;padding:12px 16px;border-radius:var(--radius-sm);font-size:0.85rem;display:none}
#hero-result.success{background:rgba(27,170,83,0.1);border:1px solid rgba(27,170,83,0.3);color:var(--green)}
#hero-result.error{background:rgba(200,60,60,0.1);border:1px solid rgba(200,60,60,0.3);color:#f87171}

/* ═══════════ CUSTOM CURSOR ═══════════ */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;
transform:translate(-50%,-50%);will-change:transform}
.cur-dot{width:6px;height:6px;background:var(--green);transition:width .18s,height .18s,background .18s}
.cur-ring{width:34px;height:34px;border:1px solid rgba(27,170,83,.45);
transition:width .22s cubic-bezier(.16,1,.3,1),height .22s cubic-bezier(.16,1,.3,1),border-color .18s,background .18s}
.cur-ring.hover{width:58px;height:58px;border-color:var(--green);background:rgba(27,170,83,.08)}
.cur-dot.hover{width:10px;height:10px;background:var(--text)}
@media(max-width:900px),(hover:none){.cur-dot,.cur-ring{display:none}body{cursor:auto !important}
a,button{cursor:pointer !important}}

/* ═══════════ AMBIENT GRADIENT ORBS ═══════════ */
.amb-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.amb-orb.o1{width:640px;height:640px;background:radial-gradient(circle,rgba(27,170,83,.16),transparent 68%);
top:-160px;right:-180px;animation:orb-a 22s ease-in-out infinite}
.amb-orb.o2{width:520px;height:520px;background:radial-gradient(circle,rgba(14,122,87,.13),transparent 68%);
bottom:-220px;left:-140px;animation:orb-b 26s ease-in-out infinite}
@keyframes orb-a{0%,100%{transform:translate(0,0)}50%{transform:translate(-70px,90px)}}
@keyframes orb-b{0%,100%{transform:translate(0,0)}50%{transform:translate(90px,-60px)}}
.mesh-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:linear-gradient(rgba(22,32,28,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(22,32,28,.05) 1px,transparent 1px);
background-size:46px 46px;
mask-image:radial-gradient(ellipse at 50% 35%,black 25%,transparent 72%);
-webkit-mask-image:radial-gradient(ellipse at 50% 35%,black 25%,transparent 72%)}

/* ═══════════ GLASSMORPHISM UPGRADE (light) ═══════════ */
nav{background:rgba(251,250,247,.78);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
border-bottom:1px solid var(--border)}
.chat-mockup,.step-card,.feat-card,.testi-card,.price-card,.d-node,.trust-bar,.demo-section,
.contact-form{
background:linear-gradient(155deg,rgba(255,255,255,.92),rgba(255,255,255,.72));
backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
border:1px solid var(--border);position:relative;
box-shadow:0 8px 30px rgba(22,32,28,.06)}
.chat-mockup::before,.step-card::before,.feat-card::before,.testi-card::before,.price-card::before{
content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
background:linear-gradient(155deg,rgba(27,170,83,.35),rgba(255,255,255,0) 40%);
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.chat-mockup:hover::before,.step-card:hover::before,.feat-card:hover::before,
.testi-card:hover::before,.price-card:hover::before{opacity:1}
.trust-bar{background:rgba(255,255,255,.6) !important}

/* ═══════════ 3D TILT ═══════════ */
.tilt-el{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.16,1,.3,1);will-change:transform}
#chat-mockup-wrap{transform:perspective(1000px) rotateY(-5deg) rotateX(2deg)}

/* ═══════════ GRADIENT TEXT ═══════════ */
.grad-text{background:linear-gradient(100deg,var(--green-dk) 0%,var(--green) 50%,#0A5C41 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ═══════════ PLATFORM STRIP ═══════════ */
.platform-strip{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
margin-top:20px;font-size:.78rem;color:var(--muted)}
.platform-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
border:1px solid var(--border);background:rgba(22,32,28,.03);font:inherit;font-size:.78rem;color:var(--muted);
cursor:pointer;transition:all 0.2s}
.platform-chip:hover{border-color:rgba(27,170,83,.45);color:var(--green-dk);transform:translateY(-1px)}
.platform-chip.on{border-color:rgba(27,170,83,.45);color:var(--green-dk);background:rgba(27,170,83,.1);font-weight:600}

/* ═══════════ VS SECTION ═══════════ */
.vs-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;margin-top:56px;align-items:stretch}
@media(max-width:768px){.vs-grid{grid-template-columns:1fr}}
.vs-col{padding:32px}
.vs-col.them{opacity:.72}
.vs-divider{display:flex;align-items:center;justify-content:center;padding:0 28px}
.vs-divider span{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:.78rem;color:var(--muted);
letter-spacing:.1em;background:var(--card2);border:1px solid var(--border);border-radius:50%;
width:44px;height:44px;display:flex;align-items:center;justify-content:center}
@media(max-width:768px){.vs-divider{padding:16px 0}}
.vs-head{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.1rem;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.vs-list{display:flex;flex-direction:column;gap:12px}
.vs-row{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--muted);line-height:1.55}
.vs-row .ic{flex-shrink:0;margin-top:1px}
.vs-col:not(.them) .vs-row{color:var(--text)}
.vs-col:not(.them) .vs-row .ic{color:var(--green)}
.vs-col.them .vs-row .ic{color:#8B949E}

@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
.amb-orb{animation:none}
}

/* ═══════════ SCROLL PROGRESS BAR ═══════════ */
.scroll-bar{position:fixed;top:0;left:0;height:2.5px;width:0%;z-index:10000;
background:linear-gradient(90deg,var(--green-dk),var(--green),#7CE8B0);
box-shadow:0 0 12px rgba(27,170,83,.6);transition:width .08s linear}

/* ═══════════ MAGNETIC CTA + BREATHING GLOW ═══════════ */
.magnetic{position:relative;will-change:transform}
.hero-form button,.demo-submit,.cf-submit,.price-btn.pbs,.cta-btn,.nav-cta{
  position:relative;isolation:isolate;overflow:visible
}
.hero-form button::after,.demo-submit::after,.cta-btn::after,.price-btn.pbs::after{
  content:'';position:absolute;inset:-3px;border-radius:inherit;z-index:-1;
  background:linear-gradient(120deg,var(--green),#7CE8B0,var(--green-dk),var(--green));
  background-size:280% 280%;opacity:0;filter:blur(14px);
  transition:opacity .35s;animation:glow-shift 5s ease infinite}
.hero-form button:hover::after,.demo-submit:hover::after,.cta-btn:hover::after,.price-btn.pbs:hover::after{opacity:.85}
@keyframes glow-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.cta-btn{animation:cta-breathe 3.2s ease-in-out infinite}
@keyframes cta-breathe{0%,100%{box-shadow:0 0 0 0 rgba(27,170,83,.35)}50%{box-shadow:0 0 0 14px rgba(27,170,83,0)}}

/* ripple on click */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);
transform:scale(0);animation:ripple-out .6s ease-out forwards;pointer-events:none}
@keyframes ripple-out{to{transform:scale(3);opacity:0}}

/* ═══════════ CURSOR SPOTLIGHT ═══════════ */
.spotlight-zone{position:relative}
.spotlight-zone::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
opacity:0;transition:opacity .4s;
background:radial-gradient(480px circle at var(--sx,50%) var(--sy,50%),rgba(27,170,83,.09),transparent 60%)}
.spotlight-zone.lit::before{opacity:1}

/* count-up number pop */
.count-pop{display:inline-block;animation:count-pop .4s cubic-bezier(.34,1.6,.64,1)}
@keyframes count-pop{from{transform:scale(0.7);opacity:.4}to{transform:scale(1);opacity:1}}

/* ═══════════ CONFETTI (lead-conversion reward) ═══════════ */
.confetti-piece{position:fixed;top:-12px;z-index:10001;pointer-events:none;
border-radius:2px;animation:confetti-fall linear forwards}
@keyframes confetti-fall{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  100%{transform:translateY(110vh) rotate(600deg);opacity:0}
}

/* success pulse ring on demo result */
.demo-result.success{animation:result-pop .5s cubic-bezier(.34,1.6,.64,1)}
@keyframes result-pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}