:root {
  --nova-navy: #07111f;
  --nova-deep: #0b1324;
  --nova-blue: #0057ff;
  --nova-electric: #2563ff;
  --nova-soft-blue: #7ea7ff;
  --nova-green: #00d68f;
  --nova-cyan: #21d4fd;
  --nova-violet: #7c6cff;
  --nova-off-white: #f7f9fc;
  --nova-light: #e8ecf2;
  --nova-ink: #0d1728;
  --nova-muted: #65738a;
  --glass-light: rgba(255, 255, 255, .72);
  --glass-light-strong: rgba(255, 255, 255, .84);
  --glass-dark: rgba(7, 17, 31, .56);
  --glass-line: rgba(255, 255, 255, .68);
  --glass-line-dark: rgba(255, 255, 255, .14);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --shadow-1: 0 8px 24px rgba(7, 17, 31, .06);
  --shadow-2: 0 18px 55px rgba(7, 17, 31, .10);
  --shadow-dark: 0 28px 90px rgba(0, 0, 0, .28);
}

html {
  background: var(--nova-off-white);
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 92% 8%, rgba(37, 99, 255, .10), transparent 29rem),
    radial-gradient(circle at 8% 36%, rgba(124, 108, 255, .08), transparent 26rem),
    linear-gradient(rgba(7, 17, 31, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 17, 31, .022) 1px, transparent 1px),
    linear-gradient(180deg, #fbfcff 0%, var(--nova-off-white) 42%, #f2f6fb 100%);
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
  color: var(--nova-ink);
  min-height: 100vh;
}

nav {
  background: rgba(249, 251, 255, .78) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .80) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 8px 30px rgba(7, 17, 31, .05);
}

nav .brand,
nav .brand-text > span {
  color: var(--nova-ink);
}

nav .brand-text small,
nav .nav-links,
nav .nav,
nav .back {
  color: #68758a;
}

nav a:not(.btn) {
  transition: color .18s ease, opacity .18s ease;
}

nav a:not(.btn):hover {
  color: var(--nova-blue);
}

.btn,
button {
  border-radius: 14px !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.btn.primary,
button:not(:disabled) {
  background: linear-gradient(135deg, var(--nova-blue), var(--nova-electric)) !important;
  border-color: rgba(37, 99, 255, .95) !important;
  box-shadow: 0 12px 30px rgba(0, 87, 255, .24) !important;
}

.btn.primary:hover,
button:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(0, 87, 255, .31) !important;
}

.btn.secondary {
  background: rgba(255, 255, 255, .09) !important;
  border-color: rgba(255, 255, 255, .24) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .12);
}

.page-home .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 16%, rgba(37, 99, 255, .35), transparent 30rem),
    radial-gradient(circle at 12% 88%, rgba(124, 108, 255, .22), transparent 28rem),
    radial-gradient(circle at 64% 78%, rgba(33, 212, 253, .08), transparent 20rem),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(120deg, #06101e 0%, #0b1830 55%, #102b55 100%) !important;
  background-size: auto, auto, auto, 38px 38px, 38px 38px, auto;
}

.page-home .hero::after,
.page-pricing .hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  right: -150px;
  top: -190px;
  background: radial-gradient(circle, rgba(124, 108, 255, .26), rgba(37, 99, 255, .08) 45%, transparent 70%);
  filter: blur(12px);
  pointer-events: none;
  z-index: -1;
}

.page-home .lead {
  color: #dce7f6;
}

.page-home .pill {
  background: rgba(255, 255, 255, .09) !important;
  border: 1px solid rgba(255, 255, 255, .19) !important;
  border-radius: 999px !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 8px 24px rgba(0, 0, 0, .10);
}

.page-home .dashboard {
  position: relative;
  background: linear-gradient(145deg, rgba(8, 20, 38, .76), rgba(7, 17, 31, .54)) !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  border-radius: var(--radius-lg) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  box-shadow: var(--shadow-dark), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

.page-home .dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .06), transparent 28%, transparent 70%, rgba(37, 99, 255, .05));
}

.page-home .metric {
  background: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .045)) !important;
  border-color: rgba(255, 255, 255, .13) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.page-home section:not(.hero) {
  position: relative;
  background: transparent !important;
}

.page-home section:not(.hero)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 10%, rgba(37, 99, 255, .055), transparent 22rem),
    radial-gradient(circle at 8% 90%, rgba(124, 108, 255, .045), transparent 20rem);
}

.page-home section:nth-of-type(3) {
  background: linear-gradient(180deg, rgba(235, 241, 251, .52), rgba(248, 250, 253, .34)) !important;
}

.card,
.form-box,
.page-contact form,
.page-legal .box,
.page-pricing .table {
  background: var(--glass-light) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: var(--radius-md) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, .78) !important;
}

.card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(126, 167, 255, .72) !important;
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .88) !important;
}

.page-home .offer > .price {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 0%, rgba(37, 99, 255, .32), transparent 18rem),
    linear-gradient(145deg, rgba(7, 17, 31, .92), rgba(11, 30, 59, .84)) !important;
  border: 1px solid rgba(126, 167, 255, .28) !important;
  border-radius: var(--radius-lg) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
  box-shadow: 0 24px 70px rgba(7, 17, 31, .20), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.note,
.notice {
  background: rgba(255, 248, 235, .78) !important;
  border-radius: 14px !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  box-shadow: 0 10px 30px rgba(116, 76, 19, .06);
}

