/* ---------------------------------------------------------------
   NueraTech танилцуулга — «Studio Night».
   Том сэриф гарчиг (Noto Serif Display), нарийн шугам, бодит төслийн зургууд, нэг л accent (cyan).
   Хөдөлгөөн: маскан мөр (line mask reveal), шугам зурагдах, зураг нээгдэх (wipe), ease-out-expo — medicube-mn-ийн цэвэр хөдөлгөөний хэл.
---------------------------------------------------------------- */
:root {
  --bg: #07090f;
  --panel: #0d1325;
  --ink: #f2f5fa;
  --ink2: #b9c3d6;
  --mute: #7f8ca6;
  --line: rgb(255 255 255 / 0.12);
  --line2: rgb(255 255 255 / 0.22);
  --acc: #4dd8ff;
  --serif: "Noto Serif Display", "Times New Roman", Georgia, serif;
  --sans: "Inter Tight", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --m: clamp(20px, 4.6vw, 76px);
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); overscroll-behavior: none; }
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:where(a, button):focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
em { font-style: italic; color: var(--acc); }
p { margin: 0; }

/* ============================ SKY ============================ */
#sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(180deg, #06080d 0%, #0a0f1e 58%, #0c1330 100%); }
.light { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.l1 { width: 60vmax; height: 60vmax; right: -24vmax; top: -30vmax; background: radial-gradient(closest-side, rgb(77 216 255 / 0.15), transparent 70%); animation: drift 44s ease-in-out infinite; }
.l2 { width: 54vmax; height: 54vmax; left: -26vmax; bottom: -32vmax; background: radial-gradient(closest-side, rgb(48 88 255 / 0.2), transparent 70%); animation: drift 56s ease-in-out -22s infinite; }
@keyframes drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(3vmax, 2vmax, 0); } }
.cols { position: absolute; inset: 0 var(--m); display: grid; grid-template-columns: repeat(5, 1fr); }
.cols i { border-left: 1px solid rgb(255 255 255 / 0.05); }
.cols i:last-child { border-right: 1px solid rgb(255 255 255 / 0.05); }
.grain { position: absolute; inset: 0; opacity: 0.08; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ============================ CHROME ============================ */
#top { position: fixed; z-index: 6; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: calc(20px + var(--sa-t)) var(--m) 0; pointer-events: none; }
#top > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 15px var(--sans); letter-spacing: 0.02em; }
.mark { width: 26px; height: 26px; }
.counter { font: 500 12px var(--mono); letter-spacing: 0.14em; color: var(--mute); font-variant-numeric: tabular-nums; }
.counter b { color: var(--ink); font-weight: 500; }
.counter i { font-style: normal; margin: 0 0.55em; opacity: 0.5; }

#bottom { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; padding: 0 var(--m) calc(12px + var(--sa-b)); pointer-events: none; }
#bottom > * { pointer-events: auto; }
.dock-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 10px; }
.dock-left { min-width: 0; }
.dock { display: flex; align-items: center; gap: 8px; }
.ib { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; color: var(--ink); background: rgb(7 9 15 / 0.35);
  transition: background 0.25s, border-color 0.25s, transform 0.3s var(--ease); }
