@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&family=Cairo:wght@400;500;600;700;800&display=swap');

/* ===== Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }

/* ===== Color tokens ===== */
:root {
  --background: 0 0% 100%;
  --foreground: 217 42% 15%;
  --primary: 189 100% 51%;
  --primary-foreground: 217 42% 15%;
  --secondary: 217 42% 23%;
  --secondary-foreground: 0 0% 100%;
  --muted: 210 40% 96%;
  --muted-foreground: 217 42% 35%;
  --card: 0 0% 100%;
  --card-foreground: 217 42% 15%;
  --border: 214 32% 91%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --radius: 0.75rem;
}

.dark {
  --background: 217 42% 10%;
  --foreground: 0 0% 98%;
  --primary: 189 100% 51%;
  --primary-foreground: 217 42% 10%;
  --secondary: 217 42% 20%;
  --secondary-foreground: 0 0% 98%;
  --muted: 217 42% 15%;
  --muted-foreground: 217 42% 70%;
  --card: 217 42% 12%;
  --card-foreground: 0 0% 98%;
  --border: 217 42% 20%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.65;
  transition: background-color .3s, color .3s;
  overflow-x: clip;
}

html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 {
  font-family: 'Cairo', sans-serif;
}

h1, h2, h3, h4 { font-family: 'Outfit', sans-serif; letter-spacing: -0.02em; font-weight: 700; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { letter-spacing: normal; }

h1 { font-size: clamp(2.2rem, 5vw + 1rem, 4.2rem); line-height: 1.1; font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4vw + 1rem, 3rem); line-height: 1.2; }
h3 { font-size: clamp(1.4rem, 3vw + 1rem, 1.9rem); line-height: 1.3; font-weight: 600; }
h4 { font-size: 1.15rem; font-weight: 600; }

p { color: inherit; }

.ltr-num { direction: ltr; unicode-bidi: isolate; }

/* ===== Layout helpers ===== */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width:768px){ .container{ padding:0 2rem; } }

.section { padding: 6rem 0; }
.bg-muted { background: hsl(var(--muted)); }
.bg-background { background: hsl(var(--background)); }

.text-center { text-align: center; }
.section-head { max-width: 720px; margin: 0 auto 4rem; text-align: center; }
.section-head.align-start { margin: 0 0 4rem; max-width: 760px; text-align: start; }
.section-head.align-end { margin: 0 0 4rem auto; max-width: 760px; text-align: end; }
.muted { color: hsl(var(--muted-foreground)); }
.lead { font-size: 1.15rem; color: hsl(var(--muted-foreground)); }

.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 2rem; border-radius: 999px; font-weight: 600; font-size: 1rem;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  transition: transform .2s, opacity .2s, background-color .2s;
}
.btn .icon { width: 1rem; height: 1rem; }
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.97); }
.btn-outline { background: transparent; color: hsl(var(--foreground)); border: 2px solid hsl(var(--border)); }
.btn-outline.active, .btn-outline:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; padding: .5rem .9rem; border-radius: 999px; }
.btn-ghost:hover { background: hsl(var(--muted)); }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

.icon { width: 1.1rem; height: 1.1rem; display: inline-block; flex-shrink: 0; vertical-align: middle; }
.service-icon .icon, .feature-icon .icon { width: 1.6rem; height: 1.6rem; }
.benefit-item .check .icon { width: 1.4rem; height: 1.4rem; }
.contact-info-item .icon, .contact-list .icon, .detail-card .icon { width: 1.4rem; height: 1.4rem; color: hsl(var(--primary)); }
.topbar .icon { width: 1rem; height: 1rem; color: hsl(var(--primary)); margin-inline-end: .25rem; }
.social-row .icon, .floating-btn .icon { width: 1.3rem; height: 1.3rem; }
#whatsapp-btn .icon { width: 1.6rem; height: 1.6rem; }
.pf-overlay .icon { width: 1rem; height: 1rem; }
.lang-toggle-btn { display: inline-flex; align-items: center; gap: .35rem; }
.back-link .icon { width: 1.1rem; height: 1.1rem; }
.detail-card .field h4 .icon { width: 1rem; height: 1rem; }

