.range{padding-top:5.5rem;min-height:100vh}

/* ===== hero band ===== */
.range__hero{text-align:center;padding:4.5rem 1.5rem 2.5rem;position:relative;overflow:hidden;
  background:radial-gradient(70% 120% at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}
.range__eyebrow{font-family:var(--font-display);color:var(--accent);letter-spacing:.28em;
  text-transform:uppercase;font-size:.8rem;margin-bottom:1rem}
.range__hero h1{font-size:clamp(2rem,7vw,4rem);line-height:1}
.range__sub{color:var(--muted);margin-top:1rem;font-size:clamp(.95rem,2vw,1.1rem)}

/* ===== grid ===== */
.grid{max-width:var(--maxw);margin:0 auto;padding:2rem clamp(1rem,4vw,2rem) 6rem;
  display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

.card{background:var(--panel);border:1px solid #1c1f25;border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s,box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 60%,#1c1f25);
  box-shadow:0 18px 50px -20px color-mix(in srgb,var(--c) 75%,transparent)}

.card__media{position:relative;display:block;overflow:hidden;
  background:linear-gradient(160deg,#fff,#eef0f2)}
.card__media img{width:100%;aspect-ratio:4/5;object-fit:contain;padding:1.4rem 1rem;
  transition:transform .4s ease}
.card:hover .card__media img{transform:scale(1.05)}
.card__badge{position:absolute;top:.75rem;right:.75rem;
  background:color-mix(in srgb,var(--c) 88%,#000);color:#0A0B0D;
  font-family:var(--font-display);font-weight:600;font-size:.72rem;
  padding:.32rem .72rem;border-radius:999px;box-shadow:0 4px 14px -4px rgba(0,0,0,.5)}

.card__body{padding:1.15rem 1.25rem 1.4rem}
.card__body h3{font-family:var(--font-display);font-size:1.15rem}
.card__tag{color:var(--c);margin-top:.3rem;font-size:.95rem}
.card__spec{color:var(--muted);margin-top:.7rem;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase}

@media (max-width:520px){
  .grid{grid-template-columns:1fr;gap:1.1rem}
}