/* ===== Scroll Reveal — estados base ===== */
.reveal,
[data-reveal]{
  --rev-y: 22px;            /* deslocamento inicial */
  --rev-dur: .9s;           /* duração padrão */
  --rev-blur: 10px;         /* blur inicial */
  --rev-stagger: .08s;      /* intervalo entre filhos */
  opacity: 0;
  transform: translate3d(0,var(--rev-y),0) scale(.995);
  filter: blur(var(--rev-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--rev-dur) cubic-bezier(.2,.7,.2,1),
    transform var(--rev-dur) cubic-bezier(.2,.7,.2,1),
    filter var(--rev-dur) cubic-bezier(.2,.7,.2,1);
}

/* Quando entra no viewport */
.reveal.in,
[data-reveal].in{
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Stagger automático em filhos comuns */
.reveal.in > *,
[data-reveal].in > *{
  --i: 0; /* fallback */
  transition-delay: calc(var(--i) * var(--rev-stagger));
}

/* Pequenas variações por seção (mais fino) */
.hero .hero-inner[data-reveal]{ --rev-y: 14px; --rev-dur: .8s; }
.services-section [data-reveal]{ --rev-y: 24px; }
.featured-work [data-reveal]{ --rev-y: 18px; }
.testimonials-section [data-reveal]{ --rev-y: 20px; }

/* Itens que recebem stagger (índices) */
.services-section .service-box > *,
.featured-project > *,
.project-grid .project-card,
.testimonials-grid .testimonial-card,
.about-container > *,
.about-lab .lab-card{
  /* cada um recebe --i via JS, mas se quiser manualmente: style="--i:2" */
}

/* ===== (Opcional) máscara de “build” no HERO com scroll-timeline ===== */
@supports (animation-timeline: scroll()) {
  .hero .hero-inner{
    /* máscara vertical que abre com a rolagem */
    --mask-from: 68%;
    --mask-to: 0%;
    -webkit-mask: linear-gradient(to bottom, #000 0 var(--mask-from), transparent calc(var(--mask-from) + 1%));
            mask: linear-gradient(to bottom, #000 0 var(--mask-from), transparent calc(var(--mask-from) + 1%));
    animation: hero-build 1 both;
    animation-timeline: view();           /* vincula à rolagem */
    animation-range: cover 0% contain 65%;/* controla quando abre */
  }
  @keyframes hero-build{
    from { --mask-from: 68%; filter: blur(3px); transform: translateY(8px); }
    to   { --mask-from: 0%;  filter: blur(0);    transform: none; }
  }
}


/* ===== Scroll Reveal — base segura ===== */
[data-reveal]{
  --rev-y: 22px;
  --rev-dur: .9s;
  --rev-blur: 10px;
  --rev-stagger: .08s;
  --rev-scale: .995;
  opacity: 0;
  transform: translate3d(0,var(--rev-y),0) scale(var(--rev-scale));
  filter: blur(var(--rev-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--rev-dur) cubic-bezier(.2,.7,.2,1),
    transform var(--rev-dur) cubic-bezier(.2,.7,.2,1),
    filter var(--rev-dur) cubic-bezier(.2,.7,.2,1);
}

/* Estado visível */
[data-reveal].in{
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Hero acima da dobra: começa visível imediatamente */
.hero .hero-inner[data-reveal]{
  transition-delay: .02s;
}

/* Stagger em filhos */
[data-reveal].in > *{
  --i: 0;
  transition-delay: calc(var(--i) * var(--rev-stagger));
}

/* ===== Variantes mais impactantes ===== */
[data-reveal][data-variant="pop"]{
  --rev-y: 28px;
  --rev-scale: .985;
}
[data-reveal][data-variant="pop"].in{
  animation: reveal-pop .9s cubic-bezier(.18,.72,.18,1) both;
}
@keyframes reveal-pop{
  0%   { transform: translateY(28px) scale(.985); opacity: 0; filter: blur(8px); }
  60%  { transform: translateY(-4px) scale(1.01); }
  100% { transform: none; opacity: 1; filter: blur(0); }
}

/* Wipe (cortina) — mais “apresentação” */
[data-reveal][data-variant="wipe"]{
  --wipe-angle: 0deg;
  -webkit-mask: linear-gradient(var(--wipe-angle), rgba(0,0,0,0) 20%, #000 40%);
          mask: linear-gradient(var(--wipe-angle), rgba(0,0,0,0) 20%, #000 40%);
}
[data-reveal][data-variant="wipe"].in{
  animation: reveal-wipe .9s ease-out both;
}
@keyframes reveal-wipe{
  0%   { -webkit-mask-position: 0 30%; mask-position: 0 30%; opacity: .01; filter: blur(6px);}
  100% { -webkit-mask-position: 0 100%; mask-position: 0 100%; opacity: 1;  filter: blur(0);}
}

/* Ajustes por seção */
.hero .hero-inner[data-reveal]{ --rev-y: 14px; --rev-dur: .8s; }
.services-section [data-reveal]{ --rev-y: 24px; }
.featured-work [data-reveal]{ --rev-y: 18px; }
.testimonials-section [data-reveal]{ --rev-y: 20px; }

/* ===== Remoção da máscara agressiva do hero-timeline (a causa da “sumiço”) ===== */
.hero .hero-inner{ -webkit-mask: none; mask: none; }
@supports (animation-timeline: scroll()) {
  /* habilite abaixo se quiser a versão timeline depois de testar:
  .hero .hero-inner{
    --mask-from: 68%; --mask-to: 0%;
    -webkit-mask: linear-gradient(to bottom, #000 0 var(--mask-from), transparent calc(var(--mask-from) + 1%));
            mask: linear-gradient(to bottom, #000 0 var(--mask-from), transparent calc(var(--mask-from) + 1%));
    animation: hero-build 1 both;
    animation-timeline: view();
    animation-range: cover 0% contain 65%;
  }
  @keyframes hero-build{
    from { --mask-from: 68%; filter: blur(3px); transform: translateY(8px); }
    to   { --mask-from: 0%;  filter: blur(0);    transform: none; }
  } */
}











/* =========================================================
   INDEX BACKGROUND PACK — grid alinhado + acentos (CLARO/ESCURO)
   ========================================================= */
:root{
  --grid-step: 32;
  --grid-line: 1px;

  /* Novos tokens globais úteis */
  --container-w: 1200px;
  --header-h: 82px;
  --header-h-sm: 64px;

  /* Light */
  --grid-vline: rgba(16,17,21,.08); /* +visível */
  --grid-hline: rgba(16,17,21,.08);
  --grid-accent: rgba(59,44,127,.10);
  --grid-shine: rgba(255,255,255,.05);

  --index-bg-fallback: #ffffff;
  --index-glow: radial-gradient(1200px 600px at 50% -20%, rgba(128,96,255,.14), transparent 60%);
}

html[data-theme="dark"]{
  --grid-vline: rgba(255,255,255,.12); /* +visível no dark */
  --grid-hline: rgba(255,255,255,.12);
  --grid-accent: rgba(210,197,255,.16);
  --grid-shine: rgba(255,255,255,.08);

  --index-bg-fallback: #0b0f19;
  --index-glow: radial-gradient(1200px 600px at 50% -20%, rgba(128,96,255,.22), transparent 60%);
}

/* Shell do index + glow integrado ao seu tema */
.index-shell{
  position: relative;
  min-height: 100dvh;
  background: var(--bg, var(--index-bg-fallback));
  color: var(--text);
  background-image:
    var(--accent-grad, none),
    var(--index-glow);
  background-blend-mode: normal, normal;
  overflow-x: clip;
  isolation: isolate;
}

/* Grid fixo, alinhado à viewport (linhas verticais + horizontais) */
.bg-lined{ position: relative; }
.bg-lined::before{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0 calc(var(--grid-step) - var(--grid-line)),
      var(--grid-vline) calc(var(--grid-step) - var(--grid-line)) var(--grid-step)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--grid-step) - var(--grid-line)),
      var(--grid-hline) calc(var(--grid-step) - var(--grid-line)) var(--grid-step)
    );
  transform: translateZ(0);
  will-change: transform;
}

/* Densidade e suavização opcionais */
.bg-lined--dense::before{ --grid-step: 24; }
.bg-lined--subtle::before{
  --grid-vline: color-mix(in oklab, var(--grid-vline), transparent 40%);
  --grid-hline: color-mix(in oklab, var(--grid-hline), transparent 40%);
}

/* Faixa diagonal + brilho radial (direita/esquerda) */
.bg-accent-right,
.bg-accent-left{ position: relative; }
.bg-accent-right::after,
.bg-accent-left::after{
  content:"";
  position: fixed;
  inset: -18% -8% -18% 48%;
  pointer-events:none;
  z-index:-1;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, var(--grid-accent) 18px 19px),
    radial-gradient(900px 480px at 70% 30%, var(--grid-shine), transparent 60%);
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
  mix-blend-mode: normal;
  transform: translateZ(0);
}
.bg-accent-left::after{
  inset: -18% 48% -18% -8%;
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0 100%);
}

/* Camadas seguras para seções internas */
.section{ position: relative; isolation: isolate; z-index: 0; }
.section > *{ position: relative; z-index: 1; }

/* Preferências do usuário */
@media (prefers-reduced-motion: reduce){
  .bg-lined::before,
  .bg-accent-right::after,
  .bg-accent-left::after{ transform: none !important; }
}
@media (max-width: 640px){
  .bg-accent-right::after, .bg-accent-left::after{ display: none; }
}

/* Garantia de stacking do header/footer sobre o background */
.lw-header, .lw-footer{ position: relative; z-index: 10; }

/* =========================================================
   SEU CSS (consolidado + pequenos hardenings)
   ========================================================= */

/* ===== Main Nav submenu isolado (prefixo mn-) ===== */
.mn-item{ position:relative; }
.mn-link{ display:flex; align-items:center; gap:8px; padding:10px 12px; text-decoration:none; }
.mn-caret{ font-size:.85em; opacity:.6; transition:transform .2s; }

.mn-has-sub .mn-sub{
  position:absolute; left:0; top:100%;
  min-width:260px; padding:8px; margin-top:10px;
  background: var(--header-bg, rgba(255,255,255,.85));
  border: 1px solid var(--header-border, rgba(10,10,20,.08));
  border-radius:14px;
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    0 10px 28px rgba(0,0,0,.14),
    0 1px 0 0 color-mix(in oklab, var(--header-border), transparent 40%) inset;
  display:none; z-index:1000;
}
.mn-has-sub:hover > .mn-sub{ display:block; }
.mn-sub a{ display:block; padding:10px 12px; border-radius:10px; text-decoration:none; }
.mn-sub a:hover{ background: var(--hover-pill, rgba(59,44,127,.08)); }
.mn-has-sub.is-open > .mn-sub{ display:block; }
.mn-has-sub.is-open > .mn-link .mn-caret{ transform: rotate(180deg); }

/* Integração com o seu layout */
.lw-links .mn-item { display:inline-block; vertical-align:middle; }
.lw-drawer .mn-item { width:100%; }
.lw-drawer .mn-sub { margin:6px 0 0; }

/* Mobile */
@media (max-width:1024px){
  .mn-has-sub .mn-sub{
    position:static;
    margin:6px 0 0;
    box-shadow:none; border-radius:12px;
    display:none;
  }
  .mn-has-sub.is-open .mn-sub{ display:block; }
}
/* Zera bullets e recuos do submenu */
.mn-sub, .mn-sub li{ list-style: none; }
.mn-sub{
  padding-left: 0;
  margin: 0;
  top: 100%;
}
/* colchão anti-flicker */
.mn-has-sub{ position: relative; }
.mn-has-sub::after{
  content:"";
  position:absolute; left:0; right:0;
  top:100%; height:8px;
  pointer-events:none;
}

/* ===== Services grid/cards ===== */
.services-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.service-card{
  background: var(--card-bg, rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  padding:18px;
  backdrop-filter:saturate(140%) blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  border-color: rgba(255,255,255,0.22);
}
.service-illustration{
  display:block; width:100%; height:160px; object-fit:contain;
  margin-bottom:12px; image-rendering:auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
  border-radius:12px;
}
.service-card h3{ margin:4px 0 8px; font-size:1.1rem; }
.service-card p{ margin:0; opacity:.9; line-height:1.5; }
@media (prefers-reduced-motion: reduce){
  .service-illustration{ animation: none !important; }
}
.btn-view{
  display:inline-block; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:600;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn-view:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.18); border-color: rgba(255,255,255,.32); }
.is-hidden{ display:none; }

/* ===== Hardenings de stack em seções ===== */
.hero.hero-vgrid,
.services-section,
.featured-work,
.testimonials-section,
.about-section,
.about-carnauba-section,
.subscribe-section,
.faq-section,
.privacy-section,
.terms-section{
  position: relative; isolation: isolate;
}
.hero.hero-vgrid::before,         .hero.hero-vgrid::after,
.services-section::before,        .services-section::after,
.featured-work::before,           .featured-work::after,
.testimonials-section::before,    .testimonials-section::after,
.about-section::before,           .about-section::after,
.about-carnaúba-section::before,  .about-carnaúba-section::after,
.about-carnauba-section::before,  .about-carnauba-section::after,
.subscribe-section::before,       .subscribe-section::after,
.faq-section::before,             .faq-section::after,
.privacy-section::before,         .privacy-section::after,
.terms-section::before,           .terms-section::after{
  z-index: 0 !important;
}
.hero.hero-vgrid > *,
.services-section > *,
.featured-work > *,
.testimonials-section > *,
.about-section > *,
.about-carnauba-section > *,
.subscribe-section > *,
.faq-section > *,
.privacy-section > *,
.terms-section > *{
  position: relative; z-index: 1;
}

/* ===== Tokens DARK reforçados ===== */
html[data-theme="dark"],
body[data-theme="dark"],
.dark, body.dark, [data-theme="dark"]{
  --hero-grid:       rgba(255,255,255,.14) !important;
  --hero-accent:     rgba(210,197,255,.18) !important;
  --svc-grid:        rgba(255,255,255,.14) !important;
  --svc-accent:      rgba(168,140,255,.26) !important;
  --svc-shine:       rgba(255,255,255,.12) !important;
  --fw-grid:         rgba(255,255,255,.14) !important;
  --fw-accent:       rgba(210,197,255,.18) !important;
  --ts-grid:         rgba(255,255,255,.14) !important;
  --ts-accent:       rgba(210,197,255,.18) !important;
  --about-grid:      rgba(255,255,255,.14) !important;
  --car-grid:        rgba(255,255,255,.14) !important;
  --car-accent:      rgba(210,197,255,.18) !important;
  --sub-grid:        rgba(255,255,255,.14) !important;
  --sub-accent:      rgba(210,197,255,.18) !important;
  --faq-grid:        rgba(255,255,255,.14) !important;
  --faq-accent:      rgba(210,197,255,.18) !important;
  --privacy-grid:    rgba(255,255,255,.14) !important;
  --privacy-accent:  rgba(210,197,255,.18) !important;
  --terms-grid:      rgba(255,255,255,.14) !important;
  --terms-accent:    rgba(210,197,255,.18) !important;
}

/* ===== Fail-safes do Dark para seções (REMOVIDO o HERO p/ não sobrescrever) ===== */
html[data-theme="dark"] .services-section::before,
.dark .services-section::before{
  background:
    repeating-linear-gradient(to right, transparent 0 31px, rgba(255,255,255,.14) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255,255,255,.14) 31px 32px);
}
html[data-theme="dark"] .services-section::after,
.dark .services-section::after{
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(168,140,255,.26) 18px 19px),
    radial-gradient(900px 450px at 70% 30%, rgba(255,255,255,.12), transparent 60%);
}
html[data-theme="dark"] .featured-work::before,
.dark .featured-work::before{
  background:
    repeating-linear-gradient(to right, transparent 0 31px, rgba(255,255,255,.14) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255,255,255,.14) 31px 32px);
}
html[data-theme="dark"] .featured-work::after,
.dark .featured-work::after{
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(210,197,255,.18) 18px 19px),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.12), transparent 60%);
}
html[data-theme="dark"] .testimonials-section::before,
.dark .testimonials-section::before{
  background:
    repeating-linear-gradient(to right, transparent 0 31px, rgba(255,255,255,.14) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255,255,255,.14) 31px 32px);
}
html[data-theme="dark"] .testimonials-section::after,
.dark .testimonials-section::after{
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(210,197,255,.18) 18px 19px),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.12), transparent 60%);
}
html[data-theme="dark"] .about-section::before,
.dark .about-section::before{
  background:
    repeating-linear-gradient(to right, transparent 0 31px, rgba(255,255,255,.14) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255,255,255,.14) 31px 32px);
}
html[data-theme="dark"] .about-carnauba-section::before,
.dark .about-carnauba-section::before{
  background:
    repeating-linear-gradient(to right, transparent 0 31px, rgba(255,255,255,.14) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255,255,255,.14) 31px 32px);
}
html[data-theme="dark"] .about-carnauba-section::after,
.dark .about-carnauba-section::after{
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(210,197,255,.18) 18px 19px),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.12), transparent 60%);
}
html[data-theme="dark"] .subscribe-section::before,
.dark .subscribe-section::before{
  background:
    repeating-linear-gradient(to right, transparent 0 31px, rgba(255,255,255,.14) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255,255,255,.14) 31px 32px);
}
html[data-theme="dark"] .subscribe-section::after,
.dark .subscribe-section::after{
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(210,197,255,.18) 18px 19px),
    radial-gradient(900px 450px at 70% 30%, rgba(255,255,255,.12), transparent 60%);
}
html[data-theme="dark"] .faq-section::before,
.dark .faq-section::before{
  background:
    repeating-linear-gradient(to right, transparent 0 31px, rgba(255,255,255,.14) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255,255,255,.14) 31px 32px);
}
html[data-theme="dark"] .faq-section::after,
.dark .faq-section::after{
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(210,197,255,.18) 18px 19px),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.12), transparent 60%);
}
html[data-theme="dark"] .privacy-section::before,
.dark .privacy-section::before{
  background:
    repeating-linear-gradient(to right, transparent 0 31px, rgba(255,255,255,.14) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255,255,255,.14) 31px 32px);
}
html[data-theme="dark"] .privacy-section::after,
.dark .privacy-section::after{
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(210,197,255,.18) 18px 19px),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.12), transparent 60%);
}
html[data-theme="dark"] .terms-section::before,
.dark .terms-section::before{
  background:
    repeating-linear-gradient(to right, transparent 0 31px, rgba(255,255,255,.14) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255,255,255,.14) 31px 32px);
}
html[data-theme="dark"] .terms-section::after,
.dark .terms-section::after{
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(210,197,255,.18) 18px 19px),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.12), transparent 60%);
}

/* ===== Labels/Filters/Lab ===== */
.filters-label{ display: none; }
.filters-label-out{
  margin-top: 10px;
  font:600 .95rem ui-monospace, SFMono-Regular, Consolas, monospace;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
  padding: 6px 12px; border-radius: 8px; opacity: .95; display: inline-block; text-align: center;
}
.about-lab{
  display: flex; justify-content: center; align-items: flex-start;
  gap: 28px; margin-top: 40px;
}
.about-lab .lab-card{ flex: 0 1 460px; max-width: 100%; }
@media (max-width: 980px){
  .about-lab{ flex-direction: column; align-items: center; gap: 20px; }
  .about-lab .lab-card{ width: 100%; max-width: 480px; }
}
.lab-card{ border:1px solid rgba(127,127,127,.14); border-radius:16px; padding:20px; background:rgba(127,127,127,.04); }
.lab-head{ display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:start; margin-bottom:14px; }
.lab-ico{ width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(127,127,127,.14);background:rgba(127,127,127,.08); }
.lab-head h3{ margin:0 0 4px; font-weight:800; font-size:clamp(1.05rem,.9rem+1vw,1.4rem); }
.lab-head p{ margin:0; opacity:.8; line-height:1.45; }

/* ===== Filters stage + frames ===== */
.fx-grid{
  background:
    radial-gradient(800px 180px at 50% -80%, rgba(0,0,0,.06), transparent 60%),
    repeating-linear-gradient(to right, transparent 0 31px, rgba(127,127,127,.06) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(127,127,127,.06) 31px 32px);
}
.filters-stage{
  position:relative; border:1px solid rgba(127,127,127,.16); border-radius:12px;
  padding:18px; min-height:260px; display:grid; place-items:center; overflow:hidden;
}
.filters-stage img{ width:min(420px,100%); height:auto; border-radius:10px; transition:filter .5s ease, transform .5s ease; will-change:filter,transform; z-index:2; }
.filters-label{
  position:absolute; top:12px; left:14px; z-index:3;
  font:600 .9rem ui-monospace,SFMono-Regular,Consolas,monospace;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14);
  padding:4px 8px; border-radius:8px; opacity:.9; pointer-events:none;
}
.fx-frame{ position:absolute; border-radius:12px; backdrop-filter: blur(2px); z-index:1; }
.fx-left { left:6%; top:34%; width:30%; height:46%; background:rgba(127,127,127,.06); border:1px solid rgba(127,127,127,.25); }
.fx-center{ left:36%; top:22%; width:40%; height:58%; background:rgba(127,127,127,.10); border:1px solid rgba(127,127,127,.28); }
.fx-right{ right:4%; bottom:16%; width:10%; height:48%; background:rgba(127,127,127,.08); border:1px solid rgba(127,127,127,.22); }

/* Utils de filtro */
.f-blur-sm{ filter: blur(4px); }
.f-sepia{ filter: sepia(1); }
.f-brightness-150{ filter: brightness(1.5); }
.f-contrast-150{ filter: contrast(1.5); }
.f-grayscale{ filter: grayscale(1); }
.f-saturate-200{ filter: saturate(2); }

/* ===== Mock de celular + compare ===== */
.phone-wrap{ border:none; background:transparent; padding:0; }
.phone{
  position:relative; width:min(560px,100%); margin:0 auto;
  aspect-ratio: 9 / 10.5; border-radius:36px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.10));
  border:1px solid rgba(127,127,127,.22);
  box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 0 0 6px rgba(0,0,0,.25);
  overflow:hidden;
}
.phone-notch{ position:absolute; top:6px; left:50%; transform:translateX(-50%); width:40%; height:22px; background:rgba(0,0,0,.65); border-radius: 12px; z-index:5; display:flex; align-items:center; justify-content:center; gap:14px; }
.phone-notch .cam{ width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #79a7ff, #0b1b3b 60%); box-shadow:0 0 0 2px #0e223f inset; }
.phone-notch .spk{ width:70px;height:6px;border-radius:6px;background:linear-gradient(#0f1a29,#0a111c); }

.mode-compare{ position:relative; min-height:auto; cursor:col-resize; }
.mode-compare .pane{ position:absolute; inset:0; display:grid; align-content:start; justify-items:stretch; pointer-events:none; }
.mode-compare .pane.light{ --app-bg:#f5f7fb; --panel:#ffffff; --text:#0b0f19; --muted:#5d6473; --accent:#111827; --alt:#e8eaf0; background:var(--app-bg); }
.mode-compare .pane.dark{ --app-bg:#0b0f19; --panel:#101726; --text:#e8ebf2; --muted:#9aa1ae; --accent:#3b82f6; --alt:#1a2233; background:var(--app-bg); clip-path: inset(0 50% 0 0); }
.statusbar{ height:32px; padding:8px 14px; display:flex; align-items:center; justify-content:space-between; color:var(--text); opacity:.9; }
.statusbar .time{ font-weight:700; letter-spacing:.3px; }
.statusbar .sb-icons i{ margin-left:10px; }
.app{ padding: 14px; display:grid; place-items:center; }
.card{
  width: calc(100% - 20px); max-width:420px; border-radius:20px;
  background:var(--panel); color:var(--text);
  border:1px solid rgba(127,127,127,.16); box-shadow:0 10px 30px rgba(0,0,0,.25);
  overflow:hidden;
}
.row{ padding:14px 14px 0 14px; }
.row:last-child{ padding-bottom:16px; }
.row-balance{ display:grid; grid-template-columns:46px 1fr; align-items:center; gap:10px; }
.avatar{ width:46px;height:46px;border-radius:50%; object-fit:cover; border:2px solid rgba(127,127,127,.25); }
.bal-sub{ font-size:.68rem; letter-spacing:.18em; opacity:.7; }
.bal-val{ grid-column: 1 / -1; font-size:1.4rem; font-weight:800; margin-top:4px; }
.row-actions{ display:grid; grid-auto-flow:column; gap:10px; margin-top:10px; }
.pill{ pointer-events:auto; padding:10px 14px; border-radius:999px; border:1px solid rgba(127,127,127,.18); background:var(--alt); color:var(--text); font-weight:700; }
.pill.primary{ background:var(--accent); color:#fff; border-color:transparent; }
.row-accounts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; padding-bottom:14px; }
.acct{ background: rgba(127,127,127,.06); border:1px solid rgba(127,127,127,.18); border-radius:12px; padding:10px; }
.acct .label{ font-size:.82rem; opacity:.8; }
.acct .amt{ font-weight:800; margin-top:6px; }

.split-handle{ position:absolute; top:0; bottom:0; left:calc(var(--split) * 1% - 1px); width:2px; background:rgba(59,130,246,.9); border:0; padding:0; margin:0; cursor:col-resize; outline:none; z-index:10; }
.split-handle .dot{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px;height:34px;border-radius:999px;
  background:rgba(59,130,246,1); border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 0 rgba(59,130,246,.55); animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(59,130,246,.55);} 70%{box-shadow:0 0 0 14px rgba(59,130,246,0);} 100%{box-shadow:0 0 0 0 rgba(59,130,246,0);} }
@media (max-width:980px){ .about-lab{ grid-template-columns:1fr; } }

/* ===== Ajustes finos (tokens base) ===== */
:root{
  --lab-phone-max: 380px;
  --lab-filters-size: 330px;
  --lab-frame-border: rgba(127,127,127,.22);
  --lab-frame-bg: rgba(127,127,127,.08);
  --lab-frame-glass: blur(2px);
}

/* ===== Dark/Light tokens globais do site ===== */
:root{
  --radius:12px; --gap:16px; --duration:.25s;

  /* Light */
  --bg:#ffffff;
  --text:#101115;
  --muted:#6a6f7c;
  --header-bg:rgba(255,255,255,.82);
  --header-border:rgba(10,10,20,.08);
  --link:#3b2c7f;
  --hover-pill:rgba(59,44,127,.08);
  --outline:rgba(15,15,20,.10);

  --btn-text:#12131a;
  --btn-bg:#ffffff;
  --btn-border:rgba(17,18,22,.16);

  --accent-grad:radial-gradient(1200px 600px at 50% -20%, #efe9ff 0%, transparent 60%);
}
html[data-theme="dark"]{
  --bg:#0b0f19;
  --text:#EEEAFB;
  --muted:#B7B0D6;
  --header-bg:rgba(2,1,10,.87);
  --header-border:rgba(255,255,255,.08);
  --link:#dcd2ff;
  --hover-pill:rgba(210,197,255,.10);
  --outline:rgba(255,255,255,.18);

  --btn-text:#EEEAFB;
  --btn-bg:#0b0914;
  --btn-border:rgba(255,255,255,.16);

  --accent-grad:radial-gradient(1200px 600px at 50% -20%, #35206f 0%, transparent 60%);
}

/* =========================================================
   HEADER / NAV – refinado
   ========================================================= */
.lw-header{
  position: sticky; top: 0; z-index: 1000;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--header-border);
  box-shadow:
    0 1px 0 0 color-mix(in oklab, var(--header-border), transparent 50%) inset,
    0 12px 40px -28px rgba(0,0,0,.35);
}
.lw-nav{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 57px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap);
  min-height: var(--header-h);
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1024px){
  .lw-nav{ min-height: var(--header-h-sm); }
}
.lw-logo{display:inline-block; position:relative;}
.lw-logo .logo{height: clamp(100px, 7vw, 100px); display:block; line-height:0;}
.lw-logo .logo-light{display:block !important;}
.lw-logo .logo-dark{display:none !important;}
html[data-theme="dark"] .lw-logo .logo-light{display:none !important;}
html[data-theme="dark"] .lw-logo .logo-dark{display:block !important;}

.lw-links{ display:flex; gap: 8px; justify-content:center; align-items:center; }
.lw-links a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px;
  color:var(--text); text-decoration:none; font-weight:600; opacity:.95;
  transition: transform var(--duration), background var(--duration), box-shadow var(--duration);
  font-size: 20px;
}
.lw-links a:hover{
  background:var(--hover-pill);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}

.lw-actions{display:flex; align-items:center; gap:10px;}
.lw-btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px;
  font-weight:800; color:var(--text); text-decoration:none;
  border:1px solid var(--btn-border); background:var(--btn-bg);
  box-shadow: 0 1px 0 0 var(--outline) inset, 0 6px 16px rgba(0,0,0,.06);
  transition: transform var(--duration), box-shadow var(--duration), border-color var(--duration);
}
.lw-btn-outline:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.lw-btn-outline:focus-visible{ outline: 2px solid color-mix(in oklab, var(--link), #000 15%); outline-offset: 2px; }

/* Idioma (sem bolinhas; menu limpo) */
.lw-lang{ position:relative; }
.lw-lang-btn{
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 12px; border-radius:12px;
  border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--text); cursor:pointer; font-weight:800;
}
.lw-lang-code{ font-weight:900; letter-spacing:.5px; }
.lw-lang-menu{
  position:absolute; right:0; top: calc(100% + 10px);
  min-width:160px; background:var(--bg); color:var(--text);
  border:1px solid var(--btn-border); border-radius:14px; padding:8px;
  display:none; box-shadow:0 14px 36px rgba(0,0,0,.22); z-index:2200; list-style: none;
}
.lw-lang[aria-expanded="true"] .lw-lang-menu{ display:block; }

/* RESET: sem bolinhas */
.lw-lang-menu ul{ list-style: none; padding-left: 0; margin: 0; }
.lw-lang-menu li{ margin:0; }
.lw-lang-menu a{
  display:block; padding:9px 10px; border-radius:10px; text-decoration:none; color:var(--text); font-weight:800;
}
.lw-lang-menu a:hover{ background:var(--hover-pill); }

/* Theme switch */
.lw-theme{
  display:inline-flex; background:var(--btn-bg); border:1px solid var(--btn-border);
  border-radius:999px; padding:2px; gap:2px; box-shadow:0 1px 0 0 var(--outline) inset;
}
.lw-theme .seg{
  width:34px; height:34px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--text); opacity:.8; cursor:pointer; background:transparent; border:none;
  transition: background var(--duration), transform var(--duration), opacity var(--duration);
}
.lw-theme .seg[aria-pressed="true"]{ background:var(--hover-pill); opacity:1; }
.lw-theme .seg:focus-visible{ outline: 2px solid color-mix(in oklab, var(--link), #000 15%); outline-offset: 2px; }

/* Burger */
.lw-burger{
  display:none; width:44px; height:40px; border-radius:12px; border:1px solid var(--btn-border);
  background:var(--btn-bg); cursor:pointer; align-items:center; justify-content:center; gap:5px; flex-direction:column;
  transition: box-shadow var(--duration), transform var(--duration);
}
.lw-burger:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.lw-burger span{ width:20px; height:2px; background:var(--text); transition:transform .2s ease,opacity .2s ease; }
.lw-burger.active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.lw-burger.active span:nth-child(2){ opacity:0; }
.lw-burger.active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Drawer + Backdrop */
.lw-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity var(--duration); z-index:2000;
}
.lw-backdrop.show{ opacity:1; pointer-events:auto; }
.lw-drawer{
  position:fixed; top:0; right:0; height:100%; width:100%; max-width:420px;
  background:var(--bg); color:var(--text);
  box-shadow:-20px 0 60px rgba(0,0,0,.35);
  display:flex; flex-direction:column; transform:translate3d(110%,0,0);
  transition:transform var(--duration); z-index:2001; will-change:transform;
}
.lw-drawer.open{ transform:translate3d(0,0,0); }
@media (max-width:480px){ .lw-drawer{ max-width:none; } }

.lw-drawer-header{
  display:flex; align-items:center; justify-content:flex-end;
  padding:14px 16px; border-bottom:1px solid var(--header-border); background:var(--header-bg);
}
.lw-drawer-close{ border:1px solid var(--btn-border); background:var(--btn-bg); border-radius:12px; padding:6px 10px; color:var(--text); }
.lw-drawer-body{
  padding:14px 16px 460px; background: var(--btn-bg) !important;
  border: 1px solid var(--btn-border);
  box-shadow: 0 1px 0 0 var(--outline) inset;
  border-radius: 12px; overflow:auto;
}
.lw-drawer-body a{
  display:block; padding:12px 10px; border-radius:12px; text-decoration:none; color:var(--text); font-weight:800; font-size: 18px;
}
.lw-drawer-body a:hover{ background:var(--hover-pill); }
.lw-btn-block{ display:block; text-align:center; padding:12px; margin-top:10px; border:1px solid var(--btn-border); background:var(--btn-bg);
  color:var(--text); border-radius:12px; text-decoration:none; font-weight:800; }
.lw-btn-block.secondary{ opacity:.92; }
.lw-drawer-section{ margin-top:18px; }
.lw-drawer-title{ font-size:12px; opacity:.7; margin-bottom:8px; }
.lw-lang-inline{ display:flex; gap:10px; }

/* Sem bolinhas nas línguas inline do drawer */
.lw-lang-inline, .lw-lang-inline ul{ list-style: none; padding-left:0; margin:0; }
.lw-lang-inline a{
  padding:8px 10px; border-radius:12px; border:1px solid var(--btn-border); background:var(--btn-bg); text-decoration:none;
  color:var(--text); font-weight:800;
}

/* Responsividade header */
@media (max-width:1024px){
  .lw-links{ display:none; }
  .lw-btn-outline{ display:none; }
  .lw-lang{ display:none; }
  .lw-burger{ display:inline-flex; }
}

/* Segurança: nada cria scroll lateral */
html, body { max-width: 100%; overflow-x: hidden; }
.lw-burger { display: none !important; }
@media (max-width: 1024px) { .lw-burger { display: inline-flex !important; } }

/* Glow global opcional */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; background:var(--accent-grad);
}

/* =========================================================
   FOOTER
   ========================================================= */
.lw-footer{
  position: relative; background: var(--bg); color: var(--text);
  border-top: 1px solid var(--header-border);
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 -8px 28px rgba(0,0,0,.12);
}
.lw-footer-divider{
  height: 1px;
  background: linear-gradient(to right, transparent, var(--btn-border), transparent);
  opacity: .9;
}
.lw-footer-inner{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 22px 16px 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
}
@media (min-width: 1280px){
  .lw-footer-inner{
    grid-template-columns: 1fr;
    justify-items: center; text-align: center;
    row-gap: 10px;
  }
}
.footer-left .copy{ margin: 0 0 6px 0; font-size: 1.2rem; opacity: .9; }
.footer-links{
  display: inline-flex; align-items: center; gap: 10px; font-size: .92rem; flex-wrap: wrap; justify-content: center;
}
.footer-links a{ color: var(--text); text-decoration: none; opacity: .85; padding: 2px 0; font-size:18px; }
.footer-links a:hover{ opacity: 1; text-decoration: underline; }
.footer-links .dot{ opacity: .45; }
.footer-right{ justify-self: end; }
@media (min-width:1280px){ .footer-right{ justify-self: center; } }

.footer-socials{ display: inline-flex; gap: 10px; }
.footer-socials .pill{
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px;
  border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--text);
  box-shadow: 0 1px 0 0 var(--outline) inset, 0 8px 18px rgba(0,0,0,.10);
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.footer-socials .pill:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}
.footer-socials .pill:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--link), #000 15%); outline-offset: 2px;
}
.footer-socials i{ font-size: 1rem; line-height: 0; }
@media (max-width: 760px){
  .lw-footer-inner{
    grid-template-columns: 1fr; justify-items: start; row-gap: 12px;
  }
  .footer-right{ justify-self: start; }
}

