/* Собственные стили проекта «НА СТАРТ» — всё, что написано вручную
   и не относится к выгрузке из Тильды.

   Разделы:
     1. Палитра и типографика
     2. Общие компоненты блоков (.na-block)
     3. Секция «Команда друзей НА СТАРТ»
     4. Копилка проекта
     5. Баннер поддержки
     6. Управление подпиской (/manage) */


/* ─── 1. Палитра и типографика ─────────────────────────────────────── */

:root{
  --na-blue:#0d6eff;
  --na-blue-dark:#1763d3;
  --na-ink:#191919;
  --na-text:#404040;
  --na-muted:#828282;
  --na-line:#d5dade;
  --na-tint:#f3fbfe;
  --na-page:#fafbf9;
  --na-danger:#c0392b;
  --na-font:'TildaSans',Arial,sans-serif;
}


/* ─── 2. Общие компоненты блоков ───────────────────────────────────── */
/* Разделяют копилка на главной и страница управления подпиской. */

.na-block *{box-sizing:border-box;font-family:var(--na-font);}
.na-block .np-wrap{max-width:1160px;margin:0 auto;padding:0 20px;}
.na-block .np-head{max-width:760px;margin:0 auto 40px;text-align:center;}
.na-block h2.np-title{margin:0 0 16px;font-size:42px;line-height:1.1;font-weight:700;color:var(--na-blue);}
.na-block .np-lead{margin:0;font-size:19px;line-height:1.55;font-weight:500;color:var(--na-text);}
.na-block .np-cap{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--na-muted);}
.na-block .np-card{max-width:560px;margin:0 auto;padding:34px 34px 30px;border-radius:24px;background:#fff;box-shadow:0 20px 50px rgba(48,108,246,.12);}
.na-block .np-cta{display:block;width:100%;padding:18px;border:0;border-radius:50px;background:var(--na-blue);color:#fff;font-family:inherit;font-size:19px;font-weight:700;cursor:pointer;transition:.15s;}
.na-block .np-cta:hover{background:var(--na-blue-dark);}
.na-block .np-safe{margin:14px 0 0;text-align:center;font-size:13px;color:var(--na-muted);}

@media screen and (max-width:640px){
  .na-block h2.np-title{font-size:30px;}
  .na-block .np-lead{font-size:17px;}
  .na-block .np-card{padding:26px 20px 24px;}
}


/* ─── 3. Секция «Команда друзей НА СТАРТ» ──────────────────────────── */
/* Десктоп — сетка 3 колонки, планшет — 2, мобильный — карусель на
   scroll-snap. Мобильные размеры повторяют исходный макет: плашка
   320×220, фото 220×160, шаг между карточками 360. */

#na-ambassadors{padding:120px 0;background-color:var(--na-tint);}
#na-ambassadors *{box-sizing:border-box;}
#na-ambassadors .na-wrap{max-width:1200px;margin:0 auto;padding:0 20px;}
#na-ambassadors .na-title{margin:0 0 45px;text-align:center;font-size:44px;line-height:1.2;font-weight:700;color:var(--na-blue);}
#na-ambassadors .na-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 40px;margin:0;padding:0;list-style:none;}
#na-ambassadors .na-card{margin:0;text-align:center;font-family:var(--na-font);}
#na-ambassadors .na-card__frame{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;border-radius:30px;overflow:hidden;background-position:center center;background-size:cover;background-repeat:no-repeat;}
#na-ambassadors .na-card__photo{display:block;width:61.1%;height:75%;object-fit:cover;}
#na-ambassadors .na-card__credit{margin:5px 0 0;font-size:8px;line-height:1.2;font-weight:400;color:var(--na-text);}
#na-ambassadors .na-card__name{margin:15px 0 0;font-size:24px;line-height:1.1;font-weight:700;color:var(--na-blue);}
#na-ambassadors .na-card__bio{margin:15px 0 0;font-size:20px;line-height:1.2;font-weight:400;color:var(--na-text);}

/* Стрелки и рука-подсказка — только там, где карусель */
#na-ambassadors .na-nav{display:none;align-items:center;justify-content:space-between;margin:0 0 24px;padding:0 32px 0 48px;}
#na-ambassadors .na-nav__hand{display:block;width:35px;height:auto;animation:na-swipe 3s ease-in-out infinite;}
#na-ambassadors .na-nav__hand.is-hidden{visibility:hidden;}
#na-ambassadors .na-nav__btns{display:flex;column-gap:20px;}
#na-ambassadors .na-nav__btn{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:0;border-radius:50%;background-color:var(--na-blue);cursor:pointer;transition:opacity .2s ease-in-out,background-color .2s ease-in-out;}
#na-ambassadors .na-nav__btn:hover{background-color:var(--na-blue-dark);}
#na-ambassadors .na-nav__btn.is-disabled{opacity:.5;}
#na-ambassadors .na-nav__btn img{display:block;width:30px;height:30px;pointer-events:none;}
#na-ambassadors .na-nav__btn--prev img{transform:rotate(180deg);}

@keyframes na-swipe{
  0%{transform:translateX(0);opacity:0}
  8%{transform:translateX(0);opacity:1}
  60%{transform:translateX(-32px);opacity:1}
  80%{transform:translateX(-32px);opacity:0}
  100%{transform:translateX(0);opacity:0}
}

/* Покачивание фотографий — повторяет анимацию исходного макета:
   поворот на ±2° с лёгким увеличением, у соседних карточек разное
   направление и темп, чтобы они не качались в такт. */
@keyframes na-photo-sway-left{
  0%,100%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(-2deg) scale(1.01)}
}
@keyframes na-photo-sway-right{
  0%,100%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(2deg) scale(1.02)}
}

