/* =========================================================================
   ROX+  —  Sistema visual
   Roxo (#7C3AED) + Dourado (#FACC15) da logo oficial. Violeta premium.
   Roxo = tecnologia/confiança · Dourado = ação · Violeta escuro = segurança.
   ========================================================================= */

:root{
  /* Marca — paleta oficial roxo/dourado */
  --rox:        #7C3AED;   /* roxo primário (logo oficial) */
  --rox-bright: #A879F7;   /* roxo claro p/ realces em fundo violeta */
  --rox-deep:   #5B21B6;   /* roxo profundo */
  --gold:       #FACC15;   /* dourado (logo oficial) */
  --gold-soft:  #FDE047;

  /* Base escura neutra (matiz violeta sutil — menos saturada p/ leitura) */
  --bg:    #0E0B14;
  --bg-2:  #15121E;
  --bg-3:  #221C30;
  --line:  rgba(168,121,247,.16);
  --line-2:rgba(255,255,255,.08);

  /* Texto */
  --ink:    #F5F2FB;
  --ink-2:  #C9BEE6;
  --ink-3:  #8E83AE;

  /* Superfícies de vidro */
  --glass:    rgba(255,255,255,.045);
  --glass-2:  rgba(255,255,255,.07);
  --glass-br: rgba(255,255,255,.10);

  /* Tipografia */
  --display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --body:    'Manrope', system-ui, -apple-system, sans-serif;

  /* Escala / ritmo */
  --maxw: 1240px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  --shadow-rox: 0 24px 60px -24px rgba(124,58,237,.55);

  --ease: cubic-bezier(.22,.61,.36,1);

  /* Controlado por Tweaks */
  --accent: var(--rox);
  --video-opacity: .55;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--rox); color:#fff; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* Scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#2a1442; border-radius:99px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#3a1f5e; }

/* ---------- Tipografia utilitária ---------- */
.h-display{
  font-family:var(--display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.eyebrow{
  font-family:var(--display);
  font-size:13px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--rox-bright);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--gold); border-radius:2px;
}
.lead{ font-size:clamp(18px,1.4vw,21px); color:var(--ink-2); max-width:60ch; }
.muted{ color:var(--ink-3); }
.gold{ color:var(--gold); }
.rox-text{ color:var(--rox-bright); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section{ position:relative; padding:clamp(72px,10vw,140px) 0; scroll-margin-top:88px; }
.section--tight{ padding:clamp(56px,7vw,96px) 0; }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:99px;
  font-family:var(--display); font-weight:600; font-size:15px;
  letter-spacing:.01em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn--primary{
  background:linear-gradient(135deg,var(--accent),var(--rox-deep));
  color:#fff;
  box-shadow:var(--shadow-rox);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 30px 70px -20px rgba(124,58,237,.75); }
.btn--gold{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:#241200;
  box-shadow:0 20px 50px -20px rgba(250,204,21,.6);
}
.btn--gold:hover{ transform:translateY(-2px); }
.btn--ghost{
  background:var(--glass); color:var(--ink);
  border:1px solid var(--glass-br);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{ background:var(--glass-2); border-color:var(--rox-bright); }
.btn--lg{ padding:18px 32px; font-size:16px; }

/* ---------- Vidro / cards ---------- */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-br);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);
}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--rox-bright);
  box-shadow:var(--shadow-rox);
}

/* ---------- Chip / badge ---------- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:99px;
  font-size:13px; font-weight:600;
  background:var(--glass); border:1px solid var(--glass-br);
  color:var(--ink-2);
}
.dot{ width:7px; height:7px; border-radius:99px; background:var(--gold); box-shadow:0 0 10px var(--gold); }

/* ---------- Fundo de vídeo ---------- */
.video-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.video-bg video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:var(--video-opacity);
}
.video-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(124,58,237,.30), transparent 55%),
    linear-gradient(180deg, rgba(13,1,24,.55) 0%, rgba(13,1,24,.78) 55%, var(--bg) 100%);
}
.video-bg--solid::after{
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(124,58,237,.35), transparent 60%),
    linear-gradient(180deg, rgba(13,1,24,.78), rgba(13,1,24,.92));
}

/* grão / textura sutil */
.grain::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* malha de luz decorativa */
.glow{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; }
.glow--rox{ background:radial-gradient(circle,rgba(124,58,237,.5),transparent 70%); }
.glow--gold{ background:radial-gradient(circle,rgba(250,204,21,.25),transparent 70%); }

/* divisória fina */
.hr{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); border:0; }

/* reveal on scroll — opacidade SEMPRE 1 (à prova de falha); anima só o deslize */
.reveal{ opacity:1; }
.reveal.in{ animation:revealIn .7s var(--ease) both; }
@keyframes revealIn{
  from{ transform:translateY(24px); }
  to{ transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .reveal.in{ animation:none; }
}

/* fitas decorativas estilo logo (conector pontilhado) */
.connector{
  display:flex; align-items:center; gap:0; flex-wrap:wrap;
}
.connector .node{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--rox),var(--rox-deep));
  color:#fff; flex:0 0 auto;
  box-shadow:0 10px 30px -10px rgba(124,58,237,.7);
}
.connector .node svg{ width:24px; height:24px; }
.connector .link{ flex:1 1 30px; height:5px; min-width:24px; border-radius:99px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 16px, transparent 16px 28px); }

@media (max-width:760px){
  body{ font-size:16px; }
  .wrap{ padding:0 20px; }
}