@font-face{
    font-family:'Onest';
    src:url('fonts/Onest-subset.woff2') format('woff2');
    font-weight:100 900;
    font-display:swap;
  }
  @font-face{
    font-family:'JetBrains Mono';
    src:url('fonts/JetBrainsMono-subset.woff2') format('woff2');
    font-weight:100 800;
    font-display:swap;
  }
  :root{
    /* Светлая тема: --ink/--paper поменялись ролями относительно исходной тёмной
       (--ink теперь светлая поверхность, --paper — тёмный текст).
       --ink — канон дизайн-системы: background_color из brand/web-color/site.webmanifest. */
    --ink:#F5F6F8;
    --ink-2:#FFFFFF;
    /* Бегунок тумблера в состоянии «Без защиты» — тот же тон, что фон страницы:
       корпус тумблера белый, поэтому бегунок читается как утопленная выемка. */
    --ink-3:var(--ink);
    /* Бегунок под «Под защитой» — едва заметная мятная подложка, дополнительно
       отмечающая положительное состояние. Оттенок намеренно слабый: на плотном
       мятном фирменный щит поверх давал бы 1.76:1 и сливался с подложкой,
       здесь же его контраст практически не отличается от белого. */
    --thumb-on:#E6F9F6;
    /* Внутренние отступы сцены. Ширину задаёт .wrap (760px), сцена занимает его
       целиком за вычетом боковых полей. Наклон vw подобран так, чтобы отступы
       достигали максимума там же, где .wrap упирается в предел (~800px):
       74/800 = 9.25vw, 30/800 = 3.75vw. */
    --stage-pad-top:clamp(52px,9.25vw,74px);
    --stage-pad-bottom:clamp(18px,3.75vw,30px);
    /* Ширина подписи в плитках сцены. При 150px короткие подписи «Без защиты»
       укладывались в одну строку почти во всю ширину и читались как широкая полоса,
       тогда как «Под защитой» переносились на три. На 146px одностроч­ных подписей
       не остаётся ни одной, при этом высота сцены не растёт; ниже 143px она
       прибавляет 18px без выигрыша по переносам. */
    --tile-label-w:min(146px,42vw);
    /* Бегунок обведён и скруглён почти концентрично корпусу (1.25em корпуса −
       0.375em отступа = 0.875em), чтобы читаться как отдельная подвижная деталь.
       В em — вместе со всем селектором. */
    --thumb-radius:0.9375em;
    --thumb-edge:var(--edge);
    --signal:#00C6A8;
    --signal-dim:#00B49B;
    /* Мятный текстом на светлом. Отдельный токен нужен потому, что тёмный островок
       сцены требует другого значения: там читается яркий --signal, здесь — затемнённый.
       Роли --signal/--signal-dim на светлой теме обменяны: база заливок и текст берут
       --signal-dim, яркий --signal ушёл в hover.
       Осознанное отступление: на #F5F6F8 это 2.43:1 при пороге WCAG 4.5:1
       (порог шкалы — #00806D). Решение владельца продукта в пользу фирменного оттенка,
       не недосмотр. Не «чинить» молча — см. CLAUDE.md, раздел про светлую тему. */
    --signal-text:var(--signal-dim);
    --paper:#0B1023;
    /* Брендовый приглушённый на светлом — тот же, которым залита подпись
       «суперсила селлера» в sellaris-logo-color-light-bg.svg. */
    --paper-dim:#667085;
    /* Промежуточная ступень того же ряда: подписи плиток в сцене «Под защитой».
       Чистый navy там совпадал с цветом самой иконки и читался жёстко —
       смягчение даёт иерархию «иконка сильнее подписи». 4.60:1, порог пройден. */
    --paper-soft:#667085;
    --danger:#D2402B;
    --danger-dim:#A83424;
    --signal-on:#fff;
    --font-display:'Onest',system-ui,sans-serif;
    --font-body:'Onest',system-ui,sans-serif;
    --font-mono:'JetBrains Mono',monospace;
    --edge:1px solid #0B102314;
    --edge-control:1px solid #0B10232E;
    /* Размер иконок в плитках сцены. При 60px иконка выходила выше собственной
       трёхстрочной подписи (60 против 54) — на десктопе перевешивала текст.
       На 40px отношение 0.74, иконка уверенно уступает подписи.
       Обводка задана в единицах viewBox и масштабируется вместе с иконкой:
       при stroke-width 1 это даёт ~1.9px на экране. */
    --tile-icon:clamp(32px,6vw,40px);
    /* «Под защитой» — полупрозрачная белая: фоновая графика страницы просвечивает
       сквозь сцену приглушённой, связывая её со страницей. Форму задаёт сам фон,
       рамки у сцены нет. */
    --stage-flat:#FFFFFF80;
    /* Вуаль — это «темнота», которую прорезает луч, а не фон страницы. Она
       намеренно НЕ входит в область .stage[data-state="off"]: токены переключаются
       мгновенно, а фон сцены едет 0.6s, и вуаль успевала посветлеть раньше фона —
       сквозь дыру от луча проглядывал ещё тёмный фон. */
    --veil:#0B1023;
    /* Фирменный градиент заголовка — сведён по логотипу: лиловый → фиолетовый →
       синий. Плоским цветом синее семейство читалось бы как синий OZON (#005BFF,
       тон 296°, внутри 284–314° логотипа), но в проходе градиента это ощущение
       не возникает. Резервный плоский цвет — на случай отсутствия background-clip. */
    --brand-gradient:linear-gradient(95deg,#A16FF4 0%,#7045F6 48%,#2F7DF6 100%);
    --brand-gradient-fallback:#7045F6;
    /* Запасной сплошной цвет кольца, если mask не поддерживается —
       то же значение, что в SVG-градиентах разметки. */
    --brand-violet:#7B5CF7;
    color-scheme: light;
  }
  /* Тёмный островок: сцена в состоянии «Без защиты» переопределяет те же токены,
     а не заводит параллельные классы. При переключении на «Под защитой» селектор
     перестаёт совпадать и сцена наследует светлые токены :root. */
  .stage[data-state="off"]{
    /* Ступени выведены из канонического navy #0B1023 в HSL с сохранением тона
       (hue 227.5°, sat 52%) — прежние #141922/#1D2430 имели sat 26% и читались
       серо-чёрными, а не navy. */
    --ink:#0B1023;          /* light  9% — канон */
    --ink-2:#111936;        /* light 14% — центр радиального градиента */
    --paper:#F5F6F8;
    --paper-dim:#8B92A0;
    --danger:#FF6B57;
    --signal-text:#00C6A8;
    --edge:1px solid #F5F6F814;
    --stage-flat:#0F152F;   /* light 12% — плоская заливка под лучом */
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
  input{font:inherit;color:inherit;}
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  :focus-visible{outline:2px solid var(--signal-text);outline-offset:3px;}

  /* Спрайт символов и общих градиентов. Прячется нулевым размером, а не
     display:none: тот выключает блок из дерева отрисовки, и градиенты как
     paint-server перестают разрешаться по url(#…). */
  .svg-sprite{position:absolute;width:0;height:0;overflow:hidden;}

  .bg-texture{position:fixed;inset:0;z-index:-1;pointer-events:none;}
  .bg-texture svg{width:100%;height:100%;display:block;}

  /* Боковые поля плавные, а не ступенькой на 768px: прежний медиазапрос давал
     скачок 39px — при сужении окна на 1px сцена внезапно становилась ШИРЕ.
     Раньше это терялось на фоне общего сжатия, а с ограниченным .wrap стало
     заметно. clamp оставляет те же 20px на телефоне и 40px на десктопе. */
  .wrap{max-width:760px;margin:0 auto;padding-inline:clamp(20px,5vw,40px);}

  /* ===== Раздел 1 — логотип ===== */
  .hero{
    padding:78px 20px 24px;
    display:flex;align-items:center;justify-content:center;
    position:relative;
  }
  .hero__mark{
    display:flex;align-items:center;gap:14px;
    opacity:0;
  }
  .hero__glyph{
    width:44px;height:44px;border-radius:12px;
    background:var(--ink-2);border:var(--edge);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:800;font-size:22px;
    color:var(--signal);
  }
  .hero__word{
    font-family:var(--font-display);font-weight:600;
    font-size:clamp(1.4rem,4vw,1.9rem);letter-spacing:0.01em;
  }
  /* Логотип тянется в том же окне ширин, что и заголовок (clamp 1.5rem…2.7rem
     при 5.5vw = 436…786px): 190px на 786 и 140px на 436. Раньше логотип оживал
     только ниже 365px, когда заголовок уже замирал — блок разъезжался. */
  .hero__logo{width:clamp(140px,78px + 14.3vw,190px);height:auto;}
  @media (prefers-reduced-motion: no-preference){
    .hero__mark{animation:flicker-in 1.4s ease-out forwards;}
  }
  @media (prefers-reduced-motion: reduce){
    .hero__mark{opacity:1;}
  }
  @keyframes flicker-in{
    0%{opacity:0;}
    8%{opacity:1;}
    12%{opacity:0.2;}
    20%{opacity:1;}
    24%{opacity:0.4;}
    32%{opacity:1;}
    100%{opacity:1;}
  }
  .hero__cue{
    position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
    color:var(--paper-dim);opacity:0.6;
  }

  /* ===== Раздел 2 — панч ===== */
  .punch{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding-block:16px 40px;position:relative;
  }
  .punch__headline{
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(1.5rem,5.5vw,2.7rem);line-height:1.12;letter-spacing:-0.01em;
    max-width:23ch;margin:0 auto;
  }
  .punch__end{white-space:nowrap;}
  .punch__typed{color:var(--brand-gradient-fallback);}
  /* Градиент по тексту — только там, где он поддерживается: без guard
     color:transparent сделал бы слово невидимым. */
  @supports (background-clip:text) or (-webkit-background-clip:text){
    .punch__typed{
      background-image:var(--brand-gradient);
      -webkit-background-clip:text;background-clip:text;
      color:transparent;
    }
  }
  .punch__cursor{
    display:inline-block;width:3px;height:0.78em;
    background:var(--brand-gradient-fallback);margin-left:3px;vertical-align:-0.08em;
  }
  @media (prefers-reduced-motion: no-preference){
    .punch__cursor{animation:caret-blink 1s step-end infinite;}
  }
  @media (prefers-reduced-motion: reduce){
    .punch__cursor{display:none;}
  }
  @keyframes caret-blink{
    0%,50%{opacity:1;}
    50.01%,100%{opacity:0;}
  }
  /* ===== Раздел 3 — тумблер ===== */
  .switch-section{
    padding-block:0;text-align:center;position:relative;z-index:3;
  }
  /* Селектор масштабируется как единое целое: здесь задаётся базовый кегль,
     а все размеры внутри выражены в em от него. Раньше тянулась только ширина,
     а отступы, кегль подписи и иконка стояли в px — контрол почти не менялся.
     Окно тяги то же, что у логотипа и заголовка: 436…786px. */
  .switch{
    font-size:clamp(13.5px,10.39px + 0.714vw,16px);
    position:relative;display:inline-flex;gap:0.25em;
    padding:0.375em;border-radius:1.25em;
    background:var(--ink-2);border:var(--edge);
    max-width:100%;
    margin-bottom:-30px;
  }
  .switch__thumb{
    position:absolute;top:0.375em;left:0.375em;bottom:0.375em;
    width:calc(50% - 0.375em);border-radius:var(--thumb-radius);
    background:var(--ink-3);border:var(--thumb-edge);
    transition:transform 0.45s cubic-bezier(.65,0,.35,1), background-color 0.45s ease;
    z-index:0;
  }
  .switch--on .switch__thumb{transform:translateX(100%);background:var(--thumb-on);}
  .switch__option{
    position:relative;z-index:1;
    display:flex;flex-direction:column;align-items:center;gap:0.5em;
    padding:1em 1.125em;border-radius:0.9375em;
    width:9.375em;
  }
  .switch__option svg{width:1.625em;height:1.625em;}
  .switch__option-icon{color:var(--paper);}
  .switch__label{font-size:0.85em;color:var(--paper-dim);}
  .switch__option.is-active .switch__label{color:var(--paper);}
  /* Пульс расходится от самой иконки, а не от рамки кнопки: кольцо по контуру
     кнопки выходило за пределы тумблера и наезжало на соседнюю вкладку.
     Круг вокруг иконки повторяет эхо-кольца центральной плитки в сцене. */
  .switch__mark{position:relative;display:inline-flex;color:var(--signal);}
  .switch__option--pulse .switch__mark::after{
    content:'';position:absolute;inset:-0.44em;border-radius:50%;
    border:1.5px solid var(--signal);opacity:0;
  }
  @media (prefers-reduced-motion: no-preference){
    .switch__option--pulse .switch__mark::after{animation:ring-pulse 2.4s ease-out infinite;}
  }
  @keyframes ring-pulse{
    0%{opacity:0.5;transform:scale(0.85);}
    70%{opacity:0;transform:scale(1.35);}
    100%{opacity:0;transform:scale(1.35);}
  }
  .switch.has-tried .switch__option--pulse .switch__mark::after{animation:none;opacity:0;}

  /* ===== Раздел 4 — реveal-сцена ===== */
  .reveal{padding-block:0;position:relative;z-index:2;}
  .stage{
    position:relative;overflow:hidden;
    border-radius:24px;border:var(--edge);
    min-height:clamp(280px,36vw,340px);
    background:radial-gradient(circle at 50% 28%, var(--ink-2), var(--ink) 72%);
    transition:background 0.6s ease;
    touch-action:none;
  }
  .stage.is-active,
  .stage[data-state="on"]{
    background:var(--stage-flat);
  }
  .stage__content{
    position:relative;z-index:1;height:100%;
    display:grid;grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:"left center right" ". bottom .";
    align-items:start;justify-items:stretch;align-content:start;
    row-gap:clamp(16px,18vw - 70px,60px);column-gap:clamp(10px,3.5vw,24px);
    padding:var(--stage-pad-top) clamp(14px,4vw,32px) var(--stage-pad-bottom);
    max-width:640px;margin-inline:auto;
  }
  .tile{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;width:100%;min-width:0;}
  .tile__label{width:100%;max-width:var(--tile-label-w);margin-inline:auto;position:relative;z-index:1;}
  .tile--primary{grid-area:center;}
  .tile--left{grid-area:left;}
  .tile--bottom{grid-area:bottom;}
  .tile--right{grid-area:right;}
  .tile__icon{
    position:relative;width:var(--tile-icon);height:var(--tile-icon);
    display:flex;align-items:center;justify-content:center;
  }
  /* Размер задаётся явно: <svg> — замещаемый элемент, inset:0 его не растягивает,
     а viewBox теперь живёт в <symbol>, поэтому без width/height он берёт
     размер по умолчанию 300×150. */
  .tile__icon svg,
  .conn-icon svg{width:100%;height:100%;}
  /* Цвет обводки контурных иконок задаётся контекстом, а не атрибутом в <symbol>:
     атрибут внутри символа перебил бы наследование. Перечислены только контурные —
     фонарик (#i-flashlight-on) заливочный, обводка добавила бы ему лишний контур.
     Без этого нельзя было бы залить центральную иконку градиентом. */
  .tile__icon svg,
  .conn-icon svg,
  .contact__link svg,
  .switch__mark svg{stroke:currentColor;}
  .tile--primary .icon-layer--on{stroke:url(#primaryGrad);}
  .conn-icon .icon-layer--on{stroke:url(#connGrad);}
  .icon-layer{position:absolute;inset:0;transition:opacity 0.5s ease, transform 0.5s ease;}
  .icon-layer--off{color:var(--danger);opacity:1;transform:scale(1);}
  /* «Под защитой»: боковые иконки — navy. Цветная только центральная, она
     залита брендовым градиентом #primaryGrad прямо в разметке. */
  .icon-layer--on{color:var(--paper);opacity:0;transform:scale(0.8);}
  .stage[data-state="on"] .icon-layer--off{opacity:0;transform:scale(0.8);}
  .stage[data-state="on"] .icon-layer--on{opacity:1;transform:scale(1);}
  .tile--primary .icon-layer--off{color:var(--paper);}
  .pulse-ring{
    position:absolute;inset:-6px;border-radius:50%;z-index:-1;
    border:1.5px solid var(--brand-violet);opacity:0;
  }
  /* Кольцо целиком в фирменном градиенте — том же, что в заголовке.
     border градиентом залить нельзя, поэтому кольцо рисуется фоном, а середина
     вырезается radial-маской. Сплошная рамка выше остаётся запасным вариантом
     там, где mask не поддерживается. */
  @supports (mask:radial-gradient(#000,#000)) or (-webkit-mask:radial-gradient(#000,#000)){
    .pulse-ring{
      border:0;
      background-image:var(--brand-gradient);
      -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 1.5px),#000 calc(100% - 1.5px));
      mask:radial-gradient(farthest-side,#0000 calc(100% - 1.5px),#000 calc(100% - 1.5px));
    }
  }
  .stage[data-state="on"] .tile--primary .pulse-ring{
    animation:ring-pulse-far 2.4s ease-out infinite;
  }
  .stage[data-state="on"] .tile--primary .pulse-ring--2{
    animation:ring-pulse-far 2.4s ease-out infinite;animation-delay:0.8s;
  }
  .stage[data-state="on"] .tile--primary .pulse-ring--3{
    animation:ring-pulse-far 2.4s ease-out infinite;animation-delay:1.6s;
  }
  @keyframes ring-pulse-far{
    0%{opacity:0.5;transform:scale(0.9);}
    100%{opacity:0;transform:scale(2.2);}
  }
  .tile__label{display:grid;font-size:clamp(0.78rem,2.4vw,0.92rem);margin-block:0.4em;}
  .label-layer{grid-row:1;grid-column:1;transition:opacity 0.5s ease;}
  .label-layer--off{opacity:1;color:var(--paper-dim);}
  .label-layer--on{opacity:0;color:var(--paper-soft);}
  .stage[data-state="on"] .label-layer--off{opacity:0;}
  .stage[data-state="on"] .label-layer--on{opacity:1;}

  .stage__lines{position:absolute;inset:0;z-index:-1;pointer-events:none;}
  .conn-line{
    stroke-width:1;stroke-dasharray:3 6;transition:opacity 0.6s ease;
    vector-effect:non-scaling-stroke;
  }
  .conn-fade-edge{stop-color:var(--danger);stop-opacity:0;}
  .conn-fade-mid{stop-color:var(--danger);stop-opacity:0.24;}
  .stage[data-state="on"] .conn-fade-mid{stop-color:#6C6FF4;stop-opacity:0.33;}
  @keyframes conn-line-flow{to{stroke-dashoffset:-18;}}
  @media (prefers-reduced-motion: no-preference){
    .conn-line{animation:conn-line-flow 1.1s linear infinite;}
  }
  .conn-icon{
    position:absolute;left:50%;top:50%;z-index:-1;transform:translate(-50%,-50%);
    width:16px;height:16px;
  }
  @keyframes conn-icon-shimmer{
    0%,100%{opacity:0.55;}
    50%{opacity:1;}
  }
  @media (prefers-reduced-motion: no-preference){
    .conn-icon{animation:conn-icon-shimmer 2.4s ease-in-out infinite;}
    .conn-icon[data-conn-icon="right"]{animation-delay:0.6s;}
    .conn-icon[data-conn-icon="bottom"]{animation-delay:1.2s;}
  }

  /* Радиус луча — решение о размере, ему место в стилях, а не в скрипте.
     Плавная шкала вместо прежней ступеньки на 480px. Свойство типизировано:
     иначе getComputedStyle вернул бы литерал clamp(...), а скрипт читает
     радиус числом, чтобы сдвинуть луч из-под пальца на касании. */
  @property --beam-r{syntax:'<length>';inherits:true;initial-value:210px;}
  .stage{--beam-r:clamp(150px,28vw,210px);}
  .stage{cursor:grab;}
  .stage:active{cursor:grabbing;}

  .veil{
    position:absolute;inset:0;z-index:1;
    background:var(--veil);
    -webkit-mask-image:radial-gradient(circle var(--beam-r,140px) at var(--mx,50%) var(--my,30%), transparent 0%, transparent 42%, #000000D1 74%, #000000F0 100%);
    mask-image:radial-gradient(circle var(--beam-r,140px) at var(--mx,50%) var(--my,30%), transparent 0%, transparent 42%, #000000D1 74%, #000000F0 100%);
    transition:opacity 0.9s ease;
  }
  .stage[data-state="on"] .veil{opacity:0;}
  .no-mask .veil{display:none;}
  .beam-glow{
    position:absolute;z-index:1;pointer-events:none;
    width:280px;height:280px;border-radius:50%;
    left:var(--mx,50%);top:var(--my,30%);transform:translate(-50%,-50%);
    background:radial-gradient(circle, #FFFFFF2E, transparent 65%);
    mix-blend-mode:screen;transition:opacity 0.4s ease;
  }
  .stage[data-state="on"] .beam-glow{opacity:0;}

  /* ===== Форма подписки ===== */
  .signup{max-width:440px;margin:36px auto 0;text-align:center;}
  .signup__title{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,4.5vw,2rem);}
  .signup__sub{color:var(--paper-dim);font-size:0.88rem;margin-top:6px;}
  .signup__form{margin-top:16px;display:flex;flex-direction:column;gap:10px;}
  .signup__row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
  .signup__input{
    flex:1 1 200px;min-width:0;
    padding:14px 16px;border-radius:12px;
    background:var(--ink-2);border:var(--edge-control);
    color:var(--paper);font-size:0.92rem;
  }
  .signup__input::placeholder{color:var(--paper-dim);}
  /* На узких экранах поле занимает всю строку и текст-подсказка
     выглядит прижатым к краю — центрируем вместе с содержимым. */
  @media (max-width:520px){
    .signup__input{text-align:center;}
  }
  .signup__input:invalid:not(:placeholder-shown){border-color:var(--danger-dim);}
  .signup__submit{
    padding:14px 22px;border-radius:12px;
    background:var(--signal-dim);color:var(--signal-on);font-weight:600;
    white-space:nowrap;
  }
  .signup__submit:hover{background:var(--signal);}
  /* Вспомогательные ссылки внутри примечаний — без отдельного цвета, чуть ярче на hover */
  .link-quiet{
    color:inherit;text-decoration:underline;
    opacity:0.82;transition:opacity 0.15s ease;
  }
  .link-quiet:hover,
  .link-quiet:focus-visible{opacity:1;}

  .signup__consent-text{
    color:var(--paper-dim);margin-block:0 40px;font-size:0.9em;
    line-height:1.35;margin-inline:auto;
  }
  .signup__msg{font-size:0.85rem;min-height:0;}
  .signup__msg:empty{display:none;}
  .signup__msg[data-tone="error"]{color:var(--danger);}
  .signup__msg[data-tone="success"]{
    color:var(--signal-text);margin-block:0 40px;font-size:0.9em;
  }
  /* Форма отправлена: поле ввода и текст согласия уступают место сообщению.
     Состояние — классом, как has-tried и is-active в остальном коде. */
  .signup__form.is-sent .signup__row,
  .signup__form.is-sent .signup__consent-text{display:none;}
  .signup__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

  /* ===== Раздел 5 — контакты ===== */
  .contact{padding-block:0 28px;text-align:center;}
  .contact__row{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:10px 28px;
  }
  .contact__link{
    display:inline-flex;align-items:center;gap:8px;
    font-size:0.86rem;
    color:var(--paper-dim);text-decoration:none;
  }
  .contact__link svg{width:15px;height:15px;flex:none;}
  .contact__link:hover{color:var(--paper);}

  /* ===== Футер ===== */
  .site-footer{
    border-top:var(--edge);padding:32px 20px 40px;
    text-align:center;color:var(--paper-dim);font-size:0.76rem;line-height:1.6;
  }
  .site-footer__links{margin:0 0 10px;}
  .site-footer__legal{margin:0;opacity:0.7;}