/* ==========================================================================
   BID Consultoria — Serviço BPO
   Pixel-perfect implementation of Figma "Serviço BPO" (1440px design)
   ========================================================================== */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-base);
  color: var(--secondary-pure);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

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

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

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

ul { list-style: none; }

/* ---------- Design tokens ---------- */
:root {
  /* Fonts */
  --font-base: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Brand colors */
  --primary-medium: #051E7A;   /* dark blue — cards, footer */
  --primary-pure:   #155CF7;   /* bright blue — buttons, accents */
  --secondary-pure: #141414;   /* near-black — headings */

  /* Neutrals (Gray scale) */
  --gray-01: #F2F4F7;
  --gray-02: #EAECF0;
  --gray-03: #D0D5DD;
  --gray-06: #475467;          /* body text */

  /* Surfaces */
  --bg-page:  #F7F7F7;
  --bg-white: #FFFFFF;
  --bg-gray:  #F7F7F7;

  /* Overlays */
  --white-15: rgba(255, 255, 255, 0.15);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-80: rgba(255, 255, 255, 0.8);

  /* Layout */
  --page-max: 1440px;
  --gutter: 80px;
  /* Inner content is capped at 1280px (the design's content frame: 1440 − 2×80).
     Below 1440 viewport → 80px gutters; above → gutters grow, content stays 1280,
     while each section's background remains full-bleed. */
  --content-w: 1280px;
  --edge-x: max(var(--gutter), calc((100% - var(--content-w)) / 2));
  --radius-lg: 24px;
  --radius-md: 12px;
}

/* ---------- Layout primitives ---------- */
.page {
  width: 100%;
  background: var(--bg-page);
  overflow: hidden;
}

/* ---------- Shared button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 28px;
  border-radius: var(--radius-md);
  background: var(--primary-pure);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.btn:hover { background: #0d4ad0; }
.btn:active { transform: translateY(1px); }

.btn--compact { padding: 16px 24px; }
.btn--dark { background: #04175E; }
.btn--dark:hover { background: #021048; }

.btn__icon { width: 24px; height: 24px; flex: none; }

/* ---------- Typography helpers ---------- */
.h2 { font-size: 32px; font-weight: 500; line-height: 1.3; color: var(--secondary-pure); }
.h3 { font-size: 24px; font-weight: 500; line-height: 1.4; color: var(--secondary-pure); }
.p16 { font-size: 16px; font-weight: 400; line-height: 1.5; }
.p18 { font-size: 18px; font-weight: 400; line-height: 1.5; }
.medium { font-weight: 500; }
.muted { color: var(--gray-06); }
.dark { color: var(--secondary-pure); }
.white { color: #FFFFFF; }
.center { text-align: center; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 6.4px; }
.logo__mark { flex: none; }
.logo__text {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  line-height: 1;
}
.logo__text strong { font-weight: 700; letter-spacing: -0.02em; }
.logo--dark .logo__text { color: #1D1D1D; }

/* ---------- Nav (shared header nav) ---------- */
.nav {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-left: 40px;
  border-left: 1px solid var(--white-30);
}
.nav__links { display: flex; align-items: center; gap: 40px; }
.nav__links a {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #FFFFFF;
  transition: opacity 0.15s ease;
}
.nav__links a:hover { opacity: 0.75; }
.nav__links a.is-active { font-weight: 600; }
.nav--dark { border-left-color: var(--gray-03); }
.nav--dark .nav__links a { color: var(--gray-06); }
.nav--dark .nav__links a.is-active { color: var(--secondary-pure); }

/* ---------- Mobile nav (hamburger) — hidden on desktop ---------- */
.nav-toggle {
  display: none;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle img { width: 40px; height: 40px; display: block; }
.mobile-menu { display: none; }

/* ---------- Scroll header (sticky) ---------- */
.header-scroll {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--edge-x);
  background: var(--white-80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
  transition: transform 0.3s ease;
}
.header-scroll.is-visible { transform: translateY(0); }
.header-scroll .btn--compact { padding: 12px 24px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 764px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-image:
    linear-gradient(225deg, rgba(0,0,0,0.5) 5%, rgba(0,0,0,0) 48%, rgba(0,0,0,1) 98%),
    linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
    url(../images/hero-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.header-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 0 var(--edge-x);
  border-bottom: 1px solid var(--white-30);
}
.hero__content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 var(--edge-x) 100px;
}
.hero__text { display: flex; flex-direction: column; gap: 24px; }
.hero__title {
  max-width: 712px;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.2;
  color: #FFFFFF;
}
.hero__subtitle {
  max-width: 565px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-01);
}
.hero__cta { display: flex; align-items: flex-end; padding-bottom: 4px; }

/* ==========================================================================
   CRESCIMENTO EXIGE ESTRUTURA
   ========================================================================== */
.cres {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 120px var(--edge-x);
  background: var(--bg-white);
}
.cres__text { display: flex; flex-direction: column; gap: 32px; width: 577px; }
.cres__heading { display: flex; flex-direction: column; gap: 32px; }
.cres__lead { max-width: 443px; }
.cres__closing { max-width: 430px; }
.cres__listblock { display: flex; flex-direction: column; gap: 24px; }
.pill-list { display: flex; flex-direction: column; gap: 16px; }
.pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 32px;
  background: var(--bg-page);
  border-radius: 8px;
}
.pill span { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--gray-06); }
.pill__ic { width: 24px; height: 24px; flex: none; }
.cres__image img { width: 577px; height: auto; border-radius: 24px; }

