:root{
  --bg: #07040d;
  --bg-soft: #0e0a1a;
  --surface: #120c22;
  --border: #2a1f47;
  --text: #f1edff;
  --text-muted: #a99fc9;
  --accent: #b026ff;
  --accent-2: #ff2ec4;
  --accent-3: #00e5ff;
  --glow: rgba(176,38,255,0.45);
  --radius: 16px;
  --font-display: 'Orbitron', 'Segoe UI', sans-serif;
  --font-body: 'Rajdhani', 'Segoe UI', sans-serif;
}

:root[data-theme="light"]{
  --bg: #f5f3fb;
  --bg-soft: #ffffff;
  --surface: #ffffff;
  --border: #ded6f2;
  --text: #1a1230;
  --text-muted: #5c5478;
  --accent: #8b1fd6;
  --accent-2: #d6169a;
  --accent-3: #0091a8;
  --glow: rgba(139,31,214,0.18);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
  transition: background .25s ease, color .25s ease;
}

.bg-grid{
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .25;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
}

.bg-glow{
  position: fixed; z-index: -1; pointer-events: none;
  top: -20%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 700px; max-width: 180vw;
  background: radial-gradient(circle, var(--glow) 0%, transparent 68%);
  filter: blur(20px);
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 20px;
  max-width: 900px; margin: 0 auto;
}
.topbar-mark{
  display:flex; align-items:center; gap:9px;
  font-family: var(--font-display); font-weight: 900; font-size: 15px;
  letter-spacing: .12em; color: var(--accent);
}
.topbar-logo{
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  box-shadow: 0 0 10px var(--glow);
}
.topbar-controls{ display:flex; align-items:center; gap:10px; }

.pill-btn, .icon-btn{
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.pill-btn{
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .06em;
}
.icon-btn{
  width: 38px; height: 38px; border-radius: 50%; padding: 0; flex-shrink:0;
}
.icon-btn svg{ width: 18px; height: 18px; }
.pill-btn:hover, .icon-btn:hover{
  border-color: var(--accent); color: var(--accent); box-shadow: 0 0 14px var(--glow);
}
.icon-btn .icon-moon{ display:none; }
:root[data-theme="light"] .icon-btn .icon-sun{ display:none; }
:root[data-theme="light"] .icon-btn .icon-moon{ display:block; }

.hero{
  text-align:center;
  padding: 5vh 20px 3vh;
  max-width: 900px; margin: 0 auto;
}

.glitch{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(42px, 12vw, 92px);
  letter-spacing: .06em;
  margin: 0;
  color: var(--text);
  text-shadow:
    0 0 12px var(--glow),
    0 0 40px var(--glow);
  position: relative;
  animation: flicker 6s infinite;
}
.glitch::before, .glitch::after{
  content: attr(data-text);
  position: absolute; left:0; top:0; width:100%;
  clip-path: inset(0 0 0 0);
}
.glitch::before{
  color: var(--accent-2);
  transform: translate(-2px, 0);
  animation: glitch-1 5s infinite linear alternate-reverse;
  opacity: .7;
}
.glitch::after{
  color: var(--accent-3);
  transform: translate(2px, 0);
  animation: glitch-2 4.5s infinite linear alternate-reverse;
  opacity: .7;
}
@keyframes flicker{
  0%,92%,100%{ opacity:1; }
  93%{ opacity:.75; }
  95%{ opacity:1; }
  96%{ opacity:.6; }
  97%{ opacity:1; }
}
@keyframes glitch-1{
  0%{ clip-path: inset(0 0 88% 0); }
  20%{ clip-path: inset(30% 0 45% 0); }
  40%{ clip-path: inset(60% 0 10% 0); }
  60%{ clip-path: inset(10% 0 70% 0); }
  80%{ clip-path: inset(75% 0 5% 0); }
  100%{ clip-path: inset(5% 0 80% 0); }
}
@keyframes glitch-2{
  0%{ clip-path: inset(70% 0 5% 0); }
  25%{ clip-path: inset(10% 0 60% 0); }
  50%{ clip-path: inset(40% 0 35% 0); }
  75%{ clip-path: inset(5% 0 85% 0); }
  100%{ clip-path: inset(55% 0 20% 0); }
}
@media (prefers-reduced-motion: reduce){
  .glitch, .glitch::before, .glitch::after{ animation: none; }
}

.tagline{
  color: var(--text-muted);
  font-size: clamp(15px, 2.4vw, 19px);
  font-weight: 600;
  letter-spacing: .02em;
  margin: 18px 0 0;
}

.links{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
  padding: 2vh 20px 4vh;
}

.card{
  display:flex; flex-direction: column; align-items:center; justify-content:center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 12px;
  min-height: 120px;
  text-decoration: none;
  color: var(--text);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.card:hover, .card:focus-visible{
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 8px 28px var(--glow);
}
.card:active{ transform: translateY(-1px); }

.card-icon{
  width: 46px; height: 46px;
  display:flex; align-items:center; justify-content:center;
  color: var(--accent);
}
.card-icon svg{ width: 100%; height: 100%; }

.card-label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-align: center;
}

.contact{
  text-align:center;
  padding: 3vh 20px 5vh;
  border-top: 1px solid var(--border);
  max-width: 900px; margin: 0 auto;
}
.contact h2{
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin: 0 0 14px;
  text-transform: uppercase;
}
.mail-link{
  display:inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 4vw, 24px);
  color: var(--accent);
  text-decoration: none;
  padding: 10px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.mail-link:hover{
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--glow);
}
.copyright{
  margin: 26px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: .04em;
}

@media (max-width: 420px){
  .links{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card{ padding: 22px 8px; min-height: 104px; }
}