:root {
  --font-display: "SF Pro Display", "SF Pro Text", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --radius-sm: 0.85rem;
  --radius-md: 1.2rem;
  --radius-lg: 1.65rem;
  --radius-pill: 999px;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.display-1,
.display-2,
.title-uppercase {
  font-family: var(--font-display) !important;
}

.signature {
  font-family: "Silver South Script", "Agustina", cursive !important;
}

html.theme-light {
  --bg: #eef3ff;
  --bg-elevated: #f9fbff;
  --bg-muted: #e7edfb;
  --text: #14213d;
  --text-muted: #43506f;
  --text-soft: #5f6f95;
  --line: rgba(68, 95, 146, 0.2);
  --line-strong: rgba(54, 85, 140, 0.3);
  --accent: #0a84ff;
  --accent-strong: #0070eb;
  --accent-soft: rgba(10, 132, 255, 0.22);
  --accent-secondary: #30c7ff;
  --accent-tertiary: #2ecf8f;
  --focus-ring: rgba(10, 132, 255, 0.3);
  --menu-bg: rgba(241, 246, 255, 0.22);
  --menu-line: rgba(66, 93, 146, 0.24);
  --glass-bg: rgba(248, 251, 255, 0.14);
  --card-bg: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.2),
    rgba(246, 250, 255, 0.03)
  );
  --card-bg-hover: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.3),
    rgba(243, 248, 255, 0.08)
  );
  --track: rgba(72, 107, 167, 0.18);
  --input-bg: rgba(255, 255, 255, 0.34);
  --input-line: rgba(77, 106, 161, 0.28);
}

html.theme-dark {
  --bg: #0b1222;
  --bg-elevated: #101a30;
  --bg-muted: #15203b;
  --text: #edf3ff;
  --text-muted: #d7e4ff;
  --text-soft: #b0c5ee;
  --line: rgba(183, 209, 255, 0.2);
  --line-strong: rgba(198, 220, 255, 0.34);
  --accent: #4ea7ff;
  --accent-strong: #77bcff;
  --accent-soft: rgba(78, 167, 255, 0.28);
  --accent-secondary: #57d2ff;
  --accent-tertiary: #4be1a8;
  --focus-ring: rgba(110, 187, 255, 0.34);
  --menu-bg: rgba(12, 20, 38, 0.76);
  --menu-line: rgba(178, 204, 255, 0.3);
  --glass-bg: rgba(17, 27, 48, 0.62);
  --card-bg: linear-gradient(
    165deg,
    rgba(23, 36, 64, 0.84),
    rgba(14, 23, 42, 0.74)
  );
  --card-bg-hover: linear-gradient(
    165deg,
    rgba(29, 44, 76, 0.92),
    rgba(16, 26, 47, 0.84)
  );
  --track: rgba(178, 205, 255, 0.2);
  --input-bg: rgba(18, 29, 52, 0.76);
  --input-line: rgba(178, 205, 255, 0.32);
}

html.theme-dark .text-secondary,
html.theme-dark .text-muted {
  color: #dce8ff !important;
}

html.theme-dark .text-primary {
  color: #7dc6ff !important;
}

body {
  background: radial-gradient(
      circle at 10% 6%,
      rgba(125, 176, 255, 0.2),
      transparent 38%
    ),
    radial-gradient(circle at 88% 8%, rgba(81, 228, 232, 0.16), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%),
    var(--bg);
}

body::before {
  opacity: 0.68;
  filter: blur(6px);
}

body::after {
  opacity: 0.62;
  filter: blur(12px);
}

.section-bg {
  background: radial-gradient(
      130% 130% at 50% -18%,
      rgba(255, 255, 255, 0.24),
      transparent 48%
    ),
    linear-gradient(
      190deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.02) 52%,
      transparent 100%
    ),
    var(--bg);
}

.navbar {
  border-radius: 1.32rem;
  border-color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.52),
      rgba(255, 255, 255, 0.12)
    ),
    linear-gradient(190deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.03)),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(26px) saturate(182%);
  backdrop-filter: blur(26px) saturate(182%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(255, 255, 255, 0.16), 0 16px 40px rgba(7, 13, 27, 0.22),
    0 4px 14px rgba(9, 18, 34, 0.15);
}

.navbar > * {
  text-shadow: 0 1px 0 rgba(5, 10, 24, 0.42);
}

.navbar::before {
  opacity: 0.68;
}

.navbar:hover,
.navbar.liquid-active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.24), 0 24px 48px rgba(7, 13, 27, 0.28),
    0 8px 18px rgba(9, 18, 34, 0.2);
}

.brand img,
.brand .brand-img {
  border-radius: 0.9rem;
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.46);
  box-shadow: 0 6px 18px rgba(9, 16, 35, 0.2);
}

html.theme-dark .brand-name,
html.theme-dark .brand-text,
html.theme-dark .page-head-foot,
html.theme-dark .contacts .contact-item,
html.theme-dark .contacts .contact-item a {
  color: #f3f7ff !important;
}

html.theme-light .brand-name,
html.theme-light .brand-text,
html.theme-light .page-head-foot,
html.theme-light .contacts .contact-item,
html.theme-light .contacts .contact-item a {
  color: #1a2c4d !important;
}

html.theme-dark .page-head-foot-bg,
html.theme-dark .navbar-toggle .icon-bar {
  background-color: #f3f7ff !important;
}

html.theme-light .page-head-foot-bg,
html.theme-light .navbar-toggle .icon-bar {
  background-color: #1a2c4d !important;
}

html.theme-light .navbar .brand-name,
html.theme-light .navbar .brand-text,
html.theme-light .contacts .contact-item,
html.theme-light .contacts .contact-item a,
html.theme-light .menu-list a,
html.theme-light .copy-bottom,
html.theme-light .social-list-bottom a {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.46), 0 0 10px rgba(192, 220, 255, 0.2);
}

html.theme-dark .navbar .brand-name,
html.theme-dark .navbar .brand-text,
html.theme-dark .contacts .contact-item,
html.theme-dark .contacts .contact-item a,
html.theme-dark .menu-list a,
html.theme-dark .copy-bottom,
html.theme-dark .social-list-bottom a {
  text-shadow: 0 1px 0 rgba(3, 7, 16, 0.56), 0 0 12px rgba(116, 178, 255, 0.22);
}

