/* Vectar — общие стили для всех страниц (из главной). Правила: docs/design-system.md */

  :root { --gutter: clamp(16px, 6vw, 96px); --fh: min(120vh, 82vw);
    /* единые размеры текста для всех блоков после главного экрана */
    --fs-h2: clamp(26px, 2.75vw, 46px);      /* заголовок блока */
    --fs-h3: clamp(20px, 1.6vw, 26px);       /* подзаголовок / заголовок карточки */
    --fs-eyebrow: 13px;                      /* надзаголовок, метки */
    --fs-body: 17px;                         /* описание */
    --fs-small: 15px;                        /* мелкий текст, подписи */
    --sec-gap: clamp(80px, 9vw, 140px);      /* отступ между блоками */ }
  h1, h2, h3, .h3 { text-wrap: balance; }
  p, li, .desc { text-wrap: pretty; }
  .nw { white-space: nowrap; }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { background: var(--vectar-granite-black); color: var(--vectar-warm-white); }
  html.locked, html.locked body { overflow: hidden; }
  body { font-family: var(--vectar-font-body); -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; }

  #scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
  .shade { position: fixed; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, rgba(8,13,12,.86) 0%, rgba(8,13,12,.5) 36%, rgba(8,13,12,0) 60%); }

  
/* ---------- шапка */
  header { position: fixed; top: 0; left: 0; right: 0; height: 88px; z-index: 20; opacity: 0;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gutter); }
  header::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s;
    background: rgba(8,13,12,.9); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(124,245,210,.08); }
  .content header::before { opacity: 1; }
  .nav { display: flex; gap: 36px; font-family: var(--vectar-font-heading); font-weight: 500; font-size: 15px; }
  .nav > a, .nav .dd > button { color: rgba(244,247,245,.82); background: none; border: 0; cursor: pointer; padding: 8px 0;
    display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
  .nav > a:hover, .nav .dd:hover > button { color: var(--vectar-mint); }
  .dd { position: relative; }
  .dd > button svg { transition: transform .25s; }
  .dd:hover > button svg, .dd:focus-within > button svg { transform: rotate(180deg); }
  .dd-menu { position: absolute; top: 100%; left: 50%; min-width: 220px; padding: 10px; margin-top: 8px;
    transform: translate(-50%, 6px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
    background: rgba(14,20,18,.82); border: 1px solid rgba(124,245,210,.16); border-radius: 18px; backdrop-filter: blur(18px); }
  .dd-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .dd:hover .dd-menu, .dd:focus-within .dd-menu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
  .dd-menu a { display: block; padding: 11px 14px; border-radius: 12px; font-size: 15px; color: rgba(244,247,245,.85); }
  .dd-menu a:hover { background: rgba(21,185,129,.12); color: var(--vectar-mint); }
  .head-cta { justify-self: end; }
  .burger { display: none; justify-self: end; width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
    background: rgba(20,27,25,.6); border: 1px solid rgba(124,245,210,.18); backdrop-filter: blur(12px); }
  .burger span { display: block; width: 18px; height: 2px; margin: 4px auto; background: var(--vectar-warm-white); border-radius: 2px; transition: transform .25s, opacity .25s; }
  .menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-open .burger span:nth-child(2) { opacity: 0; }
  .menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .mobile-menu { position: fixed; inset: 0; z-index: 19; padding: 110px 24px 32px; display: flex; flex-direction: column; gap: 6px;
    background: rgba(8,13,12,.94); backdrop-filter: blur(20px); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .menu-open .mobile-menu { opacity: 1; pointer-events: auto; }
  .mobile-menu .label, .mobile-menu a { font-family: var(--vectar-font-heading); font-weight: 600; font-size: 20px; padding: 12px 0;
    border-bottom: 1px solid rgba(244,247,245,.06); color: var(--vectar-warm-white); }
  .mobile-menu .label { color: var(--vectar-mint); border-bottom: 0; padding-bottom: 4px; }
  .mobile-menu .sub-link { font-weight: 500; color: rgba(244,247,245,.8); padding-left: 16px; }

  .btn { font-family: var(--vectar-font-heading); font-weight: 600; font-size: 15px; color: var(--vectar-granite-black);
    background: var(--vectar-gradient); border: 0; border-radius: 999px; padding: 14px 26px; cursor: pointer; white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(124,245,210,.35), 0 8px 30px rgba(21,185,129,.25); transition: transform .2s, box-shadow .2s; }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(124,245,210,.6), 0 10px 40px rgba(21,185,129,.4); }
  .btn.ghost { background: rgba(20,27,25,.6); color: var(--vectar-warm-white); backdrop-filter: blur(12px); }

  
/* ---------- общие классы блоков */
  .sec { padding: var(--sec-gap) var(--gutter) 0; }
  .eyebrow-s { font-family: var(--vectar-font-accent); font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--vectar-mint); margin-bottom: 14px; }
  .h2 { font-family: var(--vectar-font-heading); font-weight: 700; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.015em; }
  .h2 .accent { font-family: var(--vectar-font-accent); font-weight: 600;
    background: linear-gradient(90deg, var(--vectar-emerald), var(--vectar-mint)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .h3 { font-family: var(--vectar-font-heading); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; }
  .desc { font-size: var(--fs-body); line-height: 1.5; color: rgba(244,247,245,.78); }
  .glass { position: relative; border-radius: 24px; overflow: hidden;
    background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 50%); border: 1px solid rgba(244,247,245,.1); backdrop-filter: blur(14px); }
  .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s, transform .8s; }
  .rv.in { opacity: 1; transform: none; }

/* ---------- блок 3: инструменты связкой */
  .tools { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
  .trace { position: absolute; left: 0; right: 0; top: 96px; height: 60px; width: 100%; pointer-events: none; z-index: 0; overflow: visible; }
  .trace path { stroke-dasharray: 1600; stroke-dashoffset: 1600; transition: stroke-dashoffset 2.4s ease; }
  .tools.in .trace path { stroke-dashoffset: 0; }
  .tool { z-index: 1; display: flex; flex-direction: column; padding: 14px 14px 22px; }
  .tool .media { border-radius: 16px; overflow: hidden; border: 1px solid rgba(124,245,210,.16); background: #070b0a; aspect-ratio: 16 / 10; }
  .tool .media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
  .tool:hover .media img { transform: scale(1.04); }
  .tool .body { padding: 18px 8px 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
  .tool .desc { font-size: var(--fs-small); }
  .tool .price { margin-top: auto; padding-top: 6px; font-family: var(--vectar-font-accent); font-weight: 600; font-size: var(--fs-body); color: #fff; }
  .tool .more { font-family: var(--vectar-font-heading); font-weight: 600; font-size: var(--fs-small); color: var(--vectar-mint); display: inline-flex; gap: 8px; align-items: center; }
  .tool .more:hover { gap: 12px; }
  .tool { transition: border-color .35s, background .35s, transform .35s, box-shadow .35s; }
  .tool:hover, .tool:focus-within { border-color: rgba(124,245,210,.45); transform: translateY(-4px);
    background: linear-gradient(160deg, rgba(21,185,129,.16), rgba(8,13,12,.4) 60%); box-shadow: 0 20px 50px rgba(21,185,129,.12); }
  .tool .media { display: grid; place-items: center;
    background: radial-gradient(70% 70% at 50% 60%, rgba(21,185,129,.16), transparent 70%), #070b0a; }
  .ill { width: 100%; height: 100%; display: block; overflow: visible; }
  .ill * { transform-box: fill-box; transform-origin: center; }
  /* сайты */
  .ill-s .orbit { animation: orbit 6s linear infinite; }
  @keyframes orbit { to { stroke-dashoffset: -340; } }
  .ill-s .float { animation: bob 5s ease-in-out infinite; }
  .ill-s .ln { transform-origin: left center; animation: grow 3.6s ease-in-out infinite; }
  .ill-s .l2 { animation-delay: .4s; } .ill-s .l3 { animation-delay: .8s; }
  @keyframes grow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.55); } }
  .ill-s .cursor { animation: cur 5s ease-in-out infinite; }
  @keyframes cur { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(-30px, -12px); } 55% { transform: translate(-30px, -12px) scale(.85); } 70% { transform: translate(-6px, 2px); } }
  @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  /* реклама */
  .ill-p .bar { transform-origin: bottom center; animation: bar 3.2s ease-in-out infinite; }
  .ill-p .b1 { animation-delay: -.2s; --lo: .38; --hi: .5; } .ill-p .b2 { animation-delay: -.6s; --lo: .5; --hi: .62; }
  .ill-p .b3 { animation-delay: -1s; --lo: .44; --hi: .6; } .ill-p .b4 { animation-delay: -1.4s; --lo: .66; --hi: .8; }
  .ill-p .b5 { animation-delay: -1.8s; --lo: .82; --hi: 1; }
  @keyframes bar { 0%, 100% { transform: scaleY(var(--lo)); } 50% { transform: scaleY(var(--hi)); } }
  .ill-p .trend { stroke-dasharray: 300; animation: draw 4s ease-in-out infinite; }
  @keyframes draw { 0% { stroke-dashoffset: 300; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -300; } }
  .ill-p .arrow { animation: blink 4s ease-in-out infinite; }
  @keyframes blink { 0%, 35%, 100% { opacity: 0; } 50%, 80% { opacity: 1; } }
  .ill-p .dot { animation: pulse 2s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.6); opacity: .5; } }
  /* чат-боты */
  .ill-b .bub { animation: bob 4.6s ease-in-out infinite; }
  .ill-b .td { animation: typing 1.2s ease-in-out infinite; }
  .ill-b .t2 { animation-delay: .15s; } .ill-b .t3 { animation-delay: .3s; }
  @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-6px); opacity: 1; } }
  .ill-b .bot { animation: bob 5.2s ease-in-out infinite reverse; }
  .ill-b .eyes { animation: eyes 4.5s infinite; }
  @keyframes eyes { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
  .ill-b .ant { animation: pulse 1.8s ease-in-out infinite; }
  .ill-b .mail { animation: fly 6s ease-in-out infinite; }
  .ill-b .m2 { animation-delay: -2s; } .ill-b .m3 { animation-delay: -4s; }
  @keyframes fly { 0%, 100% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(8px, -10px) rotate(-6deg); } 66% { transform: translate(-6px, -4px) rotate(5deg); } }
  /* автоматизация */
  .ill-a .gear { animation: spin 6s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .ill-a .flow { animation: flow 5s linear infinite; }
  @keyframes flow { to { stroke-dashoffset: -380; } }
  .ill-a .plate { animation: bob 3.4s ease-in-out infinite; }
  .ill-a .p2 { animation-delay: -.5s; } .ill-a .p3 { animation-delay: -1s; }
  .ill-a .p1 { animation-name: lift; }
  @keyframes lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  @media (prefers-reduced-motion: reduce) { .ill * { animation: none !important; } }
  .badge { position: absolute; top: 24px; left: 24px; z-index: 2; padding: 7px 12px; border-radius: 999px; font-family: var(--vectar-font-accent); font-size: 12px; letter-spacing: .06em;
    color: var(--vectar-granite-black); background: var(--vectar-gradient); box-shadow: 0 6px 20px rgba(21,185,129,.35); }
  .combo { margin-top: 24px; display: grid; grid-template-columns: 1.1fr 1fr auto; gap: 28px; align-items: center; padding: 26px 28px; }
  .combo .scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .combo .scale div { padding: 10px 8px; border-radius: 14px; text-align: center; background: rgba(8,13,12,.5); border: 1px solid rgba(124,245,210,.14); }
  .combo .scale b { display: block; font-family: var(--vectar-font-accent); font-weight: 600; font-size: 22px; color: var(--vectar-mint); }
  .combo .scale span { font-size: 12px; color: rgba(244,247,245,.65); }

  
/* ---------- блок 4: как работаем */
  .steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 56px; }
  .steps .line { position: absolute; left: 0; right: 0; top: 22px; height: 2px; overflow: visible; pointer-events: none; }
  .steps .line path { stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 2.6s ease; }
  .steps.in .line path { stroke-dashoffset: 0; }
  .step { position: relative; }
  .step .n { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--vectar-font-accent); font-weight: 600; font-size: 15px; color: var(--vectar-mint);
    background: #0b110f; border: 1px solid rgba(124,245,210,.4); box-shadow: 0 0 22px rgba(21,185,129,.25); }
  .step .h3 { margin-top: 22px; }
  .step .desc { margin-top: 10px; font-size: var(--fs-small); }
  .guar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
  .guar .glass { padding: 22px 24px; display: flex; gap: 14px; align-items: flex-start; }
  .guar svg { flex: none; margin-top: 2px; }
  .guar .desc { font-size: var(--fs-small); color: rgba(244,247,245,.86); }

  
