/* =============================================
   SERVICES PAGE CSS – DECOTRONICS
   =============================================*/

/* ====== SERVICE NAV PILLS ====== */
.service-nav-pills {
  position: sticky; top: var(--nav-h); z-index: 100;
  background: rgba(6,6,8,0.95); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--black-border);
  padding: 16px 6%; display: flex; gap: 8px; flex-wrap: wrap;
}
.spill {
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grey); border: 1px solid var(--black-border);
  padding: 8px 20px; transition: all .3s; cursor: pointer;
}
.spill.active, .spill:hover { color: var(--black); background: var(--gold); border-color: var(--gold); }

/* ====== SERVICE SECTIONS ====== */
.service-section { padding: 110px 6%; border-bottom: 1px solid var(--black-border); }
.service-section.alt-bg { background: var(--black-soft); }
.ss-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; }
.ss-inner.reverse { direction: rtl; }
.ss-inner.reverse > * { direction: ltr; }

.ss-media { }
.ss-hero-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: brightness(0.82); transition: filter .5s; }
.ss-hero-img:hover { filter: brightness(1); }
.ss-sub-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; }
.ss-sub-imgs img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: brightness(0.75); transition: filter .4s; }
.ss-sub-imgs img:hover { filter: brightness(0.95); }

.ss-num {
  font-family: var(--font-hero); font-size: 5rem;
  color: var(--gold); opacity: 0.1; line-height: 1;
  margin-bottom: -16px;
}
.ss-text > p { font-size: 0.88rem; color: var(--grey-light); line-height: 1.9; margin-bottom: 28px; }
.ss-features { margin: 0 0 28px; }
.sf-item {
  display: flex; gap: 12px; align-items: center;
  font-size: 0.8rem; color: var(--grey-light);
  padding: 10px 0; border-bottom: 1px solid var(--black-border);
  line-height: 1.5;
}
.sf-item:last-child { border-bottom: none; }
.sf-item i { color: var(--gold); font-size: 0.65rem; flex-shrink: 0; }
.ss-price-hint {
  font-size: 0.78rem; color: var(--grey); margin-bottom: 24px;
  padding: 12px 16px; border-left: 2px solid var(--gold-dark);
  background: var(--gold-glow2);
}
.ss-price-hint strong { color: var(--gold-light); }

/* ====== AMC SECTION ====== */
.amc-section { background: var(--black-soft); }
.amc-inner { }
.amc-tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.amc-tier {
  background: var(--black-card); border: 1px solid var(--black-border);
  padding: 44px 36px; position: relative;
  transition: border-color .3s, transform .3s;
}
.amc-tier:hover { border-color: var(--gold-dark); transform: translateY(-4px); }
.amc-tier.premium { border-color: var(--gold); }
.amc-badge {
  position: absolute; top: -1px; right: 24px;
  background: var(--gold); color: var(--black);
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 5px 12px;
}
.amc-tier-name {
  font-family: var(--font-display); font-size: 1.3rem;
  font-weight: 700; color: var(--white-off); margin-bottom: 12px;
}
.amc-tier-price {
  font-family: var(--font-hero); font-size: 2.5rem;
  color: var(--gold-light); line-height: 1;
  margin-bottom: 28px; padding-bottom: 20px;
  border-bottom: 1px solid var(--black-border);
}
.amc-tier-price span { font-family: var(--font-sans); font-size: 0.85rem; color: var(--grey); }
.amc-tier ul { list-style: none; margin-bottom: 32px; }
.amc-tier li { font-size: 0.78rem; color: var(--grey-light); padding: 8px 0; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--black-border); }
.amc-tier li:last-child { border-bottom: none; }
.amc-tier li i { color: var(--gold); font-size: 0.65rem; flex-shrink: 0; }

/* ====== RESPONSIVE ====== */
@media (max-width: 1024px) {
  .ss-inner, .ss-inner.reverse { grid-template-columns: 1fr; gap: 48px; direction: ltr; }
  .amc-tiers { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .service-nav-pills { position: static; overflow-x: auto; flex-wrap: nowrap; padding: 12px 5%; }
  .spill { white-space: nowrap; }
  .service-section { padding: 70px 5%; }
}