/* ========================================================================
   BLAND v5.1 — Общие стили проекта ruslanbland.ru
   Палитра: Cream / Nude / Coffee / Cocoa
   Шрифты:  Prata · EB Garamond · Cormorant Garamond italic · Manrope
   Эстетика: Rolls-Royce / Bentley интерьер, премиум-светлый
   Mobile-first 375px → tablet 768px → desktop 1024px
   ======================================================================== */

/* ---------- Tokens ---------- */
:root{
  --cream:#F8F1E8;
  --nude:#E4CDB4;
  --coffee:#8B6A52;
  --cocoa:#3E2218;
  --cocoa-80:rgba(62,34,24,0.8);
  --cocoa-60:rgba(62,34,24,0.6);
  --cocoa-40:rgba(62,34,24,0.4);
  --cocoa-20:rgba(62,34,24,0.2);
  --cocoa-10:rgba(62,34,24,0.1);
  --nude-30:rgba(228,205,180,0.3);
  --success:#2F5D3A;
  --error:#7A2E2E;
  --warning:#9A6B1E;

  --font-h:'Prata',Georgia,serif;            /* H1, заголовки ≥30px */
  --font-b:'EB Garamond',Georgia,serif;      /* body */
  --font-i:'Cormorant Garamond',Georgia,serif; /* italic, цитаты */
  --font-m:'Manrope',-apple-system,'Helvetica Neue',sans-serif; /* eyebrow, captions, buttons */

  --maxw:1200px;
  --maxw-narrow:560px;
  --maxw-mid:780px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-b);
  background:var(--cream);
  color:var(--cocoa);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--coffee);outline-offset:3px}

/* ---------- Containers ---------- */
.wrap{max-width:var(--maxw-narrow);margin:0 auto;padding:0 20px}
.wrap-mid{max-width:var(--maxw-mid);margin:0 auto;padding:0 20px}
.wrap-wide{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- Typography utilities ---------- */
.eyebrow{
  font-family:var(--font-m);font-weight:300;
  font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--coffee);
}
.eyebrow-light{color:var(--nude)}

.h-display{
  font-family:var(--font-h);font-weight:400;
  font-size:clamp(34px,8vw,68px);
  line-height:1.05;letter-spacing:0.01em;
  color:var(--cocoa);
}
.h1{
  font-family:var(--font-h);font-weight:400;
  font-size:clamp(30px,6vw,48px);
  line-height:1.12;letter-spacing:0.01em;
  color:var(--cocoa);
}
.h2{
  font-family:var(--font-h);font-weight:400;
  font-size:clamp(26px,5vw,40px);
  line-height:1.15;letter-spacing:0.01em;
  color:var(--cocoa);
}
.h3{
  font-family:var(--font-h);font-weight:400;
  font-size:clamp(22px,4vw,28px);
  line-height:1.2;color:var(--cocoa);
}
.lead{
  font-family:var(--font-i);font-style:italic;font-weight:500;
  font-size:clamp(17px,3.5vw,22px);
  line-height:1.5;color:var(--cocoa);
}
.body p{margin-bottom:14px}
.muted{color:var(--cocoa-60)}

.italic-q{
  font-family:var(--font-i);font-style:italic;font-weight:500;
  font-size:19px;line-height:1.55;color:var(--cocoa);
}

