/* ==========================================================================
   Element 63 — лазерная гравировка и маркировка металла
   Палитра взята у материала: анодированный алюминий, чёрный анод, след лазера.
   ========================================================================== */

/* ---------- Шрифты ---------- */
@font-face{font-family:Oswald;font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/Oswald-600-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Oswald;font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/Oswald-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Oswald;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/Oswald-700-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Oswald;font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/Oswald-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/GolosText-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/GolosText-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/GolosText-500-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/GolosText-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/IBMPlexMono-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/IBMPlexMono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/IBMPlexMono-500-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/IBMPlexMono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Токены ---------- */
:root{
  /* поверхности */
  --alu:        #e6e3dd;   /* анодированный алюминий, основной фон */
  --alu-deep:   #dcd8d0;   /* чередующаяся секция */
  --panel:      #f3f2ee;   /* светлая панель, карточка */
  --graphite:   #15181a;   /* чёрный анод, тёмные секции */
  --graphite-2: #1f2427;

  /* типографика */
  --ink:        #14171a;
  --ink-2:      #4c5257;
  /* #5a5f65, а не светлее: на самом тёмном светлом фоне (--alu-deep)
     даёт 4.53:1 — минимум WCAG AA для мелкого текста вроде .eyebrow */
  --steel:      #5a5f65;
  --on-dark:    #eceae5;
  --on-dark-2:  #9aa0a5;

  /* линии */
  --line:       #c8c4bb;
  --line-soft:  #d6d2ca;
  --line-dark:  #333a3e;

  /* след лазера */
  --laser:      #dd3f14;
  --laser-hot:  #ff7a3d;

  --ff-display: Oswald, 'Arial Narrow', system-ui, sans-serif;
  --ff-body:    'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --sec-y: clamp(4rem, 9vw, 7.5rem);
  --r: 3px;
}

/* ---------- Сброс ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--alu);
  color:var(--ink);
  font:400 1.0625rem/1.65 var(--ff-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,svg{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--ff-display);font-weight:700;text-transform:uppercase;line-height:1.02}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
table{border-collapse:collapse;width:100%}

.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:where(a,button,summary,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--laser);
  outline-offset:3px;
  border-radius:2px;
}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--graphite);color:#fff;padding:.75rem 1.25rem}
.skip:focus{left:0}

.wrap{width:min(1200px,100% - var(--gut)*2);margin-inline:auto}
.wrap--narrow{width:min(820px,100% - var(--gut)*2)}

/* ---------- Общие элементы типографики ---------- */
.eyebrow{
  font:500 .7rem/1 var(--ff-mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:1.1rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
.eyebrow::before{
  content:"";
  width:1.6rem;
  height:2px;
  background:var(--laser);
  flex:none;
}
.lead{
  font-size:clamp(1.05rem,1.6vw,1.2rem);
  line-height:1.6;
  color:var(--ink-2);
  max-width:52ch;
}

/* ---------- Кнопки ---------- */
.btn{
  --btn-bg:var(--graphite);
  --btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;
  padding:.95rem 1.6rem;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font:600 .82rem/1 var(--ff-display);
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--btn-bg);
  border-radius:var(--r);
  cursor:pointer;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover{--btn-bg:var(--laser);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--line)}
.btn--ghost:hover{--btn-bg:transparent;--btn-fg:var(--laser);border-color:var(--laser)}
.btn--sm{padding:.7rem 1.1rem;font-size:.75rem}
.btn--wide{width:100%}

/* ==========================================================================
   ШАПКА
   ========================================================================== */
.hdr{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--alu) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.hdr__in{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);min-height:68px}

.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brand__mark{
  width:22px;height:22px;flex:none;border-radius:2px;
  background:
    radial-gradient(circle at 50% 50%, var(--laser-hot) 0 15%, transparent 16%),
    linear-gradient(150deg,#f0eee9 0%,#c3bfb6 45%,#e8e5df 55%,#b8b3a9 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
  position:relative;
}
.brand__txt{
  font:700 1.06rem/1 var(--ff-display);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.brand__num{color:var(--laser);margin-left:.22em}

.nav{display:flex;gap:clamp(.9rem,2vw,1.7rem);margin-inline-start:auto}
.nav a{
  font:500 .8rem/1 var(--ff-mono);
  letter-spacing:.05em;
  text-decoration:none;
  color:var(--ink-2);
  padding:.4rem 0;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav a:hover,.nav a[aria-current=true]{color:var(--ink);border-bottom-color:var(--laser)}

.hdr__cta{display:flex;align-items:center;gap:1rem;margin-inline-start:clamp(.5rem,2vw,1.5rem)}
.tel{
  font:600 .95rem/1 var(--ff-display);
  letter-spacing:.03em;
  text-decoration:none;
  white-space:nowrap;
}
.tel:hover{color:var(--laser)}

.burger{display:none;width:42px;height:42px;background:none;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;margin-inline-start:auto;position:relative}
.burger span,.burger span::before,.burger span::after{
  position:absolute;left:50%;translate:-50% 0;
  width:18px;height:1.5px;background:var(--ink);content:"";transition:.2s ease;
}
.burger span{top:50%;margin-top:-.75px}
.burger span::before{top:-6px;left:0;translate:0 0}
.burger span::after{top:6px;left:0;translate:0 0}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;rotate:45deg}
.burger[aria-expanded=true] span::after{top:0;rotate:-45deg}

/* ==========================================================================
   ГЕРОЙ — заголовок слева, шильд компании справа
   ========================================================================== */
.hero{
  position:relative;
  padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4rem);
  overflow:hidden;
}
/* фон — сетка чертежа */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(21,24,26,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,24,26,.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(21,24,26,.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,24,26,.11) 1px, transparent 1px);
  background-size:12px 12px,12px 12px,60px 60px,60px 60px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 40%, #000 0%, transparent 72%);
  mask-image:radial-gradient(120% 90% at 78% 40%, #000 0%, transparent 72%);
}
.hero__in{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}
.hero h1{
  font-size:clamp(2.45rem,6.4vw,5.1rem);
  letter-spacing:-.005em;
  line-height:.94;
  margin-bottom:1.5rem;
}
.hero__btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero__note{
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--line-soft);
  font-size:.94rem;
  color:var(--steel);
  max-width:44ch;
}

/* ---------- Сигнатура: шильд ---------- */
.hero__plate{display:flex;justify-content:center}
.plate{
  --engrave:#1b1e20;
  position:relative;
  margin:0;
  width:min(100%,440px);
  padding:clamp(1.4rem,2.6vw,1.9rem);
  border-radius:10px;
  /* шлифованный анодированный алюминий */
  background:
    repeating-linear-gradient(96deg, rgba(255,255,255,.5) 0 1px, rgba(0,0,0,.028) 1px 3px),
    linear-gradient(148deg,#f4f2ee 0%,#cfcbc2 32%,#eae7e1 52%,#c2bdb3 76%,#e2ded7 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 0 0 1px rgba(21,24,26,.17),
    0 2px 2px rgba(21,24,26,.05),
    0 22px 48px -18px rgba(21,24,26,.42);
  overflow:hidden;
}
/* крепёжные отверстия */
.plate__hole{
  position:absolute;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #6f6b64 0%, #2b2926 60%, #4a4741 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.55), inset 0 1px 2px rgba(0,0,0,.7);
}
.plate__hole--tl{top:13px;left:13px}
.plate__hole--tr{top:13px;right:13px}
.plate__hole--bl{bottom:13px;left:13px}
.plate__hole--br{bottom:13px;right:13px}

/* луч, который «выжигает» гравировку */
.plate__beam{
  position:absolute;left:0;right:0;top:0;height:24px;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(255,122,61,.16) 45%, var(--laser-hot) 78%, transparent 100%);
  filter:blur(.4px);
  opacity:0;
}

.plate__body{position:relative;z-index:1;padding-inline:.35rem}
.plate__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:.7rem;
}
.plate__brand{
  font:700 clamp(1.35rem,2.6vw,1.75rem)/1 var(--ff-display);
  letter-spacing:.05em;
  color:var(--engrave);
}
.plate__eac{
  font:700 .78rem/1 var(--ff-display);
  letter-spacing:.14em;
  color:var(--engrave);
  border:1.5px solid var(--engrave);
  padding:.32rem .45rem .28rem;
  border-radius:2px;
}
.plate__title{
  font:400 .74rem/1.35 var(--ff-mono);
  letter-spacing:.03em;
  color:#3b3f42;
  padding-bottom:.85rem;
  margin-bottom:.85rem;
  border-bottom:1.5px solid rgba(27,30,32,.75);
}
.plate__spec{display:grid;gap:.02rem}
.plate__spec > div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:.6rem;
  padding:.42rem 0;
  border-bottom:1px dotted rgba(27,30,32,.32);
}
.plate__spec dt{
  font:400 .72rem/1.2 var(--ff-mono);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#4a4e51;
}
.plate__spec dd{
  font:600 .98rem/1.2 var(--ff-display);
  letter-spacing:.03em;
  color:var(--engrave);
  text-align:right;
  white-space:nowrap;
}
.plate__foot{
  margin-top:1rem;
  font:400 .69rem/1.3 var(--ff-mono);
  letter-spacing:.02em;
  color:#4a4e51;
  text-align:center;
}

