:root {
      --bg-1: #244f49;
      --bg-2: #36796d;
      --green: #36796d;
      --yellow: #f0a133;
      --accent: #f0a133;
      --text: #ffffff;
      --muted: #edf5f2;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      min-height: 100svh;
      display: grid;
      place-items: center;
      padding: 32px 20px;
      overflow: hidden;
      color: var(--text);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(ellipse at 18% 20%, rgba(240, 161, 51, .20), transparent 42%),
        radial-gradient(ellipse at 85% 78%, rgba(255, 255, 255, .13), transparent 38%),
        linear-gradient(135deg, var(--bg-1), var(--bg-2));
    }

    /* Cerchi decorativi sullo sfondo */
    body::before,
    body::after {
      content: "";
      position: fixed;
      width: 340px;
      height: 340px;
      border: 1px solid rgba(255, 255, 255, .10);
      border-radius: 50%;
      pointer-events: none;
    }

    body::before {
      top: -170px;
      right: -100px;
      box-shadow: 0 0 0 35px rgba(255,255,255,.025),
                  0 0 0 70px rgba(255,255,255,.02);
    }

    body::after {
      bottom: -220px;
      left: -120px;
      width: 440px;
      height: 440px;
      box-shadow: 0 0 0 40px rgba(255,255,255,.025);
    }

    .maintenance {
      position: relative;
      z-index: 1;
      width: min(100%, 680px);
      padding: clamp(30px, 6vw, 64px) clamp(22px, 6vw, 58px);
      text-align: center;
      background: rgba(255, 255, 255, .055);
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 28px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 38px;
      text-decoration: none;
    }

    .logo img {
      display: block;
      max-width: 190px;
      max-height: 76px;
      width: auto;
      height: auto;
      object-fit: contain;
    }

    /* Logo testuale di riserva: viene mostrato se l'immagine non è disponibile */
    .logo-fallback {
      display: none;
      color: var(--text);
      font-size: 1.3rem;
      font-weight: 750;
      letter-spacing: .04em;
    }

    .icon {
      width: 76px;
      height: 76px;
      margin: 0 auto 24px;
      display: grid;
      place-items: center;
      color: var(--yellow);
      background: rgba(240, 161, 51, .12);
      border: 1px solid rgba(240, 161, 51, .34);
      border-radius: 22px;
    }

    .icon svg {
      width: 38px;
      height: 38px;
      animation: turn 18s linear infinite;
    }

    .eyebrow {
      margin: 0 0 12px;
      color: var(--yellow);
      font-size: .78rem;
      font-weight: 750;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font-size: clamp(2rem, 6vw, 3.5rem);
      line-height: 1.08;
      letter-spacing: -.045em;
    }

    .description {
      max-width: 470px;
      margin: 22px auto 0;
      color: var(--muted);
      font-size: clamp(1rem, 2.5vw, 1.1rem);
      line-height: 1.75;
    }

    .status {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: 32px;
      padding: 10px 15px;
      color: #e7edf5;
      font-size: .88rem;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 999px;
      background: rgba(255,255,255,.045);
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--yellow);
      box-shadow: 0 0 12px rgba(240, 161, 51, .75);
    }

    .contact-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 28px;
      padding: 13px 20px;
      color: #213d37;
      background: var(--yellow);
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 999px;
      font-weight: 750;
      text-decoration: none;
      transition: transform .2s ease, filter .2s ease;
    }

    .contact-button:hover {
      transform: translateY(-2px);
      filter: brightness(1.06);
    }

    .contact-button:focus-visible,
    .contact-email a:focus-visible,
    .logo:focus-visible {
      outline: 3px solid #ffffff;
      outline-offset: 4px;
    }

    .contact-button svg {
      width: 19px;
      height: 19px;
    }

    .contact-email {
      margin: 14px 0 0;
      color: var(--muted);
      font-size: .9rem;
    }

    .contact-email a {
      color: #ffffff;
      font-weight: 700;
      text-decoration-color: var(--yellow);
      text-underline-offset: 3px;
    }

    footer {
      margin-top: 38px;
      color: rgba(255, 255, 255, .72);
      font-size: .82rem;
    }

    @keyframes turn {
      to { transform: rotate(360deg); }
    }

    @media (max-width: 480px) {
      .maintenance { border-radius: 22px; }
      .logo { margin-bottom: 30px; }
      .icon { width: 66px; height: 66px; border-radius: 19px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
      }
    }