/* ПРОСТО ЗАПЧАСТИ — базовый слой первого экрана
   Чёрный + редкий жёлтый. Типографика: Fira Sans Condensed (дисплей),
   Fira Sans (текст), Fira Mono (данные/HUD). */

/* Шрифты лежат у нас на сервере: браузер посетителя не ходит
   на серверы Google, IP-адрес никуда не уходит. */

@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/FiraMono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/FiraMono-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: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/FiraMono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/FiraMono-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: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/FiraSans-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/FiraSans-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: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/FiraSans-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/FiraSans-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: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/FiraSansCondensed-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/FiraSansCondensed-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: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/FiraSansCondensed-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/FiraSansCondensed-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: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/FiraSansCondensed-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/FiraSansCondensed-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: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/FiraSansCondensed-800-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/FiraSansCondensed-800-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{
  /* поверхности */
  --bg:      #0A0A0B;
  --bg-2:    #101012;
  --line:    rgba(255,255,255,.10);
  --line-2:  rgba(255,255,255,.055);

  /* чернила */
  --ink:     #F3F3F1;   /* заголовки            */
  --ink-2:   #ABABA7;   /* текст   ~9.4:1 на bg */
  --ink-3:   #85857F;   /* метки   ~5.2:1 на bg */

  /* акцент — редкий */
  --acc:     #FFC61A;
  --acc-dim: #C79A12;

  /* кривые и такты */
  --eo:  cubic-bezier(.23, 1, .32, 1);      /* вход, отклик        */
  --eio: cubic-bezier(.77, 0, .175, 1);     /* движение по экрану  */

  /* z-шкала */
  --z-media: 0;
  --z-scrim: 1;
  --z-body:  2;
  --z-hdr:   10;
  --z-switch:50;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.62 'Fira Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--acc); color:#0A0A0B; }

/* ── фактуры ─────────────────────────────────────────────────────────── */
.tex-hatch{                       /* диагональная штриховка с обложки ВК */
  position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(
    45deg, transparent 0 5px, rgba(255,255,255,.022) 5px 6px);
}
.tex-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── шапка ───────────────────────────────────────────────────────────── */
.hdr{
  position:absolute; inset:0 0 auto; z-index:var(--z-hdr);
  display:flex; align-items:center; gap:24px;
  padding:clamp(18px,2.6vh,30px) clamp(20px,4vw,64px);
}
.mark{
  position:relative; display:inline-flex; align-items:center;
  padding-left:20px;
  font-family:'Fira Sans Condensed',sans-serif; font-weight:800; font-size:19px;
  letter-spacing:.10em; text-transform:uppercase; white-space:nowrap;
}
.mark::before{                    /* уголок-скоба, знак бренда */
  content:''; position:absolute; left:0; top:50%; width:11px; height:16px;
  transform:translateY(-50%);
  border-left:2px solid var(--acc); border-top:2px solid var(--acc);
}
.hdr__nav{ display:flex; gap:28px; margin-left:auto; }
.hdr__nav a{
  font-size:14px; color:var(--ink-2); position:relative; padding-block:4px;
  transition:color .22s var(--eo);
}
.hdr__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--acc); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--eo);
}
.hdr__right{ display:flex; align-items:center; gap:18px; margin-left:auto; }
.hdr__nav + .hdr__right{ margin-left:0; }
.tel{
  font-family:'Fira Mono',monospace; font-size:15px; letter-spacing:.01em;
  white-space:nowrap; transition:color .22s var(--eo);
}
@media (hover:hover) and (pointer:fine){
  .hdr__nav a:hover{ color:var(--ink); }
  .hdr__nav a:hover::after{ transform:scaleX(1); }
  .tel:hover{ color:var(--acc); }
}

