/*reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, menu, nav, output, ruby, section,
summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, menu, nav, section, main {display: block;}

ol, ul {list-style: none;}
blockquote, q {quotes: none;}
img{max-width: 100%; height: auto;}
a{text-decoration: underline;}
a:hover{cursor: pointer;}
*::-webkit-input-placeholder {color: #a9a9a9; opacity: 1;}
*:-moz-placeholder {color: #a9a9a9; opacity: 1;}
*::-moz-placeholder {color: #a9a9a9; opacity: 1;}
*:-ms-input-placeholder {color: #a9a9a9; opacity: 1;}
*{margin: 0; padding: 0;}
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
button,input,a{outline: none;}
button, input, select{-webkit-appearance: none; -moz-appearance: none; appearance: none;}
html{
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: subpixel-antialiased !important;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
  scroll-behavior: smooth; /* увімкнути плавне прокручування */
}
:root { --header-h: 72px; }               /* підстав свою висоту */
[id] { scroll-margin-top: var(--header-h); }  /* усім секціям з id */
/* палітра під обкладинку — підкрутиш за потреби */
:root{
  --green:#2f4f3c;
  --green-2:#3f6a4f;
  --black:#0e0e10;
  --text:#f6f6f6;
}
/* базове */
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: var(--black); /* fallback */
}
/* =============== 1) Глибокий градієнт + «спот» ================= */
.body--gradient-spot{
  /* великий діагональний градієнт */
  background:
    radial-gradient(900px 600px at 70% 35%, rgba(197,58,47,.28), transparent 60%),
    radial-gradient(1100px 700px at 30% 15%, rgba(63,106,79,.28), transparent 65%),
    linear-gradient(135deg, var(--green) 0%, var(--black) 68%);
  background-attachment: fixed,fixed,scroll; /* легка глибина при скролі */
}

/* трохи більше контрасту під хедер/футер за потреби */
.body--gradient-spot::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55));
}
.mon{
 font-family: "Nunito Sans", sans-serif;
}
html{
height:100%
}
#main,#service,#gallery{
scroll-snap-align:start;
transition:scroll-snap-align 3s ease-in-out
}
body{
 font-family: "Nunito Sans", sans-serif;
width:100%;
margin:0;
padding:0;

overflow-x:hidden;

height:100%;
position:relative;

}


@media (max-width: 900px){
  .body--gradient-spot{
    background:
      radial-gradient(820px 520px at 50% 30%, rgba(197,58,47,.28), transparent 60%),
      radial-gradient(940px 560px at 50% 24%, rgba(63,106,79,.26), transparent 65%),
      linear-gradient(135deg, var(--green) 0%, var(--black) 68%);
  }
}
.body--grain-dark{
  background: var(--black);
}
.body--grain-dark::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  /* тонкий світловий спот, щоб не було «плаского» чорного */
 background: radial-gradient(1000px 700px at 20% 12%, #d5aa6d27, transparent 60%);
  background-size: cover, 300px 300px;
  mix-blend-mode: normal;
}

main{

}
.main-home{
 
 
  position: relative;
  overflow: hidden;
}


.main-home::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("../img/IMG_4711.webp") center/cover no-repeat;
  transform: scale(1.28);              /* старт: трохи наближено */
  transition: transform 18s ease;       /* плавність */
  will-change: transform;
  z-index: 0;
}

/* легке затемнення (опціонально) */
.main-home::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(0, 0, 0, 0.2));
  z-index: 1;
}

.main-home > *{
  position: relative;
  z-index: 2;                          /* контент над фоном */
}

/* Коли треба “віддалити” */
.main-home.is-zoomout::before{
  transform: scale(1.00);              /* фінал: нормальний розмір */
}

