:root{
  --bg:#050014;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.55);
  --line: rgba(255,255,255,.16);

  --pink:#ff2bd6;
  --cyan:#00e5ff;
  --purple:#8b5cff;
  --orange:#ff8a00;
  --yellow:#ffd36a;

  --radius: 22px;
  --shadow: 0 26px 110px rgba(0,0,0,.65);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,43,214,.22), transparent 60%),
    radial-gradient(820px 480px at 90% 20%, rgba(0,229,255,.18), transparent 55%),
    radial-gradient(760px 520px at 70% 95%, rgba(255,138,0,.12), transparent 55%),
    linear-gradient(180deg, #03000b, var(--bg));
  overflow-x:hidden;
}
.wrap{ max-width: 1040px; margin:0 auto; padding:0 20px; }

/* Extra retro font for headings/meta */
.h2, .pill, .meta{
  font-family: "Press Start 2P", system-ui, sans-serif;
}

/* CRT vibes */
.crt{ text-shadow: 0 0 1px rgba(0,229,255,.20), 0 0 1px rgba(255,43,214,.18); }
.vignette{
  position: fixed; inset:0;
  pointer-events:none;
  background: radial-gradient(circle at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
  opacity: .55;
  z-index: 4;
}
.scanlines{
  position: fixed; inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03),
    rgba(255,255,255,.03) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 7px
  );
  mix-blend-mode: overlay;
  opacity: .22;
  z-index: 2;
}
.noise{
  position: fixed; inset:0;
  pointer-events:none;
  background-image: url("assets/noise.svg");
  opacity: .18;
  mix-blend-mode: overlay;
  z-index: 3;
}
.starfield{
  position: fixed; inset:0;
  pointer-events:none;
  background-image: url("assets/stars.svg");
  background-size: cover;
  opacity: .35;
  z-index: 1;
  animation: drift 40s linear infinite;
}
@keyframes drift{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-3%, 2%, 0); }
}

/* top */
.top{
  position: sticky; top:0; z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(5,0,20,.62);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.top__inner{
  height: 66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--text); font-weight: 900; letter-spacing:.25px; }
.logo__text{ text-shadow: 0 0 18px rgba(0,229,255,.25); }
.mark{
  width: 16px; height: 16px; border-radius: 6px;
  background: linear-gradient(135deg, var(--pink), var(--cyan));
  box-shadow: 0 0 18px rgba(255,43,214,.35), 0 0 22px rgba(0,229,255,.25);
}
.mark--small{ width: 14px; height: 14px; border-radius: 5px; }

.nav{ display:flex; gap:10px; align-items:center; }
.nav a{
  color: var(--muted);
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 10px;
  border-radius: 999px;
}
.nav a:hover{ background: rgba(255,255,255,.06); color: var(--text); }

.burger{ display:none; border:0; background:transparent; padding:10px; border-radius:14px; }
.burger:hover{ background: rgba(255,255,255,.06); }
.burger span{ display:block; width:22px; height:2px; background: var(--text); margin:5px 0; border-radius:99px; opacity:.8; }
.mnav{ padding: 10px 20px 14px; border-top: 1px solid rgba(255,255,255,.10); }
.mnav a{ display:block; padding: 12px 12px; border-radius: 14px; text-decoration:none; font-weight:900; color: var(--text); }
.mnav a:hover{ background: rgba(255,255,255,.06); }

/* buttons + glitch */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  text-decoration:none;
  font-weight: 900;
  cursor:pointer;
  color: #020014;
  background: linear-gradient(135deg, var(--pink), var(--cyan));
  box-shadow: 0 0 24px rgba(255,43,214,.22), 0 0 40px rgba(0,229,255,.15);
  position: relative;
}
.btn:hover{ transform: translateY(-1px); }
.btn.ghost{
  background: rgba(255,255,255,.06);
  color: var(--text);
  box-shadow:none;
}
.btn.small{ padding: 10px 14px; font-size: 13px; }
.glitch::before, .glitch::after{
  content: "";
  position:absolute; inset:-2px;
  border-radius: 999px;
  opacity: 0;
  pointer-events:none;
}
.glitch:hover::before{
  opacity: .45;
  border: 1px solid rgba(0,229,255,.55);
  box-shadow: 0 0 18px rgba(0,229,255,.25);
  animation: glitch 0.35s steps(2,end) infinite;
}
.glitch:hover::after{
  opacity: .35;
  border: 1px solid rgba(255,43,214,.55);
  box-shadow: 0 0 18px rgba(255,43,214,.22);
  animation: glitch2 0.35s steps(2,end) infinite;
}
@keyframes glitch{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(2px,-1px); }
  50%{ transform: translate(-2px,1px); }
  75%{ transform: translate(1px,2px); }
  100%{ transform: translate(0,0); }
}
@keyframes glitch2{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(-2px,1px); }
  50%{ transform: translate(2px,-1px); }
  75%{ transform: translate(-1px,-2px); }
  100%{ transform: translate(0,0); }
}

