:root{--bg:#060c1f;--ink:#05091a;--paper:#e8ecf7;--mist:#9fb0d8;--amber:#ffc83d;--pink:#ff4fa3;--cyan:#5aaadc;--neon:#ffc83d}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(120% 80% at 70% -10%,#122046 0%,var(--bg) 55%,var(--ink) 100%);color:var(--paper);font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6}
a{color:var(--cyan);text-decoration:none}a:hover{color:var(--amber)}
.top{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;position:sticky;top:0;background:rgba(6,12,31,.82);backdrop-filter:blur(8px);z-index:10;border-bottom:1px solid #1a2b50}
.top{border-bottom:1px solid #1a2b50}.brand{font-weight:900;letter-spacing:3px;color:var(--amber)}
.top nav a{margin-left:18px;color:var(--mist);font-weight:700}
main{max-width:1120px;margin:0 auto;padding:0 20px}
.hero{padding:72px 0 40px}.eyebrow{color:var(--pink);font-weight:800;letter-spacing:2px;text-transform:uppercase;margin:0 0 6px}
h1{font-size:clamp(48px,9vw,104px);margin:.1em 0;line-height:.95;background:linear-gradient(90deg,var(--cyan),var(--amber) 40%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(18px,2.4vw,26px);color:var(--mist);max-width:40ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
button,.btn{font:inherit;font-weight:800;border:0;border-radius:12px;padding:14px 26px;background:var(--amber);color:#05091a;cursor:pointer}
.ghost{background:transparent;border:2px solid var(--neon);color:var(--paper)}
.hint{color:#6f82b4;font-size:14px}
h2{font-size:clamp(28px,5vw,44px);margin:56px 0 18px;border-left:5px solid var(--neon);padding-left:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.card{display:block;background:#0c1430;border:1px solid #1a2b50;border-radius:16px;overflow:hidden;transition:.18s;border-top:3px solid var(--neon)}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 24px -6px var(--neon)}
.card img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.card-body{padding:14px 16px}.card-body h3{margin:.2em 0;color:var(--paper)}.card-body p{color:var(--mist);margin:.2em 0;font-size:15px}
.stack{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:10px 0 0}
.stack li{font-size:12px;color:var(--cyan);border:1px solid #23407a;border-radius:999px;padding:2px 10px}
.stack.big li{font-size:14px;padding:5px 14px}
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:12px 0}
.skillgroup{background:#0b1026;border:1px solid #1a2b50;border-radius:12px;padding:12px 16px}
.skillgroup h4{margin:.2em 0;color:var(--amber)}.skillgroup p{color:var(--mist);margin:.2em 0;font-size:15px}
.exp>li{margin:14px 0}.exp span{color:#6f82b4;font-size:14px;margin-left:8px}
.project .phead{padding:18px 0}.crumb{color:#6f82b4;font-size:14px;padding-top:18px}
.shot{width:100%;border-radius:16px;border:1px solid #1a2b50;margin:14px 0}
.desc{font-size:19px;color:var(--mist)}
.piece{border-left:3px solid var(--neon);padding:4px 0 4px 16px;margin:16px 0}.piece h2{border:0;padding:0;font-size:22px;margin:0 0 4px}
.foot{max-width:1120px;margin:60px auto 30px;padding:24px 20px;border-top:1px solid #1a2b50;color:#6f82b4}
@media(max-width:640px){.hero{padding:48px 0 24px}}

/* conteúdo semântico visualmente oculto (lido por leitores de tela e robôs; o jogo cobre a tela) */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.pf{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 75%,#1a0f2e 0%,#05060c 70%);overflow:hidden}
.pf-card{text-align:center;padding:24px;max-width:560px}
.pf-over{margin:0;font:600 13px/1 'Courier New',monospace;letter-spacing:.42em;color:#ff4fa3}
.pf-name{margin:.25em 0;font:400 clamp(44px,10vw,84px)/1 'Bebas Neue',Impact,sans-serif;letter-spacing:.06em;color:#f3ead8;text-shadow:0 0 18px #ff4fa388,0 0 40px #5aaadc55}
.pf-line{margin:.4em 0 1.4em;font:15px/1.5 'Courier New',monospace;color:#ffc83d}
.pf-links{display:flex;gap:18px;justify-content:center}
.pf-links a{color:#e8ecf7;text-decoration:none;border:1px solid #ff4fa3;border-radius:8px;padding:10px 16px;font:600 14px 'Courier New',monospace}
.pf-links a:hover{background:#ff4fa322}
body.pf-on .pf-card{visibility:hidden}