/* Vexora Solution: "scroll story" homepage (index.html, Page style = Story).
   Four scenes stay pinned while their lines light up one by one. Scenes 1-2 use the light look
   (the problem), scenes 3-4 use the dark look (the solution). Everything below the story is normal sections. */

:root{--ease:cubic-bezier(.2,.7,.2,1);--nav-h:72px;}

/* ---- scene looks: components read only these variables ---- */
.scene{
  --s-bg:var(--story-light,#F6F7FF);--s-fg:#14142B;--s-soft:#4D4D72;--s-ln:rgba(20,20,43,.13);--s-card:#FFFFFF;--s-kicker:#4B3FD0;
  --text:var(--s-fg);--text-soft:var(--s-soft);--text-faint:var(--s-soft);--line:var(--s-ln);--line-soft:var(--s-ln);--surface:var(--s-card);--accent-2:var(--s-kicker);
  position:relative;color:var(--s-fg);
}
.scene.dark{
  --s-bg:var(--story-dark,#0A0A10);--s-fg:#F3F2F8;--s-soft:rgba(243,242,248,.76);--s-ln:rgba(255,255,255,.15);--s-card:#16161F;--s-kicker:#A79FFF;
}
body.story .hero.story{padding:0;overflow:visible;}
body.story .hero-mesh{display:none;}
body.story .scene-1 .hero-stats{display:none;}

.pin{position:relative;background:var(--s-bg);overflow:hidden;display:flex;align-items:center;padding:calc(var(--nav-h) + 36px) 0 56px;}
.scene-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.scene-bg .glow{position:absolute;border-radius:50%;width:70vmax;height:70vmax;}
.scene-bg .g1{left:-25vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(124,111,255,.30),transparent);}
.scene-bg .g2{right:-28vmax;bottom:-32vmax;background:radial-gradient(closest-side,rgba(79,209,255,.26),transparent);}
.scene.dark .scene-bg .g1{background:radial-gradient(closest-side,rgba(124,111,255,.32),transparent);}
.scene.dark .scene-bg .g2{background:radial-gradient(closest-side,rgba(255,107,157,.16),transparent);}
.pin>.container,.pin>.hero-stack{position:relative;z-index:1;width:100%;}

/* text */
.scene .eyebrow,.scene .kicker{background:none;-webkit-text-fill-color:currentColor;color:var(--s-kicker);font-weight:700;font-size:16px;margin:0 0 12px;}
.scene .kicker{display:block;}
.scene h1{font-size:clamp(34px,8.4vw,76px);line-height:.98;letter-spacing:-.045em;font-weight:800;}
.scene .story-h{font-size:clamp(28px,7.2vw,56px);line-height:1.02;letter-spacing:-.04em;font-weight:800;margin:0 0 .5em;}
.scene .line{font-size:clamp(18px,4.8vw,30px);line-height:1.22;letter-spacing:-.02em;font-weight:700;margin:.55em 0 0;color:var(--s-fg);}
.scene .hero p.lead,.scene p.lead{font-size:clamp(16px,2.6vw,19px);color:var(--s-soft);}
.scene .hero-mini-badge{background:var(--s-card);border-color:var(--s-ln);color:var(--s-soft);}
.scene .btn-ghost{color:var(--s-fg);border-color:var(--s-ln);background:rgba(127,127,160,.08);}
.scene .btn-ghost:hover{color:var(--s-kicker);border-color:var(--s-kicker);}
.scene-1 .hero-copy{max-width:860px;}
.scene-1 .hero-mascot{width:clamp(56px,9svh,84px);margin-bottom:12px;}

/* two-column story layout (art + text) */
.story-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center;}
.story-center{justify-items:center;text-align:center;}
.story-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:22px 0 26px;}
.story-stats .stat b{display:block;font-size:clamp(34px,8vw,56px);font-weight:800;letter-spacing:-.04em;background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;}
.story-stats .stat span{font-size:15px;font-weight:600;color:var(--s-soft);}
@media (min-width:900px){
  .story-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;}
  .story-center{grid-template-columns:minmax(0,820px);justify-content:center;}
  .story-stats{grid-template-columns:repeat(4,minmax(0,1fr));}
  .scene .line{font-size:clamp(20px,2.5vw,32px);}
  .scene-2 .story-art,.scene-3 .story-art{order:2;}
}

/* the picture: five separate vendors become one connected system */
.story-art{--S:min(74vw,34svh);--R:calc(var(--S) * .34);position:relative;width:var(--S);height:var(--S);margin:0 auto;}
@media (min-width:900px){.story-art{--S:min(40vw,64svh);}}
@media (max-height:640px) and (max-width:899px){.story-art{display:none;}}
.art-chaos{--q:0;}
.art-link{--q:clamp(0, calc((var(--p,.8) - .08) * 2.2), 1);}
.chip{position:absolute;left:50%;top:50%;
  transform:translate(calc((var(--sx) * (1 - var(--q)) + var(--cx) * var(--q)) * var(--R) - 50%),calc((var(--sy) * (1 - var(--q)) + var(--cy) * var(--q)) * var(--R) - 50%));}
