/* ─── DESIGN TOKENS ─────────────────────────────── */
:root {
  --primary:       #0a3d62;
  --primary-dark:  #061f33;
  --primary-mid:   #0d4f80;
  --accent:        #f6b93b;
  --accent-dark:   #d4941a;
  --accent-light:  #ffd866;
  --white:         #ffffff;
  --off-white:     #f8fafc;
  --light-bg:      #f1f5f9;
  --border:        #e2e8f0;
  --text:          #1e293b;
  --text-light:    #64748b;
  --text-muted:    #94a3b8;
  --success:       #059669;
  --success-light: #d1fae5;
  --success-mid:   #a7f3d0;
  --error:         #dc2626;
  --error-light:   #fee2e2;
  --grad-primary:  linear-gradient(135deg, #061f33 0%, #0a3d62 55%, #0d5a8e 100%);
  --grad-accent:   linear-gradient(135deg, #f6b93b 0%, #ffc107 100%);
  --grad-gold:     linear-gradient(135deg, #c17f24 0%, #f6b93b 50%, #ffd866 100%);
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.06);
  --shadow:        0 8px 32px rgba(0,0,0,0.08);
  --shadow-lg:     0 20px 60px rgba(0,0,0,0.12);
  --shadow-xl:     0 32px 80px rgba(0,0,0,0.18);
  --shadow-gold:   0 8px 32px rgba(246,185,59,0.22);
  --shadow-blue:   0 12px 40px rgba(10,61,98,0.2);
  --radius:        16px;
  --radius-lg:     24px;
  --radius-xl:     32px;
  --ease:          cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--light-bg);
  font-family: 'Poppins', sans-serif;
  color: var(--text);
  min-height: 100vh;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

a { touch-action: manipulation; }
button { touch-action: manipulation; }

/* ─── SHARED KEYFRAMES (used across multiple CSS files) ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.vc-animate {
  animation: fadeInUp 0.55s var(--ease) both;
}

/* sealRotate — used by both cert banner (.vcb-seal-ring) and header (.vph-seal-ring) */
@keyframes sealRotate {
  to { transform: rotate(360deg); }
}

/* vcbPulse — used by cert banner (.vcb-pulse) and header (.vph-seal-pulse) */
@keyframes vcbPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.18); opacity: 0; }
}