/* =========================================================================
   AVatar Сайты — Направление C «Формуляр Ф-03»
   ДНК 03 · инженерный формуляр · cold · mono-accent · brutal-grid · light
   ========================================================================= */

/* ---------- Шрифты: self-hosted, кириллица + латиница раздельно ---------- */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/unbounded-cyrillic-600.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/unbounded-cyrillic-ext-600.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/unbounded-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191-2193,U+2212,U+2215;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/unbounded-cyrillic-700.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/unbounded-cyrillic-ext-700.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/unbounded-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191-2193,U+2212,U+2215;}

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plexsans-cyrillic-400.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plexsans-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191-2193,U+2212,U+2215;}
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/plexsans-cyrillic-400-italic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/plexsans-latin-400-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191-2193,U+2212,U+2215;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/plexsans-cyrillic-500.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/plexsans-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191-2193,U+2212,U+2215;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/plexsans-cyrillic-700.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/plexsans-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191-2193,U+2212,U+2215;}

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/plexmono-cyrillic-500.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('fonts/plexmono-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191-2193,U+2212,U+2215;}

/* ---------------------------- Токены ---------------------------- */
:root{
  --paper:#EDF0F4;      /* 60% фон-лист (холодный near-white) */
  --panel:#E3E7EC;      /* 30% поверхности ячеек */
  --line:#C3CAD3;       /* hairline-сетка / разметка */
  --ink:#181A1E;        /* текст-основа (холодный почти-чёрный) */
  --slate:#4C5563;      /* моно-метки, вторичный текст */
  --signal:#C8371B;     /* 10% акцент-маркер (сигнальный оранжево-красный) */
  --paper-dim:#9BA3AE;  /* вторичный текст на инверт-штампе */

  --ff-display:'Unbounded',sans-serif;
  --ff-body:'IBM Plex Sans',system-ui,sans-serif;
  --ff-mono:'IBM Plex Mono',ui-monospace,monospace;

  --fs-micro:.68rem;   /* ~11.6px краевые аннотации */
  --fs-mono:.8rem;     /* ~13.6px метки */
  --fs-body:1rem;      /* 17px */
  --fs-lead:1.25rem;   /* ~21px */
  --fs-h3:1.5625rem;   /* ~26.5px */

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:6rem;

  --wrap:1600px;
  --gut:clamp(1rem,3vw,2.5rem);
  --tl:.1em; /* трекинг капс-меток */
}

/* ---------------------------- Сброс ---------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:106.25%;-webkit-text-size-adjust:100%}     /* база 17px */
body{
  font-family:var(--ff-body);font-size:var(--fs-body);line-height:1.6;
  color:var(--ink);background:var(--paper);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--signal);color:var(--paper)}

/* фокус-кольцо в акценте (нетекстовый контраст signal/paper 4.57:1) */
:where(a,button,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--signal);outline-offset:2px;
}

.skip-link{position:absolute;left:var(--s2);top:-3rem;z-index:20;
  background:var(--ink);color:var(--paper);font-family:var(--ff-mono);
  font-size:var(--fs-mono);letter-spacing:var(--tl);text-transform:uppercase;
  padding:.5rem .75rem;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:var(--s2)}

/* ---------------------------- Лист / сетка ---------------------------- */
.sheet{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.section-tag{
  font-family:var(--ff-mono);font-size:var(--fs-mono);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--tl);color:var(--slate);
  display:flex;align-items:baseline;gap:.5rem;margin-bottom:var(--s3);
}
.section-tag .num{color:var(--signal)}
.section-tag.inv{color:var(--paper-dim)}
.section-tag.inv .num{color:var(--paper-dim)}

.display{font-family:var(--ff-display);font-weight:700;line-height:1.06;
  letter-spacing:-.02em;text-wrap:balance}

/* ---------------------------- Кнопки ---------------------------- */
.btn{
  --pad-y:.85rem;--pad-x:1.35rem;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:2.75rem;padding:var(--pad-y) var(--pad-x);
  font-family:var(--ff-mono);font-size:var(--fs-mono);font-weight:500;
  text-transform:uppercase;letter-spacing:var(--tl);text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform .14s ease,background-color .14s ease,color .14s ease,border-color .14s ease;
}
.btn:active{transform:translateY(1px)}
.btn-sm{--pad-y:.6rem;--pad-x:1rem;min-height:2.25rem}
.btn-block{width:100%}

