/* =========================================================
   SOLE GRIPPER — motion & extra sections
   ========================================================= */

/* ---- scroll progress + back to top + whatsapp ---- */
.sg-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:300;background:linear-gradient(90deg,var(--sg-orange),#ffb26b);box-shadow:0 0 12px rgba(255,106,19,.7);}
.sg-fab{position:fixed;right:20px;z-index:150;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:transform .2s ease,opacity .3s ease,background .2s ease;}
.sg-fab:hover{transform:translateY(-4px) scale(1.06);}
.sg-fab--top{bottom:90px;background:var(--sg-black-3);color:var(--sg-white);border:1px solid var(--sg-line);opacity:0;pointer-events:none;}
.sg-fab--top.is-visible{opacity:1;pointer-events:auto;}
.sg-fab--top:hover{background:var(--sg-orange);color:var(--sg-black);}
.sg-fab--wa{bottom:24px;background:#25d366;color:#fff;box-shadow:0 8px 24px rgba(37,211,102,.4);animation:sg-pulse-wa 2.6s ease-out infinite;}
@keyframes sg-pulse-wa{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55);}70%{box-shadow:0 0 0 16px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}

/* ---- header shrink ---- */
.sg-header__inner{transition:padding .25s ease;}
.sg-logo img{transition:height .25s ease;}
.sg-header.is-scrolled .sg-header__inner{padding-top:6px;padding-bottom:6px;}
.sg-header.is-scrolled .sg-logo img{height:58px;}

/* ---- reveal on scroll ---- */
.js .sg-reveal{opacity:0;transform:translateY(36px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s);will-change:opacity,transform;}
.js .sg-reveal--left{transform:translateX(-56px);}
.js .sg-reveal--right{transform:translateX(56px);}
.js .sg-reveal--zoom{transform:scale(.88);}
.js .sg-reveal.is-in{opacity:1;transform:none;}

/* ---- hero entrance ---- */
@keyframes sg-rise{from{opacity:0;transform:translateY(34px);}to{opacity:1;transform:none;}}
.sg-rise{animation:sg-rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s);}
@keyframes sg-shine{to{background-position:200% 0;}}
.sg-grad{background:linear-gradient(90deg,var(--sg-orange),#ffc58f,var(--sg-orange));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:sg-shine 4s linear infinite;}
.sg-eyebrow .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sg-orange);margin-right:8px;animation:sg-blink 1.6s ease-in-out infinite;}
@keyframes sg-blink{50%{opacity:.25;transform:scale(.7);}}

/* ---- drifting hex texture ---- */
.sg-hex-bg{animation:sg-drift 40s linear infinite;background-size:auto,68px 118px,68px 118px;}
@keyframes sg-drift{from{background-position:0 0,0 0,0 0;}to{background-position:0 0,68px 118px,-68px 118px;}}

/* ---- floating ---- */
@keyframes sg-float{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-16px) rotate(-1.6deg);}}
@keyframes sg-float-slow{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(12px) rotate(1.8deg);}}
.sg-float{animation:sg-float 5.2s ease-in-out infinite;}
.sg-float--slow{animation:sg-float-slow 6.4s ease-in-out infinite;}
.sg-shoe{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45));}
.sg-par{transform:translate3d(calc(var(--mx,0) * var(--depth,0) * 1px),calc(var(--my,0) * var(--depth,0) * 1px),0);transition:transform .25s ease-out;}

/* ---- hero stage ---- */
.sg-hero__art{display:none;}
.sg-hero__stage{position:absolute;right:1%;top:50%;transform:translateY(-50%);width:54%;max-width:760px;aspect-ratio:1/.82;z-index:1;pointer-events:none;}
.sg-hero__ring{position:absolute;left:50%;top:50%;width:78%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed rgba(255,106,19,.45);animation:sg-spin 38s linear infinite;}
.sg-hero__ring::after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid var(--sg-line);}
@keyframes sg-spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.sg-hero__main{position:absolute;left:8%;top:22%;width:84%;}
.sg-hero__shoe2{position:absolute;right:-2%;bottom:2%;width:40%;transform-origin:center;}
.sg-speed{position:absolute;left:-4%;top:46%;width:40%;}
.sg-speed i{display:block;height:4px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--sg-orange));margin:0 0 16px auto;animation:sg-dash 1.8s ease-in-out infinite;}
.sg-speed i:nth-child(1){width:70%;}
.sg-speed i:nth-child(2){width:100%;animation-delay:.25s;}
.sg-speed i:nth-child(3){width:50%;animation-delay:.5s;}
@keyframes sg-dash{0%{transform:translateX(-30px);opacity:0;}40%{opacity:1;}100%{transform:translateX(40px);opacity:0;}}
.sg-badge{position:absolute;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:40px;background:rgba(20,20,20,.88);border:1px solid var(--sg-line);backdrop-filter:blur(6px);font-family:var(--font-head);font-weight:700;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;color:var(--sg-white);animation:sg-float 4.6s ease-in-out infinite;}
.sg-badge svg{color:var(--sg-orange);}
.sg-badge--1{left:2%;top:6%;}
.sg-badge--2{right:4%;top:14%;animation-delay:-1.4s;}
.sg-badge--3{left:10%;bottom:6%;animation-delay:-2.6s;}
@media(max-width:1080px){
  .sg-hero__stage{width:92%;right:-26%;top:auto;bottom:3%;transform:none;opacity:.2;}
  .sg-badge{display:none;}
}

