:root{
  --blue-50:#eef6ff;
  --blue-100:#d0e3ff;
  --blue-200:#a7c7ff;
  --blue-300:#7cabff;
  --blue-400:#4d8eff;
  --blue-500:#1f72ff;
  --blue-600:#1559cc;
  --blue-700:#0f4399;
  --blue-800:#092c66;
  --blue-900:#041533;
  --text:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --card:#f8fafc;
  --ring:rgba(31,114,255,0.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1280px;margin:0 auto;padding:0 1rem}

.navbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.8);backdrop-filter:blur(10px);border-bottom:1px solid #e2e8f0}
.navbar .inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700}
.brand .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--blue-400),var(--blue-600));display:inline-block}
.navlinks{display:flex;gap:1rem}
.navlinks a{padding:.5rem .75rem;border-radius:10px}
.navlinks a.active, .navlinks a:hover{background:var(--blue-50)}

.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;padding:3rem 0}
.hero h1{font-size:clamp(1.6rem,4.5vw,2.8rem);line-height:1.15;margin:0 0 1rem}
.hero p{color:var(--muted);margin:0 0 1rem}
.searchbar{display:flex;gap:.5rem;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:.5rem}
.searchbar input{flex:1;border:none;outline:none;padding:.75rem;border-radius:10px}
.searchbar button{border:none;background:var(--blue-600);color:white;padding:.75rem 1rem;border-radius:12px;font-weight:600;cursor:pointer}
.searchbar button:hover{background:var(--blue-700)}

.section{padding:2.5rem 0}
.section h2{font-size:1.5rem;margin:0 0 1rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:var(--card);border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;box-shadow:0 1px 0 #e2e8f0}
.card img{width:100%;height:180px;object-fit:cover;background:#e2e8f0}

/* Make images maintain aspect on small screens and use modern aspect-ratio when available */
.card img{aspect-ratio:16/9}

/* Responsive tweaks */
@media (max-width: 1100px){
  .container{padding:0 1rem}
  .grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
  .hero{grid-template-columns:1fr}
  .hero p{font-size:0.95rem}
}
@media (max-width: 800px){
  .navbar .inner{flex-wrap:wrap;gap:.5rem}
  .navlinks{width:100%;display:flex;flex-wrap:wrap;justify-content:center}
  .navlinks a{padding:.5rem 1rem}
  .searchbar{width:100%;flex-direction:row}
  .hero{padding:2rem 0}
  .card img{height:auto}
}
@media (max-width: 480px){
  .hero{padding:1rem 0}
  .searchbar{flex-direction:column;gap:.5rem}
  .searchbar input{padding:.75rem}
  .navlinks{gap:.25rem}
  .badge{font-size:.7rem;padding:.2rem .5rem}
}
.card .p{padding:1rem}
.badge{display:inline-block;background:var(--blue-50);color:var(--blue-700);border:1px solid var(--blue-100);padding:.25rem .5rem;border-radius:999px;font-size:.75rem}
.price{font-weight:800;font-size:1.125rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-radius:12px;border:1px solid #e2e8f0;background:white;font-weight:600;cursor:pointer}
.btn.primary{background:var(--blue-600);color:white;border-color:transparent}
.btn.primary:hover{background:var(--blue-700)}

.footer{margin-top:3rem;border-top:1px solid #e2e8f0;padding:2rem 0;color:var(--muted);font-size:.9rem}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 600px){
  .grid{grid-template-columns:1fr}
}