*,*::before,*::after{box-sizing:border-box}
img,picture{max-width:100%;
height:auto}
html,body{max-width:100%;
overflow-x:hidden}
:root{--brand:#E3AC2E;
--brand2:#F1C14B;
--brand3:#C8961F;
--bg:#0B0B0C;
--text:#FFFFFF;
--muted:rgba(255,255,255,.78);
--glass:rgba(255,255,255,.06);
--ring:rgba(255,255,255,.16);
--gap-hero-contact:clamp(1.2vh,3.4vh,5.4vh);
--gap-contact-copyright:clamp(0.8vh,2.6vh,4.2vh);
--center-shift:-1.2vh;
--logo-h:clamp(22px,4.2vh,56px)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;
font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
background:var(--bg);
color:#fff}

@media(min-width:1024px){
html,body{overflow:hidden}
}
.hero{position:relative;
min-height:100dvh;
display:grid;
grid-template-rows:auto 1fr auto auto;
isolation:isolate}
.hero::before{content:'';
position:absolute;
inset:0;
z-index:-3;
background:#0B0B0C center/cover no-repeat;
transform:translate3d(var(--px,0),var(--py,0),0) scale(1.02);
transition:transform 120ms ease-out;
filter:saturate(1.02) contrast(1.04) brightness(.78) blur(.6px)}
.overlay{position:absolute;
inset:0;
z-index:-2;
background:linear-gradient(to bottom,rgba(11,11,12,.25),rgba(11,11,12,.74))}
.auras{position:absolute;
z-index:-1;
filter:blur(90px);
opacity:.25}
.a1{top:-15%;
left:-10%;
width:40rem;
height:40rem;
background:radial-gradient(circle,var(--brand),transparent 70%)}
.a2{top:10%;
right:-12%;
width:34rem;
height:34rem;
background:radial-gradient(circle,var(--brand2),transparent 70%)}
.a3{left:35%;
bottom:-18%;
width:44rem;
height:44rem;
background:radial-gradient(circle,var(--brand3),transparent 70%)}

@keyframes floaty{
from{transform:translateY(0)}
to{transform:translateY(-10px)}
}
.a1,.a2,.a3{animation:floaty 4.5s ease-in-out infinite alternate}
.rise{opacity:0;
transform:translateY(8px);
animation:rise .6s ease forwards;
animation-delay:var(--d,0s)}

@keyframes rise{
to{opacity:1;
transform:none}
}
.nav{display:flex;
align-items:center;
justify-content:space-between;
padding:22px clamp(16px,4vw,40px)}
.wordmark{height:var(--logo-h);
width:auto;
image-rendering:-webkit-optimize-contrast}
.nav-links{display:flex;
gap:12px}
.link{color:var(--muted);
text-decoration:none;
border:0;
background:none;
cursor:pointer}
.link:hover{color:#fff}
.center{text-align:center;
padding:clamp(18px,4vw,46px) clamp(16px,4vw,48px) 0;
transform:translateY(var(--center-shift))}
.title{font-size:clamp(24px,3.5vw,65px);
font-weight:800;
letter-spacing:-.02em;
margin:0}
.subtitle{color:var(--muted);
margin:14px auto 27px;
max-width:54rem;
font-size:clamp(19px,2.6vw,24px)}
/* CTA spacing before contact */
.cta{margin-top:16px;
display:flex;
gap:12px;
justify-content:center;
flex-wrap:wrap}
.btn{position:relative;
overflow:hidden;
padding:12px 18px;
border-radius:14px;
font-weight:700;
text-decoration:none;
font-size:15px;
border:1px solid var(--ring);
background:var(--glass);
color:#fff;
transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand2));
border-color:transparent;
color:#1a1200;
box-shadow:0 0 22px rgba(227,172,46,.18)}
.shine::after{content:'';
position:absolute;
inset:0;
background:linear-gradient(110deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.15) 45%,rgba(255,255,255,0) 60%);
transform:translateX(-120%);
transition:transform .7s ease}
.shine:hover::after{transform:translateX(120%)}
.btn.ghost{background:rgba(255,255,255,.07)}
.contact{padding:var(--gap-hero-contact) clamp(16px,4vw,48px) 0;
max-width:980px;
margin:0 auto;
text-align:center}
.contact h2{font-size:clamp(24px,3.6vw,42px);
margin:0 0 12px}
.contact-grid{display:grid;
gap:12px;
justify-items:center}
.contact-row{display:grid;
grid-template-columns:70px 1fr;
gap:0;
width:100%;
max-width:760px;
text-decoration:none;
border-radius:14px;
overflow:hidden;
background:rgba(15,15,16,.78);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 8px 30px rgba(0,0,0,.18);
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.contact-row:hover{transform:translateY(-1px);
box-shadow:0 10px 34px rgba(0,0,0,.22);
border-color:rgba(255,255,255,.28)}
.icon-box{display:grid;
place-items:center;
background:var(--brand);
color:#1a1200;
border-right:1px solid color-mix(in oklab,var(--brand) 58%,black)}
.content{display:flex;
flex-direction:column;
justify-content:center;
gap:4px;
padding:12px 16px;
color:#fff;
text-align:left}
.content .label{color:rgba(255,255,255,.65);
font-size:14px}
.content .value{font-weight:800;
font-size:clamp(18px,2.4vw,24px)}
.messenger{margin-top:1.2vh}
.messenger .intro{font-weight:700}
.messenger .muted{color:rgba(255,255,255,.78);
margin-top:-4px}
.messenger-links{display:flex;
gap:10px;
justify-content:center;
margin-top:.6vh}
.pill{padding:8px 14px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid var(--ring);
color:#fff;
text-decoration:none;
transition:transform .15s ease,box-shadow .15s ease}
.pill:hover{transform:translateY(-1px);
box-shadow:0 6px 20px rgba(255,255,255,.08)}
.copyright{text-align:center;
padding:var(--gap-contact-copyright) 16px 16px;
color:rgba(255,255,255,.72)}
.copyright .foot-link{color:rgba(255,255,255,.72);
border:0;
background:none;
cursor:pointer;
  margin: 0 6px;
}
.copyright .foot-link:hover{color:#fff}

@media (max-height:740px){
:root{--center-shift:-0.6vh;
--gap-hero-contact:1.2vh}
.title{font-size:clamp(36px,7vw,78px)}
}

@media (max-width:768px){
.hero{overflow:hidden}
.a3{bottom:-6%;
height:36rem;
width:36rem}
.a1{top:-10%;
left:-12%}
.a2{right:-8%}
}
:root{--page-bottom-space:clamp(12px,2.75vh,42px)}
.copyright{padding-bottom:var(--page-bottom-space)}
main{padding-bottom:var(--page-bottom-space)}
@supports (padding:max(0px)){.copyright{padding-bottom:max(var(--page-bottom-space),env(safe-area-inset-bottom))}
main{padding-bottom:max(var(--page-bottom-space),env(safe-area-inset-bottom))}
}
:root{--soc-size:48px;
--soc-gap:10px}
.socials{display:grid;
justify-content:center;
align-content:center;
gap:var(--soc-gap) var(--soc-gap);
margin-top:clamp(12px,2.4vh,24px)}

@media (max-width:1023.98px){
.socials{grid-template-columns:repeat(4,var(--soc-size))}
}

@media (min-width:1024px){
.socials{grid-template-columns:repeat(8,var(--soc-size))}
}
.soc-btn{width:var(--soc-size);
height:var(--soc-size)}
.soc-btn i{font-size:calc(var(--soc-size) * 0.55);
color:#fff;
line-height:1;
opacity:.98;
transition:opacity .28s ease}
.soc-btn:hover i,.soc-btn:focus-visible i{opacity:1}
.soft-divider{width:min(92%,980px);
margin:clamp(12px,2.2vh,24px) auto clamp(16px,3vh,36px);
border:0;
height:1px;
background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.16),rgba(255,255,255,.04));
opacity:.9}
.socials .soc-btn{}
:root{--soc-size:48px;
--soc-gap:10px}
.socials{display:grid;
justify-content:center;
align-content:center;
gap:var(--soc-gap) var(--soc-gap);
margin-top:clamp(12px,2.4vh,24px)}

