/* ═══════════════════════════════════════════════════════
   RedFox — Landing
   Design system: Maximalism / Dopamine
   Tokens centralizados em :root. Nada de cor solta.
   ═══════════════════════════════════════════════════════ */

:root{
  /* Base */
  --bg:        #0D0D1A;
  --fg:        #FFFFFF;
  --muted:     #2D1B4E;

  /* Os 5 acentos — rotação sistemática por seção/elemento */
  --a1: #FF3AF2;  /* magenta  */
  --a2: #00F5D4;  /* ciano    */
  --a3: #FFE600;  /* amarelo  */
  --a4: #FF6B35;  /* laranja  */
  --a5: #7B2FFF;  /* roxo     */

  /* Tipografia */
  --font-head: "Outfit", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-disp: "Bungee", "Outfit", cursive;

  /* Raios */
  --r-btn: 9999px;
  --r-card: 24px;
  --r-box: 16px;

  /* Sombras */
  --glow:     0 0 20px rgba(255,58,242,.5), 0 0 40px rgba(0,245,212,.3);
  --glow-lg:  0 0 40px rgba(255,58,242,.6), 0 0 80px rgba(255,230,0,.4), 0 0 120px rgba(123,47,255,.3);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.625;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ═══════════ PADRÕES GLOBAIS (camada fixa) ═══════════ */
.global-pattern{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
}
.pattern-dots{
  background-image:radial-gradient(circle, var(--a1) 1px, transparent 1px);
  background-size:32px 32px;
  opacity:.10;
}
.pattern-stripes{
  background-image:repeating-linear-gradient(45deg,
    transparent, transparent 12px,
    rgba(255,230,0,.08) 12px, rgba(255,230,0,.08) 24px);
  opacity:.6;
}

/* Malha radial reaproveitável */
.mesh{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 28%, rgba(255,58,242,.20) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 68%, rgba(0,245,212,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(123,47,255,.15) 0%, transparent 65%);
}
.mesh--cta{
  background:
    radial-gradient(ellipse at 25% 30%, rgba(255,107,53,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 65%, rgba(255,58,242,.20) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, rgba(0,245,212,.15) 0%, transparent 60%);
}

/* ═══════════ LAYOUT ═══════════ */
.wrap{
  width:100%; max-width:1280px;
  margin-inline:auto; padding-inline:24px;
  position:relative; z-index:10;
}
.wrap--narrow{ max-width:860px; }

.section{
  position:relative;
  padding-block:112px;
  overflow:hidden;
}

.section__head{ margin-bottom:72px; max-width:760px; }

.section__title{
  font-family:var(--font-head);
  font-weight:900;
  font-size:clamp(2.6rem, 7vw, 4.6rem);
  line-height:.95;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0 0 20px;
  text-shadow:3px 3px 0 var(--a5), 6px 6px 0 var(--a1);
}
.section__sub{
  font-size:1.15rem;
  color:rgba(255,255,255,.82);
  margin:0;
  max-width:62ch;
}

/* Kicker / label */
.kicker{
  display:inline-block;
  font-family:var(--font-head);
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:10px 22px;
  border-radius:var(--r-btn);
  border:4px dashed;
  margin:0 0 24px;
  transform:rotate(-1.5deg);
}
.kicker--cyan  { color:var(--a2); border-color:var(--a5); background:rgba(0,245,212,.10); }
.kicker--yellow{ color:var(--a3); border-color:var(--a1); background:rgba(255,230,0,.10); }
.kicker--orange{ color:var(--a4); border-color:var(--a2); background:rgba(255,107,53,.10); }
.kicker--purple{ color:var(--a5); border-color:var(--a3); background:rgba(123,47,255,.18); }

/* Texto com gradiente animado */
.grad-text{
  background:linear-gradient(90deg, var(--a1), var(--a2), var(--a3), var(--a1));
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:gradient-shift 4s ease infinite;
  text-shadow:none;
}

.hl{
  background:linear-gradient(180deg, transparent 62%, rgba(255,230,0,.45) 62%);
  font-weight:700;
}

/* Palavra gigante de fundo */
.mega-word{
  position:absolute;
  font-family:var(--font-disp);
  font-size:clamp(10rem, 26vw, 22rem);
  line-height:.8;
  color:var(--a5);
  opacity:.14;
  z-index:0;
  pointer-events:none;
  user-select:none;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.mega-word--right{ left:auto; right:-6%; transform:translateY(-50%); color:var(--a2); opacity:.10; }
.mega-word--left { left:-8%; transform:translateY(-50%); color:var(--a4); opacity:.12; }

/* Formas flutuantes */
.shape{
  position:absolute; z-index:5;
  font-size:clamp(3.2rem, 6vw, 5.6rem);
  pointer-events:none; user-select:none;
  filter:drop-shadow(0 0 18px rgba(255,58,242,.6));
}
/* fora da coluna de texto do hero — decoração não pode brigar com a headline */
.shape--1{ top:12%;  left:47%;  animation:float 6s ease-in-out infinite; }
.shape--2{ top:24%;  right:9%;  animation:float-reverse 5s ease-in-out infinite; }
/* ⚡ e 💫 saíram de cima da coluna de texto e foram parar junto da raposa */
.shape--3{ top:30%;  left:39%;  animation:wiggle 1.6s ease-in-out infinite; }
.shape--4{ top:62%;  right:14%; animation:bounce-subtle 2.4s ease-in-out infinite; font-size:5.2rem; }
.shape--5{ top:8%;   right:26%; animation:float 7s ease-in-out infinite; }
.shape--6{ bottom:14%;right:6%;  animation:float-reverse 6.5s ease-in-out infinite; }
.shape--7{ bottom:16%; left:63%; animation:wiggle 2s ease-in-out infinite; }
.shape--f1{ top:12%; right:8%;  animation:float 6s ease-in-out infinite; }
.shape--f2{ bottom:10%;left:5%;  animation:bounce-subtle 2.2s ease-in-out infinite; }
.shape--s1{ top:16%; right:12%; animation:wiggle 1.8s ease-in-out infinite; }
.shape--q1{ top:10%; right:8%;  animation:float-reverse 5.5s ease-in-out infinite; }
.shape--c1{ top:16%; left:8%;   animation:float 6s ease-in-out infinite; }
.shape--c2{ bottom:18%;right:10%;animation:wiggle 1.5s ease-in-out infinite; }
.shape--c3{ top:24%; right:16%; animation:bounce-subtle 2.6s ease-in-out infinite; }

/* Anéis decorativos girando */
.ring{
  position:absolute; z-index:1; border-radius:50%;
  pointer-events:none;
  animation:spin-slow 20s linear infinite;
}
.ring--1{ width:280px; height:280px; top:-60px; left:-80px; border:8px dashed var(--a2); opacity:.28; }
.ring--2{ width:200px; height:200px; bottom:-50px; right:-40px; border:8px dotted var(--a3); opacity:.30; }

/* ═══════════ BOTÕES ═══════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-head);
  font-weight:900; text-transform:uppercase; letter-spacing:.14em;
  text-decoration:none;
  border-radius:var(--r-btn);
  border:4px solid;
  cursor:pointer;
  transition:transform .3s ease-out, box-shadow .3s ease-out, background-position .3s ease-out, background-color .3s ease-out;
  will-change:transform;
}
.btn--sm{ height:48px; padding-inline:26px; font-size:.78rem; }
.btn--lg{ height:64px; padding-inline:40px; font-size:1rem; }
.btn--xl{ height:72px; padding-inline:52px; font-size:1.1rem; }

.btn--primary{
  background:linear-gradient(90deg, var(--a1), var(--a5), var(--a2));
  background-size:200% 100%;
  border-color:var(--a3);
  color:#fff;
  box-shadow:0 0 30px rgba(255,58,242,.55), 8px 8px 0 var(--a3), 16px 16px 0 var(--a5);
}
.btn--primary:hover{
  transform:scale(1.08) rotate(-1deg);
  background-position:100% 50%;
  box-shadow:0 0 50px rgba(255,58,242,.8), 10px 10px 0 var(--a3), 20px 20px 0 var(--a5);
}
.btn--primary:active{ transform:scale(.96); box-shadow:0 0 20px rgba(255,58,242,.5), 4px 4px 0 var(--a3); }

.btn--outline{
  background:rgba(45,27,78,.55);
  backdrop-filter:blur(6px);
  border-color:var(--a2);
  border-style:dashed;
  color:var(--fg);
  box-shadow:8px 8px 0 var(--a5), 16px 16px 0 var(--a1);
}
.btn--outline:hover{
  transform:translate(-4px,-4px) scale(1.04);
  background:var(--a2);
  color:var(--bg);
  border-style:solid;
  box-shadow:12px 12px 0 var(--a5), 24px 24px 0 var(--a1);
}
.btn--outline:active{ transform:translate(0,0) scale(.97); box-shadow:2px 2px 0 var(--a5); }

/* Foco acessível — anel duplo, em TODOS os interativos */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:4px dashed var(--a3);
  outline-offset:4px;
  box-shadow:0 0 0 8px rgba(0,245,212,.45);
  border-radius:8px;
}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:24px;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(13,13,26,.72);
  backdrop-filter:blur(14px);
  border-bottom:4px solid var(--a1);
  transition:border-color .3s ease, background .3s ease;
}
.nav.is-stuck{ border-bottom-color:var(--a2); background:rgba(13,13,26,.92); }

/* A logo horizontal já traz o letreiro — sem texto ao lado */
.nav__brand{
  display:flex; align-items:center;
  text-decoration:none;
  margin-right:auto;
}
.nav__brand img{
  height:60px; width:auto;
  filter:drop-shadow(0 0 12px rgba(255,107,53,.9));
}

.nav__links{ display:flex; gap:28px; }
.nav__links a{
  font-family:var(--font-head); font-weight:700;
  font-size:.9rem; text-transform:uppercase; letter-spacing:.1em;
  text-decoration:none; padding-bottom:4px;
  border-bottom:3px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav__links a:hover{ color:var(--a2); border-bottom-color:var(--a3); }

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:1.3fr .85fr .8fr;
  align-items:center;
  gap:36px;
  padding:150px clamp(20px,3vw,44px) 90px;
  overflow:hidden;
}
.hero__inner{ position:relative; z-index:10; }

.hero__title{
  font-family:var(--font-head);
  font-weight:900;
  font-size:clamp(3rem, 8vw, 6.2rem);
  line-height:.9;
  letter-spacing:-.045em;
  text-transform:uppercase;
  margin:0 0 28px;
  text-shadow:4px 4px 0 var(--a5), 8px 8px 0 var(--a1), 12px 12px 0 var(--a2);
}
.hero__title-sm{
  display:inline-block;
  font-size:clamp(1.5rem,3.4vw,2.6rem);
  letter-spacing:-.02em;
  color:var(--a3);
  text-shadow:3px 3px 0 var(--a5);
}

.hero__lead{
  font-size:1.2rem;
  color:rgba(255,255,255,.88);
  max-width:56ch;
  margin:0 0 36px;
}
.hero__lead strong{ color:var(--a2); }

.hero__cta{ display:flex; flex-wrap:wrap; gap:20px; margin-bottom:28px; }

.hero__note{
  font-size:.95rem;
  color:rgba(255,255,255,.62);
  margin:0;
  border-left:4px solid var(--a3);
  padding-left:16px;
}

/* Mascote — PNG original + glow (aura pulsante atrás e brilho quente na borda) */
.hero__mascot{
  position:relative; z-index:10;
  display:grid; place-items:center;
  animation:float 7s ease-in-out infinite;
  will-change:transform;
}
.hero__mascot::before{
  content:"";
  position:absolute; inset:6% 4%;
  border-radius:50%;
  background:
    radial-gradient(circle at 42% 45%, rgba(255,107,53,.42) 0%, transparent 62%),
    radial-gradient(circle at 68% 30%, rgba(255,58,242,.30) 0%, transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(0,245,212,.26) 0%, transparent 60%);
  filter:blur(28px);
  z-index:-1;
  animation:pulse-aura 3.4s ease-in-out infinite;
}
.hero__mascot img{
  width:100%; max-width:none;
  transform:translateX(-14%) scale(1.85);
  filter:drop-shadow(0 0 26px rgba(255,107,53,.55)) drop-shadow(0 18px 34px rgba(0,0,0,.55));
}

/* Três passos no hero — coluna vertical colada na raposa.
   Versão compacta dos cards da antiga seção "Da caixa pro sofá". */
.hero__steps{
  position:relative; z-index:10;
  list-style:none; margin:0; padding:0;
  display:grid; gap:18px;
}
.hstep{
  position:relative;
  display:flex; align-items:flex-start; gap:16px;
  border:4px solid; border-radius:var(--r-box);
  padding:20px 22px;
  background:rgba(13,13,26,.78);
  backdrop-filter:blur(4px);
  transition:transform .3s ease-out, box-shadow .3s ease-out;
}
.hstep__n{
  flex:none;
  font-family:var(--font-disp);
  font-size:2rem; line-height:1;
}
.hstep h2{
  font-family:var(--font-head); font-weight:900;
  font-size:1.05rem; line-height:1.1;
  text-transform:uppercase; letter-spacing:-.01em;
  margin:0 0 6px;
  text-shadow:2px 2px 0 var(--a5);
}
.hstep p{ margin:0; font-size:.92rem; color:rgba(255,255,255,.82); }

.hstep--1{ border-color:var(--a2); box-shadow:8px 8px 0 var(--a1); }
.hstep--1 .hstep__n{ color:var(--a2); }
.hstep--2{ border-color:var(--a3); border-style:dashed; box-shadow:8px 8px 0 var(--a5);
           transform:translateX(16px); }
.hstep--2 .hstep__n{ color:var(--a3); }
.hstep--3{ border-color:var(--a4); box-shadow:8px 8px 0 var(--a2); }
.hstep--3 .hstep__n{ color:var(--a4); }

.hstep--1:hover,.hstep--3:hover{ transform:translateX(-4px) scale(1.03); box-shadow:12px 12px 0 var(--a3); }
.hstep--2:hover{ transform:translateX(12px) scale(1.03); box-shadow:12px 12px 0 var(--a3); }

/* ═══════════ STATS ═══════════ */
.stats{
  position:relative; z-index:10;
  padding-block:56px;
  border-block:8px solid var(--a1);
  background:rgba(45,27,78,.55);
  backdrop-filter:blur(4px);
}
.stats__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
.stat{
  border:4px solid; border-radius:var(--r-box);
  padding:22px 18px; text-align:center;
  background:rgba(13,13,26,.55);
  transition:transform .3s ease-out, box-shadow .3s ease-out;
}
.stat b{
  display:block;
  font-family:var(--font-head); font-weight:900;
  font-size:clamp(2rem,4vw,3rem); line-height:1;
  margin-bottom:6px;
}
.stat span{ font-size:.85rem; color:rgba(255,255,255,.75); }
.stat--1{ border-color:var(--a1); box-shadow:6px 6px 0 var(--a5); }
.stat--1 b{ color:var(--a1); }
.stat--2{ border-color:var(--a2); border-style:dashed; transform:translateY(14px); box-shadow:6px 6px 0 var(--a4); }
.stat--2 b{ color:var(--a2); }
.stat--3{ border-color:var(--a3); box-shadow:6px 6px 0 var(--a1); }
.stat--3 b{ color:var(--a3); }
.stat--4{ border-color:var(--a4); border-style:dashed; transform:translateY(14px); box-shadow:6px 6px 0 var(--a2); }
.stat--4 b{ color:var(--a4); }
.stat--5{ border-color:var(--a5); box-shadow:6px 6px 0 var(--a3); }
.stat--5 b{ color:var(--a5); }
.stat:hover{ transform:translateY(0) scale(1.06) rotate(-1.5deg); box-shadow:10px 10px 0 var(--a3), 20px 20px 0 var(--a1); }

/* ═══════════ CARDS DE FEATURE ═══════════ */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.card{
  position:relative;
  border:4px solid;
  border-radius:var(--r-card);
  padding:36px 32px;
  background:rgba(45,27,78,.80);
  backdrop-filter:blur(6px);
  transition:transform .3s ease-out, box-shadow .3s ease-out;
  will-change:transform;
}
.card h3{
  font-family:var(--font-head); font-weight:900;
  font-size:1.35rem; line-height:1.1;
  text-transform:uppercase; letter-spacing:-.01em;
  margin:0 0 14px;
  text-shadow:2px 2px 0 var(--a5);
}
.card p{ margin:0 0 20px; color:rgba(255,255,255,.84); font-size:1rem; }
.card__icon{
  font-size:3rem; line-height:1;
  margin-bottom:18px;
  display:inline-grid; place-items:center;
  width:84px; height:84px;
  border-radius:50%; border:4px dashed;
  animation:bounce-subtle 3s ease-in-out infinite;
}
.card__tag{
  display:inline-block;
  font-family:var(--font-head); font-weight:800;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  padding:7px 16px; border-radius:var(--r-btn); border:3px solid;
}

.card--1{ border-color:var(--a1); box-shadow:10px 10px 0 var(--a3), 20px 20px 0 var(--a5); }
.card--1 .card__icon{ border-color:var(--a3); background:rgba(255,58,242,.18); }
.card--1 .card__tag{ color:var(--a1); border-color:var(--a3); }

.card--2{ border-color:var(--a2); border-style:dashed; transform:translateY(28px);
          box-shadow:10px 10px 0 var(--a4), 20px 20px 0 var(--a1); }
.card--2 .card__icon{ border-color:var(--a4); background:rgba(0,245,212,.16); }
.card--2 .card__tag{ color:var(--a2); border-color:var(--a4); }

.card--3{ border-color:var(--a3); box-shadow:10px 10px 0 var(--a1), 20px 20px 0 var(--a2); }
.card--3 .card__icon{ border-color:var(--a1); background:rgba(255,230,0,.14); }
.card--3 .card__tag{ color:var(--a3); border-color:var(--a1); }

.card--4{ border-color:var(--a4); border-style:dashed; transform:translateY(28px);
          box-shadow:10px 10px 0 var(--a2), 20px 20px 0 var(--a3); }
.card--4 .card__icon{ border-color:var(--a2); background:rgba(255,107,53,.18); }
.card--4 .card__tag{ color:var(--a4); border-color:var(--a2); }

.card--5{ border-color:var(--a5); box-shadow:10px 10px 0 var(--a3), 20px 20px 0 var(--a2); }
.card--5 .card__icon{ border-color:var(--a3); background:rgba(123,47,255,.28); }
.card--5 .card__tag{ color:var(--a5); border-color:var(--a3); }

.card--6{ border-color:var(--a1); border-style:dashed; transform:translateY(28px);
          box-shadow:10px 10px 0 var(--a2), 20px 20px 0 var(--a4); }
.card--6 .card__icon{ border-color:var(--a2); background:rgba(255,58,242,.18); }
.card--6 .card__tag{ color:var(--a1); border-color:var(--a2); }

.card:hover{ transform:translateY(0) scale(1.03) rotate(1.5deg);
  box-shadow:14px 14px 0 var(--a3), 28px 28px 0 var(--a1), 0 0 50px rgba(0,245,212,.35); }
.card--2:hover, .card--4:hover, .card--6:hover{ transform:translateY(22px) scale(1.03) rotate(-1.5deg); }

.code{
  font-family:var(--font-disp);
  color:var(--a3);
  letter-spacing:.08em;
}

.callout{
  border:8px double var(--a2);
  border-radius:var(--r-card);
  background:rgba(0,245,212,.08);
  padding:32px 36px;
  transform:rotate(-.6deg);
  box-shadow:10px 10px 0 var(--a5);
}
.callout p{ margin:0; font-size:1.05rem; }
.callout b{ color:var(--a2); font-family:var(--font-head); font-size:1.15rem; }

/* ═══════════ PLACAR ═══════════ */
.score__layout{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:56px; align-items:center;
}
.score__sub{ margin-bottom:28px; }
.score__sub strong{ color:var(--a4); }

.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.ticks li{
  position:relative; padding-left:44px;
  font-weight:500; font-size:1.05rem;
}
.ticks li::before{
  content:"✓";
  position:absolute; left:0; top:-2px;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:900; color:var(--bg);
  background:var(--a2); border:3px solid var(--a4);
}

.score-card{
  border:8px solid var(--a4);
  border-radius:var(--r-card);
  background:rgba(45,27,78,.9);
  padding:28px;
  transform:rotate(-2deg);
  box-shadow:0 0 40px rgba(255,107,53,.4), 14px 14px 0 var(--a2), 28px 28px 0 var(--a1);
  animation:float-reverse 6s ease-in-out infinite;
}
.score-card__head{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-head); font-weight:800;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:16px; margin-bottom:16px;
  border-bottom:4px dashed var(--a3);
  color:rgba(255,255,255,.75);
}
.live{ color:var(--a1); animation:pulse-text 1.6s ease-in-out infinite; }
.score-card__row{
  display:flex; align-items:center; gap:18px;
  padding:14px 0;
}
.score-card__row b{
  margin-left:auto;
  font-family:var(--font-head); font-weight:900; font-size:2.6rem; line-height:1;
  color:var(--a3);
  text-shadow:3px 3px 0 var(--a5);
}
.badge{
  font-family:var(--font-head); font-weight:900;
  font-size:1rem; letter-spacing:.06em;
  padding:10px 18px; border-radius:12px; border:4px solid;
}
.badge--a{ background:rgba(255,58,242,.2); border-color:var(--a1); color:var(--a1); }
.badge--b{ background:rgba(0,245,212,.16); border-color:var(--a2); color:var(--a2); }
.score-card__foot{
  margin-top:16px; padding-top:16px;
  border-top:4px dashed var(--a5);
  font-size:.85rem; color:rgba(255,255,255,.7);
}

