/* ========== DDoS Protection — CSS separato, mobile-first, animazioni leggere ========== */

/* ------------ Reset minimi ------------ */
.ddos-pro-page * { color: inherit; box-sizing: border-box; }
.ddos-pro-page img { max-width: 100%; height: auto; display: block; }

/* ------------ Variabili di colore ------------ */
:root {
  --c-bg-dark-1: #0b1220;
  --c-bg-dark-2: #0f172a;
  --c-cyan-100: #a5f3fc;
  --c-cyan-300: #38bdf8;
  --c-cyan-500: #0ea5e9;
  --c-blue-700: #0066ff;
  --c-fuxia: #ff00ff;
  --c-border: rgba(0,0,0,.08);
  --c-card: #ffffff;
}

/* ------------ HERO ------------ */
.ddos-hero{
  position:relative; padding: 72px 0 56px; color:#fff;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,.20), transparent),
    linear-gradient(135deg,var(--c-bg-dark-1),var(--c-bg-dark-2));
}
.ddos-hero[style*="--hero-bg"]{
  background-image: var(--hero-bg), linear-gradient(135deg,var(--c-bg-dark-1),var(--c-bg-dark-2));
  background-size: cover, auto; background-position: center, center;
}
.ddos-overlay{ position:absolute; inset:0; z-index:0;
  background: linear-gradient(100deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.15) 100%);
}
.ddos-grid{ position:absolute; inset:-15% -10% 0 -10%; z-index:0; opacity:.16;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 22px 22px; animation: gridFloat 18s ease-in-out infinite;
}
@keyframes gridFloat{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(10px);} }

.ddos-particles{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.ddos-particles span{ position:absolute; width:6px; height:6px; border-radius:50%;
  background: rgba(255,255,255,.35); filter: drop-shadow(0 0 6px rgba(56,189,248,.6));
  animation: float 10s linear infinite;
}
/* posizioni */
.ddos-particles span:nth-child(1){ top:10%; left:15%; animation-duration:14s;}
.ddos-particles span:nth-child(2){ top:20%; left:75%; animation-duration:12s;}
.ddos-particles span:nth-child(3){ top:35%; left:40%; animation-duration:15s;}
.ddos-particles span:nth-child(4){ top:60%; left:20%; animation-duration:13s;}
.ddos-particles span:nth-child(5){ top:75%; left:70%; animation-duration:16s;}
.ddos-particles span:nth-child(6){ top:50%; left:85%; animation-duration:11s;}
.ddos-particles span:nth-child(7){ top:15%; left:55%; animation-duration:17s;}
.ddos-particles span:nth-child(8){ top:65%; left:35%; animation-duration:12s;}
.ddos-particles span:nth-child(9){ top:28%; left:25%; animation-duration:14s;}
.ddos-particles span:nth-child(10){ top:78%; left:50%; animation-duration:15s;}
.ddos-particles span:nth-child(11){ top:5%; left:90%; animation-duration:18s;}
.ddos-particles span:nth-child(12){ top:88%; left:8%; animation-duration:19s;}
@keyframes float{ 0%{ transform: translateY(0) translateX(0);}
  50%{ transform: translateY(-10px) translateX(6px);} 100%{ transform: translateY(0) translateX(0);} }

.ddos-orbits{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.ddos-orbits .orbit{
  position:absolute; color:var(--c-cyan-100); opacity:.9; font-size:18px;
  filter: drop-shadow(0 2px 8px rgba(14,165,233,.35));
  animation: spin 22s linear infinite;
}
.ddos-orbits .o1{ top:12%; left:10%; animation-duration: 24s;}
.ddos-orbits .o2{ top:18%; right:15%; animation-duration: 28s;}
.ddos-orbits .o3{ bottom:20%; left:18%; animation-duration: 26s;}
.ddos-orbits .o4{ bottom:16%; right:10%; animation-duration: 30s;}
@keyframes spin{ from{ transform: rotate(0deg) translateX(8px) rotate(0deg);}
  to{ transform: rotate(360deg) translateX(8px) rotate(-360deg);} }

.ddos-title{ font-weight:800; line-height:1.1; margin:0 0 8px; text-shadow:0 12px 36px rgba(0,0,0,.25); }
.ddos-title span{ border-bottom:3px solid rgba(255,255,255,.85); }
.ddos-sub{ font-size:1.02rem; opacity:.95; margin-bottom:16px; }
.ico-ddos{ width:28px; height:28px; margin-right:8px; vertical-align:middle;
  transform-origin:50% 50%; animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.95;} 50%{ transform:scale(1.12); opacity:1;} }

/* chips hero */
.ddos-chips{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px 12px; }
.ddos-chips li{
  display:flex; align-items:center; gap:8px; color:#fff;
  padding:8px 12px; border-radius:12px; background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px);
}

