/* Servizi Cloud - pagina HTML reale */

.cloud-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 66px 0 78px;
  background:
    radial-gradient(circle at 82% 15%, rgba(0,166,81,.15), transparent 25%),
    radial-gradient(circle at 18% 92%, rgba(0,109,255,.24), transparent 32%),
    linear-gradient(135deg, #061b33 0%, #082c5f 54%, #04142a 100%);
}

.cloud-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% 0 -10%;
  height: 150px;
  background:
    radial-gradient(ellipse at 34% 88%, rgba(0,109,255,.28), transparent 58%),
    repeating-radial-gradient(ellipse at 38% 100%, rgba(0,180,255,.16) 0 2px, transparent 2px 16px);
  opacity: .68;
  transform: rotate(-2deg);
}

.cloud-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,.86fr) minmax(430px,.84fr);
  gap: 42px;
  align-items: center;
}

.cloud-copy h1 {
  max-width: 850px;
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(2.25rem,5vw,4.35rem);
  line-height: 1.02;
  letter-spacing: -.06em;
}

.cloud-lead,
.cloud-sublead {
  max-width: 770px;
  color: rgba(255,255,255,.88);
  font-size: 1.08rem;
  line-height: 1.7;
}

.cloud-sublead {
  margin-top: 12px;
  color: rgba(255,255,255,.82);
}

.cloud-actions,
.cloud-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.cloud-actions .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,.42);
  background: rgba(6,27,51,.34);
}

.cloud-badges span {
  display: inline-flex;
  align-items: center;
  border-radius: 14px;
  padding: 10px 13px;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  font-weight: 850;
}

.cloud-visual-card {
  padding: 16px;
  border-radius: 34px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.17);
  box-shadow: 0 30px 90px rgba(0,0,0,.22);
}

.cloud-visual-card img {
  display: block;
  width: 100%;
  border-radius: 26px;
  box-shadow: 0 18px 48px rgba(0,0,0,.20);
}

.cloud-feature-strip {
  background: #f4f7fb;
  padding: 0 0 54px;
}

.cloud-feature-grid {
  position: relative;
  z-index: 3;
  margin-top: -34px;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(6,27,51,.14);
  border: 1px solid rgba(9,25,44,.08);
}

.cloud-feature-grid article {
  text-align: center;
  padding: 30px 22px;
  border-right: 1px solid rgba(9,25,44,.08);
}

.cloud-feature-grid article:last-child {
  border-right: 0;
}

.cloud-feature-grid h3,
.cloud-value-grid h3,
.cloud-service-grid h3,
.comparison-card h3 {
  margin: 0 0 8px;
  color: #071b35;
  font-size: 1.04rem;
}

.cloud-feature-grid p,
.cloud-value-grid p,
.cloud-service-grid p,
.comparison-card p,
.cloud-two-col p,
.section-title p {
  margin: 0;
  color: #5f6c7b;
  line-height: 1.6;
  font-size: .94rem;
}

.cloud-section,
.cloud-cta-section {
  background: #fff;
  padding: 66px 0;
}

.cloud-light {
  background: #f4f7fb;
}

.section-title.centered {
  max-width: 930px;
  margin: 0 auto 32px;
  text-align: center;
}

.section-title h2,
.cloud-two-col h2,
.cloud-cta-box h2 {
  color: #071b35;
  letter-spacing: -.045em;
}

.section-title h2 {
  margin: 0 0 14px;
  font-size: clamp(1.9rem,3.3vw,3rem);
  line-height: 1.1;
}

.cloud-value-grid,
.cloud-service-grid {
  display: grid;
  gap: 16px;
}

.cloud-value-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
}

.cloud-service-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

.cloud-value-grid article,
.cloud-service-grid article,
.comparison-card > div {
  border: 1px solid rgba(9,25,44,.08);
  border-radius: 20px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 16px 42px rgba(6,27,51,.07);
}

.cloud-light .comparison-card > div {
  background: #fff;
}

.cloud-two-col {
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(360px,.78fr);
  gap: 36px;
  align-items: center;
}

.cloud-two-col h2 {
  margin: 0 0 16px;
  font-size: clamp(1.9rem,3.2vw,3rem);
  line-height: 1.12;
}

.cloud-two-col p + p {
  margin-top: 14px;
}

.comparison-card {
  display: grid;
  gap: 16px;
}

