:root{--ink:#0b0f19;--ink2:#1a2133;--muted:#4b5568;--line:#e3e6ee;--bg:#fff;--alt:#f5f6fa;--accent:#a3e635;--accent-d:#84cc16;--green:#0b3d2c;--green2:#14532d;--blue:#0b3d2c;--good:#16a34a;--bad:#dc2626;--r:18px;
--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--display:"Arial Black","Helvetica Neue",ui-sans-serif,system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.0625rem/1.6 var(--sans);color:var(--ink);background:var(--bg)}
img{max-width:100%}a{color:var(--blue)}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:20}.skip:focus{left:1rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.025em;line-height:1.05;margin:0 0 .6rem}
h1{font-size:clamp(2.4rem,6.4vw,4.6rem);font-weight:900}
h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:900}
h3{font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.hl{background:linear-gradient(transparent 62%,rgba(163,230,53,.35) 62%);}
/* header */
.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:66px;gap:1rem}
.logo{display:flex;align-items:center;gap:.55rem;font:900 1.2rem var(--display);color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;font-size:1.05rem;box-shadow:3px 3px 0 var(--accent)}
nav ul{list-style:none;display:flex;gap:1.4rem;margin:0;padding:0;align-items:center}
nav a{color:var(--ink);text-decoration:none;font-weight:600}nav a:not(.btn):hover{color:var(--accent-d)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--accent);color:var(--ink);padding:.85rem 1.35rem;border-radius:12px;font-weight:800;text-decoration:none;border:2px solid var(--accent);transition:transform .15s,box-shadow .15s,background .15s;box-shadow:0 6px 18px -6px rgba(163,230,53,.6)}
.btn:hover{background:var(--accent-d);border-color:var(--accent-d);transform:translateY(-2px)}
.btn-sm{padding:.5rem .95rem;box-shadow:none}
.btn-lg{padding:1rem 1.5rem;font-size:1.05rem}.btn-xl{padding:1.15rem 2rem;font-size:1.2rem}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* hero */
.hero{position:relative;overflow:hidden;padding:4.5rem 0 4rem;background:
 radial-gradient(900px 500px at 85% -10%,rgba(16,94,64,.12),transparent 60%),
 radial-gradient(700px 400px at -10% 110%,rgba(163,230,53,.12),transparent 60%),
 linear-gradient(#fff,#fff)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 75%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 75%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);background:#fff;border:1px solid var(--line);padding:.35rem .8rem;border-radius:999px;margin:0 0 1.3rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px rgba(22,163,74,.18)}
.lead{font-size:1.2rem;color:var(--muted);max-width:56ch;margin:1rem 0 1.8rem}
.ctas{display:flex;gap:.75rem;flex-wrap:wrap}
.promises{list-style:none;padding:0;margin:1.8rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.promises li{font-weight:700;font-size:.92rem;padding:.4rem .75rem .4rem 1.9rem;border-radius:999px;background:var(--alt);border:1px solid var(--line);position:relative}
.promises li::before{content:"✓";position:absolute;left:.7rem;color:var(--good);font-weight:900}
/* phone mockup */
.phone{justify-self:center;width:min(290px,100%)}
.phone-screen{border:10px solid var(--ink);border-radius:38px;background:#f8fafc;padding:1rem .9rem 1.3rem;box-shadow:0 30px 60px -20px rgba(11,15,25,.45),12px 12px 0 var(--accent);transform:rotate(2deg)}
.ph-bar{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;font-weight:900;margin-bottom:.8rem}
.ph-call{background:var(--good);color:#fff;padding:.2rem .6rem;border-radius:999px}
.ph-hero{background:var(--ink);color:#fff;border-radius:14px;padding:1rem;display:grid;gap:.3rem;margin-bottom:.7rem}
.ph-hero b{font:900 1.15rem/1.15 var(--display)}.ph-hero span{font-size:.72rem;opacity:.8}
.ph-btn{background:var(--accent);color:#fff;text-align:center;font-weight:800;border-radius:10px;padding:.6rem;margin-bottom:.5rem;font-size:.9rem}
.ph-btn.alt{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.ph-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.6rem}.ph-cards i{height:46px;border-radius:8px;background:#e2e8f0}
.ph-label,.tag{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:center;margin:.9rem 0 0}
/* sections */
.section{padding:5rem 0}.alt{background:var(--alt)}
.sub{color:var(--muted);max-width:60ch;margin:0 0 2.2rem;font-size:1.1rem}
.dark{background:var(--ink);color:#e5e7eb}.dark h2{color:#fff;max-width:20ch}.dark .tag{text-align:left;color:#bef264;margin:0 0 .8rem}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.2rem}
.ba-card{margin:0;background:var(--ink2);border:1px solid #2a3348;border-radius:var(--r);padding:1.4rem}
.ba-card figcaption{font-weight:800;color:#fff;margin-bottom:1rem;display:flex;gap:.6rem;align-items:center}
.pill{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;padding:.2rem .6rem;border-radius:999px}
.pill.bad{background:rgba(220,38,38,.18);color:#fca5a5}.pill.good{background:rgba(22,163,74,.2);color:#86efac}
.mock{border-radius:12px;padding:1rem;min-height:220px;margin-bottom:1rem}
.m-before{background:#f4f1e1;color:#333;font-family:"Times New Roman",serif}
.mb-banner{background:#2b4c7e;color:#ff0;text-align:center;font-weight:700;padding:.4rem;font-size:.85rem}
.mb-slider{background:#858585;color:#111;text-align:center;padding:2rem 0;margin:.6rem 0;font-size:.8rem}
.mb-text{font-size:.66rem;line-height:1.3;margin:0 0 .5rem}.mb-tiny{font-size:.6rem;color:#00e;text-decoration:underline;text-align:right}
.m-after{background:#fff;color:var(--ink)}
.ma-top{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.8rem}.ma-top span{background:var(--good);color:#fff;border-radius:999px;padding:.1rem .6rem;font-weight:800;font-size:.75rem}
.ma-h{font:900 1.5rem/1.1 var(--display);margin-bottom:.8rem;letter-spacing:-.02em}
.ma-row{display:flex;gap:.5rem;margin-bottom:.8rem}.ma-btn{flex:1;text-align:center;background:var(--accent);color:#fff;font-weight:800;border-radius:9px;padding:.55rem;font-size:.85rem}.ma-btn.o{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.ma-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}.ma-svc i{font-style:normal;font-size:.75rem;font-weight:700;background:var(--alt);border-radius:8px;padding:.5rem;text-align:center}
.list{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.list li{padding-left:1.6rem;position:relative}
.bad-list li::before{content:"✕";position:absolute;left:0;color:#f87171;font-weight:900}
.good-list li::before{content:"✓";position:absolute;left:0;color:#4ade80;font-weight:900}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
.f{border:2px solid var(--ink);border-radius:var(--r);padding:1.6rem;background:#fff;transition:transform .2s,box-shadow .2s}
.f:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--accent)}
.f p,.price p,.steps p{color:var(--muted);margin:0}
.num{font:900 2.4rem var(--display);color:var(--accent);display:block;margin-bottom:.4rem}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:stretch}
.price{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;display:flex;flex-direction:column;gap:.8rem}
.price .btn{margin-top:auto}
.amt{font:900 3rem/1 var(--display)!important;color:var(--ink)!important;letter-spacing:-.03em}
.price.feature{background:var(--ink);border-color:var(--ink);color:#fff;transform:scale(1.03);box-shadow:0 30px 60px -25px rgba(11,15,25,.6)}
.price.feature h3,.price.feature .amt{color:#fff!important}.price.feature p{color:#cbd5e1}
.ribbon{position:absolute;top:-12px;left:1.8rem;background:var(--accent);color:#fff;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:.25rem .7rem;border-radius:999px}
.steps{list-style:none;counter-reset:s;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.steps li{counter-increment:s;padding-top:1.2rem;border-top:4px solid var(--ink)}
.steps li::before{content:"0" counter(s);font:900 1rem var(--display);color:var(--accent);display:block;margin-bottom:.4rem}
.contact{background:var(--accent);color:#fff;text-align:center}
.contact h2{color:#fff;font-size:clamp(2.2rem,5.5vw,4rem)}.contact .sub{color:#d9f99d;margin-left:auto;margin-right:auto}
.contact .btn{background:var(--ink);border-color:var(--ink);box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}.contact .btn:hover{background:#000}
.foot{background:var(--ink);color:#94a3b8;padding:1.6rem 0}.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.foot p{margin:0}.foot a{color:#fff}
/* ===== motion & polish (transform/opacity only) ===== */
.btn{position:relative;isolation:isolate;transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s}
.btn::after{content:"";position:absolute;inset:-2px;border-radius:inherit;box-shadow:0 10px 30px -4px rgba(163,230,53,.75),0 0 0 4px rgba(163,230,53,.18);opacity:0;transition:opacity .25s;z-index:-1;pointer-events:none}
.btn:hover::after,.btn:focus-visible::after{opacity:1}
.btn-ghost::after{box-shadow:0 10px 28px -6px rgba(11,15,25,.45)}
.f,.price,.ba-card{position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.f::after,.price::after,.ba-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;box-shadow:0 24px 50px -18px rgba(16,94,64,.35),0 0 0 1px rgba(163,230,53,.35),0 0 40px -6px rgba(163,230,53,.35)}
.f:hover,.price:hover,.ba-card:hover{transform:translateY(-6px)}
.price.feature:hover{transform:scale(1.03) translateY(-6px)}
.f:hover::after,.price:hover::after,.ba-card:hover::after{opacity:1}
.f:hover{box-shadow:none}
/* animated background blobs */
.hero::after,.contact::before{content:"";position:absolute;width:70vmax;height:70vmax;border-radius:50%;pointer-events:none;will-change:transform}
.hero::after{top:-35vmax;right:-25vmax;background:radial-gradient(closest-side,rgba(16,94,64,.16),transparent 70%);animation:drift 18s ease-in-out infinite alternate}
.hero-grid{z-index:1}
.contact{position:relative;overflow:hidden}.contact>.wrap{position:relative;z-index:1}
.contact::before{left:-20vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent 70%);animation:drift 14s ease-in-out infinite alternate-reverse}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-12vmax,10vmax,0) scale(1.15)}}
/* phone */
.phone-tilt{transition:transform .4s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.js-anim .phone-screen{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-12px)}}
/* hero words */
.js-anim .hero h1 .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js-anim .hero h1.in .w{opacity:1;transform:none}
/* reveals */
.js-anim .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js-anim .reveal.in{opacity:1;transform:none}
.js-anim .price.feature.reveal.in{transform:scale(1.03)}
/* price underline draw */
.amt{position:relative;display:inline-block;align-self:flex-start}
.amt::after{content:"";position:absolute;left:0;right:0;bottom:-.18em;height:.12em;border-radius:4px;background:var(--accent);transform-origin:left;transform:scaleX(1)}
.js-anim .price .amt::after{transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.7,.2,1) .35s}
.js-anim .price.in .amt::after{transform:scaleX(1)}
/* compare slider */
.compare{position:relative;max-width:760px;margin:2.2rem auto 0;border-radius:var(--r);overflow:hidden;border:1px solid #2a3348;background:var(--ink2);user-select:none}
.compare .mock{margin:0;border-radius:0;min-height:260px;padding:1.4rem}
.cmp-clip{position:absolute;inset:0;overflow:hidden;transform:translateX(-50%)}
.cmp-inner{position:absolute;inset:0;transform:translateX(50%)}
.cmp-inner .mock{height:100%}
.cmp-handle{position:absolute;top:0;bottom:0;left:-2px;width:4px;background:var(--accent);transform:translateX(380px);pointer-events:none}
.cmp-handle span{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.cmp-tag{position:absolute;top:.7rem;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;background:rgba(11,15,25,.8);color:#fff;padding:.2rem .55rem;border-radius:999px}
.cmp-tag.l{left:.7rem}.cmp-tag.r{right:.7rem}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.compare:focus-within{outline:3px solid var(--accent);outline-offset:3px}
html:not(.js-cmp) .compare{display:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
/* responsive */
@media (max-width:900px){.hero-grid,.ba,.feat,.prices{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.price.feature{transform:none}.phone{order:2}}
@media (max-width:560px){.hide-sm{display:none}.hero{padding:2.8rem 0 3rem}.section{padding:3.5rem 0}.ctas .btn{flex:1 1 100%}.steps{grid-template-columns:1fr}.btn-xl{width:100%}}

/* green theme overrides */
a{color:var(--green2)}
.btn:hover{background:var(--accent-d);border-color:var(--accent-d);color:var(--ink)}
.btn-ghost{color:var(--ink)}.btn-ghost:hover{background:var(--green);border-color:var(--green);color:#fff}
.hl{background:linear-gradient(transparent 60%,rgba(163,230,53,.55) 60%)}
nav a:not(.btn):hover{color:var(--green2)}
.num,.steps li::before{color:var(--green2)}
.ph-btn,.ma-btn{color:var(--ink)}
.ribbon{color:var(--ink)}
.cmp-handle span{color:var(--ink)}
.price.feature{background:var(--green);border-color:var(--green)}
.contact{background:linear-gradient(135deg,var(--green) 0%,#0f4a35 60%,var(--green2) 100%);color:#fff}
.contact .btn{background:var(--accent);border-color:var(--accent);color:var(--ink)}.contact .btn:hover{background:#bef264;border-color:#bef264}
.dark{background:#071f17}.ba-card,.compare{background:#0d2a20;border-color:#1c4636}
.mark{background:var(--green)}
.prices{grid-template-columns:repeat(4,1fr)}
.from{margin:0!important;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--green2)!important}
.price.feature .from{color:#bef264!important}
.price-note{margin:1.8rem 0 0;color:var(--muted);font-weight:600}
@media (max-width:1100px){.prices{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.prices{grid-template-columns:1fr}}
/* hover-stability fix: a lifted element keeps a hit area covering its original position,
   so the pointer never "falls off" the bottom edge and re-triggers hover (flicker loop). */
.btn::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}
.btn:hover::before{bottom:-4px;pointer-events:auto}
.f::before,.price::before,.ba-card::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;z-index:-1}
.f:hover::before,.price:hover::before,.ba-card:hover::before{bottom:-8px;pointer-events:auto}
/* Buttons inside lifting price cards: the card already lifts 6px, so the button does not add its own
   lift, and its hit area extends down over the card's lift distance. */
.price .btn:hover{transform:none}
.price:hover .btn::before{bottom:-8px;pointer-events:auto}
.hero>.wrap{position:relative;z-index:1}
/* ===== v3: Keep it working ===== */
.show-sm{display:none}
@media (max-width:560px){.show-sm{display:inline}nav ul{gap:.9rem}}
.kw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:stretch}
.kw-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;display:flex;flex-direction:column;gap:.8rem;transition:box-shadow .3s}
.kw-card:hover{box-shadow:0 24px 50px -18px rgba(16,94,64,.3),0 0 0 1px rgba(163,230,53,.45)}
.kw-card>p{color:var(--muted);margin:0}
.kw-card .kw-price{color:var(--green2);font-weight:900;font-size:1.15rem}
.kw-card .btn{margin-top:auto;align-self:flex-start}
.kw-ill{margin:.2rem 0 .4rem;padding:.9rem;border-radius:12px;background:var(--alt);display:grid;gap:.7rem}
.kw-ill figcaption{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.kw-lab{margin:0 0 .35rem;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.kw-row-bad .kw-lab{color:#9f1239}.kw-row-good .kw-lab{color:var(--green2)}
.kw-flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.kw-step{display:inline-flex;align-items:center;gap:.35rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.3rem .65rem .3rem .35rem;font-size:.82rem;font-weight:700;color:var(--ink)}
.kw-row-bad .kw-step{border-color:#fecdd3}
.kw-row-good .kw-step{border-color:#bef264}
.kw-ico{width:1.35rem;height:1.35rem;border-radius:50%;display:inline-grid;place-items:center;font-size:.75rem;line-height:1;flex:none;background:#e2e8f0;color:var(--ink)}
.kw-x .kw-ico{background:#9f1239;color:#fff}.kw-x .kw-ico::before{content:"\2715"}
.kw-ok .kw-ico{background:var(--green);color:#bef264}.kw-ok .kw-ico::before{content:"\2713"}
.kw-call .kw-ico::before{content:"\260E"}
.kw-msg .kw-ico{background:#a3e635}.kw-msg .kw-ico::before{content:"\2709"}
.kw-search .kw-ico::before{content:"\2315"}
.kw-pin .kw-ico{background:#a3e635}.kw-pin .kw-ico::before{content:"\25C9"}
.kw-arrow{width:1rem;height:1rem;color:var(--muted);flex:none}
/* subtle step-in once the card is revealed (JS + motion only; visible otherwise) */
.js-anim .kw-card .kw-step,.js-anim .kw-card .kw-arrow{opacity:0;transform:translateX(-8px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.js-anim .kw-card.in .kw-step,.js-anim .kw-card.in .kw-arrow{opacity:1;transform:none}
.js-anim .kw-card.in .kw-flow>:nth-child(2){transition-delay:.12s}.js-anim .kw-card.in .kw-flow>:nth-child(3){transition-delay:.24s}
.js-anim .kw-card.in .kw-flow>:nth-child(4){transition-delay:.36s}.js-anim .kw-card.in .kw-flow>:nth-child(5){transition-delay:.48s}
.js-anim .kw-card.in .kw-row-good .kw-flow>*{transition-delay:.6s}
.js-anim .kw-card.in .kw-row-good .kw-flow>:nth-child(3){transition-delay:.72s}.js-anim .kw-card.in .kw-row-good .kw-flow>:nth-child(5){transition-delay:.84s}
@media (max-width:1000px){.kw-grid{grid-template-columns:1fr}}
.logo,nav a{white-space:nowrap}@media (max-width:560px){nav ul{gap:.7rem}nav .btn-sm{padding:.5rem .75rem;font-size:.9rem}}
@media (max-width:400px){.logo{font-size:1rem;gap:.4rem}nav ul{gap:.55rem}nav a{font-size:.88rem}nav .btn-sm{padding:.45rem .6rem}}
.kw-note{font-size:.88rem;color:var(--muted);margin:.7rem 0 0;line-height:1.45}