/* Souqly Signature themes — cinematic spotlight hero. Uses the theme tokens: --p --a --bg --tx --sf --mu --r --hf */
.sg-hero{--mx:0;--my:0;--sy:0;position:relative;isolation:isolate;overflow:hidden;background:var(--bg);color:var(--tx);min-height:min(94vh,900px);display:flex;align-items:center;padding:clamp(40px,6vw,90px) 0 clamp(70px,8vw,110px)}
.sg-bg{position:absolute;inset:0;z-index:-2;pointer-events:none}
.sg-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45}
.sg-g1{width:min(720px,80vw);aspect-ratio:1;background:radial-gradient(circle,color-mix(in srgb,var(--p) 70%,transparent),transparent 70%);inset-inline-end:-6%;top:6%;transform:translate(calc(var(--mx)*-30px),calc(var(--my)*-20px));animation:sgPulse 9s ease-in-out infinite alternate}
.sg-g2{width:min(520px,60vw);aspect-ratio:1;background:radial-gradient(circle,color-mix(in srgb,var(--a) 60%,transparent),transparent 70%);inset-inline-start:-10%;bottom:-20%;opacity:.3;animation:sgPulse 12s ease-in-out infinite alternate-reverse}
.t-light .sg-glow{opacity:.3}
@keyframes sgPulse{from{scale:1}to{scale:1.18}}

/* giant word behind everything */
.sg-word{position:absolute;inset:0;z-index:-1;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}
.sg-word span{font-family:var(--hf);font-weight:800;font-size:clamp(110px,24vw,420px);line-height:.8;letter-spacing:-.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--tx) 16%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--tx) 9%,transparent),transparent 85%);-webkit-background-clip:text;background-clip:text;
  transform:translate3d(calc(var(--mx)*28px + var(--sy)*-12vw),calc(var(--my)*14px + var(--sy)*40px),0);transition:transform .25s linear;animation:sgWordIn 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes sgWordIn{from{opacity:0;letter-spacing:.12em;filter:blur(8px)}to{opacity:1}}

.sg-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(28px,5vw,80px);position:relative}

/* text */
.sg-tx{position:relative;display:grid}
.sg-t{grid-area:1/1;align-self:center;visibility:hidden}
.sg-t.on{visibility:visible}
.sg-kick{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--p);margin-bottom:22px}
html[dir=rtl] .sg-kick{letter-spacing:0;font-size:14px}
.sg-kick b{font-family:var(--hf);font-size:15px;color:var(--tx)}
.sg-kick i{width:42px;height:2px;background:currentColor;border-radius:2px}
.sg-title{margin:0 0 22px;font-family:var(--hf);font-weight:700;font-size:clamp(40px,6.2vw,96px);line-height:1.02;letter-spacing:-.02em;color:var(--tx)}
html[dir=rtl] .sg-title{letter-spacing:0;line-height:1.25}
.sg-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.sg-w>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--i)*70ms + .1s)}
.sg-t.on .sg-w>span{transform:none}
.sg-t.out .sg-w>span{transform:translateY(-105%);transition-duration:.5s;transition-delay:calc(var(--i)*30ms)}
.sg-sub,.sg-acts,.sg-kick{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .8s cubic-bezier(.2,.8,.2,1)}
.sg-t.on .sg-kick{opacity:1;transform:none;transition-delay:.05s}
.sg-t.on .sg-sub{opacity:1;transform:none;transition-delay:.45s}
.sg-t.on .sg-acts{opacity:1;transform:none;transition-delay:.6s}
.sg-sub{max-width:520px;margin:0 0 30px;font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:var(--mu)}
.sg-acts{display:flex;flex-wrap:wrap;gap:12px}
.sg-hero .t-btn-ghost{color:var(--tx);border-color:color-mix(in srgb,var(--tx) 35%,transparent)}
.sg-hero .t-btn-ghost::before{background:var(--tx)}
.sg-hero .t-btn-ghost:hover{color:var(--bg)}

