/* SPYD PC BUILDS - Professional static website styles
   Notes: modern neon theme, responsive layout, subtle animations.
*/

:root{
  --bg:#071022;
  --panel:#0d1722;
  --muted:#98a8b9;
  --glass: rgba(255,255,255,0.04);
  --neon1: #7c3aed;
  --neon2: #06b6d4;
  --accent: linear-gradient(90deg,var(--neon1),var(--neon2));
  --container: 1200px;
  --radius: 12px;
  --glass-2: rgba(255,255,255,0.02);
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(800px 400px at 10% 10%, rgba(12,18,35,0.6), transparent), var(--bg);
  color:#e6eef8; -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
a{color:inherit; text-decoration:none}

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

/* header */
.header{
  position:sticky; top:0; z-index:60;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 28px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:42px}
.nav{display:flex; gap:14px; align-items:center}
.nav a{padding:8px 12px; border-radius:10px; color:var(--muted); font-weight:600}
.nav a:hover{color:var(--neon1)}
.hamburger{display:none; background:transparent; border:none; color:var(--muted)}

/* hero */
.hero{display:flex; gap:24px; align-items:center; padding:48px 0}
.hero-left{flex:1}
.hero h1{font-size:42px; margin:0; letter-spacing:-1px; background:linear-gradient(90deg,var(--neon1),var(--neon2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.hero p{color:var(--muted); margin-top:12px; max-width:620px}
.hero-cta{margin-top:20px; display:flex; gap:12px}
.btn{padding:10px 16px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); cursor:pointer; font-weight:700}
.btn-primary{background:var(--accent); color:#021425; box-shadow:0 8px 30px rgba(124,58,237,0.12)}
.btn-ghost{background:transparent; color:var(--neon2); border:1px solid rgba(6,182,212,0.08)}

/* hero-right - decorative */
.hero-right{width:360px; height:240px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.03)}

/* cards */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-top:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.02)}

/* features */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px}

/* builder layout */
.builder-wrap{display:grid; grid-template-columns:1fr 380px; gap:18px; margin-top:18px}
.catalog{background:var(--panel); padding:12px; border-radius:10px; border:1px solid var(--glass)}

/* part item */
.part{display:flex; gap:12px; align-items:center; padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,0.02); background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.part-thumb{width:84px; height:64px; background:#071522; display:flex; align-items:center; justify-content:center; border-radius:6px}
.part h4{margin:0; font-size:15px}
.part .meta{color:var(--muted); font-size:13px}

/* summary */
.summary{position:sticky; top:90px; background:var(--panel); padding:12px; border-radius:10px; border:1px solid var(--glass)}

/* 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:24px 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:980px){
  .features{grid-template-columns:repeat(2,1fr)}
  .builder-wrap{grid-template-columns:1fr}
  .hero{flex-direction:column-reverse}
}
@media (max-width:640px){
  .nav{display:none}
  .hamburger{display:block}
  .hero h1{font-size:28px}
  .features{grid-template-columns:1fr}
  .hero-right{width:100%; height:160px}
}
/* small helpers */
.muted{color:var(--muted); font-size:13px}
.small{font-size:13px}
.center{display:flex; align-items:center; gap:8px}