/* ============================================================================
   SMARTSITE — «ХӨШИГ» нүүр хуудасны кино дүр зураг
   Хөшиг нээгдэж → MacBook гарч ирж → дэлгэц рүү нь ОРЖ → дараагийн хэсэг болно.
   Бүх зүйл scoped: .cn-* (design system-ийн токенуудыг бохирдуулахгүй).
   JS зөвхөн transform/opacity/clip-path бичнэ — layout reflow байхгүй.
   ========================================================================== */

.cn {
  /* Тайзны өнгө — theme-ээс хамаарахгүй, үргэлж бараан (тайз бол бараан) */
  --cn-black:  #080808;
  --cn-black2: #0b0b0b;
  --cn-black3: #101010;
  --cn-ink:    #f4f3f2;
  --cn-ink-2:  rgba(244,243,242,.62);
  --cn-ink-3:  rgba(244,243,242,.54);

  /* Хөшигний улаанууд */
  --cn-red-1: #c40000;   /* хамгийн гэрэлтэй ирмэг */
  --cn-red-2: #b00000;
  --cn-red-3: #960000;
  --cn-red-4: #7a0000;
  --cn-red-5: #4a0000;   /* атираа доторх сүүдэр */
  --cn-red-6: #260000;

  /* JS-ээс бичигддэг геометр */
  --cn-vh: 100vh;
  --cn-vw: 100vw;
  --cn-scr-w: 720px;      /* дэлгэцний өргөн (bezel-гүй) */
  --cn-scr-h: 450px;
  --cn-scr-top: 190px;    /* дэлгэцний дээд ирмэгийн Y (S=1 үед) */
  --cn-bez: 13px;
  --cn-hero-h: 900px;     /* дэлгэц доторх сайтын эхний дэлгэцийн өндөр */

  position: relative;
  display: block;
  background: var(--cn-black);
  color: var(--cn-ink);
}

/* ── Тайз: гүйлгэлтийн урт (pin-ний хугацаа) ── */
.cn-stage { position: relative; height: calc(var(--cn-vh) * 2.8); }

.cn-pin {
  position: sticky; top: 0;
  height: var(--cn-vh);
  overflow: hidden;
  background: var(--cn-black);
  isolation: isolate;
  contain: layout paint;
}

/* ── Студийн орчин: гэрэл, шал ── */
.cn-room { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cn-room::before {           /* төхөөрөмжийн ард зөөлөн студийн гэрэл */
  content: ""; position: absolute; left: 50%; top: 42%;
  width: 128%; height: 96%; transform: translate(-50%, -50%);
  background:
    radial-gradient(46% 40% at 50% 46%, rgba(255,238,232,.125), transparent 68%),
    radial-gradient(70% 58% at 50% 62%, rgba(150,20,20,.14), transparent 72%);
  opacity: var(--cn-room-o, 0);
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1);
}
.cn-room::after {            /* хамгийн доод талын шалны шугам */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.55) 62%, #000);
}

/* ══════════════════════════════════════════════════════════════════════════
   ХӨШИГ
   Панел бүр 3 давхарга: back (гүн атираа) · main (даавуу) · sheen (гэрлийн туяа)
   Гурав нь өөр өөр scaleX-ээр хариулж parallax гүн үүсгэнэ.
   ═════════════════════════════════════════════════════════════════════════ */
.cn-cur {
  position: absolute; top: -2%; bottom: -2%;
  width: 54%;
  z-index: 6;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
}
.cn-cur-l { left: 0;  transform-origin: 0% 0%; }
.cn-cur-r { right: 0; transform-origin: 100% 0%; }

/* Дотор ирмэгийн жигд бус контур — даавуу шулуун байдаггүй */
.cn-cur-l { clip-path: polygon(0 0, 100% 0, 99.1% 7%, 99.9% 15%, 98.8% 27%, 99.7% 38%,
            98.6% 51%, 99.8% 63%, 98.9% 74%, 99.6% 86%, 98.8% 94%, 100% 100%, 0 100%); }
.cn-cur-r { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 1.2% 94%, .4% 86%,
            1.1% 74%, .2% 63%, 1.4% 51%, .3% 38%, 1.2% 27%, .1% 15%, .9% 7%); }

.cn-cur-lay { position: absolute; inset: 0; will-change: transform; backface-visibility: hidden; }
.cn-cur { will-change: transform; }
.cn-cur-l .cn-cur-lay { transform-origin: 0% 0%; }
.cn-cur-r .cn-cur-lay { transform-origin: 100% 0%; }

