:root {
  /* === Brand colors ===
     NOTE: I couldn't programmatically read your current WordPress theme colors (site blocks automated fetch).
     Keep these variables aligned with your existing EyeShield brand colors.
     Replace values below with your real palette (primary, accent, background).
  */
  --brand-900: #0b1220;
  --brand-850: #0f1930;
  --brand-800: #111b33;
  --brand-700: #1a2a52;
  --brand-500: #2563eb; /* primary */
  --brand-400: #60a5fa;
  --accent-500: #f59e0b; /* accent (CTA highlight) */
  --text-100: #e5e7eb;
  --text-200: #cbd5e1;
  --text-300: #9ca3af;

  --radius: 18px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.2);

  --bs-heading-color: #c9c3b4;
  --bs-body-color: #b9ac9b;
}

html,
body {
  height: 100%;
}
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  color: var(--text-100);
}

.bg-app {
  background: radial-gradient(
      1200px 600px at 15% 10%,
      rgba(37, 99, 235, 0.25),
      rgba(0, 0, 0, 0) 60%
    ),
    radial-gradient(
      900px 500px at 85% 10%,
      rgba(245, 158, 11, 0.12),
      rgba(0, 0, 0, 0) 55%
    ),
    linear-gradient(180deg, var(--brand-900), var(--brand-850));
}

.pt-nav {
  padding-top: 86px;
}

/* Navbar */
.glassy {
  backdrop-filter: blur(10px);
  background: rgba(15, 25, 48, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.navbar .nav-link {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #fff;
}
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: radial-gradient(
      circle at 25% 30%,
      rgba(245, 158, 11, 0.95),
      rgba(245, 158, 11, 0) 60%
    ),
    linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(96, 165, 250, 1));
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--brand-500);
  --bs-btn-border-color: rgba(255, 255, 255, 0.1);
  --bs-btn-hover-bg: #1d4ed8;
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.18);
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
  border-radius: 999px;
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.25);
}
.btn-ghost {
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

/* Cards */
.card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.card.soft {
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}
.card .card-title {
  color: #fff;
}
.text-secondary {
  color: rgba(229, 231, 235, 0.7) !important;
}
.small.text-secondary {
  color: rgba(229, 231, 235, 0.66) !important;
}

/* Sections */
.section {
  padding: 64px 0;
}
.section-tight {
  padding: 40px 0;
}

.hero {
  padding: 70px 0 28px;
}
.hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(229, 231, 235, 0.8);
  font-size: 0.9rem;
}
.hero h1 {
  letter-spacing: -0.02em;
}
.hero-visual {
  min-height: 340px;
  border-radius: calc(var(--radius) + 6px);
  background: radial-gradient(
      600px 400px at 30% 30%,
      rgba(37, 99, 235, 0.4),
      rgba(0, 0, 0, 0) 70%
    ),
    radial-gradient(
      500px 300px at 70% 40%,
      rgba(245, 158, 11, 0.18),
      rgba(0, 0, 0, 0) 70%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.02)
    );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0) 60%
  );
  transform: rotate(18deg);
}
.kpi {
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 16px;
}
.kpi .value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
}
.kpi .label {
  color: rgba(229, 231, 235, 0.7);
  font-size: 0.9rem;
}

.icon-pill {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
}

.hr-faint {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.footer {
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-link {
  color: rgba(229, 231, 235, 0.72);
  text-decoration: none;
}
.footer-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* Forms */
.form-control,
.form-select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 14px;
}
.form-control:focus,
.form-select:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.18);
  color: #fff;
}
.form-control::placeholder {
  color: rgba(229, 231, 235, 0.45);
}

/* Badges */
.badge-soft {
  background: rgba(37, 99, 235, 0.16);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: rgba(219, 234, 254, 0.95);
  font-weight: 600;
  border-radius: 999px;
}

/* Utilities */
.rounded-2xl {
  border-radius: calc(var(--radius) + 6px) !important;
}
.shadow-hero {
  box-shadow: var(--shadow) !important;
}

/* Sub-hero header */
.page-hero {
  padding: 46px 0 18px;
}
.breadcrumb a {
  color: rgba(229, 231, 235, 0.75);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}

:root {
  /* === Brand colors ===
     NOTE: I couldn't programmatically read your current WordPress theme colors (site blocks automated fetch).
     Keep these variables aligned with your existing EyeShield brand colors.
     Replace values below with your real palette (primary, accent, background).
  */
  --brand-900: #0b1220;
  --brand-850: #0f1930;
  --brand-800: #111b33;
  --brand-700: #1a2a52;
  --brand-500: #2563eb; /* primary */
  --brand-400: #60a5fa;
  --accent-500: #f59e0b; /* accent (CTA highlight) */
  --text-100: #e5e7eb;
  --text-200: #cbd5e1;
  --text-300: #9ca3af;

  --radius: 18px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.2);
}

