/* Scroll-driven experience. Everything under .js-pin / .js-fly is progressive
   enhancement: without JS, on small screens or with reduced motion the page
   falls back to a normal stacked layout. */
.scroll-bar { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 2000; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--text-3), #fff); pointer-events: none; }

/* richer 3D entrance for every .reveal */
.reveal { opacity: 0; transform: perspective(1100px) translate3d(0, 56px, -80px) rotateX(9deg); transition: opacity 1.5s var(--ease), transform 1.7s var(--ease); transform-origin: 50% 100%; }
.reveal.visible { opacity: 1; transform: none; }

/* word-by-word headings */
.split .w { display: inline-block; opacity: 0; transform: translateY(.55em) rotateX(-45deg); filter: blur(6px); transform-origin: 50% 100%; transition: opacity 1.1s var(--ease), transform 1.3s var(--ease), filter 1.1s var(--ease); transition-delay: calc(var(--i) * 110ms); }
.split .w.wg { display: inline; transform: none; }
.split.in .w { opacity: 1; transform: none; filter: none; }

/* section dots */
.scroll-dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 1500; display: none; flex-direction: column; gap: 14px; }
@media (min-width: 1200px) { .scroll-dots { display: flex; } }
.scroll-dots button { position: relative; width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--text-3); background: transparent; cursor: pointer; transition: all .3s var(--ease); }
.scroll-dots button.on { background: #fff; border-color: #fff; transform: scale(1.35); }
.scroll-dots button span { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 .68rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scroll-dots button:hover span { opacity: 1; }

/* hero reacts to scroll (--hp set by JS) */
.hero-copy { transform: translateY(calc(var(--hp, 0) * -60px)); opacity: calc(1 - var(--hp, 0) * 1.15); will-change: transform, opacity; }
.hero-vis { transform: translateY(calc(var(--hp, 0) * 50px)) scale(calc(1 + var(--hp, 0) * .18)); opacity: calc(1 - var(--hp, 0) * .8); will-change: transform; }

/* fly-in: element rotates/lifts into place as it crosses the viewport */
.js-fly [data-fly] { transform: perspective(1100px) translateY(calc((1 - var(--t, 1)) * 60px)) rotateY(calc((1 - var(--t, 1)) * -24deg)) scale(calc(.92 + var(--t, 1) * .08)); opacity: calc(.15 + var(--t, 1) * .85); will-change: transform; }
.js-fly .flip [data-fly] { transform: perspective(1100px) translateY(calc((1 - var(--t, 1)) * 60px)) rotateY(calc((1 - var(--t, 1)) * 24deg)) scale(calc(.92 + var(--t, 1) * .08)); }
.js-fly .cta-final[data-fly] { transform: perspective(1100px) translateY(calc((1 - var(--t, 1)) * 50px)) rotateX(calc((1 - var(--t, 1)) * 10deg)) scale(calc(.88 + var(--t, 1) * .12)); }

/* ===== pinned scenes ===== */
.pin { position: relative; }
.js-pin .pin { height: var(--len, 300vh); padding: 0; }
.js-pin .pin-stick { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 84px; overflow: hidden; }
.pin-stick > .container { width: 100%; }
.pin-pad { padding: 6rem 0; }
.js-pin .pin-pad { padding: 0; }

/* -- flagship: cards swap in 3D -- */
.flag-stack { display: grid; gap: 1.5rem; }
.step-ind { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .6rem; }
.step-ind li { display: flex; align-items: center; gap: .8rem; font: 700 .95rem var(--font-display); color: var(--text-3); transition: color .4s; }
.step-ind li::before { content: ''; width: 26px; height: 2px; background: var(--line-2); transition: width .5s var(--ease), background .4s; }
.step-ind li.on { color: #fff; } .step-ind li.on::before { width: 48px; background: #fff; }
.js-pin .flag-stack { position: relative; display: block; height: min(560px, 70vh); perspective: 1400px; }
.js-pin .flag-card { position: absolute; inset: 0; padding: 1.9rem 2.1rem; overflow: hidden; opacity: 1; transform: none; }
.js-pin .flag-card h3 { margin: .7rem 0 .5rem; font-size: 1.8rem; }
.js-pin .flag-list { margin: 1rem 0 1.2rem; gap: .5rem; }
.js-pin .flag-card:first-child { transform: translate3d(calc(var(--t, 0) * -90px), 0, calc(var(--t, 0) * -260px)) rotateY(calc(var(--t, 0) * 32deg)); opacity: max(0, calc(1 - var(--t, 0) * 2.2)); pointer-events: none; z-index: 1; }
.js-pin .flag-card:last-child { transform: translate3d(calc((1 - var(--t, 0)) * 90px), 0, calc((1 - var(--t, 0)) * -260px)) rotateY(calc((1 - var(--t, 0)) * -32deg)); opacity: max(0, calc(var(--t, 0) * 2.2 - 1.2)); z-index: 2; }

/* -- services: horizontal scroll -- */
.hs-head { margin-bottom: 2rem; }
.hs-track { display: flex; gap: 1.2rem; padding: 0 1.25rem 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hs-track::-webkit-scrollbar { display: none; }
.hs-track .svc { flex: none; width: min(82vw, 330px); scroll-snap-align: start; min-height: 330px; }
.hs-progress { display: none; height: 2px; background: var(--line); border-radius: 2px; margin-top: 1.6rem; overflow: hidden; }
.hs-progress i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.js-pin .hs-track { overflow: visible; scroll-snap-type: none; width: max-content; padding-left: max(1.5rem, calc((100vw - 1296px) / 2 + 12px)); padding-right: 6vw; transform: translate3d(calc(var(--p, 0) * var(--shift, 0px) * -1), 0, 0); will-change: transform; }
.js-pin .hs-track .svc { width: 340px; min-height: 340px; transform: perspective(1200px) rotateY(calc(-7deg + var(--p, 0) * 14deg)); transition: border-color .3s, box-shadow .4s; }
.js-pin .hs-progress { display: block; }

/* -- automation: diagram draws itself -- */
.js-pin .flow-wrap { transform: perspective(1400px) rotateX(calc(12deg - var(--p, 0) * 12deg)) rotateY(calc(-14deg + var(--p, 0) * 14deg)); }
.flow-wrap .wire { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js-pin .flow-wrap .wire { stroke-dashoffset: calc(1 - var(--t, 0)); }
.js-pin .flow-wrap .ng { opacity: var(--t, 0); transform-box: fill-box; transform-origin: center; transform: scale(calc(.85 + var(--t, 0) * .15)); }
.js-pin .flow-wrap .pulses { opacity: var(--t, 0); }
.js-pin .auto-step { opacity: calc(.25 + var(--t, 0) * .75); transform: translateX(calc((1 - var(--t, 0)) * 24px)); }

/* -- process: line fills, steps activate -- */
.js-pin .pipe::before { background: linear-gradient(90deg, #fff 0 calc(var(--t, 0) * 100%), var(--line-2) 0); }
.js-pin .pipe::after { animation: none; left: calc(6% + var(--t, 0) * 88%); }
.js-pin .pipe-step { opacity: calc(.22 + var(--t, 0) * .78); transform: translateY(calc((1 - var(--t, 0)) * 30px)); }
.js-pin .pipe-step .pipe-num { transform: perspective(300px) rotateX(calc(40deg - var(--t, 0) * 28deg)) scale(calc(.85 + var(--t, 0) * .15)); border-color: rgba(255,255,255,calc(.1 + var(--t, 0) * .35)); }

@media (max-width: 991px) {
    .pin-pad { padding: 4.5rem 0; }
    .hero-copy, .hero-vis { transform: none; opacity: 1; }
}