:root{
  --bg: #0b0b12;
  --bg-elev: #121225;
  --text: #f5f7ff;
  --muted: #a6acd3;
  --brand: #7c5cff;
  --brand-2: #00e2ff;
  --card: #161630;
  --border: rgba(255,255,255,.08);
  --shadow: rgba(0,0,0,.4);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body {
  background: linear-gradient(to bottom, #1e1e2f 0%, #1e1e2f 50%, #2a2a3f 50%, #2a2a3f 100%);
  transition: background 0.5s ease-in-out;
  scroll-behavior: smooth;
  color: var(--text);
  font: 500 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

h1, h2, h3 { color: var(--text); margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }

.container{
  width: min(1100px, 92%);
  margin-inline: auto;
}

.small { font-size: .9rem; }
.muted{ color: var(--muted); }

/* Skip link */
.skip-link{
  position: absolute; left: -9999px; top: auto;
}
.skip-link:focus{
  left: 1rem; top: 1rem; z-index: 1000;
  background: var(--brand); color: #0b0b12; padding: .5rem .75rem; border-radius: .5rem;
}

/* Header / Nav */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 90%, black 10%);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.nav-row{
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
}
.brand{
  font-weight: 800; letter-spacing: .5px; font-size: 1.1rem;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav{
  display: flex; gap: 1rem;
}
.nav a{
  padding: .5rem .75rem; border-radius: .5rem; color: var(--muted);
}
.nav a:hover{ color: var(--text); background: rgba(255,255,255,.04); }

.nav-toggle{
  display: none; background: transparent; border: 0; padding: .5rem; cursor: pointer;
}
.nav-toggle .bar{ display: block; width: 22px; height: 2px; margin: 4px 0; background: var(--text); }

@media (max-width: 800px){
  .nav-toggle{ display: inline-block; }
  .nav{ position: absolute; right: 4%; top: 64px; flex-direction: column; background: var(--bg-elev);
        border: 1px solid var(--border); padding: .5rem; border-radius: .75rem; display: none; }
  .nav.open{ display: flex; }
}

/* Sections */
.section {
  position: relative;
  min-height: 100vh;
  padding: 4rem 0;
  z-index: 1;
}
.section::before {
  content: "";
  position: absolute; inset: 0;
  background: inherit;
  z-index: -2; /* Ensure it stays behind all other elements */
}

/* Hero */
.hero-inner{ text-align: center; }
.headline{
  font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
}
.subhead{ color: var(--muted); margin: 0 auto 1.5rem; max-width: 60ch; }
.cta-row{ display: inline-flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* Buttons */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.1rem; border-radius: .75rem; border: 1px solid var(--border);
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  font-weight: 700;
}
.btn-primary{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #0a0a12; border-color: transparent;
  box-shadow: 0 10px 30px -12px var(--shadow);
}
.btn-primary:hover{ transform: translateY(-1px) scale(1.02); }
.btn-ghost{
  background: rgba(255,255,255,.04); color: var(--text);
}
.btn-ghost:hover{ background: rgba(255,255,255,.08); }

/* Magnetic wrapper ensures movement space without layout shift */
.magnet-wrap{ display: inline-block; padding: 8px; }
.magnet{ will-change: transform; }

/* Cards / grids */
.grid{
  display: grid; gap: 1rem;
  grid-template-columns: repeat(12, 1fr);
}
.cards > .card{
  grid-column: span 6;
  background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 10px 30px -10px var(--shadow);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.cards > .card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--brand) 40%, var(--border) 60%);
}
.cards > .card h3{ margin: 0 0 .25rem; }

@media (max-width: 900px){
  .cards > .card{ grid-column: span 12; }
}

/* Repos */
.repos{ grid-template-columns: repeat(12, 1fr); }
.repo-card{
  grid-column: span 6;
  background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
  padding: 1rem; display: grid; gap: .5rem;
}
.repo-title{ font-weight: 800; }
.repo-meta{ color: var(--muted); font-size: .9rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.repo-desc{ color: var(--text); opacity: .9; }
.repo-link{ color: var(--text); }
.repo-link:hover{ text-decoration: underline; }

@media (max-width: 900px){
  .repo-card{ grid-column: span 12; }
}

/* RNG */
.rng-wrap{ text-align: center; }
.rng-display{
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 2rem + 3vw, 4rem);
  background: #111224; border: 1px solid var(--border); border-radius: 1rem;
  padding: 1rem 1.25rem; display: inline-block; min-width: 10ch;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
#rng-value{ display: inline-block; min-width: 6ch; }

/* RNG pulse while spinning */
#rng-value.pulse {
  animation: pulse 0.45s ease-in-out infinite alternate;
  text-shadow: 0 0 12px rgba(124, 92, 255, 0.6);
}
@keyframes pulse {
  from { opacity: .7; transform: scale(0.995); }
  to   { opacity: 1; transform: scale(1.01); }
}

/* Username tool */
.taken-username-fix { margin-top: 2rem; }
.username-input{
  width: 100%;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: .75rem;
  padding: .8rem 1rem; margin-bottom: .75rem;
}
.generated-username-container{
  margin-top: .75rem; display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.04); padding: .5rem .75rem; border-radius: .5rem;
}
.generated-username{ font-weight: 800; letter-spacing: .2px; }
.clear-button{ margin-top: .75rem; }

/* Reveal animation */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.reveal-visible{ opacity: 1; transform: translateY(0); }

/* Footer */
.site-footer{
  border-top: 1px solid var(--border);
  background: #0a0a14;
}
.footer-row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0;
}
.top-link{ color: var(--muted); }
.top-link:hover{ color: var(--text); }

/* Utility */
.noscript{
  margin: 1rem; padding: .75rem 1rem; border-radius: .5rem;
  background: #2d1a1a; border: 1px solid #553; color: #ffdddd;
}

/* Small polish for focus */
a:focus, button:focus, input:focus{
  outline: 2px solid color-mix(in oklab, var(--brand) 60%, white 40%);
  outline-offset: 2px;
}

/* Modal styles */
.modal {
  display: none;
}

.modal.hidden {
  display: none;
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}