#na-ambassadors .na-card__photo{animation:na-photo-sway-left 2.4s ease-in-out infinite;}
#na-ambassadors .na-card:nth-child(3n+2) .na-card__photo{animation-name:na-photo-sway-right;animation-duration:3.1s;}
#na-ambassadors .na-card:nth-child(3n) .na-card__photo{animation-duration:2.8s;}

@media (prefers-reduced-motion:reduce){
  #na-ambassadors .na-nav__hand{animation:none;opacity:1;}
  #na-ambassadors .na-card__photo{animation:none;}
}

@media screen and (max-width:1199px){
  #na-ambassadors .na-title{font-size:40px;}
  #na-ambassadors .na-list{gap:48px 32px;}
  #na-ambassadors .na-card__name{font-size:22px;}
  #na-ambassadors .na-card__bio{font-size:18px;}
}

@media screen and (max-width:959px){
  #na-ambassadors{padding:90px 0;}
  #na-ambassadors .na-title{font-size:38px;}
  #na-ambassadors .na-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  #na-ambassadors .na-card__name{font-size:20px;}
}

@media screen and (max-width:639px){
  #na-ambassadors{padding:60px 0;}
  #na-ambassadors .na-title{margin-bottom:51px;font-size:32px;line-height:1.1;}
  #na-ambassadors .na-wrap{padding:0;}
  #na-ambassadors .na-list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(320px,100%);gap:40px;padding:0 max(20px,calc((100% - 320px) / 2)) 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:max(20px,calc((100% - 320px) / 2));-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  #na-ambassadors .na-list::-webkit-scrollbar{display:none;}
  #na-ambassadors .na-card{scroll-snap-align:start;}
  #na-ambassadors .na-card__frame{aspect-ratio:16/11;}
  #na-ambassadors .na-card__photo{width:68.75%;height:72.7%;}
  #na-ambassadors .na-card__name{margin-top:10px;font-size:16px;}
  #na-ambassadors .na-card__bio{margin-top:10px;font-size:14px;}
  #na-ambassadors .na-nav{display:flex;margin-bottom:46px;padding:0 max(20px,calc((100% - 320px) / 2));}
  #na-ambassadors .na-nav__btns{column-gap:15px;}
  #na-ambassadors .na-nav__btn{width:45px;height:45px;}
  #na-ambassadors .na-nav__btn img{width:25px;height:25px;}
}

@media screen and (max-width:479px){
  #na-ambassadors .na-title{font-size:28px;}
}


/* ─── 4. Копилка проекта ───────────────────────────────────────────── */

html{scroll-behavior:smooth;}

