/* ==========================================================================
   MILITEX — Антидронові сітки
   Art direction: technical documentation / field equipment catalog.
   Palette: graphite, warm paper, muted olive, one warning-yellow accent.
   Type: condensed industrial display + clean utilitarian sans for body/data.
   ========================================================================== */

:root{
  --ink:        #17181A;   /* near-black graphite */
  --ink-soft:   #4A4C4F;
  --steel:      #2B2E31;   /* dark steel, secondary dark surface */
  --paper:      #F3F1EA;   /* warm off-white, not pure white */
  --paper-dim:  #E7E4D9;
  --olive:      #4B4F3B;   /* muted military olive */
  --olive-dim:  #3B3E2F;
  --yellow:     #F5B400;   /* warning accent — used sparingly, never decorative */
  --line:       rgba(23,24,26,.16);
  --line-strong:rgba(23,24,26,.32);
  --line-on-dark: rgba(243,241,234,.16);
  --line-on-dark-strong: rgba(243,241,234,.32);

  --font-display: 'Oswald', 'Archivo Black', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-body: 'Inter', 'Montserrat', system-ui, sans-serif;

  --wrap: 1280px;
  --radius: 0px;

  --ease: cubic-bezier(.6,0,.2,1);
}

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

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.005em;
  text-transform: uppercase;
}

p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
img{ max-width: 100%; display: block; }
button{ font-family: inherit; cursor: pointer; }
figure{ margin: 0; }

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

/* ---- Technical label — the recurring "metadata" motif ---- */
.kicker{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.kicker::before{
  content: '';
  width: 22px;
  height: 1px;
  background: var(--yellow);
  flex-shrink: 0;
}
.kicker--on-dark{ color: rgba(243,241,234,.6); }
.kicked{ margin-top: 12px; }

/* ---- Hazard strip — engineered signature motif, top of page only ---- */
.hazard-strip{
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--yellow), var(--yellow) 14px,
    var(--ink) 14px, var(--ink) 28px
  );
}

/* Mesh texture — evokes the net itself. Applied to dark sections. */
.mesh-bg{
  background-image:
    linear-gradient(var(--line-on-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-dark) 1px, transparent 1px);
  background-size: 38px 38px;
}

/* ==========================================================================
   TOPBAR
   ========================================================================== */
.topbar{
  background: var(--ink);
  border-bottom: 1px solid var(--line-on-dark);
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.topbar__logo {
  display: block;
  width: 116px;
  height: auto;
}
.topbar__phone{
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--paper);
  padding: 9px 16px;
  border: 1px solid var(--line-on-dark-strong);
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.topbar__phone:hover{
  border-color: var(--yellow);
  color: var(--yellow);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.hero::before{
  /* full-bleed product photo, right-weighted, not covered in gradient soup */
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56%;
  background: url("images/image1.webp") center center / cover no-repeat;
}
.hero::after{
  /* single controlled fade so type stays legible — no heavy overlay on the image itself */
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56%;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(23,24,26,0) 34%, rgba(23,24,26,0) 100%);
}
@media (min-width: 901px){
  .hero::after{
    background:
      linear-gradient(90deg, var(--ink) 0%, rgba(23,24,26,0) 30%),
      linear-gradient(0deg, rgba(23,24,26,.55) 0%, rgba(23,24,26,0) 40%);
  }
}

.hero__grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  padding-top: 64px;
  padding-bottom: 56px;
  align-items: end;
  min-height: 560px;
}
.hero__text{ padding-bottom: 8px; max-width: 46ch; }

.hero__code{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  color: rgba(243,241,234,.5);
  margin-bottom: 16px;
  display: block;
}

