:root {
  --bg-light-1: #d9ebfa;
  --bg-light-2: #f2f7ff;
  --bg-dark-1: #0d1a33;
  --bg-dark-2: #1a2640;
  --accent-1: #3399e6;
  --accent-2: #66ccff;
  --text: #09203a;
  --glass: rgba(255, 255, 255, 0.7);
  --border: rgba(255, 255, 255, 0.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "SF Pro Rounded", "Avenir Next", "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(160deg, var(--bg-light-1), var(--bg-light-2));
  min-height: 100vh;
}

a { color: #0b4d82; }
.container { width: min(1080px, 92%); margin: 0 auto; padding: 2rem 0; }
.nav-wrap { position: sticky; top: 0; z-index: 10; margin: 1rem auto; width: min(1080px, 92%); border-radius: 18px; }
.nav { display: flex; gap: 1rem; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; }
.logo { font-weight: 700; text-decoration: none; color: #04233f; }
.links { display: flex; gap: 1rem; flex-wrap: wrap; }
.links a { text-decoration: none; }

.glass {
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(5, 35, 62, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero { display: grid; gap: 1.5rem; align-items: center; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.eyebrow { font-weight: 600; letter-spacing: 0.04em; }
h1, h2, h3 { margin-top: 0; }
.hero h1 {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.subtitle { font-size: 1.1rem; max-width: 35ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.button {
  display: inline-block;
  padding: .75rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}
.primary { color: white; background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); }
.secondary { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255,255,255,.9); }

.app-preview { border-radius: 20px; padding: 1rem; display: grid; gap: .8rem; animation: float 5s ease-in-out infinite; }
.screen { border-radius: 14px; padding: 1rem; background: rgba(255, 255, 255, 0.65); }

.grid { display: grid; gap: 1rem; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.card, .stat-card, .callout, .table-wrap { border-radius: 16px; padding: 1rem; }
.stat-card h2 { margin-bottom: .3rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem; border-bottom: 1px solid rgba(9, 32, 58, 0.12); }

.footer { padding-top: 0; display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.footer-links { display: flex; gap: .9rem; flex-wrap: wrap; }

.fade-on-scroll { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.fade-on-scroll.show { opacity: 1; transform: translateY(0); }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-color-scheme: dark) {
  body {
    color: #e6f2ff;
    background: linear-gradient(160deg, var(--bg-dark-1), var(--bg-dark-2));
  }
  .logo, a { color: #b7e4ff; }
  .glass { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
  .secondary, .screen { color: #e6f2ff; background: rgba(26, 44, 77, 0.7); border-color: rgba(102, 204, 255, 0.35); }
  th, td { border-bottom-color: rgba(214, 236, 255, 0.2); }
}

@media (max-width: 640px) {
  .nav { flex-direction: column; align-items: flex-start; }
}