:root{
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --bg:#eaf3f4; --surface:#ffffff; --surface-2:#eef6f7;
  --ink:#141a21; --muted:#586573; --faint:#8b96a2; --line:#dde8ea;
  --panel:#0c5a6e; --panel-2:#0a4a5b; --panel-ink:#eef6f8;
  --panel-muted:#a9d2da; --panel-line:rgba(255,255,255,.14);
  --accent:#ff7a2f; --accent-2:#ff9a5c; --accent-deep:#e85f14;
  --accent-soft:#fff2e9; --on-accent:#1c1204;
  --teal:#0e7490; --teal-deep:#0c5a6e; --teal-soft:#e3f1f3;
  --ok:#18a558;
  --shadow:0 1px 2px rgba(16,22,30,.05), 0 18px 40px -22px rgba(16,22,30,.28);
  --shadow-lg:0 30px 70px -30px rgba(16,22,30,.5);
  --r:18px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#e6f1f2; --surface:#ffffff; --surface-2:#edf6f7;
    --ink:#141a21; --muted:#586573; --faint:#8b96a2; --line:#dde8ea;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%; overflow-x:hidden}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;}
.wrap{max-width:1120px; margin:0 auto; padding:0 22px}
section{padding:76px 0}
h1,h2,h3{margin:0; letter-spacing:-.022em; text-wrap:balance; line-height:1.1}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.amber{color:var(--accent)}

.eyebrow{font-size:12.5px; font-weight:750; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:9px}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--accent); border-radius:2px}
.kicker{font-size:13px; font-weight:750; letter-spacing:.15em; text-transform:uppercase; color:var(--teal)}
.lead{font-size:19px; color:var(--muted); max-width:60ch}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:680; font-size:15.5px;
  border-radius:12px; padding:13px 22px; cursor:pointer; border:1px solid transparent; font-family:inherit;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease}
