:root{--green: #1fa463; --dark: #1a1a1a; --light: #f5f7f6}
*{margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif}
body{color: var(--dark); line-height: 1.6}
.container{width: 100%; max-width: 1200px; margin: auto; padding-left: 20px; padding-right: 20px}
header{position:fixed; width: 100%; background: white; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.05)}
@media(max-width:768px){
    header{padding: 0 15px}
    .nav{padding: 10px 0}
}
.nav{display:flex; justify-content:space-between; align-items:center; padding:15px 0}
.menu{display:flex;gap:20px;transition: 0.35s;}
.menu a{text-decoration:none;color:#333}
.menu a:hover{color:var(--green)}
/* MOBILE MENU */
.menu.active{animation: menuFade 0.35s ease}
@keyframes menuFade{
    from{opacity: 0; transform: translateY(-10px)}
    to{opacity: 1; transform: translateY(0)}
}
/* BURGER BUTTON */
.burger{width: 50px; height: 50px; border: none; outline: none; cursor: pointer; display: none; position: relative; border-radius: 12px; background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); transition: 0.3s}
/* HOVER */
.burger:hover{background: rgba(31,164,99,0.12); box-shadow: 0 0 20px rgba(31,164,99,0.15)}
/* LINES */
.burger span{position: absolute; left: 50%; width: 24px; height: 2px; background: #1fa463; border-radius: 10px; transform: translateX(-50%); transition: 0.35s}
/* POSITION */
.burger span:nth-child(1){top: 16px}
.burger span:nth-child(2){top: 24px}
.burger span:nth-child(3){top: 32px}
/* ACTIVE STATE */
.burger.active span:nth-child(1){transform: translateX(-50%) rotate(45deg); top: 24px}
.burger.active span:nth-child(2){opacity: 0}
.burger.active span:nth-child(3){transform: translateX(-50%) rotate(-45deg); top: 24px}
/* MOBILE */
@media(max-width:768px){
    .burger{display: block}
}
/* LOGO CONTAINER */
.logo svg{width: 220px}
.logo circle{stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 1.5s ease forwards}
.logo polygon{opacity: 0; transform: scale(0.5); animation: star 0.8s ease forwards 1.2s}
.logo text{opacity: 0; transform: translateX(-10px); animation: textIn 0.6s ease forwards 1.5s}
@keyframes draw{
    to{stroke-dashoffset: 0}
}
@keyframes star{
    to{opacity: 1; transform: scale(1)}
}
@keyframes textIn{
    to{opacity: 1; transform: translateX(0)}
}
/* HERO */
.hero{position: relative; padding: 140px 20px 100px; text-align: center; color: white; overflow: hidden}
.hero::after{content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 3px 3px; animation: grainMove 6s infinite linear; opacity: 0.3}
@keyframes grainMove{
    0%{transform: translate(0,0)}
    50%{transform: translate(-10px, 10px)}
    100%{transform: translate(0,0)}
}
/* 🔥 ФОНОВЕ ЗОБРАЖЕННЯ */
.hero-bg{position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.75)), url("/images/hero-bg.jpg") center/cover no-repeat; z-index: -2; transform: scale(1.1); filter: blur(2px); transition: transform 0.1s linear; animation: zoomBg 10s ease-in-out infinite alternate}
.hero-content{position: relative; z-index: 2}
@keyframes zoomBg{
    from{transform: scale(1)}
    to{transform: scale(1.05)}
}
.hero::before,
.hero::after{content: ""; position: absolute; border-radius: 50%; background: rgba(31,164,99,0.15); animation: float 8s infinite ease-in-out}
.hero::before{width: 300px; height: 300px; top: -50px; left: -50px}
.hero::after{width: 200px; height: 200px; bottom: -50px; right: -50px; animation-delay: 3s}
.hero h1{font-size: 42px; margin-bottom: 15px}
.hero p{margin-bottom: 25px; opacity: 0.9}
.hero-buttons .btn{background: #1fa463; color: white}
.btn-outline{border: 2px solid white; background: transparent; color: white}
@media(max-width:768px){
    .hero h1{font-size: 28px}
}
.btn{background: white; color: #1fa463; padding: 12px 22px; border-radius: 6px; text-decoration: none; margin: 5px; display: inline-block; font-weight: bold}
@keyframes fadeUp{
    from{opacity: 0; transform: translateY(20px)}
    to{opacity: 1;  transform: translateY(0)}
}
@media(max-width:768px){
    .hero h1{font-size: 28px}
}
section{padding:60px 0; scroll-margin-top:100px}
h2{text-align:center;margin-bottom:30px}
.grid{display:grid; gap:20px}
.card{background:white; padding:20px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.05); transition:.3s}
.card:hover{transform:translateY(-5px)}
/* ICONS */
.icon{width:40px; height:40px; margin-bottom:10px; fill:var(--green)}
/* ANIMATION */
.animate{opacity:0; transform:translateY(30px); transition:0.6s}
.animate.show{opacity:1; transform:translateY(0)}
/* STICKY CALL BUTTON */
.call-btn{position:fixed; bottom:20px; right:20px; background:var(--green); color:white; padding:15px; border-radius:50%; font-size:20px; box-shadow:0 5px 15px rgba(0,0,0,0.2); text-decoration:none}
/* MOBILE */
@media(max-width:768px){
    .menu{display:none; flex-direction:column;  position:absolute;  right:20px;  top:60px;  background:white;  padding:20px}
    .menu.active{display:flex}
    .burger{display:block}
}
.services{padding: 80px 0; background: #f5f7f6}
.section-title{text-align: center; margin-bottom: 50px; font-size: 32px}
/* GRID */
.services-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px}
/* CARD */
.service-card{position: relative; height: 340px; border-radius: 18px; overflow: hidden; color: white;  display: flex; align-items: center;   /* 🔥 вертикальне центрування */ justify-content: center;  /* 🔥 горизонтальне центрування */  text-align: center; transition: 0.4s}
/* BACKGROUND IMAGES */
.service-img-1{background: url("/images/service1.jpg") center/cover no-repeat}
.service-img-2{background: url("/images/service2.jpg") center/cover no-repeat}
.service-img-3{background: url("/images/service3.jpg") center/cover no-repeat}
/* DARK GREEN OVERLAY */
.overlay{position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(31,164,99,0.6))}
/* CONTENT */
.service-content{position: relative; z-index: 2; padding: 20px; max-width: 260px}
/* ICON */
.service-icon{width: 60px; height: 60px; background: white; color: #1fa463; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 15px; margin: 0 auto 15px}
/* TEXT */
.service-card h3{margin-bottom: 10px; font-size: 22px}
.service-card p{font-size: 14px; opacity: 0.9}
/* 🔥 HOVER EFFECT */
.service-card:hover{transform: translateY(-10px) scale(1.02)}
.service-card:hover .overlay{background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(31,164,99,0.8))}
/* WRAPPER */
.section-header{text-align: center; margin-bottom: 60px}
/* SMALL LABEL */
.section-label{display: inline-block; color: #1fa463; font-weight: 600; font-size: 14px; letter-spacing: 1px; position: relative; margin-bottom: 15px}
/* LINE + DOT */
.section-label::before,
.section-label::after{content: ""; position: absolute; top: 50%; width: 40px; height: 1px; background: #1fa463}
.section-label::before{right: 100%; margin-right: 10px}
.section-label::after{left: 100%; margin-left: 10px}
/* DOT */
.section-label .dot{display: block; width: 6px; height: 6px; background: #1fa463; border-radius: 50%; margin: 6px auto 0}
/* BIG TITLE */
.section-title-big{font-size: 36px; font-weight: 700; margin-bottom: 15px; color: #222}
/* SUBTITLE */
.section-subtitle{color: #666; font-size: 16px; max-width: 600px; margin: auto}
/* MOBILE */
@media(max-width:768px){
    .section-title-big{ font-size: 26px}
}
.section-header{opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s ease forwards}
.advantages{padding: 50px 0; background: #ffffff}
/* GRID */
.advantages-grid{display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap}
/* ITEM */
.adv-item{text-align: center; max-width: 180px}
/* ICON */
.adv-icon{font-size: 32px; color: #1fa463; margin-bottom: 10px}
/* TEXT */
.adv-item p{font-size: 14px; color: #444}
/* DIVIDER */
.divider{width: 1px; height: 50px; background: #ddd}
/* MOBILE */
@media(max-width:768px){
    .advantages-grid{ flex-direction: column}
    .divider{ display: none}
}
.adv-item:hover{transform: translateY(-5px); transition: 0.3s}
.pricing{padding: 80px 0; background: #f5f7f6}
/* GRID */
.pricing-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px}
/* CARD */
.price-card{background: white; padding: 30px; border-radius: 16px; text-align: center; position: relative; transition: 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.05)}
/* FEATURED */
.price-card.featured{border: 2px solid #1fa463; transform: scale(1.05)}
/* BADGE */
.badge{position: absolute; top: -10px; right: 20px; background: #1fa463; color: white; padding: 5px 10px; font-size: 12px; border-radius: 5px}
/* TITLE */
.price-card h3{margin-bottom: 10px}
/* PRICE */
.price{font-size: 28px; font-weight: bold; color: #1fa463; margin-bottom: 20px}
/* LIST */
.price-card ul{list-style: none; margin-bottom: 20px}
.price-card ul li{margin: 8px 0; color: #555}
/* BUTTON */
.price-card .btn{background: #1fa463; color: white; padding: 12px 20px; border-radius: 6px; display: inline-block; text-decoration: none}
/* HOVER */
.price-card:hover{transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0,0,0,0.1)}
.price-card.featured{box-shadow: 0 0 25px rgba(31,164,99,0.4)}
.why{padding: 80px 0; background: white}
/* GRID */
.why-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px}
/* ITEM */
.why-item{text-align: center; padding: 30px 20px; border-radius: 16px; background: #f9fbfa; transition: 0.3s; position: relative}
/* ICON */
.why-icon{font-size: 40px; color: #1fa463; margin-bottom: 15px}
/* TEXT */
.why-item h3{margin-bottom: 10px; font-size: 20px}
.why-item p{font-size: 14px; color: #555}
/* HOVER */
.why-item:hover{transform:translateY(-10px); background:white; box-shadow: 0 15px 40px rgba(0,0,0,0.08), 0 0 30px rgba(31,164,99,0.2)}
.location{padding: 80px 0; background: #f5f7f6}
/* GRID */
.location-grid{display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: stretch}
/* MAP */
.map{border-radius: 16px; overflow: hidden; height: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.1)}
/* INFO */
.location-info{background: white; padding: 30px; border-radius: 16px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.05)}
.location-info h3{margin-bottom: 15px}
.location-info p{margin-bottom: 10px; color: #555}
/* BUTTON */
.location-info .btn{margin-top: 15px; background: #1fa463; color: white; padding: 12px; border-radius: 6px; text-align: center; text-decoration: none}
/* MOBILE */
@media(max-width:768px){
    .location-grid{ grid-template-columns: 1fr}
    .map{ height: 300px}
}
.map:hover{transform: scale(1.01); transition: 0.3s}
.faq{padding: 80px 0; background: #ffffff}
/* LIST */
.faq-list{max-width: 800px; margin: auto}
/* ITEM */
.faq-item{border-bottom: 1px solid #eee}
/* QUESTION */
.faq-question{padding: 18px 0; cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; align-items: center}
/* ANSWER */
.faq-answer{max-height: 0; overflow: hidden; color: #555; transition: 0.4s}
/* ACTIVE */
.faq-item.active .faq-answer{max-height: 200px; padding-bottom: 15px}
.faq-item.active span{transform: rotate(45deg)}
/* HOVER */
.faq-question:hover{color: #1fa463}
/* SECTION */
.shop{position: relative; padding: 100px 0; overflow: hidden; color: white}
/* BACKGROUND */
.shop-bg{position: absolute; inset: 0; background:  linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.8)  ),  url("/images/shop-bg.jpg") center/cover no-repeat; z-index: -2; transform: scale(1.05); filter: blur(2px)}
/* LIGHT TEXT */
.light .section-title-big,
.light .section-subtitle{color: white}
/* GRID */
.shop-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 25px; margin-top: 50px}
/* CARD */
.shop-card{background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 30px 20px; text-align: center; transition: 0.4s; position: relative; overflow: hidden}
/* GLOW */
.shop-card::before{content: ""; position: absolute; inset: 0; background:  radial-gradient(   circle at top,   rgba(31,164,99,0.25),   transparent 70%  ); opacity: 0; transition: 0.4s}
/* HOVER */
.shop-card:hover{transform: translateY(-10px); border-color: rgba(31,164,99,0.5); box-shadow:  0 20px 50px rgba(0,0,0,0.3),  0 0 30px rgba(31,164,99,0.2)}
.shop-card:hover::before{opacity: 1}
/* ICON */
.shop-icon{font-size: 42px; margin-bottom: 15px}
/* TEXT */
.shop-card h3{margin-bottom: 10px; font-size: 20px}
.shop-card p{font-size: 14px; opacity: 0.85}
/* BUTTON */
.shop-btn-wrap{text-align: center; margin-top: 50px}
.shop-btn{background: #1fa463; color: white; padding: 14px 28px; border-radius: 8px; text-decoration: none; display: inline-block; transition: 0.3s}
.shop-btn:hover{transform: translateY(-3px); box-shadow:  0 10px 25px rgba(31,164,99,0.4)}
.shop-bg{animation: zoomBg 12s ease-in-out infinite alternate}
/* FOOTER */
.footer{position:relative; background:#0f1115; color:white; padding:80px 0 30px; overflow:hidden}
/* BACKGROUND GLOW */
.footer-bg{position:absolute; inset:0; background: radial-gradient(circle at top, rgba(31,164,99,0.15), transparent 60%); z-index:0}
/* GRID */
.footer-grid{position:relative; z-index:2; display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:40px}
/* LOGO */
.footer-logo{font-size:28px; font-weight:700; color:#1fa463; margin-bottom:15px; letter-spacing:2px}
/* TEXT */
.footer-text{color:rgba(255,255,255,0.7); line-height:1.7}
/* TITLES */
.footer-col{transition:0.3s}
.footer-col:hover{transform:translateY(-3px)}
.footer-col h3{margin-bottom:15px; font-size:18px}
/* LINKS */
.footer-links{list-style:none}
.footer-links li{margin-bottom:10px}
.footer-links a{color:rgba(255,255,255,0.7); text-decoration:none; transition:0.3s}
.footer-links a:hover{color:#1fa463; padding-left:5px}
/* CONTACTS */
.footer-col p{color:rgba(255,255,255,0.7); margin-bottom:10px}
/* BOTTOM */
.footer-bottom{position:relative; z-index:2; margin-top:60px; padding-top:20px; border-top: 1px solid rgba(255,255,255,0.08); text-align:center; color:rgba(255,255,255,0.5); font-size:14px}