/* ============================================================
   AfiliTools - Design System
   Dark premium + neon esmeralda
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Superfícies */
  --bg:            #070A12;
  --bg-soft:       #0B1020;
  --surface:       rgba(255,255,255,.035);
  --surface-2:     rgba(255,255,255,.055);
  --border:        rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);

  /* Texto */
  --text:          #E9EFF7;
  --text-soft:     #B6C2D4;
  --muted:         #8494AB;

  /* Marca */
  --accent:        #10B981;
  --accent-2:      #34D399;
  --accent-3:      #06B6D4;
  --accent-ink:    #04140E;
  --glow:          rgba(16,185,129,.30);

  /* Semânticos */
  --warn:          #F59E0B;
  --danger:        #F87171;

  /* Escala */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  --shell: 1240px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);

  --ease: cubic-bezier(.22,.68,.28,1);
  --shadow-md: 0 18px 44px -22px rgba(0,0,0,.85);
  --shadow-lg: 0 40px 90px -40px rgba(0,0,0,.9);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  font-size:clamp(1rem,.97rem + .16vw,1.075rem);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
h1,h2,h3,h4{ line-height:1.14; letter-spacing:-.026em; font-weight:700; text-wrap:balance; }
p{ text-wrap:pretty; }

::selection{ background:var(--accent); color:var(--accent-ink); }

:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:6px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--accent-ink);
  padding:.7rem 1.1rem; border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---------- 3. Fundo ---------- */
.bg-canvas{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, #0F1A2E 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 55%, var(--bg) 100%);
}
.bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(105% 65% at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(105% 65% at 50% 0%, #000 0%, transparent 72%);
}
.bg-orb{
  position:absolute; border-radius:50%; filter:blur(120px); opacity:.5;
}
.bg-orb--a{
  width:min(48rem,90vw); height:min(48rem,90vw);
  top:-22rem; left:-14rem;
  background:radial-gradient(circle, rgba(16,185,129,.34), transparent 68%);
}
.bg-orb--b{
  width:min(42rem,85vw); height:min(42rem,85vw);
  top:38%; right:-18rem;
  background:radial-gradient(circle, rgba(6,182,212,.20), transparent 68%);
}

/* ---------- 4. Layout ---------- */
.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell--narrow{ max-width:820px; }

.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }

.section__head{
  max-width:760px; margin:0 auto clamp(2.5rem,5vw,4rem);
  text-align:center;
}
.section__title{
  font-size:clamp(1.9rem,1.25rem + 2.7vw,3.25rem);
  margin-block:.75rem .9rem;
}
.section__lead{
  color:var(--text-soft);
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);
}
.section__lead--left{ margin-block:.9rem 1.5rem; }

