/* =========================================================
   Luxstone — детская мебель. Стили сайта.
   Здесь всё оформление: цвета, шрифты, расположение, анимации.
   ========================================================= */

/* ---------- 1. ПЕРЕМЕННЫЕ (цвета и размеры в одном месте) ---------- */
:root{
  --cream:      #FBF5EA;   /* тёплый кремовый фон */
  --cream-2:    #F3E9D8;   /* фон блоков */
  --ink:        #2A1D14;   /* основной тёмный (тёмное дерево) */
  --ink-soft:   #6B5A4A;   /* приглушённый текст */

  --wood:       #C97B3F;   /* дерево — главный акцент */
  --wood-lt:    #E4A96B;   /* светлое дерево */
  --wood-dk:    #8E5227;   /* тёмное дерево */
  --terra:      #D9634A;   /* терракота */
  --mint:       #7FA88B;   /* шалфей */
  --sun:        #F2B33D;   /* солнечный жёлтый */
  --wa:         #25D366;   /* цвет WhatsApp */

  --radius:     22px;
  --radius-sm:  14px;
  --shadow:     0 18px 40px -22px rgba(42,29,20,.45);
  --shadow-lg:  0 40px 80px -40px rgba(42,29,20,.55);
  --wrap:       1200px;
  --ease:       cubic-bezier(.2,.7,.2,1);
}

/* ---------- 2. БАЗА ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* лёгкая «бумажная» зернистость поверх фона */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:1; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

img{ max-width:100%; display:block; border-radius:inherit; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }

.wrap{ width:min(var(--wrap), 92%); margin-inline:auto; }

h1,h2,h3{ font-family:'Unbounded',sans-serif; font-weight:700; line-height:1.1; letter-spacing:-.02em; margin:0; }

em{ font-style:normal; color:var(--wood); position:relative; }

.h2{ font-size:clamp(2rem, 4.4vw, 3.4rem); }

.eyebrow{
  display:inline-block;
  font-family:'Caveat',cursive;
  font-size:1.5rem;
  color:var(--terra);
  transform:rotate(-2deg);
  margin-bottom:.4rem;
}

.head{ max-width:760px; margin-bottom:3.5rem; }
.head--center{ margin-inline:auto; text-align:center; }
.head__sub{ color:var(--ink-soft); font-size:1.05rem; margin-top:.9rem; }
.head__sub a{ color:var(--wood); border-bottom:1px solid var(--wood-lt); }

/* ---------- 3. КНОПКИ ---------- */
.btn{
  --bg:var(--ink);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.6rem;
  background:var(--bg); color:var(--cream);
  border-radius:100px;
  font-weight:700; font-size:1rem;
  border:2px solid var(--bg);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  box-shadow:0 10px 24px -14px rgba(42,29,20,.9);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 18px 32px -16px rgba(42,29,20,.85); }
.btn:active{ transform:translateY(-1px); }
.btn__ico{ width:20px; height:20px; }

.btn--ghost{
  background:transparent; color:var(--ink);
  border-color:rgba(42,29,20,.25); box-shadow:none;
}
.btn--ghost:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.btn--sm{ padding:.65rem 1.2rem; font-size:.92rem; }
.btn--big{ padding:1.15rem 2rem; font-size:1.1rem; background:var(--wa); border-color:var(--wa); color:#053b1c; }

/* ---------- 4. ПОЛОСКА ПРОКРУТКИ ---------- */
.scroll-bar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:120; }
.scroll-bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--wood),var(--terra),var(--sun));
}

