/* =========================================================
   Евакуатор 24/7 — стилі
   Мобільна версія — база, десктоп — @media (min-width:900px)
   ========================================================= */

:root{
  --bg:#0d0f12;
  --bg-2:#101215;
  --panel:#111317;
  --panel-dark:#0b0d10;
  --card:#15181c;
  --card-hi:#181c21;
  --line:#21262c;
  --line-2:#1e2228;
  --line-3:#1c2026;
  --acc:#f5b301;
  --acc-hi:#ffc528;
  --acc-lnk:#ffd050;
  --ink:#17191d;
  --t1:#fff;
  --t2:#e6e9ed;
  --t3:#c9ced5;
  --t4:#8b929b;
  --t5:#868d96;
  --t6:#6b7280;
  --soc:#1c1f24;
  --font:Manrope,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--t2);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(74px + env(safe-area-inset-bottom)); /* місце під нижню кнопку */
}

a{color:var(--acc);text-decoration:none}
a:hover{color:var(--acc-lnk)}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%}
button{font-family:inherit}

.sprite{display:none}
.acc{color:var(--acc)}

.ico{display:block;flex:none;fill:none;width:16px;height:16px}
.ico--12{width:12px;height:12px}
.ico--13{width:13px;height:13px}
.ico--14{width:14px;height:14px}
.ico--17{width:17px;height:17px}
.ico--18{width:18px;height:18px}
.ico--19{width:19px;height:19px}
.ico--22{width:22px;height:22px}
.ico--24{width:24px;height:24px}
.ico--26{width:26px;height:26px}
.ico--truck{width:17px;height:12px}
.ico--burger{width:22px;height:16px;color:var(--t2)}

.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 16px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:10px 16px;background:var(--acc);color:var(--ink);
  font:800 14px/1 var(--font);border-radius:0 0 8px 0;
}
.skip:focus{left:0;color:var(--ink)}

:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes ringPulse{
  0%{box-shadow:0 0 0 0 rgba(245,179,1,.5)}
  70%{box-shadow:0 0 0 14px rgba(245,179,1,0)}
  100%{box-shadow:0 0 0 0 rgba(245,179,1,0)}
}
@keyframes slowPan{from{background-position:0 0}to{background-position:120px 120px}}

/* ============ ШАПКА ============ */
.hdr{
  position:sticky;top:0;z-index:40;
  background:var(--panel);
  border-bottom:1px solid var(--line-2);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:58px;gap:12px}

.burger{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-left:-6px;padding:0;
  background:none;border:0;color:var(--t2);cursor:pointer;
}

.logo{display:flex;align-items:center;gap:8px;color:var(--t1)}
.logo:hover{color:var(--t1)}
.logo__mark{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:20px;flex:none;border-radius:4px;
  background:var(--acc);color:var(--ink);
}
.logo__txt{font:800 15px/1 var(--font);color:var(--t1);white-space:nowrap}

.nav{display:none}

.hdr__tel{display:flex;align-items:center;gap:10px;color:var(--acc)}
.hdr__tel .ico{width:20px;height:20px}
.hdr__tel-txt{display:none}

/* ============ МОБІЛЬНЕ МЕНЮ ============ */
.drawer{position:fixed;inset:0;z-index:60;background:rgba(6,7,9,.66)}
.drawer[hidden]{display:none}
.drawer__panel{
  width:min(320px,86vw);height:100%;
  background:var(--panel);border-right:1px solid var(--line-2);
  padding:16px;display:flex;flex-direction:column;gap:22px;
  animation:slideIn .22s ease both;
}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:none}}
.drawer__top{display:flex;align-items:center;justify-content:space-between}
.drawer__close{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;background:none;border:0;color:var(--t3);cursor:pointer;
}
.drawer__nav{display:flex;flex-direction:column}
.drawer__nav a{
  padding:14px 2px;border-bottom:1px solid var(--line-2);
  font:700 15px/1 var(--font);color:var(--t2);
}
.drawer__nav a:hover{color:var(--acc)}
.drawer__tel{
  display:flex;align-items:center;justify-content:center;gap:9px;
  height:50px;margin-top:auto;border-radius:10px;
  background:var(--acc);color:var(--ink);font:800 15px/1 var(--font);
}
.drawer__tel:hover{background:var(--acc-hi);color:var(--ink)}

