/* Main Style CSS */
@import url('./vars.css');
@import url('./reset.css');
@import url('./layout.css');
@import url('./components.css');

.header { background-color: rgba(255, 255, 255, 0.95); }
.header-container { max-width: 1200px; margin: 0 auto; }
.hero { background: linear-gradient(135deg, #0d6efd 0%, #1a73e8 100%); color: white; }
.hero h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; }
.hero-btns { display: flex; gap: 1.5rem; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.footer { background-color: var(--dark); }
.footer-links { max-width: 1200px; margin: 0 auto; }
@media (max-width: 768px) {
  .hero h1 { font-size: 2.5rem; }
  .nav-menu { position: fixed; top: 64px; left: -100%; width: 100%; background-color: white; flex-direction: column; transition: var(--transition); z-index: 1000; }
  .nav-menu.active { left: 0; }
  .mobile-menu-btn { display: block; }
}