/* =====================================================
   РЯДОМ — общие стили для всех страниц
   Подключается в каждый HTML: <link rel="stylesheet" href="assets/common.css">
   ===================================================== */

:root{
  /* Тёмная палитра */
  --black:#0b0b0d;
  --black-2:#121215;
  --black-3:#1a1a1e;
  --white:#f5f3ee;
  --soft:#8a857c;
  --soft-2:#5d594f;

  /* Светлая палитра */
  --light:#f4f1ea;
  --light-2:#ebe6db;
  --paper:#fffefb;
  --ink:#161412;
  --ink-soft:#6d655c;

  /* Линии */
  --line-d:rgba(245,243,238,.14);
  --line-d2:rgba(245,243,238,.22);
  --line-l:#dfd8cb;

  /* Акценты */
  --acid:#d6ff3f;
  --acid-deep:#b6e024;

  /* Семантика */
  --blue:#6ea8ff;
  --green:#7ee08a;
  --amber:#ffc24b;
  --red:#ff7d7d;

  /* Тайминги анимации */
  --ease-out: cubic-bezier(.16,.9,.3,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Spline Sans Mono',monospace;
  background:var(--black);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}
::selection{background:var(--acid);color:var(--black)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* Зерно */
.noise{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================================================
   PILL-НАВИГАЦИЯ (общая для всех страниц)
   ===================================================== */
.pill{
  position:fixed;top:18px;left:50%;
  transform:translateX(-50%) translateY(-120%);
  z-index:800;
  display:flex;align-items:center;gap:6px;
  background:rgba(18,18,21,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line-d2);
  border-radius:16px;
  padding:7px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
  transition:transform .5s var(--ease-out);
}
.pill.show{transform:translateX(-50%) translateY(0)}
.pill .pl-logo{
  font-family:'Bricolage Grotesque';font-weight:700;font-size:1rem;
  letter-spacing:.04em;
  background:var(--black);color:var(--acid);
  width:44px;height:42px;border-radius:11px;
  display:grid;place-items:center;flex-shrink:0;
  transition:.2s;
}
.pill .pl-logo:hover{background:#000}
.pill a{
  font-family:'Spline Sans Mono';font-size:.84rem;
  color:rgba(245,243,238,.7);
  padding:11px 16px;border-radius:11px;
  transition:.2s;white-space:nowrap;
}
.pill a:hover{color:var(--white);background:rgba(245,243,238,.06)}
.pill a.active{color:var(--white);background:rgba(245,243,238,.08)}
.pill a.cta-pill{
  background:var(--acid);color:var(--black);
  font-family:'Bricolage Grotesque';font-weight:600;
}
.pill a.cta-pill:hover{background:var(--white);transform:none}

@media(max-width:620px){
  .pill .hide-sm{display:none}
  .pill{top:10px;padding:6px}
  .pill a{padding:10px 12px;font-size:.78rem}
}

/* =====================================================
   ОБЩИЕ ЛЕЙАУТЫ
   ===================================================== */
.dark-sec{
  background:var(--black);
  padding:clamp(80px,12vw,150px) clamp(20px,4vw,52px);
  position:relative;
}
.dark-sec .inner{max-width:1320px;margin:0 auto}

.sec-label{
  font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--acid);margin-bottom:30px;
  display:flex;align-items:center;gap:12px;
}
.sec-label::before{content:"";width:30px;height:1px;background:var(--acid)}

.sec-h{
  font-family:'Bricolage Grotesque';font-weight:300;
  font-size:clamp(2rem,5.5vw,4.2rem);
  line-height:.98;letter-spacing:-.03em;
  text-transform:uppercase;
  max-width:18em;margin-bottom:18px;
}
.sec-h em{
  font-family:'Newsreader';font-style:italic;
  text-transform:none;color:var(--acid);
}

.sec-sub{
  color:rgba(245,243,238,.6);
  max-width:34em;font-size:1.02rem;line-height:1.6;
  margin-bottom:clamp(46px,6vw,80px);
}

/* =====================================================
   ФУТЕР (общий)
   ===================================================== */
footer.site-foot{
  background:var(--black);color:var(--white);
  padding:clamp(60px,8vw,100px) clamp(20px,4vw,52px) 40px;
  border-top:1px solid var(--line-d);
}
footer.site-foot .foot-in{max-width:1320px;margin:0 auto}
.foot-big{
  font-family:'Bricolage Grotesque';font-weight:300;
  font-size:clamp(2.4rem,9vw,7rem);
  line-height:.86;letter-spacing:-.04em;
  text-transform:uppercase;margin-bottom:50px;
}
.foot-big em{font-family:'Newsreader';font-style:italic;text-transform:none;color:var(--acid)}
.foot-row{
  display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:24px;
  padding-top:34px;border-top:1px solid var(--line-d);
  font-size:.82rem;color:rgba(245,243,238,.5);letter-spacing:.08em;
}
.foot-row .brand{
  font-family:'Bricolage Grotesque';font-weight:700;font-size:1.2rem;
  letter-spacing:-.02em;display:flex;align-items:center;gap:9px;
  color:var(--white);text-transform:lowercase;
}
.foot-row .brand .sq{
  width:9px;height:9px;background:var(--acid);border-radius:50%;
  animation:beat 2.6s infinite;
}
@keyframes beat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
.foot-row .links{display:flex;gap:26px;flex-wrap:wrap}
.foot-row a{transition:.2s}
.foot-row a:hover{color:var(--acid)}

/* =====================================================
   REVEAL (общий + scroll-driven)
   ===================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* Nativ scroll-driven анимации (Chrome 115+, Edge 115+) */
@supports (animation-timeline: view()){
  .sd-reveal{
    animation: sd-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
  }
  @keyframes sd-fade-up{
    from{opacity:0;transform:translateY(40px)}
    to{opacity:1;transform:none}
  }
  /* Параллакс для геро-элементов */
  .sd-parallax-slow{
    animation: sd-parallax-y linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes sd-parallax-y{
    from{transform:translateY(-8%)}
    to{transform:translateY(8%)}
  }
}

/* =====================================================
   КНОПКИ
   ===================================================== */
.btn-primary{
  font-family:'Bricolage Grotesque';font-weight:600;font-size:1rem;
  background:var(--acid);color:var(--black);
  padding:18px 30px;border-radius:2px;
  display:inline-flex;align-items:center;gap:12px;
  transition:.3s;letter-spacing:.01em;border:none;
}
.btn-primary:hover{
  background:var(--white);
  transform:translate(-3px,-3px);
  box-shadow:6px 6px 0 var(--acid);
}
.btn-primary svg{transition:.3s}
.btn-primary:hover svg{transform:translateX(4px)}

.btn-ghost{
  font-family:'Bricolage Grotesque';font-weight:500;font-size:.94rem;
  background:transparent;color:var(--white);
  padding:14px 24px;border-radius:10px;
  border:1.5px solid var(--line-d2);
  display:inline-flex;align-items:center;gap:10px;
  transition:.25s;
}
.btn-ghost:hover{border-color:var(--acid);color:var(--acid)}

/* =====================================================
   ДИСКЛЕЙМЕР (общий, на нескольких страницах)
   ===================================================== */
.disc{
  background:var(--black);border-top:1px solid var(--line-d);
  padding:40px clamp(20px,4vw,52px);
}
.disc .inner{
  max-width:1320px;margin:0 auto;
  display:flex;gap:16px;align-items:flex-start;
  background:rgba(255,125,125,.06);
  border:1px solid rgba(255,125,125,.2);
  border-radius:14px;padding:22px 26px;
}
.disc svg{flex-shrink:0;color:var(--red);margin-top:2px}
.disc b{color:var(--white);font-family:'Bricolage Grotesque';font-weight:600}
.disc p{font-size:.88rem;color:rgba(245,243,238,.65);line-height:1.6}
.disc a{color:var(--acid);text-decoration:underline}

/* =====================================================
   ОБЩИЕ КЛАССЫ ШРИФТОВ
   ===================================================== */
.bg{font-family:'Bricolage Grotesque'}
.ns{font-family:'Newsreader'}
.mn{font-family:'Spline Sans Mono'}

/* =====================================================
   УВАЖЕНИЕ ПОЛЬЗОВАТЕЛЬСКИХ НАСТРОЕК
   ===================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* Тикер — превращаем в статичный список вместо мгновенного сдвига */
  .ticker-in{
    animation:none !important;
    transform:none !important;
    flex-wrap:wrap;justify-content:center;
  }
  /* Hero-параллакс — выключаем, чтобы заголовок не дёргался */
  .giant{animation:none !important;transform:none !important;opacity:1 !important}
  /* Reveal-эффекты — показываем сразу */
  .reveal{opacity:1 !important;transform:none !important}
  .sd-reveal{animation:none !important;opacity:1 !important;transform:none !important}
}

/* =====================================================
   ОБЩИЕ ШАПКИ ВНУТРЕННИХ СТРАНИЦ (about, faq, policy)
   Вынесено из дублей в каждой странице.
   ===================================================== */
.page-head{
  padding:clamp(120px,15vw,180px) clamp(20px,4vw,52px) clamp(60px,8vw,100px);
  position:relative;overflow:hidden;
}
.page-head .inner{max-width:1320px;margin:0 auto;position:relative;z-index:2}
.page-glow{
  position:absolute;width:55vw;height:55vw;left:50%;top:0;
  transform:translate(-50%,-30%);border-radius:50%;
  background:radial-gradient(circle,rgba(214,255,63,.12),transparent 60%);
  filter:blur(40px);pointer-events:none;z-index:1;
}
.page-title{
  font-family:'Bricolage Grotesque';font-weight:300;
  font-size:clamp(3rem,9vw,7.5rem);
  line-height:.9;letter-spacing:-.04em;text-transform:uppercase;
  margin-bottom:24px;
}
.page-title em{font-family:'Newsreader';font-style:italic;text-transform:none;color:var(--acid)}
.page-lede{
  font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.6;
  max-width:36em;color:rgba(245,243,238,.72);
}

/* =====================================================
   ОБЩИЙ CTA-БЛОК В КОНЦЕ ВНУТРЕННИХ СТРАНИЦ
   ===================================================== */
.cta-block{
  margin:clamp(60px,8vw,100px) clamp(20px,4vw,52px) 0;
  max-width:1320px;margin-left:auto;margin-right:auto;
  padding:clamp(40px,6vw,72px);text-align:center;
  background:var(--acid);color:var(--black);border-radius:24px;
  position:relative;overflow:hidden;
}
.cta-block h3{
  font-family:'Bricolage Grotesque';font-weight:300;
  font-size:clamp(1.8rem,4vw,3rem);line-height:1;
  letter-spacing:-.03em;margin-bottom:14px;
  position:relative;z-index:2;
}
.cta-block h3 em{font-family:'Newsreader';font-style:italic}
.cta-block p{
  max-width:34em;margin:0 auto 28px;font-size:1rem;line-height:1.6;
  opacity:.78;position:relative;z-index:2;
}
.cta-block .btn-primary{
  background:var(--black);color:var(--acid);
  position:relative;z-index:2;
}
/* Тень для CTA-кнопки — без смещения, чтобы на жёлтом фоне не выглядела как съезжающая надпись */
.cta-block .btn-primary:hover{
  background:#000;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.5);
  transform:translateY(-2px);
}


/* =====================================================
   СОВРЕМЕННЫЕ УЛУЧШЕНИЯ · 2026   (строго чёрный + лайм)
   Сдержанная, осмысленная анимация. Уважает reduced-motion.
   ===================================================== */

/* 1 · Плавные кросс-страничные переходы (View Transitions API, Chrome/Edge) */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-out .26s var(--ease-in-out) both; }
::view-transition-new(root){ animation:vt-in .34s var(--ease-out) both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-6px) } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px) } }