.sg-hero__content{margin-left:max(0px,calc((100vw - var(--sg-max)) / 2));}
@media(max-width:1280px){.sg-hero__content{margin-left:0;}}

/* ---- buttons: shine sweep ---- */
.sg-btn{position:relative;overflow:hidden;}
.sg-btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s ease;}
.sg-btn:hover::after{left:140%;}

/* ---- ticker (outlined big words, reverse direction) ---- */
.sg-ticker{overflow:hidden;padding:30px 0;border-bottom:1px solid var(--sg-line);}
.sg-ticker__track{display:flex;gap:46px;width:max-content;white-space:nowrap;animation:sg-marquee 34s linear infinite reverse;}
.sg-ticker__track span{font-family:var(--font-head);font-weight:700;font-size:clamp(2.4rem,6vw,4.4rem);text-transform:uppercase;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.28);}
.sg-ticker__track span.hot{-webkit-text-stroke:0;color:var(--sg-orange);}
.sg-ticker__track b{color:var(--sg-orange);font-size:clamp(1.6rem,3vw,2.4rem);align-self:center;}

/* ---- product cards: richer hover ---- */
ul.products li.product img{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
ul.products li.product:hover img{transform:scale(1.08) rotate(-1.5deg);}
ul.products li.product{box-shadow:0 0 0 rgba(255,106,19,0);transition:border-color .2s ease,transform .3s ease,box-shadow .3s ease;}
ul.products li.product:hover{box-shadow:0 18px 40px rgba(255,106,19,.14);}

/* ---- category tiles: shoe art ---- */
.sg-cat-tile__shoe{position:absolute;left:8%;right:8%;top:14%;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.sg-cat-tile:hover .sg-cat-tile__shoe{transform:translateY(-8px) rotate(-6deg) scale(1.06);}
.sg-cat-tile::before{content:"";position:absolute;left:50%;top:46%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,106,19,.22),transparent 65%);transition:transform .5s ease;}
.sg-cat-tile:hover::before{transform:translate(-50%,-50%) scale(1.25);}

/* ---- shoe types ---- */
.sg-types{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;perspective:1100px;}
@media(max-width:1000px){.sg-types{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.sg-types{grid-template-columns:1fr;}}
.sg-type{position:relative;display:flex;flex-direction:column;background:linear-gradient(165deg,var(--sg-black-3),var(--sg-black-2));border:1px solid var(--sg-line);border-radius:4px;padding:26px 22px 24px;overflow:hidden;transition:transform .25s ease,border-color .25s ease;transform-style:preserve-3d;color:var(--sg-white);}
.sg-type:hover{border-color:var(--sg-orange);color:var(--sg-white);}
.sg-type__num{position:absolute;right:16px;top:8px;font-family:var(--font-head);font-weight:700;font-size:4.2rem;line-height:1;color:rgba(255,255,255,.05);}
.sg-type__art{position:relative;margin:6px 0 14px;}
.sg-type__art::after{content:"";position:absolute;left:12%;right:12%;bottom:-2px;height:14px;background:radial-gradient(ellipse,rgba(255,106,19,.45),transparent 70%);filter:blur(4px);}
.sg-type .sg-shoe{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.sg-type:hover .sg-shoe{transform:translateY(-10px) rotate(-7deg) scale(1.07);}
.sg-type h3{margin-bottom:6px;}
.sg-type p{font-size:.95rem;margin-bottom:14px;}
.sg-type__link{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;color:var(--sg-orange);}
.sg-type__link svg{transition:transform .2s ease;}
.sg-type:hover .sg-type__link svg{transform:translateX(5px);}

/* ---- promo banner ---- */
.sg-promo{position:relative;overflow:hidden;background:var(--sg-orange);color:var(--sg-black);padding:90px 0;}
.sg-promo::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(0,0,0,.06) 0 22px,transparent 22px 60px);}
.sg-promo::after{content:"";position:absolute;right:-8%;top:-30%;width:46%;height:160%;background:var(--sg-black);transform:skewX(-14deg);}
.sg-promo .container{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center;}
@media(max-width:900px){.sg-promo .container{grid-template-columns:1fr;}.sg-promo::after{width:70%;right:-30%;opacity:.5;}}
.sg-promo h2,.sg-promo p,.sg-promo .sg-eyebrow{color:var(--sg-black);}
.sg-promo p{font-weight:600;max-width:460px;opacity:.85;}
.sg-promo .sg-btn{background:var(--sg-black);border-color:var(--sg-black);color:var(--sg-white);}
.sg-promo .sg-btn:hover{background:transparent;color:var(--sg-black);}
.sg-promo__art{position:relative;}
.sg-promo__art .sg-par:nth-child(2){position:absolute;width:52%;right:-2%;bottom:-14%;}