/* Давхарга 1 — гүн, бараан атираа (удаан хариулна = хол) */
.cn-cur-back {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.60) 0px, rgba(0,0,0,.24) 28px, rgba(255,255,255,.025) 96px,
      rgba(0,0,0,.22) 154px, rgba(0,0,0,.60) 191px),
    linear-gradient(178deg, var(--cn-red-4) 0%, var(--cn-red-3) 26%, var(--cn-red-4) 62%, var(--cn-red-6) 100%);
}
/* Давхарга 2 — үндсэн даавуу: атираа + нэхээсийн бүтэц */
.cn-cur-main {
  background-image:
    /* нэхээс — маш нарийн */
    repeating-linear-gradient(90deg, rgba(0,0,0,.030) 0 1px, rgba(255,255,255,.014) 1px 3px),
    /* хоёр дахь давтамж: атираануудыг ижилхэн болгохгүй (beat) */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.15) 0px, rgba(255,255,255,.035) 63px, rgba(0,0,0,.15) 139px),
    /* үндсэн атираа: ховил → өгсүүр → гэрэлтсэн нуруу → уруудуур → ховил */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.54) 0px,
      rgba(0,0,0,.36) 15px,
      rgba(0,0,0,.07) 39px,
      rgba(255,255,255,.075) 59px,
      rgba(0,0,0,.06) 80px,
      rgba(0,0,0,.32) 102px,
      rgba(0,0,0,.54) 118px),
    /* дээрээс гэрэл, доошоо гүн — тайзны гэрэлтүүлэг */
    linear-gradient(180deg,
      rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 15%, rgba(0,0,0,0) 40%,
      rgba(0,0,0,.22) 76%, rgba(0,0,0,.50) 100%),
    /* даавууны өнгө */
    linear-gradient(178deg, #a40404 0%, var(--cn-red-3) 32%, var(--cn-red-4) 68%, #560000 100%);
}
/* Давхарга 3 — гэрлийн туяа: нээгдэх үед даавуу дээгүүр гүйнэ */
.cn-cur-sheen {
  background-image: linear-gradient(100deg,
    transparent 0%, rgba(255,190,175,.055) 34%, rgba(255,225,215,.11) 47%,
    rgba(255,190,175,.05) 60%, transparent 100%);
  background-size: 62% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: .9;
}
/* Дээд төмөр (rail) сүүдэр — алт, чимэглэлгүй */
.cn-cur::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9%;
  background: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.16) 62%, transparent);
  z-index: 3;
}
/* Дотор ирмэг: ард талын гэрэлд ирмэг нь нимгэн гэрэлтэж, дотогшоо сүүдэрлэнэ */
.cn-cur::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 22%;
  z-index: 3;
}
.cn-cur-l::after {
  right: 0;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.42) 72%, rgba(255,150,130,.16) 97%, rgba(255,200,180,.30));
}
.cn-cur-r::after {
  left: 0;
  background: linear-gradient(to left, transparent, rgba(0,0,0,.42) 72%, rgba(255,150,130,.16) 97%, rgba(255,200,180,.30));
}

.cn-vig {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.42) 100%),
    radial-gradient(126% 104% at 50% 44%, rgba(0,0,0,0) 40%, rgba(0,0,0,.44) 100%);
}

/* Хөшигний унжсан сүүдэр — тайзны шаланд ба ард талын гэрэлд */
.cn-seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 12vw;
  transform: translateX(-50%);
  z-index: 8; pointer-events: none;
  background: radial-gradient(38% 52% at 50% 44%, rgba(255,222,205,.12), transparent 72%);
  opacity: var(--cn-seam-o, 0);
}

/* ══════════════════════════════════════════════════════════════════════════
   КАМЕР — perspective + маш бага 3D эргэлт (заавал 1°-с бага)
   ═════════════════════════════════════════════════════════════════════════ */
.cn-cam { position: absolute; inset: 0; z-index: 2; perspective: 1800px; perspective-origin: 50% 46%; }
.cn-cam-in {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  transform: scale(.88);
}

/* ── Дэлгэцний цонх (WebsiteScreen): үргэлж бүтэн viewport хэмжээтэй,
      clip-path-аар л «зөвхөн дэлгэцний хэсэг» болж хайчлагдана.
      Ингэснээр эцэст нь clip 0 болоход яг viewport-той тэнцэнэ. ── */
