/* ===================================
   WEBNERIVO - PAGES STYLES
   Стили, специфичные для отдельных страниц
   =================================== */

/* Заполнится специфичными стилями для каждой страницы */
/* Основные классы для разделов и компонентов страниц */

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background-color: rgba(11, 22, 35, .24);
  border-bottom: var(--border-width) var(--border-style) rgba(167, 196, 215, .065);
  z-index: var(--z-fixed);
  -webkit-backdrop-filter: blur(9px) saturate(108%);
  backdrop-filter: blur(9px) saturate(108%);
}

/* ===== MAIN CONTENT ===== */
main {
  padding-top: var(--header-height);
  min-height: 100vh;
}

/* ===== FOOTER ===== */
.footer {
  position: relative;
  overflow: hidden;
  padding: clamp(38px, 4vw, 54px) 0 18px;
  margin-top: var(--space-3xl);
  border-top: 1px solid rgba(125, 211, 252, .16);
  background:
    linear-gradient(180deg, rgba(35, 70, 98, .18), transparent 38%),
    #0b1623;
}

.footer::before {
  position: absolute;
  top: 0;
  left: max(16px, calc((100% - var(--container-max-width)) / 2));
  width: min(42%, 520px);
  height: 1px;
  background: linear-gradient(90deg, #79c7e8, rgba(121, 199, 232, .2), transparent);
  content: '';
}

.footer::after {
  position: absolute;
  top: -3px;
  left: max(16px, calc((100% - var(--container-max-width)) / 2));
  width: 7px;
  height: 7px;
  border: 1px solid rgba(121, 199, 232, .72);
  border-radius: 50%;
  background: #0b1623;
  content: '';
}

.footer .footer-content {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(150px, .42fr) minmax(420px, 1.25fr);
  gap: clamp(28px, 3.5vw, 52px);
  align-items: start;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 24px;
}

.footer-brand .logo {
  display: inline-flex;
  margin-bottom: 14px;
  font-weight: 700;
}

.footer-brand .logo-word {
  font-size: 19px;
}

.footer-brand > p {
  max-width: 310px;
  margin: 0 0 18px;
  color: rgba(224, 234, 241, .82);
  font-size: 15px;
  line-height: 1.55;
}

.footer-technical {
  color: rgba(121, 199, 232, .64);
  font-family: var(--font-family-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-section h3 {
  margin: 2px 0 14px;
  color: rgba(235, 242, 247, .9);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-section ul li {
  margin: 0;
}

.footer-section a {
  color: rgba(216, 228, 236, .7);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.35;
  transition: color 200ms ease, transform 200ms ease;
}

.footer-nav-list {
  display: grid;
  gap: 2px;
}

.footer-nav-list a {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 32px;
}

.footer-link-arrow {
  color: rgba(121, 199, 232, .7);
  font-size: 11px;
  opacity: 0;
  transform: translate(-3px, 2px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.footer-contact-list {
  display: grid;
  grid-template-areas:
    "telegram whatsapp"
    "telegram viber"
    "email phone";
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

.footer-contact-list li {
  border-top: 1px solid rgba(166, 194, 211, .11);
}

.footer-contact-list li:nth-child(1) { grid-area: telegram; }
.footer-contact-list li:nth-child(2) { grid-area: whatsapp; }
.footer-contact-list li:nth-child(3) { grid-area: viber; }
.footer-contact-list li:nth-child(4) { grid-area: email; }
.footer-contact-list li:nth-child(5) { grid-area: phone; }

.footer-contact-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  min-height: 42px;
  height: 100%;
}

.footer-contact-list strong {
  color: rgba(237, 244, 248, .86);
  font-size: 12px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.footer-contact-list .footer-link-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.footer-section a:hover,
.footer-section a:focus-visible {
  color: #91d2ee;
  transform: translateX(2px);
}

.footer-section a:hover .footer-link-arrow,
.footer-section a:focus-visible .footer-link-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 15px;
  border-top: 1px solid rgba(166, 194, 211, .12);
  color: rgba(190, 207, 218, .5);
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.footer-bottom p {
  margin: 0;
}

@media screen and (max-width: 1023px) {
  .footer .footer-content {
    grid-template-columns: minmax(220px, 1fr) minmax(140px, .65fr);
  }

  .footer-contacts {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 600px) {
  .footer {
    padding: 36px 0 18px;
  }

  .footer .footer-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    margin-bottom: 26px;
  }

  .footer-contacts {
    grid-column: auto;
  }

  .footer-contact-list {
    grid-template-areas: none;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .footer-contact-list li:nth-child(n) { grid-area: auto; }

  .footer-contact-list a,
  .footer-nav-list a {
    min-height: 44px;
  }

  .footer-bottom {
    display: grid;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-section a,
  .footer-link-arrow {
    transition: none;
  }
}

/* ===== СЕЧЕНИЯ (SECTIONS) ===== */
section {
  padding: var(--space-3xl) 0;
}

section:first-of-type {
  padding-top: calc(var(--header-height) + var(--space-2xl));
}

/* ===== КАРТОЧКИ ===== */
.card {
  background-color: var(--color-surface);
  border: var(--border-width) var(--border-style) var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: all var(--transition-base);
}

.card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-md);
}

.card-text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* ===== СЕТКА ===== */
.grid {
  display: grid;
  gap: var(--space-2xl);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ===== FLEX МАКЕТЫ ===== */
.flex {
  display: flex;
  gap: var(--space-lg);
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

/* ===== BADGE ===== */
.badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-primary);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-secondary {
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  border: var(--border-width) var(--border-style) var(--border-color);
}

/* ===== СТИЛЕВЫЕ РАЗДЕЛИТЕЛИ ===== */
.divider {
  height: var(--border-width);
  background: linear-gradient(
    to right,
    transparent,
    var(--border-color),
    transparent
  );
  margin: var(--space-2xl) 0;
}

.process-list li small { display: block; max-width: 180px; color: var(--color-text-secondary); font-size: 12px; font-weight: 400; line-height: 1.5; }

/* ===== SERVICES PAGE ===== */
.services-page main { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--color-bg), var(--color-bg-secondary)); }
.services-page .services-intro {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(560px, calc(100svh - var(--header-height)), 720px);
  overflow: hidden;
  padding: clamp(92px, 10vh, 126px) 0 clamp(62px, 8vh, 84px);
  background: #13263a;
}

.services-page .services-intro::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 58% 108% at 15% 50%, rgba(5, 15, 28, .68) 0%, rgba(7, 19, 34, .44) 46%, rgba(7, 19, 34, .15) 66%, transparent 82%);
  content: '';
  pointer-events: none;
}

.services-page .services-intro::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 92px;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 21, 35, .38) 52%, #071523 100%);
  content: '';
  pointer-events: none;
}

.services-page .services-intro-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}

.services-page .services-intro-copy {
  position: relative;
  z-index: 1;
  max-width: 820px;
}

.page-eyebrow, .section-kicker { margin-bottom: 18px; color: var(--color-accent-cyan); font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }

.services-page .services-intro .page-eyebrow {
  margin-bottom: 22px;
  color: #7fc7e8;
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
}

.services-page .services-intro h1 {
  max-width: 820px;
  margin-bottom: 26px;
  color: #f3f7fa;
  font-size: clamp(48px, 4.8vw, 76px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: .98;
}

.services-page .services-intro h1 span,
.services-page .services-intro h1 em {
  display: block;
}

.services-page .services-intro h1 em {
  margin-top: .08em;
  color: #79bce4;
  font-family: Georgia, serif;
  font-size: 1.02em;
  font-style: italic;
  font-weight: 600;
  line-height: .94;
}

.intro-copy { max-width: 650px; color: var(--color-text-secondary); font-size: 17px; line-height: 1.7; }

.services-page .services-intro .intro-copy {
  max-width: 610px;
  margin: 0;
  color: rgba(229, 238, 244, .8);
  font-size: 16px;
  line-height: 1.68;
}

.page-marker { padding-bottom: 9px; color: rgba(168, 179, 199, .65); font-family: var(--font-family-mono); font-size: 11px; letter-spacing: .12em; white-space: nowrap; }

.services-page .services-intro .page-marker {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  margin-bottom: 4px;
  padding-bottom: 0;
  color: rgba(190, 218, 234, .7);
  font-size: 10px;
}

@media screen and (max-width: 1023px) {
  .services-page .services-intro {
    min-height: 620px;
    padding: 96px 0 66px;
    background-position: 58% 54%;
  }

  .services-page .services-intro-inner {
    display: block;
  }

  .services-page .services-intro-copy {
    max-width: 720px;
  }

  .services-page .services-intro .page-marker {
    display: inline-block;
    margin-top: 34px;
  }
}

@media screen and (max-width: 600px) {
  .services-page .services-intro {
    min-height: 610px;
    padding: 84px 0 54px;
    background-position: 61% center;
  }

  .services-page .services-intro::before {
    background: radial-gradient(ellipse 118% 92% at 18% 45%, rgba(5, 15, 28, .82) 0%, rgba(7, 19, 34, .58) 52%, rgba(7, 19, 34, .2) 74%, transparent 92%);
  }

  .services-page .services-intro h1 {
    max-width: 100%;
    margin-bottom: 22px;
    font-size: clamp(40px, 12vw, 50px);
    line-height: 1;
  }

  .services-page .services-intro h1 em {
    line-height: .96;
  }

  .services-page .services-intro .intro-copy {
    max-width: 34rem;
    font-size: 15px;
    line-height: 1.62;
  }

  .services-page .services-intro .page-marker {
    margin-top: 28px;
  }
}

.services-page .services-formats-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #071523;
  background-image: url('../assets/images/services-formats-bg.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.services-page .services-formats-stage::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, #071523 0, rgba(7, 21, 35, .68) 34px, rgba(7, 21, 35, .14) 76px, transparent 96px),
    radial-gradient(ellipse 70% 48% at 30% 24%, rgba(4, 14, 27, .18), transparent 72%),
    linear-gradient(90deg, rgba(3, 12, 24, .15), rgba(5, 17, 31, .03) 48%, rgba(4, 14, 27, .08));
  content: '';
  pointer-events: none;
}

.services-page .services-formats-stage::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 22, 35, .48) 52%, #0b1623 100%);
  content: '';
  pointer-events: none;
}

.services-page .service-catalog,
.services-page .process-section {
  position: relative;
  z-index: 1;
}

.services-page .service-catalog {
  padding: 36px 0 72px;
}

.services-page .catalog-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
  color: rgba(174, 190, 204, .64);
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.services-page .catalog-heading .section-kicker {
  margin: 0;
  color: #edf4f8;
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: uppercase;
}

.services-page .catalog-heading > p:last-child {
  margin: 0;
}

.services-page .catalog-layout {
  --catalog-gap: clamp(30px, 4vw, 54px);
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: var(--catalog-gap);
  align-items: stretch;
}

.services-page .service-list {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(157, 185, 203, .16);
}

.services-page .service-tab {
  position: relative;
  display: grid;
  flex: 1 1 0;
  grid-template-columns: 38px minmax(0, 1fr) 24px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 0 12px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid rgba(157, 185, 203, .14);
  border-radius: 0;
  background: transparent;
  color: rgba(210, 224, 233, .68);
  text-align: left;
  cursor: pointer;
  transition: color 220ms ease, background-color 220ms ease, padding 220ms ease;
}

.services-page .service-tab::before {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(178, 232, 247, .92), #68bddf 58%, rgba(74, 143, 195, .3));
  content: '';
  opacity: 0;
  transform: scaleY(.35);
  transform-origin: center;
  transition: opacity 220ms ease, transform 220ms ease;
}

.services-page .service-tab::after {
  position: absolute;
  top: calc(50% - 5px);
  right: calc(0px - var(--catalog-gap) - 14px);
  width: calc(var(--catalog-gap) + 14px);
  height: 10px;
  opacity: 0;
  background:
    radial-gradient(circle 3px at calc(100% - 2px) 50%, rgba(145, 222, 244, .82) 0 40%, rgba(63, 145, 184, .18) 44% 72%, transparent 76%),
    linear-gradient(90deg, rgba(105, 195, 229, .58), rgba(105, 195, 229, .08) 72%, transparent) left center / calc(100% - 4px) 1px no-repeat;
  content: '';
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.services-page .service-tab span {
  color: rgba(156, 181, 198, .5);
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: .08em;
  transition: color 220ms ease;
}

.services-page .service-tab span::after {
  color: rgba(151, 195, 215, .38);
  content: ' / 06';
}

.services-page .service-tab b {
  min-width: 0;
  font-size: 16px;
  font-weight: 650;
  hyphens: none;
  line-height: 1.25;
  overflow-wrap: normal;
  word-break: normal;
}

.services-page .service-tab i {
  color: rgba(170, 195, 211, .48);
  font-size: 15px;
  font-style: normal;
  text-align: right;
  transition: color 220ms ease, transform 220ms ease;
}

.services-page .service-tab:hover,
.services-page .service-tab:focus-visible {
  padding-left: 15px;
  color: #eaf3f8;
  background: linear-gradient(90deg, rgba(56, 125, 174, .08), transparent 78%);
}

.services-page .service-tab:hover span,
.services-page .service-tab:focus-visible span,
.services-page .service-tab:hover i,
.services-page .service-tab:focus-visible i {
  color: #74badc;
}

.services-page .service-tab:hover i,
.services-page .service-tab:focus-visible i {
  transform: translate(2px, -2px);
}

.services-page .service-tab.active {
  padding-left: 20px;
  color: #f2f7fa;
  background: linear-gradient(90deg, rgba(74, 146, 187, .2), rgba(32, 66, 91, .085) 68%, transparent);
}

.services-page .service-tab.active::before {
  opacity: 1;
  transform: scaleY(1);
}

.services-page .service-tab.active::after {
  opacity: 1;
  transform: translateX(0);
}

.services-page .service-tab.active span,
.services-page .service-tab.active i {
  color: #8bd3ef;
}

.services-page .service-tab.active b {
  color: #f7fbfd;
}

.services-page .service-panel {
  position: relative;
  z-index: 1;
  min-height: 510px;
  margin: 0;
  overflow: visible;
  padding: clamp(38px, 4.4vw, 58px) clamp(30px, 4vw, 54px);
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse 74% 72% at 74% 28%, rgba(60, 139, 181, .13), transparent 72%),
    linear-gradient(118deg, rgba(8, 25, 40, .58), rgba(7, 23, 38, .28) 54%, rgba(7, 21, 35, .48));
  box-shadow: inset 0 1px 0 rgba(142, 211, 236, .075), 0 34px 72px -58px rgba(1, 9, 18, .8);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.services-page .service-panel::before,
.services-page .service-panel::after {
  position: absolute;
  z-index: 2;
  width: clamp(52px, 7vw, 88px);
  height: clamp(34px, 5vw, 58px);
  content: '';
  pointer-events: none;
}

.services-page .service-panel::before {
  top: 10px;
  left: 0;
  border-top: 1px solid rgba(128, 215, 241, .66);
  border-left: 1px solid rgba(128, 215, 241, .42);
}

.services-page .service-panel::after {
  right: 0;
  bottom: 12px;
  border-right: 1px solid rgba(83, 155, 210, .42);
  border-bottom: 1px solid rgba(83, 155, 210, .56);
}

.services-page .service-panel-content {
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  max-width: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.services-page .service-panel-content::before {
  position: absolute;
  top: -24%;
  right: -12%;
  bottom: -18%;
  left: 18%;
  z-index: -1;
  opacity: .72;
  background:
    radial-gradient(ellipse 58% 58% at 58% 36%, rgba(93, 188, 221, .14), transparent 72%),
    radial-gradient(ellipse 42% 52% at 80% 66%, rgba(182, 217, 230, .07), transparent 74%);
  content: '';
  pointer-events: none;
  filter: blur(18px);
}

.services-page .service-panel-content::after {
  position: absolute;
  top: 4px;
  right: 0;
  width: 1px;
  height: 32%;
  background: linear-gradient(rgba(118, 207, 237, .46), transparent);
  content: '';
  pointer-events: none;
}

.services-page .service-panel.is-changing .service-panel-content {
  opacity: 0;
  transform: translateY(6px);
}

.services-page .service-panel-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.services-page .service-panel-top::after {
  width: clamp(34px, 7vw, 82px);
  height: 1px;
  background: linear-gradient(90deg, rgba(106, 198, 233, .62), transparent);
  content: '';
}

.services-page .service-number {
  color: #95d9f1;
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .1em;
}

.services-page .service-status {
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid rgba(117, 198, 231, .34);
  border-radius: 0;
  background: transparent;
  color: rgba(161, 207, 230, .72);
  font-family: var(--font-family-mono);
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.services-page .service-status::before {
  margin-right: 10px;
  color: rgba(134, 197, 225, .55);
  content: '/';
}

.services-page .service-panel h2 {
  max-width: 720px;
  margin: 0 0 22px;
  color: #f1f6f9;
  font-size: clamp(38px, 4.1vw, 58px);
  font-weight: 650;
  hyphens: none;
  letter-spacing: 0;
  line-height: 1.06;
  overflow-wrap: normal;
  word-break: normal;
}

.services-page .service-panel h2 em {
  color: #79c4e7;
  font-family: Georgia, serif;
  font-size: 1.03em;
  font-style: italic;
  font-weight: 600;
}

.services-page .service-title-signal {
  position: relative;
  display: inline-block;
  padding-bottom: .12em;
}

.services-page .service-title-signal::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, #72bddf, rgba(114, 189, 223, .12));
  content: '';
}

.services-page .service-description {
  max-width: 620px;
  margin: 0 0 38px;
  color: rgba(218, 231, 239, .78);
  font-size: 15px;
  line-height: 1.72;
}

.services-page .service-columns {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 52px);
  padding-top: 26px;
  border-top: 1px solid rgba(140, 188, 211, .13);
}

.services-page .service-columns > div {
  position: relative;
  min-width: 0;
}

.services-page .service-columns > div + div::before {
  position: absolute;
  top: 3px;
  bottom: 8px;
  left: calc(clamp(28px, 4vw, 52px) / -2);
  width: 1px;
  background: linear-gradient(rgba(117, 183, 215, .18), transparent 88%);
  content: '';
}

.services-page .service-columns h3 {
  margin: 0 0 10px;
  color: rgba(232, 241, 246, .9);
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.services-page .service-details-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.services-page .service-details-list li {
  position: relative;
  display: block;
  width: auto;
  margin: 0;
  padding: 6px 0 6px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(218, 231, 238, .8);
  font-size: 13px;
  line-height: 1.45;
}

.services-page .service-details-list li::before {
  position: absolute;
  top: 1.08em;
  left: 0;
  width: 10px;
  height: 1px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(112, 199, 229, .82);
  content: '';
  transition: width 220ms ease, background-color 220ms ease;
}

.services-page .service-details-list li:hover::before {
  width: 16px;
  background: #84cdea;
}

@media screen and (max-width: 1100px) {
  .services-page .service-catalog {
    padding-bottom: 68px;
  }

  .services-page .catalog-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .services-page .service-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-page .service-tab {
    min-height: 66px;
  }

  .services-page .service-tab::after {
    display: none;
  }

  .services-page .service-panel {
    min-height: 500px;
    padding: 36px 32px;
  }
}

@media screen and (max-width: 700px) {
  .services-page .service-catalog {
    padding: 30px 0 62px;
  }

  .services-page .catalog-heading {
    display: grid;
    gap: 8px;
    margin-bottom: 22px;
  }

  .services-page .catalog-heading .section-kicker {
    font-size: 17px;
  }

  .services-page .service-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .services-page .service-tab {
    grid-template-columns: 34px minmax(0, 1fr) 22px;
    min-height: 64px;
    padding-inline: 10px;
  }

  .services-page .service-tab:hover,
  .services-page .service-tab:focus-visible,
  .services-page .service-tab.active {
    padding-left: 14px;
  }

  .services-page .service-panel {
    min-height: 0;
    padding: 28px 16px 30px;
  }

  .services-page .service-panel-content::after,
  .services-page .service-columns > div + div::before {
    display: none;
  }

  .services-page .service-panel h2 {
    font-size: clamp(29px, 9vw, 38px);
  }

  .services-page .service-description {
    margin-bottom: 28px;
    font-size: 14px;
  }

  .services-page .service-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-top: 22px;
  }

  .services-page .service-details-list li {
    padding-block: 8px;
    padding-left: 22px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-page .service-tab,
  .services-page .service-tab::before,
  .services-page .service-tab::after,
  .services-page .service-tab span,
  .services-page .service-tab i,
  .services-page .service-panel-content {
    transition: none;
  }

  .services-page .service-details-list li::before,
  .services-page .process-list li span {
    transition: none;
  }
}

.process-section { padding: 0 0 94px; }.process-section h2 { margin-bottom: 34px; font-size: 30px; }.process-list { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }.process-list::before { position: absolute; top: 14px; right: 12%; left: 0; height: 1px; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), transparent); content: ''; }.process-list li { position: relative; display: grid; gap: 16px; color: var(--color-text); }.process-list li span { width: 29px; height: 29px; padding-top: 7px; border: 1px solid rgba(56,189,248,.5); border-radius: 50%; background: var(--color-bg-secondary); color: var(--color-accent-cyan); font: 10px var(--font-family-mono); text-align: center; }.process-list li b { font-size: 14px; font-weight: 600; }

