/* ==========================================================================
   Grupito — Landing Page (tema claro)
   Paleta oficial: #FFFFFF · #22C55E · #A7F3D0 · #F97316 · #0F0F10
   ========================================================================== */

:root{
  --bg:#FFFFFF;
  --bg-2:#F5F8F6;          /* neutro com leve viés verde */
  --surface:#FFFFFF;
  --surface-2:#F7FAF8;
  --line:#E4EAE6;
  --line-2:#D2DAD5;

  --green:#22C55E;         /* verde da marca (fundos, ícones) */
  --green-t:#15803D;       /* verde para texto sobre branco */
  --green-soft:#EAF9F0;
  --mint:#A7F3D0;
  --orange:#F97316;
  --orange-t:#C2410C;
  --orange-soft:#FFF2E8;

  --text:#0F0F10;
  --text-2:#3F464A;
  --muted:#5D6862;
  --muted-2:#8B948F;

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --max:1200px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Plus Jakarta Sans','Inter',-apple-system,sans-serif;
  --sh-sm:0 1px 2px rgba(15,23,20,.05), 0 4px 12px -6px rgba(15,23,20,.09);
  --sh:0 2px 4px rgba(15,23,20,.04), 0 18px 40px -18px rgba(15,23,20,.20);
  --sh-lg:0 4px 8px rgba(15,23,20,.04), 0 30px 70px -24px rgba(15,23,20,.28);
  --glow:0 0 0 1px rgba(34,197,94,.35), 0 26px 60px -24px rgba(21,128,61,.42);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--display); line-height:1.12; letter-spacing:-.025em; margin:0; font-weight:800; text-wrap:balance}
p{margin:0}
::selection{background:#BBF7D0; color:#052E16}
:focus-visible{outline:3px solid rgba(34,197,94,.55); outline-offset:3px; border-radius:6px}

/* ---------- layout helpers ---------- */
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:22px}
.section{padding:96px 0; position:relative}
.section--tight{padding:72px 0}
.section--alt{background:var(--bg-2); border-block:1px solid var(--line)}
.center{text-align:center}
.g-grad{color:var(--green-t)}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-t); margin-bottom:16px;
}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--green); border-radius:2px}

