:root{
  --ink:#f5f7ff;
  --muted: rgba(245,247,255,.74);
  --accent:#7c4dff;
  --accent2:#00d4ff;
  --accent3:#ff4fd8;
  --stroke: rgba(255,255,255,.10);
  --glass: rgba(10,12,20,.62);
  --shadow: 0 28px 120px rgba(0,0,0,.55);
}

*{ font-family:"Cairo", system-ui, -apple-system, Segoe UI, sans-serif; }
body{
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 80% -10%, rgba(124,77,255,.28) 0%, transparent 60%),
    radial-gradient(900px 520px at 10% 10%, rgba(0,212,255,.18) 0%, transparent 55%),
    radial-gradient(900px 620px at 70% 80%, rgba(255,79,216,.14) 0%, transparent 60%),
    linear-gradient(180deg, #070812, #0a0c1a 55%, #07070b 100%);
  overflow-x:hidden;
}

.hub-nav{
  background: rgba(8,10,18,.62);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hub-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(124,77,255,.16);
  border: 1px solid rgba(124,77,255,.22);
  font-weight: 950;
}

.hero{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 500px at 70% 10%, rgba(124,77,255,.18), transparent 60%),
    radial-gradient(820px 520px at 10% 40%, rgba(0,212,255,.14), transparent 60%),
    rgba(10,12,20,.62);
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:-60px;
  background: conic-gradient(from 180deg, rgba(124,77,255,0), rgba(124,77,255,.26), rgba(0,212,255,.20), rgba(255,79,216,.16), rgba(124,77,255,0));
  opacity:.35;
  filter: blur(18px);
  animation: spin 16s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.hero-badge{
  display:inline-flex; gap:10px; align-items:center;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 950;
}

.btn-accent{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border:none;
  color:#060812 !important;
  font-weight: 950;
  box-shadow: 0 18px 50px rgba(124,77,255,.22);
}
.btn-soft{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ink) !important;
}

.offer{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.filterbar{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 44px rgba(0,0,0,.35);
}
.filterbar .form-select, .filterbar .form-control{
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.12);
}
.filterbar .form-select option{ color:#111; }

.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }

.cardx{
  grid-column: span 4;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow:hidden;
  position: relative;
  transform: translateY(6px);
  opacity: 0;
}
.cardx.reveal{ transform: translateY(0); opacity: 1; transition: .55s ease; }

.cardx .top{ height: 160px; background: rgba(255,255,255,.04); }
.cardx img{ width:100%; height:100%; object-fit: cover; }
.cardx .shine{
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.25) 35%, rgba(255,255,255,0) 55%);
  transform: translateX(-120%);
  transition: .7s ease;
  opacity:.65;
}
.cardx:hover .shine{ transform: translateX(120%); }

.badges span{
  font-weight: 900;
  font-size: .8rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(124,77,255,.14);
  border: 1px solid rgba(124,77,255,.20);
  color: var(--ink);
}
.offcanvas{
  background: rgba(10,12,20,.80);
  backdrop-filter: blur(16px);
  border-left: 1px solid rgba(255,255,255,.10);
  color: var(--ink);
}
.offcanvas .btn-close{ filter: invert(1); opacity: .9; }

@media (max-width: 992px){ .cardx{ grid-column: span 6; } }
@media (max-width: 576px){ .cardx{ grid-column: span 12; } }


/* === Pricing chips === */
.price-box{ display:flex; flex-wrap:wrap; gap:8px; }
.pchip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  font-weight: 900;
  font-size: .82rem;
}
.pchip.hot{
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  transform: translateY(-1px);
}