/* =====================================================================
   MEGAGEN — cinematic style layer
   Light theme (white bg, near-black text, blue accent). Smooth scroll,
   custom cursor, sticky-stacking sections, marquee, hover.
   Original styling; content is MEGAGEN's own.
   ===================================================================== */

/* ---------- Lenis smooth scroll ---------- */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Custom cursor: dot + lagging ring (mikafekadu-style) ---------- */
.mg-has-cursor,
.mg-has-cursor * { cursor: none !important; }
.mg-cursor-dot,
.mg-cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 10090;
  pointer-events: none; border-radius: 50%; will-change: transform;
}
.mg-cursor-dot {
  width: 8px; height: 8px; background: var(--mg-accent, #0067b1);
  transition: opacity .25s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
.mg-cursor-ring {
  width: 40px; height: 40px; border: 1.5px solid var(--mg-accent, #0067b1);
  opacity: .55;
  transition: width .35s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)), height .35s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)), opacity .3s ease, background-color .3s ease;
}
.mg-cursor-ring.is-hover { width: 66px; height: 66px; opacity: 1; background: rgba(0, 103, 177, 0.08); }
.mg-cursor-dot.is-hover { opacity: 0; }
@media (pointer: coarse) { .mg-cursor-dot, .mg-cursor-ring { display: none !important; } }

/* ---------- Scroll progress bar (RTL: fills from the right) ----------
   Bright gradient + dual shadow so it stays visible over white AND the
   blue stacking panels. Sits above the floating header. */
