/* ================================================================
   DEECLIQ — interactive robot, rendered as a glossy figure behind
   the hero text (original CSS-built character, not a copy of any
   reference image). Head turns toward the cursor; the right hand
   swings toward clicks anywhere on the page. Each page gets its
   own size/position/pose via a --variant modifier class.
   ================================================================ */

.dl-robot {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: .88;
  filter: drop-shadow(0 22px 30px rgba(37,99,235,.16));
  animation: dlRobotFloat 5s ease-in-out infinite, dlRobotSway 9s ease-in-out infinite;
  perspective: 700px;
}
/* Ambient halo glow sitting just behind the figure, plus a soft contact
   shadow under the feet — gives the mascot a sense of depth/lighting
   instead of floating flat against the page. */
.dl-robot::before {
  content: '';
  position: absolute; top: 6%; left: 50%; width: 78%; height: 78%;
  margin-left: -39%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,214,255,.22) 0%, rgba(61,214,255,.08) 45%, transparent 75%);
  z-index: -1;
  animation: dlHaloPulse 4.5s ease-in-out infinite;
}
@keyframes dlHaloPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.06); }
}
.dl-robot::after {
  content: '';
  position: absolute; bottom: -2%; left: 50%; width: 46%; height: 8%;
  margin-left: -23%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.32) 0%, transparent 75%);
  z-index: -1;
}
html[data-theme="dark"] .dl-robot::after { background: radial-gradient(ellipse at center, rgba(61,214,255,.2) 0%, transparent 75%); }
.dl-robot-hit { pointer-events: auto; cursor: pointer; position: absolute; inset: 0; }
@keyframes dlRobotFloat {
  0%, 100% { transform: translateY(0) rotate(var(--dl-tilt, 0deg)); }
  50%      { transform: translateY(-12px) rotate(var(--dl-tilt, 0deg)); }
}
@keyframes dlRobotSway {
  0%, 100% { margin-left: 0; }
  50%      { margin-left: 6px; }
}

/* Make sure hero text always paints above the robot */
.dl-hero-eyebrow, .dl-hero-title, .dl-hero-sub, .dl-hero-actions, .dl-hero-search, .dl-scroll-cue {
  position: relative; z-index: 2;
}

/* Same guarantee for the Services section heading/cards and the search
   page's content — they sit above the small corner robots, never behind. */
#services > .dl-eyebrow, #services > .dl-title, #services > .dl-sub, #services > .dl-grid,
.public-search-page > * {
  position: relative; z-index: 2;
}

/* ── Per-page variants: size, side, and resting pose ──────────── */
/* Large, sharp, fully-visible centered hero figure — a dominant presence
   like a flagship product render, not a faded background blob. Sits behind
   the text (z-index 0 vs the hero text's z-index:2) and is bottom-anchored
   so it reads as a standing figure rather than floating mid-air. */
.dl-robot--home {
  left: 50%; bottom: -20px; top: auto;
  width: clamp(360px, 34vw, 500px); height: clamp(460px, 43vw, 620px);
  margin-left: calc(clamp(360px, 34vw, 500px) / -2);
  opacity: .55;
  --dl-tilt: -2deg;
}
.dl-robot--home .dl-robot-arm.left  { transform: rotate(16deg); }
.dl-robot--home .dl-robot-arm.right { transform: rotate(-14deg); }
@keyframes dlArmSwayHome {
  0%, 100% { transform: rotate(16deg); }
  50%      { transform: rotate(8deg); }
}
.dl-robot--home .dl-robot-arm.left { animation: dlArmSwayHome 4s ease-in-out infinite; }
html[data-theme="dark"] .dl-robot--home,
html[data-theme="dark"].theme-neon .dl-robot--home { opacity: .55; }
.dl-robot--about {
  right: -30px; left: auto; bottom: -10px;
  width: clamp(190px, 22vw, 270px); height: clamp(250px, 30vw, 340px);
  --dl-tilt: 2deg;
}
.dl-robot--about .dl-robot-arm.left  { transform: rotate(-30deg); }
.dl-robot--about .dl-robot-arm.right { transform: rotate(20deg); }
.dl-robot--services-hero {
  left: -20px; right: auto; bottom: -16px;
  width: clamp(210px, 25vw, 300px); height: clamp(280px, 33vw, 380px);
  --dl-tilt: 4deg;
}
.dl-robot--services-hero .dl-robot-arm.left  { transform: rotate(-18deg); }
.dl-robot--services-hero .dl-robot-arm.right { transform: rotate(32deg); }
.dl-robot--contact {
  left: -20px; bottom: -10px;
  width: clamp(190px, 22vw, 270px); height: clamp(250px, 30vw, 340px);
  --dl-tilt: -3deg;
}
.dl-robot--tools {
  left: 50%; bottom: -16px;
  width: clamp(210px, 25vw, 300px); height: clamp(280px, 33vw, 380px);
  margin-left: clamp(-220px, -14vw, -90px);
  --dl-tilt: 1deg;
}
.dl-robot--services {
  right: 2vw; left: auto; top: 70px; bottom: auto;
  width: clamp(150px, 17vw, 220px); height: clamp(200px, 23vw, 280px);
  opacity: .95;
  z-index: 0;
  --dl-tilt: 3deg;
}
.dl-robot--services .dl-robot-arm.left  { transform: rotate(-26deg); }
.dl-robot--services .dl-robot-arm.right { transform: rotate(18deg); }

