/* ========== ExtensionHub Premium Theme ========== */

:root{
  --eh-primary:#1fb6a6;
  --eh-dark:#0f172a;
  --eh-soft:#f4f7fb;
  --eh-card:#ffffff;
  --eh-border:#e6ecf2;
}

body{
  background:var(--eh-soft);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color:#0f172a;
}

/* Navbar */
.navbar{
  background:#ffffff !important;
  border-bottom:1px solid var(--eh-border);
  padding:14px 0;
}

.navbar-brand{
  font-weight:700;
  font-size:20px;
  letter-spacing:0.4px;
}

/* Hero */
.hero{
  background:linear-gradient(180deg,#e8fbf8 0%, #f4f7fb 100%);
  padding:100px 0;
}

.hero h1{
  font-size:44px;
  font-weight:800;
  letter-spacing:-0.5px;
}

.hero p{
  font-size:18px;
  color:#5b6b7c;
}

/* Cards */
.card{
  border:none;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
  transition:0.25s ease;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,0.10);
}

/* Buttons */
.btn-primary{
  background:var(--eh-primary);
  border:none;
  border-radius:8px;
  padding:8px 18px;
}

.btn-primary:hover{
  background:#17a897;
}

/* Section titles */
section h2{
  font-weight:700;
  margin-bottom:30px;
}

/* Footer */
.footer{
  background:#0f172a;
  color:#cbd5e1;
  padding:60px 0;
}

.footer a{
  color:#94a3b8;
  text-decoration:none;
}

.footer a:hover{
  color:white;
}
/* ========== Responsive Fixes ========== */

.navbar-toggler{
  border:none;
}

.navbar-toggler:focus{
  box-shadow:none;
}

.nav-link{
  font-weight:500;
}

@media (max-width:768px){

  .hero{
    padding:60px 20px;
    text-align:center;
  }

  .hero h1{
    font-size:28px;
  }

  .hero p{
    font-size:15px;
  }

  .card{
    margin-bottom:15px;
  }

  section h2{
    font-size:22px;
    text-align:center;
  }

  .footer{
    text-align:center;
  }
}
/* ========== Dark Mode ========== */

.dark-mode{
  background:#0b1220;
  color:#e2e8f0;
}

.dark-mode .navbar{
  background:#0b1220 !important;
  border-bottom:1px solid #1e293b;
}

.dark-mode .hero{
  background:linear-gradient(180deg,#0f172a 0%, #0b1220 100%);
}

.dark-mode .card{
  background:#0f172a;
  color:#e2e8f0;
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
}

.dark-mode .footer{
  background:#020617;
}

.dark-mode a{
  color:#38bdf8;
}