@media (max-width:1023.98px){
.socials{grid-template-columns:repeat(4,var(--soc-size))}
}

@media (min-width:1024px){
.socials{grid-template-columns:repeat(8,var(--soc-size))}
}
.soc-btn{width:var(--soc-size);
height:var(--soc-size);
border-radius:14px;
display:grid;
place-items:center;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 6px 20px rgba(0,0,0,.18);
transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,border-color .24s ease,background-color .24s ease}
.soc-btn i{font-size:calc(var(--soc-size) * 0.55);
color:#fff;
line-height:1;
opacity:.96;
transition:opacity .24s ease,filter .24s ease}
.soc-btn:hover,.soc-btn:focus-visible{transform:translateY(-3px) scale(1.06);
border-color:rgba(255,255,255,.40);
background-color:rgba(255,255,255,.10);
box-shadow:0 10px 28px rgba(0,0,0,.26),0 0 0 6px rgba(255,255,255,.06) inset;
outline:none}
.soc-btn:hover i,.soc-btn:focus-visible i{opacity:1;
filter:drop-shadow(0 1px 3px rgba(0,0,0,.25))}
.soc-btn:active{transform:translateY(-1px) scale(.98)}

@media (prefers-reduced-motion:reduce){
.soc-btn,.soc-btn:hover,.soc-btn:focus-visible{transition:none;
transform:none}
}
a.soc-btn,.soc-btn:link,.soc-btn:visited,.soc-btn:hover,.soc-btn:focus,.soc-btn:active{text-decoration:none !important;
color:inherit !important}
.soc-btn{border-radius:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 8px 28px rgba(0,0,0,.22)}
.soc-btn:hover,.soc-btn:focus-visible{transform:translateY(-2px) scale(1.05);
border-color:rgba(255,255,255,.36);
background-color:rgba(255,255,255,.11);
box-shadow:0 12px 36px rgba(0,0,0,.30)}

