/* ============================================================
   БАЗА
   ============================================================ */
:root{
  --bg:#f6efe4;
  --bg-soft:#fbf7f0;
  --paper:#fffdf8;
  --ink:#241f19;
  --ink-soft:#4b4239;
  --muted:#7a6d5f;
  --line:#e3d7c4;
  --accent:#b3541e;
  --accent-2:#e3a04a;
  --accent-ink:#fff6ea;
  --dark:#241d16;
  --radius:18px;
  --shadow-sm:0 6px 20px -10px #2a1f1433;
  --shadow-md:0 22px 50px -24px #2a1f1444;
  --shadow-lg:0 40px 90px -40px #2a1f1455;
  --maxw:1180px;
  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0}
p{margin:0 0 1em}
::selection{background:var(--accent-2);color:#241d16}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:clamp(56px,8vw,110px) 0}
.kicker{
  font-family:var(--font-body);
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;display:inline-block;
}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--ink-soft);max-width:60ch}

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;font-weight:600;font-size:15px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),#8f3f13);
  color:var(--accent-ink);
  box-shadow:0 14px 30px -14px #b3541e99;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px #b3541ebb}
.btn-ghost{
  background:transparent;color:var(--ink);
  border:1.5px solid var(--ink);
}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-soft{
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.btn-soft:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-sm{padding:11px 18px;font-size:14px}
.btn:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none;}

/* ============================================================
   НАВИГАЦИЯ
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
.nav.scrolled{border-color:var(--line);box-shadow:0 8px 30px -20px #2a1f1455}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.01em}
.brand-dot{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid;place-items:center;color:#fff;font-size:18px;
  box-shadow:0 8px 18px -8px #b3541eaa;
}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{
  padding:9px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-soft);
  transition:background .15s,color .15s;
}
.nav-links a:hover{background:var(--paper);color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:10px}
.progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .1s linear;
}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--paper);align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding-top: clamp(30px, 5vw, 60px);
  padding-bottom: clamp(60px, 8vw, 100px);
  display: flex;
  align-items: center;
}
.hero::before{
  content:"";position:absolute;inset:auto -20% -40% -20%;height:60%;
  background:radial-gradient(60% 60% at 50% 0%, #e3a04a33, transparent 70%);
  pointer-events:none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  position: relative;
  width: 100%;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink-soft);
  box-shadow:var(--shadow-sm);margin-bottom:22px;
}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:#3f8f5b;box-shadow:0 0 0 4px #3f8f5b22}
.hero h1{font-size:clamp(30px,4.6vw,58px);margin-bottom:22px;max-width:18ch}
.hero h1 em{font-style:italic;color:var(--accent);position:relative}
.hero-sub{font-size:clamp(17px,1.7vw,20px);color:var(--ink-soft);max-width:44ch;margin-bottom:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.hero-proof{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
.proof{display:flex;flex-direction:column;gap:2px}
.proof b{font-family:var(--font-display);font-size:26px;line-height:1}
.proof span{font-size:13px;color:var(--muted)}

/* ============================================================
   ОБЛОЖКА (НОВАЯ)
   ============================================================ */
.book-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  position: relative;
}

