/* =====================================================================
   Services page — in-depth service breakdowns
   Builds on the shared theme in styles.css (variables, header, footer).
   ===================================================================== */

.services-page {
  --svc-gap: clamp(2rem, 5vw, 4rem);
}

/* ---------- Shared section shell ---------- */
.svc-shell {
  margin-inline: auto;
  max-width: var(--content-width);
  padding-inline: var(--page-pad);
  width: 100%;
}

/* Full-screen dot matrix — fixed behind everything, including the header. */
body:has(.services-page)::before {
  background-image: radial-gradient(circle, rgba(247, 244, 238, 0.22) 1px, transparent 1.55px);
  background-position: center;
  background-size: 14px 14px;
  content: "";
  inset: 0;
  -webkit-mask-image: radial-gradient(140% 120% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 100%);
  mask-image: radial-gradient(140% 120% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 100%);
  opacity: 0.5;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

/* Cursor-follow glow — accent dots light up around the pointer,
   tinted to the --accent of whichever section is under the cursor. */
body:has(.services-page)::after {
  background-image: radial-gradient(circle, var(--dot-accent, #ff9300) 1.45px, transparent 2px);
  background-position: center;
  background-size: 14px 14px;
  content: "";
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--dot-accent, #ff9300) 55%, transparent));
  inset: 0;
  -webkit-mask-image: radial-gradient(circle 15rem at var(--dot-x, 50%) var(--dot-y, 50%), #000 0%, rgba(0, 0, 0, 0.94) 30%, transparent 70%);
  mask-image: radial-gradient(circle 15rem at var(--dot-x, 50%) var(--dot-y, 50%), #000 0%, rgba(0, 0, 0, 0.94) 30%, transparent 70%);
  opacity: var(--dot-hover-opacity, 0);
  pointer-events: none;
  position: fixed;
  transition: opacity 220ms ease, --dot-accent 220ms ease;
  z-index: -1;
}

body.dot-pointer-active {
  --dot-hover-opacity: 0.4;
}

/* Touch devices have no cursor — drift the dot glow automatically, like the home hero.
   A linear, near-circular path keeps the motion smooth instead of cornering squarely. */
@media (hover: none) {
  body:has(.services-page) {
    animation: dotDrift 26s linear infinite;
    --dot-hover-opacity: 0.78;
    --dot-accent: #ff9300;
  }
}

@keyframes dotDrift {
  0%    { --dot-x: 78%; --dot-y: 50%; }
  12.5% { --dot-x: 70%; --dot-y: 70%; }
  25%   { --dot-x: 50%; --dot-y: 78%; }
  37.5% { --dot-x: 30%; --dot-y: 70%; }
  50%   { --dot-x: 22%; --dot-y: 50%; }
  62.5% { --dot-x: 30%; --dot-y: 30%; }
  75%   { --dot-x: 50%; --dot-y: 22%; }
  87.5% { --dot-x: 70%; --dot-y: 30%; }
  100%  { --dot-x: 78%; --dot-y: 50%; }
}

/* ---------- Hero ---------- */
.services-hero {
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
  text-align: left;
}

.services-hero h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  max-width: 16ch;
}

.services-hero h1 .accent-sweep {
  background: linear-gradient(100deg, #ff9300, #f472b6, #60a5fa, #4ade80, #ff9300);
  background-clip: text;
  background-size: 280% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: svc-hue 8s linear infinite;
}

.services-hero-text {
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  margin: 1.3rem 0 0;
  max-width: 52ch;
}

.services-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-start;
  margin: 2.2rem 0 0;
  max-width: 56rem;
}

.services-chip {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 600;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.services-chip i {
  color: var(--accent);
  font-size: 0.85em;
  transition: transform 220ms ease;
}

.services-chip:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 10px 26px -12px var(--accent);
  transform: translateY(-3px);
}

.services-chip:hover i {
  transform: scale(1.18) rotate(-6deg);
}

/* ---------- Service sections ---------- */
.svc {
  padding: clamp(3rem, 7vw, 6rem) 0;
  position: relative;
}

.svc + .svc {
  border-top: 1px solid var(--line);
}

.svc-inner {
  align-items: center;
  display: grid;
  gap: var(--svc-gap);
  grid-template-columns: 1fr 1fr;
  margin-inline: auto;
  max-width: var(--content-width);
  padding-inline: var(--page-pad);
  width: 100%;
}

.svc:nth-child(even) .svc-text {
  order: 2;
}

.svc-index {
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 55%, transparent);
  color: transparent;
  display: block;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.svc-eyebrow {
  align-items: center;
  color: var(--accent);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 0.55rem;
  letter-spacing: 0.12em;
  margin-top: 0.9rem;
  text-transform: uppercase;
}

.svc-text h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0.7rem 0 0;
}

.svc-lead {
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  margin: 1rem 0 0;
  max-width: 46ch;
}

.svc-list {
  display: grid;
  gap: 0.6rem 1.4rem;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
}

.svc-list li {
  align-items: flex-start;
  color: var(--ink);
  display: flex;
  font-size: 0.92rem;
  gap: 0.6rem;
  line-height: 1.4;
}

.svc-list li i {
  color: var(--accent);
  flex: none;
  font-size: 0.78rem;
  margin-top: 0.28rem;
}

.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.6rem;
}

.svc-tags span {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.7rem;
}

.svc-link {
  align-items: center;
  background: var(--accent);
  border-radius: 999px;
  color: #0c0c10;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 0.55rem;
  margin-top: 1.9rem;
  overflow: hidden;
  padding: 0.7rem 1.3rem;
  position: relative;
  text-decoration: none;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease;
}

.svc-link i {
  transition: transform 240ms ease;
}

.svc-link:hover {
  box-shadow: 0 16px 34px -14px var(--accent);
  transform: translateY(-2px);
}

.svc-link:hover i {
  transform: translateX(4px);
}

/* ---------- Service visual panel ---------- */
.svc-visual {
  align-items: center;
  aspect-ratio: 5 / 4;
  background:
    radial-gradient(120% 120% at 70% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.svc-visual::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, transparent), transparent 70%);
  border-radius: 50%;
  content: "";
  filter: blur(50px);
  height: 16rem;
  opacity: 0.5;
  position: absolute;
  right: -4rem;
  top: -4rem;
  width: 16rem;
  z-index: 0;
}

.viz {
  position: relative;
  z-index: 1;
}

/* shared primitives */
.viz-bar {
  background: color-mix(in srgb, var(--accent) 75%, #fff);
  border-radius: 999px;
}

/* ---- Web Design: browser ---- */
.viz-web {
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.45));
  width: min(78%, 21rem);
}