.contacts .contact-item {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.52);
  position: relative;
  overflow: hidden;
}

.contacts .contact-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.42),
    rgba(255, 255, 255, 0.08) 54%,
    transparent
  );
  opacity: 0.82;
}

html.theme-dark .contacts .contact-item {
  background: rgba(26, 42, 76, 0.54);
  border-color: rgba(183, 210, 255, 0.62);
}

html.theme-dark .contacts .contact-item::after {
  background: linear-gradient(
    158deg,
    rgba(184, 212, 255, 0.35),
    rgba(160, 194, 255, 0.12) 50%,
    rgba(34, 58, 104, 0.08)
  );
}

.switch {
  width: 3.2rem;
  height: 1.95rem;
}

.slider {
  background: rgba(80, 103, 151, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(152%);
  backdrop-filter: blur(14px) saturate(152%);
}

.slider:before {
  width: 1.48rem;
  height: 1.48rem;
  left: 0.2rem;
  background: linear-gradient(180deg, #ffffff, #edf4ff);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  background-image: none;
}

.switch input:checked + .slider {
  background: linear-gradient(120deg, #0a84ff, #57d2ff);
  border-color: rgba(255, 255, 255, 0.62);
}

.switch input:checked + .slider:before {
  transform: translateX(1.22rem);
  background-image: none;
}

.menu {
  border-left-color: rgba(255, 255, 255, 0.64);
  border-top-color: rgba(255, 255, 255, 0.58);
  border-bottom-color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(
      170deg,
      rgba(255, 255, 255, 0.42),
      rgba(255, 255, 255, 0.12) 56%,
      rgba(255, 255, 255, 0.06)
    ),
    var(--menu-bg);
  -webkit-backdrop-filter: blur(26px) saturate(178%);
  backdrop-filter: blur(26px) saturate(178%);
}

.menu-list a {
  border-radius: 0.9rem;
}

.menu-list li.active > a,
.menu-list li a:hover {
  background: rgba(255, 255, 255, 0.28);
}

html.theme-dark .menu-list a {
  color: #eaf2ff;
}

html.theme-dark .menu-list li.active > a,
html.theme-dark .menu-list li a:hover {
  color: #ffffff;
  background: rgba(144, 182, 255, 0.24);
}

.menu-footer .social-list a {
  border-radius: 0.86rem;
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.hero-scroll-cue::after {
  border-color: rgba(120, 154, 223, 0.5);
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.main-image {
  border-radius: 2.7rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.26),
    rgba(255, 255, 255, 0.08)
  );
  padding: 0.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 24px 52px rgba(6, 12, 26, 0.32);
  animation: ios-photo-float 10s ease-in-out infinite;
}

@keyframes ios-photo-float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-7px);
  }
}

.btn,
.resume-but,
#form-button {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  background: linear-gradient(120deg, #0a84ff, #34a8ff 48%, #57d2ff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 14px 28px rgba(12, 33, 75, 0.3);
}

.btn.btn-ghost {
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
}

.btn.btn-ghost:hover,
.btn.btn-ghost:focus {
  background: rgba(255, 255, 255, 0.56) !important;
}

.experience-box,
.col-resume,
.resume-row,
.partner-inner,
.contact-info,
.project-box {
  border: 1px solid rgba(255, 255, 255, 0.56);
  background: linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.46),
      rgba(255, 255, 255, 0.18)
    ),
    var(--card-bg) !important;
  -webkit-backdrop-filter: blur(16px) saturate(162%);
  backdrop-filter: blur(16px) saturate(162%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 16px 36px rgba(8, 14, 29, 0.2);
  position: relative;
  overflow: hidden;
}

.experience-box::before,
.col-resume::before,
.resume-row::before,
.partner-inner::before,
.contact-info::before,
.project-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.38),
    rgba(255, 255, 255, 0.1) 42%,
    transparent 72%
  );
  z-index: 0;
}

.experience-box > *,
.col-resume > *,
.resume-row > *,
.partner-inner > *,
.contact-info > *,
.project-box > * {
  position: relative;
  z-index: 1;
}

.experience-box,
.col-resume,
.partner-inner,
.contact-info {
  border-radius: 1.45rem;
}

.resume-row,
.project-box {
  border-radius: 1.15rem;
}

.resume-row:hover,
.partner-inner:hover,
.project-box:hover,
.project-box:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(129, 184, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 22px 40px rgba(8, 14, 29, 0.28);
}

html.theme-dark .experience-box,
html.theme-dark .col-resume,
html.theme-dark .resume-row,
html.theme-dark .partner-inner,
html.theme-dark .contact-info,
html.theme-dark .project-box {
  border-color: rgba(182, 209, 255, 0.54);
}

html.theme-dark .experience-box::before,
html.theme-dark .col-resume::before,
html.theme-dark .resume-row::before,
html.theme-dark .partner-inner::before,
html.theme-dark .contact-info::before,
html.theme-dark .project-box::before {
  background: linear-gradient(
    160deg,
    rgba(197, 219, 255, 0.32),
    rgba(154, 188, 255, 0.1) 44%,
    rgba(70, 110, 179, 0.05) 74%
  );
}

html.theme-dark .resume-type,
html.theme-dark .resume-study,
html.theme-dark .resume-text,
html.theme-dark .resume-date,
html.theme-dark .contact-address h5,
html.theme-dark .contact-address a,
html.theme-dark .partner-inner p,
html.theme-dark .project-box h5,
html.theme-dark .project-category {
  color: #eef4ff !important;
}

html.theme-dark .partner-inner img {
  filter: brightness(1.2) contrast(1.14) saturate(1.12);
}

.section-5 .bg-changer::after {
  background: linear-gradient(
      160deg,
      rgba(10, 18, 33, 0.64),
      rgba(11, 21, 40, 0.44) 42%,
      rgba(9, 18, 36, 0.66)
    ),
    radial-gradient(circle at 10% 10%, rgba(74, 168, 255, 0.24), transparent 45%);
}

.section-5 .project-box {
  color: #edf5ff;
}

.section-5 .project-category {
  color: rgba(232, 242, 255, 0.9) !important;
}

.progress {
  background: rgba(86, 120, 182, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.36);
}