.services-page .process-section {
  isolation: isolate;
  padding: 8px 0 96px;
}

.services-page .process-section .container {
  position: relative;
  z-index: 1;
}

.services-page .process-section h2 {
  max-width: 760px;
  margin-bottom: 58px;
  color: #f4f8fa;
  font-size: clamp(36px, 3.6vw, 50px);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.04;
}

.services-page .footer,
.portfolio-page .footer,
.contact-page .footer {
  margin-top: 0;
}

.services-page .footer::before,
.services-page .footer::after,
.portfolio-page .footer::before,
.portfolio-page .footer::after,
.contact-page .footer::before,
.contact-page .footer::after {
  display: none;
}

.services-page .process-section h2 span {
  font-family: var(--font-family-base);
  font-style: normal;
}

.services-page .process-section h2 em {
  color: #83ccec;
  font-family: Georgia, serif;
  font-size: 1.08em;
  font-style: italic;
  font-weight: 600;
}

.services-page .process-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  padding: 8px 0 14px;
  background:
    radial-gradient(ellipse 17% 76% at 2% 24%, rgba(80, 151, 194, .11), transparent 72%),
    radial-gradient(ellipse 19% 80% at 28% 40%, rgba(93, 192, 224, .11), transparent 72%),
    radial-gradient(ellipse 19% 80% at 53% 27%, rgba(91, 184, 220, .1), transparent 72%),
    radial-gradient(ellipse 20% 82% at 78% 42%, rgba(111, 210, 237, .13), transparent 72%);
}

.services-page .process-list::before {
  display: none;
}

.services-page .process-list li {
  --route-angle: 0deg;
  --route-delay: 0ms;
  --route-end-rgb: 125, 235, 255;
  --route-start-rgb: 125, 235, 255;
  --step-delay: 0ms;
  --step-ink: #e4faff;
  --step-rgb: 125, 235, 255;
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  margin-top: var(--step-offset, 0);
  gap: 0;
  padding-right: clamp(20px, 2.8vw, 42px);
}

.services-page .process-list li:nth-child(1) {
  --route-angle: 3.2deg;
  --route-delay: 35ms;
  --route-end-rgb: 95, 157, 255;
  --route-start-rgb: 125, 235, 255;
  --step-offset: 0px;
  --step-rgb: 125, 235, 255;
}

.services-page .process-list li:nth-child(2) {
  --route-angle: -2.8deg;
  --route-delay: 100ms;
  --route-end-rgb: 122, 124, 255;
  --route-start-rgb: 95, 157, 255;
  --step-delay: 65ms;
  --step-ink: #e3edff;
  --step-offset: 14px;
  --step-rgb: 95, 157, 255;
}

.services-page .process-list li:nth-child(3) {
  --route-angle: 3.2deg;
  --route-delay: 165ms;
  --route-end-rgb: 143, 234, 255;
  --route-start-rgb: 122, 124, 255;
  --step-delay: 130ms;
  --step-ink: #e9e9ff;
  --step-offset: 2px;
  --step-rgb: 122, 124, 255;
}

.services-page .process-list li:nth-child(4) {
  --route-delay: 230ms;
  --route-end-rgb: 143, 234, 255;
  --route-start-rgb: 143, 234, 255;
  --step-delay: 195ms;
  --step-ink: #f2fcff;
  --step-offset: 16px;
  --step-rgb: 143, 234, 255;
}

.services-page .process-list li::before {
  position: absolute;
  top: 21px;
  left: 21px;
  z-index: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(118, 214, 242, .82), rgba(83, 145, 205, .46));
  content: '';
  opacity: .48;
  pointer-events: none;
  transform: rotate(var(--route-angle));
  transform-origin: left center;
  transition: opacity 260ms cubic-bezier(.22, 1, .36, 1), background 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms cubic-bezier(.22, 1, .36, 1);
}

.services-page .process-list li:last-child::before {
  width: clamp(58px, 7vw, 92px);
  background: linear-gradient(90deg, rgba(130, 225, 248, .9), rgba(103, 184, 223, .18));
}

.services-page .process-list li:last-child::after {
  position: absolute;
  top: 17px;
  left: calc(21px + clamp(58px, 7vw, 92px));
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(150, 229, 248, .74);
  border-right: 1px solid rgba(150, 229, 248, .74);
  content: '';
  opacity: .44;
  pointer-events: none;
  transform: rotate(45deg);
  transition: border-color 260ms cubic-bezier(.22, 1, .36, 1), filter 260ms cubic-bezier(.22, 1, .36, 1), opacity 260ms cubic-bezier(.22, 1, .36, 1);
}

.services-page .process-list li:not(:last-child)::after {
  position: absolute;
  top: 20.5px;
  left: 21px;
  z-index: 1;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(247, 253, 255, .98), transparent) -45% 0 / 34% 100% no-repeat;
  content: '';
  opacity: 0;
  pointer-events: none;
  transform: rotate(var(--route-angle));
  transform-origin: left center;
}

.services-page .process-list li span {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 0 24px;
  padding: 0;
  border-color: rgba(128, 213, 239, .76);
  background:
    radial-gradient(circle at 38% 34%, rgba(131, 215, 240, .18), transparent 42%),
    rgba(7, 27, 44, .9);
  box-shadow: inset 0 0 0 4px rgba(111, 199, 229, .045), 0 0 18px rgba(47, 138, 186, .12);
  color: #a7e3f5;
  font: 650 11px var(--font-family-mono);
  letter-spacing: .06em;
  transition: border-color 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms cubic-bezier(.22, 1, .36, 1), color 260ms cubic-bezier(.22, 1, .36, 1);
}

.services-page .process-list li span::after {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  width: 1px;
  height: 15px;
  background: linear-gradient(rgba(116, 204, 234, .48), transparent);
  content: '';
  opacity: .72;
  pointer-events: none;
  transition: opacity 260ms cubic-bezier(.22, 1, .36, 1), background 260ms cubic-bezier(.22, 1, .36, 1);
}

.services-page .process-list li span::before {
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(var(--step-rgb), .72);
  border-radius: 50%;
  content: '';
  opacity: 0;
  pointer-events: none;
}

.services-page .process-list li b {
  margin-bottom: 10px;
  color: rgba(244, 249, 251, .96);
  font-size: clamp(16px, 1.45vw, 19px);
  font-weight: 650;
  hyphens: none;
  line-height: 1.3;
  overflow-wrap: normal;
  transition: color 260ms cubic-bezier(.22, 1, .36, 1), transform 260ms cubic-bezier(.22, 1, .36, 1);
  word-break: normal;
}

.services-page .process-list li small {
  max-width: min(92%, 250px);
  color: rgba(207, 222, 231, .76);
  font-size: 13.5px;
  line-height: 1.58;
  overflow-wrap: break-word;
  transition: color 260ms cubic-bezier(.22, 1, .36, 1), transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.services-page .process-list li:last-child span {
  border-color: rgba(151, 227, 247, .94);
  background:
    radial-gradient(circle at 38% 34%, rgba(149, 228, 247, .27), transparent 44%),
    rgba(8, 33, 52, .94);
  box-shadow: inset 0 0 0 4px rgba(127, 215, 239, .065), 0 0 22px rgba(67, 169, 211, .18);
  color: #c3eef9;
}

@media (hover: hover) and (pointer: fine) {
  .services-page .process-list:has(> li:nth-child(2):hover) {
    --process-pulse-name: services-route-pulse-2;
  }

  .services-page .process-list:has(> li:nth-child(3):hover) {
    --process-pulse-name: services-route-pulse-3;
  }

  .services-page .process-list:has(> li:nth-child(4):hover) {
    --process-pulse-name: services-route-pulse-4;
  }

  .services-page .process-list:has(> li:nth-child(1):hover) > li:nth-child(1) span,
  .services-page .process-list:has(> li:nth-child(2):hover) > li:nth-child(-n+2) span,
  .services-page .process-list:has(> li:nth-child(3):hover) > li:nth-child(-n+3) span,
  .services-page .process-list:has(> li:nth-child(4):hover) > li:nth-child(-n+4) span {
    border-color: rgba(var(--step-rgb), .98);
    box-shadow: inset 0 0 0 4px rgba(var(--step-rgb), .09), 0 0 24px rgba(var(--step-rgb), .28);
    color: var(--step-ink);
    transition-delay: var(--step-delay);
  }

  .services-page .process-list:has(> li:nth-child(1):hover) > li:nth-child(1) span::after,
  .services-page .process-list:has(> li:nth-child(2):hover) > li:nth-child(-n+2) span::after,
  .services-page .process-list:has(> li:nth-child(3):hover) > li:nth-child(-n+3) span::after,
  .services-page .process-list:has(> li:nth-child(4):hover) > li:nth-child(-n+4) span::after {
    background: linear-gradient(rgba(var(--step-rgb), .82), transparent);
    opacity: 1;
    transition-delay: var(--step-delay);
  }

  .services-page .process-list:has(> li:nth-child(2):hover) > li:nth-child(1)::before,
  .services-page .process-list:has(> li:nth-child(3):hover) > li:nth-child(-n+2)::before,
  .services-page .process-list:has(> li:nth-child(4):hover) > li:nth-child(-n+4)::before {
    opacity: 1;
    background: linear-gradient(90deg, rgba(var(--route-start-rgb), .98), rgba(var(--route-end-rgb), .88));
    box-shadow: 0 0 3px rgba(var(--route-start-rgb), .56), 0 0 13px rgba(var(--route-end-rgb), .3);
    transition-delay: var(--route-delay);
  }

  .services-page .process-list:has(> li:nth-child(2):hover) > li:nth-child(1)::after,
  .services-page .process-list:has(> li:nth-child(3):hover) > li:nth-child(-n+2)::after,
  .services-page .process-list:has(> li:nth-child(4):hover) > li:nth-child(-n+3)::after {
    animation: var(--process-pulse-name) 430ms cubic-bezier(.2, .72, .28, 1) var(--route-delay) 1 both;
  }

  .services-page .process-list:has(> li:nth-child(1):hover) > li:nth-child(1) b,
  .services-page .process-list:has(> li:nth-child(2):hover) > li:nth-child(-n+2) b,
  .services-page .process-list:has(> li:nth-child(3):hover) > li:nth-child(-n+3) b,
  .services-page .process-list:has(> li:nth-child(4):hover) > li:nth-child(-n+4) b {
    color: rgba(249, 252, 254, .98);
    transition-delay: var(--step-delay);
  }

  .services-page .process-list:has(> li:nth-child(1):hover) > li:nth-child(1) small,
  .services-page .process-list:has(> li:nth-child(2):hover) > li:nth-child(-n+2) small,
  .services-page .process-list:has(> li:nth-child(3):hover) > li:nth-child(-n+3) small,
  .services-page .process-list:has(> li:nth-child(4):hover) > li:nth-child(-n+4) small {
    color: rgba(220, 233, 240, .84);
    transition-delay: var(--step-delay);
  }

  .services-page .process-list li:hover b,
  .services-page .process-list li:hover small {
    transform: translateY(-2px);
    transition-delay: 0ms;
  }

  .services-page .process-list li:hover b {
    color: #fff;
  }

  .services-page .process-list li:hover small {
    color: rgba(231, 240, 245, .9);
  }

  .services-page .process-list li:hover span {
    border-color: rgba(var(--step-rgb), 1);
    box-shadow: inset 0 0 0 4px rgba(var(--step-rgb), .13), 0 0 30px rgba(var(--step-rgb), .4);
    transition-delay: 0ms;
  }

  .services-page .process-list li:hover span::before {
    animation: services-node-arrival 480ms cubic-bezier(.2, .72, .28, 1) 1 both;
  }

  .services-page .process-list:has(> li:nth-child(4):hover) > li:last-child::after {
    border-color: rgba(var(--step-rgb), 1);
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(var(--step-rgb), .72)) drop-shadow(0 0 8px rgba(var(--step-rgb), .3));
    transition-delay: var(--route-delay);
  }
}

@keyframes services-route-pulse-2 {
  0% { background-position: -45% 0; opacity: 0; }
  18% { opacity: .95; }
  82% { opacity: .95; }
  100% { background-position: 145% 0; opacity: 0; }
}

@keyframes services-route-pulse-3 {
  0% { background-position: -45% 0; opacity: 0; }
  18% { opacity: .95; }
  82% { opacity: .95; }
  100% { background-position: 145% 0; opacity: 0; }
}

@keyframes services-route-pulse-4 {
  0% { background-position: -45% 0; opacity: 0; }
  18% { opacity: .95; }
  82% { opacity: .95; }
  100% { background-position: 145% 0; opacity: 0; }
}

@keyframes services-node-arrival {
  0% { opacity: 0; transform: scale(.84); }
  58% { opacity: .82; transform: scale(1.08); }
  100% { opacity: .34; transform: scale(1); }
}

