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

/* ========== LIGHT MODE (default) – Light Pista Green ========== */
:root {
  --bg-primary: #F4FAF0;
  --bg-secondary: #E5F2DC;
  --bg-card: #FFFFFF;
  --bg-hero: linear-gradient(135deg, #E5F2DC 0%, #D4EDBE 50%, #EFF8E8 100%);
  --bg-alt: #EBF5E3;
  --primary-color: #095779;
  --text-primary: royalblue;
  --text-secondary: #4CAF50;
  --text-muted: #81C784;
  --accent-green: #7CB342;
  --accent-blue: #558B2F;
  --accent-gold: #D4A017;
  --accent-gold-light: #FFF8E1;
  --accent-teal: #8BC34A;
  --border-color: rgba(124,179,66,0.12);
  --shadow-sm: 0 2px 8px rgba(0,128,128,0.06);
  --shadow-md: 0 8px 24px rgba(0,128,128,0.08);
  --shadow-lg: 0 16px 48px rgba(0,128,128,0.10);
  --shadow-glow: 0 0 30px rgba(124,179,66,0.18);
  --glass-bg: rgba(244,250,240,0.75);
  --glass-border: rgba(255,255,255,0.5);
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --header-bg: rgba(244,250,240,0.92);
}

/* ========== DARK MODE – Light Pista Green ========== */
[data-theme="dark"] {
  --bg-primary: teal;
  --bg-secondary: #20B2AA;
  --bg-card: #48D1CC;
  --bg-hero: linear-gradient(135deg, teal 0%, #20B2AA 50%, #48D1CC 100%);
  --bg-alt: #008B8B;
  --primary-color: #095779;
  --text-primary: #0A2540;
  --text-secondary: #103452;
  --text-muted: #0F172A;
  --accent-green: #AED581;
  --accent-blue: #9CCC65;
  --accent-gold: #FFD54F;
  --accent-gold-light: rgba(255,213,79,0.12);
  --accent-teal: #C5E1A5;
  --border-color: rgba(255,255,255,0.3);
  --shadow-sm: 0 2px 8px rgba(0,128,128,0.35);
  --shadow-md: 0 8px 24px rgba(0,128,128,0.45);
  --shadow-lg: 0 16px 48px rgba(0,128,128,0.55);
  --shadow-glow: 0 0 30px rgba(255,255,255,0.2);
  --glass-bg: rgba(0,128,128,0.85);
  --glass-border: rgba(255,255,255,0.2);
  --header-bg: rgba(0,128,128,0.92);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  line-height: 1.2;
}

a { text-decoration:none; color:var(--accent-green); transition: color var(--transition); }
a:hover { color: var(--accent-gold); }

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

.container { max-width:1280px; margin:0 auto; padding:0 24px; }

/* ========== BUTTONS ========== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 28px; border-radius:50px; font-weight:600;
  font-family:var(--font-heading); font-size:0.95rem;
  cursor:pointer; border:none; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; overflow: hidden;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent-green), var(--accent-teal));
  color:#fff; box-shadow: 0 6px 20px rgba(124,179,66,0.28);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 28px rgba(124,179,66,0.45);
  color:#fff;
}
.btn-secondary {
  background: var(--bg-card); color:var(--accent-green);
  border: 2px solid var(--accent-green);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.btn-secondary:hover {
  background: var(--accent-green); color:#fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(124,179,66,0.3);
}
.btn-gold {
  background: linear-gradient(135deg, var(--accent-gold), #E8A317);
  color:#1C3322; box-shadow: 0 6px 20px rgba(212,160,23,0.3);
}
.btn-gold:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 28px rgba(212,160,23,0.48);
  color:#1C3322;
}

/* ========== HEADER ========== */
.site-header {
  position:fixed; top:0; width:100%; z-index:1000;
  padding:14px 4%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--header-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border-color);
}
.site-header.scrolled {
  box-shadow: var(--shadow-md); padding:10px 4%;
}
.logo { display:flex; align-items:center; gap:12px; text-decoration:none !important; }
.logo-icon {
  width:52px; height:52px; background: linear-gradient(135deg, var(--accent-green), var(--accent-teal));
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:#fff; font-weight:800; font-family:var(--font-heading);
}
.logo-text h2 { font-size:1.55rem; font-weight:700; line-height:1.1; margin:0 !important; color:var(--text-primary) !important; }
.logo-text span { font-size:0.75rem; color:var(--accent-gold); font-weight:600; letter-spacing:1.5px; text-transform:uppercase; display:block !important; margin:2px 0 0 0 !important; }

.main-nav { width: 100%; order: 3; margin-top: 4px; }
.site-header .main-nav ul {
  display: flex !important;
  list-style: none !important;
  gap: 4px !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.site-header .main-nav li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.site-header .main-nav a {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  padding: 5px 9px !important;
  border-radius: 10px !important;
  position: relative;
  white-space: nowrap !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none !important;
}
.site-header .main-nav a:hover, .site-header .main-nav a.active {
  color: var(--accent-green) !important;
  background: var(--bg-secondary) !important;
  box-shadow: 0 4px 12px rgba(124,179,66,0.12);
  transform: translateY(-1px);
}

/* Dropdown Menu */
.site-header .dropdown { position: relative; }
.site-header .dropdown-menu {
  position: absolute !important; top: 100% !important; left: 0 !important;
  background: var(--bg-card) !important; border: 1px solid var(--border-color) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  border-radius: 8px !important; min-width: 260px !important; max-width: 380px !important;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all 0.3s ease !important;
  display: flex !important; flex-direction: column !important; padding: 8px 0 !important; z-index: 1050 !important;
  list-style: none !important; gap: 0 !important; margin: 0 !important;
}
.site-header .dropdown:hover .dropdown-menu {
  opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important;
  display: flex !important;
}
.site-header .dropdown-menu li { display: block !important; width: 100% !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; }
.site-header .dropdown-menu li:last-child { border-bottom: none !important; }
.site-header .dropdown-menu a {
  padding: 11px 16px !important; white-space: normal !important; border-radius: 0 !important; display: block !important;
  font-weight: 500 !important; font-size: 0.88rem !important; line-height: 1.45 !important;
  color: var(--text-primary) !important;
}
.site-header .dropdown-menu a:hover { background: var(--bg-secondary) !important; color: var(--accent-green) !important; }

.nav-cta { display:flex; align-items:center; gap:12px; }
.nav-cta a, .nav-cta .btn { text-decoration:none !important; }

/* Theme Toggle */
.theme-toggle {
  width:44px; height:44px; border-radius:12px; border:1px solid var(--border-color);
  background:var(--bg-card); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:1.2rem;
  transition: all var(--transition);
}
.theme-toggle:hover { background:var(--bg-secondary); transform:rotate(15deg); }

/* Mobile Menu */
.hamburger {
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  background:none; border:none; padding:8px;
}
.hamburger span {
  width:24px; height:2px; background:var(--text-primary);
  transition: all var(--transition); border-radius:2px;
}
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Ensure Navigation Bar fits strictly on one single line */
@media (max-width: 1400px) {
  .main-nav ul { gap: 2px !important; flex-wrap: nowrap !important; }
  .main-nav a { padding: 4px 7px !important; font-size: 0.82rem !important; }
}
@media (max-width: 1200px) {
  .main-nav ul { gap: 1px !important; flex-wrap: nowrap !important; }
  .main-nav a { padding: 3px 5px !important; font-size: 0.77rem !important; }
}

/* Blinking animation for important notice text */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.blinking {
  animation: blink 1.2s infinite ease-in-out;
  color: #e11d48;
  font-weight: 800;
}