/* Small corner robot for the auth card pages (login/register/forgot/reset)
   — sits in the empty bottom-right corner of the viewport, clear of the
   centered card. Its hit-area (click-to-open-chat) is disabled since it
   would otherwise sit on top of real page content. */
.dl-robot--auth {
  right: 4vw; left: auto; bottom: 6vh; top: auto;
  width: clamp(170px, 19vw, 240px); height: clamp(220px, 25vw, 310px);
  opacity: .85;
  z-index: 0;
  --dl-tilt: 3deg;
}
.dl-robot--auth .dl-robot-arm.left  { transform: rotate(-22deg); }
.dl-robot--auth .dl-robot-arm.right { transform: rotate(14deg); }
@media (max-width: 760px) {
  .dl-robot--auth { display: none; }
}

/* Fixed to the viewport (not the narrow centered search column) so it sits
   in the open gutter beside the content instead of overlapping it. */
.dl-robot--search {
  position: fixed;
  right: 2.5vw; left: auto; top: 96px; bottom: auto;
  width: clamp(160px, 18vw, 230px); height: clamp(210px, 24vw, 300px);
  opacity: .85;
  z-index: 0;
  --dl-tilt: 2deg;
}
.dl-robot--search .dl-robot-arm.left  { transform: rotate(-24deg); }
.dl-robot--search .dl-robot-arm.right { transform: rotate(16deg); }
@media (max-width: 760px) {
  .dl-robot--search { display: none; }
}

.dl-robot--auth .dl-robot-hit,
.dl-robot--search .dl-robot-hit {
  pointer-events: none;
}


/* The head is a pure 3D-rotation container — no background/clipping of
   its own, so children (antenna, shell) all turn together as one solid
   piece instead of the antenna staying frozen in place. */