/* ═══════════ APARELHOS ═══════════ */
.devices{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.device{
  border:4px solid; border-radius:var(--r-box);
  padding:28px 24px;
  background:rgba(45,27,78,.7);
  transition:transform .3s ease-out, box-shadow .3s ease-out;
}
.device b{
  display:block;
  font-family:var(--font-head); font-weight:900;
  font-size:1.2rem; text-transform:uppercase; margin-bottom:6px;
}
.device span{ font-size:.9rem; color:rgba(255,255,255,.72); }
.device--1{ border-color:var(--a1); box-shadow:8px 8px 0 var(--a3); }
.device--1 b{ color:var(--a1); }
.device--2{ border-color:var(--a2); border-style:dashed; box-shadow:8px 8px 0 var(--a4); transform:translateY(18px); }
.device--2 b{ color:var(--a2); }
.device--3{ border-color:var(--a3); box-shadow:8px 8px 0 var(--a1); }
.device--3 b{ color:var(--a3); }
.device--4{ border-color:var(--a4); border-style:dashed; box-shadow:8px 8px 0 var(--a5); transform:translateY(18px); }
.device--4 b{ color:var(--a4); }
.device--5{ border-color:var(--a5); box-shadow:8px 8px 0 var(--a2); }
.device--5 b{ color:var(--a5); }
.device--6{ border-color:var(--a2); border-style:dashed; box-shadow:8px 8px 0 var(--a1); transform:translateY(18px); }
.device--6 b{ color:var(--a2); }
.device:hover{ transform:translateY(0) scale(1.05) rotate(-1deg); box-shadow:12px 12px 0 var(--a3), 24px 24px 0 var(--a1); }

.devices__note{
  margin-top:56px; font-size:.95rem; color:rgba(255,255,255,.6);
  border-left:4px dashed var(--a4); padding-left:16px;
}

/* ═══════════ FAQ ═══════════ */
.faq{ display:grid; gap:20px; }
.faq__item{
  border:4px solid; border-radius:var(--r-box);
  background:rgba(45,27,78,.72);
  padding:22px 26px;
  transition:box-shadow .3s ease-out, transform .3s ease-out;
}
.faq__item summary{
  cursor:pointer; list-style:none;
  font-family:var(--font-head); font-weight:800;
  font-size:1.1rem; text-transform:uppercase; letter-spacing:-.01em;
  display:flex; align-items:center; gap:14px;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::before{
  content:"+";
  flex:none;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font-size:1.4rem; font-weight:900; line-height:1;
  border:3px solid; color:var(--bg);
  transition:transform .3s ease-out;
}
.faq__item[open] summary::before{ content:"−"; transform:rotate(180deg); }
.faq__item p{ margin:16px 0 0; color:rgba(255,255,255,.85); font-size:1rem; }
.faq__item b{ color:var(--a3); }

.faq__item--1{ border-color:var(--a1); box-shadow:8px 8px 0 var(--a5); }
.faq__item--1 summary::before{ background:var(--a1); border-color:var(--a3); }
.faq__item--2{ border-color:var(--a2); border-style:dashed; box-shadow:8px 8px 0 var(--a4); }
.faq__item--2 summary::before{ background:var(--a2); border-color:var(--a4); }
.faq__item--3{ border-color:var(--a3); box-shadow:8px 8px 0 var(--a1); }
.faq__item--3 summary::before{ background:var(--a3); border-color:var(--a1); }
.faq__item--4{ border-color:var(--a4); border-style:dashed; box-shadow:8px 8px 0 var(--a2); }
.faq__item--4 summary::before{ background:var(--a4); border-color:var(--a2); }
.faq__item--5{ border-color:var(--a5); box-shadow:8px 8px 0 var(--a3); }
.faq__item--5 summary::before{ background:var(--a5); border-color:var(--a3); color:var(--fg); }
.faq__item--6{ border-color:var(--a1); border-style:dashed; box-shadow:8px 8px 0 var(--a2); }
.faq__item--6 summary::before{ background:var(--a1); border-color:var(--a2); }

.faq__item:hover{ transform:translate(-3px,-3px); box-shadow:12px 12px 0 var(--a3); }

/* ═══════════ CTA FINAL ═══════════ */
.section--cta{ padding-block:140px; }
.cta{ text-align:center; }
.cta__title{
  font-family:var(--font-head); font-weight:900;
  font-size:clamp(2.6rem,7vw,5rem); line-height:.92;
  text-transform:uppercase; letter-spacing:-.04em;
  margin:0 0 20px;
  text-shadow:4px 4px 0 var(--a5), 8px 8px 0 var(--a1), 12px 12px 0 var(--a2);
}
.cta__sub{ font-size:1.15rem; color:rgba(255,255,255,.85); margin:0 0 48px; }

/* Duas plataformas lado a lado — TV e PC */
.dl-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  text-align:center;
}
.dl{
  display:flex; flex-direction:column; align-items:center;
  border:8px solid;
  border-radius:var(--r-card);
  background:rgba(45,27,78,.85);
  backdrop-filter:blur(6px);
  padding:36px 28px;
}
.dl--tv{
  border-color:var(--a3);
  transform:rotate(-1deg);
  box-shadow:0 0 50px rgba(255,230,0,.35), 14px 14px 0 var(--a1), 28px 28px 0 var(--a5);
}
.dl--pc{
  border-color:var(--a2); border-style:dashed;
  transform:rotate(1deg);
  box-shadow:0 0 50px rgba(0,245,212,.25), 14px 14px 0 var(--a5), 28px 28px 0 var(--a4);
}

.dl__platform{
  font-family:var(--font-head); font-weight:900;
  font-size:.95rem; letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 20px; padding-bottom:14px;
  border-bottom:4px dashed var(--a5);
  width:100%;
}
.dl--tv .dl__platform{ color:var(--a3); }
.dl--pc .dl__platform{ color:var(--a2); }

.dl__label{
  font-family:var(--font-head); font-weight:800;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin:0 0 12px;
}
.dl__code{
  font-family:var(--font-disp);
  font-size:clamp(2.4rem,6vw,4rem); line-height:1;
  color:var(--a3);
  letter-spacing:.06em;
  margin-bottom:28px;
  text-shadow:4px 4px 0 var(--a1), 8px 8px 0 var(--a5);
  animation:pulse-text 2.4s ease-in-out infinite;
}
.dl__code--pc{
  color:var(--a2);
  text-shadow:4px 4px 0 var(--a5), 8px 8px 0 var(--a4);
}
.dl__version{
  margin:18px 0 0;
  font-family:var(--font-head); font-weight:800;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--a2);
}
.dl--pc .dl__version{ color:rgba(255,255,255,.45); }
.dl__hint{ margin:10px 0 0; font-size:.9rem; color:rgba(255,255,255,.6); }
.dl__hint b{ color:var(--a2); }

