/* =========================================================
   HERO HOLOGRAM — floating glass ID card, no phone mockup
   ========================================================= */

.hero-holo-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:640px;
  margin-inline:auto;
  perspective:1600px;
  perspective-origin:50% 40%;
  z-index:2;
  padding-block:1rem;
  overflow:visible;
}

/* ---------- Ambient aurora behind everything ---------- */
.hero-holo-aurora{
  contain:paint;
  position:absolute;
  inset:-22% -16%;
  z-index:0;
  pointer-events:none;
  /* cheaper soft glow — same look, lower fill-rate cost than large blur */
  filter:blur(22px) saturate(1.4);
  opacity:1;
  background:
    radial-gradient(40% 36% at 22% 20%, color-mix(in srgb, var(--primary) 68%, transparent), transparent 70%),
    radial-gradient(36% 32% at 80% 26%, color-mix(in srgb, var(--wave) 62%, transparent), transparent 68%),
    radial-gradient(46% 42% at 64% 80%, color-mix(in srgb, var(--highlight) 58%, transparent), transparent 70%),
    radial-gradient(34% 30% at 12% 82%, color-mix(in srgb, var(--pink) 46%, transparent), transparent 65%);
  animation:holo-aurora-drift 11s ease-in-out infinite;
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}
@keyframes holo-aurora-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1); opacity:.85}
  33%{transform:translate3d(2%,-3%,0) scale(1.07); opacity:1}
  66%{transform:translate3d(-3%,2%,0) scale(1.03); opacity:.9}
}

/* ---------- Faint rotating radial grid for depth ---------- */
.hero-holo-grid{
  position:absolute;
  inset:6% 10%;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  opacity:.35;
  background-image:
    repeating-radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary) 22%, transparent) 0 1px, transparent 1px 46px),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--wave) 14%, transparent) 0deg .6deg, transparent .6deg 30deg);
  mask-image:radial-gradient(circle at 50% 50%, black 0%, transparent 72%);
  animation:holo-grid-spin 40s linear infinite;
  will-change:transform;
  transform:translateZ(0);
  contain:paint;
}
@keyframes holo-grid-spin{to{transform:rotate(360deg)}}

/* ---------- Drifting particles ---------- */
.hero-holo-particles{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  contain:strict;
}
.hero-holo-particles span{
  position:absolute;
  bottom:-6%;
  right:var(--x, 50%);
  width:var(--size, 4px);
  height:var(--size, 4px);
  border-radius:50%;
  background:color-mix(in srgb, var(--wave) 70%, white);
  /* no box-shadow — glow via slightly larger size + opacity keeps look, saves GPU */
  opacity:0;
  animation:holo-particle-rise var(--dur, 10s) ease-in var(--delay, 0s) infinite;
  will-change:transform, opacity;
  transform:translateZ(0);
}
.hero-holo-particles span:nth-child(3n){ background:color-mix(in srgb, var(--highlight) 75%, white); }
.hero-holo-particles span:nth-child(4n){ background:color-mix(in srgb, var(--pink) 75%, white); }
@keyframes holo-particle-rise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  8%{ opacity:.9; }
  50%{ transform:translateY(-220px) translateX(10px); opacity:.7; }
  92%{ opacity:0; }
  100%{ transform:translateY(-380px) translateX(-6px); opacity:0; }
}

/* ---------- Orbiting rings ---------- */
.hero-holo-orbit{
  position:absolute;
  z-index:1;
  top:50%;
  left:50%;
  border-radius:50%;
  border:1.5px dashed color-mix(in srgb, var(--wave) 45%, transparent);
  pointer-events:none;
  transform-style:preserve-3d;
}
.orbit-1{
  width:min(460px, 92%);
  height:min(460px, 92%);
  margin:calc(min(460px, 92%) / -2) 0 0 calc(min(460px, 92%) / -2);
  border-width:1.5px;
  border-color:color-mix(in srgb, var(--wave) 60%, transparent);
  transform:rotateX(72deg) rotateZ(0deg);
  animation:holo-orbit-spin 18s linear infinite;
}
.orbit-2{
  width:min(360px, 76%);
  height:min(360px, 76%);
  margin:calc(min(360px, 76%) / -2) 0 0 calc(min(360px, 76%) / -2);
  border-color:color-mix(in srgb, var(--highlight) 55%, transparent);
  transform:rotateX(72deg) rotateZ(0deg);
  animation:holo-orbit-spin 26s linear infinite reverse;
}
@keyframes holo-orbit-spin{to{transform:rotateX(72deg) rotateZ(360deg)}}
.orbit-dot{
  position:absolute;
  top:-4px;
  right:calc(50% - 4px);
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--wave);
  box-shadow:0 0 10px 3px color-mix(in srgb, var(--wave) 80%, transparent);
}
.orbit-2 .orbit-dot{ background:var(--highlight); box-shadow:0 0 10px 3px color-mix(in srgb, var(--highlight) 75%, transparent); }

/* ---------- Floor shadow ---------- */
.hero-holo-shadow{
  position:absolute;
  left:50%;
  bottom:2%;
  width:70%;
  height:34px;
  margin-left:-35%;
  background:radial-gradient(ellipse, rgba(10,15,28,.45), transparent 72%);
  /* soft edge without live blur filter */
  filter:none;
  z-index:0;
  animation:holo-shadow-breathe 6s ease-in-out infinite;
  transform:translateZ(0);
  will-change:transform, opacity;
}
@keyframes holo-shadow-breathe{
  0%,100%{opacity:.6; transform:scaleX(1)}
  50%{opacity:.35; transform:scaleX(.88)}
}

/* ---------- The tilting rig (pointer parallax lives here) ---------- */
.hero-holo-tilt{
  position:relative;
  z-index:3;
  width:min(560px, 96vw);
  height:min(560px, 82vh);
  transform-style:preserve-3d;
  transform:
    rotateY(calc(var(--holo-rx, 0deg)))
    rotateX(calc(var(--holo-ry, 0deg)))
    translateZ(0);
  will-change:transform;
  transition:transform .25s var(--ease-smooth, ease-out);
}