.dl-robot-head {
  position: absolute; top: 0; left: 50%;
  width: 42%; height: 32%; margin-left: -21%;
  transform-origin: 50% 92%;
  transform-style: preserve-3d;
  z-index: 1;
  will-change: transform;
}
.dl-robot-head-shell {
  position: absolute; inset: 0;
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(155deg, #8fb3d9 0%, #3d5b85 35%, #182536 75%, #000 100%);
  box-shadow: inset 0 -16px 26px rgba(0,0,0,.6), 0 18px 36px rgba(0,0,0,.45), 0 0 30px rgba(61,214,255,.18);
  overflow: hidden;
}

/* Round "ear pod" details on either side of the head — the chibi-robot
   headphone-like silhouette that reads instantly as a friendly mascot. */
.dl-robot-ear {
  position: absolute; top: 28%; width: 14%; height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8fb3d9, #2a3a52 60%, #000 100%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.06), 0 6px 14px rgba(0,0,0,.4), 0 0 12px rgba(124,58,237,.25);
  z-index: 0;
}
.dl-robot-ear::after {
  content: '';
  position: absolute; inset: 26%;
  border-radius: 50%;
  background: radial-gradient(circle, #c4b5fd, #7c3aed 60%, transparent 100%);
  opacity: .65;
  animation: dlRobotPulse 2.6s ease-in-out infinite;
}
.dl-robot-ear.l { left: -7%; }
.dl-robot-ear.r { right: -7%; }

/* Twin antennas, splayed outward — now children of the head, so they
   turn/nod together with it instead of staying frozen in place. */
.dl-robot-antenna {
  position: absolute; top: -20%; width: 3px; height: 22%;
  background: linear-gradient(180deg, #5b7a9c, #121a24);
  border-radius: 2px;
  z-index: 1;
  transform-origin: 50% 100%;
  animation: dlAntennaSway 3.6s ease-in-out infinite;
}
.dl-robot-antenna.l { left: 28%; }
.dl-robot-antenna.r { left: 72%; animation-name: dlAntennaSwayR; }
.dl-robot-antenna-tip {
  position: absolute; top: -5px; left: 50%; width: 8px; height: 8px;
  margin-left: -4px; border-radius: 50%;
  background: radial-gradient(circle, #fbcfe8, #ec4899 60%, #be185d);
  box-shadow: 0 0 10px 3px rgba(236,72,153,.85);
  animation: dlRobotPulse 2.6s ease-in-out infinite;
}
@keyframes dlAntennaSway {
  0%, 100% { transform: rotate(-16deg); }
  50%      { transform: rotate(-8deg); }
}
@keyframes dlAntennaSwayR {
  0%, 100% { transform: rotate(16deg); }
  50%      { transform: rotate(8deg); }
}

/* Glossy chrome highlight streak, like polished metal */
.dl-robot-head-shell::before {
  content: '';
  position: absolute; top: -10%; left: -30%; width: 60%; height: 140%;
  background: linear-gradient(75deg, transparent 35%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.1) 60%, transparent 70%);
  transform: rotate(8deg);
  animation: dlSheen 6s ease-in-out infinite;
}
@keyframes dlSheen {
  0%, 100% { transform: rotate(8deg) translateX(0); }
  50%      { transform: rotate(8deg) translateX(18%); }
}
.dl-robot-head-shell::after {
  content: '';
  position: absolute; bottom: 0; left: 10%; right: 10%; height: 30%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.05), transparent 75%);
}
.dl-robot-visor {
  position: absolute; top: 28%; left: 50%; transform: translateX(-50%);
  width: 88%; height: 46%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #0a0a10 0%, #131a26 70%);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06);
  overflow: hidden;
}
/* Faint scrolling scan-lines behind the eyes — the "digital HUD display"
   look instead of a plain dark socket. */
.dl-robot-visor-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(61,214,255,.08) 0 1px, transparent 1px 4px);
  animation: dlScanScroll 2.4s linear infinite;
  opacity: .7;
}
@keyframes dlScanScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(8px); }
}
.dl-robot-eyes {
  position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 18%;
}
.dl-robot-eye {
  position: relative;
  width: 25px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 28%, #ecfeff, #3dd6ff 42%, #1672a3 100%);
  box-shadow: 0 0 18px 5px rgba(61,214,255,1), 0 0 32px 8px rgba(61,214,255,.4), inset 0 0 4px rgba(0,0,0,.35);
  animation: dlRobotBlink 5.4s ease-in-out infinite;
}
.dl-robot-eye.r { animation-delay: .12s; }
.dl-robot-pupil {
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 65% 65%, #2a3a52, #000 80%);
  transition: transform .08s linear;
}
.dl-robot-pupil::after {
  content: '';
  position: absolute; top: 14%; left: 50%; width: 32%; height: 32%;
  margin-left: -16%;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
}
.dl-robot-mouth {
  position: absolute; bottom: 16%; left: 50%; transform: translateX(-50%);
  width: 20%; height: 6px;
  border-radius: 0 0 10px 10px;
  border-bottom: 2px solid rgba(61,214,255,.6);
  border-left: 2px solid rgba(61,214,255,.35);
  border-right: 2px solid rgba(61,214,255,.35);
}

@keyframes dlRobotBlink {
  0%, 90%, 100% { opacity: 1; transform: scaleY(1); }
  94% { opacity: .85; transform: scaleY(.15); }
}

.dl-robot-neck {
  position: absolute; top: 33%; left: 50%; width: 7%; height: 6%; margin-left: -3.5%;
  transform-origin: 50% 100%;
  will-change: transform;
  background: linear-gradient(180deg, #5a7290 0%, #2a3a4f 55%, #121a26 100%);
  border-radius: 30% 30% 18% 18%;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.12), inset 0 -4px 6px rgba(0,0,0,.55);
  z-index: 0;
}

