:root{
  --font-head:"Plus Jakarta Sans",sans-serif;--font-body:"Inter",system-ui,sans-serif;--font-mono:"JetBrains Mono",monospace;
  --accent:#D0607A;--accent-80:rgba(208,96,122,.85);--accent-hi:#B2465F;
  --bg:#070607;--fg:#f4f1f2;--fg2:#b5b9c1;--fg3:#8b919b;--fg4:#6b7280;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --orb:radial-gradient(circle at 50% 30%,#b2465f 0%,#7a1f33 55%,#2a0711 100%);
  --hi:inset 0 1px 1px rgba(255,255,255,.18),0 8px 30px rgba(0,0,0,.35);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased;color:#e9e7e8;background:var(--bg);font-family:var(--font-body)}
a{color:inherit;text-decoration:none}
h1,h2,p{margin:0;font-weight:inherit}
ul{list-style:none;margin:0;padding:0}
.i{width:16px;height:16px;flex-shrink:0}.i14{width:14px;height:14px}.i12{width:12px;height:12px}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26)}

/* background: near-black with a faint burgundy → slate → neutral glow, stacked so they crossfade */
#bg{position:fixed;inset:0;z-index:-10}
#bg>div{position:absolute;inset:0;transition:opacity 1.2s cubic-bezier(.65,0,.35,1)}
.bg0{background:radial-gradient(circle at center,#22151a 0%,#110e10 45%,#070607 100%)}
.bg1{background:radial-gradient(circle at center,#191d23 0%,#0f1114 45%,#070607 100%);opacity:0}
.bg2{background:radial-gradient(circle at center,#1b1a1c 0%,#100f11 45%,#070607 100%);opacity:0}
#bg>.on{opacity:1}
#scene{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none} /* lvh: ignores mobile address bar so the canvas never resizes mid-scroll */
#scene canvas{display:block;width:100%;height:100%}


/* header */
#hdr{position:fixed;top:0;left:0;right:0;z-index:30;height:80px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;opacity:0;transform:translateY(-16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
#hdr a{pointer-events:auto}
/* wordmark matches aleuraautomation.com */
.wordmark{display:flex;gap:.4em;font:500 18px var(--font-body);letter-spacing:.18em}
.wm-1{color:#D8425E}.wm-2{color:#7E7E79}
@media (max-width:479px){#hdr .wm-2{display:none}}
.nav{display:none;position:absolute;left:50%;transform:translateX(-50%);gap:40px;font:500 14px var(--font-body)}
@media (min-width:1200px){.nav{display:flex}}
.nav a{transition:opacity .2s}.nav a:hover{opacity:.6}
.cta{display:inline-flex;align-items:center;gap:12px;padding:6px 6px 6px 20px;border-radius:99px;background:rgba(255,255,255,.06);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.08);border-top-color:rgba(255,255,255,.22);box-shadow:var(--hi);font:500 13px var(--font-body);color:var(--fg)}
.orb{display:grid;place-items:center;border-radius:50%;background:var(--orb);color:#fff;transition:transform .3s var(--ease)}
.cta .orb{width:32px;height:32px}.cta:hover .orb{transform:scale(1.05)}

/* sections */
.sec{position:relative;z-index:10;min-height:100svh;pointer-events:none}
.sec :is(p,h1,h2,a,.card){pointer-events:auto}
.hi{opacity:0;transform:translateY(var(--y,16px));transition:opacity var(--t,.8s) var(--ease) var(--d,0s),transform var(--t,.8s) var(--ease) var(--d,0s)}
.revealed #hdr,.revealed .hi{opacity:1;transform:none}
.revealed .hero{opacity:1}
#hdr.hdr-hidden{opacity:0;transform:translateY(-100%);transition-duration:.45s}
#hdr.hdr-hidden a{pointer-events:none}
.rv{opacity:0;transform:translateY(var(--ry,42px));filter:blur(var(--rb,8px));transition:opacity var(--rt,1.5s) var(--ease) var(--d,0s),transform var(--rt,1.5s) var(--ease) var(--d,0s),filter var(--rt,1.5s) var(--ease) var(--d,0s)}
.rv.in{opacity:1;transform:none;filter:blur(0)}
.fu{--ry:24px;--rb:0px;--rt:.7s}

.hero{display:flex;align-items:flex-end;padding:0 24px 48px;opacity:0;transition:opacity .6s}
.hero-row{width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.hero-l{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.hero-h{font:600 2.6rem/.95 var(--font-head);letter-spacing:-.045em;color:var(--fg)}
.hero-p{font:400 15px/1.5 var(--font-body);color:var(--fg2)}
.credit{margin-top:20px;font:400 10px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-80);white-space:nowrap}
.cue{display:none;margin-top:16px;align-items:center;gap:8px;color:var(--fg3);font:400 10px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulse{50%{opacity:.5}}

.h2,.h4{font-family:var(--font-head);font-weight:600;letter-spacing:-.025em;color:var(--fg)}
.h2{font-size:2.6rem;line-height:1}
.h4{font-size:2.8rem;line-height:1}
.body-p{font:400 16px/1.55 var(--font-body);color:var(--fg2)}
/* split headings: each word is a mask (.tw) its inner span slides out from behind; vertical bleed keeps descenders unclipped */
.te{display:flex;flex-wrap:wrap;column-gap:.3em}
.tw{display:inline-block;overflow:hidden;padding-block:.25em;margin-block:-.25em}
.tw-i{display:inline-block;opacity:0;transform:translateX(-40px)}
.tw-br{flex-basis:100%;height:0}
.release .h4{justify-content:center}
.mt8{margin-top:32px}

.drop{display:flex;align-items:center;padding:128px 24px 160px}
.grid12{width:100%;display:grid;gap:40px;align-items:start}
.drop .body-p{max-width:32rem}
.cards{display:flex;flex-direction:column;gap:14px}
.card{padding:1px;border-radius:1.4rem;background:linear-gradient(to bottom,rgba(255,255,255,.22),rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:0 14px 40px -12px rgba(0,0,0,.6);transition:transform .4s var(--ease)}
.card:hover{transform:translateY(-2px)}
.card-in{position:relative;overflow:hidden;border-radius:1.35rem;background:rgba(18,16,18,.55);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:20px 24px}
.card-in::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.3),transparent)}
.card-hd{display:flex;align-items:center;gap:10px;font:400 10px var(--font-mono);letter-spacing:.15em}
.card-hd .k{text-transform:uppercase;color:var(--fg4)}
.dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b2465f,#7a1f33);box-shadow:0 0 8px rgba(178,70,95,.55)}
.card-v{margin-top:12px;font:600 18px var(--font-head);color:var(--fg)}
.card-d{margin-top:4px;font:400 13px var(--font-body);color:var(--fg3)}

.shape{display:flex;flex-direction:column;justify-content:space-between;padding:144px 24px}
.shape .h2{max-width:42rem}
.shape-b{align-self:flex-end;max-width:24rem}

.release{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:144px 24px}
.rel-in{max-width:48rem}
.release .body-p{max-width:30rem;margin-inline:auto}
.loop{margin-top:48px;display:grid;gap:14px;text-align:left}
.pricing{display:flex;flex-direction:column;align-items:center;text-align:center;padding:144px 24px}
.pricing .h2{justify-content:center}
.pricing .body-p{max-width:32rem}
.plans{margin-top:48px;width:100%;max-width:52rem;display:grid;gap:16px;text-align:left}
.plan .card-in{height:100%;padding:28px}
.plan.feat{background:linear-gradient(to bottom,rgba(208,96,122,.6),rgba(122,31,51,.25),rgba(255,255,255,.03))}
.plan-name{font:600 15px var(--font-head);color:var(--fg)}
.price{margin-top:18px;display:flex;align-items:baseline;gap:8px;font:600 48px/1 var(--font-head);letter-spacing:-.03em;color:var(--fg)}
.price small{font:400 14px var(--font-body);letter-spacing:0;color:var(--fg3)}
.setup{margin-top:8px;font:400 14px var(--font-body);color:var(--fg2)}
.setup span{color:var(--fg4)}
.price-note{margin-top:20px;font:400 13px var(--font-body);color:var(--fg3)}
.plan ul,.qual ul{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:10px;font:400 14px/1.45 var(--font-body);color:var(--fg2)}
.plan li,.qual li{display:flex;gap:10px}
.plan li::before,.qual li::before{content:"";flex-shrink:0;margin-top:.55em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.loop .card-d{margin-top:10px}
/* light left behind once the spheres fly into the lens; opacity driven by scroll */
#glow{position:fixed;inset:0;z-index:-5;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,rgba(178,70,95,.32) 0%,rgba(122,31,51,.14) 28%,transparent 62%)}

/* footer */
footer{position:relative;z-index:10;overflow:hidden;background:#000;color:#fff;border-top:1px solid rgba(255,255,255,.08);border-radius:2.5rem 2.5rem 0 0}
.ft-body{position:relative;padding:64px 24px 40px}
.ft-grid{display:grid;gap:48px}
.ft-t{font:400 10px var(--font-mono);letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.ft-wm{flex-wrap:wrap;font-size:clamp(22px,3.4vw,48px)}
.ft-actions{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.book{display:inline-flex;align-items:center;gap:16px;padding:8px 8px 8px 28px;border-radius:99px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);font:500 16px var(--font-body);transition:background .2s}
.book:hover{background:rgba(255,255,255,.1)}
.book .orb{width:40px;height:40px}.book svg{transition:transform .4s var(--ease)}.book:hover svg{transform:rotate(45deg)}
.mail{font:400 15px var(--font-body);color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.2);transition:color .2s}
.mail:hover{color:#fff}
.ft-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.ft-cols ul{margin-top:20px;display:grid;gap:12px}
.ft-cols a{display:inline-flex;align-items:center;gap:6px;font:400 15px var(--font-body);color:rgba(255,255,255,.75);transition:color .2s}
.ft-cols a:hover{color:#fff}
.ft-cols a svg{opacity:0;transform:translate(-4px,4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.ft-cols a:hover svg{opacity:1;transform:none}
.ft-bar{position:relative;margin-top:80px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mono11{font:400 11px var(--font-mono);color:rgba(255,255,255,.4)}

@media (min-width:640px){
  .hero-h{font-size:3.75rem;line-height:1}
  .h2{font-size:3.75rem}.h4{font-size:4.5rem}
}
@media (min-width:768px){
  #hdr{height:96px;padding:0 48px}#hdr .wordmark{font-size:20px}
  .cta{padding-left:24px;font-size:14px}
  .hero{padding:0 48px 56px}
  .hero-h{font-size:clamp(3.75rem,6.4vw,90px);line-height:1}
  .cue{display:flex}
  .h2{font-size:80px;line-height:.92}.h4{font-size:88px;line-height:.92}.body-p{font-size:19px}
  .loop{grid-template-columns:repeat(3,1fr)}
  .plans{grid-template-columns:1fr 1fr}.pricing{padding:176px 48px}
  .drop{padding:160px 48px}.shape{padding:176px 48px}.shape-b{text-align:right}.release{padding:176px 48px}
  footer{border-radius:4rem 4rem 0 0}.ft-body{padding:96px 48px 40px}
  .book{font-size:18px}.ft-bar{margin-top:112px}
}
@media (min-width:1024px){
  .hero-row{flex-direction:row;align-items:flex-end}.hero-r{width:260px;flex-shrink:0}
  .grid12,.ft-grid{grid-template-columns:repeat(12,1fr)}
  .grid12{gap:64px}
  .c7{grid-column:span 7}.c5{grid-column:span 5;padding-top:12px}
  .ft-cta{grid-column:span 7}.ft-cols{grid-column:9 / span 4}
}
/* about: founder letter (shares the .built container and text styles) */
.built.founder{padding-top:128px}
.founder .founder-eyebrow{margin-bottom:16px;font:500 14px var(--font-body);color:var(--accent)}
.founder .sign{margin-top:36px}
.founder .sign-name{font:600 16px var(--font-head);color:var(--fg)}
.founder .sign-role{margin-top:4px;font:400 13px var(--font-body);color:var(--fg3)}
.founder .book{margin-top:32px}
@media (min-width:1024px){.built.founder{padding-top:176px}}
/* about: built around you */
.built{position:relative;max-width:72rem;margin:0 auto;padding:32px 24px 128px}
.built .h2{font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:1.05}
.accent{color:#D8425E}
.rule{width:60px;height:3px;border-radius:2px;background:#D8425E;margin:24px 0 32px}
.built p{max-width:52rem;font:400 16px/1.8 var(--font-body);color:var(--fg3)}
.built p+p{margin-top:20px}
@media (min-width:1024px){.built{padding:48px 48px 160px}.built p{font-size:18px}}
/* legal pages */
.built.legal{padding-top:128px}
.legal-body{max-width:48rem}
.legal-body h2{margin:44px 0 12px;font:600 20px/1.3 var(--font-head);color:var(--fg)}
.legal .legal-body p,.legal-body li{font:400 15px/1.75 var(--font-body);color:var(--fg2)}
.legal .legal-body p+p{margin-top:12px}
.legal-body ul{margin:12px 0;padding-left:20px;list-style:disc;display:grid;gap:8px}
.legal-body li::marker{color:var(--accent)}
.legal-body a{color:var(--fg);border-bottom:1px solid rgba(255,255,255,.25)}
.legal-body strong{color:var(--fg);font-weight:600}
@media (min-width:1024px){.built.legal{padding-top:176px}}
/* blog (pages generated by tools/build_blog.py) */
.built:is(.post,.blog){padding-top:128px}
.post{max-width:50rem}
.post-meta{font:400 12px var(--font-mono);letter-spacing:.04em;color:var(--fg4)}
.built .post-meta{margin-bottom:20px;font-size:12px;line-height:1.5}
.post-meta a{color:var(--accent)}
.prose{font:400 17px/1.8 var(--font-body);color:var(--fg2)}
.built .prose p{font:inherit;color:inherit}
.prose>*+*{margin-top:20px}
.prose h2{margin-top:52px;font:600 26px/1.25 var(--font-head);letter-spacing:-.02em;color:var(--fg)}
.prose h3{margin-top:36px;font:600 20px/1.3 var(--font-head);color:var(--fg)}
.prose :is(ul,ol){padding-left:22px;display:grid;gap:8px}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li::marker{color:var(--accent)}
.prose a,.post-by a{color:var(--fg);border-bottom:1px solid rgba(255,255,255,.3)}
.prose strong{color:var(--fg);font-weight:600}
.prose blockquote{margin-inline:0;padding-left:20px;border-left:3px solid #D8425E;color:var(--fg)}
.prose img{max-width:100%;height:auto;border-radius:1rem}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose :is(th,td){padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}
.prose th{color:var(--fg);font-weight:600}
.built .post-by{margin-top:48px;font-size:15px;color:var(--fg3)}
.post-cta{margin-top:32px}
.post-cta .card-in{padding:28px}
.built .post-cta p{font:400 15px/1.6 var(--font-body);color:var(--fg2)}
.built .post-cta .post-cta-h{margin-bottom:8px;font:600 20px/1.3 var(--font-head);color:var(--fg)}
.post-cta-btns{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.post-list{margin-top:48px;display:grid;gap:16px;max-width:52rem}
.post-item .card-in{padding:28px}
.post-item:hover{transform:translateY(-2px)}
.post-item-h{font:600 22px/1.3 var(--font-head);letter-spacing:-.015em;color:var(--fg)}
.built .post-item-d{margin-top:8px;font:400 15px/1.6 var(--font-body);color:var(--fg3)}
@media (min-width:1024px){.built:is(.post,.blog){padding-top:176px}.prose{font-size:18px}.prose h2{font-size:30px}}
.ft-legal{margin-left:auto;display:flex;gap:20px}
.ft-legal a{font:400 11px var(--font-mono);color:rgba(255,255,255,.4);transition:color .2s}
.ft-legal a:hover{color:#fff}
.ck-open{padding:0;background:none;border:0;cursor:pointer;font:400 11px var(--font-mono);color:rgba(255,255,255,.4);transition:color .2s}
.ck-open:hover{color:#fff}
/* cookie banner (only shown once a Meta Pixel ID is set) */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:40;max-width:420px;padding:18px 20px;border-radius:1.2rem;background:rgba(14,12,13,.96);border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 40px -12px rgba(0,0,0,.7);font:400 13px/1.5 var(--font-body);color:var(--fg2)}
.cookies a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.ck-btns{margin-top:14px;display:flex;gap:10px}
.ck-btns button{flex:1;padding:10px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--fg);font:500 13px var(--font-body);cursor:pointer;transition:background .2s}
.ck-btns button:hover{background:rgba(255,255,255,.12)}
/* pricing: qualified lead explainer */
.qual{margin-top:72px;width:100%;max-width:52rem;text-align:left}
.qual-h{text-align:center;font:600 clamp(1.5rem,2.6vw,2rem)/1.15 var(--font-head);letter-spacing:-.02em;color:var(--fg)}
.qual-grid{margin-top:28px;display:grid;gap:16px}
.qual .card-in{height:100%;padding:24px 28px}
.qual-t{font:600 15px var(--font-head);color:var(--fg)}
.qual .no li::before{background:var(--fg4)}
.qual-note{margin-top:20px;text-align:center;font:400 13px/1.6 var(--font-body);color:var(--fg3)}
@media (min-width:768px){.qual-grid{grid-template-columns:1fr 1fr}}
/* Calendly popup (site.js). Pre-loads at opacity 0: Chrome stalls rendering in display:none/visibility:hidden cross-origin iframes */
.cal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(7,6,7,.6);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.cal.open{opacity:1;pointer-events:auto;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cal-card{position:relative;width:min(1100px,100%);height:min(860px,100%)} /* transparent: Calendly draws its own card */
.cal iframe{position:relative;width:100%;height:100%;border:0;opacity:0;transition:opacity .4s}
.cal.ready iframe{opacity:1}
.cal-spin{position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:var(--accent);animation:calspin .8s linear infinite}
.cal-slow{position:absolute;top:calc(50% + 32px);left:0;right:0;text-align:center;font:400 13px var(--font-body);color:var(--fg3);text-decoration:underline;text-underline-offset:2px;opacity:0;animation:calslow .3s 6s forwards}
.cal.ready :is(.cal-spin,.cal-slow){display:none}
@keyframes calspin{to{transform:rotate(360deg)}}
@keyframes calslow{to{opacity:1}}
.cal-x{position:fixed;top:20px;right:20px;z-index:1;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.cal-x .i{width:18px;height:18px}
@media (max-width:767px){
  .cal{padding:0}
  .cal-card{width:100%;height:100%}
  .cal-x{top:10px;right:10px;background:rgba(26,23,24,.9)}
}
/* phones: let the hero headline wrap naturally instead of at the forced break */
@media (max-width:767px){.hero-h .tw-br{display:none}}
/* mobile menu (below 1200px, where .nav is hidden) */
.menu-btn{display:none;margin-left:auto;margin-right:10px;width:40px;height:40px;padding:0;border-radius:50%;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);cursor:pointer;pointer-events:auto}
.menu-btn span{display:block;width:16px;height:1.5px;border-radius:2px;background:var(--fg);transition:transform .3s var(--ease)}
.menu-open .menu-btn span:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-open .menu-btn span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:1199px){.menu-btn{display:flex}}
.mnav{position:fixed;top:0;left:0;bottom:0;width:70%;z-index:29;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:110px 24px 40px;overflow-y:auto;background:rgba(7,6,7,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-right:1px solid rgba(255,255,255,.08);transform:translateX(-100%);visibility:hidden;transition:transform .45s var(--ease),visibility .45s}
.menu-open .mnav{transform:none;visibility:visible}
/* dims the uncovered 30%; tapping it closes the menu */
body::before{content:"";position:fixed;inset:0;z-index:28;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
body.menu-open::before{opacity:1;visibility:visible}
.mnav>a:not(.book){font:600 clamp(22px,6vw,28px)/1.45 var(--font-head);letter-spacing:-.02em;color:var(--fg)}
.mnav>a[data-blog]:not([href]){color:var(--fg4)}
.mnav-book{margin-top:28px}
#hdr.hdr-hidden .menu-btn{pointer-events:none}
.menu-open #hdr{opacity:1;transform:none}
.menu-open #hdr a,.menu-open #hdr .menu-btn{pointer-events:auto}
@media (min-width:768px){.mnav{padding:140px 40px 48px}}
/* header revealed mid-page (scroll up, below 1200px) gets a readable backdrop */
#hdr{transition:opacity .8s var(--ease),transform .8s var(--ease),background-color .3s}
#hdr.hdr-solid{background-color:rgba(7,6,7,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}