/* ЖК AUGUST — стили. Подключить в  или вставить в  */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Oswald:wght@200;300;400;500;600;700&display=swap');


@keyframes augTwinkle { from { opacity:.10; transform:scale(.85); } to { opacity:.72; transform:scale(1.08); } }
    @keyframes augKen { 0% { transform:scale(1.06) translate(0,0); } 100% { transform:scale(1.12) translate(-1.2%,-1%); } }
    @keyframes augUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
    @keyframes augBob { from { transform:translateY(0); } to { transform:translateY(8px); } }
    .aug-link:hover { color:#fff !important; }
    .aug-cta:hover { background:rgba(91,157,255,.24) !important; border-color:rgba(91,157,255,.75) !important; }
    .aug-ghost:hover { background:rgba(255,255,255,.12) !important; }
    .aug-pill:hover { background:#5B9DFF !important; }
@keyframes augDash { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
    @keyframes augPill { 0% { opacity:0; transform:translate(-50%,-50%) scale(.7); } 60% { opacity:1; } 100% { opacity:1; transform:translate(-50%,-50%) scale(1); } }
    @keyframes augGrp  { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
    @keyframes augFade { to { opacity:0; } }

    .rpt { position:absolute; left:0; width:100%; height:0; }
    .rnum { position:absolute; top:50%; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; padding:10px 22px; border-radius:16px; border:2px solid #244AEB; background:#fff; color:#244AEB; font-family:'Manrope',sans-serif; font-weight:700; font-size:25px; line-height:1; transform:translate(-50%,-50%) scale(1); opacity:1; z-index:3; animation:augPill .6s cubic-bezier(.34,1.56,.5,1) both; }
    .rgroup { position:absolute; top:50%; display:flex; align-items:center; gap:30px; opacity:1; animation:augGrp .6s cubic-bezier(.2,.7,.2,1) both; }
    .rcard { flex:none; width:300px; height:200px; border-radius:22px; overflow:hidden; position:relative; border:1px solid rgba(36,74,235,.16); background:#eef2fb; }
    .rtxt { width:280px; }
    .rname { font-family:'Manrope',sans-serif; font-weight:700; font-size:27px; line-height:1.04; letter-spacing:-.01em; color:#16264d; }
    .rq { font-weight:500; font-size:14px; color:#5a6b8c; margin-top:10px; line-height:1.45; }

    .rpt.left  .rnum { left:calc(50% - 60px); }
    .rpt.right .rnum { left:calc(50% + 60px); }
    .rpt.left  .rgroup { right:calc(50% + 135px); flex-direction:row-reverse; text-align:right; }
    .rpt.right .rgroup { left:calc(50% + 135px); flex-direction:row; text-align:left; }

    .rdraw { fill:none; stroke:#244AEB; stroke-width:3; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; animation:augDash 3.6s cubic-bezier(.45,.05,.25,1) both; }
    .rcomet { animation:augFade .5s 3.5s forwards; }

    .rfoot { margin-top:48px; display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; opacity:1; animation:augGrp .6s cubic-bezier(.2,.7,.2,1) 3.9s both; }
    .rcta:hover { background:#1a35c2; }
@keyframes fmtUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
    .fmt-item { display:flex; gap:18px; align-items:flex-start; }
    .fmt-num { flex:none; width:40px; height:40px; border-radius:12px; border:1.5px solid rgba(36,74,235,.35); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#244AEB; }
@keyframes invUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
    @keyframes engScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
    .dyardcard { flex:1; min-width:0; border:1px solid rgba(36,74,235,.14); border-radius:20px; overflow:hidden; background:#fff; }
    .dengtrack { display:flex; gap:16px; width:max-content; animation:engScroll 40s linear infinite; padding:0 24px; }
    .dengtrack:hover { animation-play-state:paused; }
    .dengcard { flex:none; width:300px; box-sizing:border-box; display:flex; align-items:center; gap:16px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(255,255,255,.05); padding:18px 20px; }
    .dengico { flex:none; width:50px; height:50px; border-radius:13px; border:1.5px solid rgba(91,157,255,.5); display:flex; align-items:center; justify-content:center; }
    .dengcap { font-size:15px; line-height:1.32; color:rgba(255,255,255,.85); }
    .dengstrip { background:rgba(255,255,255,.035); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); padding:22px 0; }
    .dbuycard { flex:1; min-width:0; height:330px; box-sizing:border-box; position:relative; }
    .dbuyface { position:absolute; inset:0; border-radius:20px; background:linear-gradient(158deg, #16356f 0%, #0c1f49 100%); border:1px solid rgba(91,157,255,.22); -webkit-mask:radial-gradient(circle 40px at calc(100% - 44px) calc(100% - 44px), transparent 0 39px, #000 39.5px); mask:radial-gradient(circle 40px at calc(100% - 44px) calc(100% - 44px), transparent 0 39px, #000 39.5px); }
    .dbuybadge { position:absolute; top:26px; left:26px; display:inline-flex; align-items:center; height:44px; padding:0 22px; border-radius:999px; background:#fff; color:#0a1430; font-weight:700; font-size:16px; }
    .dbuytext { position:absolute; left:26px; right:90px; bottom:30px; margin:0; font-size:16px; line-height:1.45; color:rgba(255,255,255,.78); }
    .dbuyarrow { position:absolute; right:16px; bottom:16px; width:56px; height:56px; border-radius:50%; background:rgba(91,157,255,.14); border:1.5px solid rgba(91,157,255,.6); display:flex; align-items:center; justify-content:center; color:#5B9DFF; font-size:23px; transition:background .15s; }
    .dbuycard:hover .dbuyarrow { background:rgba(91,157,255,.28); }
    .dlinput { width:100%; box-sizing:border-box; height:66px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); padding:0 24px; font-family:'Manrope',sans-serif; font-size:18px; color:#fff; outline:none; }
    .dlinput::placeholder { color:rgba(255,255,255,.4); }
    .dlinput:focus { border-color:rgba(91,157,255,.6); }
    .dlbtn { display:flex; align-items:center; justify-content:center; height:64px; border-radius:16px; background:#244AEB; color:#fff; font-weight:700; font-size:16px; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; border:0; cursor:pointer; transition:filter .15s; }
    .dlbtn:hover { filter:brightness(1.12); }
    .dfnav:hover { color:#fff !important; }
  

    @keyframes augTwinkle { from { opacity:.10; transform:scale(.85); } to { opacity:.72; transform:scale(1.08); } }
    @keyframes augKenM { 0% { transform:scale(1.05) translate(0,0); } 100% { transform:scale(1.1) translate(-1%,-1%); } }
    @keyframes augUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
    .augm-fill:active { filter:brightness(1.12); }
    .augm-out:active { background:rgba(91,157,255,.16) !important; }
    .augm-round:active { background:rgba(255,255,255,.12) !important; }
    @keyframes mDash { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
    @keyframes mComet { 0% { top:0; opacity:0; } 6% { opacity:1; } 92% { opacity:1; } 100% { top:calc(100% - 30px); opacity:0; } }
    @keyframes mUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
    @keyframes mGrp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
    @keyframes mPop { 0% { opacity:0; transform:scale(.3); } 70% { opacity:1; } 100% { opacity:1; transform:scale(1); } }
    /* default = visible (safety: page never blank if JS fails) */
    .mUp { opacity:1; }
    .mstage { position:relative; width:358px; margin:4px auto 0; }
    .rsec { box-sizing:border-box; }
    .mtile { position:absolute; width:152px; border:1px solid rgba(36,74,235,.14); border-radius:18px; overflow:hidden; background:#eef2fb; opacity:1; }
    .mtimg { position:relative; height:98px; }
    .mtbody { padding:11px 12px 13px; }
    .mtname { font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; font-size:14px; line-height:1.06; color:#16264d; }
    .mtq { margin-top:5px; font-size:11px; line-height:1.4; color:#5a6b8c; }
    .mpill { position:absolute; left:179px; transform:translate(-50%,-50%); display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; padding:6px 13px; border-radius:11px; border:2px solid #244AEB; background:#fff; color:#244AEB; font-family:'Oswald',sans-serif; font-weight:700; font-size:13px; line-height:1; z-index:3; opacity:1; }
    .mroutebg { fill:none; stroke:rgba(36,74,235,.18); stroke-width:2; stroke-dasharray:5 8; stroke-linecap:round; }
    .mroute { fill:none; stroke:#244AEB; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }
    .rsec.dark { color:#fff; }
    .rsec.dark .mtile { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); }
    .rsec.dark .mtname { color:#fff; }
    .rsec.dark .mtq { color:rgba(255,255,255,.6); }
    .rsec.dark .mpill { background:#0a1430; border-color:#5B9DFF; color:#fff; }
    .rsec.dark .mroutebg { stroke:rgba(255,255,255,.16); }
    .rsec.dark .mroute { stroke:#5B9DFF; }
    @keyframes engScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
    .engtrack { display:flex; gap:12px; width:max-content; animation:engScroll 32s linear infinite; padding:18px 20px; }
    .engtrack:hover { animation-play-state:paused; }
    .engcard { flex:none; width:248px; box-sizing:border-box; display:flex; align-items:center; gap:13px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.05); padding:13px 15px; }
    .engico { flex:none; width:42px; height:42px; border-radius:11px; border:1.5px solid rgba(91,157,255,.5); display:flex; align-items:center; justify-content:center; }
    .engcap { font-size:13.5px; line-height:1.32; color:rgba(255,255,255,.82); }
    .engstrip { background:rgba(255,255,255,.035); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
    .buyrow { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:0 20px 6px; scrollbar-width:none; }
    .buyrow::-webkit-scrollbar { display:none; }
    .buycard { flex:none; width:286px; height:300px; box-sizing:border-box; scroll-snap-align:start; position:relative; }
    .buyface { position:absolute; inset:0; border-radius:18px; background:linear-gradient(158deg, #16356f 0%, #0c1f49 100%); border:1px solid rgba(91,157,255,.22); -webkit-mask:radial-gradient(circle 38px at calc(100% - 40px) calc(100% - 40px), transparent 0 37px, #000 37.5px); mask:radial-gradient(circle 38px at calc(100% - 40px) calc(100% - 40px), transparent 0 37px, #000 37.5px); }
    .buybadge { position:absolute; top:24px; left:24px; display:inline-flex; align-items:center; height:42px; padding:0 20px; border-radius:999px; background:#fff; color:#0a1430; font-weight:700; font-size:15px; }
    .buytext { position:absolute; left:24px; right:84px; bottom:28px; margin:0; font-size:15px; line-height:1.45; color:rgba(255,255,255,.78); }
    .buyarrow { position:absolute; right:14px; bottom:14px; width:52px; height:52px; border-radius:50%; background:rgba(91,157,255,.14); border:1.5px solid rgba(91,157,255,.6); display:flex; align-items:center; justify-content:center; color:#5B9DFF; font-size:21px; transition:background .15s; }
    .buycard:active .buyarrow { background:rgba(91,157,255,.18); }
    .mcta:active { filter:brightness(1.1); }
    .leadinput { width:100%; box-sizing:border-box; height:64px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); padding:0 22px; font-family:'Manrope',sans-serif; font-size:18px; color:#fff; outline:none; }
    .leadinput::placeholder { color:rgba(255,255,255,.4); }
    .leadinput:focus { border-color:rgba(91,157,255,.6); }
    .leadbtn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; box-sizing:border-box; height:62px; border-radius:16px; background:#244AEB; color:#fff; font-weight:700; font-size:16px; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; border:0; cursor:pointer; transition:filter .15s; }
    .leadbtn:active { filter:brightness(1.12); }
    .leadbox { width:24px; height:24px; flex:none; border-radius:7px; border:1.5px solid rgba(255,255,255,.4); margin-top:1px; }
    /* JS active → hide until the section scrolls into view */
    .js-reveal .mUp { opacity:0; }
    .js-reveal .mtile { opacity:0; }
    .js-reveal .mpill { opacity:0; }
    .js-reveal .mroute { stroke-dashoffset:1; }
    /* reveal when the section enters */
    .js-reveal .rsec.in .mUp { animation:mUp .7s cubic-bezier(.2,.7,.2,1) both; }
    .js-reveal .rsec.in .mtile { animation:mGrp .6s cubic-bezier(.2,.7,.2,1) both; }
    .js-reveal .rsec.in .mpill { animation:mPop .5s cubic-bezier(.34,1.56,.5,1) both; }
    .js-reveal .rsec.in .mroute { animation:mDash 2.8s cubic-bezier(.45,.05,.25,1) both; }
  

    #august-tilda{margin:0 auto;}
    .aug-deskwrap{width:100%;overflow:hidden;background:#0a1430;}
    .aug-desk{width:1440px;transform-origin:top left;}
    .aug-mobwrap{width:100%;max-width:480px;margin:0 auto;position:relative;background:#0a1430;}
    @media (max-width:759px){ .aug-deskwrap{display:none;} }
    @media (min-width:760px){ .aug-mobwrap{display:none;} }