:root {
  --bg: #071022;
  --bg-deep: #040916;
  --surface: rgba(14, 27, 55, .76);
  --surface-strong: #101d3a;
  --line: rgba(139, 163, 212, .17);
  --text: #f1f6ff;
  --muted: #9baccc;
  --cyan: #24d8ef;
  --blue: #5389ff;
  --violet: #9b63ff;
  --mint: #67f4c2;
  --shell: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(34, 145, 255, .13), transparent 34rem),
    radial-gradient(circle at 100% 16%, rgba(151, 70, 255, .14), transparent 32rem),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.ambient { position: fixed; width: 28rem; height: 28rem; border-radius: 50%; filter: blur(110px); opacity: .13; pointer-events: none; z-index: -1; }
.ambient-one { background: var(--cyan); top: 16rem; left: -19rem; }
.ambient-two { background: var(--violet); top: 43rem; right: -20rem; }

.site-header { min-height: 82px; 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); text-decoration: none; font-size: 19px; font-weight: 760; letter-spacing: -.02em; }
.brand img { border-radius: 12px; box-shadow: 0 0 24px rgba(36, 216, 239, .18); }
nav { display: flex; align-items: center; gap: 27px; }
nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 620; transition: color .2s ease; }
nav a:hover { color: var(--text); }
.nav-cta { color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; background: rgba(255,255,255,.035); }