/* ---------- 3-card orbit carousel (JS-driven continuous 3D spin) ---------- */
.holo-carousel{
  position:relative;
  width:100%;
  height:100%;
  perspective:1400px;
  perspective-origin:50% 48%;
}
.holo-carousel-track{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
}
.holo-slide{
  position:absolute;
  top:50%;
  left:50%;
  width:min(240px, 58%);
  margin:0;
  transform-style:preserve-3d;
  transform-origin:center center;
  transform:translate(-50%, -50%);
  pointer-events:none;
  /* only compositor props — filter was removed from JS hot path */
  will-change:transform, opacity;
  backface-visibility:hidden;
  contain:layout style;
}
.holo-slide .hero-holo-card{
  width:100%;
  box-shadow:
    0 28px 60px rgba(5,8,20,.55),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 40px color-mix(in srgb, var(--wave) 35%, transparent);
}
/* Pure CSS coverflow — many steps for smooth continuous motion */
@keyframes holo-coverflow{
  0%{
    transform:translate(-50%, -50%) translate3d(0, 0, 90px) rotateY(0deg) scale(1);
    opacity:1; filter:brightness(1); z-index:5;
  }
  12.5%{
    transform:translate(-50%, -50%) translate3d(-100px, -2px, 40px) rotateY(14deg) scale(0.82);
    opacity:0.85; filter:brightness(0.92); z-index:4;
  }
  25%{
    transform:translate(-50%, -50%) translate3d(-145px, -2px, -20px) rotateY(22deg) scale(0.62);
    opacity:0.7; filter:brightness(0.85); z-index:3;
  }
  37.5%{
    transform:translate(-50%, -50%) translate3d(-100px, 4px, -70px) rotateY(12deg) scale(0.55);
    opacity:0.52; filter:brightness(0.76); z-index:2;
  }
  50%{
    transform:translate(-50%, -50%) translate3d(0, 8px, -110px) rotateY(0deg) scale(0.52);
    opacity:0.4; filter:brightness(0.7); z-index:1;
  }
  62.5%{
    transform:translate(-50%, -50%) translate3d(100px, 4px, -70px) rotateY(-12deg) scale(0.55);
    opacity:0.52; filter:brightness(0.76); z-index:2;
  }
  75%{
    transform:translate(-50%, -50%) translate3d(145px, -2px, -20px) rotateY(-22deg) scale(0.62);
    opacity:0.7; filter:brightness(0.85); z-index:3;
  }
  87.5%{
    transform:translate(-50%, -50%) translate3d(100px, -2px, 40px) rotateY(-14deg) scale(0.82);
    opacity:0.85; filter:brightness(0.92); z-index:4;
  }
  100%{
    transform:translate(-50%, -50%) translate3d(0, 0, 90px) rotateY(0deg) scale(1);
    opacity:1; filter:brightness(1); z-index:5;
  }
}
.holo-slide{
  animation:holo-coverflow 22s linear infinite;
}
.holo-slide:nth-child(1){ animation-delay:0s; }
.holo-slide:nth-child(2){ animation-delay:-14.666s; }
.holo-slide:nth-child(3){ animation-delay:-7.333s; }

/* When JS is driving, it sets data-js-carousel and kills CSS animation */
.holo-carousel[data-js-carousel] .holo-slide{
  animation:none !important;
}

/* ---------- The glass card itself ---------- */
.hero-holo-card{
  position:relative;
  transform-style:preserve-3d;
  border-radius:28px;
  padding:1.3rem 1.15rem 1.5rem;
  background:#0F1629;
  opacity:1;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background-color:#0F1629;
  box-shadow:
    0 28px 64px rgba(5,8,20,.5),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 1px 0 rgba(255,255,255,.14) inset,
    0 0 28px color-mix(in srgb, var(--wave) 22%, transparent);
  color:#F1F5F9;
  text-align:center;
  overflow:hidden;
  /* promote card to its own layer once; avoids repeated paints from parent 3D */
  transform:translateZ(0);
  contain:layout style paint;
  backface-visibility:hidden;
}

/* animated iridescent border — GPU-friendly rotate of a fixed conic instead of @property every frame */
.hero-holo-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from 0deg, var(--wave), var(--highlight), var(--pink), var(--primary), var(--wave));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.85;
  animation:holo-border-spin 6s linear infinite;
  pointer-events:none;
  z-index:5;
  will-change:transform;
  transform:translateZ(0);
}
@keyframes holo-border-spin{to{transform:rotate(360deg)}}




/* diagonal light sweep — removed */
.hero-holo-sweep{
  display:none !important;
}

/* top bar */
.hero-holo-topbar{
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.9rem;
  padding:0 2px;
}
.holo-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.02em;
  color:#C7D2FE;
}
.holo-live i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#34D399;
  box-shadow:0 0 8px 2px rgba(52,211,153,.7);
  animation:holo-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes holo-pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.holo-qr{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(226,232,240,.85);
}
.holo-qr svg{width:22px;height:22px}

/* card body reuses hero-card-ui / hero-info-row / hero-action-btn / hero-map-btn from hero-3d-phone (kept) */
.hero-holo-card .hero-card-ui{
  position:relative;
  z-index:4;
  padding:0;
  background:none;
  color:inherit;
}
.hero-holo-card .hero-avatar-wrap{ margin-top:0; }
.hero-avatar-ring{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:conic-gradient(var(--wave), var(--highlight), var(--pink), var(--primary), var(--wave));
  z-index:0;
  filter:none;
  animation:holo-ring-spin 4.5s linear infinite;
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}
@keyframes holo-ring-spin{to{transform:rotate(360deg)}}
.hero-holo-card .hero-avatar{
  position:relative;
  z-index:1;
  border:3px solid #0B0D14;
}
.hero-holo-card .hero-verified{ z-index:2; }
.holo-role{
  font-size:.76rem;
  font-weight:600;
  color:rgba(226,232,240,.65);
  margin:-2px 0 12px;
}

