/* ========== MOBILE CSS ========== */



/* Forza comportamento mobile su Safari */

@supports (-webkit-touch-callout: none) {

  html, body {

    -webkit-text-size-adjust: 100%;

    height: 100%;

    overflow-x: hidden;

  }

}

/* Helper visibilità: mobile di default; desktop inverte */

.mobile-only  { display: block; }

.desktop-only { display: none;  }



/* Rispetta sempre l’attributo hidden */

[hidden]{ display:none !important; }



/* Offset per ancore sotto la navbar sticky */

:root { --navH: 64px; }

html  { scroll-padding-top: calc(var(--navH) + 8px); }



/* ========== FIX larghezza mobile ========== */

/* (prima queste regole erano in min-width, quindi non si applicavano su mobile) */

html, body { 

  width:100%; 

  max-width:none; 

  margin:0; 

  padding:0; 

  overflow-x:hidden; }

section, .section, .container { 

  width:100%; 

  max-width:100%; }

img, video { 

  max-width:100%; 

  height:auto; 

  display:block; }



  /* nascondi la nav desktop in mobile */

.main-nav { display:none !important; }

  



/* ========== NAV MOBILE (hamburger) ========== */

.mobile-nav{

  position: fixed !important;

  top: 0;

  left: 0;

  right: 0;

  z-index: 10000;

  background: rgba(0,0,0,.9);

  color:#fff;

  padding:.5rem .75rem;

  position: relative; /* per posizionare il dropdown */

}

.mobile-nav-header{

  display:flex; align-items:center; justify-content:space-between;

}



/* Bottone hamburger (animazione in X) */

.hamburger{

  width:40px; height:32px; position:relative;

  border:2px solid #ffc44d; border-radius:8px;

  background:transparent; cursor:pointer;

  display:inline-flex; align-items:center; justify-content:center;

}

.hamburger span{

  position:absolute; left:8px; right:8px; height:2px; background:#fff;

  transition:transform .25s ease, opacity .2s ease, top .25s ease;

}

.hamburger span:nth-child(1){ top:9px;  }

.hamburger span:nth-child(2){ top:15px; }

.hamburger span:nth-child(3){ top:21px; }

.mobile-nav.is-open .hamburger span:nth-child(1){ top:15px; transform:rotate(45deg); }

.mobile-nav.is-open .hamburger span:nth-child(2){ opacity:0; }

.mobile-nav.is-open .hamburger span:nth-child(3){ top:15px; transform:rotate(-45deg); }



/* Select valuta (mobile) */

#currency-switcher-mobile{

  background:#fff; color:#000; border-radius:6px; padding:.25rem .4rem;

}



/* Dropdown menu a discesa con slide */

.mobile-menu{

  position:absolute; left:0; right:0; top:100%;

  background:rgba(0,0,0,.96);

  list-style:none; margin:0; padding:.5rem 0;

  display:flex; flex-direction:column; gap:.25rem;

  transform: translateY(-8px); opacity:0; pointer-events:none;

  transition: transform .28s ease, opacity .28s ease;

}

.mobile-nav.is-open .mobile-menu{

  transform: translateY(0); opacity:1; pointer-events:auto;

}

.mobile-menu a{

  color:#fff; text-decoration:none; display:block; padding:.65rem 1rem;

}

.mobile-menu a:hover{ background:rgba(255,255,255,.08); }



/* Overlay pagina quando il menu è aperto */

.mobile-overlay{

  position:fixed; inset:0; z-index:9999;

  background:rgba(0,0,0,.35); backdrop-filter: blur(2px);

}



/* ========== HERO full-screen su mobile ========== */

#hero{

  position: relative;

  min-height: calc(100dvh - var(--navH, 64px)); /* schermo pieno meno navbar */

  display:flex;

  align-items:center; 

  justify-content:center;

  margin:0;

}

#hero > div{ 

  position:relative; 

  width:100%; 

  min-height:100%; }

  

.hero-content{ 

  position:relative; 

  z-index:1; 

  text-align:center;;

}

.h1{ 

  margin-top: 10rem;

  line-height: 3rem;

}

.p{ 

  line-height: 1.5rem;

}



/* === MOBILE ABOUT OVERRIDES (≤768px) === */



  /* sezione più aderente ai bordi e pattern più fitto */

#about{

  padding: 1rem 1.8rem;

  margin-bottom: 0rem;

}



  /* headline/intro più leggibile e ampia */

.about-title{ margin-bottom: .75rem; }

#about p.intro{

  padding: 0 .25rem;

  font-size: 4rem;

  line-height: 0.8;

}



  /* layout: immagine blocco, testo a tutta larghezza */

.about-row{

  display: block;

  padding: 0;              /* ← toglie i 7rem laterali */

  margin-bottom: 1.25rem;

}

.about-img{

  width: 100%;

  max-width: none;

  height: auto;

  margin: 0 auto 1rem;

}

.about-text{

  width: 100%;

  text-align: left;

  padding: 1rem;              /* meno “scatola”, più respiro */ 

  font-size: clamp(16px, 4.3vw, 18px);

  line-height: 1.6;

}



  /* mission: niente colonne, testo full-bleed */

.our-mission{

  display: block;

  padding: 0;              /* ← toglie i 7rem laterali */

  margin-top: .5rem;

}

.our-mission-text{

  max-width: none;

  text-align: left;

  padding: 0;

  font-size: clamp(16px, 4.3vw, 18px);

  line-height: 1.6;

}

.mission-logo{

  display: block;

  max-width: 220px;

  margin: 1rem auto 0;

}

.carousel-strip img {

  margin-bottom: 0 !important;

  display: block;

  max-height: 330px;

}

/* elenco “What makes us different”: una colonna, bordo a filo */

