:root {
  color-scheme: dark;
  --bg: #070914;
  --surface: rgba(18, 21, 43, .72);
  --surface-strong: #12152b;
  --line: rgba(185, 194, 255, .16);
  --text: #f5f7ff;
  --muted: #aeb4d1;
  --violet: #8b5cf6;
  --blue: #22d3ee;
  --pink: #e879f9;
  --wrap: min(1160px, calc(100vw - 40px));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 73% 18%, rgba(93, 60, 196, .2), transparent 32rem),
    radial-gradient(circle at 15% 65%, rgba(18, 171, 210, .09), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}

a { color: inherit; }

.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .48;
  background-image:
    radial-gradient(circle at 15% 22%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 82% 15%, #fff 0 1px, transparent 1.3px),
    radial-gradient(circle at 62% 73%, #fff 0 1px, transparent 1.2px),
    radial-gradient(circle at 31% 81%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 90% 61%, #fff 0 1px, transparent 1.2px);
  background-size: 260px 260px, 340px 340px, 420px 420px, 310px 310px, 390px 390px;
}

.wrap { width: var(--wrap); margin-inline: auto; }

.nav {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-decoration: none;
}

.brand-orbit {
  position: relative;
  width: 31px;
  height: 31px;
  display: inline-block;
  border: 2px solid var(--violet);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(139, 92, 246, .65), inset 0 0 12px rgba(34, 211, 238, .18);
  transform: rotate(-28deg) scaleY(.58);
}

.brand-orbit::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  transform: scaleY(1.72);
  box-shadow: 0 0 14px rgba(34, 211, 238, .75);
}

.brand-orbit i {
  position: absolute;
  z-index: 2;
  right: -3px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff;
}

.nav nav { display: flex; gap: 30px; }

.nav nav a, .footer a {
  color: var(--muted);
  font-size: .9rem;
  text-decoration: none;
}

.nav nav a:hover, .nav nav a[aria-current="page"], .footer a:hover { color: #fff; }

.hero {
  min-height: 690px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 60px;
  padding-block: 72px 90px;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--blue);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .22em;
}

.hero h1, .section-heading h2, .trust h2, .policy-intro h1 {
  margin: 0;
  line-height: .98;
  letter-spacing: -.055em;
}

.hero h1 { font-size: clamp(3.35rem, 6.2vw, 6.15rem); }
.hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(231, 235, 255, .48); }

.lead {
  max-width: 650px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 23px;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: .9rem;
  font-weight: 750;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.4); }
.button.primary { background: linear-gradient(135deg, #7548ef, #5139d5); box-shadow: 0 16px 46px rgba(102, 70, 222, .27); }
.button.secondary { background: rgba(255,255,255,.035); }
.package { margin-top: 19px; color: #737b9f; font-size: .78rem; letter-spacing: .04em; }

.orbital-art {
  position: relative;
  width: min(40vw, 480px);
  aspect-ratio: 1;
  justify-self: center;
  filter: drop-shadow(0 28px 70px rgba(84, 62, 196, .36));
}

.planet {
  position: absolute;
  inset: 30%;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 28%, #e9e7ff 0 4%, #a68af7 14%, #5a38c4 48%, #111534 79%);
  box-shadow: inset -18px -20px 30px rgba(0,0,0,.45), 0 0 45px rgba(128, 92, 246, .54);
}

.planet span {
  position: absolute;
  width: 42%; height: 8%;
  left: 10%; top: 29%;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  transform: rotate(-24deg);
}

.halo { position: absolute; inset: 10%; border: 1px solid rgba(137, 150, 255, .37); border-radius: 50%; transform: rotate(-25deg) scaleY(.38); }
.halo-one { box-shadow: 0 0 26px rgba(78, 194, 255, .2); }
.halo-two { inset: 2%; border-color: rgba(230, 121, 249, .2); transform: rotate(36deg) scaleY(.68); }
.satellite { position: absolute; z-index: 3; width: 11px; height: 11px; border-radius: 50%; background: white; box-shadow: 0 0 16px 5px rgba(34, 211, 238, .7); }
.satellite-one { top: 38%; right: 8%; }
.satellite-two { bottom: 20%; left: 19%; width: 7px; height: 7px; box-shadow: 0 0 12px 4px rgba(232, 121, 249, .6); }

.feature-section { padding-block: 110px; border-top: 1px solid var(--line); }
.section-heading { max-width: 720px; margin-bottom: 42px; }
.section-heading h2, .trust h2 { font-size: clamp(2.3rem, 4vw, 4.35rem); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-grid article { min-height: 260px; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); backdrop-filter: blur(12px); }
.feature-number { color: var(--violet); font-size: .72rem; font-weight: 800; letter-spacing: .18em; }
.feature-grid h3 { margin: 58px 0 12px; font-size: 1.22rem; }
.feature-grid p { margin: 0; color: var(--muted); font-size: .94rem; }

.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 70px; align-items: end; padding-block: 110px; border-top: 1px solid var(--line); }
.trust > p { margin: 0; color: var(--muted); }
.text-link { color: var(--blue); font-size: .9rem; font-weight: 750; text-decoration: none; }
.text-link span { margin-left: 6px; }

.policy { display: grid; grid-template-columns: 300px minmax(0, 760px); justify-content: space-between; gap: 90px; padding-block: 90px 120px; }
.policy-intro { position: sticky; top: 35px; align-self: start; }
.policy-intro h1 { font-size: clamp(2.7rem, 4vw, 4.25rem); }
.policy-intro > p:not(.eyebrow) { color: var(--muted); }
.policy-intro dl { margin-top: 42px; }
.policy-intro dl div { padding: 13px 0; border-top: 1px solid var(--line); }
.policy-intro dt { color: #72799b; font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.policy-intro dd { margin: 3px 0 0; color: var(--muted); font-size: .86rem; overflow-wrap: anywhere; }
.policy-content section { padding: 0 0 30px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.policy-content h2 { margin: 0 0 14px; font-size: 1.28rem; }
.policy-content p { color: var(--muted); }
.policy-content a { color: #91e8f5; text-underline-offset: 3px; }

.footer { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid var(--line); color: #72799b; font-size: .82rem; }
.footer div { display: flex; gap: 22px; }

@media (max-width: 820px) {
  .nav nav { gap: 16px; }
  .nav nav a:first-child { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 10px; padding-top: 80px; }
  .orbital-art { width: min(86vw, 440px); grid-row: 1; opacity: .88; }
  .hero-copy { grid-row: 2; }
  .feature-grid, .trust, .policy { grid-template-columns: 1fr; }
  .feature-grid article { min-height: 220px; }
  .policy { gap: 55px; }
  .policy-intro { position: static; }
}

@media (max-width: 520px) {
  :root { --wrap: min(100% - 28px, 1160px); }
  .nav { min-height: 72px; }
  .brand { font-size: .78rem; letter-spacing: .12em; }
  .brand-orbit { width: 27px; height: 27px; }
  .nav nav a { font-size: .78rem; }
  .nav nav a:nth-child(2) { display: none; }
  .hero h1 { font-size: clamp(2.65rem, 14vw, 4rem); }
  .hero { padding-block: 48px 72px; }
  .orbital-art { width: min(96vw, 355px); }
  .actions { flex-direction: column; }
  .button { width: 100%; }
  .feature-section, .trust { padding-block: 78px; }
  .feature-grid h3 { margin-top: 42px; }
  .footer { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 24px; }
  .footer p { margin: 0; }
}