.progress-bar {
  background: linear-gradient(92deg, #0a84ff, #31c9ff);
  box-shadow: 0 0 18px rgba(10, 132, 255, 0.36);
}

.copy-bottom {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 0.24rem 0.74rem;
  background: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  position: relative;
  overflow: hidden;
}

.social-list-bottom {
  padding: 0.26rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  position: relative;
  overflow: hidden;
}

.social-list-bottom a {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.5);
}

.copy-bottom::before,
.social-list-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(176, 230, 255, 0.42) 18%,
      rgba(255, 255, 255, 0.14) 34%,
      rgba(255, 195, 226, 0.32) 52%,
      rgba(255, 255, 255, 0.14) 72%,
      rgba(199, 237, 255, 0.74) 100%
    ),
    radial-gradient(
      120% 160% at 50% -24%,
      rgba(255, 255, 255, 0.38),
      transparent 66%
    );
  opacity: 0.8;
}

.copy-bottom > *,
.social-list-bottom > * {
  position: relative;
  z-index: 1;
}

html.theme-light .navbar {
  border-color: rgba(255, 255, 255, 0.56);
  background: radial-gradient(
      130% 160% at 10% -6%,
      rgba(255, 255, 255, 0.24),
      rgba(255, 255, 255, 0.012) 52%,
      transparent 76%
    ),
    radial-gradient(
      148% 180% at 92% 106%,
      rgba(126, 194, 255, 0.12),
      rgba(255, 255, 255, 0.01) 58%,
      transparent 78%
    ),
    linear-gradient(
      152deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.006)
    ),
    rgba(236, 246, 255, 0.025);
  background-blend-mode: screen, screen, normal, normal;
  -webkit-backdrop-filter: blur(10px) saturate(188%) brightness(1.07)
    contrast(1.03);
  backdrop-filter: blur(10px) saturate(188%) brightness(1.07) contrast(1.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    0 10px 22px rgba(18, 35, 72, 0.12), 0 2px 8px rgba(12, 25, 54, 0.08);
}

html.theme-light .navbar::before {
  opacity: 0.42;
  mix-blend-mode: screen;
  background: radial-gradient(
      124% 145% at 50% -26%,
      rgba(255, 255, 255, 0.54),
      rgba(255, 255, 255, 0.05) 52%,
      transparent 74%
    ),
    radial-gradient(
      136% 188% at 84% 124%,
      rgba(130, 202, 255, 0.17),
      rgba(255, 255, 255, 0.02) 58%,
      transparent 78%
    ),
    radial-gradient(
      90% 150% at 10% 90%,
      rgba(186, 233, 255, 0.12),
      transparent 74%
    );
}

html.theme-light .navbar::after {
  opacity: 0.95;
  background: linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(170, 229, 255, 0.58) 16%,
      rgba(255, 255, 255, 0.16) 34%,
      rgba(255, 194, 226, 0.44) 52%,
      rgba(255, 255, 255, 0.15) 72%,
      rgba(190, 236, 255, 0.74) 100%
    ),
    radial-gradient(
      128% 180% at 4% -28%,
      rgba(255, 255, 255, 0.38),
      transparent 62%
    ),
    radial-gradient(
      115% 170% at 100% 112%,
      rgba(162, 219, 255, 0.22),
      transparent 64%
    );
}

html.theme-light .navbar:hover,
html.theme-light .navbar.liquid-active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(255, 255, 255, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.36),
    0 18px 34px rgba(18, 35, 72, 0.18), 0 5px 14px rgba(12, 25, 54, 0.12);
}

html.theme-light .contacts .contact-item {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(11px) saturate(180%) brightness(1.06);
  backdrop-filter: blur(11px) saturate(180%) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22);
}

html.theme-light .contacts .contact-item::after {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.32),
    rgba(255, 255, 255, 0.025) 56%,
    transparent
  ),
  radial-gradient(
    120% 150% at 100% 100%,
    rgba(149, 210, 255, 0.2),
    transparent 70%
  );
  opacity: 0.62;
}

html.theme-light .slider {
  background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.04) 64%
    ),
    rgba(227, 241, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(11px) saturate(180%) brightness(1.06);
  backdrop-filter: blur(11px) saturate(180%) brightness(1.06);
}

html.theme-light .switch input:checked + .slider {
  background: linear-gradient(
      140deg,
      rgba(106, 190, 255, 0.62),
      rgba(117, 225, 255, 0.34)
    ),
    rgba(230, 247, 255, 0.08);
}

html.theme-light .navbar-toggle {
  border-color: rgba(255, 255, 255, 0.72);
  background: linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.04) 62%
    ),
    rgba(236, 245, 255, 0.1);
  -webkit-backdrop-filter: blur(11px) saturate(175%) brightness(1.06);
  backdrop-filter: blur(11px) saturate(175%) brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22), 0 8px 18px rgba(15, 29, 60, 0.16);
}

html.theme-light .menu {
  border-radius: 1.32rem 0 0 1.32rem;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-right-color: rgba(255, 255, 255, 0.56);
  background: radial-gradient(
      130% 160% at 10% -6%,
      rgba(255, 255, 255, 0.24),
      rgba(255, 255, 255, 0.012) 52%,
      transparent 76%
    ),
    radial-gradient(
      148% 180% at 92% 106%,
      rgba(126, 194, 255, 0.12),
      rgba(255, 255, 255, 0.01) 58%,
      transparent 78%
    ),
    linear-gradient(
      152deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.006)
    ),
    rgba(236, 246, 255, 0.025);
  background-blend-mode: screen, screen, normal, normal;
  -webkit-backdrop-filter: blur(10px) saturate(188%) brightness(1.07)
    contrast(1.03);
  backdrop-filter: blur(10px) saturate(188%) brightness(1.07) contrast(1.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    -12px 0 24px rgba(18, 35, 72, 0.12), -2px 0 8px rgba(12, 25, 54, 0.08);
}

html.theme-light .menu::before {
  opacity: 0.42;
  mix-blend-mode: screen;
  background: radial-gradient(
      124% 145% at 50% -26%,
      rgba(255, 255, 255, 0.54),
      rgba(255, 255, 255, 0.05) 52%,
      transparent 74%
    ),
    radial-gradient(
      136% 188% at 84% 124%,
      rgba(130, 202, 255, 0.17),
      rgba(255, 255, 255, 0.02) 58%,
      transparent 78%
    ),
    radial-gradient(
      90% 150% at 10% 90%,
      rgba(186, 233, 255, 0.12),
      transparent 74%
    );
}

