/* ============================================================
   ChatPeak — Design System
   ============================================================ */

:root{
  /* Brand */
  --violet:        #7C3AED;
  --violet-700:    #6D28D9;
  --violet-800:    #5B21B6;
  --violet-300:    #C4B0F6;
  --violet-tint:   #F1ECFB;   /* soft fill */
  --violet-wash:   #FAF7FE;   /* section band */

  /* Success / online */
  --green:         #128A5E;
  --green-tint:    #E4F2EB;

  /* Neutrals (warm-cool off-white) */
  --bg:            #FBFAFC;
  --paper:         #FFFFFF;
  --ink:           #181421;
  --ink-2:         #46414F;
  --muted:         #6E6878;
  --faint:         #9C97A6;
  --line:          #ECEAF0;
  --line-2:        #E2DEEA;

  /* Dark surfaces (purple-tinted near-black) */
  --dark:          #0E0A18;
  --dark-2:        #160F26;
  --dark-card:     #1C1430;
  --dark-line:     #2C2342;
  --dark-text:     #EAE6F2;
  --dark-muted:    #A79FBC;

  /* Radii & shadow */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --shadow-sm: 0 1px 2px rgba(24,20,33,.04), 0 2px 8px rgba(24,20,33,.04);
  --shadow:    0 4px 14px rgba(24,20,33,.06), 0 18px 40px -18px rgba(24,20,33,.16);
  --shadow-lg: 0 8px 30px rgba(24,20,33,.08), 0 40px 80px -30px rgba(63,38,120,.30);
  --glow:      0 14px 40px -10px rgba(124,58,237,.45);

  --maxw: 1160px;
  --maxw-text: 780px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hanken Grotesk", system-ui, sans-serif;
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--violet); color:#fff; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.section{ padding-block:clamp(72px,9.5vw,134px); position:relative; }
.section--tight{ padding-block:clamp(56px,7vw,96px); }
.band{ background:var(--violet-wash); }
.dark{ background:var(--dark); color:var(--dark-text); }

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:"Bricolage Grotesque", system-ui, sans-serif;
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:600; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--violet-800);
}
.dark .eyebrow{ color:var(--violet-300); }
.eyebrow::before{
  content:""; width:24px; height:1.5px; background:currentColor; opacity:.55;
}

.h-display{ font-size:clamp(2.7rem,6.2vw,4.7rem); letter-spacing:-.03em; line-height:1.0; }
.h-sec{ font-size:clamp(2rem,4vw,3.15rem); }

