/* Portfolio hero — reference composition, fluid from mobile to ultrawide. */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-latin-variable.woff2') format('woff2')}
:root{--nav-h:68px;--max-w:1320px;--font-display:Inter,system-ui,sans-serif}
body{background:#05040c}
#navbar{--nav-offset:18px;top:var(--nav-offset);left:6%;right:6%;border:1px solid #6f3f9f66;border-radius:13px;background:linear-gradient(110deg,#080513c9,#100a29bb);box-shadow:0 0 40px #7732ff12}
.nav-content{height:52px;padding:0 12px 0 26px;max-width:none;gap:26px}
.nav-logo__img{height:42px;width:70px;object-fit:contain}
.nav-links{margin:auto;gap:32px}.nav-links a{font-size:11px}
.nav-links a.active::after{width:5px;height:5px;border-radius:50%;left:calc(50% - 2px);bottom:-10px;background:#b467ff;box-shadow:0 0 10px #a64dff}
.nav-cta{font-family:Inter,sans-serif;font-size:11px;padding:9px 17px;border-radius:16px}
.cosmic-hero{position:relative;isolation:isolate;min-height:100svh;height:auto;padding:96px 0 32px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid #593a822f;background:radial-gradient(ellipse at 76% 46%,#24104e66,transparent 47%),#04040d}
.cosmic-hero::before{content:'';position:absolute;inset:0;z-index:-2;background:url('../img/cosmic-landscape.png') center bottom/100% 100% no-repeat;opacity:.9}
.cosmic-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#03030b80,transparent 57%),linear-gradient(0deg,#05040c,transparent 12%)}
.cosmic-layout{width:84%;max-width:1720px;margin:0 auto;position:relative;display:grid;grid-template-columns:46% 54%;align-items:center}
.cosmic-copy{position:relative;z-index:3;padding:0}
.cosmic-badge{display:inline-flex;align-items:center;gap:10px;padding:5px 13px;border:1px solid #9861d363;border-radius:24px;font:600 9px/1.4 Inter,sans-serif;letter-spacing:1.2px;background:#090612a3;margin-bottom:12px}
.cosmic-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:#ac42ff;box-shadow:0 0 14px #a134ff}
.cosmic-title{font:800 clamp(30px,3.05vw,53px)/1 Inter,sans-serif;letter-spacing:-1.6px;margin:0 0 14px;color:#faf9ff}
.cosmic-title .gradient{background:linear-gradient(100deg,#e7c4fa 0%,#b768ff 36%,#b3a4ff 67%,#6ff3ec 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
.cosmic-description{max-width:450px;color:#c7c2d1;font-size:clamp(13px,1.1vw,16px);line-height:1.3;margin-bottom:16px}
.cosmic-actions{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px}
.cosmic-actions .btn{font:600 12px/1.4 Inter,sans-serif;padding:11px 23px;gap:12px;border-radius:28px}
.cosmic-actions .btn--primary{background:linear-gradient(115deg,#af4cff,#690be0);border:1px solid #c786ff77;box-shadow:0 7px 30px #8822ed55}
.cosmic-actions .btn--ghost{background:#09071375;border-color:#8b50c377}
.cosmic-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;width:125%;position:relative;z-index:4}
.proof-item{display:flex;gap:9px;align-items:center}.proof-item>i{width:35px;height:35px;flex:none;display:grid;place-items:center;border:1px solid #60309177;border-radius:50%;color:#b36aff;background:#160c2577;font-size:16px}
.proof-item strong{display:block;font-size:10px;line-height:1.15;font-weight:700}.proof-item:first-child strong:first-child{font-size:14px;line-height:1}.proof-item small{display:block;font-size:7.5px;color:#a9a2b7;margin-top:3px;line-height:1.2;white-space:nowrap}
.cosmic-stage{position:relative;aspect-ratio:1.6;width:118%;margin-left:-9%;perspective:1100px;--pointer-x:0px;--pointer-y:0px}
#particleGlobe{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.service-float{position:absolute;z-index:2;width:25%;min-height:125px;padding:17px 16px 15px;border-radius:15px;border:1px solid #ac7affb3;background:linear-gradient(135deg,#30205a99,#0c0d2ee8 56%,#211747ba);box-shadow:inset 3px 0 0 #7882fc88,inset -3px -2px 0 #893df044,0 0 9px #7062ff77,0 18px 30px #0006;backdrop-filter:blur(9px);transform-style:preserve-3d;animation:serviceFloat 6s ease-in-out infinite;translate:var(--pointer-x) var(--pointer-y);transition:box-shadow .25s,border-color .25s}
.service-float:hover,.service-float:focus-visible{border-color:#e1baff;box-shadow:inset 3px 0 0 #9995ff,0 0 24px #974dff99;animation-play-state:paused}
.service-float>i{display:block;color:#b15dff;font-size:26px;margin-bottom:12px;text-shadow:0 0 16px #8e31ff55}
.service-float strong{display:block;font-size:14px;line-height:1.25;margin-bottom:5px;letter-spacing:-.4px}.service-float p{font-size:10px;line-height:1.35;color:#c4bad9}
.service-float .card-arrow{position:absolute;right:12px;top:14px;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;background:#9250de33;border:1px solid #b17bf555;color:#d2a4ff;font-size:10px;box-shadow:0 0 15px #af63ff33}
.float-web{left:8%;top:12%;--tilt:-10deg;--yaw:18deg;animation-delay:-1s}.float-ai{right:1%;top:14%;--tilt:10deg;--yaw:-18deg;animation-delay:-3s}.float-cloud{left:10%;bottom:15%;--tilt:-7deg;--yaw:14deg;animation-delay:-4s}.float-geo{right:4%;bottom:10%;--tilt:8deg;--yaw:-16deg;animation-delay:-2s}
@keyframes serviceFloat{0%,100%{transform:translateY(0) rotateZ(var(--tilt)) rotateY(var(--yaw))}50%{transform:translateY(-14px) rotateZ(calc(var(--tilt) + 3deg)) rotateY(calc(var(--yaw) - 5deg))}}
.holo-code{position:absolute;color:#994cf6;border:1px solid #743f8c88;border-radius:7px;background:#12072655;box-shadow:0 0 20px #8631e022;padding:9px;width:77px;opacity:.45;transform:rotate(-15deg);font:9px/1.7 monospace;left:1%;top:49%;pointer-events:none}.holo-code::after{content:'';display:block;height:25px;background:repeating-linear-gradient(0deg,transparent 0 5px,#8b43d855 5px 6px);margin-top:5px}.holo-code--right{left:auto;right:0;top:46%;transform:rotate(13deg)}
.holo-cube{position:absolute;left:43%;top:7%;width:13px;height:13px;transform:rotate(30deg);border:1px solid #c387ff;background:linear-gradient(45deg,#3a116c,#a874eb);box-shadow:0 0 18px #9e62ed;animation:cubeFloat 8s ease-in-out infinite}
@keyframes cubeFloat{50%{transform:translateY(-12px) rotate(90deg)}}
.section-title{text-transform:none;letter-spacing:-.04em}.about__name{background:linear-gradient(90deg,#f0e5ff,#aa65f5);background-clip:text;color:transparent}
:focus-visible{outline:2px solid #d1a2ff;outline-offset:5px}
@media(min-width:1500px){.cosmic-layout{width:86%}.cosmic-stage{max-width:1000px}.cosmic-title{font-size:clamp(45px,3.05vw,60px)}.cosmic-description{font-size:17px}.cosmic-proof{width:100%}.cosmic-proof strong{font-size:12px}.cosmic-proof small{font-size:9px}}
@media(max-width:1050px){.cosmic-layout{width:88%;grid-template-columns:47% 53%}.cosmic-title{font-size:34px}.cosmic-stage{width:125%;margin-left:-13%}.service-float{padding:13px 11px;min-height:110px}.service-float strong{font-size:12px}.service-float p{font-size:9px}.nav-links{gap:20px}.cosmic-proof{gap:8px}.proof-item{gap:6px}.proof-item>i{width:29px;height:29px}.proof-item small{font-size:7px}.cosmic-actions .btn{padding:13px 18px;font-size:12px}}
@media(max-width:960px){#navbar{--nav-offset:12px;top:var(--nav-offset);left:4%;right:4%}.nav-content{height:54px;padding:0 14px;gap:12px}.nav-logo__img{height:37px}.nav-cta{margin-left:auto;font-size:10px;padding:9px 12px}.nav-toggle{display:flex}.nav-links{display:none;position:absolute;top:65px;left:0;right:0;padding:20px;border:1px solid #70419877;border-radius:13px;background:#0d081cf5;flex-direction:column;gap:20px}.nav-links.active{display:flex}.nav-links a{font-size:14px}.cosmic-hero{height:auto;min-height:100svh;padding:103px 0 30px}.cosmic-layout{margin:0 auto;width:89%;display:flex;flex-direction:column}.cosmic-copy{width:100%;padding:0;order:0}.cosmic-title{font-size:clamp(32px,6.6vw,48px);letter-spacing:-1.3px;max-width:570px}.cosmic-description{font-size:14px;max-width:510px}.cosmic-badge{font-size:9px;margin-bottom:18px}.cosmic-actions{margin-bottom:23px}.cosmic-actions .btn{font-size:12px;padding:13px 20px}.cosmic-proof{width:100%;gap:12px;grid-template-columns:repeat(2,1fr)}.proof-item strong{font-size:11px}.proof-item small{font-size:9px}.proof-item>i{width:34px;height:34px}.cosmic-stage{width:112%;margin:8px -6% -10px;aspect-ratio:1.18}.service-float{width:25%;padding:13px 10px;min-height:103px}.service-float>i{font-size:22px;margin-bottom:8px}.service-float strong{font-size:11px}.service-float p{font-size:8px}.service-float .card-arrow{width:18px;height:18px;right:7px;top:9px}.float-web{left:4%;top:15%}.float-ai{right:2%;top:16%}.float-cloud{left:6%;bottom:14%}.float-geo{right:4%;bottom:11%}.cosmic-hero::before{background-position:65% bottom;background-size:auto 75%}.cosmic-hero::after{background:linear-gradient(0deg,#05040c,transparent 10%,transparent 55%,#04040d 90%)}.ai-fabs{bottom:18px;right:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.service-float,.holo-cube{animation:none}.service-float{transform:rotateZ(var(--tilt));translate:none}.cosmic-stage{--pointer-x:0px!important;--pointer-y:0px!important}}
@media(max-width:960px){.nav-cta{display:inline-flex}.nav-links{transform:none;opacity:1;pointer-events:auto}.nav-links li{padding:0;border:0}.nav-links a.active::after{display:none}}
@media(max-width:360px){.nav-cta{font-size:9px;padding:8px 10px;gap:5px}.nav-content{gap:8px}.nav-logo__img{width:55px}.cosmic-actions .btn{padding:12px 15px;font-size:11px}}
@media(max-width:960px){.cosmic-title{line-height:1.08}.cosmic-description{line-height:1.5}.cosmic-actions{gap:10px}.cosmic-actions .btn{font-size:11px;padding:12px 16px;gap:8px}.proof-item small{white-space:normal}.cosmic-proof{row-gap:16px}}
@media(max-width:960px){.cosmic-stage{max-width:580px}.cosmic-copy{max-width:700px}.cosmic-title{max-width:700px}.cosmic-proof{max-width:570px}.cosmic-description{max-width:570px}.cosmic-hero{min-height:0}}
/* The metrics share the pedestal's vertical center rather than the copy's baseline. */
@media(min-width:961px){.cosmic-copy{padding-bottom:48px}.cosmic-layout>.cosmic-proof{position:absolute;left:0;top:var(--pedestal-y,95%);width:46%;transform:translateY(-50%);margin:0}.cosmic-actions{margin-bottom:0}}
@media(max-width:960px){.cosmic-proof{order:1}.cosmic-stage{order:2}}