/* ============================================
   BRIDGEON — Components
   ============================================ */


/* ============================================
   HEADER
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-white);
  border-bottom: 1px solid rgba(4, 11, 99, 0.08);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--space-32);
}

/* --- Logo --- */

.header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header__logo img {
  display: block;
  width: 160px;
  height: auto;
}

/* --- Nav desktop --- */

.header__nav {
  margin-left: auto;
}

.header__menu {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.header__link {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0px;
  color: var(--color-dark);
  text-decoration: none;
  padding: var(--space-8) 0;
  position: relative;
  transition: color var(--transition-fast);
}

.header__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width var(--transition-base);
}

.header__link:hover {
  color: var(--color-primary);
}

.header__link:hover::after {
  width: 100%;
}

.header__link.is-active {
  color: var(--color-primary);
}

.header__link.is-active::after {
  width: 100%;
}

/* --- Language switch --- */

.header__lang {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-left: var(--space-16);
  flex-shrink: 0;
}

.header__flag {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity var(--transition-fast);
}

.header__flag.is-active {
  opacity: 1;
}

.header__flag img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: cover;
}

/* --- Hamburger (nascosto su desktop) --- */

.header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.header__burger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-dark);
  border-radius: 1px;
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}

.header__burger.is-open .header__burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__burger.is-open .header__burger-line:nth-child(2) {
  opacity: 0;
}

.header__burger.is-open .header__burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================
   MOBILE MENU
   ============================================ */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background-color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-slow),
    visibility var(--transition-slow);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

.mobile-menu__link {
  font-family: var(--font-primary);
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  color: var(--color-white);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.mobile-menu__link:hover,
.mobile-menu__link.is-active {
  opacity: 1;
}


/* ============================================
   HERO
   ============================================ */

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* --- Background image --- */

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* --- Overlay blu diagonale a ~45° --- */

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 300vw;
  height: 35vw;
  background-color: var(--color-primary);
  transform: translate(-39%, 0%) rotate(-45deg);
  z-index: 1;
  opacity: 0;
  transition: opacity var(--transition-hero);
  transition-delay: 0.5s;
}

.hero.is-loaded .hero__overlay {
  opacity: 0.85;
}

/* --- Contenuto testuale --- */

.hero__content {
  position: relative;
  z-index: 2;
  padding-block: var(--space-80);
}

.hero__title {
  color: var(--color-white);

  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--transition-hero),
    transform var(--transition-hero);
  transition-delay: 0.75s;
}

.hero.is-loaded .hero__title {
  opacity: 1;
  transform: translateY(0);
}

.hero__text {
  color: var(--color-white);
  margin-top: var(--space-24);

  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--transition-hero),
    transform var(--transition-hero);
  transition-delay: 1s;
}

.hero.is-loaded .hero__text {
  opacity: 1;
  transform: translateY(0);
}

/* --- prefers-reduced-motion: niente animazioni --- */

@media (prefers-reduced-motion: reduce) {
  .hero__overlay,
  .hero__title,
  .hero__text {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================
   STATEMENT + CTA
   ============================================ */

.statement {
  background-color: var(--color-white);
  padding-block: var(--space-96);
}

.statement__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-48);
}

.statement__text {
  color: var(--color-dark);
}

.lang-en .statement__text {
  max-width: 580px;
}

.lang-it .statement__text {
  max-width: 680px;
}


/* ============================================
   RESULTS TO DRIVE VALUE
   ============================================ */

.results {
  position: relative;
  background-color: var(--color-white);
  padding-top: var(--space-4);
  padding-bottom: var(--space-80);
  margin-bottom: var(--space-80);
  overflow: hidden;
}

.results::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300vw;
  height: 300vw;
  background-color: var(--color-bg-light);
  transform: translate(-9%, 0%) rotate(-45deg);
  z-index: 0;
}

.results > .container {
  position: relative;
  z-index: 2;
}

.results__heading {
  color: var(--color-primary);
  margin-bottom: var(--space-40);
}

.results__grid {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.results__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: results-scroll var(--results-duration, 25s) linear infinite;
}

@keyframes results-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .results__track {
    animation: none;
  }
  .results__grid {
    overflow-x: auto;
  }
}

.results__card {
  flex: 0 0 var(--results-card-w, 280px);
  margin-right: var(--space-24);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-dark);
  padding: var(--space-40);
  aspect-ratio: 1 / 1;
  transition: background-color var(--transition-base);
}

