/* Services page hero + "What We Do" — scoped to service.html, uses global tokens from style.css */

html { scroll-behavior: smooth; }

.svc-hero {
  position: relative;
  overflow: hidden;
  padding: 130px 40px 70px;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.svc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 55% at 78% 50%, rgba(129, 74, 200, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 10% 0%, rgba(80, 90, 255, 0.10) 0%, transparent 70%);
}

.svc-hero-inner {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
}

/* ── LEFT ── */
.svc-copy { animation: svcSlideL 0.9s var(--ease) both; }

.svc-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--w75);
  margin-bottom: 24px;
}
.svc-label::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--purple-light);
  box-shadow: 0 0 10px var(--purple-light);
}

.svc-title {
  font-family: var(--fh);
  font-size: clamp(38px, 5.4vw, 72px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 24px;
}
.svc-grad {
  background: linear-gradient(90deg, var(--purple-light), #6f7bff 70%, #4fa3ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.svc-desc {
  font-family: var(--fh);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 500;
  color: var(--w75);
  letter-spacing: -0.02em;
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 48px;
}

.scroll-down {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--w50);
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s;
}
.scroll-down:hover { color: var(--white); }

.scroll-mouse {
  position: relative;
  width: 24px; height: 38px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  flex-shrink: 0;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.scroll-down:hover .scroll-mouse {
  border-color: var(--purple-light);
  box-shadow: 0 0 14px var(--purple-glow);
}
.scroll-mouse::after {
  content: '';
  position: absolute;
  left: 50%; top: 7px;
  width: 3px; height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--purple-light);
  animation: svcWheel 1.8s ease-in-out infinite;
}
.scroll-arrow {
  width: 16px; height: 16px;
  color: var(--purple-light);
  animation: svcBob 1.8s ease-in-out infinite;
}

/* ── RIGHT: ecosystem visual ── */
.eco {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  animation: svcSlideR 1s var(--ease) 0.15s both;
  contain: layout;
}

.eco-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 70%; height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(129, 74, 200, 0.45), transparent 65%);
  filter: blur(30px);
  animation: svcPulse 5s ease-in-out infinite;
}

.eco-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.eco-lines line {
  stroke: url(#ecoLine);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  animation: svcDash 14s linear infinite;
}

/* orbit rings (flattened for perspective) */
.eco-ring {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(180, 120, 255, 0.55);
  box-shadow: 0 0 18px rgba(129, 74, 200, 0.5), inset 0 0 18px rgba(129, 74, 200, 0.25);
  transform: translate(-50%, -50%) rotateX(68deg);
}
.eco-ring.r1 { width: 62%; height: 62%; }
.eco-ring.r2 {
  width: 84%; height: 84%;
  border-color: rgba(100, 140, 255, 0.4);
  border-style: dashed;
  box-shadow: 0 0 14px rgba(80, 120, 255, 0.35);
}
.eco-orbit {
  position: absolute; inset: 0;
  perspective: 900px;
}
.eco-spin {
  position: absolute; inset: 0;
  animation: svcSpin 60s linear infinite;
}
.eco-spin.rev { animation-duration: 90s; animation-direction: reverse; }
.eco-spin::after {
  content: '';
  position: absolute;
  left: 50%; top: 19%;
  width: 8px; height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 3px var(--purple-light);
}

/* platform */
.eco-platform {
  position: absolute;
  left: 50%; top: 66%;
  width: 46%; height: 14%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgba(223, 122, 254, 0.7), rgba(129, 74, 200, 0.45) 45%, transparent 72%);
  box-shadow: 0 0 50px rgba(129, 74, 200, 0.6);
}
.eco-platform::before {
  content: '';
  position: absolute; inset: 18% 12%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(10, 5, 20, 0.6);
}

/* central emblem */
.eco-core {
  position: absolute;
  left: 50%; top: 46%;
  width: 24%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 28%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(129, 74, 200, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 40px var(--purple-glow), inset 0 0 20px rgba(255, 255, 255, 0.08);
  animation: svcFloat 6s ease-in-out infinite;
}
.eco-core img { width: 62%; height: auto; filter: drop-shadow(0 0 10px rgba(223, 122, 254, 0.8)); }

/* service cards */
.eco-card {
  position: absolute;
  width: 34%;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(20, 10, 40, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 22px rgba(129, 74, 200, 0.25);
  animation: svcFloat 7s ease-in-out infinite;
  transition: border-color 0.35s, box-shadow 0.35s, translate 0.35s var(--ease);
  will-change: transform;
}
.eco-card:hover {
  translate: 0 -6px;
  border-color: rgba(223, 122, 254, 0.7);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 30px var(--purple-glow);
}
.eco-card svg { width: 22px; height: 22px; color: var(--purple-light); margin-bottom: 6px; display: block; }
.eco-card h4 {
  font-family: var(--fh);
  font-size: clamp(9.5px, 1.05vw, 12px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
  margin-bottom: 4px;
}
.eco-card p {
  font-family: var(--fb);
  font-size: clamp(9px, 0.95vw, 11.5px);
  line-height: 1.4;
  color: var(--w50);
}
.eco-card.c1 { left: 0;   top: 8%;  animation-delay: -1s; }
.eco-card.c2 { right: 0;  top: 4%;  animation-delay: -3s; }
.eco-card.c3 { left: -2%; top: 56%; animation-delay: -5s; }
.eco-card.c4 { right: -2%; top: 54%; animation-delay: -2s; }
.eco-card.c5 { left: 33%; bottom: 0; animation-delay: -4s; }

/* particles */
.eco-dot {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--purple-light);
  box-shadow: 0 0 6px var(--purple-light);
  opacity: 0.6;
  animation: svcTwinkle 4s ease-in-out infinite;
}

/* ── WHAT WE DO ── */
.what-we-do {
  scroll-margin-top: 80px;
  padding: 100px 40px;
  background: var(--black);
  position: relative;
}
.what-we-do::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(129, 74, 200, 0.14), transparent 70%);
}
.what-we-do .max-w { position: relative; }

.wwd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.wwd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--rlg);
  background: var(--card);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s var(--ease);
}
.wwd-card:hover {
  transform: translateY(-6px);
  border-color: rgba(129, 74, 200, 0.7);
  box-shadow: 0 0 34px var(--purple-glow), 0 18px 40px rgba(0, 0, 0, 0.5);
}

.wwd-icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(129, 74, 200, 0.14);
  border: 1px solid rgba(129, 74, 200, 0.4);
  color: var(--purple-light);
  margin-bottom: 20px;
}
.wwd-icon svg { width: 26px; height: 26px; }

.wwd-card h3 {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 10px;
}
.wwd-card p {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--w50);
  margin-bottom: 20px;
}
.wwd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.wwd-tags span {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--w75);
  border: 1px solid var(--w10);
  background: var(--w05);
}
.wwd-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 600;
  color: var(--purple-light);
}
.wwd-more svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.wwd-card:hover .wwd-more svg { transform: translateX(5px); }