/* анимация гравировки */
@media (prefers-reduced-motion:no-preference){
  .plate__beam{animation:beam 1s cubic-bezier(.4,0,.2,1) .1s 1 forwards}
  .plate__head,.plate__title,.plate__spec > div,.plate__foot{opacity:0;animation:burn .34s ease forwards}
  .plate__head{animation-delay:.2s}
  .plate__title{animation-delay:.3s}
  .plate__spec > div:nth-child(1){animation-delay:.4s}
  .plate__spec > div:nth-child(2){animation-delay:.47s}
  .plate__spec > div:nth-child(3){animation-delay:.54s}
  .plate__spec > div:nth-child(4){animation-delay:.61s}
  .plate__spec > div:nth-child(5){animation-delay:.68s}
  .plate__foot{animation-delay:.78s}
}
/* top:100% — это ровно высота шильда, независимо от вёрстки */
@keyframes beam{
  0%{opacity:0;top:-24px}
  14%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;top:100%}
}
@keyframes burn{
  0%{opacity:0;filter:blur(2px)}
  100%{opacity:1;filter:blur(0)}
}

/* ==========================================================================
   СЕКЦИИ
   ========================================================================== */
.sec{padding-block:var(--sec-y)}
.sec--alt{background:var(--alu-deep)}
.sec--dark{background:var(--graphite);color:var(--on-dark)}
.sec--dark .eyebrow{color:var(--on-dark-2)}
.sec--dark .lead{color:var(--on-dark-2)}

