.brand-path{
  --intro-opacity: 1;
  --timeline-opacity: 0;
  --stats-opacity: 0;
  --panels-opacity: 0;
  --cta-opacity: 0;
  --path-opacity: 0;

  position: relative;
  min-height: 420vh;
  color: #fff;
  background:
    linear-gradient(180deg, #000 0%, #020814 36%, #03111f 58%, #000 100%);
  overflow: clip;
  isolation: isolate;
}

.brand-path__sticky{
  position: sticky;
  top: 0;
  min-height: 100svh;
  overflow: hidden;
}

.brand-path__canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: var(--path-opacity);
}

.brand-path__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 50% 44%, rgba(0,191,255,.10), transparent 70%),
    radial-gradient(720px 360px at 18% 72%, rgba(80,220,255,.045), transparent 74%),
    radial-gradient(720px 360px at 82% 72%, rgba(0,150,170,.04), transparent 74%);
}

.brand-path__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 32%, rgba(0,0,0,.18) 64%, rgba(0,0,0,.68) 100%),
    linear-gradient(180deg, rgba(0,0,0,.32) 0%, transparent 28%, rgba(0,0,0,.62) 100%);
}

.brand-path__inner{
  position: relative;
  z-index: 3;
  min-height: 100svh;
  max-width: 1760px;
  margin: 0 auto;
  padding: 76px 48px 54px;
}

.brand-path__intro{
  position: absolute;
  left: 48px;
  top: 76px;
  max-width: 760px;
  opacity: var(--intro-opacity);
  transform: translateY(calc((1 - var(--intro-opacity)) * -24px));
  pointer-events: none;
  filter: blur(calc((1 - var(--intro-opacity)) * 8px));
  z-index: 8;
}

.brand-path__intro span,
.brand-path__cta span{
  display: inline-block;
  margin-bottom: 16px;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(180,245,255,.54);
}

.brand-path__intro h2{
  margin: 0;
  font-size: clamp(58px, 6.5vw, 124px);
  line-height: .86;
  letter-spacing: -.07em;
}

.brand-path__intro p{
  max-width: 620px;
  margin: 24px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,255,255,.68);
}

.brand-path__timeline{
  position: absolute;
  left: 48px;
  right: 48px;
  top: 47%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  opacity: var(--timeline-opacity);
  transform: translateY(calc((1 - var(--timeline-opacity)) * 28px));
  pointer-events: none;
  filter: blur(calc((1 - var(--timeline-opacity)) * 8px));
  z-index: 10;
}

.brand-step{
  position: relative;
  opacity: calc(var(--step-opacity, 0) * .96);
  padding: 22px;
  border-radius: 24px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.085);
  background:
    linear-gradient(180deg, rgba(255,255,255,.064), rgba(255,255,255,.028)),
    rgba(0,18,32,.68);
  backdrop-filter: blur(12px) saturate(118%);
  -webkit-backdrop-filter: blur(12px) saturate(118%);
  box-shadow:
    0 30px 96px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition:
    opacity .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    filter .28s ease;
}

.brand-step::before{
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -1;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,14,24,.96), rgba(0,6,12,.68) 58%, transparent 78%);
  filter: blur(20px);
  pointer-events: none;
}

.brand-step.is-step-active{
  border-color: rgba(80,220,255,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.036)),
    rgba(0,28,46,.58);
  box-shadow:
    0 30px 98px rgba(0,0,0,.32),
    0 0 30px rgba(0,191,255,.075),
    inset 0 1px 0 rgba(255,255,255,.075);
  filter: brightness(1.07);
}

.brand-step span{
  display: block;
  margin-bottom: 12px;
  color: rgb(80,220,255);
  font-size: 13px;
  letter-spacing: .16em;
}

.brand-step h3{
  margin: 0 0 10px;
  font-size: 24px;
  letter-spacing: -.04em;
}

.brand-step p{
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255,255,255,.64);
}

.brand-path__stats{
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 54px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  opacity: var(--stats-opacity);
  transform: translateY(calc((1 - var(--stats-opacity)) * 24px));
  pointer-events: none;
  filter: blur(calc((1 - var(--stats-opacity)) * 8px));
  z-index: 9;
}

.brand-path__stats article{
  padding: 26px;
  border-radius: 28px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    rgba(0,18,32,.46);
  border: 1px solid rgba(210,235,255,.11);
  box-shadow:
    0 28px 90px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.brand-path__stats strong{
  display: block;
  font-size: clamp(34px, 3vw, 58px);
  line-height: .95;
  letter-spacing: -.055em;
  text-align: center;
}

.brand-path__stats span{
  display: block;
  margin-top: 10px;
  color: rgba(180,245,255,.68);
  text-align: center;
}

.brand-path__panels{
  position: absolute;
  left: 48px;
  right: 48px;
  top: 18%;
  display: grid;
  grid-template-columns: 1.25fr .85fr 1fr;
  gap: 18px;
  opacity: var(--panels-opacity);
  transform: translateY(calc((1 - var(--panels-opacity)) * 30px));
  pointer-events: none;
  filter: blur(calc((1 - var(--panels-opacity)) * 10px));
  z-index: 9;
}

.brand-panel{
  min-height: 320px;
  padding: 28px;
  border-radius: 30px;
  border: 1px solid rgba(210,235,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026)),
    rgba(0,18,32,.48);
  box-shadow:
    0 28px 90px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}