/* Rotating word */
.rotator{
  display:inline-flex;
  position:relative;
  height:1.18em;
  overflow:hidden;
  vertical-align:bottom;
  margin-bottom:-.075em;
}
.rword{
  position:absolute;
  left:0; top:0;
  display:inline-flex;
  align-items:flex-start;
  line-height:1.18;
  height:100%;
  white-space:nowrap;
  font-style:italic;
  padding-right:.1em;
  background:linear-gradient(96deg,#7C3AED 8%,#FF7A59 92%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  opacity:0;
  transform:translateY(100%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
}
.rword.is-active{ opacity:1; transform:translateY(0); }
.rword.is-leaving{ opacity:0; transform:translateY(-100%); }
@media (prefers-reduced-motion: reduce){
  .rword{ transition:opacity .3s ease; transform:none !important; }
}
.lead{ font-size:clamp(1.08rem,1.6vw,1.32rem); color:var(--ink-2); line-height:1.55; }
.muted{ color:var(--muted); }
.dark .muted, .dark .lead{ color:var(--dark-muted); }

.section-head{ max-width:740px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .h-sec{ margin-top:18px; }
.section-head .lead{ margin-top:20px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:"Hanken Grotesk",sans-serif; font-weight:600; font-size:1rem;
  padding:15px 26px; border-radius:999px; border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{ background:var(--violet); color:#fff; box-shadow:var(--glow); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 50px -10px rgba(124,58,237,.55); background:var(--violet-700); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--violet); color:var(--violet-800); transform:translateY(-2px); }
.dark .btn-ghost{ color:var(--dark-text); border-color:var(--dark-line); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-lg{ padding:18px 34px; font-size:1.05rem; }

/* ---------- Icon chips ---------- */
.ico{
  display:inline-flex; align-items:center; justify-content:center;
  flex:none; color:var(--violet);
}
.ico svg{ width:100%; height:100%; stroke:currentColor; stroke-width:1.7;
  fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ico-box{
  width:54px; height:54px; border-radius:15px;
  background:var(--violet-tint); color:var(--violet-800);
}
.ico-box svg{ width:26px; height:26px; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .3s, box-shadow .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(251,250,252,.78);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line);
}
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700; font-size:1.22rem; letter-spacing:-.02em; color:var(--ink); }
.brand .mark{
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(150deg,var(--violet),var(--violet-800));
  display:grid; place-items:center; box-shadow:0 4px 14px -3px rgba(124,58,237,.6);
}
.brand .mark svg{ width:20px; height:20px; stroke:#fff; stroke-width:2.2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-link{ font-weight:500; color:var(--ink-2); padding:9px 14px; border-radius:999px; transition:color .2s,background .2s; }
.nav-link:hover{ color:var(--violet-800); background:var(--violet-tint); }
.nav .btn{ padding:11px 20px; font-size:.95rem; gap:0; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:clamp(92px,11vh,132px); padding-bottom:clamp(60px,8vw,110px); overflow:hidden; }

/* Subtle glow anchored BEHIND the headline (never loose in the background) */
.hero .h-display{ position:relative; z-index:1; }
.hero .h-display::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-4%; top:50%; width:72%; height:150%;
  transform:translateY(-50%);
  background:radial-gradient(50% 50% at 35% 50%, rgba(124,58,237,.14), transparent 72%);
  filter:blur(34px);
}

/* Soft glow anchored BEHIND the primary WhatsApp CTA */
.hero-cta .btn-primary{ position:relative; z-index:1; }
.hero-cta .btn-primary::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-55% -22%;
  background:radial-gradient(closest-side, rgba(124,58,237,.30), transparent 78%);
  filter:blur(20px);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(32px,3.4vw,60px); align-items:center;
}
.hero-copy{ max-width:560px; }
.hero h1{ margin-top:22px; }
.hero .lead{ margin-top:24px; max-width:500px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--paper); border:1px solid var(--line);
  padding:7px 15px 7px 9px; border-radius:999px; font-size:.86rem; font-weight:500;
  color:var(--ink-2); box-shadow:var(--shadow-sm);
}
.hero-badge .dot{ width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-tint); }

/* feature pills */
.pills{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, max-content));
  gap:10px;
  margin-top:34px;
}
.pill{
  display:flex; align-items:center; gap:8px;
  background:var(--paper); border:1px solid var(--line);
  padding:8px 14px; border-radius:999px; font-size:.84rem; font-weight:500; color:var(--ink-2);
  box-shadow:var(--shadow-sm);
}
.pill .ico{ width:16px; height:16px; color:var(--violet); }
.pill .ico svg{ stroke-width:1.9; }

/* ============================================================
   WHATSAPP INTERACTIVE DEMO
   ============================================================ */
.wa-demo{ position:relative; margin-top:clamp(40px,5.5vw,68px); }
/* inside the two-column hero, the demo sits in the right column */
.hero-grid .wa-demo{ margin-top:0; }
.hero-grid .hero-copy{ max-width:580px; }
.hero-grid .hero-copy .h-display{ font-size:clamp(2.3rem,4vw,3.5rem); line-height:1.04; }

/* sector tabs */
.wa-tabs{
  display:flex; flex-wrap:nowrap; gap:8px; justify-content:center;
  margin-bottom:clamp(16px,2.2vw,26px);
}
.wa-tab{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex:0 1 auto; min-width:0;
  font-family:"Hanken Grotesk",sans-serif; font-weight:600; font-size:.86rem;
  color:var(--ink-2); background:var(--paper);
  border:1px solid var(--line-2); border-radius:999px;
  padding:10px 13px; box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), color .2s, background .25s, border-color .25s, box-shadow .25s;
}
.wa-tab .wa-ico{ display:inline-flex; line-height:0; }
.wa-tab .wa-ico svg{ width:17px; height:17px; display:block; }
.wa-tab:hover{ transform:translateY(-2px); border-color:var(--violet-300); color:var(--violet-800); }
.wa-tab.is-active{
  background:var(--violet); color:#fff; border-color:var(--violet);
  box-shadow:var(--glow); transform:translateY(-1px);
}
.wa-tab.is-active:hover{ color:#fff; }

/* stage + glow */
.wa-stage{ position:relative; display:flex; justify-content:center; }
.wa-glow{
  position:absolute; left:50%; top:50%; width:440px; height:660px; transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(124,58,237,.34), rgba(124,58,237,.12) 52%, transparent 74%);
  filter:blur(26px); pointer-events:none; z-index:0;
}

/* phone shell */
.wa-phone{
  position:relative; z-index:2;
  width:336px; max-width:90vw;
  background:#0a0a0c; border-radius:50px; padding:13px;
  box-shadow:
    0 0 0 2px #2a2a31,
    0 0 0 3.5px #060608,
    0 30px 60px -24px rgba(20,14,35,.5),
    0 50px 110px -40px rgba(91,33,182,.6);
}
.wa-island{
  position:absolute; top:24px; left:50%; transform:translateX(-50%);
  width:104px; height:30px; border-radius:99px; background:#000; z-index:40;
}
.wa-screen{
  position:relative; border-radius:38px; overflow:hidden;
  background:#0b141a; height:624px; display:flex; flex-direction:column;
}