html.theme-light .menu::after {
  opacity: 0.95;
  background: linear-gradient(
      108deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(170, 229, 255, 0.58) 16%,
      rgba(255, 255, 255, 0.16) 34%,
      rgba(255, 194, 226, 0.44) 52%,
      rgba(255, 255, 255, 0.15) 72%,
      rgba(190, 236, 255, 0.74) 100%
    ),
    radial-gradient(
      128% 180% at 4% -28%,
      rgba(255, 255, 255, 0.38),
      transparent 62%
    ),
    radial-gradient(
      115% 170% at 100% 112%,
      rgba(162, 219, 255, 0.22),
      transparent 64%
    );
}

html.theme-light .menu-list li.active > a,
html.theme-light .menu-list li a:hover {
  color: #12284a !important;
  background: rgba(255, 255, 255, 0.14);
}

html.theme-light .menu-footer .social-list a {
  color: #1a2c4d !important;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.56);
}

html.theme-light .experience-box,
html.theme-light .col-resume,
html.theme-light .resume-row,
html.theme-light .partner-inner,
html.theme-light .contact-info,
html.theme-light .project-box {
  border-color: rgba(255, 255, 255, 0.52);
  background: linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.15),
      rgba(255, 255, 255, 0.02)
    ),
    var(--card-bg) !important;
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  backdrop-filter: blur(22px) saturate(175%);
}

html.theme-light .experience-box::before,
html.theme-light .col-resume::before,
html.theme-light .resume-row::before,
html.theme-light .partner-inner::before,
html.theme-light .contact-info::before,
html.theme-light .project-box::before {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.015) 44%,
    transparent 74%
  );
}

html.theme-light .copy-bottom {
  color: #1a2c4d !important;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.54);
}

html.theme-light .social-list-bottom {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

html.theme-light .social-list-bottom a {
  color: #1a2c4d !important;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.54);
}

html.theme-dark .navbar {
  border-color: rgba(182, 208, 255, 0.48);
  background: radial-gradient(
      132% 162% at 10% -8%,
      rgba(215, 231, 255, 0.18),
      rgba(205, 223, 255, 0.015) 50%,
      transparent 78%
    ),
    radial-gradient(
      150% 184% at 92% 108%,
      rgba(120, 182, 255, 0.18),
      rgba(163, 211, 255, 0.012) 58%,
      transparent 80%
    ),
    linear-gradient(
      152deg,
      rgba(142, 178, 255, 0.12),
      rgba(142, 178, 255, 0.01)
    ),
    rgba(13, 21, 40, 0.28);
  background-blend-mode: screen, screen, normal, normal;
  -webkit-backdrop-filter: blur(12px) saturate(190%) brightness(1.04)
    contrast(1.04);
  backdrop-filter: blur(12px) saturate(190%) brightness(1.04) contrast(1.04);
  box-shadow: inset 0 1px 0 rgba(220, 234, 255, 0.48),
    inset 0 -1px 0 rgba(182, 208, 255, 0.14), inset 0 0 0 1px rgba(177, 206, 255, 0.2),
    0 14px 28px rgba(3, 7, 16, 0.34), 0 3px 10px rgba(3, 7, 16, 0.22);
}

html.theme-dark .navbar::before {
  opacity: 0.48;
  mix-blend-mode: screen;
  background: radial-gradient(
      126% 146% at 50% -26%,
      rgba(223, 237, 255, 0.46),
      rgba(203, 223, 255, 0.04) 52%,
      transparent 74%
    ),
    radial-gradient(
      138% 188% at 84% 124%,
      rgba(132, 194, 255, 0.24),
      rgba(128, 186, 255, 0.02) 58%,
      transparent 80%
    ),
    radial-gradient(
      90% 150% at 10% 90%,
      rgba(174, 217, 255, 0.12),
      transparent 74%
    );
}

html.theme-dark .navbar::after {
  opacity: 0.9;
  background: linear-gradient(
      108deg,
      rgba(220, 236, 255, 0.94) 0%,
      rgba(145, 204, 255, 0.52) 18%,
      rgba(208, 228, 255, 0.14) 34%,
      rgba(188, 160, 255, 0.34) 52%,
      rgba(197, 219, 255, 0.12) 72%,
      rgba(163, 214, 255, 0.66) 100%
    ),
    radial-gradient(
      128% 180% at 4% -28%,
      rgba(217, 235, 255, 0.32),
      transparent 62%
    ),
    radial-gradient(
      115% 170% at 100% 112%,
      rgba(138, 201, 255, 0.2),
      transparent 64%
    );
}

html.theme-dark .contacts .contact-item {
  background: rgba(19, 32, 58, 0.26);
  border-color: rgba(178, 205, 255, 0.56);
  -webkit-backdrop-filter: blur(11px) saturate(180%) brightness(1.04);
  backdrop-filter: blur(11px) saturate(180%) brightness(1.04);
}

html.theme-dark .contacts .contact-item::after {
  background: linear-gradient(
      160deg,
      rgba(210, 228, 255, 0.28),
      rgba(185, 210, 255, 0.018) 56%,
      transparent
    ),
    radial-gradient(
      120% 150% at 100% 100%,
      rgba(123, 190, 255, 0.18),
      transparent 70%
    );
  opacity: 0.62;
}

html.theme-dark .menu {
  border-radius: 1.32rem 0 0 1.32rem;
  border: 1px solid rgba(182, 208, 255, 0.48);
  border-right-color: rgba(182, 208, 255, 0.48);
  background: radial-gradient(
      132% 162% at 10% -8%,
      rgba(215, 231, 255, 0.18),
      rgba(205, 223, 255, 0.015) 50%,
      transparent 78%
    ),
    radial-gradient(
      150% 184% at 92% 108%,
      rgba(120, 182, 255, 0.18),
      rgba(163, 211, 255, 0.012) 58%,
      transparent 80%
    ),
    linear-gradient(
      152deg,
      rgba(142, 178, 255, 0.12),
      rgba(142, 178, 255, 0.01)
    ),
    rgba(13, 21, 40, 0.28);
  background-blend-mode: screen, screen, normal, normal;
  -webkit-backdrop-filter: blur(12px) saturate(190%) brightness(1.04)
    contrast(1.04);
  backdrop-filter: blur(12px) saturate(190%) brightness(1.04) contrast(1.04);
  box-shadow: inset 0 1px 0 rgba(220, 234, 255, 0.48),
    inset 0 -1px 0 rgba(182, 208, 255, 0.14), inset 0 0 0 1px rgba(177, 206, 255, 0.2),
    -14px 0 28px rgba(3, 7, 16, 0.34), -3px 0 10px rgba(3, 7, 16, 0.22);
}

html.theme-dark .menu::before {
  opacity: 0.48;
  mix-blend-mode: screen;
  background: radial-gradient(
      126% 146% at 50% -26%,
      rgba(223, 237, 255, 0.46),
      rgba(203, 223, 255, 0.04) 52%,
      transparent 74%
    ),
    radial-gradient(
      138% 188% at 84% 124%,
      rgba(132, 194, 255, 0.24),
      rgba(128, 186, 255, 0.02) 58%,
      transparent 80%
    ),
    radial-gradient(
      90% 150% at 10% 90%,
      rgba(174, 217, 255, 0.12),
      transparent 74%
    );
}

html.theme-dark .menu::after {
  opacity: 0.9;
  background: linear-gradient(
      108deg,
      rgba(220, 236, 255, 0.94) 0%,
      rgba(145, 204, 255, 0.52) 18%,
      rgba(208, 228, 255, 0.14) 34%,
      rgba(188, 160, 255, 0.34) 52%,
      rgba(197, 219, 255, 0.12) 72%,
      rgba(163, 214, 255, 0.66) 100%
    ),
    radial-gradient(
      128% 180% at 4% -28%,
      rgba(217, 235, 255, 0.32),
      transparent 62%
    ),
    radial-gradient(
      115% 170% at 100% 112%,
      rgba(138, 201, 255, 0.2),
      transparent 64%
    );
}

html.theme-dark .menu-list a,
html.theme-dark .menu-footer .social-list a,
html.theme-dark .copy-bottom,
html.theme-dark .social-list-bottom a {
  color: #f4f8ff !important;
}

html.theme-dark .menu-list li.active > a,
html.theme-dark .menu-list li a:hover {
  color: #ffffff !important;
  background: rgba(138, 184, 255, 0.18);
}

html.theme-dark .menu-footer .social-list a {
  background: rgba(30, 48, 84, 0.34);
  border-color: rgba(177, 205, 255, 0.52);
}

html.theme-dark .slider {
  background: linear-gradient(
      145deg,
      rgba(204, 224, 255, 0.2),
      rgba(167, 200, 255, 0.02) 64%
    ),
    rgba(22, 38, 66, 0.3);
  border-color: rgba(181, 209, 255, 0.62);
}

html.theme-dark .navbar-toggle {
  border-color: rgba(181, 209, 255, 0.62);
  background: linear-gradient(
      165deg,
      rgba(212, 230, 255, 0.22),
      rgba(171, 201, 255, 0.03) 62%
    ),
    rgba(18, 31, 56, 0.32);
}

html.theme-light .section-5 .project-box {
  border-color: rgba(255, 255, 255, 0.56);
  background: linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.52),
      rgba(241, 248, 255, 0.32)
    ),
    rgba(225, 238, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(10px) saturate(172%) brightness(1.06);
  backdrop-filter: blur(10px) saturate(172%) brightness(1.06);
}

