/* .btn-gradient {
    background: linear-gradient(to right, #06b6d4, #2563eb);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(6, 132, 212, 0.5);
    color: #fff;
} */


/* BASE */
.tw-header {
  background-color: #020617;
}

/* BACKGROUND GRADIENT */
.tw-bg {
  background: linear-gradient(
    135deg,
    rgba(6,182,212,0.10),
    transparent,
    rgba(37,99,235,0.10)
  );
}

/* LOGO */
.tw-logo {
  width: 40px;
  height: 40px;
  border-radius: .5rem;
  background: linear-gradient(to bottom right, #22d3ee, #3b82f6);
}

/* BUTTON PRIMARY */
.tw-btn-primary {
  background: linear-gradient(to right, #06b6d4, #2563eb);
  color: #fff;
  border: none;
  transition: all .3s ease;
  margin-bottom: 4rem;
}

.tw-btn-primary:hover {
  box-shadow: 0 1rem 2rem rgba(6,182,212,.5);
  transform: translateY(-2px);
  color: #fff;
 }

/* GLASS BUTTON */
.tw-btn-glass {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  color: #fff;
  transition: all .3s ease;
  margin-bottom: 4rem;
 }

.tw-btn-glass:hover {
  background: rgba(255,255,255,.1);
}

/* BADGE */
.tw-badge {
  padding: .5rem 1rem;
  border-radius: 999px;
  background: rgba(6,182,212,.1);
  border: 1px solid rgba(6,182,212,.2);
  color: #22d3ee;
  font-weight: 500;
  font-size: .875rem;
}

/* TITLES */
.tw-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.1;
}

.tw-text-gradient {
  background: linear-gradient(to right, #22d3ee, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* SUBTITLE */
.tw-subtitle {
  font-size: 1.25rem;
  color: #cbd5e1;
  max-width: 42rem;
}

/* ARROW HOVER */
.tw-arrow {
  transition: transform .3s ease;
}

.tw-btn-primary:hover .tw-arrow {
  transform: translateX(6px);
}

/* DIVIDER */
.tw-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(6,182,212,.5),
    transparent

  );
}



.services-section {
  padding: 6rem 0;
}

.service-card {
  height: 100%;
  padding: 2rem;
  border-radius: 1.5rem;
  background: linear-gradient(
    to bottom right,
    rgba(30, 41, 59, 0.5),
    rgba(30, 41, 59, 0.3)
  );
  backdrop-filter: blur(8px);
  border: 1px solid rgba(148, 163, 184, 0.25);
  transition: all 0.3s ease;
}

.service-card h3 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 1rem;
}

.service-card p {
  color: #94a3b8;
  line-height: 1.6;
}

.service-card:hover {
  transform: translateY(-6px);
}

/* ICONA */
.icon-box {
  width: 56px;
  height: 56px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

.service-card:hover .icon-box {
  transform: scale(1.1);
}

/* VARIANTI COLORE */
.service-card.cyan:hover {
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 1rem 2rem rgba(34, 211, 238, 0.15);
}
.service-card.cyan .icon-box {
  background: linear-gradient(to bottom right, #22d3ee, #06b6d4);
}

.service-card.blue:hover {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 1rem 2rem rgba(59, 130, 246, 0.15);
}
.service-card.blue .icon-box {
  background: linear-gradient(to bottom right, #3b82f6, #2563eb);
}

.service-card.emerald:hover {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 1rem 2rem rgba(16, 185, 129, 0.15);
}
.service-card.emerald .icon-box {
  background: linear-gradient(to bottom right, #10b981, #059669);
}

.service-card.green:hover {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 1rem 2rem rgba(34, 197, 94, 0.15);
}
.service-card.green .icon-box {
  background: linear-gradient(to bottom right, #22c55e, #16a34a);
}

body {
  background: radial-gradient(
      ellipse at top,
      rgba(34, 211, 238, 0.15),
      transparent 60%
    ),
    #020617;
  color: #fff;
}


.gradient-line {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(6,182,212,0.5), transparent);
  bottom: 2rem; /* distanza dai bottoni */
}