.hero__title{
  font-size: clamp(42px, 6vw, 76px);
  font-weight: 700;
  max-width: 11ch;
  color: var(--paper);
  text-transform: uppercase;
}
.hero__lead{
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 500;
  color: var(--paper);
}
.hero__sub{
  margin-top: 6px;
  font-size: 15.5px;
  color: rgba(243,241,234,.56);
}
.hero__points{
  margin-top: 24px;
  border-top: 1px solid var(--line-on-dark);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero__points li{
  position: relative;
  padding-left: 24px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: .01em;
  color: rgba(243,241,234,.78);
}
.hero__points li::before{
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 10px; height: 1px;
  background: var(--yellow);
}

/* ---- Lead card — flat technical form panel, not a rounded card ---- */
.lead-card{
  background: var(--paper);
  color: var(--ink);
  padding: 30px;
  border: 1px solid var(--line-on-dark-strong);
  position: relative;
}
.lead-card::before{
  /* corner tick marks — spec-sheet detail */
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--yellow);
  border-left: 2px solid var(--yellow);
}
.lead-card::after{
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 14px; height: 14px;
  border-bottom: 2px solid var(--yellow);
  border-right: 2px solid var(--yellow);
}

.hero__badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 10px 16px 10px 10px;
  background: transparent;
  border: 1px solid var(--yellow);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.3;
  color: var(--yellow);
}
.hero__badge-dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px; height: 18px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
}

.lead-card__title{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.lead-form{
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.field{
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field__label{
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field textarea{
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 13px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  resize: none;
  transition: border-color .18s var(--ease);
}
.field input:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--ink);
}
.field input:focus-visible,
.field textarea:focus-visible{
  outline: 2px solid var(--yellow);
  outline-offset: 1px;
}

.lead-form__success{
  font-size: 14px;
  font-weight: 600;
  color: var(--olive);
  padding-top: 4px;
}

/* ---- Buttons — flat, technical, no rounded pillow buttons ---- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  transition: transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.btn--primary{
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
}
.btn--primary:hover{
  background: transparent;
  color: var(--yellow);
}
.btn--primary:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.btn--dark{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--dark:hover{
  background: transparent;
  color: var(--ink);
}
.btn--dark:focus-visible{
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}
.btn--block{ width: 100%; }
.btn--sm{ padding: 11px 18px; font-size: 13px; }
.btn--lg{ padding: 18px 44px; font-size: 15px; }

/* ---- Trust ribbon — technical strip, not a rounded pill ---- */
.trust-ribbon{
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line-on-dark);
  background: rgba(0,0,0,.22);
}
.trust-ribbon__inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 13px 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(243,241,234,.62);
  flex-wrap: wrap;
  text-align: center;
}
.trust-ribbon__sep{
  width: 3px; height: 3px;
  background: var(--yellow);
  flex-shrink: 0;
}

/* ==========================================================================
   SECTION TITLES (shared) — numbered, editorial
   ========================================================================== */
.section-head{
  display: flex;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.section-num{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: .06em;
}
.section-title{
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  max-width: 20ch;
}
.section-sub{
  margin-top: 10px;
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ==========================================================================
   BARRIER — asymmetric photo grid with technical captions
   ========================================================================== */
.barrier{ padding: 72px 0; border-bottom: 1px solid var(--line); }
.barrier__title{
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  max-width: 27ch;
}
.barrier__sub{
  margin-top: 10px;
  font-size: 16px;
  color: var(--ink-soft);
}

.barrier__gallery{
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(210px, 280px));
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
.barrier__tile{
  position: relative;
  overflow: hidden;
  background: var(--paper-dim);
}
.barrier__tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(.15) contrast(1.05);
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
.barrier__tile:hover img{
  transform: scale(1.04);
  filter: grayscale(0) contrast(1.05);
}
.barrier__tile--a{ grid-column: 1 / 3; grid-row: 1 / 3; }
.barrier__tile--b{ grid-column: 3 / 4; grid-row: 1 / 2; }
.barrier__tile--c{ grid-column: 4 / 5; grid-row: 1 / 2; }
.barrier__tile--d{ grid-column: 3 / 4; grid-row: 2 / 3; }
.barrier__tile--e{ grid-column: 4 / 5; grid-row: 2 / 3; }

.barrier__tile::before{
  /* tile index — technical documentation detail */
  content: attr(data-index);
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(243,241,234,.7);
  border: 1px solid rgba(243,241,234,.35);
  padding: 3px 7px;
}

.barrier__tile figcaption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(15,15,15,.92) 0%, rgba(15,15,15,.4) 55%, transparent 100%);
  color: var(--paper);
  pointer-events: none;
}
.barrier__tile--a figcaption{ padding: 28px; }
.barrier__tile figcaption h3{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--paper);
  line-height: 1.15;
  text-transform: uppercase;
}
.barrier__tile--a figcaption h3{ font-size: 21px; }
.barrier__tile figcaption p{
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(243,241,234,.76);
}
.barrier__tile--a figcaption p{ font-size: 13.5px; max-width: 34ch; }