/* ---------- Floating glass chips ---------- */
.hero-holo-chip{
  position:absolute;
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.5rem .75rem;
  border-radius:999px;
  font-size:.68rem;
  font-weight:800;
  color:#F1F5F9;
  background:rgba(18,22,38,.62);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 26px rgba(5,8,20,.4);
  white-space:nowrap;
  transform:translateZ(60px);
}
.hero-holo-chip svg{ width:13px; height:13px; flex-shrink:0; }
.chip-link{ top:-5%; left:-10%; color:#A7F3D0; animation:holo-chip-float 5s ease-in-out infinite; }
.chip-link svg{ stroke:#34D399; }
.chip-share{ bottom:-3%; right:-12%; color:#BFDBFE; animation:holo-chip-float 5.6s ease-in-out .6s infinite; }
.chip-share svg{ stroke:#60A5FA; }

.chip-map{
  bottom:6%;
  left:-16%;
  color:#FDE68A;
  opacity:0;
  transform:translateZ(60px) scale(.6);
  animation:chip-appear-map 9s ease-in-out infinite;
}
.chip-map svg{ stroke:#FBBF24; filter:drop-shadow(0 0 6px rgba(251,191,36,.55)); }
.chip-call{
  top:18%;
  right:-20%;
  color:#BFDBFE;
  opacity:0;
  transform:translateZ(60px) scale(.6);
  animation:chip-appear-call 9s ease-in-out infinite;
}
.chip-call svg{ stroke:#60A5FA; filter:drop-shadow(0 0 6px rgba(96,165,250,.55)); }
.chip-email{
  top:12%;
  left:-18%;
  color:#E9D5FF;
  opacity:0;
  transform:translateZ(60px) scale(.6);
  animation:chip-appear-email 9s ease-in-out infinite;
}
.chip-email svg{ stroke:#A78BFA; filter:drop-shadow(0 0 6px rgba(167,139,250,.55)); }
@keyframes holo-chip-float{
  0%,100%{transform:translateZ(60px) translateY(0)}
  50%{transform:translateZ(60px) translateY(-9px)}
}

/* ========== Action fly-outs (origins set by JS on buttons) ========== */
.hero-action-flyouts{
  position:absolute;
  z-index:8;
  inset:0;
  pointer-events:none;
  transform-style:preserve-3d;
  perspective:1000px;
  contain:layout style;
}
.fly-rig{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  transform-style:preserve-3d;
  opacity:0;
  will-change:transform, opacity;
}
.fly-shadow{
  position:absolute;
  left:50%; top:50%;
  width:30px; height:10px;
  margin:-2px 0 0 -15px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(10,15,28,.5), transparent 72%);
  filter:blur(3px);
  transform:translateZ(-24px) rotateX(78deg);
  pointer-events:none;
}
.fly-orb{
  position:absolute;
  left:50%; top:50%;
  width:30px; height:30px;
  margin:-15px 0 0 -15px;
  transform-style:preserve-3d;
}
.fly-face{
  position:absolute; inset:0;
  border-radius:50%;
  display:grid; place-items:center;
  transform:translateZ(8px);
  backface-visibility:hidden;
}
.fly-face svg{ width:15px; height:15px; stroke:#0B1220; fill:none; }
.fly-glow{
  position:absolute; inset:-12px;
  border-radius:50%;
  filter:blur(2px);
  transform:translateZ(0);
}
.fly-rim{
  position:absolute; inset:-3px;
  border-radius:50%;
  transform:translateZ(3px);
}
.fly-trail{
  position:absolute;
  left:50%; top:50%;
  width:6px; height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}

/* --- MAP: gold pin, exits down-left from map button --- */
.fly-map{ animation:fly-path-map 9s cubic-bezier(.22,1,.36,1) infinite; }
.fly-orb-map{ animation:fly-spin-map 9s cubic-bezier(.22,1,.36,1) infinite; }
.fly-orb-map .fly-face{
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), transparent 42%),
    linear-gradient(145deg, #FCD34D, #FBBF24 45%, #F59E0B 80%, #D97706);
  box-shadow:0 0 0 2px rgba(255,255,255,.2) inset, 0 8px 20px rgba(245,158,11,.5), 0 0 28px rgba(251,191,36,.4);
}
.fly-orb-map .fly-glow{ background:radial-gradient(circle, rgba(251,191,36,.55), transparent 70%); }
.fly-orb-map .fly-rim{ border:1.5px solid rgba(251,191,36,.55); box-shadow:0 0 14px rgba(251,191,36,.35); }
.fly-map .fly-trail{ background:radial-gradient(circle, #FDE68A, #FBBF24 55%, transparent); box-shadow:0 0 8px 2px rgba(251,191,36,.5); }
.fly-map .ft1{ animation:fly-trail-map-1 9s ease-out infinite; }
.fly-map .ft2{ animation:fly-trail-map-2 9s ease-out infinite; width:4px; height:4px; margin:-2px 0 0 -2px; }

@keyframes fly-path-map{
  0%, 4%{ opacity:0; transform:translate3d(0,0,16px) scale(.25); }
  8%{ opacity:1; transform:translate3d(0,0,42px) scale(1.05); }
  14%{ opacity:1; transform:translate3d(0,-4px,52px) scale(1); }
  28%{ opacity:1; transform:translate3d(-55px, 28px, 120px) scale(1.12); }
  40%{ opacity:1; transform:translate3d(-105px, 52px, 135px) scale(1.05); }
  50%{ opacity:.35; transform:translate3d(-125px, 58px, 80px) scale(.6); }
  56%, 100%{ opacity:0; transform:translate3d(-128px, 56px, 50px) scale(.3); }
}
@keyframes fly-spin-map{
  0%, 6%{ transform:rotateX(0) rotateY(0) rotateZ(0); }
  20%{ transform:rotateX(35deg) rotateY(-50deg) rotateZ(-14deg); }
  38%{ transform:rotateX(20deg) rotateY(-120deg) rotateZ(10deg); }
  52%, 100%{ transform:rotateX(0) rotateY(-175deg) rotateZ(0); }
}
@keyframes fly-trail-map-1{
  0%, 12%{ opacity:0; transform:translate3d(0,0,30px) scale(.3); }
  22%{ opacity:.9; transform:translate3d(12px,-2px,20px) scale(1); }
  38%{ opacity:.4; transform:translate3d(32px,12px,0) scale(.5); }
  48%, 100%{ opacity:0; transform:translate3d(40px,18px,-8px) scale(.2); }
}
@keyframes fly-trail-map-2{
  0%, 16%{ opacity:0; transform:translate3d(0,0,20px) scale(.25); }
  26%{ opacity:.7; transform:translate3d(18px,4px,10px) scale(.85); }
  42%{ opacity:.2; transform:translate3d(40px,16px,-6px) scale(.35); }
  52%, 100%{ opacity:0; }
}
@keyframes chip-appear-map{
  0%, 36%{ opacity:0; transform:translateZ(50px) translateY(6px) scale(.5) rotateY(-12deg); }
  46%{ opacity:1; transform:translateZ(80px) translateY(0) scale(1.08) rotateY(4deg); }
  58%, 72%{ opacity:1; transform:translateZ(68px) translateY(-5px) scale(1); }
  82%{ opacity:.95; transform:translateZ(64px) translateY(-6px) scale(.98); }
  90%{ opacity:.7; transform:translateZ(55px) translateY(-4px) scale(.88); }
  96%{ opacity:.3; transform:translateZ(48px) translateY(-2px) scale(.75); }
  100%{ opacity:0; transform:translateZ(42px) scale(.6); }
}

/* --- CALL: sky-blue phone, bounce arc up-right --- */
.fly-call{ animation:fly-path-call 9s cubic-bezier(.34,1.4,.64,1) infinite; }
.fly-orb-call{ animation:fly-spin-call 9s ease-in-out infinite; }
.fly-orb-call .fly-face{
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.5), transparent 40%),
    linear-gradient(145deg, #93C5FD, #60A5FA 50%, #3B82F6 85%, #2563EB);
  box-shadow:0 0 0 2px rgba(255,255,255,.22) inset, 0 8px 20px rgba(59,130,246,.5), 0 0 26px rgba(96,165,250,.45);
}
.fly-orb-call .fly-glow{ background:radial-gradient(circle, rgba(96,165,250,.55), transparent 70%); }
.fly-orb-call .fly-rim{ border:1.5px solid rgba(96,165,250,.55); box-shadow:0 0 14px rgba(59,130,246,.4); }
.fly-ring{
  position:absolute;
  left:50%; top:50%;
  width:40px; height:40px;
  margin:-20px 0 0 -20px;
  border-radius:50%;
  border:2px solid rgba(96,165,250,.55);
  opacity:0;
  transform:translateZ(2px) scale(.5);
  animation:fly-ring-pulse 9s ease-out infinite;
}
@keyframes fly-path-call{
  0%, 8%{ opacity:0; transform:translate3d(0,0,16px) scale(.2); }
  14%{ opacity:1; transform:translate3d(0,0,40px) scale(1.1); }
  20%{ opacity:1; transform:translate3d(8px,-18px,70px) scale(1); }
  32%{ opacity:1; transform:translate3d(48px,-72px,130px) scale(1.18); }
  40%{ opacity:1; transform:translate3d(70px,-58px,145px) scale(1.05); }
  48%{ opacity:.9; transform:translate3d(95px,-85px,110px) scale(.95); }
  56%{ opacity:.3; transform:translate3d(110px,-92px,70px) scale(.55); }
  62%, 100%{ opacity:0; transform:translate3d(115px,-95px,45px) scale(.25); }
}
@keyframes fly-spin-call{
  0%, 12%{ transform:rotateX(0) rotateY(0) rotateZ(0); }
  28%{ transform:rotateX(-25deg) rotateY(40deg) rotateZ(18deg); }
  42%{ transform:rotateX(15deg) rotateY(95deg) rotateZ(-8deg); }
  55%, 100%{ transform:rotateX(0) rotateY(160deg) rotateZ(12deg); }
}
@keyframes fly-ring-pulse{
  0%, 12%{ opacity:0; transform:translateZ(2px) scale(.4); }
  18%{ opacity:.9; transform:translateZ(4px) scale(1); }
  30%{ opacity:.4; transform:translateZ(6px) scale(1.6); }
  40%, 100%{ opacity:0; transform:translateZ(2px) scale(2.1); }
}
@keyframes chip-appear-call{
  0%, 40%{ opacity:0; transform:translateZ(50px) translateY(10px) scale(.5) rotateX(12deg); }
  50%{ opacity:1; transform:translateZ(85px) translateY(0) scale(1.1) rotateX(0); }
  62%, 76%{ opacity:1; transform:translateZ(70px) translateY(-6px) scale(1); }
  84%{ opacity:.95; transform:translateZ(64px) translateY(-5px) scale(.98); }
  91%{ opacity:.7; transform:translateZ(55px) translateY(-3px) scale(.88); }
  96%{ opacity:.3; transform:translateZ(47px) translateY(-1px) scale(.75); }
  100%{ opacity:0; transform:translateZ(40px) scale(.6); }
}

/* --- EMAIL: violet envelope, flutter up-left --- */
.fly-email{ animation:fly-path-email 9s cubic-bezier(.22,.8,.36,1) infinite; }
.fly-orb-email{ animation:fly-spin-email 9s ease-in-out infinite; }
.fly-orb-email .fly-face{
  border-radius:10px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.5), transparent 42%),
    linear-gradient(145deg, #C4B5FD, #A78BFA 48%, #8B5CF6 82%, #7C3AED);
  box-shadow:0 0 0 2px rgba(255,255,255,.2) inset, 0 8px 20px rgba(139,92,246,.5), 0 0 26px rgba(167,139,250,.4);
}
.fly-orb-email .fly-glow{ background:radial-gradient(circle, rgba(167,139,250,.55), transparent 70%); border-radius:14px; }
.fly-orb-email .fly-rim{ border-radius:12px; border:1.5px solid rgba(167,139,250,.5); box-shadow:0 0 14px rgba(139,92,246,.35); }
.fly-spark{
  position:absolute;
  left:50%; top:50%;
  width:5px; height:5px;
  margin:-2.5px 0 0 -2.5px;
  border-radius:50%;
  background:#E9D5FF;
  box-shadow:0 0 8px 2px rgba(167,139,250,.6);
  opacity:0;
}
.fly-spark.s1{ animation:fly-spark-1 9s ease-out infinite; }
.fly-spark.s2{ animation:fly-spark-2 9s ease-out infinite; }
.fly-spark.s3{ animation:fly-spark-3 9s ease-out infinite; }
@keyframes fly-path-email{
  0%, 18%{ opacity:0; transform:translate3d(0,0,14px) scale(.2); }
  24%{ opacity:1; transform:translate3d(0,0,38px) scale(1.08); }
  30%{ opacity:1; transform:translate3d(-10px,-22px,65px) scale(1); }
  38%{ opacity:1; transform:translate3d(-42px,-55px,115px) scale(1.12) rotateZ(-8deg); }
  46%{ opacity:1; transform:translate3d(-28px,-78px,140px) scale(1.05) rotateZ(10deg); }
  54%{ opacity:.9; transform:translate3d(-75px,-100px,120px) scale(.95) rotateZ(-6deg); }
  62%{ opacity:.3; transform:translate3d(-95px,-112px,75px) scale(.5); }
  68%, 100%{ opacity:0; transform:translate3d(-100px,-115px,45px) scale(.25); }
}
@keyframes fly-spin-email{
  0%, 22%{ transform:rotateX(0) rotateY(0) rotateZ(0); }
  36%{ transform:rotateX(50deg) rotateY(-35deg) rotateZ(-20deg); }
  48%{ transform:rotateX(-20deg) rotateY(-80deg) rotateZ(25deg); }
  60%, 100%{ transform:rotateX(10deg) rotateY(-150deg) rotateZ(-5deg); }
}
@keyframes fly-spark-1{
  0%, 26%{ opacity:0; transform:translate3d(0,0,20px) scale(.3); }
  34%{ opacity:1; transform:translate3d(14px,8px,10px) scale(1); }
  48%{ opacity:.3; transform:translate3d(28px,22px,-5px) scale(.4); }
  56%, 100%{ opacity:0; }
}
@keyframes fly-spark-2{
  0%, 30%{ opacity:0; transform:translate3d(0,0,15px) scale(.25); }
  38%{ opacity:.85; transform:translate3d(-12px,14px,5px) scale(.9); }
  52%{ opacity:.2; transform:translate3d(-22px,30px,-10px) scale(.3); }
  60%, 100%{ opacity:0; }
}
@keyframes fly-spark-3{
  0%, 34%{ opacity:0; transform:translate3d(0,0,10px) scale(.2); }
  42%{ opacity:.7; transform:translate3d(6px,18px,0) scale(.75); }
  55%{ opacity:.15; transform:translate3d(12px,34px,-12px) scale(.25); }
  62%, 100%{ opacity:0; }
}
@keyframes chip-appear-email{
  0%, 48%{ opacity:0; transform:translateZ(50px) translateY(8px) scale(.5) rotateZ(-8deg); }
  58%{ opacity:1; transform:translateZ(82px) translateY(0) scale(1.1) rotateZ(0); }
  68%, 80%{ opacity:1; transform:translateZ(68px) translateY(-7px) scale(1); }
  86%{ opacity:.95; transform:translateZ(62px) translateY(-5px) scale(.98); }
  92%{ opacity:.7; transform:translateZ(54px) translateY(-3px) scale(.88); }
  97%{ opacity:.3; transform:translateZ(46px) translateY(-1px) scale(.75); }
  100%{ opacity:0; transform:translateZ(40px) scale(.6); }
}

/* Button icon pulses synced to their fly-outs */
.hero-map-btn .map-btn-icon{
  transform-origin:center;
  animation:btn-pulse-map 9s ease-in-out infinite;
}
#heroCallBtn .action-btn-icon{
  transform-origin:center;
  animation:btn-pulse-call 9s ease-in-out infinite;
}
#heroEmailBtn .action-btn-icon{
  transform-origin:center;
  animation:btn-pulse-email 9s ease-in-out infinite;
}
@keyframes btn-pulse-map{
  0%, 4%{ transform:scale(1); filter:none; }
  8%, 12%{ transform:scale(1.28); filter:drop-shadow(0 0 8px rgba(251,191,36,.85)); }
  20%{ transform:scale(1); filter:none; }
  100%{ transform:scale(1); filter:none; }
}
@keyframes btn-pulse-call{
  0%, 10%{ transform:scale(1); filter:none; }
  14%, 18%{ transform:scale(1.3); filter:drop-shadow(0 0 8px rgba(96,165,250,.9)); }
  26%{ transform:scale(1); filter:none; }
  100%{ transform:scale(1); filter:none; }
}
@keyframes btn-pulse-email{
  0%, 20%{ transform:scale(1); filter:none; }
  24%, 28%{ transform:scale(1.3); filter:drop-shadow(0 0 8px rgba(167,139,250,.9)); }
  36%{ transform:scale(1); filter:none; }
  100%{ transform:scale(1); filter:none; }
}


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-holo-aurora,.hero-holo-grid,.hero-holo-particles span,.hero-holo-orbit,
  .hero-holo-shadow,.hero-holo-tilt,.hero-holo-card::before,.hero-holo-sweep,
  .holo-live i,.hero-holo-chip,.hero-avatar-ring,
  .fly-rig,.fly-orb,.fly-trail,.fly-ring,.fly-spark,.fly-shadow,
  .hero-map-btn .map-btn-icon,#heroCallBtn .action-btn-icon,#heroEmailBtn .action-btn-icon,
  .holo-slide{
    animation:none!important;
  }
  .hero-holo-tilt{ transform:none!important; }
  .holo-slide{
    transform:translate(-50%,-50%) scale(0.9);
    opacity:0;
    filter:none;
    pointer-events:none;
  }
  .holo-slide:first-child{
    opacity:1;
    transform:translate(-50%,-50%) translateZ(0) scale(1);
    z-index:3;
  }
  .chip-map,.chip-call,.chip-email{ opacity:.95; transform:translateZ(60px); }
  .hero-action-flyouts{ display:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-holo-stage{max-width:460px}
  .hero-holo-tilt{width:min(420px, 94vw); height:min(500px, 74vh)}
  .holo-slide{ width:min(220px, 62%); }
  .orbit-1{width:min(380px,88%)}
  .orbit-2{width:min(300px,74%)}
  .chip-map{ left:-12%; bottom:7%; }
  .chip-call{ right:-12%; }
  .chip-email{ left:-12%; }
}
@media (max-width:480px){
  .hero-holo-stage{max-width:360px; padding-block:.25rem}
  .hero-holo-tilt{width:min(360px, 96vw); height:min(480px, 72vh)}
  .holo-slide{ width:min(200px, 60%); }
  .hero-holo-card{padding:1.05rem .95rem 1.25rem; border-radius:24px}
  .hero-avatar,.hero-avatar-fallback{width:70px;height:70px}
  .hero-holo-card h3{font-size:1.1rem}
  .hero-holo-chip{font-size:.62rem; padding:.42rem .62rem}
  .chip-link{left:-3%}
  .chip-share{right:-3%}
  .chip-map{ left:-8%; bottom:6%; }
  .chip-call{ right:-8%; top:16%; }
  .chip-email{ left:-8%; top:10%; }
  .fly-orb{ width:26px; height:26px; margin:-13px 0 0 -13px; }
  .fly-face svg{ width:13px; height:13px; }
}

/* ---------- Light mode adjustments ---------- */
html:not(.dark) .hero-holo-card{
  background:#FFFFFF;
  background-color:#FFFFFF;
  opacity:1;
  border-color:rgba(15,23,42,.1);
  color:#0B1220;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:
    0 28px 60px rgba(15,23,42,.12),
    0 0 0 1px rgba(15,23,42,.06) inset;
}
html:not(.dark) .hero-holo-card .hero-avatar{ border-color:#F4F6FB; }
html:not(.dark) .holo-live{ color:#334155; }
html:not(.dark) .holo-role{ color:#5B6B7C; }
html:not(.dark) .holo-qr{
  background:rgba(15,23,42,.05);
  border-color:rgba(15,23,42,.08);
  color:#334155;
}
html:not(.dark) .hero-holo-chip{
  background:rgba(255,255,255,.85);
  border-color:rgba(148,163,184,.3);
  color:#0B1220;
  box-shadow:0 12px 26px rgba(15,23,42,.12);
}
html:not(.dark) .chip-map{
  color:#B45309;
  background:rgba(255,251,235,.92);
  border-color:rgba(251,191,36,.4);
}
html:not(.dark) .chip-map svg{ stroke:#D97706; }
html:not(.dark) .chip-call{
  color:#1D4ED8;
  background:rgba(239,246,255,.92);
  border-color:rgba(96,165,250,.4);
}
html:not(.dark) .chip-call svg{ stroke:#2563EB; }
html:not(.dark) .chip-email{
  color:#6D28D9;
  background:rgba(245,243,255,.92);
  border-color:rgba(167,139,250,.4);
}
html:not(.dark) .chip-email svg{ stroke:#7C3AED; }
html:not(.dark) .fly-shadow{
  background:radial-gradient(ellipse, rgba(15,23,42,.3), transparent 70%);
}
html:not(.dark) .hero-holo-shadow{
  background:radial-gradient(ellipse, rgba(15,23,42,.2), transparent 72%);
}

/* =========================================================
   Card content primitives (avatar / info rows / actions)
   ========================================================= */
.hero-3d-actions{ position:relative; z-index:2; width:100%; }
.hero-avatar-wrap{ position:relative; margin-bottom:10px; display:inline-block; }
.hero-avatar{
  width:82px; height:82px; border-radius:50%; object-fit:cover; display:block;
  box-shadow:0 12px 28px rgba(124,58,237,.3), 0 0 34px rgba(167,139,250,.18);
}
.hero-verified{
  position:absolute; bottom:0; left:0; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,#3B82F6,#2563EB); display:grid; place-items:center;
  border:2px solid #0B0D14; box-shadow:0 2px 8px rgba(37,99,235,.5);
}
html:not(.dark) .hero-verified{ border-color:#F4F6FB; }
.hero-verified svg{ width:12px; height:12px; fill:#fff; }

.hero-holo-card h3{
  font-size:1.28rem; font-weight:800; letter-spacing:-.02em; margin:0 0 2px; line-height:1.25;
}

.hero-info-list{ width:100%; display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.hero-info-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 11px; border-radius:11px;
  background:rgba(8,12,24,.55);
  border:1px solid rgba(255,255,255,.14);
  text-align:right;
}
.hero-info-row .info-label{ display:flex; align-items:center; gap:6px; font-size:.66rem; font-weight:600; color:rgba(241,245,249,.75); }
.hero-info-row .info-label svg{ width:14px; height:14px; stroke:#93C5FD; fill:none; stroke-width:1.8; flex-shrink:0; }
.hero-info-row .info-value{ font-size:.68rem; font-weight:700; color:#FFFFFF; white-space:nowrap; }

.hero-actions-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:100%; margin-bottom:9px; }
.hero-action-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:50px; border-radius:13px;
  background:rgba(8,12,24,.62);
  border:1px solid rgba(255,255,255,.16);
  color:#FFFFFF;
  font-family:inherit;
  font-size:.58rem; font-weight:700; cursor:pointer;
  transition:transform .15s ease;
}
.hero-action-btn:hover{
  background:rgba(15,23,42,.85);
  border-color:rgba(255,255,255,.28);
  transform:translateY(-2px);
}
.hero-action-btn svg{ width:16px; height:16px; fill:none; stroke-width:1.8; }
.hero-action-btn:nth-child(1) svg{ stroke:#93C5FD; }
.hero-action-btn:nth-child(2) svg{ stroke:#86EFAC; }
.hero-action-btn:nth-child(3) svg{ stroke:#C4B5FD; }
.hero-action-btn:nth-child(4) svg{ stroke:#F9A8D4; }

.hero-map-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:11px;
  background:rgba(8,12,24,.62);
  border:1px solid rgba(255,255,255,.16);
  color:#FFFFFF;
  font-family:inherit;
  font-size:.72rem; font-weight:700; cursor:pointer;
  transition:none;
}
.hero-map-btn:hover{
  background:rgba(15,23,42,.85);
  border-color:rgba(255,255,255,.28);
}
.hero-map-btn svg{ width:14px; height:14px; stroke:#93C5FD; fill:none; stroke-width:2; }
.hero-map-btn .chevron{ margin-right:auto; opacity:.7; stroke:#FFFFFF; }

/* Force readable text on gradient cards (dark mode default) */
.hero-holo-card h3{ color:#FFFFFF; }
.hero-holo-card .holo-role{ color:rgba(241,245,249,.85); }


/* Dark mode only — solid dark chips on themed cards */
html.dark .holo-card-alt .hero-action-btn,
html.dark .holo-card-alt2 .hero-action-btn,
html.dark .holo-card-alt .hero-map-btn,
html.dark .holo-card-alt2 .hero-map-btn,
html.dark .holo-card-alt .hero-info-row,
html.dark .holo-card-alt2 .hero-info-row{
  background:#0B1220 !important;
  color:#FFFFFF !important;
}
html.dark .holo-card-alt .hero-action-btn:hover,
html.dark .holo-card-alt2 .hero-action-btn:hover,
html.dark .holo-card-alt .hero-map-btn:hover,
html.dark .holo-card-alt2 .hero-map-btn:hover{
  background:#111827 !important;
}
html.dark .holo-card-alt .hero-info-row .info-value,
html.dark .holo-card-alt2 .hero-info-row .info-value{
  color:#FFFFFF !important;
}
html.dark .holo-card-alt .hero-info-row .info-label{ color:rgba(254,215,170,.95) !important; }
html.dark .holo-card-alt2 .hero-info-row .info-label{ color:rgba(167,243,208,.95) !important; }
html.dark .holo-card-alt h3,
html.dark .holo-card-alt2 h3{ color:#FFFFFF !important; }
html.dark .holo-card-alt .holo-role{ color:rgba(254,243,199,.9) !important; }
html.dark .holo-card-alt2 .holo-role{ color:rgba(209,250,229,.9) !important; }

/* Light mode — readable dark text + light solid buttons on ALL cards */
html:not(.dark) .hero-holo-card h3{ color:#0B1220 !important; }
html:not(.dark) .hero-holo-card .holo-role{ color:#475569 !important; }
html:not(.dark) .hero-info-row{
  background:#F1F5F9 !important;
  border:1px solid #E2E8F0 !important;
  box-shadow:none !important;
}
html:not(.dark) .hero-info-row .info-label{ color:#64748B !important; }
html:not(.dark) .hero-info-row .info-value{ color:#0F172A !important; }
html:not(.dark) .hero-action-btn{
  background:#F8FAFC !important;
  border:1px solid #E2E8F0 !important;
  color:#0F172A !important;
  box-shadow:none !important;
}
html:not(.dark) .hero-action-btn:hover{
  background:#F1F5F9 !important;
  border-color:#CBD5E1 !important;
}
html:not(.dark) .hero-map-btn{
  background:#F8FAFC !important;
  border:1px solid #E2E8F0 !important;
  color:#0F172A !important;
  box-shadow:none !important;
}
html:not(.dark) .hero-map-btn:hover{
  background:#F1F5F9 !important;
  border-color:#CBD5E1 !important;
}
html:not(.dark) .hero-map-btn .chevron{ stroke:#0F172A !important; opacity:.6; }

html:not(.dark) .holo-card-alt .hero-action-btn,
html:not(.dark) .holo-card-alt2 .hero-action-btn,
html:not(.dark) .holo-card-alt .hero-map-btn,
html:not(.dark) .holo-card-alt2 .hero-map-btn,
html:not(.dark) .holo-card-alt .hero-info-row,
html:not(.dark) .holo-card-alt2 .hero-info-row{
  background:#F8FAFC !important;
  color:#0F172A !important;
  border-color:#E2E8F0 !important;
}
html:not(.dark) .holo-card-alt .hero-info-row .info-label,
html:not(.dark) .holo-card-alt2 .hero-info-row .info-label,
html:not(.dark) .holo-card-alt .hero-info-row .info-value,
html:not(.dark) .holo-card-alt2 .hero-info-row .info-value{
  color:#0F172A !important;
}
html:not(.dark) .holo-card-alt .hero-info-row .info-label{ color:#9A3412 !important; }
html:not(.dark) .holo-card-alt2 .hero-info-row .info-label{ color:#065F46 !important; }
html:not(.dark) .holo-card-alt h3,
html:not(.dark) .holo-card-alt2 h3{ color:#0B1220 !important; }
html:not(.dark) .holo-card-alt .holo-role,
html:not(.dark) .holo-card-alt2 .holo-role{ color:#475569 !important; }
html:not(.dark) .holo-card-alt .hero-map-btn{ color:#9A3412 !important; }
html:not(.dark) .holo-card-alt2 .hero-map-btn{ color:#065F46 !important; }

/* Light mode */
html:not(.dark) .hero-holo-card h3{ color:#0B1220; }
html:not(.dark) .hero-info-row{
  background:rgba(255,255,255,.72); border:1px solid rgba(208,226,245,.9); box-shadow:0 2px 8px rgba(15,23,42,.04);
}
html:not(.dark) .hero-info-row .info-label{ color:#5B6B7C; }
html:not(.dark) .hero-info-row .info-label svg{ stroke:#3B82F6; }
html:not(.dark) .hero-info-row .info-value{ color:#0B1220; }
html:not(.dark) .hero-action-btn{
  background:rgba(255,255,255,.85); border:1px solid rgba(208,226,245,.95); color:#0B1220; box-shadow:0 2px 8px rgba(15,23,42,.05);
}
html:not(.dark) .hero-action-btn:hover{ background:#E0F2FE; border-color:color-mix(in srgb,#3B82F6 35%,#D0E2F5); }
html:not(.dark) .hero-action-btn:nth-child(1) svg{ stroke:#3B82F6; }
html:not(.dark) .hero-action-btn:nth-child(2) svg{ stroke:#10B981; }
html:not(.dark) .hero-action-btn:nth-child(3) svg{ stroke:#8B5CF6; }
html:not(.dark) .hero-action-btn:nth-child(4) svg{ stroke:#EC4899; }
html:not(.dark) .hero-map-btn{
  background:rgba(255,255,255,.85); border:1px solid rgba(208,226,245,.95); color:#0B1220; box-shadow:0 2px 8px rgba(15,23,42,.04);
}
html:not(.dark) .hero-map-btn:hover{ background:#E0F2FE; border-color:color-mix(in srgb,#3B82F6 30%,#D0E2F5); }
html:not(.dark) .hero-map-btn svg{ stroke:#3B82F6; }

/* =========================================================
   ALL DEVICES — full hologram animations (no mobile kill)
   ========================================================= */
.hero-holo-stage,
.hero-holo-tilt,
.hero-action-flyouts,
.hero-left-content{
  overflow:visible!important;
}

/* Force every hero animation ON everywhere (override any old kills) */
.hero-holo-aurora{
  animation:holo-aurora-drift 11s ease-in-out infinite!important;
}
.hero-holo-grid{
  animation:holo-grid-spin 40s linear infinite!important;
  display:block!important;
}
.hero-holo-particles{
  display:block!important;
}
.hero-holo-particles span{
  animation:holo-particle-rise var(--dur, 10s) ease-in var(--delay, 0s) infinite!important;
}
.hero-holo-orbit{
  display:block!important;
  animation:holo-orbit-spin 18s linear infinite!important;
}
.orbit-2{ animation:holo-orbit-spin 26s linear infinite reverse!important; }
.hero-holo-shadow{
  display:block!important;
  animation:holo-shadow-breathe 6s ease-in-out infinite!important;
}
.hero-holo-tilt{
  animation:none!important;
}
.hero-holo-card::before{
  animation:holo-border-spin 6s linear infinite!important;
  opacity:.85!important;
}
.hero-holo-sweep{
  display:none !important;
  animation:none !important;
}
.holo-live i{
  animation:holo-pulse-dot 1.6s ease-in-out infinite!important;
}
.hero-avatar-ring{
  animation:holo-ring-spin 4.5s linear infinite!important;
}
.chip-link{
  animation:holo-chip-float 5s ease-in-out infinite!important;
  opacity:.95!important;
  visibility:visible!important;
}
.chip-share{
  animation:holo-chip-float 5.6s ease-in-out .6s infinite!important;
  opacity:.95!important;
  visibility:visible!important;
}
.chip-map{
  animation:chip-appear-map 9s ease-in-out infinite!important;
  visibility:visible!important;
}
.chip-call{
  animation:chip-appear-call 9s ease-in-out infinite!important;
  visibility:visible!important;
}
.chip-email{
  animation:chip-appear-email 9s ease-in-out infinite!important;
  visibility:visible!important;
}
.hero-action-flyouts{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:none;
}
.fly-map{ animation:fly-path-map 9s cubic-bezier(.22,1,.36,1) infinite!important; }
.fly-orb-map{ animation:fly-spin-map 9s cubic-bezier(.22,1,.36,1) infinite!important; }
.fly-map .ft1{ animation:fly-trail-map-1 9s ease-out infinite!important; }
.fly-map .ft2{ animation:fly-trail-map-2 9s ease-out infinite!important; }
.fly-call{ animation:fly-path-call 9s cubic-bezier(.34,1.4,.64,1) infinite!important; }
.fly-orb-call{ animation:fly-spin-call 9s ease-in-out infinite!important; }
.fly-ring{ animation:fly-ring-pulse 9s ease-out infinite!important; }
.fly-email{ animation:fly-path-email 9s cubic-bezier(.22,.8,.36,1) infinite!important; }
.fly-orb-email{ animation:fly-spin-email 9s ease-in-out infinite!important; }
.fly-spark.s1{ animation:fly-spark-1 9s ease-out infinite!important; }
.fly-spark.s2{ animation:fly-spark-2 9s ease-out infinite!important; }
.fly-spark.s3{ animation:fly-spark-3 9s ease-out infinite!important; }
.hero-map-btn .map-btn-icon{
  animation:btn-pulse-map 9s ease-in-out infinite!important;
}
#heroCallBtn .action-btn-icon{
  animation:btn-pulse-call 9s ease-in-out infinite!important;
}
#heroEmailBtn .action-btn-icon{
  animation:btn-pulse-email 9s ease-in-out infinite!important;
}
.sample-av{
  animation-name:samples-ltr-loop!important;
  animation-duration:3.4s!important;
  animation-timing-function:cubic-bezier(.45,.05,.55,.95)!important;
  animation-iteration-count:infinite!important;
}
.sample-av-1{ animation-delay:0s!important; }
.sample-av-2{ animation-delay:-1.133s!important; }
.sample-av-3{ animation-delay:-2.266s!important; }

/* Force CSS coverflow when JS has not taken over */
.holo-carousel:not([data-js-carousel]) .holo-slide{
  animation-name:holo-coverflow!important;
  animation-duration:22s!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
}
.holo-carousel:not([data-js-carousel]) .holo-slide:nth-child(1){ animation-delay:0s!important; }
.holo-carousel:not([data-js-carousel]) .holo-slide:nth-child(2){ animation-delay:-14.666s!important; }
.holo-carousel:not([data-js-carousel]) .holo-slide:nth-child(3){ animation-delay:-7.333s!important; }

@media (max-width:480px){
  .chip-link{ left:0!important; top:-2%!important; font-size:.6rem!important; }
  .chip-share{ right:0!important; bottom:0!important; font-size:.6rem!important; }
  .chip-map{ left:-6%!important; }
  .chip-call{ right:-6%!important; }
  .chip-email{ left:-6%!important; }
}

/* Pause ALL holo work when off-screen or tab hidden */
html.is-hidden .hero-holo-aurora,
html.is-hidden .hero-holo-grid,
html.is-hidden .hero-holo-particles span,
html.is-hidden .hero-holo-orbit,
html.is-hidden .hero-holo-shadow,
html.is-hidden .hero-holo-tilt,
html.is-hidden .hero-holo-card::before,
html.is-hidden .hero-holo-sweep,
html.is-hidden .holo-live i,
html.is-hidden .hero-avatar-ring,
html.is-hidden .hero-holo-chip,
html.is-hidden .fly-rig,
html.is-hidden .fly-orb,
html.is-hidden .fly-trail,
html.is-hidden .fly-ring,
html.is-hidden .fly-spark,
html.is-hidden .fly-shadow,
html.is-hidden .hero-map-btn .map-btn-icon,
html.is-hidden #heroCallBtn .action-btn-icon,
html.is-hidden #heroEmailBtn .action-btn-icon,
html.is-hidden .sample-av,
html.is-hidden .holo-carousel-track,
html.is-hidden .holo-slide,
.hero-holo-stage.is-paused .hero-holo-aurora,
.hero-holo-stage.is-paused .hero-holo-grid,
.hero-holo-stage.is-paused .hero-holo-particles span,
.hero-holo-stage.is-paused .hero-holo-orbit,
.hero-holo-stage.is-paused .hero-holo-shadow,
.hero-holo-stage.is-paused .hero-holo-tilt,
.hero-holo-stage.is-paused .hero-holo-card::before,
.hero-holo-stage.is-paused .hero-holo-sweep,
.hero-holo-stage.is-paused .holo-live i,
.hero-holo-stage.is-paused .hero-avatar-ring,
.hero-holo-stage.is-paused .hero-holo-chip,
.hero-holo-stage.is-paused .fly-rig,
.hero-holo-stage.is-paused .fly-orb,
.hero-holo-stage.is-paused .fly-trail,
.hero-holo-stage.is-paused .fly-ring,
.hero-holo-stage.is-paused .holo-carousel-track,
.hero-holo-stage.is-paused .holo-slide,
.hero-holo-stage.is-paused .fly-spark,
.hero-holo-stage.is-paused .fly-shadow,
.hero-holo-stage.is-paused .hero-map-btn .map-btn-icon,
.hero-holo-stage.is-paused #heroCallBtn .action-btn-icon,
.hero-holo-stage.is-paused #heroEmailBtn .action-btn-icon,
.hero-holo-stage.is-paused .sample-av{
  animation-play-state:paused!important;
}


/* PERF mobile: cheaper ambient + fewer simultaneous layers */
@media (max-width:960px){
  .hero-holo-aurora{ filter:blur(16px) saturate(1.3); }
  .hero-holo-card{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .hero-holo-chip{
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }
  .hero-holo-particles span:nth-child(n+7){ display:none; }
  .hero-holo-grid{ opacity:.22; }
}

/* Themed accents only — same solid card background for all */
.holo-card-alt{
  background:#0F1629 !important;
  background-color:#0F1629 !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-color: rgba(251,146,60,.35) !important;
  box-shadow:
    0 34px 80px rgba(5,8,20,.55),
    0 0 0 1px rgba(251,146,60,.12) inset,
    0 1px 0 rgba(255,255,255,.12) inset,
    0 0 42px rgba(251,146,60,.32),
    0 0 80px rgba(244,114,182,.18) !important;
}
.holo-card-alt::before{
  background: conic-gradient(from var(--holo-angle,0deg), #F97316, #FBBF24, #F472B6, #FB923C, #F97316) !important;
}
.holo-card-alt .hero-avatar-ring{
  background: conic-gradient(#F97316, #FBBF24, #F472B6, #FB923C, #F97316) !important;
}
.holo-card-alt .holo-live{ color:#FDBA74; }
.holo-card-alt .holo-live i{ background:#FB923C; box-shadow:0 0 8px #FB923C; }
.holo-card-alt .holo-qr{ color:#FDBA74; }
.holo-card-alt .hero-verified{ background:#F97316; }
.holo-card-alt .hero-info-row .info-label svg{ stroke:#FB923C !important; }
.holo-card-alt .hero-action-btn:nth-child(1) svg{ stroke:#22C55E !important; }
.holo-card-alt .hero-action-btn:nth-child(2) svg{ stroke:#E1306C !important; }
.holo-card-alt .hero-action-btn:nth-child(3) svg{ stroke:#FBBF24 !important; }
.holo-card-alt .hero-action-btn:nth-child(4) svg{ stroke:#FB923C !important; }
.holo-card-alt .hero-map-btn svg{ stroke:#FB923C !important; }

.holo-card-alt2{
  background:#0F1629 !important;
  background-color:#0F1629 !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-color: rgba(52,211,153,.35) !important;
  box-shadow:
    0 34px 80px rgba(5,8,20,.55),
    0 0 0 1px rgba(52,211,153,.12) inset,
    0 1px 0 rgba(255,255,255,.12) inset,
    0 0 42px rgba(52,211,153,.32),
    0 0 80px rgba(34,211,238,.18) !important;
}
.holo-card-alt2::before{
  background: conic-gradient(from var(--holo-angle,0deg), #34D399, #22D3EE, #10B981, #2DD4BF, #34D399) !important;
}
.holo-card-alt2 .hero-avatar-ring{
  background: conic-gradient(#34D399, #22D3EE, #10B981, #2DD4BF, #34D399) !important;
}
.holo-card-alt2 .holo-live{ color:#6EE7B7; }
.holo-card-alt2 .holo-live i{ background:#34D399; box-shadow:0 0 8px #34D399; }
.holo-card-alt2 .holo-qr{ color:#6EE7B7; }
.holo-card-alt2 .hero-verified{ background:#10B981; }
.holo-card-alt2 .hero-info-row .info-label svg{ stroke:#34D399 !important; }
.holo-card-alt2 .hero-action-btn:nth-child(1) svg{ stroke:#0A66C2 !important; }
.holo-card-alt2 .hero-action-btn:nth-child(2) svg{ stroke:#22D3EE !important; }
.holo-card-alt2 .hero-action-btn:nth-child(3) svg{ stroke:#F472B6 !important; }
.holo-card-alt2 .hero-action-btn:nth-child(4) svg{ stroke:#34D399 !important; }
.holo-card-alt2 .hero-map-btn svg{ stroke:#34D399 !important; }

html:not(.dark) .holo-card-alt{
  background:#FFFFFF !important;
  background-color:#FFFFFF !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-color: rgba(251,146,60,.35) !important;
  box-shadow:
    0 28px 60px rgba(154,52,18,.1),
    0 0 0 1px rgba(251,146,60,.12) inset !important;
}
html:not(.dark) .holo-card-alt2{
  background:#FFFFFF !important;
  background-color:#FFFFFF !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-color: rgba(16,185,129,.35) !important;
  box-shadow:
    0 28px 60px rgba(6,95,70,.1),
    0 0 0 1px rgba(16,185,129,.12) inset !important;
}

html:not(.dark) .holo-card-alt .hero-action-btn:hover{ background:#FFF7ED !important; border-color:rgba(249,115,22,.35) !important; }
html:not(.dark) .holo-card-alt .hero-map-btn{ color:#9A3412 !important; }
html:not(.dark) .holo-card-alt .hero-map-btn:hover{ background:#FFF7ED !important; }
html:not(.dark) .holo-card-alt2 .hero-action-btn:hover{ background:#ECFDF5 !important; border-color:rgba(16,185,129,.35) !important; }
html:not(.dark) .holo-card-alt2 .hero-map-btn{ color:#065F46 !important; }
html:not(.dark) .holo-card-alt2 .hero-map-btn:hover{ background:#ECFDF5 !important; }


/* Instant theme switch for card controls — no black/white lag */
html.theme-transitioning .hero-action-btn,
html.theme-transitioning .hero-map-btn,
html.theme-transitioning .hero-info-row,
html.theme-transitioning .hero-holo-card h3,
html.theme-transitioning .holo-role,
html.theme-transitioning .holo-live,
html.theme-transitioning .hero-holo-card{
  transition:none !important;
}