/* ============================================================
   gonka.nexus :: custom-csp.css
   SINGLE SOURCE OF TRUTH — replaces bootstrap.min.css, style.css,
   mbr-additional.css after migration is complete.
   Structure: Tokens -> Reset/Base -> Layout -> Components -> Sections -> Utilities
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --text-main: #ededed;
  --text-muted: #cacaca;
  --text-muted-strong: #808080;

  --bg-dark: #242424;
  --bg-darker: #242424;
  --bg-card: #2a2a2a;
  --bg-white: #ffffff;

  --accent-amber: #f59e0b;
  --accent-amber-hover: #f59e0b;

  --border-subtle: rgba(255,255,255,0.08);

  --shadow-glow-white: rgba(255,255,255,0.04);
  --divider-amber: rgba(245,158,11,0.12);

  --site-anchor-nav-height: 44px;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Consolas, 'Courier New', monospace;

  --container-max: 1200px;
  --gap-md: 16px;

  --bp-mobile: 576px;
  --bp-tablet: 768px;
  --bp-desktop: 992px;
  --bp-wide: 1200px;
  --bp-4k: 1600px;
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  position: relative;
}

a { cursor: pointer; text-decoration: none; color: inherit; }

section { padding: 4rem 0; }

img, iframe { display: block; max-width: 100%; }

button {
  background-color: transparent;
  border-color: transparent;
  cursor: pointer;
  font-family: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   3. LAYOUT PRIMITIVES (replace Bootstrap grid)
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 992px) {
  .container { padding-left: 32px; padding-right: 32px; }
}

.g-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: -16px;
  margin-right: -16px;
}
.g-row > * { padding-left: 16px; padding-right: 16px; }

.g-cols-3 {
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 992px) {
  .g-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .g-cols-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   4. TYPOGRAPHY (single definitive rules, no !important needed
      once bootstrap/mobirise specificity is gone)
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  word-break: break-word;
}

.section-title {
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
}

.section-subtitle {
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 400;
  opacity: 0.9;
  text-align: center;
}

.align-left { text-align: left; }
.align-center { text-align: center; }

/* ============================================================
   5. BUTTONS (single button system)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 0;
  background: transparent;
  color: #f2f2f2;
  padding: 0.75rem 1.25rem;
  min-height: 44px;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease;
  text-decoration: none;
}

.btn:hover, .btn:focus {
  color: var(--accent-amber);
  border-color: rgba(255,255,255,0.55);
}

.btn:focus-visible { outline: none; }

.btn-primary {
  background: var(--accent-amber);
  border-color: var(--accent-amber);
  color: var(--bg-dark);
}
.btn-primary:hover { opacity: 0.85; color: var(--bg-dark); }

/* Hero-specific fixed geometry buttons */
.hero-cta { display: flex; flex-direction: column; gap: 16px; width: 290px; font-size: 1.15rem; }
.hero-cta .btn { width: 100%; }
.hero-btn-primary { width: 290px; }
.hero-btn-secondary { width: 290px; }

@media (max-width: 576px) {
  .hero-cta, .hero-btn-primary, .hero-btn-secondary { width: 100%; max-width: 280px; }
}

/* ============================================================
   6. CARDS (generic card system, replaces .card-box + Mobirise cid hacks)
   ============================================================ */
.card-title { font-size: 1.4rem; line-height: 1.3; margin-bottom: 0.75rem; }
.card-description { color: var(--text-main); }

/* Plain text block — neutral, no card chrome (used by #how-it-works) */
.plain-text-block {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: none;
}
#how-it-works .section-title,
#how-it-works .card-title { text-align: center; }

/* Role label under each #how-it-works subtitle — styled as a faint code comment.
   Smaller + muted vs the 1.5rem subtitle; mono inherits from body. */
/* Equalize subtitle→label gap across both #how-it-works blocks. The second
   subtitle lacks mb-0, so it keeps a default 24px bottom margin that collapses
   with the label's margin-top. Zero it (scoped to #how-it-works) so the gap is
   owned solely by .role-label and matches the first block's 8px. */