.grad{
  background:linear-gradient(100deg,var(--accent-2) 0%,var(--accent) 45%,var(--accent-3) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- 5. Componentes base ---------- */
.tag{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .9rem;
  font-size:.775rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-2);
  background:rgba(16,185,129,.09);
  border:1px solid rgba(16,185,129,.24);
  border-radius:var(--r-full);
}
.tag--warn{ color:var(--warn); background:rgba(245,158,11,.09); border-color:rgba(245,158,11,.25); }
.tag--ok{ color:var(--accent-2); }

.btn{
  --btn-py:.72rem; --btn-px:1.35rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:var(--btn-py) var(--btn-px);
  border-radius:var(--r-full);
  font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn--lg{ --btn-py:.95rem; --btn-px:1.8rem; font-size:1.02rem; }
.btn--block{ display:flex; width:100%; }

.btn--primary{
  background:linear-gradient(135deg,var(--accent-2),var(--accent) 60%,#0EA271);
  color:var(--accent-ink);
  box-shadow:0 10px 30px -12px var(--glow), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 42px -14px var(--glow), inset 0 1px 0 rgba(255,255,255,.35); }
.btn--primary:active{ transform:translateY(0); }

.btn--outline{
  background:var(--surface); color:var(--text);
  border-color:var(--border-strong);
  backdrop-filter:blur(10px);
}
.btn--outline:hover{ background:var(--surface-2); border-color:rgba(16,185,129,.45); color:#fff; }

.btn--ghost{ color:var(--text-soft); padding-inline:.9rem; }
.btn--ghost:hover{ color:var(--text); }

.btn__arrow{ width:18px; height:18px; transition:transform .22s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(7,10,18,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--border);
}
.header__inner{
  display:flex; align-items:center; gap:1.5rem;
  min-height:74px;
}

.brand{ display:inline-flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.16rem; letter-spacing:-.03em; }
.brand__mark{
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:11px;
  background:linear-gradient(140deg,var(--accent-2),var(--accent));
  color:var(--accent-ink);
  box-shadow:0 8px 22px -10px var(--glow);
}
.brand__mark svg{ width:19px; height:19px; }

.nav{ display:flex; gap:.35rem; margin-inline:auto; }
.nav__mobile-label{ display:none; }
.nav__mobile-auth{ display:none; }
.nav a{
  position:relative;
  padding:.5rem .85rem; border-radius:var(--r-full);
  font-size:.93rem; font-weight:500; color:var(--text-soft);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav a:hover{ color:var(--text); background:var(--surface); }
.nav a.is-active{ color:var(--accent-2); background:rgba(16,185,129,.1); }

.header__actions{ display:flex; align-items:center; gap:.5rem; }

.nav-toggle{
  display:none;
  width:42px; height:42px; padding:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  display:block; width:17px; height:2px; border-radius:2px; background:var(--text);
  transition:transform .28s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero{ padding-block:clamp(3rem,7vw,6rem) clamp(3rem,6vw,5rem); }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:clamp(2.5rem,4vw,4rem); align-items:center;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.42rem 1rem .42rem .75rem;
  border-radius:var(--r-full);
  background:var(--surface); border:1px solid var(--border);
  font-size:.85rem; color:var(--text-soft); font-weight:500;
}
.eyebrow span:not(.eyebrow__dot):not(.eyebrow__sep){ color:var(--accent-2); font-weight:600; }
.eyebrow__sep{ opacity:.4; }
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent-2); box-shadow:0 0 0 4px rgba(16,185,129,.16);
}

.hero__title{
  margin-block:1.35rem 1.1rem;
  font-size:clamp(2rem,1.35rem + 2.6vw,3.05rem);
  font-weight:800; letter-spacing:-.032em; line-height:1.12;
  text-wrap:initial;
}
.hero__lead{
  max-width:33rem; color:var(--text-soft);
  font-size:clamp(1.04rem,1rem + .4vw,1.24rem);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-block:2rem 1.6rem; }

.hero__trust{ display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; font-size:.9rem; color:var(--muted); }
.hero__trust li{ display:inline-flex; align-items:center; gap:.45rem; }
.hero__trust svg{ width:15px; height:15px; color:var(--accent-2); flex:none; }

/* Diagrama de distribuição (hub) */
.hero__visual{ display:grid; place-items:center; }

.hub{
  position:relative; width:100%; max-width:470px;
  padding:clamp(.95rem,2vw,1.3rem);
  border-radius:var(--r-xl);
  background:linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.hub::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(150deg, rgba(16,185,129,.55), transparent 42%, transparent 60%, rgba(6,182,212,.42));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

.hub__bar{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.1rem .25rem .55rem;
}
.hub__live{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.28rem .7rem;
  font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent-2);
  background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.24);
  border-radius:var(--r-full);
}
.hub__meta{ font-family:var(--mono); font-size:.7rem; color:var(--muted); }

.pulse{
  width:7px; height:7px; border-radius:50%; background:var(--accent-2);
  animation:pulse 2s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(52,211,153,.55); }
  70%{ box-shadow:0 0 0 7px rgba(52,211,153,0); }
}

.hub__svg{ position:relative; display:block; width:100%; height:auto; overflow:visible; }

.hub__foot{
  position:relative;
  margin-top:.55rem; text-align:center;
  font-size:.79rem; color:var(--muted);
}
.hub__foot strong{ color:var(--accent-2); font-weight:600; }

/* fios de base */
.hub__base path{
  fill:none;
  stroke:rgba(148,163,184,.2);
  stroke-width:1.4;
  stroke-dasharray:3 5;
}

/* pacotes em trânsito */
.wflow{
  fill:none;
  stroke:currentColor;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:20 3000;
  stroke-dashoffset:0;
  opacity:0;
  filter:drop-shadow(0 0 5px currentColor);
  animation:wflow 4s linear infinite;
}
.wflow--in{ color:#38BDF8; }
.wflow--out{ color:#34D399; }
@keyframes wflow{
  0%   { stroke-dashoffset:0;                 opacity:0; }
  2%   {                                      opacity:1; }
  17%  { stroke-dashoffset:var(--len,-260px); opacity:1; }
  19%  { stroke-dashoffset:var(--len,-260px); opacity:0; }
  100% { stroke-dashoffset:var(--len,-260px); opacity:0; }
}

/* nós */
.hub__node circle{
  fill:rgba(10,15,26,.94);
  stroke:var(--border-strong);
  stroke-width:1.4;
}
.hub__node--dst circle{
  fill:rgba(8,20,17,.94);
  stroke:rgba(16,185,129,.42);
}
.hub__ico{ fill:var(--accent-2); stroke:none; }
.hub__node--src .hub__ico{ fill:var(--text-soft); }

.hub__init{
  fill:var(--text-soft); font-size:12.5px; font-weight:700;
  text-anchor:middle; letter-spacing:.4px;
}
.hub__cap{
  fill:var(--muted); font-size:11px; font-weight:500; text-anchor:middle;
}
.hub__cap--strong{ fill:var(--text-soft); font-weight:600; }

.halo{
  fill:none; stroke:#34D399; stroke-width:2;
  opacity:0;
  transform-box:fill-box; transform-origin:center;
  animation:halo 4s var(--ease) infinite;
}
@keyframes halo{
  0%,46%{ transform:scale(1);    opacity:0; }
  51%   { transform:scale(1);    opacity:.85; }
  68%   { transform:scale(1.55); opacity:0; }
  100%  { opacity:0; }
}

/* núcleo */
.hub__glow{ animation:coreGlow 4s var(--ease) infinite; }
@keyframes coreGlow{
  0%,20%{ opacity:.45; }
  28%   { opacity:1; }
  55%,100%{ opacity:.45; }
}

.hub__ring{
  fill:none; stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:150 200;
  transform-box:fill-box; transform-origin:center;
  animation:spin 9s linear infinite;
}
.hub__ring2{
  fill:none; stroke:rgba(148,163,184,.42); stroke-width:1;
  stroke-dasharray:2 8;
  transform-box:fill-box; transform-origin:center;
  animation:spin 26s linear infinite reverse;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.hub__wave{
  fill:none; stroke:var(--accent-2); stroke-width:2;
  opacity:0;
  transform-box:fill-box; transform-origin:center;
  animation:coreWave 4s var(--ease) infinite;
}
@keyframes coreWave{
  0%,21%{ transform:scale(1);    opacity:0; }
  26%   { transform:scale(1);    opacity:.75; }
  44%   { transform:scale(1.42); opacity:0; }
  100%  { opacity:0; }
}

.hub__disc{
  fill:rgba(7,12,20,.97);
  stroke:rgba(16,185,129,.3); stroke-width:1;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.7));
}
.hub__bolt path{ fill:var(--accent-2); }
.hub__brand{
  fill:#E9EFF7; font-size:11.5px; font-weight:700;
  text-anchor:middle; letter-spacing:-.2px;
}

/* etiquetas de tag */
.hub__chip rect{ fill:rgba(9,13,24,.94); stroke-width:1; }
.hub__chip text{ font-family:var(--mono); font-size:10.5px; text-anchor:middle; }
.hub__chip--bad rect{ stroke:rgba(248,113,113,.34); }
.hub__chip--bad text{ fill:#FCA5A5; }
.hub__chip--bad line{ stroke:#FCA5A5; stroke-width:1; opacity:.8; }
.hub__chip--good rect{ fill:rgba(7,20,16,.96); stroke:rgba(16,185,129,.42); }
.hub__chip--good text{ fill:var(--accent-2); font-weight:600; }

@media (prefers-reduced-motion:reduce){
  .wflow{ opacity:.85; stroke-dasharray:none; filter:none; }
  .halo,.hub__wave{ opacity:0; }
  .hub__glow{ opacity:.7; }
}

/* ---------- 8. Marquee ---------- */
.marquee-section{ padding-block:clamp(1.5rem,3vw,2.5rem) clamp(2rem,4vw,3rem); }
.marquee__label{
  text-align:center; font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin-bottom:1.35rem;
}
.marquee{
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display:flex; gap:1rem; width:max-content;
  animation:scroll 34s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scroll{ to{ transform:translateX(-33.333%); } }

.chip{
  display:inline-flex; align-items:center;
  padding:.6rem 1.35rem; border-radius:var(--r-full);
  background:var(--surface); border:1px solid var(--border);
  font-weight:600; font-size:.95rem; color:var(--text-soft); white-space:nowrap;
}

/* ---------- 9. Split (dor vs solução) ---------- */
.split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.35rem; }
.split__side{
  padding:clamp(1.5rem,3vw,2.25rem);
  border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border);
}
.split__side--good{
  background:linear-gradient(160deg, rgba(16,185,129,.09), rgba(255,255,255,.02));
  border-color:rgba(16,185,129,.26);
}
.split__title{ font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem); margin-block:.9rem 1.15rem; }

.checklist{ display:grid; gap:.7rem; }
.checklist li{
  position:relative; padding-left:1.85rem;
  color:var(--text-soft); font-size:.98rem;
}
.checklist li::before{
  position:absolute; left:0; top:.1rem;
  display:grid; place-items:center;
  width:20px; height:20px; border-radius:50%;
  font-size:.72rem; font-weight:700;
}
.checklist--good li::before{ content:'✓'; background:rgba(16,185,129,.16); color:var(--accent-2); }
.checklist--bad li::before{ content:'✕'; background:rgba(248,113,113,.14); color:#FCA5A5; }
.checklist--two{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem 1.5rem; }

/* ---------- 10. Passos ---------- */
.steps{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.1rem; counter-reset:step;
}
.steps--3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.35rem; }
.steps--3 .step{ padding:1.85rem 1.6rem 1.75rem; }
.steps--3 .step h3{ font-size:1.15rem; }
.step{
  position:relative; padding:1.6rem 1.4rem 1.5rem;
  border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border);
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.step:hover{ transform:translateY(-4px); border-color:rgba(16,185,129,.34); background:var(--surface-2); }
.step__num{
  display:grid; place-items:center;
  width:38px; height:38px; margin-bottom:1rem;
  border-radius:12px;
  font-family:var(--mono); font-weight:700; font-size:1rem;
  background:linear-gradient(140deg, rgba(16,185,129,.22), rgba(16,185,129,.06));
  border:1px solid rgba(16,185,129,.3);
  color:var(--accent-2);
}
.step h3{ font-size:1.06rem; margin-bottom:.5rem; }
.step p{ font-size:.94rem; color:var(--text-soft); }

/* ---------- 11. Cards de recursos ---------- */
.cards{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem;
}
.card{
  position:relative; overflow:hidden;
  padding:1.6rem 1.4rem;
  border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border);
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.card::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(16,185,129,.10), transparent 62%);
  opacity:0; transition:opacity .3s var(--ease); pointer-events:none;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(16,185,129,.32); background:var(--surface-2); }