@media (prefers-reduced-motion:reduce){
.socials .soc-btn{}
}
.socials .soc-btn{will-change:transform}

@media (prefers-reduced-motion:reduce){
.socials .soc-btn{}
}
.socials .soc-btn{will-change:transform}
.socials .soc-btn:hover,.socials .soc-btn:focus-visible{transform:translateY(-3px) scale(1.06)}

@media (prefers-reduced-motion:reduce){
.socials .soc-btn{}
}
.socials .soc-btn{will-change:transform}
.socials .soc-btn:hover,.socials .soc-btn:focus-visible{transform:translateY(-3px) scale(1.06)}

@media (prefers-reduced-motion:reduce){
.socials .soc-btn{}
}
}

@media (prefers-reduced-motion:reduce){
.socials .soc-btn{transform:none !important}
}
}

@media (prefers-reduced-motion:reduce){
.socials .soc-btn{transform:none !important}
}
}

@media (prefers-reduced-motion:reduce){
.socials .soc-btn{transform:none !important}
}
@property --waveY{syntax:'<length>';
inherits:false;
initial-value:0px}
.socials .soc-btn{--waveY:0px;
--hoverScale:1;
--hoverRot:0deg;
transform:translate3d(0,var(--waveY),0) scale(var(--hoverScale)) rotate(var(--hoverRot));
will-change:transform}

@keyframes soc-seq-smooth{
0%{--waveY:0px}
3.5%{--waveY:-5px}
7%{--waveY:0px}
100%{--waveY:0px}
}
.socials .soc-btn{animation:soc-seq-smooth 9s cubic-bezier(.45,.05,.55,.95) infinite;
animation-delay:2s}
.socials .soc-btn:nth-child(1){animation-delay:calc(2s + 0.00s)}
.socials .soc-btn:nth-child(2){animation-delay:calc(2s + 0.35s)}
.socials .soc-btn:nth-child(3){animation-delay:calc(2s + 0.70s)}
.socials .soc-btn:nth-child(4){animation-delay:calc(2s + 1.05s)}
.socials .soc-btn:nth-child(5){animation-delay:calc(2s + 1.40s)}
.socials .soc-btn:nth-child(6){animation-delay:calc(2s + 1.75s)}
.socials .soc-btn:nth-child(7){animation-delay:calc(2s + 2.10s)}
.socials .soc-btn:nth-child(8){animation-delay:calc(2s + 2.45s)}
.soc-btn:hover,.soc-btn:focus-visible{--hoverScale:1.06;
--hoverRot:-1deg;
border-color:rgba(255,255,255,.40);
background-color:rgba(255,255,255,.10);
box-shadow:0 10px 28px rgba(0,0,0,.26),0 0 0 6px rgba(255,255,255,.06) inset;
outline:none}

@media(max-width:520px){

@keyframes soc-seq-smooth{
0%{--waveY:0px}
3.5%{--waveY:-4px}
7%{--waveY:0px}
100%{--waveY:0px}
}
}

@media(prefers-reduced-motion:reduce){
.socials .soc-btn{animation:none!important;
transform:none!important}
}
.contact-cta:last-child,.contact-cta:last-of-type{margin-bottom:0 !important;
padding-bottom:inherit !important}
:where(.contact,.contact-section,.contact-wrapper,.contact-list,.contact-cards) + .socials,.contact-cta + .socials{margin-top:var(--soc-block-gap,clamp(24px,4.2vh,56px)) !important}
:root{--copyright-pad:clamp(10px,1.8vh,18px)}
.copyright{padding-block:var(--copyright-pad) !important}
.soft-divider{margin-block-end:var(--copyright-pad) !important}
:root{--soc-block-gap:clamp(18px,3vh,36px)}
.socials{margin-block:var(--soc-block-gap) !important}
.socials,.soft-divider{opacity:0;
transform:translateY(8px);
will-change:opacity,transform;
animation:fadeUpFooter 0.8s ease forwards;
animation-delay:0.3s}

