:root{
  --bg:#0b0b0f; --bg-2:#0e0e15; --text:#f5f7fa; --muted:#a1a1aa;
  --accent:#ff6a00; --accent-2:#ffb347; --card:#14151d; --border:rgba(255,255,255,.08);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% 15%, rgba(255,106,0,.08), transparent 60%),
    radial-gradient(900px 500px at 20% 80%, rgba(255,179,71,.06), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  line-height:1.6;
}
a{color:#ffd9b3;text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:18px}
header{position:sticky;top:0;z-index:10;display:flex;gap:18px;align-items:center;
  background:rgba(10,10,16,.55);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
header .logo{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800}
header .logo img{width:28px;height:28px;border-radius:50%;box-shadow:0 0 12px rgba(255,106,0,.6)}
header nav a{margin-right:12px;color:#eaeaea}
/* === Header nav: единый размер ссылок-«чипсов» на всех экранах === */
header nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
header nav a {
  margin-right: 0; /* переопределяем старое правило */
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  font-weight:600;
  font-size:14px;
  line-height:1.1;
  color:#eaeaea;
  text-decoration:none;
}
header nav a:hover { text-decoration:none; color:#fff; }

header nav a:hover{color:#fff}
.cta{margin-left:auto;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#1b0f05;
  padding:9px 14px;border-radius:999px;text-decoration:none;font-weight:700;
  box-shadow:0 0 20px rgba(255,106,0,.35), inset 0 0 0 1px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease}
.cta:hover{transform:translateY(-1px); box-shadow:0 0 28px rgba(255,106,0,.5), inset 0 0 0 1px rgba(0,0,0,.25)}

main .hero{margin:22px 0 14px;padding:28px;border:1px solid var(--border);border-radius:16px;
  background: radial-gradient(600px 300px at 50% 0%, rgba(255,106,0,.08), transparent 60%), var(--card);
  box-shadow: 0 10px 40px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.02)}
.hero-title{display:flex;align-items:center;gap:14px;margin:0 0 10px 0}
.hero-title .badge{
  width:56px;
  height:56px;
  border-radius:12px;        /* сделай 50% если нужна круглая аватарка */
  background:
    var(--hero-badge) center / contain no-repeat,
    radial-gradient(circle at 50% 50%, var(--accent-2), var(--accent)); /* красивый фолбэк */
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  animation:none;
}
@keyframes pulse{0%,100%{box-shadow:0 0 18px rgba(255,106,0,.35)}50%{box-shadow:0 0 38px rgba(255,106,0,.65)}}
h1{font-size:30px;margin:0} .muted{color:var(--muted);font-size:13px}
.panel{margin-top:18px;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--card);animation:fi .6s ease .1s both}
.bullets{padding-left:18px} .bullets li{margin:6px 0}
.post img{max-width:100%;border-radius:10px}

/* slider */
.slider{position:relative;overflow:hidden;border-radius:16px;margin-top:16px;border:1px solid var(--border);background:#0d0d12}
.slides{display:flex;transition:transform .6s ease-in-out;will-change:transform}
.slide{min-width:100%;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#0d0d12}
.slide img{width:100%;height:100%;object-fit:cover;filter:saturate(110%)}
.slider .dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.slider .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:0 0 10px rgba(255,106,0,.5)}
.slider .dot.active{background:var(--accent)}

/* animations */
.fade-in{opacity:0;transform:translateY(8px);animation:fi .6s ease forwards}
@keyframes fi{to{opacity:1;transform:none}}
.glow{box-shadow:0 0 30px rgba(255,106,0,.35)}

/* --- Chips / якоря --- */
.chips { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 18px }
.chip { padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,0.02); font-size:13px }
.chip:hover { text-decoration:none; box-shadow:0 0 18px rgba(255,106,0,.25) }

/* --- Grid / Cards --- */
.grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.mini { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card, .subcard {
  border:1px solid var(--border); border-radius:16px; background:var(--card);
  padding:16px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover, .subcard:hover { transform:translateY(-2px); box-shadow:0 20px 50px rgba(0,0,0,.35), 0 0 24px rgba(255,106,0,.12); border-color:rgba(255,255,255,.12) }
.row { display:flex; gap:10px; flex-wrap:wrap }

/* --- Plans / VIP --- */
.plans { align-items:stretch }
.plan { border:1px solid var(--border); border-radius:16px; padding:16px; background:linear-gradient(180deg, rgba(255,106,0,.06), rgba(255,179,71,.02)) }
.pill { display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); font-size:12px; margin-bottom:10px }
.pill-hot { background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#1b0f05; border:none }

/* --- Buttons --- */
.ghost {
  display:inline-block; padding:9px 14px; border-radius:999px; text-decoration:none; font-weight:600;
  border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--text);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ghost:hover { transform:translateY(-1px); box-shadow:0 0 18px rgba(255,255,255,.08) }

/* --- Steps --- */
.steps { display:grid; gap:10px }
.step { position:relative; padding:12px 12px 12px 44px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02) }
.step .num { position:absolute; left:10px; top:10px; width:24px; height:24px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 50%, var(--accent-2), var(--accent)); color:#1b0f05; font-weight:800; box-shadow:0 0 16px rgba(255,106,0,.35) }

/* --- Accordion (modern) --- */
.accordion .item{
  border:1px solid var(--border);
  border-radius:.75rem;                 /* 12px */
  background:rgba(255,255,255,.02);
  margin-bottom:.625rem;                /* 10px */
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.accordion .item:hover{
  border-color:rgba(255,255,255,.14);
  box-shadow:0 8px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.02) inset;
}

/* Заголовок-кнопка */
.accordion .head{
  inline-size:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;                           /* 12px */
  padding:.875rem 1rem;                 /* 14px 16px */
  background:transparent;
  color:var(--text);
  border:0;
  cursor:pointer;
  font-weight:600;                      /* 650 → 600 для предсказуемости */
  letter-spacing:.0125rem;              /* ≈0.2px в rem */
  line-height:1.25;
  min-block-size:2.75rem;               /* комфортный тач-таргет */
  transition:color .2s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.accordion .item.open .head{
  color:#fff;
  background:linear-gradient(180deg, rgba(255,106,0,.08), rgba(255,179,71,.03));
}

/* Стрелка-chevron через SVG-mask (современно и чисто) */
.accordion .head::after{
  content:"";
  flex:none;
  inline-size:1.125rem;                 /* 18px */
  block-size:1.125rem;
  margin-inline-start:.5rem;            /* 8px */
  background:currentColor;
  opacity:.65;
  mask: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
      <path d="M6 9l6 6 6-6" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\
    </svg>') center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,\
    <svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'>\
      <path d=\'M6 9l6 6 6-6\' fill=\'none\' stroke=\'white\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/>\
    </svg>") center / contain no-repeat;
  transform:rotate(-90deg);             /* закрыто — стрелка вправо */
  transition:transform .25s cubic-bezier(.2,.6,.2,1), opacity .2s;
}
.accordion .head:hover::after{ opacity:1; }
.accordion .item.open .head::after{
  transform:rotate(0deg);               /* открыто — стрелка вниз */
}

/* Fallback, если mask не поддерживается */
@supports not (mask: none) {
  .accordion .head::after {
    content:"›";
    background:none;
    opacity:.9;
    transform:none;
    font-size:1.125rem;
    line-height:1;
  }
  .accordion .item.open .head::after { content:"▾"; }
}

.accordion .body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .2s ease;
  color: var(--muted);
  font-size: 15px;
  padding: 0 16px 0;  /* top 0 | left-right 16px | bottom 0 */
}

/* разрешаем анимацию даже когда стоит [hidden] */
.accordion .body[hidden]{ display:block; }

.accordion .item.open .body {
  padding: 0 16px 14px;  /* при открытии — появляется отступ снизу */
  max-height: 500px;     /* запас, чтобы текст точно влез */
}




/* Плавное появление секций при прокрутке */
.observe {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.observe.show {
  opacity: 1;
  transform: none;
}

/* --- Крупные тапы, фокусы --- */
.cta { min-height: 44px; font-size: 15px; }
.menu-btn { display: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Мобильная адаптация --- */
@media (max-width: 768px) {
  .container { padding: 14px; }
  h1 { font-size: 24px; }

  /* Хедер + бургер */
  header { flex-wrap: wrap; gap: 10px; }
  .menu-btn {
    display: inline-flex; align-items:center; justify-content:center;
    width: 42px; height: 42px; border:1px solid var(--border); border-radius: 12px;
    background: rgba(255,255,255,.04); color: var(--text);
  }
  /* Прячем меню/CTA по умолчанию и показываем при .open */
  header nav, header .cta { display: none; }
  header.open nav { display: block; width: 100%; margin-top: 8px; }
  header.open .cta { display: inline-block; width: 100%; text-align:center; margin-top: 8px; }

  /* Герой и чипсы */
  /* Герой и чипсы — ИКОНКА СЛЕВА, ТЕКСТ СПРАВА даже на мобилке */
.hero-title {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.hero-title .badge {
  width: 44px;
  height: 44px;
  flex: 0 0 44px; /* фикс ширины, чтобы текст не прыгал */
}

/* Чуть компактнее шрифты на узких экранах — опционально */
.hero-title h1 { font-size: 22px; }

  .chips { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; }
  .chips .chip { flex: 0 0 auto; }

  /* Сетки и точки слайдера */
  .grid, .grid.mini { grid-template-columns: 1fr; }
  .slider .dot { width: 7px; height: 7px; }

  /* Hero mobile: удерживаем текст справа от иконки */
  .hero-title { flex-direction: row; align-items: center; gap: 12px; flex-wrap: nowrap; }
  .hero-title .badge { width: 44px; height: 44px; flex: 0 0 44px; }
  .hero-title > :not(.badge) { min-width: 0; }
  .hero-title h1 { font-size: 22px; line-height: 1.2; word-break: break-word; }

}


/* --- Предпочтения пользователей (меньше анимаций) --- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* === Hero title global fix: текст не выпрыгивает под иконку === */
.hero-title { flex-wrap: nowrap; }
.hero-title > :not(.badge) { min-width: 0; } /* разрешаем сжиматься, чтобы текст оставался справа */