html.theme-light .section-5 .project-box h5 {
  color: #12284a !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 8px rgba(191, 223, 255, 0.24);
}

html.theme-light .section-5 .project-category {
  color: rgba(20, 41, 76, 0.88) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 7px rgba(191, 223, 255, 0.22);
}

@media (min-width: 992px) {
  .menu {
    top: 0.72rem !important;
    bottom: 0.72rem !important;
    right: 0.72rem !important;
    height: auto;
    border-radius: 1.65rem !important;
  }

  html.theme-light .menu {
    border-color: rgba(255, 255, 255, 0.58);
  }

  html.theme-dark .menu {
    border-color: rgba(180, 207, 255, 0.54);
  }
}

html.liquid-lite .navbar::before,
html.liquid-lite .navbar::after,
html.liquid-lite .menu::before,
html.liquid-lite .menu::after {
  animation: none !important;
}

html.liquid-lite .navbar,
html.liquid-lite .menu,
html.liquid-lite .contacts .contact-item,
html.liquid-lite .menu-footer .social-list a,
html.liquid-lite .slider,
html.liquid-lite .navbar-toggle {
  -webkit-backdrop-filter: blur(9px) saturate(155%) !important;
  backdrop-filter: blur(9px) saturate(155%) !important;
}

html.theme-light.liquid-lite .experience-box,
html.theme-light.liquid-lite .col-resume,
html.theme-light.liquid-lite .resume-row,
html.theme-light.liquid-lite .partner-inner,
html.theme-light.liquid-lite .contact-info,
html.theme-light.liquid-lite .project-box {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.9),
      rgba(247, 251, 255, 0.84)
    )
    !important;
}

html.theme-dark.liquid-lite .experience-box,
html.theme-dark.liquid-lite .col-resume,
html.theme-dark.liquid-lite .resume-row,
html.theme-dark.liquid-lite .partner-inner,
html.theme-dark.liquid-lite .contact-info,
html.theme-dark.liquid-lite .project-box {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: linear-gradient(
      160deg,
      rgba(24, 38, 66, 0.94),
      rgba(17, 28, 50, 0.94)
    )
    !important;
}

html.liquid-lite .main-image {
  animation: none !important;
}

html.theme-dark .copy-bottom {
  color: #dbe9ff !important;
  border-color: rgba(181, 208, 255, 0.64);
  background: rgba(26, 42, 76, 0.28);
  -webkit-backdrop-filter: blur(11px) saturate(188%) brightness(1.04);
  backdrop-filter: blur(11px) saturate(188%) brightness(1.04);
}

