:root {
  --ink: #eef7ff;
  --muted: #8faec5;
  --cyan: #67dcff;
  --orange: #ff7f39;
  --panel: rgba(4, 13, 30, 0.72);
  --line: rgba(132, 203, 240, 0.22);
  --night: #020611;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--night) url("assets/nebula_orange.jpg") center / cover fixed;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 70% 28%, rgba(18, 80, 127, 0.26), transparent 26rem), linear-gradient(120deg, rgba(2, 5, 15, 0.98), rgba(2, 8, 18, 0.62) 50%, rgba(4, 7, 16, 0.86));
}
.star-field {
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: 0.52;
  background-image: radial-gradient(#c6e8ff 1px, transparent 1.5px), radial-gradient(#75c9ff 1px, transparent 1.5px);
  background-position: 0 0, 84px 61px;
  background-size: 137px 137px, 191px 191px;
  animation: drift 32s linear infinite;
}
.site-header, main, footer { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 86px; border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); font-family: Impact, Haettenschweiler, sans-serif; font-size: 1.15rem; letter-spacing: 0.09em; text-decoration: none; }
.brand span { color: var(--cyan); margin-left: 0.32rem; }
nav { display: flex; gap: clamp(0.8rem, 3vw, 2rem); }
nav a { color: var(--muted); font-size: 0.88rem; text-decoration: none; }
nav a:hover, nav a:focus-visible { color: var(--cyan); }
.launch { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2rem; min-height: 590px; align-items: center; }
.eyebrow { margin: 0 0 1rem; color: var(--cyan); font: 700 0.75rem/1 "Courier New", monospace; letter-spacing: 0.13em; }
.eyebrow span { display: inline-block; width: 0.48rem; height: 0.48rem; margin-right: 0.45rem; background: #77f2c2; border-radius: 50%; box-shadow: 0 0 14px #77f2c2; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 1.45rem; max-width: 11ch; font-family: Impact, Haettenschweiler, sans-serif; font-size: clamp(3.4rem, 8vw, 6.4rem); font-weight: 400; line-height: 0.87; letter-spacing: 0.015em; text-transform: uppercase; }
h1 em { color: var(--cyan); font-style: normal; }
.intro { max-width: 35rem; color: #c5dbea; font-size: 1.05rem; line-height: 1.65; }
.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.primary, .secondary { padding: 1rem 1.2rem; border: 1px solid var(--cyan); font: 700 0.78rem/1 "Courier New", monospace; letter-spacing: 0.08em; text-decoration: none; cursor: pointer; }
.primary { color: #03101d; background: var(--cyan); }
.primary:hover, .primary:focus-visible { background: #baf0ff; }
.primary span { margin-left: 0.8rem; font-size: 1.1rem; }
.secondary { color: var(--cyan); background: rgba(4, 16, 31, 0.4); }
.secondary:hover, .secondary:focus-visible { color: var(--ink); border-color: var(--ink); }
.status { min-height: 1.3rem; margin: 1rem 0 0; color: var(--muted); font-size: 0.82rem; }
.flight-window { position: relative; isolation: isolate; min-height: 420px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(5, 13, 32, 0.88), rgba(9, 25, 48, 0.25)); box-shadow: inset 0 0 80px rgba(4, 148, 231, 0.08), 24px 24px 0 rgba(5, 18, 38, 0.45); }
.flight-window::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 49.7%, var(--line) 50%, transparent 50.3%), linear-gradient(0deg, transparent 49.7%, var(--line) 50%, transparent 50.3%); background-size: 68px 68px; opacity: 0.3; }
.window-label { position: absolute; top: 1rem; left: 1rem; color: var(--muted); font: 0.7rem "Courier New", monospace; letter-spacing: 0.13em; }
.ship { position: absolute; z-index: 2; top: 44%; left: 48%; width: min(76%, 360px); filter: drop-shadow(0 0 10px rgba(97, 217, 255, 0.74)) drop-shadow(-22px 0 18px rgba(54, 145, 255, 0.45)); animation: ship-float 3.5s ease-in-out infinite; }
.engine-trail { position: absolute; z-index: 1; top: 51%; left: 6%; width: 43%; height: 26px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(62, 114, 255, 0.18), rgba(136, 233, 255, 0.75)); filter: blur(4px); clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 55%); animation: trail 1.25s ease-in-out infinite alternate; }
.orbit { position: absolute; border: 1px solid rgba(112, 228, 255, 0.28); border-radius: 50%; }
.orbit-one { width: 300px; height: 170px; bottom: -72px; right: -66px; transform: rotate(-29deg); }
.orbit-two { width: 200px; height: 110px; top: 36px; left: -75px; transform: rotate(41deg); }
.radar { position: absolute; right: 1.2rem; bottom: 1.2rem; width: 78px; height: 78px; border: 1px solid rgba(103, 220, 255, 0.35); border-radius: 50%; }
.radar::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--line); }.radar::after { content: ""; position: absolute; inset: 0 50%; width: 1px; background: var(--line); }.radar i { position: absolute; width: 5px; height: 5px; background: var(--orange); border-radius: 50%; box-shadow: 0 0 8px var(--orange); }.radar i:nth-child(1) { top: 15px; right: 18px; }.radar i:nth-child(2) { left: 18px; bottom: 20px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }.radar i:nth-child(3) { top: 37px; left: 36px; background: #77f2c2; box-shadow: 0 0 8px #77f2c2; }
.flight-info, .ranking-section, .safety { padding: clamp(4.5rem, 10vw, 8rem) 0; border-top: 1px solid var(--line); }
h2 { max-width: 17ch; font-size: clamp(2.1rem, 4.7vw, 4rem); line-height: 0.98; letter-spacing: -0.05em; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 2.5rem; background: var(--line); border: 1px solid var(--line); }
.feature-grid article { min-height: 230px; padding: 1.6rem; background: rgba(3, 12, 27, 0.76); }.feature-number { color: var(--orange); font: 0.78rem "Courier New", monospace; }.feature-grid h3 { margin: 3rem 0 0.65rem; color: var(--cyan); font-size: 1.25rem; }.feature-grid p, .ranking-copy p { color: #acc4d6; line-height: 1.55; }
.ranking-section { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(2rem, 8vw, 7rem); align-items: center; }.rank-card { border: 1px solid rgba(103, 220, 255, 0.42); padding: 1.25rem; background: var(--panel); box-shadow: 18px 18px 0 rgba(5, 17, 36, 0.55); }.rank-card-head { display: flex; justify-content: space-between; padding-bottom: 0.9rem; color: var(--muted); border-bottom: 1px solid var(--line); font: 0.72rem "Courier New", monospace; }.rank-card-head b { color: #77f2c2; }.rank-card ol { margin: 1rem 0; padding: 0; list-style: none; }.rank-card li { display: grid; grid-template-columns: 3rem 1fr auto; gap: 0.7rem; padding: 0.8rem 0; border-bottom: 1px solid rgba(143, 174, 197, 0.13); }.rank-card li span { color: var(--cyan); font-family: "Courier New", monospace; }.rank-card li b { color: var(--orange); }.rank-card p { color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.safety { display: grid; grid-template-columns: 0.7fr 1fr; gap: 4rem; }.safety ul { margin: 0; padding: 0; list-style: none; }.safety li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.75rem; padding: 1.1rem 0; color: #c5dbea; line-height: 1.45; border-top: 1px solid var(--line); }.safety li span { color: var(--cyan); font: 0.75rem "Courier New", monospace; }
footer { display: flex; justify-content: space-between; gap: 2rem; padding: 1.7rem 0 2.5rem; color: var(--muted); border-top: 1px solid var(--line); font-size: 0.75rem; } footer p { margin: 0; } footer span { color: var(--cyan); margin-inline: 0.4rem; }
@keyframes drift { to { background-position: 137px 137px, 275px 198px; } } @keyframes ship-float { 50% { transform: translate(10px, -12px) rotate(-2deg); } } @keyframes trail { to { transform: translateY(-50%) scaleX(1.13); opacity: 0.68; } }
@media (max-width: 760px) { .site-header { min-height: 70px; }.site-header nav { display: none; }.launch, .ranking-section, .safety { grid-template-columns: 1fr; }.launch { padding: 4.5rem 0; }.flight-window { min-height: 310px; }.feature-grid { grid-template-columns: 1fr; }.feature-grid article { min-height: 150px; }.feature-grid h3 { margin-top: 1.2rem; }.safety { gap: 1.5rem; } footer { flex-direction: column; } }