/* Cleared RCM — shared visual system
   Sourced from brand_brief.md §4. Violet #6D28D9 primary, Inter only, zinc neutrals. */

:root {
  --brand-50:  #F5F3FF;
  --brand-100: #EDE9FE;
  --brand-200: #DDD6FE;
  --brand-300: #C4B5FD;
  --brand-400: #A78BFA;
  --brand-500: #8B5CF6;
  --brand-600: #7C3AED;
  --brand-700: #6D28D9;
  --brand-800: #5B21B6;
  --brand-900: #4C1D95;
  --brand-950: #2E1065;
}

html { scroll-behavior: smooth; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss03', 'cv02';
  text-rendering: optimizeLegibility;
}

/* Selection */
::selection { background: #DDD6FE; color: #2E1065; }

/* Focus rings (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #6D28D9;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.reveal.in { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 80ms; }
.delay-2 { transition-delay: 160ms; }
.delay-3 { transition-delay: 240ms; }
.delay-4 { transition-delay: 320ms; }
.delay-5 { transition-delay: 400ms; }

/* Subtle dotted grid background (used on hero + dark sections) */
.dotgrid {
  background-image: radial-gradient(circle at 1px 1px, rgba(109,40,217,0.10) 1px, transparent 0);
  background-size: 28px 28px;
}
.dotgrid-dark {
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
  background-size: 28px 28px;
}

/* Soft animated gradient blobs */
@keyframes blob {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(28px,-32px) scale(1.06); }
  66%     { transform: translate(-22px,22px) scale(0.96); }
}
.animate-blob { animation: blob 18s ease-in-out infinite; }
.animate-blob-slow { animation: blob 24s ease-in-out infinite; }

/* Hero entry animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-up { opacity: 0; animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.fade-in { opacity: 0; animation: fadeIn 1s ease-out forwards; }

/* Pulse dot for "now onboarding" badge */
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(124,58,237,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(124,58,237,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
}
.pulse-dot::before {
  content: ''; position: absolute; inset: 0; border-radius: 9999px;
  animation: pulseDot 2.2s ease-out infinite;
}

/* Marquee line connecting the 4 steps */
.step-connector::after {
  content: ''; position: absolute; top: 28px; right: -1rem; width: 1rem; height: 1px;
  background: linear-gradient(to right, rgba(109,40,217,0.4), transparent);
}
@media (max-width: 1023px) { .step-connector::after { display: none; } }

/* Underline-on-hover for nav links */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 220ms ease-out;
}
.nav-link:hover::after { transform: scaleX(1); }

/* Number tabular for stats */
.tnum { font-variant-numeric: tabular-nums; }

/* Card lift */
.lift { transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out; }
.lift:hover { transform: translateY(-3px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Skip link */
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: #6D28D9; color: #fff; padding: 0.5rem 1rem; border-radius: 0.5rem;
  font-weight: 600; font-size: 0.875rem; transition: top 180ms ease-out;
}
.skip-link:focus { top: 1rem; }

/* Mobile nav drawer */
.mnav { transform: translateY(-100%); transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); }
.mnav.open { transform: translateY(0); }

/* Inline brand logo lockup — SVG-based so CLEARED RCM stretches to match the subtitle width via textLength */
.cr-logo { display: inline-flex; align-items: center; color: #6D28D9; }
.cr-logo svg { height: 100%; width: auto; display: block; }
.cr-logo-light { color: #fff; }

/* ---- Liquid Glass (iOS 26-style) — violet tinted ---- */
.liquid-glass {
  position: relative;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.55) 0%,
      rgba(237,233,254,0.45) 40%,
      rgba(196,181,253,0.30) 100%);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(109,40,217,0.10),
    inset 1px 0 0 rgba(255,255,255,0.30),
    0 1px 2px rgba(109,40,217,0.08),
    0 8px 24px -10px rgba(109,40,217,0.30),
    0 2px 8px -2px rgba(109,40,217,0.18);
}
/* Specular sheen sweeping across the surface */
.liquid-glass::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 25%,
    rgba(255,255,255,0.40) 45%,
    rgba(255,255,255,0.10) 55%,
    transparent 70%);
  mix-blend-mode: overlay;
  opacity: 0.7;
}
/* Top-edge highlight for the chromed look */
.liquid-glass::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.10) 18%,
    transparent 35%);
  mix-blend-mode: screen;
  opacity: 0.8;
}

/* ---- Liquid Glass VIOLET (for dark surfaces / featured cards) ---- */
.liquid-glass-violet {
  position: relative;
  background:
    linear-gradient(135deg, #7C3AED 0%, #5B21B6 45%, #2E1065 100%);
  border: 1px solid rgba(167,139,250,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(46,16,101,0.5),
    inset 1px 0 0 rgba(255,255,255,0.10),
    0 14px 38px -10px rgba(76,29,149,0.55),
    0 4px 16px -2px rgba(76,29,149,0.35);
}
.liquid-glass-violet::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.28) 0%,
    rgba(255,255,255,0.08) 16%,
    transparent 32%);
  mix-blend-mode: screen;
  opacity: 0.9;
}
.liquid-glass-violet::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(140% 90% at 100% 0%, rgba(216,180,254,0.25), transparent 50%),
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 48%, rgba(196,181,253,0.06) 56%, transparent 70%);
  mix-blend-mode: overlay;
  opacity: 0.9;
}