/* Инструкция «Как купить домен» — оформление под сайт Kosmo_ceramics:
   фиолетовая стена, бумажные карточки, шрифт PT Serif. */

@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ptserif-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ptserif-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2039-203A, U+2044, U+20BD, U+2212; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/ptserif-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/ptserif-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2039-203A, U+2044, U+20BD, U+2212; }

:root {
  --wall-light: #DCCAF0;
  --wall: #BBA0DA;
  --wall-deep: #8F72B8;
  --paper: #F6F1E4;
  --paper-edge: #E7DECA;
  --ink: #1B1436;
  --ink-soft: #4A3C6B;
  --pink: #E0407F;
  --red: #D62828;
  --green: #2F7A48;
  --gut: 18px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink);
  font: 400 18px/1.55 "PT Serif", Georgia, serif;
  background:
    radial-gradient(120% 90% at 18% 0%, var(--wall-light) 0%, var(--wall) 46%, var(--wall-deep) 100%) fixed;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-underline-offset: .18em; }

/* полоска прочитанного сверху */
.progress { position: fixed; inset: 0 0 auto 0; height: 4px; background: rgba(27, 20, 54, .16); z-index: 30; }
.progress i { display: block; height: 100%; width: 0; background: var(--pink); transition: width .1s linear; }

.top {
  max-width: 760px; margin: 0 auto; padding: 46px var(--gut) 10px; text-align: center;
}
.top__rubric { margin: 0 0 10px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.top h1 { margin: 0; font-size: clamp(32px, 8vw, 54px); line-height: 1.06; font-weight: 700; }
.top__lead { margin: 18px auto 0; max-width: 620px; color: var(--ink-soft); }
.top__facts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.fact {
  flex: 1 1 170px; padding: 14px 12px; background: var(--paper); border-radius: 3px;
  box-shadow: 0 10px 18px -14px rgba(27, 20, 54, .8), inset 0 0 0 1px var(--paper-edge);
  transform: rotate(-.6deg);
}
.fact:nth-child(2) { transform: rotate(.5deg); }
.fact:nth-child(3) { transform: rotate(-.2deg); }
.fact b { display: block; font-size: 22px; }
.fact span { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-soft); }

main { max-width: 860px; margin: 0 auto; padding: 0 var(--gut) 40px; }

.card {
  margin: 26px 0; padding: 22px 20px; background: var(--paper); border-radius: 4px;
  box-shadow: 0 16px 28px -22px rgba(27, 20, 54, .9), inset 0 0 0 1px var(--paper-edge);
}
.card h2 { margin: 0 0 12px; font-size: 25px; line-height: 1.15; }
.card p { margin: 10px 0; }
.card--what .url { display: inline-block; padding: 1px 8px; background: rgba(224, 64, 127, .14); border-radius: 3px; font-weight: 700; }
.note { font-size: 16px; color: var(--ink-soft); }
.warn { padding: 10px 12px; background: rgba(214, 40, 40, .1); border-left: 4px solid var(--red); border-radius: 0 3px 3px 0; font-size: 16.5px; }
.need { margin: 0; padding-left: 22px; }
.need li { margin: 9px 0; }

.steps-intro { max-width: 860px; margin: 30px auto 6px; padding: 0 var(--gut); text-align: center; color: #2B2050; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step {
  margin: 20px 0; padding: 22px 20px; background: var(--paper); border-radius: 4px;
  box-shadow: 0 16px 28px -22px rgba(27, 20, 54, .9), inset 0 0 0 1px var(--paper-edge);
}
.step h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 24px; line-height: 1.15; }
.num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff;
  font-size: 22px; font-weight: 700;
}
.step p { margin: 10px 0; }
.step__img { margin: 16px 0 0; }
.step__img img {
  border-radius: 4px; cursor: zoom-in;
  box-shadow: 0 18px 30px -24px rgba(27, 20, 54, 1), 0 0 0 1px rgba(27, 20, 54, .12);
  transition: transform .25s var(--ease);
}
.step__img img:hover { transform: translateY(-3px); }
.step--danger { box-shadow: 0 16px 28px -22px rgba(27, 20, 54, .9), inset 0 0 0 2px var(--red); }
.step--check { box-shadow: 0 16px 28px -22px rgba(27, 20, 54, .9), inset 0 0 0 2px var(--green); }
.step--final { background: linear-gradient(to bottom, #FBF7EC, #F1E9D6); }

/* отметка «сделала» у шага */
.done { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 8px; padding: 4px 14px 4px 6px; cursor: pointer; border-radius: 22px; background: rgba(27, 20, 54, .05); }
.done input { width: 22px; height: 22px; accent-color: var(--green); }
.done span { font-size: 16px; color: var(--ink-soft); }
.step.is-done { opacity: .72; }
.step.is-done .num { background: var(--green); }
.step.is-done .done { background: rgba(47, 122, 72, .14); }
.step.is-done .done span { color: var(--green); }
#done-count { display: block; margin-top: 8px; font-size: 15px; color: var(--ink-soft); }

.type { padding: 1px 6px; background: rgba(27, 20, 54, .08); border-radius: 3px; }
.copy {
  margin-left: 4px; padding: 6px 12px; min-height: 40px;
  font: 400 16px "PT Serif", Georgia, serif; color: #fff; background: var(--ink);
  border: 0; border-radius: 20px; cursor: pointer; transition: transform .18s var(--ease), background .18s;
}
.copy:hover { transform: translateY(-1px); }
.copy.is-done { background: var(--green); }

.cta { margin-top: 18px; }
.btn {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px;
  background: var(--pink); color: #fff; text-decoration: none; border-radius: 26px;
  font-size: 19px; box-shadow: 0 12px 20px -14px rgba(224, 64, 127, 1);
  transition: transform .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.card--faq details {
  margin: 8px 0; padding: 12px 14px; background: rgba(255, 255, 255, .55);
  border-radius: 3px; border: 1px solid var(--paper-edge);
}
.card--faq summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; }
.card--faq details p { margin: 8px 0 2px; color: var(--ink-soft); }

.money { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.money th, .money td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--paper-edge); vertical-align: top; }
.money th { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.money__total { margin-top: 14px; padding: 10px 12px; background: rgba(47, 122, 72, .12); border-left: 4px solid var(--green); border-radius: 0 3px 3px 0; }

.foot { max-width: 860px; margin: 0 auto; padding: 10px var(--gut) 48px; text-align: center; color: #2B2050; font-size: 16px; }
.foot p { margin: 6px 0; }

/* увеличение картинки */
.lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 12, 40, .88); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 4px; }
.lightbox__close {
  position: absolute; top: 12px; right: 12px; width: 48px; height: 48px;
  font-size: 30px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .16);
  border: 0; border-radius: 50%; cursor: pointer;
}

@media (max-width: 599px) {
  body { font-size: 17px; }
  .top { padding-top: 34px; }
  .card, .step { padding: 18px 15px; }
  .step h3 { font-size: 21px; gap: 10px; }
  .num { width: 38px; height: 38px; font-size: 19px; }
  .money th, .money td { padding: 8px 5px; font-size: 15px; }
  .step__img img { cursor: default; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}