html.theme-dark .social-list-bottom {
  border-color: rgba(179, 208, 255, 0.64);
  background: rgba(18, 31, 58, 0.24);
  -webkit-backdrop-filter: blur(11px) saturate(188%) brightness(1.04);
  backdrop-filter: blur(11px) saturate(188%) brightness(1.04);
}

html.theme-dark .social-list-bottom a {
  color: #eef4ff !important;
  border-color: rgba(177, 205, 255, 0.62);
  background: rgba(34, 56, 98, 0.26);
}

html.theme-dark .copy-bottom::before,
html.theme-dark .social-list-bottom::before {
  background: linear-gradient(
      110deg,
      rgba(218, 235, 255, 0.9) 0%,
      rgba(148, 206, 255, 0.44) 18%,
      rgba(204, 226, 255, 0.1) 34%,
      rgba(184, 156, 255, 0.3) 52%,
      rgba(198, 220, 255, 0.1) 72%,
      rgba(160, 212, 255, 0.62) 100%
    ),
    radial-gradient(
      120% 160% at 50% -24%,
      rgba(214, 233, 255, 0.28),
      transparent 66%
    );
  opacity: 0.7;
}

#pp-nav span,
.pp-slidesNav span {
  border-radius: 999px;
  background: rgba(112, 150, 224, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.52);
}

#pp-nav li .active span,
#pp-nav span:hover {
  background: linear-gradient(180deg, #0a84ff, #32ceff);
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.16);
}

input[type="text"],
input[type="email"],
textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-line) !important;
  border-radius: 0.94rem !important;
  -webkit-backdrop-filter: blur(10px) saturate(145%);
  backdrop-filter: blur(10px) saturate(145%);
}

@media (max-width: 991px) {
  .navbar {
    border-radius: 1.05rem;
  }

  .menu {
    border-radius: 1.05rem 0 0 1.05rem;
  }

  .contacts .contact-item {
    background: rgba(255, 255, 255, 0.08);
  }

  html.theme-dark .contacts .contact-item {
    background: rgba(19, 32, 58, 0.24);
  }
}

@media (max-width: 767px) {
  .navbar {
    border-radius: 0 0 1rem 1rem;
  }

  .menu {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  .main-image {
    border-radius: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-image {
    animation: none;
  }
}

/* iOS 26 liquid glass final pass: unified transparency, rim edge, and contrast */
html.theme-light {
  --lg-surface: rgba(235, 247, 255, 0.05);
  --lg-surface-strong: rgba(238, 249, 255, 0.08);
  --lg-chip-surface: rgba(244, 252, 255, 0.06);
  --lg-card-surface: rgba(246, 252, 255, 0.11);
  --lg-border: rgba(255, 255, 255, 0.78);
  --lg-border-soft: rgba(255, 255, 255, 0.48);
  --lg-rim-hi: rgba(255, 255, 255, 0.94);
  --lg-rim-low: rgba(148, 204, 255, 0.34);
  --lg-shadow: 0 18px 36px rgba(10, 22, 46, 0.14), 0 4px 14px rgba(10, 22, 46, 0.08);
  --lg-text: #102647;
  --lg-text-soft: rgba(19, 41, 76, 0.84);
  --lg-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.64),
    0 0 11px rgba(193, 226, 255, 0.36);
  --lg-backdrop: blur(19px) saturate(212%) brightness(1.08) contrast(1.04);
}

html.theme-dark {
  --lg-surface: rgba(16, 29, 54, 0.2);
  --lg-surface-strong: rgba(19, 35, 65, 0.28);
  --lg-chip-surface: rgba(23, 40, 74, 0.24);
  --lg-card-surface: rgba(22, 39, 70, 0.36);
  --lg-border: rgba(188, 219, 255, 0.58);
  --lg-border-soft: rgba(169, 202, 255, 0.34);
  --lg-rim-hi: rgba(221, 237, 255, 0.58);
  --lg-rim-low: rgba(121, 178, 255, 0.34);
  --lg-shadow: 0 22px 44px rgba(2, 6, 15, 0.42), 0 5px 16px rgba(2, 6, 15, 0.3);
  --lg-text: #f3f8ff;
  --lg-text-soft: rgba(222, 235, 255, 0.86);
  --lg-text-shadow: 0 1px 0 rgba(2, 6, 16, 0.78), 0 0 12px rgba(108, 175, 255, 0.28);
  --lg-backdrop: blur(20px) saturate(198%) brightness(1.04) contrast(1.05);
}

.navbar,
.menu {
  border: 1px solid transparent !important;
  -webkit-backdrop-filter: var(--lg-backdrop) !important;
  backdrop-filter: var(--lg-backdrop) !important;
}

.navbar {
  background: radial-gradient(
      124% 168% at var(--nav-pointer-x, 50%) calc(var(--nav-pointer-y, 30%) - 28%),
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.04) 56%,
      transparent 74%
    ),
    radial-gradient(
      150% 190% at calc(100% - var(--nav-pointer-x, 50%))
        calc(100% - var(--nav-pointer-y, 30%)),
      rgba(116, 199, 255, 0.26),
      rgba(140, 102, 255, 0.08) 48%,
      transparent 76%
    ),
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.01)),
    var(--lg-surface) !important;
  border-color: var(--lg-border) !important;
  box-shadow: inset 0 1px 0 var(--lg-rim-hi), inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px var(--lg-border-soft), var(--lg-shadow) !important;
}

.menu {
  background: radial-gradient(
      126% 170% at var(--menu-pointer-x, 72%) calc(var(--menu-pointer-y, 18%) - 28%),
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.04) 56%,
      transparent 74%
    ),
    radial-gradient(
      150% 190% at calc(100% - var(--menu-pointer-x, 72%))
        calc(100% - var(--menu-pointer-y, 18%)),
      rgba(116, 199, 255, 0.26),
      rgba(140, 102, 255, 0.08) 48%,
      transparent 76%
    ),
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.01)),
    var(--lg-surface) !important;
  border-color: var(--lg-border) !important;
  border-right-color: var(--lg-border) !important;
  box-shadow: inset 0 1px 0 var(--lg-rim-hi), inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px var(--lg-border-soft), -16px 0 34px rgba(6, 12, 28, 0.18),
    var(--lg-shadow) !important;
}

