/* ============================================
   SoSpark Design v3 — Services Page
   ============================================ */

.services-hero {
  min-height: 55svh; display: flex; align-items: flex-end;
  padding-top: calc(var(--nav-h) + var(--sp-16)); padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--cream-4); position: relative; overflow: hidden;
}
.services-hero__glow {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.09) 0%, transparent 70%);
  filter: blur(80px); top: -120px; left: -100px;
  animation: blobFloat1 18s ease-in-out infinite; pointer-events: none;
}
.services-hero__title { font-size: var(--text-5xl); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; max-width: 18ch; margin-top: var(--sp-5); margin-bottom: var(--sp-6); perspective: 800px; }
.services-hero__title em { font-style: italic; color: var(--blue); }

/* T4 — distinct entrance: each line tilts up out of the page and settles,
   rather than a flat fade (used nowhere else on the site). */
.services-hero__title .line-rise {
  display: inline-block; transform-origin: bottom center;
  opacity: 0; transform: translateY(30px) rotateX(-45deg);
  animation: lineRiseIn 0.75s var(--ease-spring) forwards;
}
.services-hero__title .line-rise--d2 { animation-delay: 0.15s; }
.services-hero__title .line-rise--d3 { animation-delay: 0.3s; }
@keyframes lineRiseIn { to { opacity: 1; transform: none; } }
.services-hero__sub { font-size: var(--text-lg); color: var(--ink-light); max-width: 48ch; line-height: 1.7; }

/* Sticky filter nav */
.services-nav {
  position: sticky; top: var(--nav-h); z-index: 50;
  background: var(--glass-bg-strong); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border-bottom: 1px solid var(--glass-border-2);
}
.services-nav__inner { display: flex; overflow-x: auto; scrollbar-width: none; }
.services-nav__inner::-webkit-scrollbar { display: none; }
.services-nav__link {
  flex-shrink: 0; padding: var(--sp-4) var(--sp-6);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-light);
  border-right: 1px solid var(--glass-border-2);
  transition: color var(--dur-base), background var(--dur-base);
  white-space: nowrap;
}
.services-nav__link:hover { color: var(--ink); background: var(--blue-glass); }
.services-nav__link.active { color: var(--blue); background: var(--blue-glass); }

/* Service block */
.service-block { padding-block: var(--sp-24); border-bottom: 1px solid var(--cream-4); scroll-margin-top: calc(var(--nav-h) + 56px); }
.service-block:nth-child(even) { background: var(--cream-2); }
.service-block__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-16); align-items: start; }
.service-block__inner.reverse { grid-template-columns: 1.4fr 1fr; }
.service-block__inner.reverse .service-block__meta { order: 2; }
.service-block__inner.reverse .service-block__content { order: 1; }

.service-block__meta { position: sticky; top: calc(var(--nav-h) + 72px); }
.service-block__num {
  font-family: var(--font-display); font-size: clamp(3.5rem,7vw,6rem); font-weight: 900;
  color: transparent; -webkit-text-stroke: 1px rgba(37,99,235,0.15);
  letter-spacing: -0.04em; line-height: 1; margin-bottom: var(--sp-3); display: block;
}
.service-block__icon { font-size: 2.2rem; margin-bottom: var(--sp-5); display: block; line-height: 1; }
.service-block__title { font-size: var(--text-3xl); font-weight: 900; letter-spacing: -0.03em; color: var(--ink); margin-bottom: var(--sp-3); line-height: 1.05; }
.service-block__tagline { font-size: var(--text-base); color: var(--blue); font-weight: 600; margin-bottom: var(--sp-5); }
.service-block__short { font-size: var(--text-base); color: var(--ink-light); line-height: 1.75; margin-bottom: var(--sp-6); }
.service-block__cta { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--blue); transition: gap var(--dur-base); }
.service-block__cta:hover { gap: var(--sp-4); }

.service-block__content { display: flex; flex-direction: column; gap: var(--sp-6); }
.service-block__long { font-size: var(--text-base); color: var(--ink-light); line-height: 1.8; }
.service-block__long p + p { margin-top: var(--sp-4); }
.service-block__long strong { color: var(--ink); font-weight: 500; }

.service-features {
  background: var(--glass-bg-strong); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: var(--sp-7); box-shadow: var(--glass-shadow);
}
.service-features__title { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-light); margin-bottom: var(--sp-5); }
.service-features__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-5); }
.service-feature-item { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--text-sm); color: var(--ink-light); line-height: 1.5; }
.service-feature-item::before { content: '→'; color: var(--blue); flex-shrink: 0; font-size: 12px; margin-top: 2px; }

.service-process { border: 1px solid var(--glass-border-2); border-radius: var(--r-lg); overflow: hidden; background: var(--glass-bg); backdrop-filter: var(--blur-sm); }
.service-process__title { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-light); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--glass-border-2); }
.process-step { display: flex; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--glass-border-2); transition: background var(--dur-base); }
.process-step:last-child { border-bottom: none; }
.process-step:hover { background: var(--blue-glass); }
.process-step__num { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; color: var(--blue); flex-shrink: 0; width: 24px; margin-top: 2px; }
.process-step__title { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; color: var(--ink); margin-bottom: var(--sp-1); }
.process-step__desc { font-size: var(--text-sm); color: var(--ink-light); line-height: 1.5; }

@media (max-width: 1024px) {
  .service-block__inner, .service-block__inner.reverse { grid-template-columns: 1fr; }
  .service-block__inner.reverse .service-block__meta, .service-block__inner.reverse .service-block__content { order: unset; }
  .service-block__meta { position: static; }
}
@media (max-width: 600px) {
  .service-features__list { grid-template-columns: 1fr; }
  .services-hero__title { font-size: var(--text-4xl); }
}