/* LOMON v2 — camada de upgrade sobre o design system v1.
   Tudo aqui é aditivo: sem JS ou com "reduzir movimento", a página v1 continua igual. */

/* ---------- barra de progresso da rolagem ---------- */
.scroll-progress{position:fixed;inset:0 0 auto;height:2px;z-index:200;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--brand-lime-secondary),var(--brand-lime),#E9FFA8);box-shadow:0 0 12px rgba(198,240,77,.6)}

/* ---------- brilho que segue o cursor ---------- */
.cursor-glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(198,240,77,.07),transparent 62%);opacity:0;transition:opacity .4s;will-change:transform}
html.has-pointer .cursor-glow{opacity:1}
:root[data-theme="light"] .cursor-glow{background:radial-gradient(circle,rgba(143,209,79,.10),transparent 62%)}

/* ---------- rede neural no fundo do herói ---------- */
.hero{position:relative}
.hero-net{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9;
  mask-image:radial-gradient(ellipse 85% 80% at 65% 35%,#000 30%,transparent 85%)}

/* ---------- título palavra por palavra ---------- */
.split-word{display:inline-block;will-change:transform,filter,opacity}
html.js-upgrade .hero h1 .split-word{opacity:0;filter:blur(14px);transform:translateY(18px)}
html.js-upgrade .hero h1.is-split-in .split-word{opacity:1;filter:blur(0);transform:none;
  transition:opacity .8s var(--ease),filter .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i) * 65ms + 250ms)}
.hero h1 .heading-highlight .split-word{text-shadow:0 0 28px rgba(198,240,77,.35)}

/* ---------- botão do menu com borda girando ---------- */
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin-border{to{--spin:360deg}}
.btn-nav{position:relative;isolation:isolate}
.btn-nav::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--spin),#C6F04D,#4DE0C6,#8FD14F,#F0E14D,#C6F04D);animation:spin-border 3.5s linear infinite;filter:blur(.5px)}
.btn-nav::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:var(--brand-lime)}

/* ---------- botões magnéticos ---------- */
.magnetic{transition:transform .25s var(--ease),background var(--duration-fast),box-shadow var(--duration-base)}

/* ---------- cards de serviço com spotlight ---------- */
.service-card{overflow:hidden;isolation:isolate}
.service-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(198,240,77,.12),transparent 45%)}
.service-card:hover::after{opacity:1}
.service-card .service-icon{transition:transform .5s var(--ease),box-shadow .5s}
.service-card:hover .service-icon{transform:rotate(-8deg) scale(1.08);box-shadow:0 0 24px rgba(198,240,77,.25)}

/* ---------- herói: painéis com profundidade ---------- */
.hero-visual .chat-preview,.hero-visual .source-preview,.hero-visual .floating-pill,.hero-visual .mascot-stage{
  translate:var(--px,0) var(--py,0);transition:translate .6s var(--ease)}
.mascot-stage.is-excited .pupil{width:36%!important;height:36%!important;transition:width .25s,height .25s}
.night-pill{position:absolute;left:0;top:24px;z-index:4;display:none;align-items:center;gap:8px;padding:8px 13px;font-size:11px;font-weight:800;
  border:1px solid var(--border-strong);border-radius:99px;background:var(--glass-strong);box-shadow:var(--shadow-card);transform:rotate(-5deg)}
html.is-night .night-pill{display:inline-flex}

/* ---------- olhos piscando em todo lugar ---------- */
@keyframes blink2{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.brand .brand-eye{animation:blink2 6.5s ease-in-out infinite}
.brand .brand-eye + .brand-letter + .brand-eye{animation-delay:.08s}
.brand-footer .brand-eye{animation-duration:8s}

/* ---------- comparativo fixo ---------- */
.compare-before li{position:relative}
.compare-before li .strike{position:absolute;left:28px;right:0;top:50%;height:1.5px;background:var(--error-text);transform:scaleX(0);transform-origin:left;opacity:.8}

/* ---------- linha dos 3 passos ---------- */
.step-list{position:relative}
.step-rail{position:absolute;left:7px;top:22px;bottom:22px;width:2px;background:var(--border);border-radius:2px;overflow:hidden}
.step-rail i{position:absolute;inset:0;background:linear-gradient(var(--brand-lime),var(--brand-lime-secondary));transform:scaleY(0);transform-origin:top;box-shadow:0 0 12px rgba(198,240,77,.6)}
.step-list .step{padding-left:26px}
.step-list .step>span{position:relative}
.step-list .step>span::before{content:"";position:absolute;left:-26px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--brand-lime);box-shadow:0 0 10px rgba(198,240,77,.5)}

/* ---------- números ---------- */
.stat-card strong{font-variant-numeric:tabular-nums}

/* ---------- texto "embaralhado" nos rótulos ---------- */
.scramble{display:inline-block}

