:root{
  --bg:#070912; --card:#0c0f1b; --line:#1a2140; --text:#eef1fb; --muted:#a6afcf;
  --blue:#1e7bff; --red:#ff2a55; --grad:linear-gradient(135deg,#2f7bff 0%,#8a3fd1 55%,#ff2a55 100%);
  --f-title:"Space Grotesk",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{
  font-family:var(--f-body);color:var(--text);min-height:100%;
  background-color:var(--bg);
  background-image:linear-gradient(rgba(60,90,200,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(60,90,200,.05) 1px,transparent 1px);
  background-size:32px 32px;
}
.wrap{max-width:1344px;margin:0 auto;padding:0 48px}

/* cabeçalho */
header{border-bottom:2px solid transparent;border-image:linear-gradient(90deg,var(--blue),var(--red)) 1;background:rgba(7,9,18,.85)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:102px}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit}
.logo{width:58px;height:58px;flex:none;border-radius:10px;box-shadow:0 0 22px rgba(80,90,255,.35)}
.brand .name{font:700 26px/1 var(--f-title);color:var(--blue)}
.brand .name b{color:var(--red);font-weight:700}
.brand .name span{color:var(--text)}
.brand small{display:block;margin-top:8px;font:400 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
nav{display:flex;gap:12px}
nav a{font:400 13px var(--f-mono);letter-spacing:.06em;color:var(--text);text-decoration:none;padding:10px 18px;border:1px solid var(--line);background:var(--card)}
nav a.on{background:linear-gradient(180deg,#2a8bff,#1266e0);border-color:#4a9dff;box-shadow:0 0 18px rgba(30,123,255,.45)}
nav a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* hero */
.hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;padding:64px 0 56px}
.hero h1{font:700 54px/1.06 var(--f-title);letter-spacing:-.02em}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin-top:22px;font:400 19px var(--f-body);color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,168px);gap:22px}

/* janela (base dos cards) */
.win{background:var(--card);border:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:26px;padding:0 10px;background:linear-gradient(90deg,#2c55c9 0%,#5a3f9c 55%,#9b1c40 100%);font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#e6ebff}
.dots{display:flex;gap:4px;margin-left:auto}
.dots i{width:12px;height:12px;background:#0b0d18;border:1px solid rgba(255,255,255,.25)}

/* selo orgânico (ícone) — mesmo usado nos cards do catálogo */
.badge{display:grid;place-items:center;flex:none;width:68px;height:68px;border-radius:58% 42% 55% 45% / 48% 56% 44% 52%;background:linear-gradient(135deg,#3b82ff 0%,#a13fc4 55%,#ff3860 100%);box-shadow:0 6px 22px rgba(120,60,200,.28)}
.badge svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 3 blocos do topo — agora com ícone-selo e fontes do catálogo */
.step .body{display:flex;flex-direction:column;align-items:center;gap:16px;padding:22px 14px 24px;text-align:center}
.step .badge{width:60px;height:60px}
.step .badge svg{width:30px;height:30px}
.step h3{font:600 15px/1.3 var(--f-title);color:var(--text);letter-spacing:-.005em}

/* catálogo */
.title-row{display:flex;align-items:center;gap:20px;margin-bottom:28px}
.title-row h2{font:700 25px var(--f-title);white-space:nowrap}
.title-row hr{flex:1;border:0;border-top:1px solid var(--line)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding-bottom:56px}
.item .body{display:flex;gap:24px;align-items:center;padding:34px 24px 26px}
.item .txt small{display:block;font:400 12px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.item .txt h3{margin:8px 0 6px;font:600 23px var(--f-title)}
.item .txt p{font:400 14px var(--f-body);color:var(--muted)}
.item .go{display:block;margin:0 24px 24px;padding:16px;text-align:center;font:400 13px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);background:rgba(20,26,50,.5)}

/* rodapé */
footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:80px;font:400 12px var(--f-mono);color:var(--muted)}
.social{display:flex;gap:12px}
.social a{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);background:var(--card);color:var(--muted);font:500 11px var(--f-mono);text-decoration:none}
.social a svg{width:16px;height:16px}
.social a:hover{color:#fff;border-color:var(--blue)}
.social a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.legal{display:flex;gap:28px}
.legal a{color:var(--muted);text-decoration:none}
.legal a:hover,nav a:hover{color:#fff}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .hero h1{font-size:42px}
}
@media (max-width:720px){
  .wrap{padding:0 20px}
  header .wrap{height:auto;padding:16px 20px;flex-wrap:wrap}
  .steps{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  footer .wrap{height:auto;padding:20px;flex-direction:column}
}

/* botão "Baixar" ativo (item com link) */
a.go{text-decoration:none}
.item .go.on{color:#fff;border-color:#4a9dff;background:linear-gradient(90deg,rgba(47,123,255,.28),rgba(255,42,85,.24));transition:box-shadow .15s}
.item .go.on:hover{box-shadow:0 0 18px rgba(30,123,255,.45)}
.item .go.on:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.legal a:focus-visible,.brand:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* páginas internas (Sobre, Contato, Privacidade, Termos) */
.page{max-width:860px;padding:56px 0 72px}
.page h1{display:inline-block;margin-bottom:28px;font:700 44px/1.1 var(--f-title);letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.prose{padding:28px 28px 16px;font:400 16px/1.75 var(--f-body)}
.prose p{margin-bottom:18px;color:#d3d9ee}
.form{display:grid;gap:20px;padding:28px}
.form label{display:grid;gap:8px;font:400 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.form input,.form textarea{width:100%;padding:14px;font:400 16px var(--f-body);color:var(--text);background:#080a14;border:1px solid var(--line);border-radius:0}
.form textarea{min-height:170px;resize:vertical}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.btn{justify-self:start;padding:14px 26px;font:500 13px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;cursor:pointer;border:1px solid #4a9dff;background:linear-gradient(180deg,#2a8bff,#1266e0);box-shadow:0 0 18px rgba(30,123,255,.35)}
.btn:hover{box-shadow:0 0 24px rgba(30,123,255,.6)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{margin:24px 28px 0;padding:14px 16px;font:400 15px var(--f-body);border:1px solid var(--line)}
.notice.ok{color:#bff5d4;border-color:#2c8f5b;background:rgba(44,143,91,.12)}
.notice.err{color:#ffc4cf;border-color:#a52a48;background:rgba(255,42,85,.1)}