#na-pay{padding:96px 0;background-color:var(--na-page);scroll-margin-top:100px;}
#na-pay .np-spark{display:inline-block;width:30px;height:30px;margin-bottom:16px;background:var(--na-blue);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);}
#na-pay .np-why{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin:34px 0 46px;}
#na-pay .np-why__i{flex:1 1 300px;max-width:340px;padding:24px 24px 22px;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(21,23,28,.05);text-align:left;}
#na-pay .np-why__i b{display:block;margin:10px 0 6px;font-size:17px;font-weight:700;color:var(--na-ink);}
#na-pay .np-why__i span{font-size:15px;line-height:1.5;color:var(--na-text);}
#na-pay .np-why__d{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;background:var(--na-blue);color:#fff;font-size:14px;font-weight:700;}
#na-pay .np-toggle{display:flex;margin-bottom:22px;padding:5px;border-radius:14px;background:var(--na-tint);}
#na-pay .np-toggle button{flex:1;padding:13px 8px;border:0;border-radius:11px;background:transparent;font-size:15px;line-height:1.2;font-weight:700;color:var(--na-text);cursor:pointer;transition:.15s;}
#na-pay .np-toggle button.on{background:#fff;color:var(--na-blue);box-shadow:0 2px 10px rgba(48,108,246,.14);}
#na-pay .np-toggle button small{display:block;margin-top:2px;font-size:12px;font-weight:700;color:var(--na-blue);}
#na-pay .np-pays{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:22px;}
#na-pay .np-pays button{padding:12px 4px;border:2px solid var(--na-line);border-radius:12px;background:#fff;font-size:14px;font-weight:700;color:var(--na-ink);cursor:pointer;transition:.15s;}
#na-pay .np-pays button.on{border-color:var(--na-blue);background:var(--na-tint);color:var(--na-blue);}
#na-pay .np-amts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px;}
#na-pay .np-amts button{position:relative;padding:15px 16px;border:2px solid var(--na-line);border-radius:14px;background:#fff;text-align:left;cursor:pointer;transition:.15s;}
#na-pay .np-amts button.on{border-color:var(--na-blue);background:var(--na-tint);}
#na-pay .np-amts button b{display:block;font-size:20px;font-weight:700;color:var(--na-ink);}
#na-pay .np-amts button.on b{color:var(--na-blue);}
#na-pay .np-amts button span{font-size:13px;color:var(--na-muted);}
#na-pay .np-amts button .np-rec{position:absolute;top:-10px;right:12px;padding:3px 9px;border-radius:20px;background:var(--na-blue);font-size:11px;font-weight:700;color:#fff;}
#na-pay .np-input{position:relative;margin-bottom:14px;}
#na-pay .np-input input{width:100%;padding:15px 40px 15px 16px;border:2px solid var(--na-line);border-radius:14px;font-family:inherit;font-size:18px;font-weight:700;color:var(--na-ink);outline:none;}
#na-pay .np-input input:focus{border-color:var(--na-blue);}
#na-pay .np-input span{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:18px;font-weight:700;color:var(--na-muted);}
#na-pay .np-email input{width:100%;margin-bottom:14px;padding:15px 16px;border:2px solid var(--na-line);border-radius:14px;font-family:inherit;font-size:16px;color:var(--na-ink);outline:none;}
#na-pay .np-email input:focus{border-color:var(--na-blue);}
#na-pay .np-consent{display:flex;gap:10px;align-items:flex-start;margin-bottom:18px;font-size:13px;line-height:1.45;color:var(--na-muted);}
#na-pay .np-consent input{flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--na-blue);}

@media screen and (max-width:640px){
  #na-pay{padding:60px 0;}
  #na-pay .np-pays{grid-template-columns:repeat(2,1fr);}
}


/* ─── 5. Баннер поддержки ──────────────────────────────────────────── */
/* Синяя полоса с призывом; звёздный фон навешен на обёртку блоков,
   поэтому у неё отдельный класс, а не общий .np-wrap. */

.np-stars{position:relative;overflow:hidden;background-color:var(--na-blue);background-image:url("/np-pattern-star.svg");background-size:cover;background-position:center center;background-repeat:no-repeat;}
#rec1815286271,#rec1815286281{background-color:transparent !important;background-image:none !important;}
#rec1815286271 .t396__artboard,#rec1815286271 .t396__filter,#rec1815286271 .t396__carrier,
#rec1815286281 .t396__artboard,#rec1815286281 .t396__filter,#rec1815286281 .t396__carrier{background-color:transparent !important;background-image:none !important;}

