/* === RESET === */
*,*::before,*::after{
	box-sizing:border-box;
	margin:0;
	padding:0}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 20
}

html{
	scroll-behavior:smooth;
	font-size:16px}
body{
	font-family:var(--font-body);
	font-size:var(--text-base);
	line-height:var(--leading-normal);
	color:var(--color-text-primary);
	background:var(--color-bg);
	overflow-x:hidden;
	transition:background var(--transition-base),color var(--transition-base)}
img,svg{
	display:block;
	max-width:100%}
a{
	color:inherit;
	text-decoration:none}
button{
	cursor:pointer;
	font-family:inherit;
	border:none;
	background:none}
ul,ol{
	list-style:none}
input,textarea,select{
	font-family:var(--font-display)}

/* === LAYOUT === */
.container{
	width:100%;
	max-width:var(--container-max);
	margin:0 auto;
	padding:0 var(--container-pad)}
.section{
	padding:var(--space-3xl) 0}
.section--alt{
	background:var(--color-surface)}
.section__eyebrow{
	font-family:var(--font-display);
	font-size:var(--text-sm);
	font-weight:500;
	letter-spacing:var(--tracking-wide);
	color:var(--color-accent-hover);
	text-transform:uppercase;
	margin-bottom:var(--space-sm);
	display:flex;
	align-items:center;
	gap:var(--space-sm)}
.section__eyebrow::before{
	content:'';
	display:inline-block;
	width:20px;
	height:2px;
	background:var(--color-accent-hover);
	border-radius:2px}
.section__title{
	font-family:var(--font-display);
	font-size:clamp(1.75rem,3vw,2.25rem);
	font-weight:700;
	line-height:var(--leading-tight);
	letter-spacing:var(--tracking-tight);
	margin-bottom:var(--space-md)}
.section__lead{
	font-size:var(--text-lg);
	color:var(--color-text-secondary);
	max-width:620px;
	margin-bottom:var(--space-xl);
	line-height:var(--leading-relaxed)}
.section__header{
	margin-bottom:var(--space-2xl)}
h1,h2,h3,h4{
	font-family:var(--font-display);
	line-height:var(--leading-tight);
	letter-spacing:var(--tracking-tight)}
p{
	line-height:var(--leading-relaxed)}

/* === BUTTONS === */
.btn{
	font-family:var(--font-display);
	font-size:var(--text-sm);
	font-weight:600;
	padding:13px 28px;
	border-radius:var(--radius-md);
	border:none;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	gap:var(--space-sm);
	text-decoration:none;
	transition:background var(--transition-base),color var(--transition-base),transform var(--transition-fast),box-shadow var(--transition-base);
	white-space:nowrap;
	position:relative;
	overflow:hidden}
.btn-primary{
	background:var(--color-primary);
	color:var(--color-linen-light)}
.btn-primary:hover{
	background:var(--color-primary-hover);
	transform:translateY(-2px);
	box-shadow:var(--shadow-md)}
.btn-primary:active{
	transform:none;
	box-shadow:none}
.btn-primary:focus-visible{
	outline:none;
	box-shadow:var(--shadow-focus-primary)}
/*Кнопка CTA*/
.arrow {
  /* Додаємо плавний перехід */
  transition: transform 0.3s ease;
}
.btn-cta:hover .arrow {transform: translateX(0.45rem) scale(1.5);}
.btn-cta{
	background:var(--color-accent);
	color:var(--color-warm-black);
	font-weight:700;
    transform: translateZ(0);
	backface-visibility: hidden;
}
.btn-cta:hover{
	background:var(--color-accent-hover);
	transform:translateY(-3px) scale(1.01);
	box-shadow: var(--shadow-md);									  
}
.btn-cta:hover::before {
  filter: blur(1px);
}
.btn-cta:hover::after {
  background: #ffe45c;
}
.btn-cta:active{
	transform:translateY(-1px) scale(0.99)}
.btn-cta:focus-visible{
	outline:none;
	box-shadow:var(--shadow-focus-accent)}
.btn-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,255,255,0.15) 40%,
    rgba(255,255,255,0.75) 50%,
    rgba(255,255,255,0.15) 60%,
    transparent 80%
  );
  transform: skewX(-20deg);
  animation: shimmerSweep 5s linear infinite;
  pointer-events: none;
  z-index: 1;
  filter: blur(1px);
}
@keyframes shimmerSweep {
  0% {
    left: -150%;
  }
  100% {
    left: 200%;
  }
}
/*Кінець кнопки CTA*/	
.btn-secondary{
	background:transparent;
	color:var(--color-primary);
	border:var(--border-width-md) solid var(--color-primary)}
.btn-secondary:hover{
	background:var(--color-primary-tint);
	transform:translateY(-2px)}
.btn-secondary:focus-visible{
	outline:none;
	box-shadow:var(--shadow-focus-primary)}
.btn-ghost-light{
	background:rgba(250,250,248,.08);
	color:var(--color-linen-light);
	border:var(--border-width) solid rgba(250,250,248,.3);
	backdrop-filter:blur(4px)}
.btn-ghost-light:hover{
	background:rgba(250,250,248,.2);
	transform:translateY(-2px)}
.btn-lg{
	padding:16px 36px;
	font-size:var(--text-base)}
.btn-sm{
	padding:9px 18px;
	font-size:var(--text-xs)}
.btn-icon svg{
	width:18px;
	height:18px;
	flex-shrink:0}
.btn-full{
	width:100%;
	justify-content:center}

/* === NAV === */
.nav{
	position:fixed;
	top:0;
	left:0;
	right:0;
	height:var(--nav-height);
	z-index:1000;
	transition:background var(--transition-base),box-shadow var(--transition-base)}
.nav.scrolled{
	background:rgba(250,250,248,.9);
	backdrop-filter:blur(16px);
	-webkit-backdrop-filter:blur(16px);
	box-shadow:var(--shadow-sm)}
[data-theme="dark"] .nav.scrolled{
	background:rgba(22,20,18,.92)}
.nav__inner{
	height:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--space-xl)}
.nav__logo{
	display:flex;
	align-items:center;
	flex-shrink:0}
.nav__logo img{
	height:48px;
	width:auto;
	transition:opacity var(--transition-base)}
.nav__logo:hover img{
	opacity:.75}
.nav__links{
	display:flex;
	align-items:center;
	gap:2rem;margin:0 auto}
.nav__link{
    font-family:var(--font-display);
	font-size:var(--text-base);
    font-weight:500;
    color:var(--color-text-muted);
    position:relative;
    padding:0.5rem 0;
}
.nav__link::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:2px;
    background:var(--color-primary);
    transition:width var(--transition-base);
}
.nav__link:hover{
    color:var(--color-accent)}
.nav__link:hover::after {
    width:100%;
        }
.nav__link.active{
	color:var(--color-primary);
	font-weight:600}
.nav__link.active::after{
    width:100%;}
.nav__actions{
	display:flex;
	align-items:center;
	gap:var(--space-sm);
	flex-shrink:0}

.theme-toggle{
	width:40px;
	height:40px;
	border-radius:var(--radius-md);
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-text-secondary);
	transition:background var(--transition-base),color var(--transition-base);
	cursor:pointer}
.theme-toggle:hover{
	background:var(--color-surface-2);
	color:var(--color-primary)}
.theme-toggle svg{
	width:20px;
	height:20px}
.nav__burger{
	display:none;
	width:40px;
	height:40px;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:5px;
	cursor:pointer;
	border-radius:var(--radius-md);
	transition:background var(--transition-base)}
