/* The home page (Views/Home/Index.cshtml), and nothing else.

   The approved landing design of 2026-10-15, moved here from its single preview file. It is dark only: the page
   pins data-theme="dark" (_Layout's DarkOnly) and offers no light/dark button, while every other page keeps its
   own. Everything is scoped under body.lp so none of it reaches another page, and the design's generic class
   names (.hero, .faq) are renamed where marketing.css already uses them.

   The site's own header and footer are kept — navigation, the language switch, the signup button, the terms
   and privacy links — and restyled here to the design's sticky dark bar.

   Right-to-left is the design as drawn; the html[dir="ltr"] rules mirror the few things that are directional
   (the marquee, the progress bars, the steps line) for the English page. */

.lp {
    --navy: #0F2A4A; --navy2: #0B1F38; --deep: #07162A; --teal: #14B8A6; --teal2: #2DD4BF; --tealink: #5EEAD4;
    --ink: #EAF2FA; --soft: #9DB2CC; --line: rgba(255,255,255,.09); --card: rgba(255,255,255,.035);
    background: var(--deep);
    color: var(--ink);
    font-family: "IBM Plex Sans Arabic", system-ui, "Segoe UI", sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
html:has(body.lp) { scroll-behavior: smooth; }
.lp a { color: inherit; text-decoration: none; }
.lp h1, .lp h2, .lp h3 { font-family: "Readex Pro", sans-serif; line-height: 1.25; margin: 0; }
.lp main { padding: 0; overflow-x: clip; }
.lp .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.lp .pill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--tealink); background: rgba(20,184,166,.1); border: 1px solid rgba(20,184,166,.35); border-radius: 99px; padding: 5px 14px; }
.lp .pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(20,184,166,.2); }
.lp .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 17px; border-radius: 14px; padding: 14px 26px; border: 0; cursor: pointer; font-family: inherit; transition: transform .15s, box-shadow .15s; }
.lp .btn:hover { transform: translateY(-2px); }
.lp .btn-wa { background: #25D366; color: #06301A; box-shadow: 0 14px 30px -12px rgba(37,211,102,.6); }
.lp .btn-teal { background: linear-gradient(90deg, var(--teal), var(--teal2)); color: #032B27; box-shadow: 0 14px 30px -12px rgba(20,184,166,.7); }
.lp .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.lp .wa-ico { width: 22px; height: 22px; flex-shrink: 0; }
.lp main section { padding: 96px 0; }
.lp .head { max-width: 760px; margin-bottom: 44px; }
.lp .head h2 { font-size: clamp(28px, 4vw, 42px); margin-top: 14px; }
.lp .head p { color: var(--soft); font-size: 18px; margin: 14px 0 0; }
.lp .center { text-align: center; margin-inline: auto; }
.lp main section.pt0 { padding-top: 0; }
.lp main section.pt40 { padding-top: 40px; }
.lp main section.pt20 { padding-top: 20px; }

/* ---- the site's header, as the design's sticky bar ---- */
.lp .site-header {
    position: sticky; top: 0; z-index: 20;
    min-height: 68px;
    padding-block: 10px;
    padding-inline: max(24px, calc((100% - 1180px) / 2 + 24px));
    background: rgba(7,22,42,.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.lp .brand { font-family: "Readex Pro", sans-serif; font-size: 19px; }
.lp .brand-logo { width: 34px; height: 34px; }
.lp .nav-link, .lp .lang-btn { color: var(--soft); }
.lp .nav-link:hover, .lp .lang-btn:hover, .lp .lang-btn:focus-visible { color: var(--ink); background: transparent; }
.lp .btn-nav { color: var(--teal2); border-color: rgba(45,212,191,.6); }
.lp .site-header .btn { padding: 10px 18px; font-size: 15px; white-space: nowrap; }
@media (max-width: 900px) {
    /* The header's WhatsApp button keeps its icon and drops its words: the row has the links to fit too. */
    .lp .site-header .btn { padding: 9px; border-radius: 12px; }
    .lp .site-header .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- the site's footer ---- */
.lp .site-footer {
    border-top: 1px solid var(--line);
    padding-block: 28px;
    padding-inline: max(24px, calc((100% - 1180px) / 2 + 24px));
    color: var(--soft);
    font-size: 14px;
}
.lp .footer-links a, .lp .footer-contact a { color: var(--soft); }
.lp .footer-links a:hover, .lp .footer-contact a:hover { color: var(--ink); }
.lp .national-address { color: var(--soft); }

/* ---- hero ---- */
.lp .lp-hero { position: relative; overflow: hidden; padding: 72px 0 88px; background:
    radial-gradient(700px 420px at 85% 0%, rgba(20,184,166,.18), transparent 70%),
    radial-gradient(600px 500px at 0% 100%, rgba(45,212,191,.08), transparent 70%),
    linear-gradient(180deg, var(--navy2), var(--deep)); }
.lp .lp-hero:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(circle at 70% 30%, #000, transparent 75%); mask-image: radial-gradient(circle at 70% 30%, #000, transparent 75%); opacity: .6; }
.lp .lp-hero .wrap { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.lp .lp-hero h1 { font-size: clamp(36px, 5.4vw, 62px); margin: 18px 0; }
/* Latin runs wider than Arabic at the same size: the English headline is set a step smaller to keep its four lines. */
html[dir="ltr"] .lp .lp-hero h1 { font-size: clamp(32px, 4.4vw, 52px); }
.lp .lp-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--teal2), #7DD3FC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp .lp-hero .lead { font-size: 19px; color: var(--soft); max-width: 560px; margin: 0 0 28px; }
.lp .lp-hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.lp .proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; color: var(--soft); font-size: 15px; }
.lp .proof span:before { content: "✓"; color: var(--teal2); font-weight: 700; margin-inline-end: 8px; }

/* ---- demo form ---- */
.lp .form { background: linear-gradient(180deg, rgba(22,44,74,.96), rgba(12,30,54,.96)); border: 1px solid rgba(45,212,191,.28); border-radius: 24px; padding: 28px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); scroll-margin-top: 90px; }
.lp .form h3 { font-size: 22px; }
.lp .form .sub { color: var(--soft); font-size: 15px; margin: 4px 0 18px; }
.lp .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp .form label { display: block; font-size: 14px; color: #CFE0F2; margin: 12px 0 6px; }
.lp .form input, .lp .form textarea { width: 100%; background: rgba(7,22,42,.7); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--ink); font-family: inherit; font-size: 15px; }
.lp .form input:focus, .lp .form textarea:focus { outline: 2px solid rgba(45,212,191,.5); border-color: transparent; }
.lp .form .needs { display: flex; flex-wrap: wrap; gap: 8px; }
.lp .form .needs label { margin: 0; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; font-size: 14px; cursor: pointer; }
.lp .form .needs input { width: auto; accent-color: var(--teal); }
.lp .form .btn { width: 100%; margin-top: 18px; }
.lp .form small { display: block; text-align: center; color: var(--soft); font-size: 13px; margin-top: 10px; }
.lp .form .field-error { margin-top: 4px; }
.lp .form .alert-error { margin: 0 0 12px; }

/* ---- problem ---- */
.lp .pain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp .card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.lp .card .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; margin-bottom: 16px; }
.lp .card h3 { font-size: 20px; margin-bottom: 8px; }
.lp .card p { color: var(--soft); margin: 0; font-size: 16px; }
.lp .bad .ic { background: rgba(248,113,113,.12); }
.lp .files { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; direction: ltr; justify-content: flex-end; }
html[dir="ltr"] .lp .files { justify-content: flex-start; }
.lp .files span { font-size: 12px; border: 1px dashed rgba(248,113,113,.4); color: #FCA5A5; border-radius: 8px; padding: 3px 9px; }

/* ---- solution hub ---- */
.lp .sol { background: linear-gradient(180deg, var(--deep), var(--navy2)); }
.lp .sol .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lp .sol h2, .lp .shots h2 { font-size: clamp(28px, 4vw, 42px); margin-top: 14px; }
.lp .shots h2 { font-size: clamp(28px, 4vw, 40px); }
.lp .sol .wrap > div > p, .lp .shots .wrap > div > p { color: var(--soft); font-size: 18px; }
.lp .hub { position: relative; aspect-ratio: 1; max-width: 470px; margin: auto; width: 100%; }
.lp .hub .ring { position: absolute; inset: 12%; border: 1px dashed rgba(45,212,191,.3); border-radius: 50%; }
.lp .hub .core { position: absolute; inset: 36%; border-radius: 28px; background: linear-gradient(160deg, #16395F, #0F2A4A); border: 1px solid rgba(45,212,191,.45); display: grid; place-items: center; box-shadow: 0 0 80px rgba(20,184,166,.35); }
.lp .hub .core svg { width: 56%; }
.lp .node { position: absolute; width: 104px; text-align: center; transform: translate(50%, -50%); font-size: 13px; font-weight: 600; color: #CFE0F2; }
.lp .node b { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 6px; border-radius: 15px; background: linear-gradient(160deg, #145E6A, #0F3D57); border: 1px solid rgba(45,212,191,.45); font-size: 22px; }
.lp .feed { margin-top: 26px; border: 1px solid var(--line); background: rgba(7,22,42,.6); border-radius: 18px; padding: 18px 20px; font-size: 15px; }
.lp .feed .t { font-size: 13px; color: var(--tealink); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.lp .feed .t i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
.lp .feed div.l { display: flex; gap: 10px; color: #CFE0F2; padding: 5px 0; border-top: 1px solid var(--line); }
.lp .feed div.l:first-of-type { border-top: 0; }
.lp .feed div.l s { text-decoration: none; color: var(--soft); font-family: "Readex Pro", sans-serif; direction: ltr; min-width: 44px; }
.lp .feed div.l em { font-style: normal; color: var(--soft); }

/* ---- modules (each opens its page under /Systems) ---- */
.lp .mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lp .mod { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; transition: border-color .2s, transform .2s; }
.lp .mod:hover { border-color: rgba(45,212,191,.5); transform: translateY(-3px); }
.lp .mod:focus-visible { outline: 2px solid var(--teal2); outline-offset: 2px; }
.lp .mod .e { font-size: 24px; }
.lp .mod h3 { font-size: 17px; margin: 10px 0 6px; }
.lp .mod p { margin: 0; color: var(--soft); font-size: 14px; }

/* ---- app ---- */
.lp .app .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lp .app h3 { margin-top: 4px; }
.lp .app ul { list-style: none; padding: 0; margin: 14px 0 0; }
.lp .app li { padding: 7px 0; color: #CFE0F2; border-top: 1px solid var(--line); font-size: 15.5px; }
.lp .app li:first-child { border-top: 0; }
.lp .app li:before { content: "✓"; color: var(--teal2); margin-inline-end: 10px; font-weight: 700; }
.lp .tag { font-size: 13px; color: var(--tealink); }

/* ---- why + facts ---- */
.lp .why .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; align-items: start; }
.lp .why .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp .why .card .n { font-family: "Readex Pro", sans-serif; color: var(--teal2); font-size: 14px; }
.lp .facts { border: 1px solid rgba(45,212,191,.3); border-radius: 22px; padding: 24px; background: linear-gradient(180deg, rgba(20,184,166,.06), transparent); }
.lp .facts h3 { font-size: 19px; margin-bottom: 6px; }
.lp .facts dl { margin: 0; }
.lp .facts dt { font-size: 13px; color: var(--soft); margin-top: 14px; }
.lp .facts dd { margin: 2px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-weight: 500; }
.lp .facts dd:last-child { border-bottom: 0; }

/* ---- screens ---- */
.lp .shots { background: linear-gradient(180deg, var(--navy2), var(--deep)); }
.lp .shots .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.lp .laptop { border-radius: 18px 18px 6px 6px; background: #1A2B42; padding: 12px 12px 0; border: 1px solid var(--line); box-shadow: 0 50px 90px -40px rgba(0,0,0,.9); }
.lp .laptop .bar { display: flex; gap: 6px; padding: 0 4px 10px; direction: ltr; }
.lp .laptop .bar i { width: 10px; height: 10px; border-radius: 50%; background: #3B5274; }
.lp .laptop .screen { position: relative; background: #fff; border-radius: 8px 8px 0 0; height: 380px; overflow: hidden; }
.lp .laptop .screen img { position: absolute; inset: 0 0 auto 0; width: 100%; display: block; opacity: 0; transition: opacity .9s; }
.lp .base { height: 14px; margin: 0 -26px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #2A3F5E, #16253A); }
.lp .tabs { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.lp .tabs button { position: relative; overflow: hidden; font-family: inherit; font-size: 14px; border: 1px solid var(--line); background: var(--card); color: #CFE0F2; border-radius: 99px; padding: 7px 14px; cursor: pointer; }
.lp .tabs button.on { background: var(--teal); color: #032B27; border-color: var(--teal); font-weight: 700; }
.lp .badge-z { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 14px; color: var(--soft); }
.lp .badge-z img { height: 34px; width: auto; background: #fff; border-radius: 8px; padding: 4px 8px; }

/* ---- steps + band ---- */
.lp .steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
.lp .steps b { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 15px; background: linear-gradient(160deg, var(--teal), #0E7C70); color: #032B27; font-family: "Readex Pro", sans-serif; font-size: 20px; }
.lp .steps h3 { font-size: 18px; margin-bottom: 6px; }
.lp .steps p { color: var(--soft); margin: 0; font-size: 15px; }
.lp .band { margin-top: 64px; border-radius: 26px; padding: 48px 24px; text-align: center; background:
    radial-gradient(500px 240px at 20% 0%, rgba(255,255,255,.18), transparent 70%), linear-gradient(120deg, #0E7C70, #14B8A6 55%, #0F5E8A); }
.lp .band h2 { font-size: clamp(24px, 3.4vw, 36px); color: #fff; }
.lp .band p { color: #E6FFFB; margin: 10px 0 22px; }
.lp .band .btn-wa { background: #fff; color: #0B5D52; }

/* ---- faq ---- */
.lp .lp-faq { max-width: 860px; margin: auto; }
.lp .lp-faq details { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 16px 22px; margin-bottom: 12px; }
.lp .lp-faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.lp .lp-faq summary::-webkit-details-marker { display: none; }
.lp .lp-faq summary:after { content: "+"; color: var(--teal2); font-size: 22px; line-height: 1; }
.lp .lp-faq details[open] summary:after { content: "–"; }
.lp .lp-faq details p { color: var(--soft); margin: 12px 0 0; }

/* ===== motion ===== */
.lp #net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.lp .lp-hero .wrap { z-index: 1; }
.lp .lp-hero .wrap > * { min-width: 0; } /* the marquee track is max-content; without this it widens the column and pushes the form out */
.lp .lp-hero h1 em { background-size: 200% auto; animation: lp-shine 5s linear infinite; }
@keyframes lp-shine { to { background-position: 200% center; } }
.lp .pill i { animation: lp-ping 2s ease-out infinite; }
@keyframes lp-ping { 0% { box-shadow: 0 0 0 0 rgba(20,184,166,.6); } 100% { box-shadow: 0 0 0 10px rgba(20,184,166,0); } }

/* form: a light running round the border, and a slow float */
@property --lp-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.lp .form { position: relative; isolation: isolate; animation: lp-float 6s ease-in-out infinite; }
.lp .form:before { content: ""; position: absolute; inset: -1px; border-radius: 25px; padding: 1px; z-index: -1;
    background: conic-gradient(from var(--lp-a), transparent 0 70%, var(--teal2) 80%, #7DD3FC 85%, transparent 95%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: lp-spin 4s linear infinite; }
@keyframes lp-spin { to { --lp-a: 360deg; } }
@keyframes lp-float { 50% { transform: translateY(-10px); } }

/* marquee of modules */
.lp .marq { margin-top: 22px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lp .marq .track { display: flex; gap: 8px; width: max-content; animation: lp-marq 28s linear infinite; }
.lp .marq span { font-size: 14px; border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: 5px 13px; color: #CFE0F2; white-space: nowrap; }
@keyframes lp-marq { to { transform: translateX(50%); } }
html[dir="ltr"] .lp .marq .track { animation-name: lp-marq-ltr; }
@keyframes lp-marq-ltr { to { transform: translateX(-50%); } }

/* reveal on scroll */
.lp .reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.lp .reveal.in { opacity: 1; transform: none; }

/* hub: turning ring, flowing lines, breathing core, bobbing nodes */
.lp .hub .ring { animation: lp-turn 40s linear infinite; }
.lp .hub .ring2 { position: absolute; inset: 26%; border: 1px solid rgba(45,212,191,.15); border-radius: 50%; animation: lp-turn 25s linear infinite reverse; }
.lp .hub .ring:after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--teal2); box-shadow: 0 0 14px var(--teal2); }
@keyframes lp-turn { to { transform: rotate(360deg); } }
.lp .hub svg.links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp .hub svg.links line { stroke: rgba(45,212,191,.35); stroke-width: 1.2; }
.lp .hub svg.links circle { fill: var(--teal2); filter: drop-shadow(0 0 4px var(--teal2)); }
.lp .hub .core { animation: lp-breathe 3.2s ease-in-out infinite; }
@keyframes lp-breathe { 50% { box-shadow: 0 0 120px rgba(20,184,166,.6); transform: scale(1.04); } }
.lp .node b { animation: lp-bob 4s ease-in-out infinite; transition: transform .3s; }
.lp .node:nth-child(odd) b { animation-delay: -2s; }
.lp .node b.hit { box-shadow: 0 0 0 3px rgba(45,212,191,.5), 0 0 24px rgba(45,212,191,.7); }
@keyframes lp-bob { 50% { transform: translateY(-6px); } }

/* live feed */
.lp .feed .l { animation: lp-feed-in .6s cubic-bezier(.2,.7,.2,1); }
@keyframes lp-feed-in { from { opacity: 0; transform: translateX(-14px); background: rgba(45,212,191,.12); } to { opacity: 1; } }

/* cards: tilt, and a light that follows the mouse */
.lp .tilt { position: relative; transform-style: preserve-3d; transition: transform .25s ease, border-color .2s; }
.lp .tilt:after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(45,212,191,.16), transparent 60%); }
.lp .tilt:hover:after { opacity: 1; }
.lp .mod .e { display: inline-block; transition: transform .4s; }
.lp .mod:hover .e { transform: scale(1.25) rotate(-8deg); }

/* laptop: crossfade, and a slow scroll down the screenshot */
.lp .laptop .screen img.on { opacity: 1; animation: lp-pan 9s ease-in-out infinite alternate; }
@keyframes lp-pan { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 380px)); } }
.lp .tabs button.on:after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; height: 3px; background: rgba(3,43,39,.45); animation: lp-bar 5s linear forwards; }
@keyframes lp-bar { from { width: 0; } to { width: 100%; } }

/* steps: a line draws across, the numbers pop */
.lp .steps:before { content: ""; position: absolute; top: 26px; right: 12%; left: 12%; height: 2px; background: linear-gradient(90deg, var(--teal), var(--teal2)); transform: scaleX(0); transform-origin: right; transition: transform 1.6s ease .2s; }
html[dir="ltr"] .lp .steps:before { transform-origin: left; }
.lp .steps.in:before { transform: scaleX(1); }
.lp .steps > div { position: relative; }
.lp .steps b { transform: scale(.4); opacity: 0; transition: transform .6s cubic-bezier(.3,1.6,.5,1), opacity .4s; }
.lp .steps.in b { transform: none; opacity: 1; }
.lp .steps.in > div:nth-child(2) b { transition-delay: .4s; }
.lp .steps.in > div:nth-child(3) b { transition-delay: .8s; }
.lp .steps.in > div:nth-child(4) b { transition-delay: 1.2s; }

/* band: a moving gradient */
.lp .band { background-size: 200% 200%; animation: lp-wave 10s ease-in-out infinite; }
@keyframes lp-wave { 50% { background-position: 100% 50%; } }

/* WhatsApp buttons: a pulse */
.lp .btn-wa.pulse { position: relative; }
.lp .btn-wa.pulse:before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(37,211,102,.7); animation: lp-wa 2.2s infinite; }
@keyframes lp-wa { 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }

/* scroll progress */
.lp .prog { position: fixed; top: 0; inset-inline-start: 0; height: 3px; z-index: 40; background: linear-gradient(90deg, var(--teal2), #7DD3FC); width: 0; }

@media (prefers-reduced-motion: reduce) {
    .lp *, .lp *:before, .lp *:after { animation: none !important; transition: none !important; }
    .lp .reveal { opacity: 1; transform: none; }
    .lp .steps b { transform: none; opacity: 1; }
    .lp .steps:before { transform: scaleX(1); }
    html:has(body.lp) { scroll-behavior: auto; }
}

@media (max-width: 900px) {
    .lp .lp-hero .wrap, .lp .sol .wrap, .lp .why .wrap, .lp .shots .wrap { grid-template-columns: 1fr; }
    .lp .pain, .lp .app .grid { grid-template-columns: 1fr; }
    .lp .mods { grid-template-columns: 1fr 1fr; }
    .lp .steps { grid-template-columns: 1fr 1fr; }
    .lp .why .cards { grid-template-columns: 1fr; }
    .lp main section { padding: 64px 0; }
}

/* A phone: the hub's outer labels hang past its circle, so the circle gives them room inside the screen. */
@media (max-width: 560px) {
    .lp .hub { max-width: calc(100% - 72px); }
}

/* The two e-invoicing marks (_ComplianceBadges) sit beside the hero's first pill, smaller than on other pages. */
.lp .hero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lp .hero-tags .badges { margin: 0; padding: 0; max-width: none; justify-content: flex-start; gap: 8px; }
.lp .hero-tags .badge-tile { min-height: 36px; padding: 4px 12px; gap: 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); }
.lp .hero-tags .badge-mark { width: 24px; height: 24px; }
.lp .hero-tags .badge-text { font-size: 13px; }
.lp .hero-tags .badge-tile--zatca img { height: 26px; }
.lp .hero-tags .badge-art { height: 36px; border-radius: 10px; }

/* ===== Paper to system: rocket + notebook (Index.cshtml "PAPER TO SYSTEM"; home.js adds .run while it is on screen) ===== */
.lp .p2s { padding: 96px 0; background: linear-gradient(180deg, transparent, rgba(11,31,56,.85) 50%, transparent); overflow: hidden; }
.lp .p2s .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lp .p2s h2 { font-size: clamp(28px, 4vw, 42px); margin-top: 14px; }
.lp .p2s-lead { color: var(--soft); font-size: 18px; margin: 14px 0 0; line-height: 1.8; }
.lp .p2s-list { list-style: none; padding: 0; margin: 22px 0 0; }
.lp .p2s-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 16px; }
.lp .p2s-list li:first-child { border-top: 0; }
.lp .p2s-list s { text-decoration: line-through; text-decoration-color: #F87171; color: var(--soft); min-width: 120px; }
.lp .p2s-list b { color: var(--tealink); font-weight: 600; }
.lp .p2s-list i { font-style: normal; color: #F2B84B; }
html[dir="ltr"] .lp .p2s-list i { transform: scaleX(-1); display: inline-block; }
.lp .stage { position: relative; height: 520px; max-width: 470px; margin: auto; width: 100%; }
.lp .stage * { box-sizing: border-box; }
.lp .stage .star { position: absolute; width: 2px; height: 2px; border-radius: 2px; background: #9FE7DD; opacity: .5; }
.lp .run .star { animation: p2s-streak 1.2s linear infinite; }
@keyframes p2s-streak { 0% { transform: translateY(-40px); height: 2px; opacity: 0 } 30% { opacity: .8 } 100% { transform: translateY(560px); height: 26px; opacity: 0 } }
.lp .book { position: absolute; bottom: 18px; left: 50%; width: 300px; height: 200px; margin-left: -150px; perspective: 900px; }
.lp .book .cover { position: absolute; inset: 8px -6px -8px 6px; background: #7A4A2B; border-radius: 10px; box-shadow: 0 22px 40px -12px rgba(0,0,0,.7); }
.lp .page { position: absolute; inset: 0; border-radius: 6px 8px 8px 6px; background: linear-gradient(90deg, transparent 38px, rgba(239,68,68,.45) 38px 40px, transparent 40px), repeating-linear-gradient(180deg, #FBF8EF 0 21px, #C9DCEB 21px 22px); background-color: #FBF8EF; transform-origin: 50% 0; box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.lp .page:nth-child(3) { transform: translate(3px,3px); } .lp .page:nth-child(4) { transform: translate(1.5px,1.5px); }
.lp .book .rings { position: absolute; top: -9px; right: 16px; left: 16px; height: 18px; display: flex; justify-content: space-between; z-index: 5; }
.lp .book .rings i { width: 10px; height: 18px; border-radius: 6px; border: 2.5px solid #A9B6C4; border-bottom-color: transparent; }
.lp .ink { position: absolute; right: 50px; left: 22px; top: -3px; font-family: "Aref Ruqaa", "IBM Plex Sans Arabic", serif; color: #1E40AF; font-size: 15px; line-height: 22px; transform: rotate(-1.2deg); }
.lp .ink div { white-space: nowrap; overflow: hidden; }
.lp .ink .x { text-decoration: line-through; color: #A33; }
.lp .stain { position: absolute; left: 30px; bottom: 26px; width: 54px; height: 54px; border-radius: 50%; border: 5px solid rgba(146,94,44,.25); transform: rotate(20deg); }
.lp .sheet { position: absolute; left: 50%; bottom: 118px; width: 84px; height: 62px; margin-left: -42px; border-radius: 6px; opacity: 0; background: repeating-linear-gradient(180deg, #FBF8EF 0 9px, #C9DCEB 9px 10px); box-shadow: 0 8px 14px -6px rgba(0,0,0,.6); }
.lp .sheet .d { position: absolute; inset: 0; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: linear-gradient(160deg, #145E6A, #0F3D57); border: 1px solid rgba(45,212,191,.7); color: #E6FFFB; opacity: 0; box-shadow: 0 0 22px rgba(45,212,191,.45); }
.lp .sheet .d em { font-style: normal; font-size: 20px; line-height: 1; }
.lp .sheet .d span { font-size: 11.5px; font-weight: 600; }
.lp .run .sheet { animation: p2s-fly 6.5s cubic-bezier(.3,.1,.2,1) both; }
.lp .run .sheet .d { animation: p2s-digit 6.5s ease both; }
.lp .run .s1 { --x: -140px; --y: -330px; --r: -14deg; animation-delay: .15s } .lp .run .s1 .d { animation-delay: .15s }
.lp .run .s2 { --x: 0px; --y: -372px; --r: 8deg; animation-delay: .35s } .lp .run .s2 .d { animation-delay: .35s }
.lp .run .s3 { --x: 140px; --y: -330px; --r: 16deg; animation-delay: .55s } .lp .run .s3 .d { animation-delay: .55s }
.lp .run .s4 { --x: -72px; --y: -240px; --r: -6deg; animation-delay: .75s } .lp .run .s4 .d { animation-delay: .75s }
.lp .run .s5 { --x: 72px; --y: -240px; --r: 10deg; animation-delay: .95s } .lp .run .s5 .d { animation-delay: .95s }
@keyframes p2s-fly { 0%, 24% { opacity: 0; transform: translate(0,0) rotate(0) scale(.6) } 27% { opacity: 1; transform: translate(0,-30px) rotate(calc(var(--r) * -2)) scale(.9) } 46% { transform: translate(calc(var(--x) * .6), calc(var(--y) * .75)) rotate(calc(var(--r) * 3)) scale(1) } 58% { transform: translate(var(--x), var(--y)) rotate(0) scale(1) } 86% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) - 20px)) scale(.9) } }
@keyframes p2s-digit { 0%, 46% { opacity: 0; transform: rotateY(90deg) } 56%, 100% { opacity: 1; transform: none } }
.lp .run .page.top { animation: p2s-flutter 6.5s ease both; }
@keyframes p2s-flutter { 0%, 6% { transform: none } 10% { transform: rotateX(28deg) } 14% { transform: rotateX(6deg) } 18% { transform: rotateX(34deg) } 24%, 100% { transform: none } }
.lp .rocket { position: absolute; left: 50%; bottom: 150px; width: 92px; margin-left: -46px; z-index: 6; }
.lp .rocket svg { width: 100%; display: block; overflow: visible; filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
.lp .rocket .flame { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(.15); opacity: 0; }
.lp .run .rocket { animation: p2s-launch 6.5s cubic-bezier(.55,0,.75,.4) both; }
.lp .run .rocket .flame { animation: p2s-ignite 6.5s ease both, p2s-flicker .09s ease-in-out infinite alternate; }
@keyframes p2s-launch { 0%, 13%, 22% { transform: translate(0,0) } 14% { transform: translate(-1.5px,0) } 15% { transform: translate(1.5px,-1px) } 16% { transform: translate(-1.5px,0) } 17% { transform: translate(1.5px,-1px) } 18% { transform: translate(-1px,0) } 19% { transform: translate(1px,-1px) } 52% { transform: translate(0,-620px) } 53%, 88% { transform: translate(0,-620px); opacity: 0 } 96% { transform: translate(0,40px); opacity: 0 } 100% { transform: translate(0,0); opacity: 1 } }
@keyframes p2s-ignite { 0%, 11% { opacity: 0; transform: scaleY(.15) } 14% { opacity: 1; transform: scaleY(.6) } 24%, 50% { opacity: 1; transform: scaleY(1.35) } 53%, 100% { opacity: 0; transform: scaleY(.15) } }
@keyframes p2s-flicker { to { filter: brightness(1.35) } }
.lp .puff { position: absolute; bottom: 128px; left: 50%; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; background: radial-gradient(circle, #CBD5E1, #94A3B8 60%, transparent 70%); opacity: 0; }
.lp .run .puff { animation: p2s-puff 6.5s ease-out both; }
.lp .run .p1 { --px: -90px; animation-delay: .1s } .lp .run .p2 { --px: 90px; animation-delay: .2s } .lp .run .p3 { --px: -40px; animation-delay: .3s } .lp .run .p4 { --px: 40px; animation-delay: .25s }
@keyframes p2s-puff { 0%, 13% { opacity: 0; transform: translate(0,0) scale(.3) } 18% { opacity: .75 } 38% { opacity: 0; transform: translate(var(--px),18px) scale(2.4) } 100% { opacity: 0 } }
.lp .done { position: absolute; top: 250px; left: 50%; transform: translate(-50%,-10px); opacity: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; background: rgba(20,184,166,.14); border: 1px solid rgba(45,212,191,.5); color: #CCFBF1; font-weight: 600; font-size: 14px; border-radius: 99px; padding: 6px 14px; }
.lp .run .done { animation: p2s-done 6.5s ease both; }
@keyframes p2s-done { 0%, 56% { opacity: 0; transform: translate(-50%,-10px) } 62%, 86% { opacity: 1; transform: translate(-50%,0) } 100% { opacity: 0 } }
@media (max-width: 900px) { .lp .p2s .wrap { grid-template-columns: 1fr; } .lp .stage { height: 470px; transform: scale(.9); transform-origin: top center; } }
@media (max-width: 420px) { .lp .stage { transform: scale(.78); height: 420px; } }
@media (prefers-reduced-motion: reduce) { .lp .run * { animation: none !important; } }