:root {
  --font-geist-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-geist-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ink: #f7f8ff;
  --muted: #a4aac1;
  --cyan: #39e7ff;
  --panel: rgba(15, 22, 45, 0.72);
  --border: rgba(122, 153, 255, 0.17);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(circle at 78% 8%, rgba(96, 46, 219, 0.16), transparent 27rem), radial-gradient(circle at 15% 45%, rgba(0, 209, 255, 0.08), transparent 28rem), #050816;
  color: var(--ink);
  font-family: var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif;
}
a { color: inherit; }
main { overflow: hidden; }

.nav {
  width: min(1120px, calc(100% - 40px)); height: 84px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 5;
}
.brand, .footerBrand { display: flex; align-items: center; gap: 12px; font-weight: 720; letter-spacing: -0.02em; text-decoration: none; }
.brand img, .footerBrand img { border-radius: 11px; box-shadow: 0 0 24px rgba(55, 224, 255, 0.22); }
.navLinks { display: flex; gap: 32px; }
.navLinks a { color: #bcc2d7; font-size: 14px; text-decoration: none; transition: color 160ms ease; }
.navLinks a:hover { color: var(--cyan); }

.hero { width: min(1120px, calc(100% - 40px)); min-height: 670px; margin: 0 auto; padding: 128px 0 96px; position: relative; }
.eyebrow, .kicker { color: var(--cyan); font-family: var(--font-geist-mono), monospace; font-size: 12px; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 26px; height: 1px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
h1 { margin: 24px 0; max-width: 760px; font-size: clamp(64px, 9.5vw, 126px); font-weight: 670; letter-spacing: -0.072em; line-height: 0.84; }
.heroCopy { width: min(560px, 100%); color: var(--muted); font-size: clamp(18px, 2.4vw, 23px); line-height: 1.55; }
.trustRow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.trustRow span { padding: 9px 14px; border: 1px solid rgba(78, 222, 255, 0.2); border-radius: 999px; background: rgba(14, 40, 65, 0.42); color: #c8f8ff; font-size: 13px; }

.heroGlow { position: absolute; width: 420px; height: 420px; top: 90px; right: -10px; opacity: 0.8; filter: drop-shadow(0 0 50px rgba(63, 214, 255, 0.16)); }
.node { position: absolute; width: 82px; height: 82px; border-radius: 50%; border: 2px solid #91f5ff; background: radial-gradient(circle at 38% 32%, white, #32c7ff 17%, #2055ce 49%, #121a6b 74%); box-shadow: 0 0 18px #25ddff, 0 0 65px rgba(34, 175, 255, 0.55), inset 0 0 18px white; z-index: 2; }
.nodeOne { left: 169px; top: 7px; }
.nodeTwo { left: 20px; top: 274px; }
.nodeThree { right: 20px; top: 274px; background: radial-gradient(circle at 38% 32%, white, #8c5dff 19%, #5919bd 54%, #26106e 78%); box-shadow: 0 0 18px #9d68ff, 0 0 65px rgba(122, 49, 255, 0.6), inset 0 0 18px white; }
.line { position: absolute; height: 21px; transform-origin: left center; border: 2px solid #9af8ff; border-radius: 99px; background: linear-gradient(180deg, white, #18cffa 34%, #2344c5 100%); box-shadow: 0 0 16px #24ddff; }
.lineOne { width: 298px; top: 326px; left: 61px; }
.lineTwo { width: 304px; left: 203px; top: 73px; transform: rotate(118deg); }
.lineThree { width: 304px; left: 214px; top: 65px; transform: rotate(62deg); background: linear-gradient(180deg, white, #8b6aff 34%, #4b1fbf 100%); box-shadow: 0 0 16px #9963ff; }

.privacy { padding: 104px max(20px, calc((100% - 1120px) / 2)) 120px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(11, 17, 39, 0.7), rgba(7, 11, 27, 0.85)); }
.sectionIntro { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 50px; }
.kicker { margin: 0 0 14px; }
h2 { margin: 0; font-size: clamp(42px, 6vw, 74px); font-weight: 640; letter-spacing: -0.055em; line-height: 0.98; }
.effective { color: #7e869f; font-family: var(--font-geist-mono), monospace; font-size: 12px; }
.policyGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.policyCard { min-height: 270px; padding: 32px; border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(145deg, rgba(20, 28, 56, 0.78), rgba(11, 16, 35, 0.75)); transition: transform 180ms ease, border-color 180ms ease; }
.policyCard:first-child { grid-column: span 2; min-height: 235px; background: radial-gradient(circle at 90% -30%, rgba(61, 216, 255, 0.12), transparent 18rem), linear-gradient(145deg, rgba(20, 34, 63, 0.9), rgba(11, 16, 35, 0.8)); }
.policyCard:hover { transform: translateY(-2px); border-color: rgba(78, 226, 255, 0.33); }
.cardNumber { margin: 0 0 46px !important; color: #62708e !important; font-family: var(--font-geist-mono), monospace; font-size: 11px !important; letter-spacing: 0.12em; }
.policyCard h3 { margin: 0 0 14px; font-size: 22px; letter-spacing: -0.03em; }
.policyCard p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.policyCard a { color: #70e9ff; text-underline-offset: 3px; }

.support { width: min(1120px, calc(100% - 40px)); margin: 120px auto; min-height: 360px; padding: 62px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; position: relative; overflow: hidden; border: 1px solid rgba(112, 90, 255, 0.42); border-radius: 30px; background: radial-gradient(circle at 8% 100%, rgba(45, 221, 255, 0.16), transparent 22rem), radial-gradient(circle at 94% 0%, rgba(123, 59, 255, 0.2), transparent 25rem), #0e1530; }
.supportCopy { position: relative; z-index: 1; }
.supportCopy p:not(.kicker) { max-width: 560px; margin: 22px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.supportOrb { position: absolute; right: 25%; top: -190px; width: 340px; height: 340px; border: 1px solid rgba(70, 233, 255, 0.15); border-radius: 50%; box-shadow: 0 0 0 46px rgba(61, 225, 255, 0.025), 0 0 0 92px rgba(102, 74, 255, 0.018); }
.supportOrb span { position: absolute; left: calc(50% - 28px); bottom: -28px; width: 56px; height: 56px; border-radius: 50%; background: #4aeaff; box-shadow: 0 0 40px #3dcfff; }
.emailButton { min-width: 240px; padding: 18px 22px; display: flex; justify-content: space-between; gap: 30px; position: relative; z-index: 2; border-radius: 14px; background: linear-gradient(100deg, #d9fbff, #51e8fb); color: #06101d; font-size: 15px; font-weight: 720; text-decoration: none; box-shadow: 0 12px 50px rgba(41, 222, 255, 0.16); transition: transform 180ms ease, box-shadow 180ms ease; }
.emailButton:hover { transform: translateY(-2px); box-shadow: 0 16px 60px rgba(41, 222, 255, 0.26); }

footer { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 32px 0 46px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; border-top: 1px solid var(--border); color: #7f879f; font-size: 12px; }
footer p { text-align: center; }
footer > a { justify-self: end; text-decoration: none; }
footer > a:hover { color: var(--cyan); }

@media (max-width: 860px) {
  .hero { min-height: 710px; padding-top: 88px; }
  .heroGlow { width: 310px; height: 310px; top: 365px; right: 0; transform: scale(.7); transform-origin: top right; }
  .policyGrid { grid-template-columns: 1fr; }
  .policyCard:first-child { grid-column: auto; }
  .support { padding: 42px; grid-template-columns: 1fr; }
  .emailButton { width: 100%; }
  footer { grid-template-columns: 1fr; justify-items: start; }
  footer p { text-align: left; }
  footer > a { justify-self: start; }
}

@media (max-width: 560px) {
  .nav { height: 72px; }
  .navLinks { gap: 18px; }
  .hero { padding-top: 82px; min-height: 660px; }
  h1 { font-size: 62px; }
  .heroGlow { top: 350px; right: -42px; }
  .privacy { padding-top: 76px; padding-bottom: 80px; }
  .sectionIntro { align-items: start; flex-direction: column; }
  .policyCard { min-height: auto; padding: 26px; }
  .cardNumber { margin-bottom: 32px !important; }
  .support { margin: 72px auto; padding: 34px 26px; border-radius: 22px; }
  .support h2 { font-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}