#how-it-works .section-subtitle { margin-bottom: 0; }

#how-it-works .role-label {
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-muted-strong);
  margin: 0.5rem 0 0 0;
  text-align: center;
  letter-spacing: 0.02em;
}


/* ============================================================
   7. SITE ANCHOR NAV
   ============================================================ */
.site-anchor-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-darker);
  border-bottom: 1px solid var(--border-subtle);
}

.site-anchor-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0.5rem 1rem;
  min-height: var(--site-anchor-nav-height);
  box-sizing: border-box;
}

.site-anchor-nav__links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-anchor-nav__link {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  opacity: 0.7;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 150ms ease, color 150ms ease;
}

.site-anchor-nav__link:hover,
.site-anchor-nav__link:focus { opacity: 1; color: var(--accent-amber); }

.site-anchor-nav__link + .site-anchor-nav__link {
  position: relative;
  margin-left: 0;
  padding-left: 1rem;
}
.site-anchor-nav__link + .site-anchor-nav__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
  background: var(--divider-amber);
}

.site-anchor-nav__link:focus-visible {
  outline: 2px solid var(--accent-amber);
  outline-offset: 2px;
}

@media (max-width: 576px) {
  .site-anchor-nav__inner {
    justify-content: flex-start;
    gap: 0.5rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* Anchor scroll offset for all in-page targets */
#try-ai, #mining-pools, #pricing, #faq {
  scroll-margin-top: calc(var(--site-anchor-nav-height) + 4px);
}

/* ============================================================
   8. GNK PRICE TICKER
   ============================================================ */
.gnk-ticker-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 3px 10px;
  background: transparent;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  position: relative;
}

.gnk-ticker-link:hover, .gnk-ticker-link:focus {
  opacity: 1;
  color: var(--accent-amber);
  border-color: rgba(255,255,255,0.35);
}

.gnk-label-unit { color: rgba(255,255,255,0.55); font-size: 0.65rem; }
.gnk-price-val { color: var(--text-main); font-weight: 600; margin: 0 2px; font-family: monospace; }
.gnk-ticker-currency { color: rgba(255,255,255,0.3); font-size: 0.6rem; }

/* Desktop-only tooltip */
@media (hover: hover) and (pointer: fine) {
  .gnk-ticker-link::after {
    content: "HEX OTC midpoint";
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: 6px 10px;
    background: rgba(18,18,18,0.92);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
    z-index: 1001;
  }
  .gnk-ticker-link:hover::after,
  .gnk-ticker-link:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(4px);
  }
}

/* ============================================================
   9. ACCORDION (FAQ) — custom, no Bootstrap JS dependency
   NOTE: requires new vanilla-JS toggle script (see migration plan step 2)
   ============================================================ */
.accordion-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.accordion-button {
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text-main);
  font-weight: 600;
  border: none;
  padding: 1.2rem 0;
  cursor: pointer;
  position: relative;
}

.faq-btn-custom {
  font-size: 1.2rem;
}

.accordion-button::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.2s ease;
}

.accordion-button.is-open::after { transform: translateY(-35%) rotate(225deg); }

.accordion-button:hover, .accordion-button:focus-visible {
  color: var(--accent-amber-hover);
  outline: none;
}

.accordion-body {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height 0.25s ease;
}

.accordion-body.is-open {
  max-height: 1000px;
  padding: 0 0 1.2rem;
}

@media (max-width: 576px) {
  .faq-btn-custom { font-size: 1.05rem; }
}

.accordion-body a {
  color: var(--accent-amber);
}
.accordion-body a:hover, .accordion-body a:focus {
  color: var(--accent-amber-hover);
  text-decoration: underline;
}

/* ============================================================
   10. ACCESS AI SECTION (alias of #try-ai; legacy anchor id retained)
   ============================================================ */
#try-ai {
  background-color: var(--bg-darker);
  font-family: var(--font-mono);
  color: var(--text-main);
  padding-bottom: 0;
}

