/* ── PAGE HEADER ──────────────────────────────── */
.configs-header {
  padding: 4.5rem 2.5rem 3rem;
  border-bottom: 1px solid var(--border);
  margin-top: 56px;
}
.configs-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 900; letter-spacing: 0.5px;
  text-transform: uppercase; line-height: 1.0;
  margin-bottom: 1rem; margin-top: 0.75rem;
}
.configs-sub {
  font-size: 0.9rem; color: var(--muted);
  line-height: 1.8; max-width: 540px;
}

/* ── TIER TABS ────────────────────────────────── */
.tier-nav {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 2.5rem;
  background: var(--bg);
}
.tier-tab {
  background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted); font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 1.1rem 1.5rem 1.1rem 0;
  margin-bottom: -1px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.tier-tab + .tier-tab { padding-left: 1.5rem; }
.tier-tab:hover { color: var(--text); }
.tier-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── CONFIGS GRID ─────────────────────────────── */
.configs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* ── CARD ─────────────────────────────────────── */
.config-card {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: background 0.25s;
  background: var(--bg);
}
.config-card:hover { background: rgba(255,255,255,0.02); }
.config-card:nth-child(3n) { border-right: none; }
.config-card.hidden { display: none; }

/* image hero zone */
.card-hero-img {
  width: 100%; height: 200px;
  object-fit: cover; object-position: center;
  filter: brightness(0.5) saturate(0.8);
  display: block;
  transition: filter 0.4s ease, transform 0.5s ease;
}
.config-card:hover .card-hero-img {
  filter: brightness(0.65) saturate(1.1);
  transform: scale(1.04);
}

/* card body */
.card-body { padding: 2rem 2rem 0; flex: 1; display: flex; flex-direction: column; }

/* tier badge */
.card-tier-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 1rem; padding: 0.28rem 0.7rem;
  width: fit-content;
}
.badge-entry { background: rgba(255,255,255,0.05); color: var(--muted); border: 1px solid var(--border); }
.badge-mid   { background: rgba(0,229,255,0.08); color: var(--accent); border: 1px solid rgba(0,229,255,0.25); }
.badge-high  { background: rgba(255,200,0,0.07); color: #ffc800; border: 1px solid rgba(255,200,0,0.22); }

/* ribbon */
.card-featured-ribbon {
  position: absolute; top: 1rem; right: -2.5rem;
  background: var(--accent); color: #000;
  font-size: 0.58rem; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 0.3rem 3rem;
  transform: rotate(45deg);
  z-index: 2;
}

.card-name {
  font-family: var(--font-display);
  font-size: 1.8rem; font-weight: 900;
  letter-spacing: 0.5px; text-transform: uppercase;
  line-height: 1.1; margin-bottom: 0.4rem;
}
.card-tagline {
  font-size: 0.82rem; color: var(--muted);
  margin-bottom: 1.5rem; line-height: 1.6;
}

/* specs */
.card-specs { list-style: none; display: flex; flex-direction: column; gap: 0; flex: 1; margin-bottom: 1.5rem; }
.card-spec-item {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
}
.card-spec-item:first-child { border-top: 1px solid var(--border); }
.spec-label { color: var(--muted); text-transform: uppercase; letter-spacing: 0.75px; font-weight: 600; font-size: 0.65rem; flex-shrink: 0; padding-top: 0.05rem; }
.spec-value { text-align: right; font-weight: 500; line-height: 1.4; color: var(--text); }

/* targets */
.card-targets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.target-tag { font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 0.22rem 0.55rem; border: 1px solid var(--border); color: var(--muted); }

/* footer */
.card-footer { border-top: 1px solid var(--border); padding: 1.5rem 2rem 2rem; }
.card-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.card-price-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.card-price { font-family: var(--font-display); font-size: 2.2rem; font-weight: 900; line-height: 1; }
.config-card[data-tier="entry"] .card-price { color: var(--text); }
.config-card[data-tier="mid"]   .card-price { color: var(--accent); }
.config-card[data-tier="high"]  .card-price { color: #ffc800; }

.btn-add-preset {
  width: 100%; border: none; padding: 0.9rem 1rem;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; transition: opacity 0.2s, transform 0.15s;
  margin-bottom: 0.5rem;
}
.btn-add-preset:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-add-preset:active { transform: scale(0.98); }
.config-card[data-tier="entry"] .btn-add-preset { background: rgba(255,255,255,0.1); color: var(--text); border: 1px solid var(--border); }
.config-card[data-tier="mid"]   .btn-add-preset { background: var(--accent); color: #000; }
.config-card[data-tier="high"]  .btn-add-preset { background: #ffc800; color: #000; }

.btn-customize {
  width: 100%; background: none; border: none;
  color: var(--muted); font-family: var(--font-body);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 0.5rem;
  cursor: pointer; transition: color 0.2s;
}
.btn-customize:hover { color: var(--text); }

/* ── CUSTOM CTA ───────────────────────────────── */
.custom-cta { padding: 7rem 2.5rem; text-align: center; border-top: 1px solid var(--border); }
.custom-cta-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 900; letter-spacing: 0.5px;
  text-transform: uppercase; line-height: 1.05;
  margin-bottom: 1rem; margin-top: 0.75rem;
}
.custom-cta-sub { font-size: 0.88rem; color: var(--muted); line-height: 1.8; max-width: 460px; margin: 0 auto 2.5rem; }
.btn-custom-config {
  display: inline-block; text-decoration: none;
  background: var(--accent); color: #000;
  padding: 0.9rem 2.5rem; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; transition: opacity 0.2s;
}
.btn-custom-config:hover { opacity: 0.85; }

@media (max-width: 1100px) {
  .configs-grid { grid-template-columns: repeat(2, 1fr); }
  .config-card:nth-child(3n) { border-right: 1px solid var(--border); }
  .config-card:nth-child(2n) { border-right: none; }
}
@media (max-width: 700px) {
  .configs-grid { grid-template-columns: 1fr; }
  .config-card { border-right: none; }
}