:root {
      --cyan: #00AEEF;
      --orange: #E85D1F;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      background: #0a0a0a;
      color: #fff;
      overflow-x: hidden;
    }

    /* ── animated noise grain overlay ── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      background-size: 180px;
      pointer-events: none;
      z-index: 100;
      opacity: .45;
    }

    /* ── 3D rotating ring ── */
    .scene {
      perspective: 900px;
    }
    .ring-wrap {
      width: 340px;
      height: 340px;
      position: relative;
      transform-style: preserve-3d;
      animation: rotateRing 14s linear infinite;
    }
    @keyframes rotateRing {
      from { transform: rotateY(0deg) rotateX(20deg); }
      to   { transform: rotateY(360deg) rotateX(20deg); }
    }
    .ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 18px solid transparent;
    }
    .ring-outer {
      border-color: rgba(0,174,239,.55);
      box-shadow: 0 0 32px rgba(0,174,239,.25), inset 0 0 24px rgba(0,174,239,.12);
    }
    .ring-mid {
      inset: 36px;
      border-color: rgba(0,174,239,.25);
      border-width: 8px;
      animation: rotateRing 9s linear infinite reverse;
    }
    .ring-inner {
      inset: 72px;
      border-color: rgba(232,93,31,.45);
      border-width: 5px;
      box-shadow: 0 0 24px rgba(232,93,31,.3);
      animation: rotateRing 5s linear infinite;
    }
    .ring-dot {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 14px 4px rgba(0,174,239,.7);
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
    }

    /* ── glowing radial backdrop ── */
    .glow-bg {
      position: absolute;
      inset: -60px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center,
        rgba(0,174,239,.12) 0%,
        rgba(0,174,239,.04) 45%,
        transparent 72%);
      pointer-events: none;
      animation: pulse 4s ease-in-out infinite;
    }
    @keyframes pulse {
      0%,100% { opacity: 1; transform: scale(1); }
      50%      { opacity: .6; transform: scale(1.06); }
    }

    /* ── email input ── */
    .input-wrap {
      position: relative;
      display: flex;
      max-width: 440px;
      width: 100%;
    }
    .email-input {
      flex: 1;
      padding: .75rem 1.25rem;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
      border-right: none;
      border-radius: 4px 0 0 4px;
      color: #fff;
      font-family: 'Barlow', sans-serif;
      font-size: .95rem;
      outline: none;
      transition: border-color .25s, fill-color .25s;
    }
    .email-input::placeholder { color: rgba(255,255,255,.3); }
    .email-input:focus {
      border-color: var(--cyan);
      background: rgba(0,174,239,.07);
    }
    .send-btn {
      padding: .75rem 1.4rem;
      background: var(--orange);
      color: #fff;
      font-family: 'Barlow', sans-serif;
      font-weight: 700;
      font-size: .9rem;
      letter-spacing: .07em;
      text-transform: uppercase;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: fill-color .2s, box-shadow .2s;
    }
    .send-btn:hover {
      background: #ff6b2a;
      box-shadow: 0 0 22px rgba(232,93,31,.45);
    }

    /* ── divider line ── */
    .divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0, 174, 239), transparent);
    }

    /* ── social icons ── */
    .social-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 4px;
      color: rgba(255,255,255,.55);
      transition: border-color .2s, color .2s, box-shadow .2s;
    }
    .social-icon:hover {
      border-color: var(--cyan);
      color: var(--cyan);
      box-shadow: 0 0 12px rgba(0,174,239,.25);
    }

    /* ── fade-in on load ── */
    .fade-in {
      opacity: 0;
      transform: translateY(22px);
      animation: fadeUp .8s forwards;
    }
    @keyframes fadeUp {
      to { opacity: 1; transform: translateY(0); }
    }
    .delay-1 { animation-delay: .15s; }
    .delay-2 { animation-delay: .32s; }
    .delay-3 { animation-delay: .5s;  }
    .delay-4 { animation-delay: .68s; }
    .delay-5 { animation-delay: .85s; }

    /* ── top gradient bar ── */
    .top-bar {
      height: 3px;
      background: linear-gradient(90deg, var(--orange), var(--cyan), var(--orange));
      background-size: 200% 100%;
      animation: shimmer 3s linear infinite;
    }
    @keyframes shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .copyright {
        background-color: #00AEEF;
        color: #fff;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .video-sfondo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    background: rgba(0, 0, 0, 1);
    z-index: -100;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Sfocatura interna nera (cambia colore se serve) */
    box-shadow: inset 0 0 0 200px rgba(0,0,0,0.5); 
    pointer-events: none; /* Clicca attraverso l'ombra */
    object-fit: cover;
  }