.results__card:hover {
  background-color: var(--color-primary);
}

.results__card-title {
  color: var(--color-white);
}

.results__card-text {
  color: var(--color-white);
  opacity: 0.9;
  line-height: var(--lh-body-2);
  font-weight: var(--fw-body-2);
}


/* ============================================
   CO-INVEST SEPARATOR
   ============================================ */

.separator-blue {
  background-color: var(--color-primary);
  padding-block: var(--space-96);
}

.separator-blue__text {
  color: var(--color-white);
}

.lang-en .separator-blue__text {
  max-width: 740px;
}

.lang-it .separator-blue__text {
  max-width: 650px;
}


/* ============================================
   DIRECT INVESTMENTS & PARTNERSHIPS
   ============================================ */

.investments {
  width: 100%;
}

.investments__split {
  display: flex;
  min-height: 520px;
}

/* --- Immagine (50% viewport) --- */

.investments__image-wrap {
  position: relative;
  width: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.investments__image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.investments__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-dark) 50%, var(--color-primary) 50%);
  opacity: 1;
  z-index: 1;
}

/* --- Contenuto (50% viewport) --- */

.investments__content {
  width: 50%;
  flex-shrink: 0;
  background-color: var(--color-bg-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-64) var(--space-80);
  gap: var(--space-120);
}

.investments__title {
  color: var(--color-primary);
  margin-bottom: var(--space-24);
}

.investments__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  background-color: var(--color-primary);
  margin-bottom: var(--space-16);
}

.investments__text {
  color: var(--color-dark);
  max-width: 440px;
}

/* --- Partner carousel --- */

.investments__partners {
  margin-top: var(--space-48);
}

.partners-carousel {
  overflow: hidden;
}

.partners-carousel__track {
  display: flex;
}

.partners-carousel__slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.partners-carousel__slide img {
  height: 75px;
  width: auto;
  object-fit: contain;
}


/* ============================================
   ACCELERATING GROWTH / EXPERTISE
   ============================================ */

.expertise {
  background-color: var(--color-white);
  padding-block: var(--space-80);
}

/* --- Header sezione --- */

.expertise__header {
  margin-bottom: var(--space-64);
}

.expertise__title {
  color: var(--color-primary);
  margin-bottom: var(--space-12);
}

.expertise__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  background-color: var(--color-primary);
  margin-bottom: var(--space-16);
}

.expertise__subtitle {
  color: var(--color-dark);
}

/* --- Griglia card 3x3 --- */

.expertise__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

/* --- Singola card --- */

.expertise__card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.expertise__card-bg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 75%;
  height: 75%;
  object-fit: cover;
  z-index: 2;
}

.expertise__card-overlay {
  position: absolute;
  inset: 0;
  opacity: 1;
  z-index: 1;
}

.expertise__card:nth-child(odd) .expertise__card-overlay {
  background: linear-gradient(135deg, var(--color-dark) 50%, var(--color-primary) 50%);
}

.expertise__card:nth-child(even) .expertise__card-overlay {
  background: linear-gradient(315deg, var(--color-dark) 50%, var(--color-primary) 50%);
}

.expertise__card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: var(--space-24);
  max-width: 60%;
}

.expertise__card-title {
  color: var(--color-white);
  margin-bottom: var(--space-16);
}

.expertise__card-text {
  color: var(--color-white);
  opacity: 0.9;
  font-size: var(--fs-body-2);
  line-height: var(--lh-body-2);
}


/* ============================================
   CTA FINALE
   ============================================ */

.cta-final {
  background-color: var(--color-primary);
  padding-block: var(--space-120);
}

.cta-final__header {
  margin-bottom: var(--space-40);
}

.cta-final__title {
  color: var(--color-dark);
  margin-bottom: var(--space-16);
}

.cta-final__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  background-color: var(--color-dark);
  margin-bottom: var(--space-16);
}

.cta-final__subtitle {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-h4);
  color: var(--color-white);
}

.cta-final__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-48);
}

.btn-cta-final {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.btn-cta-final:hover {
  background-color: var(--color-bg-light);
  color: var(--color-dark);
}

.cta-final__contacts {
  text-align: left;
}

.cta-final__contacts p {
  color: var(--color-white);
  margin-bottom: 0;
}


/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  background-color: var(--color-dark);
  padding-block: var(--space-80);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
}

/* --- Sinistra: logo + tagline --- */