/* ── KEYFRAMES ── */
@keyframes svcSlideL { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes svcSlideR { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes svcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.eco-core { --f: 1; }
@keyframes svcSpin { to { transform: rotate(360deg); } }
@keyframes svcPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes svcDash { to { stroke-dashoffset: -80; } }
@keyframes svcTwinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.8; } }
@keyframes svcWheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes svcBob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

/* The core is centred with translate(-50%,-50%), so its float must keep that offset */
.eco-core { animation-name: svcFloatCore; }
@keyframes svcFloatCore {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 10px)); }
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .svc-hero { min-height: 0; padding: 110px 28px 60px; }
  .svc-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .svc-desc { margin-bottom: 36px; }
  .eco { max-width: 560px; }
  .wwd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .what-we-do { padding: 80px 28px; }
}

@media (max-width: 600px) {
  .svc-hero { padding: 100px 20px 48px; }
  .eco { max-width: 100%; aspect-ratio: 1 / 1.15; }
  .eco-card { width: 40%; padding: 9px 10px; }
  .eco-card svg { width: 18px; height: 18px; margin-bottom: 4px; }
  .eco-card.c1 { top: 4%; }
  .eco-card.c2 { top: 2%; }
  .eco-card.c3 { top: 54%; left: 0; }
  .eco-card.c4 { top: 52%; right: 0; }
  .eco-card.c5 { left: 30%; width: 40%; }
  .eco-core { top: 44%; width: 26%; }
  .what-we-do { padding: 64px 20px; }
  .wwd-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .svc-copy, .eco, .eco-card, .eco-core, .eco-glow, .eco-spin,
  .eco-lines line, .eco-dot, .scroll-mouse::after, .scroll-arrow { animation: none !important; }
}

/* ── REFERENCE-MATCH OVERRIDES ── */
.svc-label {
  background: none; border: 0; padding: 0; border-radius: 0;
  gap: 14px; color: var(--purple-light); font-weight: 700; letter-spacing: 0.18em;
}
.svc-label::before {
  width: 30px; height: 1.5px; border-radius: 0; box-shadow: none;
  background: var(--purple-light);
}
.svc-title {
  font-weight: 700; letter-spacing: -0.055em; line-height: 1.02;
  font-size: clamp(40px, 5.6vw, 78px);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.12);
}
.svc-grad { background-image: linear-gradient(90deg, #ff7ad9, #a46bff 55%, #4f8dff); }
.svc-desc { color: var(--w50); max-width: 500px; }

.scroll-down {
  display: grid; grid-template-columns: auto auto; column-gap: 16px; row-gap: 10px;
  align-items: center; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400;
}
.scroll-mouse { grid-row: 1; border-color: var(--purple-light); width: 26px; height: 40px; }
.scroll-down > span:nth-child(2) { grid-row: 1; }
.scroll-arrow { grid-row: 2; grid-column: 1; justify-self: center; width: 18px; height: 18px; }

/* hex prism core */
.eco-core {
  width: 30%; top: 44%; border-radius: 0; border: 0; backdrop-filter: none;
  background: linear-gradient(160deg, rgba(223, 122, 254, 0.55), rgba(79, 141, 255, 0.35) 55%, rgba(129, 74, 200, 0.5));
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  box-shadow: none; filter: drop-shadow(0 0 26px rgba(150, 90, 255, 0.9));
}
.eco-core::before {
  content: ''; position: absolute; inset: 4%;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: radial-gradient(circle at 50% 45%, rgba(20, 8, 45, 0.85), rgba(40, 15, 80, 0.7));
}
.eco-core img { position: relative; width: 44%; }

/* stacked platform */
.eco-platform { top: 70%; width: 56%; height: 17%; }
.eco-platform::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 40%; height: 70%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(#150a2a, #05020c);
  border: 1px solid rgba(160, 100, 255, 0.4); border-top: 0; z-index: -1;
}
.eco-ring.r1 { width: 74%; height: 74%; top: 50%; }
.eco-ring.r2 { width: 92%; height: 92%; top: 52%; }

/* cards: tilted glass panels, title bottom-left, icon as object stand-in */
.eco-card {
  width: 33%; padding: 14px 16px; border-radius: 16px; min-height: 17%;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-color: rgba(160, 110, 255, 0.45);
  background: linear-gradient(150deg, rgba(160, 110, 255, 0.18), rgba(15, 8, 35, 0.7));
}
.eco-card svg {
  position: absolute; top: -14%; right: 8%; width: 42%; height: auto;
  filter: drop-shadow(0 0 14px rgba(180, 120, 255, 0.9)); margin: 0; stroke-width: 1.2;
}
.eco-card h4 { font-size: clamp(11px, 1.35vw, 17px); letter-spacing: -0.01em; line-height: 1.1; }
.eco-card p { font-size: clamp(9px, 1vw, 12.5px); }
.eco-card.c1 { left: 0; right: auto; top: 30%; bottom: auto; }
.eco-card.c2 { left: 34%; right: auto; top: 6%; bottom: auto; }
.eco-card.c3 { left: auto; right: 0; top: 24%; bottom: auto; }
.eco-card.c4 { left: 4%; right: auto; top: auto; bottom: 6%; }
.eco-card.c5 { left: auto; right: 0; top: auto; bottom: 4%; }
.eco-card.c2 svg { right: 4%; top: -22%; }

@media (max-width: 600px) {
  .eco { aspect-ratio: 1 / 1.25; }
  .eco-card { width: 42%; padding: 10px; }
  .eco-card.c1 { top: 28%; }
  .eco-card.c2 { left: 29%; width: 42%; top: 5%; }
  .eco-card.c3 { top: 25%; }
  .eco-card.c4 { left: 0; bottom: 6%; }
  .eco-card.c5 { bottom: 4%; }
}

/* ── IMAGE-BASED VISUAL ── */
.eco { aspect-ratio: 3 / 2; max-width: 760px; contain: none; }
.eco-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 55%, transparent 100%);
  animation: svcImgFloat 8s ease-in-out infinite;
}
@keyframes svcImgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.eco-card { width: auto; min-height: 0; padding: 8px 12px; border-radius: 12px; background: rgba(15, 8, 35, 0.65); }
.eco-card h4 { font-size: clamp(9px, 1.05vw, 13px); letter-spacing: 0.06em; }
.eco-card p { font-size: clamp(8px, 0.85vw, 11px); }
.eco-card.c1 { left: 1%;  top: 66%; bottom: auto; right: auto; }
.eco-card.c2 { left: 61%; top: 6%;  bottom: auto; right: auto; }
.eco-card.c3 { left: 70%; top: 64%; bottom: auto; right: auto; }
.eco-card.c4 { left: 66%; top: 83%; bottom: auto; right: auto; }
.eco-card.c5 { left: 2%;  top: 84%; bottom: auto; right: auto; }
@media (max-width: 600px) {
  .eco { aspect-ratio: 3 / 2; }
  .eco-card { padding: 5px 7px; }
  .eco-card p { display: none; }
}
@media (prefers-reduced-motion: reduce) { .eco-img { animation: none !important; } }

