:root{
  --bg:#f7f9fc; --paper:#ffffff; --ink:#171a26; --muted:#66708a;
  --line:#e6ebf3; --chip:#f1f4fb; --accent:#0d6efd; --accent-2:#ffaa00; --ok:#1bbf7a; --danger:#ff375f;
  --shadow:0 10px 28px rgba(12,38,89,.08);
  --max:1180px; --pad:16px; --header-h:64px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.container{width:min(var(--max),100% - 2*var(--pad));margin-inline:auto}
.flat{background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border:1px solid var(--line);padding:5px 10px;border-radius:999px;font-size:12px;color:var(--muted)}

/* Header & Mega menu */
.header{position:sticky;top:0;z-index:1000;background:var(--paper);border-bottom:1px solid var(--line)}
.header__bar{display:flex;align-items:center;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0}
.nav__link{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--chip);color:var(--ink);text-decoration:none}
.nav__caret{font-size:12px;opacity:.7}
.nav__item{position:relative}
.nav__item.is-open>.sub-menu{display:block}
/* Top-level sub-menu becomes a mega panel */
.sub-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 10px);background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px 16px}
.nav__panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.nav__panel>li{list-style:none}
.nav__panel>li>a{display:block;font-weight:700;color:var(--ink);padding:6px 8px;border-radius:10px}
.nav__panel>li>a:hover{background:var(--chip)}
.nav__panel>li>.sub-menu{display:block;position:static;border:0;box-shadow:none;border-radius:0;padding:6px 0 0 0}
.nav__panel>li>.sub-menu>li{list-style:none}
.nav__panel>li>.sub-menu>li>a{display:block;padding:6px 8px;border-radius:10px;color:var(--ink)}
.nav__panel>li>.sub-menu>li>a:hover{background:var(--chip)}
/* Caret bubble for active top item */
.nav__item.is-open>.nav__link{background:#fff;border-color:var(--accent)}
/* Mobile */
.burger{display:none;margin-left:8px}
.mobile{display:none}
@media(max-width:980px){
  .nav{display:none}
  .burger{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--chip)}
  body.nav-open .mobile{transform:translateX(0)}
  .mobile{display:block;position:fixed;inset:0 0 0 30%;transform:translateX(100%);transition:.25s;z-index:1100;background:var(--paper);border-left:1px solid var(--line);padding:18px;overflow:auto}
  .mobile__close{position:absolute;top:10px;right:10px}
  .mobile ul{list-style:none;margin:0;padding:0}
  .mobile li{margin-bottom:6px}
  .mobile a{display:block;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--chip);color:var(--ink)}
  .mobile .sub-menu{display:none;position:static;border:0;box-shadow:none;padding:6px 0 6px 10px}
  .mobile .has-children.is-open>.sub-menu{display:block}
}

/* Hero */
.hero{position:relative;overflow:hidden;border-radius:24px;margin:16px auto;padding:80px 16px}
.hero .bg{position:absolute;inset:0}
.hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.05) brightness(1.02)}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.65))}
.hero .content{position:relative;z-index:2;text-align:center;display:grid;gap:14px;place-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:linear-gradient(90deg,var(--accent),#3aa3ff);color:#fff;font-weight:700;box-shadow:0 8px 22px rgba(13,110,253,.25)}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)}

/* TOC */
.toc{position:sticky;top:var(--header-h);z-index:900;background:var(--paper);border:1px solid var(--line);border-radius:12px;margin:16px auto;padding:10px;display:none}
.toc--visible{display:block}
.toc__title{font-weight:700;margin:0 0 6px}
.toc__list{display:flex;flex-wrap:wrap;gap:8px}
.toc__list a{display:inline-flex;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--chip);font-size:13px;color:var(--muted)}
.toc__list a.active{border-color:var(--accent);color:var(--ink)}

/* Cards, Reviews, Footer (unchanged basics) */
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin:20px 0}
.card{grid-column:span 12;display:grid;grid-template-columns:88px 1fr 140px;gap:14px;align-items:center;padding:14px;border-radius:18px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
.card__logo{width:88px;height:88px;border-radius:16px;border:1px solid var(--line);display:grid;place-items:center;background:var(--chip)}
.card__title{font-size:20px;font-weight:800;margin:0}
.card__meta{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.card__tags{display:flex;gap:6px;flex-wrap:wrap}
.card__score{display:grid;gap:8px;justify-items:end}
.score{font-weight:800;font-size:20px}
@media(max-width:980px){
  .card{grid-template-columns:64px 1fr;grid-template-areas:'logo head' 'logo meta' 'cta cta'}
  .card__logo{grid-area:logo;width:64px;height:64px}
  .card__body{grid-area:head}
  .card__score{grid-area:cta;display:flex;align-items:center;justify-content:space-between}
}
.reviews{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin:10px 0}
.review{grid-column:span 6;padding:14px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,var(--paper),#fafcff)}
@media(max-width:900px){.review{grid-column:span 12}}
.footer{margin-top:24px;background:var(--paper);border-top:1px solid var(--line)}
.footer__inner{padding:16px 0;display:grid;gap:10px}

/* Bonus bar */
.bonusbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:1200;display:none;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);background:var(--paper);border-radius:16px;box-shadow:var(--shadow)}
.bonusbar--visible{display:flex}
.bonusbar__code{font-weight:800;padding:6px 10px;border-radius:10px;background:var(--chip);border:1px solid var(--line)}
.bonusbar__close{margin-left:auto;background:none;border:none;font-size:18px;cursor:pointer}

/* ========== MEGA: фиксы ширины и сетки ========== */
.header__bar{ position: relative; }           /* контекст позиционирования для панелей */
.nav__item{ position: static; }               /* не ограничиваем панель шириной LI */

/* топ-панель мегаменю — на всю ширину контейнера шапки */
.sub-menu{
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  z-index: 1500;
  padding: 22px var(--pad);
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* грид из 4 колонок, комфортные отступы */
.nav__panel{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.nav__panel > li{ list-style: none; }
.nav__panel > li > a{
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
  border-radius: 10px;
  padding: 6px 8px;
}
.nav__panel > li > a:hover{ background: var(--chip); }

/* вложенные списки внутри колонок — обычные (не выпадающие) */
.nav__panel > li > .sub-menu{
  position: static;
  display: block;
  border: 0;
  box-shadow: none;
  padding: 6px 0 0 0;
}
.nav__panel > li > .sub-menu > li{ list-style: none; }
.nav__panel > li > .sub-menu > li > a{
  display: block;
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--ink);
}
.nav__panel > li > .sub-menu > li > a:hover{ background: var(--chip); }

/* чтобы меню не пряталось под админ-бар WP */
body.admin-bar .header{ top: 32px; }
@media (max-width: 782px){ body.admin-bar .header{ top: 46px; } }