.nav__burger:hover{
	background:var(--color-surface-2)}
.nav__burger span{
	display:block;
	width:22px;
	height:2px;
	background:var(--color-text-primary);
	border-radius:2px;
	transition:transform var(--transition-base),opacity var(--transition-base);
	transform-origin:center}
.nav__burger.open span:nth-child(1){
	transform:translateY(7px) rotate(45deg)}
.nav__burger.open span:nth-child(2){
	opacity:0;
	transform:scaleX(0)}
.nav__burger.open span:nth-child(3){
	transform:translateY(-7px) rotate(-45deg)}
.nav__mobile{
	display:none;
	position:fixed;
	top:var(--nav-height);
	left:0;
	right:0;
	background:var(--color-surface);
	border-bottom:var(--border-width) solid var(--color-border);
	padding:var(--space-lg) var(--container-pad);
	flex-direction:column;
	gap:var(--space-xs);
	box-shadow:var(--shadow-lg);
	z-index:999;
	opacity:0;
	transform:translateY(-16px);
	transition:opacity var(--transition-base),transform var(--transition-base),display var(--transition-base) allow-discrete}
.nav__mobile.open{
	display:flex;
	opacity:1;
	transform:translateY(0)}
.nav__mobile .nav__link{
	padding:12px 16px;
	font-size:var(--text-2xl);
	border-radius:var(--radius-md)}
.nav__mobile .nav__actions{
	margin-top:var(--space-md);
	flex-direction:column}
.nav__mobile .btn{
	width:100%;
	justify-content:center}

/* === HERO === */
.hero{
	position:relative;
	min-height:100vh;
	display:flex;
	align-items:center;
	background:var(--color-warm-black);
	color:var(--color-linen-light);
	overflow:hidden;
	padding-top:var(--nav-height)}
.hero__bg{
	position:absolute;
	inset:0;z-index:0}
.hero__video,
.hero__image{
  position: absolute;
  right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  z-index: -1; /* Відео на задньому фоні */
  object-fit: cover;
  filter: grayscale(0.3) brightness(0.5);
}
.hero__bg-gradient{
	position:absolute;
	inset:0;
	background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(27,79,138,.3) 0%,transparent 70%),radial-gradient(ellipse 60% 40% at 80% 100%,rgba(200,134,10,.12) 0%,transparent 60%),linear-gradient(160deg,#1A1814 0%,#1e1c18 50%,#161210 100%)}
.hero__bg-grid{
	position:absolute;
	inset:0;
	background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
	background-size:60px 60px;
	animation:gridDrift 20s ease-in-out infinite alternate}
@keyframes gridDrift{from{transform:translate(0,0)}to{transform:translate(10px,10px)}}

.hero__content{
	position:relative;
	z-index:1;
	width:100%;
	padding:var(--space-4xl) 0 var(--space-3xl)}
.hero__inner{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:var(--space-3xl);
	align-items:center}
.hero__eyebrow{
	font-family:var(--font-display);
	font-size:var(--text-sm);
	font-weight:500;
	letter-spacing:var(--tracking-wide);
	color:var(--color-accent);
	text-transform:uppercase;
	margin-bottom:var(--space-md);
	display:flex;
	align-items:center;
	gap:var(--space-sm)}
.hero__eyebrow::before{
	content:'';
	display:inline-block;
	width:24px;
	height:2px;
	background:var(--color-accent);
	border-radius:2px}
.hero__title{
	font-family:var(--font-display);
	font-size:clamp(2.2rem,5vw + .5rem,4.5rem);
	font-weight:900;
	line-height:var(--leading-tight);
	letter-spacing:var(--tracking-tight);
	color:var(--color-linen-light);
	margin-bottom:var(--space-lg)}
.hero__title .accent{
	color:var(--color-accent)}
.hero__subtitle{
	font-family:var(--font-body);
	font-size:var(--text-lg);
	font-weight:300;
	color:rgba(240,237,232,.65);
	line-height:var(--leading-relaxed);
	margin-bottom:var(--space-2xl);
	max-width:520px}
.hero__actions{
	display:flex;
	gap:var(--space-md);
	flex-wrap:wrap}

.hero__scroll{
	position:absolute;
	bottom:32px;
	left:50%;
	transform:translateX(-50%);
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:var(--space-sm);
	z-index:1;
	animation:fadeInUp 1s 1.5s ease both}
.hero__scroll-text{
	font-family:var(--font-display);
	font-size:var(--text-xs);
	letter-spacing:var(--tracking-wide);
	color:rgba(240,237,232,.4);
	text-transform:uppercase}


/* = Animated Mouse Scroll = */
.mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid rgba(240,237,232,.4);
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: rgba(240,237,232,.4);
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}

/* === BENEFITS STRIP === */
.benefits-strip{
	background:var(--color-primary);
	color:var(--color-linen-light);
	padding:var(--space-lg) 0;
	overflow:hidden}
.benefits-strip__track{
	display:flex;
	gap:var(--space-3xl);
	animation:stripScroll 30s linear infinite;
	width:max-content}
.benefits-strip__item{
	display:flex;
	align-items:center;
	gap:var(--space-sm);
	font-family:var(--font-display);
	font-size:var(--text-sm);
	font-weight:500;
	white-space:nowrap;
	opacity:.9}
.benefits-strip__item svg{
	width:16px;
	height:16px;
	opacity:.7;
	flex-shrink:0}
.benefits-strip__dot{
	width:4px;
	height:4px;
	border-radius:50%;
	background:rgba(255,255,255,.3);
	flex-shrink:0}
@keyframes stripScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* === Короткий ОПИС === */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);

  align-items: stretch;
}

.about-left {
  display: flex;
  flex-direction: column;
}

.about-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;

  margin-top: auto;
  padding-top: var(--space-xl);
}
@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-actions {
    margin-top: var(--space-lg);
    padding-top: 0;
  }
}

/* ==========================================
   FLAG TYPES (BENTO GRID)
========================================== */

.flag-types-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(3,180px);
    gap:var(--space-lg);
}

.flag-type{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-xl);
    background:var(--color-surface);
    box-shadow:var(--shadow-md);
    cursor:pointer;
    transition:
        transform var(--transition-transform),
        box-shadow var(--transition-base);
}

.flag-type:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-xl);
}

.flag-type--large{
    grid-column:1 / span 2;
    grid-row:1 / span 3;
}

.flag-type--wide{
    grid-column:3 / span 2;
    grid-row:1;
}

.flag-type img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s ease;
}

.flag-type:hover img{
    transform:scale(1.08);
}

.flag-type__overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:var(--space-xl);
    background:linear-gradient(
        to top,
        rgba(0,0,0,.70) 0%,
        rgba(0,0,0,.35) 45%,
        rgba(0,0,0,.05) 100%
    );
}

.flag-type__overlay h3{
    font-family:var(--font-display);
    font-size:clamp(1.25rem,2vw,2rem);
    font-weight:700;
    color:#fff;
    margin-bottom:.45rem;
}

.flag-type:not(.flag-type--large):not(.flag-type--wide)
.flag-type__overlay h3{
    font-size:1.35rem;
    margin-bottom:0;
}

.flag-type__overlay p{
    font-family:var(--font-body);
    font-size:var(--text-base);
    line-height:1.5;
    color:rgba(255,255,255,.88);
    max-width:90%;
}

/* ---------- планшет ---------- */

