/* ============================================================
   AtendeJá — Landing page
   ============================================================ */

:root{
  /* neutros frios sem viés azul */
  --bg:            #08090a;
  --bg-2:          #0a0c0c;
  --surface:       #0e1111;
  --surface-2:     #131717;
  --line:          #1c2121;
  --line-2:        #283030;

  --green:         #22c55e;
  --green-2:       #16a34a;
  --green-3:       #4ade80;
  --green-dim:     rgba(34,197,94,.10);

  --text:          #e7eae9;
  --text-2:        #99a3a1;
  --text-3:        #6b7573;

  --r-xs:          4px;
  --r-sm:          6px;
  --r:             8px;
  --r-lg:          12px;

  --maxw:          1200px;
  --header-h:      64px;

  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ease:          cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 24px);
  /* o mockup do hero sangra à direita de propósito; clip corta sem quebrar o sticky */
  overflow-x:clip;
}

body{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  /* NÃO colocar overflow aqui: torna o body um contêiner de rolagem e quebra
     o position:sticky do header. O overflow-x:clip do html já corta a sangria. */
}

img,svg{ max-width:100%; }
img{ height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.12; letter-spacing:-.032em; }
p{ margin:0; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; position:relative; }

.skip-link{
  position:absolute; left:-9999px; top:8px; z-index:200;
  background:var(--green); color:#04120a; padding:9px 14px; border-radius:var(--r); font-weight:600;
}
.skip-link:focus{ left:16px; }

:focus-visible{ outline:2px solid var(--green-3); outline-offset:2px; border-radius:var(--r-xs); }

.grad{
  background:linear-gradient(96deg,#8ef0ab,var(--green) 45%,var(--green-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* micro-label das seções */
.label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-3); margin-bottom:16px;
}
.label::before{ content:""; width:16px; height:1px; background:var(--green); opacity:.6; }

/* ============================================================
   FUNDO: grade + brilhos animados + ruído
   ============================================================ */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.bg__grid{
  position:absolute; inset:-1px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 70% at 50% 0%, #000 0%, rgba(0,0,0,.45) 45%, transparent 78%);
  mask-image:radial-gradient(120% 70% at 50% 0%, #000 0%, rgba(0,0,0,.45) 45%, transparent 78%);
}

.bg__glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.bg__glow--1{
  width:620px; height:620px; top:-220px; left:-120px;
  background:radial-gradient(circle, rgba(34,197,94,.30), transparent 68%);
  animation:drift1 26s var(--ease) infinite alternate;
}
.bg__glow--2{
  width:520px; height:520px; top:-160px; right:-140px;
  background:radial-gradient(circle, rgba(20,150,110,.26), transparent 68%);
  animation:drift2 32s var(--ease) infinite alternate;
}
@keyframes drift1{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(120px,60px,0) scale(1.12); }
  100%{ transform:translate3d(40px,140px,0) scale(.95); }
}
@keyframes drift2{
  0%{ transform:translate3d(0,0,0) scale(1.05); }
  50%{ transform:translate3d(-130px,90px,0) scale(.92); }
  100%{ transform:translate3d(-60px,20px,0) scale(1.1); }
}

