/* Section headings share a readable scale across languages. */
.home-immersive :is(.home-score-copy,.shopping-proof-copy,.how-heading,.demo-booking-copy,.cta-band) h2{font-size:clamp(34px,3.6vw,52px);line-height:1.12;letter-spacing:-.045em;text-wrap:balance;white-space:normal;overflow-wrap:break-word}
.home-immersive .home-score-copy h2{font-size:clamp(34px,3.6vw,50px)}
.home-immersive .cta-band h2{max-width:850px;margin-inline:auto}
.home-immersive .how-role-intro h3{white-space:normal!important;text-wrap:balance}
@media(max-width:620px){.home-immersive :is(.home-score-copy,.shopping-proof-copy,.how-heading,.demo-booking-copy,.cta-band) h2{font-size:clamp(28px,8vw,34px)!important;line-height:1.14!important}.home-immersive .home-score-copy h2{font-size:clamp(30px,8.4vw,36px)!important}}
/* TroXinhAI landing: warm 3D depth, animated journey and touch-safe nature motion. */
.home-immersive .hero.landing{isolation:isolate;perspective:1400px;overflow:clip;background:transparent}
.home-immersive .hero.landing>div:first-child{position:relative;z-index:6;transform:translateZ(70px)}
.home-immersive .hero.landing h1{margin:14px 0 22px;font-size:clamp(44px,5.35vw,80px);text-wrap:balance;text-shadow:0 18px 55px color-mix(in srgb,var(--coral) 15%,transparent)}
.home-immersive .hero-title-line{display:block;font-size:clamp(40px,5.05vw,74px);line-height:1.04;white-space:nowrap}
.home-immersive .hero.landing .lead{max-width:650px;margin:0 auto 24px;font-size:17px}
.home-immersive .hero-actions{position:relative;z-index:8}
.home-immersive .demo-journey{position:relative;z-index:4;transform-style:preserve-3d;perspective:1500px}
.home-immersive .demo-stage{backface-visibility:hidden;transform-style:preserve-3d;box-shadow:0 35px 90px color-mix(in srgb,var(--cocoa) 25%,transparent),0 4px 0 color-mix(in srgb,white 65%,transparent) inset}
.home-immersive .demo-stage .demo-image{transform:translateZ(20px)}
.home-immersive .demo-before{transform:rotateY(8deg) rotateZ(-2.3deg) translateZ(2px)}
.home-immersive .demo-products{transform:translateZ(62px) scale(1.025)}
.home-immersive .demo-prompt{transform:rotateY(-8deg) rotateZ(2.3deg) translateZ(2px)}
.home-immersive .demo-prompt{box-shadow:0 35px 90px color-mix(in srgb,var(--coral) 24%,transparent),0 0 0 1px color-mix(in srgb,var(--butter) 55%,transparent),0 4px 0 color-mix(in srgb,white 65%,transparent) inset}
.home-immersive .ui-arrow{display:inline-block;width:18px;height:18px;vertical-align:-4px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}