.ib:hover { background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.45); }
.ib:active { transform: scale(0.92); }
.ib svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ib.play { width: 50px; height: 50px; background: var(--ink); color: #07090f; border-color: var(--ink); }
.ib.play:hover { background: #fff; }
.ib.play .i-play { fill: currentColor; stroke: none; }
.ib.play .i-pause, .ib.play .i-replay { display: none; }
body[data-play="1"] .ib.play .i-pause { display: block; }
body[data-play="1"] .ib.play .i-play { display: none; }
body[data-end="1"] .ib.play .i-replay { display: block; }
body[data-end="1"] .ib.play .i-play, body[data-end="1"] .ib.play .i-pause { display: none; }
.ib.take { font: 600 13px var(--mono); letter-spacing: 0; color: var(--acc); border-color: rgb(77 216 255 / 0.5); }
#bSound .i-off { display: none; }
body[data-muted="1"] #bSound .i-on { display: none; }
body[data-muted="1"] #bSound .i-off { display: block; }
body[data-muted="1"] #bSound { color: #ff9fb3; border-color: rgb(255 159 179 / 0.4); }
.chapter { justify-self: end; max-width: 100%; font: 500 11.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapter b { color: var(--ink); font-weight: 500; margin-right: 0.8em; }

#segs { display: flex; gap: 5px; }
#segs button { flex: 1; height: 16px; display: flex; align-items: center; }
#segs i { position: relative; display: block; width: 100%; height: 2px; background: rgb(255 255 255 / 0.16); overflow: hidden; transition: height 0.2s; }
#segs button:hover i { height: 4px; }
#segs b { position: absolute; inset: 0; background: var(--acc); transform-origin: left center; transform: scaleX(0); }

#toast { position: fixed; z-index: 14; left: 50%; bottom: calc(118px + var(--sa-b)); transform: translate(-50%, 10px); opacity: 0; pointer-events: none; padding: 10px 16px; font: 500 12px var(--mono); letter-spacing: 0.06em;
  background: rgb(13 19 37 / 0.92); border: 1px solid var(--line2); transition: opacity 0.3s, transform 0.4s var(--ease); max-width: 90vw; text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ============================ START ============================ */
#start { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 28px;
  background: radial-gradient(90% 70% at 30% 20%, rgb(11 16 32 / 0.55), rgb(5 7 13 / 0.94)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.8s var(--ease), visibility 0s 0.8s; }
body:not([data-state="intro"]) #start { opacity: 0; visibility: hidden; pointer-events: none; }
.start-in { width: min(720px, 100%); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.start-in .display { font-size: clamp(44px, 9vw, 96px); }
.sub { color: var(--ink2); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; max-width: 30em; }
.start-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 10px; }
.btn-solid { display: inline-flex; align-items: center; gap: 12px; padding: 17px 30px; background: var(--ink); color: #07090f; font: 600 16px var(--sans); letter-spacing: 0.01em; border-radius: 99px; transition: transform 0.35s var(--ease), background 0.25s; }
.btn-solid:hover { background: #fff; transform: translateY(-2px); }
.btn-solid:active { transform: scale(0.97); }
.btn-solid svg { width: 16px; height: 16px; fill: currentColor; }
.btn-link { color: var(--ink2); font: 500 15px var(--sans); padding: 8px 2px; border-bottom: 1px solid var(--line2); transition: color 0.2s, border-color 0.2s; }
.btn-link:hover { color: var(--ink); border-color: var(--ink); }
.hint { font: 500 11.5px var(--mono); letter-spacing: 0.14em; color: var(--mute); margin-top: 8px; }

/* ============================ TYPE + REVEAL ============================ */
.display { margin: 0; font-family: var(--serif); font-weight: 300; letter-spacing: -0.022em; line-height: 1.04; }
.display em { font-weight: 300; }
h1, h2, h3 { margin: 0; }
.eyebrow { font: 500 12px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.eyebrow b { color: var(--acc); font-weight: 500; margin-right: 0.9em; }
.lead { font-size: clamp(15px, min(1.55vw, 2.7svh), 20px); line-height: 1.65; color: var(--ink2); max-width: 34em; }

/* маскан мөр: мөр бүр доороос гарч ирнэ */
.rl { display: block; overflow: hidden; padding: 0.08em 0 0.18em; margin: -0.08em 0 -0.18em; }
.rl > i { display: block; font-style: normal; transform: translateY(115%); }
.slide.is-active .rl > i { animation: rl-up 1.15s var(--ease) both; animation-delay: calc(var(--i, 0) * 85ms + 150ms); }
.slide.is-active[data-dir="back"] .rl > i { animation-name: rl-down; }
@keyframes rl-up { from { transform: translateY(115%); } to { transform: none; } }
@keyframes rl-down { from { transform: translateY(-115%); } to { transform: none; } }
.fx { opacity: 0; }
.slide.is-active .fx { animation: fx-up 0.95s var(--ease) both; animation-delay: calc(var(--i, 0) * 85ms + 150ms); }
.slide.is-active[data-dir="back"] .fx { animation-name: fx-down; }
@keyframes fx-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fx-down { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
.rule { height: 1px; background: var(--line2); transform: scaleX(0); transform-origin: left center; }
.slide.is-active .rule { animation: rule-in 1.4s var(--ease) both; animation-delay: calc(var(--i, 0) * 85ms + 150ms); }
@keyframes rule-in { to { transform: scaleX(1); } }

/* ============================ SLIDES ============================ */
#deck { position: fixed; inset: 0; z-index: 2; }
.slide { position: absolute; inset: 0; display: flex; align-items: center; padding: calc(86px + var(--sa-t)) var(--m) calc(126px + var(--sa-b));
  opacity: 0; visibility: hidden; pointer-events: none; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; transition: opacity 0.55s var(--ease), visibility 0s 0.55s; }
.slide::-webkit-scrollbar { display: none; }
.slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.slide.is-leaving { visibility: visible; opacity: 0; transition-delay: 0s; }
.wrap { position: relative; width: min(1320px, 100%); margin: auto; }
.ms { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 0; height: 0; pointer-events: none; }

/* ============================ ДРОИД «Нейра» ============================ */
#droid { position: fixed; left: 0; top: 0; width: 120px; height: 140px; z-index: 7; cursor: pointer; transform-origin: 0 0; will-change: transform; touch-action: manipulation;
  transition: transform var(--mdur, 1s) cubic-bezier(0.5, 0.05, 0.2, 1); }
body[data-state="intro"] #droid { z-index: 12; }
#droid svg { width: 100%; height: 100%; overflow: visible; display: block; pointer-events: none; }
#droid .d-bounce { transform-box: view-box; transform-origin: 60px 126px; }
#droid.hop .d-bounce { animation: d-hop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes d-hop {
  0% { transform: scale(1, 1); } 18% { transform: scale(1.1, 0.88); }
  45% { transform: translateY(-16px) scale(0.94, 1.08); } 72% { transform: scale(1.06, 0.94); } 100% { transform: scale(1, 1); }
}
#droid .d-roll { transform-box: view-box; transform-origin: 60px 96px; transform: rotate(var(--roll, 0deg)); transition: transform var(--mdur, 1s) cubic-bezier(0.5, 0.05, 0.2, 1); }
#droid .d-head-wrap { transform-box: view-box; transform-origin: 60px 68px; transform: rotate(calc(var(--lean, 0deg) + var(--tilt, 0deg))); transition: transform 0.55s var(--ease); }
#droid[data-mood="curious"] .d-head-wrap { --tilt: -9deg; }
#droid .d-head { animation: d-float 3.2s ease-in-out infinite; }
@keyframes d-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.6px); } }
#droid .d-look { transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: transform 0.18s ease-out; }
#droid .d-iris-g { transform-box: fill-box; transform-origin: center; animation: d-blink 4.8s infinite; }
@keyframes d-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
#droid .d-iris { transform-box: fill-box; transform-origin: center; transition: transform 0.25s var(--ease); }
#droid[data-mood="wow"] .d-iris { transform: scale(1.24); }
#droid .d-happy { display: none; }
#droid[data-mood="happy"] .d-happy { display: inline; }
#droid[data-mood="happy"] .d-iris-g { display: none; }
#droid .d-eq rect { transform-box: fill-box; transform-origin: center; transform: scaleY(calc(0.3 + var(--lv, 0) * var(--k, 1) * 1.05)); transition: transform 0.06s linear; }
#droid .d-look { filter: drop-shadow(0 0 calc(var(--lv, 0) * 7px) rgb(77 216 255 / 0.95)); }
#droid .d-iris { transform: scale(calc(1 + var(--lv, 0) * 0.16)); }
#droid .d-tip { filter: drop-shadow(0 0 calc(var(--lv, 0) * 6px) #4dd8ff); }
#droid .d-tip { animation: d-pulse 2.2s ease-in-out infinite; }
@keyframes d-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (max-width: 860px) { .ms { left: var(--xm, var(--x, 50%)); top: var(--ym, var(--y, 50%)); } }
.head { margin-bottom: clamp(18px, 3.6svh, 40px); }
.head .eyebrow { margin-bottom: clamp(12px, 2svh, 22px); }
h2.display { font-size: clamp(34px, min(4.8vw, 8.2svh), 72px); }

/* ---- 01 cover ---- */
.cover { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--m); align-items: center; }
.cover h1 { font-size: clamp(40px, min(6vw, 10.4svh), 104px); margin: clamp(14px, 2.4svh, 26px) 0; }
.cover .hello { font: 500 clamp(14px, 1.4vw, 17px) / 1.4 var(--sans); color: var(--ink2); margin-bottom: 4px; }
.conv { display: grid; grid-template-columns: auto 84px auto; align-items: center; gap: 12px; margin-top: clamp(22px, 4.2svh, 44px); }
.conv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font: 500 clamp(12.5px, 1.2vw, 15px) / 1.2 var(--sans); color: var(--ink2); }
.conv svg { width: 84px; height: 66px; overflow: visible; }
.conv path { fill: none; stroke: var(--line2); stroke-width: 1.2; stroke-dasharray: 120; stroke-dashoffset: 120; }
.slide.is-active .conv path { animation: draw 1.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 85ms + 500ms); }
.conv path:nth-child(2) { animation-delay: calc(var(--i, 0) * 85ms + 650ms) !important; }
.conv path:nth-child(3) { animation-delay: calc(var(--i, 0) * 85ms + 800ms) !important; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.conv circle { fill: var(--acc); }
.conv strong { font: 600 clamp(14px, 1.45vw, 18px) / 1.25 var(--sans); color: var(--ink); max-width: 9em; }
.conv strong::before { content: ""; display: block; width: 28px; height: 1px; background: var(--acc); margin-bottom: 10px; }

.reel { position: relative; overflow: hidden; height: min(70svh, 680px); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; transform: rotate(-4deg) scale(1.04);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
.reel-col { display: flex; flex-direction: column; gap: 14px; animation: reel-up 80s linear infinite; will-change: transform; }
.reel-col:nth-child(2) { animation-direction: reverse; animation-duration: 96s; margin-top: -60px; }
.slide:not(.is-active) .reel-col { animation-play-state: paused; }
@keyframes reel-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes reel-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.reel-item { flex: none; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--panel); }
.reel-item img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* ---- 02 about ---- */
.about { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--m); align-items: center; }
.big { font-family: var(--serif); font-weight: 300; font-size: clamp(130px, min(25vw, 42svh), 380px); line-height: 0.8; letter-spacing: -0.05em; font-variant-numeric: lining-nums; }
.big-cap { display: block; margin-top: 18px; max-width: 16em; font: 500 12px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.about .lead { margin: clamp(14px, 2.4svh, 24px) 0 clamp(18px, 3svh, 32px); }
.facts { margin: 0; border-top: 1px solid var(--line); }
.fact { display: grid; grid-template-columns: minmax(96px, 150px) 1fr; gap: 18px; padding: clamp(10px, 1.7svh, 16px) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.fact dt { font: 500 11.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.fact dd { margin: 0; font: 500 clamp(15px, 1.5vw, 18px) / 1.4 var(--sans); }
.sign { display: flex; align-items: baseline; gap: 16px; margin-top: clamp(16px, 3svh, 28px); flex-wrap: wrap; }
.sign b { font: italic 300 clamp(26px, 2.8vw, 36px) var(--serif); letter-spacing: -0.01em; }
.sign span { font: 500 11.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }

/* ---- 03 services ---- */
.svc-list { border-top: 1px solid var(--line); }
.svc { display: grid; grid-template-columns: 76px minmax(0, 0.95fr) minmax(0, 1fr); gap: var(--m); align-items: baseline; padding: clamp(14px, 3.2svh, 32px) 0; border-bottom: 1px solid var(--line); position: relative; transition: background 0.4s; }
.svc .n { font: 500 12px var(--mono); letter-spacing: 0.14em; color: var(--acc); }
.svc h3 { font: 400 clamp(26px, min(3.5vw, 6svh), 50px) / 1.06 var(--serif); letter-spacing: -0.02em; transition: transform 0.5s var(--ease), color 0.3s; }
.svc p { color: var(--ink2); font-size: clamp(14px, 1.35vw, 17px); line-height: 1.6; max-width: 32em; }
.svc:hover h3 { transform: translateX(10px); color: #fff; }

/* ---- 04-06 portfolio ---- */
.works { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); }
.works[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.works[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work { display: block; min-width: 0; }
.shot { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--panel); clip-path: inset(0 0 100% 0); transition: border-color 0.3s; }
.slide.is-active .shot { animation: wipe 1.25s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 250ms); }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
.work:hover .shot { border-color: rgb(77 216 255 / 0.6); }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transform: scale(1.12); transition: transform 8s cubic-bezier(0.2, 0.6, 0.2, 1); }
.slide.is-active .shot img { transform: scale(1.02); }
.shot.noshot { display: grid; place-items: center; background: linear-gradient(135deg, #101a36, #0a0f20); }
.shot.noshot::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px); background-size: 28px 28px; }
.shot.noshot b { position: relative; font: italic 300 clamp(40px, 5.4vw, 84px) / 1 var(--serif); letter-spacing: -0.03em; color: rgb(255 255 255 / 0.85); }
.shot.noshot small { position: absolute; left: 12px; bottom: 10px; font: 500 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.meta { display: grid; gap: 7px; margin-top: 14px; }
.meta .idx { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 11px var(--mono); letter-spacing: 0.14em; color: var(--acc); padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.meta .st { display: inline-flex; align-items: center; gap: 7px; color: var(--mute); letter-spacing: 0.1em; text-transform: uppercase; font-size: 10.5px; }
.meta h3 { font: 400 clamp(20px, 2vw, 28px) / 1.1 var(--serif); letter-spacing: -0.015em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meta .host { font: 500 11.5px var(--mono); letter-spacing: 0.04em; color: var(--mute); display: flex; align-items: center; gap: 8px; }
.meta .host::after { content: "↗"; transition: transform 0.3s var(--ease); }
.work:hover .host { color: var(--ink); }
.work:hover .host::after { transform: translate(3px, -3px); }
.meta p { color: var(--ink2); font-size: clamp(12.5px, 1.1vw, 14.5px); line-height: 1.55; }
.live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3be58f; box-shadow: 0 0 8px #3be58f; margin-right: 2px; }
.new { font: 500 10.5px var(--mono); letter-spacing: 0.12em; padding: 3px 7px; border: 1px solid var(--acc); color: var(--acc); }

/* ---- 07 why ---- */
.why { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--m); align-items: center; }
.cycle { display: flex; justify-content: space-between; position: relative; margin-top: clamp(26px, 6svh, 64px); list-style: none; padding: 20px 0 0; }
.cycle::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 1px; background: var(--line2); }
.cycle::after { content: ""; position: absolute; top: 20px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 12px var(--acc); opacity: 0; }
.slide.is-active .cycle::after { animation: travel 5s 1.6s ease-in-out infinite; }
@keyframes travel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 9px); opacity: 0; } }
.cycle li { position: relative; font: 500 11.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink2); }
.cycle li::before { content: ""; display: block; width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--ink2); border-radius: 50%; margin-bottom: 12px; position: relative; z-index: 1; }
.reasons { border-top: 1px solid var(--line); }
.reason { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: clamp(16px, 3.2svh, 30px) 0; border-bottom: 1px solid var(--line); }
.reason .n { font: 500 12px var(--mono); letter-spacing: 0.14em; color: var(--acc); padding-top: 0.5em; }
.reason h3 { font: 400 clamp(22px, 2.5vw, 34px) / 1.1 var(--serif); letter-spacing: -0.018em; margin-bottom: 8px; }
.reason p { color: var(--ink2); font-size: clamp(14px, 1.35vw, 17px); line-height: 1.6; max-width: 34em; }