/* =========================================================
   HERO — grid traçado visível (ancorado na viewport) + diagonal hatch
   ========================================================= */

/* ==========================================================================
   HERO — VGRID com profundidade, alinhamento e tema dark/light
   Alvo: <section class="hero hero-vgrid"> … </section>
   ========================================================================== */

.hero.hero-vgrid{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* ===== Tokens locais ===== */
  --container-w: var(--container-w, 1200px);
  --hero-pad-x: clamp(16px, 4vw, 24px);
  --hero-pad-y: clamp(56px, 9vw, 120px);

  /* Alinha grade ao container */
  --gox: max(0px, calc((100vw - var(--container-w)) / 2));

  /* ---------- LIGHT (padrão) ---------- */
  --hero-bg:   #ffffff;
  --hero-fg:   #0f172a;

  --grid-step: 32px;
  --grid-line:  rgba(16,17,21,.07);
  --hatch-line: rgba(16,17,21,.045);

  --accent-1:  rgba(120,86,255,.10);   /* brilho lilás */
  --accent-2:  rgba(0,174,255,.09);    /* brilho ciano */
  --vignette:  rgba(0,0,0,.10);

  background: var(--hero-bg);
  color: var(--hero-fg);
}

/* ========= Fundo composto ========= */
.hero.hero-vgrid::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;

  background-image:
    radial-gradient(1200px 600px at 20% 35%, var(--accent-1) 0%, transparent 55%),
    radial-gradient(900px 520px  at 80% 15%, var(--accent-2) 0%, transparent 45%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--vignette) 110%),
    repeating-linear-gradient(to right,
      var(--grid-line) 0, var(--grid-line) 1px,
      transparent 1px, transparent var(--grid-step)
    ),
    repeating-linear-gradient(to bottom,
      var(--grid-line) 0, var(--grid-line) 1px,
      transparent 1px, transparent var(--grid-step)
    ),
    repeating-linear-gradient(45deg,
      var(--hatch-line) 0, var(--hatch-line) 1px,
      transparent 1px, transparent 14px
    );

  background-blend-mode: screen, screen, normal, normal, normal, multiply;

  /* Alinhamento ao container */
  background-position:
    20% 35%,
    80% 15%,
    0 0,
    var(--gox) 0,
    var(--gox) 0,
    var(--gox) 0;

  /* Suaviza bordas */
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
}

/* Grão/overlay muito sutil */
.hero.hero-vgrid::after{
  content:"";
  position:absolute; inset:-2%; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1000px 300px at 15% -10%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(transparent, transparent);
  mix-blend-mode: overlay;
  opacity:.22;
}

/* ========= Layout ========= */
.hero.hero-vgrid .hero-inner{
  max-width: min(var(--container-w), 92vw);
  margin-inline:auto;
  padding: var(--hero-pad-y) var(--hero-pad-x);
  display:grid; gap: clamp(16px, 3vw, 32px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width:1024px){
  .hero.hero-vgrid .hero-inner{ grid-template-columns: 1.15fr .85fr; }
}

.hero.hero-vgrid .hero-content h1{
  font-size: clamp(2.4rem, 6.5vw, 5.2rem);
  line-height: .95;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero.hero-vgrid .hero-content p{
  margin-top: 14px;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  opacity: .92;
}
.hero.hero-vgrid .hero-buttons{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:20px;
}
.hero.hero-vgrid .btn-primary,
.hero.hero-vgrid .btn-secondary{
  appearance:none; border:0; cursor:pointer;
  font: inherit; text-decoration:none;
  padding: 12px 18px; border-radius: 12px;
  transition: transform .16s ease, box-shadow .16s ease, background-color .2s ease;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.hero.hero-vgrid .btn-primary{ color:#0b0f1a; background: linear-gradient(180deg, #7dd3fc, #38bdf8); }
.hero.hero-vgrid .btn-secondary{
  color: var(--hero-fg);
  background: rgba(0,0,0,.06);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 8px 22px rgba(0,0,0,.18);
}
.hero.hero-vgrid .btn-primary:hover,
.hero.hero-vgrid .btn-secondary:hover{ transform: translateY(-1px); }

/* Arte (direita) */
.hero.hero-vgrid .hero-art{ display:flex; justify-content:center; }
.hero.hero-vgrid .art-card{
  position: relative; display:inline-block;
  border-radius: 20px; overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  transform: translateZ(0);
}
.hero.hero-vgrid .art-img{ display:block; max-width:100%; height:auto; }
.hero.hero-vgrid .art-frame{
  position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.hero.hero-vgrid .art-shine{
  position:absolute; inset:-25%;
  background: radial-gradient(600px 200px at 15% 10%, rgba(255,255,255,.24), transparent 60%);
  mix-blend-mode: screen; pointer-events:none;
}

/* ========= Modais na section ========= */
.hero.hero-vgrid .modal-overlay{
  position: fixed; inset: 0; display:flex;
  align-items:center; justify-content:center;
  background: rgba(0,0,0,.45);
  z-index: 50;
}
.hero.hero-vgrid .modal-overlay.hidden{ display:none; }
.hero.hero-vgrid .glass-modal{
  width: min(560px, 92vw);
  padding: 22px 22px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.50));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 20px 60px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.10);
  color: var(--hero-fg);
}
.hero.hero-vgrid .glass-modal h2{ margin: 6px 0 8px; font-size: 1.4rem; }
.hero.hero-vgrid .glass-modal form{ display:grid; gap:10px; margin-top:12px; }
.hero.hero-vgrid .glass-modal input,
.hero.hero-vgrid .glass-modal textarea{
  width: 100%; border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04); color: var(--hero-fg);
  padding: 10px 12px; border-radius: 10px;
}
.hero.hero-vgrid .glass-modal .btn-submit{
  margin-top: 6px; border: 0; border-radius: 10px;
  padding: 11px 14px; cursor:pointer; font:inherit;
  color:#0b0f1a; background: linear-gradient(180deg, #7dd3fc, #38bdf8);
}
.hero.hero-vgrid .close-modal{
  position:absolute; right:10px; top:10px; border:0; background:transparent;
  color: var(--hero-fg); font-size: 24px; cursor:pointer;
}
.hero.hero-vgrid .modal{
  width: min(460px, 92vw);
  background: rgba(0,0,0,.05);
  border-radius: 16px; padding: 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.24), inset 0 0 0 1px rgba(0,0,0,.12);
  color: var(--hero-fg);
}
.hero.hero-vgrid .modal .modal-btn{
  margin-top: 12px; border:0; padding:10px 14px; border-radius: 10px;
  color:#0b0f1a; background: linear-gradient(180deg, #a7f3d0, #34d399);
}

/* =======================================================================
   OVERRIDES DE TEMA (funciona com QUALQUER estratégia que você usar)
   - Se o seu app coloca a classe em <html> ou <body>, funciona.
   - Se usa [data-theme="dark"] / [data-theme="light"], também funciona.
   - Se usa .dark-mode / .light-mode, idem.
   Coloque estes blocos DEPOIS dos estilos acima (cascata).
   ======================================================================= */

/* ---------- DARK ---------- */
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .hero.hero-vgrid{
  --hero-bg:  #0b0f1a;
  --hero-fg:  #ffffff;
  --grid-line:  rgba(255,255,255,.07);
  --hatch-line: rgba(255,255,255,.045);
  --accent-1:   rgba(140,110,255,.20);
  --accent-2:   rgba(60,200,255,.14);
  --vignette:   rgba(0,0,0,.48);
  /* Ajustes dos elementos que dependem de cor base */
}
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .hero.hero-vgrid .btn-secondary{
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 8px 22px rgba(0,0,0,.18);
}
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .hero.hero-vgrid .glass-modal{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12);
}
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .hero.hero-vgrid .glass-modal input,
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .hero.hero-vgrid .glass-modal textarea{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

/* ---------- LIGHT explícito (se seu app usa .light/.light-mode/[data-theme="light"]) ---------- */
:where(html.light, body.light, .light, .light-mode, [data-theme="light"]) .hero.hero-vgrid{
  --hero-bg:  #ffffff;
  --hero-fg:  #0f172a;
  --grid-line:  rgba(16,17,21,.07);
  --hatch-line: rgba(16,17,21,.045);
  --accent-1:   rgba(120,86,255,.10);
  --accent-2:   rgba(0,174,255,.09);
  --vignette:   rgba(0,0,0,.10);
}

/* Fallback: se você respeita o prefers-color-scheme sem classe alguma */
@media (prefers-color-scheme: dark){
  :where(html):not(.light):not(.light-mode):not([data-theme="light"]) .hero.hero-vgrid{
    /* só aplica se você NÃO estiver forçando light */
    --hero-bg:  #0b0f1a;
    --hero-fg:  #ffffff;
    --grid-line:  rgba(255,255,255,.07);
    --hatch-line: rgba(255,255,255,.045);
    --accent-1:   rgba(140,110,255,.20);
    --accent-2:   rgba(60,200,255,.14);
    --vignette:   rgba(0,0,0,.48);
  }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .hero.hero-vgrid::before{ background-attachment: initial; }
  .hero.hero-vgrid .btn-primary:hover,
  .hero.hero-vgrid .btn-secondary:hover{ transform:none; }
}

/* === Gutters simétricos + fundo alinhado =============================== */

/* 1) Defina um gutter único p/ os dois lados */
.hero.hero-vgrid{
  --page-gutter: clamp(16px, 4vw, 40px); /* espaço igual nos lados */
  --gox: var(--page-gutter);             /* usa o mesmo valor para alinhar o grid */
  padding-inline: var(--page-gutter);    /* aplica o gutter na section */
}

/* 2) Centralize o conteúdo sem padding extra interno */
.hero.hero-vgrid .hero-inner{
  max-width: var(--container-w);   /* ex.: 1200px (já está no seu CSS) */
  width: 100%;
  margin-inline: auto;             /* centraliza */
  padding-inline: 0;               /* evita somar gutter duas vezes */
}

/* 3) Faça as linhas do fundo começarem exatamente no gutter */
.hero.hero-vgrid::before{
  background-position:
    20% 35%,       /* brilho 1 (livre) */
    80% 15%,       /* brilho 2 (livre) */
    0 0,           /* vinheta */
    var(--gox) 0,  /* grade vertical alinhada ao gutter */
    var(--gox) 0,  /* grade horizontal alinhada ao gutter */
    var(--gox) 0;  /* hatch diagonal alinhada ao gutter */
}

/* 4) (Opcional) Deixe as colunas mais equilibradas no desktop */
@media (min-width: 1024px){
  .hero.hero-vgrid .hero-inner{
    grid-template-columns: 1fr 1fr;  /* 50/50, sensação de centro */
  }
  .hero.hero-vgrid .hero-content{ text-align: center; }
  .hero.hero-vgrid .hero-buttons{ justify-content: center; }
}

/* —— Alternância dos GIFs por tema —— */
.hero.hero-vgrid .art-img{ display:block; max-width:100%; height:auto; }
.hero.hero-vgrid .art-img--dark{ display:none; }     /* padrão: light mostra */

:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"])
  .hero.hero-vgrid .art-img--light{ display:none; }

:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"])
  .hero.hero-vgrid .art-img--dark{ display:block; }

/* Fallback opcional: se não houver classe/atributo de tema,
   respeita o esquema do SO (macOS/iOS/Android/Windows) */
@media (prefers-color-scheme: dark){
  :where(html):not(.light):not(.light-mode):not([data-theme="light"])
    .hero.hero-vgrid .art-img--light{ display:none; }
  :where(html):not(.light):not(.light-mode):not([data-theme="light"])
    .hero.hero-vgrid .art-img--dark{ display:block; }
}

.hero-art {
  position: relative;
  overflow: hidden;
}

.art-card {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
}

/* ==== Vídeos ==== */
.art-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  z-index: 0;
}

/* ==== Exibição automática conforme modo ==== */
@media (prefers-color-scheme: light) {
  .art-video--light { display: block; }
}

@media (prefers-color-scheme: dark) {
  .art-video--dark { display: block; }
}

/* ==== Efeitos existentes ==== */
.art-frame,
.art-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero-art { position: relative; overflow: hidden; }

.art-card {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;            /* garante altura */
  border-radius: 18px;
  overflow: hidden;
}

.art-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;                   /* escondemos por padrão */
  z-index: 0;
}

/* --- 1) Alterna pelo tema do sistema (fallback universal) --- */
@media (prefers-color-scheme: light) { .art-video--light { display: block; } }
@media (prefers-color-scheme: dark)  { .art-video--dark  { display: block; } }

/* --- 2) Alterna pelas classes do seu portal (se você usa .dark-mode/.light-mode) --- */
.light-mode .art-video--light { display: block; }
.light-mode .art-video--dark  { display: none;  }

.dark-mode  .art-video--light { display: none;  }
.dark-mode  .art-video--dark  { display: block; }

/* seus efeitos continuam por cima */
.art-frame, .art-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; }





/* Mantém seu card e vídeos */
.hero.hero-vgrid .hero-art { position: relative; overflow: hidden; }
.hero.hero-vgrid .art-card{
  position: relative; display:inline-block;
  width: 100%; max-width: 960px; margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.hero.hero-vgrid .art-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; display:none; z-index:0;
}
@media (prefers-color-scheme: light){ .hero.hero-vgrid .art-video--light{display:block;} }
@media (prefers-color-scheme: dark){  .hero.hero-vgrid .art-video--dark{ display:block;} }
:where(html.light, body.light, .light, .light-mode, [data-theme="light"]) .hero.hero-vgrid .art-video--light{display:block;}
:where(html.light, body.light, .light, .light-mode, [data-theme="light"]) .hero.hero-vgrid .art-video--dark{ display:none; }
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"])   .hero.hero-vgrid .art-video--light{display:none;}
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"])   .hero.hero-vgrid .art-video--dark{ display:block; }

/* ================= MOCKUP 3D ================= */
.mockup-3d{
  position:absolute; inset:0; z-index:1; /* acima do vídeo, abaixo dos efeitos */
  display:block;
  perspective: 1000px;
  transform-style: preserve-3d;
  /* pequeno tilt idle (respiração) */
  animation: mockIdle 7s ease-in-out infinite;
}
@keyframes mockIdle{
  0%,100%{ transform: rotateX(0.6deg) rotateY(-0.6deg) translateZ(0); }
  50%   { transform: rotateX(-0.6deg) rotateY(0.6deg) translateZ(0); }
}

/* Camadas */
.mockup-3d .mock-layer{
  position:absolute; top:50%; left:50%;
  width: 72%;
  max-width: 840px;
  transform: translate(-50%,-50%) translateZ(0);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.22), 0 6px 16px rgba(0,0,0,.12);
  will-change: transform;
  transition: transform .18s ease, filter .18s ease;
}
.mockup-3d .l1{ filter: brightness(1.02) saturate(1.02); }
.mockup-3d .l2{ width: 64%; border-radius: 16px; }
.mockup-3d .l3{ width: 56%; border-radius: 18px; }

/* Floats (chips/decoração) */
.floater{
  position:absolute; width: 46px; height: 46px; border-radius: 12px;
  backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 10px 30px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.28);
  will-change: transform, box-shadow;
}
.floater-a{
  top: 14%; left: 12%; display:flex; align-items:center; justify-content:center;
  font-weight: 700; font-size: 18px; color:#fff;
  background: linear-gradient(160deg, #7dd3fc, #38bdf8);
}
.floater-b{
  bottom: 16%; right: 12%;
  background: linear-gradient(160deg, rgba(255,255,255,.52), rgba(255,255,255,.12));
}
.floater-c{
  top: 24%; right: 20%;
  width: 62px; height: 62px; border-radius: 18px;
  background: linear-gradient(160deg, #c4b5fd, #a78bfa);
  box-shadow: 0 14px 40px rgba(124,58,237,.32);
}

/* Brilho especular “passando” */
.specular{
  pointer-events:none;
  position:absolute; inset:-40%;
  background: conic-gradient(from 180deg at 50% 50%, rgba(255,255,255,.0), rgba(255,255,255,.22), rgba(255,255,255,.0) 60%);
  mix-blend-mode: screen; opacity: .25;
  animation: specSweep 5.6s ease-in-out infinite;
}
@keyframes specSweep{
  0%   { transform: translateX(-8%) rotate(8deg); opacity:.15; }
  50%  { transform: translateX( 8%) rotate(-6deg); opacity:.30; }
  100% { transform: translateX(-8%) rotate(8deg); opacity:.15; }
}

/* Hover/press feedback */
.art-card:hover .mock-layer{ filter: brightness(1.05) saturate(1.05); }
.art-card:active .mock-layer{ transform: translate(-50%,-50%) translateZ(8px) scale(.998); }

/* Acessibilidade / mobile */
@media (max-width: 768px){
  .mockup-3d .mock-layer{ width: 88%; }
  .mockup-3d .l2{ width: 78%; }
  .mockup-3d .l3{ width: 68%; }
}
@media (prefers-reduced-motion: reduce){
  .mockup-3d{ animation: none !important; }
  .specular{ animation: none !important; opacity:.18; }
}




















/* ============================================================
   ABOUT + LAB — estilo "cards" do print (dark/light)
   Escopo total em .about-section para não vazar estilos.
   ============================================================ */

/* ---------- Tokens / defaults ---------- */
.about-section{
  position: relative;
  isolation: isolate;
  /* container & gutters */
  --container-w: var(--container-w, 1200px);
  --gutter: clamp(16px, 4vw, 36px);
  --radius-card: 18px;

  /* light por padrão */
  --bg: #ffffff;
  --fg: #0f172a;
  --muted: rgba(15,23,42,.70);

  /* cards */
  --card-bg: #f8fafc;
  --card-border: rgba(15,23,42,.12);
  --card-shadow: 0 12px 30px rgba(15,23,42,.08);

  /* grid pontilhado nas áreas internas */
  --dot: rgba(15,23,42,.12);
  --dot-size: 2px;
  --dot-gap: 12px;

  /* hatch/ornamentos laterais */
  --hatch: rgba(15,23,42,.06);
  --grid-step: 32px;

  /* acento */
  --accent: #22d3ee; /* ciano elegante do print */
  --accent-ghost: rgba(34,211,238,.16);

  color: var(--fg);
  background: var(--bg);
  padding-inline: var(--gutter);
  padding-block: clamp(40px, 6vw, 80px);
}

/* ---------- Fundo trabalhado (listras/hatch laterais + glow suave) ---------- */
.about-section::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(1000px 500px at 10% -20%, rgba(139,92,246,.08), transparent 60%),
    /* hatch lateral esquerda */
    linear-gradient(135deg,
      transparent 0 46%,
      var(--hatch) 46% 50%,
      transparent 50% 100%
    ),
    /* hatch lateral direita (espelhado) */
    linear-gradient(-135deg,
      transparent 0 46%,
      var(--hatch) 46% 50%,
      transparent 50% 100%
    );
  background-size:
    auto, auto,
    28px 28px, 28px 28px;
  background-position:
    0 0, 0 0,
    left -14px top, right -14px top;
  background-repeat:no-repeat, no-repeat, repeat-y, repeat-y;
  /* vinheta de leve para dar profundidade */
  -webkit-mask-image: radial-gradient(150% 90% at 50% 40%, #000 50%, transparent 100%);
          mask-image: radial-gradient(150% 90% at 50% 40%, #000 50%, transparent 100%);
}

/* ---------- Modo escuro (compatível com suas estratégias) ---------- */
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .about-section{
  --bg: #0b0f1a;
  --fg: #e5e7eb;
  --muted: rgba(229,231,235,.70);

  --card-bg: #0f172a;                 /* bloco escuro */
  --card-border: rgba(255,255,255,.10);
  --card-shadow: 0 16px 40px rgba(0,0,0,.35);

  --dot: rgba(255,255,255,.11);
  --hatch: rgba(255,255,255,.06);
}

/* ============================================================
   LAYOUT: coluna do perfil + coluna de texto
   ============================================================ */
.about-section .about-container{
  max-width: min(var(--container-w), 100%);
  margin-inline: auto;
  display:grid;
  gap: clamp(20px, 3vw, 36px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 992px){
  .about-section .about-container{
    grid-template-columns: 0.95fr 1.05fr;
  }
}

/* Perfil + redes */
.about-section .photo-box{
  position: relative;
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--card-border);
  padding: 14px;
  display: grid;
  place-items: center;
}
.about-section .about-photo{
  width: 100%;
  max-width: 360px;
  height: auto;
  display:block;
  border-radius: calc(var(--radius-card) - 6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* Redes sociais */
.about-section .social-icons{
  position:absolute; left: 16px; bottom: 16px;
}
.about-section .social-icons ul{ display:flex; gap:10px; margin:0; padding:0; list-style:none; }
.about-section .social-icons a{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius: 10px;
  background: rgba(0,0,0,.06);
  border: 1px solid var(--card-border);
  color: var(--fg);
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  transition: transform .15s ease, background-color .2s ease;
}
.about-section .social-icons a:hover{ transform: translateY(-1px); background: var(--accent-ghost); }

/* Texto */
.about-section h2{
  font-size: clamp(1.9rem, 3.2vw, 3.1rem);
  margin: 6px 0 10px;
  letter-spacing: -.01em;
}
.about-section p{
  color: var(--muted);
  line-height: 1.65;
  max-width: 60ch;
  font-size: 20px;
}

/* ============================================================
   LAB — cards com grid pontilhado e cabeçalho com ícone
   ============================================================ */
.about-section .about-lab{
  max-width: min(var(--container-w), 100%);
  margin: clamp(28px, 6vw, 44px) auto 0;
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.5vw, 22px);
}
@media (min-width: 1024px){
  .about-section .about-lab{ grid-template-columns: 1fr 1fr; }
}

.about-section .lab-card{
  border-radius: var(--radius-card);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  padding: clamp(10px, 2vw, 20px);
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.about-section .lab-head{
  display:grid;
  grid-template-columns: auto 1fr;
  align-items:center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--card-border);
}
.about-section .lab-ico{
  width: 52px; height: 52px; border-radius: 14px;
  display:grid; place-items:center;
  background: radial-gradient(120px 60px at 30% 10%, var(--accent-ghost), transparent 60%);
  border: 1px solid var(--card-border);
}
.about-section .lab-ico i{ font-size: 22px; color: var(--fg); opacity:.9; }
.about-section .lab-head h3{
  margin:0; font-size: 1.05rem; letter-spacing:.01em;
}
.about-section .lab-head p{
  margin: 2px 0 0; font-size: 1.2rem; color: var(--muted);
}

/* ---------- Área com grid pontilhado (igual ao print) ---------- */
.about-section .fx-grid,
.about-section .phone-wrap{
  position: relative;
  border-radius: calc(var(--radius-card) - 6px);
  background:
    radial-gradient(var(--dot) var(--dot-size), transparent var(--dot-size)) 0 0 / var(--dot-gap) var(--dot-gap),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.02));
  border: 1px solid var(--card-border);
  min-height: 240px;
  padding: 14px;
  overflow: hidden;
}

/* Molduras decorativas do Filters */
.about-section .fx-frame{
  position:absolute; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(var(--card-border), var(--card-border));
  opacity:.9;
}
.about-section .fx-left{ left: 18%; }
.about-section .fx-center{ left: 50%; transform: translateX(-1px); }
.about-section .fx-right{ right: 18%; }

.about-section #aboutPhotoDemo{
  display:block;
  width: min(520px, 90%);
  height: auto;
  margin: 34px auto 22px;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.about-section .filters-label-out{
  margin-top: 6px;
  align-self: start;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .85rem;
  color: var(--fg);
  background: rgba(0,0,0,.06);
  border: 1px solid var(--card-border);
  padding: 6px 10px;
  border-radius: 10px;
  width: max-content;
}

/* ============================================================
   Dark Mode Compare — mock de telefone + slider
   ============================================================ */
.about-section .phone{
  position: relative;
  max-width: 520px;
  margin: 24px auto;
  aspect-ratio: 10 / 18;
  border-radius: 28px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  outline: 1px solid var(--card-border);
}
.about-section .phone .statusbar{
  position:absolute; top: 8px; left: 10px; right: 10px;
  display:flex; justify-content: space-between; align-items:center;
  font-size: 12px; color:#e5e7eb;
  opacity:.9;
  pointer-events:none;
}

/* conteúdo fake do app */
.about-section .phone .app{
  position:absolute; inset: 38px 10px 10px; display:grid; place-items:center;
}
.about-section .phone .card{
  width: 92%;
  border-radius: 18px;
  padding: 14px;
  background: #0b1220;
  color: #e5e7eb;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35);
}
.about-section .phone .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.about-section .phone .row-balance{ margin-bottom: 12px; }
.about-section .phone .avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.about-section .phone .bal-sub{ opacity:.7; font-size:.75rem; letter-spacing:.08em; }
.about-section .phone .bal-val{ font-size:1.1rem; font-weight:600; }
.about-section .phone .row-actions{ gap:10px; }
.about-section .phone .pill{
  border:0; border-radius:999px; padding:8px 14px; font:inherit; cursor:pointer;
  background: rgba(255,255,255,.08); color:#e5e7eb;
}
.about-section .phone .pill.primary{ background: linear-gradient(180deg, #7dd3fc, #38bdf8); color:#0b1220; }
.about-section .phone .row-accounts{ margin-top: 8px; gap: 8px; }
.about-section .phone .acct{ flex:1; background: rgba(255,255,255,.06); border-radius:12px; padding:10px; }

/* Dois “panes”: light vs dark */
.about-section .pane{ position:absolute; inset:0; }
.about-section .pane.light{
  background: #F6F7FB;
  color: #0f172a;
}
.about-section .pane.dark{
  background: #0b1220;
  color: #e5e7eb;
  /* clip controlado por variável; fallback 50% */
  clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
}

/* Notch */
.about-section .phone-notch{
  position:absolute; top: 6px; left:50%; transform:translateX(-50%);
  width: 42%; height: 16px; border-radius: 0 0 10px 10px;
  background: #0b1220; border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 2px 6px rgba(0,0,0,.35) inset;
}

/* Slider/handle (linha azul e botão circular) */
.about-section .split-handle{
  position:absolute; top: 0; bottom: 0;
  left: var(--split, 50%);
  transform: translateX(-50%);
  width: 2px; background: var(--accent);
  border: 0; padding: 0; cursor: ew-resize;
}
.about-section .split-handle .dot{
  position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(34,211,238,.15);
}
.about-section .split-handle:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* Utilitário de acessibilidade */
.about-section .sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================================
   ABOUT — AJUSTES: fundo igual à HERO + cards com mesma altura
   ============================================================ */

/* 1) Tokens da vgrid (LIGHT como padrão) */
.about-section{
  /* alinhar grade ao container/gutters tal qual a hero */
  --container-w: var(--container-w, 1200px);
  --page-gutter: clamp(16px, 4vw, 40px);
  --gox: var(--page-gutter);

  /* vgrid (LIGHT) */
  --grid-step:   32px;
  --grid-line:   rgba(16,17,21,.08);
  --hatch-line:  rgba(16,17,21,.05);
  --accent-1:    rgba(120,86,255,.12);
  --accent-2:    rgba(0,174,255,.10);
  --vignette:    rgba(0,0,0,.12);
  position: relative;
  isolation: isolate;
}

/* 2) Fundo da about-section igual ao da hero */
.about-section::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1200px 600px at 20% 35%, var(--accent-1) 0%, transparent 55%),
    radial-gradient(900px 520px  at 80% 15%, var(--accent-2) 0%, transparent 45%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--vignette) 110%),
    repeating-linear-gradient(to right,
      var(--grid-line) 0, var(--grid-line) 1px,
      transparent 1px, transparent var(--grid-step)
    ),
    repeating-linear-gradient(to bottom,
      var(--grid-line) 0, var(--grid-line) 1px,
      transparent 1px, transparent var(--grid-step)
    ),
    repeating-linear-gradient(45deg,
      var(--hatch-line) 0, var(--hatch-line) 1px,
      transparent 1px, transparent 14px
    );
  background-blend-mode: screen, screen, normal, normal, normal, multiply;
  background-position:
    20% 35%,
    80% 15%,
    0 0,
    var(--gox) 0,
    var(--gox) 0,
    var(--gox) 0;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
}

/* 3) Dark mode — mesmos tokens da hero */
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .about-section{
  --grid-line:   rgba(255,255,255,.075);
  --hatch-line:  rgba(255,255,255,.045);
  --accent-1:    rgba(140,110,255,.20);
  --accent-2:    rgba(60,200,255,.14);
  --vignette:    rgba(0,0,0,.50);
}

/* 4) Equalização de ALTURA dos cards do LAB */
.about-section .about-lab{
  /* duas colunas continuam, mas as linhas terão a mesma altura */
  align-items: stretch;
  grid-auto-rows: 1fr;         /* cada linha vira “altura igual” */
}
.about-section .lab-card{
  height: 90%;
  display: flex;
  flex-direction: column;
}
.about-section .lab-card .lab-head{ /* cabeçalho fixinho */
  flex: 0 0 auto;
}

/* a área “stage” de cada card ocupa o resto e tem a MESMA altura */
.about-section .fx-grid,
.about-section .phone-wrap{
  flex: 1 1 auto;
  min-height: clamp(340px, 38vw, 420px); /* mesmo alvo para ambos */
  display: grid;
  place-items: center;
}

/* faz o mock de celular caber sem estourar e sem alongar o card */
.about-section .phone{
  width: min(460px, 100%);
  height: auto;
  aspect-ratio: 10 / 18;
}

/* opcional: em telas grandes, garante mesma altura também entre linhas */
@media (min-width:1024px){
  .about-section .about-lab{ grid-auto-rows: 1fr; }
}

/* 5) Pequeno ajuste: rótulo dos filtros não “puxa” a altura do card */
.about-section .filters-label-out{
  margin-top: 10px;
  align-self: start;
}

/* ============================================================
   SERVICES — mesmo background da HERO + cards elegantes
   ============================================================ */


/* ============================================================================
   SERVICES — BASE DA SEÇÃO (mantém seu VGRID, tokens e dark mode)
   ========================================================================== */
.services-section{
  position: relative;
  isolation: isolate;

  /* Container e gutters */
  --container-w: var(--container-w, 1200px);
  --page-gutter: clamp(16px, 4vw, 40px);
  --gox: var(--page-gutter);

  /* Paleta/base (LIGHT) */
  --bg: #ffffff;
  --fg: #0f172a;
  --muted: rgba(15,23,42,.72);

  /* VGRID (igual à hero) */
  --grid-step: 32px;
  --grid-line: rgba(16,17,21,.08);
  --hatch-line: rgba(16,17,21,.05);
  --accent-1: rgba(120,86,255,.12);
  --accent-2: rgba(0,174,255,.10);
  --vignette: rgba(0,0,0,.12);

  color: var(--fg);
  background: var(--bg);
  padding-inline: var(--page-gutter);
  padding-block: clamp(48px, 6vw, 90px);
}

/* Fundo VGRID (mesmo da hero) */
.services-section::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1200px 600px at 20% 35%, var(--accent-1) 0%, transparent 55%),
    radial-gradient(900px 520px  at 80% 15%, var(--accent-2) 0%, transparent 45%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--vignette) 110%),
    repeating-linear-gradient(to right,
      var(--grid-line) 0, var(--grid-line) 1px,
      transparent 1px, transparent var(--grid-step)
    ),
    repeating-linear-gradient(to bottom,
      var(--grid-line) 0, var(--grid-line) 1px,
      transparent 1px, transparent var(--grid-step)
    ),
    repeating-linear-gradient(45deg,
      var(--hatch-line) 0, var(--hatch-line) 1px,
      transparent 1px, transparent 14px
    );
  background-blend-mode: screen, screen, normal, normal, normal, multiply;
  background-position:
    20% 35%,
    80% 15%,
    0 0,
    var(--gox) 0,
    var(--gox) 0,
    var(--gox) 0;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
}