.landing-mascot{position:absolute;z-index:5;right:clamp(64px,10vw,150px);top:clamp(125px,10vw,158px);width:clamp(76px,6vw,96px);filter:drop-shadow(0 22px 24px #4f19262b);transform-origin:52% 90%;animation:mascotFloat 5.8s ease-in-out infinite;pointer-events:none}
.landing-mascot img{display:block;width:100%;height:auto;animation:mascotWave 2.7s cubic-bezier(.3,.7,.3,1) infinite}
.landing-mascot:after{content:"";position:absolute;left:22%;right:20%;bottom:-7px;height:14px;border-radius:50%;background:#4c243025;filter:blur(7px);animation:mascotShadow 5.8s ease-in-out infinite}
@keyframes mascotFloat{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -13px;rotate:2deg}}
@keyframes mascotWave{0%,54%,100%{transform:rotate(0)}62%{transform:rotate(-4deg)}69%{transform:rotate(4deg)}77%{transform:rotate(-2deg)}85%{transform:rotate(2deg)}}
@keyframes mascotShadow{50%{transform:scale(.82);opacity:.55}}

.nature-flight{position:absolute;z-index:3;inset:70px 0 0;overflow:hidden;pointer-events:none}
.nature-flight span{position:absolute;display:block;width:42px;height:42px;color:var(--coral);filter:drop-shadow(0 8px 10px #4e24321c);will-change:transform}
.nature-flight svg{display:block;width:100%;height:100%;overflow:visible;fill:color-mix(in srgb,var(--butter) 78%,white);stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.nature-flight .butterfly-a{left:-8%;top:30%;animation:butterflyRoute 16s linear infinite}
.nature-flight .butterfly-b{right:-7%;top:58%;width:31px;height:31px;color:#8c759e;animation:butterflyRouteReverse 20s linear -6s infinite}
.nature-flight .bee{left:-6%;top:67%;width:35px;height:35px;color:#6c4530;animation:beeRoute 18s linear -9s infinite}
.nature-flight .wing{transform-origin:center;animation:wingBeat .28s ease-in-out infinite alternate}
@keyframes wingBeat{to{transform:scaleY(.55) rotate(7deg)}}
@keyframes butterflyRoute{0%{transform:translate3d(0,55px,0) rotate(-8deg)}24%{transform:translate3d(30vw,-30px,40px) rotate(7deg)}52%{transform:translate3d(59vw,70px,15px) rotate(-5deg)}78%{transform:translate3d(86vw,-20px,55px) rotate(9deg)}100%{transform:translate3d(116vw,38px,0) rotate(-4deg)}}
@keyframes butterflyRouteReverse{0%{transform:translate3d(0,0,0) scaleX(-1)}45%{transform:translate3d(-55vw,-90px,40px) scaleX(-1) rotate(9deg)}100%{transform:translate3d(-116vw,20px,0) scaleX(-1)}}
@keyframes beeRoute{0%{transform:translate3d(0,0,0)}33%{transform:translate3d(38vw,-80px,45px) rotate(8deg)}70%{transform:translate3d(80vw,20px,15px) rotate(-5deg)}100%{transform:translate3d(114vw,-50px,0)}}

.home-immersive .how-work-compact{position:relative;isolation:isolate;max-width:1280px;margin:80px auto 130px;padding:72px;border:1px solid color-mix(in srgb,var(--coral) 18%,var(--line));border-radius:36px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,var(--butter)),var(--surface));box-shadow:0 34px 110px color-mix(in srgb,var(--cocoa) 13%,transparent);overflow:hidden}
.home-immersive .how-work-compact:before{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-260px;top:-280px;border:1px solid color-mix(in srgb,var(--coral) 30%,transparent);border-radius:50%;box-shadow:0 0 0 52px color-mix(in srgb,var(--coral) 3%,transparent),0 0 0 108px color-mix(in srgb,var(--butter) 6%,transparent)}
.home-immersive .how-heading{padding-bottom:28px}.home-immersive .how-heading h2{max-width:850px}
.home-immersive .how-role-tabs{position:relative;z-index:2;max-width:650px;margin:0 auto 28px;padding:6px;gap:6px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);overflow:visible}
.home-immersive .how-role-tabs button{display:flex;justify-content:center;grid-template-columns:none;min-height:56px;padding:10px 18px;border:0!important;border-radius:999px;text-align:center;transition:transform .25s,background .25s,box-shadow .25s}
.home-immersive .how-role-tabs button>span{width:30px;height:30px;border-radius:50%}
.home-immersive .how-role-tabs button.active{background:var(--surface);box-shadow:0 10px 28px color-mix(in srgb,var(--cocoa) 13%,transparent);transform:translateY(-1px)}
.home-immersive .how-role-tabs button.active:after{display:none}
.home-immersive .how-role-panel{padding:34px 0 0;border:0;background:transparent;box-shadow:none}
.home-immersive .how-role-intro{display:block;margin:0 0 38px;text-align:center}.home-immersive .how-role-intro h3{max-width:1100px;margin:9px auto 0;color:var(--coral);text-wrap:balance}
@media(min-width:901px){.home-immersive .how-role-intro h3{font-size:clamp(30px,3.05vw,44px);white-space:nowrap}}
.home-immersive .how-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;border:0;padding-top:8px}
.home-immersive .how-timeline-line{position:absolute;z-index:0;left:11%;right:11%;top:66px;height:4px;border-radius:99px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden;opacity:0}
.home-immersive .how-timeline-line i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--coral),#ffb64c,#6ec2a3);transform:scaleX(0);transform-origin:left;box-shadow:0 0 20px color-mix(in srgb,var(--coral) 38%,transparent)}
.home-immersive .how-role-panel.timeline-started .how-timeline-line{animation:timelineLineReveal .01s linear 1.05s forwards}
.home-immersive .how-role-panel.timeline-started .how-timeline-line i{animation:timelineFill 1.2s cubic-bezier(.2,.78,.2,1) 1.05s forwards}
.home-immersive .how-steps article{z-index:1;min-height:0;padding:0 0 22px;overflow:hidden;border:1px solid color-mix(in srgb,var(--ink) 8%,var(--line));border-radius:22px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 18px 42px color-mix(in srgb,var(--cocoa) 7%,transparent);backdrop-filter:blur(12px);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;opacity:0;transform:translateY(28px) rotateX(8deg)}
.home-immersive .how-role-panel.timeline-started article{animation:timelineCard .7s cubic-bezier(.2,.82,.2,1) forwards;animation-delay:calc(.18s + var(--step-index,0)*.15s)}
.home-immersive .how-steps article:nth-of-type(1){--step-index:0}.home-immersive .how-steps article:nth-of-type(2){--step-index:1}.home-immersive .how-steps article:nth-of-type(3){--step-index:2}.home-immersive .how-steps article:nth-of-type(4){--step-index:3}
.home-immersive .how-steps article:hover{transform:translateY(-10px) rotateX(0);border-color:color-mix(in srgb,var(--coral) 35%,var(--line));box-shadow:0 28px 60px color-mix(in srgb,var(--cocoa) 14%,transparent)}
.home-immersive .how-steps article>span{position:absolute;z-index:2;right:13px;top:13px;margin:0;padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--surface) 90%,transparent);box-shadow:0 4px 14px color-mix(in srgb,var(--cocoa) 12%,transparent);font-size:9px}
.home-immersive .journey-visual{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,var(--line))}
.home-immersive .how-steps h4{min-height:48px;margin:18px 18px 0;font-size:20px}.home-immersive .how-steps a{display:inline-flex;align-items:center;margin:6px 18px 0;text-decoration:none}.home-immersive .how-steps a:hover{text-decoration:underline;text-underline-offset:5px}
@keyframes timelineFill{to{transform:scaleX(1)}}
@keyframes timelineLineReveal{to{opacity:1}}
@keyframes timelineCard{to{opacity:1;transform:translateY(0) rotateX(0)}}

