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

:root {
  /* Brand Colors — modern dental (teal / deep navy / warm accent) */
  --color-primary:        #0D9488;
  --color-primary-dark:   #0B3B3A;
  --color-primary-light:  #14B8A6;
  --color-navy:           #0B1E33;
  --color-navy-light:     #14304F;
  --color-accent:         #F5A524;
  --color-accent-light:   #FFD08A;
  --color-mint:           #E6FBF8;

  /* Neutrals */
  --color-white:  #FFFFFF;
  --color-gray-50: #F7FAFA;
  --color-gray-100:#EEF3F3;
  --color-gray-200:#E1E9E9;
  --color-gray-300:#C9D6D6;
  --color-gray-400:#96ABAB;
  --color-gray-500:#6B8484;
  --color-gray-600:#4C6262;
  --color-gray-700:#334747;
  --color-gray-800:#1F2E2E;
  --color-gray-900:#0F1A1A;

  /* Semantic */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;

  /* Light Theme (default) */
  --bg-primary:   #FFFFFF;
  --bg-secondary: #F7FAFA;
  --bg-card:      #FFFFFF;
  --text-primary: #0B1E33;
  --text-secondary:#5A7070;
  --text-muted:   #96ABAB;
  --border-color: #E1E9E9;
  --shadow-color: rgba(11,30,51,0.08);
  --nav-bg:       rgba(255,255,255,0.9);

  /* Typography */
  --font-family: 'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
  --font-display: 'Poppins', 'Plus Jakarta Sans', system-ui, sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1.25rem;
  --radius-2xl: 1.75rem;
  --radius-full:9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(11,30,51,0.06), 0 1px 2px rgba(11,30,51,0.04);
  --shadow-md:  0 4px 16px rgba(11,30,51,0.10);
  --shadow-lg:  0 12px 32px rgba(11,30,51,0.14);
  --shadow-xl:  0 24px 60px rgba(11,30,51,0.18);
  --shadow-glow:0 8px 24px rgba(13,148,136,0.35);

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4,0,0.2,1);
  --transition-normal: 300ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   550ms cubic-bezier(0.16,1,0.3,1);

  /* Layout */
  --container-max: 1240px;
  --nav-height:    76px;
}

[data-theme="dark"] {
  --bg-primary:   #0A1622;
  --bg-secondary: #0F1F30;
  --bg-card:      #12263A;
  --text-primary: #EAF4F4;
  --text-secondary:#9FB4B4;
  --text-muted:   #6B8484;
  --border-color: #1E3648;
  --shadow-color: rgba(0,0,0,0.35);
  --nav-bg:       rgba(10,22,34,0.85);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary:   #0A1622;
    --bg-secondary: #0F1F30;
    --bg-card:      #12263A;
    --text-primary: #EAF4F4;
    --text-secondary:#9FB4B4;
    --text-muted:   #6B8484;
    --border-color: #1E3648;
    --shadow-color: rgba(0,0,0,0.35);
    --nav-bg:       rgba(10,22,34,0.85);
  }
}

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

html {
  scroll-behavior: smooth; font-size: 16px;
  /* Mobile browsers size their initial zoom level to fit the widest
     overflowing element on the page, not just the viewport meta tag —
     without this, any element that's even a few px wider than the screen
     (e.g. a fixed-position control at the edge) makes the whole page render
     zoomed out until the user pinch-zooms and forces a reflow. Clipping on
     html (not just body) removes that overflow at the actual layout root. */
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  overflow-x: hidden;
  width: 100%;
}

img { max-width: 100%; display: block; }
a  { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--font-family); }
ul { list-style: none; }

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

@media (max-width: 768px) {
  .container { padding: 0 var(--space-4); }
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; }

/* Keeps anchor jumps (same-page or from another page) clear of the fixed navbar */
section[id] { scroll-margin-top: var(--nav-height); }

/* ===== Scroll reveal utility (driven by js/main.js IntersectionObserver) ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="scale"] { transform: translateY(0) scale(0.92); }
[data-reveal="scale"].is-visible { transform: scale(1); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="right"].is-visible { transform: translateX(0); }

/* Stagger children */
[data-reveal-group] > * { transition-delay: calc(var(--stagger-i, 0) * 90ms); }

/* ===== Section spacing ===== */
.section { padding: var(--space-24) 0; }
@media (max-width: 768px) { .section { padding: var(--space-16) 0; } }

.section-head { max-width: 640px; margin: 0 auto var(--space-12); text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em;
  color: var(--color-primary); background: var(--color-mint);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
[data-theme="dark"] .eyebrow { background: rgba(13,148,136,0.15); }
.section-head h2 { font-size: var(--text-4xl); margin-bottom: var(--space-4); color: var(--text-primary); }
.section-head p { color: var(--text-secondary); font-size: var(--text-lg); }
@media (max-width: 640px) { .section-head h2 { font-size: var(--text-3xl); } }