/**
 * Metter — bright high-end blue AI skin
 * Soft sky atmosphere + blue depth; readable contrast.
 */
:root {
  --m-void: #eef5ff;
  --m-ink: #f7faff;
  --m-panel: rgba(255, 255, 255, 0.78);
  --m-panel-strong: rgba(255, 255, 255, 0.92);
  --m-line: rgba(37, 99, 235, 0.16);
  --m-line-strong: rgba(37, 99, 235, 0.28);
  --m-text: #0b1a33;
  --m-muted: #3d4f6a;
  --m-faint: #4d6180;
  --m-blue: #2563eb;
  --m-blue-deep: #1d4ed8;
  --m-sky: #0ea5e9;
  --m-glow: rgba(37, 99, 235, 0.35);
}

html {
  color-scheme: light;
  background: var(--m-void);
}

body {
  background:
    radial-gradient(ellipse 85% 55% at 8% -8%, rgba(96, 165, 250, 0.42), transparent 55%),
    radial-gradient(ellipse 65% 45% at 96% 4%, rgba(56, 189, 248, 0.22), transparent 50%),
    radial-gradient(ellipse 55% 40% at 50% 105%, rgba(37, 99, 235, 0.12), transparent 55%),
    linear-gradient(180deg, #f7faff 0%, #eef5ff 42%, #e8f1ff 100%) !important;
  color: var(--m-text) !important;
  min-height: 100%;
}

/* Soft atmospheric mesh */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.7;
  background:
    radial-gradient(circle at 18% 28%, rgba(59, 130, 246, 0.1), transparent 30%),
    radial-gradient(circle at 82% 55%, rgba(14, 165, 233, 0.08), transparent 34%),
    radial-gradient(circle at 42% 78%, rgba(37, 99, 235, 0.07), transparent 32%);
}

body > * {
  position: relative;
  z-index: 1;
}

/* ---- Tailwind slate → blue ink (light surfaces) ---- */
.text-slate-900,
.text-slate-800 {
  color: #0b1a33 !important;
}
.text-slate-700 {
  color: #152a4a !important;
}
.text-slate-600 {
  color: var(--m-muted) !important;
}
.text-slate-500,
.text-slate-400 {
  color: var(--m-faint) !important;
}
.text-slate-300 {
  color: #7aa0c8 !important;
}
.text-white {
  color: #fff !important;
}