#try-ai .container { max-width: var(--container-max); }

.try-ai-header {
  text-align: center;
  padding: 3rem 1rem 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.try-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.33rem;
  padding: 0 1rem 1.5rem;
}
@media (max-width: 900px) {
  .try-ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .try-ai-grid { grid-template-columns: minmax(0, 1fr); }
}

.try-ai-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 180px;
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 160ms ease;
}

.try-ai-card:hover {
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 8px 32px var(--shadow-glow-white);
  transform: translateY(-2px);
}

.try-ai-card-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  text-align: left;
}

.try-ai-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 480px) { .try-ai-card-title { font-size: 1.2rem; } }

.try-ai-card:hover .try-ai-card-title { color: var(--accent-amber); }

.try-ai-card-tags {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 1rem 0 1.25rem;
  flex-wrap: wrap;
  min-width: 0;
}
.try-ai-card-tag {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.try-ai-card-cta {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  opacity: 0.7;
  margin-top: auto;
  padding-top: 1.5rem;
  transition: opacity 180ms ease, color 180ms ease;
}
.try-ai-card:hover .try-ai-card-cta { color: var(--accent-amber); opacity: 1; }

.try-ai-howitworks { max-width: 1000px; margin: 1.5rem auto 0; padding: 0 1rem; }
.try-ai-howitworks-heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 1.5rem;
}
.try-ai-steps {
  list-style: none;
  padding-left: 1.5rem;
  margin: 0;
}
.try-ai-steps li {
  font-size: 1rem;
  line-height: 1.8;
  opacity: 0.8;
  position: relative;
  padding-left: 1.5rem;
}
/* Terminal-style ">_" prompt prefix, rendered via ::before (not hardcoded in
   HTML) so it stays uniform across all three steps and adjustable in CSS. */
.try-ai-steps li::before {
  content: ">_";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-main);
}
/* Calm, muted note below the steps — not a step, no warning/error styling. */
.try-ai-note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted-strong);
  font-family: var(--font-mono);
}

/* ============================================================
  11. MINING POOLS SECTION (formerly .cid-vewSf6B12y hacks)
   ============================================================ */
#mining-pools { padding-bottom: 1.5rem; }

.mining-pools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  width: 100%;
}
/* Propagate grid stretch through wrapper divs to .pool-card so all cards
   share equal height and the Run Mining button aligns (Bug D). */
.mining-pools-grid > div,
.mining-pools-grid > div > div { height: 100%; }

@media (min-width: 1200px) {
  .mining-pools-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
}
@media (min-width: 1600px) {
  .mining-pools-grid { gap: 8px; }
}

/* Mining pool mechanics block (inserted under Join a Pool cards).
   Prefix "//" rendered via ::before (not hardcoded in HTML) so it stays
   adjustable in CSS. Pattern mirrors .try-ai-steps li (padding-left +
   position:relative), but color matches the paragraph text (var(--text-main)),
   NOT the muted grey used in try-ai-steps. */
.mining-pools-info {
  margin-top: 3rem;
}
.mining-pools-info__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  text-align: left;
  color: var(--text-main);
}
.mining-pools-info__text {
  position: relative;
  padding-left: 1.5rem;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-main);
  max-width: 760px;
  margin: 0 0 1rem;
}
.mining-pools-info__text::before {
  content: "//";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-main);
}

.pool-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  background: var(--bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  text-align: left;
  position: relative; /* anchor for .pool-card__link::after stretched hitbox */
}

.pool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Stretched-link: single <a> (pool title) covers the whole card as click target.
   Scoped to #mining-pools so it does NOT leak into #pricing (which reuses
   .pool-card__title but must keep its own 3 separate links, not a stretched hitbox). */
#mining-pools .pool-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Keyboard focus: the only link per card is the title; surface a visible ring
   on the whole card. Matches .site-anchor-nav__link:focus-visible style. */
.pool-card:focus-within {
  outline: 2px solid var(--accent-amber);
  outline-offset: 2px;
}
.pool-card__title a:focus-visible { outline: none; } /* ring shown on card, not text */