/* ---------- 5. ШАПКА ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:.9rem 0;
  transition:background .4s, box-shadow .4s, padding .4s;
}
.nav.is-stuck{
  background:rgba(251,245,234,.88);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(42,29,20,.08);
  padding:.55rem 0;
}
.nav__in{ display:flex; align-items:center; gap:2rem; }

.logo{ display:flex; align-items:center; gap:.6rem; color:var(--wood); }
.logo__mark{ width:34px; height:34px; flex:none; }
.logo__txt{
  font-family:'Unbounded',sans-serif; font-weight:800;
  font-size:1.3rem; color:var(--ink); letter-spacing:-.03em;
}

.nav__links{ display:flex; gap:1.7rem; margin-left:auto; font-weight:600; font-size:.97rem; }
.nav__links a{ position:relative; padding:.2rem 0; }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-2px;
  width:100%; height:2px; background:var(--wood);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; margin:5px 0; transition:.3s var(--ease); }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none; flex-direction:column; gap:.2rem;
  background:var(--cream); border-top:1px solid rgba(42,29,20,.1);
  max-height:0; overflow:hidden; transition:max-height .45s var(--ease);
}
.mobile-menu a{ padding:.9rem 4%; font-weight:600; border-bottom:1px solid rgba(42,29,20,.06); }
.mobile-menu.is-open{ max-height:340px; }

/* ---------- 6. ПЕРВЫЙ ЭКРАН ---------- */
.hero{ position:relative; padding:7.5rem 0 3rem; overflow:hidden; }

