/* Shared optical material. Layout and font metrics belong to the original page. */
:root {
  --glass-border: rgb(180 204 246 / 19%);
  --glass-edge: rgb(226 237 255 / 25%);
  --glass-shadow: 0 12px 38px #02050b50, inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 #02071180;
}

:is(.vortium-desktop-nav, .vortium-logo, .vortium-menu-button, .badge,
    .hero-actions .btn, .contact-submit, .contact-form, .contact-profile,
    .webdesign-panel, .service-card) {
  --glass-x: 50%;
  --glass-y: 0%;
  --glass-active: 0;
  --glass-reflection: radial-gradient(340px circle at var(--glass-x) var(--glass-y),
    rgb(149 189 255 / calc(var(--glass-active) * .045)), transparent 68%);
}
.liquid-surface { position: relative; isolation: isolate; }
.liquid-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(260px circle at var(--glass-x) var(--glass-y),
      rgb(193 217 255 / calc(var(--glass-active) * .16)), transparent 65%),
    linear-gradient(145deg, #d9e8ff21, transparent 35%, #71a5ff0a 70%, #dae6ff19);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.vortium-desktop-nav {
  background: var(--glass-reflection), linear-gradient(145deg, #c3d7fc16, #151b29b8 44%, #070c16ca);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}
.vortium-logo, .vortium-menu-button {
  background: var(--glass-reflection), linear-gradient(140deg, #d9e8ff1c, #101723d9 45%, #060b14ec);
  border-color: #adcbff38;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.vortium-nav-link[aria-current="page"], .vortium-nav-link[aria-current="page"]:hover {
  background: linear-gradient(145deg, #d5e3ff1c, #8cb4ff08);
  box-shadow: inset 0 1px 0 #d6e5ff1c, inset 0 -1px 0 #4d86ed14;
  color: #f4f7ff;
}
.vortium-nav-link[aria-current="page"]::after {
  width: 14px;
  height: 2px;
  bottom: 4px;
  background: #8cbbff;
  box-shadow: 0 0 9px #5b8df66b;
}
.badge {
  border-radius: 999px;
  background: var(--glass-reflection), linear-gradient(120deg, #bed5ff20, #1321398a 46%, #0a0f1aa6);
  box-shadow: inset 0 1px 0 #d1e3ff38, inset 0 -1px 0 #6e9fe025, 0 5px 22px #03060b28;
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  color: #dfeaff;
}
.badge-star { color: #bdd8ff; filter: drop-shadow(0 0 5px #6ea6ff70); }
.hero h1 em { color: #c3d2e9; }
.hero-actions .btn-solid, .contact-submit.btn-solid {
  color: #0c1729;
  border-color: #e4eeffb8;
  background: var(--glass-reflection), linear-gradient(155deg, #ffffff, #dae6f9 45%, #aebfdc 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 2px #5979a840, 0 4px 22px #487ddb20;
  text-shadow: none;
}
.hero-actions .btn-solid:hover, .hero-actions .btn-solid:focus-visible,
.contact-submit.btn-solid:hover, .contact-submit.btn-solid:focus-visible {
  background: var(--glass-reflection), linear-gradient(155deg, #fff, #edf4ff 45%, #bdd0ee);
  box-shadow: inset 0 1px 0 #fff, 0 0 28px #669dff38, 0 8px 24px #03071160;
}
.hero-actions .btn-ghost {
  background: var(--glass-reflection), linear-gradient(140deg, #cfe0ff1c, #101a2b91 48%, #070d198f);
  color: #e0e9f8;
  border-color: #bacfeb42;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.hero-actions .btn-ghost:hover, .hero-actions .btn-ghost:focus-visible {
  background: var(--glass-reflection), linear-gradient(140deg, #d9e8ff25, #14233ca6 48%, #0b14248f);
  border-color: #aecfff70;
  box-shadow: inset 0 1px 0 #dae9ff45, 0 5px 24px #1c4b961f;
}
.webdesign-panel, .contact-form, .service-card {
  /* Translucency belongs to the material and persists after the entrance fade. */
  background: var(--glass-reflection), linear-gradient(140deg, #222b38b3, #10151eb8 55%, #0c111abf);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow), 0 24px 70px #00000024;
  backdrop-filter: blur(16px) saturate(110%);
  -webkit-backdrop-filter: blur(16px) saturate(110%);
}
.service-card-frame--featured .service-card {
  background: var(--glass-reflection), linear-gradient(140deg, #2e3c51b8, #192230bd 54%, #111926c4);
  border-color: #97bdf446;
  box-shadow: inset 0 1px 0 #d8e7ff33, 0 16px 46px #050a1545;
}
.service-card-frame { border-color: #9ab7e51c; background: #b2ccfa06; }
.contact-profile {
  background: var(--glass-reflection), linear-gradient(135deg, #bcd1f612, #11192899 46%, #0a101ca6);
  border-color: #a1bce033;
  box-shadow: inset 0 1px 0 #d9e8ff1f, 0 12px 34px #02050b24;
  backdrop-filter: blur(15px) saturate(112%);
  -webkit-backdrop-filter: blur(15px) saturate(112%);
}
.contact-avatar { background: linear-gradient(140deg, #adcdff1c, #1a2b444d); border-color: #b4cefa30; color: #d4e5ff; }
.contact-form :is(input, select, textarea):focus { border-color: #8fb8f5; outline-color: #8fb8f5; }
.site-footer { border-top-color: #a4c5fc20; }
@media (max-width: 720px) {
  .vortium-mobile-menu {
    background: linear-gradient(145deg, #202b3af5, #0b121eed);
    border-color: #9fbcec38;
    box-shadow: inset 0 1px 0 #dbe8ff29, 0 24px 80px #00000075;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
  .vortium-mobile-menu .vortium-nav-link[aria-current="page"]::after { width: 18px; height: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-surface::before { background: linear-gradient(145deg, #d9e8ff21, transparent 35%, #dae6ff19); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vortium-desktop-nav, .vortium-mobile-menu, .webdesign-panel, .contact-form, .contact-profile, .service-card {
    background-color: #141c29;
  }
}