@keyframes fadeUpFooter{
to{opacity:1;
transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
.socials,.soft-divider{animation:none !important;
opacity:1;
transform:none}
}
.copyright{display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:0.6rem}
.copyright-block{margin:0 0.35rem}
.copyright .divider{opacity:0.8;
margin:0 0.2rem;
user-select:none}
.foot-link{background:none;
border:none;
color:inherit;
font:inherit;
cursor:pointer;
transition:opacity 0.3s ease}
.foot-link:hover{opacity:0.7}
.hero-title{--hero-fs:clamp(2rem,5.2vw + 0.9rem,4.6rem);
font-size:var(--hero-fs);
line-height:1.12;
font-weight:800;
letter-spacing:-0.01em;
margin:0 0 clamp(14px,2.2vh,26px);
position:relative;
text-wrap:balance}
.hero-title .line{display:block}
.hero-title::before{content:"";
position:absolute;
inset:auto 0 -8% 0;
margin:auto;
width:min(68vw,820px);
height:min(40vw,420px);
background:radial-gradient(60% 60% at 50% 50%,rgba(255,215,90,.16) 0%,rgba(255,215,90,.06) 46%,transparent 72%);
filter:blur(28px);
transform:translateY(0);
animation:heroFloat 9s ease-in-out infinite;
pointer-events:none;
z-index:-1}

@keyframes heroFloat{
0%{transform:translateY(0)}
50%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}
@property --lineTy{syntax:'<length>';
inherits:false;
initial-value:0px}
@property --lineScale{syntax:'<number>';
inherits:false;
initial-value:1}
.hero-title .line{transform:translateY(var(--lineTy)) scale(var(--lineScale));
opacity:0;
will-change:transform,opacity;
animation:lineReveal .8s cubic-bezier(.2,.7,.2,1) forwards,lineFloat 7.5s ease-in-out calc(.9s + var(--float-delay,0s)) infinite}

@keyframes lineReveal{
from{--lineTy:12px;
opacity:0}
to{--lineTy:0px;
opacity:1}
}

@keyframes lineFloat{
0%{--lineTy:0px;
--lineScale:1}
50%{--lineTy:-3px;
--lineScale:1.012}
100%{--lineTy:0px;
--lineScale:1}
}
.hero-title .line:nth-of-type(1){--float-delay:0s}
.hero-title .line:nth-of-type(2){--float-delay:.18s}
.hero-title .line:nth-of-type(3){--float-delay:.35s}

@media (max-width:780px){
.hero-title{--hero-fs:clamp(1.8rem,7.5vw,3.2rem);
line-height:.98}
}

@media (max-width:420px){
.hero-title{--hero-fs:clamp(1.6rem,8.5vw,2.4rem)}
}

@media (prefers-reduced-motion:reduce){
.hero-title::before{animation:none}
.hero-title .line{animation:none !important;
opacity:1 !important;
transform:none !important}
}
@property --lineTx{syntax:'<length>';
inherits:false;
initial-value:0px}
.hero-title .line{transform:translate(var(--lineTx),var(--lineTy)) scale(var(--lineScale))}

@keyframes lineFloat{
0%{--lineTx:0px;
--lineTy:0px;
--lineScale:1}
25%{--lineTx:0.5px;
--lineTy:-1px;
--lineScale:1.003}
50%{--lineTx:1px;
--lineTy:-2px;
--lineScale:1.006}
75%{--lineTx:0.5px;
--lineTy:-1px;
--lineScale:1.003}
100%{--lineTx:0px;
--lineTy:0px;
--lineScale:1}
}
.hero-title .line{animation:lineReveal .9s cubic-bezier(.3,.7,.2,1) forwards,lineFloat 11.5s cubic-bezier(.45,.05,.55,.95) calc(.9s + var(--float-delay,0s)) infinite}
.hero-title .line + .line{margin-top:clamp(2px,0.6vh,8px)}

@keyframes heroLineReveal{
from{opacity:0;
transform:translateY(12px) scale(0.998)}
to{opacity:1;
transform:translateY(0) scale(1)}
}

@keyframes lineFloatDirect{
0%{transform:translate(0px,0px) scale(1)}
25%{transform:translate(0.4px,-1px) scale(1.003)}
50%{transform:translate(0.8px,-2px) scale(1.006)}
75%{transform:translate(0.4px,-1px) scale(1.003)}
100%{transform:translate(0px,0px) scale(1)}
}
/* Hero title & animation */
h1.hero-title .line{opacity:0;
transform:translateY(12px) scale(0.998);
animation:heroLineReveal .85s cubic-bezier(.25,.7,.2,1) forwards,lineFloatDirect 11.5s cubic-bezier(.45,.05,.55,.95) calc(.95s + var(--float-delay,0s)) infinite !important;
will-change:transform,opacity}
h1.hero-title .line:nth-of-type(1){--float-delay:0s}
h1.hero-title .line:nth-of-type(2){--float-delay:.18s}
h1.hero-title .line:nth-of-type(3){--float-delay:.35s}

@keyframes heroFloatBG{
0%{transform:translateY(0) scale(1)}
50%{transform:translateY(-10px) scale(1.01)}
100%{transform:translateY(0) scale(1)}
}
h1.hero-title::before{animation:heroFloatBG 10s ease-in-out infinite !important;
will-change:transform}
h1.hero-title::before{animation:none !important}
}