/* ---- 08 contact ---- */
.contact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--m); align-items: center; }
.contact h1 { font-size: clamp(42px, min(6.4vw, 11svh), 110px); margin: clamp(14px, 2.4svh, 26px) 0 clamp(20px, 4svh, 40px); }
.crow { display: grid; grid-template-columns: minmax(86px, 120px) 1fr; gap: 16px; align-items: baseline; padding: clamp(11px, 1.8svh, 17px) 0; border-top: 1px solid var(--line); transition: padding 0.4s var(--ease); }
.crow.addr { border-bottom: 1px solid var(--line); }
.crow dt, .crow .k { font: 500 11.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.crow .v { font: 400 clamp(18px, 2vw, 28px) / 1.25 var(--serif); letter-spacing: -0.01em; overflow-wrap: anywhere; }
a.crow:hover { padding-left: 10px; }
a.crow:hover .v { color: var(--acc); }
.card { border: 1px solid var(--line2); padding: clamp(20px, 2.6vw, 36px); display: grid; gap: 18px; background: rgb(13 19 37 / 0.55); }
.card .who b { display: block; font: italic 300 clamp(34px, 3.8vw, 52px) / 1 var(--serif); letter-spacing: -0.02em; }
.card .who span { display: block; margin-top: 10px; font: 500 11.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.qr { display: flex; align-items: center; gap: 18px; }
.qr img { width: clamp(104px, 11vw, 150px); aspect-ratio: 1; display: block; background: #fff; padding: 8px; border-radius: 3px; }
.qr p { font-size: 14px; line-height: 1.5; color: var(--ink2); max-width: 14em; }
.again { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line2); padding-bottom: 6px; transition: color 0.2s, border-color 0.2s; }
.again:hover { color: var(--ink); border-color: var(--ink); }
.again svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================ RESPONSIVE ============================ */
@media (max-height: 760px) { .reel { height: 62svh; } }
/* намхан ноутбук (1366x768, 1280x720): слайд бүр товчны ард орохгүй */
@media (min-width: 861px) and (max-height: 800px) {
  .slide { padding-top: calc(76px + var(--sa-t)); padding-bottom: calc(112px + var(--sa-b)); }
  h2.display { font-size: clamp(28px, min(4.4vw, 6.8svh), 60px); }
  .head { margin-bottom: clamp(14px, 2.6svh, 28px); }
  .about .lead { margin: 10px 0 14px; font-size: 15px; line-height: 1.55; }
  .fact { padding: 8px 0; }
  .sign { margin-top: 12px; }
  .big { font-size: clamp(120px, min(22vw, 36svh), 300px); }
  .svc { padding: clamp(10px, 2.2svh, 22px) 0; }
  .svc h3 { font-size: clamp(24px, min(3.2vw, 5svh), 42px); }
  .contact h1 { font-size: clamp(38px, min(5.6vw, 9svh), 90px); margin: 10px 0 18px; }
  .crow { padding: 9px 0; }
  .again { margin-top: 14px; }
  .card { padding: 22px; gap: 14px; }
  .cover h1 { font-size: clamp(36px, min(5.2vw, 8.4svh), 84px); margin: 12px 0; }
  .cover .lead { margin-top: 0; font-size: 15px; line-height: 1.55; }
  .conv { margin-top: 18px; }
  .cover .hello { margin-top: 12px !important; }
}
@media (max-width: 1000px) {
  .shot { aspect-ratio: 16 / 9; }
  .works, .works[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works[data-n="3"] .work:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 44% 1fr; gap: 14px; align-items: center; }
  .works[data-n="3"] .work:last-child .meta { margin-top: 0; }
  .svc { grid-template-columns: 56px 1fr; gap: 6px 18px; }
  .svc p { grid-column: 2; }
}
@media (max-width: 860px) {
  .cover, .about, .why, .contact { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .reel { min-width: 0; overflow: hidden; }
  .about .big { display: flex; align-items: flex-end; gap: 18px; font-size: clamp(96px, 30vw, 170px); }
  .about .big-cap { margin: 0 0 8px; max-width: 12em; }
  .reel { order: 2; height: 92px; grid-template-columns: 1fr; transform: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .reel-col { flex-direction: row; animation-name: reel-x; animation-duration: 60s; }
  .reel-col:nth-child(2) { display: none; }
  .reel-item { height: 92px; }
  .conv { display: none; }
  .cycle { margin-top: 20px; }
  .reason { grid-template-columns: 40px 1fr; gap: 12px; }
  .crow { grid-template-columns: 78px 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  .works[data-n="3"] .work:last-child { display: grid; grid-template-columns: 44% 1fr; gap: 12px; align-items: center; }
  .works[data-n="3"] .work:last-child .meta { margin-top: 0; }
  .meta p { display: none; }
  .meta { margin-top: 10px; gap: 5px; }
  .meta h3 { font-size: 18px; }
  .meta .host { font-size: 10.5px; }
  .shot.noshot b { font-size: 36px; }
  .dock-row { grid-template-columns: 1fr; justify-items: center; }
  .voice, .chapter { display: none; }
  .dock { gap: 12px; }
  .counter { font-size: 11px; }
  .about .fact:nth-child(2) { display: none; }
}
/* намхан дэлгэц (утас): нэг дэлгэцэнд багтана */
@media (max-height: 900px) and (max-width: 860px) {
  .slide { padding-top: calc(66px + var(--sa-t)); padding-bottom: calc(100px + var(--sa-b)); }
  .head { margin-bottom: 12px; }
  .head .eyebrow { margin-bottom: 8px; }
  h2.display { font-size: clamp(30px, 8.6vw, 40px); }
  .cover h1 { font-size: clamp(34px, 10vw, 46px); margin: 10px 0; }
  .lead { font-size: 14.5px; line-height: 1.55; }
  .about { gap: 10px; }
  .about .big { font-size: clamp(84px, 24vw, 120px); }
  .about .lead { margin: 8px 0 12px; }
  .fact { padding: 8px 0; grid-template-columns: 92px 1fr; }
  .fact dd { font-size: 14px; }
  .sign { margin-top: 12px; }
  .svc { padding: 11px 0; }
  .svc h3 { font-size: 24px; }
  .svc p { font-size: 13px; line-height: 1.5; }
  .reason { padding: 12px 0; }
  .reason h3 { font-size: 21px; margin-bottom: 4px; }
  .reason p { font-size: 13px; line-height: 1.5; }
  .cycle { display: none; }
  .contact h1 { font-size: clamp(36px, 11vw, 48px); margin: 8px 0 14px; }
  .crow { padding: 9px 0; }
  .crow .v { font-size: 17px; }
  .card { padding: 12px 14px; gap: 8px; }
  .card .who b { font-size: 28px; }
  .card .who span { margin-top: 6px; }
  .qr img { width: 72px; padding: 5px; }
  .qr p { font-size: 12.5px; }
  .contact .eyebrow { display: none; }
  .crow { padding: 7px 0; }
  .again { margin-top: 12px; }
  .contact .crow.addr .k { display: none; }
  .contact .crow.addr { grid-template-columns: 1fr; }
  .contact .crow.addr .v { font-size: 14px; color: var(--ink2); }
}
@media (max-height: 700px) and (max-width: 860px) {
  .about .big { font-size: clamp(70px, 20vw, 100px); }
  .about .lead { font-size: 13.5px; margin: 6px 0 8px; }
  .fact { padding: 6px 0; }
  .fact dd { font-size: 13px; }
  .sign { margin-top: 8px; }
  .sign b { font-size: 24px; }
  .crow { padding: 6px 0; }
}
@media (max-height: 420px) and (orientation: landscape) { .wrap { zoom: 0.58 !important; } }
@media (max-height: 560px) and (orientation: landscape) {
  .wrap { zoom: 0.68; }
  .slide { padding-top: calc(50px + var(--sa-t)); padding-bottom: calc(84px + var(--sa-b)); }
  .lead, .meta p, .svc p, .reason p { display: none; }
  .cover, .about, .contact, .why { grid-template-columns: 1fr 0.7fr; gap: 24px; }
  .works, .works[data-n="3"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .works[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .works[data-n="3"] .work:last-child { grid-column: auto; }
  .cycle, .conv { display: none; }
  .reel { order: 0; height: 56svh; grid-template-columns: 1fr 1fr; transform: rotate(-4deg); }
  .reel-col { flex-direction: column; animation-name: reel-up; }
  .reel-col:nth-child(2) { display: flex; }
  .big { font-size: 22svh; }
  .contact h1, .cover h1 { font-size: 8.5svh; }
  .card, .qr p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #droid { transition: none; }
  #droid .d-head, #droid .d-iris-g, #droid .d-tip { animation: none !important; }
  .light, .reel-col, .cycle::after, .conv path { animation: none !important; }
  .rl > i { transform: none; animation: none !important; }
  .fx, .shot, .rule { animation: none !important; opacity: 1; clip-path: none; transform: none; }
  .conv path { stroke-dashoffset: 0; }
  .shot img { transition: none; transform: none !important; }
}

/* ============================ ХААЛТЫН ЭФФЕКТ ============================ */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
#flash { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(55% 55% at var(--fx, 50%) var(--fy, 50%), rgb(77 216 255 / 0.4), rgb(77 216 255 / 0.08) 45%, transparent 72%); }
#flash.on { animation: flash-pop 1.5s ease-out; }
@keyframes flash-pop { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
em.fin { animation: fin-glow 2.6s ease-out; }
@keyframes fin-glow {
  0% { text-shadow: 0 0 0 rgb(77 216 255 / 0); filter: brightness(1); }
  22% { text-shadow: 0 0 26px rgb(77 216 255 / 0.95), 0 0 70px rgb(77 216 255 / 0.55); filter: brightness(1.4); }
  100% { text-shadow: 0 0 0 rgb(77 216 255 / 0); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) { #flash.on { animation-duration: 0.01s; } em.fin { animation: none; } }


/* ============================ ЭХЛҮҮЛЭХ УРСГАЛ ============================ */
#start { overflow-y: auto; }
.start-in { margin: auto; }
.start-slot { display: none; }
.liveinfo { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 500 11.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.liveinfo b { color: var(--ink); font-weight: 500; }
.liveinfo [hidden] { display: none; }
.step { display: none; flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; }
.step.on { display: flex; animation: fx-up 0.7s var(--ease) both; }
.start-in .display { font-size: clamp(36px, 7vw, 80px); }
.start-in .display span, .start-in .display em { display: block; }
.start-in .display span { color: var(--ink); }
.btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border: 1px solid var(--line2); border-radius: 99px; color: var(--ink); font: 600 16px var(--sans); background: rgb(255 255 255 / 0.03); transition: background 0.25s, border-color 0.25s, transform 0.35s var(--ease); }
.btn-ghost:hover { background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.5); transform: translateY(-2px); }
.start-links { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.start-links a.btn-link { display: inline-block; }
.urlbox { margin: 0; font: 300 clamp(26px, 4vw, 44px) / 1.1 var(--serif); letter-spacing: -0.01em; padding: 14px 20px; border: 1px solid var(--line2); background: rgb(13 19 37 / 0.5); }

/* түр хүлээх: minute slider + тоолуур */
.wsel { width: min(520px, 100%); display: grid; gap: 10px; }
.mins { display: flex; align-items: baseline; gap: 12px; }
.mins b { font: 300 clamp(72px, 13vw, 128px) / 0.9 var(--serif); letter-spacing: -0.04em; font-variant-numeric: lining-nums; }
.mins span { font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
#waitRange { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; --p: 29%; }
#waitRange::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--acc) var(--p), rgb(255 255 255 / 0.22) var(--p)); }
#waitRange::-moz-range-track { height: 2px; border-radius: 2px; background: rgb(255 255 255 / 0.22); }
#waitRange::-moz-range-progress { height: 2px; background: var(--acc); }
#waitRange::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -11px; border-radius: 50%; background: var(--ink); border: 5px solid var(--bg); box-shadow: 0 0 0 1.5px var(--acc), 0 0 20px rgb(77 216 255 / 0.5); transition: transform 0.2s var(--ease); }
#waitRange:active::-webkit-slider-thumb { transform: scale(1.2); }
#waitRange::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 5px solid var(--bg); box-shadow: 0 0 0 1.5px var(--acc), 0 0 20px rgb(77 216 255 / 0.5); }
.ticks { display: flex; justify-content: space-between; font: 500 11px var(--mono); letter-spacing: 0.1em; color: var(--mute); }
.ticks i { font-style: normal; }
.wcount { display: none; align-items: center; gap: 24px; }
.ring { position: relative; width: 150px; height: 150px; flex: none; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring .rt { fill: none; stroke: rgb(255 255 255 / 0.12); stroke-width: 3; }
.ring .rp { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 389.6; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 70px 70px; transition: stroke-dashoffset 0.25s linear; }
.ring b { font: 300 38px var(--serif); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
#start:not([data-w="sel"]) .wsel { display: none; }
#start:not([data-w="sel"]) .wcount { display: flex; }
#start[data-w="sel"] #waitNow { display: none; }
#start:not([data-w="sel"]) #waitGo { display: none; }
#start[data-w="ready"] .ring .rp { stroke: #3be58f; }

/* холбоо барих хаягийг хадгалах */
.vcf { align-self: flex-start; padding: 11px 18px; border: 1px solid var(--line2); border-radius: 99px; color: var(--ink); font: 600 13.5px var(--sans); transition: background 0.25s, border-color 0.25s; }
.vcf:hover { background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.5); }

@media (max-width: 860px) {
  .qr img, .qr p { display: none; }
  .vcf { background: var(--ink); color: #07090f; border-color: var(--ink); padding: 13px 20px; }
}
@media (max-width: 639px) {
  .start-slot { display: block; height: 62px; }
  .start-in { gap: 14px; }
  .step { gap: 14px; }
  .start-in .display { font-size: clamp(32px, 9.4vw, 44px); }
  .btn-solid, .btn-ghost { padding: 14px 22px; font-size: 15px; }
  .hint { display: none; }
  .ring { width: 118px; height: 118px; }
  .ring b { font-size: 30px; }
  .wcount { gap: 16px; }
}
@media (max-height: 700px) and (max-width: 639px) {
  .start-slot { height: 54px; }
  .sub { font-size: 14px; line-height: 1.5; }
  .liveinfo { font-size: 10.5px; gap: 4px 14px; }
}

/* намхан (хэвтээ утас) эхлүүлэх хуудас: бүх товч нэг дэлгэцэд */
@media (max-height: 520px) {
  #start { padding: 14px 20px; }
  .start-in, .step { gap: 8px; }
  .start-in .display { font-size: clamp(26px, 9.5svh, 40px); }
  .start-in .display span, .start-in .display em { display: inline; }
  .start-in .display span { margin-right: 0.3em; }
  .sub, .hint { display: none; }
  .liveinfo { font-size: 10px; gap: 4px 14px; }
  .mins b { font-size: 54px; }
  .wsel { gap: 4px; }
  .ring { width: 92px; height: 92px; }
  .ring b { font-size: 22px; }
  .urlbox { font-size: 22px; padding: 8px 12px; }
  .btn-solid, .btn-ghost { padding: 10px 18px; font-size: 14px; }
  .start-links { margin-top: 0; }
}


/* ============================ ЭХЛҮҮЛЭХ ХУУДАСНЫ АМЬД МЭДЭЭЛЛИЙН МӨР ============================ */
.liveinfo { align-items: center; gap: 8px 10px; }
.lc { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: rgb(255 255 255 / 0.03); overflow: hidden; white-space: nowrap;
  animation: lc-in 0.9s var(--ease) both; animation-delay: calc(var(--k, 0) * 120ms + 200ms); }
.lc::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 0.16) 50%, transparent 65%); transform: translateX(-130%);
  animation: lc-sheen 6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 0.9s + 2s); }
@keyframes lc-in { from { opacity: 0; transform: translateY(10px) scale(0.96); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lc-sheen { 0%, 62% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.lc b { color: var(--ink); font-weight: 500; }
.pd { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); animation: pd-pulse 1.8s ease-in-out infinite; flex: none; }
@keyframes pd-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.55); opacity: 0.5; } }
.tm { display: inline-flex; font-variant-numeric: tabular-nums; }
.colon { animation: colon-blink 1s steps(1) infinite; margin: 0 1px; }
@keyframes colon-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.15; } }
#ltM.flip { animation: m-flip 0.6s var(--ease); }
@keyframes m-flip { from { transform: translateY(-70%); opacity: 0; filter: blur(2px); } to { transform: none; opacity: 1; filter: none; } }
.odo { display: inline-flex; align-items: center; }
.od { display: inline-block; height: 1.25em; line-height: 1.25em; overflow: hidden; vertical-align: middle; }
.odr { display: block; transform: translateY(calc(var(--d, 0) * -1.25em)); transition: transform 1.6s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 250ms); }
.odr i { display: block; height: 1.25em; font-style: normal; }
.wt { opacity: 0.85; }
.wi { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.w-spin { transform-origin: 12px 12px; animation: w-spin 16s linear infinite; }
.w-spin.small { transform-origin: 8px 8px; }
@keyframes w-spin { to { transform: rotate(360deg); } }
.w-glow { animation: w-glow 3.2s ease-in-out infinite; }
@keyframes w-glow { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; filter: drop-shadow(0 0 3px var(--acc)); } }
.w-star { animation: w-twinkle 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.w-star.s2 { animation-delay: -1.1s; }
@keyframes w-twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1); } }
.w-drift { animation: w-drift 5s ease-in-out infinite; }
@keyframes w-drift { 0%, 100% { transform: translateX(-1.1px); } 50% { transform: translateX(1.1px); } }
.w-fall { animation: w-fall 1.15s linear infinite; }
.w-fall.d2 { animation-delay: 0.38s; } .w-fall.d3 { animation-delay: 0.76s; }
.w-fall.flake { animation-duration: 2.2s; }
@keyframes w-fall { 0% { transform: translateY(-2px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(3.4px); opacity: 0; } }
.w-slide { animation: w-slide 4s ease-in-out infinite; }
.w-slide.f2 { animation-delay: -1.3s; } .w-slide.f3 { animation-delay: -2.6s; }
@keyframes w-slide { 0%, 100% { transform: translateX(-1.6px); } 50% { transform: translateX(1.6px); } }
.w-bolt { animation: w-bolt 2.6s infinite; fill: var(--acc); }
@keyframes w-bolt { 0%, 8%, 100% { opacity: 1; } 4%, 12% { opacity: 0.15; } }
.w-coin { transform-box: fill-box; transform-origin: center; animation: w-coin 5s ease-in-out infinite; }
@keyframes w-coin { 0%, 40%, 100% { transform: scaleX(1); } 55% { transform: scaleX(0.12); } 70% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .lc, .lc::after, .pd, .colon, #ltM.flip, .w-spin, .w-glow, .w-star, .w-drift, .w-fall, .w-slide, .w-bolt, .w-coin { animation: none !important; }
  .odr { transition: none; }
}
@media (max-width: 639px) {
  .lc { padding: 5px 10px; font-size: 10.5px; }
  .wi { width: 16px; height: 16px; }
}

.liveinfo { width: max-content; max-width: min(940px, calc(100vw - 40px)); }
@media (max-width: 639px) { .liveinfo { max-width: 100%; } .lc { padding: 5px 9px; gap: 6px; } .wt { display: none; } }
#start { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 639px) { .liveinfo { width: auto; max-width: 100%; } }


/* ============================ ДРОИДЫН МЭНДЧИЛГЭЭ (амаар хэлэх цаг агаар, ханш) ============================ */
.brief { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; width: 100%; min-height: 46px; }
.brief[data-s="off"] { visibility: hidden; }
.brief-btn { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 16px; border: 1px solid var(--line2); border-radius: 99px; background: rgb(255 255 255 / 0.04); color: var(--ink); font: 600 14px var(--sans);
  transition: background 0.25s, border-color 0.25s, transform 0.35s var(--ease); }
.brief-btn:hover { background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.5); transform: translateY(-1px); }
.eqb { display: inline-flex; align-items: center; gap: 2.5px; height: 16px; }
.eqb b { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--acc); transform: scaleY(0.3); }
.brief[data-s="play"] .eqb b { animation: eqb 0.95s ease-in-out infinite; animation-delay: calc(var(--j) * -0.21s); }
body[data-muted="1"] .brief[data-s="play"] .eqb b { animation: none; opacity: 0.45; }
@keyframes eqb { 0%, 100% { transform: scaleY(0.28); } 50% { transform: scaleY(1); } }
.brief[data-s="ready"] .brief-btn { border-color: rgb(77 216 255 / 0.55); animation: brief-pulse 2.6s ease-in-out infinite; }
@keyframes brief-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(77 216 255 / 0.32); } 55% { box-shadow: 0 0 0 11px rgb(77 216 255 / 0); } }
.brief-cap { flex: 1 1 200px; min-width: 0; color: var(--ink2); font: 400 15px/1.45 var(--sans); }
.brief-cap.sw { animation: cap-in 0.55s var(--ease) both; }
@keyframes cap-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lc { transition: border-color 0.5s, box-shadow 0.5s, background 0.5s; }
.lc.hl { border-color: rgb(77 216 255 / 0.65); background: rgb(77 216 255 / 0.1); box-shadow: 0 0 24px rgb(77 216 255 / 0.3); }
#goBtn.nudge { animation: go-nudge 1.8s ease-in-out infinite; }
@keyframes go-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgb(242 245 250 / 0.38); } 55% { box-shadow: 0 0 0 15px rgb(242 245 250 / 0); } }
@media (prefers-reduced-motion: reduce) {
  .brief[data-s="play"] .eqb b, .brief[data-s="ready"] .brief-btn, .brief-cap.sw, #goBtn.nudge { animation: none; }
  .eqb b { transform: scaleY(0.7); }
}
@media (max-width: 639px) {
  .brief { gap: 8px 12px; min-height: 40px; }
  .brief-btn { padding: 9px 16px 9px 13px; font-size: 13.5px; }
  .brief-cap { font-size: 14px; }
}
@media (max-height: 700px) and (max-width: 639px) { .start-in .sub { display: none; } }
@media (max-height: 520px) {
  .brief { flex-wrap: nowrap; min-height: 34px; gap: 10px; }
  .brief-btn { padding: 7px 14px 7px 12px; font-size: 13px; }
  .brief-cap { font-size: 13px; line-height: 1.3; }
}