/* accent gradient */
.ddos-pro-page .accent-gradient{
  --fuxia:#ff00ff; --blu:#0066ff;
  background: linear-gradient(135deg, var(--fuxia) 0%, var(--blu) 100%) !important;
  color:#fff !important; border-color: rgba(255,255,255,.28) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.ddos-pro-page .accent-gradient *{ color:#fff !important; fill:#fff !important; }
.ddos-pro-page .accent-gradient .btn.btn-primary{
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.42);
  color:#fff; backdrop-filter: blur(4px);
}
.ddos-pro-page .accent-gradient .btn.btn-primary:hover{
  background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.6);
}

/* card glass */
.ddos-card.glass{
  border-radius:18px; padding:22px; color:inherit;
  background: rgba(255,255,255,.78); border:1px solid var(--c-border); backdrop-filter: blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.10); position:relative; overflow:hidden;
}
.ddos-card .topology{ position:absolute; inset:auto -14px -12px -14px; height: 52%; opacity:.55; }
.ddos-card .dash{ stroke-dasharray: 240; stroke-dashoffset: 240; animation: dash 6s ease-in-out infinite; }
.ddos-card .dash:nth-child(2){ animation-delay:.6s; }
.ddos-card .dash:nth-child(3){ animation-delay:1.2s; }
@keyframes dash{ 0%{ stroke-dashoffset:240;} 50%{ stroke-dashoffset:0;} 100%{ stroke-dashoffset:-240;} }
.ddos-offer{ list-style:none; padding:0; margin: 6px 0 14px; display:flex; flex-direction:column; gap:8px; }
.ddos-offer li{ display:flex; gap:10px; align-items:flex-start; border-bottom: 1px dashed rgba(255,255,255,.25); }
.ddos-offer li:last-child{ border-bottom:0; }

/* sezioni base */
.ddos-sec{ padding:48px 0; }
.ddos-sec.neutral{ background: rgba(0,0,0,.02); }