.container{
max-width:1280px;
margin:0 auto;
padding:0px 20px}
header{
top:0px;
z-index:90;
position:fixed;
width:100%;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
box-shadow:0 2px 5px -2px rgba(0,0,0,0.1)}
.header-wrap{
height:70px;
width:100%;
display:flex;
justify-content:space-between;
align-items:center}
.header-wrap a{
text-decoration:none;
color:#eafafd;
font-size:14px;
font-weight:500;
transition:all 0.3s;
position:relative;
display:inline-block;
line-height:34px;
letter-spacing:1px}
.header-menu-link a::after{
content:'';
position:absolute;
width:100%;
transform:scaleX(0);
height:3px;
bottom:0;
left:0;
background-image:linear-gradient(to right top,#cf883a,#d39344,#d69d4f,#daa85a,#deb265);
transform-origin:bottom left;
transition:transform 0.3s ease-out}
.header-menu-link a:hover{
color:rgb(220,173,96);
transition:all 0.3s}
.header-menu-link a:hover::after{
transform:scaleX(1);
transform-origin:bottom left}
.header-link{
display:flex;
flex:33%;
justify-content:flex-end;
padding-right:10px}
.header-link li{
padding:15px}
.header-link a{
font-size:14px}
.header-link i{
font-size:18px}
.header-logo{
padding:20px 0;
display:flex;
align-items:center}
.header-logo p{
padding-left:5px;
font-size:14px;
color:#9c9c9c}
.header-img{
width:60px;
opacity: 0.8;
display:block;
margin:0 auto}
.header-menu{
flex:33%;
display:flex;
justify-content:center;
align-items:center}
.header-menu-link{
padding:10px;
font-size:14px;
display:block;
margin-right:20px}
.button{
background-image: linear-gradient(to right top, #d0262f, #c61f2b, #bc1827, #b20f23, #a8051f);
background-size:100%;
transition:all .4s ease-in-out}
.gold-button{
color:#fff;
max-width:340px;
overflow:hidden;

color:#000;
border:none;
padding:5px 20px;
border-radius: 12px !important;
font-weight:700;
text-transform:uppercase;

cursor:pointer;
position:relative;
z-index:1;
transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
}
.gold-button:hover{
transform:translateY(-5px) scale(1.02);

animation:pulse 1.5s infinite alternate}

.gold-button:active{
transform:translateY(2px) scale(0.98);
box-shadow:0 5px 10px rgba(207,136,58,0.5),inset 0 2px 5px rgba(0,0,0,0.1)}
.gold-button::after{
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient( 90deg,transparent,rgba(255,255,255,0.4),transparent );
transition:left 0.7s ease-in-out;
z-index:-1}
.gold-button:hover::after{
left:100%}
.header-btn{
color:#fff;
padding:10px 30px;
font-size:18px;
border:none;
cursor:pointer;
border-radius:5px;
display:flex;
align-items:center}
.button:hover{
background-position:100% 0;
moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out}
main{
position:relative}
.back{
width:100%;
height:20vw;
position:absolute;
bottom:0;
background:linear-gradient(to top,rgba(12,13,19,1) 0%,rgba(12,13,19,0) 100%)}
.main-wrap{

position:relative;
z-index:11;
height:100vh;
width:100%}
.flex{
  height: 100%;
display:flex;
justify-content:center;
align-items:center}
.main-bottom{
margin:0 auto;
width:60%;
display:flex;
align-items:center;
justify-content:center;
gap:30px;
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
padding:20px;
color:#fff;
border-radius:16px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.08);
justify-content:center;
align-items:center;
font-size:18px;
font-weight:500;
box-shadow:0 0 18px rgba(222,178,101,0.25);
border:1px solid rgba(255,255,255,0.08);
transition:box-shadow 0.3s ease}
@keyframes shimmer{
0%{
transform:translateX(-100%) rotate(25deg)}
100%{
transform:translateX(100%) rotate(25deg)}
}
.main-bottom span{
color:white}
.main-bottom i{
filter:drop-shadow(0 0 2px #deb265aa);
background:linear-gradient(to bottom, #359b55, #2d894d, #267746, #21663d, #1c5535);
-webkit-text-fill-color:transparent;
-webkit-background-clip:text}
.main-subtitle{
margin-right:0;
font-weight:500;
padding:0 0 15px;
font-size:16px;
width:auto;
border-radius:10px;
margin-top:10px;
display:flex;
justify-content:center;
}

.main-title ul p{
padding:0px 0 10px 0px;
color: #eafbfe;
 font-family: "Inter", sans-serif;
 font-size: 22px;
}

.main-list{
display:flex;
flex-direction:column}
.main-list li{
padding:10px 0;
font-size:16px;
font-weight:500;
color:#eafafd;
display:flex;
align-items:center}
.bullet-wrap{
margin-top:15px;
display:flex;
gap:15px}
.bullet i{
text-align:center;
font-size:24px !important;
font-weight:500;
background:linear-gradient(to bottom, #359b55, #2d894d, #267746, #21663d, #1c5535);
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
width:30px}
.bullet span{
color:rgba(255,255,255,0.94);
padding:10px 0;
font-size:14px;
font-style:italic}
.svg{
width:25px;
margin-right:10px}
.scroll-opacity{
height:100vh;
width:100%;
opacity:1;
transition:opacity 0.5s ease}
.main-title {
  height: 100%;
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: relative;
  /* flex: 55; */
  max-width: 100%;
  letter-spacing: -0.02em;
}


.call-btn{
  background: rgba(213,170,109,.18) !important;
  border: 1px solid rgba(213,170,109,.55) !important;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,.14); /* базова м’яка тінь */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.call-btn:hover{
  background: rgba(213, 170, 109, 0.302) !important;
  color:#fff;
  border-color: rgba(213,170,109,.55);
  transform:translateY(-1px);
}
.animated-headline{
  font-size:42px;
  font-weight:700;
  margin: 0 auto;
  position:relative;
  overflow:visible;
  line-height:1.08;
 
}

.animated-headline__accent{
  display: inline-block;
  margin-bottom: 14px;
  padding: 10px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  white-space: nowrap;
}

.animated-headline__rest{
  display: block;
  font-size: .94em;
  line-height: 1.12;
  text-shadow: 0 14px 34px rgba(0,0,0,.42);
  text-align:center;
}

.animated-headline .text{
  position:relative;
  display:inline-block;
  height:1em;
  line-height:1em;
  overflow:hidden;
  vertical-align:bottom;
}



.animated-headline .text span{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transform:translateY(100%);
  white-space:nowrap;
  animation:slideUpFade 6s infinite;
}

.animated-headline .text span:nth-child(1){ animation-delay:0s; }
.animated-headline .text span:nth-child(2){ animation-delay:2s; }
.animated-headline .text span:nth-child(3){ animation-delay:4s; }

@keyframes slideUpFade{
  0%{opacity:0; transform:translateY(100%);}
  10%{opacity:1; transform:translateY(0);}
  25%{opacity:1; transform:translateY(0);}
  35%{opacity:0; transform:translateY(-100%);}
  100%{opacity:0; transform:translateY(-100%);}
}

.main-title h2{
text-align:center;
font-size:20px;
font-weight:300}
.main-title p{
font-size:16px;
font-weight:400;
color:rgb(255,255,255) !important;
padding:22px 0 14px;
line-height:25px}
.main-title ul{
display:flex}
.main-title li{
margin-right:10px;
display:flex;
align-items:center}
.main-img{
max-width:50%;
flex:50}
.main-img-wrap{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:20px}
.main-img-item{
width:35%;
overflow:hidden;
border-radius:15px;
background:linear-gradient(145deg,#1e1e1e,#121212);
position:relative;
color:white}
.main-img-img{
padding:0px 20px 0px 20px}
.main-img-badge{
padding:5px 10px;
background-image:linear-gradient( to right top,rgba(187,108,35,0.6),rgba(197,125,49,0.6),rgba(208,141,63,0.6),rgba(218,158,78,0.6),rgba(228,175,94,0.6) );
position:absolute;
bottom:20px;
border-radius:0px 50px 50px 0px}
.badge-title{
font-size:14px;
color:rgba(255,255,255,0.94)}
.badge-subtitle{
font-size:12px;
font-weight:500;
color:rgba(255,255,255,0.72)}
.badge-icon{
width:17px;
position:absolute;
top:5px;
right:11px}
.badge-icon img{
fill:white}
.card{
border:2px solid transparent;
border-image:linear-gradient( 135deg,#D4AF37,#F5E7A1 50%,#D4AF37 100% ) 1;
position:relative;
z-index:1;
box-shadow:0 1px 2px rgba(212,175,55,0.15);
transition:all 0.3s ease;
border-radius:12px !important}
.card:hover{
transform:translateY(-5px)}
.main-about{
position:relative}
.main-about.active{
opacity:1;
transform:translateY(0)}
.btn-wrap{
  margin-top: 26px;
  gap: 15px;
display:flex;
align-items:center;
justify-content: center;
}

.btn-wrap a{
text-decoration:none}

.main-btn{
font-size:16px;
padding:14px 48px;
display:flex;
align-items:center;
color:rgb(255,255,255) !important;
font-weight:500;
border-radius:5px;
border:none;
transition:.5s;
filter:brightness(100%);
transform:translate(0px,0px);
text-decoration:none;
cursor:pointer;
}
.main-btn i{
color:white;
font-size:20px}

.icon-wrap{
width:100%;
margin:70px auto 0 auto;
display:flex;
justify-content:space-between;
flex-wrap:wrap}
.icon-item{
display:flex;
flex-direction:column;
align-items:center;
flex:30%;
color:white;
margin-bottom:30px}
.icon-img img{
max-width:100px}
.icon-text{
text-align:center}
.list-wrap{
margin-top:120px}

.btn{

color:#fff;
text-align:center;
letter-spacing:2px;
background-color:#3d96f4;
border-radius:50px;
justify-content:center;
align-items:center;
padding:15px 24px;
font-size:.875rem;
font-weight:500;
text-decoration:none;
transition:transform .4s,background-color .4s;
border:none}
.btn:hover{
background-color:#5cc97b;
transform:translate(0,-5px);
transition:transform .4s,background-color .4s}

.preload{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:110}
.page-transition .div{
background:#000;
width:100%;
height:100%;
position:absolute;
top:0;
left:0}
.page-transition{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
z-index:9998}
.preload li{
display:inline-block;
width:10px;
height:10px;
border:2px solid #c79658;
border-radius:50%;
z-index:9999}

/* ===== Палiтра (легко підправити) ===== */
:root{
  --bg-dark: #0e1113;       /* фон */
  --text:   #e9f1ee;        /* основний текст */
  --green:  #1ea56b;        /* акцент з обкладинки */
  --green-2:#21c57a;        /* яскравіший для hover */
  --graphite:#15191c;       /* графітова заливка */
  --premium:#7b0f0f;        /* бордовий преміум */
  --premium-2:#9c1515;      /* hover для преміум */
  --shadow: rgba(0,0,0,.35);
}

/* ===== БАЗА кнопки ===== */
.btn{
 cursor: pointer;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem;
  height:56px; padding:0 32px;
  border-radius:12px;
  font-weight:700; letter-spacing:.2px;
  text-decoration:none; line-height:1;
  transition: all .22s ease;
  border:2px solid transparent;
  color:var(--text);
  box-shadow: 0 6px 18px -6px var(--shadow);
  will-change: transform, background, color, border-color, box-shadow;
}
.btn:active{ transform: translateY(1px) scale(.995); }
.btn:disabled{ opacity:.6; pointer-events:none; }

/* Іконка (якщо використовуєш Font Awesome) */
.btn i{ font-size:1.05em; line-height:0; }

/* ========= 1) Стриманий: графіт + зелений контур ========= */
.btn--dark{
  background-image: -webkit-linear-gradient(left,#9b6f45,#d5aa6d);
  border:1px solid transparent;
  background-clip: padding-box, border-box;
  box-shadow:
    0 12px 28px -16px #9b6f45,
    0 0 0 1px #d5aa6d inset;
  color: var(--text);
}
.btn--dark:hover{ 
  background-image: -webkit-linear-gradient(left,#b78251,#d5aa6d);
  border:1px solid transparent;
  background-clip: padding-box, border-box;
  box-shadow:
    0 12px 28px -16px #9b6f45,
    0 0 0 1px #d5aa6d inset;
 
}
.btn--dark:focus-visible{
  border:1px solid transparent;
  background-clip: padding-box, border-box;
  box-shadow:
  0 12px 28px -16px #9b6f45,
  0 0 0 1px #d5aa6d inset;
 
}
.btn__arrow{ width:20px; height:20px; transition: transform .28s cubic-bezier(.22,.8,.3,1); }

/* ========= 2) Преміум-акцент: глибокий бордовий ========= */
.btn--premium{
  background: var(--premium);
  border-color: rgba(255,255,255,.06);
}
.btn--premium:hover{
  background: linear-gradient(0deg, var(--premium-2), #b01616);
  box-shadow: 0 12px 28px -10px rgba(176,22,22,.55);
}
.btn--premium:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(176,22,22,.35), 0 12px 28px -10px rgba(176,22,22,.55);
}

/* ========= 3) Мінімалізм: лише обводка (outline) ========= */
.btn--outline{
  background: transparent;
  color: var(--text);
  border-color: var(--green);
}
.btn--outline:hover{
  background: var(--green);
  color: #0b0e10;
  box-shadow: 0 10px 26px -10px rgba(33,197,122,.55);
}
.btn--outline:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(33,197,122,.25), 0 10px 26px -10px rgba(33,197,122,.55);
}

/* Розміри (за бажанням) */
.btn--lg{ --h:54px; padding:0 36px; font-size:1.05rem; border-radius:12px; }
.btn--sm{ --h:44px; padding:0 16px; font-size:.95rem; border-radius:12px; }

/* База палітри (можеш лишити як є або під себе) */
:root{
  --bg-dark:#0e1113;
  --text:#e9f1ee;
  --muted:#aab6b1;
  --green:#21c57a;
  --green-2:#1ea56b;
  --graphite:#15191c;
}

/* Контейнер шапки */
.header{
  position: fixed; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.15));
  backdrop-filter: blur(4px);
}
.header-wrap{
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 20px;
  display:flex; align-items:center; gap:16px;
}

/* Лого зліва */
.header-logo{ display:inline-flex; align-items:center; }
.header-img{ height:36px; width:auto; display:block; }

/* Меню в потоці: адаптивно між лого і правим блоком */
.main-nav{
  position: relative;
  margin-left: 34px;
}
.main-nav ul{
  display:flex; align-items:center; gap:26px;
  list-style:none; margin:0; padding:0;
}
.main-nav a{
  color:var(--text); text-decoration:none; font-weight:700;
  letter-spacing:.2px; padding:8px 2px; position:relative;
  transition:color .2s ease;
}
.main-nav a.is-active{
  color: #fff;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d5aa6d93, transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.main-nav a:hover{ color:#fff; }
.main-nav a:hover::after{ transform:scaleX(1); }
.main-nav a.is-active::after{ transform:scaleX(1); }

/* Права частина */
.header-right{
  margin-left:auto; display:flex; align-items:center; gap:14px;
}

/* Соцмережі */
.socials{ display:flex; align-items:center; gap:10px; }
.socials a{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  color:var(--text); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.socials a:hover{
  background: rgba(213,170,109,.18);
  color:#fff;
  border-color: rgba(213,170,109,.55);
  transform:translateY(-1px);
}

.socials i{ font-size:15px; line-height:0; }

/* Language switch */
.lang-switch{
  display:flex; align-items:center; gap:8px;
}
.lang-switch a{
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 800;
  font-size: 12px;
  color: var(--text);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: all .2s ease;
}
.lang-switch a:hover{
  color:#fff;
  border-color: rgba(213,170,109,.55);
  background: rgba(213,170,109,.18);
}
.lang-switch a.is-active{
  color:#fff;
  border-color: rgba(213,170,109,.65);
  background: rgba(213,170,109,.28);
}

/* Кнопка «Придбати» — використовує твої класи .btn .btn--dark .btn--lg */
.btn{ --h:52px; height:var(--h); padding:0 20px; border-radius:12px; font-weight:800; }
.btn--lg{ --h:56px; padding:0 24px; }

/* Бургер (видимий лише на вузьких екранах) */
.nav-toggle{
  display:none; position:relative; width:44px; height:44px;
  border-radius:10px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08); color:var(--text);
}
.nav-toggle span{
  position:absolute; left:10px; right:10px; height:2px; background:var(--text);
  transition:transform .2s ease, opacity .2s ease, top .2s ease, bottom .2s ease;
}
.nav-toggle span:nth-child(1){ top:11px; }
.nav-toggle span:nth-child(2){ top:20px; }
.nav-toggle span:nth-child(3){ bottom:11px; }

/* ======= Адаптив ======= */
@media (max-width: 1024px){
  .main-nav ul{ gap:18px; }
}

@media (max-width: 860px){
  /* меню у випадаючий мобільний блок з плавною анімацією */
  .main-nav{
    position: fixed;
    right: 14px;
    left: auto;
    width: min(360px, calc(100vw - 28px));
    top:66px;
    transform: translateY(-8px) scale(.985);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background:rgba(10,13,15,.95); border:1px solid rgba(255,255,255,.06);
    border-radius:14px; padding:12px;
    transform-origin: top center;
    transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
  }
  .main-nav ul{
    flex-direction:column; align-items:stretch; gap:6px;
  }
  .main-nav a{
    display:block;
    text-align:left;
    padding:12px 10px;
    border-radius:10px;
  }
  .main-nav a:hover{ background:rgba(255,255,255,.04); }
  .main-nav.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .nav-toggle{ display:inline-grid; place-items:center; }
  .nav-toggle.open span:nth-child(1){ top:20px; transform: rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ bottom:21px; transform: rotate(-45deg); }
  /* зменшимо правий блок, щоб влізло */
  .header-right{ gap:10px; }
  .socials a{ width:34px; height:34px; }
  .lang-switch{ gap:6px; }
  .lang-switch a{ height:28px; min-width:32px; font-size:11px; padding:0 7px; }
}




/* ===== Палiтра (fallback, якщо не оголошено вище) ===== */
:root{
  --bg-dark: #0e1113;
  --text: #e9f1ee;
  --muted: #aab6b1;
  --green: #21c57a;
  --accent: #21c57a;
}

/* ===== Layout секції ===== */
.chapters{
  background: transparent; /* або var(--bg-dark) якщо окремий блок */
  color: var(--text);
  padding: 64px 20px;
}
.chapters__wrap{
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* ліво — центр (книга) — право */
  gap: 32px 48px;
 
    align-items: stretch;   
}

/* Книга по центру */
.chapters__book{
  align-self: stretch;          /* займи всю висоту грід-рядка */
  justify-self: center;         /* по центру по горизонталі */
  display: flex;                /* центруємо вміст усередині */
  align-items: center;          /* ⟵ вертикально по центру */
  justify-content: center;
  height: 100%;
  min-height: 0;       
}
.chapters__book-img{
 max-height: 100%;
  width: auto;                  /* зберігає пропорції */
  height: auto;
}
/* мобільний — повертаємо звичайну поведінку */
@media (max-width: 860px){
  .chapters__book{
    align-self: auto;
    height: auto;
  }
  .chapters__book-img{
    max-height: none;
    width: 100%;
  }
}
/* Колонки з анотаціями */
.chapters__col{
  display: grid; gap: 28px;
}
.chapter{
 
color: var(--muted);
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
}

.chapter__title{
  margin: 0 0 8px 0; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.chapter__title span{
  display:inline-block; padding:4px 10px; border-radius: 999px;
  background: rgba(33,197,122,.12); color: #ffffff; border:1px solid rgba(33,197,122,.35);
}
.chapter__text{
  margin: 8px 0 0; line-height: 1.6; color: var(--muted);
  opacity: .92;
}

/* Загальна аннотація під книгою */
.chapters__summary{
  grid-column: 1 / -1; /* на всю ширину під усім */
  text-align: center;
  max-width: 820px; margin: 8px auto 0;
  color: var(--muted);
  font-size: 1.05rem; line-height: 1.8;
  padding-top: 8px;
  border-top: 1px dashed rgba(24, 55, 40, 1);
}

/* ===== Адаптив ===== */
@media (max-width: 1024px){
  .chapters__wrap{
    gap: 28px 32px;
  }
  .chapters__book-img{ max-width: 320px; }
}
@media (max-width: 860px){
  .chapters__wrap{
    grid-template-columns: 1fr; /* все в стовпець */
  }
  .chapters__col{ order: 2; }
  .chapters__book{ order: 1; }
  .chapters__summary{ order: 3; text-align: left; }
}

/* ===== Motion-safe ===== */
@media (prefers-reduced-motion: reduce){
  .fx, .fx{ animation:none!important; opacity:1 !important; transform:none!important; }
}



/* трохи більший початковий зсув дає відчуття плавності */
.fx[data-reveal="up"]    { transform: translateY(84px); }   /* було 18px */
.fx[data-reveal="left"]  { transform: translateX(-88px); }  /* було 24px */
.fx[data-reveal="right"] { transform: translateX(88px); }   /* було 24px */
.fx[data-reveal="scale"] { transform: scale(.95); }         /* було .96 */

/* Коли у вьюпорті */
.fx.is-inview{
  animation-fill-mode: forwards;
  animation-duration: var(--reveal-duration);
  animation-timing-function: var(--reveal-ease);
  animation-delay: var(--reveal-delay);
}
.fx.is-inview[data-reveal="up"]    { animation-name: kf-up; }
.fx.is-inview[data-reveal="left"]  { animation-name: kf-left; }
.fx.is-inview[data-reveal="right"] { animation-name: kf-right; }
.fx.is-inview[data-reveal="fade"]  { animation-name: kf-fade; }
.fx.is-inview[data-reveal="scale"] { animation-name: kf-scale; }

/* Keyframes */
@keyframes kf-up    { from{opacity:0; transform:translateY(88px)} to{opacity:1; transform:none} }
@keyframes kf-left  { from{opacity:0; transform:translateX(-84px)} to{opacity:1; transform:none} }
@keyframes kf-right { from{opacity:0; transform:translateX(84px)}  to{opacity:1; transform:none} }
@keyframes kf-fade  { from{opacity:0} to{opacity:1} }
@keyframes kf-scale { from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)} }


.chapter::after {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), rgba(25,167,100,.22));
    opacity: .65;
    border-radius: 2px;
}

.chapter{
  position:relative; border-radius:16px; overflow:hidden; padding:22px 22px 22px 28px;
}
.chapter::before{
  content:""; position:absolute; inset:-40% -10%; transform:rotate(-6deg);
  background:linear-gradient(90deg, rgba(33,197,122,.14), rgba(33,197,122,0));
}

.chapter__badge{
  position:absolute; right:14px; bottom:12px;
  width:54px; height:54px;
  opacity:.18;
  background: var(--accent);                 /* колір іконки */
  -webkit-mask: var(--icon-url) no-repeat center / contain;
          mask: var(--icon-url) no-repeat center / contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  pointer-events:none;                       /* щоб не заважало клікам/виділенню */
  z-index: 2;                                /* вище за діагональну стрічку, нижче за текст */
}

/* легка взаємодія */
@media (hover:hover){
  .chapter:hover .chapter__badge{ opacity:.26; transform: translateY(-1px) scale(1.03); transition:.25s }
}

/* трохи менший бейдж на мобілці */
@media (max-width: 860px){
  .chapter__badge{ width:44px; height:44px; right:10px; bottom:10px; opacity:.16 }
}

/* ===== ІКОНИ ЧЕРЕЗ CSS-ПОТУЖКИ (mask + data-URI) ===== */

/* 1) Конь (knight) */
/* 1) Кінь (knight) */
.chapter[data-icon="knight"]{
  --icon-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M14%2050h36v6H14zM44%2044c1-7-5-10-10-13l6-8c-2-5-7-9-13-9-5%200-9%202-12%206l6%204-4%207c-1%202-2%204-2%206%200%205%204%207%209%207h20z%27%20fill%3D%27black%27/%3E%3C/svg%3E");
}

/* 2) Тура (rook) */
.chapter[data-icon="rook"]{
  --icon-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M16%2054h32v6H16zM22%2046h20l-3-8%205-16V12h-6v6h-6v-6h-6v6h-6v10l5%2016-3%208z%27%20fill%3D%27black%27/%3E%3C/svg%3E");
}

/* 3) Лапки (quote) */
.chapter[data-icon="quote"]{
  --icon-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cpath%20d%3D%27M14%2036c0-9%207-16%2016-16v8c-4%200-8%204-8%208h8v10H14V36zm22%200c0-9%207-16%2016-16v8c-4%200-8%204-8%208h8v10H36V36z%27%20fill%3D%27black%27/%3E%3C/svg%3E");
}



/* ===== Layout секції ===== */
.author{ padding: clamp(48px,6vw,84px) 20px; color: var(--text); }
.author__wrap{
  max-width: 1200px; margin: 0 auto;
  display:grid; grid-template-columns: minmax(540px,1.1fr) 1fr;
  gap: clamp(24px,4vw,56px); align-items: center;
}

/* ===== Ліва частина ===== */
.author__media{ position:relative;  width: fit-content; max-width: 77%;}

/* Фото з "кривими" кутами: різні радіуси + мʼяка тінь */
.author__photo{
  margin:0; overflow:hidden;
  border-radius: 12px;             /* асиметрія */
  box-shadow: 0 28px 70px -30px rgba(0,0,0,.65);
  background:#0c1012;
 
 
}
.author__photo img{ display:block; width:100%; height:auto; object-fit:cover; 

}

/* Кнопка Play, напівнакладена на край фото */
.author__play{
  position:absolute; right:-14px; top: 18%;
  width:74px; height:74px; border-radius:999px;
  display:grid; place-items:center; text-decoration:none;
  background:#e9f1ee; color:#0e1113;
  border:4px solid rgba(255,255,255,.65);
  box-shadow: 0 14px 32px -18px rgba(0,0,0,.6);
  transition: transform .25s cubic-bezier(.22,.8,.3,1);
}
.author__play:hover{ transform: translateY(-2px) scale(1.04); }
.author__play-tri{
  width:20px; height:20px; background: var(--accent); border-radius:50%;
  clip-path: polygon(36% 28%, 36% 72%, 76% 50%); /* ► */
}

/* ==== Акцентніша «капсула-виступ» ==== */
.author__spine {
    position: absolute;
    right: -34px;
    /* top: 15px; */
    width: 62px;
    bottom: 100px;
    padding: 14px 0;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(10,14,13,.82), rgba(10,14,13,.58));
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.10);
   
}
/* тонкий зелений «хребет» з краю капсули */
.author__spine::after {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    bottom: 13px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #c79658, #d5aa6d);
   
    pointer-events: none;
}

/* ==== Соцмережі на виступі ==== */
.author__social{ display:grid; gap:12px; place-items:center; }

/* базовий стан: читабельний контраст */
.as-btn{
  --ring: 0 0 0 0 rgba(33,197,122,0);
  width:48px; height:48px; display:grid; place-items:center; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
box-shadow: 0 0 0 2px #d5aa6d1a;
}
.as-btn svg{ width:22px; height:22px; fill:#fff; opacity:.95; }

/* hover: акцентна підсвітка + легкий підйом */
.as-btn:hover{
  transform: translateY(-2px);
  
 border: 1px solid #d5aa6d66;
 
  background: linear-gradient(180deg, #d5aa6d35, #d5aa6d0d);
box-shadow: 0 0 10px 4px #d5aa6d1a;
}

/* active: короткий «натиск» */
.as-btn:active{ transform: translateY(0) scale(.98); }





/* ===== Права частина ===== */
.author__content{ display:grid; gap: 18px; }
.author__name{ margin:0; font-size: clamp(32px,4.6vw,46px); line-height:1.12; }
.author__role{  margin-top:8px;
background-image: linear-gradient(to bottom, #359b55, #2d894d, #267746, #21663d, #1c5535);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

}

.author__bio{ color: var(--text); opacity:.94; line-height:1.8; margin: 8px 0 0; max-width: 62ch; }
.author__bio .hl{
  background: linear-gradient(transparent 60%, rgba(33,197,122,.18) 60% 92%, transparent 92%);
  border-radius:2px; padding:0 1px;
}

/* Підпис */
.author__sign{ margin: 6px 0 0; }
.author__sign img{ display:block; width:auto; max-width:240px; height:auto; opacity:.9; }

/* CTA */
.author__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 2px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:48px; padding:0 22px; border-radius:12px; font-weight:800;
  border:1px solid transparent; text-decoration:none; transition:.22s ease;
}
.btn--accent{ background: var(--accent); color:#0c1110; }
.btn--accent:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.btn--ghost{ background: transparent; color: var(--text); border-color: rgba(255,255,255,.16); }
.btn--ghost:hover{ border-color: rgba(255,255,255,.26); transform: translateY(-1px); }

/* ===== Адаптив ===== */
@media (max-width: 1160px){
  .author__wrap{ grid-template-columns: 1fr; align-items:start; }
  .author__play{ right:16px; top: calc(100% + 12px); }
}



:root{
  --accent:#287c48ff;      /* твій зелений */
 
}

/* базова кнопка */
.btn{
  --h:52px; --r:14px; --pad-x:26px; --dur:.28s;
  position:relative; display:inline-flex; align-items:center; gap:12px;
  height:var(--h); padding:0 var(--pad-x);
  border-radius:var(--r); font-weight: 800; text-decoration:none; border:1px solid transparent;
  transition:
    transform var(--dur) cubic-bezier(.22,.8,.3,1),
    box-shadow var(--dur) ease, filter var(--dur) ease, border-color var(--dur) ease,
    background var(--dur) ease, color var(--dur) ease;
  cursor:pointer; line-height:1;
}

 :root{
                    /* фон секції */
                 /* фон картки (теплий беж) */
         /* основний текст */
            /* зірочки */
    --radius: 22px;                /* радіус карток */
  
    --speed: 20s;                  /* швидкість руху (менше = швидше) */
                /* відступи між картками */
  }


   :root{
    /* під твою тему */

    --panel:#0f1316;
    --panel2:#0e1517;
  
   
   
    --accent2:#26d56c;     /* світліший */
  

    --r-xl:26px; --r:14px;
   
  }





/* ===== FOOTER (dark premium) ===== */
:root{
  --sf-bg: #0b0e10;
  --sf-panel: #0f1316;
  --sf-text: #eaf1ec;
  --sf-muted:#8f9e97;
  --sf-accent:#1bb050;
  --sf-accent2:#26d56c;
}

.site-footer{
  background: linear-gradient(180deg, var(--sf-panel), #0c1113);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 10px;
}
.sf-wrap {
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
    display: flex;
   
    align-items: center;
}

.sf-brand{ display:flex; align-items:center; gap:12px; text-decoration:none }
.sf-brand img{ width:86px;  object-fit:contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)) }
.sf-brand-name{ color: var(--sf-text); font-weight: 900; font-size: 18px; letter-spacing:.02em }

.sf-tagline{ margin: 6px 0 0; color: var(--sf-muted); font-size: 13px }

.sf-nav{
  display:flex; align-items:center; gap:12px; justify-self:end; flex-wrap:wrap;
}
.sf-nav a{
  color: var(--sf-text); text-decoration:none; font-size:14px; opacity:.9;
  padding:8px 10px; border-radius:10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  background: #0b1113;
  transition: box-shadow .2s ease, color .2s ease;
}
.sf-nav a:hover{ box-shadow: inset 0 0 0 1px #c7975859; color:#d9ffea }

.sf-dot{ width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,.14); display:inline-block }

.sf-social{
  grid-column: 1 / -1;
  display:flex; gap:10px; margin-top: 6px;
}
.sf-ico{
  width:40px; height:40px;
  display:grid; place-items:center;
  color:#efe6bc; background:#0b1113; border-radius:12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.25);
  transition: transform .08s ease, box-shadow .2s ease;
}
.sf-ico:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px #c7975814, inset 0 0 0 1px #c79658;
  color:#eafff4;
}

.sf-copy{

  margin-top: 8px;
  color: var(--sf-muted);
  font-size: 12px;
  display:flex; align-items:center; justify-content: center;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 14px;
}

/* адаптивність */
@media (max-width: 900px){
  .sf-wrap{ grid-template-columns: 1fr; text-align:left }
  .sf-nav{ justify-self:start; gap:10px }
  .sf-social{ margin-top: 10px }
}
@media (max-width: 420px){
  .sf-brand img{ width:30px; height:30px }
  .sf-nav a{ font-size:13px; padding:7px 9px }
  .sf-ico{ width:38px; height:38px; border-radius:10px }
}

/* ===== Mobile tweaks ===== */

/* телефони/планшети: все в один стовпчик */
@media (max-width: 900px){
  .site-footer{
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  }
  .sf-wrap{
    display: flex;           /* у тебе вже flex — залишаємо */
    flex-direction: column;  /* стовпчиком */
    align-items: center; /* вирівнюємо вліво */
    gap: 12px;               /* вертикальні інтервали */
  }

  /* навігація — рядок, що переноситься */
  .sf-nav{
    justify-self: unset;
    gap: 8px;
    flex-wrap: wrap;
  }
  .sf-nav a{
    padding: 7px 10px; 
    font-size: 13px;
  }
  /* маленька крапка-розділювач не потрібна, коли лінки переносяться */
  .sf-dot{ display: none; }

  /* соцмережі — під навігацією */
  .sf-social{
    margin-top: 4px;
    gap: 8px;
  }
  .sf-ico{
    width: 44px; height: 44px;   /* зручні тач-таргети */
    border-radius: 12px;
  }

  /* копірайт — по центру, окремий верхній бордер лишаємо */
  .sf-copy{
    padding-top: 12px;
    margin-top: 10px;
    justify-content: center;
    text-align: center;
  }
}

/* дуже вузькі (<=420px): ще компактніше */
@media (max-width: 420px){
  .sf-brand img{ width: 30px; height: 30px; }
  .sf-brand-name{ font-size: 16px; }
  .sf-nav a{ font-size: 12.5px; padding: 6px 9px; }
  .sf-ico{ width: 40px; height: 40px; }
}


.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* ✅ всі однакові */
  font-family: "Nunito Sans", sans-serif;
  gap: 20px;
}
.stat-card2 {
  position: relative; /* ✅ треба для ::before */
  border-radius: 22px;

  background: rgba(10,14,13,.45); /* ✅ краще для blur ніж щільний градієнт */
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);

  border: 0.5px solid rgba(213, 170, 109, 0.14);
  box-shadow: 0 0px 22px -3px rgba(213, 170, 109, 0.146),
              0 0 0 1px rgba(213,170,109,.35) inset;

  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.stat-card2:hover {
  box-shadow: 0 0 26px 2px #d5aa6d30,
0 0 0 1px rgba(213,170,109,.75) inset;
transform: translateY(-2px) scale(1.02);
background: rgba(213,170,109,.18);
}
.stat-card2::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.035),
    rgba(255,255,255,.02) 40%,
    rgba(0, 0, 0, 0.019)
  );
  pointer-events:none;
}

