*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:root {
  --yellow: #FFD000; --white: #fff;
  --text: #EEF2FF; --muted: rgba(238,242,255,.55); --muted2: rgba(238,242,255,.28);
  --border: rgba(255,255,255,.10); --border2: rgba(255,255,255,.18);
  --glass: rgba(255,255,255,.06); --glass2: rgba(255,255,255,.10);
  --radius: 20px; --ease: cubic-bezier(.4,0,.2,1); --spring: cubic-bezier(.34,1.56,.64,1);
  --accent: #FFD000; --accent-dk: #C9A800;
  --shadow-accent: rgba(255,208,0,.3);
  --tag-bg: rgba(255,208,0,.12); --tag-color: var(--accent); --tag-border: rgba(255,208,0,.25);
}
body { font-family: 'Poppins', sans-serif; color: var(--text); min-height: 100vh; display: flex; flex-direction: column; position: relative; }

/* FUNDO */
.bg-wrap { position: fixed; inset: 0; z-index: 0; background: linear-gradient(145deg,#020A18,#051428,#071C3A,#040F22,#030C1C); overflow: hidden; }
.plane { position: absolute; fill: rgba(255,255,255,1); pointer-events: none; will-change: transform; }
@keyframes drift1 { 0%,100%{transform:rotate(35deg) translate(0,0)} 50%{transform:rotate(35deg) translate(30px,-20px)} }
@keyframes drift2 { 0%,100%{transform:rotate(-20deg) translate(0,0)} 50%{transform:rotate(-20deg) translate(-25px,18px)} }
@keyframes drift3 { 0%,100%{transform:rotate(70deg) translate(0,0)} 50%{transform:rotate(70deg) translate(20px,28px)} }
@keyframes drift4 { 0%,100%{transform:rotate(120deg) translate(0,0)} 50%{transform:rotate(120deg) translate(-18px,-22px)} }
@keyframes drift5 { 0%,100%{transform:rotate(-55deg) translate(0,0)} 50%{transform:rotate(-55deg) translate(22px,-15px)} }
@keyframes drift6 { 0%,100%{transform:rotate(10deg) translate(0,0)} 50%{transform:rotate(10deg) translate(-30px,10px)} }
.frost { position: fixed; inset: 0; z-index: 1; background: rgba(4,12,28,.44); backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); }
header, .pv-banner, main, footer { position: relative; z-index: 2; }

/* HEADER */
header { position: sticky; top: 0; z-index: 200; background: rgba(4,12,28,.72); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid var(--border); }
.hdr { max-width: 1240px; margin: 0 auto; padding: 0 28px; height: 64px; display: flex; align-items: center; gap: 16px; }
.back-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--glass); transition: all .18s var(--ease); white-space: nowrap; }
.back-btn:hover { color: var(--white); background: var(--glass2); border-color: var(--border2); }
.back-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hdr-title { flex: 1; font-size: 14px; font-weight: 700; color: var(--white); letter-spacing: -.01em; }
.hdr-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; background: var(--tag-bg); color: var(--tag-color); border: 1px solid var(--tag-border); padding: 4px 12px; border-radius: 999px; }
.theme-btn { width: 36px; height: 36px; flex-shrink: 0; background: var(--glass2); border: 1px solid var(--border); border-radius: 10px; display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--spring); }
.theme-btn:hover { transform: scale(1.1) rotate(8deg); }
.theme-btn svg { width: 17px; height: 17px; stroke: var(--text); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-sun { display: none; } .icon-moon { display: block; }
html.light .icon-sun { display: block; } html.light .icon-moon { display: none; }

/* MAIN — páginas de ferramenta */
main { flex: 1; max-width: 1240px; margin: 0 auto; width: 100%; padding: 48px 28px 72px; }
.page-hdr { margin-bottom: 36px; animation: fadeUp .5s var(--ease) both; }
.page-hdr-top { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.tool-badge { width: 52px; height: 52px; background: linear-gradient(135deg,var(--accent-dk),var(--accent)); border-radius: 14px; display: grid; place-items: center; box-shadow: 0 4px 20px var(--shadow-accent); flex-shrink: 0; }
.tool-badge svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-hdr h1 { font-size: clamp(24px,3vw,36px); font-weight: 900; color: var(--white); letter-spacing: -.03em; line-height: 1.1; }
.page-hdr p { font-size: 14px; color: var(--muted); line-height: 1.7; max-width: 520px; }
.content-area { background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; min-height: 400px; animation: fadeUp .5s .1s var(--ease) both; }

/* FOOTER */
footer { position: relative; z-index: 2; background: rgba(4,10,22,.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border); padding: 20px 28px; }
.ftr { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.ftr-brand { font-size: 13px; font-weight: 800; color: var(--yellow); }
.ftr-copy { font-size: 11px; color: var(--muted2); }

/* ANIMAÇÕES */
@keyframes fadeDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity:0; transform:translateY(20px); }
.reveal.in { animation: fadeUp .55s var(--ease) both; }

/* RESPONSIVIDADE — páginas de ferramenta */
@media (max-width: 768px) {
  main { padding: 32px 20px 56px; }
  .content-area { padding: 24px 20px; }
  .page-hdr { margin-bottom: 28px; }
  .hdr { gap: 10px; }
  .hdr-title { font-size: 13px; }
}

@media (max-width: 640px) {
  .hdr { padding: 0 16px; height: 58px; gap: 8px; }
  .hdr-title { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
  .hdr-tag { font-size: 9px; padding: 3px 9px; letter-spacing: .07em; }
  main { padding: 24px 14px 48px; }
  .content-area { padding: 18px 14px; border-radius: 16px; }
  .page-hdr { margin-bottom: 22px; }
  .page-hdr-top { gap: 12px; }
  .page-hdr h1 { font-size: clamp(20px, 6vw, 28px); }
  .page-hdr p { font-size: 13px; }
  .tool-badge { width: 44px; height: 44px; border-radius: 12px; }
  .tool-badge svg { width: 22px; height: 22px; }
  footer { padding: 14px 16px; }
  .ftr { flex-direction: column; align-items: flex-start; gap: 3px; }
}

@media (max-width: 480px) {
  .hdr-tag { display: none; }
  .back-btn { padding: 6px 10px; font-size: 12px; }
  .back-btn svg { width: 12px; height: 12px; }
}

/* MODO CLARO */
html.light .bg-wrap { background: linear-gradient(145deg,#0f4a8a,#1460b0,#1870c8,#0d3d78,#0a3060); }
html.light .plane { fill: rgba(255,255,255,1); }
html.light .frost { background: rgba(8,40,100,.38); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }
html.light header { background: rgba(8,40,100,.65); border-bottom-color: rgba(255,255,255,.15); }
html.light .back-btn { color: rgba(255,255,255,.7); }
html.light .back-btn:hover { color: #fff; }
html.light .hdr-title { color: #fff; }
html.light .page-hdr h1 { color: #fff; }
html.light .content-area { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); }
html.light footer { background: rgba(5,25,65,.60); }
html.light .ftr-copy { color: rgba(255,255,255,.35); }