.svc-hero {
  min-height: 0;
  padding: 196px 0 120px;
}
.svc-hero .hero__grid { inset: 0; }
.svc-hero .hero__glow {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 18%),
    radial-gradient(60% 70% at 85% 80%, rgba(11,95,255,.22), transparent 70%),
    radial-gradient(50% 40% at 30% 0%, rgba(11,60,160,.16), transparent 70%),
    linear-gradient(180deg, transparent 72%, #000 100%);
}
.svc-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 680px) 1fr;
  align-items: center;
  gap: 40px;
}
.svc-hero__title {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.svc-hero__badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.1em;
  height: 1em;
  vertical-align: -0.08em;
  margin-left: .1em;
}
.svc-hero__badge::before {
  content: "";
  position: absolute;
  inset: -.35em;
  border-radius: 50%;
  background: rgba(255, 11, 11, .2);
  filter: blur(6px);
  animation: badge-pulse 3s ease-in-out infinite;
}
.svc-hero__badge svg {
  position: relative;
  width: .62em;
  height: .62em;
  fill: none;
  stroke: #ff1a1a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes badge-pulse { 50% { transform: scale(1.15); opacity: .7; } }
.svc-hero__text {
  margin-top: 40px;
  max-width: 670px;
  font-size: 16px;
  line-height: 1.38;
  color: #a1a1a7;
}
.svc-hero__text + .svc-hero__text { margin-top: 22px; }
.svc-hero__cta { margin-top: 28px; }

.svc-hero__visual {
  position: relative;
  height: 400px;
}
.svc-hero__laptop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 520px;
  max-width: none;
  transform: translate(-50%, -50%) rotate(-38deg);
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.6));
  animation: laptop-float 7s ease-in-out infinite;
}
@keyframes laptop-float {
  50% { transform: translate(-50%, calc(-50% - 10px)) rotate(-37deg); }
}

.svc-intro { padding: 96px 0 0; }
.svc-intro__card {
  position: relative;
  padding: 44px 40px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid #232327;
  background:
    radial-gradient(40% 80% at 0% 0%, rgba(80, 30, 140, .18), transparent 70%),
    linear-gradient(180deg, #0f1013, #0a0a0b);
  text-align: center;
  overflow: hidden;
}
.svc-intro__flower {
  position: absolute;
  left: -150px;
  top: -190px;
  width: 360px;
  max-width: none;
  filter: blur(3px) saturate(1.3) hue-rotate(15deg);
  opacity: .95;
  pointer-events: none;
  transition: transform 1.4s var(--ease);
}
.svc-intro__card:hover .svc-intro__flower { transform: rotate(30deg); }
.svc-intro__card .section__title { position: relative; }
.svc-intro__card p {
  position: relative;
  max-width: 680px;
  margin: 26px auto 0;
  font-size: 14px;
  line-height: 1.43;
  color: #a1a1a7;
}
.svc-intro__card p + p { margin-top: 20px; }

.svc-build { padding-top: 180px; }
.svc-build .section__head { margin-bottom: 36px; }
.svc-build__layout {
  position: relative;
  display: grid;
  grid-template-columns: 381px 1fr;
  gap: 49px;
  align-items: center;
  padding-left: 20px;
}
.svc-build__list { border-bottom: 1px solid var(--c-line); }
.svc-build__item {
  position: relative;
  padding: 24px 6px 21px;
  border-top: 1px solid var(--c-line);
  cursor: pointer;
  outline: none;
}
.svc-build__item h3 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.3;
  color: #fff;
  transition: color .3s;
}
.svc-build__desc {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .4s var(--ease);
}
.svc-build__desc > p {
  overflow: hidden;
  padding-top: 14px;
  font-size: 13.5px;
  line-height: 1.22;
  color: #a1a1a7;
  transition: padding .4s var(--ease);
}
.svc-build__item:focus-visible { box-shadow: inset 0 0 0 2px var(--c-primary-light); border-radius: 6px; }