@media (max-width:992px){

    .flag-types-grid{
        grid-template-columns:repeat(2,1fr);
        grid-template-rows:auto;
    }

    .flag-type--large,
    .flag-type--wide{
        grid-column:auto;
        grid-row:auto;
    }

    .flag-type{
        min-height:280px;
    }

}

/* ---------- телефон ---------- */

@media (max-width:640px){

    .flag-types-grid{
        grid-template-columns:1fr;
    }

    .flag-type{
        min-height:260px;
    }

    .flag-type__overlay{
        padding:var(--space-lg);
    }

    .flag-type__overlay h3{
        font-size:1.4rem;
    }

    .flag-type__overlay p{
        font-size:var(--text-sm);
    }

}

/* === GRIDS === */
.grid-2{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:var(--space-lg)}
.grid-3{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:var(--space-lg)}
.grid-4{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:var(--space-lg)}

/* Form SECTION */

.form-grid{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:var(--space-3xl);
}

.form-left{
  min-width:0;
}

.contact-form{
  min-width:0;
}

.contact-form .form-wrap{
  width:100%;
  max-width:none;
}

.form-wrap__title{
  color: var(--color-text-primary);
}

@media (max-width: 992px){

  .form-grid{
    display:block;
  }

  .form-left{
    margin-bottom:var(--space-2xl);
  }
}
/* === FORMS === */
.form-wrap{
	background:var(--color-surface);
	border:var(--border-width) solid var(--color-border);
	border-radius:var(--radius-2xl);
	padding:var(--space-xl);
	box-shadow:var(--shadow-lg)}
.form-wrap__title{
	font-family:var(--font-display);
	font-size:var(--text-2xl);
	font-weight:700;
	margin-bottom:var(--space-xs)}
.form-wrap__sub{
	color:var(--color-text-muted);
	font-family:var(--font-display);
	font-size:var(--text-sm);
	margin-bottom:var(--space-xl)}
.form-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:var(--space-md)}
.form-group{
	display:flex;
	flex-direction:column;
	gap:var(--space-xs)}
.form-label{
	font-family:var(--font-display);
	font-size:var(--text-sm);
	font-weight:500;
	color:var(--color-text-secondary)}
.form-req{
	color:var(--color-accent)}
.form-input,.form-textarea,.form-select{
	font-family:var(--font-display);
	font-size:var(--text-base);
	color:var(--color-text-primary);
	background:var(--color-bg);
	border:var(--border-width-md) solid var(--color-border);
	border-radius:var(--radius-md);
	padding:11px 14px;
	width:100%;
	transition:border-color var(--transition-base),box-shadow var(--transition-base),background var(--transition-base);
	outline:none;
	appearance:none}
.form-input::placeholder,.form-textarea::placeholder{
	color:var(--color-text-muted)}
.form-input:focus,.form-textarea:focus,.form-select:focus{
	border-color:var(--color-primary);
	box-shadow:var(--shadow-focus-primary);
	background:var(--color-surface)}
.form-input.error,.form-textarea.error{
	border-color:var(--color-error);
	background:var(--color-error-bg)}
.form-error{
	font-family:var(--font-display);
	font-size:var(--text-xs);
	color:var(--color-error);
	min-height:16px}
.form-textarea{
	resize:vertical;
	min-height:110px;
	line-height:var(--leading-normal)}
.form-honeypot{
	position:absolute;
	left:-9999px;
	opacity:0;
	pointer-events:none;
	height:0;
	overflow:hidden;tab-index:-1}
.form-success{
	display:none;
	text-align:center;
	padding:var(--space-xl);
	flex-direction:column;
	align-items:center;
	gap:var(--space-md)}
.form-success.visible{
	display:flex;
	animation:fadeInUp .5s ease both}
.form-success__icon{
	width:64px;
	height:64px;
	border-radius:50%;
	background:var(--color-success-bg);
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-success)}
.form-success__icon svg{
	width:32px;
	height:32px}
.form-success__title{
	font-family:var(--font-display);
	font-size:var(--text-2xl);
	font-weight:700}
.form-success__text{
	color:var(--color-text-secondary);
	font-size:var(--text-base)}
.forms-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:var(--space-xl);
	align-items:start}

/* === MODAL === */
.modal-overlay{
	position:fixed;
	inset:0;
	background:rgba(26,24,20,.75);
	backdrop-filter:blur(4px);
	z-index:2000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:var(--container-pad);
	opacity:0;
	pointer-events:none;
	transition:opacity var(--transition-base)}
.modal-overlay.open{
	opacity:1;
	pointer-events:all}
.modal{
	background:var(--color-surface);
	border:var(--border-width) solid var(--color-border);
	border-radius:var(--radius-2xl);
	padding:var(--space-2xl);
	width:100%;
	max-width:520px;
	max-height:90vh;
	overflow-y:auto;
	box-shadow:var(--shadow-xl);
	transform:translateY(24px) scale(.97);
	transition:transform var(--transition-slow),opacity var(--transition-base);
	opacity:0;
	position:relative}
.modal-overlay.open .modal{
	transform:translateY(0) scale(1);
	opacity:1}
.modal__close{
	position:absolute;
	top:var(--space-lg);
	right:var(--space-lg);
	width:36px;
	height:36px;
	border-radius:var(--radius-md);
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-text-muted);
	transition:background var(--transition-base),color var(--transition-base)}
.modal__close:hover{
	background:var(--color-surface-2);
	color:var(--color-text-primary)}
.modal__close svg{
	width:20px;
	height:20px}

/* === CTA SECTION === */
.cta-section{
	background:var(--color-primary);
	color:var(--color-linen-light);
	padding:var(--space-3xl) 0;
	position:relative;
	overflow:hidden;
	/*text-align:center*/}
.cta-section::before{
	content:'';
	position:absolute;
	inset:0;
	background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(255,255,255,.06) 0%,transparent 70%)}
/*.cta-section__inner{
	position:relative;
	z-index:1}*/
.cta-section__title{
	font-family:var(--font-display);
	font-size:clamp(1.75rem,3vw,2.5rem);
	font-weight:700;
	color:var(--color-linen-light);
	margin-bottom:var(--space-sm)}
.cta-section__sub{
	font-family:var(--font-body);
	font-size:var(--text-lg);
	color:rgba(240,237,232,.7);
	margin-bottom:var(--space-xl)}

/* === STATS === */
.stats-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:var(--space-lg);
	text-align:center}
.stat{
	background:var(--color-surface);
	border:var(--border-width) solid var(--color-border);
	border-radius:var(--radius-lg);
	padding:var(--space-xl);
	box-shadow:var(--shadow-xs)}
.stat__number{
	font-family:var(--font-display);
	font-size:clamp(2rem,4vw,3.5rem);
	font-weight:700;
	color:var(--color-primary);
	line-height:1;
	margin-bottom:var(--space-xs);
	display:block}
.stat__label{
	font-family:var(--font-display);
	font-size:var(--text-sm);
	color:var(--color-text-secondary)}

/* === FOOTER === */
	
	.footer {
  background: var(--color-surface-2);
  overflow: hidden;
}

.footer__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding:
    var(--space-xl)
    var(--container-pad)
    0/*var(--space-lg)*/;
  min-height: 460px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* =========================
   TOP
========================= */

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xl);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 96px);
}

.footer__link {
  position: relative;

  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.7vw, 2rem);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);

  color: var(--color-text-primary);
  text-decoration: none;

  transition:
    color var(--transition-color),
    opacity var(--transition-opacity);
}

