/* BLVCKOUT home page – ported from the Shopify "Custom Liquid" section. */
/* Tokens */
.bo{
  --void:#000;
  --surface:#0e0e0e;
  --line:#272725;
  --smoke:#8b8b85;
  --ash:#c7c7c2;
  --bone:#efeee9;
  --gothic:'Grenze Gotisch',serif;
  --text:'Grenze',Georgia,serif;
  --pad:clamp(20px,5vw,48px);
  --max:1240px;
  --notch:12px;
  --logo-w:140vw;
  --logo-y:37svh;
  position:relative;
  width:100vw;
  max-width:100vw;
  margin-inline:calc(50% - 50vw);
  isolation:isolate;
  clip-path:inset(0);
  overflow-x:clip;
  background:var(--void);
  color:var(--bone);
  font-family:var(--text);
  font-size:clamp(17px,1rem + .25vw,19px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
html:has(.bo){scroll-behavior:smooth}
.bo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html:has(.bo),body:has(.bo){overflow-x:clip}
.bo *,.bo *::before,.bo *::after{box-sizing:border-box}
.bo img{max-width:100%;display:block}
.bo a{color:inherit}
.bo h1,.bo h2,.bo h3,.bo p,.bo figure,.bo blockquote,.bo dl,.bo dd{margin:0}
.bo h1,.bo h2,.bo h3{font-family:var(--gothic)!important;font-weight:600;line-height:.95;letter-spacing:0!important;text-transform:none!important;color:var(--bone)!important}
.bo :focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.bo .bo-wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* Buttons */
.bo .bo-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 36px;font-family:var(--text);font-weight:600;font-size:1.12rem;letter-spacing:.04em;line-height:1;text-decoration:none;border:0;cursor:pointer;background:var(--bone);color:var(--void);clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch));transition:background-color .2s,transform .1s}
.bo .bo-btn:hover{background:#fff}
.bo .bo-btn:active{transform:scale(.98)}
.bo .bo-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--void),inset 0 0 0 5px var(--bone)}
.bo .bo-stars{display:inline-flex;gap:2px;color:var(--bone)}
.bo .bo-stars svg{width:15px;height:15px;fill:currentColor}

/* Hero */
.bo .bo-hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;justify-items:center;overflow:hidden;padding:calc(40px + env(safe-area-inset-top,0px)) var(--pad) calc(96px + env(safe-area-inset-bottom,0px));text-align:center}
.bo .bo-hero-logo{position:absolute;z-index:-2;left:50%;top:var(--logo-y);width:var(--logo-w);max-width:none;height:auto;transform:translate(-50%,-50%);mix-blend-mode:screen;animation:bo-fade 1.6s ease-out both}
.bo .bo-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(0,0,0,.35) 0,transparent 22%,transparent 50%,rgba(0,0,0,.82) 74%,#000 100%)}
.bo .bo-hero-inner{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center}
.bo .bo-name{font-family:var(--text);font-weight:600;font-size:clamp(2.3rem,10.5vw,4.4rem);letter-spacing:.24em;margin-right:-.24em;line-height:1;animation:bo-rise .6s .2s ease-out both}
.bo .bo-claim{margin-top:10px;font-family:var(--gothic);font-weight:500;font-size:clamp(1.5rem,6.4vw,2.4rem);line-height:1.1;color:var(--ash);animation:bo-rise .6s .3s ease-out both}
.bo .bo-hero-cta{margin-top:30px;width:min(340px,100%);min-height:62px;font-size:1.2rem;animation:bo-rise .6s .4s ease-out both}
.bo .bo-perks{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:10px 18px;font-size:.84rem;line-height:1.2;color:var(--ash);text-align:left;animation:bo-rise .6s .5s ease-out both}
.bo .bo-perks li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.bo .bo-perks svg{flex:none;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.bo .bo-cue{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:46px;height:46px;margin-left:-23px;display:grid;place-items:center;color:var(--smoke);animation:bo-fade .6s .7s ease-out both}
.bo .bo-cue svg{width:22px;height:22px}
@keyframes bo-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bo-fade{from{opacity:0}to{opacity:1}}

/* Fog + lightning */
.bo .bo-fog{position:absolute;left:0;bottom:-8%;width:200%;height:65%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 18% 38% at 12% 62%,rgba(205,205,200,.14),transparent 70%),radial-gradient(ellipse 26% 32% at 42% 78%,rgba(205,205,200,.11),transparent 70%),radial-gradient(ellipse 20% 36% at 74% 58%,rgba(205,205,200,.13),transparent 70%),radial-gradient(ellipse 14% 24% at 92% 82%,rgba(205,205,200,.09),transparent 70%);background-size:50% 100%;background-repeat:repeat-x;animation:bo-drift 55s linear infinite,bo-fade 2.5s .3s ease-out both}
.bo .bo-flash{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(ellipse 70% 55% at var(--fx,50%) 0,rgba(215,222,255,.38),rgba(255,255,255,.06) 60%,transparent 85%)}
.bo .bo-bolt{position:absolute;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none;opacity:0;overflow:visible;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 16px rgba(170,190,255,.9))}
.bo .bo-bolt path{fill:none;stroke:#f4f6ff;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.bo .bo-flash.is-strike,.bo .bo-bolt.is-strike{animation:bo-strike .75s ease-out}
.bo .bo-hero-logo{translate:0 var(--py,0px);scale:var(--ps,1);will-change:translate,scale}
.bo .bo-quote-sec{position:relative;overflow:hidden;padding-block:clamp(110px,16vw,190px)!important}
.bo .bo-quote-sec .bo-fog{height:80%;bottom:5%}
.bo .bo-quote-sec .bo-fog,.bo .bo-quote-sec .bo-flash,.bo .bo-quote-sec .bo-bolt{-webkit-mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent)}
.bo .bo-ash{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* Scroll reveals */
.bo .bo-in{transition:opacity 1s ease-out var(--d,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),filter 1s ease-out var(--d,0s)}
.bo .bo-in.is-hidden{opacity:0;transform:translateY(34px);filter:blur(8px)}
.bo .bo-faq details{transition:border-color .3s}
.bo .bo-faq details:hover{border-color:var(--smoke)}
@keyframes bo-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bo-strike{0%{opacity:0}6%{opacity:1}14%{opacity:.1}24%{opacity:.75}40%{opacity:.05}100%{opacity:0}}

/* Sections */
.bo .bo-section{padding-block:clamp(80px,13vw,150px)}
.bo .bo-section+.bo-section{padding-top:0}
.bo .bo-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;margin-bottom:clamp(32px,5vw,56px)}
.bo .bo-h2{font-size:clamp(2.8rem,11vw,6rem);letter-spacing:0!important;word-spacing:normal!important;text-transform:none!important;overflow-wrap:normal;word-break:normal;hyphens:none}
.bo .bo-lead{font-size:clamp(1.15rem,1rem + .6vw,1.4rem);line-height:1.45;color:var(--ash);max-width:34ch}


