:root{
  --bg:#0b0f1a; /* deep cosmos */
  --ink:#e7f0ff; /* soft starlight */
  --glow:#7df9ff; /* electric cyan */
  --halo:#ffc6ff; /* pink halo */
  --accent:#9fffb9; /* mint */
  --grid:#2a3350; /* scanline/grid */
  --stars-opacity: 1;
  --stars-speed: 180s;        /* slower drift feels more “cosmic” */
  --stars-twinkle: 4s;        /* faster sparkle */
  --scanlines-opacity: .28;
  --scanlines-contrast: 1.35;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55; letter-spacing:.2px; overflow-x:hidden;
}

/* === starfield + shimmer background === */
.sky{
  position:fixed; inset:0; pointer-events:none; z-index:-2;
  background:
  radial-gradient(1200px 800px at 30% 10%, rgba(125,249,255,.20), transparent 70%),
  radial-gradient(900px 700px at 80% 30%, rgba(255,198,255,.15), transparent 70%),
  radial-gradient(700px 600px at 50% 80%, rgba(159,255,185,.10), transparent 70%),
  linear-gradient(180deg, #0b0f1a 0%, #0c1020 35%, #070b15 100%);
}


.stars,
.stars::before,
.stars::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* Main star layer (includes some BIG ones) */
.stars {
  background:
  /* big bright stars */
  radial-gradient(8px 8px at 20% 15%, rgba(255,255,255,.95), transparent 70%),
  radial-gradient(6px 6px at 70% 35%, rgba(255,255,255,.85), transparent 70%),
  radial-gradient(5px 5px at 40% 80%, rgba(255,255,255,.9), transparent 70%),
  /* medium stars */
  radial-gradient(3px 3px at 15% 60%, rgba(255,255,255,.75), transparent 70%),
  radial-gradient(2.5px 2.5px at 85% 50%, rgba(255,255,255,.7), transparent 70%),
  /* tiny filler stars */
  radial-gradient(1.5px 1.5px at 55% 25%, rgba(255,255,255,.6), transparent 70%),
  radial-gradient(1px 1px at 90% 70%, rgba(255,255,255,.55), transparent 70%);
  animation: driftA 120s linear infinite, twinkle .24s ease-in-out infinite;
  opacity: .9;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.4));
}

/* Second parallax layer */
.stars::before {
  background:
  radial-gradient(7px 7px at 30% 20%, rgba(255,255,255,.65), transparent 70%),
  radial-gradient(4px 4px at 65% 75%, rgba(255,255,255,.6), transparent 70%),
  radial-gradient(2px 2px at 45% 45%, rgba(255,255,255,.55), transparent 70%);
  filter: blur(0.6px);
  animation: driftB 160s linear infinite reverse, twinkle .7s ease-in-out infinite;
  opacity: .75;
}

/* Third far-away layer */
.stars::after {
  background:
  radial-gradient(5px 5px at 80% 15%, rgba(255,255,255,.6), transparent 70%),
  radial-gradient(3px 3px at 25% 70%, rgba(255,255,255,.55), transparent 70%),
  radial-gradient(1.5px 1.5px at 10% 40%, rgba(255,255,255,.5), transparent 70%);
  animation: driftC 200s linear infinite, twinkle 1.2s ease-in-out infinite;
  opacity: .6;
}

@keyframes driftA { to { transform: translate3d(10vw, 8vh, 0); } }
@keyframes driftB { to { transform: translate3d(-8vw, -5vh, 0); } }
@keyframes driftC { to { transform: translate3d(5vw, 12vh, 0); } }

@keyframes twinkle {
  0%, 100% { filter: brightness(.9); }
  50% { filter: brightness(1); }
}


/* ==== SCANLINES (retro but visible) ==== */
.scanlines{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* thicker pattern so it actually reads */
  background:
  repeating-linear-gradient(
  to bottom,
  rgba(255,255,255, calc(.04 * var(--scanlines-contrast))) 0px,
  rgba(255,255,255, calc(.04 * var(--scanlines-contrast))) 4px,
  rgba(0,0,0,       calc(.06 * var(--scanlines-contrast))) 5px,
  rgba(0,0,0,       calc(.06 * var(--scanlines-contrast))) 4px
  );
  mix-blend-mode: overlay;   /* try overlay if you want stronger */
  opacity: var(--scanlines-opacity);
}

/* Respect user motion/accessibility */
@media (prefers-reduced-motion: reduce){
  .stars, .stars::before, .stars::after { animation: none; }
}

/* layout */
header{ padding: clamp(24px, 6vw, 56px) 24px 12px; text-align:center; }
main{ max-width: 950px; margin: 0 auto; padding: 0 20px 96px; }

