/* ============================================================
   MOBILE + TABLET PREMIUM LAYER
   Luxury UI — glass, gold glow, micro-interactions
   (Stripe / Apple / enterprise security aesthetic)
   ============================================================ */

html[data-viewport="mobile"] body.page-premium,
html[data-viewport="tablet"] body.page-premium {
  background: var(--pd-black);
  -webkit-tap-highlight-color: transparent;
}

/* ---- Ambient gold atmosphere ---- */
html[data-viewport="mobile"] body.page-premium main,
html[data-viewport="tablet"] body.page-premium main {
  position: relative;
}

html[data-viewport="mobile"] body.page-premium main::before,
html[data-viewport="tablet"] body.page-premium main::before {
  content: "";
  position: fixed;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 55vh;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(240, 200, 0, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

html[data-viewport="mobile"] body.page-premium main > *,
html[data-viewport="tablet"] body.page-premium main > * {
  position: relative;
  z-index: 1;
}

/* ---- Header — luxury bar ---- */
html[data-viewport="mobile"] body.page-premium .site-header,
html[data-viewport="tablet"] body.page-premium .site-header {
  background: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(240, 200, 0, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 32px rgba(0, 0, 0, 0.35);
  transition: background 0.35s var(--pd-ease-out), box-shadow 0.35s var(--pd-ease-out);
}

html[data-viewport="mobile"] body.page-premium .site-header.scrolled,
html[data-viewport="tablet"] body.page-premium .site-header.scrolled {
  background: rgba(8, 8, 8, 0.94);
  box-shadow: 0 1px 0 rgba(240, 200, 0, 0.1), 0 12px 40px rgba(0, 0, 0, 0.5);
}

html[data-viewport="mobile"] body.page-premium .logo-name,
html[data-viewport="tablet"] body.page-premium .logo-name {
  background: linear-gradient(135deg, var(--pd-gold-light) 0%, var(--pd-gold) 55%, var(--pd-gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-viewport="mobile"] body.page-premium .menu-toggle,
html[data-viewport="tablet"] body.page-premium .menu-toggle {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.2s;
}

@media (hover: hover) {
  html[data-viewport="mobile"] body.page-premium .menu-toggle:hover,
  html[data-viewport="tablet"] body.page-premium .menu-toggle:hover {
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.08);
  }
}

html[data-viewport="mobile"] body.page-premium .menu-toggle:active,
html[data-viewport="tablet"] body.page-premium .menu-toggle:active {
  transform: scale(0.94);
}

html[data-viewport="mobile"] body.page-premium .menu-toggle.open,
html[data-viewport="tablet"] body.page-premium .menu-toggle.open {
  border-color: rgba(240, 200, 0, 0.5);
  box-shadow: 0 0 16px rgba(240, 200, 0, 0.15);
}

/* ---- Drawer — right panel luxury ---- */
html[data-viewport="mobile"] .nav-drawer-backdrop,
html[data-viewport="tablet"] .nav-drawer-backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px) saturate(0.8);
  -webkit-backdrop-filter: blur(8px) saturate(0.8);
  transition: opacity 0.35s var(--pd-ease-out), visibility 0.35s;
}

html[data-viewport="mobile"] body.page-premium .main-nav,
html[data-viewport="tablet"] body.page-premium .main-nav {
  background:
    linear-gradient(180deg, rgba(240, 200, 0, 0.04) 0%, transparent 18%),
    linear-gradient(180deg, #0d0d0d 0%, #080808 100%);
  border-left: 1px solid rgba(240, 200, 0, 0.28);
  box-shadow: -24px 0 64px rgba(0, 0, 0, 0.65), inset 1px 0 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.38s var(--pd-ease-spring), visibility 0.38s;
}

html[data-viewport="mobile"] body.page-premium .main-nav::after,
html[data-viewport="tablet"] body.page-premium .main-nav::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--pd-gold), transparent);
  opacity: 0.85;
}

html[data-viewport="mobile"] body.page-premium .main-nav::before,
html[data-viewport="tablet"] body.page-premium .main-nav::before {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  padding-bottom: 16px;
  margin-bottom: 4px;
}

html[data-viewport="mobile"] body.page-premium .main-nav a,
html[data-viewport="tablet"] body.page-premium .main-nav a {
  position: relative;
  transition: background 0.25s, color 0.25s, padding-left 0.25s var(--pd-ease-out);
}

@media (hover: hover) {
  html[data-viewport="mobile"] body.page-premium .main-nav a:hover,
  html[data-viewport="tablet"] body.page-premium .main-nav a:hover {
    background: rgba(255, 255, 255, 0.05);
    padding-left: 24px;
    color: #ffffff;
  }
}

