:root{
  /* paleta pedida */
  --bg:#000000;
  --text:#f2efe8;
  --muted:#c9c5bb;
  --brand:#8435ff;
  --brand-2:#5e2ae8;

  /* glass baseado no off-white */
  --glass: rgba(242,239,232,.06);
  --glass-border: rgba(242,239,232,.14);

  --maxw: 1200px; --pad: clamp(16px, 3vw, 32px);
  --h1: clamp(44px, 8vw, 122px); --h1-tight: clamp(38px, 7.6vw, 112px);
  --h2: clamp(28px, 5.6vw, 64px);
  --navH: 60px;

  --font-ui: 'Exo 2', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Orbitron', 'Exo 2', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* base */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family: var(--font-ui);
}
body{ margin:0; line-height:1.35 }
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }

h1, h2, h3, .brand-title { font-family: var(--font-display); }

#h-home {
  font-size: clamp(42px, 8vw, 92px);
}

#h-home .tight {
  font-size: clamp(38px, 8vw, 92px);
}

/* plasma (fundo aurora roxo) */
.page{ position:relative; min-height:100svh; overflow:clip; isolation:isolate }
.plasma{
  position:absolute; inset:0; z-index:0; pointer-events:none;

  /* posições animadas */
  --x1: 20%; --y1: 70%;
  --x2: 80%; --y2: 30%;

  /* camadas */
  background:
    radial-gradient(55% 65% at var(--x1) var(--y1), rgba(132,53,255,.40), transparent 60%),
    radial-gradient(45% 60% at var(--x2) var(--y2), rgba(94,42,232,.35), transparent 62%),
    radial-gradient(120% 100% at 50% 100%, rgba(20,0,40,.60), transparent 60%),
    radial-gradient(100% 80% at 50% 0%, rgba(132,53,255,.10), transparent 60%);
  background-blend-mode: screen, screen, multiply, normal;
  filter: saturate(140%);
}

/* NAV */
.topbar{
  position: sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height: var(--navH);
  padding: 0 var(--pad);
  backdrop-filter: blur(8px);
}
.brand{ display:flex; align-items:center; gap:10px; color:inherit }
.brand-logo{ height: calc(var(--navH) - 8px); width:auto }
.brand-wordmark{ display:flex; flex-direction:column; line-height:1; transform: translateY(1px) }
.brand-title{ font-weight:600; letter-spacing:.10em; font-size: clamp(14px, 2.1vw, 18px) }
.brand-sub{ margin-top:2px; font-weight:600; opacity:.95; letter-spacing:.22em; font-size: clamp(6.5px, 0.3vw, 11px) }

.nav{ display:flex; gap:22px }
.nav-link{ letter-spacing:.14em; padding:10px 6px; border-radius:10px; opacity:.85 }
.nav-link:hover{ background:var(--glass) }

/* ====== Mobile nav (hambúrguer + drawer) ====== */

/* botão hambúrguer — versão bonita & interativa */
/* botão */
.nav-toggle{
  display: inline-flex;             /* já tinha */
  flex-direction: column;           /* ✅ empilha as barras */
  align-items: center;
  justify-content: center;
  gap: 6px;                         /* espaçamento vertical entre barras */
  position: relative;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  backdrop-filter: blur(8px) saturate(120%);
  transition: transform .16s ease, box-shadow .22s ease, background .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle:hover{
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 0 1px rgba(132,53,255,.30) inset,
    0 0 24px rgba(132,53,255,.20);
  border-color: rgba(132,53,255,.45);
}
.nav-toggle:active{ transform: translateY(0) scale(.98); }
.nav-toggle:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(132,53,255,.4),
    0 10px 24px rgba(0,0,0,.28);
}