/* Dark mode tokens */
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .services-section{
  --bg: #0b0f1a;
  --fg: #e5e7eb;
  --muted: rgba(229,231,235,.72);

  --grid-line: rgba(255,255,255,.075);
  --hatch-line: rgba(255,255,255,.045);
  --accent-1: rgba(140,110,255,.20);
  --accent-2: rgba(60,200,255,.14);
  --vignette: rgba(0,0,0,.50);
}

/* Título da seção */
.services-section .section-title{
  max-width: min(var(--container-w), 100%);
  margin: 0 auto clamp(22px, 3vw, 30px);
  text-align: center;
  font-size: clamp(1.6rem, 4.6vw, 4.1rem);
  letter-spacing: -.01em;
}

/* ============================================================================
   SHOWCASE CAROUSEL — layout central com vidro e setas
   Use com: <section class="services-section showcase"> … </section>
   ========================================================================== */

/* Container do showcase */
.showcase .showcase-wrap{
  position: relative;
  max-width: 1200px;
  margin: 24px auto 0;
  min-height: 540px;
  display: grid;
  grid-template-areas:
    "left  media"
    "bottom media";
  grid-template-columns: 1.1fr 1.4fr;
  grid-template-rows: 1fr auto;
  gap: 18px;
  align-items: center;
}

/* Vidros (glass) com cor discreta por slide via --accent */
.showcase .glass{
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.18);
  color: var(--fg);
  position: relative;
  overflow: hidden;
}
:where(html.dark, body.dark, .dark-mode, [data-theme="dark"]) .showcase .glass{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.14);
}

/* “tinta” sutil sobre o vidro, usando --accent */
.showcase .glass::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(100% 120% at 30% 0%, var(--accent, rgba(167,139,250,.35)) 0%, transparent 55%);
  mix-blend-mode: screen; opacity:.35;
}

/* Vidro esquerdo (título/brief) */
.showcase .glass-left{ grid-area: left; padding: 18px 18px 16px 18px; }
.showcase .glass-header{ margin-bottom: 10px; }
.showcase .kicker{ display:block; font-size:.85rem; opacity:.75; letter-spacing:.1em; text-transform:uppercase; }
.showcase .glass-title{ font-size: clamp(1.6rem, 3vw, 2.8rem); line-height:1; margin: 6px 0 2px; }
.showcase .glass-brief{ opacity:.9; margin-bottom: 12px; }
.showcase .glass-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 14px; border-radius: 999px; text-decoration:none;
  color:#0b0f1a; background: rgba(255,255,255,.75);
  box-shadow: 0 10px 24px rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.10);
}
:where(html.dark, body.dark, .dark-mode, [data-theme="dark"]) .showcase .glass-cta{
  background: rgba(255,255,255,.12); color:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.14);
}

/* Vidro inferior (features/bullets) */
.showcase .glass-bottom{ grid-area: bottom; padding: 14px 16px; }
.showcase .feature-list{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 10px;
  list-style:none; margin:0; padding:0;
}
.showcase .feature-list li{
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.60);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 8px 22px rgba(0,0,0,.14);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:where(html.dark, body.dark, .dark-mode, [data-theme="dark"]) .showcase .feature-list li{
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 22px rgba(0,0,0,.25);
}

/* Media central com leve 3D / tilt */
.showcase .showcase-media{
  grid-area: media; position: relative; aspect-ratio: 16/10;
  border-radius: 18px; overflow:hidden;
  box-shadow: 0 25px 70px rgba(0,0,0,.28);
  transform-style: preserve-3d; perspective: 1000px;
}
.showcase #showcaseImg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; transform: translateZ(30px);
}
.showcase .media-tint{
  position:absolute; inset:-20%; pointer-events:none;
  background: radial-gradient(60% 80% at 65% 35%, var(--accent, rgba(167,139,250,.35)), transparent 60%);
  mix-blend-mode: screen; opacity:.35;
}

/* Navegação (setas) */
.showcase .nav-btn{
  position:absolute; top:50%; transform: translateY(-50%);
  width: 46px; height:46px; border-radius: 999px; border:0; cursor:pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,.75);
  box-shadow: 0 12px 28px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.08);
  font-size: 22px; line-height: 1; display:grid; place-items:center;
  z-index: 5;
}
.showcase .nav-btn.prev{ left: -12px; }
.showcase .nav-btn.next{ right: -12px; }
:where(html.dark, body.dark, .dark-mode, [data-theme="dark"]) .showcase .nav-btn{
  background: rgba(255,255,255,.14); color:#fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.14);
}

/* Hover tilt suave (quando houver JS para tilt) */
.showcase .showcase-media:hover #showcaseImg{
  filter: saturate(1.04) contrast(1.02);
}

/* Responsivo */
@media (max-width: 1024px){
  .showcase .showcase-wrap{
    grid-template-areas:
      "media"
      "left"
      "bottom";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 14px;
    min-height: 0;
  }
  .showcase .nav-btn.prev{ left: 8px; }
  .showcase .nav-btn.next{ right: 8px; }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .showcase .showcase-media, .showcase #showcaseImg{ transition:none !important; }
}

/* Acessibilidade: esconder visualmente sem tirar do DOM */
.sr-only {
  position: absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip: rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

/* =============== SHOWCASE (UI moderno) =============== */
.services-section .showcase-wrap{
  position: relative;
  max-width: var(--container-w);
  margin: 26px auto 18px;
  min-height: 560px;
  display: grid;
  grid-template-areas:
    "left  media  rail"
    "bottom media  rail";
  grid-template-columns: 1.05fr 1.6fr 0.55fr;
  grid-template-rows: 1fr auto;
  gap: 18px;
  align-items: center;
}

/* Vidro com “tinta” sutil (cor por slide via --accent) */
.services-section .glass{
  position: relative; overflow: hidden;
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.18);
  color: var(--fg);
}
:where(html.dark, body.dark, .dark-mode, [data-theme="dark"]) .services-section .glass{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.14);
}
.services-section .glass::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 100% at 20% 0%, var(--accent, rgba(167,139,250,.32)) 0%, transparent 55%),
    radial-gradient(120% 120% at 120% 120%, var(--accent, rgba(167,139,250,.22)) 0%, transparent 60%);
  mix-blend-mode: screen; opacity:.42;
}

/* Painel esquerdo (tipografia grande + copy + CTA) */
.services-section .glass-left{ grid-area:left; padding: 20px 22px 18px; display:grid; grid-template-columns:1fr auto; gap:10px; }
.services-section .kicker{ display:inline-block; font-size:.82rem; opacity:.8; letter-spacing:.12em; text-transform:uppercase; }
.services-section .big-title{
  margin-top:8px; font-weight:700;
  font-size:clamp(2.2rem,5vw,5.6rem); line-height:.95; letter-spacing:.02em;
}
.services-section .brief{ margin:10px 0 14px; opacity:.92; }
.services-section .glass-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; text-decoration:none;
  background: rgba(255,255,255,.78); color:#0b0f1a;
  box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.10);
}
:where(html.dark, body.dark, .dark-mode, [data-theme="dark"]) .services-section .glass-cta{
  background: rgba(255,255,255,.14); color:#fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.14);
}
/* palavra vertical à esquerda */
.services-section .left-vert{
  writing-mode: vertical-rl; text-orientation: mixed;
  align-self: stretch; justify-self:end;
  letter-spacing:.2em; text-transform: lowercase;
  opacity:.25; padding-right:8px; font-size:clamp(1.1rem,1.8vw,1.6rem);
}

/* Painel inferior (3 bullets) */
.services-section .glass-bottom{ grid-area:bottom; padding:14px 16px; }
.services-section .feature-list{
  display:grid; grid-template-columns: repeat(3,1fr); gap:10px;
  list-style:none; margin:0; padding:0;
}
.services-section .feature-list li{
  padding:10px 12px; border-radius:10px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 8px 22px rgba(0,0,0,.14);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
:where(html.dark, body.dark, .dark-mode, [data-theme="dark"]) .services-section .feature-list li{
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 22px rgba(0,0,0,.25);
}

/* Mídia central: crossfade suave */
.services-section .showcase-media{
  grid-area:media; position:relative; aspect-ratio:16/9;
  border-radius:18px; overflow:hidden;
  box-shadow:0 25px 70px rgba(0,0,0,.28);
}
.services-section .media-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transform:scale(1.02);
  transition: opacity .9s ease, transform 1.2s ease;
}
.services-section .media-img.is-active{ opacity:1; transform:scale(1); }
.services-section .media-tint{
  position:absolute; inset:-20%; pointer-events:none;
  background: radial-gradient(70% 90% at 65% 35%, var(--accent, rgba(167,139,250,.35)), transparent 60%);
  mix-blend-mode: screen; opacity:.35;
}

/* Trilho direito (setas/progresso) */
.services-section .right-rail{
  grid-area:rail; display:grid;
  grid-template-rows:auto 1fr auto auto; gap:12px;
}
.services-section .rail-menu{
  justify-self:end; width:44px; height:44px; border-radius:12px; border:0; cursor:pointer;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow:0 12px 26px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.08);
}
:where(html.dark, body.dark, .dark-mode, [data-theme="dark"]) .services-section .rail-menu{
  background: rgba(255,255,255,.12); color:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.14);
}
.services-section .rail-card{
  align-self:start; padding:12px; border-radius:14px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow:0 12px 26px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.08);
  display:grid; grid-template-columns:48px 1fr; gap:10px;
}
:where(html.dark, body.dark, .dark-mode, [data-theme="dark"]) .services-section .rail-card{
  background: rgba(255,255,255,.10); color:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.14);
}
.services-section .avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.services-section .meta .who{ display:block; margin-bottom:4px; }
.services-section .pill{
  display:inline-flex; padding:6px 10px; border-radius:999px; text-decoration:none;
  border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.85); color:#0b0f1a; margin-top:6px;
}
:where(html.dark, body.dark, .dark-mode, [data-theme="dark"]) .services-section .pill{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.24);
}

.services-section .rail-arrows{ display:grid; gap:10px; justify-items:end; }
.services-section .nav-btn{
  width:44px; height:44px; border-radius:999px; border:0; cursor:pointer;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow:0 12px 26px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.08);
  font-size:20px; line-height:1; display:grid; place-items:center;
}
:where(html.dark, body.dark, .dark-mode, [data-theme="dark"]) .services-section .nav-btn{
  background: rgba(255,255,255,.14); color:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.14);
}

.services-section .rail-progress{ height:3px; background:rgba(255,255,255,.35); border-radius:999px; overflow:hidden; }
.services-section .rail-progress span{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--accent, #a78bfa), rgba(255,255,255,0)); transition: width .2s linear; }

/* Responsivo */
@media (max-width: 1100px){
  .services-section .showcase-wrap{
    grid-template-areas:
      "media"
      "left"
      "bottom"
      "rail";
    grid-template-columns:1fr; grid-template-rows:auto auto auto auto;
    min-height:0;
  }
}
@media (prefers-reduced-motion: reduce){
  .services-section .media-img{ transition: none !important; }
}


/* util: esconder visualmente sem remover do DOM */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}

/* ======== PICKER (layout do modelo da foto) ======== */
.services-picker{
  position: relative;
  max-width: min(var(--container-w), 1200px);
  margin: 22px auto 10px;
  padding: 10px 0 6px;
}

/* topo: título + preço + descrição curtas */
.services-picker .top-info{
  text-align:left;
  max-width: 780px;
  margin: 0 auto 12px;
}
.services-picker .title-line{
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
}
.services-picker .title-line h3{
  margin:0; font-size: clamp(1.4rem, 3.8vw, 3rem); letter-spacing:.02em;
}
.services-picker .price{
  font-weight:700; opacity:.9; font-size: clamp(1rem, 2vw, 1.25rem);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.65); color:#0b0f1a;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
:where(html.dark, body.dark, .dark-mode,[data-theme="dark"]) .services-picker .price{
  background: rgba(255,255,255,.14); color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.services-picker .desc{ margin:6px 0 4px; opacity:.9; font-size:20px; }

/* palco: central + próximo desfocado de fundo */
.services-picker .stage{
  position: relative;
  height: clamp(320px, 42vw, 520px);
  display:grid; place-items:center;
  isolation:isolate;
}
.services-picker .bg-next{
  position:absolute; inset:-4%;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  filter: blur(24px) saturate(1.08) brightness(1.02);
  transform: scale(1.06);
  opacity:.35; z-index:0;
}
/* “vidro” leve sob a imagem central */
.services-picker .glass-pad{
  position:absolute; bottom:8%; left:50%; transform: translateX(-50%);
  width: 64%; height: 38%;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.16);
  opacity:.75; z-index:1;
}

/* imagem central (crossfade + leve slide) */
.services-picker .center-wrap{
  position:relative; z-index:2; width:min(520px, 78%); aspect-ratio: 1/1;
  display:grid; place-items:center;
}
.services-picker .center-img{
  position:absolute; inset:0; width:105%; height:73%; object-fit:contain;
  opacity:0; transform: translateY(10px) scale(1.02);
  transition: opacity .65s ease, transform .8s ease;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.28));
}
.services-picker .center-img.is-active{ opacity:1; transform: translateY(0) scale(1); }

/* setas centralizadas abaixo da imagem */
.services-picker .arrows{
  position:absolute; bottom:2px; left:50%; transform: translateX(-50%);
  display:flex; gap:10px; z-index:3;
}
.services-picker .btn-arrow{
  width:46px; height:46px; border-radius:999px; border:0; cursor:pointer;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 26px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.08);
  font-size:18px; display:grid; place-items:center;
}
:where(html.dark, body.dark, .dark-mode,[data-theme="dark"]) .services-picker .btn-arrow{
  background: rgba(255,255,255,.14); color:#fff;
  box-shadow: 0 12px 26px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.14);
}

/* tira inferior (thumbnails redondas) */
.services-picker .thumbs{
  margin: 38px auto 0; max-width: 880px;
  display:flex; gap: 14px; justify-content:center; flex-wrap:wrap;
}
.services-picker .thumb{
  width:86px; height:86px; border-radius: 22px; overflow:hidden; position:relative;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.1);
  cursor:pointer; transition: transform .18s ease, box-shadow .18s ease;
}
:where(html.dark, body.dark, .dark-mode,[data-theme="dark"]) .services-picker .thumb{
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22);
}
.services-picker .thumb img{
  width:100%; height:100%; object-fit:cover;
}
.services-picker .thumb.is-active{
  box-shadow: 0 14px 36px var(--thumb-shadow, rgba(0,0,0,.28));
  transform: translateY(-2px);
}

/* respeita preferências */
@media (prefers-reduced-motion: reduce){
  .services-picker .center-img{ transition:none !important; }
}























/* ============================================================
   FEATURED WORK — vgrid da hero + cards/coerência visual
   ============================================================ */

.featured-work{
  position: relative;
  isolation: isolate;

  /* container */
  --container-w: var(--container-w, 1200px);
  --page-gutter: clamp(16px, 4vw, 40px);
  --gox: var(--page-gutter);

  /* palette (LIGHT padrão) */
  --bg: #ffffff;
  --fg: #0f172a;
  --muted: rgba(15,23,42,.72);

  /* cards */
  --card-bg: #f8fafc;
  --card-border: rgba(15,23,42,.12);
  --card-shadow: 0 12px 30px rgba(15,23,42,.08);
  --radius: 18px;

  /* vgrid (igual hero) */
  --grid-step: 32px;
  --grid-line: rgba(16,17,21,.08);
  --hatch-line: rgba(16,17,21,.05);
  --accent-1: rgba(120,86,255,.12);
  --accent-2: rgba(0,174,255,.10);
  --vignette: rgba(0,0,0,.12);

  color: var(--fg);
  background: var(--bg);
  padding-inline: var(--page-gutter);
  padding-block: clamp(50px, 7vw, 100px);
}

/* fundo vgrid (mesmo da hero) */
.featured-work::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1200px 600px at 20% 35%, var(--accent-1) 0%, transparent 55%),
    radial-gradient(900px 520px  at 80% 15%, var(--accent-2) 0%, transparent 45%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--vignette) 110%),
    repeating-linear-gradient(to right,
      var(--grid-line) 0, var(--grid-line) 1px,
      transparent 1px, transparent var(--grid-step)
    ),
    repeating-linear-gradient(to bottom,
      var(--grid-line) 0, var(--grid-line) 1px,
      transparent 1px, transparent var(--grid-step)
    ),
    repeating-linear-gradient(45deg,
      var(--hatch-line) 0, var(--hatch-line) 1px,
      transparent 1px, transparent 14px
    );
  background-blend-mode: screen, screen, normal, normal, normal, multiply;
  background-position:
    20% 35%,
    80% 15%,
    0 0,
    var(--gox) 0,
    var(--gox) 0,
    var(--gox) 0;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
}

/* dark mode */
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .featured-work{
  --bg: #0b0f1a;
  --fg: #e5e7eb;
  --muted: rgba(229,231,235,.72);

  --card-bg: #0f172a;
  --card-border: rgba(255,255,255,.10);
  --card-shadow: 0 16px 40px rgba(0,0,0,.35);

  --grid-line: rgba(255,255,255,.075);
  --hatch-line: rgba(255,255,255,.045);
  --accent-1: rgba(140,110,255,.20);
  --accent-2: rgba(60,200,255,.14);
  --vignette: rgba(0,0,0,.50);
}

/* título */
.featured-work .section-title{
  max-width: min(var(--container-w), 100%);
  margin: 0 auto clamp(22px, 3vw, 30px);
  text-align: center;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -.01em;
}

/* ===== Card destaque (vídeo + texto) ===== */
.featured-work .featured-project{
  max-width: min(var(--container-w), 100%);
  margin: clamp(18px, 4vw, 28px) auto;
  display: grid; gap: clamp(16px, 3vw, 24px);
  grid-template-columns: 1fr;
  align-items: center;

  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: clamp(16px, 2vw, 22px);
}
@media (min-width: 1024px){
  .featured-work .featured-project{
    grid-template-columns: 1.1fr .9fr;
  }
}

.featured-work .project-image{ display:grid; place-items:center; }
.featured-work .project-video{
  width: 100%;
  max-width: 820px;
  aspect-ratio: 16 / 9;
  display:block;
  border-radius: 16px;
  object-fit: cover;
  outline: 1px solid var(--card-border);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}

.featured-work .project-content .project-type{
  font-size:.8rem; letter-spacing:.12em; opacity:.75; margin: 2px 0 6px;
}
.featured-work .project-content .project-title{
  font-size: clamp(1.2rem, 2.1vw, 1.6rem);
  margin: 4px 0 8px;
}
.featured-work .project-description{
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 12px;
  font-size: 20px;
}

/* link com flyout (pequena ficha ao passar o mouse) */
.featured-work .project-link{
  position: relative;
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: rgba(0,0,0,.05);
  color: var(--fg);
  transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease;
}
.featured-work .project-link:hover{ transform: translateY(-1px); background: rgba(0,0,0,.08); }
.featured-work .project-link span{ opacity:.75; }

/* flyout usando attr() */
.featured-work .project-link::after{
  content: attr(data-title) "\A" attr(data-detail);
  white-space: pre-wrap;
  position:absolute; left:50%; top: calc(100% + 10px);
  transform: translateX(-50%);
  min-width: 260px; max-width: 360px;
  background: var(--card-bg);
  color: var(--fg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 12px 14px;
  opacity:0; pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 2;
}
.featured-work .project-link:hover::after,
.featured-work .project-link:focus-visible::after{
  opacity:1; transform: translate(-50%, 0);
}

/* ===== Grade de projetos ===== */
.featured-work .project-grid{
  max-width: min(var(--container-w), 100%);
  margin: clamp(12px, 3.5vw, 22px) auto 0;
  display:grid; gap: clamp(12px, 2.5vw, 18px);
  grid-template-columns: 1fr;
  align-items: stretch;
  grid-auto-rows: 1fr; /* alturas coerentes entre cards */
}
@media (min-width: 900px){
  .featured-work .project-grid{ grid-template-columns: 1fr 1fr; }
}

.featured-work .project-card{
  position: relative;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  overflow:hidden;

  display:flex; flex-direction:column;
}
.featured-work .project-card img{
  width:100%; aspect-ratio: 16/10; object-fit:cover; display:block;
}
.featured-work .project-card-info{
  padding: 14px 16px;
}
.featured-work .project-card .project-type{
  font-size:1.2rem; letter-spacing:.12em; opacity:.75; margin:0 0 4px; 
}
.featured-work .project-card .project-title{
  font-size: 1.05rem; margin:0;
}

/* microinteração */
.featured-work .project-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0,0,0,.20);
}

/* acessibilidade utilitária */
.featured-work .section-title:focus-visible,
.featured-work .project-link:focus-visible{
  outline: 2px solid #22d3ee; outline-offset: 3px;
}


/* ============================================================
   BRANDS — VGRID igual à hero + marquee acessível
   ============================================================ */
.brands{
  position: relative;
  isolation: isolate;

  /* container & gutters */
  --container-w: var(--container-w, 1200px);
  --page-gutter: clamp(16px, 4vw, 40px);
  --gox: var(--page-gutter);

  /* paleta base (LIGHT) */
  --bg: #ffffff;
  --fg: #0f172a;
  --muted: rgba(15,23,42,.72);

  /* vgrid (igual à hero) */
  --grid-step: 32px;
  --grid-line: rgba(16,17,21,.08);
  --hatch-line: rgba(16,17,21,.05);
  --accent-1: rgba(120,86,255,.12);
  --accent-2: rgba(0,174,255,.10);
  --vignette: rgba(0,0,0,.12);

  color: var(--fg);
  background: var(--bg);
  padding-inline: var(--page-gutter);
  padding-block: clamp(36px, 5vw, 64px);
}

/* Fundo VGRID */
.brands::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1200px 600px at 20% 35%, var(--accent-1) 0%, transparent 55%),
    radial-gradient(900px 520px  at 80% 15%, var(--accent-2) 0%, transparent 45%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--vignette) 110%),
    repeating-linear-gradient(to right,
      var(--grid-line) 0, var(--grid-line) 1px,
      transparent 1px, transparent var(--grid-step)
    ),
    repeating-linear-gradient(to bottom,
      var(--grid-line) 0, var(--grid-line) 1px,
      transparent 1px, transparent var(--grid-step)
    ),
    repeating-linear-gradient(45deg,
      var(--hatch-line) 0, var(--hatch-line) 1px,
      transparent 1px, transparent 14px
    );
  background-blend-mode: screen, screen, normal, normal, normal, multiply;
  background-position:
    20% 35%, 80% 15%, 0 0, var(--gox) 0, var(--gox) 0, var(--gox) 0;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
}

