:root {
  --ink: #251936;
  --muted: #645a78;
  --violet: #6f4fa4;
  --rose: #bb78a7;
  --blue: #5faad7;
  --paper: #eee4ec;
  --soft: #dfd3e6;
  --line: rgba(67, 47, 103, 0.2);
  --white: #fff9ff;
  --glow: rgba(173, 224, 255, 0.45);
}

.page {
  background:
    radial-gradient(circle at 8% 6%, rgba(255, 217, 227, 0.82), transparent 24rem),
    radial-gradient(circle at 70% 48%, rgba(99, 193, 219, 0.22), transparent 32rem),
    linear-gradient(180deg, #eadfe8 0%, #dee3ef 42%, #efe5eb 70%, #b2c7e2 100%);
}

.site-header.is-scrolled,
.site-header.is-open {
  background: rgba(255, 245, 255, 0.72);
  box-shadow: 0 18px 42px rgba(80, 55, 125, 0.1);
}

.main-nav a:hover,
.main-nav a.active,
.burger-menu a:hover,
.burger-menu a.active {
  color: var(--violet);
}

.menu-toggle {
  color: var(--ink);
}

.menu-toggle span {
  background: var(--ink);
}

.menu-toggle.is-active {
  border-color: rgba(111, 79, 164, 0.38);
  background: rgba(255, 249, 255, 0.72);
  box-shadow:
    0 16px 38px rgba(80, 55, 125, 0.14),
    0 0 30px rgba(173, 224, 255, 0.18);
}

.burger-menu {
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 32px;
  background:
    radial-gradient(circle at 84% 8%, rgba(255, 255, 255, 0.72), transparent 9rem),
    radial-gradient(circle at 8% 18%, rgba(210, 170, 255, 0.34), transparent 12rem),
    radial-gradient(circle at 92% 88%, rgba(120, 220, 255, 0.26), transparent 13rem),
    linear-gradient(135deg, rgba(255, 252, 255, 0.9), rgba(246, 236, 255, 0.68));
  box-shadow:
    0 34px 90px rgba(65, 35, 105, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.hero-space {
  filter:
    brightness(1.08)
    contrast(1.04)
    saturate(1.04);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 58% 50%, rgba(145, 230, 255, 0.12), transparent 24%),
    radial-gradient(circle at 82% 28%, rgba(255, 120, 230, 0.09), transparent 35%);
  mix-blend-mode: screen;
}

.work {
  background:
    radial-gradient(circle at 72% 30%, rgba(255, 255, 255, 0.22), transparent 20rem),
    linear-gradient(90deg, #8d83c4 0%, #a7c7da 100%);
}

.project-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 35%);
  pointer-events: none;
  z-index: 1;
}

.about-panel {
  background:
    radial-gradient(circle at 48% 92%, rgba(170, 220, 255, 0.22), transparent 22rem),
    radial-gradient(circle at 90% 92%, rgba(120, 200, 255, 0.2), transparent 21rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.32)),
    #efe6ed;
}

.code-tag {
  text-shadow: 0 0 12px rgba(111, 79, 164, 0.15);
}

.skill-row i::before {
  background: linear-gradient(90deg, var(--violet), var(--rose), var(--blue));
  box-shadow: 0 0 12px rgba(111, 79, 164, 0.45);
}

.hero-button,
.pill-link {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 12px 35px rgba(80, 55, 125, 0.1);
}

.hero-button:hover,
.pill-link:hover {
  box-shadow:
    0 18px 45px rgba(80, 55, 125, 0.2),
    0 0 35px rgba(173, 224, 255, 0.14);
}

.slider-controls button {
  box-shadow:
    0 12px 35px rgba(80, 55, 125, 0.22),
    0 0 30px rgba(173, 224, 255, 0.12);
}

.journal-inner {
  background:
    radial-gradient(circle at 90% 90%, rgba(170, 220, 255, 0.12), transparent 12rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1));
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 20% 30%, rgba(180, 220, 255, 0.1), transparent 24rem),
    radial-gradient(circle at 80% 70%, rgba(255, 170, 240, 0.08), transparent 28rem);
  pointer-events: none;
}

.footer-cta h2 em {
  color: var(--rose);
}

.social-links a {
  transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
  color: #ffffff;
  opacity: 1;
}

/* MOBILE MENU THEME SWITCHER */

.mobile-vibe-block {
  display: none;
}

.desktop-vibe-switcher {
  display: flex;
}

.mobile-vibe-switcher {
  width: 100%;
  justify-content: center;
  padding: 7px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.46),
      rgba(214, 196, 255, 0.22),
      rgba(178, 225, 255, 0.2)
    );
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 18px 44px rgba(80, 55, 125, 0.14),
    0 0 34px rgba(173, 224, 255, 0.16);
}

.mobile-vibe-block p {
  margin: 0 0 12px;
  color: rgba(37, 25, 63, 0.62);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.mobile-vibe-block .vibe-btn {
  flex: 1;
  min-width: 0;
  height: 36px;
  border-color: rgba(255, 255, 255, 0.46);
}

@media (max-width: 1180px) {
  .desktop-vibe-switcher {
    display: none;
  }

  .mobile-vibe-block {
    display: grid;
    gap: 0;
    margin-top: 22px;
    padding: 20px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.7), transparent 36%),
      radial-gradient(circle at 88% 18%, rgba(173, 224, 255, 0.24), transparent 42%),
      radial-gradient(circle at 50% 100%, rgba(229, 169, 255, 0.18), transparent 45%),
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.52),
        rgba(255, 255, 255, 0.2)
      );
    border: 1px solid rgba(255, 255, 255, 0.56);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.38),
      0 20px 54px rgba(80, 55, 125, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}

@media (max-width: 760px) {
  .page {
    background:
      radial-gradient(circle at 20% 10%, rgba(255, 220, 235, 0.72), transparent 16rem),
      linear-gradient(180deg, #eadfe8 0%, #dfe5f0 52%, #b8cae3 100%);
  }

  .hero::after {
    opacity: 0.8;
  }
}