.hero-bg,.asl-ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(58% 52% at 78% 16%, rgba(76,154,255,.17), transparent 72%),radial-gradient(44% 48% at 16% 78%, rgba(53,224,255,.07), transparent 70%),radial-gradient(30% 30% at 50% 50%, rgba(156,200,255,.05), transparent 70%)}.hero-bg img{position:absolute;top:50%;right:-4%;width:min(66vw,1180px);height:auto;transform:translateY(-50%);opacity:.78;-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 34%, #000 100%),linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg, transparent 0%, #000 34%, #000 100%),linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%);mask-composite:intersect}.hero-bg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg, rgba(4,9,20,.94) 0%, rgba(4,9,20,.82) 34%, rgba(4,9,20,.34) 58%, rgba(4,9,20,.12) 100%)}.hero-bg canvas,.asl-ambient canvas{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%}.hero-bg::after,.asl-ambient::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:3;background:linear-gradient(180deg, rgba(4,9,20,0), rgba(4,9,20,.94))}.hero>.shell{position:relative;z-index:1}@media (max-width:800px){.hero{padding-top:14rem}main .hero .hero-bg img[width][height]{right:auto;left:50%;top:-1rem;height:17.5rem;width:auto;max-width:none;transform:translateX(-50%);opacity:.96;-webkit-mask-image:linear-gradient(180deg, #000 0, #000 58%, transparent 100%);mask-image:linear-gradient(180deg, #000 0, #000 58%, transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}.hero-bg::before{background:linear-gradient(180deg, rgba(4,9,20,.08) 0, rgba(4,9,20,.08) 8rem, rgba(4,9,20,.80) 14.5rem, rgba(4,9,20,.88) 100%)}}.phero>.shell,.product-hero>.shell{position:relative;z-index:1}.phero .hero-bg img,.product-hero .hero-bg img{opacity:.62}@media (min-width:1101px){.phero>.shell>*{max-width:46rem}.phero>.shell>.hero-metrics{max-width:46rem}}@media (min-width:801px) and (max-width:1100px){.phero .hero-bg img,.product-hero .hero-bg img{opacity:.38}}.hero-price{margin:1rem 0 0;color:var(--text);font-size:1.02rem;line-height:1.5}.hero-price b{font-size:1.4rem;color:#fff;letter-spacing:-.01em;margin-right:.15rem}.hero-price a{color:var(--ice)}@media (max-width:800px){.phero{padding-top:14rem}main .phero .hero-bg img[width][height]{right:auto;left:50%;top:-1rem;height:17.5rem;width:auto;max-width:none;transform:translateX(-50%);opacity:.96;-webkit-mask-image:linear-gradient(180deg, #000 0, #000 58%, transparent 100%);mask-image:linear-gradient(180deg, #000 0, #000 58%, transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}}.phero:has(> .hero-bg)::before,.hero:has(> .hero-bg)::before{display:none !important}.hero:has(> .hero-bg) > .shell::after,.phero:has(> .hero-bg) > .shell::after{display:none !important}#android-app .gallery-phone{grid-template-columns:repeat(4,minmax(0,1fr))}#android-app .shot{margin:0}@media (max-width:700px){#android-app .gallery-phone{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}#android-app .shot-cap{font-size:.78rem;padding:.5rem .6rem}}

/* 20 Oct 2026: one splash for every page. The art and the animated network sit in a fixed-height band at the top of the
   first section of <main>; every page's first section is at least that tall, so the splash is the same height on every
   page in both languages. */
:root{--asl-splash-h:clamp(26rem,42vw,34rem)}
.asl-splash{position:relative;isolation:isolate;overflow:hidden;min-height:var(--asl-splash-h)}
.asl-splash>*:not(.hero-bg):not(.asl-ambient){position:relative;z-index:1}
.asl-splash>.hero-bg,.asl-splash>.asl-ambient{inset:0 0 auto 0;height:var(--asl-splash-h)}
main .asl-splash>.hero-bg>img[width]{top:0;right:-4%;height:100%;width:auto;max-width:none;transform:none;opacity:.72}
.asl-splash::before,.asl-splash>.shell::after{display:none !important}
@media (min-width:801px) and (max-width:1100px){main .asl-splash>.hero-bg>img[width]{opacity:.5}}
@media (max-width:800px){
  :root{--asl-splash-h:17.5rem}
  main .asl-splash{min-height:0;padding-top:14rem !important}
  main .asl-splash>.hero-bg img[width][height]{right:auto;left:50%;top:-1rem;height:17.5rem;width:auto;max-width:none;transform:translateX(-50%);opacity:.96;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 58%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .asl-splash>.hero-bg::before{background:linear-gradient(180deg,rgba(4,9,20,.08) 0,rgba(4,9,20,.08) 8rem,rgba(4,9,20,.80) 14.5rem,rgba(4,9,20,.88) 100%)}
}