html[data-viewport="mobile"] body.page-premium .main-nav a.active,
html[data-viewport="tablet"] body.page-premium .main-nav a.active {
  background: linear-gradient(90deg, rgba(240, 200, 0, 0.12) 0%, transparent 100%);
  box-shadow: inset -3px 0 0 var(--pd-gold);
}

/* ---- Hero — cinematic glass card ---- */
html[data-viewport="mobile"] body.page-home .pd-hero-bg img {
  transition: transform 10s cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-viewport="mobile"] body.page-home .pd-hero-inner {
  border-radius: var(--pd-radius-xl);
  border: 1px solid transparent;
  background:
    linear-gradient(168deg, rgba(16, 16, 16, 0.94) 0%, rgba(8, 8, 8, 0.98) 100%) padding-box,
    linear-gradient(145deg, rgba(240, 200, 0, 0.4), rgba(255, 255, 255, 0.07), rgba(240, 200, 0, 0.15)) border-box;
  box-shadow:
    var(--pd-shadow-md),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
}

html[data-viewport="mobile"] .pd-hero h1 .gold {
  background: linear-gradient(135deg, #fff4a8 0%, var(--pd-gold) 45%, var(--pd-gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-viewport="mobile"] .pd-hero-sub {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  letter-spacing: 0.02em;
}

html[data-viewport="mobile"] .pd-checklist li {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  transition: border-color 0.25s, background 0.25s, transform 0.2s;
}

@media (hover: hover) {
  html[data-viewport="mobile"] .pd-checklist li:hover {
    border-color: rgba(240, 200, 0, 0.25);
    background: rgba(240, 200, 0, 0.04);
  }
}

html[data-viewport="mobile"] .pd-check-icon {
  box-shadow: 0 2px 8px rgba(240, 200, 0, 0.35);
}

/* ---- Buttons — premium press + glow ---- */
html[data-viewport="mobile"] .pd-btn,
html[data-viewport="tablet"] .pd-btn {
  border-radius: 12px;
  letter-spacing: 0.08em;
  transition:
    transform 0.22s var(--pd-ease-out),
    box-shadow 0.28s var(--pd-ease-out),
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
}

html[data-viewport="mobile"] .pd-btn-gold,
html[data-viewport="tablet"] .pd-btn-gold {
  background: linear-gradient(180deg, var(--pd-gold-light) 0%, var(--pd-gold) 48%, var(--pd-gold-dim) 100%);
  border-color: var(--pd-gold);
  box-shadow: var(--pd-shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

@media (hover: hover) {
  html[data-viewport="mobile"] .pd-btn-gold:hover,
  html[data-viewport="tablet"] .pd-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(240, 200, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }

  html[data-viewport="mobile"] .pd-btn-outline:hover,
  html[data-viewport="tablet"] .pd-btn-outline:hover {
    transform: translateY(-2px);
    border-color: var(--pd-gold);
    color: var(--pd-gold);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

html[data-viewport="mobile"] .pd-btn:active,
html[data-viewport="tablet"] .pd-btn:active {
  transform: scale(0.97) translateY(0);
}

html[data-viewport="mobile"] .pd-btn-gold:hover .pd-btn-arrow,
html[data-viewport="tablet"] .pd-btn-gold:hover .pd-btn-arrow {
  transform: translateX(4px);
}

/* ---- Stats — glass tiles ---- */
html[data-viewport="mobile"] .pd-stat-card {
  background: linear-gradient(155deg, rgba(22, 22, 22, 0.9) 0%, rgba(12, 12, 12, 0.95) 100%);
  border: 1px solid rgba(240, 200, 0, 0.14);
  box-shadow: var(--pd-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.28s var(--pd-ease-out), border-color 0.28s, box-shadow 0.28s;
}

@media (hover: hover) {
  html[data-viewport="mobile"] .pd-stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(240, 200, 0, 0.38);
    box-shadow: var(--pd-shadow-md), 0 0 24px rgba(240, 200, 0, 0.08);
  }
}

html[data-viewport="mobile"] .pd-stat-icon {
  border-color: rgba(240, 200, 0, 0.5);
  box-shadow: 0 0 16px rgba(240, 200, 0, 0.12);
}

html[data-viewport="mobile"] .pd-stat-value {
  text-shadow: 0 0 24px rgba(240, 200, 0, 0.2);
}

/* ---- Section titles — editorial ---- */
html[data-viewport="mobile"] .pd-section-title {
  font-weight: 900;
  letter-spacing: 0.06em;
  border-bottom-color: rgba(240, 200, 0, 0.12);
}

html[data-viewport="mobile"] .pd-section-title::after {
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--pd-gold), var(--pd-gold-light));
  box-shadow: 0 0 12px rgba(240, 200, 0, 0.4);
}

/* ---- About image — framed ---- */
html[data-viewport="mobile"] .pd-about-image {
  position: relative;
  border-radius: var(--pd-radius-lg);
  box-shadow: var(--pd-shadow-md);
}

html[data-viewport="mobile"] .pd-about-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(240, 200, 0, 0.2);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

html[data-viewport="mobile"] .pd-about-image img {
  transition: transform 0.6s var(--pd-ease-out);
}

@media (hover: hover) {
  html[data-viewport="mobile"] .pd-about-image:hover img {
    transform: scale(1.03);
  }
}

/* ---- Trust cards ---- */
html[data-viewport="mobile"] .pd-trust-card {
  background: linear-gradient(160deg, rgba(20, 20, 20, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: var(--pd-shadow-sm);
  transition: transform 0.28s var(--pd-ease-out), border-color 0.28s, box-shadow 0.28s;
}

@media (hover: hover) {
  html[data-viewport="mobile"] .pd-trust-card:hover {
    transform: translateY(-2px);
    border-color: rgba(240, 200, 0, 0.28);
    box-shadow: var(--pd-shadow-md);
  }
}

html[data-viewport="mobile"] .pd-trust-icon {
  color: var(--pd-gold);
}

/* ---- Service cards — interactive list ---- */
html[data-viewport="mobile"] a.pd-service-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(18, 18, 18, 0.96) 0%, rgba(10, 10, 10, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: var(--pd-shadow-sm);
  transition:
    transform 0.28s var(--pd-ease-out),
    border-color 0.28s,
    box-shadow 0.28s;
}

html[data-viewport="mobile"] a.pd-service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(240, 200, 0, 0.06) 100%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}

@media (hover: hover) {
  html[data-viewport="mobile"] a.pd-service-card:hover {
    transform: translateY(-3px);
    border-color: rgba(240, 200, 0, 0.35);
    box-shadow: var(--pd-shadow-md), 0 0 0 1px rgba(240, 200, 0, 0.08);
  }

  html[data-viewport="mobile"] a.pd-service-card:hover::before {
    opacity: 1;
  }

  html[data-viewport="mobile"] a.pd-service-card:hover .pd-service-link {
    color: var(--pd-gold);
    letter-spacing: 0.12em;
  }
}

html[data-viewport="mobile"] a.pd-service-card:active {
  transform: scale(0.985);
}

html[data-viewport="mobile"] a.pd-service-card .pd-service-icon {
  background: rgba(240, 200, 0, 0.1);
  border: 1px solid rgba(240, 200, 0, 0.28);
  transition: background 0.25s, box-shadow 0.25s;
}

@media (hover: hover) {
  html[data-viewport="mobile"] a.pd-service-card:hover .pd-service-icon {
    background: rgba(240, 200, 0, 0.16);
    box-shadow: 0 0 16px rgba(240, 200, 0, 0.2);
  }
}

html[data-viewport="mobile"] a.pd-service-card .pd-service-link {
  transition: color 0.25s, letter-spacing 0.25s;
}

/* ---- Sectors ---- */
html[data-viewport="mobile"] .pd-sector {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.25s, border-color 0.25s, background 0.25s;
}

@media (hover: hover) {
  html[data-viewport="mobile"] .pd-sector:hover {
    transform: translateY(-2px);
    border-color: rgba(240, 200, 0, 0.3);
    background: rgba(240, 200, 0, 0.05);
  }
}

/* ---- Why list ---- */
html[data-viewport="mobile"] .pd-why-grid li {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}

@media (hover: hover) {
  html[data-viewport="mobile"] .pd-why-grid li:hover {
    border-color: rgba(240, 200, 0, 0.22);
    background: rgba(240, 200, 0, 0.04);
    transform: translateX(4px);
  }
}

/* ---- Career banner ---- */
html[data-viewport="mobile"] .pd-career-banner {
  background:
    linear-gradient(135deg, rgba(240, 200, 0, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, var(--pd-dark-2) 0%, var(--pd-black) 100%);
  border: 1px solid rgba(240, 200, 0, 0.18);
  border-radius: var(--pd-radius-lg);
  box-shadow: var(--pd-shadow-md);
}

/* ---- Contact strip ---- */
html[data-viewport="mobile"] .pd-contact-strip {
  background: linear-gradient(180deg, rgba(16, 16, 16, 0.98) 0%, rgba(10, 10, 10, 1) 100%);
  border: 1px solid rgba(240, 200, 0, 0.15);
  box-shadow: var(--pd-shadow-sm);
}

html[data-viewport="mobile"] .pd-contact-strip-item {
  transition: background 0.25s;
}

@media (hover: hover) {
  html[data-viewport="mobile"] .pd-contact-strip-item:hover {
    background: rgba(240, 200, 0, 0.04);
  }
}

html[data-viewport="mobile"] body.page-premium .pd-contact-cta {
  background:
    linear-gradient(135deg, rgba(240, 200, 0, 0.1) 0%, transparent 50%),
    var(--pd-dark-2);
  border: 1px solid rgba(240, 200, 0, 0.22);
  box-shadow: var(--pd-shadow-md);
}

/* ---- CTA blocks ---- */
html[data-viewport="mobile"] .pd-cta-inner {
  border: 1px solid rgba(240, 200, 0, 0.18);
  box-shadow: var(--pd-shadow-md);
}

/* ---- Inner page cards ---- */
html[data-viewport="mobile"] .pd-srv-card {
  background: linear-gradient(160deg, rgba(18, 18, 18, 0.96), rgba(10, 10, 10, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.28s, border-color 0.28s, box-shadow 0.28s;
}

@media (hover: hover) {
  html[data-viewport="mobile"] .pd-srv-card:hover {
    transform: translateY(-3px);
    border-color: rgba(240, 200, 0, 0.3);
    box-shadow: var(--pd-shadow-md);
  }
}

/* ---- Footer ---- */
html[data-viewport="mobile"] .pd-footer {
  border-top: 1px solid rgba(240, 200, 0, 0.1);
}

html[data-viewport="mobile"] .pd-footer-social a {
  transition: transform 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}

@media (hover: hover) {
  html[data-viewport="mobile"] .pd-footer-social a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(240, 200, 0, 0.15);
  }
}

/* ---- Bottom action bar — floating luxury ---- */
html[data-viewport="mobile"] .pd-mobile-bar {
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-top: 1px solid rgba(240, 200, 0, 0.22);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-viewport="mobile"] .pd-mobile-bar-item {
  transition: color 0.25s, opacity 0.2s, transform 0.2s;
}

@media (hover: hover) {
  html[data-viewport="mobile"] .pd-mobile-bar-item:hover {
    color: var(--pd-gold);
  }
}

html[data-viewport="mobile"] .pd-mobile-bar-item--gold {
  margin-top: -10px;
  padding-top: 12px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, var(--pd-gold-light) 0%, var(--pd-gold) 100%);
  box-shadow: 0 -6px 24px rgba(240, 200, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

html[data-viewport="mobile"] .pd-mobile-bar-item--gold:active {
  transform: scale(0.96);
  opacity: 1;
}

/* ---- Reveal — утас дээр контент үргэлж харагдана ---- */
html[data-viewport="mobile"] body.page-premium .reveal,
html[data-viewport="tablet"] body.page-premium .reveal {
  opacity: 1 !important;
  transform: none !important;
}

html[data-viewport="mobile"] body.page-premium .reveal.visible,
html[data-viewport="tablet"] body.page-premium .reveal.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* ---- Reveal — smoother entrance (desktop only via premium-dark) ---- */
html[data-viewport="mobile"] body.page-premium .reveal {
  transition: opacity 0.5s var(--pd-ease-out), transform 0.5s var(--pd-ease-out);
}

/* ---- Section rhythm — alternating depth ---- */
html[data-viewport="mobile"] .pd-section.pd-about {
  background: linear-gradient(180deg, var(--pd-black) 0%, rgba(14, 14, 14, 0.6) 50%, var(--pd-black) 100%);
}

html[data-viewport="mobile"] .pd-section.pd-services {
  background: var(--pd-black);
}

html[data-viewport="mobile"] .pd-why {
  background: linear-gradient(180deg, var(--pd-black) 0%, rgba(12, 12, 12, 0.8) 100%);
}

html[data-viewport="mobile"] .pd-partners {
  background: var(--pd-black);
  border-top: 1px solid rgba(240, 200, 0, 0.08);
}

html[data-viewport="mobile"] .pd-partners-viewport {
  mask-image: none;
  -webkit-mask-image: none;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html[data-viewport="mobile"] *,
  html[data-viewport="tablet"] * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  html[data-viewport="mobile"] body.page-home .pd-hero-bg img {
    transition: none;
  }
}