#hero {
  --ar: #d0d0d0;
}
#hero .hero-content { padding: 4rem 0 6rem; }
#hero .hero-anchor { position: relative; }
#hero .hero-anchor h1,
#hero .hero-anchor p { max-width: 60%; transition: filter .6s ease; }
#hero h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; }
#hero .hero-anchor p { line-height: 1.6; }
#hero.ar-active h1 { filter: drop-shadow(0 0 14px rgba(0,229,195,.35)); }

#hero .hero-ar-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity .6s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
#hero.ar-active .hero-ar-overlay { opacity: 1; transform: none; }

#hero .ar-viewfinder {
  position: absolute;
  inset: 1rem;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 200vmax rgba(5,16,14,.74);
  background:
    repeating-linear-gradient(to bottom,rgba(0,229,195,.045) 0 1px,transparent 1px 4px),
    rgba(0,229,195,.035);
}

#hero .ar-scan {
  position: absolute;
  inset: 0 0 auto;
  height: 22%;
  opacity: 0;
  background: linear-gradient(to bottom,transparent,rgba(0,229,195,.2) 85%,rgba(0,229,195,.8));
}
#hero.ar-active .ar-scan { animation: hero-ar-sweep 1.5s .35s both; }
@keyframes hero-ar-sweep {
  0% { transform: translateY(-100%); opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { transform: translateY(480%); opacity: 0; }
}
#hero .ar-hud {
  position: absolute;
  top: 2rem;
  left: 2rem;
  color: var(--ar);
  font: 600 .75rem/1.7 ui-monospace, monospace;
  text-shadow: 0 0 8px rgba(0,229,195,.5);
}
#hero .ar-hud small { display: block; font-weight: 400; }
#hero .ar-status-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--ar);
}
#hero .ar-tag {
  --delay: calc(1.1s + var(--order) * .16s);
  position: absolute;
  left: 68%;
  top: 50%;
  z-index: 3;
  pointer-events: none;
  color: var(--ar);
}
#hero .ar-dot {
  position: absolute;
  left: -42px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ar);
  box-shadow: 0 0 14px var(--ar);
  opacity: 0;
  transform: scale(0);
  transition: opacity .3s, transform .3s;
}
#hero .ar-line {
  position: absolute;
  right: 0;
  top: -1px;
  width: 38px;
  height: 2px;
  background: var(--ar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s;
}
#hero .ar-label {
  display: block;
  width: max-content;
  max-width: 100%;
  padding: .45rem .7rem;
  border: 1px solid var(--ar);
  border-radius: 6px;
  background: rgba(4,18,15,.92);
  box-shadow: 0 0 18px rgba(0,229,195,.25);
  font: 600 .75rem/1.5 ui-monospace, monospace;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .4s;
}
#hero .ar-label small { display: block; color: #bff7ec; font-weight: 400; }
#hero.ar-active .ar-dot { opacity: 1; transform: none; transition-delay: var(--delay); }
#hero.ar-active .ar-line { transform: none; transition-delay: calc(var(--delay) + .15s); }
#hero.ar-active .ar-label { opacity: 1; transform: none; transition-delay: calc(var(--delay) + .45s); }
#hero .hero-ar-controls {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
}
#hero-ar-toggle:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1.2rem;
    border: 4px solid #363636;
    border-radius: 999px;
    color: #fff;
    background: #04120f;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
    transition: background .25s, color .25s;
}





#hero-ar-toggle svg { width: 28px; height: 28px; }
#hero.ar-active #hero-ar-toggle { background: var(--ar); color: #04120f; }
#hero-ar-toggle:hover { box-shadow: 0 0 24px rgba(255, 255, 255, 0.63); }
@media (max-width: 820px) {
  #hero .hero-anchor h1, #hero .hero-anchor p { max-width: none; }
  #hero .hero-anchor { padding-bottom: 4.5rem; }
  #hero .ar-tag { left: 1.5rem; top: auto; bottom: .25rem; }
  #hero .ar-dot { left: -5px; top: -23px; }
  #hero .ar-line { left: -1px; top: -18px; width: 2px; height: 18px; transform: scaleY(0); transform-origin: top; }
  #hero .ar-label { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  #hero .hero-ar-overlay, #hero .ar-label, #hero .ar-line, #hero .ar-dot,
  #hero .hero-anchor h1, #hero .hero-anchor p, #hero-ar-toggle {
    transition: none;
    transition-delay: 0s !important;
  }
  #hero .hero-ar-overlay { transform: none; }
  #hero.ar-active .ar-scan { animation: none; }
}