/* SofTizim ERP — лендинг. Дизайн тизими «Tijoriy taklif» дан: тўқ панель + оранж акцент. */
:root{
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --bg:#eceff3; --surface:#ffffff; --surface-2:#f5f8fa;
  --ink:#141a21; --muted:#586573; --faint:#8b96a2; --line:#e4e9ee;
  --panel:#0f141a; --panel-2:#171f29; --panel-ink:#eef2f6;
  --panel-muted:#9aa7b4; --panel-line:#26313d;
  --accent:#ff7a2f; --accent-2:#ff9a5c; --accent-deep:#e85f14;
  --accent-soft:#fff2e9; --on-accent:#1c1204;
  --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:#0a0e13; --surface:#121822; --surface-2:#0e141c;
    --ink:#e9eef3; --muted:#98a5b2; --faint:#636e7a; --line:#212b35;
    --accent-soft:#251811;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 20px 46px -24px rgba(0,0,0,.7);
    --shadow-lg:0 34px 80px -32px rgba(0,0,0,.85);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
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(--faint)}
.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(15,20,26,.92); 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}

/* ── HERO ── */
.hero{position:relative; background:var(--panel); color:var(--panel-ink); overflow:hidden; padding:66px 0 84px}
.hero::before{content:""; position:absolute; width:660px; height:660px; right:-160px; top:-260px;
  background:radial-gradient(circle at center, rgba(255,122,47,.30), rgba(255,122,47,0) 62%); 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(120deg,var(--accent-deep),var(--accent)); 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(--accent); 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(--accent) 40%, 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(--accent)}
.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(--accent); 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(--accent-soft); color:var(--accent-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(--accent-soft); color:var(--accent-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(--accent)}
.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(--accent); 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(--accent); 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(--accent),rgba(255,122,47,.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(--accent); 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(--accent),var(--accent-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 ── */
.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)}

/* ── демо модали ── */
.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}
.foot-bottom{margin-top:26px; padding-top:20px; border-top:1px solid var(--panel-line); font-size:12.5px; color:var(--faint)}

/* ── анимация ── */
.rv{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1; transform:none}

@media (max-width:960px){
  .hero-grid,.ba,.two-col,.cta-grid{grid-template-columns:1fr}
  .pillars,.who,.steps{grid-template-columns:1fr}
  .mod{grid-template-columns:1fr; 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}
}
@media (max-width:520px){
  body{font-size:16px}
  .nav-cta .login{display:none}
  .stats{gap:22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto}
  .rv{opacity:1; transform:none; transition:none}
}