/* ==========================================================================
   PracticeOS Premium Rescue Layer
   Purpose: restore ultra-premium dark SaaS / AI medical database aesthetic
   without touching Netlify Functions, Stripe, Supabase, or route logic.
   ========================================================================== */

:root {
  --po-void: #030712;
  --po-deep: #050914;
  --po-navy: #071120;
  --po-panel: rgba(12, 20, 38, 0.84);
  --po-panel-2: rgba(17, 28, 52, 0.78);
  --po-card: rgba(15, 25, 48, 0.86);
  --po-card-2: rgba(9, 16, 31, 0.88);
  --po-line: rgba(148, 163, 184, 0.16);
  --po-line-strong: rgba(34, 211, 238, 0.34);
  --po-text: rgba(248, 251, 255, 0.97);
  --po-text-2: rgba(224, 234, 249, 0.86);
  --po-muted: rgba(178, 193, 216, 0.70);
  --po-soft: rgba(148, 163, 184, 0.56);
  --po-cyan: #22d3ee;
  --po-blue: #60a5fa;
  --po-indigo: #818cf8;
  --po-emerald: #34d399;
  --po-gold: #f5c84c;
  --po-danger: #fb7185;
  --po-radius-xl: 28px;
  --po-shadow: 0 32px 100px rgba(0, 0, 0, 0.46);
  --po-glow: 0 0 90px rgba(34, 211, 238, 0.11);
}

/* Foundation */
html {
  background: var(--po-void) !important;
}

body,
body.os-body,
body.os-body--platform,
body.os-body--platinum {
  margin: 0;
  color: var(--po-text) !important;
  background:
    radial-gradient(circle at 18% -8%, rgba(34, 211, 238, 0.17), transparent 34rem),
    radial-gradient(circle at 88% 6%, rgba(129, 140, 248, 0.13), transparent 32rem),
    radial-gradient(circle at 58% 48%, rgba(52, 211, 153, 0.055), transparent 42rem),
    linear-gradient(180deg, #030712 0%, #071120 42%, #040814 100%) !important;
  background-attachment: fixed !important;
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.95), rgba(0,0,0,0.2));
}

.os-main,
.os-main--landing {
  max-width: 1220px !important;
  background: transparent !important;
}

/* Topbar */
.os-topbar,
.os-topbar--platinum,
.os-topbar--platform {
  background: rgba(3, 7, 18, 0.78) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
}

.os-brand strong,
.os-topbar--platinum .os-brand strong {
  background: linear-gradient(135deg, #fff 0%, #dff8ff 42%, var(--po-cyan) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  letter-spacing: -0.03em;
}

.os-brand span {
  color: var(--po-muted) !important;
}

/* Kill accidental light-theme fragments */
.bg-white,
.bg-slate-50,
.bg-slate-100,
.from-slate-50,
.via-white,
.to-slate-100,
#why-now {
  background: transparent !important;
}

.text-slate-900,
.text-slate-800,
.text-slate-700,
.text-slate-600,
.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-gray-600,
.text-black {
  color: var(--po-text) !important;
}

/* Hero */
.os-hero-platinum {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 8vw, 118px) clamp(24px, 5vw, 70px) !important;
  max-width: 1220px !important;
  margin: 0 auto 56px !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(34, 211, 238, 0.18), transparent 28rem),
    radial-gradient(circle at 82% 20%, rgba(129, 140, 248, 0.16), transparent 30rem),
    linear-gradient(135deg, rgba(12, 20, 38, 0.96), rgba(5, 10, 22, 0.94)) !important;
  border: 1px solid rgba(34, 211, 238, 0.22) !important;
  box-shadow: var(--po-shadow), var(--po-glow), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.os-hero-platinum::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.04) 42%, transparent 58%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 30rem);
  opacity: 0.75;
}

.os-hero-platinum > * {
  position: relative;
  z-index: 1;
}

