/* Digital Life Foundation — tactile interaction layer */
:root {
  --dlf-pointer-x: 50vw;
  --dlf-pointer-y: 50vh;
}

html,
body {
  background-color: #000 !important;
}

#dlf-circuit-field {
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .96;
  background: #000;
  mix-blend-mode: normal;
}

#dlf-circuit-field::before,
#dlf-circuit-field::after {
  content: none;
}

#dlf-cursor-glow {
  position: fixed;
  z-index: 2;
  left: var(--dlf-pointer-x);
  top: var(--dlf-pointer-y);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(154,252,255,.26) 0, rgba(0,217,255,.12) 18%, rgba(0,157,255,.04) 48%, transparent 72%);
  filter: blur(2px);
  mix-blend-mode: screen;
  transition: opacity .18s ease;
  will-change: left, top;
  contain: layout paint;
}

body.dlf-pointer-active #dlf-cursor-glow { opacity: 1; }

body.dlf-pointer-active #dlf-circuit-field { opacity: 1; }

body.dlf-pointer-active::before {
  filter: brightness(1.45) saturate(1.25);
}

/* Header/footer mark: no spin; keep the clean logo artwork consistent. */
.brand-logo-orbit {
  position: relative;
  flex: 0 0 auto;
  width: var(--dlf-logo-spin-size, 72px);
  height: var(--dlf-logo-spin-size, 72px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: default;
  isolation: isolate;
  perspective: 620px;
}

.brand-logo-orbit > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  transform-origin: center;
  will-change: transform;
}

.brand-logo-still-core {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 42% !important;
  height: 42% !important;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  clip-path: circle(44% at 50% 50%);
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(130,248,255,.85));
  display: none;
}

.brand-logo-orbit.is-spinning > img:first-child { animation: none; }
.brand-logo-orbit.is-spinning { animation: none; }
.footer-brand .brand-logo-orbit,
footer > .brand-logo-orbit { --dlf-logo-spin-size: 150px; }

@keyframes dlfHeaderOrbit {
  0% { transform: rotateY(0) scaleX(1); filter:drop-shadow(0 0 12px rgba(0,217,255,.75)); }
  18% { transform: rotateY(94deg) scaleX(.18); filter:drop-shadow(0 0 22px rgba(171,253,255,.95)); }
  42% { transform: rotateY(188deg) scaleX(1); }
  68% { transform: rotateY(282deg) scaleX(.18); }
  100% { transform: rotateY(360deg) scaleX(1); filter:drop-shadow(0 0 12px rgba(0,217,255,.75)); }
}

@keyframes dlfHeaderHalo {
  50% { box-shadow: 0 0 25px rgba(64,237,255,.75); }
}

/* Lower hero logo magnetic disassembly */
.hero-logo-wrap {
  pointer-events: auto !important;
  cursor: crosshair;
  perspective: 900px;
}

.hero-logo-wrap .hero-logo {
  transition: opacity .35s ease, transform .65s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}

.dlf-logo-piece-field {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.dlf-logo-piece {
  --piece-x: 0px;
  --piece-y: 0px;
  --piece-r: 0deg;
  position: absolute;
  width: 25%;
  height: 33.333%;
  opacity: 0;
  background-image: url("dlf-logo.png");
  background-size: 400% 300%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 9px rgba(71,237,255,.78));
  transform: translate3d(0,0,0) rotate(0) scale(.94);
  transition:
    transform .72s cubic-bezier(.17,.84,.26,1.12),
    opacity .18s ease;
  will-change: transform, opacity;
}

.hero-logo-wrap.is-disassembling .hero-logo {
  opacity: .08;
  transform: scale(.9);
  filter: blur(3px) drop-shadow(0 0 40px rgba(0,217,255,.8));
}

.hero-logo-wrap.is-disassembling .dlf-logo-piece {
  opacity: 1;
  transform: translate3d(var(--piece-x), var(--piece-y), 55px) rotate(var(--piece-r)) scale(1);
}

