/* ==========================================================================
   HOME V2 — Tema tecnológico do Disparador
   Paleta: índigo profundo + teal de sinal + coral de destaque
   Tipografia: Space Grotesk (display) / Inter (corpo) / JetBrains Mono (dados)
   ========================================================================== */

:root{
  --bg:            #0A0E1C;
  --bg-alt:        #0F1428;
  --surface:       #141B34;
  --surface-soft:  #1B2340;
  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(255,255,255,.14);
  --text:          #EDEFF6;
  --text-muted:    #98A1BE;
  --text-faint:    #6C7592;
  --accent:        #2EE6C4;   /* teal de sinal */
  --accent-dim:    rgba(46,230,196,.14);
  --coral:         #FF6857;   /* destaque secundário / popular */
  --coral-dim:     rgba(255,104,87,.14);
  --violet:        #7C6CF0;   /* apoio em gradientes */
  --wa-green:      #25D366;   /* só dentro do mockup do WhatsApp */
  --wa-bg:         #0B141A;
  --wa-bubble-in:  #1F2C34;
  --wa-bubble-out: #005C4B;
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 10px;
  --shadow-soft: 0 20px 60px -20px rgba(0,0,0,.55);
}

.hv2{ color: var(--text); }
.hv2 *{ box-sizing: border-box; }

.hv2-fonts{ display:none; }

.hv2 h1, .hv2 h2, .hv2 h3, .hv2 h4, .hv2 .font-display{
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}
.hv2, .hv2 p, .hv2 li, .hv2 a, .hv2 button{
  font-family: 'Inter', sans-serif;
}
.hv2 .mono, .hv2 .eyebrow, .hv2 .tag, .hv2 .stat-num{
  font-family: 'JetBrains Mono', monospace;
}

.hv2 section{ position: relative; }

.hv2 .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent); background: var(--accent-dim);
  border:1px solid rgba(46,230,196,.28);
  padding:6px 14px; border-radius: 999px; margin-bottom:18px;
}
.hv2 .eyebrow svg{ width:14px; height:14px; }

.hv2 .section-head{ max-width: 720px; margin: 0 auto 56px; text-align:center; }
.hv2 .section-head h2{ font-size: clamp(28px,4vw,42px); font-weight:700; margin-bottom:14px; }
.hv2 .section-head p{ color: var(--text-muted); font-size:16px; line-height:1.7; }
.hv2 .section-head.left{ text-align:left; margin-left:0; }