/* ── кнопки ──────────────────────────────────────────────────────────── */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:58px; padding:0 30px; border:0; border-radius:3px; cursor:pointer;
  font-family:'Fira Sans Condensed',sans-serif; font-weight:700; font-size:16px;
  letter-spacing:.055em; text-transform:uppercase; white-space:nowrap;
  transition:transform .16s var(--eo), border-color .22s var(--eo), color .22s var(--eo);
}
.btn:active{ transform:scale(.972); }
.btn:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; }
.btn--primary{ background:var(--acc); color:#0A0A0B; }
.btn--primary::before{           /* заливка-протяжка слева направо */
  content:''; position:absolute; inset:0; z-index:-1; background:#FFDA57;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .34s var(--eo);
}
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.btn--sm{ height:42px; padding:0 18px; font-size:14px; }
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover::before{ clip-path:inset(0 0 0 0); }
  .btn--ghost:hover{ box-shadow:inset 0 0 0 1px var(--acc); color:var(--acc); }
}
.btn__arrow{ width:15px; height:9px; flex:none; transition:transform .28s var(--eo); }
@media (hover:hover) and (pointer:fine){ .btn:hover .btn__arrow{ transform:translateX(4px); } }

/* ── мелкая типографика ──────────────────────────────────────────────── */
.kicker{
  display:flex; align-items:center; gap:14px;
  font-family:'Fira Mono',monospace; font-size:12px; letter-spacing:.20em;
  text-transform:uppercase; color:var(--ink-3);
}
.kicker::before{
  content:''; width:28px; height:2px; background:var(--acc); flex:none;
  transform-origin:left; transform:scaleX(1);
  transition:transform .55s var(--eo) var(--d,0ms);
}
@starting-style{ .kicker::before{ transform:scaleX(0); } }
.note{ font-size:15px; line-height:1.55; color:var(--ink-3); }

/* ── вход: видимое состояние — базовое, @starting-style — только вход ── */
.rv{
  opacity:1; transform:none;
  transition:opacity .62s var(--eo) var(--d,0ms), transform .62s var(--eo) var(--d,0ms);
}
@starting-style{ .rv{ opacity:0; transform:translateY(14px); } }

.rv-line{                          /* строка заголовка встаёт из-под маски */
  display:block;
  clip-path:inset(0% -6% -22% -6%); transform:translateY(0);
  transition:clip-path .82s var(--eio) var(--d,0ms), transform .82s var(--eo) var(--d,0ms),
             opacity .5s linear var(--d,0ms);
  opacity:1;
}
@starting-style{ .rv-line{ clip-path:inset(100% -6% -22% -6%); transform:translateY(22px); opacity:.001; } }

/* ── переключатель вариантов (служебный, не часть макета) ────────────── */
.vswitch{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:var(--z-switch); display:flex; align-items:center; gap:2px;
  padding:4px; border-radius:999px; background:#17171A;
  box-shadow:inset 0 0 0 1px var(--line-2);
  font-family:'Fira Mono',monospace; font-size:11px; letter-spacing:.14em;
}
.vswitch a{ padding:7px 14px; border-radius:999px; color:var(--ink-3); }
.vswitch a[aria-current]{ background:var(--acc); color:#0A0A0B; }

@media (max-width:900px){
  .hdr__nav{ display:none; }
  .hdr{ gap:12px; }
}
@media (max-width:560px){
  .hdr{ justify-content:space-between; }
  .hdr__right .btn--sm{ display:none; }
  .tel{ font-size:14px; }
  .mark{ font-size:16px; letter-spacing:.07em; }
  .kicker{ letter-spacing:.13em; }
  .cta .btn{ height:54px; width:100%; }
}

/* ── меньше движения ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .rv,.rv-line{ transform:none!important; clip-path:none!important; }
  @starting-style{ .rv,.rv-line{ transform:none!important; clip-path:none!important; } }
  .kicker::before{ transition:none!important; }
  [data-motion]{ animation:none!important; }
}

/* незаполненный реквизит — видно сразу, чтобы не выложить сайт с дырой */
.req-empty{
  padding:1px 7px; border-radius:3px; background:rgba(255,68,54,.14);
  color:#FF8177; font-family:'Fira Mono',monospace; font-size:.9em; white-space:nowrap;
}