.bg__noise{
  position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

main,.site-header,.footer{ position:relative; z-index:1; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  --sheen:transparent;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:13.5px; font-weight:600; line-height:1; letter-spacing:-.01em;
  padding:11px 17px; border-radius:var(--r); border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}
.btn svg{ transition:transform .22s var(--ease); }
.btn:hover svg{ transform:translateX(2px); }
.btn:active{ transform:translateY(1px); }

/* light sweep */
.btn::after{
  content:""; position:absolute; top:0; bottom:0; width:45%;
  background:linear-gradient(100deg, transparent, var(--sheen), transparent);
  transform:translateX(-180%) skewX(-18deg);
}
.btn:hover::after{ animation:sweep .75s var(--ease); }
@keyframes sweep{ to{ transform:translateX(360%) skewX(-18deg); } }

.btn--primary{
  --sheen:rgba(255,255,255,.45);
  background:var(--green); color:#04150b;
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary:hover{ background:var(--green-3); }

.btn--outline{
  --sheen:rgba(255,255,255,.10);
  border-color:var(--line-2); color:var(--text); background:rgba(255,255,255,.02);
}
.btn--outline:hover{ border-color:#3a4645; background:rgba(255,255,255,.05); }

.btn--ghost{ color:var(--text-2); padding-inline:10px; }
.btn--ghost:hover{ color:var(--text); }

.btn--block{ width:100%; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(8,9,10,.7);
  backdrop-filter:blur(12px) saturate(1.4); -webkit-backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.site-header.is-stuck{ border-bottom-color:var(--line); background:rgba(8,9,10,.9); }

.header__inner{ height:var(--header-h); display:flex; align-items:center; gap:28px; }

.logo{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; }
.logo__text{ font-size:16px; font-weight:600; letter-spacing:-.03em; }
.logo__text span{ color:var(--green); }

.nav{ display:flex; align-items:center; gap:4px; margin-inline:auto; }
.nav > a{
  font-size:13.5px; font-weight:450; color:var(--text-2);
  padding:7px 11px; border-radius:var(--r-sm);
  transition:color .16s var(--ease), background .16s var(--ease);
}
.nav > a:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.nav__actions{ display:none; }

.header__actions{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }

.burger{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  width:36px; height:36px; padding:0 9px;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer;
}
.burger span{ display:block; height:1.5px; background:var(--text); border-radius:2px; transition:transform .25s var(--ease), opacity .2s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:76px 0 84px; }
.hero__inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:48px; align-items:center;
}

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 12px 5px 9px; margin-bottom:22px;
  border:1px solid var(--line-2); border-radius:999px;
  background:rgba(255,255,255,.025);
  font-size:12px; font-weight:500; color:var(--text-2); letter-spacing:.01em;
}
.chip__dot{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px rgba(34,197,94,.16);
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.hero h1{
  font-size:clamp(1.8rem,2.1vw + .6rem,2.45rem);
  font-weight:600; margin-bottom:20px; text-wrap:balance;
}
.lead{ color:var(--text-2); font-size:15.5px; max-width:46ch; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 36px; }

.hero__facts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 24px;
  padding-top:26px; border-top:1px solid var(--line); max-width:520px;
}
.hero__facts li{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-3); }
.hero__facts svg{ width:15px; height:15px; color:var(--green); flex:0 0 auto; }

/* ---- moldura do produto ---- */
.hero__app{ position:relative; }
.frame{
  position:relative;
  width:min(138%,700px);
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:var(--bg-2);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow:hidden;
  animation:hover-float 9s ease-in-out infinite;
}
@keyframes hover-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }

/* light sweep periódico atravessando o mockup */
.frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.055) 50%, transparent 65%);
  transform:translateX(-100%);
  animation:frame-sweep 7s var(--ease) 2s infinite;
}
@keyframes frame-sweep{ 0%{ transform:translateX(-100%) } 45%,100%{ transform:translateX(100%) } }

.frame__bar{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.015);
}
.frame__dots{ display:inline-flex; gap:5px; }
.frame__dots i{ width:8px; height:8px; border-radius:50%; background:#2b3333; }
.frame__title{ font-size:11px; color:var(--text-3); margin-inline:auto; letter-spacing:.01em; }
.frame__live{ display:inline-flex; align-items:center; gap:5px; font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.1em; }
.live{ width:6px; height:6px; border-radius:50%; background:var(--green); animation:ping 1.8s ease-out infinite; }
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.5) }
  70%{ box-shadow:0 0 0 6px rgba(34,197,94,0) }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0) }
}

/* Print real do sistema, quando usado no lugar do mockup em HTML (ver README) */
.frame picture{ display:block; }
.app-shot{ display:block; width:100%; height:auto; }

/* ---- mockup ---- */
.app{
  display:grid; grid-template-columns:154px minmax(0,1fr) minmax(0,.9fr);
  height:472px; overflow:hidden;
  font-size:11px; line-height:1.35;
}
.app *{ min-width:0; }
.app > *{ height:100%; min-height:0; overflow:hidden; }