@keyframes lineFloatSmooth{
0%{transform:translate3d(0,0,0) scale(1)}
25%{transform:translate3d(0.5px,-1.0px,0) scale(1.0035)}
50%{transform:translate3d(1.0px,-1.6px,0) scale(1.006)}
75%{transform:translate3d(0.5px,-1.0px,0) scale(1.0035)}
100%{transform:translate3d(0,0,0) scale(1)}
}
25%{transform:translate3d(0.6px,-1.4px,0) scale(1.004)}
50%{transform:translate3d(1.2px,-2.4px,0) scale(1.007)}
75%{transform:translate3d(0.6px,-1.4px,0) scale(1.004)}
100%{transform:translate3d(0,0,0) scale(1)}
}
h1.hero-title .line{animation:heroLineReveal .9s cubic-bezier(.3,.7,.2,1) forwards,lineFloatSmooth 12s cubic-bezier(.45,.05,.55,.95) calc(.9s + var(--float-delay,0s)) infinite !important;
will-change:transform,opacity;
transform:translate3d(0,0,0);
backface-visibility:hidden;
perspective:1000px}
h1.hero-title .line:nth-of-type(1){--float-delay:0s}
h1.hero-title .line:nth-of-type(2){--float-delay:.18s}
h1.hero-title .line:nth-of-type(3){--float-delay:.35s}

@keyframes heroLineRevealG{
from{opacity:0;
transform:translate3d(0,12px,0) scale(0.998)}
to{opacity:1;
transform:translate3d(0,0,0) scale(1)}
}
h1.hero-title .line{opacity:0;
transform:translate3d(0,12px,0) scale(0.998);
animation:heroLineRevealG .9s cubic-bezier(.28,.7,.2,1) forwards;
will-change:transform,opacity;
contain:layout paint}

@keyframes heroFloatText{
0%{transform:translate3d(0,0,0) scale(1)}
25%{transform:translate3d(0.5px,-1.0px,0) scale(1.0035)}
50%{transform:translate3d(1.0px,-1.6px,0) scale(1.006)}
75%{transform:translate3d(0.5px,-1.0px,0) scale(1.0035)}
100%{transform:translate3d(0,0,0) scale(1)}
}
25%{transform:translate3d(0.6px,-1.4px,0) scale(1.0035)}
50%{transform:translate3d(1.2px,-2.2px,0) scale(1.006)}
75%{transform:translate3d(0.6px,-1.4px,0) scale(1.0035)}
100%{transform:translate3d(0px,0px,0) scale(1)}
}
h1.hero-title .line > .float{display:inline-block;
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
backface-visibility:hidden;
perspective:1000px;
animation:heroFloatText 12s cubic-bezier(.45,.05,.55,.95) var(--float-delay,0s) infinite !important;
will-change:transform}
h1.hero-title .line:nth-of-type(1) > .float{--float-delay:.00s}
h1.hero-title .line:nth-of-type(2) > .float{--float-delay:.18s}
h1.hero-title .line:nth-of-type(3) > .float{--float-delay:.36s}
h1.hero-title .line > .float{animation:none !important;
transform:none !important}
}
.hero-title{line-height:1.03;
overflow:visible}
.hero-title .line{padding-bottom:0.12em;
transform-origin:50% 70%}
h1.hero-title{line-height:1.12 !important;
overflow:visible !important}
h1.hero-title .line{display:block;
overflow:visible;
padding-bottom:.18em}
h1.hero-title .line > .float{display:inline-block;
will-change:transform,opacity;
transform:translateZ(0)}
@supports (clip-path:inset(10%)){h1.hero-title .line{clip-path:inset(-.2em 0 -.2em 0 round 0)}
}
.hero{overflow:visible;
padding-inline:clamp(12px,2.5vw,28px)}
.hero .center{max-width:1200px;
margin:0 auto;
text-align:center}
h1.hero-title{line-height:1;
letter-spacing:-0.005em;
display:inline-block;
text-align:left;
margin:0 auto;
padding-left:0.4em}
h1.hero-title .line{position:relative;
overflow:visible;
clip-path:inset(-1.8em -6em -1.6em -7em);
padding-top:.04em;
padding-bottom:.14em;
white-space:nowrap;
text-indent:var(--indent,0);
transform:translate3d(0,0,0);
backface-visibility:hidden;
will-change:transform,opacity}

@media (min-width:768px){
h1.hero-title .line:nth-of-type(1){--indent:-0.07em;
padding-left:0.08em}
h1.hero-title .line:nth-of-type(2){--indent:0.40em}
h1.hero-title .line:nth-of-type(3){--indent:0.06em}
}

@keyframes heroDriver{
0%{transform:translate3d(0,0,0)}
12%{transform:translate3d(.7px,-4px,0)}
25%{transform:translate3d(1.4px,-8px,0)}
37%{transform:translate3d(.7px,-11px,0)}
50%{transform:translate3d(0,-13px,0)}
62%{transform:translate3d(-.7px,-11px,0)}
75%{transform:translate3d(-1.4px,-8px,0)}
87%{transform:translate3d(-.7px,-4px,0)}
100%{transform:translate3d(0,0,0)}
}

@keyframes heroPushed{
0%{transform:translate3d(0,0,0)}
10%{transform:translate3d(.8px,-2px,0)}
20%{transform:translate3d(1.8px,-9px,0)}
28%{transform:translate3d(1px,-11.5px,0)}
40%{transform:translate3d(0,-12.8px,0)}
55%{transform:translate3d(-.8px,-10.8px,0)}
70%{transform:translate3d(-1.6px,-6.5px,0)}
85%{transform:translate3d(-.8px,-2.2px,0)}
100%{transform:translate3d(0,0,0)}
}

