/* --- Palette tokens --- */

:root {
  --ink: #E6ECFF;
  --top: #041A87;
  --bottom: #060729;
  --cyan: #42E8FF;
  --magenta: #FF2FA3;
  --purple: #7A4DFF;
  --yellow: #FFD84A;
  --card-bg: rgba(10, 15, 60, 0.62);
  --card-border: rgba(66, 232, 255, 0.26);
}

/* --- Page background: gradient + halftone + glow blobs --- */

body {
  min-height: 100vh;
  color: var(--ink);
  background: radial-gradient(circle at 20% 12%, rgba(66,232,255,0.18), transparent 38%), radial-gradient(circle at 82% 58%, rgba(255,47,163,0.14), transparent 40%), radial-gradient(circle at 68% 18%, rgba(122,77,255,0.14), transparent 36%), radial-gradient(circle, rgba(255,255,255,0.09) 3px, transparent 3px), radial-gradient(circle, rgba(255,255,255,0.07) 3px, transparent 3px), linear-gradient(to bottom, var(--top), var(--bottom));
  background-size: auto, auto, auto, 26px 26px, 26px 26px, cover;
  background-position: 0 0, 0 0, 0 0, 0 0, 13px 13px, 0 0;
  background-attachment: fixed;
}

/* --- Orbitron headings helper --- */

.display-orbitron {
  font-family: "Orbitron", system-ui, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* --- Brand typography --- */

.brand-title {
  font-family: "Orbitron", system-ui, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .95rem;
  color: #fff;
}

.brand-mark {
  color: #fff;
  text-decoration: none;
}

/* --- Navbar glass --- */

.nav-glass {
  background: rgba(6, 7, 41, 0.55);
  border-bottom: 1px solid rgba(66,232,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar .nav-link {
  color: rgba(230,236,255,0.85);
  font-weight: 700;
}

.navbar .nav-link:hover, .navbar .nav-link:focus {
  color: #ffffff;
}

.navbar .nav-link.active {
  color: var(--cyan);
}

/* --- Overlay grid (subtle) --- */

.grid-overlay {
  position: relative;
  isolation: isolate;
}

.grid-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .10;
  background-image: linear-gradient(to right, rgba(66,232,255,.35) 1px, transparent 1px), linear-gradient(to bottom, rgba(66,232,255,.25) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 30% 10%, #000 0 55%, transparent 72%);
  z-index: -1;
}

/* --- Card style --- */

.neon-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 30px rgba(66,232,255,0.10);
}

.neon-border {
  border: 1px solid rgba(255,47,163,0.28);
  box-shadow: 0 0 22px rgba(255,47,163,0.14);
  border-radius: 18px;
}

/* --- Hero profile card --- */

.hero-profile-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 520px;
  background: #05081e;
}

/* Desktop landscape crop */

.hero-profile-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url("../../assets/img/LG-background.webp");
  background-position: left center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
}

.hero-profile-main, .hero-profile-social {
  position: relative;
  z-index: 1;
}

.hero-profile-content {
  max-width: 760px;
}

.hero-profile-social {
  background: transparent;
}

.hero-profile-card .spark-divider {
  padding-left: 2rem;
  padding-right: 2rem;
}

.hero-profile-card .social-tile {
  width: 100%;
}

/* MD and down */

@media (max-width: 991.98px) {
  .hero-profile-card {
    min-height: auto;
  }
}

@media (max-width: 991.98px) {
  .hero-profile-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: url("../../assets/img/XS-background.webp");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
  }
}

@media (max-width: 991.98px) {
  .hero-profile-card > .col-lg-5 {
    background: transparent;
  }
}

