/* 24автоэвакуатор.рф — premium mobile-first landing
   Accent: premium orange. Background: graphite / black / white.
   No framework, minimal dependencies.
*/

:root{
  --bg: #0b0c0f;
  --bg-2: #0f1116;
  --card: rgba(255,255,255,.09);
  --card-2: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.16);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted-2: rgba(255,255,255,.58);

  --white: #ffffff;
  --black: #0b0c0f;

  --accent: #ff7a18;          /* premium orange */
  --accent-2: #ff9a4a;
  --accent-ink: #1a0e05;

  --radius: 18px;
  --radius-lg: 24px;

  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);

  --container: 1120px;

  --tap: 56px;
  --tap-sm: 44px;

  --focus: 0 0 0 3px rgba(255,122,24,.42);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 20% 0%, rgba(255,122,24,.22), transparent 55%),
              radial-gradient(900px 700px at 90% 25%, rgba(255,154,74,.14), transparent 55%),
              var(--bg);
  color: var(--text);
  line-height: 1.35;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 128px; /* space for sticky bar */
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button, a{ -webkit-tap-highlight-color: transparent; }

.container{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 12px;
  padding: 10px 12px;
  background: var(--white);
  color: #111;
  border-radius: 10px;
  z-index: 1000;
}
.skip-link:focus{ left: 12px; outline: none; box-shadow: var(--focus); }

.topbar{
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
  background: rgba(11,12,15,.65);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 160px;
}
.brand__mark{
  width: 14px; height: 14px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 30px rgba(255,122,24,.25);
}
.brand__name{
  font-weight: 700;
  letter-spacing: .2px;
}

