*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



:root {

  --bg: #0d0d0f;

  --bg-elevated: #16161a;

  --red: #d4001a;

  --red-dark: #b80015;

  --white: #f5f5f7;

  --muted: rgba(245, 245, 247, 0.55);

  --border: rgba(255, 255, 255, 0.08);

}



html {

  font-size: 16px;

  -webkit-font-smoothing: antialiased;

}



body {

  font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;

  background: var(--bg);

  color: var(--white);

  min-height: 100dvh;

  overflow-x: hidden;

}



/* Sfondo con bagliori */

.bg-glow {

  position: fixed;

  border-radius: 50%;

  filter: blur(120px);

  pointer-events: none;

  z-index: 0;

}



.bg-glow--red {

  width: 500px;

  height: 500px;

  background: var(--red-dark);

  opacity: 0.18;

  top: -180px;

  left: -120px;

}



.bg-glow--white {

  width: 400px;

  height: 400px;

  background: #fff;

  opacity: 0.03;

  bottom: -100px;

  right: -80px;

}



.page {

  position: relative;

  z-index: 1;

  min-height: 100dvh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 3rem 1.5rem;

  max-width: 720px;

  margin: 0 auto;

  text-align: center;

}



/* Logo */

.brand {

  display: inline-flex;

  align-items: center;

  gap: 1.25rem;

  margin-bottom: 3rem;

  animation: fadeUp 0.8s ease both;

}



.brand__emblem {

  width: 110px;

  height: auto;

  flex-shrink: 0;

  filter: drop-shadow(0 10px 36px rgba(212, 0, 26, 0.22));

}



.brand__text {

  text-align: left;

}



.brand__name {

  font-family: 'Barlow Condensed', 'Segoe UI', sans-serif;

  font-size: clamp(2rem, 6vw, 2.75rem);

  font-weight: 700;

  letter-spacing: 0.04em;

  line-height: 1;

  color: var(--white);

}



.brand__suffix {

  font-size: 0.35em;

  font-weight: 500;

  letter-spacing: 0.12em;

  vertical-align: super;

  margin-left: 0.15em;

}



.brand__tagline {

  margin-top: 0.5rem;

  font-family: 'Barlow Condensed', 'Segoe UI', sans-serif;

  font-size: clamp(0.65rem, 2vw, 0.75rem);

  font-weight: 500;

  letter-spacing: 0.22em;

  color: var(--muted);

}



.brand__dot {

  color: var(--red);

  font-size: 0.85em;

}



/* Hero */

.hero {

  animation: fadeUp 0.8s 0.15s ease both;

}



.hero__badge {

  display: inline-block;

  font-size: 0.75rem;

  font-weight: 600;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--red);

  background: rgba(212, 0, 26, 0.12);

  border: 1px solid rgba(212, 0, 26, 0.28);

  padding: 0.45rem 1.1rem;

  border-radius: 100px;

  margin-bottom: 1.5rem;

}



.hero__title {

  font-size: clamp(1.75rem, 5vw, 2.5rem);

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -0.02em;

  margin-bottom: 1.25rem;

}



.hero__text {

  font-size: 1.05rem;

  font-weight: 300;

  line-height: 1.7;

  color: var(--muted);

  max-width: 520px;

  margin: 0 auto;

}



.hero__highlight {

  color: var(--white);

  font-weight: 500;

}



/* Barra di progresso decorativa */

.progress {

  width: 100%;

  max-width: 360px;

  margin: 3rem 0;

  animation: fadeUp 0.8s 0.3s ease both;

}



.progress__bar {

  height: 3px;

  background: var(--border);

  border-radius: 100px;

  overflow: hidden;

}



.progress__fill {

  height: 100%;

  width: 45%;

  background: linear-gradient(90deg, var(--red-dark), var(--red));

  border-radius: 100px;

  animation: pulse 2.5s ease-in-out infinite;

}



.progress__label {

  margin-top: 0.75rem;

  font-size: 0.8rem;

  color: var(--muted);

  letter-spacing: 0.1em;

}



/* Footer */

.footer {

  margin-top: auto;

  padding-top: 2rem;

  animation: fadeUp 0.8s 0.45s ease both;

}



.footer__contact {

  font-size: 0.9rem;

  color: var(--muted);

  margin-bottom: 0.5rem;

}



.footer__contact a {

  color: var(--white);

  text-decoration: none;

  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  transition: border-color 0.2s, color 0.2s;

}



.footer__contact a:hover {

  color: var(--red);

  border-color: var(--red);

}



.footer__copy {

  font-size: 0.75rem;

  color: rgba(245, 245, 247, 0.3);

  letter-spacing: 0.05em;

}



/* Animazioni */

@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes pulse {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.6; }

}



/* Responsive */

@media (max-width: 480px) {

  .page {

    padding: 2rem 1.25rem;

  }



  .brand {

    flex-direction: column;

    gap: 1rem;

    margin-bottom: 2rem;

  }



  .brand__text {

    text-align: center;

  }



  .brand__emblem {

    width: 90px;

  }



  .hero__text {

    font-size: 0.95rem;

  }

}