:root{
  --bg:#07080b;
  --panel:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.09);
  --text:#f5f7ff;
  --muted:rgba(245,247,255,.72);
  --red:#d40b1f;
  --red2:#ff233a;
  --shadow:0 18px 60px rgba(0,0,0,.60);
  --r:18px;
}
*{box-sizing:border-box}
html,body{margin:0;background:
  radial-gradient(900px 520px at 18% -10%, rgba(212,11,31,.35), transparent 60%),
  radial-gradient(900px 520px at 82% -12%, rgba(255,35,58,.16), transparent 55%),
  linear-gradient(180deg,#07080b,#000);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:20px}
.navbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(12px);
  background:rgba(7,8,11,.70);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand img{height:30px}
.pills{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{
  padding:9px 12px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-weight:800;font-size:13px;
}
.pill:hover{border-color:rgba(255,35,58,.35);color:var(--text)}
.pill.active{background:rgba(255,255,255,.05);color:var(--text)}

.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.hero{
  display:grid;grid-template-columns:1.12fr .88fr;gap:16px;align-items:stretch;
  margin-top:16px;overflow:hidden;
}
@media(max-width:940px){.hero{grid-template-columns:1fr}}
.hero-media{position:relative;min-height:360px;border-radius:var(--r);overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.04)}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
}
.hero-badge{
  position:absolute;left:14px;top:14px;z-index:2;
  padding:8px 10px;border-radius:999px;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.14);
  font-weight:900;font-size:12px;color:rgba(255,255,255,.9)
}
.hero-copy{padding:18px;border-radius:var(--r)}
.kicker{color:rgba(245,247,255,.65);font-weight:900;letter-spacing:.14em;font-size:12px;text-transform:uppercase}
h1{margin:10px 0 10px;font-size:36px;line-height:1.08}
.lead{color:rgba(245,247,255,.84);line-height:1.65;font-size:15px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 14px;border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-weight:900;
  transition:transform .15s ease, border-color .15s ease;
}
.btn.red{
  background:linear-gradient(180deg, rgba(212,11,31,.98), rgba(212,11,31,.55));
  border-color:rgba(255,35,58,.35);
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,35,58,.28)}
.section-title{margin:18px 0 8px;color:rgba(245,247,255,.92);font-weight:900}
.sub{color:var(--muted);font-weight:800;font-size:13px;margin:0 0 12px}
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.38);
  transition:transform .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-3px);border-color:rgba(255,35,58,.28)}
.card-media{position:relative;height:200px;background:#0d0f14}
.card-media img{width:100%;height:100%;object-fit:cover;display:block}
.price-chip{
  position:absolute;left:12px;bottom:12px;
  padding:7px 10px;border-radius:999px;
  background:rgba(0,0,0,.50);border:1px solid rgba(255,255,255,.12);
  font-weight:900;font-size:13px;
}
.card-body{padding:12px 12px 14px}
.card h3{margin:0 0 6px;font-size:14px;line-height:1.25}
.meta{color:rgba(245,247,255,.75);font-weight:800;font-size:12px;line-height:1.4}
.actions{display:flex;gap:10px;margin-top:10px}
.actions a{flex:1}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gallery{grid-template-columns:1fr}}
.gimg{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#0d0f14}
.gimg img{width:100%;height:240px;object-fit:cover;display:block}
.hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.small{font-size:13px;line-height:1.6;color:rgba(245,247,255,.78)}
.footer{
  margin-top:18px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px
}
@media(max-width:900px){.footer{grid-template-columns:1fr}}
.card-media {
  position: relative;
}

.badge-new {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #ff1e1e, #b30000);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 30px;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
  z-index: 5;
}