/* Quote */
.bo .bo-quote{text-align:center;display:flex;flex-direction:column;align-items:center}
.bo .bo-quote .bo-stars svg{width:18px;height:18px}
.bo .bo-quote blockquote{margin-top:22px;max-width:20ch;font-family:var(--gothic);font-weight:500;font-size:clamp(2.4rem,8vw,4.6rem);line-height:1.05;text-shadow:0 0 40px rgba(220,225,255,.15)}
.bo .bo-quote figcaption{margin-top:22px;font-size:1rem;letter-spacing:.14em;color:var(--smoke)}
.bo .bo-quote figcaption::before{content:"— "}
.bo .bo-reveal.is-hidden{opacity:0;transform:translateY(24px);filter:blur(6px)}
.bo .bo-reveal{transition:opacity 1.2s ease-out,transform 1.2s ease-out,filter 1.2s ease-out}

/* Wanderer */
.bo .bo-wander{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}
.bo .bo-wander-text .bo-h2{margin-bottom:26px}
.bo .bo-wander-text p{max-width:52ch;color:var(--ash)}
.bo .bo-wander-text p+p{margin-top:16px}
.bo .bo-wander-text .bo-lead{font-family:var(--gothic);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);line-height:1.15;color:var(--bone)}
.bo .bo-wander-text .bo-btn{margin-top:30px}
.bo .bo-char{position:relative;width:min(100%,460px,60vh);aspect-ratio:3/4;margin-inline:auto}
.bo .bo-char::before{content:"";position:absolute;inset:auto 5% 2%;height:50%;background:radial-gradient(ellipse 50% 50% at 50% 60%,rgba(225,230,255,.16),transparent 75%)}
.bo .bo-char img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 30px rgba(220,225,255,.10))}

/* FAQ */
.bo .bo-faq{max-width:820px;border-top:1px solid var(--line)}
.bo .bo-faq details{border-bottom:1px solid var(--line)}
.bo .bo-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:600;font-size:1.15rem;line-height:1.3}
.bo .bo-faq summary::-webkit-details-marker{display:none}
.bo .bo-faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform .25s}
.bo .bo-faq details[open] summary::after{transform:rotate(45deg)}
.bo .bo-faq details p{padding-bottom:24px;color:var(--ash);max-width:62ch}

/* Mobile floating buy button */
.bo .bo-buybar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;transform:translate(-50%,calc(100% + 40px));transition:transform .35s ease;filter:drop-shadow(0 6px 18px rgba(0,0,0,.7))}
.bo .bo-buybar.is-on{transform:translate(-50%,0)}
.bo .bo-buybar .bo-btn{min-height:44px;padding:0 26px;font-size:.98rem;white-space:nowrap;--notch:8px}
.bo{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}

/* Breakpoints */
@media (min-width:900px){
  .bo{--logo-w:min(1600px,104vw);--logo-y:43svh}
  .bo .bo-hero{padding-bottom:13vh}
  .bo .bo-perks{grid-template-columns:repeat(4,auto);gap:10px 30px;font-size:.92rem}
  .bo .bo-hero::before{background:radial-gradient(ellipse 34% 26% at 50% 74%,rgba(0,0,0,.8),transparent 75%),linear-gradient(to bottom,rgba(0,0,0,.35) 0,transparent 25%,transparent 68%,#000 100%)}
  .bo .bo-buybar{display:none}
  .bo{padding-bottom:0}
  .bo .bo-wander{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,6vw,80px)}
  .bo .bo-faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:60px;align-items:start}
}
@media (max-width:899px){
  .bo .bo-wander{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .bo .bo-char{width:calc(100% + var(--pad));margin-right:calc(-1 * var(--pad));aspect-ratio:auto}
  .bo .bo-char img{height:auto;scale:1.15;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
  html:has(.bo){scroll-behavior:auto}
  .bo *,.bo *::before,.bo *::after{animation:none!important;transition:none!important}
}