/* layout.css - каркас nagad88playbdcom: шрифты, токены, ресет, шапка, меню, нижняя панель,
   крошки, кнопки, футер. Одинаков на всех страницах. Стиль по ng88b.com. */

/* ===================== Fonts (локальные, без CDN) ===================== */
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/poppins-400.woff2") format("woff2"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/poppins-500.woff2") format("woff2"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/poppins-600.woff2") format("woff2"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/poppins-700.woff2") format("woff2"); }

/* ===================== Design tokens ===================== */
:root{
  --ng-blue:#0047FF;
  --ng-violet:#5A00B4;
  --ng-indigo:#361DD2;
  --ng-orange:#FFAB2D;
  --ng-orange-2:#FF7700;
  --ng-btn-blue:#1736ED;
  --ng-btn-violet:#5205BA;
  --ng-navy:#010427;
  --ng-bg:#FFFFFF;
  --ng-gray:#F5F5F5;
  --ng-gray-2:#E6E6EC;
  --ng-text:#1D1D24;
  --ng-muted:#5F5F6B;
  --ng-legal:#959595;
  --ng-foot-link:#7C9DFF;
  --ng-grad-head:linear-gradient(180deg, var(--ng-blue) 0%, var(--ng-violet) 100%);
  --ng-grad-dark:linear-gradient(135deg, var(--ng-blue) 0%, var(--ng-indigo) 47%, var(--ng-violet) 100%);
  --ng-grad-orange:linear-gradient(180deg, var(--ng-orange) 0%, var(--ng-orange-2) 100%);
  --ng-grad-btn-blue:linear-gradient(180deg, var(--ng-btn-blue) 0%, var(--ng-btn-violet) 100%);
  --ng-font:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", Arial, sans-serif;
  --ng-radius:10px;
  --ng-radius-sm:4px;
  --ng-shadow:0 2px 8px rgba(1,4,39,.18);
  --ng-wrap:1200px;
  --ng-appbar-h:56px;
  --ng-quickbar-h:60px;
}

