:root{
  --bg:#0b0f1a;
  --bg-soft:#0f1626;
  --card:#17233a;
  --primary:#7c5cff;
  --primary-2:#18c8ff;
  --text:#e6ecff;
  --muted:#c7d3ea;
  --badge:#1a2340;
  --glass:rgba(255,255,255,0.1);
  --border:rgba(255,255,255,0.14);
  --shadow:0 12px 36px rgba(0,0,0,.45);
}

html,body{height:100%}
body{
  background: radial-gradient(1200px 600px at 10% -10%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(1200px 600px at 110% 10%, rgba(24,200,255,.2), transparent 60%),
              var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.bg-navbar{ background: linear-gradient(180deg, rgba(10,14,24,.9), rgba(10,14,24,.7)); }
.bg-section{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)); }

.hero-section{ padding-top: 4rem; padding-bottom: 4rem; }
.text-hero{ color:var(--muted); max-width: 56ch; }
.bg-badge{ background: var(--badge); color:#c8d4ff; }
body .text-muted{ color: rgba(230,236,255,.86) !important; }

.gradient-btn{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border: none;
  color:#fff;
  box-shadow: 0 10px 25px rgba(124,92,255,.35), 0 8px 15px rgba(24,200,255,.2);
}
.gradient-btn:hover{ opacity:.95; color:#fff; }

.glass-card{ background: linear-gradient(180deg, rgba(10,14,24,.82), rgba(10,14,24,.6)); backdrop-filter: blur(12px); border:1px solid var(--border); box-shadow: var(--shadow); }
.avatar{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: var(--shadow); }

.terminal{ background: #0b1324; border-radius: 12px; border:1px solid var(--border); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.terminal-line{ color:#d9e4ff; opacity:.9; }
.terminal .prompt{ color:#8ab4ff; margin-right:.5rem; }

.pricing-card{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), var(--card); border:1px solid var(--border) !important; box-shadow: var(--shadow); color: var(--text); }
.pricing-card.pro{ border:1px solid rgba(124,92,255,.6) !important; box-shadow: 0 16px 46px rgba(124,92,255,.25), var(--shadow); }

.card{ background: var(--card); border:1px solid var(--border); box-shadow: var(--shadow); color: var(--text); }
.card.border-0{ border:1px solid var(--border) !important; }
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6{ color:#fff; }
.card .text-muted{ color:#b8c7e6 !important; }

.card, .navbar, .btn{ border-radius:14px; }

a{ color:#a6c8ff; }
a:hover{ color:#c6dcff; }

.btn-outline-light{ color:#f3f6ff; border-color: rgba(255,255,255,.6); }
.btn-outline-light:hover{ color:#0b0f1a; background:#f3f6ff; border-color:#f3f6ff; }

/* Providers section: ensure high contrast inside cards */
#providers .card{ background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(255,255,255,.02)), var(--card); }
#providers .card p, #providers .card .text-muted, #providers .card .small{ color: rgba(243,246,255,.92) !important; }
#providers .card .small{ opacity: .9; }

@media (max-width: 767.98px){
  .display-5{ font-size: 2rem; }
}