/* ==========================================================================
   SPECS — technical documentation tables
   ========================================================================== */
.specs{
  padding: 72px 0;
  background: var(--olive);
  color: var(--paper);
}
.specs .section-num,
.specs .kicker{ color: rgba(243,241,234,.55); }
.specs .section-title{ color: var(--paper); }
.specs .section-sub{ color: rgba(243,241,234,.68); }

.specs__tables{
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  align-items: start;
  background: var(--line-on-dark);
  border: 1px solid var(--line-on-dark);
}
.spec-table{
  background: var(--paper);
  color: var(--ink);
}
.spec-table__title{
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  color: var(--paper);
}
.spec-table table{
  width: 100%;
  border-collapse: collapse;
}
.spec-table thead th{
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
}
.spec-table tbody td{
  padding: 13px 24px;
  font-size: 14.5px;
  border-bottom: 1px solid var(--line);
}
.spec-table tbody tr:last-child td{ border-bottom: none; }
.spec-table tbody td:first-child{
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}
.spec-table td.num{ font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 13.5px; }
.spec-table__link{
  display: block;
  padding: 15px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  border-top: 1px solid var(--line);
  transition: background .15s var(--ease);
}
.spec-table__link:hover{ background: var(--paper-dim); }

.footnote{
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(243,241,234,.55);

  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  text-align: center;
}

/* ---- inline CTA (reused in specs + products) — flat technical block ---- */
.inline-cta{
  margin-top: 36px;
  padding: 28px 32px;
  background: var(--ink);
  border-left: 3px solid var(--yellow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.specs .inline-cta{ background: var(--ink); }
.inline-cta__title{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--paper);
}
.inline-cta--coyote {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  position: relative;
}
.inline-cta--coyote::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--yellow);
  border-left: 2px solid var(--yellow);
}
.inline-cta--coyote::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 14px; height: 14px;
  border-bottom: 2px solid var(--yellow);
  border-right: 2px solid var(--yellow);
}
.inline-cta--coyote .inline-cta__title {
  color: var(--ink);
}
.inline-cta--coyote .inline-cta__text {
  color: var(--ink-soft);
}
.inline-cta__text{
  color: rgba(243,241,234,.68);
}

/* ==========================================================================
   CUSTOM ORDER — compact two-part strip: lead+specs row, then thin cta line
   ========================================================================== */
.custom-order{
  padding: 36px 0;
  background: var(--steel);
  border-top: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
}

.custom-order__row{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}

.custom-order__lead{ color: var(--paper); }
.custom-order__title{
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--paper);
}
.custom-order__text{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(243,241,234,.62);
  max-width: 42ch;
}
.custom-order__text--secondary{
  margin-top: 14px;
}

