:root {
  --logo-navy: #16294f;
  --logo-navy-deep: #0f1e38;
  --logo-navy-mid: #2c4c6e;
  --logo-green: #3d5a80;
  --gold: #b08d57;
  --primary-gradient: linear-gradient(135deg, #16294f 0%, #2c4c6e 100%);
  --shadow: 0 10px 25px rgba(22,41,79,0.15);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Outfit, "Segoe UI", sans-serif;
  color: #1a2a3a;
  background: #fff;
}
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; }
#header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 99999;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px);
  padding: 14px 0;
  box-shadow: 0 2px 20px rgba(0,0,0,.08);
}
#header.scrolled { padding: 10px 0; }
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  padding: 0 80px;
  gap: 20px;
}
.logo-wrap {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-img { height: 58px; width: auto; display: block; }
.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.main-nav .nav-link {
  color: #1a2a3a;
  text-decoration: none;
  font-weight: 500;
  font-size: .9rem;
  padding: 9px 16px;
  border-radius: 40px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active {
  color: var(--logo-green);
  background: rgba(30,136,229,.09);
}
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #fff;
  min-width: 280px;
  border-radius: 18px;
  padding: 10px 0;
  box-shadow: 0 20px 50px rgba(0,0,0,.13);
  border: 1px solid rgba(0,0,0,.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .25s ease;
  z-index: 100000;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: none;
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 22px;
  color: #1a2a3a;
  text-decoration: none;
  font-size: .875rem;
}
.nav-dropdown-menu a:hover {
  background: #f0f9ff;
  color: var(--logo-green);
}
.hamburger-btn, .nav-close-btn { display: none; }
.hamburger-btn {
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.hamburger-btn span {
  display: block; width: 24px; height: 2.5px; background: #1a2a3a; border-radius: 3px;
}
.mkt-main { padding-top: 110px; }
.hero {
  background: radial-gradient(900px 400px at 10% -10%, rgba(22,41,79,.1), transparent 50%),
    linear-gradient(180deg, #eaf0f6, #fff 55%);
  padding: 64px 80px 48px;
}
.hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--logo-navy);
  margin: 0 0 12px;
}
.hero p { max-width: 720px; color: #4f7096; line-height: 1.7; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.info { padding: 8px 80px 48px; }
.info h2 { color: var(--logo-navy); margin: 0 0 18px; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.card h3 { color: var(--logo-navy); font-size: 1.15rem; margin: 0 0 8px; font-family: "Playfair Display", Georgia, serif; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-gradient);
  color: #fff;
  padding: 12px 22px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.btn.gold { background: var(--gold); }
.btn.ghost {
  background: #fff;
  color: var(--logo-navy);
  border: 1px solid #c9d4e3;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 20px 80px 80px;
}
.card {
  border: 1px solid #e4ddd2;
  border-radius: 16px;
  padding: 22px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(18,58,99,.04);
}
.card h2 { color: var(--logo-navy); font-size: 1.35rem; margin: 0 0 8px; }
.card p { color: #556677; margin: 0 0 16px; line-height: 1.6; }
.note { font-size: .85rem; color: #6b7280; }
footer {
  background: var(--logo-navy-deep);
  color: #c9d4e3;
  padding: 56px 0 28px;
}
.fcontainer { max-width: 1280px; margin: 0 auto; padding: 0 80px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 40px;
}
.footer-logo { height: 56px; width: auto; margin-bottom: 16px; background: #fff; border-radius: 8px; padding: 6px 8px; }
.footer-col h3 { color: #fff; font-size: 1rem; margin: 0 0 14px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-link { margin-bottom: 10px; }
.footer-link a { color: #8899aa; text-decoration: none; }
.footer-link a:hover { color: #fff; }
footer hr { border: none; border-top: 1px solid rgba(255,255,255,.08); margin-bottom: 24px; }
.footer-bottom p { margin: 0; color: #556677; }
@media (max-width: 992px) {
  .header-container, .hero, .grid, .info, .fcontainer { padding-left: 20px; padding-right: 20px; }
  .grid-4 { grid-template-columns: 1fr; }
  .hamburger-btn { display: flex; }
  .main-nav {
    display: none;
    position: fixed; inset: 0;
    background: rgba(255,255,255,.98);
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .main-nav.open { display: flex; }
  .nav-close-btn {
    display: block;
    position: absolute; top: 20px; right: 20px;
    background: none; border: none; font-size: 1.6rem;
  }
  .nav-dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .grid, .footer-grid { grid-template-columns: 1fr; }
}