/* =========================================
   TITAN CORE LABS - GLOBAL THEME & RESETS
   ========================================= */
:root {
  --bg: #050a0f;
  --bg-2: #09131a;
  --surface: #0e1d28;
  --surface-2: #142736;
  --surface-3: #1a3447;
  --line: rgba(141,192,230,.12);
  --text: #f4f9fc;
  --muted: #abc6d9;
  --muted-2: #7899b0;
  --brand: #f94144;
  --brand-2: #f3722c;
  --brand-dark: #d90429;
  --accent: #0077b6;
  --accent-2: #0096c7;
  --ok: #90e0ef;
  --white: #ffffff;
  --shadow-xl: 0 32px 90px rgba(0,0,0,.45);
  --shadow-md: 0 16px 50px rgba(0,0,0,.35);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.25);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --max: 1260px;
  --header-h: 88px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(circle at top center, rgba(47,133,175,.16), transparent 26%),
              linear-gradient(180deg, #050a0f 0%, #09131a 100%);
  color: var(--text);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: clamp(2.8rem,5.2vw,5.55rem); line-height: .96; letter-spacing: -.05em; font-weight: 800; }
h2 { font-size: clamp(2rem,3vw,3.3rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 700; }
h3 { font-size: clamp(1.2rem,2vw,1.55rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 600; }
p { color: var(--muted); line-height: 1.66; }
ul { margin: 0; padding: 0; list-style: none; }
.container { width: min(calc(100% - 36px), var(--max)); margin: 0 auto; }
.section { position: relative; padding: 110px 0; }

.btns { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 24px; border-radius: 18px; border: 1px solid transparent;
  font-weight: 800; letter-spacing: -.01em; transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer;
  position: relative; overflow: hidden; z-index: 1;
}
.btn-primary { background: linear-gradient(90deg,var(--brand),var(--brand-2)); color: #fff; }
.btn-secondary { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #eef6fb; backdrop-filter: blur(12px); }

/* DIAGRAM CYBERSECURITY RECONSTRUCTED */
.cyber-circuit-wrap {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 36px auto;
  max-width: 1200px;
  width: 100%;
}
.cyber-circuit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.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));
}
.cyber-node {
  position: absolute;
  width: 260px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  z-index: 2;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  backdrop-filter: blur(8px);
}
.cyber-node strong {
  display: block;
  color: #fff;
  margin-bottom: 8px;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.cyber-node p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.tl { left: 16px; top: 28px; }
.bl { left: 16px; bottom: 28px; }
.tr { right: 16px; top: 28px; }
.br { right: 16px; bottom: 28px; }

    .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:420px;
      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;
    }
    .method-banner{
      position:relative;
      width:100%;
      min-height:360px;
      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}
    .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
    }
    .method-grid{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:1fr 180px 1fr;
      gap:18px;
      align-items:center;
      min-height:250px;
    }
    .zone{
      display:grid;
      gap:14px;
    }
    .layer{
      padding:16px 18px;
      border-radius:20px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 10px 24px rgba(0,0,0,.12);
    }
    .layer strong{display:block;color:#fff;margin-bottom:8px}
    .layer p{font-size:.95rem;line-height:1.55}
    .center-core{
      position:relative;
      display:grid;
      place-items:center;
      min-height:240px;
    }
    .center-ring{
      width:170px;height:170px;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));
      display:grid;place-items:center;
      position:relative;
      box-shadow:0 0 0 18px rgba(47,133,175,.06), 0 0 0 36px rgba(239,48,36,.05);
    }
    
    .cube:before{transform:translate(-14px,-14px);opacity:.44}
    .cube:after{transform:translate(14px,14px);opacity:.2}
    .cube div{border:1px solid rgba(255,255,255,.18)}
    .banner-svg{
      position:absolute;inset:0;z-index:1;pointer-events:none;
    }
    .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}
      .method-grid{grid-template-columns:1fr}
      .center-core{min-height:auto}
      .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}
      .hero-shell{border-radius:20px}
    }

/* cyber-circuit: nós absolutos → fluxo relativo em tablet */
@media (max-width:1080px){
  .cyber-circuit-wrap{min-height:unset; display:flex; flex-direction:column; align-items:center; gap:14px}
  .cyber-circuit-svg{display:none}
  .cyber-node{position:relative; width:100%; max-width:480px; left:auto; right:auto; top:auto; bottom:auto}
  .center-cube{position:relative; left:auto; top:auto; transform:rotate(-8deg); width:108px; margin:0 auto}
}
@media (max-width:720px){
  .center-cube{width:90px}
  .cyber-node p{font-size:.88rem}
}

/* ===================================
   RESPONSIVIDADE — CYBERSECURITY
   =================================== */

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, .layer, .mini-panel { height:auto; max-width:100%; }
.method-banner, .center-core { 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); }
  .method-grid { grid-template-columns:1fr; }
}

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