.btn.primary{background:var(--accent); color:var(--on-accent); box-shadow:0 8px 22px -8px rgba(255,122,47,.7)}
.btn.primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(255,122,47,.85)}
.btn.ghost{background:transparent; color:var(--panel-ink); border-color:var(--panel-line)}
.btn.ghost:hover{border-color:var(--accent); color:#fff}
.btn.outline{background:var(--surface); color:var(--ink); border-color:var(--line)}
.btn.outline:hover{border-color:var(--accent); color:var(--accent)}
.btn[disabled]{opacity:.6; cursor:not-allowed; transform:none}

.nav{position:sticky; top:0; z-index:40; background:rgba(11,84,104,.95); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--panel-line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px}
.brand{display:flex; align-items:center; gap:11px; font-weight:750; letter-spacing:-.01em; font-size:17px; color:#fff}
.brand .mk{width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--accent),var(--accent-deep)); color:#fff; font-weight:800; font-size:16px}
.brand small{display:block; font-weight:500; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--panel-muted)}
.nav-links{display:flex; gap:26px; font-size:14.5px; color:var(--panel-muted); font-weight:600}
.nav-links a:hover{color:#fff}
.nav-cta{display:flex; align-items:center; gap:10px}
.nav-cta .login{font-size:14.5px; font-weight:640; color:var(--panel-muted)}
.nav-cta .login:hover{color:#fff}
.nav .btn{padding:9px 16px; font-size:14.5px}
.lang-sw{position:relative; display:inline-block}
.lang-cur{display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:12.5px;
  font-weight:730; color:var(--panel-muted); background:transparent;
  border:1px solid var(--panel-line); border-radius:9px; padding:6px 9px; cursor:pointer;
  line-height:1; letter-spacing:.02em; transition:background .15s, color .15s, border-color .15s}
.lang-cur svg{flex:none; opacity:.85; transition:transform .35s}
.lang-cur:hover{color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.34)}
.lang-cur:hover svg{transform:rotate(20deg)}
.lang-sw.ochiq .lang-cur{color:#fff; background:rgba(255,255,255,.14)}

.lang-menu{position:absolute; right:0; top:calc(100% + 6px); min-width:170px; z-index:60;
  background:var(--panel); border:1px solid var(--panel-line); border-radius:11px; padding:5px;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  opacity:0; visibility:hidden; transform:translateY(-5px); transition:opacity .14s, transform .14s, visibility .14s}
.lang-sw.ochiq .lang-menu{opacity:1; visibility:visible; transform:translateY(0)}
.lang-menu button{display:block; width:100%; text-align:left; font-family:inherit; font-size:13px;
  font-weight:640; color:var(--panel-muted); background:transparent; border:0; border-radius:8px;
  padding:8px 10px; cursor:pointer; line-height:1.2; white-space:nowrap; transition:background .13s, color .13s}
.lang-menu button:hover, .lang-menu button:focus-visible{background:rgba(255,255,255,.10); color:#fff}
.lang-menu button.on{background:var(--accent); color:var(--on-accent)}

.hero{position:relative; background:linear-gradient(158deg,#0e7490,#0c5a6e 55%,#0d4a5c); color:var(--panel-ink); overflow:hidden; padding:66px 0 84px}
.hero::before{content:""; position:absolute; width:620px; height:620px; right:-190px; top:-250px;
  background:radial-gradient(circle at center, rgba(255,138,74,.14), rgba(255,138,74,0) 60%); animation:pulse 7s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.75; transform:scale(1)}50%{opacity:1; transform:scale(1.08)}}
.hero .wrap{position:relative; z-index:2}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center}
.hero h1{font-size:clamp(33px,5vw,56px); font-weight:800; color:#fff}
.hero .lead{color:var(--panel-muted); margin-top:20px; font-size:19px}
.hero-cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}
.hero-note{margin-top:16px; font-size:13.5px; color:var(--panel-muted); display:flex; gap:18px; flex-wrap:wrap}
.hero-note span{display:inline-flex; align-items:center; gap:6px}
.hero-note b{color:var(--accent); font-weight:700}
.stats{display:flex; gap:34px; margin-top:42px; flex-wrap:wrap}
.stat .n{font-size:29px; font-weight:800; letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums}
.stat .l{font-size:13px; color:var(--panel-muted); margin-top:2px}

.device{background:linear-gradient(160deg,#1b2430,#111821); border:1px solid var(--panel-line);
  border-radius:20px; padding:13px; box-shadow:var(--shadow-lg); animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.dev-bar{display:flex; align-items:center; gap:7px; padding:3px 5px 11px}
.dev-bar i{width:10px;height:10px;border-radius:50%;background:#39424e;display:inline-block}
.dev-url{margin-left:10px; font-size:11.5px; color:var(--panel-muted); background:#0c1219;
  border:1px solid var(--panel-line); border-radius:7px; padding:4px 12px; flex:1; text-align:center}
.dev-hero{background:linear-gradient(125deg,#dd5f10,#f2751d); border-radius:12px; padding:14px 16px; color:#fff}
.dev-hero b{font-size:15px; font-weight:750} .dev-hero span{font-size:11.5px; opacity:.92; display:block; margin-top:2px}
.dev-kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:11px}
.kpi{background:#0e151d; border:1px solid var(--panel-line); border-radius:10px; padding:10px 11px}
.kpi .t{font-size:10px; color:var(--panel-muted); text-transform:uppercase; letter-spacing:.08em}
.kpi .v{font-size:15px; font-weight:750; color:#fff; margin-top:3px; font-variant-numeric:tabular-nums}
.kpi .v.up{color:#4ade80} .kpi .v.warn{color:var(--accent)}
.dev-rows{margin-top:10px; display:flex; flex-direction:column; gap:7px}
.row{display:flex; align-items:center; gap:9px; background:#0e151d; border:1px solid var(--panel-line); border-radius:9px; padding:8px 10px}
.row .bar{height:6px; border-radius:4px; background:#2a3644; flex:1}
.row .bar.a{background:linear-gradient(90deg,var(--accent),rgba(255,122,47,.25)); max-width:78%}
.row .bar.b{max-width:54%} .row .bar.c{max-width:38%}
.row .n{font-size:11px; color:var(--panel-muted); font-variant-numeric:tabular-nums; min-width:52px; text-align:right}

.trust{background:var(--surface); border-block:1px solid var(--line); padding:22px 0}
.trust .wrap{display:flex; flex-wrap:wrap; gap:14px 34px; justify-content:center; font-size:14.5px; font-weight:620; color:var(--muted)}
.trust span{display:inline-flex; align-items:center; gap:8px}
.trust b{color:var(--teal); font-weight:800}

.sec-head{max-width:64ch}
.sec-head.center{margin:0 auto; text-align:center}
.sec-head h2{font-size:clamp(26px,3.4vw,38px); font-weight:780; margin-top:13px}
.sec-head p{margin-top:13px; color:var(--muted); font-size:18px}

.ba{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px}
.ba-card{border-radius:var(--r); padding:26px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow)}
.ba-card.now{background:var(--surface-2)}
.ba-card.next{border-color:color-mix(in srgb,var(--teal) 45%, var(--line))}
.ba-tag{font-size:12px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.ba-card.next .ba-tag{color:var(--teal-deep)}
.ba-card h3{font-size:19px; margin:8px 0 16px; font-weight:720}
.ba-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.ba-list li{position:relative; padding-left:27px; font-size:15px}
.ba-list li::before{position:absolute; left:0; top:0; font-size:15px}
.now .ba-list li{color:var(--muted)} .now .ba-list li::before{content:"✕"; color:var(--faint)}
.next .ba-list li{color:var(--ink)} .next .ba-list li::before{content:"✓"; color:var(--teal); font-weight:700}

.pairs{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; margin-top:40px}
.pair{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow)}
.pair .q{font-size:15.5px; font-style:italic; color:var(--muted); font-weight:600}
.pair .hr{height:1px; background:var(--line); margin:15px 0}
.pair .a{display:flex; gap:12px; align-items:flex-start}
.pair .a .ic{flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--teal-soft); color:var(--teal-deep); font-size:17px}
.pair .a p{font-size:14.8px}

.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px}
.pillar{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.pillar.lead-card{background:linear-gradient(165deg,var(--accent-soft),var(--surface))}
.pillar .ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:21px;
  background:var(--teal-soft); color:var(--teal-deep); margin-bottom:15px}
.pillar.lead-card .ic{background:var(--accent); color:#fff}
.pillar h3{font-size:18px; font-weight:720} .pillar p{margin-top:9px; color:var(--muted); font-size:14.8px}

.mods{display:flex; flex-direction:column; gap:56px; margin-top:48px}
.mod{display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:center}
.mod:nth-child(even) .mod-art{order:-1}
.mod .tag{font-size:12.5px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--teal)}
.mod h3{font-size:clamp(22px,2.6vw,28px); font-weight:760; margin-top:9px}
.mod p{margin-top:12px; color:var(--muted); font-size:16px}
.mod ul{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.mod li{position:relative; padding-left:27px; font-size:15px}
.mod li::before{content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:800}
.mod-art{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow); min-height:230px}
.art-h{display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--line)}
.art-h b{font-size:14px; font-weight:730}
.art-h span{font-size:11.5px; color:var(--faint)}
.art-rows{display:flex; flex-direction:column; gap:9px; margin-top:14px}
.art-row{display:flex; align-items:center; gap:11px; font-size:13px}
.art-row .dot{width:8px;height:8px;border-radius:50%;background:var(--teal); flex:none}
.art-row .lbl{flex:1; color:var(--muted)}
.art-row .val{font-weight:730; font-variant-numeric:tabular-nums}
.art-row .val.up{color:var(--ok)} .art-row .val.dn{color:#d9534f}
.art-bars{display:flex; align-items:flex-end; gap:7px; height:96px; margin-top:16px}
.art-bars i{flex:1; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--teal),rgba(14,116,144,.28))}

.chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:20px}
.chip{font-size:13.5px; font-weight:620; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:7px 14px; display:inline-flex; align-items:center; gap:7px}
.chip::before{content:"✓"; color:var(--teal); font-weight:800; font-size:12px}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:8px}

.who{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:42px}
.who-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--shadow)}
.who-card .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:24px;
  background:linear-gradient(150deg,var(--teal),var(--teal-deep)); color:#fff}
.who-card h3{font-size:18.5px; font-weight:740; margin-top:17px}
.who-card p{margin-top:9px; color:var(--muted); font-size:14.8px}
.who-card .tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:15px}
.who-card .tags span{font-size:12.5px; font-weight:620; background:var(--surface-2); border-radius:20px; padding:5px 11px; color:var(--muted)}

.integr{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:40px}
.integr-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:var(--shadow)}
.integr-card .ic{font-size:24px}
.integr-card b{display:block; font-size:15.5px; font-weight:730; margin-top:11px}
.integr-card p{margin-top:6px; color:var(--muted); font-size:14px}

.dark{background:var(--panel); color:var(--panel-ink)}
.dark .sec-head h2{color:#fff}
.dark .sec-head p{color:var(--panel-muted)}
.dark .kicker{color:var(--panel-muted)}
.grid-dark{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:42px}
.dcard{background:rgba(255,255,255,.04); border:1px solid var(--panel-line); border-radius:var(--r); padding:24px}
.dcard .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  background:rgba(255,122,47,.16); color:var(--accent)}
.dcard h3{font-size:17px; font-weight:730; margin-top:15px; color:#fff}
.dcard p{margin-top:8px; font-size:14.5px; color:var(--panel-muted)}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:42px}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow)}
.step .n{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:19px;font-weight:800;
  background:var(--accent); color:#fff}
.step h3{font-size:17.5px; font-weight:730; margin-top:16px}
.step p{margin-top:8px; color:var(--muted); font-size:14.8px}

.faq{margin-top:38px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:var(--shadow)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer; padding:20px 24px; font-weight:700; font-size:16px; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-size:22px; font-weight:700; flex:none}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 24px 20px; color:var(--muted); font-size:15px}

