:root {
  --primary: #1F2D7A;
  --primary-600: #1A2668;
  --primary-dark: #151F55;
  --navy: #0B102F;
  --accent: #8B0000;
  --accent-dark: #650000;
  --surface: #F8FAFC;
  --border: #E2E8F0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.container-page { max-width: 1280px; margin: 0 auto; padding-inline: 1rem; }
.font-heading, h1, h2, h3, h4 { font-family: 'Cairo', 'Tajawal', sans-serif; }
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--primary), #60a5fa); z-index: 999; transition: width .15s linear; }
.topbar { background: var(--primary-dark); color:#fff; font-size:.9rem; padding:.55rem 0; }
.top-link { display:inline-flex; align-items:center; gap:.35rem; color:#fff; opacity:.92; }
.top-link i { width:14px; height:14px; }
#navbar { transition: .3s ease; }
#navbar.navbar-scrolled { box-shadow: 0 15px 35px rgba(15,23,42,.08); }
.nav-link { position:relative; padding:.55rem .55rem; color:var(--accent-dark); font-weight:800; font-size:.9rem; transition:.25s; white-space:nowrap; }
@media (min-width: 1120px) { .nav-link { padding:.65rem .8rem; font-size:.95rem; } }
.nav-link:hover,.nav-link.active { color:var(--accent); }
.nav-link.active:after { content:''; position:absolute; right:.8rem; left:.8rem; bottom:.25rem; height:3px; background:var(--accent); border-radius:999px; }
.mobile-menu { transform:translateX(100%); transition:.3s ease; }
.mobile-menu.open { transform:translateX(0); }
.mobile-link { display:block; padding:1rem; border-radius:1rem; color:#334155; font-weight:700; }
.mobile-link:hover { background:#EEF1FF; color:var(--accent); }
.btn-primary,.btn-whatsapp,.btn-light,.btn-ghost-light { display:inline-flex; align-items:center; gap:.5rem; border-radius:1rem; font-weight:800; transition:.25s; }
.btn-primary { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; padding:.8rem 1.2rem; border:0; cursor:pointer; box-shadow: 0 15px 28px rgba(31,45,122,.18); }
.btn-primary:hover { box-shadow:0 22px 35px rgba(31,45,122,.24); transform:translateY(-2px); }
.btn-whatsapp { background:#16a34a; color:#fff; padding:.75rem 1.1rem; }
.btn-whatsapp:hover { background:#15803d; transform:translateY(-1px); }
.btn-light { background:#fff; color:var(--primary); padding:.9rem 1.3rem; }
.btn-light:hover { background:#f8fafc; transform:translateY(-2px); }
.btn-ghost-light { color:#fff; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.09); padding:.9rem 1.3rem; backdrop-filter:blur(8px); }
.btn-ghost-light:hover { background:rgba(255,255,255,.18); }
.btn-primary i,.btn-whatsapp i,.btn-light i,.btn-ghost-light i { width:18px; height:18px; }
.hero-section { min-height:calc(100vh - 112px); position:relative; overflow:hidden; display:flex; align-items:center; }
.hero-bg,.hero-bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(11,16,47,.95),rgba(31,45,122,.88) 58%,rgba(96,165,250,.28)); }
.hero-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 85%); }
.hero-orb { position:absolute; border-radius:999px; filter: blur(8px); opacity:.35; animation: floatOrb 8s ease-in-out infinite; }
.orb-1 { width:260px; height:260px; background: radial-gradient(circle, rgba(96,165,250,.75), transparent 70%); top: 8%; right: 6%; }
.orb-2 { width:220px; height:220px; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); bottom: 8%; left: 10%; animation-delay: 1.5s; }
@keyframes floatOrb { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.badge-soft { display:inline-flex; align-items:center; gap:.5rem; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); padding:.55rem 1rem; border-radius:999px; font-weight:700; backdrop-filter:blur(8px); }
.badge-soft i { width:17px; height:17px; }
.hero-visual-stack { position: relative; }
.hero-card { border-radius:2rem; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.24); border:4px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); }
.hero-card img { width:100%; height:450px; object-fit:cover; display:block; }
.floating-badge { position:absolute; display:flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); padding:.8rem 1rem; border-radius: 1rem; font-weight:800; box-shadow:0 18px 45px rgba(15,23,42,.16); animation: floatMini 4s ease-in-out infinite; }
.floating-badge i { width:18px; height:18px; }
.badge-top { top: 1rem; left: -1rem; }
.badge-bottom { bottom: 1rem; right: -1rem; animation-delay: 1.2s; }
@keyframes floatMini { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.hero-stats-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; max-width:680px; }
.glass-stat { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:1.25rem; padding:1rem; backdrop-filter:blur(10px); }
.glass-stat strong { display:block; font-size:1.7rem; font-weight:900; color:#fff; }
.glass-stat span { color:rgba(255,255,255,.8); font-size:.94rem; }
.stats-strip-wrap { margin-top: -3rem; position:relative; z-index:12; }
.stats-strip { background:#fff; border:1px solid rgba(31,45,122,.10); box-shadow:0 25px 55px rgba(31,45,122,.10); border-radius:1.8rem; padding:1.25rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.strip-item { display:flex; align-items:center; gap:1rem; padding:1rem; border-radius:1.2rem; transition:.25s; }
.strip-item:hover { background: var(--surface); transform:translateY(-2px); }
.strip-item i { width:46px; height:46px; padding:.7rem; border-radius:1rem; background:#EEF1FF; color:var(--primary); }
.strip-item strong { display:block; color:var(--primary); font-weight:900; font-size:1.5rem; }
.strip-item span { color:#64748b; font-weight:700; font-size:.92rem; }
.section-padding { padding:5rem 0; }
.section-head { text-align:center; margin-bottom:3rem; }
.section-kicker { color:var(--accent); font-weight:900; display:flex; align-items:center; gap:.65rem; }
.section-kicker:before { content:''; width:42px; height:4px; background:var(--accent); border-radius:999px; }
.section-kicker.center { justify-content:center; }
.section-kicker.center:after { content:''; width:42px; height:4px; background:var(--accent); border-radius:999px; }
.section-title { color:var(--primary); font-size:clamp(2rem,4vw,3rem); font-weight:900; line-height:1.35; }
.section-title.center { max-width:760px; margin:0 auto; }
.section-text { color:#475569; font-size:1.125rem; line-height:2; }
.image-frame { position:relative; border-radius:2rem; overflow:hidden; box-shadow:0 20px 55px rgba(15,23,42,.10); background:var(--surface); }
.image-frame img { width:100%; height:410px; object-fit:cover; display:block; transition: transform .6s ease; }
.image-frame:hover img { transform: scale(1.06); }
.image-frame::after { content:''; position:absolute; inset:0; background: linear-gradient(120deg, transparent 10%, rgba(255,255,255,.20), transparent 45%); transform: translateX(-130%); transition: .7s ease; }
.image-frame:hover::after { transform: translateX(130%); }
.image-zoom-btn { position:absolute; bottom:1rem; left:1rem; width:46px; height:46px; border-radius:999px; border:0; background:rgba(255,255,255,.92); color:var(--primary); box-shadow:0 12px 25px rgba(15,23,42,.12); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.image-zoom-btn i { width:20px; height:20px; }
.feature-mini { display:flex; align-items:center; gap:.65rem; background:#fff; border:1px solid var(--border); border-radius:1rem; padding:.9rem; font-weight:800; color:#334155; transition:.25s; }
.feature-mini:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(31,45,122,.08); }
.feature-mini i { color:var(--accent); width:22px; height:22px; }
.page-section { display:none; }
.page-section.active { display:block; }
.service-card,.area-card,.value-card { position:relative; background:#fff; border:1px solid var(--border); border-radius:1.4rem; padding:1.5rem; transition:.3s; overflow:hidden; }
.service-card::before,.area-card::before,.value-card::before { content:''; position:absolute; inset:auto 0 0 0; height:4px; background:linear-gradient(90deg, var(--primary), #60a5fa); transform:scaleX(0); transform-origin:center; transition:.3s ease; }
.service-card:hover::before,.area-card:hover::before,.value-card:hover::before { transform:scaleX(1); }
.service-card:hover,.area-card:hover,.value-card:hover { transform:translateY(-7px); box-shadow:0 18px 50px rgba(31,45,122,.12); border-color:rgba(31,45,122,.20); }
.card-icon { width:60px; height:60px; border-radius:1.2rem; background:#EEF1FF; display:flex; align-items:center; justify-content:center; color:var(--primary); margin-bottom:1.2rem; transition:.25s; }
.service-card:hover .card-icon,.area-card:hover .card-icon,.value-card:hover i { background:var(--primary); color:#fff; }
.service-card .card-arrow { display:flex; align-items:center; gap:.4rem; color:var(--primary); font-weight:800; margin-top:1rem; }
.inner-hero { padding:5rem 0; color:#fff; background:linear-gradient(135deg,var(--navy),var(--primary)); position:relative; overflow:hidden; }
.inner-hero::after { content:''; position:absolute; width:260px; height:260px; border-radius:999px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); top:-70px; left:-50px; }
.inner-hero.accent { background:linear-gradient(135deg,var(--navy),var(--primary),var(--primary-600)); }
.inner-hero h2 { font-size:clamp(2.4rem,5vw,4rem); font-weight:900; }
.inner-hero p { color:rgba(255,255,255,.75); font-size:1.15rem; margin-top:.8rem; }
.value-card i { width:52px; height:52px; padding:.8rem; border-radius:1rem; background:#EEF1FF; color:var(--primary); margin-bottom:1rem; transition:.25s; }
.value-card h3 { color:var(--primary); font-size:1.4rem; font-weight:900; margin-bottom:.5rem; }
.value-card p { color:#64748b; line-height:1.8; }
.contact-form { background:linear-gradient(180deg, #fff, var(--surface)); border:1px solid var(--border); border-radius:1.5rem; padding:2rem; box-shadow:0 15px 40px rgba(15,23,42,.05); }
.contact-form h3 { color:var(--primary); font-size:1.7rem; font-weight:900; margin-bottom:.4rem; }
.contact-form p { color:#64748b; margin-bottom:1.5rem; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; border:1px solid var(--border); border-radius:1rem; padding:.9rem 1rem; outline:none; background:#fff; margin-bottom:1rem; transition:.2s; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(31,45,122,.10); }
.contact-card { display:flex; align-items:center; gap:1rem; background:var(--surface); border:1px solid var(--border); border-radius:1.2rem; padding:1rem; transition:.25s; }
.contact-card:hover { transform: translateY(-4px); box-shadow:0 16px 30px rgba(31,45,122,.08); border-color: rgba(31,45,122,.16); }
.contact-card i { width:44px; height:44px; padding:.7rem; background:#EEF1FF; color:var(--primary); border-radius:.9rem; transition:.25s; }
.contact-card:hover i { background:var(--primary); color:#fff; }
.footer-title { font-family:'Cairo'; font-weight:900; margin-bottom:1.2rem; font-size:1.15rem; }
.footer-links { display:grid; gap:.7rem; }
.footer-links a,.footer-contact a,.footer-contact p { display:block; color:rgba(255,255,255,.6); font-size:.95rem; transition:.2s; margin-bottom:.6rem; }
.footer-links a:hover,.footer-contact a:hover { color:#fff; }
.whatsapp-float { position:fixed; left:1.3rem; bottom:1.3rem; z-index:55; width:58px; height:58px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#16a34a; color:#fff; box-shadow:0 18px 35px rgba(22,163,74,.35); transition:.2s; animation:pulseWa 2.2s infinite; }
.whatsapp-float:hover { transform:scale(1.06); background:#15803d; }
.whatsapp-float i { width:28px; height:28px; }
@keyframes pulseWa { 0%,100% { box-shadow:0 18px 35px rgba(22,163,74,.35); } 50% { box-shadow:0 18px 35px rgba(22,163,74,.18), 0 0 0 12px rgba(22,163,74,.08); } }
.toast-wrap { position:fixed; top:5rem; left:50%; transform:translateX(-50%); z-index:80; }
.toast { display:flex; align-items:center; gap:.6rem; background:#16a34a; color:#fff; padding:.8rem 1.2rem; border-radius:1rem; box-shadow:0 16px 35px rgba(0,0,0,.16); }
.reveal,.reveal-right,.reveal-left { opacity:0; transform:translateY(28px); transition:.7s ease; }
.reveal-right { transform:translateX(34px); }
.reveal-left { transform:translateX(-34px); }
.reveal.active,.reveal-right.active,.reveal-left.active { opacity:1; transform:translate(0,0); }
.tilt-card { transform-style:preserve-3d; transition: transform .25s ease; }
.interactive-image { cursor: zoom-in; }
.lightbox { position:fixed; inset:0; background:rgba(11,16,47,.88); z-index:110; display:flex; align-items:center; justify-content:center; padding:1rem; }
.lightbox img { max-width:min(96vw, 1100px); max-height:86vh; border-radius:1.4rem; border:3px solid rgba(255,255,255,.12); box-shadow:0 25px 70px rgba(0,0,0,.34); object-fit:contain; background:#fff; }
.lightbox.hidden { display:none; }
.lightbox-close { position:absolute; top:1.2rem; left:1.2rem; width:48px; height:48px; border-radius:999px; border:0; background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter: blur(10px); }
.lightbox-close i { width:24px; height:24px; }
.lightbox.hidden, .toast-wrap.hidden { display:none !important; }
@media (max-width: 1024px) {
  .hero-stats-grid { grid-template-columns:1fr; max-width:100%; }
  .stats-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
  .section-padding { padding:3.5rem 0; }
  .hero-section { min-height:auto; }
  .hero-card img, .image-frame img { height:300px; }
  .contact-form { padding:1.2rem; }
  .stats-strip-wrap { margin-top: 0; padding-top: 1.5rem; }
  .stats-strip { grid-template-columns:1fr; }
  .floating-badge { display:none; }
}
.text-intent-red { color: var(--accent); }

/* إصلاح محاذاة بيانات التواصل في الفوتر */
.footer-contact {
  direction: rtl;
  text-align: right;
}

.footer-contact a,
.footer-contact p {
  text-align: right;
}

.footer-contact a[dir="ltr"] {
  direction: ltr;
  unicode-bidi: embed;
  text-align: right;
}
/* زر تبديل اللغة وتوافق اتجاه اللغات */
.lang-switch {
  border: 1px solid rgba(31,45,122,.18);
  background: #EEF1FF;
  color: var(--primary);
  min-width: 48px;
  height: 40px;
  padding: 0 .85rem;
  border-radius: .9rem;
  font-weight: 900;
  cursor: pointer;
  transition: .2s ease;
}
.lang-switch:hover { background: var(--primary); color:#fff; transform: translateY(-1px); }
.mobile-lang-switch { width: 100%; margin-top: .75rem; }
html[dir="ltr"] body { text-align: left; }
html[dir="ltr"] .nav-link.active:after { left:.8rem; right:.8rem; }
html[dir="ltr"] .mobile-menu { transform: translateX(-100%); }
html[dir="ltr"] .mobile-menu.open { transform: translateX(0); }
html[dir="ltr"] .section-kicker { flex-direction: row; }
html[dir="ltr"] .section-kicker.center { justify-content: center; }
html[dir="ltr"] .image-zoom-btn { left:auto; right:1rem; }
html[dir="ltr"] .badge-top { left:auto; right:-1rem; }
html[dir="ltr"] .badge-bottom { right:auto; left:-1rem; }
html[dir="ltr"] .whatsapp-float { left:auto; right:1.3rem; }
html[dir="ltr"] .footer-contact { direction:ltr; text-align:left; }
html[dir="ltr"] .footer-contact a,
html[dir="ltr"] .footer-contact p { text-align:left; }
html[dir="ltr"] .footer-contact .footer-phone { direction:ltr; text-align:left; }
html[dir="ltr"] .contact-form input,
html[dir="ltr"] .contact-form textarea,
html[dir="ltr"] .contact-form select { direction:ltr; text-align:left; }
html[dir="ltr"] .top-link span[dir="ltr"],
html[dir="ltr"] input[dir="ltr"] { direction:ltr; unicode-bidi:embed; }
html[dir="rtl"] .contact-form input,
html[dir="rtl"] .contact-form textarea,
html[dir="rtl"] .contact-form select { direction:rtl; text-align:right; }
html[dir="rtl"] .contact-form input[dir="ltr"] { direction:ltr; text-align:right; }

/* ضبط اتجاه ومحاذاة أرقام الهاتف والواتساب في صفحة اتصل بنا */
html[dir="rtl"] .contact-card {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .contact-card {
  direction: ltr;
  text-align: left;
}

.contact-card .contact-number {
  direction: ltr;
  unicode-bidi: embed;
  display: block;
}

html[dir="rtl"] .contact-card .contact-number {
  text-align: right;
}

html[dir="ltr"] .contact-card .contact-number {
  text-align: left;
}


/* أقسام الشركة */
.company-departments-section { position: relative; overflow: hidden; }
.departments-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.department-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(15, 23, 42, .05);
  transition: .28s ease;
  transition-delay: var(--delay, 0ms);
}
.department-card:hover {
  transform: translateY(-7px);
  border-color: rgba(31,45,122,.18);
  box-shadow: 0 24px 60px rgba(31,45,122,.13);
}
.department-image {
  height: 180px;
  background: linear-gradient(135deg, #EEF1FF, #F8FAFC);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.department-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.department-body { padding: 1.35rem; position: relative; }
.department-icon {
  width: 48px;
  height: 48px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: #EEF1FF;
  margin-top: -3rem;
  margin-bottom: .9rem;
  border: 4px solid #fff;
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
}
.department-icon i { width: 24px; height: 24px; }
.department-body h3 {
  color: var(--primary);
  font-family: 'Cairo', 'Tajawal', sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
  margin-bottom: .65rem;
}
.department-body p {
  color: #64748b;
  line-height: 1.9;
  font-size: .98rem;
}
html[dir="ltr"] .department-body h3,
html[dir="ltr"] .department-body p { text-align: left; }
@media (max-width: 1024px) {
  .departments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .departments-grid { grid-template-columns: 1fr; }
  .department-image { height: 170px; }
}


/* Official Fanari app download promotion */
.app-promo-section { background:linear-gradient(180deg,#f8fafc 0%,#eef1ff 100%); overflow:hidden; }
.app-promo-card { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(230px,.75fr); gap:2.5rem; align-items:center; padding:clamp(2rem,5vw,4.5rem); color:#fff; border-radius:2rem; overflow:hidden; background:linear-gradient(125deg,#0b102f 0%,#1f2d7a 65%,#2c3e99 100%); box-shadow:0 28px 70px rgba(31,45,122,.22); }
.app-promo-card::before,.app-promo-card::after { content:""; position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.app-promo-card::before { width:360px; height:360px; top:-220px; left:8%; background:rgba(255,255,255,.08); }
.app-promo-card::after { width:300px; height:300px; bottom:-210px; right:25%; background:rgba(212,0,0,.22); }
.app-promo-copy { position:relative; z-index:2; }
.app-promo-kicker { display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.2rem; padding:.55rem .9rem; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.09); color:#e5eaff; font-size:.9rem; font-weight:800; }
.app-promo-kicker svg { width:19px; height:19px; }
.app-promo-copy h3 { max-width:640px; margin:0 0 1rem; color:#fff; font-family:'Cairo','Tajawal',sans-serif; font-size:clamp(2rem,4vw,3.2rem); line-height:1.35; font-weight:900; }
.app-promo-copy p { max-width:590px; margin:0; color:rgba(255,255,255,.78); font-size:1.12rem; line-height:1.9; }
.app-promo-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:2rem; }
.google-play-button { display:inline-flex; align-items:center; gap:.8rem; min-height:76px; padding:.7rem 1.15rem; border:1px solid rgba(255,255,255,.18); border-radius:1.1rem; color:#0b102f; background:#fff; box-shadow:0 14px 32px rgba(0,0,0,.18); text-decoration:none; transition:transform .22s ease,box-shadow .22s ease; }
.google-play-button:hover { transform:translateY(-4px); box-shadow:0 20px 38px rgba(0,0,0,.24); }
.google-play-logo { display:flex; width:37px; height:37px; flex:0 0 37px; align-items:center; justify-content:center; }
.google-play-logo svg { width:100%; height:100%; display:block; }
.google-play-label { display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
.google-play-label small { color:#64748b; font-size:.72rem; font-weight:700; }
.google-play-label strong { color:#111827; font-size:1.12rem; font-weight:900; }
.app-button-arrow { width:18px; height:18px; color:#1f2d7a; margin-inline-start:.3rem; }
.app-promo-note { color:rgba(255,255,255,.65); font-size:.82rem; font-weight:600; }
.app-promo-art { position:relative; min-height:330px; display:flex; align-items:center; justify-content:center; }
.app-phone-shell { position:relative; width:190px; height:330px; padding:9px; border:3px solid rgba(255,255,255,.65); border-radius:2.3rem; background:linear-gradient(145deg,#fff,#dbe4ff); box-shadow:0 28px 65px rgba(0,0,0,.28),inset 0 0 0 2px rgba(11,16,47,.12); transform:rotate(-7deg); }
.app-phone-speaker { position:absolute; z-index:2; top:9px; left:50%; width:54px; height:9px; transform:translateX(-50%); border-radius:999px; background:#0b102f; }
.app-phone-screen { height:100%; display:flex; flex-direction:column; align-items:center; padding:3.3rem .8rem 1rem; border-radius:1.7rem; color:#1f2d7a; background:linear-gradient(180deg,#f8faff,#fff); }
.app-app-icon { display:flex; align-items:center; justify-content:center; width:66px; height:66px; margin-bottom:.8rem; border-radius:1.35rem; color:#fff; background:linear-gradient(145deg,#1f2d7a,#8b0000); box-shadow:0 12px 24px rgba(31,45,122,.22); }
.app-app-icon svg { width:32px; height:32px; }
.app-phone-screen strong { font-family:'Cairo','Tajawal',sans-serif; font-size:1.2rem; font-weight:900; }
.app-phone-screen > span { margin-top:.2rem; color:#64748b; font-size:.68rem; font-weight:700; text-align:center; }
.app-phone-lines { width:100%; display:grid; gap:.5rem; margin-top:1.4rem; }
.app-phone-lines span { display:block; height:9px; border-radius:999px; background:#e5eaf9; }
.app-phone-lines span:nth-child(2) { width:78%; }
.app-phone-lines span:nth-child(3) { width:56%; }
.app-phone-mini-card { width:100%; display:flex; align-items:center; gap:.55rem; margin-top:1rem; padding:.7rem; border-radius:.8rem; color:#1f2d7a; background:#eef1ff; }
.app-phone-mini-card svg { width:22px; height:22px; }
.app-phone-mini-card span { display:block; width:70%; height:7px; border-radius:999px; background:#cbd5f5; }
.app-float-icon { position:absolute; display:flex; align-items:center; justify-content:center; width:58px; height:58px; border:1px solid rgba(255,255,255,.5); border-radius:1.2rem; color:#1f2d7a; background:#fff; box-shadow:0 15px 35px rgba(0,0,0,.18); }
.app-float-icon svg { width:26px; height:26px; }
.app-float-delivery { top:2.2rem; right:calc(50% - 130px); transform:rotate(8deg); }
.app-float-check { bottom:2rem; left:calc(50% - 130px); color:#15803d; transform:rotate(-8deg); }
.app-mobile-link { display:flex; align-items:center; gap:.55rem; color:#1f2d7a; background:#eef1ff; }
.app-mobile-link svg { width:18px; height:18px; }
@media (max-width:767px) { .app-promo-card { grid-template-columns:1fr; gap:1rem; padding:2rem 1.35rem; border-radius:1.5rem; } .app-promo-copy h3 { font-size:2rem; } .app-promo-copy p { font-size:1rem; } .app-promo-art { min-height:285px; margin-top:.3rem; } .app-phone-shell { width:158px; height:278px; } .app-phone-screen { padding-top:2.8rem; } .app-app-icon { width:55px; height:55px; } .app-float-delivery { right:calc(50% - 110px); } .app-float-check { left:calc(50% - 110px); } .app-promo-actions { align-items:flex-start; flex-direction:column; } }
@media (min-width:768px) and (max-width:1023px) { .app-promo-card { grid-template-columns:minmax(0,1fr) 250px; gap:1.2rem; padding:2.5rem; } .app-promo-art { transform:scale(.9); } }
html[dir="ltr"] .app-button-arrow { transform:scaleX(-1); }