/* ==========================================================================
   HamyonAPI — landing sahifa (Soft UI / neumorfizm).
   Tokenlar app.css bilan bir xil: fon va karta bitta rangda, chuqurlik
   faqat ikki tomonlama soya bilan beriladi.
   ========================================================================== */

:root{
  --bg:#EAF2FF;
  --card:#EAF2FF;
  --primary:#2563EB;
  --sky:#60A5FA;
  --lavender:#7C83FD;
  --text:#0F172A;
  --muted:#64748B;
  --success:#16A34A;
  --danger:#DC2626;
  --pending:#D97706;

  --sh-l:rgba(255,255,255,.95);
  --sh-d:rgba(160,180,212,.60);

  --up:-6px -6px 14px var(--sh-l), 6px 6px 16px var(--sh-d);
  --up-sm:-4px -4px 9px var(--sh-l), 4px 4px 11px var(--sh-d);
  --up-xs:-2px -2px 5px var(--sh-l), 2px 2px 6px var(--sh-d);
  --up-lg:-10px -10px 24px var(--sh-l), 10px 10px 28px var(--sh-d);
  --in:inset -4px -4px 9px var(--sh-l), inset 4px 4px 10px var(--sh-d);
  --in-sm:inset -3px -3px 6px var(--sh-l), inset 3px 3px 8px var(--sh-d);

  --r-xl:28px;
  --r-lg:22px;
  --r-md:18px;
  --r-sm:14px;

  --term-bg:#0B1220;
  --term-text:#CBD5E1;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1220;
    --card:#0B1220;
    --primary:#3B82F6;
    --sky:#60A5FA;
    --lavender:#8B92FF;
    --text:#F8FAFC;
    --muted:#94A3B8;
    --success:#22C55E;
    --danger:#F87171;
    --pending:#FBBF24;
    --sh-l:rgba(38,55,90,.5);
    --sh-d:rgba(2,5,12,.8);
    --term-bg:#060B15;
    --term-text:#CBD5E1;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1220;
  --card:#0B1220;
  --primary:#3B82F6;
  --sky:#60A5FA;
  --lavender:#8B92FF;
  --text:#F8FAFC;
  --muted:#94A3B8;
  --success:#22C55E;
  --danger:#F87171;
  --pending:#FBBF24;
  --sh-l:rgba(38,55,90,.5);
  --sh-d:rgba(2,5,12,.8);
  --term-bg:#060B15;
  --term-text:#CBD5E1;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:700;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 20px}
section{padding:84px 0;position:relative}

/* ---------- umumiy bo'laklar ---------- */
.eyebrow{
  display:inline-block;padding:8px 16px;border-radius:999px;
  background:var(--card);box-shadow:var(--in-sm);
  color:var(--primary);font-size:12px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:16px;
}
.h2{font-size:clamp(28px,4.2vw,42px);line-height:1.15;margin:0 0 14px;letter-spacing:-.02em}
.lead{color:var(--muted);font-size:16px;font-weight:600;line-height:1.65;margin:0 auto;max-width:620px}
.center{text-align:center}
.grad{
  background:linear-gradient(120deg,var(--primary),var(--lavender));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- tugmalar ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:999px;border:none;cursor:pointer;
  background:var(--card);color:var(--text);box-shadow:var(--up-sm);
  font-family:inherit;font-weight:800;font-size:14.5px;
  transition:box-shadow .16s, transform .16s;
}
.btn:hover{box-shadow:var(--up)}
.btn:active{box-shadow:var(--in-sm);transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--lavender));
  color:#fff;box-shadow:var(--up-sm), 0 8px 22px rgba(37,99,235,.32);
}
.btn.primary:hover{box-shadow:var(--up), 0 12px 30px rgba(37,99,235,.42)}
.btn.primary:active{box-shadow:var(--in-sm);transform:translateY(1px)}
.btn.sm{padding:10px 18px;font-size:13px}
.btn svg{width:17px;height:17px;flex:none}

