/* ===========================
   Home / Landing page styles
   (works with the HTML I sent)
   =========================== */

/* Utility to add extra vertical space on large screens */
@media (min-width: 992px){
  .py-lg-6 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
}

/* ---- HERO ---- */
section .lead{
  max-width: 48ch;
}

.ratio video,
.ratio img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  border: 0;
  outline: 0;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none; /* purely decorative */
}

/* ---- FEATURE TILES (add class="feature-card" to each tile if you want extra polish) ---- */
.feature-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border-radius: 16px;
}
.feature-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.12);
}

/* ---- “How it works” steps ---- */
.badge.bg-primary{
  background-color: var(--brand) !important;
}
section .rounded-4.bg-white.p-4.shadow-sm{
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
section .rounded-4.bg-white.p-4.shadow-sm:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* ==== Screens: compact, centered, smooth fade (adaptive) ==== */
#screens {
  --screens-max-w: 980px;
  --screens-radius: 16px;
  --screens-shadow: 0 10px 28px rgba(0,0,0,.12);

  /* базовое соотношение твоих скринов (1618×768 ≈ 2.11:1) */
  --screens-ar: 2.11 / 1;
}

/* контейнер */
#screens .carousel{
  max-width: var(--screens-max-w);
  margin-inline: auto;
  border-radius: var(--screens-radius);
  overflow: clip;
  box-shadow: var(--screens-shadow);
  border: 1px solid rgba(0,0,0,.06);
}

/* окно: по умолчанию — 2.11:1, без тёмных полос */
#screens .carousel-inner{
  aspect-ratio: var(--screens-ar);
  max-height: clamp(220px, 42vh, 520px);
  background: transparent; /* не красим фон, чтобы не было «полос» */
}

/* скелетон (если используешь) подстраиваем так же */
#screensSkeleton{
  aspect-ratio: var(--screens-ar);
  background: transparent;
}

/* изображения */
#screens .carousel-item,
#screens .carousel-item img{
  width: 100%;
  height: 100%;
}
#screens .carousel-item img{
  object-fit: contain;   /* базово — без обрезки */
  display: block;
  background-color: transparent;
  border-radius: inherit;
}

/* плавный fade */
#screensCarousel.carousel-fade .carousel-item{
  transition: opacity .6s ease-in-out;
}

/* стрелки */
#screens .carousel-control-prev,
#screens .carousel-control-next{
  width: 12%;
  opacity: 0;
  transition: opacity .2s ease;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
#screens .carousel:hover .carousel-control-prev,
#screens .carousel:hover .carousel-control-next{ opacity: .95; }
#screens .carousel-control-prev-icon,
#screens .carousel-control-next-icon{ width: 2.25rem; height: 2.25rem; }

/* индикаторы прячем */
#screens .carousel-indicators{ display: none !important; }

/* ====== Адаптация под разные соотношения экрана ====== */
/* На 16:9 и широких десктопах — заполняем окно (без полос по бокам) */
@media (min-width: 1200px) and (min-aspect-ratio: 16/9) {
  #screens { --screens-ar: 16 / 9; }
  #screens .carousel-item img{ object-fit: cover; }
}

/* На ультрашироких (≈21:9 и шире) слегка расширяем окно */
@media (min-width: 1400px) and (min-aspect-ratio: 21/9) {
  #screens { --screens-ar: 21 / 9; }
  #screens .carousel-item img{ object-fit: cover; }
}

/* ====== Адаптивность по ширине ====== */
@media (max-width: 992px){
  #screens{ --screens-max-w: 820px; }
}
@media (max-width: 576px){
  #screens{ --screens-max-w: 100%; }
  #screens .carousel-inner{ max-height: 48vh; }
  #screens .carousel-control-prev,
  #screens .carousel-control-next{ width: 18%; }
}

/* ---- SOCIAL PROOF LIST ---- */
section ul.list-unstyled img.rounded-circle{
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  border: 2px solid #fff;
}

