/* MEROVAQ 3D hero widget + guided tour — scoped: no global rules, the site's own styles are untouched. */
@font-face { font-family: Manrope; font-weight: 500 600; font-display: swap; src: url(assets/fonts/manrope-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Manrope; font-weight: 700; font-display: swap; src: url(assets/fonts/manrope-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Manrope; font-weight: 800; font-display: swap; src: url(assets/fonts/manrope-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400 600; font-display: swap; src: url(assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700 800; font-display: swap; src: url(assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }

.tour, .mv3d {
  --navy: #0D2B63; --blue: #2367E8; --turq: #63B7C0; --peach: #F3A07D; --ivory: #F7F3EB; --off: #FFFDF9;
  --ink: #122033; --ink-2: #657184; --line: #E6DCCD; --turq-ink: #1F6F73; --peach-ink: #8A4419; --cream: #F7F3EB;
  --shadow: 0 1px 2px rgba(5, 31, 73, .06), 0 12px 32px -12px rgba(5, 31, 73, .18);
  --font: Manrope, 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.tour { font-family: var(--font); color: var(--ink); line-height: 1.5; z-index: 2147483000 !important; }
.tour[lang="ar"] { --font: 'IBM Plex Sans Arabic', Manrope, system-ui, sans-serif; }
.tour *, .tour *::before, .tour *::after { box-sizing: border-box; }
.tour .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- hero widget: lives inside the existing .hero-carousel frame (same box, radius, shadow, controls) ---- */
.mv3d .mv3d-slide { position: relative; overflow: hidden; border-radius: 24px; }
.mv3d .mv3d-slide::after { display: none; }                       /* no caption over the image any more */
.mv3d .mv3d-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
.mv3d .mv3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 24px; opacity: 0; transition: opacity .6s ease; touch-action: pan-y; }
.mv3d.mv3d-ready .mv3d-canvas { opacity: 1; }
.mv3d-tour { position: absolute; top: 16px; inset-inline-start: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 8px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .26); background: rgba(8, 40, 79, .62); color: #fff; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .02em; cursor: pointer; backdrop-filter: blur(4px); }
.mv3d-tour::before, .mv3d-start::before { content: ''; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #155af2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 2l5 3-5 3z' fill='white'/%3E%3C/svg%3E") center / 11px no-repeat; }
.mv3d-tour:hover, .mv3d-tour:focus-visible { background: #155af2; border-color: #79a8ff; }
/* light mode (phones / data saver): the 3D starts on request */
.mv3d-start { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px 8px 10px;
  border-radius: 999px; border: 0; background: #155af2; color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 30px rgba(4, 19, 44, .35); }
.mv3d-start::before { background-color: rgba(255, 255, 255, .22); }
.mv3d-start small { font-weight: 600; opacity: .8; font-size: 12px; }
/* one line for the label, the size underneath (no 3-line wrap on a phone) */
.mv3d-start { display: none; grid-template-columns: auto auto; column-gap: 10px; text-align: start; white-space: nowrap; line-height: 1.25; }
.mv3d-start::before { grid-row: 1 / span 2; align-self: center; }
.mv3d-start small { grid-column: 2; display: block; }
.mv3d.mv3d-light .mv3d-start { display: inline-grid; }
.mv3d.mv3d-light .mv3d-start { display: inline-flex; }
.mv3d.mv3d-loading .mv3d-start { opacity: .75; pointer-events: none; }
.mv3d.mv3d-light .mv3d-play, .mv3d.mv3d-light .hero-carousel-progress,
.hero-art.hero-carousel-shell .mv3d.mv3d-light .hero-carousel-ui .mv3d-play, .hero-art.hero-carousel-shell .mv3d.mv3d-light .hero-carousel-progress { display: none !important; }
.mv3d-play { font-size: 16px !important; }
.mv3d-play::before { content: '❚❚'; letter-spacing: -2px; }
.mv3d-play[aria-pressed="true"]::before { content: '▶'; letter-spacing: 0; }
.mv3d-robot { position: absolute; z-index: 2; background: transparent; border: 0; border-radius: 40%; padding: 0; cursor: pointer; }
.mv3d-robot[hidden], .mv3d-bubble[hidden] { display: none !important; }
.mv3d-robot:hover, .mv3d-robot:focus-visible { box-shadow: 0 0 0 3px rgba(99, 183, 192, .7); outline: none; }
.mv3d-bubble { position: absolute; left: 0; top: 0; z-index: 3; max-width: min(230px, 70%); padding: 8px 12px; border-radius: 14px; background: var(--off); color: var(--ink);
  font-family: var(--font); font-size: 12.5px; font-weight: 700; line-height: 1.35; box-shadow: var(--shadow); pointer-events: none; }
/* no WebGL: stills + text; the 3D-only buttons are hidden */
.mv3d.mv3d-static .mv3d-canvas, .mv3d.mv3d-static .mv3d-tour, .mv3d.mv3d-static .mv3d-robot, .mv3d.mv3d-static .mv3d-play,
.mv3d.mv3d-static .mv3d-start, .mv3d.mv3d-static .hero-carousel-progress,
.hero-art.hero-carousel-shell .mv3d.mv3d-static .hero-carousel-ui .mv3d-play, .hero-art.hero-carousel-shell .mv3d.mv3d-static .hero-carousel-progress { display: none !important; }
/* explanation: under the image, separate from the controls, readable on the dark hero */
.hero-art.hero-carousel-shell > .mv3d-explain { display: block !important; margin: 14px 4px 0; color: #fff; min-height: 7.2em; }
.mv3d-explain-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #52d8dd; }
.mv3d-explain-title { margin: 0 0 4px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 800; line-height: 1.3; color: #fff; }
.mv3d-explain-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .86); max-width: 62ch; }
[dir=rtl] .hero-art.hero-carousel-shell > .mv3d-explain { direction: rtl; text-align: right; }
.hero-art.hero-carousel-shell:has(> .mv3d) { width: 100%; }   /* the canvas has no intrinsic width (the original images had one) */
@media (max-width: 760px) {
  .hero-copy .hero-micro { display: none !important; }        /* shorter intro: the demo shows up sooner */
  .mv3d-tour { top: 10px; inset-inline-start: 10px; min-height: 34px; font-size: 12px; }
  .hero-art.hero-carousel-shell > .mv3d-explain { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .mv3d .mv3d-canvas { transition: none; } }
.mv3d .mv3d-slide.mv3d-shot::after { display: none; }

/* ---- guided tour (full-screen dialog) ---- */
.pick-label { z-index: 2147483001 !important; }
.mv3d .mv3d-slide.mv3d-shot::after { display: none; }   /* used only to capture the still image */
.no-webgl .tour-launch{display: none;}
.tour-launch{margin-top: 14px;}
.btn-tour{display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 18px 8px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--off); color: var(--ink); font: inherit; cursor: pointer; box-shadow: var(--shadow); text-align: start;}
:root[dir="rtl"] .btn-tour{padding: 8px 8px 8px 18px;}
.btn-tour:hover{border-color: var(--turq);}
.btn-tour strong{display: block; font-weight: 800; line-height: 1.2;}
.btn-tour small{display: block; color: var(--ink-2); font-size: .8rem;}
.tour-play{width: 38px; height: 38px; border-radius: 50%; background: var(--navy); position: relative; flex: none;}
.tour-play::after{content: ''; position: absolute; left: 15px; top: 12px; border-left: 12px solid var(--off); border-top: 7px solid transparent; border-bottom: 7px solid transparent;}
.tour-open, .tour-open body{overflow: hidden;}
.tour{position: fixed; inset: 0; z-index: 200; background: var(--ivory);}
.tour[hidden]{display: none;}
.tour-canvas, .tour > canvas{position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none;}
.tour-bar{position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); inset-inline: max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 14px; pointer-events: none;}
.tour-bar > *{pointer-events: auto;}
.tour-bar img{height: 24px; width: auto; background: var(--off); padding: 9px 12px; border-radius: 12px; box-sizing: content-box; box-shadow: var(--shadow);}
.tour-name{margin: 0; font-weight: 800; font-size: .95rem; background: var(--off); padding: 8px 12px; border-radius: 10px; box-shadow: var(--shadow);}
.tour-close{margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--off); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; box-shadow: var(--shadow);}
.tour-rail{position: absolute; top: calc(74px + env(safe-area-inset-top, 0px)); inset-inline: 0; display: flex; justify-content: center; pointer-events: none;}
.tour-rail ol{list-style: none; margin: 0; padding: 5px; display: flex; gap: 2px; background: var(--off); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); pointer-events: auto; max-width: calc(100% - 32px); overflow-x: auto; scrollbar-width: none;}
.tour-rail button{display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 12px 4px 5px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: .84rem; font-weight: 700; color: var(--ink-2); cursor: pointer; white-space: nowrap;}
:root[dir="rtl"] .tour-rail button, .tour[dir="rtl"] .tour-rail button{padding: 4px 5px 4px 12px;}
.tour-rail .n{display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ivory); color: var(--navy); font-size: .74rem; font-weight: 800;}
.tour-rail button[aria-current]{background: var(--navy); color: var(--off);}
.tour-rail button[aria-current] .n{background: var(--turq); color: var(--navy);}
.tour-card{position: absolute; inset-inline-start: max(20px, env(safe-area-inset-left, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: min(440px, calc(100% - 40px)); max-height: calc(100% - 170px); overflow-y: auto; background: var(--off); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 20px 22px;}
.tour-card h2{font-size: 1.45rem; margin: 6px 0 8px; outline: none; text-wrap: balance;}
.tour-card p{color: var(--ink-2); margin: 0 0 10px;}
.tc-head{display: flex; align-items: center; gap: 10px;}
.tour-guide{width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 4%; background: #fff; border: 1px solid var(--line);}
.tc-kicker{margin: 0 !important; font-size: .8rem; font-weight: 800; color: var(--turq-ink) !important; letter-spacing: .02em;}
.tc-kicker span{color: var(--navy);}
.tc-tags{display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 !important;}
.tc-tag{font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--ivory); border: 1px solid var(--line); color: var(--ink-2);}
.tc-tag.dev{background: #FCE7DC; border-color: #F3C8B1; color: var(--peach-ink);}
.tc-sub{margin: 12px 0 6px !important; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;}
.tc-svc{list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px;}
.tc-svc li{font-size: .84rem; font-weight: 700; padding: 5px 10px; border-radius: 10px; background: #E6F3F4; color: var(--turq-ink);}
.tc-steps{list-style: none; counter-reset: s; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px;}
.tc-steps li{counter-increment: s; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px;}
.tc-steps li::before{content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--off); font-weight: 800; font-size: .8rem;}
.tc-steps li:last-child::before{background: var(--peach); color: var(--navy);}
.tc-steps span{color: var(--ink-2); font-size: .9rem;}
.tc-note{font-size: .82rem; font-weight: 700; color: var(--peach-ink) !important;}
.tc-dots{display: flex; gap: 6px; margin: 4px 0 6px !important;}
.tc-dots span{width: 22px; height: 4px; border-radius: 2px; background: var(--line);}
.tc-dots span.done{background: var(--turq);}
.tc-dots span.on{background: var(--navy);}
.tc-nav{display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap;}
.tc-nav button{min-height: 46px; padding: 10px 20px; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer;}
.tc-prev{background: transparent; border: 2px solid var(--navy); color: var(--navy);}
.tc-next{background: var(--peach); border: 2px solid var(--peach); color: var(--navy);}
.tc-mail{display: flex; flex-wrap: wrap; align-items: center; gap: 10px;}
.tc-mail a{font-size: 1.2rem; font-weight: 800; color: var(--navy);}
.tc-copy{min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--off); font: inherit; font-weight: 700; cursor: pointer;}
.tc-copied{min-height: 1.2em; color: var(--turq-ink) !important; font-weight: 700;}
.tour-hint{position: absolute; inset-inline-end: 20px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); margin: 0; font-size: .78rem; color: var(--ink-2); background: rgba(255, 253, 249, .9); padding: 6px 12px; border-radius: 999px; transition: opacity .4s;}
.tour.tour-touched .tour-hint{opacity: 0;}
.tour-pins{position: absolute; inset: 0; pointer-events: none;}
.tour-pin{position: absolute; left: 0; top: 0; pointer-events: auto;}
.tour-pin[hidden]{display: none;}
.tour-pin > button{position: absolute; transform: translate(-16px, -50%); display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px 12px 3px 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--off); color: var(--navy); font: inherit; font-size: .82rem; font-weight: 800; white-space: nowrap; box-shadow: var(--shadow); cursor: pointer;}
.tour-pin .d{display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--off);}
.tour-pin > button[aria-expanded="true"] .d{background: var(--blue);}
.tour-pin.flip > button{transform: translate(calc(-100% + 16px), -50%); flex-direction: row-reverse; padding: 3px 3px 3px 12px;}
.tp-card{position: absolute; top: 26px; left: -16px; width: min(260px, 70vw); background: var(--off); border: 1px solid var(--line); border-top: 3px solid var(--turq); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); font-size: .86rem; color: var(--ink-2);}
.tour-pin.flip .tp-card{left: auto; right: -16px;}
.tp-card p{margin: 0;}
.tour-loader{position: absolute; inset: 0; display: grid; place-items: center; background: var(--ivory);}
.tour-loader[hidden]{display: none;}
.tour-load-box{width: min(360px, calc(100% - 48px)); text-align: center;}
.tour-load-box img{height: 30px; width: auto;}
.tour-load-label{font-weight: 700; color: var(--ink-2); margin: 18px 0 10px;}
.tour-bar-track{height: 6px; border-radius: 3px; background: var(--line); overflow: hidden;}
.tour-bar-track span{display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--navy), var(--blue), var(--turq)); transition: width .25s;}
@media (max-width: 759px){.tour-name, .tour-close-l{ display: none; }.tour-rail{ top: calc(66px + env(safe-area-inset-top, 0px)); justify-content: flex-start; padding-inline: 10px; }.tour-rail .l{ display: none; }.tour-rail button[aria-current] .l{ display: inline; }.tour-card{ inset-inline: 0; bottom: 0; width: auto; max-height: 50%; border-radius: 20px 20px 0 0; padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }.tour-card h2{ font-size: 1.2rem; }.tour-hint{ display: none; }.tour-pin .l{ display: none; }.tour-pin > button{ padding: 3px; }}
@media (prefers-reduced-motion: reduce){.tour-bar-track span{ transition: none; }}
.bubble{position: fixed; left: 0; top: 0; z-index: 6; max-width: 240px; padding: 10px 14px; border-radius: 16px; background: var(--off); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .86rem; font-weight: 600; color: var(--ink); pointer-events: none;}
.bubble::after{content: ''; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; background: var(--off); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg);}
.bubble[hidden]{display: none;}
.pick-label{position: fixed; left: 0; top: 0; z-index: 7; padding: 6px 10px; border-radius: 10px; background: var(--navy); color: #fff; font-size: .8rem; font-weight: 700; pointer-events: none; white-space: nowrap; box-shadow: var(--shadow);}
.pick-label[hidden]{display: none;}
.wm-dot{width: 9px; height: 9px; border-radius: 50%; background: var(--turq); box-shadow: 0 0 0 3px rgba(99,183,192,.3);}
@media (max-width: 760px){.bubble{ max-width: 200px; font-size: .8rem; }}
.pick-label{z-index: 300;}
.tour-with{display: flex; gap: 3px; padding: 4px; margin-inline-start: auto; background: var(--off); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow);}
.tour-with button{display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 700; font-size: .84rem; color: var(--ink-2); cursor: pointer; white-space: nowrap;}
.tour-with button[aria-pressed="true"]{background: var(--navy); color: #fff;}
.tour-with + .tour-close{margin-inline-start: 0;}
@media (max-width: 759px){.tour-bar{ flex-wrap: wrap; }.tour-with{ order: 3; margin: 0 auto; }.tour-with button{ font-size: .76rem; padding: 4px 10px; min-height: 32px; }.tour-rail{ top: calc(112px + env(safe-area-inset-top, 0px)); }}
.tour-pin.compact > button{padding: 3px;}
@keyframes pin-in{ from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pin-in-hs{ from { opacity: 0; } to { opacity: 1; } }
.tour-pin:not([hidden]) > button{animation-name: pin-in-hs;}
.tour-pin.current > button{border-color: var(--turq); box-shadow: 0 0 0 3px rgba(99, 183, 192, .35), var(--shadow);}
.tour-card.seq > *{animation: card-in .5s cubic-bezier(.2, .7, .2, 1) both;}
.tour-card.seq > :nth-child(2){animation-delay: .08s;}
.tour-card.seq > :nth-child(3){animation-delay: .22s;}
.tour-card.seq > :nth-child(4){animation-delay: .38s;}
.tour-card.seq > :nth-child(5){animation-delay: .52s;}
.tour-card.seq > :nth-child(6){animation-delay: .66s;}
.tour-card.seq > :nth-child(n+7){animation-delay: .8s;}
@keyframes card-in{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.usecase{margin: 12px 0 4px; display: grid; gap: 8px;}
.usecase div{display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: var(--cream, #F7F3EB);}
.usecase dt{font-weight: 800; font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; color: var(--navy);}
.usecase dd{margin: 0; font-size: .92rem; color: var(--ink-2);}
@media (max-width: 760px){.usecase div{ grid-template-columns: 1fr; gap: 2px; }}
.tc-brand{display: flex; align-items: center; gap: 10px; margin: 2px 0 2px;}
.tc-brand img{height: 74px; width: auto; margin: -14px -14px -14px -26px; border-radius: 10px;}
.tour{-webkit-user-select: none; user-select: none;}
.tour .tour-card, .tour .tc-mail{-webkit-user-select: text; user-select: text;}
.tour-pin .tp-card strong{display: block; color: var(--navy); margin-bottom: 2px;}
@media (max-width: 1500px){.tour-rail .l{ display: none; }.tour-rail button{ padding: 4px 5px; }.tour-rail button[aria-current] .l{ display: inline; }.tour-rail button[aria-current]{ padding: 4px 12px 4px 5px; }}
.tour-card .usecase{gap: 5px; margin: 8px 0 6px;}
.tour-card .usecase div{grid-template-columns: 1fr; gap: 1px; padding: 6px 10px;}
.tour-card .usecase dt{font-size: .68rem;}
.tour-card .usecase dd{font-size: .86rem; line-height: 1.38;}
.tour-card .tc-brand + h2{margin-top: 2px;}
.tour-card .usecase div, .usecase div{grid-template-columns: 7.6em 1fr; gap: 10px; align-items: center; padding: 6px 10px;}
@media (max-width: 380px){.tour-card .usecase div, .usecase div{ grid-template-columns: 1fr; gap: 1px; }}
@media (max-width: 760px){.tour-card .tc-lead-uc{ display: none; }.tc-brand img{ height: 62px; margin: -12px -12px -12px -22px; }}