.new-book-wrap {
  position: relative;
  width: min(100%, 650px);
  /* Вот эта магия делает белый фон прозрачным! */
  mix-blend-mode: multiply; 
  filter: contrast(1.05) drop-shadow(0 20px 30px rgba(42, 31, 20, 0.3));
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.new-book-wrap:hover {
  transform: translateY(-10px) scale(1.02);
}

.new-book-img {
  width: 100%;
  height: auto;
  display: block;
}

/* А это возвращает плашку на место */
.cover-tag {
  position: absolute;
  z-index: 10;
  right: 12%; /* Приблизили к книге */
  bottom: 20%; 
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 8px;       /* Чуть более квадратная */
  padding: 6px 10px;        /* Маленькие отступы */
  font-size: 9px;           /* Мелкий шрифт */
  line-height: 1.1;
  box-shadow: 0 4px 10px rgba(42, 31, 20, 0.3);
  transform: rotate(4deg);
  max-width: 90px;          /* Узкая ширина */
  text-align: center;
  pointer-events: none;
}

.cover-tag b {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;          /* Маленькая цифра */
  line-height: 1;
  margin-bottom: 2px;
}

.cover-tag span { 
  font-size: 7px;           /* Совсем мелкий текст */
  opacity: 0.85; 
  letter-spacing: 0.05em;
}

/* ============================================================
   ЛЕНТА ДОВЕРИЯ
   ============================================================ */
.strip {
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.strip-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 30px;padding:20px 0;font-size:14px;color:var(--ink-soft)}
.strip-inner span{display:flex;align-items:center;gap:8px}
.strip-inner svg{width:18px;height:18px;color:var(--accent)}

/* ============================================================
   СЕКЦИИ
   ============================================================ */
.section-head{max-width:720px;margin-bottom:clamp(34px,5vw,56px)}
.section-head h2{font-size:clamp(30px,4.4vw,50px);margin-bottom:18px}
.section-head p{color:var(--muted)}

/* ============================================================
   КАК ЭТО РАБОТАЕТ
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  counter-reset: step;
}
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
}
.step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
  counter-increment: step;
}
.step::before {
  content: counter(step);
  position: absolute;
  top: -14px;
  left: 22px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--accent),#8f3f13);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 8px 18px -8px #b3541e99;
}
.step h3 { font-size: 17px; margin: 12px 0 8px; }
.step p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }

/* ============================================================
   ЧУВСТВА КЛИЕНТА
   ============================================================ */
.feelings {
  background: linear-gradient(160deg, #2b2118, #1c150f);
  color: #f5ede1;
  border-radius: 22px;
  padding: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 780px) {
  .feelings { grid-template-columns: 1fr; }
}
.feelings h2 {
  color: #fff;
  font-size: clamp(24px, 3.2vw, 38px);
  margin-bottom: 18px;
}
.feelings p {
  color: #d8ccbb;
  font-size: 16px;
  margin-bottom: 14px;
}
.feelings p:last-child { margin-bottom: 0; }
.feelings-quote {
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--accent-2);
  border-radius: 10px;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: #f0e6d6;
}

/* ============================================================
   ПОЧЕМУ РАБОТАЕТ
   ============================================================ */
.whys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 900px) {
  .whys { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .whys { grid-template-columns: 1fr; }
}
.why-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.why-card .why-num {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 12px;
  text-align: center;
}
.why-card h3 { font-size: 18px; margin-bottom: 8px; }
.why-card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

/* ============================================================
   ПОЧЕМУ КНИГА
   ============================================================ */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.card-icon{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,#f0dcc0,#e9c896);color:var(--accent);margin-bottom:20px;
}
.card-icon svg{width:26px;height:26px}
.card h3{font-size:20px;margin-bottom:10px}
.card p{color:var(--ink-soft);margin:0;font-size:15px}

.why-list {
  margin-top: 48px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow-sm);
}
.why-list-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  margin-bottom: 24px;
}
.why-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
}
@media (max-width: 780px) { .why-ul { grid-template-columns: 1fr; gap: 20px; } }
.why-ul li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.why-ul li b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.why-ic {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 10px;
  background: linear-gradient(135deg,#f0dcc0,#e9c896);
  color: var(--accent);
  display: grid; place-items: center;
}
.why-ic svg { width: 20px; height: 20px; }

/* ============================================================
   РИДЕР (ДЕМО)
   ============================================================ */
.reader{ display:grid; grid-template-columns:290px minmax(0,1fr); gap:26px; align-items:start; }
@media (max-width: 980px) { .reader { grid-template-columns: 1fr; } }
.toc{
  position:sticky;top:92px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);
}
@media (max-width: 980px) { .toc { position: static; } }
.toc h3{font-size:12px;margin:0 0 12px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.toc-list{display:flex;flex-direction:column;gap:2px;max-height:62vh;overflow:auto}
.toc-list button{
  text-align:left;padding:10px 12px;border-radius:10px;font-size:14px;line-height:1.35;
  color:var(--ink-soft);transition:background .15s,color .15s;
}
.toc-list button:hover{background:#f2e8d8;color:var(--ink)}
.toc-list button.active{background:linear-gradient(135deg,var(--accent),#8f3f13);color:var(--accent-ink);font-weight:600;box-shadow:0 10px 20px -12px #b3541e99}
.story{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,4vw,52px);box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;
  height:700px;overflow:hidden;
}
@media (max-width: 980px) { .story { height: 550px; } }
.story-text{transition:opacity .3s ease;opacity:1;flex:1;overflow-y:auto;padding-right:10px}
.story-text::-webkit-scrollbar{width:6px}
.story-text::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.story-text.flipping{opacity:0}
.story-meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.story-title{font-size:clamp(20px,2.5vw,24px);margin-bottom:16px}
.story-text{white-space:pre-line;font-size:clamp(16px,1.5vw,18px);line-height:1.85;color:#332b22}
.story-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:20px;padding-top:20px}
.reader-cta{
  margin-top:26px;background:var(--dark);color:#f5ede1;border-radius:var(--radius);
  padding:clamp(22px,3vw,32px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.reader-cta h3{color:#fff;font-size:clamp(22px,2.6vw,30px);margin-bottom:6px}
.reader-cta p{color:#c9bcaa;margin:0;font-size:14.5px}

/* ============================================================
   ОТЗЫВЫ
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
.quote{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:16px;
}
.quote-mark{font-family:var(--font-display);font-size:56px;line-height:.6;color:var(--accent-2)}
.quote p{font-size:16px;line-height:1.6;color:#332b22;margin:0;flex:1;font-style:italic}
.quote p .result { display: block; margin-top: 10px; font-style: normal; color: var(--accent); font-weight: 600; }
.quote-who{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted)}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#e9c896,#d8a86a);display:grid;place-items:center;font-weight:700;color:#5b3a13}

/* ============================================================
   АВТОР
   ============================================================ */
.author{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,60px);align-items:center}
@media (max-width: 780px) { .author { grid-template-columns: 1fr; } }
.author-photo{
  aspect-ratio:4/5;border-radius:22px;background:radial-gradient(120% 80% at 30% 20%,#e9c896,#c98a4e 70%,#a3622c);
  box-shadow:var(--shadow-md);position:relative;overflow:hidden;
}
.author-photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center top;
  display:block;
  background:var(--bg-soft);
}
.author-photo .author-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#5b3a13aa}
.author-photo .author-fallback svg{width:60%;height:60%}
.author-photo.is-error img{display:none}
.author-photo.is-error .author-fallback{display:flex}
.author-photo:not(.is-error) .author-fallback{display:none}
.author h2{font-size:clamp(28px,4vw,44px);margin-bottom:18px}
.author p{color:var(--ink-soft)}
.author p em { color: var(--ink); font-style: normal; }
.author-sign{font-family:var(--font-display);font-style:italic;font-size:20px;color:var(--accent);margin-top:18px}

/* ============================================================
   ПАКЕТЫ
   ============================================================ */
.scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 900px) { .scenarios { grid-template-columns: 1fr; } }
.scenario {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.scenario b { display: block; color: var(--ink); margin-bottom: 4px; font-size: 15px; }
.scenario .to { color: var(--accent); font-weight: 600; }

.packages-scroll-wrap{position:relative}
.packages-scroll{
  overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow-sm);
  border:1px solid var(--line);background:var(--paper);
}
.packages-scroll-wrap::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:40px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--paper));
  border-radius:0 var(--radius) var(--radius) 0;
}
.packages table{ width:100%;border-collapse:collapse;min-width:820px;font-size:14px; }
.packages th, .packages td{ padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top; }
.packages thead th{
  background:linear-gradient(180deg,#faf3e6,#f2e8d8);
  font-family:var(--font-display);font-size:15px;font-weight:700;
  position:sticky;top:0;z-index:2;
}
.packages thead th small{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:2px;
  font-family: var(--font-body);
}
.packages tbody th{ font-weight:600;font-size:13.5px;color:var(--ink-soft);width:34%;background:#fbf7f0;position:sticky;left:0;z-index:1; }
.packages .check{color:#3f8f5b;font-weight:700;text-align:center}
.packages .no{color:#c9bfb0;text-align:center;font-weight:600}
.packages .price-row td, .packages .price-row th{ background:#f2e8d8;font-weight:700;padding-top:18px;padding-bottom:18px; }
.packages .price-row th{color:var(--ink);font-family:var(--font-display);font-size:16px}
.packages .price{ font-family:var(--font-display);font-size:20px;color:var(--accent);text-align:center;white-space:nowrap; }
.packages .price small{ display:block;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:2px; font-family: var(--font-body); }
.packages .cta-cell{text-align:center}
.packages .cta-cell .btn{padding:9px 16px;font-size:13px}
.packages .pkg-name{text-align:center}
.packages .pkg-name b{font-family:var(--font-display);font-size:18px;color:var(--ink)}
.packages .pkg-name span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.packages-foot{
  margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  font-size:13.5px;color:var(--ink-soft);
}
@media (max-width: 780px) { .packages-foot { grid-template-columns: 1fr; } }
.packages-foot div{ background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:14px 16px; }
.packages-foot b{display:block;color:var(--ink);margin-bottom:4px;font-family:var(--font-display);font-size:15px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 4px;text-align:left;font-family:var(--font-display);font-size:19px;font-weight:700;
}
.faq-q svg{width:22px;height:22px;flex:0 0 auto;transition:transform .25s;color:var(--accent)}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--ink-soft)}
.faq-a-inner{padding:0 4px 22px;max-width:62ch}
.faq-item.open .faq-a{max-height:400px}

/* ============================================================
   ФОРМА
   ============================================================ */
.form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width: 900px) { .form-wrap { grid-template-columns: 1fr; } }
.form-intro h2{font-size:clamp(30px,4.2vw,48px);margin-bottom:18px}
.form-intro .lead{margin-bottom:26px}
.form-intro .contact-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 12px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.form-intro .contact-line a { color: var(--accent); font-weight: 600; }

.perk{display:flex;gap:14px;margin-bottom:18px;align-items:flex-start}
.perk-ic{width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:#f0dcc0;color:var(--accent);display:grid;place-items:center}
.perk-ic svg{width:20px;height:20px}
.perk b{display:block;font-size:15.5px}
.perk span{font-size:14px;color:var(--muted)}

.formbox{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:clamp(24px,3.4vw,36px);box-shadow:var(--shadow-md)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);background:#fff;
  border-radius:12px;font-size:15px;transition:border-color .15s,box-shadow .15s;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 4px #b3541e22;
}
.field textarea{min-height:96px;resize:vertical}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width: 600px) { .twocol { grid-template-columns: 1fr; } }
.formbox .btn{width:100%;margin-top:6px}
.form-note{font-size:12.5px;color:var(--muted);margin:14px 0 0;text-align:center}
.result{
  display:none;white-space:pre-wrap;background:#f2e8d8;border:1px solid var(--line);
  border-radius:14px;padding:16px;margin-top:16px;font-size:13.5px;line-height:1.5;
}
.form-success{color:#2f6b45;font-weight:600}


.form-intro .contact-lines{
  display: inline-grid;
  gap: 8px;
  margin-top: 6px;
}
.form-intro .contact-lines .contact-line{
  margin-top: 0;
  justify-content: flex-start;
}

/* ============================================================
   ФУТЕР
   ============================================================ */
.footer{background:var(--dark);color:#c9bcaa;padding:clamp(44px,6vw,70px) 0 34px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding-bottom:34px;border-bottom:1px solid #ffffff1a}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4{color:#fff;font-size:14px;margin-bottom:14px;font-family:var(--font-body);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.footer a{display:block;font-size:14px;padding:5px 0;color:#c9bcaa;transition:color .15s}
.footer a:hover{color:#fff}
.footer-brand{font-family:var(--font-display);font-size:22px;color:#fff;margin-bottom:12px}
.footer p{font-size:14px;line-height:1.65;max-width:38ch;color:#c9bcaa}
.footer .requisites {
  font-size: 12.5px;
  line-height: 1.7;
  color: #9b8f80;
  margin-top: 14px;
}
.footer-bottom{padding-top:24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#8a7d6d}
.footer-bottom a { color: #8a7d6d; text-decoration: underline; }

/* ============================================================
   МОБИЛЬНЫЙ CTA
   ============================================================ */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--paper);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px -10px #2a1f1433;
  z-index: 50;
  border-top: 1px solid var(--line);
}
.mobile-cta .btn { width: 100%; }

/* ============================================================
   АНИМАЦИИ
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .book-stage{padding: 10px 0 20px}
  .book{width:min(75%,288px)}
  .cover-tag{right:-5px;bottom:20px;padding:8px 12px;font-size:11px}
  .cover-tag b{font-size:16px}
  .book-spine{left:-20px;width:22px}
  .spine-title{font-size:9px}
  .spine-author{font-size:7px}
  .nav-links{display:none}
  .burger{display:flex}
  .mobile-cta { display: block; }
  body { padding-bottom: 84px; }
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  
  /* ============================================================
   МОДАЛЬНОЕ ОКНО ДЛЯ ИСТОРИЙ
   ============================================================ */
.story-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.story-modal-overlay.active {
  opacity: 1;
}

.story-modal {
  background: var(--paper);
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}

.story-modal-overlay.active .story-modal {
  transform: translateY(0);
}

.story-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 10;
  border: none;
}

.story-modal-close:hover {
  background: rgba(0,0,0,0.1);
}

.story-modal-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 32px 32px 8px;
}

.story-modal-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.2;
  margin: 0 32px 20px;
  padding-right: 40px;
}

.story-modal-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  padding: 0 32px 32px;
  overflow-y: auto;
}

.story-modal-body::-webkit-scrollbar {
  width: 6px;
}
.story-modal-body::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}
}
/* ============================================================
   АДАПТИВ ДЛЯ ТАБЛИЦЫ ПАКЕТОВ НА МОБИЛЬНЫХ
   ============================================================ */
@media (max-width: 780px) {
  /* Убираем фиксацию первого столбца на мобильных */
  .packages tbody th {
    position: static;
    background: #fbf7f0;
    width: 50%; /* Первый столбец — половина ширины */
  }

  /* Уменьшаем минимальную ширину таблицы, чтобы не было горизонтального скролла */
  .packages table {
    min-width: 100%;
    font-size: 12px;
  }

  /* Уменьшаем отступы в ячейках */
  .packages th,
  .packages td {
    padding: 8px 6px;
  }

  /* Заголовки пакетов — компактнее */
  .packages thead th {
    font-size: 12px;
    padding: 8px 4px;
  }
  .packages thead th small {
    font-size: 9px;
  }
  .packages .pkg-name b {
    font-size: 14px;
  }

  /* Цены — компактнее */
  .packages .price {
    font-size: 14px;
  }
  .packages .price small {
    font-size: 10px;
  }

  /* Убираем затемняющую полоску справа (она для скролла) */
  .packages-scroll-wrap::after {
    display: none;
  }
}
/* ============================================================
   COOKIE BANNER (152-ФЗ)
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--paper, #fffdf8);
  color: var(--ink, #241f19);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  z-index: 99999;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-top: 1px solid var(--line, #e3d7c4);
}

.cookie-banner.show {
  transform: translateY(0);
}

.cookie-banner-text {
  font-size: 14px;
  line-height: 1.5;
  max-width: 800px;
}

.cookie-banner-text a {
  color: var(--accent, var(--brand-main, #b3541e));
  text-decoration: underline;
}

.cookie-banner-btn {
  background: var(--accent, var(--brand-main, #b3541e));
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.cookie-banner-btn:hover {
  opacity: 0.9;
}

@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
  .cookie-banner-btn {
    width: 100%;
    text-align: center;
  }
}