.dl-robot-body {
  position: absolute; top: 41%; left: 50%; width: 56%; height: 42%; margin-left: -28%;
  border-radius: 34% 34% 40% 40%;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 5px),
    linear-gradient(165deg, #5d7aa3 0%, #243349 55%, #131a26 100%);
  box-shadow: inset 0 16px 26px rgba(255,255,255,.08), inset 0 -22px 34px rgba(0,0,0,.6), 0 20px 40px rgba(0,0,0,.35), 0 0 26px rgba(124,58,237,.16);
}
.dl-robot-body::after {
  content: '';
  position: absolute; top: 16%; left: 50%; width: 22%; height: 16%; margin-left: -11%;
  border-radius: 50%; background: radial-gradient(circle, rgba(61,214,255,.55), transparent 70%);
  animation: dlRobotPulse 2.6s ease-in-out infinite;
}
@keyframes dlRobotPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Glowing chest emblem — the brand mark, lit up like the reference's
   armor-plate logo badge. */
.dl-robot-emblem {
  position: absolute; top: 38%; left: 50%; transform: translateX(-50%);
  width: 26%; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 6px;
  background: linear-gradient(155deg, rgba(124,58,237,.25), rgba(0,0,0,.45));
  box-shadow: inset 0 0 0 1px rgba(61,214,255,.4), 0 0 14px rgba(124,58,237,.35);
  color: #3dd6ff;
  font: 800 13px/1 'Inter', sans-serif;
  text-shadow: 0 0 10px rgba(61,214,255,1);
  animation: dlRobotPulse 2.6s ease-in-out infinite;
}

.dl-robot-arm {
  position: absolute; top: 38%; width: 13%; height: 34%;
  border-radius: 40%;
  background: linear-gradient(160deg, #4a6b8a, #16202e);
  box-shadow: inset 0 0 10px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.3);
  transform-origin: 50% 8%;
  transition: transform .4s cubic-bezier(.34,1.4,.4,1);
}
.dl-robot-arm.left  { left: 3%;  transform: rotate(38deg); animation: dlArmSway 4s ease-in-out infinite; }
.dl-robot-arm.right { right: 3%; transform: rotate(-34deg); }
@keyframes dlArmSway {
  0%, 100% { transform: rotate(38deg); }
  50%      { transform: rotate(26deg); }
}
/* Joint circles at the shoulder/knee — the visible articulation points
   that read instantly as "robot" in the reference pose. */
.dl-robot-joint {
  position: absolute; top: -6%; left: 50%; width: 70%; aspect-ratio: 1;
  margin-left: -35%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b8aab, #2a3a52 60%, #000 100%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.05), 0 3px 6px rgba(0,0,0,.45);
  z-index: 1;
}
/* Pauldron: a bigger, armor-plate take on the same joint, like the
   shoulder-guard discs in the reference. */