html,
body {
  height: 100%;
}
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  color: var(--text-100);
}

.bg-app {
  background: radial-gradient(
      1200px 600px at 15% 10%,
      rgba(37, 99, 235, 0.25),
      rgba(0, 0, 0, 0) 60%
    ),
    radial-gradient(
      900px 500px at 85% 10%,
      rgba(245, 158, 11, 0.12),
      rgba(0, 0, 0, 0) 55%
    ),
    linear-gradient(180deg, var(--brand-900), var(--brand-850));
}

.pt-nav {
  padding-top: 86px;
}

/* Navbar */
.glassy {
  backdrop-filter: blur(10px);
  background: rgba(15, 25, 48, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.navbar .nav-link {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #fff;
}
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: radial-gradient(
      circle at 25% 30%,
      rgba(245, 158, 11, 0.95),
      rgba(245, 158, 11, 0) 60%
    ),
    linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(96, 165, 250, 1));
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--brand-500);
  --bs-btn-border-color: rgba(255, 255, 255, 0.1);
  --bs-btn-hover-bg: #1d4ed8;
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.18);
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
  border-radius: 999px;
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.25);
}
.btn-ghost {
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

/* Cards */
.card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.card.soft {
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}
.card .card-title {
  color: #fff;
}
.text-secondary {
  color: rgba(229, 231, 235, 0.7) !important;
}
.small.text-secondary {
  color: rgba(229, 231, 235, 0.66) !important;
}

/* Sections */
.section {
  padding: 64px 0;
}
.section-tight {
  padding: 40px 0;
}

.hero {
  padding: 70px 0 28px;
}
.hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(229, 231, 235, 0.8);
  font-size: 0.9rem;
}
.hero h1 {
  letter-spacing: -0.02em;
}
.hero-visual {
  min-height: 340px;
  border-radius: calc(var(--radius) + 6px);
  background: radial-gradient(
      600px 400px at 30% 30%,
      rgba(37, 99, 235, 0.4),
      rgba(0, 0, 0, 0) 70%
    ),
    radial-gradient(
      500px 300px at 70% 40%,
      rgba(245, 158, 11, 0.18),
      rgba(0, 0, 0, 0) 70%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.02)
    );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0) 60%
  );
  transform: rotate(18deg);
}
.kpi {
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  padding: 16px;
}
.kpi .value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
}
.kpi .label {
  color: rgba(229, 231, 235, 0.7);
  font-size: 0.9rem;
}

.icon-pill {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
}

.hr-faint {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.footer {
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-link {
  color: rgba(229, 231, 235, 0.72);
  text-decoration: none;
}
.footer-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* Forms */
.form-control,
.form-select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 14px;
}
.form-control:focus,
.form-select:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.18);
  color: #fff;
}
.form-control::placeholder {
  color: rgba(229, 231, 235, 0.45);
}

/* Badges */
.badge-soft {
  background: rgba(37, 99, 235, 0.16);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: rgba(219, 234, 254, 0.95);
  font-weight: 600;
  border-radius: 999px;
}

/* Utilities */
.rounded-2xl {
  border-radius: calc(var(--radius) + 6px) !important;
}
.shadow-hero {
  box-shadow: var(--shadow) !important;
}

/* Sub-hero header */
.page-hero {
  padding: 46px 0 18px;
}
.breadcrumb a {
  color: rgba(229, 231, 235, 0.75);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}

/* === Mega menu === */
.dropdown-mega {
  position: static;
}
.mega-menu {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(15, 25, 48, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px;
}
@media (min-width: 992px) {
  .navbar .dropdown-menu.mega-menu {
    left: 50%;
    transform: translateX(-50%);
    top: 72px;
  }
}
.mega-link {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.mega-link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.mega-link .title {
  color: #fff;
  font-weight: 600;
}
.mega-link .desc {
  color: rgba(229, 231, 235, 0.7);
  font-size: 0.9rem;
}
.mega-kicker {
  color: rgba(229, 231, 235, 0.55);
  font-size: 0.85rem;
}

/* === Reveal animations (no external libs) === */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 {
  transition-delay: 0.08s;
}
.reveal.delay-2 {
  transition-delay: 0.16s;
}
.reveal.delay-3 {
  transition-delay: 0.24s;
}

.counter {
  font-variant-numeric: tabular-nums;
}

/* === Stepper === */
.stepper {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.step .n {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.2);
  border: 1px solid rgba(37, 99, 235, 0.35);
  color: rgba(219, 234, 254, 0.95);
  font-weight: 700;
}
.step.is-active {
  background: rgba(37, 99, 235, 0.16);
  border-color: rgba(37, 99, 235, 0.35);
}
.step .t {
  font-size: 0.92rem;
  color: rgba(229, 231, 235, 0.85);
}

/* === Blog filters === */
.filter-pill {
  cursor: pointer;
  user-select: none;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(229, 231, 235, 0.78);
  font-size: 0.9rem;
}
.filter-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.filter-pill.is-active {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.28);
  color: rgba(255, 255, 255, 0.92);
}
.post-card .post-meta {
  color: rgba(229, 231, 235, 0.65);
  font-size: 0.85rem;
}
.post-card .tag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(229, 231, 235, 0.75);
  font-size: 0.8rem;
  margin-right: 0.35rem;
  margin-top: 0.35rem;
  background: rgba(255, 255, 255, 0.03);
}