/* ===================== Reset ===================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html, body{ margin:0; padding:0; }
body{
  background:var(--ng-bg); color:var(--ng-text); font-family:var(--ng-font);
  font-size:16px; line-height:1.6; font-weight:400;
  padding-bottom:var(--ng-quickbar-h); overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
ul, ol{ margin:0; padding:0; }
ul{ list-style:none; }
a{ color:var(--ng-blue); }
h1, h2, h3, h4{ font-weight:700; line-height:1.25; margin:0; }
p{ margin:0; }
:focus-visible{ outline:3px solid var(--ng-orange); outline-offset:2px; }
.ng-wrap{ width:100%; max-width:var(--ng-wrap); margin:0 auto; padding:0 16px; }
.ng-visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.ng-skip{ position:absolute; left:8px; top:-60px; z-index:200; background:var(--ng-navy); color:#fff; padding:8px 14px; border-radius:var(--ng-radius-sm); }
.ng-skip:focus{ top:8px; }

/* ===================== CTA buttons ===================== */
.ng-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:8px 20px; border-radius:6px; border:1px solid transparent;
  font-family:var(--ng-font); font-size:14px; font-weight:600; letter-spacing:.6px; line-height:1.2;
  text-decoration:none; text-align:center; cursor:pointer; transition:filter .15s, transform .15s;
}
.ng-cta:hover{ filter:brightness(1.07); }
.ng-cta:active{ transform:translateY(1px); }
.ng-cta svg{ width:20px; height:20px; flex:none; }
/* оранжевые кнопки: тёмный текст ради контраста 4.5:1 */
.ng-cta--orange{ background:var(--ng-grad-orange); color:var(--ng-navy); }
.ng-cta--signup{ background:var(--ng-orange); color:var(--ng-navy); }
.ng-cta--blue{ background:var(--ng-grad-btn-blue); color:#fff; }
.ng-cta--ghost{ background:transparent; color:#fff; border-color:#fff; }
.ng-cta--ghost:hover{ background:rgba(255,255,255,.12); }
.ng-cta--light{ background:#fff; color:var(--ng-blue); }
.ng-cta--lg{ min-height:48px; padding:12px 28px; font-size:16px; border-radius:8px; }
.ng-cta--block{ display:flex; width:100%; }

/* ===================== Header ===================== */
.ng-header{ position:sticky; top:0; z-index:100; }
.ng-nav-toggle{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }

.ng-header__bar{ background:var(--ng-grad-head); box-shadow:0 3px 4px rgba(0,0,0,.14); }
.ng-header__inner{
  display:grid; grid-template-columns:44px 1fr 44px; align-items:center;
  height:var(--ng-appbar-h);
}
.ng-logo{ display:block; justify-self:center; }
.ng-logo img{ width:120px; height:38px; object-fit:contain; }
.ng-header__actions{ display:none; }

/* бургер */
.ng-burger{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:var(--ng-radius-sm);
}
.ng-burger__icon, .ng-burger__icon::before, .ng-burger__icon::after{
  display:block; width:22px; height:2px; background:#fff; border-radius:2px; position:relative; content:"";
  transition:transform .2s, background .2s;
}
.ng-burger__icon::before{ position:absolute; top:-7px; left:0; }
.ng-burger__icon::after{ position:absolute; top:7px; left:0; }
.ng-nav-toggle:focus-visible ~ .ng-header__bar .ng-burger{ outline:3px solid var(--ng-orange); outline-offset:-3px; }
.ng-nav-toggle:checked ~ .ng-header__bar .ng-burger__icon{ background:transparent; }
.ng-nav-toggle:checked ~ .ng-header__bar .ng-burger__icon::before{ transform:translateY(7px) rotate(45deg); }
.ng-nav-toggle:checked ~ .ng-header__bar .ng-burger__icon::after{ transform:translateY(-7px) rotate(-45deg); }

/* ===================== Nav: мобильный drawer ===================== */
.ng-nav{
  position:fixed; top:0; left:0; bottom:0; z-index:120; width:310px; max-width:86vw;
  background:#fff; overflow-y:auto; transform:translateX(-105%); transition:transform .25s ease;
  box-shadow:4px 0 24px rgba(0,0,0,.25); visibility:hidden;
}
.ng-nav-toggle:checked ~ .ng-nav{ transform:none; visibility:visible; }
.ng-nav__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:var(--ng-appbar-h); padding:0 8px 0 16px; background:var(--ng-grad-head);
}
.ng-nav__head img{ width:110px; height:35px; object-fit:contain; }
.ng-nav__close{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff;
}
.ng-nav__close svg{ width:24px; height:24px; }
.ng-nav__list{ padding:8px 0; }
.ng-nav__item--apk{ display:none; }
.ng-nav__link{
  display:flex; flex-direction:column; gap:2px; padding:12px 20px; text-decoration:none;
  border-bottom:1px solid #EEE; border-left:4px solid transparent;
}
.ng-nav__name{ font-size:16px; font-weight:600; color:var(--ng-blue); line-height:1.3; }
.ng-nav__hint{ font-size:12px; color:var(--ng-muted); line-height:1.4; }
.ng-nav__link[aria-current="page"]{ background:#EEF3FF; border-left-color:var(--ng-orange-2); }
.ng-nav__link:hover .ng-nav__name{ text-decoration:underline; }
.ng-nav__ctas{ display:grid; gap:10px; padding:16px 20px 24px; }

.ng-nav-overlay{
  position:fixed; inset:0; z-index:110; background:rgba(1,4,39,.55);
  opacity:0; visibility:hidden; transition:opacity .2s;
}
.ng-nav-toggle:checked ~ .ng-nav-overlay{ opacity:1; visibility:visible; }

/* ===================== Нижняя панель (мобильный) ===================== */
.ng-quickbar{ position:fixed; left:0; right:0; bottom:0; z-index:90; height:var(--ng-quickbar-h); box-shadow:0 -2px 8px rgba(0,0,0,.2); }
.ng-quickbar ul{ display:grid; grid-template-columns:repeat(3, 1fr); height:100%; }
.ng-quickbar a{
  display:flex; align-items:center; justify-content:center; gap:6px; height:100%;
  font-size:16px; font-weight:600; text-decoration:none; padding:0 6px;
}
.ng-quickbar svg{ width:22px; height:22px; flex:none; }
.ng-quickbar__login{ background:var(--ng-grad-dark); color:#fff; }
.ng-quickbar__signup{ background:linear-gradient(90deg, var(--ng-orange), var(--ng-orange-2)); color:var(--ng-navy); }
.ng-quickbar__download{ background:var(--ng-gray); color:var(--ng-blue); }

/* ===================== Breadcrumbs ===================== */
.ng-crumbs{ background:var(--ng-blue); color:#fff; font-size:13px; }
.ng-crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; list-style:none; padding:12px 0 0; }
.ng-crumbs li{ display:flex; align-items:center; }
.ng-crumbs li + li::before{ content:"/"; margin:0 8px; opacity:.7; }
.ng-crumbs a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.ng-crumbs [aria-current="page"]{ opacity:.9; }
/* над hero plain (серый фон) */
.ng-crumbs--plain{ background:var(--ng-gray); color:var(--ng-blue); }
.ng-crumbs--plain a{ color:var(--ng-blue); }

/* ===================== Footer ===================== */
.ng-footer{ background:var(--ng-navy); color:#fff; padding:32px 0 24px; }
.ng-footer__ctas{ display:flex; flex-wrap:wrap; gap:12px; padding-bottom:28px; }
.ng-footer__ctas .ng-cta{ flex:1 1 180px; }
.ng-footer__cols{ display:grid; gap:24px; grid-template-columns:1fr; padding-bottom:28px; }
.ng-footer__title{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; color:#fff; margin-bottom:10px; }
.ng-footer__cols li + li{ margin-top:6px; }
.ng-footer__cols a{ color:var(--ng-foot-link); font-size:14px; font-weight:600; text-decoration:none; }
.ng-footer__cols a:hover{ color:#fff; text-decoration:underline; }
.ng-footer__legal{ border-top:1px solid rgba(255,255,255,.1); padding-top:24px; display:grid; gap:16px; color:var(--ng-legal); font-size:12px; line-height:1.6; }
.ng-footer__brand{ display:inline-block; justify-self:start; }
.ng-footer__brand img{ width:101px; height:32px; object-fit:contain; }
.ng-badge18{
  width:40px; height:40px; flex:none; border:2px solid #fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px;
}
.ng-footer__tech{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.ng-footer__tech a, .ng-footer__legal p a{ color:var(--ng-legal); text-decoration:underline; text-underline-offset:2px; }
.ng-footer__tech a:hover, .ng-footer__legal p a:hover{ color:#fff; }
.ng-footer__legal small{ font-size:12px; }

/* ===================== >= 640 ===================== */
@media (min-width:640px){
  .ng-footer__cols{ grid-template-columns:repeat(3, 1fr); }
  .ng-footer__ctas .ng-cta{ flex:0 0 auto; min-width:200px; }
}

/* ===================== Desktop >= 1024 ===================== */
@media (min-width:1024px){
  body{ padding-bottom:0; }
  .ng-quickbar{ display:none; }
  .ng-header{ position:relative; }
  .ng-header__inner{ display:flex; justify-content:space-between; height:70px; padding:0 24px; max-width:none; }
  .ng-burger, .ng-nav-toggle{ display:none; }
  .ng-logo{ justify-self:auto; }
  .ng-logo img{ width:150px; height:48px; }
  .ng-header__actions{ display:flex; gap:12px; }
  .ng-header__actions .ng-cta{ width:120px; min-height:36px; padding:6px 10px; border-radius:var(--ng-radius-sm); font-weight:500; letter-spacing:1.25px; }

  .ng-nav{
    position:static; width:auto; max-width:none; transform:none; visibility:visible; overflow:visible;
    box-shadow:none; background:var(--ng-grad-orange);
  }
  .ng-nav__head, .ng-nav__ctas, .ng-nav__hint, .ng-nav-overlay{ display:none; }
  .ng-nav__list{ display:flex; align-items:stretch; justify-content:center; height:45px; padding:0 24px; }
  .ng-nav__item{ display:flex; }
  .ng-nav__item + .ng-nav__item{ border-left:1px solid rgba(1,4,39,.22); }
  .ng-nav__item--apk{ display:flex; }
  .ng-nav__link{
    flex-direction:row; align-items:center; padding:0 16px; border:0; position:relative;
  }
  .ng-nav__name{ font-size:14px; font-weight:600; color:var(--ng-navy); letter-spacing:.6px; white-space:nowrap; }
  .ng-nav__link svg{ width:24px; height:24px; color:var(--ng-navy); }
  .ng-nav__link[aria-current="page"]{ background:rgba(255,255,255,.22); border:0; }
  .ng-nav__link[aria-current="page"]::after{ content:""; position:absolute; left:10px; right:10px; bottom:0; height:3px; background:var(--ng-navy); }
  .ng-nav__link:hover{ background:rgba(255,255,255,.18); }
  .ng-nav__link:hover .ng-nav__name{ text-decoration:none; }

  .ng-crumbs ol{ padding-top:20px; }
  .ng-footer{ padding:40px 0 28px; }
  .ng-footer__legal{ grid-template-columns:auto 1fr auto; align-items:start; gap:12px 40px; }
  .ng-footer__brand{ grid-column:1; grid-row:1 / 4; }
  .ng-footer__tech{ grid-column:2; grid-row:1; }
  .ng-footer__text{ grid-column:2; grid-row:2; max-width:80ch; }
  .ng-footer__copy{ grid-column:2; grid-row:3; }
  .ng-badge18{ grid-column:3; grid-row:1 / 3; }
}
@media (min-width:1280px){
  .ng-nav__link{ padding:0 20px; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition:none !important; scroll-behavior:auto !important; }
}