/* ═══════════════════════════════════════
   VaultEdu Official Website — Base Reset & Typography
   ═══════════════════════════════════════ */

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--vlt-font);
  background: var(--vlt-bg-darkest);
  color: var(--vlt-white);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.vlt-container { width: min(90%, 1100px); margin-inline: auto; }
.vlt-section { padding-block: clamp(3rem, 8vw, 6rem); }

.vlt-label {
  display: inline-block;
  font-size: clamp(0.65rem, 1.1vw, 0.78rem);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 3px; color: var(--vlt-teal); margin-bottom: 1rem;
}
.vlt-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800; line-height: 1.15; margin-bottom: 1rem;
}
.vlt-subtitle {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  color: var(--vlt-white-muted); max-width: 680px; line-height: 1.7;
}

.hl { color: var(--vlt-teal); }
.gold { color: var(--vlt-gold); }
.red { color: var(--vlt-red); }
.green { color: var(--vlt-green-light); }

/* Scroll Reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Footer */
.vlt-footer {
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--vlt-white-border);
  text-align: center;
}
.vlt-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem; text-align: left; margin-bottom: 2rem;
}
.vlt-footer__col h4 {
  font-size: 0.85rem; font-weight: 700; color: var(--vlt-white);
  margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 1px;
}
.vlt-footer__col a, .vlt-footer__col p {
  display: block; font-size: 0.85rem; color: var(--vlt-white-muted);
  padding: 0.2rem 0; transition: color var(--vlt-transition-fast);
}
.vlt-footer__col a:hover { color: var(--vlt-teal-light); }
.vlt-footer__bottom {
  font-size: 0.78rem; color: var(--vlt-white-faint);
  padding-top: 1.5rem; border-top: 1px solid var(--vlt-white-border);
}