/* =========================================================
   ЕТАП 1 — ШАПКА
========================================================= */

.site-header {
    position: relative;
    z-index: 50;

    height: 68px;

    background:
        linear-gradient(
            90deg,
            #070707 0%,
            #100303 52%,
            #170000 100%
        );

    border-bottom:
        1px solid
        #3b0808;

    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, .85);
}


.site-header::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(210, 0, 0, .85),
            transparent
        );
}


.header-inner {
    width:
        min(
            1180px,
            calc(100% - 28px)
        );

    height: 100%;

    margin:
        0 auto;

    display: flex;

    align-items: center;

    gap: 18px;
}


/* ЛОГО */

.brand {
    flex:
        0 0 auto;

    display: flex;

    align-items: center;

    gap: 8px;

    color: #fff;

    text-decoration: none;
}


.brand-logo {
    width: 170px;

    max-height: 58px;

    object-fit: contain;
}


.brand-text {
    color: #eeeeee;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .2px;

    white-space: nowrap;
}


/* МЕНЮ */

.main-nav {
    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;
}


.main-nav a {
    position: relative;

    color: #dedede;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        color
        .18s ease;
}


.main-nav a:hover,
.main-nav a.active {
    color: #ff2520;
}


.main-nav a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -10px;

    height: 2px;

    background: #ef0b08;

    box-shadow:
        0 0 6px
        #d00;
}


/* КНОПКА НОМЕРА */

.top-phone {
    flex:
        0 0 auto;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        8px
        14px;

    color: #fff;

    text-decoration: none;

    font-size: 15px;

    font-weight: 750;

    border:
        1px solid
        #ff4c42;

    border-radius:
        26px;

    background:
        linear-gradient(
            180deg,
            #ff2d24 0%,
            #ee0000 48%,
            #b40000 100%
        );

    box-shadow:
        0 0 6px
        rgba(255, 30, 20, .7),

        0 0 17px
        rgba(255, 0, 0, .46),

        inset 0 1px 0
        rgba(255, 255, 255, .22);
}


.top-phone img {
    width: 29px;

    height: 29px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 5px
            rgba(255, 255, 255, .35)
        );
}



*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:#050505;overflow-x:hidden}

.hero{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 8% 3%,rgba(255,22,12,.18),transparent 23%),
    radial-gradient(circle at 55% 32%,rgba(150,0,0,.08),transparent 42%),
    linear-gradient(112deg,#030303 0%,#080000 58%,#110000 100%);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.28;
  pointer-events:none;
  background:
    linear-gradient(120deg,transparent 0 16%,rgba(255,0,0,.07) 16.4%,transparent 17%),
    linear-gradient(154deg,transparent 0 55%,rgba(255,0,0,.055) 55.4%,transparent 56%),
    radial-gradient(ellipse at 0 100%,rgba(180,0,0,.16),transparent 38%);
}

.hero__content{
  position:relative;
  z-index:1;
  width:min(780px,51vw);
  margin-left:clamp(18px,3vw,48px);
}

.hero-title{
  margin:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  font-family:"Roboto Condensed","Noto Sans Display","Arial Narrow",sans-serif;
  font-weight:900;
  font-style:italic;
  text-transform:uppercase;
}

.hero-title>span{
  display:block;
  position:relative;
  width:max-content;
  max-width:100%;
  white-space:nowrap;
  transform-origin:left center;
}

/* ТЕРМІНОВИЙ — насичений білий, без прозорості */
.hero-title__top{
  color:#ffffff;
  font-size:clamp(58px,6.9vw,110px);
  line-height:.92;
  letter-spacing:-.048em;
  transform:scaleX(1.03);

  /* Без background-clip/text-fill transparent:
     самі букви тепер реально білі й непрозорі */
  -webkit-text-fill-color:#ffffff;
  -webkit-text-stroke:.55px #ffffff;

  text-shadow:
    0 1px 0 #d9d9d9,
    0 3px 0 #77716f,
    0 5px 0 #282222,
    0 8px 10px rgba(0,0,0,.70);

  margin:0 0 clamp(13px,1.18vw,19px) 0;
}

/* РЕМОНТ / КРИШІ — глянцевий червоний */
.hero-title__red{
  font-size:clamp(96px,11.75vw,188px);
  line-height:.79;
  letter-spacing:-.057em;
  transform:scaleX(1.03);
}


/* Підтримка поточної HTML-структури hero */
.hero-photo{
  position:absolute;
  z-index:0;
  top:0;
  right:-18px;
  bottom:0;
  width:68%;
  background-image:url("hero-main.webp");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:50% 44%;
  filter:saturate(1.08) contrast(1.04);
}

.hero-overlay{
  position:absolute;
  z-index:.5;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.98) 0%,
      rgba(0,0,0,.94) 25%,
      rgba(0,0,0,.76) 41%,
      rgba(0,0,0,.26) 60%,
      rgba(0,0,0,.03) 100%
    );
}

.hero-inner{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 28px));
  min-height:100vh;
  margin:0 auto;
  display:flex;
  align-items:center;
}

.hero-content{
  position:relative;
  z-index:2;
  width:min(780px,51vw);
}

/* Продовження глянцевого червоного оформлення */
.hero-title__red{
  /* ГОЛОВНЕ: основа букв тепер суцільна, непрозора */
  color:#e50905;
  -webkit-text-fill-color:#e50905;

  /* Насичений червоний контур */
  -webkit-text-stroke:.8px #ff2c22;

  text-shadow:
    0 1px 0 #ff4438,
    0 3px 0 #a00000,
    0 6px 0 #520000,
    0 10px 14px rgba(0,0,0,.62);

  filter:none;
}