/* logo + headline */
.mark{ display:inline-block; width:min(56vmin,420px); aspect-ratio:1; margin: 8px auto 12px; filter: drop-shadow(0 0 12px rgba(125,249,255,.45)) drop-shadow(0 0 28px rgba(255,198,255,.25)); }
.title{ font-family:"Press Start 2P", monospace; font-size: clamp(18px, 3.8vw, 34px); letter-spacing:2px; margin:6px 0 12px; text-transform:uppercase; text-shadow:0 0 18px rgba(125,249,255,.25), 0 0 2px rgba(255,255,255,.9);
  background: linear-gradient(90deg, var(--glow), var(--halo), var(--accent), var(--glow));
  -webkit-background-clip:text; background-clip:text; color:transparent; background-size: 300% 100%;
  animation: shimmer 12s linear infinite;
}
@keyframes shimmer{ to{ background-position: -300% 0; } }
.tag{ font-weight:600; opacity:.9; letter-spacing:.3px; margin-bottom: 18px; }

/* cards */
.grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.card{
  position:relative; padding:18px 18px 20px; border-radius:18px; background: rgba(18,24,42,.42);
  border:1px solid rgba(125,249,255,.25);
  box-shadow: 0 0 0 1px rgba(255,198,255,.15) inset, 0 10px 30px rgba(0,0,0,.4);
  backdrop-filter: blur(6px) saturate(120%);
}
.card h2{
  font-size: 18px; margin:0 0 6px; font-weight:800;
  text-shadow:0 0 12px rgba(127,255,212,.25);
}
.card p{ margin:0; opacity:.92; }

/* retro buttons */
.buttons{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:22px 0 8px; }
.btn{
  --b:1px; --r:16px; --pad:12px 18px;
  display:inline-flex; align-items:center; gap:10px; padding:var(--pad); border-radius: var(--r); text-decoration:none; color:var(--ink);
  border:var(--b) solid var(--glow); background: rgba(125,249,255,.10);
  box-shadow:0 0 0 2px rgba(255,198,255,.12) inset, 0 8px 22px rgba(0,0,0,.35), 0 0 18px rgba(125,249,255,.18);
  font-weight:700; letter-spacing:.3px; transition:.2s transform, .3s box-shadow, .3s background;
}
.btn:hover{ transform:translateY(-2px); background: rgba(125,249,255,.16); box-shadow:0 0 0 2px rgba(255,198,255,.18) inset, 0 14px 28px rgba(0,0,0,.45), 0 0 26px rgba(125,249,255,.25); }
.btn.secondary{ border-color: var(--halo); background: rgba(255,198,255,.10); }

/* footer */
footer{ max-width: 900px; margin: 24px auto 56px; padding: 0 20px; text-align:center; opacity:.8; font-size:14px; }

/* tiny utilities */
.mono{ font-family:"Press Start 2P", monospace; font-size: 12px; letter-spacing:1px; }
.center{ text-align:center; }
.muted{ opacity:.75; }
.divider{ height:1px; background:linear-gradient(90deg, transparent, rgba(125,249,255,.4), transparent); margin: 22px 0; opacity:.65; }

/* responsive spacing tweaks */
section{ margin: 18px 0; }


/* Logo container adds perspective for 3D tilt */
.logo-wrap{
  perspective: 1200px;
  display: flex;
  justify-content: center;
  opacity: .5;
}

/* Animate the external SVG image itself */
.mark.tesseract{
  width: min(56vmin, 420px);
  aspect-ratio: 1;
  display: block;
  filter: drop-shadow(0 0 12px rgba(125,249,255,.45)) drop-shadow(0 0 28px rgba(255,198,255,.25));
  will-change: transform;
  animation: tesseractMotion 20s linear infinite;
}

/* Combined spin + gentle 3D wobble + side-to-side roll (stays in view) */
@keyframes tesseractMotion{
  0%   { transform: translateX(-6vw) rotateZ(0deg)   rotateX(10deg) rotateY(0deg); }
  12.5%{ transform: translateX(-3vw) rotateZ(45deg)  rotateX(18deg) rotateY(-10deg); }
  25%  { transform: translateX(0vw)  rotateZ(90deg)  rotateX(12deg) rotateY(8deg); }
  37.5%{ transform: translateX(3vw)  rotateZ(135deg) rotateX(20deg) rotateY(-6deg); }
  50%  { transform: translateX(6vw)  rotateZ(180deg) rotateX(10deg) rotateY(12deg); }
  62.5%{ transform: translateX(3vw)  rotateZ(225deg) rotateX(18deg) rotateY(-8deg); }
  75%  { transform: translateX(0vw)  rotateZ(270deg) rotateX(14deg) rotateY(6deg); }
  87.5%{ transform: translateX(-3vw) rotateZ(315deg) rotateX(20deg) rotateY(-4deg); }
  100% { transform: translateX(-6vw) rotateZ(360deg) rotateX(10deg) rotateY(0deg); }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce){
  .mark.tesseract{ animation: none; }
}


.logo-wrap { position: relative; display: flex; justify-content: center; perspective: 1200px; }
.illo { filter: drop-shadow(0 0 12px rgba(125,249,255,.45)) drop-shadow(0 0 28px rgba(255,198,255,.25)); }