:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

body{
    --text: #ebe9fc;
    --background: #010104;
    --primary: #6031d8;
    --secondary: #020024;
    --accent: #4700c2;
    background: var(--background);
}

.hero{
    overflow: hidden;
    border-collapse: separate;
    border-radius: 20px;
    border-style: solid;
    border-color: var(--accent);
    background: var(--background)
}

.hero-title{
    margin-top: 8px;
    text-align: center;
    font-size: clamp(32px, 8vw, 60px);
    color: var(--text);
    margin-bottom: 15px;
}
.hero-subtitle{
    margin: 0;
    margin-bottom: 15px;
    padding: 0 12px;
    text-align: center;
}

@media (max-width: 600px) {
  .hero-title{
    margin-bottom: 15px;
  }
  .hero-subtitle{
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
    font-size: clamp(14px, 3.5vw, 18px);
  }
}

.paragraph{
    margin-top: 10px;
    border-radius: 20px;
    border-style: solid;
    border-color: var(--accent);
    background-color: #010104;
    margin-bottom: 20px;
}
.paragraph-header{
    padding-left: 20px;
    color: var(--text);
}
.paragraph-text{
    margin-top: -15;
    padding-left: 20px;
    padding-right: 13px;
    color: var(--text);
}

/* Carousel - conforme allo stile della pagina */
.carousel {
  --items: 4;
  --carousel-duration: 40s;
  --carousel-item-width: 280px;
  --carousel-item-height: 450px;
  --carousel-item-gap: 2rem;
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: var(--carousel-item-height);
  overflow: hidden;
  border-radius: 20px;
  border-bottom: 2px solid var(--primary);
  background: var(--background);
  margin: 0 auto;
}
@media (min-width: 600px) {
  .carousel { --carousel-duration: 30s; }
}
.carousel[mask] {
  mask-image: linear-gradient(to right, transparent, black 10% 90%, transparent);
}
.carousel[reverse] > article { animation-direction: reverse; }
.carousel:hover > article { animation-play-state: paused; }

.carousel > article {
  position: absolute;
  top: 0;
  left: calc(var(--i) * (var(--carousel-item-width) + var(--carousel-item-gap)));
  width: var(--carousel-item-width);
  height: var(--carousel-item-height);
  display: grid;
  grid-template-rows: 200px auto 1fr auto;
  gap: 0.25rem;
  border: 1px solid var(--primary);
  padding-block-end: 1rem;
  border-radius: 20px;
  background: var(--background);
  color: var(--text);
  font-family: inherit;
  will-change: transform;
  animation-name: marquee;
  animation-duration: var(--carousel-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}
.carousel > article:nth-child(1) { --i: 0; }
.carousel > article:nth-child(2) { --i: 1; }
.carousel > article:nth-child(3) { --i: 2; }
.carousel > article:nth-child(4) { --i: 3; }
.carousel > article:nth-child(5) { --i: 4; }
.carousel > article:nth-child(6) { --i: 5; }
.carousel > article:nth-child(7) { --i: 6; }
.carousel > article:nth-child(8) { --i: 7; }

.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
}
.carousel > article > *:not(img) { padding: 0 1rem; }
.carousel > article > div {
  grid-row: span 2;
  display: grid;
  grid-auto-rows: auto; /* compat per subgrid */
  font-size: 0.9rem;
}
.carousel > article h2 {
  font-size: 1.2rem;
  font-weight: 300;
  padding-block: 0.75rem 0.25rem;
  margin: 0;
  color: var(--text);
}
.carousel > article p {
  margin: 0;
  color: var(--text);
}
.carousel > article a {
  text-decoration: none;
  text-transform: lowercase;
  border: 2px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
  place-self: start;
  transition: 150ms ease-in-out;
}
.carousel > article a:hover,
.carousel > article a:focus-visible {
  background-color: var(--accent);
  color: var(--text);
  outline: none;
}

/* Accessibilità: riduci animazioni se richiesto */
@media (prefers-reduced-motion: reduce) {
  .carousel > article {
    animation: none !important;
  }
}

/* Responsive mobile */
@media (max-width: 600px) {
  .carousel {
    --carousel-item-width: min(85vw, 340px);
    --carousel-item-height: 380px;
    --carousel-item-gap: 1rem;
  }
  .carousel > article {
    grid-template-rows: 160px auto 1fr auto;
  }
  .carousel > article h2 {
    font-size: 1rem;
  }
  .carousel > article > div {
    font-size: 0.85rem;
  }
}

@keyframes marquee {
  100% {
    transform: translateX(
      calc((var(--items) * (var(--carousel-item-width) + var(--carousel-item-gap))) * -1)
    );
  }
}
.bottoni {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.bottone {
  font-size: x-large;
  background-color: var(--primary);
  color: var(--text);
  border-style: solid;
  border-radius: 5px;
  border-width: 5px;
  border-color: var(--primary)
}

.bottone:hover,
.bottone:focus-visible {
  transition: 0.3s;
  background-color: var(--accent);
  border-color: var(--accent);
  cursor: pointer;
}

.paragraph-contacts{
    text-align: center;
    color: var(--text);
}

.link-btn {
  text-decoration: none;
  color: var(--text);
}