@media screen and (max-width: 767px) {
  .services-page .process-section {
    padding: 4px 0 64px;
  }

  .services-page .process-section h2 {
    margin-bottom: 34px;
    font-size: clamp(32px, 9.5vw, 42px);
  }

  .services-page .process-list {
    grid-template-columns: minmax(0, 1fr);
    padding: 2px 0 0;
    background:
      radial-gradient(ellipse 82% 26% at 22% 10%, rgba(70, 155, 197, .12), transparent 76%),
      linear-gradient(90deg, rgba(3, 14, 27, .32), rgba(3, 14, 27, .08) 72%, transparent);
  }

  .services-page .process-list li,
  .services-page .process-list li:nth-child(n) {
    --step-offset: 0px;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    column-gap: 18px;
    row-gap: 7px;
    margin-top: 0;
    padding: 0 0 28px;
  }

  .services-page .process-list li:last-child {
    padding-bottom: 0;
  }

  .services-page .process-list li::before,
  .services-page .process-list li:last-child::before {
    top: 21px;
    left: 21px;
    width: 1px;
    height: 100%;
    background: linear-gradient(rgba(116, 207, 237, .72), rgba(72, 135, 190, .3));
    transform: none;
  }

  .services-page .process-list li:last-child::before {
    height: 24px;
    background: linear-gradient(rgba(130, 225, 248, .88), transparent);
  }

  .services-page .process-list li:last-child::after {
    display: none;
  }

  .services-page .process-list li span {
    grid-row: 1 / span 2;
    margin: 0;
  }

  .services-page .process-list li span::after {
    display: none;
  }

  .services-page .process-list li b,
  .services-page .process-list li small {
    grid-column: 2;
    min-width: 0;
  }

  .services-page .process-list li b {
    margin: 1px 0 0;
    font-size: 17px;
  }

  .services-page .process-list li small {
    max-width: 34rem;
    font-size: 13px;
    line-height: 1.52;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-page .process-list li::before,
  .services-page .process-list li::after,
  .services-page .process-list li span,
  .services-page .process-list li span::before,
  .services-page .process-list li span::after,
  .services-page .process-list li b,
  .services-page .process-list li small {
    transition: none;
  }

  .services-page .process-list li::after,
  .services-page .process-list li span::before {
    animation: none;
  }

  .services-page .process-list li:hover b,
  .services-page .process-list li:hover small {
    transform: none;
  }
}

@media screen and (max-width: 700px) {
  .services-page .services-intro::after {
    height: 60px;
  }

  .services-page .process-section {
    padding-bottom: 56px;
  }

  .services-page .services-formats-stage {
    background-position: 52% center;
  }

  .services-page .services-formats-stage::before {
    background:
      linear-gradient(180deg, #071523 0, rgba(7, 21, 35, .62) 22px, rgba(7, 21, 35, .12) 50px, transparent 64px),
      radial-gradient(ellipse 115% 42% at 42% 18%, rgba(4, 14, 27, .24), transparent 76%),
      linear-gradient(90deg, rgba(3, 12, 24, .2), rgba(5, 17, 31, .07) 58%, rgba(4, 14, 27, .13));
  }

  .services-page .services-formats-stage::after {
    height: 64px;
  }

  .services-page .process-list::before {
    background: linear-gradient(#55b8e8, rgba(79, 134, 216, .08));
  }

  .services-page .service-panel h2 em {
    white-space: normal;
  }

  .services-page .service-panel::before,
  .services-page .service-panel::after {
    width: 24px;
    height: 24px;
  }
}
/* ===== SERVICES / BLUEPRINT SIGNAL FLOW ===== */
.services-page .services-intro,
.services-page .service-catalog {
  --service-light-x: 64%;
  --service-light-y: 42%;
}

.services-page .services-intro-inner {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.services-page .services-intro-inner::before,
.services-page .services-intro-inner::after {
  position: absolute;
  z-index: -1;
  content: '';
  pointer-events: none;
}

.services-page .services-intro-inner::before {
  inset: -190px -24vw -180px -12vw;
  background:
    radial-gradient(ellipse 52% 66% at var(--service-light-x) var(--service-light-y), rgba(126, 213, 245, .21), rgba(47, 126, 185, .08) 45%, transparent 74%),
    linear-gradient(90deg, transparent 8%, rgba(121, 202, 235, .26) 8% 8.08%, transparent 8.14%) 0 0 / 100% 100%,
    linear-gradient(90deg, transparent 43%, rgba(100, 183, 221, .19) 43% 43.06%, transparent 43.12%) 0 0 / 100% 100%,
    linear-gradient(158deg, transparent 56%, rgba(135, 218, 245, .2) 56.08% 56.18%, transparent 56.26%) 0 0 / 100% 100%,
    radial-gradient(circle at 43% 38%, rgba(191, 241, 255, .78) 0 2px, rgba(54, 207, 255, .2) 3px, transparent 7px),
    radial-gradient(circle at 72% 61%, rgba(152, 224, 249, .62) 0 1px, transparent 5px);
  opacity: .7;
  transform: translate3d(-2%, 0, 0) scale(1.03);
}

.services-page .services-intro-inner::after {
  top: -42%;
  bottom: -40%;
  left: -38%;
  width: 42%;
  background: linear-gradient(112deg, transparent 8%, rgba(220, 247, 255, .04) 30%, rgba(134, 213, 241, .18) 50%, rgba(61, 139, 194, .05) 70%, transparent 92%);
  opacity: .4;
  transform: translate3d(-12%, 0, 0) skewX(-8deg);
}

.services-page .services-intro-copy::before,
.services-page .services-intro-copy::after {
  position: absolute;
  z-index: -1;
  content: '';
  pointer-events: none;
}

.services-page .services-intro-copy::before {
  top: -44px;
  left: 0;
  width: min(720px, 72vw);
  height: 1px;
  background: linear-gradient(90deg, rgba(132, 219, 246, .12), rgba(132, 219, 246, .78) 58%, rgba(47, 174, 255, .18) 82%, transparent);
  opacity: .34;
  transform-origin: left center;
}

.services-page .services-intro-copy::after {
  top: -48px;
  left: min(55%, 500px);
  width: 8px;
  height: 8px;
  border: 1px solid rgba(178, 235, 251, .82);
  border-radius: 50%;
  background: rgba(54, 207, 255, .52);
  box-shadow: 0 0 0 4px rgba(47, 174, 255, .08), 0 0 13px rgba(47, 174, 255, .32);
  opacity: .48;
}

.services-page .services-intro .page-marker::before,
.services-page .services-intro .page-marker::after {
  position: absolute;
  content: '';
  pointer-events: none;
}

.services-page .services-intro .page-marker::before {
  right: calc(100% + 18px);
  bottom: 4px;
  width: 58px;
  height: 20px;
  border-top: 1px solid rgba(121, 202, 235, .28);
  border-right: 1px solid rgba(121, 202, 235, .2);
}

.services-page .services-intro .page-marker::after {
  top: calc(100% + 16px);
  right: 0;
  width: 1px;
  height: 66px;
  background: linear-gradient(rgba(134, 218, 245, .72), rgba(47, 174, 255, .12) 62%, transparent);
  opacity: .42;
}

.services-page.services-motion-ready .services-intro-inner::before {
  animation: servicesHeroField 22s ease-in-out 1.1s infinite;
}

.services-page.services-motion-ready .services-intro-inner::after {
  animation: servicesHeroReflection 14.6s ease-in-out 2.1s infinite;
}

.services-page.services-motion-ready .services-intro-copy::before {
  animation: servicesHeroBootLine 2.6s cubic-bezier(.22, .8, .3, 1) .68s 1 both;
}

.services-page.services-motion-ready .services-intro-copy::after {
  animation: servicesHeroBootNode 2.6s ease-out .68s 1 both, servicesHeroNodeIdle 9.6s ease-in-out 3.4s infinite;
}

.services-page.services-motion-ready .services-intro .page-marker::before {
  animation: servicesHeroBranches 2.6s ease-out .68s 1 both;
}

.services-page.services-motion-ready .services-intro .page-marker::after {
  animation: servicesHeroHandoff 2.6s ease-out 1.15s 1 both;
}

.services-page .service-catalog {
  isolation: isolate;
  --service-accent-rgb: 94, 205, 240;
}

.services-page .service-catalog[data-active-service="2"] { --service-accent-rgb: 79, 174, 232; }
.services-page .service-catalog[data-active-service="3"] { --service-accent-rgb: 84, 130, 225; }
.services-page .service-catalog[data-active-service="4"] { --service-accent-rgb: 91, 112, 218; }
.services-page .service-catalog[data-active-service="5"] { --service-accent-rgb: 66, 171, 232; }
.services-page .service-catalog[data-active-service="6"] { --service-accent-rgb: 151, 222, 246; }

.services-page .service-catalog > .container {
  position: relative;
  z-index: 2;
}

.services-page .service-catalog::before,
.services-page .service-catalog::after {
  position: absolute;
  z-index: 0;
  content: '';
  pointer-events: none;
}

.services-page .service-catalog::before {
  inset: -8% -10% -4%;
  background:
    radial-gradient(ellipse 43% 54% at var(--service-light-x) var(--service-light-y), rgba(var(--service-accent-rgb), .2), rgba(35, 104, 157, .07) 46%, transparent 76%),
    linear-gradient(124deg, transparent 18%, rgba(115, 206, 238, .12) 42%, rgba(47, 121, 179, .035) 59%, transparent 78%),
    linear-gradient(90deg, transparent 12%, rgba(119, 205, 235, .18) 12% 12.06%, transparent 12.12%) 0 0 / 100% 100%,
    linear-gradient(156deg, transparent 66%, rgba(94, 183, 222, .16) 66.08% 66.16%, transparent 66.24%) 0 0 / 100% 100%,
    radial-gradient(circle at 33% 31%, rgba(151, 225, 248, .62) 0 1.5px, transparent 5px),
    radial-gradient(circle at 68% 72%, rgba(101, 194, 229, .52) 0 1px, transparent 5px);
  opacity: .62;
  transform: translate3d(-3%, 0, 0) scale(1.04);
}

.services-page .service-catalog::after {
  top: 18%;
  bottom: 8%;
  left: -44%;
  width: 44%;
  background: linear-gradient(102deg, transparent 2%, rgba(131, 217, 245, .06) 23%, rgba(176, 235, 251, .24) 50%, rgba(63, 153, 205, .08) 76%, transparent 98%);
  opacity: 0;
  transform: translate3d(0, 0, 0) skewX(-7deg);
}

.services-page .services-catalog-active::before {
  animation: servicesCatalogField 18.8s ease-in-out infinite;
}

.services-page .services-catalog-active::after {
  animation: servicesLightCorridor 11.6s ease-in-out 1.2s infinite;
}

.services-page .service-catalog.service-channel-pulse::after {
  animation: servicesLightCorridorBurst 620ms cubic-bezier(.2, .72, .28, 1) 1 both;
}

.services-page .catalog-heading {
  position: relative;
}

.services-page .catalog-heading::before,
.services-page .catalog-heading::after {
  position: absolute;
  content: '';
  pointer-events: none;
}

.services-page .catalog-heading::before {
  top: -15px;
  left: 0;
  width: clamp(90px, 15vw, 210px);
  height: 1px;
  background: linear-gradient(90deg, rgba(117, 207, 237, .68), rgba(117, 207, 237, .12), transparent);
  opacity: .48;
}

.services-page .catalog-heading::after {
  top: -18px;
  left: clamp(88px, 14.8vw, 207px);
  width: 6px;
  height: 6px;
  border: 1px solid rgba(133, 220, 246, .7);
  border-radius: 50%;
  background: #0a1c2d;
  box-shadow: 0 0 9px rgba(47, 174, 255, .28);
}

.services-page .catalog-layout {
  position: relative;
}

.services-page .catalog-layout::before,
.services-page .catalog-layout::after {
  position: absolute;
  z-index: 0;
  content: '';
  pointer-events: none;
}

.services-page .catalog-layout::before {
  top: -18px;
  right: 7%;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91, 181, 222, .24), rgba(151, 224, 247, .5));
  opacity: .58;
}

.services-page .catalog-layout::after {
  top: -21px;
  right: 7%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(var(--service-accent-rgb), .72);
  border-radius: 50%;
  background: rgba(8, 26, 42, .92);
  box-shadow: 0 0 10px rgba(var(--service-accent-rgb), .28);
  transition: border-color 240ms ease, box-shadow 240ms ease;
}

.services-page .service-list::before,
.services-page .service-list::after {
  position: absolute;
  z-index: 1;
  left: 1px;
  width: 1px;
  content: '';
  pointer-events: none;
}

.services-page .service-list::before {
  top: 8%;
  bottom: 8%;
  background: linear-gradient(transparent, rgba(94, 188, 225, .32) 18%, rgba(94, 188, 225, .18) 82%, transparent);
}

.services-page .service-list::after {
  top: 8%;
  height: 54px;
  background: linear-gradient(transparent, rgba(var(--service-accent-rgb), .96), transparent);
  opacity: .24;
}

.services-page .services-catalog-active .service-list::after {
  animation: servicesListCurrent 10.8s ease-in-out 1.4s infinite;
}

.services-page .service-tab:hover::after,
.services-page .service-tab:focus-visible::after {
  opacity: .58;
  transform: translateX(0);
}

.services-page .service-channel-pulse .service-tab.active::after {
  animation: servicesChannelTransmit 560ms cubic-bezier(.2, .72, .28, 1) 1 both;
}

.services-page .service-catalog .service-tab.active span,
.services-page .service-catalog .service-tab.active i {
  color: rgb(var(--service-accent-rgb));
}

.services-page .service-catalog .service-tab.active::after {
  background:
    radial-gradient(circle 3px at calc(100% - 2px) 50%, rgba(var(--service-accent-rgb), .94) 0 40%, rgba(var(--service-accent-rgb), .2) 44% 72%, transparent 76%),
    linear-gradient(90deg, rgba(var(--service-accent-rgb), .7), rgba(var(--service-accent-rgb), .1) 72%, transparent) left center / calc(100% - 4px) 1px no-repeat;
}

.services-page .service-channel-pulse .service-tab.active span {
  animation: servicesActiveNumber 620ms ease-out 1 both;
}

.services-page .services-catalog-active .service-panel::before {
  animation: servicesFrameDrawTop 720ms cubic-bezier(.2, .72, .28, 1) 160ms 1 both;
}

.services-page .services-catalog-active .service-panel::after {
  animation: servicesFrameDrawBottom 720ms cubic-bezier(.2, .72, .28, 1) 260ms 1 both;
}

.services-page .catalog-layout:has(.service-tab:hover) .service-panel::before,
.services-page .catalog-layout:has(.service-tab:focus-visible) .service-panel::before {
  border-color: rgba(var(--service-accent-rgb), .82);
  filter: drop-shadow(0 0 5px rgba(var(--service-accent-rgb), .18));
}

.services-page .service-panel.service-signal-active .service-panel-content::before {
  animation: servicesPanelBloom 620ms cubic-bezier(.2, .72, .28, 1) 1 both;
}

.services-page .service-panel.service-signal-active .service-panel-content::after {
  animation: servicesPanelNode 620ms ease-out 1 both;
}

.services-page .process-section {
  position: relative;
  overflow: hidden;
}

.services-page .process-section::before,
.services-page .process-section::after {
  position: absolute;
  z-index: 0;
  inset: -18% -8% -14%;
  content: '';
  pointer-events: none;
}

.services-page .process-section::before {
  background: radial-gradient(ellipse 58% 68% at 18% 45%, rgba(76, 181, 224, .18), rgba(51, 119, 180, .07) 48%, transparent 76%);
  opacity: .52;
  transform: translate3d(-5%, 0, 0) scale(1.04);
}

.services-page .process-section::after {
  background:
    radial-gradient(ellipse 23% 58% at 5% 44%, rgba(82, 210, 245, .2), transparent 74%),
    radial-gradient(ellipse 25% 62% at 34% 52%, rgba(83, 164, 231, .2), transparent 74%),
    radial-gradient(ellipse 25% 62% at 64% 43%, rgba(91, 121, 224, .2), transparent 74%),
    radial-gradient(ellipse 25% 62% at 92% 51%, rgba(139, 225, 248, .22), transparent 74%);
  opacity: .1;
}

.services-page .services-process-active::before {
  animation: servicesProcessFlow 18.6s ease-in-out infinite;
}

.services-page .services-process-active::after {
  animation: servicesProcessEnvironment 12.8s ease-out 1.75s infinite;
}

.services-page .process-section h2 {
  position: relative;
}

.services-page .process-section h2::after {
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 90px;
  height: 7px;
  background:
    radial-gradient(circle 3px at 3px 50%, rgba(186, 239, 253, .9) 0 52%, rgba(54, 207, 255, .18) 58% 100%, transparent),
    linear-gradient(90deg, rgba(126, 216, 243, .74), transparent) 6px 50% / 84px 1px no-repeat;
  content: '';
  opacity: .46;
}

.services-page .services-process-active h2::after {
  animation: servicesProcessReceive 820ms ease-out 120ms 1 both;
}

.services-page .process-section .container::after {
  position: absolute;
  right: 0;
  bottom: -42px;
  width: 116px;
  height: 9px;
  background:
    radial-gradient(circle 3px at calc(100% - 3px) 50%, rgba(203, 246, 255, .92) 0 50%, rgba(54, 207, 255, .18) 58% 100%, transparent),
    linear-gradient(90deg, transparent, rgba(121, 211, 240, .68)) 0 50% / calc(100% - 7px) 1px no-repeat;
  content: '';
  opacity: .26;
  pointer-events: none;
}

.services-page .services-process-active .container::after {
  animation: servicesFinalEndpoint 1s ease-out 4.1s 1 both;
}

.services-page .process-list li:nth-child(1) { --motion-delay: 0s; }
.services-page .process-list li:nth-child(2) { --motion-delay: .68s; }
.services-page .process-list li:nth-child(3) { --motion-delay: 1.36s; }
.services-page .process-list li:nth-child(4) { --motion-delay: 2.04s; }

.services-page .services-process-active .process-list li:not(:last-child)::after {
  animation: servicesProcessPacket 12.8s cubic-bezier(.2, .72, .28, 1) calc(1.75s + var(--motion-delay)) infinite;
}

.services-page .services-process-active .process-list li span {
  animation: servicesProcessNode 12.8s ease-out calc(1.75s + var(--motion-delay)) infinite;
}

.services-page .services-process-active .process-list li span::before {
  animation: servicesProcessNodeRing 12.8s ease-out calc(1.75s + var(--motion-delay)) infinite;
}

.services-page .services-process-active .process-list li:last-child::after {
  animation: servicesProcessTerminal 12.8s ease-out 3.79s infinite;
}

@keyframes servicesHeroField {
  0%, 100% { opacity: .58; transform: translate3d(-3%, 0, 0) scale(1.03); }
  42% { opacity: .82; transform: translate3d(3%, -1%, 0) scale(1.07); }
  72% { opacity: .66; transform: translate3d(6%, 1%, 0) scale(1.04); }
}

@keyframes servicesHeroReflection {
  0%, 100% { opacity: .12; transform: translate3d(-12%, 0, 0) skewX(-8deg); }
  38% { opacity: .52; transform: translate3d(215%, 0, 0) skewX(-8deg); }
  52% { opacity: 0; transform: translate3d(278%, 0, 0) skewX(-8deg); }
}

@keyframes servicesHeroBootLine {
  0% { opacity: .08; transform: scaleX(.04); }
  35% { opacity: .88; transform: scaleX(1); }
  68% { opacity: .56; transform: scaleX(1); }
  100% { opacity: .3; transform: scaleX(1); }
}

@keyframes servicesHeroBootNode {
  0%, 28% { opacity: .18; transform: scale(.62); }
  44% { opacity: 1; transform: scale(1.52); }
  62% { opacity: .74; transform: scale(1); }
  100% { opacity: .48; transform: scale(1); }
}

@keyframes servicesHeroNodeIdle {
  0%, 100% { opacity: .38; box-shadow: 0 0 0 4px rgba(47, 174, 255, .06), 0 0 10px rgba(47, 174, 255, .22); }
  52% { opacity: .72; box-shadow: 0 0 0 6px rgba(47, 174, 255, .1), 0 0 17px rgba(47, 174, 255, .38); }
}

@keyframes servicesHeroBranches {
  0%, 46% { opacity: 0; transform: scaleX(.12); transform-origin: right center; }
  64% { opacity: .78; transform: scaleX(1); }
  100% { opacity: .3; transform: scaleX(1); }
}

@keyframes servicesHeroHandoff {
  0%, 38% { opacity: 0; transform: scaleY(.08); transform-origin: top; }
  68% { opacity: .82; transform: scaleY(1); }
  100% { opacity: .38; transform: scaleY(1); }
}

@keyframes servicesCatalogField {
  0%, 100% { opacity: .5; transform: translate3d(-3%, 0, 0) scale(1.04); }
  43% { opacity: .78; transform: translate3d(4%, -1%, 0) scale(1.07); }
  72% { opacity: .6; transform: translate3d(7%, 1%, 0) scale(1.04); }
}

@keyframes servicesLightCorridor {
  0%, 8%, 32%, 100% { opacity: 0; transform: translate3d(0, 0, 0) skewX(-7deg); }
  13% { opacity: .42; }
  25% { opacity: .2; transform: translate3d(345%, 0, 0) skewX(-7deg); }
  29% { opacity: 0; transform: translate3d(390%, 0, 0) skewX(-7deg); }
}

@keyframes servicesLightCorridorBurst {
  0% { opacity: 0; transform: translate3d(64%, 0, 0) skewX(-7deg) scaleX(.62); }
  34% { opacity: .58; }
  100% { opacity: 0; transform: translate3d(285%, 0, 0) skewX(-7deg) scaleX(1); }
}

@keyframes servicesListCurrent {
  0%, 100% { opacity: .12; transform: translateY(0); }
  42% { opacity: .68; transform: translateY(470%); }
  58% { opacity: .16; transform: translateY(620%); }
}

@keyframes servicesChannelTransmit {
  0% { opacity: .18; transform: translateX(-8px) scaleX(.2); transform-origin: left; }
  46% { opacity: 1; transform: translateX(0) scaleX(1); }
  100% { opacity: .62; transform: translateX(0) scaleX(1); }
}

@keyframes servicesActiveNumber {
  0%, 100% { text-shadow: none; }
  42% { color: #e7fbff; text-shadow: 0 0 12px rgba(var(--service-accent-rgb), .72); }
}

@keyframes servicesFrameDrawTop {
  0% { opacity: .1; clip-path: inset(0 100% 100% 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes servicesFrameDrawBottom {
  0% { opacity: .1; clip-path: inset(100% 0 0 100%); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes servicesPanelBloom {
  0% { opacity: .32; transform: translate3d(12%, -8%, 0) scale(.88); }
  44% { opacity: .94; transform: translate3d(0, 2%, 0) scale(1.04); }
  100% { opacity: .72; transform: translate3d(-4%, 10%, 0) scale(1); }
}

@keyframes servicesPanelNode {
  0% { opacity: .2; box-shadow: 0 0 0 rgba(var(--service-accent-rgb), 0); }
  42% { opacity: 1; box-shadow: 0 0 12px rgba(var(--service-accent-rgb), .58); }
  100% { opacity: .46; box-shadow: 0 0 0 rgba(var(--service-accent-rgb), 0); }
}

@keyframes servicesProcessFlow {
  0%, 100% { opacity: .38; transform: translate3d(-6%, 0, 0) scale(1.03); }
  46% { opacity: .7; transform: translate3d(8%, -1%, 0) scale(1.08); }
  72% { opacity: .5; transform: translate3d(14%, 1%, 0) scale(1.04); }
}

@keyframes servicesProcessEnvironment {
  0%, 4%, 28%, 100% { opacity: .08; background-position: 0 0; }
  7% { opacity: .42; background-position: -2% 0; }
  12% { opacity: .54; background-position: 8% 0; }
  17% { opacity: .62; background-position: 17% 0; }
  22% { opacity: .7; background-position: 25% 0; }
  27% { opacity: .14; background-position: 30% 0; }
}

@keyframes servicesProcessReceive {
  0% { opacity: .12; transform: scaleX(.1); transform-origin: left; }
  52% { opacity: .94; transform: scaleX(1); }
  100% { opacity: .48; transform: scaleX(1); }
}

@keyframes servicesProcessPacket {
  0%, 2%, 9%, 100% { background-position: -45% 0; opacity: 0; }
  3.2% { opacity: 1; }
  7.4% { background-position: 145% 0; opacity: .9; }
  8.6% { background-position: 160% 0; opacity: 0; }
}

@keyframes servicesProcessNode {
  0%, 1%, 10%, 100% { border-color: rgba(128, 213, 239, .76); box-shadow: inset 0 0 0 4px rgba(111, 199, 229, .045), 0 0 18px rgba(47, 138, 186, .12); }
  3% { border-color: rgba(var(--step-rgb), 1); box-shadow: inset 0 0 0 4px rgba(var(--step-rgb), .14), 0 0 31px rgba(var(--step-rgb), .46); }
  6.6% { border-color: rgba(var(--step-rgb), .9); box-shadow: inset 0 0 0 4px rgba(var(--step-rgb), .08), 0 0 23px rgba(var(--step-rgb), .26); }
}

@keyframes servicesProcessNodeRing {
  0%, 1%, 100% { opacity: 0; transform: scale(.72); }
  3% { opacity: .9; }
  7.5% { opacity: 0; transform: scale(1.44); }
}

@keyframes servicesProcessTerminal {
  0%, 1%, 10%, 100% { opacity: .44; filter: none; }
  3.2% { opacity: 1; filter: drop-shadow(0 0 4px rgba(143, 234, 255, .82)) drop-shadow(0 0 10px rgba(83, 171, 219, .42)); }
  7% { opacity: .58; filter: none; }
}

@keyframes servicesFinalEndpoint {
  0% { opacity: 0; transform: scaleX(.18); transform-origin: right; }
  58% { opacity: .88; transform: scaleX(1); }
  100% { opacity: .32; transform: scaleX(1); }
}

@media (hover: hover) and (pointer: fine) {
  .services-page .process-list:hover li:not(:last-child)::after,
  .services-page .process-list:hover li span,
  .services-page .process-list:hover li span::before,
  .services-page .process-list:hover li:last-child::after {
    animation: none;
  }
}

@media screen and (max-width: 1100px) {
  .services-page .services-intro-inner::before,
  .services-page .service-catalog::before { opacity: .54; }

  .services-page .services-intro-inner::after { opacity: .26; }
  .services-page .catalog-layout::before,
  .services-page .catalog-layout::after { opacity: .42; }
  .services-page .process-section::before { opacity: .42; }
}

@media screen and (max-width: 700px) {
  .services-page .services-intro-inner::before {
    inset: -130px -28vw -150px;
    background:
      radial-gradient(ellipse 92% 62% at var(--service-light-x) var(--service-light-y), rgba(112, 205, 239, .18), rgba(47, 126, 185, .06) 48%, transparent 78%),
      linear-gradient(156deg, transparent 58%, rgba(135, 218, 245, .18) 58.08% 58.18%, transparent 58.28%),
      radial-gradient(circle at 78% 38%, rgba(191, 241, 255, .7) 0 2px, transparent 7px);
    opacity: .62;
  }

  .services-page .services-intro-inner::after,
  .services-page .catalog-layout::before,
  .services-page .catalog-layout::after {
    display: none;
  }

  .services-page .services-intro-copy::before {
    top: -30px;
    width: 84%;
  }

  .services-page .services-intro-copy::after {
    top: -34px;
    left: 72%;
  }

  .services-page .services-intro .page-marker::before { width: 34px; }
  .services-page .services-intro .page-marker::after { height: 38px; }

  .services-page .service-catalog::before {
    inset: -4% -26%;
    background:
      radial-gradient(ellipse 82% 42% at 58% 38%, rgba(var(--service-accent-rgb), .17), transparent 76%),
      linear-gradient(128deg, transparent 24%, rgba(115, 206, 238, .11) 50%, transparent 76%);
    opacity: .58;
  }

  .services-page .service-catalog::after {
    top: 34%;
    bottom: 16%;
    width: 58%;
  }

  .services-page .catalog-heading::before { width: 82px; }
  .services-page .catalog-heading::after { left: 79px; }
  .services-page .service-list::after { height: 42px; }

  .services-page .process-section::before {
    background: radial-gradient(ellipse 88% 42% at 26% 42%, rgba(76, 181, 224, .17), rgba(51, 119, 180, .05) 52%, transparent 78%);
  }

  .services-page .process-section::after {
    background:
      radial-gradient(ellipse 74% 22% at 18% 14%, rgba(82, 210, 245, .17), transparent 76%),
      radial-gradient(ellipse 74% 22% at 28% 40%, rgba(83, 164, 231, .18), transparent 76%),
      radial-gradient(ellipse 74% 22% at 38% 66%, rgba(91, 121, 224, .18), transparent 76%),
      radial-gradient(ellipse 74% 22% at 48% 92%, rgba(139, 225, 248, .2), transparent 76%);
  }

  .services-page .services-process-active .process-list li:not(:last-child)::after {
    top: 21px;
    left: 20px;
    width: 2px;
    height: 100%;
    background: linear-gradient(transparent, rgba(244, 253, 255, .98), transparent) 0 -45% / 100% 34% no-repeat;
    transform: none;
    animation-name: servicesProcessPacketMobile;
  }

  .services-page .process-section .container::after {
    right: 12px;
    bottom: -30px;
    width: 84px;
  }
}

@keyframes servicesProcessPacketMobile {
  0%, 2%, 9%, 100% { background-position: 0 -45%; opacity: 0; }
  3.2% { opacity: 1; }
  7.4% { background-position: 0 145%; opacity: .9; }
  8.6% { background-position: 0 160%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .services-page .services-intro-inner::before,
  .services-page .services-intro-inner::after,
  .services-page .services-intro-copy::before,
  .services-page .services-intro-copy::after,
  .services-page .services-intro .page-marker::before,
  .services-page .services-intro .page-marker::after,
  .services-page .service-catalog::before,
  .services-page .service-catalog::after,
  .services-page .service-list::after,
  .services-page .service-panel::before,
  .services-page .service-panel::after,
  .services-page .service-panel-content::before,
  .services-page .service-panel-content::after,
  .services-page .process-section::before,
  .services-page .process-section::after,
  .services-page .process-section h2::after,
  .services-page .process-section .container::after,
  .services-page .process-list li::after,
  .services-page .process-list li span,
  .services-page .process-list li span::before,
  .services-page .service-channel-pulse .service-tab.active span {
    animation: none !important;
    transition: none !important;
  }

  .services-page .services-intro-inner::before,
  .services-page .service-catalog::before,
  .services-page .process-section::before { opacity: .42; transform: none; }

  .services-page .services-intro-inner::after,
  .services-page .service-catalog::after,
  .services-page .service-list::after,
  .services-page .process-list li::after,
  .services-page .process-list li span::before { display: none; }

  .services-page .services-intro-copy::before,
  .services-page .services-intro-copy::after,
  .services-page .process-section h2::after,
  .services-page .process-section .container::after { opacity: .42; transform: none; }
}

/* ===== PORTFOLIO PAGE ===== */
.portfolio-page main { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--color-bg), var(--color-bg-secondary)); }
.portfolio-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 70svh, 700px);
  overflow: hidden;
  padding: clamp(116px, 9vw, 146px) 0 clamp(72px, 7vw, 94px);
  background: #071522 url('../assets/images/portfolio-hero-bg.webp') 54% center / cover no-repeat;
}

.portfolio-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse 48% 94% at 10% 48%, rgba(3, 12, 24, .42), rgba(4, 15, 29, .15) 56%, transparent 82%),
    linear-gradient(90deg, rgba(3, 11, 22, .3), rgba(5, 17, 31, .08) 36%, transparent 54%);
  content: '';
  pointer-events: none;
}

.portfolio-hero-inner {
  display: block;
}

.portfolio-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 540px;
}

.portfolio-hero .page-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #83c9e8;
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
}

.portfolio-hero .page-eyebrow::before {
  width: 24px;
  height: 1px;
  flex: 0 0 24px;
  background: rgba(112, 195, 228, .62);
  content: '';
}

.portfolio-hero h1 {
  max-width: 540px;
  margin-bottom: 28px;
  color: #f2f7fa;
  font-size: clamp(46px, 4.2vw, 58px);
  font-weight: 650;
  letter-spacing: 0;
  line-height: .96;
}

.portfolio-title-line,
.portfolio-title-accent {
  display: block;
}

.portfolio-title-line-secondary {
  margin-top: .08em;
  font-size: .84em;
  line-height: 1.05;
}

.portfolio-title-accent {
  margin-top: .14em;
  color: #79c4e7;
  font-family: Georgia, serif;
  font-size: .94em;
  font-style: italic;
  font-weight: 600;
  line-height: .98;
}

.portfolio-hero .intro-copy {
  max-width: 520px;
  margin: 0;
  color: rgba(226, 236, 242, .84);
  line-height: 1.72;
}
.portfolio-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px 0 0;
  background: #0b1623;
}