.viz-browser {
  background: #16161c;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  overflow: hidden;
}

.viz-browser-bar {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
}

.viz-browser-bar i {
  border-radius: 50%;
  height: 0.5rem;
  width: 0.5rem;
}

.viz-browser-bar i:nth-child(1) { background: #fb7185; }
.viz-browser-bar i:nth-child(2) { background: #facc15; }
.viz-browser-bar i:nth-child(3) { background: #4ade80; }

.viz-browser-url {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  flex: 1;
  height: 0.85rem;
  margin-left: 0.5rem;
}

.viz-browser-body {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem;
}

.viz-hero-block {
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
  border-radius: 0.55rem;
  height: 4rem;
  position: relative;
  overflow: hidden;
}

.viz-hero-block::after,
.viz-photo-frame::after {
  animation: svc-shimmer 2.6s ease-in-out infinite;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.35), transparent 60%);
  content: "";
  inset: 0;
  position: absolute;
}

.viz-grid-2 {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
}

.viz-card-block {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.45rem;
  height: 2.4rem;
}

.viz-line {
  background: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  height: 0.55rem;
}

.viz-line.w70 { width: 70%; }
.viz-line.w45 { width: 45%; }

.viz-badge {
  align-items: center;
  animation: svc-bob 3.4s ease-in-out infinite;
  backdrop-filter: blur(8px);
  background: rgba(16, 16, 20, 0.82);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 0.8rem;
  bottom: 1.4rem;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  color: #fff;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 0.45rem;
  left: -1rem;
  padding: 0.5rem 0.8rem;
  position: absolute;
}

.viz-badge i { color: var(--accent); }

/* ---- App Design: phone ---- */
.viz-app {
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.45));
  height: min(80%, 17rem);
  aspect-ratio: 9 / 18;
}

.viz-phone {
  background: #16161c;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.6rem;
  height: 100%;
  overflow: hidden;
  padding: 0.5rem;
  position: relative;
  width: 100%;
}

.viz-phone-notch {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  height: 0.3rem;
  left: 50%;
  position: absolute;
  top: 0.45rem;
  transform: translateX(-50%);
  width: 2.5rem;
  z-index: 2;
}