.custom-order__specs{
  margin-top: 2px;
}
.custom-order__specs li{
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-on-dark);
}
.custom-order__specs li:last-child{
  border-bottom: none;
}
.custom-order__specs-index{
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--yellow);
}
.custom-order__specs-body{
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.custom-order__specs-name{
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(243,241,234,.94);
  line-height: 1.4;
}
.custom-order__specs-desc{
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(243,241,234,.58);
}

.custom-order__cta{
  padding-top: 18px;
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.custom-order__cta-text{
  font-size: 13.5px;
  color: rgba(243,241,234,.58);
  max-width: 52ch;
}
.custom-order .btn{ flex-shrink: 0; }

@media (max-width: 768px){
  .custom-order{ padding: 30px 0; }
  .custom-order__row{ grid-template-columns: 1fr; gap: 22px; }
  .custom-order__specs{ align-self: stretch; }
}
@media (max-width: 480px){
  .custom-order{ padding: 26px 0; }
.custom-order__title{ font-size: 16.5px; }
.custom-order__text{ font-size: 13px; }
.custom-order__specs li{ padding: 11px 0; gap: 10px; }
.custom-order__specs-name{ font-size: 11.5px; }
.custom-order__specs-desc{ font-size: 11px; }
.custom-order__cta{ flex-direction: column; align-items: flex-start; gap: 14px; }
.custom-order .btn{ width: 100%; }
}

/* ==========================================================================
   PRODUCTS — catalog grid, flat cards with technical dividers
   ========================================================================== */
.products{ padding: 72px 0; }
.products__grid{
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.product-card{
  background: var(--paper);
  position: relative;
  transition: background .18s var(--ease);
}
.product-card:hover{ background: var(--paper-dim); }

.photo-slot{
  aspect-ratio: 550/270;   /* под реальные пропорции фото */
  background: var(--paper-dim);
  position: relative;
}
.photo-slot img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.1);
}
.photo-slot__label{
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-soft);
  background:
    repeating-linear-gradient(45deg, var(--paper-dim), var(--paper-dim) 10px, #DAD7CB 10px, #DAD7CB 20px);
}
.photo-slot.is-empty .photo-slot__label{ display: flex; }

.product-card__name{
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  padding: 16px 18px 0;
}
.product-card__specs{
  padding: 12px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}
.product-card__specs div{
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  border-bottom: 1px dotted var(--line-strong);
  padding-bottom: 6px;
}
.product-card__specs dt{
  font-family: var(--font-mono);
  letter-spacing: .02em;
  color: var(--ink-soft);
}
.product-card__specs dd{ margin: 0; font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; }

.product-card__footer{
  margin-top: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.product-card__price{
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--olive-dim);
  font-variant-numeric: tabular-nums;
}
.product-card__price--ask{
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ==========================================================================
   SAMPLES — technical two-column spec block, same visual language
   as .inline-cta and .spec-table (numbered rows, mono labels, hard rules)
   ========================================================================== */
.samples{
  padding: 48px 0;
  background: var(--ink);
  color: var(--paper);
}
.samples .kicker--on-dark{ color: rgba(243,241,234,.55); }

.samples__grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2px;
  background: var(--line-on-dark);
  border: 1px solid var(--line-on-dark);
}

.samples__pitch{
  background: var(--ink);
  padding: 28px 32px;
  border-left: 3px solid var(--yellow);
}
.samples__title{
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 700;
  color: var(--paper);
  max-width: 14ch;
}
.samples__highlight{
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--yellow);
}
.samples__text{
  margin-top: 10px;
  font-size: 15px;
  color: rgba(243,241,234,.6);
  max-width: 40ch;
}
.samples__pitch .btn--primary{ margin-top: 28px; }

.samples__docs{
  background: var(--steel);
  padding: 28px 32px;
}
.samples__docs-label{
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(243,241,234,.5);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-on-dark);
}

.doc-list{
  margin-top: 4px;
}
.doc-list__item{
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-on-dark);
}
.doc-list__item:last-child{ border-bottom: none; }
.doc-list__index{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--yellow);
  flex-shrink: 0;
}
.doc-list__name{
  font-size: 15px;
  font-weight: 500;
  color: rgba(243,241,234,.88);
  line-height: 1.4;
}

/* ==========================================================================
   DELIVERY — compact 4-up parameter grid, same "spec-sheet" language
   as .spec-table / .product-card__specs
   ========================================================================== */
