/* ── PACKS GRID ── */
.packs-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1.4rem;
}
.pack-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 2rem;
  display: flex; flex-direction: column;
  transition: border-color .25s, background .25s, transform .2s, box-shadow .25s;
  position: relative; overflow: hidden;
}
.pack-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--violet), transparent);
  opacity:0; transition:opacity .3s;
}
.pack-card:hover { background:#1a1a2a; border-color:rgba(124,58,237,.35); transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.4); }
.pack-card:hover::before { opacity:1; }

.pack-tag { font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--violet-glow); margin-bottom:.8rem; }
.pack-header { display:flex; align-items:center; gap:1rem; margin-bottom:.8rem; }
.pack-icon { width:44px; height:44px; background:var(--icon-bg); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--icon-color); flex-shrink:0; }
.pack-header h3 { font-family:var(--serif); font-size:1.3rem; font-weight:400; color:var(--white); }
.pack-desc { font-size:.85rem; line-height:1.65; color:var(--gray); margin-bottom:1.4rem; }
.pack-features { list-style:none; display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.6rem; flex:1; }
.pack-features li { font-size:.82rem; color:var(--light); display:flex; align-items:flex-start; gap:.55rem; line-height:1.4; }
.pack-features li::before { content:'→'; color:var(--violet-glow); flex-shrink:0; margin-top:.05em; }
.pack-btn { width:100%; justify-content:center; }

/* ── HOUR MODEL ── */
.hour-model {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 2.5rem;
  margin-bottom: 1.5rem;
}
.hour-model-header {
  display: flex; align-items: flex-start; gap: 1.2rem;
  padding-bottom: 2rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem;
}
.hour-model-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  background: rgba(124,58,237,0.12); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.hour-model-header h3 { font-family:var(--sans); font-size:1rem; font-weight:700; color:var(--white); margin-bottom:.5rem; }
.hour-model-header p { font-size:.85rem; line-height:1.65; color:var(--gray); }

.hour-tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 1.5rem; }
.hour-tier {
  background: var(--dark); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.4rem 1.2rem; text-align: center;
  transition: border-color .2s, transform .15s;
}
.hour-tier:hover { border-color: rgba(124,58,237,.3); transform: translateY(-2px); }
.featured-tier { border-color: rgba(124,58,237,0.4); background: rgba(59,31,110,0.2); }
.hour-tier-range { font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--gray); margin-bottom:.6rem; }
.hour-tier-price { font-family:var(--mono); font-size:1.6rem; font-weight:500; color:var(--white); line-height:1; }
.hour-tier-price span { font-size:.8rem; color:var(--gray); }
.hour-tier-example { font-size:.75rem; color:var(--violet-glow); margin-top:.5rem; }

.hour-note {
  background: rgba(124,58,237,0.06); border: 1px solid rgba(124,58,237,0.15);
  border-radius: 8px; padding: 1rem 1.3rem;
  display: flex; align-items: flex-start; gap: .8rem;
}
.hour-note-icon { font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.hour-note p { font-size:.82rem; line-height:1.6; color:var(--gray); }

/* ── ROLLOVER ── */
.rollover-card {
  background: rgba(59,31,110,0.15); border: 1px solid rgba(124,58,237,0.25);
  border-radius: 16px; padding: 2.5rem;
  margin-bottom: 1.5rem;
}
.rollover-badge {
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--violet-glow); background:rgba(124,58,237,0.12);
  border:1px solid rgba(124,58,237,0.3); padding:.3rem .9rem; border-radius:100px;
  display:inline-block; margin-bottom:1rem;
}
.rollover-header h3 { font-family:var(--serif); font-size:1.5rem; font-weight:400; color:var(--white); margin-bottom:.5rem; }
.rollover-header p { font-size:.88rem; line-height:1.7; color:var(--light); margin-bottom:2rem; }

.rollover-rules { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.rollover-rule { display:flex; align-items:flex-start; gap:1rem; }
.rr-icon { font-size:1.2rem; flex-shrink:0; margin-top:.1rem; }
.rollover-rule strong { display:block; font-size:.88rem; color:var(--white); margin-bottom:.3rem; }
.rollover-rule p { font-size:.82rem; line-height:1.6; color:var(--gray); }

/* ── MONTHLY INCLUDES ── */
.monthly-includes {
  background: var(--dark); border: 1px solid var(--border);
  border-radius: 14px; padding: 2rem 2.5rem;
}
.monthly-includes h3 { font-family:var(--sans); font-size:.9rem; font-weight:700; color:var(--white); margin-bottom:1.4rem; }
.mi-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.mi-item { display:flex; align-items:center; gap:.7rem; font-size:.85rem; color:var(--light); }

/* ── FAQ ── */
.faq-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:2.5rem; }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.8rem; transition:border-color .25s, background .25s; }
.faq-item:hover { background:#1a1a2a; border-color:rgba(124,58,237,0.3); }
.faq-item h3 { font-family:var(--sans); font-size:.9rem; font-weight:700; color:var(--white); margin-bottom:.6rem; }
.faq-item p { font-size:.84rem; line-height:1.7; color:var(--gray); }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .packs-grid { grid-template-columns:1fr; }
  .hour-tiers { grid-template-columns:1fr; }
  .rollover-rules { grid-template-columns:1fr; }
  .mi-grid { grid-template-columns:1fr; }
  .faq-grid { grid-template-columns:1fr; }
}