/* ---------- navigatsiya ---------- */
.nav{position:sticky;top:0;z-index:60;padding:14px 0;transition:padding .2s}
.nav.stuck{padding:10px 0}
.nav-in{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border-radius:999px;padding:10px 12px 10px 18px;
  box-shadow:var(--up-sm);transition:box-shadow .2s;position:relative;
}
.nav.stuck .nav-in{box-shadow:var(--up)}
.brand{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:800;letter-spacing:-.01em}
.brand-logo{
  width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
  background:var(--card);box-shadow:var(--up-xs);color:var(--primary);flex:none;
}
.brand-logo svg{width:20px;height:20px}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{
  padding:9px 15px;border-radius:999px;font-size:13.5px;font-weight:700;
  color:var(--muted);transition:color .16s, box-shadow .16s;
}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--primary);box-shadow:var(--in-sm)}
.nav-act{display:flex;align-items:center;gap:8px}
.icon-btn{
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;flex:none;
  background:var(--card);color:var(--muted);box-shadow:var(--up-xs);
  display:grid;place-items:center;transition:box-shadow .16s, color .16s;
}
.icon-btn:hover{color:var(--primary)}
.icon-btn:active{box-shadow:var(--in-sm)}
.icon-btn svg{width:18px;height:18px}
.burger{display:none}
#sun{display:none}
:root[data-theme="dark"] #sun{display:block}
:root[data-theme="dark"] #moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #sun{display:block}
  :root:not([data-theme="light"]) #moon{display:none}
}

/* ---------- hero ---------- */
.hero{padding:44px 0 70px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.hero h1{
  font-size:clamp(32px,5vw,52px);line-height:1.1;margin:0 0 18px;letter-spacing:-.03em;
}
.hero p.sub{color:var(--muted);font-size:16.5px;font-weight:600;line-height:1.7;margin:0 0 28px;max-width:520px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:38px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{
  background:var(--card);border-radius:var(--r-md);padding:16px 12px;
  box-shadow:var(--up-sm);text-align:center;
}
.stat b{display:block;font-size:20px;letter-spacing:-.02em;line-height:1.2}
.stat span{display:block;color:var(--muted);font-size:11px;font-weight:700;margin-top:5px}

/* ---------- hero terminal ---------- */
.chips{display:flex;gap:8px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  background:var(--card);box-shadow:var(--up-xs);font-size:12px;font-weight:800;
}
.term{
  background:var(--card);border-radius:var(--r-xl);padding:14px;box-shadow:var(--up-lg);
}
.term-bar{
  display:flex;align-items:center;gap:8px;padding:6px 10px 12px;
  color:var(--muted);font-size:11.5px;font-weight:700;
}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.term-body{
  background:var(--term-bg);border-radius:var(--r-lg);padding:16px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;font-weight:600;
  line-height:1.85;color:var(--term-text);min-height:290px;
  box-shadow:inset 0 2px 14px rgba(0,0,0,.45);overflow-x:auto;
}
/* Qatorlar ketma-ket qo'shilishining o'zi harakat effektini beradi, shuning
   uchun har bir qatorga alohida fade qo'yilmaydi: tab fonda bo'lganda kadrlar
   muzlab, qator yarim shaffof holatda qotib qolishi mumkin edi. */
.term-body .ln{opacity:1}
.c-key{color:#7DD3FC}.c-str{color:#86EFAC}.c-num{color:#FDE68A}
.c-ok{color:#4ADE80}.c-wait{color:#FBBF24}.c-dim{color:#64748B}
.c-post{color:#C4B5FD;font-weight:700}

.scroll-hint{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--muted);font-size:11.5px;font-weight:700;margin-top:52px;
}
.mouse{
  width:24px;height:38px;border-radius:14px;box-shadow:var(--in-sm);
  display:grid;justify-items:center;padding-top:7px;
}
.mouse i{width:3px;height:7px;border-radius:2px;background:var(--muted);animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(9px)}}

/* ---------- qadamlar ---------- */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
.step{
  background:var(--card);border-radius:var(--r-xl);padding:26px;box-shadow:var(--up);
  display:flex;gap:18px;transition:box-shadow .2s, transform .2s;
}
.step:hover{box-shadow:var(--up-lg);transform:translateY(-3px)}
.step-num{
  width:52px;height:52px;border-radius:var(--r-md);flex:none;display:grid;place-items:center;
  background:var(--card);box-shadow:var(--in-sm);
  font-family:"JetBrains Mono",monospace;font-size:16px;font-weight:800;color:var(--primary);
}
.step h3{margin:2px 0 8px;font-size:17px;letter-spacing:-.01em}
.step p{margin:0 0 14px;color:var(--muted);font-size:13.5px;font-weight:600;line-height:1.6}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{
  padding:6px 11px;border-radius:999px;background:var(--card);box-shadow:var(--up-xs);
  font-size:11.5px;font-weight:700;color:var(--muted);
}
.tag.mono{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--primary)}

/* ---------- xususiyatlar ---------- */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.feat{
  background:var(--card);border-radius:var(--r-lg);padding:24px 20px;box-shadow:var(--up-sm);
  transition:box-shadow .2s, transform .2s;
}
.feat:hover{box-shadow:var(--up);transform:translateY(-3px)}
.feat-ico{
  width:46px;height:46px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--card);box-shadow:var(--up-xs);color:var(--primary);margin-bottom:14px;
}
.feat-ico svg{width:22px;height:22px}
.feat h3{margin:0 0 7px;font-size:15px;letter-spacing:-.01em}
.feat p{margin:0;color:var(--muted);font-size:13px;font-weight:600;line-height:1.6}

.cards-row{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px}
.cardsys{
  background:var(--card);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--up-sm);
  display:flex;align-items:center;gap:16px;
}
.cardsys .badge{
  width:52px;height:52px;border-radius:var(--r-sm);display:grid;place-items:center;
  box-shadow:var(--up-xs);background:var(--card);font-size:22px;flex:none;
}
.cardsys b{display:block;font-size:16px;letter-spacing:-.01em}
.cardsys span{display:block;color:var(--muted);font-size:12.5px;font-weight:700;margin-top:3px}