.hero-title__red::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;

  /* Глянцевий відблиск поверх СУЦІЛЬНОГО червоного */
  background:
    linear-gradient(
      108deg,
      transparent 0%,
      transparent 12%,
      rgba(255,255,255,0) 17%,
      rgba(255,255,255,.96) 23%,
      rgba(255,215,210,.78) 26%,
      rgba(255,255,255,.10) 31%,
      transparent 36%,
      transparent 59%,
      rgba(255,180,175,.22) 64%,
      rgba(255,255,255,0) 70%,
      transparent 100%
    );

  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;

  mix-blend-mode:screen;
  opacity:.82;
}

.hero-title__red::before{
  content:attr(data-text);
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;

  /* Тонка світла кромка зверху */
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.78) 0%,
      rgba(255,190,185,.38) 5%,
      rgba(255,255,255,.08) 11%,
      rgba(255,255,255,0) 17%
    );

  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;

  opacity:.92;
}

.hero-title__red+.hero-title__red{
  margin-top:clamp(12px,1.05vw,17px);
}

/* =========================================================
   ТРИ ПЕРЕВАГИ
========================================================= */

.hero-features {
    display: flex;

    align-items: center;

    width: 100%;

    margin:
        5px
        0
        16px;
}


.feature {
    min-height: 72px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        0
        16px;

    border-right:
        1px solid
        rgba(145, 30, 30, .55);
}


.feature:first-child {
    padding-left: 0;
}


.feature:last-child {
    border-right: 0;
}


.feature img {
    width: 68px;

    height: 68px;

    flex:
        0 0
        68px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 9px
            rgba(255, 0, 0, .32)
        );
}


.feature-copy {
    display: flex;

    flex-direction: column;

    line-height: 1.03;

    white-space: nowrap;
}


.feature-copy strong,
.feature-copy span {
    font-size: 14px;

    font-weight: 800;
}


/* =========================================================
   ДВІ ВЕЛИКІ КНОПКИ
========================================================= */

.hero-actions {
    display: grid;

    grid-template-columns:
        1.18fr
        .95fr;

    gap: 18px;

    width: 860px;

    max-width: 128%;
}


.hero-button {
    min-height: 82px;

    display: flex;

    align-items: center;

    gap: 15px;

    padding:
        11px
        18px;

    color: #fff;

    text-decoration: none;

    border:
        1px solid
        #ff302b;

    border-radius:
        7px;

    background:
        linear-gradient(
            115deg,
            #c80000 0%,
            #ff1710 48%,
            #b50000 100%
        );

    box-shadow:
        0 0 14px
        rgba(255, 0, 0, .38),

        inset 0 1px 0
        rgba(255, 255, 255, .15);

    transition:
        transform
        .18s ease,

        filter
        .18s ease;
}


.hero-button:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.07);
}


.hero-button-icon {
    width: 74px;

    height: 74px;

    flex:
        0 0
        74px;

    object-fit: contain;
}


.hero-button-icon--truck {
    width: 92px;

    height: 64px;

    flex-basis: 92px;
}


.hero-button-copy {
    display: flex;

    flex-direction: column;

    flex: 1;

    line-height: 1;

    font-style: italic;
}


.hero-button-copy strong {
    font-size: 20px;

    font-weight: 900;
}


.hero-button-copy small {
    margin-top: 5px;

    font-size: 14px;

    font-weight: 800;
}


.hero-arrow {
    font-size: 38px;

    line-height: 1;

    font-weight: 300;
}


/* =========================================================
   НИЖНЯ ТЕМНА СМУГА
========================================================= */

.trust-bar {
    background:
        linear-gradient(
            180deg,
            #171717,
            #101010
        );

    border-top:
        1px solid
        #2c2c2c;

    border-bottom:
        1px solid
        #292929;
}


.trust-inner {
    width:
        min(
            1180px,
            calc(100% - 28px)
        );

    min-height: 58px;

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    align-items: center;

    gap: 20px;
}


.trust-item {
    display: flex;

    align-items: center;

    gap: 10px;
}


.trust-item b {
    color: #ff1510;

    font-size: 26px;
}