.topbar__actions{
  display:flex;
  align-items:center;
  gap: 10px;
}
.phone-link{
  display:none; /* mobile-first: keep clean; show on wider */
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.phone-link__label{
  display:block;
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: .2px;
}
.phone-link__value{
  display:block;
  font-weight: 700;
  letter-spacing: .2px;
}

.hero{
  padding: 26px 0 10px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.hero__content{
  padding: 10px 0 0;
}
.eyebrow{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.h1{
  margin: 0 0 14px;
  font-size: clamp(30px, 6.8vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.hero__triggers{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}
.chip{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 650;
  font-size: 13px;
}
.chip--ghost{
  background: rgba(255,122,24,.14);
  border-color: rgba(255,122,24,.22);
  color: rgba(255,255,255,.92);
}

.cta{ margin-top: 6px; }
.cta__secondary{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
.microcopy{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.microcopy--tight{ margin-top: 8px; }

.trustline{
  margin-top: 16px;
  display:grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.trustline__item{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: var(--muted);
  font-size: 14px;
}
.dot{
  margin-top: 7px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  flex: 0 0 auto;
}

.hero__media{
  display:grid;
  gap: 12px;
}
.media-card{
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow-soft);
}
.media-card img{
  width: 100%;
  height: auto;
}
.media-card__caption{
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted-2);
  border-top: 1px solid rgba(255,255,255,.12);
}
.media-strip{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.media-strip img{
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}

.section{
  padding: 34px 0;
}
.section--soft{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.section--final{
  padding: 40px 0 46px;
  background: radial-gradient(1000px 600px at 50% 0%, rgba(255,122,24,.14), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-top: 1px solid rgba(255,255,255,.06);
}
.section__head{
  margin-bottom: 14px;
}
.h2{
  margin: 0 0 10px;
  font-size: clamp(22px, 4.8vw, 34px);
  letter-spacing: -0.02em;
}
.lead{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  max-width: 62ch;
}

.cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}
.card{
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.h3{
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.h3--muted{
  color: rgba(255,255,255,.88);
}
.p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.steps{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display:grid;
  gap: 12px;
}
.step{
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.step__icon{
  width: 44px; height: 44px;
  border-radius: 14px;
  background: rgba(255,122,24,.22);
  border: 1px solid rgba(255,122,24,.24);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 10px;
}
.ico{ display:block; width: 20px; height: 20px; background: var(--accent); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; }
.ico--phone{ mask-image: url("../img/ico-phone.svg"); -webkit-mask-image: url("../img/ico-phone.svg");}
.ico--check{ mask-image: url("../img/ico-check.svg"); -webkit-mask-image: url("../img/ico-check.svg");}
.ico--truck{ mask-image: url("../img/ico-truck.svg"); -webkit-mask-image: url("../img/ico-truck.svg");}

.inline-cta{
  margin-top: 16px;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.inline-cta__note{
  color: var(--muted-2);
  font-size: 13px;
}

.why-grid{
  display:grid;
  gap: 16px;
  margin-top: 16px;
}
.why{
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.why + .why{ margin-top: 12px; }
.photo-stack{
  display:grid;
  gap: 12px;
}
.photo-stack img{
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.note{
  margin: 10px 0 0;
  color: var(--muted-2);
  font-size: 13px;
}

.price-card{
  margin-top: 16px;
  display:grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow-soft);
}
.price-tag{
  display:inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,122,24,.26), rgba(255,154,74,.16));
  border: 1px solid rgba(255,122,24,.22);
  margin-bottom: 10px;
}
.price-tag__from{ color: rgba(255,255,255,.75); font-weight: 700; }
.price-tag__value{ font-size: 28px; font-weight: 900; letter-spacing: -0.03em; }

.list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
}
.list li{ margin: 8px 0; }

.faq{
  margin-top: 16px;
  display:grid;
  gap: 10px;
}
.faq__item{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.faq__item summary{
  cursor: pointer;
  padding: 14px 14px;
  list-style: none;
  font-weight: 650;
}
.faq__item summary::-webkit-details-marker{ display:none; }

.faq__body{ padding: 0 14px 14px; }

.final{
  display:grid;
  gap: 16px;
}
.final__cta{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.final__secondary{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.callout{
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.callout__label{
  font-size: 12px;
  color: var(--muted-2);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.callout__value{
  display:inline-block;
  margin-top: 6px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.footer{
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(11,12,15,.55);
}
.footer__inner{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.footer__brand{
  font-weight: 800;
}
.footer__meta{
  color: var(--muted-2);
  font-size: 12px;
  margin-top: 6px;
}
.footer__links{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
}
.footer__links a{
  color: rgba(255,255,255,.78);
  font-size: 13px;
  border-bottom: 1px dashed rgba(255,255,255,.25);
}
.footer__links a:focus{ outline: none; box-shadow: var(--focus); border-bottom-color: transparent; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 16px;
  min-height: var(--tap);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 750;
  letter-spacing: .1px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:focus{ outline: none; box-shadow: var(--focus); }

.btn--primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: rgba(255,122,24,.55);
  color: #17110c;
  box-shadow: 0 18px 55px rgba(255,122,24,.34);
}
.btn--primary:hover{ background: linear-gradient(135deg, #ff6b00, var(--accent-2)); }
.btn--secondary{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.btn--secondary:hover{ background: rgba(255,255,255,.09); }

.btn--xl{
  width: 100%;
  font-size: 16px;
  border-radius: 18px;
}
.btn--sm{
  min-height: var(--tap-sm);
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
}

.stickybar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(11,12,15,.72);
  border-top: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
}
.stickybar__btn{
  min-height: 56px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 6px;
}
.stickybar__btn:focus{ outline: none; box-shadow: var(--focus); }
.stickybar__btn--call{
  background: linear-gradient(135deg, rgba(255,122,24,.95), rgba(255,154,74,.90));
  border-color: rgba(255,122,24,.55);
}
.stickybar__txt{
  font-size: 11px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.82);
}
.stickybar__btn--call .stickybar__txt{ color: rgba(23,17,12,.92); font-weight: 800; }

.stickybar__ico{
  width: 18px;
  height: 18px;
  background: rgba(255,255,255,.92);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-image: url("../img/ico-phone.svg");
  -webkit-mask-image: url("../img/ico-phone.svg");
}
.stickybar__btn--call .stickybar__ico{
  background: rgba(23,17,12,.88);
}
.stickybar__ico--wa{ mask-image: url("../img/ico-wa.svg"); -webkit-mask-image: url("../img/ico-wa.svg");}
.stickybar__ico--tg{ mask-image: url("../img/ico-tg.svg"); -webkit-mask-image: url("../img/ico-tg.svg");}
.stickybar__ico--mx{ mask-image: url("../img/ico-max.svg"); -webkit-mask-image: url("../img/ico-max.svg");}


/* Button icons (messengers) */
.btn__ico{
  width: 18px;
  height: 18px;
  display: inline-block;
  flex: 0 0 auto;
  background: rgba(255,255,255,.92);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.btn--primary .btn__ico{ background: rgba(23,17,12,.90); }
.btn__ico--wa{ mask-image: url("../img/ico-wa.svg"); -webkit-mask-image: url("../img/ico-wa.svg");}
.btn__ico--tg{ mask-image: url("../img/ico-tg.svg"); -webkit-mask-image: url("../img/ico-tg.svg");}
.btn__ico--mx{ mask-image: url("../img/ico-max.svg"); -webkit-mask-image: url("../img/ico-max.svg");}
.btn__txt{ display:inline-block; }

/* Price contact strip */
.price-contact{
  margin-bottom: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid;
  gap: 12px;
}
.price-contact__phone{
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.price-contact__label{
  font-size: 12px;
  color: var(--muted-2);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.price-contact__value{
  display:inline-block;
  margin-top: 6px;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.01em;
}
.price-contact__sub{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}
.price-contact__actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.btn--icon{
  justify-content: center;
}

/* Steps: bigger icon + badge */
.step__icon{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,122,24,.18), rgba(255,154,74,.14));
  border: 1px solid rgba(255,122,24,.28);
}
.step__icon .ico{ width: 22px; height: 22px; }
.step__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  margin: 4px 0 10px;
  background: rgba(255,122,24,.18);
  border: 1px solid rgba(255,122,24,.30);
  color: rgba(255,255,255,.88);
  font-weight: 850;
  font-size: 13px;
}

/* wider screens */
@media (min-width: 680px){
  body{ padding-bottom: 0; }
  .cta__secondary{ grid-template-columns: repeat(3, 1fr); }
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .steps{ grid-template-columns: repeat(3, 1fr); }
  .why-grid{ grid-template-columns: 1.2fr .9fr; align-items: start; }
  .why + .why{ margin-top: 0; }
  .price-card{ grid-template-columns: 1.2fr .8fr; gap: 18px; padding: 18px; }
  .final{ grid-template-columns: 1.2fr .8fr; align-items: start; }
  .final__secondary{ grid-template-columns: repeat(3, 1fr); }
  .btn--xl{ width: auto; }
  .stickybar{ display:none; }
  .phone-link{ display:block; }
}

@media (min-width: 980px){
  .hero{ padding: 44px 0 14px; }
  .hero__grid{ grid-template-columns: 1.1fr .9fr; align-items: start; gap: 28px; }
  .cards{ grid-template-columns: repeat(3, 1fr); }
  .topbar__inner{ padding: 16px 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn{ transition: none; }
}


/* Inline SVG icons (reliable across browsers) */
.icon{
  width: 18px;
  height: 18px;
  display: inline-block;
  flex: 0 0 auto;
}
.btn{
  gap: 10px;
}
.btn--icon{
  justify-content: center;
}
.btn .icon{ color: currentColor; }
.btn__txt{ display:inline-block; }

.stickybar__btn .icon{
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,.92);
}
.stickybar__btn--call .icon{ color: rgba(23,17,12,.90); }

/* Situations card mini-illustrations */
.card__icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(255,122,24,.18), rgba(255,154,74,.12));
  border: 1px solid rgba(255,122,24,.26);
}
.card__svg{
  width: 22px;
  height: 22px;
  color: rgba(255,255,255,.92);
}

/* Brand prominence */
.brand__name{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .06em;
}
@media (min-width: 680px){
  .brand__name{ font-size: 20px; }
}
@media (min-width: 980px){
  .brand__name{ font-size: 22px; }
}

/* Slightly brighter premium feel (still restrained) */
:root{
  --card: rgba(255,255,255,.07);
  --card-2: rgba(255,255,255,.10);
}
.card, .step, .why, .faq__item{
  background: rgba(255,255,255,.05);
}


.faq__item summary{
  outline: none;
}
.faq__item summary:focus{
  box-shadow: none;
}
.faq__item summary:focus-visible{
  outline: none;
  box-shadow: var(--focus);
}


/* HOW: enhanced steps */
.steps--pro{
  margin-top: 18px;
}
.step--pro .step__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.step__num{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: rgba(23,17,12,.92);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 1px solid rgba(255,122,24,.55);
  box-shadow: 0 18px 45px rgba(255,122,24,.16);
}
.step--pro .step__icon{
  width: 44px; height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0;
}
.step--pro .step__icon .icon{
  width: 20px; height: 20px;
  color: rgba(255,255,255,.90);
}
.mini{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
}
.mini li{ margin: 6px 0; }

.badge-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.badge{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,122,24,.16);
  border: 1px solid rgba(255,122,24,.28);
  font-weight: 750;
  font-size: 13px;
}
.badge--ghost{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
}

.how-panel{
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.how-panel__title{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  margin-bottom: 6px;
}
.how-panel__text{
  color: rgba(255,255,255,.84);
  font-size: 14px;
}

/* Footer disclaimer */
.footer__disclaimer{
  margin-top: 10px;
  color: rgba(255,255,255,.58);
  font-size: 12px;
  max-width: 80ch;
}

@media (min-width: 680px){
  .step__num{ width: 42px; height: 42px; }
}