/* UMUMIY USLUBLAR — barcha sahifalarda ishlatiladi (header, footer, tugmalar, modal) */
:root{--ink:#06093a;--navy:#181b78;--blue:#0194fe;--btn:#0782e8;--blue-d:#0a6cc4;--sky:#5cc0ff;--paper:#eff4fd;--line:#dde4f2;--mute:#55607f;--head:'Montserrat',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.12;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0}
ul{list-style:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
i[data-ic]{display:inline-flex;font-style:normal}
.ic{width:24px;height:24px}

/* progress */
#bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:linear-gradient(90deg,var(--blue),var(--sky));transform:scaleX(0);transform-origin:left}

/* preloader */
#pre{position:fixed;inset:0;background:var(--ink);z-index:999;display:grid;place-items:center;transition:transform 1.05s cubic-bezier(.77,0,.18,1)}
#pre.go{transform:translateY(-100%)}
.pm{text-align:center}
.pm img{width:min(430px,72vw);height:auto;display:block;clip-path:inset(0 100% 0 0);animation:wipe 1.5s .15s cubic-bezier(.7,0,.2,1) forwards}
.pl{display:block;height:2px;background:linear-gradient(90deg,var(--blue),var(--sky));margin:26px auto 0;width:0;animation:grow 1.6s cubic-bezier(.7,0,.2,1) forwards;border-radius:2px}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes grow{to{width:min(280px,60vw)}}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:100;color:#fff;transition:background .4s,box-shadow .4s,color .4s}
header.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);color:var(--ink)}
.bar{display:flex;align-items:center;justify-content:space-between;height:78px;gap:16px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:64px;width:auto;display:block;transition:transform .4s}
.logo:hover img{transform:scale(1.04)}
.logo .l-dark{display:none}
header.solid .l-dark{display:block}header.solid .l-light{display:none}
nav{display:flex;gap:2px}
nav a{color:rgba(255,255,255,.8);padding:8px 13px;font-size:.93rem;font-weight:500;position:relative;transition:color .3s}
nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s}
nav a:hover,nav a.on{color:#fff}
nav a:hover::after,nav a.on::after{transform:scaleX(1)}
header.solid nav a{color:#454f78}
header.solid nav a:hover,header.solid nav a.on{color:var(--navy)}
.tools{display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;color:inherit;font-size:1.7rem;line-height:1}

/* language dropdown */
.dd{position:relative}
.dd-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);color:inherit;border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:6px 12px 6px 8px;font-weight:700;font-size:.82rem;letter-spacing:.04em;transition:.25s}
.dd-btn:hover{background:rgba(255,255,255,.22)}
header.solid .dd-btn{background:#fff;border-color:var(--line)}
header.solid .dd-btn:hover{border-color:var(--blue)}
.dd-btn svg.chev{width:14px;height:14px;transition:transform .3s}
.dd.open .chev{transform:rotate(180deg)}
.fl{width:24px;height:16px;border-radius:3px;overflow:hidden;display:inline-block;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.fl svg{width:100%;height:100%;display:block}
.dd-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:170px;background:#fff;color:var(--ink);border-radius:12px;padding:6px;box-shadow:0 20px 50px rgba(6,9,58,.25);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;font-weight:600;font-size:.92rem;transition:background .2s}
.dd-menu li:hover,.dd-menu li:focus-visible{background:var(--paper)}
.dd-menu li[aria-selected="true"]{color:var(--blue-d);background:#e2eeff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--btn);color:#fff;padding:15px 32px;border-radius:99px;font-weight:700;font-size:.95rem;transition:.3s;position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .7s}
.btn:hover::after{left:140%}
.btn:hover{background:var(--navy);transform:translateY(-2px);box-shadow:0 12px 26px rgba(7,130,232,.35)}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn.ghost:hover{background:rgba(255,255,255,.14);box-shadow:none}
.btn.line{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn.line:hover{background:var(--navy);color:#fff;box-shadow:none}
.btn.white{background:#fff;color:var(--navy)}
.btn.white:hover{background:var(--ink);color:#fff}
.btn.sm{padding:10px 20px;font-size:.88rem}

/* umumiy bo'limlar */
main{animation:fade .6s}
@keyframes fade{from{opacity:0}}
.phero{background:radial-gradient(circle at 80% 20%,#1a3fb0,transparent 55%),var(--ink);color:#fff;padding:176px 0 90px;position:relative;overflow:hidden}
.phero::before,.phero::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(92,192,255,.25)}
.phero::before{right:-140px;top:-140px;width:560px;height:560px;animation:spin 40s linear infinite}
.phero::after{right:40px;top:30px;width:240px;height:240px;border-style:dashed;animation:spin 28s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.phero h1{font-size:clamp(2.4rem,6vw,4.6rem);margin-bottom:16px;position:relative;z-index:1}
.phero p{max-width:600px;color:#aab6e0;font-size:1.1rem;position:relative;z-index:1}
.sec{padding:110px 0}
.sec.dark{background:linear-gradient(160deg,var(--navy),var(--ink));color:#fff}
.sec.paper{background:var(--paper)}
.head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.head h2,.big{font-size:clamp(2rem,4.2vw,3.3rem)}
.head p{color:var(--mute);max-width:440px}
.dark .head p{color:#aab6e0}
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.grid .rv:nth-child(3n+2),.feat .rv:nth-child(2),.steps .rv:nth-child(2){transition-delay:.12s}
.grid .rv:nth-child(3n),.feat .rv:nth-child(3),.steps .rv:nth-child(3){transition-delay:.24s}
.feat .rv:nth-child(4),.steps .rv:nth-child(4){transition-delay:.36s}

/* footer */
footer{background:var(--ink);color:#a3afd6;padding:84px 0 0;font-size:.93rem}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:44px;padding-bottom:52px}
.fg h4{color:#fff;font-size:1.05rem;margin-bottom:20px}
.fg ul{display:grid;gap:11px}
.fg li{display:flex;gap:12px;align-items:flex-start}
.fg li .ic{width:18px;height:18px;color:var(--sky);flex:none;margin-top:3px}
.fg a{transition:color .2s}.fg a:hover{color:#fff}
.fg .logo img{height:92px;margin-bottom:18px}
.fg p{max-width:340px}
.soc{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.soc a{padding:8px 16px;border:1px solid #262d7a;border-radius:99px;font-size:.82rem;transition:.25s}
.soc a:hover{border-color:var(--blue);background:rgba(1,148,254,.12)}
.reqs{border-top:1px solid #171c63;padding:24px 0;display:flex;flex-wrap:wrap;gap:8px 36px;font-size:.85rem}
.reqs b{color:#e3e8fa}
.fb{border-top:1px solid #171c63;padding:22px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.85rem}

/* modal */
.ov{position:fixed;inset:0;background:rgba(5,7,44,.7);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;z-index:300;opacity:0;visibility:hidden;transition:.3s}
.ov.on{opacity:1;visibility:visible}
.modal{background:#fff;width:100%;max-width:440px;border-radius:18px;padding:40px 36px 34px;transform:translateY(30px) scale(.97);transition:transform .5s cubic-bezier(.2,.8,.2,1);position:relative;border-top:4px solid var(--blue)}
.ov.on .modal{transform:none}
.x{position:absolute;top:12px;right:16px;background:none;font-size:1.7rem;color:var(--mute)}
.modal h3{font-size:1.7rem;margin-bottom:8px}
.modal .sub{color:var(--mute);margin-bottom:22px;font-size:.95rem}
.sel{display:inline-block;background:#e2eeff;color:var(--blue-d);font-weight:700;padding:3px 14px;border-radius:99px;font-size:.85rem;margin-bottom:18px}
label{display:block;font-weight:700;font-size:.85rem;margin-bottom:6px}
input{width:100%;padding:14px 16px;border:1.5px solid #cdd8e6;border-radius:10px;font:inherit;margin-bottom:18px;transition:.2s}
input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(1,148,254,.18)}
.modal .btn{width:100%}
.msg{margin-top:14px;text-align:center;font-weight:700;min-height:1.4em}
.msg.ok{color:#18a058}.msg.err{color:#d83a3a}

@media(max-width:900px){
 .burger{display:block}
 nav{position:absolute;top:78px;left:0;right:0;background:var(--ink);flex-direction:column;padding:10px 24px 24px;display:none}
 nav.open{display:flex}
 nav a,header.solid nav a{color:#ccd5f1}
 nav a:hover,nav a.on,header.solid nav a:hover,header.solid nav a.on{color:#fff}
 .head{grid-template-columns:1fr;gap:34px}
 .fg{grid-template-columns:1fr 1fr}
 .sec{padding:76px 0}
 .phero{padding:130px 0 60px}
}
@media(max-width:520px){.fg{grid-template-columns:1fr}.logo img{height:46px}.bar{height:68px}nav{top:68px}.modal{padding:34px 24px 26px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}