:root{
  --bg:#0A0A12; --panel:rgba(16,16,24,.6);
  --glass:rgba(20,20,32,.55); --stroke:rgba(255,255,255,.08);
  --txt:#EAEAF2; --muted:#B9B9C9;
  --neon:#7A3FFF; --neon2:#9D5CFF; --emerald:#00E5A8; --gold:#F8C552;
  --shadow:0 10px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Arial;
  color:var(--txt); background: radial-gradient(1200px 800px at 75% -20%, rgba(122,63,255,.25), transparent 60%) , linear-gradient(#0A0A12,#090912 60%);
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3{font-family:Poppins,Inter,system-ui,Arial}
a{color:var(--txt); text-decoration:none}
#progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background: linear-gradient(90deg,var(--emerald),var(--neon),var(--gold));
  z-index:1000; box-shadow:0 0 12px var(--neon);
}
/* NAV */
header.nav{
  position:sticky; top:0; z-index:900; display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px; border-bottom:1px solid var(--stroke); backdrop-filter:saturate(140%) blur(8px);
}
header.nav a.brand{display:flex; gap:8px; align-items:center; font-weight:700}
header.nav a.brand .spark{width:10px;height:10px;border-radius:50%; background:var(--emerald); box-shadow:0 0 10px var(--emerald)}
header.nav nav{display:flex; gap:18px; align-items:center}
.toggle{background:transparent;border:1px solid var(--stroke);color:var(--txt);padding:8px 10px;border-radius:10px;cursor:pointer}
/* HERO */
.hero{
  position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:24px;
  align-items:center; min-height:80vh; padding:64px 24px 24px; isolation:isolate;
}
.hero-content h1{font-size:clamp(34px,6vw,64px); line-height:1.05; letter-spacing:-.02em}
.hero-content h1 strong{color:var(--neon2); text-shadow:0 0 16px rgba(122,63,255,.35)}
.hero-content p{color:var(--muted); max-width:640px}
.cred{display:flex; gap:12px; padding:0; margin-top:12px; list-style:none; opacity:.9}
.cred li{padding:6px 10px; border:1px solid var(--stroke); border-radius:999px; background:rgba(255,255,255,.03)}
.hero-figure{position:relative}
.hero-figure img.float{animation:float 5.5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
#particles{position:absolute; inset:0; z-index:-1; filter:blur(.2px) contrast(140%); opacity:.6}

/* GLASS */
.glass{background:var(--glass); border:1px solid var(--stroke); border-radius:18px; box-shadow:var(--shadow)}
.sobre{display:grid;grid-template-columns:1fr 1.2fr; gap:24px; margin:40px 24px; padding:24px}
.badges{display:flex;flex-wrap:wrap; gap:8px; padding:0; list-style:none}
.badges .gooey{padding:6px 12px; border-radius:14px; background:linear-gradient(90deg,rgba(122,63,255,.18),rgba(0,229,168,.18)); border:1px solid var(--stroke); backdrop-filter:blur(8px)}
/* SERVIÇOS */
.servicos{padding:40px 24px}
.servicos .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{padding:18px;border:1px solid var(--stroke);border-radius:18px;background:rgba(255,255,255,.02); box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
/* PORTFÓLIO */
.portfolio{margin:40px 24px; padding:24px}
.masonry{columns:3 280px; column-gap:14px}
.masonry .item{display:block; break-inside:avoid; margin:0 0 14px; border-radius:14px; overflow:hidden; border:1px solid var(--stroke)}
.masonry img{transition:.3s transform ease; will-change:transform}
.masonry a:hover img{transform:scale(1.02)}
/* PROCESSO */
.processo{padding:40px 24px}
.steps{display:flex; gap:14px; flex-wrap:wrap; padding:0; list-style:none}
.steps li{border:1px solid var(--stroke); border-radius:14px; padding:10px 14px; background:rgba(255,255,255,.02)}
.steps li span{display:inline-grid; place-items:center; width:22px;height:22px; margin-right:8px; border-radius:6px; background:linear-gradient(90deg,var(--neon),var(--emerald)); color:#000; font-weight:700}
/* CONTATO */
.contato{margin:40px 24px; padding:24px}
.form{display:grid; gap:12px}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form input,.form textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.02); color:var(--txt)}
.form textarea{min-height:120px; resize:vertical}
/* FOOTER */
.footer{padding:30px 24px; display:flex; align-items:center; justify-content:space-between; color:var(--muted)}
.footer .social{display:flex; gap:18px}

/* BUTTONS */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:12px; border:1px solid var(--stroke); cursor:pointer; transition:transform .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-neon{background:linear-gradient(90deg,var(--neon),var(--emerald)); color:#050510; box-shadow:0 0 16px rgba(122,63,255,.45)}
.btn.ghost{background:rgba(255,255,255,.02)}

/* Magnetic (handled by JS) */
.magnetic{position:relative; will-change:transform}

/* Tilt cards */
.tilt{transform-style:preserve-3d; perspective:800px}

/* Lightbox */
.lightbox-modal{border:none; padding:0; width:min(92vw,1100px); background:rgba(5,5,12,.8); backdrop-filter:blur(12px); border-radius:16px}
.lightbox-modal::backdrop{background:rgba(0,0,0,.7)}
.lightbox-modal img{display:block; width:100%; height:auto; border-radius:16px}
.lightbox-modal #lbclose{position:absolute; top:12px; right:12px; background:rgba(255,255,255,.1); color:#fff; border:1px solid var(--stroke); border-radius:10px; padding:8px 10px; cursor:pointer}

/* Floating WhatsApp */
.whats{position:fixed; right:18px; bottom:18px; width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(90deg,var(--emerald),#0cf); box-shadow:0 10px 20px rgba(0,0,0,.35); z-index:900}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr; text-align:center}
  .hero-figure{order:-1}
  .servicos .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 520px){
  .form .row{grid-template-columns:1fr}
}

/* ==== Responsividade e correções mobile ==== */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video {
    max-width: 100%;
    height: auto;
}

.container, .section, .content {
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}