.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{background:#0E0F12;border-color:#0E0F12}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}

.btn-invert{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-invert:hover{background:#F7F9FB;border-color:#F7F9FB}

/* ---------------------------- Шапка ---------------------------- */
.site-head{padding-top:var(--s3);padding-bottom:0}
/* mobile-first: brand слева, компактная кнопка справа; nav-ссылки прячем до 760 */
.head-row{display:flex;align-items:center;gap:var(--s1) var(--s3);flex-wrap:wrap;
  justify-content:space-between;
  padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:baseline;gap:.4rem;text-decoration:none;
  font-family:var(--ff-display);font-weight:700;letter-spacing:-.01em;min-width:0}
.brand-mark{font-size:1.1rem}
.brand-sub{font-family:var(--ff-mono);font-weight:500;font-size:var(--fs-mono);
  color:var(--signal);letter-spacing:.04em;white-space:nowrap}
.head-nav{display:none;gap:var(--s3)}
.head-nav a{font-family:var(--ff-mono);font-size:var(--fs-mono);
  text-transform:uppercase;letter-spacing:var(--tl);color:var(--slate);
  text-decoration:none;white-space:nowrap;transition:color .14s ease}
.head-nav a:hover{color:var(--ink)}
.head-row .btn{white-space:nowrap;flex:none}

.mono-belt{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;
  font-family:var(--ff-mono);font-size:var(--fs-micro);color:var(--slate);
  text-transform:uppercase;letter-spacing:.08em;padding-block:.6rem}
.belt-mid{color:var(--signal)}

/* ---------------------------- Hero ---------------------------- */
.hero{position:relative;padding-top:var(--s6);padding-bottom:var(--s7);overflow:hidden}

/* видимая колоночная разметка листа */
.grid-lines{position:absolute;inset:0;z-index:0;pointer-events:none;transform-origin:left;
  background-image:repeating-linear-gradient(to right,
    transparent 0,transparent calc(100%/12 - 1px),
    var(--line) calc(100%/12 - 1px),var(--line) calc(100%/12));
  opacity:.6;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);
  mask-image:linear-gradient(to bottom,#000 60%,transparent)}

.reg-cross{position:absolute;z-index:1;font-family:var(--ff-mono);font-weight:500;
  font-size:1.1rem;line-height:1;color:var(--signal);user-select:none}
.reg-tl{top:var(--s3);left:calc(var(--gut) - .35rem)}
.reg-tr{top:var(--s3);right:calc(var(--gut) - .35rem)}
.reg-bl{bottom:var(--s3);left:calc(var(--gut) - .35rem)}

.hero-grid{position:relative;z-index:2;display:grid;gap:var(--s5);
  grid-template-columns:1fr}
.hero-main{max-width:20ch}
h1.display{font-size:clamp(2.6rem,8vw,5rem);margin-block:var(--s2) var(--s3)}
.hero-main .lead{max-width:60ch}
.sig-word{background:transparent;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--signal);
  text-decoration-thickness:.09em;text-underline-offset:.14em}

.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink)}
.lead em{font-style:italic;color:var(--slate)}

.cta-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}

.hero-spec{border-top:1px solid var(--line);padding-top:var(--s3)}
.spec-head{font-family:var(--ff-mono);font-size:var(--fs-micro);color:var(--slate);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--s2)}
.spec-list{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.spec-item{background:var(--paper);display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--s2);padding:.7rem 0}
.spec-item dt{font-family:var(--ff-mono);font-size:var(--fs-mono);color:var(--slate);
  text-transform:uppercase;letter-spacing:.06em}
.spec-item dd{font-weight:500;text-align:right}
.qty{font-family:var(--ff-display);font-weight:700;color:var(--signal);
  font-size:1.15rem;margin-right:.15rem}

/* ---------------------------- Как это устроено ---------------------------- */
.how{padding-top:var(--s6);padding-bottom:var(--s7);border-top:1px solid var(--line)}
.how-head{max-width:34ch;margin-bottom:var(--s5)}
.how-head h2.display{font-size:clamp(1.75rem,4vw,2.44rem);line-height:1.08;
  margin-block:var(--s2)}
.how-sub{color:var(--slate)}

.steps{list-style:none;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);grid-template-columns:1fr}
.step{position:relative;background:var(--panel);display:grid;
  grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;
  padding:var(--s4) var(--s3)}
.step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--signal);transform:scaleY(0);transform-origin:top;
  transition:transform .18s ease}
.step:hover::before,.step:focus-within::before{transform:scaleY(1)}
.step-num{font-family:var(--ff-display);font-weight:600;color:var(--signal);
  font-size:clamp(2rem,6vw,3.5rem);line-height:.85;opacity:.9}
.step-body{min-width:0}
.step-id{font-family:var(--ff-mono);font-size:var(--fs-mono);color:var(--slate);
  text-transform:uppercase;letter-spacing:var(--tl);margin-bottom:.4rem}
.step-body h3{font-family:var(--ff-display);font-weight:600;font-size:var(--fs-h3);
  line-height:1.18;letter-spacing:-.01em;margin-bottom:.6rem;overflow-wrap:break-word}