.divider{
  width:40px;height:1px;background:var(--coffee);
  margin:18px 0;border:0;
}
.divider-center{margin-left:auto;margin-right:auto}
.divider-light{background:var(--nude)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:30;
  background:rgba(248,241,232,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--cocoa-10);
}
.site-header__inner{
  max-width:var(--maxw);margin:0 auto;padding:14px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.site-header__logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-h);font-size:18px;letter-spacing:0.04em;color:var(--cocoa);
}
.site-header__logo svg{width:22px;height:22px;flex:0 0 auto}
.site-header__nav{display:none;gap:32px;align-items:center}
.site-header__nav a{
  font-family:var(--font-m);font-size:13px;font-weight:400;
  color:var(--cocoa);transition:color .2s;
}
.site-header__nav a:hover{color:var(--coffee)}
.site-header__burger{
  width:24px;height:18px;display:flex;flex-direction:column;
  justify-content:space-between;
}
.site-header__burger span{width:100%;height:1px;background:var(--cocoa)}
@media(min-width:768px){
  .site-header__nav{display:flex}
  .site-header__burger{display:none}
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--cocoa);color:var(--cream);
  padding:64px 20px 28px;border-top:1px solid var(--nude-30);
}
.site-footer__grid{
  display:grid;grid-template-columns:1fr;gap:36px;
  max-width:var(--maxw);margin:0 auto;
}
.site-footer__col h3{
  font-family:var(--font-h);font-weight:400;font-size:24px;
  letter-spacing:0.03em;color:var(--cream);margin-bottom:6px;
}
.site-footer__col .tag{
  font-family:var(--font-m);font-weight:300;font-size:10px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--nude);
  margin-bottom:14px;
}
.site-footer__col .eyebrow{color:var(--nude);margin-bottom:14px}
.site-footer__col p,
.site-footer__col a{
  font-family:var(--font-b);font-size:15px;color:var(--nude);
  line-height:1.55;display:block;padding:4px 0;transition:color .2s;
}
.site-footer__col a:hover{color:var(--cream)}
.site-footer__bottom{
  max-width:var(--maxw);margin:36px auto 0;padding-top:24px;
  border-top:1px solid var(--nude-30);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  font-family:var(--font-m);font-weight:300;font-size:11px;
  letter-spacing:0.04em;color:var(--nude);
}
@media(min-width:768px){
  .site-footer__grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
}

/* ---------- CTA buttons ---------- */
.btn{
  display:block;width:100%;
  text-align:center;text-decoration:none;
  font-family:var(--font-m);font-size:13px;font-weight:400;
  letter-spacing:0.06em;text-transform:none;
  padding:16px 24px;min-height:48px;
  cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .1s;
}
.btn:active{transform:scale(0.99)}
.btn--primary{
  background:var(--cocoa);color:var(--cream);border:1px solid var(--cocoa);
}
.btn--primary:hover{background:var(--coffee);border-color:var(--coffee)}
.btn--ghost{
  background:transparent;color:var(--cocoa);border:1px solid var(--cocoa);
}
.btn--ghost:hover{background:var(--cocoa);color:var(--cream)}
.btn--outline-light{
  background:transparent;color:var(--cream);border:1px solid var(--cream);
}
.btn--outline-light:hover{background:var(--cream);color:var(--cocoa)}
.btn--text{
  display:inline-block;width:auto;min-height:auto;padding:6px 0;
  border-bottom:1px solid currentColor;
  font-family:var(--font-m);font-size:13px;letter-spacing:0.04em;
}
@media(min-width:768px){
  .btn{display:inline-block;width:auto;min-width:240px}
  .btn--block{display:block;width:100%}
}

/* ---------- Section base ---------- */
.section{padding:64px 0}
.section--dark{background:var(--cocoa);color:var(--cream)}
.section--dark .h1,
.section--dark .h2,
.section--dark .h3{color:var(--cream)}
.section--dark .eyebrow{color:var(--nude)}
.section--dark .lead{color:var(--nude)}
.section--dark .muted{color:var(--nude)}
.section--nude{background:var(--cream);border-top:1px solid var(--cocoa-10);border-bottom:1px solid var(--cocoa-10)}
@media(min-width:768px){
  .section{padding:96px 0}
}

/* ---------- Card ---------- */
.card{
  background:#fff;border:1px solid var(--cocoa-20);
  padding:28px;
  transition:border-color .2s, transform .2s;
}
.card:hover{border-color:var(--coffee)}
.card .card__num{
  font-family:var(--font-h);font-size:32px;color:var(--coffee);margin-bottom:8px;
}
.card h3{
  font-family:var(--font-h);font-weight:400;font-size:24px;
  line-height:1.2;color:var(--cocoa);margin:8px 0 12px;
}
.card p{
  font-family:var(--font-b);font-size:16px;color:var(--cocoa-60);line-height:1.55;
}

