/* Сторінка «Про нас» (templates/about.php). Префікс .ab- ; шрифти й кольори — як на сайті (Benzin для заголовків, Manrope для тексту). */
.ab{--ab-green:#22b235;--ab-green-d:#1a8f2a;--ab-lime:#3ddc4f;--ab-ink:#0a0c0b;--ab-ink2:#141816;--ab-text:#222;--ab-muted:#5d625b;--ab-line:#e3e6e0;--ab-alt:#f3f5f1;--ab-r:22px;overflow-x:clip;flex:0 0 auto;background:#fafafa;color:var(--ab-text)}
.ab *{box-sizing:border-box}
.ab svg{fill:currentColor}

/* ---- заголовки й загальні елементи ---- */
.ab-sec{padding:96px 0}
.ab-h1,.ab-h2{font-family:Benzin,Manrope,sans-serif;text-transform:uppercase;font-weight:400;margin:0;letter-spacing:-.01em}
.ab-h2{font-size:clamp(24px,3vw,40px);line-height:1.12;max-width:880px;color:var(--ab-text)}
.ab-h2 em,.ab-h1__b{font-style:normal;color:var(--ab-green)}
.ab .ab-h2--light{color:#fff}
.ab-h2--light em{color:var(--ab-lime)}
.ab-eyebrow{display:inline-block;margin:0 0 16px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ab-green-d)}
.ab-eyebrow--light{color:var(--ab-lime)}
.ab-sub{margin:18px 0 0;max-width:640px;font-size:1.0625rem;line-height:1.65;color:var(--ab-muted)}
.ab-sub--light{color:rgba(255,255,255,.66)}
.ab-sub strong{color:var(--ab-text)}
.ab-stars{color:#f5b301;letter-spacing:2px}
.ab-link{display:inline-flex;align-items:center;gap:6px;margin-top:22px;font-weight:800;color:var(--ab-green-d);text-decoration:none;border-bottom:2px solid rgba(34,178,53,.3);padding-bottom:2px;transition:border-color .2s}
.ab-link:hover{border-color:var(--ab-green)}
.ab-dark{background:var(--ab-ink);color:#fff}

.ab-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:14px;border:1px solid transparent;font:800 16px/1 Manrope,sans-serif;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.ab-btn svg{width:20px;height:20px;flex:0 0 20px}
.ab-btn--primary{background:var(--ab-green);color:#fff;box-shadow:0 10px 30px rgba(34,178,53,.35)}
.ab-btn--primary:hover{background:#27c63b;transform:translateY(-2px);box-shadow:0 14px 36px rgba(34,178,53,.45)}
.ab-btn--ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(6px)}
.ab-btn--ghost:hover{border-color:var(--ab-lime);background:rgba(61,220,79,.1)}

/* поява при прокрутці (клас додає about.js; без JS усе видно) */
.ab.is-js [data-ab-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.ab.is-js [data-ab-reveal].is-in{opacity:1;transform:none}

/* ---- 1. перший екран ---- */
.ab-hero{position:relative;padding:calc(var(--ab-header-h,100px) + 48px) 0 56px;background:radial-gradient(1200px 600px at 78% 8%,rgba(34,178,53,.22),transparent 60%),linear-gradient(180deg,#0a0c0b 0%,#0d1210 100%);color:#fff;isolation:isolate;overflow:clip}
.ab-hero:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 60% 30%,#000 10%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 60% 30%,#000 10%,transparent 72%)}
.ab-hero__glow{position:absolute;left:-160px;bottom:-220px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(34,178,53,.28),transparent 68%);filter:blur(20px);z-index:-1}
.ab-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.ab-chip{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);font-size:13px;font-weight:700;letter-spacing:.04em}
.ab-chip i{width:8px;height:8px;border-radius:50%;background:var(--ab-lime);box-shadow:0 0 0 4px rgba(61,220,79,.2);animation:abBlink 2s ease-in-out infinite}
@keyframes abBlink{50%{box-shadow:0 0 0 8px rgba(61,220,79,0)}}
.ab-h1{margin:22px 0 0;font-size:clamp(30px,3.7vw,54px);line-height:1.06}
.ab-h1 span{display:block}
.ab-h1__b{color:var(--ab-lime);position:relative}
.ab-hero__lead{margin:26px 0 0;max-width:600px;font-size:clamp(1rem,1.3vw,1.1875rem);line-height:1.65;color:rgba(255,255,255,.74)}
.ab-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* маршрут США → Клайпеда → Львів */
.ab-map{position:relative;aspect-ratio:600/520;width:100%;max-width:620px;justify-self:end}
.ab-map__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ab-map__base{stroke:rgba(255,255,255,.22);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round}
.ab-map__line{stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:abDraw 3.2s .5s cubic-bezier(.5,.1,.2,1) forwards;filter:drop-shadow(0 0 8px rgba(61,220,79,.6))}
@keyframes abDraw{to{stroke-dashoffset:0}}
.ab-map__node circle:not(.ab-map__pulse){fill:var(--ab-lime);stroke:#0a0c0b;stroke-width:3}
.ab-map__pulse{fill:none;stroke:var(--ab-lime);stroke-width:2;opacity:.7;transform-box:fill-box;transform-origin:center;animation:abPulse 2.6s ease-out infinite}
.ab-map__node--2 .ab-map__pulse{animation-delay:.9s}
.ab-map__node--3 .ab-map__pulse{animation-delay:1.8s}
@keyframes abPulse{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}
.ab-pin{position:absolute;display:flex;flex-direction:column;gap:2px;padding:9px 14px;border-radius:14px;background:rgba(14,19,16,.82);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);font-size:12px;font-weight:600;color:rgba(255,255,255,.62);white-space:nowrap}
.ab-pin b{font-size:15px;color:#fff}
.ab-pin--1{left:4%;top:77%}
.ab-pin--2{left:57%;top:12%}
.ab-pin--3{left:76%;top:62%}
.ab-float{position:absolute;display:flex;align-items:center;gap:10px;max-width:230px;padding:12px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(34,178,53,.3),rgba(34,178,53,.1));border:1px solid rgba(61,220,79,.35);backdrop-filter:blur(10px);font-size:13px;font-weight:700;line-height:1.3;animation:abFloat 6s ease-in-out infinite}
.ab-float svg{width:22px;height:22px;flex:0 0 22px;color:var(--ab-lime)}
.ab-float--1{left:2%;top:12%}
.ab-float--2{left:36%;top:92%;animation-delay:-3s}
@keyframes abFloat{50%{transform:translateY(-10px)}}

/* цифри */
.ab-stats{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
.ab-stat{padding:28px 26px;border-right:1px solid rgba(255,255,255,.1)}
.ab-stat:last-child{border-right:0}
.ab-stat__num{font-family:Benzin,Manrope,sans-serif;font-size:clamp(34px,4vw,56px);line-height:1;color:#fff}
.ab-stat__num small{font-size:.42em;color:var(--ab-lime);letter-spacing:.02em}
.ab-stat p{margin:12px 0 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.62)}

/* ---- 2. цінності ---- */
.ab-values__head{max-width:900px}
.ab-values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.ab-value{position:relative;padding:34px 30px 32px;border-radius:var(--ab-r);background:#fff;border:1px solid var(--ab-line);overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.ab-value:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(20,40,20,.1);border-color:rgba(34,178,53,.5)}
.ab-value:before{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--ab-green);transition:width .45s}
.ab-value:hover:before{width:100%}
.ab-value__n{display:block;font-family:Benzin,Manrope,sans-serif;font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(34,178,53,.55);margin-bottom:22px}
.ab-value h3{margin:0 0 12px;font:800 22px/1.2 Manrope,sans-serif}
.ab-value p{margin:0;font-size:16px;line-height:1.65;color:var(--ab-muted)}

/* ---- 3. шлях авто ---- */
.ab-way{background:var(--ab-alt)}
.ab-way__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.ab-way__side{position:sticky;top:calc(var(--ab-header-h,100px) + 24px)}
.ab-steps{--ab-progress:0;list-style:none;margin:0;padding:0 0 0 0;position:relative}
.ab-steps:before,.ab-steps:after{content:"";position:absolute;left:23px;top:24px;width:3px;border-radius:3px}
.ab-steps:before{bottom:24px;background:var(--ab-line)}
.ab-steps:after{height:calc((100% - 48px) * var(--ab-progress));background:linear-gradient(var(--ab-green),var(--ab-lime));box-shadow:0 0 14px rgba(61,220,79,.55)}
.ab-step{position:relative;padding:0 0 38px 78px}
.ab-step:last-child{padding-bottom:0}
.ab-step__dot{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid var(--ab-line);font:800 18px/1 Manrope,sans-serif;color:var(--ab-muted);transition:background .4s,border-color .4s,color .4s,transform .4s}
.ab-step.is-on .ab-step__dot{background:var(--ab-green);border-color:var(--ab-green);color:#fff;transform:scale(1.08);box-shadow:0 8px 22px rgba(34,178,53,.4)}
.ab-step h3{margin:4px 0 8px;font:800 22px/1.25 Manrope,sans-serif}
.ab-step p{margin:0;max-width:560px;font-size:16px;line-height:1.65;color:var(--ab-muted)}

/* ---- 4. перевірки ---- */
.ab-checks{position:relative;background:radial-gradient(900px 500px at 12% 0,rgba(34,178,53,.16),transparent 60%),var(--ab-ink)}
.ab-checks__head{max-width:820px}
.ab-checks__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.ab-check{position:relative;min-height:230px;padding:28px 28px 30px;border-radius:var(--ab-r);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);overflow:hidden;transition:transform .3s,border-color .3s,background .3s}
.ab-check:hover{transform:translateY(-5px);border-color:rgba(61,220,79,.55);background:linear-gradient(160deg,rgba(34,178,53,.2),rgba(255,255,255,.02))}
.ab-check__n{position:absolute;right:18px;top:6px;font-family:Benzin,Manrope,sans-serif;font-size:84px;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14);pointer-events:none;transition:-webkit-text-stroke-color .3s}
.ab-check:hover .ab-check__n{-webkit-text-stroke-color:rgba(61,220,79,.5)}
.ab-check h3{position:relative;margin:56px 0 10px;font:800 20px/1.25 Manrope,sans-serif;color:#fff}
.ab-check p{position:relative;margin:0;font-size:15px;line-height:1.65;color:rgba(255,255,255,.64)}

/* ---- 5. гарантії ---- */
.ab-guar{padding-top:0;margin-top:-1px;background:linear-gradient(180deg,var(--ab-ink) 0,var(--ab-ink) 120px,#fafafa 120px)}
.ab-guar__card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-radius:32px;overflow:hidden;box-shadow:0 30px 80px rgba(10,20,10,.25);background:#fff;border:1px solid var(--ab-line)}
.ab-guar__main{position:relative;padding:48px 44px;background:radial-gradient(500px 300px at 0 0,rgba(61,220,79,.28),transparent 70%),linear-gradient(145deg,#12261a,#0a0c0b);color:#fff}
.ab-guar__lead{margin:20px 0 30px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.76)}
.ab-guar__list{list-style:none;margin:0;padding:44px;display:grid;gap:20px;align-content:center}
.ab-guar__list li{display:flex;gap:14px;align-items:flex-start;font-size:17px;font-weight:600;line-height:1.5}
.ab-guar__list svg{flex:0 0 28px;width:28px;height:28px;padding:5px;border-radius:50%;background:rgba(34,178,53,.14);color:var(--ab-green-d)}

/* ---- 6. зв'язок ---- */
.ab-contact__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.ab-ch{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;padding:28px 26px;border-radius:var(--ab-r);background:#fff;border:1px solid var(--ab-line);color:var(--ab-text);text-decoration:none;font-family:inherit;cursor:pointer;transition:transform .3s,box-shadow .3s,border-color .3s}
.ab-ch:hover{transform:translateY(-5px);border-color:var(--ab-green);box-shadow:0 20px 44px rgba(20,40,20,.1)}
.ab-ch svg,.ab-ch__spark{width:44px;height:44px;padding:10px;border-radius:14px;background:rgba(34,178,53,.12);color:var(--ab-green-d);margin-bottom:8px}
.ab-ch__spark{display:grid;place-items:center;font-size:20px;padding:0}
.ab-ch b{font-size:19px;font-weight:800}
.ab-ch span:not(.ab-ch__spark){font-size:15px;line-height:1.55;color:var(--ab-muted)}
.ab-ch--office{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 18px}
.ab-ch--office svg{margin:0}

/* ---- 7. відгуки ---- */
.ab-reviews{background:var(--ab-alt)}
.ab-videos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.ab-video{position:relative;display:block;padding:0;border:0;border-radius:var(--ab-r);overflow:hidden;aspect-ratio:16/10;background:#16201a;cursor:pointer}
.ab-video img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ab-video:hover img{transform:scale(1.06)}
.ab-video__play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(34,178,53,.92);box-shadow:0 0 0 10px rgba(34,178,53,.25)}
.ab-video__play:after{content:"";position:absolute;left:25px;top:20px;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.ab-video__cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;font-size:14px;font-weight:700;text-align:left}
.ab-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.ab-quote{margin:0;padding:28px 26px;border-radius:var(--ab-r);background:#fff;border:1px solid var(--ab-line);position:relative}
.ab-quote:before{content:"“";position:absolute;right:20px;top:2px;font:400 80px/1 Georgia,serif;color:rgba(34,178,53,.25)}
.ab-quote blockquote{margin:0 0 16px;font-size:16px;line-height:1.7}
.ab-quote figcaption{font-weight:800;color:var(--ab-green-d)}
.ab-reviews__more{margin-top:8px}

/* ---- адаптив ---- */
@media (max-width:1100px){
  .ab-hero__grid{grid-template-columns:1fr;gap:28px}
  .ab-map{justify-self:center;max-width:560px}
  .ab-stats{grid-template-columns:repeat(2,1fr)}
  .ab-stat:nth-child(2){border-right:0}
  .ab-stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.1)}
  .ab-way__grid{grid-template-columns:1fr;gap:36px}
  .ab-way__side{position:static}
  .ab-checks__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .ab-sec{padding:64px 0}
  .ab-values__grid,.ab-videos,.ab-quotes{grid-template-columns:1fr}
  .ab-guar__card{grid-template-columns:1fr}
  .ab-guar__main,.ab-guar__list{padding:32px 26px}
  .ab-contact__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .ab-hero{padding-bottom:36px}
  .ab-hero__actions .ab-btn{width:100%}
  .ab-map{margin-top:8px}
  .ab-pin{font-size:11px;padding:7px 10px}
  .ab-pin b{font-size:13px}
  .ab-float{font-size:11px;max-width:160px;padding:9px 11px}
  .ab-float--2{left:30%}
  .ab-stats{margin-top:40px}
  .ab-stat{padding:20px 16px}
  .ab-checks__grid,.ab-contact__grid{grid-template-columns:1fr}
  .ab-step{padding-left:64px}
  .ab-step__dot{width:42px;height:42px}
  .ab-steps:before,.ab-steps:after{left:20px}
}
@media (prefers-reduced-motion:reduce){
  .ab *,.ab *:before,.ab *:after{animation:none !important;transition:none !important}
  .ab-map__line{stroke-dashoffset:0}
  .ab.is-js [data-ab-reveal]{opacity:1;transform:none}
  .ab-map__car{display:none}
}
.ab .consultation{margin-top:0}