/* Dark mode */
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .brands{
  --bg:#0b0f1a; --fg:#e5e7eb; --muted:rgba(229,231,235,.72);
  --grid-line:rgba(255,255,255,.075);
  --hatch-line:rgba(255,255,255,.045);
  --accent-1:rgba(140,110,255,.20);
  --accent-2:rgba(60,200,255,.14);
  --vignette:rgba(0,0,0,.50);
}

/* Conteúdo */
.brands .brands-inner{
  max-width: min(var(--container-w), 100%);
  margin-inline: auto;
}
.brands .brands-intro{
  text-align:center; margin:0 0 clamp(14px,2.5vw,20px);
  color: var(--muted);
  font-size: 30px;
}

/* Marquee */
.brands .brand-strip{
  position:relative; overflow:hidden;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  padding-block: 12px;
  /* fade nas laterais */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .brands .brand-strip{
  border-color: rgba(255,255,255,.10);
}
.brands .brand-track{
  display:flex; align-items:center;
  gap: clamp(32px, 6vw, 72px);
  width: max-content;
  animation: brands-marquee var(--marquee-speed, 32s) linear infinite;
}
@keyframes brands-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); } /* precisa de sequência duplicada no HTML */
}
.brands .brand{ flex:0 0 auto; opacity:.9; }
.brands .brand img{
  display:block;
  height: clamp(22px, 2.8vw, 40px);
  width: auto;
  filter: grayscale(100%) opacity(.9);
  transition: filter .2s ease, transform .15s ease;
}
.brands .brand img:hover{ filter: grayscale(0%) opacity(1); transform: translateY(-1px); }

/* pausa no hover/foco */
.brands .brand-strip:hover .brand-track,
.brands .brand-strip:focus-within .brand-track{ animation-play-state: paused; }

/* Acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce){
  .brands .brand-track{ animation: none; transform: none; }
}

/* ============================================================
   PROJECT CTA — VGRID + botão roxo
   ============================================================ */
.project-cta{
  position:relative; isolation:isolate;

  --container-w: var(--container-w, 1200px);
  --page-gutter: clamp(16px, 4vw, 40px);
  --gox: var(--page-gutter);

  --bg:#ffffff; --fg:#0f172a;

  --grid-step:32px;
  --grid-line:rgba(16,17,21,.08);
  --hatch-line:rgba(16,17,21,.05);
  --accent-1:rgba(120,86,255,.12);
  --accent-2:rgba(0,174,255,.10);
  --vignette:rgba(0,0,0,.12);

  color:var(--fg); background:var(--bg);
  padding-inline: var(--page-gutter);
  padding-block: clamp(36px, 6vw, 72px);
  text-align:center;
}
.project-cta::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1200px 600px at 20% 35%, var(--accent-1) 0%, transparent 55%),
    radial-gradient(900px 520px  at 80% 15%, var(--accent-2) 0%, transparent 45%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--vignette) 110%),
    repeating-linear-gradient(to right,
      var(--grid-line) 0, var(--grid-line) 1px,
      transparent 1px, transparent var(--grid-step)
    ),
    repeating-linear-gradient(to bottom,
      var(--grid-line) 0, var(--grid-line) 1px,
      transparent 1px, transparent var(--grid-step)
    ),
    repeating-linear-gradient(45deg,
      var(--hatch-line) 0, var(--hatch-line) 1px,
      transparent 1px, transparent 14px
    );
  background-blend-mode: screen, screen, normal, normal, normal, multiply;
  background-position:
    20% 35%, 80% 15%, 0 0, var(--gox) 0, var(--gox) 0, var(--gox) 0;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
}
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .project-cta{
  --bg:#0b0f1a; --fg:#e5e7eb;
  --grid-line:rgba(255,255,255,.075);
  --hatch-line:rgba(255,255,255,.045);
  --accent-1:rgba(140,110,255,.20);
  --accent-2:rgba(60,200,255,.14);
  --vignette:rgba(0,0,0,.50);
}

.project-cta .cta-button-wrapper{
  max-width: min(var(--container-w), 100%);
  margin-inline:auto;
}

/* Botão roxo */
.project-cta .btn-purple{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 220px; padding: 14px 18px;
  border-radius: 12px; text-decoration:none; font-weight: 600;
  color: #0b0f1a;
  background: linear-gradient(180deg, #c084fc, #a855f7);
  box-shadow: 0 16px 40px rgba(168,85,247,.35), inset 0 0 0 1px rgba(255,255,255,.22);
  transition: transform .15s ease, box-shadow .2s ease;
}
.project-cta .btn-purple:hover{
  transform: translateY(-1px);
  box-shadow: 0 20px 48px rgba(168,85,247,.4), inset 0 0 0 1px rgba(255,255,255,.25);
}
.project-cta .btn-purple:focus-visible{
  outline: 2px solid #22d3ee; outline-offset: 3px;
}


/* ============================================================
   TESTIMONIALS — VGRID da hero + cards elegantes e profundos
   ============================================================ */

/* Reaproveita seu fundo VGRID já existente na .testimonials-section.
   Aqui só estilizamos o carrossel e cards, sem tocar no body. */
/* ==========================================================
   TESTIMONIALS — PALETA AJUSTADA + VGRID RESTAURADO (DROP-IN)
   Mantém seu fundo VGRID e aplica o carrossel futurista azul/ciano
   (escopo: .testimonials-section)
   ========================================================== */

.testimonials-section{
  /* Paleta base (light) */
  --bg: #ffffff;
  --fg: #0f172a;
  --muted: rgba(15,23,42,.72);

  /* Cards */
  --card-bg: #0e1526;                      /* vidro escuro elegante */
  --card-border: rgba(32, 64, 120, .30);
  --card-shadow: 0 20px 50px rgba(0,0,0,.35);
  --radius: 18px;

  /* Estrelas e detalhes */
  --star: #ffd36b;

  /* === Paleta NEON (ajustada) === */
  --glow-primary: rgba(59,130,246,.70);    /* azul */
  --glow-secondary: rgba(56,189,248,.60);  /* ciano */
  --neon-blue: rgba(59,130,246,.85);       /* azul intenso */
  --neon-cyan: rgba(56,189,248,.85);       /* ciano intenso */
  --neon-violet: rgba(139,92,246,.70);     /* violeta sutil */

  /* === VGRID (seu fundo restaurado) === */
  --grid-step: 32px;
  --grid-line: rgba(16,17,21,.08);
  --hatch-line: rgba(16,17,21,.05);
  --accent-1: rgba(12,28,63,.16);          /* glow azulado */
  --accent-2: rgba(56,189,248,.12);        /* glow ciano */
  --vignette: rgba(0,0,0,.12);

  color: var(--fg);
  background: var(--bg);
  padding-inline: clamp(16px, 4vw, 40px);
  padding-block: clamp(50px, 7vw, 100px);
  position: relative;
  isolation: isolate;
}

/* === FUNDO VGRID (restaurado) === */
.testimonials-section::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1200px 600px at 20% 35%, var(--accent-1) 0%, transparent 55%),
    radial-gradient(900px 520px  at 80% 15%, var(--accent-2) 0%, transparent 45%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--vignette) 110%),
    repeating-linear-gradient(to right, var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent var(--grid-step)),
    repeating-linear-gradient(to bottom, var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent var(--grid-step)),
    repeating-linear-gradient(45deg, var(--hatch-line) 0, var(--hatch-line) 1px, transparent 1px, transparent 14px);
  background-blend-mode: screen, screen, normal, normal, normal, multiply;
  background-position: 20% 35%, 80% 15%, 0 0, 0 0, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
}

/* DARK MODE (tokens coerentes) */
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .testimonials-section{
  --bg: #0b0f1a;
  --fg: #e5e7eb;
  --muted: rgba(229,231,235,.74);

  --card-bg: #0f172a;
  --card-border: rgba(56,189,248,.28);
  --card-shadow: 0 26px 60px rgba(0,0,0,.45);

  --grid-line: rgba(255,255,255,.075);
  --hatch-line: rgba(255,255,255,.045);
  --accent-1: rgba(12,28,63,.28);
  --accent-2: rgba(56,189,248,.18);
  --vignette: rgba(0,0,0,.50);
}

/* ===== Título ===== */
.testimonials-section .testimonials-title{
  max-width: min(var(--container-w,1200px), 100%);
  margin: 0 auto clamp(22px, 3vw, 30px);
  text-align: center;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -.01em;
}

/* ===== Carrossel (cores ajustadas) ===== */
.testimonials-section .carousel-container{
  width: 100%;
  max-width: min(var(--container-w,1200px), 100%);
  margin: 0 auto;
  position: relative;
  perspective: 1600px;
  padding-block: clamp(8px, 2vw, 16px);
  z-index: 0;
}
.testimonials-section .carousel-track{
  display:flex;
  transition: transform .75s cubic-bezier(.21,.61,.35,1);
  transform-style: preserve-3d;
}
.testimonials-section .carousel-card{
  min-width: 320px; max-width: 320px;
  margin: 0 clamp(10px, 2vw, 25px);
  background: linear-gradient(135deg, color-mix(in oklab, var(--card-bg) 90%, #0a1224 10%), var(--card-bg));
  border-radius: clamp(14px, 1.2rem, 22px);
  overflow:hidden;
  backdrop-filter: blur(10px);
  border:1px solid var(--card-border);
  box-shadow: var(--card-shadow), 0 0 30px rgba(56,189,248,.16);
  transition: all .6s cubic-bezier(.21,.61,.35,1);
  transform-origin: center center;
  position: relative;
}
/* Borda holográfica com azul/ciano/violeta */
.testimonials-section .carousel-card::before{
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius: inherit;
  background: linear-gradient(45deg, transparent 0%, var(--neon-blue) 25%, var(--neon-cyan) 55%, var(--neon-violet) 80%, transparent 100%);
  filter: blur(8px); opacity:0; transition: opacity .5s ease;
  animation: t-borderGlow 6s linear infinite;
}
@keyframes t-borderGlow{
  0%{ background-position:0% 50%; opacity:.28 }
  50%{ background-position:100% 50%; opacity:.44 }
  100%{ background-position:0% 50%; opacity:.28 }
}
.testimonials-section .carousel-card.is-active::before{
  opacity:1; background-size:300% 300%;
}

/* Estados */
.testimonials-section .carousel-card:not(.is-active){
  transform: scale(.84) rotateY(28deg) translateZ(-120px);
  opacity:.55; filter:saturate(.8) brightness(.9);
}
.testimonials-section .carousel-card.is-prev{
  transform-origin: right center;
  transform: scale(.82) rotateY(36deg) translateX(-48px) translateZ(-150px);
}
.testimonials-section .carousel-card.is-next{
  transform-origin: left center;
  transform: scale(.82) rotateY(-36deg) translateX(48px) translateZ(-150px);
}
.testimonials-section .carousel-card.is-active{
  transform: scale(1) rotateY(0) translateZ(0);
  opacity:1; z-index:2;
  box-shadow: 0 25px 50px rgba(0,0,0,.5), 0 0 40px var(--glow-primary), inset 0 0 20px rgba(56,189,248,.10);
  filter:saturate(1.06) brightness(1.04);
}

/* Imagem e overlays */
.testimonials-section .card-image-container{
  position: relative; height: 200px; overflow:hidden;
  border-bottom: 1px solid rgba(56,189,248,.28);
}
.testimonials-section .card-image{
  width:100%; height:100%; object-fit:cover; transition: transform 1.2s ease;
}
.testimonials-section .carousel-card.is-active .card-image{ transform: scale(1.05); }
.testimonials-section .card-image-container::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, rgba(56,189,248,.12), transparent 70%),
              radial-gradient(circle at 82% 18%, rgba(59,130,246,.18), transparent 50%);
}
.testimonials-section .card-image-container::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.45;
  background: repeating-linear-gradient(0deg, rgba(56,189,248,.06) 0px, rgba(56,189,248,.06) 1px, transparent 1px, transparent 4px);
}

/* Conteúdo */
.testimonials-section .card-content{ padding: 1.4rem 1.6rem; color: var(--fg); }
.testimonials-section .stars{
  font-size: .95rem; letter-spacing:.12em; color: var(--star); margin-bottom:.4rem;
}
.testimonials-section .card-description{
  font-size: .98rem; line-height: 1.7; color: var(--muted); font-weight: 400;
}
.testimonials-section .card-stats{
  display:flex; justify-content: space-between; margin-top: .8rem;
  font-size: .78rem; color: color-mix(in oklab, var(--fg) 55%, transparent);
}

/* Botões & indicadores (azul/ciano) */
.testimonials-section .carousel-button{
  position:absolute; top:50%; transform: translateY(-50%);
  background: rgba(12,74,110,.30); color:#38bdf8;
  border:1px solid rgba(14,165,233,.40);
  border-radius:50%; width:44px; height:44px; display:grid; place-items:center;
  cursor:pointer; z-index:3; transition: all .25s ease; backdrop-filter: blur(5px);
  box-shadow: 0 0 15px rgba(56,189,248,.20);
}
.testimonials-section .carousel-button:hover{
  background: rgba(14,165,233,.30); color:#e0f2fe; transform: translateY(-50%) scale(1.08);
  box-shadow: 0 0 20px rgba(56,189,248,.40);
}
.testimonials-section .carousel-button.prev{ left:-6px; }
.testimonials-section .carousel-button.next{ right:-6px; }

.testimonials-section .carousel-indicators{
  display:flex; justify-content:center; gap:10px; margin-top: 1.25rem;
}
.testimonials-section .indicator{
  width:24px; height:4px; border:0; background: rgba(56,189,248,.22);
  border-radius:2px; cursor:pointer; transition: all .25s ease;
}
.testimonials-section .indicator.active{
  background:#38bdf8; box-shadow: 0 0 10px #38bdf8;
}

/* Responsivo */
@media (max-width: 768px){
  .testimonials-section .carousel-button{ width:40px; height:40px; }
  .testimonials-section .carousel-button.prev{ left:6px; }
  .testimonials-section .carousel-button.next{ right:6px; }
  .testimonials-section .carousel-card{ min-width:260px; max-width:260px; }
  .testimonials-section .card-image-container{ height:160px; }
  .testimonials-section .carousel-card:not(.is-active){ transform: scale(.88) rotateY(22deg); }
  .testimonials-section .carousel-card.is-prev{ transform: scale(.84) rotateY(28deg) translateX(-24px); }
  .testimonials-section .carousel-card.is-next{ transform: scale(.84) rotateY(-28deg) translateX(24px); }
}

/* Acessibilidade / menos movimento */
@media (prefers-reduced-motion: reduce){
  .testimonials-section .carousel-track, 
  .testimonials-section .carousel-card,
  .testimonials-section .card-image { transition: none !important; animation: none !important; }
}

/* ======== Cards ajustados para melhor leitura no modo claro ======== */
.testimonials-section .carousel-card{
  min-width: 320px;
  max-width: 320px;
  margin: 0 clamp(10px, 2vw, 25px);
  background: var(--card-bg);
  border-radius: clamp(14px, 1.2rem, 22px);
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow), 0 0 30px rgba(56,189,248,.12);
  transition: all .6s cubic-bezier(.21,.61,.35,1);
  transform-origin: center center;
  position: relative;
}

/* 💡 MODO CLARO: cards claros com texto escuro */
:where(html, body):not(.dark):not(.dark-mode) .testimonials-section .carousel-card{
  --card-bg: #f8fafc;                        /* branco azulado */
  --card-border: rgba(0,0,0,.08);
  --fg: #0f172a;
  --muted: rgba(15,23,42,.72);
  color: var(--fg);
  box-shadow: 0 10px 28px rgba(0,0,0,.08), 0 0 14px rgba(56,189,248,.08);
}

/* MODO ESCURO mantido */
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .testimonials-section .carousel-card{
  --card-bg: #0f172a;
  --card-border: rgba(56,189,248,.28);
  --fg: #e5e7eb;
  --muted: rgba(229,231,235,.74);
  color: var(--fg);
}

/* Texto e estrelas */
.testimonials-section .card-content{
  padding: 1.4rem 1.6rem;
  color: var(--fg);
}
.testimonials-section .stars{
  font-size: .95rem;
  letter-spacing:.12em;
  color: var(--star);
  margin-bottom:.4rem;
}
.testimonials-section .card-description{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
  font-weight: 400;
}
.testimonials-section .card-stats{
  display:flex;
  justify-content: space-between;
  margin-top: .8rem;
  font-size: .8rem;
  color: color-mix(in oklab, var(--fg) 60%, transparent);
}




.testimonials-section {
  --glow-primary: rgba(56,189,248,.70);
  --glow-secondary: rgba(94,234,212,.60);
  --neon-pink: rgba(236,72,153,.80);
  --neon-blue: rgba(59,130,246,.80);
  --neon-green: rgba(16,185,129,.80);
}

/* Container */
.testimonials-section .carousel-container{
  width: 100%;
  max-width: min(var(--container-w,1200px), 100%);
  margin: 0 auto;
  position: relative;
  perspective: 1600px;
  padding-block: clamp(8px, 2vw, 16px);
  z-index: 0; /* mantém abaixo do título */
}
.testimonials-section .carousel-track{
  display:flex;
  transition: transform .75s cubic-bezier(.21,.61,.35,1);
  transform-style: preserve-3d;
}

/* Cards */
.testimonials-section .carousel-card{
  min-width: 320px;
  max-width: 320px;
  margin: 0 clamp(10px, 2vw, 25px);
  background: linear-gradient(135deg, color-mix(in oklab, var(--card-bg,#0f172a) 85%, transparent), var(--card-bg,#0f172a));
  border-radius: clamp(14px, 1.2rem, 22px);
  overflow:hidden;
  backdrop-filter: blur(10px);
  border:1px solid color-mix(in oklab, var(--card-border, rgba(94,234,212,.20)) 80%, transparent);
  box-shadow: 0 15px 25px rgba(0,0,0,.45), 0 0 30px rgba(56,189,248,.20);
  transition: all .6s cubic-bezier(.21,.61,.35,1);
  transform-origin: center center;
  position: relative;
}

/* Borda holográfica (ativa) */
.testimonials-section .carousel-card::before{
  content:""; position:absolute; inset:-2px; z-index:-1;
  background: linear-gradient(45deg, transparent 0%, var(--neon-blue) 25%, var(--neon-green) 50%, var(--neon-pink) 75%, transparent 100%);
  border-radius: inherit; filter: blur(8px); opacity:0; transition: opacity .5s ease;
  animation: testimonials-borderGlow 6s linear infinite;
}
@keyframes testimonials-borderGlow{
  0%{ background-position:0% 50%; opacity:.3 }
  50%{ background-position:100% 50%; opacity:.5 }
  100%{ background-position:0% 50%; opacity:.3 }
}
.testimonials-section .carousel-card.is-active::before{
  opacity:1; background-size:300% 300%;
}

/* Estados 3D */
.testimonials-section .carousel-card:not(.is-active){
  transform: scale(.84) rotateY(30deg) translateZ(-120px);
  opacity:.55; filter:saturate(.7) brightness(.85);
}
.testimonials-section .carousel-card.is-prev{
  transform-origin: right center;
  transform: scale(.8) rotateY(40deg) translateX(-60px) translateZ(-160px);
}
.testimonials-section .carousel-card.is-next{
  transform-origin: left center;
  transform: scale(.8) rotateY(-40deg) translateX(60px) translateZ(-160px);
}
.testimonials-section .carousel-card.is-active{
  transform: scale(1) rotateY(0) translateZ(0);
  opacity:1; z-index:2;
  box-shadow: 0 25px 50px rgba(0,0,0,.5), 0 0 40px var(--glow-primary), inset 0 0 20px rgba(56,189,248,.10);
  filter:saturate(1.08) brightness(1.05);
}

/* Imagem */
.testimonials-section .card-image-container{
  position: relative; height: 200px; overflow:hidden;
  border-bottom: 1px solid rgba(94,234,212,.30);
}
.testimonials-section .card-image{
  width:100%; height:100%; object-fit:cover; transition: transform 1.2s ease;
}
.testimonials-section .carousel-card.is-active .card-image{ transform: scale(1.05); }

/* Overlays da imagem */
.testimonials-section .card-image-container::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, rgba(56,189,248,.10), transparent 70%),
              radial-gradient(circle at 80% 20%, rgba(94,234,212,.15), transparent 50%);
}
.testimonials-section .card-image-container::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background: repeating-linear-gradient(0deg, rgba(6,182,212,.05) 0px, rgba(6,182,212,.05) 1px, transparent 1px, transparent 4px);
}

/* Conteúdo */
.testimonials-section .card-content{ padding: 1.4rem 1.6rem; color: var(--fg); }
.testimonials-section .stars{
  font-size: .95rem; letter-spacing:.12em; color: var(--star,#ffd36b); margin-bottom:.4rem;
}
.testimonials-section .card-description{
  font-size: .98rem; line-height: 1.7; color: var(--muted); font-weight: 400;
}
.testimonials-section .card-stats{
  display:flex; justify-content: space-between; margin-top: .8rem;
  font-size: .78rem; color: color-mix(in oklab, var(--fg) 55%, transparent);
}

/* Botões */
.testimonials-section .carousel-button{
  position:absolute; top:50%; transform: translateY(-50%);
  background: rgba(12,74,110,.30); color:#38bdf8;
  border:1px solid rgba(14,165,233,.40);
  border-radius: 50%; width: 44px; height:44px;
  display:grid; place-items:center; cursor:pointer; z-index:3;
  transition: all .25s ease; backdrop-filter: blur(5px); box-shadow: 0 0 15px rgba(56,189,248,.20);
}
.testimonials-section .carousel-button:hover{
  background: rgba(14,165,233,.30); color:#e0f2fe; transform: translateY(-50%) scale(1.08);
  box-shadow: 0 0 20px rgba(56,189,248,.40);
}
.testimonials-section .carousel-button.prev{ left: -6px; }
.testimonials-section .carousel-button.next{ right: -6px; }
@media (max-width: 768px){
  .testimonials-section .carousel-button{ width:40px; height:40px; }
  .testimonials-section .carousel-button.prev{ left: 6px; }
  .testimonials-section .carousel-button.next{ right: 6px; }
}

/* Indicadores */
.testimonials-section .carousel-indicators{
  display:flex; justify-content:center; gap:10px; margin-top: 1.25rem;
}
.testimonials-section .indicator{
  width: 24px; height: 4px; border:0;
  background: rgba(56,189,248,.20);
  border-radius:2px; cursor:pointer; transition: all .25s ease;
}
.testimonials-section .indicator.active{
  background:#38bdf8; box-shadow: 0 0 10px #38bdf8;
}

/* Responsivo */
@media (max-width: 768px){
  .testimonials-section .carousel-card{ min-width: 260px; max-width:260px; }
  .testimonials-section .card-image-container{ height:160px; }
  .testimonials-section .carousel-card:not(.is-active){ transform: scale(.88) rotateY(22deg); }
  .testimonials-section .carousel-card.is-prev{ transform: scale(.84) rotateY(28deg) translateX(-24px); }
  .testimonials-section .carousel-card.is-next{ transform: scale(.84) rotateY(-28deg) translateX(24px); }
}

/* A11y & motion */
@media (prefers-reduced-motion: reduce){
  .testimonials-section .carousel-track, 
  .testimonials-section .carousel-card,
  .testimonials-section .card-image { transition: none !important; animation: none !important; }
}


/* Acima apenas a parte do index */



/* ============================================================================
   ABOUT CARNAÚBA — Vitrine estilo “Radiant” com VGRID + dark/light
   Isolado por seletor .about-carnauba-section (não vaza)
   ========================================================================== */
   
   
.about-carnauba-section{
  --container-w: var(--container-w, 1200px);
  --page-gutter: clamp(16px, 4vw, 40px);
  --gox: var(--page-gutter);

  /* LIGHT tokens para o VGRID */
  --grid-step:32px;
  --grid-line:rgba(16,17,21,.08);
  --hatch-line:rgba(16,17,21,.05);
  --accent-1:rgba(120,86,255,.12);
  --accent-2:rgba(0,174,255,.10);
  --vignette:rgba(0,0,0,.12);

  position: relative;
  isolation: isolate;
  padding-inline: var(--page-gutter);
  padding-block: clamp(40px, 8vw, 96px);
}

/* VGRID idêntico (camadas e mistura) */
.about-carnauba-section::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1200px 600px at 20% 35%, var(--accent-1) 0%, transparent 55%),
    radial-gradient(900px 520px  at 80% 15%, var(--accent-2) 0%, transparent 45%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--vignette) 110%),
    repeating-linear-gradient(to right, var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent var(--grid-step)),
    repeating-linear-gradient(to bottom, var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent var(--grid-step)),
    repeating-linear-gradient(45deg, var(--hatch-line) 0, var(--hatch-line) 1px, transparent 1px, transparent 14px);
  background-blend-mode: screen, screen, normal, normal, normal, multiply;
  background-position:
    20% 35%, 80% 15%, 0 0, var(--gox) 0, var(--gox) 0, var(--gox) 0;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 60%, transparent 100%);
}

/* DARK override */
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .about-carnauba-section{
  --grid-line:rgba(255,255,255,.075);
  --hatch-line:rgba(255,255,255,.045);
  --accent-1:rgba(140,110,255,.20);
  --accent-2:rgba(60,200,255,.14);
  --vignette:rgba(0,0,0,.50);
}

/* ====== Layout / wrapper ====== */
.about-carnauba-wrap{
  max-width: var(--container-w);
  margin-inline: auto;
}

/* ====== Card principal com estética “Radiant” ====== */
.about-hero-card{
  --card-radius: 24px;
  --card-border: color-mix(in oklab, #fff 65%, #000 35% / 10%);
  --shadow-1: 0 10px 30px rgba(0,0,0,.10), 0 2px 10px rgba(0,0,0,.05);

  display: grid;
  gap: clamp(20px, 3vw, 40px);
  grid-template-columns: 1fr;
  padding: clamp(20px, 4vw, 44px);
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-1);
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(255,217,183,.85) 0%, rgba(255,223,244,.75) 45%, rgba(208,224,255,.85) 100%);
  backdrop-filter: saturate(120%) blur(6px);
}

/* Gradient ajustado para dark */
:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .about-hero-card{
  background:
    radial-gradient(140% 160% at 10% 0%, rgba(60,40,120,.60) 0%, rgba(100,60,160,.55) 50%, rgba(50,90,160,.60) 100%);
  --card-border: rgba(255,255,255,.10);
  --shadow-1: 0 10px 30px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
}

/* Desktop: duas colunas (texto | vitrine) */
@media (min-width: 960px){
  .about-hero-card{
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
  }
}

/* ====== Tipografia e blocos ====== */
.about-carnauba-title{
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.about-carnauba-left{
  display: grid;
  gap: 16px;
}

.about-carnauba-block h4{
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  margin: 0 0 6px;
  font-size: 27px;
}

.about-carnauba-block p{
  margin: 0;
  opacity: .88;
  font-size: 25px;
}

/* ====== Showcase (direita) ====== */
.showcase-section.about-carnauba{
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
}

/* Moldura tipo “device” para dar profundidade */
.showcase-section.about-carnauba .device-frame{
  position: absolute;
  inset: -10px -10px auto auto;
  width: min(426px, 46vw);
  height: min(530px, 74vh);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.15));
  border: 1px solid rgba(255,255,255,.35);
  filter: drop-shadow(0 16px 36px rgba(0,0,0,.18));
  z-index: 0;
  pointer-events: none;
  display: none; /* mobile esconde */
}

@media (min-width: 960px){
  .showcase-section.about-carnauba .device-frame{ display:block; }
}

/* Reel vertical */
.v-marquee{
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.65);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  height: min(520px, 70vh);
}

:where(html.dark, body.dark, .dark, .dark-mode, [data-theme="dark"]) .v-marquee{
  background: rgba(16,16,24,.35);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.v-col{ height: 100%; }
.v-reel{
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 8px;
  animation: vscroll 18s linear infinite;
}
.v-reel li{ display:block; }
.v-reel img{
  display: block;
  width: 100%; height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* Pausa animação para acessibilidade */
@media (prefers-reduced-motion: reduce){
  .v-reel{ animation: none; }
}

/* Direção para cima (loop) */
@keyframes vscroll{
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* ====== Caption ====== */
.showcase-section.about-carnauba .showcase-caption{
  display: grid;
  gap: 4px;
  text-align: center;
}
.showcase-section.about-carnauba .showcase-caption p{
  font-size: .9rem; opacity: .75; margin: 40px 0 0;
}
.showcase-section.about-carnauba .showcase-caption h3{
  margin: 0; font-size: clamp(1.1rem, 2vw, 1.25rem);
}

/* ====== Responsividade fina ====== */
@media (max-width: 959.98px){
  .about-carnauba-title{ text-wrap: balance; }
  .v-marquee{ height: min(420px, 56vh); }
}

/* Botões ou links que você inclua aqui terão hover/focus elegantes (optativo)
.about-hero-card a, .about-hero-card button{ transition: transform .2s ease, box-shadow .2s ease; }
.about-hero-card a:hover, .about-hero-card button:hover{ transform: translateY(-1px); }
.about-hero-card a:focus-visible, .about-hero-card button:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; } */




/* ===== Services v2 (usa os mesmos tokens da página) ===== */
:root{
  /* reusa se já existir; senão, define: */
  --svc-max: 1200px;
  --svc-grid: rgba(16,17,21,.06);
  --svc-accent: rgba(59,44,127,.10);
}
html[data-theme="dark"]{
  --svc-grid: rgba(255,255,255,.06);
  --svc-accent: rgba(220,210,255,.09);
}

/* Section com background trabalhado (grid + faixa diagonal) */
.services-section{
  position: relative;
  padding: 72px 16px;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  isolate: isolate;
}
.services-section::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(to right, transparent 0 31px, var(--svc-grid) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--svc-grid) 31px 32px);
  pointer-events:none; z-index:-2; opacity:.9;
}
.services-section::after{
  content:""; position:absolute; inset:-18% -8% -18% 50%;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, var(--svc-accent) 18px 19px),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.05), transparent 60%);
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
  pointer-events:none; z-index:-1;
}