/* ============ ГОЛОВНИЙ ЕКРАН ============ */
.hero{position:relative;background:var(--bg-2);animation:fadeIn .7s ease both}

.hero__media{
  position:absolute;left:0;right:0;top:0;height:346px;
  background:repeating-linear-gradient(45deg,#22262c 0 7px,#191c21 7px 14px);
  background-size:120px 120px;
  animation:slowPan 30s linear infinite alternate;
  display:flex;align-items:flex-start;justify-content:center;padding-top:36px;
}
.hero.has-photo .hero__media{
  background:var(--hero-img) center/cover no-repeat;
  animation:none;
}
.hero.has-photo .hero__ph{display:none}
.hero__ph{font:11px/1.5 var(--mono);color:#5f666f;text-align:center}

.hero__veil{
  position:absolute;left:0;right:0;top:116px;height:230px;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,15,18,0) 0%,rgba(13,15,18,.45) 40%,rgba(13,15,18,.88) 74%,var(--bg) 100%);
}

.hero__body{position:relative}
.hero__over{display:flex;flex-direction:column;align-items:flex-start;min-height:346px;padding:16px 0 4px}

.badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;
  background:rgba(9,10,12,.6);border:1px solid rgba(245,179,1,.42);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  font:700 10px/1 var(--font);letter-spacing:.1em;color:var(--acc);
}

.hero__title{
  margin-top:auto;
  font:800 41px/1.02 var(--font);letter-spacing:-.025em;color:var(--t1);
  animation:riseIn .7s ease both;
}
.hero__sub{margin-top:14px;font:600 19px/1.35 var(--font);color:var(--t2)}
.hero__cta{margin-top:20px}
.hero__note{display:none}

.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:54px;border-radius:12px;
  background:var(--acc);color:var(--ink);
  font:800 15px/1 var(--font);
  transition:background .2s ease,transform .2s ease;
}
.btn:hover{background:var(--acc-hi);color:var(--ink)}
.btn--pulse{animation:ringPulse 2.8s ease-out infinite}
.btn--block{width:100%;border:0;cursor:pointer}

/* ============ ПЕРЕВАГИ ============ */
.feats{margin-top:24px}
.feats__in{display:flex;flex-direction:column;gap:16px}
.feat{display:flex;align-items:center;gap:12px}
.feat div{display:flex;flex-direction:column}
.feat b{font:700 14px/1.3 var(--font);color:var(--t1)}
.feat i{font:500 12.5px/1.4 var(--font);color:var(--t4);font-style:normal}

/* ============ СЕКЦІЇ ============ */
.sec{margin-top:26px}
.sec__title{font:800 22px/1.2 var(--font);color:var(--t1);text-align:center;margin-bottom:16px}
.sec--tight .sec__title{margin-bottom:18px}

/* ---- послуги ---- */
.cards{display:flex;flex-direction:column;gap:12px}
.card{
  display:flex;align-items:center;gap:13px;
  padding:16px 15px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);
  color:var(--t2);
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.card:hover,.card:active{border-color:var(--acc);background:var(--card-hi);color:var(--t2)}
.card__ico{width:26px;height:26px;color:var(--acc)}
.card__body{display:flex;flex-direction:column;flex:1;min-width:0}
.card__title{font:700 15px/1.3 var(--font);color:var(--t1);margin-bottom:4px}
.card__desc{font:500 12.5px/1.45 var(--font);color:var(--t4)}
.card__more{display:none}
.card__chev{width:16px;height:16px;color:var(--t6)}

