:root{
  --bg:#F5F7F6;
  --bg2:#FFFFFF;
  --surface:#FFFFFF;
  --surface2:#FFFFFF;
  --muted:#F0F5F2;
  --text:#0C1A14;
  --text2:rgba(12,26,20,.72);
  --text3:rgba(12,26,20,.56);
  --border:rgba(12,26,20,.10);
  --border2:rgba(12,26,20,.16);
  --accent:#1FBF6D;
  --accent2:#95E058;
  --danger:#D64545;
  --shadow:0 18px 60px rgba(12,26,20,.10);
  --shadow2:0 10px 30px rgba(12,26,20,.10);
  --r12:12px;
  --r16:16px;
  --r20:20px;
  --r24:24px;
  --container:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 760px at 50% -120px, rgba(31,191,109,.22), transparent 65%),
    radial-gradient(900px 620px at 95% 15%, rgba(149,224,88,.16), transparent 60%),
    linear-gradient(180deg, #FFFFFF, var(--bg));
  color:var(--text);
  line-height:1.5;
}

/* Сквозной фон, чтобы секции “перетекали” */
body::before{
  content:"";
  position:fixed;
  inset:-20vh -20vw;
  z-index:-2;
  background:
    radial-gradient(900px 620px at 18% 22%, rgba(31,191,109,.14), transparent 62%),
    radial-gradient(860px 560px at 82% 28%, rgba(149,224,88,.12), transparent 62%),
    radial-gradient(760px 520px at 55% 78%, rgba(31,191,109,.08), transparent 62%),
    linear-gradient(180deg, #FFFFFF, var(--bg));
  filter:saturate(1.05);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1200px 900px at 50% 10%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(1200px 900px at 50% 90%, rgba(255,255,255,.45), transparent 55%);
  opacity:.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:12px;top:12px;
  transform:translateY(-160%);
  background:rgba(12,26,20,.88);
  border:1px solid var(--border2);
  padding:10px 12px;border-radius:12px;
  transition:transform .2s ease;
  z-index:1000;
}
.skip-link:focus{transform:translateY(0)}

.container{max-width:var(--container);margin:0 auto;padding:0 20px}

.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(1.1) blur(10px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(12,26,20,.08);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.header__call{
  display:none;
  color:var(--text);
  font-weight:600;
  font-size:14px;
  letter-spacing:-.1px;
  white-space:nowrap;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.header__call:hover{color:var(--text)}

.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand__mark{
  display:inline-flex;align-items:center;justify-content:center;
  height:67px;
  color:#0C1A14;
}
.brand__logo{
  height:100%;
  width:auto;
  display:block;
  object-fit:contain;
  object-position:center;
}
.brand__text{display:flex;align-items:baseline;gap:2px}
.brand__name{font-weight:700;letter-spacing:.2px}
.brand__domain{font-weight:700;color:rgba(12,26,20,.52)}

.nav{display:flex;align-items:center;flex-shrink:0}
.nav__toggle{
  display:none;
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(12,26,20,.12);
  background:rgba(255,255,255,.65);
  color:var(--text);
}
.nav__toggleLines{
  display:block;
  width:18px;height:12px;
  margin:0 auto;
  background:
    linear-gradient(var(--text),var(--text)) 0 0/18px 2px no-repeat,
    linear-gradient(var(--text),var(--text)) 0 5px/18px 2px no-repeat,
    linear-gradient(var(--text),var(--text)) 0 10px/18px 2px no-repeat;
  opacity:.9;
}
.nav__panel{display:flex;align-items:center;flex-wrap:nowrap;gap:18px}
.nav__link{
  font-weight:500;
  color:var(--text2);
  padding:10px 10px;
  border-radius:12px;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.nav__link:hover{background:rgba(31,191,109,.10);color:var(--text)}

.nav__phone{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(12,26,20,.12);
  background:rgba(255,255,255,.68);
  color:var(--text);
  min-width:190px;
}
.nav__phoneLabel{font-size:11.5px;color:var(--text3);line-height:1}
.nav__phoneValue{font-weight:800;letter-spacing:-.2px;line-height:1.05}
.nav__phone:hover{background:rgba(31,191,109,.08);border-color:rgba(12,26,20,.16)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:44px;padding:0 16px;border-radius:14px;
  border:1px solid transparent;
  font-weight:600;
  letter-spacing:.1px;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.btn:focus-visible,
.nav__link:focus-visible,
.header__call:focus-visible,
.footer__link:focus-visible,
.contactCard__value:focus-visible{
  outline:3px solid rgba(31,191,109,.45);
  outline-offset:2px;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#062015;
  box-shadow:0 14px 34px rgba(31,191,109,.18), 0 14px 34px rgba(149,224,88,.12);
}
.btn--primary:hover{box-shadow:0 16px 40px rgba(31,191,109,.22), 0 16px 40px rgba(149,224,88,.14)}
.btn__icon{
  width:22px;height:22px;
  display:grid;place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--wa{
  height:46px;
  padding:0 18px 0 14px;
  border-radius:999px;
  color:#fff;
  border-color:rgba(12,26,20,.10);
  background:
    radial-gradient(900px 180px at 10% 20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, #1FAF5A, #25D366);
  box-shadow:0 18px 46px rgba(37,211,102,.25), 0 16px 40px rgba(12,26,20,.10);
}
.btn--wa:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 58px rgba(37,211,102,.30), 0 18px 46px rgba(12,26,20,.12);
  filter:saturate(1.06) contrast(1.02);
}
.btn--wa:active{transform:translateY(1px)}

@media (min-width: 741px){
  .nav__cta{
    width:46px;
    padding:0;
    gap:0;
    border-radius:999px;
    flex-shrink:0;
  }
  .nav__cta .btn__icon{
    width:24px;height:24px;
    background:transparent;
    border-color:transparent;
    box-shadow:none;
  }
  .nav__cta > span:not(.btn__icon){
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;border:0;
  }
}

.btn--ghost{
  background:rgba(255,255,255,.75);
  border-color:rgba(12,26,20,.14);
  color:var(--text);
}
.btn--ghost:hover{background:rgba(31,191,109,.08);border-color:rgba(12,26,20,.16)}

.hero{
  position:relative;
  padding:54px 0 18px;
  overflow:hidden;
}
.hero__bg{
  position:absolute;
  inset:-80px -40px -120px -40px;
  background:
    url("./img/hero.webp") center/cover no-repeat;
  --parallaxY: 0px;
  transform:translate3d(0, var(--parallaxY), 0);
  will-change:transform;
  filter:saturate(1.05) contrast(1.02);
}
.hero__bgOverlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1020px 560px at 26% 10%, rgba(255,255,255,.96), rgba(255,255,255,.62) 52%, rgba(245,247,246,.30) 78%, rgba(245,247,246,.12)),
    linear-gradient(90deg, rgba(255,255,255,.72), rgba(255,255,255,.42) 56%, rgba(255,255,255,.16)),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.16) 62%, rgba(245,247,246,.0));
  pointer-events:none;
}

.hero__ornaments{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.orb{
  position:absolute;
  width:280px;height:280px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, rgba(31,191,109,.38), rgba(149,224,88,.16) 45%, transparent 70%);
  filter:blur(1px);
  opacity:.65;
  mix-blend-mode:multiply;
  animation:floaty 9s ease-in-out infinite;
}
.orb--a{left:-120px;top:-90px;animation-duration:11s}
.orb--b{right:-140px;top:80px;width:320px;height:320px;opacity:.5;animation-duration:13s}
.orb--c{left:34%;bottom:-160px;width:360px;height:360px;opacity:.42;animation-duration:15s}
.sweep{
  position:absolute;
  inset:-40% -60%;
  background:linear-gradient(90deg, transparent 30%, rgba(255,255,255,.26) 50%, transparent 70%);
  transform:rotate(10deg) translateX(-35%);
  opacity:.45;
  animation:sweep 8.5s ease-in-out infinite;
}

.hero__content{
  padding:18px 18px;
  border-radius:24px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(12,26,20,.10);
  box-shadow:0 18px 50px rgba(12,26,20,.10);
  backdrop-filter: blur(10px);
}

.hero__bg{
  transform-origin:center;
}
@media (prefers-reduced-motion: no-preference){
  .hero__bg{
    animation:kenburns 22s ease-in-out infinite alternate;
  }
}

@keyframes floaty{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-18px,0) scale(1.04)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes sweep{
  0%{transform:rotate(10deg) translateX(-35%);opacity:.12}
  40%{opacity:.50}
  100%{transform:rotate(10deg) translateX(35%);opacity:.12}
}
@keyframes kenburns{
  from{transform:translate3d(0, var(--parallaxY), 0) scale(1.03)}
  to{transform:translate3d(0, calc(var(--parallaxY) - 12px), 0) scale(1.08)}
}
.hero__grid{
  position:relative;
  z-index:1;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:34px;
  align-items:center;
}
.hero__title{
  margin:14px 0 12px;
  font-size:52px;
  line-height:1.05;
  letter-spacing:-.9px;
  text-shadow:0 10px 28px rgba(255,255,255,.55), 0 2px 10px rgba(12,26,20,.10);
}
.hero__subtitle{margin:0;max-width:52ch;color:var(--text2);font-size:16.5px}
.hero__actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

.hero__metrics{
  margin:26px 0 0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  padding:0;
}
.metric{
  margin:0;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(12,26,20,.10);
  background:rgba(255,255,255,.80);
}
.metric__label{color:var(--text3);font-size:12.5px;margin:0}
.metric__value{margin:4px 0 0;font-size:18px;font-weight:700;letter-spacing:-.2px}

.hero__visual{
  position:relative;
  min-height:420px;
  border-radius:var(--r24);
  border:1px solid rgba(12,26,20,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.70)),
    radial-gradient(520px 420px at 30% 30%, rgba(31,191,109,.20), transparent 60%),
    radial-gradient(520px 420px at 70% 65%, rgba(149,224,88,.16), transparent 62%);
  box-shadow:var(--shadow);
  overflow:hidden;
  perspective: 900px;
  transform-style: preserve-3d;
}
.hero__visual::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background: radial-gradient(600px 400px at var(--mx, 60%) var(--my, 40%), rgba(31,191,109,.18), transparent 55%);
  opacity:0;
  transition:opacity .18s ease;
}
.hero__visual.is-interactive::after{opacity:1}

