/* ==========================================================================
   Bandeja landing - dark cinematic, single lime accent.
   Radius system: interactive = pill, containers = 24px. One theme: dark.
   ========================================================================== */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/outfit-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/vazirmatn-var.woff2') format('woff2');
}

:root {
  --bg: #07090c;
  --bg-raised: #0c1014;
  --line: rgb(255 255 255 / 0.09);
  --text: #eef2f4;
  --text-muted: #9aa6ad;
  --accent: #c8f04b;
  --accent-ink: #131803;
  --radius-card: 24px;
  --nav-h: 68px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1200px;
}

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

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[dir="rtl"] body {
  font-family: 'Vazirmatn', 'Outfit', Tahoma, sans-serif;
}

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

h1, h2, h3, p {
  margin: 0;
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -48px;
  inset-inline-start: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  font-weight: 600;
}

.skip-link:focus {
  top: 12px;
}

/* Readable by a screen reader, invisible on screen. Used for labels that the
   layout communicates visually but the markup otherwise leaves unnamed. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.container--narrow {
  max-width: 820px;
}

.container--reading {
  max-width: 880px;
}

/* ----------------------------------------------------------------- icons */

.icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

.icon--arrow  { --icon: url('../assets/icons/arrow-up-right.svg'); }
.icon--wallet { --icon: url('../assets/icons/wallet.svg'); }
.icon--globe  { --icon: url('../assets/icons/globe.svg'); }
.icon--mobile { --icon: url('../assets/icons/device-mobile.svg'); }
.icon--share  { --icon: url('../assets/icons/share-network.svg'); }
.icon--search { --icon: url('../assets/icons/magnifying-glass.svg'); }
.icon--x      { --icon: url('../assets/icons/x.svg'); }
.icon--caret  { --icon: url('../assets/icons/caret-down.svg'); }
.icon--chat   { --icon: url('../assets/icons/chat-circle.svg'); }
.icon--bag    { --icon: url('../assets/icons/bag.svg'); }
.icon--funnel { --icon: url('../assets/icons/funnel.svg'); }
.icon--trash  { --icon: url('../assets/icons/trash.svg'); }
.icon--check  { --icon: url('../assets/icons/check.svg'); }
.icon--plus   { --icon: url('../assets/icons/plus.svg'); }
.icon--minus  { --icon: url('../assets/icons/minus.svg'); }
.icon--shield { --icon: url('../assets/icons/shield-check.svg'); }
.icon--package    { --icon: url('../assets/icons/package.svg'); }
.icon--arrow-left { --icon: url('../assets/icons/arrow-left.svg'); }
.icon--racket     { --icon: url('../assets/icons/racket.svg'); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out);
  will-change: transform;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--primary:hover {
  background: #d6f86d;
}

.btn--primary .icon--arrow {
  transition: transform 0.25s var(--ease-out);
}

.btn--primary:hover .icon--arrow {
  transform: translate(2px, -2px);
}

html[dir="rtl"] .btn--primary:hover .icon--arrow {
  transform: translate(-2px, -2px) scaleX(-1);
}

html[dir="rtl"] .icon--arrow {
  transform: scaleX(-1);
}

.btn--ghost {
  border: 1px solid rgb(255 255 255 / 0.28);
  color: var(--text);
  background: rgb(10 13 16 / 0.45);
}

.btn--ghost:hover {
  border-color: rgb(255 255 255 / 0.55);
}

.btn--sm { padding: 9px 18px; font-size: 0.92rem; }
.btn--lg { padding: 15px 28px; font-size: 1.05rem; }

/* -------------------------------------------------------------------- nav */

#top-sentinel {
  position: absolute;
  top: 0;
  height: 90px;
  width: 1px;
}

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
              backdrop-filter 0.35s var(--ease-out);
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgb(7 9 12 / 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}

.nav__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.brand__mark {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
}

