/* Organic Digital BD — Chrome Liquid V2
   Metallic liquid ribbons, logo-matched accents and strong readability.
   Pure CSS. No video, CDN, WebGL or heavy JavaScript. */
:root {
  --clv2-ink: #f4fbff;
  --clv2-muted: #c9d5df;
  --clv2-aqua: #69f0d3;
  --clv2-violet: #7657d9;
  --clv2-gold: #efd58b;
  --clv2-night: #02060d;
  --clv2-deep: #07111d;
}

html {
  background: var(--clv2-night);
  color-scheme: dark;
}

body {
  background: #02060d !important;
}

/* The older aurora layer is replaced by the chrome ribbons below. */
body::before,
body::after {
  content: none !important;
  display: none !important;
}

.chrome-liquid-bg {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
  transform: translateZ(0);
  background:
    radial-gradient(ellipse at 18% 14%, rgba(105, 240, 211, .075), transparent 31%),
    radial-gradient(ellipse at 84% 20%, rgba(118, 87, 217, .085), transparent 32%),
    linear-gradient(180deg, #02060d 0%, #03101a 45%, #02070e 100%);
}

/* Main liquid-metal ribbon. Narrow reflection bands create a chrome finish. */
.chrome-liquid-sheet,
.chrome-liquid-bg::before,
.chrome-liquid-bg::after {
  position: absolute;
  content: "";
  display: block;
  border: 1px solid rgba(224, 248, 250, .10);
  background:
    linear-gradient(
      104deg,
      transparent 0%,
      rgba(5, 15, 27, .88) 8%,
      rgba(145, 183, 190, .22) 13%,
      rgba(249, 255, 255, .82) 17%,
      rgba(62, 109, 119, .24) 21%,
      rgba(2, 13, 24, .96) 29%,
      rgba(78, 235, 210, .44) 36%,
      rgba(220, 248, 246, .72) 42%,
      rgba(18, 39, 54, .94) 49%,
      rgba(111, 78, 191, .40) 57%,
      rgba(230, 241, 247, .58) 64%,
      rgba(6, 22, 35, .96) 72%,
      rgba(239, 213, 139, .11) 80%,
      rgba(241, 252, 255, .63) 87%,
      rgba(20, 42, 55, .36) 91%,
      transparent 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -18px 38px rgba(0, 5, 12, .34),
    0 0 54px rgba(105, 240, 211, .08),
    0 26px 90px rgba(0, 0, 0, .26);
  filter: blur(11px) saturate(108%) contrast(136%);
  will-change: transform;
  backface-visibility: hidden;
}

.chrome-liquid-sheet {
  z-index: 2;
  top: 7vh;
  left: -17vw;
  width: 137vw;
  height: clamp(150px, 22vw, 360px);
  border-radius: 48% 52% 66% 34% / 61% 35% 65% 39%;
  opacity: .39;
  transform: translate3d(0, 0, 0) rotate(-9deg) scale(1.04);
  transform-origin: 48% 50%;
  animation: clv2RibbonPrimary 27s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

/* Thin moving specular highlight inside the main ribbon. */
.chrome-liquid-sheet::before {
  content: "";
  position: absolute;
  inset: 11% 5% 54% 7%;
  border-radius: inherit;
  background: linear-gradient(93deg, transparent 8%, rgba(255,255,255,.08) 20%, rgba(255,255,255,.70) 47%, rgba(159,245,230,.25) 62%, transparent 88%);
  filter: blur(5px);
  opacity: .46;
  transform: translateX(-7%);
  animation: clv2Specular 12s ease-in-out infinite alternate;
}

.chrome-liquid-bg::before {
  z-index: 1;
  top: 38vh;
  left: -22vw;
  width: 118vw;
  height: clamp(110px, 16vw, 265px);
  border-radius: 36% 64% 42% 58% / 58% 46% 54% 42%;
  opacity: .18;
  filter: blur(14px) saturate(105%) contrast(130%);
  transform: translate3d(0, 0, 0) rotate(13deg) scale(1.05);
  animation: clv2RibbonSecondary 31s ease-in-out infinite alternate;
}

.chrome-liquid-bg::after {
  z-index: 1;
  top: 70vh;
  left: 2vw;
  width: 126vw;
  height: clamp(120px, 17vw, 285px);
  border-radius: 61% 39% 54% 46% / 44% 58% 42% 56%;
  opacity: .15;
  filter: blur(16px) saturate(103%) contrast(126%);
  transform: translate3d(0, 0, 0) rotate(-12deg) scale(1.06);
  animation: clv2RibbonTertiary 35s ease-in-out infinite alternate;
}

.chrome-liquid-vignette {
  position: absolute;
  z-index: 5;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(1,4,9,.48) 0%, rgba(2,7,14,.22) 25%, rgba(1,6,13,.38) 62%, rgba(1,4,9,.78) 100%),
    radial-gradient(ellipse at 50% 34%, transparent 4%, rgba(1,5,11,.10) 36%, rgba(1,4,10,.72) 100%);
}

/* Glass surfaces: dark enough for text while retaining metallic reflections. */
.site-header {
  background: rgba(3, 10, 18, .86) !important;
  border-color: rgba(205, 244, 241, .17) !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, .23) !important;
}

.hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(118, 87, 217, .16), transparent 32%),
    radial-gradient(circle at 74% 82%, rgba(105, 240, 211, .09), transparent 30%),
    linear-gradient(116deg, rgba(3, 16, 27, .94) 0%, rgba(6, 23, 36, .90) 49%, rgba(18, 17, 43, .91) 100%) !important;
  border-color: rgba(218, 252, 248, .19) !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .31) !important;
}