@media(max-width:900px){.landing-mascot{right:20px;top:230px;width:88px}.nature-flight .butterfly-b{display:none}.home-immersive .how-work-compact{margin:55px 22px 90px;padding:50px 30px}.home-immersive .how-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.home-immersive .how-timeline-line{display:none}}
@media(max-width:620px){.home-immersive .hero.landing{perspective:none}.home-immersive .hero.landing>div:first-child{transform:none}.landing-mascot{right:10px;top:395px;width:72px;opacity:.96}.nature-flight{inset:100px 0 0}.nature-flight .butterfly-a{width:30px;height:30px}.nature-flight .bee{width:27px;height:27px}.home-immersive .demo-before,.home-immersive .demo-products,.home-immersive .demo-prompt{transform:none}.home-immersive .demo-reference{transform:translateX(-50%)}.home-immersive .how-work-compact{margin:38px 12px 72px;padding:38px 15px;border-radius:25px}.home-immersive .how-role-tabs{display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:18px}.home-immersive .how-role-tabs button{min-height:62px;padding:9px;border-radius:14px}.home-immersive .how-role-tabs button>span{display:none}.home-immersive .how-role-panel{padding-top:20px}.home-immersive .how-role-intro{margin-bottom:28px;text-align:left;padding-inline:8px}.home-immersive .how-role-intro h3{font-size:31px}.home-immersive .how-steps{display:grid;grid-template-columns:1fr;gap:13px;padding-left:35px}.home-immersive .how-timeline-line{display:block;left:16px;right:auto;top:29px;bottom:29px;width:3px;height:auto}.home-immersive .how-timeline-line i{transform:scaleY(0);transform-origin:top}.home-immersive .how-role-panel.timeline-started .how-timeline-line i{animation:timelineFillY 1.2s cubic-bezier(.2,.78,.2,1) .12s forwards}.home-immersive .how-steps article{display:grid;grid-template-columns:52px 1fr;column-gap:13px;min-height:0;padding:16px 15px}.home-immersive .how-steps .step-icon{grid-row:1/4;width:48px;height:48px;margin:0;border-radius:15px}.home-immersive .how-steps h4,.home-immersive .how-steps p,.home-immersive .how-steps a{grid-column:2;margin-left:0}.home-immersive .how-steps h4{font-size:19px}.home-immersive .how-steps p{min-height:0;margin-top:6px;font-size:12px}.home-immersive .how-steps a{margin-top:12px}.home-immersive .how-steps article>span{right:12px;top:12px}.home-immersive .how-capabilities{justify-content:center}.home-immersive .how-cta{margin-inline:0}}
@media(max-width:620px){.home-immersive .how-steps{width:100%;padding-left:0}.home-immersive .how-timeline-line{display:none}.home-immersive .how-steps article{display:block;width:100%;margin-inline:auto;padding:0 0 18px;overflow:hidden}.home-immersive .journey-visual{position:relative;z-index:1;aspect-ratio:4/3;border-radius:21px 21px 0 0}.home-immersive .how-steps h4{grid-column:auto;min-height:0;margin:16px 16px 0;font-size:19px}.home-immersive .how-steps a{grid-column:auto;margin:10px 16px 0}}
@keyframes timelineFillY{to{transform:scaleY(1)}}
@media(hover:none),(pointer:coarse){.home-immersive .how-steps article:hover{transform:none}html:not(.gsap-hero) .home-immersive .demo-stage{transform:none!important}.nature-flight span{opacity:.78}}
@media(prefers-reduced-motion:reduce){.landing-mascot,.landing-mascot img,.landing-mascot:after,.nature-flight span,.nature-flight .wing,.home-immersive .demo-result-ready>i{animation:none!important}.nature-flight{display:none}.home-immersive .how-timeline-line{opacity:1;animation:none!important}.home-immersive .how-timeline-line i{transform:none!important}.home-immersive .how-steps article{opacity:1!important;transform:none!important;animation:none!important}}
@media(max-width:900px){.landing-mascot{right:24px;top:175px;width:82px}}
@media(max-width:620px){.home-immersive .hero.landing h1{font-size:clamp(38px,11vw,52px)}.landing-mascot{right:10px;top:245px;width:68px}}
@media(max-width:620px){.home-immersive .hero-title-line{font-size:clamp(23px,6.4vw,32px)}}