@keyframes heroPulled{
0%{transform:translate3d(0,0,0)}
16%{transform:translate3d(.6px,-2.6px,0)}
30%{transform:translate3d(1.2px,-7.2px,0)}
44%{transform:translate3d(.6px,-10.2px,0)}
58%{transform:translate3d(0,-12.6px,0)}
72%{transform:translate3d(-.6px,-10px,0)}
86%{transform:translate3d(-1.2px,-6.2px,0)}
100%{transform:translate3d(0,0,0)}
}

@keyframes heroFixReveal{
0%{opacity:0;
transform:translate3d(0,14px,0) scale(.998)}
100%{opacity:1;
transform:none}
}
h1.hero-title .line:nth-of-type(2){animation:heroFixReveal .8s cubic-bezier(.25,.7,.2,1) forwards,heroDriver 15s linear 1s infinite}
h1.hero-title .line:nth-of-type(1){animation:heroFixReveal .8s cubic-bezier(.25,.7,.2,1) forwards,heroPushed 15s linear 1.12s infinite}
h1.hero-title .line:nth-of-type(3){animation:heroFixReveal .8s cubic-bezier(.25,.7,.2,1) forwards,heroPulled 15s linear 1.24s infinite}
}
6%{background-position:0 0,-20% 0}
12%{background-position:0 0,10% 0}
16%{background-position:0 0,60% 0}
20%{background-position:0 0,135% 0}
100%{background-position:0 0,135% 0}
}

@media (max-width:640px){
.hero .center{text-align:center}
h1.hero-title{display:inline-block;
text-align:left}
h1.hero-title .line{clip-path:inset(-2.2em -4.5em -1.6em -6.5em)}
h1.hero-title .line:nth-of-type(1){--indent:-0.08em;
padding-left:0.12em}
h1.hero-title .line:nth-of-type(2){--indent:0.4em}
h1.hero-title .line:nth-of-type(3){--indent:0.05em}
.subtitle{display:block}
.subtitle .cta{display:flex;
flex-direction:column;
align-items:center;
gap:12px}
.cta .btn{display:inline-flex;
width:auto;
white-space:nowrap}
}
a,a:visited{color:inherit;
text-decoration:none}
a:hover{text-decoration:none}
a:focus-visible{outline:2px solid rgba(255,255,255,.35);
outline-offset:2px;
text-decoration:none}
.social a,.social a:visited{text-decoration:none !important;
border-bottom:none !important}
.social a:hover{opacity:.9}
.social a .icon,.social .icon{display:inline-block;
transform:translateZ(0);
backface-visibility:hidden;
will-change:transform;
transition:transform 300ms ease,opacity 200ms ease}
.social a:hover .icon{transform:translateY(-2px)}
h1.hero-title .line{transform:translate3d(0,0,0);
backface-visibility:hidden;
will-change:transform,opacity}
.hero h1.hero-title .line{transform:translate3d(0,0,0);
backface-visibility:hidden;
will-change:transform,opacity}
.hero h1.hero-title .line:nth-of-type(2){animation:heroFixReveal .8s cubic-bezier(.25,.7,.2,1) forwards,heroDriver 15s linear 1s infinite !important}
.hero h1.hero-title .line:nth-of-type(1){animation:heroFixReveal .8s cubic-bezier(.25,.7,.2,1) forwards,heroPushed 15s linear 1.12s infinite !important}
.hero h1.hero-title .line:nth-of-type(3){animation:heroFixReveal .8s cubic-bezier(.25,.7,.2,1) forwards,heroPulled 15s linear 1.24s infinite !important}

@media (max-width:640px){
.hero h1.hero-title .line:nth-of-type(2){animation:heroFixReveal .8s cubic-bezier(.25,.7,.2,1) forwards,heroDriver 15s linear 1s infinite !important}
.hero h1.hero-title .line:nth-of-type(1){animation:heroFixReveal .8s cubic-bezier(.25,.7,.2,1) forwards,heroPushed 15s linear 1.12s infinite !important}
.hero h1.hero-title .line:nth-of-type(3){animation:heroFixReveal .8s cubic-bezier(.25,.7,.2,1) forwards,heroPulled 15s linear 1.24s infinite !important}
}
html,body{margin:0;
padding:0;
overflow-x:hidden}
html{height:auto;
min-height:100%}
body{min-height:100%;
overflow-y:auto !important}
.vignette,.vignette::before,.vignette::after,.page-bg,.page-bg::before,.page-bg::after,.background,.background::before,.background::after,.bg-vignette,.bg-vignette::before,.bg-vignette::after{position:fixed !important;
inset:0 !important;
z-index:0 !important;
pointer-events:none !important;
transform:none !important}
.site,.page,.wrapper,#page,#app{min-height:100%}
main,.main,#main{margin-bottom:0 !important}
body{-webkit-overflow-scrolling:touch;
touch-action:pan-y;
overscroll-behavior:none}
h1.hero-title{font-size:clamp(42px,4.2vw,78px)}