/* ---------- блок 5: заявка и вопросы */
  .final { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; align-items: start; }
  .faq { display: grid; gap: 10px; }
  .faq details { border-radius: 18px; background: rgba(20,27,25,.5); border: 1px solid rgba(244,247,245,.08); transition: border-color .25s; }
  .faq details[open] { border-color: rgba(124,245,210,.3); }
  .faq summary { list-style: none; cursor: pointer; padding: 20px 22px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .h3 { font-size: clamp(17px, 1.2vw, 19px); }
  .faq summary i { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(124,245,210,.35); position: relative; transition: transform .3s; }
  .faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; background: var(--vectar-mint); transform: translate(-50%, -50%); }
  .faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s; }
  .faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
  .faq details .desc { padding: 0 22px 20px; font-size: var(--fs-small); }
  .faq .ans { overflow: hidden; transition: height .45s cubic-bezier(.2,.7,.2,1), opacity .4s; }
  .form { padding: 30px; border-color: rgba(124,245,210,.3); background: linear-gradient(160deg, rgba(21,185,129,.14), rgba(8,13,12,.55) 55%); }
  .form .field { display: grid; gap: 8px; margin-top: 18px; }
  .form label, .form legend { font-size: var(--fs-small); color: rgba(244,247,245,.75); }
  .form input[type=text], .form input[type=tel] { width: 100%; padding: 15px 16px; border-radius: 14px; font: inherit; font-size: 16px; color: #fff;
    background: rgba(8,13,12,.6); border: 1px solid rgba(244,247,245,.12); outline: none; transition: border-color .2s; }
  .form input:focus { border-color: var(--vectar-mint); }
  .form fieldset { border: 0; margin-top: 18px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .chips label { cursor: pointer; }
  .chips input { position: absolute; opacity: 0; pointer-events: none; }
  .chips span { display: inline-block; padding: 10px 14px; border-radius: 999px; font-size: 14px; color: rgba(244,247,245,.85);
    background: rgba(8,13,12,.5); border: 1px solid rgba(244,247,245,.12); transition: all .2s; }
  .chips input:checked + span { color: var(--vectar-granite-black); background: var(--vectar-gradient); border-color: transparent; }
  .form .btn { width: 100%; margin-top: 24px; padding: 17px 26px; }
  .form .note { margin-top: 12px; font-size: 12px; line-height: 1.45; color: rgba(244,247,245,.5); }
  .form .note a { text-decoration: underline; }
  .form .ok { display: none; padding: 40px 0; text-align: center; }
  .form.sent .ok { display: block; } .form.sent form { display: none; }

  
/* ---------- попап с формой заявки */
  .modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; visibility: hidden; transition: visibility 0s .45s; }
  .modal .veil { position: absolute; inset: 0; background: rgba(4,7,6,.72); backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s; }
  .modal .box { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 40px); overflow: auto; opacity: 0; transform: translateY(18px) scale(.97);
    transition: opacity .4s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1); }
  .modal-open .modal { visibility: visible; transition: none; }
  .modal-open .modal .veil { opacity: 1; }
  .modal-open .modal .box { opacity: 1; transform: none; }
  .modal .x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 12px; cursor: pointer; z-index: 2;
    background: rgba(8,13,12,.6); border: 1px solid rgba(124,245,210,.2); color: var(--vectar-warm-white); font-size: 20px; line-height: 1; }
  .modal .x:hover { border-color: var(--vectar-mint); color: var(--vectar-mint); }
  .modal .lead { margin-top: 8px; font-size: var(--fs-small); color: rgba(244,247,245,.7); padding-right: 40px; }

  