.step-body p{max-width:52ch;color:var(--ink);overflow-wrap:break-word}
.step-body b{font-weight:700}

/* ---------------------------- Штамп-титульник (финальный CTA) ---------------------------- */
.stamp{background:var(--ink);color:var(--paper);padding-block:var(--s6)}
.stamp-inner{position:relative;display:grid;gap:var(--s5);grid-template-columns:1fr;
  border-top:3px solid var(--signal);padding-top:var(--s4)}
.stamp .reg-cross{color:var(--paper-dim)}
.stamp-lead h2.display{font-size:clamp(1.75rem,4vw,2.44rem);line-height:1.1;
  color:var(--paper);margin-block:var(--s2) var(--s4);max-width:20ch}
.stamp-fields{display:grid;gap:1px;background:#2a2e34;border:1px solid #2a2e34}
.stamp-fields>div{background:var(--ink);display:grid;
  grid-template-columns:9rem 1fr;gap:var(--s2);padding:.8rem 0}
.stamp-fields dt{font-family:var(--ff-mono);font-size:var(--fs-mono);
  color:var(--paper-dim);text-transform:uppercase;letter-spacing:.06em}
.stamp-fields dd{color:var(--paper);min-width:0;overflow-wrap:break-word}

/* ---------------------------- Подвал ---------------------------- */
.site-foot{background:var(--paper);padding-block:var(--s4);border-top:1px solid var(--line)}
.foot-row{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline;
  justify-content:space-between;font-family:var(--ff-mono);font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:.06em;color:var(--slate)}
.foot-nav{display:flex;flex-wrap:wrap;gap:var(--s3)}
.foot-nav a{color:var(--slate);text-decoration:none;transition:color .14s ease}
.foot-nav a:hover{color:var(--ink)}
.foot-reqs{color:var(--slate)}

/* ---------------------------- Модалка логина ---------------------------- */
.login-modal{margin:auto;width:min(30rem,calc(100vw - 2rem));
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:0}
.login-modal::backdrop{background:rgba(20,22,26,.55)}
.login-form{padding:var(--s4)}
.login-head{position:relative;margin-bottom:var(--s4)}
.login-head h2.display{font-size:1.75rem;margin-top:.4rem}
.login-head .section-tag{margin-bottom:0}
.modal-close{position:absolute;top:-.4rem;right:-.4rem;width:2.5rem;height:2.5rem;
  background:transparent;border:1px solid var(--line);color:var(--ink);
  font-size:1.25rem;line-height:1;cursor:pointer;
  transition:border-color .14s ease,background-color .14s ease}
.modal-close:hover{border-color:var(--ink);background:var(--panel)}

.field{display:block;margin-bottom:var(--s3)}
.field-label{display:block;font-family:var(--ff-mono);font-size:var(--fs-mono);
  color:var(--slate);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem}
.field input[type=email],.select-wrap select{
  width:100%;min-height:2.75rem;padding:.7rem .85rem;
  font-family:var(--ff-body);font-size:var(--fs-body);color:var(--ink);
  background:var(--paper);border:1px solid var(--slate)}
.field input::placeholder{color:var(--slate)}

/* стилизованный <select> — семантика нативная, системная стрелка скрыта */
.select-wrap{position:relative;display:block}
.select-wrap select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:2.5rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234C5563' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center}
.select-wrap select::-ms-expand{display:none}
.select-wrap select option{background:var(--paper);color:var(--ink)}

.consent{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:var(--s4);
  font-size:var(--fs-mono);color:var(--slate);line-height:1.4}
.consent input{margin-top:.15rem;width:1.1rem;height:1.1rem;accent-color:var(--signal);flex:none}
.consent a{color:var(--ink)}

/* ---------------------------- Адаптив ≥760 ---------------------------- */
@media (min-width:760px){
  .head-row{flex-wrap:nowrap;justify-content:flex-start}
  .head-nav{display:flex;margin-left:auto}
  .hero-grid{grid-template-columns:1.65fr 1fr;gap:var(--s6);align-items:start}
  .steps{grid-template-columns:1fr 1fr}
  .stamp-inner{grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
}

/* ---------------------------- Моушн ---------------------------- */
/* один момент: hairline-сетка hero «дочерчивается» на загрузке */
@keyframes gridin{from{opacity:0;transform:scaleX(0)}to{opacity:.6;transform:scaleX(1)}}
@keyframes reveal-in{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  .grid-lines{animation:gridin .24s ease-out both}
}
/* scroll-driven раскрытие шагов — естественный стаггер по позиции скролла */
.reveal{opacity:1}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0;animation:reveal-in linear both;
      animation-timeline:view();animation-range:entry 4% cover 34%}
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1!important;transform:none!important}
  .grid-lines{opacity:.6;transform:none}
}