/* ================================
   SERVICES (scoped to #services)
   ================================ */

#services .section{ padding: clamp(48px, 6vw, 96px) 20px; color: var(--text-700); }
.container{ width:min(var(--container),100%); margin-inline:auto; }

/* ---------------- HERO ---------------- */
.svc-hero h1{
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight:900; letter-spacing:-.02em; margin:0 0 8px; color: var(--text-900);
}
.svc-hero .lead{ max-width: 70ch; line-height:1.75; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }

/* Buttons (strong, always visible text) */
.btn-primary{
  display:inline-block; padding:12px 18px; border-radius: var(--radius);
  background: var(--brand-purple, #7D5BA6);
  color:#fff !important; text-decoration:none; font-weight:800;
  box-shadow: 0 10px 24px rgba(125,91,166,.25);
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-ghost{
  display:inline-block; padding:12px 18px; border-radius: var(--radius);
  text-decoration:none; font-weight:800;
  color: var(--brand-purple, #7D5BA6);
  border:2px solid var(--brand-purple, #7D5BA6);
}

/* ---------------- BANDS ---------------- */
.svc-band{ padding: clamp(36px, 5vw, 60px) 0; }
.soft-lavender{ background: rgba(125,91,166,.06); }
.soft-green{ background: rgba(52,199,89,.10); }

.band-title{
  font-size: var(--h2); font-weight:900; color: var(--text-900); margin: 0 0 16px;
}

/* ---------------- GRID OF SERVICES ---------------- */
.svc-grid{ display:grid; gap: clamp(14px, 2.2vw, 20px); grid-template-columns: repeat(4, 1fr); }
@media (max-width:1100px){ .svc-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:820px){  .svc-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:540px){  .svc-grid{ grid-template-columns: 1fr; } }

/* Base card with CSS variables for theme */
.svc-card{
  --bg:#fff; --bd:#eee; --fg:#111;
  --chipbg: rgba(125,91,166,.12); --chipfg: var(--brand-purple,#7D5BA6);
  background: var(--bg); border:1px solid var(--bd);
  border-radius:16px; padding:18px; box-shadow: 0 18px 42px rgba(0,0,0,.08);
  display:flex; flex-direction:column; gap:10px;
}
.svc-card h3{ margin:0; font-size:18px; font-weight:900; color: var(--fg); }
.svc-card .blurb{ margin:0; color:var(--text-700); line-height:1.65; }
.svc-card .points{ margin: 4px 0 0; padding-left:18px; line-height:1.7; }
.svc-card .points li{ margin:4px 0; }

.svc-card .tag{
  align-self:flex-start; font-size:11px; font-weight:900; letter-spacing:.04em;
  padding:6px 10px; border-radius:999px; background: var(--chipbg); color: var(--chipfg);
  border:1px solid color-mix(in srgb, var(--chipfg) 40%, transparent);
}

/* Per-card accent themes (order: 1..8) */
.svc-grid .svc-card:nth-child(1){ /* Qualified Leads */
  --bg: linear-gradient(180deg,#FFF7ED 0%,#FFFBEB 100%);
  --bd:#FCD34D; --fg:#B45309; --chipbg:#FEF3C7; --chipfg:#B45309;
}
.svc-grid .svc-card:nth-child(2){ /* Bulk Emails */
  --bg: linear-gradient(180deg,#EEF2FF 0%,#F5F3FF 100%);
  --bd:#C4B5FD; --fg:#3730A3; --chipbg:#EDE9FE; --chipfg:#7C3AED;
}
.svc-grid .svc-card:nth-child(3){ /* Custom Software */
  --bg: linear-gradient(180deg,#ECFDF5 0%,#F0FDF4 100%);
  --bd:#86EFAC; --fg:#065F46; --chipbg:#D1FAE5; --chipfg:#16A34A;
}
.svc-grid .svc-card:nth-child(4){ /* Social Media */
  --bg: linear-gradient(180deg,#E0F2FE 0%,#ECFEFF 100%);
  --bd:#93C5FD; --fg:#0C4A6E; --chipbg:#DBEAFE; --chipfg:#0EA5E9;
}
.svc-grid .svc-card:nth-child(5){ /* Websites & SEO */
  --bg: linear-gradient(180deg,#F8FAFC 0%,#F1F5F9 100%);
  --bd:#CBD5E1; --fg:#0F172A; --chipbg:#E2E8F0; --chipfg:#334155;
}
.svc-grid .svc-card:nth-child(6){ /* Maintenance */
  --bg: linear-gradient(180deg,#FEF2F2 0%,#FFF7ED 100%);
  --bd:#FDBA74; --fg:#7C2D12; --chipbg:#FFEDD5; --chipfg:#C2410C;
}
.svc-grid .svc-card:nth-child(7){ /* Dashboards & Analytics */
  --bg: linear-gradient(180deg,#ECFEFF 0%,#EFF6FF 100%);
  --bd:#93C5FD; --fg:#0E7490; --chipbg:#DBEAFE; --chipfg:#1D4ED8;
}
.svc-grid .svc-card:nth-child(8){ /* Automation & RPA */
  --bg: linear-gradient(180deg,#F5F3FF 0%,#EEF2FF 100%);
  --bd:#C4B5FD; --fg:#4C1D95; --chipbg:#DDD6FE; --chipfg:#7C3AED;
}

/* Small action button inside cards */
.svc-card .btn.mini{
  display:inline-block; padding:10px 14px; border-radius:12px; font-weight:800; text-decoration:none;
  background: var(--brand-purple,#7D5BA6); color:#fff !important;
  box-shadow: 0 10px 22px rgba(125,91,166,.22);
}

/* ---------------- 4D PROCESS ---------------- */
#process .steps{ display:grid; gap:12px; max-width:900px; }
.step{
  display:grid; grid-template-columns:60px 1fr; gap:14px; align-items:center;
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.07);
}
.badge{
  width:60px; height:60px; border-radius:12px; color:#fff; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.badge.d1{ background: var(--brand-purple,#7D5BA6); }
.badge.d2{ background: var(--brand-green,#34C759); }
.badge.d3{ background: var(--brand-red,#FF3B30); }
.badge.d4{ background: var(--brand-blue,#007AFF); }
.step h4{ margin:0 0 4px; font-size:18px; font-weight:900; color: var(--text-900); }
.step p{ margin:0; color: var(--text-700); }

/* ---------------- PACKAGES ---------------- */
.tiers{ display:grid; gap: clamp(14px, 2vw, 20px); grid-template-columns: repeat(3, 1fr); }
@media (max-width:900px){ .tiers{ grid-template-columns: 1fr; } }

.tier{
  --ring:#E5E7EB;
  background:#fff; border:1px solid var(--ring); border-radius:16px; padding:20px;
  box-shadow: 0 18px 42px rgba(0,0,0,.08);
}
.tier.featured{
  --ring: color-mix(in srgb, var(--brand-purple) 55%, #ffffff);
  box-shadow: 0 26px 60px rgba(125,91,166,.18);
}
.tier h3{ margin:0 0 2px; font-size:20px; font-weight:900; color: var(--text-900); }
.tier .desc{ margin:0 0 8px; color: var(--text-500); }
.tier ul{ margin: 8px 0 12px 18px; line-height:1.7; }
.tier .btn.block{
  display:inline-block; padding:12px 18px; border-radius:12px; font-weight:800; text-decoration:none;
  background: var(--brand-purple,#7D5BA6); color:#fff !important; box-shadow: 0 10px 24px rgba(125,91,166,.22);
}

/* ---------------- CTA ---------------- */
.svc-cta .cta-card{
  background:#fff; border:1px solid var(--border); border-radius:18px;
  padding: clamp(22px, 3.4vw, 32px); text-align:center; box-shadow: 0 24px 54px rgba(0,0,0,.12);
}
.svc-cta h2{
  font-size: clamp(22px, 2.6vw, 28px); font-weight:900; color: var(--text-900); margin:0 0 6px;
}
.svc-cta .lead{ color: var(--text-700); margin:0 0 14px; }
.cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------------- Utilities / Reveal ---------------- */
.reveal{ opacity:0; transform: translateY(10px); transition: .5s ease; }
.reveal.in{ opacity:1; transform:none; }