/* мэндчилгээний мөрийн өндөр тогтвортой: тайлбар солигдоход доорх зүйлс үсрэхгүй */
.brief-cap { min-height: 2.9em; }
@media (max-width: 639px) { .brief-cap { flex-basis: 100%; min-height: 4.2em; font-size: 13.5px; } }
@media (max-height: 680px) and (min-width: 640px) { .start-in .sub { display: none; } }
@media (max-height: 520px) { .brief-cap { min-height: 2.6em; padding-right: 74px; } }
@media (max-height: 680px) and (min-width: 640px) { .start-in, .start-in .step { gap: 14px; } }
@media (max-height: 360px) { .brief-cap, .start-in .eyebrow { display: none; } .brief { min-height: 32px; } }


/* ============================ 08 ӨӨРӨӨ ТУРШААРАЙ (амьд demo) ============================ */
.try-list { border-top: 1px solid var(--line); }
.try { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: var(--m); align-items: center; padding: clamp(14px, 3.2svh, 30px) 0; border-bottom: 1px solid var(--line); position: relative; transition: background 0.4s; }
.try .n { font: 500 12px var(--mono); letter-spacing: 0.14em; color: var(--acc); }
.try h3 { font: 400 clamp(24px, min(3.2vw, 5.6svh), 46px) / 1.08 var(--serif); letter-spacing: -0.02em; transition: transform 0.5s var(--ease), color 0.3s; }
.try p { color: var(--ink2); font-size: clamp(14px, 1.3vw, 16.5px); line-height: 1.55; max-width: 32em; margin-top: 8px; }
.try:hover h3 { transform: translateX(10px); color: #fff; }
.try .act { display: grid; justify-items: end; gap: 8px; text-align: right; }
.try .act b { font: 400 clamp(24px, 2.8vw, 42px) / 1 var(--serif); letter-spacing: -0.015em; white-space: nowrap; }
.try .act i { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); font-style: normal; }
.try .act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--ease); }
.try:hover .act svg { transform: translateX(6px); }
@media (max-width: 1000px) { .try { grid-template-columns: 56px minmax(0, 1fr); gap: 8px 18px; } .try .act { grid-column: 2; justify-items: start; text-align: left; grid-auto-flow: column; gap: 14px; align-items: baseline; justify-content: start; } .try .act b { font-size: 24px; } }
@media (min-width: 861px) and (max-height: 800px) { .try { padding: clamp(10px, 2.2svh, 22px) 0; } .try h3 { font-size: clamp(22px, min(2.9vw, 5svh), 38px); } .try p { margin-top: 4px; font-size: 14.5px; } }
@media (max-height: 900px) and (max-width: 860px) { .try { padding: 11px 0; } .try h3 { font-size: 23px; } .try p { font-size: 13px; line-height: 1.45; margin-top: 3px; } .try .act b { font-size: 20px; } }
@media (max-height: 700px) and (max-width: 860px) { .try { padding: 8px 0; } .try p { display: none; } }
@media (max-height: 560px) and (orientation: landscape) { .try p { display: none; } .try { padding: 8px 0; } }

