/* Brand direction: original orbit mark, ink background, cyan-blue-violet light. */
:root {
  color-scheme: dark;
  --bg: #080716;
  --panel: #11112b;
  --text: #f6f7ff;
  --muted: #b4bddb;
  --line: #30315a;
  --accent: #68eaf7;
  --radius: 18px;
  --orb-blue: #3158ff;
  --orb-violet: #7e3dff;
  --orb-pink: #e866f7;
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(ellipse 58% 32% at 88% 4%, rgba(54, 46, 175, .15), transparent 75%),
    radial-gradient(ellipse 55% 25% at 4% 55%, rgba(28, 65, 185, .09), transparent 78%),
    var(--bg);
  color: var(--text);
}
::selection { background: var(--accent); color: #080716; }
:focus-visible { outline-color: var(--accent); }
.skip-link { background: var(--accent); color: #080716; }

.header { border-color: var(--line); }
.brand { color: var(--text); gap: 11px; }
.brand-symbol {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
  margin: 0 2px 0 0;
  flex: 0 0 48px;
  overflow: hidden;
  border: 1px solid rgba(104, 234, 247, .32);
  border-radius: 14px;
  background: #080716;
  box-shadow: 0 0 21px rgba(68, 86, 255, .2);
}
.brand-symbol img {
  position: absolute;
  left: -9px;
  top: -9px;
  display: block;
  width: 64px;
  height: 64px;
  max-width: none;
}
.brand-end { color: var(--accent); }
.brand-tag { color: #cbd6f1; border-color: #454973; }
.desktop-nav a, .header-link { color: #c8d0ea; }
.desktop-nav a:hover, .header-link:hover { color: var(--accent); }
.menu-toggle { border-color: #454973; }
.mobile-nav { background: #101026; border-color: var(--line); }

.hero { min-height: 750px; }
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #080716 0%, rgba(8, 7, 22, .94) 31%, rgba(8, 7, 22, .54) 48%, transparent 66%);
}
.hero-content { max-width: 560px; }
.hero h1 { font-weight: 560; letter-spacing: -.055em; }
.hero h1 span {
  color: var(--accent);
  text-shadow: 0 0 34px rgba(63, 171, 255, .2);
}
.hero-description { color: #d3dbf2; max-width: 460px; }
.eyebrow { color: #b9c7f0; }
.hero-visual {
  z-index: -1;
  top: 50%;
  right: -56px;
  width: min(58vw, 780px);
  height: min(58vw, 780px);
  transform: translateY(-50%);
  mask-image: none;
  overflow: visible;
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.button-primary { color: #071523; background: var(--accent); }
.button-primary:hover { color: #071523; background: #a1f6ff; }
.button-outline { color: var(--text); border-color: #656a9b; }
.button-outline:hover { background: #1c2152; }
.text-link { color: #dae3fb; }
.text-link:hover { color: var(--accent); }
.benefit-strip { color: #bec8e6; border-color: var(--line); }
.benefit-strip p::before { color: var(--accent); }

h2 span, .checkout-intro h1 span, .privacy-intro h1 span { color: #a9b6e7; }
.section-intro > p, .setup-heading > p, .faq-heading > p { color: var(--muted); }
.small-label, .plan-card .small-label { color: #9daefa; }
.feature { border: 1px solid #34375f; }
.feature p, .feature-care p { color: #bcc6df; }
.feature-main { background: linear-gradient(145deg, #151c4d 0%, #11142e 48%, #101025 100%); }
.feature-devices { background: linear-gradient(145deg, #171638, #111126); }
.feature-care { background: linear-gradient(120deg, #172449, #121128); }
.service-links div { color: #e3e9fc; border-color: #424d85; background: rgba(13, 22, 62, .5); }
.service-links div:hover { border-color: var(--accent); }
.feature-link { color: var(--accent); }
.circle-link { color: #091527; background: var(--accent); }
.platform-list span { color: #d6def4; border-color: #4b4f80; }

.plans .section-intro .small-label { color: var(--accent); }
.plans-status { color: var(--muted); }
.plan-card {
  border-color: #363b76;
  background: linear-gradient(145deg, #181d46, #11112a 67%);
  box-shadow: inset 0 1px 0 rgba(134, 146, 255, .08);
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.plan-card:hover {
  border-color: rgba(104, 234, 247, .75);
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(6, 16, 70, .24);
}
.plan-card:only-child { max-width: 410px; }
.plan-price { color: var(--text); }
.plan-methods { color: #bec9e8; }

.setup-note { color: #d3dafa; border-color: #3d4174; }
.device-tabs { border-color: #3a3d70; }
.device-tabs button { color: #b7c2e1; }
.device-tabs button[aria-selected="true"] { color: var(--accent); border-color: var(--accent); }
.steps li { border-color: var(--line); }
.steps p, .faq-list details p { color: #c3cce5; }
.step-number { color: var(--accent); }
.faq-list details { border-color: var(--line); }
.faq-list summary:hover, .faq-heading a { color: var(--accent); }
.closing {
  border-color: #44468b;
  background: linear-gradient(105deg, #141a4d, #191334 72%, #23143c);
}
.closing .small-label { color: #aabafd; }
.footer { border-color: var(--line); color: #b4bdd8; }
.footer a:hover { color: var(--accent); }
.footer .brand-symbol { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; }
.footer .brand-symbol img { width: 40px; height: 40px; left: -5px; top: -5px; }

.checkout-intro .small-label, .privacy-intro .small-label { color: var(--accent); }
.checkout-intro > p, .privacy-intro > p { color: #c1cbe5; }
.checkout-panel {
  color: #c3cde7;
  border-color: #3b4076;
  background: linear-gradient(145deg, #171a3d, #10112a 64%);
}
.checkout-panel h2, .checkout-panel form > label:first-child,
.checkout-email-block label, .method-option { color: var(--text); }
.checkout-summary { border-color: #424779; }
.checkout-summary p, .checkout-account, .form-hint, .checkout-note { color: #b6c2e0; }
.checkout-summary strong, .method-option strong { color: var(--accent); }
.checkout-panel input[type=email] {
  color: var(--text);
  border-color: #59649e;
  background: #0c1030;
}
.checkout-panel input[type=email]::placeholder { color: #a1add0; }
.terms-document, .method-option {
  border-color: #485383;
  background: #121638;
}
.method-option:has(input:checked) { border-color: var(--accent); background: #17264b; }
.method-option input, .terms-check input { accent-color: var(--accent); }
.terms-check, .terms-text { color: #d0daf1; }
.terms-check a { color: var(--accent); }
.payment-address { background: #101c43; border-color: #52609b; }
.payment-address-label, .payment-address-row code { color: var(--text); }
.payment-address-label strong { color: var(--accent); }
.wallet-balance { color: #cedcf0; }
.order-reference { color: #aab8d6; }

.privacy-toc p { color: #aebce0; }
.privacy-toc ol { border-color: #424779; }
.privacy-toc a { color: #c1cbe5; }
.privacy-toc a:hover, .privacy-toc a:focus-visible { color: var(--accent); border-color: var(--accent); }
.privacy-section { border-color: var(--line); }
.privacy-section-number, .privacy-section li::marker { color: var(--accent); }
.privacy-section p, .privacy-section li, .privacy-section dd { color: #d0d8ec; }
.privacy-section dt { color: #a9b7d8; }
.privacy-section a, .privacy-contact a {
  color: var(--accent);
  text-decoration-color: #5697bb;
}
.privacy-section a:hover, .privacy-contact a:hover { color: #a1f6ff; }
.privacy-contact {
  border-color: #424779;
  background: linear-gradient(120deg, #171d46, #121128);
}
.privacy-contact p { color: #c4cee9; }
.privacy-contact .button { color: #071523; }

@media (max-width: 1100px) {
  .hero-content { max-width: 510px; }
  .hero-visual { right: -32px; width: min(62vw, 680px); height: min(62vw, 680px); }
}
@media (max-width: 800px) {
  .hero { min-height: 730px; }
  .hero::before {
    background: linear-gradient(180deg, #080716 0%, rgba(8, 7, 22, .98) 35%, rgba(8, 7, 22, .2) 68%, transparent 100%);
  }
  .hero-content { max-width: none; }
  .hero-visual {
    top: 325px;
    left: -20px;
    right: auto;
    width: calc(100% + 40px);
    height: 390px;
    transform: none;
    mask-image: none;
  }
  .hero-visual img { object-fit: contain; object-position: center; }
  .plan-card:only-child { max-width: none; }
}
@media (max-width: 540px) {
  .brand-symbol { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; }
  .brand-symbol img { width: 58px; height: 58px; left: -8px; top: -8px; }
  .brand-tag { display: none; }
  .hero { min-height: 680px; }
  .hero-visual { top: 315px; height: 355px; }
  .hero h1 { font-size: clamp(39px, 10.4vw, 57px); }
  .hero-description { max-width: 340px; }
  .footer .brand-symbol { width: 28px; height: 28px; flex-basis: 28px; }
  .footer .brand-symbol img { width: 38px; height: 38px; left: -5px; top: -5px; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-card { transition: none; }
  .plan-card:hover { transform: none; }
}