/* Hero project showcase (stacked live sites), shared by the homepage and portfolio page (extracted from home.css) */
.hero-showcase{position:relative;min-width:0;width:100%;height:440px;perspective:1200px}
.hero-orbit{position:absolute;border:1px solid #c7f17630;border-radius:50%;pointer-events:none}
.hero-orbit-one{width:90%;height:80%;left:6%;top:12%;transform:rotate(-18deg)}
.hero-orbit-two{width:65%;height:100%;left:20%;top:0;transform:rotate(24deg)}
.hero-project{position:absolute;overflow:hidden;border-radius:12px;border:1px solid #cddfdf65;background:#172b33;box-shadow:0 20px 42px #07191c60;transition:transform .45s,box-shadow .3s;cursor:pointer}
.hero-project:hover{box-shadow:0 24px 48px #07191c90}
.hero-project:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.hero-project img{width:100%;height:100%;object-fit:cover;object-position:top}
.hero-project-back{width:69%;aspect-ratio:1.65;top:22px;left:3%;transform:rotate(-9deg);opacity:.8}
.hero-project-mid{width:72%;aspect-ratio:1.65;top:88px;right:1%;transform:rotate(7deg)}
.hero-project-front{width:86%;aspect-ratio:1.57;left:7%;top:152px;transform:rotate(-3deg)}
.hero-project-back:is(:hover,:focus-visible){transform:rotate(-9deg) translateY(-14px);opacity:1}
.hero-project-mid:is(:hover,:focus-visible){transform:rotate(7deg) translateY(-14px)}
.hero-project-front:is(:hover,:focus-visible){transform:rotate(-3deg) translateY(-12px)}
.hero-project-label{position:absolute;bottom:12px;left:12px;border-radius:5px;padding:6px 9px;font-size:9px;letter-spacing:.05em;background:#102b32ee;color:white}
.hero-signal-one{position:absolute;top:2px;right:0;display:flex;align-items:center;gap:10px;border:1px solid #86a394;background:#e4f0df;color:var(--dark);padding:10px 15px;border-radius:10px;box-shadow:0 12px 30px #102b3230}
.hero-signal b{font-size:25px;letter-spacing:-.06em}
.hero-signal span{font-size:10px;max-width:58px;line-height:1.4}
.hero-signal-two{display:none}
.facebook-float{position:absolute;left:0;bottom:0;z-index:4;background:var(--paper);color:var(--ink);border-radius:11px;display:flex;align-items:center;gap:10px;padding:10px 14px;box-shadow:0 14px 35px #06191c40;font-size:12px}
.facebook-float img{width:39px;height:43px;object-fit:cover;object-position:center 20%;border-radius:6px}
.facebook-float .facebook-icon{background:#1877f2;color:white;border-radius:4px;width:19px;text-align:center;font-weight:800}
.facebook-float b{margin-left:8px}
.footer-social .facebook-icon{background:#2769bf;padding:1px 6px;border-radius:3px;color:white;margin-right:5px}
@media(max-width:1000px){.hero-showcase{height:365px}.hero-project-front{top:125px}.hero-project-mid{top:72px}}
@media(max-width:760px){.hero-showcase{width:min(480px,100%);height:380px;margin:auto}.hero-project-front{top:126px}}
@media(max-width:400px){.hero-showcase{height:330px}.hero-project-front{top:112px}.hero-project-mid{top:60px}.hero-project-back{top:22px}.hero-signal-one{padding:7px 10px}.hero-signal b{font-size:22px}.hero-project-label{font-size:8px;bottom:8px;left:8px}.facebook-float{padding:8px 10px}}
.facebook-float{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.facebook-float img{transition:transform .25s ease}
.facebook-float .facebook-icon{transition:transform .25s ease,background .25s ease}
.facebook-float b{transition:transform .25s ease,color .25s ease}
.facebook-float:hover{transform:translateY(-7px) rotate(-1deg);background:#fff;box-shadow:0 22px 42px #06191c65}
.facebook-float:hover img{transform:scale(1.06)}
.facebook-float:hover .facebook-icon{transform:scale(1.1);background:#0d65d9}
.facebook-float:hover b{transform:translate(3px,-3px);color:#1877f2}
@media(prefers-reduced-motion:reduce){.facebook-float,.facebook-float img,.facebook-float .facebook-icon,.facebook-float b{transition:none}.facebook-float:hover{transform:none}.facebook-float:hover img,.facebook-float:hover .facebook-icon,.facebook-float:hover b{transform:none}}
@media(max-width:400px){.hero-orbit-one{width:72%;height:65%;left:14%;top:18%}.hero-orbit-two{width:50%;height:78%;left:25%;top:10%}}
.portfolio-hero .hero-showcase{margin-inline:auto}