/* ==========================================================================
   ALGOMIX NOVA — sections: hero, bento, process, horizontal rail, pricing
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: calc(var(--header-h) + 3rem) 4rem;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.15rem, 0.8rem + 1.4vw, 1.9rem);
  max-width: 58rem;
}
.hero__grid > .chip { justify-self: start; }

.hero h1 { max-width: none; }

.hero__lead { max-width: 46ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* Строка метрик под hero — «доказательства» вместо декора */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 0.6rem + 3vw, 4rem);
  margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--glass-brd);
}
.stat { display: grid; gap: 0.25rem; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* буквы прозрачные — тень только фильтром по форме глифов */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.28));
}
:root[data-theme="light"] .stat__num {
  filter: drop-shadow(0 2px 8px rgba(14, 20, 46, 0.16));
}
.stat__label {
  font-size: var(--t-small);
  color: var(--txt-mute);
  max-width: 18ch;
  line-height: 1.35;
}

.hero__scroll {
  position: absolute;
  left: var(--gutter); bottom: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-mute);
}
.hero__scroll i {
  display: block;
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--cyan), transparent);
  animation: scroll-hint 2.2s var(--ease-io) infinite;
  transform-origin: top;
}
@keyframes scroll-hint {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(34px); opacity: 0; }
}

/* ---- Bento: услуги ------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.7rem, 0.4rem + 0.9vw, 1.15rem);
}

.svc {
  --span: 2;
  grid-column: span var(--span);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
  min-height: 268px;
  overflow: hidden;
}
.svc--wide { --span: 3; min-height: 300px; }
.svc--hero { --span: 4; min-height: 340px; }

.svc__num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  color: var(--txt-mute);
}
.svc h3 { margin-top: auto; }
.svc p { color: var(--txt-dim); font-size: 0.95rem; max-width: 42ch; }

.svc__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.svc__tag {
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  font-size: var(--t-micro);
  color: var(--txt-mute);
  transition: color var(--d-fast), border-color var(--d-fast);
}
.svc:hover .svc__tag { color: var(--txt-dim); border-color: var(--glass-brd-hi); }

.svc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-brd);
}
.svc__price { font-family: var(--font-mono); font-size: var(--t-small); color: var(--cyan); }

.svc__arrow {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-brd);
  color: var(--txt-dim);
  transition: transform var(--d-normal) var(--ease-spring),
              color var(--d-fast), border-color var(--d-fast), background var(--d-fast);
}
.svc:hover .svc__arrow {
  transform: rotate(-45deg);
  color: var(--btn-fg); background: var(--cyan); border-color: var(--cyan);
}
.svc__arrow svg { width: 15px; }

/* ---- Process: скролл-сторителлинг --------------------------------------- */

.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }

  .story__sticky > .btn { justify-self: start; }
.story__sticky {
  position: sticky;
  top: calc(var(--header-h) + 3rem);
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.story__meter { display: grid; gap: 0.5rem; }
.story__meter-bar { height: 2px; background: var(--glass-brd); position: relative; overflow: hidden; }
.story__meter-bar i {
  position: absolute; inset: 0 100% 0 0;
  background: var(--grad-primary);
  transition: right var(--d-normal) var(--ease-out);
}
.story__meter-label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-mute);
  font-variant-numeric: tabular-nums;
}

.story__steps { display: grid; gap: clamp(3rem, 1rem + 8vw, 9rem); }

.step { display: grid; gap: 1rem; opacity: 0.32; transition: opacity var(--d-slow) var(--ease-out); }
.step.is-active { opacity: 1; }
.step__idx {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  color: var(--cyan);
}
.step p { color: var(--txt-dim); }
.step ul { margin: 0.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.step li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.94rem;
  color: var(--txt-mute);
}
.step li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid var(--cyan);
}

/* ---- Горизонтальный рельс: готовые решения ------------------------------ */

.rail { position: relative; }
.rail__pin {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-content: center; overflow: hidden;
}
.rail__head { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; margin-bottom: 2.25rem; }

.rail__track {
  display: flex;
  width: max-content;
  gap: clamp(1rem, 0.5rem + 1.4vw, 1.8rem);
  padding-inline: var(--gutter);
  will-change: transform;
}

.rail__card {
  flex: none;
  width: min(84vw, 440px);
  padding: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem);
  display: grid;
  gap: 1rem;
  align-content: start;
}
.rail__card p { color: var(--txt-dim); font-size: 0.95rem; }
.rail__card .rail__kpi {
  display: flex; gap: 1.5rem; padding-top: 1rem;
  border-top: 1px solid var(--glass-brd); margin-top: 0.5rem;
}
.rail__kpi div { display: grid; gap: 0.25rem; }
.rail__kpi b {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  letter-spacing: -0.03em; color: var(--cyan);
}
.rail__kpi span { font-size: var(--t-micro); color: var(--txt-mute); }

.rail__progress {
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin: 2.5rem auto 0;
  height: 1px; background: var(--glass-brd); position: relative;
}
.rail__progress i {
  position: absolute; inset: 0 100% 0 0;
  background: var(--grad-primary);
}