/* ---------- Big quote ---------- */
.bigquote{
  font-family:var(--font-i);font-style:italic;font-weight:500;
  font-size:clamp(22px,5vw,32px);
  line-height:1.4;color:var(--cocoa);
  max-width:700px;margin:0 auto;text-align:center;
}
.bigquote::before{
  content:'„';display:block;
  font-family:var(--font-h);font-size:60px;color:var(--coffee);
  line-height:0.5;margin-bottom:18px;
}
.bigquote__author{
  font-family:var(--font-m);font-weight:300;font-size:11px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--coffee);
  text-align:center;margin-top:24px;
}

/* ---------- Hero generic ---------- */
.hero{
  position:relative;min-height:88vh;
  background:
    linear-gradient(180deg, rgba(62,34,24,0.25) 0%, rgba(62,34,24,0.55) 50%, rgba(62,34,24,0.92) 100%),
    linear-gradient(135deg,#3E2218 0%,#1a0d08 100%);
  color:var(--cream);
  display:flex;flex-direction:column;
  padding:40px 20px 32px;
}
.hero h1{
  font-family:var(--font-h);font-weight:400;
  font-size:clamp(34px,8vw,64px);
  line-height:1.05;letter-spacing:0.01em;color:var(--cream);margin-top:18px;
}
.hero__top{flex:0 0 auto}
.hero__bottom{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;max-width:700px}
.hero__lead{
  font-family:var(--font-i);font-style:italic;font-weight:500;
  font-size:clamp(17px,3.4vw,22px);
  line-height:1.5;color:var(--nude);max-width:520px;margin-top:8px;
}
.hero__foot{
  display:flex;justify-content:space-between;margin-top:36px;
  font-family:var(--font-m);font-weight:300;font-size:10px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--nude);
}
@media(min-width:768px){
  .hero{padding:64px 48px 40px}
}

/* ---------- Marque (логотип сердце-дерево) ---------- */
.marque{
  width:36px;height:36px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
}
.marque svg{width:100%;height:100%}

/* ---------- Funnel page (узкая центральная) ---------- */
.funnel-page{
  max-width:560px;margin:0 auto;padding:32px 20px 64px;
  min-height:100dvh;display:flex;flex-direction:column;
}
.funnel-page__top{
  font-family:var(--font-m);font-weight:300;font-size:11px;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--coffee);
  margin-bottom:32px;display:flex;justify-content:space-between;
}
.funnel-page__cta{margin-top:auto;padding-top:32px}
.funnel-page__cta .under-btn{
  text-align:center;margin-top:14px;
  font-family:var(--font-m);font-size:12px;font-weight:300;
  letter-spacing:0.04em;color:var(--cocoa-60);
}

/* ---------- Reveal anim ---------- */
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.fade-up.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .fade-up{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Result archetype carda ---------- */
.archetype{display:none}
.archetype.is-active{display:block}
.archetype__badge{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-m);font-weight:400;
  font-size:12px;letter-spacing:0.22em;text-transform:uppercase;
  padding:8px 14px;border:1px solid var(--coffee);color:var(--coffee);
  margin-bottom:24px;
}
.archetype__badge::before{
  content:'';width:8px;height:8px;border-radius:50%;background:currentColor;
}
.archetype--red .archetype__badge{color:var(--error);border-color:var(--error)}
.archetype--yellow .archetype__badge{color:var(--warning);border-color:var(--warning)}
.archetype--green .archetype__badge{color:var(--success);border-color:var(--success)}