.trust-item span {
    color: #ececec;

    font-size: 14px;

    font-weight: 700;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .header-inner,
    .hero-inner,
    .trust-inner {
        width:
            min(
                960px,
                calc(100% - 20px)
            );
    }


    .brand-logo {
        width: 145px;
    }


    .brand-text {
        display: none;
    }


    .main-nav {
        gap: 15px;
    }


    .main-nav a {
        font-size: 11px;
    }


    .hero-photo {
        width: 70%;

        right: -75px;
    }


    .hero-content {
        width: 61%;
    }


    .hero-title__top {
        font-size:
            clamp(
                54px,
                7.4vw,
                88px
            );
    }


    .hero-title__red {
        font-size:
            clamp(
                82px,
                11.4vw,
                144px
            );
    }


    .feature {
        padding:
            0
            10px;
    }


    .feature img {
        width: 56px;

        height: 56px;

        flex-basis: 56px;
    }


    .feature-copy strong,
    .feature-copy span {
        font-size: 11px;
    }


    .hero-actions {
        width: 680px;
    }


    .hero-button-icon {
        width: 60px;

        height: 60px;

        flex-basis: 60px;
    }


    .hero-button-icon--truck {
        width: 76px;

        height: 54px;

        flex-basis: 76px;
    }


    .hero-button-copy strong {
        font-size: 17px;
    }


    .hero-button-copy small {
        font-size: 12px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .site-header {
        height: 62px;
    }


    .header-inner {
        width:
            calc(100% - 18px);

        gap: 8px;
    }


    .brand {
        flex: 1;
    }


    .brand-logo {
        width: 125px;

        max-height: 52px;
    }


    .main-nav {
        display: none;
    }


    .top-phone {
        padding:
            7px
            10px;

        gap: 6px;

        font-size: 13px;
    }


    .top-phone img {
        width: 25px;

        height: 25px;
    }


    .hero {
        min-height: 760px;
    }


    .hero-photo {
        top: auto;

        right: -95px;

        bottom: 0;

        width: 620px;

        height: 470px;

        background-size: cover;

        background-position:
            center bottom;
    }


    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, .97) 0%,
                rgba(0, 0, 0, .91) 47%,
                rgba(0, 0, 0, .38) 67%,
                rgba(0, 0, 0, .05) 100%
            );
    }


    .hero-inner {
        width:
            calc(100% - 22px);

        min-height: 760px;

        align-items:
            flex-start;
    }


    .hero-content {
        width: 100%;

        max-width: none;

        padding-top: 34px;
    }


    .hero-title__top {
        font-size:
            clamp(
                42px,
                12vw,
                58px
            );
    }


    .hero-title__red {
        font-size:
            clamp(
                62px,
                17vw,
                88px
            );
    }


    .hero-title__red + .hero-title__red {
        margin-top: 8px;
    }


    .hero-features {
        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            8px
            12px;
    }


    .feature {
        min-height: 46px;

        padding: 0;

        border: 0;
    }


    .feature:last-child {
        grid-column:
            1 / -1;
    }


    .feature img {
        width: 42px;

        height: 42px;

        flex-basis: 42px;
    }


    .feature-copy strong,
    .feature-copy span {
        font-size: 11px;
    }


    .hero-actions {
        width: 100%;

        max-width: 100%;

        grid-template-columns:
            1fr;

        gap: 10px;
    }


    .hero-button {
        min-height: 63px;

        padding:
            8px
            12px;
    }


    .hero-button-icon {
        width: 48px;

        height: 48px;

        flex-basis: 48px;
    }


    .hero-button-icon--truck {
        width: 60px;

        height: 42px;

        flex-basis: 60px;
    }


    .hero-button-copy strong {
        font-size: 16px;
    }


    .hero-button-copy small {
        font-size: 12px;
    }


    .trust-inner {
        width:
            calc(100% - 22px);

        grid-template-columns:
            1fr;

        gap: 7px;

        padding:
            11px
            0;
    }


    .trust-item b {
        font-size: 19px;
    }


    .trust-item span {
        font-size: 12px;
    }
}


/* =========================================================
   FINAL TITLE OVERRIDE — СУЦІЛЬНІ БУКВИ
========================================================= */

.hero-title__top{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    background:none !important;
}

.hero-title__red{
    color:#e30a05 !important;
    -webkit-text-fill-color:#e30a05 !important;
    background:none !important;
}


/* =========================================================
   UPDATE — REQUEST BUTTON + WHITE TEXT FIX
========================================================= */

/* Longer third line: ПОКРІВЛІ */
.hero-title__red--wide{
    font-size: clamp(80px, 9.9vw, 160px) !important;
    letter-spacing: -.05em !important;
}

/* Make all critical hero text clearly white */
.hero .feature-copy strong,
.hero .feature-copy span,
.hero .hero-button-copy strong,
.hero .hero-button-copy small,
.hero .hero-arrow,
.hero .trust-item span,
.hero .trust-item b,
.trust-bar .trust-item span,
.trust-bar .trust-item b{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    text-shadow:none;
}

/* Right button tuned for "ЗАЛИШИТИ ЗАЯВКУ" */
.hero-button--area .hero-button-copy strong{
    font-size: 18px !important;
    letter-spacing: .2px;
}

.hero-button--area .hero-button-copy small{
    font-size: 13px !important;
    letter-spacing: .3px;
    opacity: .98;
}

/* Keep button text bright and readable */
.hero-button{
    color:#fff !important;
}

.hero-button-copy{
    color:#fff !important;
}

/* On mobile a bit smaller for the longer word */
@media (max-width: 760px){
    .hero-title__red--wide{
        font-size: clamp(52px, 14.4vw, 74px) !important;
    }

    .hero-button--area .hero-button-copy strong{
        font-size: 15px !important;
    }

    .hero-button--area .hero-button-copy small{
        font-size: 11px !important;
    }
}


/* =========================================================
   HEADER BRAND TEXT — BIGGER + BETTER DESIGN
========================================================= */

.brand{
    gap: 14px !important;
}

.brand-text{
    display: inline-block !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .7px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;

    /* світлий металевий тон + легкий червоний акцент */
    color: #ffffff !important;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff6f6 25%,
            #ffd7d7 55%,
            #ffffff 100%
        );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:
        0 1px 0 rgba(255,255,255,.18),
        0 2px 0 rgba(120,40,40,.42),
        0 0 8px rgba(255,0,0,.18);

    position: relative;
    top: 1px;
}



/* трохи більше місця під бренд */
.header-inner{
    gap: 26px !important;
}

/* tablet */
@media (max-width: 980px){
    .brand{
        gap: 10px !important;
    }

    .brand-text{
        display: inline-block !important;
        font-size: 17px !important;
        letter-spacing: .45px !important;
    }

    
}