/* ===== Top bar ===== */
.topbar {
  background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));
  font-size: .85rem; padding: .55rem 0; display: none;
}
@media (min-width: 768px) { .topbar { display: block; } }
.topbar .container { display: flex; justify-content: space-between; align-items: center; }
.topbar-group { display: flex; align-items: center; gap: 1.5rem; }
.topbar a:hover { color: hsl(var(--primary)); }

/* ===== Header ===== */
header.site-header {
  position: sticky; top: 0; z-index: 50; background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border)); padding: 1rem 0; transition: all .3s;
}
header.site-header.scrolled {
  background: hsl(var(--card) / 0.75); backdrop-filter: blur(16px); padding: .65rem 0;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.navbar { display: flex; align-items: center; justify-content: space-between; }
.logo img { height: 2.2rem; width: auto; }

/* شعار فاتح/غامق: يبدّل تلقائياً حسب وضع الموقع (كلاس dark على html) */
.logo-dark { display: none; }
html.dark .logo-light { display: none; }
html.dark .logo-dark { display: inline-block; }
.nav-links { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 768px) { .nav-links { display: flex; } }
.nav-links a { font-size: .92rem; font-weight: 500; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: hsl(var(--primary)); }
.nav-tools { display: flex; align-items: center; gap: .5rem; margin-inline-start: 1rem; padding-inline-start: 1rem; border-inline-start: 1px solid hsl(var(--border)); }
.icon-btn { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; transition: background-color .2s; }
.icon-btn:hover { background: hsl(var(--muted)); }
.mobile-toggle { display: flex; align-items: center; gap: .4rem; }
@media (min-width: 768px) { .mobile-toggle { display: none; } }

.mobile-menu { display: none; border-top: 1px solid hsl(var(--border)); margin-top: 1rem; }
.mobile-menu.open { display: block; }
.mobile-menu .container { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 1.25rem; }
.mobile-menu a { font-size: 1.05rem; font-weight: 500; padding: .4rem 0; }
.mobile-contact { border-top: 1px solid hsl(var(--border)); margin-top: .5rem; padding-top: 1rem; display: flex; flex-direction: column; gap: .6rem; font-size: .9rem; color: hsl(var(--muted-foreground)); }

/* ===== Progress bar / loading ===== */
#progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: hsl(var(--muted)); z-index: 60; }
#progress-bar-fill { height: 100%; width: 0%; background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary))); transition: width .15s; }

#loading-screen {
  position: fixed; inset: 0; z-index: 70; background: hsl(var(--background));
  display: flex; align-items: center; justify-content: center; transition: opacity .5s;
}
.loader-spinner { width: 5rem; height: 5rem; margin: 0 auto 1rem; position: relative; }
.loader-spinner::before, .loader-spinner::after { content: ''; position: absolute; inset: 0; border-radius: 999px; border: 4px solid hsl(var(--primary) / .2); }
.loader-spinner::after { border-color: hsl(var(--primary)) transparent transparent transparent; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text { font-weight: 800; font-size: 1.4rem; background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary))); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===== Hero ===== */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 5rem; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content:''; position:absolute; inset:0; background: hsl(var(--background) / .8); backdrop-filter: blur(4px); }
.hero-content { position: relative; z-index: 10; max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; text-align: center; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.hero-content h1 { margin-bottom: 1.5rem; }
.gradient-text { background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.typewriter { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; height: 2.2rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.cursor-blink { display: inline-block; width: 2px; height: 1em; background: hsl(var(--primary)); margin-inline-start: .25rem; animation: blink 1s step-start infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-content .lead { max-width: 640px; margin: 0 auto 3rem; }
.hero-actions { display: flex; flex-direction: column; gap: 1rem; justify-content: center; margin-bottom: 4rem; }
@media (min-width: 640px) { .hero-actions { flex-direction: row; } }
.hero-actions .btn { font-size: 1.05rem; padding: 1rem 2rem; height: 3.5rem; }

.stats-bar { position: relative; z-index: 10; background: hsl(var(--muted) / .4); border-top: 1px solid hsl(var(--border) / .5); border-bottom: 1px solid hsl(var(--border) / .5); padding: 3rem 0; }
.stat { text-align: center; }
.stat-value { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; color: hsl(var(--primary)); margin-bottom: .4rem; }
.stat-label { font-size: .9rem; color: hsl(var(--muted-foreground)); font-weight: 500; }

/* ===== Glass cards ===== */
.glass {
  background: hsl(var(--card) / .45); backdrop-filter: blur(16px);
  border: 1px solid hsl(var(--border) / .4); border-radius: 1.5rem;
  padding: 2rem; transition: transform .3s;
}
.glass:hover { transform: translateY(-6px); }

/* ===== Filter buttons ===== */
.filters { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-bottom: 3rem; }

/* ===== Portfolio cards ===== */
.pf-card { position: relative; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.08); transition: transform .3s, box-shadow .3s; }
.pf-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,.16); }
.pf-image-wrap { position: relative; height: 16rem; overflow: hidden; }
.pf-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pf-card:hover .pf-image-wrap img { transform: scale(1.08); }
.pf-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.4), transparent); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; }
.pf-card:hover .pf-overlay { opacity: 1; }
.pf-overlay .btn { font-size: .9rem; padding: .7rem 1.4rem; }
.pf-body { background: hsl(var(--card) / .6); backdrop-filter: blur(12px); padding: 1.5rem; }
.pf-body .pf-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .5rem; gap: .75rem; }
.badge { display: inline-block; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-size: .75rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px; white-space: nowrap; }