.card:hover::after{ opacity:1; }
.card__icon{
  display:grid; place-items:center;
  width:44px; height:44px; margin-bottom:1.05rem;
  border-radius:13px;
  background:linear-gradient(140deg, rgba(16,185,129,.2), rgba(6,182,212,.08));
  border:1px solid rgba(16,185,129,.26);
  color:var(--accent-2);
}
.card__icon svg{ width:22px; height:22px; }
.card h3{ font-size:1.05rem; margin-bottom:.5rem; }
.card p{ font-size:.93rem; color:var(--text-soft); }

/* ---------- 12. Feature (2 colunas) ---------- */
.feature{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,5vw,4.5rem); align-items:center;
}
.feature--reverse .feature__copy{ order:2; }
.feature--spaced{ margin-top:clamp(3.5rem,7vw,6rem); }
.feature .section__title{ font-size:clamp(1.75rem,1.2rem + 2vw,2.6rem); text-align:left; }
.feature .checklist{ margin-bottom:1.75rem; }
.feature__title{
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.1rem);
  margin-top:.85rem;
}

.expand__note{
  margin-top:clamp(2.5rem,5vw,4rem);
  padding:1.15rem 1.5rem;
  text-align:center; font-size:.98rem; color:var(--text-soft);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-full);
}
.expand__note strong{ color:var(--accent-2); }

/* Phone mockup */
.feature__visual{ display:grid; place-items:center; }
.phone{
  position:relative; width:min(310px,88%);
  padding:12px 10px 16px;
  border-radius:38px;
  background:linear-gradient(165deg, rgba(255,255,255,.13), rgba(255,255,255,.03));
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg);
}
.phone__notch{
  width:96px; height:20px; margin:0 auto 10px;
  border-radius:var(--r-full); background:rgba(0,0,0,.55);
}
.phone__screen{
  border-radius:28px; overflow:hidden;
  background:#0A0E18; border:1px solid var(--border);
  padding:.9rem .8rem 1rem;
  display:grid; gap:.85rem;
}
.post__head{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; margin-bottom:.6rem; }
.avatar{
  display:grid; place-items:center; flex:none;
  width:26px; height:26px; border-radius:50%;
  font-size:.72rem; font-weight:700;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-soft);
}
.avatar--brand{ background:linear-gradient(140deg,var(--accent-2),var(--accent)); color:var(--accent-ink); border-color:transparent; }
.post__media{
  position:relative; height:128px; border-radius:14px;
  background:
    linear-gradient(140deg, rgba(16,185,129,.28), rgba(6,182,212,.14)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px);
  border:1px solid var(--border);
  display:grid; place-items:center;
}
.post__flash{
  padding:.4rem .85rem; border-radius:var(--r-full);
  background:rgba(7,10,18,.72); border:1px solid rgba(16,185,129,.35);
  font-size:.78rem; font-weight:600; color:var(--accent-2);
}
.post__caption{ font-size:.82rem; color:var(--text-soft); margin-top:.55rem; }
.post__caption b{ color:var(--text); }