/* ===== Leaderboard (Social Proof, right col) ===== */
.leaderboard-card{
  --lb-border: 1px solid rgba(0,0,0,.06);
  --lb-row-bg: linear-gradient(180deg,#ffffff 0%, #f8faff 100%);
  --lb-hover-shadow: 0 10px 24px rgba(0,0,0,.10);
  border: var(--lb-border);
  box-shadow: var(--shadow);
}

.leaderboard-card .table{
  margin-bottom: 0;
}
.leaderboard-card .table thead th{
  font-weight: 800;
  letter-spacing: .15px;
  color: var(--muted);
  border-top: 0;
  border-bottom: var(--lb-border);
  background: #fff;
}
.leaderboard-card .table tbody td{
  padding: .65rem .75rem;
  border-color: rgba(0,0,0,.06);
  vertical-align: middle;
}

/* топ-3 — деликатный акцент слева */
.leaderboard-card tbody tr:nth-child(1){ border-left: 4px solid #f59e0b; /* gold */ }
.leaderboard-card tbody tr:nth-child(2){ border-left: 4px solid #9ca3af; /* silver */ }
.leaderboard-card tbody tr:nth-child(3){ border-left: 4px solid #b45309; /* bronze */ }

/* hover-эффект строки */
.leaderboard-card tbody tr:hover{
  background: var(--lb-row-bg);
}

/* аватарчики — с мягким колечком */
.leaderboard-card img.rounded-circle{
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  border: 2px solid #fff;
}

.fade-in {
  opacity: 0;
  transition: opacity .4s ease-in-out;
}
.fade-in[src] {
  opacity: 1;
}

/* бейджи streak/Champion — чуть аккуратнее */
.leaderboard-card .badge.bg-light{
  background: #f3f4f6 !important;
  color: var(--text);
  border: 1px solid rgba(0,0,0,.06);
}

/* последний столбец (Score) — выделим жирнее */
.leaderboard-card tbody td:last-child{
  font-weight: 900;
  color: var(--text);
}

/* компактность на xs: уменьшим горизонтальные отступы */
@media (max-width: 576px){
  .leaderboard-card .table tbody td{ padding: .55rem .6rem; }
}

/* если таблица длинная: можно сделать «вьюпорт» со залипающей шапкой */
.leaderboard-card .table-wrap{
  max-height: 420px;       /* при желании включи эту обёртку вокруг <table> */
  overflow: auto;
}
.leaderboard-card .table thead th.sticky{
  position: sticky; top: 0; z-index: 1; background: #fff;
  border-bottom: var(--lb-border);
}

.btn-outline-view {
  background-color:#0000CD;
  border:1px solid #F0F8FF;
  color:#f5f5f5;
}

.btn-outline-view:hover {
  transform: translateY(-1px);
  background:#C1205A;
  border-color:#C1205A;
  color:#fff;
}
/* уважение к reduced motion */
@media (prefers-reduced-motion: reduce){
  .leaderboard-card, .leaderboard-card *{ transition: none !important; }
}

/* ===== PRICING (Free vs Plus) ===== */
#pricing .rounded-4.bg-white.shadow-sm.border{
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
  background: #fff;
}
#pricing .rounded-4.bg-white.shadow-sm.border:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
  border-color: rgba(0,0,0,.12);
}

/* Визуальный акцент на Plus (вторая колонка) */
#pricing .row > .col-md-6:last-child .rounded-4.bg-white.shadow-sm.border{
  border-color: rgba(0,0,205,.25);               /* #0000CD, мягкая окантовка */
  box-shadow: 0 12px 36px rgba(0,0,205,.14);     /* лёгкое синеватое свечение */
}
#pricing .row > .col-md-6:last-child .rounded-4.bg-white.shadow-sm.border:hover{
  box-shadow: 0 16px 44px rgba(0,0,205,.18);
}

/* “Most popular” бэйдж-лента */
#pricing .badge.position-absolute{
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  padding: .4rem .6rem;
  border-radius: 999px;
}

/* Заголовки/цены */
#pricing .display-6{
  line-height: 1.05;
}
#pricing .small.text-muted{
  color: #6b7280 !important; /* читаемее */
}

