/* site.css - компоненты контента nagad88playbdcom (каталог C1-C14, pages/components.md).
   Мобайл-фёрст; расширения через min-width 640 / 1024. Все страницы собираются только разметкой. */

/* ===================== Секции и фоны ===================== */
.ng-sec{ padding:40px 0; }
.ng-sec--white{ background:#fff; }
.ng-sec--gray{ background:var(--ng-gray); }
.ng-sec--dark{ background:var(--ng-grad-dark); color:#fff; }
.ng-sec h2{ font-size:24px; color:var(--ng-navy); margin-bottom:16px; }
.ng-sec--dark h2{ color:#fff; }
.ng-sec h3{ font-size:18px; color:var(--ng-navy); }
.ng-sec p + p, .ng-sec p + ul, .ng-sec ul + p, .ng-sec p + ol, .ng-sec ol + p,
.ng-sec p + .ng-table-wrap, .ng-sec .ng-table-wrap + p, .ng-sec p + .ng-figure-row,
.ng-sec .ng-steps + p, .ng-sec p + .ng-steps, .ng-sec p + .ng-checklist, .ng-sec .ng-checklist + p,
.ng-sec p + .ng-features, .ng-sec p + .ng-promos, .ng-sec .ng-checklist + .ng-callout,
.ng-sec p + .ng-callout, .ng-sec .ng-callout + p{ margin-top:16px; }
.ng-sec a:not(.ng-cta){ color:var(--ng-blue); text-decoration:underline; text-underline-offset:2px; font-weight:500; }
.ng-sec a:not(.ng-cta):hover{ color:var(--ng-violet); }
.ng-sec--dark a:not(.ng-cta){ color:#FFC266; }
.ng-sec strong{ font-weight:600; color:var(--ng-navy); }
.ng-sec--dark strong{ color:#fff; }
.ng-lead{ max-width:72ch; }
.ng-list{ list-style:disc; padding-left:22px; max-width:72ch; }
.ng-list li + li{ margin-top:6px; }
ol.ng-list{ list-style:decimal; }

/* ===================== C1 hero ===================== */
.ng-hero{ background:var(--ng-grad-head); color:#fff; padding:20px 0 40px; overflow:hidden; }
.ng-hero__grid{ display:grid; gap:28px; align-items:center; }
.ng-hero h1{ font-size:28px; line-height:1.25; margin-bottom:16px; }
.ng-hero p{ color:rgba(255,255,255,.95); }
.ng-hero p + p{ margin-top:14px; }
.ng-hero a:not(.ng-cta){ color:#FFC266; text-decoration:underline; text-underline-offset:2px; font-weight:500; }
.ng-hero a:not(.ng-cta):hover{ color:#fff; }
.ng-hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:22px 0 18px; }
.ng-hero__note{ font-size:13px; color:rgba(255,255,255,.88); }
.ng-hero__media{ margin:0; justify-self:center; }
/* app: тёмный градиент */
.ng-hero--app{ background:var(--ng-grad-dark); }
/* plain: серый фон, без картинки */
.ng-hero--plain{ background:var(--ng-gray); color:var(--ng-text); }
.ng-hero--plain h1{ color:var(--ng-blue); }
.ng-hero--plain p{ color:var(--ng-text); }
.ng-hero--plain a:not(.ng-cta){ color:var(--ng-blue); }
.ng-hero--plain .ng-hero__note{ color:var(--ng-muted); }

/* ===================== Рамки кадров ===================== */
.ng-phone{
  margin:0; width:100%; max-width:240px; border:9px solid #111; border-radius:30px; overflow:hidden;
  background:#111; box-shadow:0 12px 32px rgba(1,4,39,.35); position:relative;
}
.ng-phone img{ width:100%; border-radius:20px; }
.ng-browser{
  margin:0; border-radius:var(--ng-radius); overflow:hidden; background:#fff;
  box-shadow:0 10px 28px rgba(1,4,39,.25); border:1px solid var(--ng-gray-2);
}
.ng-browser::before{
  content:""; display:block; height:22px; background:#ECECF1;
  background-image:radial-gradient(circle, #FF5F57 4px, transparent 5px), radial-gradient(circle, #FEBC2E 4px, transparent 5px), radial-gradient(circle, #28C840 4px, transparent 5px);
  background-size:16px 22px; background-repeat:no-repeat; background-position:8px 0, 24px 0, 40px 0;
}
.ng-shot{ margin:0; border-radius:8px; overflow:hidden; border:1px solid var(--ng-gray-2); background:#D5D5D5; }
figcaption{ font-size:13px; color:var(--ng-muted); margin-top:8px; text-align:center; }
.ng-sec--dark figcaption, .ng-hero figcaption{ color:rgba(255,255,255,.85); }

/* ===================== C2 data-table ===================== */
.ng-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--ng-radius); box-shadow:var(--ng-shadow); background:#fff; }
.ng-table{ width:100%; border-collapse:collapse; font-size:15px; min-width:520px; }
.ng-table caption{ caption-side:top; text-align:left; font-size:13px; color:var(--ng-muted); padding:12px 16px 10px; background:#fff; }
.ng-table th, .ng-table td{ padding:12px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--ng-gray-2); }
.ng-table thead th{ background:var(--ng-grad-head); color:#fff; font-weight:600; font-size:14px; letter-spacing:.3px; white-space:nowrap; }
.ng-table tbody th{ font-weight:600; color:var(--ng-navy); }
.ng-table tbody tr:nth-child(even){ background:#F7F8FC; }
.ng-table tbody tr:last-child th, .ng-table tbody tr:last-child td{ border-bottom:0; }
/* narrow: 2-3 колонки, на телефоне без мин. ширины и без скролла */
.ng-table--narrow{ min-width:0; }
@media (max-width:480px){
  .ng-table--narrow{ font-size:14px; }
  .ng-table--narrow th, .ng-table--narrow td{ padding:10px; }
  .ng-table--narrow td{ overflow-wrap:anywhere; }
  .ng-table--narrow thead th{ white-space:normal; }
}
.ng-table td.ng-num{ white-space:nowrap; font-weight:600; color:var(--ng-navy); }
/* kv: параметр - значение */
.ng-table-wrap--kv{ max-width:720px; }
.ng-table--kv{ min-width:0; }
.ng-table--kv thead th{ background:#EEF3FF; color:var(--ng-navy); }
.ng-table--kv tbody th{ width:42%; }
/* wide: первая колонка липкая */
.ng-table--wide{ min-width:640px; }
.ng-table--wide tbody th, .ng-table--wide thead th:first-child{ position:sticky; left:0; z-index:1; }
.ng-table--wide tbody th{ background:#fff; box-shadow:1px 0 0 var(--ng-gray-2); }
.ng-table--wide tbody tr:nth-child(even) th{ background:#F7F8FC; }
.ng-table--wide thead th:first-child{ background:var(--ng-blue); }

/* ===================== C3 steps ===================== */
.ng-steps{ list-style:none; counter-reset:ngstep; display:grid; gap:16px; padding:0; }
.ng-steps > li{
  counter-increment:ngstep; position:relative; background:#fff; border:1px solid var(--ng-gray-2);
  border-radius:var(--ng-radius); padding:18px 16px 16px 64px; box-shadow:0 1px 4px rgba(1,4,39,.08);
}
.ng-steps > li::before{
  content:counter(ngstep); position:absolute; left:16px; top:16px; width:34px; height:34px; border-radius:50%;
  background:var(--ng-grad-orange); color:var(--ng-navy); font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.ng-steps figure{ margin:14px 0 0; }
.ng-shot-pair{ display:grid; gap:14px; grid-template-columns:1fr; align-items:start; }
.ng-shot-pair .ng-phone{ max-width:200px; justify-self:center; }
.ng-shot-pair figure{ margin-top:14px; }
/* gallery: кадр на шаг, карточки в сетке */
.ng-steps--gallery > li{ padding:16px; display:flex; flex-direction:column; }
.ng-steps--gallery > li::before{ position:static; margin-bottom:10px; }
.ng-steps--gallery .ng-shot{ margin-top:auto; padding-top:0; }
.ng-steps--gallery > li > p{ margin-bottom:14px; }
/* разделитель экранов формы перед шагом */
.ng-steps__break{ border-top:4px solid var(--ng-orange-2); }
.ng-steps__label{
  display:inline-block; align-self:flex-start; margin-bottom:10px;font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  color:var(--ng-blue); background:#EEF3FF; padding:2px 10px; border-radius:20px;
}
/* side: шаги слева, кадр справа */
.ng-steps-side{ display:grid; gap:24px; }
.ng-steps-side__media{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
/* compact: без кадров */
.ng-steps--compact > li{ padding:14px 16px 14px 62px; box-shadow:none; }

/* ===================== C4 text-media ===================== */
.ng-tm{ display:grid; gap:24px; align-items:center; }
.ng-tm__media{ display:flex; justify-content:center; }
.ng-tm__media .ng-phone{ max-width:260px; }

/* ===================== C5 prose ===================== */
.ng-prose{ max-width:72ch; }
.ng-split{ display:grid; gap:12px; }
.ng-split h2{ color:var(--ng-blue); }
.ng-split__body{ max-width:72ch; }

/* ===================== C6 feature-grid ===================== */
.ng-features{ display:grid; gap:14px; grid-template-columns:1fr; }
.ng-features li{
  display:flex; gap:14px; align-items:flex-start; background:#fff; border-radius:var(--ng-radius);
  padding:16px; box-shadow:0 1px 4px rgba(1,4,39,.08);
}
.ng-features svg{ width:28px; height:28px; flex:none; color:var(--ng-orange-2); }
.ng-features--dark li{ background:rgba(255,255,255,.1); box-shadow:none; color:#fff; }
.ng-features--dark svg{ color:var(--ng-orange); }

/* ===================== C7 promo-cards ===================== */
.ng-promos{ display:grid; gap:16px; grid-template-columns:1fr; }
.ng-promo{
  height:100%; background:var(--ng-gray); border-radius:var(--ng-radius); box-shadow:var(--ng-shadow);
  padding:18px; display:flex; flex-direction:column; gap:10px; overflow:hidden;
}
.ng-sec--gray .ng-promo{ background:#fff; }
.ng-promo h3{ font-size:19px; }
.ng-promo .ng-cta{ align-self:flex-start; margin-top:auto; }
.ng-promo--image{ padding:0; position:relative; gap:0; }
.ng-promo--image figure{ margin:0; }
.ng-promo--image img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.ng-promo__bar{
  background:rgba(6,12,6,.62); box-shadow:inset 5px 5px 10px rgba(0,0,139,.5); color:#fff;
  padding:10px 14px; font-weight:600;
}
.ng-promo__bar h3{ color:#fff; font-size:16px; }
.ng-promo--image p{ padding:12px 14px 14px; }

/* ===================== C8 offer ===================== */
.ng-offer{
  position:relative; background:#fff; border:2px solid var(--ng-orange); border-radius:var(--ng-radius);
  padding:28px 18px 20px; box-shadow:0 6px 22px rgba(255,119,0,.16);
}
.ng-offer__badge{
  position:absolute; top:-14px; left:18px; background:var(--ng-grad-orange); color:var(--ng-navy);
  font-size:13px; font-weight:700; letter-spacing:.5px; padding:4px 14px; border-radius:20px;
}
.ng-offer__grid{ display:grid; gap:18px; }
.ng-offer__sum{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:2px; }
.ng-offer__big{ font-size:44px; font-weight:700; line-height:1; color:var(--ng-orange-2); }
.ng-offer__sub{ font-size:16px; font-weight:600; color:var(--ng-navy); }
.ng-offer ul{ list-style:none; }
.ng-offer--blue{ border-color:var(--ng-blue); box-shadow:0 6px 22px rgba(0,71,255,.14); }
.ng-offer--blue .ng-offer__badge{ background:var(--ng-grad-btn-blue); color:#fff; }
.ng-offer--blue .ng-offer__big{ color:var(--ng-blue); }

/* ===================== C9 callout ===================== */
.ng-callout{ border-radius:var(--ng-radius); padding:16px 18px; background:#fff; border-left:5px solid var(--ng-blue); }
.ng-sec--white .ng-callout{ background:var(--ng-gray); }
.ng-callout--warning{ border-left-color:var(--ng-orange-2); display:flex; gap:14px; align-items:flex-start; }
.ng-callout__icon{
  flex:none; width:28px; height:28px; border-radius:50%; background:var(--ng-grad-orange); color:var(--ng-navy);
  font-weight:700; display:flex; align-items:center; justify-content:center; font-size:16px;
}
.ng-callout--age{ background:var(--ng-navy) !important; color:#fff; border-left:0; display:flex; gap:14px; align-items:center; }
.ng-callout--age .ng-badge18{ border-color:#fff; }
.ng-callout--age a{ color:var(--ng-foot-link) !important; }
.ng-callout--code code{ font-family:Consolas, "Courier New", monospace; font-size:14px; word-break:break-all; background:#EEF3FF; padding:2px 6px; border-radius:4px; }

/* ===================== C10 checklist ===================== */
.ng-checklist{ display:grid; gap:12px; grid-template-columns:1fr; }
.ng-checklist li{
  position:relative; padding:14px 16px 14px 50px; background:#fff; border-radius:var(--ng-radius);
  box-shadow:0 1px 4px rgba(1,4,39,.08);
}
.ng-sec--white .ng-checklist li{ background:var(--ng-gray); box-shadow:none; }
.ng-checklist li::before{
  content:""; position:absolute; left:16px; top:16px; width:22px; height:22px; border-radius:50%;
  background:var(--ng-grad-orange);
}
.ng-checklist li::after{
  content:""; position:absolute; left:23px; top:21px; width:6px; height:10px;
  border:solid var(--ng-navy); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.ng-checklist--link li.ng-checklist__go{ padding-right:44px; }
.ng-checklist--link li.ng-checklist__go > .ng-arrow{
  position:absolute; right:14px; top:50%; width:22px; height:22px; margin-top:-11px; color:var(--ng-blue);
}

/* ===================== C11 topic-cards ===================== */
.ng-topics{ display:grid; gap:16px; grid-template-columns:1fr; }
.ng-topic{
  background:#fff; border-radius:var(--ng-radius); border-top:4px solid var(--ng-blue);
  padding:20px 18px; box-shadow:0 1px 4px rgba(1,4,39,.08);
}
.ng-topic h2{ font-size:20px; margin-bottom:10px; }

/* ===================== C12 cta-band ===================== */
.ng-cta-band{ padding:28px 0; }
.ng-cta-band__inner{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.ng-cta-band p{ font-size:17px; font-weight:600; }
.ng-cta-band--orange{ background:var(--ng-grad-dark); color:#fff; }
.ng-cta-band--blue{ background:var(--ng-gray); color:var(--ng-navy); }

/* ===================== C13 faq ===================== */
.ng-faq__list{ display:grid; gap:12px; }
.ng-faq__item{ background:#fff; border-radius:var(--ng-radius); box-shadow:0 1px 4px rgba(1,4,39,.08); border:1px solid var(--ng-gray-2); }
.ng-sec--white .ng-faq__item{ background:var(--ng-gray); }
.ng-faq__item summary{
  list-style:none; cursor:pointer; padding:16px 52px 16px 18px; position:relative; border-radius:var(--ng-radius);
}
.ng-faq__item summary::-webkit-details-marker{ display:none; }
.ng-faq__item summary h3{ font-size:16px; font-weight:600; color:var(--ng-navy); line-height:1.4; }
.ng-faq__item summary::after{
  content:""; position:absolute; right:22px; top:50%; width:10px; height:10px; margin-top:-7px;
  border:solid var(--ng-blue); border-width:0 2.5px 2.5px 0; transform:rotate(45deg); transition:transform .2s;
}
.ng-faq__item[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.ng-faq__item[open] summary{ border-bottom:1px solid var(--ng-gray-2); border-radius:var(--ng-radius) var(--ng-radius) 0 0; }
.ng-faq__answer{ padding:14px 18px 18px; }

/* ===================== C14 figure-row ===================== */
.ng-figure-row{
  display:grid; grid-auto-flow:column; grid-auto-columns:80%; gap:14px; overflow-x:auto;
  scroll-snap-type:x mandatory; padding-bottom:6px;
}
.ng-figure-row figure{ margin:0; scroll-snap-align:start; }

/* ===================== >= 640 ===================== */
@media (min-width:640px){
  .ng-sec{ padding:52px 0; }
  .ng-sec h2{ font-size:28px; }
  .ng-hero h1{ font-size:34px; }
  .ng-steps--gallery{ grid-template-columns:repeat(12, 1fr); }
  .ng-steps--gallery > li{ grid-column:span 6; }
  .ng-steps--gallery > li.ng-steps__wide{ grid-column:1 / -1; }
  .ng-shot-pair{ grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); }
  .ng-features, .ng-promos, .ng-topics{ grid-template-columns:repeat(2, 1fr); }
  .ng-checklist{ grid-template-columns:repeat(2, 1fr); }
  .ng-figure-row{ grid-auto-flow:row; grid-auto-columns:auto; overflow:visible; }
  .ng-figure-row--2{ grid-template-columns:repeat(2, 1fr); }
  .ng-figure-row--3{ grid-template-columns:repeat(3, 1fr); }
  .ng-offer{ padding:32px 28px 26px; }
  .ng-offer__grid{ grid-template-columns:200px 1fr; align-items:center; }
  .ng-cta-band__inner{ flex-direction:row; align-items:center; justify-content:space-between; }
  .ng-steps--compact{ grid-template-columns:repeat(2, 1fr); }
}

/* ===================== >= 1024 ===================== */
@media (min-width:1024px){
  .ng-sec{ padding:64px 0; }
  .ng-sec h2{ font-size:32px; margin-bottom:20px; }
  .ng-hero{ padding:28px 0 56px; }
  .ng-hero h1{ font-size:40px; }
  .ng-hero__grid{ grid-template-columns:minmax(0, 1fr) 300px; gap:56px; }
  .ng-hero__grid--wide-media{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .ng-hero__media .ng-phone{ max-width:270px; }
  .ng-steps--gallery > li{ grid-column:span 3; }
  .ng-steps--gallery > li.ng-steps__third{ grid-column:span 4; }
  .ng-shot-pair{ grid-template-columns:minmax(0, 3fr) minmax(0, 1fr); gap:28px; align-items:center; }
  .ng-steps-side{ grid-template-columns:minmax(0, 1fr) minmax(0, 420px); align-items:start; }
  .ng-steps-side__media{ position:sticky; top:24px; }
  .ng-steps--compact{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
  .ng-tm{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:48px; }
  .ng-tm--left .ng-tm__media{ order:-1; }
  .ng-split{ grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:48px; }
  .ng-split h2{ margin-bottom:0; }
  .ng-features, .ng-promos, .ng-topics{ grid-template-columns:repeat(3, 1fr); }
  .ng-checklist li{ padding:16px 18px 16px 52px; }
  .ng-cta-band{ padding:32px 0; }
  .ng-faq__list{ max-width:900px; }
}

/* метки уровней VIP, стопка кадров, заголовок в тёмной врезке, маркеры списков во врезках */
.ng-tier{ display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:8px; vertical-align:middle; }
.ng-tier--bronze{ background:#CD7F32; } .ng-tier--silver{ background:#A8A8B3; } .ng-tier--gold{ background:#E6B422; }
.ng-tier--platinum{ background:#4DB6C4; } .ng-tier--diamond{ background:#3D8BFF; } .ng-tier--black{ background:#111111; box-shadow:0 0 0 1px #A8A8B3; }
.ng-tm__media--stack{ flex-direction:column; gap:16px; align-items:center; }
.ng-callout--age h2, .ng-callout--age h3{ color:#fff; }
.ng-callout ul:not([class]){ list-style:disc; padding-left:20px; }
.ng-steps-side__media figure{ flex:1 1 100%; max-width:100%; }

/* сетки карточек под число элементов: без пустых ячеек в последнем ряду */
figure.ng-promo{ margin:0; }
figcaption.ng-promo__bar{ margin:0; font-size:16px; color:#fff; text-align:left; }
.ng-promo > p{ margin:0; }
.ng-promos + p, .ng-features + p, .ng-checklist + p{ margin-top:16px; }
@media (min-width:640px){
  .ng-promos--5 > li:last-child, .ng-checklist--odd > li:last-child{ grid-column:1 / -1; }
}
@media (min-width:1024px){
  .ng-promos--2{ grid-template-columns:repeat(2, 1fr); }
  .ng-features--4{ grid-template-columns:repeat(4, 1fr); }
  .ng-promos--5{ grid-template-columns:repeat(6, 1fr); }
  .ng-promos--5 > li{ grid-column:span 2; }
  .ng-promos--5 > li:nth-child(4), .ng-promos--5 > li:nth-child(5){ grid-column:span 3; }
}
/* side half: широкий кадр рядом с шагами, колонки 50/50 */
.ng-sec .ng-steps-side + p{ margin-top:20px; }
@media (min-width:1024px){
  .ng-steps-side--half{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
}
/* кадры во всю ширину под текстом */
.ng-shots-wide{ display:grid; gap:20px; margin-top:28px; }
/* медиа шага: несколько кадров в одной карточке */
.ng-steps__media{ margin-top:auto; display:grid; gap:10px; }
.ng-steps--gallery .ng-steps__media .ng-shot{ margin:0; }
/* выравнивание карточек шагов по верху (часть шагов без кадров) */
.ng-steps--start{ align-items:start; }
@media (min-width:1024px){
  .ng-steps--two > li{ grid-column:span 6; }
  .ng-steps--two > li.ng-steps__wide{ grid-column:1 / -1; }
  .ng-steps--two .ng-steps__wide .ng-shot{ max-width:600px; }
}