/* ===========================================================================
   Дверь «Направо — откроешь» — мастерская в процессе
   5 экранов: подводка → витрина 3 проектов → два вопроса → «записано» → «огонь к огню» + «получил»
   Визуальный язык: тот же, что «Налево», но теплее — уголь с живым огнём,
   больше динамики в фоне, искры.
   =========================================================================== */

@import url('./hero.css');
@import url('./door2.css');

/* -------- temperature shift (живой ember warm) -------- */
:root {
  --d4-bg:          #0E0805;   /* глубокий тёплый уголь */
  --d4-bg-soft:     #180F08;
  --d4-bg-deepest:  #060302;
  --d4-ember-hi:    #4A2810;   /* тлеющий уголь */
  --d4-ember-mid:   #2B1808;
  --d4-ember-glow:  #8A4418;   /* живое свечение */

  --d4-ink:         #F2E8D6;   /* тот же бумажно-тёплый белый */
  --d4-ink-dim:     rgba(242,232,214,.72);
  --d4-ink-mid:     rgba(242,232,214,.56);
  --d4-ink-mute:    rgba(242,232,214,.40);
  --d4-ink-whisper: rgba(242,232,214,.22);
  --d4-hair:        rgba(242,232,214,.10);
  --d4-hair-soft:   rgba(242,232,214,.05);

  --d4-accent:      #C4952A;           /* та же охра — единственный акцент */
  --d4-accent-hot:  #D9A83F;           /* разогретая охра для hover */

  /* Tweaks */
  --d4-ember-strength: 60;   /* 0..100 */
  --d4-darkness:       0;    /* -10..+10 */
  --d4-motion:         1.15; /* множитель скорости движения фона */
}

.door4-stage {
  background: var(--d4-bg);
  color: var(--d4-ink);
  font-family: 'Cormorant Garamond', serif;
}

/* =========================================================================
   Общий контейнер сцены
   ========================================================================= */
.d4 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--d4-bg);
  isolation: isolate;
  color: var(--d4-ink);
  font-family: 'Cormorant Garamond', serif;
}

/* -------- фон: тёплый уголь с живым огнём -------- */
.d4-bg {
  position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 140% 90% at 50% 105%, var(--d4-ember-hi) 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 50% 18%, var(--d4-ember-mid) 0%, transparent 70%),
    linear-gradient(180deg, var(--d4-bg-deepest) 0%, var(--d4-bg) 46%, var(--d4-bg-soft) 100%);
}

/* Живое ember-свечение — большие радиалы, медленное «дыхание» */
.d4-bg__ember {
  position: absolute; inset: -4%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle 580px at 18% 82%, rgba(138,68,24,0.32), transparent 68%),
    radial-gradient(circle 460px at 84% 22%, rgba(138,68,24,0.18), transparent 70%),
    radial-gradient(circle 360px at 64% 72%, rgba(196,149,42,0.10), transparent 72%);
  mix-blend-mode: screen;
  opacity: .9;
  animation: d4-ember-pulse calc(11s / var(--d4-motion, 1)) ease-in-out infinite;
}
@keyframes d4-ember-pulse {
  0%, 100% { opacity: .72; transform: scale(1) translateY(0); }
  50%      { opacity: 1;    transform: scale(1.035) translateY(-1.2%); }
}

/* Второй слой — медленное смещение, как ветер над углями */
.d4-bg__breath {
  position: absolute; inset: -5%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 38% at 48% 54%, rgba(196,149,42,0.08) 0%, transparent 72%);
  animation: d4-breath calc(14s / var(--d4-motion, 1)) ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes d4-breath {
  0%, 100% { opacity: .6; transform: scale(1) translateX(0); }
  50%      { opacity: 1;  transform: scale(1.05) translateX(0.6%); }
}

/* Искры — точечный параллакс, редкие тёплые вспышки */
.d4-sparks {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.d4-spark {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--d4-accent-hot);
  box-shadow: 0 0 6px 1px rgba(217,168,63,0.7);
  opacity: 0;
  animation-name: d4-spark-rise;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
@keyframes d4-spark-rise {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  10%  { opacity: 0.9; }
  60%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-240px) scale(0.4); }
}

/* зерно — «мастерская» */
.d4-grain {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.85  0 0 0 0 0.6  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

.d4-vignette {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 78% 80% at 50% 52%, transparent 48%, rgba(0,0,0,0.56) 100%);
}

