:root {
  --ng-primary: #6c5ce7; /* nebula violet */
  --ng-secondary: #00d1b2; /* aqua */
  --ng-dark: #0b1021;
  --ng-light: #f7f8fc;
}
html { scroll-behavior: smooth; }
body { font-feature-settings: "palt"; }
.navbar-brand img { height: 36px; width: auto; }
.navbar { transition: box-shadow .2s ease, background-color .2s ease; }
.navbar.scrolled { background: rgba(11,16,33,.92)!important; box-shadow: 0 8px 24px rgba(0,0,0,.25); }

/* Hero */
#home {
  min-height: 100vh;
  color: #fff;
  background: radial-gradient(1000px 600px at 20% 20%, rgba(108,92,231,.35), transparent 60%),
              radial-gradient(800px 500px at 80% 30%, rgba(0,209,178,.25), transparent 55%),
              linear-gradient(160deg, #0b1021 0%, #121a39 60%, #1b2553 100%);
  position: relative;
  overflow: hidden;
}
.hero-stars::before, .hero-stars::after {
  pointer-events: none;
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 80%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 75% 50%, rgba(255,255,255,.6) 50%, transparent 51%);
  animation: twinkle 6s linear infinite;
  opacity: .5;
}
.hero-stars::after { animation-duration: 9s; opacity: .35; }
@keyframes twinkle { 0%{transform:translateY(0)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0)} }

.btn-gradient { background: linear-gradient(90deg, var(--ng-primary), var(--ng-secondary)); border: none; }
.btn-gradient:hover { filter: brightness(1.05); }
.section-title span { color: var(--ng-secondary); }
.lead-muted { color: #94a3b8; }

/* Cards */
.ng-card { border: none; border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.ng-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }

/* Feature Icons */
.icon-xl { font-size: 2rem; color: var(--ng-primary); }

/* Portfolio */
.portfolio img { border-radius: .75rem; object-fit: cover; aspect-ratio: 4/3; }

/* CTA Band */
.cta-band { background: linear-gradient(120deg, rgba(108,92,231,.12), rgba(0,209,178,.12)); border: 1px solid rgba(255,255,255,.08); }

/* Footer */
footer { background: #0d132b; color: #a9b0c7; }
footer a { color: #cfd6ff; text-decoration: none; }
footer a:hover { text-decoration: underline; }