/* Layout: light, airy product page; a 1240px column, a morphing mega‑menu that grows out of the nav,
   product UI miniatures as the imagery, and two deliberate dark "night" bands for telephony + footer. */
:root{
  color-scheme: light;
  --ink:#0b1324;
  --ink-2:#2f3b4f;
  --muted:#5f6b7e;
  --line:#e2e8f1;
  --line-2:#eef2f7;
  --bg:#f6f9fc;
  --surface:#ffffff;
  --blue:#0a6fd0;
  --blue-deep:#0657a8;
  --cyan:#0a9fdc;
  --violet:#6b5ce7;
  --mint:#14a87a;
  --amber:#e58a2b;
  --rose:#d6457b;
  --night:#08111f;
  --night-2:#0f1c33;
  --on-night:#e8eef8;
  --on-night-2:#9fb0c9;

  --ch-wa:#1fa855; --ch-ig:#d6457b; --ch-ms:#3b7cf0; --ch-tel:#6b5ce7;

  --grad: linear-gradient(100deg, var(--cyan) 0%, var(--blue) 45%, var(--violet) 100%);
  --f-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:36px;
  --shadow-1: 0 1px 2px rgba(11,19,36,.05), 0 4px 14px rgba(11,19,36,.05);
  --shadow-2: 0 2px 6px rgba(11,19,36,.05), 0 18px 48px -12px rgba(11,40,90,.18);
  --shadow-3: 0 30px 80px -20px rgba(8,30,70,.28), 0 8px 24px -8px rgba(8,30,70,.12);
  --ease: cubic-bezier(.2,.8,.2,1);
  --wrap: 1280px;
  --header-h: 76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 24px); -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--surface)}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
h1,h2,h3,h4{font-family:var(--f-display); margin:0; text-wrap:balance; letter-spacing:-.03em; line-height:1.05}
p{margin:0; text-wrap:pretty}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:3px; border-radius:8px}
.ic{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-left:max(24px, env(safe-area-inset-left,0px)); padding-right:max(24px, env(safe-area-inset-right,0px))}
@media (max-width:640px){ .wrap{padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))} }

.eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(10,111,208,.14); position:relative}
.eyebrow .dot::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--blue); opacity:.5; animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.6); opacity:.6} 80%,100%{transform:scale(2.2); opacity:0}}