.viz-phone-screens {
  animation: svc-screens 9s cubic-bezier(0.7, 0, 0.3, 1) infinite;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.viz-phone-screen {
  border-radius: 0.8rem;
  display: grid;
  flex: none;
  gap: 0.4rem;
  height: calc(100% - 1.4rem);
  padding: 0.7rem;
}

.viz-phone-screen:nth-child(1) { background: color-mix(in srgb, var(--accent) 22%, #16161c); }
.viz-phone-screen:nth-child(2) { background: color-mix(in srgb, #60a5fa 22%, #16161c); }
.viz-phone-screen:nth-child(3) { background: color-mix(in srgb, #f472b6 22%, #16161c); }

.viz-pill {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  height: 0.5rem;
}
.viz-pill.w50 { width: 50%; }
.viz-pill.w80 { width: 80%; }
.viz-circle-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.viz-circle-row span {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  height: 1.5rem;
  width: 1.5rem;
}

/* ---- Brand Identity: swatches + monogram ---- */
.viz-brand {
  display: grid;
  gap: 0.8rem;
  width: min(80%, 21rem);
}

.viz-mono {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: #16161c;
  border: 1px solid var(--line);
  border-radius: 1rem;
  display: flex;
  font-size: 4.5rem;
  font-weight: 800;
  justify-content: center;
  position: relative;
}

.viz-mono span {
  background: linear-gradient(120deg, var(--accent), #fff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.06em;
}

.viz-mono::before {
  animation: svc-spin 14s linear infinite;
  border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 50%;
  content: "";
  height: 6.5rem;
  position: absolute;
  width: 6.5rem;
}

.viz-swatches {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(5, 1fr);
}

.viz-swatch {
  animation: svc-swatch 4s ease-in-out infinite;
  border-radius: 0.6rem;
  height: 2.6rem;
}

.viz-swatch:nth-child(1) { background: #ff9300; animation-delay: 0s; }
.viz-swatch:nth-child(2) { background: #f472b6; animation-delay: 0.4s; }
.viz-swatch:nth-child(3) { background: #60a5fa; animation-delay: 0.8s; }
.viz-swatch:nth-child(4) { background: #4ade80; animation-delay: 1.2s; }
.viz-swatch:nth-child(5) { background: #a78bfa; animation-delay: 1.6s; }

/* ---- Video & Motion: play + equalizer ---- */
.viz-video {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  width: min(80%, 20rem);
}

.viz-play {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 30%, #16161c);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 1.6rem;
  height: 5rem;
  justify-content: center;
  position: relative;
  width: 5rem;
}

.viz-play::before,
.viz-play::after {
  animation: svc-ring 2.4s ease-out infinite;
  border: 2px solid var(--accent);
  border-radius: 50%;
  content: "";
  inset: 0;
  position: absolute;
}

.viz-play::after { animation-delay: 1.2s; }

.viz-eq {
  align-items: flex-end;
  display: flex;
  gap: 0.35rem;
  height: 3.4rem;
}

.viz-eq span {
  animation: svc-eq 1.1s ease-in-out infinite;
  background: var(--accent);
  border-radius: 999px;
  width: 0.45rem;
}

.viz-eq span:nth-child(1) { animation-delay: 0s; height: 40%; }
.viz-eq span:nth-child(2) { animation-delay: 0.15s; height: 70%; }
.viz-eq span:nth-child(3) { animation-delay: 0.3s; height: 100%; }
.viz-eq span:nth-child(4) { animation-delay: 0.45s; height: 55%; }
.viz-eq span:nth-child(5) { animation-delay: 0.2s; height: 85%; }
.viz-eq span:nth-child(6) { animation-delay: 0.35s; height: 45%; }
.viz-eq span:nth-child(7) { animation-delay: 0.1s; height: 75%; }

/* ---- Photography: stacked frames ---- */
.viz-photo {
  height: min(72%, 15rem);
  position: relative;
  width: min(72%, 18rem);
}

.viz-photo-frame {
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  inset: 0;
  overflow: hidden;
  position: absolute;
}

.viz-photo-frame:nth-child(1) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent), #16161c);
  transform: rotate(-7deg) translate(-1.4rem, 0.6rem);
}
.viz-photo-frame:nth-child(2) {
  background: linear-gradient(135deg, color-mix(in srgb, #60a5fa 50%, transparent), #16161c);
  transform: rotate(4deg) translate(1rem, -0.4rem);
}
.viz-photo-frame:nth-child(3) {
  animation: svc-bob 4s ease-in-out infinite;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, transparent), #1a1a22);
}

.viz-aperture {
  align-items: center;
  animation: svc-spin 10s linear infinite;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  bottom: 0.9rem;
  display: flex;
  height: 2.4rem;
  justify-content: center;
  position: absolute;
  right: 0.9rem;
  width: 2.4rem;
  z-index: 2;
}
.viz-aperture::before {
  background:
    conic-gradient(from 0deg, transparent 0 30deg, rgba(255, 255, 255, 0.6) 30deg 60deg, transparent 60deg 90deg,
    rgba(255, 255, 255, 0.6) 90deg 120deg, transparent 120deg 150deg, rgba(255, 255, 255, 0.6) 150deg 180deg,
    transparent 180deg 210deg, rgba(255, 255, 255, 0.6) 210deg 240deg, transparent 240deg 270deg,
    rgba(255, 255, 255, 0.6) 270deg 300deg, transparent 300deg 330deg, rgba(255, 255, 255, 0.6) 330deg);
  border-radius: 50%;
  content: "";
  height: 1.3rem;
  -webkit-mask: radial-gradient(circle, transparent 40%, #000 42%);
  mask: radial-gradient(circle, transparent 40%, #000 42%);
  width: 1.3rem;
}

/* ---- SEO & Growth: bar chart + trend ---- */
.viz-seo {
  width: min(82%, 22rem);
}

.viz-chart {
  align-items: flex-end;
  background: #16161c;
  border: 1px solid var(--line);
  border-radius: 1rem;
  display: flex;
  gap: 0.7rem;
  height: 11rem;
  padding: 1rem;
  position: relative;
}

.viz-chart-bar {
  animation: svc-grow 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 25%, transparent));
  border-radius: 0.4rem 0.4rem 0 0;
  flex: 1;
  transform-origin: bottom;
}
.viz-chart-bar:nth-child(1) { --h: 35%; height: var(--h); animation-delay: 0s; }
.viz-chart-bar:nth-child(2) { --h: 55%; height: var(--h); animation-delay: 0.2s; }
.viz-chart-bar:nth-child(3) { --h: 45%; height: var(--h); animation-delay: 0.4s; }
.viz-chart-bar:nth-child(4) { --h: 75%; height: var(--h); animation-delay: 0.6s; }
.viz-chart-bar:nth-child(5) { --h: 92%; height: var(--h); animation-delay: 0.8s; }

.viz-rank {
  align-items: center;
  animation: svc-bob 3s ease-in-out infinite;
  background: rgba(16, 16, 20, 0.9);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 0.7rem;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
  color: #fff;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 700;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  position: absolute;
  right: -0.8rem;
  top: -0.8rem;
}
.viz-rank i { color: var(--accent); }

/* ---- Print & Social: fanned cards ---- */
.viz-print {
  height: min(72%, 15rem);
  position: relative;
  width: min(80%, 20rem);
}

.viz-post {
  background: #16161c;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  inset: 0 0 0 25%;
  overflow: hidden;
  padding: 0.8rem;
  position: absolute;
}
.viz-post-head {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.viz-post-head span {
  background: var(--accent);
  border-radius: 50%;
  height: 1.4rem;
  width: 1.4rem;
}
.viz-post-head em {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  height: 0.5rem;
  width: 4rem;
}
.viz-post-img {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent), #1a1a22);
  border-radius: 0.5rem;
  height: 5rem;
}
.viz-post:nth-child(1) { transform: rotate(-9deg) translateX(-1.2rem) scale(0.92); opacity: 0.6; }
.viz-post:nth-child(2) { transform: rotate(-4deg) translateX(-0.4rem) scale(0.96); opacity: 0.85; }
.viz-post:nth-child(3) { animation: svc-bob 4.2s ease-in-out infinite; }

.viz-heart {
  align-items: center;
  animation: svc-pop 2.8s ease-in-out infinite;
  background: #fb7185;
  border-radius: 50%;
  bottom: -0.6rem;
  color: #fff;
  display: flex;
  font-size: 0.85rem;
  height: 2.2rem;
  justify-content: center;
  position: absolute;
  right: 0.5rem;
  width: 2.2rem;
  z-index: 3;
}

/* ---- Hosting & Care: server rack ---- */
.viz-host {
  display: grid;
  gap: 0.7rem;
  width: min(78%, 20rem);
}

.viz-server {
  align-items: center;
  background: #16161c;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  display: flex;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
}

.viz-server-led {
  animation: svc-blink 1.6s ease-in-out infinite;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent);
  flex: none;
  height: 0.6rem;
  width: 0.6rem;
}
.viz-server:nth-child(2) .viz-server-led { animation-delay: 0.4s; }
.viz-server:nth-child(3) .viz-server-led { animation-delay: 0.8s; }

.viz-server-lines {
  display: grid;
  flex: 1;
  gap: 0.35rem;
}

.viz-uptime {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 0.4rem;
  justify-self: start;
  padding: 0.4rem 0.8rem;
}
.viz-uptime i { color: var(--accent); }

/* ---------- Promise band ---------- */
.svc-promise {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.svc-promise-head {
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  max-width: var(--content-width);
  padding-inline: var(--page-pad);
  text-align: center;
}

.svc-promise-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
}

.svc-promise-head p {
  color: var(--muted);
  margin: 0.7rem auto 0;
  max-width: 48ch;
}

.svc-promise-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  margin-inline: auto;
  max-width: var(--content-width);
  padding-inline: var(--page-pad);
}

.svc-promise-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  padding: 1.5rem 1.3rem;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), border-color 240ms ease, background 240ms ease;
}

.svc-promise-card:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-5px);
}

.svc-promise-card i {
  color: var(--accent);
  font-size: 1.5rem;
}

.svc-promise-card h3 {
  font-size: 1.1rem;
  margin: 0.9rem 0 0.4rem;
}

.svc-promise-card p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
}

/* ---------- Closing CTA ---------- */
.svc-cta {
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 8vw, 6rem);
  position: relative;
}

.svc-cta-inner {
  background: linear-gradient(135deg, rgba(255, 147, 0, 0.14), rgba(96, 165, 250, 0.12), rgba(74, 222, 128, 0.12));
  background-size: 200% 200%;
  animation: svc-pan 12s ease infinite;
  border: 1px solid var(--line);
  border-radius: 1.8rem;
  margin-inline: auto;
  max-width: calc(var(--content-width) - 4rem);
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  position: relative;
  text-align: center;
}

.svc-cta-inner h2 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 auto;
  max-width: 18ch;
}

.svc-cta-inner p {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 1.1rem auto 0;
  max-width: 46ch;
}

.svc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 2rem;
}

.svc-cta-primary,
.svc-cta-secondary {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 700;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  text-decoration: none;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease, background 240ms ease, border-color 240ms ease;
}

.svc-cta-primary {
  background: #ff9300;
  color: #14110b;
}
.svc-cta-primary:hover {
  box-shadow: 0 18px 36px -14px #ff9300;
  transform: translateY(-3px);
}

.svc-cta-secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--ink);
}
.svc-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
}

