:root{color-scheme:dark;font-family:Inter,"Segoe UI",sans-serif;background:#030504;color:#edf5ef}
*{box-sizing:border-box}
body{min-height:100svh;margin:0;background:radial-gradient(circle at 72% 18%,#1b2918 0,#08100b 24%,#030504 58%);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 0 48%,#c8ff0009 48% 48.2%,transparent 48.2%),repeating-linear-gradient(90deg,#ffffff05 0 1px,transparent 1px 8vw);mask-image:linear-gradient(to bottom,#000,transparent 78%)}
main{position:relative;display:grid;grid-template-columns:minmax(260px,.72fr) minmax(440px,1.28fr);grid-template-rows:1fr auto;gap:clamp(48px,8vw,130px);width:min(1240px,88vw);min-height:100svh;margin:auto;padding:clamp(46px,8vh,96px) 0 32px}
header{align-self:center}
.signal{display:flex;align-items:center;gap:10px;margin:0 0 30px;color:#c8ff00;font-size:.78rem;font-weight:800;letter-spacing:.2em}
.signal span{width:8px;height:8px;border-radius:50%;background:#c8ff00;box-shadow:0 0 18px #c8ff00}
h1{margin:0;font-family:"Arial Narrow","Roboto Condensed",Impact,sans-serif;font-size:clamp(6rem,13vw,11.5rem);font-weight:900;font-style:italic;line-height:.68;letter-spacing:-.065em;text-transform:uppercase}
h1 strong{color:transparent;-webkit-text-stroke:2px #c8ff00;text-shadow:0 0 40px #c8ff0020}
.intro{max-width:390px;margin:40px 0 0;color:#aebbb2;font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.9}
nav{align-self:center;display:grid;gap:14px}
.destination{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(18px,3vw,38px);min-height:168px;padding:28px clamp(24px,3vw,42px);overflow:hidden;border:1px solid #ffffff24;background:#0a0e0cdb;color:inherit;text-decoration:none;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.destination::after{content:"";position:absolute;right:-44px;bottom:-60px;width:180px;height:120px;border:1px solid #ffffff12;transform:skewX(-24deg)}
.destination:hover,.destination:focus-visible{transform:translateX(8px);border-color:#c8ff00;background:#0e160e;outline:none}
.destination.primary{border-left:4px solid #c8ff00;background:linear-gradient(110deg,#101a10,#090d0b 72%)}
.number{align-self:start;color:#657068;font:700 .76rem/1 monospace;letter-spacing:.12em}
.copy{display:grid;gap:7px}
.copy small{color:#c8ff00;font-size:.72rem;font-weight:800;letter-spacing:.16em}
.copy b{font-size:clamp(1.55rem,3vw,2.45rem);line-height:1.15}
.copy em{color:#929e96;font-size:.88rem;font-style:normal;line-height:1.5}
.arrow{z-index:1;color:#c8ff00;font-size:2.2rem;font-weight:300}
footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:20px;border-top:1px solid #ffffff1c;color:#667069;font:700 .7rem/1.4 monospace;letter-spacing:.16em}
footer a{color:#c8ff00;text-underline-offset:4px}
footer a:hover,footer a:focus-visible{color:#fff;outline:1px solid #c8ff00;outline-offset:5px}
@media(max-width:820px){main{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:44px;width:min(90vw,620px);padding:54px 0 26px}header{align-self:start}h1{font-size:clamp(6rem,30vw,10rem)}.intro{margin-top:32px}.destination{min-height:140px;padding:24px 20px}.destination:hover,.destination:focus-visible{transform:translateX(4px)}footer{grid-column:1;flex-wrap:wrap}footer span:last-child{width:100%}}
@media(prefers-reduced-motion:reduce){.destination{transition:none}}