:root {
  --premium-deep: #040b18;
  --premium-navy: #071a38;
  --premium-blue: #2563ff;
  --premium-cyan: #00d4ff;
  --premium-violet: #7168ff;
  --premium-glow: rgba(0, 212, 255, .22);
}

body {
  background:
    linear-gradient(rgba(17, 109, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 109, 255, .018) 1px, transparent 1px),
    #fff;
  background-size: 34px 34px;
}

.site-header,
.header {
  background: rgba(4, 11, 24, .9);
  border-bottom-color: rgba(126, 231, 255, .13);
  box-shadow: 0 12px 40px rgba(4, 11, 24, .16);
}

.site-header .brand,
.header .brand { color: #fff; }
.site-header .brand-mark,
.header .brand-mark { background: linear-gradient(135deg, var(--premium-cyan), var(--premium-violet)); box-shadow: 0 0 26px var(--premium-glow); }
.site-header .nav-links,
.header .links { color: #b9c8dc; }
.site-header .nav-links a:hover,
.header .links a:hover { color: #fff; }
.site-header .menu-toggle,
.header .menu { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }

.hero {
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(circle at 80% 12%, rgba(0, 212, 255, .2), transparent 25%),
    radial-gradient(circle at 18% 88%, rgba(113, 104, 255, .2), transparent 30%),
    linear-gradient(145deg, #030914 0%, #071a38 58%, #0a3570 100%);
}

.hero::before {
  width: 520px;
  height: 520px;
  right: -210px;
  top: -230px;
  background: radial-gradient(circle, rgba(0, 212, 255, .24), transparent 68%);
  filter: blur(4px);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .28;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255,255,255,.82) 0 1px, transparent 1.6px),
    radial-gradient(circle at 24% 72%, rgba(0,212,255,.9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 62% 28%, rgba(255,255,255,.76) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 66%, rgba(113,104,255,.95) 0 1px, transparent 1.7px);
  background-size: 170px 170px, 210px 210px, 260px 260px, 190px 190px;
}

.hero .eyebrow,
.hero-copy .eyebrow { color: #9deeff; }
.hero h1,
.hero-copy h1 { text-wrap: balance; }
.hero h1 span,
.hero-copy h1 span {
  color: transparent;
  background: linear-gradient(100deg, #87ecff, #7b9dff 52%, #b8a8ff);
  background-clip: text;
  -webkit-background-clip: text;
}
.hero .lead,
.hero-copy .lead,
.hero-copy p { color: #c7d6e9; }
.hero-price { color: #aebfd5; }
.hero-price strong { color: #fff; }
.hero-proof span,
.hero-points span {
  padding: 8px 12px;
  color: #dce9f8;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--premium-cyan), var(--premium-blue) 52%, var(--premium-violet));
  background-size: 180% 100%;
  box-shadow: 0 16px 38px rgba(37, 99, 255, .3), inset 0 1px rgba(255,255,255,.25);
}
.btn-primary:hover { background-position: 100% 0; box-shadow: 0 20px 46px rgba(37, 99, 255, .38); }
.hero .btn-secondary { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); backdrop-filter: blur(10px); }

.site-preview {
  border-color: rgba(255,255,255,.52);
  box-shadow: 0 36px 90px rgba(0,0,0,.36), 0 0 0 1px rgba(0,212,255,.1);
  transform: perspective(1100px) rotateY(-4deg) rotateX(2deg) rotateZ(1deg);
}
.site-preview::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  background: linear-gradient(135deg, rgba(0,212,255,.27), rgba(113,104,255,.18));
  border-radius: 44px;
  filter: blur(26px);
}
.audit-note { background: linear-gradient(145deg, #081d3b, #123e7a); border: 1px solid rgba(126,231,255,.25); }

.offer-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(126,231,255,.34);
  box-shadow: 0 36px 90px rgba(0,0,0,.34), 0 0 0 1px rgba(37,99,255,.08);
}
.offer-panel::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -80px;
  top: -90px;
  background: radial-gradient(circle, rgba(0,212,255,.22), transparent 70%);
  border-radius: 50%;
}
.offer-panel > * { position: relative; }

.audience-strip,
.fit-strip {
  background: linear-gradient(90deg, #f6f9ff, #ecf5ff 50%, #f6f9ff);
  border-color: #d4e4f7;
}

.section-head h2,
.system-intro h2 { text-wrap: balance; }
.eyebrow::before { background: linear-gradient(90deg, var(--premium-cyan), var(--premium-violet)); }

.problem-card,
.stage-card,
.card,
.process-step,
.step,
.comparison-card,
.fit-card,
.qualify article,
.scenario {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.problem-card:hover,
.stage-card:hover,
.card:hover,
.process-step:hover,
.step:hover,
.comparison-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37, 99, 255, .3);
  box-shadow: 0 22px 55px rgba(7, 26, 51, .11);
}

.problem-card,
.card,
.process-step,
.step,
.comparison-card { background: rgba(255,255,255,.88); backdrop-filter: blur(10px); }
.problem-card .number,
.card-number { background: linear-gradient(135deg, #e7f8ff, #e9ebff); box-shadow: inset 0 0 0 1px rgba(37,99,255,.08); }

.stage-card { overflow: hidden; }
.stage-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--premium-cyan), var(--premium-violet));
}
.stage-card:first-child { background: linear-gradient(145deg, #06162d, #0c3773); }
.stage-number { box-shadow: 0 0 30px rgba(0,212,255,.2); }

.advanced-card {
  background:
    radial-gradient(circle at 90% 5%, rgba(0,212,255,.16), transparent 28%),
    linear-gradient(145deg, #050e20, #0a2b5c);
  border: 1px solid rgba(126,231,255,.16);
}
.advanced-card.ads {
  background:
    radial-gradient(circle at 90% 5%, rgba(113,104,255,.2), transparent 28%),
    linear-gradient(145deg, #060d20, #1a245c);
}
.advanced-card:hover { transform: translateY(-5px); box-shadow: 0 34px 80px rgba(4,11,24,.25); }

.section-mint,
.soft-section { background: linear-gradient(145deg, #edf5ff, #f8fbff 55%, #eef1ff); }
.price-box { background: linear-gradient(145deg, #050e20, #0c3570); border: 1px solid rgba(126,231,255,.18); box-shadow: 0 32px 80px rgba(4,11,24,.25); }
.daily-pill { background: linear-gradient(90deg, #8beeff, #9ca7ff); }
.deliverables div { border-color: rgba(17,109,255,.12); }

.comparison-card header { background: linear-gradient(90deg, #f7faff, #eef5ff); }
.after { background: linear-gradient(145deg, #050e20, #0e3975) !important; }
.scenario { box-shadow: 0 26px 65px rgba(7,26,51,.09); }
.scenario-flow div { background: linear-gradient(145deg, #edf8ff, #edf0ff); border: 1px solid rgba(37,99,255,.11); }

.faq-item { border-color: #d6e4f4; }
.faq-q:hover,
.faq-question:hover { color: var(--premium-blue); }
.faq-q span,
.faq-question span { background: linear-gradient(135deg, var(--premium-cyan), var(--premium-violet)); }

.contact-section,
.dark-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(0,212,255,.18), transparent 24%),
    radial-gradient(circle at 12% 88%, rgba(113,104,255,.18), transparent 28%),
    linear-gradient(145deg, #030914, #071a38 60%, #0b3d7f);
}
.contact-form,
.form { border: 1px solid rgba(126,231,255,.2); box-shadow: 0 34px 85px rgba(0,0,0,.28); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--premium-blue); box-shadow: 0 0 0 4px rgba(37,99,255,.1); outline: none; }

.legal-banner { position: relative; overflow: hidden; background: linear-gradient(145deg, #030914, #071a38 62%, #0b3d7f); }
footer { border-top: 1px solid rgba(126,231,255,.1); }

@media (max-width: 1000px) {
  .site-header .nav-links,
  .header .links { background: rgba(4,11,24,.98); border-bottom-color: rgba(126,231,255,.14); }
  .site-header .nav-links a,
  .header .links a { color: #d9e5f3; }
  .site-preview { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .problem-card,
  .stage-card,
  .card,
  .process-step,
  .step,
  .comparison-card,
  .advanced-card { transition: none; }
}