/* Premium before/after slider */
.ba{
  position:absolute;
  inset:14px;
  border-radius:22px;
  border:1px solid rgba(12,26,20,.10);
  overflow:hidden;
  background:rgba(255,255,255,.65);
  box-shadow:0 22px 70px rgba(12,26,20,.14);
  isolation:isolate;
  --p: 50%;
  cursor:ew-resize;
  touch-action:none;
}
.ba::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(800px 340px at 30% 20%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(900px 520px at 70% 70%, rgba(31,191,109,.10), transparent 62%);
  mix-blend-mode:soft-light;
  opacity:.9;
  z-index:4;
}
.ba__img{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  filter:none;
  transform:none;
  pointer-events:none;
}
.ba__img--after{background-image:var(--after)}
.ba__img--before{
  background-image:var(--before);
  width:var(--p);
  overflow:hidden;
}
.ba__split{
  position:absolute;
  top:0;bottom:0;
  left:var(--p);
  width:2px;
  transform:translateX(-1px);
  background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.85) 20%, rgba(255,255,255,.85) 80%, rgba(255,255,255,.0));
  box-shadow:0 0 0 1px rgba(12,26,20,.10), 0 18px 44px rgba(12,26,20,.18);
  z-index:5;
  pointer-events:none;
}
.ba__handle{
  position:absolute;
  left:var(--p);
  top:50%;
  width:54px;height:54px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(12,26,20,.16);
  box-shadow:0 18px 52px rgba(12,26,20,.18);
  display:grid;place-items:center;
  z-index:6;
  backdrop-filter: blur(10px);
  pointer-events:none;
}
.ba__arrows{
  font-size:20px;
  font-weight:900;
  color:rgba(12,26,20,.78);
  letter-spacing:-2px;
}
.ba__label{
  position:absolute;
  top:14px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(12,26,20,.12);
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  font-weight:800;
  letter-spacing:-.2px;
  color:rgba(12,26,20,.86);
  z-index:6;
  pointer-events:none;
}
.ba__label--before{left:14px}
.ba__label--after{right:14px}
.ba__hint{
  position:absolute;
  left:14px;
  bottom:14px;
  padding:8px 12px;
  border-radius:16px;
  border:1px solid rgba(12,26,20,.10);
  background:rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  color:rgba(12,26,20,.72);
  font-size:12.5px;
  z-index:6;
  pointer-events:none;
}
.ba__range{
  position:absolute;
  left:14px;right:14px;bottom:14px;
  height:36px;
  opacity:0;
  z-index:7;
}
/* Keep BA block perfectly static (no hover transitions) */
html[data-motion="ok"] .ba{
  transition:none;
}
html[data-motion="ok"] .ba:hover{
  box-shadow:0 22px 70px rgba(12,26,20,.14);
  border-color:rgba(12,26,20,.10);
}