/* mobile */
@media (max-width: 760px){
    .brand{
        gap: 8px !important;
    }

    .brand-text{
        display: inline-block !important;
        font-size: 13px !important;
        letter-spacing: .2px !important;
        line-height: .98 !important;
    }

    
}


/* =========================================================
   MOBILE ADAPTATION — DESKTOP ЗАЛИШАЄТЬСЯ БЕЗ ЗМІН
========================================================= */

.mobile-actions {
    display: none;
}

@media (max-width: 760px) {

    body {
        padding-bottom: 68px;
    }

    /* ---------- HEADER ---------- */

    .site-header {
        height: 66px;
        position: sticky;
        top: 0;
    }

    .header-inner {
        width: calc(100% - 16px) !important;
        gap: 8px !important;
        justify-content: space-between;
    }

    .brand {
        min-width: 0;
        gap: 7px !important;
        flex: 1 1 auto;
    }

    .brand-logo {
        width: 112px !important;
        max-height: 54px !important;
        flex: 0 0 auto;
    }

    .brand-text {
        font-size: 11px !important;
        line-height: 1 !important;
        letter-spacing: .15px !important;
        white-space: nowrap !important;
    }

    .main-nav {
        display: none !important;
    }

    .top-phone {
        flex: 0 0 auto;
        min-width: 0;
        gap: 5px !important;
        padding: 6px 9px !important;
        border-radius: 22px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    .top-phone img {
        width: 23px !important;
        height: 23px !important;
    }


    /* ---------- HERO ---------- */

    .hero {
        min-height: 790px !important;
        align-items: flex-start !important;
        padding-top: 0;
    }

    .hero-photo {
        top: auto !important;
        right: -78px !important;
        bottom: 0 !important;
        width: 560px !important;
        height: 445px !important;
        background-size: cover !important;
        background-position: center bottom !important;
        opacity: .92;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                #050505 0%,
                rgba(5, 5, 5, .99) 40%,
                rgba(5, 5, 5, .88) 55%,
                rgba(5, 5, 5, .38) 72%,
                rgba(5, 5, 5, .05) 100%
            ) !important;
    }

    .hero-inner {
        width: calc(100% - 22px) !important;
        min-height: 790px !important;
        align-items: flex-start !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: none !important;
        padding-top: 28px !important;
        margin: 0 !important;
    }


    /* ---------- TITLE ---------- */

    .hero-title {
        width: 100% !important;
        margin-bottom: 14px !important;
    }

    .hero-title__top {
        font-size: clamp(39px, 11.8vw, 56px) !important;
        line-height: .92 !important;
        letter-spacing: -.045em !important;
    }

    .hero-title__red {
        font-size: clamp(61px, 17vw, 86px) !important;
        line-height: .82 !important;
        letter-spacing: -.05em !important;
    }

    .hero-title__red--wide {
        font-size: clamp(48px, 13.6vw, 68px) !important;
    }

    .hero-title__red + .hero-title__red {
        margin-top: 7px !important;
    }


    /* ---------- THREE FEATURES ---------- */

    .hero-features {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 8px 0 14px !important;
    }

    .feature {
        min-width: 0;
        min-height: 74px !important;
        padding: 7px 3px !important;
        border-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start;
        text-align: center;
        gap: 3px !important;
    }

    .feature img {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
    }

    .feature-copy {
        white-space: normal !important;
        align-items: center;
    }

    .feature-copy strong,
    .feature-copy span {
        font-size: 9.5px !important;
        line-height: 1.06 !important;
    }


    /* ---------- CTA BUTTONS ---------- */

    .hero-actions {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .hero-button {
        min-height: 62px !important;
        width: 100% !important;
        padding: 7px 12px !important;
        border-radius: 7px !important;
    }

    .hero-button-icon {
        width: 46px !important;
        height: 46px !important;
        flex-basis: 46px !important;
    }

    .hero-button-icon--truck {
        width: 55px !important;
        height: 42px !important;
        flex-basis: 55px !important;
    }

    .hero-button-copy strong {
        font-size: 15px !important;
    }

    .hero-button-copy small {
        font-size: 11px !important;
    }

    .hero-arrow {
        font-size: 30px !important;
    }


    /* ---------- TRUST BAR ---------- */

    .trust-inner {
        width: calc(100% - 22px) !important;
        min-height: auto !important;
        padding: 10px 0 !important;
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }

    .trust-item {
        gap: 7px !important;
    }

    .trust-item b {
        font-size: 18px !important;
    }

    .trust-item span {
        font-size: 11px !important;
    }


    /* ---------- FIXED BOTTOM ACTIONS ---------- */

    .mobile-actions {
        position: fixed;
        z-index: 100;
        left: 0;
        right: 0;
        bottom: 0;

        height: 62px;

        display: grid;
        grid-template-columns: 1fr 1fr;

        background: #090909;

        border-top: 1px solid #3c0a0a;

        box-shadow:
            0 -4px 18px rgba(0,0,0,.75);
    }

    .mobile-actions a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

        color: #fff;

        text-decoration: none;

        font-size: 13px;
        font-weight: 800;
    }

    .mobile-actions__call {
        background:
            linear-gradient(
                180deg,
                #ff241b,
                #c90000
            );
    }

    .mobile-actions__call img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    .mobile-actions__request {
        background:
            linear-gradient(
                180deg,
                #191919,
                #0d0d0d
            );

        border-left:
            1px solid
            #5d1111;
    }
}


