@property --lux-angle   { syntax:'<angle>';      inherits:false; initial-value:0deg }
@property --lux-shift   { syntax:'<percentage>'; inherits:false; initial-value:0% }
@property --lux-halo    { syntax:'<number>';     inherits:false; initial-value:0 }

body.gloss{
  
  --mx:50%; --my:0%;
  --rx:0deg; --ry:0deg;

  --lux-edge:
    inset  1px  1px 0 rgba(255,255,255,.95),
    inset  0    2px 3px rgba(255,255,255,.55),
    inset -1px -1px 0 rgba(1,148,182,.22),
    inset  0   -3px 6px rgba(0,62,36,.07);

  --lux-edge-strong:
    inset  1px  1px 0 rgba(255,255,255,1),
    inset  0    3px 5px rgba(255,255,255,.6),
    inset -1px -1px 0 rgba(1,148,182,.32),
    inset  0   -4px 9px rgba(0,62,36,.10);

  --lux-depth:
    0 1px 2px rgba(0,62,36,.06),
    0 8px 18px -6px rgba(0,62,36,.10),
    0 26px 54px -14px rgba(0,62,36,.18),
    0 44px 90px -30px rgba(1,113,63,.16);

  --lux-depth-hi:
    0 2px 4px rgba(0,62,36,.08),
    0 14px 28px -8px rgba(0,62,36,.14),
    0 40px 80px -18px rgba(0,62,36,.24),
    0 70px 120px -40px rgba(1,113,63,.22);
}

body.gloss .lux-grain{
  position:fixed;inset:0;z-index:400;pointer-events:none;
  opacity:.038;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

body.gloss .lux-progress{
  position:fixed;top:0;left:0;height:3px;z-index:500;
  width:var(--scroll,0%);
  background:linear-gradient(90deg,#016A82,#01894F 55%,#01713F);
  box-shadow:0 0 12px rgba(1,137,79,.7),0 0 3px rgba(255,255,255,.8) inset;
  transition:width .12s linear;
}

body.gloss .lux{
  position:relative;isolation:isolate;
  border-radius:var(--radius-gl);
  background:
    radial-gradient(260px circle at var(--mx) var(--my),rgba(255,255,255,.62) 0%,rgba(255,255,255,0) 62%),
    linear-gradient(160deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.42) 42%,rgba(255,255,255,.58) 100%);
  -webkit-backdrop-filter:saturate(170%) blur(24px);
  backdrop-filter:saturate(170%) blur(24px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--lux-depth),var(--lux-edge);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease),border-color .5s var(--ease);
}

body.gloss .lux::before{
  content:"";position:absolute;inset:0 0 auto 0;height:46%;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.22) 46%,rgba(255,255,255,0) 100%);
  opacity:.9;pointer-events:none;z-index:-1;
}

body.gloss .lux::after{
  content:"";position:absolute;inset:auto -18% -46% -18%;height:78%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(1,137,79,.20) 0%,rgba(1,148,182,.10) 45%,transparent 72%);
  filter:blur(22px);opacity:calc(.45 + var(--lux-halo) * .55);
  transition:opacity .5s var(--ease);pointer-events:none;z-index:-2;
}
body.gloss .lux:hover{
  box-shadow:var(--lux-depth-hi),var(--lux-edge-strong);
  border-color:rgba(255,255,255,.95);
  --lux-halo:1;
}

body.gloss .lux-tilt{
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .18s var(--ease),box-shadow .5s var(--ease);
  will-change:transform;
}
body.gloss .lux-tilt > *{transform:translateZ(18px)}
body.gloss .lux-tilt .gl-ic{transform:translateZ(38px)}

body.gloss .gl-hero{isolation:isolate}

