:root{
  --gold:#d4af37; --vio:#8b5cf6;
  --bg1:#0f0c29; --bg2:#302b63; --bg3:#24243e;
  --holo-op:.28;
}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 50%,var(--bg3) 100%);}
.scanlines::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.06) 0 1px,transparent 1px 3px);
  mix-blend-mode:soft-light;opacity:var(--scan-op,.18);
  transition:opacity .25s ease;animation:scan var(--scan-speed,6s) linear infinite;
}
@keyframes scan{0%{transform:translateY(0)}100%{transform:translateY(-6px)}}
.tilt-wrap{perspective:900px}
.holo{position:relative;display:inline-block;transform-style:preserve-3d;will-change:transform;cursor:pointer;touch-action:none}
.holo{visibility:hidden}
.holo img{display:block;height:auto;transition:filter .18s ease}
.holo .c-layer{position:absolute;inset:0;mix-blend-mode:screen;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .05s linear}
.holo .c-red{filter:hue-rotate(320deg) saturate(2)}
.holo .c-cyan{filter:hue-rotate(190deg) saturate(2)}
.holo.hovering .c-layer{opacity:var(--holo-op)}
.holo.hovering img#logo{filter:brightness(1.06) contrast(1.06)}
#starfield, #starfieldPreview{position:absolute;inset:0;z-index:0}
.logo-wrap{position:relative;z-index:1}
.brandline{letter-spacing:.30em;font-size:.8rem}

/* Mobile: hide animated net/constellations canvas to reduce clutter/CPU */
@media (max-width: 768px){
  #starfield, #starfieldPreview{display:none!important}
}