/* ==========================================================
   DESIGN TOKENS
========================================================== */

:root {
  /* Core Background Layers */
  --bg-deep: #070b10;
  --bg-mid: #0b0f14;
  --bg-surface: #0f1720;
  --bg-elevated: #131c27;

  /* Glass */
  --glass: rgba(255,255,255,0.04);
  --glass-strong: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.08);

  /* Accent System */
  --accent: #00f0ff;
  --accent-2: #4f46e5;
  --accent-soft: rgba(0,240,255,0.2);
  --accent-glow: 0 0 25px rgba(0,240,255,0.35);

  /* Text */
  --text-primary: #e6edf3;
  --text-muted: #94a3b8;
  --text-faint: #64748b;

  /* Borders */
  --border-soft: rgba(255,255,255,0.06);
  --border-glow: rgba(0,240,255,0.2);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Motion */
  --transition-fast: 0.2s ease;
  --transition-med: 0.35s ease;
}


/* ==========================================================
   GLOBAL
========================================================== */

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 20% 20%, #111827 0%, #070b10 60%);
  color: var(--text-primary);
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent);
  color: black;
}

a {
  color: var(--accent);
  transition: var(--transition-fast);
}

a:hover {
  opacity: 0.8;
}


/* ==========================================================
   NAVBAR
========================================================== */

.navbar {
  backdrop-filter: blur(16px);
  background: rgba(10,15,20,0.65) !important;
  border-bottom: 1px solid var(--border-soft);
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.5px;
}


/* ==========================================================
   HERO
========================================================== */

.hero-gradient {
  background:
    radial-gradient(circle at 70% 30%, rgba(0,240,255,0.12), transparent 50%),
    linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 100%);
}

.hero-title {
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  background: linear-gradient(90deg, #ffffff, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtext {
  color: var(--text-muted);
  font-size: 1.1rem;
}


/* ==========================================================
   GLASS / CARDS
========================================================== */

.card,
.glass-card {
  background: var(--glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  transition: var(--transition-med);
}

.card:hover,
.glass-card:hover {
  border-color: var(--border-glow);
  box-shadow: var(--accent-glow);
  transform: translateY(-6px);
}

.elevated {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
}


/* ==========================================================
   SECTIONS
========================================================== */

.section-dark {
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-deep));
}

.section-deep {
  background: var(--bg-deep);
}

.section-divider {
  border-top: 1px solid var(--border-soft);
}


/* ==========================================================
   GRID OVERLAY / CYBER BACKDROP
========================================================== */

.grid-overlay {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 3px
  );
}


/* ==========================================================
   BUTTON SYSTEM
========================================================== */

.btn-neon {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 12px 26px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: var(--transition-med);
  position: relative;
  overflow: hidden;
}

.btn-neon:hover {
  background: var(--accent);
  color: black;
  box-shadow: var(--accent-glow);
}

.btn-neon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.4),
    transparent 70%
  );
  transform: translateX(-100%);
  transition: 0.6s ease;
}

.btn-neon:hover::before {
  transform: translateX(100%);
}


/* ==========================================================
   TYPOGRAPHY UTILITIES
========================================================== */

.text-muted {
  color: var(--text-muted) !important;
}

.text-faint {
  color: var(--text-faint);
}

h1, h2, h3, h4, h5 {
  letter-spacing: 0.4px;
}


/* ==========================================================
   HOVER INTERACTIONS
========================================================== */

.hover-glow:hover {
  box-shadow: var(--accent-glow);
}

.hover-lift:hover {
  transform: translateY(-4px);
}


/* ==========================================================
   FORMS
========================================================== */

.form-control {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}

.form-control:focus {
  border-color: var(--accent);
  box-shadow: var(--accent-glow);
  background: var(--bg-elevated);
  color: var(--text-primary);
}


/* ==========================================================
   FOOTER
========================================================== */

footer {
  background: var(--bg-mid);
  border-top: 1px solid var(--border-soft);
  color: var(--text-faint);
}


/* ==========================================================
   SCROLLBAR (WEBKIT)
========================================================== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-mid);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-soft);
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}


/* ==========================================================
   SUBTLE FADE-IN ANIMATION
========================================================== */

.fade-in {
  animation: fadeIn 1s ease forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to { opacity: 1; }
}


/* ==========================================================
   LIST GROUP (GLASS / NEON THEME)
========================================================== */

.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--border-soft);
}

.list-group-item {
  background: var(--glass);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  backdrop-filter: blur(18px);
  transition: var(--transition-med);
  padding: 0.9rem 1.25rem;
}

/* Remove hard borders between items */
.list-group-flush .list-group-item {
  border-left: none;
  border-right: none;
  border-radius: 0;
}

/* Rounded group container */
.list-group:not(.list-group-flush) .list-group-item:first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.list-group:not(.list-group-flush) .list-group-item:last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* Hover effect */
.list-group-item:hover {
  border-color: var(--border-glow);
  box-shadow: var(--accent-glow);
  transform: translateY(-2px);
}

/* Active state */
.list-group-item.active {
  background: linear-gradient(
    135deg,
    var(--accent-soft),
    rgba(0, 240, 255, 0.05)
  );
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--accent-glow);
}

/* If list items contain links */
.list-group-item a {
  color: var(--text-primary);
  text-decoration: none;
}

.list-group-item a:hover {
  color: var(--accent);
}

/* Optional subtle divider style */
.list-group-divider {
  border-top: 1px solid var(--border-soft);
  margin: 0.5rem 0;
}

/* ==========================================================
   COOKIE BANNER
========================================================== */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(10,15,20,0.9);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-soft);
  padding: 1rem 0;
  z-index: 9999;
  transform: translateY(100%);
  transition: var(--transition-med);
}

.cookie-banner.show {
  transform: translateY(0);
}

.cookie-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cookie-text {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.cookie-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Desktop layout */
@media (min-width: 768px) {
  .cookie-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .cookie-text {
    max-width: 70%;
  }
}