/* mBit-inspired visual layer. Existing copy, links and document structure remain intact. */
:root {
  --bg-main: #07090d;
  --bg-surface: #12151c;
  --bg-elevated: #1a1e28;
  --text-main: #f3f4f7;
  --text-muted: #9298a8;
  --accent-primary: #5667ff;
  --accent-hover: #7180ff;
  --accent-secondary: #ffba2a;
  --border-color: #2a2f3b;
  --danger-color: #ef4d61;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --container-w: 1230px;
}

html {
  color-scheme: dark;
  background: #07090d;
  scrollbar-color: #454c5e #0b0d12;
}

body {
  color: var(--text-main);
  background:
    radial-gradient(circle at 82% 7%, rgba(81, 63, 186, 0.12), transparent 28rem),
    #07090d;
  font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.005em;
}

::selection {
  color: #080a0f;
  background: #ffba2a;
}

a {
  color: #8290ff;
}

a:hover {
  color: #ffba2a;
}

.container {
  padding-inline: 22px;
}

/* Header */
.site-header {
  background: rgba(7, 9, 13, 0.97);
  border-bottom: 1px solid #232733;
  box-shadow: 0 9px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.header-inner {
  height: 76px;
  padding-left: 72px;
}

.brand-logo {
  width: 126px;
  height: 53px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 126px;
}

.brand-logo__image {
  display: block;
  width: 126px;
  height: auto;
  max-width: 100%;
}

.header-actions {
  gap: 12px;
}

.btn {
  min-height: 42px;
  padding: 10px 22px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 800;
}

.btn-login {
  color: #e8eaff;
  background: transparent;
  border-color: #505ec4;
}

.btn-login:hover {
  color: #fff;
  background: #171b2b;
  border-color: #7481ef;
}

.btn-register,
.btn-cta-hero {
  color: #fff;
  background: linear-gradient(180deg, #6373ff, #4d5ee9);
  border-color: #6676ff;
  box-shadow: 0 8px 24px rgba(72, 91, 238, 0.24);
}

.btn-register:hover,
.btn-cta-hero:hover {
  color: #fff;
  background: linear-gradient(180deg, #7886ff, #5d6ef5);
  transform: translateY(-1px);
}

.mandatory-header-burger-nav {
  position: fixed !important;
  top: 15px;
  left: 16px;
  right: auto;
  z-index: 1100;
}

.mandatory-header-burger__button {
  width: 44px !important;
  height: 44px !important;
  background: #161922 !important;
  border-color: #343947 !important;
  border-radius: 10px !important;
}

.mandatory-header-burger__button span {
  background: #bfc4d2 !important;
}

.mandatory-header-burger__panel {
  color: #fff !important;
  background: #12151c !important;
  border-color: #303645 !important;
  border-radius: 14px !important;
  box-shadow: -18px 0 54px rgba(0, 0, 0, 0.58) !important;
}

.mandatory-header-burger__panel a {
  color: #e7e9ef !important;
  border-bottom-color: #252a35 !important;
}

.mandatory-header-burger__panel a:hover {
  color: #ffba2a !important;
  background: #1a1e28 !important;
}

/* Hero */
.hero-section {
  position: relative;
  overflow: hidden;
  padding: 44px 0 34px;
  background:
    radial-gradient(circle at 17% 22%, rgba(85, 42, 186, 0.27), transparent 25rem),
    radial-gradient(circle at 82% 30%, rgba(38, 70, 194, 0.22), transparent 25rem),
    #0a0c12;
  border-bottom-color: #232733;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(68, 23, 148, 0.16), transparent 44%, rgba(42, 85, 208, 0.12));
}

.hero-section .container {
  position: relative;
  z-index: 1;
}

.author-meta-bar {
  color: #aeb3c1;
  background: #141720;
  border-color: #2d3240;
  border-radius: 10px;
}

.hero-grid {
  gap: 30px;
  padding: 34px;
  background: linear-gradient(125deg, rgba(36, 20, 88, 0.96), rgba(20, 30, 79, 0.96));
  border: 1px solid #333960;
  border-radius: 16px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.35);
}

.hero-content h1 {
  color: #fff;
  font-size: clamp(2.05rem, 4vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-shadow: 0 5px 20px rgba(0, 0, 0, 0.32);
}

.hero-content p {
  color: #dfe2ee;
}

.hero-offer-box {
  padding: 27px;
  text-align: left;
  background: rgba(15, 18, 27, 0.94);
  border: 1px solid #394052;
  border-radius: 13px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
}

.offer-badge {
  color: #0d100d;
  background: #ffba2a;
  border-color: #ffba2a;
  border-radius: 7px;
}

.offer-title {
  color: #fff;
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  line-height: 1.15;
}

.offer-sub {
  color: #aeb4c3;
}

.btn-cta-hero {
  text-align: center;
  border-radius: 10px;
}

/* On-page navigation */
.toc-bar-wrap {
  position: sticky;
  top: 76px;
  z-index: 50;
  padding: 14px 0 10px;
  background: rgba(9, 11, 16, 0.96);
  border-bottom-color: #272c37;
  backdrop-filter: blur(14px);
}

.toc-scroll a {
  color: #d9dce6;
  background: #11141b;
  border-color: #343a48;
  border-radius: 8px;
}

.toc-scroll a:nth-of-type(4n + 1) { border-color: #4758d8; }
.toc-scroll a:nth-of-type(4n + 2) { border-color: #9255d7; }
.toc-scroll a:nth-of-type(4n + 3) { border-color: #bb6c27; }
.toc-scroll a:nth-of-type(4n + 4) { border-color: #227f4a; }

.toc-scroll a:hover {
  color: #fff;
  background: #1a1e28;
  border-color: #6d7cff;
}

/* Content */
.content-section,
.catalog-showcase {
  padding: 40px 0;
  border-bottom-color: #20242e;
}

.content-section:nth-of-type(even),
.catalog-showcase:nth-of-type(even) {
  background: #0a0c11;
}

.content-section h2,
.catalog-header h2 {
  color: #fff;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  border-left-color: #5667ff;
  letter-spacing: -0.01em;
}

.content-section h3 {
  color: #f5f6f8;
}

.content-section p,
.content-section li,
.template-assembled-content {
  color: #d7dae3;
}

.answer-grid {
  gap: 16px;
}

.answer-box,
.howto-card,
.faq-item,
.app-showcase-card,
.template-assembled-content {
  background: #12151c;
  border-color: #2b303c;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.answer-box {
  border-left-color: #5667ff;
}

.answer-box:nth-child(4n + 2) { border-left-color: #9a57da; }
.answer-box:nth-child(4n + 3) { border-left-color: #ffba2a; }
.answer-box:nth-child(4n + 4) { border-left-color: #20ad63; }

.table-scroll-wrap {
  background: #11141b;
  border-color: #303542;
  border-radius: 12px;
}

table {
  color: #dfe2e9;
  background: #11141b;
}

table tr:first-child,
table th {
  color: #fff;
  background: #1d212b;
}

table td,
table th {
  border-bottom-color: #2b303b;
}

table tr:hover {
  background: #181c25;
}

.catalog-cat-title,
.faq-item h3 {
  color: #ffba2a;
}

.tiles-grid {
  gap: 16px;
}

.game-tile {
  background: linear-gradient(145deg, #181c25, #101218);
  border-color: #303542;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.game-tile:nth-child(4n + 1) { border-top-color: #5667ff; }
.game-tile:nth-child(4n + 2) { border-top-color: #9b56dd; }
.game-tile:nth-child(4n + 3) { border-top-color: #ff9f2f; }
.game-tile:nth-child(4n + 4) { border-top-color: #1ba85f; }

.game-tile:hover {
  background: linear-gradient(145deg, #202530, #14171f);
  border-color: #6b7aff;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36);
}

.game-tile svg {
  color: #ffba2a;
}

.tile-play-tag {
  color: #ffca54;
  background: rgba(255, 186, 42, 0.1);
}

.cta-inline-bar,
.pwa-pill {
  color: #c5c9d4;
  background: #1a1e28;
  border-color: #343a47;
}

.app-showcase-card {
  border-color: #3c467f;
}

/* Bottom action and footer */
.sticky-cta-bar {
  background: rgba(13, 15, 21, 0.98);
  border-top-color: #5869ff;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(16px);
}

.sticky-cta-text span {
  color: #ffba2a;
}

.sticky-close-btn {
  color: #abb0bd;
  border-color: #373c49;
}

.site-footer {
  color: #878d9b;
  background: #050609;
  border-top-color: #242833;
}

.trust-badge-link,
.responsible-badge-links a,
.footer-author-card {
  color: #a9aeba !important;
  background: #101219 !important;
  border-color: #2a2e39 !important;
}

.footer-help-block a,
.footer-contact-line,
.footer-support-contact a,
.responsible-help-line a,
.footer-author-card__name {
  color: #e5e7ed !important;
}

.footer-utility-links a {
  color: #7887ff !important;
}

@media (max-width: 768px) {
  .container {
    padding-inline: 14px;
  }

  .header-inner {
    height: 68px;
    padding-left: 14px;
  }

  .brand-logo {
    width: 106px;
    height: 45px;
    flex-basis: 106px;
  }

  .brand-logo__image {
    width: 106px;
  }

  .mandatory-header-burger-nav {
    top: 13px;
    right: 10px;
    left: auto;
  }

  .header-actions {
    gap: 7px;
    margin-right: 48px;
  }

  .header-actions .btn {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 0.78rem;
  }

  .toc-bar-wrap {
    top: 68px;
  }

  .hero-section {
    padding-top: 26px;
  }

  .hero-grid {
    padding: 20px;
    gap: 20px;
  }

  .hero-content,
  .hero-offer-box {
    min-width: 0;
  }

  .offer-title,
  .offer-sub {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 520px) {
  .brand-logo {
    width: 88px;
    height: 38px;
    flex-basis: 88px;
  }

  .brand-logo__image {
    width: 88px;
  }

  .header-actions {
    margin-right: 43px;
  }

  .header-actions .btn {
    padding-inline: 8px;
    font-size: 0.73rem;
  }

  .hero-grid {
    border-radius: 12px;
  }
}