@media (prefers-reduced-motion: reduce){
  .ba{transition:none}
}
.hero__blob{
  position:absolute;inset:-120px -180px auto auto;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(31,191,109,.62), rgba(149,224,88,.22) 45%, transparent 70%);
  filter:blur(2px);
  opacity:.55;
  pointer-events:none;
}
.hero__gridlines{
  position:absolute;inset:0;
  background:
    linear-gradient(rgba(12,26,20,.06) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(12,26,20,.06) 1px, transparent 1px) 0 0/44px 44px;
  mask-image:radial-gradient(280px 260px at 70% 60%, #000 40%, transparent 70%);
  opacity:.9;
  pointer-events:none;
}
.heroCard{
  position:absolute;
  width:min(88%, 320px);
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(12,26,20,.12);
  background:rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  box-shadow:var(--shadow2);
  transform: translateZ(0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .18s ease;
  transform-style: preserve-3d;
  overflow:hidden;
}
.heroCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.75) 38%, rgba(255,255,255,.12) 55%, transparent 72%);
  transform: translateX(var(--shine, -140%));
  transition: transform .35s ease;
  opacity:.7;
  mix-blend-mode: soft-light;
}
.heroCard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(260px 180px at var(--hx, 30%) var(--hy, 30%), rgba(255,255,255,.55), transparent 60%);
  opacity: var(--halo, 0);
  transition: opacity .18s ease;
}
.heroCard:hover{
  filter: saturate(1.05) contrast(1.02);
}
.hero__visual.is-interactive .heroCard{
  will-change: transform;
}
.hero__visual.is-interactive:hover .heroCard{
  --shine: 140%;
  --halo: .9;
  --lift: -3px;
}

