.hub-page{background:#faf8f5}
.hub-hero{position:relative;overflow:hidden;background-color:#fbfaf8;background-image:linear-gradient(#e9e5df 1px,transparent 1px),linear-gradient(90deg,#e9e5df 1px,transparent 1px);background-size:64px 64px}
.hub-hero-grid{min-height:710px;display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center;padding:5rem 0}
.hub-hero-copy{position:relative;z-index:2}
.hub-hero h1{font:800 clamp(4rem,6vw,7rem)/1.01 var(--sans);letter-spacing:-.08em;margin:1.4rem 0;max-width:720px}
.hub-hero h1 em,.hub-directory h2 em{font-style:normal;color:#fff;background:#ff530d;padding:0 .12em;border-radius:.09em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hub-hero-copy>p{font-size:1.05rem;line-height:1.75;color:#5e585d;max-width:620px}
.hub-hero-actions,.hub-bottom-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1.5rem;margin-top:2rem}
.hub-hero-note{margin-top:3.5rem;border-top:1px solid #d9cdc5;padding-top:1rem;color:#8a776e;font-size:.63rem;letter-spacing:.1em;font-weight:800;text-transform:uppercase}
.hub-hero-note span{color:#ff530d;margin:0 .4rem}
.hub-stage{height:490px;position:relative;perspective:1200px;transform-style:preserve-3d;transform:rotateY(-8deg) rotateX(3deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hub-stage-grid{position:absolute;inset:1rem;border:1px solid #e4d4ca;border-radius:18px;background:radial-gradient(circle at 68% 48%,#ffd5c1,transparent 55%),#f2e5dc;box-shadow:23px 26px 0 #ebcaba}
.hub-stage-card{position:absolute;border:1px solid #e5d3c7;border-radius:12px;padding:1.4rem;box-shadow:0 20px 50px #3e241b30;display:flex;flex-direction:column;gap:.5rem;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.hub-stage-card small,.hub-stage-card>span{font-size:.55rem;font-weight:800;letter-spacing:.12em}
.hub-stage-card strong{font:800 1.8rem/1.04 var(--sans);letter-spacing:-.065em;margin:auto 0}
.stage-back{background:#ffd5c2;color:#783415;width:52%;height:53%;right:1%;top:9%;transform:rotate(11deg) translateZ(-30px)}
.stage-middle{background:#ff530d;color:#fff;width:54%;height:55%;left:8%;top:3%;transform:rotate(-9deg) translateZ(20px)}
.stage-front{background:#fff;color:#211c20;width:65%;height:61%;left:22%;bottom:4%;transform:rotate(3deg) translateZ(70px)}
.stage-front-head{display:flex;align-items:center;justify-content:space-between}.stage-front-head img{display:block}
.stage-front-row{border-top:1px solid #eee4dd;display:flex;justify-content:space-between;gap:.5rem;padding:.65rem 0;font-size:.65rem}.stage-front-row b{color:#a7451d}
.hub-stage:hover .stage-back{transform:rotate(15deg) translate(10px,-8px) translateZ(-30px)}
.hub-stage:hover .stage-middle{transform:rotate(-13deg) translate(-12px,-12px) translateZ(20px)}
.hub-stage:hover .stage-front{transform:rotate(0) translate(0,-10px) translateZ(90px)}
.hub-stage-caption{position:absolute;bottom:-1.1rem;left:8%;font-size:.55rem;letter-spacing:.13em;font-weight:800;color:#9d4c2c}
.hub-path{background:#fff}
.path-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:1rem;margin-top:3rem}
.path-picker{display:grid;gap:.6rem}
.path-option{width:100%;background:#fbf8f5;border:1px solid #e4d8d0;border-radius:10px;padding:1rem 1.25rem;display:grid;grid-template-columns:1fr auto;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.path-option:hover{transform:translateX(4px);border-color:#e1ad91}.path-option[aria-pressed="true"]{background:#fff0e7;border-color:#ff9e6f}
.path-option span{grid-column:1;display:block;font-size:.58rem;font-weight:800;letter-spacing:.11em;color:#aa4b22}
.path-option strong{grid-column:1;font-size:1rem;letter-spacing:-.045em;margin-top:.25rem;color:#272126}
.path-option b{grid-column:2;grid-row:1/3;align-self:center;color:#b04b22}
.path-option:focus-visible{outline:3px solid #ff8e59;outline-offset:2px}
.path-result{background:#211c20;color:#fff;border-radius:13px;padding:2.3rem;display:flex;flex-direction:column;min-height:350px}
.path-result small{color:#ffab83;font-size:.6rem;letter-spacing:.12em;font-weight:800}
.path-result h3{font:800 clamp(2rem,2.8vw,3rem)/1.08 var(--sans);letter-spacing:-.065em;margin:1rem 0}
.path-result p{color:#d2c5ca;font-size:.85rem;line-height:1.75;max-width:520px}
.path-result ol{padding-left:1.3rem;color:#f2e9ec;font-size:.75rem;line-height:1.9;margin:.4rem 0 1.3rem}
.path-result .button{margin-top:auto;align-self:flex-start;background:#ff530d;color:#fff}
.hub-directory{background:#f5f0ea}
.hub-directory-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem}
.hub-directory h2{font:800 clamp(2.8rem,4.6vw,5.1rem)/1.05 var(--sans);letter-spacing:-.07em;margin:.8rem 0}
.hub-directory-heading p{max-width:450px;color:#665f63;line-height:1.7}
.demo-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
.gallery-card{border:1px solid #e5dad2;border-radius:13px;background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.gallery-card:hover{transform:translateY(-6px);box-shadow:0 22px 45px #44271d20}
.gallery-art{height:220px;display:grid;place-items:center;overflow:hidden;padding:1rem;perspective:900px;position:relative}
.gallery-crm .gallery-art{background:#eaded5}.gallery-hasti .gallery-art{background:#ff6020}.gallery-marketing .gallery-art{background:#30272a}.gallery-gym .gallery-art{background:#e9e2da}.gallery-workspace .gallery-art{background:#f5e4d8}
.gallery-window{width:85%;height:160px;display:grid;grid-template-columns:45px 1fr;background:#fff;border:1px solid #d7c4b7;border-radius:8px;box-shadow:13px 15px 0 #d4bfb1;transform:rotate(-5deg) rotateY(-8deg);transition:transform .35s}
.gallery-card:hover .gallery-window,.gallery-card:hover .gallery-poster,.gallery-card:hover .gallery-floor,.gallery-card:hover .gallery-workspace-ui{transform:rotate(0) rotateY(0) translateY(-5px)}
.gallery-window-side{background:#211c20;padding:.7rem;display:flex;flex-direction:column;gap:.5rem}.gallery-window-side i{width:14px;height:5px;background:#ff530d;border-radius:9px}
.gallery-window-body{padding:.8rem;display:flex;flex-direction:column;gap:.4rem}.gallery-window-body small{font-size:.46rem;color:#a4451c;font-weight:800}.gallery-window-body strong{font-size:1rem;letter-spacing:-.05em}.gallery-window-body span{display:flex;justify-content:space-between;border-top:1px solid #eee4df;padding-top:.4rem;font-size:.5rem}.gallery-window-body b{color:#a74620}
.gallery-signal{width:78%;background:#fff;border-radius:10px;padding:1.2rem;box-shadow:13px 15px 0 #b93a0b;transform:rotate(-5deg)}.gallery-signal small{display:block;color:#a8461e;font-size:.55rem;font-weight:800;letter-spacing:.12em}.gallery-signal strong{display:block;font-size:1.35rem;letter-spacing:-.055em;margin:.7rem 0}.gallery-signal span{font-size:.6rem;font-weight:800;color:#a8461e}
.gallery-poster{width:52%;min-width:165px;height:190px;background:#171315;color:#fff;padding:1rem;display:flex;flex-direction:column;transform:rotate(6deg) rotateY(-7deg);box-shadow:13px 13px 0 #7d4434;transition:transform .35s}.gallery-poster small,.gallery-poster span{font-size:.5rem;font-weight:800;letter-spacing:.08em}.gallery-poster strong{font-size:1.4rem;letter-spacing:-.07em;line-height:1;margin:auto 0}
.gallery-floor{width:70%;height:170px;background-color:#fff;background-image:linear-gradient(#eee4dc 1px,transparent 1px),linear-gradient(90deg,#eee4dc 1px,transparent 1px);background-size:24px 24px;border:1px solid #d3c0b0;box-shadow:13px 15px 0 #d8c9bc;transform:rotate(-6deg) rotateY(-8deg);display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:1rem;transition:transform .35s}.gallery-floor span{display:grid;place-items:center;background:#2c2529;color:#fff;font-size:.55rem;font-weight:800}
.gallery-workspace-ui{width:85%;height:165px;background:#fff;border:1px solid #e3cbbb;border-radius:8px;box-shadow:13px 15px 0 #e3caba;transform:rotate(5deg) rotateY(8deg);padding:1rem;display:flex;flex-direction:column;gap:.4rem;transition:transform .35s}.gallery-workspace-ui small{font-size:.5rem;color:#a4441e;font-weight:800}.gallery-workspace-ui strong{font-size:1.2rem;letter-spacing:-.05em;margin:.3rem 0}.gallery-workspace-ui span{border-top:1px solid #eee4dd;font-size:.55rem;padding:.3rem}
.gallery-content{padding:1.35rem;display:flex;flex-direction:column;flex:1}
.gallery-meta{display:flex;justify-content:space-between;gap:.5rem;align-items:start;color:#a7461f;font-size:.54rem;font-weight:800;letter-spacing:.08em}
.gallery-meta b{color:#7d5a47;text-align:right}
.gallery-content h3{font:800 1.65rem/1.1 var(--sans);letter-spacing:-.055em;margin:1.1rem 0 .6rem}
.gallery-content p{font-size:.76rem;line-height:1.7;color:#655f63;margin:0 0 1.2rem}
.gallery-content a{align-self:flex-start;margin-top:auto;font-size:.7rem;font-weight:800;color:#a24019;border-bottom:1px solid #a24019;padding-bottom:.15rem}
.hub-boundary{background:#211c20;color:#fff;padding:5rem 0}
.hub-boundary-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:end}
.hub-boundary h2{font:800 clamp(3rem,4.6vw,5rem)/1.05 var(--sans);letter-spacing:-.07em;margin:1rem 0}
.hub-boundary p{color:#d1c2c7;line-height:1.8;max-width:580px}
.hub-boundary .text-link{color:#fff;border-color:#a9989c}
@media(max-width:1050px){.hub-hero-grid{grid-template-columns:1fr;gap:2rem}.hub-stage{height:420px;max-width:700px;width:100%;margin:auto}.demo-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-directory-heading{align-items:start;flex-direction:column}}
@media(max-width:700px){.hub-hero-grid{padding:3.5rem 0 4rem}.hub-hero h1{font-size:clamp(3.6rem,13vw,5rem)}.hub-hero-note{line-height:1.8}.hub-stage{height:310px;transform:none}.hub-stage-grid{inset:.7rem;box-shadow:10px 12px 0 #ebcaba}.hub-stage-card{padding:.75rem}.hub-stage-card strong{font-size:1.15rem}.stage-back{width:55%;height:50%}.stage-middle{width:58%;height:54%}.stage-front{width:66%;height:62%;left:20%}.stage-front-row{font-size:.42rem;padding:.45rem 0}.stage-front-head img{width:18px;height:18px}.hub-stage-caption{font-size:.45rem}.path-layout,.hub-boundary-grid{grid-template-columns:1fr}.path-result{min-height:310px;padding:1.5rem}.demo-gallery{grid-template-columns:1fr}.hub-directory h2{font-size:clamp(2.6rem,10vw,3.4rem)}.hub-boundary{padding:3.5rem 0}}
@media(prefers-reduced-motion:reduce){.hub-stage,.hub-stage-card,.gallery-card,.gallery-window,.gallery-poster,.gallery-floor,.gallery-workspace-ui,.path-option{transition:none}.hub-stage:hover .stage-back,.hub-stage:hover .stage-middle,.hub-stage:hover .stage-front,.gallery-card:hover .gallery-window,.gallery-card:hover .gallery-poster,.gallery-card:hover .gallery-floor,.gallery-card:hover .gallery-workspace-ui{transform:none}}