.chat{ display:grid; gap:.5rem; }
.bubble{ display:flex; align-items:flex-start; gap:.45rem; }
.bubble p{ font-size:.8rem; padding:.55rem .75rem; border-radius:14px; }
.bubble--them p{ background:var(--surface-2); border:1px solid var(--border); border-top-left-radius:5px; }
.bubble--us{ justify-content:flex-end; }
.bubble--us p{
  background:rgba(16,185,129,.14); border:1px solid rgba(16,185,129,.3);
  border-top-right-radius:5px; color:var(--text);
}
.bubble__label{
  display:block; font-size:.66rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent-2); margin-bottom:.2rem;
}
.bubble code{ font-family:var(--mono); font-size:.72rem; color:var(--accent-2); }

/* Dashboard mockup */
.dash{
  width:100%; max-width:460px;
  border-radius:var(--r-lg); overflow:hidden;
  background:rgba(9,13,24,.72); border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.dash__head{
  display:flex; align-items:center; gap:.4rem;
  padding:.75rem 1rem; border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.dot{ width:9px; height:9px; border-radius:50%; }
.dot--r{ background:#F87171; } .dot--y{ background:#FBBF24; } .dot--g{ background:#34D399; }
.dash__title{ margin-left:.55rem; font-size:.78rem; color:var(--muted); }

.dash__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); }
.stat{ padding:1rem .9rem; background:rgba(9,13,24,.9); }
.stat__label{ display:block; font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.stat__value{ display:block; font-size:clamp(1.05rem,.95rem + .45vw,1.35rem); margin-block:.2rem .15rem; letter-spacing:-.02em; }
.stat__delta{ font-size:.74rem; font-weight:600; color:var(--accent-2); }

.dash__chart{
  display:flex; align-items:flex-end; gap:.45rem;
  height:110px; padding:1.1rem 1rem .9rem;
}
.dash__chart span{
  flex:1; height:var(--h); border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--accent-2),rgba(16,185,129,.22));
  transform-origin:bottom; animation:grow .9s var(--ease) backwards;
}
.dash__chart span:nth-child(1){ animation-delay:.05s } .dash__chart span:nth-child(2){ animation-delay:.1s }
.dash__chart span:nth-child(3){ animation-delay:.15s } .dash__chart span:nth-child(4){ animation-delay:.2s }
.dash__chart span:nth-child(5){ animation-delay:.25s } .dash__chart span:nth-child(6){ animation-delay:.3s }
.dash__chart span:nth-child(7){ animation-delay:.35s } .dash__chart span:nth-child(8){ animation-delay:.4s }
.dash__chart span:nth-child(9){ animation-delay:.45s }
@keyframes grow{ from{ transform:scaleY(0); } }

.dash__rows{ padding:.4rem 1rem 1.1rem; display:grid; gap:.5rem; }
.row{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.82rem; color:var(--text-soft);
  padding-block:.4rem; border-top:1px solid rgba(255,255,255,.05);
}
.row b{ color:var(--accent-2); font-weight:600; white-space:nowrap; }

/* ---------- 12b. Segurança da conta ---------- */
.guard{
  padding:clamp(1.75rem,3.5vw,2.75rem);
  border-radius:var(--r-xl);
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}
.guard__intro{ max-width:760px; margin-bottom:clamp(1.75rem,3.5vw,2.5rem); }
.guard__intro .section__title{ font-size:clamp(1.55rem,1.15rem + 1.7vw,2.3rem); margin-block:.75rem .75rem; }

.guard__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
}
.guard__item{ padding:1.45rem 1.3rem; background:rgba(9,13,24,.86); }
.guard__item svg{
  width:24px; height:24px; margin-bottom:.9rem;
  color:var(--accent-2);
}
.guard__item h3{ font-size:.99rem; margin-bottom:.35rem; }
.guard__item p{ font-size:.88rem; color:var(--muted); }

/* ---------- 12c. Comparativo de custo ---------- */
.compare{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:1.35rem; align-items:stretch;
}
.compare__card{
  display:flex; flex-direction:column;
  padding:clamp(1.6rem,3vw,2.25rem);
  border-radius:var(--r-xl);
  background:var(--surface); border:1px solid var(--border);
}
.compare__card--main{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg, rgba(16,185,129,.15), rgba(255,255,255,.03));
  border-color:rgba(16,185,129,.34);
  box-shadow:var(--shadow-lg);
}
.compare__card--main::before{
  content:''; position:absolute; top:-40%; right:-25%;
  width:22rem; height:22rem; border-radius:50%;
  background:radial-gradient(circle, rgba(16,185,129,.26), transparent 68%);
  filter:blur(50px); pointer-events:none;
}
.compare__name{
  position:relative;
  font-size:.82rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1.35rem;
}
.compare__card--main .compare__name{ color:var(--accent-2); }

.compare__rows{ position:relative; display:grid; gap:.15rem; flex:1; }
.compare__rows li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-block:.75rem;
  border-bottom:1px solid rgba(255,255,255,.055);
  font-size:.95rem; color:var(--text-soft);
}
.compare__rows li b{ font-weight:600; color:var(--text); white-space:nowrap; }
.compare__rows--check li{ padding-left:1.75rem; position:relative; }
.compare__rows--check li::before{
  content:'✓'; position:absolute; left:0; top:.72rem;
  display:grid; place-items:center;
  width:20px; height:20px; border-radius:50%;
  font-size:.7rem; font-weight:700;
  background:rgba(16,185,129,.16); color:var(--accent-2);
}

.compare__total{
  position:relative;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-top:1.5rem; padding-top:1.35rem;
  border-top:1px solid var(--border-strong);
}
.compare__total span{ font-size:.88rem; color:var(--muted); }
.compare__total strong{
  font-size:clamp(1.85rem,1.4rem + 1.6vw,2.5rem);
  font-weight:800; letter-spacing:-.035em; line-height:1;
  color:var(--text-soft);
}
.compare__total small{ font-size:.42em; font-weight:600; color:var(--muted); letter-spacing:0; }
.compare__total--main{ border-top-color:rgba(16,185,129,.4); }
.compare__total--main strong{ color:var(--accent-2); }

.compare__vs{
  align-self:center;
  display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%;
  font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted);
  background:var(--bg-soft); border:1px solid var(--border);
}

.compare__save{
  max-width:60ch; margin:clamp(1.75rem,3.5vw,2.5rem) auto 0;
  text-align:center; font-size:.95rem; color:var(--muted);
}
.compare__save strong{ color:var(--accent-2); font-weight:700; }