.np-band{position:relative;padding:0;overflow:visible;background:var(--na-blue);}
.np-band::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("/np-pattern.svg");background-repeat:no-repeat;background-position:center;background-size:cover;}
.np-band__in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;max-width:1200px;margin:0 auto;padding:56px 40px;}
.np-band__t{flex:1 1 420px;position:relative;z-index:2;}
.np-band__t :is(h2,h3){margin:0 0 12px;font-family:var(--na-font);font-size:34px;line-height:1.15;font-weight:700;color:#fff;}
.np-band__t p{margin:0;font-family:var(--na-font);font-size:18px;line-height:1.5;color:#fff;opacity:.92;}
.np-band__cta{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;}
.np-band__cta .np-band__btn{position:relative;z-index:1;}
.np-band__btn{box-sizing:border-box;flex:0 0 auto;padding:16px 34px;border-radius:50px;background:#fff;font-family:var(--na-font);font-size:16px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--na-blue) !important;transition:.15s;}
.np-band__btn:hover{background:#eaf1ff;color:var(--na-blue) !important;}

@media screen and (max-width:960px){
  .np-band__in{padding:44px 30px;}
  .np-band__t :is(h2,h3){font-size:28px;}
}

@media screen and (max-width:640px){
  .np-band__in{padding:34px 24px;gap:20px;}
  .np-band__t :is(h2,h3){font-size:24px;}
  .np-band__t p{font-size:16px;}
  .np-band__cta{width:100%;}
  .np-band__btn{width:100%;text-align:center;}
}


/* ─── 6. Управление подпиской (/manage) ────────────────────────────── */

body.na-page{margin:0;padding:0;background:var(--na-page);}

#na-manage{padding:56px 0 96px;background-color:var(--na-page);}
#na-manage .np-top{display:flex;align-items:center;justify-content:space-between;max-width:560px;margin:0 auto 28px;}
#na-manage .np-top img{display:block;height:38px;width:auto;max-width:180px;}
#na-manage .np-top a.back{font-size:15px;color:var(--na-muted);text-decoration:none;}
#na-manage .np-top a.back:hover{color:var(--na-blue);}
#na-manage .np-field{margin-bottom:18px;}
#na-manage .np-field input{width:100%;padding:15px 16px;border:2px solid var(--na-line);border-radius:14px;font-family:inherit;font-size:18px;font-weight:700;color:var(--na-ink);outline:none;}
#na-manage .np-field input:focus{border-color:var(--na-blue);}
#na-manage .np-hint{margin:8px 2px 0;font-size:13px;line-height:1.45;font-weight:400;color:var(--na-muted);}
#na-manage .np-captcha{margin:0 0 20px;padding:16px;border:2px dashed var(--na-line);border-radius:14px;background:var(--na-tint);text-align:center;font-size:13px;color:var(--na-muted);}
#na-manage .np-ghost{display:block;width:100%;margin-top:8px;padding:15px;border:0;background:transparent;font-family:inherit;font-size:15px;font-weight:700;color:var(--na-muted);cursor:pointer;transition:.15s;}
#na-manage .np-ghost:hover{color:var(--na-blue);}
#na-manage .np-sub{margin-bottom:22px;padding:18px;border-radius:14px;background:var(--na-tint);}
#na-manage .np-sub .amt{font-size:20px;line-height:1.2;font-weight:700;color:var(--na-blue);}
#na-manage .np-sub .row{margin-top:6px;font-size:14px;color:var(--na-muted);}
#na-manage .np-ok{margin-bottom:6px;text-align:center;font-size:40px;}
#na-manage .np-center{text-align:center;}
#na-manage .np-err{display:none;margin-top:14px;text-align:center;font-size:14px;color:var(--na-danger);}
#na-manage .np-foot{max-width:560px;margin:28px auto 0;text-align:center;font-size:13px;line-height:1.5;color:var(--na-muted);}
#na-manage .np-foot a{color:var(--na-muted);}
#na-manage .np-step{display:none;}
#na-manage .np-step.active{display:block;}

@media screen and (max-width:640px){
  #na-manage{padding:36px 0 60px;}
}

/* --- audit 07.08: семантические заголовки без визуальных изменений --- */
.na-h{margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;text-align:inherit;display:inline;}
.na-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* Пункты десктопного меню Тильда не убирает на мобильных, а уносит за край
   экрана (top:-169). Они остаются в потоке: скринридер их читает, tab по ним
   ходит, поисковик считает их частью страницы. Ниже 960px работает бургер
   (rec1500791961) — десктопные пункты выключаем.
   !important нужен потому, что display им задаёт правило Тильды с id и
   атрибутом (#rec... .tn-elem[data-elem-id=...]) прямо в теле страницы:
   оно перебивает наш файл в <head> и по специфичности, и по порядку. */
@media screen and (max-width:959px){
  #rec1500791941 .menu_top_item{display:none !important;}
}