/* ==========================================================================
   site/able — витрина (порт styles.css прототипа, обвязка прототипа вырезана).
   Типографика: Unbounded (дисплей) + Lora (логотип-wordmark) через Google Fonts,
   с системными fallback.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;600;700&family=Lora:ital,wght@0,500;0,600;1,500&display=swap');

:root{
  /* Обвязка прототипа (тёплая тёмная) */
  --bg:        #0C0A09;
  --bg-2:      #12100E;
  --panel:     #171412;
  --panel-2:   #1D1916;
  --line:      #292420;
  --line-2:    #363029;
  --tx:        #EFEAE3;
  --tx-2:      #A79E93;
  --tx-3:      #6F675E;
  --ac:        #FF6A4A;
  --ac-2:      #FFA37E;
  --ac-dim:    rgba(255,106,74,.13);
  --ok:        #5BC99A;
  --warn:      #DFA672;
  --err:       #FF8080;

  /* Градиент логотипа */
  --lg-red:    #C2452F;
  --lg-mid:    #D96B32;
  --lg-gold:   #E39A3C;

  /* Макет продукта (тёплый светлый, как фон логотипа) */
  --m-bg:      #F4F2ED;
  --m-surface: #FFFEFB;
  --m-ink:     #1A1613;
  --m-ink-2:   #5F594F;
  --m-ink-3:   #8F8779;
  --m-line:    #E6E2D8;
  --m-line-2:  #D5D0C3;
  --m-line-3:  #B8B0A1; /* контур белых кнопок: темнее, чтобы читался на белом фоне */
  --m-ac:      #C2452F;
  --m-ac-soft: #F9EAE4;
  --m-ok:      #167A55;
  --m-ok-soft: #E7F3ED;
  --m-err:     #C33A3A;
  --m-err-soft:#FBECEC;
  --m-warn:    #96682B;
  --m-warn-soft:#F7F0E3;

  --f-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-disp: "Unbounded", "Segoe UI", Arial, sans-serif;
  --f-serif: "Lora", Georgia, "Times New Roman", serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --r-xl: 28px;

  /* Шкала отступов (базовая 4px) и мелкой типографики — дисциплина
     warm-canvas систем (Awesome DESIGN.md / claude): компоненты снапятся
     к 4/8/12/16/24/32/48, мелкий текст — к 11/12/13/14/15 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-body: 15px;
  --track-caps: .14em; /* единый трекинг капс-подписей */

  /* Мягкие рассеянные тени в духе lovable.dev */
  --sh-soft: 0 2px 6px rgba(26,22,19,.04), 0 10px 34px -8px rgba(26,22,19,.09);
  --sh-lift: 0 4px 10px rgba(26,22,19,.05), 0 22px 48px -16px rgba(26,22,19,.16);

  --ease: cubic-bezier(.22,.8,.22,1);
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--tx);
  font-family:var(--f-ui);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

::selection{ background:rgba(255,106,74,.28); }

/* Дисплейная типографика */
.display{
  font-family:var(--f-disp);
  text-transform:uppercase;
  letter-spacing:.01em;
  font-weight:600;
  line-height:1.12;
}

.mono{ font-family:var(--f-mono); }

/* --------------------------------------------------------------------------
   Wordmark site/able — воспроизведение логотипа + motion
   -------------------------------------------------------------------------- */
.wm{
  display:inline-flex; align-items:baseline;
  font-family:var(--f-serif); font-weight:600; font-style:normal;
  font-size:21px; line-height:1; letter-spacing:.005em;
  white-space:nowrap;
}
.wm i{ font-style:normal; display:inline-block; }
.wm__site{ color:var(--m-ink); }
.wm--light .wm__site{ color:var(--tx); }
.wm__slash{
  color:var(--lg-red);
  margin:0 .02em;
  transform-origin:50% 72%;
  transform:rotate(calc(var(--wm-rot, 0) * 1deg));
  transition:transform .25s var(--ease);
}
.wm__able{
  background:linear-gradient(100deg, var(--lg-red) 0%, var(--lg-mid) 45%, var(--lg-gold) 90%);
  background-size:220% 100%;
  background-position:calc(var(--wm-shift, 0) * 60%) 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.wm--sm{ font-size:17px; }
.wm--hero{ font-size:clamp(44px, 7vw, 84px); font-weight:500; }
.wm--hero .wm__slash{ margin:0 .03em; }

/* Крупный hero-логотип: entrance из .wm--in + лёгкое дыхание слэша.
   Наклон слэша на скролл (--wm-rot) продолжает работать.
   Непрерывного перелива градиента у «able» НЕТ: на светлом фоне бесконечный
   wm-shimmer уводил окно градиента в светлый --lg-gold, и поверх «планеты из
   букв» слово периодически пропадало. После entrance «able» стоит так же
   стабильно, как «site» — цвет держится, перелив остаётся только на hover. */
.wm--big{ font-size:clamp(80px, 11.5vw, 168px); font-weight:500; }
.wm--big .wm__slash{ margin:0 .03em; }
.wm--big.wm--in .wm__able{
  animation:wm-rise .7s var(--ease) both .42s,
            wm-flow 1.6s var(--ease) both .42s;
}
.wm--big.wm--in .wm__slash{
  animation:wm-slash .8s var(--ease) both .3s,
            wm-breathe 5.5s ease-in-out 2.4s infinite;
}
@keyframes wm-breathe{ 0%,100%{ translate:0 0 } 50%{ translate:0 -.06em } }

/* Появление логотипа при загрузке: буквы поднимаются, слэш «прочерчивается» */
.wm--in .wm__site{ animation:wm-rise .7s var(--ease) both .05s; }
.wm--in .wm__slash{ animation:wm-slash .8s var(--ease) both .3s; }
.wm--in .wm__able{ animation:wm-rise .7s var(--ease) both .42s, wm-flow 1.6s var(--ease) both .42s; }
@keyframes wm-rise{
  from{ opacity:0; transform:translateY(.45em); }
  to{ opacity:1; transform:none; }
}
@keyframes wm-slash{
  0%{ opacity:0; transform:translateY(-.5em) rotate(18deg) scaleY(.4); }
  60%{ opacity:1; transform:translateY(.04em) rotate(-4deg) scaleY(1.04); }
  100%{ opacity:1; transform:none; }
}
@keyframes wm-flow{
  from{ background-position:120% 0; }
  to{ background-position:0% 0; }
}
/* На hover «able» стоит так же стабильно, как «site»: перелив wm-flow гнал окно
   градиента через светлый --lg-gold, и слово мерцало/пропадало на белом фоне.
   Живым на hover остаётся только наклон слэша. */
.wm:hover .wm__slash{ transform:rotate(calc(var(--wm-rot, 0) * 1deg - 8deg)); }

/* Слоган под hero-логотипом */
.wm-tag{
  font-family:var(--f-disp); font-weight:400;
  font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--m-ink-3);
}

/* --------------------------------------------------------------------------
   Reveal-эффекты (навешивает motion.js)
   -------------------------------------------------------------------------- */
.rv{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--rv-d, 0s);
}
.rv-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .wm--in .wm__site, .wm--in .wm__slash, .wm--in .wm__able{ animation:none; }
}

/* Внутренняя область продукта */
.vp{ background:var(--m-surface); color:var(--m-ink); font-size:14px; }
.vp--pad{ padding:32px 36px 40px; }
.vp--soft{ background:var(--m-bg); }

/* --------------------------------------------------------------------------
   Компоненты интерфейса продукта (префикс p-)
   -------------------------------------------------------------------------- */
.p-nav{
  display:flex; align-items:center; gap:26px;
  padding:15px 26px; border-bottom:1px solid transparent; background:transparent;
  position:relative; z-index:3;
}
.p-nav--line{ border-bottom-color:var(--m-line); background:var(--m-surface); }
/* Липкая шапка лендинга: меню секций и кнопки всегда под рукой */
.p-nav--stick{
  position:sticky; top:0; z-index:20;
  background:rgba(255,254,251,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--m-line);
}
.p-logo{ display:flex; align-items:center; color:var(--m-ink); }
.p-logo .wm{ font-size:19px; }
.p-menu{ display:flex; gap:22px; font-size:var(--fs-md); color:var(--m-ink-2); }
.p-menu span[aria-current]{ color:var(--m-ink); }
.p-nav__right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.p-btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  height:40px; padding:0 22px; border-radius:999px;
  border:1px solid var(--m-line-3); background:var(--m-surface); color:var(--m-ink);
  font-size:var(--fs-md); font-weight:500; font-family:inherit; cursor:pointer; white-space:nowrap;
  box-shadow:0 1px 2px rgba(26,22,19,.05);
  transition:transform .25s var(--ease), box-shadow .25s, border-color .2s, background .2s, filter .2s;
}
.p-btn:hover{ transform:translateY(-1px); border-color:var(--m-ink-3); box-shadow:var(--sh-soft); }
/* Ховер как на стартовой: обычные кнопки затемняются фоном, тёмные --primary — осветляются,
   градиентные --accent/--shine подсвечиваются ярче */
.p-btn:not(.p-btn--primary):not(.p-btn--accent):not(.p-btn--shine):not(.p-btn--off):not(.p-btn--ghost):hover{ background:var(--m-bg); }
.p-btn--primary:hover{ filter:brightness(1.18); }
.p-btn--shine:hover{ filter:brightness(1.08); }
.p-btn--accent:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.p-btn:active{ transform:translateY(1px) scale(.985); }
.p-btn:focus-visible{ outline:2px solid var(--m-ac); outline-offset:2px; }
.p-btn--primary{ background:var(--m-ink); border-color:var(--m-ink); color:#fff; }
.p-btn--primary::after{
  content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform:skewX(-18deg); transition:left .5s var(--ease);
}
.p-btn--primary:hover::after{ left:125%; }
.p-btn--primary:hover{ box-shadow:0 10px 24px -12px rgba(26,22,19,.55); border-color:var(--m-ink); }
.p-btn--accent{
  background:linear-gradient(100deg, var(--lg-red), var(--lg-mid) 60%, var(--lg-gold));
  background-size:160% 100%; background-position:0 0;
  border-color:transparent; color:#fff;
  transition:background-position .45s var(--ease), transform .25s var(--ease), box-shadow .25s;
}
.p-btn--accent:hover{ background-position:90% 0; box-shadow:0 10px 26px -12px rgba(194,69,47,.6); }
.p-btn--ghost{ background:transparent; border-color:var(--m-line-3); /* контур как у белых кнопок — иначе на светлом фоне видна только надпись */ color:var(--m-ink-2); }
.p-btn--sm{ height:32px; padding:0 16px; font-size:var(--fs-sm); }
.p-btn--eq{ width:138px; padding:0 10px; }
.p-btn--lg{ height:48px; padding:0 30px; font-size:var(--fs-md); }
.p-btn--xl{ height:56px; padding:0 40px; font-size:var(--fs-body); gap:10px; }
.p-btn--xl svg{ width:17px; height:17px; }

/* Переливающаяся кнопка: непрерывный пан брендового градиента + сиин на ховере */
.p-btn--shine{
  border-color:transparent; color:#fff;
  background:linear-gradient(115deg,
    var(--lg-red) 0%, var(--lg-mid) 28%, var(--lg-gold) 50%, var(--lg-mid) 72%, var(--lg-red) 100%);
  background-size:230% 100%;
  animation:shine-pan 4.5s ease-in-out infinite;
  box-shadow:0 12px 30px -12px rgba(194,69,47,.55);
}
.p-btn--shine::after{
  content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg); transition:left .5s var(--ease);
}
.p-btn--shine:hover{ transform:translateY(-2px); border-color:transparent;
  box-shadow:0 18px 42px -14px rgba(194,69,47,.7); }
