:root{
  --bg: #f7f9ff;
  --surface: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-2: #16a34a;
  --accent-3: #f59e0b;
  --line: rgba(15,23,42,.10);
  --shadow: 0 14px 34px rgba(15,23,42,.10);
  --radius: 18px;
}

body { background: var(--bg); color: var(--ink); }
a { text-decoration: none; }
.link-muted { color: var(--muted); }
.link-muted:hover { color: var(--ink); }

.nav-glass{
  background: rgba(247,249,255,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand-mark{
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(37,99,235,.10);
  color: var(--accent);
}

.btn-primary{ background: var(--accent); border-color: var(--accent); }
.btn-primary:hover{ filter: brightness(.95); }

.card-soft{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero{
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 12% 10%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(700px 380px at 86% 24%, rgba(22,163,74,.10), transparent 58%),
    radial-gradient(560px 300px at 70% 88%, rgba(245,158,11,.12), transparent 55%);
}

.hero .hero-frame{
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.kpi-tile{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px;
  background: #fff;
}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.86);
}

.subtle-float{
  transform: translateY(0);
  transition: transform .35s ease, box-shadow .35s ease;
}
.subtle-float:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15,23,42,.14);
}

.section-title{ letter-spacing: .2px; }

.mock-shot{
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow:hidden;
  background: #fff;
  box-shadow: var(--shadow);
}

.bg-soft{
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.icon-badge{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(37,99,235,.08);
  color: var(--accent);
}

.gradient-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.35), rgba(22,163,74,.22), transparent);
  border: none;
}

.smallcaps{
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Navbar logo sizing (PNG for now) */
.navbar-brand img {
  height: 52px;
  width: auto;
}

@media (max-width: 576px) {
  .navbar-brand img {
    height: 42px;
  }
}