/* ---------- demo ---------- */
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.panel{background:var(--card);border-radius:var(--r-xl);padding:24px;box-shadow:var(--up)}
.panel h3{margin:0 0 18px;font-size:15.5px;display:flex;align-items:center;gap:9px}
.field{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 16px;border-radius:var(--r-md);box-shadow:var(--in-sm);margin-bottom:11px;
}
.field span{color:var(--muted);font-size:12.5px;font-weight:700}
.field b{font-family:"JetBrains Mono",monospace;font-size:12.5px;font-weight:700}
.status-box{
  border-radius:var(--r-md);box-shadow:var(--in-sm);padding:26px 18px;text-align:center;margin-bottom:14px;
}
.status-ico{font-size:34px;line-height:1;margin-bottom:10px;display:block}
.status-box b{display:block;font-size:17px;letter-spacing:-.01em}
.status-box span{display:block;color:var(--muted);font-size:12.5px;font-weight:700;margin-top:5px}
.bar{height:8px;border-radius:999px;box-shadow:var(--in-sm);overflow:hidden;margin-bottom:16px}
.bar i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--sky),var(--primary));transition:width .35s;
}
.log{
  background:var(--term-bg);border-radius:var(--r-md);padding:14px;
  font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:600;line-height:1.9;
  color:var(--term-text);height:172px;overflow-y:auto;
  box-shadow:inset 0 2px 12px rgba(0,0,0,.45);
}
.log-head{
  display:flex;align-items:center;gap:8px;color:var(--muted);
  font-size:11.5px;font-weight:700;margin-bottom:9px;
}

