:root { --db-dark: #071a22; --db-accent: #00b8b8; }
body { scroll-behavior: smooth; }
.navbar-brand img { height: 40px; width: auto; }
.hero {
  background: radial-gradient(1200px 600px at 50% 0%, rgba(0,184,184,0.18), transparent 70%),
              linear-gradient(180deg, #071a22 0%, #0a2430 100%);
  color: #fff;
}
.hero .badge { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); }
.section-title { letter-spacing: -0.02em; }
.btn-accent { background: var(--db-accent); border-color: var(--db-accent); color: #001014; }
.btn-accent:hover { filter: brightness(0.95); color: #1c1c1c; background-color: #64fbfb; }
.card-soft { border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 10px 25px rgba(0,0,0,0.06); border-radius: 1rem; }
.footer a { color: inherit; opacity: 0.85; }
.footer a:hover { opacity: 1; }
.small-muted { color: rgba(255,255,255,0.75); }
.kpi { border-left: 3px solid rgba(0,184,184,0.9); padding-left: 0.9rem; }

/* Portrait screenshot helpers */
.portrait-grid { display: grid; gap: 1rem; }
@media (min-width: 992px) {
  .portrait-grid.hero-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  .portrait-grid.hero-grid { grid-template-columns: 1fr; }
}
.portrait-shot {
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.12); /* subtle on dark bg */
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
}
.light-shot {
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}