:root{
  --navy:#0A1128;
  --blue:#0070F3;
  --gray:#F5F7FA;
  --white:#FFFFFF;
  --text:#0b1220;
  --shadow:0 18px 45px rgba(10,17,40,.18);
  --shadow-soft:0 10px 30px rgba(10,17,40,.12);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg, var(--gray) 0%, #fff 55%);
  color:var(--text);
}
.h-mont{font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.navbar-od{
  background:rgba(10,17,40,.94);
  backdrop-filter:saturate(160%) blur(10px);
}
.navbar-od .nav-link,.navbar-od .navbar-brand{color:#fff !important}
.btn-od{
  background:var(--blue);
  border:0;
  color:#fff;
  border-radius:14px;
  padding:.8rem 1.05rem;
  box-shadow:0 10px 22px rgba(0,112,243,.25);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-od:hover{transform:translateY(-1px);filter:brightness(1.02);box-shadow:0 14px 28px rgba(0,112,243,.32)}
.card-od{
  border:1px solid rgba(10,17,40,.06);
  border-radius:var(--radius);
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.card-od:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card-od{transition:transform .18s ease, box-shadow .18s ease}
.hero{
  padding:80px 0 40px;
}
.hero-panel{
  background:radial-gradient(1200px 500px at 10% 20%, rgba(0,112,243,.18), transparent 60%),
             radial-gradient(900px 420px at 85% 40%, rgba(10,17,40,.14), transparent 55%),
             rgba(255,255,255,.75);
  border:1px solid rgba(10,17,40,.06);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:44px;
}
.badge-od{background:rgba(0,112,243,.12);color:var(--blue);border:1px solid rgba(0,112,243,.18)}
.footer-od{background:var(--navy);color:#cfd6ff}
.product-thumb{aspect-ratio:4/3;object-fit:cover;width:100%}
.input-od{
  border-radius:14px !important;
  border:1px solid rgba(10,17,40,.12) !important;
  padding:.75rem .9rem !important;
}
.mini-muted{color:rgba(11,18,32,.65)}
.fade-up{animation:fadeUp .55s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.navbar-toggler-icon {
  filter: invert(1);
}