.cn-win {
  position: absolute; left: 0; top: 0;
  width: var(--cn-vw); height: var(--cn-win-h);
  transform-origin: 50% 0;
  overflow: hidden;
  background: #07070a;
  z-index: 2;
  opacity: 0;
  will-change: transform, clip-path;
  backface-visibility: hidden;
}
.cn-doc {
  width: var(--cn-vw);
  transform-origin: 50% 0;
  will-change: transform;
  pointer-events: none;              /* дотогш ортол линк дарагдахгүй */
  backface-visibility: hidden;
}
.cn.is-inside .cn-doc { pointer-events: auto; }

/* Дэлгэцний шил: маш нарийн тусгал + дээд ирмэгийн bloom */
.cn-glass {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(107deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.012) 26%, transparent 44%),
    linear-gradient(to bottom, rgba(255,255,255,.05), transparent 9%);
  opacity: var(--cn-glass-o, 1);
}

/* ══════════════════════════════════════════════════════════════════════════
   MACBOOK — бүрхүүл. Дэлгэцний нүх нь ил тод (доор нь .cn-win харагдана).
   ═════════════════════════════════════════════════════════════════════════ */
.cn-mac { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; will-change: opacity, transform; }

.cn-lid {
  position: absolute; left: 50%;
  top: calc(var(--cn-scr-top) - var(--cn-bez));
  width: calc(var(--cn-scr-w) + var(--cn-bez) * 2);
  height: calc(var(--cn-scr-h) + var(--cn-bez) * 2);
  transform: translateX(-50%);
  border-radius: calc(var(--cn-bez) + 9px);
  border: var(--cn-bez) solid #18191d;
  background: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.085),         /* bezel-ийн доторх ирмэг */
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 0 1px rgba(255,255,255,.16),                 /* алюминий ирмэгийн rim light */
    0 1px 0 rgba(255,255,255,.26),                   /* дээд ирмэгийн туяа */
    0 -1px 0 rgba(255,255,255,.05),
    0 42px 90px rgba(0,0,0,.72),
    0 0 120px rgba(150,10,10,.10);                   /* хөшигнөөс ойсон улаан */
}
/* Алюминий хүрээний градиент (bezel дээр нимгэн metal тусгал) */
.cn-lid::before {
  content: ""; position: absolute; inset: calc(var(--cn-bez) * -1);
  border-radius: calc(var(--cn-bez) + 9px);
  padding: 1px;
  background: linear-gradient(168deg, rgba(255,255,255,.30), rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 52%, rgba(255,255,255,.09));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* Камерын цэг */
.cn-lid::after {
  content: ""; position: absolute; left: 50%; top: calc(var(--cn-bez) / -2 - 1px);
  width: 4px; height: 4px; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle at 34% 30%, #3a3d45, #0d0e11 70%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05);
}

/* Нугас ба доод бүрхүүл (арай өнцөгтэй харагдана) */
.cn-hinge {
  position: absolute; left: 50%; top: calc(var(--cn-scr-top) + var(--cn-scr-h) + var(--cn-bez));
  width: calc(var(--cn-scr-w) * .30); height: 5px; transform: translateX(-50%);
  border-radius: 0 0 3px 3px;
  background: linear-gradient(to bottom, #16171b, #0c0d10);
}
.cn-deck {
  position: absolute; left: 50%;
  top: calc(var(--cn-scr-top) + var(--cn-scr-h) + var(--cn-bez) + 4px);
  width: calc(var(--cn-scr-w) + var(--cn-bez) * 2 + 42px);
  height: 15px; transform: translateX(-50%);
  clip-path: polygon(1.6% 0, 98.4% 0, 100% 74%, 96.6% 100%, 3.4% 100%, 0 74%);
  background:
    linear-gradient(to bottom, #4a4d55 0%, #303339 14%, #1c1e23 62%, #0e0f12 100%);
  box-shadow: 0 26px 50px rgba(0,0,0,.66);
}
.cn-deck::after {                     /* хурууны ховил */
  content: ""; position: absolute; left: 50%; top: 0;
  width: 13%; height: 3px; transform: translateX(-50%);
  border-radius: 0 0 4px 4px; background: rgba(0,0,0,.55);
}

/* Шалны тусгал ба сүүдэр — маш барьцтай */
.cn-refl {
  position: absolute; left: 50%;
  top: calc(var(--cn-scr-top) + var(--cn-scr-h) + var(--cn-bez) + 20px);
  width: calc(var(--cn-scr-w) * .88); height: calc(var(--cn-scr-h) * .32);
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(150,160,185,.13), rgba(120,130,160,.03) 42%, transparent 78%);
  filter: blur(16px);
  opacity: .8; z-index: 1; pointer-events: none;
}
.cn-shadow {
  position: absolute; left: 50%;
  top: calc(var(--cn-scr-top) + var(--cn-scr-h) + var(--cn-bez) + 12px);
  width: calc(var(--cn-scr-w) * 1.24); height: 74px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.72), transparent 70%);
  z-index: 1; pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   ГАРЧИГ (HeroCopy) — MacBook-тэй тэмцэхгүй: дээр нь гарчиг, доор нь CTA
   ═════════════════════════════════════════════════════════════════════════ */
.cn-copy { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.cn-copy-head {
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--cn-scr-top) - var(--cn-bez) - 14px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--nav-h) 24px 8px; text-align: center;
}
.cn-copy-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  top: calc(var(--cn-scr-top) + var(--cn-scr-h) + var(--cn-bez) + 36px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 0 24px 26px;
}
.cn-eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cn-ink-3); margin-bottom: 16px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
.cn-h1 {
  font-family: var(--font-display); font-weight: 620;
  font-size: clamp(1.9rem, 3.3vw, 3.3rem);
  line-height: 1.03; letter-spacing: -.035em; color: var(--cn-ink);
  margin: 0; max-width: 20ch; text-wrap: balance;
}
.cn-h1 span {
  display: block; overflow: hidden;
}
.cn-h1 span i {
  display: block; font-style: normal;
  transform: translateY(112%);
  transition: transform 1.15s cubic-bezier(.22,.72,.14,1);
}
.cn-h1 span:nth-child(2) i { transition-delay: .09s; }
.cn-sub {
  margin: 18px 0 0; max-width: 46ch; font-size: clamp(.95rem, 1.1vw, 1.06rem);
  line-height: 1.6; color: var(--cn-ink-2);
  opacity: 0; transform: translateY(12px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1) .28s, transform .9s cubic-bezier(.22,.61,.36,1) .28s;
}
.cn.is-copy .cn-eyebrow { opacity: 1; transform: none; }
.cn.is-copy .cn-h1 span i { transform: none; }
.cn.is-copy .cn-sub { opacity: 1; transform: none; }

