/* =========================================================
   TELEUNO — styles.css
   Премиальный визуал, стекло, глубина, мягкие маски, адаптив
========================================================= */

:root{
  --bg:#0B1220;
  --bg-2:#0A1833;
  --surface:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.08);
  --ink:rgba(255,255,255,.94);
  --muted:rgba(255,255,255,.66);
  --accent1:#49E1C4;
  --accent2:#5CA8F7;
  --accentGold:#E7C888;

  --shadow-lg:0 30px 80px rgba(8,13,31,.45);
  --shadow-md:0 18px 40px rgba(8,13,31,.35);

  --r12:12px; --r16:16px; --r20:20px; --r24:24px; --r28:28px;
  --container:1200px;

  /* Premium Buttons */
  --btn-h:44px;
  --btn-r:14px;
  --btn-pad:18px;
  --btn-speed:.22s;
  --btn-ease:cubic-bezier(.2,.8,.2,1);
  --btn-ink:#001018;
  --btn-text:#fff;
  --btn-grad-1:#49E1C4;
  --btn-grad-2:#5CA8F7;
  --btn-gold-1:#FFD27A;
--btn-gold-2:#FFB43B;

/* просто переменные, БЕЗ вложенного :root */
--btn-glow:
  0 2px 6px rgba(92,168,247,.25),
  0 6px 18px rgba(92,168,247,.22);
--btn-glow-strong:
  0 3px 8px rgba(92,168,247,.28),
  0 10px 24px rgba(92,168,247,.25),
  0 18px 40px rgba(92,168,247,.18);

--btn-border: rgba(255,255,255,.12);

  --btn-bg-glass: rgba(255,255,255,.08);
}

*{box-sizing:border-box}
html,body{height:100%}

/* ===== Body / Фон без «полос» + анти-бэндинг ===== */
body{
  margin:0;
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: var(--bg);   /* только цвет! без градиентов */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* === ЕДИНЫЙ ФИКСИРОВАННЫЙ ФОН (BGFX) — НЕТ СТЫКОВ === */
.bgfx{
  position:fixed;
  inset:0;
  z-index:-1;              /* всегда позади контента */
  background:
    radial-gradient(1600px 900px at 15% -20%, rgba(76,204,255,.055) 0%, rgba(76,204,255,0) 70%),
    radial-gradient(1600px 900px at 85% -20%, rgba(86,255,225,.055) 0%, rgba(86,255,225,0) 70%),
    radial-gradient(2200px 1300px at 50% 125%, rgba(38,66,117,.16) 0%, rgba(38,66,117,0) 70%),
    var(--bg);
  background-repeat:no-repeat;
  will-change:transform;
}
/* лёгкий шум, убивает бэндинг */
.bgfx::after{
  content:"";
  position:absolute; inset:0;
  opacity:.022; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
    <filter id='n'>\
      <feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/>\
      <feColorMatrix type='saturate' values='0'/>\
    </filter>\
    <rect width='100%' height='100%' filter='url(%23n)' opacity='0.45'/>\
  </svg>");
  background-size:140px 140px;
}

/* Utils */
.container{max-width:var(--container); margin-inline:auto; padding-inline:24px}
.center{text-align:center}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}

/* Typography */
.h1{
  font-weight:800; letter-spacing:-.02em;
  font-size:clamp(32px,6vw,56px); line-height:1.05; margin:0 0 12px;
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
}
.h2{
  font-weight:800; letter-spacing:-.02em;
  font-size:clamp(26px,4.2vw,40px); line-height:1.08; margin:0 0 8px;
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
}
.lead{color:var(--muted); font-size:clamp(16px,2vw,18px)}
.micro{color:var(--muted); font-size:14px; margin:6px 0 0}
.grad{background:linear-gradient(90deg,var(--accent1),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Links — без подчёркиваний */
a{color:#98c7ff; text-decoration:none}
a:hover{text-decoration:none}
a:focus-visible, .btn:focus-visible{outline:2px solid #98c7ff; outline-offset:3px; border-radius:12px}

/* Scroll progress */
#scrollbar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--accent1), var(--accent2));
  z-index:2000; box-shadow:0 0 18px rgba(92,168,247,.55);
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(14px);
  background: rgba(11,18,32,.62);
  border-bottom: 1px solid var(--stroke);
  transform: translateY(0); transition: transform .3s ease;
}
.header-row{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:#fff}
.brand img{filter:drop-shadow(0 6px 18px rgba(92,168,247,.28))}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--ink)}

/* =====================================================
   PREMIUM BUTTONS SYSTEM (стекло/градиент/свечение)
   ===================================================== */
.btn{
  --bg: var(--btn-bg-glass);
  --text: var(--btn-text);
  --border: var(--btn-border);
  --shadow: 0 2px 8px rgba(0,0,0,.25);
  --press: translateY(1px) scale(.995);
  position: relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--btn-h); padding:0 var(--btn-pad);
  color:var(--text); font-weight:700; letter-spacing:.01em;
  background: var(--bg);
  border:1px solid var(--border);
  border-radius:var(--btn-r);
  text-decoration:none; user-select:none;
  box-shadow: var(--shadow);
  transition: transform var(--btn-speed) var(--btn-ease),
             filter var(--btn-speed) var(--btn-ease),
             box-shadow var(--btn-speed) var(--btn-ease),
             background-position .6s ease;
  will-change:transform,box-shadow,filter;
  transform: translateZ(0);
  isolation:isolate;
  -webkit-tap-highlight-color: transparent;
}
/* «стеклянный» блик + мягкий shine */
.btn::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08) 28%, rgba(255,255,255,0) 60%),
    radial-gradient(80% 120% at 50% -40%, rgba(255,255,255,.14), transparent 60%);
  mix-blend-mode:overlay; opacity:.9;
}
/* Ripple (JS поставит переменные) */
.btn::after{
  content:"";
  position:absolute; border-radius:50%; pointer-events:none;
  width:10px; height:10px; left:var(--r-x,50%); top:var(--r-y,50%);
  transform:translate(-50%,-50%) scale(var(--r-scale,0));
  background:rgba(255,255,255,.35);
  transition: transform .6s var(--btn-ease), opacity .6s var(--btn-ease);
  opacity:var(--r-op,0);
}
.btn:hover{ box-shadow: var(--btn-glow); transform: translateY(-1px); }
.btn:active{ transform: var(--press); filter:saturate(1.05) }
.btn > svg{ width:18px; height:18px; transition: transform .25s var(--btn-ease) }
.btn:hover > svg{ transform: translateY(-1px) }

.btn.btn-lg{ --btn-h:54px; --btn-r:16px; --btn-pad:22px; font-size:1.02rem }
.btn.btn-sm{ --btn-h:36px; --btn-r:12px; --btn-pad:14px; font-weight:600 }
.btn.btn-pill{ --btn-r:999px }

.btn[disabled], .btn.is-disabled{ opacity:.55; pointer-events:none; filter:grayscale(.1) }

/* Варианты */
.btn-primary{
  --bg: linear-gradient(90deg,var(--btn-grad-1),var(--btn-grad-2));
  --text: var(--btn-ink);
  --border: transparent;
  box-shadow: var(--btn-glow-strong);
  background-size: 160% 100%;
  background-position: 0% 0%;
}
.btn-primary:hover{ background-position: 100% 0% }

.btn-accent{
  --bg: linear-gradient(180deg,var(--btn-gold-1),var(--btn-gold-2));
  --text:#1a1200; --border:transparent;
  box-shadow: 0 12px 36px rgba(255,180,60,.38);
}
.btn-ghost{
  --bg: rgba(255,255,255,.08);
  --text: var(--btn-text);
  --border: rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
}
.btn-outline{
  --bg: transparent;
  --border: rgba(255,255,255,.28);
  --text: var(--btn-text);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

/* Магнитный hover — контейнер с атрибутом data-magnet */
[data-magnet] .btn{ transition: transform var(--btn-speed) var(--btn-ease), box-shadow var(--btn-speed) var(--btn-ease) }
[data-magnet] .btn.is-magnet{ transform: translate3d(var(--mx,0px), var(--my,0px), 0) }

@media (prefers-reduced-motion: reduce){
  .btn, .btn::after, .btn::before{ transition:none !important; }
  [data-magnet] .btn.is-magnet{ transform:none !important }
}

/* HERO */
.hero{position:relative; z-index:1; padding:32px 0 24px}
/* очень лёгкий «дыхательный» градиент сверху секции (без полос) */
.hero:before{
  content:""; position:absolute; inset:-40px 0 auto 0; height:80px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(11,18,32,0), rgba(11,18,32,.08), rgba(11,18,32,0));
}
/* правая колонка чуть шире — видео солиднее */
.hero-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:36px; align-items:center}
.hero-copy .cta{display:flex; gap:12px; margin:18px 0 8px}
.bullets{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; padding:0; margin:12px 0 8px; list-style:none}
.bullets .i{width:18px; height:18px; margin-right:8px; transform:translateY(2px)}
.bullets li{color:#d7e6ff}
.note{color:var(--muted); font-size:13px}

/* Видео-карточки */
.hero-video-card, .svb-card{
  position:relative; border-radius:22px; overflow:hidden;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  box-shadow: var(--shadow-lg);
  perspective:1600px;
}
.hero-video, .svb-video{
  width:100%; height:100%; display:block; object-fit:cover;
  aspect-ratio:16/9; border-radius:22px; transform:translateZ(0) scale(1.01);
}
.video-glow{
  position:absolute; inset:auto -30% -30% -30%; height:60%;
  background:radial-gradient(60% 60% at 50% 0%, rgba(92,168,247,.25), transparent 70%);
  filter:blur(24px); pointer-events:none
}

/* FEATURES */
.features{position:relative; z-index:2; padding:20px 0 24px}
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.feature{
  display:flex; gap:18px; align-items:flex-start; padding:20px;
  border-radius:20px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid var(--stroke); box-shadow: var(--shadow-md);
  position:relative; overflow:hidden;
}
.feature:before{
  content:""; position:absolute; inset:-30% -40% auto -40%; height:120px;
  background:radial-gradient(500px 80px at 50% 0, rgba(86,255,225,.15), transparent 70%);
  filter: blur(26px);
}
.feature-icon{
  width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  background: radial-gradient(80% 80% at 30% 20%, rgba(86,255,225,.28), rgba(92,168,247,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 34px rgba(92,168,247,.22);
  border:1px solid rgba(255,255,255,.1);
}
.feature-icon svg{width:30px; height:30px; stroke:url(#g); fill:none}
.feature-body h3{margin:2px 0 6px; font-size:22px}
.feature-body p{margin:0; color:var(--muted)}

/* SVOBODA */
.svoboda{position:relative; padding:28px 0 36px; z-index:2}

/* =========================
   SCREENS — «букет» без подложки
   ========================= */
.screens{
  position:relative;
  isolation:isolate;
  padding:44px 0 28px;
  margin-bottom:64px;
  z-index:1;
}
.sub{color:var(--muted); margin:0 0 18px}

/* Сцена: прозрачная, без фона/бордера, с мягким срезом только по низу */
.screens-stage{
  position:relative;
  height: clamp(480px, 54vw, 620px);
  margin-inline:auto;
  max-width:980px;

  background: transparent; border:0; border-radius:0; box-shadow:none;
  overflow: visible; /* бокам даём дышать */

  /* стираем только самый низ */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 94%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 94%, rgba(0,0,0,0) 100%);
  z-index:1;
}

/* Экран — масштаб по высоте сцены (без растяжения) */
.screen{
  position:absolute;
  height:86%;
  width:auto;
  object-fit:contain;
  border-radius:20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  transform-style:preserve-3d; will-change:transform,opacity; pointer-events:none;

  /* переменные для параллакса */
  --tx: 0px;  /* сдвиг по X */
  --tz: 0px;  /* глубина */
}

/* Композиция «букетом» — transform из CSS-переменных + базовой позы */
.s1{ left:5%;  top:10%; transform: translate3d(var(--tx),0,var(--tz)) rotate(-8deg) !important; z-index:1; }
.s2{ left:50%; top:2%;  transform: translate3d(var(--tx),0,var(--tz)) translateX(-50%) rotate(0deg) scale(1.02) !important; z-index:3; }
.s3{ right:5%; top:10%; transform: translate3d(var(--tx),0,var(--tz)) rotate(8deg) !important;  z-index:1; }

/* Маски (мягкие края изображений) */
.soft-mask-x{
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.soft-mask-b{
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 96%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 96%, transparent 100%);
}

/* Доп. подсветка под сценой (можно убрать) */
.under-glow{
  position:absolute; left:10%; right:10%; bottom:-8%; height:120px; filter:blur(28px);
  background: radial-gradient(50% 60% at 50% 0, rgba(76,204,255,.22), transparent 70%);
  pointer-events:none;
}

/* HOW */
.how{position:relative; z-index:3; padding:28px 0 28px}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; list-style:none; margin:18px 0 0; padding:0; position:relative}
.step{
  display:flex; gap:16px; align-items:flex-start; padding:20px;
  border-radius:20px; background:rgba(255,255,255,.05);
  border:1px solid var(--stroke); box-shadow: var(--shadow-md); position:relative;
}
.step:not(:last-child):after{
  content:""; position:absolute; right:-11px; top:50%; width:22px; height:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.35), rgba(255,255,255,.0));
}
.badge{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; color:#001018; font-weight:800;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  box-shadow:0 12px 36px rgba(92,168,247,.35), inset 0 1px 0 rgba(255,255,255,.28);
}
.step-body h3{margin:2px 0 6px}
.step-body p{margin:0; color:var(--muted)}

/* CTA CARD */
.cta-card{position:relative; z-index:3; padding:24px 0 60px}
.cta-card-inner{
  padding:32px 24px; border-radius:24px; border:1px solid transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  box-shadow: var(--shadow-md); text-align:center;
}
.cta-card-inner h2{margin:0 0 6px}
.cta-card-inner p{margin:0 0 16px; color:var(--muted)}

/* FOOTER */
.site-footer{padding:28px 0 40px; background:#0A111E}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .6fr; gap:18px; align-items:start}
.footer-nav{display:grid; gap:8px}
.copy{color:var(--muted); text-align:right}
.muted{color:var(--muted)}
.tiny{font-size:12px}

/* якорный сдвиг под sticky-header */
#value, #how, #ui, #terms, #svoboda { scroll-margin-top: 84px; }

/* Reveal */
.reveal{opacity:0; transform: translateY(20px)}
.reveal.in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .screen, .hero-video, .svb-video{transition:none !important; transform:none !important}
}

/* Responsive */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step:not(:last-child):after{display:none}

  .screens-stage{height: clamp(560px, 100vw, 760px)}
  .screen{height:88%; width:auto}

  /* вертикальная композиция — читаемость */
  .s1{top:6%}
  .s2{top:30%}
  .s3{top:54%}
}

/* Широкие дисплеи — чуть крупнее сцену */
@media (min-width:1400px){
  .screens-stage{ max-width:1080px; height: clamp(520px, 48vw, 700px); }
}
/* ========== FIX: Убираем выделение секций ========== */
section,
.features,
.how,
.cta-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* оставляем разделение только у футера */
.site-footer {
  background: #0A111E;
  border-top: 1px solid var(--stroke);
}

/* ========== ДОРАБОТКА КНОПОК ========== */

