/* =========================================================
   FIRE.BBCLOUD.RU — unified visual system v2
   Loaded LAST on purpose. Does not change JS/forms/API.
   ========================================================= */

:root {
  --site-bg: #f8f7f3;
  --site-surface: #ffffff;
  --site-text: #202b2d;
  --site-muted: #5b6668;
  --site-accent: #347c8a;
  --site-accent-dark: #286875;
  --site-border: rgba(32,43,45,.10);
  --site-radius: 20px;
  --site-container: 1160px;
  --site-h2-size: clamp(36px, 4.15vw, 52px);
  --site-h2-line: 1.08;
  --site-h2-weight: 600;
  --site-h2-spacing: -.028em;
}

/* One font system for the whole landing */
.q3a-hero,
.fire-gallery,
.q3b-why,
.k7m-services,
.b9p-process,
.x4q-safety,
.m4t-trust,
.c2c-cases,
.n7k-cta {
  font-family: var(--t-text-font, "Tilda Sans", Arial, sans-serif);
  color: var(--site-text);
}

/* One container width */
.q3a-hero__container,
.fire-gallery__container,
.q3b-why__container,
.k7m-services__container,
.b9p-process__container,
.x4q-safety__container,
.m4t-trust__container,
.c2c-cases__container,
.n7k-cta__container {
  width: min(var(--site-container), calc(100% - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* =========================================================
   SECTION HEADERS — identical rhythm and typography
   ========================================================= */
.q3b-why__title,
.k7m-services__title,
.b9p-process__title,
.x4q-safety__title,
.m4t-trust__title,
.c2c-cases__title,
.n7k-cta__title,
.fire-gallery__title {
  font-family: var(--t-headline-font, "Tilda Sans", Arial, sans-serif) !important;
  font-size: var(--site-h2-size) !important;
  line-height: var(--site-h2-line) !important;
  font-weight: var(--site-h2-weight) !important;
  letter-spacing: var(--site-h2-spacing) !important;
  margin: 0 0 22px !important;
  text-wrap: balance;
}

/* Keep the hero visually dominant, but from the same family */
.q3a-hero__title {
  font-family: var(--t-headline-font, "Tilda Sans", Arial, sans-serif) !important;
  font-size: clamp(42px, 4.7vw, 60px) !important;
  line-height: 1.07 !important;
  font-weight: 600 !important;
  letter-spacing: -.03em !important;
}

/* CTA is white, but otherwise follows exactly the same heading scale */
.n7k-cta__title { color: #fff !important; }
.n7k-cta__title span { color: rgba(255,255,255,.72) !important; }

/* All section eyebrows share the same visual language */
.q3b-why__eyebrow,
.k7m-services__eyebrow,
.b9p-process__eyebrow,
.x4q-safety__eyebrow,
.m4t-trust__eyebrow,
.c2c-cases__eyebrow,
.fire-gallery__eyebrow,
.n7k-cta__eyebrow {
  font-family: var(--t-text-font, "Tilda Sans", Arial, sans-serif) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--site-accent) !important;
}

/* CTA eyebrow sits on dark background */
.n7k-cta__eyebrow { color: rgba(255,255,255,.78) !important; }

/* Intro paragraphs below headings */
.q3b-why__lead,
.k7m-services__lead,
.b9p-process__lead,
.x4q-safety__lead,
.m4t-trust__lead,
.c2c-cases__lead,
.fire-gallery__description {
  font-family: var(--t-text-font, "Tilda Sans", Arial, sans-serif) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  color: var(--site-muted) !important;
}

/* Cards: same geometry everywhere */
.q3b-why__item,
.k7m-services__item,
.x4q-safety__item,
.m4t-trust__card,
.c2c-case {
  border-radius: var(--site-radius) !important;
  border-color: var(--site-border) !important;
}

/* Card headings use one consistent scale */
.q3b-why__item-title,
.k7m-services__item-title,
.x4q-safety__item-title,
.m4t-trust__card-title,
.b9p-process__step-title,
.n7k-cta__step-title {
  font-family: var(--t-headline-font, "Tilda Sans", Arial, sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
}

/* Buttons */
.q3a-hero__cta,
.n7k-cta__button,
.t-btnflex {
  font-family: var(--t-text-font, "Tilda Sans", Arial, sans-serif) !important;
}

/* Don't let individual sections introduce different outer typography */
.q3a-hero p,
.fire-gallery p,
.q3b-why p,
.k7m-services p,
.b9p-process p,
.x4q-safety p,
.m4t-trust p,
.c2c-cases p,
.n7k-cta p {
  font-family: var(--t-text-font, "Tilda Sans", Arial, sans-serif);
}

@media (max-width: 980px) {
  :root { --site-h2-size: clamp(34px, 5.4vw, 44px); }
  .q3a-hero__container,
  .fire-gallery__container,
  .q3b-why__container,
  .k7m-services__container,
  .b9p-process__container,
  .x4q-safety__container,
  .m4t-trust__container,
  .c2c-cases__container,
  .n7k-cta__container {
    width: min(var(--site-container), calc(100% - 40px)) !important;
  }
}

@media (max-width: 640px) {
  :root { --site-h2-size: 32px; }
  .q3a-hero__container,
  .fire-gallery__container,
  .q3b-why__container,
  .k7m-services__container,
  .b9p-process__container,
  .x4q-safety__container,
  .m4t-trust__container,
  .c2c-cases__container,
  .n7k-cta__container {
    width: calc(100% - 32px) !important;
  }

  .q3a-hero__title {
    font-size: clamp(34px, 9vw, 42px) !important;
    line-height: 1.08 !important;
  }

  .q3b-why__lead,
  .k7m-services__lead,
  .b9p-process__lead,
  .x4q-safety__lead,
  .m4t-trust__lead,
  .c2c-cases__lead,
  .fire-gallery__description {
    font-size: 16px !important;
  }
}

/* =========================================================
   v3 — unified section header alignment
   All content sections start from the same left edge as cards.
   ========================================================= */
.q3b-why__header,
.k7m-services__header,
.b9p-process__header,
.x4q-safety__header,
.m4t-trust__header,
.c2c-cases__header,
.fire-gallery__header,
.n7k-cta__header {
  width: 100% !important;
  max-width: 820px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

/* Keep the intro text from acquiring a different alignment/width. */
.q3b-why__lead,
.k7m-services__lead,
.b9p-process__lead,
.x4q-safety__lead,
.m4t-trust__lead,
.c2c-cases__lead,
.fire-gallery__description,
.n7k-cta__lead {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}


/* =========================================================
   v4 — one real page grid
   Original sections had different horizontal padding.
   Remove it so every header/card grid shares exactly one x-axis.
   ========================================================= */
.q3b-why__container,
.k7m-services__container,
.b9p-process__container,
.x4q-safety__container,
.m4t-trust__container,
.c2c-cases__container,
.n7k-cta__container,
.fire-gallery__container {
  max-width: var(--site-container) !important;
  width: min(var(--site-container), calc(100% - 48px)) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.q3b-why__header,
.k7m-services__header,
.b9p-process__header,
.x4q-safety__header,
.m4t-trust__header,
.c2c-cases__header,
.fire-gallery__header,
.n7k-cta__header {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 980px) {
  .q3b-why__container,
  .k7m-services__container,
  .b9p-process__container,
  .x4q-safety__container,
  .m4t-trust__container,
  .c2c-cases__container,
  .n7k-cta__container,
  .fire-gallery__container {
    width: calc(100% - 40px) !important;
    padding: 0 !important;
  }
}

@media (max-width: 640px) {
  .q3b-why__container,
  .k7m-services__container,
  .b9p-process__container,
  .x4q-safety__container,
  .m4t-trust__container,
  .c2c-cases__container,
  .n7k-cta__container,
  .fire-gallery__container {
    width: calc(100% - 32px) !important;
    padding: 0 !important;
  }
}

/* =========================================================
   v5 — unified vertical rhythm and content grid
   One visual rhythm for every major landing section.
   ========================================================= */
:root {
  --site-section-y: 92px;
  --site-section-y-tight: 76px;
  --site-header-gap: 48px;
  --site-title-gap: 20px;
  --site-card-radius: 18px;
  --site-card-gap: 16px;
}

/* Major sections: same vertical rhythm */
.q3b-why,
.k7m-services,
.b9p-process,
.x4q-safety,
.m4t-trust,
.c2c-cases,
.fire-gallery,
.n7k-cta {
  box-sizing: border-box !important;
}

.q3b-why,
.k7m-services,
.b9p-process,
.x4q-safety,
.m4t-trust,
.c2c-cases {
  padding-top: var(--site-section-y) !important;
  padding-bottom: var(--site-section-y) !important;
}

/* Every header occupies the same horizontal grid and starts at x=0. */
.q3b-why__header,
.k7m-services__header,
.b9p-process__header,
.x4q-safety__header,
.m4t-trust__header,
.c2c-cases__header,
.fire-gallery__header,
.n7k-cta__header {
  width: 100% !important;
  max-width: 820px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

/* Same eyebrow-to-title rhythm. */
.q3b-why__eyebrow,
.k7m-services__eyebrow,
.b9p-process__eyebrow,
.x4q-safety__eyebrow,
.m4t-trust__eyebrow,
.c2c-cases__eyebrow,
.fire-gallery__eyebrow,
.n7k-cta__eyebrow {
  margin-bottom: 16px !important;
}

/* Same title-to-lead rhythm. */
.q3b-why__title,
.k7m-services__title,
.b9p-process__title,
.x4q-safety__title,
.m4t-trust__title,
.c2c-cases__title,
.fire-gallery__title,
.n7k-cta__title {
  margin-top: 0 !important;
  margin-bottom: var(--site-title-gap) !important;
}

.q3b-why__lead,
.k7m-services__lead,
.b9p-process__lead,
.x4q-safety__lead,
.m4t-trust__lead,
.c2c-cases__lead,
.fire-gallery__description,
.n7k-cta__lead {
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Header-to-content gap: identical wherever a card/grid follows. */
.q3b-why__header,
.k7m-services__header,
.b9p-process__header,
.x4q-safety__header,
.m4t-trust__header,
.c2c-cases__header {
  margin-bottom: var(--site-header-gap) !important;
}

/* Gallery uses its own intro wrapper, but the same rhythm. */
.fire-gallery__intro {
  width: min(var(--site-container), calc(100% - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 40px !important;
  padding: 0 !important;
}

/* Cards share the same geometry. */
.q3b-why__item,
.k7m-services__item,
.x4q-safety__item,
.m4t-trust__card,
.c2c-case {
  border-radius: var(--site-card-radius) !important;
}

.q3b-why__grid,
.k7m-services__grid,
.m4t-trust__grid,
.c2c-cases__grid {
  gap: var(--site-card-gap) !important;
}

/* Consistent card title/text rhythm. */
.q3b-why__item-title,
.k7m-services__item-title,
.x4q-safety__item-title,
.m4t-trust__card-title,
.c2c-case__title {
  margin-top: 0 !important;
}

/* Process is a visual stepper rather than cards: keep its own geometry,
   but align its content with the same page grid. */
.b9p-process__steps {
  margin-top: 0 !important;
}

/* CTA remains intentionally distinctive, but uses the same outer rhythm. */
.n7k-cta {
  padding-top: var(--site-section-y) !important;
  padding-bottom: var(--site-section-y) !important;
}

@media (max-width: 980px) {
  :root {
    --site-section-y: 76px;
    --site-header-gap: 40px;
  }
}

@media (max-width: 640px) {
  :root {
    --site-section-y: 60px;
    --site-header-gap: 32px;
    --site-title-gap: 16px;
  }

  .q3b-why,
  .k7m-services,
  .b9p-process,
  .x4q-safety,
  .m4t-trust,
  .c2c-cases,
  .n7k-cta {
    padding-top: var(--site-section-y) !important;
    padding-bottom: var(--site-section-y) !important;
  }

  .fire-gallery {
    padding-top: var(--site-section-y) !important;
  }

  .fire-gallery__intro {
    width: calc(100% - 32px) !important;
    margin-bottom: 32px !important;
  }
}