/* ---- цифри ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 8px;text-align:center;
}
.stat .ico{margin:0 auto;color:var(--t3)}
.stat b{display:block;font:800 16px/1 var(--font);color:var(--acc);margin:9px 0 4px}
.stat b.stat--sm{font-size:15px}
.stat i{font:500 10.5px/1.2 var(--font);color:var(--t4);font-style:normal}

/* ---- як ми працюємо ---- */
.steps{display:flex;flex-direction:column;gap:18px}
.step{display:flex;align-items:flex-start;gap:12px}
.step__num{
  width:34px;height:34px;flex:none;border-radius:999px;
  background:var(--acc);color:var(--ink);
  font:800 16px/34px var(--font);text-align:center;
}
.step__ico{width:24px;height:24px;margin-top:5px}
.step b{display:block;font:700 14px/1.3 var(--font);color:var(--t1);margin-bottom:3px}
.step i{font:500 12px/1.45 var(--font);color:var(--t4);font-style:normal}
.steps__arrow{display:none}

/* ---- форма ---- */
.form{display:flex;flex-direction:column;gap:11px}
.inp{
  height:46px;padding:0 14px;border-radius:10px;
  background:var(--card);border:1px solid var(--line);
  color:var(--t2);font:500 13.5px/1 var(--font);outline:none;
  transition:border-color .2s ease;
}
.inp::placeholder{color:var(--t6)}
.inp:focus{border-color:var(--acc)}
.inp.is-bad{border-color:#e0563f}
.form .btn{height:48px;border-radius:10px;font-size:14.5px}
.form__msg{font:600 12.5px/1.4 var(--font);color:var(--acc);min-height:1px}

/* ============ СМУГА ВИКЛИКУ ============ */
.cta{margin-top:24px}
.cta__in{
  background:var(--acc);border-radius:12px;padding:16px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.cta__group{
  display:grid;grid-template-columns:auto auto;justify-content:center;
  align-items:center;column-gap:9px;row-gap:12px;
}
.cta__ico{display:flex;align-items:center;justify-content:center;color:var(--ink)}
.cta__ico .ico{width:18px;height:18px}
.cta__title{font:800 16px/1.2 var(--font);color:var(--ink)}
.cta__sub{grid-column:1/-1;text-align:center;font:600 12.5px/1.3 var(--font);color:rgba(23,25,29,.72)}
.cta__btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:50px;border-radius:10px;
  background:var(--ink);color:var(--t1);font:800 16px/1 var(--font);
  transition:background .2s ease;
}
.cta__btn:hover{background:#25282e;color:var(--t1)}

/* ============ ПІДВАЛ ============ */
.ftr{background:var(--panel);margin-top:24px}
.ftr__in{padding-top:24px;padding-bottom:18px;display:flex;flex-direction:column;gap:18px}
.ftr__brand{order:1}
.ftr__col--contacts{order:2}
.ftr__social{order:3;display:flex;gap:9px}
.ftr__col--services,.ftr__col--hours{display:none} /* у мобільному макеті цих колонок немає — приберіть рядок, щоб показати */

.logo--sm .logo__txt{font-size:14px}
.ftr__desc{margin-top:10px;font:500 12px/1.5 var(--font);color:var(--t5)}

.soc{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:999px;
  background:var(--soc);color:var(--t3);font:700 13px/1 var(--font);
  transition:background .2s ease,color .2s ease;
}
.soc:hover{background:var(--acc);color:var(--ink)}

.ftr__col h3{font:700 12.5px/1 var(--font);color:var(--t1);margin-bottom:12px}
.ftr__col ul{display:flex;flex-direction:column;gap:9px}
.ftr__col a{font:600 12.5px/1.3 var(--font);color:var(--t3)}
.ftr__col a:hover{color:var(--acc)}
.ftr__contacts li{display:flex;align-items:center;gap:8px}
.ftr__contacts span{font:500 12px/1.4 var(--font);color:var(--t5)}
.ftr__pin{align-self:flex-start;margin-top:2px}

.hours{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hours__t{font:600 11.5px/1.4 var(--font);color:var(--t3);margin-bottom:12px}
.hours__s{font:500 11.5px/1.5 var(--font);color:var(--t5)}
.hours__badge{
  width:46px;height:46px;flex:none;border-radius:999px;
  border:2px dashed rgba(245,179,1,.5);
  display:flex;align-items:center;justify-content:center;
  font:800 13px/1 var(--font);color:var(--acc);
}

.copy{
  background:var(--panel-dark);padding:12px 16px;text-align:center;
  font:500 10.5px/1 var(--font);color:var(--t6);
}

/* ============ НИЖНЯ КНОПКА ============ */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--panel);border-top:1px solid var(--line-2);
}
.callbar__btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:54px;border-radius:12px;background:var(--acc);color:var(--ink);
  transition:background .2s ease;
}
.callbar__btn:hover{background:var(--acc-hi);color:var(--ink)}
.callbar__btn span{text-align:left}
.callbar__btn b{display:block;font:800 15px/1.15 var(--font)}
.callbar__btn i{font:600 11px/1.2 var(--font);color:rgba(23,25,29,.7);font-style:normal}

