/* === base.css — Variables, Reset, Utilities === */

      :root {
        --primary: #d97d16;
        --primary-dark: #9d4101;
        --primary-bright: #ff9700;
        --bg-primary: #0a0a0b;
        --bg-secondary: #111113;
        --bg-tertiary: #16161a;
        --text-primary: #f0f0f0;
        --text-secondary: #a0a0a8;
        --text-muted: #6b6b74;
        --font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
        --font-heading: "Space Grotesk", "Inter", sans-serif;
        --font-ar: "Noto Kufi Arabic", "Inter", sans-serif;
        --radius: 12px;
        --radius-sm: 8px;
        --radius-lg: 16px;
        --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        --max-width: 1280px;
        --nav-height: 72px;
      }

      /* ============================================================
       RESET & BASE
       ============================================================ */
      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
      }
      body {
        font-family: var(--font);
        background: var(--bg-primary);
        color: var(--text-primary);
        overflow-x: hidden;
        line-height: 1.6;
      }
      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(--font);
      }
      input,
      textarea,
      select {
        font-family: var(--font);
      }

      /* ============================================================
       UTILITY
       ============================================================ */
      .container {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 24px;
      }
      .section {
        padding: 120px 0;
        position: relative;
        overflow: hidden;
      }
      .section-header {
        text-align: center;
        margin-bottom: 64px;
      }
      .section-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 16px;
        background: rgba(217, 125, 22, 0.1);
        border: 1px solid rgba(217, 125, 22, 0.25);
        border-radius: 100px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--primary);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 20px;
      }
      .section-header.revealed .section-label {
        animation: badgeSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
      }
      .section-header.revealed .section-title {
        animation: textReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
      }
      .section-header.revealed .section-subtitle {
        animation: textReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
      }
      .section-title {
        font-family: var(--font-heading);
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.03em;
        margin-bottom: 16px;
      }
      .section-subtitle {
        font-size: 1.1rem;
        color: var(--text-secondary);
        max-width: 640px;
        margin: 0 auto;
        line-height: 1.7;
      }
      .accent {
        color: var(--primary);
      }
      .gradient-text {
        background: linear-gradient(
          135deg,
          var(--primary),
          var(--primary-bright),
          #ffd700,
          var(--primary)
        );
        background-size: 300% 300%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .text-shimmer {
        animation: shimmer 3s ease-in-out infinite;
      }
      .reveal {
        opacity: 0;
        transform: translateY(24px);
      }
      .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
        transition:
          opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
      }