/* Список преимуществ */
#pricing ul.list-unstyled{
  margin: 0;
  padding: 0;
}
#pricing ul.list-unstyled li{
  line-height: 1.5;
}
#pricing ul.list-unstyled .bi{
  font-size: 1.1rem;
  color: var(--brand, #0000CD);
  line-height: 1;
  margin-top: .15rem;
}
#pricing ul.list-unstyled .text-muted .bi{
  color: #9ca3af; /* выключенные фичи */
}

/* Кнопки */
#pricing .btn{
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease; font-weight: 600;
}
#pricing .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
#pricing .btn-primary{
  background-color: var(--brand, #0000CD);
  border-color: var(--brand, #0000CD);
}
#pricing .btn-primary:hover{
  background-color: #C1205A;   /* как у .btn-outline-view:hover */
  border-color: #C1205A;
}
#pricing .btn-outline-primary{
  border-color: var(--brand, #0000CD);
  color: var(--brand, #0000CD);
  background: #fff;
}
#pricing .btn-outline-primary:hover{
  background: var(--brand, #0000CD);
  color: #fff;
  border-color: var(--brand, #0000CD);
}

/* ================================
   PRICING — Comparison Table (NEW)
   Scope: #pricing .table.table-compare
   ================================ */

#pricing .table.table-compare{
  --brand: var(--brand, #0000CD);
  --ink:   #1f2530;
  --muted: #6b7280;
  --line:  rgba(0,0,0,.08);
  --card:  #ffffff;
  --plusTint: color-mix(in srgb, var(--brand) 6%, #ffffff);
  --plusTintSoft: color-mix(in srgb, var(--brand) 3%, #ffffff);

  margin-top: .75rem;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(0,0,0,.10);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
#pricing .table.table-compare:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 46px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.10);
}

/* Head */
#pricing .table.table-compare thead th{
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--muted);
  border-top: 0;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, #fff 0%, #f8faff 100%);
  vertical-align: middle;
  padding: 1rem 1.1rem;
  position: sticky; top: 0; z-index: 2;
  backdrop-filter: saturate(120%) blur(2px);
}

/* Sticky first column (feature name) */
#pricing .table.table-compare thead th:first-child,
#pricing .table.table-compare tbody td:first-child{
  position: sticky; left: 0; z-index: 1;
  background: #fff;
}

/* Subtle striping + hover */
#pricing .table.table-compare tbody tr:nth-child(even){
  background: linear-gradient(180deg,#ffffff 0%, #fafbff 100%);
}
#pricing .table.table-compare tbody tr:hover{
  background: linear-gradient(180deg,#ffffff 0%, #f2f6ff 100%);
}

/* Cells */
#pricing .table.table-compare tbody td{
  border-color: var(--line);
  vertical-align: middle;
  padding: .9rem 1.1rem;
  color: var(--ink);
}

/* Center Free / Plus columns */
#pricing .table.table-compare td:nth-child(2),
#pricing .table.table-compare td:nth-child(3){
  text-align: center;
}

/* Highlight Plus column (3rd) */
#pricing .table.table-compare thead th:nth-child(3){
  color: var(--ink);
  border-left: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--plusTint) 0%, #ffffff 65%);
}
#pricing .table.table-compare tbody td:nth-child(3){
  border-left: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--plusTintSoft) 0%, transparent 65%);
}

/* Row section divider (optional <tr class="row-divider">) */
#pricing .table.table-compare tr.row-divider td{
  border-bottom-width: 2px;
}

/* Feature name styling */
#pricing .table.table-compare .feature-name{
  font-weight: 800;
  color: var(--ink);
}

/* Compact badge in headers (e.g. “Most popular”) */
#pricing .table.table-compare .th-badge{
  display:inline-block;
  font-size: .72rem;
  font-weight: 800;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fbd34d;
  color: #1f2530;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* Icon chips (✓ / — / ✕ or with .bi icons) */
#pricing .table.table-compare .icon-yes,
#pricing .table.table-compare .icon-no,
#pricing .table.table-compare .icon-limit{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 38px; height: 38px; padding: 0 .5rem;
  border-radius: 12px; font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