/* ---------- 13. Preço ---------- */
.pricing{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:1.35rem;
}
.pricing__main{
  position:relative; overflow:hidden;
  padding:clamp(1.75rem,3.5vw,2.5rem);
  border-radius:var(--r-xl);
  background:linear-gradient(165deg, rgba(16,185,129,.16), rgba(255,255,255,.03));
  border:1px solid rgba(16,185,129,.34);
  box-shadow:var(--shadow-lg);
}
.pricing__main::before{
  content:''; position:absolute; top:-45%; right:-25%;
  width:26rem; height:26rem; border-radius:50%;
  background:radial-gradient(circle, rgba(16,185,129,.28), transparent 68%);
  filter:blur(50px); pointer-events:none;
}
.pricing__badge{
  position:relative;
  display:inline-flex; padding:.35rem .9rem; border-radius:var(--r-full);
  background:var(--accent); color:var(--accent-ink);
  font-size:.78rem; font-weight:700; letter-spacing:.03em;
}
.pricing__name{ position:relative; font-size:1.2rem; margin-top:1.1rem; color:var(--text-soft); font-weight:600; }
.pricing__price{
  position:relative; display:flex; align-items:baseline; gap:.15rem;
  font-size:clamp(3rem,2rem + 4vw,4.5rem); font-weight:800; letter-spacing:-.045em;
  line-height:1; margin-block:.4rem .1rem;
}
.pricing__currency{ font-size:.42em; font-weight:600; align-self:flex-start; margin-top:.55em; }
.pricing__period{ font-size:.26em; font-weight:600; color:var(--muted); letter-spacing:-.01em; }
.pricing__note{ position:relative; font-size:.94rem; color:var(--text-soft); margin-block:1.1rem 1.6rem; }
.pricing__fine{ position:relative; text-align:center; font-size:.82rem; color:var(--muted); margin-top:.85rem; }

.pricing__side{
  padding:clamp(1.75rem,3.5vw,2.5rem);
  border-radius:var(--r-xl);
  background:var(--surface); border:1px solid var(--border);
}
.pricing__side-title{
  font-size:.8rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1.35rem;
}

/* ---------- 14. FAQ ---------- */
.faq{ display:grid; gap:.7rem; }
.faq__item{
  border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--border);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.faq__item[open]{ border-color:rgba(16,185,129,.3); background:var(--surface-2); }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.35rem;
  font-weight:600; font-size:1.01rem; cursor:pointer;
  list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__icon{
  position:relative; flex:none; width:20px; height:20px;
}
.faq__icon::before,.faq__icon::after{
  content:''; position:absolute; top:50%; left:50%;
  width:12px; height:2px; border-radius:2px; background:var(--accent-2);
  transform:translate(-50%,-50%);
  transition:transform .28s var(--ease), opacity .28s var(--ease);
}
.faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__item[open] .faq__icon::after{ transform:translate(-50%,-50%) rotate(0deg); opacity:0; }
.faq__body{ padding:0 1.35rem 1.25rem; }
.faq__body p{ color:var(--text-soft); font-size:.96rem; }

/* ---------- 15. CTA final ---------- */
.cta-final{ padding-block:clamp(3rem,6vw,5rem) clamp(4rem,8vw,7rem); }
.cta-box{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem);
  border-radius:var(--r-xl);
  background:linear-gradient(160deg, rgba(16,185,129,.16), rgba(6,182,212,.07) 55%, rgba(255,255,255,.02));
  border:1px solid rgba(16,185,129,.28);
  box-shadow:var(--shadow-lg);
}
.cta-box::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(60% 100% at 50% 0%, rgba(16,185,129,.22), transparent 70%);
  pointer-events:none;
}
.cta-box h2{ position:relative; font-size:clamp(1.75rem,1.2rem + 2.4vw,3rem); }
.cta-box p{ position:relative; max-width:46ch; margin:1rem auto 0; color:var(--text-soft); }
.cta-box__actions{ position:relative; display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:2rem; }
.cta-box__fine{ position:relative; margin-top:1.35rem; font-size:.85rem; color:var(--muted); }

/* ---------- 16. Footer ---------- */
.site-footer{
  border-top:1px solid var(--border);
  background:rgba(5,8,14,.6);
  padding-block:clamp(2.5rem,5vw,4rem) 2rem;
}
.footer__grid{
  display:grid; grid-template-columns:1.7fr repeat(3,1fr);
  gap:clamp(1.75rem,4vw,3rem);
}
.footer__brand p{ margin-top:1rem; font-size:.92rem; color:var(--muted); max-width:34ch; }
.footer__col h3{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text); margin-bottom:1rem; }
.footer__col ul{ display:grid; gap:.6rem; }
.footer__col li,.footer__col a{ font-size:.92rem; color:var(--muted); transition:color .2s var(--ease); }
.footer__col a:hover{ color:var(--accent-2); }

.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem;
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.5rem;
  border-top:1px solid var(--border);
  font-size:.82rem; color:var(--muted);
}
.footer__disclaimer{ opacity:.75; }

/* ---------- 17. WhatsApp flutuante ---------- */
.whats-float{
  position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem);
  z-index:90;
  display:flex; align-items:center; gap:.65rem;
  transition:transform .25s var(--ease);
}
.whats-float:hover{ transform:translateY(-3px); }

.whats-float__label{
  position:relative;
  padding:.55rem .9rem;
  border-radius:var(--r-full);
  background:#0C1421;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.9);
  font-size:.82rem; font-weight:600; letter-spacing:-.01em;
  color:var(--text); white-space:nowrap;
  animation:waLabelIn .55s var(--ease) 1.4s backwards;
}
.whats-float__label::after{
  content:''; position:absolute; right:-5px; top:50%;
  width:9px; height:9px; margin-top:-4.5px;
  background:#0C1421;
  border-right:1px solid rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.14);
  transform:rotate(45deg);
}
.whats-float:hover .whats-float__label{ border-color:rgba(37,211,102,.5); }
@keyframes waLabelIn{
  from{ opacity:0; transform:translateX(10px); }
  to{ opacity:1; transform:none; }
}

