@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500;700&display=swap');

:root{
  --black:#0a090c;
  --paper:#d6d0c0;
  --pink:#ff2f9e;
  --hotpink:#ff63bd;
  --cyan:#65e6df;
  --crt:#79ffd9;
  --purple:#7055b8;
  --deep:#241a3d;
  --sun1:#ffb84d;
  --sun2:#ff3d7f;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--black);
  color:var(--paper);
  font-family:"IBM Plex Mono",monospace;
  overflow-x:hidden;
}
/* grain overlay */
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.09;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#000 3px),
             radial-gradient(#fff .6px,transparent .8px);
  background-size:auto,4px 4px;
  mix-blend-mode:overlay;
}
h1,h2{font-family:"Archivo Black",sans-serif;margin:0}
i{font-style:normal}

/* ---------- TOP NAV ---------- */
.topnav{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:22px 4vw;border-bottom:3px solid var(--pink);
  background:linear-gradient(180deg,#141018,var(--black));
  position:relative;z-index:20;
}
.brand-name{
  font-family:"Archivo Black",sans-serif;font-size:34px;line-height:.85;
  letter-spacing:-1px;color:var(--paper);
  text-shadow:3px 3px 0 var(--pink),-2px -2px 0 var(--cyan);
  display:block;
}
.brand-sub{display:block;font-size:9px;letter-spacing:2px;color:var(--cyan);margin-top:8px}
nav{display:flex;gap:26px;align-self:center}
nav a{color:var(--paper);text-decoration:none;font-size:11px;font-weight:700;letter-spacing:1px;position:relative;padding-bottom:4px}
nav a.active{color:var(--pink)}
nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--pink)}
nav a:hover{color:var(--cyan)}
.side-label{font-size:9px;line-height:1.7;letter-spacing:2px;text-align:right;color:var(--paper);opacity:.7}

/* ---------- HERO ---------- */
.hero{position:relative;padding:6vw 4vw 4vw;overflow:hidden}
.hero-list{
  position:absolute;left:4vw;top:6vw;z-index:15;font-size:12px;font-weight:700;
  letter-spacing:2px;line-height:2.4;color:var(--paper);
}
.hero-list div{text-shadow:1px 1px var(--purple)}