/* ---------- API hujjatlari ---------- */
.api-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;margin-top:44px;align-items:start}
.ep{
  padding:14px 16px;border-radius:var(--r-md);box-shadow:var(--in-sm);margin-bottom:11px;
}
.ep-top{display:flex;align-items:center;gap:9px;margin-bottom:5px;flex-wrap:wrap}
.method{
  padding:4px 9px;border-radius:7px;font-family:"JetBrains Mono",monospace;
  font-size:10.5px;font-weight:800;color:#fff;flex:none;
}
.method.post{background:var(--primary)}
.method.get{background:var(--success)}
.ep code{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700}
.ep small{color:var(--muted);font-size:12px;font-weight:600}
.plabel{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin:20px 0 10px}
.param{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:var(--r-sm);box-shadow:var(--in-sm);margin-bottom:8px}
.param code{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--primary);font-weight:700}
.param em{color:var(--muted);font-size:11.5px;font-style:normal;font-weight:700}
.param .req{margin-left:auto;color:var(--danger);font-size:10.5px;font-weight:800}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.tab{
  padding:9px 15px;border-radius:999px;border:none;cursor:pointer;background:var(--card);
  color:var(--muted);box-shadow:var(--up-xs);font-family:inherit;font-size:12.5px;font-weight:800;
  transition:box-shadow .16s, color .16s;display:inline-flex;align-items:center;gap:7px;
}
.tab:hover{color:var(--text)}
.tab.on{color:var(--primary);box-shadow:var(--in-sm)}
.tab .method{font-size:9.5px;padding:3px 7px}
.tab-sep{width:2px;height:22px;border-radius:2px;box-shadow:var(--in-sm);margin:0 5px}
.code-wrap{position:relative}
.copy{
  position:absolute;top:12px;right:12px;z-index:2;
  padding:7px 13px;border-radius:999px;border:none;cursor:pointer;
  background:rgba(148,163,184,.14);color:#CBD5E1;
  font-family:inherit;font-size:11.5px;font-weight:800;
  display:inline-flex;align-items:center;gap:6px;transition:background .16s,color .16s;
}
.copy:hover{background:rgba(148,163,184,.26);color:#fff}
.copy.done{background:rgba(74,222,128,.2);color:#4ADE80}
.copy svg{width:13px;height:13px}
pre.code{
  margin:0;background:var(--term-bg);border-radius:var(--r-lg);padding:20px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;font-weight:600;
  line-height:1.85;color:var(--term-text);overflow-x:auto;
  box-shadow:inset 0 2px 14px rgba(0,0,0,.45);
}
.statuses{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:16px}
.st{
  padding:15px 12px;border-radius:var(--r-md);box-shadow:var(--in-sm);text-align:center;
}
.st b{display:block;font-family:"JetBrains Mono",monospace;font-size:12.5px;margin:7px 0 4px}
.st span{color:var(--muted);font-size:11.5px;font-weight:700}
.st .ic{font-size:19px}

/* Hujjatlardagi asosiy eslatma — "cron kerak emas" */
.note-box{
  margin-top:16px;padding:15px 17px;border-radius:var(--r-md);
  box-shadow:var(--in-sm);color:var(--muted);
  font-size:13px;font-weight:600;line-height:1.75;
}
.note-box b{color:var(--text);font-weight:800}
.note-box code{
  font-family:"JetBrains Mono",monospace;font-size:12px;
  color:var(--primary);font-weight:700;
}

/* ---------- FAQ ---------- */
.faq{max-width:800px;margin:44px auto 0}
.q{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--up-sm);
  margin-bottom:12px;overflow:hidden;transition:box-shadow .2s;
}
.q.open{box-shadow:var(--up)}
.q-btn{
  width:100%;display:flex;align-items:center;gap:13px;padding:19px 22px;
  border:none;background:transparent;cursor:pointer;color:var(--text);
  font-family:inherit;font-size:15px;font-weight:800;text-align:left;letter-spacing:-.01em;
}
.q-btn .em{font-size:19px;flex:none}
.q-btn .chev{
  margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;box-shadow:var(--up-xs);color:var(--muted);
  transition:transform .25s;
}
.q.open .q-btn .chev{transform:rotate(180deg);color:var(--primary)}
.q-btn .chev svg{width:13px;height:13px}
.q-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.q-body p{
  margin:0;padding:0 22px 20px 56px;color:var(--muted);
  font-size:13.5px;font-weight:600;line-height:1.75;
}
.q-body code{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--primary)}