.sec__head{margin-bottom:clamp(2.25rem,4vw,3.5rem);max-width:56ch}
.sec__head h2{font-size:clamp(1.85rem,3.9vw,3rem);letter-spacing:-.005em}
.sec__sub{margin-top:1rem;color:var(--ink-2);max-width:52ch}
.sec--dark .sec__sub{color:var(--on-dark-2)}

/* ---------- Карточки услуг ---------- */
/* Сетка из хайрлайнов: границы карточек перекрываются, пустая ячейка
   в последнем ряду не превращается в серый прямоугольник. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0}
.card{
  background:var(--panel);
  border:1px solid var(--line-soft);
  margin:0 -1px -1px 0;
  padding:clamp(1.6rem,2.6vw,2.2rem);
  display:flex;flex-direction:column;
}
.card h3{font-size:1.32rem;letter-spacing:.01em;margin-bottom:.9rem}
.card p{color:var(--ink-2);font-size:.98rem}
.ticks{margin-top:auto;padding-top:1.5rem;display:grid;gap:.55rem}
.ticks li{
  position:relative;
  padding-left:1.35rem;
  font:500 .78rem/1.4 var(--ff-mono);
  letter-spacing:.01em;
  color:var(--ink);
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:7px;height:7px;background:var(--laser);
}

/* ---------- Материалы: таблица + ограничения ---------- */
.specs{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}

.spec-table{font-size:.94rem}
.spec-table th,.spec-table td{text-align:left;padding:1rem .9rem;vertical-align:top;border-bottom:1px solid var(--line-dark)}
.spec-table thead th{
  font:500 .68rem/1.3 var(--ff-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-dark-2);
  padding-block:0 .8rem;
  border-bottom:1px solid var(--laser);
}
.spec-table tbody th{font-weight:500;font-family:var(--ff-body);color:var(--on-dark);width:34%}
.spec-table td{color:var(--on-dark-2)}
.spec-table tbody tr:last-child th,.spec-table tbody tr:last-child td{border-bottom:0}
.spec-table th:first-child,.spec-table td:first-child{padding-left:0}

.limits{background:var(--graphite-2);border:1px solid var(--line-dark);border-radius:var(--r);padding:clamp(1.5rem,2.5vw,2rem)}
.limits h3{font-size:1.1rem;letter-spacing:.04em;margin-bottom:1.25rem}
.limits dl{display:grid;gap:0}
.limits dl > div{padding:.85rem 0;border-bottom:1px dotted var(--line-dark)}
.limits dt{font:400 .68rem/1.2 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:.35rem}
.limits dd{font:600 1.02rem/1.3 var(--ff-display);letter-spacing:.02em;color:var(--on-dark)}
.limits__note{margin-top:1.25rem;font-size:.88rem;line-height:1.55;color:var(--on-dark-2)}

