/* Jarasq landing pages (Arabic / and English /en/): shared styles */
:root {
  --ink: #0b1023;
  --ink-2: #334155;
  --muted: #64748b;
  --brand: #4f46e5;
  --brand-2: #4338ca;
  --brand-soft: #eef2ff;
  --gold: #fcd34d;
  --gold-ink: #92400e;
  --green: #059669;
  --bg: #f8fafc;
  --card: #ffffff;
  --line: #e2e8f0;
  --radius: 22px;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 12px 32px -14px rgb(15 23 42 / 0.18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg { display: block; }
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 16px;
  font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s; border: 0;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 14px 30px -14px rgb(79 70 229 / 0.85); }
.btn-primary:hover { background: var(--brand-2); }
.btn-light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-light:hover { background: #f1f5f9; }
.btn-gold { background: var(--gold); color: #422006; }
.btn-gold:hover { background: #fbbf24; }
:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; border-radius: 8px; }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: rgb(248 250 252 / 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid rgb(226 232 240 / 0.7); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 21px; }
.brand small { font-size: 13px; font-weight: 600; color: var(--muted); margin-inline-start: 2px; }
.logo { width: 38px; height: 38px; flex: none; }
.nav { display: flex; gap: 26px; font-weight: 600; font-size: 15px; color: var(--ink-2); }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--brand); }
.top-cta { display: flex; align-items: center; gap: 10px; }
.top-cta .btn { height: 42px; padding: 0 18px; font-size: 14px; border-radius: 13px; }
@media (max-width: 860px) { .nav { display: none; } }
@media (max-width: 480px) { .top-cta .btn-light { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 70px 0 90px; }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 380px at 85% 20%, rgb(165 180 252 / 0.45), transparent 70%),
    radial-gradient(520px 340px at 10% 75%, rgb(252 211 77 / 0.28), transparent 70%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgb(148 163 184 / 0.14) 1px, transparent 1px), linear-gradient(90deg, rgb(148 163 184 / 0.14) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--brand-2); box-shadow: var(--shadow); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgb(5 150 105 / 0.15); }
