/* Fontes auto-hospedadas (sem depender do Google) */
@font-face {
  font-family:"Inter"; font-style:normal; font-weight:400 500; font-display:swap;
  src:url("fonts/inter.woff2") format("woff2");
}
@font-face {
  font-family:"Space Grotesk"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/spacegrotesk-600.woff2") format("woff2");
}
:root {
  --black:#0a0a0a; --ink:#f5f4f2; --orange:#f15f22; --orange-light:#f77f4d;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  background:var(--black); color:var(--ink);
  font-family:"Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:3rem 1.5rem; position:relative; overflow:hidden;
}
/* brilho central */
.glow {
  position:fixed; left:50%; top:42%; width:70vmin; height:70vmin;
  transform:translate(-50%,-50%); background:rgba(241,95,34,.10);
  filter:blur(120px); border-radius:50%; pointer-events:none; z-index:0;
}
/* engrenagens ao fundo */
.gears { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; color:rgba(255,255,255,.045); }
.gears svg { position:absolute; }
.g-a { right:-8rem; top:-6rem; width:34rem; height:34rem; animation:spin 26s linear infinite; }
.g-b { left:-9rem; bottom:-7rem; width:30rem; height:30rem; color:rgba(241,95,34,.05); animation:spin-r 30s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes spin-r { to { transform:rotate(-360deg); } }

main {
  position:relative; z-index:1; max-width:640px; width:100%;
  display:flex; flex-direction:column; align-items:center;
}
.logo { width:min(80vw,420px); height:auto; user-select:none; }
.eyebrow {
  margin-top:2.4rem; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--orange); font-weight:500;
}
h1 {
  margin-top:1.1rem; font-family:"Space Grotesk",sans-serif; font-weight:600;
  font-size:clamp(1.8rem,5vw,3rem); line-height:1.05; letter-spacing:-.02em;
}
p.lead { margin-top:1.3rem; max-width:34rem; font-size:1.05rem; line-height:1.6; color:rgba(245,244,242,.62); }
.actions { margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
a.btn {
  display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.6rem;
  font-size:.95rem; font-weight:500; text-decoration:none; transition:all .25s ease;
}
a.primary { background:var(--orange); color:#fff; }
a.primary:hover { background:var(--orange-light); transform:translateY(-2px); }
a.ghost { border:1px solid rgba(255,255,255,.22); color:var(--ink); }
a.ghost:hover { border-color:var(--orange); color:var(--orange-light); }
a.btn svg { width:1.15rem; height:1.15rem; }
.meta { margin-top:2.6rem; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,244,242,.4); }

/* alternância de idioma — dentro do hero, em baixo */
.lang { margin-top:2rem; display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; letter-spacing:.15em; }
.lang button {
  background:none; border:none; color:rgba(245,244,242,.4); cursor:pointer;
  font:inherit; padding:.25rem .4rem; letter-spacing:.15em; transition:color .2s ease;
}
.lang button:hover { color:rgba(245,244,242,.75); }
.lang button.active { color:var(--orange); }
.lang span { color:rgba(245,244,242,.25); }

footer {
  position:fixed; bottom:1.6rem; left:0; right:0; text-align:center;
  font-size:.72rem; letter-spacing:.1em; color:rgba(245,244,242,.28); z-index:1;
}

/* i18n — mostra só o idioma ativo */
[data-lang] { display:none; }
body[data-active="pt"] [data-lang="pt"], body[data-active="en"] [data-lang="en"] { display:block; }
a.btn [data-lang] { display:none; }
body[data-active="pt"] a.btn [data-lang="pt"], body[data-active="en"] a.btn [data-lang="en"] { display:inline; }

@media (prefers-reduced-motion: reduce) {
  .g-a, .g-b { animation:none; }
}