@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,500;1,6..72,500&family=Syne:wght@700;800&display=swap');

:root {
  --void: #07080c;
  --ink: #efe7d4;
  --muted: #8b8d97;
  --line: rgba(239, 231, 212, .14);
  --amber: #ffb020;
  --ion: #2ee6c5;
  --ember: #ff5a3c;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 8; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.crop { position: fixed; inset: 14px; pointer-events: none; z-index: 9; }
.crop i { position: absolute; width: 18px; height: 18px; border: 1px solid rgba(239,231,212,.45); }
.crop i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.crop i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.crop i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.crop i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.nav, footer, .eyebrow, .idx, .kind, .hint, .callsign, .ghost, .go {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10px;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1280px; margin: 0 auto; padding: 28px 6vw 0;
}
.back, .callsign { color: var(--muted); }
.callsign span { color: var(--amber); margin-left: 10px; }
.ghost { background: none; border: 0; padding: 0; }
.ghost:hover, .back:hover { color: var(--amber); }
.hero { max-width: 1280px; margin: 0 auto; padding: 72px 6vw 48px; }
.eyebrow { color: var(--ion); margin: 0 0 22px; }
.eyebrow i {
  display: inline-block; width: 7px; height: 7px; margin-right: 8px;
  border-radius: 50%; background: var(--ion); box-shadow: 0 0 12px var(--ion);
}
h1 {
  margin: 0 0 22px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(52px, 9vw, 108px);
  line-height: .86;
  letter-spacing: -.06em;
}
h1 em { font-family: 'Newsreader', serif; font-style: italic; font-weight: 500; color: var(--amber); }
.lede { max-width: 520px; margin: 0 0 36px; color: #c9c2b1; font-size: 19px; line-height: 1.45; }
.go {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--amber); color: #1a1204; padding: 14px 16px; font-weight: 500;
}
.go:hover span { transform: translate(3px, 3px); }
.go span { display: inline-block; transition: transform .2s ease; }
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 6vw 80px;
}
.card {
  grid-column: span 4;
  min-height: 390px;
  display: flex; flex-direction: column;
  padding: 16px;
  border: 1px solid var(--line);
  background: #101218;
  transition: transform .25s ease, border-color .25s ease;
}
.card:nth-child(4), .card:nth-child(5) { grid-column: span 6; }
.card:hover { transform: translateY(-5px); border-color: rgba(255,176,32,.55); }
.idx { color: var(--amber); }
.kind { margin-left: auto; color: var(--muted); }
.card .idx, .card .kind { display: inline; }
.card .kind { float: right; }
.viz { flex: 1; min-height: 170px; position: relative; margin: 18px 0; overflow: hidden; }
h2 { margin: 0 0 8px; font-family: 'Syne', sans-serif; font-size: 28px; letter-spacing: -.04em; }
.card p { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.4; }
.hint { color: var(--amber); }
.c-sonar { background: #041018; }
.v-sonar { background: #02080e; }
.v-sonar i { position:absolute; left:50%; top:50%; border:1px solid #3ee0ff; border-radius:50%; transform:translate(-50%,-50%); }
.v-sonar i:nth-child(1){ width:36px; height:36px; }
.v-sonar i:nth-child(2){ width:90px; height:90px; opacity:.5; }
.v-sonar i:nth-child(3){ width:150px; height:150px; opacity:.2; }
.c-glyph { background: #111000; }
.v-glyph { display:flex; align-items:flex-end; justify-content:center; gap:18px; }
.v-glyph span, .v-glyph b { font-family:'Syne',sans-serif; font-weight:800; }
.v-glyph span { font-size:92px; color:#e8ff3a; }
.v-glyph b { font-size:54px; color:#f6f0c8; opacity:.55; }
.c-jelly { background: #1a0714; }
.v-jelly { background: #12040e; }
.v-jelly i { position:absolute; bottom:30%; width:42px; height:42px; border-radius:50%; background:#ff5aa8; }
.v-jelly i:nth-child(1){ left:22%; }
.v-jelly i:nth-child(2){ left:42%; bottom:38%; }
.v-jelly i:nth-child(3){ left:62%; }
.c-cab { background: #160814; }
.v-cab { background: #0c050e; }
.v-cab span { position:absolute; bottom:22%; width:48px; height:86px; background:#241018; border:1px solid #ff6bd6; }
.v-cab span:nth-child(1){ left:18%; }
.v-cab span:nth-child(2){ left:42%; height:102px; }
.v-cab span:nth-child(3){ left:66%; }
.v-cab span:before { content:''; position:absolute; left:8px; top:10px; right:8px; height:28px; background:#ff6bd6; opacity:.7; }
.c-gyro { background: #07101c; }
.v-gyro { background: radial-gradient(circle at 50% 60%, #123048, #07101c); }
.v-gyro i { position:absolute; inset:18%; border:2px solid rgba(92,225,255,.5); border-radius:50%; }
.v-gyro b { position:absolute; width:18px; height:18px; left:46%; top:40%; border-radius:50%; background:#ffd36a; box-shadow:0 0 16px #ffd36a; }
footer {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: 1280px; margin: 0 auto; padding: 0 6vw 40px; color: var(--muted);
}
footer a { color: var(--ink); }

@media (max-width: 800px) {
  .grid { grid-template-columns: 1fr; }
  .card, .card:nth-child(4), .card:nth-child(5) { grid-column: auto; }
  .callsign { display: none; }
  h1 { font-size: clamp(48px, 14vw, 84px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}