@media (max-width:640px){
h1.hero-title{font-size:clamp(40px,9.2vw,64px)}
h1.hero-title .line{padding-top:.03em;
padding-bottom:.12em}
}

@media (min-width:1440px){
h1.hero-title{font-size:clamp(84px,3.8vw,104px)}
}

@media (min-width:1920px){
h1.hero-title{font-size:clamp(96px,3.4vw,118px)}
}
html{height:100%}
body{min-height:100%;
display:flex;
flex-direction:column;
margin:0;
overflow-y:auto !important;
overscroll-behavior:auto !important;
-webkit-overflow-scrolling:touch !important;
touch-action:auto !important}
main{flex:1 0 auto}
footer,.site-footer{margin-top:auto;
position:relative;
z-index:2}
html,body{overflow-x:hidden;
background-repeat:no-repeat !important}
.vignette,.vignette::before,.vignette::after,.page-bg,.page-bg::before,.page-bg::after,.background,.background::before,.background::after,.bg-vignette,.bg-vignette::before,.bg-vignette::after{position:fixed !important;
inset:0 !important;
z-index:0 !important;
pointer-events:none !important}
html,body{background-repeat:no-repeat !important}
.vignette,.vignette::before,.vignette::after,.page-bg,.page-bg::before,.page-bg::after,.background,.background::before,.background::after,.bg-vignette,.bg-vignette::before,.bg-vignette::after{position:fixed !important;
inset:0 !important;
z-index:0 !important;
pointer-events:none !important}
:root{--post-footer-gap:0px}
body{margin-bottom:var(--post-footer-gap) !important}
html,body{background-repeat:no-repeat !important}
.background,.background::before,.background::after,.bg-vignette,.bg-vignette::before,.bg-vignette::after{position:fixed !important;
inset:0 !important;
z-index:0 !important;
pointer-events:none !important;
overflow:clip;
contain:paint}

@media (min-width:1024px){
html{overflow-y:auto}
body{overflow-x:hidden}
}
main,.page,.wrap,#__next{min-block-size:100svh}
[data-float],.float,.floaty,.parallax,.hero *[style*="translate"]{will-change:transform;
transform:translateZ(0)}
.hero,.hero-stage,.parallax-wrap{overflow:clip}

@media (max-width:640px){
.hero .center{text-align:center}
h1.hero-title{display:inline-block;
text-align:center}
h1.hero-title .line{display:block}
.subtitle{display:block;
text-align:center;
max-width:90%;
margin:0.5rem auto 0;
line-height:1.3}
.subtitle .cta{margin-bottom:clamp(2.5rem,6vw,4rem) !important}
}

@media (min-width:641px) and (max-width:1024px){
h1.hero-title{font-size:clamp(52px,6.6vw,96px)}
}
74%{background-position:0 0,-20% 0}
80%{background-position:0 0,10% 0}
86%{background-position:0 0,60% 0}
90%,100%{background-position:0 0,135% 0}
}

@media (prefers-reduced-motion:reduce){
}

/* Tablet / small desktop enhancements */
@media (min-width:1025px) and (max-width:1440px){
h1.hero-title{font-size:clamp(64px,6.4vw,120px)}
}

@media (max-width:640px){
.hero .center{text-align:center}
h1.hero-title{display:inline-block;
text-align:center}
h1.hero-title .line{display:block}
.subtitle{display:block;
text-align:center;
max-width:90%;
margin:0.5rem auto 0;
line-height:1.3}
.subtitle /* Shimmer effect for "Video · Social · Design." */
.brand-grad{display:block;
margin-top:.35em}
.cta{margin-bottom:clamp(2.5rem,6vw,4rem) !important}
}

/* Tablet / small desktop enhancements */
@media (min-width:1025px) and (max-width:1600px){
h1.hero-title{font-size:clamp(64px,6.4vw,120px)}
}
.brand-grad{--shine-angle:115deg;
--shine-w:22%;
--shine-color:rgba(255,255,255,.85);
background-image:linear-gradient(90deg,var(--brand2,#a3ffb0),var(--brand3,#88d0ff),var(--brand,#ffffff)),linear-gradient(var(--shine-angle),transparent 0%,transparent calc(50% - 18%),var(--shine-color) 50%,transparent calc(50% + 18%),transparent 100%);
background-size:100% 100%,var(--shine-w) 100%;
background-position:0 0,-35% 0;
background-repeat:no-repeat;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
animation:brandTextSweep 9s linear infinite;
animation-delay: 0s;
will-change:background-position}

@keyframes brandTextSweep{
0%,33.333%{background-position:0 0,-35% 0}
34%{background-position:0 0,-20% 0}
40%{background-position:0 0,10% 0}
48%{background-position:0 0,60% 0}
54%,100%{background-position:0 0,135% 0}
}
74%{background-position:0 0,-20% 0}
80%{background-position:0 0,10% 0}
86%{background-position:0 0,60% 0}
90%,100%{background-position:0 0,135% 0}
}

@media (prefers-reduced-motion:reduce){
.brand-grad{animation:none !important}
}

@media (min-width:641px) and (max-width:2560px){
.cta{margin-bottom:clamp(4rem,6vw,6rem)!important}
}


/* keep exact same transform as index for identical framing */
  transform:translate3d(var(--px,0),var(--py,0),0) scale(1.02) !important;
  transition:none !important;
}
.page-legal .auras, .page-legal .overlay{ transition:none !important; }
/* Keep the same background image logic; just disable the parallax motion/transition */
.page-legal .hero::before{
  inset:0 !important;
  transform:none !important;
  transition:none !important;
}
.page-legal .auras, .page-legal .overlay{ transition:none !important; }
/* Keep inner text block
s nicely constrained */
.page-legal .legal-wrapper{padding-top: clamp(24px, 4vw, 48px);}


