/* Metric Designs: global styles, hero slider, header, footer and scroll effects. */
:root {
  --bg: #0B0C23; --bg2: #10122D; --card: #16183A; --gold: #D3BD20; --gold2: #E8D75A;
  --ink: #fff; --body: #B8BAD6; --line: rgba(255,255,255,.10); --ease: cubic-bezier(.22,.61,.36,1);
}
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { background: var(--bg); color: var(--body); font-family: "Poppins", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.elementor-template-canvas { background: var(--bg); }
.elementor-widget-html, .elementor-widget-container { max-width: 100%; }
.mx-sec, .mx-in { max-width: 100%; }
.mx-sec { position: relative; overflow: hidden; --width: auto; }
.e-con.mx-in, .e-con.mx-in > .e-con-inner { --width: 100%; }
h1, h2, h3, h4, h5, h6 { font-family: "Poppins", sans-serif; }
a { transition: color .25s, background .25s, border-color .25s, transform .3s var(--ease); }


/* header */
.mx-chrome { position: fixed !important; top: 0; left: 0; right: 0; z-index: 9990; --width: 100%; transition: background .35s, box-shadow .35s, backdrop-filter .35s; }
.mx-chrome.is-solid { background: rgba(11,12,35,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.mx-header-in { max-width: 1320px; margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; gap: 36px; transition: padding .35s; }
.mx-chrome.is-solid .mx-header-in { padding-top: 10px; padding-bottom: 10px; }
.mx-logo img { display: block; height: 54px; width: auto; transition: height .35s; }
.mx-chrome.is-solid .mx-logo img { height: 44px; }
.mx-nav { margin-left: auto; }
.mx-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 34px; }
.mx-nav a { color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .4px; text-decoration: none; position: relative; padding: 6px 0; }
.mx-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.mx-nav a:hover::after, .mx-nav a.is-current::after { transform: scaleX(1); }
.mx-header-cta { background: var(--gold); color: var(--bg); font-weight: 600; font-size: 13px; letter-spacing: .5px; padding: 11px 24px; border-radius: 100px; text-decoration: none; white-space: nowrap; }
.mx-header-cta:hover { background: var(--gold2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(211,189,32,.28); color: var(--bg); }
.mx-burger { display: none; margin-left: auto; width: 44px; height: 44px; background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; cursor: pointer; padding: 0; position: relative; }
.mx-burger i { position: absolute; left: 12px; right: 12px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s, top .3s; }
.mx-burger i:nth-child(1) { top: 14px; } .mx-burger i:nth-child(2) { top: 21px; } .mx-burger i:nth-child(3) { top: 28px; }
button.mx-burger, button.mx-burger:hover, button.mx-burger:focus, button.mx-burger:active { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); outline: 0; box-shadow: none; }
button.mx-burger:hover, button.mx-burger:focus-visible, body.mx-menu-open button.mx-burger { border-color: var(--gold); }
button.mx-arrow, button.mx-arrow:focus, button.mx-arrow:active { background: rgba(11,12,35,.4); color: #fff; border-color: rgba(255,255,255,.4); outline: 0; }
button.mx-arrow:hover, button.mx-arrow:focus-visible { background: var(--gold); color: var(--bg); border-color: var(--gold); }
body.mx-menu-open .mx-burger i:nth-child(1) { top: 21px; transform: rotate(45deg); }
body.mx-menu-open .mx-burger i:nth-child(2) { opacity: 0; }
body.mx-menu-open .mx-burger i:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* hero slider */
.mx-herowrap { --width: 100%; }
.mx-hero { position: relative; min-height: 100vh; min-height: 100svh; height: 100svh; max-height: 980px; background: var(--bg); overflow: hidden; }
.mx-slides, .mx-slide { position: absolute; inset: 0; }
.mx-slide { opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease), visibility 1.1s; z-index: 1; }
.mx-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.mx-slide-bg { background-color: var(--bg); position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); }
.mx-slide.is-active .mx-slide-bg { animation: mx-kb 9s ease-out forwards; }
@keyframes mx-kb { from { transform: scale(1.02); } to { transform: scale(1.14); } }
.mx-slide::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(11,12,35,.94) 0%, rgba(11,12,35,.72) 42%, rgba(11,12,35,.2) 100%), linear-gradient(0deg, rgba(11,12,35,.85) 0%, rgba(11,12,35,0) 38%); }
.mx-slide::after { content: ""; position: absolute; z-index: 1; width: 60vw; height: 60vw; left: -18vw; bottom: -30vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(123,63,228,.28), rgba(214,60,181,.08) 55%, transparent 70%); }
.mx-slide-copy { position: absolute; z-index: 3; left: max(28px, calc((100vw - 1240px) / 2)); right: 28px; top: 50%; transform: translateY(-46%); max-width: 720px; }
.mx-slide-copy > * { opacity: 0; transform: translateY(34px); }
.mx-slide.is-active .mx-slide-copy > * { animation: mx-up .9s var(--ease) forwards; }
.mx-slide.is-active .mx-slide-copy > :nth-child(1) { animation-delay: .25s; }
.mx-slide.is-active .mx-slide-copy > :nth-child(2) { animation-delay: .4s; }
.mx-slide.is-active .mx-slide-copy > :nth-child(3) { animation-delay: .55s; }
.mx-slide.is-active .mx-slide-copy > :nth-child(4) { animation-delay: .7s; }
@keyframes mx-up { to { opacity: 1; transform: none; } }
.mx-slide-eyebrow { display: inline-block; color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 20px; }
.mx-slide-title { color: #fff; font-size: clamp(34px, 5.4vw, 70px); line-height: 1.08; font-weight: 600; margin: 0 0 22px; letter-spacing: -.5px; }
.mx-slide-text { color: #D8DAEE; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; margin: 0 0 34px; max-width: 560px; }
.mx-slide-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.mx-b { display: inline-block; padding: 15px 32px; border-radius: 100px; font-size: 14px; font-weight: 600; letter-spacing: .5px; text-decoration: none; }
.mx-b-solid { background: var(--gold); color: var(--bg); }
.mx-b-solid:hover { background: var(--gold2); color: var(--bg); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(211,189,32,.3); }
.mx-b-ghost { color: #fff; border: 1px solid rgba(255,255,255,.45); }
.mx-b-ghost:hover { background: #fff; color: var(--bg); transform: translateY(-3px); }
.mx-hero-ctrl { position: absolute; z-index: 5; right: calc(max(28px, (100vw - 1240px) / 2) + 76px); bottom: 56px; display: flex; align-items: center; gap: 22px; }
.mx-arrow { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(11,12,35,.4); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; backdrop-filter: blur(6px); transition: background .25s, color .25s, transform .3s var(--ease); }
.mx-arrow:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); transform: scale(1.08); }
.mx-count { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 14px; font-weight: 500; }
.mx-count .mx-tot { opacity: .6; }
.mx-bar { position: relative; width: 64px; height: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.mx-bar i { position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.mx-hero.is-play .mx-bar i { animation: mx-bar var(--dur, 6.5s) linear forwards; }
@keyframes mx-bar { to { transform: scaleX(1); } }

/* ticker */
.mx-ticker { overflow: hidden; background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.mx-ticker-track { display: flex; width: max-content; align-items: center; animation: mx-tick 38s linear infinite; }
.mx-ticker:hover .mx-ticker-track { animation-play-state: paused; }
.mx-ticker span { color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; white-space: nowrap; }
.mx-ticker em { display: inline-block; width: 8px; height: 8px; margin: 0 34px; background: var(--gold); transform: rotate(45deg); }
@keyframes mx-tick { to { transform: translateX(-50%); } }

/* reveal on scroll */
.mx-js .mx-reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); will-change: opacity, transform; }
.mx-js .mx-reveal.is-in { opacity: 1; transform: none; }
.elementor-editor-active .mx-reveal { opacity: 1 !important; transform: none !important; }

/* shared pieces */
.mx-eyebrow .elementor-heading-title { position: relative; padding-left: 38px; }
.mx-eyebrow .elementor-heading-title::before { content: ""; position: absolute; left: 0; top: 50%; width: 26px; height: 2px; background: var(--gold); }
.elementor-widget-heading.mx-eyebrow[class*="elementor-align-center"] .elementor-heading-title { padding-left: 0; }
.mx-eyebrow-c .elementor-heading-title { display: inline-flex; align-items: center; gap: 14px; padding-left: 0; }
.mx-eyebrow-c .elementor-heading-title::before, .mx-eyebrow-c .elementor-heading-title::after { content: ""; position: static; display: block; width: 26px; height: 2px; background: var(--gold); transform: none; }
.mx-btn .elementor-button { transition: transform .3s var(--ease), background .25s, box-shadow .3s, color .25s; }
.mx-btn-solid .elementor-button:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(211,189,32,.28); }
.mx-btn-ghost .elementor-button:hover { background: #fff; border-color: #fff; transform: translateY(-3px); }
.mx-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; transition: transform .45s var(--ease), border-color .35s, box-shadow .45s; }
.mx-card:hover { transform: translateY(-6px); border-color: rgba(211,189,32,.5); box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.mx-in { --width: 100%; width: 100%; }

/* intro */
.mx-intro::before { content: ""; position: absolute; right: -15vw; top: -10vw; width: 50vw; height: 50vw; border-radius: 50%; background: radial-gradient(circle, rgba(123,63,228,.18), transparent 65%); pointer-events: none; }
.mx-visual { position: relative; padding-bottom: 60px; }
.mx-visual > img { width: 86%; aspect-ratio: 4/5; object-fit: cover; border-radius: 22px; display: block; }
.mx-visual-b { position: absolute; right: 0; bottom: 0; width: 52%; border-radius: 18px; border: 6px solid var(--bg); overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.45); }
.mx-visual-b img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.mx-visual-tag { position: absolute; left: 18px; top: 18px; background: rgba(11,12,35,.82); backdrop-filter: blur(8px); color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; padding: 9px 16px; border-radius: 100px; border: 1px solid rgba(211,189,32,.4); }
.mx-values { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mx-values li { position: relative; padding-left: 30px; color: #E6E7F5; font-size: 16px; }
.mx-values li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }

/* services */
.mx-services::before { content: ""; position: absolute; left: -15vw; bottom: -20vw; width: 50vw; height: 50vw; border-radius: 50%; background: radial-gradient(circle, rgba(214,60,181,.12), transparent 65%); pointer-events: none; }
.mx-svc { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; text-decoration: none; transition: transform .5s var(--ease), border-color .35s, box-shadow .5s; }
.mx-svc:hover { transform: translateY(-8px); border-color: rgba(211,189,32,.55); box-shadow: 0 28px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(211,189,32,.15); }
.mx-svc-img { display: block; aspect-ratio: 16/11; overflow: hidden; }
.mx-svc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.mx-svc:hover .mx-svc-img img { transform: scale(1.08); }
.mx-svc-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 28px; flex: 1; }
.mx-svc-body h3 { color: #fff; font-size: 20px; font-weight: 600; margin: 0; }
.mx-svc-body p { color: var(--body); font-size: 15px; line-height: 1.65; margin: 0; flex: 1; }
.mx-more { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-top: 8px; }
.mx-more i { display: block; width: 26px; height: 2px; background: currentColor; position: relative; transition: width .35s var(--ease); }
.mx-more i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.mx-svc:hover .mx-more i { width: 44px; }
.mx-svcgrid > .elementor-element { height: 100%; }
.mx-svcgrid .elementor-widget-container, .mx-svcgrid .elementor-widget-html { height: 100%; }

/* advantage */
.mx-adv .elementor-icon { transition: transform .5s var(--ease); }
.mx-adv:hover .elementor-icon { transform: scale(1.15) rotate(-6deg); }
.mx-adv { height: 100%; }

/* work */
.mx-work { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 18px; }
.mx-tile { position: relative; overflow: hidden; border-radius: 18px; display: block; background: var(--card); }
.mx-tile.wide { grid-column: span 2; } .mx-tile.tall { grid-row: span 2; }
.mx-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.mx-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,12,35,.92) 0%, rgba(11,12,35,0) 55%); opacity: .75; transition: opacity .4s; }
.mx-tile:hover img { transform: scale(1.1); }
.mx-tile:hover::after { opacity: 1; }
.mx-tile-cap { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; display: flex; flex-direction: column; gap: 4px; transition: transform .45s var(--ease); }
.mx-tile-cap small { text-shadow: 0 1px 8px rgba(0,0,0,.7); color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.mx-tile-cap b { color: #fff; font-size: 18px; font-weight: 600; transform: translateY(8px); opacity: 0; transition: transform .45s var(--ease), opacity .45s; }
.mx-tile:hover .mx-tile-cap b { transform: none; opacity: 1; }


/* range */
.mx-range-card { height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: transform .45s var(--ease), border-color .35s, background .35s; }
.mx-range-card:hover { transform: translateY(-5px); border-color: rgba(211,189,32,.5); background: #1B1E47; }
.mx-range-card h3 { color: #fff; font-size: 17px; font-weight: 600; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mx-range-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mx-range-card li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--body); }
.mx-range-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.mx-range .mx-grid > .elementor-element { height: 100%; }

/* cta */
.mx-cta { background-image: radial-gradient(ellipse at 20% 0%, rgba(123,63,228,.28), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(214,60,181,.2), transparent 55%) !important; }
.mx-cta .mx-in > .e-con-inner, .mx-cta .mx-in { align-items: center; }

/* footer */
.mx-footwrap { --width: 100%; }
.mx-footer { background: #080919; border-top: 1px solid var(--line); }
.mx-footer-in { max-width: 1240px; margin: 0 auto; padding: 72px 28px 48px; display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr; gap: 48px; }
.mx-f-brand img { height: 64px; width: auto; margin-bottom: 20px; }
.mx-f-brand p { color: var(--body); font-size: 15px; line-height: 1.7; max-width: 340px; margin: 0; }
.mx-footer h4 { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 20px; }
.mx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mx-footer a { color: var(--body); text-decoration: none; font-size: 15px; }
.mx-footer a:hover { color: var(--gold); }
.mx-footer-bot { max-width: 1240px; margin: 0 auto; padding: 24px 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #8C8FB3; font-size: 14px; }

/* inner page banner */
.mx-pagebanner { background-image: radial-gradient(ellipse at 85% 10%, rgba(123,63,228,.28), transparent 55%), radial-gradient(ellipse at 10% 100%, rgba(214,60,181,.14), transparent 55%) !important; }

/* responsive */
@media (max-width: 1024px) {
  .mx-work { grid-template-columns: repeat(2, 1fr); }
  .mx-footer-in { grid-template-columns: 1fr 1fr; }
  .mx-nav ul { gap: 22px; }
  .mx-visual > img { width: 100%; aspect-ratio: 16/11; }
  .mx-visual-b { width: 46%; right: 14px; }
}
@media (max-width: 860px) {
  .mx-burger { display: block; }
  .mx-header-cta { display: none; }
  .mx-nav { position: fixed; left: 0; right: 0; top: 0; padding: 96px 28px 32px; background: rgba(11,12,35,.98); transform: translateY(-105%); transition: transform .45s var(--ease); margin: 0; border-bottom: 1px solid var(--line); z-index: -1; }
  body.mx-menu-open .mx-nav { transform: none; }
  .mx-nav ul { flex-direction: column; gap: 4px; }
  .mx-nav a { display: block; font-size: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .mx-nav a::after { display: none; }
  .mx-chrome.is-solid, body.mx-menu-open .mx-chrome { background: rgba(11,12,35,.95); }
}
@media (max-width: 767px) {
  .mx-hero { height: 100svh; min-height: 620px; }
  .mx-slide-copy { top: 46%; }
  .mx-hero-ctrl { right: 18px; left: 18px; bottom: 92px; justify-content: space-between; }
  .mx-arrow { width: 46px; height: 46px; }
  .mx-work { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .mx-tile.wide, .mx-tile.tall { grid-column: auto; grid-row: auto; }
  .mx-footer-in { grid-template-columns: 1fr; gap: 34px; padding: 52px 20px 32px; }
  .mx-visual { padding-bottom: 44px; }
  .mx-header-in { padding: 14px 18px; }
  .mx-logo img { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mx-js .mx-reveal { opacity: 1; transform: none; transition: none; }
  .mx-slide.is-active .mx-slide-bg, .mx-ticker-track { animation: none; }
  .mx-slide-copy > * { opacity: 1; transform: none; animation: none !important; }
}

/* process timeline */
.mx-process::before { content: ""; position: absolute; left: 50%; top: -20vw; width: 60vw; height: 40vw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(123,63,228,.16), transparent 65%); pointer-events: none; }
.mx-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 24px; }
.mx-flow-line { position: absolute; left: 12.5%; right: 12.5%; top: 35px; height: 2px; background: rgba(255,255,255,.14); }
.mx-flow-line i { position: absolute; inset: 0; background: linear-gradient(90deg, #7B3FE4, #D63CB5, var(--gold)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 2s var(--ease) .3s; }
.is-in .mx-flow .mx-flow-line i { transform: scaleX(1); }
.mx-flow-step { position: relative; text-align: center; padding: 0 8px; }
.mx-flow-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 26px; border-radius: 50%; background: var(--bg); border: 2px solid rgba(255,255,255,.18); color: #fff; font-size: 20px; font-weight: 600; transition: background .5s, border-color .5s, color .5s, box-shadow .5s, transform .5s var(--ease); }
.is-in .mx-flow .mx-flow-dot { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 8px rgba(211,189,32,.08); transition-delay: calc(var(--n, 0) * .45s + .3s); }
.mx-flow-step:nth-child(2) { --n: 0; } .mx-flow-step:nth-child(3) { --n: 1; } .mx-flow-step:nth-child(4) { --n: 2; } .mx-flow-step:nth-child(5) { --n: 3; }
.mx-flow-step:hover .mx-flow-dot { background: var(--gold); color: var(--bg); transform: scale(1.1); }
.mx-flow-step h3 { color: #fff; font-size: 20px; font-weight: 600; margin: 0 0 10px; }
.mx-flow-step p { color: var(--body); font-size: 15px; line-height: 1.7; margin: 0 auto; max-width: 250px; }
@media (max-width: 860px) {
  .mx-flow { grid-template-columns: 1fr; gap: 34px; }
  .mx-flow-line { left: 35px; right: auto; top: 36px; bottom: 36px; width: 2px; height: auto; }
  .mx-flow-line i { transform: scaleY(0); transform-origin: 50% 0; background: linear-gradient(180deg, #7B3FE4, #D63CB5, var(--gold)); }
  .is-in .mx-flow .mx-flow-line i { transform: scaleY(1); }
  .mx-flow-step { text-align: left; padding: 0 0 0 96px; min-height: 72px; }
  .mx-flow-dot { position: absolute; left: 0; top: 0; margin: 0; }
  .mx-flow-step p { margin: 0; max-width: none; }
}

/* whatsapp */
.elementor-widget-html:has(.mx-wa) { position: fixed; right: 24px; bottom: 24px; z-index: 9980; width: auto; }
.mx-wa { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.4); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s; }
.mx-wa:hover { transform: scale(1.1) translateY(-3px); color: #fff; box-shadow: 0 18px 36px rgba(37,211,102,.45); }
.mx-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366; z-index: -1; animation: mx-pulse 2.4s ease-out infinite; }
@keyframes mx-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
.mx-wa-tip { position: absolute; right: 74px; top: 50%; transform: translate(10px, -50%); background: #fff; color: #0B0C23; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 100px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .3s, transform .35s var(--ease); }
.mx-wa:hover .mx-wa-tip { opacity: 1; transform: translate(0, -50%); }
.mx-btn-wa .elementor-button { background: #25D366 !important; color: #fff !important; }
.mx-btn-wa .elementor-button:hover { background: #1EBE5A !important; }
@media (max-width: 767px) { .elementor-widget-html:has(.mx-wa) { right: 16px; bottom: 16px; } .mx-wa { width: 56px; height: 56px; } .mx-wa-tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .mx-wa::before { animation: none; } .mx-flow-line i { transition: none; transform: none; } }

/* why choose us */
.mx-why::before { content: ""; position: absolute; left: -15vw; top: -8vw; width: 45vw; height: 45vw; border-radius: 50%; background: radial-gradient(circle, rgba(214,60,181,.12), transparent 65%); pointer-events: none; }
.mx-why-visual { position: relative; padding: 0 0 36px 36px; }
.mx-why-visual::before { content: ""; position: absolute; left: 0; bottom: 0; width: 62%; height: 62%; border: 2px solid rgba(211,189,32,.55); border-radius: 22px; }
.mx-why-visual img { position: relative; display: block; width: 100%; aspect-ratio: 4/4.4; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.mx-why-badge { position: absolute; right: -14px; bottom: 6px; display: grid; gap: 2px; padding: 18px 26px; border-radius: 16px; background: var(--gold); color: var(--bg); box-shadow: 0 18px 40px rgba(0,0,0,.4); animation: mx-float 5s ease-in-out infinite; }
.mx-why-badge b { font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; line-height: 1.5; }
@keyframes mx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.mx-why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.mx-why-list li { display: flex; gap: 20px; align-items: flex-start; padding: 22px 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); transition: transform .45s var(--ease), border-color .35s, background .35s; }
.mx-why-list li:hover { transform: translateX(8px); border-color: rgba(211,189,32,.5); background: #1B1E47; }
.mx-why-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(211,189,32,.12); color: var(--gold); font-size: 20px; transition: background .35s, color .35s, transform .45s var(--ease); }
.mx-why-list li:hover .mx-why-ic { background: var(--gold); color: var(--bg); transform: rotate(-8deg) scale(1.08); }
.mx-why-list h3 { color: #fff; font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.mx-why-list p { color: var(--body); font-size: 15px; line-height: 1.65; margin: 0; }
@media (max-width: 1024px) { .mx-why-visual { padding-left: 0; } .mx-why-visual::before { display: none; } .mx-why-visual img { aspect-ratio: 16/11; } .mx-why-badge { right: 14px; bottom: 50px; } }
@media (max-width: 767px) { .mx-why-list li { padding: 18px; gap: 16px; } .mx-why-list li:hover { transform: none; } .mx-why-badge { padding: 12px 18px; right: 10px; } .mx-why-badge b { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .mx-why-badge { animation: none; } }
.mx-footer li span { color: var(--body); font-size: 15px; }
.mx-nav .mx-off { color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .4px; padding: 6px 0; cursor: default; opacity: .9; }
@media (max-width: 860px) { .mx-nav .mx-off { display: block; font-size: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); } }