/* углы */
.d4-corner {
  position: absolute;
  z-index: 6;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--d4-ink-whisper);
  pointer-events: none;
}
.d4-corner--tl { top: 44px; left: 60px; }
.d4-corner--tr { top: 44px; right: 60px; }
.d4-corner--br { bottom: 44px; right: 60px; }

/* «к трём дорогам» */
.d4-home {
  position: absolute; bottom: 44px; left: 60px; z-index: 6;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--d4-ink-mute);
  background: none; border: none; cursor: pointer;
  padding: 0;
  transition: color 280ms ease;
}
.d4-home:hover { color: var(--d4-ink-dim); }
.d4-home::before { content: '← '; color: var(--d4-ink-whisper); }

/* фокус-контейнер */
.d4-focus {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  z-index: 4;
  padding: 140px 80px;
}
.d4-stack {
  max-width: 1020px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* =========================================================================
   SCREEN 01 — Подводка · «ТЫ ВЫБРАЛ — НАПРАВО»
   ========================================================================= */
.d4-intro__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--d4-ink-mute);
  margin-bottom: 40px;
}
.d4-intro__eyebrow::before,
.d4-intro__eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--d4-ink-whisper);
  vertical-align: middle;
  margin: 0 16px;
}
.d4-intro__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(52px, 6.4vw, 102px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--d4-ink);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.d4-intro__title em {
  font-style: italic;
  color: var(--d4-ink);
}
.d4-intro__title .d4-accent-line {
  position: relative;
  display: inline-block;
}
.d4-intro__title .d4-accent-line::after {
  content: '';
  position: absolute;
  left: 4%; right: 4%;
  bottom: 0.08em;
  height: 1px;
  background: var(--d4-accent);
  opacity: .65;
  transform: scaleX(0);
  transform-origin: left center;
  animation: d4-line-in 1400ms cubic-bezier(.2,.7,.2,1) 700ms forwards;
}
@keyframes d4-line-in { to { transform: scaleX(1); } }

.d4-intro__subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.42;
  color: var(--d4-ink-dim);
  margin: 40px 0 0;
  max-width: 38ch;
  text-wrap: pretty;
}
.d4-intro__postscript {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--d4-ink-mute);
  margin-top: 34px;
}
.d4-intro__postscript em {
  color: var(--d4-accent);
  font-style: normal;
  opacity: .9;
}
.d4-intro__cta {
  margin-top: 76px;
  background: transparent;
  border: 1px solid var(--d4-hair);
  color: var(--d4-ink);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 17px 30px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  transition: all 260ms ease;
  position: relative;
  overflow: hidden;
}
.d4-intro__cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(217,168,63,0.32), transparent 72%);
  opacity: 0;
  transition: opacity 480ms ease;
}
.d4-intro__cta:hover {
  border-color: var(--d4-accent);
  color: var(--d4-accent-hot);
}
.d4-intro__cta:hover::before { opacity: 1; }
.d4-intro__cta__arrow {
  display: inline-block;
  transition: transform 320ms ease;
}
.d4-intro__cta:hover .d4-intro__cta__arrow { transform: translateX(5px); }

/* тихий верстак — силуэт на фоне */
.d4-intro__workshop {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: grid;
  place-items: end center;
  padding-bottom: 8%;
  opacity: 0.10;
}
.d4-intro__workshop svg {
  width: min(900px, 70vw);
  height: auto;
  color: var(--d4-ink);
}

/* =========================================================================
   SCREEN 02 — Витрина проектов · «ЧТО Я ДЕЛАЮ ПРЯМО СЕЙЧАС»
   ========================================================================= */
.d4--showcase .d4-focus { padding: 100px 80px; }

.d4-showcase {
  width: 100%;
  max-width: 1720px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.d4-showcase__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.d4-showcase__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--d4-ink-mute);
}
.d4-showcase__eyebrow::before,
.d4-showcase__eyebrow::after {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--d4-ink-whisper);
  vertical-align: middle;
  margin: 0 14px;
}
.d4-showcase__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(36px, 4.2vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--d4-ink);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.d4-showcase__title em {
  font-style: italic;
  color: var(--d4-ink);
}
.d4-showcase__sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--d4-ink-mid);
  margin: 0;
  max-width: 50ch;
}

