:root{
  --bg:#ffffff;
  --text:#0b1220;
  --muted:#556177;
  --muted2:#73809a;
  --card:#ffffff;
  --soft:#f6f8fc;
  --border:rgba(14,23,38,0.10);
  --shadow: 0 18px 60px rgba(14,23,38,0.10);
  --shadow2: 0 10px 30px rgba(14,23,38,0.10);
  --green:#19c58b;
  --green2:#25D366;
  --blue:#6366f1;
  --pink:#ff4fd8;
  --radius:20px;
  --max:1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}

.container{width:min(var(--max), calc(100% - 48px)); margin:0 auto}
@media (max-width:640px){ .container{width:calc(100% - 28px)} }

.bg{position:fixed; inset:0; z-index:-1; pointer-events:none}
.bg__grad{position:absolute; width:900px; height:900px; filter:blur(70px); opacity:.55; border-radius:999px}
.bg__grad--a{left:-340px; top:-260px; background:radial-gradient(circle at 30% 30%, rgba(25,197,139,.26), transparent 60%)}
.bg__grad--b{right:-420px; top:60px; background:radial-gradient(circle at 40% 40%, rgba(99,102,241,.22), transparent 62%)}
.bg__noise{position:absolute; inset:0; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion: reduce){ .bg__grad{filter:blur(60px)} }

/* NAV */
.nav{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.74);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
}
.nav__inner{height:78px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.03em}
.brand__mark{
  width:28px; height:28px; border-radius:10px;
  background: radial-gradient(circle at 30% 30%, rgba(25,197,139,1), rgba(25,197,139,.20) 55%, rgba(99,102,241,.18) 100%);
  box-shadow: 0 10px 30px rgba(25,197,139,.18);
  border:1px solid rgba(25,197,139,.22);
}
.brand--sm .brand__mark{width:24px;height:24px;border-radius:9px}
.brand__name{font-size:16px}

.nav__links{display:flex; gap:16px; color:var(--muted); font-weight:600; font-size:14px}
.nav__links a{padding:10px 10px; border-radius:12px; transition:.15s ease}
.nav__links a:hover{background:rgba(14,23,38,.06); color:var(--text)}

.nav__actions{display:flex; align-items:center; gap:10px}

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-weight:700;
  font-size:14px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow: var(--shadow2)}
