/*===============================================================
  CICLOPE STUDIO — restyling 2026
  Layer di override caricato dopo styles.css: ridefinisce
  variabili e componenti del template senza toccarne la struttura.
================================================================*/
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  /* Palette — cinematografica scura, accent ambra */
  --first-color: hsl(36, 92%, 55%);
  --first-color-alt: hsl(36, 95%, 47%);
  --first-color-light: hsl(40, 95%, 65%);
  --first-color-lighten: hsl(230, 14%, 12%);
  --second-color: hsl(36, 92%, 55%);
  --title-color: hsl(40, 35%, 96%);
  --text-color: hsl(230, 10%, 68%);
  --text-color-light: hsl(230, 8%, 52%);
  --border-color: hsl(230, 12%, 16%);
  --body-color: hsl(232, 16%, 7%);
  --container-color: hsl(231, 15%, 10%);

  --body-font: 'Manrope', sans-serif;
  --display-font: 'Syne', sans-serif;
}

/* Un solo tema, identità forte: niente toggle luna/sole */
.change-theme { display: none !important; }

/*=============== SWITCH LINGUA IT/EN ===============*/
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: hsla(231, 15%, 12%, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lang-btn {
  border: 0;
  cursor: pointer;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--text-color);
  background: transparent;
  padding: .3rem .7rem;
  border-radius: 999px;
  line-height: 1;
  transition: color .2s, background .2s;
}
.lang-btn:hover { color: var(--title-color); }
.lang-btn.active {
  color: hsl(230, 20%, 8%);
  background: linear-gradient(101deg, var(--first-color), var(--first-color-alt));
}
/* Su mobile la nav è una bottom-bar: il toggle resta in alto a destra */
@media screen and (max-width: 1023px) {
  .lang-switch {
    position: fixed;
    top: calc(.65rem + env(safe-area-inset-top, 0px));
    right: 1rem;
    z-index: var(--z-fixed);
  }
}

/*=============== TIPOGRAFIA ===============*/
h1, h2, h3, .nav__logo, .footer__logo, .section__title, .home__title, .popular__price span {
  font-family: var(--display-font);
}
body { letter-spacing: .01em; }

.section__title { letter-spacing: .02em; }
.section__title span { color: var(--first-color); }
.section__subtitle,
.section__subtitle2 {
  color: var(--first-color);
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: var(--smaller-font-size);
  font-weight: 700;
}

/*=============== HEADER / NAV ===============*/
.header { background: transparent; }
.scroll-header {
  background: hsla(232, 16%, 7%, .8) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border-color) !important;
}
.scroll-header .nav__logo { color: var(--first-color) !important; }
.nav__logo { color: var(--title-color); font-weight: 800; letter-spacing: .04em; }
.nav__logo i { color: var(--first-color); }

/* Menu mobile: pill scura in vetro */
@media screen and (max-width: 1023px) {
  .nav__menu {
    background: hsla(231, 15%, 12%, .85) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 32px hsla(0, 0%, 0%, .5) !important;
  }
  .nav__link { color: var(--text-color) !important; }
  .active-link {
    background: linear-gradient(101deg, var(--first-color), var(--first-color-alt)) !important;
    box-shadow: 0 4px 12px hsla(36, 92%, 45%, .4) !important;
    color: hsl(230, 20%, 8%) !important;
  }
}
@media screen and (min-width: 1023px) {
  .nav__link { color: var(--text-color); }
  .nav__link:hover, .active-link { color: var(--first-color) !important; }
  /* Hero: colonne centrate verticalmente, card che non sfora */
  .home__container { align-items: center !important; }
}