/* Botão sem destino: não finge que dá pra clicar */
.btn.is-disabled{
  opacity:.5; cursor:not-allowed;
  filter:grayscale(.4);
  box-shadow:none;
  pointer-events:none;
}

@media (max-width:820px){
  .dl-grid{ grid-template-columns:1fr; gap:44px; }
  .dl--tv,.dl--pc{ transform:none; }
}
.cta__hint b{ color:var(--a2); }

/* ═══════════ FOOTER ═══════════ */
.footer{
  position:relative; z-index:10;
  border-top:8px solid var(--a1);
  background:rgba(13,13,26,.92);
  padding-block:56px;
}
/* Duas colunas: marca à esquerda, aviso à direita.
   O texto legal ficava pendurado numa borda tracejada solta — virou box. */
.footer__inner{
  display:grid;
  grid-template-columns:minmax(240px,.9fr) 1.6fr;
  gap:56px 64px;
  align-items:start;
}
.footer__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.footer__brand img{ height:64px; width:auto; }
.footer__tagline{
  margin:0;
  font-family:var(--font-head); font-weight:800;
  font-size:1.05rem; line-height:1.25;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--a4);
  text-shadow:2px 2px 0 var(--a5);
  max-width:22ch;
}

.footer__legal{
  border:4px dashed var(--a5);
  border-radius:var(--r-box);
  background:rgba(123,47,255,.10);
  padding:24px 28px;
}
.footer__legal p{ margin:0; font-size:.9rem; color:rgba(255,255,255,.68); }
.footer__legal-label{
  font-family:var(--font-head); font-weight:800;
  font-size:.7rem !important; letter-spacing:.24em; text-transform:uppercase;
  color:var(--a5) !important;
  margin-bottom:10px !important;
}

