:root{
  --rr-red:#d10f1a;
  --rr-red2:#ff3340;
  --rr-ink:#101418;
  --rr-muted:#6b7280;
  --rr-bg:#f6f7fb;
  --rr-card:#ffffff;
  --rr-border:rgba(16,20,24,.10);
}

html,body{height:100%;}
body{
  background:var(--rr-bg);
  color:var(--rr-ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{color:inherit;}
a:hover{color:var(--rr-red);}

.navbar{
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--rr-border);
}
.navbar .nav-link{color:rgba(16,20,24,.72);}
.navbar .nav-link:hover{color:var(--rr-red);}
.brand-badge{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none;
}
.brand-badge .brand-name{
  font-weight:800; letter-spacing:.2px; line-height:1.05;
}
.brand-badge .tagline{
  font-size:.72rem; color:rgba(16,20,24,.62); margin-top:.05rem;
}

.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid var(--rr-border);
  background:#fff;
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.8rem;
  color:rgba(16,20,24,.72);
}

.hero{
  position:relative;
  border-bottom:1px solid var(--rr-border);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,247,251,1));
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:-60px -60px auto -60px;
  height:520px;
  background-image:url('../img/hero-bg.png');
  background-size:cover;
  background-position:center;
  filter: blur(18px) saturate(1.1);
  opacity:.35;
  transform: scale(1.06);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(1200px 520px at 20% 10%, rgba(255,255,255,.9), rgba(255,255,255,.55) 35%, rgba(246,247,251,.85));
  pointer-events:none;
}
.hero .container{position:relative; z-index:1;}
.hero-card{
  background:rgba(255,255,255,.92);
  border:1px solid var(--rr-border);
  border-radius:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.btn-rr{
  background:linear-gradient(135deg, var(--rr-red), var(--rr-red2));
  border:0;
  color:#fff;
  box-shadow:0 10px 22px rgba(209,15,26,.22);
}
.btn-rr:hover{filter:brightness(1.02);}
.btn-outline-rr{
  border:1px solid rgba(209,15,26,.35);
  color:var(--rr-red);
  background:#fff;
}
.btn-outline-rr:hover{
  background:rgba(209,15,26,.06);
  color:var(--rr-red);
}

.section-title{
  font-weight:800;
  letter-spacing:-.2px;
}
.section-sub{
  color:rgba(16,20,24,.62);
}

.card{
  border:1px solid var(--rr-border);
  border-radius:18px;
  background:var(--rr-card);
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}
.card.hoverlift{
  transition:transform .12s ease, box-shadow .12s ease;
}
.card.hoverlift:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,.08);
}

.brand-logo{
  width:100%;
  height:84px;
  object-fit:contain;
  padding:10px;
  background:#fff;
  border-radius:14px;
  border:1px solid var(--rr-border);
}

.thumb{
  width:100%;
  height:170px;
  object-fit:contain;
  background:#fff;
  border-bottom:1px solid var(--rr-border);
  border-top-left-radius:18px;
  border-top-right-radius:18px;
}

.kv{
  display:flex; flex-wrap:wrap; gap:.4rem .6rem;
  color:rgba(16,20,24,.70);
  font-size:.86rem;
}
.kv span{
  display:inline-flex;
  border:1px solid var(--rr-border);
  background:#fff;
  border-radius:999px;
  padding:.18rem .55rem;
}

.footer{
  margin-top:48px;
  padding:28px 0;
  background:#fff;
  border-top:1px solid var(--rr-border);
  color:rgba(16,20,24,.72);
}
.footer a{color:rgba(16,20,24,.72); text-decoration:none;}
.footer a:hover{color:var(--rr-red);}

.small-muted{color:rgba(16,20,24,.60);}

/* RR pricing badge */
.sell-price.badge{font-size:.85rem; font-weight:600;}