/* ===========================================================
   IMINERA — «Оцифровка лекал», прототип A: техническое / чертёжное
   Стиль: чертёжный стол технолога-конструктора, миллиметровка,
   инженерная разметка, приглушённая палитра + один акцент.
   =========================================================== */

:root{
  /* палитра: бумага/калька + графит + один акцент */
  --paper:        #F4F0E5;
  --paper-deep:   #ECE5D3;
  --paper-card:   #FBF9F3;
  --ink:          #201E1A;
  --ink-80:       rgba(32,30,26,.8);
  --ink-60:       rgba(32,30,26,.6);
  --ink-40:       rgba(32,30,26,.4);
  --ink-18:       rgba(32,30,26,.18);
  --ink-10:       rgba(32,30,26,.1);

  --grid-fine:    rgba(32,30,26,.07);
  --grid-strong:  rgba(32,30,26,.14);

  --accent:       #FF3B1F; /* декоративный / линии / крупный акцентный текст */
  --accent-solid: #D8300F; /* кнопки / текстовые ссылки — проходит контраст 4.5:1 */

  --dark:         #201E1A;
  --dark-paper:   #2A2722;

  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --header-h: 76px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color: inherit; }
.mono{ font-family: var(--mono); letter-spacing: .04em; }

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

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background: var(--ink); color: var(--paper);
  padding: 12px 20px; font-family: var(--mono); font-size: 13px;
}
.skip-link:focus{ left: 12px; top: 12px; }

/* фокус — всегда видимый индикатор, независимо от motion-preference */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--accent-solid);
  outline-offset: 3px;
}

/* ===================== layout helpers ===================== */
.section-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-3);
}
.section-kicker{
  font-size: 12px;
  color: var(--ink-60);
  margin-bottom: var(--space-2);
}
.section-kicker--dark{ color: rgba(244,240,229,.6); }
.section-title{
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.12;
  max-width: 900px;
  margin-bottom: var(--space-4);
}
.section-title--dark{ color: var(--paper); }
.br-desktop{ display:none; }

/* reveal-анимация при скролле */
.rv{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
}
.rv.on{ opacity: 1; transform: none; }

/* ===================== header ===================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  height: var(--header-h);
  background: rgba(244,240,229,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ink-18);
}
.site-header__inner{
  max-width: 1180px; margin: 0 auto; height: 100%;
  padding: 0 var(--space-3);
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-3);
}
.brand{ display:flex; align-items:center; }
.brand__logo{ height: 22px; width:auto; }

.nav{ display:none; }
.nav__list{ display:flex; gap: var(--space-4); }
.nav__link{
  position:relative;
  text-decoration:none;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-80);
  padding: 6px 2px;
}
.nav__link-text{ display:inline-block; }
.nav__link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background: var(--accent-solid);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.nav__link:hover::after,
.nav__link:focus-visible::after{ transform: scaleX(1); }

.header-phone{
  display:none;
  text-decoration:none;
  font-size: 13px;
  color: var(--ink);
  border: 1px solid var(--ink-18);
  padding: 8px 14px;
  white-space: nowrap;
}
.header-phone:hover{ border-color: var(--accent-solid); color: var(--accent-solid); }

.nav-toggle{
  width: 40px; height: 40px;
  border: 1px solid var(--ink-18);
  background: transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  cursor:pointer;
}
.nav-toggle span{ width:18px; height:1px; background: var(--ink); display:block; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-nav{
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 90;
  background: var(--paper);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: var(--space-5) var(--space-3);
}
.mobile-nav[hidden]{ display:none; }
.mobile-nav__list{ display:flex; flex-direction:column; gap: var(--space-3); }
.mobile-nav__link{
  text-decoration:none; color: var(--ink);
  font-size: clamp(28px, 8vw, 40px); font-weight:700;
}
.mobile-nav__phone{ text-decoration:none; color: var(--accent-solid); font-size: 18px; }

/* ===================== hero ===================== */
.hero{
  position: relative;
  padding-top: calc(var(--header-h) + var(--space-6));
  padding-bottom: var(--space-7);
  overflow: hidden;
}
.hero__grid-bg{
  position:absolute; inset:0; z-index:0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 7px, var(--grid-fine) 7px 8px),
    repeating-linear-gradient(90deg, transparent 0 7px, var(--grid-fine) 7px 8px),
    repeating-linear-gradient(0deg, transparent 0 39px, var(--grid-strong) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--grid-strong) 39px 40px);
}
.hero__grid-bg--dark{
  --grid-fine: rgba(244,240,229,.06);
  --grid-strong: rgba(244,240,229,.12);
}
.hero__watermark{
  position:absolute; z-index:0;
  left:50%; top: 58%;
  transform: translate(-50%,-50%);
  font-size: clamp(90px, 26vw, 340px);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
  opacity: .04;
  white-space: nowrap;
  user-select:none;
}
.hero__crosshair{
  position:absolute; z-index:1;
  font-family: var(--mono); font-size: 16px; color: var(--ink-40);
  display:none;
}
.hero__crosshair--tl{ top: calc(var(--header-h) + 18px); left: 18px; }
.hero__crosshair--tr{ top: calc(var(--header-h) + 18px); right: 18px; }
.hero__crosshair--bl{ bottom: 18px; left: 18px; }
.hero__crosshair--br{ bottom: 18px; right: 18px; }