.hero { min-height: 680px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; padding-block: 86px 96px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #9db2dd; font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.eyebrow span { width: 24px; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 700px; margin: 20px 0 24px; font-size: clamp(52px, 7vw, 86px); line-height: .98; letter-spacing: -.06em; }
h1 em { color: transparent; background: linear-gradient(110deg, var(--cyan), #6c8cff 48%, #c371ff); -webkit-background-clip: text; background-clip: text; font-style: normal; }
.hero-lead { max-width: 620px; color: var(--muted); font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 21px; border-radius: 12px; text-decoration: none; font-size: 14px; font-weight: 760; transition: transform .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #03101a; background: linear-gradient(115deg, var(--cyan), var(--mint)); box-shadow: 0 12px 36px rgba(45, 229, 218, .16); }
.button-secondary { color: var(--text); border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.trust-row { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; color: #7f93ba; font-size: 12px; }
.trust-row span::before { content: "✓"; color: var(--mint); margin-right: 7px; }

.signal-card { position: relative; padding: 24px; border: 1px solid rgba(125, 156, 222, .25); border-radius: 28px; background: linear-gradient(145deg, rgba(17, 34, 69, .86), rgba(7, 15, 34, .92)); box-shadow: 0 35px 90px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.05); overflow: hidden; }
.signal-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(36,216,239,.06), transparent 35%, rgba(155,99,255,.07)); pointer-events: none; }
.signal-top { display: flex; justify-content: space-between; position: relative; z-index: 2; color: #7187b2; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.live-dot { color: var(--mint); }
.live-dot::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.radar-panel { position: relative; width: min(340px, 80%); aspect-ratio: 1; margin: 28px auto; border: 1px solid rgba(62, 137, 248, .33); border-radius: 50%; background: radial-gradient(circle, rgba(26, 95, 171, .16), rgba(4, 12, 30, .25) 60%); overflow: hidden; }
.radar-ring { position: absolute; inset: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(60, 145, 246, .25); border-radius: 50%; }
.ring-one { width: 34%; height: 34%; }
.ring-two { width: 66%; height: 66%; }
.ring-three { width: 90%; height: 90%; }
.radar-cross { position: absolute; background: rgba(65, 147, 250, .23); }
.radar-horizontal { width: 100%; height: 1px; top: 50%; }
.radar-vertical { height: 100%; width: 1px; left: 50%; }
.radar-sweep { position: absolute; width: 50%; height: 50%; left: 50%; top: 0; transform-origin: bottom left; background: linear-gradient(115deg, transparent 20%, rgba(36,216,239,.42)); clip-path: polygon(0 100%, 100% 16%, 100% 100%); animation: scan 5s linear infinite; }
.radar-point { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.point-one { top: 29%; left: 64%; }
.point-two { top: 54%; left: 31%; background: var(--violet); box-shadow: 0 0 16px var(--violet); }
.point-three { top: 70%; left: 71%; background: var(--mint); box-shadow: 0 0 16px var(--mint); }
@keyframes scan { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .radar-sweep { animation: none; } }
.signal-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; z-index: 2; }
.signal-metrics div { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.signal-metrics small, .signal-metrics strong { display: block; }
.signal-metrics small { margin-bottom: 4px; color: #6479a4; font-size: 9px; letter-spacing: .13em; }
.signal-metrics strong { font-size: 11px; line-height: 1.35; }

.stats-band { border-block: 1px solid var(--line); background: rgba(11, 22, 47, .55); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-grid div { padding: 25px 24px; border-right: 1px solid var(--line); }
.stats-grid div:first-child { border-left: 1px solid var(--line); }
.stats-grid strong, .stats-grid span { display: block; }
.stats-grid strong { margin-bottom: 3px; font-size: 14px; }
.stats-grid span { color: var(--muted); font-size: 12px; }

.section { padding-block: 120px; }
.section-heading { max-width: 720px; margin-bottom: 50px; }
.section-heading.compact { margin-bottom: 0; }
h2 { margin: 17px 0 18px; font-size: clamp(36px, 5vw, 56px); line-height: 1.04; letter-spacing: -.045em; }
.section-heading p, .callout p { color: var(--muted); font-size: 17px; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feature-card { position: relative; min-height: 270px; padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(150deg, rgba(19,37,75,.68), rgba(9,18,39,.75)); overflow: hidden; }
.feature-card::after { content: ""; position: absolute; width: 190px; height: 190px; right: -100px; bottom: -115px; border-radius: 50%; background: var(--accent); filter: blur(55px); opacity: .15; }
.feature-accent-cyan { --accent: var(--cyan); }
.feature-accent-violet { --accent: var(--violet); }
.feature-accent-mint { --accent: var(--mint); }
.feature-accent-blue { --accent: var(--blue); }
.feature-number { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.feature-card h3 { margin: 64px 0 10px; font-size: 22px; letter-spacing: -.025em; }
.feature-card p { max-width: 480px; color: var(--muted); font-size: 14px; }

.method-section { border-block: 1px solid var(--line); background: rgba(9, 20, 44, .58); }
.method-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: start; }
.method-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.method-list li { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 23px 0; border-bottom: 1px solid var(--line); }
.method-list li > span { color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.method-list strong { font-size: 16px; }
.method-list p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.callout { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.callout > div { max-width: 720px; }

footer { padding: 44px 0 28px; border-top: 1px solid var(--line); background: rgba(3,8,19,.5); }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-brand { display: flex; align-items: center; gap: 11px; }
.footer-brand img { border-radius: 9px; }
.footer-brand strong, .footer-brand span { display: block; }
.footer-brand span { color: var(--muted); font-size: 11px; }
.footer-links { display: flex; gap: 20px; }
.footer-links a, .legal-note a { color: #a9b9da; text-decoration: none; }
.legal-note { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); color: #66799f; font-size: 11px; }

.policy-shell { max-width: 820px; padding-block: 88px 120px; }
.policy-shell h1 { margin-bottom: 8px; font-size: clamp(48px, 8vw, 76px); }
.policy-updated { margin-bottom: 60px; color: #778cb5; font-size: 13px; }
.policy-shell section { padding: 28px 0; border-top: 1px solid var(--line); }
.policy-shell section h2 { margin: 0 0 11px; font-size: 22px; letter-spacing: -.02em; }
.policy-shell section p, .support-lead { color: var(--muted); font-size: 15px; }
.policy-shell section a { color: var(--cyan); }
.support-lead { max-width: 680px; margin-bottom: 26px; font-size: 17px; }
.support-email { margin-bottom: 64px; }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.faq-grid section { padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: rgba(15,29,60,.48); }
.faq-grid section h2 { font-size: 17px; }
.faq-grid section p { margin-bottom: 0; font-size: 13px; }

@media (max-width: 900px) {
  .hero, .method-layout { grid-template-columns: 1fr; }
  .hero { gap: 55px; }
  .signal-card { max-width: 590px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid div:nth-child(3) { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .stats-grid div:nth-child(4) { border-top: 1px solid var(--line); }
  .method-layout { gap: 50px; }
}

@media (max-width: 660px) {
  :root { --shell: min(100% - 28px, 1180px); }
  .site-header { min-height: 72px; }
  nav { gap: 13px; }
  nav a:not(.nav-cta) { display: none; }
  .hero { min-height: auto; padding-block: 65px 76px; }
  h1 { font-size: 50px; }
  .signal-card { padding: 18px; border-radius: 21px; }
  .signal-metrics { grid-template-columns: 1fr; }
  .stats-grid, .feature-grid, .faq-grid { grid-template-columns: 1fr; }
  .stats-grid div { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .stats-grid div:first-child { border-top: 0; }
  .section { padding-block: 84px; }
  .callout, .footer-grid { align-items: flex-start; flex-direction: column; }
  .footer-links { flex-wrap: wrap; }
  .policy-shell { padding-block: 64px 90px; }
}