/* Дуже вузькі телефони */
@media (max-width: 430px) {

    .brand-logo {
        width: 96px !important;
    }

    .brand-text {
        font-size: 9.5px !important;
    }

    .top-phone span {
        display: none;
    }

    .top-phone {
        width: 38px;
        height: 38px;
        padding: 5px !important;
        justify-content: center;
        border-radius: 50% !important;
    }

    .top-phone img {
        width: 27px !important;
        height: 27px !important;
    }

    .hero-title__top {
        font-size: clamp(36px, 11vw, 48px) !important;
    }

    .hero-title__red {
        font-size: clamp(56px, 16vw, 75px) !important;
    }

    .hero-title__red--wide {
        font-size: clamp(44px, 12.8vw, 61px) !important;
    }
}


/* =========================================================
   MOBILE HERO V2
   Ближче до затвердженого мобільного макета
========================================================= */

@media (max-width: 760px) {

    body {
        font-family:
            "Arial Narrow",
            "Segoe UI",
            Arial,
            sans-serif !important;
    }

    /* ---------- HEADER ---------- */

    .site-header {
        height: 68px !important;
        background:
            linear-gradient(
                90deg,
                #060606 0%,
                #100202 62%,
                #170000 100%
            ) !important;
    }

    .header-inner {
        width: calc(100% - 18px) !important;
        gap: 8px !important;
    }

    .brand {
        flex: 1 1 auto !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .brand-logo {
        width: 118px !important;
        max-height: 56px !important;
    }

    .brand-text {
        display: inline-block !important;
        font-family:
            "Arial Narrow",
            "Segoe UI",
            Arial,
            sans-serif !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        letter-spacing: .2px !important;
        line-height: 1 !important;
        color: #f6f6f6 !important;
        -webkit-text-fill-color: #f6f6f6 !important;
        background: none !important;
        text-shadow:
            0 1px 0 rgba(255,255,255,.16),
            0 0 7px rgba(255,0,0,.16) !important;
        white-space: nowrap !important;
    }

    .top-phone {
        width: 42px !important;
        height: 42px !important;
        padding: 5px !important;
        justify-content: center !important;
        border-radius: 50% !important;
        box-shadow:
            0 0 9px rgba(255,35,25,.78),
            0 0 23px rgba(255,0,0,.50),
            inset 0 1px 0 rgba(255,255,255,.25) !important;
    }

    .top-phone span {
        display: none !important;
    }

    .top-phone img {
        width: 31px !important;
        height: 31px !important;
    }


    /* ---------- HERO AS ONE COMPOSITION ---------- */

    .hero {
        min-height: 910px !important;
        height: auto !important;
        display: block !important;
        position: relative !important;
        padding: 0 !important;
        background:
            radial-gradient(
                circle at 82% 23%,
                rgba(235,0,0,.20),
                transparent 31%
            ),
            linear-gradient(
                180deg,
                #030303 0%,
                #060202 54%,
                #0c0000 100%
            ) !important;
    }

    /*
       Фото тепер починається ВІД САМОГО ВЕРХУ hero
       і працює як повноцінний фон, а не як картинка внизу.
    */
    .hero-photo {
        top: 0 !important;
        right: -145px !important;
        bottom: auto !important;

        width: 760px !important;
        height: 100% !important;

        background-size: auto 100% !important;
        background-position: right bottom !important;
        background-repeat: no-repeat !important;

        opacity: .95 !important;

        filter:
            saturate(1.14)
            contrast(1.08)
            brightness(.88) !important;
    }

    /*
       Два градієнти:
       1) затемнюють ліву частину під текст;
       2) інтегрують фото в чорний фон зверху/знизу.
    */
    .hero-overlay {
        z-index: 2 !important;

        background:
            linear-gradient(
                90deg,
                rgba(3,3,3,.99) 0%,
                rgba(3,3,3,.95) 34%,
                rgba(3,3,3,.68) 55%,
                rgba(3,3,3,.15) 82%,
                rgba(3,3,3,0) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0,0,0,.25) 0%,
                rgba(0,0,0,.04) 45%,
                rgba(0,0,0,.20) 76%,
                rgba(0,0,0,.65) 100%
            ) !important;
    }

    .hero-inner {
        position: relative !important;
        z-index: 4 !important;

        width: calc(100% - 26px) !important;
        min-height: 910px !important;

        margin: 0 auto !important;

        display: block !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        padding:
            38px
            0
            34px !important;
    }


    /* ---------- TITLE ---------- */

    .hero-title {
        width: 100% !important;
        margin: 0 0 24px !important;
    }

    .hero-title__top {
        font-size: clamp(43px, 11.7vw, 57px) !important;
        line-height: .90 !important;
        letter-spacing: -.048em !important;

        transform:
            scaleX(1.03)
            skewX(-3deg) !important;
    }

    .hero-title__red {
        font-size: clamp(68px, 17.8vw, 88px) !important;
        line-height: .80 !important;
        letter-spacing: -.055em !important;

        transform:
            scaleX(1.02)
            skewX(-3deg) !important;

        color: #ed0b07 !important;
        -webkit-text-fill-color: #ed0b07 !important;

        text-shadow:
            0 1px 0 #ff554c,
            0 3px 0 #990000,
            0 6px 0 #470000,
            0 10px 13px rgba(0,0,0,.68) !important;
    }

    .hero-title__red--wide {
        font-size: clamp(54px, 14.8vw, 72px) !important;
        letter-spacing: -.052em !important;
    }

    .hero-title__red + .hero-title__red {
        margin-top: 9px !important;
    }


    /* ---------- THREE FEATURES: ONE ROW ---------- */

    .hero-features {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        gap: 0 !important;

        margin:
            4px
            0
            24px !important;
    }

    .feature {
        min-width: 0 !important;
        min-height: 108px !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 7px !important;

        padding:
            2px
            6px !important;

        border-right:
            1px solid
            rgba(255,42,32,.36) !important;

        text-align: center !important;
    }

    .feature:first-child {
        padding-left: 4px !important;
    }

    .feature:last-child {
        grid-column: auto !important;
        border-right: 0 !important;
    }

    .feature img {
        width: 62px !important;
        height: 62px !important;

        flex:
            0 0
            62px !important;

        object-fit: contain !important;

        filter:
            drop-shadow(0 0 8px rgba(255,0,0,.42))
            drop-shadow(0 0 18px rgba(255,0,0,.22)) !important;
    }

    .feature-copy {
        align-items: center !important;
        white-space: normal !important;
        line-height: 1.04 !important;
    }

    .feature-copy strong,
    .feature-copy span {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;

        font-family:
            "Arial Narrow",
            "Segoe UI",
            Arial,
            sans-serif !important;

        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: -.1px !important;
    }


    /* ---------- CTA BUTTONS ---------- */

    .hero-actions {
        width: 100% !important;
        max-width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 12px !important;

        margin-top: 0 !important;
    }

    .hero-button {
        width: 100% !important;
        min-height: 88px !important;

        display: flex !important;

        gap: 13px !important;

        padding:
            10px
            14px !important;

        border-radius: 9px !important;

        background:
            linear-gradient(
                112deg,
                #b90000 0%,
                #f20c08 36%,
                #ff1710 55%,
                #c00000 100%
            ) !important;

        border:
            1px solid
            rgba(255,72,64,.98) !important;

        box-shadow:
            0 0 10px rgba(255,0,0,.42),
            0 0 26px rgba(255,0,0,.18),
            inset 0 1px 0 rgba(255,255,255,.20) !important;
    }

    .hero-button-icon {
        width: 62px !important;
        height: 62px !important;
        flex-basis: 62px !important;
    }

    .hero-button-icon--truck {
        width: 72px !important;
        height: 52px !important;
        flex-basis: 72px !important;
    }

    .hero-button-copy {
        color: #fff !important;

        font-family:
            "Arial Narrow",
            "Segoe UI",
            Arial,
            sans-serif !important;

        font-style: normal !important;

        line-height: 1.04 !important;
    }

    .hero-button-copy strong {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;

        font-size: 18px !important;
        font-weight: 900 !important;
        letter-spacing: .2px !important;
    }

    .hero-button-copy small {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;

        margin-top: 6px !important;

        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: .2px !important;
    }

    .hero-arrow {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;

        font-size: 36px !important;
        font-weight: 400 !important;
    }


    /* ---------- TRUST BAR ---------- */

    .trust-bar {
        background:
            linear-gradient(
                180deg,
                #171717 0%,
                #0b0b0b 100%
            ) !important;
    }

    .trust-inner {
        width: calc(100% - 26px) !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        gap: 6px !important;

        padding:
            12px
            0 !important;
    }

    .trust-item {
        justify-content: center !important;
        gap: 4px !important;

        text-align: center !important;
    }

    .trust-item b {
        color: #ff1710 !important;
        -webkit-text-fill-color: #ff1710 !important;

        font-size: 17px !important;
    }

    .trust-item span {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;

        font-size: 8.5px !important;
        font-weight: 800 !important;
        line-height: 1.05 !important;
    }


    /* ---------- FIXED BOTTOM BAR ---------- */

    .mobile-actions {
        height: 62px !important;
    }

    .mobile-actions a {
        font-family:
            "Arial Narrow",
            "Segoe UI",
            Arial,
            sans-serif !important;

        font-size: 14px !important;
        font-weight: 900 !important;
    }

    .mobile-actions__request {
        color: #fff !important;
        background:
            linear-gradient(
                180deg,
                #202020,
                #090909
            ) !important;
    }
}