.footer__link::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -6px;

  width: 0;
  height: 1px;

  background: var(--color-primary-hover);

  transition: width var(--transition-base);
}

.footer__link:hover {
  opacity: .9;
  color: var(--color-primary-hover);
}

.footer__link:hover::after {
  width: 100%;
}

.footer__copyright {
  flex-shrink: 0;

  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);

  color: var(--color-text-primary);

  text-align: right;
}

.footer__legal {
  display: none;
}

/* =========================
   BOTTOM
========================= */

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-xl);

  margin-top: var(--space-4xl);
}

.footer__logo {
  display: inline-flex;
  align-items: flex-end;
}

.footer__logo img {
  width: min(720px);
  height: auto;
  display: block;
}

.footer__slogan {
  max-width: 340px;
  margin: 0;
  padding-bottom: var(--space-xl);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 2.2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);

  color: var(--color-accent);
}

/* =========================
   TABLET
========================= */

@media (max-width: 1024px) {

  .footer__container {
    min-height: auto;
  }

  .footer__top {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .footer__copyright {
    text-align: left;
  }

  .footer__bottom {
    margin-top: var(--space-3xl);
  }

  .footer__logo img {
    width: min(560px, 100%);
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .footer__container {
    min-height: auto;
    padding:
      var(--space-xl)
      var(--space-md)
      0/*var(--space-xl)*/;
  }

  .footer__top {
    display: block;
  }

  .footer__nav {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .footer__link {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.1;
    font-weight: 500;
  }

  /* ховаємо desktop copyright */
  .footer__copyright {
    display: none;
  }

  .footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;

    margin-top: 5rem;
  }

  /* слоган над логотипом */
  .footer__slogan {
    order: 1;

    max-width: 260px;
    margin: 0;

    font-size: clamp(1.6rem, 5vw, 2rem);
    line-height: 1.15;

    color: var(--color-accent);
  }

  .footer__logo {
    order: 2;
  }

  .footer__logo img {
    width: 320px;
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* нижня смуга як на референсі */
  .footer__legal {
    display: flex;
    align-items: center;

    min-height: 48px;
	margin-bottom: 48px;
    padding: 0 var(--space-md);

    background: rgba(255,255,255,.35);

    font-family: var(--font-display);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
  }
}

/* === ANIMATIONS === */
[data-reveal]{
	opacity:0;
	transform:translateY(32px);
	transition:opacity .7s ease,transform .7s ease}
[data-reveal].revealed{
	opacity:1;
	transform:translateY(0)}
[data-reveal="left"]{
	transform:translateX(-32px)}
[data-reveal="left"].revealed{
	transform:translateX(0)}
[data-reveal="right"]{
	transform:translateX(32px)}
[data-reveal="right"].revealed{
	transform:translateX(0)}
[data-reveal="scale"]{
	transform:scale(.95) translateY(16px)}
[data-reveal="scale"].revealed{
	transform:scale(1) translateY(0)}
[data-delay="1"]{
	transition-delay:.1s}
[data-delay="2"]{
	transition-delay:.2s}
[data-delay="3"]{
	transition-delay:.3s}
[data-delay="4"]{
	transition-delay:.4s}
[data-delay="5"]{
	transition-delay:.5s}
[data-delay="6"]{
	transition-delay:.6s}
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.anim-hero-title{
	animation:fadeInUp .9s .2s cubic-bezier(.22,1,.36,1) both}
.anim-hero-eyebrow{
	animation:fadeInUp .9s .1s cubic-bezier(.22,1,.36,1) both}
.anim-hero-sub{
	animation:fadeInUp .9s .4s cubic-bezier(.22,1,.36,1) both}
.anim-hero-actions{
	animation:fadeInUp .9s .6s cubic-bezier(.22,1,.36,1) both}
.anim-hero-visual{
	animation:fadeInUp 1s .5s cubic-bezier(.22,1,.36,1) both}

/* === CONTACT PAGE === */
.contact-grid{
	display:grid;
	grid-template-columns:1fr 1.4fr;
	gap:var(--space-2xl);
	align-items:start}
.contact-info{
	display:flex;
	flex-direction:column;
	gap:var(--space-lg)}
.contact-info__item{
	display:flex;
	gap:var(--space-md);
	align-items:flex-start}
.contact-info__icon{
	width:44px;
	height:44px;
	border-radius:var(--radius-md);
	background:var(--color-primary-tint);
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-primary);
	flex-shrink:0}
.contact-info__icon svg{
	width:22px;
	height:22px}
.contact-info__label{
	font-family:var(--font-display);
	font-size:var(--text-xs);
	font-weight:500;
	color:var(--color-text-muted);
	text-transform:uppercase;
	letter-spacing:var(--tracking-wide);
	margin-bottom:4px}
.contact-info__value{
	font-family:var(--font-display);
	font-size:var(--text-base);
	font-weight:500;
	color:var(--color-text-primary)}
.contact-info__value a:hover{
	color:var(--color-primary)}
.messengers{
	display:flex;
	gap:var(--space-sm);
	flex-wrap:wrap;
	margin-top:var(--space-sm)}
.messenger-btn{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:8px 16px;
	border-radius:var(--radius-pill);
	font-family:var(--font-display);
	font-size:var(--text-xs);
	font-weight:600;
	transition:transform var(--transition-fast),box-shadow var(--transition-base)}
.messenger-btn:hover{
	transform:translateY(-2px);
	box-shadow:var(--shadow-md)}
.messenger-btn--viber{
	background:#7360F2;
	color:#fff}
.messenger-btn--telegram{
	background:#2AABEE;
	color:#fff}
.messenger-btn--whatsapp{
	background:#25D366;
	color:#fff}
.messenger-btn svg{
	width:16px;
	height:16px}
.map-wrap{
	border-radius:var(--radius-xl);
	overflow:hidden;
	height:380px;
	border:var(--border-width) solid var(--color-border);
	box-shadow:var(--shadow-md)}
.map-wrap iframe{
	width:100%;
	height:100%;
	border:none;
	display:block}

/* === SCROLLBAR === */
::-webkit-scrollbar{
	width:6px}
::-webkit-scrollbar-track{
	background:transparent}
::-webkit-scrollbar-thumb{
	background:var(--color-border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{
	background:var(--color-text-muted)}

/* === RESPONSIVE === */
@media(max-width:1024px){
  .hero__inner{
	  grid-template-columns:1fr;
	  text-align:center}
  .hero__text{
	  margin-top:var(--space-3xl)}
  .hero__subtitle{
	  margin:0 auto var(--space-xl)}
  .hero__actions{
	  justify-content:center}
  .hero__visual{
	  display:none}
  .hero__text{
	  margin-top:var(--space-3xl)}
  /*.footer__top{
	  grid-template-columns:1fr 1fr}*/
  .grid-4{
	  grid-template-columns:repeat(2,1fr)}
  .contact-grid{
	  grid-template-columns:1fr}
  .forms-grid{
	  grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav__links,.nav__actions{
	  display:none}
  .nav__burger{
	  display:flex}
  :root{--space-3xl:56px;--space-4xl:72px}
  .section__title{
	  font-size:var(--text-3xl)}
  .grid-2,.grid-3{
	  grid-template-columns:1fr}
  .form-row{
	  grid-template-columns:1fr}
  /*.footer__top{
	  grid-template-columns:1fr;gap:var(--space-xl)}*/
  .stats-grid{
	  grid-template-columns:1fr}
  .cta-section__actions{
	  flex-direction:column;
	  align-items:center}
  .section{
	  padding:var(--space-2xl) 0}
  .form-wrap{
	  padding:var(--space-lg)}
}
@media(max-width:480px){
  .hero__actions{
	  flex-direction:column}
  .hero__actions .btn{
	  width:100%;
	  justify-content:center}
}

/*══════════════════════════════════════════════
    assortment ACCORDION
    BASE + DESKTOP
══════════════════════════════════════════════*/

.assortment-accordion{
    display:flex;
    gap:var(--space-md);
    margin-top:var(--space-3xl);
    width:100%;
    height:640px;

}

/*══════════════════════════════════════════════*/

.assortment-card{

    position:relative;
    flex:.78;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    padding:0;
    border:0;
    border-radius:var(--radius-2xl);
    background:transparent;
    cursor:pointer;

    isolation:isolate;

    transition:

        flex .65s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease,
        filter .35s ease;

}

/*══════════════════════════════════════════════*/

.assortment-card.is-active{

    flex:4;

}

/*══════════════════════════════════════════════*/

.assortment-card__media{

    position:absolute;
    inset:0;
    z-index:-2;

}


.assortment-card__media img{

    width:100%;
    height:100%;
    display:block;
    object-fit:cover;

    object-position:center;

    transform:translate3d(0,0,0) scale(1);
    will-change:transform;
    transition:

        transform .55s cubic-bezier(.22,.61,.36,1),

        filter .45s ease;

}


/*══════════════════════════════════════════════
    SHADE
══════════════════════════════════════════════*/

.assortment-card::before{

    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:

    linear-gradient(

        180deg,
        rgba(0,0,0,.04),
        rgba(0,0,0,.18) 42%,
        rgba(0,0,0,.78)

    );

    transition:

        opacity .35s ease,
        background .35s ease;

}


/*══════════════════════════════════════════════*/

.assortment-card:not(.is-active)::before{

    background:

    linear-gradient(
        180deg,
        rgba(0,0,0,.22),
        rgba(0,0,0,.82)

    );

}


/*══════════════════════════════════════════════*/

.assortment-card:not(.is-active) img{

    filter:

        grayscale(.25)
        brightness(.72)
        saturate(.75);

}


/*══════════════════════════════════════════════*/

.assortment-card.is-active img{

    filter:none;

}


/*══════════════════════════════════════════════*/

.assortment-card:hover{

    box-shadow:

        0 24px 70px rgba(0,0,0,.16);

}


/*══════════════════════════════════════════════*/

.assortment-card__body{

    position:relative;
    z-index:2;
    width:100%;
    padding:

        var(--space-2xl)
        var(--space-xl);

}


/*══════════════════════════════════════════════*/

.assortment-card__title{

    margin:0 0 var(--space-md);
    max-width:480px;
    font-family:var(--font-display);
    font-size:clamp(1.55rem,2vw,2.25rem);
    font-weight:700;
	text-align: left;
    line-height:1.12;
    color:#fff;
    text-wrap:balance;

}


/*══════════════════════════════════════════════*/

.assortment-card__text{

    max-width:520px;
    margin:0;
	text-align: left;
    font-family:var(--font-body);
    font-size:var(--text-base);
    line-height:1.8;
    color:rgba(255,255,255,.9);

}

/*══════════════════════════════════════════════
    COLLAPSED
══════════════════════════════════════════════*/

.assortment-card:not(.is-active)
.assortment-card__body{

    position:absolute;
    left:50%;
    bottom:34px;
    transform:

        translateX(-50%);

}


/*══════════════════════════════════════════════*/

.assortment-card:not(.is-active)
.assortment-card__title{

    margin:0 40px;
    max-width:none;
    white-space:nowrap;
    transform:

        rotate(-90deg);

    transform-origin:left bottom;
   /* font-size:1.05rem;*/

}


/*══════════════════════════════════════════════*/

.assortment-card:not(.is-active)
.assortment-card__text{

    display:none;
}


/*══════════════════════════════════════════════
    ACTIVE
══════════════════════════════════════════════*/

.assortment-card.is-active
.assortment-card__body{

    animation:

        cardReveal .55s cubic-bezier(.22,.61,.36,1);

}

/*══════════════════════════════════════════════*/

.assortment-card.is-active
.assortment-card__title{

    animation:

        titleReveal .55s .08s both;

}

/*══════════════════════════════════════════════*/

.assortment-card.is-active
.assortment-card__text{

    animation:

        textReveal .55s .16s both;

}

/*══════════════════════════════════════════════
    HOVER
══════════════════════════════════════════════*/

.assortment-card:hover::before{

    opacity:.92;

}


/*══════════════════════════════════════════════*/

.assortment-card:focus-visible{

    outline:3px solid var(--color-primary);
    outline-offset:6px;

}

/*══════════════════════════════════════════════
    ANIMATIONS
══════════════════════════════════════════════*/

@keyframes cardReveal{

    from{

        opacity:0;

        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:none;
    }

}


@keyframes titleReveal{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{
        opacity:1;
        transform:none;
    }

}


@keyframes textReveal{

    from{

        opacity:0;

        transform:translateY(22px);

    }

    to{
        opacity:1;
        transform:none;
    }

}

/*══════════════════════════════════════════════
    TABLET
══════════════════════════════════════════════*/

@media (max-width:1100px){

.assortment-accordion{

    gap:var(--space-sm);
    height:560px;

}

.assortment-card{

    flex:.9;

}

.assortment-card.is-active{

    flex:3;

}

.assortment-card__body{

    padding:

        var(--space-xl)
        var(--space-lg);

}

.assortment-card__title{

    max-width:360px;
    font-size:clamp(1.3rem,2vw,1.8rem);

}

.assortment-card__text{

    max-width:360px;
    font-size:.95rem;
    line-height:1.7;

}

.assortment-card:not(.is-active)
.assortment-card__title{

    font-size:.95rem;

}

}

/*══════════════════════════════════════════════
    SMALL TABLET
══════════════════════════════════════════════*/

@media (max-width:900px){

.assortment-accordion{

    gap:10px;
    height:500px;

}

.assortment-card{

    flex:1;

}

.assortment-card.is-active{

    flex:2.4;

}

.assortment-card__body{

    padding:

        var(--space-lg);

}

.assortment-card__title{

    font-size:1.35rem;

}

.assortment-card__text{

    font-size:.92rem;

}

.assortment-card:not(.is-active)
.assortment-card__title{

    font-size:.9rem;

}

}

/*══════════════════════════════════════════════
    MOBILE
══════════════════════════════════════════════*/

@media (max-width:767px){

.assortment-accordion{

    display:flex;
    flex-direction:column;
    height:auto;
    gap:var(--space-lg);

}


/*══════════════════════════════════════*/

.assortment-card{

    flex:none;
    width:100%;
    min-height:90px;
    border-radius:var(--radius-xl);
    transition:

        min-height .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease;

}


/*══════════════════════════════════════*/

.assortment-card.is-active{

    min-height:360px;

}


/*══════════════════════════════════════*/

.assortment-card__media{

    position:absolute;
    inset:0;

}


/*══════════════════════════════════════*/

.assortment-card::before{

    background:

    linear-gradient(
        180deg,
        rgba(0,0,0,.12),
        rgba(0,0,0,.72)

    );

}


/*══════════════════════════════════════*/

.assortment-card__body{

    position:relative;
    transform:none;
    left:auto;
    bottom:auto;
    padding:

        var(--space-xl)
        var(--space-lg);

}


/*══════════════════════════════════════*/

.assortment-card__title{

    transform:none;
    white-space:normal;
    max-width:100%;
    font-size:1.2rem;

}


/*══════════════════════════════════════*/

.assortment-card__text{

    display:block;
    max-width:none;
    font-size:.95rem;

}


/*══════════════════════════════════════
    COLLAPSED
══════════════════════════════════════*/

.assortment-card:not(.is-active){

    min-height:84px;

}

.assortment-card:not(.is-active)::before{

    background:

    linear-gradient(
        90deg,
        rgba(0,0,0,.78),
        rgba(0,0,0,.45)

    );

}

.assortment-card:not(.is-active) img{

    filter:

        brightness(.55)
        grayscale(.15);

}

.assortment-card:not(.is-active)
.assortment-card__body{

    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:

        0 var(--space-lg);

}

.assortment-card:not(.is-active)
.assortment-card__title{

    transform:none;
    white-space:normal;
    margin:0;
    font-size:1rem;

}

.assortment-card:not(.is-active)
.assortment-card__text{

    display:none;

}


/*══════════════════════════════════════
    ACTIVE
══════════════════════════════════════*/

.assortment-card.is-active::before{

    background:

    linear-gradient(
        180deg,
        rgba(0,0,0,.05),
        rgba(0,0,0,.78)

    );

}

.assortment-card.is-active
.assortment-card__body{

    display:block;

}

/*══════════════════════════════════════
    HOVER OFF
══════════════════════════════════════*/

.assortment-card:hover{

    box-shadow:none;

}

.assortment-card:hover img{

    transform:none !important;

}

}

/*══════════════════════════════════════════════
    SMALL MOBILE
══════════════════════════════════════════════*/

@media (max-width:480px){

.assortment-accordion{

    gap:14px;

}

.assortment-card.is-active{

    min-height:320px;

}

.assortment-card__body{

    padding:22px;

}

.assortment-card__title{

    font-size:1.1rem;

}

.assortment-card__text{

    font-size:.9rem;

    line-height:1.65;

}

}
/*══════════════════════════════════════════════
    END assortment ACCORDION
══════════════════════════════════════════════*/

/* ===================================================
   FULLSCREEN GOOGLE MAP
=================================================== */

.location-map{

    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;

}

.location-map iframe{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    border:0;

    filter:
        saturate(.92)
        contrast(1.02);

}

.location-map::after{

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(18,20,24,.82) 0%,
            rgba(18,20,24,.55) 35%,
            rgba(18,20,24,.18) 65%,
            rgba(18,20,24,.05) 100%
        );

    pointer-events:none;

}

.location-map__overlay{

    position:relative;
    z-index:2;

    height:100%;

    display:flex;
    align-items:center;

    padding-inline:clamp(24px,5vw,90px);

}

.location-map__card{

    width:min(460px,100%);

    padding:48px;

    border-radius:32px;

    background:rgba(18,20,24,.78);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
        0 30px 80px rgba(0,0,0,.45);

}

.location-map__eyebrow{

    display:inline-flex;

    padding:.45rem 1rem;

    margin-bottom:20px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    color:var(--color-primary);

    font-family:var(--font-display);

    font-size:.85rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.location-map__title{

    margin:0 0 20px;

    color:#fff;

    font-size:clamp(2rem,4vw,3.2rem);

    line-height:1.1;

    font-family:var(--font-display);

}

.location-map__text{

    margin-bottom:32px;

    color:rgba(255,255,255,.82);

    font-size:1.1rem;

    line-height:1.8;

}

.location-map__buttons{

    display:flex;
    flex-wrap:wrap;
    gap:16px;

}

.location-map .btn{

    min-width:200px;
}

.location-map:hover iframe{

    transform:scale(1.015);

    transition:transform .8s ease;

}

/* ==========================
   Tablet
========================== */

@media (max-width:991px){

.location-map{

    height:80vh;

}

.location-map__overlay{

    justify-content:center;

    padding:32px;

}

.location-map__card{

    padding:36px;

}

.location-map__buttons{

    flex-direction:column;

}

.location-map .btn{

    width:100%;
    min-width:unset;

}

}

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

@media (max-width:768px){

.location-map{

    height:70vh;

}

.location-map::after{

    background:
        linear-gradient(
            180deg,
            rgba(18,20,24,.88),
            rgba(18,20,24,.45)
        );

}

.location-map__overlay{

    align-items:flex-end;

    padding:24px;

}

.location-map__card{

    width:100%;

    padding:28px;

    border-radius:24px;

}

.location-map__title{

    font-size:2rem;

}

.location-map__text{

    font-size:1rem;

}

}
/* ==========================================================
   CONTACTS
   Desktop CSS 1/3
========================================================== */

.contacts{

    position:relative;

    padding:clamp(100px,10vw,140px) 0;

    overflow:hidden;

    background:
        radial-gradient(circle at top right,
            rgba(196,157,67,.06),
            transparent 42%),
        radial-gradient(circle at bottom left,
            rgba(196,157,67,.04),
            transparent 40%);

}

/* декоративне світіння */

.contacts::before{

    content:"";

    position:absolute;

    width:560px;
    height:560px;

    right:-260px;
    top:-260px;

    border-radius:50%;

    background:

        radial-gradient(circle,
            rgba(196,157,67,.08),
            transparent 72%);

    pointer-events:none;

}

/* ==========================================================
   HEADER
========================================================== */

.contacts-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.contacts-header .section-eyebrow{

    margin-bottom:18px;

}

.contacts-header .section-title{

    margin-bottom:22px;

}

.contacts-header .section-subtitle{

    max-width:700px;

    margin:0 auto;

    color:var(--color-text-muted);

}

/* ==========================================================
   GRID
========================================================== */

.contacts-grid{

    display:grid;

    grid-template-columns:

        minmax(360px,420px)
        minmax(0,1fr);

    gap:42px;

    align-items:stretch;

}

/* ==========================================================
   FORM
========================================================== */

.contacts-form{

    position:relative;

    display:flex;

    flex-direction:column;

    padding:42px;

    border-radius:32px;

    background:var(--color-surface);

    border:1px solid var(--color-border);

    box-shadow:var(--shadow-lg);

    overflow:hidden;

}

/* декоративний акцент */

.contacts-form::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top right,
            rgba(196,157,67,.10),
            transparent 42%);

    pointer-events:none;

}

.contacts-form>*{

    position:relative;

    z-index:2;

}

.contacts-form__title{

    margin:0 0 14px;

    font-family:var(--font-display);

    font-size:clamp(1.7rem,2vw,2.2rem);

    line-height:1.15;

}

.contacts-form__text{

    margin-bottom:34px;

    color:var(--color-text-muted);

    line-height:1.75;

}

/* ==========================================================
   FORM
========================================================== */

.contact-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/* ==========================================================
   FIELD
========================================================== */

.field{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.field label{

    font-size:.92rem;

    font-weight:600;

    color:var(--color-text-primary);

    letter-spacing:.01em;

}

/* ==========================================================
   INPUTS
========================================================== */

.field input,
.field textarea{

    width:100%;

    appearance:none;

    border:none;

    outline:none;

    padding:17px 20px;

    border-radius:18px;

    background:var(--color-bg);

    border:1px solid var(--color-border);

    color:var(--color-text-primary);

    font-family:inherit;

    font-size:15px;

    transition:

        border-color .35s ease,

        box-shadow .35s ease,

        background .35s ease,

        transform .35s ease;

}

/* ==========================================================
   PLACEHOLDER
========================================================== */

.field input::placeholder,
.field textarea::placeholder{

    color:rgba(140,145,155,.9);

}

/* ==========================================================
   HOVER
========================================================== */

.field input:hover,
.field textarea:hover{

    border-color:

        rgba(196,157,67,.35);

}

/* ==========================================================
   FOCUS
========================================================== */

.field input:focus,
.field textarea:focus{

    border-color:

        var(--color-primary);

    background:

        rgba(255,255,255,.02);

    box-shadow:

        0 0 0 5px rgba(196,157,67,.12);

    transform:

        translateY(-1px);

}

/* ==========================================================
   TEXTAREA
========================================================== */

.field textarea{

    resize:vertical;

    min-height:190px;

    line-height:1.7;

}

/* ==========================================================
   BUTTON
========================================================== */

.contact-form .btn{

    width:100%;

    margin-top:8px;

    justify-content:center;

    min-height:58px;

    font-size:1rem;

    letter-spacing:.02em;

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.contact-form .btn:hover{

    transform:translateY(-2px);

    box-shadow:

        0 16px 34px rgba(196,157,67,.28);

}

.contact-form .btn:active{

    transform:translateY(0);

}
/* ==========================================================
   CONTACTS
   Desktop CSS 2/3
   MAP + GLASS CARD
========================================================== */


/* ==========================================================
   MAP CONTAINER
========================================================== */

.contacts-map{

    position:relative;

    overflow:hidden;

    min-height:760px;

    border-radius:36px;

    background:#dfe6ea;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        var(--shadow-xl);

    isolation:isolate;

}


/* декоративне світло */

.contacts-map::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.02),
            rgba(0,0,0,.04)
        );

    pointer-events:none;

    z-index:2;

}


/* ==========================================================
   GOOGLE MAP
========================================================== */

#map{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    transition:

        transform .9s cubic-bezier(.22,1,.36,1);

    will-change:transform;

}


/* ==========================================================
   PREMIUM HOVER
========================================================== */

.contacts-map:hover #map{

    transform:scale(1.02);

}


/* ==========================================================
   GLASS CARD
========================================================== */

.map-card{

    position:absolute;

    left:34px;

    bottom:34px;

    width:360px;

    padding:30px;

    z-index:20;

    color:#fff;

    border-radius:28px;

    overflow:hidden;

    background:

        rgba(18,20,24,.68);

    backdrop-filter:

        blur(22px);

    -webkit-backdrop-filter:

        blur(22px);

    border:

        1px solid rgba(255,255,255,.12);

    box-shadow:

        0 28px 70px rgba(0,0,0,.38);

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}


/* hover */

.contacts-map:hover .map-card{

    transform:

        translateY(-6px);

    box-shadow:

        0 36px 90px rgba(0,0,0,.45);

}


/* світлова пляма */

.map-card::before{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:-110px;
    top:-120px;

    border-radius:50%;

    background:

        radial-gradient(circle,
            rgba(196,157,67,.18),
            transparent 70%);

    pointer-events:none;

}


/* ==========================================================
   BADGE
========================================================== */

.map-card__badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:9px 16px;

    margin-bottom:22px;

    border-radius:999px;

    background:

        rgba(255,255,255,.08);

    border:

        1px solid rgba(255,255,255,.08);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.06em;

    text-transform:uppercase;

}


/* ==========================================================
   ANIMATED DOT
========================================================== */

.map-card__dot{

    position:relative;

    width:10px;
    height:10px;

    border-radius:50%;

    background:

        var(--color-primary);

}


/* хвиля */

.map-card__dot::after{

    content:"";

    position:absolute;

    inset:-7px;

    border-radius:50%;

    border:2px solid

        var(--color-primary);

    animation:

        contactPulse 2.8s infinite;

}


/* ==========================================================
   PULSE
========================================================== */

@keyframes contactPulse{

    0%{

        transform:scale(.4);

        opacity:1;

    }

    70%{

        transform:scale(2.5);

        opacity:0;

    }

    100%{

        opacity:0;

    }

}


/* ==========================================================
   CARD TITLE
========================================================== */

.map-card h3{

    margin:0 0 18px;

    font-size:2rem;

    line-height:1.15;

    font-family:var(--font-display);

}


/* ==========================================================
   CARD TEXT
========================================================== */

.map-card p{

    margin:0;

    color:

        rgba(255,255,255,.84);

    line-height:1.8;

}


.map-card strong{

    display:inline-block;

    margin-bottom:6px;

    color:#fff;

}


/* ==========================================================
   BUTTON
========================================================== */

.map-card__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin-top:28px;

    padding:

        15px 24px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    background:

        var(--color-primary);

    font-weight:600;

    transition:

        transform .35s,

        box-shadow .35s,

        background .35s;

}


/* hover */

.map-card__button:hover{

    transform:

        translateY(-2px);

    box-shadow:

        0 14px 34px rgba(196,157,67,.42);

}


/* ==========================================================
   SVG
========================================================== */

.map-card__button svg{

    width:18px;

    height:18px;

    fill:none;

    stroke:#fff;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

    transition:

        transform .35s ease;

}


/* анімація стрілки */

.map-card__button:hover svg{

    transform:

        translateX(5px);

}


/* ==========================================================
   MAP SHADOW
========================================================== */

.contacts-map::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.08);

    pointer-events:none;

}
/* ==========================================================
   CONTACTS
   Desktop CSS 3/3
   CONTACT INFO + SOCIALS
========================================================== */