/* shimmer при наведении */
.btn::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08) 28%, rgba(255,255,255,0) 60%),
    radial-gradient(80% 120% at 50% -40%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(120deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 60%);
  background-size: 200% 100%;
  animation: none;
}
.btn:hover::before {
  animation: shimmer 1.2s forwards;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* эффект scale при наведении */
.btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: var(--btn-glow-strong);
}
.btn:active {
  transform: scale(.97);
}

/* магнитный hover — плавнее */
[data-magnet] .btn.is-magnet {
  transition: transform .35s var(--btn-ease);
}
/* =========================
   Premium hover для текстовых ссылок
   (фикс: линия под текстом, не трогаем .btn)
   ========================= */

/* делаем ссылки ровно по ширине текста */
.nav a:not(.btn),
.footer-nav a {
  position: relative;
  display: inline-block;      /* <— важно: ширина = ширине текста */
  width: max-content;
  color: var(--muted);
  padding-bottom: 2px;        /* место под линию */
  transition: color .25s ease, text-shadow .25s ease;
}

/* подсветка текста */
.nav a:not(.btn):hover,
.nav a:not(.btn):focus-visible,
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: #fff;
  text-shadow: 0 0 10px rgba(92,168,247,.45);
}

/* градиентная линия под текстом */
.nav a:not(.btn)::after,
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;                    /* <— линия стартует под первой буквой */
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  opacity: 0;
  transform: scaleX(0);       /* скрыта и сжата слева */
  transform-origin: left center;
  transition: opacity .28s ease, transform .28s ease;
}

/* показываем линию при наведении */
.nav a:not(.btn):hover::after,
.nav a:not(.btn):focus-visible::after,
.footer-nav a:hover::after,
.footer-nav a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

/* защита: на кнопках в шапке подчёркивания нет вообще */
.nav a.btn,
.nav a[class*="btn"] {
  padding-bottom: 0;
  text-shadow: none;
}
.nav a.btn::after,
.nav a[class*="btn"]::after {
  content: none !important;
}
/* === Premium buttons fix === */

/* убираем постоянное свечение */
.btn-primary,
.btn-accent {
  box-shadow: none !important;
  transition: all 0.3s ease;
}

/* делаем glow только при наведении */
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-accent:hover,
.btn-accent:focus-visible {
  box-shadow: 0 0 14px rgba(255, 204, 102, 0.55); /* мягкий премиум-свет */
  transform: translateY(-1px);
}

/* для жёлтой кнопки (акцентной) можно чуть теплее свет */
.btn-accent:hover,
.btn-accent:focus-visible {
  box-shadow: 0 0 16px rgba(255, 190, 70, 0.55);
}
/* =======================
   PREMIUM — только карточки преимуществ
   ======================= */

.features-grid { gap: 24px }

/* Карточка: «плотное стекло», тонкая кайма, короткая тень */
.feature{
  position:relative;
  display:flex; gap:20px; align-items:flex-start;
  padding:24px 24px;
  border-radius:20px;
  background:
    /* внутренний «вельвет» стекла */
    radial-gradient(120% 160% at 20% 0%, rgba(255,255,255,.10), rgba(255,255,255,.02) 60%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  /* «короткая» и локальная тень без размазывания */
  box-shadow:
    0 8px 22px rgba(7,12,24,.34),
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -1px 0 rgba(0,0,0,.15) inset;
  backdrop-filter: blur(10px);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  overflow:hidden;
}

/* стеклянный верхний блик */
.feature::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  mix-blend-mode:overlay; opacity:.28;
}

/* Hover: лёгкий подъём + чуть «чище» стекло и кайма */
.feature:hover{
  transform: translateY(-2px);
  background:
    radial-gradient(120% 160% at 20% 0%, rgba(255,255,255,.12), rgba(255,255,255,.03) 60%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 12px 28px rgba(7,12,24,.40),
    0 1px 0 rgba(255,255,255,.14) inset,
    0 -1px 0 rgba(0,0,0,.18) inset;
}

.feature-body h3{ margin:2px 0 6px; font-size:22px; letter-spacing:-.01em }
.feature-body p{  margin:0; color:var(--muted) }

/* ---------- Иконка: не сжимается, больше воздуха, живой ореол ---------- */
.feature-icon{
  position:relative;
  flex:0 0 70px; width:70px; height:70px;
  border-radius:18px;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 25% 20%, rgba(86,255,225,.22), rgba(92,168,247,.18)),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 10px 24px rgba(16,22,38,.36);
  isolation:isolate;
}

/* аккуратный halo — живой, но не «дешёвый» */
.feature-icon::before{
  content:""; position:absolute; inset:-12px; border-radius:24px; z-index:-1;
  background: conic-gradient(from 220deg,
              rgba(92,168,247,0),
              rgba(92,168,247,.22),
              rgba(73,225,196,.22),
              rgba(92,168,247,0));
  filter: blur(14px); opacity:.55; pointer-events:none;
}

/* мягкая тень под плиткой */
.feature-icon::after{
  content:""; position:absolute; left:10px; right:10px; bottom:-12px; height:14px;
  background: radial-gradient(60% 70% at 50% 0, rgba(0,0,0,.38), transparent 70%);
  filter: blur(8px); z-index:-1; pointer-events:none;
}

/* Сам символ: фикс. размер, толще штрих, лёгкий свет */
.feature-icon svg{
  width:34px; height:34px; display:block;
  stroke:url(#g); fill:none; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
  filter: drop-shadow(0 2px 7px rgba(92,168,247,.35));
  transition: transform .28s ease, filter .28s ease, opacity .28s ease;
}

/* Живой hover */
.feature:hover .feature-icon svg{
  transform: translateY(-1px);
  filter: drop-shadow(0 3px 10px rgba(92,168,247,.48));
}

/* Мобильный брейкпоинт — компактнее, но та же эстетика */
@media (max-width: 640px){
  .feature{ padding:18px }
  .feature-icon{ width:62px; height:62px; border-radius:16px }
  .feature-icon svg{ width:28px; height:28px; stroke-width:2 }
}
/* HERO video tilt effect */
.hero-video-card {
  perspective: 1200px;
}

.hero-video {
  width: 100%;
  height: auto;
  border-radius: 22px;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  will-change: transform;
}
/* HERO video tilt effect */
.hero-video-card {
  perspective: 1200px;
}

.hero-video {
  width: 100%;
  height: auto;
  border-radius: 22px;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  will-change: transform;
}
/* Наклон видео HERO */
.hero-video-card {
  perspective: 1200px;
}

.video-wrapper {
  display: inline-block;
  border-radius: 22px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out;
  will-change: transform;
}

.hero-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}
/* === КРУПНЕЕ ЛОГО И ТЕКСТ В ШАПКЕ === */
.site-header .brand img{
  width: 36px;          /* было ~20px — делаем крупнее */
  height: auto;         /* сохраняем пропорции */
}

.site-header .brand span{
  font-size: 22px;      /* крупнее подпись TELEUNO */
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Чуть выше сам header, чтобы всё уместилось комфортно */
.header-row{
  height: 72px;         /* было 64px — можно 72–76px по вкусу */
}

/* === КРУПНЕЕ ЛОГО И ТЕКСТ В ПОДВАЛЕ === */
.site-footer .brand img{
  width: 28px;          /* было ~18px — увеличиваем */
  height: auto;
}

.site-footer .brand span{
  font-size: 20px;      /* подпись TELEUNO внизу */
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* =========================
   CTA — премиум неоновые «углы»
   ========================= */
:root{
  --neon1:#FFD27A;         /* тёплый свет */
  --neon2:#FF9B3D;         /* насыщённый */
  --neon-ink:#1b1205;      /* тёмное «стекло» под тёплый свет */
}

.cta-card-inner.neon{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  /* стекло + лёгкий тёплый ореол сверху */
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(255,184,85,.10), rgba(255,184,85,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 40px rgba(8,13,31,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* лёгкая «сеточка» точек как у лидеров — очень деликатно */
.cta-card-inner.neon::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; mix-blend-mode:overlay; opacity:.14;
  background-image:
    radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* НЕОНОВЫЕ ФИГУРЫ — нижний левый и верхний правый углы */
.cta-card-inner.neon::before{
  content:"";
  position:absolute;
  left:-120px; bottom:-120px; width:520px; height:520px;
  pointer-events:none; filter: blur(2px);
  background:
    conic-gradient(from 220deg,
      rgba(0,0,0,0) 0turn,
      rgba(255,155,61,.55) .12turn,
      rgba(255,210,122,.75) .22turn,
      rgba(255,210,122,.0) .34turn),
    radial-gradient(330px 260px at 32% 32%, rgba(255,170,70,.22), rgba(255,170,70,0) 65%);
  border-radius: 44px;
  box-shadow:
    0 0 0 14px rgba(255,170,70,.10) inset,
    0 30px 90px rgba(255,170,70,.35),
    0 6px 18px rgba(0,0,0,.35);
}

/* верхний правый угол — зеркально */
.cta-card-inner.neon .neon-corner{ display:none } /* на случай, если захотите отдельные div */
.cta-card-inner.neon > .neon-corner { display:block }

.cta-card-inner.neon .corner-tr,
.cta-card-inner.neon .corner-bl{ /* если решите добавить элементами — стили общий вид */
  position:absolute; pointer-events:none;
  width:520px; height:520px; border-radius:44px; filter: blur(2px);
}

.cta-card-inner.neon .corner-tr{
  right:-120px; top:-120px;
  background:
    conic-gradient(from 40deg,
      rgba(0,0,0,0) 0turn,
      rgba(255,155,61,.55) .12turn,
      rgba(255,210,122,.75) .22turn,
      rgba(255,210,122,.0) .34turn),
    radial-gradient(330px 260px at 68% 68%, rgba(255,170,70,.22), rgba(255,170,70,0) 65%);
  box-shadow:
    0 0 0 14px rgba(255,170,70,.10) inset,
    0 30px 90px rgba(255,170,70,.35),
    0 6px 18px rgba(0,0,0,.35);
}

/* если не добавляете отдельные элементы — рисуем правый угол тоже псевдоэлементом */
@supports (mask: linear-gradient(#000,#000)) {
  .cta-card-inner.neon::before,
  .cta-card-inner.neon::after { will-change: transform, opacity }
  /* дублируем верхний правый через дополнительный слой */
  .cta-card-inner.neon::after{
    content:"";
    position:absolute; inset:0; pointer-events:none;
    /* оставляем точки поверх, не мешаем свету */
    background-image:
      radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
    background-size:22px 22px;
  }
  .cta-card-inner.neon > i{ display:none }
}

/* маленькая анимация «дыхания» неона */
@keyframes neonFloat {
  0%   { transform: translateY(0) rotate(.0001deg); opacity:.9 }
  50%  { transform: translateY(-6px) rotate(.0001deg); opacity:1 }
  100% { transform: translateY(0) rotate(.0001deg); opacity:.9 }
}
.cta-card-inner.neon::before{ animation: neonFloat 6s ease-in-out infinite }
.cta-card-inner.neon .corner-tr{ animation: neonFloat 7s ease-in-out infinite reverse }

/* кнопка-акцент — чуть теплее свечение в этом блоке */
.cta-card .btn-accent{
  box-shadow: 0 10px 28px rgba(255,170,70,.35);
}
.cta-card .btn-accent:hover,
.cta-card .btn-accent:focus-visible{
  box-shadow: 0 12px 36px rgba(255,170,70,.5);
  transform: translateY(-1px);
}
/* ===== CTA PRO: стекло + неоновые «крылья» + текстура ===== */

.cta-card { padding: 28px 0 80px } /* чуть больше воздуха снизу */
.cta-card .container { position: relative }
.cta-card-inner.pro{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 48px 24px 40px;
  backdrop-filter: blur(14px);
  background:
    radial-gradient(100% 200% at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(14,20,35,.9), rgba(10,14,24,.78));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 18px 60px rgba(7,12,24,.45),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.28);
  isolation: isolate;
}

/* внутренний премиум-контур (hairline) */
.cta-card-inner.pro::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%) top/100% 120px no-repeat,
    linear-gradient(0deg, rgba(255,255,255,.12), rgba(255,255,255,0) 40%) bottom/100% 90px no-repeat;
  mix-blend-mode: overlay;
  opacity:.6;
}

/* деликатная сетка-дотс (дорогой эффект материала) */
.cta-card-inner.pro::before{
  content:"";
  position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px);
  background-size: 14px 14px;
  opacity:.25;
  mask-image: radial-gradient(120% 120% at 50% 0%, #000 0%, transparent 70%);
}

/* заголовок больше, плотнее как у лидеров */
.cta-card-inner.pro h2{
  font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.cta-card-inner.pro p{ color: var(--muted); margin: 0 0 18px }

/* кнопки чуть крупнее в этом блоке */
.cta-card-inner.pro .btn{ --btn-h: 48px; --btn-r: 16px; --btn-pad: 22px }
.cta-card-inner.pro .btn-accent{
  box-shadow: 0 18px 36px rgba(255,190,70,.32);
}
.cta-card-inner.pro .btn-ghost{
  border-color: rgba(255,255,255,.22);
}

/* неоновые крылья по бокам */
.wing{
  position:absolute; width: 420px; height: 420px; border-radius: 36px;
  filter: blur(20px);
  opacity:.85; pointer-events:none; z-index:-1;
}
.wing--left{ left:-140px; bottom:-120px;
  background:
    radial-gradient(120px 120px at 35% 35%, rgba(255,190,70,.55), transparent 60%),
    radial-gradient(240px 240px at 60% 60%, rgba(255,160,50,.32), transparent 70%),
    conic-gradient(from 220deg, rgba(255,200,90,.25), rgba(255,130,30,.18), transparent 70%);
  transform: rotate(-18deg);
}
.wing--right{ right:-140px; top:-120px;
  background:
    radial-gradient(120px 120px at 65% 35%, rgba(255,190,70,.55), transparent 60%),
    radial-gradient(240px 240px at 40% 60%, rgba(255,160,50,.32), transparent 70%),
    conic-gradient(from 20deg, rgba(255,200,90,.25), rgba(255,130,30,.18), transparent 70%);
  transform: rotate(18deg);
}

/* мягкий shine-скан при ховере */
.shine{
  position:absolute; inset:-10%; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 48%, rgba(255,255,255,0) 66%) 0 0 / 220% 220% no-repeat;
  mix-blend-mode: screen; opacity:.0; transition: opacity .35s ease, background-position 1.2s ease;
}
.cta-card-inner.pro:hover .shine{
  opacity:.55; background-position: 100% 100%;
}

/* лёгкое «подвисание» блока */
.cta-card-inner.pro:hover{
  transform: translateY(-2px);
  box-shadow:
    0 24px 70px rgba(7,12,24,.55),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.30);
}

/* адаптив — крылья меньше на мобильных */
@media (max-width: 800px){
  .cta-card-inner.pro{ padding: 36px 18px 30px; border-radius: 24px }
  .wing{ width: 300px; height: 300px; filter: blur(16px) }
  .wing--left{ left:-120px; bottom:-140px }
  .wing--right{ right:-120px; top:-140px }
}
/* === FIX: убираем горизонтальную полоску в CTA =================== */
.cta-card-inner.pro::before,
.cta-card-inner.pro::after{
  content: none !important;       /* отключаем слои, дававшие «шов» */
}

/* бесшовный фон для CTA PRO */
.cta-card-inner.pro{
  background:
    radial-gradient(120% 160% at 50% 0%,
      rgba(255,255,255,.08),
      rgba(255,255,255,0) 70%) no-repeat,
    linear-gradient(180deg,
      rgba(10,17,30,.92),
      rgba(10,17,30,.78)) no-repeat !important;
  background-blend-mode: normal;
  transform: translateZ(0);                 /* антиартефакт от субпикселей */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* чуть ослабим тени, чтобы не казалось, что это линия */
.cta-card-inner.pro{
  box-shadow:
    0 18px 50px rgba(7,12,24,.42),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.22);
}
/* === COMPARE: безопасные оверрайды === */

/* 0) Спрятать кнопку "Подсветить Teleuno" (если она есть в разметке) */
.cmp-luxe .cmp-controls { display: none !important; }

/* 1) Шапка таблицы: без blur и с явным оттенком */
.cmp-luxe .cmp-table thead th{
  backdrop-filter: none !important;                 /* убираем "молочную" вуаль */
  background: linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  text-align: center !important;
  font-weight: 800 !important;
  color: #eaf4ff !important;
}

/* Заголовок TELEUNO: читаемый текст, не "прозрачный" градиент */
.cmp-luxe .cmp-table thead .col-teleuno .th-teleuno{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px;
  background: linear-gradient(135deg,#42E8FF,#5A8BFF);
  color: #06121f; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: inset 0 0 14px rgba(255,255,255,.22), 0 0 14px rgba(90,139,255,.28);
}
/* внутри .th-teleuno у тебя есть <span class="grad"> — делаем его обычным текстом */
.cmp-luxe .th-teleuno .grad{
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: currentColor !important;
}

/* 2) Левый столбец "Критерий": свой фон и без липкости */
.cmp-luxe .cmp-table thead th.col-crit,
.cmp-luxe .cmp-table tbody th.col-crit{
  background: linear-gradient(180deg,rgba(14,24,48,.75),rgba(10,18,36,.60)) !important;
  border: 1px solid rgba(120,175,255,.20) !important;
  color:#fff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.cmp-luxe .cmp-table tbody th.col-crit{
  position: static !important; left:auto !important; z-index:auto !important; /* отключаем залипающую колонку */
}

/* 3) Teleuno всегда подсвечён, но мягко; конкурентов НЕ приглушаем */
.cmp-luxe .cmp-table td.col-teleuno{
  background: linear-gradient(180deg,rgba(90,139,255,.12),rgba(66,232,255,.08)) !important;
  border-color: rgba(90,139,255,.28) !important;
  box-shadow: 0 6px 20px rgba(90,139,255,.22) !important;
}
.cmp-luxe .cmp-table .col-banks,
.cmp-luxe .cmp-table .col-fintech{
  filter: none !important; /* убираем глобальное «затемнение» конкурентов */
}

/* 4) Мелкие выравнивания */
.cmp-luxe .crit .i{ width:22px; height:22px; flex:0 0 22px; color:#59baff; opacity:.95; }
.cmp-luxe .cmp-table th, .cmp-luxe .cmp-table td{ vertical-align: top; box-sizing: border-box; }
/* ===== COMPARE: безопасные оверрайды ===== */

/* спрятать кнопку "Подсветить Teleuno" */
#compare .cmp-controls { display: none !important; }

/* шапка таблицы — явный фон, без blur, центрируем заголовки */
#compare .cmp-table thead th{
  backdrop-filter: none !important;
  background: linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  text-align: center !important;
  font-weight: 800 !important;
  color: #eaf4ff !important;
}

/* TELEUNO в шапке — читаемый бейдж */
#compare .cmp-table thead .col-teleuno .th-teleuno{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px; border-radius:999px;
  background: linear-gradient(135deg,#42E8FF,#5A8BFF);
  color:#06121f; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  box-shadow: inset 0 0 14px rgba(255,255,255,.22), 0 0 14px rgba(90,139,255,.28);
}
/* внутри .th-teleuno у вас <span class="grad"> — отключаем градиент текста */
#compare .th-teleuno .grad{
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  color:currentColor !important;
}

/* левый столбец "Критерий" — другой оттенок и НЕ прилипающий */
#compare .cmp-table thead th.col-crit,
#compare .cmp-table tbody th.col-crit{
  background: linear-gradient(180deg,rgba(14,24,48,.75),rgba(10,18,36,.60)) !important;
  border:1px solid rgba(120,175,255,.20) !important;
  color:#fff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#compare .cmp-table tbody th.col-crit{
  position: static !important; left:auto !important; z-index:auto !important;
}

/* колонка TELEUNO — мягкая постоянная подсветка */
#compare .cmp-table td.col-teleuno{
  background: linear-gradient(180deg,rgba(90,139,255,.12),rgba(66,232,255,.08)) !important;
  border-color: rgba(90,139,255,.28) !important;
  box-shadow: 0 6px 20px rgba(90,139,255,.22) !important;
}