.hero__inner{
  position: relative; z-index: 2;
  max-width: 1180px; margin: 0 auto; padding: 0 var(--space-3);
  display: grid;
  gap: var(--space-6);
}
.eyebrow{ font-size: 12px; color: var(--ink-60); margin-bottom: var(--space-3); }
.hero__title{
  font-size: clamp(40px, 8.5vw, 92px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.02em;
  margin-bottom: var(--space-3);
}
.hero__title-accent{ color: var(--accent-solid); }
.hero__subtitle{
  font-size: clamp(16px, 2vw, 19px);
  color: var(--ink-80);
  max-width: 520px;
  margin-bottom: var(--space-4);
}
.hero__cta-row{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.hero__note{ font-size: 11px; color: var(--ink-60); }

.hero__figure{ display:flex; justify-content:center; }
.pattern-svg{ width: 100%; max-width: 340px; height:auto; }
.pattern-svg__contour{ fill: var(--paper-card); stroke: var(--ink); stroke-width: 1.4; }
.pattern-svg__notch{ fill: var(--accent-solid); }
.pattern-svg__grain{ stroke: var(--accent-solid); stroke-width: 1.4; }
.pattern-svg__grain-head{ fill: var(--accent-solid); }
.pattern-svg__label{ font-size: 9px; fill: var(--ink-60); letter-spacing: .08em; }
.pattern-svg__dim{ stroke: var(--ink-60); stroke-width: 1; }
.pattern-svg__dim-tick{ stroke: var(--ink-60); stroke-width: 1; }
.pattern-svg__reg{ fill:none; stroke: var(--ink-40); stroke-width: 1; }

/* ===================== buttons ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 26px;
  font-size: 15px; font-weight: 600;
  text-decoration:none;
  border: 1px solid transparent;
  cursor:pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn--primary{
  background: var(--accent-solid); color: var(--paper);
}
.btn--primary:hover{ background: #B8280C; }
.btn--primary:active{ transform: translateY(1px); }
.btn--ghost{
  background: transparent; color: var(--ink); border-color: var(--ink-18);
}
.btn--ghost:hover{ border-color: var(--accent-solid); color: var(--accent-solid); }
.btn[disabled]{ opacity:.6; cursor: progress; }

/* ===================== problem ===================== */
.problem{ border-top: 1px solid var(--ink-18); }
.problem__lead{
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ink-80);
  max-width: 680px;
  margin-bottom: var(--space-5);
}
.problem__lead em{ color: var(--accent-solid); font-style: normal; }

.compare{
  border: 1px solid var(--ink-18);
  background: var(--paper-card);
  padding: var(--space-3);
  margin-bottom: var(--space-6);
}
.compare__row{
  display:grid;
  grid-template-columns: 90px 1fr 80px;
  align-items:center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.compare__row + .compare__row{ border-top: 1px solid var(--ink-10); }
.compare__label{ font-size: 11px; color: var(--ink-60); }
.compare__svg{ width:100%; height: 24px; display:block; }
.compare__svg line{ stroke: var(--ink-60); stroke-width: 2; }
.compare__precise{ stroke: var(--accent-solid) !important; }
.compare__value{ font-size: 13px; text-align:right; color: var(--ink-60); }
.compare__value--accent{ color: var(--accent-solid); font-weight:700; }

.solution-list{ display:grid; gap: var(--space-4); }
.solution-list li{ display:flex; gap: var(--space-3); align-items:flex-start; }
.solution-list__num{ font-size: 12px; color: var(--accent-solid); padding-top: 4px; }
.solution-list h3{ font-size: 19px; margin-bottom: 4px; }
.solution-list p{ color: var(--ink-60); font-size: 15px; }

/* ===================== services ===================== */
.services{ background: var(--paper-deep); border-top: 1px solid var(--ink-18); }
.cards{ display:grid; gap: var(--space-3); }
.card{
  background: var(--paper-card);
  border: 1px solid var(--ink-18);
  padding: var(--space-4);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.card__num{ font-size: 12px; color: var(--ink-40); margin-bottom: var(--space-2); }
.card__title{ font-size: 22px; margin-bottom: var(--space-2); line-height:1.2; }
.card__text{ color: var(--ink-60); font-size: 15px; margin-bottom: var(--space-3); }
.card__meta{ font-size: 11px; color: var(--accent-solid); border-top: 1px dashed var(--ink-18); padding-top: var(--space-2); }

/* ===================== why ===================== */
.why{ border-top: 1px solid var(--ink-18); }
.why-list__row{
  display:grid; grid-template-columns: 56px 1fr; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--ink-18);
}
.why-list__row:last-child{ border-bottom: 1px solid var(--ink-18); }
.why-list__num{ font-size: 13px; color: var(--accent-solid); }
.why-list__row p{ font-size: clamp(17px, 2.2vw, 22px); font-weight:500; line-height:1.35; }

/* ===================== pricing ===================== */
.pricing{ background: var(--paper-deep); border-top: 1px solid var(--ink-18); }
.price-table{
  width:100%; border-collapse: collapse;
  background: var(--paper-card);
  border: 1px solid var(--ink-18);
  margin-bottom: var(--space-2);
  font-size: 15px;
}
.price-table thead th{
  text-align:left; font-size: 11px; color: var(--ink-60); font-weight:500;
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--ink-18);
}
.price-table td{
  padding: 14px var(--space-2);
  border-bottom: 1px solid var(--ink-10);
}
.price-table tbody tr:last-child td{ border-bottom:none; }
.price-table__price{ text-align:right; font-weight:700; color: var(--accent-solid); }
.pricing__note{ font-size: 11px; color: var(--ink-60); }

/* ===================== requirements ===================== */
.requirements{ border-top: 1px solid var(--ink-18); }
.checklist{ display:grid; gap: var(--space-2); margin-bottom: var(--space-4); max-width: 620px; }
.checklist li{
  position:relative;
  padding-left: 32px;
  font-size: 16px;
  color: var(--ink-80);
}
.checklist li::before{
  content:"";
  position:absolute; left:0; top: 3px;
  width: 16px; height:16px;
  border: 1px solid var(--ink-40);
}
.checklist li::after{
  content:"";
  position:absolute; left: 4px; top: 7px;
  width: 8px; height:4px;
  border-left: 2px solid var(--accent-solid);
  border-bottom: 2px solid var(--accent-solid);
  transform: rotate(-45deg);
}

/* ===================== process ===================== */
.process{ background: var(--paper-deep); border-top: 1px solid var(--ink-18); }
.steps{ display:grid; gap: var(--space-4); counter-reset: step; }
.steps__item{ border-top: 1px solid var(--ink-18); padding-top: var(--space-3); }
.steps__num{ font-size: 13px; color: var(--accent-solid); margin-bottom: var(--space-1); }
.steps__item h3{ font-size: 19px; margin-bottom: 6px; }
.steps__item p{ color: var(--ink-60); font-size: 15px; }

/* ===================== lead / CTA ===================== */
.lead{
  position: relative;
  background: var(--dark);
  color: var(--paper);
  overflow: hidden;
}
.lead .section-inner{ position: relative; z-index: 1; }
.lead__text{
  color: rgba(244,240,229,.7);
  font-size: 17px;
  max-width: 520px;
  margin-bottom: var(--space-5);
}

.hp-field{
  position:absolute; left:-9999px; top:-9999px;
  width:1px; height:1px; overflow:hidden;
}

.lead-form{
  display:grid;
  gap: var(--space-3);
  max-width: 640px;
}
.lead-form__row{ display:flex; flex-direction:column; gap: 6px; }
.lead-form label{
  font-family: var(--mono); font-size: 11px;
  color: rgba(244,240,229,.55);
  letter-spacing: .06em;
}
.lead-form input,
.lead-form textarea{
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(244,240,229,.3);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  padding: 10px 2px;
  resize: vertical;
}
.lead-form input:focus,
.lead-form textarea:focus{
  outline:none;
  border-bottom-color: var(--accent);
}
.lead-form__actions{
  display:flex; align-items:center; gap: var(--space-3); flex-wrap:wrap;
  margin-top: var(--space-2);
}
.lead-form__status{ font-size: 12px; color: rgba(244,240,229,.7); }
.lead-form__status[data-state="ok"]{ color: #7CDB8A; }
.lead-form__status[data-state="error"]{ color: var(--accent); }

/* ===================== footer ===================== */
.site-footer{ background: var(--dark); color: var(--paper); border-top: 1px solid rgba(244,240,229,.14); }
.site-footer__inner{
  display:grid; gap: var(--space-3);
  padding-top: var(--space-4); padding-bottom: var(--space-4);
}
.site-footer__logo{ height: 20px; filter: invert(1); }
.site-footer__col{ font-size: 11px; color: rgba(244,240,229,.55); display:grid; gap:6px; }
.site-footer__col a{ color: var(--paper); text-decoration:none; font-size: 13px; }
.site-footer__col a:hover{ color: var(--accent); }

/* ===================== reduced motion ===================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; transition:none; }
  .nav__link-text{ filter:none !important; }
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===================== breakpoints ===================== */
@media (min-width: 640px){
  .compare__row{ grid-template-columns: 110px 1fr 100px; }
  .cards{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px){
  .br-desktop{ display:inline; }
  .header-phone{ display:inline-flex; align-items:center; }
  .hero__inner{ grid-template-columns: 1.15fr .85fr; align-items:center; }
  .solution-list{ grid-template-columns: repeat(3, 1fr); }
  .why-list__row{ grid-template-columns: 80px 1fr; }
  .site-footer__inner{ grid-template-columns: auto 1fr 1fr; align-items:start; }
  .steps{ grid-template-columns: repeat(4, 1fr); }
  .hero__crosshair{ display:block; }
}

@media (min-width: 1024px){
  .nav{ display:block; }
  .nav-toggle{ display:none; }
  .cards{ grid-template-columns: repeat(3, 1fr); }
  .section-title{ font-size: clamp(34px, 3.6vw, 52px); }
}

@media (min-width: 1280px){
  .section-inner{ padding-left: 0; padding-right: 0; }
}