/* ═══════════════════════════════════════════════
   LISOVSKA · V8 «БУТІК» (за макетом SIWOOD)
   Тепло-коричневе тло, скруглені картки-секції,
   caps-гротеск, цифри навколо крісла.
   ═══════════════════════════════════════════════ */
:root{
  --page:#3B3430;
  --card:#191512;
  --card2:#211C18;
  --ink:#EFEBE5;
  --ink-dim:rgba(239,235,229,.55);
  --line:rgba(239,235,229,.16);
  --sans:'Manrope',system-ui,sans-serif;
  --r:26px;
  --ease:cubic-bezier(.22,.61,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--page);color:var(--ink);font-family:var(--sans);font-weight:300;
  font-size:15px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  padding:0 26px 26px;
}
img{display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ── верхні лого ── */
.top{display:flex;justify-content:space-between;align-items:center;padding:30px 14px 26px}
.top__brand{font-size:13px;font-weight:700;letter-spacing:.18em;line-height:1.3}
.top__logo{font-size:34px;font-weight:800;letter-spacing:.14em}

/* ── картка-секція ── */
.card{border-radius:var(--r);background:var(--card);overflow:hidden;margin-bottom:26px}

/* ── HERO ── */
.hero{position:relative;min-height:88svh;display:flex;flex-direction:column}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(15,12,10,.55),transparent 30%,transparent 60%,rgba(15,12,10,.72))}
.hero__bar{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:26px 34px;font-size:12px;letter-spacing:.14em;
}
.hero__menu{display:inline-flex;align-items:center;gap:12px;letter-spacing:.2em;font-size:12px}
.hero__menu i{width:26px;height:9px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);display:block}
.hero__mark{font-weight:800;font-size:19px;letter-spacing:.16em}
.hero__soc{display:flex;gap:22px;color:var(--ink);font-size:11.5px;letter-spacing:.12em}
.hero__soc span{color:var(--ink-dim)}
.hero__nav{
  position:relative;z-index:2;display:none;gap:26px;padding:0 34px 10px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
}
.hero__nav.is-open{display:flex}
.hero__h1{
  position:relative;z-index:2;text-align:center;margin:auto 0;padding:40px 20px;
  text-shadow:0 2px 30px rgba(0,0,0,.45);
}
.hero__h1 b{display:block;font-weight:800;font-size:clamp(40px,6.8vw,92px);letter-spacing:.02em;line-height:1.04}
.hero__h1 span{display:block;font-weight:300;font-size:clamp(26px,4.5vw,60px);letter-spacing:.06em;line-height:1.1}
.hero__foot{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;padding:0 34px 30px;
}
.hero__foot p{font-size:13px;color:var(--ink);opacity:.9;line-height:1.55}
.hero__arr{justify-self:center;font-size:22px;opacity:.8;animation:arr 1.8s ease-in-out infinite}
@keyframes arr{50%{transform:translateY(6px)}}
.hero__cat{
  justify-self:end;display:inline-flex;align-items:center;justify-content:center;
  min-width:min(360px,30vw);padding:16px 30px;border:1px solid var(--line);
  background:rgba(25,21,18,.45);backdrop-filter:blur(6px);
  font-size:12px;letter-spacing:.28em;transition:all .3s;
}
.hero__cat:hover{background:var(--ink);color:var(--card)}

/* ── РІШЕННЯ ── */
.sol{display:grid;grid-template-columns:.85fr 1.6fr;gap:30px;padding:56px 40px;background:var(--card2)}
.sol__left h2{font-weight:300;font-size:clamp(24px,2.6vw,38px);letter-spacing:.08em;line-height:1.25;margin-bottom:34px}
.sol__cat{
  display:inline-flex;padding:15px 42px;border:1px solid var(--line);font-size:12px;letter-spacing:.28em;
  background:rgba(239,235,229,.05);transition:all .3s;
}
.sol__cat:hover{background:var(--ink);color:var(--card)}
.sol__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.scol{position:relative;margin:0;border-radius:14px;overflow:hidden;min-height:520px}
.scol img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.scol:hover img{transform:scale(1.05)}
.scol::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(15,12,10,.78))}
.scol__body{position:absolute;left:22px;right:22px;bottom:24px;z-index:2}
.scol__body i{display:block;width:1px;height:64px;background:var(--ink);opacity:.7;margin-bottom:14px}
.scol__body b{font-weight:400;font-size:14px;letter-spacing:.1em;display:block;margin-bottom:8px}
.scol__body h3{font-weight:400;font-size:19px;line-height:1.3;margin-bottom:10px}
.scol__body p{font-size:12.5px;color:var(--ink-dim);margin-bottom:14px}
.scol__more{font-size:11px;letter-spacing:.26em;border-bottom:1px solid var(--line);padding-bottom:3px}
.scol__body--low i{height:40px}

