/* BASE — CSS Variables, Reset, Typography, Utilities, Buttons, Scroll-Reveal */
/* ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   BALAJI EYE FOUNDATION — Premium Eye Care
   style.css  |  Est. 1998  |  Gobichettipalayam
═══════════════════════════════════════════════════════════════ */

/* ── ROOT & RESET ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --navy:     #01335c;
  --blue:     #0288d1;
  --sky:      #29b6f6;
  --pale:     #e1f5fe;
  --off:      #f0f9ff;
  --gold:     #ffc107;
  --text:     #0d1f35;
  --muted:    #4a6b87;
  --border:   #c8e6f7;
  --white:    #ffffff;
  --serif:    'Cormorant Garamond', Georgia, serif;
  --sans:     'DM Sans', 'Segoe UI', sans-serif;
  --rad:      14px;
  --rad-sm:   8px;
  --shadow:   0 4px 24px rgba(2,136,209,.12);
  --shadow-lg:0 12px 48px rgba(2,136,209,.20);
  --trans:    .3s ease;
}

html  { scroll-behavior: smooth; font-size: 16px; }
body  { font-family: var(--sans); color: var(--text); background: #fff; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a     { text-decoration: none; color: inherit; }
ul, ol{ list-style: none; }
img   { max-width: 100%; display: block; }
button{ cursor: pointer; border: none; background: none; font-family: var(--sans); }

/* ── UTILITIES ────────────────────────────────────────────── */
.container  { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.section    { padding: 80px 0; }
.section-sm { padding: 52px 0; }
.label      { display: inline-flex; align-items: center; gap: 8px; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.label::before { content: ''; display: block; width: 22px; height: 2px; background: var(--blue); }
.heading    { font-family: var(--serif); font-size: clamp(1.7rem,4vw,2.6rem); font-weight: 700; color: var(--navy); line-height: 1.18; margin-bottom: 12px; }
.heading em { font-style: italic; color: var(--blue); }
.subtext    { font-size: .93rem; color: var(--muted); line-height: 1.78; max-width: 520px; margin-bottom: 40px; }
.center     { text-align: center; }
.center .subtext { margin-left: auto; margin-right: auto; }
.center .label   { justify-content: center; }

/* Buttons */
.btn         { display: inline-flex; align-items: center; gap: 8px; -webkit-font-smoothing: antialiased; padding: 13px 26px; border-radius: var(--rad-sm); font-family: var(--sans); font-weight: 600; font-size: .88rem; transition: var(--trans); border: 2px solid transparent; white-space: nowrap; cursor: pointer; }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--navy); border-color: var(--navy); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(2,136,209,.35); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-dark    { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-dark:hover { background: #022848; transform: translateY(-2px); }
.btn-wa      { background: #25d366; color: #fff; border-color: #25d366; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.btn-wa:hover{ background: #1da851; border-color: #1da851; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,.55); }

/* Scroll reveal — directional variants */
.reveal         { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal-left    { opacity: 0; transform: translateX(-28px); transition: opacity .7s ease, transform .7s ease; }
.reveal-right   { opacity: 0; transform: translateX(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: none; }
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }