:root{
  --bg: #0f1115; /* базовый тёмно-серый */
  --card:#0B1020CC;
  --stroke:#1A2240;
  --text:#EAF0FF;
  --muted:#9AA6C0;
  --accent:#5B7CFF;
  --accent2:#bd65e1;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

/* сетка сверху */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:-3;

  background:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.15) 0 1px,
      transparent 1px 70px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.15) 0 1px,
      transparent 1px 70px
    );

  opacity:.22;

  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000 0 60%, transparent 80%);
  mask-image: radial-gradient(circle at 50% 35%, #000 0 60%, transparent 80%);
}

/* весь “общий фон” + mesh снизу одним слоем */
body::after{
  content:"";
  position:fixed; inset:-30%;
  pointer-events:none;
  z-index:-4;

  background:
    radial-gradient(ellipse 65% 45% at 20% 35%, rgba(168,85,247,.10), transparent 55%),
    radial-gradient(ellipse 55% 50% at 85% 80%, rgba(34,197,94,.08), transparent 55%),
    conic-gradient(from 200deg at 60% 40%,
      rgba(168,85,247,.11),
      rgba(34,197,94,.09),
      rgba(120,80,255,.08),
      rgba(168,85,247,.11)
    );

  filter: blur(42px) saturate(.95);
  opacity:.75;
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.92}

.container{max-width:1160px; margin:0 auto; padding:0 20px}
.main{padding:64px 0 84px}

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;

  background: rgba(10,15,30,.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 30px rgba(0,0,0,.13);
}
.topbar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.06),
      transparent 40%
    );

  opacity:.6;
}
.topbar__inner{
  max-width:1160px;
  margin:0 auto;
  padding:0 20px;

  height:64px;              /* фиксированная высота */
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand__mark{
  width:28px; height:28px; border-radius:10px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--muted); font-weight:600}
.nav a.btn{color:#fff}

.hero{padding:40px 0 10px}
.hero__inner{text-align:center; max-width:920px; margin:0 auto}
h1{font-size:56px; line-height:1.02; margin:0 0 14px}
.muted{color:var(--muted)}
.hero p{font-size:18px; margin:0 auto 22px; max-width:760px}

.actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 18px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  font-weight:700;
  cursor:pointer;
}
.btn--primary{
  background:linear-gradient(135deg, var(--accent), #a465f5);
  border-color:rgba(91,124,255,.55);
}
.btn--ghost{background:rgba(255,255,255,.03)}
.btn--small{padding:10px 14px; border-radius:10px}

.card{
  background:linear-gradient(180deg, rgba(11,16,32,.78), rgba(11,16,32,.54));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:22px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.card:hover{border-color:rgba(91,124,255,.25)}
.card--center{text-align:center}

.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
  margin-top:22px;
}
.grid > .card{grid-column: span 4}
@media (max-width:980px){
  h1{font-size:40px}
  .grid > .card{grid-column: span 6}
}
@media (max-width:640px){
  h1{font-size:34px}
  .grid > .card{grid-column: span 12}
}

.pagehead{align-items:flex-end; justify-content:space-between; gap:14px; margin:10px 0 16px}
.pagehead h1{font-size:34px; margin:0}

.divider{height:1px; background:rgba(255,255,255,.08); margin:14px 0}

.footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:18px 0;
  background:rgba(7,10,18,.55);
  backdrop-filter: blur(10px);
}
.footer__inner{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ===== Главная: split-hero (не как на скринах) ===== */
.hero--split{padding:34px 0 10px}
.heroSplit{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:stretch;
}
@media (max-width: 980px){
  .heroSplit{grid-template-columns:1fr}
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  padding:8px 12px;
  border-radius:10px;
  color:var(--muted);
  font-weight:700;
}
.pill .dot{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:0 0 0 4px rgba(91,124,255,.12);
}

.h1{font-size:54px; line-height:1.02; margin:14px 0 12px}
@media (max-width: 640px){ .h1{font-size:34px} }

.gradText{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lead{font-size:18px; max-width:700px}

.heroList{
  margin-top:14px;
  display:grid; gap:10px;
}
.heroList__item{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--muted);
}

.actions--left{justify-content:flex-start}
.actions--stack{flex-direction:column}
.actions--stack .btn{width:100%}

.card--glow{
  border-color: rgba(91,124,255,.22);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  position:relative;
  overflow:hidden;
}
.card--glow::before{
  content:"";
  position:absolute; inset:-30%;
  background: radial-gradient(circle at 30% 30%, rgba(91,124,255,.22), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(47,214,255,.16), transparent 55%);
  filter: blur(18px);
  opacity:.9;
  pointer-events:none;
}
.cardTop{display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative}
.badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

.statGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  position:relative;
}
.stat{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
}
.stat__k{color:var(--muted); font-size:12px; font-weight:800}
.stat__v{font-size:16px; font-weight:900; margin-top:4px}

.grid--alt{margin-top:16px}

.brand{
  display:flex;
  align-items:center;
  gap:6px;           /* расстояние между лого и текстом */
  font-weight:800;
}

.brand__logo{
  height:50px;
  width:auto;
  display:block;

  margin-right:-12px; /* компенсирует пустое поле png */
}
.brand__name{
  font-size:18px;
  letter-spacing:.2px;
}
/* ===== index clean ===== */
.hero--clean{padding:34px 0 10px}
.heroClean{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:stretch;
}
@media (max-width: 980px){
  .heroClean{grid-template-columns:1fr}
}

.chipRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.chip{
  display:inline-flex;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-weight:800;
  font-size:13px;
}

.heroNote{
  margin-top:14px;
  font-size:13px;
  max-width:650px;
}

/* steps */
.steps{
  margin-top:14px;
  display:grid;
  gap:10px;
  position:relative;
}
.step{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
}
.step__n{
  width:26px;height:26px;
  border-radius:10px;
  display:grid;place-items:center;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
}
.step__t{line-height:1.2}
.step__t b{display:block;margin-bottom:3px}

/* mini stats row */
.miniStats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.miniStat{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.miniStat__k{color:var(--muted);font-size:12px;font-weight:900}
.miniStat__v{margin-top:4px;font-size:16px;font-weight:900}

@media (max-width: 520px){
  .miniStats{grid-template-columns:1fr}
}


.nav{
  display:flex;
  gap:14px;
  align-items:center;
}
.nav a{color:var(--muted); font-weight:700}
.nav a:hover{color:var(--text)}


.btn--tg{
  background: linear-gradient(135deg, rgba(47, 214, 255, .22), rgb(164 91 255 / 29%));
  color:#fff !important;
}
.btn--tg:hover{
  background: linear-gradient(135deg, rgba(47, 214, 255, .25), rgb(164 91 255 / 34%));
}

.tgIcon{
  width:18px;
  height:18px;
  display:inline-block;
  margin-right:8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 5.4c.2-1-.8-1.8-1.7-1.4L3.3 10.6c-1 .4-.9 1.9.1 2.1l4.7 1.5 1.8 5.6c.3.9 1.5 1.1 2 .3l2.6-3.6 4.6 3.4c.7.5 1.7.1 1.9-.8l1-14.7ZM9.2 13.7l9.6-6.1c.2-.1.4.2.2.4l-7.9 7.4-.3 3.7c0 .3-.4.4-.5.1l-1.4-4.6c-.1-.3 0-.6.3-.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 5.4c.2-1-.8-1.8-1.7-1.4L3.3 10.6c-1 .4-.9 1.9.1 2.1l4.7 1.5 1.8 5.6c.3.9 1.5 1.1 2 .3l2.6-3.6 4.6 3.4c.7.5 1.7.1 1.9-.8l1-14.7ZM9.2 13.7l9.6-6.1c.2-.1.4.2.2.4l-7.9 7.4-.3 3.7c0 .3-.4.4-.5.1l-1.4-4.6c-.1-.3 0-.6.3-.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

html, body { height: 100%; }

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main{
  flex: 1;              /* забирает всё свободное место */
  padding: 46px 0 70px; /* у тебя уже есть, можно оставить */
}

.footer{
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.footer a{
  color: var(--text);
  opacity: .9;
}
.footer a:hover{ opacity: 1; }


.features{
  margin-top:90px;
}

.features__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}

.featureCard{
  padding:22px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  backdrop-filter: blur(6px);

  transition: all .2s ease;
}

.featureCard:hover{
  border-color: rgba(91,124,255,.35);
  transform: translateY(-2px);
}

.featureIcon{
  font-size:22px;
  margin-bottom:8px;
}

.featureCard h3{
  margin:6px 0;
  font-size:16px;
}

.featureCard p{
  font-size:14px;
}

@media (max-width:900px){

  .features__grid{
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width:520px){

  .features__grid{
    grid-template-columns: 1fr;
  }

}
.badgeRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.badgePill{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
}

.badgePill--muted{
  color:var(--muted);
  font-weight:800;
}

/* по умолчанию (десктоп) */
.tgText{ display:inline; }
.tgTextShort{ display:none; }

.featureIcon{
  width:40px;
  height:40px;
  border-radius:10px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  margin-bottom:12px;
}

.iconSvg{
  width:20px;
  height:20px;
  fill: rgba(255,255,255,.88); /* монохром */
}
.card--soft{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: none;
}

.steps--soft{ gap: 10px; }

.step--soft{
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.06);
}

.featuresHead{ margin-bottom: 14px; }
.h2{ font-size: 22px; margin: 0 0 6px; }

.features__grid--soft .featureCard--soft{
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: none;
}

.badgePill::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  display:inline-block;
  margin-right:6px;
}

/* ===== trial row ===== */
.trialRow{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:14px;
}

.trialPill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}

.trialDot{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow:0 0 0 4px rgba(91,124,255,.12);
}

.trialHint{ font-size:13px; }

/* “тихая ссылка” вместо 3-й кнопки */
.linkMuted{
  color: var(--muted);
  font-weight:800;
  padding:12px 8px;
  border-radius:10px;
}
.linkMuted:hover{ color: var(--text); }

/* ===== правый блок: облегчённый список шагов ===== */
.stepList{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.stepLine{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.10);
}

.stepNum{
  width:26px;height:26px;
  display:grid; place-items:center;
  border-radius:10px;
  font-weight:900;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

/* ===== фичи: более “премиально” ===== */
.featuresHead{
  margin-bottom:16px;
}

.features__grid--soft .featureCard--soft{
  border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:none;
}

.features__grid--soft .featureCard--soft:hover{
  border-color: rgba(255,255,255,.10);
  transform: translateY(-2px);
}

.featureIcon{
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

/* hero в одну колонку */
.heroClean--single{
  grid-template-columns: 1fr !important;
}

.heroClean--single .heroClean__left{
  max-width: 820px;
  padding-top: 6px;
}

/* кнопки в несколько рядов аккуратно на узких экранах */
.actions{
  flex-wrap: wrap;
}

/* чуть больше воздуха перед фишками */
.features{
  margin-top: 110px;
}

.hero--center{
  text-align:center;
}

.heroCenter{
  max-width:820px;
  margin:0 auto;
}

.actions--center{
  justify-content:center;
}

.telegramBlock{
  margin-top:80px;
}

.telegramCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;

  padding:28px 32px;

  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
}

.telegramIcon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;

  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}

.telegramText{
  flex:1;
}

.telegramText h2{
  font-size:20px;
  margin-bottom:6px;
}

.telegramAction{
  flex-shrink:0;
}

@media (max-width:800px){

.telegramCard{
  flex-direction:column;
  text-align:center;
}

.telegramAction{
  margin-top:10px;
}

}

.heroCenter{
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.heroCenter .lead{
  max-width: 620px;
  margin: 16px auto 0;
}

.h1{
  max-width: 640px;
  margin: 0 auto;
}

/* ===== Mobile (clean) ===== */
@media (max-width: 620px){

  /* Header */
  .topbar__inner{
    height:56px;
    padding:0 14px;
  }

  .brand{ gap:8px; min-width:0; }
  .brand__name{
    font-size:16px;
    white-space:nowrap;
  }

  .btn--tgHeader{
    padding:10px 12px;
    border-radius:10px;
    min-width:0;
    white-space:nowrap;
  }

  .btn--tgHeader .tgText{ display:none; }
  .tgTextShort{ display:inline; font-weight:900; }
  .btn--tgHeader .tgIcon{ margin-right:8px; }

  /* HERO spacing (вот тут твоя проблема) */
  .hero--clean{
    padding-top:38px;      /* БОЛЬШЕ воздуха сверху */
    padding-bottom:54px;   /* и снизу тоже */
  }

  .heroCenter{
    padding:0 8px;         /* чуть воздуха по краям */
  }

  .lead{
    font-size:16px;
    line-height:1.45;
    margin-top:14px;
  }

  /* Buttons under hero: full width + отступы от краёв */
  .actions{
    margin-top:36px;       /* отступ от текста hero */
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
    margin-left:14px;
    margin-right:14px;
  }

  .actions .btn{
    width:100%;
    justify-content:center;
  }

  .heroNote{
    margin-top:18px;
    padding:0 14px;
    text-align:center;
  }

  /* Telegram block spacing */
  .telegramBlock{
    margin-top:60px;
  }

}

/* very small screens */
@media (max-width: 380px){
  .btn--tgHeader{
    padding:10px 12px;
  }
  .btn--tgHeader .tgIcon{ margin-right:8px; }
  .tgTextShort{ display:inline; }
}

@media (max-width: 620px){
  .btn--tgHeader .tgText{ display:none; }
  .btn--tgHeader .tgTextShort{ display:inline; }
}

.footer__links{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.footer__link{
  text-decoration:none;
  opacity:.9;
}
.footer__link:hover{ opacity:1; }

/* ===== Footer ===== */

.footer{
  margin-top:80px;

  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;

  min-height:24px;
  gap:20px;
}

.footer__center{
  display:flex;
  gap:18px;
}

.footer__link{
  text-decoration:none;
  font-weight:700;
  opacity:.8;
}



@media (max-width:620px){

  .footer__inner{
    flex-direction:column;
    text-align:center;
    gap:10px;
    padding:14px 0;
  }

}

/* ===== Tariffs ===== */
.planGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
   margin-top:28px; 
}

.planCard{
  position:relative;
  padding:22px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:none;
}

.planCard--accent{
  border-color: rgba(91,124,255,.28);
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(91,124,255,.20), transparent 60%),
    rgba(255,255,255,.02);
}

.planBadge{
  position:absolute;
  top:14px;
  right:14px;
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 24px rgba(90,120,255,.25);
}

.planTop{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.planName{
  font-weight:900;
  font-size:18px;
}

.planMeta{
  font-size:13px;
  font-weight:800;
}

.planPrice{
  margin-top:14px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

.planPrice__val{
  font-size:34px;
  font-weight:950;
  letter-spacing:-.5px;
}

.planDivider{
  height:1px;
  background: rgba(255,255,255,.08);
  margin:16px 0;
}

.planList{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.planList li{
  position:relative;
  padding-left:22px;
}

.planList li::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:10px;
  height:10px;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}

.planActions{
  margin-top:18px;
  display:flex;
}

.planActions .btn{
  width:100%;
  justify-content:center;
}

.planNote{
  margin-top:18px;
  font-size:13px;
}

/* responsive */
@media (max-width: 900px){
  .planGrid{ grid-template-columns: 1fr; }
  .planPrice__val{ font-size:32px; }
}

.planList li::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:14px;
  height:14px;

  background: rgba(255,255,255,.85);

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 16.2 4.9 12l1.4-1.4 2.9 2.9 8.5-8.5L19.1 6l-9.9 10.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 16.2 4.9 12l1.4-1.4 2.9 2.9 8.5-8.5L19.1 6l-9.9 10.2Z'/%3E%3C/svg%3E") center/contain no-repeat;

  opacity:.95;
}

.planList li{
  position:relative;
  padding-left:26px; /* было 22 */
}

.planTitle{
  display:flex;
  align-items:center;
  gap:12px;
}

.planIcon{
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  display:grid;
  place-items:center;
}

.planIconSvg{
  width:22px;
  height:22px;
  fill: rgba(255,255,255,.86);
}

.planCard--accent .planIcon{
  border-color: rgba(91,124,255,.25);
  background: rgba(91,124,255,.10);
}
.planCard--accent .planIconSvg{
  fill: rgba(255,255,255,.95);
}

.pagehead{
  text-align:center;
  margin-bottom:34px;
}

.pagehead h1{
  margin-bottom:8px;
}

.pagehead .muted{
  max-width:520px;
  margin:0 auto;
}

.pagehead--center{
  text-align:center;
  margin:0 auto 36px auto;
  max-width:620px;
}

.pagehead--center .muted{
  margin-top:8px;
}

.pagehead--center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  margin:0 auto 42px auto;
}

.pagehead--center p{
  max-width:460px;
  margin-top:8px;
}

.planGrid{
  margin-top:36px;
}


/* ===== Tiles (bigger / premium) ===== */
.tilesSection{ margin-top: 64px; }

.tiles{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* было 4 */
  gap:18px;                               /* больше воздуха */
  margin-top:22px;
}

.tile{
  padding:22px 22px 20px;                 /* больше воздуха внутри */
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-height:124px;                       /* чтобы не были “низкими” */

  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.tile:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
}

.tile__top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
}

.tile__icon{
  width:52px;                             /* было 42 */
  height:52px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

.tileSvg{
  width:26px;                             /* было 22 */
  height:26px;
  fill: rgba(255,255,255,.88);
}

.tile__title{
  font-weight:950;
  letter-spacing:-.25px;
  font-size:16px;
  line-height:1.15;
}

.tile__text{
  font-size:14px;
  line-height:1.5;
  opacity:.9;
}

/* responsive */
@media (max-width: 980px){
  .tiles{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px){
  .tiles{ grid-template-columns: 1fr; }
  .tile{ min-height:auto; }
}

@media (max-width:1000px){

  .tiles{
    grid-template-columns: repeat(2,1fr);
    gap:18px;
  }

}

@media (max-width:640px){

  .tiles{
    grid-template-columns: 1fr;
  }

  .tile{
    padding:22px;
  }

}

/* ===== Login (Telegram-only) ===== */
.loginCard{
  max-width:520px;
  margin:26px auto 0;
  padding:22px;
}
.loginCard__title{
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:14px;
}
.loginCard__hint{
  margin-top:12px;
  font-size:13px;
}
.tgWidget{
  display:flex;
  justify-content:center;
}

/* ===== Minimal login ===== */
.loginMinimalWrap{
  min-height: calc(100vh - 160px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 0;
}

.loginMinimalCard{
  width:100%;
  max-width: 420px;
  padding: 22px;
  border-radius: 18px;
  background: var(--card, rgba(255,255,255,.06));
  border: 1px solid var(--stroke, rgba(255,255,255,.10));
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.loginMinimalTitle{
  margin: 0 0 16px 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
}



.noScroll{ overflow:hidden; }

.tgLoginModal{
  position:fixed; inset:0;
  display:none;
  z-index:9999;
}
.tgLoginModal.is-open{ display:block; }

.tgLoginModal__overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.tgLoginModal__panel{
  position:relative;
  width: min(520px, calc(100% - 28px));
  margin: 12vh auto 0;
  border-radius: 18px;
  padding: 18px;
  background: var(--card, rgba(255,255,255,.06));
  border: 1px solid var(--stroke, rgba(255,255,255,.10));
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}

.tgLoginModal__close{
  position:absolute;
  top:10px; right:12px;
  width:34px; height:34px;
  border-radius: 10px;
  border: 1px solid var(--stroke, rgba(255,255,255,.10));
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 30px;
  cursor: pointer;
}

.tgLoginModal__body{
  padding: 18px 8px 8px;
}



/* ===== Telegram Login Modal ===== */


.tgLoginModal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.tgLoginModal.is-open{
  display: block;
}

.tgLoginModal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.tgLoginModal__panel{
  position: relative;
  width: min(520px, calc(100% - 28px));
  margin: 12vh auto 0;
  border-radius: var(--radius);
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}

.tgLoginModal__close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--text);
  font-size: 22px;
  line-height: 34px;
  cursor: pointer;
}

.tgLoginModal__body{
  padding: 20px 8px 10px;
}

.tgWidget{
  display: flex;
  justify-content: center;
}

.tgHeaderLogin iframe{
  height:36px !important;
}

.tgHiddenLogin{
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tgAvatar{
width:22px;
height:22px;
border-radius:50%;
object-fit:cover;
}

.btn--cabinet{
gap:6px;
}



.userIcon{
  display:flex;
  align-items:center;
}

.tgAvatar{ width:22px; height:22px; border-radius:50%; object-fit:cover; display:block; }
.fallbackIcon{ display:flex; align-items:center; }
.btn--cabinet:not(.noAvatar) .fallbackIcon{ display:none; }
.btn--cabinet.noAvatar .fallbackIcon{ display:flex; }

/* ===== UI helpers (cabinet/tariffs/instructions) ===== */
.pageHeadRow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pageSub{max-width:720px}

.kpiGrid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-top:14px}
.kpi{grid-column:span 4;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
@media (max-width:900px){.kpi{grid-column:span 12}}

.kpi__label{color:var(--muted);font-size:13px}
.kpi__val{font-size:18px;font-weight:900;margin-top:6px}

.keyBox{margin-top:10px;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);word-break:break-all}
.keyBox code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}

.btn.is-copied{filter:saturate(1.2);transform:translateY(-1px)}
.copyRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.badgesRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);font-size:12px;color:var(--muted)}
.badge b{color:var(--text);font-weight:900}

.statusPill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.statusDot{width:8px;height:8px;border-radius:99px;background:#8aa4ff;box-shadow:0 0 0 4px rgba(91,124,255,.14)}
.statusDot--ok{background:#2FD6FF;box-shadow:0 0 0 4px rgba(47,214,255,.14)}
.statusDot--warn{background:#FFC857;box-shadow:0 0 0 4px rgba(255,200,87,.14)}
.statusDot--bad{background:#FF5B7A;box-shadow:0 0 0 4px rgba(255,91,122,.14)}

.steps{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.step{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.stepNum{min-width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;background:rgba(91,124,255,.18);border:1px solid rgba(91,124,255,.35)}
.stepBody{line-height:1.45}
.stepTitle{font-weight:900}
.stepText{color:var(--muted);margin-top:4px}

.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabBtn{cursor:pointer;user-select:none;border-radius:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:var(--muted);font-weight:800}
.tabBtn.is-active{color:var(--text);border-color:rgba(91,124,255,.55);background:rgba(91,124,255,.14)}
.tabPanel{display:none;margin-top:14px}
.tabPanel.is-active{display:block}

.faq{display:grid;gap:10px}
.faqItem{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:16px;padding:12px}
.faqQ{font-weight:900}
.faqA{color:var(--muted);margin-top:6px;line-height:1.45}


/* ===== Air / layout tuning ===== */
:root{
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 22px;
  --space-5: 30px;
  --space-6: 44px;
}

.section{padding: var(--space-6) 0;}
.stack{display:flex; flex-direction:column; gap: var(--space-3);}
.stack--lg{gap: var(--space-5);}

.card--soft{
  position:relative;
  padding:22px;
  border-radius:10px;

  /* такие же цвета как planCard */
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:none;
}

/* оставим легкий верхний градиент как в soft */
.card--soft::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;

  background:linear-gradient(
    180deg,
    rgba(255,255,255,.12),
    transparent
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.card--padded{padding: 26px;}
.cardTitle{font-weight: 900; font-size: 16px; letter-spacing:.2px; margin:0 0 10px;}
.cardSub{color: var(--muted); line-height:1.55; margin:0;}

.grid2{display:grid; grid-template-columns: 1fr; gap: var(--space-4);}
@media(min-width:900px){ .grid2{grid-template-columns: 1.1fr .9fr; gap: var(--space-5);} }

/* ===== Tabs / instruction UI ===== */
.noticeBar{
  display:flex; align-items:center; gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(47,214,255,.14);
  background: rgba(47,214,255,.06);
  color: var(--text);
}
.noticeBar b{font-weight:900;}
.tabs{
  display:flex; gap: 8px;
  padding: 6px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  overflow:auto;
}
.tab{
  flex:0 0 auto;
  padding: 12px 16px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
}
.tab.is-active{
  background: rgba(91,124,255,.18);
  color: var(--text);
  border: 1px solid rgba(91,124,255,.35);
}

.appRow{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media(min-width:900px){
  .appRow{grid-template-columns: repeat(3, minmax(0, 1fr));}
}
.appCard{
  position:relative;
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  cursor:pointer;
}
.appCard:hover{border-color:rgba(91,124,255,.25)}
.appCard.is-active{
  border-color: rgba(91,124,255,.45);
  background: rgba(91,124,255,.08);
}
.appBadge{
  position:absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(47,214,255,.14);
  border:1px solid rgba(47,214,255,.20);
  color: var(--text);
  font-weight: 900;
}
.appIcon{
  width: 40px; height: 40px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
}
.appName{font-weight: 900; margin:0;}
.appMeta{color: var(--muted); font-size: 13px; margin:0;}

.detailCard{padding: 22px;}
.detailHead{display:flex; align-items:center; gap: 12px;}
.detailHead h2{margin:0; font-size: 20px;}
.detailHead .muted{margin:0;}
.detailActions{margin-top: 16px; display:flex; gap: 10px; flex-wrap:wrap;}
.btn--wide{min-width: 220px; justify-content:center;}
.accordion{margin-top: 14px; border-top:1px solid rgba(255,255,255,.07);}
.accItem{border-bottom:1px solid rgba(255,255,255,.07);}
.accBtn{
  width:100%;
  text-align:left;
  background: transparent;
  border:0;
  color: var(--text);
  padding: 14px 0;
  font-weight: 900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}
.accBtn span{color: var(--muted); font-weight:800;}
.accBody{display:none; padding: 0 0 16px 0; color: var(--muted); line-height:1.65;}
.accBody.is-open{display:block;}
.steps{margin: 0; padding-left: 18px;}
.steps li{margin: 8px 0;}
kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
}

/* Make pages less cramped on small screens */
@media(max-width:520px){
  .main{padding: 52px 0 74px;}
  .card{padding: 18px;}
  .pageHero{padding: 22px 0 8px;}
}

.tile__icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:10px;

  --icon: 168 85 247;

  /* прозрачный фон */
  background: transparent;

  border: 1px solid rgba(var(--icon) / .35);

  box-shadow:
    0 10px 30px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.tileSvg{
  width:22px;
  height:22px;
  fill: rgba(var(--icon) / .95);
}

/* индивидуальные цвета плиток */
.tiles .tile:nth-child(1) .tile__icon{ --icon: 168 85 247; } /* violet */
.tiles .tile:nth-child(2) .tile__icon{ --icon: 34 197 94; }  /* green */
.tiles .tile:nth-child(3) .tile__icon{ --icon: 56 189 248; } /* cyan */
.tiles .tile:nth-child(4) .tile__icon{ --icon: 251 191 36; } /* amber */
.tiles .tile:nth-child(5) .tile__icon{ --icon: 244 63 94; }  /* rose */
.tiles .tile:nth-child(6) .tile__icon{ --icon: 99 102 241; } /* indigo */

.telegramIcon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:10px;

  /* цвет Telegram */
  --icon: 56 189 248;

  background: transparent;
  border:1px solid rgba(var(--icon) / .35);

  box-shadow:
    0 10px 30px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.iconSvg{
  width:22px;
  height:22px;
  fill: rgba(var(--icon) / .95);
  filter: drop-shadow(0 4px 12px rgba(var(--icon) / .35));
}

.telegramIcon{ --icon: 56 189 248; }  /* cyan */

.planIcon .planIconSvg{
  fill: rgba(var(--icon) / .95);
}

.planIconSvg{
  width:24px;
  height:24px;
  fill: rgba(var(--icon) / .95);
  filter: drop-shadow(0 4px 12px rgba(var(--icon) / .25));
}

.planCard[data-plan="m1"]{ --icon: 139 92 246; } /* purple */
.planCard[data-plan="m3"]{ --icon: 59 130 246; } /* blue */
.planCard[data-plan="m6"]{ --icon: 251 191 36; } /* gold */


.pageHeroHead{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin: 0 auto 28px;
}

.pageHeroHead .h1{
  font-size: 38px;
  line-height: 1.1;
  margin: 0;
}

.pageHeroHead .lead{
  max-width: 60ch;
  margin: 0;
  text-align:center;
}

.footer{
  margin-top: 32px;
  padding: 10px 0 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.18));
}

.footer__inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items:center;
}

.footer__left{ display:flex; flex-direction:column; gap:4px; }

.footer__brand{
  display:flex;
  align-items:center;
  gap:8px;
}

.footer__logo{
  width:28px;
  height:28px;
  border-radius:10px;
  font-size:14px;
}

.footer__name{
  font-size:14px;
  font-weight:600;
}

.footer__copy{
  font-size:12px;
}

.footer__center{
  display:flex;
  gap:10px;
}

.footer__link{
  font-size:13px;
  padding:6px 8px;
}

.footer__right{
  justify-self:end;
  text-align:right;
  gap:4px;
}

.footer__support{
  font-size:12px;
}

.footer__tg{
  padding:6px 10px;
  border-radius:10px;
  font-size:13px;
}

/* ===== Modal ===== */

.docModal{
  position:fixed;
  inset:0;
  z-index:200;

  display:none;
  align-items:center;
  justify-content:center;

  padding:24px;
}

.docModal.is-open{
  display:flex;
}

/* затемнение */
.docModal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* окно */
.docModal__panel{
  position:relative;
  width:min(860px, calc(100% - 24px));
  max-height:min(80vh, 720px);

  display:flex;
  flex-direction:column;

  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);

  background: linear-gradient(
    180deg,
    rgba(18,20,26,.95),
    rgba(12,14,18,.92)
  );

  box-shadow:
    0 40px 120px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.05);

  overflow:hidden;
}

/* шапка */
.docModal__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:14px 16px;

  border-bottom:1px solid rgba(255,255,255,.06);
}

.docModal__title{
  font-weight:700;
  letter-spacing:-0.02em;
}

/* кнопка закрытия */
.docModal__close{
  width:34px;
  height:34px;

  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);

  background: rgba(255,255,255,.03);
  color:#fff;

  cursor:pointer;
}

.docModal__close:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

/* контент */
.docModal__content{
  padding:18px 20px 24px;
  overflow:auto;

  line-height:1.6;
  font-size:14px;
}

/* типографика */
.docModal__content h3{
  margin:16px 0 8px;
}

.docModal__content .small{
  font-size:12px;
  opacity:.75;
}

/* запрет скролла страницы */
body.modal-open{
  overflow:hidden;
}

/* Firefox */
.docModal__content{
  scrollbar-width: auto;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}

/* Firefox */
*{
  scrollbar-width: auto;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}

/* Chrome / Edge / Safari */
*::-webkit-scrollbar{
  width:10px;
  height:10px;
}

*::-webkit-scrollbar-track{
  background: transparent;
}

*::-webkit-scrollbar-thumb{
  background: linear-gradient(
    180deg,
    rgba(168,85,247,.45),
    rgba(34,197,94,.45)
  );
  border-radius:10px;
  border:2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(
    180deg,
    rgba(168,85,247,.65),
    rgba(34,197,94,.65)
  );
}

/* ===== Instructions (service look) ===== */

/* Шире контейнер секции (если container ограничивает) */
.pageHero{
  max-width: 1240px;     /* было уже по container, но мы расширяем именно секцию */
  margin-left: auto;
  margin-right: auto;
}

/* Шапка */
.pageHeroHead{
  text-align:center;
  margin: 0 auto 8px;
}
.pageHeroHead .lead{
  max-width: 70ch;
  margin: 10px auto 0;
}
.badgesRow{ justify-content:center; }

/* Основная сетка */
.howGrid{
  max-width: 1320px;
  margin: 0 auto;

  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 22px;

  align-items:start;
}

@media (max-width: 980px){
  .howGrid{ grid-template-columns: 1fr; }
}

/* Tabs — без рамка-в-рамке */
.tabs--pills{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.tabs--pills .tab{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.72);
  cursor:pointer;
  user-select:none;
  font-weight:700;
  font-size: 13px;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .12s ease;
}
.tabs--pills .tab:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
}
.tabs--pills .tab.is-active{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.95);
}

/* App grid — плитки без “рамка в рамке” */
.appRow{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 980px){
  .appRow{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .appRow{ grid-template-columns: 1fr; }
}

.appCard{
  padding: 16px;
  border-radius: 18px;

  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);

  transition: all .15s ease;
}

.appCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.12);
}

.appIcon{
  width:44px;
  height:44px;
  font-size:20px;
}
.appCard.is-active{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}

/* Иконка внутри карточки — БЕЗ дополнительной рамки */
.appCard .appIcon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.04);
  /* без border */
  margin-bottom: 10px;
  font-size: 18px;
}

.appName{ margin:0; font-weight:800; letter-spacing:-0.02em; font-size: 14px; }
.appMeta{ margin:4px 0 0; font-size:12px; opacity:.72; }

.appBadge{
  position:absolute;
  top:10px;
  right:10px;

  font-size:11px;
  padding:4px 8px;

  border-radius:999px;
  background: rgba(92,110,255,.18);
  border:1px solid rgba(92,110,255,.4);
}

/* Quick guide — компактная “служебная” карточка */
.quickGuide{
  margin-top: 14px;
  padding:18px 20px;

  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.015);
}
.qSteps li{
  margin:8px 0;
  line-height:1.6;
  color: rgba(255,255,255,.85);
}
.qSteps li{ margin: 6px 0; color: rgba(255,255,255,.82); }

.qKey{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.qKey__label{ font-size: 12px; margin-bottom: 8px; }
.qKey__box{
  margin-top:6px;

  border-radius:12px;
  padding:12px 14px;

  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);

  font-family:monospace;
  font-size:13px;
}
.qKey__box code{ font-size: 13px; color: rgba(255,255,255,.88); }
.qKey__actions{
  margin-top: 10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Правая панель — делаем кликабельность и убираем “что-то поверх” */
.howRight{
  position: relative;
  z-index: 1;
}

/* если где-то есть overlay-псевдоэлемент у card--soft — фикс */
.detailCard,
.detailCard *{
  pointer-events:auto;
}

.detailCard{
  position: sticky;
  top: 16px;
  z-index: 2;
}

@media (max-width: 980px){
  .detailCard{ position: static; }
}

/* Внутренняя “сервисная” подача */

.detailHead .appIcon{
  width:44px;
  height:44px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}
.detailHead__text h2{ margin:0; font-size: 18px; letter-spacing:-0.02em; }
.detailHead__text p{ margin:6px 0 0; }

/* Аккордеон — проще, меньше рамок */
.accordion{ margin-top: 12px; display:flex; flex-direction:column; gap: 10px; }

.accItem{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  overflow:hidden;
}

.accBtn{
  width:100%;
  text-align:left;
  padding: 12px 12px;
  background: transparent;
  border:0;
  color: rgba(255,255,255,.92);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-weight:800;
}
.accBtn span{ opacity:.7; }
.btn--wide{
  width:100%;
  max-width:260px;
}
.accBody{ display:none; padding: 0 12px 12px; }


.steps{
  margin: 8px 0 0 18px;
  padding: 0;
}
.steps li{ margin: 6px 0; line-height: 1.55; color: rgba(255,255,255,.82); }
.appCard.is-active{
  border-color: rgba(100,120,255,.6);
  background: rgba(100,120,255,.08);
}

/* ===== Instructions (one-column like screenshots) ===== */

.pageHero--instructions{
  max-width: 1180px; /* шире, но не “во всю вселенную” */
  margin-left:auto;
  margin-right:auto;
}

.noticeBar--os{
  margin: 16px auto 0;
  max-width: 980px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(34,197,94,.22);
  background: linear-gradient(180deg, rgba(34,197,94,.10), rgba(0,0,0,0));
  display:flex;
  align-items:center;
  gap: 10px;
}
.noticeBar--os .noticeIco{
  width: 28px;
  height: 28px;
  display:grid;
  place-items:center;
  border-radius: 10px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.22);
}

/* segmented tabs */
.segTabs{
  margin: 16px auto 0;
  max-width: 980px;

  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;

  border-radius: 18px;
  padding: 6px;

  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  box-shadow: 0 16px 60px rgba(0,0,0,.25);
}

.segTab{
  appearance:none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.70);

  padding: 14px 10px;
  border-radius: 14px;
  font-weight: 800;
  cursor:pointer;

  transition: background .12s ease, color .12s ease, transform .12s ease;
}

.segTab:hover{
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
}

.segTab.is-active{
  background: rgba(92,110,255,.85);
  color: #fff;
}

/* apps grid */
.appsGrid{
  margin: 14px auto 0;
  max-width: 980px;

  display:flex;
  gap: 14px;
  flex-wrap:wrap;
}

.appCard{
  position:relative;
  width: 140px;
  min-height: 140px;

  padding: 14px 14px 12px;
  border-radius: 18px;

  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);

  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.appCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}

.appCard.is-active{
  border-color: rgba(92,110,255,.55);
  box-shadow: 0 22px 80px rgba(0,0,0,.35);
}

.appIcon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;

  background: rgba(255,255,255,.04);
  /* без “рамки в рамке” */
  font-size: 20px;
  margin-bottom: 10px;
}

.appName{
  margin:0;
  font-weight: 900;
  letter-spacing:-0.02em;
}
.appMeta{
  margin:6px 0 0;
  font-size: 12px;
  opacity:.7;
}

.appBadge{
  position:absolute;
  top: 10px;
  left: 10px;

  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;

  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.35);
  color: rgba(220,255,235,.95);
}

/* quick guide */
.quickGuide{
  max-width: 980px;
  margin: 14px auto 0;
}

.guideList{
  margin: 12px 0 0 18px;
  padding: 0;
  line-height: 1.65;
}
.guideList li{
  margin: 10px 0;
  color: rgba(255,255,255,.82);
}

.guideKey{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.guideKey__label{ font-size: 12px; margin-bottom: 8px; }

.guideKey__box{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 12px 14px;
  overflow:auto;
}
.guideKey__box code{ font-size: 13px; color: rgba(255,255,255,.88); }

.guideKey__actions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

/* detail card */
.detailCard{
  max-width: 980px;
  margin: 14px auto 0;
}

.detailTop{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.detailIcon{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.04);
  font-size: 22px;
}

.detailName{
  font-weight: 900;
  font-size: 22px;
  letter-spacing:-0.02em;
}

.detailMeta{ margin-top: 2px; }
.detailDesc{ margin-top: 10px; line-height: 1.6; }

.detailBtns{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.btn--wide{ min-width: 260px; }
.btn--wide2{ min-width: 200px; }

/* accordion with single toggle like screenshot */
.accWrap{
  margin-top: 12px;
}

.accToggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.9);
  cursor:pointer;
  font-weight: 800;
}

.accChevron{ opacity:.8; }



/* keep your existing accItem/accBtn/accBody styles, but make them “flatter” */


.accBtn{
  width:100%;
  text-align:left;
  padding: 12px 12px;
  background: transparent;
  border:0;
  color: rgba(255,255,255,.92);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-weight: 900;
}





.steps li{ margin: 8px 0; line-height: 1.6; color: rgba(255,255,255,.82); }

/* responsive */
@media (max-width: 720px){
  .segTabs{ grid-template-columns: 1fr; }
  .segTab{ text-align:center; }
  .appsGrid{ justify-content:center; }
  .appCard{ width: 46%; min-width: 160px; }
  .btn--wide, .btn--wide2{ min-width: 100%; }
}
/* ===== Login (clean, tariffs-like) ===== */
.loginHero{ padding-top: 28px; }
.loginHero .pageHeroHead{ margin-bottom: 18px; }

.loginWrap{ max-width: 1060px; margin: 0 auto; }

.loginCard2{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px){
  .loginCard2{ grid-template-columns: 1fr; }
}

.loginTitle{
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 16px;
  margin: 0;
}

.loginText{ margin: 8px 0 0; line-height: 1.6; }

.loginBtns{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.loginBtns .btn--wide{ flex: 1 1 260px; }

.loginNext{
  margin-top: 14px;
  font-size: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  word-break: break-word;
}

/* why list — НЕ через grid, чтобы текст не "ломало" по словам */
.whyList2{
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.whyItem{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.whyNum{
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 10px;
  background: rgba(91,124,255,.18);
  border: 1px solid rgba(91,124,255,.30);
  color: rgba(255,255,255,.92);
  margin-top: 2px;
}

.whyBody{ min-width: 0; }

.whyHead{
  font-weight: 950;
  margin-bottom: 4px;
}

.loginRight .muted{ line-height: 1.55; }

/* ===== Fix: clicks not working (overlay blocking) ===== */

/* 1) все декоративные фоны/оверлеи не должны ловить мышь */
body::before,
body::after,
.mainBg,
.bg,
.bgGrid,
.gridBg,
.heroBg,
.heroGlow,
.noise,
.noiseLayer,
.overlay,
.backdrop,
.canvasBg {
  pointer-events: none !important;
}

/* 2) если у контейнера/героя есть псевдоэлементы-фон — тоже */
.container::before,
.container::after,
.pageHero::before,
.pageHero::after,
.card::before,
.card::after {
  pointer-events: none !important;
}

/* 3) контент гарантированно выше фона */
main, header, footer, .container, .pageHero, .card, .topbar {
  position: relative;
  z-index: 5;
}

/* compact platform tabs */
.segTabs{
  display:flex;
  gap:6px;
  padding:4px;
  width:max-content;
  background:var(--card);
  border-radius:10px;
}

.segTab{
  padding:4px 10px;
  font-size:13px;
  border-radius:8px;
  line-height:1.2;
}

/* compact cards */
.card--compact{
  padding:12px;
}

.card--compact .cardTitle{
  font-size:14px;
  margin-bottom:6px;
}

.card--compact .cardSub{
  font-size:12px;
  margin:0;
}

/* compact app buttons */
.appRow{
  display:flex;
  gap:8px;
}

.appCard{
  padding:8px;
  border-radius:10px;
}

.appName{
  font-size:13px;
  margin:4px 0 0;
}

.appMeta{
  font-size:11px;
}

/* compact steps */
.steps{
  font-size:13px;
  line-height:1.4;
  margin:6px 0 0 16px;
}

/* ===== Ultra-compact settings UI for instructions.php ===== */

.segTabs--mini{
  width:max-content;
  padding:4px;
  gap:6px;
  border-radius:10px;
}
.segTab--mini{
  padding:4px 10px;
  font-size:13px;
  border-radius:8px;
  line-height:1.2;
}

/* Settings list */
.settings{
  display:grid;
  gap:12px;
}

.setGroup{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:14px;
  overflow:hidden;
}

.setGroupTitle{
  padding:10px 12px;
  font-weight:700;
  font-size:13px;
  color:var(--muted);
  background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--stroke);
}

.setRow{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
}
.setRow + .setRow{ border-top:1px solid var(--stroke); }

.setLeft{ min-width:0; }
.setTitle{ font-weight:700; font-size:14px; line-height:1.2; }
.setSub{ font-size:12px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.setRight{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.chev{ font-size:18px; opacity:.55; transform: translateY(-1px); }

.pill{
  font-size:11px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--stroke);
  color:var(--muted);
}

.setRow.is-active{
  background:rgba(255,255,255,.03);
}
.setRow.is-active .pill{
  color:var(--text);
}

/* Compact instruction box */
.setBox{
  padding:10px 12px 12px;
}

.miniSteps{
  margin:0 0 6px 16px;
  padding:0;
  font-size:13px;
  line-height:1.45;
}
.miniSteps li{ margin:4px 0; }

.miniHint{
  font-size:12px;
  line-height:1.35;
  margin-top:6px;
}

.miniActions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.btn--sm{
  padding:8px 10px;
  font-size:13px;
  border-radius:10px;
}

/* ===== Instructions: polished micro-design ===== */

/* мягкая подсветка блока страницы */
.pageHero--instructions{
  position:relative;
}
.pageHero--instructions::before{
  content:"";
  position:absolute;
  inset:-40px -20px auto -20px;
  height:220px;
  pointer-events:none;
  background:
    radial-gradient(500px 160px at 20% 0%, rgba(140, 90, 255, .18), transparent 70%),
    radial-gradient(420px 140px at 80% 20%, rgba(80, 180, 255, .12), transparent 70%);
  filter: blur(0px);
  opacity:.9;
}

/* tabs: более “system-like” */
.segTabs--mini{
  backdrop-filter:saturate(1.1) blur(8px);
  background: color-mix(in oklab, var(--card) 80%, transparent);
  border:1px solid var(--stroke);
}
.segTab--mini{
  transition: transform .12s ease, background-color .12s ease, opacity .12s ease;
  opacity:.88;
}
.segTab--mini:hover{
  opacity:1;
}
.segTab--mini.is-active{
  opacity:1;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

/* группы: чуть глубины */
.setGroup{
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

/* заголовок группы */
.setGroupTitle{
  letter-spacing:.2px;
}

/* строки меню: hover, focus, активный маркер */
.setRow{
  transition: background-color .12s ease, transform .12s ease;
  outline:none;
}
.setRow:hover{
  background: rgba(255,255,255,.03);
}
.setRow:active{
  transform: translateY(1px);
}
.setRow:focus-visible{
  box-shadow: 0 0 0 3px rgba(140, 90, 255, .25);
}

.setRow.is-active{
  background:
    linear-gradient(90deg, rgba(140, 90, 255, .14), rgba(255,255,255,.02));
}

/* слева тонкая “полоска выбора” */
.setRow.is-active::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background: rgba(140, 90, 255, .9);
  border-radius: 0 6px 6px 0;
}
.setRow{
  position:relative;
}

/* pill: чуть приятнее */
.pill{
  background: rgba(255,255,255,.03);
}
.setRow.is-active .pill{
  border-color: rgba(140, 90, 255, .5);
  background: rgba(140, 90, 255, .12);
}

/* блок шагов: визуально “карточка внутри карточки” */
.setBox{
  border-top:1px solid var(--stroke);
  background: rgba(0,0,0,.06);
}
.miniSteps li b{
  font-weight:800;
}

/* кнопки: немного кликабельности */
.btn--sm{
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn--sm:hover{
  transform: translateY(-1px);
}
.btn--sm:active{
  transform: translateY(1px);
}
.btn--primary.btn--sm{
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

/* на мобиле: чуть плотнее */
@media (max-width: 520px){
  .segTab--mini{ padding:4px 8px; font-size:12px; }
  .setRow{ padding:10px 10px; }
  .setSub{ max-width: 220px; }
}

/* ===== Instructions tweaks: white titles + TOP highlight + OS auto feel ===== */

.setTitle{
  color: var(--text);
  font-weight: 800;
}

.pill--top{
  border-color: rgba(140, 90, 255, .65);
  background: rgba(140, 90, 255, .18);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(140, 90, 255, .12), 0 10px 18px rgba(140, 90, 255, .14);
  font-weight: 800;
  letter-spacing: .2px;
}

/* чуть явнее “выбор” приложения */
.setRow.is-active .setTitle{
  text-shadow: 0 0 18px rgba(140, 90, 255, .22);
}

/* ===== Pretty numbered steps (1-2-3-4) ===== */

.sList{ display:grid; gap:10px; }

.sStep{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.sNum{
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:900;
  color: var(--text);
  border:1px solid rgba(140, 90, 255, .55);
  background: rgba(140, 90, 255, .14);
  box-shadow: 0 8px 18px rgba(140, 90, 255, .10);
  flex:0 0 auto;
  margin-top:1px;
}

.sTitle{
  font-weight:800;
  font-size:13px;
  line-height:1.25;
  color: var(--text);
}

.sDesc{
  font-size:12px;
  line-height:1.35;
  margin-top:2px;
}

/* Android TV block */
.tvBlock{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--stroke);
}

.tvHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.tvTitle{
  font-weight:900;
  color: var(--text);
  font-size:13px;
}

.tvSub{
  font-size:12px;
}

.tvShots{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:10px;
}

.tvShot{
  border:1px dashed var(--stroke);
  border-radius:12px;
  overflow:hidden;
  background: rgba(255,255,255,.02);
}

.tvShotPh{
  height:82px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:12px;
  color: var(--muted);
  background: rgba(0,0,0,.08);
}

.tvShotCap{
  padding:8px 10px;
  font-size:12px;
  line-height:1.25;
}

@media (max-width: 520px){
  .tvShots{ grid-template-columns: 1fr; }
}

.pageHero--instructions::before{ display:none !important; content:none !important; }

/* ===== Instructions: narrower + compact subscription block + tariff-like colors ===== */


/* Сделать все блоки уже (как тарифы/ЛК), не во всю ширину container */
.pageHero--instructions .segTabs--mini,
.pageHero--instructions .settings{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Чуть меньше боковые поля у секции, чтобы выглядело плотнее */
.pageHero--instructions{
  padding-left: 0;
  padding-right: 0;
}

/* Группы как planCard (цвета/бордер/blur без “жирных” теней) */
.pageHero--instructions .setGroup{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}

/* Заголовки групп компактнее по высоте */
.pageHero--instructions .setGroupTitle{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: transparent;
}

/* Внутренности групп компактнее */
.pageHero--instructions .setBox{
  padding: 10px 12px 12px;
  border-top: 0;
  background: transparent;
}

/* Блок подписки — ниже по высоте */
.pageHero--instructions .keyBox{
  margin-top: 6px;
  padding: 8px 10px;              /* было 12 */
  border-radius: 10px;             /* было 16 */
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);     /* как “soft” внутри */
}

.pageHero--instructions .keyBox code{
  font-size: 12px;                 /* ниже */
  line-height: 1.35;
}

/* Кнопки под ключом — плотнее */
.pageHero--instructions .copyRow{
  margin-top: 8px !important;
  gap: 8px;
}

/* Кнопки smaller уже есть, но чуть ужмём именно тут */
.pageHero--instructions .btn--small,
.pageHero--instructions .btn--sm{
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
}

/* Табы платформы — уже и ниже */
.pageHero--instructions .segTabs--mini{
  padding: 4px;
  border-radius: 12px;
}
.pageHero--instructions .segTab--mini{
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 10px;
}

/* Меньше воздуха между группами */
.pageHero--instructions .settings{
  gap: 10px;
}

/* TOP — чуть ярче, как “badge” в тарифах */
.pageHero--instructions .pill--top{
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 24px rgba(90,120,255,.22);
  font-weight: 900;
}

/* Мобилка: ещё уже */
@media (max-width: 520px){
  .pageHero--instructions .segTabs--mini,
  .pageHero--instructions .settings{
    max-width: 94vw;
  }
  .pageHero--instructions .setSub{
    max-width: 220px;
  }
}

/* =========================
   Mobile-only improvements
   (desktop is untouched)
   ========================= */
@media (max-width: 720px){
  .container{padding:0 14px}

  .topbar__inner{
    height:auto;
    padding:10px 14px;
    gap:10px;
    flex-wrap:wrap;
  }

  /* Бренд */
  .brand{
    gap:8px;
    align-items:center;
  }

  .brand__logo{
    width:60px;
    height:60px;
  }

  .brand__name{
    display:inline;
    font-size:16px;
    white-space:nowrap;
  }

  /* Навигация */
  .nav{
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }

  .nav a{white-space:nowrap}
  .nav::-webkit-scrollbar{height:0}

  /* Типографика */
  .h1{
    font-size:34px;
    line-height:1.08;
    margin:10px 0 10px;
  }

  .h2{font-size:24px}
  .lead{font-size:16px}

  /* Hero */
  .hero{padding:28px 0 8px}
  .heroCenter{max-width:100%}

  .actions{
    flex-direction:column;
    align-items:stretch;
  }

  .actions .btn{
    width:100%;
    justify-content:center;
  }

  .btn{min-height:44px}
  .btn--small,
  .btn--sm{min-height:40px}

  /* Home */
  .telegramCard{padding:16px}
  .heroSplit{grid-template-columns:1fr; gap:14px}
  .heroClean{grid-template-columns:1fr; gap:14px}
  .tiles{grid-template-columns:1fr; gap:12px}

  /* Tariffs */
  .planGrid{grid-template-columns:1fr; gap:12px}
  .planCard{padding:16px}
  .planPrice{font-size:34px}

  /* Instructions */
  .segTabs{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    max-width:100%;
  }

  .segTabs::-webkit-scrollbar{height:0}

  .segTab{
    flex:0 0 auto;
    padding:12px 12px;
    white-space:nowrap;
  }

  .appsGrid{max-width:100%}
  .appCard{width:100%}

  .keyActions{
    flex-direction:column;
    align-items:stretch;
  }

  .keyActions .btn{
    width:100%;
    justify-content:center;
  }

  .copyRow{
    flex-direction:column;
    align-items:stretch;
  }

  .copyRow > *{width:100%}

  /* Login */
  .loginWrap{
    grid-template-columns:1fr;
    gap:14px;
  }

  .loginCard2{padding:16px}

  .tgWidget{
    width:100%;
    max-width:420px;
  }

  /* Cabinet */
  .grid{
    grid-template-columns:1fr !important;
  }

  .grid > *{
    grid-column:1 / -1 !important;
  }

  .kpiGrid{
    grid-template-columns:1fr 1fr;
  }

  .kpi{
    grid-column:auto / span 1;
  }
}

@media (max-width: 520px){

  .kpiGrid{
    grid-template-columns:1fr;
  }

  .segTab{
    padding:10px 10px;
    font-size:13px;
  }
}

/* Plans: featured middle card */
@media (min-width: 721px){
  .planGrid{
    align-items:stretch;
  }

  .planCard--featured{
    transform: translateY(-8px) scale(1.02);
    z-index: 2;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
  }

  /* чтобы при hover не было дерганий */
  .planCard{
    position: relative;
    z-index: 1;
  }
  .planCard:hover{
    z-index: 3;
  }
}

.trialAlert{
  border-radius:16px;
  padding:12px 12px;
  border:1px solid rgba(120,255,170,.22);
  background: rgba(120,255,170,.08);
}

.statsCards{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}

.statCard{
  padding:28px 20px;
  border-radius:22px;
  text-align:center;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}

.statCard--purple{
  background:linear-gradient(160deg,#2b2443,#3a2d63);
}

.statCard--blue{
  background:linear-gradient(160deg,#0f3a4a,#134c5f);
}

.statCard--cyan{
  background:linear-gradient(160deg,#0b3f46,#0f5761);
}

.statIcon{
  font-size:22px;
  opacity:.8;
  margin-bottom:10px;
}

.statValue{
  font-size:40px;
  font-weight:900;
  margin-bottom:6px;
}

.statLabel{
  font-size:14px;
  opacity:.85;
}

/* mobile */
@media (max-width:720px){

  .statsCards{
    grid-template-columns:1fr;
    max-width:420px;
  }

  .statValue{
    font-size:34px;
  }

}

/* Fix: logo squashed on mobile */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand__logo{
  flex: 0 0 auto;      /* не сжимать в flex */
  width: 40px;         /* можешь оставить 28px как было */
  height: 40px;
  object-fit: contain; /* сохраняет пропорции */
  aspect-ratio: 1 / 1; /* квадрат */
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
}


.whyBody .muted{
  font-size:15px;
  line-height:1.45;
}

.promoNote{
  display:flex;
  align-items:center;
  gap:12px;
  margin:2px 0 18px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.promoNote__icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.promoNoteSvg{
  width:20px;
  height:20px;
  display:block;
  fill:currentColor;
  opacity:.9;
}

.promoNote__text{
  font-size:15px;
  line-height:1.45;
  color:rgba(255,255,255,.88);
}

.promoNote__text strong{
  color:#fff;
  font-weight:800;
}

@media (max-width: 640px){
  .promoNote{
    gap:10px;
    padding:12px 14px;
    border-radius:16px;
  }

  .promoNote__icon{
    width:38px;
    height:38px;
    flex-basis:38px;
    border-radius:12px;
  }

  .promoNote__text{
    font-size:14px;
    line-height:1.4;
  }
}

.promoNote--compact{
  padding:12px 14px;
}