/* ==========================================================
   INFO GRID
========================================================== */

.contacts-info{

    margin-top:42px;

    display:grid;

    grid-template-columns:
        1.4fr
        1fr
        1fr
        1.3fr;

    gap:22px;

}


/* ==========================================================
   CONTACT CARD
========================================================== */

.contact-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    padding:24px;

    overflow:hidden;

    text-decoration:none;

    color:inherit;

    border-radius:24px;

    background:var(--color-surface);

    border:1px solid var(--color-border);

    box-shadow:var(--shadow-md);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


/* світловий ефект */

.contact-item::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:0;

    background:

        radial-gradient(circle at top right,
            rgba(196,157,67,.12),
            transparent 55%);

    transition:opacity .35s;

}


/* hover */

.contact-item:hover{

    transform:translateY(-6px);

    border-color:rgba(196,157,67,.28);

    box-shadow:

        0 20px 44px rgba(0,0,0,.12);

}


.contact-item:hover::before{

    opacity:1;

}


/* ==========================================================
   ICON
========================================================== */

.contact-item__icon{

    flex:0 0 62px;

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:

        rgba(196,157,67,.08);

    color:var(--color-primary);

    font-size:1.45rem;

    transition:

        transform .35s ease,

        background .35s ease;

}


.contact-item:hover .contact-item__icon{

    transform:scale(1.08);

    background:

        rgba(196,157,67,.16);

}