#pricing .table.table-compare .icon-yes{
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
}
#pricing .table.table-compare .icon-no{
  color: #9ca3af;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.08);
}
#pricing .table.table-compare .icon-limit{
  color: #b45309;
  background: rgba(245,158,11,.14);
  border: 1px solid rgba(245,158,11,.28);
}

/* If you use bootstrap icons inside chips — align them nicer */
#pricing .table.table-compare .icon-yes .bi,
#pricing .table.table-compare .icon-no .bi,
#pricing .table.table-compare .icon-limit .bi{
  font-size: 1.05rem;
  line-height: 1;
}

/* Hint chips (e.g. “preview only”, “limited”) */
#pricing .table.table-compare .chip-note{
  display:inline-block;
  margin-left:.4rem;
  padding:.25rem .55rem;
  font-size:.75rem; font-weight:700;
  border-radius:999px;
  background:#f3f4f6;
  color:#374151;
  border:1px solid rgba(0,0,0,.06);
}

/* Focus ring for keyboard users */
#pricing .table.table-compare td:focus-within{
  outline: 2px solid color-mix(in srgb, var(--brand) 25%, transparent);
  outline-offset: -2px;
  background: #f5f7ff;
}

/* Table layout widths for md+ */
@media (min-width: 768px){
  #pricing .table.table-compare{ table-layout: fixed; }
  #pricing .table.table-compare thead th:first-child,
  #pricing .table.table-compare tbody td:first-child{ width: 46%; }
  #pricing .table.table-compare thead th:nth-child(2),
  #pricing .table.table-compare tbody td:nth-child(2),
  #pricing .table.table-compare thead th:nth-child(3),
  #pricing .table.table-compare tbody td:nth-child(3){ width: 27%; }
}

/* Mobile — transform rows into cards (no HTML change) */
@media (max-width: 576px){
  #pricing .table.table-compare thead{ display:none; }

  #pricing .table.table-compare,
  #pricing .table.table-compare tbody,
  #pricing .table.table-compare tr,
  #pricing .table.table-compare td{
    display:block; width:100%;
  }

  #pricing .table.table-compare tbody tr{
    background:#fff;
    margin: 12px 0;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
    overflow:hidden;
  }
  #pricing .table.table-compare tbody tr:hover{ background:#fff; }

  #pricing .table.table-compare tbody td{
    border:0;
    padding: .9rem 1rem;
  }
  #pricing .table.table-compare tbody td:first-child{
    border-bottom:1px solid rgba(0,0,0,.06);
    background: linear-gradient(180deg,#ffffff 0%, #f8faff 100%);
    font-weight:900;
  }

  /* Column labels — fallback first… */
  #pricing .table.table-compare tbody td:nth-child(2)::before{
    content:"Free";
    display:inline-block; min-width:72px; margin-right:.55rem;
    font-size:.82rem; font-weight:800; color: var(--muted);
    text-transform:uppercase; letter-spacing:.3px;
  }
  #pricing .table.table-compare tbody td:nth-child(3)::before{
    content:"Plus";
    display:inline-block; min-width:72px; margin-right:.55rem;
    font-size:.82rem; font-weight:800; color: var(--muted);
    text-transform:uppercase; letter-spacing:.3px;
  }
  /* …override with data-col if present */
  #pricing .table.table-compare tbody td:nth-child(2)[data-col]::before{ content: attr(data-col); }
  #pricing .table.table-compare tbody td:nth-child(3)[data-col]::before{ content: attr(data-col); }
}

/* Small visual tweaks for the whole pricing section */
@media (max-width: 576px){
  #pricing .p-lg-5{ padding: 1.25rem !important; }
  #pricing .badge.position-absolute{ top: 10px; right: 10px; }
  #pricing .display-6{ font-size: 2rem; }
}