.cn-ctas {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  pointer-events: auto;
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1) .5s, transform .8s cubic-bezier(.22,.61,.36,1) .5s;
}
.cn.is-copy .cn-ctas { opacity: 1; transform: none; }
.cn-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 24px;
  border-radius: 999px; font-size: .94rem; font-weight: 600; letter-spacing: -.006em;
  text-decoration: none; border: 1px solid transparent; white-space: nowrap;
  transition: background .28s cubic-bezier(.22,.61,.36,1), border-color .28s cubic-bezier(.22,.61,.36,1),
              transform .28s cubic-bezier(.22,.61,.36,1), color .28s cubic-bezier(.22,.61,.36,1);
}
.cn-btn b { font-weight: 600; }
.cn-btn i {
  font-style: normal; display: inline-block;
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.cn-btn:hover { text-decoration: none; transform: translateY(-2px); }
.cn-btn:hover i { transform: translateX(3px); }
.cn-btn:active { transform: translateY(0); }
.cn-btn-1 { background: #f4f3f2; color: #0a0a0a; }
.cn-btn-1:hover { background: #fff; }
.cn-btn-2 { color: var(--cn-ink); border-color: rgba(244,243,242,.22); background: rgba(244,243,242,.03); }
.cn-btn-2:hover { border-color: rgba(244,243,242,.42); background: rgba(244,243,242,.07); }
.cn-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.cn-scrollhint {
  display: flex; flex-direction: column-reverse; align-items: center; gap: 8px;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cn-ink-3);
  opacity: 0; transition: opacity .8s ease .9s;
}
.cn.is-copy .cn-scrollhint { opacity: 1; }
.cn.is-push .cn-copy .cn-scrollhint { opacity: 0; transition-delay: 0s; }
.cn-scrollhint s { display: block; width: 1px; height: 15px; background: currentColor; text-decoration: none; opacity: .45; }

.cn.is-measuring *, .cn.is-measuring *::before, .cn.is-measuring *::after { transition: none !important; }
.cn.is-measuring .cn-eyebrow, .cn.is-measuring .cn-sub, .cn.is-measuring .cn-ctas,
.cn.is-measuring .cn-scrollhint { opacity: 1; transform: none; }
.cn.is-measuring .cn-h1 span i { transform: none; }

/* Эхний хар дэлгэц — ачаалж дуустал (spinner-гүй, хувь-гүй) */
.cn-black {
  position: absolute; inset: 0; z-index: 20; background: #000; pointer-events: none;
  transition: opacity .5s ease;
}
.cn.is-lit .cn-black { opacity: 0; }

/* ── Навигац: хөшиг хаалттай үед үл үзэгдэнэ, нээгдсэний дараа гарч ирнэ ── */
body.cn-home .topbar { position: fixed; left: 0; right: 0; transition: opacity .7s cubic-bezier(.22,.61,.36,1), background var(--t-2) var(--e-out), border-color var(--t-2) var(--e-out); }
body.cn-home.cn-navhide .topbar { opacity: 0; pointer-events: none; }
.cn-static body.cn-home .topbar { position: sticky; opacity: 1; pointer-events: auto; }
body.cn-home.cn-dark .topbar {
  --text: #f4f3f2; --text-2: rgba(244,243,242,.66); --text-3: rgba(244,243,242,.46);
  --border: rgba(255,255,255,.10); --surface: rgba(255,255,255,.06);
  --accent: #7f9bff; --accent-ink: #06080f; --accent-2: #9ab0ff;
  background: rgba(8,8,8,.55); border-bottom-color: transparent;
  color: #f4f3f2;
}
body.cn-home.cn-dark .topbar .brand { color: #f4f3f2; }
body.cn-home.cn-dark .topbar .btn.primary { background: #f4f3f2; color: #0a0a0a; }
/* Кино дүр зураг үргэлжилж байхад наалдамхай CTA гарч ирж дүрийг эвдэхгүй */
body.cn-home.cn-dark .sticky-cta.show { transform: translateY(120%); }
body.cn-home.cn-dark .topbar .btn.primary:hover { background: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   ДЭЛГЭЦЭН ДОТОРХ САЙТ (.cw-*) — SMARTSITE-ээр хийсэн зохиомол брэндийн сайт.
   Бүтэн viewport өргөнөөр зурагдаж, MacBook дотор ~0.5 масштабаар харагдана;
   дотогш «ороход» яг 1:1 болно — тиймээс бүдгэрэхгүй.
   ═════════════════════════════════════════════════════════════════════════ */
.cw {
  height: var(--cn-hero-h);
  display: flex; flex-direction: column;
  background: #f1ece5; color: #191512;
  font-family: var(--font);
  overflow: hidden;
}
.cw-nav {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 40px; height: 78px; padding: 0 clamp(26px, 4.6vw, 86px);
  border-bottom: 1px solid rgba(25,21,18,.12);
}
.cw-logo {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
}
.cw-links { display: flex; gap: 34px; font-size: 13px; letter-spacing: .04em; color: rgba(25,21,18,.72); }
.cw-bag { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(25,21,18,.64); }

.cw-hero {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1.02fr .98fr; align-items: center;
  gap: clamp(30px, 4vw, 74px);
  padding: clamp(24px, 3.4vw, 58px) clamp(26px, 4.6vw, 86px) 0;
}
.cw-hero-l > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity .95s cubic-bezier(.22,.61,.36,1), transform .95s cubic-bezier(.22,.61,.36,1);
}
.cn.is-screen .cw-hero-l > * { opacity: 1; transform: none; }
.cn.is-screen .cw-hero-l > :nth-child(2) { transition-delay: .10s; }
.cn.is-screen .cw-hero-l > :nth-child(3) { transition-delay: .19s; }
.cn.is-screen .cw-hero-l > :nth-child(4) { transition-delay: .27s; }

.cw-eyebrow {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(25,21,18,.68);
}
.cw-h {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 4.9vw, 82px); line-height: 1.0; letter-spacing: -.038em;
  margin: clamp(14px, 1.6vw, 26px) 0 0;
}
.cw-h em { font-style: normal; color: rgba(25,21,18,.42); }
.cw-p {
  margin: clamp(12px, 1.4vw, 22px) 0 0; max-width: 34ch;
  font-size: clamp(12px, .95vw, 16px); line-height: 1.66; color: rgba(25,21,18,.68);
}
.cw-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(16px, 1.9vw, 30px);
  font-size: clamp(11px, .82vw, 13px); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: 7px; border-bottom: 1px solid rgba(25,21,18,.45);
}
.cw-hero-r { position: relative; height: 100%; display: flex; align-items: center; }

/* «Гэрэл зураг» — студийн гэрэлтэй натюрморт мэт зөөлөн композицууд */
.cw-ph { position: relative; width: 100%; overflow: hidden; }
.cw-ph::before {                     /* нэхээсийн ор — макро зураг мэт */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    repeating-linear-gradient(94deg,
      rgba(0,0,0,.10) 0px, rgba(0,0,0,.02) 6px, rgba(255,255,255,.075) 13px,
      rgba(0,0,0,.02) 20px, rgba(0,0,0,.10) 26px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.032) 0px, rgba(255,255,255,.022) 9px, rgba(0,0,0,.032) 19px);
  opacity: .9;
}
.cw-ph::after {                      /* студийн гэрэл + винъет */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    /* эвхэрсэн даавууны зөөлөн атираа — гэрлийн өргөн зурвас */
    linear-gradient(112deg, rgba(0,0,0,.16) 0%, rgba(255,252,246,.24) 32%,
      rgba(255,250,240,.06) 46%, rgba(0,0,0,.20) 74%, rgba(0,0,0,.30) 100%),
    radial-gradient(46% 38% at 32% 22%, rgba(255,250,240,.40), transparent 72%),
    radial-gradient(82% 68% at 50% 50%, transparent 30%, rgba(34,22,13,.44));
}
.cw-ph-1 { height: min(78%, 520px); background: linear-gradient(158deg, #cdb79f 0%, #ab9077 48%, #6f5942 100%); }
.cw-ph-2 { background: linear-gradient(150deg, #c6b19c, #85705a); }
.cw-ph-3 { background: linear-gradient(150deg, #b0a08f, #665648); }
.cw-ph-4 { background: linear-gradient(150deg, #cdb59c, #7d6450); }

.cw-row {
  flex: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 38px);
  padding: clamp(18px, 2.2vw, 34px) clamp(26px, 4.6vw, 86px) clamp(20px, 2.6vw, 40px);
  border-top: 1px solid rgba(25,21,18,.12);
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s cubic-bezier(.22,.61,.36,1) .34s, transform 1s cubic-bezier(.22,.61,.36,1) .34s;
}
.cn.is-screen .cw-row { opacity: 1; transform: none; }
.cw-card { display: flex; gap: clamp(10px, 1.1vw, 18px); align-items: center; }
.cw-card .cw-ph { width: clamp(46px, 5.2vw, 92px); height: clamp(58px, 6.6vw, 116px); flex: none; }
.cw-card b { display: block; font-family: var(--font-display); font-size: clamp(12px, 1.05vw, 18px); font-weight: 600; letter-spacing: -.015em; }
.cw-card span { display: block; margin-top: 4px; font-size: clamp(10px, .8vw, 13px); color: rgba(25,21,18,.64); }

/* ══════════════════════════════════════════════════════════════════════════
   ДЭЛГЭЦ РҮҮ ОРСНЫ ДАРААХ ХЭСЭГ — дэлгэц доторх сайтын дараагийн дэлгэц.
   Яг viewport-ын өндөртэй тул pin дуусахад аяндаа хуудас болж үргэлжилнэ.
   ═════════════════════════════════════════════════════════════════════════ */
.cn-intro {
  height: var(--cn-vh); background: var(--cn-black2); color: var(--cn-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 clamp(24px, 5vw, 90px);
  position: relative;
}
.cn-intro::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.14), transparent);
}
.cn-intro .cn-eyebrow { opacity: 1; transform: none; margin-bottom: 22px; }
.cn-intro h2 {
  font-family: var(--font-display); font-weight: 620;
  font-size: clamp(1.7rem, 3.5vw, 3.2rem); line-height: 1.06; letter-spacing: -.034em;
  max-width: 18ch;
}
.cn-intro h2 em { font-style: normal; color: var(--cn-ink-3); }
.cn-intro p { margin-top: 20px; max-width: 48ch; color: var(--cn-ink-2); font-size: clamp(.94rem, 1.1vw, 1.05rem); line-height: 1.62; }
.cn-intro .cn-scrollhint { opacity: 0; position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); transition: opacity .7s ease; }
.cn.is-inside .cn-intro .cn-scrollhint, .cn-static .cn .cn-intro .cn-scrollhint { opacity: .75; }

/* ══════════════════════════════════════════════════════════════════════════
   ХОЁРДУГААР ДҮР ЗУРАГ — үйлчилгээнүүд «сансарт хөвөх сайтын зурагнууд» болж
   ═════════════════════════════════════════════════════════════════════════ */
.cn-sv { position: relative; background: var(--cn-black2); padding: clamp(56px, 7vw, 104px) 0 clamp(24px, 4vw, 56px); }
.cn-sv-in { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(22px, 4vw, 54px); }
.cn-sv-head { max-width: 30ch; margin-bottom: clamp(34px, 4.4vw, 62px); }
.cn-sv-head h2 {
  font-family: var(--font-display); font-weight: 620; color: var(--cn-ink);
  font-size: clamp(1.5rem, 2.9vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; margin-top: 16px;
}
.cn-sv-head p { margin-top: 16px; color: var(--cn-ink-2); font-size: 1rem; line-height: 1.62; max-width: 46ch; }

.cn-sv-item {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(26px, 4.4vw, 68px);
  padding: clamp(24px, 2.8vw, 42px) 0;
}
.cn-sv-item:nth-child(even) .cn-sv-txt { order: 2; }
.cn-sv-n { font-size: .74rem; letter-spacing: .2em; color: var(--cn-ink-3); }
.cn-sv-txt h3 {
  font-family: var(--font-display); font-weight: 620; color: var(--cn-ink);
  font-size: clamp(1.25rem, 2.2vw, 1.85rem); letter-spacing: -.028em; margin-top: 12px;
}
.cn-sv-txt p { margin-top: 12px; color: var(--cn-ink-2); font-size: .96rem; line-height: 1.64; max-width: 40ch; }

/* Хөвж яваа «сайтын зураг» */
.cn-cv {
  position: relative; aspect-ratio: 16 / 9.6; border-radius: 10px; overflow: hidden;
  background: #14151a;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 40px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.03);
  transform: perspective(1400px) rotateY(var(--ry, 0deg)) translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.cn-sv-item:nth-child(odd)  .cn-cv { --ry: -5deg; }
.cn-sv-item:nth-child(even) .cn-cv { --ry: 5deg; }
.cn-cv-bar { height: 9%; min-height: 16px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: rgba(255,255,255,.045); border-bottom: 1px solid rgba(255,255,255,.06); }
.cn-cv-bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.2); }
.cn-cv-bar u { flex: 1; height: 9px; margin-left: 8px; border-radius: 5px; background: rgba(255,255,255,.06); text-decoration: none; }
.cn-cv-b {
  position: absolute; inset: 9% 0 0; padding: 6%;
  display: flex; flex-direction: column; gap: 3.5%;
}
.cn-cv-b span { display: block; flex: none; border-radius: 3px; background: rgba(255,255,255,.11); }
.cn-cv-b span.s  { height: 5%;  width: 26%; background: rgba(255,255,255,.22); }
.cn-cv-b span.t  { height: 11%; width: 72%; background: rgba(255,255,255,.32); }
.cn-cv-b span.t2 { height: 11%; width: 50%; background: rgba(255,255,255,.32); }
.cn-cv-b span.l  { height: 4.5%; width: 60%; background: rgba(255,255,255,.10); }
.cn-cv-grid { flex: none; height: 30%; display: grid; gap: 4%; }
.cn-cv-grid:last-child { margin-top: auto; }
.cn-cv-grid.g2 { grid-template-columns: 1fr 1fr; }
.cn-cv-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.cn-cv-grid.g4 { grid-template-columns: repeat(4, 1fr); }
.cn-cv-grid div {
  height: 100%; border-radius: 4px;
  background: linear-gradient(150deg, var(--cv-tint, rgba(255,255,255,.16)), rgba(255,255,255,.05));
}
.cn-cv-hero {
  flex: 1; min-height: 0; border-radius: 6px;
  background: linear-gradient(150deg, var(--cv-tint, rgba(120,140,220,.22)), rgba(255,255,255,.05));
}
.cn-cv-side { position: absolute; inset: 9% auto 0 0; width: 22%; background: rgba(255,255,255,.05); border-right: 1px solid rgba(255,255,255,.07); }

/* Кино дүрээс жирийн хуудас руу шилжих зөөлөн зааг */
.cn-end { height: clamp(90px, 12vw, 170px); background: linear-gradient(to bottom, var(--cn-black2), var(--bg)); }

/* Намхан дэлгэц: гарчиг арай жижиг — MacBook-той хэзээ ч давхцахгүй */
@media (max-height: 820px) and (min-width: 761px) {
  .cn-copy .cn-scrollhint { display: none; }   /* намхан дэлгэцэнд зайг төхөөрөмжид өгнө */
  .cn-h1 { font-size: clamp(1.6rem, 2.7vw, 2.4rem); }
  .cn-eyebrow { margin-bottom: 10px; }
  .cn-sub { margin-top: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .cn-cur-back { background-size: auto; }
  .cn-sv-item { gap: 34px; }
}
@media (max-width: 900px) {
  .cw-hero { grid-template-columns: 1fr; grid-template-rows: auto minmax(90px, 1fr); align-content: stretch; gap: 20px; }
  .cw-hero-r { height: 100%; min-height: 0; }
  .cw-ph-1 { height: 100%; }
  .cw-links { display: none; }
  .cw-row { grid-template-columns: 1fr 1fr; }
  .cw-card:nth-child(3) { display: none; }
}
@media (max-width: 900px) {
  .cn-copy-head { padding-top: 46px; }
}
@media (max-width: 760px) {
  .cn-copy-head { padding-top: 56px; }   /* толгойн цэсний доор — үсэг хэзээ ч далдлагдахгүй */
  .cn-stage { height: calc(var(--cn-vh) * 2.35); }
  .cn-copy-head { justify-content: flex-end; padding-bottom: 22px; }
  .cn-eyebrow { margin-bottom: 12px; font-size: .66rem; }
  .cn-h1 { font-size: clamp(1.7rem, 8.4vw, 2.4rem); }
  .cn-sub { margin-top: 12px; font-size: .88rem; max-width: 34ch; }
  .cn-copy-foot { gap: 12px; padding-bottom: 20px; top: calc(var(--cn-scr-top) + var(--cn-scr-h) + var(--cn-bez) + 22px); }
  .cn-ctas { gap: 9px; width: 100%; padding: 0 8px; }
  .cn-btn { height: 44px; padding: 0 18px; font-size: .88rem; flex: 1 1 auto; justify-content: center; }
  .cn-scrollhint { display: none; }
  .cn-sv-item, .cn-sv-item:nth-child(even) .cn-sv-txt { grid-template-columns: 1fr; order: 0; }
  .cn-sv-item { gap: 20px; }
  .cn-cv { order: 2; }
  .cn-sv-head { margin-bottom: 40px; }
}
@media (max-width: 420px) {
  .cw-row { display: none; }
}
/* Намхан гар утас (SE гэх мэт): хоёрдогч мөрүүдийг хасаж, төхөөрөмжид зай гаргана */
@media (max-width: 760px) and (max-height: 720px) {
  .cn-copy-head .cn-eyebrow, .cn-sub { display: none; }
  .cn-copy-foot { padding-bottom: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION / JS-гүй нөхцөл — богино fade, pin байхгүй, бүрэн уншигдана
   ═════════════════════════════════════════════════════════════════════════ */
.cn-static .cn .cn-stage { height: auto; }
.cn-static .cn .cn-pin { position: static; height: auto; overflow: visible; }
.cn-static .cn .cn-cam, .cn-static .cn .cn-cam-in { position: static; transform: none; }
.cn-static .cn .cn-mac, .cn-static .cn .cn-room, .cn-static .cn .cn-glass, .cn-static .cn .cn-black, .cn-static .cn .cn-seam { display: none; }
.cn-static .cn .cn-win {
  position: relative; width: auto; height: auto; transform: none; clip-path: none; opacity: 1;
  border-radius: 0; background: transparent;
}
.cn-static .cn .cn-doc { width: auto; transform: none; pointer-events: auto; }
.cn-static .cn .cw { height: auto; min-height: 78vh; }
.cn-static .cn .cn-intro { height: auto; padding-block: clamp(64px, 12vw, 130px); }
.cn-static .cn .cn-copy { position: relative; inset: auto; padding: clamp(46px, 8vw, 92px) 22px clamp(30px, 5vw, 60px); }
.cn-static .cn .cn-copy-head, .cn-static .cn .cn-copy-foot { position: static; height: auto; top: auto; }
.cn-static .cn .cn-copy-foot { margin-top: 26px; }
.cn-static .cn .cn-eyebrow, .cn-static .cn .cn-sub, .cn-static .cn .cn-ctas { opacity: 1; transform: none; }
.cn-static .cn .cn-h1 span i { transform: none; }
.cn-static .cn .cw-hero-l > *, .cn-static .cn .cw-row { opacity: 1; transform: none; }
/* Статик горимд хөшиг агуулгыг дарж болохгүй — оронд нь нимгэн улаан зурвасаар брэндээ хадгална */
.cn-static .cn .cn-cur, .cn-static .cn .cn-vig { display: none; }
.cn-static .cn .cn-pin { display: flex; flex-direction: column; }
.cn-static .cn .cn-copy { order: -1; }
.cn-static .cn .cn-stage::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--cn-red-5), var(--cn-red-1) 50%, var(--cn-red-5));
}
.cn-static .cn .cn-scrollhint { display: none; }
.cn-static .cn .cn-cv { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cn *, .cn *::before, .cn *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .cn-black { display: none; }
}

/* ── Доод (жирийн) hero: гарчиг нь h1-ээс h2 болсон тул ижил дүрмийг үргэлжлүүлнэ ── */
.hero h2.h-display { margin: 26px 0 0; max-width: 19ch; }
.hero h2.h-display em { font-style: normal; color: var(--accent); }