/* ---------- botões ---------- */
.hv2 .btn-hv2{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius: 999px; font-weight:600; font-size:15px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.hv2 .btn-hv2:hover{ transform: translateY(-2px); }
.hv2 .btn-primary-hv2{
  background: linear-gradient(135deg, var(--accent), #1FBFA3);
  color:#04140F; box-shadow: 0 10px 30px -8px rgba(46,230,196,.55);
}
.hv2 .btn-ghost-hv2{
  background: rgba(255,255,255,.03); color: var(--text);
  border-color: var(--line-strong);
}
.hv2 .btn-ghost-hv2:hover{ border-color: var(--accent); color: var(--accent); }

/* ---------- HERO ---------- */
.hv2-hero{
  background: radial-gradient(1200px 600px at 15% -10%, rgba(124,108,240,.25), transparent 60%),
              radial-gradient(900px 500px at 100% 0%, rgba(46,230,196,.16), transparent 55%),
              var(--bg);
  padding: 120px 0 100px;
  overflow:hidden;
  border-bottom: 1px solid var(--line);
}
.hv2-hero-grid{
  position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(70% 60% at 30% 20%, black, transparent);
}
.hv2-hero-flowlines{ position:absolute; inset:0; pointer-events:none; opacity:.5; }
.hv2-hero .container{ position:relative; z-index:2; }
.hv2-hero h1{
  font-size: clamp(32px, 4.6vw, 54px); font-weight:700; line-height:1.08; margin-bottom:22px;
}
.hv2-hero h1 span{ color: var(--accent); }
.hv2-hero .desc{ color: var(--text-muted); font-size:18px; line-height:1.7; max-width:520px; margin-bottom:32px; }
.hv2-hero .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; }
.hv2-hero .trust-row{ display:flex; gap:22px; flex-wrap:wrap; color: var(--text-faint); font-size:13px; }
.hv2-hero .trust-row .item{ display:flex; align-items:center; gap:8px; }
.hv2-hero .trust-row svg{ width:16px; height:16px; color: var(--accent); }

/* mockup de telefone no hero */
.hv2-phone{
  position:relative; margin-left:auto; max-width:340px;
  background: linear-gradient(160deg, #171E38, #0D1226);
  border: 1px solid var(--line-strong); border-radius: 40px; padding:14px;
  box-shadow: var(--shadow-soft);
}
.hv2-phone-notch{ width:70px; height:6px; background:#000; border-radius:6px; margin:0 auto 10px; opacity:.6; }
.hv2-phone-screen{
  background: var(--wa-bg); border-radius: 26px; overflow:hidden; min-height: 460px;
  display:flex; flex-direction:column;
}
.hv2-phone-head{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  background:#1F2C34; border-bottom: 1px solid rgba(255,255,255,.05);
}
.hv2-phone-avatar{
  width:36px; height:36px; border-radius:50%;
  background: linear-gradient(135deg, var(--wa-green), #0d8a4d);
  display:flex; align-items:center; justify-content:center; color:#04140F;
}
.hv2-phone-head .name{ font-size:14px; font-weight:600; color:#EDEFF6; }
.hv2-phone-head .status{ font-size:11px; color: var(--wa-green); }
.hv2-chat{ flex:1; padding:16px; display:flex; flex-direction:column; gap:10px; background-image: radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px); background-size: 14px 14px; }
.hv2-bubble{
  max-width:78%; padding:10px 14px; border-radius: 14px; font-size:13px; line-height:1.5;
  animation: hv2fadeUp .5s ease both;
}
.hv2-bubble.in{ background: var(--wa-bubble-in); color:#E9EDEF; border-bottom-left-radius:4px; align-self:flex-start; }
.hv2-bubble.out{ background: var(--wa-bubble-out); color:#E9EDEF; border-bottom-right-radius:4px; align-self:flex-end; }
.hv2-bubble .time{ display:block; margin-top:4px; font-size:10px; opacity:.55; text-align:right; }
.hv2-bubble-buttons{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.hv2-bubble-buttons button{
  border:none; background: rgba(255,255,255,.06); color: var(--wa-green);
  font-size:12.5px; font-weight:600; padding:8px 10px; border-radius:8px; text-align:center;
  cursor:default;
}
@keyframes hv2fadeUp{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

/* ---------- MARQUEE ---------- */
.hv2-marquee{ padding: 46px 0; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.hv2-marquee .row-track{ display:flex; gap:18px; overflow:hidden; }
.hv2-marquee .track{ display:flex; gap:18px; animation: hv2scroll 32s linear infinite; }
.hv2-marquee .row-track.reverse .track{ animation-direction: reverse; }
.hv2-marquee .chip{
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  padding:12px 20px; border:1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--text-muted); font-size:14px; font-weight:500;
}
.hv2-marquee .chip svg{ width:16px; height:16px; color: var(--accent); }
@keyframes hv2scroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ---------- RECURSOS / MODELOS GRID ---------- */
.hv2-features{ padding: 110px 0; background: var(--bg); }
.hv2-feat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.hv2-feat-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-md);
  padding:26px; transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.hv2-feat-card:hover{ transform: translateY(-4px); border-color: rgba(46,230,196,.35); background: var(--surface-soft); }
.hv2-feat-icon{
  width:46px; height:46px; border-radius: 12px; display:flex; align-items:center; justify-content:center;
  background: var(--accent-dim); color: var(--accent); margin-bottom:16px;
}
.hv2-feat-icon svg{ width:22px; height:22px; }
.hv2-feat-card h4{ font-size:16px; font-weight:700; margin-bottom:6px; }
.hv2-feat-card p{ font-size:13.5px; color: var(--text-muted); line-height:1.6; margin:0; }

/* ---------- API OFICIAL VS QR ---------- */
.hv2-api{ padding: 100px 0; background: var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.hv2-api-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
.hv2-api-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding:36px;
  position:relative; overflow:hidden;
}
.hv2-api-card.featured{ border-color: rgba(46,230,196,.4); box-shadow: 0 0 0 1px rgba(46,230,196,.15) inset; }
.hv2-api-card .badge{
  position:absolute; top:22px; right:22px; font-size:11px; padding:5px 10px; border-radius:999px;
  background: var(--accent-dim); color: var(--accent); font-weight:700; letter-spacing:.04em;
}
.hv2-api-card .badge.coral{ background: var(--coral-dim); color: var(--coral); }
.hv2-api-card h3{ font-size:22px; font-weight:700; margin: 6px 0 10px; }
.hv2-api-card .sub{ color: var(--text-muted); font-size:14px; margin-bottom:22px; }
.hv2-api-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.hv2-api-card li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color: var(--text); }
.hv2-api-card li svg{ width:18px; height:18px; color: var(--accent); flex:none; margin-top:2px; }

/* ---------- BOT FLOW BUILDER ---------- */
.hv2-flow{ padding: 110px 0; background: var(--bg); }
.hv2-flow-canvas{
  position:relative; background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 50px 30px; overflow:hidden;
}
.hv2-flow-canvas::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px; opacity:.6;
}
.hv2-flow-lines{ position:absolute; inset:0; width:100%; height:100%; }
.hv2-flow-lines path{
  fill:none; stroke: var(--accent); stroke-width:2; stroke-dasharray: 6 6; opacity:.55;
  stroke-dashoffset: 0; animation: hv2dash 6s linear infinite;
}
@keyframes hv2dash{ to{ stroke-dashoffset: -120; } }
.hv2-flow-nodes{ position:relative; z-index:2; display:grid; grid-template-columns: repeat(4,1fr); gap:26px; }
.hv2-flow-node{
  background: var(--surface-soft); border:1px solid var(--line-strong); border-radius: var(--r-md);
  padding:18px; align-self:start;
}
.hv2-flow-node .tag{
  display:inline-flex; align-items:center; gap:6px; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color: var(--accent); margin-bottom:10px;
}
.hv2-flow-node .tag svg{ width:13px; height:13px; }
.hv2-flow-node h5{ font-size:14px; font-weight:700; margin-bottom:6px; }
.hv2-flow-node p{ font-size:12.5px; color: var(--text-muted); margin:0; line-height:1.5; }
.hv2-flow-node.n2, .hv2-flow-node.n4{ margin-top:56px; }

/* ---------- BLOCOS 3 colunas (recursos avançados / medir e relatar) ---------- */
.hv2-adv{ padding: 100px 0; background: var(--bg); }
.hv2-adv-row{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; margin-bottom:70px; }
.hv2-adv-row:last-child{ margin-bottom:0; }
.hv2-adv-icon{
  width:64px; height:64px; border-radius: 16px; display:flex; align-items:center; justify-content:center;
  background: var(--surface); border:1px solid var(--line-strong); color: var(--accent); margin-bottom:20px;
}
.hv2-adv-icon svg{ width:28px; height:28px; }
.hv2-adv-row h3{ font-size: 28px; font-weight:700; margin-bottom:14px; }
.hv2-adv-row p{ color: var(--text-muted); font-size:15.5px; line-height:1.75; }
.hv2-adv-visual{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; min-height: 260px; display:flex; align-items:center; justify-content:center;
}

/* stat strip */
.hv2-stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin: 60px 0 0; }
.hv2-stat{ text-align:center; padding:24px; border:1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.hv2-stat .stat-num{ font-size:30px; font-weight:700; color: var(--accent); display:block; }
.hv2-stat .stat-label{ font-size:12.5px; color: var(--text-muted); margin-top:6px; }

/* ---------- RATING / DEPOIMENTOS ---------- */
.hv2-rating{ padding: 110px 0; background: var(--bg-alt); border-top:1px solid var(--line); }
.hv2-rating-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.hv2-testimonial{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-md); padding:28px;
  display:flex; flex-direction:column; gap:14px;
}
.hv2-testimonial .stars{ display:flex; gap:3px; color: var(--coral); }
.hv2-testimonial .stars svg{ width:15px; height:15px; }
.hv2-testimonial p{ font-size:14.5px; color: var(--text); line-height:1.65; margin:0; }
.hv2-testimonial .who{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px; }
.hv2-testimonial .who img{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:1px solid var(--line-strong); }
.hv2-testimonial .who .name{ font-weight:700; font-size:13.5px; }
.hv2-testimonial .who .role{ font-size:12px; color: var(--text-faint); }

/* ---------- PRICING (wrapper visual apenas — não altera lógica) ---------- */
.hv2-pricing{ padding: 110px 0; background: var(--bg); }
.hv2-pricing .form-switch-pricing{ margin-top:22px; color: var(--text-muted); }
.hv2-pricing-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg) !important;
  color: var(--text);
}
.hv2-pricing-card.is-featured{ border-color: rgba(46,230,196,.45); box-shadow: 0 0 0 1px rgba(46,230,196,.18) inset, var(--shadow-soft); }
.hv2-pricing-card .featured{ background: var(--accent) !important; color:#04140F !important; border-radius: 0 0 12px 12px; top:0; }
.hv2-pricing-card h1{ color: var(--text) !important; }
.hv2-pricing-card .text-gray-600{ color: var(--text-muted) !important; }
.hv2-pricing-card .text-warning{ color: var(--coral) !important; }
.hv2-pricing-card .border-bottom{ border-color: var(--line) !important; }
.hv2-pricing-card .pricing-feature-name{ color: var(--text); font-size:13.5px; }
.hv2-pricing-card .text-success{ color: var(--accent) !important; }
.hv2-pricing-card .btn-dark{
  background: linear-gradient(135deg, var(--accent), #1FBFA3) !important; color:#04140F !important; border:none !important;
  font-weight:700;
}
.hv2-pricing-compare{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); color: var(--text);
}
.hv2-pricing-compare h1{ color: var(--text) !important; }
.hv2-pricing-compare .text-over-all{ color: var(--text-muted); font-size:13.5px; }

/* ---------- FAQ ---------- */
.hv2-faq{ padding: 110px 0; background: var(--bg-alt); border-top:1px solid var(--line); }
.hv2-faq .accordion-button{
  background: var(--surface) !important; color: var(--text) !important; border-color: var(--line) !important;
  font-weight:600; border-radius: var(--r-md) !important;
}
.hv2-faq .accordion-button:not(.collapsed){ color: var(--accent) !important; }
.hv2-faq .accordion-body{ color: var(--text-muted) !important; background: transparent; }

/* ---------- BLOG ---------- */
.hv2-blog{ padding: 110px 0; background: var(--bg); }
.hv2-blog-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.hv2-blog-card:hover{ transform: translateY(-4px); border-color: rgba(46,230,196,.35); }
.hv2-blog-card .thumb{ height:180px; background-size:cover; background-position:center; }
.hv2-blog-card .body{ padding:22px; }
.hv2-blog-card .meta{ display:flex; gap:8px; font-size:12px; color: var(--text-faint); margin-bottom:10px; }
.hv2-blog-card h3{ font-size:17px; font-weight:700; margin-bottom:8px; }
.hv2-blog-card h3 a{ color: var(--text); text-decoration:none; }
.hv2-blog-card p{ color: var(--text-muted); font-size:13.5px; margin-bottom:16px; }

/* ---------- responsivo ---------- */
@media (max-width: 991px){
  .hv2-feat-grid{ grid-template-columns: repeat(2,1fr); }
  .hv2-api-grid{ grid-template-columns: 1fr; }
  .hv2-flow-nodes{ grid-template-columns: repeat(2,1fr); }
  .hv2-adv-row{ grid-template-columns: 1fr; }
  .hv2-rating-grid{ grid-template-columns: repeat(2,1fr); }
  .hv2-stats{ grid-template-columns: repeat(2,1fr); }
  .hv2-phone{ margin: 40px auto 0; }
}
@media (max-width: 576px){
  .hv2-feat-grid, .hv2-rating-grid, .hv2-stats{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  .hv2-marquee .track{ animation: none; }
  .hv2-flow-lines path{ animation: none; }
  .hv2-bubble{ animation: none; }
}