/* status bar */
.wa-status{
  display:flex; align-items:center; justify-content:space-between;
  height:50px; padding:8px 26px 0; flex:none;
  background:#0b141a; color:#e9edef;
}
.wa-clock{ font-family:"Hanken Grotesk",sans-serif; font-weight:700; font-size:.86rem; letter-spacing:.01em; }
.wa-sys{ display:flex; align-items:center; gap:6px; }
.wa-sys svg{ height:12px; width:auto; fill:#e9edef; }

/* chat header */
.wa-head{
  display:flex; align-items:center; gap:10px; flex:none;
  padding:9px 14px 9px 8px; background:#202c33; color:#e9edef;
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.wa-back{ width:22px; height:22px; color:#aebac1; flex:none; }
.wa-back svg{ width:100%; height:100%; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.wa-avatar{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:linear-gradient(150deg,var(--violet),var(--violet-800)); color:#fff;
  display:grid; place-items:center; font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700; font-size:.92rem; letter-spacing:.01em;
}
.wa-who{ display:flex; flex-direction:column; line-height:1.18; min-width:0; }
.wa-who b{ font-weight:600; font-size:1rem; color:#e9edef; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-presence{ font-size:.76rem; color:#8696a0; }
.wa-headicons{ margin-left:auto; display:flex; align-items:center; gap:18px; color:#aebac1; }
.wa-headicons svg{ width:21px; height:21px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* chat body */
.wa-body{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:14px 13px 16px; display:flex; flex-direction:column; gap:3px;
  background:
    radial-gradient(circle at 16% 8%, rgba(124,58,237,.06), transparent 36%),
    #0b141a;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch; outline:none;
}
.wa-body::-webkit-scrollbar{ width:0; height:0; display:none; }
.wa-body{ scrollbar-width:none; -ms-overflow-style:none; }

/* message bubbles */
.wa-msg{
  max-width:80%; padding:6px 9px 7px; border-radius:9px; font-size:.86rem; line-height:1.36;
  position:relative; color:#e9edef; word-wrap:break-word; display:flow-root;
  box-shadow:0 1px 1px rgba(0,0,0,.18);
  animation:waPop .26s var(--ease);
}
@keyframes waPop{ from{ opacity:0; transform:translateY(7px) scale(.97); } to{ opacity:1; transform:none; } }
.wa-in{ background:#202c33; align-self:flex-start; border-top-left-radius:3px; }
.wa-out{ background:#005c4b; align-self:flex-end; border-top-right-radius:3px; }
.wa-msg + .wa-msg.wa-in, .wa-msg + .wa-msg.wa-out{ margin-top:5px; }
.wa-msg.wa-grp{ margin-top:1px; }
.wa-text{ white-space:pre-wrap; }
.wa-text b{ font-weight:700; }
.wa-meta{ display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:1px; float:right; margin-left:10px; margin-bottom:-1px; }
.wa-time{ font-size:.64rem; color:rgba(233,237,239,.5); }
.wa-out .wa-time{ color:rgba(233,237,239,.6); }
.wa-ticks{ display:inline-flex; width:15px; height:11px; color:#53bdeb; }
.wa-ticks svg{ width:100%; height:100%; fill:currentColor; }

/* reply / quick buttons under bot messages */
.wa-btns{ align-self:flex-start; width:80%; max-width:240px; display:flex; flex-direction:column; gap:2px; margin-top:2px; margin-bottom:4px; }
.wa-btn{
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:#202c33; color:#53bdeb; border:none;
  font-family:"Hanken Grotesk",sans-serif; font-weight:600; font-size:.84rem;
  padding:9px 12px; border-radius:8px; cursor:default;
  box-shadow:0 1px 1px rgba(0,0,0,.18);
  transition:background .2s;
}
.wa-btn svg{ width:15px; height:15px; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* typing indicator */
.wa-typing{ padding:11px 13px; }
.wa-dots{ display:flex; gap:4px; align-items:center; }
.wa-dots span{ width:7px; height:7px; border-radius:50%; background:#8696a0; opacity:.5; animation:waType 1.2s infinite ease-in-out; }
.wa-dots span:nth-child(2){ animation-delay:.18s; }
.wa-dots span:nth-child(3){ animation-delay:.36s; }
@keyframes waType{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:.9; } }

/* input bar */
.wa-inputbar{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:8px 12px 12px; background:#0b141a;
}
.wa-plus{ width:24px; height:24px; color:#8696a0; flex:none; }
.wa-plus svg{ width:100%; height:100%; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.wa-field{
  flex:1; background:#2a3942; color:#8696a0; border-radius:999px;
  padding:10px 16px; font-size:.86rem; font-family:"Hanken Grotesk",sans-serif;
}
.wa-send{
  width:38px; height:38px; flex:none; border-radius:50%;
  background:#00a884; color:#0b141a; display:grid; place-items:center;
}
.wa-send svg{ width:19px; height:19px; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

.wa-hint{
  text-align:center; margin-top:18px; font-size:.9rem; color:var(--muted);
}

@media (max-width:480px){
  .wa-phone{ width:300px; border-radius:42px; padding:11px; }
  .wa-screen{ height:560px; border-radius:32px; }
  .wa-glow{ width:360px; height:540px; }
  .wa-tabs{ gap:6px; }
  .wa-tab{ font-size:.78rem; padding:9px 10px; gap:5px; }
  .wa-tab .wa-ico svg{ width:15px; height:15px; }
}
@media (prefers-reduced-motion: reduce){
  .wa-body{ scroll-behavior:auto; }
  .wa-msg{ animation:none; }
}

/* trusted strip */
.trusted{ margin-top:clamp(54px,7vw,88px); text-align:center; }
.trusted .label{ font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.trusted .logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(22px,5vw,60px); margin-top:24px; }
.trusted .logo{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:1.05rem; color:var(--ink-2); opacity:.72; transition:opacity .2s; }
.trusted .logo:hover{ opacity:1; }
.trusted .logo .ico{ width:22px; height:22px; color:var(--ink-2); }

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid{ display:grid; gap:22px; }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-2{ grid-template-columns:repeat(2,1fr); }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--line-2); }
.card h3{ font-size:1.32rem; margin-top:22px; }
.card p{ margin-top:11px; color:var(--muted); font-size:1rem; }

/* problem cards accent */
.card-problem .ico-box{ background:#FBE9E9; color:#C2453F; }

/* steps */
.steps{ counter-reset:step; }
.step{ position:relative; }
.step .num{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.5rem;
  background:var(--violet); color:#fff; box-shadow:var(--glow);
}
.step h3{ margin-top:24px; }
.step .ico-line{ position:absolute; }

/* checklist */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center; }
.checklist{ list-style:none; padding:0; margin:28px 0 0; display:flex; flex-direction:column; gap:15px; }
.checklist li{ display:flex; gap:14px; align-items:flex-start; font-size:1.05rem; color:var(--ink-2); }
.checklist li .tick{
  flex:none; width:26px; height:26px; border-radius:50%; background:var(--violet-tint);
  display:grid; place-items:center; margin-top:2px;
}
.checklist li .tick svg{ width:14px; height:14px; stroke:var(--violet-800); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* config example (light branded card) */
.config{
  background:linear-gradient(180deg,#FFFFFF,#FAF7FE); color:var(--ink-2); border-radius:var(--r-lg);
  padding:30px; box-shadow:0 24px 50px -24px rgba(91,33,182,.28); position:relative; border:1px solid #E7E0F5;
}
.config .cfg-head{ display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.config .cfg-badge{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--violet),var(--violet-800)); color:#fff; box-shadow:0 6px 16px -4px rgba(124,58,237,.5); }
.config .cfg-badge svg{ width:18px; height:18px; }
.config .cfg-kicker{ font-family:"Hanken Grotesk",sans-serif; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--violet-800); }
.config .prompt{ font-size:1rem; line-height:1.7; color:var(--ink-2); font-family:"Hanken Grotesk",sans-serif; }
.config .prompt b{ color:var(--ink); font-weight:700; }
.config .prompt .hl{ color:var(--violet-700); font-weight:700; }
.config .foot{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:.86rem; color:#8A8398; }

/* ---------- Comparison ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.compare .col{ border-radius:var(--r-lg); padding:34px; border:1px solid var(--line); }
.compare .col h3{ display:flex; align-items:center; gap:12px; font-size:1.3rem; }
.compare .col ul{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:14px; }
.compare .col li{ display:flex; gap:12px; align-items:flex-start; font-size:1.02rem; }
.compare .col li .mk{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; margin-top:1px; }
.compare .col li .mk svg{ width:13px;height:13px; stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.compare .bad{ background:var(--paper); }
.compare .bad h3 .badge{ width:34px;height:34px;border-radius:10px;background:#FBE9E9;color:#C2453F;display:grid;place-items:center; }
.compare .bad li{ color:var(--muted); } .compare .bad .mk{ background:#FBE9E9; } .compare .bad .mk svg{ stroke:#C2453F; }
.compare .good{ background:linear-gradient(165deg,var(--violet-800),var(--violet)); color:#fff; border:none; box-shadow:var(--shadow-lg); }
.compare .good h3 .badge{ width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.16);display:grid;place-items:center; }
.compare .good h3 .badge svg{ stroke:#fff; }
.compare .good .mk{ background:rgba(255,255,255,.18); } .compare .good .mk svg{ stroke:#fff; }

/* ============================================================
   DASHBOARD (dark section)
   ============================================================ */
.panel{
  background:linear-gradient(180deg,var(--dark-2),var(--dark));
  border:1px solid var(--dark-line); border-radius:var(--r-xl);
  padding:clamp(22px,3vw,38px); box-shadow:0 50px 100px -40px rgba(0,0,0,.6);
}
.panel-head{ display:flex; align-items:center; gap:10px; color:var(--dark-muted); font-size:.86rem; font-weight:500; margin-bottom:26px; }
.panel-head .pt{ width:9px;height:9px;border-radius:50%;background:var(--green); box-shadow:0 0 12px 1px rgba(93,224,160,.7); }
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi{ background:var(--dark-card); border:1px solid var(--dark-line); border-radius:var(--r); padding:22px; }
.kpi .lab{ font-size:.82rem; color:var(--dark-muted); }
.kpi .val{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:2.05rem; letter-spacing:-.02em; margin-top:8px; color:#fff; }
.kpi .delta{ font-size:.8rem; margin-top:8px; display:inline-flex; align-items:center; gap:5px; font-weight:600; }
.kpi .delta.up{ color:#5DE0A0; } .kpi .delta.flat{ color:var(--violet-300); }
.kpi .val.violet{ color:var(--violet-300); }
.panel-2{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:16px; }
.subcard{ background:var(--dark-card); border:1px solid var(--dark-line); border-radius:var(--r); padding:22px; }
.subcard h4{ font-family:"Hanken Grotesk",sans-serif; font-weight:600; font-size:.92rem; color:#fff; margin-bottom:16px; }
.bars{ display:flex; flex-direction:column; gap:11px; }
.bar-row{ font-size:.84rem; color:var(--dark-muted); }
.bar-row .lr{ display:flex; justify-content:space-between; margin-bottom:6px; }
.bar-row .lr b{ color:#fff; font-weight:600; }
.bar-track{ height:7px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.bar-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--violet),var(--violet-300)); width:0; transition:width 1s var(--ease); }
.rank{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.rank li{ display:flex; align-items:center; gap:11px; font-size:.88rem; color:var(--dark-muted); }
.rank li .n{ width:22px;height:22px;border-radius:7px;background:rgba(124,58,237,.22);color:var(--violet-300);display:grid;place-items:center;font-weight:700;font-size:.78rem;flex:none; }
.rank li .nm{ color:var(--dark-text); }
.rank li b{ margin-left:auto; color:#fff; font-weight:600; }
.panel-note{ margin-top:22px; font-size:.92rem; color:var(--dark-muted); }
.panel-note b{ color:#fff; }

/* ============================================================
   FEATURES
   ============================================================ */
.feat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.feat:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.feat h3{ font-size:1.2rem; margin-top:20px; }
.feat p{ margin-top:10px; color:var(--muted); font-size:.98rem; }

/* ============================================================
   PRICING
   ============================================================ */
.price-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:start; }
.price-card{
  background:linear-gradient(165deg,#1C1430,var(--dark)); color:#fff;
  border:1px solid var(--dark-line); border-radius:var(--r-xl);
  padding:clamp(30px,3.5vw,46px); box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.price-card .aura{ position:absolute; width:380px;height:380px; right:-120px; top:-120px;
  background:radial-gradient(circle,rgba(124,58,237,.4),transparent 65%); pointer-events:none; }
.price-card .flag{ display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--violet-300); background:rgba(124,58,237,.2); padding:6px 13px; border-radius:999px; }
.price-card h3{ font-size:1.6rem; margin-top:18px; }
.price-card .amount{ display:flex; align-items:baseline; gap:8px; margin-top:14px; }
.price-card .amount .v{ font-family:"Outfit",sans-serif; font-weight:700; font-size:3.6rem; letter-spacing:-.03em; }
.price-card .amount .per{ color:var(--dark-muted); font-size:1.05rem; }
.price-card .sub{ color:var(--dark-muted); margin-top:6px; }
.price-card ul{ list-style:none; padding:0; margin:26px 0; display:flex; flex-direction:column; gap:13px; }
.price-card ul li{ display:flex; gap:12px; align-items:center; font-size:1.02rem; }
.price-card ul li .tick{ flex:none; width:24px;height:24px;border-radius:50%;background:rgba(124,58,237,.25);display:grid;place-items:center; }
.price-card ul li .tick svg{ width:13px;height:13px;stroke:var(--violet-300);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round; }
.price-card .btn{ width:100%; }
.price-side{ display:flex; flex-direction:column; gap:22px; }
.guarantee{ background:var(--violet-tint); border:1px solid var(--violet-300); border-radius:var(--r-lg); padding:28px; }
.guarantee h4{ font-size:1.15rem; display:flex; align-items:center; gap:11px; }
.guarantee p{ margin-top:12px; color:var(--ink-2); }
.founder{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-sm); }
.founder h4{ font-size:1.12rem; }
.founder p{ margin-top:12px; color:var(--muted); font-size:.96rem; }
.founder .phone-line{ font-size:1.2rem; font-weight:700; color:var(--violet-800); margin-top:6px; }

/* --- Planos: 3 cards --- */
.section-head .sec-sub{ margin-top:14px; color:var(--ink-2); font-size:1.05rem; max-width:700px; }
.section-head.center .sec-sub{ margin-left:auto; margin-right:auto; }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{ display:flex; flex-direction:column; }
.plan h3{ margin-top:14px; }
.plan .amount .v{ font-size:3rem; }
.plan .sub{ min-height:48px; }
.plan ul{ margin:22px 0 18px; flex:1 1 auto; }
.plan ul li{ font-size:.97rem; align-items:flex-start; }
.plan ul li .tick{ margin-top:1px; }
.plan ul li.hl{ color:#fff; font-weight:700; }
.plan .plan-vol{ color:var(--dark-muted); font-size:.86rem; margin:0 0 18px; padding-top:14px; border-top:1px solid var(--dark-line); }
.plan.popular{ border-color:var(--violet-300); box-shadow:0 0 0 1.5px var(--violet-700), var(--shadow-lg); transform:translateY(-12px); }
.plan .flag-pop{ color:#fff; background:var(--violet-700); }
.btn-outline-d{ background:transparent; border:1.5px solid rgba(196,176,246,.45); color:#fff; }
.btn-outline-d:hover{ background:rgba(124,58,237,.18); border-color:var(--violet-300); }
.plan-custom{ background:var(--violet-tint); border:1px solid var(--violet-300); border-radius:var(--r-lg); padding:30px 34px; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.plan-custom .pc-text{ flex:1 1 440px; }
.plan-custom h4{ font-size:1.28rem; }
.plan-custom p{ margin-top:10px; color:var(--ink-2); max-width:780px; }
.plan-custom .btn{ flex:none; }
.price-extras{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.plan-toggle{ display:flex; justify-content:center; gap:6px; width:max-content; margin-inline:auto; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:6px; box-shadow:var(--shadow-sm); }
.pt-btn{ border:0; background:transparent; color:var(--ink-2); font:inherit; font-weight:600; font-size:.98rem; padding:11px 22px; border-radius:999px; cursor:pointer; transition:background .15s, color .15s; }
.pt-btn:hover{ color:var(--ink); }
.pt-btn.active{ background:var(--violet-700); color:#fff; }
.track.is-hidden{ display:none; }
.plans-2{ grid-template-columns:repeat(2,1fr); max-width:800px; margin-inline:auto; }

/* compactar + alargar os planos (Luiz: cards altos demais, scroll longo) */
#preco .container{ max-width:1240px; }
#preco{ padding-block:clamp(54px,7vw,92px); }
.plan{ padding:30px 28px; }
.plan h3{ margin-top:8px; font-size:1.42rem; }
.plan .amount{ margin-top:8px; }
.plan .amount .v{ font-family:"Outfit",sans-serif; font-size:2.7rem; }
.plan .sub{ min-height:0; margin-top:4px; font-size:.93rem; }
.plan ul{ margin:15px 0 13px; gap:8px; }
.plan ul li{ font-size:.93rem; line-height:1.32; }
.plan ul li .tick{ width:21px; height:21px; }
.plan .plan-vol{ padding-top:11px; margin-bottom:13px; font-size:.84rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{ max-width:840px; margin-inline:auto; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; background:none; border:none; text-align:left; display:flex; align-items:center; gap:20px;
  padding:26px 4px; font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:1.18rem; color:var(--ink);
  letter-spacing:-.01em; }
.faq-q .pm{ margin-left:auto; flex:none; width:28px;height:28px;border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; transition:transform .3s var(--ease), background .3s, border-color .3s; }
.faq-q .pm svg{ width:14px;height:14px; stroke:var(--violet-800); stroke-width:2.2; fill:none; stroke-linecap:round; }
.faq-item.open .faq-q .pm{ transform:rotate(45deg); background:var(--violet); border-color:var(--violet); }
.faq-item.open .faq-q .pm svg{ stroke:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a-in{ padding:0 56px 28px 4px; color:var(--ink-2); font-size:1.04rem; line-height:1.65; }

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.footer{ background:var(--dark); color:var(--dark-text); padding-block:clamp(56px,7vw,84px); }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; }
.footer .brand{ color:#fff; }
.footer-about{ color:var(--dark-muted); margin-top:18px; max-width:340px; font-size:.96rem; }
.footer h5{ font-family:"Hanken Grotesk",sans-serif; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--violet-300); margin:0 0 16px; font-weight:600; }
.footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.footer ul a{ color:var(--dark-muted); transition:color .2s; }
.footer ul a:hover{ color:#fff; }
.footer-bottom{ margin-top:48px; padding-top:26px; border-top:1px solid var(--dark-line);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; color:var(--dark-muted); font-size:.86rem; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; } .reveal.d5{ transition-delay:.40s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:54px; }
  .hero-copy{ max-width:640px; }
  .split, .price-wrap{ grid-template-columns:1fr; gap:40px; }
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .panel-2{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
  .plans-2{ grid-template-columns:1fr; max-width:480px; }
  .plan.popular{ transform:none; }
  .price-extras{ grid-template-columns:1fr; }
  .plan-custom{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .g-3, .g-2, .compare{ grid-template-columns:1fr; }
  .nav-link{ display:none; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer .brand-cell{ grid-column:1 / -1; }
  .faq-a-in{ padding-right:20px; }
  .car-prev{ left:4px; } .car-next{ right:4px; }
}
@media (max-width:480px){
  .container{ padding-inline:18px; }
  .card,.feat,.compare .col{ padding:24px; }
  .footer-top{ grid-template-columns:1fr; }
  .pills{ grid-template-columns:1fr; }
}

/* ---------- Fixes mobile 10/06: nenhum elemento pode travar largura > tela ---------- */
html, body{ overflow-x: clip; }
@media (max-width:640px){
  .btn{ white-space: normal; text-align: center; }
  .btn-lg{ width: 100%; max-width: 440px; padding: 16px 22px; font-size: 1rem; }
}
@media (max-width:480px){
  .nav-actions{ gap: 8px; }
  .nav-actions .btn{ padding: 9px 13px; font-size: .85rem; }
  .brand{ font-size: 1rem; gap: 8px; }
  .nav-cta-long{ display: none; }
}
@media (max-width:640px){
  .hero-grid > *{ min-width: 0; }
  .hero-cta, .wa-tabs{ flex-wrap: wrap; }
  .wa-tabs{ justify-content: center; }
}

/* ---------- Fixes mobile v2 (10/06): estetica por secao ---------- */
@media (max-width:640px){
  .nav.scrolled{ background:rgba(251,250,252,.96); }
  .kpi .val{ font-size:1.55rem; }
  .kpi{ padding:18px; }
  .trusted .logos{ display:grid; grid-template-columns:repeat(2,auto); justify-content:center; column-gap:34px; row-gap:16px; }
}
@media (max-width:480px){
  .kpis{ grid-template-columns:1fr 1fr; gap:12px; }
  .kpi .val{ font-size:1.45rem; white-space:nowrap; }
  .kpi .delta{ font-size:.74rem; }
  .wa-tabs{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .wa-tab{ justify-content:center; }
}

/* ---------- Painel demo: no celular vira MINIATURA exata do desktop (zoom via script) ---------- */
@supports (zoom:1){
  @media (max-width:640px){
    .panel{ width:880px; }
    .panel .kpis{ grid-template-columns:repeat(4,1fr); gap:16px; }
    .panel .kpi{ padding:22px; }
    .panel .kpi .val{ font-size:2.05rem; white-space:normal; }
    .panel .kpi .delta{ font-size:.8rem; }
    .panel .panel-2{ grid-template-columns:1fr 1fr 1fr; }
  }
}

/* ---------- v3 (10/06): ajustes dos prints do Luiz ---------- */
@media (max-width:640px){
  .trusted .logos{ display:flex; flex-direction:column; align-items:center; gap:14px; }
  .trusted .logo{ white-space:nowrap; font-size:.98rem; }
  .step{ text-align:center; }
  .step .num{ margin-left:auto; margin-right:auto; }
  .step .ico-line{ display:none; }
  .section-head{ text-align:center; margin-left:auto; margin-right:auto; }
  .h-sec{ font-size:clamp(1.55rem,6.8vw,2.1rem); }
}
@media (max-width:640px){
  .eyebrow{ display:block; text-align:center; }
  .h-sec{ text-align:center; }
}

/* ---------- v4 (10/06): hero mobile — titulo menor, linhas balanceadas, centrado ---------- */
@media (max-width:640px){
  .hero-copy{ text-align:center; }
  .hero-grid .hero-copy .h-display{ font-size:clamp(1.35rem,8.6vw,2.3rem); line-height:1.14; }
  .hero .lead{ text-wrap:balance; }
  .hero-cta{ justify-content:center; }
  .pills .pill{ justify-content:center; }
}

/* ---------- v5 (10/06): titulo do hero em 3 linhas fixas no celular ---------- */
.mbr{ display:none; }
@media (max-width:640px){
  .mbr{ display:inline; }
  .h-display{ white-space:nowrap; }
}

/* ============================================================
   GASTOS POR ÁUDIO (gx) — financeiro por voz (20/06)
   ============================================================ */
.gx-stage{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(16px,2.6vw,30px); }
.gx-chat{ background:radial-gradient(circle at 16% 8%, rgba(124,58,237,.07), transparent 40%), #0b141a;
  border-radius:var(--r); padding:16px 15px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; }
.gx-bubble{ max-width:90%; padding:9px 11px 8px; border-radius:13px; font-size:.9rem; line-height:1.4;
  color:#e9edef; box-shadow:0 1px 1px rgba(0,0,0,.18); }
.gx-in{ background:#202c33; align-self:flex-start; border-top-left-radius:4px; }
.gx-out{ background:#005c4b; align-self:flex-end; border-top-right-radius:4px; max-width:88%; margin-top:6px; }
.gx-out b{ font-weight:700; color:#fff; }
.gx-audio{ display:flex; align-items:center; gap:10px; }
.gx-play{ width:34px; height:34px; flex:none; border-radius:50%; background:#00a884; color:#0b141a; display:grid; place-items:center; }
.gx-play svg{ width:13px; height:13px; }
.gx-wave{ display:flex; align-items:center; gap:3px; flex:1; height:28px; overflow:hidden; }
.gx-bar{ width:3px; flex:none; border-radius:2px; background:#5f6b72; height:9px; }
.gx-bar.on{ background:#53bdeb; }
.gx-wave .gx-bar:nth-child(2n){ height:16px; }
.gx-wave .gx-bar:nth-child(3n){ height:22px; }
.gx-wave .gx-bar:nth-child(4n){ height:8px; }
.gx-wave .gx-bar:nth-child(5n){ height:19px; }
.gx-wave .gx-bar:nth-child(7n){ height:13px; }
.gx-dur{ font-size:.7rem; color:rgba(233,237,239,.55); flex:none; }
.gx-cap{ font-style:italic; color:#8696a0; font-size:.76rem; margin:7px 4px 0; align-self:flex-start; max-width:92%; }
.gx-meta{ display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-top:3px; }
.gx-time{ font-size:.62rem; color:rgba(233,237,239,.5); }
.gx-ticks{ width:18px; height:11px; color:#53bdeb; display:inline-flex; }
.gx-ticks svg{ width:100%; height:100%; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

.gx-arrow{ position:relative; display:grid; place-items:center; }
.gx-arrow::before{ content:""; position:absolute; left:50%; top:50%; width:120px; height:120px;
  transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(124,58,237,.20), transparent 70%); z-index:0; }
.gx-arrow .ico-box{ position:relative; z-index:1; }

.gx-card{ background:var(--dark-card); border:1px solid var(--dark-line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow-lg); }
.gx-card .hd{ display:flex; align-items:center; gap:9px; }
.gx-card .hd .lab{ font-size:.78rem; color:var(--dark-muted); }
.gx-val{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.95rem; letter-spacing:-.02em; color:#fff; margin-top:14px; }
.gx-desc{ color:var(--dark-text); font-size:.96rem; margin-top:4px; }
.gx-tag{ display:inline-flex; align-items:center; gap:6px; background:rgba(124,58,237,.22); color:var(--violet-300);
  padding:5px 12px; border-radius:999px; font-size:.8rem; font-weight:600; margin-top:14px; }
.gx-tag svg{ width:13px; height:13px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.gx-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--dark-line); margin-top:18px; padding-top:14px; }
.gx-foot .when{ font-size:.76rem; color:var(--dark-muted); }
.gx-stamp{ display:inline-flex; align-items:center; gap:5px; background:rgba(93,224,160,.14); color:#5DE0A0;
  padding:4px 10px; border-radius:999px; font-size:.76rem; font-weight:600; flex:none; }
.gx-stamp svg{ width:12px; height:12px; stroke:currentColor; stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }

.gx-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.gx-step .ico-box{ width:44px; height:44px; }
.gx-step h4{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.08rem; margin:14px 0 6px; }
.gx-step p{ color:var(--muted); font-size:.95rem; line-height:1.5; }

@media (max-width:860px){
  .gx-stage{ grid-template-columns:1fr; gap:18px; }
  .gx-arrow{ transform:rotate(90deg); margin:2px 0; }
  .gx-steps{ grid-template-columns:1fr; gap:18px; }
}