.os-hero-platinum nav {
  background: rgba(5, 10, 22, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 999px;
  padding: 8px;
  width: fit-content;
  margin-left: auto;
}

/* Typography */
.os-display,
h1,
h2,
h3,
.os-h1,
.os-section-platinum__title,
.os-hero-platinum__h1 {
  font-family: "Sora", "DM Sans", system-ui, sans-serif !important;
  color: var(--po-text) !important;
  opacity: 1 !important;
}

.os-hero-platinum__h1 {
  max-width: 1120px !important;
  margin: 22px 0 0 !important;
  font-size: clamp(3.05rem, 7vw, 7.25rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.078em !important;
  background: linear-gradient(180deg, #ffffff 0%, #eaf6ff 46%, #a9c8e7 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.os-section-platinum__title,
section h2,
h2.os-display {
  max-width: 1050px;
  font-size: clamp(2.25rem, 5.35vw, 5.7rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.065em !important;
  margin-bottom: 28px !important;
  color: var(--po-text) !important;
}

p,
li,
.os-lead,
.os-card p,
.os-price-card p,
.os-modal__panel p,
.os-modal__panel li {
  color: var(--po-muted) !important;
  line-height: 1.68;
}

.os-lead,
.os-hero-platinum .os-lead {
  color: var(--po-text-2) !important;
  font-size: clamp(1.08rem, 1.7vw, 1.38rem) !important;
  line-height: 1.7 !important;
}

.os-eyebrow {
  color: var(--po-cyan) !important;
  letter-spacing: 0.18em !important;
}

/* Fix hero relationship line */
.os-hero-platinum .text-2xl {
  color: var(--po-text-2) !important;
}

.os-hero-platinum .text-white {
  color: #ffffff !important;
}

/* Sections */
.os-section-platinum {
  position: relative;
  margin: 72px 0 !important;
  padding: clamp(48px, 6vw, 76px) clamp(22px, 4.5vw, 56px) !important;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(15, 25, 48, 0.62), rgba(7, 15, 30, 0.38)) !important;
  border: 1px solid rgba(148, 163, 184, 0.12);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255,255,255,0.035);
}

#why-now {
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.13), transparent 24rem),
    linear-gradient(180deg, rgba(12, 20, 38, 0.84), rgba(7, 15, 30, 0.72)) !important;
  border-color: rgba(34, 211, 238, 0.18);
}

#why-now::before {
  content: "WHY PRACTICEOS EXISTS";
  display: inline-flex;
  width: fit-content;
  margin-bottom: 18px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--po-cyan);
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.16);
  font-family: var(--os-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
}

/* Cards */
.os-card,
.os-card--platinum,
.os-glass,
.os-glass--platinum,
.os-price-card,
.os-stat,
.os-dash-metric,
.os-module-card,
.os-module-engine__card,
.os-sidebar-panel,
.os-pricing-hero {
  background:
    linear-gradient(180deg, rgba(18, 30, 56, 0.86), rgba(9, 16, 31, 0.88)) !important;
  border: 1px solid rgba(148, 163, 184, 0.15) !important;
  border-radius: 22px !important;
  box-shadow: 0 22px 70px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.045) !important;
  color: var(--po-text) !important;
}

.os-card--platinum::before {
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.44), transparent) !important;
}

.os-card:hover,
.os-card--platinum:hover,
.os-module-engine__card:hover {
  border-color: rgba(34, 211, 238, 0.36) !important;
  transform: translateY(-3px);
  box-shadow: 0 30px 88px rgba(0,0,0,0.36), 0 0 55px rgba(34,211,238,0.08) !important;
}

.os-card strong,
.os-module-engine__verb {
  color: var(--po-text) !important;
}

/* Dashboard preview and workflow */
.os-dash-preview {
  margin: 48px auto 72px !important;
  max-width: 1180px;
  background: rgba(5, 10, 22, 0.72) !important;
  border: 1px solid rgba(34, 211, 238, 0.25) !important;
  border-radius: 26px !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.38), 0 0 80px rgba(34,211,238,0.11) !important;
}

.os-claim-flow {
  background:
    linear-gradient(180deg, rgba(7, 15, 30, 0.76), rgba(5, 10, 22, 0.58)) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 22px !important;
  gap: 10px !important;
}

.os-claim-flow__node {
  background: rgba(15, 25, 48, 0.78) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  border-radius: 16px !important;
  color: var(--po-muted) !important;
  min-height: 76px;
}

.os-claim-flow__node strong {
  color: var(--po-cyan) !important;
  font-size: 13px !important;
}

.os-claim-flow__arrow {
  color: rgba(34, 211, 238, 0.58) !important;
}

/* Proof stats */
.text-4xl,
.os-dash-metric__val,
.os-price {
  color: var(--po-emerald) !important;
}