.nav__links {
  display: flex;
  gap: 26px;
  margin-inline-start: auto;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* ---- language switch ---- */

.lang-switch {
  display: flex;
  flex-shrink: 0;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(7 9 12 / 0.35);
}

.lang-switch__btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 6px 11px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.lang-switch__btn:hover {
  color: var(--text);
}

.lang-switch__btn.is-active {
  background: rgb(255 255 255 / 0.1);
  color: var(--text);
}

html[dir="rtl"] .lang-switch__btn[data-lang="fa"] {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
}

.nav__links a {
  transition: color 0.2s ease;
}

.nav__links a:hover {
  color: var(--text);
}

.nav__links a.is-current {
  color: var(--text);
  font-weight: 600;
}

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  transform-origin: 70% 40%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(7 9 12 / 0.94) 0%, rgb(7 9 12 / 0.25) 45%, rgb(7 9 12 / 0.35) 100%),
    linear-gradient(100deg, rgb(7 9 12 / 0.82) 8%, transparent 55%);
}

html[dir="rtl"] .hero__scrim {
  background:
    linear-gradient(to top, rgb(7 9 12 / 0.94) 0%, rgb(7 9 12 / 0.25) 45%, rgb(7 9 12 / 0.35) 100%),
    linear-gradient(-100deg, rgb(7 9 12 / 0.82) 8%, transparent 55%);
}

html[dir="rtl"] .hero__media img {
  object-position: 32% center;
  transform-origin: 30% 40%;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 24px clamp(56px, 10vh, 110px);
}

.hero__title {
  font-size: clamp(2.6rem, 7.2vw, 5.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  max-width: 12ch;
}

html[dir="rtl"] .hero__title {
  letter-spacing: 0;
  max-width: 14ch;
  line-height: 1.15;
}

.hero__title em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
}

.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.hero__line > span {
  display: inline-block;
}

.hero__sub {
  margin-top: 20px;
  max-width: 44ch;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgb(238 242 244 / 0.85);
}

.hero__cta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* hero entrance + slow zoom (storytelling: settle into the court) */
@media (prefers-reduced-motion: no-preference) {
  .hero__media img {
    animation: hero-zoom 16s var(--ease-out) forwards;
  }

  .hero__line > span {
    transform: translateY(110%);
    animation: rise 0.9s var(--ease-out) forwards;
  }

  .hero__line:nth-child(2) > span { animation-delay: 0.12s; }

  .hero__sub,
  .hero__cta {
    opacity: 0;
    transform: translateY(18px);
    animation: fade-up 0.8s var(--ease-out) forwards;
  }

  .hero__sub { animation-delay: 0.35s; }
  .hero__cta { animation-delay: 0.5s; }
}

@keyframes hero-zoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

@keyframes rise {
  to { transform: translateY(0); }
}

@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------- manifesto */

.manifesto {
  padding: clamp(110px, 16vh, 180px) 0;
}

.manifesto__title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

/* word-stagger reveal (set up by JS, gated by reduced-motion there) */
.manifesto__title .w {
  display: inline-block;
  opacity: 0.18;
  transform: translateY(0.25em);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--i) * 55ms);
}

.manifesto__title.is-visible .w {
  opacity: 1;
  transform: translateY(0);
}

.manifesto__body {
  margin-top: 26px;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--text-muted);
  max-width: 56ch;
}

/* ----------------------------------------------------------------- shared */

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

html[dir="rtl"] .eyebrow {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.88rem;
}