/* конкурентов не затемняем */
#compare .cmp-table .col-banks,
#compare .cmp-table .col-fintech{ filter:none !important; }
/* FIX: сетка «Кому подходит» (4 → 2 → 1) */
#for-whom .cards-4{ grid-template-columns: repeat(4,1fr) !important; gap:22px !important; }
@media (max-width:1024px){ #for-whom .cards-4{ grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width:760px){  #for-whom .cards-4{ grid-template-columns: 1fr !important; } }
/* === FOR-WHOM: базовая сетка и размеры иконок === */
#for-whom .cards-4{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 18px 24px 0; /* внутри контейнера */
}
#for-whom .cards-4 li{
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  align-items: start;
}
#for-whom .card-icon{
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
#for-whom .card-icon svg{
  width: 26px; height: 26px;
}

/* брейкпоинты */
@media (max-width:1024px){
  #for-whom .cards-4{ grid-template-columns: repeat(2,1fr); margin:18px 0 0; }
}
@media (max-width:760px){
  #for-whom .cards-4{ grid-template-columns: 1fr; }
}
/* =========================
   FOR-WHOM — премиальные карточки
   ========================= */
#for-whom{ position:relative; padding:6px 0 8px; z-index:2; }

#for-whom .cards-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  list-style:none;
  padding:0;
  margin:22px 0 0;
}

/* Карточка */
#for-whom .cards-4 li{
  position:relative;
  display:grid;
  gap:12px;
  align-items:start;

  padding:22px 22px;
  border-radius:22px;

  /* стекло */
  background:
    radial-gradient(120% 180% at 20% 0%, rgba(255,255,255,.10), rgba(255,255,255,.02) 60%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);

  /* короткая «дорогая» тень */
  box-shadow:
    0 12px 34px rgba(7,12,24,.36),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.16);

  backdrop-filter: blur(10px);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease, outline-color .28s ease;
  overflow:hidden;
}

/* стеклянный блик сверху */
#for-whom .cards-4 li::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  mix-blend-mode:overlay; opacity:.28;
}

/* Hover: легкий подъём, чище стекло, чуть сильнее кайма */
#for-whom .cards-4 li:hover{
  transform: translateY(-3px);
  background:
    radial-gradient(120% 180% at 20% 0%, rgba(255,255,255,.12), rgba(255,255,255,.03) 60%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045));
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 16px 44px rgba(7,12,24,.46),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.20);
}

/* Иконка */
#for-whom .card-icon{
  position:relative;
  width:58px; height:58px; border-radius:16px;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 25% 20%, rgba(86,255,225,.22), rgba(92,168,247,.18)),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 10px 24px rgba(16,22,38,.36);
  isolation:isolate;
  margin-bottom:6px;
}

/* аккуратный светящийся ореол вокруг иконки */
#for-whom .card-icon::before{
  content:""; position:absolute; inset:-12px; border-radius:24px; z-index:-1;
  background: conic-gradient(from 220deg,
              rgba(92,168,247,0),
              rgba(92,168,247,.22),
              rgba(73,225,196,.22),
              rgba(92,168,247,0));
  filter: blur(14px); opacity:.55; pointer-events:none;
}

#for-whom .card-icon svg{ width:28px; height:28px; display:block; }

/* Заголовок и текст */
#for-whom h3{
  margin:0;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.01em;
  color:#fff;
}
#for-whom p{
  margin:6px 0 0;
  color:var(--muted);
  line-height:1.55;
  font-size:15.5px;
}

/* Адаптив */
@media (max-width:1024px){
  #for-whom .cards-4{ grid-template-columns:repeat(2,1fr); gap:18px; }
}
@media (max-width:760px){
  #for-whom .cards-4{ grid-template-columns:1fr; }
  #for-whom .cards-4 li{ padding:18px; border-radius:20px; }
  #for-whom .card-icon{ width:54px; height:54px; }
}
/* ===== PREMIUM COMPARE – TOKENS ===== */
:root{
  --cmp-bg:#0B1220;
  --cmp-surface:rgba(255,255,255,.06);
  --cmp-surface-weak:rgba(255,255,255,.04);
  --cmp-border:rgba(255,255,255,.10);
  --cmp-ring:#5A8BFF;
  --cmp-grad-from:#42E8FF;
  --cmp-grad-to:#5A8BFF;
  --cmp-shadow:0 10px 30px rgba(0,0,0,.25);
  --cmp-radius:20px;
  --cmp-blur:14px;
  --cmp-dur:160ms;
  --cmp-ease:cubic-bezier(.2,.7,.2,1);
}

.cmp-luxe{position:relative;padding:56px 0;background:radial-gradient(1200px 600px at 50% -200px,rgba(66,232,255,.12),transparent 60%)}
.cmp-luxe .container{max-width:1200px;margin:0 auto;padding:0 20px}
.cmp-luxe .cmp-title{color:#fff;text-align:center;font:800 36px/1.15 Inter,Manrope,system-ui}
.cmp-luxe .cmp-grad{background:linear-gradient(90deg,var(--cmp-grad-from),var(--cmp-grad-to));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cmp-luxe .cmp-intro{max-width:880px;margin:10px auto 24px;color:#cfe3ff;text-align:center;line-height:1.6}

/* Toggle */
.cmp-luxe .cmp-controls{display:flex;justify-content:flex-end;margin:8px 0 14px}
.cmp-luxe .cmp-toggle{position:relative;display:inline-flex;align-items:center;gap:10px;
  color:#e8f3ff;background:var(--cmp-surface-weak);border:1px solid var(--cmp-border);
  border-radius:999px;padding:6px 14px 6px 46px;backdrop-filter:blur(var(--cmp-blur));
  box-shadow:var(--cmp-shadow);transition:background var(--cmp-dur) var(--cmp-ease),border-color var(--cmp-dur)}
.cmp-luxe .cmp-toggle .knob{position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--cmp-grad-from),var(--cmp-grad-to));
  box-shadow:0 0 0 2px rgba(90,139,255,.25),0 6px 18px rgba(90,139,255,.25)}
.cmp-luxe:not(.is-focus-teleuno) .cmp-toggle{opacity:.7}

/* Table scaffold */
.cmp-luxe .cmp-wrap{position:relative}
.cmp-luxe .cmp-table{width:100%;border-collapse:separate;border-spacing:12px}
.cmp-luxe .cmp-table thead th{
  position:sticky;top:0;z-index:2;padding:14px 16px;border-radius:var(--cmp-radius);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.06));
  border:1px solid var(--cmp-border);backdrop-filter:blur(var(--cmp-blur));color:#e8f3ff;
  text-align:left;font:700 15px/1.35 Inter,Manrope,system-ui;box-shadow:var(--cmp-shadow)}
.cmp-luxe .cmp-table thead th.col-teleuno{box-shadow:0 0 0 2px rgba(90,139,255,.25),var(--cmp-shadow)}
.cmp-luxe .th-teleuno{display:inline-block;padding:2px 10px;border-radius:12px;
  background:linear-gradient(90deg,var(--cmp-grad-from),var(--cmp-grad-to));
  color:#06121f}

.cmp-luxe .cmp-table tbody th,
.cmp-luxe .cmp-table td{
  padding:18px 18px;border-radius:var(--cmp-radius);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.04));
  border:1px solid var(--cmp-border);backdrop-filter:blur(var(--cmp-blur));
  color:#e0ecff;vertical-align:top;box-shadow:var(--cmp-shadow);
  transition:transform var(--cmp-dur) var(--cmp-ease),box-shadow var(--cmp-dur),background var(--cmp-dur)}
.cmp-luxe .cmp-table tbody th.col-crit{position:sticky;left:0;z-index:1}
.cmp-luxe .crit{display:flex;align-items:center;gap:10px;font-weight:700;color:#eff6ff}
.cmp-luxe .i{width:20px;height:20px;flex:0 0 20px;color:transparent}

/* Premium focus on Teleuno */
.cmp-luxe.is-focus-teleuno .cmp-table .col-teleuno{
  background:linear-gradient(180deg,rgba(90,139,255,.20),rgba(66,232,255,.14));
  box-shadow:0 0 0 2px rgba(90,139,255,.25),0 10px 30px rgba(90,139,255,.25)}
.cmp-luxe.is-focus-teleuno .cmp-table .col-banks,
.cmp-luxe.is-focus-teleuno .cmp-table .col-fintech{filter:saturate(.75) brightness(.75)}

/* Row hover */
@media (hover:hover){
  .cmp-luxe .cmp-table tbody tr:hover td,
  .cmp-luxe .cmp-table tbody tr:hover th.col-crit{
    transform:translateY(-1px);
    box-shadow:0 14px 34px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05)}
}

/* Mobile: карточки */
@media (max-width: 860px){
  .cmp-luxe .cmp-table{border-spacing:8px}
  .cmp-luxe .cmp-table thead{display:none}
  .cmp-luxe .cmp-table tbody tr{display:grid;grid-template-columns:1fr;gap:8px}
  .cmp-luxe .cmp-table tbody th.col-crit{position:relative}
  .cmp-luxe .cmp-table tbody td{position:relative;padding-left:14px}
  .cmp-luxe .cmp-table tbody td::before{
    content:attr(data-label);display:block;margin-bottom:6px;color:#a9c6ff;font:600 12px/1 Inter,system-ui;opacity:.85}
  /* порядок: Teleuno первым, затем банки, затем финтехи */
  .cmp-luxe .cmp-table tbody td.col-teleuno{order:1}
  .cmp-luxe .cmp-table tbody td.col-banks{order:2}
  .cmp-luxe .cmp-table tbody td.col-fintech{order:3}
}

/* A11y + motion */
@media (prefers-reduced-motion:reduce){
  .cmp-luxe *{transition:none !important;animation:none !important}
}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
/* === FIX: левый столбец "Критерий" ломается по буквам === */
#compare .cmp-table{
  table-layout: fixed !important;
  min-width: 1100px;         /* защита от ужимания правого столбца */
}

#compare .cmp-wrap{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ключевое: тело левого столбца занимает всю ширину колонки,
   НЕТ вертикального письма, НЕТ агрессивных переносов */
#compare .cmp-table tbody th.col-crit{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
}

#compare .cmp-table tbody th.col-crit .crit{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  writing-mode: horizontal-tb !important;
}

/* доп. защита от «сложных» глобальных правил */
#compare .cmp-table tbody th.col-crit *,
#compare .cmp-table thead th.col-crit *{
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* фикс ширины колонки критериев, чтобы она не схлопывалась */
#compare .cmp-table .col-crit{ width: 28% !important; }

