/* ================================================
   SERVICES — package-based Services page.
   Scoped under .svc. Its package-card and CTA-button
   classes are also reused directly on index.html/work.html
   alongside home.css, instead of being redefined per page.
   ================================================ */

.svc { font-family: var(--font-body); color: var(--color-text); background: var(--color-surface); }
.svc a { color: var(--color-primary); text-decoration: none; }
.svc a:hover { color: var(--color-primary-hover); }

.svc-wrap { max-width: 1160px; margin: 0 auto; padding-left: var(--space-8); padding-right: var(--space-8); }

/* --- Hero --- */
.svc-hero { padding-top: var(--space-16); padding-bottom: var(--space-6); }
.svc-breadcrumb { font: var(--text-body-sm); color: var(--color-text-tertiary); }
.svc-breadcrumb a { color: inherit; }
.svc-eyebrow { display: block; margin-top: var(--space-5); }
.svc-hero h1 { font: var(--text-display-lg); letter-spacing: var(--tracking-tighter); color: var(--color-text); margin: var(--space-3) 0 0; max-width: 720px; }
.svc-hero p { font: var(--text-body-lg); color: var(--color-text-secondary); margin-top: var(--space-4); max-width: 560px; }

/* --- Package cards --- */
.svc-packages { padding-top: var(--space-6); padding-bottom: var(--space-20); }
.svc-pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 860px) { .svc-pkg-grid { grid-template-columns: 1fr; } }

.svc-pkg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.svc-pkg-card:hover { border-color: var(--color-primary); transform: translateY(-4px); }
.svc-pkg-card--featured { border-color: var(--color-primary); border-width: 2px; }
.svc-pkg-card--inactive { opacity: 0.7; }

.svc-pkg-tag {
  position: absolute; top: -12px; left: var(--space-6);
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--color-primary); color: #fff; font: 600 var(--text-label-sm);
}
.svc-pkg-tag--muted { background: var(--gray-800); }

.svc-pkg-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--gray-950); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5); font-size: 1.1rem;
}
.svc-pkg-name { font: var(--text-heading-md); color: var(--color-text); }
.svc-pkg-desc { font: var(--text-body-md); color: var(--color-text-secondary); margin-top: var(--space-2); }
.svc-pkg-price { font: 600 28px var(--font-display); color: var(--color-text); margin-top: var(--space-5); }

.svc-pkg-features { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); flex: 1; }
.svc-pkg-feature { display: flex; align-items: center; gap: var(--space-2); font: var(--text-body-sm); color: var(--color-text-secondary); }
.svc-pkg-feature i { color: var(--color-primary); flex-shrink: 0; font-size: 0.8rem; }

.svc-pkg-cta {
  margin-top: var(--space-5); padding: 12px 20px; border-radius: var(--radius-sm);
  text-align: center; font: 600 var(--text-label-md); display: block;
  background: var(--color-primary); color: #fff; border: none; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.svc-pkg-cta:hover { background: var(--color-primary-hover); }
.svc-pkg-cta--ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.svc-pkg-cta--ghost.svc-pkg-cta--ghost:hover { background: var(--color-text); color: #fff; border-color: var(--color-text); }

/* --- Shared section header --- */
.svc-section-eyebrow { display: inline-flex; }
.svc-section-title { font: var(--text-display-sm); letter-spacing: var(--tracking-tighter); color: var(--color-text); margin: var(--space-3) 0 var(--space-6); }
.svc-section-sub { font: var(--text-body-md); color: var(--color-text-secondary); margin: 0 0 var(--space-8); max-width: 560px; }

/* --- Pricing notes --- */
.svc-notes-section { background: var(--color-bg-subtle); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.svc-notes-section .svc-wrap { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.svc-notes-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; }
.svc-note { display: flex; align-items: flex-start; gap: var(--space-2); font: var(--text-body-sm); color: var(--color-text-secondary); }
.svc-note i { color: var(--color-text-tertiary); flex-shrink: 0; margin-top: 2px; }

/* --- Terms of service --- */
.svc-terms .svc-wrap { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.svc-terms-table { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.svc-terms-row { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-6); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); }
.svc-terms-row:last-child { border-bottom: none; }
.svc-terms-row:hover { background: var(--color-bg-subtle); }
.svc-terms-term { font: 600 14px var(--font-display); color: var(--color-text); }
.svc-terms-detail { font: var(--text-body-sm); color: var(--color-text-secondary); }
@media (max-width: 640px) { .svc-terms-row { grid-template-columns: 1fr; gap: var(--space-1); } }

/* --- Roadmap --- */
.svc-roadmap .svc-wrap { padding-top: 0; padding-bottom: var(--space-20); }
.svc-roadmap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); max-width: 720px; }
@media (max-width: 560px) { .svc-roadmap-grid { grid-template-columns: 1fr; } }
.svc-roadmap-card { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-6); background: var(--color-surface); }
.svc-roadmap-badge { display: inline-block; padding: 3px 9px; border-radius: var(--radius-sm); background: var(--gray-100); color: var(--color-text-tertiary); font: 500 var(--text-label-sm); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-4); }
.svc-roadmap-name { font: var(--text-heading-sm); color: var(--color-text); }
.svc-roadmap-desc { font: var(--text-body-sm); color: var(--color-text-secondary); margin-top: var(--space-2); }
.svc-roadmap-price { font: 600 14px var(--font-mono); color: var(--color-text); margin-top: var(--space-4); }

/* --- CTA banner --- */
.svc-cta .svc-wrap { padding-top: 0; padding-bottom: var(--space-20); }
.svc-cta-inner {
  background: var(--gray-950); border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-12);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.svc-cta-inner::before {
  content: ''; position: absolute; top: -100px; right: -80px; width: 320px; height: 320px;
  border-radius: 50%; background: var(--indigo-500); filter: blur(80px); opacity: 0.35; pointer-events: none;
}
.svc-cta-title { font: var(--text-display-sm); letter-spacing: var(--tracking-tighter); color: #fff; position: relative; z-index: 1; }
.svc-cta-sub { font: var(--text-body-md); color: var(--gray-400); margin-top: var(--space-2); position: relative; z-index: 1; }
.svc-cta-actions { display: flex; gap: var(--space-3); flex-shrink: 0; position: relative; z-index: 1; }
.svc-cta-btn { padding: 14px 24px; border-radius: var(--radius-sm); font: 600 var(--text-label-md); white-space: nowrap; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.svc-cta-btn--primary { background: #fff; color: var(--gray-950); }
.svc-cta-btn--primary.svc-cta-btn--primary:hover { background: var(--color-primary); color: #fff; }
.svc-cta-btn--outline { border: 1px solid var(--gray-700); color: #fff; }
.svc-cta-btn--outline.svc-cta-btn--outline:hover { border-color: #fff; }

/* Specificity fix: these must reliably win over any ".xxx2 a" blanket link
   color rule, on any page that reuses these classes (not just under .svc) —
   doubled class beats a class+element selector regardless of load order. */
.svc-pkg-cta.svc-pkg-cta { color: #fff; }
.svc-pkg-cta--ghost.svc-pkg-cta--ghost { color: var(--color-text); }
.svc-cta-btn--primary.svc-cta-btn--primary { color: var(--gray-950); }
.svc-cta-btn--outline.svc-cta-btn--outline { color: #fff; }