/* ============================================
   RFCONTABLE — Global Design System
   globals.css
   ============================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================
   1. CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
  /* --- Colors --- */
  --color-primary:       #1A5CFF;
  --color-primary-light: #4DA3FF;
  --color-primary-dark:  #0D3B99;
  --color-primary-50:    #EBF3FF;
  --color-primary-100:   #D6E7FF;
  --color-primary-200:   #ADC8FF;

  --color-accent:        #00D4AA;
  --color-accent-light:  #33DDBB;

  --color-text-dark:     #1E293B;
  --color-text-body:     #475569;
  --color-text-light:    #64748B;
  --color-text-muted:    #94A3B8;

  --color-white:         #FFFFFF;
  --color-bg-light:      #F8FAFC;
  --color-bg-alt:        #EBF3FF;
  --color-border:        #E2E8F0;

  --gradient-banner:     linear-gradient(135deg, #0D3B99 0%, #1A5CFF 50%, #4DA3FF 100%);

  /* --- Spacing Scale --- */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-28:  28px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-56:  56px;
  --space-64:  64px;
  --space-80:  80px;
  --space-96:  96px;

  /* --- Border Radius Scale --- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-pill: 8px; /* Was 999px, making everything squarer */
  --radius-full: 50%;

  /* --- Shadows (Premium) --- */
  --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md:          0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg:          0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl:          0 24px 48px rgba(0, 0, 0, 0.1);
  --shadow-card:        0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-card-hover:  0 12px 28px rgba(26, 92, 255, 0.08);

  /* --- Transitions --- */
  --transition-fast:    0.15s ease;
  --transition-base:    0.25s ease;
  --transition-smooth:  0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:  0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Layout --- */
  --max-width:      1200px;
  --header-height:  80px;
}

/* ============================================
   2. Modern CSS Reset
   ============================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-body);
  background-color: var(--color-white);
  overflow-x: hidden;
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-dark);
  line-height: 1.2;
  font-weight: 700;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

/* ============================================
   3. Utility Classes
   ============================================ */

/* --- Container --- */
.container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
}

/* --- Section Spacing --- */
.section-padding {
  padding-top: clamp(50px, 8vw, 90px);
  padding-bottom: clamp(50px, 8vw, 90px);
}

/* --- Section Title --- */
.section-title {
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  color: var(--color-text-dark);
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mt-5 { margin-top: 32px; }
.mt-6 { margin-top: 40px; }
.mt-8 { margin-top: 64px; }

/* --- Section Subtitle --- */
.section-subtitle {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 8px;
}

/* --- Accent Line --- */
.accent-line {
  width: 60px;
  height: 3px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  margin: 16px auto 0;
}

.accent-line--left {
  margin-left: 0;
  margin-right: 0;
}

/* --- Text Utilities --- */
.text-center {
  text-align: center;
}

.text-primary {
  color: var(--color-primary);
}

.text-white {
  color: var(--color-white);
}

/* ============================================
   4. Fade-In Animation
   ============================================ */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Staggered delay utilities */
.fade-in.delay-1 { transition-delay: 0.1s; }
.fade-in.delay-2 { transition-delay: 0.2s; }
.fade-in.delay-3 { transition-delay: 0.3s; }
.fade-in.delay-4 { transition-delay: 0.4s; }

/* --- Utility: Margin Top --- */
.mt-5 {
  margin-top: 40px;
}

/* --- Overflow Protection --- */
main {
  overflow-x: hidden;
}

/* ============================================
   5. Responsive
   ============================================ */
@media (max-width: 768px) {
  :root {
    --header-height: 70px;
  }

  .section-title {
    font-size: clamp(22px, 5vw, 28px);
  }

  .section-subtitle {
    font-size: clamp(14px, 3vw, 17px);
  }

  .section-padding {
    padding-top: clamp(35px, 6vw, 60px);
    padding-bottom: clamp(35px, 6vw, 60px);
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hide-on-mobile {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 21px;
  }

  .section-subtitle {
    font-size: 14px;
  }

  body {
    font-size: 15px;
  }

  .section-padding {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}