/*=============== HERO ===============*/
.home {
  position: relative;
  background:
    radial-gradient(80% 60% at 85% 8%, hsla(36, 92%, 50%, .10) 0%, transparent 55%),
    radial-gradient(120% 90% at 15% 100%, hsl(231, 22%, 12%) 0%, hsl(232, 16%, 7%) 55%) !important;
}
.home__title {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.home__description {
  color: var(--text-color);
  line-height: 1.7;
  max-width: 30ch;
}

/* Logo presentato come "card vinile" che fluttua, non più arco bianco */
.home__images {
  position: relative;
  display: grid !important;
  place-items: center;
  align-self: center;
}
.home__img {
  position: relative;
  z-index: 1;
  border-radius: 1.5rem !important;
  background: linear-gradient(150deg, #ffffff 0%, #f1ede4 100%) !important;
  padding: 1.5rem !important;
  box-shadow:
    0 0 0 1px hsla(36, 40%, 80%, .25),
    0 30px 70px -20px hsla(0, 0%, 0%, .7),
    0 0 80px -30px hsla(36, 92%, 55%, .55) !important;
  width: clamp(220px, 30vw, 340px);
  height: auto;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  animation: float 6s ease-in-out infinite;
  transition: transform .4s, box-shadow .4s;
}
.home__img img { width: 86%; height: auto; }
.home__img:hover {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow:
    0 0 0 1px hsla(36, 40%, 80%, .35),
    0 40px 80px -20px hsla(0, 0%, 0%, .75),
    0 0 110px -25px hsla(36, 92%, 55%, .7) !important;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .home__img { animation: none; } }
/* Orbe = solo glow di sfondo, fuori dal flusso (non spinge la card) */
.home__orbe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: 380px !important;
  height: 380px !important;
  background: radial-gradient(circle at 50% 45%, hsla(36, 92%, 55%, .42), transparent 65%) !important;
  border-radius: 50% !important;
  filter: blur(30px);
  z-index: 0;
}

/* Equalizer animato — firma "audio" del hero */
.waveform {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 44px;
  margin-top: 2.25rem;
}
.waveform span {
  width: 4px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--first-color-light), var(--first-color-alt));
  animation: eq 1.4s ease-in-out infinite;
  opacity: .85;
}
.waveform span:nth-child(1)  { height: 30%; animation-delay: -1.2s; }
.waveform span:nth-child(2)  { height: 65%; animation-delay: -1.0s; }
.waveform span:nth-child(3)  { height: 45%; animation-delay: -.8s; }
.waveform span:nth-child(4)  { height: 90%; animation-delay: -.6s; }
.waveform span:nth-child(5)  { height: 55%; animation-delay: -1.1s; }
.waveform span:nth-child(6)  { height: 75%; animation-delay: -.3s; }
.waveform span:nth-child(7)  { height: 40%; animation-delay: -.9s; }
.waveform span:nth-child(8)  { height: 100%; animation-delay: -.5s; }
.waveform span:nth-child(9)  { height: 60%; animation-delay: -1.3s; }
.waveform span:nth-child(10) { height: 35%; animation-delay: -.2s; }
.waveform span:nth-child(11) { height: 80%; animation-delay: -.7s; }
.waveform span:nth-child(12) { height: 50%; animation-delay: -.4s; }
.waveform span:nth-child(13) { height: 70%; animation-delay: -1.05s; }
.waveform span:nth-child(14) { height: 38%; animation-delay: -.15s; }
@keyframes eq {
  0%, 100% { transform: scaleY(.55); }
  50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .waveform span { animation: none; }
}

/*=============== PULSANTI ===============*/
.button {
  background: linear-gradient(101deg, var(--first-color), var(--first-color-alt)) !important;
  color: hsl(230, 20%, 8%) !important;
  font-weight: 700 !important;
  border-radius: .75rem !important;
  box-shadow: 0 6px 20px hsla(36, 92%, 45%, .3) !important;
  transition: transform .25s, box-shadow .25s !important;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px hsla(36, 92%, 45%, .42) !important;
}
a.button[style*="transparent"] {
  background: transparent !important;
  color: var(--title-color) !important;
  border-color: var(--first-color) !important;
}
a.button[style*="transparent"]:hover { color: var(--first-color) !important; }