.portfolio-showcase > .container {
  position: relative;
  z-index: 2;
}

.portfolio-project-zone {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(22px, 2.4vw, 34px) 0;
  background-color: #0b1623;
  background-position: var(--portfolio-zone-position, center);
  background-repeat: no-repeat;
  background-size: cover;
}

.portfolio-project-zone::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(180deg, #0b1623 0%, rgba(8, 19, 31, .42) 13%, rgba(8, 19, 31, .38) 87%, #0b1623 100%),
    linear-gradient(90deg, var(--portfolio-zone-tint, rgba(4, 14, 25, .48)), rgba(7, 18, 30, .24) 48%, rgba(4, 14, 25, .4));
  content: '';
  pointer-events: none;
}

.portfolio-project-zone > .container {
  position: relative;
  z-index: 1;
}

.portfolio-project-zone-nord {
  --portfolio-zone-position: center 48%;
  --portfolio-zone-tint: rgba(5, 18, 31, .46);
  background-image: url('../assets/images/portfolio-bg-nord.webp');
}

.portfolio-project-zone-volt {
  --portfolio-zone-position: center 52%;
  --portfolio-zone-tint: rgba(5, 10, 18, .5);
  background-image: url('../assets/images/portfolio-bg-volt.webp');
}

.portfolio-project-zone-mira {
  --portfolio-zone-position: center 48%;
  --portfolio-zone-tint: rgba(10, 17, 25, .58);
  background-image: url('../assets/images/portfolio-bg-mira.webp');
}

.portfolio-project-zone-casa {
  --portfolio-zone-position: center 54%;
  --portfolio-zone-tint: rgba(17, 14, 13, .5);
  background-image: url('../assets/images/portfolio-bg-casa-verde.webp');
}

.portfolio-heading { margin-bottom: 34px; }
.portfolio-case { --case-accent-rgb: 105, 183, 218; position: relative; display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(32px, 4vw, 56px); align-items: center; margin-bottom: clamp(30px, 4vw, 48px); padding: clamp(26px, 3vw, 38px); overflow: hidden; border: 1px solid rgba(118, 170, 201, .18); border-radius: 7px; background: radial-gradient(circle at 88% 10%, rgba(var(--case-accent-rgb), .055), transparent 34%), linear-gradient(145deg, rgba(24, 39, 53, .5), rgba(13, 26, 39, .36)); box-shadow: 0 17px 40px rgba(2, 10, 20, .15); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: border-color var(--nerivo-signal-response), background-color var(--nerivo-signal-response), box-shadow var(--nerivo-signal-response); }
.portfolio-case:hover { border-color: rgba(var(--case-accent-rgb), .46); box-shadow: 0 20px 46px rgba(2, 10, 20, .2), inset 0 1px 0 rgba(var(--case-accent-rgb), .1); }
.case-nord { --case-accent-rgb: 196, 190, 169; }
.case-volt { --case-accent-rgb: 180, 95, 104; }
.case-mira { --case-accent-rgb: 145, 177, 207; }
.case-casa { --case-accent-rgb: 181, 141, 105; }
.portfolio-case-reverse { grid-template-columns: minmax(0, 1.28fr) minmax(280px, .72fr); }
.portfolio-case-reverse .portfolio-case-content { order: 2; }
.portfolio-case-reverse .portfolio-visual { order: 1; }
.portfolio-case-content { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.portfolio-case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 22px; color: rgba(164, 187, 202, .72); font-family: var(--font-family-mono); font-size: 9px; letter-spacing: .12em; opacity: .84; transition: color var(--nerivo-signal-response), opacity var(--nerivo-signal-response); }
.portfolio-case-meta::after { width: 34px; height: 1px; background: linear-gradient(90deg, rgba(104, 190, 225, .58), transparent); content: ''; }
.portfolio-case-meta b { padding: 0 0 3px; border: 0; border-bottom: 1px solid rgba(95, 183, 221, .3); border-radius: 0; color: rgba(133, 204, 232, .8); font: inherit; }
.portfolio-case h2 { margin: 0 0 17px; color: #f1f6f9; font-size: clamp(32px, 3.5vw, 48px); font-weight: 650; letter-spacing: 0; line-height: 1.02; }
.portfolio-case p { max-width: 450px; margin-bottom: 25px; color: rgba(205, 220, 229, .76); font-size: 14px; line-height: 1.72; }
.portfolio-feature-list { display: grid; max-width: 450px; gap: 0; margin: 0 0 28px; padding: 0; list-style: none; }
.portfolio-feature-list li { position: relative; display: block; width: 100%; padding: 8px 0 8px 22px; border: 0; border-bottom: 1px solid rgba(151, 180, 198, .1); border-radius: 0; background: transparent; color: rgba(204, 220, 229, .75); font-size: 13px; line-height: 1.45; }
.portfolio-feature-list li::before { position: absolute; top: 1.08em; left: 0; width: 12px; height: 1px; margin: 0; border: 0; border-radius: 0; background: #69b7da; content: ''; transition: width 220ms ease, background-color 220ms ease; }
.portfolio-feature-list li:hover::before { width: 16px; background: #86cde8; }
.portfolio-link { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 44px; padding: 0 16px; border: 1px solid rgba(96, 177, 216, .34); border-radius: 6px; background: rgba(8, 24, 38, .28); color: #e8f2f7; font-size: 13px; font-weight: 650; transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease, transform 220ms ease; }
.portfolio-link::after { margin-left: 9px; color: #76c2e2; content: '↗'; transition: color var(--nerivo-signal-response), transform var(--nerivo-signal-response); }
.portfolio-link:hover { border-color: rgba(105, 197, 232, .58); background: rgba(24, 61, 83, .3); color: #91d4ed; text-decoration: none; transform: translateY(-2px); }
.portfolio-link:hover::after, .portfolio-link:focus-visible::after { color: #afe4f5; transform: translate(3px, -3px); }
.portfolio-visual { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(116, 178, 207, .24); border-radius: 6px; background: #0a1723; box-shadow: 0 16px 34px rgba(1, 8, 17, .2); transition: border-color var(--nerivo-signal-response), box-shadow var(--nerivo-signal-response); }
.portfolio-visual::after { position: absolute; top: -1px; right: 8%; left: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--case-accent-rgb), .9), transparent); content: ''; opacity: 0; pointer-events: none; transform: scaleX(.16); transition: opacity var(--nerivo-signal-response), transform 380ms cubic-bezier(.22, 1, .36, 1); }
.portfolio-showcase-image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
.portfolio-case:hover .portfolio-showcase-image { transform: translate3d(0, -4px, 0); }
.portfolio-case:hover .portfolio-visual { border-color: rgba(var(--case-accent-rgb), .5); box-shadow: 0 19px 40px rgba(1, 8, 17, .25), 0 0 23px rgba(var(--case-accent-rgb), .085); }
.portfolio-case:hover .portfolio-visual::after { opacity: 1; transform: scaleX(1); }
.portfolio-case:hover .portfolio-case-meta { color: rgba(213, 230, 239, .94); opacity: 1; }

.portfolio-project-zone .portfolio-case {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .portfolio-project-zone {
    padding: 16px 0;
  }

  .portfolio-project-zone::before {
    background:
      linear-gradient(180deg, #0b1623 0%, rgba(7, 17, 29, .56) 10%, rgba(7, 17, 29, .52) 90%, #0b1623 100%),
      linear-gradient(90deg, rgba(4, 13, 23, .58), rgba(7, 18, 30, .4));
  }

  .portfolio-project-zone-nord { --portfolio-zone-position: 72% center; }
  .portfolio-project-zone-volt { --portfolio-zone-position: 62% center; }
  .portfolio-project-zone-mira { --portfolio-zone-position: 56% center; }
  .portfolio-project-zone-casa { --portfolio-zone-position: 38% center; }
}

@media (hover: none), (pointer: coarse) {
  .portfolio-case:hover {
    border-color: rgba(118, 170, 201, .18);
    box-shadow: 0 17px 40px rgba(2, 10, 20, .15);
  }

  .portfolio-case:hover .portfolio-visual {
    border-color: rgba(116, 178, 207, .24);
    box-shadow: 0 16px 34px rgba(1, 8, 17, .2);
  }

  .portfolio-case:hover .portfolio-case-meta {
    color: rgba(164, 187, 202, .72);
    opacity: .84;
  }

  .portfolio-case:hover .portfolio-showcase-image,
  .portfolio-link:hover,
  .portfolio-link:hover::after {
    transform: none;
  }

  .portfolio-link:hover {
    border-color: rgba(96, 177, 216, .34);
    background: rgba(8, 24, 38, .28);
    color: #e8f2f7;
  }

  .portfolio-link:hover::after {
    color: #76c2e2;
  }

  .portfolio-case:hover .portfolio-visual::after {
    opacity: 0;
    transform: scaleX(.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-case, .portfolio-case-meta, .portfolio-visual, .portfolio-visual::after, .portfolio-link, .portfolio-link::after, .portfolio-feature-list li::before, .portfolio-showcase-image { transition: none; }
  .portfolio-link:hover, .portfolio-link:hover::after, .portfolio-case:hover .portfolio-showcase-image { transform: none; }
}

/* ===== ABOUT PAGE ===== */
.about-page main {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 8%, rgba(56, 189, 248, .12), transparent 28%),
    radial-gradient(circle at 12% 42%, rgba(99, 102, 241, .1), transparent 26%),
    linear-gradient(135deg, var(--color-bg), var(--color-bg-secondary));
}

.about-page section { padding: clamp(74px, 8vw, 118px) 0; }
.about-page section:first-of-type { padding-top: clamp(118px, 12vw, 168px); }
.about-page .footer { margin-top: 0; }

.about-hero {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  display: grid;
  align-items: center;
  isolation: isolate;
}

.about-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(148, 163, 184, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, black 60%, transparent);
  content: '';
}

.about-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  align-items: center;
  gap: clamp(42px, 7vw, 96px);
}

.about-hero-copy h1 {
  max-width: 780px;
  margin-bottom: 26px;
  color: var(--color-text);
  font-size: clamp(42px, 5.6vw, 78px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.03;
}

.about-signal {
  position: relative;
  min-height: 540px;
  perspective: 900px;
}

.signal-frame {
  position: absolute;
  inset: 4% 0 2% 2%;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 76% 24%, rgba(56, 189, 248, .17), transparent 30%),
    repeating-linear-gradient(90deg, transparent 0, transparent 43px, rgba(148, 163, 184, .045) 44px),
    rgba(255, 255, 255, .06);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(18px);
  transform: rotateY(-8deg) rotateX(4deg);
  transition: transform var(--transition-slow), border-color var(--transition-base), box-shadow var(--transition-base);
}

.about-signal:hover .signal-frame {
  border-color: rgba(56, 189, 248, .34);
  box-shadow: 0 28px 70px rgba(37, 99, 235, .22);
  transform: rotateY(-4deg) rotateX(2deg) translateY(-4px);
}

.signal-frame::before,
.signal-frame::after {
  position: absolute;
  content: '';
}

.signal-frame::before {
  inset: 70px 38px 96px;
  border: 1px solid rgba(148, 163, 184, .16);
  background-image:
    linear-gradient(rgba(56, 189, 248, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, .06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.signal-frame::after {
  left: 38px;
  right: 38px;
  bottom: 95px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .9), transparent);
  animation: aboutLineScan 5.5s ease-in-out infinite;
}

.signal-topline,
.signal-panels {
  position: absolute;
  left: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: .14em;
}

.signal-topline { top: 24px; }
.signal-topline span { color: var(--color-accent-cyan); font-weight: 700; }
.signal-topline small { color: rgba(168, 179, 199, .72); font-size: 9px; }

.signal-core {
  position: absolute;
  inset: 92px 56px 128px;
}

.signal-core b {
  position: absolute;
  left: 0;
  bottom: 0;
  color: var(--color-text);
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: .88;
  text-transform: uppercase;
}

.signal-core b::first-line { color: var(--color-accent-cyan); }

.signal-node {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-accent-cyan);
  border-radius: 50%;
  background: var(--color-bg-secondary);
  box-shadow: 0 0 24px rgba(56, 189, 248, .45);
}

.node-a { top: 10%; right: 16%; }
.node-b { top: 44%; right: 36%; }
.node-c { right: 8%; bottom: 8%; border-color: var(--color-primary-light); }

.signal-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .82));
  transform-origin: left;
}

.line-a { top: 13%; left: 54%; width: 28%; transform: rotate(-16deg); }
.line-b { top: 47%; left: 48%; width: 24%; transform: rotate(10deg); }
.line-c { right: 10%; bottom: 10%; width: 30%; transform: rotate(-28deg); }

.signal-panels {
  bottom: 28px;
  justify-content: flex-start;
}

.signal-panels span {
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 5px;
  background: rgba(15, 23, 42, .38);
  color: rgba(241, 245, 249, .82);
}

.about-split {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(34px, 6vw, 88px);
}

.about-section-label,
.about-section-heading {
  color: var(--color-text-secondary);
}

.about-section-label > span,
.about-section-heading > span {
  display: block;
  margin-bottom: 16px;
  color: rgba(168, 179, 199, .55);
  font-family: var(--font-family-mono);
  font-size: 11px;
  letter-spacing: .16em;
}

.approach-composition {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(360px, 1.14fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: stretch;
}

.approach-statement {
  align-self: center;
  max-width: 520px;
}

.approach-statement h2,
.about-section-heading h2 {
  color: var(--color-text);
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 600;
  letter-spacing: -.035em;
}

.approach-statement p {
  max-width: 640px;
  font-size: 15px;
}

.approach-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 420px;
  padding: 28px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 70% 20%, rgba(56, 189, 248, .12), transparent 32%),
    rgba(255, 255, 255, .05);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
}

.approach-flow::before {
  position: absolute;
  inset: 50% 28px auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(56, 189, 248, .2), rgba(56, 189, 248, .9), rgba(99, 102, 241, .2));
  content: '';
}

.approach-flow::after {
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 50%;
  width: 1px;
  background: linear-gradient(rgba(56, 189, 248, .18), rgba(148, 163, 184, .22), rgba(99, 102, 241, .16));
  content: '';
}

.approach-flow div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 176px;
  padding: 18px;
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.approach-flow div:hover {
  background: rgba(255, 255, 255, .055);
  transform: translateY(-3px);
}

.approach-flow span {
  color: var(--color-accent-cyan);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.approach-flow b {
  max-width: 160px;
  font-size: clamp(20px, 2.3vw, 30px);
  font-weight: 600;
  letter-spacing: -.025em;
}

.about-beliefs {
  border-block: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .025);
}

.about-section-heading {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(34px, 6vw, 88px);
  align-items: start;
  margin-bottom: clamp(38px, 6vw, 72px);
}

.belief-item {
  position: relative;
  min-height: 230px;
  padding: clamp(24px, 4vw, 44px);
  overflow: hidden;
  background: var(--color-bg-secondary);
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.belief-item:nth-child(2),
.belief-item:nth-child(3) { transform: translateY(34px); }

.belief-item:hover {
  z-index: 1;
  background: linear-gradient(135deg, rgba(59, 130, 246, .14), rgba(255, 255, 255, .045));
}

.belief-item span {
  display: block;
  margin-bottom: 46px;
  color: var(--color-accent-cyan);
  font-family: var(--font-family-mono);
  font-size: 11px;
}

.belief-item h3 {
  max-width: 420px;
  margin-bottom: 14px;
  color: var(--color-text);
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 600;
  letter-spacing: -.04em;
}

.belief-item p {
  max-width: 430px;
  font-size: 14px;
}

.about-contrast { padding-top: clamp(98px, 10vw, 146px); }

.contrast-list {
  border-top: 1px solid rgba(148, 163, 184, .16);
}

.contrast-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  min-height: 96px;
  border-bottom: 1px solid rgba(148, 163, 184, .16);
  transition: background-color var(--transition-base), padding var(--transition-base);
}

.contrast-row::before {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--color-accent-cyan);
  transition: width var(--transition-slow);
  content: '';
}

.contrast-row:hover {
  padding-inline: 18px;
  background: rgba(255, 255, 255, .035);
}

.contrast-row:hover::before { width: 100%; }
.contrast-row span { color: rgba(168, 179, 199, .74); font-size: clamp(18px, 2.2vw, 30px); line-height: 1.18; }
.contrast-row b { color: var(--color-accent-cyan); font-family: var(--font-family-mono); font-size: 18px; text-align: center; }
.contrast-row strong { color: var(--color-text); font-size: clamp(22px, 2.7vw, 38px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }

.manifesto-inner {
  position: relative;
  padding: clamp(34px, 6vw, 70px);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, rgba(56, 189, 248, .12) 1px, transparent 1px),
    rgba(255, 255, 255, .055);
  background-size: 120px 100%;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
}

.manifesto-inner h2 {
  max-width: 920px;
  margin-bottom: clamp(34px, 5vw, 58px);
  color: var(--color-text);
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.manifesto-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr 1fr;
  gap: 1px;
  background: rgba(148, 163, 184, .16);
}

.manifesto-grid p {
  min-height: 178px;
  margin: 0;
  padding: 24px;
  background: rgba(15, 23, 42, .54);
  color: var(--color-text);
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.45;
}