/* Карта проводов */
.wires{
  background:#fff;border:1px solid var(--cocoa-20);
  padding:24px;margin:28px 0;
}
.wires__row{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
  font-family:var(--font-m);font-size:13px;
}
.wires__row:last-child{margin-bottom:0}
.wires__label{
  width:100px;flex:0 0 auto;
  font-weight:400;letter-spacing:0.06em;text-transform:uppercase;color:var(--cocoa);
}
.wires__bar{
  flex:1;height:6px;background:var(--cocoa-10);position:relative;overflow:hidden;
}
.wires__bar span{
  position:absolute;top:0;left:0;height:100%;
  background:var(--coffee);
}
.wires__pct{
  width:48px;flex:0 0 auto;text-align:right;
  font-family:var(--font-m);font-size:12px;color:var(--cocoa-60);
}

/* ---------- Placeholder image (фото с фотосессии — TODO) ---------- */
.photo-placeholder{
  position:relative;width:100%;aspect-ratio:4/5;
  background:
    linear-gradient(135deg,var(--nude) 0%,var(--cream) 60%,var(--nude) 100%);
  border:1px solid var(--cocoa-20);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-m);font-size:10px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--cocoa-40);
}
.photo-placeholder::after{
  content:'фото · TODO';
}

/* ---------- FAQ ---------- */
.faq__item{
  border-top:1px solid var(--cocoa-20);padding:20px 0;
}
.faq__item:last-child{border-bottom:1px solid var(--cocoa-20)}
.faq__q{
  font-family:var(--font-h);font-size:20px;line-height:1.3;color:var(--cocoa);
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  cursor:pointer;list-style:none;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:'+';font-family:var(--font-h);font-size:24px;color:var(--coffee);
  flex:0 0 auto;line-height:1;transition:transform .2s;
}
.faq__item[open] .faq__q::after{content:'−'}
.faq__a{margin-top:14px;font-family:var(--font-b);font-size:16px;line-height:1.6;color:var(--cocoa-80)}
.faq__a p{margin-bottom:10px}

/* ---------- Quiz card (для квизов) ---------- */
.quiz{
  max-width:640px;margin:0 auto;padding:32px 20px 64px;
}
.quiz__progress{
  display:flex;align-items:center;gap:8px;margin-bottom:32px;
  font-family:var(--font-m);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--coffee);
}
.quiz__progress-bar{
  flex:1;height:1px;background:var(--cocoa-10);position:relative;
}
.quiz__progress-bar span{
  position:absolute;left:0;top:0;height:100%;background:var(--coffee);
  transition:width .3s ease;
}
.quiz__q{
  font-family:var(--font-h);font-size:clamp(22px,4.5vw,30px);
  line-height:1.2;color:var(--cocoa);margin-bottom:28px;
}
.quiz__opts{display:flex;flex-direction:column;gap:12px}
.quiz__opt{
  display:block;width:100%;text-align:left;
  background:#fff;border:1px solid var(--cocoa-20);
  padding:18px 20px;
  font-family:var(--font-b);font-size:16px;line-height:1.4;color:var(--cocoa);
  transition:border-color .2s,background .2s,transform .1s;
  cursor:pointer;
}
.quiz__opt:hover{border-color:var(--coffee);background:var(--cream)}
.quiz__opt:active{transform:scale(0.99)}
.quiz__opt.is-selected{border-color:var(--coffee);background:var(--cream)}

/* ---------- Tests grid ---------- */
.tests-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:28px}
@media(min-width:768px){.tests-grid{grid-template-columns:1fr 1fr;gap:28px}}

/* ---------- 3 wires grid ---------- */
.wires-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:28px}
@media(min-width:768px){.wires-grid{grid-template-columns:1fr 1fr 1fr;gap:28px}}
.wires-item{padding:24px 0;border-top:1px solid var(--cocoa-20)}
.wires-item .num{font-family:var(--font-h);font-size:32px;color:var(--coffee);margin-bottom:6px}
.wires-item h4{
  font-family:var(--font-h);font-size:22px;font-weight:400;line-height:1.2;
  color:var(--cocoa);margin-bottom:8px;
}
.wires-item p{font-family:var(--font-b);font-size:16px;color:var(--cocoa-60);line-height:1.55}

