:root{--story-height:calc(100svh - 64px);--story-blue:#8cceff}
html{scroll-padding-top:80px}body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f5f5f7;color:#1d1d1f}
.header{height:64px;padding-inline:5%;background:#08090ced;border-color:#ffffff14;color:#f5f5f7;z-index:50}.header .logo{font-size:20px;color:#f5f5f7;letter-spacing:-.7px}.header .logo span{color:#9cabbc}.header .logo i{display:none}.header nav{font-size:14px;color:#c4c9d2;gap:28px}.header nav a:hover{color:white}.header-tools{gap:10px}.language-control{background:#1b2029!important;border-color:#343c48!important}.language-control select{color:#edf2fa!important}.language-control option{color:#152333}.sound-button{background:#1b2029;border-color:#343c48;color:#f5f5f7;min-width:44px;min-height:44px}.story-menu{display:none}.home-anchor{display:block;position:absolute;top:0}.sales-hero[hidden]{display:none!important}
.product-story.compact-demo{--blue:#8cceff;--white:#f5f5f7;display:grid;grid-template-columns:minmax(0,1fr);isolation:isolate;width:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;overflow:visible;background:#05070b;color:#f5f5f7}
.product-story .stage{grid-column:1;grid-row:1/4;align-self:start;position:sticky;top:64px;height:var(--story-height);min-height:560px;margin:0;background:radial-gradient(ellipse at 73% 51%,#143252 0,#080f1a 39%,#05070b 72%);overflow:hidden;z-index:0}
.product-story .stage:after{background:linear-gradient(90deg,#05070b 0,#05070b70 24%,transparent 55%);z-index:1}
.product-story #product{width:75%;height:92%;right:-8%;top:0;z-index:2;opacity:1;touch-action:pan-y pinch-zoom}
.product-story .stage-glow{background:#1275dd;left:55%;top:56%;width:35%;height:18%;opacity:.14;filter:blur(80px)}
.product-story .orbit{display:none}.product-story .product-label{display:none}.product-story .layer-labels{display:none}.product-story .camera-controls button{font-size:14px;min-height:44px}
.story-runway{grid-column:1;grid-row:1;height:calc(max(560px,var(--story-height)) * 5);pointer-events:none}
.story-copy-stack{position:absolute;inset:0;z-index:4;pointer-events:none}
.story-copy{position:absolute;left:7%;top:50%;width:42%;max-width:660px;transform:translateY(0);margin-top:-190px;pointer-events:auto}
.story-copy:not(:first-child){visibility:hidden;opacity:0}.story-copy .eyebrow{font-size:12px;color:#8a9db5;letter-spacing:2.1px;margin-bottom:28px;line-height:1.6}
.story-copy h1,.story-copy h2,html:not([lang=tr]) .story-copy h2{font-size:clamp(48px,6.1vw,98px);font-weight:650;line-height:1.06;letter-spacing:-.055em;color:#f5f5f7;margin:0 0 27px;overflow-wrap:break-word}
.story-copy h1 span,.story-copy h2 span,.story-copy em{display:block}.story-copy em{color:#8cceff}
.story-description{font-size:20px;color:#d0d8e5;line-height:1.6;max-width:390px;margin-bottom:12px}.story-secondary{font-size:16px;color:#8392a8;line-height:1.7;max-width:350px;margin-bottom:0}.story-tag{display:inline-block;font-size:14px;border:1px solid #466482;border-radius:30px;padding:10px 18px;margin-top:10px;color:#a7d8ff}.story-actions{display:flex;align-items:center;gap:25px;margin-top:30px}.story-actions .button{border-radius:30px;background:#f5f5f7;color:#161719;font-size:14px;padding:15px 23px;min-height:48px}.story-actions .text-link{font-size:14px;color:#91ccff}.story-actions .button:hover{background:#b6defe}
.story-bottom{position:absolute;z-index:6;bottom:46px;left:7%;right:7%;display:flex;align-items:center;gap:22px;pointer-events:auto}.story-count{font-size:14px;color:#68788f;white-space:nowrap}.story-count b{font-weight:500;color:#fff;margin-right:8px}.story-steps{display:flex;gap:5px}.story-steps button{border:0;background:transparent;padding:20px 3px;width:40px;min-height:44px}.story-steps button span{display:block;height:2px;background:#354052;border-radius:3px}.story-steps button[aria-current=step] span{background:#a7d8ff}.story-steps button:hover span{background:#fff}.story-skip{margin-left:auto;font-size:14px;color:#c4cbd7;display:flex;gap:16px}.story-caption{position:absolute;bottom:20px;left:7%;right:7%;font-size:12px;color:#8291a5;margin:0;z-index:4;text-align:right}
.sales-section{padding-block:100px}.section-heading h2{font-size:clamp(36px,4.5vw,64px);letter-spacing:-.045em}.section-heading p{font-size:18px}.model-card{border-radius:22px;background:#fff;box-shadow:none}.model-card h3{font-size:28px}.model-card p{font-size:16px;line-height:1.65}.model-detail,.model-demo{font-size:14px}.button{border-radius:25px;font-size:14px}.sales-note{font-size:14px}.explanation{background:#fff}.explanation-intro>p:last-child,.explanation-cards p{font-size:16px}.explanation-cards{gap:22px}.explanation-cards article{border-radius:20px}.explanation-cards a{font-size:14px}.explanation-note{font-size:14px}.mobile-sales-bar{display:none!important}.product-story .webgl-fallback{top:20%;right:2%;width:54%}.product-story .webgl-fallback img{object-fit:contain;max-height:65svh}.product-story .webgl-fallback p{font-size:14px}
@media(min-width:701px) and (max-width:1100px){.header nav{gap:13px;font-size:12px}.header{padding-inline:3%}.story-copy{left:5%;width:44%}.story-description{font-size:18px}.story-actions{gap:15px}.story-actions .text-link{max-width:120px}}
@media(max-width:700px){:root{--story-height:calc(100svh - 60px)}html{scroll-padding-top:72px}.header{height:60px;padding-inline:5%;gap:8px}.header .logo{font-size:17px}.header-tools{gap:5px}.header .language-control{max-width:86px}.header .language-control select{font-size:12px;max-width:64px}.header .sound-button{min-width:40px;min-height:40px;padding:8px}.story-menu{display:block;border:0;background:none;color:#fff;min-width:44px;min-height:44px;font-size:22px}.header nav{display:none}.header.menu-open nav{display:flex;position:absolute;left:0;right:0;top:60px;flex-direction:column;padding:22px 7%;background:#10151f;border-bottom:1px solid #384252;gap:0}.header.menu-open nav a{padding-block:14px;font-size:16px}.product-story .stage{top:60px;min-height:620px;margin:0;background:radial-gradient(ellipse at 50% 70%,#183955,#05070b 66%)}.story-runway{height:calc(max(620px,var(--story-height)) * 5)}.product-story .stage:after{background:linear-gradient(180deg,#05070b,transparent 55%)}.story-copy{left:7%;right:7%;width:auto;max-width:none;top:7%;margin-top:0}.story-copy .eyebrow{font-size:12px;letter-spacing:1.4px;margin-bottom:16px}.story-copy h1,.story-copy h2,html:not([lang=tr]) .story-copy h2{font-size:clamp(40px,10.5vw,64px);letter-spacing:-.055em;margin-bottom:16px;line-height:1.06}.story-description{font-size:16px;line-height:1.55;max-width:95%;margin-bottom:8px}.story-secondary{font-size:14px;line-height:1.6;max-width:100%}.story-actions{margin-top:20px;gap:22px}.story-actions .button{padding:12px 20px}.story-actions .text-link{font-size:14px}.story-tag{padding:7px 15px;margin-top:7px}.product-story #product,.product-story .stage.moving #product{width:118%;height:47%;right:-9%;top:43%}.product-story .stage-glow{left:15%;width:70%;top:65%}.story-bottom{bottom:40px;left:7%;right:7%;gap:13px}.story-steps{gap:0}.story-steps button{width:26px}.story-skip{font-size:12px;gap:6px}.story-caption{font-size:12px;bottom:18px;text-align:left}.product-story .webgl-fallback{top:46%;right:7%;width:86%}.product-story .webgl-fallback img{max-height:35svh}.product-story .webgl-fallback p{font-size:12px}.sales-section{padding-block:64px}.section-heading h2{font-size:38px}.section-heading p{font-size:16px}.model-card h3{font-size:26px}.sales-note{font-size:14px}footer>span{font-size:12px}}
@media(max-width:370px){.story-copy h1,.story-copy h2,html:not([lang=tr]) .story-copy h2{font-size:38px}.header .logo{font-size:15px}.header .language-control{max-width:74px}.story-actions{gap:14px}.story-bottom{gap:8px}.story-skip{max-width:90px}.story-copy{top:5%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.story-copy{transition:none!important}}
html[dir=rtl] .story-copy{direction:rtl;text-align:right}html[dir=rtl] .story-bottom{direction:rtl}html[dir=rtl] .story-skip{margin-left:0;margin-right:auto}
.header nav a{font-size:14px}.sales-section .section-heading h2{font-size:clamp(36px,4.5vw,64px);letter-spacing:-.045em}.section-heading>p:last-child{font-size:18px}.model-content>p:not(.eyebrow){font-size:16px}.product-story .story-copy .eyebrow{font-size:12px;margin-bottom:24px;letter-spacing:1.5px}.product-story .story-copy em{color:#8cceff}.product-story .story-copy .text-link{font-size:14px}
@media(min-width:701px) and (max-width:900px){.story-menu{display:block;border:0;background:none;color:white;min-width:44px;min-height:44px;font-size:22px}.header.menu-open nav{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;padding:20px 5%;background:#10151f}.header.menu-open nav a{padding-block:12px}}
@media(max-width:700px){.product-story .story-copy .eyebrow{margin-bottom:16px}.section-heading>p:last-child{font-size:16px}.product-story .story-actions{flex-wrap:wrap}}

/* The sticky stage and its runway share the only grid row; the sections that
   follow paint above whatever the stage leaves behind. */
#sales-content,.explanation,#buyer-guide,.partners,footer{position:relative;z-index:1}
#sales-content{background:#f5f5f7;padding-top:1px}
.language-control option{background:#fff!important;color:#172637!important}
.product-wordmark{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;margin:0!important;font-size:38px!important;color:#27577f;letter-spacing:-1.5px}.product-wordmark strong{font-size:28px;font-weight:300}.model-image{background:#fff}.model-image img{object-fit:contain}
.header .sound-button #motion-label{display:inline;font-size:12px}
.story-copy{top:50%;margin-top:0;translate:0 -50%;max-height:calc(100% - 140px)}
.product-story .story-copy h1,.product-story .story-copy h2{font-size:clamp(44px,5.2vw,84px)}
@supports not (height:100svh){:root{--story-height:calc(100vh - 64px)}}
@media(max-width:700px){.story-copy{top:25px;translate:none;max-height:none}.product-story .story-copy h1,.product-story .story-copy h2{font-size:clamp(36px,9vw,52px)}.header .sound-button #motion-label{display:none}}
@media(min-width:701px) and (max-height:760px){.story-copy{top:44%}.product-story .story-copy h1,.product-story .story-copy h2{font-size:clamp(40px,4.5vw,65px)}.story-description{font-size:18px}.story-secondary{font-size:14px}.story-actions{margin-top:20px}}

/* Phone scrolling budget. A backdrop-filter on the sticky header has to
   re-sample the page behind it on every scrolled frame; the header background
   is already opaque enough to stand on its own. The blurred stage glow is left
   alone: it sits in a sticky layer that is rasterised once, not per frame. */
.header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#08090cf7}

/* The touch chapter controls shipped without any styling, so they rendered as
   raw browser buttons under the header. Phone only: pointers without hover have
   no other way to step through the story now that touch drag is reserved for
   scrolling. */
.story-touch-nav{display:none}
@media(max-width:700px){
  .story-touch-nav{display:flex;position:absolute;z-index:6;left:7%;right:7%;bottom:80px;justify-content:space-between;gap:10px;pointer-events:auto}
  .story-touch-nav button{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 17px;font-size:13px;border:1px solid #466482;border-radius:30px;background:#05070bcc;color:#a7d8ff}
  .story-touch-nav button[disabled]{opacity:.35}
}

/* The sales hero only exists for the no-JS fallback, which the prerendered
   <noscript> block re-enables. Leaving it visible meant a slow connection
   painted the old light layout before story.js could take over. */
.sales-hero{display:none}

/* Chapter 4 chooses the side: the two pills replace what used to be a second
   scroll chapter and, later, a whole repeated section with its own switch. */
.story-options{display:inline-flex;flex-wrap:wrap;gap:4px;margin-top:10px;padding:4px;border:1px solid #466482;border-radius:30px;background:#05070b99}
.story-options button{border:0;border-radius:26px;background:transparent;color:#a7d8ff;font-size:14px;min-height:40px;padding:8px 18px;white-space:nowrap;transition:background .2s,color .2s}
.story-options button:hover{color:#fff}
.story-options button[aria-pressed=true]{background:#a7d8ff;color:#06121e}
/* Chapter 5 adopts the camera angle overlay as an in-copy control. */
.story-copy .camera-controls{position:static;display:inline-flex;flex-wrap:wrap;width:max-content;max-width:100%;margin-top:14px;gap:3px;padding:4px;border-color:#466482;background:#05070b99;backdrop-filter:none;-webkit-backdrop-filter:none}
.story-copy .camera-controls button{border-radius:26px;color:#a7d8ff;padding:8px 14px}
.story-copy .camera-controls button[aria-pressed=true]{background:#a7d8ff;color:#06121e}
.story-copy .camera-controls button:hover{color:#fff}
.story-copy .camera-controls button[aria-pressed=true]:hover{color:#06121e}
.story-drag-hint{display:none}
@media(hover:hover) and (pointer:fine){.story-drag-hint{display:inline}}
@media(max-width:700px){.story-options{margin-top:6px}.story-options button{min-height:38px;padding:7px 14px;font-size:13px}.story-copy .camera-controls{margin-top:8px;gap:0;padding:3px}.story-copy .camera-controls button{font-size:12px;padding:8px 10px;min-height:40px}}
html[dir=rtl] .story-options{direction:rtl}