.about-moldova { padding-top: 34px; }

.moldova-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(320px, .55fr);
  gap: 42px;
  align-items: end;
  min-height: 390px;
  overflow: hidden;
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 30% 46%, rgba(56, 189, 248, .18), transparent 4%),
    radial-gradient(circle at 65% 35%, rgba(96, 165, 250, .16), transparent 3%),
    radial-gradient(circle at 82% 62%, rgba(99, 102, 241, .18), transparent 3%),
    linear-gradient(rgba(148, 163, 184, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .06) 1px, transparent 1px),
    rgba(255, 255, 255, .045);
  background-size: auto, auto, auto, 38px 38px, 38px 38px, auto;
  box-shadow: var(--shadow-lg);
}

.moldova-band::before,
.moldova-band::after {
  position: absolute;
  content: '';
}

.moldova-band::before {
  left: 31%;
  top: 45%;
  width: 52%;
  height: 1px;
  background: linear-gradient(90deg, rgba(56, 189, 248, .9), rgba(96, 165, 250, .35), transparent);
  transform: rotate(12deg);
  transform-origin: left;
}

.moldova-band::after {
  right: 42px;
  top: 42px;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(56, 189, 248, .24);
  border-radius: 50%;
  box-shadow: inset 0 0 0 38px rgba(56, 189, 248, .025);
}

.moldova-band span {
  display: block;
  margin-bottom: 12px;
  color: var(--color-accent-cyan);
  font-family: var(--font-family-mono);
  font-size: 11px;
  letter-spacing: .16em;
}

.moldova-band h2 {
  max-width: 680px;
  color: var(--color-text);
  font-size: clamp(46px, 8vw, 96px);
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: .9;
}

.moldova-band p {
  position: relative;
  z-index: 1;
  max-width: 440px;
  font-size: 15px;
}

@keyframes aboutLineScan {
  0%, 100% { opacity: .28; transform: translateX(-18%); }
  50% { opacity: 1; transform: translateX(18%); }
}

@media (prefers-reduced-motion: reduce) {
  .signal-frame,
  .approach-flow div,
  .belief-item,
  .contrast-row,
  .contrast-row::before {
    transition: none;
  }

  .signal-frame::after { animation: none; }
  .about-signal:hover .signal-frame,
  .approach-flow div:hover,
  .belief-item:nth-child(2),
  .belief-item:nth-child(3),
  .contrast-row:hover {
    transform: none;
  }
}

/* ===== ABOUT PAGE REDESIGN OVERRIDES ===== */
.about-page main {
  --about-panel: rgba(255, 255, 255, .055);
  --about-panel-strong: rgba(255, 255, 255, .08);
  --about-hairline: rgba(148, 163, 184, .15);
  overflow: hidden;
}

.about-page .about-section,
.about-page .about-beliefs,
.about-page .about-contrast,
.about-page .about-moldova {
  padding: clamp(58px, 6vw, 92px) 0;
}

.about-page .about-hero {
  min-height: auto;
  padding: clamp(104px, 10vw, 142px) 0 clamp(58px, 6vw, 86px);
}

.about-hero-inner {
  grid-template-columns: minmax(0, .86fr) minmax(440px, 1.14fr);
  gap: clamp(36px, 6vw, 86px);
}

.about-hero-copy h1 {
  max-width: 640px;
  font-size: clamp(38px, 4.35vw, 64px);
  line-height: 1.01;
}

.about-hero-copy .intro-copy {
  max-width: 560px;
  font-size: 15px;
}

.studio-visual {
  position: relative;
  width: min(100%, 520px);
  min-height: 300px;
  aspect-ratio: 520 / 380;
  justify-self: end;
  overflow: hidden;
  border: 1px solid rgba(119, 183, 213, .28);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 40%, rgba(69, 153, 193, .09), transparent 64%),
    linear-gradient(145deg, rgba(10, 27, 42, .9), rgba(5, 17, 30, .76));
  box-shadow:
    0 22px 48px rgba(1, 9, 18, .24),
    inset 0 1px 0 rgba(221, 241, 249, .06);
  -webkit-backdrop-filter: blur(6px) saturate(108%);
  backdrop-filter: blur(6px) saturate(108%);
  transition: border-color 240ms ease-out, box-shadow 240ms ease-out;
}

.studio-system-label,
.studio-system-status {
  position: absolute;
  z-index: 4;
  color: rgba(188, 212, 224, .58);
  font-family: var(--font-family-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
}

.studio-system-label {
  top: 17px;
  left: 24px;
  color: #79c3e4;
}

.studio-system-status {
  right: 24px;
  bottom: 10px;
  font-size: 7px;
  letter-spacing: .12em;
}

.studio-system-media {
  position: absolute;
  top: 38px;
  right: 20px;
  left: 20px;
  z-index: 1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 3px;
  background: transparent;
  -webkit-mask-image: radial-gradient(ellipse 100% 98% at 50% 49%, #000 86%, rgba(0, 0, 0, .96) 93%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 98% at 50% 49%, #000 86%, rgba(0, 0, 0, .96) 93%, transparent 100%);
  transition: filter 240ms ease-out;
}

.studio-system-media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 18, 31, .18), transparent 8%, transparent 92%, rgba(5, 18, 31, .18)),
    linear-gradient(180deg, rgba(7, 23, 37, .08), transparent 12%, transparent 84%, rgba(5, 18, 30, .24));
  box-shadow: inset 0 0 24px rgba(2, 12, 22, .12);
  pointer-events: none;
  content: '';
}

.studio-system-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: filter 240ms ease-out;
}

.studio-system-stages {
  position: absolute;
  right: 20px;
  bottom: 31px;
  left: 20px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.studio-system-stages::before {
  position: absolute;
  top: 3px;
  right: 12.5%;
  left: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, rgba(94, 190, 229, .2), rgba(107, 205, 241, .62), rgba(94, 190, 229, .2));
  opacity: .7;
  content: '';
  transition: opacity 240ms ease-out;
}

.studio-system-stage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 5px;
  min-width: 0;
  padding-top: 12px;
  color: #edf5f8;
  font-family: var(--font-family-mono);
  text-align: center;
}

.studio-system-stage::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(120, 205, 238, .68);
  border-radius: 50%;
  background: #0a2234;
  transform: translateX(-50%);
  pointer-events: none;
  content: '';
  transition: border-color 240ms ease-out, background-color 240ms ease-out;
}

.studio-system-stage span,
.studio-system-stage small {
  color: rgba(168, 202, 219, .58);
  font-size: 8px;
  letter-spacing: .13em;
}

.studio-system-stage span {
  justify-self: end;
  color: rgba(112, 204, 240, .86);
}

.studio-system-stage small {
  grid-column: 1 / -1;
  font-size: 6px;
  opacity: .7;
}

.studio-system-stage b {
  justify-self: start;
  color: rgba(235, 245, 249, .9);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .1em;
}

@media (hover: hover) and (pointer: fine) {
  .studio-visual:hover {
    border-color: rgba(125, 202, 233, .42);
    box-shadow:
      0 24px 52px rgba(1, 9, 18, .28),
      inset 0 1px 0 rgba(221, 241, 249, .08);
  }

  .studio-visual:hover .studio-system-media {
    filter: brightness(1.025) saturate(1.04);
  }

  .studio-visual:hover .studio-system-media img {
    filter: brightness(1.015);
  }

  .studio-visual:hover .studio-system-stage::before {
    border-color: rgba(136, 220, 250, .88);
    background: #0c2c43;
  }

  .studio-visual:hover .studio-system-stages::before {
    opacity: .96;
  }
}

.moldova-node {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 2px solid var(--color-accent-cyan);
  border-radius: 50%;
  background: var(--color-bg-secondary);
  box-shadow: 0 0 22px rgba(56, 189, 248, .48);
}

.moldova-node::after {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(56, 189, 248, .22);
  border-radius: inherit;
  animation: aboutPulse 3.8s ease-in-out infinite;
  content: '';
}

.about-editorial-grid {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 74px);
}

.approach-system {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(520px, 1fr);
  gap: clamp(28px, 5vw, 62px);
  align-items: start;
}

.approach-intro h2 {
  max-width: 480px;
  color: var(--color-text);
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -.035em;
}

.approach-board {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 82% 18%, rgba(56, 189, 248, .13), transparent 32%),
    rgba(255, 255, 255, .045);
  box-shadow: var(--shadow-lg);
}

.moldova-route {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, rgba(56, 189, 248, .9), rgba(96, 165, 250, .18), transparent);
  transform-origin: left;
}

.approach-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 28px;
}

.approach-step {
  display: grid;
  align-content: space-between;
  min-height: 190px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(15, 23, 42, .5);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: transform var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}

.approach-step span,
.manifesto-point span {
  color: var(--color-accent-cyan);
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: .12em;
}

.approach-step b {
  margin-top: 42px;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600;
}

.approach-step small {
  margin-top: 14px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.belief-item {
  min-height: 250px;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
}

.belief-item:nth-child(1) { grid-column: span 2; }
.belief-item:nth-child(2) { grid-column: 3; transform: translateY(34px); }
.belief-item:nth-child(3) { grid-column: 1; transform: translateY(-10px); }
.belief-item:nth-child(4) { grid-column: span 2; transform: translateY(24px); }

.belief-item::after {
  position: absolute;
  inset: auto 22px 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent-cyan), transparent);
  opacity: 0;
  transform: scaleX(.25);
  transform-origin: left;
  transition: opacity var(--transition-base), transform var(--transition-slow);
  content: '';
}

.belief-item:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.belief-item h3 {
  max-width: none;
  overflow-wrap: anywhere;
  font-size: clamp(26px, 3vw, 42px);
}

.about-contrast {
  padding-top: clamp(54px, 6vw, 86px);
}

.contrast-list {
  border-top: 0;
}

.contrast-row {
  min-height: 72px;
  padding: 10px 0;
  border-bottom-color: rgba(148, 163, 184, .13);
}

.contrast-row span,
.contrast-row strong {
  transition: color var(--transition-base), opacity var(--transition-base), transform var(--transition-base);
}

.contrast-row b {
  position: relative;
  font-size: 0;
}

.contrast-row b::before {
  display: block;
  width: 46px;
  height: 1px;
  background: rgba(56, 189, 248, .58);
  transition: width var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
  content: '';
}

.contrast-row b::after {
  position: absolute;
  right: 8px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(56, 189, 248, .8);
  border-right: 1px solid rgba(56, 189, 248, .8);
  transform: rotate(45deg);
  content: '';
}

.contrast-row:hover span {
  opacity: .42;
  transform: translateX(-8px);
}

.contrast-row:hover strong {
  color: var(--color-accent-cyan);
  transform: translateX(8px);
}

.contrast-row:hover b::before {
  width: 62px;
  background: var(--color-accent-cyan);
  box-shadow: 0 0 18px rgba(56, 189, 248, .45);
}

.manifesto-stage {
  display: grid;
  grid-template-columns: minmax(320px, .78fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 86px);
  align-items: start;
}

.manifesto-sticky {
  position: sticky;
  top: 108px;
}

.manifesto-sticky h2 {
  max-width: 560px;
  color: var(--color-text);
  font-size: clamp(38px, 4.6vw, 68px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.manifesto-signal {
  position: relative;
  height: 160px;
  margin-top: 34px;
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 8px;
  background-image:
    linear-gradient(rgba(148, 163, 184, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .045) 1px, transparent 1px);
  background-size: 28px 28px;
}

.manifesto-signal span {
  position: absolute;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent-cyan), transparent);
}

.manifesto-signal span:nth-child(1) { top: 42px; width: 72%; }
.manifesto-signal span:nth-child(2) { top: 80px; width: 46%; }
.manifesto-signal span:nth-child(3) { top: 118px; width: 62%; }

.manifesto-points {
  display: grid;
  gap: 18px;
}

.manifesto-point {
  min-height: 240px;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  opacity: .68;
  transform: translateY(16px);
  transition: opacity var(--transition-slow), transform var(--transition-slow), border-color var(--transition-base), background-color var(--transition-base);
}

.manifesto-point.is-active,
.manifesto-point:hover {
  border-color: rgba(56, 189, 248, .34);
  background: rgba(59, 130, 246, .1);
  opacity: 1;
  transform: translateY(0);
}

.manifesto-point h3 {
  max-width: 520px;
  margin: 34px 0 16px;
  color: var(--color-text);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 600;
  letter-spacing: -.035em;
}

.manifesto-point p {
  max-width: 520px;
  font-size: 15px;
}

.moldova-band {
  min-height: 330px;
}

.moldova-network {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-node { left: 32%; top: 48%; }
.away-one { right: 23%; top: 34%; border-color: var(--color-primary-light); }
.away-two { right: 12%; bottom: 28%; opacity: .8; }
.route-one { left: 33%; top: 49%; width: 43%; transform: rotate(-10deg); }
.route-two { left: 33%; top: 50%; width: 57%; transform: rotate(13deg); opacity: .65; }
.coord {
  position: absolute;
  color: rgba(168, 179, 199, .58);
  font-family: var(--font-family-mono);
  font-size: 9px;
  letter-spacing: .12em;
}
.coord-home { left: 25%; top: 55%; color: var(--color-accent-cyan); }
.coord-away { right: 10%; top: 18%; }

/* ===== ABOUT PAGE COMPACT EDITORIAL COMPOSITION ===== */
.about-page .about-hero {
  padding: clamp(92px, 8vw, 118px) 0 clamp(44px, 4.5vw, 62px);
  background: #071522;
}

.about-page .about-hero::before {
  background:
    linear-gradient(180deg, rgba(5, 14, 25, .18), rgba(6, 16, 28, .08) 58%, rgba(7, 18, 30, .82) 100%),
    linear-gradient(90deg, rgba(4, 13, 24, .82) 0%, rgba(5, 15, 27, .64) 34%, rgba(6, 17, 29, .24) 62%, rgba(5, 15, 27, .1) 100%);
}

.about-page .about-hero::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 112px;
  background:
    radial-gradient(ellipse 72% 58% at 50% 100%, rgba(137, 166, 180, .2), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(7, 18, 30, .44) 38%, rgba(24, 48, 63, .84) 76%, #1d3444 100%);
  content: '';
  pointer-events: none;
}

.about-page .about-hero-inner {
  position: relative;
  z-index: 1;
}

.about-hero-inner {
  gap: clamp(32px, 4.5vw, 64px);
}

.studio-visual {
  min-height: 300px;
}

.about-page .moldova-node::after {
  animation: none;
}

.about-page .about-approach {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(86px, 7vw, 112px) 0 clamp(108px, 8vw, 132px);
  color: #102332;
  background: #dbe6eb;
}

.about-page .about-approach::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(180deg, #1d3444 0%, rgba(74, 105, 121, .88) 24px, rgba(176, 199, 209, .58) 66px, rgba(224, 235, 239, .18) 102px, transparent 128px),
    radial-gradient(ellipse 62% 82% at 20% 48%, rgba(242, 247, 248, .34), transparent 74%),
    radial-gradient(ellipse 58% 78% at 76% 55%, rgba(230, 239, 242, .68), rgba(222, 234, 239, .38) 48%, transparent 82%),
    linear-gradient(90deg, rgba(226, 237, 241, .24), rgba(225, 236, 240, .08) 48%, rgba(210, 225, 232, .16));
  content: '';
  pointer-events: none;
}

.about-page .about-approach::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 126px;
  background:
    linear-gradient(116deg, transparent 0 42%, rgba(44, 72, 88, .13) 64%, rgba(11, 23, 37, .34) 100%),
    linear-gradient(180deg, transparent 0%, rgba(75, 99, 112, .18) 28%, rgba(27, 46, 59, .72) 76%, #0b1725 100%);
  content: '';
  pointer-events: none;
}

.about-page .about-approach > .container {
  position: relative;
  z-index: 1;
}

.about-editorial-grid {
  grid-template-columns: minmax(340px, .86fr) minmax(0, 1.14fr);
  gap: clamp(56px, 6.5vw, 96px);
  align-items: center;
}

.approach-copy {
  min-width: 0;
}

.approach-copy .about-section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  color: #526b79;
}

.approach-copy .about-section-label > span {
  margin: 0;
  color: #1475a4;
}

.approach-copy .about-section-label > span::after {
  color: rgba(20, 91, 121, .5);
  content: ' /';
}

.approach-copy .section-kicker {
  color: #405d6d;
}

.approach-intro h2 {
  max-width: 590px;
  margin-bottom: 28px;
  color: #102332;
  font-size: clamp(42px, 4.15vw, 62px);
  font-weight: 620;
  letter-spacing: 0;
  line-height: .99;
}

.approach-intro p {
  max-width: 535px;
  color: #4e6674;
  font-size: 15px;
  line-height: 1.7;
}

.approach-system {
  display: block;
}

.approach-board {
  position: relative;
  min-height: 380px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.approach-steps {
  --approach-route-gap: clamp(18px, 2vw, 30px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: var(--approach-route-gap);
  padding: 28px 0 0;
}

.approach-step {
  --approach-step-shift: 0px;
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  min-height: 232px;
  margin-top: var(--approach-step-shift);
  flex-direction: column;
  justify-content: flex-start;
  padding: 38px 8px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #102332;
  text-align: left;
  cursor: default;
  transition: transform 220ms ease-out;
}

.approach-step:nth-child(2) { --approach-step-shift: 34px; }
.approach-step:nth-child(3) { --approach-step-shift: 68px; }
.approach-step:nth-child(4) { --approach-step-shift: 102px; }

.approach-step::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(18, 132, 179, .82);
  border-radius: 50%;
  background: #e8f0f3;
  box-shadow: 0 0 0 4px rgba(40, 143, 184, .1);
  content: '';
  transition: border-color 220ms ease-out, background-color 220ms ease-out, box-shadow 220ms ease-out;
}

.approach-step::after {
  position: absolute;
  z-index: -1;
  top: 12px;
  left: 9px;
  width: calc(100% + var(--approach-route-gap));
  height: 1px;
  background: linear-gradient(90deg, rgba(17, 127, 173, .78), rgba(75, 154, 185, .38));
  content: '';
  opacity: .82;
  transform: rotate(11deg);
  transform-origin: left center;
  transition: opacity 220ms ease-out, background-color 220ms ease-out;
}

.approach-step:last-child::after {
  display: none;
}

.approach-step span {
  color: #167fae;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .14em;
}

.approach-step b {
  margin-top: 20px;
  color: #142a39;
  font-size: clamp(21px, 1.75vw, 27px);
  line-height: 1.08;
  transition: color 220ms ease-out;
}

.approach-step small {
  max-width: 16rem;
  margin-top: 14px;
  color: #506b79;
  font-size: 12.5px;
  line-height: 1.58;
}

@media (hover: hover) and (pointer: fine) {
  .approach-step:hover {
    border-color: transparent;
    background: transparent;
    transform: translateY(-2px);
  }

  .approach-step:hover::before {
    border-color: rgba(7, 132, 184, .96);
    background: #f3f8fa;
    box-shadow: 0 0 0 5px rgba(27, 140, 185, .11), 0 0 16px rgba(20, 137, 184, .2);
  }

  .approach-step:hover::after {
    background: linear-gradient(90deg, rgba(8, 132, 183, .88), rgba(58, 151, 188, .42));
    opacity: .94;
  }

  .approach-step:hover b {
    color: #086d9c;
  }
}

.about-page .about-beliefs {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 4.5vw, 62px) 0;
  color: #edf4f7;
  background: #0b1725 url('../assets/images/about-principles-bg.webp') 58% center / cover no-repeat;
}

.about-page .about-beliefs::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(180deg, #0b1725 0%, rgba(7, 18, 30, .14) 13%, rgba(7, 18, 30, .08) 78%, rgba(8, 20, 32, .72) 100%),
    linear-gradient(90deg, rgba(4, 14, 25, .78) 0%, rgba(6, 18, 31, .58) 35%, rgba(5, 17, 29, .34) 68%, rgba(4, 14, 25, .56) 100%),
    radial-gradient(ellipse 48% 92% at 14% 54%, rgba(3, 12, 23, .4), transparent 72%),
    radial-gradient(ellipse 38% 72% at 78% 38%, rgba(78, 162, 199, .11), transparent 74%),
    radial-gradient(ellipse 92% 34% at 50% 100%, rgba(43, 93, 118, .18), transparent 72%);
  content: '';
  pointer-events: none;
}

.about-page .about-beliefs::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 76px;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 20, 32, .46) 58%, #081521 100%);
  content: '';
  pointer-events: none;
}

.beliefs-editorial {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, .58fr) minmax(0, 1.12fr);
  gap: clamp(42px, 5vw, 76px);
  align-items: start;
}

.beliefs-intro {
  position: relative;
  padding-top: 10px;
}

.beliefs-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.beliefs-label > span {
  color: #6bb9dc;
  font: 600 10px/1 var(--font-family-mono);
  letter-spacing: .12em;
}

.beliefs-label .section-kicker {
  margin: 0;
  color: rgba(201, 220, 230, .68);
}

