:root {
  --pp-primary: #ff6600;
  --pp-primary-dark: #e35400;
  --pp-navy: #12213a;
}
body { font-family: 'Poppins', sans-serif; background:#f7f8fb; color:#1c1c1c; }
.brand-text { color: var(--pp-primary); font-size: 1.3rem; }
.search-pill { border-radius: 50px; padding: .6rem 1.2rem; border: 1px solid #e2e2e2; }
.btn-primary { background: var(--pp-primary); border-color: var(--pp-primary); }
.btn-primary:hover { background: var(--pp-primary-dark); border-color: var(--pp-primary-dark); }
.text-primary { color: var(--pp-primary) !important; }

.hero {
  background: linear-gradient(135deg, var(--pp-navy) 0%, #1c3a63 100%);
  color: #fff;
  padding: 4rem 0 6rem;
  position: relative;
}
.hero h1 { font-weight: 800; font-size: 2.6rem; }
.hero .emoji-row { font-size: 1.6rem; opacity:.9; }

.category-pill {
  border-radius: 50px; padding: .5rem 1.1rem; background:#fff; border:1px solid #eee;
  white-space:nowrap; font-size:.9rem; font-weight:500; text-decoration:none; color:#333;
  transition:.15s;
}
.category-pill:hover, .category-pill.active { background: var(--pp-primary); color:#fff; border-color: var(--pp-primary); }

.promo-card {
  border: none; border-radius: 16px; overflow: hidden; background:#fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: transform .15s, box-shadow .15s;
  height: 100%;
}
.promo-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.promo-card .promo-img { height: 160px; object-fit: cover; width:100%; background:#eee; }
.promo-badge { position:absolute; top:10px; left:10px; font-weight:600; }
.promo-badge-ending { position:absolute; top:10px; right:10px; }
.promo-body { padding: 1rem; }
.section-title { font-weight: 700; display:flex; align-items:center; gap:.5rem; }

.plan-card { border-radius:16px; border: 2px solid #eee; transition:.15s; }
.plan-card.featured { border-color: var(--pp-primary); transform: scale(1.03); }
.plan-card .price { font-size: 2.2rem; font-weight:800; }

.stat-box { border-radius: 14px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.05); padding:1.2rem; }
.badge-verified { background:#1a9e5c; }
.badge-trusted { background:#2f6fd8; }
.badge-community { background:#8a8a8a; }

@media (max-width: 576px){ .hero h1 { font-size: 1.9rem; } }