/*
================================================================================
Project: Setecom Italia

▄████▄ ██  ██ ██▄  ▄██ ▄████▄ ████▄  ██████ ██  ██
██▄▄██ ██  ██ ██ ▀▀ ██ ██▄▄██ ██  ██ ██▄▄   ██▄▄██
██  ██ ▀████▀ ██    ██ ██  ██ ████▀  ██▄▄▄▄▄  ▀██▀

File: styles.css
Description: Foglio di stile principale per il sito web Setecom Italia

Path: /css/styles.css

Copyright © 2026 Aumatex srls.
Tutti i diritti riservati.

L'uso non autorizzato, la copia, la modifica o la distribuzione è proibita.
================================================================================
*/

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body {
  background-color: #0A0A0A;
  color: #F2F2F2;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

.glass-nav {
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-logo-abstract {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 140%;
  background-image: url('../images/logo_setecom.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.03;
  transform: rotate(-15deg) scale(1.5);
  pointer-events: none;
  filter: grayscale(1) brightness(2);
  max-width: 100%;
}

@media (max-width: 768px) {
  .hero-logo-abstract {
    width: 80%;
    right: -20%;
  }
}

.reveal-up {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

.reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.reveal-clip.active {
  clip-path: inset(0 0 0 0);
}

.delay-100 {
  transition-delay: 0.1s;
}

.delay-200 {
  transition-delay: 0.2s;
}

.delay-300 {
  transition-delay: 0.3s;
}

.delay-500 {
  transition-delay: 0.5s;
}

.service-card {
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #009B4D, #99C93D);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}

.service-card:hover::before {
  opacity: 0.1;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 30px rgba(153, 201, 61, 0.3);
  border-color: #99C93D;
}

.service-card .icon-box {
  transition: all 0.5s ease;
}

.service-card:hover .icon-box {
  background: #99C93D;
  color: #0A0A0A;
  transform: scale(1.1) rotate(5deg);
}

@media (max-width: 768px) {
  .service-card:hover {
    transform: translateY(-5px);
  }
}

.ticker-wrap {
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  width: 100%;
  max-width: 100vw;
}

.ticker {
  display: inline-block;
  animation: ticker 60s linear infinite;
  will-change: transform;
}

@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.toggle-checkbox:checked {
  right: 0;
  border-color: #009B4D;
}

.toggle-checkbox:checked + .toggle-label {
  background-color: #009B4D;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

section, header, footer {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

.max-w-\[1600px\] {
  max-width: min(1600px, 100vw);
  padding-left: clamp(1rem, 3vw, 1.5rem);
  padding-right: clamp(1rem, 3vw, 1.5rem);
}

@media (max-width: 640px) {
  .text-7xl, .text-6xl {
    font-size: clamp(2.5rem, 8vw, 4rem) !important;
  }
  
  .text-9xl {
    font-size: clamp(3rem, 10vw, 5rem) !important;
  }
  
  .text-5xl {
    font-size: clamp(2rem, 6vw, 3rem) !important;
  }
  
  .text-4xl {
    font-size: clamp(1.75rem, 5vw, 2.25rem) !important;
  }
  
  .text-3xl {
    font-size: clamp(1.5rem, 4vw, 1.875rem) !important;
  }
}