.section-title {
  margin-top: 14px;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* scroll reveal (IO adds .is-visible; .js-anim gates so no-JS users see content) */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.js-anim .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal,
  .manifesto__title .w {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------------ bento */

.features {
  padding-bottom: clamp(90px, 12vh, 150px);
}

.bento {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 320px;
  gap: 14px;
}

.bento__cell {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  display: flex;
  align-items: flex-end;
}

.bento__cell--wide {
  grid-column: span 2;
}

.bento__cell--accent {
  grid-column: span 2;
  background:
    radial-gradient(120% 160% at 85% -20%, rgb(200 240 75 / 0.32), transparent 55%),
    linear-gradient(150deg, #131a0a 0%, var(--bg-raised) 60%);
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 30px;
}

.bento__cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.bento__cell:hover img {
  transform: scale(1.05);
}

.bento__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(7 9 12 / 0.92) 0%, rgb(7 9 12 / 0.25) 48%, transparent 75%);
}

.bento__text {
  position: relative;
  padding: 26px 28px;
}

.bento__text h3 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.bento__text p {
  margin-top: 8px;
  color: rgb(238 242 244 / 0.78);
  font-size: 0.98rem;
  max-width: 46ch;
}

.bento__glyph {
  width: 40px;
  height: 40px;
  margin-inline-start: 28px;
  color: var(--accent);
}

/* pointer spotlight (set via --mx/--my from JS, fine pointers only) */
@media (hover: hover) and (pointer: fine) {
  .tilt::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
      rgb(255 255 255 / 0.08), transparent 60%);
    pointer-events: none;
  }

  .tilt:hover::after {
    opacity: 1;
  }
}

/* -------------------------------------------------------------- statement */

.statement {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.statement__media {
  position: absolute;
  inset: 0;
}

.statement__media img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center 30%;
}

/* scroll-driven parallax where supported; static elsewhere */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .statement__media img {
      animation: parallax linear forwards;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

@keyframes parallax {
  from { transform: translateY(-7%); }
  to   { transform: translateY(7%); }
}

.statement__content {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding: 120px 24px;
}

.statement__content h2 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 14ch;
  text-shadow: 0 2px 30px rgb(7 9 12 / 0.6);
}

.statement__content p {
  margin-top: 20px;
  max-width: 46ch;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgb(238 242 244 / 0.88);
  text-shadow: 0 1px 16px rgb(7 9 12 / 0.7);
}

/* ---------------------------------------------------------------- get-app */

.get-app {
  padding: clamp(90px, 12vh, 150px) 0;
}

.get-app__grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
}

.get-app__stack {
  display: grid;
  gap: 14px;
}

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  transition: border-color 0.3s ease, transform 0.3s var(--ease-out);
}

a.panel:hover {
  border-color: rgb(200 240 75 / 0.45);
  transform: translateY(-3px);
}

.panel--web {
  justify-content: space-between;
  min-height: 360px;
  background:
    radial-gradient(110% 140% at 12% -10%, rgb(200 240 75 / 0.16), transparent 50%),
    var(--bg-raised);
}

.panel__glyph {
  width: 34px;
  height: 34px;
  color: var(--accent);
}

.panel__body h3 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.panel__body p {
  margin-top: 8px;
  color: var(--text-muted);
  max-width: 44ch;
}

.panel__body strong {
  color: var(--text);
  font-weight: 600;
}

.panel__action {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 700;
  color: var(--accent);
}

.panel__action .icon--arrow {
  transition: transform 0.25s var(--ease-out);
}

a.panel:hover .panel__action .icon--arrow {
  transform: translate(2px, -2px);
}

html[dir="rtl"] a.panel:hover .panel__action .icon--arrow {
  transform: translate(-2px, -2px) scaleX(-1);
}

html[dir="rtl"] .bento__cell--accent {
  background:
    radial-gradient(120% 160% at 15% -20%, rgb(200 240 75 / 0.32), transparent 55%),
    linear-gradient(210deg, #131a0a 0%, var(--bg-raised) 60%);
}

html[dir="rtl"] .panel--web {
  background:
    radial-gradient(110% 140% at 88% -10%, rgb(200 240 75 / 0.16), transparent 50%),
    var(--bg-raised);
}

html[dir="rtl"] .section-title,
html[dir="rtl"] .manifesto__title,
html[dir="rtl"] .statement__content h2 {
  letter-spacing: 0;
}

/* ----------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 40px;
}

/* Brand block first and widest, then three equal text columns, then the seal.
   auto-fit rather than fixed columns so the footer reflows on its own between
   the 1200px container and a phone without a breakpoint per column. */
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) auto;
  gap: 40px 32px;
  align-items: start;
}