/* ------------ Diagramma attacco (frecce animate) ------------ */
.attack-diagram{
  position:relative; display:grid; grid-template-columns: 1fr auto 1fr auto; align-items:center;
  gap:24px; padding:20px; border-radius:18px; background:#fff; border:1px solid var(--c-border);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.attack-diagram .arrows{ position:relative; height:100px; display:flex; align-items:center; gap:10px; }
.attack-diagram .arrows.left span,
.attack-diagram .arrows.right span{
  width:70px; height:6px; position:relative; display:inline-block; border-radius:999px;
}
.attack-diagram .arrows.left span{
  background:linear-gradient(90deg, #ef4444, #b91c1c);
  animation: flowLeft 2.2s linear infinite;
}
.attack-diagram .arrows.left span::after{
  content:""; position:absolute; right:-8px; top:-4px; border:7px solid transparent; border-left-color:#b91c1c;
}
.attack-diagram .arrows.right span{
  background:linear-gradient(90deg, var(--c-cyan-300), var(--c-cyan-500));
  animation: flowRight 2.2s linear infinite;
}
.attack-diagram .arrows.right span::after{
  content:""; position:absolute; right:-8px; top:-4px; border:7px solid transparent; border-left-color:var(--c-cyan-500);
}
.attack-diagram .arrows span:nth-child(2){ animation-delay:.2s;}
.attack-diagram .arrows span:nth-child(3){ animation-delay:.4s;}
.attack-diagram .arrows span:nth-child(4){ animation-delay:.6s;}
.attack-diagram .arrows span:nth-child(5){ animation-delay:.8s;}
@keyframes flowLeft{ from{ transform: translateX(0);} to{ transform: translateX(40px);} }
@keyframes flowRight{ from{ transform: translateX(0);} to{ transform: translateX(40px);} }

.attack-diagram .shield{
  width:120px; height:120px; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: radial-gradient(120px 120px at 50% 50%, rgba(56,189,248,.15), transparent 70%), linear-gradient(135deg,var(--c-cyan-500),#6366f1);
  color:#fff; box-shadow:0 16px 40px rgba(14,165,233,.35); border:1px solid rgba(255,255,255,.35);
  animation: shieldGlow 3s ease-in-out infinite;
}
.attack-diagram .shield i{ font-size:34px; }
.attack-diagram .shield small{ opacity:.95; }
@keyframes shieldGlow{ 0%,100%{ transform:scale(1); box-shadow:0 16px 40px rgba(14,165,233,.35);}
  50%{ transform:scale(1.04); box-shadow:0 20px 48px rgba(99,102,241,.45);} }

.attack-diagram .target{ display:flex; flex-direction:column; align-items:center; gap:6px; color:#0f172a; }
.attack-diagram .target i{ font-size:28px; }

/* ------------ Feature tiles uguali (perché scegliere) ------------ */
.feature-tile{
  position:relative; height:100%; border-radius:16px; padding:20px; background:#fff; border:1px solid var(--c-border);
  box-shadow:0 10px 22px rgba(0,0,0,.06); overflow:hidden; transition: transform .2s ease, box-shadow .2s ease;
  --mx:50%; --my:50%;
}
.feature-tile:hover{ transform: translateY(-6px) scale(1.01); box-shadow:0 18px 36px rgba(0,0,0,.12); }
.feature-tile .tile-ico{
  width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:26px;
  background: rgba(14,165,233,.1); color:var(--c-cyan-500); margin-bottom:10px; animation: floatIco 3.2s ease-in-out infinite;
}
@keyframes floatIco{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
.tile-glow{
  position:absolute; inset:-1px; border-radius:16px; pointer-events:none;
  background: radial-gradient(180px 140px at var(--mx) var(--my), rgba(0,102,255,.12), transparent 60%);
  transition: background .15s linear;
}

/* ------------ Specifiche grid ------------ */
.spec-grid{ position:relative; display:grid; grid-template-columns: repeat(12,1fr); gap:18px; margin-top:8px; }
.spec-card{
  grid-column: span 6; display:flex; gap:12px; align-items:flex-start;
  padding:16px; border-radius:14px; background: rgba(255,255,255,.9);
  border:1px solid var(--c-border); box-shadow:0 6px 14px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.spec-card:hover{ transform: translateY(-3px); box-shadow:0 12px 22px rgba(0,0,0,.10); }
.spec-card i{ font-size:22px; margin-top:2px; }
.spec-card h5{ margin:0 0 4px; font-weight:700; }
.spec-card p{ margin:0; opacity:.9; }
.spec-links{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.spec-links path{ stroke: rgba(0,102,255,.35); stroke-width:2; fill:none; stroke-dasharray: 8 10; animation: dashSpec 16s linear infinite; }
@keyframes dashSpec{ to{ stroke-dashoffset: -600; } }

/* ------------ Pricing ------------ */
.price-card{
  position:relative; border-radius:18px; overflow:hidden;
  background: linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid var(--c-border); box-shadow:0 12px 24px rgba(0,0,0,.06);
  padding:22px; transition: transform .2s ease, box-shadow .2s ease;
}
.price-card:hover{ transform: translateY(-6px); box-shadow:0 16px 36px rgba(0,0,0,.10); }
.price-card.featured{ background: linear-gradient(180deg,#fdf7ff,#eef5ff); border-color: rgba(0,102,255,.25); }
.ribbon{
  position:absolute; right:-46px; top:18px; transform: rotate(35deg);
  background: linear-gradient(135deg,var(--c-fuxia),var(--c-blue-700)); color:#fff; font-size:.72rem;
  padding:6px 56px; letter-spacing:.4px; box-shadow:0 8px 16px rgba(0,0,0,.12);
}
.price-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.price-head i{ font-size:24px; color:var(--c-cyan-500); }
.price-head h3{ margin:0; font-weight:800; }
.price{ font-size:1.6rem; font-weight:800; }
.price small{ font-size:.9rem; font-weight:600; opacity:.8; }
.price span{ display:block; font-size:.8rem; font-weight:600; opacity:.75; }
.price-feats{ list-style:none; padding:0; margin:10px 0 16px; display:flex; flex-direction:column; gap:10px; }
.price-feats li{ display:flex; gap:10px; align-items:flex-start; }
.btn-buy{ padding:.7rem 1rem; font-weight:700; }

/* ------------ Benefici ------------ */
.benefits .benefit-tile{
  position:relative; border-radius:16px; padding:22px; background:#fff; border:1px solid var(--c-border);
  box-shadow:0 12px 24px rgba(0,0,0,.06); overflow:hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.benefits .benefit-tile:hover{ transform: translateY(-8px); box-shadow:0 18px 40px rgba(0,0,0,.12); }
.benefits i{ font-size:26px; color:var(--c-cyan-500); }
.benefits .pulse{
  position:absolute; right:18px; bottom:18px; width:10px; height:10px; border-radius:999px; background:var(--c-cyan-500); opacity:.75;
  box-shadow:0 0 0 0 rgba(14,165,233,.5); animation: pulseRing 2.4s infinite;
}
@keyframes pulseRing{
  0%{ box-shadow:0 0 0 0 rgba(14,165,233,.5);}
  70%{ box-shadow:0 0 0 16px rgba(14,165,233,0);}
  100%{ box-shadow:0 0 0 0 rgba(14,165,233,0);}
}

/* ------------ CTA Valutazione ------------ */
.assessment-strip{
  position:relative; display:grid; grid-template-columns: 1.2fr 1fr auto; gap:18px; align-items:center;
  padding:22px; border-radius:18px; background:linear-gradient(135deg,#ffffff,#f4f7ff); border:1px solid var(--c-border);
  box-shadow:0 14px 32px rgba(0,0,0,.08);
}
.ass-steps{ display:flex; align-items:center; gap:10px; justify-content:center; }
.ass-steps .step{
  width:54px; height:54px; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 14px rgba(0,0,0,.06);
}
.ass-steps .connector{ width:34px; height:4px; border-radius:999px;
  background:linear-gradient(90deg,var(--c-fuxia),var(--c-blue-700)); animation: barFlow 2s linear infinite;
}
@keyframes barFlow{ from{ filter:brightness(1);} to{ filter:brightness(1.3);} }
.ass-cta .btn{ margin-left:8px; }

/* ------------ Reveal (on-scroll) ------------ */
.ddos-pro-page [data-animate]{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.ddos-pro-page .banner-inner [data-animate].visible{ opacity:1; transform:none; }
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* ------------ Mobile (≤ 992px) ------------ */
@media (max-width: 991.98px){
  .ddos-hero{ padding: 64px 0 48px; }
  .ddos-chips li{ padding:6px 10px; }
  .ddos-title{ font-size:1.8rem; }
  .ddos-sub{ font-size:1rem; }
  .attack-diagram{ grid-template-columns: 1fr; gap:16px; text-align:center; }
  .attack-diagram .arrows{ justify-content:center; height:84px; }
  .attack-diagram .shield{ width:108px; height:108px; }
  .feature-tile{ padding:18px; }
  .spec-card{ grid-column: span 12; }
  .spec-links{ display:none; }
  .price-head{ flex-wrap:wrap; }
  .ribbon{ display:none; }
  .assessment-strip{ grid-template-columns: 1fr; text-align:center; }
  .ass-cta .btn{ margin:6px 4px 0; }
}

/* ------------ Small Mobile (≤ 576px) ------------ */
@media (max-width: 575.98px){
  .ddos-title{ font-size:1.6rem; }
  .ddos-chips{ gap:8px; }
  .ddos-chips li{ font-size:.92rem; }
  .price{ font-size:1.45rem; }
  .feature-tile .tile-ico{ width:48px; height:48px; font-size:22px; }
}

/* ------------ Dark mode (auto) ------------ */
@media (prefers-color-scheme: dark){
  :root{ --c-border: rgba(255,255,255,.12); --c-card:#0b1020; }
  .ddos-sec.neutral{ background: rgba(255,255,255,.03); }
  .feature-tile, .spec-card, .price-card, .benefits .benefit-tile,
  .assessment-strip, .attack-diagram{ background: var(--c-card); border-color: var(--c-border); }
  .price-card.featured{ background: linear-gradient(180deg,#151a2e,#0f172a); }
}

/* ------------ Riduzione motion ------------ */
@media (prefers-reduced-motion: reduce){
  .ddos-grid, .ddos-particles span, .ddos-orbits .orbit, .ico-ddos,
  .ddos-card .dash, .spec-links path, .attack-diagram .arrows span, .assessment-strip .connector,
  .feature-tile .tile-ico, .benefits .pulse{ animation: none !important; }
  .ddos-pro-page [data-animate], .reveal{ transition: none !important; opacity:1 !important; transform:none !important; }
}