.scene{
  position:relative;height:52vw;max-height:640px;min-height:380px;
  margin:0 auto;border:4px solid var(--black);border-radius:2px;overflow:hidden;
  box-shadow:0 0 0 2px var(--pink),0 0 40px rgba(255,47,158,.25);
}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,#2a1a45 0%,#5b2f7a 30%,#c94a8f 55%,#ff8a6b 72%,#241a3d 100%)}
.sun{
  position:absolute;left:50%;top:22%;width:34%;padding-bottom:34%;transform:translate(-50%,-20%);
  border-radius:50%;
  background:repeating-linear-gradient(to bottom,var(--sun1) 0 8px,var(--sun2) 9px 13px);
  box-shadow:0 0 80px var(--sun2);
}
.mountains{
  position:absolute;left:0;right:0;bottom:32%;height:22%;
  background:
    linear-gradient(135deg,transparent 48%,#1c1330 49%) 0 0/22% 100%,
    linear-gradient(225deg,transparent 48%,#1c1330 49%) 10% 0/22% 100%,
    linear-gradient(135deg,transparent 48%,#150e26 49%) 40% 20%/26% 80%,
    linear-gradient(225deg,transparent 48%,#150e26 49%) 55% 20%/26% 80%,
    linear-gradient(135deg,transparent 48%,#1c1330 49%) 70% 0/24% 100%,
    linear-gradient(225deg,transparent 48%,#1c1330 49%) 82% 0/24% 100%;
  opacity:.9;
}
.sea{position:absolute;left:0;right:0;bottom:0;height:32%;background:linear-gradient(180deg,#3a2050,#160c22)}
.grid{
  position:absolute;left:-20%;right:-20%;bottom:0;height:34%;
  background-image:
    linear-gradient(rgba(255,99,189,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,99,189,.55) 1px,transparent 1px);
  background-size:8% 100%,100% 12%;
  transform:perspective(200px) rotateX(55deg);
  transform-origin:bottom;
  mask-image:linear-gradient(to top,#000 60%,transparent);
}
.palm{position:absolute;bottom:8%;font-size:70px;filter:brightness(0) saturate(0) opacity(.85);z-index:5}
.palm-l{left:2%;transform:scaleX(-1) rotate(-6deg)}
.palm-r{right:36%;transform:rotate(4deg);font-size:50px;bottom:6%}
.column{position:absolute;right:6%;bottom:0;width:9%;min-width:38px;text-align:center;z-index:6}
.column-cap{width:150%;margin-left:-25%;height:10px;background:#cfc9d6;border-radius:2px}
.column-shaft{
  width:100%;height:60%;margin:0 auto;
  background:repeating-linear-gradient(90deg,#cfc9d6 0 3px,#a99fc0 4px 6px);
  box-shadow:inset 4px 0 8px rgba(0,0,0,.4);
}
.column-base{width:150%;margin-left:-25%;height:12px;background:#cfc9d6;border-radius:2px}
.column-label{
  position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);
  font-size:8px;letter-spacing:2px;color:var(--cyan);white-space:nowrap;
}
.scribble-note{
  position:absolute;left:6%;top:10%;font-family:"Comic Sans MS",cursive;font-weight:bold;
  color:#fff;font-size:15px;line-height:1.5;transform:rotate(-3deg);text-shadow:2px 2px var(--purple);
  z-index:8;
}

.machine{
  position:relative;z-index:20;display:flex;gap:0;justify-content:center;
  margin:-70px auto 0;width:min(92%,900px);
}
.crt{
  width:34%;background:#141018;border:4px solid #cfc9d6;border-radius:6px 0 0 6px;
  padding:10px;border-right:none;
}
.crt-screen{
  background:#060a12;height:100%;min-height:120px;border-radius:3px;border:3px solid #3a2f52;
  position:relative;overflow:hidden;box-shadow:inset 0 0 25px #000;
}
.crt-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--crt) 1px,transparent 1px),linear-gradient(90deg,var(--crt) 1px,transparent 1px);
  background-size:14% 100%,100% 20%;opacity:.5;
  transform:perspective(100px) rotateX(45deg) scale(1.4);transform-origin:bottom;
}
.crt-sun{position:absolute;left:50%;top:22%;width:34%;padding-bottom:34%;transform:translate(-50%,0);border-radius:50%;background:var(--pink);box-shadow:0 0 20px var(--pink)}
.sampler{
  flex:1;background:#1b1620;border:4px solid #cfc9d6;border-radius:0 6px 6px 0;padding:14px 18px;
}
.sampler-strip{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:var(--cyan);border-bottom:1px solid #3a2f52;padding-bottom:8px;margin-bottom:10px}
.sampler-strip span:first-child{color:var(--pink)}
.pads{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-bottom:10px}
.pads em{display:block;padding-bottom:70%;background:#2a2436;border:1px solid #4a4160;border-radius:3px}
.pads em.hot{background:var(--pink);box-shadow:0 0 10px var(--pink)}
.tapes{display:flex;gap:8px}
.tapes i{flex:1;display:block;padding-bottom:38%;background:linear-gradient(135deg,#3a2f52,#241a3d);border:1px solid var(--purple);border-radius:2px}

.copy{max-width:900px;margin:60px auto 0;text-align:center;position:relative;z-index:10}
.copy h1{
  font-size:clamp(28px,5vw,56px);line-height:1.05;letter-spacing:-1px;
  text-shadow:4px 4px 0 var(--pink),-2px -2px 0 var(--cyan);
}
.copy h1 i{color:var(--hotpink)}
.copy .joke{max-width:640px;margin:26px auto 0;font-size:13px;line-height:1.9;color:var(--paper);opacity:.9}
.copy .joke b{color:var(--pink)}

/* ---------- STATUS STRIP ---------- */
.status-strip{
  display:grid;grid-template-columns:1.3fr .9fr;gap:6vw;align-items:center;
  padding:8vw 6vw;background:linear-gradient(160deg,#171220,var(--black));
  border-top:3px solid var(--purple);border-bottom:3px solid var(--purple);
}
.status-copy h2{font-size:clamp(34px,5.5vw,64px);line-height:.95;text-shadow:4px 4px var(--purple)}
.status-copy h2 i{color:var(--pink)}
.status-copy p{font-size:13px;line-height:1.9;max-width:520px;color:var(--paper);opacity:.9}
.status-copy .tagline{font-weight:700;letter-spacing:2px;color:var(--cyan);opacity:1}
.status-box{
  background:#0f0c14;border:2px solid var(--cyan);padding:26px;font-size:12px;line-height:2;
  box-shadow:6px 6px var(--pink);
}
.status-box hr{border:0;border-top:1px dashed var(--purple);margin:12px 0}
.status-box .ok{color:var(--crt);font-weight:700}
.status-box strong{color:var(--pink)}
.status-box p{font-size:11px;line-height:1.8;opacity:.85;margin-top:8px}

/* ---------- FEATURES ---------- */
.features{
  display:grid;grid-template-columns:repeat(5,1fr);gap:20px;
  padding:5vw 6vw;background:var(--black);border-bottom:3px solid #241a3d;
}
.feature{text-align:center;font-size:10px;letter-spacing:1px;line-height:1.7}
.ficon{
  width:56px;height:56px;margin:0 auto 12px;border:2px solid var(--cyan);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--pink);
}

/* ---------- BLACK SECTIONS ---------- */
.black{background:var(--black);color:var(--paper);padding:8vw 8vw;border-bottom:3px solid #241a3d;position:relative;overflow:hidden}
.marquee{color:var(--purple);font-size:9px;letter-spacing:4px;white-space:nowrap;transform:rotate(-1deg);margin-bottom:44px}
.blackgrid{display:grid;grid-template-columns:1.4fr .8fr .45fr;gap:5vw;align-items:center}
.black .eyebrow{display:block;color:var(--cyan);font-size:11px;letter-spacing:2px;margin-bottom:14px}
.black h2{font-size:clamp(44px,7vw,100px);line-height:.72;letter-spacing:-4px;text-shadow:4px 4px var(--purple)}
.black h2 i{color:var(--pink);text-shadow:3px 2px var(--cyan)}
.black p{max-width:560px;line-height:1.8;font-size:13px}
.photo{height:280px;background:linear-gradient(#7564a7,#ff78bd 50%,#151020 50%);border:3px solid var(--pink);position:relative;overflow:hidden;transform:rotate(-2deg);box-shadow:8px 8px var(--cyan)}
.mini-sun{width:130px;height:130px;border-radius:50%;background:repeating-linear-gradient(#ff4eae 0 10px,#ffc0e0 11px 18px);margin:30px auto}
.photo span{position:absolute;bottom:20px;left:16px;color:#fff;font-weight:700;text-shadow:2px 2px #000}
.photo small{position:absolute;right:10px;top:10px;color:var(--cyan);font-size:8px}
.list{color:var(--cyan);font-size:10px;line-height:2.4;transform:rotate(2deg)}
.fine{margin-top:30px;font-size:10px;color:var(--cyan);line-height:1.7;opacity:.8}

/* ---------- USES ---------- */
.uses{padding:7vw 8vw;background:#151018;border-bottom:3px solid #241a3d}
.uses-head small{color:var(--cyan);letter-spacing:3px;font-size:10px}
.uses-head h2{font-size:clamp(38px,6vw,80px);line-height:.85;margin:16px 0 40px;text-shadow:4px 4px var(--purple)}
.uses-head h2 i{color:var(--pink)}
.use-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.use-list div{border:1px solid var(--purple);padding:16px;font-size:11px;letter-spacing:1px;text-align:center}

/* ---------- DOWNLOAD ---------- */
.download{display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:8vw 8vw;background:var(--black)}
.receipt{background:#141018;border:2px solid var(--paper);padding:26px;font-size:11px;line-height:2;box-shadow:6px 6px var(--pink);transform:rotate(-1deg)}
.receipt hr{border:0;border-top:2px dashed var(--paper)}
.download h2{font-size:clamp(40px,6vw,80px);line-height:.85;text-shadow:4px 4px var(--pink)}

/* ---------- STRIP ---------- */
.strip{background:linear-gradient(90deg,var(--purple),var(--pink));color:#fff;padding:6vw 8vw;text-align:center}
.strip b{font-family:"Archivo Black",sans-serif;font-size:clamp(30px,6vw,60px);display:block;text-shadow:4px 4px var(--black)}
.strip span{display:block;margin-top:14px;font-size:11px;letter-spacing:3px;font-weight:700}

footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;background:var(--black);color:var(--cyan);padding:20px 6vw;font-size:9px;letter-spacing:1px;border-top:3px solid var(--pink)}

@media(max-width:900px){
  .topnav{flex-direction:column;gap:14px}
  nav{flex-wrap:wrap;gap:14px}
  .side-label{display:none}
  .hero-list{position:static;margin-bottom:20px;display:flex;gap:16px;flex-wrap:wrap}
  .machine{flex-direction:column;margin-top:20px}
  .crt{width:100%;border-radius:6px 6px 0 0;border-right:4px solid #cfc9d6;border-bottom:none}
  .sampler{border-radius:0 0 6px 6px}
  .status-strip,.blackgrid,.download,.features{grid-template-columns:1fr}
  .use-list{grid-template-columns:1fr 1fr}
}