.pool-card__img-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}
/* Air between banner and card title. padding (not margin) → no margin-collapsing
   with .pool-card__title's margin-top; .pool-card scope (0,2,0) beats utility
   .mb-3 (0,1,0) on the same element without !important. */
.pool-card .pool-card__img-box {
  margin-bottom: 0;
  padding-bottom: 24px;
}

.pool-card__img-box img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.pool-card__title { margin: 12px 0 4px; }
.pool-card__title a { color: #ffffff; text-decoration: none; transition: color 0.15s ease; }

.pool-card__subtitle {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  /* Единый якорь высоты subtitle во всех карточках Get GNK,
     чтобы выравнивание не зависело от тега (h6/p) и случайных <br>. */
  min-height: 1.2rem;
}

.pool-card:hover .pool-card__title a,
.pool-card:hover .pool-card__btn .btn { color: var(--accent-amber); }

.pool-card__description { font-size: 0.95rem; line-height: 1.4; flex-grow: 1; }

.pool-card__btn {
  margin-top: auto;
  width: 100%;
}
/* Run Mining link: plain text by default, amber only on hover/focus (Bug C).
   Overrides .btn-primary fill via higher specificity (0,2,0), no !important. */
.pool-card__btn .btn {
  width: 100%;
  font-size: 1.1rem;
  letter-spacing: 1px;
  padding: 10px 0;
  background: transparent;
  border: none;
  color: #f2f2f2;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
/* Amber hover on card CTAs. Specificity (0,3,0) beats base
   .pool-card__btn .btn (0,2,0) regardless of source order, so the
   amber hover applies in both #mining-pools and #pricing. */
.pool-card__btn .btn:hover,
.pool-card__btn .btn:focus {
  color: var(--accent-amber);
}
/* Run Mining: visual-only <span> (real link is the title's stretched ::after).
   Amber on card hover, no own interactive state. */

/* ============================================================
   12. GET GNK / PRICING SECTION (formerly .cid-vex1i2mpfo hacks)
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 992px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .pricing-grid { grid-template-columns: 1fr; } }

.price-card__img {
  aspect-ratio: 1 / 1;
}
.price-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 1px solid var(--border-subtle);
  transition: all 0.3s ease;
}
.price-card__img img:hover {
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

#pricing .pool-card__title a { color: var(--text-main); text-decoration: none; }
#pricing .pool-card__title a:hover { color: var(--accent-amber); }
#pricing .pool-card__subtitle { color: var(--text-muted); }

/* Align Get GNK CTAs to one baseline: every card is a flex column of equal
   height, with the description growing to fill slack so the button pins to the
   bottom. Uses a flex chain (not percentage-height) so it resolves reliably
   regardless of viewport. Scoped to #pricing only. */
.pricing-grid { align-items: stretch; }
.pricing-grid > div { display: flex; }
.pricing-grid > div > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pricing-grid > div > div > p:not(.pool-card__subtitle) { flex-grow: 1; }
.pricing-grid .pool-card__btn.price-card__footer {
  margin-top: auto;
  margin-bottom: 0;
}

.price-card__footer {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.price-card__footer .btn {
  min-width: 220px;
  text-align: center;
}

/* ============================================================
   13. SECTION DIVIDERS
   ============================================================ */
.section-divider {
  position: relative;
}
.section-divider::after {
  content: "";
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  max-width: 1000px;
  height: 1px;
  background: var(--divider-amber);
  pointer-events: none;
}
/* Per-seam offset calibrated from REAL measured gap (card->line),
   not from padding/2 arithmetic. Target visible gap ~40px.
   how-it-works const=16 -> 24px; pricing const=0 -> 40px.
   try-ai no longer uses ::after (line moved to get-gnk::before). */
#pricing.section-divider::after {
  bottom: 40px;
}
/* mining-pools имеет padding-bottom:24px (не 64px как у остальных),
   поэтому offset берём половину его реального padding, а не 32px. */
#mining-pools.section-divider::after {
  bottom: 12px;
}
/* Верхний разделитель: рисуется на следующей секции (top), а не на
   bottom:0 предыдущей. Исторически why-gonka был раздут (~3742px), потому
   что его <section> не закрывался и три следующие секции (try-ai/pricing/
   faq) парсером вкладывались внутрь — ::after уходил глубоко вниз под
   непрозрачный фон try-ai и был не виден. После закрытия why-gonka секции
   стали плоскими; линию держим на ::before у try-ai, top:32px — она
   "парит" в середине 64px zone padding (32px сверху и снизу), визуально
   равный "воздух" вокруг линии, как у остальных швов (bottom:0 + padding). */
.section-divider-top {
  position: relative;
}
.section-divider-top::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  max-width: 1000px;
  height: 1px;
  background: var(--divider-amber);
  pointer-events: none;
}

