/* ============================================================
   Пробковая мастерская — дизайн-система
   Тёплая, натуральная, крафтовая эстетика «под пробку»
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Onest:wght@400;500;600;700&display=swap');

:root{
  /* — Палитра — */
  --cream:      #F6EFE2;   /* фон страницы */
  --cream-2:    #FBF6EC;   /* светлые карточки */
  --paper:      #FFFFFF;
  --sand:       #EFE4D1;   /* секции-разделители */

  --ink:        #2B2117;   /* основной текст */
  --ink-soft:   #6A5C4A;   /* вторичный текст */
  --ink-faint:  #9C8C76;   /* подписи */

  --cork:       #C17A46;   /* основной акцент — пробка/терракота */
  --cork-deep:  #A05E2E;   /* кнопки, ховеры */
  --cork-dark:  #6E4524;   /* тёмный коричневый */
  --honey:      #DDA45E;   /* медовый, светлый акцент */
  --olive:      #717A52;   /* эко-акцент */
  --olive-deep: #58603E;

  --line:       #E4D8C2;   /* границы */
  --line-soft:  #EEE5D5;

  --ok:         #5E8A57;
  --warn-bg:    #F4E3D6;

  /* — Тени (тёплые) — */
  --sh-sm: 0 1px 2px rgba(80,54,26,.06), 0 2px 6px rgba(80,54,26,.05);
  --sh-md: 0 4px 14px rgba(80,54,26,.08), 0 10px 30px rgba(80,54,26,.07);
  --sh-lg: 0 18px 50px rgba(80,54,26,.14), 0 6px 18px rgba(80,54,26,.08);
  --sh-cork: 0 14px 40px rgba(160,94,46,.22);

  /* — Радиусы — */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --maxw: 1200px;

  --font-display: 'Spectral', Georgia, serif;
  --font-sans: 'Onest', system-ui, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; line-height:1.08; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
a{ color: inherit; text-decoration: none; }
img{ display:block; max-width:100%; }
button{ font-family: inherit; cursor: pointer; }
::selection{ background: var(--honey); color: var(--cork-dark); }

/* — Слои и контейнеры — */
.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 28px; }
.section{ padding: 96px 0; position:relative; }
.section--sand{ background: var(--sand); }
.section--cream2{ background: var(--cream-2); }
.section--ink{ background: var(--cork-dark); color: #F4E7D6; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 13px; font-weight:600; letter-spacing:.14em; text-transform: uppercase;
  color: var(--cork-deep);
}
.eyebrow::before{ content:""; width:22px; height:2px; background: var(--cork); border-radius:2px; }
.section--ink .eyebrow{ color: var(--honey); }

.h-xl{ font-size: clamp(40px, 6vw, 74px); }
.h-lg{ font-size: clamp(32px, 4.2vw, 52px); }
.h-md{ font-size: clamp(26px, 3vw, 38px); }
.lead{ font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-soft); line-height:1.6; }

.section-head{ max-width: 760px; margin-bottom: 56px; }
.section-head .h-lg{ margin: 18px 0 18px; }

/* ============ Кнопки ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; font-size:16px; line-height:1; white-space:nowrap;
  padding: 16px 26px; border-radius: 999px; border:1.5px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn--primary{ background: var(--cork-deep); color:#FFF6EC; box-shadow: var(--sh-cork); }
.btn--primary:hover{ background: var(--cork-dark); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--cream); }
.btn--soft{ background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: var(--sh-sm); }
.btn--soft:hover{ border-color: var(--cork); color: var(--cork-deep); }
.btn--light{ background:#FFF6EC; color: var(--cork-dark); }
.btn--light:hover{ background:#fff; }
.btn--lg{ padding: 19px 32px; font-size:17px; }
.btn--block{ width:100%; }
.btn--sm{ padding: 11px 18px; font-size:14px; }

.link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color: var(--cork-deep); }
.link-arrow svg{ transition: transform .2s ease; }
.link-arrow:hover svg{ transform: translateX(4px); }

/* ============ Чипы / теги ============ */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding: 8px 14px; border-radius: 999px; font-size:14px; font-weight:500;
  background: var(--paper); border:1px solid var(--line); color: var(--ink-soft);
}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 11px; border-radius: 7px; font-size:12.5px; font-weight:600;
  letter-spacing:.02em; background: var(--warn-bg); color: var(--cork-dark);
}

/* ============ Карточки ============ */
.card{
  background: var(--paper); border:1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}

/* ============ Поля форм ============ */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label{ font-size:13.5px; font-weight:600; color: var(--ink-soft); }
.field input, .field textarea, .field select{
  font-family: inherit; font-size:16px; color: var(--ink);
  padding: 14px 16px; border-radius: var(--r-md);
  border:1.5px solid var(--line); background: var(--cream-2);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color: var(--cork); background:#fff;
  box-shadow: 0 0 0 4px rgba(193,122,70,.14);
}
.field input::placeholder, .field textarea::placeholder{ color: var(--ink-faint); }
.field .hint{ font-size:12.5px; color: var(--ink-faint); }
.consent{ font-size:12px; color: var(--ink-faint); line-height:1.5; }
.consent a{ color: var(--cork-deep); text-decoration: underline; text-underline-offset:2px; }

/* ============ Модалка ============ */
.modal-overlay{
  position: fixed; inset:0; z-index: 200;
  background: rgba(43,33,23,.46); backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center; padding: 24px;
  animation: fade .2s ease;
}
.modal{
  width: 100%; max-width: 460px; background: var(--cream-2);
  border-radius: var(--r-xl); box-shadow: var(--sh-lg);
  padding: 34px; position: relative; animation: pop .26s cubic-bezier(.2,.9,.3,1.2);
  max-height: 92vh; overflow:auto;
}
.modal__close{
  position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:999px;
  border:1px solid var(--line); background: var(--paper); color: var(--ink-soft);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.modal__close:hover{ background: var(--ink); color: var(--cream); border-color: var(--ink); }
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes pop{ from{opacity:0; transform: translateY(14px) scale(.97)} to{opacity:1; transform:none} }

/* ============ Утилиты ============ */
.muted{ color: var(--ink-soft); }
.faint{ color: var(--ink-faint); }
.center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.grid{ display:grid; gap:24px; }
.flex{ display:flex; }
.stack{ display:flex; flex-direction:column; }
.divider{ height:1px; background: var(--line); border:none; margin:0; }

.fade-up{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.fade-up.in{ opacity:1; transform:none; }

.scrim-top{ position:absolute; inset:0 0 auto 0; height:120px; background: linear-gradient(var(--cream), transparent); pointer-events:none; }

/* cork grain texture helper applied inline by JS */
.grain{ position:relative; overflow:hidden; }

@media (max-width: 860px){
  .section{ padding: 64px 0; }
  .wrap{ padding: 0 20px; }
  .section-head{ margin-bottom: 40px; }
}