/* CALM LOOK (2026-10-17, review study, open any page with ?look=calm; ?look=default goes back; the choice follows you across pages).
   From the site review: keep it premium and not overworked. One effect per section, red as an accent only (buttons, one word per
   heading, key figures, icon discs), glass in a neutral graphite tint instead of red, half the background glows, benefit texts shown
   at once instead of hidden behind a flip. The home page states what SPORTLAZ does and shows proof in the first screen. */

/* new home pieces exist only in this look */
.cm-kick,.cm-proof{display:none}

html[data-look="calm"]{
  --lg-bg:radial-gradient(120% 55% at 30% -18%,rgba(255,255,255,.15),rgba(255,255,255,.03) 45%,transparent 46%),linear-gradient(180deg,rgba(18,18,22,.42),rgba(12,12,15,.58) 60%,rgba(34,14,18,.34));
  --lg-shadow:inset 1px 1px 0 rgba(255,255,255,.26),inset -1px -1px 0 rgba(255,255,255,.07),0 40px 70px -40px rgba(0,0,0,1);
  --lg-edge:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 24%,rgba(255,255,255,.03) 60%,rgba(242,84,91,.32))}

/* glass: neutral, the cursor light white only */
html[data-look="calm"] .gx::after{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.06),transparent 55%)!important}
html[data-look="calm"] .gx.is-core{background:var(--lg-bg)!important}
html[data-look="calm"] .gx.is-core::before{background:linear-gradient(145deg,rgba(242,84,91,.85),rgba(242,84,91,.25) 26%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.18) 100%)!important}
html[data-look="calm"] .ha .pc,html[data-look="calm"] .ha .pc:hover{box-shadow:var(--lg-shadow)!important}

/* backgrounds: half the red light, the rest quieter; section sheets in neutral black */
html[data-look="calm"] :is(.haze.h3,.hz3,.b6 .a3,.b6 .a4,.sb .z2){display:none!important}
html[data-look="calm"] :is(.haze,.hz,.sb .hz){opacity:.55}
html[data-look="calm"] body[data-dv~="c"] :is(#why,#process,section.end,.sheet)::before{background:linear-gradient(180deg,#0D0D10,#09090B 280px,#050505 70%)!important}
html[data-look="calm"] .gl .why-lines{opacity:.5}

/* benefits: the text is on the card from the start, no flip */
html[data-look="calm"] .gl .face.back,html[data-look="calm"] .gl .hint{display:none!important}
html[data-look="calm"] .gl .flip .inner,html[data-look="calm"] .gl .slot.flipped .inner,html[data-look="calm"] .gl .slot:hover .inner{transform:none!important}
html[data-look="calm"] .gl .slot{cursor:default}
html[data-look="calm"] .gl .front .cm-txt{margin-top:12px;font-size:14px;line-height:1.55;color:#C9CDD4;max-width:30ch}
html[data-look="calm"] .gl .front .cm-txt b{color:#fff;font-weight:600}
html[data-look="calm"] .gl .front h3{margin-top:16px!important}

/* home: what we do, and proof, in the first screen */
html[data-look="calm"] .cm-kick{display:block;font-size:clamp(14px,1.05vw,16px);line-height:1.5;color:#A3A9B4;margin:0 0 calc(-1 * clamp(4px,1vh,12px))}
html[data-look="calm"] .cm-kick:first-line{color:inherit}
html[data-look="calm"] .cm-kick{font-weight:500}
html[data-look="calm"] .cm-kick{color:#fff}
html[data-look="calm"] .cm-kick span{color:#A3A9B4;font-weight:400}
html[data-look="calm"] .cm-proof{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
html[data-look="calm"] .cm-nums{display:flex;gap:clamp(18px,2.4vw,34px)}
html[data-look="calm"] .cm-nums span{display:flex;flex-direction:column;align-items:flex-end;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7D838E}
html[data-look="calm"] .cm-nums b{font-family:Geologica,Montserrat,sans-serif;font-size:clamp(20px,1.7vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:#fff;text-transform:none}
html[data-look="calm"] .cm-logos{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px)}
html[data-look="calm"] .cm-logos img{height:22px;width:auto;filter:grayscale(1) brightness(0) invert(1);opacity:.5}
@media (max-width:767px){
  html[data-look="calm"] .hf{flex-direction:column;align-items:flex-start!important;gap:14px}
  html[data-look="calm"] .cm-proof{align-items:flex-start}
  html[data-look="calm"] .cm-nums span{align-items:flex-start}
  html[data-look="calm"] .cm-nums b{font-size:19px}
  html[data-look="calm"] .cm-logos img{height:18px}
  html[data-look="calm"] .cm-kick{font-size:13.5px}
}

/* the red behind the glass shows through less: the glass blurs without boosting colour, and the lights behind are fainter */
html[data-look="calm"]{--lg-bf:blur(10px) saturate(1.05) brightness(.82)}
html[data-look="calm"] body.lg-ok{--lg-bf:url(#lg) blur(8px) saturate(1.05) brightness(.82)}
html[data-look="calm"] .gl .card{-webkit-backdrop-filter:blur(10px) saturate(1.05) brightness(.82)!important;backdrop-filter:blur(10px) saturate(1.05) brightness(.82)!important}
html[data-look="calm"] :is(.gl .haze,.haze,.hz){opacity:.32}
html[data-look="calm"] .ha .pillars::before{opacity:.45}
html[data-look="calm"] .gl .card{background:radial-gradient(130% 70% at 18% -12%,rgba(255,255,255,.15),transparent 52%),linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 42%,rgba(255,255,255,.01) 64%,rgba(30,12,16,.25))!important}