/* ── ЦИФРИ + КРІСЛО ── */
.stats{padding:70px 44px;background:var(--card)}
.stats__grid{
  display:grid;grid-template-columns:1.1fr 1.3fr 1fr 1fr;grid-template-rows:auto auto;
  gap:44px 30px;align-items:start;
}
.stats__txt{grid-column:1;grid-row:1/3;font-size:clamp(16px,1.5vw,20px);line-height:1.65;max-width:340px;align-self:center}
.stats__txt em{font-style:normal;color:var(--ink-dim)}
.stats__txt b{font-weight:700}
.stats__chair{grid-column:2;grid-row:1/3;margin:0;border-radius:16px;overflow:hidden;align-self:center}
.stats__chair img{width:100%;aspect-ratio:1/1.05;object-fit:cover}
.stnum b,.stnum i{font-weight:300;font-size:clamp(44px,4.6vw,72px);letter-spacing:-.02em;font-style:normal;display:inline}
.stnum span{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-dim);border-top:1px solid var(--line);padding-top:10px;max-width:200px}
.stnum--a{grid-column:3;grid-row:1}
.stnum--b{grid-column:4;grid-row:1}
.stnum--c{grid-column:3;grid-row:2}
.stnum--d{grid-column:4;grid-row:2}
.stnum--e,.stnum--f{grid-row:3}
.stnum--e{grid-column:1}
.stnum--f{grid-column:2}

/* ── АТМОСФЕРА ── */
.atm{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;padding:80px 44px;background:var(--card2)}
.atm__h{font-weight:300;font-size:clamp(26px,3.4vw,52px);letter-spacing:.05em;line-height:1.2}
.atm__h b{font-weight:800}
.atm__h span{color:var(--ink-dim)}
.atm__txt{display:grid;gap:22px;align-content:center}
.atm__txt p{font-size:14px;color:var(--ink-dim);max-width:480px}

/* ── CTA ── */
.cta{padding:70px 44px;text-align:center;background:var(--card)}
.cta h2{font-weight:300;font-size:clamp(26px,3vw,44px);letter-spacing:.06em;margin-bottom:34px}
.cta form{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta input{
  background:transparent;border:1px solid var(--line);color:var(--ink);
  padding:16px 18px;font:inherit;font-size:14px;min-width:260px;
}
.cta input:focus{outline:none;border-color:var(--ink-dim)}
.cta input.is-err{border-color:#a44}
.cta__btn{
  padding:16px 40px;border:1px solid var(--ink);letter-spacing:.22em;font-size:12px;transition:all .3s;
}
.cta__btn:hover{background:var(--ink);color:var(--card)}
.cta__ok{margin-top:20px;color:#9FB8A8}

.foot{display:flex;justify-content:space-between;padding:10px 14px 0;font-size:11.5px;letter-spacing:.18em;color:rgba(239,235,229,.7);text-transform:uppercase}

/* ── REVEAL ── */
.js .reveal{opacity:0;transform:translateY(26px)}

@media(max-width:1100px){
  .sol{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .stats__txt{grid-column:1/3;grid-row:auto}
  .stats__chair{grid-column:1/3;grid-row:auto}
  .stnum{grid-column:auto!important;grid-row:auto!important}
  .atm{grid-template-columns:1fr}
}
@media(max-width:760px){
  body{padding:0 10px 10px}
  .top__logo{font-size:24px}
  .hero__bar{padding:18px}
  .hero__soc span{display:none}
  .hero__foot{grid-template-columns:1fr;gap:14px;padding:0 18px 22px}
  .hero__cat{justify-self:start;min-width:0;width:100%}
  .sol{padding:40px 18px}
  .sol__cols{grid-template-columns:1fr}
  .scol{min-height:420px}
  .stats{padding:50px 18px}
  .atm{padding:56px 18px}
  .cta{padding:56px 18px}
  .cta input{min-width:0;width:100%}
  .cta form{flex-direction:column}
}