:root {
  color-scheme: dark;
  --color-black: #050608;
  --color-surface: #0c0d11;
  --color-panel: #12141a;
  --color-panel-raised: #191b23;
  --color-cyan: #18d9e8;
  --color-blue: #2874ff;
  --color-violet: #713cff;
  --color-text: #f7f8fc;
  --color-muted: #a7aab7;
  --color-line: rgba(255, 255, 255, .1);
  background: var(--color-black);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html {
  background: var(--color-black);
  scroll-padding-top: 5rem;
}

body {
  color: var(--color-text);
  background:
    radial-gradient(ellipse at 80% 6%, rgba(40, 116, 255, .09), transparent 34rem),
    radial-gradient(ellipse at 8% 30%, rgba(113, 60, 255, .06), transparent 38rem),
    var(--color-black);
}

header,
#mobile-menu {
  background-color: rgba(6, 7, 9, .94) !important;
  border-color: var(--color-line) !important;
  backdrop-filter: blur(16px);
}

footer,
nav[aria-label="Legal and support links"] {
  background-color: #08090c !important;
  border-color: var(--color-line) !important;
}

.bg-ink,
[class~="bg-[#07162f]"],
[class~="bg-[#091c38]"] {
  background-color: var(--color-black) !important;
}

.bg-panel,
[class~="bg-[#0c2040]"],
[class~="bg-[#10284d]"] {
  background-color: var(--color-panel) !important;
}

.plan-card,
.comparison-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 52%),
    var(--color-panel) !important;
  border-color: var(--color-line) !important;
}

.plan-card:hover,
.comparison-card:hover {
  border-color: rgba(24, 217, 232, .48) !important;
}

.plan-card.featured-plan {
  background:
    linear-gradient(145deg, rgba(113, 60, 255, .16), transparent 58%),
    var(--color-panel-raised) !important;
  border-color: rgba(113, 60, 255, .72) !important;
  box-shadow: 0 16px 48px rgba(49, 29, 108, .18);
}

.hosting-visual {
  background:
    radial-gradient(ellipse at 92% 10%, rgba(40, 116, 255, .2), transparent 24rem),
    linear-gradient(120deg, #12141a, #0b0c10) !important;
  border-color: rgba(24, 217, 232, .2) !important;
}

.comparison-section {
  background:
    radial-gradient(ellipse at 16% 50%, rgba(113, 60, 255, .1), transparent 28rem),
    #090a0d !important;
}

.text-blue,
.text-azure,
.comparison-price {
  color: var(--color-cyan) !important;
}

.text-muted,
.text-slate-600,
.text-slate-500 {
  color: var(--color-muted) !important;
}

.text-ink {
  color: #050608 !important;
}

.bg-azure,
.bg-blue {
  background-color: var(--color-cyan) !important;
}

.bg-navy {
  background: linear-gradient(110deg, var(--color-violet), #3b5dff) !important;
}

.border-azure,
.border-blue {
  border-color: rgba(24, 217, 232, .55) !important;
}

.currency-select,
select,
input,
.quantity-control {
  color-scheme: dark;
}

select,
input,
.quantity-control {
  border-color: rgba(255, 255, 255, .14) !important;
  background-color: #090a0e !important;
}

.cart-addon-option input {
  accent-color: var(--color-cyan);
}

.cart-remove:hover {
  color: #ff829c;
}

a,
button {
  transition:
    color .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

a:hover,
button:hover {
  text-decoration-color: var(--color-cyan);
}

.bg-azure:hover,
.bg-blue:hover {
  background-color: #70f1f5 !important;
}

.plan-link:hover,
.bg-navy:hover {
  box-shadow: 0 0 24px rgba(113, 60, 255, .32);
  filter: brightness(1.12);
}

:focus-visible {
  outline-color: var(--color-cyan);
  box-shadow: 0 0 0 4px rgba(24, 217, 232, .16);
}

.hero-glow {
  background:
    radial-gradient(ellipse at 73% 36%, rgba(40, 116, 255, .16), transparent 36%),
    radial-gradient(ellipse at 27% 42%, rgba(113, 60, 255, .13), transparent 42%),
    linear-gradient(145deg, #08090d, #050608 70%);
}

.hero-glow::before {
  background:
    radial-gradient(ellipse at 28% 42%, rgba(24, 217, 232, .19), transparent 38%),
    radial-gradient(ellipse at 75% 44%, rgba(113, 60, 255, .2), transparent 36%);
}

.hero-glow::after {
  background-image:
    linear-gradient(135deg, transparent 0 48%, rgba(40, 116, 255, .18) 48.2% 49.2%, transparent 49.4%),
    linear-gradient(45deg, transparent 0 55%, rgba(255, 255, 255, .09) 55.2% 56.2%, transparent 56.4%),
    radial-gradient(circle, rgba(24, 217, 232, .8) 1px, transparent 1.5px);
  background-size: 390px 280px, 480px 320px, 110px 110px;
  background-position: right 6% top 10%, right -8% top 44%, 4px 9px;
  opacity: .35;
}

@media (max-width: 640px) {
  .brand-crop {
    width: min(42vw, 165px);
  }

  .plan-card:hover,
  .comparison-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}