/* Barra inferior atravessa as duas colunas */
.footer__bar{
  grid-column:1 / -1;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  flex-wrap:wrap;
  border-top:4px solid var(--a1);
  padding-top:22px;
}
.footer__copy,.footer__made{
  margin:0; font-size:.85rem; color:rgba(255,255,255,.45);
}
.footer__made{
  font-family:var(--font-head); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--a2);
}

@media (max-width:780px){
  .footer__inner{ grid-template-columns:1fr; gap:36px; }
}

/* ═══════════ ANIMAÇÕES ═══════════ */
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-20px) rotate(5deg); }
}
@keyframes float-reverse{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%    { transform:translateY(20px) rotate(-6deg); }
}
@keyframes wiggle{
  0%,100%{ transform:rotate(-4deg); }
  50%    { transform:rotate(4deg); }
}
@keyframes bounce-subtle{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-10px); }
}
@keyframes spin-slow{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}
@keyframes gradient-shift{
  0%  { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@keyframes pulse-aura{
  0%,100%{ opacity:.7;  transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.07); }
}
@keyframes pulse-text{
  0%,100%{ opacity:1; }
  50%    { opacity:.55; }
}

/* Reveal ao rolar
   Só opacidade — mexer em transform aqui apagaria os offsets
   assimétricos (.card--2, .stat--4, .device--6...) que são
   assinatura do estilo. */
.reveal{ opacity:0; transition:opacity .6s ease-out; }
.reveal.is-in{ opacity:1; }

/* ═══════════ RESPONSIVO ═══════════
   Regra: NÃO simplificar pra minimalismo no mobile.
   O caos continua — só empilha.                       */

@media (max-width:1080px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .devices{ grid-template-columns:repeat(2,1fr); }
  .stats__grid{ grid-template-columns:repeat(3,1fr); }
  .nav__links{ display:none; }
}

/* Antes de empilhar tudo: raposa e texto lado a lado, passos na linha de baixo */
@media (max-width:1180px) and (min-width:901px){
  .hero{ grid-template-columns:1fr 1fr; }
  .hero__steps{ grid-column:1 / -1; grid-template-columns:repeat(3,1fr); gap:20px; }
  .hstep--2{ transform:none; }
}

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; padding-top:130px; }
  .hero__mascot img{ transform:scale(1.1); }
  .hero__steps{ gap:16px; }
  .hstep--2{ transform:none; }
  .score__layout{ grid-template-columns:1fr; }
}

@media (max-width:680px){
  body{ font-size:17px; }
  .section{ padding-block:84px; }
  .cards{ grid-template-columns:1fr; gap:44px; }
  .card--2,.card--4,.card--6{ transform:none; }
  .card--2:hover,.card--4:hover,.card--6:hover{ transform:scale(1.02) rotate(-1deg); }
  .devices{ grid-template-columns:1fr; gap:36px; }
  .device--2,.device--4,.device--6{ transform:none; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .stat--2,.stat--4{ transform:none; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .btn--lg,.btn--xl{ padding-inline:24px; font-size:.9rem; }
  /* Reduz densidade de formas, sem zerar.
     No empilhado, 1/2/5/7 caem em cima da headline e do lead. */
  .shape--1,.shape--2,.shape--5,.shape--7,.shape--c3{ display:none; }
  .shape--3{ bottom:auto; top:78%; left:4%; }
  .callout{ transform:none; }
  .cta__box{ transform:none; }
}

/* ═══════════ MOVIMENTO REDUZIDO ═══════════ */
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.15s !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}