.whats-float__icon{
  flex:none;
  display:grid; place-items:center;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#052E16;
  box-shadow:0 12px 30px -10px rgba(37,211,102,.6);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.whats-float__icon svg{ width:28px; height:28px; }
.whats-float:hover .whats-float__icon{ transform:scale(1.05); box-shadow:0 18px 40px -12px rgba(37,211,102,.7); }

@media (max-width:640px){
  .whats-float{ gap:.5rem; }
  .whats-float__label{ padding:.45rem .75rem; font-size:.75rem; }
  .whats-float__icon{ width:50px; height:50px; }
  .whats-float__icon svg{ width:26px; height:26px; }
}

/* ---------- 18. Reveal ---------- */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s }
.reveal[data-delay="2"]{ transition-delay:.16s }
.reveal[data-delay="3"]{ transition-delay:.24s }
.reveal[data-delay="4"]{ transition-delay:.32s }

/* ---------- 19. Páginas de conteúdo (legal) ---------- */
.page-head{ padding-block:clamp(3rem,6vw,5rem) 2rem; text-align:center; }
.page-head h1{ font-size:clamp(2rem,1.4rem + 2.6vw,3rem); margin-block:.9rem .6rem; }
.page-head p{ color:var(--muted); font-size:.92rem; }

.prose{ padding-bottom:clamp(3rem,7vw,6rem); }
.prose h2{
  font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  margin-block:2.5rem .9rem; padding-top:1.5rem;
  border-top:1px solid var(--border);
}
.prose h2:first-of-type{ border-top:0; padding-top:0; margin-top:1rem; }
.prose h3{ font-size:1.05rem; margin-block:1.5rem .6rem; }
.prose p{ color:var(--text-soft); margin-bottom:1rem; font-size:.99rem; }
.prose ul{ display:grid; gap:.6rem; margin-bottom:1.25rem; }
.prose ul li{ position:relative; padding-left:1.4rem; color:var(--text-soft); font-size:.99rem; }
.prose ul li::before{
  content:''; position:absolute; left:.3rem; top:.7em;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.prose a{ color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; }
.prose strong{ color:var(--text); }

.notice{
  padding:1.1rem 1.35rem; border-radius:var(--r-md);
  background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.24);
  margin-bottom:2rem;
}
.notice p{ margin:0; font-size:.92rem; color:#FCD34D; }

/* ---------- 19b. Páginas de marketplace ---------- */
.cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }

.mark{
  display:grid; place-items:center;
  width:56px; height:56px; border-radius:17px;
  margin-top:1.35rem;
  font-size:1.15rem; font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(140deg, rgba(16,185,129,.22), rgba(6,182,212,.1));
  border:1px solid rgba(16,185,129,.3);
  color:var(--accent-2);
  margin-bottom:1.35rem;
}

/* trilha de marketplaces */
.mkt-switch{
  display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center;
}
.mkt-switch a{
  padding:.55rem 1.15rem; border-radius:var(--r-full);
  font-size:.92rem; font-weight:600; color:var(--text-soft);
  background:var(--surface); border:1px solid var(--border);
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.mkt-switch a:hover{ color:var(--text); border-color:rgba(16,185,129,.4); background:var(--surface-2); }
.mkt-switch a[aria-current="page"]{
  color:var(--accent-ink); background:linear-gradient(135deg,var(--accent-2),var(--accent));
  border-color:transparent; box-shadow:0 8px 22px -12px var(--glow);
}

/* cartão de conversão de link */
.conv{
  position:relative;
  padding:clamp(1.15rem,2.4vw,1.6rem);
  border-radius:var(--r-xl);
  background:linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.conv::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(150deg, rgba(16,185,129,.55), transparent 42%, transparent 60%, rgba(6,182,212,.42));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.conv__bar{
  position:relative;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.28rem .7rem; margin-bottom:1.1rem;
  font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent-2);
  background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.24);
  border-radius:var(--r-full);
}
.conv__row{ position:relative; }
.conv__label{
  display:block; margin-bottom:.4rem;
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.conv__arrow{
  position:relative;
  display:grid; place-items:center;
  height:34px; color:var(--accent-2);
}
.conv__arrow svg{ width:18px; height:18px; animation:drift 2.4s var(--ease) infinite; }
@keyframes drift{ 0%,100%{ transform:translateY(-2px); opacity:.5; } 50%{ transform:translateY(2px); opacity:1; } }
.conv__note{
  position:relative;
  margin-top:1.1rem; padding-top:.9rem;
  border-top:1px solid var(--border);
  font-size:.8rem; color:var(--muted);
}
.conv__note code{
  font-family:var(--mono); font-size:.9em; color:var(--accent-2);
  padding:.1rem .35rem; border-radius:5px;
  background:rgba(16,185,129,.12);
}

.urlchip{
  display:block; font-family:var(--mono); font-size:.72rem; line-height:1.5;
  padding:.55rem .7rem; border-radius:9px;
  overflow-wrap:anywhere;
}
.urlchip--bad{ background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.22); color:#FCA5A5; }
.urlchip--bad span{ text-decoration:line-through; }
.urlchip--good{ background:rgba(16,185,129,.14); border:1px solid rgba(16,185,129,.3); color:var(--accent-2); }
.urlchip--good span{ font-weight:700; }

/* ---------- Formulário de suporte ---------- */
.form-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:1.35rem; align-items:start;
}

.form-card{
  padding:clamp(1.6rem,3vw,2.35rem);
  border-radius:var(--r-xl);
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}

.field{ display:grid; gap:.45rem; margin-bottom:1.1rem; }
.field label{ font-size:.88rem; font-weight:600; color:var(--text-soft); }
.field label .req{ color:var(--accent-2); }
.field small{ font-size:.78rem; color:var(--muted); }

.field input,
.field select,
.field textarea{
  width:100%;
  padding:.8rem .95rem;
  border-radius:var(--r-sm);
  background:rgba(9,13,24,.7);
  border:1px solid var(--border-strong);
  color:var(--text);
  font-size:.98rem; font-family:inherit;
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; line-height:1.6; }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238494AB' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:18px;
  padding-right:2.6rem;
}
.field input::placeholder,.field textarea::placeholder{ color:#5C6B80; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:rgba(16,185,129,.55);
  background:rgba(9,13,24,.9);
  box-shadow:0 0 0 3px rgba(16,185,129,.14);
}
.field input:user-invalid,.field textarea:user-invalid{ border-color:rgba(248,113,113,.5); }

