/* ═══════════════════════════════════════════
   ALPHA KLID — BASE STYLES
   Reset, Variables, Typography, Utilities
   ═══════════════════════════════════════════ */

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

    html { overflow-x: hidden; width: 100%; scroll-behavior: smooth; }

    :root {
      --gold: #C9A84C;
      --gold-light: #E8D48B;
      --gold-dark: #A68B2D;
      --dark: #08080C;
      --dark-mid: #0E0E14;
      --dark-card: #14141C;
      --cream: #FAF8F3;
      --cream-dark: #F2EEE5;
      --text: #1A1A1A;
      --text-light: #5C5C5C;
      --text-muted: #999;
      --serif: 'Frank Ruhl Libre', 'Cormorant Garamond', serif;
      --sans: 'Rubik', sans-serif;
    }

    body {
      font-family: var(--sans);
      color: var(--text);
      background: var(--cream);
      line-height: 1.7;
      overflow-x: hidden;
      width: 100%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ─── SECTION STYLING ─── */
    section { padding: 8rem 2rem; }

    .section-header {
      text-align: center;
      margin-bottom: 5rem;
    }
    .section-overline {
      display: inline-block;
      color: var(--gold);
      font-size: 0.75rem;
      letter-spacing: 5px;
      text-transform: uppercase;
      font-weight: 500;
      margin-bottom: 1.2rem;
    }
    .section-header h2 {
      font-family: var(--serif);
      font-size: clamp(2.2rem, 4.5vw, 3.2rem);
      color: var(--dark);
      margin-bottom: 1.2rem;
      font-weight: 700;
      line-height: 1.3;
    }
    .section-header .line {
      width: 40px;
      height: 1.5px;
      background: var(--gold);
      margin: 1.5rem auto;
    }
    .section-header p {
      color: var(--text-light);
      font-size: 1.08rem;
      max-width: 560px;
      margin: 0 auto;
      line-height: 1.9;
    }

    /* ─── SECTION DIVIDER (curved transitions) ─── */
    .section-curve {
      position: relative;
    }
    .section-curve::after {
      content: '';
      position: absolute;
      bottom: -50px;
      left: 0;
      width: 100%;
      height: 50px;
      background: inherit;
      clip-path: ellipse(55% 100% at 50% 0%);
      z-index: 2;
    }

    /* ─── FOCUS STYLES ─── */
    :focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
    }
    .btn-primary:focus-visible,
    .btn-outline:focus-visible,
    .nav-cta-btn:focus-visible,
    .form-submit:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
      box-shadow: 0 0 0 4px rgba(201,168,76,0.25);
    }
    .faq-question:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: -2px;
    }
    .chatbot-toggle:focus-visible,
    .wa-float-btn:focus-visible,
    .scroll-top-btn:focus-visible,
    .mobile-menu-btn:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
    }
    .privacy-close:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }
    .chat-option-btn:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }

    /* ─── SKIP TO CONTENT ─── */
    .skip-to-content {
      position: absolute;
      top: -100%;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gold);
      color: var(--dark);
      padding: 0.8rem 1.5rem;
      border-radius: 0 0 8px 8px;
      font-weight: 700;
      font-size: 0.9rem;
      z-index: 10001;
      text-decoration: none;
      transition: top 0.2s;
    }
    .skip-to-content:focus {
      top: 0;
    }

    /* ─── SR ONLY (screen reader) ─── */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    /* ─── REDUCED MOTION ─── */
    @media (prefers-reduced-motion: reduce) {
      .hero-word { animation: none !important; opacity: 1 !important; }
      .hero-bg img { animation: none !important; }
      .impact-card::before { animation: none !important; }
      .program-card { transition: none !important; }
      .scroll-progress { display: none !important; }
    }