/* (оставляем читаемый бейдж в шапке TELEUNO) */
#compare .cmp-table thead .col-teleuno .th-teleuno{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:999px;
  background:linear-gradient(135deg,#42E8FF,#5A8BFF) !important;
  color:#06121f !important;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  box-shadow: inset 0 0 14px rgba(255,255,255,.22), 0 0 14px rgba(90,139,255,.28);
}
#compare .th-teleuno .grad{
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  color:currentColor !important;
}
/* === CRITERIA — мягкое бирюзовое свечение только для левого столбца === */
#compare .cmp-table thead th.col-crit,
#compare .cmp-table tbody th.col-crit{
  /* свой фон + контур (перебиваем старые !important) */
  background: linear-gradient(180deg, rgba(18,28,48,.85), rgba(10,18,36,.72)) !important;
  border: 1px solid rgba(86,200,255,.28) !important;
  color:#fff !important;

  /* лёгкое «премиум»-свечение внутри + аккуратная тень */
  box-shadow:
    inset 0 0 16px rgba(86,200,255,.18),
    0 8px 26px rgba(0,0,0,.35) !important;

  position: relative !important; /* нужно для псевдослоя */
  overflow: visible !important;
  z-index: 0 !important;
}

/* Внешнее свечение отдельным слоем (не режет радиус, не дергает layout) */
#compare .cmp-table thead th.col-crit::after,
#compare .cmp-table tbody th.col-crit::after{
  content: "";
  position: absolute;
  inset: -6px;                     /* чуть больше ячейки */
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;                     /* лежит под ячейкой */
  background:
    radial-gradient(60% 60% at 50% 20%,
      rgba(86,200,255,.28),
      rgba(86,200,255,0) 70%);
  filter: blur(14px);
  opacity: .85;
  transition: filter .25s ease, opacity .25s ease;
}

/* Чуть сильнее при ховере по строке или по самой ячейке */
#compare .cmp-table tbody tr:hover th.col-crit::after,
#compare .cmp-table tbody th.col-crit:hover::after{
  filter: blur(16px);
  opacity: 1;
}
/* === COMPARE: ровное свечение у левого столбца, без срезов === */

/* 0) обёртка не должна резать по краям */
#compare .cmp-wrap{
  overflow: visible !important;          /* было auto по X — оставим браузеру, но без клипа */
}

/* 1) левый заголовок больше не sticky (sticky обрезает ореол) */
#compare .cmp-table thead th.col-crit{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* 2) поднимаем ВСЕ ячейки левого столбца над соседними рядами */
#compare .cmp-table tbody th.col-crit,
#compare .cmp-table thead th.col-crit{
  position: relative !important;         /* создаём stacking-context */
  z-index: 10 !important;                /* выше, чем у обычных td */
}

/* 3) обычные ячейки — ниже по z-index, чтобы не перекрывали «ореол» слева */
#compare .cmp-table tbody td{
  position: relative; 
  z-index: 1;
}

/* 4) сам «ореол»: не box-shadow, а фильтр + псевдоэлемент — его не клипают */
/*    (цвет подставишь свой, сейчас деликатная бирюза) */
#compare .cmp-table thead th.col-crit,
#compare .cmp-table tbody th.col-crit{
  /* ваш фон/бордер можно оставить как был */
  background: linear-gradient(180deg, rgba(18,28,48,.86), rgba(10,18,36,.70)) !important;
  border: 1px solid rgba(86,200,255,.28) !important;
  /* мягкий общий свет, который НЕ режется предками */
filter:
  drop-shadow(0 3px 7px rgba(86,200,255,.18))
  drop-shadow(0 0 4px rgba(86,200,255,.14));
}

/* дополнительный «ободок» — внутренняя подсветка, чтобы даже если
   браузер где-то скроет наружный свет, внутри всё равно было видно */
#compare .cmp-table thead th.col-crit::after,
#compare .cmp-table tbody th.col-crit::after{
  content: "";
  position: absolute;
  inset: -6px;                             /* выходим за края самой ячейки */
  border-radius: calc(var(--cmp-radius) + 8px);
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 0%,
               rgba(86,200,255,.20), rgba(86,200,255,0) 70%);
  z-index: -1;                             /* за содержимым ячейки, но внутри её контекста */
}

/* чуть сильнее при hover строки */
@media (hover:hover){
  #compare .cmp-table tbody tr:hover th.col-crit{
    filter:
drop-shadow(0 3px 8px rgba(86,200,255,.20))
    drop-shadow(0 0 7px rgba(86,200,255,.16));
  transition: filter .35s ease-in-out;
  }
}
/* Отключаем подсветку при наведении у кнопок */
button:hover,
a.btn:hover,
a.button:hover {
  filter: none !important;
  box-shadow: none !important;
}
/* === COMPARE: шапка таблицы — одинаковые заголовки, TELEUNO не трогаем === */

/* базовый вид для всех заголовков КРОМЕ TELEUNO */
#compare .cmp-table thead th:not(.col-teleuno){
  background: linear-gradient(180deg, rgba(20,30,55,.86), rgba(12,20,40,.78)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  color: #eaf4ff !important;
  text-align: center !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  border-radius: 18px !important;
  filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  overflow: visible !important;
}

/* у заголовков (кроме TELEUNO) отключаем любые эффекты при ховере */
#compare .cmp-table thead th:not(.col-teleuno):hover{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  transform: none !important;
  filter: none !important;
}

/* TELEUNO: оставляем полностью «как было» — прозрачный контейнер без теней,
   чтобы синяя «таблетка» и её свечение НЕ обрезались и не гасли */
#compare .cmp-table thead th.col-teleuno{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}

/* на всякий случай — сама «таблетка» TELEUNO поверх и не изменяется */
#compare .cmp-table thead .col-teleuno .th-teleuno{
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  /* её фон/свечение уже задано выше в твоём файле — не меняем */
}
/* === UNIFY: верхняя строка заголовков (кроме TELEUNO) ================== */
#compare .cmp-table thead th:not(.col-teleuno){
  /* одинаковый внешний вид, без свечения и жирных теней */
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}

/* на всякий — отключаем любые псевдосияния у заголовков, кроме TELEUNO */
#compare .cmp-table thead th:not(.col-teleuno)::before,
#compare .cmp-table thead th:not(.col-teleuno)::after{
  content: none !important;
}

/* TELEUNO оставляем как было — своя «таблетка», фон заголовка прозрачный */
#compare .cmp-table thead th.col-teleuno{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* точечно: у "Критерий" тоже ровно как у остальных, БЕЗ свечения */
#compare .cmp-table thead th.col-crit{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: none !important;
  filter: none !important;
}
/* === Верхняя строка заголовков (кроме TELEUNO) ================== */
#compare .cmp-table thead th:not(.col-teleuno){
  background: linear-gradient(180deg, rgba(120,130,180,0.28), rgba(80,90,140,0.18)) !important;
  border: 1px solid rgba(180,190,255,0.12) !important;
  box-shadow: inset 0 0 6px rgba(100,120,200,0.12) !important;
  filter: none !important;
  overflow: visible !important;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Hover — лёгкий эффект, но не яркое свечение */
#compare .cmp-table thead th:not(.col-teleuno):hover{
  background: linear-gradient(180deg, rgba(130,140,200,0.32), rgba(90,100,160,0.22)) !important;
  box-shadow: inset 0 0 8px rgba(120,140,220,0.18) !important;
}

/* TELEUNO остаётся ярким, не трогаем */
#compare .cmp-table thead th.col-teleuno{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Критерий (чтобы совпадал с другими верхними) */
#compare .cmp-table thead th.col-crit{
  background: linear-gradient(180deg, rgba(120,130,180,0.28), rgba(80,90,140,0.18)) !important;
  border: 1px solid rgba(180,190,255,0.12) !important;
  box-shadow: inset 0 0 6px rgba(100,120,200,0.12) !important;
  filter: none !important;
}
/* === HARD OFF: никаких sticky у шапки таблицы === */
.cmp-luxe .cmp-table thead,
.cmp-luxe .cmp-table thead th,
#compare .cmp-table thead,
#compare .cmp-table thead th {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* (на всякий случай) левый столбец тоже не липкий */
.cmp-luxe .cmp-table tbody th.col-crit,
#compare .cmp-table tbody th.col-crit {
  position: static !important;
  left: auto !important;
  z-index: auto !important;
}
/* ===== TERMS layout ===== */
.terms{ position:relative; z-index:2; padding:28px 0 34px; }
.terms .lead{ margin:8px 0 18px; }

.terms-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr .9fr;  /* 3 колонки */
  gap:22px;
}

/* Карточки блока */
.terms .card{
  position:relative;
  border-radius:22px;
  padding:20px 20px;
  background:
    radial-gradient(120% 160% at 20% 0%, rgba(255,255,255,.10), rgba(255,255,255,.02) 60%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 12px 34px rgba(7,12,24,.36),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}

.terms .card h3{ margin:2px 0 10px; font-size:20px; font-weight:800; letter-spacing:-.01em; }

/* Списки */
.terms .list{ margin:0; padding-left:18px; display:grid; gap:10px; }
.terms .list li{ line-height:1.55; }

/* Акценты карточек */
.terms .t-pricing{
  /* слегка подсветим главную карточку */
  border-color: rgba(90,139,255,.22);
  box-shadow:
    0 16px 42px rgba(90,139,255,.20),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.18);
}
.terms .t-legal{
  /* служебный вид — светлее и немного меньший кегль */
  color: rgba(255,255,255,.86);
  font-size: 15.5px;
  background:
    radial-gradient(120% 160% at 20% 0%, rgba(255,255,255,.08), rgba(255,255,255,.02) 60%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}

/* Бейдж «0% на первое пополнение…» */
.terms .badge{
  display:inline-block;
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color:#06121f;
  box-shadow: 0 8px 18px rgba(90,139,255,.28), inset 0 1px 0 rgba(255,255,255,.35);
  vertical-align: middle;
}

/* Финальная строка-уверенность */
.terms .trustline{
  margin:16px 0 0;
  text-align:center;
  color:#d7e6ff;
  font-weight:700;
}

/* Адаптив: 2 колонки, затем 1 */
@media (max-width:1024px){
  .terms-grid{ grid-template-columns: 1fr 1fr; }
  .terms .t-legal{ grid-column: 1 / -1; }
}
@media (max-width:760px){
  .terms-grid{ grid-template-columns: 1fr; }
}
/* ===== TERMS: premium layout / polish ===== */
.terms{position:relative;z-index:2;padding:32px 0 38px;}
.terms-title,.terms-sub{ text-align:center; }
.terms-sub{ max-width: 980px; margin: 8px auto 20px; }

.terms-grid{
  display:grid;
  grid-template-columns: 1fr 1.18fr 1fr;         /* центральная колонка шире */
  grid-template-areas: "limits pricing legal";
  gap:22px;
}

/* назначаем области (порядок HTML не важен) */
.terms .t-limits{ grid-area:limits; }
.terms .t-pricing{ grid-area:pricing; }
.terms .t-legal{ grid-area:legal; }

/* базовая карточка (стекло + hairline) */
.terms .card{
  position:relative;
  border-radius:22px;
  padding:20px 20px;
  background:
    radial-gradient(120% 160% at 20% 0%, rgba(255,255,255,.10), rgba(255,255,255,.02) 60%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 12px 34px rgba(7,12,24,.36),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.terms .card h3{ margin:2px 0 10px; font-size:20px; font-weight:800; letter-spacing:-.01em; }

/* список и строки */
.terms .list{ margin:0; padding-left:18px; display:grid; gap:10px; }
.terms .list li{ line-height:1.6; position:relative; }

/* ——— ПРЕМИАЛЬНАЯ ПОДСВЕТКА центральной карточки ——— */
.terms .t-pricing{
  border-color: rgba(90,139,255,.26);
  box-shadow:
    0 16px 42px rgba(90,139,255,.22),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.20);
}
.terms .t-pricing .card-glow{
  content:"";
  position:absolute; inset:-2px; border-radius:24px; pointer-events:none; z-index:-1;
  background:
    radial-gradient(60% 60% at 50% -10%, rgba(66,232,255,.18), transparent 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(90,139,255,.22), transparent 70%);
  filter: blur(14px);
}

/* лёгкий shine при hover только у «Тарифов» */
@media (hover:hover){
  .terms .t-pricing:hover{
    transform: translateY(-2px);
    box-shadow:
      0 20px 56px rgba(90,139,255,.28),
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -1px 0 rgba(0,0,0,.22);
  }
}

/* ——— БЕЙДЖ: аккуратная таблетка справа, не ломает строки ——— */
.terms .with-badge{ display:flex; align-items:flex-start; gap:12px; }
.terms .with-badge > span:first-child{ flex:1 1 auto; }
.terms .badge{
  flex:0 0 auto;
  white-space:nowrap;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.02em;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color:#06121f;
  box-shadow: 0 10px 22px rgba(90,139,255,.30), inset 0 1px 0 rgba(255,255,255,.38);
  transform: translateY(-2px);
}

/* «служебная» юр. карточка — светлее и чуть меньший кегль */
.terms .t-legal{
  color: rgba(255,255,255,.9);
  font-size: 15.5px;
  background:
    radial-gradient(120% 160% at 20% 0%, rgba(255,255,255,.08), rgba(255,255,255,.02) 60%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}

/* финальная строка-уверенность */
.terms .trustline{
  margin:18px 0 0;
  text-align:center;
  color:#d7e6ff;
  font-weight:800;
}

/* адаптив: 3 -> 2 -> 1; «Тарифы» идут первыми */
@media (max-width:1024px){
  .terms-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "pricing pricing"
      "limits legal";
  }
  .terms .t-pricing{ order:-1; }
}
@media (max-width:760px){
  .terms-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "pricing"
      "limits"
      "legal";
  }
}
/* ===== СЖАТИЕ ОТСТУПОВ (точечно) ===== */

/* 1) Между видео-сценой и заголовком "Интерфейс Teleuno" */
.screens{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  margin-bottom: 18px !important;  /* было 64px */
}
#ui .h2{
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}
#ui .sub{
  margin-top: 4px !important;
  margin-bottom: 12px !important;
}

/* 2) Между заголовком "Интерфейс…" и карточками/картинками ниже */
#ui > *:not(:first-child){
  margin-top: 12px !important;          /* прижимаем контент к заголовку */
}

/* 3) Блок "Как оформить…" (steps) — подвинуть ближе к предыдущему */
#how{
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
#how .h2{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* 4) FAQ — убрать лишний «воздух» сверху и снизу */
#faq, .faq{
  padding-top: 1px !important;
  padding-bottom: 36px !important;
}
#faq .h2, .faq .h2{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* На всякий: убираем крупные внешние отступы у H2 внутри секций */
#ui h2.h2, #how h2.h2, #faq h2.h2{
  margin: 0 0 10px !important;
}
/* ===== Увеличенные кнопки CTA ===== */
.btn {
  font-size: 18px !important;     /* больше текст */
  padding: 14px 34px !important;  /* больше высота и ширина */
  border-radius: 14px !important; /* более мягкие углы */
  font-weight: 600 !important;    /* жирнее шрифт */
  letter-spacing: 0.3px;          /* аккуратнее текст */
}

.btn-primary {
  background: linear-gradient(90deg, #00E0FF, #0078FF) !important;
  box-shadow: 0 4px 20px rgba(0, 150, 255, 0.4) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 150, 255, 0.6) !important;
}