/* ---------- abertura com os olhos acordando ---------- */
.intro{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--bg);transition:opacity .6s var(--ease),visibility .6s}
.intro .brand-symbol{font-size:92px;filter:drop-shadow(0 0 30px rgba(198,240,77,.35))}
.intro .brand-eye{overflow:visible;animation:intro-open .9s var(--ease) both}
.intro .brand-eye + .brand-eye{animation-delay:.06s}
@keyframes intro-open{0%{transform:scaleY(.06)}55%{transform:scaleY(1.12)}100%{transform:scaleY(1)}}
.intro.is-done{opacity:0;visibility:hidden}

/* ---------- WhatsApp flutuante ---------- */
.float-cta{position:fixed;right:20px;bottom:20px;z-index:150;display:flex;align-items:center;gap:12px}
.float-cta a.float-btn{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--brand-lime);color:var(--brand-ink);
  box-shadow:0 10px 40px rgba(198,240,77,.35);transition:transform .25s var(--ease)}
.float-cta a.float-btn:hover{transform:scale(1.07)}
.float-cta svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.float-tip{padding:10px 14px;font-size:13px;font-weight:700;border-radius:14px;border:1px solid var(--border-strong);background:var(--glass-strong);
  backdrop-filter:blur(14px);box-shadow:var(--shadow-card);opacity:0;transform:translateX(10px);transition:.5s var(--ease);pointer-events:none}
.float-tip.show{opacity:1;transform:none}
.float-btn::after{content:"";position:absolute;width:58px;height:58px;border-radius:50%;border:2px solid var(--brand-lime);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@media(max-width:620px){.float-tip{display:none}.float-cta{right:14px;bottom:14px}}

@media(prefers-reduced-motion:reduce){
  .intro{display:none}
  .btn-nav::before,.brand .brand-eye,.float-btn::after{animation:none}
  html.js-upgrade .hero h1 .split-word{opacity:1;filter:none;transform:none}
}

/* correção: o ano do rodapé herdava o espaçamento dos olhos */
#current-year{letter-spacing:normal;color:inherit}

/* ---------- dúvidas (FAQ) ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:48px;align-items:start}
.faq-list{display:grid;gap:12px}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);transition:border-color var(--duration-base)}
.faq-item[open]{border-color:rgba(198,240,77,.35)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font-weight:800;font-size:15px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--border-strong);color:var(--brand-lime);font-size:18px;transition:transform var(--duration-base) var(--ease)}
.faq-item[open] summary span{transform:rotate(45deg)}
.faq-item p{margin:0;padding:0 22px 20px;color:var(--text-muted);font-size:14px;line-height:1.75}
.faq-item summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius-md)}
@media(max-width:880px){.faq-grid{grid-template-columns:1fr;gap:24px}}

/* ---------- tema claro: contraste ---------- */
:root[data-theme="light"] .mascot-label,:root[data-theme="light"] .mascot-caption{color:#3F4850}
:root[data-theme="light"] .service-tag span,:root[data-theme="light"] .faq-item summary span{color:#3F7A12}
:root[data-theme="light"] .eyebrow.label-accent{color:#3F7A12}

/* ---------- rodapé com contato ---------- */
.footer-links a[href^="https://wa.me"]{color:var(--brand-lime)}
:root[data-theme="light"] .footer-links a[href^="https://wa.me"]{color:#3F7A12}

/* celular: o selo da noite não cobre o rótulo dos olhos */
@media(max-width:620px){
  html.is-night .mascot-label{visibility:hidden}
  .night-pill{left:50%;top:6px;transform:translateX(-50%) rotate(-2deg);white-space:nowrap}
}

/* ---------- de onde vem o nome (Salô) ---------- */
.name-card{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;padding:48px;border:1px solid rgba(198,240,77,.25);border-radius:var(--radius-lg);
  background:radial-gradient(ellipse 70% 90% at 0 50%,rgba(198,240,77,.10),transparent 70%),var(--surface)}
.name-eyes .brand-symbol{font-size:110px;filter:drop-shadow(0 0 26px rgba(198,240,77,.25))}
.name-eyes .brand-eye{overflow:visible;animation:blink2 5.5s ease-in-out infinite}
.name-eyes .brand-eye + .brand-eye{margin-left:-.085em;animation-delay:.08s}
.name-card h2{margin:12px 0 18px}
.name-card h2 span{color:var(--text-muted)}
.name-card p{color:var(--text-muted);max-width:620px;line-height:1.8;margin:0 0 14px}
.name-card p b{color:var(--text)}
.name-steps{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.name-steps li{display:flex;flex-direction:column;padding:12px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--glass)}
.name-steps b{color:var(--brand-lime);font-family:var(--font-heading);font-size:18px}
.name-steps span{font-size:12px;color:var(--text-muted)}
:root[data-theme="light"] .name-steps b{color:#3F7A12}
@media(max-width:880px){.name-card{grid-template-columns:1fr;gap:20px;padding:30px 22px;text-align:left}.name-eyes .brand-symbol{font-size:76px}}