/* Páginas especializadas de diseño y desarrollo: lenguaje oscuro Deltanet. */
.web-specialized-page {
  --service-ink: #eef4ff;
  --service-muted: #a9bad0;
  --service-blue: #82b5ff;
  --service-line: rgb(161 187 221 / 17%);
  color: #eef4ff;
  background: #08111f;
}

.web-specialized-page .service-hero {
  padding-top: clamp(52px, 7vw, 82px);
  background:
    radial-gradient(ellipse at 80% 28%, rgb(41 99 177 / 26%), transparent 39%),
    linear-gradient(145deg, #091321 0%, #0d1d32 62%, #0a1422 100%);
}

.web-specialized-page .service-hero::after {
  border-color: rgb(110 159 222 / 14%);
}

.web-specialized-page .service-crumbs { color: #9fb1c8; }
.web-specialized-page .service-crumbs a:hover { color: #8cbbff; }
.web-specialized-page .service-eyebrow,
.web-specialized-page .service-section-kicker { color: #8fbaff; }
.web-specialized-page .service-eyebrow::before,
.web-specialized-page .service-section-kicker::before { background: #57c9bb; }
.web-specialized-page .service-hero h1 { color: #f4f7fc; }
.web-specialized-page .service-hero h1 span { color: #90baff; }
.web-specialized-page .service-hero-lede { color: #c0ccdc; }
.web-specialized-page .service-button-secondary { color: #dce9fa; border-color: rgb(160 190 231 / 42%); }
.web-specialized-page .service-button-secondary:hover { color: #fff; background: rgb(255 255 255 / 7%); }

.web-specialized-page .service-hero-visual {
  min-height: 440px;
  border-color: rgb(180 207 243 / 15%);
  background: #0b192a;
  box-shadow: 0 32px 80px rgb(0 0 0 / 30%);
}

.web-specialized-page .service-hero-visual > img {
  opacity: .39;
  filter: saturate(.76);
}

.web-specialized-page .service-hero-visual::after {
  background:
    linear-gradient(90deg, rgb(4 12 23 / 31%), rgb(7 19 34 / 14%)),
    linear-gradient(180deg, rgb(5 13 24 / 8%) 6%, rgb(5 14 27 / 76%) 100%);
}

.web-specialized-page .service-visual-badge,
.web-specialized-page .service-visual-note {
  border-color: rgb(198 219 249 / 18%);
  background: rgb(6 17 31 / 72%);
}

.web-specialized-page .service-visual-note { z-index: 2; }
.web-specialized-page .service-visual-note strong { color: #f2f6fc; }
.web-specialized-page .service-proof-row { border-color: var(--service-line); }
.web-specialized-page .service-proof-row > div { color: #9fb1c8; }
.web-specialized-page .service-proof-row strong { color: #e8eff9; }

.web-specialized-page .service-content-section.is-white { background: #0a1422; }
.web-specialized-page .service-content-section.is-blue { background: #0d1b2d; }
.web-specialized-page .service-section-heading h2,
.web-specialized-page .service-card h3,
.web-specialized-page .service-process-step h3 { color: #eff4fb; }
.web-specialized-page .service-section-heading > p,
.web-specialized-page .service-card p,
.web-specialized-page .service-process-step p { color: #a9bad0; }

.web-specialized-page .service-card {
  border-color: rgb(161 187 221 / 17%);
  background: linear-gradient(145deg, #111f31, #0d1929);
  box-shadow: 0 16px 40px rgb(0 0 0 / 12%);
}

.web-specialized-page .service-card:hover {
  border-color: rgb(130 181 255 / 48%);
  box-shadow: 0 24px 52px rgb(0 0 0 / 23%);
}

.web-specialized-page .service-card-number { color: #91a9c6; }
.web-specialized-page .service-card .service-card-icon { color: #a4c7ff; border-color: rgb(132 174 231 / 24%); background: #152a44; }
.web-specialized-page .service-process { border-color: var(--service-line); }
.web-specialized-page .service-process-step,
.web-specialized-page .service-process-step:not(:first-child) { border-color: var(--service-line); }
.web-specialized-page .service-process-step span { color: #85b5fa; }

.web-specialized-page .service-feature-band {
  border-color: rgb(161 187 221 / 17%);
  background: linear-gradient(135deg, #101f32, #0b1727);
}

.web-specialized-page .service-feature-band h2 { color: #f2f6fc; }
.web-specialized-page .service-feature-band p { color: #adbed2; }
.web-specialized-page .service-feature-list li { color: #d5e1f0; }
.web-specialized-page .service-feature-list li::before { background: #5fd0c2; }
.web-specialized-page .service-faq details { border-color: rgb(161 187 221 / 17%); background: #111f31; }
.web-specialized-page .service-faq summary { color: #ecf3fc; }
.web-specialized-page .service-faq details p { color: #adbed2; }
.web-specialized-page .service-faq details a { color: #9bc2ff; }

.web-specialized-page .service-contact-section {
  background: radial-gradient(ellipse at 78% 14%, rgb(53 113 197 / 35%), transparent 44%), linear-gradient(120deg, #102746, #0a1728);
}

.web-specialized-page .service-contact-section .service-button { color: #10233e; background: #f2f7ff; box-shadow: 0 12px 28px rgb(0 0 0 / 18%); }
.web-specialized-page .service-contact-section .service-button:hover { background: #dceaff; }

.web-design-mockup,
.web-code-window {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(76%, 430px);
  min-height: 255px;
  overflow: hidden;
  border: 1px solid rgb(224 236 255 / 29%);
  border-radius: 17px;
  color: #edf4ff;
  background: rgb(8 19 33 / 82%);
  box-shadow: 0 24px 70px rgb(0 0 0 / 37%);
  backdrop-filter: blur(14px);
  transform: translate(-50%, -50%);
}

.mockup-top {
  min-height: 39px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgb(208 226 251 / 13%);
  color: #9fb4d0;
  background: rgb(255 255 255 / 3%);
}

.mockup-top i { width: 7px; height: 7px; border-radius: 50%; background: #7b92ad; }
.mockup-top i:first-child { background: #f28b86; }
.mockup-top i:nth-child(2) { background: #e9c46b; }
.mockup-top i:nth-child(3) { background: #61c9ae; }
.mockup-top span { margin-left: auto; font-size: 9px; letter-spacing: .04em; }

.mockup-body { position: relative; min-height: 215px; padding: 25px 24px; }
.mockup-label { margin-bottom: 13px; color: #83cfc7; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.mockup-line { width: 61%; height: 9px; margin-top: 9px; border-radius: 9px; background: #d5e3f7; opacity: .82; }
.mockup-line-wide { width: 86%; height: 17px; background: #f4f7fc; }
.mockup-cta { width: 88px; height: 25px; margin-top: 19px; border-radius: 20px; background: #538be3; }
.mockup-image { position: absolute; right: 20px; bottom: 20px; width: 33%; height: 80px; border: 1px solid rgb(183 213 255 / 27%); border-radius: 10px; background: radial-gradient(circle at 70% 28%, #8dc8d7 0 13%, transparent 14%), linear-gradient(135deg, #3d73a9, #162d4b); }

.web-code-window { width: min(80%, 460px); min-height: 255px; padding-bottom: 17px; }
.web-code-window pre { margin: 24px 22px 18px; color: #d9e7fb; font: 500 14px/1.75 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }
.web-code-window code b { color: #8fb7ff; font-weight: 700; }
.web-code-window code em { color: #73d5be; font-style: normal; }
.code-status { margin: 0 22px; padding-top: 13px; border-top: 1px solid rgb(208 226 251 / 13%); color: #9dafc7; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.code-status span { width: 6px; height: 6px; margin-right: 6px; display: inline-block; border-radius: 50%; background: #61d1b7; box-shadow: 0 0 10px rgb(97 209 183 / 70%); }

@media (max-width: 940px) {
  .web-specialized-page .service-hero-visual { min-height: 390px; }
}

@media (max-width: 640px) {
  .web-specialized-page .service-hero-visual { min-height: 330px; }
  .web-design-mockup,
  .web-code-window { width: calc(100% - 36px); min-height: 225px; }
  .mockup-body { min-height: 185px; padding: 22px 18px; }
  .web-code-window pre { margin: 20px 17px 15px; font-size: 12px; }
  .code-status { margin-inline: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .web-specialized-page .service-hero-visual > img { animation: none; }
}

/* Bloques de ingeniería: iconos propios y revelado escalonado al entrar en pantalla. */
.development-capability-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 17px; }
.web-development-page .development-capability-card {
  position: relative;
  grid-column: span 3;
  min-height: 260px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 20px;
  background: radial-gradient(ellipse at 96% 2%, rgb(77 135 206 / 13%), transparent 43%), linear-gradient(145deg, #122238, #0d1929);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.75,.2,1), border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}
.web-development-page .development-capability-ai { grid-column: span 7; }
.web-development-page .development-capability-security { grid-column: span 5; }
.web-development-page .development-capability-feature { min-height: 318px; overflow: hidden; }
.web-development-page .development-capability-feature::after { position: absolute; right: -78px; bottom: -152px; width: 310px; height: 310px; border: 1px solid rgb(118 204 220 / 11%); border-radius: 50%; background: radial-gradient(circle at 36% 34%, rgb(72 205 194 / 13%), transparent 67%); content: ""; pointer-events: none; transition: transform 500ms ease, opacity 300ms ease; }
.web-development-page .development-capability-security::after { width: 265px; height: 265px; right: -53px; bottom: -126px; border-color: rgb(121 164 255 / 13%); background: radial-gradient(circle at 36% 34%, rgb(73 135 230 / 17%), transparent 68%); }
.web-development-page .development-capability-ai { border-color: rgb(96 205 195 / 36%); background: radial-gradient(ellipse at 95% 4%, rgb(72 205 194 / 18%), transparent 45%), linear-gradient(145deg, #11283a, #0d1b2a); box-shadow: 0 19px 48px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(128 231 218 / 7%); }
.web-development-page .development-capability-security { border-color: rgb(117 163 255 / 34%); background: radial-gradient(ellipse at 95% 4%, rgb(77 135 206 / 20%), transparent 47%), linear-gradient(145deg, #14243a, #0d1929); box-shadow: 0 19px 48px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(151 187 255 / 6%); }
.web-development-page .development-capability-ai .development-card-icon { color: #84e2d6; border-color: rgb(96 205 195 / 36%); background: linear-gradient(145deg, rgb(45 145 143 / 30%), rgb(27 91 101 / 20%)); }
.web-development-page .development-capability-security .development-card-icon { color: #aac5ff; border-color: rgb(117 163 255 / 36%); background: linear-gradient(145deg, rgb(64 116 181 / 32%), rgb(37 76 125 / 22%)); }
.web-development-page .development-capability-ai .development-capability-index { color: rgb(107 221 207 / 12%); }
.web-development-page .development-capability-security .development-capability-index { color: rgb(133 169 255 / 12%); }
.web-development-page .development-capability-card:nth-child(2) { transition-delay: 70ms; }
.web-development-page .development-capability-card:nth-child(3) { transition-delay: 140ms; }
.web-development-page .development-capability-card:nth-child(4) { transition-delay: 210ms; }
.web-development-page .development-capability-card:nth-child(5) { transition-delay: 280ms; }
.web-development-page .development-capability-card:nth-child(6) { transition-delay: 350ms; }
.development-capability-top { position: static; z-index: 1; display: block; min-height: 58px; }
.web-development-page .development-capability-card .service-card-number { max-width: calc(100% - 76px); margin: 8px 0 0; color: #93abc8; }
.development-card-icon { position: absolute; top: 24px; right: 24px; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgb(139 184 245 / 25%); border-radius: 17px; color: #9cc3ff; background: linear-gradient(145deg, rgb(64 116 181 / 24%), rgb(37 76 125 / 16%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%); transition: color 250ms ease, border-color 250ms ease, background 250ms ease, transform 350ms cubic-bezier(.2,.75,.2,1); }
.development-card-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.development-capability-copy { position: relative; z-index: 1; max-width: 360px; margin-top: 28px; }
.web-development-page .development-capability-copy h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.03em; }
.web-development-page .development-capability-copy p { margin: 0; font-size: 13px; line-height: 1.7; }
.development-capability-index { position: absolute; right: 20px; bottom: 13px; color: rgb(140 177 223 / 8%); font: 800 66px/.9 Manrope, sans-serif; letter-spacing: -.08em; pointer-events: none; }
.web-development-page .development-capability-card:hover { transform: translateY(-6px); border-color: rgb(121 177 247 / 44%); background: radial-gradient(ellipse at 96% 2%, rgb(77 135 206 / 20%), transparent 44%), linear-gradient(145deg, #162a43, #101d2e); box-shadow: 0 24px 54px rgb(0 0 0 / 24%); }
.web-development-page .development-capability-ai:hover { border-color: rgb(102 226 212 / 68%); background: radial-gradient(ellipse at 90% 5%, rgb(72 205 194 / 25%), transparent 47%), linear-gradient(145deg, #163247, #102433); box-shadow: 0 27px 58px rgb(0 0 0 / 28%), 0 0 28px rgb(68 193 184 / 12%); }
.web-development-page .development-capability-security:hover { border-color: rgb(130 174 255 / 66%); background: radial-gradient(ellipse at 90% 5%, rgb(77 135 206 / 28%), transparent 48%), linear-gradient(145deg, #182d49, #101d2e); box-shadow: 0 27px 58px rgb(0 0 0 / 28%), 0 0 28px rgb(83 137 226 / 12%); }
.web-development-page .development-capability-feature:hover::after { transform: scale(1.1); }
.web-development-page .development-capability-card:hover .development-card-icon { transform: translateY(-3px) rotate(-5deg); border-color: rgb(133 189 255 / 56%); color: #c4dcff; background: #1c3859; }
.web-development-page .development-capability-card.is-visible .development-card-icon { animation: development-icon-enter 620ms cubic-bezier(.2,.8,.2,1) both; }
.web-development-page .development-capability-card:nth-child(2).is-visible .development-card-icon { animation-delay: 70ms; }
.web-development-page .development-capability-card:nth-child(3).is-visible .development-card-icon { animation-delay: 140ms; }
.web-development-page .development-capability-card:nth-child(4).is-visible .development-card-icon { animation-delay: 210ms; }
.web-development-page .development-capability-card:nth-child(5).is-visible .development-card-icon { animation-delay: 280ms; }
.web-development-page .development-capability-card:nth-child(6).is-visible .development-card-icon { animation-delay: 350ms; }
@keyframes development-icon-enter { from { opacity: .25; transform: translateY(9px) scale(.78) rotate(-12deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }

@media (max-width: 940px) {
  .web-development-page .development-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .web-development-page .development-capability-card,
  .web-development-page .development-capability-ai,
  .web-development-page .development-capability-security { grid-column: span 1; padding: 22px; }
  .web-development-page .development-capability-feature { min-height: 270px; }
  .development-card-icon { top: 21px; right: 21px; width: 54px; height: 54px; }
  .web-development-page .development-capability-card .service-card-number { max-width: calc(100% - 68px); }
}

@media (max-width: 640px) {
  .web-development-page .development-capability-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .web-development-page .development-capability-card,
  .web-development-page .development-capability-feature { grid-column: 1; min-height: 220px; padding: 21px 20px 23px; }
  .development-capability-top { min-height: 54px; }
  .development-card-icon { top: 20px; right: 20px; width: 50px; height: 50px; border-radius: 15px; }
  .web-development-page .development-capability-card .service-card-number { max-width: calc(100% - 62px); margin-top: 6px; font-size: 10px; }
  .development-capability-copy { max-width: 100%; margin-top: 18px; }
  .web-development-page .development-capability-copy h3 { font-size: 19px; }
  .web-development-page .development-capability-copy p { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .web-development-page .development-capability-card,
  .web-development-page .development-card-icon { transition: none; }
  .web-development-page .development-capability-card.is-visible .development-card-icon { animation: none; }
}

/* Tecnologías y plataformas publicadas por Deltanet, presentadas como bloques. */
.web-specialized-page .development-stack-section .service-section-heading { margin-bottom: 32px; }
.development-stack-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.development-stack-card {
  position: relative;
  min-width: 0;
  min-height: 238px;
  padding: 21px 19px;
  overflow: hidden;
  border: 1px solid rgb(161 187 221 / 15%);
  border-radius: 17px;
  background: linear-gradient(145deg, rgb(18 34 55 / 94%), rgb(12 25 42 / 96%));
  box-shadow: 0 12px 30px rgb(0 0 0 / 10%);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.75,.2,1), border-color 220ms ease, box-shadow 220ms ease;
}
.development-stack-card::before {
  position: absolute;
  top: 0;
  left: 19px;
  width: 34px;
  height: 2px;
  content: "";
  background: #61cbbb;
  opacity: .82;
}
.development-stack-card:nth-child(2n)::before { background: #83b7ff; }
.development-stack-card:nth-child(3n)::before { background: #9b9bff; }
.development-stack-card:nth-child(2) { transition-delay: 45ms; }
.development-stack-card:nth-child(3) { transition-delay: 90ms; }
.development-stack-card:nth-child(4) { transition-delay: 135ms; }
.development-stack-card:nth-child(5) { transition-delay: 180ms; }
.development-stack-card:nth-child(6) { transition-delay: 225ms; }
.development-stack-card:nth-child(7) { transition-delay: 270ms; }
.development-stack-card:nth-child(8) { transition-delay: 315ms; }
.development-stack-card:nth-child(9) { transition-delay: 360ms; }
.development-stack-card:nth-child(10) { transition-delay: 405ms; }
.development-stack-category { display: block; color: #92abc9; font-size: 9px; font-weight: 800; letter-spacing: .12em; line-height: 1.5; }
.development-stack-logo { width: 100%; height: 66px; margin: 13px 0 11px; padding: 7px 12px; display: flex; align-items: center; justify-content: center; border: 1px solid #e1e8f1; border-radius: 10px; background: #fff; }
.development-stack-logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 48px; object-fit: contain; }
.development-stack-card h3 { margin: 0 0 6px; color: #eaf1fb; font-size: 14px; letter-spacing: -.02em; }
.web-specialized-page .development-stack-card p { margin: 0; color: #9eb1ca; font-size: 11px; line-height: 1.55; }
.development-stack-card:hover { transform: translateY(-5px); border-color: rgb(124 177 243 / 42%); box-shadow: 0 20px 42px rgb(0 0 0 / 20%); }

@media (max-width: 1100px) {
  .development-stack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .development-stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .development-stack-card { min-height: 224px; padding: 17px 15px; border-radius: 14px; }
  .development-stack-card::before { left: 15px; }
  .development-stack-logo { height: 60px; margin: 12px 0 10px; padding: 6px 9px; }
  .development-stack-logo img { max-height: 44px; }
  .web-specialized-page .development-stack-card p { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .development-stack-card { transition: none; }
}

/* Filtros accesibles para reducir la densidad del catálogo tecnológico en Diseño web. */
.design-tech-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 27px 0 22px; }
.design-tech-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.design-tech-filter {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgb(161 187 221 / 20%);
  border-radius: 999px;
  color: #ced9e8;
  background: rgb(13 27 45 / 62%);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.design-tech-filter:hover { transform: translateY(-1px); border-color: rgb(130 181 255 / 52%); color: #fff; }
.design-tech-filter.is-active { border-color: #82b5ff; color: #091522; background: #a5cbff; box-shadow: 0 7px 20px rgb(80 142 217 / 18%); }
.design-tech-filter:focus-visible { outline: 3px solid #63cdbd; outline-offset: 3px; }
.design-tech-count { flex: 0 0 auto; margin: 0; color: #9eb1ca; font-size: 12px; }
.design-tech-section .development-stack-card { transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,.75,.2,1), border-color 220ms ease, box-shadow 220ms ease; transition-delay: 0ms; }
.design-tech-section .development-stack-card.is-filtered-out { opacity: 0; transform: translateY(9px) scale(.985); pointer-events: none; }
.design-tech-section .development-stack-card[hidden] { display: none !important; }

/* Proceso de diseño: fases con profundidad, relieve y borde luminoso discreto. */
.web-design-page .service-process { gap: 14px; border: 0; }
.web-design-page .service-process-step,
.web-design-page .service-process-step:not(:first-child) {
  position: relative;
  min-height: 235px;
  padding: 24px 22px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 19px;
  background: linear-gradient(145deg, #122238, #0d1929) padding-box, linear-gradient(135deg, rgb(132 183 255 / 48%), rgb(161 187 221 / 8%) 52%, rgb(95 208 194 / 28%)) border-box;
  box-shadow: 0 14px 34px rgb(0 0 0 / 12%), inset 0 1px 0 rgb(255 255 255 / 3%);
  transition: opacity 650ms ease, transform 300ms cubic-bezier(.2,.75,.2,1), border-color 300ms ease, box-shadow 300ms ease, background 300ms ease;
}
.web-design-page .service-process-step::before { position: absolute; top: 0; left: 22px; width: 44px; height: 2px; content: ""; background: linear-gradient(90deg, #60d0c1, #82b5ff); opacity: .86; }
.web-design-page .service-process-step span { margin-bottom: 35px; color: #8bd8ce; font-size: 10px; }
.web-design-page .service-process-step h3 { margin-bottom: 11px; font-size: 19px; letter-spacing: -.035em; }
.web-design-page .service-process-step p { font-size: 13px; line-height: 1.7; }
.web-design-page .service-process-step:hover,
.web-design-page .service-process-step:focus-within { z-index: 1; transform: translateY(-7px); background: linear-gradient(145deg, #172c46, #101e31) padding-box, linear-gradient(135deg, rgb(117 182 255 / 84%), rgb(122 151 255 / 34%) 52%, rgb(95 208 194 / 72%)) border-box; box-shadow: 0 24px 48px rgb(0 0 0 / 27%), 0 0 24px rgb(89 153 225 / 10%); }

@media (max-width: 940px) {
  .design-tech-toolbar { align-items: flex-start; flex-direction: column; }
  .web-design-page .service-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .design-tech-toolbar { gap: 11px; margin-block: 22px 18px; }
  .design-tech-filters { gap: 7px; }
  .design-tech-filter { min-height: 40px; padding: 9px 12px; font-size: 11px; }
  .web-design-page .service-process { grid-template-columns: 1fr; gap: 11px; }
  .web-design-page .service-process-step,
  .web-design-page .service-process-step:not(:first-child) { min-height: 0; padding: 22px 20px; }
  .web-design-page .service-process-step span { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .design-tech-filter,
  .web-design-page .service-process-step,
  .web-design-page .service-process-step:not(:first-child) { transition: none; }
}