/* ---------- Шаги ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
  counter-reset:step;
}
.step{position:relative;padding-top:1.6rem;border-top:2px solid var(--graphite)}
.step__n{
  display:block;
  font:500 .72rem/1 var(--ff-mono);
  letter-spacing:.16em;
  color:var(--laser);
  margin-bottom:1.1rem;
}
.step h3{font-size:1.2rem;letter-spacing:.02em;margin-bottom:.7rem}
.step p{color:var(--ink-2);font-size:.96rem}

/* ---------- Галерея ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:clamp(.8rem,1.6vw,1.15rem)}
.gallery__item{display:block}
.gallery__btn{
  display:block;width:100%;padding:0;background:none;border:0;cursor:zoom-in;text-align:left;
}
.gallery__fig{
  display:block;position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--panel);
  box-shadow:0 0 0 1px rgba(21,24,26,.12);
  transition:box-shadow .2s ease, transform .2s ease;
}
.gallery__fig picture{display:block;aspect-ratio:4/3}
.gallery__fig img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.6,.2,1), filter .3s ease}
.gallery__cap{
  position:absolute;inset:auto 0 0 0;
  padding:1.9rem .9rem .75rem;
  font:500 .74rem/1.35 var(--ff-mono);
  letter-spacing:.02em;
  color:#fff;
  background:linear-gradient(to top, rgba(10,12,13,.88) 12%, transparent 100%);
  opacity:0;
  translate:0 6px;
  transition:opacity .22s ease, translate .22s ease;
}
.gallery__btn:hover .gallery__fig,
.gallery__btn:focus-visible .gallery__fig{box-shadow:0 0 0 1px var(--laser), 0 14px 30px -14px rgba(21,24,26,.5)}
.gallery__btn:hover img,
.gallery__btn:focus-visible img{transform:scale(1.045)}
.gallery__btn:hover .gallery__cap,
.gallery__btn:focus-visible .gallery__cap{opacity:1;translate:0 0}

/* На тач-устройствах наведения нет — иначе подпись недостижима и галерея
   превращается в набор фотографий без объяснений. Показываем всегда. */
@media (hover:none){
  .gallery__cap{opacity:1;translate:0 0}
}

/* ---------- Причины ---------- */
.reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.reason{padding-left:1.5rem;border-left:2px solid var(--laser)}
.reason h3{font-size:1.18rem;letter-spacing:.02em;margin-bottom:.7rem}
.reason p{color:var(--ink-2);font-size:.96rem}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  display:flex;align-items:flex-start;gap:1rem;justify-content:space-between;
  padding:1.25rem 0;
  cursor:pointer;
  list-style:none;
  font:600 clamp(1.02rem,1.7vw,1.18rem)/1.35 var(--ff-display);
  letter-spacing:.015em;
  text-transform:uppercase;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;width:14px;height:14px;margin-top:.28em;
  background:
    linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat;
  transition:rotate .22s ease, background-image .2s ease;
}
.qa[open] summary::after{
  rotate:45deg;
  background:
    linear-gradient(var(--laser),var(--laser)) center/14px 2px no-repeat,
    linear-gradient(var(--laser),var(--laser)) center/2px 14px no-repeat;
}
.qa summary:hover{color:var(--laser)}
.qa__body{padding:0 0 1.4rem;max-width:64ch}
.qa__body p{color:var(--ink-2);font-size:.99rem}

/* ---------- Заявка ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.contact h2{font-size:clamp(1.85rem,3.9vw,3rem);margin-bottom:1.25rem}
.contact__note{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line-dark);font-size:.94rem;line-height:1.6;color:var(--on-dark-2);max-width:46ch}

/* Карточка контактов — на месте бывшей формы заявки */
.contact__card{background:var(--graphite-2);border:1px solid var(--line-dark);border-radius:var(--r);padding:clamp(1.5rem,3vw,2.25rem)}

.contacts{display:grid;gap:0;border-top:1px solid var(--line-dark)}
.contacts li{display:grid;gap:.3rem;padding:1rem 0;border-bottom:1px solid var(--line-dark)}
.contacts__label{font:400 .68rem/1.2 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-2)}
.contacts__val{font:600 1.25rem/1.2 var(--ff-display);letter-spacing:.02em;color:var(--on-dark);text-decoration:none}
a.contacts__val:hover{color:var(--laser-hot)}

.msg-btns{display:grid;gap:.75rem;margin-top:1.75rem}
.sec--dark .btn--ghost{--btn-fg:var(--on-dark);border-color:var(--line-dark)}
.sec--dark .btn--ghost:hover{--btn-fg:var(--laser-hot);border-color:var(--laser-hot)}

