/* 3Дишка — концепция редизайна. Общие токены и компоненты. */
:root{
  /* Фоны */
  --bg:#FDFBF7;          /* крем — основной фон (совпадает с фоном лого) */
  --bg-alt:#F7F0EA;      /* тёплый крем — чередующиеся секции */
  --surface:#FFFFFF;     /* карточки */
  --blush:#F3E7E7;       /* розовая плашка, подложки иконок */
  --line:#E8D9D9;        /* рамки, разделители */

  /* Текст */
  --text:#4A3838;        /* основной текст — 10.6:1 на --bg */
  --heading:#7A4B4B;     /* заголовки — 6.9:1 */
  --muted:#7D6767;       /* второстепенный — 5.1:1 на --bg, 4.6:1 на --bg-alt */
  --accent:#946363;      /* курсив-акцент, eyebrow — 4.8:1 на --bg */

  /* Бренд */
  --brand:#8A5A5A;       /* кнопки, ссылки — 5.7:1 с белым */
  --brand-hover:#74484A; /* hover темнее, а не светлее — 7.6:1 */
  --rose:#B88888;        /* цвет логотипа — только декор и тёмный фон */
  --gold:#C9A66B;        /* звёзды, линии — только декор */
  --gold-ink:#8C6A2F;    /* золото для текста и бейджей — 5.0:1 с белым */

  /* Тёмный блок */
  --cocoa:#3A2A2B;
  --on-cocoa:#F3E7E7;    /* 11.3:1 */
  --on-cocoa-muted:#CDB8B8; /* 7.2:1 */

  /* Шрифты и шкала (модуль 1.25) */
  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-xs:.8125rem;  /* 13 */
  --fs-sm:.875rem;   /* 14 */
  --fs-base:1rem;    /* 16 */
  --fs-lg:1.125rem;  /* 18 */
  --fs-xl:1.375rem;  /* 22 */
  --fs-2xl:clamp(1.75rem,1.4rem + 1.4vw,2.25rem);  /* 28–36 */
  --fs-3xl:clamp(2.25rem,1.6rem + 2.6vw,3.25rem);  /* 36–52 */
  --fs-4xl:clamp(2.75rem,1.9rem + 3.8vw,4.25rem);  /* 44–68 */

  --radius-sm:12px; --radius:20px; --radius-lg:28px;
  --shadow-sm:0 2px 10px rgba(74,56,56,.06);
  --shadow:0 18px 50px rgba(74,56,56,.10);
  --maxw:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--fs-base);line-height:1.65;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brand-hover)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(max-width:640px){.wrap{padding:0 16px}}

h1,h2,h3,.h1{font-family:var(--font-display);color:var(--heading);font-weight:600;line-height:1.1;letter-spacing:-.005em}
/* у Cormorant по умолчанию старостильные цифры: «3» читается как «з» */
h1,h2,h3,.h1,[style*="font-display"],.display{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
[id]{scroll-margin-top:84px}
h1,.h1{font-size:var(--fs-4xl)}
h2{font-size:var(--fs-3xl)}
h3{font-size:var(--fs-xl);line-height:1.2}
h1 em,.h1 em,h2 em{font-style:italic;font-weight:500;color:var(--accent)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
/* «надзаголовок» может быть самим h1 (ключевая фраза для поиска), а крупный слоган — абзацем .h1 */
h1.eyebrow{font-family:var(--font-body);line-height:1.4;font-variant-numeric:normal;font-feature-settings:normal}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.lead{font-size:var(--fs-lg);color:var(--text);max-width:34em}
.muted{color:var(--muted)}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 26px;border-radius:999px;font:700 var(--fs-base)/1 var(--font-body);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s}
.btn svg{width:20px;height:20px;flex-shrink:0}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(138,90,90,.25)}
.btn-primary:hover{background:var(--brand-hover);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn-ghost:hover{background:var(--blush);color:var(--brand-hover)}
.btn-light{background:var(--on-cocoa);color:var(--cocoa)}
.btn-light:hover{background:#fff;color:var(--cocoa)}
.btn-sm{min-height:40px;padding:9px 18px;font-size:var(--fs-sm)}

/* Бейджи */
.badge{display:inline-block;padding:5px 12px;border-radius:999px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em}
.badge-gold{background:var(--gold-ink);color:#fff}
.badge-soft{background:var(--blush);color:var(--brand)}

/* Карточка */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}

/* Анимация появления — только как улучшение: без JS контент виден */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* Заглушка для данных, которые нужно уточнить у заказчика */
.todo{background:repeating-linear-gradient(-45deg,#FFF6E0,#FFF6E0 8px,#FFF0CC 8px,#FFF0CC 16px);border:1px dashed var(--gold-ink);border-radius:8px;padding:2px 8px;color:#5C4419;font-weight:600}