/* ==========================================================================
   Doctor 24By7 — Theme Tokens & Base
   Red pamphlet healthcare SaaS theme
   (Legacy `--c-*-purple` token names retained for compatibility; values are red.)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand palette — red */
  --c-deep-purple:    #7A0F22;  /* deep red */
  --c-primary-purple: #C8102E;  /* primary red */
  --c-soft-purple:    #E04458;  /* soft red */
  --c-crimson:        #D2143C;

  /* Surfaces */
  --c-bg:             #FFFAFB;
  --c-surface:        #FFFFFF;
  --c-surface-alt:    #FDF3F4;
  --c-surface-tint:   #FBE5E8;

  /* Text */
  --c-text:           #1F0A0E;
  --c-text-muted:     #6B4A4E;
  --c-text-soft:      #9B7F84;
  --c-text-on-dark:   #FFFFFF;
  --c-text-on-dark-muted: rgba(255,255,255,0.78);

  /* Lines */
  --c-border:         #F2D9DD;
  --c-border-strong:  #E5B4BC;

  /* Status */
  --c-success:        #10B981;
  --c-warning:        #F59E0B;
  --c-danger:         var(--c-crimson);

  /* Gradients */
  --g-purple:         linear-gradient(135deg, #7A0F22 0%, #C8102E 55%, #E04458 100%);
  --g-purple-soft:    linear-gradient(135deg, #C8102E 0%, #E04458 100%);
  --g-crimson:        linear-gradient(135deg, #D2143C 0%, #8B1A45 100%);
  --g-hero:           radial-gradient(1200px 600px at 90% -10%, rgba(224,68,88,0.35), transparent 60%),
                      radial-gradient(800px 500px at -10% 30%, rgba(210,20,60,0.22), transparent 60%),
                      linear-gradient(160deg, #5A0817 0%, #7A0F22 50%, #C8102E 100%);
  --g-card-glow:      linear-gradient(135deg, rgba(200,16,46,0.06), rgba(210,20,60,0.04));

  /* Type */
  --f-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type scale */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  /* Spacing */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-64: 64px;
  --s-80: 80px;
  --s-96: 96px;
  --s-120: 120px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(40, 10, 14, 0.06);
  --sh-sm: 0 4px 12px rgba(40, 10, 14, 0.06);
  --sh-md: 0 10px 30px rgba(122, 15, 34, 0.10);
  --sh-lg: 0 24px 60px rgba(122, 15, 34, 0.18);
  --sh-glow: 0 18px 40px rgba(200, 16, 46, 0.28);
  --sh-glow-crimson: 0 18px 40px rgba(210, 20, 60, 0.22);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 880px;
  --nav-h: 80px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  font-size: 93.75%;
  scrollbar-width: thin;
  scrollbar-color: var(--c-primary-purple) transparent;
}

/* Thin scrollbar — WebKit (Chrome / Safari / Edge) */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--c-primary-purple);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--c-deep-purple);
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; }

a {
  color: var(--c-primary-purple);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--c-deep-purple); }

button { font-family: inherit; cursor: pointer; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

p { margin: 0 0 var(--s-16); }

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-heading);
  color: var(--c-text);
  margin: 0 0 var(--s-16);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: 700;
}

h1 { font-size: clamp(var(--fs-40), 5vw, var(--fs-72)); font-weight: 800; }
h2 { font-size: clamp(var(--fs-28), 3.6vw, var(--fs-48)); }
h3 { font-size: clamp(var(--fs-24), 2.4vw, var(--fs-32)); }
h4 { font-size: var(--fs-20); font-weight: 600; }
h5 { font-size: var(--fs-18); font-weight: 600; }
h6 { font-size: var(--fs-16); font-weight: 600; }

.text-gradient {
  background: var(--g-purple);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.text-crimson { color: var(--c-crimson); }
.text-muted { color: var(--c-text-muted); }
.text-soft  { color: var(--c-text-soft); }
.text-center { text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--f-heading);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primary-purple);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--c-surface-tint);
  border: 1px solid var(--c-border);
  white-space: nowrap;
}

.eyebrow--on-dark {
  color: #FFE0E5;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
}

.lead {
  font-size: var(--fs-18);
  color: var(--c-text-muted);
  max-width: 720px;
}

/* ==========================================================================
   Containers & Section
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding: var(--s-96) 0;
  overflow: hidden;
}

.section--sm { padding: var(--s-64) 0; }
.section--lg { padding: var(--s-120) 0; }

.section--tint { background: var(--c-surface-alt); }
.section--dark { background: var(--g-purple); color: var(--c-text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 { color: var(--c-text-on-dark); }
.section--dark .lead, .section--dark .text-muted { color: var(--c-text-on-dark-muted); }

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--s-64);
}

.section-header .lead { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Utility
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.divider {
  height: 1px;
  background: var(--c-border);
  border: 0;
  margin: var(--s-32) 0;
}

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-16 { margin-top: var(--s-16); }
.mt-24 { margin-top: var(--s-24); }
.mt-32 { margin-top: var(--s-32); }
.mt-48 { margin-top: var(--s-48); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}