.btn-secondary {
  background: linear-gradient(90deg, #3a3f47, #2a2f35) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5) !important;
}
.btn {
  border: none !important;     /* убираем лишнюю линию */
  outline: none !important;    /* убираем фокус-рамку */
}
/* ==== компактные CTA-кнопки (только под геро-блоком) ==== */
.hero-copy .cta a.btn,
.hero-copy .cta button.btn {
  --btn-h: 54px !important;      /* высота кнопки */
  --btn-pad: 22px !important;    /* отступы по бокам */
  --btn-r: 14px !important;      /* скругление углов */
  font-size: 17px !important;    /* размер текста */
  font-weight: 700 !important;
  letter-spacing: 0.1px;
  white-space: nowrap;           /* текст всегда в одну строку */
}

/* адаптив для мобилы */
@media (max-width: 768px) {
  .hero-copy .cta a.btn,
  .hero-copy .cta button.btn {
    --btn-h: 50px !important;
    --btn-pad: 18px !important;
    font-size: 16px !important;
  }
}
/* Футер сетка: 3 колонки */
.site-footer .footer-nav {
  text-align: right;
  display: flex;
  gap: 16px;            /* ← без направления = в строку */
}

/* Левая часть */
.site-footer .footer-left {
  text-align: left;
}

/* Центр */
.site-footer .footer-copy {
  text-align: center;
  font-size: 14px;
  color: #a9b7d1;
}

/* Правая часть */
.site-footer .footer-nav {
  text-align: right;
  display: flex;
  gap: 16px;
}
.site-footer .footer-nav a {
  color: #cfe3ff;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-footer .footer-nav a:hover {
  color: #fff;
}
/* === FORCE: меню футера строго в столбик === */
footer.site-footer .footer-grid > nav.footer-nav{
  display: flex !important;
  flex-direction: column !important;  /* ← ключ */
  gap: 10px !important;
  align-items: flex-end !important;
  justify-self: end !important;
  text-align: right !important;
}
footer.site-footer nav.footer-nav a{
  display: block !important;          /* вся строка кликабельна */
}
/* FOOTER — финальные правки */
.site-footer .footer-grid{
  grid-template-columns: 1fr auto auto;  /* левый — тянется; центр и право — по содержимому */
  align-items: start;
  gap: 20px;
}
.site-footer .footer-copy{
  text-align: center;
  font-size: 14px;
  color: #a9b7d1;
}
.site-footer .footer-nav a{ display:block; }
/* === Блог: карточки на главной и сетка ===================== */
.home-blog-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}

.post-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.14);
}

.post-card .thumb{
  display:block;
  width:100%;
  /* фиксируем красивую высоту */
  aspect-ratio:16/9;
  object-fit:cover;
}

.post-card .post-body{ padding:12px 14px 14px; }

.post-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  color:var(--cmp-muted, #a9b7d1);
}
.post-meta .dot{ opacity:.6; }

.post-title{
  margin:6px 0 6px;
  font-size:clamp(16px,1.6vw,18px);
  line-height:1.35;
}
.post-excerpt{ margin:0 0 8px; color:#cfe3ff; }

/* маленькие «чипы» тегов/категории */
.chip{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-size:12px;
  line-height:1.6;
}
.chip--cat{
  background:linear-gradient(90deg,#49E1C4,#5CA8F7);
  color:#071120;
  border:0;
}

/* адаптив: 2 колонки на планшете, 1 — на телефоне */
@media (max-width:1024px){
  .home-blog-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .home-blog-grid{ grid-template-columns:1fr; }
}
/* === Blog cards: компактные 16:9 === */
#home-blog, .blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:start;
}
@media (max-width:1024px){ #home-blog, .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  #home-blog, .blog-grid{ grid-template-columns:1fr; } }

.post-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  overflow:hidden;
  backdrop-filter:saturate(120%) blur(2px);
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}

.post-card .post-media{
  position:relative;
  aspect-ratio:16/9;           /* фиксируем именно 16:9 */
  overflow:hidden;
}
.post-card .post-media img{
  width:100%; height:100%;
  object-fit:cover;            /* «обрезает» вертикальные в нужный кадр */
  display:block;
}

.post-card .post-body{ padding:12px 14px 14px; }
.post-card .post-meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:12px; }
.post-card .post-title a{ font-weight:800; font-size:clamp(16px,1.5vw,18px); line-height:1.35; }
.post-card .muted{ font-size:13px; color:#a9b7d1; }

/* На главной – ещё компактнее (без анонса) */
#home-blog .muted{ display:none; }
#home-blog .post-body{ padding:10px 12px; }
#home-blog .post-title a{ font-size:clamp(15px,1.3vw,17px); }
/* ===== Blog cards: компактные 16:9 ===== */
.post-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
@media (max-width:1024px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .post-grid{ grid-template-columns:1fr; } }

.post-card{
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.20);
  display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .2s ease;
}
.post-card:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.28); }

.post-card .thumb{
  position:relative;
  aspect-ratio:16/9;   /* фиксируем именно 16:9 */
  width:100%;
  overflow:hidden;
}
.post-card .thumb img{
  width:100%; height:100%;
  object-fit:cover;    /* обрезает по краям, но картинка всегда 16:9 */
  display:block;
}

.post-card .post-body{
  padding:12px 14px 14px;
  display:flex; flex-direction:column; gap:6px;
}
.post-card .post-meta{
  font-size:12px;
  color:var(--cmp-muted,#a9b7d1);
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.post-card .tag{
  background:rgba(255,255,255,.08);
  padding:2px 8px; border-radius:999px;
  font-size:12px; line-height:18px;
}
.post-card .post-title{
  margin:2px 0 6px;
  font-size:clamp(16px,1.7vw,18px);
  line-height:1.35;
}
.post-card .muted{ color:var(--cmp-muted,#a9b7d1); font-size:14px; }
.post-card .btn.btn-ghost.btn-sm{ align-self:flex-start; }
.also-wrap{position:relative;margin-top:8px}
.also-track{display:flex;gap:14px;overflow:auto;padding:4px 2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.also-track::-webkit-scrollbar{display:none}
.also-card{flex:0 0 clamp(240px,32vw,300px);scroll-snap-align:start}
.also-nav{position:absolute;inset-block:0;inset-inline:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.also-btn{pointer-events:auto;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);backdrop-filter:saturate(140%) blur(8px);width:32px;height:32px;border-radius:999px;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.18);opacity:.7;transition:opacity .15s,transform .15s}
.also-btn:hover{opacity:.95;transform:translateY(-1px)}
.also-btn svg{width:18px;height:18px;color:#cfe3ff}
.also-prev{margin-left:-10px}
.also-next{margin-right:-10px}
/* ====== Блок «Из блога»: одинаковая высота карточек ====== */

/* контейнер сетки — тянем элементы на одинаковую высоту */
.home-blog-grid,
.post-grid {
  align-items: stretch;                 /* grid по умолчанию тянет, но фиксируем явно */
  grid-template-columns: repeat(3, minmax(0,1fr));
}

/* сама карточка: колонка на всю высоту ячейки */
.post-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* картинка фиксируется по соотношению сторон */
.post-card > a:first-child img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200/630;
  object-fit: cover;
}

/* контентная часть растягивается, а кнопка уходит вниз */
.post-card .post-body {
  display: flex;
  flex-direction: column;
  flex: 1;                    /* <— растягиваем «тело» */
  padding: 12px 14px 14px;
}

/* длинные заголовки не расталкивают карточку выше нормы */
.post-card .post-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* показываем максимум 2 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* кнопка «Читать» всегда у нижней кромки */
.post-card .btn {
  margin-top: auto;
  align-self: flex-start;     /* чтобы не растягивалась на всю ширину, если нужно */
}
/* --- Тарифы и условия: аккуратное выравнивание --- */

/* 0) Сбрасываем прежнее глобальное центрирование секции */
#terms { text-align: left; }

/* 1) По центру — только заголовок секции и подзаголовок */
#terms .section-title,
#terms .h1,
#terms h1 { text-align: center; }

#terms .section-lead,
#terms .section-sub,
#terms .lead,
#terms .intro,
#terms p.lead {
  text-align: center;
  max-width: 980px;
  margin-inline: auto;
  line-height: 1.5;
  text-wrap: balance;
}

/* 2) По центру — только заголовки внутри карточек */
#terms .card h3, #terms .card .h3,
#terms .tile h3, #terms .tile .h3,
#terms .pricing-card h3, #terms .pricing-card .h3 {
  text-align: center;
  margin: 0 0 10px;
}

/* 3) Обычный текст в карточках — по левому краю */
#terms .card p, #terms .card ul, #terms .card ol, #terms .card li,
#terms .tile p, #terms .tile ul, #terms .tile ol, #terms .tile li,
#terms .pricing-card p, #terms .pricing-card ul, #terms .pricing-card ol, #terms .pricing-card li {
  text-align: left;
}

/* 4) Карточки остаются одинаковой высоты (на случай, если нужно) */
#terms .cards, #terms .terms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
#terms .card, #terms .tile, #terms .pricing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#terms .card .btn, #terms .tile .btn, #terms .pricing-card .btn {
  margin-top: auto;
  align-self: center;
}
/* === Кнопки как на "О канале" === */
/* База — одинаковая типографика и форма */
.btn, .btn-soft, .btn-cta{
  border-radius: 16px;              /* “pill” */
  padding: 12px 20px;               /* не увеличиваем кнопки заметно */
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  user-select: none;
  will-change: transform, box-shadow, background-position;
}

/* Градиентная премиум-кнопка */
.btn-cta{
  --g1:#22d1ff; --g2:#2a7bff;
  background: linear-gradient(135deg,var(--g1),var(--g2));
  background-size: 220% 220%;
  color:#001a2a;
  border: 0;
  box-shadow:
    0 10px 26px rgba(36,135,255,.34),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition: background-position .35s ease, transform .15s ease, box-shadow .25s ease;
}
.btn-cta:hover{
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow:
    0 14px 34px rgba(36,135,255,.42),
    inset 0 1px 0 rgba(255,255,255,.30);
}
.btn-cta:active{
  transform: translateY(1px);
  background-position: 60% 50%;
  box-shadow:
    0 6px 16px rgba(36,135,255,.26),
    inset 0 1px 0 rgba(255,255,255,.18);
}
/* лёгкий бесконечный “перелив” как у верхних */
@keyframes btnShimmer { 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
.magnet{ animation: btnShimmer 6s ease infinite }
.magnet:hover{ animation-duration: 3.5s }

/* Серый secondary с объёмом и кликом */
.btn-soft{
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color:#e9f1ff;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .25s ease, border-color .2s ease, background .25s ease;
}
.btn-soft:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px rgba(0,0,0,.22);
}
.btn-soft:active{
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(255,255,255,.08), 0 3px 10px rgba(0,0,0,.16);
}

/* Чуть отодвигаем кнопки от текста «Итог» */
.cta-summary{ display:grid; justify-items:center; gap:18px; }
.cta-summary .cta-actions{ margin-top: 2px; gap:12px; }
.cta-summary .cta-desc{
  font-weight:700;                       /* плотнее обычного */
  font-size:clamp(17px,2vw,21px);        /* чуть крупнее текста по странице */
  line-height:1.55;
}
/* Убрать встроенный крестик у input[type=search] (Chrome/Safari/Edge) */
.search input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

/* WebKit/Chromium */
.search input[type="search"]::-webkit-search-cancel-button,
.search input[type="search"]::-webkit-search-decoration,
.search input[type="search"]::-webkit-search-results-button,
.search input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

/* Старый Edge/IE */
.search input[type="search"]::-ms-clear {
  display: none; width: 0; height: 0;
}
/* Бейдж "Итог" — x2 */
.cta-summary strong:first-child{
  display:inline-flex;
  align-items:center;
  gap:16px;                    /* было 8px */
  padding:12px 24px;           /* было 6px 12px */
  margin:0 auto 14px;          /* чуть больше отступ */
  border-radius:999px;
  background:linear-gradient(135deg, rgba(31,189,224,.18), rgba(42,123,255,.18));
  border:2px solid rgba(120,170,255,.28); /* было 1px */
  font:900 24px/1 "Inter";     /* было 12px */
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#e7f3ff;
}
.cta-summary strong:first-child::before{
  content:"";
  width:16px; height:16px;     /* было 8px */
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #7df0ff, #2a7bff);
  box-shadow:0 0 24px rgba(90,165,255,.6); /* было 12px */
}

/* Текст под бейджем — x2 */
.cta-summary .cta-text{
  display:block;
  max-width:900px;
  margin:0 auto 10px;          /* было 16px */
  font:800 clamp(36px,4.2vw,48px)/1.35 "Inter"; /* было clamp(18px,2.1vw,24px) */
  color:#eaf3ff;
  text-wrap:balance;
}
@media (max-width:640px){
  .cta-summary strong:first-child{ font-size:16px; padding:10px 18px; gap:12px; border-width:1.5px; }
  .cta-summary strong:first-child::before{ width:12px; height:12px; box-shadow:0 0 16px rgba(90,165,255,.6); }
  .cta-summary .cta-text{ font:800 clamp(20px,6vw,26px)/1.35 "Inter"; }
}
/* Итог — чуть меньше и ближе к тексту */
.cta-summary strong:first-child{
  gap:12px;                 /* было 16px */
  padding:10px 20px;        /* было 12px 24px */
  margin:0 auto 8px;        /* было 14px — ближе к тексту */
  border-width:1.5px;       /* было 2px */
  font-size:20px;           /* было 24px */
}
.cta-summary strong:first-child::before{
  width:12px; height:12px;  /* было 16px */
  box-shadow:0 0 18px rgba(90,165,255,.6); /* мягче свет */
}

/* (опционально) сделать сам текст резюме ~10% компактнее */
.cta-summary .cta-text{
  margin:0 auto 18px;       /* нижний отступ немного меньше */
  font:800 clamp(32px,3.6vw,40px)/1.35 "Inter"; /* было clamp(36px,4.2vw,48px) */
}
/* ===== HEADER DESKTOP HARDENING (исправляет налезание TELEUNO на меню) ===== */
@media (min-width: 1024px) {

  /* Делаем шапку на сетке 2 колонки: бренд | меню */
  .site-header .header-row{
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
  }

  /* Бренд никогда не сжимается и не переносится */
  .site-header .brand{
    grid-column: 1;
    flex: 0 0 auto;
    white-space: nowrap;
    position: static !important;   /* на случай если где-то было absolute */
    z-index: 1;
  }

  /* Меню занимает всю вторую колонку и прижимается вправо */
  .site-header nav.nav{
    grid-column: 2;
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;               /* если места мало — переносим строки, а не налезаем */
    min-width: 0;
    position: static !important;   /* критично: отключаем fixed/absolute от мобильных стилей */
  }

  /* Ссылки не ломаются на две строки и не «расползаются» */
  .site-header nav.nav a,
  .site-header .btn{
    white-space: nowrap;
  }

  /* Кнопка бургера на десктопе всегда скрыта, если она есть */
  .menu-toggle{ display: none !important; }
}

/* ==== MOBILE POLISH & SAFETY ==== */

/* 1) Бокс-модель и авто-масштаб текста */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; } /* чтобы iOS не увеличивал текст самовольно */

/* 2) Картинки/иконки никогда не «выпирают» за контейнер */
img, svg, video { max-width: 100%; height: auto; }

/* 3) Безопасные поля под вырезы (iPhone) */
:root{
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
}
.container{
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
}

/* 4) Перенос длинных названий сервисов в карточках */
.svc-card h3{ word-break: break-word; hyphens: auto; }

/* 5) Минимальные тач-зоны на телефонах */
@media (max-width: 480px){
  .btn, .anchor, .svc-chip{
    min-height: 44px;               /* рекомендация Apple/Google */
    padding: 10px 12px;
  }
  .svc-group { padding: 16px; }     /* чуть плотнее блоки */
  .svc-grid  { gap: 10px; }
}

