:root{
      --bg:#07090c;
      --panel:#0c1118;
      --muted:#94a3b8;
      --text:#e6edf3;
      --accent:#00E5FF;         /* ciano neon */
      --accent-2:#7C3AED;       /* roxo neon */
      --ok:#22c55e;
      --warn:#f59e0b;
      --danger:#ef4444;
      --glass:rgba(255,255,255,.06);
      --border:rgba(255,255,255,.08);
      --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
    }
    *{box-sizing:border-box}
    html,body{
      
      overflow-x: hidden;
      max-width: 100%;
      
    }
    body{
      margin:0; 
      background:radial-gradient(1600px 800px at 20% -10%, #001018 0%, var(--bg) 60%), radial-gradient(1600px 800px at 120% 10%, #0c0018 0%, var(--bg) 40%);
      color:var(--text); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
      line-height:1.2; letter-spacing:.2px;
      overflow-x:hidden;
    }
    a{color:var(--text); text-decoration:none}
    .container{
      width:min(1200px, 100%);
      margin:0 auto
      padding: 0 16px;
    }
    header{
      position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background:linear-gradient(180deg, rgba(10,12,16,.9), rgba(10,12,16,.5)); border-bottom:1px solid var(--border);
    }
    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
    .brand{display:flex; align-items:center; gap:12px}
    .logo{width:40px; height:40px; background:conic-gradient(from 120deg, var(--accent), var(--accent-2)); border-radius:14px; box-shadow:0 0 30px rgba(0,229,255,.35); position:relative; isolation:isolate}
    .logo::after{content:"3D"; position:absolute; inset:0; display:grid; place-items:center; font:800 12px Orbitron, sans-serif; color:#081217; mix-blend:screen}
    .brand h1{font:800 18px Orbitron, sans-serif; letter-spacing:1.5px; margin:0}
    .nav-links{display:flex; gap:14px; flex-wrap:wrap}
    .nav a{opacity:.9; padding:8px 12px; border-radius:10px; border:1px solid transparent}
    .nav a:hover{border-color:var(--border); background:var(--glass)}.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(124,58,237,.12), rgba(0,229,255,.08));
  box-shadow:var(--shadow); font-weight:700; letter-spacing:.3px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow:0 12px 40px rgba(0,229,255,.2)}
.btn.primary{background:linear-gradient(180deg, rgba(0,229,255,.16), rgba(124,58,237,.12));}

/* HERO */
.hero{position:relative; padding:64px 0 28px}
.grid-bg{position:absolute; 
inset:-10% 0 -20% 0;
width: 100%;
overflow: hidden;
background:radial-gradient(800px 400px at 30% 30%, rgba(124,58,237,.12), transparent 60%),
  radial-gradient(800px 400px at 70% 20%, rgba(0,229,255,.1), transparent 60%);
  mask: linear-gradient(black, transparent 90%);
  pointer-events:none;
}
.grid-bg::before{content:""; position:absolute; inset:0; background-image: linear-gradient(transparent 23px, rgba(255,255,255,.06) 24px), linear-gradient(90deg, transparent 23px, rgba(255,255,255,.06) 24px); background-size:24px 24px; opacity:.35}

.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:var(--glass); border:1px solid var(--border); font-size:12px; color:var(--muted)}
.pulse{width:8px; height:8px; background:var(--ok); border-radius:999px; box-shadow:0 0 0 8px rgba(34,197,94,.12)}
.hero h2{font:900 40px/1.05 Orbitron, sans-serif; margin:16px 0 12px; letter-spacing:1px}
.hero p{max-width:680px; color:#cdd6e0}

.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}

/* FEATURES STRIP */
.strip{margin:28px 0 0; padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0))}
.strip ul{display:flex; gap:20px; padding:0; list-style:none; margin:0; overflow:auto}
.chip{flex:0 0 auto; border:1px dashed var(--border); padding:10px 14px; border-radius:12px; color:var(--muted)}

/* SECTION TITLES */
.section{padding:54px 0}
.section h3{font:800 24px Orbitron, sans-serif; margin:0 0 18px}
.sub{color:var(--muted); margin:0 0 24px}

/* PRODUCTS */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.search{flex:1; min-width:220px; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px 14px; color:var(--text)}
.filter{padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--glass); color:var(--muted)}
.grid{display:grid; grid-template-columns:repeat(1, 1fr); gap:16px}
@media(min-width:600px){.grid{grid-template-columns:repeat(2, 1fr)}}
@media(min-width:920px){.grid{grid-template-columns:repeat(3, 1fr)}}

.card{position:relative; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border:1px solid var(--border); border-radius:18px; padding:14px; box-shadow:var(--shadow); overflow:hidden; isolation:isolate}
.card::before{content:""; position:absolute; inset:-50% -50% auto -50%; height:140px; background:radial-gradient(500px 60px at 50% 50%, rgba(0,229,255,.25), transparent 60%); transform:translateY(-60px) rotate(-8deg)}
.card .thumb{aspect-ratio: 4/3; background:linear-gradient(135deg, rgba(0,229,255,.08), rgba(124,58,237,.08)); border:1px solid var(--border); border-radius:12px; display:grid; place-items:center; font:800 28px Orbitron, sans-serif; color:#7dd3fc}
.badge-mini{position:absolute; top:12px; left:12px; padding:6px 10px; border-radius:999px; background:rgba(124,58,237,.18); border:1px solid var(--border); font-size:12px}
.title{font-weight:800; margin:10px 0 6px}
.price{color:#a5b4fc; font-weight:700}
.cta{margin-top:12px; display:flex; gap:10px}
.ghost{background:transparent}

/* CART */
.float-cart-btn{position:fixed; right:18px; bottom:10px; z-index:60}
.cart-panel{position:fixed; inset:0 0 0 auto; width:min(420px, 92vw); background:rgba(7,9,12,.96); border-left:1px solid var(--border); box-shadow: -20px 0 60px rgba(0,0,0,.5); transform:translateX(110%); transition: transform .25s ease; z-index:70; display:flex; flex-direction:column}
.cart-panel.open{transform:translateX(0)}
.cart-head{display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--border)}
.cart-list{flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:12px}
.cart-item{display:grid; grid-template-columns: 1fr auto; gap:10px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--panel)}
.qty{display:flex; align-items:center; gap:8px}
.qty button{padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--glass); color:var(--text)}
.cart-foot{padding:16px; border-top:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}

/* FAQ */
details{border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--panel)}
summary{cursor:pointer; font-weight:700}

/* FOOTER */
footer{border-top:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0)); padding:28px 0; color:var(--muted)}

/* Micro-anim */
.tilt{transform-style:preserve-3d; perspective:1000px}
.tilt:hover .thumb{transform:translateZ(18px)}
.glow{filter: drop-shadow(0 0 18px rgba(0,229,255,.25));}
.reveal{opacity:0; transform: translateY(20px); transition: all .6s ease}
.reveal.visible{opacity:1; transform:none}

.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}
/* Correção de responsividade */
.grid-bg{ inset:-10% 0 -20% 0; width:100%; overflow:hidden; }
.container{ width:min(1200px, 100%); margin:0 auto; padding:0 16px; }
.btn{ max-width:100%; white-space:normal; text-align:center; }