:root {
  --blue:#2369d8;
  --blue2:#5b94ee;
  --deep:#071b40;
  --dark:#0f172a;
  --ink:#172033;
  --muted:#68748a;
  --line:#e8edf7;
  --soft:#f5f8fd;
  --white:#ffffff;
  --radius:28px;
  --shadow:0 24px 70px rgba(22,42,86,.12);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:#fff;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; }

/* HEADER */
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  min-height:118px;
  padding:8px 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(232,237,247,.9);
}
.brand img {
  height:145px;
  width:auto;
  max-width:none;
  display:block;
}
.main-nav {
  display:flex;
  align-items:center;
  gap:25px;
  color:#263349;
  font-weight:800;
  white-space:nowrap;
}
.main-nav a { transition:.2s ease; }
.main-nav a:hover { color:var(--blue); }
.nav-cta,
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  color:#fff !important;
  font-weight:900;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  box-shadow:0 14px 35px rgba(35,105,216,.28);
}
.nav-cta { padding:16px 28px; }
.btn:hover,.nav-cta:hover { transform:translateY(-2px); box-shadow:0 20px 45px rgba(35,105,216,.34); }
.btn.secondary {
  background:#fff;
  color:var(--blue)!important;
  border:1px solid var(--line);
  box-shadow:none;
}
.btn.dark { background:#111827; color:#fff!important; }
.nav-toggle { display:none; background:none; border:0; }
.nav-toggle span { display:block; width:26px; height:2px; margin:6px; background:var(--ink); }

/* HERO */
.hero {
  min-height:calc(100vh - 132px);
  padding:78px 6vw 96px;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:52px;
  align-items:center;
  background:radial-gradient(circle at 80% 20%, rgba(91,148,238,.20), transparent 30%), linear-gradient(#fff,#f7faff);
}
.hero-copy { max-width:760px; }
.eyebrow {
  color:var(--blue);
  font-size:13px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero h1,
.page-hero h1 {
  margin:18px 0 18px;
  font-size:clamp(44px,5.3vw,82px);
  line-height:1.03;
  letter-spacing:-.045em;
}
.lead {
  max-width:760px;
  color:var(--muted);
  font-size:clamp(18px,1.7vw,23px);
  line-height:1.58;
}
.actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }

/* HERO VISUAL PREMIUM */
.hero-art.premium-infra {
  position:relative;
  min-height:620px;
  border-radius:44px;
  overflow:hidden;
  background:linear-gradient(145deg,#fff,#edf5ff 70%,#e8f2ff);
  box-shadow:var(--shadow);
  border:1px solid rgba(220,232,255,.8);
}
.halo { position:absolute; border-radius:50%; filter:blur(1px); }
.halo-one { width:560px; height:560px; right:-120px; top:-110px; background:radial-gradient(circle,rgba(91,148,238,.35),transparent 64%); }
.halo-two { width:360px; height:360px; left:30%; bottom:-120px; background:radial-gradient(circle,rgba(0,200,255,.18),transparent 64%); }
.hero-wires { position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.wire {
  fill:none;
  stroke:rgba(20,174,255,.65);
  stroke-width:4;
  stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(20,174,255,.75));
  stroke-dasharray:14 16;
  animation:wireFlow 4.5s linear infinite;
}
.wire.main { stroke-width:5; stroke:rgba(0,205,255,.82); }
.softwire { opacity:.38; stroke-width:2.4; }
@keyframes wireFlow { to { stroke-dashoffset:-260; } }

.cloud-card,
.firewall-card,
.server-core,
.side-card,
.device-plate,
.security-strip { position:absolute; z-index:3; }
.cloud-card {
  left:50%; top:4%; transform:translateX(-50%);
  width:190px; text-align:center; color:#0759ce; font-weight:950;
}
.cloud-drawing { position:relative; height:92px; margin-bottom:6px; }
.cloud-drawing span { position:absolute; background:#fff; border:1px solid #dce8ff; box-shadow:0 18px 38px rgba(35,105,216,.16); }
.cloud-drawing span:nth-child(1) { left:16px; bottom:0; width:160px; height:58px; border-radius:44px; }
.cloud-drawing span:nth-child(2) { left:52px; bottom:26px; width:76px; height:76px; border-radius:50%; }
.cloud-drawing span:nth-child(3) { left:102px; bottom:18px; width:58px; height:58px; border-radius:50%; }

.firewall-card { left:50%; top:24%; transform:translateX(-50%); width:230px; text-align:center; }
.brick-wall {
  width:230px; height:84px; border-radius:16px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:8px;
  background:linear-gradient(145deg,#0a2558,#123f8a);
  box-shadow:0 24px 55px rgba(7,27,64,.28);
}
.brick-wall span { border-radius:8px; background:linear-gradient(145deg,#183f87,#071b40); border:1px solid rgba(91,148,238,.22); }
.shield-mark {
  position:absolute; left:50%; top:15px; transform:translateX(-50%);
  width:72px; height:82px; background:linear-gradient(145deg,#1d73ff,#07348d);
  clip-path:polygon(50% 0, 90% 15%, 82% 75%, 50% 100%, 18% 75%, 10% 15%);
  box-shadow:0 0 30px rgba(35,105,216,.65);
}
.shield-mark:after { content:""; position:absolute; left:22px; top:22px; width:28px; height:28px; border-radius:50%; background:#ff7a30; box-shadow:0 0 18px rgba(255,122,48,.8); }
.firewall-card strong { display:block; margin-top:14px; font-weight:950; }
.firewall-card small { color:var(--muted); }

.server-core {
  left:50%; top:43%; transform:translateX(-50%);
  width:260px; padding:22px 22px 24px;
  border-radius:24px;
  color:#fff; text-align:center;
  background:linear-gradient(145deg,#061833,#0d347a);
  box-shadow:0 32px 80px rgba(7,27,64,.35), 0 0 30px rgba(0,200,255,.18) inset;
}
.server-face { display:grid; gap:8px; margin-bottom:14px; }
.server-face span { height:14px; border-radius:999px; background:linear-gradient(90deg,#00d9ff,#2369d8 70%,#0c2d66); box-shadow:0 0 12px rgba(0,217,255,.65); }
.server-core strong { display:block; font-size:18px; }
.server-core small { display:block; margin-top:6px; color:#cfe0ff; }

.side-card {
  min-width:188px; padding:17px 19px;
  border-radius:22px; background:rgba(255,255,255,.90);
  border:1px solid #dce8ff;
  box-shadow:0 22px 55px rgba(35,105,216,.16);
}
.side-card strong { display:block; color:#10224a; font-size:17px; }
.side-card small { color:var(--muted); display:block; margin-top:3px; }
.card-vpn { left:8%; top:30%; }
.card-server { right:7%; top:37%; }
.mini-icon { display:inline-block; width:34px; height:34px; margin-right:10px; vertical-align:middle; border-radius:10px; background:linear-gradient(135deg,var(--blue),var(--blue2)); }
.mini-icon.lock:after { content:""; display:block; width:12px; height:9px; margin:15px auto 0; border-radius:2px; background:#fff; }
.mini-icon.disks:after { content:""; display:block; width:22px; height:4px; margin:8px auto; border-radius:99px; background:#fff; box-shadow:0 8px 0 #fff,0 16px 0 #fff; }

.device-plate {
  width:128px; height:104px;
  border-radius:24px;
  background:rgba(255,255,255,.86);
  border:1px solid #dce8ff;
  box-shadow:0 22px 55px rgba(35,105,216,.15);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:#1353bc; font-weight:950;
}
.plate-pc { left:7%; bottom:12%; }
.plate-notebook { left:31%; bottom:8%; }
.plate-phone { right:29%; bottom:8%; }
.plate-printer { right:6%; bottom:12%; width:150px; }
.device-screen { width:64px; height:42px; border-radius:7px; background:linear-gradient(145deg,#06459c,#0e7bff); position:relative; box-shadow:0 8px 16px rgba(7,27,64,.18); }
.device-screen:after { content:""; position:absolute; left:26px; bottom:-12px; width:12px; height:12px; background:#0c2d66; }
.device-laptop { width:72px; height:42px; border-radius:7px 7px 3px 3px; background:linear-gradient(145deg,#06459c,#0e7bff); border-bottom:8px solid #d7e8ff; }
.device-phone { width:34px; height:62px; border-radius:10px; background:linear-gradient(145deg,#06459c,#0e7bff); border:3px solid #0c2d66; }
.device-printer { width:78px; height:52px; border-radius:12px; background:#fff; border:10px solid #0d347a; position:relative; }
.device-printer:before { content:""; position:absolute; left:12px; right:12px; top:-24px; height:18px; background:#edf5ff; border-radius:6px; }
.security-strip {
  left:8%; right:8%; bottom:3%;
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  padding:12px;
  border-radius:28px;
  background:rgba(255,255,255,.76);
  border:1px solid #dce8ff;
  box-shadow:0 20px 55px rgba(35,105,216,.12);
  backdrop-filter:blur(14px);
}
.security-strip span { text-align:center; color:#1454c8; font-weight:900; font-size:13px; }

/* GENERIC SECTIONS */
.section { padding:105px 6vw; }
.center { text-align:center; }
.soft { background:var(--soft); }
.section-title { font-size:clamp(34px,4vw,54px); line-height:1.08; margin:10px 0 16px; letter-spacing:-.035em; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:0 14px 45px rgba(20,40,80,.06); transition:.25s; }
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.icon { font-size:34px; font-weight:950; color:var(--blue); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.visual-box { min-height:360px; padding:36px; border-radius:36px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; }
.cloud-diagram { width:100%; max-width:480px; display:grid; gap:14px; text-align:center; }
.diagram-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.node { padding:14px 18px; background:#f3f7ff; border:1px solid #dce8ff; border-radius:999px; font-weight:900; color:#1f4fa2; }
.feature-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:22px; }
.feature-list span { padding:13px 15px; border-radius:16px; background:#fff; border:1px solid var(--line); font-weight:800; }
.printer-img { width:100%; max-height:430px; object-fit:contain; border-radius:30px; }

/* COBA */
.coba { position:relative; overflow:hidden; background:#050b1b; color:#fff; }
.coba:before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(91,148,238,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(91,148,238,.08) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(#000,transparent 85%); }
.coba>* { position:relative; }
.coba .lead { color:#c2cbe1; }
.coba-panel { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); border-radius:36px; padding:26px; box-shadow:0 30px 90px rgba(0,0,0,.35); }
.coba-shot { width:100%; border-radius:24px; display:block; box-shadow:0 30px 80px rgba(0,0,0,.45); }
.quote { font-size:clamp(28px,4vw,54px); font-weight:950; line-height:1.1; margin:30px 0; background:linear-gradient(135deg,#fff,#80adff); -webkit-background-clip:text; color:transparent; }
.chips{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:26px 0;
}

.feature-chip{
    padding:12px 16px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    color:#dce6ff;
    background:rgba(255,255,255,.07);
    font-weight:900;
    cursor:default;
    user-select:none;
}

.feature-chip:hover{
    background:rgba(255,255,255,.07);
    color:#dce6ff;
}

.feature-chip.active{
    background:rgba(255,255,255,.07);
    color:#dce6ff;
}

/* PAGE CONTENT */
.page-hero { padding:105px 6vw; background:linear-gradient(180deg,#fff,#f5f8fd); }
.simple-content { max-width:950px; margin:auto; font-size:18px; line-height:1.75; }
.contact-strip { background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; border-radius:42px; padding:52px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }

/* FOOTER */
.site-footer { background:#0b1220; color:#cbd5e1; padding:60px 6vw 24px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.footer-logo { height:58px; background:#fff; border-radius:12px; padding:6px; }
.site-footer a { display:block; color:#cbd5e1; margin:9px 0; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); margin-top:30px; padding-top:18px; color:#94a3b8; }

/* COOKIE + MODAL + FORM */
.cookie { position:fixed; right:24px; bottom:24px; max-width:430px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:22px; padding:18px; display:none; z-index:80; }
.cookie.show { display:flex; gap:15px; align-items:center; }
.modal { position:fixed; inset:0; background:rgba(8,14,28,.68); display:none; align-items:center; justify-content:center; padding:20px; z-index:100; }
.modal.open { display:flex; }
.modal-card { width:min(620px,100%); background:#fff; border-radius:30px; padding:32px; box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .full { grid-column:1/-1; }
input,textarea,select { width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:14px; font:inherit; }
label { font-weight:800; font-size:14px; }
.close { float:right; background:#f1f5f9; border:0; border-radius:999px; width:38px; height:38px; }
.reveal { opacity:0; transform:translateY(22px); transition:.7s; }
.reveal.in { opacity:1; transform:none; }

/* RESPONSIVE */
@media (max-width:1200px){
  .site-header{padding:18px 4vw}.brand img{height:92px}.main-nav{gap:16px;font-size:14px}.hero{grid-template-columns:1fr;}.hero-copy{max-width:none}.hero-art.premium-infra{min-height:620px;max-width:860px;width:100%;margin:auto;}
}
@media (max-width:900px){
  .site-header { min-height:96px; }
  .brand img { height:72px; }
  .nav-toggle{display:block;}
  .main-nav{display:none;position:absolute;top:96px;left:4vw;right:4vw;background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start;white-space:normal;}
  .main-nav.open{display:flex;}
  .hero{padding-top:48px;}
  .hero-art.premium-infra{min-height:720px;}
  .card-vpn{left:50%;top:65%;transform:translateX(-50%);}
  .card-server{display:none;}
  .plate-pc{left:5%;bottom:18%;}.plate-notebook{left:28%;bottom:13%;}.plate-phone{right:26%;bottom:13%;}.plate-printer{right:4%;bottom:18%;}
  .security-strip{grid-template-columns:1fr 1fr;bottom:2%;}
  .split,.contact-strip{grid-template-columns:1fr}.grid-4,.grid-3,.footer-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.section{padding:72px 6vw}.feature-list{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .hero h1{font-size:42px}.hero-art.premium-infra{min-height:640px}.cloud-card{top:3%}.firewall-card{top:21%;transform:translateX(-50%) scale(.85)}.server-core{top:41%;transform:translateX(-50%) scale(.9)}.device-plate{transform:scale(.78);}.plate-pc{left:-2%;}.plate-notebook{left:22%;}.plate-phone{right:18%;}.plate-printer{right:-6%;}.security-strip{display:none;}
}
.cookie {
  right: 28px !important;
  bottom: 28px !important;
  max-width: 560px !important;
  padding: 22px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(18px) !important;
  border: 1px solid #dce8ff !important;
  box-shadow: 0 28px 80px rgba(22,42,86,.20) !important;
  align-items: center !important;
}

.cookie-icon {
  font-size: 28px;
}

.cookie-text strong {
  display: block;
  margin-bottom: 4px;
  color: #172033;
}

.cookie-text p {
  margin: 0 0 6px;
  color: #68748a;
  line-height: 1.45;
}

.cookie-text a {
  font-size: 13px;
  font-weight: 800;
  color: #2369d8;
}

.cookie-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
.managed-stack {
  width: 100%;
  display: grid;
  gap: 16px;
}

.stack-card {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #dce8ff;
  box-shadow: 0 18px 45px rgba(35,105,216,.10);
  font-weight: 900;
}

.stack-card strong {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #f3f7ff;
  color: #2369d8;
}

.stack-card.active {
  background: linear-gradient(135deg, #2369d8, #5b94ee);
  color: #ffffff;
}

.stack-card.active strong {
  background: rgba(255,255,255,.18);
  color: #ffffff;
}
/* FIX HERO VISUAL DEFINITIVO */
.security-strip {
  bottom: 16px !important;
  left: 8% !important;
  right: 8% !important;
  z-index: 10 !important;
}

.device-plate {
  bottom: 90px !important;
}

/* MOBILE: visual semplificato */
@media (max-width: 900px) {
  .hero-art.premium-infra {
    min-height: 420px !important;
  }

  .cloud-card,
  .firewall-card,
  .side-card,
  .device-plate,
  .security-strip,
  .hero-wires {
    display: none !important;
  }

  .server-core {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1.05) !important;
  }

  .hero-art.premium-infra::after {
    content: "Server • Firewall • VPN • Backup • Accesso remoto";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 28px;
    padding: 16px 20px;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    border: 1px solid #dce8ff;
    color: #1454c8;
    font-weight: 900;
    text-align: center;
  }
}
.value-card{
    background:#0d1b3d;
    color:#fff;
    padding:45px;
    border-radius:26px;
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.value-card .mini-title{
    font-size:12px;
    letter-spacing:2px;
    color:#8fb8ff;
    font-weight:700;
    margin-bottom:18px;
}

.value-card h3{
    font-size:34px;
    line-height:1.2;
    margin-bottom:22px;
    color:#fff;
}

.value-card p{
    color:#d7e2ff;
    font-size:18px;
    line-height:1.7;
}

.value-card blockquote{
    margin-top:35px;
    padding-left:20px;
    border-left:4px solid #4b84ff;
    font-size:22px;
    font-style:italic;
    color:#fff;
}