/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#0b141a;background:#fff;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}

:root{
  --green:#25D366;
  --green-dark:#128C7E;
  --green-deep:#075E54;
  --bg-chat:#ECE5DD;
  --in:#fff;
  --out:#DCF8C6;
  --ink:#0b141a;
  --muted:#667781;
  --soft:#f7f9f8;
  --dark:#0b1d18;
  --red:#ef4444;
  --yellow:#FFE066;
  --radius:14px;
  --shadow:0 10px 40px rgba(0,0,0,.08);
  --shadow-lg:0 30px 80px rgba(0,0,0,.18);
}

/* ===== Layout ===== */
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.container--narrow{max-width:760px}

.section{padding:90px 0}
.section--soft{background:var(--soft)}
.section--dark{background:var(--dark);color:#e7eee9}
.section--dark h2{color:#fff}
.section--dark .card__icon{color:var(--green)}

h1,h2,h3{font-weight:800;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin-bottom:14px;font-weight:900}
h3{font-size:1.15rem;margin-bottom:6px}
.lead{font-size:1.1rem;color:var(--muted);max-width:640px;margin:14px 0 22px}
.section--dark .lead{color:#9fb1aa}
.eyebrow{display:inline-block;background:rgba(37,211,102,.12);color:var(--green-dark);font-weight:700;padding:6px 12px;border-radius:99px;font-size:.85rem;margin-bottom:14px;text-transform:uppercase;letter-spacing:.05em}

.text-green{color:var(--green)}
.text-red{color:var(--red)}
.text-yellow{color:var(--yellow)}
.strike{position:relative;color:var(--red)}
.strike::after{content:"";position:absolute;left:-3%;right:-3%;top:55%;height:6px;background:var(--red);transform:rotate(-3deg);border-radius:4px;opacity:.85}

/* ===== Nav ===== */
.nav{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);z-index:50;border-bottom:1px solid #eef2f0}
.nav__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.15rem;letter-spacing:-.02em}
.logo__icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--green);box-shadow:0 6px 18px rgba(37,211,102,.4)}
.logo__accent{color:var(--green-dark)}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;border-radius:99px;padding:14px 24px;transition:transform .15s ease,box-shadow .2s ease,background .2s;cursor:pointer;border:none;font-family:inherit;font-size:1rem;white-space:nowrap}
.btn--nav{background:var(--green);color:#fff;padding:10px 18px;font-size:.95rem;box-shadow:0 6px 18px rgba(37,211,102,.35)}
.btn--nav:hover{transform:translateY(-1px);background:var(--green-dark)}
.btn--cta{background:var(--green);color:#fff;box-shadow:0 14px 30px rgba(37,211,102,.45)}
.btn--cta:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 20px 40px rgba(37,211,102,.5)}
.btn--lg{padding:16px 28px;font-size:1.05rem}
.btn--xl{padding:20px 34px;font-size:1.15rem}
.cta__sub{margin-top:12px;color:var(--muted);font-size:.92rem}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 22px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.pulse{animation:pulse 2.2s infinite}

/* ===== Hero ===== */
.hero{padding:80px 0 100px;background:
  radial-gradient(1100px 500px at 90% -10%,rgba(37,211,102,.18),transparent 60%),
  radial-gradient(900px 500px at -10% 30%,rgba(7,94,84,.10),transparent 60%),
  #fff;
}
.hero__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;background:#e8faef;color:var(--green-dark);font-weight:600;padding:7px 14px;border-radius:99px;font-size:.85rem;margin-bottom:18px}
.pill__dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:pulse 1.8s infinite}