body.gloss .lux-aurora{
  
  position:absolute;inset:-40% -70%;z-index:0;pointer-events:none;
  filter:blur(84px) saturate(112%);opacity:.9;
  background:
    radial-gradient(30% 38% at 20% 28%,rgba(1,148,182,.24) 0%,transparent 68%),
    radial-gradient(26% 32% at 74% 20%,rgba(1,137,79,.20) 0%,transparent 66%),
    radial-gradient(32% 38% at 64% 76%,rgba(1,113,63,.19) 0%,transparent 70%),
    radial-gradient(24% 28% at 34% 86%,rgba(124,182,153,.18) 0%,transparent 64%);
  will-change:transform;
  animation:lux-drift 46s ease-in-out infinite alternate;
}
@keyframes lux-drift{
  0%  {transform:translate3d(-26%,-3%,0) scale(1)}
  50% {transform:translate3d(2%,4%,0)    scale(1.08)}
  100%{transform:translate3d(27%,-2%,0)  scale(1.03)}
}

body.gloss .lux-aurora::after{
  content:"";position:absolute;inset:-10%;
  background:
    radial-gradient(22% 26% at 46% 52%,rgba(1,148,182,.16) 0%,transparent 66%),
    radial-gradient(18% 22% at 86% 44%,rgba(1,137,79,.15) 0%,transparent 64%);
  will-change:transform;
  animation:lux-drift-b 68s ease-in-out infinite alternate;
}
@keyframes lux-drift-b{
  0%  {transform:translate3d(24%,4%,0)   scale(1.04)}
  50% {transform:translate3d(-3%,-5%,0)  scale(1)}
  100%{transform:translate3d(-25%,3%,0)  scale(1.07)}
}

body.gloss .gl-hero .orb-1{animation:orb-cross-a 52s ease-in-out infinite alternate}
body.gloss .gl-hero .orb-2{animation:orb-cross-b 64s ease-in-out infinite alternate}
body.gloss .gl-hero .orb-3{animation:orb-cross-c 78s ease-in-out infinite alternate}
@keyframes orb-cross-a{
  0%  {transform:translate3d(6vw,0,0)    scale(1)}
  50% {transform:translate3d(-14vw,4vh,0) scale(1.1)}
  100%{transform:translate3d(-30vw,-2vh,0) scale(.98)}
}
@keyframes orb-cross-b{
  0%  {transform:translate3d(-8vw,0,0)   scale(1.04)}
  50% {transform:translate3d(16vw,-5vh,0) scale(.96)}
  100%{transform:translate3d(34vw,2vh,0)  scale(1.08)}
}
@keyframes orb-cross-c{
  0%  {transform:translate3d(-22vw,6vh,0) scale(.94)}
  50% {transform:translate3d(8vw,-4vh,0)  scale(1.12)}
  100%{transform:translate3d(26vw,3vh,0)  scale(1)}
}

body.gloss .lux-streak{
  position:absolute;top:0;left:-40%;width:38%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55) 42%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.5) 58%,transparent);
  filter:blur(14px);mix-blend-mode:screen;
  animation:lux-sweep 2.6s 1.1s cubic-bezier(.4,0,.2,1) both;
}
@keyframes lux-sweep{
  0%{left:-45%;opacity:0}
  18%{opacity:1}
  100%{left:110%;opacity:0}
}

body.gloss .lux-shelf{
  position:absolute;left:8%;right:8%;bottom:-6px;height:56px;z-index:-1;pointer-events:none;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 0%,rgba(1,137,79,.34) 0%,rgba(1,148,182,.16) 46%,transparent 74%);
  filter:blur(20px);
}