/* 2 · Индикатор прогресса прокрутки — чистый CSS (scroll-timeline), JS-фолбэк в common.js */
.scroll-progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:9999;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--acid), var(--acid-deep));
  pointer-events:none;
}
@supports (animation-timeline: scroll(root)){
  .scroll-progress{ animation:sp-grow linear both; animation-timeline:scroll(root); }
  @keyframes sp-grow{ to{ transform:scaleX(1) } }
}

/* 3 · Доступный фокус с клавиатуры */
:focus-visible{ outline:2px solid var(--acid); outline-offset:3px; border-radius:3px; }
:focus:not(:focus-visible){ outline:none; }

/* 4 · Анимированное лаймовое подчёркивание ссылок футера */
.foot-row .links a{ position:relative; }
.foot-row .links a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0;
  background:var(--acid); transition:width .3s var(--ease-out);
}
.foot-row .links a:hover::after{ width:100%; }

/* 5 · «Магнитные» кнопки — JS двигает через свойство translate (не конфликтует с transform) */
.magnetic{ transition:translate .22s var(--ease-out); }

/* 6 · Курсорный свет на тёмных карточках (JS подставляет --mx/--my) */
.glow-card{ position:relative; isolation:isolate; }
.glow-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:0; opacity:0; transition:opacity .4s var(--ease-out);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(214,255,63,.12), transparent 60%);
}
.glow-card:hover::after{ opacity:1; }
.glow-card > *{ position:relative; z-index:1; }

/* 7 · Тактильный «поп» выбранного варианта (длительность / время в форме) */
@keyframes pick-pop{ 0%{transform:scale(.94)} 60%{transform:scale(1.03)} 100%{transform:scale(1)} }

@media (prefers-reduced-motion: reduce){
  .scroll-progress{ display:none; }
  ::view-transition-old(root),::view-transition-new(root){ animation:none !important; }
  .magnetic{ translate:none !important; }
}