/* ===== Нүүр хуудас (static/index.html) — styles.css-ийн дээр ===== */

/* ----- төхөөрөмжийн хүрээ: утас ба хөтөч ----- */
.phone{position:relative;border-radius:13%/6%;padding:2.4%;background:#0B111C;
  box-shadow:0 0 0 1px rgba(255,255,255,.13),0 30px 60px rgba(0,0,0,.5)}
.phone img{display:block;width:100%;height:auto;aspect-ratio:1170/2532;object-fit:cover;object-position:top;border-radius:11%/5.1%;background:#EEF1F6}
.phone.long{border-radius:13%/4.6%}.phone.long img{aspect-ratio:auto;border-radius:11%/3.8%}   /* гүйлгэсэн урт зураг (бүтэн хэсэг) */
.browser{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 60px rgba(0,0,0,.45)}
.browser .bar{height:26px;background:#1A2232;display:flex;align-items:center;gap:6px;padding:0 11px}
.browser .bar i{width:8px;height:8px;border-radius:50%;background:#3A4559}
.browser .bar i:nth-child(1){background:#FF5F57}.browser .bar i:nth-child(2){background:#FEBC2E}.browser .bar i:nth-child(3){background:#28C840}
.browser img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
:root[data-theme="light"] .phone{box-shadow:0 0 0 1px rgba(15,30,60,.18),0 24px 50px rgba(20,40,80,.22)}
:root[data-theme="light"] .browser{box-shadow:0 0 0 1px rgba(15,30,60,.14),0 24px 50px rgba(20,40,80,.18)}

/* хэрэгслийн шошго (өнгөт цэг + нэр) */
.tool{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--c);white-space:nowrap}
.tool::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.t-erp{--c:var(--c-erp)}.t-ue{--c:var(--c-ue)}.t-um{--c:var(--c-um)}.t-us{--c:var(--c-us)}.t-uc{--c:var(--c-uc)}
.app-ico{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;overflow:hidden}
.app-ico img{width:100%;height:100%;display:block}
.app-ico.erp{background:#1A2436;color:#C9D6EA;font:800 12px/1 'Manrope',sans-serif;letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

/* ----- HERO ----- */
.hero{padding:128px 0 40px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(640px 460px at 18% 28%,rgba(46,139,255,.26),transparent 70%),
             radial-gradient(560px 420px at 86% 18%,rgba(63,208,255,.12),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 20%,transparent 75%)}
.hero .wrap{position:relative;z-index:1}
.hero .hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:40px;align-items:center}
.hero h1{font-weight:800;font-size:clamp(40px,5.3vw,70px);line-height:1.03;letter-spacing:-.035em;margin-top:18px}
.hero .lede{margin-top:22px;color:var(--muted);font-size:clamp(16px,1.5vw,18.5px);max-width:46ch}
.hero .lede b{color:var(--text);font-weight:700}
.hero .lede:empty{display:none}
.hero .lede-pts{display:block;margin-top:12px}.hero .lede-pts span{display:block;position:relative;padding-left:18px;line-height:1.55}
.hero .lede-pts span::before{content:"";position:absolute;left:2px;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
/* баруун тал: «Барилгын компанийн бүх систем — нэг дор» 3×3, голд нь Uconnection (эзэн 10-18) */
.hero-sys{min-width:0}
.hs-title{font-weight:800;font-size:clamp(16px,1.45vw,19px);letter-spacing:-.01em;margin-bottom:14px}
.hs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hs-cell{display:flex;flex-direction:column;gap:6px;padding:14px 14px 13px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.hs-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:18px;line-height:1;
  background:rgba(63,208,255,.10);border:1px solid rgba(63,208,255,.26);margin-bottom:2px}
.hs-cell b{font-weight:800;font-size:14.5px;line-height:1.25;letter-spacing:-.01em}
.hs-cell p{font-size:12.5px;line-height:1.4;color:var(--muted);font-weight:600}
.hs-tools{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:auto;padding-top:4px}
.hs-tools .tool{font-size:11.5px}
.hs-hub{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:16px 12px;border-radius:18px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(46,139,255,.32),rgba(46,139,255,.06) 70%),var(--bg-2);
  border:1px solid rgba(63,208,255,.55);box-shadow:0 0 0 4px rgba(63,169,255,.10),0 18px 50px rgba(46,139,255,.28)}
.hs-hub .mark{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:4px;
  background:linear-gradient(135deg,#1F4B8F,#0A1428);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 22px rgba(63,169,255,.45)}
.hs-hub .mark img{width:30px;height:30px;display:block}
.hs-hub b{font-weight:800;font-size:19px;letter-spacing:.04em}
.hs-hub span{font-size:12.5px;font-weight:700;line-height:1.4}.hs-hub span i{display:block;font-style:normal;color:var(--cyan)}
.hs-hub small{font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.35}
:root[data-theme="light"] .hs-ic{background:rgba(23,105,224,.07);border-color:rgba(23,105,224,.2)}
:root[data-theme="light"] .hs-hub{background:radial-gradient(120% 90% at 50% 0%,rgba(23,105,224,.12),rgba(23,105,224,.02) 70%),#fff;
  border-color:rgba(23,105,224,.45);box-shadow:0 0 0 4px rgba(23,105,224,.06),0 18px 44px rgba(20,60,140,.14)}
html.js .hero .in-1,html.js .hero .in-2,html.js .hero .in-3,html.js .hero .in-4{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero .in-2{animation-delay:.1s!important}.hero .in-3{animation-delay:.2s!important}.hero .in-4{animation-delay:.3s!important}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.toolbar{position:relative;z-index:1;margin-top:56px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.toolbar a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-decoration:none;transition:border-color .2s,transform .2s}
.toolbar a:hover{border-color:var(--c);transform:translateY(-2px)}
.toolbar b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em}
.toolbar small{display:block;font-size:12.5px;color:var(--muted);font-weight:600}

/* ----- METRICS ----- */
.metrics{padding:56px 0 0}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden}
.mcell{padding:28px 22px;text-align:center;border-right:1px solid var(--line)}
.mcell:last-child{border-right:0}
.mcell .v{font-weight:800;font-size:clamp(34px,4.4vw,52px);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mcell .k{margin-top:10px;font-size:14px;font-weight:600;color:var(--muted)}

/* ----- PROFIT (гол давуу тал) ----- */
/* «Гол давуу тал» хэсэг хасагдаж (эзэн 10-25) ногоон мөр нь hero-д */
.hero-res{display:inline-block;max-width:100%;margin-top:24px;padding:14px 20px;border-radius:16px;font-weight:800;
  font-size:clamp(15px,1.4vw,17px);line-height:1.4;color:#fff;
  background:linear-gradient(100deg,#0E3A8C 0%,#1D63E6 100%);box-shadow:0 12px 34px rgba(29,99,230,.28)}   /* цэнхэр (эзэн 10-25: ногоон зохицохгүй) */

/* ----- VIDEO ----- */
.video-sec{padding-bottom:40px}
.video-grid{display:grid;grid-template-columns:1fr 400px;gap:64px;align-items:center}
.video-grid .sec-head{margin-bottom:0}
.vid video{display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:22px;background:#000;
  box-shadow:0 0 0 1px var(--line),0 30px 60px rgba(0,0,0,.45)}
@media(max-width:900px){.video-grid{grid-template-columns:minmax(0,1fr);gap:32px}.vid{max-width:420px;width:100%;margin:0 auto}}

.vbtn{margin-top:24px;display:inline-flex;align-items:center;gap:8px;font:700 14.5px 'Manrope',sans-serif;color:var(--text);
  background:var(--card-hi);border:1px solid var(--line);border-radius:999px;padding:10px 18px;cursor:pointer;transition:border-color .2s}
.vbtn:hover{border-color:var(--c,var(--cyan));color:var(--c,var(--cyan))}
.sec-head .vbtn{margin-top:18px}
#vdlg{margin:auto;border:0;padding:0;background:transparent;max-width:min(92vw,460px);width:100%;overflow:visible}
#vdlg::backdrop{background:rgba(3,6,12,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#vdlg video{display:block;width:100%;height:auto;max-height:86vh;aspect-ratio:4/5;object-fit:contain;border-radius:18px;background:#000}
.vclose{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:16px;cursor:pointer}

/* 10 үе шат · 110+ функц — бүтэн задаргаа (#lcdlg) */
.eb-btn{border:0;background:none;padding:0;font-family:inherit;cursor:pointer}
.eb-btn:hover>span:first-child{text-decoration:underline;text-underline-offset:4px}
.eb-arr{font-size:17px;line-height:1;transition:transform .2s}
.eb-btn:hover .eb-arr{transform:translateX(3px)}
.lc-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.sec-head .lc-acts .vbtn{margin-top:0}
#lcdlg{margin:auto;padding:0;border:1px solid var(--line);border-radius:22px;background:var(--bg-2);color:var(--text);
  width:min(1120px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;box-shadow:var(--shadow)}
#lcdlg::backdrop{background:rgba(3,6,12,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html:has(#lcdlg[open]){overflow:hidden}
.lcd-in{padding:28px}
.lcd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.lcd-head h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;line-height:1.15;margin-top:8px}
.lcd-x{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card-hi);color:var(--text);font-size:15px;cursor:pointer}
.lcd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.lcd-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--text);font:700 13px 'Manrope',sans-serif;cursor:pointer;transition:border-color .2s}
.lcd-chip b{font-weight:800;color:var(--muted)}
.lcd-chip:hover{border-color:var(--c,var(--cyan))}
.lcd-chip[aria-pressed="true"]{background:var(--card-hi);border-color:var(--c,var(--cyan));box-shadow:inset 0 0 0 1px var(--c,var(--cyan))}
.lcd-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;margin-top:20px;align-items:start}
.lcd-card{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:4px 16px 8px}
.lcd-card[hidden],.lcd-card li[hidden]{display:none}
.lcd-go{display:flex;align-items:center;gap:10px;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:none;
  color:var(--text);font:800 15.5px/1.25 'Manrope',sans-serif;text-align:left;cursor:pointer}
.lcd-go .n{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--btn);color:#fff}
.lcd-arr{margin-left:auto;color:var(--muted);transition:transform .2s,color .2s}
.lcd-go:hover .lcd-arr,.lcd-go:focus-visible .lcd-arr{transform:translateX(3px);color:var(--cyan)}
.lcd-card ul{list-style:none}
.lcd-card li{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px dashed var(--line)}
.lcd-card li:last-child{border-bottom:0}
.lcd-card li>span:last-child{font-size:14.5px;font-weight:600;line-height:1.4}
.lcd-more[hidden]{display:none}
.lcd-more summary{list-style:none;display:inline-flex;align-items:center;gap:5px;margin:6px 0 4px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}
.lcd-more summary::-webkit-details-marker{display:none}
.lcd-more summary::after{content:"▾";font-size:11px;transition:transform .2s}
.lcd-more[open] summary::after{transform:rotate(180deg)}
.lcd-more summary:hover{color:var(--text);border-color:var(--cyan)}
.lcd-more summary b{color:var(--text)}
.lcd-more li{flex-direction:row;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0}
.lcd-card .lcd-more li>span:first-child{font-size:13.5px;font-weight:500;line-height:1.35;color:var(--muted)}
.lcd-card .lcd-more li>.tool{font-size:11px;font-weight:700;flex:none}
@media(max-width:600px){#lcdlg{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:18px}.lcd-in{padding:18px 16px}}

/* ----- PROBLEM ----- */
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pain{padding:26px 24px;display:flex;flex-direction:column;gap:16px;box-shadow:none}
.pain .bad,.pain .good{display:flex;gap:12px;font-size:15.5px;line-height:1.45}
.pain .bad{color:var(--muted)}
.pain .good{font-weight:700;padding-top:16px;border-top:1px dashed var(--line)}
.pain .ic{width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;font-size:13px;font-weight:800}
.pain .bad .ic{background:rgba(255,92,92,.12);color:#FF6B6B}
.pain .good .ic{background:rgba(47,194,122,.14);color:#2FC27A}

/* ----- PRODUCTS (табтай) ----- */
.tabs{display:flex;gap:6px;padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow-x:auto;scrollbar-width:none;max-width:100%;width:max-content}
.tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:11px;border:0;background:transparent;color:var(--muted);
  font:700 15px/1.2 'Manrope',sans-serif;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.tab .app-ico{width:30px;height:30px;border-radius:8px}
.tab .app-ico.erp{font-size:9.5px}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{background:var(--card-hi);color:var(--text);box-shadow:inset 0 0 0 1px var(--line),inset 0 -2px 0 var(--c)}
.ppanel{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;margin-top:44px}
.ppanel[hidden]{display:none}
/* «Захирал юу хардаг» (UManagement) — дугаартай 6 дэлгэц, бүтэн өргөнөөр (эзэн 10-22) */
.pdir{grid-column:1/-1;margin-top:6px}
.pdir h4{font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
:root:not([data-theme="light"]) .pdir h4{filter:brightness(1.3)}
.pdir-row{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:16px}
.pdir figure{margin:0}
.pdir .phone{width:100%}
.pdir figcaption{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:13.5px;font-weight:600;line-height:1.35}
.pdir figcaption .n{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;font-size:12px;font-weight:800}
@media(max-width:960px){.pdir-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.pdir figure{flex:0 0 44%;scroll-snap-align:start}}
@media(max-width:560px){.pdir figure{flex-basis:62%}}
.ppanel .role{font-size:15px;font-weight:800;letter-spacing:.1em;line-height:1.45;text-transform:uppercase;color:var(--c)}
:root:not([data-theme="light"]) .ppanel .role{filter:brightness(1.3)}
.ppanel h3{font-size:clamp(30px,3.6vw,42px);font-weight:800;margin-top:10px;line-height:1.08}
.ppanel .pd{margin-top:14px;color:var(--muted);font-size:17px;max-width:42ch}
.ticks{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.ticks li{list-style:none;display:flex;gap:12px;font-size:15.5px;font-weight:600;line-height:1.45}
.ticks li::before{content:"";width:20px;height:20px;border-radius:6px;flex:none;margin-top:1px;
  background:var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
/* дэд мөр (UEngineer «Үүрэг даалгавар…»-ийн доор, эзэн 10-28) */
.ticks li.tsub{margin-top:-4px;padding-left:32px;font-size:14.5px;color:var(--muted)}
.ticks li.tsub::before{width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--c)}
.pshots{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:22px;padding:10px 0}
.pshots::before{content:"";position:absolute;inset:8% 10%;border-radius:50%;background:var(--c);opacity:.14;filter:blur(70px)}
.pshots .phone{width:min(46%,250px)}
.pshots .phone + .phone{margin-top:52px}
/* 3 утас (UEngineer: нүүр → хүсэлт → захирлын хяналт) — шатлан доошилно */
.pshots.n3{gap:14px}
.pshots.n3 .phone{width:min(31%,200px)}
.pshots.n3 .phone:nth-child(3){margin-top:104px}
.pshots.web{display:block}
.pshots.web .browser{position:relative}
.pshots.web .browser + .browser{width:62%;margin:-22% 0 0 auto}

/* ----- LIFECYCLE (10 үе шат) ----- */
.lc{display:grid;grid-template-columns:270px 1fr;gap:36px;align-items:start}
.lc-list{display:flex;flex-direction:column;gap:4px;position:sticky;top:96px}
.lc-step{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:0;background:transparent;text-align:left;
  color:var(--muted);font:700 15px/1.25 'Manrope',sans-serif;cursor:pointer;transition:background .2s,color .2s}
.lc-step .n{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:12.5px;font-weight:800;border:1px solid var(--line);color:var(--muted-2)}
.lc-step:hover{color:var(--text)}
.lc-step[aria-selected="true"]{background:var(--card-hi);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.lc-step[aria-selected="true"] .n{background:var(--btn);border-color:transparent;color:#fff}
.lc-step.done .n{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 40%,transparent)}
.lc-panel{padding:34px;border-radius:22px}
.lc-panel[hidden]{display:none}
.lc-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.lc-k{font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--cyan)}
.lc-prog{display:flex;gap:4px}
.lc-prog i{width:18px;height:4px;border-radius:2px;background:var(--line)}
.lc-prog i.on{background:var(--grad)}
.lc-panel h3{font-size:clamp(26px,3vw,36px);font-weight:800;line-height:1.12;margin-top:14px}
.lc-body{display:grid;grid-template-columns:1fr 1.25fr;gap:32px;margin-top:26px;align-items:start}
.lc-items{display:flex;flex-direction:column;gap:2px}
.lc-items li{list-style:none;display:flex;flex-direction:column;gap:3px;padding:11px 0;border-bottom:1px solid var(--line)}
.lc-items li:last-child{border-bottom:0}
.lc-items li span:last-child{font-size:15.5px;font-weight:600;line-height:1.4}
.lc-shots{display:flex;gap:16px;align-items:flex-start}
.lc-shots figure{flex:1 1 0;min-width:0}
.lc-shots figure.w{flex:1.9 1 0}
/* 3 дэлгэцтэй үе шат: 2 утас мөрөөрөө, вэб доор нь (нэг мөрөнд утас хэт жижиг) */
.lc-shots.n3{flex-wrap:wrap}
.lc-shots.n3 figure{flex:1 1 40%}
.lc-shots.n3 figure.w{flex-basis:100%}
.lc-shots figcaption{margin-top:12px;font-size:13.5px;font-weight:600;color:var(--muted);line-height:1.4}
.lc-nav{display:flex;gap:10px;margin-top:26px}
.lc-nav button{font:700 14px 'Manrope',sans-serif;color:var(--text);background:var(--card-hi);border:1px solid var(--line);border-radius:10px;padding:10px 16px;cursor:pointer}
.lc-nav button:hover{border-color:var(--cyan)}
.lc-nav button:disabled{opacity:.4;cursor:default;border-color:var(--line)}

/* ----- AI ----- */
.ai-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.ai-vis{position:relative;display:flex;justify-content:center}
.ai-vis::before{content:"";position:absolute;inset:10% 6%;border-radius:50%;background:var(--c-um);opacity:.16;filter:blur(80px)}
.ai-vis .phone{width:min(78%,300px)}
.ai-points{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ai-points div{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.ai-points b{display:block;font-size:15.5px}
.ai-points span{display:block;margin-top:6px;font-size:14px;color:var(--muted);line-height:1.45}
.asks{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.asks span{font-size:14px;font-weight:600;padding:9px 14px;border-radius:999px 999px 999px 4px;background:color-mix(in srgb,var(--c-um) 14%,transparent);border:1px solid color-mix(in srgb,var(--c-um) 30%,transparent)}

@keyframes dash{to{background-position:22px 0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ----- START (4 алхам) ----- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:st}
.step{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.step .sn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--btn)}
.step h4{font-size:17px;font-weight:800;margin-top:16px}
.step p{font-size:14.5px;color:var(--muted);margin-top:6px}

/* ----- CASES ----- */
#cases .sec-head{display:flex;justify-content:space-between;align-items:flex-end;max-width:none;gap:20px;flex-wrap:wrap}

/* ----- FAQ + CONTACT ----- */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:44px;border-radius:24px;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(520px 380px at 0% 0%,rgba(46,139,255,.22),transparent 70%)}
.contact > *{position:relative}
.contact h2{font-size:clamp(30px,3.8vw,44px);font-weight:800;line-height:1.08;margin-top:14px}
.contact p{margin-top:14px;color:var(--muted);font-size:16.5px;max-width:40ch}
.contact .lead-form{padding:0;box-shadow:none}
.contact-links{display:flex;flex-direction:column;gap:12px;margin-top:26px;align-items:flex-start}
.contact-links .mail{font-weight:700;text-decoration:none;color:var(--text)}
.contact-links .mail:hover{color:var(--cyan)}
.contact-links .deck{font-weight:700;color:var(--cyan);text-decoration:none}
.contact-links .deck:hover{text-decoration:underline}

/* ----- RESPONSIVE ----- */
@media(max-width:1080px){
  .toolbar{grid-template-columns:repeat(3,1fr)}
  .lc{grid-template-columns:minmax(0,1fr)}
  .lc-list{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px 4px}
  .lc-list::-webkit-scrollbar{display:none}
  .lc-step{flex:none}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .hero .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-sys{max-width:680px;width:100%;margin:0 auto}
  .ppanel,.ai-grid,.faq-grid,.contact{grid-template-columns:minmax(0,1fr)}
  .ppanel{gap:34px}
  .ai-grid{gap:40px}
  .ai-vis{order:2}
  .pain-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .hero{padding:96px 0 24px}
  .hs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs-hub{grid-column:1/-1;order:-1;flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:10px;padding:14px}
  .hs-hub .mark{margin-bottom:0}
  .hs-hub small{flex-basis:100%}
  .hs-cell p{display:none}
  .toolbar{grid-template-columns:repeat(2,1fr);margin-top:40px}
  .toolbar a:last-child{grid-column:1/-1}
  .mgrid{grid-template-columns:repeat(2,1fr)}
  .mcell:nth-child(2){border-right:0}
  .mcell:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .lc-panel{padding:22px 18px}
  .lc-body{grid-template-columns:minmax(0,1fr)}
  .lc-shots{flex-wrap:wrap;justify-content:center}
  .lc-shots figure{flex:1 1 40%;max-width:calc(50% - 8px)}
  .lc-shots figure.w{flex-basis:100%;max-width:100%}
  .lc-top{flex-direction:column;align-items:flex-start;gap:10px}
  .ai-points{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .contact{padding:26px 20px}
  .tabs{width:auto}
}

/* ---- экосистем: эзний зураг хөдөлгөөнтэй (10-21, «энэ зургаа хөдөлдөг болгоод энэ шиг»). Зураг дээр % координатаар:
   бүсийн гэрэл (.ex-veil), бүс ↔ Төв ERP урсгалын цэг (SVG animateMotion), тойргийн эргэлт, төвийн импульс, бөмбөлөг.
   Зургийн харьцаа 1600/873 — SVG viewBox 1408×768 ижил харьцаатай. */
#ecosystem{padding-top:clamp(84px,8vw,108px)}
.ecox{max-width:1180px;margin:0 auto}
.ex-stage{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#030C17;
  box-shadow:0 30px 80px rgba(0,0,0,.45)}
/* гарчиг зургийн дотор: зургийн дээд ирмэгийн өнгө (#030C17)-өөр үргэлжилсэн хэсэг, бүдэг тор + төвийн гэрэл */
.ex-head{position:sticky;left:0;z-index:2;padding:clamp(22px,3.2vw,40px) 20px clamp(6px,1vw,12px);text-align:center;color:#EEF2F8;
  background:linear-gradient(180deg,transparent 55%,#030C17 100%),
             radial-gradient(55% 110% at 50% 45%,rgba(63,140,255,.14),transparent 70%),
             repeating-linear-gradient(60deg,rgba(77,140,255,.05) 0 1px,transparent 1px 64px),
             repeating-linear-gradient(-60deg,rgba(77,140,255,.05) 0 1px,transparent 1px 64px),#030C17}
/* «Экосистем» — зургийн зүүн дээд буланд, томоор (эзэн 10-21) */
.ex-head .eyebrow{position:absolute;left:clamp(14px,1.8vw,24px);top:clamp(14px,1.6vw,22px);padding:7px 14px;border-radius:99px;
  font-size:clamp(13px,1.15vw,16px);letter-spacing:.18em;color:#7FD0FF;background:rgba(63,140,255,.12);border:1px solid rgba(93,180,255,.35)}
.ex-head .eyebrow::before{display:none}
.ex-head h2{margin-top:clamp(28px,2.2vw,30px);font-weight:800;font-size:clamp(24px,3.4vw,44px);line-height:1.08;color:#F2F6FC;text-wrap:balance}
.ex-head h2 .grad{white-space:nowrap}   /* «бүх тал нэг системд.» тасрахгүй (эзэн 10-25) */
.ex-head p{margin:12px auto 0;max-width:86ch;font-size:clamp(14.5px,1.35vw,17px);line-height:1.5;color:#B7C5D8;text-wrap:balance}
.ex-head p b{color:#fff}
.ex-canvas{position:relative;aspect-ratio:1600/873;container-type:inline-size}
.ex-canvas>img{position:absolute;inset:0;width:100%;height:100%;display:block}
/* аппын тэмдэг бүс бүрд (брэндийн дүрс + нэр) */
.ex-apps{position:absolute;inset:0;z-index:3;pointer-events:none}
.ex-app{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.45cqw;padding:.35cqw .8cqw .35cqw .35cqw;
  border-radius:99px;background:rgba(8,14,26,.86);border:1px solid rgba(255,255,255,.14);box-shadow:0 .4cqw 1.4cqw rgba(0,0,0,.5);
  white-space:nowrap;transition:transform .35s,box-shadow .35s,border-color .35s}
.ex-app img{width:2.1cqw;height:2.1cqw;border-radius:.5cqw;display:block}
.ex-app .ex-erp{display:grid;place-items:center;width:2.1cqw;height:2.1cqw;border-radius:.5cqw;background:#14233a;border:1px solid #4f8fe0;
  color:#eef2f8;font-weight:800;font-size:clamp(5px,.72cqw,9px)}
.ex-app .plus{font-style:normal;font-weight:800;color:#cfe3ff;font-size:clamp(7px,1cqw,12px)}
.ex-app b{font-weight:800;color:#fff;font-size:clamp(7.5px,1.02cqw,12.5px);letter-spacing:.01em}
.ex-cap{position:absolute;transform:translate(-50%,-50%);text-align:center;white-space:nowrap;font-weight:600;line-height:1.2;
  font-size:clamp(7px,.95cqw,11.5px);color:#E8EEF6;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.ex-stage .ex-app.on{transform:translate(-50%,-50%) scale(1.14);border-color:var(--c,#5DF2FF);box-shadow:0 0 1.8cqw color-mix(in srgb,var(--c,#5DF2FF) 60%,transparent)}
/* алба нэгжийн дотоод урсгал: ERP-ийг тойрсон алба дараалан гэрэлтэж, цагираг дээр мэдээлэл гүйнэ */
.ex-dep{opacity:0;transition:opacity .5s}
.ex-stage.dep .ex-dep{opacity:1}
.ex-dep .dr{fill:none;stroke:#5DF2FF;stroke-opacity:.55;stroke-width:2;stroke-dasharray:5 9;vector-effect:non-scaling-stroke}
.ex-stage.dep .ex-dep .dr{animation:exdash 1.2s linear infinite}
.ex-dep .dsp{stroke:#5DF2FF;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;filter:url(#exglow)}
.ex-stage.dep .ex-dep .dsp{animation:exspoke 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * .6s)}
@keyframes exspoke{0%{stroke-dashoffset:1;opacity:1}22%{stroke-dashoffset:0;opacity:1}45%,100%{stroke-dashoffset:0;opacity:0}}
.ex-dep .dn{fill:none;stroke:#5DF2FF;stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center;vector-effect:non-scaling-stroke}
.ex-stage.dep .ex-dep .dn{animation:exnode 3.6s ease-out infinite;animation-delay:calc(var(--i) * .6s + .5s)}
@keyframes exnode{0%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1)}40%,100%{opacity:0;transform:scale(1.25)}}
.ex-dep .de{fill:url(#exg);transform-box:fill-box;transform-origin:center}
.ex-stage.dep .ex-dep .de{animation:expulse 1.2s ease-in-out infinite}
.ex-dep .dk{fill:#5DF2FF;filter:url(#exglow)}
/* «Төв ERP суурь» — зургийн доторх бичгийг дарж, тод шошго (эзэн 10-21: «арай гоё»). Хэмжээ нь зургийн өргөнөөр (cqw). */
.ex-hubl{position:absolute;left:49.9%;top:52.3%;z-index:3;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.9cqw;
  padding:.8cqw 1.6cqw .8cqw 1.1cqw;border-radius:1.3cqw;white-space:nowrap;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,22,40,.97),rgba(5,11,22,.97)) padding-box,
             linear-gradient(115deg,#5DF2FF,#3F8CFF 48%,#A66BFF) border-box;
  border:1.5px solid transparent;box-shadow:0 0 2.2cqw rgba(93,242,255,.32),0 .8cqw 2cqw rgba(0,0,0,.5)}
.ex-hubl img{width:2.7cqw;height:auto;filter:drop-shadow(0 0 .6cqw rgba(93,242,255,.65))}
.ex-hubl span{display:flex;flex-direction:column;line-height:1.12}
.ex-hubl b{font-weight:800;font-size:clamp(9px,1.6cqw,19px);letter-spacing:.03em;
  background:linear-gradient(90deg,#F2FCFF,#5DF2FF 55%,#8DB8FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.ex-hubl small{margin-top:.3cqw;font-size:clamp(6.5px,.88cqw,11px);font-weight:600;color:#A9C4E0;letter-spacing:.02em}
.ex-stage.hub .ex-hubl,.ex-stage.all .ex-hubl{animation:exhub 1.3s ease-in-out infinite}
@keyframes exhub{50%{box-shadow:0 0 3.8cqw rgba(93,242,255,.62),0 .8cqw 2cqw rgba(0,0,0,.5)}}
.ex-veils{position:absolute;inset:0;pointer-events:none}
.ex-veil{position:absolute;inset:0;background:radial-gradient(var(--g),transparent 0 70%,rgba(3,6,12,.58) 118%);opacity:0;transition:opacity .6s}
.ex-veil.on{opacity:1}
.ex-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ex-ring{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.ex-ring.r1{stroke:rgba(120,210,255,.55);stroke-dasharray:3 26;animation:exspin1 14s linear infinite}
.ex-ring.r2{stroke:rgba(190,130,255,.45);stroke-dasharray:2 20;animation:exspin2 10s linear infinite}
@keyframes exspin1{to{stroke-dashoffset:-580}}
@keyframes exspin2{to{stroke-dashoffset:528}}
.ex-core{fill:url(#exg);transform-box:fill-box;transform-origin:center;animation:expulse 2.4s ease-in-out infinite}
.ex-stage.hub .ex-core{animation-duration:1.1s}
@keyframes expulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:.95;transform:scale(1.18)}}
.ex-z .ln{fill:none;stroke:var(--c);stroke-width:2;stroke-opacity:0;vector-effect:non-scaling-stroke;stroke-dasharray:6 9;transition:stroke-opacity .4s}
.ex-z.on .ln{stroke-opacity:.3;animation:exdash .9s linear infinite}
.ex-z.on.out .ln{animation-direction:reverse}
/* алхам солигдох бүрт урсгалын чиглэлийн сум зурагдана (pathLength=1 → dash 1→0), үзүүр нь очих газрыг заана */
.ex-z .ar{fill:none;stroke:var(--c);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;
  vector-effect:non-scaling-stroke;filter:url(#exglow)}
.ex-z.on.in .ar.in,.ex-z.on.out .ar.out{opacity:1;animation:exdraw .85s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes exdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes exdash{to{stroke-dashoffset:-30}}
.ex-links .lk{fill:none;stroke:#5DF2FF;stroke-width:2.5;stroke-dasharray:8 10;opacity:0;vector-effect:non-scaling-stroke;
  filter:url(#exglow);transition:opacity .5s}
.ex-stage.all .ex-links .lk{opacity:.9;animation:exdash 1s linear infinite}
.ex-z .dt{fill:var(--c);filter:url(#exglow);opacity:0;transition:opacity .4s}
.ex-z .dt.in{opacity:.38}
.ex-z.on .dt.in{opacity:0}
.ex-z.on.in .dt.in,.ex-z.on.out .dt.out{opacity:1}
.ecox .ex-hot.vbtn{all:unset;position:absolute;z-index:4;border-radius:26px;cursor:pointer;transition:box-shadow .3s}
.ecox .ex-hot.vbtn:hover,.ecox .ex-hot.vbtn:focus-visible{box-shadow:inset 0 0 0 2px rgba(120,200,255,.5)}
.ex-bub{position:absolute;left:50%;top:20%;z-index:6;transform:translate(-50%,-100%);width:max-content;max-width:min(420px,40%);padding:10px 14px;
  border-radius:12px;background:rgba(8,14,26,.93);border:1px solid color-mix(in srgb,var(--c,#3FA9FF) 75%,transparent);color:#EEF2F8;
  font-size:14px;font-weight:600;line-height:1.42;box-shadow:0 12px 32px rgba(0,0,0,.55);opacity:0;pointer-events:none;
  transition:opacity .35s,left .5s,top .5s}
.ex-bub.on{opacity:1}
.ex-bub.below{transform:translate(-50%,0)}
.ex-bub.below::after{bottom:auto;top:-7px;transform:translateX(-50%) rotate(225deg)}
.ex-bub.tip{max-width:min(320px,40%);padding:12px 15px}
.ex-bub .tt{display:block;font-size:14.5px;font-weight:800;color:var(--c,#3FA9FF)}
.ex-bub .tp{display:block;margin-top:5px;font-size:12.5px;font-weight:700;color:#cfe3ff}
.ex-bub .tf{display:block;margin-top:5px;font-size:13px;font-weight:500;color:#dbe4ef}
.ex-bub .tv{display:block;margin-top:7px;font-size:12px;font-weight:700;color:var(--c,#3FA9FF)}
.ex-bub b{color:var(--c,#3FA9FF)}
.ex-bub::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:rgba(8,14,26,.93);
  border-right:1px solid color-mix(in srgb,var(--c,#3FA9FF) 75%,transparent);border-bottom:1px solid color-mix(in srgb,var(--c,#3FA9FF) 75%,transparent);
  transform:translateX(-50%) rotate(45deg)}
.ex-story{max-width:760px;margin:12px auto 0;text-align:center}
.ex-st{display:none;margin:0 0 8px;font-size:14.5px;line-height:1.5}
.ex-st b{color:var(--cyan)}
.ex-ctl{display:flex;align-items:center;justify-content:center;gap:8px}
.ex-play{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;padding:0}
.ex-play svg{width:14px;height:14px;fill:currentColor}
.ex-play[aria-pressed="true"] .i-play,.ex-play[aria-pressed="false"] .i-pause{display:none}
.ex-dot{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:var(--line);cursor:pointer;transition:width .3s,background .3s}
:root:not([data-theme="light"]) .ex-dot{background:rgba(255,255,255,.22)}
.ex-dot.on{width:26px;background:var(--cyan)}
@media(max-width:760px){
  .ex-bub{display:none}
  .ex-st:not([hidden]){display:block}
}
/* утсанд зураг дэлгэцэндээ БҮТНЭЭРЭЭ багтана — хажуу тийш гүйлгэхгүй (эзэн 10-23) */
@media(max-width:760px){
  .ex-head h2{margin-top:44px}
  /* жижиг дэлгэцэнд шошго давхцахгүй: аппын тэмдэг зөвхөн дүрсээр, нэмэлт тайлбаргүй */
  .ex-app{padding:.5cqw;gap:.6cqw}
  .ex-app b,.ex-cap{display:none}
  .ex-app img,.ex-app .ex-erp{width:4.6cqw;height:4.6cqw;border-radius:1.1cqw}
  .ex-app .ex-erp{font-size:1.5cqw}
  .ex-app .plus{font-size:2.2cqw}
  .ex-hubl{padding:.9cqw 1.6cqw .9cqw 1.1cqw;gap:1cqw}
  .ex-hubl b{font-size:2.3cqw}
  .ex-hubl small{font-size:1.4cqw}
  .ex-hubl img{width:3.2cqw}
}
@media(max-width:640px){.ex-stage{margin:0 -16px;border-radius:0;border-left:0;border-right:0}}
@media(prefers-reduced-motion:reduce){.ex-stage.dep .ex-dep .dsp,.ex-stage.dep .ex-dep .dn,.ex-stage.dep .ex-dep .dr{animation:none;stroke-dashoffset:0;opacity:.8}.ex-dep .dk{display:none}.ex-z.on.in .ar.in,.ex-z.on.out .ar.out{animation:none;stroke-dashoffset:0}.ex-ring,.ex-core,.ex-z.on .ln,.ex-stage.all .ex-links .lk,.ex-stage .ex-hubl{animation:none}.ex-z .dt{display:none}}