.svc-build__rail {
  position: absolute;
  left: 8px;
  top: 0;
  width: 3px;
  border-radius: 3px;
  background: #1c1c20;
  pointer-events: none;
}
.svc-build__rail i {
  position: absolute;
  inset: 0 0 auto;
  height: 0;
  border-radius: inherit;
  background: var(--c-primary);
  box-shadow: 0 0 12px rgba(37, 99, 235, .55);
  transition: height .15s linear;
}

@media (min-width: 1025px) {
  .svc-build.is-pinned { height: calc(100vh + var(--build-count, 5) * 50vh); padding-top: 0; }
  .svc-build.is-pinned .svc-build__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 64px;
  }
  .svc-build.is-scrolly .svc-build__layout { padding-left: 32px; }
  .svc-build.is-scrolly .svc-build__item h3 { color: #5c5c62; }
  .svc-build.is-scrolly .svc-build__item:hover h3 { color: #9a9aa0; }
  .svc-build.is-scrolly .svc-build__item.is-active h3 { color: #fff; }
  .svc-build.is-scrolly .svc-build__desc { grid-template-rows: 0fr; }
  .svc-build.is-scrolly .svc-build__desc > p { padding-top: 0; }
  .svc-build.is-scrolly .svc-build__item.is-active .svc-build__desc { grid-template-rows: 1fr; }
  .svc-build.is-scrolly .svc-build__item.is-active .svc-build__desc > p { padding-top: 14px; }
  .svc-build.is-scrolly .showcase { width: min(100%, calc((100vh - 260px) * 668 / 537)); }
}
@media (max-width: 1024px) {
  .svc-build__rail { display: none; }
}

.showcase {
  position: relative;
  aspect-ratio: 668 / 537;
  width: 100%;
  margin-left: auto;
  padding: 12px;
  border-radius: 36px;
  border: 1px solid #26262b;
  background: #050506;
}
.showcase__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  border: 1px solid #1a1a1e;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .09) 1px, transparent 1.4px) 0 0 / 16px 16px,
    #09090a;
  overflow: hidden;
}
.showcase__slide {
  --x: 0%;
  --s: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  aspect-ratio: 1442 / 1024;
  padding: 1.1%;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .8);
  transform: translate(-50%, -50%) translateX(var(--x)) scale(var(--s));
  opacity: 0;
  filter: brightness(.45) saturate(.8);
  transition: transform .7s var(--ease), opacity .5s, filter .5s, box-shadow .5s;
}
.showcase__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 9px;
}
.showcase__slide[data-pos="0"] {
  z-index: 3;
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 2px #2f80ff, 0 0 32px rgba(47, 128, 255, .35), 0 30px 60px -12px rgba(0, 0, 0, .9);
}
.showcase__slide[data-pos="-1"] { --x: -40%; --s: .8; z-index: 2; opacity: 1; }
.showcase__slide[data-pos="1"]  { --x: 40%;  --s: .8; z-index: 2; opacity: 1; }
.showcase__slide[data-pos="-2"] { --x: -70%; --s: .62; z-index: 1; }
.showcase__slide[data-pos="2"]  { --x: 70%;  --s: .62; z-index: 1; }

