:root{
  color-scheme:dark;
  --bg:#02030a;
  --text:#f7f8ff;
  --muted:#b8bfd7;
  --cyan:#66eaff;
  --violet:#9b6cff;
  --magenta:#ff67d4;
  --scene-progress:0;
  --scene-final:0;
  --scene-clarity:0;
  --scene-product:0;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;overflow-x:hidden}
.experience{height:320vh;min-height:2260px;position:relative;background:#02030a}
.stage{position:sticky;top:0;height:100svh;min-height:580px;overflow:hidden;isolation:isolate;background:#02030a}
#scene,#bloom,.fallback,.scene-atmosphere,.scene-environment,.scene-haze,.scene-light-column,.grain,.vignette{position:absolute;inset:0;width:100%;height:100%}

/* One continuous world. The distant plate has no text or phone; every product screen remains a real application screenshot. */
.scene-atmosphere{z-index:0;overflow:hidden;background:#02030a;pointer-events:none}
.scene-environment{
  background-image:url("/assets/images/3d/cinematic-environment-v6.webp");
  background-size:cover;
  background-position:center 48%;
  opacity:calc(.56 + var(--scene-clarity)*.18);
  filter:saturate(.94) contrast(1.10) brightness(.92);
  transform:scale(calc(1.08 + var(--scene-progress)*.10)) translate3d(calc((var(--scene-progress) - .5)*-1.2%),calc(var(--scene-progress)*-.7%),0);
  will-change:transform,opacity,filter;
}
.scene-haze{
  background:
    radial-gradient(ellipse at 62% 78%,rgba(111,73,255,.14),transparent 35%),
    radial-gradient(ellipse at 52% 34%,rgba(49,194,255,.08),transparent 34%),
    linear-gradient(90deg,rgba(1,2,8,.91) 0%,rgba(2,3,10,.55) 38%,rgba(2,3,10,.11) 66%,rgba(2,3,10,.46) 100%);
  opacity:calc(.94 - var(--scene-final)*.18);
}
.scene-light-column{
  left:auto;right:10%;top:-18%;width:42%;height:135%;
  transform:rotate(8deg) translateX(calc((1 - var(--scene-clarity))*9%));
  background:linear-gradient(90deg,transparent,rgba(90,214,255,.035),rgba(154,91,255,.10),transparent);
  filter:blur(22px);
  opacity:calc(.22 + var(--scene-clarity)*.35);
}

#scene{z-index:2;display:block;filter:saturate(.98) contrast(1.055);transform:translateZ(0)}
#bloom{z-index:1;display:block;filter:blur(19px) saturate(1.06) brightness(1.04);opacity:calc(.115 - var(--scene-final)*.075);transform:scale(1.018);pointer-events:none}
.scene-product-v139{position:absolute;z-index:4;left:72%;top:50%;height:min(82svh,860px);width:auto;max-width:min(46vw,720px);margin:0;opacity:var(--scene-product);pointer-events:none;transform:translate3d(-50%,calc(-50% + (1 - var(--scene-product))*32px),0) scale(calc(.94 + var(--scene-product)*.06));transform-origin:50% 58%;filter:drop-shadow(0 46px 74px rgba(0,0,0,.58)) drop-shadow(0 0 32px rgba(90,83,255,.14));will-change:opacity,transform}
.scene-product-v139 img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;user-select:none}
.no-webgl .scene-product-v139,.data-saver .scene-product-v139,.reduced-motion .scene-product-v139{display:block;opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
.no-webgl .fallback-phone,.no-webgl .fallback-pedestal,.data-saver .fallback-phone,.data-saver .fallback-pedestal,.reduced-motion .fallback-phone,.reduced-motion .fallback-pedestal{display:none}
.grain{z-index:4;pointer-events:none;opacity:.052;mix-blend-mode:soft-light;background-image:url("/assets/images/3d/grain.webp");background-size:190px 190px}
.vignette{z-index:3;pointer-events:none;background:
  radial-gradient(ellipse at 57% 48%,transparent 0 34%,rgba(1,2,8,.11) 58%,rgba(1,2,8,.69) 100%),
  linear-gradient(90deg,rgba(1,2,8,.82),rgba(1,2,8,.18) 48%,rgba(1,2,8,.07) 74%,rgba(1,2,8,.32))}

.c-copy{position:absolute;z-index:5;left:clamp(24px,6vw,96px);top:50%;width:min(660px,46vw);transform:translate3d(0,-44%,0);opacity:0;will-change:opacity,transform,filter;pointer-events:none;text-shadow:0 6px 34px rgba(0,0,0,.72)}
.c-copy h1,.c-copy h2{font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(51px,6.45vw,102px);line-height:.92;letter-spacing:-.057em;margin:0 0 26px;font-weight:650}
.c-copy h2{font-size:clamp(47px,5.85vw,91px)}
.c-copy-d{width:min(690px,48vw)}
.c-copy em,.after-scene em{font-style:normal;background:linear-gradient(105deg,#6cecff 0%,#a67aff 54%,#ff79d7 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(93,123,255,.20))}
.c-copy>p:not(.c-eyebrow){max-width:555px;color:#d4d9ea;font-size:clamp(16px,1.32vw,21px);line-height:1.58;margin:0}
.c-eyebrow{margin:0 0 20px;color:var(--cyan);font-size:12px;font-weight:750;letter-spacing:.17em;text-transform:uppercase}
.c-actions{display:flex;gap:12px;margin-top:30px;pointer-events:auto}
.c-button{display:inline-flex;justify-content:center;align-items:center;min-height:50px;padding:0 22px;border-radius:999px;font-size:14px;font-weight:750}
.c-button.primary{background:linear-gradient(110deg,#32dfff,#765cff 68%,#bc5cff);box-shadow:0 0 36px rgba(63,182,255,.32),inset 0 1px rgba(255,255,255,.45)}
.c-button.secondary{border:1px solid rgba(255,255,255,.23);background:rgba(7,9,22,.52);backdrop-filter:blur(12px)}
.c-progress{position:absolute;z-index:6;right:clamp(18px,3vw,48px);top:15%;bottom:15%;width:1px;background:rgba(255,255,255,.13)}
.c-progress i{display:block;width:3px;height:0;margin-left:-1px;background:linear-gradient(#63edff,#945fff,#ff64ca);box-shadow:0 0 16px rgba(102,205,255,.8)}
.c-scroll-cue{position:absolute;z-index:6;left:50%;bottom:25px;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateX(-50%);color:#c4cadc;font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:opacity .35s}
.c-scroll-cue i{position:relative;width:1px;height:38px;background:rgba(255,255,255,.18);overflow:hidden}
.c-scroll-cue i:after{content:"";position:absolute;left:0;top:-100%;width:1px;height:70%;background:#74e9ff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0)}100%{transform:translateY(285%)}}

/* The static/data-saving fallback is a complete hero, not an empty canvas. */
.fallback{z-index:1;overflow:hidden;display:block;background:
  linear-gradient(90deg,rgba(1,2,8,.90),rgba(1,2,8,.20) 55%,rgba(1,2,8,.08)),
  url("/assets/images/3d/cinematic-environment-v6.webp") center/cover no-repeat}
.fallback::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 69% 47%,rgba(106,84,255,.22),transparent 28%),radial-gradient(circle at 66% 73%,rgba(50,222,255,.13),transparent 22%)}
.fallback-portal{display:none;position:absolute;left:70%;top:47%;width:min(55vw,710px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(127,104,255,.25);box-shadow:0 0 34px rgba(83,213,255,.17),0 0 100px rgba(128,73,255,.24),inset 0 0 70px rgba(68,177,255,.07)}
.fallback-portal::before{content:"";position:absolute;inset:8%;border-radius:inherit;border:1px solid rgba(101,226,255,.22);box-shadow:0 0 26px rgba(101,226,255,.12)}
.fallback-phone{position:absolute;z-index:2;left:70%;top:47%;width:min(26vw,370px);aspect-ratio:471/899;padding:9px;border-radius:clamp(27px,3vw,43px);transform:translate(-50%,-50%) perspective(1100px) rotateY(-2deg) rotateZ(-.4deg);background:linear-gradient(145deg,#667187 0%,#151b2a 8%,#02030a 35% 78%,#594d7f 100%);box-shadow:0 48px 115px rgba(0,0,0,.78),0 0 0 2px rgba(255,255,255,.14) inset,0 0 48px rgba(99,87,255,.25)}
.fallback-phone::after{content:"";position:absolute;inset:9px;border-radius:inherit;pointer-events:none;background:linear-gradient(116deg,rgba(255,255,255,.12),transparent 19% 76%,rgba(124,99,255,.10));mix-blend-mode:screen}
.fallback-phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:clamp(20px,2.45vw,35px);background:#050714}
.fallback-phone-speaker{position:absolute;z-index:3;left:50%;top:7px;width:28%;height:7px;transform:translateX(-50%);border-radius:999px;background:#020308;box-shadow:0 1px rgba(255,255,255,.12)}
.fallback-pedestal{position:absolute;left:70%;top:80%;width:min(36vw,520px);height:70px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(116,95,255,.42),rgba(12,16,43,.86) 40%,transparent 74%);box-shadow:0 0 42px rgba(93,226,255,.20)}
.webgl .fallback{display:none}
.no-webgl #scene,.no-webgl #bloom,.data-saver #scene,.data-saver #bloom{display:none}
.no-webgl .c-copy,.data-saver .c-copy{display:none}
.no-webgl .c-copy-a,.data-saver .c-copy-a{display:block;opacity:1!important;pointer-events:auto!important;transform:translate3d(0,-44%,0)!important}
.no-webgl .c-progress,.no-webgl .c-scroll-cue,.data-saver .c-progress,.data-saver .c-scroll-cue{display:none}
.c-no-script{position:absolute;z-index:7;left:clamp(22px,6vw,96px);bottom:18px;margin:0;color:rgba(232,238,255,.66);background:rgba(4,7,18,.72);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 13px;font-size:11px;backdrop-filter:blur(12px)}
.c-copy-a{opacity:1;pointer-events:auto}
.webgl .c-copy-a{opacity:0;pointer-events:none}
.no-webgl .c-copy-d,.data-saver .c-copy-d{display:none!important}

@media(max-width:900px){
  .experience{height:275vh;min-height:1960px}
  .stage{min-height:540px}
  #bloom{display:none}
  .scene-environment{background-position:center 48%;opacity:calc(.56 + var(--scene-clarity)*.12);filter:saturate(1.01) contrast(1.08) brightness(.78);transform:scale(calc(1.12 + var(--scene-progress)*.07)) translate3d(calc((var(--scene-progress) - .5)*-.7%),calc(var(--scene-progress)*-.35%),0)}
  .scene-product-v139{left:50%;top:31%;height:min(58svh,560px);width:auto;max-width:92vw;filter:drop-shadow(0 28px 44px rgba(0,0,0,.54)) drop-shadow(0 0 22px rgba(93,78,255,.12))}
  .scene-haze{background:linear-gradient(180deg,rgba(1,2,8,.18),rgba(1,2,8,.26) 45%,rgba(1,2,8,.91) 77%),radial-gradient(circle at 58% 35%,rgba(111,73,255,.18),transparent 35%)}
  .scene-light-column{right:-18%;width:80%;opacity:.20}
  .vignette{background:linear-gradient(180deg,rgba(1,2,8,.12),rgba(1,2,8,.08) 48%,rgba(1,2,8,.82) 78%,rgba(1,2,8,.96)),radial-gradient(ellipse at 55% 38%,transparent 0 35%,rgba(1,2,8,.45) 100%)}
  .c-copy{left:22px;right:22px;top:auto;bottom:72px;width:auto;transform:none}
  .c-copy h1,.c-copy h2{font-size:clamp(41px,12.2vw,66px);line-height:.94;max-width:95%;margin-bottom:18px}
  .c-copy-d{bottom:24px}
  .c-copy-d h2{font-size:clamp(37px,10.8vw,57px);max-width:94%}
  .c-copy>p:not(.c-eyebrow){font-size:15px;line-height:1.52;max-width:88%}
  .c-copy-d>p:not(.c-eyebrow){max-width:91%}
  .c-eyebrow{font-size:10px;margin-bottom:13px}
  .c-actions{flex-wrap:wrap;margin-top:19px;gap:9px}
  .c-button{min-height:45px;padding:0 17px;font-size:13px}
  .c-progress{right:14px;top:11%;bottom:11%}
  .c-scroll-cue{left:auto;right:25px;transform:none;bottom:24px}
  .fallback{background-position:center}
  .fallback-portal{left:59%;top:34%;width:115vw}
  .fallback-phone{left:61%;top:34%;width:min(55vw,285px);padding:7px}
  .fallback-pedestal{left:61%;top:61%;width:72vw;height:48px}
  .no-webgl .c-copy-a,.data-saver .c-copy-a{display:block;bottom:32px;transform:none!important}
  .no-webgl .c-copy-a h1,.data-saver .c-copy-a h1{font-size:clamp(38px,11.2vw,54px);max-width:94%}
}
@media(max-width:420px){
  .experience{height:270vh}
  .scene-product-v139{top:30%;height:min(56svh,520px);max-width:92vw}
  .c-copy{left:19px;right:19px}
  .c-copy h1,.c-copy h2{font-size:clamp(38px,11.6vw,52px)}
  .c-copy-d h2{font-size:clamp(35px,10.2vw,48px)}
  .c-button{width:100%}
  .c-button.secondary{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.c-scroll-cue i:after{animation:none}.grain{display:none}.scene-environment{transform:scale(1.08)}}

@media(max-width:340px){
  .scene-product-v139{top:29%;height:min(54svh,490px);max-width:94vw}
  .c-copy-d{bottom:19px}
  .c-copy-d h2{font-size:clamp(31px,10vw,42px)}
  .c-copy-d>p:not(.c-eyebrow){font-size:14px;line-height:1.45;max-width:96%}
}

@media(max-width:360px){
  .scene-product-v139{height:min(54svh,490px);width:auto;max-width:94vw}
  .scene-product-v139 img{width:auto;height:100%;max-width:100%;object-fit:contain}
}
@media(max-height:720px) and (max-width:900px){
  .scene-product-v139{top:27%;height:min(47svh,420px);width:auto;max-width:92vw}
  .scene-product-v139 img{width:auto;height:100%;max-width:100%;object-fit:contain}
  .c-copy-d{bottom:12px}
}

/* V0.13.2 final product-fit corrections. The prerender keeps its intrinsic
   aspect ratio so the screen and navigation can never spill outside the phone. */
.scene-product-v139{
  width:min(40vw,520px);
  height:auto;
  max-width:none;
  aspect-ratio:820/1158;
}
.scene-product-v139 img{width:100%;height:auto;max-width:none;object-fit:contain}

@media(max-width:800px){
  .experience{height:250vh;min-height:2100px}
  .scene-product-v139{
    left:50%;
    top:31%;
    width:min(92vw,48svh,410px);
    height:auto;
    max-width:none;
  }
}
@media(max-width:420px){
  .experience{height:245vh;min-height:1980px}
  .scene-product-v139{top:31%;width:min(92vw,48svh,390px);height:auto;max-width:none}
}
@media(max-width:340px){
  .experience{height:242vh;min-height:1900px}
  .scene-product-v139{top:30%;width:min(94vw,47svh,300px);height:auto;max-width:none}
}
@media(max-height:720px) and (max-width:800px){
  .scene-product-v139{top:29%;width:min(88vw,42svh,320px);height:auto;max-width:none}
}
@media(max-width:800px){.scene-product-v139{top:38%}}
@media(max-width:420px){.scene-product-v139{top:38%}}
@media(max-width:340px){.scene-product-v139{top:38%}}
@media(max-height:720px) and (max-width:800px){.scene-product-v139{top:36%}}


/* V0.13.9 final product asset keeps its intrinsic ratio. */
.scene-product-v139{width:min(40vw,520px);height:auto;max-width:none;aspect-ratio:819/1242}
.scene-product-v139 img{width:100%;height:auto;max-width:none;object-fit:contain}
@media(max-width:800px){.experience{height:225vh;min-height:1780px}.scene-product-v139{left:50%;top:37%;width:min(90vw,46svh,380px);height:auto;max-width:none}}
@media(max-width:420px){.experience{height:220vh;min-height:1700px}.scene-product-v139{top:37%;width:min(90vw,45svh,350px)}}
@media(max-width:340px){.experience{height:215vh;min-height:1640px}.scene-product-v139{top:36%;width:min(92vw,44svh,286px)}}
@media(max-height:720px) and (max-width:800px){.scene-product-v139{top:35%;width:min(86vw,40svh,300px)}}


/* V0.13.9 photoreal refinement: restrained bloom, coherent product shadow and exact intrinsic ratio. */
.scene-product-v139{
  width:min(40vw,520px);
  height:auto;
  max-width:none;
  aspect-ratio:819/1242;
  filter:drop-shadow(0 34px 52px rgba(0,0,0,.64)) drop-shadow(0 8px 18px rgba(15,18,38,.58));
}
.scene-product-v139 img{width:100%;height:auto;max-width:none;object-fit:contain}
@media(max-width:800px){.experience{height:225vh;min-height:1780px}.scene-product-v139{left:50%;top:37%;width:min(90vw,46svh,380px);height:auto;max-width:none}}
@media(max-width:420px){.experience{height:220vh;min-height:1700px}.scene-product-v139{top:37%;width:min(90vw,45svh,350px)}}
@media(max-width:340px){.experience{height:215vh;min-height:1640px}.scene-product-v139{top:36%;width:min(92vw,44svh,286px)}}
@media(max-height:720px) and (max-width:800px){.scene-product-v139{top:35%;width:min(86vw,40svh,300px)}}


/* V0.13.9 uploaded-phone stage balance: exact uploaded phone render and slightly roomier product stage. */
.scene-product-v139{left:71.5%;top:53.5%;width:min(42vw,560px);height:auto;max-width:none;aspect-ratio:1024/1536;filter:drop-shadow(0 38px 56px rgba(0,0,0,.66)) drop-shadow(0 8px 18px rgba(15,18,38,.58))}
.scene-product-v139 img{width:100%;height:auto;max-width:none;object-fit:contain}
@media(max-width:800px){.experience{height:228vh;min-height:1820px}.scene-product-v139{left:50%;top:38%;width:min(92vw,47svh,390px);height:auto;max-width:none}}
@media(max-width:420px){.experience{height:223vh;min-height:1720px}.scene-product-v139{top:38%;width:min(92vw,46svh,360px)}}
@media(max-width:340px){.experience{height:218vh;min-height:1660px}.scene-product-v139{top:37%;width:min(94vw,45svh,294px)}}
@media(max-height:720px) and (max-width:800px){.scene-product-v139{top:36%;width:min(88vw,41svh,310px)}}


/* V0.13.9 scene CSS physical-path refresh: this file intentionally has a new URL to bypass stale Timeweb incremental assets. */

/* V0.13.9 scene CSS physical-path refresh: the selector generation is now served from a new immutable path. */


/* V0.13.9 centered product refinement: product plane sits slightly lower and keeps a rounded, photographed presentation. */
.scene-product-v139{left:71.4%;top:56.2%;width:min(42vw,560px);height:auto;max-width:none;aspect-ratio:1024/1536;filter:drop-shadow(0 42px 62px rgba(0,0,0,.70)) drop-shadow(0 10px 20px rgba(15,18,38,.60))}
.scene-product-v139 img{width:100%;height:auto;max-width:none;object-fit:contain;border-radius:32px}
@media(max-width:800px){.experience{height:228vh;min-height:1820px}.scene-product-v139{left:50%;top:39%;width:min(92vw,47svh,390px)}}
@media(max-width:420px){.experience{height:223vh;min-height:1720px}.scene-product-v139{top:39%;width:min(92vw,46svh,360px)}}
@media(max-width:340px){.experience{height:218vh;min-height:1660px}.scene-product-v139{top:38%;width:min(94vw,45svh,294px)}}
@media(max-height:720px) and (max-width:800px){.scene-product-v139{top:37%;width:min(88vw,41svh,310px)}}

/* V0.13.12 keeps the accepted photographed product stage unchanged and starts every static/mobile fallback at the introduction. */