/* KH-04.2: a compact, readable product stage. All artwork stays in one moving plane. */
.personal-brand .catalog{padding-top:24px}
.personal-brand .catalog-head h2{font-size:34px;line-height:1.5}
.personal-brand .catalog-head p{font-size:17px;line-height:1.65;max-width:900px;margin-top:4px}
.personal-brand .gallery{--object:360px;--scene:342px;margin-top:10px}
.is-enhanced.personal-brand .gallery{height:calc(var(--scene) + 210px)}
.is-enhanced .gallery .object-plane{top:0}
.gallery .scene-object{position:absolute;inset:0;isolation:isolate}
.gallery .object-image{padding:0;filter:drop-shadow(8px 14px 10px #0006)}
.gallery .object-light{inset:0;z-index:5}
.gallery .object-reflection{opacity:.075;top:87%;height:65%;mask-image:linear-gradient(to top,#0008,transparent 21%)}
.gallery .object-shadow{bottom:6%;height:10%}
.gallery .stage-floor{top:260px;height:178px}
.gallery .stage-rim{top:250px;height:105px}
.gallery .back-arc{top:4%;height:45%}
.gallery .chamber-light{height:75%;top:-14%;opacity:.85}
/* Full supplied materials: no crop, no image viewer, no invented interface controls. */
.scene-material{position:absolute;z-index:4;line-height:0;transform-origin:50% 70%;box-shadow:8px 14px 22px #0009;transition:filter .4s;pointer-events:none}
.scene-material .material-image{width:100%;height:auto;object-fit:contain}
.scene-material::before{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(145deg,#f4de9e,#673624 32%,#1c0c10 74%,#c99849);border-radius:2px}
.offer:not(.is-active) .scene-material{filter:brightness(.76)}
/* PO: an analysis sheet pulled forward from the chart and magnifier. */
.object-po .object-image{position:absolute;left:29%;top:0;width:76%;height:82%}
.material-po{left:-7%;top:47%;width:78%;transform:perspective(700px) rotateY(7deg) rotateZ(-8deg)}
.material-po::after{content:"";position:absolute;top:-5px;left:13%;width:19%;height:3px;background:#e8c777;box-shadow:0 2px 4px #0008}
/* VIBE: a broad, nearly frontal analysis plane through the asset-selection gate. */
.object-vibe .object-image{position:absolute;left:52%;top:11%;width:62%;height:84%}
.material-vibe{left:-10%;top:20%;width:89%;transform:perspective(700px) rotateY(-12deg) rotateZ(2deg)}
.material-vibe::before{inset:-3px -2px;background:linear-gradient(95deg,#8d182c,#f4cbb1 48%,#671522)}
/* Pattern: the analysis material rests above the existing candlestick structure. */
.object-pattern .object-image{position:absolute;left:12%;top:22%;width:87%;height:77%}
.material-pattern{left:-4%;top:1%;width:87%;transform:perspective(700px) rotateY(10deg) rotateZ(-5deg)}
.material-pattern::before{inset:-2px -2px -5px;background:linear-gradient(145deg,#f4de9e,#35111a 36%,#a65b3d)}
/* Robot: a square brand panel beside the figure, clear of face and torso. */
.object-robot .object-image{position:absolute;left:48%;top:0;width:56%;height:96%}
.material-robot{left:-7%;top:22%;width:54%;transform:perspective(700px) rotateY(12deg) rotateZ(-4deg)}
.material-robot::after{content:"";position:absolute;left:10%;right:10%;top:100%;height:13px;border-inline:2px solid #9d6840;transform:skewX(-10deg);background:linear-gradient(180deg,#4f231f,transparent)}
/* Copy: a network backdrop with the original central node and figures in front. */
.object-copy .object-image{position:absolute;left:32%;top:25%;width:80%;height:75%}
.material-copy{left:-9%;top:4%;width:72%;transform:perspective(650px) rotateY(13deg) rotateZ(-7deg)}
.material-copy::after{content:"";position:absolute;left:57%;top:100%;width:1px;height:32px;background:#e8c777;transform:rotate(-21deg);transform-origin:top}
/* Diamond: the real community poster meets a crystal, in an open faceted mount. */
.object-diamond .object-image{position:absolute;left:44%;top:31%;width:70%;height:67%;padding:0}
.material-diamond{left:-9%;top:6%;width:88%;transform:perspective(700px) rotateY(-9deg) rotateZ(7deg)}
.material-diamond::before{inset:-8px;background:linear-gradient(135deg,#f4cbb1,#66111c 30%,#b80b22 62%,#e8c777);clip-path:polygon(0 0,94% 0,100% 12%,100% 100%,6% 100%,0 88%,0 0,1% 2%,1% 98%,99% 98%,99% 2%,1% 2%)}
/* Personal: projective coordinates measured on the supplied 1250×1250 laptop art.
   SVG viewBox scales both the fixed screen homography and the unmodified responsive image.
   The inset keeps every banner word left of the original foreground rocket. */
.laptop-display{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible;stroke:none;fill:none;pointer-events:none}
.screen-projection{position:absolute;width:1000px;height:650px;transform-origin:0 0;transform:matrix3d(.5194920629,.1091973918,0,-.0001526753605,-.1277519672,.7249923771,0,.00007940416142,0,0,1,0,449,145,0,1)}
.screen-content{position:absolute;left:2.5%;top:7%;width:82%;aspect-ratio:16/9;border:5px solid #12080c;border-radius:9px;overflow:hidden;box-shadow:0 0 35px #f6584335,0 2px 5px #f4cbb16b;background:#10080b}
.screen-content .material-image{display:block;width:100%;height:100%;object-fit:contain}
.screen-glare{position:absolute;inset:0;background:linear-gradient(125deg,#fff1cf26,transparent 39%,#e84b2110);pointer-events:none}
/* The semantic text never inherits a 3D scale. Whole Arabic phrases transition together. */
.is-enhanced.personal-brand .gallery .product-caption{top:var(--scene);width:min(880px,calc(100% - 48px));padding:0 12px 12px;transform:translate(-50%,8px);transition:opacity .26s ease,transform .35s ease,visibility .26s}
.is-enhanced.personal-brand .gallery .is-active .product-caption{transform:translate(-50%,0)}
.personal-brand .gallery .product-name{font:800 50px/1.06 Archivo,sans-serif;font-stretch:106%;letter-spacing:-.025em;text-transform:none;color:#f7ebd6;max-width:820px;margin:0 auto;text-wrap:balance}
.personal-brand .gallery .product-function{font:600 19px/1.65 Alexandria,sans-serif;color:#e9d5c3;margin:12px auto 0;max-width:670px;text-wrap:balance}
.personal-brand .gallery .details-action{font:750 16px/1.4 Alexandria,sans-serif;background:linear-gradient(110deg,#d5ae60,#f4de9e 56%,#e8c777);color:#23130d;border:1px solid #ffe1a0;border-radius:3px;padding:12px 23px;min-height:49px;margin-top:16px;gap:18px;box-shadow:0 6px 20px #0005;transition:filter .2s,box-shadow .2s}
.gallery .product-select:hover .details-action{color:#23130d;border-color:#ffe1a0;filter:brightness(1.08)}
.gallery .product-select:focus-visible .object-plane{outline:none}
.gallery .product-select:focus-visible .details-action{outline:2px solid #fff0b6;outline-offset:5px}
/* Nearest names belong to their original anchor, outside its scaled object plane. */
.is-enhanced .gallery .side-name{position:absolute;top:279px;bottom:auto;left:50%;right:auto;width:250px;min-height:52px;padding:5px 10px;font:750 22px/1.22 Archivo,sans-serif;font-stretch:100%;color:#e8c777;text-align:center;opacity:0;visibility:hidden;pointer-events:none;z-index:11;transform:translateX(-50%);transition:opacity .3s,color .2s;white-space:normal;text-wrap:balance}
.is-enhanced .gallery [data-neighbor="next"] .side-name{left:calc(50% - min(29vw,425px));opacity:1;visibility:visible;pointer-events:auto}
.is-enhanced .gallery [data-neighbor="previous"] .side-name{left:calc(50% + min(29vw,425px));opacity:1;visibility:visible;pointer-events:auto}
.gallery .side-name:hover{color:#fff0b6;text-decoration:underline;text-underline-offset:5px}
.detail-introduction{padding-bottom:23px;margin-bottom:25px;border-bottom:1px solid #4d3633}
.personal-brand .detail-introduction .product-role{margin-top:0;font:700 23px/1.8 Alexandria,sans-serif;color:#e8c777}
.personal-brand .detail-introduction .product-intro{margin-inline:0}
/* Unenhanced progressive fallback keeps the same content and one link per product. */
body:not(.is-enhanced) .gallery .object-plane{width:min(360px,100%);height:360px;margin:auto}
body:not(.is-enhanced) .gallery .side-name{display:none}
body:not(.is-enhanced) .gallery .product-caption{padding:12px 0 30px}
body:not(.is-enhanced) .gallery .product-name{font-size:34px}
@media(max-width:1050px){
 .personal-brand .gallery{--object:330px;--scene:320px}
 .personal-brand .gallery .product-name{font-size:44px}
 .is-enhanced .gallery .side-name{top:258px;width:210px;font-size:20px}
 .gallery .stage-floor{top:239px}.gallery .stage-rim{top:233px}
}
@media(max-width:850px){
 .personal-brand .catalog-head h2{font-size:31px}
 .personal-brand .gallery{--object:310px;--scene:306px}
 .is-enhanced .gallery .side-name{top:250px;width:190px;font-size:19px}
 .personal-brand .gallery .product-name{font-size:42px}
 .personal-brand .gallery .product-function{font-size:18px}
}
@media(max-width:600px){
 .personal-brand .catalog{padding-top:15px}
 .personal-brand .catalog-head h2{font-size:28px;line-height:1.5}
 .personal-brand .catalog-head p{font-size:16px;line-height:1.55;margin-top:6px;max-width:390px}
 .personal-brand .gallery{--object:280px;--scene:320px;margin-top:14px}
 .is-enhanced.personal-brand .gallery{height:calc(var(--scene) + 205px)}
 .is-enhanced .gallery .object-plane{top:49px}
 .is-enhanced .gallery .side-name{display:flex;align-items:center;justify-content:center;top:0;min-height:40px;width:calc(50% - 24px);padding:0 4px 6px;font-size:16px;line-height:1.15;border-bottom:1px solid #674831;transform:none}
 .is-enhanced .gallery [data-neighbor="next"] .side-name{left:16px}
 .is-enhanced .gallery [data-neighbor="previous"] .side-name{left:auto;right:16px}
 .is-enhanced.personal-brand .gallery .product-caption{width:calc(100% - 32px);padding-inline:0}
 .personal-brand .gallery .product-name{font-size:32px;line-height:1.08;font-stretch:100%;max-width:360px}
 .personal-brand .gallery .product-function{font-size:16px;line-height:1.65;max-width:350px;margin-top:10px}
 .personal-brand .gallery .details-action{font-size:15px;min-height:48px;margin-top:13px;padding:11px 22px}
 .gallery .stage-floor{top:268px;height:130px}.gallery .stage-rim{top:267px;height:81px}
 .gallery .back-arc{top:17%;height:31%}.gallery .chamber-light{top:0;height:70%}
 .gallery .object-reflection{opacity:.05}
}
@media(max-width:375px){
 .personal-brand .catalog-head h2{font-size:26px}
 .personal-brand .gallery{--object:262px;--scene:305px}
 .personal-brand .gallery .product-name{font-size:30px}
 .personal-brand .gallery .product-function{font-size:15px;max-width:320px}
 .gallery .stage-floor{top:251px}.gallery .stage-rim{top:250px}
}
@media(prefers-reduced-motion:reduce){
 .gallery .scene-material{transform:none}
 .gallery .object-reflection{display:none}
 .gallery .product-caption,.gallery .side-name,.gallery .scene-material{transition:none}
}