.hero-logo-wrap.is-reassembling .dlf-logo-piece {
  opacity: .8;
  transform: translate3d(0,0,0) rotate(0) scale(.96);
}

/* Scroll-reveal buttons and electric feedback */
.btn,
.nav-quote,
.menu-btn,
nav a,
.top-btn,
.quote-btn,
.cta-btn,
.card-cta,
a[href*="contact.html"],
button,
button[type="submit"],
input[type="submit"] {
  position: relative;
  overflow: hidden;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}

.dlf-reveal-ready {
  opacity: 0;
  transform: translateY(24px) scale(.97);
  visibility: hidden;
  transition-delay: var(--dlf-reveal-delay, 0ms);
}

.dlf-reveal-ready.dlf-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.card.dlf-reveal-ready,
.why-box.dlf-reveal-ready,
.step.dlf-reveal-ready,
.service-link-card.dlf-reveal-ready,
.small-card.dlf-reveal-ready,
.benefit.dlf-reveal-ready,
.package-card.dlf-reveal-ready {
  background-clip: padding-box;
  transform-origin: center bottom;
  transition:
    opacity .62s ease,
    transform .62s cubic-bezier(.18,.82,.22,1),
    visibility 0s linear .62s,
    box-shadow .28s ease,
    border-color .28s ease,
    filter .28s ease;
}

.card.dlf-reveal-ready.dlf-visible,
.why-box.dlf-reveal-ready.dlf-visible,
.step.dlf-reveal-ready.dlf-visible,
.service-link-card.dlf-reveal-ready.dlf-visible,
.small-card.dlf-reveal-ready.dlf-visible,
.benefit.dlf-reveal-ready.dlf-visible,
.package-card.dlf-reveal-ready.dlf-visible {
  transition-delay: var(--dlf-reveal-delay, 0ms), var(--dlf-reveal-delay, 0ms), 0s, 0s, 0s, 0s;
}

.btn::after,
.nav-quote::after,
.menu-btn::after,
nav a::after,
.top-btn::after,
.quote-btn::after,
.cta-btn::after,
.card-cta::after,
a[href*="contact.html"]::after,
button::after,
button[type="submit"]::after,
input[type="submit"]::after {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--btn-x, 50%) var(--btn-y, 50%), rgba(220,254,255,.65), rgba(0,217,255,.24) 25%, transparent 58%);
  transition: opacity .2s ease;
  mix-blend-mode: screen;
}

.btn:hover,
.btn:focus-visible,
.btn.dlf-touch-lit,
.nav-quote:hover,
.menu-btn:hover,
nav a:hover,
nav a:focus-visible,
.top-btn:hover,
.quote-btn:hover,
.quote-btn:focus-visible,
.cta-btn:hover,
.cta-btn:focus-visible,
.card-cta:hover,
a[href*="contact.html"]:hover,
a[href*="contact.html"]:focus-visible,
button:hover,
button:focus-visible,
button[type="submit"]:hover,
input[type="submit"]:hover {
  border-color: #a3fbff;
  filter: brightness(1.18) saturate(1.15);
  box-shadow: 0 0 14px rgba(0,217,255,.8), 0 0 36px rgba(0,157,255,.38), inset 0 0 18px rgba(131,248,255,.18);
}

.btn:hover::after,
.btn:focus-visible::after,
.btn.dlf-touch-lit::after,
.nav-quote:hover::after,
.menu-btn:hover::after,
nav a:hover::after,
nav a:focus-visible::after,
.top-btn:hover::after,
.quote-btn:hover::after,
.quote-btn:focus-visible::after,
.cta-btn:hover::after,
.cta-btn:focus-visible::after,
.card-cta:hover::after,
a[href*="contact.html"]:hover::after,
a[href*="contact.html"]:focus-visible::after,
button:hover::after,
button:focus-visible::after,
button[type="submit"]:hover::after,
input[type="submit"]:hover::after { opacity: 1; }

