/* ===== VITA — Design System v2 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --brand:          #1B3A6B;   /* deep navy — authority */
  --brand-d:        #122950;

  /* MRT */
  --mrt:            #2563EB;
  --mrt-d:          #1D4ED8;
  --mrt-light:      #EFF6FF;
  --mrt-mid:        #1E40AF;

  /* Dental */
  --dent:           #0D9488;
  --dent-d:         #0F766E;
  --dent-light:     #F0FDFA;
  --dent-mid:       #0F5E55;

  /* Neutrals */
  --white:          #FFFFFF;
  --surface:        #F8FAFC;
  --text:           #0F172A;
  --text-2:         #334155;
  --muted:          #64748B;
  --border:         #E2E8F0;
  --border-d:       #CBD5E1;

  /* Tokens */
  --radius-sm:      6px;
  --radius:         10px;
  --radius-lg:      16px;
  --shadow-sm:      0 1px 4px rgba(0,0,0,.06);
  --shadow:         0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:      0 12px 40px rgba(0,0,0,.12);
  --transition:     .22s ease;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  line-height: 1.6;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 28px;
  border-radius: var(--radius); font-weight: 600;
  font-size: 15px; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: all var(--transition);
  letter-spacing: .01em; white-space: nowrap;
}
.btn--brand     { background: var(--brand);   color: #fff; border-color: var(--brand); }
.btn--brand:hover { background: var(--brand-d); border-color: var(--brand-d); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(27,58,107,.25); }

.btn--mrt       { background: var(--mrt);     color: #fff; border-color: var(--mrt); }
.btn--mrt:hover { background: var(--mrt-d);   border-color: var(--mrt-d); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,.25); }

.btn--dent      { background: var(--dent);    color: #fff; border-color: var(--dent); }
.btn--dent:hover { background: var(--dent-d); border-color: var(--dent-d); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(13,148,136,.25); }

.btn--ghost     { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); }
.btn--ghost:hover { border-color: rgba(255,255,255,.85); background: rgba(255,255,255,.1); }

.btn--outline-mrt  { background: transparent; color: var(--mrt);  border-color: var(--mrt); }
.btn--outline-mrt:hover  { background: var(--mrt);  color: #fff; }
.btn--outline-dent { background: transparent; color: var(--dent); border-color: var(--dent); }
.btn--outline-dent:hover { background: var(--dent); color: #fff; }

/* ---- Section titles ---- */
.section-title {
  font-size: 26px; font-weight: 700; color: var(--brand);
  margin-bottom: 32px; line-height: 1.25;
}
.section-title--mrt  { color: var(--mrt-mid); }
.section-title--dent { color: var(--dent-mid); }
.section-title span  { display: block; font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 4px; letter-spacing: .06em; text-transform: uppercase; }

/* ---- Shared nav header ---- */
.site-topbar {
  background: var(--brand); color: rgba(255,255,255,.75);
  font-size: 13px; padding: 8px 0;
}
.site-topbar .container { display: flex; justify-content: space-between; align-items: center; }
.site-topbar a { color: rgba(255,255,255,.75); text-decoration: none; }
.site-topbar a:hover { color: #fff; }

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(0,0,0,.05);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; gap: 24px;
}
.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.site-logo img { height: 34px; width: auto; }
.site-logo__name {
  font-size: 20px; font-weight: 800; color: var(--brand);
  letter-spacing: .03em;
}
.site-logo__name span { color: var(--mrt); }

.site-header-phone {
  font-size: 14px; font-weight: 600; color: var(--brand);
  text-decoration: none;
}
.site-header-phone:hover { color: var(--mrt); }

/* ---- Utility ---- */
.section     { padding: 64px 0; }
.section--bg { background: var(--surface); }