.svc-cta-primary i,
.svc-cta-secondary i { transition: transform 240ms ease; }
.svc-cta-primary:hover i { transform: translateX(4px); }

/* ---------- Keyframes ---------- */
@keyframes svc-hue {
  to { background-position: 280% 50%; }
}

@keyframes svc-shimmer {
  0% { transform: translateX(-120%); }
  60%, 100% { transform: translateX(120%); }
}

@keyframes svc-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.7rem); }
}

@keyframes svc-screens {
  0%, 22% { transform: translateY(0); }
  33%, 55% { transform: translateY(calc(-100% - 0.5rem)); }
  66%, 88% { transform: translateY(calc(-200% - 1rem)); }
  100% { transform: translateY(0); }
}

@keyframes svc-spin { to { transform: rotate(360deg); } }

@keyframes svc-swatch {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-0.4rem); filter: brightness(1.2); }
}

@keyframes svc-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.9); opacity: 0; }
}

@keyframes svc-eq {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

@keyframes svc-grow {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1); }
}

@keyframes svc-pop {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.25); }
}

@keyframes svc-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@keyframes svc-pan {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- Reveal helpers for inner pieces ---------- */
.reveal-ready .svc-visual[data-reveal] { transform: translateY(22px) scale(0.97); }
.reveal-ready .svc-visual[data-reveal].is-visible { transform: translateY(0) scale(1); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .svc-inner {
    gap: 2rem;
    grid-template-columns: 1fr;
  }
  .svc:nth-child(even) .svc-text { order: 0; }
  .svc-visual {
    aspect-ratio: 16 / 10;
    order: -1;
  }
  .svc-promise-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .svc-list { grid-template-columns: 1fr; }
  .svc-promise-grid { grid-template-columns: 1fr; }
  .services-chip { font-size: 0.8rem; padding: 0.5rem 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .services-page * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}