/* ===== Service cards ===== */
.service-icon { width: 3.5rem; height: 3.5rem; border-radius: 1.1rem; background: hsl(var(--primary)/.12); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; font-size: 1.6rem; color: hsl(var(--primary)); }
.feature-icon { width: 3rem; height: 3rem; border-radius: .9rem; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; font-size: 1.3rem; color: #fff; }

.benefit-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border-radius: 1rem; background: hsl(var(--muted)/.5); transition: background-color .2s; margin-bottom: 1rem; }
.benefit-item:hover { background: hsl(var(--muted)); }
.benefit-item .check { color: hsl(var(--primary)); font-size: 1.3rem; line-height: 1; margin-top: .1rem; }

/* ===== Feature sections (web/mobile/pos) ===== */
.feature-section { position: relative; overflow: hidden; }
.feature-bg { position: absolute; top: 0; width: 50%; height: 100%; opacity: .1; pointer-events: none; }
.feature-bg img { width: 100%; height: 100%; object-fit: cover; }
.feature-bg.side-end { inset-inline-end: 0; }
.feature-bg.side-start { inset-inline-start: 0; }
.feature-grid { display: grid; gap: 3rem; position: relative; z-index: 1; }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
.order-2-lg { }
@media (min-width: 1024px) { .order-first-lg { order: 1; } .order-last-lg { order: 2; } }

/* ===== Contact ===== */
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)/.5); border-radius: 1.5rem; padding: 2rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.contact-info-item { background: hsl(var(--card)); border: 1px solid hsl(var(--border)/.5); border-radius: 1.1rem; padding: 1.25rem; display: flex; gap: 1rem; align-items: flex-start; box-shadow: 0 1px 3px rgba(0,0,0,.05); margin-bottom: 1rem; transition: box-shadow .2s; }
.contact-info-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.map-wrap { border-radius: 1.1rem; overflow: hidden; height: 16rem; border: 1px solid hsl(var(--border)/.5); }
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: .4rem; }
.form-group input, .form-group textarea {
  width: 100%; padding: .65rem .9rem; border-radius: .6rem; border: 1px solid hsl(var(--border));
  background: hsl(var(--background)); color: hsl(var(--foreground)); font: inherit;
}
.form-group textarea { resize: none; }
.form-error { color: hsl(var(--destructive)); font-size: .85rem; margin-top: .3rem; }