/* ============================ ХОЛБОО БАРИХЫГ ХҮСЭХ МАЯГ ============================ */
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 22px; }
.acts .again { margin-top: 0 !important; }
.lead-open { padding: 11px 20px; border-radius: 99px; background: var(--ink); color: #07090f; font: 600 13.5px var(--sans); transition: background 0.25s, transform 0.35s var(--ease); }
.lead-open:hover { background: #fff; transform: translateY(-1px); }
.lead-open[hidden] { display: none; }
#lead { position: fixed; z-index: 12; inset: 0; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: rgb(5 7 13 / 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.3s; }
#lead[hidden] { display: none; }
#lead.on { opacity: 1; }
.lead-box { position: relative; width: min(500px, 100%); margin: auto; display: grid; gap: 14px; padding: clamp(22px, 4vw, 34px); border: 1px solid var(--line2); background: rgb(13 19 37 / 0.96); transform: translateY(14px); transition: transform 0.5s var(--ease); }
#lead.on .lead-box { transform: none; }
.lead-box .display { font-size: clamp(30px, 6vw, 44px); }
.lead-box .display span, .lead-box .display em { display: block; }
.lead-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; font-size: 26px; line-height: 1; color: var(--ink2); border-radius: 50%; }
.lead-x:hover { color: var(--ink); background: rgb(255 255 255 / 0.08); }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line2); border-radius: 99px; padding: 3px; gap: 3px; }
.seg label { display: block; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; text-align: center; padding: 9px 10px; border-radius: 99px; font: 600 14px var(--sans); color: var(--ink2); transition: background 0.25s, color 0.25s; }
.seg input:checked + span { background: var(--ink); color: #07090f; }
.seg input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.fld { display: grid; gap: 6px; }
.fld[hidden] { display: none; }
.fld > span { font: 500 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.fld > span i { font-style: normal; opacity: 0.7; text-transform: none; letter-spacing: 0.04em; }
.fld input, .fld textarea { width: 100%; padding: 12px 14px; font: 400 16px var(--sans); color: var(--ink); background: rgb(255 255 255 / 0.04); border: 1px solid var(--line2); border-radius: 0; resize: none; transition: border-color 0.2s, background 0.2s; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--acc); background: rgb(77 216 255 / 0.06); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-fine { font-size: 12.5px; line-height: 1.5; color: var(--mute); }
.lead-msg { min-height: 1.4em; font: 500 13.5px/1.4 var(--sans); color: var(--ink2); }
.lead-msg[data-k="ok"] { color: #3be58f; }
.lead-msg[data-k="err"] { color: #ff9fb3; }
.lead-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lead-actions .btn-solid { padding: 14px 26px; font-size: 15px; }
@media (max-height: 640px) { .lead-box { gap: 9px; padding: 16px; } .lead-box .display { font-size: 26px; } .lead-box .display span, .lead-box .display em { display: inline; } .lead-fine { display: none; } .fld input, .fld textarea { padding: 9px 12px; } }
.lead-open .l-m { display: none; }
@media (max-width: 860px) {
  .lead-open .l-d { display: none; } .lead-open .l-m { display: inline; }
  .acts { gap: 10px 18px; margin-top: 14px; }
  .lead-open { padding: 9px 16px; font-size: 13px; }
}
@media (max-height: 700px) and (max-width: 860px) { .acts { margin-top: 8px; } .lead-open { padding: 7px 14px; } }
@media (min-width: 861px) and (max-height: 700px) { .acts { margin-top: 12px; gap: 10px 20px; } .lead-open { padding: 8px 16px; font-size: 13px; } }
/* 1024x600 зэрэг намхан ноутбук: нүүр, холбоо барих слайд багтана */
@media (min-width: 861px) and (max-height: 640px) {
  .cover h1 { font-size: clamp(32px, min(4.8vw, 7.6svh), 72px); margin: 8px 0; }
  .cover .lead { font-size: 14.5px; }
  .contact h1 { font-size: clamp(34px, min(5vw, 8svh), 72px); margin: 8px 0 12px; }
  .crow { padding: 6px 0; }
  .card { padding: 16px; gap: 10px; }
  .qr img { width: 92px; }
}