/* LUMEN immersive layer. Dark cinematic top band + real glowing mark + liquid glass.
   Loaded last; overrides the editorial hero/preloader/header for the first impression.
   Phase 1: preloader, document strip, header chrome, hero. Content sections follow. */

:root{
  --lum-ink:#06080b; --lum-ink2:#0b0f15;
  --lum-teal:#5ad6c6; --lum-teal-2:#bfeee6; --lum-teal-glow:rgba(90,214,198,.55);
  --lum-ember:#e08a44; --lum-ember-glow:rgba(224,138,68,.42);
  --lum-paper:#f3efe7; --lum-paper-2:#aeb6bf; --lum-paper-3:#727b86;
  --lum-glass:rgba(255,255,255,.05); --lum-glass-line:rgba(255,255,255,.13);
}

/* ---------- preloader: real glowing mark ---------- */
.preloader{background:var(--lum-ink) !important}
.preloader__mark{width:120px !important;height:120px !important;border:0 !important;
  mix-blend-mode:screen;filter:drop-shadow(0 0 22px var(--lum-teal-glow));
  -webkit-mask-image:radial-gradient(circle at 50% 48%,#000 52%,transparent 74%);
  mask-image:radial-gradient(circle at 50% 48%,#000 52%,transparent 74%);
  animation:lum-preIn 1.1s cubic-bezier(.22,.61,.36,1) both}
@keyframes lum-preIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
.preloader__word{color:var(--lum-paper) !important;letter-spacing:.5em !important;font-weight:700}
.preloader__bar{background:rgba(255,255,255,.1) !important}

/* ---------- the dark immersive top band ---------- */
.docstrip{background:transparent !important;border:0 !important;color:var(--lum-paper-3) !important;
  position:absolute;top:0;left:0;right:0;z-index:6}
.docstrip span{color:var(--lum-paper-3) !important}

.chrome{position:absolute !important;top:30px;left:0;right:0;background:transparent !important;
  border:0 !important;z-index:7;backdrop-filter:none !important}
.chrome .brand{color:var(--lum-paper) !important;display:flex;align-items:center;gap:11px}
.brand__img{width:30px;height:30px;mix-blend-mode:screen;filter:drop-shadow(0 0 8px var(--lum-teal-glow))}
.chrome .nav a{color:var(--lum-paper-2) !important}
.chrome .nav a:hover{color:var(--lum-paper) !important}

/* ---------- hero: dark cinematic stage ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  isolation:isolate;background:var(--lum-ink);color:var(--lum-paper);padding-top:96px}
.hero::before{content:"";position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(120% 80% at 50% 6%, #0c1118 0%, var(--lum-ink) 46%, #04060a 100%),
    radial-gradient(60% 46% at 64% 52%, rgba(90,214,198,.12), transparent 60%),
    radial-gradient(50% 40% at 50% 92%, rgba(224,138,68,.09), transparent 60%);}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.hero__aurora{position:absolute;inset:-20% -10%;z-index:-2;filter:blur(72px);opacity:.62;pointer-events:none}
.hero__aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.hero__aurora .a1{width:44vw;height:44vw;left:42%;top:14%;background:radial-gradient(circle,var(--lum-teal-glow),transparent 65%);animation:lum-d1 22s ease-in-out infinite}
.hero__aurora .a2{width:38vw;height:38vw;right:2%;top:4%;background:radial-gradient(circle,var(--lum-ember-glow),transparent 62%);animation:lum-d2 28s ease-in-out infinite}
.hero__aurora .a3{width:52vw;height:52vw;left:48%;bottom:-20%;background:radial-gradient(circle,rgba(42,168,150,.3),transparent 66%);animation:lum-d3 26s ease-in-out infinite}
@keyframes lum-d1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,4%) scale(1.12)}}
@keyframes lum-d2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,6%) scale(1.08)}}
@keyframes lum-d3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-5%) scale(1.14)}}

.hero .hero__meta,.hero .hero__meta-doc span,.hero .hero__meta>div{color:var(--lum-paper-3) !important}
.hero .hero__title{color:var(--lum-paper) !important}
.hero .hero__title .reg{background:linear-gradient(96deg,var(--lum-teal) 0%,var(--lum-teal-2) 40%,var(--lum-ember) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.hero .hero__sub{color:var(--lum-paper-2) !important}
.hero .hero__trust{color:var(--lum-paper-3) !important}

.hero .btn{border:1px solid transparent}
.hero .btn:not(.btn--ghost){color:#04201c !important;background:linear-gradient(180deg,#8ff0e2,var(--lum-teal)) !important;
  box-shadow:0 8px 30px -8px var(--lum-teal-glow),inset 0 1px 0 rgba(255,255,255,.5)}
.hero .btn--ghost{color:var(--lum-paper) !important;background:var(--lum-glass) !important;
  border-color:var(--lum-glass-line) !important;backdrop-filter:blur(8px)}
.hero .btn:hover{transform:translateY(-2px)}

/* the living mark stage (replaces the crude bed-grid svg) */
.hero__stage{position:relative;display:grid !important;place-items:center;min-height:min(54vw,540px);margin:0}
.hero__stage .halo{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--lum-teal-glow),transparent 62%);filter:blur(30px);
  animation:lum-breathe 5.5s ease-in-out infinite}
@keyframes lum-breathe{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.14);opacity:1}}
.hero__stage .ring{position:absolute;border-radius:50%;border:1px solid rgba(90,214,198,.16)}
.hero__stage .ring.r1{width:58%;aspect-ratio:1;animation:lum-spin 40s linear infinite}
.hero__stage .ring.r2{width:78%;aspect-ratio:1;border-color:rgba(90,214,198,.08);animation:lum-spin 64s linear infinite reverse}
@keyframes lum-spin{to{transform:rotate(360deg)}}
.hero__stage .mark{position:relative;width:min(82%,500px);aspect-ratio:1;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(circle at 50% 48%,#000 52%,transparent 72%);
  mask-image:radial-gradient(circle at 50% 48%,#000 52%,transparent 72%);
  filter:drop-shadow(0 0 24px var(--lum-teal-glow)) drop-shadow(0 0 60px rgba(42,168,150,.4));
  animation:lum-float 7s ease-in-out infinite}
.hero__stage .mark{
  -webkit-mask-image:radial-gradient(circle at 50% 47%,#000 44%,transparent 62%);
  mask-image:radial-gradient(circle at 50% 47%,#000 44%,transparent 62%);}
@keyframes lum-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

[data-px]{transition:transform .3s cubic-bezier(.22,.61,.36,1)}

@media (prefers-reduced-motion: reduce){
  .preloader__mark,.hero__stage .mark,.hero__stage .halo,.hero__stage .ring,.hero__aurora i{animation:none !important}
}
@media(max-width:900px){
  .hero__stage{min-height:320px;margin-top:18px}
  .chrome .nav{display:none}
}