.delivery{ padding: 40px 0; border-bottom: 1px solid var(--line); }
.delivery__grid{
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
.delivery__item{
  padding: 18px 20px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 2px solid var(--yellow);
}
.delivery__item-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.delivery__item-value{
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.delivery__note{
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{
  padding: 72px 0;
  background: var(--paper-dim);
}
.accordion{
  margin-top: 32px;
  border-top: 1px solid var(--line-strong);
}
.accordion__item{
  border-bottom: 1px solid var(--line-strong);
}
.accordion__trigger{
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 17px 4px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.accordion__trigger:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
.accordion__trigger::after{
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink-soft);
  transition: transform .2s var(--ease);
}
.accordion__trigger[aria-expanded="true"]::after{
  content: '−';
  color: var(--yellow-dim, var(--yellow));
}
.accordion__panel > p{
  overflow: hidden;
  padding-right: 40px;
  padding-bottom: 0;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  min-height: 0;
  transition: padding-bottom .3s var(--ease);
}
.accordion__panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
  min-height: 0;
}
.accordion__item.is-open .accordion__panel{
  grid-template-rows: 1fr;
}
.accordion__item.is-open .accordion__panel > p{
  padding-bottom: 17px;
}

/* ==========================================================================
   CONTACT / FOOTER
   ========================================================================== */
.contact{
  background: var(--ink);
  color: var(--paper);
  padding: 64px 0 0;
}
.contact__inner{
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
  padding-bottom: 52px;
}
.contact__title{
  font-size: clamp(26px, 3.2vw, 32px);
  font-weight: 700;
  color: var(--paper);
}
.contact__sub{
  margin-top: 12px;
  font-size: 15px;
  color: rgba(243,241,234,.58);
}
.contact__phone{
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: .01em;
}
.contact__text{
  margin-top: 14px;
  font-size: 14.5px;
  color: rgba(243,241,234,.56);
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}

.messengers{
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.messenger{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid var(--line-on-dark-strong);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(243,241,234,.8);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.messenger svg{ width: 17px; height: 17px; }
.messenger:hover{
  border-color: var(--yellow);
  color: var(--yellow);
}

.contact .btn--primary{ margin-top: 32px; }

.contact__legal{
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(243,241,234,.36);
}

/* ==========================================================================
   MODAL — reusable lead popup, shared by every CTA button
   ========================================================================== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.modal.is-open{ display: flex; }

.modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(15,15,15,.72);
  backdrop-filter: blur(2px);
  animation: modal-fade .18s var(--ease);
}

.modal__dialog{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  background: var(--paper);
  color: var(--ink);
  padding: 38px;
  border: 1px solid var(--line-strong);
  animation: modal-rise .22s var(--ease);
}
.modal__dialog::before{
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 16px; height: 16px;
  border-top: 2px solid var(--yellow);
  border-left: 2px solid var(--yellow);
}
.modal__dialog::after{
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 16px; height: 16px;
  border-bottom: 2px solid var(--yellow);
  border-right: 2px solid var(--yellow);
}

.modal__close{
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.modal__close svg{ width: 15px; height: 15px; }
.modal__close:hover{
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.modal__close:focus-visible{
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

.modal__title{
  margin-top: 14px;
  margin-bottom: 22px;
  padding-right: 40px;
}

body.modal-open{ overflow: hidden; }

@keyframes modal-fade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@keyframes modal-rise{
  from{ opacity: 0; transform: translateY(10px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .modal__overlay, .modal__dialog{ animation: none; }
}

@media (max-width: 480px){
  .modal{ padding: 0; align-items: center; }
  .modal__dialog{
    max-width: none;
    width: 100%;
    max-height: 92vh;
    padding: 28px 20px 24px;
    border-left: none;
    border-right: none;
    border-bottom: none;
    animation: modal-rise-mobile .22s var(--ease);
  }
  .modal__title{ font-size: 17px; margin-top: 12px; margin-bottom: 16px; }
  .modal__close{ top: 14px; right: 14px; width: 34px; height: 34px; }
  .field input, .field textarea{ font-size: 16px; } /* prevent iOS auto-zoom on focus */
}
@keyframes modal-rise-mobile{
  from{ opacity: 0; transform: translateY(24px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ---- Topbar actions group (phone + burger) ---- */
.topbar__actions{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---- Burger button — hidden by default, shown only on mobile ---- */
.burger{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-on-dark-strong);
  transition: border-color .18s var(--ease);
}
.burger:hover{ border-color: var(--yellow); }
.burger__line{
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--paper);
  transition: transform .2s var(--ease), opacity .2s var(--ease), background .2s var(--ease);
}
.burger:hover .burger__line{ background: var(--yellow); }
.burger[aria-expanded="true"] .burger__line:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2){ opacity: 0; }
.burger[aria-expanded="true"] .burger__line:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---- Off-canvas drawer ---- */
.drawer{
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
}
.drawer.is-open{ display: block; }

.drawer__overlay{
  position: absolute;
  inset: 0;
  background: rgba(15,15,15,.72);
  backdrop-filter: blur(2px);
  animation: modal-fade .18s var(--ease);
}

.drawer__panel{
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--ink);
  color: var(--paper);
  padding: 30px 24px;
  border-left: 1px solid var(--line-on-dark-strong);
  transform: translateX(0);
  animation: drawer-slide-in .22s var(--ease);
  overflow-y: auto;
}
@keyframes drawer-slide-in{
  from{ transform: translateX(100%); }
  to{ transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .drawer__overlay, .drawer__panel{ animation: none; }
}

.drawer__close{
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-on-dark-strong);
  color: var(--paper);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.drawer__close svg{ width: 15px; height: 15px; }
.drawer__close:hover{
  border-color: var(--yellow);
  color: var(--yellow);
}

.drawer__phone{
  display: block;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--yellow);
}

.drawer__messengers{
  margin-top: 28px;
  border-top: 1px solid var(--line-on-dark);
  padding-top: 8px;
}
.drawer__messenger-link{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line-on-dark);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: rgba(243,241,234,.82);
  transition: color .18s var(--ease);
}
.drawer__messenger-link svg{ width: 18px; height: 18px; flex-shrink: 0; }
.drawer__messenger-link:hover{ color: var(--yellow); }

body.drawer-open{ overflow: hidden; }

/* ==========================================================================
   RESPONSIVE
   Breakpoints tuned for real devices: 768 (tablet), 430/414/390/375/360/320
   (phones). Each phone tier gets deliberate type/spacing choices rather
   than a single stacked-desktop fallback.
   ========================================================================== */

/* ---- Tablet / large phone: 768px and below ---- */
@media (max-width: 768px){
  html, body{ overflow-x: hidden; }

  .wrap{ padding: 0 24px; }

  .topbar__inner{ height: 56px; }
  .topbar__logo{ width: 100px; }
  .topbar__phone{ font-size: 13px; padding: 8px 12px; }
  .burger{ display: flex; }


  .hero{ min-height: 0; }
 .hero::before{
  position: absolute;
  width: 100%;
  height: 300px;
  top: 0; left: 0; right: 0; bottom: auto;
  background-position: center top;
}
  .hero::after{
    position: absolute;
    top: 0; left: 0; right: 0;
    width: 100%; height: 300px;
    background: linear-gradient(180deg, rgba(23,24,26,.05) 40%, var(--ink) 96%);
  }
  .hero__grid{
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 44px;
    min-height: 0;
    align-items: stretch;
  }
  .hero__text{ max-width: none; padding-top: 200px; }
  .hero__title{ max-width: none; }

  .trust-ribbon__inner{
    gap: 10px 18px;
    padding: 12px 24px;
    font-size: 11px;
  }

  .section-head{ gap: 14px; }
  .kicked{ margin-top: 10px; }

  .barrier{ padding: 56px 0; }
  .barrier__gallery{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    margin-top: 28px;
  }
  .barrier__tile--a{ grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16/9; }
  .barrier__tile--b,
  .barrier__tile--c,
  .barrier__tile--d,
  .barrier__tile--e{
    grid-column: auto; grid-row: auto; aspect-ratio: 4/3;
  }

   .specs{ padding: 56px 0; }
  .specs__tables{ grid-template-columns: 1fr; margin-top: 28px; }
  .spec-table thead th,
  .spec-table tbody td{ padding: 11px 18px; }

   .samples{ padding: 40px 0; }
  .samples__grid{grid-template-columns: 1fr; margin-top: 24px; }
  .samples__pitch,
  .samples__docs{ padding: 24px 20px; }

  .products{ padding: 56px 0; }
  .products__grid{ grid-template-columns: repeat(2, 1fr); margin-top: 28px; }

  .inline-cta{
    flex-direction: column;
    align-items: flex-start;
    margin-top: 28px;
    padding: 24px;
    gap: 18px;
  }
  .inline-cta .btn{ width: 100%; }

  .samples{ padding: 52px 0; }
    .delivery{ padding: 36px 0; }
  .delivery__grid{ grid-template-columns: repeat(2, 1fr); margin-top: 18px; }
  .faq{ padding: 56px 0; }
  .accordion{ margin-top: 24px; }

  .contact{ padding-top: 52px; }
  .contact__inner{ padding-bottom: 44px; }
}
/* ---- Phones: 480px and below (covers 430/414/390/375) ---- */
@media (max-width: 480px){
  .wrap{ padding: 0 18px; }

  h1, h2, h3{ overflow-wrap: break-word; hyphens: auto; }

  .hazard-strip{ height: 5px; }

  .hero::before,
  .hero::after{ height: 240px; }
  .hero__grid{ padding-bottom: 36px; gap: 24px; }
  .hero__code{ font-size: 11px; letter-spacing: .08em; }
  .hero__title{ font-size: clamp(32px, 9.5vw, 44px); max-width: none; }
  .hero__lead{ font-size: 18px; }
  .hero__sub{ font-size: 14px; }
  .hero__points li{ font-size: 12.5px; }
  .hero__badge{ font-size: 11.5px; padding: 9px 14px 9px 9px; }

  .lead-card{ padding: 20px; }
  .lead-card__title{ font-size: 17px; margin-bottom: 15px; }
  .field input, .field textarea{ font-size: 16px; padding: 12px; } /* 16px avoids iOS zoom-on-focus */

  .trust-ribbon__inner{
    gap: 7px 14px;
    padding: 11px 18px;
    font-size: 10px;
  }

  .kicker{ font-size: 11px; }
  .section-num{ font-size: 12px; }
  .section-title{ font-size: clamp(23px, 7vw, 28px); }
  .section-sub{ font-size: 14.5px; }

  .barrier{ padding: 44px 0; }
  .barrier__title{
  font-size: clamp(23px, 6vw, 28px);
  hyphens: none;
}
  .barrier__gallery{ grid-template-columns: 1fr; gap: 2px; margin-top: 22px; }
  .barrier__tile--a,
  .barrier__tile--b,
  .barrier__tile--c,
  .barrier__tile--d,
  .barrier__tile--e{
    grid-column: 1 / -1;
    aspect-ratio: 4/3;
  }
  .barrier__tile figcaption{ padding: 16px; }
  .barrier__tile--a figcaption{ padding: 18px; }
  .barrier__tile figcaption h3{ font-size: 14.5px; }
  .barrier__tile--a figcaption h3{ font-size: 17px; }
  .barrier__tile figcaption p{ font-size: 11.5px; }
  .barrier__tile--a figcaption p{ font-size: 12.5px; }
  .barrier__tile::before{ font-size: 10px; padding: 2px 6px; top: 10px; left: 10px; }

  .specs{ padding: 44px 0; }
  .spec-table__title{ font-size: 12px; padding: 15px 16px; }
  .spec-table thead th{ font-size: 10px; padding: 10px 16px; }
  .spec-table tbody td{ font-size: 13px; padding: 10px 16px; }
  .spec-table td.num{ font-size: 12px; }
  .footnote{ font-size: 11px; }

   .samples{ padding: 32px 0; }
  .samples__pitch,
  .samples__docs{ padding: 20px 16px; }
  .samples__title{ font-size: clamp(22px, 6.5vw, 27px); max-width: none; }
  .samples__highlight{ font-size: 16px; }
  .doc-list__name{ font-size: 14px; }
  
  .inline-cta{ padding: 20px; margin-top: 24px; }
  .inline-cta__title{ font-size: 16px; }
  .inline-cta__text{ font-size: 13.5px; }

  .products{ padding: 44px 0; }
  .products__grid{ grid-template-columns: 1fr; margin-top: 22px; }
  .photo-slot{ aspect-ratio: 550/270; }
  .product-card__name{ font-size: 15px; padding: 15px 16px 0; }
  .product-card__specs{ padding: 10px 16px 0; }
  .product-card__specs div{ font-size: 12.5px; }
  .product-card__footer{ padding: 13px 16px; flex-wrap: wrap; }
  .product-card__price{ font-size: 15px; }

  .samples{ padding: 44px 0; }
  .samples__title{ font-size: clamp(23px, 7vw, 28px); }
  .samples__highlight{ font-size: 16.5px; }
  .samples__text{ font-size: 14px; }
  .doc-list li{ font-size: 13px; }

   .delivery{ padding: 28px 0; }
  .delivery__grid{ grid-template-columns: 1fr; }
  .delivery__item{ padding: 16px 18px; }
  .delivery__item-value{ font-size: 14px; }

  .faq{ padding: 44px 0; }
  .accordion__trigger{ font-size: 14.5px; padding: 15px 2px; gap: 12px; }
  .accordion__panel > p{ font-size: 13.5px; padding-right: 24px; }

  .contact{ padding-top: 44px; }
  .contact__inner{ padding-bottom: 40px; }
  .contact__title{ font-size: clamp(21px, 6.5vw, 26px); }
  .contact__phone{ font-size: clamp(24px, 8vw, 30px); }
  .contact__text{ font-size: 13.5px; }
.messengers{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.messenger{
  padding: 10px 13px;
  font-size: 12px;
  justify-content: center;
}
  .contact__legal{ font-size: 11px; }

  .btn{ font-size: 13.5px; padding: 14px 22px; }
  .btn--lg{ padding: 16px 32px; font-size: 14px; }
}

/* ---- Small phones: 360px and below (covers 360/320) ---- */
@media (max-width: 360px){
  .wrap{ padding: 0 14px; }

  .topbar__logo{ width: 88px; }
  .topbar__phone{ font-size: 12px; padding: 7px 10px; }

  .hero::before, .hero::after{ height: 200px; }
  .hero__title{ font-size: clamp(28px, 9vw, 36px); }
  .hero__lead{ font-size: 16.5px; }

  .lead-card{ padding: 16px; }

  .trust-ribbon__inner{ font-size: 9.5px; gap: 6px 10px; }

  .barrier__gallery{ gap: 1px; }
  .products__grid{ gap: 1px; }
  .delivery__grid{ gap: 1px; }
  .specs__tables{ gap: 1px; }

  .btn--lg{ padding: 15px 26px; font-size: 13px; }
}

/* ---- Guard against any accidental overflow on very small viewports ---- */
@media (max-width: 400px){
  .lead-form,
  .field input,
  .field textarea,
  .product-card,
  .spec-table,
  .barrier__tile{ max-width: 100%; }
}

/* ==========================================================================
   FAB — floating messenger widget
   ========================================================================== */
.fab{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.fab__toggle{
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: var(--yellow);
  border: 1.5px solid var(--yellow);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.fab__toggle:hover{ transform: translateY(-2px); }
.fab__toggle:focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; }

.fab__icon{ width: 24px; height: 24px; position: absolute; transition: opacity .15s var(--ease), transform .15s var(--ease); }
.fab__icon--close{ opacity: 0; transform: rotate(-45deg); }
.fab.is-open .fab__icon--chat{ opacity: 0; transform: rotate(45deg); }
.fab.is-open .fab__icon--close{ opacity: 1; transform: rotate(0); }

.fab__menu{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s;
}
.fab.is-open .fab__menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}

.fab__item{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 168px;
  padding: 10px 16px 10px 10px;
  background: var(--ink);
  border: 1px solid var(--line-on-dark-strong);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.fab__item svg{ width: 18px; height: 18px; flex-shrink: 0; }
.fab__item:hover{ border-color: var(--yellow); color: var(--yellow); }

@media (max-width: 480px){
  .fab{ display: none; }
}

.topbar .lang-switch{display:inline-flex;gap:10px;align-items:center;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;margin-right:16px}
.topbar .lang-switch a{color:var(--paper);opacity:.6;text-decoration:none;padding:2px 0}
.topbar .lang-switch a:hover{opacity:1}
.topbar .lang-switch a.is-active{opacity:1;font-weight:600;border-bottom:2px solid var(--yellow)}
.topbar__phone{ white-space: nowrap; }

@media (max-width: 480px){
  .topbar__actions{ gap: 8px; }
  .topbar .lang-switch{ margin-right: 0; gap: 8px; font-size: 12px; }
  .topbar__logo{ width: 88px; }
  .topbar__phone{ font-size: 12px; padding: 8px 9px; letter-spacing: 0; }
}

@media (max-width: 360px){
  .topbar__phone{ display: none; }
}