:root{
  --bg:#0b0b12;
  --bg2:#141428;
  --grid: rgba(255,255,255,.06);
  --text:#f1f3ff;
  --muted:#a7abcf;
  --neon:#00e0ff;
  --neon2:#ff00f7;
  --accent:#00ffd5;
  --shadow: 0 14px 40px rgba(0,224,255,.18);
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(0,224,255,.10), transparent 60%),
    radial-gradient(1000px 600px at -20% 120%, rgba(255,0,247,.08), transparent 50%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

/* layers */
.bg-layers .stars{
  position:fixed; inset:0; pointer-events:none; opacity:.6;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 85% 60%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1.5px 1.5px at 10% 80%, rgba(255,255,255,.8), transparent 60%);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35));
}
.bg-layers .scanlines{
  position:fixed; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.06) 0px,
    rgba(255,255,255,.06) 1px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: soft-light; opacity:.08; animation: flicker 6s infinite;
}
@keyframes flicker{ 0%,100%{opacity:.08} 45%{opacity:.18} 50%{opacity:.26} 70%{opacity:.2} }

.wrap{ width:min(860px, 92vw); margin: 0 auto; padding: 24px 0 72px; }

/* hero */
.hero{ text-align:center; padding: 84px 16px 48px; position:relative; }
.brand{
  font-family:"Orbitron", sans-serif;
  font-size: clamp(36px, 8vw, 64px);
  letter-spacing:.02em;
  background: linear-gradient(90deg, var(--neon), var(--neon2));
  -webkit-background-clip:text; background-clip:text; color: transparent;
  text-shadow: 0 0 20px rgba(0,224,255,.35);
  margin: 8px 0 8px;
}
.tagline{ color:var(--muted); margin: 4px auto 18px; max-width: 620px; }

.avatar{
  width: 120px; height: 120px; margin: 0 auto 14px; position:relative;
}
.avatar .ring{
  position:absolute; inset:-6px; border-radius:50%;
  background: conic-gradient(from 0deg, var(--neon), var(--neon2), var(--neon));
  filter: blur(6px); opacity:.7;
}
.avatar .blob{
  position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 40%);
  backdrop-filter: blur(4px);
  border: 1px solid var(--grid);
}
.avatar .pfp{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family: "Press Start 2P", monospace; color:#fff; font-size: 28px;
}

.marquee{
  margin: 20px auto 0; overflow:hidden; border-top:1px dashed var(--grid); border-bottom:1px dashed var(--grid);
}
.marquee .track{ display:flex; gap: 40px; will-change: transform; animation: marquee 26s linear infinite; }
.marquee span{ padding: 10px 0; color:#cfe9ff; text-shadow: 0 0 6px rgba(255,0,247,.35); }
@keyframes marquee{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

.cta-row{ display:flex; justify-content:center; gap:12px; margin-top: 14px; }
.btn{
  display:inline-block; padding: 12px 18px; border-radius: 12px; font-weight:700; text-decoration:none;
  border: 1px solid var(--grid); color: var(--text); background: rgba(255,255,255,.02);
}
.btn.glow{ background: linear-gradient(90deg, var(--neon), var(--accent)); color:#0b0b12; border:0; box-shadow: var(--shadow); }
.btn.ghost:hover{ background: rgba(255,255,255,.06) }

/* links */
.links{
  display:grid; gap: 12px; grid-template-columns: 1fr; padding: 24px 16px;
}
.link-tile{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 16px 18px; border-radius: 14px;
  text-decoration:none; color:var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  border: 1px solid var(--grid);
  transition: transform .15s ease, box-shadow .2s ease;
}
.link-tile small{ color: var(--muted) }
.link-tile:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }

/* gallery */
.gallery{
  display:grid; gap: 16px; grid-template-columns: repeat(12, 1fr);
  padding: 12px 16px 8px;
}
.card{ grid-column: span 4; background: rgba(255,255,255,.02); border:1px solid var(--grid); border-radius: 16px; overflow:hidden; }
.card .frame{ aspect-ratio: 3/1.8; background: #101020; display:block; }
.card h3{ margin: 12px 14px 4px; font-family:"Orbitron", sans-serif; }
.card p{ margin: 0 14px 16px; color: var(--muted); }
@media (max-width: 980px){ .card{ grid-column: span 6 } }
@media (max-width: 640px){ .card{ grid-column: span 12 } }

/* about & contact */
.about, .contact{ padding: 24px 16px; text-align:center; }
.about h2, .contact h2{ font-family:"Orbitron", sans-serif; margin-bottom: 6px; }
.about p{ color: var(--muted); max-width: 680px; margin: 0 auto; }
.contact p{ color: var(--muted); margin-top: 0; }

.footer{ text-align:center; color: var(--muted); padding: 20px 0 60px; }

.design {
  position: relative;
  color: var(--text-primary);
}

.design::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--accent-primary);
  transition: width 0.3s ease;
}

.design:hover::after {
  width: 100%;
}


/* sparkle cursor */
.sparkle{
  position: fixed; width: 10px; height: 10px; border-radius: 50%;
  pointer-events: none; background: radial-gradient(circle, #fff, rgba(255,255,255,0) 70%);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.7));
  opacity: 0; transform: translate(-50%, -50%) scale(.8);
  animation: sparkle .8s ease-out forwards;
}
@keyframes sparkle{ 0%{ opacity:.9; transform: translate(-50%,-50%) scale(1) } 70%{ opacity:.35 } 100%{ opacity:0; transform: translate(-50%,-50%) scale(0) } }