/* ---- how it works ---- */
.sg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative;counter-reset:step;}
@media(max-width:860px){.sg-steps{grid-template-columns:1fr;}}
.sg-steps::before{content:"";position:absolute;left:12%;right:12%;top:42px;height:2px;background:repeating-linear-gradient(90deg,var(--sg-orange) 0 10px,transparent 10px 20px);opacity:.5;}
@media(max-width:860px){.sg-steps::before{display:none;}}
.sg-step{position:relative;text-align:center;padding:0 12px;}
.sg-step__num{position:relative;width:84px;height:84px;margin:0 auto 20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sg-black-2);border:2px solid var(--sg-orange);color:var(--sg-orange);}
.sg-step__num::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--sg-orange);opacity:0;animation:sg-ping 2.8s ease-out infinite;}
.sg-step:nth-child(2) .sg-step__num::after{animation-delay:.9s;}
.sg-step:nth-child(3) .sg-step__num::after{animation-delay:1.8s;}
@keyframes sg-ping{0%{transform:scale(.9);opacity:.7;}100%{transform:scale(1.35);opacity:0;}}
.sg-step__num svg{width:34px;height:34px;}
.sg-step h3{margin-bottom:6px;}

/* ---- tips ---- */
.sg-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.sg-tips{grid-template-columns:1fr;}}
.sg-tip{position:relative;background:var(--sg-black-2);border:1px solid var(--sg-line);border-radius:4px;padding:30px 26px;overflow:hidden;transition:transform .25s ease,border-color .25s ease;}
.sg-tip::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--sg-orange);transition:width .45s ease;}
.sg-tip:hover{transform:translateY(-6px);border-color:rgba(255,106,19,.5);}
.sg-tip:hover::before{width:100%;}
.sg-tip__k{font-family:var(--font-head);font-weight:700;color:var(--sg-orange);letter-spacing:.14em;font-size:.8rem;text-transform:uppercase;}
.sg-tip h3{margin:8px 0;}
.sg-tip a.more{display:inline-flex;align-items:center;gap:6px;color:var(--sg-orange);font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;}

/* ---- instagram strip ---- */
.sg-gram{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
@media(max-width:900px){.sg-gram{grid-template-columns:repeat(3,1fr);}}
.sg-gram a{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:4px;border:1px solid var(--sg-line);}
.sg-gram a .sg-shoe{position:absolute;left:6%;right:6%;top:26%;width:88%;transition:transform .5s ease;}
.sg-gram a:hover .sg-shoe{transform:scale(1.14) rotate(-5deg);}
.sg-gram__ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,10,10,.6);color:var(--sg-white);opacity:0;transition:opacity .3s ease;}
.sg-gram a:hover .sg-gram__ov{opacity:1;}

/* ---- page header decoration ---- */
.sg-page-header{position:relative;overflow:hidden;}
.sg-page-header .container{position:relative;z-index:2;}
.sg-page-header__shoe{position:absolute;right:5%;top:50%;width:min(340px,30vw);margin-top:-80px;z-index:1;pointer-events:none;}
@media(max-width:900px){.sg-page-header__shoe{opacity:.16;right:-6%;}}
.sg-404 .sg-shoe-wrap{width:min(380px,70vw);margin:0 auto 10px;}

/* ---- counters / misc ---- */
.sg-stats-bar div b{font-variant-numeric:tabular-nums;}
.sg-feature{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.sg-feature:hover{transform:translateY(-6px);border-color:rgba(255,106,19,.5);box-shadow:0 16px 36px rgba(255,106,19,.1);}
.sg-feature:hover .sg-feature__icon{background:var(--sg-orange);color:var(--sg-black);transform:rotate(-8deg) scale(1.08);}
.sg-feature__icon{transition:transform .25s ease,background .25s ease,color .25s ease;}
.sg-testimonial{transition:transform .25s ease,border-color .25s ease;}
.sg-testimonial:hover{transform:translateY(-5px);border-color:rgba(255,106,19,.5);}
.sg-brand-strip__track span{transition:color .2s ease,opacity .2s ease;}
.sg-brand-strip__track span:hover{color:var(--sg-orange);opacity:1;}

/* ---- respect reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .js .sg-reveal{opacity:1;transform:none;}
}

/* keep off-canvas menu / floating art from creating sideways scroll */
html,body{max-width:100%;overflow-x:clip;}
.sg-hero__main{left:10%;width:82%;}