/* Content stays in front; the companion inhabits the visual depth behind it. */
.page {
  position: relative;
  z-index: 2;
  background: transparent !important;
}
.page::before {
  opacity: 0 !important;
}
body::before,
body::after {
  opacity: 0 !important;
}
main, header, footer { position: relative; z-index: 20; }
.card, .why, .why-box, .process, .step, .cta, .btn, h1, h2, h3, p, li, .section-title, .hero p, .eyebrow, .service-link-card, .small-card, .benefit, .package-card { position: relative; z-index: 20; }

footer {
  width: min(1168px, calc(100% - 48px)) !important;
  max-width: 1168px !important;
  min-height: 112px;
  margin: 28px auto 0 !important;
  padding: 22px 0 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  color: #8d9aaa !important;
  font-size: 14px !important;
}

footer img {
  width: 118px !important;
  height: 118px !important;
  object-fit: contain !important;
  flex: 0 0 118px !important;
  filter: drop-shadow(0 0 10px rgba(0,217,255,.75)) !important;
}

footer span {
  display: inline-block;
}

header nav {
  position: relative;
  z-index: 4;
  align-items: center;
  gap: 10px;
}

header nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: visible;
  border-radius: 999px;
  padding: 10px 14px !important;
  transition: color .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease, filter .22s ease;
}

header nav a:hover,
header nav a:focus-visible {
  color: #dffcff !important;
  background: rgba(0,217,255,.075);
}

.menu-btn {
  min-height: 44px;
}

footer > img,
footer .brand-logo-orbit {
  flex: 0 0 auto;
}

.dlf-video-source {
  position: fixed;
  left: -2px;
  top: -2px;
  width: 1px;
  height: 1px;
  opacity: .001;
  pointer-events: none;
  z-index: -1;
}

.dlf-video-robot {
  --robot-x: 50vw;
  --robot-y: 40vh;
  --robot-size: 190px;
  position: fixed;
  z-index: 3;
  left: var(--robot-x);
  top: var(--robot-y);
  width: var(--robot-size);
  height: var(--robot-size);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  filter:
    drop-shadow(0 20px 18px rgba(0,0,0,.42))
    drop-shadow(0 0 18px rgba(0,217,255,.28))
    saturate(1.08);
  transition: opacity .42s ease, filter .28s ease;
  will-change: transform, opacity;
}

.dlf-video-robot.is-active {
  opacity: .58;
  transform: translate(-50%, -50%);
}

.dlf-video-robot.is-action {
  position: absolute;
  z-index: 3;
  opacity: .44;
  animation: dlfRobotFloat var(--robot-duration, 6.8s) ease-in-out both;
}

.dlf-video-robot.is-peeking {
  position: absolute;
  z-index: 19;
  opacity: .72;
  transform: translate(-50%, -90%);
}

.dlf-video-robot.is-crashing {
  position: absolute;
  z-index: 3;
  opacity: .5;
  animation: dlfRobotFloat var(--robot-duration, 6.8s) ease-in-out both;
}

.dlf-video-robot.is-fading {
  opacity: 0 !important;
}

#dlf-impact {
  position: fixed;
  z-index: 31;
  width: 230px;
  height: 230px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.4);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.2,1.4);
}
#dlf-impact.is-visible { opacity:.74; transform:translate(-50%,-50%) scale(1); }
#dlf-impact i {
  position:absolute;
  left:50%;
  top:50%;
  width:38px;
  height:38px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(235,254,255,.62);
  box-shadow:0 0 0 18px rgba(188,252,255,.05), 0 0 34px rgba(0,217,255,.42);
}
#dlf-impact span { position:absolute; left:114px; top:114px; width:112px; height:1px; transform-origin:left; background:linear-gradient(90deg,rgba(238,254,255,.96),rgba(130,243,255,.6) 34%,rgba(255,255,255,.28) 58%,transparent); filter:drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 0 8px rgba(0,217,255,.58)); }
#dlf-impact span:nth-child(1){transform:rotate(8deg);width:116px}
#dlf-impact span:nth-child(2){transform:rotate(42deg);width:76px}
#dlf-impact span:nth-child(3){transform:rotate(78deg);width:132px}
#dlf-impact span:nth-child(4){transform:rotate(126deg);width:92px}
#dlf-impact span:nth-child(5){transform:rotate(166deg);width:128px}
#dlf-impact span:nth-child(6){transform:rotate(214deg);width:88px}
#dlf-impact span:nth-child(7){transform:rotate(251deg);width:138px}
#dlf-impact span:nth-child(8){transform:rotate(294deg);width:84px}
#dlf-impact span:nth-child(9){transform:rotate(326deg);width:118px}
#dlf-impact span:nth-child(10){transform:rotate(352deg);width:68px}
body.dlf-screen-bonk .page { animation:dlfScreenBonk .46s cubic-bezier(.2,.8,.2,1); }