.cta-wrap{background:var(--panel); border-radius:26px; padding:52px 40px; position:relative; overflow:hidden; color:#fff}
.cta-wrap::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% -20%, rgba(255,122,47,.30), transparent 55%)}
.cta-grid{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.cta-grid h2{font-size:clamp(26px,3.6vw,38px); font-weight:800; color:#fff}
.cta-grid p{color:var(--panel-muted); margin-top:14px; font-size:17px}
.cta-points{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:15px; color:var(--panel-muted)}
.cta-points li{position:relative; padding-left:26px}
.cta-points li::before{content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:800}

.form{background:var(--surface); border-radius:var(--r); padding:28px; box-shadow:var(--shadow-lg)}
.form h3{font-size:19px; font-weight:750; color:var(--ink)}
.form .sub{font-size:14px; color:var(--muted); margin-top:6px}
.field{margin-top:15px}
.field label{display:block; font-size:13px; font-weight:650; color:var(--muted); margin-bottom:6px}
.field input, .field select, .field textarea{width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:12px 14px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,122,47,.15)}
.field textarea{resize:vertical; min-height:78px}
.form .btn{width:100%; margin-top:18px}
.form-msg{margin-top:14px; font-size:14.5px; border-radius:11px; padding:12px 14px; display:none}
.form-msg.ok{display:block; background:rgba(24,165,88,.12); color:var(--ok); border:1px solid rgba(24,165,88,.3)}
.form-msg.err{display:block; background:rgba(217,83,79,.1); color:#d9534f; border:1px solid rgba(217,83,79,.3)}
.tuzoq{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.modal{position:fixed; inset:0; z-index:60; background:rgba(10,14,19,.66); backdrop-filter:blur(5px);
  display:none; align-items:center; justify-content:center; padding:20px}
.modal.open{display:flex}
.modal-box{background:var(--surface); border-radius:22px; padding:34px 32px; max-width:470px; width:100%;
  box-shadow:var(--shadow-lg); text-align:center; position:relative}
.modal-box .close{position:absolute; top:14px; right:16px; font-size:24px; color:var(--faint); cursor:pointer; line-height:1; background:none; border:none}
.modal-box .ic-big{width:64px;height:64px;border-radius:18px;margin:0 auto;display:grid;place-items:center;font-size:30px;
  background:linear-gradient(150deg,var(--accent),var(--accent-deep)); color:#fff}
.modal-box h3{font-size:21px; font-weight:770; margin-top:18px}
.modal-box p{color:var(--muted); font-size:15px; margin-top:10px}
.modal-box .btn{margin-top:20px; width:100%}
.modal-steps{list-style:none; margin:20px 0 0; padding:0; text-align:left; display:flex; flex-direction:column; gap:11px}
.modal-steps li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--muted)}
.modal-steps li b{flex:none; width:24px;height:24px;border-radius:8px; display:grid; place-items:center; font-size:12px;
  background:var(--accent-soft); color:var(--accent-deep)}
.spinner{width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .8s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.waiting{display:none; align-items:center; justify-content:center; gap:10px; margin-top:18px; font-size:14.5px; color:var(--muted)}
.waiting.on{display:flex}
.waiting .spinner{border-color:rgba(255,122,47,.3); border-top-color:var(--accent)}

footer{background:var(--panel); color:var(--panel-muted); padding:44px 0 30px; font-size:14px}
.foot{display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; align-items:flex-start}
.foot a:hover{color:#fff}
.foot-links{display:flex; gap:24px; flex-wrap:wrap}
.yol{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px}
@media(max-width:820px){.yol{grid-template-columns:1fr}}
.yol-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 22px 24px; position:relative; overflow:hidden}
.yol-item::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--accent)}
.yol-bosqich{font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); margin-bottom:12px}
.yol-n{font-size:clamp(30px,4vw,42px); font-weight:800; line-height:1; color:var(--accent); letter-spacing:-.02em}
.yol-t{margin-top:7px; font-size:13.5px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.04em}
.yol-item p{margin-top:12px; font-size:14.5px; line-height:1.7; color:var(--muted)}
.yol-xulosa{margin-top:18px; text-align:center; font-size:16.5px; font-weight:600; color:var(--ink)}