/* Дуже вузькі телефони */
@media (max-width: 390px) {

    .brand-logo {
        width: 104px !important;
    }

    .brand-text {
        font-size: 10.5px !important;
    }

    .hero-inner {
        width: calc(100% - 20px) !important;
    }

    .hero-content {
        padding-top: 32px !important;
    }

    .hero-title__top {
        font-size: 40px !important;
    }

    .hero-title__red {
        font-size: 64px !important;
    }

    .hero-title__red--wide {
        font-size: 51px !important;
    }

    .feature img {
        width: 56px !important;
        height: 56px !important;
        flex-basis: 56px !important;
    }

    .feature-copy strong,
    .feature-copy span {
        font-size: 9px !important;
    }

    .hero-button-copy strong {
        font-size: 17px !important;
    }

    .hero-button-copy small {
        font-size: 12px !important;
    }
}


/* =========================================================
   MOBILE HERO V3
   - без дубльованої нижньої панелі
   - основне фото видно вже відразу під шапкою
========================================================= */

@media (max-width: 760px) {

    /* більше не резервуємо місце під нижню fixed-панель */
    body {
        padding-bottom: 0 !important;
    }

    .mobile-actions {
        display: none !important;
    }

    /*
       Головна картинка:
       не ставимо її тільки внизу.
       Велике фото проходить за заголовком, іконками й кнопками.
    */
    .hero-photo {
        top: 54px !important;
        left: -125px !important;
        right: auto !important;
        bottom: auto !important;

        width: 900px !important;
        height: 600px !important;

        background-image: url("hero-main.webp") !important;
        background-repeat: no-repeat !important;
        background-size: 900px 600px !important;
        background-position: center center !important;

        opacity: 1 !important;

        filter:
            saturate(1.12)
            contrast(1.06)
            brightness(.92) !important;
    }

    /*
       Фото вже має чорний фон, тому сильне затемнення не потрібне.
       Лишаємо лише легкий шар для читабельності тексту.
    */
    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.48) 0%,
                rgba(0,0,0,.34) 38%,
                rgba(0,0,0,.12) 64%,
                rgba(0,0,0,0) 88%
            ),
            linear-gradient(
                180deg,
                rgba(0,0,0,.14) 0%,
                rgba(0,0,0,.02) 52%,
                rgba(0,0,0,.22) 78%,
                rgba(0,0,0,.58) 100%
            ) !important;
    }

    /*
       Укорочуємо hero, бо прибрали дубльовані кнопки знизу.
       Контент залишається в межах першої рекламної секції.
    */
    .hero {
        min-height: 840px !important;
    }

    .hero-inner {
        min-height: 840px !important;
    }

    /*
       Трохи затемнюємо тільки сам текстовий лівий сектор
       через локальну тінь, не ховаючи фото.
    */
    .hero-content {
        position: relative !important;
        z-index: 5 !important;
        padding-top: 34px !important;
    }

    .hero-content::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 8px;
        left: -26px;
        width: 390px;
        height: 600px;
        pointer-events: none;

        background:
            radial-gradient(
                ellipse at 18% 35%,
                rgba(0,0,0,.72) 0%,
                rgba(0,0,0,.50) 42%,
                rgba(0,0,0,.12) 72%,
                rgba(0,0,0,0) 100%
            );
    }

    /*
       Кнопки лишаються основними CTA.
       Після них уже нічого не дублюємо.
    */
    .hero-actions {
        margin-bottom: 24px !important;
    }
}


