/* =====================================================
   DLPay Landing v2 — premium stylesheet
   Marca: preto institucional + verde DLPay
   ===================================================== */

:root{
  /* ----- Surfaces ----- */
  --c-bg:        #FAFBFC;
  --c-bg-alt:    #F4F6F9;
  --c-surface:   #FFFFFF;
  --c-line:      #E6E9EF;
  --c-line-soft: #EFF2F6;

  /* ----- Ink ----- */
  --c-ink:       #0B1220;
  --c-ink-soft:  #2A3240;
  --c-mute:      #5C6878;
  --c-mute-2:    #8893A3;

  /* ----- Brand: black ----- */
  --c-brand:     #0B1220;
  --c-brand-2:   #181F2E;
  --c-brand-3:   #232A3B;

  /* ----- Brand: green ----- */
  --c-green:     #00C853;
  --c-green-d:   #00A845;
  --c-green-dd:  #008F38;
  --c-green-l:   #E8FAEF;
  --c-green-ll:  #F2FCF6;

  /* ----- CTA = brand green ----- */
  --c-cta:       var(--c-green);
  --c-cta-d:     var(--c-green-d);
  --c-cta-dd:    var(--c-green-dd);
  --c-cta-l:     var(--c-green-l);

  /* ----- Radii ----- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ----- Shadows (layered, premium) ----- */
  --sh-xs:  0 1px 2px rgba(11,18,32,.04);
  --sh-sm:  0 1px 2px rgba(11,18,32,.05), 0 2px 4px rgba(11,18,32,.04);
  --sh-md:  0 2px 4px rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.08);
  --sh-lg:  0 4px 8px rgba(11,18,32,.05), 0 24px 56px rgba(11,18,32,.12);
  --sh-xl:  0 8px 16px rgba(11,18,32,.06), 0 40px 80px rgba(11,18,32,.16);
  --sh-glow: 0 0 0 1px rgba(0,200,83,.15), 0 12px 32px rgba(0,200,83,.18);

  /* ----- Layout ----- */
  --container: 1200px;
  --container-narrow: 820px;

  /* ----- Motion ----- */
  --t-fast: 140ms cubic-bezier(.4,0,.2,1);
  --t-mid:  280ms cubic-bezier(.4,0,.2,1);
  --t-slow: 480ms cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html, body{ margin:0; padding:0; overflow-x:clip; }
body{
  font-family:'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--c-ink);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* selection */
::selection{ background:var(--c-green); color:#fff; }

/* ===== Layout ===== */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.container-narrow{ max-width:var(--container-narrow); }

main > section{ padding: 112px 0; position:relative; }
@media (max-width:760px){ main > section{ padding: 72px 0; } }

.section-head{ text-align:center; max-width:760px; margin:0 auto 64px; }
.section-head .lead{ color:var(--c-mute); margin-top:14px; }
.section-head-light{ text-align:left; margin:0 0 24px; }

/* ===== Tipografia ===== */
.h1{
  font-size:clamp(30px, 3.1vw, 46px);
  line-height:1.1;
  letter-spacing:-0.025em;
  font-weight:800;
  margin:0 0 18px;
  color:var(--c-ink);
  text-wrap:balance;
}
.h2{
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.12;
  letter-spacing:-0.02em;
  font-weight:700;
  margin:0;
  color:var(--c-ink);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-green-dd);
  background:var(--c-green-l);
  border:1px solid rgba(0,200,83,.18);
  border-radius:var(--r-pill);
  padding:7px 14px;
  margin:0 0 22px;
}
.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--c-green); box-shadow:0 0 0 4px rgba(0,200,83,.2);
}
.lead{
  font-size:clamp(16px, 1.4vw, 18.5px);
  line-height:1.6;
  color:var(--c-ink-soft);
  font-weight:400;
}
.micro{ font-size:13.5px; color:var(--c-mute); line-height:1.5; }
.mt-12{ margin-top:14px; }

.hl{
  position:relative;
  display:inline-block;
  white-space:nowrap;
  color:var(--c-ink);
  background:linear-gradient(180deg, transparent 65%, rgba(0,200,83,.35) 65%, rgba(0,200,83,.35) 95%, transparent 95%);
  padding: 0 4px;
}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition: background var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
}
.site-header.scrolled{
  background:rgba(255,255,255,.92);
  border-bottom-color:var(--c-line);
  box-shadow:0 1px 0 rgba(11,18,32,.02), 0 6px 16px rgba(11,18,32,.04);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{ display:inline-flex; }
.logo img{ height:32px; width:auto; }
.header-actions{ display:flex; align-items:center; gap:18px; }

/* ===== Buttons ===== */
.btn{
  --btn-h: 50px;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  font-weight:600; letter-spacing:0;
  font-size:15px; line-height:1.2;
  min-height:var(--btn-h);
  padding:14px 22px;
  border-radius:var(--r-md);
  border:1px solid transparent;
  text-align:center;
  transition: transform var(--t-fast), box-shadow var(--t-mid), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space:normal;
  word-break:keep-all;
}
.btn-sm{ --btn-h:42px; padding:10px 16px; font-size:14px; }
.btn-lg{ --btn-h:58px; padding:18px 28px; font-size:16.5px; }
.btn-block{ width:100%; }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(0,200,83,.25); }