.dl-robot-joint.pauldron {
  top: -22%; width: 125%; margin-left: -62%;
  background: radial-gradient(circle at 32% 28%, #6b8aab, #2a3a4f 55%, #000 100%);
  box-shadow: 0 0 0 2px rgba(61,214,255,.18), inset 0 0 0 1px rgba(255,255,255,.06), 0 4px 8px rgba(0,0,0,.5);
}
.dl-robot-joint.pauldron::after {
  content: '';
  position: absolute; inset: 28%;
  border-radius: 50%;
  background: rgba(61,214,255,.12);
  box-shadow: inset 0 0 0 1px rgba(61,214,255,.25);
}
.dl-robot-joint.knee { top: 38%; width: 90%; margin-left: -45%; }
.dl-robot-hand {
  position: absolute; bottom: -6%; left: 50%; width: 32%; height: 17%; margin-left: -16%;
  border-radius: 50%;
  background: linear-gradient(155deg, #527097, #16202e);
  box-shadow: 0 0 0 4px rgba(61,214,255,.12), 0 6px 12px rgba(0,0,0,.4);
}
/* Chunky articulated fingers, fanned out from the bottom of the hand —
   the reference's hands are clearly fingered, not a plain mitten ball. */
.dl-robot-finger {
  position: absolute; bottom: -36%; width: 22%; height: 46%;
  border-radius: 40% 40% 50% 50%;
  background: linear-gradient(180deg, #3c5878, #121a24);
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
  transform-origin: 50% 0%;
}
.dl-robot-finger:nth-child(1) { left: 6%;  transform: rotate(-18deg); }
.dl-robot-finger:nth-child(2) { left: 30%; transform: rotate(-6deg); }
.dl-robot-finger:nth-child(3) { left: 54%; transform: rotate(6deg); }
.dl-robot-finger:nth-child(4) { left: 76%; transform: rotate(18deg); height: 38%; }

.dl-robot-legs {
  position: absolute; bottom: 0; left: 50%; width: 36%; height: 14%; margin-left: -18%;
  display: flex; justify-content: space-between;
}
.dl-robot-leg {
  position: relative;
  width: 42%; height: 100%; border-radius: 30% 30% 50% 50%;
  background: linear-gradient(180deg, #3c5878, #131a26);
  box-shadow: 0 8px 14px rgba(0,0,0,.4);
}

/* Pulsing energy ring at the feet, plus a few rising spark particles */
.dl-robot-ring {
  position: absolute; bottom: -4%; left: 50%; width: 70%; height: 14%; margin-left: -35%;
  border-radius: 50%;
  border: 1px solid rgba(61,214,255,.35);
  animation: dlRingPulse 2.8s ease-out infinite;
}
@keyframes dlRingPulse {
  0%   { transform: scale(.7); opacity: .8; }
  100% { transform: scale(1.5); opacity: 0; }
}
.dl-robot-particles span {
  position: absolute; bottom: 6%; width: 5px; height: 5px; border-radius: 50%;
  background: #3dd6ff; box-shadow: 0 0 6px 2px rgba(61,214,255,.7);
  animation: dlParticleRise 3.4s ease-in infinite;
  opacity: 0;
}
.dl-robot-particles span:nth-child(1) { left: 28%; animation-delay: 0s; }
.dl-robot-particles span:nth-child(2) { left: 52%; animation-delay: 1.1s; }
.dl-robot-particles span:nth-child(3) { left: 70%; animation-delay: 2.2s; }
@keyframes dlParticleRise {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  15%  { opacity: .9; }
  100% { transform: translateY(-130%) scale(1.1); opacity: 0; }
}

/* Ripple shown at the exact click point */
.dl-robot-ripple {
  position: fixed; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #3dd6ff; pointer-events: none; z-index: 99997;
  transform: translate(-50%,-50%) scale(0.4); opacity: .9;
  animation: dlRippleOut .55s ease-out forwards;
}
@keyframes dlRippleOut {
  to { transform: translate(-50%,-50%) scale(2.6); opacity: 0; }
}

@media (max-width: 820px) {
  .dl-robot { opacity: .4; }
}

/* Soft cyan rim-light on the figure itself — kept on in every theme so the
   robot always reads as "alive", just tuned brighter against a near-black
   page than against a white one. */
.dl-robot-head-shell,
.dl-robot-body,
.dl-robot-arm,
.dl-robot-leg {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 26px rgba(61,214,255,.14);
}
.dl-robot { filter: drop-shadow(0 22px 30px rgba(61,214,255,.18)); }

html[data-theme="dark"] .dl-robot-head-shell,
html[data-theme="dark"] .dl-robot-body,
html[data-theme="dark"] .dl-robot-arm,
html[data-theme="dark"] .dl-robot-leg {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 40px rgba(61,214,255,.16);
}
html[data-theme="dark"] .dl-robot { opacity: 1; filter: drop-shadow(0 22px 34px rgba(61,214,255,.22)); }
html[data-theme="dark"] .dl-robot-ring { border-color: rgba(61,214,255,.55); }
html[data-theme="dark"].theme-neon .dl-robot-head-shell,
html[data-theme="dark"].theme-neon .dl-robot-body,
html[data-theme="dark"].theme-neon .dl-robot-arm,
html[data-theme="dark"].theme-neon .dl-robot-leg {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 0 46px rgba(61,214,255,.32);
}
html[data-theme="dark"].theme-neon .dl-robot { filter: drop-shadow(0 22px 38px rgba(61,214,255,.4)); }
html[data-theme="dark"].theme-neon .dl-robot-ring { border-color: rgba(61,214,255,.8); }