.d4-showcase__grid {
  display: grid;
  gap: 42px;
}
.d4-showcase__grid.layout-horizontal {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
.d4-showcase__grid.layout-stack {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}
.d4-showcase__grid.layout-mosaic {
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 32px;
}

/* КАРТОЧКА ПРОЕКТА — открытая страница, не коробка */
.d4-card {
  position: relative;
  padding: 44px 40px 36px;
  background: linear-gradient(180deg,
    rgba(242,232,214,0.015) 0%,
    rgba(242,232,214,0.04) 100%);
  border-top: 1px solid var(--d4-hair-soft);
  border-bottom: 1px solid var(--d4-hair-soft);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: background 360ms ease, border-color 360ms ease;
  overflow: hidden;
  min-height: 460px;
}
.d4-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--d4-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 560ms cubic-bezier(.2,.7,.2,1);
}
.d4-card:hover::before { transform: scaleX(1); }
.d4-card:hover {
  background: linear-gradient(180deg,
    rgba(196,149,42,0.04) 0%,
    rgba(196,149,42,0.01) 100%);
  border-top-color: rgba(196,149,42,0.35);
  border-bottom-color: rgba(196,149,42,0.20);
}

.d4-card__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--d4-ink-mute);
}
.d4-card__status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--d4-accent);
  box-shadow: 0 0 8px rgba(196,149,42,0.7);
  animation: d4-dot-pulse 2.6s ease-in-out infinite;
}
@keyframes d4-dot-pulse {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}
.d4-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(34px, 2.8vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--d4-ink);
  margin: 0;
  position: relative;
  display: inline-block;
  max-width: 14ch;
  align-self: flex-start;
}
.d4-card__title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 32px; height: 1px;
  background: var(--d4-accent);
  opacity: .5;
  transition: width 420ms cubic-bezier(.2,.7,.2,1), opacity 320ms ease;
}
.d4-card:hover .d4-card__title::after { width: 72px; opacity: 1; }

.d4-card__essence {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.52;
  color: var(--d4-ink-dim);
  margin: 0;
  text-wrap: pretty;
  flex: 1;
  padding-top: 8px;
}
.d4-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 8px;
}
.d4-card__kadr {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--d4-ink-whisper);
  padding-bottom: 8px;
}
.d4-card__action {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--d4-hair);
  color: var(--d4-ink-dim);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 10px 0 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: color 260ms ease, border-color 260ms ease;
  white-space: nowrap;
}
.d4-card__action:hover {
  color: var(--d4-accent-hot);
  border-color: var(--d4-accent);
}
.d4-card__action__arrow {
  display: inline-block;
  transition: transform 280ms ease;
}
.d4-card__action:hover .d4-card__action__arrow {
  transform: translateX(4px);
}

/* стек — карточка в ряд */
.layout-stack .d4-card {
  flex-direction: row;
  gap: 48px;
  align-items: flex-start;
  min-height: 0;
  padding: 36px 40px;
}
.layout-stack .d4-card__title { font-size: 40px; flex: 0 0 auto; max-width: 10ch; }
.layout-stack .d4-card__essence { font-size: 19px; padding-top: 10px; }
.layout-stack .d4-card__foot { flex: 0 0 auto; flex-direction: column; align-items: flex-end; }

/* =========================================================================
   SCREEN 03 — Два вопроса · форма ввода
   ========================================================================= */
.d4--intentions .d4-focus { padding: 120px 80px; }

.d4-intent {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}
.d4-intent__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--d4-ink-mute);
}
.d4-intent__eyebrow::before,
.d4-intent__eyebrow::after {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--d4-ink-whisper);
  vertical-align: middle;
  margin: 0 14px;
}
.d4-intent__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--d4-ink);
  margin: 0 0 18px;
  max-width: 20ch;
  text-wrap: balance;
}
.d4-intent__title em { font-style: italic; }

.d4-intent__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 54px;
  margin-top: 36px;
  text-align: left;
}

.d4-field {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.d4-field__label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.4;
  color: var(--d4-ink);
  margin: 0;
  max-width: 44ch;
  text-wrap: pretty;
}
.d4-field__index {
  display: inline-block;
  margin-right: 14px;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--d4-accent);
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.d4-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--d4-ink);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.5;
  padding: 10px 0 14px;
  outline: none;
  transition: border-color 260ms ease;
  caret-color: var(--d4-accent);
}
.d4-input::placeholder {
  color: var(--d4-ink-whisper);
  font-style: italic;
  font-weight: 300;
}