/* ==========================================================
   TEXT
========================================================== */

.contact-item span{

    display:block;

    margin-bottom:6px;

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--color-text-muted);

}


.contact-item strong{

    display:block;

    font-size:1rem;

    line-height:1.6;

    color:var(--color-text-primary);

}


/* ==========================================================
   SOCIAL CARD
========================================================== */

.contact-social{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:24px;

    border-radius:24px;

    background:var(--color-surface);

    border:1px solid var(--color-border);

    box-shadow:var(--shadow-md);

}


/* ==========================================================
   TITLE
========================================================== */

.contact-social__title{

    display:block;

    margin-bottom:22px;

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--color-text-muted);

}


/* ==========================================================
   SOCIAL LIST
========================================================== */

.social-list{

    display:flex;

    align-items:center;

    gap:16px;

}


/* ==========================================================
   SOCIAL BUTTON
========================================================== */

.social-btn{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    text-decoration:none;

    background:var(--color-bg);

    border:1px solid var(--color-border);

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


/* ==========================================================
   SVG
========================================================== */

.social-btn svg{

    width:24px;

    height:24px;

    fill:var(--color-primary);

    transition:
        transform .35s ease,
        fill .35s ease;

}


/* ==========================================================
   HOVER
========================================================== */

.social-btn:hover{

    transform:
        translateY(-4px)
        scale(1.08);

    background:var(--color-primary);

    border-color:var(--color-primary);

    box-shadow:

        0 18px 34px rgba(196,157,67,.32);

}


.social-btn:hover svg{

    fill:#fff;

    transform:scale(1.08);

}


/* ==========================================================
   FOCUS
========================================================== */

.social-btn:focus-visible,
.contact-item:focus-visible,
.map-card__button:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 4px rgba(196,157,67,.18);

}


