/* ============================================================
   HERO — SEGURIDAD (centered)
   ============================================================ */
.hero{padding:100px 0 56px;text-align:center}
.h-g{max-width:700px;margin:0 auto}
.h-sub{max-width:580px;margin-left:auto;margin-right:auto}

/* ============================================================
   PILLAR GRID (3 cols)
   ============================================================ */
.pl-g{display:grid;grid-template-columns:1fr;gap:14px}
.pl{padding:28px 22px;text-align:center}
.pl .ic{font-size:32px;margin-bottom:12px}
.pl h3{font-size:16px;font-weight:600;margin-bottom:6px}
.pl p{font-size:13px;color:var(--muted);line-height:1.6}

/* ============================================================
   LAYERS — SECURITY ARCHITECTURE
   ============================================================ */
.ly-g{display:flex;flex-direction:column;gap:0;max-width:640px;margin:0 auto}
.ly{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--bdr)}
.ly:last-child{border-bottom:none}
.ly-ic{width:40px;height:40px;min-width:40px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:18px}
.ly h4{font-size:14px;font-weight:600;margin-bottom:3px}
.ly p{font-size:12px;color:var(--muted);line-height:1.55}
.ly .tag{font-family:var(--m);font-size:9px;color:var(--mint);background:rgba(100,228,168,.08);border:1px solid rgba(100,228,168,.15);padding:2px 8px;border-radius:4px;display:inline-block;margin-top:6px;letter-spacing:.5px}

/* ============================================================
   PRACTICE GRID (2 cols)
   ============================================================ */
.pr-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pr{padding:18px}
.pr .ic{font-size:20px;margin-bottom:6px}
.pr h4{font-size:13px;font-weight:600;margin-bottom:3px}
.pr p{font-size:11px;color:var(--muted);line-height:1.5}

/* ============================================================
   COMPLIANCE BADGES
   ============================================================ */
.cb-g{display:grid;grid-template-columns:1fr;gap:14px}
.cb{display:flex;gap:14px;padding:20px}
.cb-ic{width:44px;height:44px;min-width:44px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:20px}
.cb h4{font-size:14px;font-weight:600;margin-bottom:3px}
.cb p{font-size:12px;color:var(--muted);line-height:1.55}

/* ============================================================
   SHIELD MOCKUP
   ============================================================ */
.sh{border-radius:16px;background:var(--grad);padding:2px;width:100%;max-width:380px}
.sh-i{border-radius:14px;background:rgba(11,10,34,.88);backdrop-filter:blur(6px);padding:24px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.sh-icon{font-size:48px;margin-bottom:4px}
.sh-stat{font-family:var(--m);font-size:clamp(32px,6vw,48px);font-weight:700;color:var(--mint);letter-spacing:-2px;line-height:1}
.sh-label{font-size:12px;color:var(--muted);margin-top:2px}
.sh-bars{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:6px}
.sh-bar{display:flex;justify-content:space-between;align-items:center;font-size:11px}
.sh-bar .l{color:var(--muted)}
.sh-bar .v{font-family:var(--m);font-weight:600;color:var(--mint);font-size:12px}
.sh-bar-track{width:100%;height:4px;background:rgba(255,255,255,.06);border-radius:2px;margin-top:3px}
.sh-bar-fill{height:100%;border-radius:2px;background:var(--gmint)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(min-width:600px){
  .hero{padding:110px 0 70px}
  .pl-g{grid-template-columns:repeat(3,1fr);gap:16px}
  .pr-g{gap:14px}
  .cb-g{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media(min-width:960px){
  .hero{padding:140px 0 80px}
}