* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, Arial, sans-serif;
  background: #07111f;
  color: #eef5ff;
  line-height: 1.6;
}
.container { width: min(1120px, 92%); margin: auto; }
.navbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(7,17,31,.94);
  border-bottom: 1px solid #19304a;
  backdrop-filter: blur(12px);
}
.nav-inner { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { color: white; text-decoration: none; font-weight: 800; letter-spacing: .5px; }
.brand span { font-weight: 400; }
nav { display: flex; gap: 28px; }
nav a { color: #b9c9dc; text-decoration: none; }
nav a:hover { color: white; }
.nav-button, .primary-button, .secondary-button {
  display: inline-block; padding: 12px 20px; border-radius: 8px; text-decoration: none; font-weight: 700;
}
.nav-button, .primary-button { background: #39b8ff; color: #04101c; }
.secondary-button { border: 1px solid #35516e; color: white; }
.hero { padding: 110px 0 120px; background: radial-gradient(circle at 80% 30%, #12375a 0, transparent 35%); }
.hero-grid { display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: 70px; }
.eyebrow { color: #39b8ff; font-size: 12px; font-weight: 800; letter-spacing: 2px; margin-bottom: 16px; }
h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.04; letter-spacing: -2px; }
h1 span { color: #39b8ff; }
.hero-text { max-width: 650px; margin: 25px 0 32px; color: #b9c9dc; font-size: 18px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.shield-card {
  min-height: 330px; border: 1px solid #244563; border-radius: 24px;
  background: linear-gradient(145deg, #0e2339, #081522);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  box-shadow: 0 25px 80px rgba(0,0,0,.25);
}
.shield { font-size: 150px; color: #39b8ff; line-height: 1; }
.shield-card p { text-align: center; letter-spacing: 3px; color: #9eb2c8; }
.shield-card strong { color: white; }
.section { padding: 100px 0; }
h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.1; margin-bottom: 42px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card { padding: 28px; border: 1px solid #1d3853; border-radius: 16px; background: #0a192a; }
.card .icon { color: #39b8ff; font-weight: 800; margin-bottom: 35px; }
.card h3 { font-size: 21px; margin-bottom: 10px; }
.card p { color: #9eb2c8; font-size: 15px; }
.about { padding: 90px 0; background: #0a192a; border-top: 1px solid #19304a; border-bottom: 1px solid #19304a; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.about-grid h2 { margin-bottom: 0; }
.about-grid > p { color: #b9c9dc; font-size: 18px; }
.contact-box { padding: 55px; border: 1px solid #2a4b69; border-radius: 20px; background: linear-gradient(120deg, #0d263d, #091827); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.contact-box h2 { margin-bottom: 12px; }
.contact-box p { color: #aebfd2; }
footer { border-top: 1px solid #19304a; padding: 25px 0; color: #7890a8; font-size: 13px; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; }
@media (max-width: 800px) {
  nav { display: none; }
  .hero { padding: 75px 0; }
  .hero-grid, .about-grid { grid-template-columns: 1fr; gap: 45px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .contact-box { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; }
  .nav-button { display: none; }
}