/* ---- Pricing ------------------------------------------------------------- */

.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 0.4rem + 1vw, 1.3rem); }

.price {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  padding: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem);
}
.price--featured {
  border-color: rgba(0, 240, 255, 0.34);
  background: linear-gradient(160deg, rgba(0, 240, 255, 0.07), var(--glass) 46%);
}
.price__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.5rem 1rem;
  /* На узком экране чип «Чаще всего» должен переноситься, а не распирать карточку */
  flex-wrap: wrap;
}
.price__amount {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.045em;
}
.price__amount small { display: block; font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; color: var(--txt-mute); letter-spacing: 0; margin-bottom: 0.25rem; }
.price ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.price li { position: relative; padding-left: 1.75rem; font-size: 0.93rem; color: var(--txt-dim); }
.price li::before {
  content: "";
  position: absolute; left: 0; top: 0.42em;
  width: 12px; height: 7px;
  border-left: 1.5px solid var(--cyan);
  border-bottom: 1.5px solid var(--cyan);
  transform: rotate(-45deg);
}
.price .btn { width: 100%; }

/* ---- Reviews ------------------------------------------------------------- */

.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(0.8rem, 0.4rem + 1vw, 1.3rem); }
.review { padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); display: grid; gap: 1.5rem; align-content: start; }
.review__quote { font-size: 1.02rem; color: var(--txt-dim); line-height: 1.65; }
.review__who { display: flex; align-items: center; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--glass-brd); }
.review__avatar {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-primary);
  color: var(--btn-fg);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
}
.review__who b { display: block; font-size: 0.93rem; font-weight: 600; }
.review__who span { font-size: var(--t-small); color: var(--txt-mute); }

/* ---- CTA block ----------------------------------------------------------- */

.cta-block {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  padding: clamp(2rem, 1.2rem + 3vw, 4.2rem);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.cta-block::after {
  content: "";
  position: absolute; inset: auto -20% -60% auto;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(138, 43, 226, 0.28), transparent 66%);
  pointer-events: none;
}
.cta-block__aside { display: grid; gap: 1.25rem; align-content: start; }
.cta-block__contacts { display: grid; gap: 1rem; margin-top: 0.5rem; }
.cta-contact {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.98rem; color: var(--txt-dim);
  transition: color var(--d-fast);
}
.cta-contact:hover { color: var(--cyan); }
.cta-contact svg { width: 17px; flex: none; color: var(--txt-mute); }

/* Второй номер — мелко, выровнен под текст основного (иконка 17px + gap 0.85rem) */
.cta-phones { display: grid; gap: 0.25rem; }
.cta-contact--alt {
  padding-left: 2rem;
  font-size: var(--t-small);
  color: var(--txt-mute);
}

/* Третий номер — ещё мельче второго, выровнен по той же вертикали */
.cta-contact--mgr {
  padding-left: 2rem;
  font-size: var(--t-micro);
  color: var(--txt-mute);
}

/* ---- Tech stack strip ---------------------------------------------------- */

.stack { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.stack__item {
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--txt-dim);
  transition: color var(--d-fast), border-color var(--d-fast), transform var(--d-normal) var(--ease-spring);
}
.stack__item:hover { color: var(--cyan); border-color: var(--cyan); transform: translateY(-2px); }

/* ---- Page header (внутренние страницы) ---------------------------------- */

.page-head {
  min-height: 68svh;
  display: grid;
  align-content: center;
  padding-block: calc(var(--header-h) + 4rem) 3rem;
}
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--txt-mute); margin-bottom: 1.5rem;
}
.crumbs a:hover { color: var(--cyan); }
.crumbs span { opacity: 0.4; }

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__sticky { position: static; }
  .prices { grid-template-columns: minmax(0, 1fr); }
  .cta-block { grid-template-columns: minmax(0, 1fr); }
  .svc, .svc--wide, .svc--hero { --span: 3; }
}

@media (max-width: 1024px) {
  /* на узком экране 3D уходит под текст — гасим сцену скримом */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(6, 6, 10, 0.9) 0%,
      rgba(6, 6, 10, 0.84) 58%,
      rgba(6, 6, 10, 0.3) 100%);
  }

  /* В светлой теме скрим обязан быть светлым. Раньше здесь оставался тёмный
     цвет тёмной темы, и тёмный текст героя ложился на почти чёрную вуаль:
     замер давал контраст около 2,1:1 при норме 4,5:1. Заголовок, плашка
     «Аккредитована Минцифры России» и абзац под ними сливались с фоном. */
  :root[data-theme="light"] .hero::before {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.88) 58%,
      rgba(255, 255, 255, 0.35) 100%);
  }
}

@media (max-width: 720px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .svc, .svc--wide, .svc--hero { --span: 1; min-height: 0; }
  .hero__scroll { display: none; }
  .rail__pin { height: auto; padding-block: 2rem; }
  .rail__track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; transform: none !important; }
  .rail__card { scroll-snap-align: center; width: 82vw; }
  .rail__progress { display: none; }
}