/* variants */
.d4-input.style-underline {
  border-bottom: 1px solid var(--d4-hair);
}
.d4-input.style-underline:focus {
  border-bottom-color: var(--d4-accent);
}
.d4-input.style-minimal {
  border-bottom: 1px dashed var(--d4-hair-soft);
}
.d4-input.style-minimal:focus {
  border-bottom-color: var(--d4-accent);
  border-bottom-style: solid;
}
.d4-input.style-frame {
  border: 1px solid var(--d4-hair);
  padding: 18px 22px;
  background: rgba(242,232,214,0.015);
}
.d4-input.style-frame:focus {
  border-color: var(--d4-accent);
  background: rgba(196,149,42,0.04);
}

.d4-intent__contact {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
  padding-top: 32px;
  border-top: 1px solid var(--d4-hair-soft);
}
.d4-intent__contact-hint {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--d4-ink-mute);
}
.d4-input--small {
  font-size: clamp(17px, 1.3vw, 20px);
}

.d4-intent__submit {
  margin-top: 50px;
  align-self: center;
  background: transparent;
  border: 1px solid var(--d4-accent);
  color: var(--d4-ink);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  padding: 18px 34px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  transition: all 260ms ease;
  position: relative;
  overflow: hidden;
}
.d4-intent__submit::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 100%, rgba(217,168,63,0.38), transparent 72%);
  opacity: 0;
  transition: opacity 480ms ease;
}
.d4-intent__submit:hover::before { opacity: 1; }
.d4-intent__submit:hover {
  color: var(--d4-accent-hot);
  border-color: var(--d4-accent-hot);
}
.d4-intent__submit.style-equal {
  border-color: var(--d4-hair);
}
.d4-intent__submit.style-equal:hover {
  border-color: var(--d4-accent);
}
.d4-intent__submit.style-solid {
  background: var(--d4-accent);
  color: #0E0805;
  border-color: var(--d4-accent);
}
.d4-intent__submit.style-solid:hover {
  background: var(--d4-accent-hot);
  border-color: var(--d4-accent-hot);
  color: #0E0805;
}
.d4-intent__submit.style-solid::before { display: none; }
.d4-btn__arrow {
  display: inline-block;
  transition: transform 280ms ease;
}
.d4-intent__submit:hover .d4-btn__arrow { transform: translateX(5px); }

/* =========================================================================
   SCREEN 04 — Благодарность · «Намерения записаны»
   ========================================================================= */
.d4-thanks {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 44px;
}
.d4-thanks__mark {
  width: 52px; height: 52px;
  position: relative;
  display: grid; place-items: center;
  color: var(--d4-accent);
}
.d4-thanks__mark::before,
.d4-thanks__mark::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.d4-thanks__mark::before {
  inset: 0;
  border: 1px solid var(--d4-accent);
  opacity: .5;
  animation: d4-mark-ring 3.6s ease-in-out infinite;
}
.d4-thanks__mark::after {
  inset: 18px;
  background: var(--d4-accent);
  box-shadow: 0 0 28px rgba(217,168,63,0.6);
}
@keyframes d4-mark-ring {
  0%, 100% { transform: scale(1); opacity: .5; }
  50%      { transform: scale(1.18); opacity: .15; }
}
.d4-thanks__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--d4-accent);
}
.d4-thanks__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--d4-ink);
  margin: 0;
}
.d4-thanks__lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 44ch;
}
.d4-thanks__lines p {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.55;
  color: var(--d4-ink-dim);
  margin: 0;
  text-wrap: pretty;
}
.d4-thanks__lines p em { font-style: italic; color: var(--d4-ink); }
.d4-thanks__rule {
  width: 40px; height: 1px;
  background: var(--d4-ink-whisper);
  margin: 12px auto;
}
.d4-thanks__final {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--d4-ink-mid);
  max-width: 40ch;
}

/* =========================================================================
   SCREEN 05 — «Огонь к огню» + отклик
   ========================================================================= */
.d4--fire .d4-focus { padding: 120px 80px; }