/* ---------- Cases (3 кейса) ---------- */
.cases-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:28px}
@media(min-width:768px){.cases-grid{grid-template-columns:1fr 1fr 1fr}}
.case{
  background:#fff;border:1px solid var(--cocoa-20);padding:28px;
}
.case__name{
  font-family:var(--font-m);font-weight:300;font-size:11px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--coffee);margin-bottom:8px;
}
.case h4{
  font-family:var(--font-h);font-size:22px;line-height:1.25;color:var(--cocoa);
  font-weight:400;margin-bottom:14px;
}
.case p{font-family:var(--font-i);font-style:italic;font-weight:500;font-size:17px;
  line-height:1.5;color:var(--cocoa-80);
}

/* ---------- Book chapters list ---------- */
.chapters{
  display:grid;grid-template-columns:1fr;gap:0;margin-top:28px;
  border-top:1px solid var(--cocoa-20);
}
.chapter{
  display:flex;align-items:flex-start;gap:18px;
  padding:22px 0;border-bottom:1px solid var(--cocoa-20);
}
.chapter__num{
  font-family:var(--font-h);font-size:22px;color:var(--coffee);
  flex:0 0 36px;line-height:1;
}
.chapter__body h4{
  font-family:var(--font-h);font-size:20px;line-height:1.25;
  color:var(--cocoa);font-weight:400;margin-bottom:6px;
}
.chapter__body p{
  font-family:var(--font-b);font-size:15px;color:var(--cocoa-60);line-height:1.55;
}

/* ---------- Offer page ---------- */
.offer-price{
  font-family:var(--font-h);font-size:clamp(46px,10vw,72px);
  line-height:1;color:var(--cocoa);margin:18px 0 6px;
}
.offer-price small{
  display:inline-block;font-family:var(--font-m);font-size:14px;
  font-weight:300;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--coffee);margin-left:4px;vertical-align:middle;
}
.bonuses{margin-top:36px;border-top:1px solid var(--cocoa-20)}
.bonus{
  display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--cocoa-20);
}
.bonus__num{
  font-family:var(--font-m);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--coffee);flex:0 0 60px;padding-top:4px;
}
.bonus__body h4{
  font-family:var(--font-h);font-size:19px;font-weight:400;line-height:1.25;
  color:var(--cocoa);margin-bottom:4px;
}
.bonus__body p{font-family:var(--font-b);font-size:15px;color:var(--cocoa-60);line-height:1.55}

/* ---------- Audio player placeholder ---------- */
.audio-card{
  background:#fff;border:1px solid var(--cocoa-20);padding:28px;
  text-align:center;
}
.audio-card__cover{
  width:96px;height:96px;border-radius:50%;
  background:linear-gradient(135deg,var(--coffee),var(--cocoa));
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;color:var(--cream);
}
.audio-card__cover svg{width:32px;height:32px}
.audio-card__name{
  font-family:var(--font-h);font-size:22px;color:var(--cocoa);margin-bottom:6px;
}
.audio-card__time{
  font-family:var(--font-m);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--coffee);margin-bottom:18px;
}
.audio-card audio{width:100%;margin-top:12px}

/* ---------- Legal page ---------- */
.legal-body{max-width:780px;margin:0 auto;padding:0 20px}
.legal-body h1{margin-bottom:24px}
.legal-body h2{font-family:var(--font-h);font-size:24px;margin:32px 0 12px;color:var(--cocoa)}
.legal-body p,.legal-body li{font-family:var(--font-b);font-size:16px;line-height:1.65;color:var(--cocoa-80);margin-bottom:12px}
.legal-body ul{padding-left:22px;margin-bottom:14px}
.legal-body .placeholder{
  background:var(--nude);border:1px dashed var(--coffee);
  padding:18px;color:var(--cocoa);
  font-family:var(--font-m);font-size:13px;letter-spacing:0.04em;
  margin:24px 0;
}