.navbar::before,
.menu::before {
  opacity: 0.62 !important;
  mix-blend-mode: screen;
  background: radial-gradient(
      116% 154% at 14% -20%,
      rgba(255, 255, 255, 0.55),
      rgba(255, 255, 255, 0.05) 52%,
      transparent 74%
    ),
    radial-gradient(
      132% 188% at 90% 110%,
      rgba(132, 208, 255, 0.28),
      rgba(199, 156, 255, 0.12) 54%,
      transparent 78%
    ) !important;
}

.navbar::after,
.menu::after {
  opacity: 0.98 !important;
  background: linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(180, 233, 255, 0.62) 16%,
      rgba(255, 255, 255, 0.16) 34%,
      rgba(255, 193, 226, 0.45) 52%,
      rgba(255, 255, 255, 0.16) 70%,
      rgba(173, 229, 255, 0.76) 100%
    ),
    radial-gradient(
      128% 182% at 8% -28%,
      rgba(255, 255, 255, 0.42),
      transparent 62%
    ),
    radial-gradient(
      124% 182% at 100% 118%,
      rgba(144, 212, 255, 0.26),
      transparent 64%
    ) !important;
  background-size: 196% 190%, 130% 180%, 130% 180% !important;
  animation: ios26-liquid-edge 7s cubic-bezier(0.43, 0.15, 0.28, 1) infinite !important;
}

@keyframes ios26-liquid-edge {
  0%,
  100% {
    background-position: 0% 0%, 6% -12%, 90% 108%;
  }
  50% {
    background-position: 100% 0%, 48% 26%, 72% 88%;
  }
}

.contacts .contact-item,
.menu-footer .social-list a,
.navbar-toggle,
.close-menu,
.slider,
.copy-bottom,
.social-list-bottom,
.social-list-bottom a,
.btn.btn-ghost {
  border-color: var(--lg-border) !important;
  background: radial-gradient(
      132% 162% at 10% -20%,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.03) 54%,
      transparent 74%
    ),
    linear-gradient(154deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.01)),
    var(--lg-chip-surface) !important;
  -webkit-backdrop-filter: blur(15px) saturate(196%) !important;
  backdrop-filter: blur(15px) saturate(196%) !important;
  box-shadow: inset 0 1px 0 var(--lg-rim-hi), inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    0 10px 22px rgba(8, 15, 32, 0.15) !important;
}

.btn,
.resume-but,
#form-button {
  border: 1px solid var(--lg-border) !important;
  background: radial-gradient(
      128% 168% at 20% -24%,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.04) 52%,
      transparent 74%
    ),
    linear-gradient(128deg, rgba(96, 177, 255, 0.7), rgba(116, 228, 255, 0.54)),
    rgba(56, 148, 255, 0.28) !important;
  -webkit-backdrop-filter: blur(15px) saturate(206%) !important;
  backdrop-filter: blur(15px) saturate(206%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), inset 0 -1px 0 rgba(255, 255, 255, 0.2),
    0 14px 28px rgba(10, 26, 58, 0.26) !important;
  color: #f7fbff !important;
  text-shadow: 0 1px 0 rgba(8, 20, 44, 0.44);
}

.btn:hover,
.btn:focus,
.resume-but:hover,
#form-button:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(255, 255, 255, 0.26), 0 18px 34px rgba(10, 26, 58, 0.3) !important;
}

.experience-box,
.col-resume,
.resume-row,
.partner-inner,
.contact-info,
.project-box {
  border-color: var(--lg-border-soft) !important;
  background: radial-gradient(
      132% 168% at 12% -18%,
      rgba(255, 255, 255, 0.28),
      rgba(255, 255, 255, 0.02) 56%,
      transparent 76%
    ),
    linear-gradient(156deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.01)),
    var(--lg-card-surface) !important;
  -webkit-backdrop-filter: blur(16px) saturate(182%) !important;
  backdrop-filter: blur(16px) saturate(182%) !important;
  box-shadow: inset 0 1px 0 var(--lg-rim-hi), inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 16px 34px rgba(8, 15, 32, 0.18) !important;
}

.section-5 .project-box {
  border-color: var(--lg-border) !important;
}

html.theme-light .section-5 .project-box {
  background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.56),
      rgba(224, 241, 255, 0.22) 56%,
      rgba(209, 232, 255, 0.16)
    ),
    var(--lg-card-surface) !important;
}

html.theme-dark .section-5 .project-box {
  background: linear-gradient(
      162deg,
      rgba(35, 56, 95, 0.56),
      rgba(15, 28, 53, 0.36) 56%,
      rgba(12, 22, 43, 0.44)
    ),
    var(--lg-card-surface) !important;
}

html.theme-light .section-5 .project-box h5,
html.theme-light .section-5 .project-category {
  color: #102647 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 0 11px rgba(170, 216, 255, 0.42);
}

html.theme-dark .section-5 .project-box h5,
html.theme-dark .section-5 .project-category {
  color: #f3f8ff !important;
  text-shadow: 0 1px 0 rgba(3, 8, 19, 0.78), 0 0 12px rgba(105, 172, 255, 0.3);
}

.navbar .brand-name,
.navbar .brand-text,
.contacts .contact-item,
.contacts .contact-item a,
.menu-list a,
.menu-footer .social-list a,
.close-menu,
.copy-bottom,
.social-list-bottom a,
.page-head-foot {
  color: var(--lg-text) !important;
  text-shadow: var(--lg-text-shadow) !important;
}

.resume-type,
.resume-study,
.resume-text,
.resume-date,
.contact-address h5,
.contact-address a,
.partner-inner p,
.project-box h5,
.project-category {
  color: var(--lg-text) !important;
}

.resume-study,
.resume-text,
.resume-date,
.project-category,
.brand-text,
.copy-bottom {
  color: var(--lg-text-soft) !important;
}

.navbar-toggle .icon-bar,
.page-head-foot-bg {
  background-color: var(--lg-text) !important;
}