.beliefs-intro h2 {
  margin: 0 0 22px;
  color: #f0f5f7;
  font-size: clamp(42px, 4.8vw, 68px);
  font-weight: 600;
  line-height: .96;
}

.beliefs-intro h2 span,
.beliefs-intro h2 em {
  display: block;
}

.beliefs-intro h2 span {
  white-space: nowrap;
}

.beliefs-intro h2 em {
  margin-top: .08em;
  color: #73bddf;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 500;
}

.beliefs-intro-copy {
  max-width: 380px;
  margin: 0;
  color: rgba(205, 220, 228, .74);
  font-size: 14px;
  line-height: 1.7;
}

.beliefs-list {
  position: relative;
}

.beliefs-list::before {
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 4px;
  width: 1px;
  content: '';
  background: linear-gradient(180deg, rgba(106, 187, 222, .14), rgba(106, 187, 222, .72) 18%, rgba(106, 187, 222, .36) 82%, rgba(106, 187, 222, .1));
  transform-origin: top;
  animation: beliefs-line-draw 800ms ease both;
}

.about-beliefs .belief-item,
.about-beliefs .belief-item:nth-child(1),
.about-beliefs .belief-item:nth-child(2),
.about-beliefs .belief-item:nth-child(3),
.about-beliefs .belief-item:nth-child(4) {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(220px, 1fr);
  gap: clamp(18px, 2vw, 30px);
  align-items: center;
  min-height: 112px;
  grid-column: auto;
  padding: 18px 0 18px 26px;
  border: 0;
  border-bottom: 1px solid rgba(142, 180, 203, .14);
  border-radius: 0;
  background: transparent;
  color: #edf4f7;
  transform: none;
  transition: background-color 200ms ease;
}

.about-beliefs .belief-item:first-child {
  border-top: 1px solid rgba(142, 180, 203, .14);
}

.about-beliefs .belief-item::before {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(115, 195, 229, .82);
  border-radius: 50%;
  background: #182936;
  content: '';
  transform: translateY(-50%);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.about-beliefs .belief-item::after {
  display: none;
}

.about-beliefs .belief-item:hover {
  background: linear-gradient(90deg, rgba(94, 169, 202, .045), transparent 78%);
  transform: none;
}

.about-beliefs .belief-item:hover::before {
  border-color: rgba(127, 207, 240, .95);
  background: #2f789a;
}

.about-beliefs .belief-index {
  align-self: start;
  display: block;
  margin: 0;
  padding-top: 4px;
  color: #6bb9dc;
  font: 600 10px/1 var(--font-family-mono);
  letter-spacing: .12em;
}

.belief-copy {
  min-width: 0;
}

.about-beliefs .belief-item h3 {
  margin: 0 0 7px;
  color: #f1f6f8;
  font-size: clamp(23px, 2vw, 30px);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.08;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.about-beliefs .belief-item p {
  max-width: 470px;
  margin: 0;
  color: rgba(207, 222, 230, .74);
  font-size: 12.5px;
  line-height: 1.55;
}

.belief-annotation {
  display: grid;
  grid-template-columns: minmax(0, .92fr) 14px minmax(0, 1.24fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-family: var(--font-family-mono);
  font-size: 11px;
  line-height: 1.5;
}

.belief-annotation small {
  color: rgba(194, 213, 223, .58);
}

.belief-annotation b {
  color: #6bb9dc;
  font-weight: 400;
  text-align: center;
}

.belief-annotation strong {
  color: rgba(220, 238, 245, .92);
  font-weight: 600;
}

@keyframes beliefs-line-draw {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

.about-page .about-moldova {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(76px, 7vw, 106px) 0 clamp(104px, 8vw, 128px);
  background: #081521 url('../assets/images/about-worldwide-bg.webp') center 52% / cover no-repeat;
}

.about-page .about-moldova::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(180deg, #081521 0%, rgba(5, 17, 29, .62) 8%, rgba(5, 17, 29, .12) 28%, rgba(5, 17, 29, .08) 68%, rgba(7, 19, 31, .38) 100%),
    linear-gradient(90deg, rgba(3, 12, 22, .5) 0%, rgba(5, 17, 29, .1) 26%, rgba(5, 17, 29, .06) 72%, rgba(3, 12, 22, .5) 100%),
    radial-gradient(ellipse 62% 76% at 50% 48%, rgba(84, 162, 193, .16), transparent 70%),
    radial-gradient(ellipse 84% 48% at 50% 100%, rgba(23, 64, 84, .18), transparent 72%);
  content: '';
  pointer-events: none;
}

.about-page .about-moldova::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 22, 35, .24) 28%, rgba(11, 22, 35, .7) 70%, #0f1f2e 100%);
  content: '';
  pointer-events: none;
}

.about-page .moldova-band {
  z-index: 1;
  min-height: 280px;
  padding-block: clamp(30px, 4vw, 48px);
  border-color: rgba(125, 199, 228, .34);
  background:
    linear-gradient(180deg, rgba(6, 16, 28, .2) 0%, rgba(6, 16, 28, .12) 64%, rgba(7, 18, 30, .84) 100%),
    linear-gradient(90deg, rgba(4, 13, 24, .74) 0%, rgba(5, 15, 27, .42) 48%, rgba(5, 14, 25, .54) 100%),
    url('../assets/images/about-moldova-bg.webp') center 48% / cover no-repeat;
  box-shadow: 0 22px 48px rgba(1, 8, 16, .3), 0 0 30px rgba(72, 157, 192, .09), inset 0 1px 0 rgba(190, 226, 240, .05);
}

.about-page .moldova-network {
  opacity: .52;
}

.about-page .moldova-band::before,
.about-page .moldova-band::after {
  opacity: .44;
}

.moldova-band .moldova-index {
  display: block;
  margin-bottom: 18px;
  color: rgba(102, 193, 230, .72);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
}

@keyframes aboutPulse {
  0%, 100% { opacity: .18; transform: scale(.65); }
  50% { opacity: .75; transform: scale(1.35); }
}

/* ===== ABOUT: SYSTEM ASSEMBLY MOTION ===== */
.about-page .about-hero,
.about-page .about-approach,
.about-page .about-beliefs,
.about-page .about-moldova {
  --about-light-x: 62%;
  --about-light-y: 42%;
}

.about-hero-assembly,
.about-structure-field,
.about-principles-material,
.about-worldwide-space {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.about-hero-assembly {
  background:
    linear-gradient(132deg, rgba(139, 204, 230, .08), rgba(12, 44, 67, .04) 58%, transparent 59%) 58% 26% / 34% 54% no-repeat,
    linear-gradient(24deg, transparent 31%, rgba(91, 163, 194, .09) 32%, rgba(14, 52, 76, .04) 68%, transparent 69%) 82% 62% / 30% 46% no-repeat,
    linear-gradient(rgba(136, 213, 241, .48), rgba(136, 213, 241, .48)) 57% 19% / 34px 1px no-repeat,
    linear-gradient(rgba(136, 213, 241, .42), rgba(136, 213, 241, .42)) 57% 19% / 1px 25px no-repeat,
    linear-gradient(rgba(136, 213, 241, .36), rgba(136, 213, 241, .36)) 89% 72% / 28px 1px no-repeat,
    linear-gradient(rgba(136, 213, 241, .32), rgba(136, 213, 241, .32)) 89% 72% / 1px 20px no-repeat,
    radial-gradient(ellipse 58% 74% at var(--about-light-x) var(--about-light-y), rgba(79, 169, 207, .16), rgba(36, 93, 128, .05) 48%, transparent 74%);
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
}

.about-hero-assembly::before,
.about-hero-assembly::after {
  position: absolute;
  border: 1px solid rgba(132, 199, 224, .22);
  background: linear-gradient(145deg, rgba(127, 195, 220, .1), rgba(9, 33, 51, .04));
  content: '';
  opacity: 0;
  transform-origin: center;
}

.about-hero-assembly::before {
  top: 13%;
  right: 10%;
  width: min(520px, 35vw);
  height: 58%;
  clip-path: polygon(8% 0, 100% 7%, 91% 100%, 0 88%);
  transform: translate3d(26px, -5px, 0);
}

.about-hero-assembly::after {
  right: 29%;
  bottom: 4%;
  width: min(420px, 30vw);
  height: 42%;
  border-color: rgba(108, 180, 210, .15);
  clip-path: polygon(0 8%, 88% 0, 100% 82%, 12% 100%);
  transform: translate3d(-22px, 12px, 0);
}

.about-calibration-sweep {
  position: absolute;
  z-index: 1;
  inset: -24% -18%;
  background: linear-gradient(112deg, transparent 37%, rgba(181, 229, 246, .05) 44%, rgba(211, 242, 252, .48) 50%, rgba(112, 191, 222, .12) 56%, transparent 64%);
  opacity: 0;
  transform: translate3d(-64%, 0, 0);
}

.about-calibration-sweep::after {
  position: absolute;
  inset: 18% 8%;
  background: radial-gradient(ellipse 42% 72% at 50% 50%, rgba(197, 235, 248, .2), transparent 74%);
  content: '';
  opacity: 0;
  transform: translate3d(-36%, -8%, 0) rotate(-9deg);
}

.about-hero-initializing .about-hero-assembly {
  animation:
    aboutAssemblyLayerIn 1.35s cubic-bezier(.2, .72, .2, 1) 260ms 1 both,
    aboutHeroLightField 24s ease-in-out 3.4s infinite alternate;
}

.about-hero-initializing .about-hero-assembly::before {
  animation: aboutPlaneLockRight 1.45s cubic-bezier(.2, .72, .2, 1) 360ms 1 both;
}

.about-hero-initializing .about-hero-assembly::after {
  animation: aboutPlaneLockLeft 1.5s cubic-bezier(.2, .72, .2, 1) 520ms 1 both;
}

.about-hero-initializing .about-calibration-sweep {
  animation: aboutCalibrationSweep 1.5s ease-in-out 1.05s 1 both;
}

.about-hero-initializing .about-calibration-sweep::after {
  animation: aboutHeroReflection 12.5s ease-in-out 4.6s infinite;
}

.about-hero-initializing .studio-visual {
  animation: aboutSystemCalibrate 3.1s ease-out 420ms 1 both;
}

.studio-system-media::before {
  position: absolute;
  z-index: 2;
  inset: -25%;
  background: linear-gradient(112deg, transparent 34%, rgba(211, 242, 252, .06) 43%, rgba(216, 244, 253, .42) 50%, rgba(126, 204, 233, .08) 57%, transparent 66%);
  content: '';
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-62%, 0, 0);
}

.about-hero-initializing .studio-system-media::before {
  animation: aboutMediaReflection 1.35s ease-in-out 1.12s 1 both;
}

html.reveal-enabled body.about-page .about-hero-initializing .studio-system-stages::before {
  animation: aboutStageTrace 1.3s ease-out 1.45s 1 both;
}

html.reveal-enabled body.about-page .about-hero-initializing .studio-system-stage::before {
  animation: aboutStageLock 460ms ease-out 1 both;
}

.about-hero-initializing .studio-system-stage:nth-child(1)::before { animation-delay: 1.45s; }
.about-hero-initializing .studio-system-stage:nth-child(2)::before { animation-delay: 1.62s; }
.about-hero-initializing .studio-system-stage:nth-child(3)::before { animation-delay: 1.79s; }
.about-hero-initializing .studio-system-stage:nth-child(4)::before { animation-delay: 1.96s; }

.about-structure-field {
  background:
    radial-gradient(ellipse 46% 72% at var(--about-light-x) var(--about-light-y), rgba(240, 248, 250, .28), rgba(151, 195, 212, .1) 48%, transparent 76%),
    linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, .12) 34%, transparent 52%);
  opacity: .52;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%);
}

.about-structure-field::before {
  position: absolute;
  inset: -24% -34%;
  background: linear-gradient(112deg, transparent 36%, rgba(245, 251, 252, .08) 43%, rgba(228, 244, 249, .46) 50%, rgba(139, 191, 211, .12) 58%, transparent 65%);
  content: '';
  opacity: .2;
  transform: translate3d(-28%, 0, 0);
}

.about-structure-field::after {
  position: absolute;
  inset: 8% 4%;
  background:
    linear-gradient(90deg, transparent 7%, rgba(36, 105, 132, .28) 7.1%, rgba(36, 105, 132, .28) 7.2%, transparent 7.3%) 0 24% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 26%, rgba(47, 119, 147, .22) 26.1%, rgba(47, 119, 147, .22) 26.2%, transparent 26.3%) 0 74% / 100% 1px no-repeat,
    linear-gradient(180deg, transparent 18%, rgba(42, 111, 138, .24) 18.1%, rgba(42, 111, 138, .24) 18.2%, transparent 18.3%) 68% 0 / 1px 100% no-repeat,
    linear-gradient(142deg, transparent 49.85%, rgba(60, 130, 157, .2) 50%, transparent 50.15%);
  content: '';
  opacity: .22;
  clip-path: inset(0 100% 0 0);
}

.about-motion-ready .about-structure-field {
  animation: aboutApproachAmbient 21s ease-in-out infinite alternate;
}

.about-approach-active .about-structure-field::before {
  animation:
    aboutConstructionLight 2.7s ease-in-out 1 both,
    aboutApproachReflection 11s ease-in-out 5s infinite;
}

.about-approach-active .about-structure-field::after {
  animation: aboutGuidesBuild 1.45s ease-out 280ms 1 both;
}

html.reveal-enabled body.about-page .about-approach:not(.about-approach-active) .approach-steps[data-reveal-route] .approach-step::before,
html.reveal-enabled body.about-page .about-approach:not(.about-approach-active) .approach-steps[data-reveal-route] .approach-step::after {
  opacity: 0;
  animation: none;
}

body.about-page.about-motion-ready .about-approach.about-approach-active .approach-steps .approach-step::before {
  animation: aboutNodeLock 520ms cubic-bezier(.2, .72, .2, 1) 1 both;
}

body.about-page.about-motion-ready .about-approach.about-approach-active .approach-steps .approach-step::after {
  animation: aboutRouteMaterialize 560ms ease-out 1 both;
}

.about-approach-active .approach-step:nth-child(1)::before { animation-delay: 420ms !important; }
.about-approach-active .approach-step:nth-child(1)::after { animation-delay: 720ms !important; }
.about-approach-active .approach-step:nth-child(2)::before { animation-delay: 1.05s !important; }
.about-approach-active .approach-step:nth-child(2)::after { animation-delay: 1.35s !important; }
.about-approach-active .approach-step:nth-child(3)::before { animation-delay: 1.68s !important; }
.about-approach-active .approach-step:nth-child(3)::after { animation-delay: 1.98s !important; }
.about-approach-active .approach-step:nth-child(4)::before { animation-delay: 2.31s !important; }

.about-principles-material {
  background:
    radial-gradient(ellipse 48% 72% at var(--about-light-x) var(--about-light-y), rgba(84, 166, 201, .14), rgba(24, 67, 91, .05) 48%, transparent 76%),
    linear-gradient(118deg, transparent 16%, rgba(83, 154, 184, .06) 36%, transparent 54%);
  opacity: .72;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 88%, transparent);
}

.about-principles-material::before {
  position: absolute;
  inset: -12%;
  background: radial-gradient(ellipse 56% 82% at 30% 48%, rgba(1, 8, 16, .56), transparent 72%);
  content: '';
  opacity: .42;
}

.about-principles-material::after {
  position: absolute;
  inset: -20%;
  background: linear-gradient(114deg, transparent 40%, rgba(143, 207, 232, .06) 47%, rgba(178, 224, 241, .24) 50%, rgba(77, 155, 187, .06) 54%, transparent 61%);
  content: '';
  opacity: 0;
  transform: translate3d(44%, 0, 0);
}

.about-motion-ready .about-principles-material::before {
  animation: aboutDarkMaterial 24s ease-in-out infinite alternate;
}

.about-principles-active .about-principles-material::after {
  animation:
    aboutPrinciplesReflection 2.2s ease-in-out 1.4s 1 both,
    aboutRareFracture 11.5s ease-in-out 6s infinite;
}

.about-page .beliefs-list::before {
  animation: none;
  transform: scaleY(1);
}

html.reveal-enabled body.about-page .about-beliefs:not(.about-principles-active) .beliefs-list[data-reveal-route]::before {
  opacity: 0;
  animation: none;
}

body.about-page.about-motion-ready .about-beliefs.about-principles-active .beliefs-list::before {
  animation: aboutSpineForm 1.45s ease-out 260ms 1 both;
}

.about-page .about-beliefs .belief-item::after {
  position: absolute;
  top: 50%;
  left: 3px;
  display: block;
  width: 2px;
  height: 72%;
  background: linear-gradient(180deg, transparent, rgba(116, 205, 239, .78) 28%, rgba(92, 175, 211, .3) 72%, transparent);
  content: '';
  opacity: 0;
  transform: translateY(-50%) scaleY(.08);
  transform-origin: center bottom;
}

.about-principles-active .belief-item::after {
  animation: aboutPillarLight 760ms ease-out 1 both;
}

.about-principles-active .belief-item:nth-child(1)::after { animation-delay: .72s; }
.about-principles-active .belief-item:nth-child(2)::after { animation-delay: 1.02s; }
.about-principles-active .belief-item:nth-child(3)::after { animation-delay: 1.32s; }
.about-principles-active .belief-item:nth-child(4)::after { animation-delay: 1.62s; }

.about-principles-active .belief-item::before {
  animation: aboutPrincipleLock 500ms ease-out 1 both;
}

.about-principles-active .belief-item:nth-child(1)::before { animation-delay: .72s; }
.about-principles-active .belief-item:nth-child(2)::before { animation-delay: 1.02s; }
.about-principles-active .belief-item:nth-child(3)::before { animation-delay: 1.32s; }
.about-principles-active .belief-item:nth-child(4)::before { animation-delay: 1.62s; }

@media (hover: hover) and (pointer: fine) {
  .about-beliefs .belief-item:hover::after {
    opacity: .82;
    transform: translateY(-50%) scaleY(.86);
  }

  .about-beliefs .belief-item:hover {
    border-bottom-color: rgba(123, 196, 226, .28);
  }
}

.about-worldwide-space {
  background:
    radial-gradient(ellipse 62% 22% at 50% 48%, rgba(89, 185, 222, .2), rgba(41, 111, 145, .06) 54%, transparent 78%),
    radial-gradient(circle at 50% 96%, rgba(142, 217, 244, .56) 0 2px, transparent 3px);
  opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
}

.about-worldwide-space::before {
  position: absolute;
  top: 42%;
  right: 8%;
  left: 8%;
  height: 18%;
  background: radial-gradient(ellipse 50% 42% at 50% 50%, rgba(150, 220, 247, .5), rgba(72, 163, 203, .14) 46%, transparent 76%);
  content: '';
  opacity: .12;
  transform: scaleX(.08);
  transform-origin: center;
}

.about-worldwide-space::after {
  position: absolute;
  inset: 12% 6%;
  background:
    linear-gradient(162deg, transparent 49.86%, rgba(118, 198, 230, .2) 50%, transparent 50.14%),
    linear-gradient(18deg, transparent 49.86%, rgba(118, 198, 230, .18) 50%, transparent 50.14%),
    linear-gradient(90deg, transparent 49.92%, rgba(137, 207, 234, .16) 50%, transparent 50.08%);
  content: '';
  opacity: 0;
  transform: scale(.18);
  transform-origin: 50% 46%;
}

.about-motion-ready .about-worldwide-space {
  animation: aboutWorldwideAmbient 22s ease-in-out infinite alternate;
}

.about-worldwide-active .about-worldwide-space::before {
  animation: aboutHorizonOpening 2s cubic-bezier(.2, .72, .2, 1) 320ms 1 both;
}

.about-worldwide-active .about-worldwide-space::after {
  animation: aboutPerspectiveOpen 1.75s ease-out 480ms 1 both;
}

.about-worldwide-active .moldova-band,
.about-worldwide-confirm .moldova-band {
  animation: aboutWorldwideCardResponse 1.7s ease-out 620ms 1 both;
}

.about-page .moldova-network::before {
  position: absolute;
  z-index: 0;
  inset: -28%;
  background: linear-gradient(112deg, transparent 38%, rgba(199, 235, 248, .06) 45%, rgba(192, 232, 247, .3) 50%, rgba(104, 184, 217, .06) 57%, transparent 64%);
  content: '';
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-58%, 0, 0);
}

.about-worldwide-active .moldova-network::before,
.about-worldwide-confirm .moldova-network::before {
  animation: aboutWorldwideReflection 1.5s ease-in-out 820ms 1 both;
}

.about-worldwide-confirm .about-worldwide-space::before {
  animation: aboutHorizonConfirm 1.55s ease-out 1 both;
}

.about-page.about-motion-ready .footer::before {
  transform: scaleX(0);
  transform-origin: left center;
}

.about-page.about-motion-ready .footer::after {
  opacity: 0;
  transform: scale(.55);
}

.about-page.about-system-complete .footer::before {
  animation: aboutFooterLineComplete 880ms ease-out 1 both;
}

.about-page.about-system-complete .footer::after {
  animation: aboutFooterEndpointComplete 520ms ease-out 720ms 1 both;
}