.footer__col {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.footer__line {
  color: var(--text-muted);
  max-width: 34ch;
}

.footer__h {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

/* Persian does not have letter case, and tracking out a Vazirmatn string
   pulls the joined letterforms apart. */
html[dir="rtl"] .footer__h {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
}

.footer__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.footer__list a {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.footer__list a:hover {
  color: var(--text);
}

.footer__note {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* The address and the email are the two things a visitor copies out of a
   footer, so keep them selectable and comfortable to hit. */
.footer__contact {
  display: inline-block;
  padding-block: 2px;
}

/* ---- trust seals ----
   The Enamad logo is fetched live from trustseal.enamad.ir, which only
   resolves from inside Iran. So it has two states and both have to look
   deliberate: loaded, and not there at all.

   The light tile is therefore painted only once the image has actually
   arrived, via .is-loaded from main.js. An earlier version put the background
   and a fixed 104px box on this wrapper, which meant every visit that could
   not reach Enamad — every visit from outside Iran, and any outage of theirs —
   got a blank white rectangle sitting in the footer. An empty box that looks
   broken is worse than no box.

   Nothing here reserves space: a wrong-sized placeholder that then jumps is
   more distracting than the small shift when the logo lands, and the seal is
   at the very bottom of the page where nothing reflows under it. */
.footer__col--seals {
  justify-items: start;
}

.footer__seal {
  display: grid;
  justify-items: start;
}

.footer__seal img {
  display: block;
  max-width: 130px;
  height: auto;
}

/* The tile, applied to the image itself so it cannot paint without one. */
.footer__seal.is-loaded img {
  padding: 8px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--line);
}

/* Enamad unreachable: drop the heading with it, rather than leave a
   "نمادها" label standing over an empty cell. Set by main.js only on a
   confirmed error, so the default remains "show the seal". */
.footer__col--seals.is-unavailable {
  display: none;
}

.footer__bottom {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
}

.footer__copy {
  color: rgb(154 166 173 / 0.6);
  font-size: 0.85rem;
}

/* ----------------------------------------------------------- mid-width */

@media (max-width: 1024px) {
  .nav__inner {
    gap: 16px;
  }

  .nav__links {
    gap: 18px;
    font-size: 0.88rem;
  }
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 900px) {
  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: 300px;
  }

  .bento__cell--wide,
  .bento__cell--accent {
    grid-column: span 1;
  }

  .get-app__grid {
    grid-template-columns: 1fr;
  }

  .panel--web {
    min-height: 0;
  }

  /* Brand across the top, then the three text columns and the seal share a
     row of two. Five columns of Persian body text at tablet width leaves
     every column too narrow to read. */
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 28px;
  }

  .footer__col--brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .nav__links {
    display: none;
  }

  .nav__inner {
    gap: 12px;
  }

  .lang-switch__btn {
    padding: 6px 9px;
    font-size: 0.78rem;
  }

  .nav__cta .icon--arrow {
    display: none;
  }

  .nav__cta {
    padding-inline: 14px;
    font-size: 0.82rem;
  }

  .hero__content {
    padding-bottom: 64px;
  }

  .hero__cta .btn {
    width: 100%;
    justify-content: center;
  }

  .statement {
    min-height: 72vh;
  }

  .statement__media img {
    object-position: 78% 30%;
  }

  html[dir="rtl"] .statement__media img {
    object-position: 22% 30%;
  }

  /* One column on a phone. The seal is centred on its own row rather than
     left in a half-width cell next to nothing. */
  .footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .footer__bottom {
    justify-content: flex-start;
  }
}