/* brilho giratório sutil no contorno */
.nav-toggle::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  padding: 1px;
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(132,53,255,.35), transparent 60%),
    conic-gradient(from 0deg,
      rgba(132,53,255,.00),
      rgba(132,53,255,.65),
      rgba(94,42,232,.65),
      rgba(132,53,255,.00));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.6;
  filter: blur(.3px);
  animation: ringSpin 6s linear infinite;
  pointer-events:none;
}
@keyframes ringSpin{
  to{ transform: rotate(360deg); }
}
/* pausa se o usuário prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  .nav-toggle::before{ animation:none }
}

/* barras */
.nav-toggle-bar{
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  box-shadow: 0 0 1px rgba(0,0,0,.35);
  transform-origin: 50% 50%;        /* ✅ centro */
  transition: transform .22s cubic-bezier(.2,.7,.2,1), opacity .18s ease, width .22s ease;
}

/* mantém as transições */
.nav-toggle .nav-toggle-bar{
  transition: transform .22s cubic-bezier(.2,.7,.2,1), opacity .18s ease, width .22s ease;
}

/* morph para X */
.nav-toggle.is-open .nav-toggle-bar:nth-child(1){
  transform: translateY(8px) rotate(45deg);
  width: 24px;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(2){
  opacity: 0;
  transform: translateX(6px);
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
  width: 24px;
}

/* ripple no clique */
.nav-toggle .rpl{
  position:absolute; border-radius:50%;
  inset:0; margin:auto; width:10px; height:10px;
  background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
  transform: scale(0);
  animation: ripple .5s ease-out forwards;
  pointer-events:none;
  mix-blend-mode: screen;
}
@keyframes ripple{
  to{ transform: scale(16); opacity:0; }
}

/* drawer + backdrop — FIX */
.mobile-menu[hidden]{ display:none !important; }

.mobile-menu{
  position: fixed; inset: 0;
  z-index: 1000;           /* stack alto, controlado */
  pointer-events: none;    /* fechado: não intercepta nada */
}

.mobile-menu__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.32);  /* dim consistente (ajuste aqui se quiser) */
  opacity: 0;
  transition: opacity .22s ease;
  z-index: 1;
  pointer-events: none;    /* só habilita quando .open */
}

.mobile-menu__panel{
  position:absolute; top:0; right:0; height:100%;
  width:min(92vw, 380px);
  background: rgba(242,239,232,.06);
  border-left: 1px solid var(--glass-border);
  backdrop-filter: blur(10px) saturate(120%);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
  display:flex; align-items:flex-start; justify-content:flex-start;
  padding: calc(18px + env(safe-area-inset-top) + 48px) 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: -16px 0 40px rgba(0,0,0,.45);
  z-index: 2;              /* painel acima do backdrop */
  pointer-events: auto;    /* painel clicável quando visível */
}

/* estado aberto */
.mobile-menu.open{ pointer-events: auto; }                  /* container passa a aceitar eventos */
.mobile-menu.open .mobile-menu__panel{ transform: translateX(0); }
.mobile-menu.open .mobile-menu__backdrop{
  opacity: 1;
  pointer-events: auto;                                     /* clicar fora fecha */
}

/* botão de fechar dentro do painel (garantia) */
/* botão X acima do conteúdo, mas pequeno */
.mobile-menu__close{
  position:absolute; top:12px; right:12px;
  width:40px; height:40px; border-radius:12px;
  background: var(--glass);
  border:1px solid var(--glass-border);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index: 3;                 /* acima do painel */
  pointer-events: auto;       /* clicável */
}
.mobile-menu__close::before,
.mobile-menu__close::after{
  content:""; position:absolute; width:20px; height:2px; border-radius:2px;
  background: rgba(255,255,255,.85);
}
.mobile-menu__close::before{ transform: rotate(45deg); }
.mobile-menu__close::after{ transform: rotate(-45deg); }

/* estado durante o arrasto (swipe-to-close) */
.mobile-menu__panel.is-dragging{
  transition: none !important;
  cursor: grab;
}
.mobile-menu__panel.is-dragging:active{ cursor: grabbing; }

/* links do menu mobile */
.mobile-menu__nav{
  display:flex; flex-direction:column;
  gap:12px; width:100%;
  margin-top: 8px;
}

.mobile-link{
  display:flex; align-items:center; justify-content:center; /* ✅ centraliza texto */
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--glass-border);
  background: var(--glass);
  font-weight:700; letter-spacing:.14em;
  text-align:center;
}