.footer__left {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.footer__logo {
  flex-shrink: 0;
}

.footer__logo img {
  display: block;
  height: auto;
  width: 400px;
}

/* --- Destra: legal + LinkedIn --- */

.footer__right {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.footer__legal p {
  color: var(--color-white);
  margin-bottom: 0;
  text-align: right;
}

.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: opacity var(--transition-fast);
}

.footer__social:hover {
  opacity: 0.7;
  color: var(--color-white);
}


/* ============================================
   Responsive
   ============================================ */

@media (min-width: 1720px) {
  .results__card-text {
    font-size: 20px;
    line-height: 26px;
  }
}

@media (min-width: 2080px) {
  .results__card {
    padding: var(--space-48);
  }

  .results__card-text {
    font-size: 22px;
    line-height: 29px;
  }
}

@media (min-width: 2200px) {
  .results__card {
    padding: var(--space-64);
  }
}

@media (min-width: 2400px) {
  .results__card {
    padding: var(--space-80);
  }
}

@media (max-width: 2000px) {
  .hero__overlay {
    height: 34vw;
    transform: translate(-41%, 0%) rotate(-45deg);
  }

  .investments__content {
    gap: var(--space-80);
  }
}

@media (max-width: 1800px) {
  .hero__overlay {
    height: 33vw;
    transform: translate(-42%, 0%) rotate(-45deg);
  }

  .investments__content {
    gap: var(--space-48);
  }
}

@media (max-width: 1700px) {
  .hero__overlay {
    height: 35vw;
    transform: translate(-43%, 0%) rotate(-45deg);
  }

  .investments__content {
    gap: var(--space-40);
  }
}

@media (max-width: 1620px) {
  .results::before {
    transform: translate(-5%, 0%) rotate(-45deg);
  }

  .results__card {
    padding: var(--space-24);
  }

  .hero__overlay {
    height: 39vw;
    transform: translate(-40%, 0%) rotate(-45deg);
  }

  .investments__content {
    gap: var(--space-24);
  }
}

@media (max-width: 1400px) {
  .hero__overlay {
    height: 43vw;
    transform: translate(-42%, 0%) rotate(-45deg);
  }

  .results__card {
    padding: var(--space-40);
  }

  .investments__content {
    gap: 0;
  }

  .expertise__card-bg {
    width: 65%;
    height: 65%;
  }

  .partners-carousel__slide img {
    height: 65px;
  }
}

@media (max-width: 1200px) {
  .expertise__card-content {
    padding: var(--space-16);
  }

  .hero__overlay {
    height: 44vw;
    transform: translate(-44%, 0%) rotate(-45deg);
  }

  .results {
    padding-top: var(--space-8);
  }

  .results__card {
    padding: var(--space-64);
  }

  .lang-en .statement__text {
    max-width: 500px;
  }

  .lang-it .statement__text {
    max-width: 580px;
  }

  .lang-en .separator-blue__text {
    max-width: 620px;
  }

  .lang-it .separator-blue__text {
    max-width: 552px;
  }
}

@media (max-width: 1120px) {
  .results__card {
    padding: var(--space-48);
  }
}

@media (max-width: 1023px) {
  .hero {
    aspect-ratio: 2 / 1;
  }

  .hero__overlay {
    height: 58vw;
    transform: translate(-42%, 0%) rotate(-45deg);
  }

  .hero__content {
    padding-block: var(--space-64);
  }

  .results__card {
    padding: var(--space-64);
  }

  .investments__content {
    padding: var(--space-48) var(--space-40);
  }

  .expertise__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .partners-carousel__slide img {
    height: 50px;
  }

  .lang-en .statement__text {
    max-width: 440px;
  }

  .lang-it .statement__text {
    max-width: 400px;
  }

  .lang-en .separator-blue__text {
    max-width: 560px;
  }

  .lang-it .separator-blue__text {
    max-width: 505px;
  }
}

@media (max-width: 767px) {
  .hero {
    aspect-ratio: 3 / 2;
  }

  .hero__overlay {
    height: 64vw;
    transform: translate(-41%, 0%) rotate(-45deg);
  }

  .hero__content {
    padding-block: var(--space-48);
  }

  .header__inner {
    height: 60px;
  }

  .header__nav {
    display: none;
  }

  .header__lang {
    margin-left: auto;
  }

  .header__burger {
    display: flex;
    margin-left: var(--space-12);
  }

  .statement {
    padding-block: var(--space-48);
  }

  .statement__inner {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-32);
  }

  .statement__text {
    align-self: flex-start;
  }

  .results {
    padding-top: 0;
    margin-top: var(--space-24);
    padding-bottom: var(--space-48);
    margin-bottom: var(--space-48);
  }

  .results__heading {
    margin-bottom: var(--space-24);
  }

  .results__card {
    padding: var(--space-40);
    min-height: 180px;
  }

  .results::before {
    transform: translate(-2%, 0%) rotate(-45deg);
  }

  .separator-blue {
    padding-block: var(--space-64);
  }

  .investments__split {
    flex-direction: column;
    min-height: auto;
  }

  .investments__image-wrap {
    width: 100%;
    aspect-ratio: 1;
  }

  .investments__content {
    width: 100%;
    padding: var(--space-40) var(--content-padding-inline);
  }

  .expertise {
    padding-block: var(--space-40);
  }

  .expertise > .container {
    padding-inline: 0;
  }

  .expertise__header {
    margin-bottom: 0;
    padding: var(--space-40) var(--content-padding-inline);
  }

  .expertise__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
  }

  .expertise__carousel {
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }

  .expertise__carousel:active {
    cursor: grabbing;
  }

  .expertise__carousel-track {
    display: flex;
  }

  .expertise__carousel-track > .expertise__card {
    flex: 0 0 100%;
  }

  .expertise__card {
    aspect-ratio: 1;
  }

  .expertise__card-content {
    padding: var(--space-40);
  }

  .expertise__card .expertise__card-overlay {
    background: linear-gradient(135deg, var(--color-dark) 50%, var(--color-primary) 50%) !important;
  }

  .cta-final {
    padding-block: var(--space-64);
  }

  .cta-final__title {
    font-size: 48px;
    line-height: 56px;
  }

  .cta-final__subtitle {
    font-size: 27px;
    line-height: 34px;
  }

  .cta-final__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-64);
  }

  .site-footer {
    padding-block: var(--space-64);
  }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-48);
  }

  .footer__right {
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-32);
  }

  .footer__legal p {
    text-align: left;
  }

  .partners-carousel__slide img {
    height: 75px;
  }

  .lang-en .statement__text {
    max-width: 440px;
  }

  .lang-it .statement__text {
    max-width: 505px;
  }
}

