:root {
  --ink: #190302;
  --sea: #08b8eb;
  --aqua: #51d5f5;
  --foam: #f7f4ef;
  --coral: #d79a12;
  --sand: #f0c558;
  --muted: #685c59;
  --shadow: 0 18px 50px rgba(25, 3, 2, .14);
}
.brand img { width: 62px; height: 54px; object-fit: contain; }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: 1fr;
  background: #07191e;
  color: white;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(9,2,1,.88) 0%, rgba(9,2,1,.62) 48%, rgba(9,2,1,.18) 100%);
}
.hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-copy { position: relative; z-index: 1; max-width: 850px; }
.hero-copy .eyebrow { color: var(--sand); }
.hero-copy p { color: rgba(255,255,255,.82); }
.hero-copy .ghost { color: white; border-color: rgba(255,255,255,.75); background: rgba(0,0,0,.14); }
.hero-copy .trust { color: rgba(255,255,255,.88); }
.hero-art { display: none; }
.product-img {
  height: 230px;
  overflow: hidden;
  background: linear-gradient(145deg, #f8fcfd, #e2f7fc);
}
.product-img img {
  width: 100%;
  height: 100%;
  padding: 12px;
  object-fit: contain;
  object-position: center;
  background: white;
}
.product-img > span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 0;
  background: url("logo.png") center / 72% auto no-repeat;
  opacity: .28;
}
.product-img em {
  z-index: 1;
  background: var(--sand);
  color: var(--ink);
  border: 1px solid rgba(25, 3, 2, .12);
  box-shadow: 0 4px 12px rgba(25, 3, 2, .12);
}
footer { background: #190302; }
footer .brand img { width: 86px; height: 68px; }
footer .digitala-credit {
  color: white;
  font-size: 13px;
  font-weight: 600;
}
footer .digitala-credit:hover { color: var(--aqua); }
.about-values-title {
  margin: 30px 0 6px;
  font-size: 20px;
  color: var(--ink);
}
.about li strong { color: var(--ink); }
.about .about-art {
  min-height: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 24px;
  background: none;
  box-shadow: -18px 18px 0 var(--sand);
}
.about .about-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero { background: linear-gradient(135deg, #190302, #064f65); }
}