/* ==========================================================
   SUBTLE ANIMATIONS
========================================================== */

.contacts-grid>*{

    transition:

        transform .45s ease;

}


.contacts-grid>*:hover{

    transform:translateY(-2px);

}


/* ==========================================================
   PREMIUM DETAILS
========================================================== */

.contacts-form,
.contacts-map,
.contact-item,
.contact-social{

    backdrop-filter:saturate(120%);

}


/* ==========================================================
   GLASS HIGHLIGHT
========================================================== */

.contacts-form::after,
.contact-social::after,
.contact-item::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    pointer-events:none;

    border-top:

        1px solid rgba(255,255,255,.06);

}


/* ==========================================================
   SMOOTH LINKS
========================================================== */

.contact-item,
.social-btn,
.map-card__button{

    -webkit-tap-highlight-color:transparent;

}


/* ==========================================================
   SELECTION
========================================================== */

.contacts ::selection{

    background:

        rgba(196,157,67,.25);

    color:inherit;

}

/* ==========================================================
   CONTACTS
   Tablet + Mobile
========================================================== */


/* ==========================================================
   LARGE TABLET
========================================================== */

@media (max-width:1200px){

.contacts{

    padding:110px 0;

}

.contacts-grid{

    grid-template-columns:

        360px
        1fr;

    gap:32px;

}

.contacts-map{

    min-height:650px;

}

.contacts-info{

    grid-template-columns:

        repeat(2,1fr);

}

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

.contacts{

    padding:90px 0;

}

/* ---------- */

.contacts-header{

    margin-bottom:54px;

}

/* ---------- */

.contacts-grid{

    grid-template-columns:1fr;

    gap:28px;

}

/* карта зверху */

.contacts-map{

    order:-1;

    min-height:540px;

}

/* форма */

.contacts-form{

    padding:34px;

}

/* ---------- */

.map-card{

    width:auto;

    left:24px;

    right:24px;

    bottom:24px;

    padding:24px;

}

.map-card h3{

    font-size:1.7rem;

}

.map-card p{

    font-size:.96rem;

}

.map-card__button{

    width:100%;

    justify-content:center;

}

/* ---------- */

.contacts-info{

    margin-top:30px;

    grid-template-columns:

        repeat(2,1fr);

    gap:18px;

}

.contact-social{

    grid-column:1/-1;

}

.social-list{

    justify-content:center;

}

}


