:root{
  --bg:#050308;
  --uv:#7a3bff;
  --cyan:#00ffe1;
  --neon:#39ff14;
  --silver:rgba(200,200,220,0.8);
  --muted:rgba(255,255,255,0.12);
  --glass: rgba(255,255,255,0.03);
  --accent: linear-gradient(90deg,var(--uv),var(--cyan),var(--neon));
  font-synthesis: none;
}
*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#e6f7ff;
  font-family:'Orbitron', 'Share Tech Mono', sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.hidden{display:none}

/* Intro */
#intro{position:relative;height:100vh;overflow:hidden}
#fractalCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro-overlay{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:2rem}
.logo svg{width:110px;height:110px;filter:drop-shadow(0 6px 18px rgba(0,255,200,0.08))}
.title{font-size:56px;letter-spacing:8px;margin:10px 0;color:transparent;background:var(--accent);-webkit-background-clip:text;background-clip:text}
.tagline{opacity:0.92;font-size:18px;margin-bottom:18px}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.08);padding:10px 18px;border-radius:8px;color:#e6f7ff;cursor:pointer;backdrop-filter: blur(6px);}
.btn.ghost{border-style:dashed}
.btn.small{padding:6px 10px;font-size:13px}
.intro-cta .btn{font-weight:700;letter-spacing:1px}

/* Navigation */
.nav-bar{position:fixed;top:18px;left:0;right:0;display:flex;justify-content:space-between;padding:0 32px;z-index:12}
.brand{color:#fff;text-decoration:none;font-weight:900;letter-spacing:2px}
.nav-right{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.nav-right a{color:#bfeef6;text-decoration:none;opacity:0.9}

/* HERO */
#hero{min-height:40vh;padding:80px 3rem 40px;position:relative}
#liveVisualizer{height:260px;border-radius:14px;background:linear-gradient(120deg,rgba(255,255,255,0.02),transparent);box-shadow:0 8px 40px rgba(0,0,0,0.6);}
.hero-copy{margin-top:18px}
.hero-copy h2{font-weight:700}

/* PANELS */
.panel{padding:48px 3rem}
.section-title{font-size:20px;margin-bottom:12px;color:var(--uv);position:relative}
.label-grid{display:grid;grid-template-columns:260px 1fr;gap:20px}
.list{list-style:none;padding:0;margin:0}
.cards{display:flex;gap:12px;flex-wrap:wrap}
.card{width:220px;padding:14px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid rgba(255,255,255,0.04)}

/* SHOP */
.shop-controls{display:flex;justify-content:space-between;align-items:center}
.cat-btn{background:transparent;border:none;color:#cfeff7;padding:8px 10px;border-radius:8px;cursor:pointer}
.cat-btn.active{box-shadow:0 0 18px rgba(122,59,255,0.12);border:1px solid rgba(122,59,255,0.15)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;margin-top:18px}
.product{padding:12px;border-radius:12px;background:linear-gradient(180deg,rgba(10,10,12,0.6),rgba(10,10,12,0.3));border:1px solid rgba(255,255,255,0.03)}
.viewer{margin-top:24px}
.viewer-stage{height:340px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,rgba(255,255,255,0.02),rgba(0,0,0,0.2))}
.viewer-placeholder{opacity:0.65;text-align:center}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 420px;gap:20px}
.about-visual canvas{width:100%;height:260px;border-radius:10px}

/* Footer */
#siteFooter{padding:28px 3rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.2));border-top:1px solid rgba(255,255,255,0.03)}
.footer-grid{display:flex;gap:24px;justify-content:space-between}
.icon{display:inline-block;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);margin-right:6px}
.muted{opacity:0.6;font-size:13px}

/* Responsive */
@media (max-width:900px){
  .label-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .nav-right{display:none}
  .title{font-size:40px}
}

/* subtle chromatic aberration effect for headings */
.section-title::after{content:"";position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,#7a3bff33,#00ffe133);opacity:0.6}