input,
select,
textarea {
  min-height: 46px;
  background: rgba(255, 255, 255, .84) !important;
  border: 1px solid rgba(188, 201, 220, .78) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 2px rgba(7, 17, 31, .025);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

textarea {
  min-height: 118px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, .96) !important;
  border-color: rgba(0, 87, 255, .66) !important;
  box-shadow: 0 0 0 4px rgba(0, 87, 255, .10), inset 0 1px 2px rgba(7, 17, 31, .02);
}

:focus-visible {
  outline: 3px solid rgba(0, 87, 255, .34);
  outline-offset: 3px;
}

.page-pricing main,
.page-contact main,
.page-scenarios main,
.page-legal main {
  position: relative;
  background: transparent !important;
}

.page-pricing .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 8%, rgba(37, 99, 255, .32), transparent 22rem),
    radial-gradient(circle at 5% 95%, rgba(124, 108, 255, .17), transparent 18rem),
    linear-gradient(130deg, #06101e, #0b1a34 62%, #102c57) !important;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-dark), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.page-pricing .card.featured {
  border-color: rgba(37, 99, 255, .34) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 99, 255, .11), transparent 15rem),
    var(--glass-light-strong) !important;
}

.page-pricing .tag {
  background: rgba(0, 87, 255, .09) !important;
  color: #154ea8 !important;
  border: 1px solid rgba(0, 87, 255, .12);
}

.page-pricing .table {
  overflow: hidden;
}

.page-pricing .table th {
  background: rgba(239, 244, 251, .78) !important;
}

.page-pricing .table th,
.page-pricing .table td {
  border-color: rgba(206, 216, 230, .72) !important;
}

.page-contact .wrap,
.page-scenarios main,
.page-legal main {
  position: relative;
  z-index: 1;
}

.page-contact main::before,
.page-scenarios main::before,
.page-legal main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 6%, rgba(37, 99, 255, .08), transparent 22rem),
    radial-gradient(circle at 8% 92%, rgba(124, 108, 255, .06), transparent 20rem);
}

.page-contact form {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .85) !important;
}

.page-scenarios .card {
  min-height: 190px;
}

.page-scenarios .tag {
  color: var(--nova-blue) !important;
}

.page-legal main {
  max-width: 960px !important;
  margin-top: 34px !important;
  margin-bottom: 54px !important;
  padding: 42px 42px 58px !important;
  background: rgba(255, 255, 255, .67) !important;
  border: 1px solid rgba(255, 255, 255, .80);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, .86);
}

.page-legal p,
.page-legal li {
  color: #5e6d83 !important;
}

.page-legal h2 {
  color: var(--nova-ink);
}

footer {
  background:
    radial-gradient(circle at 85% 0%, rgba(37, 99, 255, .12), transparent 18rem),
    linear-gradient(135deg, #07111f, #0b1629) !important;
  border-top: 1px solid rgba(255, 255, 255, .09) !important;
  color: #aebbd0 !important;
}

footer a,
footer .foot a {
  color: #dbe7f8 !important;
}

.page-404 {
  background:
    radial-gradient(circle at 78% 18%, rgba(37, 99, 255, .26), transparent 28rem),
    radial-gradient(circle at 18% 82%, rgba(124, 108, 255, .18), transparent 24rem),
    linear-gradient(135deg, #06101e, #0b1930 60%, #10264a) !important;
  color: white !important;
}

.page-404 main {
  width: min(520px, calc(100vw - 32px));
  padding: 44px 32px !important;
  background: rgba(7, 17, 31, .48);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
  box-shadow: var(--shadow-dark), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.page-404 p {
  color: #cbd7e8 !important;
}

.page-404 a {
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--nova-blue), var(--nova-electric)) !important;
  box-shadow: 0 12px 30px rgba(0, 87, 255, .25);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  nav { background: rgba(249, 251, 255, .96) !important; }
  .card,
  .form-box,
  .page-contact form,
  .page-legal .box,
  .page-pricing .table { background: rgba(255, 255, 255, .96) !important; }
  .page-home .dashboard,
  .page-home .offer > .price,
  .page-404 main { background: rgba(7, 17, 31, .94) !important; }
}

@media (max-width: 860px) {
  body { background-size: auto, auto, 40px 40px, 40px 40px, auto; }
  .page-home .hero { padding-top: 48px !important; padding-bottom: 44px !important; }
  .page-home .dashboard { border-radius: 20px !important; }
  .page-home section:not(.hero) { padding-top: 62px !important; padding-bottom: 62px !important; }
  .page-legal main { margin: 22px 14px 38px !important; padding: 32px 22px 44px !important; }
  .page-pricing .hero { padding: 30px 24px !important; }
}

@media (max-width: 520px) {
  nav .nav-inner,
  nav .bar { padding-left: 16px !important; padding-right: 16px !important; }
  .page-home .hero { padding-left: 18px !important; padding-right: 18px !important; }
  .page-home .hero-actions .btn { width: 100%; }
  .page-home .pilot-strip { gap: 8px !important; }
  .page-home .pill { padding: 8px 11px !important; }
  .card,
  .form-box,
  .page-contact form { padding: 20px !important; }
  input,
  select,
  textarea { font-size: 16px !important; }
  .page-legal main { margin-left: 10px !important; margin-right: 10px !important; border-radius: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
  .card:hover,
  .btn:hover,
  button:hover { transform: none !important; }
}