/*=============== CARD LAVORI / NOLEGGIO ===============*/
.popular__card {
  background: var(--container-color) !important;
  border: 1px solid var(--border-color);
  border-radius: 1.25rem !important;
  box-shadow: 0 16px 40px hsla(0, 0%, 0%, .35) !important;
  transition: transform .3s, border-color .3s, box-shadow .3s !important;
}
.popular__card:hover {
  transform: translateY(-4px);
  border-color: hsla(36, 92%, 55%, .45);
  box-shadow: 0 20px 48px hsla(0, 0%, 0%, .5) !important;
}
.popular__price span { letter-spacing: .06em; }
.popular__img { border-radius: .75rem; }

/* Frecce swiper */
.swiper-button-next, .swiper-button-prev { color: var(--first-color) !important; }

/*=============== LOGHI: grigi, a colori al passaggio ===============*/
.logos__img img {
  filter: grayscale(1) brightness(1.6) contrast(.85);
  opacity: .55;
  transition: filter .3s, opacity .3s;
}
.logos__img img:hover { filter: none; opacity: 1; }

/*=============== SERVIZI (accordion) ===============*/
.value__accordion-item {
  background: var(--container-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: .9rem !important;
  transition: border-color .3s;
}
.value__accordion-item:hover { border-color: hsla(36, 92%, 55%, .4) !important; }
.value__accordion-icon, .value__accordion-arrow i { color: var(--first-color) !important; }
.value__accordion-icon, .value__accordion-arrow { background-color: hsla(36, 92%, 55%, .12) !important; }
.accordion-open { box-shadow: 0 12px 32px hsla(0, 0%, 0%, .4) !important; }

.value__orbe, .contact__orbe {
  background: radial-gradient(circle at 50% 35%, hsla(36, 92%, 55%, .28), transparent 70%) !important;
  filter: blur(2px);
}

/*=============== CONTATTI ===============*/
.contact__card-box {
  background: var(--container-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: .9rem !important;
  transition: border-color .3s, transform .3s;
}
.contact__card-box:hover {
  border-color: hsla(36, 92%, 55%, .45) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px hsla(0, 0%, 0%, .4) !important;
}
.contact__card-info i { color: var(--first-color) !important; background-color: hsla(36, 92%, 55%, .12) !important; }
.contact__card-button {
  background: hsla(36, 92%, 55%, .14) !important;
  color: var(--first-color) !important;
  box-shadow: none !important;
}
.contact__card-button:hover {
  background: linear-gradient(101deg, var(--first-color), var(--first-color-alt)) !important;
  color: hsl(230, 20%, 8%) !important;
}

/*=============== FAQ ===============*/
#faq details {
  background: var(--container-color);
  border: 1px solid var(--border-color);
  border-radius: .9rem;
  padding: .75rem 1.25rem;
  transition: border-color .3s;
}
#faq details:hover, #faq details[open] { border-color: hsla(36, 92%, 55%, .4); }
#faq summary { color: var(--title-color); list-style: none; position: relative; padding-right: 1.75rem; }
#faq summary::after {
  content: '+';
  position: absolute; right: .25rem; top: 50%;
  transform: translateY(-50%);
  color: var(--first-color);
  font-size: 1.25rem; font-weight: 700;
  transition: transform .25s;
}
#faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
#faq summary::-webkit-details-marker { display: none; }
#faq a { color: var(--first-color); }

/*=============== FOOTER ===============*/
.footer { border-top: 1px solid var(--border-color); }
.footer__logo { color: var(--first-color) !important; font-weight: 800; }
.footer__title { color: var(--title-color); }
.footer__link, .footer__description a { transition: color .25s; }
.footer__link:hover, .footer__description a:hover { color: var(--first-color) !important; }
.footer__copy { color: var(--text-color-light); }