.mobile-menu .btn.w-100{
  display:flex; align-items:center; justify-content:center; /* botão grande centralizado */
  width:100%;
}

.mobile-link:hover{
  transform: translateX(2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

/* sections */
.section{ padding: clamp(72px, 12vw, 80px) 0 }
.section-alt{ padding: clamp(20px, 13vw, 120px) 0 }
.hero{ position:relative }
.hero .container{ position:relative }
h1{ margin:0 0 .4em; font-weight:800; line-height:.88; font-size:var(--h1); letter-spacing:.06em }
h1 .tight{ display:block; font-size:var(--h1-tight); letter-spacing:.065em }
.sub{ color:var(--muted); max-width:980px; font-size:clamp(16px, 2.1vw, 22px); line-height:1.35; letter-spacing:.08em }
.scroll-down{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); opacity:.8; letter-spacing:.2em }

/* headers seção */
.section-head h2{ font-size:var(--h2); margin:0 0 8px; letter-spacing:.10em }
.section-head .lead{ color:var(--muted); letter-spacing:.10em }

/* chips (baseline) */
.techs{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px }
.chip{
  display:inline-flex; align-items:center; padding:10px 14px; border-radius:999px;
  background: var(--glass); border:1px solid var(--glass-border);
  letter-spacing:.14em; font-weight:700;
  white-space: nowrap;
}

/* === NOVO: marquee/ticker para as techs === */
.techs-marquee{
  display:grid;
  gap:.6rem;
  margin-top:22px;
}
.tech-lane{
  --gap: 12px;
  --speed: 28s;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.tech-lane:hover .tech-track{ animation-play-state: paused; }
.tech-inner{
  display:flex;
  gap: var(--gap);
  padding: 10px;
}
/* trilho duplicado para loop contínuo */
.tech-track{
  display:inline-flex;
  align-items:center;
  gap: var(--gap);
  animation: tech-scroll var(--speed) linear infinite;
  will-change: transform;
}
.tech-lane.reverse .tech-track{ animation-direction: reverse; }
@keyframes tech-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
@media (width >= 1200px){
  .tech-lane{ --speed: 24s; }
}
@media (prefers-reduced-motion: reduce){
  .tech-track{ animation: none !important; }
}

/* audiences */
.audiences{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px; margin-top:24px;
}
.aud-card{
  background:rgba(242,239,232,.05);
  border:1px solid var(--glass-border);
  border-radius:16px; padding:18px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.aud-card:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 1px var(--glass-border) inset;
}
.aud-ico{ font-size:26px; margin-bottom:8px }
.aud-card h3{ margin:0 0 6px; letter-spacing:.10em }
.aud-card p{ color:var(--muted); margin:0 0 10px; letter-spacing:.06em }
.mini-btn{
  display:inline-block; padding:8px 12px; border-radius:12px;
  border:1px solid var(--glass-border); background:var(--glass);
  letter-spacing:.12em; font-weight:700;
}

/* buttons */
.actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top: clamp(24px, 4vw, 40px) }
.btn{
  --px:clamp(18px,3vw,32px); --py:clamp(12px,1.4vw,16px);
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:var(--py) var(--px); border-radius:14px; text-decoration:none; font-weight:700;
  font-size:clamp(14px,1.6vw,20px); border:1px solid var(--glass-border); background:var(--glass); color:var(--text);
  letter-spacing:.14em; backdrop-filter:blur(6px); transition:transform .18s, box-shadow .2s, background .2s
}
.btn.primary{
  background:linear-gradient(180deg, rgba(132,53,255,.20), rgba(94,42,232,.18));
  box-shadow:0 0 0 1px rgba(132,53,255,.35) inset, 0 10px 30px rgba(132,53,255,.20), 0 0 50px rgba(132,53,255,.25) inset
}
.btn.secondary{ background:var(--glass) }
.btn:hover{ transform:translateY(-1px) }

/* CTA da seção */
.section-cta{
  margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}
/* utilitário: empurra para a direita dentro do flex */
.push-right{ margin-left:auto; }

/* CTA WHATSAPP */
.cta-center{
  display:flex; justify-content:center;
  margin-top: clamp(22px, 4vw, 36px);
}

/* botão “tema claro” */
.btn.white{
  background: var(--text);
  color: var(--bg);
  border-color: rgba(0,0,0,.12);
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 0 1px rgba(0,0,0,.04) inset;
}
.btn.white.animate{
  background-image:
    linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(132,53,255,.10) 50%, rgba(255,255,255,0) 65%);
  background-repeat: no-repeat;
  background-size: 200% 200%;
}
.btn.white:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(0,0,0,.32),
    0 0 0 1px rgba(0,0,0,.06) inset;
}
.btn.white:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(132,53,255,.40),
    0 12px 30px rgba(0,0,0,.30);
}
.btn.animate .arrow{
  margin-left: 8px;
  animation: arrowNudgeDiag 1.2s ease-in-out infinite;
}
@keyframes arrowNudgeDiag{
  0%,100% { transform: translate(0,0);      opacity:.95; }
  50%     { transform: translate(4px,-4px); opacity:1;   }
}