/* ── FULL-BLEED HERO IMAGE (black page bg so the image blends seamlessly) ── */
html, body { background: #000; }
.svc-hero { background: #000; }
.svc-hero::before { display: none; }
.svc-hero-inner { grid-template-columns: minmax(0, 1fr); position: static; }
.svc-copy { position: relative; z-index: 2; max-width: 620px; }
.eco {
  position: absolute; inset: 0; max-width: none; width: 100%; aspect-ratio: auto;
  margin: 0; z-index: 0; pointer-events: none;
}
.eco-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  -webkit-mask-image: none; mask-image: none;
  animation: svcImgFade 1.2s var(--ease) 0.15s both;
}
@keyframes svcImgFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

@media (max-width: 1024px) {
  .svc-hero { display: block; }
  .svc-hero-inner { gap: 32px; }
  .eco { position: relative; inset: auto; aspect-ratio: 1.15 / 1; max-width: 640px; margin: 0 auto; }
  .eco-img { object-position: 78% center; }
}
@media (max-width: 600px) {
  .eco { aspect-ratio: 1 / 1; }
}

/* ── WIDE BANNER IMAGE ── */
.eco::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 70%, #000 100%);
}
@media (max-width: 1024px) {
  .eco { aspect-ratio: 1.3 / 1; }
  .eco-img { object-position: 82% center; }
  .eco::after { background: radial-gradient(ellipse 75% 75% at 60% 50%, transparent 55%, #000 100%); }
}
@media (max-width: 600px) { .eco { aspect-ratio: 1.1 / 1; } }

/* Force the text-safe left side and bottom edge to pure black over the banner */
@media (min-width: 1025px) {
  .eco::after {
    background:
      linear-gradient(to right, #000 0%, #000 22%, transparent 50%),
      linear-gradient(to bottom, transparent 72%, #000 100%);
  }
}

/* Slow cinematic zoom on the hero image (starts after the fade-in) */
.eco-img {
  transform-origin: 75% 50%;
  will-change: transform;
  animation: svcImgFade 1.2s var(--ease) 0.15s both, svcZoom 15s ease-in-out 1.4s infinite alternate;
}
@keyframes svcZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .eco-img { animation: none !important; } }

/* ── HERO ANIMATIONS: parallax, glow pulse, staggered text, scroll fade ── */
.eco { animation: none; opacity: var(--hero-fade, 1); }
.eco-move {
  position: absolute; inset: -3%;
  will-change: transform;
}
.eco-pulse {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 22% 30% at 72% 42%, rgba(160, 90, 255, 0.45), transparent 70%),
    radial-gradient(ellipse 16% 22% at 84% 62%, rgba(70, 120, 255, 0.35), transparent 70%);
  mix-blend-mode: screen;
  animation: svcGlowPulse 5s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes svcGlowPulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.8; } }

.svc-copy { animation: none; opacity: var(--hero-fade, 1); }
.svc-line { display: block; }
.svc-label, .svc-line, .svc-desc, .scroll-down {
  animation: svcRise 0.9s var(--ease) both;
}
.svc-label { animation-delay: 0.1s; }
.svc-line:nth-child(1) { animation-delay: 0.2s; }
.svc-line:nth-child(2) { animation-delay: 0.3s; }
.svc-line:nth-child(3) { animation-delay: 0.4s; }
.svc-line:nth-child(4) { animation-delay: 0.5s; }
.svc-desc { animation-delay: 0.65s; }
.scroll-down { animation-delay: 0.8s; }
@keyframes svcRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@media (max-width: 1024px) {
  .eco-move { inset: 0; }
  .eco-pulse { background: radial-gradient(ellipse 40% 40% at 60% 45%, rgba(160, 90, 255, 0.4), transparent 70%); }
}
@media (prefers-reduced-motion: reduce) {
  .eco-pulse, .svc-label, .svc-line, .svc-desc, .scroll-down { animation: none !important; }
}

/* ── DESKTOP FIT: keep the whole artwork visible below the fixed 74px nav ── */
@media (min-width: 1025px) {
  .eco { top: 74px; left: 0; right: 0; bottom: 0; inset: 74px 0 0 0; }
  .eco-move { inset: 2% 0 2% 0; }           /* small vertical margin so parallax never clips */
  .eco-img {
    object-fit: contain;                     /* never crop the devices */
    object-position: right center;
    transform-origin: 72% 55%;
  }
  @keyframes svcZoom { from { transform: scale(1); } to { transform: scale(1.03); } }
  /* blend the image's dark edges into the pure-black page */
  .eco::after {
    background:
      linear-gradient(to right, #000 0%, #000 22%, transparent 50%),
      linear-gradient(to bottom, #000 0%, transparent 10%, transparent 80%, #000 100%);
  }
  .svc-copy { max-width: 46%; }
  .svc-title { font-size: clamp(40px, 4.6vw, 76px); }
}

/* ── FINAL HERO LAYOUT (matches approved mockup) ── */
.svc-title {
  font-size: clamp(36px, 3.6vw, 68px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin-bottom: 28px;
  text-shadow: none;
}
.svc-label { margin-bottom: 36px; }
.svc-desc { font-size: clamp(16px, 1.1vw, 20px); font-weight: 400; color: rgba(255, 255, 255, 0.6); max-width: 560px; margin-bottom: 0; }

@media (min-width: 1025px) {
  .svc-hero { padding: 74px 0 0; min-height: 100vh; }
  .svc-hero-inner { max-width: none; padding: 0 0 0 7.8%; }
  .svc-copy { max-width: 52%; }
}

/* ── WHAT WE DO: glassmorphism redesign ── */
.what-we-do { background: #000; padding: 110px 40px 120px; }
.what-we-do::before {
  background:
    radial-gradient(ellipse 50% 35% at 50% 62%, rgba(129, 74, 200, 0.16), transparent 70%),
    radial-gradient(ellipse 30% 25% at 15% 80%, rgba(129, 74, 200, 0.08), transparent 70%);
}
.what-we-do .max-w { max-width: 1280px; }

.wwd-head { text-align: center; margin-bottom: 56px; }
.wwd-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 22px; border-radius: 999px;
  font-family: var(--fh); font-size: 14px; font-weight: 600; letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(129, 74, 200, 0.12);
  border: 1px solid rgba(160, 110, 255, 0.55);
  box-shadow: 0 0 18px rgba(129, 74, 200, 0.25), inset 0 0 12px rgba(129, 74, 200, 0.15);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  margin-bottom: 22px;
}
.wwd-pill svg { width: 14px; height: 14px; color: var(--purple-light); }
.wwd-title {
  font-family: var(--fh); font-weight: 800;
  font-size: clamp(40px, 5vw, 76px); letter-spacing: -0.045em; line-height: 1.05;
  color: #fff; margin-bottom: 18px;
}
.wwd-grad {
  background: linear-gradient(90deg, #b46bff, #8a5cff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.wwd-sub {
  font-family: var(--fh); font-size: clamp(16px, 1.4vw, 21px); font-weight: 400;
  color: rgba(255, 255, 255, 0.72); line-height: 1.5;
  max-width: 640px; margin: 0 auto;
}

.wwd-grid { gap: 30px; }

.wwd-card {
  overflow: hidden;
  padding: 120px 36px 32px;
  border-radius: 26px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(200deg, rgba(129, 74, 200, 0.14), rgba(10, 4, 22, 0.55) 55%, rgba(0, 0, 0, 0.7));
  border: 1px solid rgba(170, 120, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 40px rgba(129, 74, 200, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 26px rgba(129, 74, 200, 0.18);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  isolation: isolate;
}
/* glowing top edge highlight */
.wwd-card::before {
  content: ''; position: absolute; left: 8%; right: 30%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223, 122, 254, 0.9), transparent);
  box-shadow: 0 0 12px rgba(223, 122, 254, 0.8);
}
.wwd-card:hover {
  transform: translateY(-6px);
  border-color: rgba(200, 140, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 50px rgba(129, 74, 200, 0.14),
    0 0 40px rgba(129, 74, 200, 0.4),
    0 22px 50px rgba(0, 0, 0, 0.6);
}

/* 3D render integrated into the glass: black drops out via screen blend */
.wwd-visual {
  position: absolute; z-index: -1;
  top: 0; right: 0; width: 76%; height: auto;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 60% 45%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 75% at 60% 45%, #000 50%, transparent 100%);
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
.wwd-card:hover .wwd-visual { transform: translateY(-6px) scale(1.04); }
.wwd-visual-icon {
  top: 22px; right: 28px; width: 44%; height: auto;
  color: rgba(200, 140, 255, 0.55);
  stroke-width: 0.8;
  filter: drop-shadow(0 0 18px rgba(160, 90, 255, 0.9));
  -webkit-mask-image: none; mask-image: none; mix-blend-mode: normal;
}

.wwd-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: rgba(129, 74, 200, 0.12);
  border: 1px solid rgba(170, 120, 255, 0.45);
  box-shadow: inset 0 0 14px rgba(129, 74, 200, 0.2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  margin-bottom: 26px;
}
.wwd-icon svg { width: 28px; height: 28px; }

.wwd-card h3 { font-size: clamp(22px, 1.8vw, 28px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; }
.wwd-card p { font-size: clamp(15px, 1.15vw, 18px); font-weight: 400; color: rgba(255, 255, 255, 0.7); margin-bottom: 26px; }

.wwd-tags { gap: 12px; margin-bottom: 28px; }
.wwd-tags span {
  font-size: 14px; padding: 7px 18px; color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.wwd-more {
  align-self: flex-start; gap: 14px;
  padding: 11px 28px; border-radius: 999px;
  font-size: 17px; font-weight: 500; color: #fff; text-decoration: none;
  background: rgba(129, 74, 200, 0.08);
  border: 1px solid rgba(170, 110, 255, 0.7);
  box-shadow: inset 0 0 14px rgba(129, 74, 200, 0.2);
  transition: background 0.3s, box-shadow 0.3s;
}
.wwd-more:hover { background: rgba(129, 74, 200, 0.25); box-shadow: 0 0 18px rgba(129, 74, 200, 0.5); }
.wwd-more svg { width: 18px; height: 18px; }
.wwd-card:hover .wwd-more svg { transform: translateX(5px); }

@media (max-width: 1024px) {
  .what-we-do { padding: 80px 28px; }
  .wwd-card { padding: 110px 28px 28px; }
}
@media (max-width: 600px) {
  .what-we-do { padding: 64px 20px; }
  .wwd-card { padding: 100px 22px 24px; }
  .wwd-visual { width: 80%; }
}

/* ══ SERVICES CAROUSEL (dark glass, centre-highlight, auto-rotating) ══ */
.what-we-do { background: #000; overflow: hidden; }
.what-we-do::before { display: none; }
.what-we-do .max-w { max-width: none; }

.svc-car {
  --card-w: clamp(300px, 31vw, 540px);
  --ease-car: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  max-width: 1880px;
  margin: 0 auto;
  padding: 30px 0 0;
}
.car-track {
  display: grid;
  justify-items: center;
  align-items: center;
  touch-action: pan-y;
}

.car-card {
  grid-area: 1 / 1;
  width: var(--card-w);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 34px 32px;
  border-radius: 24px;
  background: rgba(10, 8, 14, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  /* default = hidden behind */
  opacity: 0;
  transform: translateX(0) scale(0.85);
  filter: brightness(0.55) blur(2px);
  z-index: 1;
  transition:
    transform 0.85s var(--ease-car),
    opacity 0.85s var(--ease-car),
    filter 0.85s var(--ease-car),
    border-color 0.85s var(--ease-car),
    box-shadow 0.85s var(--ease-car),
    background-color 0.85s var(--ease-car);
  will-change: transform, opacity;
}
.car-card.is-left,
.car-card.is-right {
  opacity: 0.45;
  filter: brightness(0.55) blur(0.6px);
  z-index: 2;
  cursor: pointer;
}
.car-card.is-left  { transform: translateX(-103%) scale(0.93); }
.car-card.is-right { transform: translateX(103%)  scale(0.93); }
.car-card.is-center {
  opacity: 1;
  filter: brightness(1) blur(0);
  transform: translateX(0) scale(1.05);
  z-index: 3;
  background: rgba(16, 11, 24, 0.78);
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow:
    0 0 30px rgba(168, 85, 247, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 40px rgba(168, 85, 247, 0.05);
}
/* wrapping card fades out, jumps, then fades back in (no crossing behind centre) */
.car-card.is-hidden { opacity: 0 !important; transition: opacity 0.35s ease; }
.car-card.no-anim { transition: none !important; }

.car-media {
  position: relative;
  height: calc(var(--card-w) * 0.56);
  margin: 0 -34px;
  pointer-events: none;
}
.car-media img {
  position: absolute;
  left: 50%; top: 52%;
  width: 92%; height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 22px rgba(150, 80, 255, 0.25));
}
.car-card.is-center .car-media img { animation: carFloat 6s ease-in-out infinite; }
@keyframes carFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 8px)); }
}

.car-icon {
  position: relative;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 16px;
  margin: -34px 0 22px;
  color: #fff;
  background: rgba(14, 10, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.car-icon svg { width: 30px; height: 30px; }

.car-card h3 {
  font-family: var(--fh);
  font-size: clamp(22px, 1.75vw, 32px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 12px;
}
.car-card p {
  font-family: var(--fh);
  font-size: clamp(15px, 1.12vw, 19px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  max-width: 400px;
  margin-bottom: 22px;
}
.car-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.car-tags span {
  font-family: var(--fh);
  font-size: 15px;
  padding: 7px 18px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.02);
}
.car-cta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%;
  padding: 15px 20px;
  border-radius: 999px;
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.car-card.is-center .car-cta {
  background: rgba(88, 50, 140, 0.28);
  border-color: rgba(168, 85, 247, 0.5);
}
.car-cta:hover { background: rgba(120, 60, 200, 0.35); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); }
.car-cta svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease-car); }
.car-cta:hover svg { transform: translateX(5px); }
.car-card:not(.is-center) .car-cta { pointer-events: none; }

/* arrows */
.car-nav {
  position: absolute;
  top: calc(50% - 10px);
  z-index: 5;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  background: rgba(10, 8, 14, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.car-nav svg { width: 22px; height: 22px; }
.car-nav:hover { border-color: rgba(168, 85, 247, 0.7); box-shadow: 0 0 20px rgba(168, 85, 247, 0.4); }
.car-prev { left: 2%; }
.car-next { right: 2%; }

/* pagination */
.car-dots { display: flex; justify-content: center; gap: 22px; margin-top: 48px; }
.car-dots button {
  width: 10px; height: 10px; padding: 0;
  border: 0; border-radius: 999px;
  background: #3a3a40;
  cursor: pointer;
  transition: width 0.5s var(--ease-car), background 0.5s;
}
.car-dots button.active {
  width: 30px;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
}

/* tablet: centre card + partial side cards */
@media (max-width: 1024px) {
  .svc-car { --card-w: min(460px, 62vw); }
  .car-card.is-left  { transform: translateX(-96%) scale(0.9); }
  .car-card.is-right { transform: translateX(96%)  scale(0.9); }
  .car-nav { width: 50px; height: 50px; }
}
/* mobile: one card at a time */
@media (max-width: 640px) {
  .svc-car { --card-w: calc(100vw - 40px); }
  .car-card { padding: 0 22px 24px; }
  .car-media { margin: 0 -22px; }
  .car-card.is-center { transform: none; }
  .car-card.is-left  { opacity: 0; transform: translateX(-110%) scale(0.9); }
  .car-card.is-right { opacity: 0; transform: translateX(110%)  scale(0.9); }
  .car-nav { display: none; }
  .car-dots { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .car-card, .car-dots button { transition: opacity 0.2s linear !important; }
  .car-card.is-center .car-media img { animation: none; }
}

/* ══ CAROUSEL v2 — matches approved mockup ══ */
.wwd-head { margin-bottom: 40px; }
.wwd-title { font-weight: 900; letter-spacing: -0.05em; margin-bottom: 14px; }
.wwd-grad { background-image: linear-gradient(90deg, #6d28d9, #9333ea 55%, #c026d3); }
.wwd-sub { color: rgba(255, 255, 255, 0.78); line-height: 1.6; max-width: 560px; }
.wwd-pill { background: rgba(60, 20, 110, 0.25); border-color: rgba(140, 80, 255, 0.7); }

.svc-car { --card-w: clamp(300px, 21.5vw, 440px); --gap: 34px; padding-top: 34px; }

.car-card {
  padding: 0 26px 24px;
  border-radius: 22px;
  background: rgba(12, 10, 16, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.car-card.is-left,
.car-card.is-right {
  opacity: 0.88;
  filter: brightness(0.82) blur(0);
}
.car-card.is-left  { transform: translateX(calc(-100% - var(--gap))) scale(0.98); }
.car-card.is-right { transform: translateX(calc(100% + var(--gap)))  scale(0.98); }
.car-card.is-center {
  transform: translateY(-6px) scale(1.04);
  background: linear-gradient(180deg, rgba(70, 30, 130, 0.30), rgba(18, 10, 32, 0.85) 60%);
  border: 1.5px solid rgba(190, 120, 255, 0.95);
  box-shadow:
    0 0 24px rgba(168, 85, 247, 0.55),
    0 0 60px rgba(168, 85, 247, 0.25),
    inset 0 0 30px rgba(168, 85, 247, 0.18);
}

.car-media { height: calc(var(--card-w) * 0.5); margin: 0 -26px; }
.car-media img {
  width: 90%;
  top: 50%;
  filter: drop-shadow(0 0 18px rgba(160, 80, 255, 0.45)) drop-shadow(0 14px 24px rgba(0, 0, 0, 0.6));
}
.car-card.is-center .car-media img { width: 96%; top: 46%; }

.car-icon {
  width: 56px; height: 56px; border-radius: 14px;
  margin: -20px 0 18px;
  background: rgba(16, 12, 22, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.car-icon svg { width: 26px; height: 26px; }

.car-card h3 { font-size: clamp(19px, 1.25vw, 24px); margin-bottom: 8px; }
.car-card p { font-size: clamp(13.5px, 0.88vw, 16px); color: rgba(255, 255, 255, 0.7); margin-bottom: 16px; max-width: 360px; }
.car-card.is-center p { color: rgba(255, 255, 255, 0.85); }

.car-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.car-tags { gap: 8px; margin: 0 0 6px; }
.car-tags span { font-size: 13px; padding: 5px 13px; background: rgba(255, 255, 255, 0.04); }

.car-cta {
  flex: 0 0 auto;
  width: 58px; height: 58px; padding: 0;
  border-radius: 50%;
  margin: 0;
  background: rgba(20, 10, 35, 0.6);
  border: 1.5px solid rgba(168, 85, 247, 0.75);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}
.car-card.is-center .car-cta {
  background: rgba(60, 25, 110, 0.45);
  border-color: rgba(200, 140, 255, 0.95);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.55);
}
.car-cta svg { width: 22px; height: 22px; }

/* arrows sit just outside the side cards */
.car-nav { top: calc(50% - 36px); width: 66px; height: 66px; }
.car-prev { left: calc(50% - var(--card-w) * 1.5 - var(--gap) - 140px); }
.car-next { right: calc(50% - var(--card-w) * 1.5 - var(--gap) - 140px); border-color: rgba(168, 85, 247, 0.8); box-shadow: 0 0 16px rgba(168, 85, 247, 0.35); }

.car-dots { margin-top: 40px; gap: 18px; }
.car-dots button.active { width: 38px; height: 9px; background: linear-gradient(90deg, #6d28d9, #9333ea); }
.car-dots button { width: 9px; height: 9px; background: #4a4a50; }

@media (max-width: 1400px) {
  .car-prev { left: 12px; }
  .car-next { right: 12px; }
}
@media (max-width: 1024px) {
  .svc-car { --card-w: min(420px, 60vw); }
  .car-card.is-left  { transform: translateX(-92%) scale(0.9); opacity: 0.55; }
  .car-card.is-right { transform: translateX(92%)  scale(0.9); opacity: 0.55; }
}
@media (max-width: 640px) {
  .svc-car { --card-w: calc(100vw - 40px); }
  .car-card { padding: 0 20px 22px; }
  .car-media { margin: 0 -20px; }
  .car-card.is-center { transform: none; }
  .car-card.is-left  { opacity: 0; transform: translateX(-110%) scale(0.9); }
  .car-card.is-right { opacity: 0; transform: translateX(110%)  scale(0.9); }
}

/* ══ SECTION HEADER v3 — pill with side rails, bigger heading ══ */
.wwd-head { margin-bottom: 44px; }
.wwd-pill {
  position: relative;
  gap: 14px;
  padding: 12px 34px;
  font-size: 17px;
  letter-spacing: 0.24em;
  color: #fff;
  background: rgba(8, 4, 16, 0.85);
  border: 1.5px solid rgba(170, 100, 255, 0.85);
  box-shadow: 0 0 22px rgba(150, 70, 255, 0.35), inset 0 0 14px rgba(150, 70, 255, 0.12);
  margin-bottom: 26px;
}
.wwd-pill svg { width: 20px; height: 20px; color: #b56cff; filter: drop-shadow(0 0 6px rgba(181, 108, 255, 0.8)); }
/* rails: fading line + glowing dot on each side */
.wwd-pill::before,
.wwd-pill::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 130px;
  height: 1.5px;
  transform: translateY(-50%);
  pointer-events: none;
}
.wwd-pill::before {
  right: calc(100% + 34px);
  background: linear-gradient(90deg, transparent, rgba(160, 90, 255, 0.85));
}
.wwd-pill::after {
  left: calc(100% + 34px);
  background: linear-gradient(270deg, transparent, rgba(160, 90, 255, 0.85));
}
.wwd-head .wwd-pill { --dot: radial-gradient(circle, #c084fc 0 3px, rgba(192, 132, 252, 0.4) 3.5px, transparent 6px); }
.wwd-pill::before { background: var(--dot) right center / 12px 12px no-repeat, linear-gradient(90deg, transparent, rgba(160, 90, 255, 0.85)) left center / calc(100% - 4px) 1.5px no-repeat; height: 12px; }
.wwd-pill::after  { background: var(--dot) left center / 12px 12px no-repeat, linear-gradient(270deg, transparent, rgba(160, 90, 255, 0.85)) right center / calc(100% - 4px) 1.5px no-repeat; height: 12px; }

.wwd-title {
  font-size: clamp(48px, 5.6vw, 112px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #ffffff 40%, #d9d9e0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wwd-grad {
  background-image: linear-gradient(135deg, #5b21f6 0%, #8b2cf5 50%, #c026d3 100%);
  filter: drop-shadow(0 0 18px rgba(140, 50, 245, 0.35));
}
.wwd-sub {
  font-size: clamp(17px, 1.6vw, 32px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(225, 222, 235, 0.85);
  max-width: 980px;
}

@media (max-width: 640px) {
  .wwd-pill { padding: 10px 24px; font-size: 14px; }
  .wwd-pill::before, .wwd-pill::after { width: 44px; }
  .wwd-pill::before { right: calc(100% + 12px); }
  .wwd-pill::after { left: calc(100% + 12px); }
}

/* ══ v4 — approved mockup: radio-dot badges, purple orb behind renders ══ */
.radio-dot {
  position: relative;
  width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: 50%;
  border: 1.5px solid #a855f7;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}
.radio-dot::after {
  content: ''; position: absolute; inset: 3.5px;
  border-radius: 50%;
  background: #a855f7;
}

/* header */
.wwd-pill {
  gap: 12px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(14, 12, 18, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  margin-bottom: 22px;
}
.wwd-pill::before, .wwd-pill::after { display: none; }
.wwd-title {
  font-size: clamp(42px, 4vw, 76px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 14px;
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}
.wwd-grad {
  background-image: linear-gradient(90deg, #7c3aed, #a855f7);
  -webkit-text-fill-color: transparent;
  filter: none;
}
.wwd-sub { font-size: clamp(16px, 1.15vw, 22px); color: rgba(255, 255, 255, 0.72); max-width: 600px; }

/* cards */
.svc-car { --card-w: clamp(300px, 22vw, 450px); --gap: 44px; }
.car-card {
  align-items: stretch;
  padding: 22px 24px 24px;
  background: rgba(10, 9, 13, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.car-card.is-left, .car-card.is-right { opacity: 0.8; filter: brightness(0.62); }
.car-card.is-left  { transform: translateX(calc(-100% - var(--gap))) scale(0.95); }
.car-card.is-right { transform: translateX(calc(100% + var(--gap)))  scale(0.95); }
.car-card.is-center {
  transform: scale(1.05);
  background: linear-gradient(180deg, rgba(40, 18, 70, 0.45), rgba(12, 8, 20, 0.9) 55%);
  border: 1.5px solid rgba(168, 85, 247, 0.85);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.20), inset 0 0 30px rgba(168, 85, 247, 0.08);
}

.car-badge {
  align-self: center;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border-radius: 10px;
  font-family: var(--fh);
  font-size: clamp(12px, 0.8vw, 15px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(16, 14, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative; z-index: 2;
  white-space: nowrap;
}
.car-badge .radio-dot { width: 15px; height: 15px; flex-basis: 15px; }
.car-badge .radio-dot::after { inset: 3px; }

.car-media { height: calc(var(--card-w) * 0.56); margin: 4px -24px 6px; }
/* purple glowing dome + faint stars behind the render */
.car-orb {
  position: absolute;
  left: 50%; top: 4%;
  width: 72%; aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 20%, rgba(150, 60, 255, 0.55), rgba(90, 30, 170, 0.35) 40%, rgba(40, 10, 80, 0.15) 62%, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 62%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 62%);
}
.car-media::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 20%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 70% 70%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 25% 75%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 92% 55%, rgba(255,255,255,0.3), transparent);
}
.car-media img, .car-card.is-center .car-media img {
  width: 82%; top: 56%;
  filter: brightness(0.82) saturate(0.9) drop-shadow(0 16px 26px rgba(0, 0, 0, 0.75));
}
.car-card.is-center .car-media img { width: 88%; filter: brightness(0.95) drop-shadow(0 16px 26px rgba(0, 0, 0, 0.75)); }

.car-card h3 { margin-bottom: 8px; }
.car-tags span { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.03); }

.car-cta {
  background: rgba(10, 9, 13, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
}
.car-card.is-center .car-cta {
  background: rgba(20, 10, 35, 0.9);
  border-color: rgba(168, 85, 247, 0.95);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.55);
}

/* arrows: dark with a purple arc */
.car-nav, .car-next {
  background: rgba(10, 9, 13, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
.car-prev { border-top-color: #a855f7; border-right-color: #a855f7; }
.car-next { border-top-color: #a855f7; border-left-color: #a855f7; }
.car-nav:hover { box-shadow: 0 0 18px rgba(168, 85, 247, 0.45); }

@media (max-width: 640px) {
  .car-card { padding: 18px 20px 22px; }
  .car-media { margin: 4px -20px 6px; }
  .wwd-pill { font-size: 15px; }
}

/* Orb fix: gradient must fade out INSIDE the circle (closest-side), otherwise the
   border-radius clips it into a flat disc with a hard edge */
.car-orb {
  top: 0;
  width: 78%;
  border-radius: 0;
  background: radial-gradient(closest-side at 50% 50%,
    rgba(160, 70, 255, 0.55) 0%,
    rgba(120, 45, 220, 0.32) 40%,
    rgba(80, 25, 160, 0.12) 70%,
    transparent 100%);
  filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 75%);
  mask-image: linear-gradient(180deg, #000 35%, transparent 75%);
}

/* keep tags on one row next to the arrow button */
.car-tags { flex-wrap: nowrap; gap: 7px; min-width: 0; }
.car-tags span { font-size: clamp(11.5px, 0.72vw, 13.5px); padding: 5px 11px; white-space: nowrap; }

/* Orb: heavy soft blur like the reference — glowing dome, no visible edge */
.car-orb {
  top: -4%;
  width: 82%;
  background: radial-gradient(closest-side at 50% 50%,
    rgba(150, 60, 255, 0.75) 0%,
    rgba(120, 40, 230, 0.5) 35%,
    rgba(90, 25, 180, 0.22) 65%,
    transparent 100%);
  filter: blur(22px);
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 80%);
}
.car-card.is-center .car-orb { opacity: 1; }

/* 4th+ cards wait hidden behind the centre card */
.car-card.is-back {
  opacity: 0;
  transform: scale(0.85);
  filter: brightness(0.5);
  z-index: 0;
  pointer-events: none;
}

/* ══ SMOOTHER CAROUSEL MOTION ══
   Only transform/opacity animate (GPU-composited). The side-card dimming that used
   filter: brightness() is now a black overlay fading in/out, and the render's float
   runs on every card so nothing snaps when the centre changes. */
.svc-car { --ease-car: cubic-bezier(0.32, 0.72, 0, 1); }
.car-card {
  filter: none !important;
  backface-visibility: hidden;
  transition:
    transform 1.1s var(--ease-car),
    opacity 0.9s var(--ease-car),
    border-color 1.1s var(--ease-car),
    box-shadow 1.1s var(--ease-car),
    background-color 1.1s var(--ease-car);
}
.car-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 1.1s var(--ease-car);
}
.car-card.is-left::after,
.car-card.is-right::after { opacity: 0.38; }
.car-card.is-back::after  { opacity: 0.6; }

.car-media img { animation: carFloat 6s ease-in-out infinite; will-change: transform; }
.car-card:nth-child(2) .car-media img { animation-delay: -1.5s; }
.car-card:nth-child(3) .car-media img { animation-delay: -3s; }
.car-card:nth-child(4) .car-media img { animation-delay: -4.5s; }
.car-card.is-center .car-media img { animation: carFloat 6s ease-in-out infinite; }
.car-media img { transition: width 1.1s var(--ease-car), top 1.1s var(--ease-car); }
.car-card.is-hidden { transition: opacity 0.45s ease !important; }

.car-dots button { transition: width 0.8s var(--ease-car), background 0.8s var(--ease-car); }
.car-nav { transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s var(--ease-car); }
.car-nav:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .car-media img { animation: none !important; }
}

/* ══ WHAT WE CAN BUILD ══ */
.what-build {
  position: relative;
  padding: 100px 40px 110px;
  background: #000;
  overflow: hidden;
}
.what-build::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(60, 40, 160, 0.28), transparent 70%),
    radial-gradient(ellipse 40% 30% at 12% 90%, rgba(129, 74, 200, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 30% at 90% 85%, rgba(40, 90, 220, 0.12), transparent 70%);
}
.what-build-inner { position: relative; max-width: 1760px; margin: 0 auto; }

.build-head { text-align: center; margin-bottom: 56px; }
.build-eyebrow {
  display: inline-flex; align-items: center; gap: 22px;
  font-family: var(--fh); font-size: 14px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: #9d6bff;
  margin-bottom: 22px;
}
.build-eyebrow::before, .build-eyebrow::after {
  content: ''; width: 60px; height: 1px; background: #6d4bd8;
}
.build-title {
  font-family: var(--fh);
  font-size: clamp(32px, 3.5vw, 66px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 18px;
}
.build-grad {
  background: linear-gradient(90deg, #a855f7, #7c4dff 45%, #38bdf8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.build-sub {
  font-family: var(--fh);
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
  max-width: 720px; margin: 0 auto;
}

.build-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
}
.build-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 22px 18px 26px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(26, 18, 48, 0.55), rgba(8, 6, 14, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.build-card:hover {
  transform: translateY(-6px);
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.22), inset 0 0 30px rgba(168, 85, 247, 0.06);
}
.build-card img {
  width: 100%; height: auto; aspect-ratio: 313 / 276;
  object-fit: contain;
  margin-bottom: 18px;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%);
  transition: transform 0.6s var(--ease);
}
.build-card:hover img { transform: translateY(-4px) scale(1.04); }
.build-card h3 {
  font-family: var(--fh); font-size: clamp(18px, 1.3vw, 23px); font-weight: 600;
  letter-spacing: -0.02em; color: #fff; margin-bottom: 8px;
}
.build-card p {
  font-family: var(--fh); font-size: clamp(13.5px, 0.9vw, 16px);
  line-height: 1.5; color: rgba(255, 255, 255, 0.62);
  max-width: 220px;
}

@media (max-width: 1280px) { .build-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .what-build { padding: 80px 28px; } }
@media (max-width: 640px) {
  .what-build { padding: 64px 20px; }
  .build-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .build-card { padding: 16px 12px 20px; border-radius: 18px; }
  .build-eyebrow { gap: 12px; font-size: 12px; letter-spacing: 0.18em; }
  .build-eyebrow::before, .build-eyebrow::after { width: 28px; }
}
@media (max-width: 400px) { .build-grid { grid-template-columns: 1fr; } }

/* ── Accent text uses the site's button purple (--purple #814ac8), no blue ── */
.svc-grad, .wwd-grad, .build-grad {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--purple);
  color: var(--purple);
  filter: none;
}
.build-grad { -webkit-text-fill-color: var(--purple-light); color: var(--purple-light); }
.build-eyebrow { color: var(--purple); }
.build-eyebrow::before, .build-eyebrow::after { background: var(--purple); }

/* "What We Can Build": pure black background, no glow band */
.what-build { background: #000; }
.what-build::before { display: none; }

/* Hero text: word-by-word blur reveal (same effect as the other pages' heroes).
   The old line-level rise is disabled so words aren't animated twice. */
.svc-title .svc-line,
.svc-desc { animation: none; opacity: 1; transform: none; }
.svc-title .hero-word, .svc-desc .hero-sub-word { margin-right: 0.22em; will-change: transform, opacity, filter; }
.svc-title .hero-word:last-child { margin-right: 0; }
.svc-title .svc-grad { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .svc-title .hero-word, .svc-desc .hero-sub-word { animation: none !important; opacity: 1 !important; filter: none !important; }
}

/* ══ WHAT WE CAN BUILD — scroll-triggered animation ══
   Words blur-reveal like the hero; cards rise in one after another, then their
   renders float gently. Hidden only while .pre is set (JS present) and not yet in view,
   so the section is fully visible without JavaScript. */
.what-build.pre:not(.in-view) .wb-word,
.what-build.pre:not(.in-view) .build-card,
.what-build.pre:not(.in-view) .build-eyebrow { opacity: 0; }

.what-build.in-view .wb-word {
  display: inline-block;
  animation: blurRevealCustom 1.1s cubic-bezier(0.2, 0.9, 0.2, 1) var(--d, 0s) backwards;
}
.build-title .wb-word, .build-sub .wb-word { margin-right: 0.22em; }
.build-title .wb-word:last-child, .build-sub .wb-word:last-child { margin-right: 0; }
.build-title .build-grad { display: inline-block; }

.what-build.in-view .build-eyebrow { animation: buildFadeUp 0.9s var(--ease) 0s backwards; }
.what-build.in-view .build-eyebrow::before { animation: buildLine 1s var(--ease) 0.1s backwards; transform-origin: right center; }
.what-build.in-view .build-eyebrow::after  { animation: buildLine 1s var(--ease) 0.1s backwards; transform-origin: left center; }

/* backwards fill: the animation does not keep its end transform, so the hover lift still works */
.what-build.in-view .build-card {
  animation: buildCardIn 1s var(--ease) calc(0.9s + var(--i, 0) * 0.14s) backwards;
}
.what-build.in-view .build-card img {
  animation: buildFloat 6s ease-in-out calc(1.9s + var(--i, 0) * 0.35s) infinite;
}
.what-build.in-view .build-card:hover img { animation-play-state: paused; }

@keyframes buildFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes buildLine { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes buildCardIn {
  from { opacity: 0; transform: translateY(46px) scale(0.94); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes buildFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

@media (prefers-reduced-motion: reduce) {
  .what-build .wb-word, .what-build .build-card, .what-build .build-card img,
  .what-build .build-eyebrow, .what-build .build-eyebrow::before, .what-build .build-eyebrow::after { animation: none !important; opacity: 1 !important; }
}

/* ══ TECHNOLOGY WE USE (reuses the "What We Can Build" header, card style and animation) ══ */
.tech-use { padding-top: 40px; }
.tech-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  max-width: 1500px;
  margin: 0 auto;
}
.tech-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 44px 20px 36px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(26, 18, 48, 0.55), rgba(8, 6, 14, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tech-card:hover {
  transform: translateY(-6px);
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.22), inset 0 0 30px rgba(168, 85, 247, 0.06);
}
.tech-logo {
  width: 96px; height: 96px;
  display: grid; place-items: center;
  border-radius: 24px;
  margin-bottom: 26px;
  color: #fff;
  background: radial-gradient(circle at 50% 35%, rgba(129, 74, 200, 0.28), rgba(129, 74, 200, 0.06) 70%);
  border: 1px solid rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 26px rgba(129, 74, 200, 0.28), inset 0 0 18px rgba(129, 74, 200, 0.14);
  transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.tech-logo svg { width: 46px; height: 46px; filter: drop-shadow(0 0 8px rgba(190, 130, 255, 0.55)); }
.tech-card:hover .tech-logo { border-color: rgba(190, 130, 255, 0.7); box-shadow: 0 0 36px rgba(168, 85, 247, 0.5), inset 0 0 22px rgba(129, 74, 200, 0.2); }
.tech-card h3 {
  font-family: var(--fh); font-size: clamp(20px, 1.4vw, 26px); font-weight: 600;
  letter-spacing: -0.02em; color: #fff; margin-bottom: 8px;
}
.tech-card p {
  font-family: var(--fh); font-size: clamp(13.5px, 0.9vw, 16px);
  line-height: 1.5; color: rgba(255, 255, 255, 0.62);
}

.what-build.in-view .tech-card { animation: buildCardIn 1s var(--ease) calc(0.9s + var(--i, 0) * 0.14s) backwards; }
.what-build.in-view .tech-logo { animation: buildFloat 6s ease-in-out calc(1.9s + var(--i, 0) * 0.35s) infinite; }
.what-build.pre:not(.in-view) .tech-card { opacity: 0; }

@media (max-width: 1280px) { .tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tech-card { padding: 28px 12px 24px; border-radius: 18px; }
  .tech-logo { width: 76px; height: 76px; border-radius: 20px; margin-bottom: 18px; }
  .tech-logo svg { width: 36px; height: 36px; }
}
@media (max-width: 380px) { .tech-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .what-build .tech-card, .what-build .tech-logo { animation: none !important; opacity: 1 !important; }
}

/* Hero eyebrow — same badge style as the service carousel cards */
.svc-label.svc-badge {
  gap: 10px; padding: 8px 16px; border-radius: 10px;
  font-size: clamp(12px, 0.8vw, 15px); font-weight: 500; letter-spacing: 0;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(16, 14, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.svc-label.svc-badge::before { display: none; }
.svc-label.svc-badge .radio-dot { width: 15px; height: 15px; flex-basis: 15px; }
.svc-label.svc-badge .radio-dot::after { inset: 3px; }

/* "What We Do" header pill — same compact size as the carousel card badges */
.wwd-pill {
  gap: 10px; padding: 8px 16px; border-radius: 10px;
  font-size: clamp(12px, 0.8vw, 15px); font-weight: 500; letter-spacing: 0;
  margin-bottom: 18px;
}
.wwd-pill .radio-dot { width: 15px; height: 15px; flex-basis: 15px; }
.wwd-pill .radio-dot::after { inset: 3px; }