.p-btn--shine:hover::after{ left:125%; }
@keyframes shine-pan{ 0%,100%{ background-position:0% 0 } 50%{ background-position:100% 0 } }
.p-btn--block{ width:100%; }
.p-btn[disabled], .p-btn--off{ opacity:.42; cursor:not-allowed; }
.p-btn svg{ width:15px; height:15px; }

.p-h1{ font-family:var(--f-disp); font-size:31px; line-height:1.14; margin:0 0 18px; text-transform:uppercase;
  letter-spacing:.005em; font-weight:600; }
.p-h2{ font-family:var(--f-disp); font-size:17px; margin:0 0 12px; letter-spacing:.01em; font-weight:500; }
.p-h3{ font-size:15px; margin:0 0 8px; font-weight:600; }
.p-lead{ font-size:var(--fs-body); line-height:1.6; color:var(--m-ink-2); margin:0 0 24px; max-width:56ch; }
.p-sm{ font-size:var(--fs-sm); line-height:1.55; color:var(--m-ink-3); }
.p-eyebrow{ font-family:var(--f-disp); font-weight:400; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--m-ac);
  margin:0 0 12px; }

.p-sec{ padding:40px 36px; border-top:1px solid var(--m-line); }
.p-sec--dark{ background:var(--m-ink); color:#fff; }
.p-sec--dark .p-lead, .p-sec--dark .p-sm{ color:rgba(255,255,255,.66); }
.p-sec--dark .p-eyebrow{ color:var(--lg-gold); }

.p-grid{ display:grid; gap:var(--sp-4); }
.p-grid--2{ grid-template-columns:repeat(2,1fr); }
.p-grid--3{ grid-template-columns:repeat(3,1fr); }
.p-grid--4{ grid-template-columns:repeat(4,1fr); }

/* Процесс: шаги со стрелками-медальонами на брендовом градиенте */
.p-flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:12px; align-items:stretch; }
.p-flow__arrow{
  align-self:center; flex:none;
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  color:#fff;
  background:linear-gradient(120deg, var(--lg-red), var(--lg-mid) 55%, var(--lg-gold));
  background-size:200% 100%;
  animation:shine-pan 4.5s ease-in-out infinite;
  box-shadow:0 8px 20px -8px rgba(194,69,47,.5);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.p-flow__arrow:hover{ transform:scale(1.08); box-shadow:0 12px 26px -10px rgba(194,69,47,.65); }
.p-flow span.p-flow__arrow:nth-of-type(2){ animation-delay:.4s; }
.p-flow span.p-flow__arrow:nth-of-type(3){ animation-delay:.8s; }
.p-flow__arrow svg{ width:18px; height:18px; display:block; }
@media (prefers-reduced-motion: reduce){
  .p-flow__arrow, .p-btn--shine{ animation:none; }
}

.p-card{ border:1px solid var(--m-line); border-radius:var(--r-l); padding:20px; background:var(--m-surface);
  box-shadow:var(--sh-soft);
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.p-card:hover{ transform:translateY(-2px); border-color:var(--m-line-2); box-shadow:var(--sh-lift); }
.p-card--soft{ background:var(--m-bg); box-shadow:none; }

/* Шаги мастера */
.p-steps{ display:flex; align-items:center; gap:0; padding:10px 30px; border-bottom:1px solid var(--m-line);
  background:var(--m-surface); overflow:hidden; }
.p-step{ display:flex; align-items:center; gap:8px; padding:7px 14px; font-size:var(--fs-sm); color:var(--m-ink-3);
  border-radius:999px; transition:background .25s, color .25s; }
.p-step + .p-step{ margin-left:8px; }
.p-step:hover{ background:var(--m-bg); color:var(--m-ink-2); }
.p-step::before{
  content:attr(data-n); width:20px; height:20px; border-radius:50%; flex:none;
  border:1px solid var(--m-line-2); display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-family:var(--f-mono);
  transition:background .3s, border-color .3s, color .3s;
}
.p-step--done{ color:var(--m-ink-2); }
.p-step--done::before{ background:var(--m-ok-soft); border-color:#B9DCC9; color:var(--m-ok); }
.p-step--cur{ color:var(--m-ink); font-weight:600; background:var(--m-bg); }
.p-step--cur::before{ background:var(--m-ink); border-color:var(--m-ink); color:#fff; }
.p-step__line{ width:18px; height:1px; background:var(--m-line-2); margin:0 0 0 8px; flex:none; }

/* Выбираемая плитка */
.p-tile{
  border:1px solid var(--m-line); border-radius:var(--r-l); padding:24px; background:var(--m-surface);
  position:relative; display:flex; flex-direction:column; min-height:100%;
  box-shadow:var(--sh-soft);
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.p-tile:hover{ transform:translateY(-2px); box-shadow:var(--sh-lift); }
.p-tile--active{ border-color:var(--m-ac); box-shadow:0 0 0 3px var(--m-ac-soft), var(--sh-soft); }
.p-tile--locked{ background:var(--m-bg); }
.p-tile__mark{
  position:absolute; top:14px; right:14px; width:20px; height:20px; border-radius:50%;
  border:1px solid var(--m-line-2);
}
.p-tile--active .p-tile__mark{ background:var(--m-ac); border-color:var(--m-ac); }
.p-tile--active .p-tile__mark::after{
  content:""; position:absolute; left:6px; top:5px; width:6px; height:9px;
  border:solid #fff; border-width:0 1.8px 1.8px 0; transform:rotate(43deg);
}
.p-tile__price{ margin-top:auto; padding-top:16px; font-size:20px; font-weight:650; }
.p-tile__price small{ display:block; font-size:var(--fs-xs); font-weight:400; color:var(--m-ink-3); margin-top:2px; }

.p-list{ margin:0; padding:0; list-style:none; }
.p-list li{ font-size:var(--fs-sm); color:var(--m-ink-2); padding:6px 0 6px 22px; position:relative; line-height:1.5; }
.p-list li::before{
  content:""; position:absolute; left:2px; top:11px; width:8px; height:5px;
  border:solid var(--m-ac); border-width:0 0 1.5px 1.5px; transform:rotate(-45deg);
}
.p-list--plain li::before{ border:none; width:4px; height:4px; border-radius:50%; background:var(--m-line-2); top:12px; left:4px; }
.p-list--minus li::before{ border-width:0 0 1.5px 0; transform:none; top:14px; border-color:var(--m-line-2); }

/* Поля формы */
.p-field{ margin-bottom:var(--sp-4); }
.p-label{ display:block; font-size:var(--fs-xs); color:var(--m-ink-2); margin-bottom:6px; }
.p-label i{ font-style:normal; color:var(--m-ink-3); }
.p-label em{ font-style:normal; color:var(--m-err); }
.p-input, .p-textarea, .p-select{
  width:100%; border:1px solid var(--m-line-2); border-radius:12px;
  padding:10px 14px; font-size:var(--fs-md); font-family:inherit; color:var(--m-ink);
  background:var(--m-surface); outline:none;
  box-shadow:0 1px 2px rgba(26,22,19,.04) inset;
  transition:border-color .2s, box-shadow .2s;
}
.p-input:focus, .p-textarea:focus{ border-color:var(--m-ac); box-shadow:0 0 0 3px var(--m-ac-soft); }
.p-input::placeholder, .p-textarea::placeholder{ color:var(--m-ink-3); }
.p-textarea{ min-height:78px; resize:vertical; line-height:1.5; }
.p-hint{ font-size:var(--fs-xs); color:var(--m-ink-3); margin-top:6px; }
.p-count{ font-size:var(--fs-xs); color:var(--m-ink-3); text-align:right; margin-top:4px; }

.p-check{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; font-size:var(--fs-sm); color:var(--m-ink-2); cursor:pointer; }
.p-check input{ margin:2px 0 0; width:15px; height:15px; accent-color:var(--m-ac); flex:none; }
.p-check a{ color:var(--m-ac); text-decoration:underline; text-underline-offset:2px; }
.p-check b{ color:var(--m-ink); font-weight:600; }

.p-toggle{ display:flex; align-items:flex-start; gap:var(--sp-3); padding:16px; border:1px solid var(--m-line);
  border-radius:var(--r-m); background:var(--m-bg); }
.p-switch{ width:38px; height:22px; border-radius:999px; background:var(--m-line-2); position:relative; flex:none; margin-top:1px;
  transition:background .25s; }
.p-switch::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .25s var(--ease); }
.p-switch--on{ background:var(--m-ac); }
.p-switch--on::after{ left:19px; }
/* Тогл «Старт с менеджером» (шаг «Тип»): вариант в палитре логотипа по мотивам
   Uiverse.io by ilkhoeri — вращающийся размытый градиент в зазоре вокруг белой
   пилюли, шарик в состоянии «вкл» заливается градиентом логотипа */
.p-switch--marble{
  width:52px; height:28px; margin-top:0; background:none;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:999px;
  box-shadow:0 1px 3px rgba(26,22,19,.25);
}
.p-switch--marble::before{
  content:""; position:absolute; width:64px; height:64px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--lg-red), var(--lg-mid), var(--lg-gold), var(--lg-mid), var(--lg-red));
  filter:blur(6px);
  animation:sw-marble 4s linear infinite;
}
.p-switch--marble i{
  position:relative; z-index:1; display:block;
  width:46px; height:22px; border-radius:999px;
  background:var(--m-surface);
  box-shadow:0 2px 4px rgba(26,22,19,.3), inset -2px -3px 4px rgba(26,22,19,.14), inset 0 0 0 1px rgba(26,22,19,.08);
}
.p-switch--marble::after{
  top:50%; left:5px; translate:0 -50%; width:18px; height:18px; z-index:2;
  background:#fff;
  box-shadow:0 1px 3px rgba(26,22,19,.35), inset -1px -2px 3px rgba(26,22,19,.12);
  transition:left .3s cubic-bezier(.175,.885,.32,1.275), background .3s;
}
.p-switch--marble.p-switch--on::after{
  left:29px;
  background:#fff linear-gradient(-45deg, var(--lg-gold) 0%, var(--lg-mid) 45%, var(--lg-red) 100%);
}
@keyframes sw-marble{ to{ transform:rotate(1turn); } }

/* Табы */
.p-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--m-line); margin-bottom:22px; }
.p-tab{ padding:9px 15px; font-size:13px; color:var(--m-ink-2); border-bottom:2px solid transparent; cursor:pointer;
  transition:color .2s, border-color .2s; }
.p-tab--on{ color:var(--m-ink); border-bottom-color:var(--m-ac); font-weight:600; }

