:root {
  --night: #050611;
  --white: #f7f5f0;
  --muted: #a9a9b6;
  --cyan: #17e5ee;
  --pink: #f12bb5;
  --violet: #7133d7;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--night); color: var(--white); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }

.landing {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(22px, 3vw, 46px) clamp(22px, 4vw, 72px) clamp(18px, 2.5vw, 34px);
  background: radial-gradient(circle at 72% 44%, #15104a 0, #08091a 28%, var(--night) 62%);
}

.stars, .stars::before, .stars::after {
  position: absolute; inset: 0; z-index: -4; content: ""; pointer-events: none;
  background-image: radial-gradient(#fff 0 1px, transparent 1.4px);
  background-size: 83px 91px; opacity: .32;
}
.stars::before { transform: translate(31px, 49px); background-size: 127px 113px; opacity: .5; }
.stars::after { transform: translate(62px, 16px); background-size: 173px 149px; opacity: .32; }

.aurora { position: absolute; z-index: -3; left: 35%; right: -15%; top: 16%; height: 46%; background: radial-gradient(ellipse, rgba(241,43,181,.42), transparent 64%); filter: blur(28px); animation: aurora 8s ease-in-out infinite alternate; }

.sun { position: absolute; z-index: -2; left: 68%; top: 32%; width: min(19vw, 285px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: linear-gradient(#ffd36a, #fa378f 58%, #b216c9); box-shadow: 0 0 70px rgba(241,43,181,.5); transform: translateX(-50%); }
.sun i { position: absolute; left: 0; right: 0; height: 6%; background: #110922; }
.sun i:nth-child(1) { top: 49%; }.sun i:nth-child(2) { top: 61%; }.sun i:nth-child(3) { top: 72%; }.sun i:nth-child(4) { top: 82%; }.sun i:nth-child(5) { top: 91%; }

.mountains { position: absolute; z-index: -1; left: 28%; right: -4%; bottom: 19%; height: 36%; clip-path: polygon(0 100%, 9% 74%, 16% 82%, 27% 46%, 36% 72%, 48% 29%, 58% 61%, 67% 38%, 76% 68%, 87% 34%, 100% 70%, 100% 100%); background: linear-gradient(145deg, #18134b 25%, #2c1765 48%, #09081b 49%); filter: drop-shadow(0 -1px 0 rgba(72,202,255,.5)); }
.mountains--back { opacity: .7; transform: translateY(-8%) scale(1.12); filter: blur(1px) drop-shadow(0 -1px 0 #f12bb5); }
.mountains--front { background: linear-gradient(145deg, #12113a 28%, #31135c 49%, #060713 50%); }

.horizon-grid { position: absolute; z-index: 0; left: -10%; right: -10%; bottom: -19%; height: 47%; opacity: .48; transform: perspective(300px) rotateX(61deg); transform-origin: center top; background-image: linear-gradient(rgba(23,229,238,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(241,43,181,.7) 1px, transparent 1px); background-size: 68px 38px; mask-image: linear-gradient(transparent, #000 23%); animation: road 3.5s linear infinite; }
.scanlines { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .09; background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 5px); }

.masthead { position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.18); }
.brand { display: flex; align-items: center; height: 34px; font-weight: 900; font-style: italic; }
.brand__speed { display: grid; gap: 4px; margin-right: -3px; }
.brand__speed i { display: block; width: 18px; height: 3px; background: var(--pink); transform: skewX(-24deg); }
.brand__speed i:nth-child(2) { width: 13px; margin-left: 4px; }.brand__speed i:nth-child(3) { width: 8px; margin-left: 8px; }
.brand__lr { display: flex; align-items: center; height: 32px; font-size: 2rem; line-height: 1; letter-spacing: -.28em; transform: skewX(-12deg); }
.brand__lr b:first-child { color: var(--cyan); }.brand__lr b:last-child { color: var(--pink); margin-left: .18em; }
.brand__name { margin-left: 15px; font-size: clamp(.75rem, 1.2vw, 1.05rem); letter-spacing: -.03em; }
.masthead p { margin: 0; text-align: right; color: var(--muted); font: 600 clamp(.44rem,.55vw,.57rem)/1.65 "Courier New",monospace; letter-spacing: .15em; }

.hero { position:relative; z-index:5; align-self:start; width:min(49%,680px); margin-left:0; padding:clamp(28px,5vh,56px) 0 0; }
.kicker { margin: 0 0 clamp(22px,4vh,44px); color: var(--muted); font: 700 clamp(.48rem,.63vw,.66rem)/1 "Courier New",monospace; letter-spacing: .2em; }
.kicker span { display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); animation: blink 2s ease-in-out infinite; }
h1 { margin: 0; font-size: clamp(3.7rem,7.3vw,8rem); line-height: .79; letter-spacing: -.075em; font-weight: 950; font-style: italic; transform: skewX(-4deg); text-shadow: 5px 6px 0 rgba(70,37,135,.3); }
h1 span { display: block; width: max-content; }
h1 .cyan { color: var(--cyan); text-shadow: 0 0 28px rgba(23,229,238,.34), 5px 6px 0 #105c8b; }
h1 .pink { color: #ef75bc; text-shadow: 0 0 28px rgba(241,43,181,.3), 5px 6px 0 #7d1d6a; }
.intro { margin: clamp(24px,4vh,42px) 0 0; color: #d5d5de; font-size: clamp(.76rem,1vw,1rem); line-height: 1.65; }

.mark-stage { position:absolute; z-index:6; left:clamp(22px,4vw,72px); top:69%; width:min(34vw,520px); height:min(36vw,530px); transform:translateY(-50%); }
.pixel-heart { position:absolute; right:2%; top:0; width:clamp(72px,8vw,120px); aspect-ratio:1; border:1px solid rgba(241,43,181,.26); background:rgba(20,7,43,.72); box-shadow:0 0 42px rgba(241,43,181,.18),inset 0 0 28px rgba(113,51,215,.18); animation:heart-float 5.5s ease-in-out infinite; }
.heart-pixel { --px:clamp(9px,1vw,15px); position:absolute; left:50%; top:43%; width:var(--px); height:var(--px); background:var(--pink); transform:translate(-50%,-50%); box-shadow:calc(var(--px) * -1) calc(var(--px) * -1) var(--pink),var(--px) calc(var(--px) * -1) var(--pink),calc(var(--px) * -2) 0 var(--pink),calc(var(--px) * -1) 0 var(--pink),var(--px) 0 var(--pink),calc(var(--px) * 2) 0 var(--pink),calc(var(--px) * -2) var(--px) var(--pink),calc(var(--px) * -1) var(--px) var(--pink),0 var(--px) var(--pink),var(--px) var(--px) var(--pink),calc(var(--px) * 2) var(--px) var(--pink),calc(var(--px) * -1) calc(var(--px) * 2) var(--pink),0 calc(var(--px) * 2) var(--pink),var(--px) calc(var(--px) * 2) var(--pink),0 calc(var(--px) * 3) var(--pink); filter:drop-shadow(0 0 7px var(--pink)); }
.heart-pixel::before { content:""; position:absolute; inset:0; background:#fff; opacity:.72; transform:translate(calc(var(--px) * -1),calc(var(--px) * -1)); }
.glitch-mark { position:absolute; left:0; top:38%; width:100%; height:37%; filter:drop-shadow(0 0 24px rgba(23,229,238,.2)); animation:mark-float 7s ease-in-out infinite; }
.glitch-lr { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:clamp(7rem,15vw,15rem); line-height:1; font-weight:950; font-style:italic; letter-spacing:-.25em; transform:skewX(-12deg); }
.glitch-lr b:first-child { color:var(--cyan); text-shadow:-9px 8px 0 #08789c; }
.glitch-lr b:last-child { margin-left:.12em; color:var(--pink); text-shadow:9px 8px 0 #8f197e; }
.glitch-lines { position:absolute; z-index:3; left:-2%; top:46%; display:grid; gap:7px; }
.glitch-lines i { display:block; width:clamp(55px,7vw,110px); height:5px; background:var(--pink); transform:skewX(-25deg); box-shadow:0 0 10px rgba(241,43,181,.6); animation:glitch 2.8s steps(2,end) infinite; }
.glitch-lines i:nth-child(2) { width:75%; margin-left:14%; animation-delay:-.5s; }.glitch-lines i:nth-child(3) { width:52%; margin-left:34%; animation-delay:-1s; }.glitch-lines i:nth-child(4) { width:34%; margin-left:52%; animation-delay:-1.5s; }
.glitch-mark::after { content:""; position:absolute; z-index:4; left:8%; right:1%; top:52%; height:3px; background:linear-gradient(90deg,transparent,var(--cyan),var(--pink),transparent); opacity:.75; animation:slice 3.2s steps(2,end) infinite; }

.phone { position:absolute; z-index:6; right:clamp(80px,18vw,300px); top:36%; width:clamp(150px,14vw,220px); aspect-ratio:.51; padding:7px; border:1px solid rgba(255,255,255,.36); border-radius:clamp(25px,2.7vw,39px); background:linear-gradient(145deg,#292936,#05050a 58%); box-shadow:24px 34px 52px rgba(0,0,0,.55),inset 2px 2px 3px rgba(255,255,255,.25),0 0 35px rgba(113,51,215,.18); transform:rotate(4deg); animation:phone-float 7.5s ease-in-out infinite; }
.phone__speaker { position:absolute; z-index:2; left:50%; top:12px; width:32%; height:15px; border-radius:0 0 12px 12px; background:#05050a; transform:translateX(-50%); }
.phone__screen { height:100%; position:relative; overflow:hidden; border-radius:calc(clamp(25px,2.7vw,39px) - 7px); padding:clamp(25px,3vw,42px) 12px 16px; background:radial-gradient(circle at 50% 55%,rgba(80,19,102,.4),transparent 43%),linear-gradient(#090919,#05050d); }
.phone__screen::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.12; background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 3px 4px); }
.phone__top { display:flex; justify-content:space-between; color:#9da0ad; font:700 clamp(.32rem,.42vw,.46rem)/1 "Courier New",monospace; letter-spacing:.08em; }
.phone__top span:last-child { color:var(--pink); }
.phone__session { margin-top:24%; text-align:center; color:#c9cad3; font:600 clamp(.38rem,.5vw,.55rem)/1 "Courier New",monospace; letter-spacing:.13em; }
.phone__time { margin-top:9%; text-align:center; font:400 clamp(1.05rem,1.8vw,1.65rem)/1 "Courier New",monospace; letter-spacing:.04em; }
.phone__wave { height:27%; display:flex; align-items:center; justify-content:center; gap:2px; }
.phone__wave i { width:2px; height:var(--h,44%); background:linear-gradient(var(--cyan),var(--pink)); box-shadow:0 0 5px rgba(241,43,181,.65); animation:phone-wave 1.15s ease-in-out infinite alternate; }
.phone__wave i:nth-child(3n) { --h:82%; animation-delay:-.3s; }.phone__wave i:nth-child(4n) { --h:26%; animation-delay:-.6s; }.phone__wave i:nth-child(5n) { --h:63%; animation-delay:-.9s; }.phone__wave i:nth-child(7n) { --h:96%; animation-delay:-.15s; }
.phone__record { width:clamp(42px,4.2vw,62px); aspect-ratio:1; margin:3% auto 0; display:grid; place-items:center; border:1px solid var(--pink); border-radius:50%; box-shadow:0 0 18px rgba(241,43,181,.22); }
.phone__record span { width:68%; aspect-ratio:1; border-radius:50%; background:linear-gradient(145deg,#ff526c,#dc0f62); box-shadow:inset 2px 2px 2px rgba(255,255,255,.45),0 0 15px rgba(241,43,181,.6); animation:record-pulse 2s ease-in-out infinite; }
.phone__stop { margin-top:6%; text-align:center; color:#8c8d99; font:700 clamp(.3rem,.38vw,.4rem)/1 "Courier New",monospace; letter-spacing:.17em; }

.footerline { position: relative; z-index: 10; display: flex; justify-content: space-between; gap: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); color: var(--muted); font: 600 clamp(.4rem,.5vw,.54rem)/1 "Courier New",monospace; letter-spacing: .13em; }
.footerline strong { color: var(--pink); font-weight: 500; letter-spacing: .2em; }

.js .masthead,.js .hero,.js .mark-stage,.js .phone,.js .footerline { opacity: 0; }
.js.is-ready .masthead,.js.is-ready .footerline { animation: reveal .75s ease-out forwards; }
.js.is-ready .hero { animation: reveal .8s .12s ease-out forwards; }
.js.is-ready .mark-stage { animation: reveal-mark .9s .25s ease-out forwards; }
.js.is-ready .phone { animation:reveal-phone .9s .35s ease-out forwards,phone-float 7.5s 1.3s ease-in-out infinite; }

@keyframes reveal { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@keyframes reveal-mark { from { opacity:0; transform:translateY(calc(-50% + 18px)); } to { opacity:1; transform:translateY(-50%); } }
@keyframes reveal-phone { from { opacity:0; transform:translateY(18px) rotate(4deg); } to { opacity:1; transform:translateY(0) rotate(4deg); } }
@keyframes aurora { to { opacity:.65; transform:scale(1.08) translateX(2%); } }
@keyframes road { to { background-position: 0 38px, 68px 0; } }
@keyframes blink { 50% { opacity:.25; box-shadow:0 0 4px var(--cyan); } }
@keyframes heart-float { 50% { transform:translateY(-8px) rotate(2deg); box-shadow:0 0 55px rgba(241,43,181,.3),inset 0 0 28px rgba(113,51,215,.25); } }
@keyframes mark-float { 50% { transform:translateY(-7px); } }
@keyframes glitch { 0%,88%,100% { transform:skewX(-25deg) translateX(0); } 90% { transform:skewX(-25deg) translateX(14px); } 94% { transform:skewX(-25deg) translateX(-8px); } }
@keyframes slice { 0%,87%,100% { transform:translateX(0); opacity:.75; } 89% { transform:translateX(18px); opacity:1; } 93% { transform:translateX(-11px); } }
@keyframes phone-float { 50% { transform:translateY(-9px) rotate(3deg); } }
@keyframes phone-wave { to { height:14%; opacity:.48; } }
@keyframes record-pulse { 50% { transform:scale(.88); box-shadow:inset 2px 2px 2px rgba(255,255,255,.45),0 0 25px rgba(241,43,181,.85); } }

@media (max-width: 820px) {
  .landing { padding:22px; }
  .hero { width:58%; margin-left:0; align-self:start; padding-top:4vh; }
  h1 { font-size:clamp(3.8rem,14vw,7rem); }
  .mark-stage { width:48vw; height:54vw; left:-2vw; top:auto; bottom:4%; transform:none; }
  .js.is-ready .mark-stage { animation:reveal-mobile .9s .25s ease-out forwards; }
  .sun { left:76%; top:44%; width:29vw; }
  .mountains { left:10%; bottom:17%; }
  .intro { max-width:52%; }
  .phone { right:9vw; top:38%; width:clamp(132px,24vw,185px); }
}

@media (max-width: 540px) {
  .landing { padding:18px; }
  .masthead p { display:none; }
  .brand__name { font-size:.72rem; }
  .hero { width:78%; padding-top:4vh; }
  .kicker { margin-bottom:3.5vh; }
  h1 { font-size:min(15.2vw,5.2rem); line-height:.82; }
  .intro { max-width:62%; font-size:.7rem; }
  .intro br { display:none; }
  .mark-stage { width:60vw; height:65vw; left:-13vw; bottom:3%; }
  .pixel-heart { width:68px; }
  .glitch-lr { font-size:24vw; }
  .sun { width:38vw; left:78%; top:48%; }
  .mountains { left:0; right:-20%; height:29%; bottom:17%; }
  .footerline span:first-child,.footerline span:last-child { display:none; }
  .footerline strong { margin:auto; font-size:.38rem; text-align:center; }
  .phone { right:-4vw; top:42%; width:128px; }
}

@media (max-height: 690px) and (min-width: 821px) { h1 { font-size:min(6vw,5.4rem); }.kicker { margin-bottom:3vh; }.hero { padding-bottom:3vh; }.mark-stage { width:min(30vw,430px); height:min(32vw,450px); }.phone { width:130px; } }
@keyframes reveal-mobile { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; }
  .js .masthead,.js .hero,.js .mark-stage,.js .phone,.js .footerline { opacity:1; }
}