.h-sec{font-size:clamp(30px,4.4vw,50px); margin-bottom:16px}
.sub-sec{color:var(--muted); font-size:clamp(16px,1.6vw,18px); max-width:640px}
.center .sub-sec{margin-inline:auto}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 26px; border-radius:999px; font-weight:700; font-size:15px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--primary{
  background:linear-gradient(180deg,#1CA84F,#147A3A); color:#fff;
  box-shadow:0 10px 24px -10px rgba(20,122,58,.6), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(20,122,58,.65), inset 0 1px 0 rgba(255,255,255,.32)}
.btn--ghost{background:#fff; border-color:var(--line-2); color:var(--text)}
.btn--ghost:hover{background:var(--surface-2); border-color:#B9C4BE; transform:translateY(-2px)}
.btn--lg{padding:18px 34px; font-size:16px}
.btn--block{width:100%}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:60; transition:background .3s ease, box-shadow .3s ease}
.hdr::after{content:''; position:absolute; inset:auto 0 0; height:1px; background:transparent; transition:background .3s}
.hdr.is-stuck{background:rgba(255,255,255,.88); backdrop-filter:blur(16px) saturate(160%)}
.hdr.is-stuck::after{background:var(--line)}
.hdr__in{display:flex; align-items:center; gap:34px; height:74px}
.hdr__logo img{height:30px; width:auto}
.hdr__nav{display:flex; gap:28px; margin-left:8px}
.hdr__nav a{font-size:14.5px; color:var(--muted); font-weight:500; transition:color .2s}
.hdr__nav a:hover{color:var(--text)}
.hdr__act{margin-left:auto; display:flex; align-items:center; gap:12px}
.hdr__act .btn{padding:11px 20px; font-size:14px}
.hdr__login{font-size:14.5px; font-weight:600; color:var(--text-2); padding:8px 4px}
.hdr__login:hover{color:var(--green-t)}
.burger{display:none; margin-left:auto; background:#fff; border:1px solid var(--line-2); border-radius:10px; padding:9px 10px; cursor:pointer}
.burger span{display:block; width:18px; height:2px; background:var(--text); border-radius:2px}
.burger span+span{margin-top:4px}

/* ---------- hero ---------- */
.hero{position:relative; padding:70px 0 40px; overflow:hidden;
  background:linear-gradient(180deg,#F3FAF5 0%,#FFFFFF 62%)}
.hero__bg{position:absolute; inset:-18% -10% auto; height:900px; pointer-events:none; z-index:0}
.hero__bg::before,.hero__bg::after{content:''; position:absolute; border-radius:50%; filter:blur(90px)}
.hero__bg::before{width:640px;height:640px; left:-6%; top:0; background:radial-gradient(circle,rgba(34,197,94,.26),transparent 68%)}
.hero__bg::after{width:520px;height:520px; right:0; top:12%; background:radial-gradient(circle,rgba(249,115,22,.16),transparent 68%)}
.hero__grid{
  position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(rgba(15,23,20,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,20,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 55% at 50% 25%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 25%,#000,transparent 76%);
}
.hero__in{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}
.badge{
  display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 8px;
  background:#fff; border:1px solid var(--line-2); box-shadow:var(--sh-sm);
  border-radius:999px; font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:22px;
}
.badge b{background:var(--green-t); color:#fff; padding:2px 9px; border-radius:999px; font-size:11px; letter-spacing:.04em; text-transform:uppercase}
.hero h1{font-size:clamp(38px,5.4vw,66px); letter-spacing:-.035em; margin-bottom:20px}
.hero__sub{color:var(--muted); font-size:clamp(16px,1.7vw,19px); max-width:560px; margin-bottom:26px}
.hero__list{list-style:none; padding:0; margin:0 0 30px; display:grid; gap:11px}
.hero__list li{display:flex; align-items:flex-start; gap:11px; font-size:15.5px; color:var(--text-2)}
.hero__list svg{flex:0 0 20px; margin-top:2px}
.hero__btns{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px}
.hero__note{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--muted)}
.avatars{display:flex}
.avatars span{
  width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:-9px;
  background:linear-gradient(135deg,#22C55E,#15803D); display:grid; place-items:center;
  font-size:11px; font-weight:800; color:#fff; box-shadow:var(--sh-sm);
}
.avatars span:first-child{margin-left:0}
.avatars span:nth-child(2){background:linear-gradient(135deg,#FB923C,#EA580C)}
.avatars span:nth-child(3){background:linear-gradient(135deg,#34D399,#0D9488)}

/* visual do hero */
.hero__art{position:relative; display:flex; justify-content:center; align-items:center; min-height:520px}
.hero__mascot{width:min(100%,430px); margin-right:52px; margin-bottom:34px; filter:drop-shadow(0 30px 40px rgba(15,23,20,.22)); animation:float 6s ease-in-out infinite; position:relative; z-index:2}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

.rotator{
  position:absolute; z-index:3; right:-26px; bottom:4px; width:300px;
  background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; backdrop-filter:blur(10px); box-shadow:var(--sh-lg);
}
.rotator__hd{display:flex; align-items:center; justify-content:space-between; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); font-weight:700; margin-bottom:12px}
.live{display:inline-flex; align-items:center; gap:6px; color:var(--green-t)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--green); animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.grp{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:11px; background:var(--surface-2); border:1px solid transparent; margin-bottom:7px; transition:.35s}
.grp__ic{width:30px;height:30px;border-radius:9px;background:#E9F8EF;display:grid;place-items:center;flex:none}
.grp__tx{display:flex; flex-direction:column; min-width:0}
.grp__nm{display:block; font-size:13px; font-weight:600; line-height:1.25; white-space:nowrap}
.grp__mt{display:block; font-size:11px; color:var(--muted-2); white-space:nowrap}
.grp__st{margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:999px}
.grp.is-full{opacity:.6}
.grp.is-full .grp__ic{background:var(--orange-soft)}
.grp.is-full .grp__st{background:var(--orange-soft); color:var(--orange-t)}
.grp.is-active{background:var(--green-soft); border-color:rgba(34,197,94,.4)}
.grp.is-active .grp__st{background:#D3F3E0; color:var(--green-t)}
.grp.is-next .grp__ic{background:#EEF1EF}
.grp.is-next .grp__st{background:#EEF1EF; color:var(--muted)}
.rotator__bar{height:5px; border-radius:99px; background:#EAEEEC; overflow:hidden; margin-top:12px}
.rotator__bar i{display:block; height:100%; width:38%; border-radius:99px; background:linear-gradient(90deg,#15803D,#4ADE80); transition:width .6s ease}
.rotator__ft{display:flex; justify-content:space-between; font-size:11px; color:var(--muted-2); margin-top:8px}

.chip-float{
  position:absolute; z-index:3; display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:11px 15px; font-size:13px; font-weight:600; box-shadow:var(--sh);
  animation:float 7s ease-in-out infinite;
}
.chip-float b{font-family:var(--display); font-size:16px}
.chip-float--a{left:-26px; top:40px}
.chip-float--b{left:-6px; bottom:120px; animation-delay:1.2s}
.chip-float small{display:block; font-size:10.5px; color:var(--muted-2); font-weight:600; letter-spacing:.04em; text-transform:uppercase}

/* ---------- faixa de números ---------- */
.stats{border-block:1px solid var(--line); background:var(--bg-2)}
.stats__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.stat{padding:34px 18px; text-align:center; position:relative}
.stat+.stat::before{content:''; position:absolute; left:0; top:26%; height:48%; width:1px; background:var(--line-2)}
.stat b{display:block; font-family:var(--display); font-size:clamp(28px,3.4vw,40px); font-weight:800; letter-spacing:-.03em; color:var(--text); font-variant-numeric:tabular-nums}
.stat > span{font-size:13.5px; color:var(--muted); display:block; margin-top:4px}

/* ---------- passos ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px}
.step{
  position:relative; padding:32px 28px 30px; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm);
  overflow:hidden; transition:.3s;
}
.step:hover{border-color:rgba(34,197,94,.5); transform:translateY(-4px); box-shadow:var(--sh)}
.step__n{font-family:var(--display); font-size:13px; font-weight:800; color:var(--green-t); letter-spacing:.14em; margin-bottom:18px}
.step__ic{width:50px;height:50px;border-radius:15px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--green-soft); border:1px solid rgba(34,197,94,.28)}
.step h3{font-size:21px; margin-bottom:9px}
.step p{color:var(--muted); font-size:15px}

/* ---------- recursos ---------- */
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:54px}
.feat{
  padding:26px 24px 28px; border-radius:var(--r); background:#fff;
  border:1px solid var(--line); transition:.28s; position:relative; overflow:hidden;
}
.feat:hover{border-color:rgba(34,197,94,.45); transform:translateY(-4px); box-shadow:var(--sh)}
.feat__ic{width:44px;height:44px;border-radius:13px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--green-soft); border:1px solid rgba(34,197,94,.22)}
.feat:nth-child(4n+2) .feat__ic{background:var(--orange-soft); border-color:rgba(249,115,22,.24)}
.feat h3{font-size:17px; margin-bottom:7px}
.feat p{font-size:14.2px; color:var(--muted); line-height:1.6}

/* ---------- templates ---------- */
.tpl-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center}
.tpl-stack{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.tpl{
  border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff;
  box-shadow:var(--sh); transition:.32s cubic-bezier(.2,.7,.3,1);
}
.tpl:nth-child(1){transform:translateY(14px)} .tpl:nth-child(3){transform:translateY(14px)}
.tpl:hover{transform:translateY(-6px); border-color:rgba(34,197,94,.5); box-shadow:var(--sh-lg)}
.tpl__bar{display:flex; gap:5px; padding:9px 11px; background:var(--surface-2); border-bottom:1px solid var(--line)}
.tpl__bar i{width:7px;height:7px;border-radius:50%;background:#D6DDD9}
.tpl__body{padding:16px 14px 18px; background:#fff}
.tpl__logo{width:30px;height:30px;border-radius:9px; margin:0 auto 10px; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:14px; color:#fff}
.tpl__t{height:8px; border-radius:4px; background:#C9D2CD; margin:0 auto 6px; width:78%}
.tpl__t.s{width:54%; background:#E1E7E4; height:6px; margin-bottom:12px}
.tpl__btn{height:24px; border-radius:8px; margin-bottom:7px; display:grid; place-items:center; font-size:8px; font-weight:800; color:#fff; letter-spacing:.04em}
.tpl__row{height:9px;border-radius:4px;background:#EEF2F0; margin-bottom:5px}
.tpl__cap{padding:11px 13px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; background:#fff; gap:8px}
.tpl__cap b{font-size:13px}
.tpl__cap span{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:999px; background:var(--green-soft); color:var(--green-t); text-align:center}
.tpl-list{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px}
.tpl-list li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--text-2)}
.tpl-list svg{flex:none; margin-top:3px}

/* ---------- dashboard ---------- */
.dash-wrap{display:grid; grid-template-columns:1fr 1.25fr; gap:52px; align-items:center}
.dash{
  border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden;
  background:#fff; box-shadow:var(--sh-lg);
}
.dash__hd{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.dash__hd i{width:9px;height:9px;border-radius:50%;background:#D6DDD9}
.dash__hd i:first-child{background:#FDBA74}
.dash__hd span{margin-left:8px; font-size:12px; color:var(--muted-2); font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.dash__body{padding:20px; background:var(--surface-2)}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px}
.kpi{padding:14px; border-radius:14px; background:#fff; border:1px solid var(--line)}
.kpi small{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); font-weight:700; margin-bottom:6px}
.kpi b{font-family:var(--display); font-size:24px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.kpi u{display:inline-block; text-decoration:none; font-size:11px; font-weight:700; color:var(--green-t); margin-left:6px}
.chart{padding:16px; border-radius:14px; background:#fff; border:1px solid var(--line); margin-bottom:14px}
.chart__hd{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.chart__hd b{font-size:13.5px}
.chart__hd span{font-size:11px; color:var(--muted-2)}
.bars{display:flex; align-items:flex-end; gap:8px; height:112px}
.bars div{flex:1; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,#22C55E,#A7F3D0); transition:height 1s cubic-bezier(.2,.8,.2,1)}
.bars div:last-child{background:linear-gradient(180deg,#F97316,#FED7AA)}
.bars-x{display:flex; gap:8px; margin-top:7px}
.bars-x span{flex:1; text-align:center; font-size:10px; color:var(--muted-2)}
.src{padding:16px; border-radius:14px; background:#fff; border:1px solid var(--line)}
.src__row{display:flex; align-items:center; gap:10px; margin-bottom:11px}
.src__row:last-child{margin-bottom:0}
.src__dot{width:8px;height:8px;border-radius:50%;flex:none}
.src__nm{font-size:12.5px; color:var(--text-2); min-width:132px}
.src__track{flex:1; height:6px; border-radius:99px; background:#EDF1EF; overflow:hidden}
.src__track i{display:block; height:100%; border-radius:99px; transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.src__pct{font-size:12px; font-weight:700; color:var(--muted); width:34px; text-align:right; font-variant-numeric:tabular-nums}

/* ---------- piloto automático ---------- */
.auto__card{
  display:grid; grid-template-columns:1fr .82fr; gap:44px; align-items:center;
  border-radius:var(--r-xl); border:1px solid var(--line); padding:52px;
  background:radial-gradient(120% 140% at 10% 0%,#EAF9F0,transparent 58%),#fff;
  box-shadow:var(--sh);
}
.auto-tags{display:flex; flex-wrap:wrap; gap:9px; margin-top:24px}
.auto-tags span{font-size:13px; padding:8px 14px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--text-2)}

.auto__panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px; box-shadow:var(--sh-lg);
}
.auto__hd{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2);
}
.auto__now small{display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:2px}
.auto__now b{font-family:var(--display); font-size:24px; letter-spacing:-.02em; display:block; margin-bottom:16px}
.auto__bar{height:10px; border-radius:99px; background:#EDF1EF; overflow:hidden}
.auto__bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#15803D,#4ADE80)}
.auto__nums{display:flex; justify-content:space-between; align-items:baseline; margin-top:9px; font-size:13px; color:var(--muted)}
.auto__nums b{font-family:var(--display); font-size:15px; color:var(--green-t); font-variant-numeric:tabular-nums}
.auto__next{
  display:flex; align-items:center; gap:11px; margin-top:20px; padding:12px 14px;
  border-radius:12px; background:var(--green-soft); border:1px solid rgba(34,197,94,.3);
}
.auto__ic{width:30px;height:30px;border-radius:9px;background:#fff;display:grid;place-items:center;flex:none;border:1px solid rgba(34,197,94,.25)}

/* ---------- preços ---------- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; align-items:stretch}
.plans--2{grid-template-columns:repeat(2,1fr); max-width:840px; margin-inline:auto}
.plan{
  padding:32px 28px; border-radius:var(--r-lg); background:#fff;
  border:1px solid var(--line); display:flex; flex-direction:column; transition:.3s; position:relative;
  box-shadow:var(--sh-sm);
}
.plan:hover{transform:translateY(-4px); box-shadow:var(--sh)}
.plan--hot{
  background:linear-gradient(180deg,#F1FBF5,#fff 42%);
  border-color:rgba(34,197,94,.5); box-shadow:var(--glow);
}
.plan--hot:hover{transform:translateY(-4px)}
.plan__tag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--green-t); color:#fff; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 14px; border-radius:999px}
.plan h3{font-size:19px; margin-bottom:6px}
.plan__res{font-size:14px; color:var(--muted); min-height:44px}
.plan__price{display:flex; align-items:flex-end; gap:6px; margin:18px 0 22px}
.plan__price em{font-style:normal; font-size:17px; color:var(--muted); font-weight:600; margin-bottom:9px}
.plan__price b{font-family:var(--display); font-size:52px; font-weight:800; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.plan__price span{font-size:14px; color:var(--muted); margin-bottom:10px}
.plan ul{list-style:none; padding:0; margin:0 0 26px; display:grid; gap:11px}
.plan li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--text-2)}
.plan li svg{flex:none; margin-top:3px}
.plan .btn{margin-top:auto}

/* ---------- depoimentos ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px}
.quote{padding:28px 26px; border-radius:var(--r); background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm)}
.quote__stars{color:var(--orange); font-size:13px; letter-spacing:2px; margin-bottom:12px}
.quote p{font-size:15px; color:var(--text-2); margin-bottom:18px}
.quote__who{display:flex; align-items:center; gap:11px}
.quote__av{width:38px;height:38px;border-radius:50%; background:linear-gradient(135deg,#22C55E,#15803D); display:grid; place-items:center; font-weight:800; color:#fff; font-size:14px}
.quote__tx{display:flex; flex-direction:column}
.quote__who b{display:block; font-size:14px; font-family:var(--display); color:var(--text)}
.quote__tx span{font-size:12.5px; color:var(--muted-2)}
.note{font-size:12.5px; color:var(--muted-2); margin-top:20px; text-align:center}
.note code{background:var(--surface-2); border:1px solid var(--line); padding:1px 6px; border-radius:6px; font-size:12px}

/* ---------- faq ---------- */
.faq{max-width:820px; margin:48px auto 0; display:grid; gap:12px}
.faq details{border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; transition:.25s; box-shadow:var(--sh-sm)}
.faq details[open]{border-color:rgba(34,197,94,.45)}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 22px; font-weight:700; font-family:var(--display);
  font-size:16.5px; display:flex; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; margin-left:auto; flex:none; width:11px;height:11px; border-right:2px solid var(--green-t); border-bottom:2px solid var(--green-t);
  transform:rotate(45deg) translateY(-3px); transition:transform .28s;
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq p{padding:0 22px 22px; color:var(--muted); font-size:15px}

/* ---------- cta final ---------- */
.cta{
  position:relative; border-radius:var(--r-xl); overflow:hidden; padding:56px 56px 0;
  border:1px solid rgba(34,197,94,.35);
  background:radial-gradient(100% 130% at 82% 0%,#E7F8EE,transparent 62%),linear-gradient(180deg,#F5FBF7,#fff);
  box-shadow:var(--sh);
  display:grid; grid-template-columns:1.15fr .85fr; gap:30px; align-items:end;
}
.cta__txt{padding-bottom:56px}
.cta h2{font-size:clamp(30px,4vw,46px); margin-bottom:14px}
.cta p{color:var(--muted); font-size:17px; max-width:520px; margin-bottom:26px}
.cta__btns{display:flex; flex-wrap:wrap; gap:12px}
.cta__mascot{width:min(100%,330px); margin:0 auto; display:block; filter:drop-shadow(0 22px 30px rgba(15,23,20,.2))}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line); padding:56px 0 34px; margin-top:96px; background:var(--bg-2)}
.ftr__top{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:34px; padding-bottom:38px}
.ftr__logo img{height:28px; margin-bottom:16px}
.ftr__top p{font-size:14px; color:var(--muted); max-width:300px}
.ftr h4{font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--text); margin-bottom:16px; font-weight:800}
.ftr ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.ftr li a{font-size:14px; color:var(--muted); transition:color .2s}
.ftr li a:hover{color:var(--green-t)}
.ftr__bt{border-top:1px solid var(--line-2); padding-top:22px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:13px; color:var(--muted-2)}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}


/* ==========================================================================
   ANIMAÇÕES
   ========================================================================== */

/* entrada do hero, em sequência */
@keyframes riseIn{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:none}}
@keyframes fadeScale{from{opacity:0; transform:scale(.96)}to{opacity:1; transform:none}}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(28px,-18px,0) scale(1.08)}
}
@keyframes swapIn{
  0%{transform:translateY(-6px); opacity:.35}
  60%{transform:translateY(1px); opacity:1}
  100%{transform:none; opacity:1}
}
@keyframes ring{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}
  100%{box-shadow:0 0 0 14px rgba(34,197,94,0)}
}
@keyframes shimmer{0%{background-position:-180% 0}100%{background-position:180% 0}}

.hero__txt > *{animation:riseIn .75s cubic-bezier(.2,.7,.3,1) both}
.hero__txt > *:nth-child(1){animation-delay:.05s}
.hero__txt > *:nth-child(2){animation-delay:.14s}
.hero__txt > *:nth-child(3){animation-delay:.23s}
.hero__txt > *:nth-child(4){animation-delay:.32s}
.hero__txt > *:nth-child(5){animation-delay:.41s}
.hero__txt > *:nth-child(6){animation-delay:.50s}
.hero__art{animation:fadeScale .9s cubic-bezier(.2,.7,.3,1) .28s both}
.hero__bg::before{animation:drift 20s ease-in-out infinite}
.hero__bg::after{animation:drift 26s ease-in-out infinite reverse}

/* troca de grupo na demonstração */
.grp__nm{transition:color .3s}
.grp--swap{animation:swapIn .5s cubic-bezier(.2,.7,.3,1)}
.grp.is-active.grp--swap{animation:swapIn .5s cubic-bezier(.2,.7,.3,1), ring .9s ease-out}
.rotator__bar i{transition:width .5s cubic-bezier(.3,.8,.4,1)}
.rotator__bar i.is-reset{transition:width .28s ease}

/* barra do piloto automático */
.auto__bar i{width:0; transition:width 1.4s cubic-bezier(.2,.8,.2,1)}

/* botão primário com brilho no hover */
.btn--primary{position:relative; overflow:hidden}
.btn--primary::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  background-size:220% 100%;
}
.btn--primary:hover::after{opacity:1; animation:shimmer .9s ease-out}

/* sublinhado do menu */
.hdr__nav a{position:relative}
.hdr__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px;
  background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.hdr__nav a:hover::after{transform:scaleX(1)}

/* cards de recurso: ícone reage no hover */
.feat__ic,.step__ic{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.feat:hover .feat__ic,.step:hover .step__ic{transform:translateY(-3px) rotate(-4deg)}

/* linhas de origem do dashboard */
.src__row{transition:background .25s; border-radius:8px}
.src__row:hover{background:var(--surface-2)}

/* ---------- responsivo ---------- */
@media (max-width:1080px){
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .hero__in,.tpl-wrap,.dash-wrap,.auto__card,.cta{grid-template-columns:1fr}
  .hero__art{min-height:440px; order:2}
  .rotator{right:0}
  .tpl-wrap,.dash-wrap{gap:40px}
  .auto__card{padding:40px 32px}
  .cta{padding:44px 32px 0}
  .cta__txt{padding-bottom:20px}
  .cta__mascot{max-width:260px}
}
@media (max-width:860px){
  .hdr__nav,.hdr__act{display:none}
  .burger{display:block}
  .steps,.plans,.plans--2,.quotes{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3)::before{display:none}
  .ftr__top{grid-template-columns:1fr 1fr}
  .section{padding:72px 0}
}
@media (max-width:560px){
  .feat-grid{grid-template-columns:1fr}
  .tpl-stack{grid-template-columns:1fr; max-width:300px; margin-inline:auto}
  .tpl:nth-child(1),.tpl:nth-child(3){transform:none}
  .chip-float--a{left:-6px; top:8px; padding:9px 12px}
  .chip-float--b{display:none}
  .rotator{width:100%; position:relative; right:auto; bottom:auto; margin-top:18px}
  .hero__art{flex-direction:column; min-height:0}
  .hero__mascot{margin-right:0}
  .kpis{grid-template-columns:1fr}
  .src__nm{min-width:100px; font-size:11.5px}
  .ftr__top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none}
  .hero__txt > *,.hero__art{opacity:1; transform:none}
  .auto__bar i{width:84% !important}
}