.stat-card2::before {
  content: "";
  position: absolute;
  overflow: hidden;
  left: -2px;
  top: 5px;
  bottom: 5px;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, #d5aa6d, #b7825190);
  filter: drop-shadow(0 0 6px #d5aa6d6d);
  pointer-events: none;
}
.stat-card2__icon {
  font-size: 20px;
  backdrop-filter: blur(4px);
  /* --ring: 0 0 0 0 rgba(33,197,122,0); */
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid #d5aa6d66;
  color: #fff;
  
  margin-right: 15px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
  background: linear-gradient(180deg, #d5aa6d35, #d5aa6d0d);
  box-shadow: 0 0 0 2px #d5aa6d1a;
  min-width: 48px;
}

.stat-card2__title {
  font-weight: 900;
  font-size: 20px;
}
.stat-card2__desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.why{
  padding: 72px 0 40px;
}

.why__wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

/* LEFT */
.why__left{
  text-align: center;
}

.why__kicker{
  display:inline-block;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(213,170,109,.85);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(213,170,109,.25);
  background: rgba(213,170,109,.08);
}

.why__title{
  margin: 14px 0 10px;
  color: #fff;
  font-weight: 900;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.05;
}

.why__divider{
  width: min(680px, 100%);
  height: 2px;
  margin: 14px auto;
  background: linear-gradient(90deg, rgba(213,170,109,.75), rgba(213,170,109,.25), transparent);
  position: relative;
}
.why__divider::after{
  content:"";
  position:absolute;
  left: 0;
  width: 78%;
  top: 8px;
  height: 2px;
  background: linear-gradient(90deg, rgba(213,170,109,.35), rgba(213,170,109,.12), transparent);
}

.why__lead{
 margin: 0 auto 20px auto;
  color: rgba(255,255,255,.78);
  font-weight: 700;
  line-height: 1.55;
  font-size: 16px;
  max-width: 64ch;
}

.why__content{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: stretch;
}

.why__list{
  list-style:none;
  padding: 0;
  margin: 0;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.why__list li{
  display:flex;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(213,170,109,.18);
  overflow: hidden;
}


.why__list i{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  flex:0 0 auto;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(213,170,109,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  margin-top: 1px;
}

.why__list span{
  color: rgba(255,255,255,.80);
  font-weight: 700;
  line-height: 1.45;
  font-size: 15px;
}
.why__list b{ color:#fff; font-weight: 900; }

.why__list li:hover{
  transform: translateY(-1px);
  border-color: rgba(213,170,109,.22);
  box-shadow: 0 16px 44px rgba(0,0,0,.32);
}
.why__list li:hover i{
  border-color: rgba(213,170,109,.65);
  background: rgba(213,170,109,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 4px rgba(213,170,109,.12);
}

/* actions (кнопки як у тебе) */
.why__actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* RIGHT (PHOTO) */
.why__right{
  position: relative;
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
 
  border-radius: 18px;
  overflow: hidden;

}

.why__media{
  width: auto;
 max-width: 50%;
  display: block;
 
  max-height: 760px;
  background: #000;
  object-fit: contain;
}
.why__media {
    border-radius: 20px;
}
.why__photo {
    position: relative;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.why__photo::before{
  content:"";
  position:absolute;
  inset:0;
  
  pointer-events:none;
}

.why__photo img{
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  display:block;
  margin: 0;
  border-radius: 0;
  background: transparent;
}
.ua-map-labels{
  position: absolute;
  inset: 14px;
  pointer-events: none;
}
.ua-map-label{
  position: absolute;
  color: rgba(34,38,44,.86);
  font-size: clamp(10px, 1.2vw, 15px);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.ua-map-label--lviv{ left: 16%; top: 44%; }
.ua-map-label--ternopil{ left: 28%; top: 50%; }
.ua-map-label--khmelnytskyi{ left: 40%; top: 47%; }
.ua-map-label--vinnytsia{ left: 48%; top: 58%; }
.ua-map-label--kyiv{ left: 55%; top: 33%; }
.ua-map-label--cherkasy{ left: 62%; top: 52%; }
.ua-map-label--kharkiv{ left: 82%; top: 50%; }
.ua-map-label--dnipro{ left: 73%; top: 66%; }
.ua-map-label--odesa{ left: 50%; top: 85%; }
.ua-map-label--chernivtsi{ left: 32%; top: 72%; }
.ua-map-label--frankivsk{ left: 20%; top: 63%; }

/* маленький badge поверх фото */
.why__badge{
  position:absolute;
  left: 18px;
  bottom: 18px;
  padding: 12px 16px;
  border-radius: 18px;

 background-image: -webkit-linear-gradient(left,#b78251,#d5aa6d);
  border: 1px solid rgba(213,170,109,.22);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.why__badge-title{
  color:#fff;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.35;
  max-width: 320px;
}
.why__badge-sub{
  margin-top: 4px;
  color: rgba(255,255,255,.78);
  font-weight: 700;
  font-size: 13px;
}

.coverage-map{
  padding: 34px 20px 40px;
}
.coverage-map__wrap{
  max-width: 1200px;
  margin: 0 auto;
}
.coverage-map__head{
  text-align: center;
  margin-bottom: 14px;
}
.coverage-map__media{
  border-radius: 0;
  overflow: visible;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.coverage-map__media img{
  width: 100%;
  display: block;
}

/* Responsive */
@media (max-width: 980px){
  .why__wrap{ grid-template-columns: 1fr; }
  .why__content{ grid-template-columns: 1fr; }
  .why__right{ min-height: 0; }
  .why__media{ width: min(100%, 400px); height: auto; max-width: 100%; }
  .why__photo img{ width: 100%; }
  .ua-map-label{
    font-size: 10px;
  }
  .why__badge{
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .why__badge-title{
    max-width: 100%;
    font-size: 13px;
  }
  .coverage-map{
    padding: 20px 14px 26px;
  }
}


.services2{ padding: 70px 0 60px; }
.services2__wrap{ max-width:1200px; margin:0 auto; padding:0 18px; }

.services2__head{ text-align:center; max-width: 860px; margin:0 auto 26px; }
.services2__kicker{
  display:inline-block; font-weight:800; letter-spacing:.10em; text-transform:uppercase;
  color: rgba(213,170,109,.85); font-size:12px; padding:6px 12px; border-radius:999px;
  border:1px solid rgba(213,170,109,.25); background: rgba(213,170,109,.08);
}
.services2__title{
  margin: 14px 0 10px; color:#fff; font-weight: 900;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.05;
}
.services2__divider{
  width: min(720px, 92%); height:2px; margin: 14px auto;
 background: linear-gradient(90deg, transparent, rgba(213,170,109,.95), transparent);
  position: relative;
}
.services2__divider::after{
  content:""; position:absolute; left:12%; right:12%; top:7px; height:2px;
  background: linear-gradient(90deg, transparent, rgba(213,170,109,.45), transparent);
}
.services2__subtitle{
  margin:0; color: rgba(255,255,255,.78); font-weight:700; line-height:1.5; font-size:16px;
}

/* grid 3 колонки як на прикладі */
.services2__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 1024px){
  .services2__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .services2__grid{ grid-template-columns: 1fr; }
}

/* service card */
.svc-card{
  position:relative;
  border-radius: 22px;
  padding: 22px 22px 18px;
  text-decoration:none;
  overflow:hidden;
transition: all .2s ease;
  background: linear-gradient(180deg, rgba(10,14,13,.62), rgba(10,14,13,.42));
  border: 1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 18px 56px rgba(0,0,0,.35);

  display:flex;
  flex-direction:column;
  gap: 10px;
  min-height: 210px;
}

.svc-card::before{
  content:"";
  position:absolute;
  left: 14px; top: 16px; bottom: 16px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(213,170,109,.92), rgba(213,170,109,.10));
  box-shadow: 0 0 0 1px rgba(213,170,109,.25);
  opacity:.9;
}

.svc-card__icon{
  width: 52px; height: 52px; border-radius: 999px;
  display:grid; place-items:center;
  margin-left: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(213,170,109,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.svc-card__icon i{ font-size: 20px; color: rgba(255,255,255,.92); }

.svc-card__title{
  color:#fff; font-weight: 900; font-size: 18px; line-height: 1.15;
  padding-left: 10px;
}
.svc-card__desc{
  color: rgba(255,255,255,.74);
  font-weight: 700;
  line-height: 1.4;
  font-size: 14px;
  padding-left: 10px;
  max-width: 34ch;
}
.svc-card__more{
  margin-top:auto;
  padding-left: 10px;
  color: rgba(213,170,109,.9);
  font-weight: 900;
  font-size: 13px;
  display:flex;
  align-items:center;
  gap:8px;
  opacity: .95;
}

.svc-card:hover{
  transform: translateY(-2px);
  border-color: rgba(213,170,109,.22);
  box-shadow: 0 26px 74px rgba(0,0,0,.45);
}
.svc-card:hover .svc-card__icon{
  border-color: rgba(213,170,109,.65);
  background: rgba(213,170,109,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 4px rgba(213,170,109,.12);
}
.svc-card:hover .svc-card__more i{ transform: translateX(2px); }

/* CTA card */
.svc-cta{
  position:relative;
  border-radius: 22px;
  padding: 24px 22px;
  text-decoration:none;
  overflow:hidden;

  background: linear-gradient(180deg, rgba(213,170,109,.38), rgba(183,130,81,.22));
  border: 1px solid rgba(213,170,109,.35);
  box-shadow: 0 22px 70px rgba(0,0,0,.40);

  display:flex;
  flex-direction:column;
  gap: 10px;
 
}

.svc-cta__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10,14,13,.35);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight: 900;
  font-size: 12px;
}

.svc-cta__title{
  color:#111;
  font-weight: 1000;
  font-size: 26px;
  line-height: 1.05;
}
.svc-cta__desc{
  color: rgba(17,17,17,.78);
  font-weight: 800;
  line-height: 1.35;
  font-size: 14.5px;
  max-width: 38ch;
}

.svc-cta__btn{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  width: fit-content;

  background: rgba(10,14,13,.55);
  border: 1px solid rgba(255,255,255,.16);
  color:#fff;
  font-weight: 900;
}

.svc-cta__corner{
  position:absolute;
  right:-10px;
  bottom:-10px;
  width: 170px;
  height: 170px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%);
  transform: rotate(12deg);
  opacity: .6;
}

.svc-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 28px 86px rgba(0,0,0,.50);
}
.svc-cta:hover .svc-cta__btn{
  box-shadow: 0 0 0 4px rgba(10,14,13,.14);
}

.intro-video{
  max-width: 1200px;
margin: 0 auto;
padding: 26px 18px 24px;
 
}
.intro-video__wrap{
  max-width: none;
  width: 100%;
  margin: 0 auto;
}
.intro-video__head{
  text-align: center;
  max-width: 1200px;
  margin: 0 auto 18px;
  padding: 0 20px;
}
.intro-video__frame{
  position: relative;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.intro-video__media{
  width: 100%;
  display: block;
  border-radius: 25px;
  background: #000;
  max-height: none;
}

.intro-video__layout{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
  padding: 0 20px;
}

.intro-video__primary{
  display: grid;
  gap: 10px;
}

.intro-video__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.intro-video__card{
  display: grid;
  gap: 10px;
}

.intro-video__label{
  color: rgba(234,241,238,.76);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 768px){
  .intro-video{
    padding: 18px 14px 14px;
  }
  .intro-video__head{
    padding: 0 14px;
  }
  .intro-video__layout{
    padding: 0 14px;
  }
  .intro-video__grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.team{ padding: clamp(48px,6vw,84px) 20px; color: var(--text); }
.team .team-slider{ max-width: 1200px; margin: 0 auto; }

/* 1 slide = full width */
.team__wrap{
  display:grid;
  grid-template-columns: minmax(540px,1.1fr) 1fr;
  gap: clamp(24px,4vw,56px);
  align-items:center;
}

/* slick spacing */
.team .slick-slide{ padding: 0 6px; width: 100%;}
.team .slick-list{ overflow: hidden; }
.team .slick-track{ display:flex; align-items:stretch; }

/* ===== media (як author) ===== */
.team__media{ position:relative; width: fit-content; max-width: 100%; }
.team__photo{

  margin:0; overflow:hidden;
  border-radius: 12px;
  box-shadow: 0 28px 70px -30px rgba(0,0,0,.65);
  background:#0c1012;
  position: relative;
}
.team__photo img{ display:block; width:100%; height:auto; object-fit:cover; }

/* spine (gold) */
.team__spine{
  position:absolute; right:-34px; top:15px;
  width:92px; padding:14px 0; border-radius:22px;
  background: linear-gradient(180deg, rgba(10,14,13,.82), rgba(10,14,13,.58));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 46px -22px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.25) inset;
}
.team__spine::after{
  content:"";
  position:absolute;
  left:0; top:13px; bottom:13px; width:3px;
  border-radius:3px;
  background: linear-gradient(180deg, rgba(213,170,109,.85), rgba(213,170,109,.28));
  filter: drop-shadow(0 0 6px rgba(213,170,109,.35));
  pointer-events:none;
}
.team__social{ display:grid; gap:12px; place-items:center; }

.ts-btn{
  width:48px; height:48px; display:grid; place-items:center; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ts-btn i{ font-size:18px; opacity:.95; }
.ts-btn:hover{
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(213,170,109,.18), rgba(213,170,109,.10));
  border-color: rgba(213,170,109,.55);
  box-shadow: 0 0 0 2px rgba(213,170,109,.22);
}

/* ===== content ===== */
.team__content{ display:grid; gap:18px; }
.team__role{
  margin-top:8px;
  background-image: linear-gradient(to bottom, #d5aa6d, #c79658, #b78251, #a87046, #8f5f3b);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-weight:800;
}
.team__name{ margin:0; font-size: clamp(32px,4.6vw,46px); line-height:1.12; }

.team__bio{ color: var(--text); opacity:.94; line-height:1.8; margin: 8px 0 0; max-width: 62ch; }

.team__bullets{
  margin: 0; padding: 0;
  list-style:none;
  display:grid; gap:10px;
}
.team__bullets li{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(213,170,109,.10);
  color: rgba(255,255,255,.85);
}
.team__bullets i{
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  background: rgba(213,170,109,.12);
  border:1px solid rgba(213,170,109,.25);
  color:#fff;
}

/* ===== slick arrows ===== */
.team .slick-prev, .team .slick-next{
  width:46px; height:46px;
  border-radius:14px;
  border:1px solid rgba(213,170,109,.22);
  background: rgba(10,14,13,.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  z-index: 5;
}
.team .slick-prev:hover, .team .slick-next:hover{
  background: rgba(213,170,109,.12);
  border-color: rgba(213,170,109,.60);
}
.team .slick-prev:before, .team .slick-next:before{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color:#fff;
  opacity: .95;
}
.team .slick-prev:before{ content: "\f053"; } /* chevron-left */
.team .slick-next:before{ content: "\f054"; } /* chevron-right */

/* dots */
.team .slick-dots{
  bottom: -28px;
}
.team .slick-dots li button:before{
  font-size:10px;
  color: rgba(255,255,255,.35);
  opacity:1;
}
.team .slick-dots li.slick-active button:before{
  color: rgba(213,170,109,.85);
}

/* responsive */
@media (max-width: 1160px){
  .team__wrap{ grid-template-columns: 1fr; align-items:start; }
  .team__media{ max-width: 100%; }
  .team__spine{ right: 14px; top: 14px; }
  .team .slick-prev{ left: 8px; }
  .team .slick-next{ right: 8px; }
}


.reviews{
  padding: 40px 40px;
}

.reviews__grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* ПК: 6 в ряд */
}

@media (max-width: 768px){
  .reviews__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* моб: 2 в ряд */
    gap: 12px;
  }
}

/* картка */
.rv-card{
   touch-action: manipulation;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(213,170,109,.22);
  background: linear-gradient(180deg, rgba(10,14,13,.82), rgba(10,14,13,.58));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 40px -28px rgba(0,0,0,.7);
  display:flex;
  flex-direction:column;
}

/* thumb з фікс. пропорцією */
.rv-thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;            /* якщо відео горизонтальні — постав 16/9 */
  overflow: hidden;
}

.rv-poster{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* затемнення під кнопку */
.rv-thumb::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(0,0,0,.05), rgba(0,0,0,.01)),
    linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,.08));
  pointer-events:none;
}

/* play button по центру */
.rv-play{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  border-radius: 999px;
  display:grid; place-items:center;
  cursor:pointer;

  border: 1px solid rgba(213,170,109,.55);
  background: rgba(10,14,13,.45);
  color:#fff;
  font-size: 22px;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 2px rgba(213,170,109,.16), 0 18px 50px rgba(0,0,0,.35);
  transition: transform .18s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.rv-card:hover .rv-play{
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(213,170,109,.14);
  border-color: rgba(213,170,109,.75);
  box-shadow: 0 0 26px 2px rgba(213,170,109,.22), 0 0 0 2px rgba(213,170,109,.18);
}

.rv-caption{
  display:grid;
  gap:4px;
  padding:10px 10px 12px;
  background: linear-gradient(180deg, rgba(11,15,14,.96), rgba(11,15,14,.84));
  border-top:1px solid rgba(213,170,109,.16);
}

.rv-caption strong{
  color:#f6efe1;
  font-size:12px;
  line-height:1.35;
  font-weight:700;
}

.rv-caption span{
  color:rgba(234,241,238,.72);
  font-size:11px;
  line-height:1.45;
}

/* ховаємо карточки */
.rv-card.is-hidden{ display:none; }

/* кнопка "Показати ще" */
.rv-more-wrap{ display:flex; justify-content:center; margin-top: 22px; }
.rv-more{
  height: 48px; padding: 0 22px;
  border-radius: 14px;
  border: 1px solid rgba(213,170,109,.28);
  background: rgba(10,14,13,.45);
  color:#fff;
  cursor:pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, background .2s ease, border-color .2s ease;
}
.rv-more:hover{
  transform: translateY(-1px);
  background: rgba(213,170,109,.12);
  border-color: rgba(213,170,109,.60);
}

.contact{ padding: clamp(48px,6vw,84px) 20px; color: var(--text); }
.contact__wrap{
  max-width: 1200px; margin: 0 auto;
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 22px;
  align-items: stretch;
}

.contact-card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10,14,13,.82), rgba(10,14,13,.58));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(213,170,109,.18);
  box-shadow:
    0 0px 22px -3px rgba(213,170,109,.12),
    0 0 0 1px rgba(213,170,109,.35) inset;
  padding: 22px;
}

.contact-card__rail{
  position:absolute;
  left: 10px; top: 18px; bottom: 18px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #d5aa6d, rgba(183,130,81,.35));
  filter: drop-shadow(0 0 6px rgba(213,170,109,.35));
  pointer-events:none;
}

/* form */
.contact-form__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field{ display:grid; gap: 8px; }
.field--full{ grid-column: 1 / -1; }

.field__label{
  font-size: 13px;
  color: rgba(255,255,255,.72);
  letter-spacing: .02em;
}

.field__input{
  width:100%;
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(213,170,109,.16);
  color: #fff;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.field__input::placeholder{ color: rgba(255,255,255,.45); }
.field__input:focus{
  border-color: rgba(213,170,109,.55);
  box-shadow: 0 0 0 3px rgba(213,170,109,.18);
}

.field__textarea{
  resize: vertical;
  min-height: 110px;
}

.consent{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 13px;
  color: rgba(255,255,255,.72);
}
.consent input{ margin-top: 3px; accent-color: #d5aa6d; }

.contact-form__actions{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
}

/* call button */
.call-btn2{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(213,170,109,.28);
  background: rgba(213,170,109,.10);
  color:#fff;
  text-decoration:none;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.call-btn2:hover{
  transform: translateY(-1px);
  background: rgba(213,170,109,.16);
  border-color: rgba(213,170,109,.60);
  box-shadow: 0 0 22px rgba(213,170,109,.18);
}

.contact-form__note{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items:center;
  color: rgba(255,255,255,.70);
  font-size: 13px;
}

/* info */
.contact-info__title{
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 10px;
}
.citem{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(213,170,109,.10);
  color:#fff;
  text-decoration:none;
  margin-top: 10px;
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.citem:hover{
  transform: translateY(-1px);
  border-color: rgba(213,170,109,.30);
  background: rgba(213,170,109,.08);
}
.citem__icon{
  width: 46px; height: 46px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, rgba(213,170,109,.20), rgba(213,170,109,.06));
  border: 1px solid rgba(213,170,109,.22);
}
.citem__text b{ display:block; font-size: 13px; }
.citem__text small{ display:block; opacity:.75; margin-top: 2px; }
.contact-form__actions .btn.btn--dark.btn--lg {
    /* width: 100%; */
    flex: 1;
}
.contact-info__socials{
  display:flex;
  gap: 10px;
  margin-top: 14px;
}
.social-btn{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color:#fff;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  text-decoration:none;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.social-btn:hover{
  transform: translateY(-1px);
  background: rgba(213,170,109,.14);
  border-color: rgba(213,170,109,.55);
}

.contact-info__mini{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mini-badge{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(213,170,109,.14);
  color: rgba(255,255,255,.86);
  font-size: 13px;
}

/* responsive */
@media (max-width: 980px){
  .contact__wrap{ grid-template-columns: 1fr; }
  .contact-form__grid{ grid-template-columns: 1fr; }
}



.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


.modal{ position:fixed; inset:0; z-index:9999; display:none; }
.modal.is-open{ display:block; }

.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.68);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal__box{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: min(720px, 92vw);
  border-radius: 24px;
  overflow:hidden;

  background: linear-gradient(180deg, rgba(10,14,13,.92), rgba(10,14,13,.78));
  border: 1px solid rgba(213,170,109,.18);
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
}

.modal__box::before{
  content:"";
  position:absolute;
  left: 14px; top: 16px; bottom: 16px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #d5aa6d, rgba(183,130,81,.35));
  filter: drop-shadow(0 0 6px rgba(213,170,109,.35));
  pointer-events:none;
}

.modal__close{
  position:absolute; right: 12px; top: 12px;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(213,170,109,.18);
  background: rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer;
  display:grid; place-items:center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.modal__close:hover{
  transform: translateY(-1px);
  background: rgba(213,170,109,.12);
  border-color: rgba(213,170,109,.55);
}

.modal__head{ padding: 22px 22px 12px 30px; }
.modal__kicker{
  display:inline-block;
  font-size: 12px;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: rgba(213,170,109,.95);
}
.modal__title{
  margin: 8px 0 6px;
  max-width: 26ch;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.2;
  text-wrap: balance;
}
.modal__subtitle{ margin: 0; color: rgba(255,255,255,.75); }

.modal__divider{
  width: 82px; height: 1px;
  margin: 12px 0 12px;
  background: linear-gradient(90deg, rgba(213,170,109,.85), rgba(213,170,109,0));
}

.modal__form{
  padding: 0 22px 22px 30px;
  display:grid;
  gap: 12px;
}

.mfield{ display:grid; gap: 8px; }
.mfield__label{ font-size: 13px; color: rgba(255,255,255,.72); }

.mfield__input{
  width:100%;
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(213,170,109,.16);
  color:#fff;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mfield__input::placeholder{ color: rgba(255,255,255,.45); }
.mfield__input:focus{
  border-color: rgba(213,170,109,.55);
  box-shadow: 0 0 0 3px rgba(213,170,109,.18);
}
.mfield__textarea{ resize: vertical; min-height: 110px; }

.mconsent{
  display:flex; gap: 10px; align-items:flex-start;
  font-size: 13px; color: rgba(255,255,255,.72);
}
.mconsent input{ margin-top: 3px; accent-color: #d5aa6d; }

.modal__actions{
  display:flex; gap: 12px; flex-wrap: wrap;
  align-items:center;
  margin-top: 6px;
}

.modal__note{
  margin-top: 8px;
  display:flex; gap: 10px; align-items:center;
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

/* На дуже вузьких екранах */
@media (max-width: 420px){
  .modal__head{ padding-left: 22px; }
  .modal__form{ padding-left: 22px; }
  .modal__box::before{ display:none; }
}


/* ===== Reveal without breaking hover transitions ===== */
.reveal, [data-reveal]{
  /* напрямок через змінні */
  --rx: 0px;
  --ry: 18px;
  --rs: 1;
  opacity: 0;
  transform: translate(var(--rx), var(--ry)) scale(var(--rs));
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

/* фінальний стан (без transition і без animation) */
.reveal.is-visible, [data-reveal].is-visible{
  opacity: 1;
  transform: translate(0,0) scale(1);
  filter: blur(0);
}

/* одноразова анімація появи */
.reveal.is-revealing, [data-reveal].is-revealing{
  animation: reveal-in 700ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes reveal-in{
  from { opacity: 0; transform: translate(var(--rx), var(--ry)) scale(var(--rs)); filter: blur(6px); }
  to   { opacity: 1; transform: translate(0,0) scale(1); filter: blur(0); }
}

/* Variants */
[data-anim="up"],    [data-reveal="up"]    { --ry: 18px; }
[data-anim="down"],  [data-reveal="down"]  { --ry: -18px; }
[data-anim="left"],  [data-reveal="left"]  { --rx: 18px; --ry: 0px; }
[data-anim="right"], [data-reveal="right"] { --rx: -18px; --ry: 0px; }
[data-anim="zoom"],  [data-reveal="zoom"]  { --rs: .98; --ry: 0px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal, [data-reveal]{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* =========================
   HERO + STATS: mobile responsive
   встав у кінець CSS
========================= */

/* 1) Загальні safety-фікси для цих секцій */
.main-wrap, .chapters {
  overflow-x: hidden;
}
.animated-headline,
.main-subtitle p,
.stat-card2__title,
.stat-card2__desc {
  overflow-wrap: anywhere;
}

/* 2) HERO: мобільна геометрія */
@media (max-width: 1024px){
  .main-wrap .flex{
    display: block; /* щоб не було “двох колонок” на вузьких */
  }
}

@media (max-width: 768px){
  .main-wrap{
    padding: 24px 16px;
  }

  .main-title .fit{
    max-width: 100% !important; /* у тебе inline max-width:fit-content */
  }

  .animated-headline{
    font-size: clamp(26px, 6.2vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
  }

  .animated-headline .text{
    display: inline-block;
    font-size: 0.92em;
    line-height: 1.1;
  }

  .rule-center{
    margin-top: 10px;
  }

  .main-subtitle{
    margin-top: 12px;
  }

  /* у тебе p всередині ul — не ідеально, але зробимо вигляд нормальний */
  .main-subtitle p{
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    opacity: .92;
  }

  /* 3) Кнопки: стакаються */
  .btn-wrap{
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }

  .btn-wrap .btn{
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* якщо кнопка велика */
  .btn--lg{
    padding: 14px 16px;
    min-height: 48px;
  }

  .btn__arrow{
    margin-left: 10px;
  }
}

/* 3) STATS GRID: мобільна сітка */
@media (max-width: 900px){
  .chapters{
    padding: 20px 16px;
  }

  .stats-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (min-width: 901px) and (max-width: 1200px){
  .stats-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* 4) Картка stat-card2: акуратно на мобілці */
@media (max-width: 768px){
  .stat-card2{
    padding: 14px 14px 14px 12px;
    border-radius: 16px;
  }

  /* рейка зліва (якщо є) */
  .stat-card2__rail{
    width: 3px;
    border-radius: 999px;
    margin-right: 10px;
  }

  /* іконка менша */
  .stat-card2__icon{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
  }

  .stat-card2__icon i{
    font-size: 18px;
  }

  /* текст */
  .stat-card2__title{
    font-size: 16px;
    line-height: 1.25;
    margin: 0 0 6px;
  }

  .stat-card2__desc{
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
    opacity: .9;
  }

  /* “500+” чіп */
  .stat-chip{
    font-size: 0.92em;
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: middle;
  }
}

/* 5) Дуже вузькі екрани (320–360px) */
@media (max-width: 360px){
  .main-wrap{
    padding: 20px 12px;
  }

  .animated-headline{
    font-size: 24px;
  }

  .btn--lg{
    padding: 13px 14px;
  }

  .stat-card2{
    padding: 12px;
  }

  .stat-card2__icon{
    width: 36px;
    height: 36px;
    border-radius: 11px;
    flex-basis: 36px;
  }

  .stat-card2__title{ font-size: 15px; }
  .stat-card2__desc { font-size: 13.5px; }
}


/* ===== Contact socials (site style) ===== */
.contact-social{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.contact-social__title{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  opacity: .92;
  margin: 0 0 10px;
}

.social-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* “chip” у стилі твоїх карток */
.social-chip{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 12px;
  border-radius: 14px;

  text-decoration: none;
  color: inherit;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(194,154,86,.18), 0 12px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);

  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.social-chip__ico{
  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  display: grid;
  place-items: center;
  border-radius: 14px;

  background: rgba(194,154,86,.12);
  border: 1px solid rgba(194,154,86,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.social-chip__ico i{
  font-size: 18px;
}

.social-chip__txt{
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}

.social-chip__go{
  margin-left: auto;
  font-size: 14px;
  opacity: .75;
  transform: translateY(-1px);
}

/* Hover / focus */
.social-chip:hover{
  transform: translateY(-2px);
  border-color: rgba(194,154,86,.45);
  background: rgba(255,255,255,.055);
}

.social-chip:focus-visible{
  outline: 2px solid rgba(194,154,86,.55);
  outline-offset: 2px;
}

/* Desktop: 2 в ряд (якщо місця достатньо) */
@media (min-width: 720px){
  .social-row{
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== HERO CLAIM (gold glass highlight) ===== */
.hero-claim{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
outline: 1px solid rgba(255,255,255,.06);

  padding: 12px 16px 12px 14px;
  border-radius: 25px;

  /* "скло" під твій стиль */
  background: linear-gradient(180deg, rgba(10,14,13,.74), rgba(10,14,13,.46));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(213,170,109,.28);
  box-shadow:
    0 16px 36px -22px rgba(0,0,0,.72),
    0 0 28px -10px rgba(213,170,109,.26),
    0 0 0 1px rgba(213,170,109,.22) inset;

  color: rgba(255,255,255,.92);
  line-height: 1.35;
  max-width: min(560px, 92vw);
  overflow: hidden;
}

/* золотий “рейл” зліва (підкреслює блок) */


/* легкий блиск, щоб виділявся на фото */
.hero-claim::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background:
    radial-gradient(260px 120px at 18% 20%, rgba(213,170,109,.18), transparent 60%),
    radial-gradient(240px 120px at 85% 80%, rgba(213,170,109,.10), transparent 60%);
  pointer-events:none;
}

/* Іконка */
.hero-claim__icon{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:grid;
  place-items:center;

  background: linear-gradient(180deg, rgba(213,170,109,.20), rgba(213,170,109,.06));
  border: 1px solid rgba(213,170,109,.40);
  box-shadow:
    0 0 0 2px rgba(213,170,109,.12),
    0 10px 24px -18px rgba(0,0,0,.65);

  color: #fff;
  flex: 0 0 auto;
}
.hero-claim__icon i{
  font-size: 16px;
  filter: drop-shadow(0 0 6px rgba(213,170,109,.25));
}

/* Текст */
.hero-claim__text{
 font-size: 16px;
  color: rgba(255,255,255,.86);
}
.hero-claim__text b{
  color: rgba(255,255,255,.98);
  font-weight: 900;
}

/* Hover (якщо треба) */
.hero-claim:hover{
  transform: translateY(-1px);
  box-shadow:
    0 18px 40px -22px rgba(0,0,0,.72),
    0 0 34px -10px rgba(213,170,109,.34),
    0 0 0 1px rgba(213,170,109,.28) inset;
}

/* Мобілка */
@media (max-width: 520px){
  .hero-claim{
   padding: 5px 12px 5px 12px;
    border-radius: 30px;
  }
  .hero-claim__icon{ width: 22px; height: 22px; }
  .hero-claim__text{ font-size: 14.5px; }
}

/* =========================
   Mobile/hero title (NEW classes)
   safe: mh-title*
========================= */

.mh-title{
  display: none;
  text-align: center;
  margin: 0 auto 14px;
  padding: 0;
  max-width: 28ch;

  /* чисто білий, читабельний */
  color: rgba(255,255,255,.96);

  font-weight: 800;
  font-size: clamp(34px, 3.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;

  text-transform: none;
  text-shadow: 0 14px 40px rgba(0,0,0,.55);
}

.mh-title__top{
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 10px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

.mh-title__bottom{
  display: block;
  margin-top: 10px;

  font-weight: 700;
  font-size: 0.82em;
  line-height: 1.25;
  letter-spacing: -0.01em;

  color: rgba(255,255,255,.86);
}

/* тонка золота рисочка між частинами */
.mh-title__bottom::before{
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  margin: 12px auto 10px;
  border-radius: 999px;

  background: rgba(194,154,86,.78);
  opacity: .88;
  box-shadow: 0 0 22px rgba(194,154,86,.20);
}

/* Tablet */
@media (max-width: 1024px){
  .mh-title{ max-width: 26ch; font-size: clamp(30px, 4vw, 42px); }
}

/* Mobile */
@media (max-width: 768px){
  .animated-headline{
    display: none;
  }
  .mh-title{
   display: block !important;
    font-size: clamp(24px, 6.2vw, 32px);
    line-height: 1.06;
    margin-bottom: 12px;
  }
  .mh-title__top{
    padding: 8px 14px;
    border-radius: 14px;
  }
  .mh-title__bottom{
    font-size: 0.86em;
    margin-top: 8px;
  }
  .mh-title__bottom::before{
    width: 86px;
    margin: 10px auto 8px;
  }
}

/* Very small */
@media (max-width: 360px){
  .mh-title{ font-size: 23px; max-width: 22ch; }
}

#services2 {
    padding: clamp(48px,6vw,84px) 20px;
}

.form-status{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
  display: none;
}

.form-status--loading{
  display: block;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
}

.form-status--ok{
  display: block;
  background: rgba(194,154,86,.14);
  border: 1px solid rgba(194,154,86,.35);
  color: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
}

.form-status--err{
  display: block;
  background: rgba(255,80,80,.10);
  border: 1px solid rgba(255,80,80,.28);
  color: rgba(255,230,230,.95);
}
.animated-headline.reveal.is-visible {
    padding-top: 204px;
}
@media (min-width: 900px){
.intro-video__layout video{
    max-width: 50%;
    display: block;
    margin: 0 auto;
}
.intro-video__card:nth-child(1) video{
    margin: 0 0 0 auto !important;
}
.intro-video__card:nth-child(2) video{
    margin: 0 auto 0 0 !important;
}
}
@media (max-width: 850px) {
    .btn.btn--dark.btn--lg {
    font-size: 14px;
    /* width: 100%; */
    flex: 1;
}

.main-home::before{
  transform: scale(1);              /* старт: трохи наближено */
}
.author__spine {
    display: none;
}
.call-btn2 {
    width: 100%;
    text-align: center;
    justify-content: center;
}
.services2__wrap {
    padding: 0;
}
.mh-title.reveal.is-visible {
    padding-top: 260px;
}
.why__left.reveal.is-visible {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
    .mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
       margin-top: 70px;
      
    }
    .main-wrap{
        padding: 0px 0px 0px 0px;
height: 100%;
    }
    .book-3d--glow.book-3d--entrance.book-3d--breathing.fx.is-inview {
    max-width: 70%;
}


.author__media{
    max-width: 100%;
}
.page-transition {
   height: 100%;
}
.author__spine {
    position: absolute;
    right: 0px;
    top: 15px;
    width: 82px;
    padding: 14px 0;
    border-radius: 22px;
    bottom: auto;
    background: linear-gradient(180deg, rgba(10,14,13,.82), rgba(10,14,13,.58));
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 46px -22px rgba(0,0,0,.6),
0 0 0 1px rgba(0,0,0,.25) inset;
}
.author__photo.book-3d--glow.book-3d--entrance.book-3d--breathing {
    max-width: 80%;
    margin: 0 auto;
}
.author__wrap .rule-center {
   
    justify-items: left; 
   
}
/* keyframes у пікселях через CSS-змінну */
@keyframes rm-left  { from{transform:translate3d(0,0,0)} to{transform:translate3d(calc(-1 * var(--dist)),0,0)} }
@keyframes rm-right { from{transform:translate3d(calc(-1 * var(--dist)),0,0)} to{transform:translate3d(0,0,0)} }

.rm-row{ contain: paint; }
.rm-track{
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* duration/animation-name задаєш як і раніше у своїх класах */
}
@media (hover: hover) and (pointer: fine){
  .rm-row:hover .rm-track{ animation-play-state: paused; }
}

 
    #phone {
    font-size: 16px;
}
    label span{
        padding-left: 10px;
    }
    input[type="text"] {
    font-size: 16px;
}
.sf-nav a{
    font-size: 11px;
}
.rm-track{
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    will-change: transform;
    /* два набори елементів усередині (оригінал + клон) забезпечують безшовність */
    animation: rm-left 60s linear infinite;
  }
    .flex{
        flex-direction: column-reverse;
        height: 100%;
    }
    .card{
        display: none;
    }
   
   
}
     .btn-wrap{
        flex-wrap: wrap;
       flex-direction: column-reverse;
     }

    .header{
        z-index: 100;
    }
    .service-item{
        height: 100% !important;
    }
   
    .team-title {
        font-size: 16px;
    }
    .team-subtitle {
        font-size: 12px;
        
    }
   .move, .move-1{
    opacity: 1;
    transform: translateY(0px); 
    transform: translateX(0px); 
}
  .dekstop{
    display: block;
}
    .mobile {
        display: flex;
        align-items: center;
        justify-content: center;
    }

   .gold-button{
    margin-top:10px;
   }
   .main-home{
    height: 100vh;
   }
   .main-title{
    height: 100vh;
   }
   .container {
   
}
   .main-wrap{
    flex-direction: column;
  
   }
   .num {
    font-size: 14px;
}
.main-img {
    max-width: 100%; 
    flex: 50; 
}
.main-img-item {

width: 45%;
}
.video-wrap{
    max-width: 80%;
    margin: 0 auto;
 }
.width{
    order: 2;
}
.mbl{
    display: none;
}
.main-btn{
    width: 100%;
}
.main-title li p{
    font-size: 14px;
}
.main-title ul {
    display: flex;
    justify-content: space-around;
}
.service-icon {
   
    max-width: 100%;
}

.icon{
    font-size: 14px;
}
.bullet i{
    font-size: 12px !important;
    width: 10px;
}
.bullet-wrap{
    gap: 10px;
}
.service-title-top.block.move {
    font-size: 22px;
}
.video-slider img{
     max-width: 180px;
  border-radius: 16px;
  display: block;
 
}
 .reviews video {
 max-width: 180px;
  border-radius: 16px;
  display: block;
 
}
.deckstop{
    display: none;
}
.main-bottom {
    max-width: 90%;
    margin: 30px auto 40px auto; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position:relative !important;
    bottom: 10px;
    left: 0 !important;
    transform: none;
    
    padding: 5px 10px;
    color: #fff;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    box-shadow: 0 0 18px rgba(222, 178, 101, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: box-shadow 0.3s ease;
}
.main-bottom span{
    font-size: 12px;
}
.main-bottom i{
    font-size: 12px;
}

.field__input {
    font-size: 16px;
    line-height: 1.25;
}
   .num-text{
    font-size: 12px;
   }

.why {
    padding: 28px 0 60px;
}
.services2 {
    padding: 0px;
}
.team__cta {
    display: flex;
    justify-content: center;
}
.reviews {
    padding: 0px 20px;
}
    .animated-headline .text {
        display: inline-block;
        font-size: 16px;
        line-height: 1.1;
    }
.main-title ul p {
text-align: center;
}
   .main-item {
    flex: 45%;
}
.icon-item {
    flex: 45%;
}
.gallary-item{
    max-width: 28%;
}
.footer{
   
       
          
            align-items: center;
            text-align: center;
     
    
}
.footer-phone{
    display: none;
}
.footer-wrap{
   flex-direction: column;
    align-items: center;
    margin: 10px;
}
.footer-wrap p {
    margin: 10px;
}
.footer-wrap a{
    padding: 5px 0;
}
.footer-social{
   margin: 30px 0 20px 0;
}
.phone-btn {
    width: 40%;
}
.revert .service-img{
    order: 2;
    margin-top: 20px;
}
.revert .service-text{
    order: 1;
}
.revert .service-title{
font-size: 24px !important;
}
.main-img{
   margin-top: 100px;
   }
.service-item{
    flex-direction: column;
    margin-top: 50px !important;
}
.list-ul {
    padding: 20px 0 0 0;
}

    .audio {
        width: 100% !important;
    }

.pay .service-title-top {
   
}
.list-item .service-title-top{
    padding-left: 0;
}
.service-img{
    order: 1;
    max-width: 90%;
}
.service-text{
    margin-top: 30px;
    text-align: left !important;
   margin-left: 0;
    text-align: center;
    max-width: 90%;
}
.main-item-img img{
    height: 100%;
    border-radius: 15px 15px 0 0;
}
.main-about-wrap{
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.main-item {
    max-width: 90%;
    border-radius: 15px;
    margin-top: 10px !important;
}
.gallary-item{
    max-width: 40%;
}
.title{
   font-size: 22px;
   margin-top: 100px !important;
}
.phone-btn{

    width: 80%;
    padding: 20px;
}

#contacts.service-text{
    flex-direction: column;
    align-items: center;
    text-align: center !important;
    font-size: 20px;
    margin: 30px 0 30px 0;
   
}
#contacts.service-title{
    font-size: 20px;
}
.rev-wrap{
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.rev-item{
    padding: 20px 20px 20px 20px;
    margin: 10px 10px 30px 10px;
    width: 90%;
}
.rev-icon-item span{
    font-size: 12px;
}
.num-wrap{
    flex-wrap: wrap;

}
.etap{
    width: 45%;
    margin-bottom: 20px;
}
.end-title{
    font-size: 20px
}
.end-form{
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.footer-wrap p {
    display: flex;
    font-size: 9px;
    color: #9c9c9c;
    text-align: left;
}
.form-input {
   margin-top: 15px;
    width: 276px;
}
.form-input:nth-child(2){
    margin-bottom: 15px;
}
.end-form button{
    margin-top: 15px;
    width: 276px;
}
.table-header{
    font-size: 14px;
}
.table-item{
    font-size: 11px;
}
.audio_field{
   width: 200px;
}

.footer-logo {
    display: flex;
    align-items: center;
   
    width: 100%;
    font-size: 14px;
    color: #9c9c9c;

}



@media (max-width: 650px) {
    .chaptersХ{
        padding: 0 20px;
    }
    .mb-none{
        display: none !important;
    }
    .header-wrap{
        padding: 14px 0px;
        gap: 0;
    }
    .fit {
    text-align: center;
    max-width: none !important;
}
    :root{
                    /* фон секції */
                 /* фон картки (теплий беж) */
         /* основний текст */
            /* зірочки */
    --radius: 22px;                /* радіус карток */
  
    --speed: 8s;                  /* швидкість руху (менше = швидше) */
                /* відступи між картками */
  }
    .order{
        order: 1;
    }
    
    .move, .move-1{
        opacity: 1;
        transform: translateY(0px); 
    }
   
    .team-title {
        font-size: 16px;
    }
    body{
       
    }
    .service-title-top::before{
        display: none !important;
    }
    .rev-list li {
        padding: 1px 20px;
    }
    .rev-list li span::before{
        left: 10px;
top: 7px;
    } 
    .service-title-top {
        width: 100%;
        }
    .service-title-top span{
    width: 100%;
    }
    .service-title-top{
        text-align: center !important;
        font-size: 22px;
    }
    .bot{
        padding: 20px;
    }
    .bot-title{
        font-size: 16px;
text-align: center;
padding: 40px 20px;
    }
    .width{
        max-width: 100%;
    }
    .list-container{
        flex-wrap: wrap;
    }
    .list-item{
        max-width: 100%;
        order: 2;
    }
    .left{
        transform: translateX(0px); 
    }
    .main-subtitle{
        margin-right: 0;
        padding: 0;
    }
   .main-subtitle  p {
    font-size: 14px;
    width: 100%;
}
    .list-item img{
        max-width: 80%;
        margin: 0 auto;
        display: block;
    }
    .list-item .service-title-top{
        padding-top: 20px;
    }
    .list-item.move-1{
        order: 1;
    }
    .partners-raw{
        display: flex;
    }
   
   .main-title li{
    margin-right: 10px;
display: flex;
align-items: center;

flex: 33%;
text-align: left;
   }
   
   .slick-slider{
    margin: 10px 0 !important;
   }
   .sliders-column{
    display: none;
   }
   .mobile-none{
    display: block !important;
   }
        .main-title li p {
            font-size: 18px;
        }
        .view{
           
        }
        .audio_field {
            width: 100% !important;
            text-align: center;
        }
        .audio_field source{
            display: block;
            width: 100% !important;
        }
         .mb{
            font-size: 14px;
         }
         .none{
            display: none;
         }
         .cirkle li span::before {
display: none;
         }
         .footer-wrap a {
    font-size: 10px !important;
    color: #9c9c9c;
    padding: 5px;
}
         .team-img  img{
            border-radius: 10px;
            display: block;
         height: 350px;
        }
        .main-home{
           
        }
}

@media (min-width: 851px) {
    .main-home {
        min-height: 100vh;
        height: auto;
    }

    .main-wrap {
        min-height: calc(100vh - 70px);
        height: auto;
        padding-top: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .main-wrap .flex {
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .main-title {
        height: auto;
        min-height: 0;
        justify-content: center;
    }
}