/* ==========================================================================
   Homepage dark theme — loaded by index.html ONLY (b2b pages keep the light
   theme from style.css). Works by re-mapping the palette variables, plus a
   few spots where style.css assumes a light background.
   ========================================================================== */

:root {
  --color-text: #c9cce3;
  --color-text-light: #a5a9c9;
  --color-text-muted: #7e82a6;
  --color-bg: #0f1124;
  --color-bg-alt: #171a33;
  --color-border: rgba(255, 255, 255, 0.09);
}

body {
  background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  color: #f0f1fa;
}

/* Section accents */
.section-tag {
  color: #9fb6e8;
  background: linear-gradient(135deg, rgba(79, 125, 191, 0.16), rgba(130, 106, 173, 0.16));
}

/* Soft brand glows behind the main sections */
#apps {
  background:
    radial-gradient(700px 420px at 85% 0%, rgba(130, 106, 173, 0.12), transparent 65%),
    var(--color-bg);
}

#features {
  background:
    radial-gradient(600px 380px at 15% 10%, rgba(79, 125, 191, 0.10), transparent 65%),
    var(--color-bg-alt);
}

#about {
  background:
    radial-gradient(650px 400px at 90% 90%, rgba(130, 106, 173, 0.10), transparent 65%),
    var(--color-bg);
}

/* Glassy cards */
.app-card,
.feature-card {
  background: rgba(255, 255, 255, 0.03);
}

.app-card:hover {
  border-color: rgba(130, 106, 173, 0.45);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.feature-card:hover {
  border-color: rgba(79, 125, 191, 0.45);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

.chip {
  background: rgba(255, 255, 255, 0.06);
}

.chip i {
  color: #9fb6e8;
}

.app-tagline {
  color: #9fb6e8;
}

/* Links & outline buttons need lighter brand tones on dark */
a {
  color: #9fb6e8;
}

a:hover {
  color: #b9c9f0;
}

.btn-outline-brand {
  color: #9fb6e8;
  border-color: #4f7dbf;
}

.btn-outline-brand:hover {
  background: var(--gradient-accent);
  border-color: transparent;
  color: #fff;
}

/* Mobile nav dropdown (style.css uses a white panel) */
.navbar-mobile ul {
  background-color: #171a33;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  color: #e8eaf6;
}

/* Tech stack icons on dark */
.tech-icon:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.tech-icon:hover i {
  color: #9fb6e8;
}

/* About logo needs a lift on the dark background */
.about-logo {
  filter: brightness(1.45);
}