:root{
  --bg:#fff;
  --text:#101828;
  --muted:rgba(16,24,40,.72);
  --line: rgba(16,24,40,.18);
  --cardRadius:18px;
  --btn:#ff7a41;
  --btnText:#111;
  --dark:#111;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:var(--bg);
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}

.title--pixel{
  font-family:"Pixelify Sans", monospace;
  font-weight:700;
  font-size:72px;
  line-height:1.05;
  letter-spacing:-2px;
  margin-bottom:24px;
}
.title--pixel span{
  font-family:system-ui, -apple-system, sans-serif;
  vertical-align:middle;
  font-size:.8em;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{
  height:72px;
  max-width:1400px;
  margin:0 auto;
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:24px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-mark{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
}
.brand-name{font-size:20px}

.nav-left,.nav-right{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:14px;
  color:rgba(16,24,40,.88);
}
.nav-left a,.nav-right a{padding:8px 6px;border-radius:10px}
.nav-left a:hover,.nav-right a:hover{background:rgba(0,0,0,.04)}
.nav-right{margin-left:auto}

/* Icons in header */
.icon-group{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:6px;
}
.icon-btn{
  width:40px;height:40px;
  border-radius:50%;
  border:none;
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:#111;
  transition:background .2s ease;
}
.icon-btn:hover{background:rgba(0,0,0,.05)}
.icon-btn svg{width:20px;height:20px}

.pill{
  border:none;
  background:#f4f4f4;
  border-radius:20px;
  padding:6px 14px;
  display:flex;align-items:center;gap:8px;
  cursor:pointer;
  font-size:13px;font-weight:600;
  color:#111;
}
.pill:hover{background:#e8e8e8}
.flag-img{
  width:20px;height:auto;
  border-radius:2px;
  display:block;
}

.panel{padding:22px 0;}
.panel-inner{
  max-width:1400px;
  margin:0 auto;
  padding:42px;
  border-radius:var(--cardRadius);
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:34px;
  align-items:center;
  min-height:520px;
}

/* ===== SECTION 1 ONLY (yellow panel) ===== */
.panel--yellow{
  background: transparent;
}


.panel--yellow .panel-inner{
  background:#fcbd50;          /* дунд дөрвөлжин шар */
  border:none;
  box-shadow:none;
  border-radius:18px;          /* аль хэдийн var(--cardRadius) байж болно */
}

/* keep rest the same */
.panel--yellow .panel-inner::before{ content:none !important; }

.panel--gray .panel-inner{ background:#ececec; }
.panel-inner--flip{ grid-template-columns:1fr 1.2fr; }
.panel--beige .panel-inner{ background:#ece9df; }

.media{
  border-radius:16px;
  overflow:hidden;
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.media-video{
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
}

.title{
  font-size:56px;
  line-height:1.05;
  letter-spacing:-1px;
  margin:0 0 14px;
}
.desc{
  margin:0 0 20px;
  max-width:560px;
  color:rgba(16,24,40,.78);
  font-size:16px;
  line-height:1.55;
}
.actions{display:flex;gap:12px;flex-wrap:wrap}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:650;
  font-size:14px;
  cursor:pointer;
}
.btn--primary{background:var(--btn);color:var(--btnText)}
.btn--primary:hover{filter:brightness(.96)}
.btn--outline{background:transparent;border-color:rgba(0,0,0,.35);color:var(--text)}
.btn--outline:hover{background:rgba(0,0,0,.04)}
.btn--dark{background:var(--dark);color:#fff}
.btn--dark:hover{filter:brightness(1.05)}
.btn--outline-onmedia{
  border-color:rgba(0,0,0,.35);
  background:rgba(255,255,255,.28);
}
.btn--outline-onmedia:hover{background:rgba(255,255,255,.38)}

.panel--image{padding:22px 0;}
.panel--image .panel-bg{
  max-width:1400px;
  margin:0 auto;
  padding:0 18px;
}
.panel--image .panel-bg img{
  width:100%;
  height:560px;
  object-fit:cover;
  border-radius:18px;
}
.panel--image .panel-overlay{
  max-width:1400px;
  margin:0 auto;
  padding:0 48px;
  position:relative;
  margin-top:-560px;
  height:560px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.panel--image .overlay-content{
  width:min(640px, 92%);
  padding-left:10px;
  color:var(--text);
}
/* ✅ SEO social share (ADD ONLY) */
.social-share{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.share-btn{
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  font-size:13px;
  color:#fff;
  opacity:.85;
}

.share-btn:hover{
  opacity:1;
  background:rgba(255,255,255,.08);
}

.marquee-section{padding:26px 0 60px;}
.marquee{overflow:hidden;width:100%;}
.marquee-track--seamless{
  display:flex;
  width:200%;
  animation:marquee-seamless 16s linear infinite;
}
.marquee--fullvideo .marquee-full{
  width:50%;
  height:240px;
  overflow:hidden;
}
.marquee--fullvideo .marquee-full video{
  width:100%;
  height:100%;
  object-fit:cover;
}
@keyframes marquee-seamless{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

.center-cta{
  max-width:1000px;
  margin:0 auto;
  padding:22px 18px 0;
  text-align:center;
}
.center-title{
  font-size:56px;
  letter-spacing:-1px;
  margin:26px 0 10px;
}
.center-desc{margin:0 0 18px;color:rgba(16,24,40,.78);}

.ticker{
  padding:64px 18px 80px;
  text-align:center;
  background:#fff;
  color:var(--text);
}
.ticker-top{max-width:1100px;margin:0 auto 28px;}
.ticker-title{
  font-size:58px;
  letter-spacing:-1px;
  margin:0 0 26px;
  color:var(--text);
}
.newsletter{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:end;
  justify-content:center;
  max-width:820px;
  margin:0 auto;
}
.newsletter-label{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
  font-size:13px;
  color:rgba(16,24,40,.8);
}
.newsletter input{
  height:44px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.22);
  padding:0 12px;
  outline:none;
}

.marquee--rtl{overflow:hidden;}
.marquee-track--text{
  display:flex;
  gap:60px;
  width:max-content;
  padding:18px 0 6px;
  animation:marquee-rtl 14s linear infinite;
}
.marquee-text{
  font-size:88px;
  letter-spacing:-2px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space:nowrap;
  color:var(--text);
}
@keyframes marquee-rtl{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

.ticker-sub{
  max-width:880px;
  margin:26px auto 18px;
  color:rgba(16,24,40,.75);
  line-height:1.6;
}
.center-btn{display:inline-flex}

.full-image{width:100%;overflow:hidden;}
.full-image img{width:100%;height:auto;}

/* Footer */
.footer{
  background:#1f1f1f;
  color:#fff;
  padding:60px 18px 26px;
}
.footer-inner{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr 1.3fr;
  gap:36px;
}
.footer-col h4{
  margin:0 0 14px;
  font-size:14px;
  font-weight:700;
  color:#fff;
}
.footer-col a{
  display:block;
  padding:7px 0;
  font-size:14px;
  color:#fff;
  opacity:.86;
}
.footer-col a:hover{opacity:1}

.footer-col a.social-link{
  display:flex;
  align-items:center;
  gap:12px;
}
.footer-col a.social-link svg{
  width:20px;height:20px;
  fill:currentColor;
  stroke:none;
}
.footer-col a.social-link svg[fill="none"]{
  fill:none;
  stroke:currentColor;
}

.badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:999px;
  background:var(--btn);color:#111;font-size:12px;margin-left:6px;
}
.footer-col--wide .footer-note{
  margin:0 0 14px;
  opacity:.88;
  font-size:14px;
  line-height:1.4;
}
.footer-subscribe{display:flex;gap:10px;align-items:center;}
.footer-subscribe input{
  flex:1;height:44px;border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;padding:0 12px;outline:none;
}
.footer-bottom{
  max-width:1400px;
  margin:36px auto 0;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.footer-links{
  display:flex;gap:16px;flex-wrap:wrap;opacity:.86;
}
.footer-links a:hover{opacity:1}

@media (prefers-reduced-motion: reduce){
  .marquee-track--seamless,
  .marquee-track--text{animation:none;}
}

@media (max-width:1050px){
  .nav-left{display:none;}
  .panel-inner{grid-template-columns:1fr;min-height:unset;}
  .title{font-size:40px}
  .title--pixel{font-size:52px}
  .ticker-title{font-size:40px}
  .marquee-text{font-size:54px}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .panel--image .panel-bg img{height:480px;}
  .panel--image .panel-overlay{margin-top:-480px;height:480px;padding:0 22px;}
}