/* CTA = brand green with subtle gradient */
.btn-cta{
  background: linear-gradient(180deg, #00D45A 0%, var(--c-green) 50%, var(--c-green-d) 100%);
  color:#fff;
  border-color: rgba(0,143,56,.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -1px 0 rgba(0,0,0,.06) inset,
    0 6px 18px rgba(0,200,83,.32),
    0 2px 4px rgba(0,200,83,.18);
}
.btn-cta:hover{
  background: linear-gradient(180deg, var(--c-green) 0%, var(--c-green-d) 50%, var(--c-green-dd) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -1px 0 rgba(0,0,0,.08) inset,
    0 10px 28px rgba(0,200,83,.42),
    0 3px 6px rgba(0,200,83,.22);
  transform:translateY(-1px);
}

/* Primary = institutional black */
.btn-primary{
  background:var(--c-brand);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 4px 12px rgba(11,18,32,.18);
}
.btn-primary:hover{ background:var(--c-brand-2); box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 6px 18px rgba(11,18,32,.24); }

/* Outline */
.btn-outline{
  background:transparent;
  color:var(--c-ink);
  border-color:var(--c-line);
}
.btn-outline:hover{ border-color:var(--c-ink); background:var(--c-bg-alt); }

/* Link-style */
.link-text{
  color:var(--c-ink); font-weight:600; font-size:14.5px;
  display:inline-flex; align-items:center; gap:6px;
  border-bottom: 1.5px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast), gap var(--t-fast);
}
.link-text:hover{ color:var(--c-green-dd); border-color:var(--c-green-dd); gap:10px; }
.link-arrow{ color:var(--c-ink-soft); }
.link-arrow svg{ width:14px; height:14px; transition: transform var(--t-fast); }
.link-arrow:hover svg{ transform:translateX(3px); }

/* Header has slight green pill for entrar */
.header-actions .link-text{ font-size:14.5px; }

/* ===== HERO ===== */
.hero{
  position:relative;
  padding: 96px 0 88px;
  background:
    radial-gradient(1100px 540px at 92% -8%, rgba(0,200,83,.13), transparent 60%),
    radial-gradient(900px 480px at -8% 110%, rgba(11,18,32,.06), transparent 60%),
    var(--c-bg);
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(11,18,32,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,32,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  pointer-events:none;
  opacity:.6;
}
@media(max-width:980px){ .hero{ padding: 56px 0 40px; } }

.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:48px;
  align-items:center;
}
.hero-inner > *{ min-width:0; }
@media(max-width:980px){
  .hero-inner{ grid-template-columns:1fr; gap:56px; }
}

.cta-row{
  display:flex; gap:16px 20px; align-items:center; flex-wrap:wrap;
  margin-top:32px;
}
.trust-strip{
  margin-top:32px;
  font-size:13.5px;
  color:var(--c-ink-soft);
  line-height:1.7;
}
.trust-strip strong{ color:var(--c-ink); font-weight:700; }
.trust-strip .dot{ color:var(--c-mute-2); margin:0 8px; opacity:.6; }

/* ===== Hero visual: Window-style mockups ===== */
.hero-visual{
  position:relative;
  display:flex; justify-content:flex-start; align-items:center;
  padding-right:60px;
  padding-bottom:40px;
}
@media(max-width:980px){
  .hero-visual{
    padding-right:0; padding-bottom:0;
    flex-direction:column;
    gap:32px;
  }
}

/* Window component (used for hero + product shots) */
.win{
  position:relative;
  background: linear-gradient(180deg, #0F1729 0%, #0B1220 100%);
  border-radius:14px;
  box-shadow:
    var(--sh-xl),
    0 0 0 1px rgba(255,255,255,.04) inset;
  overflow:hidden;
  width:100%;
  isolation:isolate;
}
.win-bar{
  display:flex; align-items:center; gap:8px;
  height:36px; padding:0 16px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.win-bar .tl{ display:flex; gap:6px; }
.win-bar .tl span{ width:11px; height:11px; border-radius:50%; }
.win-bar .tl span:nth-child(1){ background:#FF5F57; }
.win-bar .tl span:nth-child(2){ background:#FEBC2E; }
.win-bar .tl span:nth-child(3){ background:#28C840; }
.win-bar .url{
  flex:1; display:flex; justify-content:center;
  font-size:11.5px; color:rgba(255,255,255,.55);
  letter-spacing:.04em;
}
.win-bar .url::before{
  content:''; width:11px; height:11px; margin-right:8px; align-self:center;
  background: rgba(255,255,255,.18);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") no-repeat center/contain;
}

/* ===== Dashboard mock ===== */
.mock{
  display:grid;
  grid-template-columns: 168px 1fr;
  background:#fff;
  color:var(--c-ink);
  font-size:11.5px;
  min-width:0;
}
.mock > *{ min-width:0; }
@media(max-width:600px){
  .mock{ grid-template-columns: 1fr; }
  .mock-side{ display:none; }
}
.mock-side{
  background: linear-gradient(180deg, #0B1220 0%, #0F1729 100%);
  color:#fff;
  padding:14px 8px;
  display:flex; flex-direction:column; gap:2px;
}
.mock-side .ms-logo{
  font-weight:800; letter-spacing:-0.02em; padding:6px 10px 14px;
  display:flex; align-items:baseline;
}
.mock-side .ms-logo .dl{ color:#fff; }
.mock-side .ms-logo .pay{ color:var(--c-green); }
.mock-side .ms-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:6px;
  color:rgba(255,255,255,.78); font-weight:500;
  font-size:11.5px;
}
.mock-side .ms-item.active{
  background:var(--c-green);
  color:#fff;
}
.mock-side .ms-item .ms-ico{
  width:14px; height:14px; opacity:.85;
  background:currentColor;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
}
.ms-i-dash{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='3' width='7' height='9'/><rect x='14' y='3' width='7' height='5'/><rect x='14' y='12' width='7' height='9'/><rect x='3' y='16' width='7' height='5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='3' width='7' height='9'/><rect x='14' y='3' width='7' height='5'/><rect x='14' y='12' width='7' height='9'/><rect x='3' y='16' width='7' height='5'/></svg>"); }
.ms-i-link{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/><path d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/><path d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/></svg>"); }
.ms-i-sync{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M21 12a9 9 0 1 1-3-6.7M21 4v5h-5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M21 12a9 9 0 1 1-3-6.7M21 4v5h-5'/></svg>"); }
.ms-i-list{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><circle cx='4' cy='6' r='1'/><circle cx='4' cy='12' r='1'/><circle cx='4' cy='18' r='1'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><circle cx='4' cy='6' r='1'/><circle cx='4' cy='12' r='1'/><circle cx='4' cy='18' r='1'/></svg>"); }
.ms-i-shield{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M12 2l9 4v6c0 5-3.8 9.4-9 10-5.2-.6-9-5-9-10V6l9-4z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M12 2l9 4v6c0 5-3.8 9.4-9 10-5.2-.6-9-5-9-10V6l9-4z'/></svg>"); }
.ms-i-cog{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1A2 2 0 1 1 4.4 17l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9 1.7 1.7 0 0 0 4.4 7.2l-.1-.1A2 2 0 1 1 7.1 4.4l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='12' cy='12' r='3'/></svg>"); }

.mock-main{
  padding:16px 18px;
  background:#FAFBFD;
  display:flex; flex-direction:column; gap:14px;
}
.mock-head{
  display:flex; justify-content:space-between; align-items:center;
}
.mock-head h4{ margin:0; font-size:15px; font-weight:700; color:var(--c-ink); letter-spacing:-0.01em; }
.mock-pills{ display:flex; gap:6px; }
.mock-pill{
  font-size:10px; font-weight:600;
  padding:4px 8px; border-radius:6px;
  background:#fff; border:1px solid var(--c-line);
  color:var(--c-mute);
}
.mock-pill.brand{ background:var(--c-brand); color:#fff; border-color:transparent; }

.mock-kpis{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.mock-kpi{
  background:#fff; border:1px solid var(--c-line);
  border-radius:8px; padding:10px 12px;
  display:flex; flex-direction:column; gap:2px;
}
.mock-kpi .lbl{ font-size:10px; color:var(--c-mute); font-weight:500; }
.mock-kpi .val{ font-size:16px; font-weight:800; color:var(--c-brand); letter-spacing:-0.01em; }
.mock-kpi .val .currency{ font-size:11px; color:var(--c-green-dd); margin-right:2px; vertical-align:1px; }
.mock-kpi.green .val{ color:var(--c-green-dd); }

.mock-charts{
  display:grid; grid-template-columns: 1.5fr 1fr; gap:10px;
}
.mock-charts > *{ min-width:0; }
@media(max-width:600px){ .mock-charts{ grid-template-columns:1fr; } }
.mock-chart{
  background:#fff; border:1px solid var(--c-line);
  border-radius:8px; padding:10px 12px;
  min-height:140px;
}
.mock-chart h5{
  margin:0 0 6px; font-size:11px; color:var(--c-ink);
  font-weight:700; letter-spacing:-0.005em;
  display:flex; justify-content:space-between; align-items:center; gap:6px;
  white-space:nowrap;
}
.mock-chart h5 .badge{
  font-size:9px; font-weight:600; color:var(--c-mute);
  background:var(--c-bg-alt); padding:2px 6px; border-radius:4px;
  flex:0 0 auto;
}
.mock-chart .legend{ display:flex; gap:10px; margin-top:6px; font-size:9.5px; color:var(--c-mute); }
.mock-chart .legend span::before{
  content:''; display:inline-block; width:8px; height:8px;
  border-radius:50%; margin-right:4px; vertical-align:-1px;
}
.mock-chart .legend .l1::before{ background:var(--c-green); }
.mock-chart .legend .l2::before{ background:#1E88E5; }

.mock-line svg{ width:100%; height:96px; display:block; }

.mock-donut{
  display:flex; align-items:center; gap:10px;
}
.donut{
  --p1: 40%;
  --p2: 53%;
  --p3: 98%;
  width:88px; height:88px; border-radius:50%; flex:0 0 auto;
  background:
    conic-gradient(
      var(--c-green) 0 var(--p1),
      #FFB100 var(--p1) var(--p2),
      #FF6B6B var(--p2) var(--p3),
      #1E88E5 var(--p3) 100%
    );
  position:relative;
}
.donut::before{
  content:''; position:absolute; inset:14px;
  background:#fff; border-radius:50%;
}
.donut::after{
  content:'45%'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:var(--c-green-dd);
  letter-spacing:-0.02em;
}
.donut-legend{
  display:flex; flex-direction:column; gap:5px; font-size:10px;
}
.donut-legend li{ list-style:none; display:flex; align-items:center; gap:6px; color:var(--c-ink); }
.donut-legend li span{ width:7px; height:7px; border-radius:50%; }
.donut-legend .c1{ background:var(--c-green); }
.donut-legend .c2{ background:#FFB100; }
.donut-legend .c3{ background:#FF6B6B; }
.donut-legend .c4{ background:#1E88E5; }

.mock-table{
  background:#fff; border:1px solid var(--c-line); border-radius:8px;
  overflow:hidden;
  font-size:10.5px;
}
.mock-table .mt-head{
  display:grid; grid-template-columns:1.6fr .9fr .9fr .6fr;
  background:var(--c-bg-alt);
  padding:8px 10px;
  font-weight:700; font-size:9.5px; color:var(--c-mute);
  letter-spacing:.04em; text-transform:uppercase;
}
.mock-table .mt-row{
  display:grid; grid-template-columns:1.6fr .9fr .9fr .6fr;
  padding:8px 10px;
  border-top:1px solid var(--c-line-soft);
  align-items:center;
}
.mock-table .mt-row .name{ font-weight:600; color:var(--c-ink); }
.mock-table .mt-row .val{ color:var(--c-ink); font-variant-numeric: tabular-nums; }
.mock-table .mt-row .var{ font-weight:700; font-size:10px; }
.mock-table .mt-row .var.up{ color:var(--c-green-dd); }
.mock-table .mt-row .var.down{ color:#E53935; }
.mock-table .mt-row .var .arr{ display:inline-block; transform: translateY(-1px); }

/* Floating phone (hero) */
.phone{
  position:absolute;
  right:-12px; bottom:-60px;
  width:188px;
  background:#0B1220;
  border-radius:30px;
  padding:6px;
  box-shadow:var(--sh-xl), 0 0 0 1.5px rgba(255,255,255,.06) inset;
  z-index:2;
}
@media(max-width:980px){
  .phone{ right:0; bottom:auto; top:auto; position:relative; margin:0 auto; }
}
.phone .notch{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  width:80px; height:18px; background:#000; border-radius:999px; z-index:2;
}
.phone-screen{
  background:linear-gradient(180deg, #0F1729 0%, #0B1220 100%);
  border-radius:24px;
  overflow:hidden;
  position:relative;
  padding:34px 14px 14px;
  color:#fff;
}
.phone-top{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; opacity:.78;
  margin-bottom:12px;
}
.phone-balance{
  background:linear-gradient(135deg, rgba(0,200,83,.16), rgba(0,200,83,.04));
  border:1px solid rgba(0,200,83,.18);
  padding:10px 12px;
  border-radius:10px;
}
.phone-balance .lbl{ font-size:10px; opacity:.7; display:block; }
.phone-balance .val{ font-size:18px; font-weight:800; color:var(--c-green); letter-spacing:-0.02em; display:block; margin-top:2px; white-space:nowrap; }
.phone-balance .meta{ font-size:9.5px; opacity:.65; display:block; margin-top:2px; white-space:nowrap; }
.phone-actions{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  margin:10px 0;
}
.pa{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  padding:8px 4px; border-radius:9px;
  font-size:10px;
}
.pa .ico{ font-size:14px; line-height:1; }
.phone-list{ display:flex; flex-direction:column; gap:5px; margin-top:4px; }
.pl-item{
  display:grid; grid-template-columns: 16px 1fr auto; gap:8px;
  align-items:center;
  font-size:10.5px; padding:6px 8px;
  background:rgba(255,255,255,.04); border-radius:7px;
}
.pl-item .ok{ color:var(--c-green); font-weight:800; }
.pl-item .pl-val{ color:var(--c-green); font-weight:700; }

/* ===== LOGOS ===== */
.logos{ padding: 56px 0 !important; background:var(--c-bg); border-bottom:1px solid var(--c-line-soft); }
.logos-title{
  text-align:center; color:var(--c-mute); font-size:12.5px; margin:0 0 28px;
  letter-spacing:.12em; text-transform:uppercase; font-weight:700;
}
.logos-track{
  display:flex; flex-wrap:wrap; gap:12px 14px; justify-content:center; align-items:center;
}
.logo-pill{
  font-weight:700; letter-spacing:.06em; font-size:12.5px;
  color:var(--c-mute);
  padding:9px 18px;
  border:1px solid var(--c-line);
  border-radius:var(--r-pill);
  background:#fff;
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.logo-pill:hover{
  color:var(--c-ink);
  border-color:var(--c-green);
  transform:translateY(-2px);
  box-shadow:var(--sh-sm);
}

/* ===== Generic card ===== */
.card{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:28px;
  box-shadow:var(--sh-xs);
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:#D7DCE5; }

/* ===== PAIN ===== */
.pain{ background:#fff; border-top:1px solid var(--c-line-soft); border-bottom:1px solid var(--c-line-soft); }
.pain-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
@media(max-width:980px){ .pain-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .pain-grid{ grid-template-columns:1fr; } }
.pain-card{
  display:flex; flex-direction:column; gap:8px;
}
.pain-card h3{ font-size:18px; font-weight:700; margin:0; line-height:1.3; letter-spacing:-0.005em; }
.pain-card p{ color:var(--c-mute); margin:0; font-size:14.5px; }
.card-ico{
  width:44px; height:44px; border-radius:10px;
  background:linear-gradient(135deg, #FFF, #F1F4F9);
  border:1px solid var(--c-line);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-ink); margin-bottom:10px;
}
.card-ico svg{ width:22px; height:22px; }

/* ===== BENEFITS ===== */
.benefits{ background:var(--c-bg); }
.benefit-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
@media(max-width:980px){ .benefit-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .benefit-grid{ grid-template-columns:1fr; } }
.benefit-grid > *{ min-width:0; }

.benefit{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:30px;
  box-shadow:var(--sh-xs);
  display:flex; flex-direction:column; gap:12px;
  min-width:0;
  position:relative;
  overflow:hidden;
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.benefit::before{
  content:'';
  position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--c-green), transparent);
  opacity:0; transition: opacity var(--t-mid);
}
.benefit:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:rgba(0,200,83,.3); }
.benefit:hover::before{ opacity:1; }
.b-ico{
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg, var(--c-green-l) 0%, #fff 100%);
  border:1px solid rgba(0,200,83,.18);
  color:var(--c-green-dd);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:6px;
}
.b-ico svg{ width:24px; height:24px; }
.benefit h3{ font-size:19px; font-weight:700; margin:0; line-height:1.25; letter-spacing:-0.01em; }
.benefit p{ margin:0; color:var(--c-ink-soft); font-size:14.5px; line-height:1.55; }
.benefit .proof{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--c-bg-alt);
  color:var(--c-ink);
  font-size:12.5px; font-weight:600;
  padding:7px 12px;
  border-radius:var(--r-pill);
  align-self:flex-start;
  border:1px solid var(--c-line);
}
.benefit .proof.live{ background:var(--c-green-l); color:var(--c-green-dd); border-color:rgba(0,200,83,.18); }
.pulse{
  width:7px; height:7px; border-radius:50%;
  background:var(--c-green);
  box-shadow: 0 0 0 0 rgba(0,200,83,.6);
  animation: pulse 1.6s infinite;
  flex:0 0 auto;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(0,200,83,.55); }
  70%{ box-shadow:0 0 0 8px rgba(0,200,83,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,200,83,0); }
}

.benefit-cta{
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-2) 100%);
  color:#fff;
  border:none;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.benefit-cta::after{
  content:''; position:absolute; right:-40%; top:-40%;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,200,83,.22), transparent 65%);
  pointer-events:none;
}
.benefit-cta h3{ color:#fff; }
.benefit-cta p{ color:rgba(255,255,255,.78); }
.benefit-cta .btn{ margin-top:14px; }

/* ===== HOW TO ===== */
.howto{ background:#fff; }
.steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  list-style:none; padding:0; margin:0;
  position:relative;
  counter-reset: steps;
}
.steps::before{
  content:'';
  position:absolute; top:34px; left:8%; right:8%; height:2px;
  background: repeating-linear-gradient(90deg, var(--c-line) 0 6px, transparent 6px 12px);
  z-index:0;
}
@media(max-width:980px){
  .steps{ grid-template-columns:repeat(2,1fr); }
  .steps::before{ display:none; }
}
@media(max-width:600px){
  .steps{ grid-template-columns:1fr; }
}
.step{
  position:relative; z-index:1;
  background:#fff;
  padding: 0 6px;
  text-align:left;
}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:68px; height:68px;
  font-size:22px; font-weight:800;
  color:#fff;
  background: linear-gradient(135deg, var(--c-green) 0%, var(--c-green-d) 100%);
  border:3px solid #fff;
  box-shadow: var(--sh-sm), 0 0 0 1px var(--c-green-d);
  border-radius:50%;
  margin-bottom:18px;
  letter-spacing:-0.02em;
}
.step h3{ font-size:18px; font-weight:700; margin:0 0 6px; letter-spacing:-0.005em; }
.step p{ margin:0; color:var(--c-mute); font-size:14.5px; }

/* ===== PROFILES ===== */
.profiles{ background:var(--c-bg); }
.profile-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
@media(max-width:1024px){ .profile-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .profile-grid{ grid-template-columns:1fr; } }
.profile-grid > *{ min-width:0; }
.profile-card{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding:26px;
  box-shadow:var(--sh-xs);
  display:flex; flex-direction:column; gap:14px;
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.profile-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:rgba(0,200,83,.4); }
.p-ico{
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg, var(--c-green-l) 0%, #fff 100%);
  border:1px solid rgba(0,200,83,.18);
  color:var(--c-green-dd);
  display:flex; align-items:center; justify-content:center;
}
.p-ico svg{ width:22px; height:22px; }
.profile-card h3{ font-size:18px; margin:0; font-weight:700; letter-spacing:-0.005em; }
.p-pain{ color:var(--c-mute); margin:0; font-size:14px; line-height:1.5; }
.p-combo{
  list-style:none; padding:0; margin:6px 0 14px;
  display:flex; flex-direction:column; gap:7px;
}
.p-combo li{
  position:relative; padding-left:22px;
  font-size:14px; color:var(--c-ink-soft);
}
.p-combo li::before{
  content:''; position:absolute; left:0; top:7px;
  width:14px; height:14px;
  background:var(--c-green-l); border:2px solid var(--c-green);
  border-radius:50%;
}
.p-combo li::after{
  content:''; position:absolute; left:4px; top:11px;
  width:6px; height:3px;
  border-left:2px solid var(--c-green-dd);
  border-bottom:2px solid var(--c-green-dd);
  transform: rotate(-45deg);
}
.profile-card .btn{ margin-top:auto; font-size:13.5px; padding:11px 14px; }

/* ===== Product showcase (mocks) ===== */
.product-shots{ background:#fff; }
.shots-stack{ display:flex; flex-direction:column; gap:24px; }
.shot{
  margin:0; padding:0;
}
.shot figcaption{
  color:var(--c-mute); font-size:13px; text-align:center;
  margin-top:14px; letter-spacing:.01em;
}
.shots-row{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
@media(max-width:760px){ .shots-row{ grid-template-columns:1fr; } }

/* Mock variant: vendas list */
.mock.mock-vendas .mock-table .mt-head,
.mock.mock-vendas .mock-table .mt-row{
  grid-template-columns: 1.1fr .9fr .8fr .9fr 1fr .8fr .8fr;
}
.mock.mock-vendas .mock-main{ gap:12px; }
.mock.mock-vendas .filter-row{ display:flex; gap:8px; align-items:center; }
.mock.mock-vendas .filter-pill{
  font-size:10px; padding:5px 10px; background:#fff;
  border:1px solid var(--c-line); border-radius:6px; color:var(--c-mute);
}
.mock.mock-vendas .filter-pill.brand{ background:var(--c-brand); color:#fff; border-color:transparent; font-weight:600; }
.mock-status{
  font-size:9.5px; font-weight:700; padding:3px 8px; border-radius:5px;
  background:var(--c-green); color:#fff; letter-spacing:.04em;
}

/* Mock variant: links pagamento */
.mock.mock-links .mock-table .mt-head,
.mock.mock-links .mock-table .mt-row{
  grid-template-columns: 1.4fr 60px 1.6fr 70px 30px;
}
.mock-link-ico{
  width:22px; height:22px; border-radius:5px;
  background:var(--c-green-l); color:var(--c-green-dd);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,200,83,.18);
}
.mock-link-ico svg{ width:11px; height:11px; }

/* ===== SOCIAL PROOF ===== */
.social-proof{ background:var(--c-bg); }

.testimonial-feature{
  max-width:880px; margin:0 auto 64px;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--r-2xl);
  padding:44px 48px;
  box-shadow:var(--sh-md);
  position:relative;
  overflow:hidden;
}
.testimonial-feature::before{
  content:'\201C';
  font-family: Georgia, serif;
  font-size:160px; line-height:1;
  color:var(--c-green-l);
  position:absolute; top:-20px; left:32px;
  pointer-events:none;
  font-weight:700;
}
.testimonial-feature::after{
  content:''; position:absolute; right:-40px; bottom:-40px;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, var(--c-green-l), transparent 70%);
  pointer-events:none;
}
.t-avatar{
  position:relative;
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg, var(--c-green) 0%, var(--c-green-d) 100%);
  color:#fff; font-weight:800; font-size:26px;
  display:flex; align-items:center; justify-content:center;
  margin:0 0 18px;
  border:3px solid #fff;
  box-shadow:var(--sh-sm);
}
.testimonial-feature blockquote{
  position:relative;
  margin:0 0 18px; padding:0;
  font-size:clamp(18px, 1.6vw, 22px);
  line-height:1.5; font-weight:500; color:var(--c-ink);
  letter-spacing:-0.005em;
}
.testimonial-feature footer{
  position:relative;
  font-size:14px; color:var(--c-mute); border:none;
}
.testimonial-feature footer strong{ color:var(--c-ink); }
.t-meta{ font-size:13px; }

.t-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-bottom:64px;
}
@media(max-width:980px){ .t-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .t-grid{ grid-template-columns:1fr; } }
.t-mini{
  background:#fff; border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:20px 22px;
  display:flex; flex-direction:column; gap:10px;
  font-size:14.5px;
  box-shadow:var(--sh-xs);
  transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.t-mini:hover{ transform:translateY(-3px); box-shadow:var(--sh-sm); border-color:rgba(0,200,83,.3); }
.t-mini p{ margin:0; color:var(--c-ink); line-height:1.5; }
.t-mini span{ font-size:13px; color:var(--c-mute); }
.t-mini strong{ color:var(--c-ink); }
.stars{ color:var(--c-green); letter-spacing:1px; font-size:13px; }

.kpi-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  background:linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-2) 60%, #1B2436 100%);
  color:#fff;
  border-radius:var(--r-2xl);
  padding:44px 36px;
  margin-bottom:56px;
  position:relative; overflow:hidden;
}
.kpi-row::before{
  content:''; position:absolute; right:-100px; top:-100px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,200,83,.18), transparent 65%);
  pointer-events:none;
}
@media(max-width:760px){ .kpi-row{ grid-template-columns:repeat(2,1fr); padding:32px 24px; gap:32px 16px; } }
.kpi{ display:flex; flex-direction:column; gap:6px; position:relative; }
.kpi .num{
  font-size:clamp(28px, 3vw, 40px);
  font-weight:800; color:var(--c-green);
  letter-spacing:-0.025em; line-height:1;
}
.kpi .lbl{ font-size:13px; color:rgba(255,255,255,.78); line-height:1.4; }

.seals{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  margin-bottom:56px;
}
.seals > *{ min-width:0; }
@media(max-width:760px){ .seals{ grid-template-columns:repeat(2,1fr); gap:12px; } }
@media(max-width:480px){ .seals{ grid-template-columns:1fr; } }
.seal{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:16px 18px;
  font-size:13.5px; color:var(--c-mute);
  box-shadow:var(--sh-xs);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  min-width:0;
}
.seal > span:not(.seal-ico){ min-width:0; overflow:hidden; }
.seal:hover{ transform:translateY(-2px); box-shadow:var(--sh-sm); }
.seal-ico{
  width:42px; height:42px; border-radius:10px;
  background:linear-gradient(135deg, var(--c-green-l), #fff);
  border:1px solid rgba(0,200,83,.18);
  color:var(--c-green-dd);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.seal-ico svg{ width:22px; height:22px; }
.seal strong{ color:var(--c-ink); display:block; font-size:14.5px; line-height:1.25; margin-bottom:2px; }

/* Case study */
.case-study{
  display:grid; grid-template-columns: 1fr 1fr; gap:0;
  background:#fff; border:1px solid var(--c-line);
  border-radius:var(--r-2xl); overflow:hidden;
  box-shadow:var(--sh-md);
}
@media(max-width:760px){ .case-study{ grid-template-columns:1fr; } }
.cs-img{
  background: linear-gradient(135deg, #0F1729 0%, #0B1220 100%);
  padding:32px;
  display:flex; align-items:center;
  position:relative;
}
.cs-img .win{ box-shadow: var(--sh-md); }
.cs-body{ padding:40px; display:flex; flex-direction:column; gap:16px; }
.cs-body .badge{
  display:inline-flex; align-items:center; gap:6px;
  align-self:flex-start;
  background:var(--c-green-l); color:var(--c-green-dd);
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--r-pill);
  border:1px solid rgba(0,200,83,.18);
}
.cs-body h3{ font-size:24px; line-height:1.25; margin:0; font-weight:700; letter-spacing:-0.015em; }
.cs-body ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; color:var(--c-ink-soft); font-size:15px; }
.cs-body ul li{ position:relative; padding-left:26px; line-height:1.5; }
.cs-body ul li::before{
  content:'';
  position:absolute; left:0; top:5px; width:16px; height:16px;
  border-radius:50%;
  background:var(--c-green-l) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A845' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center/10px;
}

/* ===== DIFFERENTIATORS ===== */
.diff{ background:#fff; }
.compare-wrap{
  border-radius:var(--r-xl);
  border:1px solid var(--c-line);
  box-shadow:var(--sh-md);
  overflow:hidden;
  background:#fff;
}
.compare-scroll{ overflow-x:auto; }
.compare{
  width:100%; border-collapse:collapse; min-width:680px;
  background:#fff;
}
.compare th, .compare td{
  padding:18px 24px; text-align:left;
  border-bottom:1px solid var(--c-line);
  font-size:15px;
  vertical-align:middle;
}
.compare thead th{
  background:var(--c-bg-alt);
  font-weight:700; color:var(--c-mute);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.1em;
  border-bottom:1px solid var(--c-line);
}
.compare th.th-dlpay{
  background:linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-2) 100%);
  color:#fff;
  position:relative;
}
.compare th.th-dlpay .th-logo{
  display:inline-flex; align-items:baseline; font-size:18px; font-weight:800; letter-spacing:-0.02em;
  text-transform:none;
}
.compare th.th-dlpay .th-logo .pay{ color:var(--c-green); }
.compare td.td-mkt{ color:var(--c-mute); }
.compare td.td-dlpay{
  background:linear-gradient(180deg, var(--c-green-ll) 0%, var(--c-green-l) 100%);
  font-weight:600; color:var(--c-ink);
}
.compare td.td-dlpay .check{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--c-green); color:#fff; font-weight:800; font-size:12px;
  margin-right:10px;
  vertical-align:-3px;
}
.compare tbody tr:last-child td{ border-bottom:none; }
.compare-note{ text-align:center; margin-top:18px; }

/* ===== SUPPORT ===== */
.support{
  background:linear-gradient(135deg, var(--c-brand) 0%, #0F1729 50%, var(--c-brand-2) 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.support::before{
  content:''; position:absolute; top:-220px; right:-180px; width:540px; height:540px;
  background:radial-gradient(circle, rgba(0,200,83,.18), transparent 70%);
  pointer-events:none;
}
.support::after{
  content:''; position:absolute; bottom:-260px; left:-180px; width:540px; height:540px;
  background:radial-gradient(circle, rgba(0,200,83,.10), transparent 70%);
  pointer-events:none;
}
.support .h2{ color:#fff; }
.support .lead{ color:rgba(255,255,255,.75); }
.support-grid{
  display:grid; grid-template-columns: 1.05fr 1fr; gap:56px;
  align-items:center; position:relative;
}
@media(max-width:980px){ .support-grid{ grid-template-columns:1fr; gap:40px; } }

.sup-video{ display:flex; flex-direction:column; gap:18px; }
.sup-video-inner{
  background:#fff; color:var(--c-ink);
  border-radius:var(--r-xl);
  padding:18px;
  box-shadow:var(--sh-xl);
}
.chat{ display:flex; flex-direction:column; gap:8px; }
.chat-h{
  display:flex; align-items:center; gap:10px;
  padding:6px 4px 12px;
  border-bottom:1px solid var(--c-line-soft);
  font-size:14px; font-weight:600;
}
.chat-h .c-avatar{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, var(--c-green), var(--c-green-d));
  color:#fff; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.chat-h .c-info{ display:flex; flex-direction:column; line-height:1.2; }
.chat-h .c-info small{ font-size:11.5px; color:var(--c-green-dd); font-weight:600; display:flex; align-items:center; gap:5px; }
.dot-online{
  width:8px; height:8px; border-radius:50%;
  background:var(--c-green);
  box-shadow: 0 0 0 0 rgba(0,200,83,.6);
  animation: pulse 1.6s infinite;
}
.chat-body{ display:flex; flex-direction:column; gap:8px; padding-top:8px; }
.msg{
  display:inline-flex; flex-direction:column;
  max-width:80%;
  font-size:14px; line-height:1.4;
  padding:10px 14px;
  border-radius:14px;
}
.msg .time{ font-size:10.5px; color:var(--c-mute); align-self:flex-end; margin-top:4px; }
.msg.user{
  background:#F1F4F9; color:var(--c-ink);
  align-self:flex-end;
  border-bottom-right-radius:4px;
}
.msg.dlp{
  background:var(--c-green-l); color:var(--c-ink);
  align-self:flex-start;
  border-bottom-left-radius:4px;
}
.typing{ display:flex; gap:4px; padding:10px 14px; align-self:flex-start; background:var(--c-green-l); border-radius:14px; border-bottom-left-radius:4px; }
.typing span{
  width:6px; height:6px; border-radius:50%; background:var(--c-mute);
  animation: bounce 1.2s infinite;
}
.typing span:nth-child(2){ animation-delay:.15s; }
.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{
  0%,80%,100%{ transform:translateY(0); opacity:.4; }
  40%{ transform:translateY(-5px); opacity:1; }
}
.live-time{
  color:rgba(255,255,255,.85) !important;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.06);
  padding:10px 14px;
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.08);
  align-self:flex-start;
}

.sup-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:24px;
}
.sup-list li{
  display:grid; grid-template-columns:48px 1fr; grid-template-rows:auto auto;
  column-gap:18px; row-gap:4px;
}
.sup-list .li-ico{
  grid-row:1 / span 2; align-self:start;
  width:48px; height:48px; border-radius:12px;
  background:rgba(0,200,83,.14);
  border:1px solid rgba(0,200,83,.22);
  color:var(--c-green);
  display:flex; align-items:center; justify-content:center;
}
.sup-list .li-ico svg{ width:22px; height:22px; }
.sup-list strong{ font-size:17px; color:#fff; line-height:1.3; letter-spacing:-0.005em; }
.sup-list span:not(.li-ico){ color:rgba(255,255,255,.72); font-size:14.5px; line-height:1.5; }

/* ===== FAQ ===== */
.faq{ background:#fff; }
.faq-list{ display:flex; flex-direction:column; gap:8px; }
.faq-item{
  background:var(--c-bg);
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  padding: 0;
  overflow:hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.faq-item:hover{ background:#fff; border-color:#D7DCE5; }
.faq-item[open]{ background:#fff; border-color:rgba(0,200,83,.4); box-shadow:var(--sh-sm); }
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:20px 24px;
  font-weight:600;
  font-size:16px;
  color:var(--c-ink);
  display:flex; justify-content:space-between; align-items:center;
  position:relative;
  padding-right:60px;
  letter-spacing:-0.005em;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'';
  position:absolute; right:24px; top:50%;
  width:14px; height:14px;
  border-right:2.4px solid var(--c-mute);
  border-bottom:2.4px solid var(--c-mute);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.faq-item[open] summary::after{
  transform: translateY(-30%) rotate(-135deg);
  border-color: var(--c-green-dd);
}
.faq-item p{
  margin:0; padding:0 24px 22px;
  color:var(--c-ink-soft); font-size:15px;
  line-height:1.6;
}
.faq-item p a{ color:var(--c-green-dd); border-bottom:1.5px solid currentColor; font-weight:600; }

/* ===== CTA FINAL ===== */
.cta-final{
  background:
    radial-gradient(900px 360px at 50% -10%, rgba(0,200,83,.14), transparent 70%),
    radial-gradient(700px 320px at 100% 110%, rgba(11,18,32,.05), transparent 70%),
    var(--c-bg);
  position:relative;
}
.cta-final::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(11,18,32,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,32,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
  pointer-events:none;
  opacity:.5;
}
.cta-final-card{
  position:relative;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--r-2xl);
  padding:56px 56px;
  box-shadow:var(--sh-xl);
}
@media(max-width:760px){ .cta-final-card{ padding:32px 24px; } }

.offer-list{
  list-style:none; padding:0; margin:0 0 28px;
  display:flex; flex-direction:column; gap:10px;
  font-size:15.5px; color:var(--c-ink-soft);
}
.offer-list li{ display:flex; align-items:flex-start; gap:12px; }
.offer-list .oi{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--c-green); color:#fff;
  font-weight:800; font-size:13px;
  flex:0 0 auto;
  margin-top:2px;
}

/* ===== FORM ===== */
.form{ display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:6px; border:none; padding:0; margin:0; }
.field label, .field legend{
  font-size:13.5px; font-weight:600; color:var(--c-ink-soft);
  padding:0;
  display:inline-flex; align-items:center; gap:6px;
}
.field input:not([type="radio"]):not([type="checkbox"]),
.field select{
  width:100%;
  font:inherit; font-size:15px;
  padding:14px 16px;
  border:1.5px solid var(--c-line);
  border-radius:var(--r-md);
  background:#fff; color:var(--c-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  appearance:none; -webkit-appearance:none;
}
.field select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235C6878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat; background-position: right 16px center; padding-right:42px;
}
.field input::placeholder{ color:#9AA5B5; }
.field input:focus, .field select:focus{
  outline:none;
  border-color:var(--c-green);
  box-shadow:0 0 0 4px rgba(0,200,83,.14);
}
.field input.invalid, .field select.invalid{
  border-color:#E53935;
  box-shadow:0 0 0 4px rgba(229,57,53,.10);
}
.field .err{
  font-size:13px; color:#E53935;
  min-height:18px;
}
.radios{ display:flex; gap:10px; flex-wrap:wrap; padding-top:4px; }
.radios label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; color:var(--c-ink); font-weight:500;
  cursor:pointer;
  padding:11px 16px;
  border:1.5px solid var(--c-line);
  border-radius:var(--r-md);
  background:#fff;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.radios label:hover{ border-color:var(--c-green); }
.radios label:has(input:checked){
  border-color:var(--c-green);
  background:var(--c-green-l);
}
.radios input{ accent-color: var(--c-green); width:18px; height:18px; margin:0; }

.tip{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:var(--c-line); color:var(--c-mute);
  font-size:11px; font-weight:700;
  cursor:help;
  position:relative;
}
.tip:hover::after, .tip:focus::after{
  content:'Usamos para calcular sua simulação de taxas. Não compartilhamos com ninguém.';
  position:absolute; left:50%; transform:translateX(-50%); bottom:140%;
  width:240px;
  background:var(--c-brand); color:#fff;
  font-size:12px; font-weight:500; line-height:1.4;
  padding:10px 14px; border-radius:var(--r-md);
  box-shadow:var(--sh-md);
  white-space:normal; text-align:center;
  pointer-events:none;
  z-index:5;
}

.triggers{
  list-style:none; padding:0; margin:20px 0 0;
  display:flex; flex-direction:column; gap:6px;
  text-align:center;
  font-size:13px; color:var(--c-mute);
}
.triggers li{ display:flex; align-items:center; justify-content:center; gap:6px; }
.triggers li::before{
  content:''; width:14px; height:14px; flex:0 0 auto;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>") no-repeat center/contain;
  opacity:.75;
}

/* ===== Thank you ===== */
[hidden]{ display:none !important; }
.thank-you{
  text-align:center; padding:32px 8px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.ty-ico{
  width:80px; height:80px; border-radius:50%;
  background:linear-gradient(135deg, var(--c-green-l), #fff);
  border:1px solid rgba(0,200,83,.22);
  color:var(--c-green-dd);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 8px rgba(0,200,83,.08);
}
.ty-ico svg{ width:38px; height:38px; }
.thank-you h3{ margin:0; font-size:24px; letter-spacing:-0.01em; }
.thank-you p{ margin:0; color:var(--c-ink-soft); max-width:520px; line-height:1.6; }

/* ===== FOOTER ===== */
.site-footer{
  background:var(--c-brand);
  color:rgba(255,255,255,.7);
  padding:56px 0 40px;
  font-size:13.5px;
}
.footer-inner{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:32px; align-items:center;
}
@media(max-width:760px){
  .footer-inner{ grid-template-columns:1fr; text-align:center; gap:20px; justify-items:center; }
}
.logo-mono{ display:inline-flex; align-items:baseline; font-size:24px; font-weight:800; letter-spacing:-0.02em; }
.logo-mono .dl{ color:#fff; }
.logo-mono .pay{ color:var(--c-green); }
.legal{ margin:0; line-height:1.7; }
.legal-links{
  list-style:none; padding:0; margin:0;
  display:flex; gap:22px; flex-wrap:wrap; justify-content:flex-end;
}
@media(max-width:760px){ .legal-links{ justify-content:center; } }
.legal-links a{ color:rgba(255,255,255,.85); border-bottom:1px solid transparent; transition: border-color var(--t-fast); }
.legal-links a:hover{ border-color:var(--c-green); }

/* ===== Reveal animations ===== */
.reveal{
  opacity:0; transform:translateY(16px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.in{ opacity:1; transform:none; }

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