body.bg-gradient {
  margin: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: radial-gradient(1200px 600px at 80% -20%, #133, #000), linear-gradient(180deg, #020617 30%, #0b1020 100%);
  color: #fff;
}
.sticky {position: sticky;}
.nav-header {
  background: rgba(10, 10, 20, 0.9);
  backdrop-filter: blur(3px);
  border-bottom: 1px solid #222a3c;
  z-index: 50;
}
.nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: auto; padding: 16px 0;}
.logo-section { display: flex; align-items: center; gap: 12px; text-decoration: none;}
.logo-circle {background: #34d39922; border-radius: 12px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid #34d39944; color: #34d399; font-size: 22px; font-weight: bold;}
.logo-titles .main-title { font-size: 17px; font-weight: bold; color: #fff;}
.logo-titles .sub-title { font-size: 10px; color: #bbb; text-transform: uppercase;}
.nav-links { display: flex; gap: 22px; }
.nav-links a { color: #eee; font-size: 15px; text-decoration: none; font-weight: 500; }
.nav-links a:hover, .nav-btn:hover { color: #34d399; }
.nav-btn { background: #34d399; color: #141827; padding: 8px 20px; border-radius: 18px; font-weight: 600; }
.hero-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  margin: 32px auto;
  padding: 30px 18px 0 18px;
  gap: 38px;
  align-items: center;
}
.hero-info { display: flex; flex-direction: column; gap: 18px;}
.badge { background: #2db78d12; padding: 5px 18px; color: #34d399; border-radius: 12px; font-size: 13px; margin-right: 8px; display: inline-flex; align-items: center;}
.hero-info h1 { font-size: 2.7em; font-weight: bold; line-height: 1.09; margin: 0; }
.hero-info .highlight { color: #34d399; }
.hero-info p { color: #dbe6ee; font-size: 1.13em; margin-bottom: 10px;}
.hero-buttons {display: flex; gap:14px;}
.primary-btn, .secondary-btn { font-weight: 600; text-decoration:none; padding:10px 28px; border-radius:18px; font-size:1.06em;}
.primary-btn { background:#fff; color:#141827;}
.secondary-btn {background:rgba(255,255,255,0.08); color:#fff; border:1px solid #fff1; }
.primary-btn:hover {background: #dbffd3;}
.secondary-btn:hover {background:rgba(34,211,161,0.15);}
.hero-badges {display:flex;gap:8px;margin-top:9px;}
.hero-chart .card { background: rgba(255,255,255,0.06); border-radius: 24px; box-shadow: 0 4px 18px #0d091415; padding:18px; }
.card-title { color: #c0ede7; margin-bottom: 12px; font-size:15px;}
.chart-img { border-radius: 12px; border: 1px solid #223; width:100%; max-width:330px;}

.section { max-width: 1100px; margin: 0 auto; padding: 42px 18px;}
.section-title { font-size:2.1em; font-weight: bold; color: #fff;}
.section-sub {color:#dbe6ee;font-size:1.1em;margin-bottom:32px;}
.cards-row {display:flex;gap:26px;flex-wrap:wrap;}
.card {background:rgba(255,255,255,0.06);border-radius:24px;border:1px solid #1bd89913;box-shadow:0 6px 18px #0d091415;padding:25px;flex:1 1 230px;min-width:230px;max-width:340px;}
.card-icon {font-size:28px;color:#34d399;margin-bottom:8px;}
.card-head {font-size:1.15em;font-weight:bold;color:#34d399;}
.card-desc, ul li {color:#bfefe7;font-size:1em;}
ul {padding-left:19px; margin-top:9px;margin-bottom:0;}
ul li {margin-bottom:6px;}
.contact-btn {display:inline-block;background:#34d399;color:#141827;border-radius:18px;padding:14px 36px;font-weight:600;text-decoration:none;font-size:1.14em;margin-top:18px;margin-bottom:8px;}
.contact-btn:hover {background:#80ffe0;color:#141827;}
.footer {background:#0a111e;padding:36px 18px;text-align:center;color:#81aeb2;font-size:0.97em;}
.disclaimer {color:#31d3b8;font-size:0.87em;margin-top:10px;}