/* ==========================================================================
   O QUE É BPO
   ========================================================================== */
.bpo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 120px var(--edge-x);
  background: var(--bg-page);
}
.bpo__image img { width: 577px; height: 628px; border-radius: 24px; }
.bpo__text { display: flex; flex-direction: column; gap: 32px; width: 577px; }
.bpo__col { display: flex; flex-direction: column; gap: 32px; }
.bpo__checkblock { display: flex; flex-direction: column; gap: 24px; }
.bpo__text > .btn { align-self: flex-start; }

/* ---------- Check lists ---------- */
.check-list { display: flex; flex-direction: column; gap: 16px; }
.check-list li { display: flex; align-items: center; gap: 12px; }
.check-ic { width: 24px; height: 24px; flex: none; }
.check-list--dark li { align-items: flex-start; gap: 8px; }
.check-list--dark span { color: var(--gray-02); }

/* ==========================================================================
   PARA QUEM É INDICADO
   ========================================================================== */
.paraquem-wrap { padding: 80px var(--edge-x) 0; background: var(--bg-white); }
.paraquem {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 80px;
  background: var(--primary-medium);
  border-radius: 24px;
  overflow: hidden;
  min-height: 626px;
}
.paraquem__text { display: flex; flex-direction: column; gap: 32px; width: 577px; position: relative; z-index: 1; }
.paraquem__listblock { display: flex; flex-direction: column; gap: 24px; }
.paraquem__illus { position: absolute; left: 703px; top: 80px; width: 496px; height: 466px; }

/* ==========================================================================
   COMO FUNCIONA
   ========================================================================== */
.como {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 100px var(--edge-x) 120px;
  background: var(--bg-white);
}
.como__head { display: flex; flex-direction: column; gap: 32px; width: 454px; }
.como__grid { display: flex; flex-wrap: wrap; gap: 32px; width: 100%; }
.como-card {
  flex: 1 1 calc(50% - 16px);
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px;
  background: var(--bg-page);
  border-radius: 24px;
}
.como-card__title { display: flex; align-items: center; gap: 8px; }
.como-card__ic { width: 24px; height: 24px; flex: none; }

/* ==========================================================================
   ESCOPO BPO
   ========================================================================== */
