/* ==================== BASE STYLES ==================== */
/* CSS Variables, Reset, Global Utilities */

:root {
  --gold: #D4A843;
  --gold-light: #E8C876;
  --gold-dark: #B8922E;
  --navy: #002D42;
  --navy-light: #003D5B;
  --navy-dark: #001F2E;
  --navy-darker: #00141F;
  --white: #FFFFFF;
  --off-white: #F8F9FA;
  --gray-100: #E8E6E1;
  --gray-200: #D1CFC8;
  --gray-300: #9A9790;
  --text-primary: #1A1A1A;
  --text-secondary: #5A5A5A;
  --shadow-sm: 0 2px 8px rgba(0, 45, 66, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 45, 66, 0.12);
  --shadow-lg: 0 8px 40px rgba(0, 45, 66, 0.16);
  --shadow-gold: 0 4px 20px rgba(163, 133, 47, 0.25);
  
  /* New vibrant colors */
  --cyan: #00B4D8;
  --cyan-light: #48CAE4;
  --cyan-dark: #0096C7;
  --teal: #00BFA6;
  --teal-light: #1DE9B6;
  --purple: #7C3AED;
  --purple-light: #A78BFA;
  --orange: #F59E0B;
  --orange-light: #FBBF24;
  --green: #10B981;
  --green-light: #34D399;
  --red: #EF4444;
  --pink: #EC4899;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--cyan);
  color: var(--white);
}

body {
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--off-white);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--off-white);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyan), var(--teal));
  border-radius: 10px;
  border: 2px solid var(--off-white);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--cyan-dark), var(--cyan));
}

/* Subtle background pattern */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(ellipse at 20% 20%, rgba(0, 180, 216, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(0, 191, 166, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Main Content Structure */
.main-content {
  min-height: calc(100vh - 80px);
  width: 100%;
  background: var(--off-white);
}

.section {
  display: none;
  animation: fadeIn 0.4s ease;
  width: 100%;
}

.section.active {
  display: block;
  width: 100%;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}