/* мягкое тёплое свечение на фоне */
.hero__glow{
  position:absolute; inset:-20% -10% auto -10%; height:120%;
  background:
    radial-gradient(46% 46% at 78% 26%, rgba(242,179,61,.35), transparent 70%),
    radial-gradient(40% 40% at 12% 8%, rgba(201,123,63,.22), transparent 70%),
    radial-gradient(50% 50% at 50% 100%, rgba(127,168,139,.20), transparent 70%);
  filter:blur(8px);
  animation:glow 14s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes glow{ to{ transform:translate3d(-3%,2%,0) scale(1.08); } }

.hero__in{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:3rem; align-items:center;
}

.badge{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem 1rem .45rem .7rem;
  background:rgba(255,255,255,.7); border:1px solid rgba(42,29,20,.12);
  border-radius:100px; font-size:.9rem; font-weight:700;
  backdrop-filter:blur(6px);
}
.badge__dot{
  width:9px; height:9px; border-radius:50%; background:var(--wa);
  box-shadow:0 0 0 0 rgba(37,211,102,.7);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 12px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

.hero__title{
  font-size:clamp(2.2rem, 4.3vw, 3.6rem);
  margin:1rem 0 .4rem;
}
.hero__title .hline{ display:block; }
.hero__title em{ z-index:1; }
.hero__title em::after{
  content:''; position:absolute; left:0; right:0; bottom:.06em; height:.16em;
  background:var(--sun); border-radius:4px; z-index:-1;
  transform:scaleX(0); transform-origin:left;
  animation:underline 1s var(--ease) 1.1s forwards;
}
@keyframes underline{ to{ transform:scaleX(1); } }

.hero__slogan{
  font-family:'Caveat',cursive; font-size:1.9rem; color:var(--terra);
  margin:.2rem 0 .8rem; transform:rotate(-1.5deg);
}
.hero__lead{ color:var(--ink-soft); font-size:1.1rem; font-weight:600; margin:0 0 1.7rem; }

.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; }

.hero__facts{ display:flex; gap:2.4rem; margin-top:2.2rem; flex-wrap:wrap; }
.fact b{
  display:block; font-family:'Unbounded',sans-serif; font-size:1.85rem;
  color:var(--wood); line-height:1;
}
.fact span{ font-size:.9rem; color:var(--ink-soft); }


/* --- стул в первом экране --- */
.hero-chair{ width:100%; max-width:480px; height:auto; display:block; margin-inline:auto; }
.hero-chair__note{
  text-align:center; margin:.6rem 0 0;
  font-family:'Caveat',cursive; font-size:1.4rem; color:var(--ink-soft);
}

/* --- (старое) мастерская --- */
.workshop{ position:relative; }
.bed{ width:100%; height:auto; overflow:visible; }

.workshop__label{
  position:absolute; top:0; right:6%;
  background:var(--ink); color:var(--cream);
  padding:.35rem 1rem; border-radius:100px;
  font-size:.85rem; font-weight:700; letter-spacing:.04em;
}
.workshop__step{ display:inline-block; min-width:6.5rem; text-align:center; }

.workshop__hint{
  text-align:center; font-family:'Caveat',cursive; font-size:1.35rem;
  color:var(--ink-soft); margin:.4rem 0 0;
  padding-right:9rem;   /* чтобы плавающая кнопка WhatsApp не перекрывала подпись */
}

/* чертёж — линии «рисуются» */
.blueprint{ stroke:var(--wood-dk); opacity:.55; }
.bp{
  stroke-dasharray:6 7;
  stroke-dashoffset:600;
  animation:draw 9s linear infinite;
}
.bp--dim{ stroke:var(--terra); }
@keyframes draw{
  0%   { stroke-dashoffset:600; opacity:0; }
  8%   { opacity:.9; }
  22%  { stroke-dashoffset:0;  opacity:.9; }
  70%  { opacity:.35; }
  88%  { opacity:0; stroke-dashoffset:0; }
  100% { opacity:0; stroke-dashoffset:600; }
}
.bp-text{
  font-family:'Caveat',cursive; font-size:19px; fill:var(--terra);
  opacity:0; animation:bpText 9s linear infinite;
}
@keyframes bpText{ 0%,18%{opacity:0} 26%,72%{opacity:.9} 88%,100%{opacity:0} }

/* детали кроватки влетают по очереди */
.part{ opacity:0; transform-box:fill-box; transform-origin:center; }
.part--legs    { animation:drop 9s var(--ease) infinite; animation-delay:2.0s; }
.part--base    { animation:drop 9s var(--ease) infinite; animation-delay:2.35s; }
.part--mattress{ animation:drop 9s var(--ease) infinite; animation-delay:2.7s; }
.part--posts   { animation:rise 9s var(--ease) infinite; animation-delay:3.05s; }
.part--roof    { animation:drop 9s var(--ease) infinite; animation-delay:3.4s; }
.part--soft    { animation:drop 9s var(--ease) infinite; animation-delay:3.8s; }
.part--deco    { animation:fadein 9s var(--ease) infinite; animation-delay:4.2s; }

@keyframes drop{
  0%   { opacity:0; transform:translateY(-38px) scale(.94); }
  4%   { opacity:1; transform:translateY(2px) scale(1); }
  6%   { transform:translateY(0) scale(1); opacity:1; }
  62%  { opacity:1; transform:none; }
  74%  { opacity:0; transform:translateY(-14px); }
  100% { opacity:0; transform:translateY(-38px); }
}
@keyframes rise{
  0%   { opacity:0; transform:translateY(34px) scale(.94); }
  4%   { opacity:1; transform:translateY(-2px) scale(1); }
  6%   { transform:none; opacity:1; }
  62%  { opacity:1; transform:none; }
  74%  { opacity:0; transform:translateY(14px); }
  100% { opacity:0; transform:translateY(34px); }
}
@keyframes fadein{
  0%   { opacity:0; transform:scale(.8); }
  5%   { opacity:1; transform:scale(1); }
  62%  { opacity:1; }
  74%,100%{ opacity:0; }
}
.star{ transform-box:fill-box; transform-origin:center; animation:twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle{ 50%{ transform:scale(1.25) rotate(12deg); } }

/* опилки подпрыгивают, когда «пилят» */
.chip{ opacity:0; transform-box:fill-box; transform-origin:center; }
.chip:nth-child(1){ animation:chip 9s ease-out infinite; animation-delay:1.7s; }
.chip:nth-child(2){ animation:chip 9s ease-out infinite; animation-delay:1.85s; }
.chip:nth-child(3){ animation:chip 9s ease-out infinite; animation-delay:2.0s; }
@keyframes chip{
  0%  { opacity:0; transform:translate(0,0) scale(.6); }
  2%  { opacity:1; }
  6%  { opacity:0; transform:translate(10px,-26px) scale(1.1); }
  100%{ opacity:0; }
}

/* ---------- 7. БЕГУЩАЯ СТРОКА ---------- */
.marquee{
  background:var(--ink); color:var(--cream);
  padding:.9rem 0; overflow:hidden; position:relative; z-index:2;
  margin-top:2rem;
}
.marquee__track{
  display:flex; align-items:center; gap:1.6rem; width:max-content;
  animation:marquee 30s linear infinite;
}
.marquee span{
  font-family:'Unbounded',sans-serif; font-weight:600;
  font-size:.95rem; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap;
}
.marquee i{ width:8px; height:8px; border-radius:50%; background:var(--sun); flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- 7.5. ФЛАГМАН: РАСТУЩИЙ СТУЛ ---------- */
.flag{ padding:5rem 0 2rem; }

.flag__box{
  background:#fff; border:1px solid rgba(42,29,20,.08);
  border-radius:calc(var(--radius) + 10px);
  box-shadow:var(--shadow-lg);
  padding:3.2rem 3rem;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:3rem; align-items:center;
  position:relative; overflow:hidden;
}
/* мягкое пятно света в углу */
.flag__box::before{
  content:''; position:absolute; top:-30%; right:-15%;
  width:60%; height:120%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(242,179,61,.22), transparent 70%);
  pointer-events:none;
}
.flag__text, .flag__art{ position:relative; z-index:2; }

.flag__lead{ color:var(--ink-soft); font-size:1.1rem; margin:.8rem 0 1.8rem; }

.flag__list{ display:grid; gap:1.1rem; margin-bottom:2rem; }
.flag__list li{ display:flex; gap:.9rem; align-items:flex-start; }
.flag__list svg{
  width:24px; height:24px; flex:none; margin-top:.2rem;
  color:var(--wood);
}
.flag__list b{ display:block; font-size:1rem; }
.flag__list div{ font-size:.95rem; color:var(--ink-soft); line-height:1.5; }

/* --- картинка стула --- */
.chair{ width:auto; max-width:78%; max-height:460px; height:auto; display:block; margin-inline:auto; }

/* ссылка на флагман в первом экране */
.hero__flag{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.4rem; padding:.5rem 1.1rem;
  background:var(--cream-2); border:1px solid rgba(201,123,63,.3);
  border-radius:100px; font-size:.93rem; color:var(--ink-soft);
  transition:transform .35s var(--ease), background .35s;
}
.hero__flag b{ color:var(--ink); }
.hero__flag-star{ color:var(--sun); }
.hero__flag-go{ transition:transform .35s var(--ease); }
.hero__flag:hover{ transform:translateX(4px); background:#fff; }
.hero__flag:hover .hero__flag-go{ transform:translateX(4px); }

/* ---------- 8. ПОЧЕМУ МЫ ---------- */
.why{ padding:6rem 0 4rem; }
.why__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.why__cta{ margin-top:2.5rem; text-align:center; }

.card{
  background:#fff; border:1px solid rgba(42,29,20,.08);
  border-radius:var(--radius); padding:2rem 1.6rem;
  box-shadow:var(--shadow);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  position:relative; overflow:hidden;
}
.card::after{
  content:''; position:absolute; inset:auto -30% -60% -30%; height:70%;
  background:radial-gradient(50% 100% at 50% 100%, rgba(242,179,61,.22), transparent 70%);
  opacity:0; transition:opacity .5s;
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.card:hover::after{ opacity:1; }
.card__ico{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center; margin-bottom:1.1rem;
  background:var(--cream-2); color:var(--wood);
  transition:transform .5s var(--ease), background .4s;
}
.card__ico svg{ width:30px; height:30px; }
.card:hover .card__ico{ transform:rotate(-8deg) scale(1.06); background:var(--sun); color:var(--ink); }
.card h3{ font-size:1.18rem; margin-bottom:.5rem; }
.card p{ color:var(--ink-soft); font-size:.97rem; margin:0; }

/* ---------- 9. ПРОИЗВОДСТВО ---------- */
.line{ background:var(--cream-2); position:relative; padding:6rem 0 5rem; }
.line::before,.line::after{
  content:''; position:absolute; left:0; right:0; height:40px; z-index:3;
  background:radial-gradient(closest-side, var(--cream) 98%, transparent) 0 0/40px 80px repeat-x;
}
.line::before{ top:-1px; }
.line::after{ bottom:-1px; transform:rotate(180deg); }

.line__steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.lstep{
  background:#fff; border:1px solid rgba(42,29,20,.08);
  border-radius:var(--radius); padding:1.8rem 1.6rem;
  box-shadow:var(--shadow);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.lstep:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.lstep__num{
  display:block; font-family:'Unbounded',sans-serif; font-weight:800; font-size:.78rem;
  letter-spacing:.12em; color:var(--wood); margin-bottom:.7rem;
}
.lstep h3{ font-size:1.15rem; margin-bottom:.5rem; }
.lstep p{ color:var(--ink-soft); font-size:.95rem; margin:0; }


/* ---------- 10. КАТАЛОГ ---------- */
.catalog{ padding:6rem 0 4rem; }

/* модели с ценами */
.models{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.4rem; }
.model{
  position:relative;
  background:#fff; border:1px solid rgba(42,29,20,.08); border-radius:var(--radius-sm);
  padding:1rem 1rem 1.1rem; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:.25rem;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.model:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:var(--wood-lt); }
.model__media{
  aspect-ratio:1/1; background:var(--cream-2);
  border-radius:12px; overflow:hidden; margin-bottom:.9rem;
}
.model__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.model:hover .model__media img{ transform:scale(1.05); }
.model b{ font-size:1rem; }
.model__age{ font-size:.85rem; color:var(--ink-soft); }
.model__price{ margin-top:.5rem; font-family:'Unbounded',sans-serif; font-weight:700; font-size:1.05rem; color:var(--wood-dk); }
.model__price s{ font-family:'Manrope',sans-serif; font-weight:500; font-size:.85rem; color:var(--ink-soft); opacity:.7; margin-left:.3rem; }
.model--hit{ border:2px solid var(--wood); }
.model__tag{
  position:absolute; top:-11px; left:1rem; z-index:2;
  background:var(--terra); color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:.2rem .7rem; border-radius:100px;
}

/* подзаголовок перед остальным ассортиментом */
.cat__sub{
  font-family:'Caveat',cursive; font-size:1.7rem; color:var(--terra);
  margin:0 0 1.4rem; transform:rotate(-1deg);
}

/* плитки остальных категорий */
.cat__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.cat-tile{
  background:#fff; border:1px solid rgba(42,29,20,.08);
  border-radius:var(--radius-sm); padding:1.4rem 1.3rem;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:.15rem;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.cat-tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--wood-lt); }
.cat-tile svg{ width:34px; height:34px; color:var(--wood); margin-bottom:.7rem; }
.cat-tile b{ font-size:1rem; font-weight:700; }
.cat-tile span{ font-size:.87rem; color:var(--ink-soft); }
.cat-tile--order{ background:var(--cream-2); border-style:dashed; border-color:var(--wood-lt); box-shadow:none; }

.cat__note{
  margin-top:1.8rem; color:var(--ink-soft); font-size:.98rem;
}
.cat__note a{ color:var(--wood); font-weight:700; border-bottom:1px solid var(--wood-lt); }

/* ---------- 11. РАБОТЫ ---------- */
.works{ padding:4rem 0 6rem; }
.works__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:250px; gap:1.4rem;
}
.work{ margin:0; display:flex; flex-direction:column; }
/* первая работа крупнее: 2 колонки и 2 ряда */
.work--big{ grid-column:span 2; grid-row:span 2; }

.work__media{
  flex:1; border-radius:var(--radius-sm); overflow:hidden;
  position:relative; box-shadow:var(--shadow);
  transition:transform .5s var(--ease);
}
.work__media img{ width:100%; height:100%; object-fit:cover; }
.work:hover .work__media{ transform:translateY(-6px); }

.work__media::before{
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(42,29,20,.35), transparent 55%);
  opacity:0; transition:opacity .5s;
}
.work:hover .work__media::before{ opacity:1; }


.work figcaption{ padding:.85rem .3rem 0; display:flex; flex-direction:column; }
.work figcaption b{ font-weight:700; font-size:.98rem; }
.work figcaption span{ color:var(--ink-soft); font-size:.86rem; }

/* ---------- 12. ОТЗЫВЫ ---------- */
.reviews{ padding:6rem 0; background:var(--ink); color:var(--cream); position:relative; overflow:hidden; }
.reviews::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 50% 0%, rgba(242,179,61,.18), transparent 70%);
}
.reviews .wrap{ position:relative; z-index:2; }
.reviews .eyebrow{ color:var(--sun); }
.reviews em{ color:var(--wood-lt); }