.app__side{ background:rgba(255,255,255,.012); border-right:1px solid var(--line); padding:11px 9px; display:flex; flex-direction:column; }
.app__brand{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; margin-bottom:12px; }
.app__group{ font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin:10px 0 4px 6px; }
.app__menu li{
  display:flex; align-items:center; gap:7px; color:var(--text-2);
  padding:4px 7px; border-radius:var(--r-xs); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.app__menu li.is-active{ background:var(--green-dim); color:var(--green-3); font-weight:600; }
.app__user{ margin-top:auto; padding-top:10px; border-top:1px solid var(--line); display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.app__user strong{ display:block; font-size:10.5px; }
.app__user small{ font-size:8.5px; color:var(--text-3); }

.app__list{ border-right:1px solid var(--line); padding:11px; display:flex; flex-direction:column; gap:9px; }
.app__tabs{ display:flex; align-items:center; gap:11px; font-size:10.5px; color:var(--text-2); }
.app__tabs > span{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.app__tabs .is-active{ color:var(--green-3); font-weight:600; }
.app__tabs-right{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; }
.pill{ display:inline-grid; place-items:center; min-width:15px; height:15px; padding:0 4px; border-radius:var(--r-xs); background:rgba(255,255,255,.07); font-size:9px; }
.pill--green{ background:var(--green); color:#04150b; }
.pill--amber{ background:#d97706; color:#fff; }

.app__chips{ display:flex; flex-wrap:wrap; gap:5px; }
.chip-x{ display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border:1px solid var(--line); border-radius:var(--r-xs); font-size:9px; color:var(--text-2); }
.chip-x.is-active{ border-color:rgba(34,197,94,.5); color:var(--green-3); background:var(--green-dim); }
.dot{ width:5px; height:5px; border-radius:50%; display:inline-block; }
.dot--green{ background:var(--green); } .dot--amber{ background:#d97706; } .dot--red{ background:#dc2626; }

.app__search{ display:flex; gap:6px; }
.app__search .input{
  flex:1; display:flex; align-items:center; gap:6px; padding:6px 9px; font-size:10px; color:var(--text-3);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
}
.app__search .add{ display:grid; place-items:center; width:28px; border-radius:var(--r-sm); background:var(--green); color:#04150b; font-weight:700; }

.app__tickets{ display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.app__tickets li{
  display:flex; gap:8px; padding:7px; border:1px solid transparent; border-radius:var(--r-sm);
  transition:background .2s var(--ease);
}
.app__tickets li:hover{ background:rgba(255,255,255,.02); }
.app__tickets li.is-active{ background:var(--surface-2); border-color:rgba(34,197,94,.35); }
.tk{ flex:1; min-width:0; }
.tk__top{ font-size:10.5px; color:var(--text-2); display:flex; align-items:baseline; gap:4px; }
.tk__top strong{ color:var(--text); font-weight:600; }
.tk__time{ margin-left:auto; font-size:9px; color:var(--text-3); flex:0 0 auto; }
.tk__msg{ font-size:10px; color:var(--text-3); margin:2px 0 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk__meta{ display:flex; align-items:center; gap:5px; font-size:8.5px; }
.tag{ padding:2px 5px; border-radius:var(--r-xs); background:rgba(34,197,94,.13); color:var(--green-3); }
.tag--fin{ background:rgba(148,163,184,.14); color:#cbd5e1; }
.tag--user{ background:rgba(255,255,255,.05); color:var(--text-2); }
.tk__id{ margin-left:auto; color:var(--text-3); }

.app__chat{ display:flex; flex-direction:column; }
.app__chat-head{ display:flex; align-items:center; gap:8px; padding:10px 11px; border-bottom:1px solid var(--line); }
.app__chat-head strong{ font-size:11px; display:block; font-weight:600; }
.app__chat-head small{ font-size:9px; color:var(--text-3); }
.app__bubbles{ flex:1; display:flex; flex-direction:column; gap:8px; padding:13px 11px; overflow:hidden; }
.bubble{
  align-self:flex-start; max-width:84%; padding:7px 10px 13px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line); font-size:10.5px; position:relative;
  animation:bubble-in .5s var(--ease) both;
}
.bubble:nth-child(1){ animation-delay:.15s } .bubble:nth-child(2){ animation-delay:.3s }
.bubble:nth-child(3){ animation-delay:.45s } .bubble:nth-child(4){ animation-delay:.6s }
@keyframes bubble-in{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.bubble--sm{ max-width:52%; }
.bubble--out{ align-self:flex-end; background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.26); }
.bubble time{ position:absolute; right:8px; bottom:3px; font-size:8px; color:var(--text-3); }

.typing{ align-self:flex-start; display:flex; gap:3px; padding:8px 10px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); }
.typing i{ width:4px; height:4px; border-radius:50%; background:var(--text-3); animation:typing 1.4s ease-in-out infinite; }
.typing i:nth-child(2){ animation-delay:.2s } .typing i:nth-child(3){ animation-delay:.4s }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-3px); opacity:1 } }

.app__composer{
  display:flex; align-items:center; gap:9px; padding:10px 11px; border-top:1px solid var(--line);
  font-size:10px; color:var(--text-3);
}

/* ícones do mockup */
[data-ico]{ width:11px; height:11px; flex:0 0 auto; display:inline-block; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; opacity:.8; }
[data-ico="headset"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 14v-2a8 8 0 0116 0v2'/%3E%3Crect x='2' y='13' width='4' height='7' rx='2'/%3E%3Crect x='18' y='13' width='4' height='7' rx='2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 14v-2a8 8 0 0116 0v2'/%3E%3Crect x='2' y='13' width='4' height='7' rx='2'/%3E%3Crect x='18' y='13' width='4' height='7' rx='2'/%3E%3C/svg%3E"); }
[data-ico="ai"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Ccircle cx='12' cy='18' r='2.5'/%3E%3Cpath d='M7.5 8l3.5 7.5M16.5 8L13 15.5M8.5 6h7'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Ccircle cx='12' cy='18' r='2.5'/%3E%3Cpath d='M7.5 8l3.5 7.5M16.5 8L13 15.5M8.5 6h7'/%3E%3C/svg%3E"); }
[data-ico="chat"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E"); }
[data-ico="calendar"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E"); }
[data-ico="bolt"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h8l-1 8 10-12h-8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h8l-1 8 10-12h-8z'/%3E%3C/svg%3E"); }
[data-ico="phone"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
[data-ico="user"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 016-6h4a6 6 0 016 6v1'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 016-6h4a6 6 0 016 6v1'/%3E%3C/svg%3E"); }
[data-ico="building"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 7h1M14 7h1M9 11h1M14 11h1M9 15h6v6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 7h1M14 7h1M9 11h1M14 11h1M9 15h6v6'/%3E%3C/svg%3E"); }
[data-ico="chart"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 20V10M12 20V4M18 20v-7'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 20V10M12 20V4M18 20v-7'/%3E%3C/svg%3E"); }
[data-ico="history"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
[data-ico="gear"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2'/%3E%3C/svg%3E"); }
[data-ico="grid"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
[data-ico="users"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='10' r='2.5'/%3E%3Cpath d='M3 20v-1a5 5 0 015-5h2a5 5 0 015 5v1'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='10' r='2.5'/%3E%3Cpath d='M3 20v-1a5 5 0 015-5h2a5 5 0 015 5v1'/%3E%3C/svg%3E"); }
[data-ico="search"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); }
[data-ico="plus"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
[data-ico="smile"]{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14a4.5 4.5 0 007 0M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14a4.5 4.5 0 007 0M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E"); }

/* avatares */
.av{
  display:grid; place-items:center; flex:0 0 auto;
  width:24px; height:24px; border-radius:var(--r-sm);
  font-size:10px; font-weight:700; color:#04150b;
}
.app__user .av{ width:21px; height:21px; }
.av--g{ background:linear-gradient(140deg,#4ade80,#16a34a); }
.av--1{ background:linear-gradient(140deg,#7dd3fc,#0284c7); color:#04121c; }
.av--2{ background:linear-gradient(140deg,#4ade80,#15803d); }
.av--3{ background:linear-gradient(140deg,#fcd34d,#d97706); color:#241500; }
.av--4{ background:linear-gradient(140deg,#fda4af,#be123c); color:#2a0410; }
.av--5{ background:linear-gradient(140deg,#c4b5fd,#6d28d9); color:#f5f3ff; }

/* ============================================================
   CLIENTES (marquee)
   ============================================================ */
.clients{ padding:32px 0 44px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.clients__title{
  text-align:center; font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-3); font-weight:500; margin-bottom:26px;
}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:56px; width:max-content;
  animation:marquee var(--marquee-dur,34s) linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%) } }
.marquee__track li{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:14px; font-weight:500; color:var(--text-3);
  transition:color .2s var(--ease);
}
.marquee__track li:hover{ color:var(--text-2); }
.marquee__track svg{ width:17px; height:17px; }
.marquee__track .wordmark{ font-size:20px; font-weight:400; letter-spacing:.01em; }

/* ============================================================
   SEÇÕES
   ============================================================ */
.section{ padding:72px 0; }
.section--last{ padding-bottom:88px; }
.section__head{ max-width:620px; margin-bottom:44px; }
.section__head h2{ font-size:clamp(1.6rem,2vw + .55rem,2.1rem); }
.section__sub{ color:var(--text-2); margin-top:14px; font-size:14.5px; }

/* ---- spotlight que segue o mouse (via JS) ---- */
[data-spotlight] > *{ position:relative; }
[data-spotlight] > *::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(34,197,94,.10), transparent 70%);
  opacity:0; transition:opacity .3s var(--ease); z-index:0;
}
[data-spotlight] > *:hover::before{ opacity:1; }
[data-spotlight] > * > *{ position:relative; z-index:1; }

/* ---- cards de recursos ---- */
.cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.card{
  padding:24px 22px 26px; background:var(--bg);
  transition:background .25s var(--ease);
}
.card:hover{ background:var(--surface); }
.card__ico{
  display:grid; place-items:center; width:34px; height:34px; margin-bottom:16px;
  border-radius:var(--r-sm); background:var(--green-dim); color:var(--green-3);
  border:1px solid rgba(34,197,94,.18);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.card:hover .card__ico{ transform:translateY(-2px); background:rgba(34,197,94,.16); }
.card__ico svg{ width:17px; height:17px; }
.card h3{ font-size:14.5px; font-weight:600; margin-bottom:7px; }
.card p{ font-size:13px; color:var(--text-2); }

/* ---- benefícios ---- */
.benefits{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; align-items:center; }
.benefits__media{ position:relative; margin:0; }
.benefits__media img{
  width:100%; aspect-ratio:5/4; object-fit:cover;
  border-radius:var(--r-lg); border:1px solid var(--line-2);
}
.stat{
  position:absolute; width:172px; padding:13px 15px;
  background:rgba(10,12,12,.92); backdrop-filter:blur(10px);
  border:1px solid var(--line-2); border-radius:var(--r);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.9);
  animation:hover-float 11s ease-in-out infinite;
}
.stat--br{ animation-delay:-5s; }
.stat strong{ display:block; font-size:22px; font-weight:600; color:var(--green-3); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.stat span{ display:block; font-size:11.5px; color:var(--text-2); line-height:1.35; margin-top:2px; }
.stat .spark{ display:block; width:100%; height:24px; margin-top:8px; color:var(--green); opacity:.7; }
.stat--tl{ top:18px; left:-28px; }
.stat--br{ bottom:18px; right:-28px; }

.benefits__copy h2{ font-size:clamp(1.6rem,2vw + .55rem,2.1rem); margin-bottom:26px; }

.checklist{ display:flex; flex-direction:column; gap:12px; }
.checklist li{ position:relative; padding-left:26px; color:var(--text-2); font-size:14px; }
.checklist li::after{
  content:""; position:absolute; left:2px; top:6px; width:11px; height:11px;
  background:var(--green);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E");
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.checklist--sm li{ font-size:13px; }

/* ---- calculadora de preço ---- */
.calc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.calc__controls{ background:var(--bg); padding:28px 26px; display:flex; flex-direction:column; gap:28px; }

.field label{ display:block; font-size:14.5px; font-weight:600; margin-bottom:12px; }
.field label span{ display:block; font-size:12px; font-weight:400; color:var(--text-3); margin-top:2px; letter-spacing:0; }
.field__nota{ font-size:12px; color:var(--text-3); margin-top:12px; }

.stepper{ display:inline-flex; align-items:stretch; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; }
.stepper__btn{
  width:36px; background:rgba(255,255,255,.03); border:0; color:var(--text-2);
  font-family:inherit; font-size:16px; line-height:1; cursor:pointer;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.stepper__btn:hover{ background:rgba(255,255,255,.07); color:var(--text); }
.stepper__btn:disabled{ opacity:.35; cursor:not-allowed; }
.stepper input{
  width:68px; padding:9px 6px; text-align:center;
  background:transparent; border:0; border-inline:1px solid var(--line-2);
  color:var(--text); font-family:inherit; font-size:15px; font-weight:600;
  font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper input:focus{ outline:0; }
.stepper:focus-within{ border-color:rgba(34,197,94,.55); }

.range{
  display:block; width:100%; margin-top:16px; height:4px; padding:0;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background:linear-gradient(to right, var(--green) 0 var(--fill,0%), var(--line-2) var(--fill,0%) 100%);
  border-radius:99px;
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--green); border:2px solid var(--bg); box-shadow:0 0 0 1px var(--green);
}
.range::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; border:2px solid var(--bg);
  background:var(--green); box-shadow:0 0 0 1px var(--green);
}

.tiers{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.tiers li{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:11.5px; color:var(--text-3);
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.tiers li b{ font-weight:600; color:var(--text-2); }
.tiers li.is-active{ border-color:rgba(34,197,94,.45); background:var(--green-dim); color:var(--green-3); }
.tiers li.is-active b{ color:var(--green-3); }

.calc__total{
  background:var(--surface); padding:28px 26px; display:flex; flex-direction:column; gap:16px;
  background-image:radial-gradient(120% 80% at 100% 0%, rgba(34,197,94,.09), transparent 60%);
}
.calc__label{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.calc__linhas{ margin:0; display:flex; flex-direction:column; gap:11px; }
.calc__linhas > div{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.calc__linhas dt{ font-size:13.5px; color:var(--text-2); }
.calc__linhas dt span{ display:block; font-size:11.5px; color:var(--text-3); font-variant-numeric:tabular-nums; margin-top:1px; }
.calc__linhas dd{ margin:0; font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }

.calc__desconto{
  display:flex; align-items:flex-start; gap:7px;
  padding:9px 11px; border:1px solid rgba(34,197,94,.28); border-radius:var(--r-sm);
  background:var(--green-dim); color:var(--green-3); font-size:11.5px; line-height:1.45;
}

.calc__grande{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
}
.calc__grande span{ font-size:13px; color:var(--text-2); }
.calc__grande strong{ font-size:26px; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.calc__aviso{ font-size:11px; color:var(--text-3); text-align:center; }

.incluso{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 22px;
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
}
.incluso li{ position:relative; padding-left:22px; font-size:13px; color:var(--text-2); }
.incluso li::after{
  content:""; position:absolute; left:0; top:5px; width:11px; height:11px; background:var(--green);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6'/%3E%3C/svg%3E");
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* ---- sobre ---- */
.about{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:center; }
.about__copy h2{ font-size:clamp(1.6rem,2vw + .55rem,2.1rem); margin-bottom:20px; }
.about__copy p{ color:var(--text-2); margin-bottom:14px; font-size:14.5px; }
.about__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.about__stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.about__stats li{ padding:20px 18px; background:var(--bg); transition:background .25s var(--ease); }
.about__stats li:hover{ background:var(--surface); }
.about__stats strong{ display:block; font-size:17px; font-weight:600; color:var(--green-3); letter-spacing:-.02em; }
.about__stats span{ display:block; font-size:12.5px; color:var(--text-2); margin-top:5px; }

/* ---- CTA ---- */
.cta{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:40px;
  padding:40px 44px; border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:
    radial-gradient(90% 180% at 8% 50%, rgba(34,197,94,.13), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
}
.cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(80% 100% at 100% 50%, #000, transparent 75%);
  mask-image:radial-gradient(80% 100% at 100% 50%, #000, transparent 75%);
}
.cta::after{
  content:""; position:absolute; top:0; bottom:0; width:38%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent);
  transform:translateX(-160%) skewX(-16deg);
  animation:cta-sweep 6.5s var(--ease) 1.5s infinite;
}
@keyframes cta-sweep{ 0%{ transform:translateX(-160%) skewX(-16deg) } 55%,100%{ transform:translateX(420%) skewX(-16deg) } }
.cta > *{ position:relative; z-index:1; }
.cta__copy h2{ font-size:clamp(1.4rem,1.6vw + .6rem,1.8rem); margin-bottom:10px; }
.cta__copy p{ color:var(--text-2); font-size:14px; max-width:52ch; }
.cta__action{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.cta__note{ font-size:12px; color:var(--text-3); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line); background:var(--bg-2); padding-top:52px; }
.footer__grid{
  display:grid; grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));
  gap:36px; padding-bottom:40px;
}
.footer__brand p{ color:var(--text-3); font-size:13px; margin-top:14px; max-width:34ch; }
.footer h4{ font-size:12px; font-weight:600; margin-bottom:14px; letter-spacing:0; }
.footer nav li + li,.footer__social li + li{ margin-top:9px; }
.footer nav a{ font-size:13px; color:var(--text-3); transition:color .16s var(--ease); }
.footer nav a:hover{ color:var(--green-3); }
.footer__social ul{ display:flex; gap:8px; }
.footer__social li + li{ margin-top:0; }
.footer__social a{
  display:grid; place-items:center; width:32px; height:32px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.025); border:1px solid var(--line); color:var(--text-3);
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.footer__social a:hover{ color:var(--green-3); border-color:rgba(34,197,94,.35); }
.footer__social svg{ width:15px; height:15px; }
.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  padding:18px 24px; border-top:1px solid var(--line);
  font-size:12px; color:var(--text-3);
}

/* ============================================================
   REVEAL (com escalonamento)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.cards .reveal:nth-child(n), .incluso .reveal:nth-child(n), .about__stats .reveal:nth-child(n){ transition-delay:calc(var(--i,0) * 70ms); }
.hero__copy .reveal:nth-child(1){ transition-delay:.05s }
.hero__copy .reveal:nth-child(2){ transition-delay:.12s }
.hero__copy .reveal:nth-child(3){ transition-delay:.19s }
.hero__copy .reveal:nth-child(4){ transition-delay:.26s }
.hero__copy .reveal:nth-child(5){ transition-delay:.33s }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1180px){
  /* no layout empilhado a moldura ocuparia ~1050px e exigiria mais pixels do
     print do que ele tem; limitar mantém a imagem sempre sendo reduzida */
  .frame{ width:100%; max-width:760px; margin-inline:auto; }
  .app{ height:430px; }
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero__inner{ grid-template-columns:1fr; gap:56px; }
  .hero__copy{ max-width:640px; }
}

@media (max-width:900px){
  .burger{ display:flex; }
  .header__actions{ display:none; }
  .header__inner{ justify-content:space-between; gap:16px; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; z-index:99;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -18px rgba(0,0,0,.9);
    padding:8px 24px 22px;
    transform:translateY(-10px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
    max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .nav > a{ padding:13px 0; border-bottom:1px solid var(--line); border-radius:0; font-size:15px; }
  .nav > a:hover{ background:transparent; }
  .nav__actions{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
  .nav__actions .btn{ width:100%; }

  .benefits,.about{ grid-template-columns:1fr; gap:48px; }
  .calc{ grid-template-columns:1fr; }
  .incluso{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cta{ grid-template-columns:1fr; gap:24px; padding:34px 26px; }
  .section{ padding:60px 0; }
}

@media (max-width:640px){
  .container{ padding-inline:18px; }
  .hero{ padding:56px 0 72px; }
  .hero__facts{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .stat{ width:150px; padding:11px 13px; }
  .stat--tl{ left:-6px; top:-12px; }
  .stat--br{ right:-6px; bottom:-12px; }
  .benefits__media{ margin-inline:6px; }
  .app{ height:390px; grid-template-columns:0 minmax(0,1fr) minmax(0,1fr); }
  .app-shot{ height:390px; object-fit:cover; object-position:left top; }
  .app__side{ display:none; }
  .footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__bottom{ justify-content:center; text-align:center; }
}

@media (max-width:460px){
  .app{ grid-template-columns:1fr; }
  .app__chat{ display:none; }
  .app__list{ border-right:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}