/* =========================================================
   Bolzoo — нүүр, санаа, асуулт, нөхцөл хуудас
   (цөцгий дэвсгэр · дарс-сарнай өнгө · дугуй картууд)
   ========================================================= */
body.site {
  --m-bg: #fbf6f3;
  --m-card: #fffcfa;
  --m-ink: #33232b;
  --m-muted: #857580;
  --m-line: #f0e3e6;
  --m-wine: #a8486a;
  --m-wine-d: #8f3b59;
  --m-rose: #e2496f;
  margin: 0;
  padding: 14px 16px 0;
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--m-ink);
  background:
    radial-gradient(700px 520px at 0% 0%, #f5e5f1 0%, transparent 60%),
    radial-gradient(700px 520px at 100% 6%, #ffe5ea 0%, transparent 60%),
    radial-gradient(800px 600px at 50% 100%, #fde8dc 0%, transparent 60%),
    var(--m-bg);
  -webkit-font-smoothing: antialiased;
}
.site main { max-width: 1040px; margin: 0 auto; }
.site h1, .site h2, .site h3, .site h4, .site p { margin: 0; }
.site a { text-decoration: none; color: inherit; }

/* Толгой (хөвдөг дугуй) */
.m-head {
  position: sticky; top: 10px; z-index: 30;
  max-width: 1040px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px 8px 16px; border-radius: 999px;
  background: rgba(255, 252, 250, 0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px -22px rgba(150, 60, 90, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}
.m-logo { display: inline-flex; align-items: center; gap: 9px; }
.m-logo-img { display: block; height: 60px; width: auto; }
.m-foot .m-logo-img { height: 76px; margin: 0 auto; }
.m-logo-cat { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #ffc5d3; display: grid; place-items: center; }
.m-logo-cat svg { width: 32px; height: 32px; }
.m-logo-t { font-weight: 900; font-size: 24px; letter-spacing: -0.04em; line-height: 1; color: var(--m-rose); }
.m-logo-t small { display: block; margin-top: 3px; white-space: nowrap; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--m-muted); text-transform: uppercase; }
.m-btn { padding: 13px 20px; border-radius: 999px; white-space: nowrap; background: var(--m-wine); color: #fff !important; font-weight: 700; font-size: 15px; box-shadow: 0 10px 22px -12px var(--m-wine); transition: background 0.2s, transform 0.15s; }
.m-btn:hover { background: var(--m-wine-d); }

/* Цэс */
.m-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 24px; max-width: 1040px; margin: 22px auto 0; }
.m-nav a { color: var(--m-muted); font-size: 16px; font-weight: 500; padding-bottom: 5px; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; }
.m-nav a:hover, .m-nav a.on { color: var(--m-ink); border-color: var(--m-wine); }

/* Товчлуурууд */
.m-cta, .m-solid, .m-ghost, .m-outline { display: block; text-align: center; border-radius: 999px; font-weight: 700; transition: background 0.2s, transform 0.15s; }
.m-cta:active, .m-solid:active, .m-ghost:active, .m-btn:active { transform: scale(0.97); }
.m-cta { display: inline-block; padding: 19px 56px; background: var(--m-wine); color: #fff !important; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 18px 34px -16px var(--m-wine); }
.m-solid { padding: 17px 20px; background: var(--m-wine); color: #fff !important; font-size: 16px; box-shadow: 0 14px 28px -18px var(--m-wine); }
.m-solid:hover, .m-cta:hover { background: var(--m-wine-d); }
.m-solid.inline { display: inline-block; padding: 16px 30px; }
.m-ghost { padding: 17px 20px; background: #fdf3ee; color: var(--m-ink) !important; border: 1.5px solid #f1e0d9; font-size: 16px; }
.m-ghost:hover { background: #fbeae2; }
.m-outline { display: inline-block; padding: 14px 32px; border: 1.5px solid #e2b9c7; color: var(--m-wine) !important; font-size: 16px; }
.m-outline:hover { background: #fff; }
.m-link { color: var(--m-wine) !important; font-weight: 700; font-size: 16px; border-bottom: 1.5px solid #e2b9c7; padding-bottom: 2px; }

/* Hero */
.m-hero { text-align: center; padding: 36px 0 6px; }
.m-hero h1 { font-weight: 900; font-size: clamp(34px, 9vw, 64px); line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; }
.m-hero-sub { margin: 18px auto 0 !important; max-width: 540px; color: var(--m-muted); font-size: 13.5px; font-weight: 700; line-height: 1.8; letter-spacing: 0.08em; text-transform: uppercase; }
.m-heart { position: relative; width: min(440px, 100%); aspect-ratio: 10 / 9; margin: 26px auto 8px; display: grid; place-items: center; }
.m-heart-bg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #f3b8cf; filter: drop-shadow(0 26px 40px rgba(200, 80, 120, 0.28)); animation: m-breathe 4s ease-in-out infinite; }
.m-hug { position: relative; width: 78%; margin-top: -6%; }
.m-cats { position: relative; width: 88%; height: auto; margin-top: 4%; filter: drop-shadow(0 18px 24px rgba(120, 40, 70, 0.25)); animation: m-cats 5s ease-in-out infinite; }
@keyframes m-cats { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1deg); } }
.m-hug .huggers { width: 100%; margin: 0; }
.m-fl { position: absolute; font-style: normal; font-size: 26px; animation: m-float 3.4s ease-in-out infinite; }
.m-fl.f1 { top: 6%; left: 8%; } .m-fl.f2 { top: 2%; right: 12%; animation-delay: 0.8s; }
.m-fl.f3 { bottom: 26%; left: 2%; font-size: 20px; animation-delay: 1.4s; } .m-fl.f4 { bottom: 22%; right: 2%; animation-delay: 2s; }
@keyframes m-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-12px) rotate(6deg); } }
@keyframes m-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* Хэсгүүд */
.m-sec { padding: 70px 0 0; scroll-margin-top: 90px; }
.m-kicker { text-align: center; color: var(--m-wine); font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 12px !important; }
.m-h2 { text-align: center; font-weight: 800; font-size: clamp(28px, 7vw, 42px); letter-spacing: -0.02em; }

/* Загварын картууд */
.m-grid { display: grid; gap: 24px; margin-top: 30px; }
@media (min-width: 760px) { .m-grid { grid-template-columns: 1fr 1fr; } }
.m-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 34px; background: var(--m-card); border: 1.5px solid var(--m-line); box-shadow: 0 24px 50px -36px rgba(150, 60, 90, 0.6); }
.m-card.hot { border-color: #dba3b6; }
.m-card h3 { margin-top: 10px; color: var(--m-wine); font-size: 19px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.m-price { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.m-desc { color: var(--m-muted); font-size: 16px; line-height: 1.6; margin-bottom: 6px !important; }
.m-shot { position: relative; overflow: hidden; aspect-ratio: 4 / 4.5; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 22px; text-align: center; }
.m-shot-date { background: radial-gradient(circle at 50% 28%, #8a2f52 0%, #5b1a36 55%, #3d0f24 100%); }
.m-shot-bday { background: radial-gradient(2.5px 2.5px at 15% 20%, #ffd166 60%, transparent), radial-gradient(2.5px 2.5px at 82% 18%, #4fd1c5 60%, transparent), radial-gradient(2px 2px at 25% 70%, #f472b6 60%, transparent), radial-gradient(circle at 50% 28%, #4a3aa8 0%, #2a2170 55%, #141036 100%); }
.m-shot-sorry { background: radial-gradient(circle at 50% 28%, #6b4fa8 0%, #43307a 55%, #2a1d52 100%); }
.m-shot-av { width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff 0%, #ffeef3 75%); display: grid; place-items: center; box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.14), 0 20px 40px -10px rgba(0, 0, 0, 0.5); animation: m-bob 3s ease-in-out infinite; }
.m-shot-av svg { width: 78%; height: 78%; }
@keyframes m-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.m-shot-q { font-family: "Caveat", cursive; font-weight: 700; font-size: clamp(34px, 9vw, 44px); line-height: 1; color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); }
.m-shot-yn { display: flex; gap: 10px; }
.m-shot-yn span { min-width: 108px; padding: 11px 20px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border: 1.5px solid rgba(255, 255, 255, 0.4); }
.m-shot-yn span:first-child { background: linear-gradient(135deg, #f58aa6, #d84c76); border-color: transparent; box-shadow: 0 10px 22px -10px #ff5c8a; }
.sp { position: absolute; font-style: normal; font-size: 24px; animation: m-float 3.6s ease-in-out infinite; }
.sp.s1 { top: 7%; left: 44%; } .sp.s2 { top: 15%; right: 15%; font-size: 17px; animation-delay: 1s; } .sp.s3 { top: 18%; left: 15%; font-size: 19px; animation-delay: 1.8s; }
.m-more { margin-top: 30px !important; text-align: center; color: var(--m-muted); font-size: 16px; }
.m-more a { color: var(--m-wine); font-weight: 700; border-bottom: 1.5px solid #e2b9c7; }

/* Болзооны санааны карт */
.m-ideas-card { border-radius: 30px; overflow: hidden; background: var(--m-card); border: 1.5px solid var(--m-line); box-shadow: 0 24px 50px -38px rgba(150, 60, 90, 0.6); }
.m-ideas-art svg, .m-banner svg { display: block; width: 100%; height: 170px; }
.m-ideas-body { padding: 30px 22px 34px; text-align: center; }
.m-ideas-body h2 { font-weight: 800; font-size: clamp(28px, 7vw, 38px); letter-spacing: -0.02em; }
.m-ideas-body p { margin: 14px auto 24px !important; max-width: 520px; color: var(--m-muted); font-size: 17px; line-height: 1.7; }

/* Хэрхэн ажилладаг */
.m-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .m-steps { grid-template-columns: repeat(3, 1fr); } }
.m-steps li { display: flex; gap: 18px; padding: 24px; border-radius: 26px; background: var(--m-card); border: 1.5px solid var(--m-line); }
.m-steps b { color: var(--m-wine); font-size: 18px; font-weight: 800; padding-top: 3px; }
.m-steps h4 { font-size: 20px; font-weight: 800; }
.m-steps p { margin-top: 6px !important; color: var(--m-muted); font-size: 16px; line-height: 1.6; }
.m-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 30px; }
.m-note { margin-top: 18px !important; text-align: center; color: var(--m-muted); font-size: 15px; }
.m-note a { color: var(--m-wine); border-bottom: 1.5px solid #e2b9c7; }
.m-note.left { text-align: left; }
.m-note b { color: var(--m-wine); }

/* Үнэ */
.m-pricecard { max-width: 460px; margin: 28px auto 0; padding: 30px 24px; border-radius: 30px; background: var(--m-card); border: 1.5px solid #dba3b6; text-align: center; box-shadow: 0 30px 60px -40px rgba(150, 60, 90, 0.7); }
.m-pc-name { color: var(--m-wine); font-size: 13px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.m-pc-price { margin: 8px 0 18px !important; font-size: 54px; font-weight: 900; letter-spacing: -0.03em; }
.m-pricecard ul { list-style: none; padding: 0; margin: 0 0 24px; text-align: left; display: grid; gap: 11px; }
.m-pricecard li { position: relative; padding-left: 28px; font-size: 15.5px; }
.m-pricecard li::before { content: "♥"; position: absolute; left: 3px; color: var(--m-rose); }

/* Тусдаа хуудсууд (санаа, асуулт, нөхцөл) */
.m-page { max-width: 760px !important; padding-top: 44px; }
.m-title { font-weight: 800; font-size: clamp(34px, 9vw, 52px); line-height: 1.08; letter-spacing: -0.02em; }
.m-lead { margin: 18px 0 28px !important; color: var(--m-muted); font-size: 18px; line-height: 1.7; }
.m-lead a { color: var(--m-wine); }
.m-banner { border-radius: 26px; overflow: hidden; margin-bottom: 22px; box-shadow: 0 20px 40px -30px rgba(150, 60, 90, 0.6); }

/* Асуулт */
.m-faq { display: grid; gap: 12px; }
.m-faq details { border-radius: 24px; background: var(--m-card); border: 1.5px solid var(--m-line); }
.m-faq details[open] { border-color: #dba3b6; }
.m-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; font-size: 18px; font-weight: 700; }
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--m-wine); border-bottom: 2.5px solid var(--m-wine); transform: rotate(45deg) translateY(-3px); transition: transform 0.2s; }
.m-faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.m-faq details p { padding: 0 24px 24px; color: var(--m-muted); font-size: 16.5px; line-height: 1.7; }

/* Санааны шүүлтүүр, гүйдэг карт, дэлгэрэнгүй */
.m-filters { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.m-filters::-webkit-scrollbar { display: none; }
.m-filters button { flex: none; padding: 13px 24px; border-radius: 999px; border: 1.5px solid var(--m-line); background: var(--m-card); color: var(--m-ink); font: 600 16px "Inter", sans-serif; cursor: pointer; }
.m-filters button.on { background: var(--m-wine); border-color: var(--m-wine); color: #fff; }
.m-carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 26px -16px 0; padding: 14px 16px 18px; }
.m-carousel::-webkit-scrollbar { display: none; }
.m-slide { position: relative; flex: none; width: min(78%, 360px); aspect-ratio: 4 / 3.3; scroll-snap-align: center; border: 0; border-radius: 26px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 22px; text-align: left; color: #fff; transform: rotate(-1.5deg) scale(0.94); opacity: 0.75; transition: transform 0.35s, opacity 0.35s; box-shadow: 0 20px 40px -24px rgba(60, 20, 40, 0.6); }
.m-slide.on { transform: none; opacity: 1; }
.m-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(30, 10, 20, 0.55) 100%); }
.m-slide .em { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); font-size: 84px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.25)); }
.m-slide .t { position: relative; z-index: 1; font: 800 23px/1.2 "Inter", sans-serif; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
.m-s-winter { background: radial-gradient(circle at 70% 20%, #e8f1ff 0%, #9db7dd 45%, #4d5f86 100%); }
.m-s-summer { background: radial-gradient(circle at 70% 20%, #fff2cf 0%, #f6b98a 45%, #b9566b 100%); }
.m-s-all { background: radial-gradient(circle at 70% 20%, #ffe3ec 0%, #e48aa8 45%, #7a2e52 100%); }
.m-ctrl { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.m-arrow { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--m-line); background: var(--m-card); font-size: 20px; cursor: pointer; color: var(--m-ink); }
.m-count { min-width: 64px; text-align: center; color: var(--m-muted); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.m-auto { padding: 13px 20px; border-radius: 999px; border: 1.5px solid #e2b9c7; background: transparent; color: var(--m-wine); font: 700 15px "Inter", sans-serif; cursor: pointer; }
.m-auto.off { color: var(--m-muted); border-color: var(--m-line); }
.m-detail { margin-top: 22px; padding: 26px 22px; border-radius: 30px; background: var(--m-card); border: 1.5px solid var(--m-line); box-shadow: 0 24px 50px -38px rgba(150, 60, 90, 0.6); }
.m-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.m-tag { padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--m-line); font-size: 15px; font-weight: 600; }
.m-tag.cost { color: var(--m-wine); }
.m-tag-winter { background: #e3eefb; border-color: #e3eefb; }
.m-tag-summer { background: #fdecd9; border-color: #fdecd9; }
.m-tag-all { background: #fbe4ec; border-color: #fbe4ec; }
.m-detail h2 { margin-top: 18px !important; font-weight: 800; font-size: clamp(26px, 6.5vw, 34px); letter-spacing: -0.02em; }
.m-where { margin-top: 8px !important; color: var(--m-muted); font-size: 16px; }
.m-where b { margin-right: 10px; color: var(--m-ink); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.m-dtext { margin-top: 16px !important; font-size: 18px; line-height: 1.7; }
.m-tip { margin: 20px 0 26px; padding: 16px 18px; border-radius: 18px; background: #f9eef0; color: var(--m-muted); font-size: 16px; line-height: 1.6; }
.m-tip b { display: block; color: var(--m-wine); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }

/* Нөхцөл */
.m-legal h2 { font-weight: 800; font-size: clamp(28px, 7vw, 38px); }
.m-lsec { padding-top: 10px; margin-bottom: 40px; scroll-margin-top: 90px; }
.m-legal ol { margin: 18px 0 0; padding-left: 22px; display: grid; gap: 12px; font-size: 16.5px; line-height: 1.7; }

/* Footer */
.m-foot { max-width: 1040px; margin: 80px auto 0; padding: 40px 0 44px; text-align: center; border-top: 1.5px solid var(--m-line); }
.m-foot nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 26px; margin: 24px 0 18px; }
.m-foot nav a, .m-contact a { color: var(--m-muted) !important; font-size: 13.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.m-foot nav a:hover { color: var(--m-wine) !important; }
.m-contact { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 16px !important; }
.m-contact a { text-transform: none; letter-spacing: 0.04em; }
.m-copy { color: #b8a4ae; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; }

@media (max-width: 380px) {
  .m-btn { padding: 11px 14px; font-size: 14px; }
  .m-logo-img { height: 52px; }
  .m-nav { gap: 6px 16px; }
  .m-nav a { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .m-fl, .sp, .m-heart-bg, .m-shot-av, .m-cats { animation: none; }
}

/* ---------- Ард талын дэвсгэр: цөцгий өнгө, дээд талд бүдэг үүлс ---------- */
html:has(body.site) { background: #fbf6f3; }
body.site { background: transparent; }
.m-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(70vmax 50vmax at -5% 0%, rgba(238, 222, 245, 0.9) 0%, transparent 62%),
    radial-gradient(60vmax 45vmax at 105% 10%, rgba(255, 226, 234, 0.85) 0%, transparent 60%),
    radial-gradient(80vmax 50vmax at 50% 105%, rgba(253, 232, 220, 0.85) 0%, transparent 62%),
    #fbf6f3; }
/* Үүлс зөвхөн дээд талд, доошоо уусна */
.m-clouds { position: absolute; left: 0; right: 0; top: 0; height: 78vh;
  background: linear-gradient(180deg, #efe3f2 0%, #f6e9f0 45%, rgba(251, 246, 243, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%); }
.m-clouds .cl { position: absolute; display: block; will-change: transform; animation: m-drift ease-in-out infinite alternate; }
.m-clouds svg { display: block; width: 100%; height: auto; overflow: visible; }
.m-clouds svg circle { fill: #fff; }
.m-clouds .c1 { top: -4vh; left: -8vw; width: 62vmax; opacity: 0.95; animation-duration: 38s; }
.m-clouds .c2 { top: 6vh; right: -10vw; width: 46vmax; opacity: 0.9; animation-duration: 44s; animation-direction: alternate-reverse; }
.m-clouds .c3 { top: 26vh; left: 20vw; width: 54vmax; opacity: 0.7; animation-duration: 50s; }
.m-clouds .c4 { top: 34vh; left: -14vw; width: 40vmax; opacity: 0.6; animation-duration: 46s; animation-direction: alternate-reverse; }
.m-clouds .c5 { top: 40vh; right: -16vw; width: 50vmax; opacity: 0.55; animation-duration: 54s; }
@keyframes m-drift { 0% { transform: translateX(0); } 100% { transform: translateX(6vw); } }

/* ---------- Хоёр талаас шагайдаг муур ---------- */
.m-peek { position: fixed; z-index: 25; bottom: 18vh; width: clamp(120px, 18vw, 190px); pointer-events: none; }
.m-peek svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(150, 60, 90, 0.25)); }
.m-peek.left { left: 0; transform-origin: 0 50%; animation: m-peek-l 11s ease-in-out infinite both; }
.m-peek.right { right: 0; bottom: 42vh; transform-origin: 100% 50%; animation: m-peek-r 11s ease-in-out 5.5s infinite both; }
/* Муур хажуу тийшээ эргэж, хананы ард нуугдана */
.m-peek.left svg { transform: rotate(90deg); }
.m-peek.right svg { transform: rotate(-90deg); }
@keyframes m-peek-l { 0%, 6% { transform: translateX(-110%); } 16%, 46% { transform: translateX(-22%); } 24% { transform: translateX(-18%) rotate(-6deg); } 34% { transform: translateX(-22%) rotate(5deg); } 56%, 100% { transform: translateX(-110%); } }
@keyframes m-peek-r { 0%, 6% { transform: translateX(110%); } 16%, 46% { transform: translateX(22%); } 24% { transform: translateX(18%) rotate(6deg); } 34% { transform: translateX(22%) rotate(-5deg); } 56%, 100% { transform: translateX(110%); } }
.m-peek .eye { transform-origin: 80px 92px; animation: m-blink 11s infinite; }
@keyframes m-blink { 0%, 26%, 29%, 37%, 40%, 100% { transform: scaleY(1); } 27.5%, 38.5% { transform: scaleY(0.1); } }
.m-peek-heart { position: absolute; top: -6px; font-size: 22px; opacity: 0; animation: m-heart-pop 11s ease-out infinite; }
.m-peek.left .m-peek-heart { left: 62%; } .m-peek.right .m-peek-heart { right: 62%; animation-delay: 5.5s; }
@keyframes m-heart-pop { 0%, 22% { opacity: 0; transform: translateY(0) scale(0.4); } 26% { opacity: 1; transform: translateY(-8px) scale(1); } 40% { opacity: 0; transform: translateY(-40px) scale(1.1); } 100% { opacity: 0; } }
@media (max-width: 640px) {
  .m-peek { width: 108px; }
  .m-peek.left { bottom: 12vh; } .m-peek.right { bottom: 46vh; }
}
@media (prefers-reduced-motion: reduce) {
  .m-clouds .cl, .m-peek, .m-peek .eye, .m-peek-heart { animation: none; }
  .m-peek { display: none; }
}

/* ---------- Компьютер дээр: цэс толгой дотор, муурнууд том ---------- */
.m-nav-in { display: none; }
@media (min-width: 900px) {
  .m-head { padding: 12px 12px 12px 26px; }
  .m-nav-in { display: flex; gap: 34px; margin-left: auto; margin-right: 22px; }
  .m-nav-in a { color: var(--m-muted); font-size: 16px; font-weight: 500; padding: 4px 0; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; }
  .m-nav-in a:hover, .m-nav-in a.on { color: var(--m-ink); border-color: var(--m-wine); }
  .m-nav { display: none; }
  .m-hero { padding-top: 34px; }
  .m-hero h1 br { display: none; }
}
.m-stage { position: relative; width: min(600px, 100%); margin: 18px auto 10px; }
.m-stage .m-cats { display: block; width: 100%; margin: 0; }
.m-glow { position: absolute; left: 50%; bottom: 2%; width: 110%; height: 46%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 220, 196, 0.95), rgba(255, 228, 214, 0.5) 55%, transparent); filter: blur(10px); }
.m-stage .m-fl { color: #f08bab; font-size: 22px; }
.m-stage .m-fl.f1 { top: 10%; left: 4%; } .m-stage .m-fl.f2 { top: 4%; right: 8%; color: #f26d93; } .m-stage .m-fl.f3 { bottom: 30%; right: 0; font-size: 16px; }
/* үүлсийг тод */
.m-clouds { height: 100vh; background: linear-gradient(180deg, #ecdff1 0%, #f5e6ee 40%, rgba(251, 246, 243, 0) 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
.m-clouds .c1 { opacity: 1; } .m-clouds .c2 { opacity: 1; } .m-clouds .c3 { opacity: 0.9; } .m-clouds .c4 { opacity: 0.85; } .m-clouds .c5 { opacity: 0.85; }
.m-clouds .c6 { top: 50vh; left: 30vw; width: 58vmax; opacity: 0.75; animation-duration: 58s; }
.m-clouds .c7 { top: 18vh; left: 38vw; width: 34vmax; opacity: 0.8; animation-duration: 42s; animation-direction: alternate-reverse; }
html:has(body.site), body.site { overflow-x: clip; }
.m-glow { width: 100%; }
.m-clouds { background: linear-gradient(180deg, #e8d6ee 0%, #f2dfea 45%, rgba(251, 246, 243, 0) 100%); }
.m-clouds svg { filter: drop-shadow(0 18px 26px rgba(196, 150, 190, 0.35)); }
.m-clouds svg circle { fill: #fffafc; }

/* ---------- Утсан дээр цэгцтэй, Momentliy шиг хэмжээтэй ---------- */
.m-puff { position: absolute; left: 50%; top: 2%; width: 92%; transform: translateX(-50%); filter: drop-shadow(0 16px 26px rgba(196, 150, 190, 0.3)); opacity: 0.95; }
.m-stage .m-cats { position: relative; }
@media (max-width: 640px) {
  .m-nav { flex-wrap: nowrap; justify-content: center; gap: 14px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
  .m-nav::-webkit-scrollbar { display: none; }
  .m-nav a { flex: none; font-size: 13.5px; white-space: nowrap; padding-bottom: 4px; }
  .m-hero { padding-top: 28px; }
  .m-hero h1 { font-size: 27px; line-height: 1.15; letter-spacing: -0.01em; }
  .m-hero h1 br { display: none; }
  .m-hero-sub { font-size: 11px; line-height: 1.75; margin-top: 14px !important; max-width: 300px; }
  .m-stage { margin-top: 30px; padding-top: 18%; }
  .m-puff { top: 0; width: 100%; }
  .m-peek { width: 72px; }
  .m-peek.left { bottom: 3vh; } .m-peek.right { bottom: 3vh; }
  .m-head { padding: 7px 8px 7px 14px; }
  .m-logo-img { height: 48px; }
  .m-btn { padding: 11px 16px; font-size: 14px; }
}
.m-puff { overflow: visible; }
.m-glow { filter: blur(18px); }

/* ---------- Бодит үүлтэй тэнгэр (assets/clouds.webp) ---------- */
.m-clouds { height: 100vh; overflow: hidden;
  background: linear-gradient(180deg, #e7d5ee 0%, #f3e0ec 50%, rgba(251, 241, 236, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); }
.m-clouds::before { content: ""; position: absolute; top: 0; bottom: 0; left: -6vw; right: -6vw;
  background: url(clouds.webp) center top / cover no-repeat; opacity: 0.88;
  animation: m-sky-drift 40s ease-in-out infinite alternate; will-change: transform; }
@keyframes m-sky-drift { 0% { transform: translateX(-3vw); } 100% { transform: translateX(3vw); } }
@media (max-width: 640px) { .m-clouds::before { background-size: auto 100%; background-position: 30% top; } }
@media (prefers-reduced-motion: reduce) { .m-clouds::before { animation: none; } }

/* ---------- Санааны зургууд ---------- */
.m-slide { background: #f3e6ea; }
.m-slide .art, .m-dart { display: block; }
.m-slide .art { position: absolute; inset: 0; }
.m-slide .art svg, .m-slide .art img, .m-dart svg, .m-dart img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-slide::after { z-index: 0; background: linear-gradient(180deg, transparent 45%, rgba(30, 10, 20, 0.6) 100%); }
.m-slide .t { z-index: 1; }
.m-dart { aspect-ratio: 4 / 2.6; margin: -26px -22px 20px; border-radius: 30px 30px 0 0; overflow: hidden; }
.m-tag.adult { background: #33232b; border-color: #33232b; color: #fff; }

/* ---------- Загварын картууд: 3 багана, зурагтай ---------- */
@media (min-width: 760px) { .m-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .m-grid { grid-template-columns: repeat(3, 1fr); } }
.m-card { padding: 18px; border-radius: 28px; gap: 8px; }
.m-shot { aspect-ratio: 4 / 5; gap: 10px; padding: 18px 14px; }
.m-shot-img { width: 92%; height: auto; margin-bottom: -4px; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.45)); animation: m-bob 3.4s ease-in-out infinite; }
.m-shot-hug { width: 86%; }
.m-shot-hug .huggers { width: 100%; margin: 0; }
.m-art-hug { background: radial-gradient(circle at 50% 28%, #8a4a7a 0%, #5a2a5a 55%, #361838 100%); }
.m-shot-q { font-size: clamp(28px, 7vw, 36px); }
.m-shot-yn span { min-width: 88px; padding: 9px 16px; font-size: 12px; }
.m-card h3 { font-size: 16px; margin-top: 8px; }
.m-price { font-size: 22px; }
.m-desc { font-size: 14.5px; }
.m-card-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.m-card-btns .m-ghost, .m-card-btns .m-solid { padding: 14px 10px; font-size: 15px; }

.m-art-booth { background: radial-gradient(circle at 50% 20%, #8a2f52 0%, #5b1a36 55%, #3d0f24 100%); justify-content: flex-start; gap: 6px; }
.m-shot-booth { transform: scale(0.68); transform-origin: top center; height: 62%; margin-top: -4px; }
.m-art-booth .m-shot-q { font-size: clamp(24px, 6vw, 30px); }
.m-art-booth .m-shot-q { display: none; }
.m-shot-booth { height: auto; margin-bottom: -30%; }
.m-art-booth .m-shot-booth { position: absolute; top: 6%; left: 50%; width: auto; height: auto; margin: 0; transform: translateX(-50%) scale(0.72); transform-origin: top center; }

/* Уучлаарай постер: уйлж буй муур цэцэг барьсан */
.m-art-sorry { background: radial-gradient(circle at 50% 22%, #6f5aa8 0%, #47347c 52%, #2a1d52 100%); }
.m-sorry { position: relative; width: 82%; aspect-ratio: 1.15; }
.m-sorry-cat { position: absolute; left: 4%; top: 6%; width: 64%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff 0%, #ffeef3 75%); display: grid; place-items: center; box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.12), 0 20px 40px -10px rgba(0, 0, 0, 0.5); animation: m-bob 3.2s ease-in-out infinite; }
.m-sorry-cat svg { width: 80%; height: 80%; }
.m-sorry-flw { position: absolute; right: 0; bottom: -2%; width: 46%; transform: rotate(10deg); filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.35)); animation: m-offer 2.6s ease-in-out infinite; }
@keyframes m-offer { 0%, 100% { transform: rotate(10deg) translateX(0); } 50% { transform: rotate(4deg) translateX(-6px); } }
.m-sorry-note { position: absolute; left: 2%; bottom: 0; padding: 6px 12px; border-radius: 10px; background: #fff8ec; color: #6a3f5a; font: 700 18px "Caveat", cursive; transform: rotate(-6deg); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.5); }
.m-tear { position: absolute; font-style: normal; animation: m-float 3s ease-in-out infinite; }
.m-tear.t1 { left: 64%; top: 4%; font-size: 20px; } .m-tear.t2 { left: 0; top: 0; font-size: 18px; animation-delay: 1.2s; }
@media (prefers-reduced-motion: reduce) { .m-sorry-cat, .m-sorry-flw, .m-tear { animation: none; } }

.m-sorry { width: 70%; aspect-ratio: auto; }
.m-sorry-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.45)); animation: m-bob 3.4s ease-in-out infinite; }
.m-art-sorry .m-shot-q { margin-top: -4px; }
.m-sorry-note { left: -14%; bottom: 14%; }
.m-tear.t1 { left: auto; right: -10%; top: 10%; }
.m-art-sorry { gap: 6px; padding-top: 10px; }
.m-art-sorry .m-sorry { width: 58%; }

/* Загварын картуудыг жижигрүүлнэ */
.m-grid { max-width: 860px; margin-left: auto; margin-right: auto; gap: 18px; }
.m-card { padding: 14px; border-radius: 24px; gap: 6px; }
.m-shot { aspect-ratio: 1 / 1; border-radius: 18px; }
.m-shot-q { font-size: clamp(22px, 5vw, 27px); }
.m-shot-yn span { min-width: 72px; padding: 7px 12px; font-size: 11px; }
.m-card h3 { font-size: 14px; margin-top: 6px; }
.m-price { font-size: 19px; }
.m-desc { font-size: 13.5px; line-height: 1.5; }
.m-card-btns .m-ghost, .m-card-btns .m-solid { padding: 11px 8px; font-size: 14px; }
.m-shot-img { width: 74%; }
.m-art-sorry .m-sorry { width: 44%; }
.m-art-booth .m-shot-booth { transform: translateX(-50%) scale(0.58); top: 5%; }
@media (max-width: 759px) { .m-grid { max-width: 380px; } }

.m-pc-list { display: grid; gap: 4px; margin-bottom: 20px; text-align: left; }
.m-pc-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--m-line); font-size: 16px; font-weight: 600; }
.m-pc-list b { font-size: 22px; font-weight: 900; color: var(--m-wine); white-space: nowrap; }

/* Нийт урилгын тоолуур (hero) */
.m-total { position: relative; z-index: 2; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; margin: 16px auto 0 !important; padding: 9px 18px; border-radius: 999px; background: rgba(255, 252, 250, 0.85); border: 1px solid var(--m-line); box-shadow: 0 10px 24px -18px var(--m-wine); color: var(--m-muted); font-size: 13.5px; font-weight: 700; }
.m-total > span { white-space: nowrap; }
.m-total b { color: var(--m-wine); font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.m-total-h { animation: m-beat 1.6s ease-in-out infinite; }
@keyframes m-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } }
@media (max-width: 480px) { .m-total { font-size: 12px; padding: 8px 14px; gap: 2px 4px; } .m-total b { font-size: 14px; } }