/* ================= Base / Theme ================= */
:root{
  --primary:#8B5E3C;        /* коричневий */
  --primary-600:#6E452F;    /* темніший */
  --ink:#0f172a;
  --muted:#64748B;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --ring:rgba(139,94,60,.25);
  --max:1200px;
}

*,
*::before,
*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  font-size:16px;
}
a{ color:inherit; text-decoration:none }
a:visited{ color:inherit }
img{ max-width:100%; display:block }
.container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 20px }

/* ================= Header ================= */
.site-header{
  position:relative;
  background:#fff;
  border-bottom:1px solid rgba(2,8,23,.06);
  z-index:30;
}
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:16px 0 }

.brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px }
.brand-logo{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background: radial-gradient(120% 120% at 20% 20%, #E6D0BC, var(--primary));
  color:#fff; font-weight:800; box-shadow:0 8px 18px rgba(139,94,60,.35);
}
.brand small{ display:block; font-size:11px; color:var(--muted); margin-top:-2px }

/* Top nav */
.nav{ display:flex; align-items:center; gap:26px; font-weight:600 }
.nav a{
  position:relative;
  color:#334155;
  padding:8px 2px;
  transition:color .2s ease;
}
.nav a:hover{ color:var(--primary) }
/* плавне підкреслення */
.nav a::after{
  content:"";
  position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background:var(--primary);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nav a:hover::after{ transform:scaleX(1) }


/* Кнопка: прозора завжди, заповнення тільки на hover */
.btn{
  background: transparent;                 /* <— головне */
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  transition:
    background-color .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    transform .05s ease;
}
.btn:hover{
             /* заливка тільки під час наведеня */
  color: #fff;
  box-shadow: 0 10px 22px var(--ring);
  border-color: var(--primary);
}
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline: 3px solid rgba(139,94,60,.35); outline-offset: 2px; }

     /* <— вимикає underline-анімацію для кнопки */


/* ================= Burger & Drawer ================= */
.hamburger{ display:none }
.hamburger button{
  width:42px; height:42px; border-radius:12px; border:1px solid rgba(2,8,23,.08);
  background:#fff; display:grid; place-items:center; cursor:pointer; transition:.2s;
}
.hamburger button:hover{ box-shadow:0 10px 22px rgba(2,8,23,.08) }
.hamburger .bar{ width:22px; height:2px; background:#0f172a; position:relative; transition:.3s }
.hamburger .bar:before,
.hamburger .bar:after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:#0f172a; transition:.3s
}
.hamburger .bar:before{ top:-6px } .hamburger .bar:after{ top:6px }
.is-open .bar{ background:transparent }
.is-open .bar:before{ transform:translateY(6px) rotate(45deg) }
.is-open .bar:after{ transform:translateY(-6px) rotate(-45deg) }

.backdrop{
  position:fixed; inset:0; background:rgba(2,8,23,.45);
  opacity:0; pointer-events:none; transition:.25s; z-index:45;
}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(86vw,360px);
  background:#fff; box-shadow:-24px 0 50px rgba(2,8,23,.18);
  transform:translateX(100%); transition:transform .28s ease; z-index:50;
  display:flex; flex-direction:column; padding:20px 22px 22px;
}
.drawer-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px }
.drawer-title{ font-weight:800 }
.drawer-close{
  margin-left:auto; width:40px; height:40px; border-radius:10px;
  border:1px solid rgba(2,8,23,.08); background:#fff; cursor:pointer;
  display:grid; place-items:center; transition:.2s;
}
.drawer-close:hover{ box-shadow:0 10px 22px rgba(2,8,23,.08) }
.drawer-close svg{ display:block }

.drawer-nav{ display:flex; flex-direction:column; gap:6px; padding-top:10px }
.drawer-nav a{
  position:relative; padding:12px 4px; font-weight:800; color:#334155;
}
.drawer-nav a:hover{ color:var(--primary) }
.drawer-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}


.btn-full{ width:100%; margin-top:auto; text-align: center;}

body.menu-open{ overflow:hidden }
body.menu-open .backdrop{ opacity:1; pointer-events:auto }
body.menu-open .drawer{ transform:translateX(0) }

/* ================= Responsive ================= */
@media (max-width:1024px){
  .nav{ display:none }
  .hamburger{ display:block }
}
@media (min-width:1025px){
  .drawer,.backdrop{ display:none!important }
}

/* ===== HERO ===== */
.hero-intro{
  position:relative; isolation:isolate;
  min-height:72vh; display:flex; align-items:flex-end;
  padding:84px 0 28px; overflow:hidden; background:#ddd;
}
.hero-intro::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("https://images.unsplash.com/photo-1494526585095-c41746248156?auto=format&fit=crop&w=2000&q=80")
             center/cover no-repeat;
  filter:contrast(1.05) saturate(1.02);
  transform:scale(1.02);
}
.hero-intro::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,.35) 42%,
    rgba(255,255,255,0) 68%,
    #fff 100%);
}

