:root{--green:#1fa463; --green-dark:#15804b; --dark:#1a1a1a; --text:#4b5563; --light:#f7faf8; --white:#ffffff; --radius:18px; --shadow: 0 10px 30px rgba(0,0,0,.08); --shadow-hover: 0 18px 45px rgba(0,0,0,.12); --transition:.35s ease}
*,
*::before,
*::after{margin:0; padding:0; box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-height:100vh; overflow-x:hidden; background:var(--white); color:var(--dark); font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; font-size:16px; line-height:1.65; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 20px}
section{position:relative; padding:90px 0; scroll-margin-top:100px}
h1,
h2,
h3,
h4,
h5,
h6{color:var(--dark); font-weight:700; line-height:1.2}
h2{text-align:center;margin-bottom:30px}
p{color:var(--text)}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%; height:auto}
button{border:none; background:none; font:inherit; cursor:pointer}
ul,
ol{list-style:none}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 34px; border-radius:12px; background:var(--green); color:#fff; font-size:16px; font-weight:600; transition:var(--transition)}
.btn:hover{transform:translateY(-3px); background:var(--green-dark); box-shadow: 0 12px 30px rgba(31,164,99,.28)}
.btn-outline{background:transparent; border:2px solid currentColor}
.animate{opacity:0; transform:translateY(30px); transition: opacity .8s ease, transform .8s ease}
.animate.show{opacity:1; transform:translateY(0)}
@media (min-width:1400px){
    .container{padding:0 32px}
}
@media (max-width:992px){
    .container{padding:0 20px}
    section{padding:75px 0}
}
@media (max-width:768px){
    .container{padding:0 16px}
    section{padding:60px 0}
}
:focus-visible{outline:2px solid var(--green); outline-offset:3px}
/* ICONS */
.icon{width:24px; height:24px; stroke:var(--green); stroke-width:2; flex-shrink:0}
/* HEADER */
header{position:fixed; top:0; left:0; width:100%; z-index:1000; background:rgba(255,255,255,.92); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid rgba(0,0,0,.05); transition: background .35s ease, box-shadow .35s ease, padding .35s ease}
header.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.08)}
.nav{display:flex; justify-content:space-between; align-items:center; min-height:84px; gap:40px}
.logo{display:flex; align-items:center; text-decoration:none; flex-shrink:0; position:relative}
.logo img{width:260px; max-width:100%; height:auto; display:block; transition: transform .35s ease, filter .35s ease; animation:logoIntro .8s ease forwards}
.logo:hover img{transform:scale(1.03); filter: drop-shadow(0 6px 18px rgba(31,164,99,.25))}
.logo::after{content:""; position:absolute; left:28px; top:50%; width:70px; height:70px; transform:translateY(-50%); border-radius:50%; background: radial-gradient(rgba(31,164,99,.18), transparent 70%); filter:blur(18px); opacity:0; z-index:-1; transition:opacity .35s ease}
.logo:hover::after{opacity:1}
@keyframes logoIntro{
    from{opacity:0; transform: translateY(-8px) scale(.96)}
    to{opacity:1; transform: translateY(0) scale(1)}
}
.menu{display:flex; align-items:center; gap:28px; margin-left:auto}
.menu a{position:relative; text-decoration:none; color:#333; font-size:16px; font-weight:500; transition:color .3s ease}
.menu a:hover{color:var(--green)}
.menu a::after{content:""; position:absolute; left:50%; bottom:-7px; width:0; height:2px; background:var(--green); transform:translateX(-50%); transition:width .3s ease}
.menu a:hover::after{width:100%}
.menu a.active{color:var(--green); font-weight:600}
.menu a.active::after{width:100%; text-shadow:0 0 12px rgba(31,164,99,.18)}
.burger{display:none; position:relative; width:48px; height:48px; border:none; border-radius:12px; background:transparent; cursor:pointer; transition: background .3s ease, box-shadow .3s ease}
.burger:hover{background:rgba(31,164,99,.08)}
.burger:focus-visible{outline:2px solid var(--green); outline-offset:3px}
.burger span{position:absolute; left:50%; width:24px; height:2px; background:var(--green); border-radius:999px; transform:translateX(-50%); transition:.35s ease}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:23px}
.burger span:nth-child(3){top:31px}
.burger.active span:nth-child(1){top:23px; transform: translateX(-50%) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){top:23px; transform: translateX(-50%) rotate(-45deg)}
@media (max-width:768px){
    .nav{min-height:74px; padding:0 16px}
    .logo img{width:185px}
    .burger{display:block}
    .menu{position:absolute; top:100%; right:16px; display:none; flex-direction:column; align-items:flex-start; gap:18px; min-width:220px; padding:22px; border-radius:16px; background:rgba(255,255,255,.96); backdrop-filter:blur(18px); box-shadow: 0 20px 50px rgba(0,0,0,.12)}
    .menu.active{display:flex; animation:menuFade .35s ease}
}
@keyframes menuFade{
    from{opacity:0; transform: translateY(-10px)}
    to{opacity:1; transform: translateY(0)}
}
/* HERO */
.hero{position:relative;overflow:hidden;padding:170px 0 120px;color:#fff;text-align:center}
.hero-bg{position:absolute;inset:0;z-index:-3;background: linear-gradient(  rgba(0,0,0,.72),  rgba(0,0,0,.82) ), url("/images/hero-bg.jpg") center center / cover no-repeat;animation:heroZoom 14s ease-in-out infinite alternate}
.hero-noise{position:absolute;inset:0;z-index:-2;opacity:.25;background-image: radial-gradient(  rgba(255,255,255,.03) 1px,  transparent 1px );background-size:3px 3px;animation:noiseMove 8s linear infinite}
.hero::before,
.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(25px);background:rgba(31,164,99,.18);z-index:-1;animation:float 10s ease-in-out infinite}
.hero::before{width:320px; height:320px;left:-120px; top:-100px}
.hero::after{width:220px; height:220px;right:-80px; bottom:-80px;animation-delay:4s}
.hero-content{max-width:900px}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;margin-bottom:30px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);color:#fff;font-size:15px;animation:fadeUp .8s ease both}
.hero-badge svg{width:18px; height:18px;stroke:#fff}
.hero h1{color:#fff;font-size:clamp(42px,6vw,64px);line-height:1.1;margin-bottom:22px;animation:fadeUp .8s .15s ease both}
.hero h1 span{display:block;color:var(--green)}
.hero p{max-width:720px;margin:0 auto 40px;color:rgba(255,255,255,.90);font-size:20px;line-height:1.7;animation:fadeUp .8s .3s ease both}
.hero-buttons{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:40px;animation:fadeUp .8s .45s ease both}
.hero-buttons .btn{min-width:220px}
.hero-buttons .btn svg{width:20px; height:20px}
.pulse-btn{animation:pulse 2.5s infinite}
.hero-features{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;animation:fadeUp .8s .6s ease both}
.hero-features span{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.92);font-size:15px}
.hero-features svg{width:18px; height:18px;stroke:var(--green)}
@keyframes heroZoom{
    from{transform:scale(1)}
    to{transform:scale(1.06)}
}
@keyframes noiseMove{
    0%{transform:translate(0,0)}
    50%{transform:translate(-10px,10px)}
    100%{transform:translate(0,0)}
}
@keyframes float{
    0%{transform:translateY(0)}
    50%{transform:translateY(-18px)}
    100%{transform:translateY(0)}
}
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(31,164,99,.45)}
    70%{box-shadow:0 0 0 16px rgba(31,164,99,0)}
    100%{box-shadow:0 0 0 0 rgba(31,164,99,0)}
}
@keyframes fadeUp{
    from{opacity:0; transform:translateY(24px)}
    to{opacity:1; transform:translateY(0)}
}
@media (max-width:768px){
    .hero{padding:145px 0 90px}
    .hero-badge{font-size:14px; padding:8px 14px}
    .hero h1{font-size:36px}
    .hero p{font-size:18px; margin-bottom:34px}
    .hero-buttons{flex-direction:column; align-items:center}
    .hero-buttons .btn{width:100%; max-width:340px}
    .hero-features{display:flex; flex-direction:column; align-items:center; gap:16px}
    .hero-features span{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; text-align:center}
}
/* SERVICES */
.services{padding:100px 0; background:linear-gradient(180deg, #f7faf8 0%, #eef7f2 100%)}
.section-header{text-align:center; max-width:760px; margin:0 auto 70px}
.section-label{display:inline-flex; align-items:center; gap:10px; margin-bottom:20px; color:var(--green); font-size:14px; font-weight:700; letter-spacing:2px; text-transform:uppercase}
.section-label::before,
.section-label::after{content:""; width:38px; height:1px; background:rgba(31,164,99,.35)}
.section-label .dot{display:none}
.section-title-big{font-size:clamp(34px,5vw,48px); margin-bottom:18px; color:var(--dark)}
.section-subtitle{max-width:620px; margin:auto; color:var(--text); line-height:1.8; font-size:18px}
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.service-card{position:relative; overflow:hidden; border-radius:22px; min-height:390px; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; cursor:pointer; transition: transform .35s ease, box-shadow .35s ease; box-shadow: 0 16px 40px rgba(0,0,0,.08)}
.service-card:hover{transform: translateY(-8px); box-shadow: 0 24px 55px rgba(0,0,0,.15)}
.service-img-1{background:url("/images/cartridge-refill.jpg") center/cover no-repeat}
.service-img-2{background:url("/images/printer-repair.jpg") center/cover no-repeat}
.service-img-3{background:url("/images/cartridge-repair.jpg") center/cover no-repeat}
.overlay{position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(31,164,99,.45)); transition:.35s}
.service-card:hover .overlay{background: linear-gradient(to top, rgba(0,0,0,.88), rgba(31,164,99,.60))}
.service-content{position:relative; z-index:2; max-width:280px; padding:35px 25px}
.service-icon{width:74px; height:74px; margin:0 auto 24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.16); backdrop-filter:blur(12px); transition: transform .35s ease, background .35s ease}
.service-card:hover .service-icon{transform: scale(1.08) rotate(8deg); background:rgba(255,255,255,.24)}
.service-icon svg{width:34px; height:34px; stroke:#fff; stroke-width:2}
.service-card h3{color:#fff; font-size:24px; line-height:1.3; margin-bottom:14px; min-height:62px; display:flex; align-items:center; justify-content:center}
.service-card p{color:rgba(255,255,255,.92); font-size:15px; line-height:1.8}
@media (min-width:769px) and (max-width:992px){
    .services-grid{grid-template-columns:repeat(2,1fr)}
    .service-card:last-child{grid-column:1 / -1;max-width:420px;margin:auto}
}
@media (max-width:768px){
    .services{padding:70px 0}
    .section-header{margin-bottom:50px}
    .section-title-big{font-size:30px}
    .section-subtitle{font-size:16px}
    .services-grid{grid-template-columns:1fr; gap:22px}
    .service-card{min-height:340px}
    .service-card:last-child{max-width:100%}
    .service-icon{width:66px; height:66px}
    .service-icon svg{width:30px; height:30px}
    .service-card h3{font-size:22px; min-height:auto}
}
.service-card:hover{background-size:110%}
.service-card::before{content:""; position:absolute; inset:0; background:inherit; background-size:cover; transition:transform .6s ease; z-index:0}
.service-card:hover::before{transform:scale(1.08)}
/* ADVANTAGES */
.advantages{padding:90px 0; background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%)}
.advantages-grid{display:grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:0}
.adv-item{padding:20px 28px; text-align:center; transition: transform .35s ease}
.adv-item:hover{transform:translateY(-6px)}
.adv-icon{width:74px; height:74px; margin:0 auto 22px; display:flex; align-items:center;
 justify-content:center; border-radius:50%; background: linear-gradient(135deg, rgba(31,164,99,.08), rgba(31,164,99,.18)); transition: transform .35s ease, background .35s ease}
.adv-item:hover .adv-icon{transform: scale(1.08) rotate(8deg); background: linear-gradient(135deg, rgba(31,164,99,.15), rgba(31,164,99,.25))}
.adv-icon svg{width:32px; height:32px; stroke:var(--green); stroke-width:2}
.adv-item h3{min-height:64px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--dark); font-size:24px; line-height:1.3}
.adv-item p{color:var(--text); font-size:16px; line-height:1.75}
.divider{width:1px; height:120px; background: linear-gradient(transparent, rgba(31,164,99,.25), transparent)}
@media (max-width:992px){
    .advantages{padding:70px 0}
    .advantages-grid{grid-template-columns:repeat(2,1fr); gap:35px}
    .divider{display:none}
    .adv-item{padding:10px}
}
@media (max-width:768px){
    .advantages{padding:60px 0}
    .advantages-grid{grid-template-columns:1fr; gap:40px}
    .adv-icon{width:66px; height:66px; margin-bottom:18px}
    .adv-icon svg{width:28px; height:28px}
    .adv-item h3{min-height:auto; font-size:22px; margin-bottom:12px}
    .adv-item p{font-size:15px; line-height:1.7}
}
/* PRICING */
.pricing{padding:100px 0; background: linear-gradient(180deg, #f7faf8 0%, #ffffff 100%)}
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; align-items:stretch}
.price-card{position:relative; display:flex; flex-direction:column; padding:38px 34px; border-radius:24px; background:#fff; border:1px solid rgba(31,164,99,.08); box-shadow: 0 15px 45px rgba(0,0,0,.06); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease}
.price-card:hover{transform:translateY(-10px); border-color:rgba(31,164,99,.20); box-shadow: 0 25px 60px rgba(0,0,0,.12)}
.featured{transform:scale(1.05); border:2px solid var(--green); box-shadow: 0 25px 60px rgba(31,164,99,.18)}
.featured:hover{transform: translateY(-10px) scale(1.05)}
.badge{position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--green); color:#fff; font-size:13px; font-weight:700; padding:8px 18px; border-radius:999px; box-shadow: 0 10px 25px rgba(31,164,99,.30)}
.price-icon{width:74px; height:74px; margin:0 auto 24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(31,164,99,.08), rgba(31,164,99,.18))}
.price-icon svg{width:34px; height:34px; stroke:var(--green); stroke-width:2}
.price-card h3{text-align:center; font-size:26px; margin-bottom:18px}
.price-card.featured{position:relative}
.price-card .badge{position:absolute; left:50%; top:-22px; transform:translateX(-50%); white-space:nowrap; padding:12px 28px; border-radius:999px; font-size:15px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; background:var(--green); color:#fff; box-shadow:0 12px 30px rgba(31,164,99,.35)}
.price{text-align:center; margin-bottom:30px; color:#666; font-size:18px}
.price span{color:var(--green); font-size:52px; font-weight:700; line-height:1}
.price-card ul{flex:1; margin-bottom:35px}
.price-card li{display:flex; align-items:center; gap:10px; margin-bottom:14px; color:#555; line-height:1.6}
.price-card li svg{width:18px; height:18px; stroke:var(--green); flex-shrink:0}
.price-card .btn{width:100%; justify-content:center}
.price-card .btn svg{width:18px; height:18px}
@media (max-width:992px){
    .pricing{padding:75px 0}
    .pricing-grid{grid-template-columns:1fr; gap:28px; max-width:500px; margin:auto}
    .featured{transform:none}
    .featured:hover{transform:translateY(-10px)}
}
@media (max-width:768px){
    .pricing{padding:60px 0}
    .price-card{padding:30px 24px}
    .price-icon{width:66px; height:66px}
    .price-icon svg{width:30px; height:30px}
    .price-card h3{font-size:22px}
    .price{font-size:16px}
    .price span{font-size:44px}
    .price-card li{font-size:15px}
}
/* WHY */
.why{padding:100px 0; background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%); position:relative; overflow:hidden}
.why::before{content:""; position:absolute; inset:0; background: radial-gradient(circle at center, rgba(31,164,99,.05), transparent 70%); pointer-events:none}
.why-grid{position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.why-item{position:relative; background:#fff; border:1px solid rgba(31,164,99,.08); border-radius:22px; padding:40px 34px; text-align:center; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; box-shadow: 0 15px 45px rgba(0,0,0,.05)}
.why-item:hover{transform:translateY(-10px); border-color:rgba(31,164,99,.20); box-shadow: 0 24px 60px rgba(0,0,0,.10)}
.why-icon{width:74px; height:74px; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: linear-gradient(135deg, rgba(31,164,99,.08), rgba(31,164,99,.18)); transition: transform .35s ease, background .35s ease}
.why-item:hover .why-icon{transform: scale(1.08) rotate(8deg); background: linear-gradient(135deg, rgba(31,164,99,.15), rgba(31,164,99,.25))}
.why-item::before{content:""; position:absolute; inset:0; border-radius:22px;background: linear-gradient(135deg, rgba(31,164,99,.04), transparent 60%); opacity:0; transition:.35s}
.why-item:hover::before{opacity:1}
.why-icon svg{width:32px; height:32px; stroke:var(--green); stroke-width:2}
.why-item h3{min-height:64px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--dark); font-size:24px; line-height:1.3}
.why-item p{color:var(--text); font-size:16px; line-height:1.8}
@media (max-width:992px){
    .why{padding:75px 0}
    .why-grid{grid-template-columns:1fr; max-width:650px; margin:auto; gap:26px}
}
@media (max-width:768px){
    .why{padding:60px 0}
    .why-item{padding:32px 24px}
    .why-icon{width:66px; height:66px; margin-bottom:20px}
    .why-icon svg{width:28px; height:28px}
    .why-item h3{min-height:auto; font-size:22px}
    .why-item p{font-size:15px; line-height:1.7}
}
/* SHOP */
.shop{position:relative; overflow:hidden; padding:100px 0; color:#fff}
.shop-bg{position:absolute; inset:0; z-index:-3; background: linear-gradient(rgba(0,0,0,.78), rgba(0,0,0,.84)), url("/images/shop-bg.jpg") center center / cover no-repeat; animation:shopZoom 14s ease-in-out infinite alternate}
.shop::before{content:""; position:absolute; inset:0; z-index:-2; background: radial-gradient(circle at center, rgba(31,164,99,.08), transparent 70%); pointer-events:none}
.shop .section-title-big,
.shop .section-subtitle,
.shop .section-label{color:#fff}
.shop .section-label::before,
.shop .section-label::after{background:rgba(255,255,255,.30)}
.shop-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.shop-card{padding:36px 26px; text-align:center; border-radius:22px; background:rgba(255,255,255,.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.10); transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease}
.shop-card:hover{transform:translateY(-10px); background:rgba(255,255,255,.12); border-color:rgba(31,164,99,.35); box-shadow: 0 22px 55px rgba(0,0,0,.25)}
.shop-icon{width:74px; height:74px; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: linear-gradient(135deg, rgba(31,164,99,.20), rgba(31,164,99,.35)); transition: transform .35s ease, background .35s ease}
.shop-card:hover .shop-icon{transform: scale(1.08) rotate(8deg)}
.shop-icon svg{width:34px; height:34px; stroke:#fff; stroke-width:2}
.shop-card h3{color:#fff; font-size:24px; margin-bottom:14px; min-height:60px; display:flex; align-items:center; justify-content:center; line-height:1.3}
.shop-card p{color:rgba(255,255,255,.85); font-size:15px; line-height:1.8}
.shop-card:nth-child(1) .shop-icon{background:linear-gradient(135deg,#1fa463,#36c87a)}
.shop-card:nth-child(2) .shop-icon{background:linear-gradient(135deg,#1b8ef2,#45b3ff)}
.shop-card:nth-child(3) .shop-icon{background:linear-gradient(135deg,#ff9f1c,#ffbf47)}
.shop-card:nth-child(4) .shop-icon{background:linear-gradient(135deg,#8b5cf6,#a855f7)}
.shop-btn-wrap{margin-top:55px; display:flex; justify-content:center; gap:18px; flex-wrap:wrap}
.shop-btn-wrap .btn{min-width:230px}
.shop-btn-wrap .btn-outline{color:#fff; border-color:#fff}
.shop-btn-wrap .btn-outline:hover{background:#fff; color:var(--green)}
@keyframes shopZoom{
    from{transform:scale(1)}
    to{transform:scale(1.05)}
}
@media (max-width:992px){
    .shop{padding:75px 0}
    .shop-grid{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width:768px){
    .shop{padding:60px 0}
    .shop-grid{grid-template-columns:1fr;gap:22px}
    .shop-card{padding:30px 22px}
    .shop-icon{width:66px; height:66px;margin-bottom:20px}
    .shop-icon svg{width:30px; height:30px}
    .shop-card h3{min-height:auto;font-size:22px}
    .shop-card p{font-size:15px}
    .shop-btn-wrap{flex-direction:column;align-items:center}
    .shop-btn-wrap .btn{width:100%;max-width:340px}
}
/* LOCATION */
.location{padding:100px 0; background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%)}
.location-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:stretch}
.map{overflow:hidden; border-radius:24px; border:1px solid rgba(31,164,99,.08); box-shadow: 0 18px 50px rgba(0,0,0,.08); min-height:480px; transition: transform .35s ease, box-shadow .35s ease}
.map:hover{transform:translateY(-6px); box-shadow: 0 28px 60px rgba(0,0,0,.12)}
.map iframe{width:100%; height:100%; border:0}
.location-info{display:flex; flex-direction:column; justify-content:center; padding:42px 38px; background:#fff; border-radius:24px; border:1px solid rgba(31,164,99,.08); box-shadow: 0 18px 50px rgba(0,0,0,.06); font-style:normal}
.location-info h3{font-size:30px; margin-bottom:30px; color:var(--dark)}
.location-info p{display:flex; align-items:center; gap:14px; margin-bottom:18px; color:var(--text); font-size:17px; line-height:1.7}
.location-info p:last-of-type{margin-bottom:34px}
.location-info svg{width:22px; height:22px; stroke:var(--green); stroke-width:2; flex-shrink:0}
.location-info a{color:inherit; transition:color .3s ease}
.location-info a:hover{color:var(--green)}
.location-buttons{display:flex; gap:18px; margin-top:35px; flex-wrap:wrap}
.location-buttons .btn{flex:1; min-height:62px; padding:0 28px; border-radius:18px; display:flex; justify-content:center; align-items:center; gap:12px; font-size:17px; font-weight:600; text-decoration:none; overflow:hidden; position:relative; transition: transform .3s ease, box-shadow .3s ease, background .3s ease}
.location-buttons .btn{display:inline-flex; align-items:center; justify-content:center; gap:12px}
.location-buttons .btn svg{width:22px; height:22px; stroke:#ffffff; stroke-width:2.4; flex-shrink:0}
.location-buttons .btn-outline svg{stroke:var(--green)}
.location-buttons .btn::before{content:""; position:absolute; left:-120%; top:0; width:60%; height:100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transition:.8s}
.location-buttons .btn:hover::before{left:140%}
.location-buttons .btn:not(.btn-outline){background: linear-gradient(135deg, #1fa463, #2dc676); color:#fff; box-shadow: 0 14px 35px rgba(31,164,99,.28)}
.location-buttons .btn:not(.btn-outline):hover{transform: translateY(-4px); box-shadow: 0 20px 45px rgba(31,164,99,.35)}
.location-buttons .btn-outline{background:#fff; color:var(--green); border:2px solid rgba(31,164,99,.25); box-shadow: 0 10px 25px rgba(0,0,0,.05)}
.location-buttons .btn-outline:hover{background:rgba(31,164,99,.06); border-color:var(--green); transform: translateY(-4px)}
.location-buttons .btn svg{width:21px; height:21px; stroke-width:2.2}
.location-buttons .btn:active{transform:scale(.97)}
@media(max-width:768px){
    .location-buttons{flex-direction:column}
    .location-buttons .btn{width:100%}
}
@media (max-width:992px){
    .location{padding:75px 0}
    .location-grid{grid-template-columns:1fr; gap:30px}
    .map{min-height:420px}
}
@media (max-width:768px){
    .location{padding:60px 0}
    .location-info{padding:30px 24px}
    .location-info h3{font-size:26px; text-align:center}
    .location-info p{font-size:16px}
    .location-buttons{flex-direction:column}
    .location-buttons .btn{width:100%}
    .map{min-height:320px}
}
/* FAQ */
.faq{padding:100px 0; background: linear-gradient(180deg, #f7faf8 0%, #ffffff 100%)}
.faq-list{max-width:900px; margin:0 auto}
.faq-item{background:#fff; border:1px solid rgba(31,164,99,.08); border-radius:20px; overflow:hidden; margin-bottom:18px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; box-shadow: 0 10px 30px rgba(0,0,0,.04)}
.faq-item:hover{transform:translateY(-3px); border-color:rgba(31,164,99,.18); box-shadow: 0 18px 40px rgba(0,0,0,.08)}
.faq-question{width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 30px; border:none; background:transparent; cursor:pointer; text-align:left; color:var(--dark); font-size:20px; font-weight:600; transition:.3s}
.faq-question:hover{color:var(--green)}
.faq-question span{flex:1}
.faq-question svg{width:24px; height:24px; stroke:var(--green); transition: transform .35s ease}
.faq-answer{max-height:0; overflow:hidden; transition: max-height .45s ease, padding .35s ease; padding:0 30px}
.faq-answer p{padding-bottom:24px; color:var(--text); font-size:16px; line-height:1.8}
.faq-item.active{border-color:rgba(31,164,99,.22); box-shadow: 0 20px 50px rgba(31,164,99,.10)}
.faq-item.active .faq-answer{max-height:250px; padding:0 30px}
.faq-item.active .faq-question svg{transform:rotate(45deg)}
@media (max-width:768px){
    .faq{padding:60px 0}
    .faq-question{padding:22px; font-size:17px}
    .faq-answer{padding:0 22px}
    .faq-item.active .faq-answer{padding:0 22px}
    .faq-answer p{font-size:15px; line-height:1.7}
}
/* FOOTER */
.footer{position:relative; overflow:hidden; background:#111; color:#fff; padding:80px 0 30px}
.footer-bg{position:absolute; inset:0; z-index:0; background: radial-gradient(circle at top left, rgba(31,164,99,.18), transparent 40%), radial-gradient(circle at bottom right, rgba(31,164,99,.10), transparent 45%), linear-gradient(180deg,#181818,#0d0d0d)}
.footer .container{position:relative; z-index:2}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1.2fr; gap:60px; padding-bottom:50px}
.footer-logo{display:inline-block; margin-bottom:22px}
.footer-logo img{width:240px; height:auto; transition:.35s}
.footer-logo:hover img{transform:scale(1.04); filter:drop-shadow(0 8px 18px rgba(31,164,99,.30))}
.footer-text{color:rgba(255,255,255,.72); line-height:1.9; font-size:16px; max-width:360px}
.footer-col h3{font-size:22px; margin-bottom:22px; color:#fff}
.footer-links{list-style:none}
.footer-links li{margin-bottom:14px}
.footer-links a{color:rgba(255,255,255,.75); text-decoration:none; transition:.3s}
.footer-links a:hover{color:var(--green); padding-left:8px}
.footer-contact{font-style:normal}
.footer-contact p{display:flex; align-items:center; gap:12px; margin-bottom:18px; color:rgba(255,255,255,.75)}
.footer-contact svg{width:20px; height:20px; stroke:var(--green); flex-shrink:0}
.footer-contact a{color:inherit; text-decoration:none; transition:.3s}
.footer-contact a:hover{color:var(--green)}
.footer-map{display:inline-flex; align-items:center; gap:10px; margin-top:12px; padding:12px 20px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); color:#fff; text-decoration:none; transition:.35s}
.footer-map:hover{transform:translateY(-3px)}
.footer-map svg{width:18px; height:18px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); padding-top:24px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
.footer-bottom p{color:rgba(255,255,255,.55); font-size:15px}
.footer-bottom strong{color:#fff}
.footer-bottom a{color:var(--green); text-decoration:none}
.footer-bottom a:hover{text-decoration:underline}
@media (max-width:992px){
    .footer{padding:70px 0 30px}
    .footer-grid{grid-template-columns:1fr 1fr; gap:45px}
    .footer-col:first-child{grid-column:1/-1}
}
@media (max-width:768px){
    .footer{padding:60px 0 25px}
    .footer-grid{grid-template-columns:1fr; gap:40px; text-align:center}
    .footer-text{margin:auto}
    .footer-contact p{justify-content:center}
    .footer-map{justify-content:center}
    .footer-bottom{flex-direction:column; text-align:center}
}
/* 404 */
.error404{min-height:100vh; display:flex; justify-content:center; align-items:center; text-align: center}
.error-bg{position:absolute; inset:0; z-index:-2; background: radial-gradient(circle at top left, rgba(31,164,99,.18), transparent 35%), radial-gradient(circle at bottom right, rgba(31,164,99,.12), transparent 40%), linear-gradient(180deg,#f7faf8,#ffffff)}
.error-card{max-width:600px; margin:auto; width:100%; padding:60px 50px; border-radius:30px; background:rgba(255,255,255,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(31,164,99,.12); box-shadow: 0 30px 80px rgba(0,0,0,.08)}
.error-icon{width:100px; height:100px; margin:0 auto 30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(31,164,99,.10), rgba(31,164,99,.22))}
.error-icon svg{width:46px; height:46px; stroke:var(--green)}
.error-code{font-size:120px; font-weight:800; line-height:1; color:var(--green); margin-bottom:15px}
.error404 h1{font-size:42px; margin-bottom:20px}
.error404 p{max-width:520px; margin:auto; color:#666; font-size:18px; line-height:1.8}
.error-buttons{margin-top:45px; display:flex; justify-content:center; gap:18px; flex-wrap:wrap; text-align:center}
.error-buttons .btn{min-width:220px; margin:0 auto;}
.error-buttons .btn svg{width:20px; height:20px}
@media(max-width:768px){
    .error-card{padding:40px 28px}
    .error-code{font-size:84px}
    .error404 h1{font-size:30px}
    .error404 p{font-size:16px}
    .error-buttons{flex-direction:column}
    .error-buttons .btn{width:100%}
}