/* layout.css - каркас nagad88-official-bd.com: токены, шапка, меню, крошки,
   макет main + aside, app-card (S0), нижняя плашка, футер, кнопки. Префикс ap-. */

/* ===================== Tokens ===================== */
:root{
  --ap-bg:#f4f5f9;
  --ap-card:#ffffff;
  --ap-line:#e3e5ee;
  --ap-text:#1b1d29;
  --ap-muted:#5b6072;
  --ap-accent:#8d1cff;
  --ap-accent-hover:#7414d6;
  --ap-accent-soft:#f1e8ff;
  --ap-get:#11a86b;
  --ap-get-hover:#0c8c58;
  --ap-warn-bg:#fff6e0;
  --ap-warn:#b7791f;
  --ap-err-bg:#fdecec;
  --ap-err:#c53030;
  --ap-code-bg:#f6f7fb;
  --ap-font:system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ap-mono:ui-monospace, Consolas, monospace;
  --ap-r-card:12px;
  --ap-r-btn:8px;
  --ap-shadow:0 1px 2px rgba(27,29,41,.06), 0 4px 14px rgba(27,29,41,.06);
  --ap-header-h:60px;
  --ap-wrap:1200px;
  --ap-gutter:16px;
}

/* ===================== Reset ===================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--ap-header-h) + 12px); }
html, body{ margin:0; padding:0; }
body{
  background:var(--ap-bg); color:var(--ap-text);
  font-family:var(--ap-font); font-size:16px; line-height:1.6;
  padding-bottom:76px; /* место под нижнюю плашку на мобильном */
}
img{ max-width:100%; height:auto; display:block; }
ul, ol{ margin:0; padding:0; }
a{ color:var(--ap-accent); }
a:hover{ color:var(--ap-accent-hover); }
:focus-visible{ outline:3px solid var(--ap-accent); outline-offset:2px; border-radius:4px; }
.ap-vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ===================== Buttons ===================== */
.ap-btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; min-height:40px; padding:8px 16px; border-radius:var(--ap-r-btn);
  font-weight:700; font-size:15px; line-height:1.2; text-decoration:none; text-align:center;
  border:2px solid transparent; transition:background-color .15s, border-color .15s, color .15s;
  white-space:nowrap;
}
.ap-btn--get{ background:var(--ap-get); color:#fff; }
.ap-btn--get:hover{ background:var(--ap-get-hover); color:#fff; }
.ap-btn--line{ background:var(--ap-card); color:var(--ap-accent); border-color:var(--ap-accent); }
.ap-btn--line:hover{ background:var(--ap-accent-soft); color:var(--ap-accent-hover); }
.ap-btn--brand{ background:var(--ap-accent); color:#fff; }
.ap-btn--brand:hover{ background:var(--ap-accent-hover); color:#fff; }
.ap-btn--lg{ min-height:56px; padding:10px 22px; font-size:17px; white-space:normal; }
.ap-btn__sub{ font-size:12.5px; font-weight:500; opacity:.92; }
.ap-btn__row{ display:inline-flex; align-items:center; gap:8px; }
/* стрелка "скачать" рисуется CSS, без svg-файлов */
.ap-dl-ico{ position:relative; display:inline-block; width:14px; height:16px; flex:none; }
.ap-dl-ico::before{ content:""; position:absolute; left:6px; top:0; width:2px; height:10px; background:currentColor; border-radius:1px; }
.ap-dl-ico::after{ content:""; position:absolute; left:2.5px; top:4px; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }
.ap-dl-ico{ border-bottom:2px solid currentColor; }

/* ===================== Header ===================== */
.ap-header{
  position:sticky; top:0; z-index:50;
  background:var(--ap-card); border-bottom:1px solid var(--ap-line);
}
.ap-header__in{
  max-width:var(--ap-wrap); margin:0 auto; height:var(--ap-header-h);
  padding:0 var(--ap-gutter); display:flex; align-items:center; gap:12px;
}
.ap-logo{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ap-text); flex:none; }
.ap-logo:hover{ color:var(--ap-text); }
.ap-logo__img{ width:34px; height:34px; }
.ap-logo__name{ font-weight:800; font-size:19px; letter-spacing:-.01em; }
.ap-logo__tag{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ap-accent); background:var(--ap-accent-soft); padding:2px 7px; border-radius:6px;
}
.ap-header__actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.ap-header__actions .ap-btn{ min-height:38px; padding:6px 14px; font-size:14px; }
.ap-header__signup{ display:none; }

/* ===================== Nav + burger (CSS-only) ===================== */
.ap-nav{ order:3; }
.ap-nav__check{ position:absolute; opacity:0; width:1px; height:1px; }
.ap-nav__burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:0 10px; border:1px solid var(--ap-line); border-radius:var(--ap-r-btn);
  cursor:pointer; background:var(--ap-card);
}
.ap-nav__burger span{ display:block; height:2px; background:var(--ap-text); border-radius:2px; transition:transform .2s, opacity .2s; }
.ap-nav__check:focus-visible + .ap-nav__burger{ outline:3px solid var(--ap-accent); outline-offset:2px; }
.ap-nav__check:checked + .ap-nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.ap-nav__check:checked + .ap-nav__burger span:nth-child(2){ opacity:0; }
.ap-nav__check:checked + .ap-nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.ap-nav__panel{
  display:none; position:absolute; left:0; right:0; top:100%;
  background:var(--ap-card); border-bottom:1px solid var(--ap-line); box-shadow:0 10px 24px rgba(27,29,41,.10);
  padding:8px var(--ap-gutter) 16px;
}
.ap-nav__check:checked ~ .ap-nav__panel{ display:block; }
.ap-nav__list{ list-style:none; }
.ap-nav__link{
  display:block; padding:12px 4px; border-bottom:1px solid var(--ap-line);
  color:var(--ap-text); text-decoration:none; font-weight:600;
}
.ap-nav__link:hover{ color:var(--ap-accent); }
.ap-nav__link[aria-current="page"]{ color:var(--ap-accent); }
.ap-nav__cta{ margin-top:14px; width:100%; }

@media (min-width:560px){
  .ap-header__signup{ display:inline-flex; }
  .ap-nav__cta{ display:none; }
}
@media (min-width:1024px){
  .ap-header__in{ gap:24px; }
  .ap-nav{ order:0; margin:0 auto; }
  .ap-header__actions{ margin-left:0; }
  .ap-nav__burger{ display:none; }
  .ap-nav__panel{ display:block; position:static; padding:0; border:0; box-shadow:none; background:none; }
  .ap-nav__list{ display:flex; gap:4px; }
  .ap-nav__link{ border:0; padding:8px 12px; border-radius:var(--ap-r-btn); font-size:15px; color:var(--ap-muted); }
  .ap-nav__link:hover{ background:var(--ap-bg); color:var(--ap-text); }
  .ap-nav__link[aria-current="page"]{ color:var(--ap-accent); background:var(--ap-accent-soft); }
}

/* ===================== Breadcrumbs ===================== */
.ap-crumbs{ max-width:var(--ap-wrap); margin:0 auto; padding:12px var(--ap-gutter) 0; font-size:14px; color:var(--ap-muted); }
.ap-crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.ap-crumbs li + li::before{ content:"/"; margin-right:6px; color:var(--ap-line); }
.ap-crumbs a{ color:var(--ap-muted); }

/* ===================== Page: main + aside ===================== */
.ap-page{ max-width:var(--ap-wrap); margin:0 auto; padding:16px var(--ap-gutter) 40px; }
.ap-main{ min-width:0; }
.ap-side{ display:none; }
@media (min-width:1024px){
  .ap-page{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:28px; align-items:start; padding-top:24px; }
  .ap-side{ display:block; position:sticky; top:calc(var(--ap-header-h) + 20px); }
  body{ padding-bottom:0; }
}

/* S0 app-card */
.ap-appcard{
  background:var(--ap-card); border:1px solid var(--ap-line); border-radius:var(--ap-r-card);
  box-shadow:var(--ap-shadow); padding:20px; display:grid; gap:14px;
}
.ap-appcard__top{ display:flex; gap:14px; align-items:center; }
.ap-appcard__icon{ width:64px; height:64px; border-radius:16px; background:var(--ap-text); padding:6px; flex:none; }
.ap-appcard__name{ margin:0; font-weight:800; font-size:20px; line-height:1.2; }
.ap-appcard__facts{ margin:2px 0 0; color:var(--ap-muted); font-size:14px; }
.ap-appcard .ap-btn{ width:100%; }
.ap-appcard__alt{ text-align:center; font-size:14px; font-weight:600; }

/* нижняя плашка Download (мобильный) */
.ap-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--ap-card); border-top:1px solid var(--ap-line); box-shadow:0 -6px 18px rgba(27,29,41,.08);
  padding:10px var(--ap-gutter); display:flex; align-items:center; gap:12px;
}
.ap-dock__icon{ width:44px; height:44px; border-radius:12px; background:var(--ap-text); padding:4px; flex:none; }
.ap-dock__txt{ margin:0; min-width:0; line-height:1.25; font-size:13px; color:var(--ap-muted); }
.ap-dock__txt strong{ display:block; color:var(--ap-text); font-size:15px; }
.ap-dock .ap-btn{ margin-left:auto; }
@media (min-width:1024px){ .ap-dock{ display:none; } }

