@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --navy:#082a63;
  --blue:#079fe8;
  --blue2:#0877d9;
  --ink:#10213d;
  --muted:#60708b;
  --bg:#f7faff;
  --white:#fff;
  --line:#dce7f5;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:Inter,Arial,sans-serif; color:var(--ink); background:var(--white); line-height:1.6; }
a { color:inherit; text-decoration:none; }

.header {
  height:82px; padding:12px 6%; display:flex; align-items:center; gap:28px;
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.brand { width:180px; }
.brand img { width:100%; height:58px; object-fit:contain; mix-blend-mode:multiply; }
.nav { margin-left:auto; display:flex; gap:25px; font-size:14px; font-weight:600; }
.nav a:hover { color:var(--blue2); }
.nav-cta { padding:11px 17px; background:var(--navy); color:white; border-radius:9px; font-size:14px; font-weight:700; }

.hero {
  min-height:650px; padding:90px 8%; display:grid; grid-template-columns:1.3fr .7fr;
  align-items:center; gap:50px; overflow:hidden;
  background:radial-gradient(circle at 80% 35%, #dff5ff 0, transparent 35%), linear-gradient(135deg,#f7fbff,#fff);
}
.eyebrow,.section-label { color:var(--blue2); letter-spacing:2.5px; font-size:12px; font-weight:800; }
.hero h1 { font-size:clamp(42px,6vw,76px); line-height:1.02; max-width:780px; margin:18px 0 25px; color:var(--navy); }
.hero p { max-width:620px; color:var(--muted); font-size:18px; }
.hero-actions { display:flex; gap:13px; margin-top:32px; flex-wrap:wrap; }

.btn { display:inline-block; border:0; cursor:pointer; padding:14px 20px; border-radius:9px; font-weight:700; font-size:14px; }
.primary { background:var(--blue2); color:white; }
.secondary { border:1px solid var(--line); background:white; color:var(--navy); }
.hero-card {
  min-height:350px; border-radius:28px; padding:45px; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center; color:white;
  background:linear-gradient(145deg,var(--navy),#0a5ec1 60%,var(--blue));
  box-shadow:0 30px 70px rgba(8,42,99,.2);
}
.hex { width:145px; height:145px; display:grid; place-items:center; font-size:72px; font-weight:800;
  background:white; color:var(--navy); clip-path:polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);
  margin-bottom:30px;
}
.hero-card p { color:#e9f7ff; max-width:280px; font-size:15px; }

.section { padding:100px 8%; }
.intro { display:grid; grid-template-columns:1fr 1fr; gap:80px; border-bottom:1px solid var(--line); }
h2 { font-size:clamp(30px,4vw,50px); line-height:1.1; color:var(--navy); margin-top:15px; }
.intro p { color:var(--muted); font-size:18px; padding-top:25px; }
.cards { margin-top:45px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { padding:34px; border:1px solid var(--line); border-radius:18px; background:white; transition:.25s; }
.card:hover { transform:translateY(-5px); box-shadow:0 18px 45px rgba(8,42,99,.1); }
.icon { color:var(--blue2); font-weight:800; font-size:13px; margin-bottom:35px; }
.card h3 { font-size:23px; margin-bottom:12px; color:var(--navy); }
.card p { color:var(--muted); font-size:15px; }

.dark-section { background:var(--navy); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.dark-section h2 { color:white; }
.dark-section p { color:#c8d8ee; margin-bottom:25px; }
.light { color:#54c7ff; }
.light-btn { background:white; color:var(--navy); }

.value-grid { margin-top:45px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.value-grid div { border-top:2px solid var(--blue); padding:20px 0; display:flex; flex-direction:column; gap:6px; }
.value-grid strong { color:var(--navy); font-size:18px; }
.value-grid span { color:var(--muted); font-size:14px; }

.contact { background:var(--bg); display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.contact-copy > p { color:var(--muted); margin:20px 0; }
.contact-details { color:var(--muted); font-size:14px; line-height:2; }
.contact-form { background:white; padding:32px; border:1px solid var(--line); border-radius:18px; }
.contact-form label { display:block; color:var(--navy); font-size:13px; font-weight:700; margin-bottom:18px; }
input,textarea { width:100%; margin-top:7px; padding:13px 14px; border:1px solid var(--line); border-radius:8px; font:inherit; outline:none; }
input:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(7,159,232,.1); }
.contact-form button { width:100%; }

footer { padding:35px 8%; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); }
footer img { width:190px; height:55px; object-fit:contain; mix-blend-mode:multiply; }
footer p { color:var(--muted); font-size:12px; }

@media (max-width:850px) {
  .header { height:auto; padding:10px 5%; flex-wrap:wrap; }
  .brand { width:150px; }
  .nav { order:3; width:100%; overflow:auto; padding:4px 0 8px; gap:18px; }
  .nav-cta { margin-left:auto; }
  .hero,.intro,.split,.contact { grid-template-columns:1fr; }
  .hero { padding-top:65px; }
  .hero-card { min-height:270px; }
  .cards { grid-template-columns:1fr; }
  .value-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:500px) {
  .section { padding:70px 6%; }
  .hero { padding:60px 6%; }
  .hero h1 { font-size:43px; }
  .value-grid { grid-template-columns:1fr; }
  footer { flex-direction:column; text-align:center; }
}