/* Stable hero geometry across Safari/Chrome; motion must never own layout. */
.home-immersive{overflow-x:hidden}.home-immersive .hero.landing h1 em{display:block;color:var(--coral);background:none}.home-immersive .hero.landing>div:first-child{width:min(100%,1080px);margin-inline:auto}
@media(max-width:620px){
 .home-immersive .hero.landing{padding:42px 16px 64px!important}
 .home-immersive .hero.landing>div:first-child{width:100%;max-width:none!important}
 .home-immersive .hero.landing .eyebrow{margin:0 0 14px;font-size:10px;line-height:1.35}
 .home-immersive .hero.landing h1{margin:0 auto 22px;font-size:clamp(37px,10.5vw,48px);line-height:1.02;letter-spacing:-.065em}
 .home-immersive .hero-title-line{font-size:clamp(25px,7.2vw,34px)}
 .home-immersive .hero.landing .lead{margin:0 auto 25px;font-size:16px;line-height:1.5}
 .home-immersive .hero-actions{gap:18px}
 .home-immersive .demo-mobile-guide{margin:28px auto -12px;padding-inline:4px}
 .home-immersive .hero.landing .showcase{margin-top:24px}
 .home-immersive .sticker-cloud,.home-immersive .landing-mascot,.home-immersive .nature-flight{display:none!important}
}