.foot-rekvizit{margin-top:26px; padding-top:20px; border-top:1px solid var(--panel-line);
  display:flex; flex-wrap:wrap; gap:6px 20px; font-size:12.5px; color:var(--faint); line-height:1.7}
.foot-rekvizit b{color:var(--panel-muted); font-weight:700}
.foot-bottom{margin-top:14px; font-size:12.5px; color:var(--faint)}

.js .rv{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.js .rv.in{opacity:1; transform:none}

@media (max-width:960px){
  .hero-grid,.ba,.two-col,.cta-grid,.mods .mod{grid-template-columns:1fr}
  .pillars,.who,.steps{grid-template-columns:1fr}
  .mod{gap:26px}
  .mod:nth-child(even) .mod-art{order:0}
  .nav-links{display:none}
  section{padding:54px 0}
  .cta-wrap{padding:32px 22px}
  .device{max-width:440px; margin:0 auto}
  .sec-head h2,.hero h1{text-wrap:balance}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .nav .wrap{gap:8px; padding-top:10px; padding-bottom:10px}
  .nav-cta{gap:7px}
  .nav-cta .login{display:none}
  .lang-cur{padding:6px 8px; font-size:11.5px}
  .lang-menu{min-width:150px}
  .nav .btn{padding:8px 13px; font-size:13.5px}
  .brand small{display:none}
  .hero{padding:38px 0 48px}
  .hero h1{font-size:clamp(27px,7.6vw,40px)}
  .hero .lead{font-size:16px; margin-top:16px}
  .hero-cta{gap:10px; margin-top:24px} .hero-cta .btn{flex:1 1 auto; justify-content:center}
  .stats{gap:20px; margin-top:30px}
  .stat .n{font-size:30px}
  section{padding:44px 0}
  .sec-head h2{font-size:clamp(22px,6.4vw,30px)}
  .sec-head p{font-size:16px}
  .ba{margin-top:26px} .ba-card,.pair,.pillar,.who-card,.mod-art,.dcard,.integr-card{padding:20px}
  .mods{gap:38px; margin-top:34px}
  .trust .wrap{gap:9px 18px; font-size:13.5px}
  .dev-kpi{gap:6px} .kpi{padding:9px 8px} .kpi .v{font-size:13px}
  .cta-wrap{padding:26px 18px}
  .modal-box{padding:26px 20px}
  .foot{gap:20px} .foot-links{gap:14px 20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto}
  .js .rv{opacity:1; transform:none; transition:none}
}

.yadro{margin-top:36px; background:linear-gradient(135deg,rgba(14,116,144,.10),rgba(14,116,144,.03));
  border:1px solid rgba(14,116,144,.30); border-radius:var(--r); padding:22px 24px}
.yadro-teg{font-size:12.5px; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); margin-bottom:9px}
.yadro p{margin:0; font-size:14.5px; line-height:1.85; color:var(--muted)}