/* slide controls */
.sg-ui{display:flex;align-items:center;gap:22px;margin-top:clamp(30px,4vw,54px)}
.sg-count{font-family:var(--hf);display:flex;align-items:baseline;gap:6px;color:var(--mu);font-size:14px}
.sg-count b{font-size:30px;color:var(--tx);min-width:2ch}
.sg-bars{display:flex;gap:8px;flex:1;max-width:240px}
.sg-bars button{flex:1;height:22px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.sg-bars i{display:block;width:100%;height:3px;border-radius:3px;background:color-mix(in srgb,var(--tx) 18%,transparent);position:relative;overflow:hidden}
.sg-bars i::after{content:"";position:absolute;inset:0;background:var(--p);transform:scaleX(0);transform-origin:var(--sg-o,left)}
html[dir=rtl] .sg-bars i::after{--sg-o:right}
.sg-bars button.done i::after{transform:none}
.sg-bars button.on i::after{animation:sgBar var(--sg-dur,6.5s) linear forwards}
.sg-hero.paused .sg-bars button.on i::after{animation-play-state:paused}
@keyframes sgBar{to{transform:none}}
.sg-arrows{display:flex;gap:8px}
.sg-arrows button{width:46px;height:46px;border-radius:50%;border:1px solid color-mix(in srgb,var(--tx) 22%,transparent);background:transparent;color:var(--tx);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.sg-arrows button:hover{background:var(--p);color:var(--on-p);border-color:var(--p)}
.sg-arrows [data-sg-prev] svg,html[dir=rtl] .sg-arrows [data-sg-next] svg{transform:scaleX(-1)}
html[dir=rtl] .sg-arrows [data-sg-prev] svg{transform:none}

/* stage: the subject + satellites */
.sg-stage{position:relative;aspect-ratio:1;width:100%;max-width:640px;justify-self:center;transform:translate3d(calc(var(--mx)*-16px),calc(var(--my)*-12px + var(--sy)*-60px),0) scale(calc(1 + var(--sy)*.08));transition:transform .25s linear}
.sg-halo{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--p) 55%,transparent),transparent 68%);filter:blur(30px);opacity:.75;animation:sgPulse 6s ease-in-out infinite alternate}
.sg-ring{position:absolute;inset:2%;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--tx) 22%,transparent);animation:sgSpin 60s linear infinite}
@keyframes sgSpin{to{rotate:360deg}}
.sg-frame{position:absolute;inset:9%;z-index:2}
.sg-main{position:absolute;inset:0;margin:0;overflow:hidden;background:var(--sf);box-shadow:0 50px 90px -30px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--tx) 8%,transparent);
  clip-path:circle(0% at 50% 50%);transition:clip-path 1.15s cubic-bezier(.65,0,.35,1),transform 1.4s cubic-bezier(.2,.8,.2,1);transform:scale(1.08)}
.sg-main.on{clip-path:circle(75% at 50% 50%);transform:none;z-index:2}
.sg-main.out{clip-path:circle(75% at 50% 50%);transform:scale(.92);z-index:1;transition:transform 1.1s cubic-bezier(.65,0,.35,1),filter 1.1s;filter:brightness(.6)}
.sg-main img{width:100%;height:100%;object-fit:cover;display:block}
.sg-main.on img{animation:sgKen 14s ease-in-out infinite alternate}
@keyframes sgKen{from{transform:scale(1.02)}to{transform:scale(1.12)}}

/* shapes */
.sg-circle .sg-main{border-radius:50%}
.sg-circle .sg-main.on img{animation:sgPlate 70s linear infinite}
@keyframes sgPlate{from{transform:scale(1.12) rotate(0)}to{transform:scale(1.12) rotate(360deg)}}
.sg-arch .sg-frame{inset:4% 14% 2%}
.sg-arch .sg-main{border-radius:999px 999px calc(var(--r) + 10px) calc(var(--r) + 10px)}
.sg-arch .sg-main.on,.sg-arch .sg-main.out{clip-path:inset(0 0 0 0 round 999px 999px 24px 24px)}
.sg-arch .sg-main{clip-path:inset(100% 0 0 0 round 999px 999px 24px 24px)}
.sg-arch .sg-ring{inset:0 8% 8%;border-radius:999px 999px 30px 30px;animation:none;border-style:solid;border-color:color-mix(in srgb,var(--p) 45%,transparent);transform:translate(14px,-14px)}
.sg-wide .sg-stage{aspect-ratio:4/3.2;max-width:none}
.sg-wide .sg-frame{inset:12% 0 12% 0}
.sg-wide .sg-main{border-radius:calc(var(--r) + 6px)}
.sg-wide .sg-main{clip-path:inset(0 100% 0 0 round 16px)}
html[dir=rtl] .sg-wide .sg-main{clip-path:inset(0 0 0 100% round 16px)}
.sg-wide .sg-main.on,.sg-wide .sg-main.out{clip-path:inset(0 0 0 0 round 16px)!important}
.sg-wide .sg-ring{display:none}
.sg-wide .sg-halo{inset:20% 10%;border-radius:40%}
.sg-tilt .sg-frame{inset:6% 16%}
.sg-tilt .sg-main{border-radius:calc(var(--r) + 8px);rotate:-5deg}
.sg-tilt .sg-main{clip-path:inset(100% 0 0 0 round 20px)}
.sg-tilt .sg-main.on,.sg-tilt .sg-main.out{clip-path:inset(0 0 0 0 round 20px)}
.sg-tilt .sg-main.out{rotate:-14deg;translate:-12% 6%}
.sg-tilt .sg-ring{border-radius:calc(var(--r) + 14px);inset:4% 12%;rotate:6deg;animation:none;border-style:solid}

