/* =========================================================
   Apollo Exchange - лендинг (редизайн 10.08: трёхколоночная оболочка)
   Тёмная премиальная тема уровня apolloproduction.studio, без зависимостей.

   Палитра - серебро с холодным синим подтоном (НЕ бирюза):
     INK #0e1013 · CHROME #c9d2da · MUTED #8c96a0 · ACC #c8ced8
   Один яркий акцент на всё - приглушённое серебро #c8ced8. Жёлтый (#e6c37c) -
   точечно, только цифра курса. Зелёного нет.

   Каскад адаптива переписан ЦЕЛИКОМ:
     - Оболочка (панели слева/справа) переключается по ШИРИНЕ ОКНА:
         >=1360  полные панели (300 / 320)
         1200-1359  узкие панели (240 / 260) - центр НЕ зажимается
         <1200  панели уходят в мобильный режим (нижняя панель + шторка)
     - Содержимое центра перестраивается по СВОЕЙ ширине через @container,
       а не по ширине окна: поэтому узкие панели на 1200-1360 не ломают вёрстку,
       и «мёртвой зоны» 641-899 больше нет.
   ========================================================= */

:root{
  /* фон и поверхности */
  --bg:        #0e1013;
  --bg-alt:    #101318;
  --bg-soft:   #12161c;
  --surface:   rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.06);
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.15);

  /* текст */
  --text:      #cdd5dd;
  --text-2:    #939da7;
  --muted:     #6f7883;

  /* акцент - один приглушённый серебристо-синий */
  --accent:    #c8ced8;
  --accent-2:  #8a97a5;
  --accent-bg: rgba(200,206,216,.10);
  --accent-line: rgba(200,206,216,.28);
  --tg:        #c8ced8;

  /* служебные состояния - приглушённый металл */
  --warn:      #c2a878;
  --warn-bg:   rgba(194,168,120,.08);
  --danger:    #c98b83;
  --up:        #7fb39a;   /* рост курса - приглушённый, не кислотный */
  --down:      #c98b83;   /* падение */
  --gold:      #e6c37c;   /* единственное жёлтое пятно - цифра курса */

  /* гарнитуры */
  --font-display: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* масштаб кегля */
  --fs-100: 11.5px;
  --fs-200: 12.5px;
  --fs-300: 14px;
  --fs-400: 16px;
  --fs-500: 17.5px;
  --fs-600: clamp(19px, 1.4vw, 21px);
  --fs-700: clamp(26px, 3vw, 38px);
  --fs-800: clamp(33px, 4.4vw, 56px);

  --measure: 64ch;
  --measure-tight: 46ch;

  /* металл (заливка текста) */
  --metal:      linear-gradient(100deg,#6b747d 0%,#e7eef4 34%,#8b949d 50%,#f4f8fb 66%,#79828b 100%);
  --metal-text: linear-gradient(100deg,#b3c0ca 0%,#f4fafd 30%,#cdd9e2 50%,#ffffff 68%,#bccad4 100%);

  /* геометрия */
  --r-xs: 12px;
  --r-sm: 16px;
  --r-md: 20px;
  --r-lg: 24px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* тайминги */
  --t-fast: 140ms cubic-bezier(.22,.61,.36,1);
  --t-base: 300ms cubic-bezier(.22,.61,.36,1);
  --t-slow: 560ms cubic-bezier(.16,.84,.44,1);

  /* ---- СТЕКЛО (.al-card): двойной градиент + волосяная кромка + внутренний
     блик + подъём на hover. Свет всегда падает сверху: верхняя кромка яркая,
     нижняя в тень. Материал держится на слоях, а не на одной рамке. ---- */
  --glass-fill: linear-gradient(168deg,
                  rgba(255,255,255,.085) 0%,
                  rgba(255,255,255,.042) 48%,
                  rgba(255,255,255,.022) 100%);
  --glass-line: rgba(255,255,255,.12);
  --glass-shadow:
      inset 0 1px 0 rgba(255,255,255,.42),
      inset 1px 0 0 rgba(255,255,255,.12),
      inset -1px 0 0 rgba(255,255,255,.05),
      inset 0 -1px 0 rgba(0,0,0,.34),
      0 18px 40px -26px rgba(0,0,0,.9),
      0 4px 12px -8px rgba(0,0,0,.55);
  --glass-shadow-hi:
      inset 0 1px 0 rgba(255,255,255,.55),
      inset 1px 0 0 rgba(255,255,255,.16),
      inset 0 -1px 0 rgba(0,0,0,.34),
      0 26px 52px -26px rgba(0,0,0,.95),
      0 6px 16px -8px rgba(0,0,0,.6);

  /* z-порядок (требование задачи):
     панели 40 < header 60 < мобильная шторка 65 < тоггл 70 < модалка 90 */
  --z-side: 40;
  --z-header: 60;
  --z-sheet: 65;
  --z-toggle: 70;
  --z-modal: 90;

  --maxw: 1160px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-text);
  font-size:var(--fs-400);
  line-height:1.62;
  font-feature-settings:"liga" 1,"kern" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3{
  margin:0; font-family:var(--font-display);
  line-height:1.13; letter-spacing:-.024em; font-weight:600;
  text-wrap:balance;
}
h1{ font-weight:640; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
b{ font-weight:640; color:var(--text); }
code{ font-family:var(--font-mono); font-size:.9em; background:var(--surface-2);
      padding:2px 6px; border-radius:7px; color:var(--text); }

::selection{ background:rgba(200,206,216,.28); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* --------------------- фоновые слои --------------------- */
.bg-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(820px 480px at 74% -8%, rgba(200,206,216,.11), transparent 62%),
    radial-gradient(620px 420px at 4% 6%,  rgba(150,166,182,.08), transparent 60%),
    radial-gradient(700px 520px at 60% 108%, rgba(200,206,216,.05), transparent 66%);
}
.bg-glow::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:66px 66px;
  mask-image:radial-gradient(1000px 680px at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(1000px 680px at 50% 0%, #000 0%, transparent 78%);
}

/* --------------------- сетка контента --------------------- */
.wrap{
  width:100%; max-width:var(--maxw);
  margin:0 auto; padding:0 28px;
  position:relative; z-index:1;
}
.wrap--narrow{ max-width:840px; }

/* =========================================================
   ОБОЛОЧКА: три колонки на десктопе
   ========================================================= */
.shell{ position:relative; }

/* Центр - всегда контейнер: его блоки перестраиваются по СВОЕЙ ширине
   и на десктопе (узкие панели), и в мобильном режиме (панели скрыты). */
.center{ min-width:0; container-type:inline-size; container-name:center; }
.side{ display:block; }

/* Панели видимы как колонки только на широком экране (>=1200).
   Ниже - мобильный режим (см. блок «МОБИЛЬНАЯ ОБОЛОЧКА»). */
@media (max-width:1199px){
  .side--left, .side--right{ position:fixed; }
}

@media (min-width:1200px){
  .shell{
    display:grid;
    grid-template-columns:240px minmax(0,1fr) 260px;   /* узкие панели - центр не зажат */
    align-items:start;
  }
  .side{
    position:sticky; top:0; align-self:start;
    height:100vh; overflow-y:auto; overflow-x:hidden;
    z-index:var(--z-side);
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent;
  }
  .side::-webkit-scrollbar{ width:8px; }
  .side::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px;
    border:2px solid transparent; background-clip:content-box; }
  .side__inner{
    min-height:100%; display:flex; flex-direction:column; gap:14px;
    padding:78px 14px 20px;
  }
  .side--left .side__inner{ padding-left:16px; }
  .side--right .side__inner{ padding-right:16px; }
}
@media (min-width:1360px){
  .shell{ grid-template-columns:300px minmax(0,1fr) 320px; }
  .side__inner{ padding-left:18px; padding-right:18px; }
}

/* =========================================================
   СТЕКЛО .al-card - общий материал карточек
   двойной градиент (заливка + акцент слева) · волосяная кромка ·
   внутренний блик сверху · подъём на hover
   Размытие НЕ вешаем на прокручиваемые карточки (бюджет composite):
   blur живёт только на фиксированных поверхностях (шапка, панели, модалка).
   ========================================================= */
.calc, .card, .svc, .guard, .step, .honest, .offline, .faq,
.trust li, .spot, .qcard, .market, .feed, .modal__dialog{
  position:relative; isolation:isolate;
  background:var(--glass-fill);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-shadow);
}
/* Двойной градиент: верхний блик + акцентный отсвет слева. z-index:-1 держит
   его над фоном карточки, но под текстом (isolation:isolate выше). */
.calc::before, .card::before, .svc::before, .guard::before, .step::before,
.honest::before, .offline::before, .trust li::before, .spot::before,
.qcard::before, .market::before, .feed::before, .modal__dialog::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(104deg, rgba(200,206,216,.13) 0%, rgba(200,206,216,.02) 34%, transparent 52%);
}
/* Подъём: только transform + цвет контура (тень статична - не греем композитор) */
.card, .svc, .guard, .step, .qcard{
  transition:transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.card:hover, .svc:hover, .guard:hover, .step:hover, .qcard:hover{
  transform:translateY(-3px);
  border-color:var(--line-2);
  box-shadow:var(--glass-shadow-hi);
}

/* =========================================================
   ИКОНОЧНАЯ СИСТЕМА
   ========================================================= */
.ae-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{
  width:24px; height:24px; flex:0 0 auto; fill:none;
  stroke:url(#aeMetal); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  color:var(--accent); vector-effect:non-scaling-stroke;
}
.ico--neon{ stroke:url(#aeNeon); }
.ico--rust{ stroke:url(#aeRust); color:var(--danger); }
.ico--metal{ stroke:url(#aeMetal); }
.ico--sm{ width:20px; height:20px; stroke-width:1.75; }
.ico--xs{ width:14px; height:14px; stroke-width:2; }
.btn--primary .ico{ stroke:#11161c; color:#11161c; }

/* =========================================================
   КНОПКИ
   ========================================================= */
.btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:48px; padding:0 22px;
  border-radius:var(--r-pill); border:1px solid transparent;
  font-family:var(--font-display); font-size:15px; font-weight:600; letter-spacing:-.005em;
  cursor:pointer; white-space:nowrap; overflow:hidden;
  transition:transform var(--t-fast), background var(--t-fast),
             border-color var(--t-fast), color var(--t-fast);
}
.btn:active{ transform:translateY(1px); }
.btn::before{   /* верхний блик пилюли */
  content:""; position:absolute; left:0; right:0; top:0; height:52%; z-index:-1;
  pointer-events:none;
  border-radius:var(--r-pill) var(--r-pill) 40% 40% / 999px 999px 100% 100%;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 90%);
}
.btn svg{ flex:0 0 auto; }

/* Главная - фрезерованная металлическая пластина */
.btn--primary{
  color:#0a1015;
  background:linear-gradient(180deg,#f4f8fb 0%,#d6dfe6 44%,#b8c1c9 56%,#e4ebef 100%);
  border-color:rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 14px 30px -18px rgba(200,206,216,.5),
    0 4px 12px -8px rgba(0,0,0,.75);
}
.btn--primary::before{ background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 62%); }
.btn--primary::after{
  content:""; position:absolute; left:14px; right:12px; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(200,206,216,.85), transparent);
}
.btn--primary:hover{
  background:linear-gradient(180deg,#ffffff 0%,#e1e8ed 44%,#c4cdd5 56%,#eef4f8 100%);
  border-color:rgba(200,206,216,.8);
}

/* Telegram - стекло с акцентной кромкой */
.btn--tg{
  background:linear-gradient(180deg, rgba(200,206,216,.2), rgba(200,206,216,.06));
  color:#e9ecef; border-color:rgba(200,206,216,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 12px 26px -18px rgba(0,0,0,.85);
}
.btn--tg:hover{
  background:linear-gradient(180deg, rgba(200,206,216,.3), rgba(200,206,216,.1));
  border-color:rgba(200,206,216,.6); color:#f4f6f8;
}

.btn--ghost{
  background:var(--glass-fill); color:var(--text); border-color:var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px -18px rgba(0,0,0,.8);
}
.btn--ghost:hover{ background:var(--surface-2); border-color:rgba(255,255,255,.24); }

.btn--sm{ height:38px; padding:0 15px; font-size:var(--fs-300); }
.btn--lg{ height:56px; padding:0 30px; font-size:var(--fs-500); }
.btn--full{ width:100%; }

/* =========================================================
   ШАПКА
   ========================================================= */
.header{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(14,16,19,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-base), background var(--t-base);
}
.header.is-stuck{ border-bottom-color:var(--line); background:rgba(14,16,19,.9); }
.header__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  height:66px;
}
.logo{ display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; }
.logo__mark{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(200,206,216,.14), rgba(255,255,255,.04));
  border:1px solid rgba(200,206,216,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 6px 16px -8px rgba(0,0,0,.5);
  transition:transform var(--t-fast);
}
.logo__mark .ico{ width:22px; height:22px; }
.logo:hover .logo__mark{ transform:translateY(-1px); }
.logo__text{ font-weight:640; letter-spacing:-.02em; font-size:16px; }
.logo__text em{ font-style:normal; color:var(--text-2); font-weight:500; }

.nav{ display:none; gap:24px; justify-self:center; }
.nav a{
  font-size:14.5px; color:var(--text-2); position:relative; padding:4px 0;
  transition:color var(--t-fast);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-base);
}
.nav a:hover{ color:var(--text); }
.nav a:hover::after{ transform:scaleX(1); }
.header__right{ display:flex; align-items:center; gap:12px; justify-self:end; }

/* Навигация в шапке появляется, когда центр реально широкий (по @container) */
@container center (min-width:820px){ .nav{ display:flex; } }

/* =========================================================
   ЛЕВАЯ ПАНЕЛЬ: СПОТЛАЙТ УСЛУГ
   ========================================================= */
.spot{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:12px; }
.spot__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.spot__eyebrow{
  font-family:var(--font-mono); font-size:var(--fs-200); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}
.spot__dots{ display:flex; gap:6px; }
.spot__dot{
  width:7px; height:7px; border-radius:50%; padding:0; cursor:pointer;
  background:rgba(255,255,255,.16); border:0;
  transition:background var(--t-fast), transform var(--t-fast);
}
.spot__dot:hover{ transform:scale(1.2); }
.spot__dot.is-on{ background:var(--accent); box-shadow:0 0 0 3px rgba(200,206,216,.14); }

.spot__stage{ position:relative; min-height:214px; }
.spot__card{
  position:absolute; inset:0;
  display:flex; flex-direction:column; gap:10px;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity var(--t-base), transform var(--t-base);
}
.spot__card.is-on{ opacity:1; transform:none; pointer-events:auto; }
.spot__ico{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 18px -12px rgba(0,0,0,.85);
}
.spot__ico .ico{ width:26px; height:26px; }
.spot__title{ font-size:19px; font-weight:640; letter-spacing:-.02em; }
.spot__desc{ font-size:13.5px; color:var(--text-2); line-height:1.55; }
.spot__cta{
  margin-top:auto; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.01em;
  color:var(--accent);
}
.spot__cta .ico{ width:16px; height:16px; transition:transform var(--t-fast); }
.spot__card:hover .spot__cta .ico{ transform:translateX(3px); }

/* быстрые разделы */
.qnav{ display:flex; flex-direction:column; gap:8px; }
.qcard{
  display:flex; align-items:center; gap:11px; padding:11px 13px;
  border-radius:var(--r-sm) !important; color:var(--text);
}
.qcard__ico{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
}
.qcard__ico .ico{ width:18px; height:18px; }
.qcard__t{ font-size:14px; font-weight:560; letter-spacing:-.01em; }

/* =========================================================
   ПРАВАЯ ПАНЕЛЬ: КРИПТОРЫНОК + ЛЕНТА
   ========================================================= */
.panel__head{
  display:flex; align-items:center; gap:9px;
  padding:14px 16px 12px;
}
.panel__ico{
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--accent-bg); border:1px solid rgba(200,206,216,.22);
}
.panel__ico .ico{ width:16px; height:16px; }
.panel__title{ font-family:var(--font-display); font-weight:640; font-size:14.5px; letter-spacing:-.01em; }
.market__stamp{
  margin-left:auto; font-family:var(--font-mono); font-size:10.5px;
  color:var(--muted); letter-spacing:.01em; white-space:nowrap;
}
.market__stamp[data-placeholder="true"]{ color:var(--warn); }

.market__list{ padding:0 8px 14px; }
.mrow{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:4px 10px; padding:9px 10px; border-radius:12px;
  transition:background var(--t-fast);
}
.mrow:hover{ background:rgba(255,255,255,.03); }
.mrow__sym{
  grid-row:1 / span 2; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; font-family:var(--font-mono); font-size:10.5px;
  font-weight:600; color:var(--accent);
  background:var(--accent-bg); border:1px solid rgba(200,206,216,.2);
}
.mrow__name{ font-size:13px; color:var(--text); font-weight:560; align-self:end; line-height:1.1; }
.mrow__pair{ font-size:10.5px; color:var(--muted); font-family:var(--font-mono); align-self:start; }
.mrow__price{
  grid-row:1; text-align:right; font-family:var(--font-mono); font-size:13px;
  font-weight:600; color:var(--text); font-variant-numeric:tabular-nums;
}
.mrow__price[data-placeholder="true"]{ color:var(--muted); }
.mrow__chg{
  grid-row:2; text-align:right; font-family:var(--font-mono); font-size:11px;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.mrow__chg.is-up{ color:var(--up); }
.mrow__chg.is-down{ color:var(--down); }

/* лента новостей */
.feed{ flex:1 1 auto; display:flex; flex-direction:column; min-height:220px; }
.feed__list{
  flex:1; overflow-y:auto; padding:0 10px 12px; display:flex; flex-direction:column; gap:8px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent;
}
.fcard{
  display:flex; flex-direction:column; gap:6px; width:100%; text-align:left;
  padding:12px 13px; border-radius:14px; cursor:pointer;
  background:linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  border:1px solid var(--line); color:var(--text);
  font:inherit;
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.fcard:hover{ background:var(--surface-2); border-color:var(--line-2); transform:translateY(-1px); }
.fcard__kicker{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent);
}
.fcard__title{ font-size:12.5px; line-height:1.42; color:var(--text-2); }
.fcard:hover .fcard__title{ color:var(--text); }
.fcard__more{
  display:inline-flex; align-items:center; gap:5px; margin-top:1px;
  font-family:var(--font-mono); font-size:10.5px; color:var(--muted);
}
.fcard__more .ico{ width:13px; height:13px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding:64px 0 84px; }
.hero__grid{ display:grid; grid-template-columns:1fr; gap:44px; align-items:start; }
/* min-width:0 обязателен: без него grid-элемент не сжимается ниже min-content
   своего содержимого (например, кнопка на всю ширину с nowrap-текстом), и
   калькулятор вылезал из центральной колонки под правую панель. */
.hero__copy, .calc{ min-width:0; }
.btn--full{ white-space:normal; }
/* когда герой в один столбец - калькулятор не растягиваем во всю ширину */
.calc{ max-width:520px; }

.pill{
  display:inline-flex; align-items:center; gap:9px;
  min-height:32px; padding:6px 14px 6px 12px;
  border:1px solid var(--line-2); border-radius:999px;
  background:var(--surface); font-size:13px; color:var(--text-2); letter-spacing:-.005em;
  margin-bottom:26px; line-height:1.35;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 10px -8px rgba(0,0,0,.6);
}
.pill__dot{
  position:relative; width:6px; height:6px; border-radius:50%; background:var(--accent);
  flex:0 0 auto; box-shadow:0 0 0 3px rgba(200,206,216,.16);
}
.pill__dot::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  background:rgba(200,206,216,.16); animation:pulse 2.6s ease-in-out infinite;
  will-change:transform, opacity;
}
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.9); opacity:.28; } }

h1{ font-size:var(--fs-800); font-weight:640; letter-spacing:-.032em; }
h1 .accent{
  background:linear-gradient(100deg,#a9c2d0 0%,#eef7fb 30%,#c6dae5 50%,#ffffff 68%,#b2cad8 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.lead{ margin-top:22px; font-size:var(--fs-500); color:var(--text-2); max-width:var(--measure); line-height:1.62; }
.hero__cta{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }

.trust{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px; margin-top:38px; background:transparent; border:0;
}
.trust li{ padding:15px 17px; display:flex; flex-direction:column; gap:3px; border-radius:var(--r-sm); }
.trust b{ font-size:14.5px; }
.trust span{ font-size:13px; color:var(--muted); line-height:1.45; }

/* --------- калькулятор --------- */
.calc{ padding:24px; }
.calc__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.calc__title{ font-family:var(--font-display); font-size:var(--fs-500); font-weight:640; }
.calc__badge{
  font-family:var(--font-mono); font-size:var(--fs-100); color:var(--warn);
  background:var(--warn-bg); border:1px solid rgba(194,168,120,.24);
  padding:4px 9px; border-radius:999px; white-space:nowrap;
}
.seg{
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px; padding:5px;
  background:linear-gradient(180deg, rgba(0,0,0,.26), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--r-pill);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.1);
  margin-bottom:18px;
}
.seg__btn{
  height:40px; border:1px solid transparent; border-radius:var(--r-pill);
  background:transparent; color:var(--text-2);
  font-size:var(--fs-300); font-weight:500; font-family:var(--font-mono); letter-spacing:.02em;
  cursor:pointer; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.seg__btn:hover{ color:var(--text); background:rgba(255,255,255,.045); }
.seg__btn.is-active{
  color:var(--accent);
  background:linear-gradient(180deg, rgba(200,206,216,.22), rgba(200,206,216,.07));
  border-color:rgba(200,206,216,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px -6px rgba(0,0,0,.7);
}
.field__label{
  display:block; font-family:var(--font-mono); font-size:var(--fs-200);
  letter-spacing:.005em; text-transform:uppercase; color:var(--muted); margin-bottom:7px;
}
.field__box{
  display:flex; align-items:center; gap:10px; padding:0 16px; height:60px;
  background:linear-gradient(180deg, rgba(0,0,0,.24), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.1); border-radius:var(--r-md);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.14);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field__box:focus-within{
  border-color:rgba(200,206,216,.45);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4), 0 0 0 3px rgba(200,206,216,.14);
}
.field__input{
  flex:1 1 auto; min-width:0; background:transparent; border:0; outline:none;
  color:var(--text); font-family:var(--font-mono); font-size:24px; font-weight:500;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; padding:0;
}
.field__input--out{ color:var(--accent); }
.field__cur{
  flex:0 0 auto; font-family:var(--font-mono); font-size:var(--fs-300); font-weight:500;
  color:var(--text-2); padding:6px 11px; border-radius:var(--r-pill);
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.field--out .field__box{
  background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(200,206,216,.12));
  border-color:rgba(200,206,216,.24);
}
.swap{
  display:grid; place-items:center; width:40px; height:40px; margin:-11px auto; position:relative; z-index:2;
  border-radius:50%; cursor:pointer; color:var(--text-2);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 6px 14px -8px rgba(0,0,0,.8);
  transition:transform var(--t-base), color var(--t-fast), border-color var(--t-fast);
}
.swap:hover{ color:var(--accent); border-color:rgba(200,206,216,.4); transform:rotate(180deg); }
.hint{ font-family:var(--font-mono); font-size:var(--fs-200); color:var(--muted); margin-top:10px; transition:color var(--t-fast); }
.hint.is-error{ color:var(--danger); }
.calc__rate{
  position:relative; display:flex; flex-direction:column; gap:3px; margin:16px 0 18px; padding:13px 15px;
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.09); border-radius:var(--r-md);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.36), inset 0 -1px 0 rgba(255,255,255,.16);
}
.calc__rate::after{
  content:""; position:absolute; left:14px; right:14px; top:-1px; height:1px;
  background:var(--metal); opacity:.5;
}
.calc__rate span:first-child{
  font-family:var(--font-mono); font-size:16px; font-weight:600; color:var(--gold);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.calc__rate-note{ font-size:var(--fs-200); color:var(--muted); line-height:1.45; }
.calc__kzt{ font-size:12.5px; color:var(--text-2); line-height:1.52; margin:0 0 16px; }
.calc__disclaimer{ font-size:11.8px; color:var(--muted); margin-top:12px; line-height:1.5; text-align:center; }

/* =========================================================
   СЕКЦИИ
   ========================================================= */
.section{ padding:88px 0; position:relative; }
.section--alt{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section__head{ max-width:740px; margin-bottom:46px; position:relative; padding-left:18px; }
.section__head::before{
  content:""; position:absolute; left:0; top:2px; bottom:6px; width:2.5px; border-radius:2px;
  background:linear-gradient(180deg, var(--accent), rgba(200,206,216,0)); opacity:.85;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:var(--fs-200); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
.eyebrow::after{ content:""; width:34px; height:1px; flex:0 0 auto; background:var(--metal); opacity:.55; }
.section h2{
  font-size:var(--fs-700);
  background:var(--metal-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.section__lead{ margin-top:16px; font-size:var(--fs-500); color:var(--text-2); line-height:1.62; max-width:var(--measure); }

/* --------- сравнение --------- */
.vs{ display:grid; grid-template-columns:1fr; gap:16px; }
.vs__col{ border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; background:var(--surface); }
.vs__col--good{
  background:linear-gradient(180deg, rgba(200,206,216,.06), rgba(200,206,216,.015));
  border-color:rgba(200,206,216,.24);
}
.vs__col h3{ display:flex; align-items:center; gap:11px; font-size:17px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.vs__ico{
  display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; border-radius:11px;
  background:rgba(201,139,131,.08); border:1px solid rgba(201,139,131,.2);
}
.vs__ico--good{ background:var(--accent-bg); border-color:rgba(200,206,216,.26); }
.vs__col li{ position:relative; padding-left:26px; margin-bottom:13px; font-size:15px; color:var(--text-2); line-height:1.55; }
.vs__col li:last-child{ margin-bottom:0; }
.vs__col li::before{ content:""; position:absolute; left:2px; top:9px; width:9px; height:2px; border-radius:2px; background:var(--danger); opacity:.75; }
.vs__col--good li::before{
  content:""; left:1px; top:6px; width:11px; height:6px; background:none;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  border-radius:1px; transform:rotate(-45deg); opacity:.95;
}

/* --------- шаги --------- */
.steps{ display:grid; grid-template-columns:1fr; gap:16px; }
.step{ padding:26px 22px 24px; }
.step__num{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--accent);
  margin-bottom:14px; font-variant-numeric:tabular-nums;
  border:1.5px solid rgba(200,206,216,.55);
  box-shadow:0 0 0 4px rgba(200,206,216,.06), inset 0 0 12px rgba(200,206,216,.1);
}
.step h3{ font-size:16.5px; margin-bottom:9px; }
.step p{ font-size:14.5px; color:var(--text-2); line-height:1.58; }
.step--final{
  background:linear-gradient(180deg, rgba(200,206,216,.08), rgba(200,206,216,.02));
  border-color:rgba(200,206,216,.28);
}

/* --------- карточки опций / услуг --------- */
.cards{ display:grid; grid-template-columns:1fr; gap:16px; }
.card{ padding:26px 24px; display:flex; flex-direction:column; gap:11px; }
.card__ico{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:2px; border-radius:15px;
  background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -10px rgba(0,0,0,.85);
}
.card__tag{
  align-self:flex-start; font-family:var(--font-mono); font-size:var(--fs-100); font-weight:500;
  letter-spacing:.03em; text-transform:uppercase; padding:5px 10px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-2);
}
.card__tag--accent{ background:var(--accent-bg); border-color:rgba(200,206,216,.26); color:var(--accent); }
.card h3{ font-size:19px; }
.card p{ font-size:14.5px; color:var(--text-2); line-height:1.58; }
.card__for{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); color:var(--muted) !important; font-size:13.5px !important; }

/* услуги (пробив адреса / 115-ФЗ) */
.svc{ padding:26px 24px; display:flex; flex-direction:column; gap:13px; }
.svc__ico{
  width:48px; height:48px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -10px rgba(0,0,0,.85);
}
.svc h3{ font-size:19px; }
.svc p{ font-size:14.5px; color:var(--text-2); line-height:1.6; }
.svc__list{ display:flex; flex-direction:column; gap:8px; }
.svc__list li{ position:relative; padding-left:22px; font-size:13.5px; color:var(--text-2); line-height:1.5; }
.svc__list li::before{
  content:""; position:absolute; left:2px; top:6px; width:9px; height:6px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  border-radius:1px; transform:rotate(-45deg); opacity:.9;
}
.svc .btn{ margin-top:auto; }

/* --------- гарантии --------- */
.guards{ display:grid; grid-template-columns:1fr; gap:16px; }
.guard{ padding:24px 22px; }
.guard__ico{
  position:relative; display:grid; place-items:center; width:46px; height:46px; margin-bottom:16px; border-radius:15px;
  background:linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -10px rgba(0,0,0,.85);
}
.guard h3{ font-size:16px; margin-bottom:8px; }
.guard p{ font-size:14.5px; color:var(--text-2); line-height:1.58; }
.card__ico .ico, .guard__ico .ico, .svc__ico .ico{ stroke:url(#aeNeon); }

.honest{
  margin-top:26px; padding:28px; display:flex; flex-direction:column; gap:13px;
  border:1px solid rgba(194,168,120,.28) !important;
  background:linear-gradient(180deg, rgba(194,168,120,.09), rgba(194,168,120,.03)) !important;
}
.honest::before{ background:linear-gradient(104deg, rgba(230,195,124,.1), transparent 46%) !important; }
.honest__label{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--warn); }
.honest p{ font-size:15.5px; color:var(--text-2); line-height:1.62; max-width:var(--measure); }
.honest__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:3px; }

/* --------- офлайн --------- */
.offline{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; padding:40px; }
.offline__copy h2{ font-size:clamp(24px,3vw,32px); margin:0 0 16px;
  background:var(--metal-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.offline__copy p{ font-size:15.5px; color:var(--text-2); line-height:1.62; margin-bottom:12px; max-width:var(--measure); }
.offline__rules{ margin:20px 0 26px; display:flex; flex-direction:column; gap:11px; }
.offline__rules li{ position:relative; padding-left:24px; font-size:14.5px; color:var(--text-2); line-height:1.5; }
.offline__rules li::before{ content:""; position:absolute; left:2px; top:8px; width:7px; height:7px; border-radius:50%; border:2px solid var(--accent); opacity:.85; }
.offline__map-img{
  width:100%; height:auto; aspect-ratio:1120/800;
  border:1px solid var(--line); border-radius:var(--r-lg); background:rgba(0,0,0,.3);
}

/* --------- FAQ --------- */
.faq{ overflow:hidden; }
.faq__item{ border-bottom:1px solid var(--line); background:transparent !important; box-shadow:none !important; border-left:0; border-right:0; border-top:0; border-radius:0 !important; }
.faq__item::before{ display:none; }
.faq__item:last-child{ border-bottom:0; }
.faq__item summary{
  list-style:none; cursor:pointer; padding:19px 52px 19px 22px; position:relative;
  font-size:16px; font-weight:560; letter-spacing:-.012em;
  transition:background var(--t-fast), color var(--t-fast);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ background:rgba(255,255,255,.03); }
.faq__item summary::after{
  content:""; position:absolute; right:22px; top:50%; width:9px; height:9px; margin-top:-6px;
  border-right:1.8px solid var(--muted); border-bottom:1.8px solid var(--muted);
  transform:rotate(45deg); transition:transform var(--t-base), border-color var(--t-fast);
}
.faq__item[open] summary{ color:var(--accent); }
.faq__item[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; border-color:var(--accent); }
.faq__body{ padding:0 52px 20px 22px; animation:faqIn var(--t-base) both; }
.faq__body p{ font-size:15px; color:var(--text-2); line-height:1.65; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.faq__foot{ margin-top:22px; font-size:14px; color:var(--muted); line-height:1.6; text-align:center; max-width:70ch; margin-inline:auto; }

/* --------- финальный CTA --------- */
.final{ padding:92px 0 100px; }
.final__inner{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.final__copy{ max-width:var(--measure-tight); }
.final h2{ font-size:clamp(26px,3.4vw,40px);
  background:var(--metal-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.final p{ margin-top:14px; font-size:var(--fs-500); color:var(--text-2); max-width:var(--measure-tight); }

/* --------- футер --------- */
.footer{ border-top:1px solid var(--line); background:var(--bg-alt); padding:52px 0 34px; }
.footer__grid{ display:grid; grid-template-columns:1fr; gap:30px; }
.footer__brand p{ margin-top:14px; font-size:14px; color:var(--muted); line-height:1.6; max-width:40ch; }
.footer__links{ display:flex; flex-direction:column; gap:11px; }
.footer__title{ font-size:12px; font-weight:620; letter-spacing:.08em; text-transform:uppercase; color:var(--text); margin-bottom:3px; }
.footer__links a{ font-size:14px; color:var(--text-2); transition:color var(--t-fast), transform var(--t-fast); width:fit-content; }
.footer__links a:hover{ color:var(--accent); transform:translateX(2px); }
.footer__bottom{ margin-top:42px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:14px; }
.footer__bottom p{ font-size:var(--fs-200); color:var(--muted); line-height:1.6; max-width:var(--measure); }
.footer__copy{ white-space:nowrap; }

/* --------------------- появление блоков --------------------- */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity var(--t-slow), transform var(--t-slow); }
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   @container: перестройка центра по СВОЕЙ ширине
   (работает и на десктопе с узкими панелями, и без панелей)
   ========================================================= */
@container center (min-width:560px){
  .steps{ grid-template-columns:repeat(2,1fr); }
  .guards{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
  .final__inner{ flex-direction:row; align-items:center; justify-content:space-between; gap:40px; }
}
@container center (min-width:660px){
  .vs{ grid-template-columns:1fr 1fr; }
  .cards--2{ grid-template-columns:1fr 1fr; }
}
@container center (min-width:800px){
  .hero__grid{ grid-template-columns:1.06fr .94fr; gap:48px; }
  .calc{ max-width:none; }
}
@container center (min-width:820px){
  .cards{ grid-template-columns:repeat(3,1fr); }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .guards{ grid-template-columns:repeat(3,1fr); }
  .offline{ grid-template-columns:1.08fr .92fr; gap:44px; padding:44px; }
  .footer__grid{ grid-template-columns:1.6fr 1fr 1fr; }
  .footer__brand{ grid-column:auto; }
}

/* Резервный каскад по ширине окна для случая, если @container недоступен
   (старые движки): повторяет ключевые пороги, чтобы страница не осталась в
   один столбец. В современных браузерах перебивается @container-правилами. */
@supports not (container-type:inline-size){
  @media (min-width:760px){ .vs{ grid-template-columns:1fr 1fr; } .cards--2{ grid-template-columns:1fr 1fr; } .steps,.guards{ grid-template-columns:repeat(2,1fr); } .final__inner{ flex-direction:row; align-items:center; justify-content:space-between; } }
  @media (min-width:1000px){ .cards{ grid-template-columns:repeat(3,1fr); } .offline{ grid-template-columns:1.08fr .92fr; } .footer__grid{ grid-template-columns:1.6fr 1fr 1fr; } }
  @media (min-width:1180px){ .steps,.guards{ grid-template-columns:repeat(3,1fr); } .hero__grid{ grid-template-columns:1.05fr .95fr; } .nav{ display:flex; } }
}

/* =========================================================
   ПАНЕЛЬ-ТОГГЛ + МОДАЛКА
   ========================================================= */
.panel-toggle{
  display:none; position:fixed; right:16px; bottom:78px; z-index:var(--z-toggle);
  align-items:center; gap:7px; height:42px; padding:0 16px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:12.5px; font-family:var(--font-mono); color:var(--text);
  background:rgba(18,22,28,.92); border:1px solid rgba(200,206,216,.4);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.panel-toggle .ico{ width:17px; height:17px; }

.modal{ position:fixed; inset:0; z-index:var(--z-modal); display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(6,8,10,.66); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:fadeIn var(--t-base) both; }
.modal__dialog{
  position:relative; width:min(560px,100%); max-height:min(84vh,720px); overflow-y:auto;
  padding:30px 30px 26px; border-radius:var(--r-xl);
  backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
  animation:modalIn var(--t-base) both;
  scrollbar-width:thin;
}
.modal__close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--text-2);
  background:var(--surface-2); border:1px solid var(--line);
  transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.modal__close:hover{ color:var(--text); background:var(--surface); border-color:var(--line-2); }
.modal__eyebrow{
  display:inline-block; font-family:var(--font-mono); font-size:var(--fs-200); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:12px;
}
.modal__title{ font-size:clamp(20px,3vw,26px); font-weight:640; letter-spacing:-.02em; margin-bottom:16px; padding-right:30px; }
.modal__body p{ font-size:15px; color:var(--text-2); line-height:1.66; margin-bottom:12px; }
.modal__note{
  margin-top:18px; padding:14px 16px; border-radius:var(--r-md);
  font-size:12.5px; color:var(--muted); line-height:1.55;
  background:var(--warn-bg); border:1px solid rgba(194,168,120,.24);
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modalIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }

/* =========================================================
   МОБИЛЬНАЯ ОБОЛОЧКА (<1200): панели уходят в нижнюю панель + шторку.
   Blur на подвижных панелях выключен - остаётся плотная подложка + кромка.
   ========================================================= */
@media (max-width:1199px){
  .side__inner{ display:contents; }

  /* левая панель -> нижняя навигация (только быстрые разделы, спотлайт скрыт) */
  .side--left{ left:0; right:0; bottom:0; top:auto; z-index:var(--z-side); }
  .side--left .spot{ display:none; }
  .side--left .qnav{
    position:fixed; left:0; right:0; bottom:0; z-index:var(--z-side);
    flex-direction:row; justify-content:space-around; align-items:stretch; gap:2px;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:rgba(13,15,18,.96); border-top:1px solid var(--line);
    box-shadow:0 -6px 20px -10px rgba(0,0,0,.6);
  }
  .qcard{
    flex-direction:column; gap:3px; flex:1 1 0; min-width:0; padding:6px 2px !important;
    background:transparent !important; border:0 !important; box-shadow:none !important;
    border-radius:10px !important; align-items:center;
  }
  .qcard::before{ display:none; }
  .qcard:hover{ transform:none; background:rgba(255,255,255,.05) !important; }
  .qcard__ico{ width:26px; height:26px; border-radius:8px; }
  .qcard__ico .ico{ width:16px; height:16px; }
  .qcard__t{ font-size:9.5px; color:var(--text-2); }

  /* правая панель -> выезжающая шторка */
  .side--right{
    top:0; bottom:0; right:0; left:auto; width:min(88vw,340px);
    transform:translateX(102%); transition:transform .32s cubic-bezier(.16,.84,.44,1);
    z-index:var(--z-sheet); background:rgba(13,15,18,.97);
    border-left:1px solid var(--line); box-shadow:-10px 0 40px -12px rgba(0,0,0,.6);
    display:flex; flex-direction:column; overflow-y:auto;
  }
  .side--right .side__inner{ display:flex; flex-direction:column; gap:12px; padding:70px 12px 24px; }
  .side--right.is-open{ transform:none; }
  .feed__list{ max-height:none; }

  .panel-toggle{ display:inline-flex; }

  /* воздух под нижнюю панель, чтобы контент не уезжал под неё */
  main, .footer{ padding-bottom:0; }
  .center{ padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
}

/* =========================================================
   МОБИЛЬНЫЕ ПРАВКИ ПО КОНТЕНТУ (по ширине окна)
   ========================================================= */
@media (max-width:720px){
  .wrap{ padding:0 18px; }
  .header__inner{ padding:0 18px; }
  html{ scroll-padding-top:74px; }
  .hero{ padding:34px 0 56px; }
  .section{ padding:60px 0; }
  .final{ padding:64px 0 72px; }
  .lead{ font-size:16px; }
  .section__lead{ font-size:15.5px; }
  .hero__cta{ gap:10px; }
  .hero__cta .btn{ width:100%; white-space:normal; text-align:center; }
  .calc{ padding:20px 18px; }
  .calc__head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .section__head{ margin-bottom:32px; padding-left:0; }
  .section__head::before{ display:none; }
  .honest{ padding:22px 20px; }
  .offline{ padding:24px 20px; }
  .faq__item summary{ font-size:15px; padding:17px 44px 17px 17px; }
  .faq__item summary::after{ right:18px; }
  .faq__body{ padding:0 44px 18px 17px; }
  h1{ font-size:30px; overflow-wrap:break-word; }
  .hero__copy, .hero__cta, .trust, .trust li, .calc{ min-width:0; max-width:100%; }
  .logo{ min-height:44px; }
  .footer a{ display:inline-block; padding:6px 0; }
}
@media (max-width:400px){
  .trust{ grid-template-columns:1fr; }
  .seg__btn{ font-size:12px; }
  .field__input{ font-size:21px; }
  h1{ font-size:26px; }
}

/* =========================================================
   ИНТРО НА ЧАСТИЦАХ
   ========================================================= */
.intro{
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(760px 520px at 50% 44%, rgba(200,206,216,.07), transparent 68%), #0e1013;
  opacity:1; transition:opacity .85s ease, visibility .85s;
}
.intro.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.intro__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.intro__logo{
  position:absolute; left:50%; top:50%; width:clamp(150px,20vw,230px); height:auto; border-radius:50%;
  opacity:0; transform:translate(-50%,-50%) scale(.9);
  transition:opacity 320ms ease, transform 320ms cubic-bezier(.16,.84,.44,1); pointer-events:none;
}
.intro__logo.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1);
  box-shadow:0 0 0 1px rgba(200,206,216,.3), 0 0 60px rgba(200,206,216,.22), 0 24px 70px rgba(0,0,0,.6); }
.intro__caption{
  position:absolute; left:50%; top:50%; z-index:1;
  transform:translate(-50%, calc(-50% + clamp(110px,17vw,168px))) translateY(6px);
  opacity:0; text-align:center; white-space:nowrap; pointer-events:none;
  transition:opacity 420ms ease 60ms, transform 420ms cubic-bezier(.16,.84,.44,1) 60ms;
}
.intro__caption.is-on{ opacity:1; transform:translate(-50%, calc(-50% + clamp(110px,17vw,168px))) translateY(0); }
.intro__caption-brand{ display:block; font-family:var(--font-display); font-weight:640; font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-2); }
.intro__caption-curr{ display:block; margin-top:6px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--accent); }
.intro__skip{
  position:absolute; right:22px; bottom:20px; z-index:2; height:34px; padding:0 15px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:13px; color:var(--text-2); background:rgba(20,23,27,.72); border:1px solid rgba(255,255,255,.13);
  transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.intro__skip:hover{ color:var(--text); border-color:rgba(200,206,216,.45); background:rgba(200,206,216,.1); }
@media (max-width:640px){ .intro__caption-brand{ font-size:11px; letter-spacing:.18em; } .intro__caption-curr{ font-size:10.5px; } }
@media (prefers-reduced-motion:reduce){ .intro{ display:none; } }
html.intro-lock, html.intro-lock body{ overflow:hidden; }

/* --------- ротор смыслов в герое --------- */
.rotor{ display:flex; align-items:baseline; gap:12px; margin:26px 0 6px; font-size:19px; flex-wrap:wrap; }
.rotor__label{ font-family:var(--font-display); font-weight:640; letter-spacing:-.01em;
  background:var(--metal-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rotor__slot{ position:relative; display:block; width:100%; min-height:2.6em; overflow:hidden; }
.rotor__slot b{
  position:absolute; left:0; top:0; right:0; font-weight:520; color:var(--accent);
  opacity:0; transform:translateY(.55em); transition:opacity 420ms ease, transform 420ms cubic-bezier(.22,.61,.36,1);
}
.rotor__slot b.is-on{ opacity:1; transform:none; }
.rotor__slot b.is-out{ opacity:0; transform:translateY(-.55em); }
@media (max-width:720px){ .rotor{ font-size:17px; display:block; } .rotor__label{ display:block; margin-bottom:4px; } .rotor__slot{ min-height:3.1em; } }

/* =========================================================
   ДОСТУПНОСТЬ: меньше движения
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .spot__card{ opacity:1; transform:none; }
  .pill__dot::after{ animation:none; }
}