/* Hover-preview images for hero cards */
.heroCard__peek{
  position:absolute;
  top:50%;
  right:-14px;
  width:240px;
  height:160px;
  border-radius:18px;
  border:1px solid rgba(12,26,20,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
    var(--peekImg) center/cover no-repeat;
  box-shadow: 0 24px 60px rgba(12,26,20,.18);
  transform: translate(24px,-50%) scale(.92);
  opacity:0;
  filter: blur(8px);
  pointer-events:none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), filter .22s ease;
}
.heroCard--mid .heroCard__peek{
  right:auto;
  left:-14px;
  transform: translate(-24px,-50%) scale(.92);
}
.heroCard:hover .heroCard__peek{
  opacity:1;
  filter: blur(0);
  transform: translate(34px,-50%) scale(1);
}
.heroCard--mid:hover .heroCard__peek{
  transform: translate(-34px,-50%) scale(1);
}
.heroCard:focus-within .heroCard__peek{
  opacity:1;
  filter: blur(0);
  transform: translate(34px,-50%) scale(1);
}
.heroCard--mid:focus-within .heroCard__peek{
  transform: translate(-34px,-50%) scale(1);
}

/* Set per-card images */
.heroCard--top{--peekImg:url("./img/peek-1.webp")}
.heroCard--mid{--peekImg:url("./img/peek-2.webp")}
.heroCard--bot{--peekImg:url("./img/peek-3.webp")}

@media (prefers-reduced-motion: reduce){
  .hero__visual{perspective:none}
  .hero__visual::after{display:none}
  .heroCard{transition:none;transform:none}
  .heroCard::before,.heroCard::after{display:none}
  .heroCard__peek{display:none}
}
.heroCard__title{font-weight:800;letter-spacing:-.2px}
.heroCard__text{margin-top:4px;color:var(--text2);font-size:13.5px}
.heroCard--top{left:18px;top:18px}
.heroCard--mid{right:18px;top:46%}
.heroCard--bot{left:18px;bottom:18px}

.section{
  position:relative;
  padding:56px 0;
  overflow:hidden;
}

/* Мягкий “тюн” каждой секции, без границ */
.section::before{
  content:"";
  position:absolute;
  inset:-120px 0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 22% 38%, rgba(31,191,109,var(--tintA,.08)), transparent 62%),
    radial-gradient(900px 520px at 78% 55%, rgba(149,224,88,var(--tintB,.06)), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.00), rgba(255,255,255,.22) 30%, rgba(255,255,255,.00) 70%);
  opacity:1;
  mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.section::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), transparent 26%),
    linear-gradient(0deg, rgba(255,255,255,.34), transparent 26%);
  opacity:.35;
}
/* Точки “перетекания” (легкий сдвиг оттенка) */
#services{--tintA:.10;--tintB:.08}
#projects{--tintA:.08;--tintB:.10}
#process{--tintA:.09;--tintB:.07}
#lead{--tintA:.12;--tintB:.10}
#about{--tintA:.08;--tintB:.08}
#contacts{--tintA:.07;--tintB:.09}