/* На дуже вузьких екранах трохи пересуваємо фото вправо */
@media (max-width: 390px) {

    .hero-photo {
        left: -150px !important;
        width: 880px !important;
        height: 587px !important;
        background-size: 880px 587px !important;
    }

    .hero {
        min-height: 820px !important;
    }

    .hero-inner {
        min-height: 820px !important;
    }
}


/* =========================================================
   MOBILE HERO V4
   Прибираємо чорну "дірку" між кнопками і нижньою смугою
========================================================= */

@media (max-width: 760px) {

    .hero {
        min-height: 690px !important;
    }

    .hero-inner {
        min-height: 690px !important;
    }

    .hero-photo {
        top: 40px !important;
        height: 650px !important;
        background-size: auto 650px !important;
        background-position: right bottom !important;
    }

    .hero-actions {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 390px) {

    .hero {
        min-height: 675px !important;
    }

    .hero-inner {
        min-height: 675px !important;
    }

    .hero-photo {
        height: 635px !important;
        background-size: auto 635px !important;
    }
}


/* =========================================================
   TELEGRAM LEAD MODAL
========================================================= */

.lead-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.lead-modal.is-open {
    display: flex;
}

.lead-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .82);
    backdrop-filter: blur(5px);
}

.lead-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: calc(100vh - 36px);
    overflow: auto;
    padding: 28px;
    border: 1px solid rgba(255, 58, 48, .58);
    border-radius: 14px;
    background:
        radial-gradient(circle at 85% 5%, rgba(255,0,0,.14), transparent 30%),
        linear-gradient(145deg, #151515, #080808 68%);
    box-shadow:
        0 0 24px rgba(255,0,0,.20),
        0 22px 70px rgba(0,0,0,.70);
}