body.gloss .grad-text{
  background:linear-gradient(100deg,#016A82 0%,#01894F 26%,#7CB699 42%,#01894F 58%,#01713F 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:lux-shimmer 9s ease-in-out infinite;
}
@keyframes lux-shimmer{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
body.gloss .gl-stats .num{
  background:linear-gradient(100deg,#B1DEC2,#EAF6EE 34%,#7CB699 56%,#B1DEC2 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:lux-shimmer 11s ease-in-out infinite;
}

body.gloss .btn{position:relative;overflow:hidden;isolation:isolate}
body.gloss .btn-primary::after,
body.gloss .btn-ink::after,
body.gloss .btn-rose::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120px circle at var(--mx) var(--my),rgba(255,255,255,.5),transparent 60%);
  opacity:0;transition:opacity .35s var(--ease);
}
body.gloss .btn-primary:hover::after,
body.gloss .btn-ink:hover::after,
body.gloss .btn-rose:hover::after{opacity:1}
body.gloss .btn-primary{
  background:
    linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.06) 46%,rgba(0,62,36,.10) 100%),
    var(--grad-brand);
  box-shadow:
    0 1px 2px rgba(0,62,36,.18),
    0 10px 22px -6px rgba(1,113,63,.42),
    0 22px 44px -14px rgba(1,137,79,.40),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -2px 8px rgba(0,62,36,.22);
}
body.gloss .btn-primary:hover{
  transform:translateY(-3px) scale(1.015);
  box-shadow:
    0 2px 4px rgba(0,62,36,.20),
    0 16px 32px -8px rgba(1,113,63,.50),
    0 34px 66px -18px rgba(1,137,79,.46),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 10px rgba(0,62,36,.24);
}
body.gloss .btn-primary:active{transform:translateY(-1px) scale(.995);
  box-shadow:0 1px 2px rgba(0,62,36,.24),inset 0 2px 8px rgba(0,62,36,.28),inset 0 1px 0 rgba(255,255,255,.5)}

body.gloss .gl-card{
  background:
    radial-gradient(240px circle at var(--mx) var(--my),rgba(255,255,255,.66) 0%,rgba(255,255,255,0) 60%),
    linear-gradient(160deg,rgba(255,255,255,.70) 0%,rgba(255,255,255,.44) 46%,rgba(255,255,255,.56) 100%);
  box-shadow:var(--lux-depth),var(--lux-edge);
  border-color:rgba(255,255,255,.72);
}
body.gloss .gl-card:hover{
  transform:translateY(-10px);
  box-shadow:var(--lux-depth-hi),var(--lux-edge-strong);
  border-color:rgba(255,255,255,.98);
}

body.gloss .gl-card .gl-ic,
body.gloss .gl-step::before,
body.gloss .gl-stat .ic{
  background:
    linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 52%),
    var(--grad-brand);
  box-shadow:
    0 8px 18px -4px rgba(1,113,63,.44),
    0 16px 34px -12px rgba(1,137,79,.36),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -3px 8px rgba(0,62,36,.24);
}
body.gloss .gl-card.rose .gl-ic{
  background:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 52%),var(--grad-urja);
  box-shadow:0 8px 18px -4px rgba(110,24,104,.42),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -3px 8px rgba(0,62,36,.2);
}

body.gloss .gl-visual .gl-frame{
  box-shadow:var(--lux-depth-hi),var(--lux-edge-strong);
  border:1px solid rgba(255,255,255,.9);
}
body.gloss .gl-visual .gl-frame::after{
  background:
    linear-gradient(158deg,rgba(255,255,255,.48) 0%,rgba(255,255,255,.08) 24%,transparent 44%),
    radial-gradient(120% 60% at 50% 108%,rgba(1,137,79,.22) 0%,transparent 60%);
}

body.gloss .gl-visual .gl-frame{overflow:hidden}
body.gloss .gl-visual .gl-frame::before{
  content:"";position:absolute;top:-60%;left:-30%;width:36%;height:220%;z-index:2;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.28) 42%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.24) 58%,transparent 100%);
  transform:rotate(14deg);filter:blur(16px);mix-blend-mode:screen;pointer-events:none;
  animation:lux-glint 7.5s ease-in-out infinite;
}
@keyframes lux-glint{
  0%,62%{left:-34%;opacity:0}
  70%{opacity:.9}
  100%{left:104%;opacity:0}
}

body.gloss .gl-stat{
  background:
    radial-gradient(140px circle at var(--mx) var(--my),rgba(255,255,255,.75),transparent 62%),
    linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.62));
  box-shadow:var(--lux-depth),var(--lux-edge-strong);
  border:1px solid rgba(255,255,255,.98);
}