/* 6) Современный 100vh без скачков адресной строки в мобильных браузерах */
.has-full-height { min-height: 100dvh; }  /* при необходимости навесь этот класс на полноэкранные секции */

/* 7) Плавная прокрутка к якорям и зазор под шапку уже настроены — оставляем */
:target{ scroll-margin-top: var(--anchor-pad, 80px); }
/* HERO: компакт на телефонах */
@media (max-width: 768px){
  .hero{ padding:16px 0 12px; }
  .hero-grid{ grid-template-columns:1fr; gap:16px; }
  .hero-copy .cta{ flex-direction:column; align-items:stretch; gap:10px; }
  .hero-copy .cta .btn{ width:100%; }
  .bullets{ grid-template-columns:1fr; gap:6px; }
}

/* Общие мелочи для мобилы */
@media (max-width: 640px){
  .features-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
}

/* ===== MOBILE HEADER — ЕДИНЫЙ ВАРИАНТ ===== */

/* переменная высоты шапки, чтобы не гадать */
:root{ --header-h: 72px; }

/* бургер: по умолчанию скрыт (ПК показывает горизонтальное меню) */
.menu-toggle{
  display:none;
  width:40px; height:40px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  border-radius:12px;
  align-items:center; justify-content:center; gap:5px;
  backdrop-filter:saturate(140%) blur(6px);
  cursor:pointer;
}
.menu-toggle .bar{
  display:block; width:18px; height:2px;
  background:#eaf3ff; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
/* крестик */
.menu-toggle.is-open .bar:nth-child(1){ transform: translateY(4px) rotate(45deg); }
.menu-toggle.is-open .bar:nth-child(2){ opacity:0; }
.menu-toggle.is-open .bar:nth-child(3){ transform: translateY(-4px) rotate(-45deg); }

/* ДЕСКТОП — бургер скрыт, меню обычное */
@media (min-width:1024px){
  .menu-toggle{ display:none !important; }
  .site-header .nav{
    position:static; transform:none; background:transparent;
    display:flex; gap:14px;        /* обычная горизонтальная строка */
  }
}

/* МОБИЛА */
@media (max-width:1023.98px){
  /* показываем бургер */
  .menu-toggle{ display:flex; }

  /* по умолчанию меню не видно */
  .site-header .nav{
    display:none;
  }

  /* когда открыто — показываем панель поверх страницы */
  .site-header .nav.is-open{
    display:flex;
    position:fixed;
    inset: var(--header-h) 0 0 0;     /* отступ на высоту шапки */
    flex-direction:column;
    gap:12px;
    padding:16px;
    background:rgba(8,16,32,.96);
    backdrop-filter:saturate(140%) blur(10px);
    border-top:1px solid rgba(255,255,255,.08);
    z-index:999;
  }
  .site-header .nav.is-open a{
    display:block;
    padding:12px 8px;
    font-weight:700;
  }

  /* запрет скролла фона в момент открытого меню */
  body.nav-open{ overflow:hidden; }
}
/* === MOBILE: бургер открыт — фон НЕпрозрачный === */
@media (max-width:1023.98px){

  /* Глухой фон под меню поверх всей страницы */
  body.nav-open::before{
    content:"";
    position: fixed;
    left:0; right:0; top:0; bottom:0;
    background:#0B1220 !important;     /* сплошной цвет */
    z-index: 998;                       /* под меню, но над страницей */
  }

  /* Сам header тоже без blur/прозрачности, чтобы не «просвечивал» */
  body.nav-open .site-header{
    background:#0B1220 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Панель меню: растягиваем на весь экран и даём свой фон */
  .site-header .nav.is-open,
  nav.nav.is-open{
    display:flex !important;
    position:fixed !important;
    top: var(--header-h,72px) !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    min-height: calc(100dvh - var(--header-h,72px)) !important;
    background:#0B1220 !important;     /* сплошной цвет */
    background-image:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    z-index: 999 !important;
    overflow:auto;                      /* если пунктов много — можно скроллить */
  }
}
/* =========================================
   TELEUNO — HERO mobile polish (safe override)
   ВСТАВИТЬ В САМЫЙ НИЗ styles.css
========================================= */

@media (max-width: 1023.98px){
  /* Контейнеры секции */
  .hero{ padding: 16px 0 10px; }
  .hero .container{ padding-left: 16px; padding-right: 16px; }

  /* Сетка hero: в одну колонку */
  .hero-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }

  /* Заголовок и подзаголовок по центру и компактнее */
  .hero-title{ margin: 4px 0 4px; text-align: center; }
  .hero-title .h1{
    font-size: clamp(24px, 6vw, 28px);
    line-height: 1.2;
    letter-spacing: .1px;
  }
  .hero-copy{ margin-top: 4px; }
  .hero .lead{
    margin: 6px 0 10px;
    font-size: clamp(14.5px, 4.1vw, 16.5px);
    line-height: 1.55;
    text-align: center;
  }

  /* CTA-кнопки: удобные тач-зоны, сетка 2→1 */
  .hero .cta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0 6px;
  }
  @media (max-width: 480px){
    .hero .cta{ grid-template-columns: 1fr; }
  }
  .hero .cta .btn{
    width: 100%;
    min-height: 48px;                 /* комфортная зона */
    font-weight: 800;
    justify-content: center;
  }

  .hero .micro,
  .hero .note{
    margin-top: 6px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(234,243,255,.8);
  }

  /* Буллеты: компакт, без переливов, сетка 2→1 */
  .hero .bullets{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin: 10px 0 6px;
    padding: 0;
    list-style: none;
    justify-items: start;
  }
  @media (max-width: 420px){
    .hero .bullets{ grid-template-columns: 1fr; }
  }
  .hero .bullets li{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
  }
  .hero .bullets .i{
    width: 18px; height: 18px; flex: 0 0 18px;
  }

  /* Видео-карточка: чёткое 16:9, cover, без переполнений */
  .hero-video-card{
    margin-top: 6px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
      0 10px 30px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.06);
  }
  .hero .video-wrapper{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;           /* фиксируем пропорцию */
    overflow: hidden;
    transform: none !important;     /* убираем 3D-наклон на мобиле */
  }
  .hero .hero-video{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transform: none !important;     /* без 3D на мобиле */
    will-change: auto;
  }
  .hero .video-glow{ display: none; } /* экономим высоту на мобиле */

  /* Защита от горизонтального скролла внутри hero */
  .hero *, .hero img, .hero video{ max-width: 100%; }
}

/* Уважение prefers-reduced-motion: отключаем наклоны, если включено */
@media (prefers-reduced-motion: reduce){
  .hero .video-wrapper,
  .hero .hero-video{ transition: none !important; transform: none !important; }
}
/* =========================================
   TELEUNO — Mobile fixes: Screens, Terms, Bottom CTA
   ВСТАВИТЬ В САМЫЙ НИЗ styles.css
========================================= */

/* ----- A. Screens (букет): фулл-блид до краёв + безопасный слой свечения ----- */
.screens{ position: relative; isolation: isolate; } /* не даём свечению залезать на следующий блок */
.screens .under-glow{ position:absolute; inset:auto 0 -40px 0; z-index:-1; pointer-events:none; }

@media (max-width:1023.98px){
  /* убираем «невидимые границы» контейнера, даём сцене ширину экрана */
  .screens .container{ padding-left:0; padding-right:0; }
  .screens-wrap{ padding-left:16px; padding-right:16px; } /* базовые поля для заголовка/подзаголовка */

  .screens-stage{
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);   /* центрируем на всю ширину окна */
    margin-right: calc(50% - 50vw);
    overflow: visible !important;    /* критично: ничего не режем по бокам */
    padding: 0 0 6px;
  }

  /* подстраховка от чужих overflow */
  .screens, .screens-wrap{ overflow: visible !important; }
}

/* ----- B. Terms/Прайсинг: 1 колонка на мобиле + тени не перекрываются ----- */
@media (max-width:1023.98px){
  .terms-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .terms .card{ margin: 0; overflow: visible; } /* не обрезаем свечения карточек */
}

/* На всякий случай поднимаем слой terms над предыдущим свечением (если где-то задан z-index) */
.terms{ position: relative; z-index: 1; }

/* ----- C. Нижняя CTA-карточка: кнопки не слипаются, по одной в строке ----- */
@media (max-width:1023.98px){
  .cta-card .cta{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }
  .cta-card .cta .btn{
    width: 100%;
    min-height: 48px;
    justify-content: center;
  }
}
/* =========================================================
   TELEUNO — Mobile polish v2 (Screens, Compare, Terms, CTA)
   ВСТАВИТЬ В САМЫЙ НИЗ styles.css
========================================================= */

/* --- 0) Кнопка "Популярные сервисы и подписки": индикатор строго круглый --- */
.mega-cta-dot{
  display:inline-block;
  width:12px; height:12px;
  aspect-ratio:1 / 1;           /* не даём сплющиться */
  flex:0 0 12px;                 /* запрещаем растяжение во flex */
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, #7df0ff, #2a7bff);
  box-shadow:0 0 12px rgba(90,165,255,.6);
}


/* =========================================================
   B) Compare (таблица): карточная вёрстка на мобиле
      (thead скрыт, подписи колонок через ::before)
========================================================= */
@media (max-width: 1023.98px){
  #compare .container{ padding-inline:16px; }

  .cmp-wrap{ overflow: visible; }
  .cmp-table{ width:100%; border-collapse: separate; border-spacing:0; }

  .cmp-table thead{ display:none; }     /* заголовок убираем, делаем ярлыки в карточках */

  .cmp-table tbody tr{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
    padding: 2px 0 16px;
    margin: 0 0 14px;
    border:none;
  }

  /* Чип критерия */
  .cmp-table tbody th.col-crit{
    display:flex; align-items:center; gap:10px;
    padding:14px 14px;
    border-radius:14px;
    color:#fff; font-weight:800;
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
    box-shadow:0 8px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .cmp-table .crit .i{ width:20px; height:20px; flex:0 0 20px; }

  /* Карточки трёх колонок в столбик */
  .cmp-table tbody td{
    position:relative;
    padding:16px 14px 14px;
    border-radius:14px;
    background:rgba(255,255,255,.045);
    box-shadow:0 8px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
    font-size:15px; line-height:1.45;
  }

  /* Подписи над карточками вместо thead */
  .cmp-table tbody td::before{
    position:absolute; top:8px; left:14px;
    font-size:12px; line-height:1;
    letter-spacing:.2px; text-transform:uppercase;
    color:rgba(234,243,255,.75);
    font-weight:800;
    content:"";
  }
  .cmp-table tbody td:nth-child(2)::before{ content:"TELEUNO"; }
  .cmp-table tbody td:nth-child(3)::before{ content:"Классические банки"; }
  .cmp-table tbody td:nth-child(4)::before{ content:"Финтехи (Revolut/Wise/N26)"; }

  /* Акцент на Teleuno-карточке */
  .cmp-table tbody td.col-teleuno{
    background:linear-gradient(135deg, rgba(66,232,255,.16), rgba(90,139,255,.16));
    outline:1px solid rgba(255,255,255,.18);
    box-shadow:
      0 0 24px rgba(90,139,255,.35),
      0 8px 24px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.05);
  }

  /* Читаемость: без десатурации на мобиле */
  .cmp-luxe .col-banks, .cmp-luxe .col-fintech{ filter:none; }
}

/* =========================================================
   C) Terms/Тарифы: во всю ширину, без "шторы", тени не режутся
========================================================= */
.terms{ position:relative; z-index:1; }  /* сверху над любыми подсветками выше */

@media (max-width:1023.98px){
  #terms .container{ padding-inline:16px; }

  .terms-grid{
    display:grid;
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:12px;
  }

  .terms-grid > *{
    width:auto !important;
    margin:0 !important;
    overflow:visible !important; /* не обрезаем свечения */
  }

  /* Списки читаемее на узких */
  .terms .list{ margin: 0 0 0 16px; }
  .terms .card{ padding:16px 14px; border-radius:16px; }
}

/* =========================================================
   D) Нижняя CTA-карточка: кнопки не слипаются
========================================================= */
@media (max-width:1023.98px){
  .cta-card .cta{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:14px;
  }
  .cta-card .cta .btn{
    width:100%;
    min-height:48px;
    justify-content:center;
  }
}
/* =========================================================
   TELEUNO — Mobile polish v3 (final)
   ВСТАВИТЬ В САМЫЙ НИЗ styles.css
========================================================= */

/* 0) Индикатор в большой кнопке — строго круглый */
.mega-cta-dot{
  display:inline-block;
  width:12px;height:12px;aspect-ratio:1/1;flex:0 0 12px;border-radius:999px;
  background:radial-gradient(circle at 30% 30%, #7df0ff, #2a7bff);
  box-shadow:0 0 12px rgba(90,165,255,.6);
}

/* ============ A) TERMS / PRICING (во всю ширину, без артефактов) ============ */
@media (max-width:1023.98px){
  #terms .container{ padding-inline:16px; }

  .terms-grid{
    display:grid;
    grid-template-columns:1fr;      /* ОДНА колонка */
    gap:12px;
    justify-items:stretch;           /* растягиваем ребёнков по ширине */
  }

  /* убираем любые ограничения ширины/макс-ширины, тени не режем */
  .terms-grid > *{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    overflow:visible !important;
    box-sizing:border-box;
  }

  /* вычищаем декоративные псевдоэлементы, если были (полосы/бордер-свет) */
  .terms .card::before,
  .terms .card::after{ content:none !important; }

  /* ровный фон карточек без «штор» и заломов */
  .terms .card{
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
    padding:16px 14px;
  }

  /* заголовки и списки читаемее на узких */
  .terms .card h3{ margin:0 0 8px; font-size:18px; line-height:1.25; }
  .terms .list{
    margin:0 0 0 18px;
    padding:0;
    font-size:15px; line-height:1.55;
  }
  .terms .list li + li{ margin-top:6px; }
}

/* ============ B) COMPARE (карточная вёрстка + шире, ровные отступы) ============ */
@media (max-width:1023.98px){
  #compare .container{ padding-inline:16px; }

  .cmp-wrap{ overflow:visible; }
  .cmp-table{ width:100%; border-collapse:separate; border-spacing:0; table-layout:auto; }
  .cmp-table thead{ display:none; }  /* колонки подписываем в карточках */

  /* Группа (одна строка) становится вертикальным стеком */
  .cmp-table tbody tr{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin:0 0 16px;
    padding:0;
  }

  /* Чип критерия */
  .cmp-table tbody th.col-crit{
    display:flex; align-items:center; gap:10px;
    padding:14px 14px;
    border-radius:16px;
    color:#fff; font-weight:800;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .cmp-table .crit .i{ width:20px;height:20px;flex:0 0 20px; }

  /* Карточки колонок */
  .cmp-table tbody td{
    position:relative;
    padding:18px 16px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.045);
    box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
    font-size:15.5px; line-height:1.55;
    white-space:normal; word-break:break-word;
  }

  /* Подписи вместо thead */
  .cmp-table tbody td::before{
    content:"";
    position:absolute; top:8px; left:16px;
    font-size:12px; line-height:1; font-weight:800; letter-spacing:.25px;
    text-transform:uppercase; color:rgba(234,243,255,.78);
  }
  .cmp-table tbody td:nth-child(2)::before{ content:"TELEUNO"; }
  .cmp-table tbody td:nth-child(3)::before{ content:"КЛАССИЧЕСКИЕ БАНКИ"; }
  .cmp-table tbody td:nth-child(4)::before{ content:"ФИНТЕХИ (REVOLUT/WISE/N26)"; }

  /* Акцент на Teleuno */
  .cmp-table tbody td.col-teleuno{
    background:linear-gradient(135deg, rgba(66,232,255,.18), rgba(90,139,255,.18));
    outline:1px solid rgba(255,255,255,.18);
    box-shadow:
      0 0 28px rgba(90,139,255,.35),
      0 10px 24px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.05);
  }

  /* Убираем десатур на мобиле для читаемости */
  .cmp-luxe .col-banks, .cmp-luxe .col-fintech{ filter:none; }
}

