.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 58px;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-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:42px}
    .hero-copy h1{max-width:12ch;margin:4px 0 18px}
    .hero-copy p{max-width:64ch}
    .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}
    .panel{
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.07);
      border-radius:28px;box-shadow:var(--shadow-md);
    }
    .hero-visual{position:relative;min-height:520px;padding:22px}
    .hero-visual .panel{height:100%;padding:22px;overflow:hidden;position:relative}
    .panel-badge{
      display:inline-flex;align-items:center;gap:10px;padding:9px 12px;border-radius:999px;
      font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#dfeef8
    }
    .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:26px 26px;mask-image:radial-gradient(circle at center, black 34%, transparent 88%);
      opacity:.55
    }
    .hero-schematic{
      position:relative; margin-top:18px; height:410px;
      border-radius:26px; border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(18,43,58,.72), rgba(12,28,38,.88));
      overflow:hidden; box-shadow:0 18px 48px rgba(0,0,0,.25); padding:22px;
    }
    .cube{
      position:absolute; top:24px; right:24px; width:94px; height:94px; transform:rotate(-8deg);
    }
    .cube:before,.cube:after,.cube div{
      content:""; position:absolute; inset:0; border-radius:16px; background:linear-gradient(135deg,#f14c39,#bb1220);
      box-shadow:0 18px 34px rgba(239,48,36,.28)
    }
    .cube:before{transform:translate(-14px,-14px); opacity:.46}
    .cube:after{transform:translate(14px,14px); opacity:.22}
    .cube div{border:1px solid rgba(255,255,255,.18)}
    .schematic-flow{
      position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:96px;
    }
    .flow-card{
      padding:16px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
      min-height:142px;
    }
    .flow-card .step-num{
      width:34px;height:34px;border-radius:12px;display:grid;place-items:center; margin-bottom:12px;
      background:linear-gradient(135deg,var(--brand),var(--brand-2)); font-weight:900;
    }
    .flow-card strong{display:block;color:#fff;margin-bottom:8px}
    .flow-line{
      position:absolute; left:66px; right:116px; top:205px; height:2px;
      background:linear-gradient(90deg, rgba(239,48,36,.25), rgba(47,133,175,.45));
      z-index:1;
    }

    .section-head{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:end;margin-bottom:24px}
    .cards-grid,.grid-2,.grid-4,.steps-grid,.cta-grid{display:grid;gap:18px}
    .cards-grid{grid-template-columns:repeat(2,1fr)}
    .grid-2{grid-template-columns:1fr 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))
    }
    .compare-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)
    }
    .before-after{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)}
    .mini-panel h3{margin-bottom:12px}
    .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-grid,.section-head,.before-after{grid-template-columns:1fr}
      .grid-4,.steps-grid,.cards-grid,.grid-2{grid-template-columns:1fr 1fr}
      .hero-schematic{height:auto}
      .schematic-flow{grid-template-columns:1fr 1fr;margin-top:60px}
      .flow-line{display:none}
      .hero-visual{min-height:auto}
    }
    @media (max-width:720px){
      .section{padding:54px 0}
      .hero-grid{padding:24px;gap:20px}
      .hero-copy h1{max-width:none}
      .hero-metrics,.grid-4,.steps-grid,.cards-grid,.grid-2{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .footer-links{justify-content:flex-start}
      .schematic-flow{grid-template-columns:1fr;margin-top:20px}
      .hero-schematic{padding:16px}
    }

/* ===================================
   RESPONSIVIDADE — ARQUITETURA TITAN
   =================================== */

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;
}

/* Cards e painéis abraçam o conteúdo */
.card, .panel, .mini-panel, .flow-card, .metric {
  height: auto;
  max-width: 100%;
}

/* min-height rígida causa overflow: liberar em mobile */
.flow-card { min-height: auto; }
.hero-visual { min-height: auto; }

/* Tablet intermediário */
@media (max-width: 900px) {
  .hero-grid { padding: 28px; gap: 20px; }
  .hero-metrics { grid-template-columns: 1fr 1fr; }
  .cards-grid, .grid-4, .steps-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .hero { padding: 20px 0 36px; }
  .hero-grid { padding: 18px; }
  .hero-shell { border-radius: 20px; }
  .hero-metrics { grid-template-columns: 1fr; }
  .cards-grid, .grid-4, .steps-grid, .grid-2 {
    grid-template-columns: 1fr;
  }
  .section-head { grid-template-columns: 1fr; }
  .section { padding: 48px 0; }
  .before-after { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .container { width: calc(100% - 28px); }
}

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