/* =====================================================================
   Public landing page — design system
   Adapted from the "Queue Landing" design (navy/blue, Manrope + Inter,
   Tajawal for Arabic). Scoped to body#page-top so it never touches the
   backend dashboard theme.
   ===================================================================== */
:root{
  --ql-navy:#142451;
  --ql-ink:#101423;
  --ql-sub:#5B6478;
  --ql-line:#E3E7EE;
  --ql-bg:#F7F8FA;
  --ql-surf:#FFFFFF;
  --ql-blue:#2E6BFF;
  --ql-deep:#0B1220;
  --ql-green:#1E9E6C;
  --ql-amber:#C98A1B;
  --ql-red:#E1493F;
  --ql-font-head:'Manrope',system-ui,sans-serif;
  --ql-font-body:'Inter',system-ui,sans-serif;
}
html[dir="rtl"] body#page-top{
  --ql-font-head:'Tajawal',system-ui,sans-serif;
  --ql-font-body:'Tajawal',system-ui,sans-serif;
}

body#page-top{ background:var(--ql-bg); color:var(--ql-ink); font-family:var(--ql-font-body); -webkit-font-smoothing:antialiased; }
body#page-top h1,body#page-top h2,body#page-top h3{ font-family:var(--ql-font-head); }
body#page-top a{ transition:color .2s ease, background .2s ease, opacity .2s ease; }
.ql-strip{ background:repeating-linear-gradient(135deg,#E3E7EE 0px,#E3E7EE 2px,#EEF1F5 2px,#EEF1F5 10px); }
@keyframes qlFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes qlPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- utility top bar ---------- */
.navbar-xs{ background:var(--ql-deep)!important; }
.navbar-xs .navbar-nav>li>a{ color:rgba(255,255,255,.82)!important; font-size:13px; font-weight:500; }
.ql-staff-login{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ql-blue); color:#fff!important;
  padding:6px 16px!important; border-radius:30px; font-weight:700!important;
}
.ql-staff-login:hover{ background:#1d54e0; color:#fff!important; }

/* ---------- header / nav ---------- */
.ql-header{
  position:sticky; top:0; z-index:50; background:rgba(247,248,250,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--ql-line);
}
.ql-header-inner{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 24px; }
.ql-logo{ display:flex; align-items:center; gap:10px; text-decoration:none!important; }
.ql-logo-mark{ width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--ql-blue),var(--ql-navy)); display:flex; align-items:center; justify-content:center; flex:none; }
.ql-logo-mark img{ max-width:22px; max-height:22px; object-fit:contain; }
.ql-logo-text{ font-family:var(--ql-font-head); font-weight:800; font-size:19px; color:var(--ql-navy); }
.ql-nav{ display:flex; align-items:center; gap:28px; }
.ql-nav a{ font-size:14.5px; font-weight:500; color:var(--ql-sub)!important; text-decoration:none; }
.ql-nav a:hover{ color:var(--ql-navy)!important; }
.ql-header-actions{ display:flex; align-items:center; gap:10px; }
.ql-lang-btn{ font-size:13.5px; font-weight:600; color:var(--ql-navy); background:transparent; border:1px solid var(--ql-line); border-radius:8px; padding:8px 12px; cursor:pointer; }
.ql-btn-ghost{
  font-size:14px; font-weight:600; color:var(--ql-navy)!important; background:transparent; border:1.5px solid var(--ql-line);
  border-radius:9px; padding:9px 16px; text-decoration:none!important; display:inline-flex; align-items:center; gap:6px;
}
.ql-btn-ghost:hover{ border-color:var(--ql-blue); color:var(--ql-blue)!important; }
.ql-btn-primary{
  font-size:14px; font-weight:700; color:#fff!important; background:var(--ql-blue); border:none; border-radius:9px;
  padding:10px 18px; box-shadow:0 4px 14px rgba(46,107,255,.28); text-decoration:none!important; display:inline-flex; align-items:center; gap:6px;
}
.ql-btn-primary:hover{ background:#1d54e0; color:#fff!important; box-shadow:0 8px 20px rgba(46,107,255,.34); }
.ql-mobile-toggle{ display:none; background:transparent; border:1px solid var(--ql-line); border-radius:8px; width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer; }
.ql-mobile-panel{ display:none; flex-direction:column; gap:14px; padding:16px 24px 22px; border-top:1px solid var(--ql-line); background:var(--ql-surf); }
.ql-mobile-panel.show{ display:flex; }
.ql-mobile-panel a{ font-size:15px; font-weight:600; color:var(--ql-ink); text-decoration:none; }
.ql-mobile-cta-row{ display:flex; gap:10px; margin-top:6px; }
.ql-mobile-cta-row .ql-btn-ghost,.ql-mobile-cta-row .ql-btn-primary{ flex:1; justify-content:center; padding:11px; }

/* ---------- section scaffolding ---------- */
.ql-section{ max-width:1200px; margin:0 auto; padding:96px 24px; }
.ql-section-narrow{ max-width:760px; margin:0 auto; padding:96px 24px; }
.ql-section-dark{ background:var(--ql-deep); padding:96px 24px; }
.ql-section-head{ text-align:center; max-width:720px; margin:0 auto 48px; }
.ql-eyebrow{ font-family:var(--ql-font-body); font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ql-blue); margin-bottom:14px; }
html[dir="rtl"] .ql-eyebrow{ letter-spacing:0; text-transform:none; }
.ql-eyebrow-light{ color:#6E93FF; }
.ql-h2{ font-size:clamp(28px,3.4vw,42px); font-weight:800; color:var(--ql-navy); margin:0 0 14px; line-height:1.15; }
.ql-h2-light{ color:#fff; }
.ql-section-sub{ font-size:16.5px; color:var(--ql-sub); max-width:620px; margin:0 auto; line-height:1.6; }
.ql-section-sub-light{ color:rgba(255,255,255,.7); }

/* ---------- hero ---------- */
.ql-hero{ max-width:1200px; margin:0 auto; padding:72px 24px 40px; }
.ql-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.ql-hero-col{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
html[dir="rtl"] .ql-hero-col{ text-align:right; align-items:flex-end; }
.ql-hero-title{ font-size:clamp(34px,4.6vw,54px); font-weight:800; color:var(--ql-navy); line-height:1.1; margin:0 0 20px; }
.ql-hero-sub{ font-size:18px; color:var(--ql-sub); line-height:1.65; max-width:520px; margin:0 0 30px; }
.ql-hero-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }
.ql-btn-lg{ font-size:15.5px; font-weight:700; border-radius:11px; padding:15px 26px; text-decoration:none!important; display:inline-flex; align-items:center; gap:8px; }
.ql-btn-primary-lg{ color:#fff!important; background:var(--ql-blue); border:none; box-shadow:0 8px 20px rgba(46,107,255,.32); }
.ql-btn-primary-lg:hover{ background:#1d54e0; color:#fff!important; }
.ql-btn-ghost-lg{ color:var(--ql-navy)!important; background:transparent; border:1.5px solid var(--ql-line); }
.ql-btn-ghost-lg:hover{ border-color:var(--ql-blue); color:var(--ql-blue)!important; }
.ql-btn-ghost-dark{ color:#fff!important; background:transparent; border:1.5px solid rgba(255,255,255,.28); }
.ql-btn-ghost-dark:hover{ border-color:#fff; }
.ql-hero-stats{ display:flex; gap:36px; flex-wrap:wrap; }
.ql-hero-stat{ display:flex; flex-direction:column; gap:4px; }
.ql-hero-stat-val{ font-size:26px; font-weight:800; color:var(--ql-navy); }
.ql-hero-stat-label{ font-size:13px; color:var(--ql-sub); }

.ql-hero-visual-col{ position:relative; min-height:380px; }
.ql-hero-visual-card{ background:var(--ql-surf); border:1px solid var(--ql-line); border-radius:18px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(20,36,81,.22); }
.ql-hero-visual-bar{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--ql-line); }
.ql-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.ql-mock-bar-label{ font-family:ui-monospace,monospace; font-size:11.5px; color:var(--ql-sub); font-weight:600; }
.ql-hero-visual-body{ height:300px; display:flex; align-items:center; justify-content:center; }
.ql-mock-label-text{ font-family:ui-monospace,monospace; font-size:12px; color:var(--ql-sub); background:var(--ql-surf); padding:6px 12px; border-radius:6px; border:1px solid var(--ql-line); }
.ql-float-card{ position:absolute; background:var(--ql-surf); border:1px solid var(--ql-line); border-radius:12px; padding:10px 14px; box-shadow:0 14px 30px -10px rgba(20,36,81,.25); }
.ql-float-card.ql-float-1{ top:16%; left:-6%; animation:qlFloat 6s ease-in-out infinite; }
.ql-float-card.ql-float-2{ top:68%; left:-8%; animation:qlFloat 7s ease-in-out infinite 1s; }
html[dir="rtl"] .ql-float-card.ql-float-1{ left:auto; right:-6%; }
html[dir="rtl"] .ql-float-card.ql-float-2{ left:auto; right:-8%; }
.ql-ticket-row{ display:flex; align-items:center; gap:8px; }
.ql-live-dot{ width:8px; height:8px; border-radius:50%; background:var(--ql-green); flex:none; animation:qlPulse 1.8s ease-in-out infinite; }
.ql-ticket-text{ font-size:13px; font-weight:600; color:var(--ql-ink); white-space:nowrap; }

/* ---------- features ---------- */
.ql-features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ql-feature-card{ background:var(--ql-surf); border:1px solid var(--ql-line); border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:12px; text-align:left; }
html[dir="rtl"] .ql-feature-card{ text-align:right; }
.ql-feature-icon{ width:42px; height:42px; border-radius:11px; background:#EEF3FF; display:flex; align-items:center; justify-content:center; }
.ql-feature-title{ font-size:17px; font-weight:700; color:var(--ql-navy); margin:0; }
.ql-feature-desc{ font-size:14.5px; color:var(--ql-sub); line-height:1.55; margin:0; }

/* ---------- how it works ---------- */
.ql-steps-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.ql-step-card{ background:var(--ql-surf); border:1px solid var(--ql-line); border-radius:16px; padding:26px; text-align:left; }
html[dir="rtl"] .ql-step-card{ text-align:right; }
.ql-step-num{ font-size:30px; font-weight:800; color:#C7D6FF; margin-bottom:10px; }
.ql-step-title{ font-size:16.5px; font-weight:700; color:var(--ql-navy); margin:0 0 8px; }
.ql-step-desc{ font-size:14px; color:var(--ql-sub); line-height:1.55; margin:0; }

/* ---------- benefits ---------- */
.ql-benefits-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.ql-benefits-col{ text-align:left; }
html[dir="rtl"] .ql-benefits-col{ text-align:right; }
.ql-benefits-list{ display:flex; flex-direction:column; gap:22px; }
.ql-benefit-item{ display:flex; align-items:flex-start; gap:14px; text-align:left; }
html[dir="rtl"] .ql-benefit-item{ text-align:right; flex-direction:row-reverse; }
.ql-benefit-check{ width:24px; height:24px; border-radius:50%; background:var(--ql-green); display:flex; align-items:center; justify-content:center; flex:none; margin-top:2px; }
.ql-benefit-title{ font-size:16px; font-weight:700; color:var(--ql-navy); margin-bottom:3px; }
.ql-benefit-desc{ font-size:14px; color:var(--ql-sub); line-height:1.5; }

/* ---------- dashboard preview ---------- */
.ql-dashboard-wrap{ max-width:1200px; margin:0 auto; }
.ql-dashboard-mock{ background:var(--ql-surf); border-radius:18px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,.5); }
.ql-dashboard-topbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--ql-line); }
.ql-dashboard-body{ display:flex; min-height:380px; }
.ql-dashboard-sidebar{ width:180px; border-inline-end:1px solid var(--ql-line); padding:16px 10px; display:flex; flex-direction:column; gap:4px; flex:none; }
.ql-dashboard-sidebar-item{ font-size:13.5px; font-weight:600; color:var(--ql-sub); padding:9px 12px; border-radius:8px; }
.ql-dashboard-sidebar-item:first-child{ background:#EEF3FF; color:var(--ql-blue); }
.ql-dashboard-canvas{ flex:1; display:flex; align-items:center; justify-content:center; }

/* ---------- kiosk (phone mock) ---------- */
.ql-kiosk-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:center; }
.ql-phone-wrap{ display:flex; justify-content:center; }
.ql-phone-frame{ width:260px; height:540px; border-radius:36px; background:var(--ql-deep); padding:14px; box-shadow:0 30px 60px -20px rgba(20,36,81,.3); position:relative; }
.ql-phone-notch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:90px; height:18px; border-radius:10px; background:var(--ql-deep); z-index:2; }
.ql-phone-screen{ width:100%; height:100%; border-radius:24px; background:var(--ql-bg); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ql-kiosk-col{ display:flex; flex-direction:column; gap:20px; text-align:left; }
html[dir="rtl"] .ql-kiosk-col{ text-align:right; }
.ql-kiosk-list{ display:flex; flex-direction:column; gap:16px; margin-top:10px; }
.ql-kiosk-row{ display:flex; align-items:center; gap:12px; }
html[dir="rtl"] .ql-kiosk-row{ flex-direction:row-reverse; }
.ql-kiosk-dot{ width:8px; height:8px; border-radius:50%; background:var(--ql-blue); flex:none; }
.ql-kiosk-text{ font-size:15.5px; color:var(--ql-ink); font-weight:500; }

/* ---------- services chips ---------- */
.ql-services-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.ql-service-chip{ font-size:14px; font-weight:600; color:var(--ql-navy); background:var(--ql-surf); border:1px solid var(--ql-line); border-radius:999px; padding:9px 20px; }

/* ---------- team ---------- */
.ql-team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.ql-team-card{ background:var(--ql-surf); border:1px solid var(--ql-line); border-radius:16px; padding:24px 18px; text-align:center; }
.ql-team-photo{ width:76px; height:76px; border-radius:50%; object-fit:cover; margin:0 auto 14px; border:3px solid #EEF3FF; }
.ql-team-name{ font-family:var(--ql-font-head); font-weight:700; color:var(--ql-navy); font-size:15px; margin-bottom:2px; }
.ql-team-role{ font-size:12.5px; color:var(--ql-blue); font-weight:600; }

/* ---------- FAQ ---------- */
.ql-faq-list{ display:flex; flex-direction:column; gap:10px; }
.ql-faq-item{ background:var(--ql-surf); border:1px solid var(--ql-line); border-radius:12px; padding:6px 20px; }
.ql-faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; background:transparent; border:none; padding:16px 0; cursor:pointer; font-size:15.5px; font-weight:600; color:var(--ql-navy); text-align:left; }
html[dir="rtl"] .ql-faq-q{ text-align:right; }
.ql-faq-icon{ flex:none; transition:transform .18s ease; }
.ql-faq-item.open .ql-faq-icon{ transform:rotate(180deg); }
.ql-faq-a{ font-size:14.5px; color:var(--ql-sub); line-height:1.6; margin:0 0 18px; display:none; }
.ql-faq-item.open .ql-faq-a{ display:block; }

/* ---------- final CTA ---------- */
.ql-final-cta{ max-width:900px; margin:64px auto; background:linear-gradient(135deg,var(--ql-navy),var(--ql-deep)); border-radius:28px; padding:72px 40px; text-align:center; }
.ql-final-cta h2{ font-size:clamp(28px,3.6vw,40px); font-weight:800; color:#fff; margin:0 0 14px; }
.ql-final-cta p{ font-size:16.5px; color:rgba(255,255,255,.72); max-width:520px; margin:0 auto 34px; line-height:1.6; }
.ql-final-cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- contact ---------- */
.ql-contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:start; }
.ql-contact-item{ margin-bottom:18px; }
.ql-contact-item h4{ font-size:14px; font-weight:700; color:var(--ql-navy); margin:0 0 4px; }
.ql-contact-item p{ font-size:14.5px; color:var(--ql-sub); margin:0; }
.ql-contact-map iframe,.ql-contact-map img{ width:100%; border:0; border-radius:16px; box-shadow:0 20px 40px -20px rgba(20,36,81,.25); min-height:340px; }

/* ---------- footer ---------- */
.ql-footer{ background:var(--ql-deep); padding:64px 24px 32px; }
.ql-footer-top{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); text-align:left; }
html[dir="rtl"] .ql-footer-top{ text-align:right; }
.ql-footer-brand-col{ display:flex; flex-direction:column; gap:14px; }
.ql-footer-logo-text{ font-family:var(--ql-font-head); font-weight:800; font-size:17px; color:#fff; }
.ql-footer-tagline{ font-size:13.5px; color:rgba(255,255,255,.55); line-height:1.6; max-width:260px; margin:0; }
.ql-footer-col{ display:flex; flex-direction:column; gap:12px; }
.ql-footer-col-title{ font-size:13px; font-weight:700; color:rgba(255,255,255,.85); margin-bottom:2px; }
.ql-footer-col a,.ql-footer-col p{ font-size:13.5px; color:rgba(255,255,255,.55); text-decoration:none; margin:0; }
.ql-footer-col a:hover{ color:#fff; }
.ql-footer-bottom{ max-width:1200px; margin:24px auto 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.ql-footer-copy{ font-size:12.5px; color:rgba(255,255,255,.45); }

/* ---------- responsive ---------- */
@media(max-width:991px){
  .ql-nav{ display:none; }
  .ql-header-actions .ql-btn-ghost{ display:none; }
  .ql-mobile-toggle{ display:flex; }
  .ql-hero-grid,.ql-benefits-grid,.ql-kiosk-grid,.ql-contact-grid{ grid-template-columns:1fr; }
  .ql-hero-visual-col{ order:-1; min-height:280px; }
  .ql-features-grid,.ql-steps-row{ grid-template-columns:repeat(2,1fr); }
  .ql-team-grid{ grid-template-columns:repeat(2,1fr); }
  .ql-footer-top{ grid-template-columns:1fr 1fr; }
}
@media(max-width:767px){
  .ql-section,.ql-section-narrow,.ql-section-dark{ padding:56px 20px; }
  .ql-hero{ padding:40px 20px 20px; }
  .ql-features-grid,.ql-steps-row,.ql-team-grid{ grid-template-columns:1fr; }
  .ql-header-actions .ql-lang-btn{ display:none; }
  .ql-dashboard-sidebar{ display:none; }
  .ql-phone-frame{ width:220px; height:460px; }
  .ql-footer-top{ grid-template-columns:1fr; }
}

/* ---------- back to top ---------- */
.back-top{ background:var(--ql-blue)!important; border-radius:50%!important; border:none; box-shadow:0 10px 24px rgba(46,107,255,.3); }
.back-top:hover{ background:var(--ql-navy)!important; }