html{
  scroll-behavior: smooth;
}
body{
  font-family: 'inter';
}

.hero-image-shadow {
  /* X: 0 | Y: 5px | Blur: 60px | Couleur noire transparente */
  filter: drop-shadow(0px 5px 30px rgba(0, 0, 0, 0.12))
}
.card-unboxing {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03) !important;
}

/* L'effet de surprise quand la souris passe dessus */
.card-unboxing:hover {
  transform: translateY(-6px); /* La carte se soulève de 6 pixels */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important; /* L'ombre s'étale en douceur, comme si la carte flottait plus haut */
}
.symbol-node { fill: #000000; }
.symbol-line { stroke: #000000; stroke-width: 2.5; stroke-linecap: round; opacity: 0.7; }
.brand-text {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 36px;
font-weight: 600;
fill: #000000;
letter-spacing: -0.5px;
}
.network-group {
/* Définit le centre de rotation au milieu du triangle (X: 29.6, Y: 35) */
transform-origin: 29.6px 35px; 
/* OPTION 1 : Rotation continue et fluide 
animation: rotateNetwork 12s linear infinite;
*/
}

/* OPTION 2 : Si vous préférez que ça tourne uniquement au survol du logo, 
commentez la ligne du dessus et décommentez celle-ci : */
svg:hover .network-group { transform: rotate(120deg); transition: transform 0.6s ease-in-out; } 
@keyframes rotateNetwork {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}