/* ======================================================
   RESET & BASE
====================================================== */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:linear-gradient(90deg,#9B32F2,#D31BA2);
  color:#e9e9ef;
  overflow-x:hidden;
}

/* ======================================================
   CURSORE PERSONALIZZATO
====================================================== */
html, body{
  cursor:url("zampa.png") 16 16, auto;
}

a,
button,
.hero-cta,
.setup-card,
.setup-cta,
.social-links a{
  cursor:url("zampa.png") 16 16, pointer;
}

/* ======================================================
   UTILITY
====================================================== */
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{
  width:min(1100px,92%);
  margin:0 auto;
}

section{
  padding:48px 0;
  scroll-margin-top:90px;
}

p{ line-height:1.7; }

/* ======================================================
   ACCESSIBILITÀ
====================================================== */
.skip-link{
  position:absolute;
  left:-999px;
  top:12px;
  padding:10px 12px;
  background:#fff;
  color:#000;
  border-radius:10px;
  z-index:9999;
}
.skip-link:focus{ left:12px; }

/* ======================================================
   BACKGROUND
====================================================== */
.particles-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:linear-gradient(180deg,#9B32F2,#D31BA2);
}

/* ======================================================
   TITOLI
====================================================== */
/* =========================
   Tipografia titoli (Lilita One – globale)
========================= */
/* ======================================================
   TITOLI – TIPOGRAFIA GLOBALE
====================================================== */
h1,
.hero-title{
  font-family: "Lilita One", cursive;
  letter-spacing: 0.6px;
  color: #fff;
}

/* Tutti gli altri titoli tornano a Inter */
h2,
h3{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #fff;
}

.title-center{
  text-align:center;
}
/* ======================================================
   HERO
====================================================== */
.hero{
  text-align:center;
  padding:40px 0;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.hero-content{
  position:relative;
  z-index:2;
  display:grid;
  gap:8px;
  justify-items:center;
}

.hero-title{
  font-family:"Lilita One",cursive;
  font-size:clamp(44px,7vw,76px);
  line-height:1.05;
  margin:0;
  position:relative;
  text-shadow:0 0 25px rgba(211,27,162,.45);
}

/* Shine titolo */
.hero-title::after{
  content:"";
  position:absolute;
  inset:-6px -12px;
  background:linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.14) 35%,
    transparent 70%);
  transform:translateX(-120%);
  animation:shine 3.8s ease-in-out infinite;
}

@keyframes shine{
  0%{ transform:translateX(-120%); opacity:0; }
  20%{ opacity:1; }
  50%{ transform:translateX(120%); }
  70%,100%{ opacity:0; }
}

.hero-subtitle{
  font-size:17px;
  opacity:.95;
  margin:0;
}

/* Glow orbs */
.hero-glow{
  position:absolute;
  inset:-40px;
  z-index:1;
  pointer-events:none;
}

.glow-orb{
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  filter:blur(85px);
  opacity:.55;
  animation:float 8s ease-in-out infinite;
}

.orb-1{ top:10%; left:12%; background:rgba(211,27,162,.65); }
.orb-2{ top:55%; left:58%; background:rgba(140,59,255,.65); animation-delay:1.5s; }
.orb-3{ top:22%; right:10%; background:rgba(0,255,200,.5); animation-delay:3s; }

@keyframes float{
  0%,100%{ transform:translate(0); }
  50%{ transform:translate(20px,-25px); }
}

/* ======================================================
   AVATAR
====================================================== */
.avatar-wrapper{
  width:260px;
  height:260px;
  margin-bottom:6px;
  display:grid;
  place-items:center;
}

.chi-sono-avatar{
  width:250px;
  height:250px;
}

.chi-sono-avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* ======================================================
   GLASS PANEL
====================================================== */
.glass{
  background:rgba(10,5,20,.22);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  padding:22px 18px;
}

.glass-center{
  width:min(900px,92%);
  margin:0 auto;
  text-align:center;
}