/* satellites */
.sg-sat{position:absolute;margin:0;z-index:3;overflow:hidden;background:var(--sf);box-shadow:0 24px 50px -18px rgba(0,0,0,.55),0 0 0 4px var(--bg);opacity:0;animation:sgSatIn 1s cubic-bezier(.2,.8,.2,1) forwards,sgFloat 7s ease-in-out infinite alternate}
.sg-sat img{width:100%;height:100%;object-fit:cover;display:block}
.sg-s1{width:24%;aspect-ratio:1;border-radius:50%;top:2%;inset-inline-start:-2%;animation-delay:.7s,.7s;translate:calc(var(--mx)*-34px) calc(var(--my)*-26px)}
.sg-s2{width:19%;aspect-ratio:1;border-radius:50%;bottom:4%;inset-inline-end:-1%;animation-delay:.9s,1.6s;translate:calc(var(--mx)*-46px) calc(var(--my)*-30px)}
.sg-s3{width:15%;aspect-ratio:1;border-radius:50%;bottom:16%;inset-inline-start:2%;animation-delay:1.1s,2.4s;translate:calc(var(--mx)*-58px) calc(var(--my)*-40px)}
.sg-wide .sg-sat,.sg-tilt .sg-sat{border-radius:calc(var(--r) + 4px);aspect-ratio:4/5}
.sg-wide .sg-s1{top:-2%;width:20%}.sg-wide .sg-s2{bottom:-2%;width:18%}.sg-wide .sg-s3{display:none}
.sg-tilt .sg-s1{rotate:8deg}.sg-tilt .sg-s2{rotate:-7deg}.sg-tilt .sg-s3{rotate:4deg}
.sg-arch .sg-s1{inset-inline-start:0}.sg-arch .sg-s2{inset-inline-end:2%}
@keyframes sgSatIn{from{opacity:0;transform:scale(.4) translateY(40px)}to{opacity:1;transform:none}}
@keyframes sgFloat{from{margin-top:0}to{margin-top:-18px}}

/* scroll cue */
.sg-scroll{position:absolute;bottom:22px;left:50%;width:26px;height:42px;margin-left:-13px;border-radius:20px;border:1.5px solid color-mix(in srgb,var(--tx) 35%,transparent)}
.sg-scroll i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:var(--p);animation:sgScroll 1.8s ease-in-out infinite}
@keyframes sgScroll{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}

