/* ============================================================================
   Basalra - site institucional. Design system (tokens do brief §4) consumido por
   todo o site. Pixel como SISTEMA: fonte bitmap nos títulos, UI de cantos duros e
   glow ciano->violeta; corpo em fonte legível (acessibilidade). docs/21 §design.
   ============================================================================ */

/* ---------- Fontes self-host (LGPD-friendly; baixadas por scripts/site-assets.sh) ----------
   Se os .woff2 não existirem, os títulos caem no fallback do sistema (degrada bem). */
@font-face {
  font-family: "Pixelify Sans";
  src: url("/static/fonts/pixelify-sans.woff2") format("woff2");
  font-weight: 400 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 700; font-display: swap; font-style: normal;
}

:root {
  /* Bases (basalto / pedra vulcânica) */
  --bg-900:#0A0A0F; --bg-800:#0F0F17; --bg-700:#161620; --bg-600:#1E1E2A; --stone:#3A3A46;
  /* Acentos (glow) */
  --cyan:#22D3EE; --cyan-soft:#67E8F9; --violet:#8B5CF6; --violet-soft:#A78BFA;
  --glow-grad:linear-gradient(135deg, var(--cyan), var(--violet));
  /* Texto */
  --text:#ECECF1; --text-muted:#A1A1B0; --text-faint:#6B6B7B;
  /* Estado */
  --success:#34D399; --danger:#F87171; --warning:#FBBF24;
  /* Glow utilitário */
  --glow-cyan:0 0 24px rgba(34,211,238,.45); --glow-violet:0 0 24px rgba(139,92,246,.45);
  /* Tipografia */
  --font-display:var(--font-body);
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Layout */
  --maxw:1120px; --gutter:clamp(16px, 4vw, 40px); --radius:4px;
  --header-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:0}
body{
  margin:0; background:var(--bg-900); color:var(--text); font-family:var(--font-body);
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
.px{image-rendering:pixelated}
a{color:var(--cyan-soft); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-display); font-weight:700; line-height:1.1; letter-spacing:.5px; margin:0}

.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.muted{color:var(--text-muted)}

/* Acessibilidade: skip link + foco visível */
.skip-link{position:absolute; left:-999px; top:8px; z-index:200; background:var(--bg-700);
  color:var(--text); padding:10px 16px; border:2px solid var(--cyan)}
.skip-link:focus{left:8px}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px}