.d4-fire {
  width: 100%;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
}
.d4-fire__eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: var(--d4-accent);
}
.d4-fire__eyebrow::before,
.d4-fire__eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: rgba(196,149,42,0.45);
  vertical-align: middle;
  margin: 0 18px;
}
.d4-fire__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(44px, 5vw, 82px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--d4-ink);
  margin: 0 0 12px;
  max-width: 22ch;
  text-wrap: balance;
}
.d4-fire__title em { font-style: italic; }
.d4-fire__lines {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  line-height: 1.55;
  color: var(--d4-ink-dim);
  max-width: 38ch;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.d4-fire__lines em { font-style: italic; color: var(--d4-ink); }

.d4-fire__form {
  width: 100%;
  max-width: 820px;
  margin-top: 40px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--d4-hair);
  transition: border-color 260ms ease;
}
.d4-fire__form:focus-within { border-bottom-color: var(--d4-accent); }
.d4-fire__input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--d4-ink);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.5;
  padding: 10px 0;
  outline: none;
  caret-color: var(--d4-accent);
}
.d4-fire__input::placeholder {
  color: var(--d4-ink-whisper);
  font-style: italic;
  font-weight: 300;
}
.d4-fire__send {
  background: transparent;
  border: 1px solid var(--d4-hair);
  color: var(--d4-ink-dim);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  padding: 14px 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: all 260ms ease;
  white-space: nowrap;
}
.d4-fire__send:hover {
  color: var(--d4-accent-hot);
  border-color: var(--d4-accent);
}
.d4-fire__send__arrow { transition: transform 260ms ease; }
.d4-fire__send:hover .d4-fire__send__arrow { transform: translateX(4px); }