.os-dash-metric--platinum .os-dash-metric__val {
  background: linear-gradient(135deg, #ffffff, var(--po-cyan), var(--po-emerald)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Buttons */
.os-btn,
button,
a[class*="os-btn"],
a[class*="btn"] {
  border-radius: 14px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

.os-btn--platinum,
.os-btn--primary,
.btn-primary,
a[href="/app?demo=1"] {
  background: linear-gradient(135deg, #22d3ee 0%, #60a5fa 50%, #818cf8 100%) !important;
  color: #02111d !important;
  border: 0 !important;
  box-shadow: 0 18px 52px rgba(34, 211, 238, 0.24), inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

.os-btn--platinum:hover,
.os-btn--primary:hover,
.btn-primary:hover,
a[href="/app?demo=1"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 24px 68px rgba(34, 211, 238, 0.32), inset 0 1px 0 rgba(255,255,255,0.42) !important;
}

.os-btn--secondary,
.os-btn--ghost,
.btn-secondary,
a[href="https://reimburseos.com"] {
  background: rgba(15, 25, 48, 0.68) !important;
  color: var(--po-text) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

.os-btn--secondary:hover,
.os-btn--ghost:hover,
.btn-secondary:hover {
  border-color: rgba(34, 211, 238, 0.36) !important;
  background: rgba(20, 34, 64, 0.82) !important;
  transform: translateY(-2px) !important;
}

/* Giant CTA buttons Cursor added */
.os-hero-platinum a[href="/app?demo=1"],
.os-hero-platinum a[href="https://reimburseos.com"] {
  font-size: clamp(1rem, 1.4vw, 1.28rem) !important;
  padding: 18px 26px !important;
  border-radius: 18px !important;
}

/* Trust strip */
.os-trust-strip {
  color: var(--po-muted) !important;
  gap: 10px !important;
}

.os-trust-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--po-text-2);
  background: rgba(15, 25, 48, 0.64);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

/* Module grid */
.os-module-engine {
  gap: 16px !important;
}

.os-module-engine__card {
  min-height: 190px;
  text-decoration: none !important;
}

.os-module-engine__accent {
  height: 4px !important;
  margin-bottom: 18px !important;
  border-radius: 999px !important;
}

/* Pricing preview */
.os-pricing-hero {
  background:
    radial-gradient(circle at 20% 0%, rgba(52, 211, 153, 0.12), transparent 25rem),
    linear-gradient(180deg, rgba(18, 30, 56, 0.92), rgba(7, 15, 30, 0.86)) !important;
  border-color: rgba(52, 211, 153, 0.22) !important;
}

.os-pricing-hero .os-card {
  min-height: 190px;
}

/* Footer */
.os-footer,
.os-footer--platinum,
footer {
  background: linear-gradient(180deg, rgba(3, 7, 18, 0.40), rgba(3, 7, 18, 0.96)) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
}

.os-footer a,
footer a {
  color: var(--po-cyan) !important;
  text-decoration-color: rgba(34, 211, 238, 0.48) !important;
}

/* Rail/sidebar polish */
.os-rail,
.os-sidebar-panel,
aside {
  background: rgba(9, 16, 31, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

/* Hide accidental floating screenshot artifacts */
.floating-screenshot,
.os-floating-preview,
.os-page-thumbnail,
.os-scroll-preview,
[class*="thumbnail"],
img[alt*="screenshot" i],
img[src*="screenshot" i] {
  display: none !important;
}

/* Mobile excellence */
@media (max-width: 900px) {
  .os-main,
  .os-main--landing {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .os-hero-platinum {
    padding: 54px 22px !important;
    border-radius: 26px !important;
  }

  .os-hero-platinum nav {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start !important;
    border-radius: 18px;
  }

  .os-hero-platinum__h1 {
    font-size: clamp(2.6rem, 14vw, 4.7rem) !important;
    letter-spacing: -0.07em !important;
  }

  .os-section-platinum__title,
  section h2,
  h2.os-display {
    font-size: clamp(2rem, 10vw, 3.6rem) !important;
    letter-spacing: -0.055em !important;
  }

  .os-section-platinum {
    padding: 42px 20px !important;
    border-radius: 24px !important;
    margin: 44px 0 !important;
  }

  .os-grid-2,
  .os-grid-3,
  .os-module-engine,
  .os-module-grid,
  .os-dash-metrics {
    grid-template-columns: 1fr !important;
  }

  .os-claim-flow {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .os-claim-flow__arrow {
    transform: rotate(90deg);
    align-self: center;
    margin: -2px 0;
  }

  .os-hero-platinum .flex {
    gap: 12px !important;
  }

  .os-hero-platinum a[href="/app?demo=1"],
  .os-hero-platinum a[href="https://reimburseos.com"],
  .os-btn {
    width: 100%;
    justify-content: center;
  }
}