body.gloss .gl-bookbar{
  background:
    radial-gradient(340px circle at var(--mx) var(--my),rgba(255,255,255,.70) 0%,rgba(255,255,255,0) 58%),
    linear-gradient(160deg,rgba(255,255,255,.84) 0%,rgba(255,255,255,.60) 48%,rgba(255,255,255,.76) 100%);
  box-shadow:var(--lux-depth-hi),var(--lux-edge-strong);
  border:1px solid rgba(255,255,255,.98);
}
body.gloss .gl-bookbar .bb-ic{
  background:linear-gradient(165deg,rgba(1,148,182,.16),rgba(1,113,63,.14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 10px -3px rgba(0,62,36,.14);
}

body.gloss .gl-band-dark,
body.gloss .gl-cta,
body.gloss .gl-urja{
  box-shadow:var(--lux-depth-hi),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 12px rgba(0,0,0,.22);
}
body.gloss .gl-band-dark::after,
body.gloss .gl-cta::after,
body.gloss .gl-urja::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.14),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.10) 0%,transparent 30%);
}
body.gloss .gl-stats .gs{
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 12px 28px -14px rgba(0,0,0,.4);
}
body.gloss .gl-stats .gs:hover{
  background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 20px 40px -16px rgba(0,0,0,.45);
}

body.gloss .reveal{
  opacity:0;transform:translateY(26px) scale(.985);
  filter:blur(10px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
}
body.gloss .reveal.in{opacity:1;transform:none;filter:blur(0)}

body.gloss .site-header{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.48));
  -webkit-backdrop-filter:saturate(190%) blur(26px);
  backdrop-filter:saturate(190%) blur(26px);
  border-bottom:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 14px 34px -22px rgba(0,62,36,.34);
}
body.gloss .site-header.scrolled{
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.66));
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 16px 40px -18px rgba(0,62,36,.30);
}
body.gloss .brand-lockup .one b{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}

body.gloss .wa-float{
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 50%),var(--grad-brand);
  box-shadow:0 2px 4px rgba(0,62,36,.2),0 14px 30px -8px rgba(1,113,63,.5),
             inset 0 1px 0 rgba(255,255,255,.85),inset 0 -3px 9px rgba(0,62,36,.25);
}

@media (hover:none),(pointer:coarse){
  
  body.gloss .lux-tilt{transform:none}
  body.gloss .lux,body.gloss .gl-card,body.gloss .gl-bookbar,body.gloss .gl-stat{
    background-image:linear-gradient(160deg,rgba(255,255,255,.74),rgba(255,255,255,.5));
  }
  body.gloss .lux-grain{opacity:.02}
}
@media (max-width:700px){
  body.gloss .lux-aurora{filter:blur(56px) saturate(112%);opacity:.85}
  body.gloss .lux-streak,body.gloss .gl-visual .gl-frame::before{display:none}
  body.gloss{--lux-depth:0 2px 8px rgba(0,62,36,.08),0 14px 30px -12px rgba(0,62,36,.16)}
}
@media (prefers-reduced-motion:reduce){
  
  body.gloss .lux-aurora,
  body.gloss .lux-aurora::after,
  body.gloss .gl-hero .orb{animation:none;transform:none;will-change:auto}
  body.gloss .lux-streak,
  body.gloss .grad-text,
  body.gloss .gl-stats .num,
  body.gloss .gl-visual .gl-frame::before,
  body.gloss .reveal{filter:none;transform:none;opacity:1}
  body.gloss .lux-tilt{transform:none}
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  body.gloss .lux,body.gloss .gl-card,body.gloss .gl-bookbar,body.gloss .gl-stat{
    background-image:none;background-color:rgba(255,255,255,.96);
  }
}

@media (max-width:1120px){
  body.gloss .site-header,
  body.gloss .site-header.scrolled{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:#F4FBF8;
  }
}