@keyframes aboutAssemblyLayerIn {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: .7; transform: translate3d(0, 0, 0); }
}

@keyframes aboutPlaneLockRight {
  from { opacity: 0; transform: translate3d(26px, -5px, 0); }
  to { opacity: .72; transform: translate3d(0, 0, 0); }
}

@keyframes aboutPlaneLockLeft {
  from { opacity: 0; transform: translate3d(-22px, 12px, 0); }
  to { opacity: .52; transform: translate3d(0, 0, 0); }
}

@keyframes aboutCalibrationSweep {
  0% { opacity: 0; transform: translate3d(-64%, 0, 0); }
  24% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(64%, 0, 0); }
}

@keyframes aboutHeroLightField {
  0%, 100% { transform: translate3d(-1%, -1%, 0) scale(1.01); }
  50% { transform: translate3d(3%, 2%, 0) scale(1.035); }
}

@keyframes aboutHeroReflection {
  0%, 58%, 100% { opacity: 0; transform: translate3d(-36%, -8%, 0) rotate(-9deg); }
  70% { opacity: .48; }
  84% { opacity: 0; transform: translate3d(42%, 12%, 0) rotate(-9deg); }
}

@keyframes aboutSystemCalibrate {
  0%, 100% { border-color: rgba(119, 183, 213, .28); box-shadow: 0 22px 48px rgba(1, 9, 18, .24), inset 0 1px 0 rgba(221, 241, 249, .06); }
  48% { border-color: rgba(139, 218, 247, .72); box-shadow: 0 24px 56px rgba(8, 77, 111, .28), inset 0 1px 0 rgba(226, 247, 253, .24); }
}

@keyframes aboutMediaReflection {
  0% { opacity: 0; transform: translate3d(-62%, 0, 0); }
  34% { opacity: .8; }
  100% { opacity: 0; transform: translate3d(62%, 0, 0); }
}

@keyframes aboutStageTrace {
  from { opacity: .18; clip-path: inset(0 100% 0 0); }
  to { opacity: .92; clip-path: inset(0 0 0 0); }
}

@keyframes aboutStageLock {
  0% { border-color: rgba(120, 205, 238, .24); background: #0a2234; box-shadow: none; }
  52% { border-color: rgba(173, 232, 253, 1); background: #2b7899; box-shadow: 0 0 13px rgba(91, 202, 244, .5); }
  100% { border-color: rgba(120, 205, 238, .74); background: #0d3047; box-shadow: 0 0 0 3px rgba(84, 185, 225, .08); }
}

@keyframes aboutApproachAmbient {
  0%, 100% { opacity: .46; transform: translate3d(-1.5%, 0, 0) scale(1.01); }
  50% { opacity: .68; transform: translate3d(2.5%, 1%, 0) scale(1.025); }
}

@keyframes aboutConstructionLight {
  0% { opacity: .12; transform: translate3d(-38%, 0, 0); }
  42% { opacity: .86; }
  100% { opacity: .18; transform: translate3d(38%, 0, 0); }
}

@keyframes aboutApproachReflection {
  0%, 62%, 100% { opacity: .1; transform: translate3d(-34%, 0, 0); }
  74% { opacity: .5; }
  88% { opacity: .08; transform: translate3d(38%, 0, 0); }
}

@keyframes aboutGuidesBuild {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: .38; clip-path: inset(0 0 0 0); }
}

@keyframes aboutNodeLock {
  0% { border-color: rgba(18, 132, 179, .26); background: #dce9ee; box-shadow: none; }
  56% { border-color: rgba(4, 119, 168, 1); background: #fff; box-shadow: 0 0 0 6px rgba(25, 136, 181, .14), 0 0 17px rgba(22, 126, 169, .32); }
  100% { border-color: rgba(18, 132, 179, .9); background: #eef6f8; box-shadow: 0 0 0 4px rgba(40, 143, 184, .1); }
}

@keyframes aboutRouteMaterialize {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: .9; clip-path: inset(0 0 0 0); }
}

@keyframes aboutDarkMaterial {
  0%, 100% { opacity: .34; transform: translate3d(-4%, 0, 0) scale(1.04); }
  50% { opacity: .7; transform: translate3d(8%, 2%, 0) scale(1.08); }
}

@keyframes aboutPrinciplesReflection {
  0% { opacity: 0; transform: translate3d(44%, 0, 0); }
  42% { opacity: .68; }
  100% { opacity: 0; transform: translate3d(-42%, 0, 0); }
}

@keyframes aboutRareFracture {
  0%, 68%, 100% { opacity: 0; transform: translate3d(44%, 0, 0); }
  78% { opacity: .44; }
  90% { opacity: 0; transform: translate3d(-42%, 0, 0); }
}

@keyframes aboutSpineForm {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes aboutPillarLight {
  0% { opacity: 0; transform: translateY(-35%) scaleY(.08); }
  46% { opacity: .92; transform: translateY(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateY(-65%) scaleY(.18); }
}

@keyframes aboutPrincipleLock {
  0% { border-color: rgba(115, 195, 229, .28); background: #182936; box-shadow: none; }
  54% { border-color: rgba(148, 222, 250, 1); background: #2b7392; box-shadow: 0 0 14px rgba(86, 187, 226, .4); }
  100% { border-color: rgba(115, 195, 229, .86); background: #1c3545; box-shadow: 0 0 0 3px rgba(83, 178, 215, .08); }
}

@keyframes aboutWorldwideAmbient {
  0%, 100% { opacity: .48; transform: translate3d(-2%, 0, 0) scale(1.01); }
  50% { opacity: .7; transform: translate3d(2%, -1%, 0) scale(1.025); }
}

@keyframes aboutHorizonOpening {
  0% { opacity: .08; transform: scaleX(.08); }
  56% { opacity: .72; }
  100% { opacity: .38; transform: scaleX(1); }
}

@keyframes aboutPerspectiveOpen {
  from { opacity: 0; transform: scale(.18); }
  to { opacity: .4; transform: scale(1); }
}

@keyframes aboutWorldwideCardResponse {
  0%, 100% { border-color: rgba(125, 199, 228, .34); box-shadow: 0 22px 48px rgba(1, 8, 16, .3), 0 0 30px rgba(72, 157, 192, .09), inset 0 1px 0 rgba(190, 226, 240, .05); }
  50% { border-color: rgba(142, 218, 246, .68); box-shadow: 0 26px 58px rgba(1, 8, 16, .4), 0 0 40px rgba(82, 178, 215, .2), inset 0 1px 0 rgba(215, 241, 250, .2); }
}

@keyframes aboutWorldwideReflection {
  0% { opacity: 0; transform: translate3d(-58%, 0, 0); }
  40% { opacity: .72; }
  100% { opacity: 0; transform: translate3d(58%, 0, 0); }
}

@keyframes aboutHorizonConfirm {
  0%, 100% { opacity: .28; transform: scaleX(.78); }
  48% { opacity: .58; transform: scaleX(1.06); }
}

@keyframes aboutFooterLineComplete {
  from { opacity: .28; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes aboutFooterEndpointComplete {
  0% { opacity: 0; transform: scale(.55); }
  58% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}

@media screen and (max-width: 1023px) {
  .about-hero-assembly::before { right: -4%; width: 48vw; }
  .about-hero-assembly::after { right: 34%; width: 38vw; }
  .about-structure-field::after { inset-inline: 2%; }
}

@media screen and (max-width: 767px) {
  .about-hero-assembly {
    background:
      linear-gradient(132deg, rgba(139, 204, 230, .1), rgba(12, 44, 67, .04) 58%, transparent 59%) 72% 54% / 62% 48% no-repeat,
      linear-gradient(rgba(136, 213, 241, .4), rgba(136, 213, 241, .4)) 16% 26% / 24px 1px no-repeat,
      linear-gradient(rgba(136, 213, 241, .34), rgba(136, 213, 241, .34)) 16% 26% / 1px 18px no-repeat,
      radial-gradient(ellipse 88% 58% at 68% 52%, rgba(79, 169, 207, .14), transparent 76%);
  }

  .about-hero-assembly::before {
    top: 42%;
    right: -10%;
    width: 72vw;
    height: 44%;
  }

  .about-hero-assembly::after,
  .about-calibration-sweep::after,
  .about-structure-field::after,
  .about-principles-material::after {
    display: none;
  }

  .about-calibration-sweep {
    inset: -12% -42%;
  }

  .about-structure-field {
    background: radial-gradient(ellipse 92% 52% at 58% 42%, rgba(240, 248, 250, .28), rgba(151, 195, 212, .08) 48%, transparent 78%);
  }

  .about-structure-field::before {
    inset: -16% -68%;
  }

  body.about-page.about-motion-ready .about-approach.about-approach-active .approach-steps .approach-step::after {
    animation-name: aboutRouteMaterializeVertical;
  }

  .about-principles-material {
    background: radial-gradient(ellipse 88% 64% at 68% 38%, rgba(84, 166, 201, .12), rgba(24, 67, 91, .04) 52%, transparent 78%);
  }

  .about-worldwide-space::after {
    background:
      linear-gradient(162deg, transparent 49.88%, rgba(118, 198, 230, .17) 50%, transparent 50.12%),
      linear-gradient(18deg, transparent 49.88%, rgba(118, 198, 230, .15) 50%, transparent 50.12%);
  }
}

@keyframes aboutRouteMaterializeVertical {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to { opacity: .86; clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero-assembly,
  .about-structure-field,
  .about-principles-material,
  .about-worldwide-space {
    opacity: .52;
    transform: none;
    animation: none;
  }

  .about-hero-assembly::before,
  .about-hero-assembly::after {
    opacity: .38;
    transform: none;
    animation: none;
  }

  .about-calibration-sweep,
  .about-calibration-sweep::after,
  .studio-system-media::before,
  .about-structure-field::before,
  .about-principles-material::after,
  .about-worldwide-space::before,
  .about-page .moldova-network::before,
  .about-page .about-beliefs .belief-item::after {
    display: none;
  }

  .about-structure-field::after,
  .about-worldwide-space::after {
    opacity: .22;
    clip-path: none;
    transform: none;
    animation: none;
  }

  .about-page .beliefs-list::before {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .about-page.about-motion-ready .footer::before,
  .about-page.about-motion-ready .footer::after {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .about-hero-initializing .studio-visual,
  .about-worldwide-active .moldova-band,
  .about-worldwide-confirm .moldova-band,
  .about-hero-initializing .studio-system-stages::before,
  .about-hero-initializing .studio-system-stage::before,
  .about-approach-active .approach-step::before,
  .about-approach-active .approach-step::after,
  .about-principles-active .belief-item::before {
    animation: none;
  }
}

/* ===== CONTACT PAGE ===== */
.contact-page main {
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 12%, rgba(56, 189, 248, .13), transparent 30%),
    linear-gradient(135deg, var(--color-bg), var(--color-bg-secondary));
}

.contact-hero {
  --contact-light-x: 66%;
  --contact-light-y: 38%;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(560px, 72vh, 760px);
  padding: clamp(116px, 11vw, 156px) 0 clamp(76px, 8vw, 108px);
  background: #071321;
  isolation: isolate;
}

.contact-hero::before,
.contact-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  pointer-events: none;
}

.contact-hero-signal {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent, rgba(103, 204, 243, .28) 48%, transparent) 74.5% 100% / 1px 44% no-repeat,
    radial-gradient(ellipse 62% 76% at var(--contact-light-x) var(--contact-light-y), rgba(74, 190, 235, .2), rgba(33, 112, 168, .08) 40%, transparent 72%),
    radial-gradient(circle at 73% 36%, rgba(159, 229, 255, .16) 0 2px, transparent 4px),
    radial-gradient(circle at 82% 54%, rgba(91, 197, 239, .13) 0 2px, transparent 4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}

.contact-motion-ready .contact-hero-signal {
  opacity: 1;
  animation: contactHeroField 22s ease-in-out infinite alternate;
}

.contact-hero-signal::before,
.contact-hero-signal::after {
  position: absolute;
  top: -18%;
  right: -18%;
  width: min(1040px, 78vw);
  aspect-ratio: 2.1 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(139, 222, 253, .08) 56%, rgba(118, 213, 249, .58) 57.2%, rgba(57, 157, 207, .16) 59%, transparent 61%);
  content: '';
  opacity: 0;
  pointer-events: none;
  transform: translate3d(32%, -18%, 0) rotate(-13deg) scale(.48);
  transform-origin: center;
  -webkit-mask-image: linear-gradient(105deg, transparent 2%, #000 26%, #000 82%, transparent 98%);
  mask-image: linear-gradient(105deg, transparent 2%, #000 26%, #000 82%, transparent 98%);
}

.contact-hero-signal::after {
  top: -25%;
  right: -26%;
  width: min(1220px, 88vw);
  background: radial-gradient(ellipse at center, transparent 57%, rgba(129, 220, 253, .06) 58%, rgba(104, 204, 242, .32) 59%, transparent 61.5%);
}

.contact-hero-signal-active .contact-hero-signal::before {
  animation: contactIncomingWave 2.35s cubic-bezier(.18, .68, .25, 1) 1 both;
}

.contact-hero-signal-active .contact-hero-signal::after {
  animation: contactIncomingEcho 2.9s cubic-bezier(.2, .62, .22, 1) 520ms 1 both;
}

.contact-signal-core {
  position: absolute;
  top: 31%;
  right: 25%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(181, 237, 255, .9);
  border-radius: 50%;
  background: #b9ecff;
  box-shadow: 0 0 0 5px rgba(92, 200, 241, .08), 0 0 18px rgba(78, 194, 239, .38);
  opacity: .72;
}

.contact-motion-ready .contact-signal-core {
  animation: contactCoreIdle 14s ease-in-out 4s infinite;
}

.contact-signal-core::before,
.contact-signal-core::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(113, 211, 247, .36);
  border-radius: 50%;
  content: '';
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
}

.contact-signal-core::after {
  width: 58px;
  height: 58px;
  border-color: rgba(103, 195, 232, .22);
}

.contact-hero-signal-active .contact-signal-core {
  animation: contactCoreCharge 2.6s ease-out 1 both;
}

.contact-hero-signal-active .contact-signal-core::before {
  animation: contactCoreRing 1.5s ease-out 220ms 1 both;
}

.contact-hero-signal-active .contact-signal-core::after {
  animation: contactCoreRing 1.9s ease-out 640ms 1 both;
}

.contact-hero::before {
  background:
    linear-gradient(90deg, rgba(4, 13, 25, .88) 0%, rgba(5, 15, 28, .7) 27%, rgba(6, 17, 30, .28) 49%, rgba(6, 17, 30, .06) 72%),
    linear-gradient(180deg, rgba(5, 14, 25, .34) 0%, transparent 34%);
}

.contact-hero::after {
  top: auto;
  height: clamp(84px, 10vw, 144px);
  background: linear-gradient(180deg, transparent, rgba(6, 15, 27, .58) 58%, var(--color-bg-secondary));
}

.contact-main-inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: end;
}

.contact-hero-inner {
  width: 100%;
}

.contact-copy {
  position: relative;
  z-index: 1;
  max-width: min(650px, 47vw);
}

.contact-hotspots {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  pointer-events: none;
}

.contact-hotspot {
  --hotspot-y: 0vw;
  position: absolute;
  top: calc(50% + var(--hotspot-y));
  left: 77.05%;
  width: clamp(56px, 3.8vw, 70px);
  height: clamp(56px, 3.8vw, 70px);
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.contact-hotspot:hover,
.contact-hotspot:focus-visible {
  border-color: rgba(113, 211, 247, .58);
  background: rgba(45, 153, 205, .1);
  box-shadow: 0 0 20px rgba(66, 184, 229, .2);
  outline: none;
  transform: translate(-50%, -50%) scale(1.04);
}

.contact-hotspot:focus-visible {
  border-color: rgba(145, 225, 255, .86);
  box-shadow: 0 0 0 2px rgba(8, 23, 38, .72), 0 0 22px rgba(66, 184, 229, .24);
}

.contact-hotspot--telegram { --hotspot-y: -14.09vw; }
.contact-hotspot--whatsapp { --hotspot-y: -9.12vw; }
.contact-hotspot--viber { --hotspot-y: -3.98vw; }
.contact-hotspot--email { --hotspot-y: 1.17vw; }
.contact-hotspot--phone { --hotspot-y: 6.31vw; }

@media screen and (min-width: 1024px) and (min-aspect-ratio: 4 / 3) {
  .contact-hotspots {
    display: block;
  }
}

.contact-copy h1 {
  max-width: 760px;
  margin-bottom: 22px;
  color: var(--color-text);
  font-size: clamp(42px, 5vw, 74px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.02;
}

.contact-main {
  --contact-light-x: 72%;
  --contact-light-y: 42%;
  --contact-channel-rgb: 93, 207, 246;
  --contact-channel-y: 50%;
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: clamp(24px, 3vw, 42px) 0 clamp(46px, 5vw, 68px);
  background: #081521 url('../assets/images/contact-section-bg.webp') 60% center / cover no-repeat;
  isolation: isolate;
}

.contact-main::before,
.contact-main::after {
  position: absolute;
  z-index: 0;
  content: '';
  pointer-events: none;
}

.contact-main::before {
  inset: 0;
  background:
    linear-gradient(180deg, var(--color-bg-secondary) 0, rgba(23, 32, 51, .8) 24px, transparent 112px),
    linear-gradient(90deg, rgba(4, 14, 27, .76) 0%, rgba(5, 17, 31, .52) 31%, rgba(7, 22, 38, .2) 62%, rgba(5, 17, 30, .28) 100%),
    radial-gradient(ellipse 58% 74% at 76% 42%, transparent 44%, rgba(4, 13, 24, .22) 100%);
}

.contact-main::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, rgba(11, 22, 35, .72) 58%, #0f1f2e 100%);
}

.contact-main-inner {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
  gap: clamp(34px, 4.5vw, 64px);
  align-items: start;
}

.contact-resonance-scene {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 18% 16% at 73% 0%, rgba(99, 202, 241, .22), transparent 76%),
    radial-gradient(ellipse 44% 68% at var(--contact-light-x) var(--contact-light-y), rgba(65, 170, 220, .18), rgba(34, 91, 139, .07) 44%, transparent 74%),
    radial-gradient(ellipse 20% 32% at 86% 40%, rgba(255, 182, 103, .08), transparent 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
}

.contact-motion-ready .contact-resonance-scene {
  opacity: 1;
  animation: contactCityBreathing 16s ease-in-out infinite alternate;
}

.contact-resonance-scene::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 64% 50%, rgba(110, 205, 244, .23), transparent 10%),
    radial-gradient(circle at 75% 53%, rgba(255, 178, 91, .2), transparent 8%),
    radial-gradient(circle at 84% 42%, rgba(91, 192, 233, .2), transparent 9%),
    radial-gradient(ellipse 36% 28% at 76% 48%, rgba(62, 154, 205, .14), transparent 72%);
  content: '';
  opacity: .12;
  transform: translateZ(0);
}

.contact-resonance-scene::after {
  position: absolute;
  top: 5%;
  right: -22%;
  width: min(1320px, 88vw);
  aspect-ratio: 2.25 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(var(--contact-channel-rgb), .08) 56%, rgba(var(--contact-channel-rgb), .62) 57.3%, rgba(var(--contact-channel-rgb), .16) 59.3%, transparent 62%);
  content: '';
  opacity: 0;
  transform: translate3d(24%, 18%, 0) rotate(9deg) scale(.5);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 24%, #000 82%, transparent 100%);
  mask-image: linear-gradient(100deg, transparent 0%, #000 24%, #000 82%, transparent 100%);
}

.contact-event-active .contact-resonance-scene::before {
  animation: contactCityResponse 4.8s ease-in-out 1 both;
}

.contact-event-active .contact-resonance-scene::after {
  animation: contactSectionWave 4.4s cubic-bezier(.2, .68, .22, 1) 1 both;
}

.contact-channel-active .contact-resonance-scene::before {
  animation: contactChannelEnvironment 1.05s ease-out 1 both;
}

.contact-channel-active .contact-resonance-scene::after {
  animation: contactChannelWave 900ms cubic-bezier(.16, .72, .24, 1) 1 both;
}

.contact-resonance-reflection {
  position: absolute;
  top: -42%;
  right: -8%;
  width: 74%;
  height: 186%;
  overflow: visible;
  opacity: 1;
  pointer-events: none;
  transform: translate3d(18%, -12%, 0) rotate(18deg);
}

.contact-resonance-reflection::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 28%, rgba(139, 219, 250, .02) 40%, rgba(176, 233, 255, .1) 49%, rgba(89, 180, 222, .04) 56%, transparent 70%);
  content: '';
  transform: translate3d(42%, 0, 0);
}

.contact-motion-ready .contact-resonance-reflection::before {
  animation: contactReflectionSweep 10.5s ease-in-out 1.4s infinite;
}

.contact-event-active .contact-resonance-reflection::before {
  animation: contactReflectionEvent 3.4s ease-in-out 1.15s 1 both;
}

.contact-resonance-reflection::after {
  position: absolute;
  top: var(--contact-channel-y);
  right: -2%;
  width: 82%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(var(--contact-channel-rgb), .14) 22%, rgba(var(--contact-channel-rgb), .72) 56%, transparent 100%);
  content: '';
  opacity: 0;
  transform: translate3d(-42%, 0, 0) rotate(-18deg) scaleX(.18);
  transform-origin: left center;
}

.contact-channel-active .contact-resonance-reflection::after {
  animation: contactDirectionalBeam 920ms ease-out 1 both;
}

.contact-side {
  position: sticky;
  top: 108px;
}

.contact-side::after {
  display: block;
  width: min(258px, 72%);
  height: 1px;
  margin-top: 28px;
  content: '';
  background: linear-gradient(90deg, rgba(82, 193, 236, .84), rgba(76, 181, 224, .2) 62%, transparent);
}

.contact-side::before {
  position: absolute;
  top: 17px;
  left: -8px;
  width: min(210px, 62%);
  height: 48px;
  background: radial-gradient(ellipse at left, rgba(81, 196, 238, .16), transparent 72%);
  content: '';
  opacity: 0;
  pointer-events: none;
}

.contact-event-active .contact-side::before {
  animation: contactLabelResponse 1.2s ease-out 1.05s 1 both;
}

.contact-index {
  display: block;
  margin-bottom: 14px;
  color: var(--color-accent-cyan);
  font-family: var(--font-family-mono);
  font-size: 11px;
  letter-spacing: .14em;
}

.contact-side h2 {
  max-width: 420px;
  margin-bottom: 12px;
  color: var(--color-text);
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 600;
  letter-spacing: 0;
}

.contact-side p {
  max-width: 390px;
  color: rgba(214, 228, 237, .78);
  line-height: 1.6;
}

.contact-list {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 9px 12px;
  border: 1px solid rgba(116, 197, 231, .34);
  border-radius: 6px;
  background:
    radial-gradient(circle at 8% 4%, rgba(61, 180, 224, .13), transparent 32%),
    radial-gradient(circle at 48% 52%, rgba(43, 99, 157, .12), transparent 42%),
    radial-gradient(circle at 66% 48%, rgba(116, 83, 167, .07), transparent 28%),
    radial-gradient(circle at 94% 94%, rgba(48, 142, 190, .1), transparent 30%),
    linear-gradient(145deg, rgba(5, 17, 31, .86), rgba(8, 25, 42, .78) 52%, rgba(9, 28, 45, .84));
  box-shadow:
    inset 0 1px 0 rgba(205, 237, 248, .14),
    inset 0 -32px 72px rgba(2, 9, 18, .2),
    0 22px 56px rgba(1, 9, 18, .18);
  -webkit-backdrop-filter: blur(8px) saturate(112%);
  backdrop-filter: blur(8px) saturate(112%);
  isolation: isolate;
  transition: border-color 500ms ease, background-color 500ms ease, box-shadow 500ms ease;
}

.contact-list::before {
  position: absolute;
  z-index: 2;
  top: -1px;
  left: clamp(18px, 5vw, 72px);
  width: clamp(76px, 13vw, 148px);
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, rgba(89, 211, 246, .78), transparent);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .contact-list:hover {
    border-color: rgba(125, 207, 239, .44);
    box-shadow:
      inset 0 1px 0 rgba(216, 241, 250, .18),
      inset 0 -32px 72px rgba(2, 9, 18, .24),
      0 22px 60px rgba(7, 62, 92, .2);
  }
}

.contact-event-active .contact-list {
  animation: contactPanelResponse 1.15s ease-out 1.05s 1 both;
}

.contact-event-active .contact-list::before {
  animation: contactPanelTrace 1.35s ease-out 1.2s 1 both;
}

.contact-row {
  --row-accent: var(--color-accent-cyan);
  position: relative;
  display: grid;
  z-index: 1;
  grid-template-columns: 52px minmax(140px, .72fr) minmax(215px, 1.28fr) 42px;
  gap: 14px;
  align-items: center;
  min-height: 96px;
  overflow: hidden;
  padding: 16px 12px;
  border-bottom: 1px solid rgba(148, 195, 219, .3);
  background: linear-gradient(90deg, rgba(4, 16, 29, .1), rgba(12, 35, 54, .05) 72%, transparent);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: color 220ms ease-out, border-color 220ms ease-out, background 220ms ease-out, transform 220ms ease-out;
}

.contact-row:last-child {
  border-bottom-color: transparent;
}

.contact-row::before,
.contact-row::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  content: '';
}

.contact-row::before {
  background: linear-gradient(90deg, var(--row-accent), transparent 64%);
  opacity: 0;
  transform: scaleX(.18);
  transform-origin: left;
  transition: opacity var(--transition-base), transform var(--transition-slow);
}

.contact-row::after {
  right: auto;
  width: 44%;
  background: linear-gradient(90deg, transparent, var(--row-accent), transparent);
  opacity: 0;
  transform: translateX(-110%);
}

.contact-row:hover {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--row-accent), transparent 48%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--row-accent), transparent 88%), rgba(15, 42, 64, .24) 64%, rgba(10, 31, 49, .1));
  text-decoration: none;
  transform: translateX(2px);
}

.contact-row:focus-visible {
  border-color: color-mix(in srgb, var(--row-accent), white 18%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--row-accent), transparent 86%), rgba(7, 25, 43, .22) 68%, rgba(7, 25, 43, .1));
  outline: 1px solid color-mix(in srgb, var(--row-accent), transparent 42%);
  outline-offset: -2px;
}

