/* Three complete service scenes, choreographed by scroll position. */
.showcase{position:relative;background:#080c14;border-top:1px solid #32435b;--scene-accent:#a9c8ff}
.showcase-pin{position:relative;padding:48px 5.5% 35px;overflow:clip;isolation:isolate}
.showcase-header{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:4}
.showcase-header h2{font-size:26px;font-weight:500;letter-spacing:-.8px;margin-top:12px;line-height:1.2}
.showcase-header .eyebrow{font-size:10px;letter-spacing:2px}
.showcase-header .scroll-toggle{font-size:12px;border:1px solid #344254;padding:8px 15px;border-radius:30px}
.showcase-body{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:20px;margin:65px 0}
.showcase-copy article{margin-bottom:70px}
.chapter-kicker{font:500 11px var(--font);letter-spacing:2px;color:var(--scene-accent)}
.showcase-copy h3{font-size:clamp(36px,4.4vw,67px);font-weight:500;letter-spacing:-2.5px;line-height:1.08;margin:24px 0}
.showcase-copy h3 em{color:var(--scene-accent)}
.showcase-copy p{max-width:375px;font-size:16px;color:#a5afc3;line-height:1.75}
.showcase-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.showcase-tags span{padding:5px 10px;border:1px solid #41516a;border-radius:3px;color:#c0ccdf;font-size:12px}
.showcase-ambience{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;background:radial-gradient(ellipse at 80% 48%,#27436433,transparent 60%)}
.showcase-word{position:absolute;top:18%;left:25%;font:800 clamp(180px,34vw,520px)/1 var(--display);letter-spacing:-20px;color:transparent;-webkit-text-stroke:1px #778ca528;white-space:nowrap}
.flight-grid{position:absolute;inset:30% -45% -55%;background:linear-gradient(#7896bc24 1px,transparent 1px),linear-gradient(90deg,#7896bc24 1px,transparent 1px);background-size:90px 90px;transform:perspective(700px) rotateX(68deg);mask-image:linear-gradient(transparent,#0009 35%,transparent)}
.flight-ring{position:absolute;left:51%;top:25%;width:570px;height:570px;border:1px solid #7d9cc52b;border-radius:50%;transform:rotateX(66deg) rotateY(-22deg)}
.ring-two{width:760px;height:760px;left:43%;top:14%;border-style:dashed;opacity:.5}
.coordinate{position:absolute;font-size:9px;letter-spacing:2px;color:#8091aa;writing-mode:vertical-rl;bottom:19%}
.coordinate-left{left:22px}.coordinate-right{right:22px}
.showcase-viewport{height:480px;position:relative;perspective:1000px;perspective-origin:50% 42%;transform-style:preserve-3d}
.flight-object{position:absolute;left:50%;top:50%;width:420px;height:330px;margin-left:-210px;margin-top:-165px;transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-17deg) rotateZ(-4deg);will-change:transform,opacity}
.object-app,.object-ai{visibility:hidden}
.browser-front,.browser-layer{position:absolute;inset:0;border-radius:10px;border:1px solid #91b2dd80;backface-visibility:hidden;background:#101c2d}
.browser-front{transform:translateZ(40px);box-shadow:0 35px 70px #0008;overflow:hidden}
.browser-layer{background:linear-gradient(145deg,#263d56,#101b2a);box-shadow:0 14px 0 -10px #7389a466}
.layer-rear{transform:translate3d(0,-35px,-110px)}.layer-middle{transform:translate3d(0,-15px,-45px)}
.browser-layer>span{display:block;padding:15px 22px;font-size:9px;letter-spacing:2px;color:#b1c9e5}
.demo-chrome{height:29px;padding:0 13px;border-bottom:1px solid #829abc40;display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#8ba1be;background:#1b2b41}
.demo-chrome>span:first-child{font-size:7px;letter-spacing:3px}
.demo-page{padding:22px 27px;background:radial-gradient(ellipse at 95% 95%,#224368aa,transparent 75%);height:calc(100% - 29px)}
.demo-logo{font:700 17px var(--display)}.demo-logo>span{font-size:7px;letter-spacing:2px;margin-left:10px;color:#a2b4ce}
.demo-eyebrow{font-size:8px;letter-spacing:1.6px;color:#8fabc9;margin-top:24px}
.demo-page>strong{font:500 40px/1.1 var(--display);letter-spacing:-1.8px;display:block;margin-top:10px}.demo-page em{color:#bdcff1}
.demo-rule{height:1px;background:#758bb14d;margin:20px 0 12px}
.demo-columns{display:flex;justify-content:space-between;font-size:10px;line-height:1.5;color:#c2cee1}
.depth-label{position:absolute;left:0;right:0;bottom:-70px;text-align:center;font-size:9px;letter-spacing:3px;color:#90a2bc;transform:translateZ(10px)}
.object-app{width:240px;height:395px;margin-left:-120px;margin-top:-195px}
.phone-frame{position:absolute;inset:0;background:#b5c7d6;border:2px solid #e0ecf6;border-radius:35px;padding:7px;box-shadow:8px 6px 0 #495e70,10px 8px 0 #8aa1b1,0 40px 60px #0009;transform:translateZ(70px)}
.phone-screen{position:relative;width:100%;height:100%;overflow:hidden;background:linear-gradient(140deg,#e1ede7,#b9d8d2);border-radius:28px;padding:28px 18px;color:#142f31}
.phone-speaker{position:absolute;width:70px;height:15px;border-radius:20px;background:#142329;z-index:2;top:10px;left:calc(50% - 35px)}
.phone-brand{font:700 20px var(--display);letter-spacing:-1px}
.phone-tag{font-size:7px;letter-spacing:1px;display:block;margin-top:25px;color:#476966}
.phone-screen>strong{display:block;font:600 27px/1.15 var(--display);letter-spacing:-1px;margin-top:10px}.phone-screen em{color:#39746d}
.phone-orbit{width:105px;height:105px;border:1px solid #28574e66;border-radius:50%;margin:17px auto;display:grid;place-items:center;outline:1px solid #28574e33;outline-offset:9px;background:radial-gradient(circle,#b2d9cf,transparent);transform:rotateZ(-15deg)}
.phone-orbit span{font:500 45px var(--display);color:#2c625c}
.phone-stack{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid #427a6e33;font-size:10px}.phone-home{position:absolute;width:80px;height:4px;border-radius:4px;background:#427a6e77;bottom:8px;left:calc(50% - 40px)}
.phone-echo{position:absolute;width:190px;height:290px;top:40px;border:1px solid #7fb6af88;border-radius:23px;background:linear-gradient(130deg,#294d4a,#10272b);padding:25px;color:#cee6dd;box-shadow:0 25px 50px #0005}
.echo-left{left:-100px;transform:translateZ(-100px) rotateY(-24deg) rotateZ(-8deg)}.echo-right{right:-100px;transform:translateZ(-150px) rotateY(24deg) rotateZ(8deg)}
.phone-echo>span{font:500 20px var(--display)}.echo-line{height:7px;border-radius:4px;background:#8bbfb255;margin-top:19px;width:100%}.echo-line:nth-child(3){width:60%}.echo-block{height:90px;border:1px solid #a4d6c533;border-radius:14px;background:#7ba59a11;margin-top:25px}
.object-ai{width:390px;height:350px;margin-left:-195px;margin-top:-175px}
.circuit-board{position:absolute;inset:0;background:linear-gradient(135deg,#342c44,#181624);border:1px solid #bc9cdf88;border-radius:22px;transform:rotateX(50deg) rotateZ(-12deg) translateZ(-70px);box-shadow:0 12px 0 #352c44,0 16px 0 #89769866}
.circuit-lines{position:absolute;inset:20px;background:repeating-linear-gradient(0deg,transparent 0 43px,#af8bd34d 44px 45px),repeating-linear-gradient(90deg,transparent 0 43px,#af8bd34d 44px 45px);border-radius:15px}
.circuit-ring{position:absolute;inset:60px;border:1px solid #ad87d7;border-radius:50%}
.ai-core{position:absolute;width:145px;height:145px;left:calc(50% - 72px);top:calc(50% - 72px);border:1px solid #e2c8ff;background:linear-gradient(135deg,#dcc4f3,#8168a5);color:#28193d;border-radius:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateZ(90px);box-shadow:0 9px 0 #69507e,0 11px 0 #d7b9f688,0 0 85px #b095d433}
.ai-core>span{font-size:9px;letter-spacing:3px}.ai-core strong{font:500 64px/1.1 var(--display);letter-spacing:-5px}.ai-core small{font-size:7px;letter-spacing:1px}
.ai-node{position:absolute;padding:17px;background:#30273f;border:1px solid #b397d488;border-radius:8px;color:#decbea;font:500 15px/1.4 var(--display);box-shadow:0 20px 35px #0008;transform:translateZ(130px)}.ai-node>span{display:block;font-size:8px;color:#af97c6;margin-bottom:9px;letter-spacing:2px}.ai-node b{font-weight:500;color:#c9a4ff}
.node-one{left:-7px;top:-5px}.node-two{right:-9px;top:0}.node-three{right:20px;bottom:-5px}
.showcase-footer{position:relative;z-index:5;padding:22px 0 0;display:flex;justify-content:space-between;align-items:center;gap:28px;border-top:1px solid #53658155}
.showcase-footer nav{display:flex;gap:35px;flex:1;max-width:490px}.showcase-footer nav>a{position:relative;flex:1;font-size:15px;padding:8px 0 17px;color:#74849d}.showcase-footer nav>a>span:first-child{font-size:10px;margin-right:10px;color:#8191ab}.showcase-footer nav>a[aria-current=true]{color:#edf4ff}.chapter-track{position:absolute;bottom:0;left:0;right:0;height:2px;background:#28364c}.chapter-track i{height:2px;background:var(--scene-accent);display:block;transform:scaleX(0);transform-origin:left}
.showcase-skip{font-size:12px;white-space:nowrap;color:#afbdd2}.showcase-skip span{margin-left:14px}
.scroll-enabled .showcase{height:420svh;min-height:2700px}
.scroll-enabled .showcase-pin{position:sticky;top:0;height:100svh;min-height:620px;max-height:1200px;display:flex;flex-direction:column}
.scroll-enabled .showcase-body{flex:1;margin:30px 0;min-height:0}
.scroll-enabled .showcase-copy{position:relative;height:365px}
.scroll-enabled .showcase-copy article{position:absolute;top:0;left:0;width:100%;margin:0;will-change:transform,opacity}
.scroll-enabled .showcase-copy article:not(:first-child){visibility:hidden}
.scroll-enabled .showcase-viewport{height:100%;min-height:360px}
.scroll-enabled .showcase-footer{flex-shrink:0}
/* Keep the hero's entire title unobstructed. Side cards now belong to their own showcase. */
.depth-stage{width:min(82vw,850px)}
.web-plane{width:100%;left:0}
.hero-footer{justify-content:center}
@media(max-width:1100px){.flight-object{scale:.8}.showcase-copy h3{font-size:43px}.showcase-body{grid-template-columns:.95fr 1.05fr;gap:10px}.showcase-copy p{font-size:15px}.showcase-pin{padding-left:6%;padding-right:6%}.coordinate{display:none}.showcase-copy h3{letter-spacing:-1.8px}.showcase-footer nav{gap:20px}}
@media(max-width:760px){
 .scroll-enabled .showcase{height:390svh;min-height:2300px}
 .showcase-pin,.scroll-enabled .showcase-pin{padding:25px 6% 25px;min-height:680px}
 .showcase-header h2{font-size:19px}.showcase-header .eyebrow{font-size:7px;letter-spacing:1px}.showcase-header .scroll-toggle{font-size:10px;padding:6px 9px}
 .showcase-body{grid-template-columns:1fr;margin:35px 0}
 .scroll-enabled .showcase-body{display:flex;flex-direction:column;gap:0;margin:25px 0 5px}
 .scroll-enabled .showcase-copy{height:260px;min-height:260px;width:100%;z-index:3}
 .showcase-copy h3{font-size:36px;letter-spacing:-1.5px;margin:13px 0}.showcase-copy h3 br{display:none}.showcase-copy h3 br::after{content:" "}
 .showcase-copy p{font-size:14px;line-height:1.65;max-width:100%}.chapter-kicker{font-size:9px}.showcase-tags{margin-top:14px}.showcase-tags span{font-size:10px;padding:3px 8px}
 .showcase-viewport,.scroll-enabled .showcase-viewport{width:100%;height:300px;min-height:260px;flex:1;perspective:850px}
 .flight-object{scale:.63}.object-app{scale:.58}.object-ai{scale:.62}
 .showcase-word{top:45%;left:0;font-size:180px;letter-spacing:-10px}.flight-ring{left:-50%;top:30%}
 .showcase-footer{gap:20px;padding-top:13px;align-items:flex-end}.showcase-footer nav{gap:15px}.showcase-footer nav>a{font-size:13px;padding-bottom:10px}.showcase-footer nav>a>span:first-child{font-size:8px;margin-right:5px}.showcase-skip{font-size:0}.showcase-skip span{font-size:20px;margin:0}
 .depth-label{font-size:10px}
 .depth-stage{width:82vw}.web-plane{width:100%;left:0}
}
@media(max-height:700px) and (min-width:761px){.showcase-header h2{font-size:20px}.showcase-pin{padding-top:25px}.showcase-copy h3{font-size:38px}.showcase-copy p{font-size:14px}.showcase-copy h3{margin:15px 0}.scroll-enabled .showcase-copy{height:320px}.flight-object{scale:.68}.showcase-tags{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.flight-object{will-change:auto}}
@media(max-width:760px) and (max-height:740px){
 .scroll-enabled .showcase-pin{min-height:600px;padding-top:18px;padding-bottom:15px}
 .showcase-header h2{font-size:16px}.showcase-header h2 br{display:none}
 .scroll-enabled .showcase-copy{height:220px;min-height:220px}.showcase-copy h3{font-size:29px;margin:10px 0}
 .scroll-enabled .showcase-viewport{min-height:180px;height:180px}.flight-object,.object-app,.object-ai{scale:.46}
 .showcase-tags{margin-top:10px}.scroll-enabled .showcase-body{margin-top:17px}
}
/* Hero: one headline, with a kinetic service triptych instead of a repeated site mockup. */
.hero h1 .hero-line{display:block;transform-origin:50% 50%}
.hero h1{animation:hero-intro 900ms cubic-bezier(.16,1,.3,1) both}
.hero-copy>.eyebrow{animation:hero-intro 650ms ease-out both}
.hero-description,.hero-actions{animation:hero-intro 900ms 120ms ease-out both}
.depth-stage{height:280px;bottom:75px;perspective:1000px;perspective-origin:50% 20%;width:min(86vw,1040px)}
.hero-aura{position:absolute;inset:-35% -15%;background:radial-gradient(ellipse at 30% 55%,#3665aa33,transparent 50%),radial-gradient(ellipse at 75% 55%,#6761b333,transparent 50%);filter:blur(35px);pointer-events:none}
.hero-service{position:absolute;top:50px;width:31%;height:190px;padding:23px;border:1px solid #66799677;border-radius:12px;background:linear-gradient(135deg,#26364c,#111a2a);box-shadow:0 5px 0 #263649,0 8px 0 #566c8944,0 40px 60px #0008;display:flex;flex-direction:column;justify-content:space-between;backface-visibility:hidden;transform-style:preserve-3d}
.hero-web{left:0}.hero-apps{left:34.5%;background:linear-gradient(135deg,#c7d9e7,#8fa7bd);color:#112c40;border-color:#d9e9f3aa;z-index:2}.hero-ai{right:0;background:linear-gradient(135deg,#36304d,#1c1b30)}
.hero-service-index{font-size:9px;letter-spacing:1.8px;opacity:.7}
.hero-service>strong{font:600 clamp(32px,5.6vw,75px)/1 var(--display);letter-spacing:-3px;white-space:nowrap}
.hero-service-dot{color:#9db8df}.hero-apps .hero-service-dot{color:#466783}.hero-ai .hero-service-dot{color:#b3a0e5}
.hero-service-tech{font-size:11px;color:#b2bfd3}.hero-apps .hero-service-tech{color:#344f68}
.hero-copy{z-index:3}
.scroll-enabled .hero-service{will-change:transform}
@keyframes hero-intro{from{opacity:0;translate:0 24px;filter:blur(7px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@media(max-width:1050px) and (min-width:761px){.hero-service{height:170px;padding:19px}.hero-service-tech{font-size:9px}.hero-service-index{font-size:8px;letter-spacing:1.3px}.depth-stage{height:245px;bottom:85px}}
@media(max-width:760px){
 .depth-stage{position:relative;bottom:auto;height:185px;width:88vw;margin-top:58px;perspective:800px}
 .hero-service{top:20px;height:133px;padding:13px 10px;border-radius:8px}
 .hero-service>strong{font-size:clamp(25px,7.4vw,43px);letter-spacing:-1.5px}
 .hero-service-index{font-size:6px;letter-spacing:.7px;line-height:1.5}
 .hero-service-tech{font-size:8px;line-height:1.5}
 .hero h1{font-size:clamp(49px,10vw,74px)}
}
@media(prefers-reduced-motion:reduce){.hero h1,.hero-copy>.eyebrow,.hero-description,.hero-actions{animation:none}.hero-service,.hero-line,.hero-aura{transform:none!important}.hero-service{will-change:auto}}