/* ---------- блок 6: подвал */
  .foot { margin-top: var(--sec-gap); padding: 56px var(--gutter) 40px; border-top: 1px solid rgba(124,245,210,.12);
    background: linear-gradient(180deg, rgba(21,185,129,.05), transparent 40%); }
  .foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 32px; }
  .foot .logo-f { width: 170px; display: block; }
  .foot .tag { margin-top: 16px; max-width: 320px; }
  .foot h4 { font-family: var(--vectar-font-accent); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--vectar-mint); margin-bottom: 16px; }
  .foot ul { list-style: none; display: grid; gap: 10px; }
  .foot ul a, .foot ul span { font-size: var(--fs-small); color: rgba(244,247,245,.8); }
  .foot ul a:hover { color: var(--vectar-mint); }
  .soc { display: flex; gap: 10px; margin-top: 18px; }
  .soc a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: rgba(244,247,245,.85);
    background: rgba(20,27,25,.6); border: 1px solid rgba(124,245,210,.18); transition: all .2s; }
  .soc a:hover { color: var(--vectar-granite-black); background: var(--vectar-gradient); border-color: transparent; }
  .legal { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(244,247,245,.06); display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px;
    font-size: 12px; line-height: 1.6; color: rgba(244,247,245,.45); }
  .legal p + p { margin-top: 10px; }
  .legal a { text-decoration: underline; }


  
  @media (max-width: 1180px) {
    .tools { grid-template-columns: repeat(2, 1fr); }
    .trace { display: none; }
    .combo { grid-template-columns: 1fr; }
    .combo .btn { justify-self: start; }
    .steps { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
    .steps .line { display: none; }
    .foot-top { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 820px) {
    :root { --fs-body: 16px; --fs-small: 14px; --sec-gap: 84px; }
    .tools { grid-template-columns: 1fr; margin-top: 28px; }
    .combo { padding: 22px; gap: 18px; }
    .combo .scale { grid-template-columns: repeat(2, 1fr); }
    .combo .btn { width: 100%; white-space: normal; text-align: center; justify-content: center; display: flex; }
    .steps { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
    .step { padding: 0 0 28px 66px; }
    .step::before { content: ''; position: absolute; left: 22px; top: 46px; bottom: 0; width: 2px; background: linear-gradient(#15B981, rgba(124,245,210,.15)); }
    .step:last-child::before { display: none; }
    .step .n { position: absolute; left: 0; top: 0; }
    .step .h3 { margin-top: 10px; }
    .guar { grid-template-columns: 1fr; margin-top: 20px; gap: 10px; }
    .final { grid-template-columns: 1fr; margin-top: 28px; }
    .form { padding: 22px; order: -1; }
    .foot { padding-top: 44px; }
    .foot-top { grid-template-columns: 1fr; gap: 28px; }
    .legal { grid-template-columns: 1fr; gap: 10px; }
    :root { --gutter: 20px; --fh: 80vh; }
    header { grid-template-columns: 1fr auto; height: 76px; }
    .nav, .head-cta { display: none; }
    .burger { display: block; }
  }

/* ---------- страницы без «живого» главного экрана */
.logo-static { position: fixed; left: var(--gutter); top: 0; height: 88px; display: flex; align-items: center; z-index: 21; }
.logo-static img { width: 180px; display: block; }
@media (max-width: 820px) { .logo-static { height: 76px; } .logo-static img { width: 130px; } }

/* ---------- поля форм: телефон обязателен */
.form .req { color: var(--vectar-mint); font-weight: 600; }
.form .opt { color: rgba(244,247,245,.4); }
.form .field .err { display: none; font-size: 12px; color: #ff8f8f; }
.form .field.bad input { border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,107,107,.12); }
.form .field.bad .err { display: block; }
.form button[disabled] { opacity: .6; pointer-events: none; }
/* бургер на телефоне всегда виден и закреплён */
@media (max-width: 820px) { .burger { position: fixed; top: 16px; right: 20px; z-index: 30; } }