/* SiteHub Showroom — gallery page (light; app styles load lazily from showroom-app.css). */
.shr-page{--o:#FF8A00;--r:#FF3B30;--p:#FF2D55;--grad:linear-gradient(90deg,#FF8A00 0%,#FF3B30 55%,#FF2D55 100%);--grad-d:linear-gradient(135deg,#FF8A00 0%,#FF3B30 55%,#FF2D55 100%);--s2:#151515;--line:#232323;--line2:#2E2E2E;--t1:#F5F5F5;--t2:#B3B3B3;--t3:#858585;--ease:cubic-bezier(.2,.8,.2,1);color:var(--t1);font-family:var(--sh-font,'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif);padding:18px 0 96px}
.shr-page *,.shr-page *::before,.shr-page *::after{box-sizing:border-box}
.shr-page :where(h1,h2,h3,p,ul){margin:0;padding:0}
.shr-page :where(ul){list-style:none}
.shr-page :where(a){color:inherit;text-decoration:none}
.shr-page :where(button){font:inherit;cursor:pointer;color:inherit}
.shr-page :focus-visible{outline:2px solid var(--o);outline-offset:3px;border-radius:12px}
.shr-page [hidden]{display:none!important}
.shr-wrap{width:min(1232px,calc(100% - 48px));margin:0 auto}
.shr-breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--t3);margin:8px 0 19px}
.shr-breadcrumb a{color:var(--t1);display:inline-flex;align-items:center;min-height:32px}.shr-breadcrumb a:hover{color:var(--o)}
.shr-overline{display:inline-block;font-size:11px;letter-spacing:.12em;font-weight:800;color:var(--o)}
.shr-page .shr-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:13px 20px;border-radius:14px;border:1px solid transparent;font-size:14px;font-weight:750;transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s}
.shr-page .shr-btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px rgba(255,59,48,.28)}
.shr-page .shr-btn-primary:hover{transform:translateY(-2px)}
.shr-page .shr-btn-ghost{background:rgba(255,255,255,.05);border-color:var(--line2);color:#E2E2E2}
.shr-page .shr-btn-ghost:hover{border-color:rgba(255,138,0,.45)}

/* Hero */
.shr-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,60px);border-radius:32px;background:radial-gradient(ellipse at 85% 80%,rgba(255,74,30,.16),transparent 55%),linear-gradient(125deg,#0f0f0f,#111);border:1px solid #1a1a1a;overflow:hidden}
.shr-hero h1{font-size:clamp(30px,3.5vw,54px);line-height:1.08;letter-spacing:-.045em;font-weight:800;margin:16px 0}
.shr-hero h1 span{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.shr-lead{font-size:clamp(14px,1.1vw,16.5px);line-height:1.75;color:#CFCFCF;max-width:600px}
.shr-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.shr-hero-facts{display:flex;gap:24px;margin-top:28px;flex-wrap:wrap}
.shr-hero-facts b{display:block;font-size:26px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.shr-hero-facts span{font-size:12px;color:var(--t2)}
.shr-hero-visual{position:relative;height:360px}
.shr-hv-card{position:absolute;border-radius:22px;background:#151515;border:1px solid #262626;box-shadow:0 30px 70px rgba(0,0,0,.5);overflow:hidden}
.shr-hv-card svg{display:block;width:100%;height:100%}
.shr-hv-a{width:58%;height:78%;left:0;top:8%;animation:shr-float 7s ease-in-out infinite}
.shr-hv-b{width:58%;height:62%;right:0;top:0;animation:shr-float 8s ease-in-out -2s infinite}
.shr-hv-c{right:6%;bottom:2%;width:52%;padding:16px 18px;display:flex;flex-direction:column;gap:7px;animation:shr-float 6s ease-in-out -4s infinite}
.shr-hv-c span{font-size:11px;color:var(--t3);font-weight:700}
.shr-hv-c b{font-size:24px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.shr-hv-c i{display:block;height:5px;border-radius:9px;background:var(--grad);width:80%}
.shr-hv-c i:nth-of-type(2){width:55%;opacity:.7}.shr-hv-c i:nth-of-type(3){width:35%;opacity:.45}

/* Gallery */
.shr-gallery,.shr-section{margin-top:clamp(60px,8vw,100px);scroll-margin-top:96px}
.shr-head{max-width:760px;margin-bottom:26px}
.shr-head h2{font-size:clamp(26px,2.6vw,40px);line-height:1.12;letter-spacing:-.035em;font-weight:800;margin-top:12px}
.shr-head p{margin-top:12px;font-size:14.5px;line-height:1.7;color:var(--t2)}
.shr-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.shr-card{position:relative;display:flex;flex-direction:column;border-radius:26px;background:linear-gradient(180deg,#161616,#121212);border:1px solid var(--line);overflow:hidden;transition:transform .45s var(--ease),border-color .35s,box-shadow .45s;isolation:isolate}
.shr-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%),rgba(255,106,40,.14),transparent 45%);opacity:0;transition:opacity .35s;z-index:-1}
.shr-card:hover{transform:translateY(-6px);border-color:rgba(255,106,40,.45);box-shadow:0 28px 60px rgba(0,0,0,.5)}
.shr-card:hover::before{opacity:1}
.shr-card:nth-child(1),.shr-card:nth-child(4),.shr-card:nth-child(7),.shr-card:nth-child(8){grid-column:span 2}
.shr-card:nth-child(1) .shr-card-pv,.shr-card:nth-child(4) .shr-card-pv{height:250px}
.shr-card-top{display:flex;justify-content:space-between;padding:16px 18px 0;font-size:11px;font-weight:800;letter-spacing:.08em}
.shr-card-n{color:var(--t3)}
.shr-card-kind{color:#FFB36B;border:1px solid rgba(255,138,0,.3);background:rgba(255,138,0,.07);padding:3px 8px;border-radius:99px}
.shr-card-pv{display:block;height:190px;padding:6px 14px 0}
.shr-card-pv svg{width:100%;height:100%}
.shr-card-body{display:flex;flex-direction:column;gap:8px;padding:6px 18px 18px;flex:1}
.shr-card h3{font-size:17px;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.shr-card-desc{font-size:12.8px;line-height:1.6;color:var(--t2)}
.shr-card-tags{font-size:11px;color:var(--t3);font-weight:700}
.shr-card-cta{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:var(--o)}
.shr-card-cta svg{transition:transform .3s var(--ease)}
.shr-card:hover .shr-card-cta svg{transform:translateX(4px)}
.shr-card.is-launching{transform:scale(.98);border-color:var(--o)}
.shr-js .shr-card,.shr-js .shr-how article{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .35s,box-shadow .45s;transition-delay:calc(var(--i,0)*55ms)}
.shr-js .shr-card.is-in,.shr-js .shr-how article.is-in{opacity:1;transform:none}
.shr-js .shr-card.is-in:hover{transform:translateY(-6px)}

/* Preview animations (function-bound) */
.shr-card .pv-roof{transform-origin:160px 120px;animation:pv-roof 4.5s ease-in-out infinite}
.shr-card .pv-pop{animation:pv-pop 4s ease-in-out infinite}
.shr-card .pv-sel{animation:pv-dash 2.4s linear infinite}
.shr-card .pv-ins{animation:pv-ins 4s ease-in-out infinite}
.shr-card .pv-cover{transform-origin:right;animation:pv-wipe 4.5s ease-in-out infinite}
.shr-card .pv-door{transform-origin:250px 100px;animation:pv-door 4.8s ease-in-out infinite}
.shr-card .pv-glass{transform-origin:168px 100px;animation:pv-glass 4.4s ease-in-out infinite}
.shr-card .pv-bars rect{transform-origin:40px 0;animation:pv-bar 3.6s ease-in-out infinite}
.shr-card .pv-bars rect:nth-child(2){animation-delay:.2s}.shr-card .pv-bars rect:nth-child(3){animation-delay:.4s}.shr-card .pv-bars rect:nth-child(4){animation-delay:.6s}
.shr-card .pv-cart{animation:pv-cart 3.4s ease-in-out infinite}
.shr-card .pv-frame{animation:pv-color 6s steps(1) infinite}
.shr-card .pv-slot{animation:pv-blink 2.2s ease-in-out infinite}
.shr-card .pv-check{stroke-dasharray:40;stroke-dashoffset:40;animation:pv-check 2.6s ease-in-out infinite}
@keyframes pv-roof{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.28)}}
@keyframes pv-pop{0%,30%{opacity:0;transform:translateY(6px)}45%,85%{opacity:1;transform:none}100%{opacity:0}}
@keyframes pv-dash{to{stroke-dashoffset:-18}}
@keyframes pv-ins{0%,100%{width:10px}50%{width:22px}}
@keyframes pv-wipe{0%,15%{transform:scaleX(1)}55%,85%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes pv-door{0%,20%,100%{transform:scaleX(1)}50%,75%{transform:scaleX(.18)}}
@keyframes pv-glass{0%,20%,100%{transform:scaleX(1)}50%,75%{transform:scaleX(.25) skewY(-8deg)}}
@keyframes pv-bar{0%,100%{transform:scaleX(.55)}50%{transform:scaleX(1)}}
@keyframes pv-cart{0%,40%,100%{transform:translateY(0)}55%{transform:translateY(-8px)}}
@keyframes pv-color{0%{fill:#383E42}33%{fill:#A0682F}66%{fill:#F2F2F0}}
@keyframes pv-blink{0%,100%{fill:#151515}50%{fill:#2a1a10}}
@keyframes pv-check{0%,30%{stroke-dashoffset:40}60%,100%{stroke-dashoffset:0}}
@keyframes shr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* How / FAQ / Final */
.shr-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.shr-how article{padding:22px;border-radius:22px;background:var(--s2);border:1px solid var(--line)}
.shr-how h3{font-size:16px;font-weight:800}.shr-how p{margin-top:8px;font-size:13.5px;line-height:1.65;color:var(--t2)}
.shr-related{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:18px;font-size:13px;color:var(--t3)}
.shr-related a{display:inline-flex;align-items:center;min-height:38px;padding:7px 14px;border-radius:99px;border:1px solid var(--line2);color:#ddd}.shr-related a:hover{border-color:rgba(255,138,0,.5);color:var(--o)}
.shr-faq{display:grid;gap:10px;max-width:920px}
.shr-faq details{border-radius:18px;background:var(--s2);border:1px solid var(--line)}
.shr-faq details[open]{border-color:rgba(255,90,40,.38)}
.shr-faq summary{padding:18px 20px;cursor:pointer;list-style:none}.shr-faq summary::-webkit-details-marker{display:none}
.shr-faq summary h3{display:inline;font-size:15px;font-weight:750}
.shr-faq details p{padding:0 20px 20px;font-size:14px;line-height:1.75;color:#CFCFCF}
.shr-final{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:clamp(60px,8vw,100px);padding:clamp(26px,4vw,50px);border-radius:30px;background:radial-gradient(ellipse at 90% 0%,rgba(255,74,30,.22),transparent 55%),linear-gradient(125deg,#141010,#101010);border:1px solid rgba(255,90,40,.25)}
.shr-final h2{margin-top:10px;font-size:clamp(24px,2.4vw,36px);letter-spacing:-.03em;font-weight:800}
.shr-final p{margin-top:10px;font-size:14.5px;color:var(--t2);max-width:600px}

/* App overlay */
html.shr-locked,html.shr-locked body{overflow:hidden}
.shr-overlay{position:fixed;inset:0;z-index:2147482000;background:#070707;padding:12px;display:flex;contain:strict}
/* while a demo is open the gallery underneath is hidden and its animations stop → nothing repaints behind the 3D canvas */
html.shr-locked .shr-page>.shr-wrap{visibility:hidden}
html.shr-locked body *{animation-play-state:paused!important}
html.shr-locked .shr-overlay *{animation-play-state:running!important}
.shr-overlay-panel{position:relative;flex:1;max-width:1720px;margin:0 auto;border-radius:28px;overflow:auto;transform-origin:0 0;will-change:transform}
.shr-overlay.is-animating .shr-overlay-panel{overflow:hidden}
.shr-overlay-host{min-height:100%;display:flex;flex-direction:column}
.shr-overlay-host>div{flex:1}
.shr-overlay-host .shr-app{min-height:calc(100dvh - 24px)}
.shr-skeleton{flex:1;min-height:calc(100dvh - 24px);border-radius:28px;background:#0d0d0d;border:1px solid #1b1b1b;display:flex;flex-direction:column}
.shr-skel-head{padding:22px;border-bottom:1px solid #1d1d1d;font-size:20px}
.shr-skel-body{flex:1;display:grid;grid-template-columns:320px 1fr 320px;gap:1px}
.shr-skel-body i{background:linear-gradient(90deg,#111 0%,#181818 50%,#111 100%);background-size:200% 100%;animation:shr-shimmer 1.3s linear infinite}
@keyframes shr-shimmer{to{background-position:-200% 0}}
.shr-page .shr-error{display:grid;gap:12px;place-items:center;padding:40px;color:var(--t2);background:#111;border-radius:28px;min-height:50vh}

@media (max-width:1100px){.shr-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.shr-card:nth-child(1),.shr-card:nth-child(4){grid-column:span 2}.shr-card:nth-child(7),.shr-card:nth-child(8){grid-column:auto}.shr-how{grid-template-columns:1fr}}
@media (max-width:900px){.shr-hero{grid-template-columns:1fr}.shr-hero-visual{height:260px}}
@media (max-width:760px){
  .shr-card:nth-child(n){grid-column:auto}
  .shr-wrap{width:calc(100% - 28px)}
  .shr-hero{border-radius:24px;padding:24px 18px}
  .shr-hero-actions .shr-btn{flex:1 1 100%}
  .shr-hero-visual{display:none}
  .shr-cards{grid-template-columns:1fr}.shr-card:nth-child(1),.shr-card:nth-child(4){grid-column:auto}
  .shr-card-pv,.shr-card:nth-child(1) .shr-card-pv,.shr-card:nth-child(4) .shr-card-pv{height:180px}
  .shr-overlay{padding:0}.shr-overlay-panel{border-radius:0}
  .shr-overlay-host .shr-app,.shr-skeleton{min-height:100dvh;border-radius:0}
  .shr-skel-body{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .shr-page *,.shr-page *::before,.shr-page *::after{animation:none!important;transition:none!important}
  .shr-js .shr-card,.shr-js .shr-how article{opacity:1;transform:none}
  .shr-card .pv-cover{display:none}
}