@media (max-width: 575px) {
  .header__lang {
    margin: 0;
    position: fixed;
    bottom: var(--space-32);
    left: 0;
    width: 100%;
    justify-content: center;
    z-index: var(--z-header);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition:
      opacity var(--transition-slow),
      visibility var(--transition-slow),
      transform var(--transition-slow);
  }

  body.menu-opened .header__lang {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .results::after {
    content: "";
    position: absolute;
    top: -100vw;
    left: 0;
    width: 100vw;
    height: 100vw;
    background-color: var(--color-white);
    z-index: 1;
    margin-top: 0;
  }

  .lang-it .results::after {
    margin-top: 32px;
  }

  .results__heading {
    max-width: 58%;
  }

  .hero {
    aspect-ratio: 1;
  }

  .hero__overlay {
    height: 90vw;
    transform: translate(-36%, 0%) rotate(-45deg);
  }

  .partners-carousel__slide img {
    height: 60px;
  }

  .cta-final__title {
    font-size: 38px;
    line-height: 44px;
  }

  .cta-final__subtitle {
    font-size: 24px;
    line-height: 34px;
  }
}

@media (max-width: 480px) {
  .footer__logo img {
    width: 300px;
  }

  .results__card {
    padding: var(--space-24);
  }

  .cta-final__title {
    font-size: 33px;
    line-height: 39px;
  }

  .cta-final__subtitle {
    font-size: 20px;
    line-height: 28px;
  }

  .header__logo img {
    width: 128px;
  }
}

@media (max-width: 420px) {
  .hero__overlay {
    height: 100vw;
    transform: translate(-34%, 0%) rotate(-45deg);
  }

  .results__card {
    padding: var(--space-24);
  }

  .lang-en .results::after {
    margin-top: 32px;
  }

  .lang-it .results::after {
    margin-top: 51px;
  }

  .partners-carousel__slide img {
    height: 50px;
  }

  .expertise__card-bg {
    width: 62%;
    height: 62%;
  }

  .cta-final__title {
    font-size: 31px;
    line-height: 36px;
  }

  .cta-final__subtitle {
    font-size: 18px;
    line-height: 26px;
  }

  .footer__logo img {
    width: 250px;
  }
}