/* ============================================================
   14. TESTIMONIALS (benefits-stats section)
   ============================================================ */
#benefits-stats { background-color: var(--bg-white); }
#benefits-stats .section-title,
#benefits-stats .section-subtitle { text-align: left; }
.testimonial-card {
  background: none;
  border: none;
  padding: 0 1rem;
  color: var(--bg-dark);
}
.testimonial-card .card-description { color: var(--bg-dark); text-align: left; }
.testimonial-source { color: var(--text-muted-strong); display: block; margin-top: 0.75rem; }
.testimonial-card a {
  display: block;
  margin-top: 0.5rem;
  color: inherit;
  opacity: 0.85;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.testimonial-card a:hover, .testimonial-card a:focus {
  opacity: 1;
  color: var(--accent-amber);
}

/* ============================================================
   15. FOOTER
   ============================================================ */
#footer { background-color: var(--bg-card); padding-top: 1.25rem; padding-bottom: 1.25rem; }

.footer-disclaimer-text {
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
  line-height: 1.4;
  /* Сброс дефолтного margin-top браузера (p{margin:1em}) — иначе
     он схлопывается (margin collapsing) с margin-bottom предыдущего
     параграфа и перебивает наш ритм 4/16/4/0. */
  margin-top: 0;
}
/* Прямые правила на класс вместо утилитарных mb-* — выше специфичность,
   страхует от каскадных конфликтов. Ритм: 1-2 слитно, зазор, 3-4 слитно.
   Внутригрупповые 4px, межгрупповой зазор 16px (соотношение 1:4). */
.footer-disclaimer-text:nth-child(1) { margin-bottom: 4px; }
.footer-disclaimer-text:nth-child(2) { margin-bottom: 16px; }
.footer-disclaimer-text:nth-child(3) { margin-bottom: 4px; }
.footer-disclaimer-text:nth-child(4) { margin-bottom: 0; }

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  justify-items: start; /* иконки+текст выровнены по левому краю ячейки, не по центру */
  gap: 10px 0;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: left;
}
@media (min-width: 576px) {
  .footer-links { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
}

.footer-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start; /* левый край иконки совпадает по X в обоих рядах */
  gap: 6px;
  white-space: nowrap;
  flex-wrap: nowrap;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease; /* консистентно с .site-anchor-nav__link / .gnk-ticker-link */
}
/* Снимаем жирность <strong> в ссылках футера. Специфичность (0,1,2)
   перекрывает user-agent strong{bolder} (0,0,1) — без !important. */
.footer-links strong, .footer-icon-link strong { font-weight: 400; }
/* Amber-hover как у навигации/тикера: меняем только цвет, без подчёркивания.
   SVG с currentColor подхватят цвет автоматически; <img> (Gonka.ai) остаётся как есть. */
.footer-icon-link:hover, .footer-icon-link:focus-visible { color: var(--accent-amber); }
.footer-icon-link svg { flex-shrink: 0; opacity: 0.85; transition: opacity 0.2s ease; }
.footer-icon-link:hover svg, .footer-icon-link:focus-visible svg { opacity: 1; }

