:root{color-scheme:dark;--ink:#070a0e;--white:#e8f0f5;--muted:#a6afb8;--pink:#f33aaf;--cyan:#9edff1;font-synthesis:none}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;color:var(--white)}
a{color:inherit}
.transmission{position:relative;isolation:isolate;display:grid;grid-template-rows:auto 1fr auto;min-height:100vh;min-height:100dvh;overflow:hidden;background:var(--ink)}
.city,.shade,.scanlines,.frame{position:absolute;inset:0;pointer-events:none}
.city{z-index:-3;background:url('./assets/city.webp') center 48%/cover no-repeat;animation:city-in 1.4s both,city-breathe 26s 1.4s ease-in-out infinite alternate;will-change:transform}
.shade{z-index:-2;background:linear-gradient(180deg,rgba(4,6,9,.35) 0%,rgba(4,6,9,.1) 24%,rgba(4,6,9,.48) 49%,rgba(4,6,9,.57) 75%,rgba(4,6,9,.85) 100%),radial-gradient(ellipse at 50% 47%,transparent 10%,rgba(0,0,0,.55) 100%)}
.scanlines{z-index:-1;opacity:.1;background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(0,0,0,.55) 4px 5px)}
.frame{inset:22px;border:1px solid rgba(223,234,244,.2)}
.frame:before,.frame:after{content:"";position:absolute;width:46px;height:1px;background:var(--pink);box-shadow:0 0 12px var(--pink)}
.frame:before{top:18%;left:-1px}.frame:after{right:-1px;bottom:20%}
.corner{position:absolute;width:9px;height:9px;border-color:rgba(245,250,255,.38);border-style:solid}
.corner--tl{top:-1px;left:-1px;border-width:1px 0 0 1px}.corner--br{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.topline,.footer{z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:clamp(38px,4.4vw,62px) clamp(40px,4.4vw,68px) 0;line-height:1.65;letter-spacing:.12em}
.topline{font-size:11px}.topline__left,.topline__right{display:flex;flex-direction:column;gap:22px}.topline__right{text-align:right}.topline__detail{font-size:10px;color:rgba(214,223,234,.62);line-height:1.7}.brand-code{font-weight:600}.brand-code span{color:var(--pink);font-size:15px;vertical-align:-1px}
.record{display:flex;align-items:center;gap:8px}.record__dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink)}.record__rule{display:block;width:35px;height:1px;margin-left:6px;background:linear-gradient(90deg,var(--pink),transparent)}
.message{z-index:1;align-self:center;text-align:center;width:min(100%,1450px);margin:auto;padding:4.5vh 5vw 5vh;animation:ui-in 1s .15s both}
.message__eyebrow{margin:0 0 clamp(14px,2.3vh,24px);font-size:clamp(10px,.85vw,12px);font-weight:500;letter-spacing:.42em;color:rgba(233,243,249,.75)}
.message__eyebrow span{color:var(--pink);margin:0 .3em}
.headline{position:relative;display:flex;justify-content:center;gap:.15em;margin:0;color:#f0f6fa;font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-size:clamp(70px,8.6vw,164px);font-weight:600;line-height:.9;letter-spacing:-.018em;text-transform:uppercase;text-shadow:-2px 0 rgba(242,43,156,.48),2px 0 rgba(117,230,253,.52),0 3px 24px rgba(209,240,253,.27);white-space:nowrap}
.headline:after{content:"";position:absolute;left:18%;right:18%;top:57%;height:1px;background:linear-gradient(90deg,transparent,rgba(191,229,239,.7),rgba(241,49,163,.6),transparent);opacity:.6;transform:skewX(-22deg)}
.progress{position:relative;width:clamp(180px,23vw,330px);height:2px;margin:clamp(24px,4.5vh,42px) auto 0;overflow:hidden;background:rgba(232,244,250,.34)}
.progress__beam{position:absolute;inset:0 auto 0 0;width:33%;background:linear-gradient(90deg,transparent,var(--pink) 25%,#fff 54%,var(--cyan) 78%,transparent);box-shadow:0 0 13px var(--pink);animation:scan 2.8s ease-in-out infinite}
.message__status{margin:10px 0 0;color:rgba(232,241,247,.72);font-size:10px;letter-spacing:.34em}.ellipsis{animation:dots 1.3s ease-in-out infinite}
.message__subhead{margin:clamp(25px,4.3vh,43px) 0 0;color:#e6eef4;font-size:clamp(10px,1.02vw,14px);font-weight:500;letter-spacing:clamp(.23em,.48vw,.54em)}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-width:213px;min-height:51px;margin-top:clamp(26px,4.5vh,45px);border:1px solid rgba(234,245,252,.7);background:rgba(6,11,17,.42);font-size:11px;font-weight:600;letter-spacing:.16em;text-decoration:none;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.cta:hover{background:rgba(218,43,143,.2);border-color:var(--pink);box-shadow:0 0 22px rgba(243,58,175,.24);transform:translateY(-2px)}.cta:focus-visible,.socials a:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}.cta__arrow{color:var(--pink);font-size:18px;font-weight:400;line-height:1}
.footer{align-items:end;padding-top:0;padding-bottom:clamp(37px,4.4vw,62px);font-size:11px}.footer__mark{letter-spacing:.2em}.footer__status{color:var(--muted);font-size:10px}.footer__status-light{color:var(--white)}
.socials{display:flex;align-items:center;gap:24px;margin-left:-40px}.socials a{display:grid;place-items:center;width:30px;height:30px;color:rgba(232,241,247,.73);transition:color .2s,transform .2s}.socials a:hover{color:var(--pink);transform:translateY(-2px)}.socials svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}.socials .fill{fill:currentColor;stroke:none}
@keyframes city-in{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:scale(1)}}
@keyframes city-breathe{from{transform:scale(1)}to{transform:scale(1.035)}}
@keyframes ui-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes scan{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}
@keyframes dots{50%{opacity:.25}}
@media(max-width:900px){.headline{font-size:clamp(67px,9.1vw,100px)}.topline,.footer{padding-left:42px;padding-right:42px}.footer__mark{letter-spacing:.08em}}
@media(max-width:650px){.transmission{min-height:100svh}.city{background-position:50% 50%}.shade{background:linear-gradient(180deg,rgba(4,6,9,.3),rgba(4,6,9,.15) 28%,rgba(4,6,9,.55) 50%,rgba(4,6,9,.72) 78%,rgba(4,6,9,.9)),radial-gradient(ellipse at center,transparent 4%,rgba(0,0,0,.55))}.frame{inset:12px}.topline{padding:29px 28px 0;font-size:9px;letter-spacing:.04em}.topline__detail{font-size:8px}.topline__left,.topline__right{gap:11px}.record__rule{width:18px}.message{padding:3vh 22px 3vh}.message__eyebrow{font-size:9px;letter-spacing:.2em;margin-bottom:19px}.headline{display:block;font-size:clamp(60px,15vw,94px);line-height:.83;letter-spacing:-.025em;white-space:normal}.headline span{display:block}.headline:after{left:10%;right:10%;top:50%}.progress{margin-top:23px;width:196px}.message__status{font-size:9px}.message__subhead{max-width:19em;margin:25px auto 0;font-size:10px;line-height:1.8;letter-spacing:.23em}.cta{margin-top:24px;min-width:206px;min-height:49px}.footer{align-items:end;padding:0 27px 27px;gap:10px}.footer__mark{font-size:8px;letter-spacing:.06em}.footer__status{font-size:8px;letter-spacing:0}.socials{margin-left:0;gap:6px}.socials a{width:36px;height:36px}}
@media(max-width:380px){.topline__detail{font-size:7px}.headline{font-size:15vw}.footer__mark{max-width:87px;line-height:1.7}.footer__status{max-width:60px;text-align:right;line-height:1.5}}
@media(max-height:650px){.message{padding-top:1vh;padding-bottom:1vh}.headline{font-size:clamp(50px,12vh,108px)}.message__subhead{margin-top:15px}.cta{margin-top:16px;min-height:44px}.progress{margin-top:15px}.topline__detail{display:none}.footer{padding-bottom:28px}}
@media(max-height:650px) and (max-width:650px){.headline{font-size:clamp(46px,14vw,72px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.city{transform:none!important}.progress__beam{left:34%;width:32%}}
