/* betashar.css — тіркелмеген адамға арналған басты бет («Сиқырлы іздеу», Claude Design: JanaUstazPage + HeroSearch).
   Кәдімгі CSS (фреймворксыз). Шрифттер локальды: Inter (мәтін — дизайндағы Manrope-та ә ғ қ ң ұ жоқ), Montserrat (тақырып — дизайндағы Unbounded қазақ
   әріптерін қолдамайды), Lora (слайд макетіндегі серифті жазу — дизайндағы PT Serif орнына, жеңіл woff2). Иконкалар — inline SVG.
   Анимация тек transform / opacity (және бір реттік clip-path, stroke-dashoffset); экраннан тыс бөлімдер тоқтап тұрады (.js-tyn). */
@font-face{font-family:"JS Sans";src:url(qarip/inter/inter-normal-cyrillic-ext.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"JS Sans";src:url(qarip/inter/inter-normal-cyrillic.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JS Sans";src:url(qarip/inter/inter-normal-latin-ext.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JS Sans";src:url(qarip/inter/inter-normal-latin.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JS Display";src:url(qarip/montserrat/montserrat-normal-cyrillic-ext.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"JS Display";src:url(qarip/montserrat/montserrat-normal-cyrillic.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JS Display";src:url(qarip/montserrat/montserrat-normal-latin.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JS Serif";src:url(qarip/lora/lora-normal-cyrillic-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"JS Serif";src:url(qarip/lora/lora-normal-cyrillic.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JS Serif";src:url(qarip/lora/lora-normal-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JS Serif";src:url(qarip/lora/lora-italic-cyrillic-ext.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap;unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"JS Serif";src:url(qarip/lora/lora-italic-cyrillic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JS Serif";src:url(qarip/lora/lora-italic-latin.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* тіркелмеген күй: сайттың жоғарғы жолағы жасырын (беташардың өз жолағы бар) */
html.qonaq .site-header{display:none}
html.qonaq body{background:#06121F}
html.qonaq #guestZone.guest-zone{display:block!important}

.js-root{position:relative;container-type:inline-size;font-family:"JS Sans",system-ui,-apple-system,"Segoe UI",sans-serif;background:#fff;color:#0F2B46;overflow-x:clip;-webkit-font-smoothing:antialiased}
.js-root *,.js-root *::before,.js-root *::after{box-sizing:border-box}
.js-root a{color:#0D9488;text-decoration:none}
.js-root i{font-style:normal;display:block}
.js-ic{display:inline-block;width:1em;height:1em;flex:none;vertical-align:middle}
.js-ic svg{display:block;width:100%;height:100%}
.js-disp{font-family:"JS Display","JS Sans",sans-serif}
.js-serif{font-family:"JS Serif",Georgia,serif}
.js-mono{font-family:ui-monospace,Menlo,Consolas,monospace}

@keyframes jsFloat1{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(0,-14px,0) rotate(1.2deg)}}
@keyframes jsFloat2{0%,100%{transform:translate3d(0,-6px,0) rotate(0deg)}50%{transform:translate3d(0,10px,0) rotate(-1.4deg)}}
@keyframes jsCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes jsGlowT{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.08);opacity:0}}
@keyframes jsSheen{0%{transform:translateX(-140%) skewX(-20deg)}55%,100%{transform:translateX(420%) skewX(-20deg)}}
@keyframes jsPulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes jpArrow{0%{transform:translateX(-110%);opacity:0}10%{opacity:1}50%,84%{transform:translateX(150%);opacity:1}100%{transform:translateX(150%);opacity:0}}
@keyframes jpHit{0%,48%{transform:scale(1)}54%{transform:scale(1.14)}62%,100%{transform:scale(1)}}
@keyframes jpRocket{0%{transform:translateY(100%);opacity:0}12%{opacity:1}82%{transform:translateY(-6%);opacity:1}100%{transform:translateY(-30%);opacity:0}}
@keyframes jpBall{0%,10%{transform:translate(0,0)}55%,86%{transform:translate(56%,-44%);opacity:1}100%{transform:translate(56%,-44%);opacity:0}}
@keyframes jpBallS{0%,10%{transform:scale(1.15)}55%,100%{transform:scale(.75)}}
@keyframes jpNet{0%,54%{transform:scale(1)}60%{transform:scale(1.05)}68%,100%{transform:scale(1)}}
@keyframes jpWheel{0%{transform:rotate(0deg)}70%,100%{transform:rotate(1125deg)}}
@keyframes jpSpin{to{transform:rotate(360deg)}}
@keyframes jpPrint{0%{transform:translateY(-101%)}42%{transform:translateY(0)}88%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:0}}
@keyframes jpPlay{0%{transform:scaleX(.03)}100%{transform:scaleX(.97)}}
@keyframes jpSoft{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes jpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
/* экраннан тыс бөлім — шексіз анимациялар тоқтайды (батарея мен жылдамдық) */
.js-tyn,.js-tyn *{animation-play-state:paused!important}

/* ========== HERO ========== */
.js-hero{position:relative;width:100%;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:#06121F;color:#F3F7F6;container-type:inline-size}
.js-hero-bg1{position:absolute;inset:0;background:radial-gradient(ellipse 55% 45% at 50% 60%,rgba(13,148,136,.34),transparent 70%),radial-gradient(ellipse 40% 35% at 88% 6%,rgba(227,176,75,.13),transparent 70%),radial-gradient(ellipse 50% 40% at 8% 96%,rgba(45,212,191,.12),transparent 70%),linear-gradient(180deg,#071B2E 0%,#05101C 100%)}
.js-hero-bg2{position:absolute;inset:0;opacity:.6;background-image:repeating-linear-gradient(45deg,rgba(227,176,75,.04) 0 1px,transparent 1px 16px),repeating-linear-gradient(-45deg,rgba(227,176,75,.04) 0 1px,transparent 1px 16px);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 55%,#000,transparent);mask-image:radial-gradient(ellipse 70% 60% at 50% 55%,#000,transparent)}
.js-rays{position:absolute;left:0;top:0;transform:translate(-50%,-50%);pointer-events:none;overflow:visible;z-index:1}
.js-rays.glow{filter:drop-shadow(0 0 6px rgba(45,212,191,.75))}
.js-rays circle,.js-rays line{stroke-dasharray:1;stroke-dashoffset:1}
.js-rays .r1{transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1)}
.js-rays .r2{transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1) .2s}
.js-rays line{transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1)}
.js-rays polygon{opacity:0;transition:opacity .6s ease}
.js-hero.lit .js-rays circle,.js-hero.lit .js-rays line{stroke-dashoffset:0}
.js-hero.lit .js-rays polygon{opacity:.9}
.js-origin{position:absolute;left:0;top:0;width:0;height:0;z-index:2;perspective:1200px}
.js-par{position:absolute;left:0;top:0;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.js-card{position:absolute;left:0;top:0;opacity:0;transform:translate(-50%,-50%) translate3d(0,0,0) scale(.1);transition:transform 1.2s cubic-bezier(.2,.85,.25,1),opacity .7s ease}
.js-f1{animation:jsFloat1 7s ease-in-out infinite}
.js-f2{animation:jsFloat2 8s ease-in-out infinite}
.js-f3{animation:jsFloat2 9s ease-in-out infinite}
.js-f4{animation:jsFloat1 8.5s ease-in-out infinite}
.js-f5{animation:jsFloat2 6.5s ease-in-out infinite}
.jc-kmz{width:236px;background:#FBFAF6;border-radius:14px;padding:16px;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 40px rgba(45,212,191,.18);color:#0F2B46;display:flex;flex-direction:column;gap:10px}
.jc-row{display:flex;justify-content:space-between;align-items:center}
.jc-tag{font-size:11px;font-weight:800;color:#0B7A70;background:#DDF3EF;padding:3px 8px;border-radius:6px}
.jc-130{font-size:10px;font-weight:700;color:#8A6A2A}
.jc-kmz-t{font-size:15px;font-weight:800;letter-spacing:-.01em}
.jc-grid{display:grid;grid-template-columns:62px 1fr;font-size:10.5px;border:1px solid #E6E2D6;border-radius:8px;overflow:hidden}
.jc-grid>span{padding:6px 8px;border-bottom:1px solid #E6E2D6;font-weight:700}
.jc-grid>span.k{background:#F3F0E7;color:#6A7B8C;font-weight:600}
.jc-grid>span.lines{padding:8px;display:flex;flex-direction:column;gap:5px}
.jc-grid>span:nth-last-child(-n+2){border-bottom:0}
.jc-grid i,.jc-sheet i.l{height:5px;border-radius:4px;background:#E2DED2}
.jc-foot{font-size:10px;font-weight:700;color:#6A7B8C}
.jc-slide{position:relative;width:300px;height:169px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#0D5E63 0%,#0F2B46 100%);box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(94,234,212,.25);padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.jc-slide-oiu{position:absolute;right:-10px;top:-10px;bottom:-10px;width:44%;background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2228%22%20height=%2228%22%3E%3Cpath%20d=%22M14%202L26%2014L14%2026L2%2014Z%22%20fill=%22none%22%20stroke=%22%23E3B04B%22%20stroke-opacity=%220.5%22/%3E%3Cpath%20d=%22M14%2010L18%2014L14%2018L10%2014Z%22%20fill=%22%23E3B04B%22%20fill-opacity=%220.45%22/%3E%3C/svg%3E");-webkit-mask-image:linear-gradient(90deg,transparent,#000 75%);mask-image:linear-gradient(90deg,transparent,#000 75%)}
.jc-slide-meta{position:relative;font-size:9px;font-weight:800;letter-spacing:.08em;color:#E3B04B}
.jc-slide-t{position:relative;font-size:19px;font-weight:700;line-height:1.15;color:#fff;max-width:68%}
.jc-slide-b{position:relative;align-self:flex-start;font-size:9px;font-weight:800;color:#0F2B46;background:#E3B04B;padding:3px 8px;border-radius:5px}
.jc-sheet{width:214px;background:#F7F2E6;border-radius:12px;padding:16px;box-shadow:0 30px 60px rgba(0,0,0,.5);color:#0F2B46;display:flex;flex-direction:column;gap:9px}
.jc-sheet-h{font-size:10px;font-weight:800;color:#8A6A2A;letter-spacing:.06em}
.jc-sheet-t{font-size:14px;font-weight:800;line-height:1.2}
.jc-sheet-q{font-size:10px;font-weight:700;color:#46586B}
.jc-chk{display:flex;flex-direction:column;gap:6px}
.jc-chk>div{display:flex;align-items:center;gap:6px}
.jc-chk b{width:10px;height:10px;border:1.5px solid #0D9488;border-radius:3px;flex:none}
.jc-chk b.on{background:#0D9488}
.jc-chk i{flex:1;height:5px;border-radius:4px;background:#E2DACA}
.jc-ln{display:flex;flex-direction:column;gap:8px}
.jc-ln i{height:1px;background:#C9BFA8}
.jc-vis{width:206px;background:#fff;border-radius:12px;padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:8px}
.jc-vis-img{height:150px;border-radius:8px;background:repeating-linear-gradient(135deg,#E6F4F1 0 8px,#D5ECE7 8px 16px);display:flex;align-items:center;justify-content:center}
.jc-vis-img span{font-size:10px;color:#0B6F68;background:rgba(255,255,255,.8);padding:3px 6px;border-radius:4px}
.jc-vis-h{font-size:10px;font-weight:800;color:#0D9488;letter-spacing:.06em;padding:0 4px}
.jc-vis-t{font-size:13px;font-weight:800;color:#0F2B46;padding:0 4px 4px}
.jc-game{width:156px;background:#0A1E33;padding:6px;border-radius:26px;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(94,234,212,.3)}
.jc-game-in{height:300px;background:#F0FAF8;border-radius:21px;padding:14px 10px;display:flex;flex-direction:column;gap:10px}
.jc-game-n{font-size:13px;font-weight:800;color:#0F2B46}
.jc-game-time{font-size:9px;font-weight:800;color:#fff;background:#0D9488;padding:2px 6px;border-radius:8px}
.jc-track{display:flex;flex-direction:column;gap:6px}
.jc-track>div{height:7px;border-radius:5px;background:#D7EEEA;position:relative}
.jc-track b{position:absolute;top:-2px;width:11px;height:11px;border-radius:50%}
.jc-q{background:#fff;border-radius:10px;padding:12px 8px;text-align:center;font-size:12px;font-weight:800;color:#0F2B46;line-height:1.3;box-shadow:0 2px 6px rgba(15,43,70,.06)}
.jc-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.jc-opts span{text-align:center;padding:9px 0;border-radius:8px;background:#fff;color:#0F2B46;font-size:11px;font-weight:800}
.jc-opts span:first-child{background:#0D9488;color:#fff}

.js-head{position:absolute;top:0;left:0;right:0;z-index:20}
.js-head-in{max-width:1320px;margin:0 auto;padding:18px clamp(20px,4cqw,56px);display:flex;align-items:center;gap:clamp(10px,1.6cqw,20px)}
.js-brand{display:flex;align-items:center;gap:10px}
.js-root .js-brand{color:inherit}
.js-brand img{width:34px;height:34px;border-radius:9px;display:block}
.js-brand-t{font-weight:800;font-size:21px;letter-spacing:-.02em}
.js-brand-t b{color:#2DD4BF;font-weight:800}
.js-brand-t em{color:#fff;font-style:normal}
.js-sp{flex:1}
.js-lang{display:flex;padding:3px;border-radius:10px;background:rgba(255,255,255,.08);gap:2px;font-size:16px;font-weight:700}
.js-lang button{padding:6px 10px;border-radius:8px;border:0;background:transparent;color:rgba(255,255,255,.62);font:inherit;cursor:pointer;min-height:36px}
.js-lang button.is-on{background:rgba(255,255,255,.16);color:#fff}
.js-root a.js-kiru{font-size:16px;font-weight:700;color:#fff;padding:10px 4px}
.js-root a.js-kiru:hover{color:#5EEAD4}
.js-root a.js-reg{font-size:16px;font-weight:700;color:#04201D;background:#2DD4BF;padding:11px 20px;border-radius:10px}
.js-root a.js-reg:hover{background:#5EEAD4;color:#04201D}
.js-burger{display:none;width:44px;height:44px;flex:none;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;align-items:center;justify-content:center;cursor:pointer;padding:0}
.js-burger .js-ic{font-size:26px}
.js-menu{position:absolute;top:62px;left:12px;right:12px;z-index:30;background:#0B2238;border:1px solid rgba(94,234,212,.28);border-radius:18px;padding:16px;display:none;flex-direction:column;gap:14px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.js-menu.on{display:flex}
.js-menu-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:16px;font-weight:700;color:rgba(255,255,255,.8)}
.js-menu .js-lang{border-radius:12px}
.js-menu .js-lang button{min-width:64px;min-height:44px;border-radius:10px;color:rgba(255,255,255,.65)}
.js-menu .js-lang button.is-on{color:#fff}
.js-root a.js-menu-reg{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:14px;background:#2DD4BF;color:#04201D;font-size:17px;font-weight:800}

.js-col{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 40px 40px;gap:clamp(18px,2.4cqw,30px);text-align:center;pointer-events:none}
.js-h1{margin:0;font-weight:800;font-size:clamp(28px,4.1cqw,60px);line-height:1.1;letter-spacing:-.02em;color:#fff;max-width:15em;text-wrap:balance;text-shadow:0 4px 30px rgba(5,16,28,.8)}
.js-h1 .l2{background:linear-gradient(90deg,#5EEAD4,#E3B04B);-webkit-background-clip:text;background-clip:text;color:transparent}
.js-search{pointer-events:auto;width:100%;max-width:680px;min-height:72px;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 20px;border-radius:999px;background:rgba(8,30,48,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(94,234,212,.45);box-shadow:0 10px 40px rgba(0,0,0,.35);transition:box-shadow .8s ease;text-align:left}
.js-hero.lit .js-search{box-shadow:0 0 0 6px rgba(45,212,191,.12),0 0 60px rgba(45,212,191,.45)}
.js-search>.js-ic{font-size:26px;color:#5EEAD4}
.js-typed{flex:1;min-width:0;font-size:clamp(16px,1.4cqw,20px);font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.js-caret{display:inline-block;width:2px;height:1.1em;vertical-align:-.15em;margin-left:2px;background:#5EEAD4;animation:jsCaret 1s steps(1) infinite}
.js-pill{flex:none;display:inline-flex;align-items:center;gap:6px;height:56px;padding:0 16px;border-radius:999px;background:#0D9488;color:#fff;font-size:16px;font-weight:800}
.js-pill .js-ic{font-size:20px;animation:jsPulse 1.6s ease-in-out infinite}
.js-grp{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,1.8cqw,22px);pointer-events:auto;width:100%}
.js-sub{font-size:clamp(16px,1.3cqw,19px);font-weight:600;color:rgba(243,247,246,.82)}
/* жарқыраған батырма: көлеңке анимациясы орнына — артындағы қабат scale/opacity (тек transform/opacity) */
.js-root a.js-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 34px;border-radius:16px;background:linear-gradient(135deg,#14B8A6,#0D9488);color:#fff;font-size:18px;font-weight:800;box-shadow:0 12px 34px rgba(13,148,136,.45)}
.js-root a.js-cta:hover{color:#fff;background:linear-gradient(135deg,#2DD4BF,#0D9488)}
.js-cta::before{content:"";position:absolute;inset:-12px;border-radius:28px;background:rgba(45,212,191,.45);z-index:-1;animation:jsGlowT 2.8s ease-in-out infinite;filter:blur(2px)}
.js-shn{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.js-shn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);animation:jsSheen 3.6s ease-in-out infinite}
.js-cta .js-ic{font-size:22px}
.js-cta .cta-m{display:none}
@container (max-width:699px){
  .js-cta .cta-d{display:none}
  .js-cta .cta-m{display:inline}
  .js-head-in{padding:8px 16px}
  .js-brand img{width:30px;height:30px}
  .js-brand-t{font-size:19px}
  .js-head .js-lang,.js-head a.js-reg{display:none}
  .js-burger{display:flex}
  .js-col{padding:64px 18px 16px;gap:20px}
  .js-h1{max-width:none}
  .js-h1 span{display:block;white-space:nowrap;width:fit-content;margin:0 auto}
  .js-search{min-height:60px}
  .js-pill{height:44px}
  .js-root a.js-cta{width:100%}
  .js-rays.glow{filter:none}
}

/* ========== КЕШКІ 23:00 ========== */
.js-night{position:relative;background:#070F1A}
.js-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.js-n-day{position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 85% 0%,rgba(255,196,110,.55),transparent 60%),radial-gradient(ellipse 50% 50% at 20% 100%,rgba(45,212,191,.28),transparent 70%),linear-gradient(165deg,#FFF5E3 0%,#F4F6EC 45%,#D6F0EA 100%)}
.js-n-dark{position:absolute;inset:0;opacity:calc(1 - var(--q,0));background:radial-gradient(ellipse 42% 55% at var(--lamp,70%) 8%,rgba(245,196,106,.26),transparent 70%),linear-gradient(180deg,#0B1828 0%,#070F1A 100%)}
.js-paper{position:absolute;left:0;top:0;will-change:transform}
.js-paper-in{position:absolute;inset:0;border-radius:6px;background:#F7F1E3;box-shadow:0 14px 30px rgba(0,0,0,.35);overflow:hidden}
.js-paper-lines{position:absolute;inset:0;padding:12%;display:flex;flex-direction:column;gap:7%}
.js-paper-lines i{height:3%;background:#D9CFB9;border-radius:3px}
.js-paper-lines i:first-child{height:4%;background:#C9BEA6;width:70%}
.js-paper-lines i.red{height:2px;background:#C2554A;width:80%;transform:rotate(-8deg);margin-top:6%;opacity:.7}
.js-paper-main{position:absolute;inset:0;padding:10%;display:flex;flex-direction:column;gap:6%;background:#FFFDF8;opacity:clamp(0,calc(var(--q,0) * 2 - 1),1)}
.js-paper-main .tag{align-self:flex-start;font-weight:800;color:#0B7A70;background:#DDF3EF;padding:2px 6px;border-radius:5px}
.js-paper-main .tt{font-weight:800;color:#0F2B46;line-height:1.2}
.js-paper-main .bd{flex:1;border-radius:4px}
.js-paper-main i{height:3%;background:#E2DED2;border-radius:3px}
.js-paper-shade{position:absolute;inset:0;background:#0A1524;opacity:calc(.45 - var(--q,0) * .45)}
.js-nt{position:absolute;z-index:20;left:clamp(24px,6.5cqw,96px);top:0;bottom:0;width:min(560px,40%);display:grid;align-content:center}
.js-nt>div{grid-area:1/1;display:flex;flex-direction:column;gap:clamp(8px,1.4cqw,18px)}
.js-nt .a{opacity:clamp(0,calc(1 - var(--q,0) * 2.5),1)}
.js-nt .b{opacity:clamp(0,calc(var(--q,0) * 2.5 - 1.2),1)}
.js-kicker{font-size:clamp(16px,1.3cqw,18px);font-weight:700;letter-spacing:.14em}
.js-clock{font-weight:800;font-size:clamp(56px,9cqw,132px);line-height:1;letter-spacing:-.03em;color:#F6EBD6;text-shadow:0 0 40px rgba(245,196,106,.35);font-variant-numeric:tabular-nums}
.js-msg{font-size:clamp(18px,1.8cqw,26px);font-weight:600;line-height:1.45;color:#E8E1D2;min-height:2.9em}
.js-msg b{display:inline-block;width:2px;height:1em;vertical-align:-.1em;margin-left:3px;background:#E9B866}
.js-big{font-weight:800;font-size:clamp(34px,4.3cqw,62px);line-height:1;letter-spacing:-.03em;color:#0D9488}
.js-nh2{margin:0;font-weight:800;font-size:clamp(24px,3cqw,44px);line-height:1.18;letter-spacing:-.02em;color:#0F2B46;text-wrap:balance}
.js-nlead{font-size:19px;font-weight:600;color:#3D5165;line-height:1.5}
.js-nmob{display:none;position:absolute;z-index:20;left:18px;right:18px;bottom:96px}
.js-nmob>*{grid-area:1/1;align-self:end}
.js-nscroll{display:flex;flex-direction:column;align-items:center;gap:4px;color:#E8E1D2;font-size:16px;font-weight:600;opacity:clamp(0,calc(1 - var(--q,0) * 3),1)}
.js-nscroll .js-ic{font-size:26px;animation:jpBob 2s ease-in-out infinite}
.js-nmob h2{margin:0;font-weight:800;font-size:min(24px,6.4cqw);line-height:1.22;color:#0F2B46;text-align:center;text-wrap:balance;opacity:clamp(0,calc(var(--q,0) * 2.5 - 1.3),1)}
.js-nbar{position:absolute;left:0;bottom:0;height:3px;width:100%;z-index:21;background:linear-gradient(90deg,#E9B866,#2DD4BF);transform-origin:0 50%;transform:scaleX(var(--p,0))}
@container (max-width:759px){
  .js-nt{left:18px;right:18px;top:28px;bottom:auto;width:auto;align-content:start}
  .js-nt .b .js-nh2,.js-nt .b .js-nlead{display:none}
  .js-nmob{display:grid}
}

/* ========== БӨЛІМДЕР (ортақ) ========== */
.js-sec{padding:clamp(64px,8cqw,128px) clamp(18px,4cqw,56px)}
.js-wrap{max-width:1240px;margin:0 auto}
.js-label{font-size:16px;font-weight:800;letter-spacing:.14em}
.js-h2{margin:0;font-weight:800;font-size:clamp(28px,3.6cqw,52px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.js-p{margin:0;font-size:clamp(16px,1.35cqw,19px);line-height:1.6;text-wrap:pretty}
[data-reveal]{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js-anim [data-reveal]:not(.is-in){opacity:0;transform:translateY(22px)}

/* ҚМЖ */
.js-kmz{background:#FBF8F1}
.js-kmz .js-wrap{display:flex;flex-wrap:wrap;gap:clamp(32px,5cqw,80px);align-items:center}
.js-kmz-txt{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:clamp(16px,1.8cqw,22px)}
.js-kmz-txt .js-label{color:#0B7A70}
.js-kmz-txt .js-h2{color:#0F2B46}
.js-kmz-txt .js-p{color:#3D5165}
.js-chips{display:flex;flex-wrap:wrap;gap:10px}
.js-chips>span{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #E5DFD0;font-size:16px;font-weight:700}
.js-chips>span.dark{display:inline-flex;align-items:center;gap:6px;background:#0F2B46;color:#fff;border-color:#0F2B46}
.js-chips span.dark .js-ic{font-size:18px;color:#E3B04B}
.js-kmz-card{flex:1 1 520px;min-width:0;background:#fff;border-radius:18px;box-shadow:0 30px 70px rgba(80,60,20,.14),0 0 0 1px #EDE6D6;padding:clamp(18px,2.4cqw,32px);display:flex;flex-direction:column;gap:16px}
.js-kmz-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.js-kmz-head>span:first-child{font-size:16px;font-weight:800;letter-spacing:.08em;color:#0F2B46}
.js-kmz-st{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:700;color:#0B7A70}
.js-kmz-st .js-ic{font-size:20px}
.js-rows{display:flex;flex-direction:column;border:1px solid #E6E0D2;border-radius:12px;overflow:hidden}
.js-rows>div{display:grid;grid-template-columns:minmax(96px,34%) 1fr;border-top:1px solid #E6E0D2}
.js-rows>div:first-child{border-top:0}
.js-rows .k{padding:12px 14px;background:#F6F2E8;color:#5B6C7E;font-size:16px;font-weight:700;line-height:1.35}
.js-rows .v{position:relative;padding:12px 14px;font-size:16px;font-weight:700;line-height:1.4;color:#0F2B46;opacity:0;transform:translateX(14px);transition:opacity .5s ease var(--d,0ms),transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.js-rows .v::before{content:"";position:absolute;inset:0;background:rgba(45,212,191,.18);transition:opacity 1.6s ease calc(var(--d,0ms) + 500ms)}
.js-kmz.is-in .js-rows .v{opacity:1;transform:none}
.js-kmz.is-in .js-rows .v::before{opacity:0}

/* ПРЕЗЕНТАЦИЯ */
.js-slides{background:radial-gradient(ellipse 60% 50% at 50% 60%,rgba(13,148,136,.22),transparent 70%),#071A2B;color:#fff}
.js-slides .js-wrap{max-width:1100px;display:flex;flex-direction:column;gap:clamp(24px,3cqw,40px)}
.js-sl-txt{display:flex;flex-direction:column;gap:clamp(14px,1.6cqw,20px);max-width:720px}
.js-sl-txt .js-label{color:#E3B04B}
.js-sl-txt .js-h2{color:#fff}
.js-sl-txt .js-p{color:rgba(243,247,246,.85)}
.js-sl-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.js-sl-nm{display:flex;align-items:baseline;gap:12px;min-width:0}
.js-sl-nm .n{font-size:16px;font-weight:800;color:#5EEAD4}
.js-sl-nm .t{font-size:clamp(18px,1.6cqw,22px);font-weight:800}
.js-dice{min-height:52px;padding:0 22px;border-radius:14px;border:1px solid rgba(227,176,75,.6);background:rgba(227,176,75,.12);color:#F6DFA8;font:inherit;font-size:17px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.js-dice:hover{background:rgba(227,176,75,.22)}
.js-deck{position:relative;width:100%;aspect-ratio:16/9;border-radius:clamp(12px,1.4cqw,18px);overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);container-type:inline-size;background:#0B2236}
.js-s{position:absolute;inset:0;padding:6cqw;opacity:0;transition:opacity .8s ease,transform 1s cubic-bezier(.65,0,.25,1),clip-path 1.1s cubic-bezier(.65,0,.25,1),filter .9s ease}
.js-s.on{opacity:1;transform:none!important;clip-path:inset(0% 0% 0% 0%)!important;filter:none!important;z-index:3}
.js-s.pr{opacity:1;transform:none!important;clip-path:inset(0% 0% 0% 0%)!important;filter:none!important;z-index:2}
.js-s.s1.on,.js-s.s1.pr{clip-path:circle(80% at 50% 50%)!important}
.js-s .abs{position:absolute}
.js-s .col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;gap:2cqw}
.js-s .cen{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4cqw;text-align:center}
.s0{background:#E9DDC5;background-image:repeating-linear-gradient(0deg,rgba(120,90,50,.06) 0 1px,transparent 1px 6px);transform:rotate(-6deg) scale(.86);transition-timing-function:ease,cubic-bezier(.2,.8,.2,1),cubic-bezier(.65,0,.25,1),ease}
.s1{background:#0F2B46;clip-path:circle(0% at 50% 50%)}
.s2{background-color:#0A1E33;background-image:linear-gradient(rgba(94,234,212,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(94,234,212,.12) 1px,transparent 1px);background-size:4cqw 4cqw;clip-path:inset(0% 0% 100% 0%)}
.s3{background:linear-gradient(160deg,#EEF7E6,#C9E6C0);overflow:hidden;transform:scale(1.05);filter:blur(14px)}
.s4{background:#FAFAF7;overflow:hidden;clip-path:inset(0% 100% 0% 0%)}
.s5{background:#08060F;transform:scale(1.14)}
.s6{background:#FFE066;overflow:hidden;transform:translateY(30%) scale(.8);transition-timing-function:ease,cubic-bezier(.34,1.56,.64,1),cubic-bezier(.65,0,.25,1),ease}
.s7{background:#F5F2EC;padding:5cqw 6cqw;display:flex;flex-direction:column;gap:2.4cqw;transform:translateX(-12%)}
.js-oiu-band{position:absolute;left:0;right:0;height:6cqw;background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2240%22%20height=%2240%22%3E%3Cpath%20d=%22M20%203L37%2020L20%2037L3%2020Z%22%20fill=%22none%22%20stroke=%22%23E3B04B%22%20stroke-opacity=%220.8%22/%3E%3Cpath%20d=%22M20%2014L26%2020L20%2026L14%2020Z%22%20fill=%22%23E3B04B%22/%3E%3C/svg%3E");background-size:6cqw 6cqw}
.js-sl-chips{display:flex;flex-wrap:wrap;gap:10px}
.js-sl-chips button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:rgba(243,247,246,.85);font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.js-sl-chips button.on{background:#E3B04B;color:#1A1405;border-color:#E3B04B}
@container (max-width:759px){ .js-sl-chips{display:none} }

/* ОЙЫНДАР */
.js-games{background:#F3F7F6}
.js-games .js-wrap{display:flex;flex-direction:column;gap:clamp(28px,3.5cqw,48px)}
.js-g-txt{display:flex;flex-direction:column;gap:clamp(14px,1.6cqw,20px);max-width:720px}
.js-g-txt .js-label{color:#0B7A70}
.js-g-txt .js-h2{color:#0F2B46}
.js-g-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(14px,1.6cqw,20px)}
.js-gate{border-radius:24px;overflow:hidden;color:#fff;padding:clamp(22px,3cqw,40px);display:flex;flex-direction:column;gap:20px;position:relative;opacity:0;transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.8,.2,1)}
.js-gate.l{background:#0F2B46;transform:translateX(-60px)}
.js-gate.r{background:linear-gradient(150deg,#0D9488,#0B5F66);transform:translateX(60px);transition-delay:.15s}
.js-games.is-in .js-gate{opacity:1;transform:none}
.js-gate-oiu{position:absolute;inset:0;opacity:.5;background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2240%22%20height=%2240%22%3E%3Cpath%20d=%22M20%203L37%2020L20%2037L3%2020Z%22%20fill=%22none%22%20stroke=%22%23E3B04B%22%20stroke-opacity=%220.18%22/%3E%3C/svg%3E");-webkit-mask-image:linear-gradient(200deg,#000,transparent 60%);mask-image:linear-gradient(200deg,#000,transparent 60%)}
.js-gate-h{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.js-gate-h>div{display:flex;flex-direction:column;gap:6px}
.js-gate-h .lb{font-size:16px;font-weight:800;letter-spacing:.14em}
.js-gate-h .tt{font-size:clamp(20px,1.8cqw,26px);font-weight:800}
.js-gate-h .num{font-weight:800;font-size:clamp(44px,5cqw,72px);line-height:.9}
.js-scenes{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.js-scene{position:relative;height:190px;border-radius:16px;overflow:hidden}
.js-scene>.nm{position:absolute;left:12px;bottom:10px;font-size:16px;font-weight:700}
.js-g-list{position:relative;display:flex;flex-wrap:wrap;gap:8px}
.js-g-list span{padding:7px 12px;border-radius:999px;font-size:16px;font-weight:600}
.js-gate.l .js-g-list span{border:1px solid rgba(227,176,75,.35);color:#F3E6C8}
.js-gate.r .js-g-list span{border:1px solid rgba(255,255,255,.35)}
.sc-jamby{background:rgba(255,255,255,.05);border:1px solid rgba(227,176,75,.25)}
.sc-jamby .tgt{position:absolute;right:10%;top:42%;width:56px;height:56px;margin-top:-28px;border-radius:50%;background:radial-gradient(circle,#E3B04B 0 18%,#0F2B46 19% 36%,#E3B04B 37% 54%,#0F2B46 55% 72%,#E3B04B 73%);animation:jpHit 2.8s ease-in-out infinite}
.sc-jamby .arr{position:absolute;left:0;top:42%;margin-top:-2px;width:34%;height:4px;animation:jpArrow 2.8s cubic-bezier(.3,.1,.3,1) infinite}
.sc-jamby .arr i:first-child{position:absolute;left:0;right:8px;top:1px;height:2px;background:#F3E6C8}
.sc-jamby .arr i:last-child{position:absolute;right:0;top:-3px;width:10px;height:10px;background:#E3B04B;transform:rotate(45deg)}
.sc-jamby .nm,.sc-baiq .nm{color:#F3E6C8}
.sc-baiq{background:linear-gradient(180deg,#0A1A2C,#14385A);border:1px solid rgba(227,176,75,.25)}
.sc-baiq .st{position:absolute;border-radius:50%;background:#fff}
.sc-baiq .rkw{position:absolute;inset:0;animation:jpRocket 3.4s cubic-bezier(.5,0,.7,1) infinite}
.sc-baiq .rk{position:absolute;left:50%;top:0;margin-left:-20px;width:40px;display:flex;flex-direction:column;align-items:center}
.sc-baiq .rk .js-ic{font-size:40px;color:#F3E6C8}
.sc-baiq .rk i{width:6px;height:34px;border-radius:3px;background:linear-gradient(180deg,#E3B04B,transparent)}
.sc-pen{background:rgba(4,40,40,.35);border:1px solid rgba(255,255,255,.2)}
.sc-pen .net{position:absolute;right:8%;top:12%;width:46%;height:44%;border:3px solid #fff;border-bottom:0;border-radius:4px 4px 0 0;background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);background-size:9px 9px;animation:jpNet 2.8s ease-in-out infinite}
.sc-pen .bw{position:absolute;inset:0;animation:jpBall 2.8s cubic-bezier(.3,.1,.3,1) infinite}
.sc-pen .ball{position:absolute;left:10%;top:70%;margin:-15px 0 0 -15px;width:30px;height:30px;color:#fff;animation:jpBallS 2.8s cubic-bezier(.3,.1,.3,1) infinite}
.sc-wheel{background:rgba(4,40,40,.35);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.sc-wheel .wb{position:relative;width:min(58%,110px);aspect-ratio:1;margin-top:-18px}
.sc-wheel .wh{position:absolute;inset:0;border-radius:50%;border:3px solid #fff;background:conic-gradient(#E3B04B 0 60deg,#0F2B46 0 120deg,#5EEAD4 0 180deg,#F28C38 0 240deg,#fff 0 300deg,#2DD4BF 0 360deg);animation:jpWheel 4.2s cubic-bezier(.15,.7,.2,1) infinite}
.sc-wheel .pt{position:absolute;left:50%;top:-8px;margin-left:-7px;width:14px;height:14px;background:#fff;transform:rotate(45deg)}
@container (max-width:759px){ .js-scene{height:150px} .js-gate.l,.js-gate.r{transform:translateY(30px)} }

/* ЖҰМЫС ПАРАҒЫ + КӨРНЕКІЛІК */
.js-print{background:#fff}
.js-print .js-wrap{display:flex;flex-direction:column;gap:clamp(32px,4cqw,56px)}
.js-pr-txt{display:flex;flex-direction:column;gap:clamp(14px,1.6cqw,20px);max-width:720px}
.js-pr-txt .js-label{color:#0B7A70}
.js-pr-txt .js-h2{color:#0F2B46}
.js-pr-txt .js-p{color:#3D5165}
.js-pr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(40px,4cqw,64px);justify-items:center}
.js-printer{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center}
.js-pr-top{position:relative;width:100%;height:68px;border-radius:20px 20px 10px 10px;background:linear-gradient(180deg,#1C3D5C,#0F2B46);box-shadow:0 14px 30px rgba(15,43,70,.25)}
.js-pr-top b{position:absolute;right:20px;top:16px;width:9px;height:9px;border-radius:50%;animation:jpSoft 1.6s ease-in-out infinite}
.js-pr-top span{position:absolute;left:20px;top:12px;font-size:16px;font-weight:700;color:rgba(255,255,255,.85)}
.js-pr-top i{position:absolute;left:7%;right:7%;bottom:10px;height:6px;border-radius:3px;background:#06121F}
.js-pr-out{width:86%;overflow:hidden;margin-top:-12px;padding:0 12px 24px}
.js-pr-paper{background:#fff;border-radius:0 0 8px 8px;box-shadow:0 14px 28px rgba(15,43,70,.16),0 0 0 1px #E8EEF0;padding:20px;display:flex;flex-direction:column;gap:14px;transform:translateY(-101%)}
.js-print.is-in .js-pr-paper{animation:jpPrint 7s cubic-bezier(.4,0,.2,1) infinite}
.js-print.is-in .js-pr-paper.two{animation:jpPrint 7s cubic-bezier(.4,0,.2,1) 1.6s infinite both}
.js-pr-paper .hd{display:flex;justify-content:space-between;gap:8px;font-size:16px;font-weight:800;color:#0F2B46}
.js-pr-paper .hd span:last-child{color:#0B7A70}
.js-pr-paper .q{font-size:16px;line-height:1.5;color:#1F3448}
.js-pr-paper i{height:1px;background:#C9D3D8}
.js-pr-paper.two{padding:14px;gap:12px}
.js-pr-img{height:200px;border-radius:6px;background:repeating-linear-gradient(135deg,#E6F4F1 0 10px,#D5ECE7 10px 20px);display:flex;align-items:center;justify-content:center}
.js-pr-img span{font-size:14px;color:#0B6F68;background:rgba(255,255,255,.85);padding:4px 8px;border-radius:4px}
.js-pr-paper .t2{font-size:18px;font-weight:800;color:#0F2B46}
.js-pr-paper .m2{font-size:16px;color:#3D5165}

/* ТАҒЫ БАР */
.js-lenta{background:#fff;padding-top:0}
.js-lenta .js-wrap{display:flex;flex-direction:column;gap:clamp(24px,3cqw,36px)}
.js-lenta .js-label{color:#0B7A70}
.js-l-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(14px,1.6cqw,20px)}
.js-l-card{border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:14px}
.js-l-card.a{background:#0F2B46;color:#fff}
.js-l-card.b{background:#FBF8F1;border:1px solid #EDE6D6}
.js-l-card.c{background:#E2F4F1}
.js-l-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.js-l-t{font-size:20px;font-weight:800}
.js-l-card.b .js-l-t,.js-l-card.c .js-l-t{color:#0F2B46}
.js-l-d{font-size:16px;line-height:1.5}
.js-l-card.a .js-l-d{color:rgba(255,255,255,.82)}
.js-l-card.b .js-l-d,.js-l-card.c .js-l-d{color:#3D5165}
.js-badge{flex:none;font-size:16px;font-weight:800;padding:4px 12px;border-radius:999px}
.js-badge.t{color:#04201D;background:#2DD4BF}
.js-badge.s{color:#8A5300;background:#FFF1D9;animation:jpSoft 2.4s ease-in-out infinite}
.js-timer{font-weight:800;font-size:48px;line-height:1;color:#5EEAD4;font-variant-numeric:tabular-nums}
.js-l-vid{position:relative;height:120px;border-radius:14px;background:repeating-linear-gradient(135deg,#EFE8D8 0 10px,#E7DFCD 10px 20px);overflow:hidden;display:flex;align-items:center;justify-content:center}
.js-l-vid .pl{width:52px;height:52px;border-radius:50%;background:#0F2B46;color:#fff;display:flex;align-items:center;justify-content:center}
.js-l-vid .pl .js-ic{font-size:30px}
.js-l-vid i{position:absolute;left:0;bottom:0;height:5px;width:100%;background:#0D9488;transform-origin:0 50%;animation:jpPlay 8s linear infinite}
.js-l-film{height:120px;border-radius:14px;background:#0F2B46;background-image:repeating-linear-gradient(90deg,#F3F7F6 0 10px,transparent 10px 22px),repeating-linear-gradient(90deg,#F3F7F6 0 10px,transparent 10px 22px);background-size:100% 8px,100% 8px;background-position:0 8px,0 calc(100% - 8px);background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;color:#5EEAD4}
.js-l-film .js-ic{font-size:40px}

/* ШАҢЫРАҚ + FOOTER */
.js-final{position:relative;background:#04101B;padding:clamp(16px,3cqw,48px) clamp(12px,3cqw,40px) 0}
.js-fin-box{position:relative;max-width:1320px;margin:0 auto;min-height:max(480px,82vh);border-radius:clamp(24px,3cqw,40px);overflow:hidden;background:radial-gradient(circle at 50% 50%,#0E3A4A 0%,#071A2B 60%,#04101B 100%);clip-path:circle(14% at 50% 50%);transition:clip-path 1.8s cubic-bezier(.65,0,.25,1);display:flex;align-items:center;justify-content:center}
.js-final.is-in .js-fin-box{clip-path:circle(80% at 50% 50%)}
.js-shan{position:absolute;left:50%;top:50%;width:1100px;height:1100px;transform:translate(-50%,-50%);overflow:visible}
.js-shan g{animation:jpSpin 140s linear infinite;transform-origin:0 0}
.js-fin-shade{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(4,16,27,.85) 0%,rgba(4,16,27,.55) 30%,transparent 60%)}
.js-fin-txt{position:relative;z-index:2;max-width:760px;padding:clamp(56px,7cqw,96px) 20px;display:flex;flex-direction:column;align-items:center;gap:clamp(24px,3cqw,36px);text-align:center;opacity:0;transform:translateY(16px);transition:opacity .8s ease 1.1s,transform 1s cubic-bezier(.2,.8,.2,1) 1.1s}
.js-final.is-in .js-fin-txt{opacity:1;transform:none}
.js-fin-txt h2{margin:0;font-weight:800;font-size:clamp(26px,4.2cqw,58px);line-height:1.15;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.js-root a.js-cta.gold{background:linear-gradient(135deg,#F0C46A,#E3B04B);color:#1A1405;box-shadow:0 12px 34px rgba(227,176,75,.3);padding:0 36px}
.js-root a.js-cta.gold:hover{color:#1A1405}
.js-cta.gold::before{background:rgba(227,176,75,.45)}
.js-cta.gold .js-shn::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.js-foot{max-width:1320px;margin:0 auto;padding:28px 8px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;font-size:16px}
.js-foot>span{color:rgba(243,247,246,.7)}
.js-root a.js-wa{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:#5EEAD4}
.js-root a.js-wa:hover{color:#fff}
.js-wa .js-ic{font-size:22px}
@container (max-width:759px){ .js-shan{width:720px;height:720px} .js-root a.js-cta.gold{width:100%} }

/* Телефондағы төменгі «Тегін тіркелу» */
.js-sticky{display:none;position:sticky;bottom:0;z-index:50;padding:10px 16px 14px;pointer-events:none;transform:translateY(130%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.js-sticky.on{transform:none}
.js-root a.js-sticky-a{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;border-radius:16px;background:#0D9488;color:#fff;font-size:18px;font-weight:800;box-shadow:0 12px 30px rgba(4,16,27,.35)}
.js-sticky-a .js-ic{font-size:22px}
@container (max-width:759px){ .js-sticky{display:block} }

@media (prefers-reduced-motion: reduce){
  .js-root *,.js-root *::before,.js-root *::after{animation:none!important;transition:none!important}
}