.btn--primary{
  border-color: rgba(25,197,139,.28);
  background: linear-gradient(135deg, rgba(25,197,139,1), rgba(37,211,102,1));
  color:#052016;
}
.btn--ghost{background:rgba(255,255,255,.6)}
.btn--lg{padding:13px 16px; border-radius:16px}
.btn--wa{border-color: rgba(37,211,102,.32); background: linear-gradient(135deg, #25D366, #1fb954); color:#052016}
.burger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.burger span{display:block; width:18px; height:2px; background:var(--text); margin:5px auto; border-radius:2px; opacity:.75}

@media (max-width: 900px){
  .nav__links{display:none}
  .burger{display:block}
  .nav__actions .btn--ghost{display:none}
}

/* MOBILE MENU */
.mobileMenu{
  position:fixed; inset:0;
  background:rgba(14,23,38,.28);
  backdrop-filter: blur(6px);
  display:flex; justify-content:flex-end;
  z-index:30;
}
.mobileMenu__panel{
  width:min(360px, 88vw);
  height:100%;
  background:#ffffff;
  border-left:1px solid var(--border);
  padding:16px;
  box-shadow: var(--shadow);
  animation: slideIn .22s ease-out;
}
@keyframes slideIn{from{transform:translateX(18px);opacity:.75}to{transform:translateX(0);opacity:1}}
.mobileMenu__top{display:flex; align-items:center; justify-content:space-between; padding:8px 4px 10px}
.iconBtn{
  width:44px; height:44px; border-radius:14px;
  border:1px solid var(--border);
  background: #fff;
  cursor:pointer;
}
.iconBtn svg{width:18px;height:18px}
.mobileMenu__link{
  display:block;
  padding:14px 12px;
  border-radius:14px;
  font-weight:700;
  color:var(--text);
}
.mobileMenu__link:hover{background:rgba(14,23,38,.06)}
.mobileMenu__cta{width:100%; margin-top:10px}

/* HERO */
.hero{padding: 54px 0 26px}
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 34px;
  align-items:center;
}
@media (max-width: 980px){
  .hero{padding-top:34px}
  .hero__grid{grid-template-columns:1fr; gap:24px}
}

.pillRow{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.pill{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-weight:700;
}
.pill--soft{background:rgba(25,197,139,.10); border-color:rgba(25,197,139,.20); color:#0b2a1f}
.pill--outline{background:transparent}

.hero__title{
  margin:0;
  font-size:54px;
  line-height:1.02;
  letter-spacing:-.055em;
}
@media (max-width:640px){ .hero__title{font-size:40px} }
.grad{
  background: linear-gradient(135deg, rgba(25,197,139,1), rgba(99,102,241,1));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__sub{
  margin:14px 0 0;
  max-width: 56ch;
  color: var(--muted);
  font-size:16px;
  line-height:1.65;
}
.hero__ctas{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.hero__proof{margin-top:18px; display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-weight:700; font-size:13px}
.proofItem{display:flex; align-items:center; gap:8px}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(14,23,38,.18)}
.dot--g{background:rgba(25,197,139,.85)}
.dot--b{background:rgba(99,102,241,.85)}
.dot--p{background:rgba(255,79,216,.75)}

.hero__note{margin-top:14px; color:var(--muted); font-weight:700; font-size:13px; display:flex; align-items:center; gap:10px}
.miniBadge{font-size:11px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#fff}

/* DEVICE MOCKUP */
.device{
  position:relative;
  border-radius: 28px;
  padding: 10px;
}
.device__inner{
  position:relative;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 140ms ease;
  will-change: transform;
}
.laptop{position:relative; width:100%}
.laptop__lid{
  border-radius: 26px;
  border: 1px solid rgba(14,23,38,.12);
  background: linear-gradient(180deg, #ffffff, #f7f9fe);
  box-shadow: var(--shadow);
  padding: 14px;
}
.laptop__camera{
  width: 8px; height: 8px; border-radius: 99px;
  background: rgba(14,23,38,.20);
  margin: 0 auto 10px;
}
.screen{
  background: #0b1220;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.screen__top{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dots{display:flex; gap:6px}
.dots span{width:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.18)}
.screen__title{font-weight:800; font-size:12px; color:rgba(255,255,255,.86); letter-spacing:-.02em}
.chip{
  font-size:11px; font-weight:800;
  padding:6px 10px; border-radius:999px;
  background: rgba(25,197,139,.16);
  border:1px solid rgba(25,197,139,.26);
  color: rgba(208,255,238,.95);
}
.screen__body{padding:12px}
.kpis{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:10px;
}
@media (max-width:640px){ .kpis{grid-template-columns:1fr} }
.kpi{
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.kpi--big{grid-row: span 2}
.kpi__k{font-size:12px; color:rgba(255,255,255,.64); font-weight:700}
.kpi__v{margin-top:6px; font-weight:900; letter-spacing:-.03em; font-size:18px; color:#fff}
.kpi__s{margin-top:3px; font-size:12px; color:rgba(255,255,255,.55)}
.kpi--warn{background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.22)}
.kpi--bad{background: rgba(251,113,133,.12); border-color: rgba(251,113,133,.22)}

.chart{
  margin-top:10px;
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.chart__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.chart__t{font-size:12px; font-weight:800; color:rgba(255,255,255,.74)}
.chart__tag{font-size:11px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.70)}
.spark{width:100%; height:auto; display:block}
.spark__bg{fill:none; stroke: rgba(255,255,255,.18); stroke-width:7; stroke-linecap:round}
.spark__fg{
  fill:none;
  stroke: rgba(25,197,139,.95);
  stroke-width:7;
  stroke-linecap:round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 1.25s ease-out .25s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.chart__foot{display:flex; gap:14px; margin-top:10px; color:rgba(255,255,255,.62); font-size:12px; font-weight:700}
.legend{display:flex; align-items:center; gap:8px}
.lDot{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.72)}
.lDot--g{background:rgba(25,197,139,.92)}

.rows{margin-top:10px; display:grid; gap:8px}
.row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.row__t{font-size:13px; font-weight:800; color:#fff}
.row__m{font-size:12px; color:rgba(255,255,255,.58); margin-top:2px}
.row__a{font-size:13px; font-weight:900; letter-spacing:-.02em}
.row__a--neg{color:rgba(251,113,133,.95)}
.row__a--pos{color:rgba(25,197,139,.95)}

.laptop__base{
  width: 88%;
  height: 22px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(14,23,38,.12), rgba(14,23,38,.06));
  border:1px solid rgba(14,23,38,.10);
  box-shadow: 0 10px 28px rgba(14,23,38,.10);
  position:relative;
}
.laptop__notch{
  width: 120px; height: 6px;
  background: rgba(14,23,38,.12);
  border-radius: 999px;
  position:absolute; left:50%; top: 7px; transform: translateX(-50%);
}

/* floating cards */
.floatCard{
  position:absolute;
  width: 190px;
  border-radius: 18px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow: var(--shadow2);
  padding: 12px;
  animation: float 6.8s ease-in-out infinite;
}
.floatCard--a{left:-18px; top: 18px}
.floatCard--b{right:-16px; bottom: 34px; animation-delay: 1.2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.floatCard__k{font-size:12px; color:var(--muted); font-weight:800}
.floatCard__v{margin-top:6px; font-weight:900; letter-spacing:-.03em}
.floatCard__s{margin-top:4px; font-size:12px; color:var(--muted2); font-weight:700}
.badge{font-size:11px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); font-weight:900}
.badge--g{border-color: rgba(25,197,139,.28); background: rgba(25,197,139,.10); color:#0b2a1f}

/* SECTIONS */
.section{padding: 86px 0}
.section--soft{background: var(--soft); border-top:1px solid rgba(14,23,38,.06); border-bottom:1px solid rgba(14,23,38,.06)}
.section__head{max-width: 76ch; margin:0 auto; text-align:center}
.h2{margin:0; font-size: 36px; letter-spacing:-.045em}
.p{margin: 12px 0 0; color:var(--muted); line-height:1.65; font-size:16px}
@media (max-width:640px){
  .section{padding: 62px 0}
  .h2{font-size: 28px}
}

/* Pain cards */
.painGrid{
  margin-top: 30px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){ .painGrid{grid-template-columns: 1fr; } }
.painCard{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset;
  transition: transform .16s ease, box-shadow .16s ease;
}
.painCard:hover{transform: translateY(-2px); box-shadow: var(--shadow2)}
.painCard__icon{width:44px;height:44px;border-radius:16px; display:flex; align-items:center; justify-content:center; background: rgba(14,23,38,.04); border:1px solid rgba(14,23,38,.08); font-size:18px}
.painCard h3{margin:12px 0 0; font-size:16px; letter-spacing:-.02em}
.painCard p{margin:8px 0 0; color:var(--muted); line-height:1.6}

.quote{
  margin-top: 22px;
  background: #fff;
  border:1px solid var(--border);
  border-radius: 999px;
  padding: 12px 16px;
  display:inline-block;
  box-shadow: var(--shadow2);
  color: var(--text);
  font-weight:800;
  letter-spacing:-.02em;
}

/* Feature cards */
.featureGrid{
  margin-top: 30px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px){ .featureGrid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .featureGrid{grid-template-columns: 1fr} }
.feature{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset;
  transition: transform .16s ease, box-shadow .16s ease;
}
.feature:hover{transform: translateY(-2px); box-shadow: var(--shadow2)}
.feature__icon{width:44px;height:44px;border-radius:16px; display:flex; align-items:center; justify-content:center; background: rgba(25,197,139,.10); border:1px solid rgba(25,197,139,.20); font-size:18px}
.feature h3{margin:12px 0 0; font-size:16px; letter-spacing:-.02em}
.feature p{margin:8px 0 0; color:var(--muted); line-height:1.6}

.steps{
  margin-top: 18px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.step{
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 12px;
  font-weight:800;
  color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.step span{
  width:26px;height:26px;border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(25,197,139,.12);
  border:1px solid rgba(25,197,139,.20);
  color:#0b2a1f;
  font-weight:900;
}

/* Two columns */
.twoCol{
  margin-top: 26px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){ .twoCol{grid-template-columns:1fr} }
.box{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset;
}
.box--muted{background: rgba(255,255,255,.7)}
.box h3{margin:0; font-size:16px; letter-spacing:-.02em}
.box ul{margin:12px 0 0; padding-left: 18px; color:var(--muted); line-height:1.7; font-weight:600}

/* FAQ */
.faq{margin-top: 24px; display:grid; gap: 10px; max-width: 880px; margin-left:auto; margin-right:auto}
.faq__item{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset;
}
.faq__item summary{
  cursor:pointer;
  font-weight:800;
  color:var(--text);
  list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item p{margin:10px 0 0; color:var(--muted); line-height:1.65; font-weight:600}

/* CTA */
.cta{padding: 34px 0 90px}
.cta__box{
  background: linear-gradient(135deg, rgba(25,197,139,.12), rgba(99,102,241,.10));
  border:1px solid rgba(14,23,38,.10);
  border-radius: 26px;
  padding: 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  box-shadow: var(--shadow);
}
@media (max-width: 980px){
  .cta__box{flex-direction:column; align-items:flex-start}
}
.cta__left h2{margin:0; letter-spacing:-.04em}
.cta__left p{margin:10px 0 0; color:var(--muted); font-weight:700}
.cta__hint{margin-top:10px; color:var(--muted); font-weight:700; font-size:13px}

/* Footer */
.footer{
  border-top:1px solid rgba(14,23,38,.08);
  padding: 22px 0 34px;
  background:#fff;
}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
@media (max-width: 640px){ .footer__inner{flex-direction:column; align-items:flex-start} }
.foot__meta{margin-top:8px; color:var(--muted); font-weight:700; font-size:13px}
.foot__link{font-weight:800; color:var(--muted); padding:10px 12px; border-radius:14px; border:1px solid var(--border); background: rgba(14,23,38,.02)}
.foot__link:hover{box-shadow: var(--shadow2)}

/* Reveal */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0s)}
.reveal.in{opacity:1; transform: translateY(0)}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .spark__fg{animation:none; stroke-dashoffset:0}
  .floatCard{animation:none}
  .device__inner{transition:none}
}