/* Container + intro */
.services-container{ max-width: var(--svc-max); margin: 0 auto; }
.services-intro{ text-align: left; margin-bottom: 18px; }
.services-title{
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  letter-spacing:-.01em; margin:0 0 6px;
}
.services-subtitle{ margin:0; opacity:.9;font-size:20px; }

/* ===== Showcase principal (vídeo) ===== */
.showcase-section{ margin-top: 18px; }
.showcase-card{
  position: relative;
  border: 1px solid var(--btn-border);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,0));
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 12px; /* moldura externa */
  overflow: hidden;
}
html[data-theme="dark"] .showcase-card{
  background: linear-gradient(180deg, rgba(20,16,36,.55), rgba(12,10,22,.45));
}
.showcase-card::after{
  content:""; position:absolute; inset:10px; border-radius:14px;
  border:1px solid var(--svc-grid); pointer-events:none;
}

/* vídeo 16:9 com cantos arredondados */
.showcase-video{
  width: 100%; aspect-ratio: 16/9; display:block; border-radius: 12px;
  border: 1px solid var(--btn-border); background:#000; object-fit: cover;
}
.showcase-caption{
  margin-top: 10px;
}
.showcase-caption p{
  margin:0 0 4px; font-size:.85rem; letter-spacing:.15em; opacity:.7; font-weight:800;
}
.showcase-caption h3{
  margin:0; font-size:1.8rem; letter-spacing:-.01em;
}

/* ===== Showcase grid com flip-cards ===== */
.showcase-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}









/* Flip card (compatível com os anteriores) */
.flip-card{
  cursor: pointer; perspective: 1200px;
}
.flip-inner{
  position: relative; width: 100%; height: 73%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.flip-card:hover .flip-inner{ transform: rotateY(180deg); }
.flip-card.flipped .flip-inner{ transform: rotateY(180deg); }
.flip-front, .flip-back{
  position: relative;
  border: 1px solid var(--btn-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  backface-visibility: hidden;
}
.flip-front img, .flip-back img{
  display:block; width:100%; height: 297px; object-fit: cover; background:#000;
}
.flip-back{ position:absolute; inset:0; transform: rotateY(180deg); }

/* pulse sutil (reaproveita conceito) */
.pulse::after{
  content:""; position:absolute; inset:-25%;
  background: radial-gradient(600px 420px at 20% 15%, rgba(128,96,255,.35), transparent 60%);
  filter: blur(40px); opacity:.25; pointer-events:none;
  animation: pulseGlow 3.2s ease-in-out infinite;
}
@keyframes pulseGlow{ 0%,100%{opacity:.22} 50%{opacity:.32} }

/* ===== CTA botão ===== */
.cta-button{ display:grid; place-items:center; margin-top: 18px; }
.btn-primarya{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px; border-radius: 12px; font-weight: 900;
  border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--text);
  box-shadow: 0 1px 0 0 var(--outline) inset;
}
.btn-primarya:hover{ transform: translateY(-1px); transition: transform .2s ease; }

/* ===== Grid de serviços (cards simples) ===== */
.services-grid{
  margin-top: 22px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.service-card{
  border: 1px solid var(--btn-border);
  border-radius: 16px;
  background: var(--bg);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 16px;
}
.service-card h3{ margin:0 0 8px; font-size:1.05rem; letter-spacing:-.01em; }
.service-card p{ margin:0; opacity:.9; line-height:1.65; }

/* ====== GRID ====== */
.services-grid{
  --gap: clamp(14px, 3.2vw, 28px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--gap);
}
@media (max-width: 1100px){ .services-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 820px) { .services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .services-grid{ grid-template-columns: 1fr; } }

/* ====== CARD ======
   Mockup-style: base shadow + ambient shadow + borda sutil + vidro suave no header  */
.service-card{
  --card-bg: rgba(255,255,255,0.82);
  --card-txt: #111827;
  --card-muted: #4b5563;
  --radius: 20px;

  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  padding: 14px 14px 16px;
  border-radius: var(--radius);
  background: var(--card-bg);
  backdrop-filter: saturate(110%) blur(6px);
  -webkit-backdrop-filter: saturate(110%) blur(6px);

  /* depth stack */
  box-shadow:
    /* ambient grande (bem suave) */
    0 24px 60px rgba(15, 23, 42, .16),
    /* contacto na base */
    0 8px 24px rgba(15, 23, 42, .12),
    /* borda interior clarinha */
    inset 0 0 0 1px rgba(255,255,255,.40);

  /* pequeno brilho nos cantos, dá “plástico” */
  overflow: hidden;
  isolation: isolate;
}

/* faixa de “mockup header” */
.service-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height: 44px;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  pointer-events:none;
}

/* realce vertical muito sutil (parece peça moldada) */
.service-card::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(70% 50% at 50% -10%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(80% 60% at 50% 110%, rgba(0,0,0,.08), transparent 60%);
  mix-blend-mode: soft-light;
  pointer-events:none;
}

/* Hover eleva + reflete luz */
.service-card:hover{
  transform: translateY(-3px);
  box-shadow:
    0 30px 80px rgba(15,23,42,.20),
    0 12px 28px rgba(15,23,42,.14),
    inset 0 0 0 1px rgba(255,255,255,.45);
  transition: transform .28s cubic-bezier(.22,.9,.28,1), box-shadow .28s cubic-bezier(.22,.9,.28,1);
}

/* ====== MÍDIA (GIF/IMG) ====== */
.service-illustration{
  display:block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 8px);
  /* recorte e sombra interna -> “screen bevel” */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),
    inset 0 -18px 28px rgba(0,0,0,.10),
    0 8px 18px rgba(15,23,42,.10);
  object-fit: cover;
}

/* ====== TEXTOS ====== */
.service-card h3{
  margin: 6px 2px 0;
  font: 800 1.3rem/1.25 "Inter", system-ui;
  letter-spacing: .01em;
  color: var(--card-txt);
}
.service-card p{
  margin: 4px 2px 8px;
  color: var(--card-muted);
  font-size: 1.3rem;
}

/* ====== AÇÕES / BOTÃO ====== */
.service-actions{ display:flex; gap:10px; margin-top:auto; }
.btn-view{
  --btn-bg: #1f2937;        /* dark gray elegante */
  --btn-txt: #fff;
  --btn-shadow: 0 8px 18px rgba(3,7,18,.18);

  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--btn-bg);
  color: var(--btn-txt);
  text-decoration:none;
  font-weight: 700;
  box-shadow: var(--btn-shadow), inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.btn-view:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(3,7,18,.24), inset 0 0 0 1px rgba(255,255,255,.22);
}

/* ====== OPCIONAIS ====== */
.service-card.is-hidden{ display:none !important; }

/* modo claro/escuro (usa sua classe .light-mode no <body>) */
body.light-mode .service-card{
  --card-bg: #ffffff;
  --card-txt: #111827;
  --card-muted: #4b5563;
}
body:not(.light-mode) .service-card{
  --card-bg: rgb(7 20 56 / 62%);
  --card-txt: #f3f4f6;
  --card-muted: #cbd5e1;
  box-shadow:
    0 24px 60px rgba(0,0,0,.35),
    0 10px 24px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.10);
}
body:not(.light-mode) .btn-view{ --btn-bg:#334155; }




/* ===== Responsivo ===== */
@media (max-width: 980px){
  .showcase-grid{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .services-grid{ grid-template-columns: 1fr; }
  .flip-front img, .flip-back img{ height: 240px; }
}

/* --- Services Modal: estado base fechado --- */
#servicesModal.modal-overlay{
  position: fixed;
  inset: 0;
  display: none;                  /* fechado por padrão */
  place-items: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px) saturate(120%);
  z-index: 4000;                  /* acima de header/backdrop/drawer */
  padding: 24px;
}

/* Aberto (classe aplicada via JS) */
#servicesModal.modal-overlay.is-open{
  display: grid !important;       /* sobrescreve qualquer inline/style antigo */
}

/* Conteúdo de vidro */
#servicesModal .modal-content.glass-modal{
  width: min(680px, 92vw);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.06));
  border: 1px solid var(--btn-border);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  color: var(--text);
  padding: 22px 20px;
  position: relative;
  animation: modalPop .22s ease-out;
}
html[data-theme="dark"] #servicesModal .modal-content.glass-modal{
  background: linear-gradient(180deg, rgba(20,16,36,.7), rgba(12,10,22,.6));
}

/* Botão fechar */
#servicesModal .close-modal{
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--btn-border); background: var(--btn-bg);
  color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Form padrão */
#servicesModal form{ display: grid; gap: 10px; }
#servicesModal input, 
#servicesModal textarea{
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--btn-border); background: var(--bg); color: var(--text);
}
#servicesModal .btn-submit{
  padding: 12px 5px; border-radius: 12px; border: 1px solid var(--btn-border);
  background: var(--btn-bg); color: var(--text); font-weight: 800; cursor: pointer;
  box-shadow: 0 1px 0 0 var(--outline) inset;
}
#servicesModal .btn-submit:hover{ transform: translateY(-1px); }

@keyframes modalPop{
  from{ transform: translateY(6px) scale(.98); opacity: 0; }
  to  { transform: translateY(0)   scale(1);    opacity: 1; }
}




/* ============================================================
   AS Landing — Tema com Dark/Light robusto
   - Suporta: body.dark-mode / body.light-mode
              html[data-theme="dark"] / html[data-theme="light"]
              prefers-color-scheme (fallback)
   - Sem o background de Services nesta página
   - Hero com arte à ESQUERDA
   ============================================================ */

/* ============================================================
   AS Landing — Tema com Dark/Light + Hero (arte à DIREITA)
   - Suporta: body.dark-mode / body.light-mode
              html[data-theme="dark"] / html[data-theme="light"]
              prefers-color-scheme (fallback)
   - .as-hero-art fica à DIREITA por padrão; use .left para inverter
   - .as-section sem background extra (svc-bg apenas quando quiser)
   ============================================================ */

/* ---------- Tokens (LIGHT por padrão) ---------- */
:root{
  --as-radius: 28px;

  /* Tipos */
  --as-ink: #0f1225;
  --as-muted: rgba(15,18,37,.72);

  /* Hero (light) */
  --as-hero-g1:#eae6ff;
  --as-hero-g2:#f6f7ff;

  /* Acentos (light) */
  --as-lilac:#7a4cff;
  --as-purple:#5336ff;

  /* Cards (light) */
  --as-card-1:#f7f8ff;
  --as-card-2:#f2f4ff;
  --as-card-3:#ecefff;

  /* Sombras (light) */
  --as-shadow-1:0 18px 60px rgba(16,12,48,.18);
  --as-shadow-2:0 10px 30px rgba(16,12,48,.14);

  /* Tokens do background tracejado */
  --svc-grid: rgba(16,17,21,.06);
  --svc-accent: rgba(59,44,127,.10);
  --svc-grid-cell: 32px;      /* tamanho da malha */
  --svc-accent-gap: 18px;     /* espaçamento das listras diagonais */
  --svc-accent-thick: 1px;    /* espessura da listra */
  --svc-stripe-inset: -18% -8% -18% 50%; /* área da faixa diagonal */
}

/* ---------- LIGHT explícito por classe/atributo ---------- */
html[data-theme="light"],
body.light-mode{
  color-scheme: light;
}

/* ---------- DARK por classe/atributo ---------- */
html[data-theme="dark"],
body.dark-mode{
  color-scheme: dark;
  --as-ink: #edf1ff;
  --as-muted: rgba(237,241,255,.72);
  --as-hero-g1:#1a1740;
  --as-hero-g2:#0b0a16;
  --as-lilac:#a874ff;
  --as-purple:#6d48ff;
  --as-card-1:#0b0a16;
  --as-card-2:#101029;
  --as-card-3:#151632;
  --as-shadow-1:0 18px 60px rgba(10,7,30,.50);
  --as-shadow-2:0 10px 30px rgba(10,7,30,.35);

  --svc-grid: rgba(255,255,255,.06);
  --svc-accent: rgba(220,210,255,.09);
}

/* ---------- Prefere Dark do sistema (se não definiu classe/atributo) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body:not(.light-mode){
    color-scheme: dark;
    --as-ink: #edf1ff;
    --as-muted: rgba(237,241,255,.72);
    --as-hero-g1:#1a1740; --as-hero-g2:#0b0a16;
    --as-lilac:#a874ff;  --as-purple:#6d48ff;
    --as-card-1:#0b0a16; --as-card-2:#101029; --as-card-3:#151632;
    --as-shadow-1:0 18px 60px rgba(10,7,30,.50);
    --as-shadow-2:0 10px 30px rgba(10,7,30,.35);

    --svc-grid: rgba(255,255,255,.06);
    --svc-accent: rgba(220,210,255,.09);
  }
}

/* ---------- Helpers ---------- */
.as-wrap{ width:min(1180px, 100%); margin-inline:auto; padding:0 2px; }

/* ================= HERO ================= */
.as-hero{
  position:relative; overflow:hidden; border-radius:var(--as-radius);
  color:var(--as-ink);
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(167,116,255,.26) 0%, rgba(167,116,255,0) 55%),
    linear-gradient(180deg, var(--as-hero-g1) 0%, var(--as-hero-g2) 100%);
  box-shadow: var(--as-shadow-1);
  padding:56px 0 38px; min-height:320px;
}
.as-hero > .as-wrap{ position:relative; z-index:1; } /* texto sempre acima da arte */

/* Canto desfocado (frosty corner) */
.as-hero::after{
  content:""; position:absolute; left:-80px; top:-80px; width:320px; height:320px;
  background: radial-gradient(closest-side, rgba(182,147,255,.75), rgba(182,147,255,.18), transparent 70%);
  filter: blur(28px); pointer-events:none; opacity:.85;
}

/* Arte do HERO — DIREITA (padrão) */
.as-hero .as-hero-art{
  position:absolute; right:0; bottom:-20px; width:min(520px, 44%);
  aspect-ratio: 1.2/1;
  background:
    radial-gradient(40% 60% at 70% 20%, rgba(179,226,255,.24), transparent 60%),
    radial-gradient(50% 60% at 40% 70%, rgba(168,116,255,.28), transparent 60%);
  mask-image: radial-gradient(80% 80% at 70% 50%, #000 55%, transparent 85%);
  pointer-events:none;
  z-index:0;
}
/* Variante ESQUERDA (se quiser usar no futuro) */
/* Título/sub/CTA */
.as-title{
  font-size: clamp(36px, 7vw, 65px);
  letter-spacing:.04em; line-height:.95; font-weight:800;
  max-width: 10ch; text-transform:uppercase;
  filter: drop-shadow(0 10px 28px rgba(168,116,255,.35));
}
.as-sub{ margin-top:12px; font-size:clamp(16px, 2.4vw, 18px); color:var(--as-muted); max-width: 52ch; }

.as-actions{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.as-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 18px; border-radius:999px;
  text-decoration:none; font-weight:700; color:#0b0b16; background:#fff;
  box-shadow:var(--as-shadow-2); transition: transform .24s ease, box-shadow .24s ease; margin-top: 70px;
}
.as-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.25); }
.as-btn-primary{ color:#0b0b16; background: linear-gradient(90deg, var(--as-lilac), var(--as-purple)); }

/* KPIs */
.as-kpis{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin-top:24px; }
.as-kpi{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:14px 16px; border-radius:14px; color:var(--as-ink);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
html[data-theme="light"] .as-kpi,
body.light-mode .as-kpi{
  background: rgba(10,10,20,.05);
  border-color: rgba(10,10,40,.10);
}

/* ================= SEÇÕES ================= */
.as-section{ padding:42px 0; background: transparent; } /* Sem background extra aqui */

/* ---------- Cards vítreos ---------- */
.ui-glass{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color:var(--as-ink);
}
.ui-hairline{ border:1px solid rgba(255,255,255,.10); border-radius:18px; box-shadow:var(--as-shadow-2); }
html[data-theme="light"] .ui-glass,
body.light-mode .ui-glass{
  background: linear-gradient(180deg, rgba(10,10,30,.05), rgba(10,10,30,.02));
  border-color: rgba(10,10,30,.12);
}

/* ---------- Board / Pipeline ---------- */
.as-board{ position:relative; overflow:hidden; }
.as-bar{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}
.as-dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.45); display:inline-block; }
html[data-theme="light"] .as-dot,
body.light-mode .as-dot{ background:rgba(40,44,80,.35); }
.as-top-actions{ margin-left:auto; display:flex; gap:8px; }
.as-chip-mini{
  width:28px; height:28px; display:grid; place-items:center;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
}
html[data-theme="light"] .as-chip-mini,
body.light-mode .as-chip-mini{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); }

.as-layout{ display:grid; grid-template-columns: 180px 1fr; min-height:280px; }
.as-side{
  padding:16px; border-right:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.as-sbtn{
  display:block; width:100%; text-align:left; padding:10px 12px; margin-bottom:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  border-radius:12px; color:var(--as-ink); font-weight:600;
}
.as-sbtn.is-active{ background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); }
html[data-theme="light"] .as-sbtn,
body.light-mode .as-sbtn{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); }

.as-main{ padding:16px; display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.as-tile{
  min-height:120px; border:1px solid rgba(255,255,255,.10); border-radius:14px;
  background: rgba(255,255,255,.04); box-shadow: var(--as-shadow-2); padding:14px;
  will-change: transform; transform-style: preserve-3d;
}
html[data-theme="light"] .as-tile,
body.light-mode .as-tile{ background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }

.as-kicker{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--as-muted); }
.as-skelline{
  margin-top:8px; height:10px; border-radius:999px;
  background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  background-size: 200% 100%;
}
.as-skelline.as-shimmer{ animation: asShimmer 1.4s ease-in-out infinite; }
@keyframes asShimmer{ to { background-position: -200% 0; } }

.as-ghostbtn{ margin-top:10px; display:inline-block; color:var(--as-ink); opacity:.85; text-decoration:underline; }
.as-chart, .as-bars{ height:86px; margin-top:10px; border-radius:10px; background: linear-gradient(180deg, rgba(179,226,255,.14), rgba(168,116,255,.10)); }

.as-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:var(--as-ink); font-weight:700;
}
html[data-theme="light"] .as-pill,
body.light-mode .as-pill{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); }

/* Estados visuais do board */
#asBoard[data-state="1"] .tile-welcome{ outline:2px solid rgba(167,116,255,.35); outline-offset:-2px; }
#asBoard[data-state="2"] .tile-engagement{ outline:2px solid rgba(179,226,255,.35); outline-offset:-2px; }
#asBoard[data-state="3"] .tile-perf{ outline:2px solid rgba(120,200,255,.35); outline-offset:-2px; }

/* ---------- Benefícios ---------- */
.as-head h2{ font-size: clamp(28px, 4vw, 42px); margin:0 0 8px; color:var(--as-ink); }
.as-head p{ color:var(--as-muted); margin:0 0 18px; }
.as-grid3{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.as-cell{ padding:18px; color:var(--as-ink); }
.as-cell h3{ margin:0 0 6px; font-size:18px; }
.as-cell p{ margin:0; color:var(--as-muted); }

/* ---------- CTA ---------- */
.as-cta .as-wrap{ text-align:center; }

/* ================= Timeline ================= */
.as-line{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.as-step{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:16px;
  box-shadow: var(--as-shadow-2, 0 10px 30px rgba(10,7,30,.14));
  color: var(--as-ink, #0f1225);
}
.as-step.is-active{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
}
.as-step h4{ margin:8px 0 6px; font-size:18px; color:var(--as-ink, #0f1225); }
.as-step p{ margin:0; color:var(--as-muted, rgba(15,18,37,.72)); }
.as-ico{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(167,116,255,.22), rgba(167,116,255,.08));
  border:1px solid rgba(255,255,255,.12);
  color: var(--as-ink, #0f1225);
}
html[data-theme="light"] .as-step,
body.light-mode .as-step{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}
html[data-theme="light"] .as-step.is-active,
body.light-mode .as-step.is-active{
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.03));
}
html[data-theme="light"] .as-ico,
body.light-mode .as-ico{
  background: linear-gradient(180deg, rgba(120,100,255,.16), rgba(120,100,255,.06));
  border-color: rgba(0,0,0,.08);
}

/* ================= Reveal (.reveal.in vem do seu JS) ================= */
.reveal{ opacity:0; transform: translateY(8px); }
.reveal.in{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }

/* ===== Background tracejado: use somente quando quiser ===== */
.as-section.svc-bg,
.services-section.svc-bg{
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}
.as-section.svc-bg::before,
.services-section.svc-bg::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0 calc(var(--svc-grid-cell) - 1px),
      var(--svc-grid) calc(var(--svc-grid-cell) - 1px) var(--svc-grid-cell)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--svc-grid-cell) - 1px),
      var(--svc-grid) calc(var(--svc-grid-cell) - 1px) var(--svc-grid-cell)
    );
  pointer-events:none;
  z-index:-1;
  opacity:.9;
}
.as-section.svc-bg::after,
.services-section.svc-bg::after{
  content:"";
  position:absolute;
  inset: var(--svc-stripe-inset);
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 calc(var(--svc-accent-gap)),
      var(--svc-accent) calc(var(--svc-accent-gap)) calc(var(--svc-accent-gap) + var(--svc-accent-thick))
    ),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.05), transparent 60%);
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
  pointer-events:none;
  z-index:-1;
}

/* ===== Responsividade ===== */
@media (max-width: 980px){
  .as-hero{ padding:42px 0 24px; }

  /* mantém a ARTE visível no mobile, menor e no topo-direito */
  .as-hero .as-hero-art{
    top:0; bottom:auto; right:0; left:auto;
    width:min(58vw, 320px);
    mask-image: none;                 /* máscara fora para simplificar no mobile */
    background: none;                 /* remove gradientes extras na arte no mobile */
    opacity:.9;
  }
  .as-hero .as-hero-art img{
    mix-blend-mode: screen;
    opacity:.8;
  }
}

@media (max-width: 860px){
  .as-kpis{ grid-template-columns:1fr 1fr; }
  .as-layout{ grid-template-columns:1fr; }
  .as-main{ grid-template-columns:1fr; }
  .as-line{ grid-template-columns:1fr; }
  .as-grid3{ grid-template-columns:1fr; }
}

/* Ajustes finos do tracejado em telas menores */
@media (max-width: 980px){
  :root{
    --svc-grid-cell: 28px;
    --svc-accent-gap: 16px;
  }
}



  /* =================== THEME TOKENS =================== */
  html[data-theme="dark"]{
    --mk-bg:#0b0b0d; --mk-text:#e8e8ee; --mk-muted:#a0a4ad;
    --mk-border:rgba(255,255,255,.09);
    --mk-card:rgba(255,255,255,.04); --mk-card-hover:rgba(255,255,255,.06);
    --mk-ring:rgba(255,255,255,.18);
    --mk-spot-1:rgba(160,160,255,.22);
    --mk-spot-2:rgba(255,255,255,.08);
    --mk-spot-3:rgba(120,255,200,.16);
  }
  html[data-theme="light"]{
    --mk-bg:#ffffff; --mk-text:#0f1116; --mk-muted:#4f5563;
    --mk-border:rgba(10,10,20,.10);
    --mk-card:rgba(10,10,20,.03); --mk-card-hover:rgba(10,10,20,.06);
    --mk-ring:rgba(10,10,20,.18);
    --mk-spot-1:rgba(90,90,220,.14);
    --mk-spot-2:rgba(0,0,0,.05);
    --mk-spot-3:rgba(70,200,150,.10);
  }
  /* fallback se alguém entrar sem atributo (usa dark) */
  :root{
    --mk-bg:#0b0b0d; --mk-text:#e8e8ee; --mk-muted:#a0a4ad;
    --mk-border:rgba(255,255,255,.09);
    --mk-card:rgba(255,255,255,.04); --mk-card-hover:rgba(255,255,255,.06);
    --mk-ring:rgba(255,255,255,.18);
    --mk-spot-1:rgba(160,160,255,.22);
    --mk-spot-2:rgba(255,255,255,.08);
    --mk-spot-3:rgba(120,255,200,.16);
  }

  body{ background: var(--mk-bg); color:var(--mk-text); }
  .mk-wrap{ width:min(1100px, 92vw); margin-inline:auto; position:relative; z-index:2; }

  /* =================== HERO =================== */
  .mk-hero{ position:relative; isolation:isolate; padding: clamp(64px, 9vw, 120px) 0 40px; border-bottom:1px solid var(--mk-border); overflow:hidden; }
  .mk-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; }

  /* Spotlight + grade “mais trabalhada” (linhas menores e maiores + diagonal sutil) */
  .mk-spotlight{
    position:absolute; inset:-20% -10% auto -10%; height:560px;
    background:
      radial-gradient(700px 280px at 52% -12%, var(--mk-spot-1), transparent 62%),
      radial-gradient(900px 380px at 60% -30%, var(--mk-spot-2), transparent 65%),
      radial-gradient(560px 240px at 38% -20%, var(--mk-spot-3), transparent 72%);
    filter: blur(22px);
  }
  .mk-grid{
    position:absolute; inset:0; opacity:.75;
    background-image:
      /* véu de topo */
      linear-gradient(to bottom, rgba(0,0,0,.10), transparent 25%),
      /* linhas maiores (120px) horizontais e verticais */
      repeating-linear-gradient(to right, rgba(255,255,255,.08) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(to bottom, rgba(255,255,255,.08) 0 1px, transparent 1px 120px),
      /* linhas menores (24px) horizontais e verticais */
      repeating-linear-gradient(to right, rgba(255,255,255,.04) 0 1px, transparent 1px 24px),
      repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 24px),
      /* diagonal super sutil */
      linear-gradient(45deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 40%);
    mask-image: radial-gradient(74% 64% at 50% 0%, #000 0%, transparent 78%);
  }

  .mk-title{ font-size:clamp(38px,5.4vw,64px); line-height:1.05; letter-spacing:-.02em; font-weight:800; margin:0 0 18px; text-wrap:balance; }
  .mk-em{ position:relative; display:inline-block; font-style:italic; }
  .mk-em::after{ content:attr(data-shadow,''); position:absolute; inset:0; transform:translate3d(6px,6px,0); filter:blur(6px); opacity:.18; pointer-events:none; }
  .mk-sub{ color:var(--mk-muted); font-size:clamp(16px,2.1vw,18px); line-height:1.6; max-width:780px; margin:0 0 26px; }
  .mk-actions{ display:flex; gap:12px; flex-wrap:wrap; }
  .mk-btn{ display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--mk-border); color:var(--mk-text); background:transparent; text-decoration:none; font-weight:700; transition:transform .08s ease, background .2s ease, border-color .2s ease; }
  .mk-btn:hover{ transform:translateY(-1px); border-color:var(--mk-ring); }
  .mk-btn-primary{ background:#fff; color:#111; border-color:transparent; }
  html[data-theme="dark"] .mk-btn-primary{ background:#eaeaea; color:#0d0f14; }

  /* ========= Palavra dinâmica do título ========= */
  .mk-hero-word{ display:inline-block; position:relative; transition:transform .18s ease, opacity .18s ease, filter .18s ease; }
  .mk-hero-word.is-out{ transform:translateY(14px); opacity:0; filter:blur(2px); }
  @keyframes mk-speed{ 0%{transform:skewX(-10deg) translateX(0); text-shadow:-8px 0 rgba(255,255,255,.18), -16px 0 rgba(255,255,255,.10);} 60%{transform:skewX(2deg) translateX(6px); text-shadow:-3px 0 rgba(255,255,255,.14);} 100%{transform:none; text-shadow:none;} }
  .fx-faster{ animation:mk-speed 520ms ease; }
  @keyframes mk-shine{ 0%{background-position:-150% 0;} 100%{background-position:150% 0;} }
  .fx-better{ background:linear-gradient(120deg,currentColor 0%,currentColor 30%,#fff 50%,currentColor 70%,currentColor 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 8px rgba(255,255,255,.18)); background-size:200% 100%; animation:mk-shine 900ms ease; }
  @keyframes mk-grad{ 0%{background-position:0% 50%;} 100%{background-position:100% 50%;} }
  @keyframes mk-underline{ 0%{transform:scaleX(0); opacity:0;} 100%{transform:scaleX(1); opacity:.6;} }
  .fx-personalized{ background:linear-gradient(90deg,#8ff 0%,#f8f 40%,#ffd27a 80%,#8ff 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:mk-grad 1200ms ease; }
  .fx-personalized::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; background:linear-gradient(90deg,#8ff,#ffd27a,#f8f); border-radius:2px; transform-origin:left center; animation:mk-underline 600ms ease forwards; opacity:.6; }
  @keyframes mk-fun{ 0%{transform:rotate(-2deg) translateY(0);} 40%{transform:rotate(2deg) translateY(-8px);} 70%{transform:rotate(-1deg) translateY(2px);} 100%{transform:none;} }
  .fx-fun{ animation:mk-fun 620ms ease; }

  /* =============== TLD + KPIs lado a lado =============== */
  .mk-domain-kpis{ padding:32px 0 48px; border-bottom:1px solid var(--mk-border); }
  .mk-two{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,4vw,48px); }
  .mk-domain-title{ font-size:clamp(24px,3.2vw,36px); font-weight:800; letter-spacing:-.01em; }
  .mk-domain-sub{ color:var(--mk-muted); margin-top:10px; max-width:44ch; }
  .mk-flip-wrap{ display:inline-block; min-width:4.5ch; overflow:hidden; }
  .mk-flip{ display:inline-block; transition:transform .18s ease, opacity .18s ease, filter .18s ease; }
  .mk-flip.is-out{ transform:translateY(14px); opacity:0; filter:blur(2px); }
  .mk-kpi-grid.mk-2x2{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
  .mk-kpi-col{ position:relative; }
  .mk-kpi-col::before{ content:""; position:absolute; left:-24px; top:0; bottom:0; width:1px; background:var(--mk-border); }
  .mk-kpi{ background:var(--mk-card); border:1px solid var(--mk-border); border-radius:16px; padding:18px; min-height:120px; display:flex; flex-direction:column; justify-content:center; transition:background .2s ease, transform .08s ease; }
  .mk-kpi:hover{ background:var(--mk-card-hover); transform:translateY(-1px); }
  .mk-kpi strong{ font-size:20px; display:block; margin-bottom:6px; }
  .mk-kpi span{ color:var(--mk-muted); }

  /* =============== MATRIX features (3x2) =============== */
  .mk-feat-matrix{ border-bottom:1px solid var(--mk-border); }
  .mk-matrix-title{ font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-.02em; margin:0 0 18px; text-wrap:balance; }
  .mk-fgrid{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--mk-border); border-left:none; border-top:none; }
  .mk-fcell{ padding:28px 22px 36px; min-height:220px; border-left:1px solid var(--mk-border); border-top:1px solid var(--mk-border); }
  .mk-fcell:nth-child(3n+1){ border-left:none; } .mk-fcell:nth-child(-n+3){ border-top:none; }
  .mk-ftop{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--mk-muted); margin-bottom:10px; }
  .mk-ico{ width:22px; height:22px; display:inline-grid; place-items:center; border:1px solid var(--mk-border); border-radius:50%; font-size:12px; opacity:.85; }
  .mk-fh{ margin:0 0 8px; font-size:clamp(18px,2.2vw,22px); line-height:1.35; font-weight:800; }
  .mk-fp{ margin:0; color:var(--mk-muted); max-width:46ch; }

  /* =============== PROCESS timeline =============== */
  .mk-section{ padding:46px 0; border-bottom:1px solid var(--mk-border); }
  .mk-process{}
  .mk-flow{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:18px; padding-top:18px; }
  .mk-flow::before{ content:""; position:absolute; left:6%; right:6%; top:44px; height:2px; background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.16)); transform-origin:left center; transform:scaleX(0); transition:transform .6s ease .15s; }
  .mk-node{ background:var(--mk-card); border:1px solid var(--mk-border); border-radius:16px; padding:14px; min-height:140px; opacity:0; transform:translateY(12px); transition:opacity .4s ease, transform .4s ease, border-color .2s ease, background .2s ease; }
  .mk-node:hover{ border-color:var(--mk-ring); background:var(--mk-card-hover); }
  .mk-node-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .mk-badge{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:13px; border:1px solid var(--mk-border); background:rgba(255,255,255,.04); }
  .mk-node-title{ margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em; }
  .mk-node-text{ margin:0; color:var(--mk-muted); }
  .mk-process.is-ready .mk-flow::before{ transform:scaleX(1); }
  .mk-node.is-in{ opacity:1; transform:none; }
  .mk-node{ transition-delay: var(--delay, 0ms); }

  /* =============== CASES =============== */
  .mk-cases{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
  .mk-case{ border:1px solid var(--mk-border); border-radius:16px; overflow:hidden; background:var(--mk-card); transition:transform .08s ease, border-color .2s ease; }
  .mk-case:hover{ transform:translateY(-2px); border-color:var(--mk-ring); }
  .mk-case img{ width:100%; height:180px; object-fit:cover; display:block; }
  .mk-case .mk-case-body{ padding:14px; }
  .mk-case h4{ margin:0 0 6px; font-size:16px; }
  .mk-case p{ margin:0; color:var(--mk-muted); }

  /* =============== FAQ =============== */
  .mk-faq{ max-width:900px; }
  .mk-accordion{ border:1px solid var(--mk-border); border-radius:16px; overflow:hidden; background:var(--mk-card); }
  .mk-acc-item{ border-bottom:1px solid var(--mk-border); }
  .mk-acc-item:last-child{ border-bottom:none; }
  .mk-acc-btn{ width:100%; text-align:left; padding:16px 18px; background:transparent; color:var(--mk-text); border:none; font-weight:700; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
  .mk-acc-btn i{ opacity:.7; transition:transform .2s ease; }
  .mk-acc-panel{ display:none; padding:0 18px 16px; color:var(--mk-muted); }
  .mk-acc-item.is-open .mk-acc-panel{ display:block; }
  .mk-acc-item.is-open .mk-acc-btn i{ transform:rotate(180deg); }


  /* =============== Responsive =============== */
  @media (max-width:1024px){
    .mk-two{ grid-template-columns:1fr; }
    .mk-kpi-col::before{ display:none; }
    .mk-fgrid{ grid-template-columns:repeat(2,1fr); }
    .mk-flow{ grid-template-columns:repeat(2,1fr); }
    .mk-cases{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:640px){
    .mk-fgrid{ grid-template-columns:1fr; }
    .mk-cases{ grid-template-columns:1fr; }
    .mk-flow{ grid-template-columns:1fr; }
    .mk-flow::before{ display:none; }
  }

/* ===== tokens do fundo trabalhado (ajustados ao tema mk) ===== */
:root{
  --mk-svc-grid: rgba(16,17,21,.06);
  --mk-svc-accent: rgba(59,44,127,.10);
  --mk-svc-cell: 32px;           /* tamanho da malha */
  --mk-svc-gap: 18px;            /* espaçamento das listras */
  --mk-svc-thick: 1px;           /* espessura das listras */
  --mk-svc-inset: -18% -8% -18% 50%; /* área da faixa diagonal */
}
html[data-theme="light"]{
  --mk-svc-grid: rgba(0,0,0,.06);
  --mk-svc-accent: rgba(90,90,220,.10);
}
html[data-theme="dark"]{
  --mk-svc-grid: rgba(255,255,255,.06);
  --mk-svc-accent: rgba(220,210,255,.09);
}

/* ===== aplica o efeito no container de background ===== */
.mk-bg.svc-bg{ isolation:isolate; position:absolute; inset:0; z-index:1; }
.mk-bg.svc-bg .mk-grid{ display:none; } /* evita grid duplicado quando svc-bg ativo */

/* grade (traçado) */
.mk-bg.svc-bg::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.9;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0 calc(var(--mk-svc-cell) - 1px),
      var(--mk-svc-grid) calc(var(--mk-svc-cell) - 1px) var(--mk-svc-cell)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--mk-svc-cell) - 1px),
      var(--mk-svc-grid) calc(var(--mk-svc-cell) - 1px) var(--mk-svc-cell)
    );
}

/* faixa diagonal + leve brilho */
.mk-bg.svc-bg::after{
  content:""; position:absolute; inset:var(--mk-svc-inset); z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 calc(var(--mk-svc-gap)),
      var(--mk-svc-accent) calc(var(--mk-svc-gap)) calc(var(--mk-svc-gap) + var(--mk-svc-thick))
    ),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.05), transparent 60%);
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
}