/* footer */
.footer{ padding:42px 0; border-top:1px solid rgba(242,239,232,.12) }
.footer .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.footer p{ margin:0; opacity:.9; letter-spacing:.12em }
.back-to-top{ padding:10px 14px; border-radius:12px; border:1px solid var(--glass-border); letter-spacing:.14em }

/* responsive */
@media (width <= 880px){
  .nav-desktop{ display:none }  /* esconde a navegação desktop */
  .nav-toggle{ display:inline-flex }  /* mostra o hambúrguer */
  .brand-sub{ display:none }
}

/* ===== Interações / Animações ===== */

/* underline animado na nav */
.nav-link{ position:relative; }
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:4px; height:2px;
  background:linear-gradient(90deg, rgba(132,53,255,0), rgba(132,53,255,.8), rgba(132,53,255,0));
  transform:scaleX(0); transform-origin:center; transition:transform .25s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after{ transform:scaleX(1); }

/* reveal on scroll */
.reveal{
  opacity:0; transform: translateY(18px) scale(.98);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal-visible{
  opacity:1; transform: translateY(0) scale(1);
}

/* microinteractions */
.btn { transition: transform .16s ease, box-shadow .22s ease; }
.btn:hover { transform: translateY(-2px); }
.btn.primary:hover{
  box-shadow:0 14px 40px rgba(132,53,255,.26), 0 0 0 1px rgba(132,53,255,.45) inset;
}

.chip{ transition: transform .12s ease, box-shadow .2s ease; }
.chip:hover{ transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }

/* shine nos cards */
.aud-card{ position:relative; overflow:hidden; }
.aud-card::after{
  content:""; position:absolute; inset:-40%; transform: rotate(25deg) translateY(100%);
  background: linear-gradient(90deg, transparent, rgba(242,239,232,.15), transparent);
  transition: transform .6s ease; pointer-events:none;
}
.aud-card:hover::after{ transform: rotate(25deg) translateY(-20%); }

/* tilt base (aplicado via JS) */
.tilt-wrap{ perspective: 800px; }
.tilt{ transform-style: preserve-3d; transition: transform .08s linear; }

/* parallax sutil do plasma */
.plasma.parallax{ transition: transform .05s linear; }

/* ===== Cursor dot branco ===== */
.cursor-dot{
  position: fixed;
  left: 0; top: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 12px rgba(255,255,255,.35);
  pointer-events: none;
  z-index: 9999;
  opacity: .95;

  --tx: -100px; --ty: -100px; --s: 1;
  transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
  transition: transform .04s linear, opacity .2s ease;
}
.cursor-dot.active{ --s: 1.35; }
.cursor-dot.pulse{ animation: dotPulse .28s ease-out; }
@keyframes dotPulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.35), 0 0 12px rgba(255,255,255,.35); }
  100% { box-shadow: 0 0 0 16px rgba(255,255,255,0), 0 0 12px rgba(255,255,255,.35); }
}
.cursor-dot.hide{ opacity: 0; }
@media (hover: none){
  .cursor-dot{ display: none !important; }
}
@media (prefers-reduced-motion: reduce){
  .cursor-dot{ transition: none; }
}