.lead-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.07);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.lead-modal__badge {
    color: #ff231a;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

.lead-modal h2 {
    margin: 6px 0 8px;
    color: #fff;
    font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
}

.lead-modal__intro {
    margin: 0 0 22px;
    color: #cfcfcf;
    font-size: 15px;
    line-height: 1.45;
}

.lead-form {
    display: grid;
    gap: 14px;
}

.lead-form label {
    display: grid;
    gap: 7px;
}

.lead-form label > span {
    color: #eee;
    font-size: 13px;
    font-weight: 800;
}

.lead-form label > span small {
    color: #8e8e8e;
    font-weight: 600;
}

.lead-form input,
.lead-form select,
.lead-form textarea {
    width: 100%;
    border: 1px solid #343434;
    border-radius: 8px;
    outline: 0;
    padding: 13px 14px;
    color: #fff;
    background: #0d0d0d;
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
    border-color: #ef160f;
    box-shadow: 0 0 0 3px rgba(239,22,15,.13);
}

.lead-form textarea {
    resize: vertical;
    min-height: 94px;
}

.lead-form__trap {
    position: absolute !important;
    left: -99999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.lead-form__submit {
    min-height: 54px;
    margin-top: 2px;
    border: 1px solid #ff443a;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(180deg, #ff2118, #c60000);
    box-shadow: 0 0 18px rgba(255,0,0,.22);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.lead-form__submit:disabled {
    opacity: .7;
    cursor: wait;
}

.lead-form__spinner {
    display: none;
    width: 19px;
    height: 19px;
    margin: auto;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lead-spin .7s linear infinite;
}

.lead-form__submit.is-loading .lead-form__submit-text {
    display: none;
}

.lead-form__submit.is-loading .lead-form__spinner {
    display: block;
}

.lead-form__status {
    min-height: 20px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.lead-form__status.is-success {
    color: #8cff9b;
}

.lead-form__status.is-error {
    color: #ff8a84;
}

body.lead-modal-open {
    overflow: hidden;
}

@keyframes lead-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
    .lead-modal {
        align-items: flex-end;
        padding: 10px;
    }

    .lead-modal__dialog {
        width: 100%;
        max-height: 88vh;
        padding: 24px 18px 20px;
        border-radius: 16px 16px 10px 10px;
    }

    .lead-modal h2 {
        font-size: 29px;
    }
}

/* =========================================================
   GOOGLE ADS / LANDING PAGE READY — FINAL ADDITIONS
========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    color: #f5f5f5;
    font-family: Arial, Helvetica, sans-serif;
}

/* Hero image is now a real <img> for faster LCP discovery. */
.hero-photo {
    background-image: none !important;
    overflow: hidden;
}

.hero-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 44%;
}

@media (max-width: 760px) {
    .hero-photo {
        background-image: none !important;
    }

    .hero-photo img {
        object-position: center center;
    }
}

/* Main content below hero */
.landing-section {
    position: relative;
    background: #080808;
    border-top: 1px solid rgba(255,255,255,.06);
}

.section-inner {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 68px 0;
}

.section-kicker {
    margin: 0 0 10px;
    color: #ff261f;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.section-title {
    margin: 0;
    max-width: 860px;
    color: #fff;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -.03em;
}

.section-lead {
    max-width: 760px;
    margin: 18px 0 0;
    color: #cfcfcf;
    font-size: 17px;
    line-height: 1.55;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
}

.service-card {
    min-height: 170px;
    padding: 24px;
    border: 1px solid rgba(255,50,40,.22);
    border-radius: 12px;
    background:
        radial-gradient(circle at 100% 0, rgba(190,0,0,.12), transparent 38%),
        linear-gradient(145deg, #121212, #0b0b0b);
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.service-card h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 20px;
    line-height: 1.15;
}

.service-card p {
    margin: 0;
    color: #bdbdbd;
    font-size: 15px;
    line-height: 1.5;
}

.advantages-section {
    background:
        radial-gradient(circle at 0 20%, rgba(185,0,0,.11), transparent 34%),
        #0d0d0d;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 32px;
}

.advantage {
    padding: 22px 0 0;
    border-top: 2px solid #e20d09;
}

.advantage strong {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 18px;
}

.advantage span {
    color: #bfbfbf;
    font-size: 15px;
    line-height: 1.5;
}

.contact-section {
    background:
        linear-gradient(120deg, rgba(140,0,0,.18), transparent 45%),
        #070707;
}

.contact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 30px;
    border: 1px solid rgba(255,50,40,.28);
    border-radius: 14px;
    background: linear-gradient(145deg, #151515, #0b0b0b);
}

.contact-card h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.05;
}

.contact-card p {
    margin: 12px 0 0;
    color: #c7c7c7;
    line-height: 1.5;
}

.contact-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.contact-action {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid #ff433b;
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    background: linear-gradient(180deg, #fa2119, #bd0000);
    box-shadow: 0 0 18px rgba(255,0,0,.18);
}

.contact-action--ghost {
    background: transparent;
    border-color: #4b4b4b;
}

.site-footer {
    padding: 26px 16px;
    border-top: 1px solid #202020;
    background: #030303;
    color: #8f8f8f;
}

.footer-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.footer-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-links a {
    color: #d8d8d8;
    text-decoration: none;
}

.footer-links a:hover {
    color: #ff2e26;
}

.form-privacy-note {
    margin: 10px 0 0;
    color: #8f8f8f;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.form-privacy-note a {
    color: #d8d8d8;
}

/* Consent Mode-ready compact banner. */
.consent-banner {
    position: fixed;
    z-index: 1000;
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: min(720px, calc(100% - 28px));
    margin: 0 auto;
    padding: 14px;
    display: none;
    align-items: center;
    gap: 14px;
    border: 1px solid #343434;
    border-radius: 10px;
    background: rgba(12,12,12,.97);
    box-shadow: 0 15px 45px rgba(0,0,0,.55);
}

.consent-banner.is-visible {
    display: flex;
}

.consent-banner p {
    flex: 1;
    margin: 0;
    color: #cfcfcf;
    font-size: 12px;
    line-height: 1.4;
}

.consent-banner a {
    color: #fff;
}

.consent-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.consent-actions button {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 7px;
    border: 1px solid #444;
    background: #1b1b1b;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.consent-actions .consent-accept {
    border-color: #e5261f;
    background: #c90b07;
}

@media (max-width: 820px) {
    .services-grid,
    .advantages-grid {
        grid-template-columns: 1fr;
    }

    .section-inner {
        padding: 48px 0;
    }

    .contact-card {
        grid-template-columns: 1fr;
    }

    .contact-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .section-inner {
        width: min(100% - 24px, 1180px);
        padding: 40px 0;
    }

    .service-card {
        min-height: auto;
        padding: 20px;
    }

    .contact-card {
        padding: 22px;
    }

    .contact-actions,
    .contact-action {
        width: 100%;
    }

    .consent-banner {
        align-items: stretch;
        flex-direction: column;
    }

    .consent-actions {
        width: 100%;
    }

    .consent-actions button {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}