/* Responsivo do fundo trabalhado */
@media (max-width: 980px){
  :root{ --mk-svc-cell: 28px; --mk-svc-gap: 16px; }
  .mk-bg.svc-bg::after{ inset:-22% -12% -22% 64%; clip-path: polygon(62% 0, 100% 0, 100% 100%, 42% 100%); }
}

/* === mk-hero no mesmo estilo do as-hero, mantendo o efeito da palavra === */
.mk-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding: clamp(72px,9vw,120px) 0 48px;
  border-bottom:1px solid var(--mk-border);
  color:var(--mk-text);
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(167,116,255,.26) 0%, rgba(167,116,255,0) 55%),
    linear-gradient(180deg, var(--as-hero-g1, #eae6ff) 0%, var(--as-hero-g2, #f6f7ff) 100%);
  /* se não tiver os tokens as-hero-g*, usa os valores à direita */
  box-shadow: var(--as-shadow-1, 0 18px 60px rgba(16,12,48,.18));
  border-radius: 0; /* hero full-bleed nessa página */
}
.mk-hero::after{ /* frosty corner */
  content:""; position:absolute; left:-80px; top:-80px; width:320px; height:320px;
  background: radial-gradient(closest-side, rgba(182,147,255,.75), rgba(182,147,255,.18), transparent 70%);
  filter: blur(28px); pointer-events:none; opacity:.85;
  z-index:0;
}
.mk-hero > .mk-wrap{ position:relative; z-index:2; }

/* svc-bg que você já aplicou (mk-bg) — mantemos e integramos ao visual */
.mk-hero .mk-bg.svc-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.mk-hero .mk-bg.svc-bg::before{
  content:""; position:absolute; inset:0; opacity:.8;
  background:
    repeating-linear-gradient(to right, transparent 0 31px, var(--mk-svc-grid, rgba(255,255,255,.06)) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--mk-svc-grid, rgba(255,255,255,.06)) 31px 32px);
}
.mk-hero .mk-bg.svc-bg::after{
  content:""; position:absolute; inset:-18% -8% -18% 60%;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, var(--mk-svc-accent, rgba(220,210,255,.09)) 18px 19px),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.05), transparent 60%);
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 42% 100%);
  z-index:0;
}

/* Título no padrão da outra página (caps, peso alto), preservando o efeito da word */
.mk-title{
  font-size: clamp(42px, 7vw, 96px);
  line-height: .95;
  letter-spacing: .02em;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 16px;
  filter: drop-shadow(0 10px 28px rgba(168,116,255,.28));
}
.mk-title .mk-em{ font-style: normal; }            /* sem itálico */
.mk-title .mk-hero-word{ display:inline-block; }   /* mantém seus efeitos/anim */

/* Sub e CTAs reaproveitam o estilo existente */
.mk-sub{ color: var(--mk-muted); max-width: 60ch; }

/* Responsivo: grade/diagonal mais sutil */
@media (max-width: 980px){
  .mk-hero{ padding: 56px 0 36px; }
  .mk-hero .mk-bg.svc-bg::after{ inset:-22% -12% -22% 66%; clip-path: polygon(66% 0, 100% 0, 100% 100%, 46% 100%); }
}


/* ===== tokens do fundo (já definidos; deixo aqui por garantia) ===== */
:root{
  --mk-svc-grid: rgba(16,17,21,.06);
  --mk-svc-accent: rgba(59,44,127,.10);
  --mk-svc-cell: 32px;         /* tamanho da malha */
  --mk-svc-gap: 18px;          /* espaçamento das listras */
  --mk-svc-thick: 1px;         /* espessura das listras */
  --mk-svc-inset: -18% -8% -18% 50%; /* área da faixa diagonal */
}
html[data-theme="dark"]{
  --mk-svc-grid: rgba(255,255,255,.06);
  --mk-svc-accent: rgba(220,210,255,.09);
}
html[data-theme="light"]{
  --mk-svc-grid: rgba(0,0,0,.06);
  --mk-svc-accent: rgba(90,90,220,.10);
}

/* ===== aplica o efeito nas SECTIONS mk-* quando tiverem .svc-bg ===== */
.mk-domain-kpis.svc-bg,
.mk-section.svc-bg,
.mk-cta.svc-bg{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 0;
}

/* grade (traçado) */
.mk-domain-kpis.svc-bg::before,
.mk-section.svc-bg::before,
.mk-cta.svc-bg::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0 calc(var(--mk-svc-cell) - 1px),
      var(--mk-svc-grid) calc(var(--mk-svc-cell) - 1px) var(--mk-svc-cell)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--mk-svc-cell) - 1px),
      var(--mk-svc-grid) calc(var(--mk-svc-cell) - 1px) var(--mk-svc-cell)
    );
  opacity:.9;
  pointer-events:none;
  z-index:-1;
}

/* faixa diagonal + brilho (um pouco mais estreita nas seções internas) */
.mk-domain-kpis.svc-bg::after,
.mk-section.svc-bg::after,
.mk-cta.svc-bg::after{
  content:"";
  position:absolute;
  inset: calc(var(--mk-svc-inset) * 1); /* usa o mesmo inset */
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 calc(var(--mk-svc-gap)),
      var(--mk-svc-accent) calc(var(--mk-svc-gap)) calc(var(--mk-svc-gap) + var(--mk-svc-thick))
    ),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.05), transparent 60%);
  /* faixa um pouco mais fina que no hero */
  clip-path: polygon(68% 0, 100% 0, 100% 100%, 48% 100%);
  pointer-events:none;
  z-index:-1;
}

/* responsivo: malha um pouco menor e diagonal mais à direita */
@media (max-width: 980px){
  :root{ --mk-svc-cell: 28px; --mk-svc-gap: 16px; }
  .mk-domain-kpis.svc-bg::after,
  .mk-section.svc-bg::after,
  .mk-cta.svc-bg::after{
    clip-path: polygon(72% 0, 100% 0, 100% 100%, 52% 100%);
    inset: -22% -12% -22% 64%;
  }
}

/* ===== Scroll Reveal base ===== */
[data-sr]{
  opacity:0;
  transform: translateY(16px) scale(.98);
  will-change: transform, opacity;
}
[data-sr].sr-in{
  opacity:1;
  transform: none;
  transition: transform .68s cubic-bezier(.2,.65,.2,1), opacity .68s ease;
}

/* Direção: quando subindo, entramos “de cima” */
html[data-scroll="up"] [data-sr]:not(.sr-in){
  transform: translateY(-16px) scale(.98);
}

/* Variantes manuais, se quiser forçar de um lado */
[data-sr][data-sr-from="up"]{ transform: translateY(-16px) scale(.98); }
[data-sr][data-sr-from="left"]{ transform: translateX(-18px) scale(.98); }
[data-sr][data-sr-from="right"]{ transform: translateX(18px) scale(.98); }

/* Stagger (aplicado via style inline pelo JS – aqui só garantimos suavidade) */
[data-sr].sr-in{ transition-delay: var(--sr-delay, 0ms); }

/* Parallax: elementos que receberem data-parallax terão translate controlado por JS */
[data-parallax]{ will-change: transform; }

/* Linha do processo (mk-flow) crescendo */
.mk-process .mk-flow::before{
  transform-origin:left center;
  transform: scaleX(0);
  transition: transform .6s ease .12s;
}
.mk-process.is-ready .mk-flow::before{ transform: scaleX(1); }

/* Nós do processo aparecendo */
.mk-node{ opacity:0; transform: translateY(12px); }
.mk-node.is-in{ opacity:1; transform:none; transition: transform .5s ease, opacity .5s ease; }

/* Contadores (KPI) – um brilho rápido quando termina */
.kpi-count-done{ box-shadow: 0 0 0 0 rgba(168,116,255,.0), 0 6px 22px rgba(168,116,255,.18); transition: box-shadow .6s ease; }






/* ===================== THEME ===================== */
html[data-theme="dark"]{
  --vb-bg:#0b0b0d; --vb-text:#e8e8ee; --vb-muted:#a0a4ad;
  --vb-border:rgba(255,255,255,.09); --vb-card:rgba(255,255,255,.04);
  --vb-cardhover:rgba(255,255,255,.06); --vb-ring:rgba(255,255,255,.18);
  --vb-spot1:rgba(160,160,255,.22); --vb-spot2:rgba(255,255,255,.08); --vb-spot3:rgba(120,255,200,.16);
  --vb-accent:#60a5fa; --vb-accent2:#a78bfa; --vb-good:#22c55e; --vb-warn:#f59e0b;
}
html[data-theme="light"]{
  --vb-bg:#ffffff; --vb-text:#0f1116; --vb-muted:#4f5563;
  --vb-border:rgba(10,10,20,.10); --vb-card:rgba(10,10,20,.03);
  --vb-cardhover:rgba(10,10,20,.06); --vb-ring:rgba(10,10,20,.18);
  --vb-spot1:rgba(90,90,220,.14); --vb-spot2:rgba(0,0,0,.05); --vb-spot3:rgba(70,200,150,.10);
  --vb-accent:#2563eb; --vb-accent2:#6d28d9; --vb-good:#16a34a; --vb-warn:#d97706;
}
:root{ /* fallback dark */
  --vb-bg:#0b0b0d; --vb-text:#e8e8ee; --vb-muted:#a0a4ad;
  --vb-border:rgba(255,255,255,.09); --vb-card:rgba(255,255,255,.04);
  --vb-cardhover:rgba(255,255,255,.06); --vb-ring:rgba(255,255,255,.18);
  --vb-spot1:rgba(160,160,255,.22); --vb-spot2:rgba(255,255,255,.08); --vb-spot3:rgba(120,255,200,.16);
  --vb-accent:#60a5fa; --vb-accent2:#a78bfa; --vb-good:#22c55e; --vb-warn:#f59e0b;
}

body{ background:var(--vb-bg); color:var(--vb-text); }
.vb-wrap{ width:min(1100px,92vw); margin-inline:auto; position:relative; z-index:2; }
.vb-section{ padding:48px 0; border-bottom:1px solid var(--vb-border); }

/* =============== GLOBAL WORKED BACKGROUND =============== */
:root{
  --mk-grid-maj: rgba(255,255,255,.06);
  --mk-grid-min: rgba(255,255,255,.035);
  --mk-diag: rgba(255,255,255,.045);
  --mk-glow: rgba(96,165,250,.15);
}
html[data-theme="light"]{
  --mk-grid-maj: rgba(10,10,20,.10);
  --mk-grid-min: rgba(10,10,20,.06);
  --mk-diag: rgba(10,10,20,.06);
  --mk-glow: rgba(37,99,235,.18);
}
.mk-page-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.mk-layer{ position:absolute; inset:0; }
.mk-spots{
  background:
    radial-gradient(880px 360px at 70% -10%, var(--vb-spot1), transparent 60%),
    radial-gradient(1200px 500px at 25% -18%, var(--vb-spot2), transparent 65%),
    radial-gradient(760px 340px at 50% 120%, var(--vb-spot3), transparent 72%);
  filter: blur(22px);
  animation: mk-breathe 14s ease-in-out infinite;
}
@keyframes mk-breathe{
  0%,100%{ transform:scale(1) }
  50%{ transform:scale(1.02) }
}
.mk-grid-major{
  background:
    repeating-linear-gradient(to right, var(--mk-grid-maj) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to bottom, var(--mk-grid-maj) 0 1px, transparent 1px 120px);
  opacity:.35; animation: mk-drift 60s linear infinite;
}
.mk-grid-minor{
  background:
    repeating-linear-gradient(to right, var(--mk-grid-min) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, var(--mk-grid-min) 0 1px, transparent 1px 24px);
  opacity:.28; animation: mk-drift 40s linear infinite reverse;
}
.mk-diag{
  background: repeating-linear-gradient(45deg, var(--mk-diag) 0 1px, transparent 1px 16px);
  mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0) 65%);
  opacity:.35; animation: mk-slide 30s linear infinite;
}
.mk-glow{
  width:30%; left:-30%; top:0; bottom:0; position:absolute;
  background: linear-gradient(90deg, transparent 0%, var(--mk-glow) 50%, transparent 100%);
  filter: blur(1px); animation: mk-sweep 18s ease-in-out infinite;
}
.mk-noise{
  opacity:.10;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size:140px 140px;
}
.mk-vignette{ mix-blend-mode:multiply; background: radial-gradient(120% 120% at 50% 10%, rgba(0,0,0,0) 40%, rgba(0,0,0,.42) 100%); }
@keyframes mk-drift { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-24px,-24px,0)} }
@keyframes mk-slide { 0%{background-position:0 0} 100%{background-position:180px 0} }
@keyframes mk-sweep { 0%{transform:translateX(0)} 50%{transform:translateX(160%)} 100%{transform:translateX(320%)} }