.menu-list li.active > a,
.menu-list li a:hover {
  color: var(--lg-text) !important;
  border-color: var(--lg-border) !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

html.theme-dark .menu-list li.active > a,
html.theme-dark .menu-list li a:hover {
  background: rgba(132, 186, 255, 0.18) !important;
}

.copy-bottom,
.social-list-bottom {
  border-color: var(--lg-border) !important;
}

.copy-bottom::before,
.social-list-bottom::before {
  opacity: 0.92 !important;
  background: linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(179, 230, 255, 0.56) 16%,
      rgba(255, 255, 255, 0.14) 34%,
      rgba(255, 194, 226, 0.38) 54%,
      rgba(255, 255, 255, 0.12) 74%,
      rgba(176, 228, 255, 0.72) 100%
    ),
    radial-gradient(
      124% 168% at 8% -24%,
      rgba(255, 255, 255, 0.38),
      transparent 64%
    ) !important;
}

@media (min-width: 992px) {
  .menu {
    top: 0.58rem !important;
    right: 0.58rem !important;
    bottom: 0.58rem !important;
    width: min(calc(100% - 1.16rem), 430px);
    border-radius: 1.9rem !important;
  }
}

@media (max-width: 991px) {
  .menu {
    top: 0.34rem !important;
    right: 0.34rem !important;
    bottom: 0.34rem !important;
    width: min(calc(100% - 0.68rem), 430px);
    border-left: 1px solid var(--lg-border) !important;
    border-top: 1px solid var(--lg-border) !important;
    border-bottom: 1px solid var(--lg-border) !important;
    border-right: 1px solid var(--lg-border) !important;
    border-radius: 1.34rem !important;
  }

  .navbar::before,
  .navbar::after,
  .menu::before,
  .menu::after {
    animation: none !important;
  }
}

@media (max-width: 767px) {
  .menu {
    width: min(calc(100% - 0.52rem), 420px) !important;
    border-radius: 1.16rem !important;
  }
}

html.liquid-lite .navbar,
html.liquid-lite .menu,
html.liquid-lite .contacts .contact-item,
html.liquid-lite .menu-footer .social-list a,
html.liquid-lite .navbar-toggle,
html.liquid-lite .close-menu,
html.liquid-lite .slider,
html.liquid-lite .copy-bottom,
html.liquid-lite .social-list-bottom,
html.liquid-lite .social-list-bottom a {
  -webkit-backdrop-filter: blur(10px) saturate(156%) !important;
  backdrop-filter: blur(10px) saturate(156%) !important;
}

/* Footer anchoring and contrast alignment with sidepanel text */
.copy-bottom,
.social-list-bottom {
  position: fixed !important;
  top: auto !important;
  bottom: max(0.62rem, calc(env(safe-area-inset-bottom, 0px) + 0.32rem)) !important;
  z-index: 96 !important;
}

.copy-bottom {
  left: 0.72rem !important;
  right: auto !important;
  color: var(--lg-text) !important;
  text-shadow: var(--lg-text-shadow) !important;
}

.social-list-bottom {
  right: 0.72rem !important;
  left: auto !important;
}

.social-list-bottom a {
  color: var(--lg-text) !important;
  text-shadow: var(--lg-text-shadow) !important;
}

@media (max-width: 991px) {
  .copy-bottom,
  .social-list-bottom {
    bottom: max(0.46rem, calc(env(safe-area-inset-bottom, 0px) + 0.2rem)) !important;
  }

  .copy-bottom {
    left: 0.55rem !important;
  }

  .social-list-bottom {
    right: 0.55rem !important;
  }
}

/* Project chips: keep the outer anchor transparent and render glass only on the inner chip */
.section-5 .row-project-box .col-project-box {
  display: flex;
  align-items: stretch;
}

.section-5 .row-project-box .project-box {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
  transform: none !important;
}

.section-5 .row-project-box .project-box::before,
.section-5 .row-project-box .project-box::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

.section-5 .row-project-box .project-box .project-box-inner,
.section-5 .row-project-box .project-box .project-box-inner.box {
  width: 100% !important;
  margin: 0 !important;
  min-height: 10.4rem !important;
  height: 10.4rem !important;
  background-color: transparent !important;
}

@media (max-width: 991px) {
  .section-5 .row-project-box .project-box .project-box-inner,
  .section-5 .row-project-box .project-box .project-box-inner.box {
    min-height: 9.4rem !important;
    height: 9.4rem !important;
  }
}

@media (max-width: 767px) {
  .section-5 .row-project-box .project-box .project-box-inner,
  .section-5 .row-project-box .project-box .project-box-inner.box {
    min-height: 8.6rem !important;
    height: auto !important;
  }
}

/* Theme background images for home sections (light/dark only). */
html.theme-dark:not(.theme-image) body:not(.project-detail-page),
html.theme-dark:not(.theme-image) body[data-route-kind="home"] {
  background-color: #060b15 !important;
  background-image: linear-gradient(rgba(6, 11, 21, 0.52), rgba(6, 11, 21, 0.52)),
    url("../images/bg/(7).jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

html.theme-light:not(.theme-image) body:not(.project-detail-page),
html.theme-light:not(.theme-image) body[data-route-kind="home"] {
  background-color: #eef3ff !important;
  background-image: linear-gradient(rgba(246, 250, 255, 0.42), rgba(246, 250, 255, 0.42)),
    url("../images/bg/(2).png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

html.theme-dark:not(.theme-image) .pagepiling .section,
html.theme-dark:not(.theme-image) .section-bg,
html.theme-light:not(.theme-image) .pagepiling .section,
html.theme-light:not(.theme-image) .section-bg {
  background: transparent !important;
}

html.theme-dark:not(.theme-image) .section-5 .bg-changer::after,
html.theme-light:not(.theme-image) .section-5 .bg-changer::after {
  display: none;
}

/* Keep vertical side labels readable in light/dark themes (star has its own styling). */
html.theme-light:not(.theme-image) .vertical-title,
html.theme-dark:not(.theme-image) .vertical-title {
  opacity: 0.94;
}

html.theme-light:not(.theme-image) .pp-section:not(.active) .vertical-title,
html.theme-dark:not(.theme-image) .pp-section:not(.active) .vertical-title {
  opacity: 0 !important;
}

html.theme-light:not(.theme-image) .vertical-title span {
  color: rgba(21, 43, 78, 0.92) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76), 0 0 10px rgba(166, 209, 255, 0.4);
}

html.theme-dark:not(.theme-image) .vertical-title span {
  color: rgba(231, 241, 255, 0.94) !important;
  text-shadow: 0 1px 0 rgba(2, 7, 17, 0.86), 0 0 10px rgba(95, 166, 255, 0.42);
}