/* header area inside hero */
.hero-head{ text-align:center; color:#fff; margin:0 0 28px }
.hero-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:18px;
  color:#F1EDE8; font-weight:700; letter-spacing:.08em;
}
.squiggle{ width:64px; height:10px; opacity:.95 }

.hero-title{
  font-size:clamp(36px,6vw,86px); line-height:1.02;
  margin:10px 0 8px; font-weight:800; letter-spacing:.2px; color:#fff;
}
.hero-sub{
  font-size:clamp(14px,2.2vw,18px); color:#f3f4f6; max-width:820px; margin:0 auto;
}

/* round 'see all' button */
.seeall{
  position:absolute; left:50%; top:48%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:999px; background:#fff; color:#0f172a;
  display:grid; place-items:center; font-size:12px; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; box-shadow:0 14px 34px rgba(0,0,0,.15);
  border:1px solid rgba(2,8,23,.08);
}
.seeall:hover{ color:#fff; background:var(--primary); box-shadow:0 16px 34px var(--ring) }

/* cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.card{
  background:#fff; border-radius:20px; padding:12px; box-shadow:0 10px 30px rgba(2,8,23,.08);
  border:1px solid rgba(2,8,23,.06); transition:.25s; transform:translateY(0);
}
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(2,8,23,.12); border-color:rgba(139,94,60,.28) }
.card-figure{ border-radius:14px; overflow:hidden; aspect-ratio:4/3; background:#eee }
.card h3{ margin:12px 6px 6px; font-size:18px; display:flex; align-items:center; gap:8px }
.card h3 .arrow{ font-size:18px; transform:translateY(1px) }
.card p{ margin:0 6px 8px; color:#64748B; font-size:14px }

/* scallop */
.scallop{ position:absolute; left:0; right:0; bottom:-1px }

/* responsive */
@media (max-width:1024px){
  .cards{ grid-template-columns:1fr 1fr }
  .seeall{ top:45% }
}
@media (max-width:640px){
  .hero-intro{ padding:92px 0 24px }
  .cards{ grid-template-columns:1fr }
  .seeall{ top:42%; width:70px; height:70px; font-size:11px }
}

/* ===== QUALITY / REASONS ===== */
.quality{  padding:68px 0 }
.quality-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:38px; align-items:start }

/* Left visual with slices */
.quality-visual{ --radius:16px; --img-pos:center; }
.quality-visual .q-main,
.quality-visual .q-strip{
  background: var(--img) var(--img-pos)/cover no-repeat;
  border:1px solid rgba(2,8,23,.06);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(2,8,23,.08);
}
.quality-visual .q-main{ aspect-ratio: 4/4.2; }
.quality-visual .q-strip{
  height:56px; margin-top:12px; filter: blur(3.5px) saturate(.95);
  opacity:.95;
}
.quality-visual .q-strip.s2{ opacity:.9 }
.quality-visual .q-strip.s3{ opacity:.85 }

/* Right column */
.quality-title{
  margin:6px 0 10px;
  font-size:clamp(20px,2.8vw,26px);
  font-weight:800;
  color:#2b2b2b;
}

.qa{ border-top:1px solid rgba(2,8,23,.08) }
.qa:last-child{ border-bottom:1px solid rgba(2,8,23,.08) }

.qa-toggle{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  padding:16px 6px;
  background:#0000;
  border:0;
  cursor:pointer;
  text-align:left;
}
.qa-num{
  font-weight:700; color:#9A7A5E; letter-spacing:.06em;
}
.qa-title{ font-weight:700; color:#222 }
.qa-icon{
  width:22px; height:22px; position:relative; border:1px solid rgba(2,8,23,.12);
  border-radius:8px;
}
.qa-icon::before, .qa-icon::after{
  content:""; position:absolute; left:50%; top:50%;
  width:12px; height:2px; background:var(--primary); transform:translate(-50%,-50%);
  transition:.2s ease;
}
.qa-icon::after{ transform:translate(-50%,-50%) rotate(90deg) } /* верт. риска => плюс */

.qa-panel{
  overflow:hidden; max-height:0; transition:max-height .28s ease;
  color:var(--muted); padding:0 6px 0 44px;
}
.qa.open .qa-panel{ max-height:220px; padding-bottom:14px }
.qa.open .qa-icon::after{ transform:translate(-50%,-50%) rotate(0deg) scaleX(0) } /* мінус */

.qa-toggle:hover .qa-title{ color:var(--primary) }
.qa-toggle:focus-visible{ outline:3px solid rgba(139,94,60,.35); outline-offset:2px }

/* Responsive */
@media (max-width:1024px){
  .quality-grid{ grid-template-columns:1fr; gap:26px }
  .quality-visual .q-main{ aspect-ratio:16/10 }
}

/* ===== ABOUT ===== */
.about{ background:#fff; padding:72px 0 }
.about-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center;
}

.about-visual{ position:relative; max-width:560px; margin:0 auto }
.about-main{
  border-radius:20px; overflow:hidden; box-shadow:0 12px 30px rgba(2,8,23,.10);
  border:1px solid rgba(2,8,23,.06);
}
.about-main img{ width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover }
.about-badge{
  position:absolute; left:14px; top:14px;
  background:var(--primary); color:#fff; padding:8px 12px; border-radius:999px;
  font-weight:800; font-size:13px; letter-spacing:.02em;
  box-shadow:0 10px 20px var(--ring);
}

.about-float{
  position:absolute; right:-24px; bottom:-24px; width:min(52%,280px);
  border-radius:16px; overflow:hidden; border:1px solid rgba(2,8,23,.06);
  box-shadow:0 14px 34px rgba(2,8,23,.14); background:#fff;
}
.about-float img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3 }

