.contact {
  border-radius: var(--radius) var(--radius) 0 0;
  background-color: var(--second-surface);
  grid-column: 8 / 13;

  @media (width >= 64rem) {
    grid-column: 9 / 13;
  }

  @media (width < 64rem) {
    grid-column: 1 / 2;
    border-radius: 0;
    margin-inline: calc(-1 * var(--padding-section-inline));
    padding-inline: var(--padding-section-inline);
  }
  @media (width < 48rem) {
    margin-inline: calc(-1 * var(--padding-section-inline) / 2);
    padding-inline: calc(var(--padding-section-inline) / 2);
  }
  @media (width < 25rem) {
    margin-inline: -1rem;
    padding-inline: 1rem;
  }

  /* Stack phone icon and title vertically on small screens */
  & > div[data-layout="row"] {
    @media (width < 37.5rem) {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }
}

ul[data-button="same-size"] {
  @media (width < 64rem) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-md);
  }

  @media (width < 37.5rem) {
    grid-template-columns: 1fr;
  }

  button, [role="button"], [type="submit"] {
    width: 80%;
    min-width: 20rem;
    justify-content: center;
    align-items: center;
    text-align: center;

    @media (width < 64rem) {
      width: 100%;
    }
  }
}

/* Services section hover effect */
.service-card-hover {
  h4 {
    font-weight: bold !important;
    transition: all 0.3s ease;
  }

  span[data-icon] {
    transform: scale(1.15);
    transition: all 0.3s ease;
  }
}

/* Smooth transitions for service cards */
div[data-layout="two-col"] > div[data-layout="col"] {
  h4, span[data-icon] {
    transition: all 0.3s ease;
  }
}

[data-layout="third-section"] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 33px repeat(5, 72px) 1fr auto;
  gap: var(--gap-md) var(--gap-xxl);
  grid-column: 1 / 13;
  @media (width < 64rem) {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-column: 1 / 2;
  }

  & > div {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 8;
    gap: var(--gap-md);
    @media (width < 48rem) {
      grid-template-rows: auto;
      grid-row: auto;
      gap: var(--gap-sm);
    }
  }

  article[data-type="outline"] {
    padding-inline: var(--gap-xs);
    padding-block: calc(var(--gap-xxs) / 2);
    gap: var(--gap-xs);
    border: 1px solid rgba(var(--title-color), 0.1);

    p {
      --text-color: rgb(var(--title-color));
      --font-size: .875rem;
      line-height: 160%;
      direction: rtl;
    }
  }

  /* Alignement des pourcentages avec largeur fixe */
  article > div[data-color] p {
    font-variant-numeric: tabular-nums;
    min-width: 4.5rem;
    text-align: right;
  }

  article:not([data-type="outline"]) {
    background-color: var(--surface);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--gap-xs);
    gap: var(--gap-xs);
    height: 100%;
    width: 100%;

    div {
      display: flex;
      flex-direction: row;
      gap: var(--gap-xxs);
      align-items: center;
    }
  }

  hgroup {
    margin-top: 2rem;
    gap: var(--gap-md);
  }

  & > div > a {
    text-decoration: none;
    color: inherit;
    display: flex;

    &:is(:hover, :active, :focus) {
      article p[data-color="title"] {
        --text-color: rgb(var(--primary));
        text-decoration: underline;
      }
    }
  }
}

[data-layout="fourth-section"] {
  background-color: var(--second-surface);
  & > div {
    grid-column: 2 / 12;
    display: flex;
    flex-direction: row;
    --text-color: rgb(var(--title-color));
    gap: var(--gap-md);
    justify-content: center;
    @media (width < 64rem) {
      grid-column: 1 / 2;
      flex-wrap: wrap;
    }
  }
}