/* honeypot: fora da tela, invisível para humanos */
.hp{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

.form-note{ margin-top:1rem; font-size:.82rem; color:var(--muted); text-align:center; }
.form-note a{ color:var(--accent-2); }

.form-status{
  display:none;
  margin-top:1.1rem; padding:.9rem 1.1rem;
  border-radius:var(--r-sm);
  font-size:.92rem;
}
.form-status.is-visible{ display:block; }
.form-status--ok{ background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.3); color:var(--accent-2); }
.form-status--err{ background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); color:#FCA5A5; }

.btn[aria-busy="true"]{ opacity:.65; pointer-events:none; }

/* coluna lateral de contato */
.contact-card{
  display:flex; align-items:flex-start; gap:.9rem;
  padding:1.35rem 1.35rem;
  border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border);
  margin-bottom:1rem;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
a.contact-card:hover{ border-color:rgba(16,185,129,.4); background:var(--surface-2); transform:translateY(-2px); }
.contact-card__icon{
  flex:none; display:grid; place-items:center;
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(140deg, rgba(16,185,129,.2), rgba(6,182,212,.08));
  border:1px solid rgba(16,185,129,.26);
  color:var(--accent-2);
}
.contact-card__icon svg{ width:20px; height:20px; }
.contact-card h3{ font-size:.99rem; margin-bottom:.25rem; }
.contact-card p{ font-size:.88rem; color:var(--muted); }
.contact-card strong{ color:var(--accent-2); font-weight:600; }

@media (max-width:900px){
  .form-grid{ grid-template-columns:1fr; }
}

/* ---------- Blog ---------- */
.post-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1.35rem;
}
.post-card{
  display:flex; flex-direction:column;
  padding:1.75rem 1.6rem;
  border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border);
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.post-card:hover{ transform:translateY(-4px); border-color:rgba(16,185,129,.34); background:var(--surface-2); }
.post-card__tag{
  align-self:flex-start;
  padding:.28rem .75rem; margin-bottom:1rem;
  border-radius:var(--r-full);
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-2); background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.24);
}
.post-card__title{ font-size:1.18rem; line-height:1.3; margin-bottom:.7rem; }
.post-card__title a{ color:var(--text); }
.post-card:hover .post-card__title a{ color:var(--accent-2); }
.post-card__excerpt{ flex:1; font-size:.94rem; color:var(--text-soft); }
.post-card__meta{
  display:flex; align-items:center; gap:.5rem;
  margin-top:1.35rem; padding-top:1rem;
  border-top:1px solid var(--border);
  font-size:.8rem; color:var(--muted);
}
.post-card__more{ margin-left:auto; color:var(--accent-2); font-weight:600; }

.article-head{ padding-block:clamp(3rem,6vw,5rem) 1.5rem; }
.article-head .tag{ margin-bottom:1rem; }
.article-head h1{
  font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem);
  margin-bottom:1rem;
}
.article-head__lead{ font-size:clamp(1.05rem,1rem + .35vw,1.22rem); color:var(--text-soft); }
.article-head__meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.25rem;
  margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px solid var(--border);
  font-size:.85rem; color:var(--muted);
}

.breadcrumb{ display:flex; flex-wrap:wrap; gap:.4rem; font-size:.85rem; color:var(--muted); margin-bottom:1.25rem; }
.breadcrumb a{ color:var(--text-soft); }
.breadcrumb a:hover{ color:var(--accent-2); }
.breadcrumb span{ opacity:.5; }

.article__cta{
  margin-block:2.5rem;
  padding:1.6rem 1.75rem;
  border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(16,185,129,.13), rgba(255,255,255,.02));
  border:1px solid rgba(16,185,129,.28);
}
.article__cta p{ margin-bottom:1.1rem; color:var(--text-soft); }
.article__cta strong{ color:var(--text); }

.related{ margin-top:clamp(3rem,6vw,4.5rem); padding-top:2rem; border-top:1px solid var(--border); }
.related h2{ font-size:1.25rem; margin-bottom:1.35rem; }

/* tabela comparativa */
.cmp-wrap{
  overflow-x:auto;
  border-radius:var(--r-xl);
  border:1px solid var(--border);
  background:var(--surface);
}
.cmp-table{
  width:100%; min-width:640px;
  border-collapse:collapse;
  font-size:.95rem;
}
.cmp-table th,.cmp-table td{
  padding:1rem 1.15rem;
  text-align:left; vertical-align:top;
  border-bottom:1px solid var(--border);
}
.cmp-table thead th{
  font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted);
  background:rgba(255,255,255,.03);
  position:sticky; top:0;
}
.cmp-table thead th.is-us{ color:var(--accent-2); background:rgba(16,185,129,.09); }
.cmp-table tbody th{
  font-weight:600; color:var(--text); width:30%;
}
.cmp-table td{ color:var(--text-soft); }
.cmp-table td.is-us{ background:rgba(16,185,129,.055); color:var(--text); }
.cmp-table tr:last-child th,.cmp-table tr:last-child td{ border-bottom:0; }
.cmp-yes,.cmp-no{
  display:inline-grid; place-items:center;
  width:20px; height:20px; margin-right:.5rem; border-radius:50%;
  font-size:.7rem; font-weight:700; vertical-align:-4px;
}
.cmp-yes{ background:rgba(16,185,129,.18); color:var(--accent-2); }
.cmp-no{ background:rgba(248,113,113,.15); color:#FCA5A5; }
.cmp-note{
  max-width:70ch; margin:1.35rem auto 0;
  text-align:center; font-size:.85rem; color:var(--muted);
}

/* bloco de integração */
.integ{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:1.35rem; align-items:stretch;
}
.integ__method{
  position:relative; overflow:hidden;
  padding:clamp(1.6rem,3vw,2.25rem);
  border-radius:var(--r-xl);
  background:linear-gradient(165deg, rgba(16,185,129,.14), rgba(255,255,255,.03));
  border:1px solid rgba(16,185,129,.3);
  box-shadow:var(--shadow-lg);
}
.integ__method::before{
  content:''; position:absolute; top:-40%; right:-25%;
  width:22rem; height:22rem; border-radius:50%;
  background:radial-gradient(circle, rgba(16,185,129,.24), transparent 68%);
  filter:blur(50px); pointer-events:none;
}
.integ__badge{
  position:relative;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .9rem; border-radius:var(--r-full);
  font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--accent); color:var(--accent-ink);
}
.integ__method h3{ position:relative; font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem); margin-block:1rem .8rem; }
.integ__method p{ position:relative; color:var(--text-soft); font-size:.98rem; }

