/* Тема для стартовой страницы (без стилей хедера и футера) */
:root{
  --bg:#0f1224; --panel:#151a33; --text:#e7eaff; --muted:#a7afd8;
  --primary:#7c5cff; --accent:#2ed4a7; --border:rgba(255,255,255,0.08);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}
*{box-sizing:border-box}

html,body{
  margin:0; padding:0;
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;
  min-height: 100%;
}

/* Фон страницы: картинка покрывает весь вьюпорт */
body{ background: transparent; }
html{
  background:
    linear-gradient(180deg, rgba(15,18,36,0.20) 0%, rgba(15,18,36,0.50) 60%, rgba(15,18,36,0.70) 100%),
    url("/static/img/landing/background.png") center top no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-color: var(--bg);
}

/* .page-bg не используется на лендинге */
.page-bg{ display: none !important; }

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Полупрозрачные панели */
.section-panel{
  background: rgba(15,18,36,0.68);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.section-panel + .section-panel{ margin-top: 16px; }

/* Hero */
.hero{padding:56px 0 32px;border-bottom:1px solid var(--border)}
.hero .section-panel{ padding: 24px; }
.hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:26px;align-items:center}
.eyebrow{color:var(--accent);font-weight:700;letter-spacing:.4px;margin-bottom:8px;text-transform:uppercase;font-size:12px}
h1{font-size:40px;line-height:1.15;margin:0 0 12px}
.lead{color:var(--muted);font-size:18px;margin-bottom:18px}
.hero-media{display:none !important}

/* Sections */
section{padding:56px 0;border-bottom:1px solid var(--border)}
h2{font-size:28px;margin:0 0 10px}
.subtitle{color:var(--muted);margin:0 0 24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.price{font-size:28px;font-weight:800;margin:10px 0}
.muted{color:var(--muted)}
.list{margin:0;padding-left:18px}

/* FAQ: растянуть на всю ширину панели */
.faq{
  max-width: none;
  width: 100%;
}
.faq-item{border:1px solid var(--border);border-radius:14px;margin-bottom:10px;overflow:hidden;background:var(--panel)}
.faq-q{width:100%;text-align:left;background:transparent;border:0;color:var(--text);padding:14px 16px;font-weight:600;cursor:pointer}
.faq-a{padding:0 16px 14px 16px;color:var(--muted)}

/* Карточки направлений */
.rpg-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:980px){ .rpg-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .rpg-grid{ grid-template-columns:1fr } }

.rpg-card{
  position:relative; overflow:hidden; border-radius:16px; padding:16px 16px 18px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(124,92,255,.12), rgba(46,212,167,.08) 40%, transparent 80%), var(--panel, #151a33);
  border:1px solid var(--border, rgba(255,255,255,.08));
  box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}
.rpg-card::before{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:
    radial-gradient(80% 60% at 0 0, rgba(124,92,255,.15), transparent 60%),
    radial-gradient(80% 60% at 100% 0, rgba(46,212,167,.12), transparent 60%);
}
.rpg-card::after{ content:""; position:absolute; inset:6px; border-radius:12px; pointer-events:none; border:1px solid rgba(255,255,255,.06); }

.avatar-wrap{
  display:flex; justify-content:center; align-items:center; padding:8px 0 10px;
  position: relative;
}
.avatar{
  width:140px; height:140px; border-radius:50%; object-fit:cover; background:#0f1224;
  border:2px solid rgba(255,255,255,.15);
  box-shadow: 0 0 0 6px rgba(124,92,255,.12), 0 10px 30px rgba(0,0,0,.4), 0 0 24px rgba(124,92,255,.25);
}
@media (max-width:640px){ .avatar{ width:120px; height:120px } }

.rpg-body{ text-align:center; padding-top:8px }
.rpg-body h3{ margin:0 0 6px; font-size:18px }
.rpg-body p{ margin:0; color:var(--muted, #a7afd8); font-size:14px }

/* Бейдж "В разработке" поверх аватарки */
.dev-badge{
  position: absolute;
  top: 0;
  right: 12px;
  transform: translateY(-10%);
  background: linear-gradient(90deg, rgba(255,165,0,0.95), rgba(255,120,0,0.95));
  color: #121212;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  border-radius: 9999px;
  padding: 4px 10px;
  z-index: 2;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  white-space: nowrap;
}
.dev-badge__text{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}
@media (max-width: 640px){
  .dev-badge{ right: 6px; padding: 3px 8px; }
  .dev-badge__text{ font-size: 10px; }
}

/* Hero — в одну колонку */
.hero-grid{ grid-template-columns:1fr !important; }
.hero-grid > *{ grid-column:1 / -1; }

/* Journey 2 (горизонтальный слайдер) */
.journey2 .section-panel{ padding: 20px; }

/* Навигация карусели сверху и узкие прямоугольники */
.journey-carousel .q-carousel__navigation{
  top: 10px;
  bottom: auto;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}
.journey2 .q-carousel__slides{
  padding-top: 36px;
  padding-bottom: 44px;
}
.journey-carousel .q-carousel__navigation .q-btn{
  width: 42px;
  min-width: 42px;
  height: 6px;
  padding: 0;
  margin: 0 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.18);
  border: 1px solid var(--border);
  box-shadow: none;
}
.journey-carousel .q-carousel__navigation .q-btn .q-btn__content > *{ display:none; }
.journey-carousel .q-carousel__navigation .q-btn--active{
  background: var(--accent);
  border-color: rgba(46,212,167,0.6);
  box-shadow: 0 0 10px rgba(46,212,167,0.35);
}

.journey-carousel .q-carousel__control{
  pointer-events: auto; /* КЛЮЧЕВОЕ ИЗМЕНЕНИЕ */
}

/* Кликабельны почти вся левая/правая области карусели */
.journey-carousel .q-carousel__arrow--left,
.journey-carousel .q-carousel__arrow--right{
  pointer-events: auto;      /* ВАЖНО: иначе клики игнорируются контейнером */
  top: 0;
  bottom: 0;
  height: 100%;
  width: 45%;                /* почти половина карусели слева/справа */
  display: block;
  z-index: 9;                /* поверх слайдов/изображения */
  background: transparent;
}

.journey-carousel .q-carousel__arrow--left{ left: 0; }
.journey-carousel .q-carousel__arrow--right{ right: 0; }

.journey-carousel .q-carousel__arrow--left .q-btn,
.journey-carousel .q-carousel__arrow--right .q-btn{
  position: absolute !important;  /* перекрываем позиционирование по умолчанию */
  inset: 0 !important;            /* top:0; right:0; bottom:0; left:0 */
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.journey-carousel .q-carousel__arrow--left .q-btn .q-icon,
.journey-carousel .q-carousel__arrow--right .q-btn .q-icon{
  font-size: 32px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
  opacity: .9;
}

.journey-carousel .q-carousel__navigation{
  pointer-events: none;
}

.journey-carousel .q-carousel__arrow--left:hover{
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
}
.journey-carousel .q-carousel__arrow--right:hover{
  background: linear-gradient(270deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
}

/* Картинки внутри карусели: крупные и равные по ширине */
.journey2 .img-full{
  width: min(920px, 100%);
  margin: 0 auto;
  display: block;
}
.journey2 .img-full img{
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

/* Мобильная корректировка зон стрелок и иконок */
@media (max-width: 640px){
  .journey-carousel .q-carousel__arrow--left,
  .journey-carousel .q-carousel__arrow--right{
    width: 30%;
  }
  .journey-carousel .q-carousel__arrow--left .q-btn .q-icon,
  .journey-carousel .q-carousel__arrow--right .q-btn .q-icon{
    font-size: 28px;
  }
}

/* Выравнивание кнопок в тарифах */
.pricing .card{ display:flex; flex-direction:column; }
.pricing .card .list{
  font-size:13px;
  line-height:1.45;
  margin-bottom:16px;
}
.pricing .card .cta{ margin-top:auto; }