/* SPYD PC BUILDS — Premium theme (Dark Luxury)
   Designed for high visual polish: deep backgrounds, glass panels, subtle neon accent, refined spacing.
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;800&family=Inter:wght@300;400;600;700&display=swap');

:root{
  --bg-900: #05060a;
  --bg-800: #0b0f17;
  --panel: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.03);
  --muted: #9aa8b6;
  --neon1: #7c3aed;
  --neon2: #06b6d4;
  --accent: linear-gradient(90deg,var(--neon1),var(--neon2));
  --radius: 14px;
  --container: 1250px;
  --card-shadow: 0 10px 30px rgba(8,12,20,0.65);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(800px 400px at 10% 10%, rgba(12,18,35,0.5), transparent), var(--bg-900);
  color:#EAF2F9; -webkit-font-smoothing:antialiased;
}

/* container */
.container{max-width:var(--container); margin:0 auto; padding:28px}

/* header / navbar */
.header{position:sticky; top:0; z-index:80; backdrop-filter: blur(8px); background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border-bottom:1px solid rgba(255,255,255,0.02)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 28px}
.brand{display:flex; align-items:center; gap:14px}
.brand img{height:44px}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--muted); font-weight:600; padding:8px 10px; border-radius:10px; transition: all .2s ease}
.nav a:hover{color:var(--neon2); transform:translateY(-2px)}

/* hero */
.hero{display:flex; gap:28px; align-items:center; padding:54px 0}
.hero-left{flex:1; max-width:720px}
.hero h1{font-family:Poppins, Inter, sans-serif; font-size:48px; margin:0; line-height:1.02; background:var(--accent); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.hero p{color:var(--muted); margin-top:12px; font-size:16px}
.cta-row{margin-top:22px; display:flex; gap:12px; align-items:center}
.btn{padding:12px 18px; border-radius:12px; cursor:pointer; border:1px solid rgba(255,255,255,0.04); font-weight:700}
.btn-primary{background:var(--accent); color:#04121a; box-shadow:0 12px 40px rgba(7,12,20,0.6)}
.btn-ghost{background:transparent; color:var(--neon2); border:1px solid rgba(6,182,212,0.08)}

/* hero visual */
.hero-right{width:420px; height:320px; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); display:flex; align-items:center; justify-content:center; box-shadow:var(--card-shadow); border:1px solid rgba(255,255,255,0.03)}

/* section panels */
.panel{background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); padding:22px; margin-bottom:20px; border-radius:12px; border:1px solid rgba(255,255,255,0.02)}

/* grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin-top:16px}

/* product card */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius:12px; padding:14px; border:1px solid rgba(255,255,255,0.03); box-shadow: 0 8px 30px rgba(6,10,18,0.6);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-8px); box-shadow: 0 18px 50px rgba(6,10,18,0.7) }
.card .thumb{height:140px; border-radius:10px; background:linear-gradient(180deg, rgba(12,12,20,0.7), rgba(8,12,18,0.8)); display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid rgba(255,255,255,0.02) }
.card h3{margin:10px 0 6px 0; font-size:18px}
.card .meta{color:var(--muted); font-size:13px}

/* builder layout */
.builder{display:grid; grid-template-columns: 1fr 420px; gap:20px; align-items:start}
.catalog{padding:12px; border-radius:12px}
.part{display:flex; gap:12px; align-items:center; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.02); background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.part .thumb{width:96px; height:76px; border-radius:8px; background:#07131a; display:flex; align-items:center; justify-content:center}

/* sticky summary */
.summary{position:sticky; top:96px; padding:16px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.02); box-shadow: 0 10px 30px rgba(6,10,18,0.65)}

/* messages */
.msg{padding:10px; border-radius:8px; margin-top:10px}
.msg.ok{background:rgba(6,182,212,0.06); border-left:4px solid var(--neon2)}
.msg.warn{background:rgba(250,204,21,0.04); border-left:4px solid #f59e0b}
.msg.err{background:rgba(255,80,80,0.04); border-left:4px solid #ef4444}

/* footer */
.site-footer{padding:28px 0; margin-top:28px; border-top:1px solid rgba(255,255,255,0.02); color:var(--muted); font-size:14px; display:flex; justify-content:space-between; align-items:center}

/* responsive */
@media (max-width:1000px){ .hero{flex-direction:column-reverse} .builder{grid-template-columns:1fr} .hero-right{width:100%; height:220px} }
@media (max-width:640px){ .nav{display:none} }