@keyframes dlfCircuitDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 80px 40px, -80px 80px, 150px 0, 0 150px, 170px 170px, -290px 290px, 0 0; }
}
@keyframes dlfCircuitPulse { from{ opacity:.24; filter:brightness(1); } to{ opacity:.5; filter:brightness(1.35); } }
@keyframes dlfCircuitCurrent {
  from { background-position: -420px 0, 0 -420px; }
  to { background-position: 420px 0, 0 420px; }
}
@keyframes dlfGalaxyBreath {
  from { filter:saturate(1.05) brightness(.86) contrast(1.02); }
  to { filter:saturate(1.28) brightness(1.02) contrast(1.08); }
}
@keyframes dlfCircuitNodes {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 620px 0, 0 620px, 720px 720px, 260px -260px, -340px 340px, 220px 220px; }
}
@keyframes dlfStarsTwinkle {
  0% { opacity:.35; filter:brightness(.9) drop-shadow(0 0 5px rgba(0,217,255,.34)); }
  52% { opacity:.58; filter:brightness(1.35) drop-shadow(0 0 9px rgba(0,217,255,.58)); }
  100% { opacity:.44; filter:brightness(1.08) drop-shadow(0 0 7px rgba(255,255,255,.32)); }
}
@keyframes dlfShootingStars {
  from { background-position: -980px -220px, 0 0, 0 0; }
  to { background-position: 980px 420px, 520px 520px, -520px 520px; }
}
@keyframes dlfScreenBonk { 0%,100%{ transform:translate3d(0,0,0); } 20%{ transform:translate3d(-7px,3px,0); } 45%{ transform:translate3d(6px,-2px,0); } 70%{ transform:translate3d(-3px,1px,0); } }
@keyframes dlfRobotFloat {
  0% { transform:translate(-50%, -51%) rotate(-1.5deg); }
  50% { transform:translate(-50%, -55%) rotate(1.5deg); }
  100% { transform:translate(-50%, -51%) rotate(-1.5deg); }
}
@media (max-width: 960px) {
  .brand-logo-orbit { width:60px; height:60px; }
  header nav { align-items: stretch; gap: 6px; }
  header nav a { width: 100%; min-height: 42px; justify-content: flex-start; white-space: normal; }
  .dlf-video-robot { --robot-size: 150px; }
  .dlf-video-robot.is-peeking { opacity:.86; transform:translate(-50%, -94%); }
  footer { width: calc(100% - 36px) !important; min-height: auto; flex-direction: column !important; justify-content: center !important; text-align: center !important; padding: 24px 0 34px !important; }
  footer img { width: 92px !important; height: 92px !important; flex-basis: 92px !important; }
}

@media (hover: none) {
  #dlf-cursor-glow { width:210px; height:210px; }
}

@media (prefers-reduced-motion: reduce) {
  .dlf-logo-piece, .hero-logo-wrap .hero-logo, .btn, .dlf-video-robot, .dlf-reveal-ready { transition-duration:.01ms !important; }
  .brand-logo-orbit.is-spinning > img, .dlf-video-robot, body.dlf-screen-bonk .page { animation:none !important; }
}