@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');

.nfc-wrap { 
  /* --- LIGHT MODE COLORS (DEFAULT) --- */
  --nfc-bg: #f5f5fa;
  --nfc-text: #15151e;
  --nfc-muted: #555566;
  --nfc-accent: #008fa3; /* Darker teal for visible contrast on light backgrounds */
  --nfc-badge-bg: rgba(0, 143, 163, 0.1);
  --nfc-badge-border: rgba(0, 143, 163, 0.25);
  --nfc-hero-grad: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(124, 58, 237, 0.07), transparent);
  --nfc-card-bg: #ffffff;
  --nfc-card-border: #dcdce6;
  --nfc-ico-bg: rgba(0, 0, 0, 0.04);
  --nfc-btn-bg: rgba(0, 143, 163, 0.06);
  --nfc-btn-hover: rgba(0, 143, 163, 0.15);

  font-family: 'Space Grotesk', sans-serif; 
  background: var(--nfc-bg); 
  color: var(--nfc-text); 
  padding-bottom: 60px; 
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* --- DARK MODE OVERRIDES (SYSTEM PREFERENCE) --- */
@media (prefers-color-scheme: dark) {
  .nfc-wrap { 
    --nfc-bg: #0a0a0f;
    --nfc-text: #e4e4f0;
    --nfc-muted: #666680;
    --nfc-accent: #00e5ff; /* Classic vibrant cyber cyan */
    --nfc-badge-bg: rgba(0, 229, 255, 0.1);
    --nfc-badge-border: rgba(0, 229, 255, 0.3);
    --nfc-hero-grad: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(124, 58, 237, 0.2), transparent);
    --nfc-card-bg: #15151e;
    --nfc-card-border: #252535;
    --nfc-ico-bg: rgba(255, 255, 255, 0.04);
    --nfc-btn-bg: rgba(0, 229, 255, 0.08);
    --nfc-btn-hover: rgba(0, 229, 255, 0.18);
  }
}

/* --- DARK MODE OVERRIDES (DRUPAL / BOOTSTRAP THEME SELECTORS) --- */
[data-bs-theme="dark"] .nfc-wrap,
.theme-dark .nfc-wrap,
body.dark .nfc-wrap { 
  --nfc-bg: #0a0a0f;
  --nfc-text: #e4e4f0;
  --nfc-muted: #666680;
  --nfc-accent: #00e5ff;
  --nfc-badge-bg: rgba(0, 229, 255, 0.1);
  --nfc-badge-border: rgba(0, 229, 255, 0.3);
  --nfc-hero-grad: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(124, 58, 237, 0.2), transparent);
  --nfc-card-bg: #15151e;
  --nfc-card-border: #252535;
  --nfc-ico-bg: rgba(255, 255, 255, 0.04);
  --nfc-btn-bg: rgba(0, 229, 255, 0.08);
  --nfc-btn-hover: rgba(0, 229, 255, 0.18);
}

.nfc-wrap a { 
  color: inherit; 
  text-decoration: none; 
}
.nfc-hero { 
  padding: 60px 0 40px; 
  text-align: center; 
  background: var(--nfc-hero-grad); 
}
.nfc-hero h1 { 
  font-size: 2.5rem; 
  font-weight: 700; 
}
.nfc-hero h1 span { 
  color: var(--nfc-accent); 
}
.nfc-hero p { 
  color: var(--nfc-muted); 
  max-width: 480px; 
  margin: 0 auto 20px; 
}
.nfc-badge { 
  background: var(--nfc-badge-bg); 
  border: 1px solid var(--nfc-badge-border); 
  color: var(--nfc-accent); 
  font-size: .7rem; 
  letter-spacing: .1em; 
  padding: 6px 14px; 
  border-radius: 100px; 
  display: inline-block; 
}

/* Isolated layout grid engine */
.nfc-grid {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 40px;
  width: 100% !important;
}
@media (min-width: 576px) {
  .nfc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 992px) {
  .nfc-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

.nfc-sec { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  margin: 40px 0 16px; 
}
.nfc-sec h2 { 
  font-size: .8rem; 
  font-weight: 600; 
  text-transform: uppercase; 
  letter-spacing: .12em; 
  color: var(--nfc-muted); 
  margin: 0; 
  white-space: nowrap; 
}
.nfc-sec hr { 
  flex: 1; 
  border-color: var(--nfc-card-border); 
  margin: 0; 
  opacity: 1; 
}
.nfc-card { 
  background: var(--nfc-card-bg) !important; 
  border: 1px solid var(--nfc-card-border) !important; 
  border-radius: 14px !important; 
  height: 100%; 
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform .2s, border-color .2s, background-color .2s; 
}
.nfc-card:hover { 
  transform: translateY(-3px); 
  border-color: var(--nfc-accent) !important; 
}
.nfc-ico { 
  width: 40px; 
  height: 40px; 
  background: var(--nfc-ico-bg); 
  border: 1px solid var(--nfc-card-border); 
  border-radius: 10px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 1.2rem; 
  flex-shrink: 0; 
}
.nfc-name { 
  font-size: .88rem; 
  font-weight: 600; 
  color: var(--nfc-text); 
}
.nfc-tag { 
  font-size: .63rem; 
  font-family: monospace; 
  color: var(--nfc-muted); 
  text-transform: uppercase; 
  letter-spacing: .08em; 
}
.nfc-desc { 
  font-size: .78rem; 
  color: var(--nfc-muted); 
  line-height: 1.55; 
}
.nfc-foot { 
  border-top: 1px solid var(--nfc-card-border); 
  padding: 10px 14px; 
}
.nfc-btn { 
  display: block; 
  text-align: center; 
  background: var(--nfc-btn-bg); 
  border: 1px solid var(--nfc-badge-border); 
  border-radius: 8px; 
  color: var(--nfc-accent) !important; 
  font-size: .76rem; 
  font-weight: 600; 
  padding: 8px; 
  transition: all .18s; 
}
.nfc-btn:hover { 
  background: var(--nfc-btn-hover); 
  border-color: var(--nfc-accent); 
}