@font-face{font-family:"Atyp Text";src:local("Atyp Text"),url(fonts/AtypText-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atyp Text";src:local("Atyp Text Medium"),url(fonts/AtypText-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Atyp Text";src:local("Atyp Text Semibold"),url(fonts/AtypText-Semibold.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--bg:#030a1c;--bg2:#0a1630;--card:#0c1a3a;--pill:#0f2247;--txt:#fff;--mut:#7f8ba6;--acc:#6b9bff;--acc2:#5a86f0;--bar:#0a1734;--chip:#0d1c3c;--chipt:#8fb0ff;--fade:#030a1c}
.light{--bg:#fff;--bg2:#e8effd;--card:#1c2f5e;--pill:#1c2f5e;--txt:#1c2f5e;--mut:#8a93a8;--acc:#6b9bff;--acc2:#5a86f0;--bar:#ececf0;--chip:#e9e9ee;--chipt:#1c2f5e;--fade:#fff}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font:400 16px/1.4 "Atyp Text",Inter,system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.hero{position:relative;text-align:center;padding-top:10px;overflow:hidden}
.hero .ph{display:block;margin:0 auto;width:min(560px,100%);height:auto;mask-image:linear-gradient(#000 70%,transparent);-webkit-mask-image:linear-gradient(#000 70%,transparent)}
h1{font-weight:600;font-size:clamp(25px,3.1vw,36px);line-height:1.22;max-width:860px;margin:-28px auto 18px}
h2{font-weight:600;font-size:clamp(23px,2.8vw,30px);line-height:1.25;text-align:center;margin-bottom:28px}
.hl{color:var(--acc)}.lead{color:var(--mut);max-width:640px;margin:0 auto 26px;font-size:15px}
.stats{display:flex;gap:10px 14px;justify-content:center;align-items:center;flex-wrap:wrap;background:var(--bar);border-radius:999px;padding:12px 22px;width:fit-content;max-width:100%;margin:0 auto 26px;font-size:13px;color:var(--mut)}
.stats b{background:var(--pill);color:var(--chipt);font-weight:600;padding:5px 12px;border-radius:999px;font-size:14px}
.light .stats b{color:#fff}.stats span{display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#fff;text-decoration:none;font-weight:500;font-size:14px;padding:13px 34px;border-radius:999px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px var(--acc)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#fff6 50%,transparent 65%);transform:translateX(-120%);animation:sh 4s infinite}
@keyframes sh{40%,100%{transform:translateX(120%)}}
.cta{text-align:center;margin-bottom:70px}
.sec{padding-top:30px}
.exp{display:flex;gap:16px;align-items:center;justify-content:center;margin-bottom:26px}
.exp img{width:min(440px,52%);aspect-ratio:1.78;object-fit:cover;border-radius:16px}
.quote{background:var(--card);color:#fff;border-radius:14px;padding:22px;width:min(330px,40%);font-size:14px;position:relative;line-height:1.45}
.quote i{display:block;margin-top:10px;color:var(--acc);font:700 40px/.6 Georgia}
.chips{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.chips span{background:var(--chip);color:var(--chipt);padding:9px 20px;border-radius:999px;font-size:12px}
.car{position:relative;margin-bottom:22px}
.track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 20px}
.track::-webkit-scrollbar{display:none}
.track img{height:150px;width:auto;border-radius:12px;scroll-snap-align:center;flex:none;background:var(--bg2)}
.rv .track{background:var(--bg2);padding:14px 20px}.rv .track img{height:160px}
.arr{display:flex;gap:10px;justify-content:center;margin:16px 0}
.arr button{width:36px;height:36px;border-radius:50%;border:0;background:var(--chip);color:var(--chipt);font-size:16px;cursor:pointer;transition:background .2s,transform .2s}
.arr button:hover{background:var(--acc);color:#fff;transform:scale(1.08)}
.join{background:var(--card);color:#fff;border-radius:18px;max-width:380px;margin:0 auto 70px;padding:0 24px 30px;text-align:center}
.join img{width:62px;height:62px;border-radius:50%;object-fit:cover;margin-top:-20px;border:0}
.join h3{font-size:17px;margin:14px 0 6px}.join p{font-size:11px;color:#8d99b8;margin-bottom:18px}
.join .top{padding-top:20px}
footer{padding:0 20px 40px;max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;font-size:12px}
footer b{color:var(--acc);display:block;margin-bottom:8px}footer small{display:block;width:100%;color:var(--mut);font-size:10px;line-height:1.5;max-width:560px}
footer a{color:inherit;margin-left:40px;text-decoration:underline;opacity:.8}footer a:first-child{text-decoration:none}
.rev{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.rev.in{opacity:1;transform:none}
.doc{max-width:820px;margin:0 auto;padding:50px 20px}.doc h1{text-align:left;margin:0 0 6px}.doc h2{text-align:left;font-size:20px;margin:30px 0 10px}
.doc p,.doc li{color:var(--mut);margin-bottom:10px;font-size:15px}.doc .dt{margin-bottom:26px}.doc ul{padding-left:20px}
.back{color:var(--acc);text-decoration:none;font-size:14px}
@media(max-width:700px){.exp{flex-direction:column}.exp img,.quote{width:100%}.stats{border-radius:22px;flex-direction:column;align-items:flex-start;padding:16px 20px;width:100%}
h1{margin-top:-20px;padding:0 6px}.hero .ph{width:78%}.track img{height:130px}footer a{margin:0 18px 0 0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rev{opacity:1;transform:none}}
/* ---- v2: ближе к макету ---- */
body{letter-spacing:-.005em}
body:not(.light){background:radial-gradient(900px 500px at 50% 0,#0d1f4a55,transparent 70%),#030a1c}
.hero{padding-top:0}
.hero .ph{width:min(760px,100%);mask-image:linear-gradient(#000 60%,transparent 98%);-webkit-mask-image:linear-gradient(#000 60%,transparent 98%)}
h1{font-size:clamp(26px,3.4vw,42px);line-height:1.2;letter-spacing:-.02em;margin:-70px auto 20px;position:relative;max-width:940px}
.lead{font-size:clamp(14px,1.35vw,17px);line-height:1.5;max-width:720px;margin-bottom:30px}
.stats{gap:12px 20px;padding:14px 28px;font-size:clamp(12px,1.1vw,14px);margin-bottom:30px}
.stats b{font-size:clamp(13px,1.2vw,15px);padding:6px 14px;background:var(--pill)}
body:not(.light) .stats{background:#0a1633;border:1px solid #13244d}
body:not(.light) .stats b{background:#10285a}
.btn{font-size:14px;padding:15px 44px;min-width:250px;justify-content:center}
h2{font-size:clamp(24px,2.7vw,34px);letter-spacing:-.015em;margin-bottom:34px}
.exp{gap:24px;margin-bottom:30px}
.exp img{width:min(520px,54%);aspect-ratio:1.6;border-radius:22px;box-shadow:0 20px 50px -20px #0008}
.quote{width:min(380px,40%);border-radius:18px;padding:26px 28px;font-size:16px;line-height:1.5;align-self:center}
body:not(.light) .quote{background:#0c1c42;border:1px solid #16295a}
.quote i{text-align:left;margin-top:14px;font-size:46px}
.chips span{font-size:13px;padding:11px 24px}
body:not(.light) .chips span{background:#0c1a3a;border:1px solid #15285a}
.car{margin:10px 0 0}
.track{gap:20px;padding:6px max(20px,calc(50% - 560px));cursor:grab;scroll-behavior:smooth}
.track.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.track img{height:clamp(170px,19vw,230px);border-radius:16px;user-select:none;-webkit-user-drag:none;transition:transform .35s}
.track img:hover{transform:translateY(-4px)}
.rv{background:var(--bg2);padding:26px 0 6px;margin-bottom:10px}.rv .track{background:none;padding-top:0}
body:not(.light) .rv{background:#050f26}
.rv .track img{height:clamp(190px,21vw,260px)}
.arr button{width:40px;height:40px;font-size:18px}
body:not(.light) .arr button{background:#0c1a3a;border:1px solid #15285a}
.join{max-width:440px;padding:0 28px 34px;border-radius:22px;margin-top:10px}
body:not(.light) .join{background:#0c1a3a;border:1px solid #15285a}
.join img{width:72px;height:72px;margin-top:-26px}
.join h3{font-size:19px}.join p{font-size:12px}
@media(max-width:700px){h1{font-size:26px;margin-top:-40px}.exp img{aspect-ratio:1.5}.stats{border-radius:26px}.btn{min-width:0;width:100%}.track img{height:150px}.rv .track img{height:180px}}
/* ---- v3 ---- */
.exp img{flex:0 1 520px;width:auto;max-width:54%;min-width:0}
.quote{flex:0 0 min(380px,40%);width:auto;min-width:260px}
.track{scroll-snap-type:none}
.join{position:relative;isolation:isolate;box-shadow:0 0 70px -10px rgba(107,155,255,.35),0 0 0 1px rgba(107,155,255,.12)}
.join::before{content:"";position:absolute;inset:-40px;z-index:-1;background:radial-gradient(closest-side,rgba(107,155,255,.35),transparent 75%);filter:blur(24px);animation:glow 5s ease-in-out infinite}
.join img{box-shadow:0 0 0 3px rgba(107,155,255,.25),0 0 28px rgba(107,155,255,.55)}
.light .join::before{background:radial-gradient(closest-side,rgba(107,155,255,.45),transparent 75%)}
@keyframes glow{50%{opacity:.6;transform:scale(1.04)}}
@media(max-width:700px){.exp img{max-width:100%;flex:none;width:100%}.quote{flex:none;width:100%;min-width:0}}
/* ---- v4: блок «Присоединяйтесь» как в референсе ---- */
.jsec{position:relative}
.jsec::before{content:"";position:absolute;left:50%;top:58%;width:min(1000px,150vw);height:560px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(62,102,190,.26),rgba(62,102,190,.1) 55%,transparent);z-index:-1;pointer-events:none}
.light .jsec::before{background:radial-gradient(closest-side,rgba(107,155,255,.3),rgba(107,155,255,.1) 55%,transparent)}
.jsec h2{font-size:clamp(24px,2.3vw,28px);font-weight:500;margin-bottom:26px;color:#e6eeff}
.light .jsec h2{color:var(--txt)}
.join{max-width:384px;padding:24px 24px 24px;border-radius:26px;box-shadow:none;isolation:auto;margin-bottom:90px}
.join::before{display:none}
.join .top{padding:0}
.join img{width:80px;height:80px;margin:0;box-shadow:none}
.join h3{font-size:18px;font-weight:500;margin:14px 0 6px;color:#e8eef8}
.join p{font-size:12px;color:#6f7889;margin-bottom:18px}
.join .btn{padding:11px 30px;min-width:160px;font-size:13px}
body:not(.light) .join{background:rgba(27,32,41,.88);border:1px solid #2b323d}
.light .join p{color:#8d99b8}
/* ---- v5: контраст и тексты MOB/WEB ---- */
:root{--mut:#8b97b3}
.light{--mut:#5a647c;--acc:#5a88f2}
.light .lead{color:#56607a}
.light .stats{color:#3f4a66;background:#e9e9ef}
.light .btn,.light .arr button:hover{color:#fff}
.light .hl{color:#5a88f2}
.light .hero .ph{mask-image:linear-gradient(#000 55%,transparent 92%);-webkit-mask-image:linear-gradient(#000 55%,transparent 92%)}
.light h1{margin-top:-14px}
.light footer small,.light .doc p{color:#5a647c}
.light .chips span{color:#1c2f5e;background:#e6e8f0}
.mob{display:none}
@media(max-width:700px){.dsk{display:none}.mob{display:inline}h1 br,.lead br,h2 br{display:none}.light h1{margin-top:-6px}}