.mg-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 4px;
  z-index: 10001; background: transparent; pointer-events: none;
}
.mg-progress__bar {
  height: 100%; width: 100%; transform: scaleX(0); transform-origin: right center;
  background: linear-gradient(90deg, #0067b1, #36b6ff 55%, #8fe3ff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 10px rgba(54, 182, 255, 0.65);
  transition: transform .1s linear;
}

/* ---------- Floating pill header (thealien.design style) ---------- */
#site-header {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 1000;
  background: transparent !important;
  border: 0 !important;
  pointer-events: none; /* only the pill itself is interactive */
}
#site-header .elementor-container,
#site-header .elementor-widget-container { overflow: visible; }
.mg-nav {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 940px; margin: 0 auto;
  padding: 8px 24px 8px 10px;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(11, 19, 32, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.mg-nav__brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 20px; letter-spacing: -0.02em;
  color: var(--mg-text, #0b1320); text-decoration: none;
}
.mg-nav__brand svg { width: 22px; height: 22px; }
.mg-nav__logo { display: block; height: 34px; width: auto; max-width: 190px; object-fit: contain; }
.mg-nav__brand.has-logo { gap: 0; }

/* The legacy Elementor header remains in the page data for safe dashboard
   rebuilds. The visible homepage navigation is the shared PHP component. */
body.home #site-header {
	display: none !important;
}
@media (max-width: 720px) { .mg-nav__logo { height: 28px; max-width: 150px; } }
.mg-nav__right { display: flex; align-items: center; gap: 10px; }
.mg-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mg-text, #0b1320); color: #fff; border: 0; cursor: pointer;
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  transition: transform .25s ease, opacity .2s ease;
}
.mg-menu-btn:hover { transform: translateY(-2px); opacity: .92; }
.mg-menu-btn__bars { display: inline-flex; flex-direction: column; gap: 4px; }
.mg-menu-btn__bars span { width: 18px; height: 2px; background: #fff; border-radius: 2px; }
.mg-nav__phone { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--mg-border, #e3e9f1); background: rgba(255,255,255,.55); color: var(--mg-text, #0b1320); display: flex; align-items: center; justify-content: center; flex: none; text-decoration: none; transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .25s var(--mg-ease, ease); }
.mg-nav__phone:hover { border-color: var(--mg-accent, #0067b1); color: var(--mg-accent, #0067b1); transform: translateY(-2px); }
.mg-nav__phone svg { width: 18px; height: 18px; display: block; }
/* The brand is the first-priority item in the compact header.  It must remain
   a real flex item (rather than a fixed-width box), otherwise wide SVG/PNG
   marks are clipped on inner pages such as /catalog/ and /pdf/. */
.mg-nav { min-width: 0; isolation: isolate; }
.mg-nav__brand { min-width: 0; flex: 0 1 auto; overflow: visible; }
.mg-nav__brand.has-logo { flex: 0 1 auto; min-inline-size: 0; }
.mg-nav__brand.has-logo .mg-nav__logo { display: block; max-inline-size: 100%; object-position: right center; }
.mg-nav__right { flex: 0 0 auto; min-width: 0; white-space: nowrap; }
.mg-nav__right > * { flex: 0 0 auto; }
@media (max-width: 720px) {
  .mg-nav { padding: 7px 10px 7px 14px; gap: 8px; min-height: 52px; }
  .mg-nav__brand { font-size: 18px; }
  .mg-nav__right { gap: 8px; }
}
@media (max-width: 600px) {
  /* Keep the one shared navigation visible while the page scrolls. Logical
     insets make the same rule reliable for both RTL and LTR pages. */
  .mg-pdp-headwrap {
    position: fixed !important;
    inset-block-start: 0 !important;
    inset-inline: 0 !important;
    width: 100% !important; max-width: none !important;
    padding: 8px 12px !important; box-sizing: border-box;
    z-index: 10010;
    pointer-events: none !important;
  }
  .mg-pdp-headwrap .mg-nav { width: 100% !important; max-width: 100% !important; border-radius: 14px; pointer-events: auto; }
  .mg-nav { gap: 6px; padding: 6px 8px 6px 12px; box-sizing: border-box; }
  .mg-nav__name { display: none; } /* keep just the mark on small screens */
  /* A compact four-control lane keeps every essential action visible. The
     logo remains a flexible item, so it scales instead of being cropped. */
  .mg-nav__brand.has-logo { flex: 1 1 auto; max-inline-size: none; }
  .mg-nav__brand.has-logo .mg-nav__logo {
    display: block; inline-size: auto; max-inline-size: calc(100vw - 178px);
    height: 29px; object-position: right center;
  }
  .mg-nav__right { gap: 4px; }
  .mg-nav__right .mg-langsw { display: none !important; }
  .mg-nav__right .mg-theme-toggle,
  .mg-nav__right .mg-nav__acct,
  .mg-nav__right .mg-nav__phone,
  .mg-menu-btn { display: inline-flex !important; width: 44px; height: 44px; min-height: 44px; padding: 0; }
  .mg-nav__right .mg-theme-toggle svg,
  .mg-nav__right .mg-nav__acct svg,
  .mg-nav__right .mg-nav__phone svg { width: 17px; height: 17px; }
  /* Reserve enough first-section space for the fixed navigation shell. */
  /* The product hero image already reserves the fixed-header offset through
     its own mobile margin; adding section padding here doubled that gap. */
  .mg-arw-hero { padding-top: 0 !important; }
  .mg-cat-hero { padding-top: 96px !important; }
  .mg-news-hero { padding-top: 96px !important; }
  body.admin-bar .mg-pdp-headwrap { inset-block-start: 46px !important; }
}

@media (max-width: 350px) {
  .mg-nav { padding-inline: 7px; }
  .mg-nav__right { gap: 2px; }
  .mg-nav__brand.has-logo .mg-nav__logo { max-inline-size: calc(100vw - 166px); height: 26px; }
}

/* ---------- Fullscreen overlay menu (thealien.design style) ---------- */
.mg-overlay {
  position: fixed; inset: 0; z-index: 10020;
  background: linear-gradient(135deg, rgba(247, 250, 253, 0.7), rgba(222, 235, 248, 0.62));
  -webkit-backdrop-filter: saturate(190%) blur(32px);
  backdrop-filter: saturate(190%) blur(32px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s ease, visibility .5s ease;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mg-overlay__foot {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: center;
  padding: 20px 28px; border-top: 1px solid rgba(11, 19, 32, 0.08);
  background: rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 14.5px; color: var(--mg-muted, #5a6b7e);
}
.mg-overlay__foot a, .mg-overlay__foot span { color: var(--mg-text, #0b1320); text-decoration: none; }
.mg-overlay__foot a:hover { color: var(--mg-accent, #0067b1); }
.mg-overlay__foot b { color: var(--mg-accent, #0067b1); }
@media (max-width: 760px) { .mg-overlay__foot { font-size: 13px; gap: 6px 16px; padding: 14px; } }
.mg-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mg-overlay__badge {
  position: absolute; inset-block-start: 30px; inset-inline-start: 48px;
  border: 1px solid var(--mg-border, #e3e9f1); border-radius: 999px;
  padding: 9px 18px; font-weight: 700; font-size: 14px; background: #fff;
}
.mg-overlay__close {
  position: absolute; inset-block-start: 26px; inset-inline-end: 34px;
  width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--mg-accent, #0067b1); color: #fff; line-height: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 103, 177, 0.4);
  transition: transform .35s ease, background-color .25s ease;
}
.mg-overlay__close:hover { transform: rotate(90deg); background: #0b1320; }
.mg-overlay__close svg { width: 24px; height: 24px; display: block; stroke: #fff; }
.mg-overlay__inner {
  min-height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-content: center; max-width: 1120px; margin: 0 auto;
  padding: 130px 48px 80px;
}
/* Multi-column mega-menu: extra columns added from the dashboard. Links shrink so
   several columns fit; on mobile the media query below collapses to one column. */
.mg-overlay__inner--multi {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-content: start; gap: 30px 40px; padding-top: 116px; max-width: 1260px;
}
.mg-overlay__inner--multi .mg-overlay__links a { font-size: clamp(22px, 2.6vw, 34px); }
.mg-overlay__label {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--mg-muted, #5a6b7e); margin: 0 0 18px;
}
.mg-overlay__label::before { content: "●\00a0"; color: var(--mg-accent, #0067b1); }
.mg-overlay__links { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mg-overlay__links a {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: clamp(34px, 5vw, 64px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.18;
  color: var(--mg-text, #0b1320); text-decoration: none;
  opacity: 0; transform: translateY(20px);
  transition: color .25s ease;
}
.mg-overlay.is-open .mg-overlay__links a {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1), color .25s ease;
}
.mg-overlay__links--sub a { font-size: clamp(24px, 3.2vw, 38px); }
.mg-overlay__links a:hover { color: var(--mg-accent, #0067b1); }
.mg-overlay__arrow { display: inline-flex; transition: transform .25s ease; }
.mg-overlay__arrow svg { width: .58em; height: .58em; }
.mg-overlay__links a:hover .mg-overlay__arrow { transform: translate(4px, -4px); }
/* staggered reveal */
.mg-overlay.is-open .mg-overlay__col:nth-child(1) .mg-overlay__links a:nth-child(1) { transition-delay: .10s; }
.mg-overlay.is-open .mg-overlay__col:nth-child(1) .mg-overlay__links a:nth-child(2) { transition-delay: .16s; }
.mg-overlay.is-open .mg-overlay__col:nth-child(1) .mg-overlay__links a:nth-child(3) { transition-delay: .22s; }
.mg-overlay.is-open .mg-overlay__col:nth-child(1) .mg-overlay__links a:nth-child(4) { transition-delay: .28s; }
.mg-overlay.is-open .mg-overlay__col:nth-child(2) .mg-overlay__links a { transition-delay: .26s; }
@media (max-width: 760px) {
  .mg-overlay { min-height: 100dvh; }
  .mg-overlay__inner { min-height: 0; grid-template-columns: 1fr; gap: 28px; padding: 126px 20px 30px; align-content: start; }
  .mg-overlay__inner--multi { grid-template-columns: 1fr; gap: 26px; padding-top: 126px; }
  .mg-overlay__links a { font-size: clamp(26px, 9vw, 40px); }
  .mg-overlay__links--sub a { font-size: clamp(21px, 7.5vw, 31px); }
  .mg-overlay__foot { position: relative; inset: auto; justify-content: flex-start; padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); }
  .mg-overlay__badge { display: none; }
  .mg-overlay__close { inset-block-start: 18px; inset-inline-end: 20px; width: 46px; height: 46px; }
}

/* ---------- Mega-menu design variants ---------- */
/* Drawer: a frosted side panel (RTL: opens from the right) */
.mg-overlay--drawer .mg-overlay__inner {
  grid-template-columns: 1fr; max-width: 470px; min-height: 100%;
  margin-inline-start: 0; margin-inline-end: auto; align-content: start;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: -24px 0 70px rgba(11, 19, 32, 0.18);
  padding: 120px 46px 90px;
  transform: translateX(36px); opacity: 0;
  transition: transform .55s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)), opacity .45s ease;
}
.mg-overlay--drawer.is-open .mg-overlay__inner { transform: translateX(0); opacity: 1; }
.mg-overlay--drawer .mg-overlay__links a { font-size: clamp(30px, 5vw, 46px); }
.mg-overlay--drawer .mg-overlay__col:nth-child(2) { margin-top: 30px; }
.mg-overlay--drawer .mg-overlay__badge { display: none; }
.mg-overlay--drawer .mg-overlay__foot { background: rgba(255, 255, 255, 0.5); }

/* Center: minimal single centered column */
.mg-overlay--center .mg-overlay__inner { grid-template-columns: 1fr; text-align: center; max-width: 760px; }
.mg-overlay--center .mg-overlay__links { align-items: center; }
.mg-overlay--center .mg-overlay__col:nth-child(2) { display: none; }
.mg-overlay--center .mg-overlay__label { text-align: center; }
.mg-overlay--center .mg-overlay__links a { font-size: clamp(40px, 7vw, 80px); }
@media (max-width: 760px) { .mg-overlay--drawer .mg-overlay__inner { max-width: none; } }

/* ---------- Hero: full-screen image carousel (mikafekadu-style) ---------- */
#top, #top > .elementor-container { padding: 0 !important; max-width: 100% !important; }
#top .elementor-column-wrap, #top .elementor-widget-wrap,
#top .elementor-widget-html, #top .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.mg-hero {
  position: relative; width: 100%; height: 100vh; min-height: 600px;
  overflow: hidden; background: #06121f; color: #fff; direction: rtl;
}
.mg-hero__track { position: absolute; inset: 0; }
.mg-hero__slide {
  position: absolute; inset: 0;
  background: var(--img, #0a2e4d);
  opacity: 0; transform: scale(1.07);
  transition: opacity 1s ease, transform 7s linear; will-change: opacity, transform;
}
.mg-hero__slide.is-active { opacity: 1; transform: scale(1); z-index: 1; }
.mg-hero__image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center; user-select: none; pointer-events: none;
}
.mg-hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(6,12,20,.88) 0%, rgba(6,12,20,.2) 45%, rgba(6,12,20,.5) 100%),
    linear-gradient(90deg, rgba(6,12,20,.55), transparent 55%);
}
.mg-hero__body {
  position: absolute; z-index: 2;
  inset-block-end: clamp(64px, 12vh, 140px);
  inset-inline-start: clamp(28px, 6vw, 120px);
  inset-inline-end: clamp(28px, 6vw, 120px);
  max-width: 820px;
}
.mg-hero__meta { display: flex; align-items: center; gap: 14px; font-size: 14px; letter-spacing: .1em; font-weight: 600; opacity: .92; margin-bottom: 14px; }
.mg-hero__meta b { color: #fff; background: var(--mg-accent, #0067b1); border-radius: 6px; padding: 2px 9px; font-size: 15px; }
.mg-hero__rule { width: 34px; height: 2px; background: rgba(255,255,255,.6); display: inline-block; }
.mg-hero__title {
  font-size: clamp(46px, 8.5vw, 124px); font-weight: 800; line-height: .98;
  letter-spacing: -0.02em; margin: 0 0 14px;
}
.mg-hero__slide.is-active .mg-hero__title,
.mg-hero__slide.is-active .mg-hero__addr,
.mg-hero__slide.is-active .mg-hero__explore { animation: mg-hero-in .75s cubic-bezier(.22,1,.36,1) both; }
.mg-hero__slide.is-active .mg-hero__title { animation-delay: .12s; }
.mg-hero__slide.is-active .mg-hero__addr { animation-delay: .22s; }
.mg-hero__slide.is-active .mg-hero__explore { animation-delay: .32s; }
.mg-hero__addr { font-size: clamp(15px, 2vw, 19px); opacity: .85; margin: 0 0 24px; max-width: 60ch; }
.mg-hero__explore {
  display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none;
  font-weight: 700; letter-spacing: .14em; font-size: 14px;
}
.mg-hero__explore span {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5); transition: background-color .3s ease, border-color .3s ease;
}
.mg-hero__explore span svg { width: 18px; height: 18px; }
.mg-hero__explore:hover span { background: var(--mg-accent, #0067b1); border-color: var(--mg-accent, #0067b1); }
@keyframes mg-hero-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
/* left rail */
.mg-hero__rail {
  position: absolute; z-index: 4; inset-block: 0; inset-inline-start: clamp(16px, 3vw, 44px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.mg-hero__socials { display: flex; flex-direction: column; gap: 18px; }
.mg-hero__socials a { color: rgba(255,255,255,.72); width: 22px; height: 22px; line-height: 0; display: flex; align-items: center; justify-content: center; transition: color .2s ease, transform .2s ease; }
.mg-hero__socials a svg { width: 20px; height: 20px; display: block; }
.mg-hero__socials a:hover { color: #fff; transform: translateY(-2px); }
.mg-hero__scroll {
  position: absolute; z-index: 4; inset-block-end: 28px; inset-inline-start: clamp(20px, 3vw, 48px);
  writing-mode: vertical-rl; transform: rotate(180deg);
  color: rgba(255,255,255,.85); text-decoration: none; letter-spacing: .25em; font-size: 12px; font-weight: 600;
}
.mg-hero__scroll::after { content: ""; position: absolute; inset-block-start: -54px; inset-inline-start: 50%; width: 1px; height: 44px; background: rgba(255,255,255,.5); }
/* right side */
.mg-hero__side {
  position: absolute; z-index: 4; inset-block: 0; inset-inline-end: clamp(18px, 3vw, 46px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
}
.mg-hero__counter { display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 700; }
.mg-hero__counter .cur { font-size: 26px; }
.mg-hero__counter i { width: 1px; height: 46px; background: rgba(255,255,255,.4); display: block; }
.mg-hero__counter .tot { font-size: 14px; opacity: .6; }
.mg-hero__arrows { display: flex; flex-direction: column; gap: 10px; }
.mg-hero__btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.06); color: #fff; cursor: pointer; line-height: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.mg-hero__btn:hover { background: var(--mg-accent, #0067b1); border-color: var(--mg-accent, #0067b1); transform: translateY(-2px); }
.mg-hero__btn svg { width: 20px; height: 20px; display: block; }
.mg-hero__toggle { font-size: 13px; font-weight: 800; letter-spacing: -2px; }
.mg-hero__toggle[aria-pressed="true"] { background: rgba(255,255,255,.22); }
/* progress */
.mg-hero__progress { position: absolute; z-index: 4; inset-block-end: 0; inset-inline: 0; height: 3px; background: rgba(255,255,255,.18); }
.mg-hero__progress i { display: block; height: 100%; width: 0; background: var(--mg-accent, #0067b1); }
@media (max-width: 760px) {
  .mg-hero__rail, .mg-hero__scroll, .mg-hero__counter { display: none; }
  .mg-hero__side { inset-inline-end: 14px; }
  .mg-hero__body { inset-inline: 22px; inset-block-end: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-hero__slide { transition: opacity .4s ease; transform: none; }
  .mg-hero__slide.is-active { transform: none; }
  .mg-hero__slide.is-active .mg-hero__title,
  .mg-hero__slide.is-active .mg-hero__addr,
  .mg-hero__slide.is-active .mg-hero__explore { animation: none; }
}

/* ---------- Typography polish ---------- */
.elementor-heading-title { letter-spacing: -0.015em; text-wrap: balance; }
::selection { background: var(--mg-accent, #0067b1); color: #fff; }

/* ---------- Buttons: smooth hover lift ---------- */
.elementor-button {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease,
    opacity .3s ease, background-color .3s ease, color .3s ease;
}
.elementor-button:hover {
  transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 103, 177, 0.25);
}

/* ---------- Stats row ---------- */
.mg-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  text-align: center;
}
.mg-stat__num {
  font-size: clamp(34px, 5vw, 56px); font-weight: 800;
  color: var(--mg-accent, #0067b1); letter-spacing: -0.02em; line-height: 1;
}
.mg-stat__label { color: var(--mg-muted, #5a6b7e); font-size: 16px; margin-top: 8px; }
@media (max-width: 780px) { .mg-stats { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } }

/* ---------- Bento grid (personalized company showcase) ---------- */
.mg-bento {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 172px; gap: 16px;
}
.mg-bento__card {
  position: relative; overflow: hidden; border-radius: 22px;
  border: 1px solid var(--mg-border, #e3e9f1);
  background: var(--mg-surface, #f3f6fb);
  padding: 22px; display: flex; flex-direction: column;
  text-decoration: none; color: var(--mg-text, #0b1320);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.mg-bento__card:hover { transform: translateY(-5px); box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11, 19, 32, 0.26)); }
.mg-bento__eyebrow { font-size: 13px; font-weight: 700; color: var(--mg-accent, #0067b1); margin: 0 0 8px; }
.mg-bento__title { font-size: 21px; font-weight: 800; margin: 0 0 6px; line-height: 1.3; }
.mg-bento__desc { font-size: 14.5px; color: var(--mg-muted, #5a6b7e); margin: 0; line-height: 1.8; }
.mg-bento__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mg-bento__card > * { position: relative; z-index: 1; }

/* placements (desktop) */
.b-brand    { grid-column: 1;          grid-row: 1 / span 2; }
.b-status   { grid-column: 2 / span 2; grid-row: 1; }
.b-catalog  { grid-column: 4;          grid-row: 1; }
.b-featured { grid-column: 2 / span 2; grid-row: 2 / span 2; }
.b-map      { grid-column: 4;          grid-row: 2; }
.b-tools    { grid-column: 1;          grid-row: 3; }
.b-contact  { grid-column: 4;          grid-row: 3; }

/* brand card (dark) */
.b-brand { background: radial-gradient(130% 120% at 0% 0%, #14304a 0%, #0b1320 62%); color: #fff; border-color: #0b1320; justify-content: space-between; }
.b-brand .mg-bento__title { font-size: 26px; }
.b-brand .mg-bento__desc { color: rgba(255, 255, 255, 0.72); }
.mg-bento__social { display: flex; gap: 10px; margin-top: 14px; }
.mg-bento__social a { width: 38px; height: 38px; border-radius: 50%; line-height: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; transition: background-color .2s ease; }
.mg-bento__social a:hover { background: var(--mg-accent, #0067b1); }
.mg-bento__social svg { width: 18px; height: 18px; display: block; }

/* status banner (blue, live pulse) */
.b-status { background: linear-gradient(110deg, #0067b1, #0aa0e6); color: #fff; border-color: transparent; justify-content: center; align-items: flex-start; }
.b-status .mg-bento__title { color: #fff; font-size: 24px; }
.mg-bento__pulse { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.mg-bento__pulse i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: mg-pulse 2s infinite; }
@keyframes mg-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); } 70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

/* featured product (image-ready) */
.b-featured { background: linear-gradient(160deg, #123a5c 0%, #0b1320 100%); color: #fff; border-color: transparent; justify-content: flex-end; }
.mg-bento__deco { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(60% 60% at 72% 24%, rgba(54, 182, 255, 0.4), transparent 70%),
  radial-gradient(42% 42% at 24% 72%, rgba(0, 103, 177, 0.45), transparent 70%); }
.b-featured .mg-bento__title { font-size: 30px; }
.b-featured .mg-bento__desc { color: rgba(255, 255, 255, 0.8); }
.mg-bento__chipline { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.mg-bento__chipline span { font-size: 12.5px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); }

/* catalog download */
.b-catalog { background: linear-gradient(150deg, #0aa0e6, #0067b1); color: #fff; border-color: transparent; justify-content: space-between; }
.b-catalog .mg-bento__title { color: #fff; }
.mg-bento__dl { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: grid; place-items: center; }
.mg-bento__dl svg { width: 20px; height: 20px; color: #fff; }

/* location / map */
.b-map { padding: 0; color: #fff; }
.mg-bento__mapbg { position: absolute; inset: 0; z-index: 0; background-color: #0c2a45;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 24px 24px; }
.mg-bento__mapbg::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(0deg, rgba(11, 19, 32, 0.6), transparent 60%),
  linear-gradient(58deg, transparent 47%, rgba(0, 103, 177, 0.85) 47% 52%, transparent 52%); }
.mg-bento__maplabel { position: absolute; z-index: 2; inset-block-end: 16px; inset-inline-start: 18px; font-weight: 800; font-size: 18px; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); }

/* tools / tech */
.b-tools .mg-bento__tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.b-tools .mg-bento__tools span { font-size: 12.5px; padding: 6px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--mg-border, #e3e9f1); color: var(--mg-text, #0b1320); font-weight: 600; }

/* quick contact */
.b-contact { background: var(--mg-text, #0b1320); color: #fff; border-color: transparent; justify-content: space-between; }
.b-contact .mg-bento__title { color: #fff; }
.mg-bento__phone { font-size: 22px; font-weight: 800; direction: ltr; text-align: start; }

@media (max-width: 900px) {
  .mg-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .b-brand, .b-status, .b-catalog, .b-featured, .b-map, .b-tools, .b-contact { grid-column: auto !important; grid-row: auto !important; }
  .b-status, .b-featured { grid-column: 1 / span 2 !important; }
  .mg-bento__card { min-height: 178px; }
  .b-map { min-height: 200px; }
}
@media (max-width: 560px) {
  .mg-bento { grid-template-columns: 1fr; gap: 14px; }
  .b-brand, .b-status, .b-catalog, .b-featured, .b-map, .b-tools, .b-contact { grid-column: auto !important; grid-row: auto !important; }
  .mg-bento__card { min-height: 0; }
  .b-brand, .b-featured, .b-map { min-height: 220px; }
}

/* ---------- Horizontal-scroll showcase (pin + translate technique) ---------- */
#expertise, #expertise > .elementor-container { padding: 0 !important; max-width: 100% !important; }
#expertise .elementor-column-wrap, #expertise .elementor-widget-wrap,
#expertise .elementor-widget-html, #expertise .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.mg-hx { position: relative; height: 360vh; background: #0a1622; }
.mg-hx__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; color: #fff;
}
.mg-hx__head {
  padding: clamp(84px, 13vh, 140px) clamp(24px, 6vw, 90px) 0;
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.mg-hx__eyebrow { color: var(--mg-accent, #0067b1); font-weight: 700; letter-spacing: .08em; font-size: 14px; }
.mg-hx__h { font-size: clamp(30px, 5vw, 60px); font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.mg-hx__hint { margin-inline-start: auto; color: rgba(255, 255, 255, .5); font-size: 13px; }
.mg-hx__track {
  display: flex; direction: rtl; gap: 30px; padding: 0 clamp(24px, 6vw, 90px);
  align-items: center; flex: 1; will-change: transform;
}
.mg-hx__card {
  flex: 0 0 auto; width: min(600px, 80vw); height: 60vh; direction: rtl; text-align: right;
  background: #0e1b2b; border: 1px solid rgba(255, 255, 255, .10); border-radius: 24px;
  padding: clamp(28px, 3.4vw, 48px); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: border-color .3s ease, transform .3s ease;
}
.mg-hx__card:hover { border-color: var(--mg-accent, #0067b1); transform: translateY(-4px); }
.mg-hx__thumb { position: absolute; inset-block-start: 24px; inset-inline-end: 30px; width: clamp(64px, 7vw, 96px); aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 12px 30px rgba(0, 0, 0, .3); z-index: 3; }
.mg-hx__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-hx__top { font-size: 14px; letter-spacing: .05em; margin-bottom: 14px; }
.mg-hx__top b { color: var(--mg-accent, #0067b1); font-weight: 800; }
.mg-hx__top span { opacity: .7; }
.mg-hx__title { font-size: clamp(26px, 3.2vw, 44px); font-weight: 800; margin: 0 0 14px; letter-spacing: -0.01em; line-height: 1.12; }
.mg-hx__desc { color: rgba(255, 255, 255, .72); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.9; margin: 0 0 20px; max-width: 46ch; }
.mg-hx__tags { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.mg-hx__tags li { border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.mg-hx__link { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; }
.mg-hx__link svg { width: 16px; height: 16px; }
.mg-hx__progress { position: absolute; inset-block-end: 0; inset-inline: 0; height: 3px; background: rgba(255, 255, 255, .12); }
.mg-hx__progress i { display: block; height: 100%; width: 0; background: var(--mg-accent, #0067b1); }
@media (max-width: 760px) {
  /* Keep the pinned horizontal scroll on mobile (same as desktop). */
  .mg-hx { height: 320vh; }
  .mg-hx__card { width: 84vw; height: 66vh; }
  .mg-hx__head { padding-top: clamp(72px, 11vh, 110px); }
  .mg-hx__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-hx { height: auto; }
  .mg-hx__sticky { position: static; height: auto; }
  .mg-hx__track { flex-wrap: wrap; transform: none !important; }
  .mg-hx__card { width: 100%; height: auto; }
}

/* ---------- Footer ---------- */
.mg-footer {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px;
  text-align: right; border-top: 1px solid var(--mg-border, #e3e9f1);
  margin-top: 56px; padding-top: 46px;
}
.mg-footer :is(h2,h4) { font-size: 15px; font-weight: 800; margin: 0 0 14px; color: var(--mg-text, #0b1320); }
.mg-footer a, .mg-footer p { display: block; color: var(--mg-muted, #5a6b7e); text-decoration: none; font-size: 14.5px; line-height: 2.15; margin: 0; }
.mg-footer a { transition: color .2s ease; }
.mg-footer a:hover { color: var(--mg-accent, #0067b1); }
.mg-footer__brand p { margin-top: 4px; max-width: 34ch; }
.mg-footer .mg-bento__social a { width: 36px; height: 36px; line-height: 0; display: flex; align-items: center; justify-content: center; background: var(--mg-surface, #f3f6fb); border: 1px solid var(--mg-border, #e3e9f1); color: var(--mg-text, #0b1320); }
.mg-footer .mg-bento__social a:hover { background: var(--mg-accent, #0067b1); color: #fff; }
.mg-footer .mg-bento__social svg { width: 18px; height: 18px; display: block; }
.mg-footer__bar { text-align: center; color: var(--mg-muted, #5a6b7e); font-size: 13px; border-top: 1px solid var(--mg-border, #e3e9f1); margin-top: 40px; padding: 22px 0 4px; }
@media (max-width: 780px) { .mg-footer { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .mg-footer { grid-template-columns: 1fr; } }

/* Contact form mobile rhythm: retain a safe inline gutter even when Elementor
   outputs a full-width section with no container padding. */
@media (max-width: 720px) {
  /* The dedicated contact template does not use Elementor's container.
     Give its RTL content a consistent safe gutter on narrow screens. */
  body.mg-contact-page .mg-arw-sec {
    padding-inline: max(18px, env(safe-area-inset-right)) !important;
  }
  body.mg-contact-page .mg-contact {
    overflow: hidden;
  }
  .mg-contact-page .elementor-widget-container,
  .mg-contact-page .mg-contact,
  body.page-contact-us .entry-content {
    padding-inline: max(18px, env(safe-area-inset-right)) !important;
    box-sizing: border-box;
  }
  .mg-contact-page .mg-contact__wrap,
  .mg-contact-page .mg-contact__grid,
  body.page-contact-us .mg-form {
    margin-inline: auto;
    width: min(100%, 680px);
  }
}

/* ---------- Sticky-stacking sections (the scroll effect) ---------- */
/* Let Elementor wrappers around the stack overflow so sticky works. */
#mg-stack-section,
#mg-stack-section > .elementor-container,
#mg-stack-section .elementor-column,
#mg-stack-section .elementor-widget-wrap,
#mg-stack-section .elementor-widget-html,
#mg-stack-section .elementor-widget-container { overflow: visible !important; }

.mg-stack { position: relative; }
.mg-stack__panel {
  position: sticky; top: 0;
  min-height: 92vh;
  display: flex; align-items: center;
  background: var(--mg-panel, #0067b1);
  color: #fff;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -12px 44px rgba(11, 19, 32, 0.2);
  overflow: hidden;
}
.mg-stack__inner {
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: clamp(40px, 7vw, 92px) clamp(24px, 5vw, 72px);
  display: flex; gap: clamp(20px, 4vw, 48px); align-items: flex-start;
}
.mg-stack__thumb {
  flex: none; width: clamp(96px, 12vw, 168px); aspect-ratio: 1;
  border-radius: 24px; overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}
.mg-stack__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-stack__thumb--empty { background: rgba(255, 255, 255, 0.10); }
.mg-stack__title {
  font-size: clamp(34px, 6vw, 72px); font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.mg-stack__desc {
  font-size: clamp(16px, 2.2vw, 20px); max-width: 60ch; line-height: 1.9;
  color: rgba(255, 255, 255, 0.84); margin: 0 0 22px;
}
.mg-stack__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.mg-stack__tags span {
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
  padding: 7px 16px; font-size: 14px;
}
.mg-stack__cta {
  color: #fff; font-weight: 700; text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5); padding-bottom: 3px;
  transition: border-color .3s ease;
}
.mg-stack__cta:hover { border-color: #fff; }
@media (max-width: 760px) {
  .mg-stack__inner { flex-direction: column; gap: 10px; }
  .mg-stack__panel { min-height: auto; }
}

/* ---------- Marquee strip (clean filled text, no outline) ---------- */
.mg-marquee {
  overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mg-marquee__track {
  display: inline-flex; flex-wrap: nowrap; white-space: nowrap; gap: 2.5rem;
  padding-block: 0.15em; animation: mg-marquee 32s linear infinite; will-change: transform;
}
.mg-marquee:hover .mg-marquee__track { animation-play-state: paused; }
.mg-marquee__item {
  font-size: clamp(22px, 3.4vw, 46px); font-weight: 800; letter-spacing: -0.01em;
  color: var(--mg-text, #0b1320);
}
.mg-marquee__dot { color: var(--mg-accent, #0067b1); margin-inline: 0.15em; }
@keyframes mg-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Contact form (Contact Form 7 + static fallback) ---------- */
.wpcf7-form, .mg-form { display: grid; gap: 16px; max-width: 640px; margin: 30px auto 0; text-align: right; }
.mg-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wpcf7-form label, .mg-form label { display: block; font-weight: 600; color: var(--mg-text, #0b1320); font-size: 14.5px; }
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form input[type=tel], .wpcf7-form textarea,
.mg-form input, .mg-form textarea {
  width: 100%; margin-top: 8px; padding: 14px 16px; font-family: inherit; font-size: 15px;
  color: var(--mg-text, #0b1320); background: #fff; border: 1px solid var(--mg-border, #e3e9f1);
  border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus, .mg-form input:focus, .mg-form textarea:focus {
  outline: none; border-color: var(--mg-accent, #0067b1); box-shadow: 0 0 0 4px rgba(0, 103, 177, .12);
}
.wpcf7-form textarea, .mg-form textarea { min-height: 130px; resize: vertical; }
.wpcf7-submit, .mg-form button[type=submit] {
  justify-self: start; background: var(--mg-accent, #0067b1); color: #fff; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 16px; padding: 15px 40px; border-radius: 999px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wpcf7-submit:hover, .mg-form button[type=submit]:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 103, 177, .3); }
.wpcf7-response-output { border-radius: 12px; margin: 8px 0 0 !important; padding: 12px 16px !important; font-size: 14px; }
.wpcf7-not-valid-tip { color: #d33; font-size: 13px; margin-top: 6px; }
@media (max-width: 560px) { .mg-form__grid { grid-template-columns: 1fr; } }

/* ---------- Staggered scroll-reveal (cards) ---------- */
.mg-anim .mg-reveal-item {
  opacity: 0; transform: translateY(24px); filter: blur(8px);
  transition: opacity .8s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    transform .8s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    filter .8s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1));
  will-change: opacity, transform, filter;
}
.mg-anim .mg-reveal-item.is-in { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .mg-anim .mg-reveal-item { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---------- Product image layer (stacking panels) ---------- */
.mg-stack__media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .26; }
.mg-stack__panel.has-media .mg-stack__inner { position: relative; z-index: 2; }
.mg-stack__panel.has-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 0, .4), transparent 70%); }
/* expertise card images */
.mg-hx__media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.mg-hx__card.has-media > * { position: relative; z-index: 2; }
.mg-hx__card.has-media > .mg-hx__media { z-index: 0; }
.mg-hx__card.has-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10, 22, 34, .85), rgba(10, 22, 34, .35)); }

/* ---------- Contact info cards ---------- */
.mg-cinfo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 920px; margin: 30px auto 0; }
.mg-cinfo__card { display: flex; align-items: center; gap: 12px; text-align: right; background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 16px; padding: 16px 18px; text-decoration: none;
  box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, 0.16));
  transition: transform .35s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow .35s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-cinfo__card:hover { transform: translateY(-4px); box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11, 19, 32, 0.26)); }
.mg-cinfo__ic { flex: none; width: 42px; height: 42px; line-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(0, 103, 177, .1); color: var(--mg-accent, #0067b1); }
.mg-cinfo__ic svg { width: 20px; height: 20px; display: block; }
.mg-cinfo__card b { display: block; font-size: 13px; color: var(--mg-muted, #5a6b7e); font-weight: 600; }
.mg-cinfo__card p { margin: 2px 0 0; color: var(--mg-text, #0b1320); font-weight: 700; font-size: 15px; }
@media (max-width: 880px) { .mg-cinfo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .mg-cinfo { grid-template-columns: 1fr; } }

/* ---------- About feature cards ---------- */
.mg-apoints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 980px; margin: 34px 0 0; }
.mg-apoint { background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 18px; padding: 26px; text-align: right;
  box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, 0.16));
  transition: transform .45s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow .45s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-apoint:hover { transform: translateY(-4px); box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11, 19, 32, 0.26)); }
.mg-apoint b { display: block; font-size: 18px; font-weight: 800; color: var(--mg-text, #0b1320); margin-bottom: 8px; }
.mg-apoint b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 3px; background: var(--mg-accent, #0067b1); margin-inline-end: 9px; vertical-align: middle; }
.mg-apoint p { margin: 0; color: var(--mg-muted, #5a6b7e); line-height: 1.9; font-size: 15px; }
@media (max-width: 780px) { .mg-apoints { grid-template-columns: 1fr; } }

/* Optional section images (About / Academy) */
.mg-about__media { max-width: 1100px; margin: 40px 0 0; border-radius: 22px; overflow: hidden;
  box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11, 19, 32, 0.26)); border: 1px solid var(--mg-border, #e3e9f1); }
.mg-about__media img { display: block; width: 100%; height: auto; }
.mg-academy__media { max-width: 760px; margin: 30px auto 4px; border-radius: 22px; overflow: hidden;
  box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11, 19, 32, 0.26)); }
.mg-academy__media img { display: block; width: 100%; height: auto; }

/* ============================================================= */
/* Product pages (single + archive)                              */
/* ============================================================= */
/* Clip horizontal overflow on the body so content can never be pushed to one
   side (empty gap on the other). Use overflow-x:HIDDEN (not clip): `clip` is
   only supported on newer engines (Chromium 90+/Safari 16+); on an older mobile
   browser it is silently ignored, so any stray overflow is NOT clipped and the
   RTL content gets pushed to the right with an empty gap on the left — exactly
   the reported bug. `hidden` is universally supported. No max-width:100vw either
   (100vw can exceed the visual viewport on mobile and shift the layout). */
html.mg-pdp-html, html.mg-pdp-html body.mg-pdp-body { overflow-x: hidden; }
.mg-pdp-body { background: var(--mg-bg, #fff); overflow-x: hidden; }
/* Hello Elementor's theme.css sets `body { display:flex; padding; border }`.
   On our custom full-bleed templates that makes the position:fixed header
   collapse to a narrow pill in the top corner and adds stray padding/border. */
html body.mg-pdp-body { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; min-height: 0 !important; }
.mg-pdp-body main, .mg-pdp-body section { max-width: 100%; }
.mg-pdp-body main { overflow-x: hidden; }
.mg-arw-formula { overflow-x: auto; } /* long LTR formulas scroll inside their box, not the page */
/* Re-create the floating pill position for standalone templates on desktop.
   Mobile geometry is defined in the compact navigation block above. */
@media (min-width: 601px) {
  .mg-pdp-headwrap { position: fixed !important; top: 8px; left: 0 !important; right: 0 !important; width: 100% !important; box-sizing: border-box; z-index: 1000; pointer-events: none; padding: 0 20px; }
}
.mg-pdp-headwrap .mg-nav { max-width: 940px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.mg-pdp-footwrap { border-top: 1px solid var(--mg-border, #e3e9f1); background: var(--mg-surface, #f3f6fb); padding: 56px 24px; }
.mg-pdp-footwrap .mg-footer { max-width: 1180px; margin: 0 auto; }

.mg-pdp { max-width: 1180px; margin: 0 auto; padding: 124px 24px 0; }
.mg-pdp__hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding: 26px 0 56px; }
.mg-pdp__back { color: var(--mg-pa, #0067b1); text-decoration: none; font-weight: 700; font-size: 14px; }
.mg-pdp__back:hover { opacity: .8; }
.mg-pdp__eyebrow { color: var(--mg-pa, #0067b1); font-weight: 700; letter-spacing: .04em; margin: 18px 0 8px; font-size: 15px; }
.mg-pdp__title { font-size: clamp(34px, 5vw, 60px); font-weight: 800; line-height: 1.05; color: var(--mg-text, #0b1320); letter-spacing: -.02em; margin: 0; }
.mg-pdp__intro { color: var(--mg-muted, #5a6b7e); font-size: 19px; line-height: 1.9; max-width: 560px; margin-top: 16px; }
.mg-pdp__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mg-pdp__chips span { background: #fff; border: 1px solid var(--mg-border, #e3e9f1); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--mg-text, #0b1320); }
.mg-pdp__cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.mg-pdp__btn { padding: 14px 28px; border-radius: 999px; font-weight: 700; text-decoration: none; display: inline-block; transition: transform .25s ease, box-shadow .25s ease; }
.mg-pdp__btn.primary { background: var(--mg-pa, #0067b1); color: #fff; }
.mg-pdp__btn.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 103, 177, .3); }
.mg-pdp__btn.ghost { border: 1px solid var(--mg-border, #e3e9f1); color: var(--mg-text, #0b1320); }
.mg-pdp__btn.ghost:hover { border-color: var(--mg-pa, #0067b1); color: var(--mg-pa, #0067b1); }
.mg-pdp__media { border-radius: 28px; overflow: hidden; box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11, 19, 32, .26)); background: var(--mg-surface, #f3f6fb); aspect-ratio: 4 / 3.4; }
.mg-pdp__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-pdp__media-ph { height: 100%; display: grid; place-items: center; background: linear-gradient(150deg, var(--mg-pa, #0067b1), #06243d); }
.mg-pdp__media-ph span { font-size: 30px; font-weight: 800; color: #fff; opacity: .92; padding: 0 16px; text-align: center; }
.mg-pdp__specs, .mg-pdp__body { padding: 36px 0; border-top: 1px solid var(--mg-border, #e3e9f1); }
.mg-pdp__h2 { font-size: 28px; font-weight: 800; color: var(--mg-text, #0b1320); margin: 0 0 22px; }
.mg-pdp__spectable { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; }
.mg-pdp__specrow { display: flex; justify-content: space-between; gap: 16px; padding: 14px 2px; border-bottom: 1px solid var(--mg-border, #e3e9f1); }
.mg-pdp__specrow .k { color: var(--mg-muted, #5a6b7e); font-size: 15px; }
.mg-pdp__specrow .v { color: var(--mg-text, #0b1320); font-weight: 700; text-align: left; direction: ltr; }
.mg-pdp__rich { color: var(--mg-muted, #5a6b7e); font-size: 17px; line-height: 2; max-width: 840px; }
.mg-pdp__rich h2, .mg-pdp__rich h3 { color: var(--mg-text, #0b1320); }
.mg-pdp__rich a { color: var(--mg-pa, #0067b1); }
.mg-pdp__bottom { text-align: center; background: var(--mg-surface, #f3f6fb); border-radius: 28px; padding: 54px 24px; margin: 30px 0 70px; }
.mg-pdp__bottom h2 { font-size: 30px; font-weight: 800; color: var(--mg-text, #0b1320); margin: 0 0 10px; }
.mg-pdp__bottom p { color: var(--mg-muted, #5a6b7e); margin: 0 auto 24px; max-width: 560px; }
/* Design-concept feature cards */
.mg-pdp__features { padding: 36px 0; border-top: 1px solid var(--mg-border, #e3e9f1); }
.mg-pdp__fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mg-pdp__fcard { background: var(--mg-surface, #f3f6fb); border: 1px solid var(--mg-border, #e3e9f1); border-radius: 20px; padding: 28px;
  transition: transform .4s var(--mg-ease, cubic-bezier(.23,1,.32,1)), box-shadow .4s var(--mg-ease, cubic-bezier(.23,1,.32,1)); }
.mg-pdp__fcard:hover { transform: translateY(-4px); box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11, 19, 32, .26)); }
.mg-pdp__fcard b { display: block; font-size: 19px; font-weight: 800; color: var(--mg-text, #0b1320); margin-bottom: 8px; }
.mg-pdp__fcard b::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--mg-pa, #0067b1); margin-inline-end: 10px; vertical-align: middle; }
.mg-pdp__fcard p { margin: 0; color: var(--mg-muted, #5a6b7e); line-height: 1.9; font-size: 15px; }
@media (max-width: 860px) { .mg-pdp__fgrid { grid-template-columns: 1fr; } }
/* Gallery */
.mg-pdp__gallery { padding: 36px 0; border-top: 1px solid var(--mg-border, #e3e9f1); }
.mg-pdp__ggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mg-pdp__gitem { display: block; border-radius: 18px; overflow: hidden; border: 1px solid var(--mg-border, #e3e9f1); background: var(--mg-surface, #f3f6fb); aspect-ratio: 4 / 3; }
.mg-pdp__gitem img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--mg-ease, cubic-bezier(.23,1,.32,1)); }
.mg-pdp__gitem:hover img { transform: scale(1.06); }
@media (max-width: 720px) { .mg-pdp__ggrid { grid-template-columns: repeat(2, 1fr); } }
/* Content blocks (image + text, alternating like imegagen.com) */
.mg-pdp__blocks { padding: 20px 0; }
.mg-pdp__block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: 34px 0; border-top: 1px solid var(--mg-border, #e3e9f1); }
.mg-pdp__block.is-left .mg-pdp__block-media { order: 2; }
.mg-pdp__block-media { border-radius: 22px; overflow: hidden; background: var(--mg-surface, #f3f6fb); box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, .16)); min-height: 80px; }
.mg-pdp__block-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-pdp__block-text h3 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; color: var(--mg-text, #0b1320); margin: 0 0 14px; letter-spacing: -.01em; }
.mg-pdp__block-text p { color: var(--mg-muted, #5a6b7e); font-size: 17px; line-height: 2; margin: 0; }
@media (max-width: 820px) {
  .mg-pdp__block { grid-template-columns: 1fr; gap: 20px; }
  .mg-pdp__block.is-left .mg-pdp__block-media { order: 0; }
}
/* Inline images placed inside the rich description (native editor) */
.mg-pdp__rich img, .mg-pdp__rich figure { max-width: 100%; height: auto; border-radius: 16px; }
.mg-pdp__rich figure { margin: 24px 0; }
.mg-pdp__rich figcaption { color: var(--mg-muted, #5a6b7e); font-size: 13px; text-align: center; margin-top: 8px; }
.mg-pdp__rich .aligncenter { display: block; margin-inline: auto; }
.mg-pdp__rich .alignright { float: left; margin: 6px 0 18px 24px; }
.mg-pdp__rich .alignleft { float: right; margin: 6px 24px 18px 0; }
.mg-pdp__rich .wp-block-image { margin: 24px 0; }

/* ============================================================= */
/* AnyRidge landing page (/anyridge/)                            */
/* ============================================================= */
.mg-arw { background: var(--mg-bg, #fff); }
.mg-arw-hero { position: relative; isolation: isolate; min-height: 680px; overflow: hidden; padding: 122px 24px 72px; border-block-end: 1px solid var(--mg-border, #e3e9f1); background: var(--mg-surface, #f3f6fb); }
.mg-arw-hero__media { position: absolute; z-index: 0; inset-block: 96px 34px; left: 0; width: min(44vw, 720px); border-radius: 0 28px 28px 0; background-color: #e9f0f6; background-repeat: no-repeat; background-size: cover; background-position: center; }
.mg-arw-hero__inner { position: relative; z-index: 2; display: flex; min-height: 486px; max-width: 1180px; margin: 0 auto; padding-left: 47%; flex-direction: column; justify-content: center; }
/* Hero crossfade slider */
.mg-arw-hero__media.is-slider::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18)); }
.mg-arw-hero__layer { position: absolute; inset: 0; border-radius: inherit; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s var(--mg-ease, ease); }
.mg-arw-hero__layer.is-active { opacity: 1; }
/* Gentle Ken-Burns zoom-in on the (single-image) hero */
@media (prefers-reduced-motion: no-preference) {
  .mg-arw-hero__media:not(.is-slider) { animation: mg-hero-zoom 1.6s var(--mg-ease, ease) both; transform-origin: center; }
}
@keyframes mg-hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }

/* Stats band (animated counters) */
.mg-arw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
.mg-arw-stat { background: var(--mg-surface, #f3f6fb); border: 1px solid var(--mg-border, #e3e9f1); border-radius: 18px; padding: 30px 16px; transition: transform .25s var(--mg-ease, ease), box-shadow .25s ease; }
.mg-arw-stat:hover { transform: translateY(-4px); box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.16)); }
.mg-arw-stat .mg-stat__num { font-size: clamp(32px, 4vw, 48px); font-weight: 800; line-height: 1; color: var(--mg-pa, var(--mg-accent, #0067b1)); }
.mg-arw-stat__lbl { margin-top: 10px; color: var(--mg-muted, #5a6b7e); font-size: 14px; line-height: 1.75; }
@media (max-width: 900px) { .mg-arw-stats { grid-template-columns: repeat(2, 1fr); } }

/* Steps / process timeline */
.mg-arw-steps { list-style: none; max-width: 820px; margin: 8px auto 0; padding: 0; }
.mg-arw-step { display: flex; gap: 18px; padding-bottom: 28px; position: relative; }
.mg-arw-step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 23px; top: 50px; bottom: 2px; width: 2px; background: var(--mg-border, #e3e9f1); }
.mg-arw-step__n { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--mg-pa, var(--mg-accent, #0067b1)); color: #fff; font-weight: 800; font-size: 19px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.mg-arw-step__t { padding-top: 4px; }
.mg-arw-step__t b { display: block; font-size: 18px; font-weight: 800; margin-bottom: 5px; color: var(--mg-text, #0b1320); }
.mg-arw-step__t p { margin: 0; color: var(--mg-muted, #5a6b7e); line-height: 1.95; }
.mg-arw-hero__title { max-width: 18ch; font-size: clamp(38px, 4.6vw, 60px); font-weight: 850; line-height: 1.24; color: var(--mg-text, #0b1320); letter-spacing: -.025em; margin: 22px 0 0; text-wrap: balance; word-break: keep-all; overflow-wrap: normal; }
.mg-arw-hero__title span { color: var(--mg-pa, #0067b1); }
.mg-arw-hero__lead {
  max-width: 46ch;
  margin: 18px 0 0;
  color: var(--mg-muted, #56677b);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.95;
  text-wrap: pretty;
}
.mg-arw-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.mg-arw-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s var(--mg-ease, cubic-bezier(.22,1,.36,1)), background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mg-arw-hero__btn--primary { background: var(--mg-pa, #0067b1); color: #fff; box-shadow: 0 10px 26px -12px rgba(0,60,110,.55); }
.mg-arw-hero__btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(0,60,110,.6); }
.mg-arw-hero__btn--ghost { background: rgba(255,255,255,.72); color: var(--mg-text, #0b1320); border-color: var(--mg-border, #d4dce7); }
.mg-arw-hero__btn--ghost:hover { color: var(--mg-pa, #0067b1); border-color: currentColor; transform: translateY(-2px); }
.mg-arw-hero__btn:active { transform: translateY(0) scale(.98); }
.mg-arw-hero__btn:focus-visible { outline: 3px solid rgba(0,103,177,.35); outline-offset: 3px; }
[data-theme="dark"] .mg-arw-hero__lead { color: #b6c6d4; }
[data-theme="dark"] .mg-arw-hero__btn--ghost { background: rgba(255,255,255,.07); color: #eaf2f8; border-color: rgba(255,255,255,.22); }
@media (max-width: 780px) {
  .mg-arw-hero__lead { max-width: none; font-size: 15px; line-height: 1.9; }
  .mg-arw-hero__cta { gap: 10px; margin-top: 22px; }
  .mg-arw-hero__btn { flex: 1 1 100%; }
}
.mg-arw-hero--anyone .mg-arw-hero__media,
.mg-arw-hero--anyridge .mg-arw-hero__media,
.mg-arw-hero--bluediamond .mg-arw-hero__media { background-color: #e8eff5; background-size: contain; background-position: center; }
.mg-arw-intro { padding: clamp(42px, 6vw, 72px) 24px; background: var(--mg-bg, #fff); }
.mg-arw-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: none; margin: 0 0 34px; }
.mg-arw-badge { background: rgba(255, 255, 255, .9); border: 1px solid var(--mg-border, #e3e9f1); border-radius: 18px; padding: 22px; text-align: center; box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, .16)); }
.mg-arw-badge b { display: block; color: var(--mg-text, #0b1320); font-size: 16px; margin-bottom: 8px; }
.mg-arw-badge p { margin: 0; color: var(--mg-muted, #5a6b7e); font-size: 14px; line-height: 1.8; }
.mg-arw-badge--center { background: linear-gradient(135deg, var(--mg-accent, #0067b1), #06436e); display: flex; flex-direction: column; justify-content: center; }
.mg-arw-badge--center span { font-size: 14px; color: rgba(255, 255, 255, .85); }
.mg-arw-badge--center b { color: #fff; font-size: 20px; margin: 4px 0 0; }
.mg-arw-hero__more { padding-block-start: 28px; border-block-start: 1px solid var(--mg-border, #e3e9f1); }
.mg-arw-hero__more h2 { font-size: 22px; font-weight: 800; color: var(--mg-text, #0b1320); margin: 0 0 16px; }
.mg-arw-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(28px, 5vw, 72px); max-width: 980px; }
.mg-arw-list li { break-inside: avoid; color: var(--mg-muted, #5a6b7e); font-size: 15px; line-height: 1.7; margin-bottom: 10px; padding-inline-start: 20px; position: relative; }
.mg-arw-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; width: 8px; height: 8px; border-radius: 3px; background: var(--mg-accent, #0067b1); }
@media (max-width: 900px) {
  .mg-arw-hero { min-height: 0; padding: 0 20px 52px; }
  .mg-arw-hero__media { position: relative; inset: auto; width: calc(100% + 40px); height: min(70vw, 360px); margin: 82px -20px 30px; border-radius: 0; }
  .mg-arw-hero__inner { min-height: 0; padding-left: 0; }
  .mg-arw-hero__title { max-width: 18ch; margin-top: 18px; font-size: clamp(34px, 7vw, 52px); line-height: 1.28; }
  .mg-arw-intro { padding-inline: 20px; }
  .mg-arw-badges { grid-template-columns: 1fr; }
  .mg-arw-list { columns: 1; }
}

.mg-arw-sec { padding: 64px 24px; }
.mg-arw-sec--soft { background: var(--mg-surface, #f3f6fb); }
.mg-arw-wrap { max-width: 1080px; margin: 0 auto; }
.mg-arw-eyebrow { color: var(--mg-accent, #0067b1); font-weight: 700; letter-spacing: .05em; font-size: 14px; }
.mg-arw-eyebrow--light { color: #8fe3ff; }
.mg-arw-h2 { font-size: clamp(26px, 3.6vw, 44px); font-weight: 800; color: var(--mg-text, #0b1320); letter-spacing: -.02em; margin: 8px 0 16px; }
.mg-arw-h2--light { color: #fff; }
.mg-arw-lead { color: var(--mg-muted, #5a6b7e); font-size: 18px; line-height: 2; max-width: 780px; margin: 0 0 28px; }
.mg-arw-lead--light { color: rgba(255, 255, 255, .82); }
.mg-arw-figrow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 20px; }
.mg-arw-fig { margin: 0; border-radius: 18px; overflow: hidden; background: var(--mg-surface, #f3f6fb); border: 1px solid var(--mg-border, #e3e9f1); }
.mg-arw-fig img { display: block; width: 100%; height: auto; }
.mg-arw-fig--wide { grid-column: 1 / -1; }
.mg-arw-fig figcaption { padding: 12px 16px; color: var(--mg-muted, #5a6b7e); font-size: 13px; line-height: 1.7; background: #fff; }
.mg-arw-ref { color: var(--mg-muted, #5a6b7e); font-size: 14px; line-height: 1.8; direction: ltr; text-align: left; margin-top: 18px; border-top: 1px solid var(--mg-border, #e3e9f1); padding-top: 14px; }
@media (max-width: 720px) { .mg-arw-figrow { grid-template-columns: 1fr; } }

.mg-arw__ph { display: grid; place-items: center; min-height: 200px; background: linear-gradient(135deg, #eef3f9, #dde7f1); color: #6b7886; font-size: 14px; text-align: center; padding: 20px; }
.mg-arw__ph--dark { background: linear-gradient(135deg, #0b2238, #06121f); color: rgba(255, 255, 255, .6); min-height: 340px; }

.mg-arw-xpeed { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: #06121f; color: #fff; }
.mg-arw-xpeed__media { min-height: 340px; }
.mg-arw-xpeed__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-arw-xpeed__text { padding: clamp(40px, 5vw, 80px); display: flex; flex-direction: column; justify-content: center; }
.mg-arw-stat { font-size: 22px; margin: 18px 0; color: rgba(255, 255, 255, .9); } .mg-arw-stat b { color: #8fe3ff; }
.mg-arw-formula { display: flex; flex-direction: column; gap: 8px; }
.mg-arw-formula code { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; padding: 10px 14px; font-size: 14px; color: #dbe9f5; }
@media (max-width: 820px) { .mg-arw-xpeed { grid-template-columns: 1fr; } }

.mg-arw-trophy { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; max-width: 1080px; margin: 0 auto; padding: 64px 24px; }
.mg-arw-trophy__fig { border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, #2a1608, #120a04); }
.mg-arw-trophy__fig img { width: 100%; height: auto; display: block; }
.mg-arw-trophy__text h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; color: var(--mg-text, #0b1320); margin: 0 0 12px; }
.mg-arw-trophy__text p { color: var(--mg-muted, #5a6b7e); font-size: 18px; margin: 0 0 24px; }
@media (max-width: 900px) { .mg-arw-trophy { grid-template-columns: 1fr; } }

.mg-arw-closing { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; max-width: 1080px; margin: 0 auto; }
.mg-arw-closing__fig { text-align: center; }
.mg-arw-closing__fig img { max-width: 100%; height: auto; }
.mg-arw-closing__text p { color: var(--mg-muted, #5a6b7e); font-size: 17px; line-height: 2; margin: 0 0 14px; }
@media (max-width: 900px) { .mg-arw-closing { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .mg-pdp__hero { grid-template-columns: 1fr; gap: 30px; }
  .mg-pdp__media { order: -1; aspect-ratio: 16 / 11; }
}
@media (max-width: 720px) { .mg-pdp__spectable { grid-template-columns: 1fr; } }

/* Archive grid */
.mg-parch { max-width: 1180px; margin: 0 auto; padding: 132px 24px 70px; }
.mg-parch__head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.mg-parch__eyebrow { color: var(--mg-accent, #0067b1); font-weight: 700; letter-spacing: .04em; }
.mg-parch__title { font-size: clamp(30px, 5vw, 52px); font-weight: 800; color: var(--mg-text, #0b1320); margin: 8px 0 12px; letter-spacing: -.02em; }
.mg-parch__lead { color: var(--mg-muted, #5a6b7e); font-size: 18px; line-height: 1.9; }
.mg-parch__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mg-parch__empty { grid-column: 1 / -1; text-align: center; color: var(--mg-muted, #5a6b7e); padding: 40px; }
.mg-pcard { background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 22px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  transition: transform .3s var(--mg-ease, cubic-bezier(.23,1,.32,1)), box-shadow .3s var(--mg-ease, cubic-bezier(.23,1,.32,1)); }
.mg-pcard:hover { transform: translateY(-5px); box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11, 19, 32, .26)); border-color: var(--mg-pa, #0067b1); }
.mg-pcard__media { aspect-ratio: 4 / 3; background: var(--mg-surface, #f3f6fb); overflow: hidden; }
.mg-pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-pcard__ph { height: 100%; display: grid; place-items: center; background: linear-gradient(150deg, var(--mg-pa, #0067b1), #06243d); color: #fff; font-weight: 800; font-size: 22px; padding: 0 16px; text-align: center; }
.mg-pcard__body { padding: 22px; }
.mg-pcard__eyebrow { color: var(--mg-pa, #0067b1); font-weight: 700; font-size: 13px; margin: 0 0 4px; }
.mg-pcard__title { color: var(--mg-text, #0b1320); font-size: 21px; font-weight: 800; margin: 0 0 8px; }
.mg-pcard__intro { color: var(--mg-muted, #5a6b7e); font-size: 15px; line-height: 1.8; margin: 0 0 14px; }
.mg-pcard__link { color: var(--mg-pa, #0067b1); font-weight: 700; font-size: 14px; }
@media (max-width: 960px) { .mg-parch__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mg-parch__grid { grid-template-columns: 1fr; } }

/* ---------- Press feedback: pressable elements respond to touch ---------- */
.elementor-button:active,
.mg-nav__cta:active,
.mg-menu-btn:active,
.mg-hero__btn:active,
.mg-hero__explore:active,
.mg-stack__cta:active,
.mg-overlay__close:active,
.wpcf7-submit:active { transform: scale(0.97); }
.wpcf7-submit { transition: transform .16s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)), background-color .3s ease, box-shadow .3s ease; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mg-cursor, .mg-cursor-ring { display: none !important; }
  .mg-marquee__track { animation: none; }
  .elementor-button:hover { transform: none; }
}

/* ---------- Catalog / PDF library (/catalog/) ---------- */
.mg-cat { display: block; }
.mg-cat-hero { padding: 130px 0 30px; }
.mg-cat-title { font-size: clamp(34px, 5vw, 60px); font-weight: 800; letter-spacing: -.02em; margin: 6px 0 10px; color: var(--mg-text, #0b1320); }
.mg-cat-tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }
.mg-cat-search {
  flex: 1 1 320px; max-width: 460px; height: 52px; padding: 0 20px;
  border: 1px solid var(--mg-border, #e3e9f1); border-radius: 999px;
  background: #fff; font-size: 16px; font-family: inherit; color: var(--mg-text, #0b1320);
  box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.16));
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mg-cat-search:focus { outline: none; border-color: var(--mg-accent, #0067b1); box-shadow: 0 0 0 4px rgba(0,103,177,.12); }
.mg-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-cat-chip {
  border: 1px solid var(--mg-border, #e3e9f1); background: #fff; color: var(--mg-muted, #5a6b7e);
  border-radius: 999px; padding: 9px 18px; font: 600 14px/1 inherit; cursor: pointer;
  transition: all .2s ease;
}
.mg-cat-chip:hover { border-color: var(--mg-accent, #0067b1); color: var(--mg-accent, #0067b1); }
.mg-cat-chip.is-active { background: var(--mg-accent, #0067b1); border-color: var(--mg-accent, #0067b1); color: #fff; }
.mg-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mg-cat-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--mg-border, #e3e9f1); border-radius: 18px; overflow: hidden;
  transition: transform .25s var(--mg-ease, ease), box-shadow .25s ease, border-color .2s ease;
}
.mg-cat-card:hover { transform: translateY(-4px); border-color: var(--mg-accent, #0067b1); box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11,19,32,.26)); }
.mg-cat-card__thumb {
  aspect-ratio: 16 / 10; background: linear-gradient(135deg, #eef4fb, #dceaf7);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mg-cat-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-cat-card__pdf { width: 64px; height: 64px; color: var(--mg-accent, #0067b1); }
.mg-cat-card__pdf svg { width: 100%; height: 100%; display: block; }
.mg-cat-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mg-cat-card__cat { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--mg-accent, #0067b1); background: rgba(0,103,177,.08); border-radius: 999px; padding: 4px 12px; }
.mg-cat-card__body :is(h2,h3) { margin: 2px 0 0; font-size: 19px; font-weight: 800; color: var(--mg-text, #0b1320); }
.mg-cat-card__body p { margin: 0; color: var(--mg-muted, #5a6b7e); font-size: 14.5px; line-height: 1.85; flex: 1; }
.mg-cat-card__dl {
  margin-top: 8px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: var(--mg-accent, #0067b1); color: #fff; text-decoration: none;
  border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: 14.5px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mg-cat-card__dl:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,103,177,.3); }
.mg-cat-card__dl svg { width: 18px; height: 18px; display: block; }
.mg-cat-card__soon { margin-top: 8px; align-self: flex-start; color: var(--mg-muted, #5a6b7e); font-size: 13px; border: 1px dashed var(--mg-border, #e3e9f1); border-radius: 999px; padding: 9px 18px; }
.mg-cat-empty { text-align: center; color: var(--mg-muted, #5a6b7e); font-size: 17px; padding: 30px 0; }
@media (max-width: 900px) { .mg-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mg-cat-grid { grid-template-columns: 1fr; } .mg-cat-hero { padding-top: 110px; } }

/* ---------- Contact page (/contact-us/) ---------- */
.mg-contact-grid { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 28px; align-items: start; }
.mg-contact-info { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 18px; padding: 24px; }
.mg-contact-row { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--mg-text, #0b1320); padding: 8px; border-radius: 12px; transition: background-color .2s ease; }
a.mg-contact-row:hover { background: var(--mg-surface, #f3f6fb); }
.mg-contact-ic { flex: none; width: 46px; height: 46px; line-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(0,103,177,.1); color: var(--mg-accent, #0067b1); }
.mg-contact-ic svg { width: 22px; height: 22px; display: block; }
.mg-contact-row__t { display: flex; flex-direction: column; gap: 2px; }
.mg-contact-row__t b { font-size: 13px; color: var(--mg-muted, #5a6b7e); font-weight: 700; }
.mg-contact-row__t i { font-style: normal; font-size: 16px; font-weight: 700; }
.mg-contact-soc { margin-top: 6px; }
.mg-contact-soc a { width: 42px; height: 42px; border-radius: 50%; line-height: 0; display: flex; align-items: center; justify-content: center; background: var(--mg-surface, #f3f6fb); border: 1px solid var(--mg-border, #e3e9f1); color: var(--mg-text, #0b1320); transition: all .2s ease; }
.mg-contact-soc a:hover { background: var(--mg-accent, #0067b1); color: #fff; }
.mg-contact-soc svg { width: 19px; height: 19px; display: block; }
.mg-contact-formwrap { background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 18px; padding: 28px; box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.16)); }
.mg-contact-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mg-contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--mg-text, #0b1320); margin-bottom: 14px; }
.mg-contact-form label span { color: #d23; }
.mg-contact-form input, .mg-contact-form select, .mg-contact-form textarea {
  font-family: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--mg-border, #e3e9f1);
  border-radius: 12px; background: var(--mg-surface, #f8fafc); color: var(--mg-text, #0b1320); width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease; box-sizing: border-box;
}
.mg-contact-form input:focus, .mg-contact-form select:focus, .mg-contact-form textarea:focus { outline: none; border-color: var(--mg-accent, #0067b1); box-shadow: 0 0 0 4px rgba(0,103,177,.1); background: #fff; }
.mg-contact-form textarea { resize: vertical; min-height: 110px; }
.mg-contact-submit {
  margin-top: 6px; background: var(--mg-accent, #0067b1); color: #fff; border: 0; cursor: pointer;
  border-radius: 999px; padding: 15px 38px; font: 700 16px/1 inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mg-contact-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,103,177,.32); }
.mg-contact-alert { border-radius: 14px; padding: 14px 18px; margin-bottom: 18px; font-weight: 700; }
.mg-contact-alert.is-ok { background: #e7f6ec; color: #16794a; border: 1px solid #b8e6c8; }
.mg-contact-alert.is-err { background: #fdecec; color: #b3261e; border: 1px solid #f4c4c1; }
.mg-hp {
  position: absolute !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.mg-contact-map { margin-top: 26px; border-radius: 18px; overflow: hidden; border: 1px solid var(--mg-border, #e3e9f1); }
.mg-contact-map iframe { display: block; }
@media (max-width: 820px) { .mg-contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .mg-contact-form__grid { grid-template-columns: 1fr; } }

/* ---------- Product header slider ---------- */
.mg-pdp-slider { position: relative; }
.mg-pdp-slider__track { position: absolute; inset: 0; }
.mg-pdp-slider__slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--mg-ease, ease), transform 6s linear; }
.mg-pdp-slider__slide.is-active { opacity: 1; transform: scale(1); }
.mg-pdp-slider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-pdp-slider__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.86); color: #0b1320; cursor: pointer; line-height: 0;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(11,19,32,.22);
  z-index: 3; transition: background-color .2s ease, transform .2s ease; opacity: 0;
}
.mg-pdp-slider:hover .mg-pdp-slider__nav { opacity: 1; }
.mg-pdp-slider__nav:hover { background: #fff; }
.mg-pdp-slider__nav svg { width: 22px; height: 22px; display: block; }
.mg-pdp-slider__nav.prev { left: 14px; }
.mg-pdp-slider__nav.next { right: 14px; }
.mg-pdp-slider__dots { position: absolute; inset-block-end: 14px; inset-inline: 0; display: flex; gap: 8px; justify-content: center; z-index: 3; }
.mg-pdp-slider__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; transition: all .25s ease; }
.mg-pdp-slider__dot.is-active { background: #fff; width: 26px; border-radius: 6px; }
@media (hover: none) { .mg-pdp-slider__nav { opacity: 1; } }

/* ---------- Breadcrumbs ---------- */
.mg-crumbs { position: relative; z-index: 3; margin-bottom: 16px; }
.mg-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.mg-crumbs li { color: var(--mg-muted, #5a6b7e); display: inline-flex; align-items: center; gap: 8px; }
.mg-crumbs li:not(:last-child)::after { content: "›"; color: var(--mg-muted, #5a6b7e); opacity: .55; }
.mg-crumbs a { display: inline-flex; min-height: 44px; align-items: center; color: var(--mg-muted, #5a6b7e); text-decoration: none; transition: color .2s ease; }
.mg-crumbs a:hover { color: var(--mg-accent, #0067b1); }
.mg-crumbs li[aria-current] { color: var(--mg-text, #0b1320); font-weight: 700; }

/* ---------- Back-to-top button ---------- */
.mg-totop {
  position: fixed; inset-block-end: 24px; inset-inline-start: 24px; z-index: 9000;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--mg-border, #e3e9f1);
  background: #fff; color: var(--mg-text, #0b1320); cursor: pointer; line-height: 0;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.16));
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, background-color .2s ease, color .2s ease;
}
.mg-totop.is-on { opacity: 1; visibility: visible; transform: none; }
.mg-totop:hover { background: var(--mg-accent, #0067b1); color: #fff; border-color: var(--mg-accent, #0067b1); }
.mg-totop svg { width: 22px; height: 22px; display: block; }

/* ---------- Floating quick-contact button (FAB) ---------- */
.mg-fab { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 9000; width: 58px; height: 58px; }
.mg-fab__toggle {
  position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; line-height: 0;
  background: var(--mg-accent, #0067b1); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(0,103,177,.42); transition: transform .25s var(--mg-ease, ease), background-color .2s ease;
}
.mg-fab__toggle:hover { transform: scale(1.06); }
.mg-fab__toggle svg { width: 26px; height: 26px; display: block; position: absolute; transition: opacity .2s ease, transform .3s ease; }
.mg-fab__close { opacity: 0; transform: rotate(-90deg); }
.mg-fab.is-open .mg-fab__open { opacity: 0; transform: rotate(90deg); }
.mg-fab.is-open .mg-fab__close { opacity: 1; transform: rotate(0); }
.mg-fab.is-open .mg-fab__toggle { background: #0b1320; }
.mg-fab__menu { position: absolute; inset-block-end: 70px; inset-inline-end: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.mg-fab__item {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--mg-text, #0b1320);
  background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 999px; padding: 8px 8px 8px 16px;
  box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.16)); font-weight: 700; font-size: 14px;
  opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none; transition: opacity .25s ease, transform .25s var(--mg-ease, ease);
}
.mg-fab.is-open .mg-fab__item { opacity: 1; transform: none; pointer-events: auto; }
.mg-fab.is-open .mg-fab__item:nth-child(2) { transition-delay: .04s; }
.mg-fab.is-open .mg-fab__item:nth-child(3) { transition-delay: .08s; }
.mg-fab__ic { width: 38px; height: 38px; flex: none; border-radius: 50%; line-height: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.mg-fab__ic svg { width: 20px; height: 20px; display: block; }
.mg-fab__item--wa .mg-fab__ic { background: #25d366; }
.mg-fab__item--tel .mg-fab__ic { background: var(--mg-accent, #0067b1); }
.mg-fab__item--ig .mg-fab__ic { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
@media (max-width: 560px) { .mg-fab, .mg-totop { inset-block-end: 16px; } .mg-fab { inset-inline-end: 16px; } .mg-totop { inset-inline-start: 16px; } }

/* ---------- FAQ accordion ---------- */
.mg-faq { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.mg-faq__item { background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 16px; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.mg-faq__item.is-open { border-color: var(--mg-accent, #0067b1); box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.16)); }
.mg-faq__q {
  width: 100%; text-align: start; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 22px; font: 700 17px/1.6 inherit; color: var(--mg-text, #0b1320);
}
.mg-faq__chev { flex: none; width: 30px; height: 30px; border-radius: 50%; line-height: 0; display: flex; align-items: center; justify-content: center; background: var(--mg-surface, #f3f6fb); color: var(--mg-accent, #0067b1); transition: transform .3s var(--mg-ease, ease), background-color .2s ease; }
.mg-faq__chev svg { width: 18px; height: 18px; display: block; }
.mg-faq__item.is-open .mg-faq__chev { transform: rotate(180deg); background: var(--mg-accent, #0067b1); color: #fff; }
.mg-faq__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--mg-ease, ease); }
.mg-faq__a p { margin: 0; padding: 0 22px 22px; color: var(--mg-muted, #5a6b7e); font-size: 15.5px; line-height: 2; }

/* ---------- Related products ---------- */
.mg-related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mg-related__card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 16px; padding: 22px;
  color: var(--mg-text, #0b1320); transition: transform .25s var(--mg-ease, ease), box-shadow .25s ease, border-color .2s ease;
}
.mg-related__card:hover { transform: translateY(-4px); border-color: var(--mg-accent, #0067b1); box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11,19,32,.26)); }
.mg-related__card b { font-size: 19px; font-weight: 800; }
.mg-related__card p { margin: 0; font-size: 14px; color: var(--mg-muted, #5a6b7e); line-height: 1.8; flex: 1; }
.mg-related__go { display: inline-flex; align-items: center; gap: 6px; color: var(--mg-accent, #0067b1); font-weight: 700; font-size: 14px; }
.mg-related__go svg { width: 17px; height: 17px; display: block; }
@media (max-width: 900px) { .mg-related { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mg-related { grid-template-columns: 1fr; } }

/* ---------- Product text polish ---------- */
.mg-pdp__h2 { position: relative; padding-bottom: 14px; }
.mg-pdp__h2::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 54px; height: 4px; border-radius: 999px; background: var(--mg-pa, #0067b1); background: linear-gradient(90deg, var(--mg-pa, #0067b1), color-mix(in srgb, var(--mg-pa, #0067b1) 40%, #ffffff)); }
.mg-pdp__block-media img { transition: transform .5s var(--mg-ease, ease); }
.mg-pdp__block:hover .mg-pdp__block-media img { transform: scale(1.04); }
.mg-pdp__intro { font-size: 18px; }
.mg-pdp__gitem { overflow: hidden; border-radius: 16px; }
.mg-pdp__gitem img { transition: transform .5s var(--mg-ease, ease); }
.mg-pdp__gitem:hover img { transform: scale(1.06); }

/* ---------- Newsletter band ---------- */
.mg-news { padding: 18px 24px 0; }
.mg-news__inner { max-width: 1180px; margin: 0 auto; background: linear-gradient(120deg, var(--mg-accent, #0067b1), #0a2e57); color: #fff; border-radius: 22px; padding: 34px 36px; display: grid; grid-template-columns: minmax(230px,.72fr) minmax(0,1.55fr); align-items: center; gap: 28px 38px; box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11,19,32,.26)); }
.mg-news__txt { min-width: 0; }
.mg-news__txt h2 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; }
.mg-news__txt p { margin: 0; color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.9; }
.mg-news__form { display: grid; grid-template-columns: minmax(150px,1.05fr) minmax(145px,.9fr) minmax(180px,1.15fr) auto; align-items: end; gap: 10px 12px; min-width: 0; }
.mg-news__form > label:not(.mg-news__consent) { display: grid; min-width: 0; gap: 6px; color: rgba(255,255,255,.92); font-size: 12px; font-weight: 700; }
.mg-news__form input[type=text], .mg-news__form input[type=tel], .mg-news__form input[type=email] { width: 100%; min-width: 0; height: 52px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.32); border-radius: 11px; padding: 0 15px; font: inherit; font-size: 14px; background: rgba(255,255,255,.96); color: #0b1320; }
.mg-news__form input::placeholder { color: #657384; opacity: 1; }
.mg-news__form input:focus-visible { outline: 3px solid rgba(255,255,255,.4); outline-offset: 2px; border-color: #fff; }
.mg-news__form button { min-width: 112px; height: 52px; padding: 0 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: #0b1320; color: #fff; font: 700 15px/1 inherit; cursor: pointer; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.mg-news__consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 9px; color: rgba(255,255,255,.86); font-size: 12px; line-height: 1.75; cursor: pointer; }
.mg-news__consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #fff; }
.mg-news__ok, .mg-news__err { min-width: 0; margin: 0; font-weight: 700; background: rgba(255,255,255,.15); border-radius: 12px; padding: 14px 18px; }
.mg-news__err { background: rgba(255,80,80,.2); }
@media (hover:hover) and (pointer:fine) { .mg-news__form button:hover { transform: translateY(-2px); background: #fff; color: var(--mg-accent, #0067b1); } }
@media (max-width: 960px) { .mg-news__inner { grid-template-columns: 1fr; } .mg-news__form { grid-template-columns: repeat(2,minmax(0,1fr)); } .mg-news__form button { width: 100%; } }
@media (max-width: 620px) { .mg-news { padding-inline: 14px; } .mg-news__inner { padding: 28px 20px; gap: 22px; border-radius: 16px; } .mg-news__form { grid-template-columns: 1fr; } .mg-news__consent { grid-column: 1; } }

/* ---------- Article share + related ---------- */
.mg-post__source { max-width: 1180px; margin: 14px 0 0; color: var(--mg-muted, #5a6b7e); font-size: 14px; }
.mg-post__pdf { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; background: #d23b2e; color: #fff; text-decoration: none; border-radius: 999px; padding: 12px 24px; font-weight: 700; font-size: 15px; transition: transform .2s ease, box-shadow .2s ease; }
.mg-post__pdf:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(210,59,46,.32); }
.mg-post__pdf svg { width: 19px; height: 19px; display: block; }
.mg-post__share { max-width: 760px; margin: 30px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-top: 1px solid var(--mg-border, #e3e9f1); padding-top: 24px; }
.mg-post__share-lbl { font-weight: 700; color: var(--mg-muted, #5a6b7e); font-size: 14px; }
.mg-post__share-btn { background: var(--mg-surface, #f3f6fb); border: 1px solid var(--mg-border, #e3e9f1); border-radius: 999px; padding: 9px 18px; font: 700 13.5px/1 inherit; color: var(--mg-text, #0b1320); text-decoration: none; cursor: pointer; transition: all .2s ease; }
.mg-post__share-btn:hover { background: var(--mg-accent, #0067b1); color: #fff; border-color: var(--mg-accent, #0067b1); }
.mg-post__related { padding: 20px 24px 0; }
.mg-post__related .mg-arw-wrap { max-width: 1100px; }

/* ---------- Site search ---------- */
.mg-search-list { display: flex; flex-direction: column; gap: 14px; }
.mg-search-item { display: block; background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 16px; padding: 22px 24px; text-decoration: none; color: var(--mg-text, #0b1320); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.mg-search-item:hover { transform: translateY(-2px); border-color: var(--mg-accent, #0067b1); box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.16)); }
.mg-search-item__kind { display: inline-block; font-size: 12px; font-weight: 700; color: var(--mg-accent, #0067b1); background: rgba(0,103,177,.08); border-radius: 999px; padding: 4px 12px; margin-bottom: 8px; }
.mg-search-item :is(h2, h3) { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.mg-search-item p { margin: 0; color: var(--mg-muted, #5a6b7e); font-size: 14.5px; line-height: 1.85; }

/* ---------- Mega-menu search box ---------- */
.mg-overlay__search { position: absolute; inset-block-start: 28px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 8px; width: min(520px, 70vw); background: rgba(255,255,255,.7); border: 1px solid var(--mg-border, #e3e9f1); border-radius: 999px; padding: 6px 6px 6px 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mg-overlay__search svg { width: 20px; height: 20px; flex: none; color: var(--mg-muted, #5a6b7e); }
.mg-overlay__search input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--mg-text, #0b1320); }
.mg-overlay__search input:focus { outline: none; }
.mg-overlay__search button { flex: none; border: 0; cursor: pointer; background: var(--mg-accent, #0067b1); color: #fff; border-radius: 999px; padding: 10px 20px; font: 700 14px/1 inherit; }
@media (max-width: 760px) { .mg-overlay__search { inset-block-start: 80px; width: calc(100% - 40px); } }
[data-theme="dark"] body.mg-pdp-body .mg-search-item { background: var(--mg-surface); }
[data-theme="dark"] body.mg-pdp-body .mg-overlay__search { background: rgba(19,29,44,.7); }

/* ---------- Blog / articles listing ---------- */
.mg-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mg-blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 18px; overflow: hidden; transition: transform .25s var(--mg-ease, ease), box-shadow .25s ease, border-color .2s ease; }
.mg-blog-card:hover { transform: translateY(-5px); border-color: var(--mg-accent, #0067b1); box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11,19,32,.26)); }
.mg-blog-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #eef4fb, #dceaf7); }
.mg-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--mg-ease, ease); }
.mg-blog-card:hover .mg-blog-card__media img { transform: scale(1.05); }
.mg-blog-card__ph { display: flex; align-items: center; justify-content: center; height: 100%; font-weight: 800; letter-spacing: .12em; color: var(--mg-accent, #0067b1); opacity: .5; }
.mg-blog-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.mg-blog-card__meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--mg-muted, #5a6b7e); }
.mg-blog-card__cat { font-weight: 700; color: var(--mg-accent, #0067b1); background: rgba(0,103,177,.08); border-radius: 999px; padding: 4px 12px; }
.mg-blog-card__body h3 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.5; }
.mg-blog-card__body h3 a { color: var(--mg-text, #0b1320); text-decoration: none; transition: color .2s ease; }
.mg-blog-card__body h3 a:hover { color: var(--mg-accent, #0067b1); }
.mg-blog-card__body p { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--mg-muted, #5a6b7e); flex: 1; }
.mg-blog-card__more { display: inline-flex; align-items: center; gap: 7px; color: var(--mg-accent, #0067b1); font-weight: 700; font-size: 14px; text-decoration: none; }
.mg-blog-card__more svg { width: 17px; height: 17px; display: block; }

/* ---------- Scientific articles hub (/articles/) ---------- */
.mg-arthub__tools { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.mg-arthub__search { position: relative; display: flex; align-items: center; max-width: 560px; }
.mg-arthub__search svg { position: absolute; inset-inline-start: 18px; width: 20px; height: 20px; color: var(--mg-muted, #5a6b7e); pointer-events: none; }
.mg-arthub__search input {
  width: 100%; height: 56px; padding-inline: 50px 20px; border-radius: 999px;
  border: 1px solid var(--mg-border, #e3e9f1); background: var(--mg-bg, #fff); color: var(--mg-text, #0b1320);
  font: 16px/1 inherit; box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.16)); transition: border-color .2s ease, box-shadow .2s ease;
}
.mg-arthub__search input:focus { outline: none; border-color: var(--mg-accent, #0067b1); box-shadow: 0 0 0 4px rgba(0,103,177,.12); }
.mg-arthub__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-arthub__chip { border: 1px solid var(--mg-border, #e3e9f1); background: var(--mg-bg, #fff); color: var(--mg-muted, #5a6b7e); border-radius: 999px; padding: 9px 18px; font: 600 14px/1 inherit; cursor: pointer; transition: all .2s ease; }
.mg-arthub__chip:hover { border-color: var(--mg-accent, #0067b1); color: var(--mg-accent, #0067b1); }
.mg-arthub__chip.is-active { background: var(--mg-accent, #0067b1); border-color: var(--mg-accent, #0067b1); color: #fff; }
.mg-arthub__featured { margin-bottom: 26px; }
.mg-blog-card__pdf { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; background: #d23b2e; color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .06em; padding: 5px 10px; border-radius: 8px; }
.mg-blog-card__media { position: relative; }
.mg-blog-card__src { font-size: 12.5px; color: var(--mg-muted, #5a6b7e); margin: 0; opacity: .9; }
.mg-blog-card__act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.mg-blog-card__dl { display: inline-flex; align-items: center; gap: 7px; color: #d23b2e; font-weight: 700; font-size: 13.5px; text-decoration: none; border: 1px solid currentColor; border-radius: 999px; padding: 6px 14px; transition: background-color .2s ease, color .2s ease; }
.mg-blog-card__dl:hover { background: #d23b2e; color: #fff; }
.mg-blog-card__dl svg { width: 16px; height: 16px; display: block; }
/* Featured = horizontal on wide screens */
@media (min-width: 760px) {
  .mg-blog-card--big { flex-direction: row; }
  .mg-blog-card--big .mg-blog-card__media { flex: 0 0 46%; aspect-ratio: auto; }
  .mg-blog-card--big .mg-blog-card__media img { height: 100%; }
  .mg-blog-card--big .mg-blog-card__body { padding: 32px 34px; justify-content: center; }
  .mg-blog-card--big .mg-blog-card__body h3 { font-size: 27px; }
}
/* Dark mode for the hub controls */
[data-theme="dark"] .mg-arthub__search input,
[data-theme="dark"] .mg-arthub__chip { background: var(--mg-surface); color: var(--mg-text); }
[data-theme="dark"] .mg-arthub__chip.is-active { background: var(--mg-accent); color: #fff; }
.mg-blog-pager { margin-top: 40px; }
.mg-blog-pager ul { list-style: none; display: flex; gap: 8px; justify-content: center; padding: 0; margin: 0; flex-wrap: wrap; }
.mg-blog-pager a, .mg-blog-pager span { display: inline-flex; min-width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--mg-border, #e3e9f1); background: #fff; color: var(--mg-text, #0b1320); text-decoration: none; font-weight: 700; padding: 0 12px; }
.mg-blog-pager .current { background: var(--mg-accent, #0067b1); color: #fff; border-color: var(--mg-accent, #0067b1); }
.mg-blog-pager a:hover { border-color: var(--mg-accent, #0067b1); color: var(--mg-accent, #0067b1); }
@media (max-width: 900px) { .mg-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mg-blog-grid { grid-template-columns: 1fr; } }

/* ---------- Single post ---------- */
.mg-post__head { padding: 122px 24px 8px; }
.mg-post__meta { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--mg-muted, #5a6b7e); margin-bottom: 14px; }
.mg-post__cat { font-weight: 700; color: var(--mg-accent, #0067b1); background: rgba(0,103,177,.08); border-radius: 999px; padding: 5px 14px; }
.mg-post__title { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--mg-text, #0b1320); margin: 0; max-width: 1180px; }
.mg-post__head .mg-arw-wrap { max-width: 860px; margin: 0 auto; }
.mg-post__hero {
	display: flex;
	width: min(1040px, calc(100% - 48px));
	max-height: 580px;
	aspect-ratio: 16 / 9;
	align-items: center;
	justify-content: center;
	margin: 30px auto 0;
	overflow: hidden;
	border: 1px solid var(--mg-border, #e3e9f1);
	border-radius: 16px;
	background: var(--mg-surface, #f3f6fb);
}
.mg-post__hero img { display: block; width: 100%; height: 100% !important; max-height: 580px; border: 0; border-radius: 0; object-fit: contain; box-shadow: none; }
.mg-post__body { padding: 40px 24px 70px; }
.mg-post__content { max-width: 760px; margin: 0 auto; font-size: 17.5px; line-height: 2.1; color: #243244; }
.mg-post__content > * { margin: 0 0 1.2em; }
.mg-post__content h2 { font-size: 28px; font-weight: 800; color: var(--mg-text, #0b1320); margin: 1.6em 0 .6em; }
.mg-post__content h3 { font-size: 22px; font-weight: 800; color: var(--mg-text, #0b1320); margin: 1.4em 0 .5em; }
.mg-post__content a { color: var(--mg-accent, #0067b1); text-decoration: underline; }
.mg-post__content img { max-width: 100%; height: auto; border-radius: 16px; }
.mg-post__content blockquote { border-inline-start: 4px solid var(--mg-accent, #0067b1); background: var(--mg-surface, #f3f6fb); margin: 1.4em 0; padding: 16px 22px; border-radius: 12px; color: var(--mg-text, #0b1320); }
.mg-post__content ul, .mg-post__content ol { padding-inline-start: 1.3em; }
.mg-post__content li { margin: .4em 0; }
.mg-post__tags { max-width: 760px; margin: 26px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mg-post__tags a { font-size: 13px; background: var(--mg-surface, #f3f6fb); border: 1px solid var(--mg-border, #e3e9f1); border-radius: 999px; padding: 6px 14px; color: var(--mg-muted, #5a6b7e); text-decoration: none; }
.mg-post__tags a:hover { color: var(--mg-accent, #0067b1); border-color: var(--mg-accent, #0067b1); }
.mg-post__cta { max-width: 760px; margin: 36px auto 0; display: flex; gap: 12px; flex-wrap: wrap; }
[data-theme="dark"] body.mg-pdp-body .mg-blog-card { background: var(--mg-surface); }
[data-theme="dark"] body.mg-pdp-body .mg-blog-pager a, [data-theme="dark"] body.mg-pdp-body .mg-blog-pager span { background: var(--mg-surface); }
[data-theme="dark"] body.mg-post-body .mg-post__content { color: #c4d2e2; }
[data-theme="dark"] body.mg-post-body .mg-post__hero { background: #061a27; }

@media (max-width: 600px) {
	.mg-post__hero { width: calc(100% - 32px); max-height: 420px; aspect-ratio: 4 / 3; margin-top: 24px; border-radius: 12px; }
	.mg-post__hero img { max-height: 420px; }
}

/* Cookie consent banner: see consent.css. */

/* ---------- Language switcher ---------- */
.mg-langsw { display: inline-flex; gap: 2px; background: var(--mg-surface, #f3f6fb); border: 1px solid var(--mg-border, #e3e9f1); border-radius: 999px; padding: 3px; }
.mg-langsw__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 30px; padding: 0 9px; border-radius: 999px; font-weight: 800; font-size: 12.5px; color: var(--mg-muted, #5a6b7e); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.mg-langsw__btn:hover { color: var(--mg-accent, #0067b1); }
.mg-langsw__btn.is-active { background: var(--mg-accent, #0067b1); color: #fff; }
[data-theme="dark"] body.mg-pdp-body .mg-langsw { background: rgba(255,255,255,.06); }
@media (max-width: 520px) { .mg-langsw { display: none; } }

/* ---------- Theme toggle button ---------- */
.mg-theme-toggle { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--mg-border, #e3e9f1); background: rgba(255,255,255,.55); color: var(--mg-text, #0b1320); cursor: pointer; line-height: 0; display: flex; align-items: center; justify-content: center; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.mg-theme-toggle:hover { border-color: var(--mg-accent, #0067b1); color: var(--mg-accent, #0067b1); }
.mg-nav__acct { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--mg-border, #e3e9f1); background: rgba(255,255,255,.55); color: var(--mg-text, #0b1320); display: flex; align-items: center; justify-content: center; flex: none; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.mg-nav__acct:hover { border-color: var(--mg-accent, #0067b1); color: var(--mg-accent, #0067b1); }
.mg-nav__acct svg { width: 19px; height: 19px; display: block; }
[data-theme="dark"] .mg-nav__acct, [data-theme="dark"] .mg-nav__phone { background: rgba(255,255,255,.07); color: var(--mg-text); }
/* Only the articles hub has a dark nav — its icon goes white. The account/order
   pages have a LIGHT nav, so they keep the default dark icon (else it vanishes). */
.mg-blog-body .mg-nav__acct, .mg-blog-body .mg-nav__phone { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.16); }
.mg-account-body .mg-nav__acct { color: var(--mg-text, #0b1320); }
.mg-theme-toggle svg { width: 19px; height: 19px; display: block; position: absolute; transition: opacity .25s ease, transform .35s var(--mg-ease, ease); }
.mg-theme-sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
.mg-theme-moon { opacity: 1; transform: none; }
[data-theme="dark"] .mg-theme-sun { opacity: 1; transform: none; }
[data-theme="dark"] .mg-theme-moon { opacity: 0; transform: rotate(90deg) scale(.5); }

/* ---------- Trust / certification strip ---------- */
.mg-trust { padding: 30px 24px; border-bottom: 1px solid var(--mg-border, #e3e9f1); }
.mg-trust__title { display: block; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--mg-muted, #5a6b7e); margin-bottom: 16px; }
.mg-trust__row { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; justify-content: center; }
.mg-trust__item { display: inline-flex; align-items: center; justify-content: center; }
.mg-trust__item img { height: 40px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .2s ease, opacity .2s ease; }
.mg-trust__item img:hover { filter: none; opacity: 1; }
.mg-trust__item--text { font-weight: 800; font-size: 14.5px; color: var(--mg-text, #0b1320); border: 1.5px solid var(--mg-border, #e3e9f1); border-radius: 10px; padding: 8px 18px; }

/* ---------- Testimonials slider ---------- */
.mg-testi { padding: 72px 24px; }
.mg-testi__h2 { text-align: center; }
.mg-testi__slider { position: relative; max-width: 760px; margin: 28px auto 0; }
.mg-testi__track { position: relative; }
.mg-testi__card { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); transition: opacity .55s var(--mg-ease, ease), transform .55s var(--mg-ease, ease); text-align: center; pointer-events: none; }
.mg-testi__card.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.mg-testi__mark { width: 38px; height: 38px; color: var(--mg-accent, #0067b1); opacity: .45; margin: 0 auto 8px; display: block; }
.mg-testi__card blockquote { margin: 0 0 22px; font-size: clamp(18px, 2.3vw, 23px); line-height: 1.95; color: var(--mg-text, #0b1320); font-weight: 600; }
.mg-testi__card figcaption { display: inline-flex; align-items: center; gap: 12px; }
.mg-testi__ava { width: 50px; height: 50px; flex: none; border-radius: 50%; background: var(--mg-accent, #0067b1); color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mg-testi__ava img { width: 100%; height: 100%; object-fit: cover; }
.mg-testi__who { text-align: start; display: flex; flex-direction: column; }
.mg-testi__who b { font-size: 16px; color: var(--mg-text, #0b1320); }
.mg-testi__who i { font-style: normal; font-size: 13px; color: var(--mg-muted, #5a6b7e); }
.mg-testi__dots { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.mg-testi__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: var(--mg-border, #e3e9f1); cursor: pointer; padding: 0; transition: all .25s ease; }
.mg-testi__dot.is-active { background: var(--mg-accent, #0067b1); width: 26px; border-radius: 6px; }

/* ---------- Dark mode (site-wide; tokens are flipped via PHP injection) ---------- */
[data-theme="dark"] body { background: var(--mg-bg); color: var(--mg-text); }

/* Nav + menu controls */
[data-theme="dark"] .mg-nav { background: rgba(19,29,44,.66); }
[data-theme="dark"] .mg-theme-toggle { background: rgba(255,255,255,.07); color: var(--mg-text); }
[data-theme="dark"] .mg-langsw { background: rgba(255,255,255,.07); }
[data-theme="dark"] .mg-menu-btn { background: var(--mg-accent, #0067b1); color: #fff; }
[data-theme="dark"] .mg-menu-btn__bars span { background: #fff; }
[data-theme="dark"] .mg-nav__brand, [data-theme="dark"] .mg-nav__name { color: var(--mg-text); }

/* Fullscreen overlay menu */
[data-theme="dark"] .mg-overlay { background: linear-gradient(135deg, rgba(11,19,32,.93), rgba(11,19,32,.97)); }
[data-theme="dark"] .mg-overlay__foot { background: rgba(11,19,32,.5); border-top-color: rgba(255,255,255,.08); }
[data-theme="dark"] .mg-overlay__close { background: var(--mg-accent, #0067b1); color: #fff; }
[data-theme="dark"] .mg-overlay__search { background: rgba(255,255,255,.06); }
[data-theme="dark"] .mg-overlay__search input { color: var(--mg-text); }
[data-theme="dark"] .mg-overlay__badge { background: rgba(255,255,255,.06); color: var(--mg-text); border-color: rgba(255,255,255,.14); }

/* Hero scrim so text stays readable over the (light) hero gradient */
[data-theme="dark"] .mg-arw-hero { min-height: 680px; background: #0b1320; }
[data-theme="dark"] .mg-arw-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11,19,32,.25), rgba(11,19,32,.92)); }
[data-theme="dark"] .mg-arw-hero__media { inset: 0; width: 100%; border-radius: 0; background-size: cover; }
[data-theme="dark"] .mg-arw-hero--anyone .mg-arw-hero__media,
[data-theme="dark"] .mg-arw-hero--anyridge .mg-arw-hero__media,
[data-theme="dark"] .mg-arw-hero--bluediamond .mg-arw-hero__media { background-color: #0b1320; background-size: contain; background-position: 18% center; }
[data-theme="dark"] .mg-arw-hero__inner { position: relative; z-index: 2; padding-left: 47%; }
[data-theme="dark"] .mg-arw-hero__title { color: #f4f8fb; }
[data-theme="dark"] .mg-arw-intro { background: var(--mg-bg); }
@media (max-width: 900px) {
  [data-theme="dark"] .mg-arw-hero { min-height: 0; }
  [data-theme="dark"] .mg-arw-hero__media { position: relative; inset: auto; width: calc(100% + 40px); }
  [data-theme="dark"] .mg-arw-hero__inner { padding-left: 0; }
}

/* White card/surfaces → dark surface */
[data-theme="dark"] .mg-cat-card,
[data-theme="dark"] .mg-cat-search,
[data-theme="dark"] .mg-cat-chip,
[data-theme="dark"] .mg-contact-info,
[data-theme="dark"] .mg-contact-formwrap,
[data-theme="dark"] .mg-faq__item,
[data-theme="dark"] .mg-related__card,
[data-theme="dark"] .mg-totop,
[data-theme="dark"] .mg-fab__item,
[data-theme="dark"] .mg-pdp__chips span,
[data-theme="dark"] .mg-arw-fig figcaption,
[data-theme="dark"] .mg-cinfo__card,
[data-theme="dark"] .mg-apoint,
[data-theme="dark"] .mg-pcard,
[data-theme="dark"] .mg-blog-card,
[data-theme="dark"] .mg-search-item,
[data-theme="dark"] .mg-blog-pager a,
[data-theme="dark"] .mg-blog-pager span,
[data-theme="dark"] .b-tools .mg-bento__tools span { background: var(--mg-surface); color: var(--mg-text); }

/* Elements that (mis)used --mg-text as a background — fix so text stays visible */
[data-theme="dark"] .b-contact { background: var(--mg-surface); }

/* Inputs */
[data-theme="dark"] .mg-contact-form input,
[data-theme="dark"] .mg-contact-form select,
[data-theme="dark"] .mg-contact-form textarea,
[data-theme="dark"] .wpcf7-form input,
[data-theme="dark"] .wpcf7-form select,
[data-theme="dark"] .wpcf7-form textarea { background: #0e1826; color: var(--mg-text); }
[data-theme="dark"] .mg-faq__chev { background: #0e1826; }
[data-theme="dark"] .mg-trust__item--text { color: var(--mg-text); }
[data-theme="dark"] .mg-post__content { color: #c4d2e2; }

/* Image placeholders / light gradients → dark */
[data-theme="dark"] .mg-arw__ph { background: linear-gradient(135deg, #16202f, #0e1826); color: #8aa0b8; }
[data-theme="dark"] .mg-cat-card__thumb,
[data-theme="dark"] .mg-blog-card__media { background: linear-gradient(135deg, #16202f, #0e1826); }

/* ============================================================
   Newsroom-style scientific-articles hub  (/articles/)
   Dark hero + featured grid · category chips · latest grid ·
   dark whitepaper wall · events empty-state · closing CTA.
   ============================================================ */
.mg-news { display: block; background: var(--mg-bg, #fff); }

/* ---- Dark hero ---- */
.mg-news-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: 142px 24px 64px;
  background:
    radial-gradient(120% 150% at 82% -12%, rgba(0,103,177,.42), transparent 55%),
    radial-gradient(120% 130% at 2% 4%, rgba(0,176,155,.16), transparent 52%),
    linear-gradient(180deg, #0a1422 0%, #0b1a2c 55%, #091120 100%);
}
.mg-news-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 75%);
}
.mg-news-hero__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.mg-news-hero .mg-crumbs ol { justify-content: center; }
.mg-news-hero .mg-crumbs, .mg-news-hero .mg-crumbs a, .mg-news-hero .mg-crumbs li { color: rgba(255,255,255,.55); }
.mg-news-hero .mg-crumbs a:hover { color: #fff; }
.mg-news-hero__head { text-align: center; max-width: 780px; margin: 10px auto 42px; }
.mg-news-hero__eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: #7cc0f2; background: rgba(0,103,177,.18); border: 1px solid rgba(124,192,242,.32);
  padding: 7px 17px; border-radius: 999px;
}
.mg-news-hero__title { font-size: clamp(36px, 6vw, 66px); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; margin: 18px 0 14px; }
.mg-news-hero__lead { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.9; color: rgba(255,255,255,.72); margin: 0; }

/* ---- Featured grid (big card + list) ---- */
.mg-news-feat { display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; align-items: stretch; }
.mg-news-feature {
  position: relative; display: flex; align-items: flex-end; isolation: isolate;
  min-height: 396px; border-radius: 24px; overflow: hidden; text-decoration: none; color: #fff;
  background-color: #0d2742; background-image: linear-gradient(140deg, #0a4f86, #06243c);
  background-size: cover; background-position: center;
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.7);
  transition: transform .35s var(--mg-ease, cubic-bezier(.23,1,.32,1));
}
.mg-news-feature:hover { transform: translateY(-4px); }
.mg-news-feature__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,17,30,.05) 0%, rgba(7,17,30,.5) 52%, rgba(7,17,30,.92) 100%); }
.mg-news-feature__badge {
  position: absolute; inset-block-start: 18px; inset-inline-start: 18px;
  background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.28); color: #fff; font-weight: 700; font-size: 12px;
  padding: 7px 15px; border-radius: 999px;
}
.mg-news-feature__body { padding: 34px 36px 32px; }
.mg-news-feature__cat { display: inline-block; font-size: 12.5px; font-weight: 700; color: #bfe2ff; margin-bottom: 11px; }
.mg-news-feature__title { font-size: clamp(22px, 3vw, 33px); font-weight: 800; line-height: 1.4; margin: 0 0 10px; }
.mg-news-feature__ex { font-size: 14.5px; line-height: 1.85; color: rgba(255,255,255,.82); margin: 0 0 16px; max-width: 56ch; }
.mg-news-feature__meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: rgba(255,255,255,.7); }
.mg-news-feature__pdf { background: #d23b2e; color: #fff; font-weight: 700; font-size: 11px; padding: 3px 9px; border-radius: 6px; }

.mg-news-list { display: flex; flex-direction: column; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 24px; padding: 6px 24px; }
.mg-news-row { display: block; padding: 18px 0; text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); transition: padding-inline-start .25s var(--mg-ease, ease); }
.mg-news-row:last-child { border-bottom: 0; }
.mg-news-row:hover { padding-inline-start: 8px; }
.mg-news-row__date { font-size: 12px; color: rgba(255,255,255,.5); }
.mg-news-row__title { font-size: 16px; font-weight: 700; line-height: 1.6; margin: 6px 0 11px; color: #fff; transition: color .2s ease; }
.mg-news-row:hover .mg-news-row__title { color: #7cc0f2; }
.mg-news-row__foot { display: flex; align-items: center; gap: 12px; }
.mg-news-row__cat { font-size: 11.5px; font-weight: 700; color: #bfe2ff; background: rgba(0,103,177,.28); padding: 4px 11px; border-radius: 999px; }
.mg-news-row__read { font-size: 12px; color: rgba(255,255,255,.5); }

/* ---- Search + chips ---- */
.mg-news-filter { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 38px; }
.mg-news-search { position: relative; width: 100%; max-width: 640px; }
.mg-news-search svg { position: absolute; inset-inline-start: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: rgba(255,255,255,.55); pointer-events: none; }
.mg-news-search input {
  width: 100%; height: 56px; padding: 0 56px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  color: #fff; font: 16px/1 inherit;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.mg-news-search input::placeholder { color: rgba(255,255,255,.5); }
.mg-news-search input:focus { outline: none; border-color: #5fb0e8; background: rgba(255,255,255,.1); box-shadow: 0 0 0 4px rgba(95,176,232,.16); }
.mg-news-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.mg-news-chip { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: rgba(255,255,255,.8); border-radius: 999px; padding: 10px 20px; font: 600 14px/1 inherit; cursor: pointer; transition: all .2s ease; }
.mg-news-chip:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.mg-news-chip.is-active { background: #fff; border-color: #fff; color: #0b1320; }

/* ---- Content sections ---- */
.mg-news-sec { padding: 74px 24px; background: var(--mg-bg, #fff); }
.mg-news-sec__wrap { max-width: 1180px; margin: 0 auto; }
.mg-news-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.mg-news-sec__title { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.01em; margin: 0; color: var(--mg-text, #0b1320); }
.mg-news-sec__note { font-size: 14px; color: var(--mg-muted, #5a6b7e); }
.mg-news-viewall { display: inline-flex; align-items: center; gap: 8px; background: var(--mg-accent, #0067b1); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; padding: 11px 20px; border-radius: 999px; transition: transform .2s ease, box-shadow .2s ease; }
.mg-news-viewall:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,103,177,.3); }
.mg-news-viewall svg { width: 17px; height: 17px; }

/* Article archive pagination: a compact continuation of the list, with clear
   current and keyboard-focus states. */
.mg-news-pagination { display: flex; justify-content: center; margin-top: 44px; direction: rtl; }
.mg-news-pagination .page-numbers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mg-news-pagination .page-numbers a,
.mg-news-pagination .page-numbers .current { display: grid; min-width: 42px; height: 42px; padding: 0 11px; place-items: center; box-sizing: border-box; border: 1px solid var(--mg-border, #c8d8e5); border-radius: 8px; color: var(--mg-text, #0b3558); background: var(--mg-bg, #fff); font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.mg-news-pagination .page-numbers a:hover { border-color: var(--mg-accent, #0067b1); color: var(--mg-accent, #0067b1); }
.mg-news-pagination .page-numbers a:focus-visible { outline: 3px solid rgba(0,103,177,.23); outline-offset: 3px; }
.mg-news-pagination .page-numbers .current { border-color: var(--mg-accent, #0067b1); color: #fff; background: var(--mg-accent, #0067b1); }
.mg-news-pagination .page-numbers .dots { min-width: auto; border: 0; background: transparent; }
[data-theme="dark"] .mg-news-pagination .page-numbers a { background: var(--mg-surface, #152438); color: var(--mg-text, #eaf6ff); }
@media (max-width: 480px) { .mg-news-pagination { margin-top: 32px; } .mg-news-pagination .page-numbers { gap: 6px; } .mg-news-pagination .page-numbers a, .mg-news-pagination .page-numbers .current { min-width: 38px; height: 38px; padding-inline: 8px; } }

/* ---- Whitepaper / PDF wall (dark) ---- */
.mg-news-sec--dark { background: linear-gradient(180deg, #0b1a2c, #091120); }
.mg-news-sec--dark .mg-news-sec__title { color: #fff; }
.mg-news-sec--dark .mg-news-sec__note { color: rgba(255,255,255,.62); }
.mg-news-pdfgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.mg-news-pdfcard {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px;
  min-height: 226px; padding: 28px 30px;
  background: linear-gradient(152deg, #13263d, #0c1726);
  border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  transition: transform .25s var(--mg-ease, ease), border-color .2s ease, box-shadow .25s ease;
}
.mg-news-pdfcard::before { content: ""; position: absolute; inset-block-start: -42%; inset-inline-end: -12%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(0,103,177,.42), transparent 66%); }
.mg-news-pdfcard:hover { transform: translateY(-5px); border-color: rgba(95,176,232,.5); box-shadow: 0 28px 54px -26px rgba(0,0,0,.75); }
.mg-news-pdfcard__top { display: flex; align-items: center; justify-content: space-between; position: relative; }
.mg-news-pdfcard__badge { background: #d23b2e; color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .06em; padding: 5px 11px; border-radius: 7px; }
.mg-news-pdfcard__brand { font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.55); font-size: 13px; }
.mg-news-pdfcard__title { font-size: 20px; font-weight: 800; line-height: 1.5; margin: 0; flex: 1; position: relative; }
.mg-news-pdfcard__title a { color: #fff; text-decoration: none; transition: color .2s ease; }
.mg-news-pdfcard__title a:hover { color: #7cc0f2; }
.mg-news-pdfcard__src { font-size: 12.5px; color: rgba(255,255,255,.55); margin: 0; position: relative; }
.mg-news-pdfcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; }
.mg-news-pdfcard__foot time { font-size: 12.5px; color: rgba(255,255,255,.5); }
.mg-news-pdfcard__cat { font-size: 12px; font-weight: 700; color: #bfe2ff; }
.mg-news-pdfcard__dl { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; text-decoration: none; font-weight: 700; font-size: 13.5px; padding: 8px 16px; border-radius: 999px; transition: background-color .2s ease, border-color .2s ease; }
.mg-news-pdfcard__dl:hover { background: #d23b2e; border-color: #d23b2e; }
.mg-news-pdfcard__dl svg { width: 16px; height: 16px; }

/* ---- Events empty-state ---- */
.mg-news-events { text-align: center; padding: 52px 24px; border: 1.5px dashed var(--mg-border, #e3e9f1); border-radius: 24px; background: var(--mg-surface, #f3f6fb); }
.mg-news-events__icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--mg-bg, #fff); color: var(--mg-accent, #0067b1); box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.16)); }
.mg-news-events__icon svg { width: 30px; height: 30px; }
.mg-news-events__title { font-size: 21px; font-weight: 800; color: var(--mg-text, #0b1320); margin: 0 0 8px; }
.mg-news-events__sub { font-size: 15px; color: var(--mg-muted, #5a6b7e); margin: 0 0 20px; }
.mg-news-events__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--mg-accent, #0067b1); font-weight: 700; text-decoration: none; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 999px; padding: 11px 22px; transition: all .2s ease; }
.mg-news-events__cta:hover { background: var(--mg-accent, #0067b1); color: #fff; border-color: var(--mg-accent, #0067b1); }

/* ---- Closing CTA band ---- */
.mg-news-cta { padding: 0 24px 84px; background: var(--mg-bg, #fff); }
.mg-news-cta__card {
  position: relative; overflow: hidden; max-width: 1180px; margin: 0 auto; text-align: center;
  padding: 66px 32px; border-radius: 30px; color: #fff;
  background:
    radial-gradient(120% 170% at 50% -24%, rgba(0,103,177,.55), transparent 60%),
    linear-gradient(135deg, #0b1a2c, #091120);
  box-shadow: 0 34px 76px -36px rgba(0,0,0,.55);
}
.mg-news-cta__title { font-size: clamp(24px, 3.4vw, 38px); font-weight: 800; margin: 0 0 12px; }
.mg-news-cta__sub { font-size: 16px; color: rgba(255,255,255,.76); margin: 0 0 26px; }
.mg-news-cta__btn { display: inline-flex; align-items: center; gap: 9px; background: #fff; color: #0b1320; font-weight: 800; text-decoration: none; padding: 15px 34px; border-radius: 999px; transition: transform .2s ease, box-shadow .2s ease; }
.mg-news-cta__btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -12px rgba(0,0,0,.5); }
.mg-news-cta__btn svg { width: 18px; height: 18px; }

.mg-cat-empty--light { color: rgba(255,255,255,.72); }

/* ---- Research article "key numbers" strip (inside post content) ---- */
.mg-rstats { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 30px; }
.mg-rstat {
  flex: 1 1 150px; min-width: 140px; text-align: center;
  padding: 18px 16px; border-radius: 16px;
  background: var(--mg-surface, #f3f6fb); border: 1px solid var(--mg-border, #e3e9f1);
}
.mg-rstat b { display: block; font-size: clamp(26px, 4vw, 36px); font-weight: 800; color: var(--mg-accent, #0067b1); line-height: 1.1; }
.mg-rstat span { display: block; margin-top: 6px; font-size: 13px; color: var(--mg-muted, #5a6b7e); line-height: 1.6; }
[data-theme="dark"] .mg-rstat { background: var(--mg-surface); border-color: var(--mg-border); }

/* ---- Inline article figures (extracted photos + original schematic SVGs) ---- */
.mg-rfig { margin: 30px 0; padding: 0; }
.mg-rfig img, .mg-rsvg { display: block; width: 100%; height: auto; border-radius: 16px; }
.mg-rfig img { border: 1px solid var(--mg-border, #e3e9f1); background: #fff; }
.mg-rsvg { padding: 20px 18px; background: linear-gradient(180deg, #fbfdff, var(--mg-surface, #f3f6fb)); border: 1px solid var(--mg-border, #e3e9f1); box-sizing: border-box; }
.mg-rsvg svg { display: block; width: 100%; height: auto; }
.mg-rfig figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.9; color: var(--mg-muted, #5a6b7e); text-align: center; }
.mg-rfig__credit { opacity: .8; }
[data-theme="dark"] .mg-rfig img { background: #0f1a29; border-color: var(--mg-border); }
[data-theme="dark"] .mg-rsvg { background: #0f1a29; border-color: var(--mg-border); }

/* ---- References / citation block ---- */
.mg-refs { margin: 40px 0 8px; padding: 22px 24px; border-radius: 16px; background: var(--mg-surface, #f3f6fb); border: 1px solid var(--mg-border, #e3e9f1); }
.mg-refs h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--mg-text, #0b1320); }
.mg-refs ol { margin: 0; padding-inline-start: 20px; }
.mg-refs li { font-size: 13px; line-height: 1.95; color: var(--mg-muted, #5a6b7e); word-break: break-word; }
[data-theme="dark"] .mg-refs { background: var(--mg-surface); border-color: var(--mg-border); }

/* ---- Articles page: dark frosted nav over the dark hero ---- */
.mg-blog-body .mg-nav { background: rgba(10,18,30,.55); border-color: rgba(255,255,255,.14); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.mg-blog-body .mg-nav__brand, .mg-blog-body .mg-nav__name { color: #fff; }
.mg-blog-body .mg-menu-btn { background: var(--mg-accent, #0067b1); }

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .mg-news-hero { padding-top: 122px; }
  .mg-news-feat { grid-template-columns: 1fr; }
  .mg-news-feature { min-height: 320px; }
}
@media (max-width: 760px) { .mg-news-pdfgrid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .mg-news-hero { padding: 110px 16px 50px; }
  .mg-news-sec, .mg-news-cta { padding-left: 16px; padding-right: 16px; }
  .mg-news-sec { padding-top: 54px; padding-bottom: 54px; }
  .mg-news-feature__body { padding: 24px; }
  .mg-news-list { padding: 4px 18px; }
  .mg-news-cta__card { padding: 48px 22px; }
}

/* =========================================================================
 * Member account hub (/account/) — auth screen + dashboard
 * ========================================================================= */
.mg-account { padding: 122px 20px 76px; min-height: 72vh; box-sizing: border-box; }
@media (max-width: 600px) { .mg-account { padding-top: 30px; } }

/* --- Auth (logged out): intro + forms --- */
.mg-auth__wrap { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.mg-auth__eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--mg-accent, #0067b1); background: rgba(0,103,177,.08); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
.mg-auth__intro h1 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.35; margin: 0 0 16px; color: var(--mg-text, #0b1320); }
.mg-auth__intro p { font-size: 16px; line-height: 2; color: var(--mg-muted, #5a6b7e); margin: 0 0 24px; }
.mg-auth__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mg-auth__perks li { position: relative; padding-inline-start: 30px; font-size: 15px; color: var(--mg-text, #0b1320); line-height: 1.7; }
.mg-auth__perks li::before { content: "✔"; position: absolute; inset-inline-start: 0; top: 1px; width: 20px; height: 20px; display: grid; place-items: center; font-size: 11px; color: #fff; background: var(--mg-accent, #0067b1); border-radius: 50%; }
.mg-auth__cards { display: grid; gap: 20px; }
.mg-auth__card { background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 20px; padding: 28px 26px; box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.16)); }
.mg-auth__card h2 { margin: 0 0 18px; font-size: 20px; font-weight: 800; color: var(--mg-text, #0b1320); }
.mg-auth__forgot { display: inline-block; margin-top: 14px; color: var(--mg-accent, #0067b1); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.mg-auth__forgot:hover { text-decoration: underline; }

/* --- Forms --- */
.mg-form { display: grid; gap: 15px; }
.mg-field { display: grid; gap: 7px; }
.mg-field > span { font-size: 13.5px; font-weight: 600; color: var(--mg-text, #0b1320); }
.mg-field input, .mg-field select { height: 48px; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 12px; padding: 0 15px; font: inherit; font-size: 15px; background: var(--mg-surface, #f3f6fb); color: var(--mg-text, #0b1320); transition: border-color .2s, box-shadow .2s, background-color .2s; box-sizing: border-box; width: 100%; }
.mg-field input:focus, .mg-field select:focus { outline: none; border-color: var(--mg-accent, #0067b1); background: #fff; box-shadow: 0 0 0 4px rgba(0,103,177,.12); }
.mg-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mg-muted, #5a6b7e); }
.mg-hint { margin: 2px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--mg-muted, #5a6b7e); }
.mg-btn { height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 26px; border: 0; border-radius: 999px; font: 700 15px/1 inherit; cursor: pointer; text-decoration: none; transition: transform .2s var(--mg-ease, ease), box-shadow .2s, background-color .2s; }
.mg-btn--primary { background: var(--mg-accent, #0067b1); color: #fff; }
.mg-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0,103,177,.5); }
.mg-btn--ghost { background: transparent; color: var(--mg-text, #0b1320); border: 1px solid var(--mg-border, #e3e9f1); }
.mg-btn--ghost:hover { background: var(--mg-surface, #f3f6fb); }

/* --- Notices --- */
.mg-note { padding: 13px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.mg-note--ok { background: rgba(62,161,105,.12); color: #2c7a4e; border: 1px solid rgba(62,161,105,.3); }
.mg-note--err { background: rgba(194,59,59,.1); color: #b23b3b; border: 1px solid rgba(194,59,59,.28); }

/* --- Dashboard (logged in) --- */
.mg-dash__wrap { max-width: 1000px; margin: 0 auto; }
.mg-dash__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.mg-dash__hi { font-size: 15px; color: var(--mg-muted, #5a6b7e); }
.mg-dash__head h1 { margin: 2px 0 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: var(--mg-text, #0b1320); }
.mg-dash__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 30px; }
.mg-dcard { background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 18px; padding: 22px 24px; box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.14)); }
.mg-dcard__lbl { display: block; font-size: 13px; color: var(--mg-muted, #5a6b7e); margin-bottom: 8px; }
.mg-dcard__val { display: block; font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: var(--mg-text, #0b1320); line-height: 1.1; }
.mg-dcard--credit { background: linear-gradient(130deg, var(--mg-accent, #0067b1), #0a2e57); border-color: transparent; }
.mg-dcard--credit .mg-dcard__lbl, .mg-dcard--credit .mg-dcard__unit { color: rgba(255,255,255,.8); }
.mg-dcard--credit .mg-dcard__val { color: #fff; }
.mg-dcard__unit { font-size: 13px; margin-inline-start: 6px; }
.mg-badge { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.mg-badge--ok { background: rgba(62,161,105,.14); color: #2c7a4e; }
.mg-badge--wait { background: rgba(240,169,46,.16); color: #a9760f; }
.mg-dash__features h2 { font-size: 18px; font-weight: 800; margin: 0 0 16px; color: var(--mg-text, #0b1320); }
.mg-dash__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mg-dash__link { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: var(--mg-surface, #f3f6fb); border: 1px solid var(--mg-border, #e3e9f1); border-radius: 14px; text-decoration: none; color: var(--mg-text, #0b1320); font-weight: 600; font-size: 15px; transition: transform .2s var(--mg-ease, ease), border-color .2s, background-color .2s; }
.mg-dash__link:hover { transform: translateY(-2px); border-color: var(--mg-accent, #0067b1); background: #fff; }
.mg-dash__link--admin { background: rgba(0,103,177,.06); border-color: rgba(0,103,177,.25); }
.mg-dash__ico { font-size: 20px; }
.mg-dash__editprofile { margin-top: 26px; font-size: 14px; }
.mg-dash__editprofile a { color: var(--mg-accent, #0067b1); }

@media (max-width: 860px) { .mg-auth__wrap { grid-template-columns: 1fr; gap: 30px; } .mg-dash__grid { grid-template-columns: 1fr; } }

/* =========================================================================
 * Dealer ordering area (/order/)
 * ========================================================================= */
.mg-order__wrap { max-width: 1040px; margin: 0 auto; }
.mg-order__search { margin: 4px 0 12px; }
.mg-order__search input { width: 100%; max-width: 420px; padding: 11px 14px; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 10px; background: #fff; color: var(--mg-text, #0b1320); font: inherit; }
.mg-order__noresult { color: var(--mg-muted, #889); text-align: center; padding: 14px; }

/* Telegram Mini App context: drop the site chrome so the form fills the webview. */
html.mg-tg .mg-pdp-headwrap,
html.mg-tg .mg-pdp-footwrap,
html.mg-tg .mg-fab,
html.mg-tg .mg-totop,
html.mg-tg .mg-scroll-progress,
html.mg-tg .mg-cursor { display: none !important; }
html.mg-tg .mg-order { padding-top: 14px; }
html.mg-tg body { background: var(--tg-theme-bg-color, var(--mg-bg, #fff)); }

/* Dedicated Telegram app (/tg-app/) — chromeless auth + panel.
   Forced to a fixed light "document" theme so it never renders half-dark in a
   dark Telegram/webview (color-scheme keeps native inputs light too). */
html.mg-tgapp-html { color-scheme: light; }
html.mg-tgapp-html, html.mg-tgapp-html body { background: #eef2f7; color: #0b1320; }
html.mg-tgapp-html input, html.mg-tgapp-html textarea, html.mg-tgapp-html select { color-scheme: light; background: #fff; color: #0b1320; }
html.mg-tgapp-html .mg-field span { color: #33455a; }
.mg-tgapp-body { background: var(--mg-surface, #f3f6fb); }
.mg-tgapp { padding: 22px 16px 40px; }
.mg-tgapp__wrap { max-width: 460px; margin: 0 auto; }
.mg-tgapp__auth { background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 20px; padding: 26px 22px; box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.16)); }
.mg-tgapp__brand { font-size: 22px; font-weight: 800; color: var(--mg-accent, #0067b1); text-align: center; }
.mg-tgapp__sub { text-align: center; color: var(--mg-muted, #5a6b7e); margin: 6px 0 18px; font-size: 14px; }
.mg-tgtabs { display: flex; gap: 6px; background: var(--mg-surface, #f3f6fb); padding: 5px; border-radius: 12px; margin-bottom: 18px; }
.mg-tgtab { flex: 1; border: 0; background: transparent; padding: 10px; border-radius: 9px; font: inherit; font-weight: 700; color: var(--mg-muted, #5a6b7e); cursor: pointer; transition: background .2s, color .2s; }
.mg-tgtab.is-active { background: #fff; color: var(--mg-text, #0b1320); box-shadow: 0 2px 10px -4px rgba(11,19,32,.25); }
.mg-tgapp__forgot { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: var(--mg-muted, #5a6b7e); }
.mg-tgapp__hint { font-size: 12px; color: var(--mg-muted, #5a6b7e); text-align: center; margin: 12px 0 0; line-height: 1.9; }
/* In Telegram, drop the shell surface so the app fills the webview cleanly */
html.mg-tg .mg-tgapp-body { background: var(--tg-theme-bg-color, #fff); }
html.mg-tg .mg-tgapp { padding-top: 12px; }
.mg-order__gate { max-width: 560px; margin: 20px auto; text-align: center; background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 20px; padding: 44px 30px; box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.16)); }
.mg-order__gate h1 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin: 0 0 12px; color: var(--mg-text, #0b1320); }
.mg-order__gate p { color: var(--mg-muted, #5a6b7e); line-height: 2; margin: 0 0 18px; }
.mg-order__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.mg-order__head h1 { margin: 2px 0 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: var(--mg-text, #0b1320); }
.mg-order__credit { background: linear-gradient(130deg, var(--mg-accent, #0067b1), #0a2e57); color: #fff; padding: 12px 20px; border-radius: 14px; font-size: 14px; }
.mg-order__credit b { font-size: 17px; }
.mg-order__table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 16px; overflow: hidden; margin-bottom: 22px; }
.mg-order__table th, .mg-order__table td { padding: 14px 16px; text-align: start; border-bottom: 1px solid var(--mg-border, #e3e9f1); font-size: 14.5px; }
.mg-order__table thead th { background: var(--mg-surface, #f3f6fb); font-weight: 700; color: var(--mg-text, #0b1320); font-size: 13px; }
.mg-order__table tbody tr:last-child td { border-bottom: 0; }
.mg-order__unit { color: var(--mg-muted, #5a6b7e); font-size: 12px; font-weight: 400; }
.mg-order__qty { width: 78px; height: 40px; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 10px; padding: 0 10px; font: inherit; text-align: center; background: var(--mg-surface, #f3f6fb); }
.mg-order__qty:focus { outline: none; border-color: var(--mg-accent, #0067b1); background: #fff; box-shadow: 0 0 0 3px rgba(0,103,177,.12); }
.mg-order__line, .mg-order__grand { font-weight: 700; color: var(--mg-text, #0b1320); }
.mg-order__foot { display: grid; gap: 16px; background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 16px; padding: 22px 24px; box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.14)); }
.mg-order__foot .mg-field { max-width: 520px; }
.mg-order__total { font-size: 18px; color: var(--mg-muted, #5a6b7e); }
.mg-order__total b { font-size: 24px; color: var(--mg-accent, #0067b1); margin-inline-start: 8px; }
.mg-order__foot .mg-btn { justify-self: start; }
.mg-order__empty { padding: 30px; text-align: center; color: var(--mg-muted, #5a6b7e); background: var(--mg-surface, #f3f6fb); border-radius: 16px; }
.mg-order__history { margin-top: 40px; }
.mg-order__history h2 { font-size: 19px; font-weight: 800; margin: 0 0 16px; color: var(--mg-text, #0b1320); }
.mg-ostatus { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--mg-surface, #f3f6fb); color: var(--mg-muted, #5a6b7e); }
.mg-ostatus--pending { background: rgba(240,169,46,.16); color: #a9760f; }
.mg-ostatus--confirmed { background: rgba(0,103,177,.12); color: #0067b1; }
.mg-ostatus--shipped, .mg-ostatus--paid { background: rgba(62,161,105,.14); color: #2c7a4e; }
.mg-ostatus--canceled { background: rgba(194,59,59,.12); color: #b23b3b; }
[data-theme="dark"] .mg-order__gate, [data-theme="dark"] .mg-order__table, [data-theme="dark"] .mg-order__foot { background: var(--mg-surface); border-color: var(--mg-border); }
[data-theme="dark"] .mg-order__table thead th { background: rgba(255,255,255,.04); }

/* Stack the order table into cards on small screens */
@media (max-width: 680px) {
  .mg-order__table, .mg-order__table thead, .mg-order__table tbody, .mg-order__table tr, .mg-order__table td { display: block; width: 100%; box-sizing: border-box; }
  .mg-order__table thead { display: none; }
  .mg-order__table tr { border-bottom: 8px solid var(--mg-surface, #f3f6fb); padding: 6px 0; }
  .mg-order__table td { border: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 16px; }
  .mg-order__table td::before { content: attr(data-lbl); color: var(--mg-muted, #5a6b7e); font-size: 12px; font-weight: 600; }
  .mg-order__head { flex-direction: column; align-items: flex-start; }
}

/* Order/payment extras */
.mg-btn--sm { height: 38px; padding: 0 18px; font-size: 13px; }
.mg-order__lead { color: var(--mg-muted, #5a6b7e); line-height: 2; margin: 0 0 20px; max-width: 720px; }
.mg-order__await { color: #a9760f; font-size: 13px; }
.mg-dash__orders { margin-top: 34px; }
.mg-dash__orders h2 { font-size: 19px; font-weight: 800; margin: 0 0 16px; color: var(--mg-text, #0b1320); }
.mg-cat-card__dl--lock { opacity: .92; }

/* Payment screen (/account/?pay=) */
.mg-pay__wrap { max-width: 560px; margin: 0 auto; }
.mg-pay__back { display: inline-block; margin-bottom: 14px; color: var(--mg-accent, #0067b1); text-decoration: none; font-weight: 700; font-size: 14px; }
.mg-pay h1 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin: 0 0 20px; color: var(--mg-text, #0b1320); }
.mg-pay__card { background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 16px; padding: 18px 24px; margin-bottom: 20px; box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.14)); }
.mg-pay__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; color: var(--mg-muted, #5a6b7e); font-size: 15px; }
.mg-pay__row b { color: var(--mg-text, #0b1320); font-size: 16px; }
.mg-pay__row--total { border-top: 1px solid var(--mg-border, #e3e9f1); margin-top: 6px; padding-top: 16px; }
.mg-pay__row--total span { color: var(--mg-text, #0b1320); font-weight: 700; }
.mg-pay__row--total b { color: var(--mg-accent, #0067b1); font-size: 22px; }
.mg-pay__form { display: grid; gap: 14px; }
[data-theme="dark"] .mg-pay__card { background: var(--mg-surface); border-color: var(--mg-border); }

/* Order form delivery/invoice fields */
.mg-order__subh { font-size: 16px; font-weight: 800; margin: 4px 0 4px; color: var(--mg-text, #0b1320); }
.mg-order__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.mg-order__fields .mg-field--full { grid-column: 1 / -1; }
.mg-field textarea { border: 1px solid var(--mg-border, #e3e9f1); border-radius: 12px; padding: 11px 14px; font: inherit; font-size: 15px; background: var(--mg-surface, #f3f6fb); color: var(--mg-text, #0b1320); resize: vertical; box-sizing: border-box; width: 100%; min-height: 56px; }
.mg-field textarea:focus { outline: none; border-color: var(--mg-accent, #0067b1); background: #fff; box-shadow: 0 0 0 3px rgba(0,103,177,.12); }
@media (max-width: 600px) { .mg-order__fields { grid-template-columns: 1fr; } }

/* Dealer offers + sale terms */
.mg-offers, .mg-terms { background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 16px; padding: 22px 26px; margin: 22px 0; box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.14)); }
.mg-offers { border-color: rgba(0,103,177,.28); background: linear-gradient(180deg, #f4f9ff, #fff); }
.mg-offers h2, .mg-terms h2 { font-size: 18px; font-weight: 800; margin: 0 0 12px; color: var(--mg-text, #0b1320); }
.mg-offers__body, .mg-terms__body { color: var(--mg-muted, #5a6b7e); line-height: 2; font-size: 15px; }
.mg-offers__body ul, .mg-terms__body ul, .mg-offers__body ol, .mg-terms__body ol { margin: 0; padding-inline-start: 20px; }
[data-theme="dark"] .mg-offers, [data-theme="dark"] .mg-terms { background: var(--mg-surface); border-color: var(--mg-border); }

/* Order form — dynamic product line rows */
.mg-order__lines { margin-bottom: 24px; }
.mg-order__lines-head, .mg-order__line-row { display: grid; grid-template-columns: 2.2fr 1fr 0.7fr 1.6fr 42px; gap: 10px; align-items: start; }
.mg-order__lines-head { padding: 0 4px 8px; font-size: 12.5px; font-weight: 700; color: var(--mg-muted, #5a6b7e); }
.mg-order__line-row { margin-bottom: 10px; }
.mg-oc { min-width: 0; }
.mg-order__line-row select, .mg-order__line-row input { width: 100%; height: 44px; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; background: var(--mg-surface, #f3f6fb); color: var(--mg-text, #0b1320); box-sizing: border-box; }
.mg-order__line-row select:focus, .mg-order__line-row input:focus { outline: none; border-color: var(--mg-accent, #0067b1); background: #fff; box-shadow: 0 0 0 3px rgba(0,103,177,.12); }
.mg-ol-manual { margin-top: 6px; }
.mg-ol-del { height: 44px; width: 42px; border: 1px solid var(--mg-border, #e3e9f1); background: #fff; border-radius: 10px; color: #b23b3b; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; }
.mg-ol-del:hover { background: rgba(194,59,59,.08); border-color: rgba(194,59,59,.4); }
@media (max-width: 640px) {
  .mg-order__lines-head { display: none; }
  .mg-order__line-row { grid-template-columns: 1fr 1fr; gap: 9px; padding: 12px; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 12px; background: var(--mg-surface, #f3f6fb); margin-bottom: 12px; }
  .mg-oc--prod { grid-column: 1 / -1; }
  .mg-oc::before { content: attr(data-lbl); display: block; font-size: 11px; color: var(--mg-muted, #5a6b7e); margin-bottom: 3px; }
  .mg-oc--del { grid-column: 1 / -1; text-align: end; }
  .mg-oc--del::before { content: ""; }
  .mg-order__line-row select, .mg-order__line-row input { background: #fff; }
}
[data-theme="dark"] .mg-ol-del { background: var(--mg-surface); }
/* Order row: product thumbnail + live price; pricing-page thumbnail */
.mg-ol-pick { display: flex; align-items: center; gap: 8px; }
.mg-ol-pick .mg-ol-prod { flex: 1; min-width: 0; }
.mg-ol-thumb { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; border: 1px solid var(--mg-border, #e3e9f1); background: var(--mg-surface, #f3f6fb); flex: none; }
.mg-ol-price { margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--mg-accent, #0067b1); }
.mg-price-thumb { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; border: 1px solid var(--mg-border, #e3e9f1); vertical-align: middle; margin-inline-end: 8px; }

/* =========================================================================
 * Member area — visual polish (additive layer)
 * Refines the account/auth, dashboard, order and payment screens:
 * layered elevation, calmer type, smoother micro-interactions (transform/
 * opacity only), crisp accent focus rings, and full dark-mode parity.
 * Hover elevation on [data-reveal] cards lives on pseudo-elements so the
 * scroll-reveal transition in style.css is never overridden.
 * ========================================================================= */

/* --- Portal shell: faint ambient accent glow at the top --- */
.mg-account { background: radial-gradient(1100px 460px at 50% -140px, rgba(0, 103, 177, 0.055), transparent 62%); }
[data-theme="dark"] .mg-account { background: radial-gradient(1100px 460px at 50% -140px, rgba(45, 130, 195, 0.14), transparent 62%); }

/* --- Auth screen: welcoming premium portal --- */
.mg-auth__eyebrow { letter-spacing: 0; border: 1px solid rgba(0, 103, 177, 0.16); }
.mg-auth__eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-inline-end: 8px; opacity: .85; }
[data-theme="dark"] .mg-auth__eyebrow { background: rgba(84, 170, 230, 0.12); border-color: rgba(84, 170, 230, 0.26); color: #63b7ef; color: color-mix(in srgb, var(--mg-accent, #0067b1) 50%, #cfe8ff); }
@media (min-width: 861px) { .mg-auth__intro { position: sticky; inset-block-start: 104px; } }
.mg-auth__perks li::before { box-shadow: 0 0 0 4px rgba(0, 103, 177, 0.10); }
.mg-auth__card { position: relative; box-shadow: 0 1px 2px rgba(11, 19, 32, 0.04), var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, 0.16)); }
.mg-auth__card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 103, 177, 0.22), 0 24px 60px -24px rgba(11, 19, 32, 0.22);
  opacity: 0; transition: opacity .3s ease;
}
.mg-auth__card:hover::after { opacity: .45; }
.mg-auth__card:focus-within::after { opacity: 1; }
.mg-auth__card h2::after { content: ""; display: block; width: 28px; height: 3px; border-radius: 99px; margin-top: 10px; background: linear-gradient(90deg, var(--mg-accent, #0067b1), rgba(0, 103, 177, 0.25)); }
.mg-auth__forgot { transition: color .2s ease; text-underline-offset: 4px; }
[data-theme="dark"] .mg-auth__card { background: var(--mg-surface); border-color: var(--mg-border); }
[data-theme="dark"] .mg-auth__card::after { box-shadow: inset 0 0 0 1px rgba(84, 170, 230, 0.3), 0 24px 60px -24px rgba(0, 0, 0, 0.65); }

/* Staggered reveal rhythm (delays only; reveal transition stays in style.css) */
.mg-js .mg-auth__cards .mg-auth__card:nth-of-type(2) { transition-delay: .09s; }
.mg-js .mg-dash__grid .mg-dcard:nth-of-type(2) { transition-delay: .07s; }
.mg-js .mg-dash__grid .mg-dcard:nth-of-type(3) { transition-delay: .14s; }

/* --- Forms: calmer affordances, honest dark mode --- */
.mg-field input:hover:not(:focus), .mg-field select:hover:not(:focus), .mg-field textarea:hover:not(:focus) { border-color: #cfdbe9; }
.mg-field input::placeholder, .mg-field textarea::placeholder { color: var(--mg-muted, #5a6b7e); opacity: .6; }
.mg-field select { cursor: pointer; }
.mg-field textarea { transition: border-color .2s, box-shadow .2s, background-color .2s; }
.mg-check input { accent-color: var(--mg-accent, #0067b1); width: 16px; height: 16px; flex: none; }
[data-theme="dark"] .mg-field input, [data-theme="dark"] .mg-field select, [data-theme="dark"] .mg-field textarea { background: #0e1826; border-color: var(--mg-border); }
[data-theme="dark"] .mg-field input:hover:not(:focus), [data-theme="dark"] .mg-field select:hover:not(:focus), [data-theme="dark"] .mg-field textarea:hover:not(:focus) { border-color: #33465f; }
[data-theme="dark"] .mg-field input:focus, [data-theme="dark"] .mg-field select:focus, [data-theme="dark"] .mg-field textarea:focus { background: var(--mg-surface, #131d2c); box-shadow: 0 0 0 4px rgba(84, 170, 230, 0.16); }

/* --- Notices: status edge + readable dark colors --- */
.mg-note--ok, .mg-note--err { border-inline-start-width: 3px; box-shadow: 0 6px 18px -12px rgba(11, 19, 32, 0.12); }
[data-theme="dark"] .mg-note--ok { background: rgba(62, 161, 105, 0.16); color: #93dcb2; border-color: rgba(62, 161, 105, 0.42); }
[data-theme="dark"] .mg-note--err { background: rgba(224, 92, 92, 0.12); color: #f3a6a6; border-color: rgba(224, 92, 92, 0.38); }

/* --- Buttons: press state, top highlight, crisp focus ring --- */
.mg-btn { transition: transform .22s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow .25s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.mg-btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.mg-btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 30px -10px rgba(0, 103, 177, 0.5); }
.mg-form button[type=submit]:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 26px rgba(0, 103, 177, 0.3); }
.mg-btn:active, .mg-form button[type=submit]:active { transform: translateY(0) scale(.99); }
.mg-btn--ghost:hover { border-color: rgba(0, 103, 177, 0.4); color: var(--mg-accent, #0067b1); }
[data-theme="dark"] .mg-btn--ghost:hover { border-color: rgba(84, 170, 230, 0.45); color: #63b7ef; color: color-mix(in srgb, var(--mg-accent, #0067b1) 50%, #cfe8ff); }
.mg-btn:focus-visible, .mg-form button[type=submit]:focus-visible, .mg-dash__link:focus-visible, .mg-auth__forgot:focus-visible, .mg-pay__back:focus-visible, .mg-ol-del:focus-visible { outline: 2px solid var(--mg-accent, #0067b1); outline-offset: 2px; }

/* --- Dashboard: layered cards, sheen on the credit card, icon tiles --- */
.mg-dcard { position: relative; box-shadow: 0 1px 2px rgba(11, 19, 32, 0.04), var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, 0.14)); }
.mg-dcard::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 18px 44px -18px rgba(11, 19, 32, 0.2);
  opacity: 0; transition: opacity .3s ease;
}
.mg-dcard:hover::after { opacity: 1; }
[data-theme="dark"] .mg-dcard:not(.mg-dcard--credit) { background: var(--mg-surface); border-color: var(--mg-border); }
[data-theme="dark"] .mg-dcard::after { box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.6); }
.mg-dcard--credit { position: relative; z-index: 0; box-shadow: 0 16px 40px -16px rgba(0, 72, 124, 0.5); }
.mg-dcard--credit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120% 110% at 85% -15%, rgba(255, 255, 255, 0.2), transparent 55%),
    radial-gradient(90% 100% at -10% 115%, rgba(10, 160, 230, 0.35), transparent 62%);
}
.mg-badge { line-height: 1.6; }
[data-theme="dark"] .mg-badge--ok { background: rgba(62, 161, 105, 0.2); color: #8fdcb0; }
[data-theme="dark"] .mg-badge--wait { background: rgba(240, 169, 46, 0.18); color: #f0c46a; }
.mg-dash__features h2::after, .mg-dash__orders h2::after, .mg-order__history h2::after { content: ""; display: block; width: 28px; height: 3px; border-radius: 99px; margin-top: 8px; background: linear-gradient(90deg, var(--mg-accent, #0067b1), rgba(0, 103, 177, 0.25)); }
.mg-dash__link { transition: transform .22s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)), border-color .2s ease, background-color .2s ease, box-shadow .25s ease; }
.mg-dash__link:hover { box-shadow: 0 12px 28px -14px rgba(11, 19, 32, 0.2); }
.mg-dash__ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; font-size: 19px; background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 12px; box-shadow: 0 1px 2px rgba(11, 19, 32, 0.05); transition: transform .3s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-dash__link:hover .mg-dash__ico { transform: scale(1.08); }
[data-theme="dark"] .mg-dash__link:hover { background: #182539; border-color: rgba(84, 170, 230, 0.5); }
[data-theme="dark"] .mg-dash__ico { background: #0e1826; border-color: var(--mg-border); }
[data-theme="dark"] .mg-dash__link--admin { background: rgba(84, 170, 230, 0.09); border-color: rgba(84, 170, 230, 0.28); }

/* --- Numbers (credit, totals, prices): steady tabular digits --- */
.mg-dcard__val, .mg-order__credit b, .mg-order__total b, .mg-pay__row b, .mg-order__line, .mg-order__grand { font-variant-numeric: tabular-nums; }

/* --- Order area: gate, credit chip, table, lines, empty state --- */
.mg-order__gate { background: linear-gradient(180deg, #f7fbff 0%, #fff 46%); box-shadow: 0 1px 2px rgba(11, 19, 32, 0.04), 0 22px 60px -24px rgba(11, 19, 32, 0.2); }
.mg-order__gate h1::after { content: ""; display: block; width: 32px; height: 3px; border-radius: 99px; background: var(--mg-accent, #0067b1); margin: 12px auto 0; opacity: .85; }
.mg-order__credit { position: relative; z-index: 0; box-shadow: 0 12px 28px -14px rgba(0, 72, 124, 0.45); }
.mg-order__credit::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(130% 140% at 85% -25%, rgba(255, 255, 255, 0.2), transparent 55%); }
.mg-order__table { box-shadow: 0 8px 28px -18px rgba(11, 19, 32, 0.14); }
.mg-order__table thead th { color: var(--mg-muted, #5a6b7e); }
.mg-order__table tbody tr { transition: background-color .18s ease; }
.mg-order__table tbody tr:hover { background: rgba(0, 103, 177, 0.03); }
[data-theme="dark"] .mg-order__table tbody tr:hover { background: rgba(84, 170, 230, 0.06); }
.mg-order__foot { box-shadow: 0 1px 2px rgba(11, 19, 32, 0.04), var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, 0.14)); }
.mg-order__subh::before { content: ""; display: inline-block; width: 16px; height: 3px; border-radius: 99px; background: var(--mg-accent, #0067b1); margin-inline-end: 8px; vertical-align: 3px; }
.mg-order__empty { border: 1.5px dashed var(--mg-border, #e3e9f1); padding: 36px 30px; }
.mg-order__line-row select, .mg-order__line-row input { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.mg-order__line-row select:hover:not(:focus), .mg-order__line-row input:hover:not(:focus) { border-color: #cfdbe9; }
.mg-ol-del { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
[data-theme="dark"] .mg-order__qty, [data-theme="dark"] .mg-order__line-row select, [data-theme="dark"] .mg-order__line-row input { background: #0e1826; border-color: var(--mg-border); }
[data-theme="dark"] .mg-order__qty:focus, [data-theme="dark"] .mg-order__line-row select:focus, [data-theme="dark"] .mg-order__line-row input:focus { background: var(--mg-surface, #131d2c); box-shadow: 0 0 0 3px rgba(84, 170, 230, 0.16); }
[data-theme="dark"] .mg-order__line-row select:hover:not(:focus), [data-theme="dark"] .mg-order__line-row input:hover:not(:focus) { border-color: #33465f; }
[data-theme="dark"] .mg-ol-del:hover { background: rgba(224, 92, 92, 0.14); }
[data-theme="dark"] .mg-order__await { color: #f0c46a; }
@media (max-width: 640px) {
  [data-theme="dark"] .mg-order__line-row select, [data-theme="dark"] .mg-order__line-row input { background: #0e1826; }
}

/* --- Status pills: leading dot + readable dark variants --- */
.mg-ostatus::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-inline-end: 6px; vertical-align: 1px; opacity: .8; }
[data-theme="dark"] .mg-ostatus { background: rgba(255, 255, 255, 0.07); }
[data-theme="dark"] .mg-ostatus--pending { background: rgba(240, 169, 46, 0.16); color: #f0c46a; }
[data-theme="dark"] .mg-ostatus--confirmed { background: rgba(84, 170, 230, 0.14); color: #63b7ef; color: color-mix(in srgb, var(--mg-accent, #0067b1) 50%, #cfe8ff); }
[data-theme="dark"] .mg-ostatus--shipped, [data-theme="dark"] .mg-ostatus--paid { background: rgba(62, 161, 105, 0.18); color: #8fdcb0; }
[data-theme="dark"] .mg-ostatus--canceled { background: rgba(224, 92, 92, 0.14); color: #f3a6a6; }

/* --- Offers panel: keep its accent tint alive in dark mode --- */
[data-theme="dark"] .mg-offers { background: linear-gradient(180deg, rgba(45, 130, 195, 0.14), var(--mg-surface) 60%); border-color: rgba(84, 170, 230, 0.26); }

/* --- Payment screen --- */
.mg-pay__card { border-radius: 18px; box-shadow: 0 1px 2px rgba(11, 19, 32, 0.04), var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, 0.14)); }
.mg-pay__back { transition: color .2s ease, transform .25s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-pay__back:hover { transform: translateX(4px); }
[data-theme="dark"] .mg-auth__forgot, [data-theme="dark"] .mg-dash__editprofile a, [data-theme="dark"] .mg-pay__back { color: #63b7ef; color: color-mix(in srgb, var(--mg-accent, #0067b1) 50%, #cfe8ff); }
[data-theme="dark"] .mg-order__total b, [data-theme="dark"] .mg-pay__row--total b { color: #63b7ef; color: color-mix(in srgb, var(--mg-accent, #0067b1) 55%, #cfe8ff); }

/* --- Reduced motion: no transforms/transitions in the member area --- */
@media (prefers-reduced-motion: reduce) {
  .mg-btn, .mg-form button[type=submit], .mg-dash__link, .mg-dash__ico, .mg-pay__back, .mg-ol-del,
  .mg-auth__card::after, .mg-dcard::after, .mg-order__table tbody tr,
  .mg-order__line-row select, .mg-order__line-row input, .mg-field textarea { transition: none; }
  .mg-btn:hover, .mg-btn:active, .mg-form button[type=submit]:hover, .mg-form button[type=submit]:active,
  .mg-dash__link:hover, .mg-dash__link:hover .mg-dash__ico, .mg-pay__back:hover { transform: none; }
}

/* =========================================================================
 * Articles pages — visual polish (additive layer)
 * Refines the newsroom hub (/articles/) and the single-article reading
 * experience: calmer editorial hierarchy, layered card depth, gentle image
 * zooms inside clipped frames, dot-separated meta, accent section markers,
 * crisp focus rings and dark-mode parity. Micro-interactions are transform/
 * opacity-first; where a card itself carries [data-reveal], the combined
 * transition re-states the .7s opacity/transform pair from style.css so the
 * scroll-reveal is never broken (same pattern as the member-area layer).
 * ========================================================================= */

/* --- Hub hero: editorial masthead --- */
.mg-news-hero__eyebrow::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #36b6ff; box-shadow: 0 0 0 4px rgba(54, 182, 255, 0.16);
  margin-inline-end: 9px; vertical-align: 1px;
}
.mg-news-hero__title { text-wrap: balance; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mg-news-hero__title {
    background: linear-gradient(180deg, #ffffff 58%, #b9d9f2);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.mg-news-hero__lead { max-width: 58ch; margin-inline: auto; }
.mg-news-search input { caret-color: #7cc0f2; }
.mg-news-search input:hover:not(:focus) { border-color: rgba(255, 255, 255, 0.3); }

/* --- Featured card: deeper lift + edge light (bg image lives on the card) --- */
.mg-news-feature {
  transition: transform .5s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    box-shadow .5s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
.mg-news-feature::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: box-shadow .5s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
.mg-news-feature:hover { transform: translateY(-6px); box-shadow: 0 48px 92px -38px rgba(0, 0, 0, 0.8); }
.mg-news-feature:hover::after { box-shadow: inset 0 0 0 1px rgba(124, 192, 242, 0.42); }
.mg-news-feature__title { text-wrap: balance; transition: color .3s ease; }
.mg-news-feature:hover .mg-news-feature__title { color: #d9ecff; }
.mg-news-feature__cat::before {
  content: ""; display: inline-block; width: 15px; height: 2px; border-radius: 99px;
  background: currentColor; opacity: .75; margin-inline-end: 8px; vertical-align: 4px;
}
.mg-news-feature__badge { box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.55); }
.mg-news-feature__meta time { font-variant-numeric: tabular-nums; }

/* --- Headlines list: quieter frame, guided hover --- */
.mg-news-list {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.mg-news-row { transition: padding-inline-start .3s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)), border-color .3s ease; }
.mg-news-row:hover { border-bottom-color: rgba(124, 192, 242, 0.26); }
.mg-news-row__date { font-variant-numeric: tabular-nums; letter-spacing: .02em; transition: color .25s ease; }
.mg-news-row:hover .mg-news-row__date { color: #7cc0f2; }

/* --- Category chips: pressable + confident active state --- */
.mg-news-chip:active, .mg-cat-chip:active, .mg-arthub__chip:active { transform: scale(0.96); }
.mg-news-chip.is-active { box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.6); }
.mg-cat-chip.is-active, .mg-arthub__chip.is-active { box-shadow: 0 10px 22px -10px rgba(0, 103, 177, 0.45); }

/* --- Section headers: accent marker + forward arrow nudges --- */
.mg-news-sec__title::after {
  content: ""; display: block; width: 30px; height: 3px; border-radius: 99px; margin-top: 10px;
  background: linear-gradient(90deg, var(--mg-accent, #0067b1), rgba(0, 103, 177, 0.22));
}
.mg-news-sec--dark .mg-news-sec__title::after { background: linear-gradient(90deg, #5fb0e8, rgba(95, 176, 232, 0.2)); }
.mg-news-viewall svg, .mg-news-cta__btn svg, .mg-blog-card__more svg { transition: transform .25s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-news-viewall:hover svg, .mg-news-cta__btn:hover svg, .mg-blog-card__more:hover svg { transform: translateX(-3px); }

/* --- Latest-articles grid: layered depth, reveal timing preserved --- */
.mg-blog-card { box-shadow: 0 1px 2px rgba(11, 19, 32, 0.05); }
.mg-js .mg-blog-card[data-reveal] {
  transition: opacity .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    transform .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    box-shadow .35s ease, border-color .25s ease;
}
.mg-blog-card:hover .mg-blog-card__media img { transform: scale(1.04); }
.mg-blog-card__cat { border: 1px solid rgba(0, 103, 177, 0.14); }
.mg-blog-card__pdf { box-shadow: 0 8px 18px -8px rgba(210, 59, 46, 0.6); }
.mg-blog-card__meta time { font-variant-numeric: tabular-nums; }

/* --- Whitepaper / PDF cards: breathing glow, download gesture --- */
.mg-js .mg-news-pdfcard[data-reveal] {
  transition: opacity .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    transform .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    box-shadow .35s ease, border-color .25s ease;
}
.mg-news-pdfcard::before { opacity: .75; transition: opacity .45s ease; }
.mg-news-pdfcard:hover::before { opacity: 1; }
.mg-news-pdfcard__badge { box-shadow: 0 8px 18px -8px rgba(210, 59, 46, 0.55); }
.mg-news-pdfcard__dl svg { transition: transform .25s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-news-pdfcard__dl:hover svg { transform: translateY(2px); }

/* --- Events empty-state + closing CTA --- */
.mg-news-events__icon { box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, 0.16)), 0 0 0 8px rgba(0, 103, 177, 0.05); }
.mg-news-cta__card { isolation: isolate; }
.mg-news-cta__card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background-image: linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(90% 90% at 50% 0%, #000, transparent 78%);
  mask-image: radial-gradient(90% 90% at 50% 0%, #000, transparent 78%);
}

/* --- Pager: smoother state changes --- */
.mg-blog-pager a { transition: border-color .2s ease, color .2s ease, background-color .2s ease, box-shadow .25s ease; }
.mg-blog-pager a:hover { background: rgba(0, 103, 177, 0.05); box-shadow: 0 10px 22px -12px rgba(0, 103, 177, 0.4); }

/* --- Search results --- */
.mg-js .mg-search-item[data-reveal] {
  transition: opacity .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    transform .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    box-shadow .25s ease, border-color .2s ease;
}
.mg-search-item :is(h2, h3) { transition: color .2s ease; }
.mg-search-item:hover h3 { color: var(--mg-accent, #0067b1); }
.mg-search-item__kind { border: 1px solid rgba(0, 103, 177, 0.14); }

/* --- Catalog whitepaper cards: thumb zoom inside the clipped frame --- */
.mg-js .mg-cat-card[data-reveal] {
  transition: opacity .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    transform .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    box-shadow .3s ease, border-color .2s ease;
}
.mg-cat-card__thumb img { transition: transform .5s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-cat-card:hover .mg-cat-card__thumb img { transform: scale(1.04); }

/* --- Single article: masthead --- */
.mg-post__head { background: radial-gradient(920px 420px at 50% -180px, rgba(0, 103, 177, 0.06), transparent 62%); }
[data-theme="dark"] .mg-post__head { background: radial-gradient(920px 420px at 50% -180px, rgba(45, 130, 195, 0.13), transparent 62%); }
.mg-post__title { text-wrap: balance; }
.mg-post__meta time { font-variant-numeric: tabular-nums; }
.mg-post__meta > time:not(:first-child)::before,
.mg-post__meta > .mg-post__read::before { content: "•"; font-size: 8px; opacity: .5; margin-inline-end: 12px; vertical-align: 2px; }
.mg-post__cat { border: 1px solid rgba(0, 103, 177, 0.14); }
[data-theme="dark"] .mg-post__cat,
[data-theme="dark"] .mg-blog-card__cat {
  background: rgba(84, 170, 230, 0.13); border-color: rgba(84, 170, 230, 0.24);
  color: #63b7ef; color: color-mix(in srgb, var(--mg-accent, #0067b1) 50%, #cfe8ff);
}
.mg-post__source { line-height: 1.9; border-inline-start: 3px solid rgba(0, 103, 177, 0.35); padding-inline-start: 14px; }
.mg-post__pdf svg { transition: transform .25s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-post__pdf:hover svg { transform: translateY(2px); }
.mg-post__pdf:active { transform: scale(0.97); }
.mg-post__hero img { border: 0; }

/* --- Single article: reading typography --- */
.mg-post__content h2, .mg-post__content h3 { scroll-margin-top: 110px; letter-spacing: -.01em; text-wrap: balance; }
.mg-post__content h2::after {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 99px; margin-top: 12px;
  background: linear-gradient(90deg, var(--mg-accent, #0067b1), rgba(0, 103, 177, 0.22));
}
.mg-post__content > p:first-of-type { font-size: 19px; line-height: 2; color: #1c2c42; }
[data-theme="dark"] .mg-post__content > p:first-of-type { color: #d4e0ef; }
.mg-post__content strong { color: var(--mg-text, #0b1320); }
.mg-post__content a {
  text-decoration-color: rgba(0, 103, 177, 0.35); text-decoration-thickness: 1.5px;
  text-underline-offset: 4px; transition: color .2s ease, text-decoration-color .2s ease;
}
.mg-post__content a:hover { text-decoration-color: currentColor; }
[data-theme="dark"] .mg-post__content a {
  color: #63b7ef; color: color-mix(in srgb, var(--mg-accent, #0067b1) 50%, #cfe8ff);
  text-decoration-color: rgba(99, 183, 239, 0.4);
}
.mg-post__content li::marker { color: var(--mg-accent, #0067b1); }
.mg-post__content blockquote {
  border-inline-start-width: 3px; padding: 20px 26px; border-radius: 14px;
  border-start-start-radius: 4px; border-end-start-radius: 4px; font-weight: 600;
}

/* --- Key-numbers strip --- */
.mg-rstat {
  background-image: radial-gradient(130% 100% at 50% -35%, rgba(0, 103, 177, 0.07), transparent 58%);
  transition: transform .3s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow .3s ease, border-color .2s ease;
}
.mg-rstat:hover { transform: translateY(-3px); box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, 0.16)); border-color: rgba(0, 103, 177, 0.3); }
.mg-rstat b { font-variant-numeric: tabular-nums; }
[data-theme="dark"] .mg-rstat { background-image: radial-gradient(130% 100% at 50% -35%, rgba(84, 170, 230, 0.1), transparent 58%); }

/* --- Figures: centered caption rule --- */
.mg-rfig figcaption::before { content: ""; display: block; width: 26px; height: 2px; border-radius: 99px; background: rgba(0, 103, 177, 0.4); margin: 0 auto 10px; }

/* --- References block --- */
.mg-refs { border-inline-start: 3px solid rgba(0, 103, 177, 0.3); }
.mg-refs h3::before { content: ""; display: inline-block; width: 16px; height: 3px; border-radius: 99px; background: var(--mg-accent, #0067b1); margin-inline-end: 8px; vertical-align: 3px; }
.mg-refs li::marker { color: var(--mg-accent, #0067b1); font-weight: 700; }
[data-theme="dark"] .mg-refs { border-inline-start-color: rgba(84, 170, 230, 0.4); }

/* --- Paged articles (wp_link_pages) --- */
.mg-post__pages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 28px 0 0; font-weight: 700; color: var(--mg-muted, #5a6b7e); font-size: 14px; }
.mg-post__pages a, .mg-post__pages .post-page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px;
  border-radius: 10px; border: 1px solid var(--mg-border, #e3e9f1); background: #fff; color: var(--mg-text, #0b1320);
  text-decoration: none; font-variant-numeric: tabular-nums;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.mg-post__pages a:hover { border-color: var(--mg-accent, #0067b1); color: var(--mg-accent, #0067b1); }
.mg-post__pages .post-page-numbers.current { background: var(--mg-accent, #0067b1); border-color: var(--mg-accent, #0067b1); color: #fff; }
[data-theme="dark"] .mg-post__pages a, [data-theme="dark"] .mg-post__pages .post-page-numbers { background: var(--mg-surface); }
[data-theme="dark"] .mg-post__pages .post-page-numbers.current { background: var(--mg-accent, #0067b1); color: #fff; }

/* --- Tags + share row --- */
.mg-post__tags a { transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.mg-post__tags a:hover { background: rgba(0, 103, 177, 0.05); }
.mg-post__share-btn:hover { box-shadow: 0 10px 22px -10px rgba(0, 103, 177, 0.45); }
.mg-post__share-btn:active { transform: scale(0.97); }

/* --- Focus rings (light surfaces / dark hero surfaces) --- */
.mg-news-viewall:focus-visible, .mg-news-events__cta:focus-visible,
.mg-blog-card__media:focus-visible, .mg-blog-card__body h3 a:focus-visible,
.mg-blog-card__more:focus-visible, .mg-blog-card__dl:focus-visible,
.mg-blog-pager a:focus-visible, .mg-cat-chip:focus-visible, .mg-arthub__chip:focus-visible,
.mg-cat-card__dl:focus-visible, .mg-search-item:focus-visible,
.mg-post__pdf:focus-visible, .mg-post__share-btn:focus-visible,
.mg-post__tags a:focus-visible, .mg-post__pages a:focus-visible { outline: 2px solid var(--mg-accent, #0067b1); outline-offset: 2px; }
.mg-news-chip:focus-visible, .mg-news-row:focus-visible, .mg-news-feature:focus-visible,
.mg-news-pdfcard__title a:focus-visible, .mg-news-pdfcard__dl:focus-visible,
.mg-news-cta__btn:focus-visible { outline: 2px solid #7cc0f2; outline-offset: 3px; }

/* --- Reduced motion: articles layer goes still --- */
@media (prefers-reduced-motion: reduce) {
  .mg-js .mg-blog-card[data-reveal], .mg-js .mg-news-pdfcard[data-reveal],
  .mg-js .mg-search-item[data-reveal], .mg-js .mg-cat-card[data-reveal],
  .mg-news-feature, .mg-news-feature::after, .mg-news-feature__title,
  .mg-news-row, .mg-news-row__date, .mg-news-pdfcard::before,
  .mg-news-viewall svg, .mg-news-cta__btn svg, .mg-blog-card__more svg,
  .mg-news-pdfcard__dl svg, .mg-post__pdf svg,
  .mg-blog-card__media img, .mg-cat-card__thumb img,
  .mg-rstat, .mg-post__tags a, .mg-blog-pager a,
  .mg-post__pages a, .mg-post__pages .post-page-numbers,
  .mg-search-item :is(h2, h3), .mg-post__content a { transition: none; }
  .mg-news-feature:hover, .mg-rstat:hover,
  .mg-blog-card:hover, .mg-news-pdfcard:hover, .mg-search-item:hover, .mg-cat-card:hover,
  .mg-news-chip:active, .mg-cat-chip:active, .mg-arthub__chip:active,
  .mg-post__pdf:active, .mg-post__share-btn:active,
  .mg-news-viewall:hover svg, .mg-news-cta__btn:hover svg, .mg-blog-card__more:hover svg,
  .mg-news-pdfcard__dl:hover svg, .mg-post__pdf:hover svg,
  .mg-blog-card:hover .mg-blog-card__media img, .mg-cat-card:hover .mg-cat-card__thumb img { transform: none; }
}

/* =========================================================================
 * Landing / product / catalog / contact — visual polish (additive layer)
 * Refines the product landing pages (.mg-arw-*), the single-product page
 * (.mg-pdp*), the catalog library (.mg-cat-*) and the contact page
 * (.mg-contact*): shared eyebrow-dot + accent-bar heading motifs, layered
 * card depth on the member-area shadow scale, framed figures with gentle
 * zooms inside clipped frames, refined spec rows and stat tiles, premium
 * CTA press states, crisp accent focus rings and dark-mode parity.
 * Where an element itself carries [data-reveal], combined transitions
 * re-state the .7s opacity/transform pair from style.css so the scroll
 * reveal is never broken (same pattern as the two layers above).
 * ========================================================================= */

/* --- Shared motifs: eyebrow dots, accent heading bars, balanced titles --- */
.mg-arw-eyebrow::before,
.mg-pdp__eyebrow::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; margin-inline-end: 8px; vertical-align: 1px; opacity: .85;
}
.mg-arw-h2::after {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 99px; margin-top: 12px;
  background: linear-gradient(90deg, var(--mg-pa, var(--mg-accent, #0067b1)), rgba(0, 103, 177, 0.22));
  background: linear-gradient(90deg, var(--mg-pa, var(--mg-accent, #0067b1)), color-mix(in srgb, var(--mg-pa, var(--mg-accent, #0067b1)) 25%, transparent));
}
.mg-arw-h2--light::after { background: linear-gradient(90deg, #5fb0e8, rgba(95, 176, 232, 0.2)); }
.mg-cat-title::after {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 99px; margin-top: 14px;
  background: linear-gradient(90deg, var(--mg-accent, #0067b1), rgba(0, 103, 177, 0.22));
}
[data-theme="dark"] .mg-arw-h2::after,
[data-theme="dark"] .mg-cat-title::after,
[data-theme="dark"] .mg-pdp__h2::after { background: linear-gradient(90deg, #5fb0e8, rgba(95, 176, 232, 0.2)); }
.mg-arw-hero__title, .mg-pdp__title, .mg-cat-title { text-wrap: balance; }
.mg-stat__num, .mg-pdp__specrow .v, .mg-arw-formula code { font-variant-numeric: tabular-nums; }
[data-theme="dark"] .mg-arw-eyebrow:not(.mg-arw-eyebrow--light),
[data-theme="dark"] .mg-pdp__eyebrow,
[data-theme="dark"] .mg-pdp__back { color: #63b7ef; color: color-mix(in srgb, var(--mg-accent, #0067b1) 50%, #cfe8ff); }

/* --- Landing hero: glassy badge cards, accent-aware bullet marks --- */
.mg-arw-badge {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(11, 19, 32, 0.04), var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, 0.16));
  transition: transform .3s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow .3s ease;
}
.mg-arw-badge:not(.mg-arw-badge--center) {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
}
.mg-arw-badge:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), var(--mg-shadow-lg, 0 26px 64px -22px rgba(11, 19, 32, 0.26)); }
.mg-arw-badge--center { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 18px 40px -18px rgba(0, 67, 110, 0.55); }
.mg-arw-badge--center:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 26px 54px -20px rgba(0, 67, 110, 0.6); }
[data-theme="dark"] .mg-arw-badge:not(.mg-arw-badge--center) { background: rgba(19, 29, 44, 0.82); border-color: var(--mg-border); }
[data-theme="dark"] .mg-arw-badge { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 50px -22px rgba(0, 0, 0, 0.6); }
.mg-arw .mg-arw-list li::before { background: var(--mg-pa, var(--mg-accent, #0067b1)); }
.mg-arw-hero__more h2::after {
  content: ""; display: block; width: 28px; height: 3px; border-radius: 99px; margin-top: 10px;
  background: linear-gradient(90deg, var(--mg-pa, var(--mg-accent, #0067b1)), rgba(0, 103, 177, 0.22));
}

/* --- Landing sections: soft-band depth, framed figures with quiet zooms --- */
.mg-arw-sec--soft {
  background: linear-gradient(180deg, #f7fafd 0%, var(--mg-surface, #f3f6fb) 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mg-surface, #f3f6fb) 45%, #fff) 0%, var(--mg-surface, #f3f6fb) 100%);
  box-shadow: inset 0 1px 0 rgba(11, 19, 32, 0.04), inset 0 -1px 0 rgba(11, 19, 32, 0.04);
}
[data-theme="dark"] .mg-arw-sec--soft {
  background: var(--mg-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
.mg-arw-fig {
  box-shadow: 0 1px 2px rgba(11, 19, 32, 0.04);
  transition: transform .35s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow .35s ease, border-color .25s ease;
}
.mg-arw-fig:hover { transform: translateY(-3px); box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, 0.16)); border-color: rgba(0, 103, 177, 0.3); }
.mg-arw-fig img { transition: transform .6s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-arw-fig:hover img { transform: scale(1.03); }
.mg-arw-fig figcaption { border-top: 1px solid var(--mg-border, #e3e9f1); }
.mg-arw-closing__fig img { border-radius: 22px; border: 1px solid var(--mg-border, #e3e9f1); box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11, 19, 32, 0.26)); }
.mg-arw-closing__fig .mg-arw__ph { border-radius: 22px; }

/* --- Stat tiles: tidy grid + accent wash; fix the xpeed stat line, which
   shares .mg-arw-stat with the tiles, into a dark glass chip so its light
   text stays readable on the dark band --- */
.mg-arw-stats .mg-arw-stat { margin: 0; background-image: radial-gradient(130% 100% at 50% -35%, rgba(0, 103, 177, 0.06), transparent 58%); }
.mg-arw-stats .mg-arw-stat:hover { border-color: rgba(0, 103, 177, 0.3); }
[data-theme="dark"] .mg-arw-stats .mg-arw-stat { background-image: radial-gradient(130% 100% at 50% -35%, rgba(84, 170, 230, 0.1), transparent 58%); }
.mg-arw-xpeed .mg-arw-stat {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px; padding: 16px 20px; align-self: flex-start;
}
.mg-arw-xpeed .mg-arw-stat:hover { transform: none; box-shadow: none; }

/* --- Steps timeline: haloed markers, connector fades out --- */
.mg-arw-step__n {
  box-shadow: 0 0 0 5px rgba(0, 103, 177, 0.1), 0 10px 22px -10px rgba(0, 103, 177, 0.5);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--mg-pa, var(--mg-accent, #0067b1)) 12%, transparent), 0 10px 22px -10px color-mix(in srgb, var(--mg-pa, var(--mg-accent, #0067b1)) 55%, transparent);
}
.mg-arw-step:not(:last-child)::before { background: linear-gradient(180deg, var(--mg-border, #e3e9f1) 60%, transparent 100%); }

/* --- Xpeed dark band: ambient accent glow, crisper formula chips --- */
.mg-arw-xpeed { background: radial-gradient(120% 150% at 85% -10%, rgba(0, 103, 177, 0.35), transparent 55%), #06121f; }
.mg-arw-formula code { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }

/* --- Feature cards + spec rows (landing & product): reveal-safe hovers --- */
.mg-js .mg-pdp__fcard[data-reveal] {
  transition: opacity .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    transform .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    box-shadow .4s ease, border-color .25s ease;
}
.mg-pdp__fcard { box-shadow: 0 1px 2px rgba(11, 19, 32, 0.03); background-image: radial-gradient(120% 90% at 85% -20%, rgba(0, 103, 177, 0.05), transparent 55%); }
.mg-pdp__fcard:hover { border-color: rgba(0, 103, 177, 0.28); }
[data-theme="dark"] .mg-pdp__fcard { background-image: radial-gradient(120% 90% at 85% -20%, rgba(84, 170, 230, 0.08), transparent 55%); }
.mg-js .mg-pdp__specrow[data-reveal] {
  transition: opacity .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    transform .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    background-color .2s ease;
}
.mg-pdp__specrow { padding-inline: 8px; margin-inline: -8px; border-radius: 10px; }
.mg-pdp__specrow:hover { background-color: rgba(0, 103, 177, 0.035); }
[data-theme="dark"] .mg-pdp__specrow:hover { background-color: rgba(84, 170, 230, 0.07); }

/* --- Media blocks: deeper frame on hover (image zoom lives in the base layer) --- */
.mg-pdp__block-media { transition: box-shadow .45s ease; }
.mg-pdp__block:hover .mg-pdp__block-media { box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11, 19, 32, 0.26)); }

/* --- Product page: ambient masthead, back gesture, chips, CTA depth --- */
.mg-pdp { background: radial-gradient(1100px 460px at 50% -140px, rgba(0, 103, 177, 0.05), transparent 62%); }
[data-theme="dark"] .mg-pdp { background: radial-gradient(1100px 460px at 50% -140px, rgba(45, 130, 195, 0.13), transparent 62%); }
.mg-pdp__back { display: inline-block; transition: opacity .2s ease, transform .25s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-pdp__back:hover { transform: translateX(4px); }
.mg-pdp__chips span { box-shadow: 0 1px 2px rgba(11, 19, 32, 0.04); }
.mg-pdp__chips span::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mg-pa, var(--mg-accent, #0067b1)); margin-inline-end: 7px; vertical-align: 1px; opacity: .8;
}
.mg-pdp__btn.primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 24px -14px rgba(0, 103, 177, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 24px -14px color-mix(in srgb, var(--mg-pa, var(--mg-accent, #0067b1)) 50%, transparent);
}
.mg-pdp__btn.primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 26px rgba(0, 103, 177, 0.3); }
.mg-pdp__btn.ghost:hover { background: rgba(0, 103, 177, 0.05); }
[data-theme="dark"] .mg-pdp__btn.ghost:hover { background: rgba(84, 170, 230, 0.1); }
.mg-pdp__btn:active { transform: scale(0.97); }
.mg-pdp__media { position: relative; }
.mg-pdp__media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(11, 19, 32, 0.07);
}
[data-theme="dark"] .mg-pdp__media::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.mg-pdp__media > img { transition: transform .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-pdp__media:hover > img { transform: scale(1.03); }

/* --- Product closing band + rich-text links --- */
.mg-pdp__bottom {
  border: 1px solid var(--mg-border, #e3e9f1);
  background: linear-gradient(180deg, #f7fbff 0%, var(--mg-surface, #f3f6fb) 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mg-surface, #f3f6fb) 40%, #fff) 0%, var(--mg-surface, #f3f6fb) 100%);
}
[data-theme="dark"] .mg-pdp__bottom { background: var(--mg-surface); }
.mg-pdp__bottom h2::after {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 99px; margin: 12px auto 0;
  background: var(--mg-pa, var(--mg-accent, #0067b1)); opacity: .85;
}
.mg-pdp__rich a {
  text-decoration: underline; text-decoration-color: rgba(0, 103, 177, 0.35);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}
.mg-pdp__rich a:hover { text-decoration-color: currentColor; }
[data-theme="dark"] .mg-pdp__rich a { color: #63b7ef; color: color-mix(in srgb, var(--mg-accent, #0067b1) 50%, #cfe8ff); }

/* --- Related products: reveal-safe lift + arrow nudge --- */
.mg-js .mg-related__card[data-reveal] {
  transition: opacity .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    transform .7s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    box-shadow .3s ease, border-color .2s ease;
}
.mg-related__card { box-shadow: 0 1px 2px rgba(11, 19, 32, 0.04); }
.mg-related__go svg { transition: transform .25s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-related__card:hover .mg-related__go svg { transform: translateX(-3px); }

/* --- FAQ: quiet depth + guided question hover --- */
.mg-faq__item { box-shadow: 0 1px 2px rgba(11, 19, 32, 0.03); }
.mg-faq__q { transition: color .2s ease; }
.mg-faq__q:hover { color: var(--mg-pa, var(--mg-accent, #0067b1)); }
[data-theme="dark"] .mg-faq__q:hover { color: #63b7ef; color: color-mix(in srgb, var(--mg-accent, #0067b1) 50%, #cfe8ff); }

/* --- Catalog: ambient hero (shared with the contact page), tactile cards --- */
.mg-cat-hero { background: radial-gradient(1100px 460px at 50% -140px, rgba(0, 103, 177, 0.055), transparent 62%); }
[data-theme="dark"] .mg-cat-hero { background: radial-gradient(1100px 460px at 50% -140px, rgba(45, 130, 195, 0.14), transparent 62%); }
.mg-cat-search { caret-color: var(--mg-accent, #0067b1); }
.mg-cat-search:hover:not(:focus) { border-color: #cfdbe9; }
[data-theme="dark"] .mg-cat-search:hover:not(:focus) { border-color: #33465f; }
.mg-cat-card__cat { border: 1px solid rgba(0, 103, 177, 0.14); }
.mg-cat-card__pdf { transition: transform .3s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-cat-card:hover .mg-cat-card__pdf { transform: scale(1.08); }
.mg-cat-card__dl { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.mg-cat-card__dl:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 24px rgba(0, 103, 177, 0.3); }
.mg-cat-card__dl:active { transform: scale(0.97); }
.mg-cat-card__dl svg { transition: transform .25s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-cat-card__dl:hover svg { transform: translateY(2px); }
/* Locked (members-only) download reads as locked, not as a primary action */
.mg-cat-card__dl--lock { background: linear-gradient(135deg, #5a6b7e, #46586c); }
.mg-cat-card__dl--lock:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 24px -8px rgba(11, 19, 32, 0.35); }

/* --- Contact: trustworthy info panel, focused form, framed map --- */
.mg-contact-info { box-shadow: 0 1px 2px rgba(11, 19, 32, 0.04), var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, 0.16)); }
.mg-contact-ic { box-shadow: 0 0 0 4px rgba(0, 103, 177, 0.05); transition: transform .3s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
a.mg-contact-row:hover .mg-contact-ic { transform: scale(1.08); }
[data-theme="dark"] .mg-contact-ic { background: rgba(84, 170, 230, 0.14); color: #63b7ef; color: color-mix(in srgb, var(--mg-accent, #0067b1) 50%, #cfe8ff); box-shadow: 0 0 0 4px rgba(84, 170, 230, 0.06); }
[data-theme="dark"] a.mg-contact-row:hover { background: rgba(255, 255, 255, 0.04); }
.mg-contact-formwrap { position: relative; box-shadow: 0 1px 2px rgba(11, 19, 32, 0.04), var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, 0.16)); }
.mg-contact-formwrap::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 103, 177, 0.22), 0 24px 60px -24px rgba(11, 19, 32, 0.22);
  opacity: 0; transition: opacity .3s ease;
}
.mg-contact-formwrap:focus-within::after { opacity: 1; }
[data-theme="dark"] .mg-contact-formwrap::after { box-shadow: inset 0 0 0 1px rgba(84, 170, 230, 0.3), 0 24px 60px -24px rgba(0, 0, 0, 0.65); }
.mg-contact-form input:hover:not(:focus),
.mg-contact-form select:hover:not(:focus),
.mg-contact-form textarea:hover:not(:focus) { border-color: #cfdbe9; }
[data-theme="dark"] .mg-contact-form input:hover:not(:focus),
[data-theme="dark"] .mg-contact-form select:hover:not(:focus),
[data-theme="dark"] .mg-contact-form textarea:hover:not(:focus),
[data-theme="dark"] .wpcf7-form input:hover:not(:focus),
[data-theme="dark"] .wpcf7-form select:hover:not(:focus),
[data-theme="dark"] .wpcf7-form textarea:hover:not(:focus) { border-color: #33465f; }
.mg-contact-form input::placeholder, .mg-contact-form textarea::placeholder,
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: var(--mg-muted, #5a6b7e); opacity: .6; }
.mg-contact-submit { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.mg-contact-submit:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 28px rgba(0, 103, 177, 0.32); }
.mg-contact-submit:active { transform: scale(0.97); }
.mg-contact-alert { border-inline-start-width: 3px; }
.mg-contact-map { box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11, 19, 32, 0.16)); }
.mg-contact-soc a:hover { transform: translateY(-2px); }

/* --- Focus rings (accent, offset — matches the layers above) --- */
.mg-pdp__btn:focus-visible, .mg-pdp__back:focus-visible, .mg-pdp__gitem:focus-visible,
.mg-pdp-slider__nav:focus-visible, .mg-pdp-slider__dot:focus-visible,
.mg-faq__q:focus-visible, .mg-related__card:focus-visible,
.mg-contact-row:focus-visible, .mg-contact-submit:focus-visible,
.mg-contact-soc a:focus-visible { outline: 2px solid var(--mg-accent, #0067b1); outline-offset: 2px; }

/* --- Reduced motion: this layer goes still --- */
@media (prefers-reduced-motion: reduce) {
  .mg-arw-badge, .mg-arw-fig, .mg-arw-fig img,
  .mg-pdp__block-media, .mg-pdp__back, .mg-pdp__media > img,
  .mg-related__go svg, .mg-faq__q, .mg-pdp__rich a,
  .mg-cat-card__pdf, .mg-cat-card__dl svg,
  .mg-contact-ic, .mg-contact-formwrap::after,
  .mg-js .mg-pdp__fcard[data-reveal], .mg-js .mg-pdp__specrow[data-reveal],
  .mg-js .mg-related__card[data-reveal] { transition: none; }
  .mg-arw-badge:hover, .mg-arw-fig:hover, .mg-arw-fig:hover img,
  .mg-pdp__back:hover, .mg-pdp__media:hover > img,
  .mg-pdp__btn:active, .mg-cat-card__dl:active, .mg-contact-submit:active,
  .mg-related__card:hover .mg-related__go svg,
  .mg-cat-card:hover .mg-cat-card__pdf, .mg-cat-card__dl:hover svg,
  a.mg-contact-row:hover .mg-contact-ic, .mg-contact-soc a:hover { transform: none; }
}

/* ===== Global system — visual polish ===== */
/* Final cohesion pass on the site-wide chrome: nav-shell internals, the
 * fullscreen overlay menu, footer, marquee, scroll-progress bar, cursor,
 * FAB / back-to-top, and the shared button / link / selection / focus
 * affordances. Token-driven, RTL-logical, dark-mode aware, reduced-motion
 * safe. Strictly visual: no geometry rules — .mg-pdp-headwrap, the
 * overflow/display fixes and the [data-reveal] base rules are untouched
 * (footer columns carry data-reveal, so hover motion there lives on the
 * inner links only, never on the revealed wrappers). */

/* --- Nav shell: crisper glass, layered elevation (visual only) --- */
.mg-nav {
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow:
    0 1px 2px rgba(11, 19, 32, 0.07),
    0 14px 38px -12px rgba(11, 19, 32, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* :where() keeps this at (0,1,0) so the dark-frosted blog/account nav rules
   and the earlier [data-theme] background rule always keep the upper hand. */
[data-theme="dark"] :where(.mg-nav) {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 14px 38px -12px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.mg-nav__brand { transition: opacity .25s ease; }
.mg-nav__brand:hover { opacity: .82; }
.mg-nav__logo { transition: transform .35s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-nav__brand:hover .mg-nav__logo { transform: scale(1.03); }
.mg-nav__cta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.mg-nav__cta:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 22px rgba(0, 103, 177, 0.32); }
.mg-menu-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.mg-menu-btn__bars span { transition: width .3s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-menu-btn:hover .mg-menu-btn__bars span:nth-child(2) { width: 12px; }
.mg-theme-toggle, .mg-nav__acct, .mg-nav__phone {
  transition: color .2s ease, border-color .2s ease, background-color .2s ease,
    transform .25s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
.mg-theme-toggle:active, .mg-nav__acct:active, .mg-nav__phone:active { transform: scale(.92); }
.mg-langsw { box-shadow: inset 0 1px 2px rgba(11, 19, 32, 0.04); }

/* --- Overlay menu: framed badge, guided search, calmer close --- */
.mg-overlay__badge { box-shadow: 0 8px 22px -12px rgba(11, 19, 32, 0.25); }
.mg-overlay__badge::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mg-accent, #0067b1); margin-inline-end: 8px; vertical-align: 1px; opacity: .85;
}
.mg-overlay__close:active { transform: rotate(90deg) scale(.92); }
.mg-overlay__search { transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.mg-overlay__search:focus-within {
  border-color: var(--mg-accent, #0067b1);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 4px rgba(0, 103, 177, 0.12);
}
[data-theme="dark"] .mg-overlay__search:focus-within {
  border-color: rgba(84, 170, 230, 0.5);
  background: rgba(19, 29, 44, 0.92);
  box-shadow: 0 0 0 4px rgba(84, 170, 230, 0.16);
}
.mg-overlay__search button {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: box-shadow .25s ease, transform .2s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1));
}
.mg-overlay__search button:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 18px -6px rgba(0, 103, 177, 0.5); }
.mg-overlay__search button:active { transform: scale(.96); }
.mg-overlay__foot a { text-underline-offset: 4px; transition: color .2s ease; }

/* --- Footer: accent-bar column headings, forward link nudge, social lift --- */
.mg-footer :is(h2,h4)::after {
  content: ""; display: block; width: 22px; height: 3px; border-radius: 99px; margin-top: 9px;
  background: linear-gradient(90deg, var(--mg-accent, #0067b1), rgba(0, 103, 177, 0.22)); opacity: .9;
}
[data-theme="dark"] .mg-footer :is(h2,h4)::after { background: linear-gradient(90deg, #5fb0e8, rgba(95, 176, 232, 0.2)); }
.mg-footer a { transition: color .2s ease, transform .25s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)); }
.mg-footer a:hover { transform: translateX(-3px); }
.mg-footer .mg-bento__social a {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
    transform .25s var(--mg-ease, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow .25s ease;
}
.mg-footer .mg-bento__social a:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(0, 103, 177, 0.45); }
.mg-pdp-footwrap {
  background: var(--mg-surface, #f3f6fb);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mg-surface, #f3f6fb) 50%, var(--mg-bg, #fff)) 0%, var(--mg-surface, #f3f6fb) 100%);
}

/* --- Marquee: pause is in the base layer; hovered word answers in accent --- */
.mg-marquee__item { transition: color .3s ease; }
.mg-marquee__item:hover { color: var(--mg-accent, #0067b1); }
[data-theme="dark"] .mg-marquee__item:hover { color: #63b7ef; color: color-mix(in srgb, var(--mg-accent, #0067b1) 50%, #cfe8ff); }
.mg-marquee__dot { opacity: .85; }

/* --- Scroll progress: slimmer bar, softer glow (still reads on blue panels) --- */
.mg-progress { height: 3px; }
.mg-progress__bar { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), 0 0 8px rgba(54, 182, 255, 0.5); }

/* --- Custom cursor: soft halo on the dot --- */
.mg-cursor-dot { box-shadow: 0 0 10px rgba(0, 103, 177, 0.35); }

/* --- Back-to-top + quick-contact FAB: lift, sheen, tactile items --- */
.mg-totop.is-on:hover { transform: translateY(-3px); }
.mg-fab__toggle { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 30px rgba(0, 103, 177, 0.42); }
.mg-fab.is-open .mg-fab__toggle { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 30px rgba(11, 19, 32, 0.4); }
.mg-fab__item {
  transition: opacity .25s ease, transform .25s var(--mg-ease, ease),
    border-color .2s ease, box-shadow .25s ease;
}
.mg-fab.is-open .mg-fab__item:hover { transform: translateY(-2px); border-color: rgba(0, 103, 177, 0.35); }

/* --- Button consistency: top highlight on the remaining solid CTAs --- */
.wpcf7-submit, .mg-news__form button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.wpcf7-submit:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 26px rgba(0, 103, 177, 0.3); }

/* --- Global type + selection --- */
.mg-hero__title, .mg-stack__title, .mg-hx__h { text-wrap: balance; }
[data-theme="dark"] ::selection { background: #2d82c3; background: color-mix(in srgb, var(--mg-accent, #0067b1) 72%, #7cc0f2); color: #fff; }

/* --- Focus visibility: accent ring for chrome that lacked one --- */
.mg-nav__brand:focus-visible, .mg-nav__phone:focus-visible, .mg-nav__acct:focus-visible,
.mg-menu-btn:focus-visible, .mg-theme-toggle:focus-visible, .mg-langsw__btn:focus-visible,
.mg-overlay__close:focus-visible, .mg-overlay__links a:focus-visible,
.mg-overlay__foot a:focus-visible, .mg-overlay__search button:focus-visible,
.mg-footer a:focus-visible, .mg-footer .mg-bento__social a:focus-visible,
.mg-totop:focus-visible, .mg-fab__toggle:focus-visible, .mg-fab__item:focus-visible,
.mg-bento__card:focus-visible, .mg-cinfo__card:focus-visible,
.elementor-button:focus-visible, .wpcf7-submit:focus-visible,
.mg-crumbs a:focus-visible { outline: 2px solid var(--mg-accent, #0067b1); outline-offset: 3px; }
/* Light ring on permanently dark surfaces (hero, stack panels, showcase, cookie) */
.mg-hero__btn:focus-visible, .mg-hero__explore:focus-visible,
.mg-hero__socials a:focus-visible, .mg-hero__scroll:focus-visible,
.mg-stack__cta:focus-visible, .mg-hx__link:focus-visible,
.mg-news-hero .mg-crumbs a:focus-visible { outline: 2px solid #7cc0f2; outline-offset: 3px; }
[data-theme="dark"] .mg-overlay__close:focus-visible,
[data-theme="dark"] .mg-overlay__links a:focus-visible,
[data-theme="dark"] .mg-overlay__foot a:focus-visible { outline-color: #7cc0f2; }
/* White ring on the solid-blue newsletter band */
.mg-news__form input[type=email]:focus-visible, .mg-news__form button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- Reduced motion: the global layer goes still --- */
@media (prefers-reduced-motion: reduce) {
  .mg-nav, .mg-nav__brand, .mg-nav__logo, .mg-menu-btn__bars span,
  .mg-theme-toggle, .mg-nav__acct, .mg-nav__phone, .mg-overlay__search, .mg-overlay__search button,
  .mg-footer a, .mg-footer .mg-bento__social a, .mg-marquee__item, .mg-fab__item { transition: none; }
  .mg-nav__brand:hover .mg-nav__logo,
  .mg-theme-toggle:active, .mg-nav__acct:active, .mg-nav__phone:active,
  .mg-overlay__close:active, .mg-overlay__search button:active,
  .mg-footer a:hover, .mg-footer .mg-bento__social a:hover,
  .mg-totop.is-on:hover, .mg-fab.is-open .mg-fab__item:hover { transform: none; }
  .mg-menu-btn:hover .mg-menu-btn__bars span:nth-child(2) { width: 18px; }
}

/* ===== Homepage articles band ===== */
.mg-home-articles { background: linear-gradient(180deg, var(--mg-surface, #f3f6fb), #fff); padding: clamp(56px, 7vw, 96px) 22px; border-top: 1px solid var(--mg-border, #e3e9f1); }
.mg-home-articles__wrap { max-width: 1200px; margin: 0 auto; }
.mg-home-articles__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.mg-home-articles__eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .03em; color: var(--mg-accent, #0067b1); background: rgba(0,103,177,.08); padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; }
.mg-home-articles__head h2 { margin: 0; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.3; color: var(--mg-text, #0b1320); }
.mg-home-articles__head h2::after { content: ""; display: block; width: 54px; height: 3px; margin-top: 14px; border-radius: 3px; background: linear-gradient(90deg, var(--mg-accent, #0067b1), transparent); }
.mg-home-articles__head > div p { margin: 12px 0 0; color: var(--mg-muted, #5a6b7e); font-size: 16px; line-height: 1.9; max-width: 60ch; }
.mg-home-articles__all { flex: none; color: var(--mg-accent, #0067b1); font-weight: 700; font-size: 15px; text-decoration: none; padding: 11px 20px; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 999px; background: #fff; transition: transform .2s var(--mg-ease, ease), border-color .2s, box-shadow .2s; }
.mg-home-articles__all:hover { transform: translateY(-2px); border-color: var(--mg-accent, #0067b1); box-shadow: 0 12px 26px -12px rgba(0,103,177,.4); }
.mg-home-articles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.mg-hart { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 18px; overflow: hidden; text-decoration: none; box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.14)); transition: transform .3s var(--mg-ease, ease), box-shadow .3s, border-color .3s; }
.mg-hart:hover { transform: translateY(-6px); border-color: rgba(0,103,177,.28); box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11,19,32,.26)); }
.mg-hart__thumb { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--mg-surface, #f3f6fb); overflow: hidden; }
.mg-hart__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--mg-ease, ease); }
.mg-hart:hover .mg-hart__thumb img { transform: scale(1.05); }
.mg-hart__cat { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; background: rgba(11,19,32,.72); color: #fff; font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mg-hart__body { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; flex: 1; }
.mg-hart__title { font-size: 16.5px; font-weight: 800; line-height: 1.6; color: var(--mg-text, #0b1320); transition: color .2s ease; }
.mg-hart:hover .mg-hart__title { color: var(--mg-accent, #0067b1); }
.mg-hart__ex { font-size: 13.5px; line-height: 1.95; color: var(--mg-muted, #5a6b7e); flex: 1; }
.mg-hart__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--mg-border, #e3e9f1); }
.mg-hart__date { font-size: 12px; color: var(--mg-muted, #5a6b7e); font-feature-settings: "tnum"; }
.mg-hart__more { font-size: 13px; font-weight: 700; color: var(--mg-accent, #0067b1); transition: transform .2s var(--mg-ease, ease); }
.mg-hart:hover .mg-hart__more { transform: translateX(-4px); }
[data-theme="dark"] .mg-home-articles { background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); border-color: var(--mg-border); }
[data-theme="dark"] .mg-hart { background: var(--mg-surface); border-color: var(--mg-border); }
[data-theme="dark"] .mg-home-articles__all { background: var(--mg-surface); }
@media (max-width: 1000px) { .mg-home-articles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mg-home-articles__grid { grid-template-columns: 1fr; } .mg-home-articles__head { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .mg-hart, .mg-hart__thumb img, .mg-hart__more, .mg-home-articles__all { transition: none; } .mg-hart:hover { transform: none; } .mg-hart:hover .mg-hart__thumb img { transform: none; } }
.mg-order__track { font-size: 11px; color: var(--mg-muted, #5a6b7e); direction: ltr; display: inline-block; margin-top: 3px; font-feature-settings: "tnum"; }

/* Site pop-up / announcement */
.mg-popup { position: fixed; inset: 0; z-index: 100000; display: none; }
.mg-popup.is-open { display: block; }
.mg-popup__backdrop { position: absolute; inset: 0; background: rgba(11,19,32,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s ease; }
.mg-popup.is-open .mg-popup__backdrop { opacity: 1; }
.mg-popup__box { position: absolute; background: #fff; box-shadow: var(--mg-shadow-lg, 0 26px 64px -22px rgba(11,19,32,.4)); overflow: hidden; }
.mg-popup__close { position: absolute; inset-block-start: 10px; inset-inline-end: 12px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: #0b1320; font-size: 22px; line-height: 1; cursor: pointer; }
.mg-popup__close:hover { background: #fff; }
.mg-popup__media img { width: 100%; height: auto; display: block; max-height: 260px; object-fit: cover; }
.mg-popup__body { padding: 24px 26px 26px; }
.mg-popup__body h3 { margin: 0 0 10px; font-size: 20px; font-weight: 800; color: var(--mg-text, #0b1320); }
.mg-popup__text { color: var(--mg-muted, #5a6b7e); line-height: 1.95; font-size: 15px; }
.mg-popup__cta { margin-top: 16px; }
/* Modal (centered) */
.mg-popup--modal .mg-popup__box { inset-inline-start: 50%; inset-block-start: 50%; transform: translate(50%, -46%) scale(.96); opacity: 0; width: min(440px, 92vw); border-radius: 20px; transition: transform .35s var(--mg-ease, cubic-bezier(0.23,1,0.32,1)), opacity .3s ease; }
[dir="ltr"] .mg-popup--modal .mg-popup__box { transform: translate(-50%, -46%) scale(.96); }
.mg-popup--modal.is-open .mg-popup__box { transform: translate(50%, -50%) scale(1); opacity: 1; }
[dir="ltr"] .mg-popup--modal.is-open .mg-popup__box { transform: translate(-50%, -50%) scale(1); }
/* Banner (bottom) */
.mg-popup--banner .mg-popup__backdrop { display: none; }
.mg-popup--banner { pointer-events: none; }
.mg-popup--banner .mg-popup__box { pointer-events: auto; inset-inline: 0; inset-block-end: 0; margin-inline: auto; width: min(960px, 96vw); border-radius: 18px 18px 0 0; display: flex; align-items: center; gap: 18px; transform: translateY(110%); transition: transform .4s var(--mg-ease, cubic-bezier(0.23,1,0.32,1)); }
.mg-popup--banner.is-open .mg-popup__box { transform: translateY(0); }
.mg-popup--banner .mg-popup__media { flex: none; width: 120px; }
.mg-popup--banner .mg-popup__media img { max-height: 90px; }
.mg-popup--banner .mg-popup__body { padding: 16px 22px; flex: 1; }
.mg-popup--banner .mg-popup__body h3 { font-size: 17px; margin-bottom: 4px; }
.mg-popup--banner .mg-popup__cta { margin-top: 10px; }
[data-theme="dark"] .mg-popup__box { background: var(--mg-surface); }
@media (max-width: 560px) { .mg-popup--banner .mg-popup__box { flex-direction: column; text-align: center; } .mg-popup--banner .mg-popup__media { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .mg-popup__box, .mg-popup__backdrop { transition: none !important; } }

/* Implant-parts builder in the order form */
.mg-imp { margin: 8px 0 24px; }
.mg-imp__lead { color: var(--mg-muted, #5a6b7e); font-size: 13.5px; line-height: 1.9; margin: 0 0 12px; }
.mg-imp-card { border: 1px solid var(--mg-border, #e3e9f1); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; background: #fff; }
.mg-imp-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; color: var(--mg-text, #0b1320); }
.mg-imp-del { width: 32px; height: 32px; border: 1px solid var(--mg-border, #e3e9f1); background: var(--mg-surface, #f3f6fb); border-radius: 8px; color: #b23b3b; font-size: 18px; cursor: pointer; line-height: 1; padding: 0; }
.mg-imp-del:hover { background: rgba(194,59,59,.08); }
.mg-imp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.mg-imp-f { display: grid; gap: 5px; }
.mg-imp-f > span { font-size: 12px; color: var(--mg-muted, #5a6b7e); font-weight: 600; }
.mg-imp-f--wide { grid-column: 1 / -1; }
.mg-imp-f select, .mg-imp-f input { height: 40px; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 9px; padding: 0 10px; font: inherit; font-size: 13.5px; background: var(--mg-surface, #f3f6fb); color: var(--mg-text, #0b1320); box-sizing: border-box; width: 100%; }
.mg-imp-f select:focus, .mg-imp-f input:focus { outline: none; border-color: var(--mg-accent, #0067b1); background: #fff; box-shadow: 0 0 0 3px rgba(0,103,177,.12); }
[data-theme="dark"] .mg-imp-card { background: var(--mg-surface); }

/* Proforma invoice */
.mg-proforma-wrap { max-width: 800px; }
.mg-proforma__actions { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.mg-proforma { background: #fff; border: 1px solid var(--mg-border, #e3e9f1); border-radius: 16px; padding: clamp(20px, 4vw, 34px); box-shadow: var(--mg-shadow, 0 10px 40px -14px rgba(11,19,32,.14)); color: var(--mg-text, #0b1320); }
.mg-proforma__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 2px solid var(--mg-accent, #0067b1); padding-bottom: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.mg-proforma__brand { font-size: 22px; font-weight: 800; color: var(--mg-accent, #0067b1); }
.mg-proforma__meta { display: grid; gap: 3px; font-size: 13px; color: var(--mg-muted, #5a6b7e); text-align: end; }
.mg-proforma__meta b { color: var(--mg-text, #0b1320); font-size: 16px; }
.mg-proforma__party { font-size: 14px; margin-bottom: 16px; color: var(--mg-text, #0b1320); }
.mg-proforma__table { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 13.5px; }
.mg-proforma__table th, .mg-proforma__table td { border: 1px solid var(--mg-border, #e3e9f1); padding: 9px 12px; text-align: start; }
.mg-proforma__table thead th { background: var(--mg-surface, #f3f6fb); font-weight: 700; }
.mg-proforma__total { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--mg-surface, #f3f6fb); border-radius: 12px; font-size: 15px; }
.mg-proforma__total b { font-size: 20px; color: var(--mg-accent, #0067b1); }
.mg-proforma__hint { font-size: 12.5px; color: var(--mg-muted, #5a6b7e); margin: 10px 0 0; line-height: 1.9; }
.mg-proforma__foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--mg-border, #e3e9f1); text-align: center; color: var(--mg-muted, #5a6b7e); font-size: 12.5px; }
[data-theme="dark"] .mg-proforma { background: var(--mg-surface); }
@media print {
  .mg-pdp-headwrap, .mg-pdp-footwrap, .mg-proforma__actions, .mg-fab, .mg-totop, .mg-scroll-progress, .mg-cursor, .mg-marquee { display: none !important; }
  body, .mg-pdp-body { background: #fff !important; }
  .mg-account { padding: 0 !important; }
  .mg-proforma { border: 0; box-shadow: none; padding: 0; }
}

/* Order message thread */
.mg-thread { display: grid; gap: 10px; margin: 12px 0 4px; }
.mg-thread__empty { color: var(--mg-muted, #5a6b7e); font-size: 14px; }
.mg-msg { max-width: 82%; padding: 10px 15px; border-radius: 14px; }
.mg-msg--cust { justify-self: start; background: var(--mg-surface, #f3f6fb); border: 1px solid var(--mg-border, #e3e9f1); border-start-start-radius: 4px; }
.mg-msg--staff { justify-self: end; background: rgba(0,103,177,.1); border: 1px solid rgba(0,103,177,.22); border-start-end-radius: 4px; }
.mg-msg__meta { font-size: 11.5px; color: var(--mg-muted, #5a6b7e); margin-bottom: 4px; }
.mg-msg__text { font-size: 14px; line-height: 1.85; color: var(--mg-text, #0b1320); white-space: pre-wrap; }
[data-theme="dark"] .mg-msg--cust { background: rgba(255,255,255,.05); }
.mg-proforma__qr { display: grid; gap: 4px; justify-items: center; align-content: start; }
.mg-proforma__qr img { border: 1px solid var(--mg-border, #e3e9f1); border-radius: 8px; background: #fff; padding: 4px; }
.mg-proforma__qr span { font-size: 11px; color: var(--mg-muted, #5a6b7e); }
.mg-order__submit { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------------------------
 * Wide-screen and browser-zoom guardrails
 *
 * Above 1600 CSS pixels the landing header grows as one composition. This
 * prevents the product image and title becoming two small, distant islands on
 * ultra-wide displays or when the browser is zoomed out.
 * ----------------------------------------------------------------------- */
@media (min-width: 1600px) {
  .mg-arw-hero { min-height: clamp(680px, 70vh, 900px); padding-inline: 4vw; }
  html:not([data-theme="dark"]) .mg-arw-hero__media {
    left: max(0px, calc((100vw - 2400px) / 2));
    width: min(43vw, 1100px);
  }
  .mg-arw-hero__inner {
    width: min(88vw, 2400px);
    max-width: none;
    min-height: clamp(500px, 58vh, 720px);
    padding-left: 50%;
  }
  .mg-arw-hero__title {
    max-width: 18ch;
    font-size: clamp(64px, 3.2vw, 104px);
    line-height: 1.2;
  }
  .mg-crumbs { margin-bottom: 22px; }
  .mg-crumbs ol { gap: 12px; font-size: clamp(16px, .72vw, 19px); }

  [data-theme="dark"] .mg-arw-hero__media { left: 0; width: 100%; }
  [data-theme="dark"] .mg-arw-hero__inner { padding-left: 50%; }
}

/* WordPress' logged-in toolbar is fixed too. Keep the floating site header
   below it instead of allowing the two layers to overlap. */
@media (min-width: 783px) {
  body.admin-bar .mg-pdp-headwrap,
  body.admin-bar #site-header { top: 40px !important; }
}
@media (min-width: 601px) and (max-width: 782px) {
  body.admin-bar .mg-pdp-headwrap,
  body.admin-bar #site-header { top: 54px !important; }
}


/* ---------- Official wordmark: one image per colour scheme (mg_brand_logo_html) ---------- */
.mg-brand-logo--on-dark { display: none !important; }
[data-theme="dark"] .mg-brand-logo--on-light { display: none !important; }
[data-theme="dark"] .mg-brand-logo--on-dark { display: block !important; }
.mg-nav__brand.has-logo .mg-brand-logo { width: auto; height: 30px; max-width: 168px; object-fit: contain; object-position: right center; }
@media (max-width: 720px) { .mg-nav__brand.has-logo .mg-brand-logo { height: 24px; max-width: 128px; } }

/* The installed-app sign-in header (mg_account_auth) exists only inside the app; see pwa.css. */
.mg-auth__app { display: none; }