.escopo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 0 var(--edge-x) 120px;
  background: var(--bg-white);
}
.escopo__head {
  width: 100%;
  padding-top: 100px;
  border-top: 1px solid var(--gray-02);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.escopo__listblock { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.escopo__grid { display: flex; flex-wrap: wrap; gap: 16px; width: 100%; }
.scope-card {
  width: 308px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
  background: var(--bg-page);
  border-radius: 8px;
  text-align: center;
}
.scope-card__ic { width: 24px; height: 24px; flex: none; }

/* ==========================================================================
   DIFERENCIAIS
   ========================================================================== */
.dif {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 0 var(--edge-x) 120px;
  background: var(--bg-white);
}
.dif__head {
  width: 100%;
  padding-top: 100px;
  border-top: 1px solid var(--gray-01);
  display: flex;
  align-items: center;
  gap: 80px;
}
.dif__title { width: 568px; flex: none; }
.dif__intro { flex: 1; }
.dif__grid { display: flex; gap: 32px; width: 100%; }
.dif-card { flex: 1; display: flex; flex-direction: column; }
.dif-card__num {
  padding: 32px 32px 0;
  border-bottom: 1px solid rgba(21, 92, 247, 0.3);
  overflow: hidden;
}
.dif-card__num span {
  display: block;
  font-size: 180px;
  font-weight: 500;
  line-height: 0.86;
  color: var(--primary-pure);
  opacity: 0.3;
  letter-spacing: -0.02em;
}
.dif-card__body { display: flex; flex-direction: column; gap: 32px; padding: 32px; }
.dif-card__ic { width: 32px; height: 32px; flex: none; }

/* ==========================================================================
   RESULTADOS
   ========================================================================== */
.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 120px var(--edge-x);
  background: var(--bg-page);
}
.result__text { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }
.result__inner { display: flex; flex-direction: column; align-items: center; gap: 56px; width: 100%; }
.result__lead { width: 511px; max-width: 100%; }
.result__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 100%; }
.result-card {
  width: 308px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
  background: var(--bg-white);
  border-radius: 8px;
  text-align: center;
}
.result-card__ic { width: 24px; height: 24px; flex: none; }

/* ==========================================================================
   PLANOS E PREÇOS
   ========================================================================== */
.planos {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 120px var(--edge-x) 0;
  background: var(--bg-white);
}
.planos__grid { display: flex; gap: 32px; align-items: stretch; }
.plan {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 32px;
  background: var(--bg-page);
  border-radius: 24px;
}
.plan--premium { justify-content: flex-start; }
.plan--dark { background: var(--primary-medium); }
.plan__info { display: flex; flex-direction: column; gap: 32px; }
.plan__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--gray-03);
}
.plan--dark .plan__header { border-bottom-color: var(--white-15); }
.plan__namecol { display: flex; flex-direction: column; gap: 16px; }
.plan__icon { width: 24px; height: 24px; flex: none; }
.plan__list { display: flex; flex-direction: column; gap: 16px; }
.plan__list li { display: flex; align-items: center; gap: 12px; }
.plan__price {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--gray-03);
}
.plan--dark .plan__price { border-top-color: var(--white-15); }
.plan__priceline { display: flex; align-items: baseline; gap: 16px; }
.plan__amount { font-size: 40px; font-weight: 500; line-height: 1.2; color: var(--secondary-pure); }
.plan__amount--light { color: var(--gray-01); }
.plan__desc-light { color: var(--gray-02); }
.plan__feat-light { color: var(--gray-02); }
.plan__price-light { color: var(--gray-01); }

/* ==========================================================================
   ESTRUTURE SEU FINANCEIRO
   ========================================================================== */