.hero::before {
  background:
    linear-gradient(112deg, rgba(255,255,255,.045), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(118,87,217,.15), transparent 32%),
    radial-gradient(circle at 72% 85%, rgba(239,213,139,.075), transparent 28%) !important;
}

.services,
.catalog,
.how {
  position: relative;
  isolation: isolate;
}

/* Dark veil behind dense product content. */
.catalog::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -24px -20px -34px;
  border: 1px solid rgba(184, 238, 231, .045);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 0%, rgba(105,240,211,.035), transparent 30%),
    linear-gradient(180deg, rgba(2,8,16,.50), rgba(2,7,14,.72) 34%, rgba(2,7,14,.82));
  box-shadow: 0 36px 110px rgba(0, 0, 0, .18);
}

.catalog-search-panel,
.service-card,
.steps article,
.product-card,
.details-main-column,
.details-checkout-card,
.specs-box,
.warning-note-box,
.details-feature-card,
.related-card {
  backdrop-filter: blur(8px) saturate(112%);
  -webkit-backdrop-filter: blur(8px) saturate(112%);
}

.catalog-search-panel {
  background:
    linear-gradient(145deg, rgba(6, 18, 30, .94), rgba(3, 9, 17, .96)) !important;
  border-color: rgba(105, 240, 211, .16) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .28) !important;
}

.service-card,
.steps article {
  background: linear-gradient(155deg, rgba(9, 24, 37, .92), rgba(5, 12, 23, .96)) !important;
  border-color: rgba(210, 244, 242, .12) !important;
}

.product-card {
  background:
    radial-gradient(circle at 90% 3%, rgba(105,240,211,.075), transparent 34%),
    linear-gradient(155deg, rgba(9, 24, 38, .96) 0%, rgba(5, 14, 26, .97) 66%, rgba(3, 9, 18, .985) 100%) !important;
  border-color: rgba(191, 234, 230, .14) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, .31) !important;
}

.product-card:hover {
  border-color: rgba(105, 240, 211, .34) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .38), 0 0 0 1px rgba(105, 240, 211, .045) !important;
}

.how-card,
.contact {
  background:
    radial-gradient(circle at 92% 12%, rgba(239,213,139,.085), transparent 31%),
    radial-gradient(circle at 8% 86%, rgba(105,240,211,.075), transparent 33%),
    linear-gradient(115deg, rgba(4,21,33,.94), rgba(14,22,47,.92) 55%, rgba(31,23,43,.92)) !important;
  border-color: rgba(220, 248, 245, .15) !important;
}

.hero h1,
.section h2,
.catalog-heading h2,
.contact h2,
.product-info h3,
.hero-title {
  color: var(--clv2-ink) !important;
  text-shadow: 0 3px 24px rgba(0,0,0,.76), 0 0 24px rgba(105,240,211,.055) !important;
}

.hero-text,
.catalog-heading > p:not(.eyebrow),
.service-card p,
.steps p,
.contact p:not(.eyebrow),
.product-plan-total {
  color: var(--clv2-muted) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.58);
}

@keyframes clv2RibbonPrimary {
  0%   { transform: translate3d(-3.5vw, -1.2vh, 0) rotate(-10deg) scale(1.02); }
  48%  { transform: translate3d(2.8vw, 3.2vh, 0) rotate(-5deg) scale(1.08); }
  100% { transform: translate3d(-1vw, 7vh, 0) rotate(-13deg) scale(1.04); }
}

@keyframes clv2RibbonSecondary {
  0%   { transform: translate3d(-4vw, -2vh, 0) rotate(15deg) scale(1.02); }
  100% { transform: translate3d(10vw, 8vh, 0) rotate(8deg) scale(1.10); }
}

@keyframes clv2RibbonTertiary {
  0%   { transform: translate3d(5vw, 0, 0) rotate(-13deg) scale(1.02); }
  100% { transform: translate3d(-11vw, 9vh, 0) rotate(-7deg) scale(1.10); }
}

@keyframes clv2Specular {
  0%   { transform: translate3d(-9%, -4%, 0) scaleX(.94); opacity: .29; }
  100% { transform: translate3d(9%, 7%, 0) scaleX(1.08); opacity: .58; }
}

@media (max-width: 760px) {
  .chrome-liquid-sheet {
    top: 9vh;
    left: -52vw;
    width: 205vw;
    height: 190px;
    opacity: .31;
    filter: blur(9px) saturate(104%) contrast(128%);
    animation-duration: 32s;
  }

  .chrome-liquid-bg::before {
    top: 46vh;
    left: -62vw;
    width: 185vw;
    height: 145px;
    opacity: .12;
    filter: blur(11px) saturate(102%) contrast(122%);
    animation-duration: 37s;
  }

  .chrome-liquid-bg::after {
    top: 77vh;
    left: -38vw;
    width: 190vw;
    height: 155px;
    opacity: .10;
    filter: blur(12px) saturate(102%) contrast(120%);
    animation-duration: 41s;
  }

  .catalog::before {
    inset: -12px -8px -24px;
    border-radius: 24px;
  }

  .catalog-search-panel,
  .service-card,
  .steps article,
  .product-card,
  .details-main-column,
  .details-checkout-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chrome-liquid-sheet,
  .chrome-liquid-sheet::before,
  .chrome-liquid-bg::before,
  .chrome-liquid-bg::after {
    animation: none !important;
  }

  .chrome-liquid-sheet {
    transform: translate3d(0, 2vh, 0) rotate(-8deg) scale(1.04);
  }
}