/* Devlo — home page styles */
    :root {
        --cream: #ffffff; --cream-2: #f1f5fb; --white: #ffffff;
        --orange: #1f6bff; --amber: #6792ff; --deep: #0c5fe9;
        --ink: #0f1116; --ink-2: #1e222a; --muted: #575d6e; --line: rgba(15,17,22,.09);
        --dark: #08090d; --dark-2: #0e1117; --dline: rgba(255,255,255,.09); --dmuted: rgba(255,255,255,.58);
        --grad: linear-gradient(120deg, #4da3ff 0%, #1f6bff 50%, #0b3fd1 100%);
        --display: 'Archivo', system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif; --body: 'Inter', system-ui, sans-serif;
        --r: 26px; --wrap: 1240px; --ease: cubic-bezier(.22, 1, .36, 1);
    }
    * { box-sizing: border-box; }
    html { -webkit-font-smoothing: antialiased; }
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    body { margin: 0; background: var(--cream); color: var(--ink); font: 400 16px/1.6 var(--body); overflow-x: hidden; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    iconify-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; }
    .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
    em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
    .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 .74rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
    .eyebrow::before { content: ''; width: 9px; height: 9px; background: var(--orange); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
    .dark .eyebrow, .eyebrow.lt { color: var(--amber); }
    .h2 { font: 800 clamp(2.3rem, 4.6vw, 4.2rem)/1.02 var(--display); font-stretch: 92%; letter-spacing: -.035em; margin: 18px 0 0; }
    .h2 em { color: var(--orange); font-size: 1.08em; }
    .dark .h2 em { color: var(--amber); }
    .lead { color: var(--muted); font-size: 1.06rem; max-width: 520px; }
    .dark .lead { color: var(--dmuted); }
    section { position: relative; }
    .pad { padding: 140px 0; }
    .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 56px; }
    .dark { background: var(--dark); color: #ffffff; }

    .grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

    /* Buttons */
    .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font: 600 .95rem/1 var(--body);
        border: 0; cursor: pointer; transition: background .3s, color .3s, box-shadow .3s; will-change: transform; white-space: nowrap; }
    .btn-dark { background: var(--ink); color: #ffffff; box-shadow: 0 14px 30px rgba(15,17,22,.22); }
    .btn-dark:hover { background: var(--orange); box-shadow: 0 16px 34px rgba(26,104,255,.4); }
    .btn-ghost { background: rgba(255,255,255,.7); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(8px); }
    .btn-ghost:hover { background: #ffffff; }
    .btn-orange { background: var(--grad); color: #ffffff; box-shadow: 0 16px 34px rgba(26,104,255,.38), inset 0 1px 0 rgba(255,255,255,.35); }
    .btn-glass { background: linear-gradient(180deg, #22252b, #101217); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.4); }
    .btn .arrow { transition: transform .35s var(--ease); }
    .btn:hover .arrow { transform: translateX(4px) rotate(-45deg); }

    /* Browser frame around app screenshots */
    .frame { position: relative; border-radius: 18px; overflow: hidden; background: #ffffff; box-shadow: 0 50px 100px rgba(19,29,51,.18), 0 0 0 1px rgba(15,17,22,.08); }
    .frame .bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #f3f3f5; border-bottom: 1px solid var(--line); }
    .frame .bar i { width: 10px; height: 10px; border-radius: 50%; background: #c9cedd; }
    .frame .bar i:first-child { background: #5c99ff; }
    .frame .bar span { margin-left: 12px; padding: 3px 14px; border-radius: 999px; background: #ffffff; font: 500 .7rem var(--body); color: var(--muted); }
    .frame.dk { background: #101114; box-shadow: 0 50px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
    .frame.dk .bar { background: #15171c; border-color: rgba(255,255,255,.06); }
    .frame.dk .bar i { background: #2e323a; } .frame.dk .bar i:first-child { background: #3d83ff; }
    .frame.dk .bar span { background: #20232a; color: rgba(255,255,255,.5); }

    /* ── Intro ── */
    .intro { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--cream); }
    .intro::before { content: ''; position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%; background: radial-gradient(circle, rgba(60,122,255,.28), transparent 65%); }
    .intro .zlogo { width: min(460px, 76vw); position: relative; }
    .intro .skip { position: absolute; right: 26px; bottom: 24px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font: 500 .8rem var(--body); color: var(--muted); cursor: pointer; }
    .intro .count { position: absolute; left: 32px; bottom: 26px; font: 600 .8rem var(--body); color: var(--muted); letter-spacing: .12em; }
    html:not(.anim) .intro { display: none; }

    .zlogo { display: block; overflow: visible; color: var(--ink); }
    .zlogo [data-piece] { transform-box: fill-box; transform-origin: center; }
    .anim .zlogo.pre:not(.go) [data-piece] { opacity: 0; }
    .zlogo.go [data-piece="back"] { animation: layer-in .9s cubic-bezier(.22,1,.36,1) .05s both; }
    .zlogo.go [data-piece="middle"] { animation: layer-in .9s cubic-bezier(.22,1,.36,1) .2s both; }
    .zlogo.go [data-piece="front"] { animation: front-in 1s cubic-bezier(.34,1.4,.64,1) .35s both; }
    .zlogo.go [data-piece="letter"] { animation: letter-rise .6s cubic-bezier(.34,1.56,.64,1) calc(.7s + var(--i) * .07s) both; }
    .zlogo.go [data-piece="tagline"], .zlogo.go [data-piece="tag"] { opacity: 1; }
    .zlogo.go [data-piece="tag"] { animation: tag-up .4s ease-out calc(1.15s + var(--i) * .03s) both; }
    @keyframes layer-in { from { opacity: 0; transform: translate(-38%, 22%); } to { opacity: 1; transform: none; } }
    @keyframes front-in { from { opacity: 0; transform: translate(-30%, 18%) scale(.92); } to { opacity: 1; transform: none; } }
    @keyframes letter-rise { from { opacity: 0; transform: translateY(70px) scale(.6); } to { opacity: 1; transform: none; } }
    @keyframes tag-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

    /* ── Nav + Features mega menu ── */
    .nav { position: fixed; top: 16px; left: 50%; z-index: 60; width: min(1180px, calc(100% - 32px)); transform: translateX(-50%);
        display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 22px; border-radius: 999px;
        background: rgba(255,255,255,.66); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
        box-shadow: 0 10px 30px rgba(19,29,51,.06), inset 0 0 0 1px rgba(255,255,255,.7); transition: transform .5s var(--ease), background .4s, box-shadow .4s; }
    .nav.hide { transform: translate(-50%, -140%); }
    .nav.on-dark { background: rgba(13,15,20,.62); box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08); color: #ffffff; }
    .nav.on-dark .zlogo { color: #ffffff; }
    .nav.on-dark ul a, .nav.on-dark .menu-btn { color: rgba(255,255,255,.85); }
    .nav.on-dark .btn-ghost { background: rgba(255,255,255,.08); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
    .nav .brand .zlogo { width: 150px; }
    .nav .brand { display: block; padding: 2px 0; }
    .nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; align-items: center; }
    .nav ul a, .menu-btn { display: flex; align-items: center; gap: 4px; padding: 9px 15px; border-radius: 999px; font: 500 .9rem var(--body); color: var(--ink-2); transition: background .25s; background: none; border: 0; cursor: pointer; }
    .nav ul a:hover, .menu-btn:hover { background: rgba(90,100,128,.1); }
    .nav .actions { display: flex; gap: 8px; align-items: center; }
    .nav .btn { padding: 12px 20px; font-size: .88rem; }
    .has-mega { position: relative; }
    .mega { position: absolute; top: calc(100% + 18px); left: 50%; width: 860px; transform: translate(-50%, 10px); opacity: 0; visibility: hidden;
        display: grid; grid-template-columns: 1fr 1fr 290px; gap: 6px; padding: 14px; border-radius: 26px; color: var(--ink);
        background: rgba(255,255,255,.96); backdrop-filter: blur(20px); box-shadow: 0 40px 80px rgba(12,18,33,.18), inset 0 0 0 1px rgba(255,255,255,.8);
        transition: opacity .35s var(--ease), transform .45s var(--ease), visibility .35s; }
    .has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
    .has-mega::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 20px; }
    .mega a { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 12px !important; border-radius: 16px !important; color: var(--ink) !important; }
    .mega a:hover { background: var(--cream-2) !important; }
    .mega .mi { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; font-size: 19px; background: rgba(26,104,255,.1); color: var(--orange); }
    .mega b { display: block; font: 600 .9rem var(--body); }
    .mega small { display: block; font-size: .78rem; color: var(--muted); line-height: 1.35; margin-top: 2px; }
    .mega .promo { grid-row: span 5; border-radius: 20px; overflow: hidden; background: var(--dark); color: #ffffff; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
    .mega .promo img { border-radius: 10px; margin-top: 14px; box-shadow: 0 20px 40px rgba(0,0,0,.4); }
    .mega .promo b { font: 700 1.1rem var(--display); }
    .mega .promo small { color: rgba(255,255,255,.6); }

    /* ── Hero ── */
    .hero { position: relative; padding: 170px 0 70px; overflow: hidden; }
    .hero .blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
    .hero .b1 { width: 620px; height: 620px; left: 50%; top: 14%; transform: translateX(-50%); background: radial-gradient(circle, rgba(110,155,255,.55), transparent 65%); }
    .hero .b2 { width: 380px; height: 380px; right: -80px; top: 60px; background: radial-gradient(circle, rgba(40,112,255,.35), transparent 65%); }
    .hero .b3 { width: 340px; height: 340px; left: -100px; top: 420px; background: radial-gradient(circle, rgba(160,189,255,.55), transparent 65%); }
    .hero-inner { position: relative; z-index: 2; text-align: center; }
    .chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; background: rgba(255,255,255,.75);
        box-shadow: inset 0 0 0 1px rgba(26,104,255,.25); font: 500 .82rem var(--body); color: var(--ink-2); }
    .chip b { background: var(--grad); color: #ffffff; font-weight: 600; font-size: .7rem; padding: 4px 9px; border-radius: 999px; letter-spacing: .06em; }
    .hero-title { margin: 28px 0 0; font: 900 clamp(3.4rem, 10.2vw, 9.6rem)/.86 var(--display); font-stretch: 78%; letter-spacing: -.045em; text-transform: uppercase; }
    .hero-title .line { display: block; }
    .hero-title .serif { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; font-size: 1.04em; line-height: .95; letter-spacing: -.03em; padding-right: .06em; }
    .hero .lead { margin: 28px auto 0; text-align: center; }
    .hero .cta { display: flex; gap: 12px; justify-content: center; margin-top: 34px; }
    .hero-shot { position: relative; z-index: 2; max-width: 1180px; margin: 80px auto 0; padding: 0 32px; perspective: 1800px; }
    .hero-shot .frame { transform-origin: 50% 0; }
    .hero-shot .float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 18px; background: rgba(255,255,255,.92);
        backdrop-filter: blur(10px); box-shadow: 0 24px 50px rgba(19,29,51,.18); font-size: .84rem; white-space: nowrap; }
    .hero-shot .float b { display: block; font: 700 1rem var(--display); }
    .hero-shot .float span { color: var(--muted); }
    .hero-shot .float .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #ffffff; font-size: 20px; }
    .hero-shot .f1 { left: -10px; top: 26%; } .hero-shot .f2 { right: -16px; top: 52%; } .hero-shot .f3 { left: 10%; bottom: -24px; }

    /* Glossy floating objects */
    .obj { position: absolute; z-index: 1; pointer-events: none; will-change: transform; }
    .obj-cube { width: 120px; height: 120px; border-radius: 32px; right: 12%; top: 230px;
        background: linear-gradient(150deg, #8aaeff 0%, #2a70ff 45%, #0e61ec 100%);
        box-shadow: inset 8px 10px 20px rgba(255,255,255,.55), inset -12px -16px 26px rgba(0,57,150,.35), 0 40px 70px rgba(26,104,255,.35); }
    .obj-pearl { width: 76px; height: 76px; border-radius: 50%; left: 13%; top: 280px;
        background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f8f8fa 45%, #c8d1e8 100%); box-shadow: 0 26px 40px rgba(30,57,120,.18), inset -6px -8px 14px rgba(80,101,150,.18); }
    .obj-gem { width: 70px; height: 70px; right: 18%; top: 560px; border-radius: 14px; transform: rotate(45deg);
        background: linear-gradient(135deg, #9b958f 0%, #3e414a 50%, #17191f 100%); box-shadow: inset 5px 6px 12px rgba(255,255,255,.35), 0 28px 40px rgba(15,17,22,.25); }
    .obj-dot { width: 34px; height: 34px; border-radius: 50%; left: 21%; top: 600px; background: radial-gradient(circle at 35% 30%, #9cbaff, #1a68ff 70%); box-shadow: 0 14px 24px rgba(26,104,255,.35); }

    /* Works-with strip */
    .stack { padding: 70px 0 30px; text-align: center; }
    .stack p { font: 600 .72rem var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 26px; }
    .logos { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000000 12%, #000000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000000 12%, #000000 88%, transparent); }
    .logos .row { display: flex; gap: 70px; width: max-content; animation: slide 40s linear infinite; }
    .logos .lg { display: flex; align-items: center; gap: 10px; font: 600 1.05rem var(--body); color: rgba(15,17,22,.45); white-space: nowrap; }
    .logos .lg iconify-icon { font-size: 26px; }
    @keyframes slide { to { transform: translateX(-50%); } }

    /* Tool marquee */
    .marquee { padding: 26px 0; border-block: 1px solid var(--line); overflow: hidden; background: rgba(255,255,255,.35); margin-top: 60px; }
    .marquee .track { display: flex; width: max-content; gap: 46px; will-change: transform; }
    .marquee .item { display: flex; align-items: center; gap: 46px; font: 700 clamp(1rem, 1.6vw, 1.35rem)/1 var(--display); font-stretch: 90%; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
    .marquee .item::after { content: '✦'; color: var(--orange); font-size: .9em; }
    .marquee .item.o { color: transparent; -webkit-text-stroke: 1px var(--ink); }

    /* ── Scatter: screens burst out around the heading ── */
    .scatter { height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
    .scatter .glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(80,136,255,.35), transparent 62%); }
    .scatter .copy { position: relative; z-index: 3; }
    .scatter .eyebrow { justify-content: center; }
    .scatter h2 { margin: 18px 0 0; font: 800 clamp(2.6rem, 5.6vw, 5.2rem)/1 var(--display); font-stretch: 90%; letter-spacing: -.04em; }
    .swap { position: relative; display: inline-block; vertical-align: bottom; height: 1.32em; margin: -.24em 0 -.08em; overflow: hidden; }
    .swap span { display: block; width: max-content; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--orange); line-height: 1.32; }
    .swap .stack-w { display: block; width: max-content; transition: transform .7s var(--ease); }
    .swap .stack-w > span { padding: 0 .22em 0 .04em; }
    .squig { position: absolute; left: 0; right: 0; bottom: -8px; height: 16px; width: 100%; }
    .scatter p { margin: 22px auto 0; color: var(--muted); max-width: 460px; }
    .sc { position: absolute; z-index: 2; left: 50%; top: 50%; width: 300px; margin: -94px 0 0 -150px; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px rgba(19,29,51,.2); will-change: transform; }
    .sc img { width: 100%; }

    /* ── How it works: pinned, screen on the left changes with the step on the right ── */
    .how { height: 100vh; display: flex; align-items: center; overflow: hidden; background: linear-gradient(180deg, var(--cream), #eff1f3); }
    .how-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center; width: 100%; }
    .how .screens { position: relative; aspect-ratio: 1440 / 934; }
    .how .screens .frame { position: absolute; inset: 0; }
    .how .screens .shot { position: absolute; left: 0; right: 0; top: 34px; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.1s var(--ease); }
    .how .screens .shot.on { opacity: 1; transform: none; }
    .how .tag { position: absolute; z-index: 4; left: 24px; bottom: 24px; padding: 10px 16px; border-radius: 14px; background: var(--ink); color: #ffffff; font: 600 .82rem var(--body);
        box-shadow: 0 16px 30px rgba(15,17,22,.3); display: flex; gap: 10px; align-items: center; }
    .how .tag i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px #22c55e; }
    .how h2 { margin-bottom: 24px; }
    .how .btns { display: flex; gap: 10px; margin-bottom: 34px; }
    .acc { display: grid; gap: 10px; }
    .acc .it { position: relative; padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: background .5s, box-shadow .5s; }
    .acc .it.on { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(26,104,255,.25), 0 20px 40px rgba(25,37,65,.08); }
    .acc .t { display: flex; align-items: center; gap: 14px; font: 600 1.02rem var(--body); color: var(--muted); transition: color .4s; }
    .acc .it.on .t { color: var(--ink); }
    .acc .t .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; background: var(--cream-2); color: var(--muted); transition: background .4s, color .4s; }
    .acc .it.on .ic { background: var(--grad); color: #ffffff; }
    .acc .b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
    .acc .it.on .b { grid-template-rows: 1fr; }
    .acc .b > div { overflow: hidden; }
    .acc .b p { margin: 10px 0 2px 54px; color: var(--muted); font-size: .92rem; }
    .acc .prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--grad); }

    /* ── Dark chapter: the difference + horizontal panels + dial ── */
    .chapter { position: relative; background: var(--dark); color: #ffffff; }
    .chapter::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 90px; background: var(--cream); border-radius: 0 0 50% 50% / 0 0 100% 100%; z-index: 1; }
    .diff { padding: 200px 0 80px; text-align: center; overflow: hidden; }
    .diff .ribbon { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
    .diff .wrap { position: relative; z-index: 2; }
    .diff .eyebrow { justify-content: center; }
    .diff .h2 { max-width: 900px; margin-left: auto; margin-right: auto; }
    .diff .lead { margin: 22px auto 34px; }
    .diff .btns { display: flex; gap: 12px; justify-content: center; }
    .vs { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 80px; text-align: left; }
    .vs .card { position: relative; padding: 32px; border-radius: 28px; background: rgba(21,23,28,.55); box-shadow: inset 0 0 0 1px var(--dline), 0 30px 60px rgba(0,0,0,.35);
        backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); }
    .vs .card.zp { background: linear-gradient(160deg, rgba(23,34,59,.62), rgba(17,21,30,.58)); box-shadow: inset 0 0 0 1px rgba(60,122,255,.35), 0 40px 80px rgba(20,106,255,.12); }
    .vs .card h4 { margin: 0 0 6px; font: 700 1.3rem var(--display); }
    .vs .card > span { font-size: .85rem; color: var(--dmuted); }
    .vs ul { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
    .vs li { display: flex; gap: 12px; align-items: center; font-size: .95rem; color: rgba(255,255,255,.8); }
    .vs .card:not(.zp) li { color: rgba(255,255,255,.45); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
    .vs li iconify-icon { flex-shrink: 0; font-size: 18px; }
    .vs .card:not(.zp) li iconify-icon { color: #5b606b; }
    .vs .card.zp li iconify-icon { color: var(--amber); }
    .vs .pill { position: absolute; top: 24px; right: 24px; padding: 6px 12px; border-radius: 999px; font: 600 .72rem var(--body); background: rgba(255,255,255,.06); color: var(--dmuted); }
    .vs .card.zp .pill { background: var(--grad); color: #ffffff; }

    .hs { height: 100vh; overflow: hidden; }
    .hs-track { position: relative; display: flex; height: 100%; width: max-content; will-change: transform; }
    .hs-ribbon { position: absolute; left: 0; top: 0; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
    .panel { position: relative; z-index: 1; width: 100vw; height: 100%; display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; padding: 0 max(32px, calc((100vw - 1240px) / 2)); }
    .panel .num { font: 600 .74rem var(--body); letter-spacing: .2em; color: var(--amber); }
    .panel h3 { margin: 16px 0 18px; font: 800 clamp(2.2rem, 4vw, 3.8rem)/1.02 var(--display); font-stretch: 90%; letter-spacing: -.035em; }
    .panel h3 em { color: var(--amber); }
    .panel p { color: var(--dmuted); max-width: 440px; margin: 0 0 28px; }
    .panel .pts { display: flex; gap: 8px; flex-wrap: wrap; }
    .panel .pts span { padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--dline); font: 500 .8rem var(--body); color: rgba(255,255,255,.78); }
    .panel .vis { position: relative; }
    .panel .vis .mini { position: absolute; z-index: 3; display: flex; gap: 12px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(19,22,28,.92);
        backdrop-filter: blur(10px); box-shadow: 0 20px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); font-size: .82rem; white-space: nowrap; }
    .panel .vis .mini b { display: block; font: 700 .98rem var(--display); }
    .panel .vis .mini span { color: var(--dmuted); }
    .panel .vis .mini .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--grad); font-size: 18px; }
    .panel .vis .m1 { left: -40px; bottom: 18%; } .panel .vis .m2 { right: -24px; top: 14%; }

    .dial { height: 100vh; overflow: hidden; }
    .dial-stage { position: absolute; left: 21vh; top: 50%; width: 0; height: 0; }
    .dial .ring { position: absolute; border-radius: 50%; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: none; }
    .dial .r1 { width: 150vh; height: 150vh; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
    .dial .r2 { width: 92vh; height: 92vh; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
    .dial .ticks { position: absolute; left: 0; top: 0; width: 64vh; height: 64vh; transform: translate(-50%, -50%); }
    .dial .core { position: absolute; left: 0; top: 0; width: 34vh; height: 34vh; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center;
        background: radial-gradient(circle, rgba(40,112,255,.22), transparent 70%); }
    .dial .core .zlogo { width: 20vh; color: #ffffff; }
    .orbit { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
    .orbit .card { position: absolute; left: 0; top: 0; width: 330px; margin: -105px 0 0 -165px; will-change: transform; }
    .orbit .card .frame { border-radius: 12px; }
    .orbit .card .frame .bar { height: 22px; } .orbit .card .frame .bar i { width: 7px; height: 7px; } .orbit .card .frame .bar span { display: none; }
    .dial-copy { position: absolute; right: max(32px, calc((100vw - 1240px) / 2)); top: 50%; transform: translateY(-50%); width: min(520px, 42vw); z-index: 3; }
    .dial-copy h2 { margin: 16px 0 26px; }
    .dial-copy .swap span { color: #ffffff; font-family: var(--display); font-style: normal; font-weight: 800; font-stretch: 90%; }
    .dial-copy .btns { display: flex; gap: 10px; margin-bottom: 30px; }
    .dacc { display: grid; gap: 8px; }
    .dacc .it { padding: 14px 18px; border-radius: 18px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--dline); transition: background .5s, box-shadow .5s; }
    .dacc .it.on { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(90,141,255,.3); }
    .dacc .t { display: flex; align-items: center; gap: 14px; font: 600 .98rem var(--body); color: rgba(255,255,255,.55); transition: color .4s; }
    .dacc .it.on .t { color: #ffffff; }
    .dacc .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: rgba(255,255,255,.06); transition: background .4s; }
    .dacc .it.on .ic { background: var(--grad); }
    .dacc .b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
    .dacc .it.on .b { grid-template-rows: 1fr; }
    .dacc .b > div { overflow: hidden; }
    .dacc .b p { margin: 8px 0 2px 52px; font-size: .88rem; color: var(--dmuted); }

    /* ── Why (logo builds in the middle card) ── */
    .why-grid { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 20px; align-items: stretch; }
    .why-col { display: grid; gap: 20px; }
    .why-card { padding: 30px; border-radius: var(--r); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
    .why-card .ic { width: 52px; height: 52px; display: grid; place-items: center; font-size: 24px; color: var(--orange); background: rgba(26,104,255,.1);
        clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); margin-bottom: 26px; }
    .why-card h4 { margin: 0 0 10px; font: 700 1.25rem/1.2 var(--display); letter-spacing: -.01em; }
    .why-card p { margin: 0; color: var(--muted); font-size: .92rem; }
    .why-mid { position: relative; border-radius: 34px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px 30px;
        background: radial-gradient(circle at 50% 38%, #141e34 0%, #0b0f1a 45%, #07090e 100%); color: #ffffff; min-height: 460px; }
    .why-mid::before { content: ''; position: absolute; width: 460px; height: 460px; top: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(40,112,255,.35), transparent 65%); }
    .why-mid .zlogo { width: min(420px, 86%); position: relative; color: #ffffff; }
    .why-mid .counters { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; margin-top: 54px; text-align: center; }
    .why-mid .counters b { display: block; font: 800 3rem/1 var(--display); font-stretch: 85%; letter-spacing: -.03em; color: var(--amber); }
    .why-mid .counters span { display: block; margin-top: 8px; font-size: .85rem; color: rgba(255,255,255,.7); }

    /* ── Trifecta: centre line + drawn cubes, copy alternates left/right (agiloft-style) ── */
    .tri { padding: 140px 0 120px; background: #ffffff; overflow-x: clip; }
    .tri .top { text-align: center; max-width: 760px; margin: 0 auto 60px; }
    .tri .top .eyebrow { justify-content: center; }
    .tri .top p { color: var(--muted); margin: 20px auto 28px; max-width: 560px; }
    .tri-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 420px minmax(0, 1fr); }
    .tri-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(26,104,255,.15); }
    .tri-line i { position: absolute; inset: 0; background: var(--orange); transform-origin: top; }
    .tri-line::before, .tri-line::after { content: ''; position: absolute; left: -4px; width: 10px; height: 10px; background: var(--orange); }
    .tri-line::before { top: -5px; } .tri-line::after { bottom: -5px; }
    .tri-art { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 22vh; height: 56vh; display: grid; place-items: center; align-self: start; }
    .tri-art svg { width: 100%; height: 100%; overflow: visible; }
    .tri-item { padding: 0 50px; }
    .tri-item.l { grid-column: 1; text-align: right; }
    .tri-item.r { grid-column: 3; }
    .tri-item h4 { margin: 0 0 12px; font: 500 1.5rem/1.2 var(--display); letter-spacing: -.01em; }
    .tri-item p { margin: 0; color: var(--muted); }
    .tri-item .ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(26,104,255,.1); color: var(--orange); font-size: 20px; margin-bottom: 16px; }
    .tri-gap { height: 28vh; }

    /* ── Numbers ── */
    .nums { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 18px; }
    .numc { padding: 30px; border-radius: var(--r); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; justify-content: space-between; min-height: 230px; }
    .numc small { font: 600 .66rem var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
    .numc .big-n { font: 800 clamp(3.8rem, 7vw, 6.4rem)/.9 var(--display); font-stretch: 80%; letter-spacing: -.05em; }
    .numc .sub { color: var(--muted); font-size: .86rem; }
    .numc.span2 { grid-row: span 2; }
    .bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; margin: 20px 0; }
    .bars i { flex: 1; border-radius: 8px 8px 4px 4px; background: var(--grad); transform-origin: bottom; opacity: .9; }
    .ring { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
    .ring svg { width: 130px; height: 130px; }
    .ring .rv { font: 800 1.7rem var(--display); }
    .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
    .chips span { padding: 5px 11px; border-radius: 999px; background: var(--cream-2); font: 600 .72rem var(--body); color: var(--muted); }

    /* ── Pricing ── */
    .toggle { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); position: relative; }
    .toggle button { position: relative; z-index: 1; border: 0; background: none; padding: 10px 20px; border-radius: 999px; font: 600 .86rem var(--body); cursor: pointer; color: var(--muted); }
    .toggle button.on { color: #ffffff; }
    .toggle .pill { position: absolute; top: 5px; bottom: 5px; left: 5px; border-radius: 999px; background: var(--ink); transition: transform .5s var(--ease), width .5s var(--ease); }
    .toggle em { font-size: .9em; color: var(--orange); margin-left: 4px; }
    .toggle button.on em { color: var(--amber); }
    .plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .plan { position: relative; padding: 30px 26px; border-radius: var(--r); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; }
    .plan.hot { background: var(--dark); color: #ffffff; box-shadow: 0 40px 80px rgba(15,17,22,.25); transform: translateY(-14px); }
    .plan.hot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
    .plan .tag { position: absolute; top: 18px; right: 18px; padding: 5px 10px; border-radius: 999px; background: var(--grad); color: #ffffff; font: 700 .66rem var(--body); letter-spacing: .1em; text-transform: uppercase; }
    .plan h4 { margin: 0; font: 700 1.1rem var(--display); }
    .plan .desc { margin: 6px 0 22px; font-size: .86rem; color: var(--muted); }
    .plan.hot .desc, .plan.hot li { color: rgba(255,255,255,.7); }
    .plan .price { font: 800 2.5rem/1 var(--display); font-stretch: 85%; letter-spacing: -.03em; }
    .plan .price small { font: 500 .85rem var(--body); color: var(--muted); letter-spacing: 0; }
    .plan ul { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 10px; font-size: .88rem; color: var(--ink-2); flex: 1; }
    .plan li { display: flex; gap: 10px; align-items: flex-start; }
    .plan li iconify-icon { color: var(--orange); margin-top: 3px; flex-shrink: 0; }
    .plan .btn { justify-content: center; width: 100%; }
    .plan.hot .btn-ghost { background: rgba(255,255,255,.1); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }

    /* ── Blog carousel with ruler (agiloft-style) ── */
    .blog { padding: 140px 0 120px; overflow: hidden; }
    .blog .head h2 { font: 400 clamp(2.4rem, 4.4vw, 4rem)/1 var(--serif); letter-spacing: -.02em; margin: 14px 0 0; }
    .blog .arrows { display: flex; gap: 8px; }
    .blog .arrows button { width: 58px; height: 58px; border: 0; background: var(--ink); color: #ffffff; font-size: 22px; cursor: pointer; display: grid; place-items: center; transition: background .3s; }
    .blog .arrows button:hover { background: var(--orange); }
    .blog .arrows button:disabled { opacity: .3; cursor: default; background: var(--ink); }
    .posts { display: flex; gap: 22px; padding-left: max(32px, calc((100vw - 1240px) / 2)); cursor: grab; will-change: transform; touch-action: pan-y; }
    .posts.drag { cursor: grabbing; }
    .post { flex: 0 0 430px; user-select: none; }
    .post .cover { position: relative; height: 330px; overflow: hidden; background: #dddddd; }
    .post .cover img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transform: scale(1.06); transition: filter .7s, transform 1.2s var(--ease); pointer-events: none; }
    .post:hover .cover img { filter: none; transform: scale(1.12); }
    .post .lab { position: absolute; left: 14px; bottom: 14px; padding: 10px 16px; background: #ffffff; font: 500 .9rem var(--body); }
    .post h4 { margin: 18px 0 8px; font: 600 1.2rem/1.3 var(--display); letter-spacing: -.01em; }
    .post .meta { font-size: .82rem; color: var(--muted); }
    .ruler { position: relative; max-width: 1240px; margin: 46px auto 0; padding: 0 32px; height: 40px; }
    .ruler .ticks { display: flex; justify-content: space-between; align-items: flex-end; height: 100%; }
    .ruler .ticks i { width: 1px; height: 14px; background: rgba(15,17,22,.3); }
    .ruler .ticks i:nth-child(5n + 1) { height: 30px; background: rgba(15,17,22,.45); }
    .ruler .mark { position: absolute; left: 32px; bottom: 0; width: 2px; height: 40px; background: var(--orange); transform-origin: bottom; }
    .ruler .mark::before { content: ''; position: absolute; left: -5px; top: -8px; width: 12px; height: 12px; background: var(--orange); transform: rotate(45deg); }

    /* ── Love ── */
    .love-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 50px; }
    .rating { display: flex; align-items: center; gap: 10px; font: 600 .86rem var(--body); color: var(--muted); }
    .rating .stars { color: var(--orange); letter-spacing: 2px; }
    .quotes { display: flex; gap: 18px; width: max-content; animation: slide 46s linear infinite; }
    .quotes-mask { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000000 8%, #000000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000000 8%, #000000 92%, transparent); }
    .quotes-mask:hover .quotes { animation-play-state: paused; }
    .quote { width: 360px; padding: 26px; border-radius: 22px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
    .quote .stars { color: var(--orange); letter-spacing: 2px; font-size: .9rem; }
    .quote p { margin: 14px 0 22px; font: 400 1.08rem/1.45 var(--serif); font-style: italic; color: var(--ink-2); }
    .quote .who { display: flex; align-items: center; gap: 12px; font-size: .86rem; }
    .quote .who i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem var(--body); font-style: normal; color: #ffffff; background: var(--grad); }
    .quote .who small { display: block; color: var(--muted); }

    /* ── Big CTA ── */
    .cta-big { padding: 150px 0 170px; text-align: center; overflow: hidden; background: linear-gradient(180deg, var(--cream) 0%, #e6eaf0 55%, #a1beff 100%); }
    .cta-big .wave { position: absolute; top: -1px; left: 0; width: 100%; height: 90px; }
    .cta-big h2 { margin: 0; font: 900 clamp(3rem, 9vw, 8.4rem)/.9 var(--display); font-stretch: 78%; letter-spacing: -.045em; text-transform: uppercase; }
    .cta-big h2 em { display: block; text-transform: none; font-size: 1.05em; line-height: 1; }
    .cta-big p { margin: 30px auto 36px; max-width: 520px; color: var(--ink-2); }
    .cta-big .cta { display: flex; gap: 12px; justify-content: center; }
    .cta-big .orb { position: absolute; width: 90px; height: 90px; border-radius: 50%; right: 18%; top: 22%; background: radial-gradient(circle at 32% 28%, #4b4f5a, #0f1116 70%); box-shadow: 0 30px 50px rgba(15,17,22,.3); }

    /* ── Footer ── */
    .foot { position: relative; background: var(--dark); color: #ffffff; overflow: hidden; }
    .foot .fglow { position: absolute; width: 900px; height: 900px; border-radius: 50%; left: 50%; bottom: -500px; transform: translateX(-50%); background: radial-gradient(circle, rgba(30,106,255,.28), transparent 62%); pointer-events: none; }
    .news { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 100px 0 70px; border-bottom: 1px solid var(--dline); }
    .news h3 { margin: 0; font: 800 clamp(2rem, 3.6vw, 3.2rem)/1.05 var(--display); font-stretch: 90%; letter-spacing: -.03em; }
    .news h3 em { color: var(--amber); }
    .news form { display: flex; gap: 8px; padding: 7px; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--dline); }
    .news input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #ffffff; font: 500 1rem var(--body); padding: 0 18px; }
    .news input::placeholder { color: rgba(255,255,255,.4); }
    .news small { display: block; margin-top: 12px; color: rgba(255,255,255,.4); font-size: .8rem; padding-left: 20px; }
    .fcols { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; padding: 70px 0 60px; }
    .fcols .zlogo { width: 160px; color: #ffffff; }
    .fcols p { color: rgba(255,255,255,.55); font-size: .9rem; max-width: 280px; margin: 18px 0 22px; }
    .socials { display: flex; gap: 8px; }
    .socials a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--dline); transition: background .3s, transform .3s; }
    .socials a:hover { background: var(--orange); transform: translateY(-3px); }
    .fcols h5 { margin: 0 0 18px; font: 600 .7rem var(--body); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); }
    .fcols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
    .fcols ul a { position: relative; color: rgba(255,255,255,.8); font-size: .92rem; transition: color .25s; }
    .fcols ul a::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
    .fcols ul a:hover { color: #ffffff; } .fcols ul a:hover::after { transform: scaleX(1); transform-origin: left; }
    .fcols .badge { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(60,122,255,.18); color: var(--amber); font: 600 .62rem var(--body); vertical-align: 2px; }
    .frow { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; border-top: 1px solid var(--dline); border-bottom: 1px solid var(--dline); flex-wrap: wrap; }
    .frow .lang { display: flex; align-items: center; gap: 8px; font-weight: 500; }
    .frow .links { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
    .frow .links b { font-weight: 600; } .frow .links a { color: rgba(255,255,255,.8); }
    .frow .links a:hover { color: var(--amber); }
    .bigmark { padding: 70px 0 40px; }
    .bigmark .zlogo { width: 100%; color: #ffffff; }
    .fbot { display: flex; justify-content: space-between; gap: 20px; padding: 0 0 26px; color: rgba(255,255,255,.45); font-size: .84rem; flex-wrap: wrap; }
    .fbot .ok { display: inline-flex; align-items: center; gap: 8px; }
    .fbot .ok::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px #22c55e; }
    .fbot nav { display: flex; gap: 0; }
    .fbot nav a { padding: 0 14px; border-left: 1px solid var(--dline); } .fbot nav a:first-child { border: 0; }
    .fbot nav a:hover { color: #ffffff; }
    .fstrip { border-top: 1px solid var(--dline); padding: 22px 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000000 10%, #000000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000000 10%, #000000 90%, transparent); }
    .fstrip .row { display: flex; gap: 64px; width: max-content; animation: slide 36s linear infinite; }
    .fstrip .lg { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.42); font: 600 1rem var(--body); white-space: nowrap; transition: color .3s; }
    .fstrip .lg:hover { color: #ffffff; }
    .fstrip .lg iconify-icon { font-size: 24px; }


    /* ── Services: big cards that stack on top of each other as you scroll ── */
    .svc { padding: 140px 0 60px; }
    .svc .head { margin-bottom: 70px; }
    .svc-list { position: relative; }
    .svc-card { position: sticky; top: calc(108px + var(--i) * 16px); display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center;
        min-height: 560px; margin-bottom: 46px; padding: 52px; border-radius: 36px; overflow: hidden; transform-origin: 50% 0; will-change: transform;
        background: #ffffff; box-shadow: 0 -24px 60px rgba(19,29,51,.08), inset 0 0 0 1px var(--line); }
    .svc-card.c-dark { background: var(--dark); color: #ffffff; box-shadow: 0 -24px 60px rgba(0,0,0,.25); }
    .svc-card.c-orange { background: linear-gradient(140deg, #5288ff 0%, #1a68ff 45%, #0c5fe9 100%); color: #ffffff; box-shadow: 0 -24px 60px rgba(20,106,255,.25); }
    .svc-card.c-peach { background: linear-gradient(160deg, #fbfbfc 0%, #dfe4ec 100%); box-shadow: 0 -24px 60px rgba(19,29,51,.08); }
    .svc-card .shade { position: absolute; inset: 0; background: #000000; opacity: 0; pointer-events: none; border-radius: inherit; }
    .svc-card .no { font: 600 .74rem var(--body); letter-spacing: .2em; color: var(--orange); }
    .svc-card.c-dark .no { color: var(--amber); } .svc-card.c-orange .no { color: rgba(255,255,255,.85); }
    .svc-card h3 { margin: 16px 0 16px; font: 800 clamp(2rem, 3.6vw, 3.4rem)/1.02 var(--display); font-stretch: 90%; letter-spacing: -.035em; }
    .svc-card h3 em { color: var(--orange); }
    .svc-card.c-dark h3 em { color: var(--amber); } .svc-card.c-orange h3 em { color: #0d1423; }
    .svc-card p { margin: 0 0 24px; color: var(--muted); max-width: 440px; }
    .svc-card.c-dark p { color: var(--dmuted); } .svc-card.c-orange p { color: rgba(255,255,255,.88); }
    .svc-card .chips2 { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
    .svc-card .chips2 span { padding: 7px 13px; border-radius: 999px; font: 500 .8rem var(--body); background: rgba(15,17,22,.05); box-shadow: inset 0 0 0 1px var(--line); }
    .svc-card.c-dark .chips2 span { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--dline); color: rgba(255,255,255,.8); }
    .svc-card.c-orange .chips2 span { background: rgba(255,255,255,.16); box-shadow: none; }
    .svc-card.c-orange .btn-dark:hover { background: #ffffff; color: var(--ink); }
    .svc-vis { position: relative; height: 440px; display: grid; place-items: center; }
    .svc-vis .badge2 { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #ffffff; color: var(--ink);
        box-shadow: 0 18px 40px rgba(12,18,33,.18); font: 600 .82rem var(--body); white-space: nowrap; animation: bob 4s ease-in-out infinite; }
    .svc-vis .badge2 iconify-icon { color: var(--orange); font-size: 18px; }
    .svc-vis .badge2:nth-of-type(2) { animation-delay: -2s; }
    @keyframes bob { 50% { transform: translateY(-10px); } }
    /* 1 WordPress site */
    .mk-browser { width: 92%; border-radius: 16px; overflow: hidden; background: #ffffff; box-shadow: 0 40px 80px rgba(19,29,51,.18), 0 0 0 1px var(--line); }
    .mk-browser .bar { display: flex; gap: 6px; align-items: center; height: 30px; padding: 0 12px; background: #f3f3f5; }
    .mk-browser .bar i { width: 9px; height: 9px; border-radius: 50%; background: #c9cedd; } .mk-browser .bar i:first-child { background: #5c99ff; }
    .mk-browser .bar span { margin-left: 10px; padding: 2px 12px; border-radius: 999px; background: #ffffff; font: 500 .68rem var(--body); color: var(--muted); }
    .wp-site { padding: 18px; display: grid; gap: 12px; }
    .wp-site .hb { height: 130px; border-radius: 12px; background: linear-gradient(120deg, #1e222a, #2e374a); position: relative; overflow: hidden; }
    .wp-site .hb::before { content: ''; position: absolute; left: 18px; top: 26px; width: 46%; height: 14px; border-radius: 6px; background: rgba(255,255,255,.85); box-shadow: 0 24px 0 -2px rgba(255,255,255,.45), 0 48px 0 -4px rgba(255,255,255,.25); }
    .wp-site .hb::after { content: ''; position: absolute; left: 18px; bottom: 20px; width: 90px; height: 26px; border-radius: 999px; background: var(--grad); }
    .wp-site .r3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .wp-site .r3 i { height: 70px; border-radius: 10px; background: var(--cream-2); position: relative; overflow: hidden; }
    .wp-site .r3 i::after, .grid-wire i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.7) 50%, transparent 80%); transform: translateX(-100%); animation: shimmer 2.6s ease-in-out infinite; }
    .wp-site .r3 i:nth-child(2)::after { animation-delay: .3s; } .wp-site .r3 i:nth-child(3)::after { animation-delay: .6s; }
    @keyframes shimmer { 60%, 100% { transform: translateX(100%); } }
    .wp-site .ln i { display: block; height: 8px; border-radius: 6px; background: var(--cream-2); margin-bottom: 8px; } .wp-site .ln i:nth-child(2) { width: 80%; } .wp-site .ln i:nth-child(3) { width: 60%; }
    /* 2 Custom website wireframe */
    .grid-wire { width: 88%; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 54px; gap: 10px; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.6); box-shadow: 0 30px 70px rgba(20,78,200,.16); }
    .grid-wire i { position: relative; overflow: hidden; border-radius: 12px; background: rgba(26,104,255,.12); box-shadow: inset 0 0 0 1.5px rgba(26,104,255,.35); }
    .grid-wire i:nth-child(1) { grid-column: span 6; background: var(--ink); box-shadow: none; }
    .grid-wire i:nth-child(2) { grid-column: span 4; grid-row: span 2; background: var(--grad); box-shadow: none; }
    .grid-wire i:nth-child(3) { grid-column: span 2; grid-row: span 2; }
    .grid-wire i:nth-child(4), .grid-wire i:nth-child(5), .grid-wire i:nth-child(6) { grid-column: span 2; }
    .grid-wire i:nth-child(7) { grid-column: span 6; height: 22px; align-self: center; }
    /* 3 Web app: code + tiles */
    .code { width: 90%; border-radius: 18px; background: #0e1016; box-shadow: 0 40px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.07); padding: 18px 20px; font: 500 .82rem/1.75 ui-monospace, Consolas, monospace; color: #b4bbcb; }
    .code .tabs2 { display: flex; gap: 6px; margin-bottom: 12px; } .code .tabs2 span { padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.05); font-size: .72rem; } .code .tabs2 span.on { background: rgba(60,122,255,.2); color: var(--amber); }
    .code .k { color: #4c8aff; } .code .f { color: #8aa5ff; } .code .s { color: #9fd98a; } .code .c { color: #5d626f; }
    .code .cur { display: inline-block; width: 8px; height: 1.1em; background: var(--amber); vertical-align: -3px; animation: blink2 1s steps(1) infinite; }
    @keyframes blink2 { 50% { opacity: 0; } }
    .tiles { position: absolute; right: -6px; bottom: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 210px; padding: 12px; border-radius: 16px; background: #ffffff; box-shadow: 0 24px 50px rgba(0,0,0,.35); }
    .tiles i { height: 54px; border-radius: 10px; background: var(--cream-2); } .tiles i:first-child { background: var(--grad); } .tiles i:last-child { grid-column: span 2; height: 40px; }
    /* 4 Graphic design */
    .gd { position: relative; width: 90%; height: 360px; }
    .gd .aa { position: absolute; left: 4%; top: 0; font: 400 220px/1 var(--serif); font-style: italic; color: #0d1423; }
    .gd .sw { position: absolute; left: 4%; bottom: 10px; display: flex; gap: 10px; }
    .gd .sw i { width: 58px; height: 84px; border-radius: 12px; box-shadow: 0 14px 30px rgba(16,25,44,.25); transform-origin: bottom; animation: swing 5s ease-in-out infinite; }
    .gd .sw i:nth-child(2) { animation-delay: -.6s; } .gd .sw i:nth-child(3) { animation-delay: -1.2s; } .gd .sw i:nth-child(4) { animation-delay: -1.8s; } .gd .sw i:nth-child(5) { animation-delay: -2.4s; }
    @keyframes swing { 50% { transform: rotate(-6deg) translateY(-6px); } }
    .gd .shp { position: absolute; right: 6%; top: 12%; width: 150px; height: 150px; border-radius: 50%; background: #ffffff; box-shadow: 0 30px 60px rgba(16,25,44,.25); animation: bob 5s ease-in-out infinite; }
    .gd .sq { position: absolute; right: 26%; top: 46%; width: 96px; height: 96px; border-radius: 22px; background: #0d1423; transform: rotate(14deg); animation: spin2 14s linear infinite; }
    .gd .tri2 { position: absolute; right: 6%; bottom: 8%; width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 104px solid rgba(255,255,255,.85); animation: bob 6s ease-in-out infinite reverse; }
    @keyframes spin2 { to { transform: rotate(374deg); } }
    /* 5 Social media */
    .phone { position: relative; width: 250px; height: 430px; border-radius: 38px; background: #ffffff; box-shadow: 0 40px 80px rgba(19,29,51,.22), inset 0 0 0 8px #0f1116; padding: 22px 18px; overflow: hidden; }
    .phone .notch { width: 80px; height: 18px; border-radius: 0 0 12px 12px; background: #0f1116; margin: -14px auto 12px; }
    .phone .ppost { border-radius: 14px; background: var(--cream-2); padding: 10px; margin-bottom: 10px; }
    .phone .ppost .u { display: flex; gap: 8px; align-items: center; font: 600 .7rem var(--body); margin-bottom: 8px; } .phone .ppost .u i { width: 22px; height: 22px; border-radius: 50%; background: var(--grad); }
    .phone .ppost .img { height: 120px; border-radius: 10px; background: linear-gradient(135deg, #7ca5ff, #1a68ff 60%, #0d1423); }
    .phone .ppost .img.b { background: linear-gradient(135deg, #1e222a, #33456b); height: 70px; }
    .phone .ppost .act { display: flex; gap: 10px; margin-top: 8px; font-size: 15px; color: var(--muted); } .phone .ppost .act .h { color: #ff3b5c; animation: beat 1.4s ease-in-out infinite; }
    @keyframes beat { 30% { transform: scale(1.35); } 60% { transform: scale(1); } }
    .cal { position: absolute; left: 0; bottom: 30px; display: grid; grid-template-columns: repeat(7, 22px); gap: 6px; padding: 14px; border-radius: 16px; background: #ffffff; box-shadow: 0 24px 50px rgba(19,29,51,.18); }
    .cal i { height: 22px; border-radius: 6px; background: var(--cream-2); } .cal i.on { background: var(--grad); }
    /* 6 Security */
    .shield-wrap { position: relative; display: grid; place-items: center; }
    .shield-wrap .pulse2 { position: absolute; width: 240px; height: 240px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(90,141,255,.5); animation: ping 2.6s ease-out infinite; }
    .shield-wrap .pulse2:nth-child(2) { animation-delay: 1.3s; }
    @keyframes ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
    .shield-wrap svg { width: 190px; height: 220px; filter: drop-shadow(0 30px 50px rgba(30,111,255,.35)); }
    .shield-wrap .scan { position: absolute; left: 50%; width: 170px; height: 3px; margin-left: -85px; background: linear-gradient(90deg, transparent, #ffffff, transparent); animation: scan 2.4s ease-in-out infinite; }
    @keyframes scan { 0%, 100% { top: 22%; } 50% { top: 78%; } }
    .sec-list { position: absolute; right: 0; bottom: 6px; width: 250px; padding: 12px; border-radius: 18px; background: rgba(19,22,28,.95); box-shadow: 0 24px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); }
    .sec-list div { display: flex; justify-content: space-between; align-items: center; padding: 8px 6px; font: 500 .78rem var(--body); color: rgba(255,255,255,.8); border-bottom: 1px solid rgba(255,255,255,.06); }
    .sec-list div:last-child { border: 0; }
    .sec-list b { font-weight: 600; color: #4ade80; display: inline-flex; gap: 6px; align-items: center; } .sec-list b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }
    @media (max-width: 1024px) { .svc-card { grid-template-columns: 1fr; padding: 34px 26px; } .svc-vis { height: 360px; } }
    @media (max-width: 720px) { .svc-card { position: relative; top: 0; min-height: 0; } .svc-vis { height: 320px; } .tiles, .sec-list, .cal { display: none; } .gd .aa { font-size: 150px; } }


    /* Back to top */
    .to-top { position: fixed; right: 24px; bottom: 24px; z-index: 80; width: 54px; height: 54px; border: 0; border-radius: 50%; cursor: pointer;
        display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 14px 30px rgba(10,13,20,.28);
        opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9); transition: opacity .35s, transform .45s var(--ease), visibility .35s, background .3s; }
    .to-top.show { opacity: 1; visibility: visible; transform: none; }
    .to-top:hover { background: var(--orange); }
    .to-top:hover iconify-icon { transform: translateY(-3px); }
    .to-top iconify-icon { font-size: 22px; transition: transform .35s var(--ease); }
    .to-top svg { position: absolute; inset: -4px; width: 62px; height: 62px; transform: rotate(-90deg); pointer-events: none; }
    .to-top svg circle { fill: none; stroke-width: 3; }
    .to-top svg .bg { stroke: rgba(31,107,255,.15); }
    .to-top svg .fg { stroke: var(--orange); stroke-linecap: round; stroke-dasharray: 182.2; stroke-dashoffset: 182.2; }
    .to-top.light { background: #fff; color: var(--ink); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
    .to-top.light:hover { background: var(--orange); color: #fff; }
    @media (max-width: 720px) { .to-top { right: 16px; bottom: 16px; width: 48px; height: 48px; } .to-top svg { width: 56px; height: 56px; } }

    /* Cursor */
    .cursor { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .3s; }
    .cursor.on { opacity: 1; }
    .cursor .dot, .cursor .ring2 { position: fixed; left: 0; top: 0; border-radius: 50%; }
    .cursor .dot { width: 7px; height: 7px; background: #ffffff; }
    .cursor .ring2 { width: 38px; height: 38px; border: 1px solid #ffffff; transition: width .3s, height .3s, background .3s; }
    .cursor.hover .ring2 { width: 70px; height: 70px; background: rgba(255,255,255,.12); }
    @media (hover: none), (max-width: 1024px) { .cursor { display: none; } }

    .anim [data-reveal] { opacity: 0; transform: translateY(40px); }
    .ch-mask, .ln-mask, .wd-mask { padding: .06em .34em .36em .24em; margin: -.06em -.34em -.36em -.24em; }

    /* ── Phones and tablets: no pinning, everything stacks ── */
    @media (max-width: 1024px) {
        .nav ul { display: none; }
        .why-grid { grid-template-columns: 1fr; } .why-col { grid-template-columns: 1fr 1fr; } .why-mid { order: -1; }
        .nums { grid-template-columns: 1fr 1fr; } .numc.span2 { grid-column: span 2; grid-row: auto; }
        .plans { grid-template-columns: 1fr 1fr; } .plan.hot { transform: none; }
        .news { grid-template-columns: 1fr; } .fcols { grid-template-columns: 1fr 1fr; }
        .scatter { height: auto; padding: 120px 0 60px; flex-direction: column; }
        .scatter .sc { position: relative; left: auto; top: auto; margin: 0; width: 100%; }
        .scatter .grid-m { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: calc(100% - 36px); margin-top: 40px; }
        .how, .hs, .dial { height: auto; }
        .how { padding: 110px 0; } .how-grid { grid-template-columns: 1fr; gap: 40px; }
        .acc .b { grid-template-rows: 1fr; }
        .hs-track { flex-direction: column; width: auto; } .hs-ribbon, .diff .ribbon { display: none; }
        .panel { width: 100%; height: auto; grid-template-columns: 1fr; gap: 36px; padding: 90px 18px; }
        .panel .vis .mini { display: none; }
        .dial { padding: 110px 0; }
        .dial-stage { display: none; }
        .dial-copy { position: relative; right: auto; top: auto; transform: none; width: auto; padding: 0 18px; }
        .dacc .b { grid-template-rows: 1fr; }
        .tri-body { grid-template-columns: 1fr; } .tri-line, .tri-gap { display: none; }
        .tri-art { position: relative; top: 0; height: 300px; grid-column: 1; grid-row: auto; }
        .tri-item, .tri-item.l, .tri-item.r { grid-column: 1; text-align: left; padding: 24px 0; }
    }
    @media (max-width: 720px) {
        .wrap { padding: 0 18px; }
        .pad { padding: 96px 0; }
        .nav { padding-left: 16px; } .nav .btn-ghost { display: none; }
        .hero { padding-top: 130px; }
        .hero .cta, .cta-big .cta, .diff .btns { flex-direction: column; align-items: center; }
        .hero-shot { padding: 0 12px; margin-top: 50px; } .hero-shot .float { display: none; }
        .head, .love-head { flex-direction: column; align-items: flex-start; }
        .why-col, .nums, .plans, .vs, .fcols { grid-template-columns: 1fr; }
        .numc.span2 { grid-column: auto; }
        .scatter .grid-m { grid-template-columns: 1fr; }
        .obj-cube { width: 74px; height: 74px; border-radius: 22px; right: 4%; top: 120px; } .obj-pearl { width: 48px; height: 48px; left: 5%; top: 150px; }
        .obj-gem, .obj-dot { display: none; }
        .post { flex-basis: 300px; } .post .cover { height: 240px; }
        .quote { width: 290px; }
    }
    @media (prefers-reduced-motion: reduce) { .quotes, .logos .row, .fstrip .row { animation: none; } }

    .plans-note { margin-top: 26px; text-align: center; color: var(--muted); font-size: .9rem; }
    .plans-note a { color: var(--orange); font-weight: 600; }

    /* Scrollbar: the same thin brand-blue bar as the Devlo app (static/css/main.css), so site and app match. */
    html { scrollbar-width: thin; scrollbar-color: rgba(31, 107, 255, .45) transparent; }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(31, 107, 255, .45); border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(31, 107, 255, .75); }

    /* WhatsApp: a plain link to wa.me (no script, no cookie), bottom-left so it never meets back-to-top or the chat bot. */
    .wa-fab { position: fixed; left: 24px; bottom: 24px; z-index: 80; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
        background: #25d366; color: #ffffff; font-size: 27px; box-shadow: 0 14px 30px rgba(18,140,70,.35); transition: transform .35s var(--ease), box-shadow .35s; }
    .wa-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 36px rgba(18,140,70,.45); }
    .wa-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: wa-pulse 2.8s ease-out infinite; }
    @keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); } 70%, 100% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } }
    .wa-tip { position: absolute; left: 66px; top: 50%; transform: translate(-8px, -50%); padding: 8px 12px; border-radius: 10px; background: var(--ink); color: #ffffff;
        font: 600 .82rem var(--body); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--ease); }
    .wa-fab:hover .wa-tip, .wa-fab:focus-visible .wa-tip { opacity: 1; transform: translate(0, -50%); }
    @media (max-width: 720px) { .wa-fab { left: 16px; bottom: 16px; width: 48px; height: 48px; font-size: 24px; } .wa-tip { display: none; } }
    @media (prefers-reduced-motion: reduce) { .wa-ring { animation: none; } }

    /* ── Language switcher (menu) ── */
    .lang { position: relative; }
    .lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border: 0; border-radius: 999px; background: none; cursor: pointer;
        font: 600 .86rem var(--body); color: var(--ink); transition: background .25s; }
    .lang-btn:hover, .lang.open .lang-btn { background: rgba(90,100,128,.1); }
    .lang-flag { font-size: 20px; border-radius: 50%; }
    .lang-caret { font-size: 14px; opacity: .6; transition: transform .3s var(--ease); }
    .lang.open .lang-caret { transform: rotate(180deg); }
    .lang-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 90; width: 248px; padding: 12px; border-radius: 20px; background: #ffffff;
        box-shadow: 0 24px 60px -20px rgba(19,29,51,.45), 0 0 0 1px var(--line); opacity: 0; visibility: hidden; transform: translateY(-6px);
        transition: opacity .25s, transform .3s var(--ease), visibility .25s; max-height: min(70vh, 560px); overflow-y: auto; }
    .lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
    .lang-menu b { display: block; padding: 4px 10px 10px; font: 700 .74rem var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
    .lang-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--ink); font: 500 .92rem var(--body); transition: background .2s; }
    .lang-menu a:hover { background: #f2f5fb; }
    .lang-menu a.on { background: #eef4ff; font-weight: 700; }
    .lang-menu a iconify-icon { font-size: 20px; flex: 0 0 auto; }
    .lang-dot { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px #c3cad8; }
    .lang-menu a.on .lang-dot { box-shadow: inset 0 0 0 5px var(--orange); }
    .nav.on-dark .lang-btn { color: #ffffff; }
    @media (max-width: 1024px) { .lang-btn { padding: 0 10px; } .lang-code { display: none; } }

    /* ── Right-to-left languages (Arabic, Hebrew, Urdu) ── */
    [dir="rtl"] body { text-align: right; }
    [dir="rtl"] .lang-menu { right: auto; left: 0; }
    [dir="rtl"] .btn .arrow { transform: scaleX(-1); }   /* only the arrow icon; never a class like .go, which the logo animation also uses */
    [dir="rtl"] .zlogo, [dir="rtl"] .brand { direction: ltr; }
    [dir="rtl"] .wa-fab { left: auto; right: 24px; }
    [dir="rtl"] .to-top { right: auto; left: 24px; }
    [dir="rtl"] .wa-tip { left: auto; right: 66px; }
    [dir="rtl"] .ph, [dir="rtl"] .sec-head.center, [dir="rtl"] .ph .lead { text-align: center; }
    /* Arabic and Urdu: one clean, self-hosted font (Noto Sans Arabic, variable 400-800) for everything — no slanted serif */
    @font-face { font-family: "Devlo Arabic"; src: url("/fonts/noto-arabic/noto-sans-arabic.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
    [dir="rtl"] { --body: "Devlo Arabic", "Inter", system-ui, sans-serif; --display: "Devlo Arabic", "Archivo", sans-serif; --serif: "Devlo Arabic", sans-serif; }
    [dir="rtl"] body { font-family: var(--body); line-height: 1.85; }
    [dir="rtl"] em, [dir="rtl"] .serif, [dir="rtl"] h1 em, [dir="rtl"] h2 em, [dir="rtl"] h3 em { font-style: normal; }
    [dir="rtl"] .hero-title, [dir="rtl"] .h2, [dir="rtl"] .ph-title, [dir="rtl"] .svc-card h3, [dir="rtl"] .row h3 { font-family: "Devlo Arabic", sans-serif; font-weight: 800; font-stretch: normal; letter-spacing: 0; line-height: 1.35; text-transform: none; }
    [dir="rtl"] .hero-title { font-size: clamp(2.6rem, 6.5vw, 5.6rem); }
    [dir="rtl"] .h2 em, [dir="rtl"] .ph-title em, [dir="rtl"] .hero-title .serif { font-family: "Devlo Arabic", sans-serif; font-weight: 800; font-size: 1em; }
    [dir="rtl"] .eyebrow { letter-spacing: 0; text-transform: none; }
    @media (max-width: 720px) { [dir="rtl"] .wa-fab { right: 16px; } [dir="rtl"] .to-top { left: 16px; } }

    .nav ul a, .menu-btn { white-space: nowrap; }   /* longer words in other languages stay on one line */

    /* Pricing cards: the full feature list, as in the app */
    .plan .save { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 12px; padding: 4px 10px; border-radius: 8px;
        background: #ecfbf2; color: #15803d; font: 600 .76rem var(--body); box-shadow: inset 0 0 0 1px rgba(34,197,94,.3); }
    .plan .save.free { background: #eef4ff; color: #1a4fd6; box-shadow: inset 0 0 0 1px rgba(26,104,255,.22); }
    .plan.hot .save { background: rgba(34,197,94,.14); color: #6ee7a0; box-shadow: none; }
    .plan ul { gap: 9px; margin: 20px 0 14px; }
    .plan li b { color: var(--ink); font-weight: 700; }
    .plan.hot li b { color: #ffffff; }
    .plan li.off { opacity: .42; }
    .plan li.off iconify-icon { color: #9aa3b5; }
    .plan.hot li.off iconify-icon { color: rgba(255,255,255,.5); }
    .plan .cancel { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; color: var(--muted); font-size: .8rem; }
    .plan .cancel iconify-icon { color: #22c55e; }
    .plan.hot .cancel { color: rgba(255,255,255,.6); }

    /* RTL, part 2: anything JavaScript moves sideways (pinned panels, marquee, blog carousel) keeps
       a left-to-right track, with right-to-left text inside; pictures of the app stay left-to-right. */
    [dir="rtl"] .hs, [dir="rtl"] .marquee, [dir="rtl"] .blog, [dir="rtl"] #orbit { direction: ltr; }   /* wide tracks start at the left edge */
    [dir="rtl"] .hs .panel, [dir="rtl"] .blog .head { direction: rtl; text-align: right; }
    [dir="rtl"] .blog .head .arrows { direction: ltr; }          /* ← and → match the left-to-right carousel */
    [dir="rtl"] #posts .post { direction: ltr; text-align: left; } /* post titles are English */
    [dir="rtl"] .hero-shot, [dir="rtl"] .fv, [dir="rtl"] .frame, [dir="rtl"] .svc-vis, [dir="rtl"] .screens,
    [dir="rtl"] .ph-shot, [dir="rtl"] .float { direction: ltr; text-align: left; }

    .plan .price .per { margin-inline-start: 4px; }
    .plan .price .py { display: none; }
    .plan .price.yr .pm { display: none; } .plan .price.yr .py { display: inline; }

    /* Footer language switcher: opens upwards, light text on the dark footer */
    .lang-foot .lang-btn { color: rgba(255,255,255,.85); height: 36px; padding: 0 10px; }
    .lang-foot .lang-btn:hover, .lang-foot.open .lang-btn { background: rgba(255,255,255,.08); }
    .lang-foot .lang-code { display: none; }
    .lang-foot .lang-name { display: inline; }
    .lang .lang-name { display: none; }
    .lang-foot .lang-menu { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; }
    [dir="rtl"] .lang-foot .lang-menu { left: auto; right: 0; }

    /* RTL, part 3: the looping strips (client logos, reviews, footer logos) run left to right in every language; their text is English. */
    [dir="rtl"] .logos, [dir="rtl"] .quotes-mask, [dir="rtl"] .fstrip { direction: ltr; text-align: left; }

    [dir="rtl"] .plan .tag { right: auto; left: 18px; }   /* "Popular" sits on the other corner, away from the plan name */
    [dir="rtl"] .cta-big h2 { font-family: "Devlo Arabic", sans-serif; font-size: clamp(2.2rem, 5.5vw, 4.6rem); line-height: 1.35; letter-spacing: 0; font-stretch: normal; text-transform: none; }
    [dir="rtl"] .cta-big h2 em { font-family: "Devlo Arabic", sans-serif; font-style: normal; font-size: 1em; line-height: 1.35; }

    /* ── Phone and tablet menu (js/mnav.js) ── */
    .burger { display: none; position: relative; width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 50%; background: rgba(90,100,128,.1); color: inherit; cursor: pointer; }
    .burger span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .2s; }
    .burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 21px; } .burger span:nth-child(3) { top: 26px; }
    .burger.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
    .burger.open span:nth-child(2) { opacity: 0; }
    .burger.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
    .nav.on-dark .burger { background: rgba(255,255,255,.1); }
    .nav.mnav-on, .nav.mnav-on.hide { transform: translateX(-50%); background: rgba(255,255,255,.96); color: var(--ink); }
    .nav.mnav-on .zlogo { color: var(--ink); }
    .mnav { position: fixed; inset: 0; z-index: 59; display: flex; flex-direction: column; padding: 96px 16px 20px; overflow-y: auto; overscroll-behavior: contain;
        background: rgba(250,251,253,.98); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
        opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s, transform .4s var(--ease), visibility 0s .4s; }
    .mnav.open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .4s var(--ease); }
    .mnav-list { display: flex; flex-direction: column; max-width: 640px; width: 100%; margin: 0 auto; }
    .mnav-link, .mnav-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 17px 6px; border: 0; border-bottom: 1px solid var(--line); background: none;
        font: 700 1.25rem var(--display); color: var(--ink); text-align: start; cursor: pointer; }
    .mnav-link.active { color: var(--orange); }
    .mnav-head i { position: relative; width: 14px; height: 14px; }
    .mnav-head i::before, .mnav-head i::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease); }
    .mnav-head i::after { transform: rotate(90deg); }
    .mnav-group.on .mnav-head i::after { transform: rotate(0); }
    .mnav-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
    .mnav-body > div { overflow: hidden; }
    .mnav-group.on .mnav-body { grid-template-rows: 1fr; }
    .mnav-group.on .mnav-body > div { padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
    .mnav-sub { display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-radius: 12px; font: 500 1rem var(--body); color: var(--ink-2); }
    .mnav-sub iconify-icon { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #eef4ff; color: var(--orange); font-size: 19px; }
    .mnav-sub.active { color: var(--orange); background: #eef4ff; }
    .mnav-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; width: 100%; margin: 26px auto 0; }
    .mnav-acts .btn { justify-content: center; padding: 15px 18px; }
    .mnav-acts .btn:only-child { grid-column: span 2; }
    html.mnav-lock, html.mnav-lock body { overflow: hidden; }
    @media (max-width: 1024px) { .burger { display: block; } }
    @media (min-width: 1025px) { .mnav { display: none; } }
    @media (max-width: 480px) { .nav .actions > .btn-dark { display: none; } .nav .brand .zlogo { width: 132px; } }
    html.mnav-lock .wa-fab, html.mnav-lock .to-top { opacity: 0; visibility: hidden; pointer-events: none; }

    /* ── Styled dropdowns (js/fselect.js) ── */
    .fsel { position: relative; margin-top: 8px; font: 500 1rem var(--body); }
    .fsel-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0; pointer-events: none; }
    .fsel-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 9px 14px 9px 16px; border: 0; border-radius: 14px; background: #f4f6fa;
        box-shadow: inset 0 0 0 1px var(--line); font: inherit; color: var(--ink); text-align: start; cursor: pointer; transition: background .25s, box-shadow .25s; }
    .fsel-btn:hover { background: #eef2f8; }
    .fsel-btn:focus-visible, .fsel.open .fsel-btn { outline: 0; background: #ffffff; box-shadow: inset 0 0 0 2px var(--orange), 0 0 0 5px rgba(26,104,255,.12); }
    .fsel span.fsel-label, .fsel span.fsel-text { color: inherit; font-weight: inherit; }
    .fsel span.fsel-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-weight: inherit; }
    .fsel-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .fsel-caret { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #ffffff; color: var(--muted); font-size: 16px;
        box-shadow: 0 0 0 1px var(--line); transition: transform .35s var(--ease), background .25s, color .25s; }
    .fsel.open .fsel-caret { transform: rotate(180deg); background: var(--orange); color: #ffffff; box-shadow: none; }
    .fsel-list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; max-height: 330px; overflow-y: auto; overscroll-behavior: contain; padding: 6px;
        border-radius: 18px; background: #ffffff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -22px rgba(19,29,51,.38);
        opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top center;
        transition: opacity .2s, transform .3s var(--ease), visibility 0s .3s; }
    .fsel.up .fsel-list { top: auto; bottom: calc(100% + 8px); transform-origin: bottom center; transform: translateY(6px) scale(.98); }
    .fsel.open .fsel-list { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .3s var(--ease); }
    .fsel-list:focus { outline: 0; }
    .fsel-opt { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; font: 500 .95rem var(--body); color: var(--ink-2); cursor: pointer; transition: background .15s; }
    .fsel-opt.on { background: #f1f5ff; }
    .fsel-opt[aria-selected="true"] { color: var(--orange); font-weight: 600; }
    .fsel-opt[aria-disabled="true"] { opacity: .45; cursor: default; }
    .fsel-text { flex: 1; min-width: 0; }
    .fsel-tick { flex: 0 0 auto; font-size: 18px; color: var(--orange); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--ease); }
    .fsel-opt[aria-selected="true"] .fsel-tick { opacity: 1; transform: none; }
    .fsel span.fsel-ic { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #eef4ff; color: var(--orange); font-size: 17px; transition: background .2s, color .2s; }
    .fsel-opt.on span.fsel-ic, .fsel-opt[aria-selected="true"] span.fsel-ic { background: var(--orange); color: #ffffff; }
    @media (max-width: 720px) { .fsel-list { max-height: 290px; } }