/* Таблица */
.p-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.p-table th{
  text-align:left; font-size:var(--fs-2xs); letter-spacing:var(--track-caps); text-transform:uppercase;
  color:var(--m-ink-3); font-weight:500; padding:0 12px 10px; border-bottom:1px solid var(--m-line);
}
.p-table td{ padding:11px 12px; border-bottom:1px solid var(--m-line); vertical-align:middle; color:var(--m-ink-2); }
.p-table td:first-child{ color:var(--m-ink); }
.p-table tr:hover td{ background:#FAF8F3; }
.p-drag{ color:var(--m-line-2); cursor:grab; }

/* Материалы к секции: чипы прикреплённых файлов + кнопка «Прикрепить» */
.p-mat{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.p-filechip{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  background:#F4F2ED; border:1px solid var(--m-line); font-size:var(--fs-xs); color:var(--m-ink-2);
  white-space:nowrap;
}
.p-filechip::before{ content:"📎"; font-size:10px; }
.p-attach{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  background:transparent; border:1px dashed var(--m-line-2); font-size:var(--fs-xs); color:var(--m-ink-3);
  font-family:inherit; cursor:pointer;
}
.p-attach::before{ content:"+"; font-weight:600; }
.p-attach:hover{ color:var(--m-ac); border-color:var(--m-ac); }
.p-num{ font-family:var(--f-mono); font-size:11.5px; color:var(--m-ink-3); }

/* Уведомления */
.p-alert{ display:flex; gap:var(--sp-3); padding:14px 16px; border-radius:var(--r-m); font-size:var(--fs-sm);
  border:1px solid var(--m-line); background:var(--m-bg); color:var(--m-ink-2); }
.p-alert svg{ width:17px; height:17px; flex:none; margin-top:1px; }
.p-alert b{ color:var(--m-ink); display:block; margin-bottom:3px; font-weight:600; }
.p-alert--warn{ background:var(--m-warn-soft); border-color:#E7D8BC; color:var(--m-warn); }
.p-alert--warn b{ color:#6E4A1C; }
.p-alert--err{ background:var(--m-err-soft); border-color:#EFCFCF; color:#8F3030; }
.p-alert--err b{ color:#7A2727; }
.p-alert--ok{ background:var(--m-ok-soft); border-color:#C4E0D2; color:#0F5F42; }
.p-alert--ok b{ color:#0C523A; }

.p-chip{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px;
  border-radius:999px; border:1px solid var(--m-line-2); font-size:var(--fs-xs); color:var(--m-ink-2); }
.p-chip--ac{ border-color:var(--m-ac); color:var(--m-ac); background:var(--m-ac-soft); }
.p-chip--ok{ border-color:#B9DCC9; color:var(--m-ok); background:var(--m-ok-soft); }
.p-chip--err{ border-color:#EFCFCF; color:var(--m-err); background:var(--m-err-soft); }
.p-chip--mute{ background:var(--m-bg); }
.p-chip--st{ width:132px; justify-content:center; flex:none; }

/* Прогресс */
.p-bar{ height:5px; border-radius:999px; background:var(--m-line); overflow:hidden; }
.p-bar i{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--lg-red), var(--lg-mid) 60%, var(--lg-gold));
  background-size:200% 100%; animation:bar-flow 2.4s linear infinite; }
@keyframes bar-flow{ from{ background-position:0 0 } to{ background-position:200% 0 } }
.p-prog{ display:flex; gap:12px; padding:11px 0; align-items:flex-start; font-size:13px; }
.p-prog__dot{ width:18px; height:18px; border-radius:50%; border:1px solid var(--m-line-2); flex:none; position:relative; margin-top:1px; }
.p-prog--done .p-prog__dot{ background:var(--m-ok); border-color:var(--m-ok); }
.p-prog--done .p-prog__dot::after{ content:""; position:absolute; left:5px; top:5px; width:6px; height:3px;
  border:solid #fff; border-width:0 0 1.5px 1.5px; transform:rotate(-45deg); }
.p-prog--cur .p-prog__dot{ border-color:var(--m-ac); border-width:2px; }
.p-prog--cur .p-prog__dot::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--m-ac);
  animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.5; transform:scale(.78) } }
.p-prog--wait{ color:var(--m-ink-3); }

/* Плейсхолдер изображения */
.ph{ position:relative; display:block; width:100%; border:1px solid var(--m-line);
  border-radius:var(--r-m); background:#EFECE4; overflow:hidden; aspect-ratio:16/10;
  box-shadow:var(--sh-soft);
  transition:transform .3s var(--ease), box-shadow .3s; }
.marquee .ph:hover{ transform:translateY(-3px); box-shadow:var(--sh-lift); }
.ph svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.ph--sq{ aspect-ratio:1/1; }
.ph--wide{ aspect-ratio:21/9; }
.ph--tall{ aspect-ratio:3/4; }
.ph__cap{ position:absolute; left:8px; bottom:7px; font-size:10.5px; letter-spacing:var(--track-caps);
  text-transform:uppercase; color:#9C978A; }

/* Ряды/утилиты */
.row{ display:flex; align-items:center; gap:12px; }
.row--between{ justify-content:space-between; }
.row--wrap{ flex-wrap:wrap; }
.row--end{ justify-content:flex-end; }
.col{ display:flex; flex-direction:column; gap:12px; }
.mt-0{ margin-top:0 } .mt-8{ margin-top:8px } .mt-12{ margin-top:12px } .mt-16{ margin-top:16px }
.mt-20{ margin-top:20px } .mt-28{ margin-top:28px }
.mb-0{ margin-bottom:0 } .mb-8{ margin-bottom:8px } .mb-12{ margin-bottom:12px } .mb-20{ margin-bottom:20px }
.divider{ height:1px; background:var(--m-line); margin:20px 0; }
.grow{ flex:1; }

/* Итоговая полоса цены */
.p-summary{
  display:flex; align-items:center; gap:18px; padding:16px 22px;
  border-top:1px solid var(--m-line); background:var(--m-bg);
}
.p-summary__price{ font-size:22px; font-weight:650; }
.p-summary__price small{ display:block; font-size:11.5px; font-weight:400; color:var(--m-ink-3); }

/* Модальное окно / письмо */
.p-mail{ border:1px solid var(--m-line); border-radius:var(--r-m); overflow:hidden; background:var(--m-surface); }
.p-mail__head{ padding:14px 16px; background:var(--m-bg); border-bottom:1px solid var(--m-line); font-size:var(--fs-sm); color:var(--m-ink-2); }
.p-mail__head b{ color:var(--m-ink); }
.p-mail__body{ padding:22px 24px; font-size:var(--fs-md); color:var(--m-ink-2); line-height:1.6; }
.p-mail__body h4{ margin:0 0 12px; font-size:16px; color:var(--m-ink); }
.p-pass{ display:inline-block; font-family:var(--f-mono); font-size:14px; letter-spacing:.06em;
  background:var(--m-bg); border:1px dashed var(--m-line-2); border-radius:var(--r-s); padding:8px 14px; color:var(--m-ink); }

.p-toast{
  display:flex; gap:11px; align-items:flex-start; padding:13px 15px; border-radius:var(--r-m);
  background:var(--m-ink); color:#fff; font-size:13px; max-width:340px;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.6);
}
.p-toast b{ display:block; margin-bottom:2px; }
.p-toast span{ color:rgba(255,255,255,.66); }
.p-toast svg{ width:16px; height:16px; flex:none; margin-top:2px; }

/* Водяной знак демо */
.p-demo-mark{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(-45deg, rgba(26,22,19,.035) 0 2px, transparent 2px 16px);
}
.p-stamp{
  position:absolute; top:12px; right:12px; z-index:2;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  background:var(--m-ink); color:#fff; border-radius:999px; padding:5px 11px;
}

/* Футер продукта: отделён от тёмных секций линией и более глубоким тоном */
.p-foot{ padding:48px 36px 26px; background:#100D0B; border-top:1px solid rgba(255,255,255,.16);
  color:#B9B3AD; font-size:13px; line-height:1.65; }
.p-foot__main{ display:grid; grid-template-columns:minmax(220px,.9fr) minmax(0,1fr) minmax(0,1fr); gap:56px; padding-bottom:36px; }
.p-foot__brand > a:first-child{ display:inline-flex; text-decoration:none; }
.p-foot__brand .p-foot__caption{ margin:26px 0 4px; }
.p-foot__email{ display:inline-flex; align-items:center; gap:18px; color:#F6F1EB; font-size:20px; text-decoration:none; }
.p-foot__email span{ font-size:18px; color:#DB957B; }
.p-foot__heading{ margin:0 0 16px; color:#F6F1EB; font:500 14px/1.5 var(--f-ui); }
.p-foot__links{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.p-foot__links a{ color:inherit; text-decoration:none; text-underline-offset:4px; }
.p-foot a:hover{ color:#fff; text-decoration:underline; }
.p-foot a:focus-visible{ outline:2px solid #DB957B; outline-offset:5px; border-radius:2px; }
.p-foot__details{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 32px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-size:12px; }
.p-foot__details p{ margin:0; }
.p-foot__registration{ display:flex; flex-wrap:wrap; gap:8px 28px; }
.p-foot__registration span{ white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (max-width:1000px){ .p-foot__main{ grid-template-columns:1fr 1fr; gap:32px; } .p-foot__brand{ grid-column:1 / -1; } }
@media (max-width:600px){ .p-foot__main{ grid-template-columns:1fr; gap:30px; padding-bottom:28px; } .p-foot__brand{ grid-column:auto; } .p-foot__links{ gap:12px; } .p-foot__registration{ flex-direction:column; gap:4px; } }

/* Подсветка найденных запрещённых формулировок */
.p-mark{ background:var(--m-err-soft); color:#8F3030; border-bottom:1px solid #E0B6B6;
  border-radius:3px; padding:0 3px; }

/* Hero-знак на первом экране */
.p-hero-mark{ animation:mark-in 1.1s var(--ease) both; }
.p-hero-orbit{ transform-origin:100px 100px; animation:orbit 9s linear infinite; }
@keyframes mark-in{ from{ opacity:0; transform:scale(.86) rotate(-8deg) } to{ opacity:1; transform:none } }
@keyframes orbit{ to{ transform:rotate(360deg) } }

/* --------------------------------------------------------------------------
   Hero в духе lovable.dev: центр, тёплые градиентные «облака», промпт-карта
   -------------------------------------------------------------------------- */
.p-hero{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:64px 34px 72px;
}
.p-hero::before{
  content:""; position:absolute; left:-12%; right:-12%; bottom:-22%; height:78%;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(52% 68% at 50% 100%, rgba(227,154,60,.42), transparent 72%),
    radial-gradient(40% 58% at 24% 100%, rgba(217,107,50,.3), transparent 74%),
    radial-gradient(42% 60% at 78% 100%, rgba(194,69,47,.26), transparent 74%);
  filter:blur(10px);
}
.p-hero > *{ position:relative; z-index:1; }
.p-hero .p-h1{
  font-size:clamp(26px, 3.4vw, 40px); max-width:21ch;
  margin-left:auto; margin-right:auto;
}
.p-hero .p-lead{ margin-left:auto; margin-right:auto; }

.p-hero .p-btn--xl{ margin-top:6px; }

/* --------------------------------------------------------------------------
   Объёмные фигуры-декорации за текстом и блоками (мотивы создания сайтов)
   -------------------------------------------------------------------------- */
.p-deco{ position:relative; z-index:0; }
.p-shape{ position:absolute; z-index:-1; pointer-events:none; user-select:none; }
.p-hero .p-shape{ position:absolute; z-index:0; }
.p-shape--f1{ animation:shape-float 9s ease-in-out infinite; }
.p-shape--f2{ animation:shape-float 11s ease-in-out 1.4s infinite; }
.p-shape--f3{ animation:shape-float 10s ease-in-out .7s infinite; }
@keyframes shape-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@media (prefers-reduced-motion: reduce){
  .p-shape--f1, .p-shape--f2, .p-shape--f3{ animation:none; }
}

/* --------------------------------------------------------------------------
   Стартовая как лендинг: якорное меню, полноэкранные секции, анимации блоков
   -------------------------------------------------------------------------- */
.p-menu a{ color:inherit; transition:color .2s; }
.p-menu a:hover{ color:var(--m-ink); }

/* Каждый смысловой блок стартовой — во весь экран */
.p-screen{
  /* минус липкая шапка: при якорном переходе секция помещается целиком,
     низ (слоган референсов) не уезжает за экран */
  min-height:calc(100vh - 64px);
  display:flex; flex-direction:column; justify-content:center;
  scroll-margin-top:64px; /* высота липкой шапки лендинга */
}

/* Menu destinations fill the usable viewport and stay clear of the actual sticky header. */
.p-sec[id^="sec-"]{
  min-height:calc(100vh - var(--landing-nav-height, 64px));
  min-height:calc(100dvh - var(--landing-nav-height, 64px));
  scroll-margin-top:var(--landing-nav-height, 64px);
}

/* Процесс: четыре шага разбросаны в «облаке», при появлении секции
   собираются в правильную последовательность, облако рассеивается.
   Разброс включается только классом .anim-ready (ставит motion.js) —
   без JS и при prefers-reduced-motion секция статична. */
[data-anim="flow"] .p-h2{ position:relative; z-index:1; }
[data-anim="flow"] .p-flow{ position:relative; z-index:1; }
.p-cloudfx{
  position:absolute; left:6%; right:6%; top:24%; bottom:8%;
  pointer-events:none; z-index:0; opacity:0;
  background:
    radial-gradient(38% 46% at 30% 42%, rgba(227,154,60,.5), transparent 70%),
    radial-gradient(34% 44% at 68% 32%, rgba(217,107,50,.42), transparent 70%),
    radial-gradient(40% 50% at 52% 70%, rgba(194,69,47,.32), transparent 72%);
  filter:blur(26px);
  transition:opacity 1s var(--ease) .75s, transform 1.3s var(--ease) .75s;
}
[data-anim="flow"].anim-ready:not(.anim-in) .p-cloudfx{ opacity:1; }
[data-anim="flow"] .p-flow .p-flow__canvas{ position:relative; z-index:1; transition:transform .9s var(--ease); }
[data-anim="flow"].anim-ready:not(.anim-in) .p-flow .p-flow__canvas:nth-of-type(1){ transform:translate(230px,84px) rotate(-9deg); }
[data-anim="flow"].anim-ready:not(.anim-in) .p-flow .p-flow__canvas:nth-of-type(2){ transform:translate(-46px,-66px) rotate(7deg); }
[data-anim="flow"].anim-ready:not(.anim-in) .p-flow .p-flow__canvas:nth-of-type(3){ transform:translate(64px,72px) rotate(-5deg); }
[data-anim="flow"].anim-ready:not(.anim-in) .p-flow .p-flow__canvas:nth-of-type(4){ transform:translate(-214px,-52px) rotate(10deg); }
[data-anim="flow"].anim-in .p-flow .p-flow__canvas:nth-of-type(1){ transition-delay:0s; }
[data-anim="flow"].anim-in .p-flow .p-flow__canvas:nth-of-type(2){ transition-delay:.14s; }
[data-anim="flow"].anim-in .p-flow .p-flow__canvas:nth-of-type(3){ transition-delay:.28s; }
[data-anim="flow"].anim-in .p-flow .p-flow__canvas:nth-of-type(4){ transition-delay:.42s; }
/* Приподнимание плиты по ховеру: после сборки, без «хвоста» из задержек */
[data-anim="flow"].anim-in .p-flow .p-card:hover{
  transform:translateY(-6px);
  transition:transform .25s var(--ease), box-shadow .25s;
  transition-delay:0s;
}
[data-anim="flow"].anim-ready .p-flow__arrow{ opacity:0; transform:scale(.4); }
[data-anim="flow"] .p-flow__arrow{ transition:opacity .45s var(--ease), transform .45s var(--ease); }
[data-anim="flow"].anim-in .p-flow__arrow{ opacity:1; transform:none; }
[data-anim="flow"].anim-in span.p-flow__arrow:nth-of-type(1){ transition-delay:.85s; }
[data-anim="flow"].anim-in span.p-flow__arrow:nth-of-type(2){ transition-delay:1s; }
[data-anim="flow"].anim-in span.p-flow__arrow:nth-of-type(3){ transition-delay:1.15s; }
[data-anim="flow"].anim-in .p-flow__arrow:hover{ transform:scale(1.08); }

/* Процесс на главной: оранжевый фон, крупный заголовок, «стеклянные» карточки */
.p-sec--flow{
  background:linear-gradient(135deg, #C2452F 0%, #D96B32 52%, #E39A3C 118%);
}
.p-sec--flow .p-h2{
  color:#fff; font-size:clamp(24px, 3vw, 34px); font-weight:600;
  text-shadow:0 2px 18px rgba(90,26,10,.25);
}
/* Лид процесса — тем же дисплейным шрифтом, что и заголовок секции */
.p-lead--flow{
  color:#fff; max-width:none; width:100%;
  font-family:var(--f-disp); font-weight:600; font-size:15px;
  letter-spacing:.01em; line-height:1.5;
  text-shadow:0 2px 18px rgba(90,26,10,.25);
  position:relative; z-index:1; margin-bottom:6px;
}
.p-sec--flow .p-cloudfx{
  background:
    radial-gradient(38% 46% at 30% 42%, rgba(255,244,222,.55), transparent 70%),
    radial-gradient(34% 44% at 68% 32%, rgba(255,255,255,.4), transparent 70%),
    radial-gradient(40% 50% at 52% 70%, rgba(255,214,170,.45), transparent 72%);
}
/* Объёмные плиты шагов: градиентная поверхность, жёсткая «толщина» снизу
   двумя слоями box-shadow и глубокая мягкая тень */
.p-sec--flow .p-flow .p-card{
  background:linear-gradient(180deg, #FFFFFF 0%, #F8F1E5 72%, #F0E5D0 100%);
  border:none;
  border-radius:20px; padding:24px 20px;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    0 7px 0 -1px #E6D8BF,
    0 13px 0 -2px #C9B08B,
    0 38px 60px -22px rgba(74,20,8,.62);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.p-sec--flow .p-flow .p-card:hover{
  border-color:transparent;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    0 10px 0 -1px #E6D8BF,
    0 17px 0 -2px #C9B08B,
    0 48px 72px -24px rgba(74,20,8,.7);
}
/* Без стрелок: четыре равные плиты покрупнее */
.p-sec--flow .p-flow{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px; }
.p-sec--flow .p-flow .p-card{ padding:34px 26px; min-height:300px; }
.p-sec--flow .p-flow .p-card .p-sm{ font-size:var(--fs-md); }

/* Иллюстрации процесса в плитах шагов (после названия) */
.p-flow__pic{ width:140px; height:auto; margin:14px 0 10px; }

/* Факты о процессе под шагами */
.p-facts{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px 28px;
  margin-top:40px; padding-top:28px;
  border-top:1px solid rgba(255,255,255,.3);
  position:relative; z-index:1;
}
.p-fact b{
  display:block; font-family:var(--f-disp); font-weight:600;
  font-size:19px; color:#fff; margin-bottom:7px; line-height:1.2;
}
.p-fact span{ font-size:var(--fs-sm); color:rgba(255,255,255,.85); line-height:1.55; display:block; }

/* Чип с названием шага — служит заголовком карточки */
.p-flow__n{
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; padding:0 16px; border-radius:999px; margin-bottom:12px;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; white-space:nowrap;
  background:linear-gradient(120deg, var(--lg-red), var(--lg-gold));
  box-shadow:0 6px 16px -8px rgba(90,26,10,.55);
}
.p-sec--flow .p-flow__arrow{
  background:#fff; color:var(--m-ac); animation:none;
  box-shadow:0 10px 26px -10px rgba(90,26,10,.55);
}

/* Стоимость: содержимое растянуто на всю полноэкранную секцию;
   у каждого типа сайта — своя иллюстрация */
/* Иллюстрация крупная, по центру свободного места между списком и ценой */
.p-tile__pic{ display:block; width:100%; max-width:220px; height:auto; margin:12px auto 0; }
.p-sec--price .p-tile .p-tile__pic{ max-width:300px; margin:auto; }
.p-sec--price .p-tile .p-tile__price{ margin-top:0; padding-top:10px; }

.p-sec--price .p-h2{ font-size:clamp(22px, 2.6vw, 30px); }
.p-sec--price .p-grid--3{ flex:1; gap:18px; }
.p-sec--price .p-tile{ padding:28px 26px; }
.p-sec--price .p-tile .p-h3{ font-size:17px; margin-bottom:12px; }
.p-sec--price .p-list li{ font-size:var(--fs-md); padding:7px 0 7px 22px; }
.p-sec--price .p-tile__price{ font-size:24px; }
.p-sec--price .p-tile__price small{ font-size:var(--fs-sm); margin-top:4px; }

/* «Что получаете» в карточке тарифа: результат после оплаты */
.p-tile__result{
  margin:14px 0 0; padding:10px 14px; border-radius:10px;
  background:#F9F4EA; border:1px solid #EEE6D6;
  font-size:var(--fs-sm); line-height:1.5; color:var(--m-ink-2);
}
.p-tile__result strong{ color:var(--m-ink); font-weight:650; }

/* Примечания под карточками тарифов — оранжевая плашка,
   шрифт как у заголовка секции (f-disp), но жирнее */
.p-price-callout{
  padding:18px 24px; border-radius:14px;
  background:linear-gradient(105deg, #C2452F, #E39A3C);
  box-shadow:0 12px 28px -14px rgba(194,69,47,.55);
}
.p-price-note{
  font-family:var(--f-disp); font-size:var(--fs-body); font-weight:600;
  letter-spacing:.01em; line-height:1.55; color:#fff; margin:0;
}
.p-price-note + .p-price-note{ margin-top:10px; }

/* FAQ: accordion after support. */
.p-sec--faq .p-h2{ font-size:clamp(22px, 2.6vw, 30px); margin-bottom:8px; }
.p-faq{ margin-top:16px; }
.p-faq__item{ border-bottom:1px solid var(--m-line); }
.p-faq__item summary{
  font-size:clamp(18px, 1.4vw, 23px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; cursor:pointer; list-style:none;
  font-family:var(--f-disp); font-weight:500; letter-spacing:.01em;
  color:var(--m-ink);
}
.p-faq__item summary::-webkit-details-marker{ display:none; }
.p-faq__item summary::after{
  content:"+"; flex:none; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--m-line-2); color:var(--m-ink-3);
  font-family:var(--f-ui); font-size:15px; font-weight:400; line-height:1;
  transition:transform .25s ease, color .2s, border-color .2s;
}
.p-faq__item[open] summary::after{ transform:rotate(45deg); color:var(--m-ac); border-color:var(--m-ac); }
.p-faq__item summary:hover{ color:var(--m-ac); }
.p-faq__item p{
  margin:0; padding:0 40px 24px 0; font-size:clamp(17px, 1.2vw, 20px); line-height:1.65; color:var(--m-ink-2);
}

/* Референсы: заголовок в верхнем левом углу секции; строка референсов из hero
   переехала сюда — карточки крупнее, строка отцентрована; ленты подняты чуть
   выше, под ними — крупная подпись-слоган */
.p-sec--ex .p-h2{
  position:absolute; top:28px; left:36px; margin:0; z-index:1;
  font-size:clamp(24px, 3vw, 34px);
}
.p-sec--ex .refrow{ margin-top:6px; }
.p-sec--ex .refrow:first-of-type{ margin-top:-28px; }
.p-ex-tagline{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  width:min(92%, 58ch); margin:0; text-align:center; z-index:1;
  font-family:var(--f-disp); font-size:clamp(15px, 1.5vw, 19px); font-weight:500;
  letter-spacing:.01em; line-height:1.5; color:var(--m-ink-2);
}
.p-sec--ex .refrow .refcard{ width:250px; margin-right:-56px; }
.p-sec--ex .refrow .refcard:last-child{ margin-right:0; }
.marquee--fan{ padding:8px 0; }
/* Нижний отступ с запасом: наклонённые карточки веера не срезаются краем ленты */
.marquee--fan .marquee__track{ gap:0; padding:40px 0 116px; }
.marquee--fan .marquee__track .ph{
  width:360px; aspect-ratio:3/2;
  margin-right:-72px;
  transform-origin:50% 165%;
  transform:rotate(var(--fan-r, 0deg)) translateY(var(--fan-y, 0px));
  outline:3px solid transparent; outline-offset:2px;
  border:10px solid #FFFEFB; border-radius:18px;
  box-shadow:0 2px 0 rgba(255,255,255,.8) inset, 0 22px 44px -20px rgba(26,22,19,.4);
  transition:transform .35s var(--ease), box-shadow .35s, outline-color .25s;
}
.marquee--fan .marquee__track .ph .ph__cap{
  left:10px; bottom:10px; padding:5px 12px;
  background:#FFFEFB; color:var(--m-ink-2); border-radius:999px;
  font-size:10.5px; letter-spacing:var(--track-caps);
  box-shadow:0 4px 12px rgba(26,22,19,.2);
}
.marquee--fan .marquee__track .ph:nth-child(6n+1){ --fan-r:-14deg; --fan-y:36px; }
.marquee--fan .marquee__track .ph:nth-child(6n+2){ --fan-r:-8deg;  --fan-y:12px; }
.marquee--fan .marquee__track .ph:nth-child(6n+3){ --fan-r:-2.5deg; --fan-y:0px; }
.marquee--fan .marquee__track .ph:nth-child(6n+4){ --fan-r:2.5deg;  --fan-y:0px; }
.marquee--fan .marquee__track .ph:nth-child(6n+5){ --fan-r:8deg;   --fan-y:12px; }
.marquee--fan .marquee__track .ph:nth-child(6n+6){ --fan-r:14deg;  --fan-y:36px; }
.marquee--fan .marquee__track .ph:hover{
  transform:rotate(var(--fan-r, 0deg)) translateY(var(--fan-y, 0px)) scale(1.07);
  outline-color:var(--m-ac);
  z-index:5;
  box-shadow:var(--sh-lift);
}

/* Поддержка: текст плотной двухколоночной шапкой, ноутбук по центру —
   крупный, парит и вращается вокруг своей оси */
.p-support{ display:flex; flex-direction:column; }
.p-support__head{
  display:grid; grid-template-columns:1.15fr 1fr; gap:16px 56px; align-items:start;
}
.p-suphead{
  font-family:var(--f-disp); font-weight:600; text-transform:uppercase;
  font-size:clamp(24px, 3.2vw, 38px); line-height:1.12; letter-spacing:.005em;
  color:#fff; margin:0;
}
.p-support__head .p-lead{ max-width:none; }
.p-lapwrap{
  width:min(780px, 96%); margin:30px auto 0;
  perspective:1200px;
  animation:lap-float 6s ease-in-out infinite;
  cursor:grab;
  transition:scale .35s var(--ease);
}
/* «Можно взять и потрогать»: при наведении вращение и парение замирают,
   ноутбук чуть приближается к зрителю */
.p-lapwrap:hover{ scale:1.06; animation-play-state:paused; }
.p-lapwrap:hover .p-lap{ animation-play-state:paused; }
.p-lapwrap:active{ cursor:grabbing; scale:1.02; }
/* 3D-режим (laptop3d.js): вращение и парение берёт на себя Three.js-сцена,
   SVG-иллюстрация скрывается и остаётся фолбэком */
.p-lapwrap--3d{ animation:none; }
.p-lapwrap--3d .p-lap{ display:none; }
.p-lap{ width:100%; height:auto; display:block;
  transform-style:preserve-3d;
  animation:lap-spin 16s linear infinite;
}
@keyframes lap-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-18px) } }
@keyframes lap-spin{ from{ transform:rotateY(0deg) } to{ transform:rotateY(360deg) } }
@media (prefers-reduced-motion: reduce){
  .p-lapwrap, .p-lap{ animation:none; }
}

/* Клавиши вспыхивают в псевдослучайном порядке:
   три разных периода + индивидуальные задержки, паттерн почти не повторяется */
.lap-key{ opacity:0; animation:key-flash 2.1s linear infinite; }
.lap-key--b{ animation-duration:2.7s; }
.lap-key--c{ animation-duration:3.4s; }
@keyframes key-flash{
  0%,4%,16%,100%{ opacity:0 }
  9%{ opacity:.9 }
}
@media (prefers-reduced-motion: reduce){
  .lap-key{ animation:none; }
}

/* --------------------------------------------------------------------------
   Видеофон hero: тёмный веер лучей, контент — светлый в обеих темах
   -------------------------------------------------------------------------- */
/* Hero — чистый белый фон в светлой теме; в тёмной — тёмный, контент светлеет */
.p-hero--fx, .p-sec.p-styles-marquee{ background:#FFFFFF; }
.p-hero--fx{ padding-top:100px; } /* контент чуть ниже — сверху бегущая строка */
.p-hero--fx::before{ display:none; } /* тёплое свечение из базового hero не нужно */
.p-hero--fx .p-h1{ color:#1A1613; }
.p-hero--fx .wm__site{ color:#1A1613; }
html.theme-dark .p-hero--fx, html.theme-dark .p-sec.p-styles-marquee{ background:#171310; }
html.theme-dark .p-hero--fx .p-h1{ color:#F2EDE5; }
html.theme-dark .p-hero--fx .wm__site{ color:#F2EDE5; }

/* Бегущая строка над «планетой из букв»: цвет повторяет «site» в логотипе
   и переключается вместе с темой интерфейса */
.p-hero-ticker{
  position:absolute; left:0; right:0; top:16px; z-index:2;
  overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.p-hero-ticker__track{
  display:flex; width:max-content;
  font-family:var(--f-disp); font-size:22px; font-weight:600;
  text-transform:uppercase; letter-spacing:.005em; line-height:1.14; white-space:nowrap;
  color:#1A1613;
  animation:slide 46s linear infinite;
}
.p-hero-ticker__track span{ flex:none; padding-right:56px; }
html.theme-dark .p-hero-ticker__track{ color:#F2EDE5; }

/* --------------------------------------------------------------------------
   Тёмная тема лендинга: кнопка в шапке переключает палитру макета,
   выбор хранится в localStorage (motion.js)
   -------------------------------------------------------------------------- */
.p-thm{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:none;
  border:1px solid var(--m-line-3); border-radius:999px;
  background:var(--m-surface); color:var(--m-ink-2); cursor:pointer;
  transition:color .2s, border-color .2s, transform .25s var(--ease), box-shadow .25s;
}
.p-thm:hover{ color:var(--m-ink); border-color:var(--m-ink-3); transform:translateY(-1px); box-shadow:var(--sh-soft); }
.p-thm:active{ transform:translateY(1px) scale(.96); }
.p-thm:focus-visible{ outline:2px solid var(--m-ac); outline-offset:2px; }
.p-thm svg{ width:15px; height:15px; display:block; }
/* в кнопке темы всегда только месяц по центру; солнце убрано */
.p-thm svg.p-thm__sun{ display:none; }

/* Тёмная палитра: класс на <html> действует на все экраны прототипа;
   токены макета переопределяются на каждом .vp */
html.theme-dark .vp{
  --m-bg:#171310;
  --m-surface:#1D1814;
  --m-ink:#F2EDE5;
  --m-ink-2:#C6BCAF;
  --m-ink-3:#8F8779;
  --m-line:#332C25;
  --m-line-2:#463D33;
  --m-line-3:#5A4F43;
  --m-ac:#E0704C;
  --m-ac-soft:rgba(224,112,76,.16);
  --m-ok-soft:rgba(91,201,154,.14);
  --m-err-soft:rgba(255,128,128,.12);
  --m-warn-soft:rgba(223,166,114,.12);
  --sh-soft:0 2px 6px rgba(0,0,0,.3), 0 10px 34px -8px rgba(0,0,0,.45);
  --sh-lift:0 4px 10px rgba(0,0,0,.35), 0 22px 48px -16px rgba(0,0,0,.6);
}
/* Точечные правки жёстко заданных цветов */
html.theme-dark .p-nav--stick{ background:rgba(23,19,16,.9); }
html.theme-dark .p-btn--primary{ color:#1A1613; }
html.theme-dark .p-sec--dark{ background:#12100D; }
html.theme-dark .ph{ background:#28221C; }
html.theme-dark .marquee--fan .marquee__track .ph{ border-color:#2E2721; }
html.theme-dark .marquee--fan .marquee__track .ph .ph__cap{ background:#2E2721; }
html.theme-dark .refcard__label{ background:rgba(29,24,20,.92); }
html.theme-dark .p-tile--locked{ background:#181411; }
/* Секция «Стоимость»: плашка «Что получаете» и иллюстрации-скриншоты */
html.theme-dark .p-tile__result{ background:#241E19; border-color:#332C25; }
html.theme-dark .p-tile__pic{ filter:brightness(.82) saturate(.95); }
html.theme-dark .p-price-callout{ box-shadow:0 12px 28px -14px rgba(0,0,0,.6); }
html.theme-dark .p-hero::before{ opacity:.5; }
html.theme-dark .p-toast{ background:#0F0C0A; }
html.theme-dark .p-stamp{ background:#0F0C0A; }
html.theme-dark .p-step--cur::before{ color:#1A1613; }
html.theme-dark .p-table tr:hover td{ background:#241E19; }
html.theme-dark .p-alert--warn{ border-color:rgba(223,166,114,.35); color:#DFA672; }
html.theme-dark .p-alert--warn b{ color:#EFC392; }
html.theme-dark .p-alert--err{ border-color:rgba(255,128,128,.35); color:#E89999; }
html.theme-dark .p-alert--err b{ color:#F2B3B3; }
html.theme-dark .p-alert--ok{ border-color:rgba(91,201,154,.35); color:#7CCFAB; }
html.theme-dark .p-alert--ok b{ color:#98DDBD; }
html.theme-dark .p-step--done::before{ background:rgba(91,201,154,.16); border-color:rgba(91,201,154,.4); }
html.theme-dark .p-mark{ background:rgba(255,128,128,.14); color:#E89999; border-bottom-color:rgba(255,128,128,.4); }
html.theme-dark .p-pass{ color:#F2EDE5; }

/* --------------------------------------------------------------------------
   Готовые референсы в hero: две встречные ленты карточек из каталога
   -------------------------------------------------------------------------- */
.refband{ width:100%; max-width:920px; }
.refband__cap{ font-size:var(--fs-sm); color:var(--m-ink-3); margin:0 0 6px; }
/* Одна строка внахлёст: карточки под наклоном, центральная поверх всех.
   Скроллится вручную (колесо/тач/перетаскивание — motion.js), при загрузке
   строка отцентрована на фокусной карточке */
.refrow{
  display:flex; align-items:center;
  overflow-x:auto; overflow-y:hidden;
  padding:30px 46px 34px;
  cursor:grab;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.refrow::-webkit-scrollbar{ display:none; }
.refrow.is-drag{ cursor:grabbing; }
.refrow .refcard{ margin-right:-48px; transform:rotate(var(--rr, 0deg)); }
.refrow .refcard:last-child{ margin-right:0; }
/* одиннадцать карточек в ряду (карточки-приглашения каталога с обоих концов): наклоны зеркально
   от центра; z убывает слева направо — каждая карточка лежит поверх только соседа справа */
.refrow .refcard:nth-child(1){ --rr:8deg;  z-index:11; }
.refrow .refcard:nth-child(2){ --rr:-9deg; z-index:10; }
.refrow .refcard:nth-child(3){ --rr:7deg;  z-index:9; }
.refrow .refcard:nth-child(4){ --rr:-6deg; z-index:8; }
.refrow .refcard:nth-child(5){ --rr:5deg;  z-index:7; }
.refrow .refcard:nth-child(6){ z-index:6; }
.refrow .refcard:nth-child(7){ --rr:-5deg; z-index:5; }
.refrow .refcard:nth-child(8){ --rr:6deg;  z-index:4; }
.refrow .refcard:nth-child(9){ --rr:-7deg; z-index:3; }
.refrow .refcard:nth-child(10){ --rr:9deg; z-index:2; }
.refrow .refcard:nth-child(11){ --rr:-8deg; z-index:1; }
/* два ряда — плотно друг к другу */
.refrow + .refrow{ margin-top:-46px; }
/* Карточки-приглашения по обоим концам ряда: светло-оранжевые, ведут в каталог шага «Стиль» */
.refrow .refcard--more{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#FCE8D4; border-style:dashed; border-color:#E9BE93;
  text-decoration:none; text-align:center; padding:14px 20px;
}
.refrow .refcard--more span{
  position:relative; z-index:1;
  font-family:var(--f-disp); font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.55;
  color:var(--m-ink); max-width:200px;
}
/* Декор карточки-приглашения: кольцо с ореолом и точкой + штриховая плашка в палитре логотипа */
.refrow .refcard--more::before{
  content:""; position:absolute; right:-24px; top:-24px; width:92px; height:92px; border-radius:50%;
  border:1.5px solid rgba(217,107,50,.55);
  box-shadow:0 0 0 14px rgba(227,154,60,.16), -152px 118px 0 -38px rgba(217,107,50,.5);
}
.refrow .refcard--more::after{
  content:""; position:absolute; left:16px; bottom:14px; width:52px; height:14px;
  background:repeating-linear-gradient(-45deg, rgba(194,69,47,.5) 0 1.5px, transparent 1.5px 8px);
}
html.theme-dark .refrow .refcard--more{ background:rgba(224,112,76,.14); border-color:rgba(224,112,76,.4); }
.refcard{
  position:relative; display:block; flex:none;
  width:210px; aspect-ratio:4/3;
  border-radius:14px; overflow:hidden;
  border:1px solid var(--m-line);
  outline:3px solid transparent; outline-offset:2px;
  box-shadow:var(--sh-soft);
  transition:transform .3s var(--ease), box-shadow .3s, outline-color .25s;
}
.refrow .refcard:hover{
  transform:rotate(var(--rr, 0deg)) translateY(-6px) scale(1.05);
  outline-color:var(--m-ac);
  z-index:20;
  box-shadow:var(--sh-lift);
}
.refcard img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block;
  pointer-events:none; -webkit-user-drag:none; user-select:none; }
.refcard__label{
  position:absolute; left:8px; right:8px; bottom:8px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:5px 12px; border-radius:999px;
  background:rgba(255,254,251,.92);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:var(--fs-2xs);
}
.refcard__label b{ font-weight:600; color:var(--m-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.refcard__label i{ font-style:normal; color:var(--m-ac); font-weight:600; opacity:0; transition:opacity .2s; white-space:nowrap; }
.refcard:hover .refcard__label i{ opacity:1; }

/* Автолента примеров */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track{ display:flex; gap:16px; width:max-content; padding:6px 0 10px; animation:slide 34s linear infinite; }
.marquee__track .ph{ width:250px; flex:none; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

@media (prefers-reduced-motion: reduce){
  .marquee__track, .p-hero-ticker__track, .p-hero-orbit, .p-hero-mark, .p-bar i, .p-prog--cur .p-prog__dot::after{ animation:none; }
}

/* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */
@media (max-width: 1120px){
  .p-h1{ font-size:24px; }
}

@media (max-width: 720px){
  .p-nav{ gap:14px; padding:12px 16px; flex-wrap:wrap; }
  .p-nav__right{ flex-wrap:wrap; max-width:100%; }
  .p-sec--flow{ overflow-x:clip; }
  .p-menu{ display:none; }
  .p-grid--3, .p-grid--4, .p-grid--2{ grid-template-columns:1fr; }
  .p-flow{ grid-template-columns:1fr; }
  .p-flow__arrow svg{ transform:rotate(90deg); }
  .vp--pad{ padding:20px 18px 24px; }
  .p-sec{ padding:24px 18px; }
  .p-hero{ padding:40px 18px 48px; }
  .p-support__head{ grid-template-columns:1fr; gap:14px; }
  .p-facts{ grid-template-columns:1fr 1fr; }
  .p-sec--flow .p-flow{ grid-template-columns:1fr; }
  .wm--big{ font-size:72px; }
  .p-shape{ display:none; }
  .p-steps{ padding:8px 14px; overflow-x:auto; }
  .p-foot{ padding:22px 18px; }
  .wm--hero{ font-size:38px; }
}

/* Aurora (React Bits) — фон секции «Стоимость»: канвас на всю секцию, контент поверх */
.p-sec--price{ position:relative; overflow:hidden; }
.p-sec-aurora{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.p-sec-aurora .aurora-container{ width:100%; height:100%; }
.p-sec-aurora canvas{ width:100%; height:100%; display:block; }
.p-sec--price > *:not(.p-sec-aurora){ position:relative; z-index:1; }

/* Секция «Стоимость» должна целиком помещаться в вьюпорт при переходе по якорю
   (#sec-price): ужат вертикальный ритм, чтобы плашка-примечание не резалась снизу */
.p-sec--price{ padding-top:24px; padding-bottom:28px; }
/* Стык с оранжевой секцией «Процесс»: базовый border-top секций читался белой линией
   на насыщенных фонах — у «Стоимости» разделитель убран, фоны переходят встык */
.p-sec--price{ border-top:0; }
.p-sec--price .p-h2{ margin-bottom:0; }
.p-sec--price .p-grid--3{ margin-top:14px; }
.p-sec--price .p-tile{ padding:22px 24px; }
.p-sec--price .p-tile .p-tile__pic{ max-width:230px; }
.p-sec--price .p-list li{ padding:5px 0 5px 22px; }
.p-sec--price .p-tile__result{ margin-top:10px; padding:8px 12px; }
.p-sec--price .p-price-callout{ margin-top:12px; padding:14px 20px; }
@media (max-height:820px){
  .p-sec--price .p-tile .p-tile__pic{ max-width:180px; }
  .p-sec--price .p-list li{ padding:4px 0 4px 22px; }
  .p-sec--price .p-price-note{ font-size:var(--fs-md); }
}

/* Карточки типов сайтов в секции «Стоимость» — полупрозрачные поверх Aurora:
   матовое стекло (backdrop-filter), вложенная плашка «Что получаете» тоже прозрачна */
.p-sec--price .p-tile{
  background:rgba(255,255,255,.52);
  border-color:rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 10px 30px -18px rgba(90,26,10,.4);
}
.p-sec--price .p-tile:hover{ background:rgba(255,255,255,.62); }
.p-sec--price .p-tile__result{
  background:rgba(255,255,255,.42); border-color:rgba(255,255,255,.5);
}
html.theme-dark .p-sec--price .p-tile{
  background:rgba(29,24,20,.52); border-color:rgba(255,255,255,.1);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.6);
}
html.theme-dark .p-sec--price .p-tile:hover{ background:rgba(29,24,20,.64); }
html.theme-dark .p-sec--price .p-tile__result{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12);
}

/* ------------------------------------------------------------------------
   Карточки шагов «Процесса» — 3D-tilt на чистом CSS (по мотивам Uiverse.io
   by kennyotsu): сетка 5×5 невидимых трекеров перед карточкой ловит курсор
   и через ~ поворачивает плиту; градиентное гало в палитре логотипа.
   Анимация разлёта (data-anim=flow) живёт на .p-flow__canvas, наклон — на
   .p-card, поэтому transform'ы не конфликтуют. */
.p-flow__canvas{
  position:relative;
  perspective:800px;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  grid-template-rows:repeat(5, 1fr);
  min-height:300px;
}
.p-flow__tr{ position:relative; z-index:3; }
/* Без собственного z-index: иначе плита создаёт stacking context и гало
   (::before, z-index:-1) легло бы поверх её фона, окрашивая карточку */
.p-sec--flow .p-flow .p-flow__canvas > .p-card{
  position:absolute; inset:0;
  transition:transform 125ms ease-in-out, box-shadow .3s, filter .3s;
}
/* Гало: тот же градиент под плитой, размытый и выходящий за её края */
.p-sec--flow .p-flow .p-flow__canvas > .p-card::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:20px;
  background:linear-gradient(43deg, var(--lg-red) 0%, var(--lg-mid) 46%, var(--lg-gold) 100%);
  filter:blur(2rem); opacity:.32; transition:opacity .2s;
}
.p-flow__canvas:hover > .p-card::before{ opacity:.8; }
.p-flow__canvas:hover > .p-card{ filter:brightness(1.03); }
.p-flow__canvas:active > .p-card{ transform:translateY(-2px); }
/* Номер шага — проявляется при наведении (в оригинале так ведёт себя .title) */
.p-flow__step{
  position:absolute; top:14px; right:18px; z-index:4; pointer-events:none;
  font-family:var(--f-disp); font-size:15px; font-weight:600; letter-spacing:.02em;
  background:linear-gradient(120deg, var(--lg-red), var(--lg-gold));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  opacity:0; transform:translateY(-4px);
  transition:opacity .3s ease-in-out .1s, transform .3s ease-in-out .1s;
}
.p-flow__canvas:hover .p-flow__step{ opacity:1; transform:translateY(0); }
/* 25 зон наведения: ряды задают наклон по X, колонки — по Y */
.p-flow__tr.tr-1:hover  ~ .p-card{ transform:rotateX(20deg)  rotateY(-10deg); }
.p-flow__tr.tr-2:hover  ~ .p-card{ transform:rotateX(20deg)  rotateY(-5deg); }
.p-flow__tr.tr-3:hover  ~ .p-card{ transform:rotateX(20deg)  rotateY(0deg); }
.p-flow__tr.tr-4:hover  ~ .p-card{ transform:rotateX(20deg)  rotateY(5deg); }
.p-flow__tr.tr-5:hover  ~ .p-card{ transform:rotateX(20deg)  rotateY(10deg); }
.p-flow__tr.tr-6:hover  ~ .p-card{ transform:rotateX(10deg)  rotateY(-10deg); }
.p-flow__tr.tr-7:hover  ~ .p-card{ transform:rotateX(10deg)  rotateY(-5deg); }
.p-flow__tr.tr-8:hover  ~ .p-card{ transform:rotateX(10deg)  rotateY(0deg); }
.p-flow__tr.tr-9:hover  ~ .p-card{ transform:rotateX(10deg)  rotateY(5deg); }
.p-flow__tr.tr-10:hover ~ .p-card{ transform:rotateX(10deg)  rotateY(10deg); }
.p-flow__tr.tr-11:hover ~ .p-card{ transform:rotateX(0deg)   rotateY(-10deg); }
.p-flow__tr.tr-12:hover ~ .p-card{ transform:rotateX(0deg)   rotateY(-5deg); }
.p-flow__tr.tr-13:hover ~ .p-card{ transform:rotateX(0deg)   rotateY(0deg); }
.p-flow__tr.tr-14:hover ~ .p-card{ transform:rotateX(0deg)   rotateY(5deg); }
.p-flow__tr.tr-15:hover ~ .p-card{ transform:rotateX(0deg)   rotateY(10deg); }
.p-flow__tr.tr-16:hover ~ .p-card{ transform:rotateX(-10deg) rotateY(-10deg); }
.p-flow__tr.tr-17:hover ~ .p-card{ transform:rotateX(-10deg) rotateY(-5deg); }
.p-flow__tr.tr-18:hover ~ .p-card{ transform:rotateX(-10deg) rotateY(0deg); }
.p-flow__tr.tr-19:hover ~ .p-card{ transform:rotateX(-10deg) rotateY(5deg); }
.p-flow__tr.tr-20:hover ~ .p-card{ transform:rotateX(-10deg) rotateY(10deg); }
.p-flow__tr.tr-21:hover ~ .p-card{ transform:rotateX(-20deg) rotateY(-10deg); }
.p-flow__tr.tr-22:hover ~ .p-card{ transform:rotateX(-20deg) rotateY(-5deg); }
.p-flow__tr.tr-23:hover ~ .p-card{ transform:rotateX(-20deg) rotateY(0deg); }
.p-flow__tr.tr-24:hover ~ .p-card{ transform:rotateX(-20deg) rotateY(5deg); }
.p-flow__tr.tr-25:hover ~ .p-card{ transform:rotateX(-20deg) rotateY(10deg); }
/* Тач и «меньше движения»: наклон отключаем, гало оставляем */
@media (hover:none), (prefers-reduced-motion:reduce){
  .p-flow__tr{ pointer-events:none; }
  .p-flow__step{ opacity:1; transform:none; }
}

/* Статичная подпись сохраняет типографику прежней бегущей строки. */
.p-hero .p-hero-caption {
  position:absolute; top:auto; bottom:32px; left:16px; right:16px; width:auto; margin:0;
  font-family:var(--f-disp); font-size:calc(.9vw - .3px); font-weight:600; white-space:nowrap;
  text-transform:uppercase; letter-spacing:.005em; line-height:1.4; text-align:justify; text-align-last:justify;
  color:var(--m-ink); transition:opacity .3s ease, visibility .3s ease; pointer-events:none;
}
.p-hero.is-assembled .p-hero-caption { opacity:0; visibility:hidden; }
.p-sec--price { background:linear-gradient(135deg, #C2452F 0%, #D96B32 52%, #E39A3C 118%); }
.p-sec--price > .p-h2 { color:#fff; }
.p-sec--price .p-tile { padding:28px; }
.p-sec--price .p-tile .p-h3 {
  font-family:var(--f-disp); font-weight:500; font-size:clamp(20px, 2vw, 27px);
  letter-spacing:.01em; line-height:1.35; overflow-wrap:anywhere;
}
.p-sec--price .p-list li, .p-sec--price .p-tile__result { font-size:16px; line-height:1.55; }
.p-sec--price .p-tile .p-tile__pic { max-width:370px; width:100%; }
.p-sec--price .p-tile__price { font-size:30px; }
.p-sec--price .p-tile__price small { font-size:14px; }
.p-support__head { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.p-support__body { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:56px; align-items:center; margin-top:40px; }
.p-support__body .p-lapwrap { width:100%; margin:0; }
.support-form { position:relative; z-index:2; min-width:0; padding:32px; border:1px solid #ffffff26; border-radius:22px; background:#ffffff08; }
.support-form .p-h3 { font-family:var(--f-disp); font-size:22px; font-weight:500; margin-bottom:24px; }
.support-form__fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.support-form label { display:block; margin-bottom:20px; font-size:14px; }
.support-form .p-input, .support-form .p-textarea { display:block; width:100%; margin-top:8px; background:#ffffff08; border-color:#ffffff30; color:#fff; }
.support-form .p-input:focus, .support-form .p-textarea:focus { border-color:#E39A3C; background:#ffffff0d; }
.support-form__consent { display:flex !important; gap:10px; align-items:start; color:#c9c1b9; font-size:12px !important; line-height:1.6; }
.support-form__consent input { flex:none; width:16px; height:16px; margin-top:2px; accent-color:#d65c28; }
.support-form a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.support-form__actions { display:block; clear:both; margin-top:24px; }
.support-form__actions .p-btn { min-height:48px; }
.support-form__status { margin-top:16px; }
@media (max-width:900px) {
  .p-hero .p-hero-caption { left:16px; right:16px; font-size:14px; line-height:1.6; white-space:normal; }
  .p-support__body { gap:24px; }
  .support-form { padding:24px; }
  .support-form__fields { grid-template-columns:1fr; gap:0; }
}
@media (max-width:640px) {
  .p-support__head, .p-support__body { grid-template-columns:1fr; }
  .p-support__body { margin-top:16px; gap:16px; }
  .p-support__body .p-lapwrap { width:min(400px, 100%); justify-self:center; }
  .support-form { padding:24px 20px; }
  .support-form__actions .p-btn { width:100%; }
  .p-sec--price .p-tile { padding:24px; }
}
@media (prefers-reduced-motion:reduce) { .p-hero .p-hero-caption { transition:none; } }

/* Логотип выше, подпись остаётся внутри первого экрана. */
.p-hero.p-hero--fx { padding-top:64px; }

/* Pricing: site type selector and two comparable launch options. */
.p-sec--price{ padding:48px 36px; }
.pricing{ width:100%; max-width:1200px; margin:0 auto; }
.pricing__heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; color:#fff; margin-bottom:28px; }
.pricing__eyebrow{ margin:0 0 12px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.pricing__heading h2{ margin:0; font-family:var(--f-disp); font-size:clamp(24px, 2.8vw, 38px); font-weight:500; line-height:1.3; }
.pricing__heading > p{ max-width:290px; margin:0; font-size:15px; line-height:1.6; }
.pricing__types{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content minmax(0,1fr); gap:8px; padding:6px; margin-bottom:20px; border:1px solid rgba(255,255,255,.35); border-radius:22px; background:rgba(40,15,5,.12); }
.pricing__types button{ display:flex; flex-direction:column; gap:6px; padding:18px 20px; border:1px solid transparent; border-radius:16px; background:transparent; color:#fff; font:inherit; text-align:left; cursor:pointer; transition:background .2s, color .2s; }
.pricing__types button:hover{ background:rgba(255,255,255,.12); }
.pricing__types button[aria-pressed="true"]{ background:var(--m-surface); color:var(--m-ink); box-shadow:var(--sh-soft); }
.pricing__types button > span:last-child{ font-size:13px; }
.pricing__types button:nth-child(3) > span:last-child{ white-space:nowrap; }
.pricing__type-name{ display:flex; justify-content:space-between; gap:10px; font-size:17px; font-weight:650; }
.pricing__type-name > span{ opacity:.55; }
.pricing__types button[aria-pressed="true"] .pricing__type-name > span{ color:var(--m-ac); opacity:1; }
.pricing__types button:focus-visible, .pricing a:focus-visible{ outline:3px solid var(--m-ink); outline-offset:3px; }
.pricing__features li{ position:relative; padding-left:22px; }
.pricing__features li::before{ content:'✓'; position:absolute; left:0; color:var(--m-ac); font-weight:600; }
.pricing__plans{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pricing__plan{ display:flex; flex-direction:column; padding:28px; border:0; border-radius:22px; background:color-mix(in srgb, var(--m-surface) 65%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:var(--m-ink); box-shadow:var(--sh-soft); }
.pricing__plan h3{ margin:0 0 10px; font-family:var(--f-disp); font-size:clamp(18px, 2vw, 24px); line-height:1.4; font-weight:500; }
.pricing__description{ margin:0; max-width:440px; min-height:48px; color:var(--m-ink-2); font-size:15px; line-height:1.6; }
.pricing__price{ margin:20px 0 2px; font-size:clamp(32px, 3vw, 44px); line-height:1.2; font-weight:650; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.pricing__price span{ font-size:.7em; font-weight:400; }
.pricing__payment{ margin:0; color:var(--m-ink-2); font-size:13px; }
.pricing__features{ display:grid; gap:10px; list-style:none; padding:20px 0; margin:20px 0 0; border-top:1px solid var(--m-line); font-size:15px; }
.pricing__result{ margin:auto 0 0; padding-top:16px; border-top:1px solid var(--m-line); font-size:14px; }
.pricing__result span{ display:block; margin-bottom:4px; color:var(--m-ink-2); font-size:12px; }
.pricing__footer{ display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:20px; padding:20px 24px; background:color-mix(in srgb, var(--m-surface) 65%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:var(--m-ink); border-radius:22px; box-shadow:var(--sh-soft); }
.pricing__footer p{ margin:0; font-size:13px; line-height:1.5; }
.pricing__footer strong{ display:block; margin-bottom:4px; font-size:16px; font-weight:600; }
.pricing__footer p > span{ color:var(--m-ink-2); }
.pricing__footer-actions{ display:flex; flex-shrink:0; gap:12px; }
.pricing__footer .p-btn{ flex-shrink:0; gap:20px; }
.pricing__scope{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--m-line); border-radius:22px; overflow:hidden; background:color-mix(in srgb, var(--m-surface) 65%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:var(--m-ink); }
.pricing__scope-column{ padding:28px; }
.pricing__scope-column--excluded{ border-left:1px solid var(--m-line); }
.pricing__scope-column h3{ display:flex; align-items:center; gap:12px; margin:0 0 20px; font-family:var(--f-disp); font-size:17px; line-height:1.4; font-weight:500; color:var(--m-ink); }
.pricing__scope-icon{ display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg, var(--lg-mid), var(--lg-gold)); color:#fff; font-family:var(--f-ui); font-size:18px; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px -5px rgba(194,69,47,.45); }
.pricing__scope-column ul{ margin:0; padding:0; list-style:none; }
.pricing__scope-column li{ display:flex; align-items:baseline; gap:12px; padding:12px 0; border-top:1px solid var(--m-line); font-size:14px; line-height:1.6; }
.pricing__scope-column li > span{ flex:none; width:16px; color:var(--m-ok); font-weight:600; text-align:center; }
.pricing__scope-column--excluded li > span{ color:var(--m-ink-3); }
.pricing__scope-note{ grid-column:1 / -1; padding:20px 28px; border-top:1px solid var(--m-line); font-size:13px; line-height:1.7; color:var(--m-ink-2); }
.pricing__scope-note p{ margin:0 0 10px; }
.pricing__scope-note a{ color:var(--m-ink); text-decoration:underline; text-underline-offset:3px; }
@media(min-width:761px) and (max-width:1100px){
  .pricing__types{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px){
  .p-sec--price{ padding:32px 18px; }
  .pricing__heading{ align-items:flex-start; flex-direction:column; gap:16px; }
  .pricing__heading > p{ max-width:500px; }
  .pricing__types{ grid-template-columns:1fr; }
  .pricing__types button{ padding:12px 14px; gap:3px; }
  .pricing__types button > span:last-child{ font-size:12px; }
  .pricing__plans{ grid-template-columns:1fr; }
  .pricing__plan{ padding:22px; }
  .pricing__description{ min-height:0; }
  .pricing__footer{ flex-direction:column; align-items:stretch; padding:20px; gap:16px; }
  .pricing__footer-actions{ flex-direction:column; }
  .pricing__footer .p-btn{ justify-content:center; white-space:normal; }
  .pricing__scope{ grid-template-columns:1fr; }
  .pricing__scope-column{ padding:22px; }
  .pricing__scope-column--excluded{ border-left:0; border-top:1px solid var(--m-line); }
  .pricing__scope-note{ padding:20px 22px; }
}

/* Keep the full pricing comparison inside the desktop viewport. */
@media(min-width:1101px){
  .p-sec--price{ padding:20px 36px; }
  .pricing__heading{ margin-bottom:14px; }
  .pricing__heading h2{ font-size:clamp(26px, 2.2vw, 32px); }
  .pricing__types{ margin-bottom:14px; padding:4px; }
  .pricing__types button{ padding:10px 16px; gap:2px; }
  .pricing__plan{ padding:20px 24px; }
  .pricing__plan h3{ font-size:21px; margin-bottom:6px; }
  .pricing__description{ font-size:14px; line-height:1.45; min-height:41px; max-width:none; }
  .pricing__price{ margin-top:10px; font-size:36px; }
  .pricing__features{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:8px 20px; margin-top:12px; padding:12px 0; font-size:13px; line-height:1.45; }
  .pricing__features li{ padding-left:18px; }
  .pricing__result{ padding-top:10px; font-size:13px; }
  .pricing__result span{ margin-bottom:2px; }
  .pricing__footer{ margin-top:12px; padding:12px 20px; }
  .pricing__scope-column{ padding:20px 24px; }
  .pricing__scope-column h3{ margin-bottom:12px; }
  .pricing__scope-column li{ padding:8px 0; font-size:13px; }
  .pricing__scope-note{ padding:14px 24px; line-height:1.5; }
  .pricing__scope-note p:last-child{ margin-bottom:0; }
}
@media(min-width:1101px) and (max-height:800px){
  .p-sec--price{ padding-top:12px; padding-bottom:12px; }
  .pricing__heading{ margin-bottom:10px; }
  .pricing__heading h2{ font-size:28px; }
  .pricing__types{ margin-bottom:10px; }
  .pricing__types button{ padding-top:8px; padding-bottom:8px; }
  .pricing__plan{ padding:16px 20px; }
  .pricing__description{ min-height:36px; font-size:13px; line-height:1.4; }
  .pricing__price{ margin-top:6px; font-size:32px; }
  .pricing__features{ gap:5px 16px; margin-top:8px; padding:8px 0; line-height:1.4; }
  .pricing__result{ padding-top:8px; line-height:1.4; }
  .pricing__result span{ display:inline; margin-right:8px; }
}

/* A shared colour band blends the process background into the pricing aurora. */
.p-sec--flow, .p-sec--price{
  --section-bridge:linear-gradient(90deg, #C2452F 0%, #D96B32 52%, #E39A3C 100%);
}
.p-sec--flow::after{
  content:""; position:absolute; inset:auto 0 0; height:clamp(160px, 24vh, 260px);
  z-index:-1; pointer-events:none; background:var(--section-bridge);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000);
  mask-image:linear-gradient(to bottom, transparent, #000);
}
.p-sec--price{ background:var(--section-bridge); }
.p-sec--price .p-sec-aurora{
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 min(280px, 40%));
  mask-image:linear-gradient(to bottom, transparent, #000 min(280px, 40%));
}

/* Reserve the animated layout from the first paint; keep its heading accessible. */
html[data-hero-letters] .p-hero--fx .p-h1{
  position:absolute; width:1px; height:1px; padding:0; margin:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

.p-hero.p-screen{ min-height:calc(100dvh - var(--landing-nav-height, 64px)); }

/* Spatial catalogue with alternating animated columns. */
.p-sec.p-styles-marquee { border-top:0; display:flex; flex-direction:column; justify-content:flex-start; gap:20px; padding:24px; height:max(620px, calc(100dvh - var(--landing-nav-height, 64px))); overflow:hidden; }
.p-styles-marquee > .p-h2 { margin:0 12px; font-size:clamp(28px, 3vw, 40px); flex:none; }
.p-styles-marquee__stage { position:relative; isolation:isolate; width:100%; max-width:none; flex:1; min-height:0; margin:0 auto; overflow:hidden; border-radius:24px; border:1px solid var(--m-line); background:inherit; }
.p-styles-marquee__scene { position:absolute; inset:0; overflow:hidden; mask-image:linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.p-styles-marquee__plane { position:absolute; left:50%; top:50%; width:max(1480px, 112vw); height:1600px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; transform:translate(-50%,-50%) rotateX(48deg) rotateZ(-32deg); transform-style:preserve-3d; }
.p-styles-marquee__column { align-self:start; animation:styles-drift 65s linear infinite; animation-play-state:paused; will-change:transform; }
.p-styles-marquee__column:nth-child(even) { animation-direction:reverse; animation-duration:75s; }
.p-styles-marquee__group { display:grid; gap:24px; padding-bottom:24px; }
.p-styles-marquee__card { display:block; text-decoration:none; margin:0; overflow:hidden; border-radius:12px; border:1px solid var(--m-line-2); background:var(--m-surface); box-shadow:0 10px 20px -12px rgb(26 22 19 / 35%); transition:transform 250ms ease, box-shadow 250ms ease; }
.p-styles-marquee__card img { display:block; width:100%; height:224px; object-fit:cover; object-position:top; }
.p-styles-marquee__card figcaption { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; font-size:12px; color:var(--m-ink-2); }
.p-styles-marquee__card figcaption span:last-child { color:var(--m-ac); }
.p-styles-marquee__stage[data-running="true"] .p-styles-marquee__column { animation-play-state:running; }
.p-styles-marquee__stage:hover .p-styles-marquee__column, .p-styles-marquee__stage:focus-within .p-styles-marquee__column { animation-play-state:paused; }
.p-styles-marquee__card:hover { transform:translateY(-8px); box-shadow:0 20px 30px -12px rgb(26 22 19 / 35%); }
.p-styles-marquee__pause { position:absolute; z-index:2; bottom:16px; right:16px; display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--m-line-2); border-radius:50%; color:var(--m-ink); background:var(--m-surface); cursor:pointer; }
.p-styles-marquee__pause:focus-visible { outline:2px solid var(--m-ac); outline-offset:4px; }
@keyframes styles-drift { to { transform:translateY(-50%); } }
@media (max-width:700px) {
  .p-sec.p-styles-marquee { padding:24px 12px; gap:18px; }
  .p-styles-marquee__stage { border-radius:18px; }
  .p-styles-marquee__plane { width:1040px; gap:16px; transform:translate(-50%,-50%) rotateX(45deg) rotateZ(-30deg); }
  .p-styles-marquee__card img { height:170px; }
  .p-styles-marquee__group { gap:16px; padding-bottom:16px; }
  .p-styles-marquee__card figcaption { padding:10px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .p-styles-marquee__column { animation:none; will-change:auto; }
  .p-styles-marquee__card { transition:none; }
  .p-styles-marquee__pause { display:none; }
}

.p-styles-marquee__card:focus-visible { outline:3px solid var(--m-ac); outline-offset:4px; }

/* Compact dimensional illustrations for the original four process cards. */
.p-flow .flow-illustration { display:block; width:180px; max-width:100%; height:auto; margin:12px 0; overflow:visible; }

.p-sec--flow .p-flow__n { width:120px; max-width:100%; flex-shrink:0; padding-inline:8px; }

.service-step-mark { flex:0 0 24px; color:var(--m-ac); font-weight:700; line-height:24px; text-align:center; }

@media(max-width:1100px) { .p-hero .p-hero-caption { font-size:14px; white-space:normal; text-wrap:balance; text-align:center; text-align-last:center; line-height:1.6; } }

/* Five-step process from the supplied HTML; the existing flow gradient and bridge stay in place. */
.process-journey { padding:clamp(56px, 6vw, 92px) clamp(20px, 3.1vw, 48px); color:#fff; }
.process-journey__inner { width:min(1210px, 100%); margin-inline:auto; }
.process-journey__eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 20px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.process-journey__eyebrow::before { content:""; width:29px; height:1px; background:currentColor; opacity:.72; }
.process-journey__title { margin:0; font-family:var(--f-disp); font-size:clamp(32px, 4.2vw, 54px); font-weight:600; line-height:1.15; letter-spacing:-.04em; text-wrap:balance; }
.process-journey__lead { margin:22px 0 0; color:rgba(255,255,255,.9); font-family:var(--f-disp); font-size:clamp(17px, 1.7vw, 21px); font-weight:500; line-height:1.45; letter-spacing:-.03em; }
.process-journey__scroll { margin-top:46px; padding:5px 2px 24px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent; }
.process-journey__scroll:focus-visible { outline:2px solid #fff; outline-offset:6px; border-radius:16px; }
.process-journey__track { position:relative; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; min-width:900px; margin:0; padding:40px 0 0; list-style:none; }
.process-journey__track::before { content:""; position:absolute; top:74px; left:10%; right:10%; height:2px; background:linear-gradient(90deg, rgba(255,245,215,.4), #fff0c6 12%, rgba(255,255,255,.68) 50%, #fff0c6 88%, rgba(255,245,215,.4)); box-shadow:0 0 14px rgba(255,236,184,.28); }
.process-journey__step { position:relative; z-index:1; min-width:0; padding:0 8px; text-align:center; }
.process-journey__edge { position:absolute; top:-32px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.process-journey__node { position:relative; display:grid; place-items:center; width:70px; height:70px; margin:0 auto 22px; border:1px solid rgba(255,255,255,.9); border-radius:50%; color:#9f402f; background:radial-gradient(circle at 33% 25%, #fff 0 18%, #f8ecd9 58%, #e5c8a2 100%); box-shadow:0 0 0 7px rgba(159,58,35,.22), 0 12px 28px rgba(91,29,18,.27), inset 0 1px 0 #fff; transition:transform .2s ease, box-shadow .2s ease; }
.process-journey__node svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.process-journey__step:last-child .process-journey__node { color:#fff; background:linear-gradient(145deg, #7e271f, #d86d34 62%, #e6a441); box-shadow:0 0 0 8px rgba(255,235,176,.22), 0 15px 34px rgba(91,29,18,.34), inset 0 1px 0 rgba(255,255,255,.5); }
.process-journey__kicker { display:block; margin-bottom:10px; color:rgba(255,244,220,.8); font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.process-journey__step h3 { min-height:44px; margin:0; font-family:var(--f-disp); font-size:14px; font-weight:500; line-height:1.45; letter-spacing:-.02em; text-wrap:balance; }
.process-journey__step p { max-width:170px; margin:8px auto 0; color:rgba(255,255,255,.82); font-size:13px; line-height:1.45; }
.process-journey__hint { display:none; margin:0; color:rgba(255,255,255,.75); font-size:12px; text-align:right; }
.process-journey__finish { display:flex; align-items:center; gap:16px; margin-top:16px; padding-top:25px; border-top:1px solid rgba(255,255,255,.3); }
.process-journey__finish > strong { margin-right:auto; font-family:var(--f-disp); font-size:clamp(18px, 1.7vw, 23px); font-weight:500; line-height:1.4; letter-spacing:-.03em; }
.process-journey__chip { display:inline-flex; align-items:center; min-height:34px; padding:7px 13px; border:1px solid rgba(255,255,255,.25); border-radius:999px; color:rgba(255,255,255,.88); background:rgba(91,28,18,.15); font-size:11px; font-weight:600; white-space:nowrap; }
.process-journey .process-journey__cta { flex-shrink:0; min-height:42px; padding:10px 22px; color:#4b271d; background:#fff; border-color:#fff; box-shadow:0 10px 24px rgba(77,26,15,.16); }
.process-journey .process-journey__cta:hover { color:#4b271d; background:#fff5e7; border-color:#fff5e7; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .process-journey__step:hover .process-journey__node { transform:translateY(-4px) scale(1.04); }
}
@media (max-width:1100px) {
  .process-journey__finish { flex-wrap:wrap; }
  .process-journey__finish > strong { flex-basis:100%; }
  .process-journey__cta { margin-left:auto; }
}
@media (max-width:1000px) {
  .process-journey__hint { display:block; }
}
@media (max-width:680px) {
  .process-journey { padding:56px 20px; }
  .process-journey__title { max-width:500px; font-size:clamp(30px, 7vw, 40px); }
  .process-journey__lead { max-width:320px; }
  .process-journey__scroll { margin:30px -20px 0; padding-inline:20px; scroll-snap-type:x proximity; scroll-padding-inline:20px; }
  .process-journey__step { scroll-snap-align:center; }
  .process-journey__finish { gap:10px; margin-top:24px; }
  .process-journey__finish > strong { max-width:310px; margin-bottom:5px; }
  .process-journey .process-journey__cta { width:100%; margin-top:8px; }
}