html,body{max-width:100%;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}

/* ===== SS Property motion layer (anim.css) ===== */
@media (prefers-reduced-motion: no-preference){
#ssp-intro{position:fixed;inset:0;z-index:10000;background:radial-gradient(circle at 50% 45%,#3a2814 0%,#140d06 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s}
#ssp-intro.out{opacity:0;visibility:hidden}
#ssp-intro .ring{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center}
#ssp-intro .ring:before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid transparent;border-top-color:#e2c27a;border-right-color:rgba(226,194,122,.35);animation:sspSpin 1.1s linear infinite}
#ssp-intro img{width:130px;height:130px;border-radius:50%;animation:sspPop .9s cubic-bezier(.2,.9,.3,1.3) both;box-shadow:0 0 40px rgba(226,194,122,.45)}
#ssp-intro p{margin:22px 0 0;color:#f1dfae;letter-spacing:.35em;font-size:13px;text-transform:uppercase;animation:sspFadeUp .8s .35s both}
@keyframes sspSpin{to{transform:rotate(360deg)}}
@keyframes sspPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes sspFadeUp{0%{transform:translateY(18px);opacity:0}100%{transform:none;opacity:1}}
/* hero */
.shero{overflow:hidden;position:relative}
.shero>img{animation:sspKen 22s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes sspKen{0%{transform:scale(1)}100%{transform:scale(1.12) translate(-1.5%,-1%)}}
.shero .wrap>*{opacity:0;animation:sspFadeUp .9s cubic-bezier(.2,.8,.2,1) forwards}
.shero .wrap>*:nth-child(1){animation-delay:.25s}.shero .wrap>*:nth-child(2){animation-delay:.4s}.shero .wrap>*:nth-child(3){animation-delay:.55s}
.shero .wrap>*:nth-child(4){animation-delay:.75s}.shero .wrap>*:nth-child(5){animation-delay:.9s}.shero .wrap>*:nth-child(6){animation-delay:1.05s}
.shero .hlogo{animation:sspPop 1s .2s cubic-bezier(.2,.9,.3,1.3) forwards,sspGlow 3.5s 1.4s ease-in-out infinite}
@keyframes sspGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(226,194,122,0))}50%{filter:drop-shadow(0 0 18px rgba(226,194,122,.75))}}
.shero h1 i{background:linear-gradient(100deg,#e9cf8f 20%,#fff6dc 40%,#c99a3c 60%,#e9cf8f 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sspShine 4s linear infinite}
@keyframes sspShine{0%{background-position:100% 0}100%{background-position:-150% 0}}
.shero .trio li{display:inline-block;animation:sspBob 3s ease-in-out infinite}
.shero .trio li:nth-child(2){animation-delay:.4s}.shero .trio li:nth-child(3){animation-delay:.8s}
@keyframes sspBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#ssp-sparks{position:absolute;inset:0;pointer-events:none;z-index:1}
.shero .wrap{position:relative;z-index:2}
/* buttons */
.btn{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn.gold:after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sspSweep 3.2s 2s ease-in-out infinite}
@keyframes sspSweep{0%{left:-75%}40%,100%{left:130%}}
.btn.wa{animation:sspPulse 2.4s 2.5s ease-out infinite}
@keyframes sspPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.dock .dw{animation:sspPulse 2.4s 3s ease-out infinite}
/* reveal on scroll */
.ssp-rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.ssp-rv.ssp-l,.ssp-rv.ssp-r{transform:translateY(34px)}.ssp-rv.ssp-z{transform:scale(.92)}
.ssp-rv.in{opacity:1;transform:none}
/* project cards */
.pcard{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(60,38,10,.28),0 0 0 1px rgba(226,194,122,.6)}
.pcard img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.pcard:hover img{transform:scale(1.07)}
.seal{animation:sspSpinSlow 18s linear infinite}
@keyframes sspSpinSlow{to{transform:rotate(360deg)}}
.shead h2:after{content:"";display:block;height:2px;width:0;margin:10px auto 0;background:linear-gradient(90deg,transparent,#c9a24b,transparent);transition:width 1.2s .3s ease}
.shead.in h2:after{width:120px}
#rate-band span{animation:sspTwinkle 2.6s ease-in-out infinite}
@keyframes sspTwinkle{0%,100%{opacity:1}50%{opacity:.75}}
.slogo img{transition:transform .6s}.slogo:hover img{transform:rotate(-8deg) scale(1.06)}
/* sign-in success */
#ssp-ok{position:fixed;inset:0;z-index:10001;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(58,40,20,.97),rgba(14,9,4,.98));opacity:0;transition:opacity .45s}
#ssp-ok.show{opacity:1}
#ssp-ok .lg{width:150px;height:150px;border-radius:50%;animation:sspPop .9s cubic-bezier(.2,.9,.3,1.4) both,sspGlow 1.6s .8s ease-in-out infinite;box-shadow:0 0 50px rgba(226,194,122,.5)}
#ssp-ok .burst{position:absolute;width:150px;height:150px;border-radius:50%;border:2px solid #e2c27a;animation:sspBurst 1.6s ease-out infinite}
#ssp-ok .burst.b2{animation-delay:.5s}
@keyframes sspBurst{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
#ssp-ok h3{margin:30px 0 6px;color:#f3e2b8;font-size:26px;animation:sspFadeUp .7s .4s both;text-align:center;padding:0 16px}
#ssp-ok p{margin:0;color:#d9c79b;font-size:15px;animation:sspFadeUp .7s .6s both;text-align:center;padding:0 20px}
#ssp-ok .tick{display:inline-block;margin-top:18px;width:46px;height:46px;border-radius:50%;background:#2fa84f;color:#fff;font-size:28px;line-height:46px;text-align:center;animation:sspPop .6s .9s both}
}