.modul-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; margin-top:18px}
.modul-card{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:20px 21px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.modul-bosh{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap}
.modul-bosh b{font-size:16.5px; font-weight:740}
.modul-n{font-size:12px; font-weight:700; color:var(--teal); white-space:nowrap;
  background:rgba(14,116,144,.10); border-radius:20px; padding:3px 9px}
.modul-card p{margin:11px 0 0; font-size:14px; line-height:1.7; color:var(--muted); flex:1}
.modul-oyoq{margin-top:13px; padding-top:11px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--faint)}

.narx-blok{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px}
.narx-qism{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:26px; box-shadow:var(--shadow); position:relative}
.narx-raqam{position:absolute; top:20px; right:22px; font-size:38px; font-weight:800;
  color:var(--line); line-height:1}
.narx-qism h3{margin:0 0 10px; font-size:18px; font-weight:740; padding-right:44px}
.narx-qism p{margin:0 0 10px; font-size:14.5px; line-height:1.75; color:var(--muted)}
.narx-izoh{font-size:13px !important; color:var(--faint) !important}

.narx-nima{margin-top:18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:26px; box-shadow:var(--shadow)}
.narx-nima b{font-size:15px}
.narx-nima ul{margin:14px 0 16px; padding-left:20px; columns:2; column-gap:34px;
  font-size:14.5px; line-height:1.95; color:var(--muted)}
