:root {
  --brand: #FC9601;
  --text-blue: #111184;
  --white: #FFFFFF;
  --gray: #6C757D;
  --gray-light: #DEE2E6;
  --light-bg: #F8F9FA;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 9999px;
}

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

body {
  font-family: var(--font-primary);
  line-height: 1.6;
  color: var(--text-blue);
  background-color: var(--white);
}

h1, h2, h3 { color: var(--text-blue); font-weight: 700; margin-bottom: var(--spacing-sm); }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
p { margin-bottom: var(--spacing-sm); color: var(--gray); }
a { color: var(--brand); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--text-blue); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); }

.header {
  background-color: var(--text-blue);
  color: var(--white);
  padding: var(--spacing-sm) 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-md);
}

.nav-wrapper { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.5rem; font-weight: 700; color: var(--brand); }
.nav-menu { display: flex; list-style: none; gap: var(--spacing-md); }
.nav-menu a { color: var(--white); font-weight: 500; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); }
.nav-menu a:hover { background-color: var(--brand); color: var(--white); }
.mobile-menu-toggle { display: none; background: none; border: none; color: var(--white); font-size: 1.5rem; cursor: pointer; }

.hero {
  background: linear-gradient(135deg, var(--text-blue) 0%, #1a1a9e 100%);
  color: var(--white);
  padding: var(--spacing-xl) 0;
  text-align: center;
}

.hero h1 { color: var(--white); margin-bottom: var(--spacing-sm); }
.hero p { color: var(--white); font-size: 1.125rem; margin-bottom: var(--spacing-lg); opacity: 0.9; }
.hero-pill { display: inline-block; background-color: var(--brand); color: var(--white); padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-full); font-weight: 600; margin-bottom: var(--spacing-md); }

.btn { display: inline-block; padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); font-weight: 600; text-align: center; cursor: pointer; transition: all 0.3s ease; border: none; }
.btn-primary { background-color: var(--brand); color: var(--white); }
.btn-primary:hover { background-color: #e88701; color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.main-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--spacing-lg); padding: var(--spacing-xl) 0; }
.main-content { min-width: 0; }
.sidebar { display: flex; flex-direction: column; gap: var(--spacing-md); }

.card { background-color: var(--white); border: 1px solid var(--gray-light); border-radius: var(--radius-md); padding: var(--spacing-md); box-shadow: var(--shadow-sm); }

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-md); margin: var(--spacing-lg) 0; }
.service-card { background-color: var(--white); border: 2px solid var(--gray-light); border-radius: var(--radius-md); padding: var(--spacing-md); text-align: center; transition: all 0.3s ease; }
.service-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
.service-icon { font-size: 3rem; color: var(--brand); margin-bottom: var(--spacing-sm); }

.widget { background-color: var(--light-bg); border: 1px solid var(--gray-light); border-radius: var(--radius-md); padding: var(--spacing-md); }
.widget-title { background-color: var(--brand); color: var(--white); padding: var(--spacing-sm); margin: calc(-1 * var(--spacing-md)); margin-bottom: var(--spacing-md); border-radius: var(--radius-md) var(--radius-md) 0 0; font-weight: 600; text-align: center; }

.partner-deals { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.deal-item { background-color: var(--white); padding: var(--spacing-sm); border-radius: var(--radius-sm); border-left: 4px solid var(--brand); }
.deal-item h4 { font-size: 0.875rem; margin-bottom: var(--spacing-xs); }
.deal-item .btn { padding: var(--spacing-xs); font-size: 0.875rem; width: 100%; }

.social-links { display: flex; justify-content: center; gap: var(--spacing-sm); flex-wrap: wrap; }
.social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--text-blue); color: var(--white); border-radius: var(--radius-full); transition: all 0.3s ease; }
.social-link:hover { background-color: var(--brand); transform: scale(1.1); }

.ad-space { background-color: var(--light-bg); border: 2px dashed var(--gray-light); border-radius: var(--radius-md); padding: var(--spacing-md); text-align: center; color: var(--gray); }
.ad-space-728x90 { min-height: 90px; }
.ad-space-300x250 { min-height: 250px; }
.ad-space-300x600 { min-height: 600px; }

.footer { background-color: var(--text-blue); color: var(--white); padding: var(--spacing-xl) 0 var(--spacing-md); }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.footer-section h3 { color: var(--brand); margin-bottom: var(--spacing-sm); }
.footer-section p, .footer-section a { color: var(--white); opacity: 0.8; }
.footer-bottom { text-align: center; padding-top: var(--spacing-md); border-top: 1px solid rgba(255,255,255,0.1); opacity: 0.7; }

@media (max-width: 1024px) {
  .main-layout { grid-template-columns: 1fr; }
  .sidebar { order: -1; }
}

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  .nav-menu { position: fixed; left: -100%; top: 60px; flex-direction: column; background-color: var(--text-blue); width: 100%; text-align: center; transition: 0.3s; padding: var(--spacing-md); }
  .nav-menu.active { left: 0; }
  .mobile-menu-toggle { display: block; }
  .services-grid { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns: 1fr; }
}

.text-center { text-align: center; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
/* Announcement Bar */
.announcement-bar {
  background: linear-gradient(135deg, var(--brand) 0%, #e88701 100%);
  color: var(--white);
  text-align: center;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
  z-index: 1001;
}

.announcement-bar p {
  margin: 0;
  color: var(--white);
}

.announcement-bar strong {
  font-weight: 700;
}

@media (max-width: 768px) {
  .announcement-bar {
    font-size: 0.8rem;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}