.brand-panel h3{
  margin: 0 0 22px;
  font-size: 30px;
  line-height: .95;
  letter-spacing: -.05em;
    text-align: center;
}

.brand-country-list{
  display: grid;
  gap: 10px;
}

.brand-country-list span{
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255,255,255,.68);
}

.brand-country-list b{
  color: rgb(180,245,255);
  font-weight: 500;
}

.brand-ring{
  position: relative;
  width: 178px;
  height: 178px;
  margin: 28px auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(rgb(0,215,255) 0 77.2%, rgba(255,255,255,.10) 77.2% 100%);
  box-shadow: 0 0 54px rgba(0,191,255,.14);
}

.brand-ring span{
  width: 122px;
  height: 122px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #020814;
  font-size: 30px;
  letter-spacing: -.04em;
}

.brand-panel p{
  margin: 0;
  text-align: center;
  color: rgba(255,255,255,.62);
  line-height: 1.45;
}

.brand-bars{
  display: grid;
  gap: 12px;
}

.brand-bars span{
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  color: rgba(255,255,255,.68);
}

.brand-bars span::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--v) * 100%);
  height: 2px;
  border-radius: 99px;
  background: rgb(80,220,255);
  box-shadow: 0 0 16px rgba(0,191,255,.32);
}

.brand-bars b{
  color: rgb(180,245,255);
  font-weight: 500;
}

.brand-path__cta{
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(860px, calc(100% - 96px));
  transform:
    translate(-50%, -50%)
    translateY(calc((1 - var(--cta-opacity)) * 34px))
    scale(calc(.94 + var(--cta-opacity) * .06));
  opacity: var(--cta-opacity);
  text-align: center;
  pointer-events: none;
  filter: blur(calc((1 - var(--cta-opacity)) * 10px));
  z-index: 11;
}

.brand-path__cta h2{
  margin: 0;
  font-size: clamp(54px, 6vw, 116px);
  line-height: .86;
  letter-spacing: -.07em;
}

.brand-path__cta p{
  max-width: 680px;
  margin: 24px auto 0;
  color: rgba(255,255,255,.68);
  font-size: 19px;
  line-height: 1.55;
}

.brand-path__cta a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 34px;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  color: #001018;
  background: rgb(180,245,255);
  text-decoration: none;
  font-weight: 600;
  pointer-events: auto;
}

.brand-path:not(.is-cta-active) .brand-path__cta a{
  pointer-events: none;
}

.brand-path__cta small{
  display: block;
  margin-top: 16px;
  color: rgba(255,255,255,.52);
}

@media (max-width: 980px){
  .brand-path{
    min-height: auto;
  }

  .brand-path__sticky{
    position: relative;
  }

  .brand-path__inner{
    padding: 74px 20px 96px;
  }

  .brand-path__canvas{
    display: none;
  }

  .brand-path__intro,
  .brand-path__timeline,
  .brand-path__stats,
  .brand-path__panels,
  .brand-path__cta{
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    opacity: 1;
    width: auto;
    pointer-events: auto;
    filter: none;
  }

  .brand-path__intro{
    max-width: none;
  }

  .brand-path__timeline{
    margin-top: 48px;
    grid-template-columns: 1fr;
  }

  .brand-step{
    opacity: 1;
    transform: none;
  }

  .brand-path__stats{
    margin-top: 18px;
    grid-template-columns: 1fr;
  }

  .brand-path__panels{
    margin-top: 18px;
    grid-template-columns: 1fr;
  }

  .brand-path__cta{
    margin-top: 64px;
    text-align: left;
  }
}
.brand-path__earth-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s linear;
}

@media (max-width: 1024px){
  .brand-path__earth-canvas{
    display: none;
  }
}
/* FINAL CTA layout override */

.brand-path__cta .brand-path__actions{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

.brand-path__cta .brand-path__actions a{
  margin-top: 0 !important;
}

.brand-path__cta .brand-path__registry{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;

  width: fit-content !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: rgba(180,245,255,.64) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;

  text-decoration: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(180,245,255,.22) !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  pointer-events: auto !important;
}

.brand-path__cta .brand-path__registry::before{
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 15px;
  height: 15px;
  flex: 0 0 15px;

  border-radius: 50%;
  background: rgba(70,220,120,.16);
  color: rgba(105,255,160,.95);

  font-size: 10px;
  line-height: 1;
  font-weight: 800;

  box-shadow: 0 0 18px rgba(70,220,120,.16);
}

.brand-path__cta .brand-path__registry:hover{
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(180,245,255,.48) !important;
  transform: translateY(-1px);
}

.brand-path__cta .brand-path__cta-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: fit-content !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 0 28px !important;

  border-radius: 999px !important;
  border: 0 !important;

  color: #001018 !important;
  background: rgb(180,245,255) !important;
  text-decoration: none !important;
  font-weight: 600 !important;

  box-shadow: none !important;
  pointer-events: auto !important;
}

.brand-path:not(.is-cta-active) .brand-path__registry,
.brand-path:not(.is-cta-active) .brand-path__cta-btn{
  pointer-events: none !important;
}

@media (max-width: 980px){
  .brand-path__cta .brand-path__actions{
    align-items: flex-start !important;
  }
}
/* ============================================================
   PERFORMANCE: на reduced-motion прячем тяжёлые canvas-слои
   (линия-путь и WebGL-Земля) — секция остаётся полностью
   функциональной, просто без анимированного фона.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .brand-path__canvas,
  .brand-path__earth-canvas{
    display: none !important;
  }
}