/*=============== EXTRA ===============*/
.scrollup {
  background: var(--container-color) !important;
  border: 1px solid var(--border-color);
  color: var(--first-color) !important;
  box-shadow: 0 8px 24px hsla(0, 0%, 0%, .45) !important;
}
::selection { background: hsla(36, 92%, 55%, .35); color: var(--title-color); }

/* Scrollbar coerente */
::-webkit-scrollbar { width: .6rem; }
::-webkit-scrollbar-track { background: hsl(231, 15%, 10%); }
::-webkit-scrollbar-thumb { background: hsl(231, 10%, 22%); border-radius: .5rem; }
::-webkit-scrollbar-thumb:hover { background: hsl(36, 60%, 45%); }

/*===============================================================
  MOBILE — layout 2025
================================================================*/
@media screen and (max-width: 1023px) {

  /* Bottom-nav in vetro, con safe-area per iPhone notch */
  .nav__menu {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 1.25rem !important;
    padding: .85rem 1.25rem !important;
  }
  .nav__list {
    display: flex !important;
    justify-content: space-around;
    gap: .25rem;
  }
  .nav__link span { font-size: .7rem; }
  .nav__link { gap: .25rem; }

  /* Hero: respiro e gerarchia */
  .home__container { padding-top: 2.5rem !important; gap: 2.75rem !important; }
  .home__title { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .home__description { font-size: 1rem; margin-inline: auto; }
  .home__data { text-align: center; }
  .home__data .waveform { justify-content: center; }
  .home__value { justify-content: center; }

  /* CTA del hero: a tutta larghezza, ben toccabili */
  .home__value { flex-direction: column; width: 100%; gap: .75rem !important; }
  .home__value .button {
    width: 100%;
    justify-content: center;
    padding-block: 1.05rem;
    font-size: 1rem;
  }

  /* Ritmo verticale delle sezioni più ampio */
  .section { padding-top: 4.5rem !important; }
  .section__title { font-size: clamp(2rem, 9vw, 2.6rem); }

  /* Titoli sezione centrati su mobile per equilibrio */
  .popular .section__subtitle,
  .popular .section__title,
  #faq .section__subtitle,
  #faq .section__title { text-align: center; }
  .popular > .container > .section__subtitle,
  .popular > .container > .section__title { display: block; }

  /* Card servizi/contatti: target tattili generosi */
  .value__accordion-header { padding: 1.1rem !important; }
  .contact__card { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .contact__card-box { padding: 1.15rem 1.25rem !important; }
  .contact__card-button { padding: .75rem 1.5rem !important; }

  /* FAQ leggibile */
  #faq details { padding: .35rem 1.1rem !important; }
  #faq summary { font-size: 1rem; padding-block: 1rem; }

  /* Footer in colonna, centrato */
  .footer__container { text-align: center; }
  .footer__content { justify-content: center; gap: 2.5rem !important; }
  .footer__links { justify-items: center; }

  /* Spazio in fondo per non finire sotto la bottom-nav */
  .footer { padding-bottom: 7rem !important; }
  .scrollup { bottom: 6rem !important; }
}

/* Telefoni piccoli */
@media screen and (max-width: 360px) {
  .nav__link span { display: none; }
  .nav__link i { font-size: 1.4rem; }
  .home__title { font-size: 2.3rem; }
}

/*===============================================================
  RIFINITURE 2025 (tutte le viewport)
================================================================*/
/* Grana sottile + mesh per profondità cinematografica */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 100% 0%, hsla(36, 92%, 45%, .06), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, hsla(230, 40%, 40%, .08), transparent 60%);
}
.main, .footer, .header { position: relative; z-index: 1; }

/* Reveal più morbido (lo scroll-reveal del template resta, qui ammorbidiamo) */
.section { scroll-margin-top: 5rem; }

/* Link e focus accessibili */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--first-color);
  outline-offset: 3px;
  border-radius: 4px;
}