.narx-nima li{break-inside:avoid}
.narx-nima p{margin:0 0 18px; font-size:14.5px; line-height:1.75; color:var(--muted); max-width:74ch}

@media (max-width:820px){
  .narx-blok{grid-template-columns:1fr}
  .narx-nima ul{columns:1}
}

.foot-aloqa{min-width:190px}
.foot-aloqa-teg{font-size:12px; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  color:var(--panel-muted); margin-bottom:11px}
.aloqa-qator{display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:650;
  color:#fff; margin-bottom:8px}
.aloqa-qator:hover{color:var(--accent)}
.aloqa-ic{width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  background:rgba(255,255,255,.10); font-size:12px}
.aloqa-izoh{font-size:12.5px; color:var(--faint); margin-top:10px}

.cta-aloqa{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:24px;
  padding-top:18px; border-top:1px solid var(--panel-line); font-size:14.5px}
.cta-aloqa span{color:var(--panel-muted)}
.cta-aloqa a{font-weight:700; color:#fff; border-bottom:1px solid rgba(255,255,255,.3)}
.cta-aloqa a:hover{color:var(--accent); border-color:var(--accent)}

.paket-qator{margin-top:34px}
.paket-teg{font-size:12.5px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:var(--teal)}
.paketlar{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:12px}
.paket{font:inherit; text-align:left; cursor:pointer; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:16px 17px;
  display:flex; flex-direction:column; gap:6px;
  transition:border-color .15s, box-shadow .15s, transform .12s, background .15s}
.paket:hover{border-color:var(--teal); transform:translateY(-1px); box-shadow:var(--shadow)}
.paket b{font-size:15.5px; font-weight:740; color:var(--ink)}
.paket span{font-size:13px; line-height:1.6; color:var(--muted); flex:1}
.paket i{font-style:normal; font-size:12px; font-weight:700; color:var(--teal);
  background:rgba(14,116,144,.10); border-radius:20px; padding:3px 10px; align-self:flex-start}
.paket.on{background:var(--teal); border-color:var(--teal)}
.paket.on b{color:#fff} .paket.on span{color:rgba(255,255,255,.82)}
.paket.on i{background:rgba(255,255,255,.18); color:#fff}

.calc-switch{display:inline-flex; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:4px; gap:4px; margin-top:26px}
.calc-switch button{font:inherit; font-size:14.5px; font-weight:680; cursor:pointer; border:0;
  background:transparent; color:var(--muted); padding:9px 22px; border-radius:999px;
  transition:background .15s, color .15s}
.calc-switch button.on{background:var(--panel); color:#fff}
.calc-switch button:not(.on):hover{color:var(--ink)}

.modul-grid{margin-top:16px}
.modul-card.cm{text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%;
  transition:border-color .15s, box-shadow .15s, background .15s, transform .12s}
.modul-card.cm:hover{border-color:var(--accent-2); transform:translateY(-1px)}
.modul-card.cm.on{border-color:var(--accent); background:var(--accent-soft)}
.modul-card.cm.req{cursor:default; border-color:var(--teal); background:var(--teal-soft)}
.modul-card.cm.req:hover{transform:none}
.modul-card.cm .modul-bosh{align-items:center}
.modul-card.cm .cm-box{width:20px; height:20px; border-radius:6px; border:2px solid var(--line);
  background:var(--surface); display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff; flex:none}
.modul-card.cm.on .cm-box{background:var(--accent); border-color:var(--accent)}
.modul-card.cm.req .cm-box{background:var(--teal); border-color:var(--teal)}
.modul-card.cm .modul-bosh b{flex:1}
.modul-card.cm .cm-price{margin-top:13px; padding-top:11px; border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:7px}
.modul-card.cm .cm-price b{font-size:17px; font-weight:800; color:var(--ink)}
.modul-card.cm.on .cm-price b{color:var(--accent-deep)}
.modul-card.cm .cm-price span{font-size:12.5px; color:var(--faint)}

.calc-sum{margin-top:20px; background:var(--panel); color:var(--panel-ink); border-radius:var(--r);
  padding:28px 30px; box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:minmax(240px,320px) 1fr; gap:28px; align-items:start}
.cs-chap{display:flex; flex-direction:column; gap:16px}
.cs-ong{display:flex; flex-direction:column; gap:14px}
.cs-label{font-size:12px; font-weight:750; letter-spacing:.15em; text-transform:uppercase; color:var(--panel-muted)}
.cs-amount{margin-top:9px; font-size:46px; font-weight:820; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; line-height:1; color:#fff}
.cs-amount small{font-size:15px; font-weight:650; color:var(--panel-muted); margin-left:5px; letter-spacing:0}
.cs-note{margin-top:9px; font-size:13.5px; color:var(--panel-muted)}
.cs-save,.cs-ogoh{border-radius:12px; padding:12px 15px; font-size:13.5px; line-height:1.6}
.cs-save{background:rgba(255,255,255,.10); border:1px solid var(--panel-line); color:#fff}
.cs-save b{color:var(--accent-2)}
.cs-ogoh{background:rgba(255,190,120,.13); border:1px solid rgba(255,190,120,.35); color:#ffe6cf}
.cs-ogoh b{color:#fff}
.cs-extra{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.cs-extra li{display:flex; flex-direction:column; gap:2px; font-size:13px}
.cs-extra b{color:#fff; font-weight:680}
.cs-extra span{color:var(--panel-muted); line-height:1.5}
.cs-tugma{display:flex; gap:10px; flex-wrap:wrap}
.cs-tugma .btn{flex:1 1 180px}
.calc-sum .btn.ghost{background:transparent; border-color:var(--panel-line); color:var(--panel-ink)}
.calc-sum .btn.ghost:hover{background:rgba(255,255,255,.08)}

.calc-foot{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px}
.cf-item{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 26px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px}
.cf-item b{font-size:16px; font-weight:740}
.cf-item span{font-size:14.5px; color:var(--muted); line-height:1.75}

@media (max-width:900px){
  .calc-sum{grid-template-columns:1fr; gap:20px; padding:24px 22px}
  .calc-foot{grid-template-columns:1fr}
}
@media (max-width:560px){
  .calc-switch{width:100%} .calc-switch button{flex:1; padding:9px 8px; font-size:13.5px}
  .cs-amount{font-size:38px}
  .cf-item{padding:20px}
}

.cs-yuzer{display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:rgba(255,255,255,.07); border:1px solid var(--panel-line); border-radius:12px; padding:12px 14px}
.csy-matn{display:flex; flex-direction:column; gap:2px}
.csy-matn b{font-size:13.5px; font-weight:680; color:#fff}
.csy-matn span{font-size:12px; color:var(--panel-muted); line-height:1.45}
.csy-boshqaruv{display:flex; align-items:center; gap:4px; flex:none}
.csy-boshqaruv button{width:30px; height:30px; border-radius:9px; cursor:pointer; font:inherit;
  font-size:17px; font-weight:700; line-height:1; color:#fff; background:rgba(255,255,255,.12);
  border:1px solid var(--panel-line); transition:background .15s}
.csy-boshqaruv button:hover{background:rgba(255,255,255,.24)}
.csy-boshqaruv span{min-width:30px; text-align:center; font-size:16px; font-weight:800; color:#fff;
  font-variant-numeric:tabular-nums}

.jarayonda{margin-top:10px; background:rgba(255,122,47,.10); border:1px solid rgba(255,122,47,.35);
  border-radius:9px; padding:8px 11px; font-size:12.5px; line-height:1.55; color:var(--ink)}

.who-asosiy{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.who-teg{display:inline-block; font-size:11px; font-weight:750; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:6px}
.narx-oraliq{margin:10px 0 12px; font-size:15.5px; color:var(--muted)}
.narx-oraliq b{font-size:24px; color:var(--ink); font-weight:800; letter-spacing:-.02em}

.ekran-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:34px}
.ekran-grid .ekran-katta{grid-column:1 / -1}
@media(max-width:820px){.ekran-grid{grid-template-columns:1fr}}
.ekran{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow)}
.ekran img{display:block; width:100%; height:auto; border-bottom:1px solid var(--line)}
.ekran figcaption{padding:12px 16px; font-size:14px; color:var(--muted); line-height:1.5}
.ekran-mobil img{max-width:300px; margin:16px auto 0; border:1px solid var(--line); border-radius:14px}
.ekran-mobil{display:flex; flex-direction:column; justify-content:center}

.demo-daviat{margin-top:26px; background:var(--panel); color:var(--panel-ink); border-radius:var(--r);
  padding:26px 28px; display:flex; gap:26px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.demo-daviat h3{font-size:22px; color:#fff; font-weight:750}
.demo-daviat p{margin-top:10px; color:var(--panel-muted); max-width:62ch}
.demo-daviat .demo-izoh{font-size:14.5px; color:var(--panel-muted); opacity:.85; margin-top:8px}