.svc-focus { padding-top: 90px; }
.svc-focus__subtitle { max-width: 660px; margin-inline: auto; line-height: 1.38; }
.svc-focus .section__head { margin-bottom: 40px; }
.svc-focus__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 17px;
  padding-inline: 2px;
}
.focus-card {
  grid-column: span 2;
  position: relative;
  min-height: 131px;
  padding: 24px 24px 22px;
  border-radius: 20px;
  border: 1px solid #26262a;
  background: #0b0b0c;
  overflow: hidden;
  transition: border-color .3s, transform .3s var(--ease);
}
.focus-card:nth-child(4) { grid-column: 2 / span 2; margin-left: -38px; }
.focus-card:nth-child(5) { grid-column: 4 / span 2; margin-right: -38px; }
.focus-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .9;
  transition: opacity .4s;
}
.focus-card--violet::before { background: radial-gradient(70% 60% at 25% 110%, rgba(70, 50, 140, .45), transparent 70%); }
.focus-card--blue::before { background: radial-gradient(60% 80% at 100% 0%, rgba(20, 60, 160, .5), transparent 70%); }
.focus-card:hover { border-color: #3a3a44; transform: translateY(-3px); }
.focus-card h3 { position: relative; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.focus-card p { position: relative; margin-top: 10px; font-size: 14px; line-height: 1.38; color: #a1a1a7; }

/* ---------- tech stack ---------- */
.svc-stack { padding-top: 90px; }
.svc-stack__subtitle { max-width: 640px; margin-inline: auto; line-height: 1.43; }
.svc-stack .section__head { margin-bottom: 40px; }
.svc-stack__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}
.stack-card {
  position: relative;
  padding: 22px 22px 24px;
  border-radius: 20px;
  border: 1px solid #26262a;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1.4px) 0 0 / 18px 18px,
    #0b0b0c;
  overflow: hidden;
  transition: border-color .3s, transform .3s var(--ease);
}
.stack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 0% 0%, rgba(31, 100, 220, .16), transparent 70%);
  pointer-events: none;
}
.stack-card:hover { border-color: #3a3a44; transform: translateY(-3px); }
.stack-card__title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #b5b5ba;
}
.stack-card__title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-primary-light, #2f80ff);
  box-shadow: 0 0 10px rgba(47, 128, 255, .8);
}
.stack-card__list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}
.stack-card__list li {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid #2a2a30;
  background: rgba(255, 255, 255, .03);
  font-size: 13px;
  line-height: 1.2;
  color: #e6e6ea;
  transition: border-color .25s, color .25s;
}
.stack-card:hover .stack-card__list li { border-color: #34343c; }
@media (max-width: 1024px) {
  .svc-stack__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .svc-stack { padding-top: 57px; }
  .svc-stack .section__head { margin-bottom: 28px; }
  .svc-stack__grid { grid-template-columns: 1fr; gap: 12px; }
  .stack-card { padding: 18px 16px 20px; border-radius: 16px; }
  .stack-card__list li { font-size: 12px; padding: 6px 11px; }
}

.svc-approach { padding-top: 90px; }
.svc-approach__subtitle { max-width: 600px; margin-inline: auto; line-height: 1.43; font-size: 14px; }
.svc-approach .section__head { margin-bottom: 80px; }
.process__stage--plain { height: 220px; }
.process__stage--plain .process__arrow { top: 89px; }
.process__stage--plain .step-card { height: 200px; padding-top: 32px; }
.process__stage--plain .step-card.is-active { height: 194px; top: 3px; }
.process__stage--plain .step-card__icon { margin-top: 0; }
.process__stage--plain .step-card__title { margin-top: 22px; }
.process__stage--plain .step-card.is-active .step-card__title { margin-top: 20px; }

.svc-cta { padding-top: 120px; }
.svc-cta .cta__card { padding-top: 70px; }
.svc-cta .cta__text { margin-top: 16px; }
.svc-cta .cta__actions { margin-top: 40px; }
.svc-cta .contact-info { margin-top: 78px; }

@media (max-width: 1024px) {
  .svc-hero__layout { grid-template-columns: 1fr; }
  .svc-hero__visual { height: 340px; }
  .svc-build__layout { grid-template-columns: 1fr; padding-left: 0; }
  .showcase { max-width: 620px; width: 100%; margin-inline: auto; }
  .svc-focus__grid { grid-template-columns: 1fr 1fr; }
  .focus-card,
  .focus-card:nth-child(4),
  .focus-card:nth-child(5) { grid-column: auto; margin: 0; }
  .focus-card:nth-child(5) { grid-column: span 2; }
}

@media (max-width: 1024px) {
  .svc-hero { padding: 120px 0 64px; }
  .svc-hero__text { margin-top: 24px; font-size: 14px; }
  .svc-hero__visual { height: 260px; }
  .svc-hero__laptop { width: 320px; }
  .svc-intro { padding-top: 40px; }
  .svc-intro__card { padding: 40px 20px 36px; }
  .svc-intro__flower { width: 240px; left: -110px; top: -130px; }
  .svc-build { padding-top: 100px; }
  .svc-build__item h3 { font-size: 18px; }
  .showcase { border-radius: 28px; }
  .showcase__screen { border-radius: 18px; }
  .svc-focus__grid { grid-template-columns: 1fr; }
  .focus-card:nth-child(5) { grid-column: auto; }
  .focus-card h3 { font-size: 20px; }
  .svc-approach .section__head { margin-bottom: 40px; }
  .svc-cta { padding-top: 90px; }
  .svc-cta .contact-info { margin-top: 48px; }
}

@media (max-width: 1024px) {
  .page-service main > section { padding-bottom: 0; }

  .page-service .svc-hero { min-height: 100vh; min-height: 100svh; padding: 120px 0 70px; text-align: center; }
  .page-service .svc-hero__layout { display: block; }
  .page-service .svc-hero__visual { display: none; }
  .page-service .svc-hero__title { margin-top: 18px; font-size: 28px; line-height: 1.29; }
  .page-service .svc-hero__badge { margin-left: 0; }
  .page-service .svc-hero__text { max-width: none; margin-top: 16px; font-size: 14px; line-height: 1.43; }
  .page-service .svc-hero__text + .svc-hero__text { margin-top: 16px; }
  .page-service .svc-hero__cta { margin-top: 22px; }

  .page-service .svc-intro { padding-top: 0; }
  .page-service .svc-intro__card { padding: 30px 18px 32px; border-radius: 20px; }
  .page-service .svc-intro__card .section__title { max-width: 220px; margin-inline: auto; }
  .page-service .svc-intro__card p { margin-top: 18px; font-size: 14px; line-height: 1.43; }
  .page-service .svc-intro__card p + p { margin-top: 20px; }
  .page-service .svc-intro__card p br { display: none; }
  .page-service .svc-intro__flower { width: 260px; left: -120px; top: -120px; filter: blur(4px) saturate(1.3) hue-rotate(15deg); }

  .page-service .svc-build { padding-top: 49px; }
  .page-service .svc-build .section__head { margin-bottom: 27px; }
  .page-service .svc-build__layout { display: flex; flex-direction: column-reverse; gap: 36px; }
  .page-service .showcase { aspect-ratio: 358 / 290; width: 100%; max-width: 520px; align-self: center; margin-left: 0; padding: 8px; border-radius: 28px; }
  .page-service .showcase__screen { border-radius: 20px; }
  .page-service .showcase__slide { width: 66%; }
  .page-service .svc-build__item { padding: 16px 6px 18px; }
  .page-service .svc-build__item h3 { font-size: 16px; color: #fff; }
  .page-service .svc-build__desc > p { padding-top: 8px; font-size: 14px; line-height: 1.3; color: #a1a1a7; }

  .page-service .svc-focus { padding-top: 57px; }
  .page-service .svc-focus .section__head { margin-bottom: 36px; }
  .page-service .svc-focus__grid { display: flex; flex-direction: column; gap: 14px; padding: 0; }
  .page-service .focus-card { min-height: 0; padding: 16px 16px 18px; border-radius: 16px; margin: 0; }
  .page-service .focus-card h3 { font-size: 15px; }
  .page-service .focus-card p { margin-top: 8px; font-size: 14px; line-height: 1.43; }

  .page-service .svc-approach { padding-top: 134px; }
  .page-service .svc-approach .section__head { margin-bottom: 62px; }
  .page-service .process__stage--plain { height: 220px; }
  .page-service .process__stage--plain .process__nav { top: 76px; }

  .page-service .svc-cta { padding: 120px 0 49px; }
  .page-service .svc-cta .cta__card { padding-top: 32px; }
  .page-service .svc-cta .cta__title { font-size: 20px; }
  .page-service .svc-cta .cta__text { margin-top: 14px; }
  .page-service .svc-cta .cta__actions { margin-top: 30px; }
  .page-service .svc-cta .cta__actions .btn { flex: 0 0 auto; padding: 0 21px; }
  .page-service .svc-cta .contact-info { margin-top: 34px; }
}