/* ============================================
   HERO CASCIANA - replica 1:1 di HeroSection.tsx
   ============================================ */
.csc-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
@media (min-width:768px){ .csc-hero{ max-height:900px; } }
@media (min-width:1024px){ .csc-hero{ max-height:1000px; } }

.csc-hero__bg { position:absolute; inset:0; }
.csc-hero__bg img { width:100%; height:100%; object-fit:cover; }

.csc-hero__inner {
  position:relative; z-index:10;
  padding-left:clamp(16px,4vw,80px); padding-right:clamp(16px,4vw,80px);
  padding-top:120px; padding-bottom:16px;
  display:flex; flex-direction:column; flex:1;
}
@media (min-width:1024px){ .csc-hero__inner{ padding-top:130px; padding-bottom:32px; } }

.csc-hero__center { display:flex; flex-direction:column; flex:1; }

/* SVG centrale "Ogni goccia conta" */
.csc-hero__svgwrap {
  flex:1; display:flex; align-items:center; justify-content:center;
}
.csc-hero__svginner {
  perspective:3000px;
  display:flex; justify-content:center; align-items:center;
  opacity:0; transform:scale(0.95);
  animation: cscHeroIn 0.8s ease forwards;
}
@keyframes cscHeroIn { to { opacity:1; transform:scale(1); } }

.csc-hero__svg {
  width:60vw; max-width:280px; height:auto; overflow:visible; cursor:pointer;
}
@media (min-width:768px){ .csc-hero__svg{ width:50vw; max-width:340px; } }
@media (min-width:1024px){ .csc-hero__svg{ width:40vw; max-width:400px; } }

/* Le 5 gocce animate - transizione 3D identica al React */
.csc-drop {
  transition: all 1200ms cubic-bezier(0.34,1.56,0.64,1);
  transform-origin:center;
  transform:none; filter:none;
}
/* Hover: ogni goccia esplode in 3D (valori esatti dal componente React) */
.csc-hero__svg:hover .csc-drop--1 { transform:translateX(-80px) translateY(-60px) translateZ(350px) scale(1.45) rotate(15deg); filter:drop-shadow(0 45px 90px rgba(0,0,0,0.35)) brightness(1.1); }
.csc-hero__svg:hover .csc-drop--2 { transform:translateX(65px) translateY(-45px) translateZ(250px) scale(1.35) rotate(-12deg); filter:drop-shadow(0 40px 70px rgba(0,0,0,0.3)) brightness(1.08); }
.csc-hero__svg:hover .csc-drop--3 { transform:translateX(70px) translateY(40px) translateZ(150px) scale(1.25) rotate(10deg); filter:drop-shadow(0 35px 60px rgba(0,0,0,0.28)) brightness(1.05); }
.csc-hero__svg:hover .csc-drop--4 { transform:translateX(-50px) translateY(35px) translateZ(80px) scale(1.18) rotate(-6deg); filter:drop-shadow(0 25px 45px rgba(0,0,0,0.25)) brightness(1.03); }
.csc-hero__svg:hover .csc-drop--5 { transform:translateX(40px) translateY(-30px) translateZ(200px) scale(1.3) rotate(8deg); filter:drop-shadow(0 38px 65px rgba(0,0,0,0.32)) brightness(1.06); }

/* Card navigabili in basso - grid con stagger */
.csc-hero__cards {
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
  max-width:1100px; margin:auto auto 0; width:100%;
}
@media (min-width:768px){ .csc-hero__cards{ gap:12px; } }
@media (min-width:1024px){ .csc-hero__cards{ grid-template-columns:repeat(4,1fr); gap:16px; } }

.csc-hero__card {
  background:#ececec; border-radius:14px; padding:10px;
  min-height:115px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  text-decoration:none; transition:all 0.3s;
  opacity:0; transform:translateY(30px);
  animation: cscCardIn 0.6s ease forwards;
  animation-delay: calc(0.3s + var(--i,0) * 0.1s);
}
@media (min-width:768px){ .csc-hero__card{ border-radius:18px; padding:14px; min-height:135px; } }
@media (min-width:1024px){ .csc-hero__card{ border-radius:22px; padding:20px; min-height:165px; } }
@keyframes cscCardIn { to { opacity:1; transform:translateY(0); } }

.csc-hero__card:hover { box-shadow:0 10px 25px rgba(0,0,0,0.12); transform:translateY(-4px); }

.csc-hero__card h3 {
  font-size:14px; font-weight:700; color:#3183ba; line-height:1.2; margin:0;
}
@media (min-width:768px){ .csc-hero__card h3{ font-size:18px; } }
@media (min-width:1024px){ .csc-hero__card h3{ font-size:22px; } }

.csc-hero__icon { margin-top:12px; }
.csc-hero__icon img { height:24px; width:auto; object-fit:contain; opacity:0.6; transition:opacity 0.3s; }
@media (min-width:1024px){ .csc-hero__icon img{ height:36px; } }
.csc-hero__card:hover .csc-hero__icon img { opacity:1; }

.csc-hero__sublinks { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:8px; }
.csc-hero__sublinks a {
  font-size:9px; color:rgba(49,131,186,0.7); font-weight:600; line-height:1.1;
  text-decoration:none; transition:all 0.2s; position:relative;
}
@media (min-width:1024px){ .csc-hero__sublinks a{ font-size:12px; } }
.csc-hero__sublinks a:hover { color:#3183ba; transform:scale(1.05); }
.csc-hero__sublinks a::after {
  content:''; position:absolute; width:100%; height:1px; background:#3183ba;
  bottom:0; left:0; transform:scaleX(0); transform-origin:left; transition:transform 0.3s;
}
.csc-hero__sublinks a:hover::after { transform:scaleX(1); }
.csc-sep { width:1px; height:8px; background:rgba(49,131,186,0.4); margin:0 4px; }
@media (min-width:1024px){ .csc-sep{ height:12px; } }

/* Touch: stesso effetto hover su tap */
.csc-hero__svg.csc-hover .csc-drop--1 { transform:translateX(-80px) translateY(-60px) translateZ(350px) scale(1.45) rotate(15deg); filter:drop-shadow(0 45px 90px rgba(0,0,0,0.35)) brightness(1.1); }
.csc-hero__svg.csc-hover .csc-drop--2 { transform:translateX(65px) translateY(-45px) translateZ(250px) scale(1.35) rotate(-12deg); filter:drop-shadow(0 40px 70px rgba(0,0,0,0.3)) brightness(1.08); }
.csc-hero__svg.csc-hover .csc-drop--3 { transform:translateX(70px) translateY(40px) translateZ(150px) scale(1.25) rotate(10deg); filter:drop-shadow(0 35px 60px rgba(0,0,0,0.28)) brightness(1.05); }
.csc-hero__svg.csc-hover .csc-drop--4 { transform:translateX(-50px) translateY(35px) translateZ(80px) scale(1.18) rotate(-6deg); filter:drop-shadow(0 25px 45px rgba(0,0,0,0.25)) brightness(1.03); }
.csc-hero__svg.csc-hover .csc-drop--5 { transform:translateX(40px) translateY(-30px) translateZ(200px) scale(1.3) rotate(8deg); filter:drop-shadow(0 38px 65px rgba(0,0,0,0.32)) brightness(1.06); }