/* ======================================================
   LIVE
====================================================== */
.live{
  width:min(1100px,92%);
  margin:0 auto;
}

.live iframe{
  width:100%;
  height:min(720px,70vh);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 70px rgba(0,0,0,.35);
}

/* ======================================================
   SETUP (HARDWARE + POSTAZIONE)
====================================================== */
.setup h2{
  font-family:"Lilita One",cursive;
  font-size:clamp(30px,3.6vw,40px);
}

.setup-subtitle{
  max-width:720px;
  margin:8px auto 28px;
  opacity:.9;
  text-align:center;
}

.setup-grid{
 display:flex;
  justify-content:center;
  align-items:stretch;
  gap:28px;
  flex-wrap:wrap;
}

@media(max-width:720px){
  .setup-grid{ grid-template-columns:1fr; }
}

.setup-card{
cursor: default;
  position:relative;
  padding:32px 26px;
  border-radius:24px;
  display:inline-grid;
  gap:16px;
  background:rgba(10,5,20,.22);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 60px rgba(0,0,0,.25);
align-items:center;
  justify-items:center;
  text-align:center;
width: fit-content;
  max-width: 420px;
  transition:.22s ease;
}

/* Shine */
.setup-card::before{
  content:"";
  position:absolute;
  inset:0;                       
  pointer-events: none;
  border-radius:inherit;
  opacity:0;
  transition:.22s ease;
}

.setup-card:hover{
  transform:translateY(-4px);
  background:rgba(47,41,213,.22);
  box-shadow:0 28px 90px rgba(47,41,213,.35);
}

.setup-card:hover::before{ opacity:1; }

.setup-icon{
  font-size:48px; /* prima 36px */
  line-height:1;
  margin-bottom:4px;

  color:#fff;
  filter:
    drop-shadow(0 0 18px rgba(255,255,255,.25))
    drop-shadow(0 0 28px rgba(47,41,213,.35));

  transition:transform 180ms ease, filter 180ms ease;
}

.setup-card:hover .setup-icon{
  transform: scale(1.08);
  filter:
    drop-shadow(0 0 22px rgba(255,255,255,.35))
    drop-shadow(0 0 36px rgba(47,41,213,.45));
}


.setup-card h3{
  font-size: 24px;
  text-shadow: 0 0 18px rgba(255,255,255,0.25);
}

.setup-card p{
  font-size:15px;
  opacity:.95;
}

.setup-cta{
cursor: pointer;
  margin-top:10px;
  padding:12px 22px;
  border-radius:14px;
  background:#d31ba2;
  font-weight:700;
  transition:.18s ease;
}

.setup-cta:hover{
  background:#2F29D5;
  box-shadow:0 14px 40px rgba(47,41,213,.35);
  transform:translateY(-2px);
}

/* ======================================================
   SOCIAL
====================================================== */

.hero-social{
  display:flex;
  justify-content:center;
  gap:16px;

  margin-top:14px;
}

.hero-social a{
  width:65px;
  height:65px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  transition:.18s ease;
}

.hero-social a:hover{
  background:#2F29D5;
  transform:translateY(-2px);

  box-shadow:
    0 16px 40px rgba(47,41,213,.35),
    0 0 22px rgba(47,41,213,.45);
}

.hero-social a:hover i{
  transform: scale(1.25);
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.35))
    drop-shadow(0 0 18px rgba(47,41,213,.45));
}

/* ======================================================
   FOOTER
====================================================== */
footer{
  padding:24px 0 40px;
  text-align:center;
  opacity:.85;
  border-top:1px solid rgba(255,255,255,.08);
}

/* ======================================================
   REVEAL
====================================================== */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:.6s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* ======================================================
   MOBILE
====================================================== */
@media(max-width:600px){
  section{ padding:36px 0; }
  .avatar-wrapper{ width:220px; height:220px; }
  .chi-sono-avatar{ width:200px; height:200px; }
.setup-card{
    width: 100%;
    max-width: 92%;
}
}