/* На очень узких — чуть увеличим внутренние поля, чтобы текст не «лип» */
@media (max-width:380px){
  .cmp-table tbody td{ padding:18px 14px 14px; }
  .cmp-table tbody th.col-crit{ padding:14px; }
}

/* ============ C) Доп. защита от перекрытия свечениями разделов ============ */
.terms{ position:relative; z-index:1; }
/* =========================================================
   TELEUNO — Terms mobile hard-fix (v5 FINAL)
   Чинит: вертикальную полосу, неполную ширину плашек и кнопки
   ВСТАВИТЬ В САМЫЙ НИЗ styles.css
========================================================= */
@media (max-width:1023.98px){
  /* контейнер секции: ровно по 16px от краёв экрана */
  #terms .container{
    padding-left:16px !important;
    padding-right:16px !important;
    max-width:100% !important;
  }

  /* сетка строго в одну колонку и тянем детей на всю ширину */
  .terms-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    justify-items:stretch !important;
    align-items:start !important;
  }

  /* КАРТОЧКИ: убираем любые маски/псевдоэлементы/фоны,
     из-за которых появляется вертикальная "полоса" */
  .terms .card,
  .terms .card *{
    -webkit-mask:none !important;
    mask:none !important;
    backdrop-filter:none !important;
  }
  .terms,
  .terms::before,
  .terms::after,
  .terms .card::before,
  .terms .card::after{
    background:none !important;
    content:none !important;
    border-image:none !important;
  }

  /* Финальный вид карточек: на всю ширину, без обрезаний и штор */
  .terms .card{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    overflow:visible !important;
    box-sizing:border-box !important;

    background:rgba(255,255,255,.045) !important; /* ровный фон */
    border:none !important;
    outline:none !important;
    border-radius:16px !important;
    box-shadow:0 10px 26px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05) !important;
    padding:16px 14px !important;
  }

  /* Текст действительно во всю ширину карточки */
  .terms .card p,
  .terms .card ul,
  .terms .card .list{
    width:100% !important;
    max-width:none !important;
    margin-left:0;
    margin-right:0;
    white-space:normal !important;
    word-break:break-word !important;
    hyphens:auto !important;
    font-size:15.5px;
    line-height:1.6;
  }
  .terms .card .list{ margin-left:18px !important; }
  .terms .card h3{ margin:0 0 8px !important; font-size:18px; line-height:1.25; }

  /* Кнопка "Полные условия" — на всю ширину, не обрезается */
  #terms .t-legal a.btn,
  #terms .t-legal .btn,
  .terms .t-legal a.btn,
  .terms .t-legal .btn{
    display:flex !important;
    width:100% !important;
    min-height:48px !important;
    margin-top:12px !important;
    justify-content:center !important;
    align-items:center !important;
    white-space:normal !important;
  }
}
/* =========================================================
   TELEUNO — Compare mobile FULL-BLEED (v7 FINAL)
   Делает секцию сравнения на всю ширину, центрирует контент
   ВСТАВИТЬ В САМЫЙ НИЗ styles.css
========================================================= */
@media (max-width:1023.98px){
  /* 1) Секция без наследованных внутренних паддингов контейнера */
  #compare .container{
    padding-left:0 !important;
    padding-right:0 !important;
    max-width:unset !important;
  }

  /* 2) Обёртку растягиваем на ширину окна и центрируем трюком 50vw */
  #compare .cmp-wrap{
    position:relative;
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-left:16px;             /* внутренние поля, чтобы не липло к краю */
    padding-right:16px;
    overflow:visible !important;
  }

  /* 3) Таблица занимает всю доступную ширину обёртки */
  #compare .cmp-table{
    width:100% !important;
    margin:0 auto !important;
    border-spacing:0 !important;   /* без внешних зазоров */
    table-layout:auto !important;
  }

  /* 4) Стек карточек — симметрично, без боковых margin */
  #compare .cmp-table tbody tr{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin:0 0 18px 0 !important;
    padding:0 !important;
  }

  /* 5) Внутренние поля карточек одинаковые слева/справа */
  #compare .cmp-table tbody th.col-crit,
  #compare .cmp-table tbody td{
    padding:18px 16px 16px !important;
    margin:0 !important;
    border-radius:16px !important;
    box-sizing:border-box !important;
  }

  /* 6) На очень узких — чуть плотнее, но всё равно по центру */
  @media (max-width:380px){
    #compare .cmp-wrap{ padding-left:14px; padding-right:14px; }
    #compare .cmp-table tbody th.col-crit,
    #compare .cmp-table tbody td{ padding:16px 14px 14px !important; }
  }
}
/* ===== COMPARE — hard reset: full width, centered (mobile) ===== */
@media (max-width:1023.98px){

  /* 0) Никаких 100vw и сдвигов у секции и обёртки */
  section#compare,
  section#compare .cmp-wrap{
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* 1) Контейнер секции — ровно по 16px слева/справа (симметрия) */
  section#compare > .container{
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* 2) Таблица занимает 100% контейнера, без min-width и внешних зазоров */
  section#compare table.cmp-table{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;           /* перебиваем прежние 1100px */
    border-spacing: 0 !important;
    table-layout: auto !important;
    margin: 0 !important;
  }
  section#compare table.cmp-table > tbody{
    display: block !important;
    width: 100% !important;
  }

  /* 3) Каждая строка — вертикальный стек на всю ширину */
  section#compare table.cmp-table tr{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 4) Ячейки тянутся на 100% ширины стека */
  section#compare table.cmp-table th,
  section#compare table.cmp-table td{
    width: 100% !important;
    padding: 18px 16px 16px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  /* 5) Шапку скрываем, подписи ставим псевдоэлементами */
  section#compare table.cmp-table thead{ display:none !important; }
  section#compare table.cmp-table td::before{
    content:"" !important;
    position:absolute; top:8px; left:16px;
    font: 800 12px/1 Inter, system-ui;
    letter-spacing:.25px; text-transform:uppercase;
    color: rgba(234,243,255,.78);
  }
  section#compare table.cmp-table td:nth-child(2)::before{ content:"TELEUNO" !important; }
  section#compare table.cmp-table td:nth-child(3)::before{ content:"Классические банки" !important; }
  section#compare table.cmp-table td:nth-child(4)::before{ content:"Финтехи (Revolut/Wise/N26)" !important; }
}
/* Больше воздуха между подписью колонки (::before) и содержимым */
@media (max-width:1023.98px){
  section#compare table.cmp-table td{
    padding-top: 28px !important; /* было 18px → стало 28px */
  }
}
/* ========== Compare: больше воздуха под подписью карточки ========== */
@media (max-width:1023.98px){
  section#compare table.cmp-table td{
    padding-top: 28px !important;   /* было ~18px */
    line-height: 1.55 !important;   /* комфортнее чтение */
  }
}

/* ========== Terms: iPad mini / планшеты — не сжимать левую колонку ========== */
@media (min-width:740px) and (max-width:1024px){
  /* двухрядная раскладка, без узкой левой колонки */
  #terms .terms-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "pricing pricing"
      "limits  legal" !important;
    gap: 14px !important;
  }

  /* явно назначаем области (на случай, если HTML- порядок другой) */
  #terms .t-pricing{ grid-area: pricing !important; }
  #terms .t-limits { grid-area: limits  !important; }
  #terms .t-legal  { grid-area: legal   !important; }

  /* карточки не ограничиваем искусственно и не даём им «ломаться» */
  #terms .card{
    min-width: 0 !important;   /* разрешаем сжиматься равномерно */
    width: 100% !important;
  }
  /* текст и списки ведут себя предсказуемо и не колют строку */
  #terms .card p,
  #terms .card .list,
  #terms .card li{
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;   /* если попадётся длинное слово */
    line-height: 1.55;
  }
}
/* ===== 0) ЖЁСТКО УБИРАЕМ ГОРИЗОНТАЛЬНУЮ ПРОКРУТКУ (везде) ===== */
html, body{
  overflow-x: hidden !important;
  width: 100% !important;
  overscroll-behavior-x: none;
  touch-action: pan-y;             /* отключает горизонтальный “подсдвиг” при свайпе */
}

/* многие браузеры считают 100vw с учётом скроллбара → даём безопасную ширину */
* { max-width: 100%; }

/* ===== 1) FULL-BLEED только для ТЕЛЕФОНОВ. На планшетах — обычная ширина ===== */
/* — Секции Screens и Compare: отменяем наши full-bleed-правила на планшетах */
@media (min-width: 740px) {
  /* Screens */
  .screens .container{ padding-left: 24px !important; padding-right: 24px !important; }
  .screens-stage{
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;        /* подсветки не выходят за край */
  }

  /* Compare */
  #compare .container{ padding-left: 24px !important; padding-right: 24px !important; }
  #compare .cmp-wrap{
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }
  #compare .cmp-table{ width: 100% !important; }
}

/* На телефонах (<740px) оставляем full-bleed и убираем любые “+1px” переполнения */
@media (max-width: 739.98px){
  .screens-stage, #compare .cmp-wrap{
    width: 100dvw !important;           /* d/vw без учёта панели браузера */
    margin: 0 calc(50% - 50dvw) !important;
    padding-left: 16px; padding-right: 16px;
    overflow: visible !important;
  }
}

/* ===== 2) ШАПКА: аккуратный режим для iPad mini / Pro ===== */
/* В этой области (740–1200px) делаем компактнее меню и, при нехватке места,
   показываем бургер вместо «разъезжающихся» кнопок. */
@media (min-width: 740px) and (max-width: 1200px){
  .site-header .header-row{
    grid-template-columns: auto 1fr !important;
    gap: 12px !important;
  }
  .site-header .nav{
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;                 /* разрешаем перенос */
    min-width: 0;
  }
  /* компактнее сами кнопки в шапке */
  .site-header .nav .btn{
    --btn-h: 40px;
    --btn-pad: 14px;
    font-size: 15px;
  }
}

/* Узкие планшеты в альбомной (где меню всё равно не вмещается) — включаем бургер */
@media (min-width: 740px) and (max-width: 1024px){
  .menu-toggle{ display:flex !important; }
  .site-header .nav{ display:none !important; }          /* скрыто, пока не открыли бургер */
  .site-header .nav.is-open{ display:flex !important; }  /* панель по клику */
}

/* ===== 3) TERMS на планшетах: без “сжатия” левой карточки ===== */
@media (min-width: 740px) and (max-width: 1024px){
  #terms .terms-grid{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "pricing pricing"
      "limits  legal" !important;
    gap: 14px !important;
  }
  #terms .t-pricing{ grid-area: pricing !important; }
  #terms .t-limits { grid-area: limits  !important; }
  #terms .t-legal  { grid-area: legal   !important; }
  #terms .card{ min-width:0 !important; width:100% !important; }
}

/* ===== 4) Чуть больше воздуха под подписью карточек в Compare (мобила + планшет) ===== */
@media (max-width: 1200px){
  #compare .cmp-table td{ padding-top: 28px !important; line-height: 1.55 !important; }
}
/* =========================
   iPad Pro polish (1024–1199px)
   — десктопное меню, ровная шапка
   — первый блок: заголовок/лид/2 кнопки аккуратно
========================= */
@media screen and (min-width:1024px) and (max-width:1199.98px){

  /* --- ШАПКА: только обычное меню, без бургера --- */
  .menu-toggle{ display:none !important; }
  .site-header .nav{
    display:flex !important;
    position:static !important;
    justify-content:flex-end;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;               /* если не влезает, переносим, а не «едем» */
    min-width:0;
  }
  .site-header .header-row{
    display:grid !important;
    grid-template-columns:auto 1fr;  /* бренд | меню */
    align-items:center;
    height:72px;                     /* ровная высота */
    gap:16px;
  }
  .site-header{                      /* легкий стеклянный фон, без рывков */
    position:sticky; top:0;
    background:rgba(11,18,32,.72);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--stroke);
    transform:none !important;
  }

  /* --- HERO (первый блок) — чистый и читаемый --- */
  .hero{ padding:18px 0 10px; }
  .hero-grid{ grid-template-columns: 1fr; gap:18px; }     /* в столбик, чтобы не «жало» */
  .hero-title .h1{ font-size:32px; line-height:1.15; letter-spacing:.0; margin:2px 0 8px; }
  .hero .lead{ font-size:16px; line-height:1.55; max-width:980px; margin:6px 0 10px; }

  /* 2 кнопки: одинаковая высота, красиво становятся в ряд; если не влезли — переносятся */
  .hero-copy .cta{
    display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 6px;
  }
  .hero-copy .cta .btn{
    --btn-h: 48px; --btn-pad: 20px;
    font-size:16px;
    flex: 1 1 240px;              /* две равные кнопки в ряд; минимум ~240px каждая */
    white-space:nowrap;
    justify-content:center;
  }

  /* маркеры/иконки и микротекст под кнопками — ровнее и компактнее */
  .bullets{ grid-template-columns: 1fr 1fr; gap:8px 12px; }
  .hero .micro, .hero .note{ font-size:13px; line-height:1.5; text-align:center; }
}

/* ===== Десктоп c 1200px — классика (страховка) ===== */
@media screen and (min-width:1200px){
  .menu-toggle{ display:none !important; }
  .site-header .nav{ display:flex !important; position:static !important; transform:none !important; }
}
/* =========================
   iPad Pro header polish (1024–1199px)
   — бренд и меню по одной линии
   — пункты в один ряд, компактнее
   — кнопку "Активировать" в шапке скрываем
========================= */
@media (min-width:1024px) and (max-width:1199.98px){

  /* сетка шапки: бренд | меню */
  .site-header .header-row{
    display:grid !important;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:12px;
    height:66px;                 /* чуть ниже для компактной строки */
  }

  /* бренд строго по центру по вертикали с меню */
  .site-header .brand{
    display:flex; align-items:center; gap:8px;
    margin:0; line-height:1;
  }
  .site-header .brand img{ width:28px; height:auto; }
  .site-header .brand span{ font-size:18px; font-weight:800; line-height:1; }

  /* само меню — в одну строку, без переносов */
  .site-header .nav{
    display:flex !important;
    position:static !important;
    transform:none !important;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;            /* критично: ничего не переносим */
    min-width:0;
  }

  /* компактные ссылки меню */
  .site-header .nav a{
    font-size:14px;
    padding:6px 8px;
    line-height:1;
    white-space:nowrap;
  }

  /* кнопки в шапке: компактный размер */
  .site-header .nav a.btn{
    --btn-h: 36px; --btn-pad: 14px; --btn-r: 12px;
    font-size:14px; font-weight:700;
  }

  /* как просил: убираем кнопку "Активировать" в шапке полностью */
  .site-header .nav .btn-primary,
  .site-header .nav .btn-accent{
    display:none !important;
  }

  /* страховка: бургер на iPad Pro не показываем */
  .menu-toggle{ display:none !important; }
}
/* ========================== 
   HEADER — планшеты как десктоп
   (iPad/Surface и т.п.) 
   ========================== */