/* =========================================================
   ДЕСКТОП
   ========================================================= */
@media (max-width:374px){
  .stats{gap:8px}
  .stat{padding:14px 6px}
  .stat b{font-size:14px}
  .stat b.stat--sm{font-size:13px}
}

@media (min-width:900px){

  body{padding-bottom:0}
  .wrap{padding:0 36px}
  .m-only{display:none}

  /* ---- шапка ---- */
  .hdr__in{height:68px}
  .burger{display:none}
  .logo__mark{width:30px;height:24px}
  .logo__txt{font-size:17px;letter-spacing:.02em}
  .ico--truck{width:20px;height:14px}

  .nav{display:flex;align-items:center;gap:38px}
  .nav a{font:600 14px/1 var(--font);color:var(--t3)}
  .nav a:hover{color:var(--acc)}

  .hdr__tel .ico{width:18px;height:18px}
  .hdr__tel-txt{display:block}
  .hdr__tel-num{display:block;font:800 17px/1.1 var(--font);color:var(--t1)}
  .hdr__tel-sub{display:block;font:500 11px/1.4 var(--font);color:var(--t5)}

  .drawer{display:none}

  /* ---- головний екран ---- */
  .hero{height:432px;overflow:hidden}
  .hero__media{
    top:0;bottom:0;left:36%;right:0;height:auto;
    background-size:auto;animation:none;
    align-items:center;padding-top:0;
  }
  .hero__ph{
    font-size:12px;padding:14px 18px;
    background:rgba(9,10,12,.72);border:1px solid #2e333a;
  }
  .hero__veil{
    top:0;bottom:0;left:0;right:0;height:auto;
    background:linear-gradient(97deg,#0f1114 0%,#0f1114 40%,rgba(15,17,20,.86) 55%,rgba(15,17,20,.25) 78%,rgba(15,17,20,.1) 100%);
  }
  .hero__body{padding-top:34px}
  .hero__over{display:block;min-height:0;padding:0}

  .badge{
    padding:8px 15px;font-size:11px;
    background:rgba(245,179,1,.14);border-color:rgba(245,179,1,.4);
  }
  .badge .ico{width:14px;height:14px}

  .hero__title{margin-top:22px;font-size:64px;letter-spacing:-.02em}
  .hero__sub{margin-top:16px;font-size:30px;line-height:1.28;max-width:440px}
  .hero__cta{display:flex;align-items:center;gap:14px;margin-top:30px}
  .hero__cta .btn{height:auto;padding:16px 26px;border-radius:8px}
  .hero__cta .btn:hover{transform:translateY(-2px)}
  .hero__note{display:block;font:600 14px/1 var(--font);color:#9aa1aa}

  /* ---- переваги ---- */
  .feats{
    margin-top:0;background:var(--bg-2);
    border-top:1px solid var(--line-3);border-bottom:1px solid var(--line-3);
  }
  .feats__in{
    display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
    padding-top:24px;padding-bottom:24px;
  }
  .feat b{font-size:13px}
  .feat i{font-size:12px}

  /* ---- секції ---- */
  .sec{margin-top:0;padding:30px 0 34px}
  .sec--tight{padding:6px 0 34px}
  .sec__title{font-size:27px;margin-bottom:22px}
  .sec--tight .sec__title{margin-bottom:24px}

  /* ---- послуги ---- */
  .cards{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
  }
  .cards .card{flex:0 1 calc((100% - 4 * 16px) / 5)}
  .card{
    flex-direction:column;align-items:stretch;gap:0;
    min-height:214px;padding:20px 18px;border-radius:10px;
    animation:riseIn .6s ease both;
  }
  .card:hover{transform:translateY(-6px)}
  .card__ico{
    width:44px;height:44px;padding:9px;margin-bottom:16px;
    background:rgba(245,179,1,.1);border:1px solid rgba(245,179,1,.28);
    border-radius:11px;
  }
  .card__body{flex:0 1 auto}
  .card__title{font-size:14px;margin-bottom:6px}
  .card__desc{font-size:11.5px;line-height:1.5;margin-bottom:14px}
  .card__more{
    display:flex;align-items:center;gap:6px;
    margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
    font:700 11.5px/1 var(--font);color:var(--acc);
  }
  .card__chev{display:none}

  /* ---- як ми працюємо ---- */
  .steps{flex-direction:row;align-items:center;gap:20px}
  .step{flex:1;align-items:center;gap:14px}
  .step__num{width:40px;height:40px;font:800 18px/40px var(--font)}
  .step__ico{width:26px;height:26px;margin-top:0}
  .step b{font-size:13.5px;margin-bottom:4px}
  .step i{font-size:11.5px;line-height:1.5}
  .steps__arrow{display:block;width:30px;height:14px;color:#4a5058}

  /* ---- смуга виклику ---- */
  .cta{margin-top:0;background:var(--acc)}
  .cta__in{
    background:none;border-radius:0;
    padding-top:22px;padding-bottom:22px;
    flex-direction:row;justify-content:center;gap:56px;
  }
  .cta__group{grid-template-columns:auto 1fr;column-gap:16px;row-gap:0;justify-content:start}
  .cta__ico{
    grid-row:1/span 2;width:46px;height:46px;border-radius:999px;
    background:var(--ink);color:var(--acc);
  }
  .cta__ico .ico{width:22px;height:22px}
  .cta__title{grid-column:2;grid-row:1;font-size:21px;line-height:1.25}
  .cta__sub{grid-column:2;grid-row:2;text-align:left;font-size:13px}
  .cta__btn{width:auto;height:auto;padding:15px 30px;border-radius:8px;font-size:17px}

  /* ---- підвал ---- */
  .ftr{margin-top:0}
  .ftr__in{
    display:grid;
    grid-template-columns:1.1fr .8fr 1fr 1fr;
    grid-template-areas:
      "brand services contacts hours"
      "social services contacts hours";
    grid-template-rows:auto 1fr;
    align-content:start;
    column-gap:28px;row-gap:16px;
    padding-top:28px;padding-bottom:22px;
  }
  .ftr__brand{grid-area:brand}
  .ftr__social{grid-area:social;align-self:start}
  .ftr__col--services{grid-area:services;display:block}
  .ftr__col--contacts{grid-area:contacts}
  .ftr__col--hours{grid-area:hours;display:block}

  .logo--sm .logo__mark{width:28px;height:22px}
  .logo--sm .logo__txt{font-size:15px}
  .logo--sm .ico--truck{width:18px;height:13px}
  .ftr__desc{margin-top:12px;font-size:11.5px;line-height:1.6}

  .soc{width:30px;height:30px;font-size:12px}
  .soc .ico{width:14px;height:14px}

  .ftr__col--services ul{gap:7px}
  .ftr__col--services a{font:500 11.5px/1.3 var(--font);color:var(--t5)}
  .ftr__col--contacts ul{gap:8px}
  .ftr__col--contacts a{font-size:11.5px}
  .ftr__contacts span{font-size:11.5px}

  .copy{padding:11px 36px;font-size:10.5px}

  .callbar{display:none}
}

@media (min-width:900px) and (max-width:1120px){
  .hero__title{font-size:52px}
  .hero__sub{font-size:24px}
  .cta__in{gap:28px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}