/* «Получил. Отвечу тебе лично.» — вынесено справа от поля как бумажная записка */
.d4-fire__receipt {
  margin-top: 64px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--d4-ink-mid);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-top: 40px;
  border-top: 1px solid var(--d4-hair-soft);
  width: 100%;
  max-width: 620px;
  justify-content: center;
  text-align: center;
}
.d4-fire__receipt-mark {
  color: var(--d4-accent);
  font-style: normal;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

/* =========================================================================
   MOBILE (390×844)
   ========================================================================= */
.frame__stage--mobile .d4-corner--tl,
.frame__stage--mobile .d4-corner--tr,
.frame__stage--mobile .d4-corner--br { font-size: 9px; letter-spacing: 0.28em; }
.frame__stage--mobile .d4-corner--tl { top: 24px; left: 22px; }
.frame__stage--mobile .d4-corner--tr { top: 24px; right: 22px; }
.frame__stage--mobile .d4-corner--br { bottom: 24px; right: 22px; }
.frame__stage--mobile .d4-home { bottom: 24px; left: 22px; font-size: 9px; letter-spacing: 0.28em; }

.frame__stage--mobile .d4-focus { padding: 80px 28px 80px; }

/* intro — mobile */
.frame__stage--mobile .d4-intro__title { font-size: 44px; line-height: 1.08; max-width: 16ch; }
.frame__stage--mobile .d4-intro__subtitle { font-size: 19px; margin-top: 28px; max-width: 26ch; }
.frame__stage--mobile .d4-intro__cta { margin-top: 52px; padding: 14px 22px; font-size: 10.5px; letter-spacing: 0.26em; }
.frame__stage--mobile .d4-intro__workshop svg { width: 110%; }

/* showcase — mobile: stack */
.frame__stage--mobile.d4--showcase .d4-focus,
.frame__stage--mobile .d4-focus { padding-left: 24px; padding-right: 24px; }
.frame__stage--mobile .d4-showcase__grid {
  grid-template-columns: 1fr !important;
  gap: 22px;
}
.frame__stage--mobile .d4-showcase__title { font-size: 32px; }
.frame__stage--mobile .d4-showcase__sub { font-size: 16px; }
.frame__stage--mobile .d4-card {
  min-height: 0;
  padding: 26px 22px 24px;
  gap: 16px;
}
.frame__stage--mobile .d4-card__title { font-size: 28px; max-width: none; }
.frame__stage--mobile .d4-card__essence { font-size: 16px; }
.frame__stage--mobile .d4-card__foot { gap: 14px; }
.frame__stage--mobile .d4-card__action { font-size: 10px; letter-spacing: 0.26em; }
.frame__stage--mobile .d4-card__kadr { font-size: 9px; letter-spacing: 0.3em; padding-bottom: 6px; }
.frame__stage--mobile .d4-showcase { gap: 32px; }
/* когда карточек много — сцена растягивается по высоте */
.frame__stage--mobile.d4--showcase .d4 { height: auto; min-height: 100%; }
.frame__stage--mobile.d4--showcase .d4-focus { position: relative; height: auto; min-height: 100%; padding-top: 80px; padding-bottom: 100px; }

/* intentions — mobile */
.frame__stage--mobile .d4-intent__title { font-size: 30px; }
.frame__stage--mobile .d4-intent__form { gap: 34px; margin-top: 24px; }
.frame__stage--mobile .d4-field__label { font-size: 17px; }
.frame__stage--mobile .d4-input { font-size: 17px; }
.frame__stage--mobile .d4-input.style-frame { padding: 14px 16px; }
.frame__stage--mobile .d4-intent__submit { margin-top: 32px; padding: 14px 24px; font-size: 10.5px; letter-spacing: 0.28em; }
.frame__stage--mobile.d4--intentions .d4 { height: auto; min-height: 100%; }
.frame__stage--mobile.d4--intentions .d4-focus { position: relative; height: auto; min-height: 100%; padding-top: 80px; padding-bottom: 100px; }

/* thanks — mobile */
.frame__stage--mobile .d4-thanks { gap: 28px; }
.frame__stage--mobile .d4-thanks__title { font-size: 30px; }
.frame__stage--mobile .d4-thanks__lines p { font-size: 17px; }
.frame__stage--mobile .d4-thanks__final { font-size: 16px; }

/* fire — mobile */
.frame__stage--mobile .d4-fire__title { font-size: 32px; }
.frame__stage--mobile .d4-fire__lines { font-size: 17px; }
.frame__stage--mobile .d4-fire__form {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 14px 0;
}
.frame__stage--mobile .d4-fire__input { font-size: 17px; }
.frame__stage--mobile .d4-fire__send { width: 100%; justify-content: center; padding: 14px 18px; font-size: 10.5px; letter-spacing: 0.28em; }
.frame__stage--mobile .d4-fire__receipt { font-size: 16px; margin-top: 40px; padding-top: 28px; }

/* общие мобильные фон-правки — искры компактнее */
.frame__stage--mobile .d4-bg__ember { background-size: cover; }

/* =========================================================================
   FIX · mobile showcase scrollable container
   Третья карточка «Сайт-манифест» больше не обрезается:
   мобильная рамка прокручивается внутри, сцена растягивается по высоте.
   ========================================================================= */
.frame-mobile:has(.d4--showcase) {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(196,149,42,0.35) transparent;
}
.frame-mobile:has(.d4--showcase)::-webkit-scrollbar { width: 4px; }
.frame-mobile:has(.d4--showcase)::-webkit-scrollbar-track { background: transparent; }
.frame-mobile:has(.d4--showcase)::-webkit-scrollbar-thumb {
  background: rgba(196,149,42,0.35);
  border-radius: 2px;
}

/* сцена внутри showcase-mobile: position relative, высота по контенту,
   чтобы scroll-родитель видел реальную высоту scaled-контента */
.frame-mobile:has(.d4--showcase) .frame__stage--mobile {
  position: relative;
  height: auto;
  min-height: 100%;
}
.frame-mobile:has(.d4--showcase) .d4--showcase {
  height: auto;
  min-height: 844px;
  overflow: visible;
}
.frame-mobile:has(.d4--showcase) .d4--showcase .d4-focus {
  position: relative;
  inset: auto;
  height: auto;
  min-height: 844px;
  padding-bottom: 120px; /* гарантированный воздух под третьей карточкой */
}
/* фон не должен обрезаться при скролле */
.frame-mobile:has(.d4--showcase) .d4-bg,
.frame-mobile:has(.d4--showcase) .d4-bg__ember,
.frame-mobile:has(.d4--showcase) .d4-bg__breath,
.frame-mobile:has(.d4--showcase) .d4-bg__sparks,
.frame-mobile:has(.d4--showcase) .d4-bg__noise {
  position: absolute;
  inset: 0;
  height: 100%;
}

/* Fullscreen вариант — то же поведение */
.d2-fullscreen__wrap--mobile:has(.d4--showcase) {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  aspect-ratio: 390 / 844; /* сохраняем визуальные пропорции карточки */
}
.d2-fullscreen__wrap--mobile:has(.d4--showcase) .frame__stage--mobile {
  position: relative;
  height: auto;
  min-height: 100%;
}
.d2-fullscreen__wrap--mobile:has(.d4--showcase) .d4--showcase {
  height: auto;
  min-height: 844px;
  overflow: visible;
}
.d2-fullscreen__wrap--mobile:has(.d4--showcase) .d4--showcase .d4-focus {
  position: relative;
  inset: auto;
  height: auto;
  min-height: 844px;
  padding-bottom: 120px;
}

/* =========================================================================
   Canvas-level utility bits (унаследованы от .canvas, подкрашиваем строго)
   ========================================================================= */
.door4-canvas { background: #0A0604; color: var(--d4-ink); }
.door4-canvas .canvas__title em { font-style: italic; color: var(--d4-accent); }
.door4-canvas .variant-row { border-top: 1px solid rgba(242,232,214,0.08); }