#sixth-section {
  img {
    width: 52%;
    max-width: 600px;
    transition: all 0.4s ease;
    @media (width < 64rem) {
      width: 55%;
    }
    @media (width < 37.5rem) {
      width: 70%;
    }
  }

  /* Animation de l'image au hover du bouton */
  &:has(a[role="button"]:hover) img {
    transform: scale(1.08);
    filter: drop-shadow(0 8px 20px rgba(6, 107, 189, 0.25));
  }

  h2 {
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(249, 249, 249));
    margin-top: -9rem;
    width: 100%;
    @media (width < 64rem) {
      margin-top: -5rem;
    }
  }
}

#talk-us {
  background-color: var(--second-surface);
  padding-inline: 0;

  /* Grid layout for media logos in mobile */
  & > div[data-layout="row"] {
    @media (width < 64rem) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap-sm);
    }

    /* 1 column on very small screens */
    @media (width < 25rem) {
      grid-template-columns: 1fr;
    }
  }

  article {
    background-color: var(--surface);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 100%;
    padding-block: 1rem;
    min-height: 5rem;
  }
}

#support-points {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-md);
  @media (width < 64rem) {
    grid-column: 1 / 2;
    grid-template-columns: 1fr;
  }

  & > div {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    height: 100%;
  }

  article {
    &:not([data-type="outline"]) {
      background-color: var(--second-surface);
      height: 100%;
    }

    &:is([data-type="outline"]) {
      text-align: center;
    }

    justify-content: center;
    align-items: center;
  }

  img {
    width: fit-content;
  }
}

/* News section styling */
section[data-bg="second"]:has(h2:first-child) {
  h4 {
    --font-size: 1.125rem;

    a {
      text-decoration: none;

      &:hover {
        text-decoration: underline;
        color: rgb(var(--primary));
      }
    }
  }
}

/* Services section - reduce service title sizes for better hierarchy */
section:has([data-bg="primary"]) {
  [data-bg="primary"] h2[data-align-text="center"] {
    margin-bottom: var(--gap-xl);
  }

  [data-bg="primary"] h4 {
    --font-size: 1.5rem;

    @media (width < 64rem) {
      --font-size: 1.25rem;
    }
  }
}

/* Blue section - tighter on mobile */
section[data-bg="primary"] {
  & > div {
    @media (width < 64rem) {
      gap: var(--gap-md);
    }
  }

  /* Hide empty spacer div in center-grid on mobile */
  [data-layout="center-grid"] > div:empty {
    @media (width < 64rem) {
      display: none;
    }
  }

  [data-layout="center-grid"] {
    @media (width < 64rem) {
      gap: var(--gap-sm);
    }
  }
  h3[data-color="white"] {
    --font-size: 1.375rem;
    line-height: 1.8;
    font-weight: 400;
    max-width: 65rem;
    margin-inline: auto;

    @media (width < 64rem) {
      --font-size: 1.125rem;
      line-height: 1.7;
    }
  }
}

/* Team section title - widen for better line breaks */
[data-section="team"] {
  h2 {
    max-width: 30rem;
  }
}

/* Ecosystem crypto - no top padding on homepage */
[data-layout="ecosystem-crypto"] {
  padding-top: 0;
}


/* Mobile: left-align long text in centered sections for readability */
@media (width < 64rem) {
  #sixth-section [data-align-text="center"] > p,
  .expertise-text,
  hgroup[data-align-text="center"] > p {
    text-align: left;
  }
}

/* Hero features list - bullets on all screen sizes */
.hero-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;

  li {
    display: block;
    position: relative;
    padding-left: 1rem;
    line-height: 1.6;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.65em;
      width: 5px;
      height: 5px;
      background-color: rgb(var(--primary));
      border-radius: 50%;
      flex-shrink: 0;
    }
  }

  @media (width < 48rem) {
    li {
      font-size: 0.9rem;
      padding-left: 0.875rem;

      &::before {
        width: 4px;
        height: 4px;
        top: 0.7em;
      }
    }
  }
}