/* ---------- Подвал ---------- */
.ftr{background:var(--graphite);color:var(--on-dark-2);border-top:1px solid var(--line-dark);padding-block:clamp(2.5rem,5vw,3.5rem)}
.ftr__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem clamp(2rem,4vw,3.5rem);align-items:start}
.ftr__brand{display:flex;gap:.8rem;align-items:flex-start}
.ftr__name{font:700 1.06rem/1 var(--ff-display);letter-spacing:.04em;text-transform:uppercase;color:var(--on-dark);margin-bottom:.5rem}
.ftr__desc{font-size:.88rem;line-height:1.5;max-width:38ch}
.ftr__contacts{margin-top:1rem;display:grid;gap:.4rem}
.ftr__contacts a{font:500 .88rem/1.3 var(--ff-display);letter-spacing:.02em;text-decoration:none;color:var(--on-dark)}
.ftr__contacts a:hover{color:var(--laser-hot)}
.ftr__nav{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-content:start}
.ftr__nav a{font:400 .8rem/1.2 var(--ff-mono);text-decoration:none;color:var(--on-dark-2)}
.ftr__nav a:hover{color:var(--laser-hot)}
.ftr__copy{grid-column:1/-1;padding-top:1.5rem;border-top:1px solid var(--line-dark);font:400 .76rem/1.2 var(--ff-mono);letter-spacing:.06em}

/* ---------- Лайтбокс ---------- */
.lb{
  width:min(1100px,94vw);max-height:92vh;
  padding:0;border:0;background:transparent;overflow:visible;
  color:#fff;
}
.lb::backdrop{background:rgba(12,14,15,.93)}
.lb__fig{margin:0;display:grid;gap:.9rem;justify-items:center}
.lb__img{max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:var(--r);background:#1b1e20}
.lb__cap{font:500 .8rem/1.4 var(--ff-mono);letter-spacing:.04em;color:#cfd3d6;text-align:center}
.lb__close,.lb__nav{
  position:absolute;z-index:2;
  background:rgba(21,24,26,.72);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;border-radius:var(--r);
  cursor:pointer;line-height:1;
}
.lb__close{top:-3rem;right:0;width:2.4rem;height:2.4rem;font-size:1.5rem}
.lb__nav{top:50%;translate:0 -50%;width:2.8rem;height:3.6rem;font-size:2rem}
.lb__nav--prev{left:-3.4rem}
.lb__nav--next{right:-3.4rem}
.lb__close:hover,.lb__nav:hover{background:var(--laser);border-color:var(--laser)}

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width:1080px){
  .lb__nav--prev{left:.4rem}
  .lb__nav--next{right:.4rem}
  .lb__close{top:.4rem;right:.4rem}
}
@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:2.75rem}
  .hero__plate{justify-content:flex-start}
  .plate{width:min(100%,460px)}
  .specs{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav{
    position:fixed;inset:68px 0 auto 0;
    flex-direction:column;gap:0;
    background:var(--alu);
    border-bottom:1px solid var(--line);
    padding:.5rem var(--gut) 1.25rem;
    margin:0;
    display:none;
  }
  .nav[data-open=true]{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--line-soft);font-size:.95rem}
  .nav a:hover{border-bottom-color:var(--line-soft)}
  .burger{display:block;order:3;margin-inline-start:.75rem}
  .hdr__cta{order:2;margin-inline-start:auto}
  .hdr__cta .btn{display:none}
}
@media (max-width:640px){
  .hdr__in{min-height:60px}
  .nav{inset-block-start:60px}
  .tel{font-size:.88rem}
  .spec-table{font-size:.9rem}
  .spec-table thead{display:none}
  .spec-table tbody tr{display:grid;gap:.2rem;padding:1rem 0;border-bottom:1px solid var(--line-dark)}
  .spec-table tbody th,.spec-table tbody td{border:0;padding:0;width:auto}
  .spec-table tbody th{font-weight:600;margin-bottom:.3rem}
  .spec-table tbody td{font-size:.9rem}
  /* таблица лежит в тёмной секции — светлый токен, а не --steel */
  .spec-table tbody td::before{
    content:attr(data-l) " — ";
    font:500 .68rem/1.2 var(--ff-mono);
    letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2);
  }
  .ftr__in{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .plate__head,.plate__title,.plate__spec > div,.plate__foot{opacity:1}
  .plate__beam{display:none}
}

html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media print{
  .hdr,.burger,.lb,.hero__btns,.msg-btns{display:none}
  body{background:#fff;color:#000}
  .sec--dark{background:#fff;color:#000}
}