/* ===================== UTIL REVEAL ===================== */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ===================== HERO ===================== */
.vb-hero{ position:relative; isolation:isolate; padding: clamp(76px, 9vw, 120px) 0 56px; text-align:center; }
.vb-title{ font-size:clamp(38px,5.6vw,66px); line-height:1.05; letter-spacing:-.02em; margin:0 0 14px; font-weight:900; }
.vb-sub{ color:var(--vb-muted); max-width:900px; margin:0 auto 22px; font-size:clamp(16px,2vw,18px); line-height:1.6; }
.vb-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.vb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--vb-border);
  color:var(--vb-text); background:linear-gradient(180deg, transparent, rgba(255,255,255,.03));
  font-weight:800; text-decoration:none; transition:transform .08s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  position:relative; overflow:hidden;
}
.vb-btn::after{
  content:""; position:absolute; inset:-20% -10%; transform:translateX(-120%);
  background:linear-gradient(110deg, transparent 45%, rgba(255,255,255,.35) 50%, transparent 55%);
  transition: transform .6s ease; pointer-events:none;
}
.vb-btn:hover{ transform:translateY(-1px); border-color:var(--vb-ring); box-shadow:0 6px 18px rgba(0,0,0,.18); }
.vb-btn:hover::after{ transform:translateX(120%); }
.vb-btn:active{ transform:translateY(0); }
.vb-btn-primary{ background:#fff; color:#0f1116; border-color:transparent; }
html[data-theme="dark"] .vb-btn-primary{ background:#eaeaea; color:#0f1116; }

/* ===================== BRAND SYSTEM GRID ===================== */
.vb-system{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:28px; }
.vb-card{
  position:relative; border:1px solid var(--vb-border); border-radius:16px;
  background:var(--vb-card); min-height:240px; padding:18px; overflow:hidden;
  transition: transform .12s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.vb-card::after{ /* glow de borda ao hover */
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  padding:1px; background: conic-gradient(from 0deg, rgba(96,165,250,.5), rgba(167,139,250,.5), rgba(34,197,94,.5), rgba(96,165,250,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition:opacity .25s ease;
}
.vb-card:hover{ transform: translateY(-2px); border-color:var(--vb-ring); background:var(--vb-cardhover); box-shadow:0 8px 26px rgba(0,0,0,.22); }
.vb-card:hover::after{ opacity:.25; }
.vb-card h3{ margin:0 0 8px; font-size:18px; font-weight:800; }
.vb-card p{ margin:0; color:var(--vb-muted); }

/* tilt sutil */
.vb-card[data-tilt]{ transform-style:preserve-3d; }
.vb-card[data-tilt] .tilt-3d{ transform: translateZ(18px); transition: transform .18s ease; }

/* Paleta */
.vb-swatches{ display:flex; gap:10px; margin-top:12px; }
.vb-swatch{ flex:1; height:48px; border-radius:10px; border:1px solid var(--vb-border); position:relative; transform:translateZ(0); }
.vb-swatch::after{ content:attr(data-name); position:absolute; bottom:8px; left:10px; font-size:11px; opacity:.8; }
.vb-swatch:hover{ outline:2px solid var(--vb-ring); transform: translateY(-2px); }

/* Tipografia */
.vb-type{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.vb-type .xlg{ font-size:40px; font-weight:900; letter-spacing:-0.02em; }
.vb-type .body{ color:var(--vb-muted); }

/* Componentes */
.vb-ui{ display:flex; gap:12px; margin-top:12px; align-items:center; flex-wrap:wrap; }
.vb-ui .chip{ padding:6px 10px; border-radius:999px; border:1px solid var(--vb-border); background:var(--vb-cardhover); font-weight:700; font-size:12px; }
.vb-ui .chip.shine{ position:relative; overflow:hidden; }
.vb-ui .chip.shine::after{
  content:""; position:absolute; inset:-40% -20%; transform:translateX(-120%);
  background:linear-gradient(110deg, transparent 45%, rgba(255,255,255,.35) 50%, transparent 55%);
  animation: chip-shine 3.2s ease-in-out infinite;
}
@keyframes chip-shine{ 0%{transform:translateX(-120%)} 50%{transform:translateX(40%)} 100%{transform:translateX(120%)} }
.vb-ui .btn{ padding:8px 14px; border-radius:10px; border:1px solid var(--vb-border); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); font-weight:800; }
.vb-ui .field{ display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:10px; border:1px solid var(--vb-border); background:rgba(0,0,0,.08); color:var(--vb-muted); }

/* ===================== ANALYTICS ===================== */
.vb-analytics{ display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(20px,4vw,40px); align-items:center; }
.vb-chart{ position:relative; border:1px solid var(--vb-border); border-radius:16px; background:var(--vb-card); overflow:hidden; }
.vb-chart::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.06) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 1px, transparent 1px 60px);
  opacity:.35;
}
.vb-chart::after{ /* halo quando o mouse está sobre o gráfico */
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .2s ease;
  background: radial-gradient(120% 120% at var(--mx,50%) var(--my,50%), rgba(96,165,250,.18), transparent 60%);
}
.vb-chart:hover::after{ opacity:1; }
.vb-svg{ display:block; width:100%; height:320px; }
.vb-tip{ position:absolute; transform:translate(-50%, -140%); background:rgba(0,0,0,.6); color:#fff; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.2); font-size:12px; pointer-events:none; display:none; }
.vb-tip .row{ display:flex; gap:10px; align-items:center; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }

/* ===================== COLLAB ===================== */
.vb-collab .vb-three{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }
.vb-mini{
  border:1px solid var(--vb-border); border-radius:16px; background:var(--vb-card);
  min-height:240px; padding:16px; position:relative; overflow:hidden; transition:transform .12s ease, border-color .2s ease, background .2s ease;
}
.vb-mini:hover{ transform:translateY(-2px); border-color:var(--vb-ring); background:var(--vb-cardhover); }
.vb-mini .bubble{
  position:absolute; left:16px; right:16px; bottom:14px; background:rgba(0,0,0,.55); color:#fff;
  border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:8px 10px; font-size:12px;
}
.vb-mini .bubble.typing::after{
  content:" •••"; animation: typing 1.2s infinite;
}
@keyframes typing{ 0%{opacity:.3} 50%{opacity:1} 100%{opacity:.3} }
.vb-mini .badge{ position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--vb-border); background:var(--vb-cardhover); }
.vb-mini .badge.float{ animation: floaty 6s ease-in-out infinite; }

/* ===================== SHOWCASE (TURBINADO) ===================== */
.vb-show{ text-align:center; }
.vb-stack{ position:relative; height:440px; margin-top:14px; }
.vb-tilt{ perspective:1000px; --rx:0deg; --ry:0deg; }
.vb-tilt-inner{ transform-style:preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s ease; }

.vb-pane{
  inset:0; border:1px solid var(--vb-border); border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  overflow:hidden; opacity:0; transform: translateY(24px) scale(.96);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease, box-shadow .2s ease;
}
.vb-pane::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  padding:1px; background: conic-gradient(from 0deg, rgba(96,165,250,.55), rgba(167,139,250,.55), rgba(34,197,94,.55), rgba(96,165,250,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.20;
}
.vb-pane::before{
  content:""; position:absolute; inset:-20%;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  transform: translateX(-120%); animation: vb-shine 5s ease-in-out infinite;
}
@keyframes vb-shine{ 0%{transform:translateX(-120%)} 50%{transform:translateX(40%)} 100%{transform:translateX(120%)} }

.vb-show.is-in .vb-pane{ opacity:1; transform:none; }
.vb-pane:nth-child(1){ z-index:1; transition-delay:0ms; }
.vb-pane:nth-child(2){ z-index:2; transition-delay:120ms; transform: translate(24px,16px) scale(.985); }
.vb-pane:nth-child(3){ z-index:3; transition-delay:240ms; transform: translate(46px,28px) scale(1); }
.vb-pane:hover{ box-shadow:0 12px 36px rgba(0,0,0,.28); }

/* “janelas” internas */
.vb-win{ display:flex; align-items:center; gap:10px; padding:25px 12px; border-bottom:1px solid var(--vb-border); backdrop-filter: blur(2px); }
.vb-win .dots i{ width:8px;height:8px;border-radius:50%; display:inline-block; margin-right:6px; background:rgba(255,255,255,.25); }
.vb-win .dots i:nth-child(1){ background:#ef4444; }
.vb-win .dots i:nth-child(2){ background:#f59e0b; }
.vb-win .dots i:nth-child(3){ background:#22c55e; }
.vb-win .title{ font-size:12px; opacity:.85; }

/* conteúdos das janelas */
.vb-win-body.grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 32px);
}
.vb-win-body.grid .badge{
  border:1px solid var(--vb-border); border-radius:10px; padding:10px 12px; font-weight:800;
  background:var(--vb-card);
}
.vb-win-body.palette{ display:flex; gap:12px; padding:16px; }
.vb-win-body.palette span{
  flex:1; height:64px; border-radius:12px; border:1px solid var(--vb-border);
  background: var(--c); box-shadow: inset 0 -10px 20px rgba(0,0,0,.12);
  display:grid; place-items:end start; padding:8px; font-size:11px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.vb-win-body.hero{ position:relative; padding:18px; }
.vb-win-body.hero .scan{
  position:absolute; left:0; right:0; top:22%; height:2px;
  background:linear-gradient(90deg, rgba(96,165,250,0), rgba(96,165,250,.9), rgba(96,165,250,0));
  transform: translateX(-100%); animation: vb-scan 3s ease-in-out infinite;
}
@keyframes vb-scan{ 0%{transform:translateX(-110%)} 50%{transform:translateX(10%)} 100%{transform:translateX(110%)} }
.vb-win-body.hero .cta{
  position:absolute; bottom:18px; left:18px; padding:10px 16px; border-radius:999px;
  border:1px solid var(--vb-border); background:#fff; color:#111; font-weight:900; font-size:14px;
}

/* ícones flutuando (também usados no tilt magnético) */
.vb-float{ position:absolute; inset:0; pointer-events:none; }
.vb-float .orb{
  position:absolute; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border:1px solid var(--vb-border); animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-12px)} }

/* confete */
.vb-sparks{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.vb-sparks span{
  position:absolute; top:48%; left:50%; width:8px; height:8px; border-radius:2px;
  background: var(--spark, #60a5fa); transform: translate(-50%,-50%) rotate(0deg);
  opacity:0; filter: drop-shadow(0 8px 8px rgba(0,0,0,.2));
}
.vb-show.is-in .vb-sparks span{ animation: vb-pop .9s ease forwards; }
.vb-sparks span:nth-child(3n+1){ --spark:#60a5fa; }
.vb-sparks span:nth-child(3n+2){ --spark:#a78bfa; }
.vb-sparks span:nth-child(3n+3){ --spark:#34d399; }
.vb-sparks span:nth-child(1){ animation-delay:.05s; }
.vb-sparks span:nth-child(2){ animation-delay:.12s; }
.vb-sparks span:nth-child(3){ animation-delay:.18s; }
.vb-sparks span:nth-child(4){ animation-delay:.24s; }
.vb-sparks span:nth-child(5){ animation-delay:.30s; }
.vb-sparks span:nth-child(6){ animation-delay:.36s; }
.vb-sparks span:nth-child(7){ animation-delay:.42s; }
.vb-sparks span:nth-child(8){ animation-delay:.48s; }
.vb-sparks span:nth-child(9){ animation-delay:.54s; }
.vb-sparks span:nth-child(10){--spark:#22c55e; animation-delay:.60s; }
.vb-sparks span:nth-child(11){--spark:#f59e0b; animation-delay:.66s; }
.vb-sparks span:nth-child(12){--spark:#38bdf8; animation-delay:.72s; }
@keyframes vb-pop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(0deg) }
  20%{ opacity:1 }
  100%{
    opacity:0;
    transform:
      translate(calc(-50% + (var(--dx, 120px))), calc(-50% - (var(--dy, 100px))))
      rotate(240deg) scale(1);
  }
}
.vb-sparks span:nth-child(1){ --dx: -120px; --dy: 80px; }
.vb-sparks span:nth-child(2){ --dx: -60px;  --dy: 140px; }
.vb-sparks span:nth-child(3){ --dx: 90px;   --dy: 120px; }
.vb-sparks span:nth-child(4){ --dx: 140px;  --dy: 70px; }
.vb-sparks span:nth-child(5){ --dx: -100px; --dy: 120px; }
.vb-sparks span:nth-child(6){ --dx: 60px;   --dy: 160px; }
.vb-sparks span:nth-child(7){ --dx: 120px;  --dy: 120px; }
.vb-sparks span:nth-child(8){ --dx: -140px; --dy: 70px; }
.vb-sparks span:nth-child(9){ --dx: 40px;   --dy: 120px; }
.vb-sparks span:nth-child(10){--dx: -60px;  --dy: 90px; }
.vb-sparks span:nth-child(11){--dx: 80px;   --dy: 140px; }
.vb-sparks span:nth-child(12){--dx: -20px;  --dy: 160px; }

/* ===================== RESPONSIVO ===================== */
@media (max-width:1024px){
  .vb-system{ grid-template-columns:1fr; }
  .vb-analytics{ grid-template-columns:1fr; }
  .vb-collab .vb-three{ grid-template-columns:1fr; }
  .vb-stack{ height:360px; }
}
/* ====== tokens iguais aos da página anterior (usados pelo hero) ====== */
:root{
  --as-hero-g1:#eae6ff; --as-hero-g2:#f6f7ff;
  --as-shadow-1:0 18px 60px rgba(16,12,48,.18);
  --mk-svc-grid:rgba(255,255,255,.06);
  --mk-svc-accent:rgba(220,210,255,.09);
}
html[data-theme="dark"],
body.dark-mode{
  --as-hero-g1:#1a1740; --as-hero-g2:#0b0a16;
  --mk-svc-grid:rgba(255,255,255,.06);
  --mk-svc-accent:rgba(220,210,255,.09);
}
html[data-theme="light"],
body.light-mode{
  --mk-svc-grid:rgba(10,10,20,.10);
  --mk-svc-accent:rgba(59,44,127,.10);
}

/* ====== HERO idêntico ao anterior ====== */
.vb-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding: clamp(72px, 9vw, 120px) 0 48px;
  color: #fff;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(167,116,255,.26) 0%, rgba(167,116,255,0) 55%),
    linear-gradient(180deg, var(--as-hero-g1) 0%, var(--as-hero-g2) 100%);
  box-shadow: var(--as-shadow-1);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* frosty corner (mesmo brilho do outro hero) */
.vb-hero::before{
  content:""; position:absolute; left:-80px; top:-80px; width:320px; height:320px;
  background: radial-gradient(closest-side, rgba(182,147,255,.75), rgba(182,147,255,.18), transparent 70%);
  filter: blur(28px); opacity:.85; pointer-events:none; z-index:0;
}

/* grade + faixa diagonal (svc-bg) exatamente como o outro */
.vb-hero .mk-bg.svc-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.vb-hero .mk-bg.svc-bg::before{
  content:""; position:absolute; inset:0; opacity:.9;
  background:
    repeating-linear-gradient(to right, transparent 0 31px, var(--mk-svc-grid) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--mk-svc-grid) 31px 32px);
  z-index: -1;
}
.vb-hero .mk-bg.svc-bg::after{
  content:""; position:absolute; inset:-18% -8% -18% 58%;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, var(--mk-svc-accent) 18px 19px),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.05), transparent 60%);
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 42% 100%);
  z-index: -1;
}

/* container */
.vb-wrap{ width:min(1180px, 92vw); margin-inline:auto; position:relative; z-index:2; }

/* tipografia do título — mesmíssimo “peso” e espaçamento */
.vb-title{
  margin:0;
  font-size:clamp(42px, 7vw, 96px);
  line-height:.95; letter-spacing:.04em; font-weight:800;
  text-transform:uppercase;
  filter: drop-shadow(0 10px 28px rgba(168,116,255,.35));
  max-width: 20ch;
}
.vb-title .vb-line{ display:block; }
.vb-title .vb-accent{
  /* linha de baixo com leve brilho + sublinhado igual do anterior */
  position:relative;
  background:linear-gradient(90deg,#8ff 0%,#f8f 40%,#ffd27a 80%,#8ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.vb-title .vb-accent::after{
  content:""; position:absolute; left:0; right:8%; bottom:-8px; height:4px;
  background:linear-gradient(90deg,#8ff,#ffd27a,#f8f);
  border-radius:2px; opacity:.6;
}

/* subtítulo + ações iguais */
.vb-sub{
  margin-top:14px; max-width:720px;
  color: rgba(237,241,255,.72); /* var(--mk-muted) em dark */
  font-size:clamp(16px,2.2vw,18px); line-height:1.6;
}
.as-actions{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.as-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 18px; border-radius:999px; text-decoration:none;
  font-weight:800; color:#0b0b16; background:#fff; border:1px solid transparent;
  box-shadow:0 10px 30px rgba(16,12,48,.14);
  transition: transform .24s ease, box-shadow .24s ease, border-color .2s ease;
}
.as-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.25); }
.as-btn-primary{ background: linear-gradient(90deg, #7a4cff, #5336ff); color:#0b0b16; }

/* responsivo — igual ao outro */
@media (max-width: 980px){
  .vb-title{ font-size: clamp(36px, 9vw, 68px); }
  .vb-sub{ max-width: 60ch; }
}

/* ===================== THEME (dark/light) ===================== */
html[data-theme="dark"]{
  --vb-bg:#0b0b0d; --vb-text:#e8e8ee; --vb-muted:#a0a4ad;
  --vb-border:rgba(255,255,255,.09); --vb-card:rgba(255,255,255,.04);
  --vb-cardhover:rgba(255,255,255,.06); --vb-ring:rgba(255,255,255,.18);
  --vb-spot1:rgba(160,160,255,.22); --vb-spot2:rgba(255,255,255,.08); --vb-spot3:rgba(120,255,200,.16);
  --vb-accent:#60a5fa; --vb-accent2:#a78bfa; --vb-good:#22c55e; --vb-warn:#f59e0b;
}
html[data-theme="light"]{
  --vb-bg:#ffffff; --vb-text:#0f1116; --vb-muted:#4f5563;
  --vb-border:rgba(10,10,20,.10); --vb-card:rgba(10,10,20,.03);
  --vb-cardhover:rgba(10,10,20,.06); --vb-ring:rgba(10,10,20,.18);
  --vb-spot1:rgba(90,90,220,.14); --vb-spot2:rgba(0,0,0,.05); --vb-spot3:rgba(70,200,150,.10);
  --vb-accent:#2563eb; --vb-accent2:#6d28d9; --vb-good:#16a34a; --vb-warn:#d97706;
}
:root{ /* fallback dark */
  --vb-bg:#0b0b0d; --vb-text:#e8e8ee; --vb-muted:#a0a4ad;
  --vb-border:rgba(255,255,255,.09); --vb-card:rgba(255,255,255,.04);
  --vb-cardhover:rgba(255,255,255,.06); --vb-ring:rgba(255,255,255,.18);
  --vb-spot1:rgba(160,160,255,.22); --vb-spot2:rgba(255,255,255,.08); --vb-spot3:rgba(120,255,200,.16);
  --vb-accent:#60a5fa; --vb-accent2:#a78bfa; --vb-good:#22c55e; --vb-warn:#f59e0b;
}

body{ background:var(--vb-bg); color:var(--vb-text); }
.vb-wrap{ width:min(1180px,92vw); margin-inline:auto; position:relative; z-index:2; }
.vb-section{ padding:48px 0; border-bottom:1px solid var(--vb-border); }

/* =============== FUNDO GLOBAL TRABALHADO (transparente) =============== */
:root{
  --mk-grid-maj: rgba(255,255,255,.06);
  --mk-grid-min: rgba(255,255,255,.035);
  --mk-diag: rgba(255,255,255,.045);
  --mk-glow: rgba(96,165,250,.15);
}
html[data-theme="light"]{
  --mk-grid-maj: rgba(10,10,20,.10);
  --mk-grid-min: rgba(10,10,20,.06);
  --mk-diag: rgba(10,10,20,.06);
  --mk-glow: rgba(37,99,235,.18);
}
.mk-page-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.mk-layer{ position:absolute; inset:0; }
.mk-spots{
  background:
    radial-gradient(880px 360px at 70% -10%, var(--vb-spot1), transparent 60%),
    radial-gradient(1200px 500px at 25% -18%, var(--vb-spot2), transparent 65%),
    radial-gradient(760px 340px at 50% 120%, var(--vb-spot3), transparent 72%);
  filter: blur(22px); animation: mk-breathe 14s ease-in-out infinite;
}
@keyframes mk-breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }
.mk-grid-major{
  background:
    repeating-linear-gradient(to right, var(--mk-grid-maj) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to bottom, var(--mk-grid-maj) 0 1px, transparent 1px 120px);
  opacity:.35; animation: mk-drift 60s linear infinite;
}
.mk-grid-minor{
  background:
    repeating-linear-gradient(to right, var(--mk-grid-min) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, var(--mk-grid-min) 0 1px, transparent 1px 24px);
  opacity:.28; animation: mk-drift 40s linear infinite reverse;
}
.mk-diag{
  background: repeating-linear-gradient(45deg, var(--mk-diag) 0 1px, transparent 1px 16px);
  mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0) 65%);
  opacity:.35; animation: mk-slide 30s linear infinite;
}
.mk-glow{
  width:30%; left:-30%; top:0; bottom:0; position:absolute;
  background: linear-gradient(90deg, transparent 0%, var(--mk-glow) 50%, transparent 100%);
  filter: blur(1px); animation: mk-sweep 18s ease-in-out infinite;
}
.mk-noise{
  opacity:.10;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size:140px 140px;
}
/* ===== CONTRASTE DO HERO ===== */
/* 1) Token de cor do texto do hero */
:root{ --vb-hero-fg:#fff; }                /* dark default */
html[data-theme="light"]{ --vb-hero-fg:#0f1116; } /* light fica escuro */

/* 2) Troque a linha do seu .vb-hero que tinha color:#fff; por isto: */
.vb-hero{
  /* ... resto igual ... */
  color: var(--vb-hero-fg);  /* em vez de color:#fff */
}

/* 3) Sub e título no light: menos brilho e texto mais legível */
html[data-theme="light"] .vb-sub{ color:#4f5563; }         /* já é sua var, garantimos aqui */
html[data-theme="light"] .vb-title{ filter:none; }         /* remove glow roxo no light */
html[data-theme="light"] .vb-title .vb-accent::after{ opacity:.35; } /* sublinhado mais sutil */

/* 4) "frosty corner" e grid no light um pouco mais leves */
html[data-theme="light"] .vb-hero::before{ opacity:.55; filter:blur(22px); }
html[data-theme="light"] .vb-hero .mk-bg.svc-bg::before{
  opacity:.8; /* linhas da grade um pouco mais claras */
}

  /* ========= Theme tokens ========= */
  html[data-theme="dark"]{
    --ds-bg:#0b0b0d; --ds-text:#e8e8ee; --ds-muted:#a0a4ad;
    --ds-border:rgba(255,255,255,.09); --ds-card:rgba(255,255,255,.04); --ds-cardhover:rgba(255,255,255,.06);
    --ds-ring:rgba(255,255,255,.18);
    --ds-spot1:rgba(160,160,255,.22); --ds-spot2:rgba(255,255,255,.08); --ds-spot3:rgba(120,255,200,.16);
    --ds-accent:#60a5fa; --ds-accent2:#a78bfa; --ds-accent3:#f59e0b; --ds-good:#22c55e; --ds-warn:#f59e0b; --ds-bad:#ef4444;
  }
  html[data-theme="light"]{
    --ds-bg:#ffffff; --ds-text:#0f1116; --ds-muted:#4f5563;
    --ds-border:rgba(10,10,20,.10); --ds-card:rgba(10,10,20,.03); --ds-cardhover:rgba(10,10,20,.06);
    --ds-ring:rgba(10,10,20,.18);
    --ds-spot1:rgba(90,90,220,.14); --ds-spot2:rgba(0,0,0,.05); --ds-spot3:rgba(70,200,150,.10);
    --ds-accent:#2563eb; --ds-accent2:#6d28d9; --ds-accent3:#d97706; --ds-good:#16a34a; --ds-warn:#d97706; --ds-bad:#dc2626;
  }
  :root{ /* fallback dark */
    --ds-bg:#0b0b0d; --ds-text:#e8e8ee; --ds-muted:#a0a4ad;
    --ds-border:rgba(255,255,255,.09); --ds-card:rgba(255,255,255,.04); --ds-cardhover:rgba(255,255,255,.06);
    --ds-ring:rgba(255,255,255,.18);
    --ds-spot1:rgba(160,160,255,.22); --ds-spot2:rgba(255,255,255,.08); --ds-spot3:rgba(120,255,200,.16);
    --ds-accent:#60a5fa; --ds-accent2:#a78bfa; --ds-accent3:#f59e0b; --ds-good:#22c55e; --ds-warn:#f59e0b; --ds-bad:#ef4444;
  }
  body{ background:var(--ds-bg); color:var(--ds-text); }
  .ds-wrap{ width:min(1100px,92vw); margin-inline:auto; position:relative; z-index:2; }
  .ds-section{ padding:56px 0; border-bottom:1px solid var(--ds-border); }

  /* ========= Worked background (mesmo estilo das outras páginas) ========= */
  :root{ --mk-grid-maj:rgba(255,255,255,.06); --mk-grid-min:rgba(255,255,255,.035); --mk-diag:rgba(255,255,255,.045); --mk-glow:rgba(96,165,250,.15); }
  html[data-theme="light"]{ --mk-grid-maj:rgba(10,10,20,.10); --mk-grid-min:rgba(10,10,20,.06); --mk-diag:rgba(10,10,20,.06); --mk-glow:rgba(37,99,235,.18); }
  .mk-page-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .mk-layer{ position:absolute; inset:0; }
  .mk-spots{ background:
      radial-gradient(880px 360px at 70% -10%, var(--ds-spot1), transparent 60%),
      radial-gradient(1200px 500px at 25% -18%, var(--ds-spot2), transparent 65%),
      radial-gradient(760px 340px at 50% 120%, var(--ds-spot3), transparent 72%); filter:blur(22px); animation:mk-breathe 14s ease-in-out infinite; }
  @keyframes mk-breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }
  .mk-grid-major{ background:
      repeating-linear-gradient(to right, var(--mk-grid-maj) 0 1px, transparent 1px 120px),
      repeating-linear-gradient(to bottom, var(--mk-grid-maj) 0 1px, transparent 1px 120px); opacity:.35; animation:mk-drift 60s linear infinite; }
  .mk-grid-minor{ background:
      repeating-linear-gradient(to right, var(--mk-grid-min) 0 1px, transparent 1px 24px),
      repeating-linear-gradient(to bottom, var(--mk-grid-min) 0 1px, transparent 1px 24px); opacity:.28; animation:mk-drift 40s linear infinite reverse; }
  .mk-diag{ background:repeating-linear-gradient(45deg, var(--mk-diag) 0 1px, transparent 1px 16px); mask-image: linear-gradient(to left,#000 0%,rgba(0,0,0,0) 65%); opacity:.35; animation:mk-slide 30s linear infinite; }
  .mk-glow{ width:30%; left:-30%; top:0; bottom:0; position:absolute; background:linear-gradient(90deg,transparent 0%,var(--mk-glow) 50%,transparent 100%); filter:blur(1px); animation:mk-sweep 18s ease-in-out infinite; }
  .mk-noise{ opacity:.10; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>"); background-size:140px 140px; }
  .mk-vignette{ mix-blend-mode:multiply; background: radial-gradient(120% 120% at 50% 10%, rgba(0,0,0,0) 40%, rgba(0,0,0,.42) 100%); }
  @keyframes mk-drift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-24px,-24px,0)}}
  @keyframes mk-slide{0%{background-position:0 0}100%{background-position:180px 0}}
  @keyframes mk-sweep{0%{transform:translateX(0)}50%{transform:translateX(160%)}100%{transform:translateX(320%)}}

  /* ========= Hero ========= */
  .ds-hero{ text-align:center; padding: clamp(82px,9vw,128px) 0 56px; position:relative; isolation:isolate; }
  .ds-hero h1{ font-size: clamp(40px, 5.8vw, 68px); line-height:1.05; letter-spacing:-.02em; margin:0 0 14px; font-weight:900; }
  .ds-hero p{ color:var(--ds-muted); max-width:900px; margin:0 auto 22px; font-size:clamp(16px,2vw,18px); line-height:1.6; }
  .ds-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  .ds-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--ds-border); color:var(--ds-text); background:linear-gradient(180deg, transparent, rgba(255,255,255,.03)); font-weight:800; text-decoration:none; transition:transform .08s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; position:relative; overflow:hidden; }
  .ds-btn:hover{ transform:translateY(-1px); border-color:var(--ds-ring); box-shadow:0 6px 18px rgba(0,0,0,.18); }
  .ds-btn-primary{ background:#fff; color:#0f1116; border-color:transparent; }
  html[data-theme="dark"] .ds-btn-primary{ background:#eaeaea; color:#0f1116; }

  /* ========= SECTION 1 — Strategy Toolkit (ícones deformam + frase) ========= */
  .ds-tools{ margin-top:26px; display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; }
  .tool{
    position:relative; border:1px solid var(--ds-border); border-radius:16px; background:var(--ds-card);
    aspect-ratio:1; display:grid; place-items:center; overflow:hidden;
    transition: transform .12s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, filter .2s ease;
    cursor:default;
  }
  .tool i{ font-size:24px; opacity:.9; transition: transform .25s ease, filter .25s ease; }
  .tool:hover{ transform: translateY(-2px) scale(1.02) rotate(var(--rot,0deg)) skew(var(--sk,0deg)); border-color:var(--ds-ring); background:var(--ds-cardhover); box-shadow:0 10px 26px rgba(0,0,0,.24); filter: saturate(1.2); }
  .tool:hover i{ transform: scale(1.15) rotate(-6deg); filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }

  /* “balão” de frase do próprio item */
  .tool .note{
    position:absolute; left:12px; right:12px; bottom:12px;
    background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.18);
    border-radius:12px; padding:8px 10px; font-size:12px; line-height:1.3; display:none;
    box-shadow: 0 8px 18px rgba(0,0,0,.35);
  }
  .tool:hover .note, .tool:focus-visible .note{ display:block; animation: pop .18s ease; }
  @keyframes pop{ from{ transform:translateY(6px); opacity:0 } to{ transform:none; opacity:1 } }

  /* ========= SECTION 2 — Channels (Google/Meta/TikTok…) ========= */
  .ds-channels .ds-head{ text-align:center; margin-bottom:16px; }
  .ds-channels h2{ font-size: clamp(28px,4vw,44px); margin:0 0 8px; letter-spacing:-.02em; }
  .ds-channels p{ color:var(--ds-muted); margin:0; }
  .badges{ display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; margin-top:20px; }
  .badge{
    position:relative; border:1px solid var(--ds-border); border-radius:999px; padding:10px 14px;
    display:flex; align-items:center; justify-content:center; gap:8px; background:var(--ds-card);
    font-weight:800; transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .badge i{ font-size:15px; opacity:.9; }
  .badge:hover{ transform: translateY(-2px); border-color:var(--ds-ring); background:var(--ds-cardhover); box-shadow: 0 10px 26px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06); }
  .badge::after{ /* brilho que percorre a borda ao hover */
    content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px;
    background: conic-gradient(from 0deg, rgba(96,165,250,.5), rgba(167,139,250,.5), rgba(245,158,11,.55), rgba(96,165,250,.5));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .25s ease;
  }
  .badge:hover::after{ opacity:.25; }

  /* ========= SECTION 3 — Cards principais (SEO, Ads, Social) ========= */
  .ds-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
  .ds-card{
    position:relative; border:1px solid var(--ds-border); border-radius:16px; background:var(--ds-card);
    padding:18px; min-height:240px; overflow:hidden; transition: transform .12s ease, border-color .2s ease, background .2s ease;
  }
  .ds-card:hover{ transform: translateY(-2px); border-color:var(--ds-ring); background:var(--ds-cardhover); }
  .ds-card h3{ margin:0 0 8px; font-size:18px; font-weight:900; letter-spacing:-.01em; }
  .ds-card p{ margin:0 0 10px; color:var(--ds-muted); }
  .ds-card ul{ margin:10px 0 0 0; padding:0; list-style:none; display:grid; gap:8px; }
  .ds-card li{ display:flex; gap:8px; align-items:flex-start; }
  .ds-card li i{ color:var(--ds-good); margin-top:3px; }
  /* linha animada no topo */
  .ds-card::before{
    content:""; position:absolute; left:0; right:0; top:0; height:2px;
    background: linear-gradient(90deg, var(--ds-accent), var(--ds-accent2), var(--ds-accent3), var(--ds-accent));
    background-size: 200% 100%; animation: run 6s linear infinite;
  }
  @keyframes run{ to{ background-position: 200% 0 } }

  /* ========= SECTION 4 — Funil animado (Acquire -> Engage -> Convert) ========= */
  .ds-funnel .ds-head{ text-align:center; margin-bottom:12px; }
  .ds-funnel h2{ font-size: clamp(28px,4vw,44px); margin:0 0 8px; }
  .funnel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; align-items:stretch; }
  .stage{
    border:1px solid var(--ds-border); border-radius:16px; background:var(--ds-card);
    padding:18px; overflow:hidden; min-height:220px;
  }
  .stage h4{ margin:0 0 6px; font-size:16px; font-weight:900; }
  .stage p{ margin:0; color:var(--ds-muted); }
  /* fio animado ligando as etapas */
  .funnel-grid{ --wire: linear-gradient(90deg, var(--ds-accent), var(--ds-accent2), var(--ds-accent3)); }
  .funnel-grid::after{
    content:""; position:absolute; left:8%; right:8%; margin:auto; height:2px; top: calc(50% + 18px);
    background: var(--wire); background-size: 200% 100%; filter: drop-shadow(0 0 6px rgba(0,0,0,.3));
    animation: run 8s linear infinite;
  }
  .funnel-grid{ position:relative; }
  .pulse{ position:absolute; top:-6px; width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 0 6px rgba(255,255,255,.08); animation: pulse 1.8s ease infinite; }
  @keyframes pulse{ 0%{transform:scale(1); opacity:1} 100%{ transform:scale(1.4); opacity:0 } }

  /* ========= CTA ========= */
  .ds-cta{ text-align:center; padding:56px 0; }
  .ds-cta h2{ font-size:clamp(28px,4vw,44px); margin:0 0 10px; }
  .ds-cta p{ color:var(--ds-muted); margin:0 0 16px; }

  /* ========= Responsive ========= */
  @media (max-width:1024px){
    .ds-tools{ grid-template-columns:repeat(3,1fr); }
    .badges{ grid-template-columns:repeat(3,1fr); }
    .ds-cards{ grid-template-columns:1fr; }
    .funnel-grid{ grid-template-columns:1fr; }
    .funnel-grid::after{ display:none; }
  }
  
  
  /* ============= DS: palette (usa suas vars se já existir) ============= */
html[data-theme="dark"]{
  --ds-text:#e8e8ee; --ds-muted:#a0a4ad;
  --ds-border:rgba(255,255,255,.10);
  --ds-card:rgba(255,255,255,.05); --ds-card2:rgba(255,255,255,.08);
  --ds-ring:rgba(96,165,250,.30);
}
html[data-theme="light"]{
  --ds-text:#0f1116; --ds-muted:#4f5563;
  --ds-border:rgba(10,10,20,.12);
  --ds-card:rgba(10,10,20,.04); --ds-card2:rgba(10,10,20,.07);
  --ds-ring:rgba(37,99,235,.28);
}

/* ================= Section head ================= */
.ds-section{ padding:85px 0; border-bottom:1px solid var(--ds-border); color:var(--ds-text); }
.ds-wrap{ width:min(1100px,92vw); margin-inline:auto; }

/* ================= Toolbar ================= */
.ds-tools{
  position:relative;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center;
  padding:12px 16px; border-radius:999px;
  border:1px solid var(--ds-border);
  background:linear-gradient(180deg,var(--ds-card2),var(--ds-card));
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 26px rgba(0,0,0,.25);
}

.tool{
  --rot:0deg; --sk:0deg;
  width:54px; height:54px; border-radius:14px;
  display:grid; place-items:center; position:relative; cursor:default;
  color:var(--ds-text);
  transform: rotate(var(--rot)) skewX(var(--sk));
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, filter .2s ease;
  outline: none;
}
.tool i{
  font-size:22px; opacity:.92;
  transition: transform .18s ease, filter .2s ease, opacity .2s ease;
}

/* glow/aura atrás do ícone */
.tool::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(60% 70% at 50% 50%, var(--ds-ring) 0%, rgba(0,0,0,0) 60%);
  filter: blur(10px); opacity:0; transition: opacity .2s ease;
}

/* hover/focus: “deforma”, levanta e brilha */
.tool:hover::before,
.tool:focus-visible::before{ opacity:1; }
.tool:hover,
.tool:focus-visible{
  transform: rotate(0) skewX(0) translateY(-3px) scale(1.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.tool:hover i,
.tool:focus-visible i{
  filter: drop-shadow(0 10px 18px rgba(96,165,250,.35)) saturate(1.15);
  animation: ds-jelly .45s ease;
}

@keyframes ds-jelly{
  0%,100%{ transform: scale(1,1) }
  40%    { transform: scale(1.12,.92) }
  60%    { transform: scale(.96,1.08) }
}

/* ================= Tooltip ================= */
.tool .note{
  position:absolute; left:50%; bottom:calc(100% + 14px);
  transform: translate(-50%, 6px) scale(.96);
  width:260px; max-width:min(70vw,320px);
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--ds-border);
  background: rgba(0,0,0,.60); color:#fff;
  backdrop-filter: blur(6px);
  font-size:13px; line-height:1.35;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index:5;
}
html[data-theme="light"] .tool .note{ background:rgba(255,255,255,.92); color:#0f1116; }

.tool .note::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:8px solid transparent; border-top-color: currentColor; opacity:.22;
}

.tool:hover .note,
.tool:focus-visible .note{
  opacity:1; transform: translate(-50%, 0) scale(1);
}

/* acessibilidade: foco por teclado visível */
.tool:focus-visible{
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ds-ring) 75%, transparent), 0 8px 22px rgba(0,0,0,.35);
}

/* ================= Responsivo ================= */
@media (max-width:680px){
  .ds-tools{ padding:10px 12px; gap:8px; }
  .tool{ width:48px; height:48px; }
  .tool i{ font-size:20px; }
  .tool .note{ width:220px; }
}

/* mostra a nota quando o item é aberto por clique (mobile) */
.tool.is-open .note{
  opacity:1; transform: translate(-50%, 0) scale(1);
}

/* animação de entrada levemente mais viva */
.tool .note{
  transform-origin: 50% 100%;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.7,.2,1);
}

/* micro pulso no container quando a nota abre */
.tool.is-open{
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
}
/* ===== DS Channels ===== */
.ds-channels .badges{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px; margin-top:12px;
}
.ds-channels .badge{
  position:relative; list-style:none; cursor:default; outline:none;
  display:flex; align-items:center; gap:10px; justify-content:center;
  padding:12px 14px; border-radius:999px; font-weight:800;
  border:1px solid var(--ds-border);
  background:linear-gradient(180deg,var(--ds-card2),var(--ds-card));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  transform: translateY(0) scale(1);
  transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, filter .2s ease;
}
.ds-channels .badge i{ font-size:18px; opacity:.95; transition: transform .16s ease; }

/* highlight + jelly */
.ds-channels .badge:hover,
.ds-channels .badge:focus-visible,
.ds-channels .badge.is-open{
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 2px color-mix(in oklab, var(--ds-ring) 70%, transparent);
}
.ds-channels .badge:hover i,
.ds-channels .badge:focus-visible i,
.ds-channels .badge.is-open i{
  animation: ds-jelly .45s ease;
}