/* ---------------- Botões (pixel: cantos duros, borda, glow) ---------------- */
.btn{
  --b:var(--cyan);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; letter-spacing:.6px;
  padding:12px 22px; border:2px solid var(--b); border-radius:var(--radius);
  background:transparent; color:var(--text); cursor:pointer; text-align:center;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease; text-decoration:none;
}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn-primary{border-color:transparent; color:#06121a; background:var(--glow-grad); box-shadow:0 0 0 1px rgba(103,232,249,.25)}
.btn-primary:hover{box-shadow:var(--glow-cyan)}
.btn-ghost{background:rgba(34,211,238,.04); color:var(--text)}
.btn-ghost:hover{box-shadow:var(--glow-cyan); background:rgba(34,211,238,.10)}
.btn-disabled{border-color:var(--stone); color:var(--text-faint); cursor:not-allowed; background:rgba(255,255,255,.02)}
.btn-disabled:hover{transform:none; box-shadow:none}
.btn-sm{padding:8px 14px; font-size:.85rem}
.btn-lg{padding:15px 30px; font-size:1.05rem}

.kicker{font-family:var(--font-display); text-transform:uppercase; letter-spacing:3px; font-size:.8rem;
  color:var(--cyan); margin:0 0 10px}
.section-title{font-size:clamp(1.6rem, 4vw, 2.6rem); margin:0 0 8px;
  text-shadow:0 0 30px rgba(34,211,238,.15)}
.section{padding:clamp(64px, 9vw, 120px) 0; position:relative}
.section-head{max-width:680px; margin:0 auto clamp(32px,5vw,56px); text-align:center}
.section-sub{color:var(--text-muted); font-size:1.05rem; margin:6px 0 0}

/* ---------------- Header / nav ---------------- */
.site-header{position:sticky; top:0; z-index:100; height:var(--header-h);
  background:rgba(10,10,15,.6); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(58,58,70,.5); transition:background .2s, border-color .2s}
.site-header.scrolled{background:rgba(10,10,15,.92); border-bottom-color:var(--stone)}
.header-inner{height:var(--header-h); display:flex; align-items:center; gap:18px; justify-content:space-between}
.wordmark{display:flex; align-items:center; gap:10px; color:var(--text)}
.wordmark:hover{text-decoration:none}
.wordmark-mark{width:30px; height:30px; display:block; filter:drop-shadow(0 0 8px rgba(34,211,238,.5))}
.wordmark-mark .emblem{width:30px; height:30px}
.wordmark-text{font-family:var(--font-display); font-weight:700; font-size:1.35rem; letter-spacing:2px; text-transform:uppercase}
.primary-nav{display:flex; gap:22px; margin-left:auto}
.primary-nav a{font-family:var(--font-display); font-size:.95rem; letter-spacing:.5px; color:var(--text-muted)}
.primary-nav a:hover{color:var(--text); text-decoration:none}
.header-actions{display:flex; align-items:center; gap:12px}
.lang-switch{display:flex; border:1px solid var(--stone); border-radius:var(--radius); overflow:hidden}
.lang-opt{font-family:var(--font-display); font-size:.78rem; padding:5px 9px; color:var(--text-faint)}
.lang-opt:hover{color:var(--text); text-decoration:none; background:rgba(255,255,255,.04)}
.lang-opt.is-current{color:#06121a; background:var(--glow-grad)}
.menu-toggle{display:none; flex-direction:column; gap:4px; width:40px; height:36px; padding:8px;
  background:transparent; border:1px solid var(--stone); border-radius:var(--radius); cursor:pointer}
.menu-toggle span{height:2px; background:var(--text); display:block; transition:.2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-nav{display:none; flex-direction:column; gap:4px; padding:14px var(--gutter) 20px;
  background:rgba(10,10,15,.98); border-bottom:1px solid var(--stone)}
.mobile-nav a{padding:12px 8px; font-family:var(--font-display); color:var(--text); border-bottom:1px solid rgba(58,58,70,.4)}
.mobile-nav .btn{margin-top:10px}

/* ---------------- Hero ---------------- */
.hero{position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; overflow:hidden; isolation:isolate;
  scroll-snap-align:start}
.hero-bg{position:absolute; inset:0; z-index:-2;
  background:radial-gradient(120% 90% at 50% 10%, #161620 0%, #0F0F17 45%, #0A0A0F 100%)}
.hero-layer{position:absolute; inset:-10% 0 0 0; will-change:transform}
.hero-stars{background-image:radial-gradient(1px 1px at 20% 30%, rgba(103,232,249,.6), transparent),
  radial-gradient(1px 1px at 70% 20%, rgba(167,139,250,.5), transparent),
  radial-gradient(1px 1px at 45% 65%, rgba(255,255,255,.4), transparent),
  radial-gradient(1px 1px at 85% 50%, rgba(103,232,249,.4), transparent),
  radial-gradient(1px 1px at 30% 80%, rgba(167,139,250,.4), transparent);
  background-size:auto; opacity:.7}
.hero-ridge{top:auto; bottom:0; height:42%;
  background:linear-gradient(180deg, transparent, rgba(10,10,15,.2) 30%, var(--bg-900) 92%);
  clip-path:polygon(0 60%, 9% 48%, 18% 58%, 27% 40%, 36% 54%, 47% 36%, 58% 52%, 68% 38%, 78% 55%, 88% 42%, 100% 56%, 100% 100%, 0 100%);
  border-top:0; box-shadow:inset 0 2px 0 rgba(34,211,238,.12)}
.hero-glow{position:absolute; left:50%; top:34%; width:min(680px,90vw); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(34,211,238,.22), rgba(139,92,246,.14) 40%, transparent 68%);
  z-index:-1; filter:blur(8px)}
.hero-inner{position:relative; padding-block:60px}
.hero-badge{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display);
  font-size:.8rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--cyan-soft);
  border:1px solid rgba(34,211,238,.35); border-radius:999px; padding:6px 14px; margin:0 0 26px;
  background:rgba(34,211,238,.06)}
.hero-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:var(--glow-cyan)}
.hero-lockup{display:flex; flex-direction:column; align-items:center; gap:6px}
.hero-emblem{width:clamp(86px,12vw,128px); height:auto; filter:drop-shadow(0 0 24px rgba(34,211,238,.5)); will-change:transform}
.hero-title{font-size:clamp(3rem, 11vw, 7rem); letter-spacing:clamp(4px,1.4vw,14px); text-transform:uppercase;
  margin:8px 0 0; background:linear-gradient(180deg, #fff, var(--cyan-soft) 60%, var(--violet-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 50px rgba(34,211,238,.25)}
.hero-tagline{font-family:var(--font-display); font-size:clamp(1.05rem,2.6vw,1.5rem); color:var(--text); margin:18px auto 4px; max-width:24ch}
.hero-subtitle{color:var(--text-muted); font-size:clamp(.98rem,1.6vw,1.12rem); max-width:52ch; margin:10px auto 0}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:32px 0 16px}
.hero-players{display:flex; gap:8px; align-items:center; justify-content:center;
  color:var(--text-faint); font-size:.9rem}
.players-dot{width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 8px rgba(52,211,153,.6)}
.players-count{font-family:var(--font-mono); color:var(--text); font-weight:600}
.players-label{color:var(--text-faint)}
.hero-players[hidden]{display:none}
.hero-platforms{display:flex; gap:10px; align-items:center; justify-content:center; color:var(--text-faint); font-size:.85rem}
.plat-label{font-family:var(--font-display); letter-spacing:1px}
.plat-badge{font-family:var(--font-mono); font-size:.8rem; padding:4px 10px; border:1px solid var(--stone);
  border-radius:var(--radius); color:var(--text-muted)}
.hero-scroll{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; gap:2px; font-family:var(--font-display); font-size:.72rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--text-faint)}
.hero-scroll:hover{color:var(--cyan); text-decoration:none}
.hero-scroll .chevron{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------------- Sobre ---------------- */
.section-about{background:var(--bg-800)}
.about-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(32px,6vw,72px); align-items:center}
.about-copy p{color:var(--text-muted); margin:0 0 16px; max-width:60ch}
.about-art{display:flex; justify-content:center}
.art-frame{position:relative; width:min(320px,80%); aspect-ratio:4/5; border:1px solid var(--stone);
  border-radius:var(--radius); background:linear-gradient(160deg, var(--bg-700), var(--bg-900));
  display:grid; place-items:center; overflow:hidden; box-shadow:inset 0 0 60px rgba(0,0,0,.6)}
.art-grid{position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(rgba(34,211,238,.06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(34,211,238,.06) 1px, transparent 1px); background-size:28px 28px;
  mask-image:radial-gradient(circle at 50% 45%, #000 30%, transparent 75%)}
.art-crystal{position:relative; z-index:1; width:46%; filter:drop-shadow(0 0 30px rgba(139,92,246,.55)); animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------------- Recursos ---------------- */
.feature-grid{list-style:none; padding:0; margin:0; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}
.feature-card{background:var(--bg-700); border:1px solid var(--stone); border-radius:var(--radius);
  padding:26px 24px; position:relative; transition:transform .15s, box-shadow .2s, border-color .2s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.feature-card:hover{transform:translateY(-4px); border-color:rgba(34,211,238,.5); box-shadow:var(--glow-cyan)}
.feature-card h3{font-size:1.15rem; margin:0 0 8px; color:var(--text)}
.feature-card p{margin:0; color:var(--text-muted); font-size:.98rem}
.feature-glyph{display:block; width:26px; height:26px; margin-bottom:16px; background:var(--glow-grad);
  clip-path:polygon(50% 0, 100% 28%, 82% 100%, 18% 100%, 0 28%); box-shadow:var(--glow-violet)}

/* ---------------- Galeria ---------------- */
.section-gallery{background:var(--bg-800)}
.gallery-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(240px,1fr))}
.shot{margin:0; border:1px solid var(--stone); border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10}
.shot-inner{width:100%; height:100%; display:grid; place-items:center;
  background:repeating-linear-gradient(45deg, var(--bg-700), var(--bg-700) 12px, var(--bg-600) 12px, var(--bg-600) 24px)}
.shot-inner span{font-family:var(--font-display); letter-spacing:2px; text-transform:uppercase;
  color:var(--text-faint); font-size:.85rem; border:1px solid var(--stone); padding:6px 12px; background:rgba(10,10,15,.6)}

/* ---------------- Comunidade ---------------- */
.section-community{background:radial-gradient(120% 100% at 50% 0, rgba(139,92,246,.10), transparent 60%), var(--bg-900)}
.community-inner{text-align:center; max-width:680px; margin-inline:auto}
.community-copy{color:var(--text-muted); font-size:1.08rem; margin:14px auto 28px}
.community-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ---------------- Feedback ---------------- */
.section-feedback{background:var(--bg-800)}
.feedback-inner{max-width:860px; margin-inline:auto}
.feedback-card{background:var(--bg-700); border:1px solid var(--stone); border-radius:var(--radius);
  padding:clamp(22px,4vw,40px); box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.q-block{border:0; padding:0; margin:0 0 34px; min-width:0}
.q-block legend{font-family:var(--font-display); font-size:1.15rem; color:var(--text); padding:0; line-height:1.35}
.q-hint{color:var(--text-faint); font-size:.9rem; margin:6px 0 16px}
.chip-cat{margin-bottom:16px}
.chip-cat-title{font-family:var(--font-display); text-transform:uppercase; letter-spacing:1.5px;
  font-size:.72rem; color:var(--cyan); margin:0 0 8px}
.chip-row{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; display:inline-flex; cursor:pointer}
.chip input{position:absolute; opacity:0; width:0; height:0}
.chip span{display:inline-block; padding:8px 14px; font-size:.9rem; color:var(--text-muted);
  background:var(--bg-600); border:1px solid var(--stone); border-radius:var(--radius); transition:.12s; user-select:none}
.chip:hover span{border-color:rgba(34,211,238,.5); color:var(--text)}
.chip input:checked + span{color:#06121a; background:var(--glow-grad); border-color:transparent; box-shadow:var(--glow-cyan)}
.chip input:focus-visible + span{outline:2px solid var(--cyan); outline-offset:2px}
.other-wrap{margin-top:14px}
.game-search{margin-bottom:14px}
.search-none{color:var(--text-faint); font-size:.9rem; margin:12px 2px 0}

input[type=text],input[type=email],input[type=search]{
  width:100%; padding:12px 14px; background:var(--bg-900); border:1px solid var(--stone);
  border-radius:var(--radius); color:var(--text); font-family:inherit; font-size:1rem}
input::placeholder{color:var(--text-faint)}
input:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 2px rgba(34,211,238,.2)}

.email-block{border-top:1px solid rgba(58,58,70,.5); padding-top:24px; margin-top:6px}
.field-label{display:block; font-family:var(--font-display); font-size:1.05rem; margin-bottom:2px}
.consent{display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:.92rem; color:var(--text-muted); cursor:pointer}
.consent input{margin-top:3px; width:18px; height:18px; accent-color:var(--cyan); flex:0 0 auto}
.turnstile-wrap{margin-top:22px}
.form-foot{margin-top:26px; display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.privacy-note{color:var(--text-faint); font-size:.85rem; margin:0}
.form-status{margin:16px 0 0; font-size:.98rem; min-height:1.4em}
.form-status.ok{color:var(--success)} .form-status.err{color:var(--danger)}
/* honeypot - escondido de humanos, visível p/ bots burros */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---------------- Download ---------------- */
.section-download{background:var(--bg-900); min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding-block:clamp(32px, 5vw, 80px); scroll-snap-align:start}
.download-inner{max-width:820px; margin-inline:auto; text-align:center}
.download-inner .section-head{margin-bottom:clamp(16px,3vw,32px)}
.detected-os{font-family:var(--font-mono); font-size:.85rem; color:var(--cyan-soft); margin:0 0 16px}
.download-buttons{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.dl-btn.is-primary{box-shadow:var(--glow-cyan); transform:translateY(-2px)}
.download-soon-note{color:var(--text-muted); margin:18px auto 0; max-width:48ch}
.download-meta{list-style:none; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding:0; margin:26px 0 0}
.download-meta li{display:flex; flex-direction:column; gap:2px; min-width:120px; padding:12px 16px;
  border:1px solid var(--stone); border-radius:var(--radius); background:var(--bg-700)}
.dm-key{font-family:var(--font-display); font-size:.7rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-faint)}
.dm-val{font-family:var(--font-mono); color:var(--text)}
/* ---------- Tutorial de instalação (seção de download) ----------
   Ancorado no sistema do site: bases de basalto, cantos duros, glow ciano->violeta.
   O TRILHO vertical dos passos é o elemento assinatura: lê como coluna de basalto e
   diz "siga de cima para baixo" sem precisar de texto. Tudo o mais fica quieto. */
.install-guide{margin-top:clamp(32px, 5vw, 56px); text-align:left; width:100%}
.ig-head{text-align:center; margin-bottom:clamp(20px, 3vw, 30px)}
.ig-title{font-size:clamp(1.15rem, 2.4vw, 1.55rem); margin:0 0 6px; color:var(--text);
  letter-spacing:-.01em}
.ig-sub{color:var(--text-muted); margin:0 auto; max-width:52ch; font-size:.92rem; line-height:1.6}

.ig-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}

.ig-card{position:relative; background:var(--bg-800); border:1px solid var(--stone);
  border-radius:var(--radius); padding:24px 24px 20px}
/* Fio de luz no topo: marca a placa sem pesar. Só o sistema detectado acende. */
.ig-card::before{content:""; position:absolute; inset:-1px -1px auto -1px; height:2px;
  background:var(--stone); border-radius:var(--radius) var(--radius) 0 0}
.ig-card.is-primary{border-color:rgba(34,211,238,.45)}
.ig-card.is-primary::before{background:var(--glow-grad)}

.ig-card-head{display:flex; align-items:center; gap:10px; margin:0 0 18px}
.ig-os{font-family:var(--font-display); font-size:.82rem; color:var(--text);
  text-transform:uppercase; letter-spacing:2.5px; margin:0}
.ig-badge{font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--cyan-soft); border:1px solid rgba(34,211,238,.35);
  border-radius:var(--radius); padding:3px 7px; white-space:nowrap}

/* TRILHO: linha contínua atrás dos marcadores. Para no último passo (não sobra rabo). */
.ig-steps{list-style:none; counter-reset:ig; padding:0; margin:0; position:relative}
.ig-steps::before{content:""; position:absolute; left:9px; top:9px; bottom:0; width:1px;
  background:linear-gradient(180deg, var(--stone), transparent)}
.ig-step{counter-increment:ig; position:relative; padding-left:34px; padding-bottom:18px}
.ig-step:last-child{padding-bottom:0}
.ig-step::before{content:counter(ig); position:absolute; left:0; top:0; z-index:1;
  width:19px; height:19px; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:.66rem; line-height:1; color:var(--text-muted);
  background:var(--bg-800); border:1px solid var(--stone); border-radius:50%}
.ig-card.is-primary .ig-step::before{color:var(--cyan-soft); border-color:rgba(34,211,238,.5)}
.ig-text{margin:0; color:var(--text-muted); font-size:.9rem; line-height:1.6}
.ig-text b{color:var(--text); font-weight:600}
.ig-text code{font-family:var(--font-mono); font-size:.84rem; color:var(--cyan-soft)}

/* COMANDO: bloco de terminal com botão de copiar. É a interação mais útil da seção -
   ninguém digita um tar à mão. Rolagem própria para não empurrar a página no celular. */
.ig-cmd{position:relative; margin:10px 0 0; background:var(--bg-900);
  border:1px solid var(--stone); border-radius:var(--radius)}
.ig-cmd pre{margin:0; padding:11px 62px 11px 13px; overflow-x:auto}
.ig-cmd code{font-family:var(--font-mono); font-size:.78rem; line-height:1.65;
  color:var(--cyan-soft); white-space:pre; display:block}
.ig-copy{position:absolute; top:7px; right:7px; padding:4px 9px; cursor:pointer;
  font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:1px;
  color:var(--text-faint); background:var(--bg-700); border:1px solid var(--stone);
  border-radius:var(--radius); transition:color .15s, border-color .15s}
.ig-copy:hover{color:var(--cyan-soft); border-color:rgba(34,211,238,.5)}
.ig-copy:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.ig-copy.is-done{color:var(--success); border-color:rgba(52,211,153,.5)}

.ig-note{margin:18px 0 0; padding-top:14px; border-top:1px solid var(--stone);
  color:var(--text-faint); font-size:.78rem; line-height:1.55}

/* Faixa fina: "depois de instalar" não é um terceiro sistema, então não vira cartão. */
.ig-after{margin-top:16px; padding:16px 20px; background:var(--bg-800);
  border-left:2px solid var(--violet); border-radius:0 var(--radius) var(--radius) 0}
.ig-after-label{font-family:var(--font-display); font-size:.68rem; text-transform:uppercase;
  letter-spacing:2px; color:var(--violet-soft); margin:0 0 6px}
.ig-after-text{margin:0; color:var(--text-muted); font-size:.9rem; line-height:1.6}
.ig-help{margin:8px 0 0; color:var(--text-faint); font-size:.8rem}

@media (max-width:760px){
  .ig-grid{grid-template-columns:1fr}
  .ig-card{padding:20px}
}
@media (prefers-reduced-motion:reduce){ .ig-copy{transition:none} }


.download-cols{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px; text-align:left}
.req-box,.warn-box{background:var(--bg-700); border:1px solid var(--stone); border-radius:var(--radius); padding:22px}
.req-box h3{font-size:1rem; color:var(--cyan); text-transform:uppercase; letter-spacing:1.5px; margin:0 0 12px}
.req-list{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.req-list li{font-family:var(--font-mono); font-size:.85rem; color:var(--text-muted)}
.warn-box{border-color:rgba(251,191,36,.3)}
.warn-line{color:var(--text-muted); margin:0 0 12px; font-size:.95rem}
.launcher-line{color:var(--text-faint); font-size:.88rem; margin:0}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--bg-800); border-top:1px solid var(--stone); padding:24px 0}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px}
.footer-word{font-size:1.3rem; letter-spacing:2px; text-transform:uppercase; color:var(--text); display:block; margin-bottom:12px}
.footer-tagline{color:var(--text-muted); margin:0 0 10px; max-width:34ch}
.footer-independent{color:var(--text-faint); font-size:.85rem; margin:0; max-width:38ch}
.footer-col h2{font-family:var(--font-display); font-size:.78rem; text-transform:uppercase; letter-spacing:2px;
  color:var(--text-faint); margin:0 0 14px}
.footer-col a{display:block; color:var(--text-muted); padding:5px 0; font-size:.95rem}
.footer-col a:hover{color:var(--cyan)}
.footer-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:var(--text-faint); font-size:.82rem}
.footer-meta a{color:var(--text-faint)} .footer-meta a.is-current{color:var(--cyan)}
.lang-label{color:var(--text-faint)} .build-tag{font-family:var(--font-mono)}

/* ---------------- Páginas doc (privacy/press/404) ---------------- */
.page-doc main{background:var(--bg-900)}
.doc-inner{max-width:760px; margin-inline:auto}
.doc-inner h2{font-size:1.25rem; color:var(--text); margin:34px 0 10px}
.doc-inner p{color:var(--text-muted)}
.doc-updated{color:var(--text-faint); font-family:var(--font-mono); font-size:.85rem; margin-top:-4px}
.doc-lead{font-size:1.1rem; color:var(--text) !important; margin-top:18px}
.doc-back{margin-top:40px}
.facts{list-style:none; padding:0; margin:0; display:grid; gap:1px; background:var(--stone); border:1px solid var(--stone); border-radius:var(--radius); overflow:hidden}
.facts li{display:flex; gap:14px; background:var(--bg-700); padding:12px 16px}
.fact-k{font-family:var(--font-display); letter-spacing:1px; min-width:130px; color:var(--text-faint); text-transform:uppercase; font-size:.78rem; align-self:center}
.fact-v{color:var(--text)}
.press-assets{display:flex; gap:10px; flex-wrap:wrap}
.nf{min-height:60vh; display:grid; place-items:center; text-align:center}
.nf-crystal{margin:0 auto 24px; filter:drop-shadow(0 0 24px rgba(34,211,238,.4))}

/* ---------------- Consent banner + CRT ---------------- */
.consent-banner{position:fixed; left:16px; right:16px; bottom:16px; z-index:120; max-width:560px;
  margin-inline:auto; display:flex; gap:16px; align-items:center; justify-content:space-between;
  background:rgba(15,15,23,.97); border:1px solid var(--stone); border-radius:var(--radius);
  padding:14px 18px; box-shadow:0 20px 60px -20px rgba(0,0,0,.9)}
.consent-banner[hidden]{display:none}   /* o atributo hidden precisa vencer o display:flex acima */
.consent-banner p{margin:0; font-size:.88rem; color:var(--text-muted)}
.crt-toggle{position:fixed; right:16px; bottom:16px; z-index:90; width:42px; height:42px;
  background:rgba(15,15,23,.9); color:var(--text-muted); border:1px solid var(--stone);
  border-radius:var(--radius); cursor:pointer; font-size:1.1rem; line-height:1}
.crt-toggle:hover{color:var(--cyan); box-shadow:var(--glow-cyan)}
.crt-toggle[aria-pressed="true"]{color:#06121a; background:var(--glow-grad); border-color:transparent}
.crt-overlay{position:fixed; inset:0; z-index:80; pointer-events:none; opacity:0; transition:opacity .25s}
body.crt-on .crt-overlay{opacity:1;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 1px, transparent 1px, transparent 3px)}

/* ---------------- Responsivo ---------------- */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr; text-align:center}
  .about-copy p{margin-inline:auto}
  .about-art{order:-1}
  .download-cols{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .primary-nav{display:none}
  .nav-download{display:none}
  .menu-toggle{display:flex}
  .site-header.menu-open + .mobile-nav, .mobile-nav.open{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr; gap:24px}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:460px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
  .hero-cta .btn, .download-buttons .btn{width:100%}
}

/* Respeita preferências de movimento/transparência (acessibilidade) */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  [data-parallax]{transform:none !important}
}
@media (prefers-reduced-transparency:reduce){
  .site-header{backdrop-filter:none; background:var(--bg-900)}
  body.crt-on .crt-overlay{display:none}
}