/* Content links: elegant underline + hover; avoid affecting header nav */
.legal-wrapper a:not(.btnlink),
main a:not(.btnlink){
  color: #f6f6f6;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.28);
  text-underline-offset: 2px;
  transition: color .2s ease, text-decoration-color .2s ease, background-color .2s ease;
}
.legal-wrapper a:not(.btnlink):hover,
main a:not(.btnlink):hover{
  color: #ffffff;
  text-decoration-color: rgba(255,255,255,0.6);
}

/* Ensure nav/menu links keep their previous look (no underlines) */
.nav-links a.btnlink{ text-decoration: none; }


/* Brand-colored links only on legal pages */
body.page-legal .legal-wrapper a:not(.btnlink),
body.page-impressum .legal-wrapper a:not(.btnlink),
body.page-datenschutz .legal-wrapper a:not(.btnlink){
  color: #fbb818;
  text-decoration: underline;
  text-decoration-color: rgba(251,184,24,0.4);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

body.page-legal .legal-wrapper a:not(.btnlink):hover,
body.page-impressum .legal-wrapper a:not(.btnlink):hover,
body.page-datenschutz .legal-wrapper a:not(.btnlink):hover{
  color: #ffd45e;
  text-decoration-color: rgba(255,212,94,0.8);
}

/* Keep nav/menu buttons underline-free */
.nav-links a.btnlink,
.hero .btnlink,
.button,
.btn,
a.button-primary,
a.btn-primary {
  text-decoration: none !important;
}


/* ==========================================================================
   Blockster v35.0 — Core refinements
   - This file groups only the final tweaks we need for stability & readability.
   - Sections:
     [A] Typography
     [B] Header/Nav brand
     [C] Legal pages (Impressum/Datenschutz)
     [D] Buttons/Links safety (no unwanted underlines)
   ========================================================================== */

/* [A] Typography */
body { color: #f3f3f2; }
h1, h2, h3, h4, h5, h6 { color: #fff; }

/* [B] Header/Nav brand safety — ensure no accidental underline */
.nav-links a.btnlink { text-decoration: none; }

/* [C] Legal pages layout */
.legal-wrapper{
  padding: 60px clamp(16px,4vw,48px) 60px;
  max-width: 980px;
  margin: 0 auto;
}
.legal-wrapper h1 {
  text-align: left;
  font-size: clamp(2rem, 3vw, 2.8rem);
  margin: 0 0 24px;
}
.legal-wrapper p,
.legal-wrapper li {
  line-height: 1.9;
  padding: 4px 0;
}

/* brand-colored links ONLY on legal pages */
body.page-legal .legal-wrapper a:not(.btnlink),
body.page-impressum .legal-wrapper a:not(.btnlink),
body.page-datenschutz .legal-wrapper a:not(.btnlink){
  color: #fbb818;
  text-decoration: underline;
  text-decoration-color: rgba(251,184,24,0.4);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
body.page-legal .legal-wrapper a:not(.btnlink):hover,
body.page-impressum .legal-wrapper a:not(.btnlink):hover,
body.page-datenschutz .legal-wrapper a:not(.btnlink):hover{
  color: #ffd45e;
  text-decoration-color: rgba(255,212,94,0.8);
}

/* [D] Buttons/CTA links on index & contact blocks — never underlined */
.hero a,
.contact a,
.contact-card a,
.contact-box a,
.cta a,
.cta-list a,
.footer-cta a,
.button,
.btn,
a.button-primary,
a.btn-primary {
  text-decoration: none !important;
}



/* v35.4 — Brand dot coloring */
.brand-dot{ color:#fbb818; }
a .brand-dot{ text-decoration: inherit; }


/* v35.4.2 — button/link hover text color stability */
.hero .btnlink:hover,
.button:hover,
.btn:hover,
.btn-primary:hover,
a.button-primary:hover {
  color: inherit !important;
  text-decoration: none !important;
}


/* === Final override: Ensure primary (yellow) CTA keeps black text always === */
.btn.primary,
.btn-primary {
  color: #000 !important;
}
.btn.primary:hover,
.btn-primary:hover,
.btn.primary:focus,
.btn-primary:focus,
.btn.primary:active,
.btn-primary:active {
  color: #000 !important;
}

/* Keep non-primary/white buttons untouched */