/* ===================== Footer ===================== */
.ap-footer{ background:var(--ap-card); border-top:1px solid var(--ap-line); margin-top:8px; font-size:15px; }
.ap-footer__in{
  max-width:var(--ap-wrap); margin:0 auto; padding:32px var(--ap-gutter) 20px;
  display:grid; gap:28px;
}
.ap-footer__brand p{ margin:12px 0 0; color:var(--ap-muted); max-width:46ch; }
.ap-footer__ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.ap-footer__nav{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.ap-footer__h{ margin:0 0 8px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ap-muted); }
.ap-footer__nav ul{ list-style:none; display:grid; gap:6px; }
.ap-footer__nav a{ color:var(--ap-text); text-decoration:none; }
.ap-footer__nav a:hover{ color:var(--ap-accent); text-decoration:underline; }
.ap-footer__bottom{
  max-width:var(--ap-wrap); margin:0 auto; padding:16px var(--ap-gutter) 24px;
  border-top:1px solid var(--ap-line); font-size:14px; color:var(--ap-muted); display:grid; gap:10px;
}
.ap-footer__bottom p{ margin:0; }
.ap-footer__legal a{ color:var(--ap-text); }
.ap-footer__rg{ display:flex; gap:10px; align-items:flex-start; }
.ap-age{
  flex:none; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  border:2px solid var(--ap-err); color:var(--ap-err); font-weight:800; font-size:12px;
}
.ap-footer__rg a{ color:var(--ap-muted); }
@media (min-width:768px){
  .ap-footer__in{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; }
}

/* узкие телефоны: логотип + Download + бургер в одну строку */
@media (max-width:419px){
  .ap-header__in{ gap:8px; }
  .ap-logo__tag{ display:none; }
  .ap-header__actions .ap-btn{ padding:6px 11px; }
}