.bg-white {
  background: var(--m-panel-strong) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.bg-white\/95,
.bg-white\/80 {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(18px);
}

.bg-slate-50,
.bg-slate-50\/90,
.bg-slate-50\/80 {
  background: rgba(238, 245, 255, 0.85) !important;
}
.bg-slate-100 {
  background: rgba(219, 234, 254, 0.9) !important;
}
.bg-slate-900 {
  background: linear-gradient(180deg, #0f274a 0%, #0a1730 100%) !important;
}

.border-slate-100,
.border-slate-200,
.border-slate-200\/60,
.border-slate-200\/70 {
  border-color: var(--m-line) !important;
}
.border-slate-800 {
  border-color: rgba(96, 165, 250, 0.35) !important;
}

.ring-slate-200,
.ring-slate-200\/60,
.ring-slate-200\/70 {
  --tw-ring-color: rgba(37, 99, 235, 0.22) !important;
}

/* Light gradient sections */
.from-slate-50 {
  --tw-gradient-from: #eef5ff !important;
  --tw-gradient-to: rgb(238 245 255 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #f7faff, var(--tw-gradient-to) !important;
}
.to-slate-50 {
  --tw-gradient-to: #e8f1ff !important;
}

.from-brand-100,
.from-sky-100,
.from-slate-100 {
  --tw-gradient-from: #bfdbfe !important;
  --tw-gradient-to: rgb(191 219 254 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-sky-50,
.to-brand-50,
.to-brand-50\/80 {
  --tw-gradient-to: #eff6ff !important;
}
.via-sky-50 {
  --tw-gradient-to: rgb(239 246 255 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #e0f2fe, var(--tw-gradient-to) !important;
}

.bg-brand-50,
.bg-brand-50\/80 {
  background: rgba(96, 165, 250, 0.16) !important;
}
.border-brand-100 {
  border-color: rgba(96, 165, 250, 0.4) !important;
}
.text-brand-100 {
  color: #dbeafe !important;
}
.text-brand-600,
.text-brand-700,
.text-brand-800,
.text-brand-950 {
  color: #1d4ed8 !important;
}
.border-brand-200 {
  border-color: rgba(59, 130, 246, 0.45) !important;
}
.hover\:text-brand-700:hover,
.hover\:text-brand-800:hover {
  color: #1e40af !important;
}
.bg-brand-600 {
  background-image: linear-gradient(135deg, #38bdf8 0%, #2563eb 45%, #1d4ed8 100%) !important;
  background-color: #2563eb !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 12px 36px -10px var(--m-glow) !important;
}
.hover\:bg-brand-700:hover {
  background-image: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%) !important;
  background-color: #3b82f6 !important;
}
.shadow-brand-600\/25,
.shadow-brand-600\/30 {
  --tw-shadow-color: rgba(37, 99, 235, 0.3) !important;
}

/* Surfaces with depth */
.glass {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
  border-bottom: 1px solid var(--m-line) !important;
  box-shadow: 0 10px 40px -28px rgba(30, 64, 175, 0.35);
}

.hero-sky {
  background:
    radial-gradient(ellipse 90% 70% at 12% -15%, rgba(96, 165, 250, 0.45), transparent 55%),
    radial-gradient(ellipse 70% 55% at 92% 5%, rgba(56, 189, 248, 0.22), transparent 50%),
    radial-gradient(ellipse 50% 40% at 55% 60%, rgba(59, 130, 246, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(247, 250, 255, 0.55) 0%, transparent 70%) !important;
  position: relative;
}
.hero-sky::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, #eef5ff);
}

.phone-mock {
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.35),
    0 0 70px -18px rgba(37, 99, 235, 0.4),
    0 36px 70px -28px rgba(30, 64, 175, 0.35) !important;
}

/* Cards / panels */
.rounded-2xl.border,
.rounded-xl.border,
.rounded-2xl.bg-white,
article.overflow-hidden.rounded-2xl,
details.group {
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.08),
    0 18px 44px -28px rgba(30, 64, 175, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

details.group {
  background: var(--m-panel) !important;
  border-color: var(--m-line) !important;
}

.ring-brand-500,
.ring-2 {
  --tw-ring-color: rgba(37, 99, 235, 0.5) !important;
}

/* CTA band */
section.bg-brand-600 {
  background:
    radial-gradient(ellipse 80% 80% at 50% 0%, rgba(56, 189, 248, 0.35), transparent 55%),
    linear-gradient(135deg, #1d4ed8 0%, #2563eb 40%, #0ea5e9 70%, #1e40af 100%) !important;
  position: relative;
  overflow: hidden;
}
section.bg-brand-600::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.12), transparent 40%);
  pointer-events: none;
}

section.bg-brand-600 .bg-white {
  background: #fff !important;
  color: #1e40af !important;
}
section.bg-brand-600 a.bg-white {
  color: #1e40af !important;
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Footer — deep blue contrast band */
footer.bg-slate-900,
footer.bg-slate-900.text-slate-400,
footer.bg-slate-900.text-slate-500 {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(96, 165, 250, 0.22), transparent 60%),
    linear-gradient(180deg, #0f274a 0%, #0a1730 100%) !important;
  border-top: 1px solid rgba(96, 165, 250, 0.25);
  color: #e0efff !important;
}
footer.bg-slate-900 .text-white,
footer.bg-slate-900 .text-slate-900,
footer.bg-slate-900 .text-slate-800,
footer.bg-slate-900 .text-slate-700,
footer.bg-slate-900 h4 {
  color: #ffffff !important;
}
footer.bg-slate-900 .text-slate-600,
footer.bg-slate-900 .text-slate-500,
footer.bg-slate-900 .text-slate-400,
footer.bg-slate-900 p,
footer.bg-slate-900 li,
footer.bg-slate-900 .text-sm {
  color: #e0efff !important;
}
footer.bg-slate-900 a {
  color: #bfdbfe !important;
}
footer.bg-slate-900 a:hover,
footer.bg-slate-900 .hover\:text-white:hover {
  color: #ffffff !important;
}
footer.bg-slate-900 .border-slate-800 {
  border-color: rgba(147, 197, 253, 0.28) !important;
}

/* Soft hover on marketing cards */
article.overflow-hidden.rounded-2xl:hover {
  border-color: var(--m-line-strong) !important;
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.22),
    0 28px 56px -28px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.bg-brand-50.border {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(56, 189, 248, 0.1)) !important;
}

.prose a,
a.text-brand-700 {
  color: #1d4ed8 !important;
}
.prose a:hover,
a.text-brand-700:hover {
  color: #1e40af !important;
}

/* Phone mock inner stay product-real */
.phone-mock .bg-white {
  background: #fff !important;
  color: #0f172a !important;
}
.phone-mock .text-slate-900 {
  color: #0f172a !important;
}
.phone-mock .text-slate-600,
.phone-mock .text-slate-500 {
  color: #475569 !important;
}

@media (prefers-reduced-motion: reduce) {
  article.overflow-hidden.rounded-2xl:hover {
    transform: none;
  }
}