.rev__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.rev{
  margin:0; padding:2rem 1.8rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius); backdrop-filter:blur(6px);
  transition:transform .5s var(--ease), background .4s;
}
.rev:hover{ transform:translateY(-7px); background:rgba(255,255,255,.1); }
.rev__stars{ color:var(--sun); letter-spacing:.18em; margin-bottom:.9rem; }
.rev p{ margin:0 0 1.4rem; font-size:1.02rem; opacity:.92; }
.rev footer{ display:flex; flex-direction:column; }
.rev footer b{ font-family:'Unbounded',sans-serif; font-size:.95rem; }
.rev footer span{ font-size:.85rem; opacity:.6; }

/* ---------- 13. КОНТАКТЫ ---------- */
.contacts{ padding:6rem 0; }
.contacts__in{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; }
.contacts__text > p{ color:var(--ink-soft); margin:1rem 0 2rem; }

.contacts__list{ display:grid; gap:1.1rem; margin-bottom:2.2rem; }
.contacts__list li{ display:flex; gap:1rem; align-items:center; }
.ci{
  width:46px; height:46px; flex:none; border-radius:14px;
  background:var(--cream-2); color:var(--wood);
  display:grid; place-items:center;
  transition:transform .4s var(--ease), background .4s;
}
.ci svg{ width:22px; height:22px; }
.contacts__list li:hover .ci{ transform:rotate(-8deg); background:var(--sun); color:var(--ink); }
.contacts__list b{ display:block; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-weight:700; }
.contacts__list a, .contacts__list .plain{ font-size:1.06rem; font-weight:600; }
.contacts__list a{ border-bottom:1px solid transparent; transition:border-color .3s, color .3s; }
.contacts__list a:hover{ color:var(--wood); border-color:var(--wood-lt); }