h1 { font-size: clamp(36px, 5.6vw, 62px); line-height: 1.22; margin: 22px 0 18px; letter-spacing: -0.5px; }
h1 .hl { color: var(--brand); position: relative; white-space: nowrap; }
h1 .hl::after { content: ''; position: absolute; inset-inline: 0; bottom: 6px; height: 14px; background: rgb(252 211 77 / 0.55); z-index: -1; border-radius: 6px; }
.lead { font-size: 19px; color: var(--ink-2); max-width: 560px; margin: 0 0 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof svg { width: 18px; height: 18px; color: var(--green); }

/* Phone mockup */
.stage { position: relative; display: grid; place-items: center; min-height: 560px; }
.phone {
  position: relative; width: 290px; height: 560px; border-radius: 46px; background: #0b1023; padding: 12px;
  box-shadow: 0 50px 80px -30px rgb(30 27 75 / 0.55), inset 0 0 0 2px #1e293b;
  animation: float 6s ease-in-out infinite;
}
.screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: linear-gradient(180deg, #ecfdf5, #f8fafc 55%); }
.notch { position: absolute; top: 10px; left: 50%; translate: -50% 0; width: 92px; height: 26px; border-radius: 20px; background: #0b1023; z-index: 2; }
.scr-head { display: flex; align-items: center; gap: 9px; padding: 48px 18px 12px; }
.scr-logo { width: 34px; height: 34px; border-radius: 11px; background: #2563eb; display: grid; place-items: center; font-size: 18px; }
.scr-name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.scr-name small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }
.live { margin-inline-start: auto; font-size: 10px; font-weight: 700; color: var(--green); background: #d1fae5; padding: 3px 9px; border-radius: 999px; }
.scr-card { margin: 6px 14px; background: #fff; border-radius: 26px; padding: 20px 16px 18px; text-align: center; box-shadow: 0 10px 30px -14px rgb(5 150 105 / 0.55); border: 2px solid #6ee7b7; }
.ready-pill { display: inline-flex; gap: 6px; align-items: center; background: #dcfce7; color: #166534; font-weight: 700; font-size: 12px; padding: 5px 12px; border-radius: 999px; }
.num { font-family: ui-monospace, 'JetBrains Mono', monospace; font-weight: 700; font-size: 84px; line-height: 1; color: var(--green); margin: 12px 0 8px; }
.car { font-size: 12.5px; color: var(--ink-2); background: #f1f5f9; border-radius: 12px; padding: 7px 10px; }
.steps { display: flex; justify-content: space-between; margin: 16px 2px 4px; }
.steps i { flex: 1; height: 5px; border-radius: 4px; background: var(--green); margin: 0 2px; }
.steps i:last-child { background: #fcd34d; }
.scr-btn { margin: 12px 14px 0; background: #7c3aed; color: #fff; border-radius: 16px; padding: 12px; text-align: center; font-weight: 700; font-size: 13px; }
.ring { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ring span { position: absolute; width: 300px; height: 300px; border-radius: 50%; border: 2px solid rgb(5 150 105 / 0.45); animation: ring 3s ease-out infinite; }
.ring span:nth-child(2) { animation-delay: 1s; }
.ring span:nth-child(3) { animation-delay: 2s; }
.bubble {
  position: absolute; z-index: 3; background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow);
  display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; border: 1px solid var(--line); white-space: nowrap;
}
.bubble b { display: block; font-size: 14px; }
.bubble small { color: var(--muted); font-weight: 500; }
.bubble .ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; flex: none; }
.b1 { top: 70px; inset-inline-start: -10px; animation: float 6s ease-in-out infinite 1s; }
.b1 .ic { background: #eef2ff; }
.b2 { bottom: 90px; inset-inline-end: -16px; animation: float 6s ease-in-out infinite 2.2s; }
.b2 .ic { background: #fef3c7; }
@keyframes ring { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(1.45); opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (max-width: 940px) {
  .hero { padding: 40px 0 60px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 30px; }
  .stage { min-height: 520px; }
}
@media (max-width: 420px) {
  .b1 { inset-inline-start: 0; } .b2 { inset-inline-end: 0; }
  .phone { width: 262px; height: 520px; }
}

/* ---------- Sections ---------- */
section { scroll-margin-top: 80px; }
.sec { padding: 90px 0; }
.sec-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.kicker { color: var(--brand); font-weight: 700; font-size: 14px; letter-spacing: 0.3px; }
h2 { font-size: clamp(28px, 3.8vw, 42px); line-height: 1.3; margin: 8px 0 12px; letter-spacing: -0.3px; }
.sec-head p { color: var(--ink-2); font-size: 17.5px; margin: 0; }

.strip { background: var(--ink); color: #e2e8f0; padding: 22px 0; }
.strip .wrap { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 14px 30px; font-weight: 600; font-size: 15px; }
.strip span { display: inline-flex; gap: 9px; align-items: center; }
.strip b { color: var(--gold); font-size: 18px; }

/* Problem */
.pain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pain div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.pain .x { width: 38px; height: 38px; border-radius: 12px; background: #fee2e2; color: #b91c1c; display: grid; place-items: center; font-weight: 700; margin-bottom: 12px; }
.pain h3 { margin: 0 0 6px; font-size: 18px; }
.pain p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

/* How it works */
.how { background: #fff; border-block: 1px solid var(--line); }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; }
.how-step { position: relative; padding: 28px 24px 24px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.how-step::before {
  counter-increment: s; content: counter(s); position: absolute; top: -18px; inset-inline-start: 22px;
  width: 40px; height: 40px; border-radius: 13px; background: var(--brand); color: #fff; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 10px 20px -10px rgb(79 70 229 / 0.9);
}
.how-step .emoji { font-size: 34px; margin: 8px 0 6px; }
.how-step h3 { margin: 0 0 6px; font-size: 19px; }
.how-step p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

/* Industries */
.ind { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ind article { border-radius: var(--radius); padding: 24px; color: #fff; position: relative; overflow: hidden; min-height: 250px; display: flex; flex-direction: column; }
.ind article::after { content: attr(data-emoji); position: absolute; bottom: -18px; inset-inline-end: -8px; font-size: 96px; opacity: 0.18; }
.ind .tag { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.18); margin-bottom: 14px; }
.ind h3 { margin: 0 0 8px; font-size: 20px; }
.ind p { margin: 0; font-size: 14.5px; opacity: 0.92; }
.i1 { background: linear-gradient(150deg, #ea580c, #c2410c); }
.i2 { background: linear-gradient(150deg, #0d9488, #0f766e); }
.i3 { background: linear-gradient(150deg, #2563eb, #1d4ed8); }
.i4 { background: linear-gradient(150deg, #db2777, #9d174d); }

/* Valet VIP */
.valet { background: linear-gradient(160deg, #0b1023, #241f47); color: #e2e8f0; }
.valet-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.valet .kicker { color: var(--gold); }
.valet h2 { color: #fff; }
.valet-lead { color: #cbd5e1; font-size: 17.5px; margin: 0; }
.vsteps { display: grid; gap: 12px; margin-top: 26px; }
.vstep { display: flex; gap: 14px; align-items: flex-start; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.1); border-radius: 18px; padding: 16px; }
.vstep .n { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--gold); display: grid; place-items: center; font-size: 21px; }
.vstep h3 { margin: 0 0 3px; color: #fff; font-size: 17px; }
.vstep p { margin: 0; color: #cbd5e1; font-size: 15px; }
.vchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.vchips span { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgb(252 211 77 / 0.1); color: var(--gold); border: 1px solid rgb(252 211 77 / 0.3); }
.vcard { width: 100%; max-width: 340px; margin: 0 auto; background: #fff; color: var(--ink); border-radius: 30px; padding: 24px; text-align: center; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.7), 0 0 0 6px rgb(252 211 77 / 0.25); }
.vcard-head { display: flex; align-items: center; gap: 10px; text-align: start; margin-bottom: 18px; }
.vcard-head b { display: block; font-size: 15px; }
.vcard-head small { color: var(--muted); font-size: 12px; }
.vlogo { width: 40px; height: 40px; border-radius: 13px; background: #111827; display: grid; place-items: center; font-size: 20px; }
.vcard-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.vcard-num { font-family: ui-monospace, 'JetBrains Mono', monospace; font-weight: 700; font-size: 64px; line-height: 1.1; color: #111827; letter-spacing: 2px; }
.vcard-car { font-size: 13px; background: #f1f5f9; border-radius: 12px; padding: 7px 10px; margin: 8px 0 14px; color: var(--ink-2); }
.vcard-ready { background: #dcfce7; color: #166534; font-weight: 700; border-radius: 16px; padding: 12px; font-size: 15px; border: 2px solid #6ee7b7; }
.vcard-ack { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
@media (max-width: 940px) { .valet-grid { grid-template-columns: 1fr; gap: 36px; } }

/* Features */
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: transform 0.2s, box-shadow 0.2s; }
.feat div:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feat .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--brand-soft); display: grid; place-items: center; font-size: 22px; margin-bottom: 12px; }
.feat h3 { margin: 0 0 4px; font-size: 17px; }
.feat p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* Cashier showcase */
.show { background: radial-gradient(800px 400px at 50% 0%, #312e81, var(--ink) 70%); color: #e2e8f0; }
.show h2, .show .kicker { color: #fff; }
.show .kicker { color: var(--gold); }
.show .sec-head p { color: #cbd5e1; }
.dash { max-width: 980px; margin: 0 auto; background: #f8fafc; border-radius: 24px; padding: 18px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.6); color: var(--ink); }
.dash-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.dash-top .who { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.dash-top .who i { width: 38px; height: 38px; border-radius: 12px; background: #2563eb; display: grid; place-items: center; font-style: normal; }
.dash-new { background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 13px; font-weight: 700; font-size: 14px; }
.dash-req { background: #f5f3ff; border: 2px solid #a78bfa; border-radius: 16px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.dash-req em { font-style: normal; margin-inline-start: auto; background: #7c3aed; color: #fff; padding: 6px 12px; border-radius: 10px; font-size: 13px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.oc { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.oc.req { border-color: #a78bfa; box-shadow: 0 0 0 3px rgb(167 139 250 / 0.25); }
.oc-top { display: flex; justify-content: space-between; align-items: center; }
.oc-num { font-family: ui-monospace, monospace; font-weight: 700; font-size: 26px; }
.oc-time { font-size: 11px; background: #f1f5f9; padding: 3px 8px; border-radius: 999px; color: var(--ink-2); }
.oc-det { font-weight: 600; font-size: 14px; margin: 6px 0 10px; }
.oc-bar { display: flex; gap: 4px; margin-bottom: 12px; }
.oc-bar i { flex: 1; height: 5px; border-radius: 3px; background: #e2e8f0; }
.oc-bar i.on { background: var(--green); }
.oc-btn { text-align: center; color: #fff; border-radius: 11px; padding: 8px; font-size: 13px; font-weight: 700; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } .oc:nth-child(3) { display: none; } }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 30px 26px; display: flex; flex-direction: column; }
.plan.pop { border: 2px solid var(--brand); box-shadow: 0 30px 60px -30px rgb(79 70 229 / 0.55); transform: translateY(-8px); }
.plan .badge { position: absolute; top: -14px; inset-inline-start: 50%; translate: 50% 0; background: var(--gold); color: #422006; font-weight: 700; font-size: 13px; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
[dir='rtl'] .plan .badge { translate: 50% 0; }
.plan h3 { margin: 0; font-size: 22px; }
.plan .for { color: var(--muted); font-size: 14.5px; margin: 4px 0 18px; }
.price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.price b { font-size: 40px; font-family: ui-monospace, monospace; letter-spacing: -1px; }
.price span { color: var(--muted); font-weight: 600; }
.limits { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.limits span { font-size: 13px; font-weight: 600; background: var(--brand-soft); color: var(--brand-2); padding: 4px 10px; border-radius: 999px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; align-content: start; gap: 10px; font-size: 15px; flex: 1; }
.plan li { display: flex; gap: 9px; align-items: flex-start; }
.plan li::before { content: '✓'; flex: none; width: 21px; height: 21px; border-radius: 50%; background: #d1fae5; color: var(--green); font-weight: 700; font-size: 12px; display: grid; place-items: center; margin-top: 3px; }
.plan li.no { color: #94a3b8; }
.plan li.no::before { content: '–'; background: #f1f5f9; color: #94a3b8; }
.plan .btn { width: 100%; }
.price-note { text-align: center; color: var(--muted); font-size: 14.5px; margin-top: 28px; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 4px 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--brand); font-size: 24px; line-height: 1; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 18px; color: var(--ink-2); font-size: 15.5px; }

/* CTA + footer */
.cta { padding: 0 0 90px; }
.cta-box { position: relative; overflow: hidden; border-radius: 32px; padding: 56px 32px; text-align: center; color: #fff; background: linear-gradient(135deg, var(--brand), #7c3aed); }
.cta-box::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgb(252 211 77 / 0.22); top: -180px; inset-inline-end: -120px; }
.cta-box h2 { color: #fff; position: relative; }
.cta-box p { position: relative; color: #e0e7ff; font-size: 18px; margin: 0 auto 26px; max-width: 560px; }
.cta-box .hero-cta { justify-content: center; position: relative; }
footer { border-top: 1px solid var(--line); padding: 34px 0; font-size: 14px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--brand); }

@media (max-width: 940px) {
  .pain, .how-grid, .feat, .plans { grid-template-columns: 1fr; }
  .ind { grid-template-columns: repeat(2, 1fr); }
  .plan.pop { transform: none; }
  .how-grid { gap: 34px; }
  .sec { padding: 64px 0; }
}
@media (max-width: 560px) { .ind { grid-template-columns: 1fr; } .ind article { min-height: 0; } }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s, transform 0.6s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* English (LTR) page */
[dir='ltr'] body { font-family: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif; }
[dir='ltr'] .plan .badge { translate: -50% 0; }
[dir='ltr'] h1 { letter-spacing: -1px; }
.lang { font-weight: 700; font-size: 14px; text-decoration: none; color: var(--ink-2); padding: 0 6px; }
.lang:hover { color: var(--brand); }