/* ---------------- particles ---------------- */
.sg-fx{position:absolute;inset:0;overflow:hidden}
.sg-fx i{position:absolute;left:var(--x);display:block}
/* embers: sparks rising from the grill */
.sg-fx-embers i{bottom:-10px;width:calc(4px*var(--s) + 2px);aspect-ratio:1;border-radius:50%;background:#ffd08a;box-shadow:0 0 10px 3px color-mix(in srgb,var(--p) 85%,#ff3d00),0 0 22px 6px color-mix(in srgb,var(--p) 40%,transparent);animation:sgEmber var(--d) linear var(--w) infinite}
@keyframes sgEmber{0%{transform:translate(0,0);opacity:0}10%{opacity:1}50%{transform:translate(30px,-50vh)}80%{opacity:.8}100%{transform:translate(-20px,-105vh) scale(.3);opacity:0}}
/* petals: soft petals drifting down */
.sg-fx-petals i{top:-30px;width:calc(16px*var(--s) + 8px);height:calc(10px*var(--s) + 6px);border-radius:60% 10% 60% 10%;background:linear-gradient(135deg,color-mix(in srgb,var(--a) 90%,#fff),color-mix(in srgb,var(--a) 55%,#000));opacity:.85;animation:sgPetal calc(var(--d)*1.6) linear var(--w) infinite}
@keyframes sgPetal{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.9}100%{transform:translate(-120px,105vh) rotate(540deg);opacity:0}}
/* bokeh: blurred light circles */
.sg-fx-bokeh i{top:var(--y);width:calc(70px*var(--s) + 20px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--a) 70%,transparent),transparent 70%);filter:blur(2px);opacity:.35;animation:sgBokeh calc(var(--d)*1.8) ease-in-out var(--w) infinite alternate}
@keyframes sgBokeh{from{transform:translate(0,0) scale(.8);opacity:.15}to{transform:translate(40px,-60px) scale(1.15);opacity:.5}}
/* steam: soft wisps rising over the plate */
.sg-fx-steam{inset:0}
.sg-fx-steam i{bottom:22%;left:calc(55% + (var(--x) - 50%)*.35);width:calc(60px*var(--s) + 30px);height:200px;border-radius:50%;background:radial-gradient(ellipse at 50% 80%,color-mix(in srgb,#fff 55%,transparent),transparent 65%);filter:blur(14px);opacity:0;animation:sgSteam calc(var(--d)*1.2) ease-out var(--w) infinite}
html[dir=rtl] .sg-fx-steam i{left:calc(45% + (var(--x) - 50%)*.35)}
.t-light .sg-fx-steam i{background:radial-gradient(ellipse at 50% 80%,rgba(255,255,255,.9),transparent 65%)}
@keyframes sgSteam{0%{transform:translateY(40px) scaleX(.6);opacity:0}30%{opacity:.55}100%{transform:translateY(-320px) scaleX(1.4) skewX(12deg);opacity:0}}
/* sparks: twinkling stars */
.sg-fx-sparks i{top:var(--y);width:calc(10px*var(--s) + 6px);aspect-ratio:1;background:var(--a);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:sgTwinkle calc(var(--d)*.5) ease-in-out var(--w) infinite alternate}
@keyframes sgTwinkle{from{transform:scale(.2) rotate(0);opacity:0}to{transform:scale(1) rotate(90deg);opacity:.9}}
/* grid: neon floor running towards you */
.sg-fx-grid .sg-floor{position:absolute;left:-50%;right:-50%;bottom:-10%;height:55%;background-image:linear-gradient(color-mix(in srgb,var(--p) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--p) 55%,transparent) 1px,transparent 1px);background-size:70px 70px;transform:perspective(420px) rotateX(64deg);transform-origin:50% 0;-webkit-mask-image:linear-gradient(transparent,#000 40%);mask-image:linear-gradient(transparent,#000 40%);opacity:.35;animation:sgGrid 2.4s linear infinite}
.sg-fx-grid .sg-horizon{position:absolute;left:0;right:0;bottom:44%;height:2px;background:linear-gradient(90deg,transparent,var(--p),transparent);box-shadow:0 0 30px 6px color-mix(in srgb,var(--p) 50%,transparent);opacity:.6}
@keyframes sgGrid{to{background-position:0 70px}}
.t-light .sg-fx-grid .sg-floor{opacity:.18}

/* sections under the hero get a touch of the same drama */
.sg .t-sec-h h2,.sg .t-head h2{letter-spacing:-.01em}

/* ---------------- phones & tablets ---------------- */
@media (max-width:900px){
  .sg-hero{min-height:auto;padding:24px 0 70px;align-items:flex-start}
  .sg-in{grid-template-columns:1fr;gap:10px}
  .sg-stage{order:-1;width:min(74vw,400px);max-width:none;margin-bottom:6px}
  .sg-wide .sg-stage{width:100%}
  .sg-tx{text-align:start}
  .sg-title{font-size:clamp(36px,10vw,56px)}
  .sg-word span{font-size:clamp(90px,30vw,200px);align-self:flex-start;margin-top:24vw}
  .sg-ui{gap:14px}
  .sg-arrows button{width:42px;height:42px}
  .sg-scroll{display:none}
  .sg-s3{display:none}
}
@media (hover:none){.sg-hero{--mx:0!important;--my:0!important}}
@media (prefers-reduced-motion:reduce){
  .sg-hero *,.sg-hero *::before,.sg-hero *::after{animation:none!important;transition:none!important}
  .sg-fx{display:none}
  .sg-sat{opacity:1}
  .sg-w>span,.sg-sub,.sg-acts,.sg-kick{transform:none;opacity:1}
}