.estruture-wrap { padding: 80px var(--edge-x); background: var(--bg-white); }
.estruture {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 80px;
  background: var(--primary-medium);
  border-radius: 24px;
  overflow: hidden;
}
.estruture__title { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 413px; position: relative; z-index: 1; }
.estruture__text { width: 522px; position: relative; z-index: 1; }
.estruture__illus { position: absolute; left: 215px; top: 158px; width: 409px; height: 384px; z-index: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 100px var(--edge-x) 48px;
  background: var(--primary-medium);
}
.footer a { color: #FFFFFF; }
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--white-20);
}
.footer__logo { gap: 9.18px; }
.footer__socials {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 40px;
  border-left: 1px solid var(--white-30);
}
.social-chip {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #FFFFFF;
  transition: background-color 0.15s ease;
}
.social-chip:hover { background: rgba(255, 255, 255, 0.18); }
.footer__middle { display: flex; justify-content: space-between; gap: 40px; }
.footer__cta { display: flex; flex-direction: column; gap: 32px; }
.footer__headline { width: 334px; }
.footer__ctarow { display: flex; align-items: center; gap: 16px; }
.footer__avatar { position: relative; width: 60px; height: 60px; flex: none; }
.footer__avatar img { width: 60px; height: 60px; border-radius: 999px; object-fit: cover; }
.footer__dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #71F585;
  border: 2px solid var(--primary-medium);
}
.footer__nav { display: flex; gap: 80px; }
.footer__col { display: flex; flex-direction: column; gap: 16px; }
.footer__coltitle { font-size: 16px; font-weight: 600; line-height: 1.5; color: #FFFFFF; }
.footer__col a { font-size: 16px; font-weight: 400; line-height: 1.5; color: #FFFFFF; transition: opacity 0.15s ease; }
.footer__col a:hover { opacity: 0.8; }
.footer__contact { display: flex; align-items: center; gap: 8px; }
.footer__contact img { width: 20px; height: 20px; flex: none; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 48px;
  border-top: 1px solid var(--white-20);
}
.footer__copy { font-size: 14px; font-weight: 400; line-height: 1.4; color: #FFFFFF; }
.footer__legal { display: flex; gap: 32px; }
.footer__legal a { font-size: 14px; font-weight: 400; line-height: 1.4; }
.footer__credit { font-size: 14px; font-weight: 400; line-height: 1.4; color: #FFFFFF; text-align: right; }
.footer__credit strong { font-weight: 600; }

/* ==========================================================================
   RESPONSIVE (graceful stacking below the 1440 design width)
   ========================================================================== */
/* ---------- Tablet (769–1120px): stack 2-column sections ---------- */
@media (max-width: 1120px) {
  :root { --gutter: 40px; }
  .cres, .bpo { flex-direction: column; gap: 56px; }
  .bpo { flex-direction: column-reverse; }
  .cres__text, .bpo__text, .paraquem__text { width: 100%; }
  .dif__head { flex-direction: column; align-items: flex-start; gap: 32px; }
  .dif__title { width: auto; }
  .dif__grid { flex-wrap: wrap; }
  .dif-card { flex: 1 1 calc(50% - 16px); }
  .footer__middle { flex-direction: column; gap: 56px; }
  .paraquem__illus, .estruture__illus { display: none; }
  .paraquem { min-height: 0; }
  .estruture { flex-direction: column; align-items: flex-start; }
  .estruture__title, .estruture__text { width: 100%; }
}

/* ==========================================================================
   MOBILE (≤768px) — pixel implementation of the 375px Figma frame
   ========================================================================== */
@media (max-width: 768px) {
  :root { --gutter: 20px; }

  /* ---- Header: hamburger replaces nav; sticky scroll header disabled ---- */
  .header-scroll { display: none; }
  .header-hero .nav { display: none; }
  .nav-toggle { display: block; }
  .mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    padding: 16px 20px 24px;
    background: rgba(5, 30, 122, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--white-20);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 90;
  }
  .mobile-menu.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .mobile-menu a { color: #FFFFFF; font-size: 16px; line-height: 1.5; padding: 10px 0; }
  .mobile-menu a.is-active { font-weight: 600; }
  .mobile-menu .btn { width: 100%; margin-top: 8px; }

  /* ---- Typography ---- */
  .h2 { font-size: 24px; line-height: 1.4; }
  .hero__title { font-size: 35px; }
  .hero__subtitle { font-size: 16px; }

  /* ---- Section vertical padding (horizontal = 20px via --gutter) ---- */
  .cres, .bpo, .como, .result, .estruture-wrap { padding-top: 56px; padding-bottom: 56px; }
  .paraquem-wrap { padding-top: 56px; padding-bottom: 0; }
  .planos { padding-top: 56px; padding-bottom: 0; }
  .escopo, .dif { padding-top: 0; padding-bottom: 56px; }
  .footer { padding-top: 56px; padding-bottom: 48px; }

  /* ---- Hero ---- */
  .hero {
    background-image:
      linear-gradient(180deg, rgba(0,0,0,0) 39%, rgba(0,0,0,1) 85%),
      linear-gradient(225deg, rgba(0,0,0,0.5) 5%, rgba(0,0,0,0) 48%, rgba(0,0,0,1) 98%),
      linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
      url(../images/hero-bg.jpg);
  }
  .hero__content { flex-direction: column; align-items: stretch; gap: 40px; padding-bottom: 56px; }
  .hero__text { gap: 24px; }
  .hero__cta { align-items: stretch; padding-bottom: 0; }
  .hero__cta .btn { width: 100%; }

  /* ---- Full-width CTA buttons ---- */
  .bpo__text > .btn,
  .como > .btn,
  .escopo > .btn,
  .dif > .btn,
  .result > .btn,
  .estruture__title .btn { width: 100%; align-self: stretch; }

  /* ---- Crescimento / O que é BPO: stack, full-width 364px image ---- */
  .cres { flex-direction: column; align-items: stretch; gap: 32px; }
  .bpo { flex-direction: column-reverse; align-items: stretch; gap: 32px; }
  .cres__text, .bpo__text { width: 100%; gap: 32px; }
  .cres__image img,
  .bpo__image img { width: 100%; height: 364.61px; object-fit: cover; }

  /* ---- Para quem é indicado: dark card padding 32, no illustration ---- */
  .paraquem { padding: 32px; min-height: 0; }
  .paraquem__text { width: 100%; }

  /* ---- Como funciona: single column, card title 20px ---- */
  .como__head { width: 100%; }
  .como__grid { flex-direction: column; gap: 16px; }
  .como-card { flex: 1 1 100%; gap: 24px; }
  .como-card__title .h3 { font-size: 20px; }

  /* ---- Escopo: full-width stacked cards ---- */
  .escopo__grid { flex-direction: column; }
  .scope-card { width: 100%; }

  /* ---- Diferenciais: stack, card body becomes a row (icon + label) ---- */
  .dif__head { gap: 32px; }
  .dif__grid { flex-direction: column; gap: 16px; }
  .dif-card { flex: 1 1 100%; }
  .dif-card__num { padding: 24px; }
  .dif-card__body { flex-direction: row; align-items: center; gap: 8px; padding: 24px; }

  /* ---- Resultados: full-width stacked cards ---- */
  .result__lead { width: auto; }
  .result-card { width: 100%; }

  /* ---- Planos: single column ---- */
  .planos__grid { flex-direction: column; }
  .plan { width: 100%; }

  /* ---- Estruture: dark card padding 32, stacked ---- */
  .estruture { flex-direction: column; align-items: stretch; padding: 32px; gap: 32px; }
  .estruture__title { align-items: stretch; width: 100%; }
  .estruture__text { width: 100%; }

  /* ---- Footer: everything stacks ---- */
  .footer__top { flex-direction: column; align-items: flex-start; gap: 32px; padding-bottom: 40px; }
  .footer__socials { padding-left: 0; border-left: none; }
  .footer__middle { flex-direction: column; gap: 56px; }
  .footer__headline { width: auto; }
  .footer__ctarow { gap: 8px; }
  .footer__ctarow .btn { flex: 1; padding: 18px 20px; font-size: 14px; }
  .footer__nav { flex-wrap: wrap; gap: 48px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 40px; }
  .footer__legal { flex-direction: column; gap: 16px; }
  .footer__credit { text-align: left; width: auto; }
}