.integ__req{
  padding:clamp(1.6rem,3vw,2.25rem);
  border-radius:var(--r-xl);
  background:var(--surface); border:1px solid var(--border);
}
.integ__req-title{
  font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1.25rem;
}

.integ__out{
  margin-top:1.35rem; padding-top:1.15rem;
  border-top:1px solid rgba(16,185,129,.2);
  position:relative;
}
.integ__out span{
  display:block; margin-bottom:.5rem;
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}

/* faixa compacta de preço */
.plan-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:clamp(1.35rem,3vw,2rem) clamp(1.5rem,3.5vw,2.5rem);
  border-radius:var(--r-xl);
  background:linear-gradient(165deg, rgba(16,185,129,.15), rgba(255,255,255,.03));
  border:1px solid rgba(16,185,129,.3);
  box-shadow:var(--shadow-lg);
}
.plan-strip__price{ display:flex; align-items:baseline; gap:.5rem; }
.plan-strip__price strong{
  font-size:clamp(1.9rem,1.5rem + 1.4vw,2.5rem); font-weight:800;
  letter-spacing:-.035em; line-height:1;
}
.plan-strip__price small{ font-size:.95rem; font-weight:600; color:var(--muted); }
.plan-strip__note{ margin-top:.4rem; font-size:.9rem; color:var(--text-soft); }

/* ---------- 20. Responsivo ---------- */
@media (max-width:1080px){
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .guard__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  .nav,.header__actions .btn--ghost{ display:none; }
  .nav-toggle{ display:flex; }
  .header__actions{ margin-left:auto; }
  .landing-page .site-header .header__actions{ display:none !important; }
  .landing-page .nav-toggle{ margin-left:auto; }

  .nav.is-open{
    position:absolute; top:100%; left:0; right:0;
    display:flex; flex-direction:column; gap:.15rem;
    max-height:calc(100svh - 74px); overflow-y:auto;
    margin:0; padding:1rem var(--gutter) 1.25rem;
    background:rgba(7,10,18,.97);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-md);
  }
  .nav.is-open .nav__mobile-label{
    display:block; padding:.15rem .75rem .45rem;
    color:var(--text-muted); font-size:.68rem; font-weight:800;
    line-height:1; letter-spacing:.14em; text-transform:uppercase;
  }
  .nav.is-open .nav__site-link{
    display:flex; align-items:center; justify-content:space-between;
    min-height:44px; padding:.65rem .75rem; border-radius:12px;
    color:var(--text-soft); font-size:.95rem; font-weight:600;
  }
  .nav.is-open .nav__site-link::after{
    content:'›'; color:var(--text-muted); font-size:1.35rem;
    font-weight:400; line-height:1;
  }
  .nav.is-open .nav__site-link:hover,
  .nav.is-open .nav__site-link:focus-visible{ color:var(--text); background:var(--surface); }
  .nav.is-open .nav__mobile-auth{
    display:flex; flex-direction:column; gap:.5rem;
    margin-top:.7rem; padding-top:1rem;
    border-top:1px solid var(--border);
  }
  .nav.is-open .nav__mobile-app-link{
    display:grid; grid-template-columns:36px minmax(0,1fr) auto;
    align-items:center; gap:.7rem; min-height:56px;
    width:100%; padding:.5rem .65rem; border:1px solid rgba(255,255,255,.075);
    border-radius:12px; background:rgba(255,255,255,.025); color:var(--text);
  }
  .nav.is-open .nav__mobile-app-link:hover,
  .nav.is-open .nav__mobile-app-link:focus-visible{
    border-color:var(--border-strong); background:var(--surface-2);
    transform:translateY(-1px);
  }
  .nav.is-open .nav__mobile-app-link--primary{
    border-color:rgba(16,185,129,.2);
    background:linear-gradient(135deg,rgba(16,185,129,.07),rgba(6,182,212,.025));
  }
  .nav__mobile-app-icon{
    display:grid; place-items:center; width:36px; height:36px;
    border-radius:10px; background:rgba(255,255,255,.04); color:var(--text-soft);
  }
  .nav__mobile-app-link--primary .nav__mobile-app-icon{
    background:rgba(16,185,129,.08); color:var(--accent-2);
  }
  .nav__mobile-app-icon svg{ width:18px; height:18px; }
  .nav__mobile-app-copy{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
  .nav__mobile-app-copy strong{ font-size:.9rem; line-height:1.2; }
  .nav__mobile-app-copy small{ color:var(--text-muted); font-size:.72rem; line-height:1.25; }
  .nav__mobile-chevron{ color:var(--text-muted); font-size:1.3rem; line-height:1; }

  .hero__grid{ grid-template-columns:1fr; }
  .hero__visual{ max-width:520px; margin-inline:auto; width:100%; }

  .feature{ grid-template-columns:1fr; }
  .feature--reverse .feature__copy{ order:0; }
  .feature .section__title{ font-size:clamp(1.6rem,1.2rem + 2vw,2.2rem); }

  .pricing{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }

  .cards--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .integ{ grid-template-columns:1fr; }
  .compare{ grid-template-columns:1fr; gap:1rem; }
  .compare__vs{ justify-self:center; }
  .steps--3{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .cards{ grid-template-columns:1fr; }
  .cards--3{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .plan-strip{ flex-direction:column; align-items:flex-start; }
  .plan-strip .btn{ width:100%; }
  .guard__grid{ grid-template-columns:1fr; }
  .expand__note{ border-radius:var(--r-lg); }
  .checklist--two{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .hero__actions .btn{ width:100%; }
  .cta-box__actions .btn{ width:100%; }
  .dash__stats{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; }
}

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

/* ---------- 22. Impressão ---------- */
@media print{
  .bg-canvas,.site-header,.whats-float,.cta-final,.hero__visual{ display:none !important; }
  body{ background:#fff; color:#000; }
  .prose p,.prose li{ color:#222; }
}