/* ===== Footer ===== */
footer.site-footer { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); padding: 4.5rem 0 2rem; margin-top: auto; }
.footer-grid { display: grid; gap: 3rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-grid h4 { font-size: 1.1rem; margin-bottom: 1.5rem; }
.footer-grid ul li { margin-bottom: .8rem; }
.footer-grid a { opacity: .8; transition: color .2s, opacity .2s; }
.footer-grid a:hover { color: hsl(var(--primary)); opacity: 1; }
.footer-logo img { height: 2.6rem; margin-bottom: 1rem; }
.footer-desc { opacity: .8; max-width: 18rem; }
.contact-list li { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .9rem; opacity: .9; }
.social-row { display: flex; gap: 1rem; margin-bottom: 2rem; }
.social-row a { width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: hsl(var(--secondary-foreground)/.1); display: flex; align-items: center; justify-content: center; transition: all .3s; }
.social-row a:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); transform: translateY(-3px); }
.footer-sep { border: none; border-top: 1px solid hsl(var(--secondary-foreground)/.2); margin-bottom: 2rem; }
.footer-bottom { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; font-size: .85rem; opacity: .65; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; } }
.footer-bottom-links { display: flex; gap: 1.5rem; }

/* ===== Floating buttons ===== */
.floating-btn { position: fixed; z-index: 40; width: 3.4rem; height: 3.4rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .3s, opacity .3s; }
.floating-btn:hover { transform: scale(1.1); }
#whatsapp-btn { bottom: 1.5rem; inset-inline-end: 1.5rem; background: #25D366; color: #fff; font-size: 1.5rem; }
#back-to-top { bottom: 1.5rem; inset-inline-start: 1.5rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 1.2rem; opacity: 0; pointer-events: none; }
#back-to-top.visible { opacity: 1; pointer-events: auto; }

/* ===== Page header (projects / project detail) ===== */
.page-hero { padding: 9rem 0 3rem; text-align: center; }
.page-hero h1 { margin-bottom: 1rem; }
.projects-grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .projects-grid { grid-template-columns: repeat(3, 1fr); } }
.empty-state { text-align: center; padding: 5rem 0; color: hsl(var(--muted-foreground)); }

.back-link { display: inline-flex; align-items: center; gap: .4rem; color: hsl(var(--muted-foreground)); margin-bottom: 2rem; font-weight: 500; }
.back-link:hover { color: hsl(var(--foreground)); }
.detail-hero-img { border-radius: 1.5rem; overflow: hidden; margin-bottom: 3rem; box-shadow: 0 10px 30px rgba(0,0,0,.12); border: 1px solid hsl(var(--border)/.5); }
.detail-hero-img img { width: 100%; height: 24rem; object-fit: cover; }
@media (min-width: 768px) { .detail-hero-img img { height: 28rem; } }
.detail-layout { display: flex; flex-direction: column; gap: 3rem; }
@media (min-width: 768px) { .detail-layout { flex-direction: row; } }
.detail-main { flex-grow: 1; }
.detail-main h1 { margin-bottom: 1.5rem; }
.detail-main p { color: hsl(var(--muted-foreground)); line-height: 1.8; white-space: pre-wrap; }
.detail-aside { width: 100%; }
@media (min-width: 768px) { .detail-aside { width: 20rem; flex-shrink: 0; } }
.detail-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)/.5); border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.detail-card .field { margin-bottom: 1.25rem; }
.detail-card .field h4 { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin-bottom: .4rem; }
.detail-card .field p { color: hsl(var(--muted-foreground)); }
.detail-card .cta { padding-top: 1.25rem; border-top: 1px solid hsl(var(--border)); }

/* ===== Reveal animation ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ===== Misc ===== */
.shrink-0 { flex-shrink: 0; }
.mt-auto { margin-top: auto; }
.flex-col-page { display: flex; flex-direction: column; min-height: 100vh; }
.flex-grow { flex-grow: 1; }

/* فخ السبام في نموذج التواصل: مخفي بصريًا وعن قارئات الشاشة، لكنه موجود في الـ DOM */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}