/* ==========================================================
   SMALL TABLET
========================================================== */

@media (max-width:768px){

.contacts{

    padding:80px 0;

}

/* ---------- */

.contacts-header{

    margin-bottom:42px;

}

.contacts-header .section-title{

    font-size:2rem;

}

/* ---------- */

.contacts-form{

    padding:28px;

    border-radius:26px;

}

.contacts-form__title{

    font-size:1.7rem;

}

.contacts-form__text{

    margin-bottom:26px;

}

/* ---------- */

.field input,
.field textarea{

    padding:15px 18px;

}

.field textarea{

    min-height:170px;

}

/* ---------- */

.contacts-map{

    min-height:460px;

    border-radius:28px;

}

/* ---------- */

.map-card{

    left:18px;

    right:18px;

    bottom:18px;

    border-radius:22px;

    padding:22px;

}

.map-card h3{

    font-size:1.45rem;

}

.map-card__badge{

    font-size:.72rem;

}

.map-card__button{

    margin-top:22px;

    min-height:52px;

}

/* ---------- */

.contacts-info{

    grid-template-columns:1fr;

    gap:16px;

}

.contact-item{

    padding:20px;

}

.contact-item__icon{

    width:56px;

    height:56px;

    flex:0 0 56px;

}

.social-list{

    justify-content:flex-start;

    flex-wrap:wrap;

}

.social-btn{

    width:56px;

    height:56px;

}

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:576px){

.contacts{

    padding:70px 0;

}

/* ---------- */

.contacts-header{

    margin-bottom:36px;

}

.contacts-header .section-subtitle{

    font-size:.96rem;

}

/* ---------- */

.contacts-form{

    padding:22px;

    border-radius:22px;

}

.contacts-form__title{

    font-size:1.5rem;

}

.contact-form{

    gap:18px;

}

/* ---------- */

.field{

    gap:8px;

}

.field label{

    font-size:.88rem;

}

.field input,
.field textarea{

    border-radius:16px;

    font-size:15px;

}

.field textarea{

    min-height:150px;

}

/* ---------- */

.contact-form .btn{

    min-height:54px;

}

/* ---------- */

.contacts-map{

    min-height:400px;

    border-radius:22px;

}

/* ---------- */

#map{

    transform:none !important;

}

/* ---------- */

.map-card{

    left:14px;

    right:14px;

    bottom:14px;

    padding:18px;

    border-radius:18px;

}

.map-card h3{

    font-size:1.25rem;

    margin-bottom:12px;

}

.map-card p{

    font-size:.9rem;

    line-height:1.6;

}

.map-card__badge{

    margin-bottom:16px;

}

.map-card__button{

    width:100%;

    margin-top:18px;

    min-height:50px;

    font-size:.95rem;

}

/* ---------- */

.contacts-info{

    margin-top:22px;

    gap:14px;

}

.contact-item{

    padding:18px;

    border-radius:18px;

}

.contact-item__icon{

    width:52px;

    height:52px;

    flex:0 0 52px;

    border-radius:16px;

    font-size:1.25rem;

}

.contact-item strong{

    font-size:.94rem;

}

.contact-item span{

    font-size:.74rem;

}

/* ---------- */

.contact-social{

    padding:18px;

    border-radius:18px;

}

.contact-social__title{

    margin-bottom:18px;

    text-align:center;

}

.social-list{

    justify-content:center;

    gap:14px;

}

.social-btn{

    width:54px;

    height:54px;

}

.social-btn svg{

    width:22px;

    height:22px;

}

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:380px){

.contacts{

    padding:60px 0;

}

.contacts-map{

    min-height:360px;

}

.map-card{

    padding:16px;

}

.map-card h3{

    font-size:1.1rem;

}

.map-card p{

    font-size:.85rem;

}

.map-card__button{

    min-height:46px;

    padding:12px 18px;

}

.social-btn{

    width:50px;

    height:50px;

}

}