.orb-1{width:260px;height:260px;background:#2f9fcc;top:120px;right:-70px}
    .orb-2{width:220px;height:220px;background:#ef3024;bottom:120px;left:-90px}


    .hero{padding:34px 0 48px;position:relative}
    .hero-shell{
      position:relative;overflow:hidden;border-radius:36px;border:1px solid rgba(255,255,255,.07);
      background:linear-gradient(135deg, rgba(8,21,30,.93) 0%, rgba(10,24,34,.82) 40%, rgba(8,19,28,.95) 100%);
      box-shadow:var(--shadow-xl);
    }
    .hero-banner{
      position:relative; min-height:560px; padding:28px; overflow:hidden;
      border-bottom:1px solid rgba(255,255,255,.06);
      background:
        radial-gradient(circle at 20% 30%, rgba(47,133,175,.16), transparent 20%),
        radial-gradient(circle at 80% 20%, rgba(239,48,36,.14), transparent 18%),
        linear-gradient(180deg, rgba(10,25,35,.7), rgba(7,16,24,.78));
    }
    .grid-lines{
      position:absolute;inset:0;
      background-image:
        linear-gradient(rgba(137,168,188,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(137,168,188,.08) 1px, transparent 1px);
      background-size:24px 24px;
      mask-image:radial-gradient(circle at center, black 36%, transparent 92%);
      opacity:.55;
      pointer-events:none;
    }
    .method-banner{
      position:relative; width:100%; min-height:490px; border-radius:30px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(18,43,58,.72), rgba(12,28,38,.88));
      box-shadow:0 18px 48px rgba(0,0,0,.25); overflow:hidden; padding:26px;
    }
    .banner-title{
      position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px;
    }
    .banner-title h3{font-size:1.1rem;color:#fff; text-align:right}
    .mini-label{
      display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
      font-weight:800;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#dfeef8
    }

    .diagram{position:relative; min-height:450px; z-index:2;}
    .diagram svg{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none}
    .cloud-card{
      position:absolute; width:246px; min-height:120px; padding:16px 16px; z-index:2;
      border-radius:22px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
      box-shadow:0 10px 24px rgba(0,0,0,.12);
    }
    .cloud-card strong{display:block; color:#fff; margin-bottom:8px; font-size:1rem; line-height:1.25}
    .cloud-card p{font-size:.89rem; line-height:1.46; color:var(--muted)}
    .lt{left:28px; top:30px}
    .lm{left:28px; top:180px}
    .lb{left:28px; top:330px}
    .rt{right:28px; top:30px}
    .rm{right:28px; top:180px}
    .rb{right:28px; top:330px}

    .cloud-center{position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:220px; height:220px; z-index:3; display:grid; place-items:center;}
    .cloud-ring{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:206px; height:206px; border-radius:50%;
      border:1px solid rgba(255,255,255,.08);
      background:radial-gradient(circle, rgba(255,255,255,.06), rgba(255,255,255,.02));
      box-shadow:0 0 0 18px rgba(47,133,175,.06), 0 0 0 36px rgba(239,48,36,.05);
    }
    .center-cube{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:130px; z-index:5; pointer-events:none}
    .center-cube img{width:100%; height:auto; display:block; filter:drop-shadow(0 15px 30px rgba(0,0,0,.25))}

    .hero-copy{display:grid;grid-template-columns:1.02fr .98fr;gap:28px;align-items:end; padding:42px}
    .hero-copy h1{max-width:11ch;margin:4px 0 18px}
    .hero-copy p{max-width:62ch}
    .hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
    .metric{padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
    .metric strong{display:block;font-size:1.2rem;color:#fff;margin-bottom:6px}

    .section-head{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:end;margin-bottom:24px}
    .grid-2,.grid-3,.grid-4,.cta-grid,.steps-grid{display:grid;gap:18px}
    .grid-2{grid-template-columns:1fr 1fr}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    .grid-4{grid-template-columns:repeat(4,1fr)}
    .steps-grid{grid-template-columns:repeat(4,1fr)}
    .cta-grid{grid-template-columns:1fr}
    .card{
      position:relative;padding:24px;border-radius:26px;
      background:linear-gradient(180deg, rgba(15,35,48,.92), rgba(13,31,43,.96));
      border:1px solid rgba(255,255,255,.07); box-shadow:var(--shadow-md); overflow:hidden;
    }
    .card:before{
      content:""; position:absolute; inset:auto -50px -80px auto; width:180px; height:180px; border-radius:50%;
      background:radial-gradient(circle, rgba(47,133,175,.18), transparent 68%);
    }
    .icon{
      width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.1)
    }
    .icon svg{width:26px;height:26px;stroke:#fff;stroke-width:1.9;fill:none}
    .card h3{margin:14px 0 10px}
    .bullet-list,.check-list{display:grid;gap:10px;margin-top:14px}
    .bullet-list li,.check-list li{position:relative;padding-left:18px;color:var(--muted);line-height:1.6}
    .bullet-list li:before,.check-list li:before{
      content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;border-radius:2px;transform:rotate(45deg);
      background:linear-gradient(135deg,var(--brand),var(--brand-2))
    }
    .band{
      padding:26px 30px 30px; border-radius:30px;
      background:radial-gradient(circle at top right, rgba(47,133,175,.18), transparent 24%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-md)
    }
    .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
    .mini-panel{padding:20px;border-radius:22px;background:rgba(8,20,28,.52);border:1px solid rgba(255,255,255,.07)}
    .highlight{color:#fff;font-weight:800}
    .footer{padding:34px 0 54px;border-top:1px solid rgba(255,255,255,.06);margin-top:20px}
    .footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end}
    .footer-note{color:var(--muted-2);font-size:.96rem}
    .footer-links{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-end}
    .footer-links a{color:#d8e6f0}

    @media (max-width:1080px){
      .hero-copy,.section-head,.compare{grid-template-columns:1fr}
      .grid-4,.grid-3,.steps-grid,.grid-2{grid-template-columns:1fr 1fr}
      /* diagrama de nuvem: passar para fluxo vertical */
      .diagram{min-height:unset; display:flex; flex-direction:column; gap:14px; align-items:center;}
      .diagram svg{display:none}
      .cloud-card{position:relative; left:auto; right:auto; top:auto; bottom:auto;
        transform:none; width:100%; max-width:480px;}
      .cloud-center{position:relative; left:auto; top:auto; transform:none;
        order:-1; margin:0 auto 16px; width:220px; height:220px;}
      .hero-banner{min-height:unset}
      .method-banner{min-height:unset}
    }
    @media (max-width:720px){
      .section{padding:54px 0}
      .hero-copy{padding:24px; gap:20px}
      .hero-copy h1{max-width:none}
      .hero-metrics,.grid-4,.grid-3,.steps-grid,.grid-2{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .footer-links{justify-content:flex-start}
      .method-banner{padding:18px}
      .banner-title{flex-direction:column; align-items:flex-start}
      .banner-title h3{text-align:left}
      .hero-shell{border-radius:20px}
    }

/* ===================================
   RESPONSIVIDADE — CLOUD DEFENSE
   =================================== */

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

*, *::before, *::after {
  box-sizing:border-box;
  overflow-wrap:break-word;
  word-break:break-word;
}

img, svg, video { max-width:100%; height:auto; }

.card, .panel, .metric, .cloud-card, .mini-panel { height:auto; max-width:100%; }
.method-banner { min-height:auto; }

@media (max-width:900px) {
  .hero-copy { padding:28px; }
  .hero-metrics { grid-template-columns:1fr 1fr; }
  .grid-3, .grid-4 { grid-template-columns:1fr 1fr; }
}

@media (max-width:640px) {
  .hero { padding:20px 0 36px; }
  .hero-copy { padding:18px; }
  .hero-shell { border-radius:18px; }
  .hero-metrics { grid-template-columns:1fr; }
  .grid-2, .grid-3, .grid-4, .steps-grid { grid-template-columns:1fr; }
  .section-head, .compare { grid-template-columns:1fr; }
  .section { padding:44px 0; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-links { justify-content:flex-start; }
  .container { width:calc(100% - 28px); }
  .cloud-card { min-height:auto; }
}

@media (max-width:420px) {
  .btn { min-height:46px; padding:0 16px; font-size:.92rem; }
  .card { padding:18px; border-radius:18px; }
}