/* hero */
.hero{
  position:relative;
  padding: 76px 0 18px;
  overflow:hidden;
}
.hero__inner{ position:relative; z-index:5; }
.pill{
  display:inline-flex;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .14em;
}
.title{
  margin: 16px 0 10px;
  font-size: clamp(2.8rem, 5.6vw, 4.4rem);
  letter-spacing: -.05em;
  line-height: 1.02;
}
.chrome{
  background: linear-gradient(180deg, #ffffff, #b2b8ff 22%, #ff7adf 55%, #00f7ff 85%);
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
  text-shadow: 0 0 22px rgba(255,43,214,.15), 0 0 30px rgba(0,229,255,.10);
}
.lead{ color: var(--muted); line-height: 1.7; max-width: 75ch; }
.cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }

.hero__bar{ margin-top: 18px; display:flex; flex-wrap:wrap; gap: 10px; }
.tagbtn{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration:none;
}
.tagbtn:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }
.fine{ margin-top: 12px; color: var(--muted2); font-size: 12px; }

/* synth sun + grid */
.sun{
  position:absolute;
  width: 520px; height: 520px;
  left: 55%;
  top: -260px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle at 50% 40%, rgba(255,211,106,.55), rgba(255,43,214,.35) 45%, rgba(0,229,255,.18) 70%, transparent 75%);
  opacity: .9;
  z-index:1;
}
.grid{
  position:absolute;
  left:0; right:0; bottom:-40px;
  height: 380px;
  background:
    linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)),
    repeating-linear-gradient(to right, rgba(0,229,255,.18), rgba(0,229,255,.18) 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(to top, rgba(255,43,214,.16), rgba(255,43,214,.16) 1px, transparent 1px, transparent 32px);
  transform: perspective(520px) rotateX(62deg);
  transform-origin: bottom;
  opacity: .55;
  z-index: 0;
}

/* headings */
.h2{
  margin:0 0 8px;
  font-size: 22px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sub{ margin:0 0 18px; color: var(--muted); line-height: 1.6; }

/* story panels */
.story{ padding: 58px 0 10px; position:relative; z-index:5; }
.panel{
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 56px 0;
}
.panel__inner{ position:relative; z-index:5; }
.meta{
  display:inline-flex;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  letter-spacing: .14em;
  font-size: 11px;
}
.panel h3{ margin: 12px 0 8px; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.02em; font-family: Inter, system-ui, sans-serif; }
.panel p{ margin: 0; color: var(--muted); line-height: 1.7; font-size: 16px; max-width: 78ch; }
.tags{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 12px; }
.tags span{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 800;
  color: rgba(255,255,255,.86);
  font-size: 13px;
}
.p1{ background: linear-gradient(180deg, rgba(0,229,255,.06), transparent); }
.p2{ background: linear-gradient(180deg, rgba(255,43,214,.07), transparent); }
.p3{ background: linear-gradient(180deg, rgba(255,138,0,.06), transparent); }
.p4{ background: linear-gradient(180deg, rgba(139,92,255,.07), transparent); }
.p5{ background: linear-gradient(180deg, rgba(255,211,106,.06), transparent); }

/* examples */
.examples{ padding: 58px 0; border-top: 1px solid rgba(255,255,255,.12); position:relative; z-index:5; }
.examples__grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.ex{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.16);
  padding: 14px;
  text-decoration:none;
  color: var(--text);
  min-height: 170px;
  box-shadow: var(--shadow);
  transition: transform .15s ease;
  background: rgba(255,255,255,.06);
}
.ex:hover{ transform: translateY(-2px); }
.ex__top{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 900;
  letter-spacing: .12em;
  font-size: 12px;
}
.ex__title{ margin-top: 10px; font-weight: 900; }
.ex__desc{ margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ex1{ box-shadow: 0 0 26px rgba(0,229,255,.12); }
.ex2{ box-shadow: 0 0 26px rgba(255,43,214,.12); }
.ex3{ box-shadow: 0 0 26px rgba(255,138,0,.10); }
.ex4{ box-shadow: 0 0 26px rgba(255,211,106,.10); }

/* contact */
.contact{ padding: 58px 0 30px; border-top: 1px solid rgba(255,255,255,.12); position:relative; z-index:5; }
.contact__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.k{ color: var(--muted2); font-weight: 900; font-size: 12px; letter-spacing:.08em; text-transform: uppercase; }
.v{ font-weight: 900; font-size: 16px; margin-top: 6px; }
.alink{ color: rgba(255,255,255,.92); text-decoration:none; border-bottom: 1px solid rgba(255,255,255,.20); }
.alink:hover{ border-bottom-color: rgba(0,229,255,.55); }
.mini{ color: var(--muted2); font-size: 12px; line-height: 1.45; margin-top: 10px; }
.actions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }

.pre{
  white-space: pre-wrap;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 12px;
  margin: 10px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: rgba(255,255,255,.90);
}

/* footer */
.footer{
  margin-top: 32px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
  color: var(--muted2);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 18px;
}
.footer__left{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }
.sep{ opacity: .6; }
.footer__right a{
  color: var(--muted);
  text-decoration:none;
  font-weight: 900;
  font-size: 13px;
  padding: 10px 10px;
  border-radius: 999px;
}
.footer__right a:hover{ background: rgba(255,255,255,.06); color: var(--text); }

@media (max-width: 980px){
  .examples__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .contact__grid{ grid-template-columns: 1fr; }
  .sun{ left: 50%; }
}
@media (max-width: 760px){
  .nav{ display:none; }
  .burger{ display:block; }
  .examples__grid{ grid-template-columns: 1fr; }
}