.chip span{display:block;padding:9px 17px;border-radius:999px;background:var(--s-card);border:1px solid var(--s-ln);font-weight:700;font-size:clamp(13px,3.4vw,16px);color:var(--s-fg);box-shadow:0 10px 26px -14px rgba(20,20,43,.45);white-space:nowrap;}
.art-chaos .chip span{animation:chip-float 5.5s ease-in-out infinite alternate;}
.art-chaos .chip:nth-child(2) span{animation-delay:-1.2s;} .art-chaos .chip:nth-child(3) span{animation-delay:-2.4s;}
.art-chaos .chip:nth-child(4) span{animation-delay:-3.1s;} .art-chaos .chip:nth-child(5) span{animation-delay:-4.3s;}
@keyframes chip-float{from{transform:translate3d(-7px,-6px,0) rotate(-2deg);}to{transform:translate3d(7px,8px,0) rotate(2deg);}}
.art-lines{position:absolute;inset:0;width:100%;height:100%;color:var(--s-kicker);opacity:clamp(0, calc((var(--q) - .6) * 2.5), 1);}
.core{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--gradient);color:#fff;font-weight:800;font-size:clamp(12px,3vw,17px);letter-spacing:-.02em;
  transform:translate(-50%,-50%) scale(calc(.5 + var(--q) * .5));opacity:clamp(0, calc((var(--q) - .45) * 2), 1);box-shadow:0 0 0 8px rgba(124,111,255,.18),0 20px 50px -14px rgba(124,111,255,.7);}

/* scroll hint and floating pill */
.scene-1 .sp-hint{bottom:22px;}
.fab{position:fixed;left:50%;bottom:20px;z-index:90;transform:translate(-50%,24px);opacity:0;pointer-events:none;
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;background:var(--gradient);color:#fff;font-weight:700;font-size:16px;
  box-shadow:0 14px 34px -10px rgba(124,111,255,.75);transition:opacity .3s var(--ease),transform .3s var(--ease);}
body.fab-on .fab{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
body:not(.story) .fab{display:none;}
@media (min-width:900px){.fab{display:none !important;}}

/* header follows the mood: light over the light scenes */
body.story.look-light .site-header{--text:#14142B;--text-soft:#4D4D72;--line:rgba(20,20,43,.13);--line-soft:rgba(20,20,43,.08);--bg-alt:#FFFFFF;--surface:#FFFFFF;
  background:color-mix(in srgb,var(--story-light,#F6F7FF) 86%,transparent);border-bottom-color:rgba(20,20,43,.08);}
body.story.look-light.sp-scrolled .site-header{background:color-mix(in srgb,var(--story-light,#F6F7FF) 94%,transparent);box-shadow:0 10px 30px -22px rgba(20,20,43,.5);}
body.story.look-light .site-header .btn-ghost{color:#14142B;}
body.story.look-light .nav-toggle span{background:#14142B;}
body.story.look-light .sp-progress{opacity:1;}
@media (max-width:899px){
  body.story .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,10,16,.96);}
  body.story.look-light .site-header{background:color-mix(in srgb,var(--story-light,#F6F7FF) 97%,transparent);}
  body.story .scene-bg .glow{width:110vmax;height:110vmax;}
}

/* ---- pinned mode (added by story.js: motion allowed and JavaScript running) ---- */
body.story-on .scene{height:var(--sh);}
body.story-on .scene-1{--sh:125svh;} body.story-on .scene-2{--sh:290svh;} body.story-on .scene-3{--sh:250svh;} body.story-on .scene-4{--sh:160svh;}
body.story-on .pin{position:sticky;top:0;height:100vh;height:100svh;padding-bottom:36px;align-items:flex-end;}
@media (min-width:900px){body.story-on .pin{align-items:center;padding-bottom:56px;}}
body.story-on .scene .line{opacity:.16;transform:translate3d(0,10px,0);transition:opacity .6s var(--ease),transform .6s var(--ease);}
body.story-on .scene .line.on{opacity:1;transform:none;}
body.story-on .scene-1 .hero-copy{transform:translate3d(0,calc(var(--p,0) * -46px),0);opacity:calc(1 - var(--p,0) * 1.5);}
body.story-on .scene-1 .hero-copy.reveal{transition:none;}
body.story-on .story-art{will-change:transform;}
@media (max-width:899px){body.story-on .scene-1 .pin{align-items:center;}}

/* no JavaScript, or reduced motion: the scenes are ordinary stacked sections with every line visible */
body.story:not(.story-on) .scene{--p:.9;}
body.story:not(.story-on) .pin{min-height:0;}
body.story:not(.story-on) .scene-1 .pin{min-height:min(100svh,820px);}
@media (prefers-reduced-motion:reduce){
  .art-chaos .chip span{animation:none;}
  .fab{transition:none;}
}
body.hero-off .art-chaos .chip span{animation-play-state:paused;}

/* phones: keep the last line clear of the floating pill */
@media (max-width:899px){
  body.story-on .pin{padding-bottom:92px;}
  body.story-on .scene-1 .pin{padding-bottom:64px;}
}
/* services: one swipe row on phones, a single row of five on desktop */
body.story .cards-grid[data-repeat="services"]{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
@media (max-width:899px){
  body.story .cards-grid[data-repeat="services"]{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -20px;padding:4px 20px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  body.story .cards-grid[data-repeat="services"]::-webkit-scrollbar{display:none;}
  body.story .cards-grid[data-repeat="services"]>*{flex:0 0 80%;scroll-snap-align:center;}
}