.workshop-card{
  background:linear-gradient(160deg,#FDF0DA,#F6E1C2);
  border-radius:var(--radius); padding:2rem;
  border:1px solid rgba(42,29,20,.1); box-shadow:var(--shadow);
  position:relative;
}
.workshop-card__tag{
  position:absolute; top:-14px; left:2rem;
  background:var(--terra); color:#fff; font-weight:700; font-size:.82rem;
  padding:.3rem 1rem; border-radius:100px; transform:rotate(-2deg);
}
.workshop-card svg{ width:100%; height:auto; overflow:visible; }
.workshop-card__note{
  margin:1rem 0 0; text-align:center;
  font-family:'Caveat',cursive; font-size:1.35rem; color:var(--ink-soft);
}
.win{ animation:winGlow 3.6s ease-in-out infinite; }
.win--2{ animation-delay:1.2s; }
@keyframes winGlow{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.puff{ opacity:0; transform-box:fill-box; transform-origin:center; }
.puff--1{ animation:puff 4s ease-out infinite; }
.puff--2{ animation:puff 4s ease-out infinite 1.3s; }
.puff--3{ animation:puff 4s ease-out infinite 2.6s; }
@keyframes puff{
  0%  { opacity:0; transform:translateY(0) scale(.5); }
  15% { opacity:.85; }
  100%{ opacity:0; transform:translateY(-58px) translateX(-16px) scale(1.7); }
}

/* ---------- 14. ПОДВАЛ ---------- */
.foot{ background:var(--ink); color:var(--cream); padding:3rem 0 2.4rem; }
.foot__in{ display:grid; gap:1.6rem; justify-items:center; text-align:center; }
.foot .logo__txt{ color:var(--cream); font-size:1.5rem; }
.foot__brand p{ font-family:'Caveat',cursive; font-size:1.3rem; color:var(--wood-lt); margin:.2rem 0 0; }
.foot__nav{ display:flex; gap:1.6rem; flex-wrap:wrap; justify-content:center; font-weight:600; font-size:.95rem; }
.foot__nav a{ opacity:.8; transition:opacity .3s, color .3s; }
.foot__nav a:hover{ opacity:1; color:var(--sun); }
.foot__copy{ font-size:.85rem; opacity:.5; margin:0; }

/* ---------- 15. ПЛАВАЮЩАЯ КНОПКА WHATSAPP ---------- */
.wa{
  position:fixed; right:22px; bottom:22px; z-index:110;
  display:flex; align-items:center; gap:.6rem;
  height:60px; padding:0 20px;
  background:var(--wa); color:#fff; border-radius:100px;
  box-shadow:0 14px 30px -10px rgba(37,211,102,.75);
  font-weight:700;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.wa svg{ width:30px; height:30px; flex:none; }
.wa:hover{ transform:translateY(-4px) scale(1.03); box-shadow:0 20px 40px -12px rgba(37,211,102,.85); }
.wa__label{ font-size:.95rem; white-space:nowrap; }
.wa__pulse{
  position:absolute; inset:0; border-radius:100px;
  border:2px solid var(--wa);
  animation:waPulse 2.6s ease-out infinite;
}
@keyframes waPulse{
  0%  { transform:scale(1); opacity:.8; }
  100%{ transform:scale(1.28); opacity:0; }
}

/* ---------- 16. ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ ---------- */
.anim{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d, 0ms);
}
.anim.is-in{ opacity:1; transform:none; }

.reveal{
  opacity:0; transform:translateY(24px);
  animation:reveal .9s var(--ease) forwards;
  animation-delay:var(--d, 0ms);
}
@keyframes reveal{ to{ opacity:1; transform:none; } }
.hero__art{ opacity:0; animation:reveal 1.1s var(--ease) .5s forwards; }

/* ---------- 17. АДАПТИВ (планшеты и телефоны) ---------- */
@media (max-width:1080px){
  .flag__box{ grid-template-columns:1fr; padding:2.4rem 1.8rem; gap:2.2rem; }
  .flag__art{ max-width:440px; margin-inline:auto; width:100%; }
  .why__grid{ grid-template-columns:repeat(2,1fr); }
  .cat__grid{ grid-template-columns:repeat(2,1fr); }
  .models{ grid-template-columns:repeat(2,1fr); }
  .rev__grid{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav .btn--sm{ display:none; }
  .burger{ display:block; margin-left:auto; }
  .mobile-menu{ display:flex; }

  .hero{ padding:7rem 0 2rem; }
  .hero__in{ grid-template-columns:1fr; gap:2rem; }
  .hero__art{ order:-1; max-width:520px; margin-inline:auto; }

  .line__steps{ grid-template-columns:repeat(2,1fr); }

  .contacts__in{ grid-template-columns:1fr; gap:2.5rem; }
  .works__grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:210px; }
  .work--big{ grid-column:span 2; grid-row:span 1; }
  .workshop__hint{ padding-right:0; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .line__steps{ grid-template-columns:1fr; }
  /* на узком экране длинные кнопки переносятся, а не распирают блок */
  .btn{ white-space:normal; text-align:center; justify-content:center; }
  .btn--big{ font-size:1rem; padding:1rem 1.3rem; width:100%; }
  .flag{ padding:3rem 0 1rem; }
  .flag__box{ padding:1.8rem 1.2rem; border-radius:var(--radius); }
  .flag__lead{ font-size:1rem; }
  .why__grid{ grid-template-columns:1fr; }
  .proc__steps{ grid-template-columns:1fr; }
  .cat__grid{ grid-template-columns:1fr; }
  .models{ grid-template-columns:1fr; }
  .works__grid{ grid-template-columns:1fr; grid-auto-rows:210px; }
  .work--big{ grid-column:span 1; }
  .hero__facts{ gap:1.4rem; }
  .fact b{ font-size:1.6rem; }
  .wa{ height:56px; padding:0 16px; }
  .wa__label{ display:none; }
  .why,.proc,.catalog,.contacts,.reviews{ padding:4rem 0; }
  .works{ padding:3rem 0 4rem; }
}

/* ---------- 18. ЕСЛИ ЧЕЛОВЕК ОТКЛЮЧИЛ АНИМАЦИИ В СИСТЕМЕ ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .part,.chip,.bp,.bp-text,.puff{ opacity:1 !important; }
  .anim,.reveal,.hero__art{ opacity:1 !important; transform:none !important; }
}