:root{ --title-shine-duration: 6s; 
  --brand1:#7c3aed; --brand2:#8b5cf6; --brand3:#06b6d4;
  --brand-grad:linear-gradient(90deg,var(--brand1) 0%,var(--brand2) 42%,var(--brand3) 100%);
  --bg:#eef2f6; --card:#ffffffcc; --text:#0f172a; --muted:#6b7280;
  --radius:18px; --shadow:0 12px 28px rgba(2,6,23,.08);
}

/* base */
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);
  background-image:url("/images/lab-bg.jpg");background-size:cover;background-position:center;background-attachment:fixed;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* lieve aurora sopra lo sfondo */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(50% 60% at 20% 20%,rgba(56,189,248,.26),transparent 60%),
    radial-gradient(60% 70% at 80% 30%,rgba(167,139,250,.30),transparent 60%),
    radial-gradient(70% 80% at 50% 90%,rgba(59,130,246,.22),transparent 60%);
  filter:blur(26px);animation:aurora 16s ease-in-out infinite alternate;
}
@keyframes aurora{from{transform:translateY(-6px)}to{transform:translateY(10px)}}

.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* HEADER */
.app-header{position:sticky;top:0;z-index:60;background:var(--brand-grad);box-shadow:0 14px 36px rgba(124,58,237,.25)}
.header-wrap{display:flex;align-items:center;justify-content:center;gap:12px;height:82px;color:#fff}
.logo{width:38px;height:38px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}

/* Titolo con effetto gloss identico a chat/training */
.title {
  margin:0;
  font-weight:900;
  letter-spacing:.2px;
  font-size:clamp(22px,3.2vw,34px);
  color:#fff;
  text-align:center;
  position:relative;
  white-space:nowrap;
}
.title--gloss::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 15%,transparent 30%);
  background-size:200% 100%;
  mix-blend-mode:screen;
  animation: gloss var(--title-shine-duration) linear infinite;
  pointer-events:none;
}
@keyframes gloss{
  from{background-position-x:200%}
  to{background-position-x:-200%}
}

main{padding:clamp(20px,4vw,44px) 0}

/* INTRO */
.intro{background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:var(--shadow);padding:clamp(16px,3.6vw,24px);margin-bottom:clamp(18px,3vw,28px);text-align:center}
.intro p{margin:0;color:var(--muted)}

/* GRIGLIA */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,2.4vw,22px)}
.card{
  position:relative;overflow:hidden;
  display:block;text-decoration:none;color:inherit;background:var(--card);backdrop-filter:blur(8px);
  border:1px solid #e5e7eb;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 16px;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.12);border-color:#e2e8f0}

/* ICONA: WOW */
.icon{width:88px;height:88px;margin:4px auto 10px;display:grid;place-items:center;position:relative}
.icon svg,.icon img{width:88px;height:88px;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.15))}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.grid .card:nth-child(odd) .icon svg,
.grid .card:nth-child(odd) .icon img{animation:breathe 4.8s ease-in-out infinite}
.grid .card:nth-child(even) .icon svg,
.grid .card:nth-child(even) .icon img{animation:floatY 5.2s ease-in-out infinite}

/* alone + SCINTILLE SEMPRE ATTIVE */
.icon::before{
  content:""; position:absolute; inset:-6px; border-radius:22px; z-index:-1; opacity:.35;
  background:conic-gradient(from 0deg,#7c3aed33,#8b5cf655,#06b6d433,#7c3aed33);
  filter:blur(8px); animation:spin 8s linear infinite;
}
.icon::after{
  content:""; position:absolute; left:50%; top:50%; width:190%; height:190%; transform:translate(-50%,-50%);
  background-image:
    radial-gradient(circle, var(--brand1) 0 2.5px, transparent 3.5px),
    radial-gradient(circle, var(--brand3) 0 3px,   transparent 4px),
    radial-gradient(circle, var(--brand1) 0 2.5px, transparent 3.5px),
    radial-gradient(circle, var(--brand3) 0 3px,   transparent 4px),
    radial-gradient(circle, var(--brand1) 0 2px,   transparent 3px),
    radial-gradient(circle, var(--brand3) 0 2px,   transparent 3px);
  background-repeat:no-repeat;
  background-size:9px 9px,11px 11px,9px 9px,11px 11px,8px 8px,8px 8px;
  opacity:.75; animation:orbit 7.2s linear infinite;
}
.card:hover .icon::after{opacity:.75}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes orbit{
  0%{background-position:0% 50%,50% 0%,100% 50%,50% 100%}
  50%{background-position:30% 10%,90% 40%,70% 90%,20% 60%}
  100%{background-position:0% 50%,50% 0%,100% 50%,50% 100%}
}

/* LUCE radiale che segue il puntatore */
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background:radial-gradient(160px 160px at var(--rx,50%) var(--ry,50%), #ffffff99, transparent 60%);transition:opacity .18s;}
.card:hover::after{opacity:.35}

/* ripple click (mobile/desktop) */
.card .ripple{
  position:absolute;width:8px;height:8px;border-radius:999px;pointer-events:none;
  background:#fff;filter:blur(2px);opacity:.65;transform:translate(-50%,-50%) scale(1);
  animation:ripple .6s ease-out forwards;
}
@keyframes ripple{to{opacity:0;transform:translate(-50%,-50%) scale(12)}}

/* testo */
.card h2{margin:8px 0 6px;font-size:18px;font-weight:800}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}

/* fade-in */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .4s ease, transform .4s ease}
.reveal.in{opacity:1;transform:none}

/* footer */
.footer{padding:clamp(18px,3.6vw,24px) 0 28px;color:var(--muted);font-size:14px;text-align:center}

/* mobile tuning */
@media (max-width:640px){
  .icon::before{opacity:.28}
}

/* riduzione motion */
@media (prefers-reduced-motion:reduce){
  .title--gloss::after, body::before, .grid .icon svg, .grid .icon img, .icon::before, .icon::after{
    animation:none !important;transition:none !important
  }
}