/* Right copy */
.about-title{ font-size:clamp(24px,3.6vw,36px); margin:4px 0 8px; font-weight:800 }
.about-text{ color:#475569; margin-bottom:14px }

.about-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.about-list li{
  display:flex; align-items:flex-start; gap:10px; color:#2b2b2b;
}
.about-list svg{
  flex:0 0 18px; margin-top:4px; color:var(--primary);
}

.about-actions{ display:flex; align-items:center; gap:18px; margin:16px 0 4px }
.about-link{
  position:relative; font-weight:800; color:#334155; padding-bottom:4px;
}
.about-link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.about-link:hover{ color:var(--primary) }
.about-link:hover::after{ transform:scaleX(1) }

/* Stats */
.about-stats{
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(2,8,23,.08);
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.stat{ text-align:left }
.num{ font-size:clamp(20px,3.2vw,28px); font-weight:800; color:var(--primary); line-height:1.1 }
.label{ color:#64748B }

/* Responsive */
@media (max-width:1024px){
  .about-grid{ grid-template-columns:1fr; gap:28px }
  .about-float{ right:-14px; bottom:-14px }
}
@media (max-width:640px){
  .about{ padding:56px 0 }
  .about-actions{ flex-wrap:wrap }
  .about-stats{ grid-template-columns:1fr 1fr; }
}

/* ===== ADVANTAGES ===== */
.advantages{  padding:72px 0 }
.adv-head{ text-align:center; max-width:840px; margin:0 auto 26px }
.adv-eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.08em; color:#9A7A5E;
  background:rgba(139,94,60,.10); padding:6px 10px; border-radius:999px; font-size:12px;
}
.adv-title{ font-size:clamp(24px,3.6vw,36px); margin:10px 0 6px; font-weight:800; color:#2b2b2b }
.adv-sub{ color:#475569; margin:0 auto }

.adv-grid{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.adv-card{
  background:#fff; border:1px solid rgba(2,8,23,.06); border-radius:18px;
  padding:18px; box-shadow:0 10px 26px rgba(2,8,23,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.adv-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(2,8,23,.12);
  border-color:rgba(139,94,60,.28);
}
.adv-ico{
  width:52px; height:52px; border-radius:14px;
  background:rgba(139,94,60,.10); color:var(--primary);
  display:grid; place-items:center; margin-bottom:12px;
}
.adv-ico svg{ width:28px; height:28px }
.adv-card h3{ margin:2px 0 6px; font-size:18px; font-weight:800; color:#222 }
.adv-card p{ color:#64748B; margin:0 }

.adv-pillbar{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:20px; justify-content:center;
}
.pill{
  background:#fff; border:1px solid rgba(2,8,23,.06); color:#334155;
  padding:8px 12px; border-radius:999px; box-shadow:0 6px 16px rgba(2,8,23,.06);
}
.pill strong{ color:var(--primary) }

/* Responsive */
@media (max-width:1024px){
  .adv-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px){
  .advantages{ padding:56px 0 }
  .adv-grid{ grid-template-columns:1fr }
}

/* ===== TEAM (no background) ===== */
.section{ padding:72px 0; background:transparent }
.team-head{ text-align:center; max-width:820px; margin:0 auto 24px }
.team-eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.08em; color:#9A7A5E;
  background:rgba(139,94,60,.10); padding:6px 10px; border-radius:999px; font-size:12px;
}
.team-title{ font-size:clamp(24px,3.6vw,36px); margin:10px 0 6px; font-weight:800; color:#2b2b2b }
.team-sub{ color:#475569; margin:0 auto }

.team-grid{
  margin-top:22px;
  display:grid; gap:18px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.member{
  background:#fff; border:1px solid rgba(2,8,23,.06); border-radius:18px;
  box-shadow:0 10px 26px rgba(2,8,23,.06); overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.member:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(2,8,23,.12);
  border-color:rgba(139,94,60,.28);
}
.member-media{ overflow:hidden }
.team-photo{
  width:100%; height:auto; display:block; aspect-ratio:4/5; object-fit:cover;
  transform:scale(1); transition:transform .35s ease;
}
.member:hover .team-photo{ transform:scale(1.04) }

.member-body{ padding:14px 16px 16px }
.member-name{ margin:2px 0 4px; font-size:18px; font-weight:800; color:#222 }
.member-role{
  display:inline-block; font-size:12px; font-weight:800; color:var(--primary);
  letter-spacing:.02em; margin-bottom:8px;
}
.member-bio{ color:#64748B; margin:0 }

/* Responsive */
@media (max-width:1024px){
  .team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px){
  .section{ padding:56px 0 }
  .team-grid{ grid-template-columns:1fr }
}
/* ===== FAQ (no background) ===== */
.faq-head{ text-align:center; max-width:820px; margin:0 auto 20px }
.faq-eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.08em; color:#9A7A5E;
  background:rgba(139,94,60,.10); padding:6px 10px; border-radius:999px; font-size:12px;
}
.faq-title{ font-size:clamp(24px,3.6vw,36px); margin:10px 0 6px; font-weight:800; color:#2b2b2b }
.faq-sub{ color:#475569; margin:0 auto }
.faq-link{ color:var(--primary); font-weight:800; position:relative; padding-bottom:2px }
.faq-link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.faq-link:hover::after{ transform:scaleX(1) }

/* spacing for the accordion inside FAQ */
.faq-acc{ margin-top:16px }

/* ===== CONTACT ===== */
.contact-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:36px; align-items:start;
}
.contact-title{ font-size:clamp(22px,3vw,28px); font-weight:800; margin:0 0 6px; color:#2b2b2b }
.contact-sub{ color:#475569; margin:0 0 12px }

.contact-cards{ display:grid; gap:10px; margin:10px 0 14px }
.contact-card{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px; border:1px solid rgba(2,8,23,.06); border-radius:14px;
  background:#fff; box-shadow:0 8px 18px rgba(2,8,23,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.contact-card:hover{ transform:translateY(-2px); box-shadow:0 16px 26px rgba(2,8,23,.10); border-color:rgba(139,94,60,.28) }
.contact-card .icon{
  flex:0 0 44px; width:44px; height:44px; border-radius:12px;
  background:rgba(139,94,60,.10); color:var(--primary);
  display:grid; place-items:center;
}
.contact-card .icon svg{ width:24px; height:24px }
.contact-card .meta strong{ display:block; font-weight:800; color:#222 }
.contact-card .meta span{ display:block; color:#64748B; font-size:14px }

.map-wrap{ border-radius:16px; overflow:hidden; border:1px solid rgba(2,8,23,.06); box-shadow:0 10px 24px rgba(2,8,23,.08) }
.map-wrap iframe{ width:100%; aspect-ratio:16/9; border:0 }

/* Form */
.contact-form{ background:#fff; border:1px solid rgba(2,8,23,.06); border-radius:18px; box-shadow:0 10px 26px rgba(2,8,23,.06); padding:18px }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }

.field{ display:flex; flex-direction:column; gap:6px }
.field-full{ grid-column:1/-1 }
.field label{ font-weight:700; color:#1f2937 }
.input, .select, .textarea, .field input[type="text"], .field input[type="tel"], .field input[type="email"], .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(2,8,23,.12); background:#fff; color:#111827;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ resize:vertical }
.field input::placeholder, .field textarea::placeholder{ color:#94a3b8 }

.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(139,94,60,.15);
}
.check{ display:flex; align-items:flex-start; gap:8px; color:#334155 }
.check input{ margin-top:3px }

.actions{ display:flex; align-items:center; gap:12px }
.form-status{ font-size:14px; color:#64748B }

.error{ color:#b91c1c; font-size:12px; min-height:14px; margin:0 }

/* Responsive */
@media (max-width:1024px){
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .form-grid{ grid-template-columns:1fr; }
  .contact-form{ padding:14px }
}

/* ===== FOOTER ===== */
.site-footer{
  border-top:1px solid rgba(2,8,23,.08);
  background:#fff;
  color:#334155;
}
.footer-grid{
  display:grid; gap:24px; padding:32px 0;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
}
.footer-brand .brand{ display:flex; align-items:center; gap:12px; font-weight:800 }
.footer-desc{ margin:10px 0 0; color:#64748B }

.footer-title{ font-weight:800; color:#2b2b2b; margin:4px 0 10px }
.footer-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.footer-list a{
  position:relative; color:#334155; text-decoration:none; padding-bottom:2px;
  transition:color .2s ease;
}
.footer-list a:hover{ color:var(--primary) }
/* акуратне підкреслення на hover */
.footer-list a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.footer-list a:hover::after{ transform:scaleX(1) }

.footer-bottom{
  border-top:1px solid rgba(2,8,23,.08);
  background:#fff;
}
.footer-bottom-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; font-size:14px; color:#64748B;
}
.legal-inline{ display:flex; gap:16px }
.legal-inline a{
  position:relative; color:#64748B; text-decoration:none; padding-bottom:2px;
  transition:color .2s ease;
}
.legal-inline a:hover{ color:var(--primary) }
.legal-inline a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.legal-inline a:hover::after{ transform:scaleX(1) }

/* Responsive */
@media (max-width:1024px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom-inner{ flex-direction:column; gap:8px; text-align:center }
}

/* ===== COOKIE BANNER ===== */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:#fff; border-top:1px solid rgba(2,8,23,.12);
  box-shadow:0 -16px 40px rgba(2,8,23,.12);
  transform:translateY(110%); opacity:0; transition:transform .35s ease, opacity .35s ease;
}
.cookie-banner.show{ transform:translateY(0); opacity:1 }

.cookie-inner{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding:18px 20px;
}
.cookie-text{ max-width:720px }
.cookie-title{ margin:0 0 4px; font-weight:800; color:#2b2b2b }
.cookie-desc{ margin:0 0 6px; color:#475569 }
.cookie-links a{
  position:relative; color:#334155; padding-bottom:2px; text-decoration:none; transition:color .2s ease;
}
.cookie-links a:hover{ color:var(--primary) }
.cookie-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.cookie-links a:hover::after{ transform:scaleX(1) }

.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap }
.btn-outline{
  background:transparent; border:1.5px solid var(--primary); color:var(--primary);
}
.btn-outline:hover{ background:var(--primary); color:#fff; box-shadow:0 10px 22px var(--ring) }
.btn-ghost{
  background:transparent; border:1.5px solid transparent; color:#334155;
}
.btn-ghost:hover{ border-color:rgba(2,8,23,.12) }

/* Panel */
.cookie-panel{ border-top:1px solid rgba(2,8,23,.08); padding:12px 0 18px; background:#fff }
.cookie-row{ padding:8px 20px }
.cookie-switch{ display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none }
.cookie-switch input{ display:none }
.cookie-switch .slider{
  width:44px; height:26px; border:1px solid rgba(2,8,23,.14); border-radius:26px; position:relative; background:#f1f5f9; transition:.2s;
}
.cookie-switch .slider::after{
  content:""; position:absolute; top:50%; left:3px; width:20px; height:20px; border-radius:50%;
  transform:translateY(-50%); background:#fff; box-shadow:0 1px 3px rgba(2,8,23,.25); transition:.2s;
}
.cookie-switch input:checked + .slider{ background:rgba(139,94,60,.20); border-color:var(--primary) }
.cookie-switch input:checked + .slider::after{ left:calc(100% - 23px); background:var(--primary) }
.cookie-switch .label{ color:#334155 }

.cookie-panel-actions{
  display:flex; gap:10px; justify-content:flex-end; padding:8px 20px 0;
}

/* Responsive */
@media (max-width:900px){
  .cookie-inner{ flex-direction:column; align-items:stretch }
  .cookie-actions{ justify-content:flex-end }
}
@media (max-width:640px){
  .cookie-inner{ padding:16px }
  .cookie-row{ padding:8px 16px }
  .cookie-panel-actions{ padding:8px 16px 0 }
}
/* ===== ABOUT HERO (page) ===== */
.ah-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:40px; align-items:center;
}

/* media (left) */
.ah-media{ position:relative; max-width:640px }
.ah-main{
  border-radius:22px; overflow:hidden;
  border:1px solid rgba(2,8,23,.06);
  box-shadow:0 14px 34px rgba(2,8,23,.12);
}
.ah-main img{
  width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover;
}
.ah-badge{
  position:absolute; left:16px; top:16px;
  background:var(--primary); color:#fff; padding:8px 12px;
  border-radius:999px; font-weight:800; font-size:13px; letter-spacing:.02em;
  box-shadow:0 10px 20px var(--ring);
}

/* floating chips */
.ah-chip{
  position:absolute; border-radius:16px; overflow:hidden;
  border:1px solid rgba(2,8,23,.06);
  box-shadow:0 12px 28px rgba(2,8,23,.14); background:#fff;
  transition:transform .25s ease, box-shadow .25s ease;
}
.ah-chip img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3 }
.ah-chip-1{ right:-28px; bottom:-28px; width:min(48%, 280px); transform:rotate(1.5deg) }
.ah-chip-2{ left:-24px; top:18%; width:min(38%, 220px); transform:rotate(-2deg) }
.ah-chip:hover{ transform:translateY(-3px) rotate(0deg); box-shadow:0 18px 36px rgba(2,8,23,.18) }

/* copy (right) */
.ah-eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.08em; color:#9A7A5E;
  background:rgba(139,94,60,.10); padding:6px 10px; border-radius:999px; font-size:12px;
}
.ah-title{ font-size:clamp(26px,3.8vw,40px); margin:10px 0 6px; font-weight:800; color:#2b2b2b }
.ah-lead{ color:#475569; margin:0 0 12px }

.ah-list{ list-style:none; padding:0; margin:12px 0; display:grid; gap:10px }
.ah-list li{ display:flex; align-items:flex-start; gap:10px; color:#2b2b2b }
.ah-list svg{ flex:0 0 18px; margin-top:4px; color:var(--primary) }

.ah-cta{ display:flex; align-items:center; gap:18px; margin:14px 0 6px }
.ah-link{
  position:relative; font-weight:800; color:#334155; padding-bottom:4px; text-decoration:none;
  transition:color .2s ease;
}
.ah-link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.ah-link:hover{ color:var(--primary) }
.ah-link:hover::after{ transform:scaleX(1) }

/* stats */
.ah-stats{
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(2,8,23,.08);
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.ah-stat .num{ font-size:clamp(20px,3.2vw,28px); font-weight:800; color:var(--primary); line-height:1.1 }
.ah-stat .label{ color:#64748B }

/* responsive */
@media (max-width:1100px){
  .ah-chip-2{ display:none } /* трохи спрощуємо композицію на планшеті */
}
@media (max-width:1024px){
  .ah-grid{ grid-template-columns:1fr; gap:28px }
  .ah-media{ margin:0 auto }
  .ah-chip-1{ right:-16px; bottom:-16px; width:min(56%, 300px) }
}
@media (max-width:640px){
  .section{ padding:56px 0 }
  .ah-chip-1{ position:static; width:100%; transform:none; margin-top:12px }
  .ah-chip-1 img{ aspect-ratio:16/10 }
}

/* ===== HISTORY / TIMELINE (no background) ===== */
.history-head{ text-align:center; max-width:820px; margin:0 auto 22px }
.history-eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.08em; color:#9A7A5E;
  background:rgba(139,94,60,.10); padding:6px 10px; border-radius:999px; font-size:12px;
}
.history-title{ font-size:clamp(24px,3.6vw,36px); margin:10px 0 6px; font-weight:800; color:#2b2b2b }
.history-sub{ color:#475569; margin:0 }

/* vertical timeline */
.tl{
  position:relative;
  margin:22px 0 0; padding-left:26px; list-style:none;
  border-left:2px solid rgba(2,8,23,.10);
}
.tl-item{ position:relative; margin:0 0 18px }
.tl-marker{
  position:absolute; left:-9px; top:8px; width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px solid var(--primary);
  box-shadow:0 2px 6px rgba(2,8,23,.12);
}
.tl-card{
  background:#fff; border:1px solid rgba(2,8,23,.06); border-radius:16px;
  padding:14px 14px 12px; box-shadow:0 8px 18px rgba(2,8,23,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tl-item:hover .tl-card{
  transform:translateY(-2px);
  box-shadow:0 16px 28px rgba(2,8,23,.12);
  border-color:rgba(139,94,60,.28);
}

.tl-year{
  display:inline-block; font-weight:800; color:#fff; background:var(--primary);
  padding:4px 10px; border-radius:999px; font-size:12px; letter-spacing:.02em;
  box-shadow:0 8px 16px var(--ring);
}
.tl-heading{ margin:8px 0 4px; font-size:18px; font-weight:800; color:#222 }
.tl-card p{ margin:0; color:#64748B }

/* horizontal look on wide screens */
@media (min-width:1000px){
  .tl{ border-left:0; padding-left:0; display:grid; grid-template-columns:repeat(5,1fr); gap:14px }
  .tl-item{ margin:0 }
  .tl-card{ height:100% }
  .tl-marker{ display:none }
}
@media (max-width:640px){
  .section{ padding:56px 0 }
}
/* ===== TESTIMONIALS & STATS ===== */
.stories-grid{
  display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:start;
}
.stories-media{
  margin:0; border-radius:22px; overflow:hidden;
  border:1px solid rgba(2,8,23,.06); box-shadow:0 14px 34px rgba(2,8,23,.12);
}
.stories-media img{ width:100%; height:auto; display:block; aspect-ratio:16/12; object-fit:cover }

.stories-head{ margin-bottom:8px }
.stories-title{ margin:0 0 6px; font-weight:800; font-size:clamp(22px,3vw,28px); color:#2b2b2b }
.stories-sub{ margin:0; color:#475569 }

.t-card{
  position:relative; background:#fff;
  border:1px solid rgba(2,8,23,.06); border-radius:16px;
  box-shadow:0 10px 26px rgba(2,8,23,.06);
  padding:14px 16px; margin:10px 0;
}
.t-card .qico{ position:absolute; right:10px; top:10px; width:24px; height:24px; color:var(--primary) }
.t-card p{ margin:0 0 8px; color:#334155; font-style:italic }
.t-card footer{ display:flex; flex-direction:column; gap:2px }
.t-card footer strong{ font-weight:800; color:#222 }
.t-card footer span{ color:#64748B; font-size:14px }

/* Stats pills */
.stories-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:10px;
}
.s-pill{
  background:#fff; border:1px solid rgba(2,8,23,.06); border-radius:14px; padding:14px;
  text-align:center; box-shadow:0 10px 24px rgba(2,8,23,.06);
}
.s-pill .num{ font-weight:900; font-size:clamp(22px,3.4vw,28px); color:var(--primary); line-height:1.1 }
.s-pill .label{ color:#64748B; margin-top:4px }

/* Responsive */
@media (max-width:1024px){
  .stories-grid{ grid-template-columns:1fr; }
  .stories-media img{ aspect-ratio:16/10 }
}
@media (max-width:640px){
  .stories-stats{ grid-template-columns:1fr; }
}
/* ===== CATALOG ===== */
.cat-head{ text-align:center; max-width:860px; margin:0 auto 18px }
.cat-eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.08em; color:#9A7A5E;
  background:rgba(139,94,60,.10); padding:6px 10px; border-radius:999px; font-size:12px;
}
.cat-title{ font-size:clamp(24px,3.6vw,36px); margin:10px 0 6px; font-weight:800; color:#2b2b2b }
.cat-sub{ color:#475569; margin:0 }

.catalog-filters{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:16px 0 10px;
}
.pill-btn{
  background:#fff; border:1px solid rgba(2,8,23,.08); color:#334155; border-radius:999px;
  padding:8px 12px; font-weight:800; cursor:pointer; transition:.2s;
}
.pill-btn:hover{ color:var(--primary); border-color:rgba(139,94,60,.28) }
.pill-btn.active{ color:#fff; background:var(--primary); border-color:var(--primary); box-shadow:0 8px 16px var(--ring) }

.catalog-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:12px;
}
.product-card{
  background:#fff; border:1px solid rgba(2,8,23,.06); border-radius:18px; overflow:hidden;
  box-shadow:0 10px 26px rgba(2,8,23,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(2,8,23,.12); border-color:rgba(139,94,60,.28) }

.pc-media{ position:relative; overflow:hidden }
.pc-media img{ width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover; transform:scale(1); transition:transform .35s ease }
.product-card:hover .pc-media img{ transform:scale(1.04) }
.pc-badge{
  position:absolute; left:12px; top:12px; background:var(--primary); color:#fff; padding:6px 10px;
  border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.02em; box-shadow:0 8px 16px var(--ring);
}

.pc-body{ padding:14px 16px 16px }
.pc-title{ margin:2px 0 4px; font-size:18px; font-weight:800; color:#222 }
.pc-text{ color:#64748B; margin:0 0 8px }

.pc-spec{ list-style:none; padding:0; margin:0 0 10px; display:grid; gap:6px }
.pc-spec li{ display:flex; gap:8px; align-items:flex-start; color:#334155; font-size:14px }
.pc-spec svg{ width:18px; height:18px; flex:0 0 18px; color:var(--primary) }

.pc-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px }
.tag{ background:#fff; border:1px solid rgba(2,8,23,.08); border-radius:999px; padding:6px 10px; font-size:12px; color:#475569 }

.pc-actions{ display:flex; justify-content:space-between; align-items:center; gap:10px }
.pc-link{
  position:relative; color:#334155; font-weight:800; padding-bottom:2px; text-decoration:none; transition:color .2s ease;
}
.pc-link:hover{ color:var(--primary) }
.pc-link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.pc-link:hover::after{ transform:scaleX(1) }

/* Responsive */
@media (max-width:1024px){
  .catalog-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width:640px){
  .catalog-grid{ grid-template-columns:1fr }
}
/* ===== LEGAL (section) ===== */
.legal-head{ text-align:center; max-width:860px; margin:0 auto 18px }
.legal-eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.08em; color:#9A7A5E;
  background:rgba(139,94,60,.10); padding:6px 10px; border-radius:999px; font-size:12px;
}
.legal-title{ font-size:clamp(24px,3.6vw,36px); margin:10px 0 6px; font-weight:800; color:#2b2b2b }
.legal-meta{ color:#475569; margin:0 }

.legal-list{
  counter-reset: pol; list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px;
}
.legal-list > li{
  counter-increment: pol;
  background:#fff; border:1px solid rgba(2,8,23,.06); border-radius:16px;
  box-shadow:0 10px 24px rgba(2,8,23,.06);
  padding:14px 16px;
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.legal-list > li:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 28px rgba(2,8,23,.12);
  border-color:rgba(139,94,60,.28);
}
.legal-list > li::before{
  content: counter(pol, decimal-leading-zero);
  position:absolute; left:14px; top:-12px;
  width:42px; height:42px; border-radius:999px;
  background:var(--primary); color:#fff; display:grid; place-items:center;
  font-weight:900; letter-spacing:.02em; box-shadow:0 10px 20px var(--ring);
}
.legal-list h3{
  margin:10px 0 6px 0; padding-left:0; font-size:18px; font-weight:800; color:#222;
}
.legal-list p, .legal-list ul{ margin:0 0 6px 0; color:#64748B }
.legal-list ul{ padding-left:18px }
.legal-list a{
  position:relative; color:#334155; text-decoration:none; padding-bottom:2px; transition:color .2s ease;
}
.legal-list a:hover{ color:var(--primary) }
.legal-list a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.legal-list a:hover::after{ transform:scaleX(1) }

@media (max-width:640px){
  .legal-list > li::before{ left:10px; top:-14px; width:36px; height:36px; font-size:14px }
}
/* ===== COOKIES POLICY (alt design) ===== */
.cookies-head{ text-align:center; max-width:860px; margin:0 auto 16px }
.cookies-eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.08em; color:#9A7A5E;
  background:rgba(139,94,60,.10); padding:6px 10px; border-radius:999px; font-size:12px;
}
.cookies-title{ font-size:clamp(24px,3.6vw,36px); margin:10px 0 6px; font-weight:800; color:#2b2b2b }
.cookies-meta{ color:#475569; margin:0 }

/* legend chips */
.ck-legend{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px }
.ck-pill{
  border-radius:999px; padding:6px 10px; font-size:12px; font-weight:800;
  border:1px solid rgba(2,8,23,.08); background:#fff; color:#334155;
}
.ck-pill.essential{ background:rgba(139,94,60,.12); border-color:rgba(139,94,60,.25); color:var(--primary) }
.ck-pill.functional{ background:#F3F5F7 }
.ck-pill.analytics{ background:#F8EFE8 }
.ck-pill.marketing{ background:#EEE7E2 }

/* list with square numbers, slightly different card style */
.cookies-list{
  list-style:none; padding:0; margin:16px 0 0; display:grid; gap:12px;
}
.ck-item{
  position:relative; background:#fff; border:1px dashed rgba(139,94,60,.35);
  border-radius:14px; padding:16px 16px 14px 16px;
  box-shadow:0 8px 22px rgba(2,8,23,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.ck-item:hover{
  transform:translateY(-2px);
  background:#FFFBF8;
  box-shadow:0 16px 28px rgba(2,8,23,.10);
  border-color:rgba(139,94,60,.55);
}
.ck-num{
  position:absolute; right:12px; top:-12px;
  width:44px; height:44px; border-radius:10px;
  display:grid; place-items:center; font-weight:900; color:#fff; letter-spacing:.02em;
  background:linear-gradient(135deg, var(--primary), var(--primary-600));
  box-shadow:0 10px 20px var(--ring);
}
.ck-item h3{ margin:6px 0 6px; font-size:18px; font-weight:800; color:#222 }
.ck-item p, .ck-item ul{ margin:0 0 6px; color:#64748B }
.ck-bullets{ padding-left:18px; list-style:disc }
.ck-bullets li{ margin:2px 0 }

/* mini "table" */
.ck-table{
  border:1px solid rgba(2,8,23,.08); border-radius:12px; overflow:hidden; background:#fff;
}
.ck-table .row{ display:grid; grid-template-columns:1fr 2fr; }
.ck-table .row + .row{ border-top:1px solid rgba(2,8,23,.08) }
.ck-table .cell{ padding:10px 12px; color:#334155 }
.ck-table .row .cell:first-child{ background:#FAF5F0; font-weight:800; color:#6E452F }

/* responsive */
@media (max-width:640px){
  .ck-num{ right:10px; top:-14px; width:38px; height:38px; font-size:14px }
  .ck-table .row{ grid-template-columns:1fr }
  .ck-table .row .cell:first-child{ border-bottom:1px solid rgba(2,8,23,.08) }
}
/* ===== REVIEWS ===== */
.rev-head{ text-align:center; max-width:820px; margin:0 auto 20px }
.rev-eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.08em; color:#9A7A5E;
  background:rgba(139,94,60,.10); padding:6px 10px; border-radius:999px; font-size:12px;
}
.rev-title{ font-size:clamp(24px,3.6vw,36px); margin:10px 0 6px; font-weight:800; color:#2b2b2b }
.rev-sub{ color:#475569; margin:0 }

.rev-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:12px;
}
.rev-card{
  background:#fff; border:1px solid rgba(2,8,23,.06); border-radius:18px; overflow:hidden;
  box-shadow:0 10px 26px rgba(2,8,23,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rev-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(2,8,23,.12); border-color:rgba(139,94,60,.28) }

.rev-media{ overflow:hidden }
.rev-media img{
  width:100%; display:block; aspect-ratio:4/3; object-fit:cover; transform:scale(1); transition:transform .35s ease;
}
.rev-card:hover .rev-media img{ transform:scale(1.04) }

.rev-body{ padding:14px 16px 16px }
.rev-stars{ display:flex; gap:2px; margin-bottom:6px; color:var(--primary) }
.rev-stars svg{ width:18px; height:18px; fill:currentColor }
.rev-stars .star--half path{ fill:currentColor } /* половинка — вже ок, бо траєкторія до половини */

.rev-text{ margin:0 0 10px; color:#334155; font-style:italic }
.rev-author{ display:flex; align-items:center; gap:10px }
.avatar{
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  border:1px solid rgba(2,8,23,.06); box-shadow:0 4px 10px rgba(2,8,23,.08);
}
.rev-author strong{ display:block; font-weight:800; color:#222; line-height:1.2 }
.rev-author span{ display:block; color:#64748B; font-size:12px }

/* Responsive */
@media (max-width:1024px){
  .rev-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width:640px){
  .rev-grid{ grid-template-columns:1fr }
}