:root {
            /* Same type philosophy as the product console — clean, professional, NOT Cairo */
            --font: "Hanken Grotesk", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
            --font-display: "Hanken Grotesk", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;

            /* Royal purple identity inspired by Foodics. Flat colors only. */
            --v-300: #d8c8ff;
            --v-400: #8f73e6;
            --v-500: #5830c5;
            --v-600: #5830c5;
            --v-700: #440099;
            --v-900: #26105f;
            --grad: #5830c5;
            --grad-soft: #f4f0ff;

            /* Dark bands / featured surfaces / footer */
            --ink: #1a1430;
            --ink-2: #241a44;
            --ink-3: #34265e;

            /* Cool, product-grade neutrals (mirrors the console design tokens) */
            --paper: #f8fafc;
            --surface: #ffffff;
            --surface-2: #f9fafb;
            --text: #111827;
            --muted: #6b7280;
            --text-dark: #f3f4f6;
            --muted-dark: #c0b8d6;
            --line: #e5e7eb;
            --hairline: #eef0f3;

            /* per-industry accent (dynamic, set per card); defaults to the brand purple */
            --accent: #5830c5;
            --accent-soft: rgba(106, 31, 208, .10);

            --shadow-soft: 0 1px 15px rgba(17,24,39,.05), 0 1px 6px rgba(17,24,39,.05);
            --shadow: 0 18px 48px -22px rgba(102,51,153,.32), 0 4px 14px rgba(17,24,39,.06);
            --r-lg: 16px;
            --r-md: 12px;
            --r-sm: 8px;
            --header-h: 76px;
            --maxw: 1200px;

            --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: hidden; }
        body {
            margin: 0; color: var(--text); background: var(--paper);
            font-family: var(--font); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden; text-rendering: optimizeLegibility;
        }
        body.nav-open { overflow: hidden; }
        h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.14; letter-spacing: -.018em; margin: 0; color: inherit; }
        html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { letter-spacing: 0; }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }
        ::selection { background: var(--v-600); color: #fff; }
        main { display: block; }

        .wrap, .section-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }

        .kicker {
            display: inline-flex; align-items: center; gap: 9px;
            font-weight: 600; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
            padding: 8px 15px 8px 13px; border-radius: 999px;
            background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: color-mix(in srgb, var(--accent) 78%, var(--text));
            border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
            transition: color .5s, background .5s, border-color .5s;
        }
        html[dir="rtl"] .kicker { letter-spacing: .01em; }
        .kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); transition: .5s; animation: dotPulse 2.4s ease-in-out infinite; }
        @keyframes dotPulse { 0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 6%, transparent); } }
        @media (prefers-reduced-motion: reduce) { .kicker .dot { animation: none; } }

        .btn {
            position: relative;
            display: inline-flex; align-items: center; justify-content: center; gap: 9px;
            font-family: var(--font); font-weight: 600; font-size: .98rem; cursor: pointer;
            padding: 13px 28px; border-radius: 999px; border: 1px solid transparent;
            transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .25s, color .25s, border-color .25s;
            white-space: nowrap; letter-spacing: -.01em;
        }
        .btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
        .btn-primary { background: var(--grad); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 24px -12px rgba(102,51,153,.7); }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 18px 36px -14px rgba(102,51,153,.8); filter: brightness(1.04); }
        .btn-primary:active { transform: translateY(0); }
        .btn-ghost { background: rgba(255,255,255,.06); color: var(--text-dark); border-color: rgba(255,255,255,.2); }
        .btn-ghost:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
        .btn-outline { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: 0 1px 2px rgba(33,26,46,.04); }
        .btn-outline:hover { border-color: color-mix(in srgb, var(--v-600) 50%, transparent); color: var(--v-700); transform: translateY(-2px); box-shadow: var(--shadow-soft); }

        /* ============ NAV ============ */
        .site-header { position: fixed; top: 0; inset-inline: 0; z-index: 60; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); background: color-mix(in srgb, var(--paper) 68%, transparent); border-bottom: 1px solid transparent; transition: transform .4s cubic-bezier(.2,.8,.2,1), background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
        .hero { scroll-margin-top: var(--header-h); }
        .site-header.is-solid { background: color-mix(in srgb, var(--paper) 88%, transparent); border-bottom-color: var(--hairline); box-shadow: 0 8px 30px -20px rgba(40, 12, 84, .4); }
        html[data-theme="dark"] .site-header.is-solid { box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .65); }
        .site-header.is-hidden { transform: translateY(-100%); }
        .nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); transition: height .3s ease; }
        .site-header.is-solid .nav { height: 62px; }
        .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 1.24rem; }
        .brand img { width: 34px; height: 34px; }
        .brand-mark { width: 34px; height: 34px; display: inline-block; flex: 0 0 auto; background: linear-gradient(135deg, var(--v-500), var(--v-700)); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
        .brand span { letter-spacing: -.03em; }
        .nav-menu { display: flex; align-items: center; gap: 14px; }
        .nav-sep { color: var(--line); font-weight: 700; user-select: none; pointer-events: none; }
        .nav-divider { width: 1px; height: 22px; background: var(--line); margin-inline: 6px; align-self: center; flex: 0 0 auto; }
        .nav-menu > a { position: relative; color: var(--muted); font-weight: 500; font-size: .95rem; transition: color .2s; padding-block: 4px; }
        .nav-menu > a::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -2px; width: 100%; height: 2px; border-radius: 2px; background: var(--v-600); transform: scaleX(0); transform-origin: inline-start; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
        .nav-menu > a:hover, .nav-menu > a.is-active { color: var(--text); }
        .nav-menu > a:hover::after, .nav-menu > a.is-active::after { transform: scaleX(1); }
        .nav-actions { display: flex; align-items: center; gap: 10px; }
        .lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
        .lang-switch a { font-size: .76rem; font-weight: 700; color: var(--muted); padding: 5px 9px; border-radius: 999px; transition: .2s; }
        .lang-switch a:hover { color: var(--v-700); background: var(--accent-soft); }
        .mini-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: .92rem; color: var(--text); padding: 9px 12px; border: none; background: none; transition: color .2s; }
        .mini-link:hover { color: var(--v-700); }
        .nav .btn { padding: 10px 20px; }
        .mobile-menu-btn { display: none; width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
        .mobile-menu-btn span { width: 18px; height: 2px; background: var(--text); border-radius: 2px; }

        /* ============ HERO (light · kinetic headline) ============ */
        .hero { position: relative; overflow: hidden; background: var(--paper); color: var(--text); padding-block: clamp(88px, 12vw, 150px) clamp(40px, 6vw, 72px); }
        /* grain overlay for warmth & depth */
        .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); opacity: .55; mix-blend-mode: multiply; }
        html[data-theme="dark"] .hero::before { mix-blend-mode: screen; opacity: .3; }
        /* engineered hairline grid, fading toward the edges */
        .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
            background-image:
                linear-gradient(to right, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px),
                linear-gradient(to bottom, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
            background-size: 58px 58px;
            -webkit-mask-image: radial-gradient(ellipse 84% 70% at 50% 30%, #000 18%, transparent 82%);
            mask-image: radial-gradient(ellipse 84% 70% at 50% 30%, #000 18%, transparent 82%); opacity: .8; }
        /* primary brand bloom — indigo→violet, matching the console gradient */
        .hero-bg::before { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 680px; max-height: 680px; top: -22%; inset-inline-start: 50%; transform: translateX(50%);
            background: radial-gradient(circle, rgba(118,75,162,.20), rgba(102,126,234,.10) 42%, transparent 64%); filter: blur(70px); }
        html[dir="ltr"] .hero-bg::before { transform: translateX(-50%); }
        /* secondary indigo bloom for layered depth */
        .hero-bg::after { content: ""; position: absolute; width: 38vw; height: 38vw; max-width: 440px; max-height: 440px; bottom: -16%; inset-inline-end: 4%;
            background: radial-gradient(circle, rgba(102,126,234,.12), transparent 64%); filter: blur(64px); }

        .hero-copy3 { position: relative; z-index: 3; text-align: center; max-width: 820px; margin-inline: auto; }
        /* bold typographic hero */
        .hero-typo { max-width: 940px; padding-block: clamp(8px, 2vw, 28px); }
        .hero-typo .hero-title { font-size: clamp(2.5rem, 7.4vw, 5rem); line-height: 1.06; font-weight: 700; letter-spacing: -.025em; margin-top: 26px; }
        html[dir="rtl"] .hero-typo .hero-title { letter-spacing: -.005em; line-height: 1.18; }
        .hero-typo .rotator { height: 1.18em; margin-top: .1em; }
        .hero-typo .rot-word { background: none; padding: 0; border-radius: 0; color: var(--v-600); gap: .24em; }
        .hero-typo .rot-word .rw-em { font-size: .82em; filter: drop-shadow(0 4px 10px rgba(102,51,153,.4)); }
        .hero-typo .hero-uline { display: block; height: 4px; width: clamp(110px, 20vw, 240px); margin: clamp(16px, 2.2vw, 26px) auto 0; border-radius: 999px;
            background: linear-gradient(90deg, transparent, #5830c5 28%, #5830c5 72%, transparent); background-size: 220% 100%; animation: ulineShimmer 2.8s linear infinite; }
        @keyframes ulineShimmer { to { background-position: 220% 0; } }
        @media (prefers-reduced-motion: reduce) { .hero-typo .hero-uline { animation: none; } }
        .hero-typo .hero-lead { margin-top: 28px; }
        .hero-typo .hero-actions { margin-top: 38px; }
        /* orchestrated load — staggered reveal of hero copy */
        .hero-typo > * { animation: heroRise .9s cubic-bezier(.16,.84,.3,1) both; }
        .hero-typo > .kicker { animation-delay: .05s; }
        .hero-typo > .hero-title { animation-delay: .14s; }
        .hero-typo > .hero-lead { animation-delay: .26s; }
        .hero-typo > .hero-actions { animation-delay: .36s; }
        @keyframes heroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: reduce) { .hero-typo > * { animation: none; } }
        /* two-column hero: text + rotating render image */
        .hero-grid2 { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
        .hero-copy2 { text-align: start; }
        .hero-shots { position: relative; }
        .hero-shots-inner { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1 / 1; }
        .hero-shots-glow { position: absolute; inset: 6% 6% 2%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rot, var(--v-600)) 22%, transparent), transparent 68%); filter: blur(46px); transition: background 1s ease; }
        .hslide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.94) translateY(8px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 30px 50px rgba(40,12,84,.18)); }
        .hslide.on { opacity: 1; transform: none; }
        .hero-title { font-size: clamp(2rem, 5.2vw, 3.7rem); font-weight: 800; line-height: 1.18; margin-top: 18px; }
        .rotator { display: inline-flex; align-items: center; overflow: hidden; height: 1.3em; vertical-align: bottom; }
        .rot-word { display: inline-flex; align-items: center; gap: .28em; padding: .04em .34em; border-radius: 16px; white-space: nowrap;
            color: var(--rot, var(--v-600)); background: color-mix(in srgb, var(--rot, var(--v-600)) 13%, transparent); transition: color .45s ease, background .45s ease; }
        .rot-word .rw-em { font-size: .9em; }
        .rot-word.swapping { animation: rotSwap .62s cubic-bezier(.6,0,.3,1) both; }
        @keyframes rotSwap { 0%{transform:translateY(0);opacity:1} 44%{transform:translateY(-60%);opacity:0} 56%{transform:translateY(60%);opacity:0} 100%{transform:translateY(0);opacity:1} }
        .hero-lead { margin: 20px auto 0; color: var(--muted); font-size: clamp(1rem, 2.1vw, 1.16rem); max-width: 600px; line-height: 1.8; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; justify-content: center; }

        /* Orbit stage: cashier center + floating products */
        .orbit-wrap { position: relative; z-index: 2; margin-top: clamp(26px, 5vw, 58px); }
        .orbit-stage { position: relative; width: 100%; max-width: 1020px; margin-inline: auto; height: clamp(420px, 58vh, 640px); }
        .orbit-cashier { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: auto; max-width: min(560px, 62%); max-height: 80%; z-index: 2; filter: drop-shadow(0 42px 52px rgba(40,12,84,.24)); animation: cashierBob 6s ease-in-out infinite; }
        .orbit-cashier[data-cashier-rotator] { transition: opacity .34s ease; }
        .orbit-cashier[data-cashier-rotator].is-switching { opacity: 0; }
        @keyframes cashierBob { 0%,100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 9px)); } }
        /* all items spawn from BEHIND the cashier screen, so the POS screen stays clear */
        .orbit-item { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }
        .orbit-par { transform: translate(var(--px, 0), var(--py, 0)) rotate(var(--mr, 0deg)); will-change: transform; }
        .orbit-spawn { transform: translate(var(--ex, 0), var(--ey, 0)) scale(var(--sc, 1)); opacity: var(--op, 1); will-change: transform, opacity; }
        .orbit-img { display: block; width: auto; height: auto; max-width: var(--s, 120px); max-height: var(--s, 120px); filter: drop-shadow(0 18px 22px rgba(40,12,84,.22)); transform: rotate(var(--r, 0deg)); }
        /* feature keyword chips that float in among the products */
        .orbit-chip { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; font-weight: 800; font-size: clamp(.78rem, 1.3vw, 1.02rem);
            color: var(--rot, var(--v-600)); background: color-mix(in srgb, var(--rot, var(--v-600)) 13%, var(--surface));
            border: 1px solid color-mix(in srgb, var(--rot, var(--v-600)) 38%, transparent); padding: .42em .85em; border-radius: 999px;
            box-shadow: 0 8px 24px color-mix(in srgb, var(--rot, var(--v-600)) 26%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
        .orbit-chip::before { content: "✦"; font-size: .8em; opacity: .85; }
        /* single rotating feature word above the screen (calm, readable) */
        .feat-word { position: absolute; left: 50%; top: 3%; transform: translateX(-50%); z-index: 7; pointer-events: none; animation: featBob 4.5s ease-in-out infinite; }
        .feat-word .orbit-chip { font-size: clamp(.95rem, 1.8vw, 1.26rem); font-weight: 700; gap: .55em; padding: .55em 1.15em;
            color: var(--rot, var(--v-600));
            background: color-mix(in srgb, var(--surface) 52%, transparent);
            border: 1px solid color-mix(in srgb, var(--rot, var(--v-600)) 20%, rgba(255,255,255,.45));
            box-shadow: 0 12px 34px rgba(40,12,84,.12), inset 0 1px 0 rgba(255,255,255,.55);
            -webkit-backdrop-filter: blur(13px) saturate(1.5); backdrop-filter: blur(13px) saturate(1.5);
            opacity: 0; transform: scale(.92); transition: opacity .5s ease, transform .5s ease; }
        .feat-word .orbit-chip.show { opacity: 1; transform: scale(1); }
        .feat-word .orbit-chip::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--rot, var(--v-600)); box-shadow: 0 0 9px var(--rot, var(--v-600)); }
        html[data-theme="dark"] .feat-word .orbit-chip { color: #fff; border-color: color-mix(in srgb, var(--rot, var(--v-600)) 45%, transparent); box-shadow: 0 12px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12); }
        @keyframes featBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-7px); } }
        @media (prefers-reduced-motion: reduce) { .feat-word { animation: none !important; } }
        @media (prefers-reduced-motion: reduce) { .orbit-img, .orbit-cashier { animation: none !important; } .orbit-spawn { transition: none !important; } }

        .hero-proof { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(44px, 6vw, 72px);
            background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--hairline); border-radius: var(--r-lg);
            -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--shadow-soft); overflow: hidden;
            animation: heroRise .9s cubic-bezier(.16,.84,.3,1) .46s both; }
        @media (prefers-reduced-motion: reduce) { .hero-proof { animation: none; } }
        .proof-item { padding: clamp(18px, 2.4vw, 26px) 16px; text-align: center; border-inline-start: 1px solid var(--hairline); }
        .proof-item:first-child { border-inline-start: none; }
        .proof-item strong { display: block; font-family: var(--font-display); color: var(--text); font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; }
        .proof-item span { color: var(--muted); font-size: .8rem; line-height: 1.45; display: block; margin-top: 2px; }

        /* ============ MARQUEE ============ */
        .marquee { background: var(--ink-2); color: var(--muted-dark); border-block: 1px solid rgba(255,255,255,.06); overflow: hidden; padding-block: 16px; }
        .marquee-track { display: flex; gap: 46px; width: max-content; animation: scroll 30s linear infinite; }
        .marquee:hover .marquee-track { animation-play-state: paused; }
        .marquee-track span { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.02rem; white-space: nowrap; opacity: .85; }
        .marquee-track span i { font-style: normal; font-size: 1.25rem; }
        @keyframes scroll { to { transform: translateX(-50%); } }
        html[dir="rtl"] .marquee-track { animation-direction: reverse; }

        /* ============ SECTIONS ============ */
        .page-section { padding-block: clamp(64px, 9vw, 116px); }
        /* tighten the gap between the customer strip and the industries section */
        #industries { padding: clamp(18px, 2.2vw, 32px) 0 clamp(24px, 3vw, 48px); }
        /* same rounded "stage" panel as the hero → unified with the source style */
        .section-stage {
            margin-inline: clamp(8px, 1vw, 14px);
            border-radius: clamp(22px, 2.4vw, 34px);
            background: linear-gradient(180deg, #c9cbd0 0%, #dcdee2 30%, #edeef1 64%, #ffffff 100%);
            box-shadow: 0 50px 100px -60px rgba(17,24,39,.45), inset 0 0 0 1px rgba(17,24,39,.05);
            padding-block: clamp(44px, 5.5vw, 84px);
        }
        html[data-theme="dark"] .section-stage { background: linear-gradient(180deg, #1c1740 0%, #15122c 55%, var(--paper) 100%); box-shadow: 0 50px 100px -60px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05); }
        .page-section.alt { background: var(--surface); }
        .section-head { max-width: 680px; margin-bottom: clamp(38px, 5vw, 60px); }
        .section-head.center { margin-inline: auto; text-align: center; }
        .section-head h2 { font-size: clamp(1.8rem, 4.2vw, 2.8rem); margin-top: 16px; letter-spacing: -.025em; }
        html[dir="rtl"] .section-head h2 { letter-spacing: -.005em; }
        .section-head p { color: var(--muted); margin: 16px 0 0; font-size: 1.05rem; line-height: 1.75; }

        /* Industries */
        .segment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 14px; }
        /* compact, glassier, UNIFIED activity cards (Apple + source style — one brand accent) */
        .segment-card { position: relative; display: flex; flex-direction: column; border-radius: 18px; padding: 18px 18px 16px; overflow: hidden;
            background: linear-gradient(135deg, rgba(255,255,255,.44), rgba(255,255,255,.14));
            border: 1px solid rgba(255,255,255,.55);
            -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
            box-shadow: 0 20px 44px -18px rgba(17,24,39,.24), inset 0 1px 0 rgba(255,255,255,.5);
            transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s; }
        .segment-card:hover, .segment-card.is-active { transform: translateY(-5px); box-shadow: 0 28px 56px -22px rgba(17,24,39,.4), inset 0 1px 0 rgba(255,255,255,.55); border-color: color-mix(in srgb, var(--v-600) 40%, rgba(255,255,255,.5)); }
        .segment-card.is-soon { opacity: .9; }
        html[data-theme="dark"] .segment-card { background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border-color: rgba(255,255,255,.1); box-shadow: 0 20px 44px -18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
        html[data-theme="dark"] .segment-card:hover, html[data-theme="dark"] .segment-card.is-active { border-color: color-mix(in srgb, var(--v-400) 40%, rgba(255,255,255,.12)); }
        .segment-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px; color: var(--muted);
            background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
            transition: transform .4s cubic-bezier(.2,.8,.2,1), color .45s ease, border-color .45s ease; }
        .segment-icon svg { width: 21px; height: 21px; }
        html[data-theme="dark"] .segment-icon { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); box-shadow: none; color: var(--muted-dark); }
        .segment-card:hover .segment-icon, .segment-card.is-active .segment-icon { transform: scale(1.08) rotate(-4deg); color: var(--v-600); border-color: color-mix(in srgb, var(--v-600) 30%, rgba(255,255,255,.6)); }
        html[data-theme="dark"] .segment-card:hover .segment-icon, html[data-theme="dark"] .segment-card.is-active .segment-icon { color: var(--v-300); }
        .seg-badge-soon { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; background: color-mix(in srgb, var(--v-600) 12%, rgba(255,255,255,.7)); color: var(--v-700); border: 1px solid color-mix(in srgb, var(--v-600) 28%, transparent); font-size: .62rem; font-weight: 800; padding: .24em .62em; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
        html[data-theme="dark"] .seg-badge-soon { background: color-mix(in srgb, var(--v-600) 30%, rgba(255,255,255,.06)); color: var(--v-300); }
        .segment-card h3 { font-size: 1.05rem; margin: 0 0 4px; letter-spacing: -.015em; color: var(--v-700); }
        html[data-theme="dark"] .segment-card h3 { color: var(--v-300); }
        .segment-card p { color: var(--muted); font-size: .82rem; margin: 0 0 12px; line-height: 1.5; }
        .segment-meta { display: flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 600; font-size: .8rem; margin-top: auto; transition: color .45s ease; }
        .segment-card:hover .segment-meta, .segment-card.is-active .segment-meta { color: var(--v-700); }
        html[data-theme="dark"] .segment-card:hover .segment-meta, html[data-theme="dark"] .segment-card.is-active .segment-meta { color: var(--v-300); }
        .segment-meta .seg-arrow svg { width: 15px; height: 15px; }
        /* legacy vs Marceen comparison */
        .compare { margin-top: clamp(40px, 5vw, 64px); max-width: 700px; margin-inline: auto; }
        .compare-head { text-align: center; margin-bottom: 26px; }
        .compare-head h3 { font-size: clamp(1.4rem, 2.8vw, 2rem); letter-spacing: -.02em; }
        html[dir="rtl"] .compare-head h3 { letter-spacing: 0; }
        .compare-head p { color: var(--muted); margin-top: 8px; font-size: .98rem; }
        .compare-table { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-soft); padding: 6px 6px 0; }
        .compare-row { display: grid; grid-template-columns: 1.8fr 1fr 1fr; align-items: stretch; }
        .compare-row:not(.compare-header):not(:last-child) { border-bottom: 1px solid var(--hairline); }
        .compare-row > span { padding: 15px 20px; display: flex; align-items: center; transition: background .2s; }
        .compare-row:not(.compare-header):hover .c-feature, .compare-row:not(.compare-header):hover .c-old { background: color-mix(in srgb, var(--v-600) 3%, transparent); }
        .c-feature { font-weight: 600; color: var(--text); font-size: .95rem; }
        .c-old, .c-new { justify-content: center; text-align: center; }
        /* the Marceen column reads as one highlighted, slightly elevated card */
        .c-new { background: color-mix(in srgb, var(--v-600) 8%, var(--surface)); border-inline: 1.5px solid color-mix(in srgb, var(--v-600) 20%, transparent); font-weight: 700; flex-direction: column; gap: 4px; }
        .compare-header > span { padding-block: 17px; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
        html[dir="rtl"] .compare-header > span { letter-spacing: 0; }
        .compare-header .c-old { color: var(--muted); }
        .compare-header .c-new { color: #fff; background: linear-gradient(160deg, var(--v-500), var(--v-700)); border-color: transparent; border-radius: 14px 14px 0 0; box-shadow: 0 -2px 0 color-mix(in srgb, var(--v-600) 30%, transparent); }
        .compare-row:last-child .c-new { border-bottom: 1.5px solid color-mix(in srgb, var(--v-600) 20%, transparent); border-radius: 0 0 14px 14px; }
        .c-badge { font-size: .58rem; font-weight: 800; background: rgba(255,255,255,.22); color: #fff; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; text-transform: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
        .c-ic { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; }
        .c-ic svg { width: 16px; height: 16px; }
        .c-yes { color: #fff; background: linear-gradient(135deg, var(--v-500), var(--v-700)); box-shadow: 0 5px 12px -4px color-mix(in srgb, var(--v-600) 70%, transparent); }
        .c-no { color: #cf5061; background: color-mix(in srgb, #d1495b 11%, transparent); }
        .c-lim { color: var(--muted); font-size: .82rem; font-weight: 600; }
        @media (max-width: 560px) { .compare-row { grid-template-columns: 1.5fr .75fr .75fr; } .compare-row > span { padding: 12px 8px; } .c-feature { font-size: .82rem; } .compare-header > span { font-size: .64rem; padding-inline: 6px; } }
        .segment-meta .seg-arrow { display: inline-flex; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
        html[dir="rtl"] .segment-meta .seg-arrow { transform: scaleX(-1); }
        .segment-card:hover .segment-meta .seg-arrow { transform: translateX(4px); }
        html[dir="rtl"] .segment-card:hover .segment-meta .seg-arrow { transform: scaleX(-1) translateX(4px); }
        /* technologies marketing strip (glass badges) */
        .tech-strip { margin-top: clamp(30px, 4vw, 52px); text-align: center; }
        .tech-label { color: var(--muted); font-size: .82rem; font-weight: 600; letter-spacing: .04em; margin: 0 0 18px; }
        .tech-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
        .tech-badge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--text); letter-spacing: -.01em;
            background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.18)); border: 1px solid rgba(255,255,255,.6);
            -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
            box-shadow: 0 12px 26px -16px rgba(17,24,39,.34), inset 0 1px 0 rgba(255,255,255,.55);
            filter: grayscale(1); opacity: .6;
            transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s, filter .3s ease, opacity .3s ease; }
        .tech-badge:hover { transform: translateY(-3px); filter: grayscale(0); opacity: 1; box-shadow: 0 18px 32px -16px rgba(17,24,39,.42), inset 0 1px 0 rgba(255,255,255,.6); border-color: color-mix(in srgb, var(--v-600) 38%, rgba(255,255,255,.6)); }
        .tech-badge .t-emo { display: inline-flex; }
        .tech-badge .t-emo svg { width: 18px; height: 18px; display: block; color: var(--muted); transition: color .3s ease, transform .3s ease; }
        .tech-badge:hover .t-emo svg { color: var(--v-600); transform: scale(1.08); }
        html[data-theme="dark"] .tech-badge .t-emo svg { color: rgba(255,255,255,.55); }
        html[data-theme="dark"] .tech-badge:hover .t-emo svg { color: var(--v-300); }
        html[data-theme="dark"] .tech-badge { background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.12); box-shadow: 0 12px 26px -16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
        .quick-tags { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 30px; }
        .quick-tags span { padding: 8px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: .88rem; font-weight: 600; transition: .2s; }
        .quick-tags span:hover { border-color: var(--v-500); color: var(--v-700); transform: translateY(-2px); }

        /* Features bento */
        .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 16px; }
        .feat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; transition: transform .3s, box-shadow .3s; }
        .feat:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
        .feat .f-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 1.35rem; background: linear-gradient(135deg, var(--v-500), var(--v-700)); color: #fff; margin-bottom: 16px; }
        .feat h3 { font-size: 1.08rem; margin-bottom: 7px; }
        .feat p { color: var(--muted); font-size: .9rem; margin: 0; }
        .feat.wide { grid-column: span 2; }
        .feat.tall { grid-row: span 2; }
        .feat.dark { background: linear-gradient(150deg, var(--ink-2), var(--v-900)); color: var(--text-dark); border-color: transparent; position: relative; overflow: hidden; }
        .feat.dark p { color: var(--muted-dark); }
        .feat.dark .f-ico { background: rgba(255,255,255,.12); }
        .feat.dark::before { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(167,139,250,.5), transparent 70%); top: -60px; inset-inline-end: -40px; filter: blur(20px); }

        /* Feature explorer (tabs + bento) */
        .fx { margin-top: 8px; }
        .fx-tabs { display: flex; gap: 9px; overflow-x: auto; padding: 6px; margin-bottom: 26px; scrollbar-width: none; scroll-snap-type: x proximity; }
        .fx-tabs::-webkit-scrollbar { display: none; }
        .fx-tab {
            display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; scroll-snap-align: start;
            font-family: var(--font); font-weight: 700; font-size: .92rem; cursor: pointer;
            padding: 10px 16px; border-radius: 999px; white-space: nowrap;
            background: var(--surface); color: var(--muted); border: 1px solid var(--line);
            transition: all .22s;
        }
        .fx-tab .fx-emo { font-size: 1.05rem; }
        .fx-tab:hover { color: var(--text); border-color: var(--v-400); transform: translateY(-2px); }
        .fx-tab.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--fxc, var(--v-600)), color-mix(in srgb, var(--fxc, var(--v-700)) 70%, #000 12%)); box-shadow: 0 12px 24px -12px var(--fxc, var(--v-600)); }
        .fx-tab .fx-count { font-size: .72rem; opacity: .7; font-weight: 600; }

        .fx-panel { display: none; }
        .fx-panel.active { display: block; animation: fxIn .45s cubic-bezier(.2,.8,.2,1); }
        @keyframes fxIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
        .fx-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
        .fx-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; transition: transform .25s, box-shadow .25s, border-color .25s; }
        .fx-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); border-color: color-mix(in srgb, var(--fxc, var(--v-500)) 45%, transparent); }
        .fx-card .fx-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; margin-bottom: 13px; background: color-mix(in srgb, var(--fxc, var(--v-500)) 12%, white); border: 1px solid color-mix(in srgb, var(--fxc, var(--v-500)) 26%, transparent); }
        .fx-card h4 { font-family: var(--font); font-weight: 700; font-size: 1rem; margin: 0 0 5px; }
        .fx-card p { color: var(--muted); font-size: .85rem; margin: 0; line-height: 1.55; }
        .fx-card.hidden { display: none; }
        /* card as button */
        button.fx-card { width: 100%; text-align: inherit; cursor: pointer; font-family: var(--font); color: inherit; position: relative; }
        .fx-card-more { display: block; margin-top: 11px; font-size: .76rem; font-weight: 700; color: var(--fxc, var(--v-600)); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
        .fx-card:hover .fx-card-more, .fx-card:focus-visible .fx-card-more { opacity: 1; transform: none; }

        /* Detail modal */
        .fx-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
        .fx-modal[hidden] { display: none; }
        .fx-modal-scrim { position: absolute; inset: 0; background: rgba(12, 5, 23, .55); backdrop-filter: blur(4px); animation: fxFade .25s ease; }
        @keyframes fxFade { from { opacity: 0; } to { opacity: 1; } }
        .fx-modal-card { position: relative; z-index: 1; width: min(480px, 100%); background: var(--surface); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow); border-top: 4px solid var(--fxc, var(--v-600)); animation: fxPop .3s cubic-bezier(.2,.9,.3,1.2); }
        @keyframes fxPop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
        .fx-modal-x { position: absolute; top: 14px; inset-inline-end: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: .2s; }
        .fx-modal-x:hover { color: var(--text); border-color: var(--v-400); }
        .fx-modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
        .fx-modal-ico { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.8rem; background: color-mix(in srgb, var(--fxc, var(--v-500)) 14%, white); border: 1px solid color-mix(in srgb, var(--fxc, var(--v-500)) 28%, transparent); }
        .fx-modal-mod { font-size: .78rem; font-weight: 700; color: var(--fxc, var(--v-700)); }
        .fx-modal-card h3 { font-size: 1.4rem; margin: 2px 0 0; }
        .fx-modal-sub { color: var(--text); font-weight: 600; font-size: .98rem; margin: 0 0 8px; }
        .fx-modal-long { color: var(--muted); font-size: .95rem; line-height: 1.75; margin: 0 0 22px; }
        .fx-modal-cta { width: 100%; }

        /* In-modal UI preview (designed mock, accent-tinted, language-neutral) */
        .fx-mock { margin: 4px 0 20px; border-radius: 16px; padding: 16px; background: linear-gradient(150deg, color-mix(in srgb, var(--fxc, var(--v-500)) 16%, white), color-mix(in srgb, var(--fxc, var(--v-500)) 4%, white)); border: 1px solid color-mix(in srgb, var(--fxc, var(--v-500)) 22%, transparent); }
        .fx-mock:empty { display: none; }
        .mk { display: flex; flex-direction: column; gap: 9px; }
        .mk-row { display: flex; gap: 9px; align-items: center; }
        .mk-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; flex: 1; box-shadow: 0 5px 14px -9px rgba(40,12,84,.35); }
        .mk-tile { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 6px; text-align: center; font-size: 1.15rem; box-shadow: 0 5px 14px -9px rgba(40,12,84,.3); }
        .mk-chip { font-size: .64rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--fxc, var(--v-500)) 16%, white); color: color-mix(in srgb, var(--fxc, var(--v-700)) 80%, #222); white-space: nowrap; }
        .mk-chip.solid { background: var(--fxc, var(--v-600)); color: #fff; }
        .mk-line { height: 7px; border-radius: 5px; background: color-mix(in srgb, var(--fxc, var(--v-500)) 14%, #e9e4f5); flex: 1; }
        .mk-bar { flex: 1; height: 9px; border-radius: 6px; background: #ece7f6; overflow: hidden; }
        .mk-bar > i { display: block; height: 100%; background: var(--fxc, var(--v-600)); border-radius: 6px; }
        .mk-num { font-weight: 800; font-size: .9rem; color: color-mix(in srgb, var(--fxc, var(--v-700)) 80%, #111); }
        .mk-ico { font-size: 1.05rem; }
        .mk-tick { color: var(--fxc, var(--v-600)); font-weight: 800; }
        .mk-bars { display: flex; align-items: flex-end; gap: 6px; height: 50px; }
        .mk-bars > i { flex: 1; background: color-mix(in srgb, var(--fxc, var(--v-500)) 55%, #d9d0ee); border-radius: 4px 4px 0 0; }
        .mk-nodes { flex-direction: row; align-items: center; justify-content: space-between; }
        .mk-node { width: 40px; height: 40px; border-radius: 11px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.05rem; box-shadow: 0 5px 14px -9px rgba(40,12,84,.3); }
        .mk-node.hub { background: var(--fxc, var(--v-600)); border-color: transparent; }
        .mk-link { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--fxc, var(--v-600)) 0 5px, transparent 5px 10px); margin: 0 5px; opacity: .55; }
        .mk-toggle { width: 32px; height: 18px; border-radius: 999px; background: var(--fxc, var(--v-600)); position: relative; flex: 0 0 auto; }
        .mk-toggle::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
        .mk-toggle.off { background: #d9d2ea; }
        .mk-toggle.off::after { inset-inline-start: auto; inset-inline-end: 2px; }

        /* Language globe dropdown */
        .lang-switch { position: relative; padding: 0; border: none; background: none; border-radius: 0; gap: 0; }
        .lang-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--font); font-weight: 600; font-size: .82rem; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px; transition: border-color .2s, color .2s, box-shadow .2s; }
        .lang-btn:hover { border-color: color-mix(in srgb, var(--v-600) 50%, transparent); color: var(--v-700); box-shadow: var(--shadow-soft); }
        .lang-btn svg { color: var(--v-600); }
        .lang-caret { font-size: .7rem; opacity: .6; }
        .lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 168px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 90; }
        .lang-switch.open .lang-menu { display: flex; animation: fxPop .2s ease; }
        .lang-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: .9rem; font-weight: 600; color: var(--text); transition: background .15s; }
        .lang-menu a:hover { background: var(--accent-soft); }
        .lang-menu a.on { color: var(--v-700); background: color-mix(in srgb, var(--v-500) 12%, white); }

        /* Theme toggle */
        .theme-btn { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 1.05rem; line-height: 1; display: grid; place-items: center; transition: border-color .2s, transform .25s, box-shadow .2s; }
        /* glowing comet that orbits the toggle from every side */
        .theme-btn::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
            background: conic-gradient(from 0deg, transparent 0 66%, var(--v-300), var(--v-500) 84%, var(--v-700) 92%, transparent 100%);
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
                    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            animation: themeOrbit 2.6s linear infinite; }
        @keyframes themeOrbit { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) { .theme-btn::before { animation: none; opacity: .5; } }
        .theme-btn:hover { border-color: color-mix(in srgb, var(--v-600) 50%, transparent); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
        .theme-btn .theme-ico { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
        .theme-btn:hover .theme-ico { transform: rotate(-18deg) scale(1.08); }

        /* Smarter tabs: disabled arrows + edge fade */
        .fx-arrow.is-disabled { opacity: .3; pointer-events: none; }
        .fx-tabs { -webkit-mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent); scroll-behavior: smooth; }
        .fx-tabbar.no-fade .fx-tabs { -webkit-mask-image: none; mask-image: none; }

        /* ============ DARK MODE ============ */
        body { transition: background-color .45s ease, color .45s ease; }
        /* Smooth cross-fade across the whole page while toggling theme */
        html.theme-transition,
        html.theme-transition *,
        html.theme-transition *::before,
        html.theme-transition *::after {
            transition: background-color .45s ease, border-color .45s ease, color .45s ease, fill .45s ease, box-shadow .45s ease !important;
        }
        html[data-theme="dark"] {
            color-scheme: dark;
            --paper: #0f0c1a;          /* deep indigo-black page base */
            --surface: #181430;        /* elevated cards/nav/inputs base */
            --surface-2: #201a3c;
            --text: #f3f4f6;
            --muted: #b3acc6;
            --line: rgba(154, 123, 192, .18);
            --hairline: rgba(255, 255, 255, .07);
            --ink: #0c0a18;
            --ink-2: #161130;
            --ink-3: #241c44;
            --shadow: 0 30px 60px -26px rgba(0, 0, 0, .7);
            --shadow-soft: 0 18px 44px -22px rgba(102, 51, 153, .4);
        }
        html[data-theme="dark"] .segment-icon { background: rgba(255,255,255,.08); }
        html[data-theme="dark"] .fx-card .fx-ico,
        html[data-theme="dark"] .fx-modal-ico { background: color-mix(in srgb, var(--fxc, var(--v-500)) 26%, #17103a); }
        html[data-theme="dark"] .price-card .badge { background: color-mix(in srgb, var(--accent) 24%, #17103a); color: color-mix(in srgb, var(--accent) 72%, white); }
        html[data-theme="dark"] .field input,
        html[data-theme="dark"] .field select,
        html[data-theme="dark"] .field textarea,
        html[data-theme="dark"] .access-option { background: #110a28; color: var(--text); border-color: var(--line); }
        html[data-theme="dark"] .field label,
        html[data-theme="dark"] .access-label { color: #d3c9f1; }
        html[data-theme="dark"] .access-option:has(input:checked) { background: color-mix(in srgb, var(--v-600) 26%, #110a28); }
        html[data-theme="dark"] .lang-menu a.on { background: color-mix(in srgb, var(--v-500) 24%, #17103a); color: var(--v-300); }
        html[data-theme="dark"] .fx-mock { background: linear-gradient(150deg, color-mix(in srgb, var(--fxc, var(--v-500)) 22%, #17103a), color-mix(in srgb, var(--fxc, var(--v-500)) 7%, #17103a)); }
        html[data-theme="dark"] .mk-card,
        html[data-theme="dark"] .mk-tile,
        html[data-theme="dark"] .mk-node { background: #221556; box-shadow: none; }
        html[data-theme="dark"] .mk-bar { background: #2e1f58; }
        html[data-theme="dark"] .mk-line { background: color-mix(in srgb, var(--fxc, var(--v-500)) 24%, #2e1f58); }
        html[data-theme="dark"] .mk-bars > i { background: color-mix(in srgb, var(--fxc, var(--v-500)) 62%, #2e1f58); }
        html[data-theme="dark"] .mk-chip { background: color-mix(in srgb, var(--fxc, var(--v-500)) 28%, #17103a); color: #ece5fb; }
        html[data-theme="dark"] .mk-num { color: #f0eaff; }
        html[data-theme="dark"] .mk-toggle.off { background: #3a2b5e; }
        html[data-theme="dark"] .fx-modal-x { color: var(--muted); }
        html[data-theme="dark"] .marquee { background: #0d0722; }

        /* Toolbar / search */
        .fx-toolbar { display: flex; justify-content: center; margin-bottom: 18px; }
        .fx-search { display: inline-flex; align-items: center; gap: 10px; width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 18px; transition: border-color .2s, box-shadow .2s; }
        .fx-search:focus-within { border-color: var(--v-500); box-shadow: 0 0 0 4px var(--accent-soft); }
        .fx-search-ico { font-size: 1rem; opacity: .7; }
        .fx-search input { flex: 1; min-width: 0; border: none; background: transparent; font-family: var(--font); font-size: .95rem; color: var(--text); padding: 9px 0; }
        .fx-search input:focus { outline: none; }

        /* Tab bar with arrows */
        .fx-tabbar { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; }
        .fx-tabbar .fx-tabs { margin-bottom: 0; flex: 1; }
        .fx-arrow { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--v-700); line-height: 1; display: grid; place-items: center; transition: border-color .2s, background .2s, transform .2s; }
        .fx-arrow:hover { border-color: var(--v-500); background: var(--accent-soft); transform: translateY(-2px); }
        /* Direction-locked chevrons (no bidi auto-mirroring); glyph chosen explicitly per side & dir */
        .fx-arrow::before { direction: ltr; unicode-bidi: isolate; font-size: 1.4rem; font-weight: 700; }
        .fx-arrow[data-fx-arrow="prev"]::before { content: "\2039"; }   /* ‹ */
        .fx-arrow[data-fx-arrow="next"]::before { content: "\203A"; }   /* › */
        html[dir="rtl"] .fx-arrow[data-fx-arrow="prev"]::before { content: "\203A"; } /* › on the right */
        html[dir="rtl"] .fx-arrow[data-fx-arrow="next"]::before { content: "\2039"; } /* ‹ on the left */

        /* Search results mode */
        .fx-panel-label { display: none; align-items: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 1.02rem; color: var(--fxc, var(--v-700)); margin: 4px 0 14px; }
        .fx.searching .fx-tabbar { display: none; }
        .fx.searching .fx-panel { display: block !important; margin-bottom: 26px; animation: none; }
        .fx.searching .fx-panel.no-match { display: none !important; }
        .fx.searching .fx-panel-label { display: inline-flex; }
        .fx-empty { text-align: center; color: var(--muted); padding: 40px 0; font-weight: 600; }

        /* Steps */
        .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
        .step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; }
        .step::before { counter-increment: step; content: "0" counter(step); position: absolute; top: 18px; inset-inline-end: 24px; font-weight: 800; font-size: 2.4rem; color: color-mix(in srgb, var(--v-500) 16%, transparent); }
        .step .s-ico { font-size: 1.8rem; }
        .step h3 { font-size: 1.1rem; margin: 10px 0 7px; }
        .step p { color: var(--muted); font-size: .92rem; margin: 0; }

        /* Trust */
        .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .trust-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px; text-align: center; }
        .trust-card strong { display: block; font-size: clamp(2rem, 4.5vw, 2.9rem); font-weight: 800; background: linear-gradient(135deg, var(--v-600), var(--v-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .trust-card span { color: var(--muted); font-size: .92rem; }

        /* Pricing */
        .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
        .price-card { display: flex; flex-direction: column; gap: 8px; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 28px; transition: transform .3s, box-shadow .3s; }
        .price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
        .price-card.is-featured { background: linear-gradient(165deg, var(--ink-2), var(--v-900)); color: var(--text-dark); border-color: transparent; transform: scale(1.03); box-shadow: var(--shadow); }
        .price-card.is-featured:hover { transform: scale(1.03) translateY(-6px); }
        .price-card .badge { align-self: flex-start; font-size: .72rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
        .price-card.is-featured .badge { background: var(--accent); color: #07210f; border-color: transparent; }
        .price-card h3 { font-size: 1.2rem; margin-top: 8px; }
        .price-card p { color: var(--muted); font-size: .92rem; margin: 4px 0 0; min-height: 2.6em; }
        .price-card.is-featured p { color: var(--muted-dark); }
        .price-card .price { font-size: 2.2rem; font-weight: 800; margin: 10px 0; }
        .price-card .price small { font-size: .85rem; font-weight: 500; color: var(--muted); }
        .price-card.is-featured .price small { color: var(--muted-dark); }
        .check-list { list-style: none; padding: 0; margin: 8px 0 24px; display: grid; gap: 11px; font-size: .93rem; }
        .check-list li { display: flex; gap: 10px; align-items: center; }
        .check-list li i { color: var(--v-600); }
        .price-card.is-featured .check-list li i { color: var(--accent); }
        .price-card .btn { margin-top: auto; width: 100%; border: 1px solid var(--line); }
        .price-card.is-featured .btn:not(.btn-primary) { border-color: rgba(255,255,255,.25); color: #fff; }

        /* Final / request */
        .final-band { background: var(--ink); color: var(--text-dark); position: relative; overflow: hidden; }
        .final-band .grain2 { position: absolute; inset: 0; opacity: .4; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
        .final-layout { position: relative; z-index: 2; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 5vw, 56px); align-items: start; }
        .final-copy h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-top: 14px; }
        .final-copy p { color: var(--muted-dark); margin: 16px 0 0; }

        .request-card { background: var(--surface); color: var(--text); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow); }
        .alert { background: rgba(180,35,24,.1); border: 1px solid rgba(180,35,24,.35); color: #b42318; padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; font-size: .9rem; }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .field { display: flex; flex-direction: column; gap: 7px; }
        .field.full { grid-column: 1 / -1; }
        .field label, .access-label { font-weight: 700; font-size: .88rem; color: #3a3357; }
        .field input, .field select, .field textarea {
            font-family: var(--font); font-size: .95rem; color: var(--text);
            padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: #faf9ff; width: 100%;
            transition: border-color .2s, box-shadow .2s;
        }
        .ifgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .ifield { display: flex; flex-direction: column; gap: 6px; }
        .ifield.full { grid-column: 1 / -1; }
        .ifield label { font-size: .82rem; font-weight: 700; color: var(--text); }
        .ifield input, .ifield select, .ifield textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
        .country-select-wrap, .phone-input-row { width: 100%; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
        .country-select-wrap:focus-within, .phone-input-row:focus-within { border-color: var(--v-500); box-shadow: 0 0 0 4px var(--accent-soft); }
        .country-flag { flex: 0 0 auto; padding: 0 0 0 13px; font-size: 1.15rem; line-height: 1; }
        html[dir="rtl"] .country-flag { padding: 0 13px 0 0; }
        .country-select-wrap select, .phone-input-row input { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; min-width: 0; }
        .country-select-wrap select:focus, .phone-input-row input:focus { box-shadow: none !important; }
        .phone-prefix { flex: 0 0 auto; align-self: stretch; display: grid; place-items: center; padding: 0 13px; border-inline-end: 1px solid var(--line); background: color-mix(in srgb, var(--v-600) 7%, var(--surface)); color: var(--v-700); font-weight: 800; direction: ltr; }
        .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--v-500); box-shadow: 0 0 0 4px var(--accent-soft); }
        .field textarea { min-height: 86px; resize: vertical; }
        .form-error { color: #b42318; font-size: .8rem; }
        .checkbox-row { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: .9rem; color: var(--text); cursor: pointer; }
        .checkbox-row input { width: auto; }
        .form-options { display: grid; gap: 10px; }
        .access-option { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; background: #faf9ff; transition: border-color .2s, background .2s; position: relative; }
        .access-option:hover { border-color: var(--v-400); }
        .access-option:has(input:checked) { border-color: var(--v-600); background: var(--accent-soft); }
        .access-option input { width: auto; position: absolute; inset-inline-end: 12px; top: 14px; }
        .access-option strong { font-size: .92rem; }
        .access-option span { color: var(--muted); font-size: .8rem; }
        .form-note { color: var(--muted); font-size: .82rem; margin: 12px 0 0; }
        .request-card .btn { width: 100%; }
        .request-card .btn[disabled] { opacity: .5; cursor: not-allowed; }

        /* Footer */
        .footer { position: relative; background: var(--ink); color: var(--muted-dark); padding-block: clamp(38px, 4.5vw, 58px) 24px; overflow: hidden; }
        .footer::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v-400) 50%, transparent), transparent); }
        .footer::after { content: ""; position: absolute; top: -120px; inset-inline-start: 50%; transform: translateX(-50%); width: 540px; height: 280px; background: radial-gradient(circle, color-mix(in srgb, var(--v-600) 26%, transparent), transparent 68%); filter: blur(50px); pointer-events: none; }
        .footer-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.7fr .85fr .85fr 1.2fr; gap: 32px; align-items: start; }
        .footer-grid > div:first-child { max-width: 320px; }
        .footer-activities { padding-top: 30px; }
        /* activities shown in two compact columns instead of a long stack */
        .footer-links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; }
        /* footer CTA band */
        .footer-cta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-bottom: clamp(24px, 3vw, 36px); margin-bottom: clamp(26px, 3vw, 38px); border-bottom: 1px solid rgba(255,255,255,.1); }
        .footer-cta-title { color: #fff; font-family: var(--font-display); font-size: clamp(1.3rem, 2.3vw, 1.7rem); font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; }
        .footer-cta > div:first-child p { color: var(--muted-dark); margin: 0; max-width: 520px; font-size: .95rem; }
        .footer-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
        .footer-cta-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
        .footer-cta-outline:hover { color: #fff; border-color: var(--v-400); background: rgba(255,255,255,.07); box-shadow: none; }
        .fb-made { color: var(--muted-dark); font-size: .82rem; opacity: .8; }
        .footer-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; font-size: 1.2rem; margin-bottom: 18px; }
        .footer-brand img { height: 34px; width: auto; }
        .footer p { max-width: 300px; font-size: .92rem; line-height: 1.7; margin: 0 0 18px; }
        .footer small { display: block; color: var(--muted-dark); opacity: .6; font-size: .78rem; margin-top: 18px; }
        .footer-social { display: flex; flex-direction: column; gap: 10px; }
        .footer-social a { width: 38px; height: 38px; border-radius: 11px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); display: grid; place-items: center; color: var(--muted-dark); transition: color .2s, border-color .2s, background .2s, transform .2s; }
        .footer-social a:hover { color: #fff; border-color: color-mix(in srgb, var(--v-400) 60%, transparent); background: rgba(124,58,237,.2); transform: translateY(-2px); }
        .footer-social svg { width: 18px; height: 18px; }
        .footer h3 { color: #fff; font-family: var(--font-display); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; opacity: .85; }
        html[dir="rtl"] .footer h3 { letter-spacing: .02em; }
        .footer-grid a { display: inline-flex; padding: 5px 0; font-size: .92rem; transition: color .2s, transform .2s; }
        .footer-grid > div > a { display: block; }
        .footer-grid a:hover { color: var(--v-300); transform: translateX(3px); }
        html[dir="rtl"] .footer-grid a:hover { transform: translateX(-3px); }
        /* footer bottom bar (copyright + utility links) */
        .footer-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.5vw, 32px); padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }
        .fb-copy { color: var(--muted-dark); font-size: .82rem; opacity: .8; }
        .fb-links { display: inline-flex; gap: 22px; }
        .fb-links a { color: var(--muted-dark); font-size: .82rem; transition: color .2s; }
        .fb-links a:hover { color: var(--v-300); }
        @media (max-width: 640px) { .footer-bottom { justify-content: center; text-align: center; } }

        /* Reveal */
        .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--delay, 0s); }
        .reveal.is-visible { opacity: 1; transform: none; }

        /* Responsive */
        @media (max-width: 980px) {
            .nav-menu { display: none; }
            .mobile-menu-btn { display: flex; }
            .nav-actions .mini-link, .nav-actions > .btn-primary { display: none; }
            .nav-actions { gap: 8px; }
            .hero { padding-top: calc(var(--header-h) + 26px); }
            .hero-grid2 { grid-template-columns: 1fr; gap: 26px; }
            .hero-copy2 { text-align: center; }
            .hero-copy2 .hero-lead { margin-inline: auto; }
            .hero-copy2 .hero-actions { justify-content: center; }
            .hero-shots-inner { max-width: 420px; }
            .orbit-stage { height: clamp(360px, 80vw, 500px); }
            .orbit-cashier { max-width: 76%; }
            .orbit-img { max-width: calc(var(--s, 120px) * .66); max-height: calc(var(--s, 120px) * .66); }
            .hero-inner { grid-template-columns: 1fr; }
            .pos-stage { max-width: 480px; }
            .hero-proof { grid-template-columns: repeat(2, 1fr); }
            .final-layout { grid-template-columns: 1fr; }
            .bento { grid-template-columns: repeat(2, 1fr); }
            .fx-bento { grid-template-columns: repeat(2, 1fr); }
            .feat.tall { grid-row: span 1; }
            .steps { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 640px) {
            .segment-grid, .trust-grid, .pricing-grid, .bento, .steps, .form-grid, .fx-bento { grid-template-columns: 1fr; }
            .feat.wide { grid-column: span 1; }
            .price-card.is-featured { transform: none; }
            .price-card.is-featured:hover { transform: translateY(-6px); }
            .pos { grid-template-columns: 1fr; }
            .hero-proof { grid-template-columns: 1fr 1fr; }
            .footer-grid { grid-template-columns: 1fr; }
        }

        /* Mobile menu: dimmed scrim + slide-in side drawer */
        .menu-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(8, 3, 18, .5); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .32s ease, visibility .32s ease; }
        body.nav-open .menu-scrim { opacity: 1; visibility: visible; }
        .mobile-drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 71; width: min(330px, 86vw); display: flex; flex-direction: column; background: var(--surface); border-inline-start: 1px solid var(--line); box-shadow: 0 0 60px -8px rgba(0, 0, 0, .5); transform: translateX(110%); pointer-events: none; transition: transform .4s cubic-bezier(.2,.85,.25,1); }
        html[dir="rtl"] .mobile-drawer { transform: translateX(-110%); }
        body.nav-open .mobile-drawer { transform: none; pointer-events: auto; }
        .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
        .drawer-title { font-family: var(--font); font-weight: 800; font-size: 1.05rem; color: var(--text); }
        .drawer-close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--text); font-size: 1rem; cursor: pointer; display: grid; place-items: center; transition: transform .25s ease, border-color .2s, color .2s; }
        .drawer-close:hover { border-color: var(--v-500); color: var(--v-700); transform: rotate(90deg); }
        .drawer-links { display: flex; flex-direction: column; gap: 3px; padding: 14px; overflow-y: auto; }
        .drawer-links a { padding: 13px 15px; border-radius: 12px; color: var(--text); font-weight: 600; font-size: 1rem; transition: background .15s, color .15s, transform .15s; }
        .drawer-links a:hover, .drawer-links a:active { background: var(--accent-soft); color: var(--v-700); }
        html[dir="rtl"] .drawer-links a:hover { transform: translateX(-3px); }
        .drawer-links a:hover { transform: translateX(3px); }
        .drawer-links .drawer-cta { margin-top: 12px; background: linear-gradient(135deg, var(--v-500), var(--v-700)); color: #fff; text-align: center; box-shadow: 0 12px 26px -12px rgba(124,58,237,.7); }
        .drawer-links .drawer-cta:hover { color: #fff; transform: none; filter: brightness(1.06); }
        /* Staggered link reveal when the drawer opens */
        body.nav-open .drawer-links a { animation: drawerItem .4s cubic-bezier(.2,.8,.2,1) both; }
        body.nav-open .drawer-links a:nth-child(1) { animation-delay: .06s; }
        body.nav-open .drawer-links a:nth-child(2) { animation-delay: .10s; }
        body.nav-open .drawer-links a:nth-child(3) { animation-delay: .14s; }
        body.nav-open .drawer-links a:nth-child(4) { animation-delay: .18s; }
        body.nav-open .drawer-links a:nth-child(5) { animation-delay: .22s; }
        body.nav-open .drawer-links a:nth-child(6) { animation-delay: .26s; }
        @keyframes drawerItem { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

        /* ============================================================
           REELERS-STYLE HERO — neutral premium, rounded stage,
           two-column with floating glass cards. Overrides above.
           ============================================================ */
        body { background: #ffffff; }
        html[data-theme="dark"] body { background: var(--paper); }

        .hero {
            position: relative; overflow: hidden;
            margin: clamp(8px, 1vw, 14px);
            margin-top: calc(var(--header-h) + clamp(2px, 0.5vw, 6px));
            border-radius: clamp(22px, 2.4vw, 34px);
            background: linear-gradient(180deg, #c9cbd0 0%, #dcdee2 30%, #edeef1 64%, #ffffff 100%);
            box-shadow: 0 50px 100px -60px rgba(17,24,39,.45), inset 0 0 0 1px rgba(17,24,39,.05);
            padding: clamp(16px, 2.2vw, 30px) clamp(20px, 3vw, 54px) clamp(12px, 1.4vw, 20px);
        }
        html[data-theme="dark"] .hero { background: linear-gradient(177deg, #1c1740 0%, #15122c 55%, var(--paper) 100%); box-shadow: 0 50px 100px -60px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.05); }
        /* drop the old textured/aurora layers in favour of the clean stage */
        .hero::before { content: none; }
        .hero-bg { background-image: none; -webkit-mask-image: none; mask-image: none; }
        .hero-bg::before, .hero-bg::after { display: none; }

        .hero-stage { position: relative; z-index: 2; display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(22px, 4vw, 58px); align-items: center; max-width: var(--maxw); margin-inline: auto; }
        .hero-col-copy { text-align: start; }
        .hero-col-copy.hero-typo { max-width: none; padding-block: 0; }
        .hero-col-copy .kicker { background: var(--surface); border-color: var(--line); color: var(--text); box-shadow: var(--shadow-soft); }
        .hero-col-copy .kicker .dot { background: var(--v-600); box-shadow: 0 0 0 3px var(--accent-soft); }
        .hero-col-copy .hero-title { font-size: clamp(2.7rem, 6.2vw, 5.3rem); line-height: 1.02; letter-spacing: -.035em; margin-top: 20px; font-weight: 800; }
        html[dir="rtl"] .hero-col-copy .hero-title { letter-spacing: -.01em; line-height: 1.14; }
        .hero-col-copy .rotator { height: 1.06em; }
        .hero-col-copy .hero-lead { margin-inline: 0; margin-top: 22px; max-width: 460px; font-size: clamp(1rem, 1.5vw, 1.12rem); }
        .hero-col-copy .hero-uline { margin-inline: 0; }
        .hero-col-copy .hero-actions { justify-content: flex-start; margin-top: 30px; }

        /* social-proof rating row (like the reference) */
        .hero-rating { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
        .hero-rating .avatars { display: inline-flex; }
        .hero-rating .avatars span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); display: grid; place-items: center; font-size: 1rem; margin-inline-start: -10px; background: var(--surface-2); box-shadow: var(--shadow-soft); }
        .hero-rating .avatars span:first-child { margin-inline-start: 0; }
        .hero-rating .rate-txt strong { display: block; font-size: .9rem; font-weight: 700; color: var(--text); }
        .hero-rating .rate-txt span { font-size: .8rem; color: var(--muted); }
        .hero-rating .stars { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--text); font-size: .95rem; }
        .hero-rating .stars b { color: #f5a623; }
        /* flipping customer testimonials (social proof) */
        .hero-reviews { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
        .rv-avatars { display: inline-flex; flex: 0 0 auto; }
        .rv-avatars span { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--surface); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: #fff; margin-inline-start: -12px; box-shadow: 0 5px 14px -5px rgba(17,24,39,.45); }
        .rv-avatars span:first-child { margin-inline-start: 0; }
        .rv-main { min-width: 0; }
        .rv-stars-row { display: flex; align-items: center; gap: 8px; }
        .rv-stars { color: #f5a623; font-size: .82rem; letter-spacing: 2px; }
        .rv-rate { color: var(--text); font-weight: 800; font-size: .92rem; }
        .rv-count { color: var(--muted); font-size: .8rem; }
        .rv-flip { margin-top: 4px; transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .38s ease; }
        .rv-flip.flipping { transform: translateY(-35%); opacity: 0; }
        .rv-quote { font-size: .9rem; color: var(--text); font-weight: 600; }
        .rv-name { font-size: .82rem; color: var(--muted); margin-inline-start: 6px; white-space: nowrap; }
        @media (prefers-reduced-motion: reduce) { .rv-flip { transition: opacity .2s; } }
        @media (max-width: 980px) { .hero-reviews { justify-content: center; } }

        /* ---- right visual panel + glass cards ---- */
        .hero-col-visual { position: relative; }
        .hero-panel { position: relative; width: 100%; max-width: 400px; margin-inline: auto; aspect-ratio: 1 / 1.04; border-radius: 28px; overflow: visible;
            background: linear-gradient(150deg, #5830c5 0%, #a82fd8 50%, #d6249e 100%);
            box-shadow: 0 40px 80px -34px rgba(166,47,168,.5); }
        .hero-panel::after { content: ""; position: absolute; inset: 0; border-radius: 28px; background: radial-gradient(120% 80% at 30% 0, rgba(255,255,255,.28), transparent 56%); }
        .hero-panel .panel-grid { position: absolute; inset: 0; border-radius: 28px; background-image: radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px); background-size: 22px 22px; opacity: .5; }
        /* POS device image, sitting cleanly inside the purple square (nothing floating on top) */
        .hero-pos-img { position: absolute; left: 50%; top: 53%; transform: translate(-50%,-50%); width: 84%; max-height: 86%; object-fit: contain; z-index: 3; filter: drop-shadow(0 30px 46px rgba(0,0,0,.5)); animation: posBob 6s ease-in-out infinite; }
        .hero-pos-img[data-cashier-rotator] { transition: opacity .34s ease; }
        .hero-pos-img[data-cashier-rotator].is-switching { opacity: 0; }
        @keyframes posBob { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%, calc(-50% - 8px)); } }
        @media (prefers-reduced-motion: reduce) { .hero-pos-img { animation: none; } }

        .glass { position: absolute; z-index: 4; background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.24)); border: 1px solid rgba(255,255,255,.65); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: 0 20px 42px -18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.45); border-radius: 18px; color: #15101f; }
        /* top notification chip */
        .glass-note { top: 14%; inset-inline-start: -6%; display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-size: .82rem; font-weight: 700; animation: floatA 5s ease-in-out infinite; }
        .glass-note .tick { width: 20px; height: 20px; border-radius: 6px; background: #2ecc71; display: grid; place-items: center; color: #fff; font-size: .7rem; }
        .glass-note .tick.blue { background: #3aa0ff; }
        .glass-note2 { top: 25%; inset-inline-start: 2%; }
        /* big stat card */
        .glass-stat { top: 9%; inset-inline-end: -7%; padding: 16px 18px; min-width: 150px; animation: floatB 6s ease-in-out infinite; }
        .glass-stat small { font-size: .64rem; font-weight: 700; letter-spacing: .12em; opacity: .85; text-transform: uppercase; }
        .glass-stat b { display: block; font-family: var(--font-display); font-size: 2.3rem; font-weight: 800; line-height: 1; margin: 4px 0; }
        .glass-stat span { font-size: .78rem; opacity: .9; line-height: 1.35; display: block; }
        /* product card */
        .glass-product { bottom: 7%; inset-inline-end: -6%; display: flex; gap: 12px; align-items: center; padding: 12px; width: 248px; animation: floatA 6.5s ease-in-out infinite; }
        .glass-product .thumb { width: 62px; height: 62px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; font-size: 1.8rem; background: linear-gradient(145deg,#fff,#eef0f3); box-shadow: 0 8px 18px -8px rgba(0,0,0,.4); }
        .glass-product .info { min-width: 0; }
        .glass-product .info .nm { font-size: .82rem; font-weight: 700; line-height: 1.25; }
        .glass-product .info .pr { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; margin-top: 2px; }
        .glass-product .info .rt { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .72rem; font-weight: 700; background: rgba(21,16,31,.07); padding: 2px 8px; border-radius: 999px; }
        .glass-product .info .rt b { color: #f5a623; }
        @keyframes floatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
        @keyframes floatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
        @media (prefers-reduced-motion: reduce) { .glass { animation: none !important; } }

        /* flipping cards: cycle to other POS terms & icons */
        .glass { perspective: 700px; }
        .glass .flip-inner { transform-origin: center; backface-visibility: hidden; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s; }
        .glass.flipping .flip-inner { transform: rotateX(-90deg); opacity: 0; }
        .glass-note .flip-inner { display: flex; align-items: center; gap: 9px; }
        .glass-stat .flip-inner { display: block; }
        @media (prefers-reduced-motion: reduce) { .glass .flip-inner { transition: none; } }

        /* hero-proof becomes a clean full-width band inside the stage */
        .hero .hero-proof { max-width: var(--maxw); margin-inline: auto; background: transparent; border: none; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; margin-top: clamp(34px, 4vw, 56px); }

        /* trust strip */
        .trust-strip { padding: clamp(14px, 1.6vw, 22px) 0 clamp(6px, 1vw, 10px); }
        .trust-strip .trust-label { text-align: center; color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 20px; }
        .trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px); }
        .trust-row .t-item { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-weight: 700; font-size: 1rem; opacity: .7; transition: opacity .2s, color .2s; }
        .trust-row .t-item:hover { opacity: 1; color: var(--text); }
        .trust-row .t-item .t-ico { font-size: 1.3rem; filter: grayscale(1); transition: filter .2s; }
        .trust-row .t-item:hover .t-ico { filter: grayscale(0); }
        /* example customer logos */
        .trust-row .t-logo { display: inline-flex; align-items: center; gap: 9px; filter: grayscale(1); opacity: .55; transition: filter .25s, opacity .25s, transform .25s; }
        .trust-row .t-logo:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }
        .t-logo { display: inline-flex; align-items: center; gap: 9px; filter: grayscale(1); opacity: .5; transition: filter .45s ease, opacity .45s ease, transform .45s ease; }
        .t-logo.is-center { filter: grayscale(0); opacity: 1; transform: scale(1.1); }
        .t-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--lc); color: #fff; display: grid; place-items: center; font-size: 1rem; flex: 0 0 auto; box-shadow: 0 5px 12px -5px var(--lc); }
        .t-name { font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; color: var(--text); letter-spacing: -.01em; white-space: nowrap; }
        .t-name b { font-weight: 800; color: var(--lc); }
        /* distinct per-logo styles so the examples don't all look alike */
        .tl-2 .t-mark { border-radius: 50%; background: color-mix(in srgb, var(--lc) 12%, #fff); color: var(--lc); border: 1.6px solid var(--lc); box-shadow: none; font-weight: 800; font-size: .9rem; }
        .tl-2 .t-name { font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .07em; }
        .tl-3 .t-name { font-weight: 800; font-size: 1.14rem; letter-spacing: -.03em; }
        .tl-4 .t-mark { background: transparent; border: 1.6px solid color-mix(in srgb, var(--lc) 55%, transparent); color: var(--lc); box-shadow: none; border-radius: 8px; }
        .tl-4 .t-name { font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .09em; color: var(--lc); }
        .tl-4 .t-name b { color: var(--text); }
        .tl-5 .t-mark { background: none; box-shadow: none; width: auto; height: auto; font-size: 1.55rem; }
        .tl-5 .t-name { font-weight: 500; font-style: italic; font-size: 1.08rem; letter-spacing: 0; }
        .tl-5 .t-name b { font-style: normal; font-weight: 700; }
        .tl-6 .t-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--lc), color-mix(in srgb, var(--lc) 55%, #000)); font-weight: 800; font-size: .82rem; letter-spacing: .02em; }
        .tl-6 .t-name { font-weight: 700; }
        .trust-note { text-align: center; color: var(--muted); font-size: .72rem; opacity: .6; margin: 18px 0 0; }
        /* rotating word inside the label */
        .trust-rot { display: inline-block; color: var(--v-600); font-weight: 800; transition: opacity .3s ease, transform .3s ease; }
        .trust-rot.swap { opacity: 0; transform: translateY(-45%); }
        /* moving logo marquee */
        /* JS-driven seamless marquee: requestAnimationFrame moves the track with modulo
           wrapping (no CSS keyframe reset → zero flash / disappear on any browser). */
        .trust-marquee { margin-top: 22px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
        .trust-track { display: flex; gap: 56px; width: max-content; will-change: transform; }
        .trust-group { flex: 0 0 auto; display: flex; align-items: center; gap: 56px; min-width: 100vw; justify-content: space-around; }
        .trust-group .t-logo { flex: 0 0 auto; }
        @media (prefers-reduced-motion: reduce) { .trust-track { flex-wrap: wrap; justify-content: center; transform: none !important; } .trust-rot { transition: none; } .t-logo { filter: none; opacity: 1; } }

        @media (max-width: 980px) {
            .hero-stage { grid-template-columns: 1fr; }
            .hero-col-copy { text-align: center; }
            .hero-col-copy .hero-lead { margin-inline: auto; }
            .hero-col-copy .hero-uline { margin-inline: auto; }
            .hero-col-copy .hero-actions { justify-content: center; }
            .hero-col-copy .kicker { margin-inline: auto; }
            .hero-rating { justify-content: center; flex-wrap: wrap; }
            .hero-rating .stars { margin-inline-start: 0; }
            .hero-col-visual { margin-top: 30px; }
            .hero-panel { max-width: 360px; }
            .glass-note, .glass-note2 { inset-inline-start: 0; }
            .glass-stat { inset-inline-end: 0; }
            .glass-product { inset-inline-end: 0; }
        }

        /* Royal-purple flat identity: no visible gradients. */
        .brand-mark,
        .btn-primary,
        .drawer-links .drawer-cta,
        .feat .f-ico,
        .fx-tab.active,
        .compare-header .c-new,
        .c-yes,
        .hero-panel,
        .mk-node.hub,
        .mk-toggle,
        .t-mark,
        .tl-6 .t-mark {
            background: #5830c5 !important;
            background-image: none !important;
            color: #fff;
        }

        .hero,
        .section-stage,
        .segment-card,
        .tech-badge,
        .fx-card,
        .fx-mock,
        .glass,
        .glass-product .thumb,
        .price-card.is-featured,
        .feat.dark,
        html[data-theme="dark"] .hero,
        html[data-theme="dark"] .section-stage,
        html[data-theme="dark"] .segment-card,
        html[data-theme="dark"] .tech-badge,
        html[data-theme="dark"] .fx-card,
        html[data-theme="dark"] .fx-mock {
            background: var(--surface) !important;
            background-image: none !important;
        }

        .hero-grid,
        .hero-bloom,
        .hero-bloom.b2,
        .hero-shots-glow,
        .hero-panel::after,
        .hero-panel .panel-grid,
        .feat.dark::before,
        .footer::before,
        .footer::after {
            background: transparent !important;
            background-image: none !important;
        }

        .hero-typo .hero-uline::after,
        .mk-link {
            background: #5830c5 !important;
            background-image: none !important;
        }

        .trust-card strong {
            background: none !important;
            -webkit-background-clip: initial !important;
            background-clip: initial !important;
            color: #5830c5 !important;
        }

        .price-card.is-featured {
            color: var(--text) !important;
            border-color: #d8c8ff !important;
        }

        .price-card.is-featured .btn-primary {
            background: #5830c5 !important;
            color: #fff !important;
        }

        /* ============================================================
           Landing clarity pass: one customer journey, flat royal-purple
           accents, and deliberate small-screen behaviour.
           ============================================================ */
        .hero,
        .section-stage {
            background: var(--surface) !important;
            background-image: none !important;
        }
        html[data-theme="dark"] .hero,
        html[data-theme="dark"] .section-stage {
            background: var(--surface) !important;
        }
        .hero-panel {
            background: #5830c5 !important;
            background-image: none !important;
        }
        .hero-panel::after,
        .hero-panel .panel-grid {
            display: none;
        }
        .glass {
            background: var(--surface) !important;
            background-image: none !important;
            border-color: var(--line);
            box-shadow: 0 16px 32px -20px rgba(18, 12, 36, .38);
            color: var(--text);
        }
        html[data-theme="dark"] .glass {
            background: #211b35 !important;
            border-color: rgba(255, 255, 255, .16);
            color: #fff;
            box-shadow: 0 18px 34px -20px rgba(0, 0, 0, .72);
        }
        .glass-product .thumb {
            background: #f6f4fb !important;
            background-image: none !important;
        }
        html[data-theme="dark"] .glass-product .thumb { background: #2b2441 !important; }

        .hero-title-emphasis { color: #5830c5; }
        html[data-theme="dark"] .hero-title-emphasis { color: #c4b5fd; }
        .hero-typo .hero-uline {
            background: #5830c5 !important;
            background-image: none !important;
            animation: none;
        }
        .hero-col-copy .hero-title {
            font-size: clamp(2.7rem, 5.4vw, 4.65rem);
            line-height: 1.08;
        }
        .hero-sector-line {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin: 16px 0 0;
            color: var(--muted);
            font-size: .94rem;
            font-weight: 600;
        }
        .hero-sector-line .rotator { height: auto; overflow: visible; vertical-align: initial; }
        .hero-sector-line .rot-word {
            padding: 5px 10px;
            border-radius: 999px;
            border: 1px solid color-mix(in srgb, #5830c5 25%, var(--line));
            background: color-mix(in srgb, #5830c5 7%, var(--surface));
            color: #5830c5;
            font-size: .88rem;
        }
        .hero-sector-line .rw-em { display: none; }
        html[data-theme="dark"] .hero-sector-line .rot-word {
            border-color: rgba(196, 181, 253, .32);
            background: rgba(124, 58, 237, .14);
            color: #ddd6fe;
        }

        .hero-assurance {
            display: flex;
            align-items: center;
            gap: 12px;
            max-width: 460px;
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid var(--line);
            color: var(--muted);
            text-align: start;
        }
        .hero-assurance strong,
        .hero-assurance small { display: block; }
        .hero-assurance strong { color: var(--text); font-size: .93rem; }
        .hero-assurance small { margin-top: 3px; font-size: .82rem; line-height: 1.55; }
        .assurance-icon {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            border-radius: 10px;
            background: color-mix(in srgb, #16a34a 12%, var(--surface));
            color: #15803d;
        }
        .assurance-icon svg { width: 18px; height: 18px; }
        html[data-theme="dark"] .assurance-icon { background: rgba(34, 197, 94, .16); color: #86efac; }

        .drawer-note {
            margin-top: 14px;
            padding: 16px 14px;
            border: 1px solid var(--line);
            border-radius: 14px;
            color: var(--muted);
            background: var(--paper);
            font-size: .84rem;
            font-weight: 500;
            line-height: 1.65;
        }
        .drawer-links {
            flex: 1 1 auto;
            min-height: 0;
        }
        .drawer-links .drawer-cta { margin-top: auto; }

        .how-section {
            padding: clamp(64px, 9vw, 110px) 0;
            background: var(--paper);
            scroll-margin-top: var(--header-h);
        }
        .how-steps {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .how-step {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            min-width: 0;
            padding: 22px;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: var(--surface);
            box-shadow: 0 16px 30px -26px rgba(18, 12, 36, .4);
        }
        .how-number {
            width: 32px;
            height: 32px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            border-radius: 50%;
            background: #5830c5;
            color: #fff;
            font-family: var(--font-display);
            font-weight: 800;
        }
        .how-step h3 { margin: 1px 0 7px; color: var(--text); font-size: 1.02rem; }
        .how-step p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.65; }
        .how-action { display: flex; justify-content: center; margin-top: 26px; }
        html[data-theme="dark"] .how-section { background: var(--paper); }
        html[data-theme="dark"] .how-step { background: var(--surface); border-color: rgba(255, 255, 255, .1); }

        #why-marceen { scroll-margin-top: calc(var(--header-h) + 18px); }
        .footer-start-col > a { display: block; }

        @media (max-width: 980px) {
            .hero-assurance { margin-inline: auto; }
            .how-steps { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
        }

        @media (max-width: 640px) {
            .nav { min-width: 0; padding-inline: 18px; }
            .brand { gap: 8px; font-size: 1.05rem; min-width: 0; }
            .brand-mark { width: 29px; height: 29px; }
            .brand > span:not(.brand-mark) { display: none; }
            .nav-actions { gap: 6px; }
            .nav-divider { display: none; }
            .lang-btn { min-width: 74px; }
            .theme-btn, .mobile-menu-btn { flex: 0 0 auto; }

            .hero {
                margin: 0;
                margin-top: var(--header-h);
                border-radius: 0 0 28px 28px;
                /* Keep the heading clear of the compact mobile navigation controls. */
                padding: 70px 20px 30px;
            }
            .hero-stage,
            .hero-col-copy { width: 100%; min-width: 0; }
            .hero-stage { gap: 26px; }
            .hero-col-copy .kicker { display: none; }
            .hero-col-copy .hero-title {
                margin-top: 16px;
                font-size: clamp(2.4rem, 12vw, 3.25rem);
                line-height: 1.17;
                letter-spacing: 0;
                overflow-wrap: anywhere;
                white-space: normal;
            }
            html[dir="rtl"] .hero-col-copy .hero-title { letter-spacing: 0; line-height: 1.17; }
            .hero-title-emphasis { display: block; }
            .hero-sector-line { justify-content: center; margin-top: 14px; text-align: center; }
            .hero-col-copy .hero-lead { font-size: 1rem; line-height: 1.8; }
            .hero-assurance { align-items: flex-start; margin-top: 20px; text-align: start; }
            .hero-actions { width: 100%; gap: 10px; }
            .hero-actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; font-size: .94rem; }
            .hero-col-visual { margin-top: 4px; }
            .hero-panel { max-width: 320px; }
            .glass-note { inset-inline-start: -2%; }
            .glass-note2 { top: 28%; }
            .glass-stat { inset-inline-end: -2%; min-width: 128px; padding: 12px; }
            .glass-stat b { font-size: 1.6rem; }
            .glass-product { width: 208px; inset-inline-end: -1%; }

            .mobile-drawer { width: min(360px, 92vw); }
            .drawer-links { min-height: 0; padding: 16px; }
            .drawer-links .drawer-cta { margin-top: auto; }
            .drawer-note { margin-top: 14px; }
            .how-section { padding-block: 60px; }
            .how-step { padding: 18px; }
        }