*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
  /* Paleta azul */
  --c1:#e4f1f7; --c2:#c9e4f0; --c3:#aed6e8; --c4:#93c9e1; --c5:#79bcda;
  /* Rosa */
  --r1:#ffe3ef; --r2:#ffc2dc; --r3:#ff8fc0; --r4:#ec4f9a;
  /* Texto / contorno */
  --navy:#16384a; --navy2:#3d6076;
}
body{font-family:'VT323',monospace;font-size:22px;line-height:1.3;color:var(--navy);overflow-x:hidden;
  background-color:var(--c1);
  background-image:radial-gradient(var(--c3) 2px,transparent 2px);background-size:24px 24px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{scroll-margin-top:80px}
h1,h2,h3,.btn,.nivel,.xp,.logo,.hud,.barra{font-family:'Press Start 2P',monospace}
a:focus-visible,button:focus-visible{outline:4px solid var(--r4);outline-offset:3px}

/* HUD */
header{position:fixed;top:0;left:0;width:100%;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 5%;background:var(--c4);border-bottom:4px solid var(--navy)}
.logo{font-size:16px;color:var(--navy)}
.hud{font-size:10px;color:var(--r4)}
nav{display:flex;gap:22px;font-family:'Press Start 2P',monospace;font-size:10px}
nav a:hover{color:var(--r4)}

/* Janelas estilo Windows 95 */
.janela{background:var(--r1);border:4px solid var(--navy);box-shadow:8px 8px 0 var(--navy)}
.barra{display:flex;justify-content:space-between;align-items:center;background:var(--r3);color:var(--navy);
  font-size:10px;padding:10px 12px;border-bottom:4px solid var(--navy)}
.barra i{width:14px;height:14px;background:var(--c1);border:3px solid var(--navy)}
.corpo{padding:22px}
.txt{font-size:24px;color:var(--navy2)}

/* Botões */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:12px;padding:16px 22px;background:var(--r3);
  border:4px solid var(--navy);box-shadow:5px 5px 0 var(--navy);color:var(--navy);transition:.1s;cursor:pointer}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--navy);background:var(--r2)}
.btn-azul{background:var(--c5)}
.btn-azul:hover{background:var(--c4)}

/* Hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;gap:60px;padding:130px 7% 80px}
.hero-text{max-width:620px;flex:1}
.xp{font-size:10px;color:var(--r4);margin-bottom:22px}
h1{font-size:clamp(26px,4.5vw,50px);line-height:1.35;color:var(--navy);text-shadow:4px 4px 0 var(--r3);margin-bottom:22px}
.sub{font-size:26px;color:var(--navy2);margin-bottom:30px}
.botoes{display:flex;flex-wrap:wrap;gap:18px}
.player{width:min(340px,100%);flex-shrink:0}
.tela{background:var(--c2);padding:16px 16px 0;overflow:hidden}
.tela img{width:100%;height:auto;mix-blend-mode:multiply;image-rendering:pixelated;animation:flutuar 1.2s steps(2) infinite}
@keyframes flutuar{50%{transform:translateY(-8px)}}
.estrela{position:absolute;color:var(--r4);font-size:26px;animation:piscar 1.6s steps(2) infinite}
.e1{top:18%;left:5%}.e2{top:30%;right:6%;color:var(--c5)}.e3{bottom:12%;left:42%;animation-delay:.6s}
@keyframes piscar{50%{opacity:.2}}

/* Faixas rolantes */
.ticker{overflow:hidden;white-space:nowrap;background:var(--c5);border-block:4px solid var(--navy);
  font-family:'Press Start 2P',monospace;font-size:12px;padding:14px 0}
.ticker.rosa{background:var(--r3)}
.ticker div{display:inline-block;animation:rolar 25s linear infinite}
@keyframes rolar{to{transform:translateX(-33.33%)}}

/* Seções */
.sobre,.servicos,.portfolio,.contato{padding:100px 7%}
.servicos{background:var(--c2);border-bottom:4px solid var(--navy)}
.nivel{font-size:11px;color:var(--r4);margin-bottom:14px}
h2{font-size:clamp(20px,3vw,30px);margin-bottom:44px;text-shadow:3px 3px 0 var(--r2)}
h3{font-size:13px;line-height:1.6;margin:14px 0 10px}
.grid-sobre{display:grid;grid-template-columns:3fr 2fr;gap:44px;max-width:1000px}
.txt+.txt,.corpo .txt:not(:last-child){margin-bottom:12px}
.itens{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.itens li{background:var(--c3);border:3px solid var(--navy);padding:6px 12px;font-size:22px}
.cards,.projetos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px}
.card .corpo i{font-size:40px;color:var(--r4)}
.card:hover,.projeto:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--navy)}
.card,.projeto{transition:.15s}
.projeto img{width:100%;height:200px;object-fit:cover;border-bottom:4px solid var(--navy)}
.contato{text-align:center}
.contato .txt{margin-bottom:30px}

footer{padding:36px 7%;text-align:center;background:var(--c4);border-top:4px solid var(--navy);font-size:22px}
footer p+p{margin-top:6px}
footer a{text-decoration:underline}

/* Entrada das seções e botão topo */
.hidden{opacity:0;transform:translateY(30px);transition:opacity .6s,transform .6s}
.hidden.show{opacity:1;transform:none}
#topo{position:fixed;right:22px;bottom:22px;width:48px;height:48px;background:var(--r3);border:4px solid var(--navy);
  box-shadow:4px 4px 0 var(--navy);font-size:16px;color:var(--navy);cursor:pointer;opacity:0;pointer-events:none;transition:.2s;z-index:40}
#topo.mostrar{opacity:1;pointer-events:auto}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
@media(max-width:900px){
  .hero{flex-direction:column;padding-top:120px}
  .grid-sobre{grid-template-columns:1fr}
  .hud{display:none}
}
@media(max-width:560px){
  header{padding:12px 4%}.logo{font-size:12px}
  nav{gap:12px;font-size:8px}
  .corpo{padding:16px}
  .btn{font-size:10px;width:100%;justify-content:center}
}