@media (max-width: 991.98px) {
  .hero-profile-card .spark-divider {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* --- Pills / badges --- */

.pill {
  font-family: "Orbitron", system-ui, sans-serif;
  font-size: .78rem;
  letter-spacing: .06em;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(6, 7, 41, 0.35);
  color: rgba(230,236,255,0.92);
}

.pill-cyan {
  border-color: rgba(66,232,255,0.35);
}

.pill-magenta {
  border-color: rgba(255,47,163,0.35);
}

.pill-purple {
  border-color: rgba(122,77,255,0.35);
}

.pill-neutral {
  border-color: rgba(255,255,255,0.12);
}

/* --- Text helpers --- */

.small-muted {
  color: rgba(230,236,255,0.70);
  font-size: .9rem;
}

.text-ink-soft {
  color: rgba(230,236,255,0.84);
}

/* --- Buttons --- */

.btn-neon {
  color: #06102b;
  background: var(--cyan);
  border-color: rgba(66,232,255,0.5);
  box-shadow: 0 10px 30px rgba(66,232,255,0.20);
  font-weight: 800;
}

.btn-neon:hover, .btn-neon:focus {
  color: #06102b;
  background: #5ef0ff;
  border-color: rgba(66,232,255,0.75);
}

.btn-neon:active {
  background: #2fdcff;
  border-color: rgba(66,232,255,0.90);
}

.btn-outline-neon {
  color: var(--ink);
  background: transparent;
  border-color: rgba(255,47,163,0.55);
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(255,47,163,0.10);
}

.btn-outline-neon:hover, .btn-outline-neon:focus {
  color: #fff;
  background: rgba(255,47,163,0.14);
  border-color: rgba(255,47,163,0.75);
}

.btn-outline-neon:active {
  background: rgba(255,47,163,0.22);
  border-color: rgba(255,47,163,0.90);
}

/* Quick link buttons (card-like) */

.btn-quicklink {
  text-align: left;
  padding: 1rem 1rem;
  border-radius: 16px;
  background: rgba(10, 15, 60, 0.55);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--ink);
}

.btn-quicklink:hover, .btn-quicklink:focus {
  color: #fff;
  border-color: rgba(66,232,255,0.35);
  box-shadow: 0 14px 40px rgba(66,232,255,0.12);
}

/* --- Social tiles --- */

.social-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  padding: .9rem 1rem;
  border-radius: 16px;
  background: rgba(10, 15, 60, 0.55);
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-decoration: none;
  color: var(--ink);
}

.social-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(66,232,255,0.35);
  box-shadow: 0 14px 40px rgba(66,232,255,0.12);
  color: #fff;
}

/* --- Spark divider --- */

.spark-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  opacity: .9;
}

.spark-divider::before, .spark-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, transparent, rgba(66,232,255,.45), transparent);
}

.spark {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: radial-gradient(circle, rgba(255,216,74,0.9), rgba(255,216,74,0.0) 70%);
  filter: drop-shadow(0 0 10px rgba(255,216,74,0.35));
}

/* --- Section kickers --- */

.section-kicker {
  font-family: "Orbitron", system-ui, sans-serif;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.kicker-cyan {
  color: var(--cyan);
}

.kicker-magenta {
  color: var(--magenta);
}

.kicker-yellow {
  color: var(--yellow);
}

/* --- Gallery tiles --- */

.tile-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Footer divider --- */

.divider-soft {
  border-color: rgba(255,255,255,0.10);
  opacity: 1;
}

/* --- Icon dots --- */

.icon-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.icon-dot-cyan {
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(66,232,255,0.6);
}

.icon-dot-magenta {
  background: var(--magenta);
  box-shadow: 0 0 8px rgba(255,47,163,0.6);
}

.icon-dot-purple {
  background: var(--purple);
  box-shadow: 0 0 8px rgba(122,77,255,0.6);
}

.icon-dot-yellow {
  background: var(--yellow);
  box-shadow: 0 0 8px rgba(255,216,74,0.6);
}

/* Optional: reduce motion for accessibility */

@media (prefers-reduced-motion: reduce) {
  .social-tile, .btn-quicklink {
    transition: none;
  }
}