.about-text-different{

  max-width: 100%;

  padding: 0 .25rem;

}

.two-column-list{

  columns: 1;

  margin-left: 1rem;

  column-gap: 0;

  margin-bottom: 0;

}

  /* MOBILE (≤768px): righe orizzontali con snap */

#about .team-row {

  display: flex !important;

  flex-wrap: nowrap !important;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

  scroll-behavior: smooth;

  justify-content: flex-start !important;

  padding-left: 0;      /* ← AGGIUNGI */

  padding-right: 0;

}

#about .team-row::-webkit-scrollbar {

  display: none;

}

#about .team-member {

  width: 100%;

  flex: 0 0 100%;              /* Ogni card occupa esattamente 100% della viewport */

  scroll-snap-align: start;    /* Fa sì che lo scroll si "ancori" all'inizio di ogni card */

  box-sizing: border-box;  

}

#about .team-member img {

  height: auto;

  width: 100%;

  display: block;

}

/* puntini sotto alle card */

#team-dots.cards-dots {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin: 0.8rem 0 0;

}

#team-dots.cards-dots button {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  border: 0;

  background: #d0d0d0;

}

#team-dots.cards-dots button[aria-current="true"] {

  background: #333;

}



/* MOBILE (≤768px): how to join */

#how {

  padding: 1.5rem 1.5rem; /* meno spazio generale */

}

#how .about-title{

  margin-bottom: 0rem;

  text-align: center;

}

.how-step h3 {

  margin-top: 1rem;

  margin-bottom: 0rem;

}

.how-step p {

  font-size:var(--main-size);

  line-height: 1.4;

  margin-bottom: 0;

}

.how-icon {

  width: 280px;

  margin-bottom: 0.5rem;

}

.how-steps-icons {

  gap: 1rem;

  padding: 1rem 0;

}

.how-step:not(:last-child)::after{

  display: none !important; 

}



/* MOBILE (≤768px): learning */

#learning {

  margin-bottom: 0 !important;

  padding-bottom: 0 !important;

}

#learning .carousel-strip {

  margin-bottom: 0 !important;

  padding-bottom: 0 !important;

}

#learning .carousel-strip img {

  margin-bottom: 0 !important;

  display: block;

  max-height: 330px;

}

/* MOBILE (≤768px): pricing */

#pricing {

  margin-top: 0 !important;

  margin-bottom: 0 !important;

  padding-bottom: 0 !important;

}

#pricing .about-title {

  margin-top: 0 !important;

}

.tier-1-window,

.tier-2-window,

.tier-3-window{

  display: flex;

  flex-wrap: nowrap;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

  scroll-behavior: smooth;

  justify-content: flex-start ;

  padding: 1rem 0;

  background-color: transparent;

  margin-bottom: 0rem;

  margin-top: 0rem;

}



.tier-1-window::-webkit-scrollbar,

.tier-2-window::-webkit-scrollbar,

.tier-3-window::-webkit-scrollbar{

  display: none;

}

.tier-1-window .flip-card,

.tier-2-window .flip-card,

.tier-3-window .flip-card {

  flex: 0 0 100%;

  scroll-snap-align: start;

  box-sizing: border-box;

  margin-right: 1rem;

}

/* Rimuovi margini extra per l'ultimo elemento */

.tier-1-window .flip-card:last-child,

.tier-2-window .flip-card:last-child,

.tier-3-window .flip-card:last-child {

  margin-right: 0;

}

  /* Dots */

.pricing-dots {

display: flex;

justify-content: center;

gap: 8px;

margin: 0.8rem 0 0;

}

.pricing-dots button {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  border: none;

  background: #ccc;

}

.pricing-dots button[aria-current="true"] {

  background: #333;

}

/* MOBILE (≤768px): reviews */

#reviews {

  margin-top: 0 !important;

  margin-bottom: 0 !important;

  padding-bottom: 0 !important;

}

/* Nascondi frecce in mobile */

.reviews-arrow {

  display: none !important;

}

  /* Layout 1 card per volta */

#reviewsTrack {

  display: flex;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

  gap: 1rem;

}

#reviewsTrack .card {

  flex: 0 0 100%;

  max-width: 100%;

  scroll-snap-align: center;

}

  /* stile Card recensioni */

section#reviews .cards.reviews .card {

  flex: 0 0 100%;      /* una card per volta */

  max-width: 100%;     

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  align-items: center;

  background: #fff;    /* sfondo leggibile */

  border: 2px solid #000; 

  border-radius: 8px;

  overflow: hidden;    /* bordi tondi anche sull'immagine */

}

/* Immagine */

section#reviews .cards.reviews .card img {

  width: 100%;

  height: auto;

  max-height: 300px;   /* evita immagini troppo alte su mobile */

  object-fit: cover;

}



/* Testo sotto immagine */

section#reviews .cards.reviews .card > div {

  padding: 1rem;

  text-align: center;

}

section#reviews .cards.reviews blockquote {

  font-size: 1rem;

  line-height: 1.4;

  margin: 0 0 0.5rem;

}

section#reviews .cards.reviews cite {

  font-size: 0.9rem;

  font-style: normal;

  color: #333;

}

/* Stile puntini */

.reviews-dots {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 12px;

}

.reviews-dots button {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  border: none;

  background: #ccc;

  cursor: pointer;

}

.reviews-dots button.active {

  background: #333;

}

/* MOBILE (≤768px): FAQ */

#faq {

  margin-top: 0 !important;

  margin-bottom: 0 !important;

  padding-bottom: 0 !important;

}

/* MOBILE (≤768px): contact */

#contact {

  margin-top: 0 !important;

  margin-bottom: 0 !important;

  padding-bottom: 0 !important;

}