/* Cyan / holographic highlight pass for the landing page — loaded LAST so it
   wins the cascade. Shifts the soft-blue accents to electric cyan to match the
   new dashboard aurora. */
:root{--blue:#38e0ff;--cyan:#00e5ff;--violet:#2dd4bf}

/* pills & primary buttons */
.pill,.button{background:rgba(34,211,238,.09);border-color:rgba(34,211,238,.22);color:#bdf3ff}
.pill:hover,.button:hover{background:rgba(34,211,238,.2)}
.plan.popular .button{background:var(--blue);color:#06212b;border-color:var(--blue)}

/* icons / selected items */
.icon{background:rgba(34,211,238,.07);border-color:rgba(34,211,238,.18)}
.sideitem.selected{background:rgba(34,211,238,.12);color:var(--blue)}

/* popular plan accent */
.plan.popular{border-color:rgba(34,211,238,.5);box-shadow:0 0 70px rgba(34,211,238,.12)}
.popular-badge{background:var(--blue);color:#06212b}

/* hero emblem glow */
.emblem{filter:drop-shadow(0 0 32px rgba(34,211,238,.45))}

/* holographic cyan aurora behind the hero (sits above the video, below content) */
.hero.showcase-header{isolation:isolate}
.hero.showcase-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 46% at 22% 14%,rgba(34,211,238,.22),transparent 60%),
             radial-gradient(40% 44% at 82% 20%,rgba(45,212,191,.16),transparent 62%),
             radial-gradient(50% 48% at 60% 102%,rgba(14,165,233,.16),transparent 60%);
  filter:blur(34px) saturate(140%);animation:heroAurora 30s ease-in-out infinite alternate;will-change:transform}
@keyframes heroAurora{from{transform:translate3d(0,0,0) scale(1.03)}to{transform:translate3d(-2%,2%,0) scale(1.12)}}

/* fully-cyan scroll progress meter */
.scroll-meter{background:linear-gradient(90deg,#22d3ee,#38bdf8,#2dd4bf);box-shadow:0 0 12px rgba(34,211,238,.7)}

@media(prefers-reduced-motion:reduce){.hero.showcase-header::before{animation:none}}

/* Mobile performance — GPU-heavy decorative work freezes phones. The blurred
   fullscreen autoplay video is the worst offender; drop it and the other
   always-running effects on small screens (the page stays fully legible). */
@media (max-width:760px){
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;will-change:auto!important}
  .hero-highlights{display:none!important}
  .hero-media{background:radial-gradient(120% 90% at 50% 0,#13233f,#0b1526)!important}
  .hero-sparks,.scroll-meter{display:none!important}
  .rich-feature .feature-visual *,.video-frame,.bot-response,.mini-action:after,.key-stream,.ad-progress i,.vault,.setting b{animation:none!important}
}

/* LITE MODE (Delta & other executor webviews, mobile, tablets, touch) — toggled by
   an inline <head> script. Kills every always-running / GPU-heavy effect so weak
   in-app browsers never freeze. */
html.lite *,html.lite *::before,html.lite *::after{animation:none!important;transition:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;will-change:auto!important}
html.lite .hero-highlights,html.lite .hero-sparks,html.lite .scroll-meter,html.lite .live-waves{display:none!important}
html.lite .hero-media{background:radial-gradient(120% 90% at 50% 0,#13233f,#0b1526)!important}
html.lite .hero.showcase-header::before{display:none!important}