.contact-row:hover::before,
.contact-row:focus-visible::before {
  opacity: 1;
  transform: scaleX(1);
}

.contact-row:hover::after,
.contact-row:focus-visible::after {
  opacity: 1;
  animation: contactLine 420ms ease-out 1;
}

.contact-row-fast {
  min-height: 96px;
}

.contact-row-fast::before {
  opacity: 0;
  transform: scaleX(.18);
}

.contact-row-telegram { --row-accent: #38BDF8; }
.contact-row-whatsapp { --row-accent: #22C55E; }
.contact-row-viber { --row-accent: #8B5CF6; }
.contact-row-email { --row-accent: #60A5FA; }
.contact-row-phone { --row-accent: #93C5FD; }

.contact-number {
  color: var(--row-accent);
  font-family: var(--font-family-mono);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .12em;
  transition: color var(--transition-base), opacity var(--transition-base);
}

.contact-channel {
  display: grid;
  gap: 8px;
}

.contact-channel strong {
  color: rgba(239, 247, 251, .92);
  font-size: clamp(21px, 1.8vw, 28px);
  font-weight: 650;
  transition: color 220ms ease-out;
}

.contact-channel small {
  color: rgba(195, 214, 225, .7);
  font-size: 12px;
  line-height: 1.45;
  transition: color 220ms ease-out;
}

.contact-value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: rgba(239, 247, 251, .92);
  font-family: var(--font-family-mono);
  font-size: clamp(14px, 1.2vw, 17px);
  transition: color 220ms ease-out;
}

.contact-row-email .contact-value {
  font-size: clamp(13px, 1.05vw, 16px);
  white-space: nowrap;
}

.contact-action {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--row-accent), transparent 58%);
  border-radius: 50%;
  background: rgba(8, 27, 45, .52);
  color: var(--row-accent);
  font-size: 18px;
  transition: transform var(--transition-base), border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}

.contact-action::before {
  position: absolute;
  inset: -1px;
  border: 1px solid color-mix(in srgb, var(--row-accent), transparent 36%);
  border-radius: inherit;
  content: '';
  opacity: 0;
  pointer-events: none;
  transform: scale(.82);
}

.contact-row:hover .contact-action,
.contact-row:focus-visible .contact-action,
.contact-row:active .contact-action,
.contact-row.is-contact-auto .contact-action {
  border-color: color-mix(in srgb, var(--row-accent), white 22%);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 14px color-mix(in srgb, var(--row-accent), transparent 78%);
  transform: translate(2px, -2px);
}

.contact-row:hover .contact-action::before,
.contact-row:focus-visible .contact-action::before,
.contact-row:active .contact-action::before,
.contact-row.is-contact-transmitting .contact-action::before,
.contact-row.is-contact-auto .contact-action::before {
  animation: contactArrowPulse 620ms ease-out 1;
}

.contact-row:hover .contact-number,
.contact-row:focus-visible .contact-number,
.contact-row:active .contact-number,
.contact-row.is-contact-auto .contact-number {
  color: color-mix(in srgb, var(--row-accent), white 24%);
}

.contact-row.is-contact-auto {
  background: linear-gradient(90deg, color-mix(in srgb, var(--row-accent), transparent 91%), rgba(12, 35, 54, .11) 66%, transparent);
}

.contact-row:focus-visible .contact-action {
  border-color: color-mix(in srgb, var(--row-accent), white 28%);
  background: rgba(255, 255, 255, .08);
}

.contact-row:hover .contact-value,
.contact-row:hover .contact-channel small,
.contact-row:focus-visible .contact-value,
.contact-row:focus-visible .contact-channel small {
  color: var(--color-text);
}

.contact-row:hover .contact-channel strong,
.contact-row:focus-visible .contact-channel strong {
  color: #fff;
}

@keyframes contactLine {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(230%); }
}

@keyframes contactHeroField {
  0%, 100% { transform: translate3d(-1.5%, 0, 0) scale(1.01); }
  38% { transform: translate3d(2.5%, 1.5%, 0) scale(1.035); }
  72% { transform: translate3d(5%, -1%, 0) scale(1.02); }
}

@keyframes contactIncomingWave {
  0% { opacity: 0; transform: translate3d(38%, -24%, 0) rotate(-13deg) scale(.42); }
  24% { opacity: .66; }
  58% { opacity: .48; }
  100% { opacity: 0; transform: translate3d(-32%, 24%, 0) rotate(-8deg) scale(1.34); }
}

@keyframes contactIncomingEcho {
  0% { opacity: 0; transform: translate3d(32%, -22%, 0) rotate(-12deg) scale(.5); }
  28% { opacity: .34; }
  100% { opacity: 0; transform: translate3d(-24%, 30%, 0) rotate(-7deg) scale(1.5); }
}

@keyframes contactCoreCharge {
  0%, 100% { opacity: .72; box-shadow: 0 0 0 5px rgba(92, 200, 241, .08), 0 0 18px rgba(78, 194, 239, .38); }
  22% { opacity: 1; box-shadow: 0 0 0 7px rgba(92, 200, 241, .14), 0 0 26px rgba(94, 207, 248, .62); }
  52% { opacity: .82; }
}

@keyframes contactCoreIdle {
  0%, 68%, 100% { opacity: .68; box-shadow: 0 0 0 5px rgba(92, 200, 241, .07), 0 0 16px rgba(78, 194, 239, .3); }
  76% { opacity: .94; box-shadow: 0 0 0 7px rgba(92, 200, 241, .12), 0 0 24px rgba(94, 207, 248, .52); }
  84% { opacity: .74; }
}

@keyframes contactCoreRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  24% { opacity: .72; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.34); }
}

@keyframes contactCityBreathing {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}

@keyframes contactCityResponse {
  0%, 100% { opacity: .12; }
  22% { opacity: .7; }
  46% { opacity: .32; }
  62% { opacity: .58; }
}

@keyframes contactSectionWave {
  0% { opacity: 0; transform: translate3d(28%, 18%, 0) rotate(9deg) scale(.46); }
  20% { opacity: .58; }
  68% { opacity: .34; }
  100% { opacity: 0; transform: translate3d(-48%, -10%, 0) rotate(3deg) scale(1.42); }
}

@keyframes contactChannelEnvironment {
  0%, 100% { opacity: .12; }
  28% { opacity: .78; }
  64% { opacity: .34; }
}

@keyframes contactChannelWave {
  0% { opacity: 0; transform: translate3d(20%, 22%, 0) rotate(9deg) scale(.48); }
  28% { opacity: .82; }
  100% { opacity: 0; transform: translate3d(-22%, 4%, 0) rotate(5deg) scale(1.12); }
}

@keyframes contactReflectionSweep {
  0%, 18% { opacity: .14; transform: translate3d(42%, -8%, 0); }
  46% { opacity: .72; }
  72%, 100% { opacity: .08; transform: translate3d(-54%, 16%, 0); }
}

@keyframes contactReflectionEvent {
  0% { opacity: .08; transform: translate3d(44%, -8%, 0); }
  42% { opacity: .82; }
  100% { opacity: .08; transform: translate3d(-58%, 18%, 0); }
}

@keyframes contactDirectionalBeam {
  0% { opacity: 0; transform: translate3d(-42%, 0, 0) rotate(-18deg) scaleX(.18); }
  28% { opacity: .78; }
  100% { opacity: 0; transform: translate3d(28%, 0, 0) rotate(-18deg) scaleX(1); }
}

@keyframes contactPanelResponse {
  0%, 100% {
    border-color: rgba(116, 197, 231, .34);
    box-shadow: inset 0 1px 0 rgba(205, 237, 248, .14), inset 0 -32px 72px rgba(2, 9, 18, .2), 0 22px 56px rgba(1, 9, 18, .18);
  }
  42% {
    border-color: rgba(130, 220, 250, .64);
    box-shadow: inset 0 1px 0 rgba(218, 244, 252, .25), inset 0 -38px 82px rgba(1, 8, 17, .3), 0 22px 62px rgba(12, 94, 137, .2);
  }
}

@keyframes contactPanelTrace {
  0% { opacity: .36; transform: translateX(-38%) scaleX(.42); }
  42% { opacity: 1; transform: translateX(72%) scaleX(1.22); }
  100% { opacity: .78; transform: translateX(0) scaleX(1); }
}

@keyframes contactLabelResponse {
  0%, 100% { opacity: 0; transform: translateX(-18%); }
  42% { opacity: 1; transform: translateX(12%); }
}

@keyframes contactArrowPulse {
  0% { opacity: 0; transform: scale(.82); }
  32% { opacity: .82; }
  100% { opacity: 0; transform: scale(1.46); }
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .contact-list {
    padding-right: 9px;
    padding-left: 9px;
    -webkit-backdrop-filter: blur(6px) saturate(108%);
    backdrop-filter: blur(6px) saturate(108%);
  }

  .contact-row,
  .contact-row-fast {
    grid-template-columns: 44px minmax(124px, .72fr) minmax(188px, 1.28fr) 40px;
    gap: 11px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .contact-channel strong {
    font-size: clamp(20px, 2vw, 24px);
  }

  .contact-value {
    font-size: 14px;
  }

  .contact-row-email .contact-value {
    font-size: 12px;
  }

  .contact-action {
    width: 40px;
    height: 40px;
  }
}

@media screen and (max-width: 1023px) {
  .contact-hero-signal::before,
  .contact-hero-signal::after {
    right: -42%;
    width: 116vw;
  }

  .contact-signal-core {
    right: 20%;
  }

  .contact-resonance-scene::after {
    right: -48%;
    width: 124vw;
  }

  .contact-resonance-reflection {
    right: -18%;
    width: 88%;
  }

  .contact-main {
    background-position: 62% center;
  }

  .contact-main::before {
    background:
      linear-gradient(180deg, var(--color-bg-secondary) 0, rgba(23, 32, 51, .84) 22px, transparent 92px),
      linear-gradient(90deg, rgba(4, 14, 27, .79) 0%, rgba(5, 17, 31, .58) 52%, rgba(5, 17, 30, .35) 100%),
      radial-gradient(ellipse 70% 72% at 64% 42%, transparent 38%, rgba(4, 13, 24, .28) 100%);
  }

  .contact-main-inner {
    grid-template-columns: 1fr;
  }

  .contact-side {
    position: relative;
    top: auto;
  }

  .contact-side::after {
    margin-top: 22px;
  }

  .contact-list {
    padding: 8px 12px;
  }

  .contact-hero {
    background-position: 56% center;
  }

  .contact-copy {
    max-width: min(620px, 68vw);
  }
}

@media screen and (max-width: 767px) {
  .contact-hero-signal {
    background:
      linear-gradient(180deg, transparent, rgba(103, 204, 243, .2) 48%, transparent) 82% 100% / 1px 38% no-repeat,
      radial-gradient(ellipse 86% 66% at 70% 34%, rgba(74, 190, 235, .18), rgba(33, 112, 168, .06) 44%, transparent 76%),
      radial-gradient(circle at 78% 32%, rgba(159, 229, 255, .14) 0 2px, transparent 4px);
  }

  .contact-hero-signal::before {
    top: 4%;
    right: -76%;
    width: 174vw;
  }

  .contact-hero-signal::after,
  .contact-resonance-reflection {
    display: none;
  }

  .contact-signal-core {
    top: 29%;
    right: 14%;
  }

  .contact-resonance-scene {
    background:
      radial-gradient(ellipse 34% 12% at 72% 0%, rgba(99, 202, 241, .17), transparent 78%),
      radial-gradient(ellipse 82% 52% at 68% 36%, rgba(65, 170, 220, .16), rgba(34, 91, 139, .06) 46%, transparent 78%),
      radial-gradient(ellipse 36% 20% at 82% 34%, rgba(255, 182, 103, .06), transparent 74%);
  }

  .contact-resonance-scene::after {
    top: 18%;
    right: -92%;
    width: 190vw;
  }

  .contact-hero {
    min-height: 600px;
    padding-top: 104px;
    padding-bottom: 72px;
    background-position: 59% center;
  }

  .contact-hero::before {
    background:
      linear-gradient(90deg, rgba(4, 13, 25, .9) 0%, rgba(5, 15, 28, .76) 58%, rgba(6, 17, 30, .38) 100%),
      linear-gradient(180deg, rgba(5, 14, 25, .44) 0%, transparent 38%);
  }

  .contact-copy {
    max-width: 100%;
  }

  .contact-copy h1 {
    font-size: clamp(36px, 10vw, 52px);
  }

  .contact-main {
    padding: 20px 0 46px;
    background-position: 64% center;
  }

  .contact-main::before {
    background:
      linear-gradient(180deg, var(--color-bg-secondary) 0, rgba(23, 32, 51, .88) 18px, transparent 64px),
      linear-gradient(90deg, rgba(4, 14, 27, .86) 0%, rgba(5, 17, 31, .68) 64%, rgba(5, 17, 30, .5) 100%),
      linear-gradient(180deg, rgba(5, 15, 28, .12), rgba(5, 15, 28, .34));
  }

  .contact-main::after {
    height: 82px;
  }

  .contact-list {
    padding: 6px 8px;
    border-color: rgba(116, 197, 231, .3);
    background:
      radial-gradient(circle at 10% 4%, rgba(61, 180, 224, .09), transparent 32%),
      radial-gradient(circle at 94% 94%, rgba(48, 142, 190, .07), transparent 28%),
      linear-gradient(145deg, rgba(5, 17, 31, .91), rgba(8, 25, 42, .87) 54%, rgba(9, 28, 45, .9));
    box-shadow: inset 0 1px 0 rgba(205, 237, 248, .11), 0 16px 38px rgba(1, 9, 18, .14);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .contact-row,
  .contact-row-fast {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 12px;
    min-height: 96px;
    padding: 15px 8px;
  }

  .contact-row:hover {
    transform: none;
  }

  .contact-row:active {
    border-color: color-mix(in srgb, var(--row-accent), transparent 54%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--row-accent), transparent 88%), rgba(15, 42, 64, .2) 70%, transparent);
  }

  .contact-value {
    grid-column: 2 / 4;
    font-size: 14px;
  }

  .contact-row-email .contact-value {
    font-size: 13px;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .contact-action {
    width: 40px;
    height: 40px;
  }
}

@media screen and (max-width: 389px) {
  .contact-row,
  .contact-row-fast {
    grid-template-columns: 34px minmax(0, 1fr) 38px;
  }

  .contact-channel strong {
    font-size: 20px;
  }

  .contact-value {
    font-size: 13px;
  }

  .contact-row-email .contact-value {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-hero-signal,
  .contact-resonance-scene {
    opacity: .72;
    animation: none;
    transition: none;
  }

  .contact-hero-signal::before,
  .contact-hero-signal::after,
  .contact-signal-core::before,
  .contact-signal-core::after,
  .contact-resonance-scene::after,
  .contact-resonance-reflection {
    display: none;
  }

  .contact-resonance-scene::before {
    opacity: .18;
    animation: none;
  }

  .contact-event-active .contact-list,
  .contact-event-active .contact-list::before,
  .contact-event-active .contact-side::before,
  .contact-action::before {
    animation: none;
  }

  .contact-hotspot {
  transition: border-color 500ms ease, background-color 500ms ease, box-shadow 500ms ease;
  }

  .contact-hotspot:hover,
  .contact-hotspot:focus-visible {
    transform: translate(-50%, -50%);
  }

  .contact-row,
  .contact-row::before,
  .contact-row::after,
  .contact-action {
    transition: none;
  }

  .contact-row::after {
    animation: none;
  }

  .contact-row:hover,
  .contact-row:hover .contact-action,
  .contact-row:focus-visible .contact-action {
    transform: none;
  }
}

/* Preserve static backgrounds without JS; postpone offscreen portfolio media with JS. */
@media (scripting: enabled) {
  .portfolio-project-zone:not([data-background-ready]) { background-image: none; }
}