/* Mobile (<=576px): ссылки сверху, disclaimer-текст снизу.
   Блоки — прямые дети flex .g-row, поэтому работает order.
   Desktop-порядок (disclaimer слева / links справа) не трогаем. */
@media (max-width: 576px) {
  #footer-disclaimer-block { order: 2; }
  #footer-links-block { order: 1; }
}

/* Desktop/tablet (>=577px): keep footer row in ONE line — disclaimer left, links right.
   Local to #footer only; global .g-row untouched. Mobile <=576px keeps its order-swap above. */
@media (min-width: 577px) {
  #footer .g-row.g-align-center {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  #footer-disclaimer-block {
    flex: 1 1 auto;
    min-width: 0;
  }
  #footer-links-block {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* ============================================================
   16. BACK TO TOP (single implementation, replaces .mbr-arrow-up)
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  background: var(--bg-darker);
  color: #ffffff;
  border: 1px solid #444;
  border-radius: 0;
  font-size: 20px;
  line-height: 44px;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 9999;
}
.back-to-top.visible { opacity: 1; }

/* ============================================================
   17. HIGH-DPI DENSITY ADJUSTMENTS
   ============================================================ */
@media (min-width: 1400px) { html { font-size: 92.5%; } }
@media (min-width: 1920px) { html { font-size: 87.5%; } }

/* ============================================================
   18. LAYOUT UTILITIES (closes GAP: d-flex, align-items-center, w-100)
   ============================================================ */
.g-flex { display: flex; }
.g-align-center { align-items: center; }
.w-100 { width: 100%; }

/* Section header wrappers: when placed inside a multi-column grid
   (.g-cols-3 / .pricing-grid), span the full grid width so the
   centered title aligns to the whole section, not a narrow column. */
.g-cols-3 > .section-head-wrap,
.pricing-grid > .section-head-wrap {
  grid-column: 1 / -1;
  text-align: center;
}

/* ============================================================
   19. SPACING UTILITIES (closes GAP: mb-0/1/3/4/5, mt-2/4/5, mb-md-0)
   Minimal replacement for Bootstrap spacing scale.
   ============================================================ */
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

@media (min-width: 768px) {
  .mb-md-0 { margin-bottom: 0; }
}

/* ============================================================
   20. HERO TEXT WRAPPERS (closes GAP: image-wrapper, text-wrapper,
       hero-description, hero-disclaimer)
   ============================================================ */
#hero .g-row { flex-direction: row-reverse; align-items: center; flex-wrap: nowrap; }
#hero .g-row > div { flex: 1 1 0; min-width: 0; }
#hero .text-wrapper { padding: 0 2rem; }
/* Hero h1 keeps left alignment + smaller size (overrides .section-title center/2.75rem). */
#hero .text-wrapper h1 {
  text-align: left;
  font-size: 1.8rem;
  line-height: 1.15;
}
@media (max-width: 576px) {
  #hero .text-wrapper h1 { font-size: 1.6rem; line-height: 1.1; }
}
#hero .image-wrapper img {
  height: auto;
  object-fit: cover;
  aspect-ratio: 1200 / 675;
}

@media (max-width: 992px) {
  #hero .g-row { flex-direction: column; }
  #hero .g-row > div { flex: 1 1 100%; width: 100%; }
  #hero .image-wrapper { margin-bottom: 1rem; }
  #hero .text-wrapper { padding: 0; }
}
@media (max-width: 576px) {
  #hero .image-wrapper { margin-bottom: 2rem; }
}

.hero-description {
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--text-main);
  margin-bottom: 1.5rem;
}
/* Hero: first description paragraph sits tight to the second (2-4px),
   second keeps standard 1.5rem gap before CTA. Top rhythm unchanged. */
#hero .text-wrapper .hero-description:first-of-type { margin-bottom: 0.1875rem; }

.hero-disclaimer {
  margin: 20px 0 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-muted-strong);
  white-space: pre-line;
}

/* ============================================================
  22. NAV TICKER WRAPPER (closes GAP: gnk-nav-ticker)
   ============================================================ */
.gnk-nav-ticker {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: 0.75rem;
}