/* SUV AI: an original, scroll-directed three dimensional field story. */
:root {--ink:#122e3a;--blue:#0071eb;--green:#087b52}
.header {height:88px;position:fixed;inset:0 0 auto;z-index:40;background:transparent;border:0;border-bottom:1px solid transparent;backdrop-filter:none;padding:0 5.4%;transition:background .25s,border-color .25s,box-shadow .25s}
/* Шапка закреплена (была absolute и уезжала со страницей); прозрачна только над первым экраном,
   дальше и при открытом меню — матовый фон, чтобы текст страницы не читался сквозь неё. */
.header.is-scrolled,.header.menu-open {background:#f3f9fcee;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom-color:#dfeaf1;box-shadow:0 6px 24px #12384a0f}
.header nav {padding:14px 24px;border:1px solid #ffffffc9;background:#ffffff78;backdrop-filter:blur(18px);border-radius:40px;font-weight:600;gap:27px}
.nav-cta {background:#153b35;color:#fff;border:0;border-radius:40px;padding:15px 22px}
.brand-mark {mix-blend-mode:multiply}
.water-story {position:relative;background:#e9f5ff}
/* Сцена — ровно окно (не меньше 760px) и до, и после загрузки 3D. Раньше до загрузки её держал потолок 1080px,
   а готовая история его снимала: на мониторах выше 1080px сцена вырастала на глазах (сдвиг макета).
   Высокую секцию (world-ready без world-static) hero-world.js включает, только когда рост не виден. */
.story-stage {position:relative;min-height:760px;height:100svh;isolation:isolate;overflow:hidden}
.water-story.world-ready {height:280svh}
.world-ready .story-stage {position:sticky;top:0}
.story-sky {position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 77% 47%,#fff 0%,#f0faff 26%,transparent 62%),linear-gradient(125deg,#e6f3fd 0%,#dcf0ff 56%,#e4f5ea 100%)}
.story-sky:after {content:'';position:absolute;inset:0;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.18' d='M0 0h180v180H0z'/%3E%3C/svg%3E");pointer-events:none}
.story-art {position:absolute;inset:65px -3% 72px 33%;z-index:-1;pointer-events:none}
#suv-world {display:block;width:100%;height:100%;opacity:0;transition:opacity .8s}
.world-ready #suv-world {opacity:1}
.story-fallback {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s}
.world-ready .story-fallback {opacity:0}
.story-copy {position:absolute;top:21%;left:5.4%;width:46%;max-width:670px;z-index:2;pointer-events:none}
.story-kicker {font-size:12px;font-weight:700;letter-spacing:1.7px;display:flex;gap:11px;align-items:center;color:#446b73;margin-bottom:23px}
.story-kicker>span {font-size:25px;color:#00975e}
.chapter {min-height:350px}
.chapter[hidden],.scene-fact[hidden] {display:none!important}
.chapter h1,.chapter h2 {font-size:clamp(48px,5.65vw,88px);font-weight:500;line-height:1.015;letter-spacing:-.065em;margin:0;max-width:650px}
.chapter em {color:#0077ec;font-style:normal}
.chapter p {font-size:16px;line-height:1.8;color:#526e7d;margin-top:24px;max-width:405px}
.chapter:not([hidden]) {animation:chapter-in .65s cubic-bezier(.16,1,.3,1) both}
.story-actions {display:flex;gap:22px;align-items:center;margin-top:24px;pointer-events:auto}
.story-actions .primary {border-radius:40px;padding:18px 24px;gap:30px;font-weight:650;box-shadow:0 8px 25px #1678ec15}
.story-explore {font-size:14px;font-weight:650;display:flex;gap:12px;align-items:center}
.story-explore>span {border:1px solid #a7c5d0;border-radius:50%;width:25px;height:25px;display:grid;place-items:center}
.story-origin {font-size:12px;color:#576d76;margin-top:24px;letter-spacing:.1px}
.story-note {position:absolute;top:15%;left:62%;width:30%;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:1.8px;color:#566e79;gap:12px}
.note-cross {font-size:20px;font-weight:300;color:#8eafb9}
.scene-fact {position:absolute;right:6%;bottom:20%;width:310px;background:#ffffff9c;border:1px solid #fff;border-radius:19px;padding:19px;backdrop-filter:blur(18px);box-shadow:0 14px 50px #19485d0d;display:flex;align-items:center;gap:14px;animation:fact-in .8s cubic-bezier(.16,1,.3,1) both}
.fact-icon {display:grid;place-items:center;flex:none;width:38px;height:38px;background:#e0f0e9;color:#078c5c;border-radius:50%;font-size:23px}
.fact-caption {display:block;font-size:12px;color:#5c727e;margin-bottom:6px}
.scene-fact b {font-size:14px;font-weight:650}
.advice-fact {display:block;bottom:23%;right:8%;width:335px;padding:23px}
.advice-head {display:flex;align-items:center;gap:10px;margin-bottom:20px}
.advice-head .fact-icon {background:#e4f1ff;color:var(--blue);width:30px;height:30px;font-size:18px}
.advice-head>span:last-child {margin-left:auto;font-size:12px;color:#5f747e}
.advice-fact>strong {font-size:26px;font-weight:550;letter-spacing:-1px}
.advice-fact>p {font-size:16px;line-height:1.7;color:#5a7481;margin:12px 0 20px}
.advice-foot {border-top:1px solid #d5e5e9;padding-top:14px;font-size:12px;color:#5a7482;display:flex;justify-content:space-between;gap:10px}
.advice-foot>span {color:#006ce1}
.story-footer {position:absolute;bottom:0;left:5.4%;right:5.4%;height:100px;border-top:1px solid #a9c9d64d;display:flex;align-items:center;justify-content:space-between;gap:20px}
.scroll-cue {display:flex;align-items:center;gap:13px;font-size:12px;color:#345963;line-height:1.6}
.scroll-cue>span {font-size:22px;border:1px solid #b2ccd3;width:36px;height:48px;border-radius:30px;display:grid;place-items:center;animation:cue 2.5s ease infinite}
.scroll-cue small {display:block;font-size:12px;color:#576e75}
.story-chapters {display:flex;gap:7px}
.story-chapters button {display:flex;align-items:center;gap:10px;border:0;border-radius:40px;padding:13px 15px;background:transparent;color:#586d76;font-size:13px;font-weight:600;min-height:44px;transition:background .25s,color .25s}
.story-chapters button>span {font-size:11px;color:#576e77}
.story-chapters button[aria-current] {background:#fff;color:#153c39;box-shadow:0 3px 14px #144a4410}
.story-chapters button[aria-current]>span {color:#008657}
.scene-disclaimer {font-size:11px;color:#576d78;max-width:140px;line-height:1.6;text-align:right}
.story-track {position:absolute;bottom:0;height:2px;background:#b5d5e044;width:100%;left:0}.story-track i {display:block;height:100%;background:linear-gradient(90deg,#1685ff,#05a66b);transform:scaleX(var(--story-progress,0));transform-origin:left}
.world-static,.water-story.world-ready.world-static {height:auto}.world-static .story-stage {position:relative}.world-static .scroll-cue>div {font-size:0}.world-static .scroll-cue>div:after {content:'Выберите этап';font-size:12px}
.world-static .scroll-cue small {display:none}
html[lang=uz] .world-static .scroll-cue>div:after {content:'Bosqichni tanlang'}
html[lang=en] .world-static .scroll-cue>div:after {content:'Choose a step'}
.motion-paused .chapter,.motion-paused .scene-fact {animation:none!important}
@keyframes chapter-in {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fact-in {from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
@keyframes cue {50%{transform:translateY(5px)}}
@media(min-width:1600px){.story-copy{left:max(5.4%,calc((100vw - 1430px)/2))}.chapter{min-height:380px}.chapter h1,.chapter h2{font-size:96px}.chapter p{font-size:18px;max-width:470px}}
@media(max-width:1100px){.chapter h1,.chapter h2{font-size:64px}.story-copy{width:48%;top:22%}.chapter{min-height:330px}.story-actions{gap:15px;flex-wrap:wrap}.scene-fact{right:4%;bottom:21%;width:275px}.advice-fact{width:290px}.story-art{left:30%;right:-9%}.story-note{left:60%;width:32%}.scene-disclaimer{display:none}.header nav{gap:18px;padding:13px 18px}}
@media(max-height:760px) and (min-width:761px){.story-stage{min-height:680px}.story-copy{top:17%}.chapter{min-height:300px}.chapter h1,.chapter h2{font-size:clamp(50px,5.2vw,72px)}.chapter p{margin-top:18px}.story-origin{margin-top:17px}.story-actions{margin-top:18px}.story-footer{height:85px}.scene-fact{bottom:19%}.story-note{top:16%}}
@media(max-width:760px){.header{height:76px;padding:0 6%}.header nav{display:none}.header .nav-cta{font-size:12px;padding:12px 16px}.header .brand{font-size:24px}.story-stage{height:100svh;min-height:810px;max-height:none}.water-story.world-ready{height:230svh}.story-copy{left:7%;top:104px;width:86%;max-width:none}.story-kicker{font-size:10px;letter-spacing:1.1px;margin-bottom:13px}.story-kicker>span{font-size:18px}.chapter{min-height:225px}.chapter h1,.chapter h2{font-size:clamp(43px,9.9vw,66px);line-height:1.03;letter-spacing:-.06em}.chapter h1 br:nth-of-type(1){display:none}.chapter p{font-size:14px;line-height:1.65;margin-top:14px;max-width:350px}.story-actions{margin-top:12px;gap:16px}.story-actions .primary{font-size:12px;padding:14px 18px;min-height:45px;gap:22px}.story-explore{font-size:12px;gap:8px}.story-explore>span{display:none}.story-origin{display:none}.story-art{inset:355px -14% 65px -14%}.story-note{top:auto;bottom:111px;left:8%;width:84%;font-size:9px;letter-spacing:1.4px}.scene-fact{bottom:155px;right:6%;width:250px;padding:12px 15px;border-radius:14px;gap:9px}.fact-icon{width:28px;height:28px;font-size:18px}.fact-caption{font-size:11px;margin-bottom:4px}.scene-fact b{font-size:12px}.advice-fact{bottom:153px;width:255px;padding:17px}.advice-head{margin-bottom:12px}.advice-fact>strong{font-size:23px}.advice-fact>p{font-size:14px;line-height:1.5;margin:9px 0 13px}.advice-foot{font-size:11px}.story-footer{height:84px;left:6%;right:6%;justify-content:center}.scroll-cue{display:none}.story-chapters{width:100%;justify-content:space-between;gap:2px}.story-chapters button{padding:12px 10px;gap:5px;font-size:12px}.story-chapters button>span{font-size:10px}}
@media(max-width:370px){.story-copy{left:6%;width:88%}.chapter h1,.chapter h2{font-size:40px}.story-actions{gap:10px}.story-explore{font-size:11px}.story-art{top:375px}.story-chapters button{padding:12px 8px}}
@media(prefers-reduced-motion:reduce){.chapter,.scene-fact,.scroll-cue>span{animation:none}.water-story.world-ready{height:auto}.world-ready .story-stage{position:relative}.story-explore,.story-chapters button{scroll-behavior:auto}}
/* Кнопка «Анимация» закреплена в правом нижнем углу окна: на первом экране она ложилась на подпись
   (десктоп) и на «04 Совет» (телефон). На телефоне — круглая иконка над рядом глав, подпись остаётся в aria-label. */
@media(min-width:1101px){.scene-disclaimer{margin-right:118px}}
@media(max-width:760px){.motion-toggle{bottom:84px;right:12px;width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center}.motion-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media(max-width:370px){.story-chapters button{padding:12px 7px}}