@media (min-width: 900px){

  /* выключаем мобильную панель и затемнение */
  .menu-toggle{ display: none !important; }
  body.nav-open{ overflow:auto !important; }
  body.nav-open::before{ content:none !important; }

  /* шапка на сетке: бренд | меню */
  .site-header .header-row{
    display:grid !important;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:16px;
  }
  .site-header .brand{ display:flex; align-items:center; gap:10px; }
  .site-header .brand img{ width:28px; height:auto; }
  .site-header .brand span{ font-size:18px; font-weight:800; }

  /* меню всегда строкой, без fixed/overlay */
  .site-header .nav,
  .site-header .nav.is-open{
    display:flex !important;
    position:static !important;
    inset:auto !important;
    transform:none !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
    padding:0 !important;
    height:auto !important;
    min-height:0 !important;
    background:transparent !important;
    backdrop-filter:none !important;
    border:0 !important;
    overflow:visible !important;
  }

  /* компактнее пункты, чтобы всё влезало в одну линию */
  .site-header .nav a{
    font-size:14px !important;
    padding:6px 8px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  /* кнопки в шапке компактнее; большую можно убрать */
  .site-header .nav .btn{ 
    font-size:14px !important; 
    padding:8px 12px !important; 
    height:auto !important;
  }
  /* если не влезает — прячем крупную «Активировать» на планшетах */
  .site-header .nav .btn-primary{ display:none !important; }
}

/* Мобилки (<900px) — бургер и полноэкранная панель */
@media (max-width: 899.98px){
  .menu-toggle{ display:flex !important; }
  .site-header .nav{ display:none !important; }
  .site-header .nav.is-open{
    display:flex !important;
    position:fixed !important;
    top: var(--header-h,72px) !important; left:0 !important; right:0 !important; bottom:0 !important;
    flex-direction:column !important;
    gap:12px !important;
    padding:16px !important;
    background:#0B1220 !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    z-index:999 !important;
    overflow:auto !important;
  }
}
/* ===== TABLET DESKTOP HEADER (iPad Air/mini, 820–1023px) ===== */
@media (min-width: 820px) and (max-width: 1023.98px){

  /* сетка шапки: бренд | меню */
  .site-header .header-row{
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    height: 68px; /* чуть ниже, чем на мобиле */
  }

  /* бренд ровно по базовой линии меню */
  .site-header .brand{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    white-space: nowrap;
  }
  .site-header .brand img{ width: 28px; height: auto; }
  .site-header .brand span{ font-size: 18px; font-weight: 800; letter-spacing: -.01em; }

  /* ГОРИЗОНТАЛЬНОЕ меню вместо бургера */
  .menu-toggle{ display: none !important; }                  /* скрыть бургер */
  body.nav-open::before{ content:none !important; }          /* убрать затемнение, если было */
  body.nav-open{ overflow:auto !important; }                 /* вернуть скролл */

  .site-header .nav{
    display: flex !important;
    position: static !important;
    inset: auto !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  .site-header .nav.is-open{ display:flex !important; }      /* на всякий случай */

  /* ссылки компактнее, чтобы уместились в ряд */
  .site-header .nav a{
    font-size: 14px;
    padding: 6px 8px;
    white-space: nowrap;
  }

  /* кнопку "Активировать" в шапке убираем, чтобы всё поместилось */
  .site-header .nav a.btn,
  .site-header .header-cta,
  .site-header .nav .btn-primary{
    display: none !important;
  }
}
/* ===== Темный скроллбар (ПК) + без сдвига контента ===== */

/* чтобы появление вертикального скролла не меняло ширину контейнеров */
html {
  scrollbar-gutter: stable both-edges;   /* не даёт макету «прыгать» */
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #2a3446 #0B1220;      /* thumb | track (оба тёмные) */
}

/* Blink/WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0B1220;                   /* трек той же темноты, что фон */
}
::-webkit-scrollbar-thumb {
  background: #2a3446;                   /* тёмный ползунок */
  border-radius: 8px;
  border: 2px solid #0B1220;             /* «врезан» в тёмный трек */
}
::-webkit-scrollbar-thumb:hover {
  background: #3a4a6a;
}

/* убираем горизонтальный скролл, не трогая вертикальный */
html, body {
  overflow-x: clip;                       /* безопаснее, чем hidden; без сдвига макета */
}

/* На тач-устройствах скроллбар скрыт совсем */
@media (pointer: coarse) {
  *::-webkit-scrollbar { display: none; }
  html { scrollbar-width: none; }        /* Firefox mobile */
}
/* Десктоп/планшет: всё в одну строку, вместо br — точка */
.micro-benefits .br-m::before{
  content: " · ";
  opacity: .6;
}

/* Телефоны: переносим последнюю фразу на новую строку */
@media (max-width: 640px){           /* при желании поставь 768px */
  .micro-benefits{ line-height: 1.5; }
  .micro-benefits .br-m{
    display: block;                  /* перенос */
    height: 6px;                     /* небольшой интервал между строками */
  }
  .micro-benefits .br-m::before{
    content: "";                     /* точку не показываем перед переносом */
  }
}
/* === COMPARE desktop: не обрезать свечение по бокам === */
@media (min-width: 1024px){
  /* ничего в секции compare не должно клипать тени */
  #compare,
  #compare .container,
  #compare .cmp-wrap,
  #compare .cmp-table,
  #compare .cmp-table tr,
  #compare .cmp-table th,
  #compare .cmp-table td{
    overflow: visible !important;
  }

  /* даём по 16px «воздуха» внутри обёртки, чтобы тени не упирались в края */
  #compare .cmp-wrap{
    position: relative;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* если у секции были декоративные before/after — на всякий случай выключим */
  #compare::before,
  #compare::after{
    content: none !important;
  }

  /* создаём свой стек, чтобы свечение было поверх соседних секций */
  #compare{ isolation: isolate; position: relative; z-index: 1; }
}
/* =========================
   DESKTOP HEADER — restore
   ========================= */
@media (min-width:1200px){
  /* шапка */
  .site-header .header-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    height:72px !important;
    gap:18px !important;
  }

  /* бренд слева */
  .site-header .brand{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    white-space:nowrap !important;
  }
  .site-header .brand img{ width:36px !important; height:auto !important; }
  .site-header .brand span{
    font-size:22px !important;
    font-weight:800 !important;
    letter-spacing:-.01em !important;
    line-height:1 !important;
  }

  /* меню справа — как раньше */
  .site-header .nav{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:18px !important;                 /* между пунктами */
    position:static !important;
    flex-wrap:nowrap !important;
  }
  .site-header .nav a:not(.btn){
    font-size:16px !important;
    font-weight:700 !important;
    padding-inline:2px !important;       /* чуть воздуха, но без смещения */
    line-height:1.2 !important;
    white-space:nowrap !important;
  }

  /* подчёркивание под пунктами меню — не «наезжает» на буквы */
  .site-header .nav a:not(.btn){
    position:relative;
    padding-bottom:4px !important;       /* расстояние до текста */
  }
  .site-header .nav a:not(.btn)::after{
    content:"";
    position:absolute;
    left:0; right:0;
    bottom:-2px;                         /* ниже текста */
    height:2px;                          /* толщина линии */
    border-radius:2px;
    background:linear-gradient(90deg, var(--accent1), var(--accent2));
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .28s ease;
  }
  .site-header .nav a:not(.btn):hover::after,
  .site-header .nav a:not(.btn):focus-visible::after{
    transform:scaleX(1);
  }

  /* кнопки в шапке — прежний размер/вид */
  .site-header .nav .btn{
    display:inline-flex !important;
    --btn-h:48px !important;
    --btn-pad:22px !important;
    --btn-r:16px !important;
    font-size:16px !important;
    font-weight:800 !important;
  }
  /* «Канал» оставляем ghost поменьше визуально */
  .site-header .nav a.btn-ghost{ font-weight:700 !important; }

  /* CTA обязательно виден на десктопе */
  .site-header .nav a[href*="TeleunoAppBot"]{
    display:inline-flex !important;
    visibility:visible !important;
  }

  /* на ПК бургера быть не должно */
  .menu-toggle{ display:none !important; }
}

/* ===== iPad Pro / большие планшеты (горизонт) — как десктоп ===== */
@media (min-width:1024px) and (max-width:1199.98px){
  .menu-toggle{ display:none !important; }
  .site-header .nav{
    display:flex !important;
    position:static !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:16px !important;
    flex-wrap:nowrap !important;
  }
  .site-header .nav .btn{
    --btn-h:46px !important;
    --btn-pad:20px !important;
    --btn-r:14px !important;
    font-size:15.5px !important;
  }
  .site-header .nav a:not(.btn){
    font-size:15.5px !important;
    padding-bottom:4px !important;
  }
}
/* Smart header states */
.site-header{ transition: transform .25s ease, background-color .2s ease, box-shadow .2s ease; }
.site-header.is-hidden{ transform: translateY(-100%); }
.site-header.is-compact .header-row{ height: 60px !important; } /* чуть компактнее после скролла */
.site-header.has-bg{
  background: rgba(11,18,32,.82) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}

/* уважение настроек анимаций */
@media (prefers-reduced-motion: reduce){
  .site-header{ transition: none !important; }
}

/* Телефоны — шапка всегда видима, без автоскрытия */
@media (max-width: 1023.98px){
  .site-header{ transform: none !important; }
  .site-header.is-hidden{ transform: none !important; }
}
.site-header { transition: transform .3s ease, background .3s ease, box-shadow .3s ease; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.has-bg { background: rgba(11,18,32,.82); backdrop-filter: blur(14px); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.site-header.is-compact .header-row { height: 60px; }
/* === Smart header — стили для классов, которые вешает скрипт === */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  will-change: transform;
  transition: transform .28s ease, background .28s ease, box-shadow .28s ease;
}

/* фон/blur после начала скролла */
.site-header.has-bg{
  background: rgba(11,18,32,.82) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}

/* компактная высота после 10px скролла (если нужно) */
.site-header.is-compact .header-row{
  height: 60px;
}

/* прятать шапку на десктопе при скролле вниз */
@media (min-width:1024px){
  .site-header.is-hidden{
    transform: translateY(-100%) !important;
  }
}

/* страховка: никакой клип у предков при анимации */
html, body { overflow-x: hidden; }
/* === HEADER AUTOHIDE (desktop) === */
@media (min-width:1024px){
  .site-header{ transition: transform .35s ease; will-change: transform; }
  .site-header.is-hidden{ transform: translateY(-100%); }       /* ← уводим шапку вверх */
  body.nav-open .site-header{ transform: translateY(0) !important; } /* если открыт бургер — всегда видна */
}
/* === HEADER AUTOHIDE (desktop) === */
@media (min-width:1024px){
  .site-header{ transition: transform .35s ease; will-change: transform; }
  .site-header.is-hidden{ transform: translateY(-100%); }           /* прячем вверх */
  body.nav-open .site-header{ transform: translateY(0) !important; } /* меню открыто — шапка видна */
}
/* HEADER: более прямоугольные кнопки */
.site-header .nav .btn{
  --btn-r: 8px;                 /* если где-то используется var(--btn-r) */
  border-radius: 14px !important;/* перебиваем глобальное 14–16px с !important */
}

/* если хочешь только на десктопе — так: */
@media (min-width:1024px){
  .site-header .nav .btn{
    --btn-r: 8px;
    border-radius: 11px !important;
  }
}
/* MOBILE BURGER: выровнять текст в кнопках по центру */
@media (max-width:1023.98px){
  .site-header .nav.is-open a.btn{
    display: inline-flex !important;     /* вернуть flex */
    align-items: center !important;       /* вертикальный центр */
    justify-content: center !important;   /* горизонтальный центр */

    /* убрать лишний внутренний padding, заданный для обычных ссылок */
    padding: 0 var(--btn-pad, 18px) !important;

    /* гарантируем одинаковую высоту кнопки */
    height: var(--btn-h, 48px) !important;
    line-height: 1 !important;            /* без «подпрыгивания» текста */
    width: 100%;                           /* по макету кнопки во всю ширину */
    border-radius: 8px;                    /* можешь поставить своё значение */
  }

  /* а вот обычные пункты меню остаются блоками с отступами */
  .site-header .nav.is-open a:not(.btn){
    display: block;
    padding: 12px 8px;
  }
}
/* Burger open: страница не скроллится, меню скроллится само */
@media (max-width:1023.98px){
  body.nav-open{
    overscroll-behavior: none;         /* глушим «протаскивание» */
    touch-action: none;                /* исключаем жесты на фоне */
  }
  .site-header .nav.is-open{
    overflow: auto;                    /* если пунктов много — только панель скроллится */
    -webkit-overflow-scrolling: touch; /* плавный инерционный скролл */
  }
}
:root{ --header-h:58px; }

/* шапка + safe-area, как в примере */
.site-header{position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,rgba(8,16,32,.85),rgba(8,16,32,.55));
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header .container{
  padding-left:max(20px,env(safe-area-inset-left));
  padding-right:max(20px,env(safe-area-inset-right));
}
@media (max-width:920px){
  .site-header .container{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }
}

/* кнопка Меню с иконкой */
.nav-toggle{
  display:none; appearance:none;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#e9f3ff; border-radius:10px;
  padding:8px 10px; gap:8px; align-items:center;
}
.nav-toggle svg{width:18px;height:18px;}
@media (max-width:920px){ .nav-toggle{ display:inline-flex } }

/* панель навигации на мобиле */
.nav-panel{ display:flex; }
@media (max-width:920px){
  .nav-panel{
    position:fixed; inset:var(--header-h) 0 auto 0;
    background:rgba(10,16,30,.98);
    border-bottom:1px solid rgba(255,255,255,.08);
    display:none; flex-direction:column; gap:14px; padding:12px 16px; z-index:19;
  }
  .nav-panel.is-open{ display:flex; animation:slide .18s ease-out }
  @keyframes slide{from{transform:translateY(-6px);opacity:.7} to{transform:none;opacity:1}}
  /* ссылки без «пилюлек» */
  .nav-panel a{ padding:10px 0; background:transparent; border:0; border-radius:0; }
}

/* чтобы не было «пустого фона» ниже контента */
html,body{min-height:100%;height:auto}
body{display:flex;flex-direction:column}
main{flex:1 0 auto}
@media (max-width:920px){ .nav-panel{ position:fixed } } /* фикс-панель не растягивает страницу */
/* === FINAL FIX: мобильное меню поверх шапки и без конфликтов === */
.site-header { z-index: 1000 !important; }           /* шапка */
@media (max-width: 920px){
  .nav-toggle{ display:inline-flex !important; }     /* показываем кнопку */
  /* по умолчанию панель скрыта */
  .nav-panel{
    position: fixed !important;
    inset: var(--header-h, 58px) 0 auto 0 !important;
    display: none !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    background: rgba(10,16,30,.98) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    z-index: 1001 !important;                        /* ВАЖНО: выше шапки */
    overflow: auto !important;
  }
  /* открытое состояние */
  .nav-panel.is-open{ display: flex !important; }
  /* на всякий случай глушим старые схемы .menu-toggle/body.nav-open */
  .menu-toggle{ display:none !important; }
  body.nav-open,
  body.nav-open::before{ all:unset !important; }
}