.cloud-cta-box {
  display: grid;
  grid-template-columns: 112px minmax(0,1fr) 255px;
  align-items: center;
  gap: 24px;
  padding: 28px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 50%, rgba(0,109,255,.36), transparent 24%),
    linear-gradient(135deg,#061b33 0%,#082c5f 58%,#04142a 100%);
  box-shadow: 0 22px 70px rgba(6,27,51,.18);
}

.cloud-cta-box h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(1.85rem,3vw,2.8rem);
  line-height: 1.08;
}

.cloud-cta-box p {
  margin: 0;
  color: rgba(255,255,255,.84);
  line-height: 1.6;
}

.cta-icon {
  display: grid;
  place-items: center;
}

.cta-actions {
  display: grid;
  gap: 12px;
}

.cta-actions .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,.42);
}

/* Icone moderne cloud */
.cloud-icon {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='22' fill='none' stroke='black' stroke-width='6'/%3E%3C/svg%3E");
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  min-width: 62px;
  border-radius: 18px;
  margin: 0 0 16px;
  background: linear-gradient(135deg, rgba(0,109,255,.14), rgba(0,166,81,.12));
  border: 1px solid rgba(0,59,134,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.54), 0 10px 24px rgba(6,27,51,.065);
}

.cloud-feature-grid .cloud-icon {
  margin-left: auto;
  margin-right: auto;
}

.cloud-icon::before {
  content: "";
  width: 34px;
  height: 34px;
  display: block;
  background: #003b86;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.cloud-cta-box .cloud-icon {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}

.cloud-cta-box .cloud-icon::before {
  width: 45px;
  height: 45px;
  background: #a6ff5d;
}

.icon-vps,
.icon-server {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='13' y='10' width='38' height='44' rx='6' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M23 22h18M23 32h18M23 42h10' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='43' cy='43' r='3' fill='black'/%3E%3C/svg%3E");
}

.icon-backup {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M18 46a19 19 0 1 0-3-24' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M15 14v12h12M32 22v13l9 6' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-storage,
.icon-database,
.icon-archive {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='15' rx='20' ry='8' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M12 15v26c0 4 9 8 20 8s20-4 20-8V15M12 28c0 4 9 8 20 8s20-4 20-8' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-team {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='24' cy='23' r='8' fill='none' stroke='black' stroke-width='5'/%3E%3Ccircle cx='44' cy='25' r='7' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M10 52c3-11 10-17 18-17M54 52c-2-9-8-14-16-15' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-cpu {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='18' y='18' width='28' height='28' rx='5' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M25 8v8M32 8v8M39 8v8M25 48v8M32 48v8M39 48v8M8 25h8M8 32h8M8 39h8M48 25h8M48 32h8M48 39h8' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-admin {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='28' cy='22' r='9' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M10 53c4-12 11-18 18-18 4 0 8 2 11 5' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M45 28l9 9-16 16h-9v-9l16-16z' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-isolation,
.icon-security {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 8 51 16v14c0 13-8 22-19 27-11-5-19-14-19-27V16L32 8z' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M23 32l6 6 13-14' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-scale {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M14 50h36M18 46V34M32 46V24M46 46V14' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M41 14h5v5' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-cluster,
.icon-cloud-main {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M22 48h24c7 0 12-5 12-11s-5-11-12-11h-1C43 17 36 12 28 14c-7 1-12 7-12 14v1c-6 1-10 5-10 10 0 6 5 9 16 9z' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M22 38h20M28 29h22' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-web {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='9' y='13' width='46' height='38' rx='5' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M9 25h46M20 38l7-7M27 45l17-17' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-monitoring {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='10' y='13' width='44' height='31' rx='5' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M24 53h16M32 44v9M18 32h8l5-9 7 16 4-7h5' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-continuity {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 18c8-6 19-5 26 2l3 3M44 46c-8 6-19 5-26-2l-3-3' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M49 13v10H39M15 51V41h10' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 1100px) {
  .cloud-hero-grid,
  .cloud-two-col,
  .cloud-cta-box {
    grid-template-columns: 1fr;
  }

  .cloud-feature-grid,
  .cloud-value-grid,
  .cloud-service-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cloud-feature-grid article {
    border-right: 0;
    border-bottom: 1px solid rgba(9,25,44,.08);
  }
}

@media (max-width: 680px) {
  .cloud-hero {
    padding: 42px 0 64px;
  }

  .cloud-feature-grid,
  .cloud-value-grid,
  .cloud-service-grid {
    grid-template-columns: 1fr;
  }

  .cloud-cta-box {
    padding: 22px;
  }
}