.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 24px; border-radius:14px; font-weight:700; font-size:16px; letter-spacing:-.01em; white-space:nowrap; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, border-color .2s; position:relative; isolation:isolate}
.btn .ic{width:18px; height:18px; transition:transform .25s var(--ease)}
.btn:hover .ic.arrow{transform:translateX(4px)}
.btn-primary{color:#fff; background:linear-gradient(180deg,#0f7be0,var(--blue-deep)); box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -8px rgba(6,87,168,.55)}
.btn-primary::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); background-size:250% 100%; background-position:120% 0; z-index:-1; transition:background-position .7s var(--ease)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 16px 32px -10px rgba(6,87,168,.6)}
.btn-primary:hover::after{background-position:-20% 0}
.btn-ghost{background:var(--surface); border:1px solid var(--line); color:var(--ink); box-shadow:var(--shadow-1)}
.btn-ghost:hover{transform:translateY(-2px); border-color:#c9d5e6}
.btn-sm{height:44px; padding:0 18px; border-radius:12px; font-size:15px}
.btn-light{background:#fff; color:var(--ink)}
.btn-light:hover{transform:translateY(-2px)}
.btn-outline-night{border:1px solid rgba(255,255,255,.22); color:var(--on-night)}
.btn-outline-night:hover{background:rgba(255,255,255,.06); transform:translateY(-2px)}

/* ---------- Top notice ---------- */
.notice{background:linear-gradient(90deg,#eef4fb,#f1effd); color:var(--muted); font-size:12px; text-align:center; padding-block:7px; border-bottom:1px solid var(--line-2)}

/* ---------- Header ---------- */
.header{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; transition:background-color .3s, box-shadow .3s, backdrop-filter .3s}
.header::before{content:""; position:absolute; inset:0; background:rgba(255,255,255,.72); backdrop-filter:saturate(1.6) blur(16px); -webkit-backdrop-filter:saturate(1.6) blur(16px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s, background-color .3s; z-index:-1}
.header.scrolled::before{background:rgba(255,255,255,.86); border-bottom-color:var(--line); box-shadow:0 6px 24px -12px rgba(11,19,36,.16)}
.header-inner{display:flex; align-items:center; gap:24px; height:var(--header-h)}
.logo{display:flex; align-items:center; flex:none}
.logo img{height:30px; width:auto}
.nav{flex:1; display:flex; justify-content:center}
.nav-list{position:relative; display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.nav-pill{position:absolute; top:50%; left:0; height:40px; width:0; translate:0 -50%; border-radius:12px; background:rgba(10,111,208,.07); opacity:0; transition:opacity .2s, left .35s var(--ease), width .35s var(--ease); pointer-events:none}
.nav-list:hover .nav-pill, .nav-list.has-open .nav-pill{opacity:1}
.nav-trigger{position:relative; display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px; border-radius:12px; font-size:15.5px; font-weight:550; color:var(--ink); transition:color .2s}
.nav-trigger .chev{width:14px; height:14px; stroke-width:2.2; color:var(--muted); transition:rotate .3s var(--ease), color .2s}
.nav-trigger[aria-expanded="true"]{color:var(--blue)}
.nav-trigger[aria-expanded="true"] .chev{rotate:180deg; color:var(--blue)}
.header-cta{flex:none; display:flex; align-items:center; gap:10px}
.burger{display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line); background:var(--surface); align-items:center; justify-content:center}
.burger .ic{width:22px; height:22px}

/* ---------- Mega menu ---------- */
.dd{position:absolute; left:0; right:0; top:calc(100% - 6px); height:0; pointer-events:none; z-index:2}
.dd-bg{position:absolute; top:14px; left:0; width:760px; height:420px; translate:0 0; background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-3); overflow:hidden; opacity:0; scale:.96; transform-origin:50% 0; pointer-events:none;
  transition:opacity .22s ease, scale .3s var(--ease), width .42s var(--ease), height .42s var(--ease), translate .42s var(--ease)}
.dd.instant .dd-bg, .dd.instant .dd-arrow{transition:opacity .22s ease, scale .3s var(--ease)}
.dd.open .dd-bg{opacity:1; scale:1; pointer-events:auto}
.dd-arrow{position:absolute; top:8px; left:0; width:14px; height:14px; background:var(--surface); border-left:1px solid var(--line); border-top:1px solid var(--line); border-radius:4px 0 0 0; rotate:45deg; opacity:0; z-index:3; transition:opacity .2s, translate .42s var(--ease)}
.dd.open .dd-arrow{opacity:1}
.scrim{position:fixed; inset:0; z-index:40; background:rgba(11,19,36,.12); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s}
.scrim.on{opacity:1}

.panel{position:absolute; top:0; left:0; padding:22px; opacity:0; translate:var(--from,0px) 0; pointer-events:none; transition:opacity .25s ease, translate .42s var(--ease)}
.panel[data-side="left"]{--from:-56px}
.panel[data-side="right"]{--from:56px}
.panel.active{opacity:1; translate:0 0; pointer-events:auto; transition-delay:.05s}
.pn-eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:4px 12px 10px}

.pn-sol{width:min(800px, calc(100vw - 32px)); display:grid; grid-template-columns:330px 1fr; gap:18px}
.pn-rec{width:min(900px, calc(100vw - 32px)); display:grid; grid-template-columns:1fr 1fr 340px; gap:10px 18px}
.pn-seg{width:min(900px, calc(100vw - 32px))}
.pn-par{width:min(680px, calc(100vw - 32px))}
.pn-con{width:min(760px, calc(100vw - 32px)); display:grid; grid-template-columns:300px 1fr; gap:18px}

.mi{display:flex; gap:14px; align-items:flex-start; padding:11px 12px; border-radius:14px; transition:background-color .2s}
.mi b{display:block; font-size:15px; font-weight:650; letter-spacing:-.01em; line-height:1.3}
.mi small{display:block; font-size:13px; color:var(--muted); line-height:1.45; margin-top:2px}
.mi:hover, .mi.on, .mi:focus-visible{background:#f2f6fc}
.mi-ic{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; color:var(--c,var(--blue)); background:color-mix(in srgb, var(--c,var(--blue)) 11%, white); transition:transform .3s var(--ease), background-color .2s}
.mi:hover .mi-ic, .mi.on .mi-ic{transform:scale(1.08) rotate(-4deg); background:color-mix(in srgb, var(--c,var(--blue)) 17%, white)}
.mi-sm{padding:9px 10px; gap:12px; align-items:center}
.mi-sm .mi-ic{width:34px; height:34px; border-radius:10px}
.mi-sm .mi-ic .ic{width:18px; height:18px}
.mi-sm small{display:none}

.stage{position:relative; border-radius:18px; overflow:hidden; min-height:360px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(107,92,231,.20), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(10,159,220,.20), transparent 55%),
    linear-gradient(160deg,#f3f7fd,#eef1fd);
}
.stage::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(11,19,36,.08) 1px, transparent 1px); background-size:16px 16px; mask-image:linear-gradient(180deg,#000,transparent 85%); -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.pv{position:absolute; inset:18px 18px 54px; display:grid; place-items:center; opacity:0; scale:.94; translate:0 10px; filter:blur(4px); transition:opacity .35s ease, scale .45s var(--ease), translate .45s var(--ease), filter .35s}
.pv.on{opacity:1; scale:1; translate:0 0; filter:none}
.stage-cap{position:absolute; left:16px; right:16px; bottom:14px; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; color:var(--muted)}
.stage-cap b{color:var(--ink); font-weight:650; font-size:13px; background:rgba(255,255,255,.8); padding:5px 10px; border-radius:999px; border:1px solid var(--line)}
.pn-foot{grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:4px; padding:14px 16px; border-radius:14px; background:#f5f8fc; font-size:13.5px; color:var(--ink-2)}
.pn-foot a{display:inline-flex; align-items:center; gap:6px; font-weight:650; color:var(--blue); white-space:nowrap}
.pn-foot a .ic{width:16px; height:16px; transition:transform .25s var(--ease)}
.pn-foot a:hover .ic{transform:translateX(3px)}

.rec-col{display:flex; flex-direction:column}
.rec-stage{grid-row:span 1; min-height:100%}

.seg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.seg-card{display:flex; flex-direction:column; gap:10px; padding:8px; border-radius:18px; transition:background-color .2s}
.seg-card:hover, .seg-card:focus-visible{background:#f3f7fc}
.seg-card b{font-size:15px; font-weight:650; padding-inline:6px; line-height:1.25}
.seg-card small{display:block; font-size:12.5px; color:var(--muted); padding-inline:6px; margin-top:-6px; line-height:1.4}

.thumb{position:relative; aspect-ratio:16/9; max-width:100%; border-radius:14px; overflow:hidden; background:linear-gradient(150deg,var(--t1),var(--t2)); isolation:isolate}
.thumb .big{position:absolute; right:-14px; bottom:-18px; width:116px; height:116px; color:var(--tc); opacity:.22; stroke-width:1.3; transition:transform .6s var(--ease)}
.thumb .bub{position:absolute; left:12px; top:14px; max-width:78%; font-size:11.5px; line-height:1.35; padding:8px 10px; border-radius:12px 12px 12px 4px; background:#fff; color:var(--ink); box-shadow:0 6px 16px -6px rgba(11,19,36,.25); transition:transform .5s var(--ease)}
.thumb .bub.r{left:auto; right:12px; top:auto; bottom:12px; border-radius:12px 12px 4px 12px; background:var(--tc); color:#fff; font-weight:550}
.thumb .badge{position:absolute; left:12px; bottom:12px; width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:#fff; color:var(--tc); box-shadow:0 4px 12px -4px rgba(11,19,36,.3)}
.thumb .badge .ic{width:17px; height:17px}
.seg-card:hover .thumb .big{transform:scale(1.12) rotate(-6deg)}
.seg-card:hover .thumb .bub:not(.r){transform:translateY(-3px)}
.seg-card:hover .thumb .bub.r{transform:translateY(-3px)}
.t-saude{--t1:#e5f3ff; --t2:#cfe5fb; --tc:#0a6fd0}
.t-imob{--t1:#f0ecff; --t2:#ddd5fb; --tc:#6b5ce7}
.t-edu{--t1:#e4f6ee; --t2:#c9eadb; --tc:#13895f}
.t-varejo{--t1:#fff1e4; --t2:#fbdcc0; --tc:#c86a14}
.t-serv{--t1:#edf1f7; --t2:#d9e1ec; --tc:#33415a}
.t-auto{--t1:#e3f5fb; --t2:#c5e7f3; --tc:#0a86b8}

.par-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.par-card{display:flex; flex-direction:column; gap:12px; padding:10px; border-radius:18px; border:1px solid var(--line-2); transition:border-color .2s, background-color .2s, transform .3s var(--ease)}
.par-card:hover{border-color:#cfdbea; background:#f7fafd; transform:translateY(-2px)}
.par-card .thumb{aspect-ratio:16/8}
.par-card b{font-size:16px; padding-inline:6px}
.par-card p{font-size:13px; color:var(--muted); padding:0 6px 6px; line-height:1.5}
.par-card svg.art{position:absolute; inset:0; width:100%; height:100%}

.con-feature{align-self:start; display:flex; flex-direction:column; gap:12px; padding:10px; border-radius:18px; background:#f5f8fc; transition:background-color .2s}
.con-feature:hover{background:#eef4fb}
.cover{position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#0a3f86,#0a6fd0 45%,#6b5ce7); color:#fff; padding:18px; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate}
.cover::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 70% at 85% 15%, rgba(255,255,255,.25), transparent 60%); z-index:-1}
.cover .q{position:absolute; top:10px; right:18px; font-family:var(--f-display); font-size:110px; line-height:1; font-weight:800; opacity:.18}
.cover .ph{position:absolute; top:18px; left:18px; display:flex; gap:6px}
.cover .ph span{display:block; height:22px; border-radius:8px; background:rgba(255,255,255,.18)}
.cover strong{font-family:var(--f-display); font-size:19px; line-height:1.15; letter-spacing:-.02em; max-width:26ch}
.con-feature .meta{display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--muted); padding-inline:6px}
.tag{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:650; padding:4px 9px; border-radius:999px; background:color-mix(in srgb, var(--c,var(--blue)) 12%, white); color:var(--c,var(--blue))}

/* ---------- Mobile nav ---------- */
.mnav{margin:0; inset:0 0 0 auto; height:100dvh; max-height:none; width:min(440px,100vw); max-width:100vw; border:0; padding:0; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-3); overflow:auto; overscroll-behavior:contain;
  translate:0 0; transition:translate .4s var(--ease), overlay .4s allow-discrete, display .4s allow-discrete}
.mnav:not([open]){translate:100% 0}
@starting-style{ .mnav[open]{translate:100% 0} }
.mnav::backdrop{background:rgba(11,19,36,.35); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:1; transition:opacity .4s, overlay .4s allow-discrete, display .4s allow-discrete}
.mnav:not([open])::backdrop{opacity:0}
@starting-style{ .mnav[open]::backdrop{opacity:0} }
.mnav-in{display:flex; flex-direction:column; min-height:100%; padding:max(14px, env(safe-area-inset-top,0px)) max(20px, env(safe-area-inset-right,0px)) max(20px, env(safe-area-inset-bottom,0px)) 20px}
.mnav-head{display:flex; justify-content:space-between; align-items:center; height:56px; margin-bottom:8px}
.mnav-head img{height:26px; width:auto}
.mnav details{border-bottom:1px solid var(--line-2); interpolate-size:allow-keywords}
.mnav details::details-content{block-size:0; overflow:clip; transition:block-size .35s var(--ease), content-visibility .35s allow-discrete}
.mnav details[open]::details-content{block-size:auto}
.mnav summary{list-style:none; display:flex; justify-content:space-between; align-items:center; padding:16px 4px; font-family:var(--f-display); font-size:20px; font-weight:700; letter-spacing:-.02em; cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary .ic{transition:rotate .3s var(--ease); color:var(--muted)}
.mnav details[open] summary .ic{rotate:180deg; color:var(--blue)}
.mn-items{display:grid; gap:4px; padding:0 0 14px}
.mn-it{display:flex; gap:12px; align-items:center; padding:8px; border-radius:14px}
.mn-it:active, .mn-it:hover{background:#f3f7fc}
.mn-it .thumb{width:64px; aspect-ratio:1; border-radius:12px; flex:none; display:grid; place-items:center}
.mn-it .thumb .ic{width:24px; height:24px; color:var(--tc)}
.mn-it b{display:block; font-size:15px; font-weight:650}
.mn-it small{display:block; font-size:13px; color:var(--muted); line-height:1.4}
.mn-link{display:block; padding:16px 4px; font-family:var(--f-display); font-size:20px; font-weight:700; letter-spacing:-.02em; border-bottom:1px solid var(--line-2)}
.mnav-foot{margin-top:auto; padding-top:20px; display:grid; gap:10px}
.mnav-foot .btn{width:100%}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; isolation:isolate; padding-block:72px 40px}
.hero::before{content:""; position:absolute; inset:-20% -10% auto; height:120%; z-index:-2;
  background:
    radial-gradient(40% 50% at 82% 30%, rgba(107,92,231,.13), transparent 70%),
    radial-gradient(35% 45% at 10% 70%, rgba(10,159,220,.12), transparent 70%),
    radial-gradient(30% 30% at 55% 0%, rgba(10,111,208,.08), transparent 70%)}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(rgba(11,19,36,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(11,19,36,.045) 1px, transparent 1px); background-size:56px 56px; mask-image:radial-gradient(70% 60% at 60% 40%, #000, transparent 75%); -webkit-mask-image:radial-gradient(70% 60% at 60% 40%, #000, transparent 75%)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px; align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:26px; min-width:0}
.hero h1{font-size:clamp(3rem, 6.4vw, 5.6rem); font-weight:800; letter-spacing:-.058em; line-height:.94}
.hero h1 .w{display:inline-block}
.hl{position:relative; display:inline-block; padding-bottom:.08em}
.hl .grad-text{background-size:200% 100%; animation:sheen 6s ease-in-out infinite alternate}
@keyframes sheen{from{background-position:0% 0} to{background-position:100% 0}}
.hl svg{position:absolute; left:0; bottom:-.1em; width:100%; height:.32em; overflow:visible}
.hl svg path{stroke-dasharray:420; stroke-dashoffset:0; animation:draw 1.4s .6s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:420}}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.65; color:var(--ink-2); max-width:56ch}
.cta-row{display:flex; flex-wrap:wrap; gap:12px}
.fine{font-size:13px; color:var(--muted)}
.channels-inline{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--muted)}
.chip{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:13px; font-weight:550; color:var(--ink-2)}
.chip i{width:8px; height:8px; border-radius:50%; background:var(--c)}

/* intro choreography */
@media (prefers-reduced-motion:no-preference){
  .intro > *{animation:intro .9s var(--ease) both}
  .intro > *:nth-child(2){animation-delay:.08s}
  .intro > *:nth-child(3){animation-delay:.16s}
  .intro > *:nth-child(4){animation-delay:.24s}
  .intro > *:nth-child(5){animation-delay:.3s}
  .intro > *:nth-child(6){animation-delay:.36s}
  .hero h1 .w{animation:word 1s var(--ease) both}
  .hero h1 .w:nth-of-type(2){animation-delay:.08s}
  .hero h1 .w:nth-of-type(3){animation-delay:.16s}
  .hero h1 .hl{animation:word 1s .24s var(--ease) both}
}
@keyframes intro{from{opacity:0; translate:0 18px}}
@keyframes word{from{opacity:0; translate:0 .35em; filter:blur(8px)}}

/* hero visual */
.hv{position:relative; aspect-ratio:1/1.02; max-width:600px; width:100%; justify-self:end; perspective:1200px}
.hv-shape{position:absolute; inset:4% 2% 6% 12%; border-radius:46px 46px 46px 180px; overflow:hidden;
  background:
    var(--hero-photo, none) center/cover no-repeat,
    radial-gradient(70% 60% at 75% 20%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(80% 80% at 20% 90%, rgba(10,159,220,.55), transparent 60%),
    linear-gradient(150deg,#cfe3fb 0%, #b9c9f6 45%, #c9bdf6 100%);
  box-shadow:var(--shadow-3); border:6px solid #fff; transform:translate3d(calc(var(--px,0)*-6px), calc(var(--py,0)*-6px), 0); transition:transform .6s var(--ease)}
.hv-shape .orb{position:absolute; border-radius:50%; filter:blur(2px)}
.hv-shape .o1{width:46%; aspect-ratio:1; right:-8%; top:-10%; background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%)}
.hv-shape .o2{width:30%; aspect-ratio:1; left:12%; bottom:10%; background:radial-gradient(circle at 40% 40%, rgba(107,92,231,.6), rgba(107,92,231,0) 70%); animation:float 9s ease-in-out infinite}
.hv-shape .bars{position:absolute; inset:auto 10% 12% auto; display:flex; gap:8px; align-items:flex-end; height:30%}
.hv-shape .bars i{width:16px; border-radius:8px 8px 4px 4px; background:rgba(255,255,255,.55); height:var(--h); animation:grow 2.4s var(--ease) infinite alternate; animation-delay:var(--d)}
@keyframes grow{to{height:calc(var(--h) * .55)}}
.hv-shape .grid{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size:40px 40px; mask-image:linear-gradient(200deg,#000,transparent 60%); -webkit-mask-image:linear-gradient(200deg,#000,transparent 60%)}

.float{position:absolute; transform:translate3d(calc(var(--px,0)*var(--depth,10px)), calc(var(--py,0)*var(--depth,10px)), 0); transition:transform .6s var(--ease)}
.card{background:var(--surface); border:1px solid rgba(226,232,241,.9); border-radius:20px; box-shadow:var(--shadow-2)}
.hv-chat{left:0; top:17%; width:min(316px,57%); --depth:16px}
.hv-chat .card{padding:16px 16px 14px; rotate:-3deg}
.hv-next{right:-2%; bottom:3%; width:min(272px,46%); --depth:24px}
.hv-next .card{padding:18px; rotate:3deg; border-top:3px solid var(--violet)}
.hv-pill{right:2%; top:0; --depth:8px}
.hv-ai{left:9%; top:3%; --depth:20px}
.hv-orbit{right:-1%; top:38%; --depth:30px}

.pill{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.92); border:1px solid var(--line); box-shadow:var(--shadow-1); font-size:13px; font-weight:550; white-space:nowrap}
.pill .ic{width:16px; height:16px; color:var(--mint)}
.sq{width:60px; height:60px; border-radius:18px; display:grid; place-items:center; background:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow-2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:float 6s ease-in-out infinite}
.sq .ic{width:26px; height:26px}
.sq.violet{color:var(--violet); background:rgba(243,240,255,.85)}
.sq.mint{color:var(--mint); background:rgba(232,248,242,.88); animation-delay:-2s}
@keyframes float{50%{translate:0 -10px}}

.chat-head{display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--line-2); margin-bottom:12px}
.av{width:36px; height:36px; border-radius:12px; display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--c,var(--blue)); background:color-mix(in srgb, var(--c,var(--blue)) 13%, white); flex:none}
.chat-head b{display:block; font-size:14px; line-height:1.2}
.chat-head small{font-size:11.5px; color:var(--muted)}
.chat-head .ch{margin-left:auto}
.ch-badge{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:650; color:var(--ch-wa); background:#e9f8ef; padding:3px 8px; border-radius:999px}
.ch-badge i{width:6px; height:6px; border-radius:50%; background:currentColor}
.msgs{display:flex; flex-direction:column; gap:8px}
.m{max-width:88%; font-size:13px; line-height:1.45; padding:10px 12px; border-radius:14px 14px 14px 4px; background:#f1f4f9; color:var(--ink); position:relative}
.m time{display:block; text-align:right; font-family:var(--f-mono); font-size:9.5px; color:var(--muted); margin-top:3px}
.m.out{align-self:flex-end; border-radius:14px 14px 4px 14px; background:#e3f2fb}
.m.out time::after{content:" ✓✓"; color:var(--blue)}
.m.ai{align-self:stretch; max-width:none; background:linear-gradient(100deg,#f1efff,#eaf3fd); border:1px dashed #c9c1f6; border-radius:12px; display:flex; gap:8px; align-items:center; font-size:12px; color:#4a3fb0; font-weight:550}
.m.ai .ic{width:16px; height:16px}
.typing{display:inline-flex; gap:4px; padding:12px 14px; align-self:flex-end; background:#e3f2fb; border-radius:14px 14px 4px 14px}
.typing i{width:6px; height:6px; border-radius:50%; background:#7aa8d3; animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.3; translate:0 0} 30%{opacity:1; translate:0 -3px}}
.seq .m, .seq .typing{transition:opacity .45s var(--ease), translate .45s var(--ease), max-height .45s var(--ease); max-height:200px}
.seq .m:not(.show), .seq .typing:not(.show){opacity:0; translate:0 10px; max-height:0; padding-block:0; margin-top:-8px; overflow:hidden}
.typing{display:none}
.seq .typing{display:inline-flex}

.next-label{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); background:#f0edff; padding:4px 9px; border-radius:6px}
.next h3{font-size:22px; letter-spacing:-.03em; margin:12px 0 6px}
.next p{font-size:13px; color:var(--muted)}
.progress{height:6px; border-radius:6px; background:#edf0f7; overflow:hidden; margin:16px 0 14px}
.progress span{display:block; height:100%; width:var(--p,78%); border-radius:inherit; background:var(--grad); transition:width 1.4s var(--ease)}
.next-foot{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:var(--muted)}
.next-foot .ok{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); padding:5px 10px; border-radius:10px; color:var(--ink-2); font-weight:550; transition:background-color .4s, color .4s, border-color .4s}
.next-foot .ok .ic{width:14px; height:14px; color:var(--mint)}
.next-foot .ok.done{background:#e8f8f1; border-color:#bfe9d6; color:#0c7a55}

/* ---------- Proof strip ---------- */
.proof{padding-block:12px 24px}
.proof-bar{display:grid; grid-template-columns:repeat(3,1fr); gap:0; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-1)}
.proof-bar > div{display:flex; align-items:center; gap:12px; padding:20px 26px; font-size:14.5px; color:var(--ink-2)}
.proof-bar > div + div{border-left:1px solid var(--line-2)}
.proof-bar .ic{color:var(--blue)}

/* ---------- Marquee ---------- */
.marquee{padding-block:28px 8px; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex; gap:12px; width:max-content; animation:marquee 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{translate:-50% 0}}
.marquee .chip{height:40px; padding:0 16px; font-size:14px}

/* ---------- Sections ---------- */
.section{padding-block:clamp(72px, 9vw, 128px)}
.sec-head{display:flex; flex-direction:column; gap:16px; max-width:760px; margin-bottom:48px}
.sec-head.center{margin-inline:auto; text-align:center; align-items:center}
.sec-head h2{font-size:clamp(2.2rem, 4.4vw, 3.6rem); font-weight:800; letter-spacing:-.045em}
.sec-head p{font-size:18px; color:var(--ink-2); max-width:60ch}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 60%}
  }
}
@keyframes rise{from{opacity:.25; translate:0 36px; scale:.985}}
/* ---------- Mini UI kit ---------- */
.ui{font-size:12px; line-height:1.4; color:var(--ink); width:100%; max-width:380px}
.ui-win{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-2); overflow:hidden}
.ui-bar{display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line-2); font-weight:650; font-size:12px}
.ui-bar .dots{display:flex; gap:4px}
.ui-bar .dots i{width:7px; height:7px; border-radius:50%; background:#dfe5ee}
.ui-bar .sp{margin-left:auto}
.ui-chip{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:650; padding:3px 8px; border-radius:999px; background:color-mix(in srgb,var(--c,var(--blue)) 12%, white); color:var(--c,var(--blue)); white-space:nowrap}
.ui-av{width:26px; height:26px; border-radius:9px; flex:none; display:grid; place-items:center; font-size:9.5px; font-weight:750; color:var(--c); background:color-mix(in srgb,var(--c) 14%, white)}
.chd{width:8px; height:8px; border-radius:50%; background:var(--c); flex:none; box-shadow:0 0 0 2px #fff}
.ln{display:block; height:6px; border-radius:4px; background:#e9eef5; width:var(--w,100%)}

.ib{display:grid; grid-template-columns:1.1fr 1fr}
.ib-list{list-style:none; margin:0; padding:6px; border-right:1px solid var(--line-2); display:grid; gap:2px}
.ib-list li{display:flex; align-items:center; gap:8px; padding:7px; border-radius:10px; min-width:0}
.ib-list li.on{background:#eef5fd}
.ib-list li div{min-width:0; flex:1}
.ib-list b{display:block; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ib-list small{display:block; font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ib-chat{display:flex; flex-direction:column; gap:6px; padding:10px; background:#fafcfe}
.bb{font-size:10.5px; line-height:1.4; padding:7px 9px; border-radius:10px 10px 10px 3px; background:#eef2f7; max-width:92%}
.bb.o{align-self:flex-end; background:#dff0fb; border-radius:10px 10px 3px 10px}
.ib-input{margin-top:auto; display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--muted); font-size:10.5px}
.ib-input .send{margin-left:auto; width:20px; height:20px; border-radius:7px; background:var(--blue); display:grid; place-items:center; color:#fff}
.ib-input .send .ic{width:11px; height:11px; stroke-width:2.4}

.kb{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:10px}
.kb-col{background:#f4f7fb; border-radius:12px; padding:8px; display:flex; flex-direction:column; gap:6px; min-width:0}
.kb-col h5{margin:0 0 2px; font-size:10.5px; font-weight:700; color:var(--ink-2); display:flex; justify-content:space-between; font-family:var(--f-body); letter-spacing:0}
.kb-col h5 span{color:var(--muted); font-weight:600}
.kb-card{background:#fff; border:1px solid var(--line); border-radius:9px; padding:7px; display:grid; gap:5px; box-shadow:0 1px 2px rgba(11,19,36,.04)}
.kb-card b{font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kb-card .row{display:flex; align-items:center; justify-content:space-between; gap:4px}
.kb-card .ui-av{width:18px; height:18px; border-radius:6px; font-size:7.5px}
.kb-card.drag{rotate:-4deg; box-shadow:0 12px 22px -8px rgba(11,40,90,.35); border-color:#b9d4f2; animation:drag 3.6s var(--ease) infinite}
@keyframes drag{0%,15%{translate:0 0; rotate:0deg} 45%,70%{translate:6px -4px; rotate:-4deg} 100%{translate:0 0; rotate:0deg}}

.flow{display:flex; flex-direction:column; align-items:center; gap:0; padding:14px 10px; width:100%}
.node{display:flex; align-items:center; gap:8px; padding:9px 12px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-1); font-size:11.5px; font-weight:600; white-space:nowrap}
.node .ic{width:15px; height:15px; color:var(--c,var(--blue))}
.node.q{border-color:#cfc7f7; background:#f6f4ff}
.wire{width:2px; height:18px; background:linear-gradient(180deg,#c6d3e4,#c6d3e4); position:relative}
.wire::after{content:""; position:absolute; left:-2px; top:0; width:6px; height:6px; border-radius:50%; background:var(--blue); animation:travel 1.8s linear infinite}
@keyframes travel{to{top:calc(100% - 6px)}}
.branch{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; position:relative; padding-top:18px}
.branch::before{content:""; position:absolute; top:0; left:25%; right:25%; height:18px; border:2px solid #c6d3e4; border-bottom:0; border-radius:10px 10px 0 0}
.branch .node{white-space:normal; flex-direction:column; align-items:flex-start; gap:4px}
.branch .node small{font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c)}

.ai-card{padding:14px; display:grid; gap:10px}
.ai-card .hd{display:flex; align-items:center; gap:8px; font-weight:700; font-size:12px}
.ai-card .hd .ic{width:16px; height:16px; color:var(--violet)}
.ai-card .txt{font-size:11.5px; color:var(--ink-2); line-height:1.5; background:#f7f8fd; border-radius:10px; padding:10px}
.ai-card .tags{display:flex; flex-wrap:wrap; gap:5px}
.ai-card .nx{display:flex; gap:8px; align-items:flex-start; padding:10px; border-radius:10px; border:1px dashed #c9c1f6; background:#faf9ff; font-size:11px}
.ai-card .nx .ic{width:15px; height:15px; color:var(--violet); margin-top:1px}
.caret::after{content:""; display:inline-block; width:6px; height:12px; background:var(--violet); margin-left:2px; vertical-align:-2px; animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}

.call{padding:14px; display:grid; gap:10px}
.call .top{display:flex; align-items:center; gap:10px}
.call .top b{display:block; font-size:12.5px}
.call .top small{font-size:10.5px; color:var(--muted); font-family:var(--f-mono)}
.call .rec{margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; color:#c43b3b; background:#fdecec; padding:3px 8px; border-radius:999px}
.call .rec i{width:6px; height:6px; border-radius:50%; background:currentColor; animation:blink 1.4s infinite}
.wave{display:flex; align-items:center; gap:3px; height:38px; padding:0 4px}
.wave i{flex:1; min-width:2px; border-radius:3px; background:linear-gradient(180deg,var(--violet),var(--blue)); height:var(--h); animation:wave 1.1s ease-in-out infinite alternate; animation-delay:var(--d)}
@keyframes wave{to{height:calc(var(--h)*.35)}}
.tr{display:grid; gap:5px; font-size:10.8px}
.tr p{display:flex; gap:6px}
.tr p span{font-weight:700; color:var(--muted); flex:none; width:44px}
.call .out{display:flex; flex-wrap:wrap; gap:5px}

.wa{padding:0}
.wa .wa-head{display:flex; align-items:center; gap:9px; padding:10px 12px; background:#f3faf6; border-bottom:1px solid #e1f1e8}
.wa .wa-head b{display:block; font-size:12px}
.wa .wa-head small{display:flex; align-items:center; gap:4px; font-size:10px; color:#1a8a4a; font-weight:600}
.wa .wa-head small .ic{width:11px; height:11px; stroke-width:2.6}
.wa .wa-body{padding:12px; display:flex; flex-direction:column; gap:7px; background:#fbfdfc}
.qr{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.qr span{text-align:center; font-size:10.5px; font-weight:650; color:var(--blue); background:#fff; border:1px solid var(--line); border-radius:9px; padding:7px 4px}

.ig{padding:14px; display:grid; gap:9px}
.ig .ring{width:34px; height:34px; border-radius:50%; padding:2px; background:conic-gradient(from 200deg,#f6b73c,#e1306c,#833ab4,#f6b73c)}
.ig .ring span{display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:#fff; font-size:10px; font-weight:750; color:var(--rose); border:2px solid #fff}
.ig .who{display:flex; gap:9px; align-items:center}
.ig .who b{font-size:12px; display:block}
.ig .who small{font-size:10px; color:var(--muted)}

.rep{padding:12px; display:grid; gap:10px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.kpi{background:#f6f8fc; border-radius:10px; padding:8px}
.kpi small{display:block; font-size:9.5px; color:var(--muted); font-weight:600}
.kpi b{font-family:var(--f-display); font-size:16px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.chart{display:flex; align-items:flex-end; gap:6px; height:92px; padding:8px 4px 0; border-bottom:1px solid var(--line); background-image:linear-gradient(var(--line-2) 1px, transparent 1px); background-size:100% 23px}
.chart i{flex:1; height:var(--h); border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#5aa6ea,var(--blue)); transform-origin:bottom; animation:bar 1.2s var(--ease) both; animation-delay:var(--d)}
.chart i.hi{background:linear-gradient(180deg,#9b8ff1,var(--violet))}
@keyframes bar{from{transform:scaleY(.1)}}
.axis{display:flex; justify-content:space-between; font-size:9px; color:var(--muted); font-family:var(--f-mono); padding:0 4px}

.code{background:#0b1730; color:#cfe0ff; border-radius:14px; padding:14px; font-family:var(--f-mono); font-size:10.5px; line-height:1.65; box-shadow:var(--shadow-2); white-space:pre; overflow:hidden}
.code .k{color:#8fb8ff}.code .s{color:#9fe2c1}.code .m{color:#ffb86b}.code .c{color:#6d84ab}

.team{padding:12px; display:grid; gap:8px}
.q-row{display:grid; grid-template-columns:76px 1fr 30px; align-items:center; gap:8px; font-size:11px; font-weight:600}
.q-row .avs{display:flex}
.q-row .avs .ui-av{width:22px; height:22px; border-radius:50%; border:2px solid #fff; margin-left:-6px; font-size:7.5px}
.q-row .avs .ui-av:first-child{margin-left:0}
.q-row .ld{height:6px; border-radius:6px; background:#edf1f7; overflow:hidden}
.q-row .ld span{display:block; height:100%; width:var(--w); background:var(--c); border-radius:inherit}
.q-row em{font-style:normal; color:var(--muted); font-family:var(--f-mono); font-size:10px; text-align:right}

/* ---------- Method ---------- */
.method{position:relative}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:14px; position:relative}
.steps::before, .steps::after{content:""; position:absolute; top:27px; left:calc(100%/12); right:calc(100%/12); height:2px; background:var(--line); border-radius:2px}
.steps::after{background:var(--grad); right:auto; width:calc((100% - 100%/6) * var(--prog,0)); transition:width .6s var(--ease)}
.step{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; cursor:pointer; padding:0 4px; background:none}
.step .n{width:56px; height:56px; border-radius:18px; display:grid; place-items:center; font-family:var(--f-display); font-weight:800; font-size:18px; background:var(--surface); border:1px solid var(--line); color:var(--muted); transition:all .4s var(--ease); font-variant-numeric:tabular-nums}
.step b{font-family:var(--f-display); font-size:17px; letter-spacing:-.02em}
.step p{font-size:14px; color:var(--muted); line-height:1.5}
.step.done .n{color:var(--blue); border-color:#bcd6f1; background:#eef6fe}
.step.on .n{color:#fff; border-color:transparent; background:var(--grad); box-shadow:0 12px 28px -10px rgba(10,111,208,.6); scale:1.08}

/* ---------- Segments ---------- */
.tabs{position:relative; display:flex; gap:4px; padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:18px; width:max-content; max-width:100%; overflow-x:auto; scrollbar-width:none; margin-bottom:28px}
.tabs::-webkit-scrollbar{display:none}
.tab-ind{position:absolute; top:6px; bottom:6px; left:0; width:0; border-radius:13px; background:var(--ink); transition:left .45s var(--ease), width .45s var(--ease); z-index:0}
.tab{position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px; border-radius:13px; font-size:14.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; transition:color .3s}
.tab .ic{width:17px; height:17px}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.ticks li{display:grid; grid-template-columns:26px 1fr; gap:12px; font-size:15.5px; color:var(--ink-2)}
.ticks .ic{width:26px; height:26px; padding:5px; border-radius:8px; background:#e9f6f0; color:var(--mint); stroke-width:2.6}
/* ---------- FAQ ---------- */
.faq{max-width:860px; margin-inline:auto; display:grid; gap:10px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:18px; interpolate-size:allow-keywords; transition:border-color .2s, box-shadow .3s}
.faq details[open]{border-color:#cfdcec; box-shadow:var(--shadow-1)}
.faq details::details-content{block-size:0; overflow:clip; transition:block-size .35s var(--ease), content-visibility .35s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 22px; font-weight:650; font-size:17px; letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:30px; height:30px; flex:none; border-radius:10px; display:grid; place-items:center; background:#f1f5fb; transition:rotate .35s var(--ease), background-color .2s}
.faq summary .pm .ic{width:16px; height:16px}
.faq details[open] summary .pm{rotate:45deg; background:#e6f0fc; color:var(--blue)}
.faq .ans{padding:0 22px 22px; color:var(--ink-2); font-size:15.5px; max-width:70ch}

/* ---------- Motion toggle ---------- */
.motion-btn{position:fixed; z-index:45; right:calc(20px + env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:999px; background:rgba(255,255,255,.9); border:1px solid var(--line); box-shadow:var(--shadow-2); font-size:13px; font-weight:550; color:var(--ink-2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:transform .25s var(--ease)}
.motion-btn:hover{transform:translateY(-2px)}
.motion-btn .ic{width:15px; height:15px}
.still *, .still *::before, .still *::after{animation-play-state:paused!important}
.still .reveal{animation:none!important}
.still .marquee-track{animation:none}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}

/* ---------- Responsive ---------- */
@media (max-width:1120px){
  .nav, .header-cta .btn{display:none}
  .burger{display:inline-flex}
  .header-inner{justify-content:space-between}
  .dd, .scrim{display:none}
}
@media (max-width:980px){
  .hero{padding-block:40px 24px}
  .hero-grid, .tel-grid, .impl-grid, .plan-band{grid-template-columns:1fr}
  .hv{justify-self:center; max-width:540px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile, .tile.wide{grid-column:span 2}
  .tile.tall{grid-row:auto}
  .steps{grid-template-columns:1fr; gap:6px}
  .steps::before, .steps::after{display:none}
  .step{flex-direction:row; text-align:left; align-items:flex-start; padding:12px; border-radius:18px; gap:16px}
  .step.on{background:var(--surface); box-shadow:var(--shadow-1)}
  .step .n{width:48px; height:48px; flex:none; border-radius:14px}
  .step .txt{display:grid; gap:4px}
  .seg-stage{grid-template-columns:1fr}
  .seg-vis{min-height:380px}
  .impl-quote{position:static}
  .numbers{grid-template-columns:repeat(2,1fr)}
  .num:nth-child(3){border-left:0}
  .num:nth-child(n+3){border-top:1px solid var(--line)}
  .par-sec{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .cc-saved{right:12px}
}
@media (max-width:640px){
  .notice{font-size:11px}
  .proof-bar{grid-template-columns:1fr}
  .proof-bar > div + div{border-left:0; border-top:1px solid var(--line-2)}
  .proof-bar > div{padding:16px 18px}
  .hv{aspect-ratio:auto; display:flex; flex-direction:column; padding:52px 0 28px}
  .hv-shape{inset:22px 0 0 12%; border-radius:30px 30px 30px 110px; border-width:4px}
  .hv .float{transform:none}
  .hv-pill{top:0; right:0}
  .hv-chat{position:relative; left:auto; top:auto; width:88%}
  .hv-chat .card{rotate:-1.5deg}
  .hv-next{position:relative; right:auto; bottom:auto; width:76%; align-self:flex-end; margin-top:-48px}
  .hv-next .card{rotate:2deg}
  .hv-orbit, .hv-ai{display:none}
  .pill{font-size:11.5px; padding:8px 11px}
  .next h3{font-size:18px}
  .cta-row .btn{flex:1 1 220px}
  .tile{padding:20px}
  .tile-vis{min-height:200px}
  .tile-vis::before{inset:18px -20px -20px}
  .plan-feats{grid-template-columns:1fr}
  .motion-btn span{display:none}
  .motion-btn{padding:0; width:42px; justify-content:center}
  .foot-grid{grid-template-columns:1fr}
  .cc-saved{position:static; margin-top:16px}
  .callcard{padding:18px}
  .cc-tr p{grid-template-columns:1fr; gap:2px}
}


/* ================= v2 ================= */
[hidden]{display:none!important}
.tab[aria-selected="true"]{color:#fff}
.snap > .wrap{width:100%}
html{scroll-padding-top:var(--header-h)}

:root{
  --ch-web:#0a9fdc;
  --lav:#f3f0ff; --mintbg:#eaf8f2; --peach:#fff2e8; --skybg:#eaf4fe;
  --tint-a: linear-gradient(180deg,#f6f9fc 0%, #eef4fc 100%);
  --tint-b: linear-gradient(180deg,#f8f7fe 0%, #f3f2fd 100%);
}
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 14px; border-radius:10px; font-weight:600}
.skip:focus{top:12px}
.anchor{position:absolute; top:0}
.link-arrow{display:inline-flex; align-items:center; gap:6px; font-weight:650; color:var(--blue); font-size:15px}
.link-arrow .ic{width:16px; height:16px; transition:transform .25s var(--ease)}
.link-arrow:hover .ic{transform:translateX(3px)}
.tag{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px; background:color-mix(in srgb, var(--c,var(--blue)) 12%, white); color:var(--c,var(--blue))}
.ticks.sm{gap:9px}
.ticks.sm li{font-size:14.5px; grid-template-columns:22px 1fr; gap:10px}
.ticks.sm .ic{width:22px; height:22px; padding:4px; border-radius:7px}
.demo-note{display:block; font-size:12px; color:var(--muted)}
.ctrl{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); box-shadow:var(--shadow-1); transition:transform .2s var(--ease), border-color .2s; flex:none}
.ctrl:hover{transform:translateY(-1px); border-color:#c9d5e6}
.ctrl .ic{width:16px; height:16px}
.center-cta{display:flex; justify-content:center; margin-top:36px}
.mi .ext{width:12px; height:12px; display:inline; vertical-align:-1px; color:var(--muted)}
.new{display:inline-flex; align-items:center; font-size:9.5px; font-weight:800; letter-spacing:.08em; color:#fff; background:linear-gradient(90deg,var(--mint),#0a9fdc); padding:2px 6px; border-radius:6px; margin-left:4px; vertical-align:2px}

/* Seções do tamanho da tela (sem encaixe automático na rolagem) */
.snap{min-height:calc(100svh - var(--header-h)); display:flex; flex-direction:column; justify-content:center; position:relative}
.section{padding-block:clamp(48px, 7vh, 96px)}
.sec-head{gap:12px; max-width:880px}
.sec-head h2{font-size:clamp(2rem, 3.4vw, 3rem)}
.sec-head p{font-size:17px}
.hero.snap{min-height:calc(100svh - var(--header-h))}
.tint-a{background:var(--tint-a)}
.tint-b{background:var(--tint-b)}
.sec-head{margin-bottom:32px}

/* ---------- Soluções: carrossel ---------- */
.sol{display:flex; flex-direction:column; gap:20px}
.sol-tabs{display:flex; gap:6px; padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-1); overflow-x:auto; scrollbar-width:none; align-self:center; max-width:100%}
.sol-tabs::-webkit-scrollbar{display:none}
.sol-tab{display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 16px; border-radius:13px; font-size:14.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; transition:background-color .3s, color .3s}
.sol-tab .ic{width:18px; height:18px; color:var(--c)}
.sol-tab:hover{background:#f3f6fb}
.sol-tab[aria-selected="true"]{background:color-mix(in srgb,var(--c) 12%, white); color:var(--ink)}
.sol-viewport{overflow:hidden; border-radius:var(--r-xl); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-2)}
.sol-track{display:flex; transition:transform .7s var(--ease)}
.sol-slide{flex:0 0 100%; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:32px; padding:clamp(24px,4vw,52px); align-items:center}
.sol-copy{display:flex; flex-direction:column; gap:18px; min-width:0}
.sol-copy h3{font-size:clamp(1.7rem,3vw,2.5rem); font-weight:800; letter-spacing:-.04em}
.sol-copy > p{font-size:17px; color:var(--ink-2); max-width:52ch}
.sol-vis{position:relative; border-radius:26px; min-height:400px; display:grid; place-items:center; padding:28px; overflow:hidden; isolation:isolate;
  background:radial-gradient(90% 80% at 100% 0%, color-mix(in srgb,var(--c) 22%, transparent), transparent 60%), radial-gradient(80% 70% at 0% 100%, rgba(10,159,220,.14), transparent 60%), linear-gradient(160deg,#f5f8fd,#eef1fb)}
.sol-vis::before{content:""; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(rgba(11,19,36,.07) 1px, transparent 1px); background-size:16px 16px}
.sol-ui{width:100%; display:grid; place-items:center}
@media (min-width:981px){ .sol-ui > .ui{zoom:1.22} }
.sol-chips{position:absolute; left:18px; right:18px; bottom:16px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center}
.sol-chips .chip{height:28px; font-size:12px; background:rgba(255,255,255,.88)}
.sol-foot{display:flex; align-items:center; gap:14px}
.sol-progress{flex:1; height:4px; border-radius:4px; background:#e3e9f2; overflow:hidden}
.sol-progress span{display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(0); background:var(--grad); border-radius:inherit}
.sol-state{font-size:12.5px; color:var(--muted); min-width:170px; text-align:right}

/* ---------- Método ---------- */
.method-cta{display:flex; justify-content:center; margin-top:44px}

/* ---------- Perfis ---------- */
#perfTabs{margin-inline:0}
.tabs .tab-ind{background:var(--ink)}
.perf-stage{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-1); padding:clamp(22px,3.5vw,44px)}
.perf-pane{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:36px; align-items:center}
.perf-pane[hidden]{display:none!important}
.perf-pane:not([hidden]) > *{animation:intro .55s var(--ease) both}
.perf-pane:not([hidden]) > .screen{animation-delay:.08s}
.perf-copy{display:flex; flex-direction:column; gap:16px; min-width:0}
.perf-copy h3{font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:800; letter-spacing:-.04em}
.perf-copy p{color:var(--ink-2); font-size:16.5px}
.decision{display:flex; gap:12px; align-items:flex-start; background:var(--lav); border:1px solid #e1dcfb; padding:14px 16px; border-radius:16px; font-size:15px!important}
.decision .ic{color:var(--violet); margin-top:2px}
.screen{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-2); overflow:visible; font-size:13px; min-width:0}
.scr-bar{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line-2); font-weight:650; font-size:13px}
.scr-bar .dots{display:flex; gap:5px}.scr-bar .dots i{width:8px; height:8px; border-radius:50%; background:#dfe5ee}
.scr-bar .sp{margin-left:auto}
.scr-body{padding:16px; display:grid; gap:14px}
.g-dash .kpis{grid-template-columns:repeat(4,1fr)}
.g-dash .kpi b{font-size:20px}
.kpi b.warn{color:#c4492e}
.g-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.g-card{background:#f7f9fc; border-radius:14px; padding:12px; display:grid; gap:10px}
.g-card > small{font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.q-row.hot{color:#b4381f}
.g-card .q-row{grid-template-columns:72px 1fr 46px}
.fun{display:grid; gap:6px}
.fun i{font-style:normal; display:block; width:var(--w); min-width:max-content; font-size:11px; font-weight:650; padding:6px 9px; border-radius:8px; background:linear-gradient(90deg,#dceafb,#e8e4fd); color:var(--ink-2); white-space:nowrap}
.fun i:last-child{background:linear-gradient(90deg,#c9eedd,#def5ea); color:#0c7a55}
.u-chat{grid-template-columns:1.25fr .9fr; gap:14px}
.u-msgs{display:flex; flex-direction:column; gap:8px}
.u-msgs .bb{font-size:12.5px; padding:9px 11px; max-width:90%}
.u-side{background:#f7f9fc; border-radius:14px; padding:12px; display:grid; gap:8px; align-content:start; font-size:12.5px}
.u-side > small{font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.u-side p{display:grid; gap:2px}
.u-side p b{font-size:11px; color:var(--muted); font-weight:600}
.u-side .todo{display:flex; gap:8px; align-items:center; background:#fff4e8; color:#9a5310; padding:8px 10px; border-radius:10px; font-weight:600}
.u-side .todo .ic{width:16px; height:16px}
.mtable{width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums}
.mtable th{font-size:11px; text-align:left; color:var(--muted); font-weight:700; padding:8px; border-bottom:1px solid var(--line)}
.mtable td{padding:10px 8px; border-bottom:1px solid var(--line-2)}
.mtable td:first-child{display:flex; align-items:center; gap:8px; font-weight:600}
.mtable tr.best td{background:#eef9f3}
.mtable tr.best td:last-child{color:#0c7a55; font-weight:700}
.annot{display:flex; align-items:center; gap:8px; justify-self:start; align-self:start; padding:7px 11px; border-radius:10px; background:var(--ink); color:#fff; font-size:12px; line-height:1.3; box-shadow:0 10px 24px -10px rgba(11,19,36,.45); position:relative; margin-top:4px}
.annot::after{content:""; position:absolute; inset:-4px; border-radius:13px; border:2px solid rgba(107,92,231,.45); animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{opacity:1; transform:scale(.96)} 100%{opacity:0; transform:scale(1.08)}}
.hot-mark{outline:2px solid rgba(214,69,123,.55); outline-offset:3px; border-radius:8px}
.annot b{font-size:12px; color:#9fd2ff; white-space:nowrap}
.annot::before{content:""; position:absolute; left:16px; top:-5px; width:10px; height:10px; background:var(--ink); rotate:45deg; border-radius:2px}

/* ---------- Loop (jornadas) ---------- */
.loop{overflow:hidden; padding:8px 0 24px; outline:none}
.loop:focus-visible .loop-track{outline:2.5px solid var(--blue); outline-offset:6px; border-radius:24px}
.loop-track{display:flex; gap:22px; padding-left:max(24px, calc((100vw - var(--wrap)) / 2 + 24px)); will-change:transform}
.jr-card{flex:0 0 clamp(290px, 34vw, 440px); background:var(--surface); border:1px solid var(--line); border-radius:28px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-1); transition:box-shadow .3s, transform .3s var(--ease)}
.jr-card:hover{box-shadow:var(--shadow-2); transform:translateY(-3px)}
.jr-vis{height:250px; display:grid; place-items:center; padding:20px; background:radial-gradient(90% 90% at 100% 0%, color-mix(in srgb,var(--c) 22%, transparent), transparent 60%), linear-gradient(160deg,#f6f9fd,#eff2fb); overflow:hidden}
.jr-vis > div{width:100%; display:grid; place-items:center}
.jr-body{padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px; flex:1}
.jr-ic{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 12%, white)}
.jr-body h3{font-size:26px; font-weight:800; letter-spacing:-.035em}
.jr-who{font-size:13px; font-weight:650; color:var(--c)}
.jr-body p:not(.jr-who){font-size:15px; color:var(--ink-2)}
.jr-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:8px}
.jr-links a{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:7px 11px; border-radius:10px; background:#f3f6fb; color:var(--ink-2); transition:background-color .2s, color .2s}
.jr-links a .ic{width:14px; height:14px}
.jr-links a:hover{background:color-mix(in srgb,var(--c) 12%, white); color:var(--c)}

/* ---------- Cases ---------- */
.cases{display:grid; grid-template-columns:repeat(var(--n,5), minmax(0,1fr)); gap:16px}
.case{display:flex; flex-direction:column; gap:12px; min-width:0}
.vid{position:relative; aspect-ratio:9/16; max-width:100%; border-radius:22px; overflow:hidden; background:linear-gradient(160deg,#dfe9f8,#e6e1fb 60%,#f3e7f1); box-shadow:var(--shadow-2); isolation:isolate}
.vid video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.vid-ph{position:absolute; inset:auto 0 0; padding:16px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:12.5px; font-weight:600; z-index:0}
.vid-ph .ic{width:18px; height:18px; color:#8ea0bd}
.vid.has-video .vid-ph{display:none}
.vid-btn{position:absolute; left:50%; top:50%; translate:-50% -50%; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.92); color:var(--blue); box-shadow:0 10px 30px -8px rgba(11,30,70,.45); z-index:2; transition:scale .25s var(--ease), opacity .3s}
.vid-btn .ic{width:24px; height:24px; fill:currentColor; stroke:none; margin-left:3px}
.vid-btn:hover{scale:1.06}
.vid.playing .vid-btn{opacity:0}
.vid.playing:hover .vid-btn, .vid.playing .vid-btn:focus-visible{opacity:1}
.vid.playing .vid-btn .ic{margin-left:0}
.vid .vid-msg{position:absolute; left:10px; right:10px; bottom:10px; z-index:3; font-size:11.5px; background:rgba(11,19,36,.82); color:#fff; padding:8px 10px; border-radius:10px; text-align:center}
.case-who b{display:block; font-size:15px}
.case-who span{font-size:13px; color:var(--muted)}
.proof-row{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; margin-top:40px; align-items:stretch}
.counters{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-1)}
.ct{padding:22px 18px; display:flex; flex-direction:column; gap:6px; min-width:0}
.ct + .ct{border-left:1px solid var(--line-2)}
.ct b{font-family:var(--f-display); font-size:clamp(1.6rem,2.6vw,2.3rem); font-weight:800; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap}
.ct:first-child b{background:none; color:var(--ink)}
.ct span{font-size:13px; color:var(--muted); line-height:1.4}
.greviews{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:20px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-1)}
.gr-head{display:flex; gap:12px; align-items:center}
.g-mark{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:800; font-size:18px; color:var(--blue); background:var(--skybg)}
.gr-head b{display:block; font-size:15px}
.gr-head small{font-size:12px; color:var(--muted)}
.gr-score{display:flex; align-items:center; gap:10px}
.gr-score > b{font-family:var(--f-display); font-size:34px; font-weight:800; letter-spacing:-.04em}
.gr-stars{display:flex; gap:2px; color:#d7dde7}
.gr-stars .ic{width:18px; height:18px; fill:currentColor; stroke:none}
.gr-stars .ic.on{color:#f2b01e}
.num-note{font-size:12px; color:var(--muted); margin-top:12px}

/* ---------- Segmentos ---------- */
.seg-mods{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px}
.seg-mod{background:var(--surface); border:1px solid var(--line); border-radius:24px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-1); transition:transform .35s var(--ease), box-shadow .35s; min-width:0}
.seg-mod:hover{transform:translateY(-4px); box-shadow:var(--shadow-2)}
.seg-mod .thumb.tall{aspect-ratio:4/3.4; border-radius:0}
.seg-mod:hover .thumb .big{transform:scale(1.12) rotate(-6deg)}
.seg-mod-body{padding:18px 18px 22px; display:flex; flex-direction:column; gap:10px}
.seg-mod-body h3{display:flex; align-items:center; gap:8px; font-size:20px; font-weight:800; letter-spacing:-.03em}
.seg-mod-body h3 .ic{color:var(--blue)}
.seg-mod-body > p{font-size:14px; color:var(--ink-2); line-height:1.5}
.seg-mod .ticks.sm li{font-size:13.5px}
.seg-mod.flash{box-shadow:0 0 0 3px rgba(10,111,208,.35), var(--shadow-2)}

/* ---------- Cards que viram ---------- */
.fl{overflow:hidden; padding:30px 0 10px; position:relative}
.fl-track{display:flex; gap:var(--fl-gap,24px); will-change:transform}
.fc{flex:0 0 var(--fl-w,320px); height:440px; perspective:1400px; opacity:.5; scale:.9; filter:saturate(.7); transition:opacity .6s var(--ease), scale .6s var(--ease), filter .6s}
.fc.center{opacity:1; scale:1; filter:none}
.fc-in{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.fc.flipped .fc-in{transform:rotateY(180deg)}
.fc-face{position:absolute; inset:0; border-radius:28px; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-1)}
.fc.center .fc-face{box-shadow:var(--shadow-3)}
.fc-front .fc-vis{flex:1; display:grid; place-items:center; padding:18px; background:radial-gradient(90% 80% at 100% 0%, color-mix(in srgb,var(--c) 24%, transparent), transparent 60%), linear-gradient(160deg,#f6f9fd,#eef1fb); overflow:hidden}
.fc-front .fc-vis > div{width:100%; display:grid; place-items:center}
.fc-front .fc-vis .ui{zoom:.86}
.fc-front h3{padding:20px 22px 6px; font-size:22px; font-weight:800; letter-spacing:-.035em}
.fc-turn, .fc-back-btn{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:650; color:var(--muted); padding:0 22px 20px; visibility:hidden}
.fc-back-btn{padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.14); color:#fff; visibility:visible}
.fc-turn .ic, .fc-back-btn .ic{width:15px; height:15px}
.fc.center .fc-turn{visibility:visible; color:var(--c)}
.fc-back{transform:rotateY(180deg); background:linear-gradient(150deg, color-mix(in srgb,var(--c) 92%, #0b1324), color-mix(in srgb,var(--c) 70%, #2a1e7a)); color:#fff; padding:28px; gap:14px; border-color:transparent}
.fc-kicker{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:rgba(255,255,255,.16); padding:6px 10px; border-radius:8px}
.fc-bold{font-family:var(--f-display); font-size:26px; font-weight:800; letter-spacing:-.035em; line-height:1.1}
.fc-back p:not(.fc-bold){font-size:15px; color:rgba(255,255,255,.88); line-height:1.55}
.fc-actions{margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
.fc-back .link-arrow{color:#fff; background:rgba(255,255,255,.18); padding:10px 14px; border-radius:12px}
.fl-ctrls{display:flex; justify-content:center; gap:10px; margin-top:22px}

/* ---------- Integrações ---------- */
.logos{display:grid; gap:12px; padding-block:6px 40px; overflow:hidden; pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos-row{overflow:hidden}
.logos-track{display:flex; gap:12px; width:max-content; animation:marquee 50s linear infinite}
.logos-row.rev .logos-track{animation-direction:reverse; animation-duration:56s}
.logo-chip{display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 20px 0 10px; border-radius:16px; background:var(--surface); border:1px solid var(--line); font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--ink-2); white-space:nowrap}
.logo-chip i{font-style:normal; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-size:12px; font-weight:800; color:var(--c); background:color-mix(in srgb,var(--c) 12%, white)}
.int-cards{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.int-card{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px; display:flex; flex-direction:column; gap:8px; transition:transform .3s var(--ease), box-shadow .3s; min-width:0}
.int-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}
.int-ic{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 12%, white); margin-bottom:4px}
.int-card b{font-size:17px; letter-spacing:-.02em}
.int-sub{font-size:13px; font-weight:650; color:var(--c)}
.int-card p{font-size:14px; color:var(--muted)}
.int-foot{display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:28px; padding:22px 26px; border-radius:22px; background:var(--skybg); border:1px solid #d9e8f8}
.int-foot p{font-size:15.5px; color:var(--ink-2); max-width:70ch}

/* ---------- Implantação ---------- */
.impl-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:center}
.impl-copy{display:flex; flex-direction:column; gap:20px; align-items:flex-start}
.impl-copy h2{font-size:clamp(2.2rem,4.2vw,3.4rem); font-weight:800; letter-spacing:-.045em}
.impl-copy p{font-size:18px; color:var(--ink-2); max-width:46ch}
.impl-tl{list-style:none; margin:0; padding:0; display:grid; gap:14px; position:relative}
.impl-tl::before{content:""; position:absolute; left:27px; top:28px; bottom:28px; width:2px; background:linear-gradient(180deg,var(--cyan),var(--violet)); opacity:.35}
.impl-tl li{position:relative; display:grid; grid-template-columns:56px 1fr; gap:18px; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-1)}
.it-ic{width:56px; height:56px; border-radius:18px; display:grid; place-items:center; color:#fff; background:var(--grad); box-shadow:0 10px 24px -10px rgba(10,111,208,.6); position:relative; z-index:1}
.it-when{font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--violet)}
.impl-tl b{display:block; font-family:var(--f-display); font-size:20px; letter-spacing:-.025em; margin:4px 0 6px}
.impl-tl p{font-size:15px; color:var(--muted)}
.it-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.it-chips span{font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; background:#f1f5fb; color:var(--ink-2)}
.it-person{display:flex; gap:10px; align-items:center; margin-top:12px; padding:10px 12px; border:1px dashed #cbd6e6; border-radius:14px; background:#fafcfe}
.ph-avatar{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#eef2f8; color:#8ea0bd}
.ph-avatar .ic{width:18px; height:18px}
.it-person b{font-family:var(--f-body); font-size:13.5px; margin:0}
.it-person small{font-size:11.5px; color:var(--muted)}

/* ---------- Diagnóstico ---------- */
.diag-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.diag-card{background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; gap:16px; align-items:flex-start; box-shadow:var(--shadow-1)}
.diag-card:first-child{background:linear-gradient(160deg,#ffffff,#eef5fe)}
.diag-card:last-child{background:linear-gradient(160deg,#ffffff,#f3f0ff)}
.dc-ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 12%, white)}
.dc-ic .ic{width:24px; height:24px}
.diag-card h3{font-size:26px; font-weight:800; letter-spacing:-.035em}
.diag-card > p{font-size:16px; color:var(--ink-2)}
.diag-card .btn{margin-top:auto}
.calc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:18px; margin-top:18px}
.calc:not([hidden]){animation:intro .5s var(--ease) both}
.calc-form, .calc-out{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:clamp(20px,3vw,32px); display:flex; flex-direction:column; gap:14px; min-width:0}
.calc-form h3{font-size:20px; font-weight:800; letter-spacing:-.03em}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:14px; font-weight:600; color:var(--ink-2)}
.field .opt{font-weight:500; color:var(--muted)}
input[type="text"], input[type="tel"], input[type="number"], input:not([type]), select, textarea{font:inherit; font-size:15px; color:var(--ink); background:#fbfcfe; border:1px solid #d6dfeb; border-radius:12px; padding:11px 13px; width:100%; transition:border-color .2s, box-shadow .2s}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(10,111,208,.12)}
input.bad, select.bad{border-color:#d1493b; box-shadow:0 0 0 4px rgba(209,73,59,.1)}
.err{font-size:12.5px; color:#b7372a; min-height:0}
.err:empty{display:none}
.hint{font-size:12.5px; color:var(--muted)}
.range-row{display:grid; grid-template-columns:1fr 96px; gap:12px; align-items:center}
input[type="range"]{accent-color:var(--blue); width:100%}
.calc-out{background:linear-gradient(160deg,#ffffff,#f5f3ff)}
.co-label{font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--violet)}
.co-main{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px}
.co-main b{font-family:var(--f-display); font-size:clamp(2.2rem,4vw,3rem); font-weight:800; letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.co-main span{color:var(--muted); font-size:14px}
.co-list{margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.co-list div{background:rgba(255,255,255,.8); border:1px solid var(--line); border-radius:14px; padding:12px}
.co-list dt{font-size:12px; color:var(--muted)}
.co-list dd{margin:4px 0 0; font-family:var(--f-display); font-size:20px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.co-cap{font-size:13.5px; color:var(--ink-2); background:var(--mintbg); border-radius:12px; padding:10px 12px}
.co-warn{font-size:12px; color:var(--muted); line-height:1.5}
.calc-out .btn{align-self:flex-start}
.co-faq{display:grid; gap:6px}
.co-faq details{border-top:1px solid var(--line-2); padding-top:8px}
.co-faq summary{cursor:pointer; font-size:14px; font-weight:650; color:var(--ink-2)}
.co-faq p{font-size:13.5px; color:var(--muted); padding:6px 0 4px}

/* ---------- Planos ---------- */
.billing{position:relative; display:inline-flex; padding:5px; border-radius:14px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-1); margin-top:6px}
.billing button{position:relative; z-index:1; height:40px; padding:0 18px; border-radius:10px; font-weight:650; font-size:14.5px; color:var(--ink-2); transition:color .3s; display:inline-flex; align-items:center; gap:8px}
.billing button[aria-checked="true"]{color:#fff}
.bill-ind{position:absolute; top:5px; bottom:5px; left:5px; border-radius:10px; background:var(--ink); transition:left .4s var(--ease), width .4s var(--ease)}
.save{font-size:11px; font-weight:800; color:#0c7a55; background:#dff5ea; padding:2px 7px; border-radius:6px}
.plans{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:stretch}
.plan{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:26px 22px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-1); min-width:0}
.plan.featured{border:2px solid transparent; background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box; box-shadow:0 30px 60px -28px rgba(10,80,170,.45); transform:translateY(-8px)}
.plan-badge{position:absolute; top:-13px; left:22px; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--grad); padding:6px 12px; border-radius:999px; box-shadow:0 8px 20px -8px rgba(107,92,231,.6)}
.plan h3{font-size:24px; font-weight:800; letter-spacing:-.035em}
.plan-desc{font-size:14px; color:var(--muted); min-height:4.2em}
.plan-price{display:flex; align-items:baseline; gap:4px}
.plan-price .cur{font-weight:700; color:var(--ink-2)}
.plan-price b{font-family:var(--f-display); font-size:42px; font-weight:800; letter-spacing:-.05em; font-variant-numeric:tabular-nums; line-height:1}
.plan-price .per{color:var(--muted); font-size:14px}
.plan-note{font-size:12px; color:var(--muted); margin-top:-6px; min-height:2.6em}
.plan-inc{font-size:13.5px; font-weight:650; color:var(--ink-2); background:#f4f7fb; border-radius:10px; padding:8px 10px}
.plan .btn{width:100%; height:48px}
.demo-flag{text-align:center; font-size:12.5px; color:var(--muted); margin-top:16px}
.compare{margin-top:22px; background:var(--surface); border:1px solid var(--line); border-radius:22px; interpolate-size:allow-keywords}
.compare::details-content{block-size:0; overflow:clip; transition:block-size .4s var(--ease), content-visibility .4s allow-discrete}
.compare[open]::details-content{block-size:auto}
.compare summary{list-style:none; cursor:pointer; display:flex; justify-content:center; align-items:center; gap:8px; padding:16px; font-weight:650; color:var(--blue)}
.compare summary::-webkit-details-marker{display:none}
.compare summary .ic{transition:rotate .3s var(--ease)}
.compare[open] summary .ic{rotate:180deg}
.table-wrap{overflow-x:auto; padding:0 16px 16px}
.ptable{width:100%; min-width:680px; border-collapse:separate; border-spacing:0; font-size:14px}
.ptable th, .ptable td{padding:12px 14px; border-bottom:1px solid var(--line-2); text-align:center}
.ptable thead th{position:sticky; top:0; background:var(--surface); font-family:var(--f-display); font-size:17px; letter-spacing:-.02em}
.ptable tbody th{text-align:left; font-weight:550; color:var(--ink-2)}
.ptable .feat{background:#f6f4ff}
.ptable tr.grp th{background:#f7f9fc; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:left}
.ptable .yes{color:var(--mint); width:20px; height:20px; stroke-width:2.6; margin:auto}
.ptable .no{color:#b8c2d1}
.ptable .txt{font-size:13px; font-weight:600; color:var(--ink-2)}
.pcalc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; margin-top:22px}
.pc-form, .pc-out{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:clamp(20px,3vw,30px); display:flex; flex-direction:column; gap:12px; min-width:0}
.pc-form h3{font-size:20px; font-weight:800; letter-spacing:-.03em; margin-bottom:4px}
.pc-sub{font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:6px}
.stepper-row{display:flex; justify-content:space-between; align-items:center; gap:12px}
.stepper-row label{font-size:14.5px; font-weight:600; color:var(--ink-2)}
.stepper{display:flex; align-items:center; border:1px solid #d6dfeb; border-radius:12px; overflow:hidden; background:#fbfcfe}
.stepper button{width:40px; height:42px; display:grid; place-items:center; color:var(--ink-2)}
.stepper button:hover{background:#eef3fa}
.stepper button .ic{width:16px; height:16px}
.stepper input{width:64px; border:0; border-radius:0; text-align:center; background:transparent; padding:8px 4px; -moz-appearance:textfield; font-variant-numeric:tabular-nums}
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button{-webkit-appearance:none}
.stepper input:focus{box-shadow:none}
.pc-out{background:linear-gradient(160deg,#ffffff,#eef5fe)}
.pc-prices{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pc-prices > div{background:rgba(255,255,255,.85); border:1px solid var(--line); border-radius:16px; padding:14px}
.pc-prices .ann{border-color:#c6e9d6; background:#f2fbf6}
.pc-prices small{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:650; color:var(--muted)}
.pc-prices b{display:block; font-family:var(--f-display); font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; letter-spacing:-.045em; font-variant-numeric:tabular-nums; margin:4px 0 0}
.pc-prices span{font-size:12.5px; color:var(--muted)}
.pc-lines{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px; font-variant-numeric:tabular-nums}
.pc-lines li{display:flex; justify-content:space-between; gap:12px; padding-bottom:6px; border-bottom:1px dashed var(--line)}
.pc-lines li span:last-child{font-weight:650}
.pc-save{font-size:14px; font-weight:650; color:#0c7a55}
.pc-out .btn{align-self:flex-start}

/* ---------- FAQ + encerramento ---------- */
.faq-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr); gap:40px; align-items:start}
.faq{max-width:none}
.closing{position:sticky; top:calc(var(--header-h) + 24px); background:linear-gradient(160deg,#eaf3fe,#f1effe); border:1px solid #dde6f6; border-radius:28px; padding:30px; display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.closing h3{font-size:clamp(1.7rem,2.6vw,2.2rem); font-weight:800; letter-spacing:-.04em}
.closing p{color:var(--ink-2); font-size:16px}
.closing-vis{width:100%; display:grid; place-items:center; margin-top:8px}

/* ---------- Mídia ---------- */
.media-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); gap:18px}
.trust, .awards{background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:28px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-1)}
.mg-label{font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.seal{height:110px; border-radius:18px; background:#f7f9fc; border:1px dashed #d3dce9; display:grid; place-items:center; padding:12px}
.seal img{max-height:86px; width:auto}
.seal-ph{display:grid; justify-items:center; gap:6px; font-size:12.5px; font-weight:650; color:var(--muted)}
.seal-ph .ic{width:28px; height:28px; color:#8ea0bd}
.trust p{font-size:15px; color:var(--ink-2)}
.aw-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.aw{display:flex; flex-direction:column; gap:10px; text-align:center}
.aw b{font-size:14.5px}

/* ---------- Rodapé (claro) ---------- */
.footer{background:linear-gradient(180deg,#f6f9fc,#eef2f9); color:var(--muted); padding-block:72px 28px; font-size:14.5px; border-top:1px solid var(--line)}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1.1fr 1fr; gap:36px}
.foot-brand{display:flex; flex-direction:column; gap:16px}
.foot-brand > img{height:30px; width:auto; align-self:flex-start}
.foot-brand p{max-width:36ch; line-height:1.6; color:var(--ink-2)}
.footer h4{font-family:var(--f-body); color:var(--ink); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer a, .linklike{transition:color .2s; color:var(--ink-2); font-size:14.5px; text-align:left}
.footer a:hover, .linklike:hover{color:var(--blue)}
.social{display:flex; gap:8px}
.social a{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--ink-2)}
.social a:hover{color:var(--blue); border-color:#c9d8ec}
.stores{display:flex; flex-wrap:wrap; gap:8px}
.stores a{display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 16px 0 12px; border-radius:12px; background:var(--ink); color:#fff!important; line-height:1.1; font-weight:650}
.stores a small{display:block; font-size:10.5px; font-weight:500; opacity:.75}
.stores a:hover{background:#1b2740}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; border-top:1px solid var(--line); margin-top:48px; padding-top:22px; font-size:12.5px; color:var(--muted)}

/* ---------- Modais e formulários ---------- */
.modal{border:0; padding:0; border-radius:26px; width:min(520px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-3); overflow:auto; opacity:1; scale:1; transition:opacity .3s, scale .35s var(--ease), overlay .35s allow-discrete, display .35s allow-discrete}
.modal:not([open]){opacity:0; scale:.96}
@starting-style{ .modal[open]{opacity:0; scale:.96} }
.modal::backdrop{background:rgba(11,19,36,.4); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px)}
.modal.wide{width:min(760px, calc(100vw - 24px))}
.modal.video{width:min(440px, calc(100vw - 24px)); background:#0b1324}
.modal-in{position:relative; padding:clamp(22px,4vw,34px); display:flex; flex-direction:column; gap:14px}
.modal h3{font-size:26px; font-weight:800; letter-spacing:-.035em; padding-right:40px}
.m-sub{color:var(--ink-2); font-size:15px; margin-top:-4px}
.m-close{position:absolute; right:16px; top:16px; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:#f1f5fb; z-index:2}
.m-close:hover{background:#e6edf7}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.consent{display:grid; grid-template-columns:20px 1fr; gap:10px; font-size:13.5px; color:var(--ink-2); line-height:1.45; cursor:pointer}
.consent input{width:18px; height:18px; margin-top:1px; accent-color:var(--blue)}
.consent a{color:var(--blue); text-decoration:underline}
.m-ok{display:flex; gap:10px; align-items:flex-start; background:var(--mintbg); color:#0c6b4b; padding:14px; border-radius:14px; font-weight:600; font-size:14.5px}
.m-ok .ic{color:var(--mint); flex:none}
.lead-form .btn[type="submit"]{width:100%}
.lead-form.sent .field, .lead-form.sent .consent, .lead-form.sent .btn[type="submit"], .lead-form.sent .ts-slot, .lead-form.sent #lf-lgpd-err{display:none}
.dg-head{display:flex; flex-direction:column; gap:12px}
.dg-progress{height:6px; border-radius:6px; background:#edf1f7; overflow:hidden}
.dg-progress span{display:block; height:100%; width:14%; background:var(--grad); border-radius:inherit; transition:width .5s var(--ease)}
.dg-steps{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--muted); font-weight:600}
.dg-steps li.on{color:var(--blue)}
.dg-steps li.done{color:var(--mint)}
.dg-step{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; min-width:0}
.dg-step:not([hidden]){animation:intro .45s var(--ease) both}
.dg-step legend{font-family:var(--f-display); font-size:20px; font-weight:800; letter-spacing:-.03em; padding:0; margin-bottom:4px}
.dg-why{font-size:14px; color:var(--ink-2); background:var(--skybg); border-radius:12px; padding:10px 12px}
.q{font-weight:650; font-size:15px; margin-top:6px}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opts.col{flex-direction:column}
.opts label{cursor:pointer}
.opts input{position:absolute; opacity:0; pointer-events:none}
.opts span{display:inline-flex; align-items:center; min-height:42px; padding:8px 14px; border-radius:12px; border:1px solid #d6dfeb; background:#fbfcfe; font-size:14px; transition:all .2s}
.opts.col span{display:flex; width:100%}
.opts input:checked + span{border-color:var(--blue); background:#eaf3fd; color:var(--blue-deep); font-weight:600; box-shadow:0 0 0 3px rgba(10,111,208,.1)}
.opts input:focus-visible + span{outline:2.5px solid var(--blue); outline-offset:2px}
.opts.bad span{border-color:#e2a29b}
textarea{resize:vertical; min-height:84px}
.dg-summary{display:grid; gap:6px; font-size:13.5px; background:#f7f9fc; border-radius:14px; padding:14px}
.dg-summary p{display:flex; justify-content:space-between; gap:12px}
.dg-summary p span:first-child{color:var(--muted)}
.dg-summary p span:last-child{font-weight:600; text-align:right}
.dg-nav{display:flex; justify-content:space-between; gap:10px; margin-top:6px}
.dg-nav #dgNext, .dg-nav #dgSubmit{margin-left:auto}
.diag.sent .dg-step, .diag.sent .dg-nav{display:none}
.demo-vid{position:relative; aspect-ratio:9/16; max-height:78dvh; border-radius:18px; overflow:hidden; background:#0b1324}
.demo-vid video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.demo-ph{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; padding:24px; color:#dbe6f6; background:linear-gradient(160deg,#10213d,#1b1748)}
.demo-ph .ic{width:36px; height:36px; color:#9fc4ff}
.demo-ph b{font-size:18px; color:#fff}
.demo-ph span{font-size:13px; opacity:.8}
.modal.video .m-close{background:rgba(255,255,255,.12); color:#fff}

.cookie{position:fixed; z-index:70; left:max(16px, env(safe-area-inset-left,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); width:min(560px, calc(100vw - 32px)); display:grid; grid-template-columns:auto 1fr; gap:10px 14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:16px 18px; box-shadow:var(--shadow-3); font-size:14px; color:var(--ink-2)}
.cookie > .ic{color:var(--amber)}
.cookie > div{grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px}
.ck-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid var(--line-2); cursor:pointer}
.ck-row b{display:block}
.ck-row small{color:var(--muted)}
.ck-row input{width:20px; height:20px; accent-color:var(--blue)}

/* ---------- Mini UI extras ---------- */
.list{padding:8px; display:grid; gap:4px}
.li{display:flex; align-items:center; gap:9px; padding:8px; border-radius:10px; background:#fafcfe}
.li div{flex:1; min-width:0}
.li b{display:block; font-size:11.5px}
.li small{display:block; font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gi{width:28px; height:28px; border-radius:9px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 13%, white); flex:none}
.gi .ic{width:15px; height:15px}
.foot-note{font-size:10.5px; color:var(--muted); padding:0 12px 12px}
.webchat{position:relative; padding:0 0 24px}
.webchat .site{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; display:grid; gap:8px; height:190px; box-shadow:var(--shadow-1)}
.site-btn{display:block; width:90px; height:22px; border-radius:7px; background:#dbe8f7; margin-top:4px}
.wc-box{position:absolute; right:16px; bottom:30px; width:210px}
.wc-head{display:flex; gap:8px; align-items:center; padding:9px 10px; background:var(--blue); color:#fff}
.wc-head b{display:block; font-size:11.5px}.wc-head small{font-size:9.5px; opacity:.85}
.wc-head .ui-av{background:rgba(255,255,255,.2); color:#fff}
.wc-body{padding:10px; display:flex; flex-direction:column; gap:6px}
.wc-fab{position:absolute; right:0; bottom:0; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--blue); box-shadow:0 8px 18px -6px rgba(10,111,208,.6)}
.wc-fab .ic{width:18px; height:18px}
.form-mini{padding:12px; display:grid; gap:8px}
.form-mini > small{font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.pills{display:flex; flex-wrap:wrap; gap:5px}
.pills .ui-chip{--c:#5f6b7e; background:#f1f4f8}
.pills .ui-chip.on{--c:var(--blue); background:#e3effc; box-shadow:0 0 0 1.5px var(--blue) inset}
.btn-mini{display:block; text-align:center; font-size:11px; font-weight:700; color:#fff; background:var(--blue); border-radius:9px; padding:8px; margin-top:4px}
.int{padding:12px; display:grid; gap:9px}
.int p{display:flex; gap:8px; font-size:11px; line-height:1.4}
.int p b{display:block; font-size:11px}
.cad{list-style:none; margin:0; padding:14px 14px 14px 18px; display:grid; gap:0; position:relative}
.cad li{display:flex; gap:12px; align-items:flex-start; padding-bottom:12px; position:relative; font-size:11.5px}
.cad li::before{content:""; position:absolute; left:5px; top:12px; bottom:0; width:2px; background:#e3e9f2}
.cad li:last-child::before{display:none}
.cad li i{width:12px; height:12px; border-radius:50%; border:2px solid #c7d2e2; background:#fff; flex:none; margin-top:2px; position:relative; z-index:1}
.cad li.done i{background:var(--mint); border-color:var(--mint)}
.cad li.now i{border-color:var(--blue); box-shadow:0 0 0 4px rgba(10,111,208,.15)}
.cad li b{display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.cad li.now span{color:var(--blue-deep); font-weight:600}
.sched{padding:12px; display:grid; gap:10px}
.when{display:flex; gap:9px; align-items:center; padding:9px; border-radius:10px; background:#fff7ee; border:1px solid #f6dfc4}
.when .ic{width:18px; height:18px; color:var(--amber)}
.when b{display:block; font-size:11.5px}.when small{font-size:10px; color:var(--muted)}
.when .sp{margin-left:auto; --c:var(--amber)}
.camp{padding:12px; display:grid; gap:10px}
.funnel-bars{display:grid; gap:5px}
.funnel-bars i{display:block; height:12px; width:var(--w); border-radius:6px; background:linear-gradient(90deg,var(--rose),#f08aac)}
.funnel-bars i:nth-child(2){background:linear-gradient(90deg,var(--violet),#a99ff3)}
.funnel-bars i:nth-child(3){background:linear-gradient(90deg,var(--mint),#7fd9b6)}
.trk{padding:12px; display:grid; gap:9px}
.trk-row{display:grid; grid-template-columns:1.3fr 1fr 24px; gap:8px; align-items:center; font-size:10.5px}
.trk-row .src{display:flex; align-items:center; gap:6px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.trk-row .src::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--c); flex:none}
.trk-row .bar{height:7px; border-radius:6px; background:#eef2f7; overflow:hidden}
.trk-row .bar i{display:block; height:100%; width:var(--w); background:var(--grad); border-radius:inherit}
.trk-row em{font-style:normal; font-family:var(--f-mono); color:var(--muted); text-align:right}
.csat{padding:12px; display:grid; gap:8px}
.stars{display:flex; gap:4px}
.stars i{width:20px; height:20px; background:#dfe5ee; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars i.on{background:#f2b01e}
.csat .kpi{justify-self:start}
.cal{padding:12px; display:grid; gap:10px}
.cal-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:5px; text-align:center; font-size:11px}
.cal-grid b{font-size:9.5px; color:var(--muted)}
.cal-grid span{padding:7px 0; border-radius:8px; background:#f5f7fb; font-weight:600}
.cal-grid span.on{background:var(--blue); color:#fff}
.slots{display:grid; grid-template-columns:repeat(4,1fr); gap:5px}
.slots span{font-size:10.5px; text-align:center; padding:6px 0; border-radius:8px; border:1px solid var(--line); font-weight:600; font-family:var(--f-mono)}
.slots span.on{border-color:var(--blue); color:var(--blue); background:#eaf3fd}
.bb.ai{background:linear-gradient(100deg,#f1efff,#eaf3fd)}
.wa-body .ui-chip{align-self:flex-start; white-space:normal}

/* ---------- Responsivo v2 ---------- */
@media (max-width:1180px){
  .seg-mods{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding-bottom:12px; margin-inline:calc(-1 * max(24px, env(safe-area-inset-left,0px))); padding-inline:max(24px, env(safe-area-inset-left,0px)); scrollbar-width:thin}
  .seg-mod{flex:0 0 clamp(250px, 40vw, 300px); scroll-snap-align:start}
  .cases{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding-bottom:12px; margin-inline:calc(-1 * max(24px, env(safe-area-inset-left,0px))); padding-inline:max(24px, env(safe-area-inset-left,0px))}
  .case{flex:0 0 clamp(200px, 30vw, 240px); scroll-snap-align:start}
  .int-cards{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; margin-inline:calc(-1 * max(24px, env(safe-area-inset-left,0px))); padding-inline:max(24px, env(safe-area-inset-left,0px))}
  .int-card{flex:0 0 240px; scroll-snap-align:start}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan.featured{transform:none}
  .proof-row{grid-template-columns:1fr}
  .counters{grid-template-columns:repeat(3,1fr)}
  .ct:nth-child(4){border-left:0}
  .ct:nth-child(n+4){border-top:1px solid var(--line-2)}
}
@media (max-width:980px){
  .snap{min-height:0; display:block}
  .hero.snap{min-height:0}
  .sol-slide, .perf-pane, .impl-grid, .faq-grid, .diag-grid, .calc, .pcalc, .media-grid{grid-template-columns:1fr}
  .sol-vis{min-height:340px}
  .closing{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .int-foot{flex-direction:column; align-items:flex-start}
  .sol-state{display:none}
}
@media (max-width:640px){
  .btn{white-space:normal; height:auto; min-height:50px; padding-block:12px; text-align:center}
  .btn-sm{min-height:42px}
  .seg-mods, .cases, .int-cards{margin-inline:calc(-1 * max(16px, env(safe-area-inset-left,0px))); padding-inline:max(16px, env(safe-area-inset-left,0px))}
  .plans{grid-template-columns:1fr}
  .counters{grid-template-columns:1fr 1fr}
  .ct{border-left:0!important; border-top:1px solid var(--line-2)}
  .ct:first-child, .ct:nth-child(2){border-top:0}
  .ct:nth-child(even){border-left:1px solid var(--line-2)!important}
  .g-dash .kpis{grid-template-columns:1fr 1fr}
  .g-row, .u-chat{grid-template-columns:1fr}
  .co-list{grid-template-columns:1fr}
  .pc-prices{grid-template-columns:1fr}
  .aw-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .fc{height:420px}
  .sol-tab span{font-size:13.5px}
  .loop-track{padding-left:16px}
  .jr-card{flex-basis:82vw}
  .jr-vis{height:220px}
  .cookie{grid-template-columns:auto 1fr}
  .dg-nav .btn{flex:1}
  .range-row{grid-template-columns:1fr 84px}
  .modal h3{font-size:22px}
}

/* ---------- Mega-menu v2 ---------- */
.pn-rec{width:min(1200px, calc(100vw - 32px)); grid-template-columns:repeat(4, minmax(0,1fr)) 280px; gap:4px 12px}
.pn-rec .pn-eyebrow{padding-top:10px}
.pn-rec .rec-col > .pn-eyebrow:first-child{padding-top:4px}
.pn-seg{width:min(1000px, calc(100vw - 32px))}
.pn-seg .seg-grid{grid-template-columns:repeat(5, minmax(0,1fr))}
.pn-seg .thumb{aspect-ratio:4/4.4}
.pn-seg .thumb .bub{font-size:11px}
.pn-con .stage{min-height:330px}
.pn-foot.mods{justify-content:flex-start; flex-wrap:wrap; gap:8px}
.pn-foot.mods .mods-lbl{font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-right:6px}
.pn-foot.mods a{color:var(--ink-2); background:var(--surface); border:1px solid var(--line); padding:6px 12px; border-radius:999px; font-size:13px; font-weight:600}
.pn-foot.mods a:hover{color:var(--blue); border-color:#c9d8ec}
.mn-group{font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:12px 8px 4px}
.mn-it.sm{padding:6px 8px}
.mn-it.sm .mi-ic{width:36px; height:36px; border-radius:11px}
.mn-mods{display:flex; flex-wrap:wrap; gap:6px; padding:0 8px 6px}
.mn-mods a{font-size:14px; font-weight:600; padding:8px 12px; border-radius:999px; border:1px solid var(--line)}

/* ---------- Ícones de canal ---------- */
.chan{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff; flex:none; background:var(--blue)}
.chan .ic{width:15px; height:15px; stroke-width:2}
.chan.lg{width:36px; height:36px; border-radius:11px}
.chan.lg .ic{width:19px; height:19px}
.chan.c-wa{background:#25a957}
.chan.c-ig{background:linear-gradient(45deg,#f6a53c,#e1306c 55%,#8a3ab9)}
.chan.c-ms{background:linear-gradient(45deg,#3b7cf0,#a64bf4)}
.chan.c-web{background:#0a8fd0}
.chan.c-tel{background:#6b5ce7}
.wc-head .chan{background:rgba(255,255,255,.22)}
/* Logos oficiais: coloque os arquivos em assets/canais/ e eles substituem os ícones automaticamente */
.logo-whatsapp .chan.c-wa, .logo-instagram .chan.c-ig, .logo-messenger .chan.c-ms{background-color:transparent; background-position:center; background-size:cover; background-repeat:no-repeat}
.logo-whatsapp .chan.c-wa{background-image:url("canais/whatsapp.svg")}
.logo-instagram .chan.c-ig{background-image:url("canais/instagram.svg")}
.logo-messenger .chan.c-ms{background-image:url("canais/messenger.svg")}
.logo-whatsapp .chan.c-wa .ic, .logo-instagram .chan.c-ig .ic, .logo-messenger .chan.c-ms .ic{display:none}
/* Menu sem prévias em Conhecimento e sem texto em Recursos */
.pn-con{width:min(420px, calc(100vw - 32px)); display:block}
.pn-foot.end{justify-content:flex-end}

/* ---------- Ajustes: jornadas arrastáveis ---------- */
.loop-track{padding-left:0}
.loop{cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none}
.loop.dragging{cursor:grabbing}
.loop a{-webkit-user-drag:none}
#jornadas .fl-ctrls{margin-top:8px}
@media (max-width:640px){ .loop-track{padding-left:0} }

/* ---------- Perfis: dica de clique ---------- */
.tabs-wrap{position:relative; display:inline-block; max-width:100%; margin-bottom:28px}
.tabs-wrap .tabs{margin-bottom:0}
.tab-hint{position:absolute; top:calc(100% + 8px); left:var(--hx, 50%); translate:-50% 0; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; opacity:0; transition:opacity .35s; z-index:4}
.tab-hint.on{opacity:1}
.tab-hint .ic{width:30px; height:30px; color:var(--ink); fill:#fff; stroke-width:1.6; filter:drop-shadow(0 4px 6px rgba(11,19,36,.25)); animation:tap 1.1s ease-in-out infinite}
.tab-hint span{font-size:12.5px; font-weight:650; background:var(--ink); color:#fff; padding:6px 11px; border-radius:9px; white-space:nowrap; box-shadow:var(--shadow-2)}
@keyframes tap{0%,100%{translate:0 6px} 50%{translate:0 -3px}}
.tab.nudge{animation:nudge 1.1s ease-in-out infinite}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(10,111,208,0)} 50%{box-shadow:0 0 0 6px rgba(10,111,208,.2); background:#eef5fd}}

/* ---------- Selos ---------- */
.seal img{max-width:100%; height:auto; max-height:86px; object-fit:contain}

.seal.dark{background:#0b1324; border-color:#0b1324}
.seal.dark .seal-ph{color:#c9d6ea}

/* ---------- Cabeçalho compacto ao rolar ---------- */
.header{height:var(--header-h)}
.header::before{transition:opacity .4s, border-color .3s, box-shadow .3s, background-color .3s}
.header-inner{border:1px solid transparent; border-radius:0; background-color:transparent; margin-inline:auto;
  transition:max-width .5s var(--ease), width .5s var(--ease), height .45s var(--ease), translate .45s var(--ease), padding .45s var(--ease), border-radius .45s var(--ease), background-color .4s, border-color .4s, box-shadow .4s, gap .45s var(--ease)}
.logo{position:relative; width:209px; height:34px; transition:width .5s var(--ease)}
.logo-full{transform-origin:left center; transition:opacity .3s, transform .45s var(--ease)}
.logo-ic{position:absolute; left:0; top:50%; width:34px; height:34px; translate:0 -50%; opacity:0; scale:.5; transition:opacity .35s .05s, scale .45s var(--ease)}
.nav-trigger{transition:color .2s, font-size .4s var(--ease), height .4s var(--ease), padding .4s var(--ease)}
.header-cta .btn-sm{transition:transform .25s var(--ease), box-shadow .25s var(--ease), height .4s var(--ease), font-size .4s var(--ease), padding .4s var(--ease)}

.header.compact::before{opacity:0}
.header.compact .header-inner{max-width:var(--pill-w, 980px); width:calc(100% - 32px); height:58px; translate:0 9px; gap:18px;
  padding-left:12px; padding-right:9px; border-radius:20px;
  background-color:rgba(246,249,255,.58); border-color:rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(18px) saturate(1.7); backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:0 12px 34px -14px rgba(11,40,90,.28), 0 0 0 1px rgba(10,111,208,.07), inset 0 1px 0 rgba(255,255,255,.7)}
.header.compact .logo{width:34px}
.header.compact .logo-full{opacity:0; transform:scale(.55)}
.header.compact .logo-ic{opacity:1; scale:1}
.header.compact .nav-trigger{font-size:14px; font-weight:500; height:36px; padding:0 12px; color:var(--ink-2)}
.header.compact .nav-trigger[aria-expanded="true"]{color:var(--blue)}
.header.compact .nav-pill{height:34px; border-radius:10px}
.header.compact .header-cta .btn-sm{height:38px; font-size:14px; padding:0 14px; border-radius:11px}
.header.compact .burger{width:40px; height:40px; background:rgba(255,255,255,.6)}
.header.compact .dd{top:calc(100% - 2px)}
@media (max-width:640px){
  .header.compact .header-inner{width:calc(100% - 20px); padding-left:10px; padding-right:7px; height:54px; translate:0 8px}
}

/* Selo que preenche todo o retângulo (enquadrado no desenho via data-focus) */
.seal.fill{position:relative; display:block; padding:0; overflow:hidden; border:0; background:var(--seal-bg, #0b1324)}
.seal.fill img{position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:cover; object-position:50% 50%}
.seal.fill .seal-ph{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; color:#c9d6ea}

/* Selo Reclame AQUI (modelo horizontal) */
.seal.ra-box{background:#f7f9fc}
.ra-seal{display:inline-flex; align-items:center; gap:14px; padding:12px 22px 12px 16px; border:1.5px solid #1d4f91; border-radius:10px; background:linear-gradient(90deg,#e9f1fb,#ffffff 70%); color:#2b3a4f; text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s}
a.ra-seal[href]:hover{transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(29,79,145,.5)}
.ra-ic{display:grid; place-items:center; width:38px; height:38px; flex:none}
.ra-ic img{width:38px; height:38px; max-height:none}
.ra-ic .ic{width:34px; height:34px; color:#1d4f91; stroke-width:2}
.ra-txt{display:flex; flex-direction:column; gap:3px; line-height:1.1}
.ra-txt > span{font-size:15px; font-weight:500; color:#3a4658}
.ra-txt img{width:115px; height:20px; max-height:none}
.ra-txt b{font-size:17px; font-weight:800; color:#1d4f91; letter-spacing:-.01em}

/* Logos oficiais de redes e lojas (assets/social/*), quando existirem */
.social .soc-logo{width:22px; height:22px; object-fit:contain; align-self:center; justify-self:center}
.social a:not(.has-logo) .soc-logo{display:none}
.social a.has-logo > svg{display:none}
.stores .store-badge{height:48px; width:auto; display:none}
.stores a.has-logo{padding:0; background:none!important; height:auto}
.stores a.has-logo .store-badge{display:block}
.stores a.has-logo > svg, .stores a.has-logo > span{display:none}

.foot-bottom a.foot-brandlink{color:inherit; font-size:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(10,111,208,.35)}
.foot-bottom a.foot-brandlink:hover{color:var(--blue); text-decoration-color:currentColor}

/* Modal de demonstração com YouTube (16:9) */
.modal.video{width:min(960px, calc(100vw - 24px)); background:#0b1324; color:#fff}
.modal.video .modal-in{gap:16px}
.demo-title{color:#fff; font-size:20px!important; padding-right:48px}
.modal.video .demo-vid{aspect-ratio:16/9; max-height:none; width:100%; border-radius:16px; background:#000}
.demo-vid iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.demo-foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px}
.demo-foot .link-arrow{color:#9fd2ff}
.demo-out{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; color:#dbe6f6; background:radial-gradient(60% 60% at 50% 40%, rgba(10,111,208,.35), transparent 70%), linear-gradient(160deg,#10213d,#1b1748)}
.demo-out b{font-size:20px; color:#fff}
.demo-out > span:last-child{font-size:13px; opacity:.8}
.demo-play{width:78px; height:78px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--blue); box-shadow:0 14px 40px -10px rgba(0,0,0,.6); transition:transform .25s var(--ease)}
.demo-play .ic{width:30px; height:30px; fill:currentColor; stroke:none; margin-left:4px}
.demo-out:hover .demo-play{transform:scale(1.07)}

/* Capa dos depoimentos: some o aviso quando há poster */
.vid video[poster]:not([poster=""]) ~ .vid-ph{display:none}
.vid video{background:#0b1324}
.vid::after{content:""; position:absolute; inset:auto 0 0; height:40%; background:linear-gradient(180deg,transparent,rgba(11,19,36,.35)); pointer-events:none; z-index:1; transition:opacity .3s}
.vid.playing::after{opacity:0}

.seal-link{text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s}
.seal-link:hover{transform:translateY(-2px); box-shadow:var(--shadow-2)}
.seal-link:not(.fill){display:grid; place-items:center}

/* Planos: implantação discreta, adicionais e nota de canal incluso */
.plan-setup{font-size:12px; color:var(--muted); margin-top:auto; padding-top:10px; border-top:1px dashed var(--line)}
.ptable .addon{font-size:12px; font-weight:600; color:var(--amber); background:#fff4e8; padding:3px 8px; border-radius:6px}
.ptable .txt.soft{font-weight:500; color:var(--muted); font-size:12.5px}
.inc-note{font-size:12px; font-weight:500; color:var(--mint)}
.pc-prices > div{order:2}
.pc-prices > .ann{order:1}

.stepper button:disabled{opacity:.35; cursor:not-allowed; background:transparent}

.pc-form .pc-want{width:100%; margin-top:8px}

/* Resumo travado da simulação no formulário de contratação */
.dg-summary.locked{background:var(--skybg); border:1px solid #d6e6f8}
.dg-summary .sum-title{display:block; font-size:13px; color:var(--blue-deep); margin-bottom:4px}
.lead-form .dg-summary{order:0}
/* cases com vídeo do YouTube */
.vid .vid-cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; background:#0b1324}
.vid .vid-cover ~ .vid-ph{display:none}
.vid iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4; background:#000}
.vid.yt-on .vid-btn, .vid.yt-on::after{display:none}
/* mais de 5 cases: rolagem lateral */
.cases.many{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:thin}
.cases.many .case{flex:0 0 calc((100% - 64px) / 5); scroll-snap-align:start}
@media (max-width:1100px){ .cases.many .case{flex-basis:clamp(200px, 30vw, 240px)} }

/* ---------- Mega-menu em telas baixas (notebooks com escala alta) ---------- */
.dd .panel{max-height:calc(100dvh - var(--header-h) - 32px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin}
.rec-stage .pv > .ui{zoom:.86}
@media (max-height:860px) and (min-width:1025px){
  .panel{padding:16px}
  .mi{padding:8px 10px}
  .mi-sm{padding:6px 10px}
  .mi-sm .mi-ic{width:30px; height:30px}
  .mi small{margin-top:1px}
  .pn-eyebrow{padding:2px 10px 6px}
  .pn-rec .pn-eyebrow{padding-top:8px}
  .pn-foot{padding:10px 14px}
  .stage{min-height:300px}
  .pn-con .stage{min-height:280px}
  .pn-seg .thumb{aspect-ratio:4/3.6}
}
/* textos grandes acompanham a altura da tela em notebooks */
@media (max-height:860px) and (min-width:1025px){
  .hero h1{font-size:clamp(2.6rem, min(6.4vw, 10.5vh), 5.6rem)}
  .sec-head h2{font-size:clamp(1.8rem, min(3.4vw, 5.6vh), 3rem)}
  .section{padding-block:clamp(36px, 5.5vh, 72px)}
}

/* Verificação antirrobô (Cloudflare Turnstile) nos formulários */
.ts-slot:not(:empty){margin:10px 0 4px; min-height:65px}
.ts-slot.ts-err{min-height:0; font-size:13px; color:#b4232c; background:#fff1f2; border:1px solid #fecdd3; border-radius:10px; padding:10px 12px}
.diag.sent .ts-slot{display:none}

/* ================= Página Recursos (explorador de uma tela) ================= */
/* templates novos (também usados no mega-menu) */
.bb.audio{display:flex; align-items:center; gap:8px; min-width:210px; background:#e9f7ef}
.bb.audio .ap{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--ch-wa); color:#fff; flex:none}
.bb.audio .ap .ic{width:11px; height:11px; fill:#fff; stroke:none}
.bb.audio small{font-size:9.5px; color:var(--muted)}
.wave.sm{height:22px; flex:1; padding:0; gap:2px}
.wave.sm i{background:linear-gradient(180deg,#4cc684,var(--ch-wa))}
.trn{background:#f7f6fe; border:1px solid #e8e4fb; border-radius:10px; padding:8px 10px; display:grid; gap:4px}
.trn .hd{display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; color:var(--violet)}
.trn .hd .ic{width:13px; height:13px}
.trn .txt{font-size:10.5px; line-height:1.5; color:var(--ink-2)}
.ig .bb.o{justify-self:end}
.ig .qr{display:grid; grid-template-columns:1fr 1fr; gap:6px}

.rx-page{min-height:calc(100svh - var(--header-h)); padding-block:clamp(16px, 2.6vh, 34px) 56px}
.rx-wrap{display:flex; flex-direction:column; gap:clamp(18px, 2.8vh, 30px)}

.rx-intro{display:flex; align-items:flex-end; justify-content:space-between; gap:16px 40px}
.rx-intro > div:first-child{flex:1; min-width:0}
.rx-intro h1{font-size:clamp(1.8rem, 2.8vw, 2.7rem); font-weight:800; letter-spacing:-.045em; line-height:1.04; margin-top:10px}
.rx-lede{margin-top:10px; color:var(--ink-2); font-size:clamp(1rem, 1.15vw, 1.1rem)}
.rx-tools{flex:none}

.rx-app{background:var(--surface); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow-2); overflow:hidden}
.rx-top{display:flex; justify-content:center; padding:14px 16px; border-bottom:1px solid var(--line-2)}
.rx-cats{position:relative; display:flex; gap:4px; padding:5px; border-radius:16px; background:var(--bg); border:1px solid var(--line-2); overflow-x:auto; scrollbar-width:none; max-width:100%}
.rx-cats::-webkit-scrollbar{display:none}
.rx-cat-ind{position:absolute; top:5px; bottom:5px; left:0; width:0; border-radius:12px; background:var(--surface); box-shadow:0 1px 2px rgba(11,19,36,.08), 0 4px 12px -4px rgba(11,19,36,.14); transition:left .4s var(--ease), width .4s var(--ease); z-index:0}
.rx-cat{position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:12px; font-size:15px; font-weight:600; color:var(--muted); white-space:nowrap; transition:color .2s}
.rx-cat .ic{width:18px; height:18px}
.rx-cat em{display:none}
.rx-cat:hover, .rx-cat[aria-selected="true"]{color:var(--ink)}

.rx-body{display:grid; grid-template-columns:clamp(230px, 21vw, 280px) 1fr}
.rx-list{display:flex; flex-direction:column; gap:6px; padding:20px 16px; border-right:1px solid var(--line-2)}
.rx-item{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:14px; border:1px solid transparent; transition:background-color .2s, border-color .2s, box-shadow .2s}
.rx-item .mi-ic{width:38px; height:38px; border-radius:12px}
.rx-item .mi-ic .ic{width:19px; height:19px}
.rx-item b{display:block; font-size:15px; font-weight:650; line-height:1.3}
.rx-item small{display:none}
.rx-item:hover{background:var(--bg)}
.rx-item.on{background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-1)}
.rx-item.on .mi-ic{transform:scale(1.06) rotate(-4deg); background:color-mix(in srgb, var(--c) 17%, white)}
.js-rx .rx-item[hidden]{display:none}

.rx-stage{min-width:0}
.rx-panels{display:grid}
.rx-panel{grid-area:1/1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas:"main vis" "how how"; gap:28px clamp(24px, 3vw, 48px); padding:clamp(24px, 3vw, 40px); align-content:start}
.js-rx .rx-panel{display:none}
.js-rx .rx-panel.on{display:grid; animation:rxFade .4s ease both}
@keyframes rxFade{from{opacity:0}}
.rx-main{grid-area:main; display:flex; flex-direction:column; justify-content:center; gap:18px; min-width:0}
.rx-head{display:flex; align-items:center; gap:14px}
.rx-head .mi-ic{width:48px; height:48px; border-radius:15px}
.rx-head .mi-ic .ic{width:23px; height:23px}
.rx-kicker{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c)}
.rx-head h2{font-size:clamp(1.6rem, 2.2vw, 2.1rem); font-weight:800; letter-spacing:-.035em; margin-top:3px}
.rx-ben{font-size:clamp(1.05rem, 1.25vw, 1.2rem); line-height:1.55; color:var(--ink)}
.rx-case{padding:16px 18px; border-radius:16px; background:color-mix(in srgb, var(--c) 6%, white); border:1px solid color-mix(in srgb, var(--c) 14%, white)}
.rx-case b{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--c); margin-bottom:6px}
.rx-case b .ic{width:14px; height:14px}
.rx-case p{font-size:15px; line-height:1.6; color:var(--ink-2)}

.rx-how{grid-area:how; min-width:0}
.rx-how > b{display:block; font-size:12px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.rx-how ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}
.rx-how li{display:grid; grid-template-columns:28px 1fr; align-items:start; gap:12px; font-size:14.5px; line-height:1.5; color:var(--ink-2)}
.rx-how li > span{width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-size:13px; font-weight:750; color:var(--c); background:color-mix(in srgb, var(--c) 11%, white)}

.rx-vis{grid-area:vis; position:relative; border-radius:22px; overflow:hidden; display:grid; place-items:center; padding:24px; height:clamp(260px, 36vh, 340px);
  background:radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--c) 16%, white), transparent 60%), radial-gradient(90% 80% at 0% 100%, #eef5fd, transparent 65%), #f7f9fc; border:1px solid var(--line-2)}
.rx-vis::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(11,19,36,.07) 1px, transparent 1px); background-size:16px 16px; mask-image:linear-gradient(180deg,#000,transparent 90%); -webkit-mask-image:linear-gradient(180deg,#000,transparent 90%)}
.rx-ui{position:relative; width:100%; display:grid; place-items:center}
.rx-ui > .ui{margin-inline:auto}
.rx-video{position:absolute; right:14px; bottom:14px; z-index:2; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px 0 6px; border-radius:999px; background:rgba(11,19,36,.86); color:#fff; font-size:13px; font-weight:650; box-shadow:var(--shadow-2); backdrop-filter:blur(6px); transition:transform .25s var(--ease)}
.rx-video span{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--ink)}
.rx-video .ic{width:12px; height:12px; fill:currentColor; stroke:none; translate:1px 0}
.rx-video:hover{transform:translateY(-2px)}

@media (prefers-reduced-motion:no-preference){
  .rx-vis.play [data-step]{animation:rxIn .55s var(--ease) both; animation-delay:calc(var(--i) * 140ms + 120ms)}
  .rx-vis.play .ui-win{animation:rxWin .6s var(--ease) both}
}
@keyframes rxIn{from{opacity:0; translate:0 10px; scale:.97}}
@keyframes rxWin{from{opacity:0; translate:0 16px; scale:.96}}

html:not(.js-rx) .rx-panel{grid-area:auto; border-bottom:1px solid var(--line-2)}

@media (max-width:1180px) and (min-width:861px){
  .rx-cat{padding:0 12px; font-size:14px}
  .rx-panel{grid-template-columns:1fr; grid-template-areas:"vis" "main" "how"}
  .rx-how ol{grid-template-columns:1fr}
}
@media (max-width:860px){
  .rx-intro{flex-direction:column; align-items:stretch}
  .rx-app{border-radius:20px}
  .rx-top{padding:10px; justify-content:flex-start}
  .rx-cats{width:100%}
  .rx-body{grid-template-columns:1fr}
  .rx-list{flex-direction:row; overflow-x:auto; scrollbar-width:none; border-right:0; border-bottom:1px solid var(--line-2); padding:12px; gap:8px}
  .rx-list::-webkit-scrollbar{display:none}
  .rx-item{flex:none; padding:6px 14px 6px 6px; border-color:var(--line); background:var(--surface)}
  .rx-item .mi-ic{width:30px; height:30px; border-radius:9px}
  .rx-item b{font-size:14px; white-space:nowrap}
  .rx-item.on{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset}
  .rx-panel{grid-template-columns:1fr; grid-template-areas:"vis" "main" "how"; padding:18px; gap:20px}
  .rx-vis{height:auto; padding:24px 14px}
  .rx-how ol{grid-template-columns:1fr; gap:12px}
}
@media (max-height:820px) and (min-width:861px){
  .rx-page{padding-top:14px}
  .rx-wrap{gap:18px}
  .rx-intro .eyebrow{display:none}
  .rx-intro h1{margin-top:0; font-size:clamp(1.6rem, 2.3vw, 2.2rem)}
  .rx-lede{margin-top:6px}
  .rx-top{padding:10px 16px}
  .rx-panel{padding:22px 28px; gap:20px 36px}
  .rx-main{gap:14px}
  .rx-ben{font-size:1.02rem}
  .rx-case{padding:12px 16px}
  .rx-case p{font-size:14px}
  .rx-vis{height:clamp(230px, 34vh, 280px)}
  .rx-how > b{margin-bottom:8px}
}
/* Vantagens (em vez de "Como funciona") */
.rx-how.adv ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px 22px}
.rx-how.adv li{display:grid; grid-template-columns:26px 1fr; gap:11px; align-items:start; font-size:14px; line-height:1.45; color:var(--ink-2)}
.rx-how.adv li > span{width:26px; height:26px; border-radius:9px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb, var(--c) 12%, white)}
.rx-how.adv li > span .ic{width:15px; height:15px; stroke-width:2.4}
.rx-how.adv li b{display:block; color:var(--ink); font-weight:650; font-size:14.5px; margin-bottom:2px}
@media (max-width:1180px){ .rx-how.adv ul{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:860px){ .rx-how.adv ul{grid-template-columns:1fr; gap:12px} }
/* template: Flow do WhatsApp */
.flw{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 11px; display:grid; gap:8px; box-shadow:0 1px 2px rgba(11,19,36,.04)}
.flw-t{font-size:12px; font-weight:700}
.flw-f{display:grid; gap:4px}
.flw-f small{font-size:9.5px; font-weight:600; color:var(--muted)}
.flw-in{font-size:10.5px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:#fbfcfe}
.flw-opts{display:flex; gap:5px}
.flw-opts i{font-style:normal; flex:1; text-align:center; font-size:10px; font-weight:600; padding:5px 4px; border-radius:8px; border:1px solid var(--line); color:var(--ink-2)}
.flw-opts i.on{border-color:var(--ch-wa); background:#e9f7ef; color:#13803f}
.flw-btn{display:block; text-align:center; font-size:10.5px; font-weight:700; color:#fff; background:var(--ch-wa); border-radius:9px; padding:7px}

/* ================= Páginas legais (Privacidade, Termos) ================= */
.lg-page{padding-block:clamp(28px, 5vh, 56px) 80px}
.lg-hero{max-width:820px}
.lg-hero h1{font-size:clamp(2rem, 3.6vw, 3.1rem); font-weight:800; letter-spacing:-.045em; margin-top:12px}
.lg-lede{margin-top:14px; font-size:clamp(1.02rem, 1.25vw, 1.15rem); line-height:1.6; color:var(--ink-2); max-width:62ch}
.lg-meta{margin-top:12px; font-size:13.5px; color:var(--muted)}

.lg-sum{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:clamp(24px, 4vh, 40px)}
.lg-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow-1)}
.lg-card > .ic{width:22px; height:22px; color:var(--blue)}
.lg-card b{display:block; margin-top:10px; font-size:15.5px}
.lg-card p{margin-top:4px; font-size:14px; line-height:1.5; color:var(--ink-2)}
.lg-card a{color:var(--blue); font-weight:600; word-break:break-word}

.lg-grid{display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(28px, 4vw, 64px); margin-top:clamp(32px, 5vh, 56px); align-items:start}
.lg-toc{position:sticky; top:calc(var(--header-h) + 24px); max-height:calc(100vh - var(--header-h) - 48px); overflow:auto; scrollbar-width:thin}
.lg-toc-t{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.lg-toc ol{list-style:none; margin:0; padding:0; display:grid; gap:2px; border-left:2px solid var(--line-2)}
.lg-toc a{display:block; padding:6px 12px; margin-left:-2px; border-left:2px solid transparent; font-size:14px; color:var(--muted); transition:color .2s, border-color .2s}
.lg-toc a:hover{color:var(--ink)}
.lg-toc a.on{color:var(--blue); border-left-color:var(--blue); font-weight:600}

.lg-doc{max-width:760px; background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:clamp(22px, 3.4vw, 48px); box-shadow:var(--shadow-1)}
.lg-doc section + section{margin-top:36px; padding-top:32px; border-top:1px solid var(--line-2)}
.lg-doc section{scroll-margin-top:calc(var(--header-h) + 20px)}
.lg-doc h2{display:flex; align-items:center; gap:12px; font-size:clamp(1.3rem, 1.8vw, 1.55rem); font-weight:750; letter-spacing:-.03em}
.lg-doc h2 span{width:32px; height:32px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:14px; font-weight:750; color:var(--blue); background:#eaf3fc; letter-spacing:0}
.lg-doc h3{font-size:1.05rem; font-weight:700; letter-spacing:-.01em; margin-top:20px}
.lg-doc p, .lg-doc li{font-size:16px; line-height:1.7; color:var(--ink-2)}
.lg-doc p{margin-top:12px}
.lg-doc b{color:var(--ink)}
.lg-doc a{color:var(--blue); text-decoration:underline; text-underline-offset:3px}
.lg-doc ul{margin:12px 0 0; padding-left:20px; display:grid; gap:8px}
.lg-doc li::marker{color:var(--blue)}
.lg-doc .btn{text-decoration:none}
.lg-note{padding:12px 16px; border-radius:12px; background:#f5f8fc; border:1px solid var(--line-2); font-size:14.5px!important}
.lg-rights{gap:4px!important}
.lg-table{margin-top:14px; overflow-x:auto; border:1px solid var(--line); border-radius:14px}
.lg-table table{width:100%; border-collapse:collapse; font-size:14.5px; line-height:1.5}
.lg-table th{text-align:left; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:#f7f9fc; padding:11px 14px; border-bottom:1px solid var(--line)}
.lg-table td{padding:12px 14px; border-bottom:1px solid var(--line-2); color:var(--ink-2); vertical-align:top}
.lg-table tr:last-child td{border-bottom:0}
.lg-contact{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px}
.lg-contact p{margin:0; padding:16px 18px; border-radius:16px; border:1px solid var(--line); background:#fbfcfe; display:grid; gap:2px}
.lg-contact small{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.lg-contact b{font-size:16px}
.lg-contact span{font-size:14.5px; line-height:1.55}

@media (max-width:1024px){
  .lg-sum{grid-template-columns:1fr 1fr}
  .lg-grid{grid-template-columns:minmax(0,1fr)}
  .lg-toc{display:none}
  .lg-doc{max-width:none}
}
@media (max-width:640px){
  .lg-sum{grid-template-columns:1fr}
  .lg-contact{grid-template-columns:1fr}
  .lg-doc{border-radius:18px}
  .lg-doc p, .lg-doc li{font-size:15.5px}
}

/* ================= Página Parcerias ================= */
.pc-page{padding-block:clamp(28px, 5vh, 60px) 80px}
.pc-hero{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px, 5vw, 72px); align-items:center; min-height:min(560px, calc(100svh - var(--header-h) - 120px))}
.pc-hero h1{font-size:clamp(2.3rem, 4.6vw, 4rem); font-weight:800; letter-spacing:-.05em; line-height:1; margin-top:14px}
.pc-lede{margin-top:18px; font-size:clamp(1.05rem, 1.35vw, 1.2rem); line-height:1.6; color:var(--ink-2); max-width:54ch}
.pc-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.pc-hero-vis{position:relative; display:grid; place-items:center; padding:40px 20px 92px; border-radius:32px; background:radial-gradient(110% 90% at 90% 0%, #ece8ff, transparent 60%), radial-gradient(90% 80% at 0% 100%, #e3f1fc, transparent 65%), #f7f9fc; border:1px solid var(--line-2)}
.pc-ui{max-width:380px; font-size:13px}
.pc-flow{padding:18px 18px 8px 22px}
.pc-flow li{font-size:13px; padding-bottom:16px}
.pc-flow li b{display:block; font-size:13.5px; text-transform:none; letter-spacing:0; color:var(--ink)}
.pc-flow li.now span{color:inherit; font-weight:inherit}
.pc-flow li small{display:block; font-size:12px; color:var(--muted); margin-top:1px}
.pc-flow li.now i{border-color:var(--blue); box-shadow:0 0 0 4px rgba(10,111,208,.15)}
.pc-badge{position:absolute; left:clamp(16px, 3vw, 40px); bottom:24px; display:flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border-radius:16px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-2)}
.pc-badge > .ic{width:36px; height:36px; padding:8px; border-radius:11px; color:var(--mint); background:#e6f6f0}
.pc-badge b{display:block; font-size:14px}
.pc-badge small{display:block; font-size:12px; color:var(--muted)}

.pc-sec{margin-top:clamp(64px, 10vh, 112px)}
.pc-head{max-width:720px; margin-bottom:clamp(24px, 4vh, 40px)}
.pc-head h2{font-size:clamp(1.8rem, 3vw, 2.6rem); font-weight:800; letter-spacing:-.045em; margin-top:12px}
.pc-head p:not(.eyebrow){margin-top:12px; font-size:1.08rem; color:var(--ink-2); line-height:1.6}

.pc-models{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.pc-model{display:flex; flex-direction:column; gap:18px; padding:clamp(22px, 2.6vw, 36px); border-radius:26px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-1); position:relative; overflow:hidden}
.pc-model::before{content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--c)}
.pc-model header{display:flex; align-items:center; gap:14px}
.pc-model h3{font-size:1.7rem; font-weight:800; letter-spacing:-.035em; margin-top:6px}
.pc-ic{width:52px; height:52px; flex:none; border-radius:16px; display:grid; place-items:center; color:var(--c, var(--blue)); background:color-mix(in srgb, var(--c, var(--blue)) 11%, white)}
.pc-ic .ic{width:24px; height:24px}
.pc-ic.sm{width:44px; height:44px; border-radius:13px}
.pc-ic.sm .ic{width:21px; height:21px}
.pc-one{font-size:1.15rem; font-weight:600; color:var(--ink)}
.pc-model dl{margin:0; display:grid; gap:14px}
.pc-model dl div{display:grid; grid-template-columns:130px 1fr; gap:14px; padding-top:14px; border-top:1px solid var(--line-2)}
.pc-model dt{font-size:12px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--c); padding-top:3px}
.pc-model dd{margin:0; font-size:15px; line-height:1.55; color:var(--ink-2)}
.pc-model .btn{align-self:flex-start; margin-top:auto}
.pc-btn-v{background:linear-gradient(180deg,#7b6cf0,#5a4bd6); box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -8px rgba(90,75,214,.55)}

.pc-split{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:20px; align-items:stretch}
.pc-table{overflow-x:auto; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--shadow-1)}
.pc-table table{width:100%; border-collapse:collapse; font-size:15px}
.pc-table th{text-align:left; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:16px 18px; border-bottom:1px solid var(--line); background:#f8fafc}
.pc-table td{padding:13px 18px; border-bottom:1px solid var(--line-2); color:var(--ink)}
.pc-table tr:last-child td{border-bottom:0}
.who{display:inline-flex; align-items:center; height:28px; padding:0 11px; border-radius:999px; font-size:13px; font-weight:650; white-space:nowrap}
.who.you{background:#eaf3fc; color:var(--blue-deep)}
.who.cs{background:#f0edff; color:#5a4bd6}
.who.both{background:#e6f6f0; color:#0d7e5b}
.pc-promise{padding:clamp(22px, 2.6vw, 32px); border-radius:22px; background:var(--night); color:var(--on-night); display:flex; flex-direction:column; gap:12px; justify-content:center}
.pc-promise > .ic{width:40px; height:40px; padding:9px; border-radius:12px; color:#7ee0bd; background:rgba(126,224,189,.12)}
.pc-promise h3{font-size:1.5rem; font-weight:800; letter-spacing:-.03em; color:#fff}
.pc-promise p{font-size:15px; line-height:1.6; color:var(--on-night-2)}

.pc-grid4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
.pc-card{padding:22px; border-radius:20px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-1); display:flex; flex-direction:column; gap:10px; transition:transform .3s var(--ease), box-shadow .3s}
.pc-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}
.pc-card b{font-size:16.5px; margin-top:4px}
.pc-card p{font-size:14.5px; line-height:1.55; color:var(--ink-2)}

.pc-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; position:relative}
.pc-steps li{position:relative; padding:22px; border-radius:20px; background:var(--surface); border:1px solid var(--line)}
.pc-steps li > span{width:40px; height:40px; border-radius:13px; display:grid; place-items:center; font-family:var(--f-display); font-weight:800; font-size:17px; color:#fff; background:var(--grad)}
.pc-steps b{display:block; margin-top:14px; font-size:16.5px}
.pc-steps p{margin-top:6px; font-size:14.5px; line-height:1.55; color:var(--ink-2)}

.pc-final{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:clamp(28px, 4vw, 56px); border-radius:30px; color:#fff; background:radial-gradient(120% 140% at 100% 0%, rgba(107,92,231,.55), transparent 55%), linear-gradient(120deg, #0657a8, #0a6fd0 55%, #0a9fdc)}
.pc-final h2{font-size:clamp(1.8rem, 3vw, 2.6rem); font-weight:800; letter-spacing:-.045em}
.pc-final p{margin-top:10px; font-size:1.08rem; color:rgba(255,255,255,.85)}

@media (max-width:1024px){
  .pc-hero{grid-template-columns:1fr; min-height:0}
  .pc-models, .pc-split{grid-template-columns:1fr}
  .pc-grid4, .pc-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pc-grid4, .pc-steps{grid-template-columns:1fr}
  .pc-model dl div{grid-template-columns:1fr; gap:4px}
  .pc-badge{position:static; margin-top:14px}
  .pc-hero-vis{padding:24px 14px}
  .pc-table td, .pc-table th{padding:11px 12px}
  .pc-final .btn{width:100%}
}

/* ================= Comparativos ================= */
.cp-page{padding-block:clamp(20px, 3.5vh, 40px) 80px}
.cp-crumb{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--muted); margin-bottom:clamp(14px, 3vh, 28px)}
.cp-crumb a{color:var(--blue); font-weight:600}
.cp-crumb .ic{width:14px; height:14px; rotate:-90deg}
.cp-hero{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(24px, 4vw, 64px); align-items:center}
.cp-hero h1{font-size:clamp(2.2rem, 4.4vw, 3.8rem); font-weight:800; letter-spacing:-.05em; line-height:1.02; margin-top:12px}
.cp-lede{margin-top:16px; font-size:clamp(1.05rem, 1.3vw, 1.18rem); line-height:1.6; color:var(--ink-2); max-width:58ch}
.cp-intro{margin-top:12px; font-size:15px; line-height:1.6; color:var(--muted); max-width:62ch}
.cp-vs{display:flex; align-items:center; justify-content:center; gap:14px; padding:clamp(24px, 4vw, 44px) 18px; border-radius:30px; background:radial-gradient(110% 90% at 90% 0%, #ece8ff, transparent 60%), radial-gradient(90% 80% at 0% 100%, #e3f1fc, transparent 65%), #f7f9fc; border:1px solid var(--line-2)}
.cp-tile{display:flex; flex-direction:column; align-items:center; gap:12px; width:clamp(130px, 13vw, 168px); padding:22px 12px; border-radius:22px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-2); text-align:center}
.cp-tile b{font-size:15px; line-height:1.2}
.cp-tile.us{border-color:#b8d5f3; box-shadow:0 0 0 4px rgba(10,111,208,.08), var(--shadow-2)}
.cp-logo{width:56px; height:56px}
.cp-initial{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-family:var(--f-display); font-weight:800; font-size:26px; color:var(--ink-2); background:var(--line-2)}
.cp-tile.sm{width:auto; padding:0; border:0; box-shadow:none; background:none; align-items:flex-start}
.cp-tile.sm .cp-initial{width:44px; height:44px; font-size:20px; border-radius:13px}
.cp-x{font-family:var(--f-display); font-weight:700; font-size:15px; color:var(--muted); width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line)}

.cp-sum{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:clamp(32px, 6vh, 56px)}
.cp-box{padding:clamp(20px, 2.4vw, 30px); border-radius:24px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-1)}
.cp-box.us{border-color:#cfe2f6; background:linear-gradient(180deg, #f3f8fe, #fff 60%)}
.cp-box h2{font-size:1.3rem; font-weight:750; letter-spacing:-.025em}
.cp-box ul{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px}
.cp-box li{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:15.5px; line-height:1.55; color:var(--ink-2)}
.cp-box li .ic{width:20px; height:20px; margin-top:2px; color:var(--mint); stroke-width:2.2}
.cp-box.them li .ic{color:var(--muted)}

.cp-sec{margin-top:clamp(56px, 9vh, 96px)}
.cp-legend{display:flex; flex-wrap:wrap; gap:8px 20px; margin:-8px 0 14px; font-size:13.5px; color:var(--muted)}
.cp-legend span{display:inline-flex; align-items:center; gap:7px}
.cp-mark{width:22px; height:22px; border-radius:7px; display:inline-grid; place-items:center; flex:none}
.cp-mark .ic{width:14px; height:14px; stroke-width:2.6}
.cp-mark.yes{background:#e3f6ee; color:#0f8a5f}
.cp-mark.part{background:#fdf1e2; color:#b86a12}
.cp-mark.no{background:#fde8ee; color:#c23a63}
.cp-mark.na{background:var(--line-2); color:var(--muted)}
.cp-table{overflow-x:auto; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:var(--shadow-1)}
.cp-table table{width:100%; border-collapse:collapse; min-width:620px}
.cp-table thead th{position:sticky; top:0; text-align:left; font-size:13px; font-weight:750; letter-spacing:.02em; padding:16px 20px; background:#f8fafc; border-bottom:1px solid var(--line); color:var(--ink)}
.cp-table thead th.us{color:var(--blue)}
.cp-table thead th:first-child{width:30%; color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.cp-table tbody th{text-align:left; font-weight:600; font-size:15px; padding:13px 20px; color:var(--ink); border-bottom:1px solid var(--line-2)}
.cp-g th{padding:18px 20px 8px!important; font-size:12px!important; font-weight:750!important; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)!important; background:#fbfcfe}
.cp-c{padding:13px 20px; border-bottom:1px solid var(--line-2); vertical-align:top}
.cp-c{font-size:14.5px; line-height:1.45; color:var(--ink-2)}
.cp-c:has(.cp-mark){display:table-cell}
.cp-c > .cp-mark{margin-right:10px; vertical-align:-5px}
.cp-c.info{font-weight:500}
tbody tr:last-child .cp-c, tbody tr:last-child th{border-bottom:0}
.cp-c:nth-child(2){background:rgba(10,111,208,.03)}

.cp-final-btns{display:flex; gap:12px; flex-wrap:wrap}
.cp-btn-line{color:#fff; border:1px solid rgba(255,255,255,.55); background:transparent}
.cp-btn-line:hover{background:rgba(255,255,255,.12)}

.cp-method{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(24px, 4vw, 56px); padding:clamp(22px, 3vw, 36px); border-radius:24px; background:var(--surface); border:1px solid var(--line)}
.cp-method h2{font-size:1.3rem; font-weight:750; letter-spacing:-.025em}
.cp-method p{margin-top:10px; font-size:15px; line-height:1.65; color:var(--ink-2)}
.cp-method .linklike{color:var(--blue); font-weight:600; font-size:15px; text-decoration:underline; text-underline-offset:3px}
.cp-src ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.cp-src a{font-size:14px; color:var(--blue); word-break:break-word}
.cp-src a:hover{text-decoration:underline}

.cp-others > div{display:flex; flex-wrap:wrap; gap:10px}
.cp-other{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:12px; background:var(--surface); border:1px solid var(--line); font-size:14.5px; font-weight:600; transition:border-color .2s, transform .2s}
.cp-other .ic{width:16px; height:16px; color:var(--blue)}
.cp-other:hover{border-color:#b8d5f3; transform:translateY(-2px)}

.cp-cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:clamp(28px, 5vh, 48px)}
.cp-card{display:flex; flex-direction:column; gap:10px; padding:24px; border-radius:22px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-1); transition:transform .3s var(--ease), box-shadow .3s}
.cp-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}
.cp-card b{font-size:17px; margin-top:6px}
.cp-card p{font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.cp-more{margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:650; color:var(--blue)}
.cp-more .ic{width:16px; height:16px}

@media (max-width:1024px){
  .cp-hero, .cp-method{grid-template-columns:1fr}
  .cp-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .cp-sum, .cp-cards{grid-template-columns:1fr}
  .cp-vs{gap:8px; padding:20px 10px}
  .cp-tile{width:auto; flex:1; padding:16px 8px}
  .cp-table table{min-width:0}
  .cp-table thead th:first-child{display:none}
  .cp-table tbody tr:not(.cp-g){display:grid; grid-template-columns:1fr 1fr}
  .cp-table tbody tr:not(.cp-g) th{grid-column:1/-1; padding:12px 14px 4px; border-bottom:0}
  .cp-c{padding:6px 14px 12px; font-size:13.5px}
  .cp-c > .cp-mark{display:flex; margin:0 0 6px}
  .cp-table thead tr{display:grid; grid-template-columns:1fr 1fr}
  .cp-table thead th{padding:12px 14px}
  .cp-g th{padding:16px 14px 6px!important}
}

/* ================= Blog e Materiais ================= */
.bl-page, .mt-page{padding-block:clamp(24px, 4vh, 48px) 80px}
.bl-hero{display:flex; align-items:flex-end; justify-content:space-between; gap:20px 40px; flex-wrap:wrap}
.bl-hero > div{max-width:820px}
.bl-hero h1{font-size:clamp(2rem, 3.8vw, 3.3rem); font-weight:800; letter-spacing:-.045em; line-height:1.04; margin-top:12px}
.bl-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:clamp(22px, 4vh, 36px)}
.bl-chip{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 15px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:14px; font-weight:600; color:var(--ink-2); transition:background-color .2s, color .2s, border-color .2s}
.bl-chip .ic{width:16px; height:16px}
.bl-chip:hover{border-color:#c9d5e6}
.bl-chip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.bl-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin-top:22px}
.bl-grid.two{grid-template-columns:1fr 1fr}
.bl-card{display:flex; flex-direction:column; border-radius:24px; overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-1); transition:transform .3s var(--ease), box-shadow .3s}
.bl-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}
.bl-card[hidden]{display:none}
.bl-thumb{position:relative; display:grid; place-items:center; height:210px; overflow:hidden; background:radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--c) 18%, white), transparent 60%), #f6f9fc; border-bottom:1px solid var(--line-2)}
.bl-ui{width:100%; display:grid; place-items:center; padding:0 22px; zoom:.78; pointer-events:none}
.bl-grid.idx{grid-template-columns:1fr 1fr}
.bl-ui > .ui{margin-inline:auto}
.bl-body{display:flex; flex-direction:column; gap:8px; padding:20px 22px 22px; flex:1}
.bl-cat{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--c)}
.bl-cat .ic{width:15px; height:15px}
.bl-body > b{font-family:var(--f-display); font-size:1.2rem; line-height:1.25; letter-spacing:-.02em}
.bl-desc{font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.bl-meta{margin-top:auto; padding-top:6px; font-size:13px; color:var(--muted)}
.bl-card.big{grid-column:1/-1; flex-direction:row}
.bl-card.big .bl-thumb{flex:0 0 52%; height:auto; min-height:300px; border-bottom:0; border-right:1px solid var(--line-2)}
.bl-card.big .bl-ui{zoom:1}
.bl-card.big .bl-body{padding:clamp(24px, 3vw, 40px); justify-content:center}
.bl-card.big .bl-body > b{font-size:clamp(1.5rem, 2.2vw, 2rem)}
.bl-card.big .bl-desc{font-size:16px}
.bl-empty{margin-top:20px; color:var(--muted)}

.bl-article{max-width:760px; margin-inline:auto}
.bl-ahead h1{font-size:clamp(2rem, 3.6vw, 3rem); font-weight:800; letter-spacing:-.045em; line-height:1.06; margin-top:12px}
.bl-lead{margin-top:16px; font-size:clamp(1.08rem, 1.3vw, 1.22rem); line-height:1.6; color:var(--ink-2)}
.bl-ahead .bl-meta{margin-top:14px; display:block}
.bl-post .cp-crumb{max-width:760px; margin-inline:auto}
.bl-text{margin-top:32px; padding-top:28px; border-top:1px solid var(--line)}
.bl-text h2{font-size:clamp(1.35rem, 2vw, 1.65rem); font-weight:750; letter-spacing:-.03em; margin-top:36px}
.bl-text p, .bl-text li{font-size:17px; line-height:1.75; color:var(--ink-2)}
.bl-text p{margin-top:14px}
.bl-text b{color:var(--ink)}
.bl-text ul, .bl-text ol{margin:14px 0 0; padding-left:22px; display:grid; gap:10px}
.bl-text li::marker{color:var(--c); font-weight:700}
.bl-cta{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:40px; padding:22px 24px; border-radius:20px; background:color-mix(in srgb, var(--c) 7%, white); border:1px solid color-mix(in srgb, var(--c) 18%, white)}
.bl-cta b{font-size:17px}
.bl-cta p{margin-top:4px; font-size:14.5px; color:var(--ink-2)}
.bl-cta-btns{display:flex; gap:10px; flex-wrap:wrap}
.bl-related{max-width:1000px; margin:clamp(56px, 9vh, 88px) auto 0}
.bl-related h2{font-size:1.5rem; font-weight:750; letter-spacing:-.03em}

.mt-sec{margin-top:clamp(40px, 7vh, 72px)}
.mt-h{display:flex; align-items:center; gap:10px; font-size:clamp(1.35rem, 2vw, 1.7rem); font-weight:750; letter-spacing:-.03em; margin-bottom:18px}
.mt-h .ic{width:24px; height:24px; color:var(--blue)}
.mt-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px}
.mt-card{display:flex; flex-direction:column; gap:10px; padding:24px; border-radius:22px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-1); transition:transform .3s var(--ease), box-shadow .3s}
.mt-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}
.mt-card b{font-size:17px; margin-top:4px}
.mt-card p{font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.mt-split{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px}
.mt-video{display:flex; align-items:flex-end; gap:18px; min-height:240px; padding:28px; border-radius:24px; text-align:left; color:#fff; background:radial-gradient(120% 140% at 100% 0%, rgba(107,92,231,.6), transparent 55%), linear-gradient(120deg, #08111f, #0f1c33); box-shadow:var(--shadow-2); transition:transform .3s var(--ease)}
.mt-video:hover{transform:translateY(-3px)}
.mt-play{width:64px; height:64px; flex:none; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--ink); box-shadow:0 0 0 10px rgba(255,255,255,.12)}
.mt-play .ic{width:24px; height:24px; fill:currentColor; stroke:none; translate:2px 0}
.mt-video small{display:block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#9fb0c9}
.mt-video b{display:block; font-family:var(--f-display); font-size:1.6rem; letter-spacing:-.03em; margin-top:4px}
.mt-video span > span{display:block; margin-top:4px; color:#c7d3e6}
.mt-more{margin-top:18px}
.mt-two{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px}
.mt-web{padding:clamp(24px, 3vw, 36px); border-radius:24px; background:linear-gradient(135deg,#f3f0ff,#eef5fd); border:1px solid #e1e3f6; display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.mt-web h2{font-size:clamp(1.4rem, 2.2vw, 1.9rem); font-weight:800; letter-spacing:-.035em}
.mt-web p{font-size:15.5px; line-height:1.6; color:var(--ink-2); max-width:56ch}
.mt-web .btn{margin-top:6px}

@media (max-width:1024px){
  .bl-grid, .mt-grid{grid-template-columns:1fr 1fr}
  .bl-card.big{flex-direction:column}
  .bl-card.big .bl-thumb{flex:none; min-height:240px; border-right:0; border-bottom:1px solid var(--line-2)}
  .mt-split, .mt-two{grid-template-columns:1fr}
}
@media (max-width:640px){
  .bl-grid, .bl-grid.two, .mt-grid{grid-template-columns:1fr}
  .bl-text p, .bl-text li{font-size:16px}
  .bl-ui{zoom:.72}
  .bl-grid.idx{grid-template-columns:1fr}
  .bl-cta-btns .btn{flex:1}
}
.bl-thumb.has-img{padding:0}
.bl-thumb.has-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bl-cover{margin:28px 0 0; border-radius:20px; overflow:hidden; border:1px solid var(--line)}
.bl-cover img{width:100%; height:auto; display:block}
.bl-draft{position:sticky; top:0; z-index:40; padding:10px 16px; text-align:center; font-size:14px; font-weight:600; color:#7a4a05; background:#fff4dc; border-bottom:1px solid #f3dca6}
.bl-text blockquote{margin:18px 0 0; padding:12px 18px; border-left:3px solid var(--c); background:#f7f9fc; border-radius:0 12px 12px 0}
.bl-text a{color:var(--blue); text-decoration:underline; text-underline-offset:3px}

:root{--hero-photo:url('hero-equipe.jpg')}