.sectionDecor{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.sectionDecor__img{
  position:absolute;
  width:520px;height:520px;
  opacity:.22;
  background-image:url("./img/hero.webp");
  background-size:cover;
  background-repeat:no-repeat;
  background-position: var(--imgX, 50%) calc(var(--imgY, 50%) + var(--pY, 0px));
  filter:saturate(1.05) contrast(1.02);
  mix-blend-mode:multiply;
  border-radius:999px;
  /* делаем “PNG-стикер” через маску */
  -webkit-mask-image: radial-gradient(circle at 30% 30%, #000 0 38%, transparent 68%);
  mask-image: radial-gradient(circle at 30% 30%, #000 0 38%, transparent 68%);
  transform:translate3d(0, var(--pY, 0px), 0) scale(var(--pS, 1));
  will-change:transform;
}

/* Логическое “продолжение” картинки: разные кропы одного фото */
.sectionDecor__img--leaf{
  left:-220px;top:-80px;
  --pS:1.05;
  --imgX: 12%;
  --imgY: 18%;
  opacity:.18;
  -webkit-mask-image: radial-gradient(ellipse at 35% 35%, #000 0 42%, transparent 74%);
  mask-image: radial-gradient(ellipse at 35% 35%, #000 0 42%, transparent 74%);
}
.sectionDecor__img--leaf2{
  right:-260px;bottom:-160px;width:620px;height:620px;
  --pS:1.12;
  --imgX: 84%;
  --imgY: 28%;
  opacity:.14;
  -webkit-mask-image: radial-gradient(ellipse at 55% 55%, #000 0 40%, transparent 72%);
  mask-image: radial-gradient(ellipse at 55% 55%, #000 0 40%, transparent 72%);
}
.sectionDecor__img--pond{
  right:-240px;top:-120px;width:600px;height:600px;
  --imgX: 56%;
  --imgY: 48%;
  opacity:.12;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0 38%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 45%, #000 0 38%, transparent 70%);
}
.sectionDecor__img--path{
  left:-260px;bottom:-160px;width:680px;height:680px;
  --imgX: 44%;
  --imgY: 60%;
  opacity:.11;
  -webkit-mask-image: radial-gradient(ellipse at 45% 55%, #000 0 36%, transparent 72%);
  mask-image: radial-gradient(ellipse at 45% 55%, #000 0 36%, transparent 72%);
}
.sectionDecor__img--spray{
  left:56%;top:-200px;width:520px;height:520px;
  --imgX: 72%;
  --imgY: 52%;
  opacity:.10;
  -webkit-mask-image: radial-gradient(circle at 45% 40%, #000 0 34%, transparent 72%);
  mask-image: radial-gradient(circle at 45% 40%, #000 0 34%, transparent 72%);
}
.sectionDecor__img--glow{
  right:-260px;top:-220px;width:700px;height:700px;
  --imgX: 18%;
  --imgY: 68%;
  opacity:.11;
  -webkit-mask-image: radial-gradient(circle at 55% 45%, #000 0 34%, transparent 72%);
  mask-image: radial-gradient(circle at 55% 45%, #000 0 34%, transparent 72%);
}
.sectionDecor__img--greenwall{
  left:-240px;top:-180px;width:700px;height:700px;
  --imgX: 8%;
  --imgY: 22%;
  opacity:.10;
  -webkit-mask-image: radial-gradient(ellipse at 35% 50%, #000 0 34%, transparent 74%);
  mask-image: radial-gradient(ellipse at 35% 50%, #000 0 34%, transparent 74%);
}
.sectionDecor__img--bench{
  right:-260px;bottom:-220px;width:700px;height:700px;
  --imgX: 86%;
  --imgY: 78%;
  opacity:.10;
  -webkit-mask-image: radial-gradient(ellipse at 55% 60%, #000 0 34%, transparent 74%);
  mask-image: radial-gradient(ellipse at 55% 60%, #000 0 34%, transparent 74%);
}

.section > .container{position:relative;z-index:1}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.section__title{margin:0;font-size:34px;letter-spacing:-.5px}
.section__desc{margin:0;max-width:64ch;color:var(--text2)}
.section__foot{margin-top:18px}

.cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}
.card{
  padding:0 16px 18px;
  border-radius:20px;
  border:1px solid rgba(12,26,20,.10);
  background:rgba(255,255,255,.88);
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.card:hover{transform:translateY(-2px);border-color:rgba(12,26,20,.14);background:#FFFFFF}
.card__media{
  margin:14px 0 10px;
  height:160px;
  border-radius:18px;
  border:1px solid rgba(12,26,20,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.2)),
    url("./img/card-design.webp") center/cover no-repeat;
}
.card__media--irrigation{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.18)),
    url("./img/card-irrigation.webp") center/cover no-repeat;
}
.card__media--lawn{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.18)),
    url("./img/card-lawn.webp") center/cover no-repeat;
}
.card__media--planting{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.18)),
    url("./img/card-planting.webp") center/cover no-repeat;
}
.card__media--hardscape{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.18)),
    url("./img/card-hardscape.webp") center/cover no-repeat;
}
.card__media--care{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.18)),
    url("./img/card-care.webp") center/cover no-repeat;
}
.card__media--lighting{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.18)),
    url("./img/card-lighting.webp") center/cover no-repeat;
}
.card__icon{
  width:44px;height:44px;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid rgba(12,26,20,.10);
  background:rgba(31,191,109,.12);
  margin-bottom:10px;
}
.card__title{margin:0 0 6px;font-size:16.5px}
.card__text{margin:0;color:var(--text2);font-size:14.2px}

.projects{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}
.project{
  border-radius:22px;
  border:1px solid rgba(12,26,20,.10);
  background:rgba(255,255,255,.88);
  overflow:hidden;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.project:hover{transform:translateY(-2px);border-color:rgba(12,26,20,.14);background:#FFFFFF}
.project__media{
  aspect-ratio: 16/10;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.15)),
    url("./img/project-12sotok.webp") center/cover no-repeat;
}
.project__media--alt{
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.15)),
    url("./img/project-3500m2.webp") center/cover no-repeat;
}
.project__media--third{
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.15)),
    url("./img/project-7200m2.webp") center/cover no-repeat;
}
.project__body{padding:14px 14px 16px}
.project__title{margin:0 0 4px;font-size:16.5px}
.project__meta{margin:0;color:var(--text2);font-size:14px}

.steps{
  list-style:none;
  padding:0;margin:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
}
.step{
  border-radius:22px;
  border:1px solid rgba(12,26,20,.10);
  background:rgba(255,255,255,.88);
  padding:18px 16px;
}
.step__num{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  font-weight:800;letter-spacing:-.2px;
  color:#062015;
  background:linear-gradient(135deg, rgba(31,191,109,.95), rgba(149,224,88,.85));
}
.step__title{margin:10px 0 4px;font-size:16px}
.step__text{margin:0;color:var(--text2);font-size:14.2px}

.section--cta{
  background:
    radial-gradient(800px 500px at 20% 20%, rgba(31,191,109,.20), transparent 60%),
    radial-gradient(800px 500px at 80% 40%, rgba(149,224,88,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(240,245,242,.85));
  border-top:1px solid rgba(12,26,20,.06);
  border-bottom:1px solid rgba(12,26,20,.06);
}
.cta{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  align-items:start;
}
.cta__title{margin:0 0 8px;font-size:34px;letter-spacing:-.6px}
.cta__text{margin:0;color:var(--text2);max-width:60ch}
.cta__bullets{margin:14px 0 0;padding-left:18px;color:var(--text2)}
.cta__bullets li{margin:8px 0}

.form{
  border-radius:24px;
  border:1px solid rgba(12,26,20,.12);
  background:rgba(255,255,255,.88);
  box-shadow:var(--shadow2);
  padding:16px 16px;
}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.field--full{grid-column:1 / -1}
.field__label{font-weight:600;color:rgba(12,26,20,.78);font-size:13px}
.field__input{
  height:44px;
  border-radius:14px;
  border:1px solid rgba(12,26,20,.14);
  background:rgba(255,255,255,.92);
  color:var(--text);
  padding:0 12px;
  outline:none;
}
.field__input:focus{border-color:rgba(31,191,109,.55);box-shadow:0 0 0 4px rgba(31,191,109,.12)}
.field__input--area{height:auto;padding:10px 12px;resize:vertical;min-height:110px}
.form__submit{width:100%;margin-top:6px}
.form__hint{margin:10px 0 0;color:var(--text3);font-size:12.5px}
.form__result{margin:10px 0 0;font-weight:600}
.form__result.is-ok{color:rgba(31,191,109,.95)}
.form__result.is-err{color:rgba(214,69,69,.95)}

.about{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  align-items:start;
}
.about__facts{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
.fact{
  border-radius:20px;
  border:1px solid rgba(12,26,20,.10);
  background:rgba(255,255,255,.88);
  padding:14px 14px;
}
.fact__value{font-size:26px;font-weight:900;letter-spacing:-.5px}
.fact__label{color:var(--text2);font-size:13px;margin-top:4px}
.about__panel{
  border-radius:24px;
  border:1px solid rgba(12,26,20,.10);
  background:rgba(255,255,255,.88);
  padding:16px 16px;
}
.about__panel--mini{margin-top:12px}
.about__panelTitle{font-weight:800;margin-bottom:8px}
.about__panelText{color:var(--text2)}
.about__list{margin:0;padding-left:18px;color:var(--text2)}
.about__list li{margin:7px 0}

.contacts__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
}
.contactCard{
  border-radius:22px;
  border:1px solid rgba(12,26,20,.10);
  background:rgba(255,255,255,.88);
  padding:16px 16px;
}
.contactCard__label{color:var(--text3);font-weight:600;font-size:12.5px}
.contactCard__value{display:inline-block;margin-top:8px;font-size:16px;font-weight:800;letter-spacing:-.2px}
.contactCard__value:hover{text-decoration:underline}
.contactCard__hint{margin-top:6px;color:var(--text2);font-size:13px}
.contactCard--map{padding:0;overflow:hidden}
.mapStub{
  height:100%;
  min-height:160px;
  display:grid;
  align-content:center;
  gap:6px;
  padding:16px 16px;
  background:
    radial-gradient(260px 160px at 40% 40%, rgba(31,191,109,.20), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
}
.mapStub__title{font-weight:900;letter-spacing:-.2px}
.mapStub__text{color:var(--text2)}

.footer{padding:26px 0 44px;color:var(--text2)}
.footer__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-top:1px solid rgba(12,26,20,.10);
  padding-top:18px;
}
.footer__brand{font-weight:800;color:rgba(12,26,20,.88)}
.footer__logo{
  height:72px;
  width:auto;
  display:block;
  filter:drop-shadow(0 8px 18px rgba(12,26,20,.12));
}
.footer__copy{margin-top:4px;font-size:13px;color:var(--text3)}
.footer__right{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.footer__link{padding:8px 10px;border-radius:12px}
.footer__link:hover{background:rgba(255,255,255,.05);color:var(--text)}

.toTop{
  position:fixed;right:16px;bottom:16px;z-index:60;
  width:48px;height:48px;border-radius:16px;
  border:1px solid rgba(12,26,20,.14);
  background:rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  color:var(--text);
  box-shadow:var(--shadow2);
}
.toTop:hover{background:rgba(255,255,255,.05)}
.toTop{
  right:92px; /* чтобы не перекрывалась WA-кнопкой */
}
.toTop:not([hidden]){
  animation:toTop-pop .22s ease-out both;
}
html[data-motion="ok"] .toTop:not([hidden]){
  animation:toTop-pop .22s ease-out both, toTop-breathe 3.2s ease-in-out infinite;
}
@keyframes toTop-pop{
  from{transform:translate3d(0,10px,0) scale(.92); opacity:0}
  to{transform:translate3d(0,0,0) scale(1); opacity:1}
}
@keyframes toTop-breathe{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-1px,0) scale(1.03)}
}

.waFloat{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:70;
  width:62px;
  height:62px;
  padding:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(12,26,20,.14);
  background:radial-gradient(circle at 30% 30%, rgba(149,224,88,.95), rgba(31,191,109,.95));
  color:#FFFFFF;
  box-shadow:0 22px 60px rgba(31,191,109,.25);
  transform:translate3d(0,0,0);
  will-change:transform, box-shadow, filter;
}
.callFloat{
  position:fixed;
  right:16px;
  bottom:90px;
  z-index:70;
  width:62px;
  height:62px;
  padding:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(12,26,20,.14);
  background:rgba(255,255,255,.86);
  color:#0C1A14;
  box-shadow:0 22px 60px rgba(12,26,20,.16);
  backdrop-filter: blur(10px);
  transform:translate3d(0,0,0);
  will-change:transform, box-shadow, filter;
  transition:transform .12s ease, filter .12s ease, background .12s ease;
}
.callFloat:hover{background:rgba(255,255,255,.94);filter:saturate(1.05)}
.callFloat:active{transform:translateY(1px) scale(.99)}
.callFloat__icon{
  width:46px;
  height:46px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(12,26,20,.04);
  border:1px solid rgba(12,26,20,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40);
}
.waFloat::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:inherit;
  background:radial-gradient(circle, rgba(31,191,109,.28), transparent 62%);
  opacity:.0;
  transform:scale(.85);
}
.waFloat::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  border:2px solid rgba(31,191,109,.28);
  opacity:.0;
  transform:scale(.85);
}
.waFloat:hover{filter:saturate(1.08)}
.waFloat:active{transform:translateY(1px) scale(.99)}
.waFloat__icon{
  width:46px;
  height:46px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
@media (max-width: 740px){
  .waFloat{right:14px;bottom:14px}
  .callFloat{right:14px;bottom:86px}
}

/* Анимация WA CTA (пульс + “дергание”) */
html[data-motion="ok"] .waFloat{
  animation:wa-attention 6.2s ease-in-out infinite;
}
html[data-motion="ok"] .waFloat::before{
  animation:wa-ripple 2.0s ease-out infinite;
}
html[data-motion="ok"] .waFloat::after{
  animation:wa-ring 2.0s ease-out infinite;
}
@keyframes wa-attention{
  0%, 78%, 100%{
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
    box-shadow:0 22px 60px rgba(31,191,109,.22);
  }
  50%{
    transform:translate3d(0,-2px,0) scale(1.03) rotate(0deg);
    box-shadow:0 28px 78px rgba(31,191,109,.30);
  }
  82%{transform:translate3d(0,-3px,0) scale(1.08) rotate(-10deg)}
  86%{transform:translate3d(0,0,0) scale(1.08) rotate(10deg)}
  90%{transform:translate3d(0,-2px,0) scale(1.06) rotate(-6deg)}
  94%{transform:translate3d(0,0,0) scale(1.03) rotate(0deg)}
}
@keyframes wa-ripple{
  0%{opacity:.0; transform:scale(.85)}
  20%{opacity:.55}
  100%{opacity:0; transform:scale(1.25)}
}
@keyframes wa-ring{
  0%{opacity:.0; transform:scale(.85)}
  35%{opacity:.55}
  100%{opacity:0; transform:scale(1.18)}
}

/* Анимации для кнопок WhatsApp/заявки */
[data-whatsapp-link].btn{
  position:relative;
  overflow:hidden;
}
[data-whatsapp-link].btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform:translateX(-120%);
  opacity:.0;
}
html[data-motion="ok"] [data-whatsapp-link].btn.btn--primary{
  animation:cta-breathe 4.0s ease-in-out infinite;
}
html[data-motion="ok"] [data-whatsapp-link].btn.btn--primary::after{
  animation:cta-shine 4.0s ease-in-out infinite;
}
html[data-motion="ok"] [data-whatsapp-link].btn.btn--wa{
  animation:cta-breathe 4.0s ease-in-out infinite;
}
html[data-motion="ok"] [data-whatsapp-link].btn.btn--wa::after{
  animation:cta-shine 4.0s ease-in-out infinite;
}
@keyframes cta-breathe{
  0%,100%{transform:translateY(0); box-shadow:0 14px 34px rgba(31,191,109,.18), 0 14px 34px rgba(149,224,88,.12)}
  50%{transform:translateY(-1px); box-shadow:0 18px 46px rgba(31,191,109,.22), 0 18px 46px rgba(149,224,88,.16)}
}
@keyframes cta-shine{
  0%{opacity:0; transform:translateX(-120%)}
  35%{opacity:.0}
  55%{opacity:.9; transform:translateX(120%)}
  100%{opacity:0; transform:translateX(120%)}
}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr;gap:16px}
  .hero__visual{min-height:360px}
  .cta{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .contacts__grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2, minmax(0,1fr))}
  .cards{grid-template-columns:repeat(2, minmax(0,1fr))}
  .projects{grid-template-columns:repeat(2, minmax(0,1fr))}
}

@media (max-width: 1180px){
  .nav__phone{display:none}
}

@media (max-width: 740px){
  .header__inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    padding:10px 0;
  }
  .header__call{display:inline-flex;justify-self:center;max-width:100%}
  .brand__mark{height:56px}
  .nav__toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav__panel{
    position:absolute;
    right:20px;top:62px;
    width:min(92vw, 360px);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:10px 10px;
    border-radius:18px;
    border:1px solid rgba(12,26,20,.14);
    background:rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    box-shadow:var(--shadow2);
  }
  .nav__panel.is-open{display:flex}
  .nav__link{padding:12px 12px}
  .nav__cta{margin-top:6px}
  .hero__title{font-size:40px}
  .hero__content{padding:14px 14px;border-radius:22px}
  .section__head{flex-direction:column;align-items:flex-start}
  .contacts__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .projects{grid-template-columns:1fr}
  .hero__metrics{grid-template-columns:1fr}
}

@media (max-width: 420px){
  .header__call{font-size:13px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}