/* tooltip */
.ds-channels .badge .mini{
  position:absolute; left:50%; top:calc(100% + 12px);
  transform: translate(-50%, 6px) scale(.96);
  width:280px; max-width:min(86vw,320px);
  padding:10px 12px; border-radius:12px; z-index:5;
  border:1px solid var(--ds-border);
  background: rgba(0,0,0,.60); color:#fff; backdrop-filter: blur(8px);
  font-weight:600; font-size:12.5px; line-height:1.35;
  box-shadow: 0 10px 28px rgba(0,0,0,.32);
  opacity:0; pointer-events:none;
  transition: opacity .16s ease, transform .16s cubic-bezier(.2,.7,.2,1);
}
html[data-theme="light"] .ds-channels .badge .mini{ background:rgba(255,255,255,.92); color:#0f1116; }
.ds-channels .badge .mini::before{
  content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  border:8px solid transparent; border-bottom-color: currentColor; opacity:.20;
}
/* show on hover/focus or when .is-open (mobile) */
.ds-channels .badge:hover .mini,
.ds-channels .badge:focus-visible .mini,
.ds-channels .badge.is-open .mini{
  opacity:1; transform: translate(-50%, 0) scale(1);
}

/* responsive */
@media (max-width:680px){
  .ds-channels .badges{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* ---------- toolbar wrapper + cloud ---------- */
.ds-tools-hero .ds-toolbar{ position:relative; padding:54px 0 6px; }
.ds-tools-hero .tag-cloud{
  position:absolute; inset:-40px 0 -48px 0; z-index:1; pointer-events:none;
}
.ds-tools-hero .tag{
  position:absolute; left:var(--x); top:var(--y);
  transform: translate(-50%, -50%) rotate(var(--r));
  padding:6px 10px; border-radius:10px; font-weight:900; font-size:12px;
  background: var(--c); color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.35);
  border:1px solid color-mix(in oklab, var(--c) 62%, #000 38%);
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  filter: saturate(1.05);
  animation: tag-float 8s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes tag-float{
  0%,100%{ transform: translate(-50%,-50%) rotate(var(--r)); }
  50%    { transform: translate(-50%,-60%) rotate(calc(var(--r) * -1)); }
}

/* ---------- pill com ícones ---------- */
.ds-tools{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:999px;
  border:1px solid var(--ds-border);
  background:linear-gradient(180deg,var(--ds-card2),var(--ds-card));
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 12px 28px rgba(0,0,0,.30);
}
.ds-tools .sep{
  width:1px; height:24px; opacity:.18;
  background: currentColor; align-self:center;
}

/* cada ícone (igual ao bloco anterior, com jelly e note) */
.tool{
  --rot:0deg; --sk:0deg;
  width:54px; height:54px; border-radius:14px;
  display:grid; place-items:center; position:relative; cursor:default; outline:none;
  color:var(--ds-text);
  transform: rotate(var(--rot)) skewX(var(--sk));
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, filter .2s ease;
}
.tool i{ font-size:22px; opacity:.95; transition: transform .18s ease, filter .2s ease; }
.tool::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(60% 70% at 50% 50%, var(--ds-ring) 0%, rgba(0,0,0,0) 60%);
  filter: blur(10px); opacity:0; transition: opacity .2s ease;
}
.tool:hover::before,
.tool:focus-visible::before{ opacity:1; }
.tool:hover,
.tool:focus-visible{ transform: rotate(0) skewX(0) translateY(-3px) scale(1.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset; }
.tool:hover i,
.tool:focus-visible i{ filter: drop-shadow(0 10px 18px rgba(96,165,250,.35)) saturate(1.15); animation: ds-jelly .45s ease; }
@keyframes ds-jelly{ 0%,100%{transform:scale(1)} 40%{transform:scale(1.12,.92)} 60%{transform:scale(.96,1.08)} }

/* tooltip / texto curto */
.tool .note{
  position:absolute; left:50%; bottom:calc(100% + 14px);
  transform: translate(-50%, 6px) scale(.96);
  width:260px; max-width:min(70vw,320px);
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--ds-border);
  background: rgba(0,0,0,.60); color:#fff; backdrop-filter: blur(6px);
  font-size:13px; line-height:1.35; box-shadow:0 8px 28px rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s cubic-bezier(.2,.7,.2,1);
}
html[data-theme="light"] .tool .note{ background:rgba(255,255,255,.92); color:#0f1116; }
.tool:hover .note, .tool:focus-visible .note, .tool.is-open .note{
  opacity:1; transform: translate(-50%, 0) scale(1);
}

/* responsivo */
@media (max-width:680px){
  .tool{ width:48px; height:48px; }
  .tool i{ font-size:20px; }
  .tool .note{ width:220px; }
}

/* ====== tokens reutilizados do hero anterior ====== */
:root{
  --as-hero-g1:#eae6ff;
  --as-hero-g2:#f6f7ff;
  --as-shadow-1:0 18px 60px rgba(16,12,48,.18);
  --mk-svc-grid:rgba(255,255,255,.06);
  --mk-svc-accent:rgba(220,210,255,.09);

  /* cor do texto do hero (contraste light/dark) */
  --ds-hero-fg:#fff; /* default dark */
}
html[data-theme="dark"]{
  --as-hero-g1:#1a1740;
  --as-hero-g2:#0b0a16;
  --mk-svc-grid:rgba(255,255,255,.06);
  --mk-svc-accent:rgba(220,210,255,.09);
  --ds-hero-fg:#fff;
}
html[data-theme="light"]{
  --mk-svc-grid:rgba(10,10,20,.10);
  --mk-svc-accent:rgba(59,44,127,.10);
  --ds-hero-fg:#0f1116;
}

/* ====== HERO (mesmo estilo visual da página anterior) ====== */
.ds-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding: clamp(82px,9vw,128px) 0 56px;
  color: var(--ds-hero-fg);
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(167,116,255,.26) 0%, rgba(167,116,255,0) 55%),
    linear-gradient(180deg, var(--as-hero-g1) 0%, var(--as-hero-g2) 100%);
  box-shadow: var(--as-shadow-1);
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align:center;
}
.ds-hero::before{ /* frosty corner */
  content:""; position:absolute; left:-80px; top:-80px; width:320px; height:320px;
  background: radial-gradient(closest-side, rgba(182,147,255,.75), rgba(182,147,255,.18), transparent 70%);
  filter: blur(28px); opacity:.85; pointer-events:none; z-index:0;
}

/* grade + faixa diagonal sobre o hero */
.ds-hero .mk-bg.svc-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.ds-hero .mk-bg.svc-bg::before{
  content:""; position:absolute; inset:0; opacity:.9;
  background:
    repeating-linear-gradient(to right, transparent 0 31px, var(--mk-svc-grid) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--mk-svc-grid) 31px 32px);
}
.ds-hero .mk-bg.svc-bg::after{
  content:""; position:absolute; inset:-18% -8% -18% 58%;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, var(--mk-svc-accent) 18px 19px),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.05), transparent 60%);
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 42% 100%);
}

/* tipografia dentro do hero */
.ds-hero h1{
  font-size: clamp(40px, 6.2vw, 92px);
  line-height: .95;
  letter-spacing: .04em;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 14px;
  filter: drop-shadow(0 10px 28px rgba(168,116,255,.35));
  max-width: 22ch;
  margin-inline:auto;
}
html[data-theme="light"] .ds-hero h1{ filter:none; }

.ds-hero p{
  color: color-mix(in oklab, var(--ds-hero-fg) 72%, transparent);
  max-width: 860px;
  margin: 0 auto 22px;
  font-size: clamp(16px,2.2vw,18px);
  line-height: 1.6;
}

/* ações (reutiliza seu .as-btn) */
.ds-hero .as-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px; }

/* contraste da grade (mesmos tokens do outro hero) */
:root{
  --mk-svc-grid: rgba(255,255,255,.08);    /* dark */
  --mk-svc-accent: rgba(220,210,255,.10);
}
html[data-theme="light"]{
  --mk-svc-grid: rgba(10,10,20,.10);       /* light */
  --mk-svc-accent: rgba(59,44,127,.12);
}

/* HERO – ordem de camadas correta */
.ds-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding: clamp(82px,9vw,128px) 0 56px;
  color: var(--ds-hero-fg);
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(167,116,255,.26) 0%, rgba(167,116,255,0) 55%),
    linear-gradient(180deg, var(--as-hero-g1) 0%, var(--as-hero-g2) 100%);
  box-shadow: var(--as-shadow-1);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ds-hero > .ds-wrap{ position:relative; z-index: 2; }   /* conteúdo no topo */

/* camada de grid/diagonal acima do fundo, abaixo do conteúdo */
.ds-hero .mk-bg.svc-bg{
  position:absolute; inset:0; pointer-events:none; z-index:1;
}
.ds-hero .mk-bg.svc-bg::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(to right, transparent 0 31px, var(--mk-svc-grid) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--mk-svc-grid) 31px 32px);
  opacity: .95;              /* mais visível */
}
.ds-hero .mk-bg.svc-bg::after{
  content:""; position:absolute; inset:-18% -8% -18% 58%;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, var(--mk-svc-accent) 18px 19px),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.06), transparent 60%);
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 42% 100%);
  opacity:.9;
  mix-blend-mode: normal;
}

/* “frosty corner” fica atrás de tudo */
.ds-hero::before{
  content:""; position:absolute; left:-80px; top:-80px; width:320px; height:320px;
  background: radial-gradient(closest-side, rgba(182,147,255,.75), rgba(182,147,255,.18), transparent 70%);
  filter: blur(28px); opacity:.85; pointer-events:none; z-index:0;
}
/* ==== tokens da grade para hero, iguais ao VB ==== */
:root{
  --mk-svc-grid: rgba(255,255,255,.08);
  --mk-svc-accent: rgba(220,210,255,.10);
}
html[data-theme="light"]{
  --mk-svc-grid: rgba(10,10,20,.10);
  --mk-svc-accent: rgba(59,44,127,.12);
}

/* ==== HERO base / camadas ==== */
.ds-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding: clamp(82px,9vw,128px) 0 56px;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(167,116,255,.26) 0%, rgba(167,116,255,0) 55%),
    linear-gradient(180deg, var(--as-hero-g1, #1a1740) 0%, var(--as-hero-g2, #0b0a16) 100%);
  box-shadow: var(--as-shadow-1, 0 18px 60px rgba(16,12,48,.18));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ds-hero::before{ /* frosty corner */
  content:""; position:absolute; left:-80px; top:-80px; width:320px; height:320px;
  background: radial-gradient(closest-side, rgba(182,147,255,.75), rgba(182,147,255,.18), transparent 70%);
  filter: blur(28px); opacity:.85; z-index:0;
}
.ds-hero > .ds-wrap{ position:relative; z-index:2; }

.ds-hero .mk-bg.svc-bg{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.ds-hero .mk-bg.svc-bg::before{
  content:""; position:absolute; inset:0; opacity:.95;
  background:
    repeating-linear-gradient(to right, transparent 0 31px, var(--mk-svc-grid) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--mk-svc-grid) 31px 32px);
}
.ds-hero .mk-bg.svc-bg::after{
  content:""; position:absolute; inset:-18% -8% -18% 58%;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, var(--mk-svc-accent) 18px 19px),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.06), transparent 60%);
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 42% 100%);
  opacity:.9;
}

/* ==== Tipografia do título (igual VB) ==== */
.ds-title{
  margin:0; max-width: 22ch;
  font-size: clamp(42px, 7vw, 96px);
  line-height:.95; letter-spacing:.04em; font-weight:800;
  text-transform:uppercase; 
  filter: drop-shadow(0 10px 28px rgba(168,116,255,.35));
}
.ds-title .ds-line{ display:block; }
.ds-title .ds-accent{
  position:relative;
  background:linear-gradient(90deg,#8ff 0%,#f8f 40%,#ffd27a 80%,#8ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ds-title .ds-accent::after{
  content:""; position:absolute; left:0; right:8%; bottom:-10px; height:4px;
  background:linear-gradient(90deg,#8ff,#ffd27a,#f8f);
  border-radius:3px; opacity:.65;
}

/* subtítulo e ações, mantendo o mesmo look */
.ds-sub{
  margin-top:18px; max-width:900px; margin-inline:auto;
  color: rgba(237,241,255,.75);
  font-size: clamp(16px,2.1vw,18px); line-height:1.6; text-align:center;
}
.as-actions{ display:flex; gap:12px; margin-top:22px; justify-content:center; flex-wrap:wrap; }

/* responsivo */
@media (max-width:980px){
  .ds-title{ font-size: clamp(36px, 9vw, 68px); }
  .ds-title .ds-accent::after{ bottom:-8px; height:3px; }
  .ds-sub{ max-width: 60ch; }
}
/* Hero: reforça contraste só do .ds-line */
html[data-theme="light"] .ds-hero .ds-line{
  color:#0f1116 !important;         /* preto rico no light */
  -webkit-text-fill-color:#0f1116;  /* cobre casos de background-clip */
}

html[data-theme="dark"] .ds-hero .ds-line{
  color:#ffffff !important;         /* branco no dark */
  -webkit-text-fill-color:#ffffff;
}


/* ===================== THEME TOKENS ===================== */
html[data-theme="dark"]{
  --sb-bg:#0b0b0d; --sb-text:#ececf3; --sb-muted:#a0a4ad;
  --sb-border:rgba(255,255,255,.10);
  --sb-card:rgba(255,255,255,.06); --sb-card2:rgba(255,255,255,.08);
  --sb-card3:rgba(255,255,255,.04); --sb-ring:rgba(96,165,250,.35);
  --sb-elev:0 18px 60px rgba(0,0,0,.45);
  --spot1:rgba(160,160,255,.22); --spot2:rgba(255,255,255,.08); --spot3:rgba(120,255,200,.16);
  --accent:#8ddcff; --accent2:#f8a8ff;
}
html[data-theme="light"]{
  --sb-bg:#ffffff; --sb-text:#0f1116; --sb-muted:#4f5563;
  --sb-border:rgba(10,10,20,.12);
  --sb-card:rgba(10,10,20,.04); --sb-card2:rgba(10,10,20,.06);
  --sb-card3:rgba(10,10,20,.02); --sb-ring:rgba(37,99,235,.30);
  --sb-elev:0 18px 60px rgba(16,12,48,.15);
  --spot1:rgba(90,90,220,.14); --spot2:rgba(0,0,0,.05); --spot3:rgba(70,200,150,.10);
  --accent:#2563eb; --accent2:#8b5cf6;
}
:root{ /* fallback dark */
  --sb-bg:#0b0b0d; --sb-text:#ececf3; --sb-muted:#a0a4ad;
  --sb-border:rgba(255,255,255,.10);
  --sb-card:rgba(255,255,255,.06); --sb-card2:rgba(255,255,255,.08); --sb-card3:rgba(255,255,255,.04);
  --sb-ring:rgba(96,165,250,.35); --sb-elev:0 18px 60px rgba(0,0,0,.45);
  --spot1:rgba(160,160,255,.22); --spot2:rgba(255,255,255,.08); --spot3:rgba(120,255,200,.16);
  --accent:#8ddcff; --accent2:#f8a8ff;
}

body{ background:var(--sb-bg); color:var(--sb-text); }

/* ===================== GLOBAL WORKED BACKGROUND ===================== */
:root{
  --mk-grid-maj: rgba(255,255,255,.06);
  --mk-grid-min: rgba(255,255,255,.035);
  --mk-diag: rgba(255,255,255,.045);
  --mk-glow: rgba(96,165,250,.15);
}
html[data-theme="light"]{
  --mk-grid-maj: rgba(10,10,20,.10);
  --mk-grid-min: rgba(10,10,20,.06);
  --mk-diag: rgba(10,10,20,.06);
  --mk-glow: rgba(37,99,235,.18);
}
.mk-page-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.mk-layer{ position:absolute; inset:0; }
.mk-spots{
  background:
   radial-gradient(880px 360px at 70% -10%, var(--spot1), transparent 60%),
   radial-gradient(1200px 500px at 25% -18%, var(--spot2), transparent 65%),
   radial-gradient(760px 340px at 50% 120%, var(--spot3), transparent 72%);
  filter: blur(22px); animation: mk-breathe 14s ease-in-out infinite;
}
.mk-grid-major{
  background:
    repeating-linear-gradient(to right, var(--mk-grid-maj) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to bottom, var(--mk-grid-maj) 0 1px, transparent 1px 120px);
  opacity:.35; animation: mk-drift 60s linear infinite;
}
.mk-grid-minor{
  background:
    repeating-linear-gradient(to right, var(--mk-grid-min) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, var(--mk-grid-min) 0 1px, transparent 1px 24px);
  opacity:.28; animation: mk-drift 40s linear infinite reverse;
}
.mk-diag{
  background: repeating-linear-gradient(45deg, var(--mk-diag) 0 1px, transparent 1px 16px);
  mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0) 65%); opacity:.35; animation: mk-slide 30s linear infinite;
}
.mk-glow{
  width:30%; left:-30%; top:0; bottom:0; position:absolute;
  background: linear-gradient(90deg, transparent 0%, var(--mk-glow) 50%, transparent 100%);
  filter: blur(1px); animation: mk-sweep 18s ease-in-out infinite;
}
.mk-noise{
  opacity:.10;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size:140px 140px;
}
.mk-vignette{ mix-blend-mode:multiply; background: radial-gradient(120% 120% at 50% 10%, rgba(0,0,0,0) 40%, rgba(0,0,0,.42) 100%); }
@keyframes mk-breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }
@keyframes mk-drift { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-24px,-24px,0)} }
@keyframes mk-slide { 0%{background-position:0 0} 100%{background-position:180px 0} }
@keyframes mk-sweep { 0%{transform:translateX(0)} 50%{transform:translateX(160%)} 100%{transform:translateX(320%)} }

/* ===================== WRAPPER ===================== */
.sb-wrap{ width:min(1100px,92vw); margin-inline:auto; position:relative; z-index:2; }

/* ===================== HERO ===================== */
.sb-hero{ text-align:center; padding: clamp(84px,9vw,128px) 0 36px; }
.sb-kicker{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid var(--sb-border); background:var(--sb-card3);
  font-weight:800; font-size:12px; color:var(--sb-muted);
  backdrop-filter: blur(8px);
}
.sb-title{
  margin:12px 0 10px; line-height:1.1;
  font-size: clamp(36px,6.6vw,64px); font-weight:900; letter-spacing:-.01em;
  text-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.sb-sub{ color:var(--sb-muted); max-width:820px; margin:0 auto 18px; font-size:clamp(15px,2vw,18px); }

/* ===================== BILLING TOGGLE ===================== */
.sb-toggle{
  display:inline-flex; gap:6px; padding:4px; border-radius:999px; border:1px solid var(--sb-border);
  background:linear-gradient(180deg,var(--sb-card2),var(--sb-card3)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.sb-pill{
  min-width:110px; height:36px; padding:0 14px; border-radius:999px; display:grid; place-items:center;
  font-weight:800; cursor:pointer; user-select:none;
  color:var(--sb-text);
}
.sb-pill.is-on{ background:#fff; color:#0f1116; }
html[data-theme="dark"] .sb-pill.is-on{ background:#eaeaea; color:#0f1116; }

/* ===================== PRICING CARDS ===================== */
.sb-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; align-items:stretch;
}
.sb-card{
  position:relative; border:1px solid var(--sb-border); border-radius:18px; overflow:hidden;
  background: linear-gradient(180deg, color-mix(in oklab, var(--sb-card) 70%, transparent), var(--sb-card3));
  box-shadow: var(--sb-elev);
  padding:18px; display:flex; flex-direction:column; gap:12px;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, border-color .2s ease;
}
.sb-card:hover{ transform: translateY(-4px); border-color:var(--sb-ring); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.sb-card .badge{
  position:absolute; top:14px; right:14px; font-size:12px; font-weight:900; color:#fff;
  padding:6px 10px; border-radius:999px; background: linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.sb-name{ font-weight:900; font-size:16px; margin:2px 0 0; }
.sb-note{ color:var(--sb-muted); font-size:12.5px; margin-top:-6px; }
.sb-price{ font-size:38px; font-weight:900; margin:6px 0; display:flex; align-items:baseline; gap:6px; }
.sb-per{ color:var(--sb-muted); font-weight:700; font-size:13px; }
.sb-cta{
  margin-top:4px; display:grid; place-items:center;
}
.sb-btn{
  width:100%; height:42px; border-radius:10px; border:1px solid var(--sb-border);
  font-weight:900; display:grid; place-items:center; text-decoration:none; cursor:pointer;
  background:linear-gradient(180deg,var(--sb-card2),var(--sb-card3));
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.sb-btn:hover{ transform: translateY(-2px); border-color:var(--sb-ring); box-shadow: 0 14px 28px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06); }
.sb-list{ margin:10px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.sb-list li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--sb-text); }
.sb-list i{ color:#22c55e; margin-top:3px; }

/* selected outline */
.sb-card.is-selected{ outline:2px solid color-mix(in oklab, var(--sb-ring) 75%, transparent); }

/* radio invisível pro click inteiro */
.sb-card input[type="radio"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }

/* “Projeto Único” tem botão para abrir modal */
.sb-card.unique .sb-btn{ background:#fff; color:#0f1116; border-color:transparent; }
html[data-theme="dark"] .sb-card.unique .sb-btn{ background:#eaeaea; color:#0f1116; }

/* RESPONSIVO */
@media (max-width:1024px){
  .sb-grid{ grid-template-columns:1fr; }
}

/* ===== FAQ (usa seu layout atual) – só garantimos contraste ===== */
.faq-section{ position:relative; z-index:2; }

/* ----- FAQ wrapper com vidro, usando o seu background trabalhado ----- */
.sub-faq { padding: 72px 0; border-top:1px solid var(--vb-border, rgba(255,255,255,.08)); }
.sub-wrap { width:min(1100px,92vw); margin-inline:auto; }

.sub-kicker{
  display:inline-block; padding:6px 10px; border-radius:999px; font-weight:800;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--vb-border, rgba(255,255,255,.12));
  background: linear-gradient(180deg, var(--vb-card, rgba(255,255,255,.06)), transparent);
  color: var(--vb-muted, #a0a4ad);
  backdrop-filter: blur(6px);
}
.sub-faq-title{ margin:.6rem 0 .4rem; font-size:clamp(28px,4vw,44px); line-height:1.1; font-weight:900; }
.sub-faq-sub{ color:var(--vb-muted,#a0a4ad); max-width:740px; }

/* ----- Accordion ----- */
.sub-accordion{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; }
.sub-item details{
  border:1px solid var(--vb-border, rgba(255,255,255,.10));
  border-radius:14px; overflow:hidden;
  background: color-mix(in oklab, var(--vb-card, rgba(255,255,255,.05)) 90%, transparent);
  backdrop-filter: blur(8px);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.sub-item details[open]{
  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.03);
}
.sub-item summary{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:16px 18px; cursor:pointer; list-style:none; font-weight:800;
}
.sub-item summary::-webkit-details-marker{ display:none; }
.sub-item summary svg{ transition: transform .2s ease; opacity:.9; }
.sub-item details[open] summary svg{ transform: rotate(180deg); }

.sub-answer{ padding:0 18px 16px 18px; color:var(--vb-muted,#a0a4ad); }

/* Light mode contrast (usa os tokens já do seu tema) */
html[data-theme="light"] .sub-item details{
  background: color-mix(in oklab, var(--vb-card, rgba(10,10,20,.04)) 94%, #fff 6%);
}

/* ===== Terms (tokens) ===== */
:root{
  --terms-max: 1200px;
  --terms-grid: rgba(16,17,21,.06);
  --terms-accent: rgba(59,44,127,.10);
}
html[data-theme="dark"]{
  --terms-grid: rgba(255,255,255,.06);
  --terms-accent: rgba(220,210,255,.09);
}

/* ===== Section com background “trabalhado” ===== */
.terms-section{
  position: relative;
  background: var(--bg);
  color: var(--text);
  padding: 72px 16px;
  overflow: hidden;
  isolate: isolate;
}
.terms-section::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(to right, transparent 0 31px, var(--terms-grid) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--terms-grid) 31px 32px);
  z-index:-2; pointer-events:none; opacity:.9;
}
.terms-section::after{
  content:""; position:absolute; inset:-18% -8% -18% 50%;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, var(--terms-accent) 18px 19px),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.05), transparent 60%);
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
  z-index:-1; pointer-events:none;
}

/* ===== Layout em 2 colunas (conteúdo + TOC gerado por JS) ===== */
.terms-section .container{
  max-width: var(--terms-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px; /* TOC à direita */
  gap: 28px;
  align-items: start;
}
.terms-main{ min-width: 0; } /* evita overflow de textos longos */

/* Responsivo */
@media (max-width: 980px){
  .terms-section .container{
    grid-template-columns: 1fr; /* TOC vai para baixo e vira card */
  }
}

/* ===== Tipografia ===== */
.terms-section h1{
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 6px;
}
.terms-section p{ margin: 0 0 14px; line-height: 1.75; opacity: .95; }
.terms-section h2{
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  margin: 24px 0 8px;
  letter-spacing: -.01em;
  position: relative;
}
.terms-section strong{ font-weight: 800; }

/* Links */
.terms-section a{ color: var(--link); text-decoration: none; }
.terms-section a:hover{ text-decoration: underline; }

/* Listas */
.terms-section ul{ margin: 8px 0 16px 0; padding-left: 0; list-style: none; }
.terms-section ul li{
  position: relative; padding-left: 22px; margin: 6px 0;
  line-height: 1.65;
}
.terms-section ul li::before{
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: .35;
}

/* ===== TOC (gerado por JS) ===== */
.terms-toc{
  border: 1px solid var(--btn-border);
  border-radius: 16px;
  background: var(--bg);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 14px;
  position: sticky; top: 90px;
}
.terms-toc .toc-title{
  font-weight: 800; font-size: .95rem; margin-bottom: 8px; opacity: .9;
}
.terms-toc ol{ list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.terms-toc a{
  display: block; text-decoration: none; color: var(--text);
  font-size: .95rem; opacity: .85; padding: 6px 8px; border-radius: 8px;
}
.terms-toc a:hover{ background: var(--hover-pill); }
.terms-toc a.active{ background: var(--hover-pill); opacity: 1; font-weight: 700; }

/* Âncora que aparece ao passar o mouse no h2 */
.h-anchor{
  position:absolute; left: -24px; top: 50%; transform: translateY(-50%);
  opacity: 0; transition: opacity .15s ease;
  font-weight: 900; text-decoration: none; color: var(--text);
  font-size: .95rem;
}
.terms-section h2:hover .h-anchor{ opacity: .6; }
.terms-section h2 .h-anchor:hover{ opacity: 1; }

/* Separadores sutis entre blocos */
.terms-section h2 + p,
.terms-section h2 + ul{
  border-top: 1px solid var(--btn-border);
  padding-top: 10px;
}


/* ===== Privacy (tokens) ===== */
:root{
  --privacy-max: 1200px;
  --privacy-grid: rgba(16,17,21,.06);
  --privacy-accent: rgba(59,44,127,.10);
}
html[data-theme="dark"]{
  --privacy-grid: rgba(255,255,255,.06);
  --privacy-accent: rgba(220,210,255,.09);
}

/* ===== Section com background “trabalhado” ===== */
.privacy-section{
  position: relative;
  background: var(--bg);
  color: var(--text);
  padding: 72px 16px;
  overflow: hidden;
  isolate: isolate;
}
.privacy-section::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(to right, transparent 0 31px, var(--privacy-grid) 31px 32px),
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--privacy-grid) 31px 32px);
  z-index:-2; pointer-events:none; opacity:.9;
}
.privacy-section::after{
  content:""; position:absolute; inset:-18% -8% -18% 50%;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, var(--privacy-accent) 18px 19px),
    radial-gradient(800px 400px at 70% 30%, rgba(255,255,255,.05), transparent 60%);
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
  z-index:-1; pointer-events:none;
}

/* ===== Layout 2 colunas (conteúdo + TOC) ===== */
.privacy-section .container{
  max-width: var(--privacy-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}
.privacy-main{ min-width: 0; } /* evita overflow */

/* Responsivo */
@media (max-width: 980px){
  .privacy-section .container{ grid-template-columns: 1fr; }
}

/* ===== Tipografia ===== */
.privacy-section h1{
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1; letter-spacing: -.01em;
  margin: 0 0 6px;
}
.privacy-section .effective-date{
  margin: 0 0 12px; opacity:.85; font-weight: 700;
}
.privacy-section h2{
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  margin: 24px 0 8px; letter-spacing:-.01em; position: relative;
}
.privacy-section p{ margin: 0 0 14px; line-height: 1.75; opacity:.95; }

/* Links */
.privacy-section a{ color: var(--link); text-decoration: none; }
.privacy-section a:hover{ text-decoration: underline; }

/* Listas */
.privacy-section ul{ margin: 8px 0 16px 0; padding-left: 0; list-style: none; }
.privacy-section ul li{
  position: relative; padding-left: 22px; margin: 6px 0; line-height: 1.65;
}
.privacy-section ul li::before{
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: .35;
}

/* ===== TOC (sidebar) ===== */
.privacy-toc{
  border: 1px solid var(--btn-border);
  border-radius: 16px;
  background: var(--bg);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 14px;
  position: sticky; top: 90px;
}
.privacy-toc .toc-title{
  font-weight: 800; font-size: .95rem; margin-bottom: 8px; opacity: .9;
}
.privacy-toc ol{ list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.privacy-toc a{
  display:block; text-decoration:none; color: var(--text);
  font-size:.95rem; opacity:.85; padding:6px 8px; border-radius:8px;
}
.privacy-toc a:hover{ background: var(--hover-pill); }
.privacy-toc a.active{ background: var(--hover-pill); opacity:1; font-weight:700; }

/* Âncora do h2 */
.p-anchor{
  position:absolute; left:-24px; top:50%; transform:translateY(-50%);
  opacity:0; transition:opacity .15s ease;
  font-weight:900; text-decoration:none; color:var(--text); font-size:.95rem;
}
.privacy-section h2:hover .p-anchor{ opacity:.6; }
.privacy-section h2 .p-anchor:hover{ opacity:1; }

/* Separador sutil logo após h2 */
.privacy-section h2 + p,
.privacy-section h2 + ul{
  border-top: 1px solid var(--btn-border);
  padding-top: 10px;
}