body { font-family: 'Inter', sans-serif; margin:0; padding:0; line-height:1.6; color:#1a1a1a; }
header { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; background:#000; color:#fff; border-bottom:1px solid rgba(255,255,255,0.08); position:sticky; top:0; z-index:100; }
header.header-glass { background:rgba(0,0,0,0.6); backdrop-filter: saturate(140%) blur(10px); }
header nav a, header nav button { margin-left:1rem; color:#fff; text-decoration:none; cursor:pointer; }
/* Minimal icon button for language switch */
#lang-switch { display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 10px; border-radius:6px; background:transparent; border:1px solid rgba(255,255,255,0.14); font-size:12px; }
#lang-switch:hover { background:rgba(255,255,255,0.06); }
.hero { display:flex; align-items:center; justify-content:space-between; padding:4rem 2rem; background: linear-gradient(135deg,#667eea,#764ba2); color:#fff; position:relative; overflow:hidden; min-height:60vh; }
.slider { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
.slide { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; opacity:0; transition: opacity 1s; }
.slide.active { opacity:1; }
.hero-text { position:relative; z-index:1; max-width:640px; margin:0 auto; text-align:left; }
.hero-text h1 { font-size: clamp(28px, 5vw, 44px); margin:0 0 0.5rem 0; line-height:1.2; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.hero-text p { font-size: clamp(14px, 2.2vw, 18px); margin:0 0 1rem 0; opacity:0.95; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.btn-primary { padding:0.8rem 2rem; background:#000; color:#fff; text-decoration:none; border-radius:8px; display:inline-block; margin-top:1rem; }
.btn-primary { font-weight:600; box-shadow:none; border:1px solid rgba(255,255,255,0.15); }
.btn-primary:hover { background:#111; }
.features, .education, .pricing, .download { padding:4rem 2rem; text-align:center; max-width:1200px; margin:0 auto; }
.feature-cards, .pricing-cards, .edu-cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:2rem; align-items:stretch; margin-top:2rem; }
.card { background:#fff; padding:1.5rem; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.06); width:auto; transition: transform 0.2s, box-shadow 0.2s; display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.card:hover { transform: translateY(-4px); box-shadow:0 6px 16px rgba(0,0,0,0.08); }
.card h3 { margin:0.75rem 0 0.5rem 0; font-size:1.1rem; }
.card p { margin:0; color:#444; }
.pricing .card h3 { font-size:1.2rem; }
.pricing .card p { margin-top:0.25rem; }
.download-links a { display:inline-block; margin:1rem; padding:1rem 2rem; background:#667eea; color:#fff; text-decoration:none; border-radius:8px; }
footer { text-align:center; padding:2rem; background:#000; color:#fff; }

/* Responsive images */
img { max-width:100%; height:auto; display:block; }

/* Keep header logo tidy across breakpoints */
.logo { height:40px; width:auto; }

/* Feature/pricing card images scale within card without distortion */
.card img { width:100%; height:auto; object-fit:contain; }
.education .card img { aspect-ratio: 16 / 9; object-fit: cover; border-radius:10px; background:linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); border:1px solid rgba(102,126,234,0.25); box-shadow:0 6px 18px rgba(0,0,0,0.06); }

/* Ensure hero slides fill container while remaining responsive */
.hero .slide { width:100%; height:100%; object-fit:cover; }

/* Hero readability overlay */
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.22)); z-index:0; }

/* Improve card width handling within grid */
.card { width:auto; }

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .hero { padding:3rem 1.5rem; min-height:50vh; }
  header { padding:0.75rem 1.5rem; }
}

@media (max-width: 992px) {
  .features, .education, .pricing, .download { padding:3.5rem 1.5rem; }
  .feature-cards, .pricing-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1.5rem; }
}

@media (max-width: 768px) {
  header { flex-wrap:wrap; gap:0.5rem; }
  header nav a, header nav button { margin-left:0.75rem; }
  .hero { justify-content:center; text-align:center; }
  .hero-text { text-align:center; max-width:560px; background:rgba(0,0,0,0.35); backdrop-filter: blur(6px); padding:1rem 1.25rem; border-radius:12px; }
  .hero::after { background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.5)); }
  .btn-primary { margin-top:1rem; }
  .features, .education, .pricing, .download { padding:3rem 1.25rem; }
  .logo { height:32px; }
}

@media (max-width: 480px) {
  .hero { padding:2.5rem 1rem; }
  .hero-text { max-width:100%; }
  .btn-primary { padding:0.7rem 1.5rem; }
}

@media (max-width: 640px) {
  header { flex-direction:column; align-items:flex-start; }
  header nav { width:100%; display:flex; flex-wrap:wrap; gap:0.5rem 0.75rem; margin-top:0.5rem; }
  header nav a, header nav button { margin-left:0; padding:0.5rem 0.75rem; background:rgba(255,255,255,0.08); border-radius:6px; }
  .feature-cards, .pricing-cards { grid-template-columns: 1fr; gap:1rem; }
  .features, .education, .pricing, .download { padding:2.5rem 1rem; }
}