.panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}
.card{
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow:hidden;
}
.padded{ padding: var(--s-4); }

.nav{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.brand{ display:flex; gap: var(--s-3); align-items:center; }
.logo{ width:40px; height:40px; border-radius: var(--r-md); border:1px solid var(--border); background: rgba(255,255,255,.03); overflow:hidden; }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  font-size: 12px;
  color: var(--muted);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-2);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  transition: transform .08s ease, background .15s ease;
}
.btn:hover{ background: rgba(255,255,255,.07); }
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--white);
  color: #0b1220;
  border-color: rgba(255,255,255,.7);
}
.btn-primary:hover{ background: rgba(255,255,255,.92); }

.input{
  width:100%;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline:none;
}

.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 900px){ .grid-3{ grid-template-columns: 1fr; } }

.offer-media{ aspect-ratio: 4/3; background: rgba(255,255,255,.03); }
.offer-img{ width:100%; height:100%; object-fit:cover; transition: transform .2s ease; }
.offer:hover .offer-img{ transform: scale(1.02); }

.tag{
  position:absolute; top: 12px; left: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(16,185,129,.92);
  color:#061016;
}
.tag-right{ left:auto; right:12px; background: rgba(255,255,255,.88); color:#0b1220; }