.bullets{margin:18px 0 26px;display:grid;gap:10px}
.bullets li{position:relative;padding-left:30px;font-weight:500;color:#1f2937}
.bullets li::before{content:"✓";position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:900}

/* ===== Phone / Chat Mockup ===== */
.phone{
  position:relative;
  max-width:360px;margin:0 auto;width:100%;
  background:#0b141a;border-radius:38px;padding:14px;
  box-shadow:var(--shadow-lg);
  transform:rotate(.5deg);
}
.phone__notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:90px;height:18px;background:#000;border-radius:99px;z-index:2}
.chat{background:var(--bg-chat);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;height:540px;background-image:
  radial-gradient(rgba(0,0,0,.04) 1px,transparent 1px);
  background-size:14px 14px;
}
.chat__header{display:flex;align-items:center;gap:12px;background:var(--green-deep);color:#fff;padding:38px 16px 12px}
.chat__avatar{width:38px;height:38px;border-radius:50%;background:var(--green);display:grid;place-items:center;font-weight:800;font-size:.9rem}
.chat__name{font-weight:700;font-size:.95rem}
.chat__status{font-size:.78rem;opacity:.85}
.chat__body{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px}
.chat__body::-webkit-scrollbar{width:0}

.msg{max-width:82%;padding:9px 12px;border-radius:12px;font-size:.92rem;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.08);position:relative;animation:fadeUp .35s ease both}
.msg .muted{color:var(--muted);font-size:.85rem}
.msg--in{background:var(--in);align-self:flex-start;border-top-left-radius:4px}
.msg--out{background:var(--out);align-self:flex-end;border-top-right-radius:4px}
.msg--typing{background:#fff;align-self:flex-start;padding:12px 14px}
.msg--typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#9aa5a1;margin:0 2px;animation:blink 1.2s infinite}
.msg--typing span:nth-child(2){animation-delay:.2s}
.msg--typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== Cards / Benefits / Steps ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.card{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);border:1px solid #eef2f0;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.12)}
.card--dark{background:#0f2a23;border-color:#163d33;color:#e7eee9}
.card__icon{font-size:2rem;margin-bottom:12px}
.card p{color:var(--muted);font-size:.95rem}
.card--dark p{color:#9fb1aa}
.stars{color:#f5b301;font-size:1.1rem;margin-bottom:8px;letter-spacing:2px}

.impact{margin-top:40px;text-align:center;font-size:clamp(1.4rem,3vw,2rem);font-weight:800;letter-spacing:-.01em}

.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:30px}
.benefit{background:#fff;border:1px solid #e6ecea;border-radius:var(--radius);padding:18px 20px;font-weight:600;display:flex;align-items:center;gap:12px;box-shadow:0 4px 14px rgba(0,0,0,.04)}
.benefit span{font-size:1.4rem}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px;counter-reset:step}
.step{background:#fff;border-radius:var(--radius);padding:24px;border:1px solid #e6ecea;box-shadow:0 6px 20px rgba(0,0,0,.05);position:relative}
.step__num{width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:900;margin-bottom:14px;box-shadow:0 6px 14px rgba(37,211,102,.4)}
.step p{color:var(--muted);font-size:.92rem}

/* ===== Demo ===== */
.demo__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}

/* ===== FAQ ===== */
.faq{margin-top:30px;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid #e6ecea;border-radius:var(--radius);padding:18px 20px;box-shadow:0 4px 14px rgba(0,0,0,.04);transition:box-shadow .2s}
.faq details[open]{box-shadow:0 10px 30px rgba(0,0,0,.08)}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-size:1.4rem;font-weight:900;transition:transform .2s}
.faq details[open] summary::after{content:"−"}
.faq p{margin-top:10px;color:var(--muted)}

/* ===== Final CTA ===== */
.final-cta{padding:90px 0;background:linear-gradient(135deg,var(--green-deep) 0%,var(--green-dark) 60%,var(--green) 100%);color:#fff;text-align:center;position:relative;overflow:hidden}
.final-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 0%,rgba(255,255,255,.15),transparent 70%)}
.final-cta__inner{position:relative}
.final-cta h2{color:#fff;font-size:clamp(1.8rem,4vw,3rem);margin-bottom:30px}
.final-cta .btn--cta{background:#fff;color:var(--green-dark)}
.final-cta .btn--cta:hover{background:#f1f5f3;color:var(--green-deep)}
.final-cta .cta__sub{color:rgba(255,255,255,.85)}

/* ===== Footer ===== */
.footer{padding:30px 0;background:#0b141a;color:#9fb1aa;text-align:center;font-size:.9rem}

/* ===== Floating WA Button ===== */
.float-wa{position:fixed;bottom:22px;right:22px;width:60px;height:60px;border-radius:50%;background:var(--green);display:grid;place-items:center;box-shadow:0 12px 30px rgba(37,211,102,.55);z-index:60;animation:pulse 2.2s infinite;transition:transform .2s}
.float-wa:hover{transform:scale(1.08);background:var(--green-dark)}

/* ===== Reveal Animation ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ===== Responsive ===== */
@media (max-width:920px){
  .hero__grid,.demo__grid{grid-template-columns:1fr;gap:50px}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .section{padding:70px 0}
  .hero{padding:50px 0 70px}
  .phone{transform:none}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .btn--xl{padding:18px 24px;font-size:1.05rem;width:100%}
  .btn--nav{padding:9px 14px;font-size:.85rem}
  .float-wa{width:56px;height:56px;bottom:18px;right:18px}
  .chat{height:480px}
  .phone{max-width:320px}
}