/* Dark theme (auto) */
@media (prefers-color-scheme: dark){
  #pricing .table.table-compare{
    --ink: #e7e9ee;
    --muted: #a7b0bd;
    --line: rgba(255,255,255,.12);
    --card: #111318;
    --plusTint: color-mix(in srgb, var(--brand) 12%, #111318);
    --plusTintSoft: color-mix(in srgb, var(--brand) 6%, #111318);
    border-color: var(--line);
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
  }
  #pricing .table.table-compare thead th{
    background: linear-gradient(180deg,#141821 0%, #0f1218 100%);
    border-bottom-color: var(--line);
  }
  #pricing .table.table-compare tbody tr:nth-child(even){
    background: linear-gradient(180deg,#12161e 0%, #0f1218 100%);
  }
  #pricing .table.table-compare tbody tr:hover{
    background: linear-gradient(180deg,#171c26 0%, #10141c 100%);
  }
  #pricing .table.table-compare thead th:first-child,
  #pricing .table.table-compare tbody td:first-child{
    background: #12161e;
  }
  #pricing .table.table-compare .chip-note{
    background: #1a2030; color:#cfd6e5; border-color: rgba(255,255,255,.10);
  }
  #pricing .table.table-compare .icon-no{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: #9aa3b2;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #pricing .table.table-compare, #pricing .table.table-compare *{
    transition: none !important; animation: none !important;
  }
}

/* ---- PACKS ---- */
.card.rounded-4.shadow-sm{
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card.rounded-4.shadow-sm:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  border-color: rgba(0,0,0,.12);
}
.card-img-top{
  height: 220px;
  object-fit: cover;
}
@media (max-width: 576px){
  .card-img-top{ height: 180px; }
}

/* ===== FAQ — compact card style (по твоему бренду) ===== */
.faq-wrap{
  display:flex; justify-content:center; align-items:center;
  min-height:calc(100vh - 180px);
  padding:16px 0;
}
.faq-card{
  --faq-panel-h: 200px;             /* фиксируем высоту ответов, чтобы не прыгало */
  width:100%; max-width:760px; margin:0 auto;
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff 0%, #f7f8ff 100%);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:22px 24px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.faq-card:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.14); }

.faq-hero{ text-align:center; margin-bottom:12px; }
.faq-subtitle{ margin:0; color:#6c757d; }

/* Accordion look */
.accordion-item{
  background:transparent; border:1px solid rgba(0,0,0,.06);
  border-radius:12px; overflow:hidden;
}
.accordion-item + .accordion-item{ margin-top:10px; }

.accordion-button{
  padding: .9rem 1rem;
  font-weight:800; letter-spacing:.2px;
  background:#fff; color:#1F252E;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed){
  background:#fff;
  color:#1F252E;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.accordion-button:focus{
  border-color:#0000CD;
  box-shadow:0 0 0 .2rem rgba(0,0,205,.15);
}

/* фиксированная высота ответов, чтобы карточка не “гуляла” между пунктами */
.accordion-body{
  max-height: var(--faq-panel-h);
  overflow: auto;                      /* если текста больше — аккуратный скролл внутри */
  padding: 1rem;
  line-height: 1.55;
  color:#374151;
}

/* скроллбар чуть мягче (опционально) */
.accordion-body::-webkit-scrollbar{ width:8px; }
.accordion-body::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.15);
  border-radius: 8px;
}

/* Адаптив: увеличиваем панель повыше на больших экранах */
@media (min-width: 1200px){
  .faq-card{ max-width:820px; padding:24px 26px; }
  .faq-card{ --faq-panel-h: 240px; }
}
@media (min-height: 900px){
  .faq-wrap{
    min-height: auto;
    margin-bottom: 16px;
  }
}
@media (max-width: 768px){
  .faq-card{ --faq-panel-h: 180px; }
}

/* Убираем жёсткие границы от bootstrap по умолчанию */
.accordion{ --bs-accordion-border-color: transparent; }

/* ---- FINAL CTA ---- */
.section-cta,
.container .rounded-4.bg-white.shadow-sm.p-5.mx-auto{
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.section-cta:hover,
.container .rounded-4.bg-white.shadow-sm.p-5.mx-auto:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
}

/* ---- MISC ---- */
.tooltip-custom{ max-width: 240px; }
.tooltip-custom p{ margin: 0; }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}