.help{
  margin:26px auto 0;max-width:800px;background:var(--card);border-radius:var(--r-xl);
  padding:28px;box-shadow:var(--up);text-align:center;
}
.help b{display:block;font-size:17px;margin-bottom:6px;letter-spacing:-.01em}
.help p{margin:0 0 18px;color:var(--muted);font-size:13.5px;font-weight:600}
.help .cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- CTA ---------- */
.cta-box{
  background:var(--card);border-radius:var(--r-xl);padding:56px 36px;
  box-shadow:var(--up-lg);text-align:center;
}
.cta-box h2{font-size:clamp(26px,4vw,40px);line-height:1.15;margin:0 0 14px;letter-spacing:-.025em}
.cta-box p{color:var(--muted);font-size:15px;font-weight:600;line-height:1.65;max-width:540px;margin:0 auto 26px}
.cta-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:28px}
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;
  box-shadow:var(--in-sm);font-size:12.5px;font-weight:800;color:var(--muted);
}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- footer ---------- */
footer{padding:56px 0 34px}
.f-grid{display:grid;grid-template-columns:1.7fr 1fr 1.2fr 1.2fr;gap:34px}
.f-col h4{
  margin:0 0 14px;font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.f-col ul{list-style:none;margin:0;padding:0}
.f-col li{margin-bottom:9px}
.f-col a{color:var(--muted);font-size:13.5px;font-weight:700;transition:color .16s}
.f-col a:hover{color:var(--primary)}
.f-about p{color:var(--muted);font-size:13.5px;font-weight:600;line-height:1.65;margin:12px 0 14px;max-width:280px}
.f-card{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.f-card .badge{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  box-shadow:var(--up-xs);font-size:15px;flex:none;
}
.f-card b{display:block;font-size:12.5px}
.f-card span{display:block;color:var(--muted);font-size:11.5px;font-weight:700}
.f-base{padding:11px 14px;border-radius:var(--r-sm);box-shadow:var(--in-sm);margin-top:14px}
.f-base span{display:block;color:var(--muted);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.f-base b{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--primary)}
.f-line{height:2px;border-radius:2px;box-shadow:var(--in-sm);margin:36px 0 22px}
.f-bot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.f-bot small{color:var(--muted);font-size:12.5px;font-weight:700}
.f-bot .links{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- reveal ----------
   Yashirish faqat `.js` bo'lganda qo'llanadi: JS yuklanmasa yoki xato bersa
   sahifa bo'm-bo'sh qolmasin, butun kontent oddiygina ko'rinib tursin. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .mouse i{animation:none}
  .term-body .ln{opacity:1;transform:none;transition:none}
}

/* ---------- moslashuvchanlik ---------- */
@media (max-width:980px){
  /* minmax(0,1fr) — oddiy `1fr` emas: grid ustuni standart holda o'z
     ichidagi eng keng elementdan (kod bloki) kichraya olmaydi va telefonda
     butun sahifa yon tomonga suriladi. Nol minimum kod blokining o'zini
     surilishga majbur qiladi, sahifa esa joyida qoladi. */
  .hero-grid,.demo-grid,.api-grid{grid-template-columns:minmax(0,1fr)}
  .feats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr;gap:28px}
  .nav-links{
    display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;gap:4px;background:var(--card);border-radius:var(--r-lg);
    padding:12px;box-shadow:var(--up);
  }
  .nav-links.open{display:flex}
  .nav-act{margin-left:auto}
  .burger{display:grid}
  .hero p.sub{max-width:none}
}
@media (max-width:620px){
  section{padding:60px 0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .feats,.cards-row,.statuses{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .cta-box{padding:40px 22px}
  .hero-cta .btn,.cta-btns .btn{width:100%}
  .hero-cta,.cta-btns{flex-direction:column}
  .q-body p{padding-left:22px}
  .brand span{display:none}
}

/* ---------- katta ekranlar (2K/4K laptop, tashqi monitor) ----------
   Dizayn px o'lchamlarda yozilgan, shuning uchun keng ekranda sahifa
   markazda kichkina bo'lib qolardi. Avval konteynerni kengaytiramiz,
   so'ng butun sahifani `zoom` bilan bir tekis kattalashtiramiz — matn,
   kartochkalar va oraliqlar bir xil nisbatda o'sadi.
   Maqsad: ekran qanday bo'lmasin, sahifa ~1700px kenglikdek ko'rinsin.
   `zoom` ni qo'llab-quvvatlamaydigan brauzerda sahifa shunchaki hozirgi
   holida qoladi — hech narsa buzilmaydi. */
@media (min-width:1500px){
  .wrap{max-width:1240px}
  section{padding:96px 0}
  .hero{padding:56px 0 84px}
}
@media (min-width:1700px){ body{zoom:1.12} }
@media (min-width:2000px){ body{zoom:1.28} }
@media (min-width:2400px){ body{zoom:1.5}  }
@media (min-width:3000px){ body{zoom:1.9}  }
@media (min-width:3600px){ body{zoom:2.25} }