/* ===== Hero Visual (dashboard-style mock) ===== */
.hero-visual {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  min-height: 320px;

  background: radial-gradient(
      1200px 380px at 30% 10%,
      rgba(37, 99, 235, 0.35),
      transparent 60%
    ),
    radial-gradient(
      900px 380px at 80% 30%,
      rgba(245, 158, 11, 0.18),
      transparent 55%
    ),
    rgba(15, 25, 48, 0.7);

  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
}

.hero-visual-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
  filter: blur(2px) saturate(0.9) contrast(1.05);
  transform: scale(1.05);
}

.hero-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), transparent 55%),
    linear-gradient(0deg, rgba(15, 25, 48, 0.78), rgba(15, 25, 48, 0.4));
  pointer-events: none;
}

/* Glassy cards variants */
.card.soft {
  position: relative;
  background: rgba(17, 27, 51, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

.card.soft .kicker {
  font-size: 0.85rem;
  color: rgba(229, 231, 235, 0.7);
  margin-bottom: 0.25rem;
}

.card.mini {
  background: rgba(17, 27, 51, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.solution-image-wrapper {
  position: relative;
  display: block;
}

.solution-image-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 30%, rgba(11, 18, 32, 0.4) 70%, rgba(11, 18, 32, 0.75) 100%);
  pointer-events: none;
}

.card.mini:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(17, 27, 51, 0.5);
}

/* badge intent for alert severity */
.badge-high {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: rgba(254, 226, 226, 0.95);
}

/* buttons: premium ghost */
.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(229, 231, 235, 0.9);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* icon pill feel */
.icon-pill {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* make "feature cards" across site match the same premium glass style */
.card.feature,
.card.case-card,
.card.pricing-card,
.card.post-card,
.card.stat-card {
  background: rgba(17, 27, 51, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
.card.feature:hover,
.card.case-card:hover,
.card.pricing-card:hover,
.card.post-card:hover,
.card.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
}

/* ===== v4 polish: improve contrast inside dashboard hero widgets ===== */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
}

.card.soft,
.card.mini {
  color: rgba(255, 255, 255, 0.92);
}

.card.soft .text-secondary,
.card.mini .text-secondary {
  color: rgba(229, 231, 235, 0.72) !important;
}

.card.soft .h5,
.card.soft .fw-semibold {
  color: rgba(255, 255, 255, 0.94);
}

.card.soft {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
}

.card.mini {
  border-color: rgba(255, 255, 255, 0.12);
}

.card.mini .fw-semibold {
  color: rgba(255, 255, 255, 0.92);
}

.badge-high {
  background: rgba(244, 63, 94, 0.18);
  border-color: rgba(244, 63, 94, 0.3);
}

/* Make hero badge pill slightly brighter */
.hero-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.hero-visual > * {
  position: relative;
  z-index: 2;
}
.hero-visual .hero-visual-bg,
.hero-visual .hero-visual-overlay {
  z-index: 0;
}

/* ===== Hero visual refinements (v5) ===== */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 2;
}
.hero-visual > * {
  position: relative;
  z-index: 3;
}
.hero-visual-bg,
.hero-visual-overlay {
  z-index: 1 !important;
}
.hero-visual-content {
  max-width: 560px;
}

/* Prevent broken placeholder images from showing alt text area */
img.hero-visual-bg {
  background: transparent;
}

/* ===== Dropdown menus (match mega menu style) ===== */
.dropdown-menu.glass-menu {
  background: rgba(15, 25, 48, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  padding: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-width: 240px;
}
.dropdown-menu.glass-menu .dropdown-item {
  color: rgba(229, 231, 235, 0.88);
  border-radius: 12px;
  padding: 0.55rem 0.75rem;
}
.dropdown-menu.glass-menu .dropdown-item:hover,
.dropdown-menu.glass-menu .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.navbar .dropdown-toggle::after {
  margin-left: 0.4rem;
}

/* Home Intro Image Floating Animation */
@keyframes floating {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(8px, -4px);
  }
  50% {
    transform: translate(12px, -10px);
  }
  75% {
    transform: translate(-4px, -4px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.home-intro-image {
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3);
  animation: floating 12s ease-in-out infinite alternate;
}

/* About Page Hero Visual Background */
.hero-visual.about-bg::before {
  background-image: url('../img/about.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  inset: 0;
  border-radius: calc(var(--radius) + 6px);
  opacity: 0.8;
  border: none;
  box-shadow: none;
}