@font-face { font-family:'MGLAI Mongolian'; src:url('/public/fonts/NotoSansMongolian-Regular.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
:root { --ink:#07111d; --muted:#718193; --line:#d9e3e9; --blue:#3e78ad; --cyan:#a8e3ed; --paper:#fff; --pale:#f3f7fa; --serif:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
section[id] { scroll-margin-top: 76px; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:var(--serif); -webkit-font-smoothing:antialiased; }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button { border:0; cursor:pointer; }
.mobile-header { position:fixed; inset:0 0 auto; z-index:20; height:68px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; color:#fff; transition:background .25s ease,color .25s ease; }
.mobile-header.is-scrolled { color:var(--ink); background:rgba(255,255,255,.92); box-shadow:0 1px 0 rgba(7,17,29,.08); backdrop-filter:blur(16px); }
.mobile-brand { display:inline-flex; align-items:center; gap:9px; }
.mobile-brand .mark { width:27px; height:27px; display:grid; place-items:center; border:1px solid currentColor; font-size:22px; line-height:1; transform:rotate(45deg); }
.mobile-brand .mark::first-letter { transform:rotate(-45deg); }
.mobile-brand > span:last-child { display:grid; gap:2px; line-height:1; }
.mobile-brand strong { font-size:13px; font-weight:600; letter-spacing:.1em; }
.mobile-brand small { font-family:var(--mono); font-size:7px; letter-spacing:.24em; opacity:.7; }
.mobile-header-actions { display:flex; align-items:center; gap:15px; }
.mobile-header-actions button { color:inherit; padding:9px 0; background:transparent; font-family:var(--mono); font-size:10px; letter-spacing:.08em; }
.mobile-header-actions button:last-child { width:28px; padding-left:5px; }
.mobile-header-actions i { display:block; width:22px; height:1px; background:currentColor; }
.mobile-header-actions i+i { margin-top:6px; }
.mobile-header-actions button[aria-expanded="true"] i:first-child { transform:translateY(3.5px) rotate(45deg); }
.mobile-header-actions button[aria-expanded="true"] i:last-child { transform:translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position:fixed; inset:68px 0 0; z-index:19; padding:10px 20px 30px; display:grid; align-content:start; background:#fff; opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity .25s ease,transform .25s ease; }
.mobile-menu.is-open { opacity:1; transform:none; pointer-events:auto; }
.mobile-menu a { padding:19px 0; border-bottom:1px solid var(--line); font-size:15px; }
.mobile-menu a.is-active { color:var(--blue); }
.mobile-menu a.mobile-menu-device { margin-top:18px; padding:16px 17px; color:#fff; border:0; background:var(--ink); }
.mobile-menu a.mobile-menu-device span { color:var(--cyan); }
.mobile-menu a span { display:block; margin-top:4px; color:var(--muted); font-family:var(--mono); font-size:8px; letter-spacing:.1em; }
.mobile-hero { position:relative; min-height:760px; height:100svh; overflow:hidden; color:#fff; background:var(--ink); }
.mobile-hero-image { position:absolute; inset:0; background:url('/public/assets/hero-steppe.png') 58% center / cover no-repeat; }
.mobile-hero-image::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,12,22,.04),rgba(4,14,25,.16) 45%,#07111d 100%); }
.mobile-hero-content { position:relative; z-index:1; padding:clamp(145px,30vh,235px) 20px 0; }
.script { display:block; margin-bottom:20px; color:var(--cyan); font-family:'MGLAI Mongolian',sans-serif; font-size:18px; line-height:1.2; writing-mode:vertical-rl; letter-spacing:0; }
h1,h2,p { margin-top:0; }
.mobile-hero h1 { margin-bottom:20px; font-size:clamp(46px,14vw,64px); line-height:1.06; font-weight:500; letter-spacing:-.08em; }
em { color:var(--cyan); font-style:normal; }
.mobile-hero p { max-width:330px; margin-bottom:29px; color:rgba(255,255,255,.72); font-size:13px; line-height:1.85; }
.mobile-button { display:inline-flex; align-items:center; justify-content:space-between; gap:30px; min-width:136px; min-height:48px; padding:13px 16px; color:var(--ink); background:#fff; font-size:12px; letter-spacing:.08em; transition:background .2s ease,transform .2s ease; }
.mobile-button:active { transform:scale(.98); background:var(--cyan); }
.mobile-button span { font-family:var(--mono); font-size:17px; }
.swipe-cue { position:absolute; z-index:1; right:20px; bottom:30px; display:flex; align-items:center; gap:11px; color:rgba(255,255,255,.56); font-family:var(--mono); font-size:8px; letter-spacing:.1em; writing-mode:vertical-rl; }
.swipe-cue i { width:1px; height:48px; background:linear-gradient(#fff,transparent); }
.mobile-intro,.mobile-products,.mobile-solutions { padding:76px 20px 84px; }
.mobile-intro { background:#fff; }
.mobile-products,.mobile-solutions { background:var(--pale); }
.mobile-section-label { display:flex; align-items:center; gap:12px; margin-bottom:44px; color:var(--muted); font-family:var(--mono); font-size:9px; letter-spacing:.08em; }
.mobile-mongolian { position:absolute; margin:0; font-family:'MGLAI Mongolian',sans-serif; font-size:12px; line-height:1.4; writing-mode:vertical-rl; letter-spacing:0; pointer-events:none; }
.mobile-mongolian::before { content:''; display:block; width:1px; height:24px; margin:0 auto 9px; background:currentColor; opacity:.45; }
.mobile-mongolian-light { top:28px; right:20px; }
.mobile-mongolian-pale { top:58px; right:42px; transform:rotate(2deg); }
.mobile-mongolian-dark { top:28px; right:20px; }
.mobile-mongolian-light { color:rgba(62,120,173,.42); }
.mobile-mongolian-pale { color:rgba(62,120,173,.28); }
.mobile-mongolian-dark { color:rgba(168,227,237,.5); }
.mobile-section-label span:first-child { color:var(--blue); }
.mobile-section-label i { display:block; width:35px; height:1px; background:var(--line); }
h2 { font-size:clamp(36px,11vw,52px); line-height:1.17; font-weight:500; letter-spacing:-.08em; }
.mobile-intro h2,.mobile-products h2,.mobile-solutions h2 { margin-bottom:25px; }
.intro-lead,.section-copy { color:var(--muted); font-size:14px; line-height:1.95; }
.intro-lead { margin-bottom:33px; }
.mobile-principles { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.mobile-principles span { min-height:57px; padding:19px 0 13px; border-bottom:1px solid var(--line); color:var(--ink-soft,#1e3143); font-size:12px; }
.mobile-principles span:nth-child(even) { padding-left:16px; border-left:1px solid var(--line); }
.mobile-products { position:relative; overflow:hidden; }
.mobile-products .section-copy { margin-bottom:31px; }
.mobile-product-stack { position:relative; z-index:1; display:grid; gap:10px; }
.mobile-product { padding:20px 17px; text-align:left; background:#fff; border:1px solid var(--line); transition:border-color .2s ease,background .2s ease; }
.mobile-product.is-open { color:#fff; border-color:var(--ink); background:var(--ink); }
.mobile-product-top { display:flex; align-items:center; gap:13px; }
.mobile-product-number { color:var(--blue); font-family:var(--mono); font-size:9px; }
.mobile-product-title { flex:1; font-size:16px; font-weight:500; }
.mobile-product-chevron { color:var(--blue); font-family:var(--mono); font-size:19px; }
.mobile-product-detail { max-height:0; overflow:hidden; color:rgba(255,255,255,.64); font-size:12px; line-height:1.8; transition:max-height .35s ease,padding-top .35s ease; }
.mobile-product.is-open .mobile-product-detail { max-height:100px; padding-top:14px; }
.mobile-product.is-open .mobile-product-chevron { color:var(--cyan); transform:rotate(45deg); }
.mobile-tech { padding:76px 20px 84px; color:#fff; background:var(--ink); }
.mobile-tech .mobile-section-label { color:rgba(255,255,255,.46); }
.mobile-tech .mobile-section-label span:first-child { color:var(--cyan); }
.mobile-tech .mobile-section-label i { background:rgba(255,255,255,.17); }
.mobile-tech h2 { margin-bottom:25px; }
.mobile-tech .section-copy { margin-bottom:34px; color:rgba(255,255,255,.6); }
.mobile-stack { position:relative; display:grid; gap:0; margin:0 0 35px; padding:22px 22px 22px 0; border-top:1px solid rgba(168,227,237,.45); border-bottom:1px solid rgba(168,227,237,.25); }
.mobile-stack div { display:flex; align-items:center; justify-content:space-between; min-height:51px; padding-left:18px; border-left:1px solid var(--cyan); background:linear-gradient(90deg,rgba(93,183,210,.16),transparent); }
.mobile-stack div+div { margin-top:4px; border-color:rgba(168,227,237,.55); }
.mobile-stack b { font-weight:500; font-size:14px; }
.mobile-stack small { color:rgba(255,255,255,.4); font-family:var(--mono); font-size:8px; letter-spacing:.05em; }
.mobile-text-link { display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.3); color:#fff; font-size:12px; letter-spacing:.07em; }
.mobile-text-link span { color:var(--cyan); font-family:var(--mono); font-size:18px; }
.mobile-solutions { background:#fff; }
.mobile-solutions h2 { margin-bottom:30px; }
.mobile-solution-image { height:250px; margin:0 -20px 14px; background:url('/public/assets/solution-steppe.png') center / cover no-repeat; }
.mobile-solution-scroll { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -20px; padding:0 20px 4px; }
.mobile-solution-scroll::-webkit-scrollbar { display:none; }
.mobile-solution-card { flex:0 0 78%; min-height:142px; display:flex; flex-direction:column; justify-content:space-between; padding:16px; scroll-snap-align:start; border:1px solid var(--line); background:var(--pale); }
.mobile-solution-card small { color:var(--muted); font-size:11px; }
.mobile-solution-card strong { display:block; margin-top:11px; font-size:16px; font-weight:500; }
.mobile-solution-card em { color:var(--blue); font-family:var(--mono); font-size:9px; font-style:normal; }
.mobile-solution-card span:last-child { align-self:flex-end; color:var(--blue); font-family:var(--mono); font-size:18px; }
.mobile-join { padding:78px 20px 84px; color:#fff; background:var(--ink); }
.mobile-join h2 { margin-bottom:24px; }
.mobile-join > p { color:rgba(255,255,255,.6); font-size:13px; line-height:1.9; }
.mobile-join form { margin-top:35px; padding-top:24px; border-top:1px solid rgba(255,255,255,.22); }
.mobile-join label { display:grid; gap:9px; margin-bottom:17px; color:rgba(255,255,255,.55); font-size:11px; }
.mobile-join input,.mobile-join textarea { width:100%; padding:10px 0; color:#fff; outline:0; border:0; border-bottom:1px solid rgba(255,255,255,.26); background:transparent; font-size:13px; resize:vertical; }
.mobile-join input::placeholder,.mobile-join textarea::placeholder { color:rgba(255,255,255,.25); }
.mobile-join input:focus,.mobile-join textarea:focus { border-color:var(--cyan); }
.mobile-join .mobile-button { margin-top:7px; }
.form-status { min-height:18px; margin:14px 0 0; color:var(--cyan); font-size:11px; }
.form-status.is-error { color:#f4aaa2; }
.mobile-footer { padding:42px 20px 24px; color:rgba(255,255,255,.56); background:#050d16; }
.mobile-footer .mobile-brand { color:#fff; }
.mobile-footer p { margin:17px 0 12px; font-size:11px; }
.mobile-footer .desktop-link { display:inline-block; margin-bottom:44px; padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.35); color:#fff; font-size:11px; }
.mobile-footer > small { display:block; padding-top:16px; border-top:1px solid rgba(255,255,255,.13); color:rgba(255,255,255,.35); font-family:var(--mono); font-size:8px; }
.reveal { opacity:0; transform:translate3d(0,24px,0); will-change:opacity,transform; transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.mobile-toast { position:fixed; z-index:30; left:20px; right:20px; bottom:20px; padding:13px 15px; color:#fff; background:rgba(7,17,29,.94); font-size:12px; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .2s ease,transform .2s ease; }
.mobile-toast.is-visible { opacity:1; transform:none; }
a,button,input,textarea { touch-action:manipulation; }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto;} section[id]{scroll-margin-top:0;} .reveal{opacity:1;transform:none;} *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;} }