:root {
  --bg-900: #050505;
  --bg-800: #0a0a0a;
  --bg-elev: #0f0b0b;
  --accent: #dc2626;
  --accent-600: #b91c1c;
  --accent-400: #f97373;
  --accent-soft: rgba(220,38,38,.12);
  --text: #f8fafc;
  --muted: #9ca3af;
  --muted-2: #a3a3a3;
  --border-soft: rgba(220,38,38,.12);
  --shadow-strong: 0 24px 80px rgba(0,0,0,.85);
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-pill: 999px;
  --nav-height: 80px;
  --container-max: 1240px
}
*,
::after,
::before {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  margin: 0;
  font-family: Cairo,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: var(--text);
  line-height: 1.6;
  letter-spacing: -.01em;
  background: radial-gradient(ellipse at 20% 0, rgb(245 0 0 / 8%), #ff000000 50%), radial-gradient(ellipse at 80% 100%, rgb(255 65 65 / 6%), #ff000000 50%), linear-gradient(181deg, #4c1717 0, #000000 100%);
  background-attachment: fixed;
  overflow-x: hidden
}
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 2.5rem
}
@media (max-width:640px) {
  .container {
    padding-inline: 1.5rem
  }
}
a {
  color: inherit;
  text-decoration: none
}
img {
  max-width: 100%;
  display: block
}
button {
  font-family: inherit
}
.nav,
.site-header {
  position: relative
}
.site-header {
  backdrop-filter: blur(28px) saturate(160%);
  background: linear-gradient(135deg,rgba(18,18,18,.92),rgba(10,10,10,.98));
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 10px 50px rgba(0,0,0,.6)
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height)
}
.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  transition: all .4s cubic-bezier(.4,0,.2,1);
  z-index: 10
}
.brand:hover {
  transform: translateX(4px) scale(1.02)
}
.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg,var(--accent-400),var(--accent-600));
  box-shadow: 0 8px 30px rgba(0,0,0,.7)
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.brand-text strong {
  display: block;
  font-size: .9rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #f9fafb
}
.brand-text small {
  display: block;
  font-size: .8rem;
  color: var(--muted)
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em
}
.nav-links a {
  position: relative;
  color: #a3a3a3;
  padding: .75rem 0;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .85rem;
  transition: all .3s cubic-bezier(.4,0,.2,1)
}
.nav-links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,#dc2626,#ef4444,#dc2626);
  background-size: 200% 100%;
  transform-origin: center;
  transform: scaleX(0);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 20px rgba(220,38,38,.8),0 0 40px rgba(220,38,38,.4);
  animation: glow-slide 3s ease-in-out infinite
}
@keyframes glow-slide {
  0%,
  100% {
    background-position: 0 50%
  }
  50% {
    background-position: 100% 50%
  }
}
.nav-links a:focus-visible,
.nav-links a:hover {
  color: #fafafa;
  text-shadow: 0 0 20px rgba(220,38,38,.5)
}
.nav-links a:focus-visible::after,
.nav-links a:hover::after {
  transform: scaleX(1)
}
.nav-cta {
  margin-inline-start: 2.5rem
}
.nav-cta .btn {
  padding: .9rem 2rem;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .05em;
  box-shadow: 0 0 0 2px rgba(220,38,38,.3),0 10px 30px rgba(220,38,38,.6),0 20px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.15)
}
.nav-cta .btn:hover {
  box-shadow: 0 0 0 2px rgba(220,38,38,.5),0 15px 45px rgba(220,38,38,.8),0 30px 80px rgba(0,0,0,.85);
  transform: translateY(-3px) scale(1.03)
}
.menu-toggle {
  display: none;
  background: 0 0;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.5);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: #e5e7eb;
  cursor: pointer
}
.side-nav {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(340px,86vw);
  background: linear-gradient(180deg,var(--bg-elev),var(--bg-800));
  border-inline-start: 1px solid rgba(255,255,255,.03);
  box-shadow: -20px 0 60px rgba(0,0,0,.8);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .25s ease-out, opacity .25s ease-out, visibility .25s;
  z-index: 80;
  display: flex;
  flex-direction: column
}

.side-nav.open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto
}

/* حماية: إبقاء القائمة مغلقة فعليًا بدون open */
.side-nav:not(.open){
  transform: translateX(100%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


.side-header {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(31,41,55,.9)
}
.side-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem
}
.close-side {
  background: 0 0;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer
}
.side-links {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.25rem 1.5rem 1rem;
  font-size: .95rem
}
.side-links a {
  padding: .45rem .1rem;
  color: var(--muted)
}
.side-links a.btn {
  margin-top: .5rem
}
.side-links a:hover {
  color: #e5e7eb
}
.side-footer {
  margin-top: auto;
  padding: 1.1rem 1.5rem 1.3rem;
  border-top: 1px solid rgba(31,41,55,.9);
  font-size: .9rem
}
.side-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #bbf7d0
}
.side-backdrop {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at top,rgba(15,23,42,.7),rgba(3,7,18,.95));
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out;
  z-index: 60
}
.side-backdrop.show {
  opacity: 1;
  pointer-events: auto
}
.hero {
  position: relative;
  padding: 1rem 0rem
}
.hero-bg {
  position: absolute;
  border-radius: 999px;
  filter: blur(120px);
  opacity: .5;
  animation: float 20s ease-in-out infinite;
  z-index: -1
}
@keyframes float {
  0%,
  100% {
    transform: translate(0,0)
  }
  50% {
    transform: translate(20px,-20px)
  }
}
.hero-bg-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle,rgba(220,38,38,.6),transparent 70%);
  inset-inline-end: -120px;
  inset-block-start: -80px
}
.hero-bg-2 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle,rgba(220,38,38,.4),transparent 70%);
  inset-inline-start: -140px;
  inset-block-end: -160px;
  animation-delay: -10s
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  gap: 3rem;
  align-items: center
}
@media (max-width:1024px) {
  .hero-grid {
    grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr)
  }
}
@media (max-width:768px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.3rem
  }
  .hero-media {
    order: -1
  }
}
.hero-copy {
  max-width: 600px
}
.hero-kicker {
  display: flex;
  align-items: center;
  margin-bottom: .85rem;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted)
}
.hero-kicker .pill-soft {
  padding: .35rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(220,38,38,.4);
  background: linear-gradient(135deg,rgba(220,38,38,.2),rgba(18,18,18,.95));
  box-shadow: 0 4px 16px rgba(220,38,38,.3);
  font-weight: 900
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }
  50% {
    opacity: .7;
    transform: scale(.9)
  }
}
.hero-title {
  font-size: clamp(2.5rem,5vw,3.75rem);
  font-weight: 900;
  letter-spacing: -.03em;
  margin: 0 0 1rem;
  background: linear-gradient(135deg,#fafafa 0,#dc2626 50%,#fafafa 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 8s linear infinite
}
@keyframes shimmer {
  0% {
    background-position: 0 0
  }
  100% {
    background-position: 200% 0
  }
}
.hero-title span {
  color: #fecaca
}
.hero-lead {
  margin: 0 0 1.6rem;
  font-size: 1.1rem;
  line-height: 1.8;
  font-weight: 500;
  color: #9ca3af;
  max-width: 32rem
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: 1.8rem
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  font-size: .8rem
}
.hero-chip {
  padding: .55rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.45);
  color: #e8ff00
}
.hero-chip-label {
  font-weight: 600
}
.hero-chip-note {
  margin-inline-start: .25rem;
  color: #ffffff
}
.hero-media {
  position: relative;
  display: flex;
  justify-content: center
}
.hero-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4/3;
  border-radius: 32px;
  padding: .5rem;
  background: linear-gradient(135deg,rgba(220,38,38,.85),rgba(127,29,29,.9));
  box-shadow: 0 24px 80px rgba(0,0,0,.9);
  transition: transform .25s ease
}
.hero-frame-inner {
  width: 100%;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: #020617;
  position: relative
}
.hero-frame-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transform: scale(1.02);
  transition: transform .25s ease
}
.hero-frame:hover {
  transform: scale(1.02) rotateY(2deg)
}
.hero-frame:hover .hero-frame-inner img {
  transform: scale(1.05)
}
.hero-floating-card {
  position: absolute;
  inset-inline-start: -4px;
  inset-block-end: -18px;
  padding: .75rem .9rem;
  border-radius: 24px;
  border: 2px solid rgba(220,38,38,.3);
  background: linear-gradient(135deg,rgba(18,18,18,.98),rgba(10,10,10,.99));
  box-shadow: 0 24px 80px rgba(0,0,0,.95),0 0 40px rgba(220,38,38,.3);
  backdrop-filter: blur(24px) saturate(180%);
  max-width: 230px;
  font-size: .8rem;
  transition: all .4s cubic-bezier(.4,0,.2,1)
}
.hero-floating-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(220,38,38,.5);
  box-shadow: 0 32px 100px rgba(0,0,0,.95),0 0 60px rgba(220,38,38,.5)
}
.hfc-label {
  color: #fca5a5;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em
}
.hfc-sub {
  color: #9ca3af
}
.hero-marquee {
  margin-top: 2rem;
  border-top: 1px solid rgba(220,38,38,.2);
  border-bottom: 1px solid rgba(220,38,38,.2);
  background: linear-gradient(135deg,rgba(18,18,18,.95),rgba(10,10,10,.98));
  position: relative;
  overflow: hidden
}
.hero-marquee::after,
.hero-marquee::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none
}
.hero-marquee::before {
  left: 0;
  background: linear-gradient(90deg,#0a0a0a,transparent)
}
.hero-marquee::after {
  right: 0;
  background: linear-gradient(270deg,#0a0a0a,transparent)
}
.hero-marquee-track {
  display: inline-flex;
  gap: 1.5rem;
  padding-block: 1rem;
  min-width: max-content;
  animation: marquee 26s linear infinite;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #6b7280
}
@keyframes marquee {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-50%)
  }
}
.hero-marquee span::before {
  content: "•";
  margin-inline-start: .5rem;
  margin-inline-end: .2rem;
  color: var(--accent)
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 0rem
}
@media (max-width:1024px) {
  .cards-grid,
  .portfolio-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
}
@media (max-width:768px) {
  .cards-grid,
  .portfolio-grid {
    grid-template-columns: 1fr
  }
}
.card {
  position: relative;
  padding: 2rem 1.75rem 2.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(64,64,64,.4);
  background: linear-gradient(135deg,rgba(18,18,18,.95),rgba(10,10,10,.99));
  box-shadow: 0 24px 80px rgba(0,0,0,.9);
  transform: perspective(1000px) translateY(0) rotateX(0);
  transition: all .4s cubic-bezier(.4,0,.2,1);
  overflow: hidden
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,transparent,rgba(220,38,38,.5),transparent);
  opacity: 0;
  transition: opacity .4s ease
}
.card:hover {
  transform: perspective(1000px) translateY(-8px) rotateX(2deg);
  border-color: rgba(220,38,38,.6);
  box-shadow: 0 0 0 1px rgba(220,38,38,.2),0 32px 100px rgba(220,38,38,.4),0 48px 120px rgba(0,0,0,.95)
}
.card:hover::before {
  opacity: 1
}
.service-card h3 {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
  color: #f9fafb
}
.service-card p {
  margin: 0 0 .8rem;
  font-size: .9rem;
  color: #9ca3af
}
.card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .85rem;
  color: #9ca3af
}
.card-list li {
  position: relative;
  padding-inline-start: 1.1rem;
  margin-bottom: .28rem
}
.portfolio-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(64,64,64,.5);
  background: radial-gradient(circle at top,rgba(15,23,42,.95),#0f172a);
  box-shadow: 0 24px 80px rgba(0,0,0,.9);
  transition: all .4s cubic-bezier(.4,0,.2,1)
}
.portfolio-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(0,0,0,.1),transparent);
  opacity: 0;
  transition: opacity 160ms ease-out
}
.portfolio-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transform: scale(1.02);
  transition: transform .2s ease-out
}
.portfolio-item:hover .portfolio-media img {
  transform: scale(1.06)
}
.portfolio-item:hover .portfolio-media::after {
  opacity: 1
}
.portfolio-item:hover .portfolio-media {
  border-color: rgba(220,38,38,.5);
  box-shadow: 0 32px 100px rgba(0,0,0,.95),0 0 60px rgba(220,38,38,.4)
}
.why-layout {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,0.95fr);
  gap: 2.4rem;
  align-items: center
}
@media (max-width:1024px) {
  .why-layout {
    grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr)
  }
}
@media (max-width:768px) {
  .why-layout {
    grid-template-columns: 1fr
  }
}
.why-list {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 1.8rem;
  font-size: .93rem;
  color: #e5e7eb
}
.why-list li {
  position: relative;
  padding-inline-start: 1.6rem;
  margin-bottom: .55rem
}
.why-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .55rem;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle,#22c55e,#15803d);
  box-shadow: 0 0 0 4px rgba(22,163,74,.22)
}
.why-stats {
  display: flex;
  justify-content: center
}
.stat-card {
  width: 100%;
  max-width: 360px;
  padding: 2rem 1.75rem;
  border-radius: 28px;
  border: 1px solid rgba(64,64,64,.5);
  background: linear-gradient(135deg,rgba(18,18,18,.98),rgba(10,10,10,.99));
  box-shadow: 0 32px 120px rgba(0,0,0,.95),0 0 60px rgba(220,38,38,.1)
}
.stat-item + .stat-item {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px dashed rgba(55,65,81,.9)
}
.stat-label {
  display: block;
  font-size: .9rem;
  color: #9ca3af;
  margin-bottom: .15rem
}
.stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(135deg,#fafafa,#dc2626);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: 2.3rem;
  align-items: stretch
}
@media (max-width:1024px) {
  .contact-layout {
    grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr)
  }
}
@media (max-width:768px) {
  .contact-layout {
    grid-template-columns: 1fr
  }
}
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1rem;
  margin-top: 1.3rem
}
@media (max-width:768px) {
  .contact-cards {
    grid-template-columns: 1fr
  }
}
.contact-card {
  padding: 1.25rem;
  border-radius: 20px;
  border: 1px solid rgba(64,64,64,.5);
  background: linear-gradient(135deg,rgba(18,18,18,.98),rgba(10,10,10,.99));
  box-shadow: 0 20px 70px rgba(0,0,0,.9);
  transition: all .3s cubic-bezier(.4,0,.2,1)
}
.contact-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(220,38,38,.6);
  box-shadow: 0 0 0 1px rgba(220,38,38,.3),0 28px 90px rgba(220,38,38,.4),0 32px 100px rgba(0,0,0,.95)
}
.contact-main {
  grid-column: 1/-1
}
.contact-tag {
  display: inline-flex;
  padding: .1rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,.7);
  font-size: .7rem;
  color: #bbf7d0;
  margin-bottom: .3rem
}
.contact-title {
  font-weight: 600;
  margin-bottom: .1rem
}
.contact-value {
  font-weight: 600;
  color: #f9fafb;
  margin-bottom: .2rem
}
.contact-note {
  color: #9ca3af;
  font-size: .8rem
}
.contact-form-card {
  padding: 2rem 1.75rem;
  border-radius: 28px;
  border: 1px solid rgba(64,64,64,.5);
  background: linear-gradient(135deg,rgba(18,18,18,.98),rgba(10,10,10,.99));
  box-shadow: 0 32px 120px rgba(0,0,0,.95)
}
.contact-form-head h3 {
  margin: 0 0 .35rem;
  font-size: 1.1rem;
  color: #f9fafb
}
.contact-form-head p {
  margin: 0 0 1rem;
  font-size: .88rem;
  color: #9ca3af
}
.cmc-form {
  display: flex;
  flex-direction: column;
  gap: .9rem
}
.cmc-row {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .75rem
}
.cmc-field label {
  display: block;
  font-size: .8rem;
  color: #9ca3af;
  margin-bottom: .1rem
}
.cmc-field input,
.cmc-field textarea {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(64,64,64,.6);
  background: rgba(18,18,18,.98);
  color: #e5e7eb;
  padding: .75rem 1rem;
  font-size: .86rem;
  outline: 0;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  resize: vertical
}
.cmc-field textarea {
  min-height: 120px
}
.cmc-field input::placeholder,
.cmc-field textarea::placeholder {
  color: #6b7280
}
.cmc-field input:focus,
.cmc-field textarea:focus {
  border-color: rgba(220,38,38,.8);
  box-shadow: 0 0 0 3px rgba(220,38,38,.2),0 8px 24px rgba(220,38,38,.3);
  background: #121212
}
.cmc-form-footer {
  margin-top: .7rem;
  font-size: .78rem;
  color: #6b7280
}
.cmc-form-footer a {
  color: #e5e7eb;
  text-decoration: underline
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(220,38,38,.3);
  background: linear-gradient(135deg,#dc2626,#991b1b);
  color: #f9fafb;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(220,38,38,.2),0 8px 24px rgba(220,38,38,.5),0 16px 48px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1);
  transition: all .3s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,.2),transparent);
  opacity: 0;
  transition: opacity .3s ease
}
.btn:hover::before {
  opacity: 1
}
.btn:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(220,38,38,.6);
  box-shadow: 0 0 0 1px rgba(220,38,38,.4),0 12px 40px rgba(220,38,38,.7),0 24px 72px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.15)
}
.btn.ghost {
  background: linear-gradient(135deg,rgba(18,18,18,.95),rgba(10,10,10,.98));
  border-color: rgba(64,64,64,.5);
  box-shadow: 0 8px 32px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05)
}
.btn.ghost:hover {
  background: linear-gradient(135deg,rgba(220,38,38,.15),rgba(18,18,18,.98));
  border-color: rgba(220,38,38,.4)
}
.btn-sm {
  padding: .6rem 1.2rem;
  font-size: .85rem
}
.btn.full {
  width: 100%
}
.section {
  padding-block: 1rem;
  position: relative
}
.section::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -10%;
  width: 120%;
  height: 200%;
  background: radial-gradient(circle at 30% 20%,rgba(220,38,38,.03),transparent 40%),radial-gradient(circle at 70% 80%,rgba(220,38,38,.02),transparent 40%);
  pointer-events: none;
  z-index: 0
}
.section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%,rgba(220,38,38,.1) 1px,transparent 1px),radial-gradient(circle at 60% 70%,rgba(220,38,38,.08) 1px,transparent 1px),radial-gradient(circle at 80% 20%,rgba(220,38,38,.06) 1px,transparent 1px);
  background-size: 50px 50px,80px 80px,100px 100px;
  background-position: 0 0,40px 40px,80px 80px;
  opacity: .3;
  pointer-events: none;
  z-index: 0
}
.section > * {
  position: relative;
  z-index: 1
}
.section-head {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  padding-bottom: 1rem
}
.section-head::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg,transparent,#dc2626,#ef4444,#dc2626,transparent);
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(220,38,38,.8),0 0 40px rgba(220,38,38,.4)
}
.section-kicker {
  display: inline-block;
  padding: .5rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(220,38,38,.5);
  background: linear-gradient(135deg,rgba(220,38,38,.2),rgba(18,18,18,.98)),linear-gradient(to right,rgba(220,38,38,.1),transparent);
  font-size: .75rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #fca5a5;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(220,38,38,.2),0 4px 20px rgba(220,38,38,.3);
  position: relative;
  overflow: hidden;
  transition: all .3s cubic-bezier(.4,0,.2,1)
}
.section-kicker::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  animation: shimmer-kicker 3s infinite
}
@keyframes shimmer-kicker {
  0% {
    left: -100%
  }
  100% {
    left: 100%
  }
}
.section-kicker:hover {
  transform: translateY(-2px);
  border-color: rgba(220,38,38,.7);
  box-shadow: 0 0 0 1px rgba(220,38,38,.4),0 8px 30px rgba(220,38,38,.5),inset 0 1px 0 rgba(255,255,255,.15)
}
.section-title {
  margin: 1.5rem 0 .85rem;
  font-size: clamp(2rem,4vw,2.5rem);
  color: #fafafa;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.2;
  text-shadow: 0 2px 30px rgba(0,0,0,.8),0 0 60px rgba(220,38,38,.2);
  position: relative
}
.section-title strong {
  background: linear-gradient(135deg,#fafafa,#dc2626,#fafafa);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: title-glow 6s linear infinite
}
@keyframes title-glow {
  0% {
    background-position: 0 0
  }
  100% {
    background-position: 200% 0
  }
}
.section-subtitle {
  margin: 0;
  max-width: 42rem;
  margin-inline: auto;
  font-size: 1.1rem;
  color: #a3a3a3;
  line-height: 1.8;
  font-weight: 500;
  letter-spacing: -.01em
}
.section-cta {
  margin-top: 3rem;
  text-align: center;
  position: relative;
  z-index: 2
}
.section-cta .btn {
  box-shadow: 0 0 0 2px rgba(220,38,38,.3),0 12px 40px rgba(220,38,38,.6),0 24px 70px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12)
}
.section-cta .btn:hover {
  box-shadow: 0 0 0 2px rgba(220,38,38,.5),0 16px 50px rgba(220,38,38,.8),0 32px 90px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.18)
}
.section-alt {
  position: relative;
  border-top: 1px solid rgba(220,38,38,.1);
  border-bottom: 1px solid rgba(220,38,38,.1)
}
.section-alt::after,
.section-alt::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg,transparent,rgba(220,38,38,.3) 20%,rgba(220,38,38,.5) 50%,rgba(220,38,38,.3) 80%,transparent);
  filter: blur(8px)
}
.section-alt::before {
  top: 0
}
.section-alt::after {
  bottom: 0
}
.section-alt .section-title {
  color: #fafafa;
  text-shadow: 0 0 40px rgba(220,38,38,.3),0 2px 20px rgba(0,0,0,.8)
}
.section-alt .section-kicker {
  border-color: rgba(220,38,38,.5);
  background: linear-gradient(135deg,rgba(220,38,38,.2),rgba(18,18,18,.98));
  box-shadow: 0 4px 20px rgba(220,38,38,.3),0 0 40px rgba(220,38,38,.2)
}
.section-alt .card {
  background: linear-gradient(135deg,rgba(20,20,20,.98),rgba(15,15,15,.99));
  border-color: rgba(82,82,82,.4)
}
.section-alt .card:hover {
  border-color: rgba(220,38,38,.7);
  box-shadow: 0 0 0 1px rgba(220,38,38,.3),0 35px 110px rgba(220,38,38,.5),0 50px 130px rgba(0,0,0,.95)
}
.site-footer {
  border-top: 1px solid rgba(220,38,38,.15);
  padding-block: 3rem 2.5rem;
  background: radial-gradient(ellipse at 50% 0,rgba(220,38,38,.08),transparent 60%),linear-gradient(180deg,rgba(15,15,15,.98) 0,#0a0a0a 100%);
  font-size: .9rem;
  color: #a3a3a3;
  position: relative
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(220,38,38,.4) 20%,rgba(220,38,38,.7) 50%,rgba(220,38,38,.4) 80%,transparent);
  box-shadow: 0 0 20px rgba(220,38,38,.6)
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all .3s cubic-bezier(.4,0,.2,1)
}
.footer-brand:hover {
  transform: translateX(4px)
}
.fb-logo {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(220,38,38,.3);
  box-shadow: 0 0 0 1px rgba(220,38,38,.2),0 8px 24px rgba(0,0,0,.8),0 0 30px rgba(220,38,38,.2);
  transition: all .3s cubic-bezier(.4,0,.2,1)
}
.footer-brand:hover .fb-logo {
  border-color: rgba(220,38,38,.6);
  box-shadow: 0 0 0 1px rgba(220,38,38,.4),0 12px 32px rgba(0,0,0,.9),0 0 50px rgba(220,38,38,.4);
  transform: scale(1.05)
}
.fb-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.fb-text strong {
  display: block;
  color: #fafafa;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 2px 8px rgba(0,0,0,.5)
}
.fb-text span {
  color: #a3a3a3;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: center
}
.footer-links a {
  color: #a3a3a3;
  font-weight: 600;
  letter-spacing: .02em;
  position: relative;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  padding: .25rem 0
}
.footer-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,#dc2626,#ef4444);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(220,38,38,.6)
}
.footer-links a:hover {
  color: #fafafa;
  text-shadow: 0 0 15px rgba(220,38,38,.4)
}
.footer-links a:hover::after {
  transform: scaleX(1)
}
.footer-copy {
  flex-basis: 100%;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(64,64,64,.3);
  text-align: center;
  color: #737373;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .01em
}
.footer-copy::first-letter {
  font-weight: 700;
  color: #dc2626
}
@media (max-width:768px) {
  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem
  }
  .footer-copy {
    text-align: left;
    margin-top: 1rem;
    padding-top: 1rem
  }
}
@media (max-width:1024px) {
  .nav-links {
    display: none
  }
  .nav-cta {
    display: none
  }
  .menu-toggle {
    display: inline-flex
  }
  .portfolio-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
  .why-layout {
    grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr)
  }
  .contact-layout {
    grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr)
  }
  .side-nav {
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%)
  }
  .side-nav.open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0)
  }
  .side-backdrop.show {
    display: block;
    opacity: 1
  }
}
@media (max-width:768px) {
  .hero {
    padding-top: 3.2rem
  }
  .portfolio-grid {
    grid-template-columns: 1fr
  }
  .why-stats {
    justify-content: flex-start
  }
  .contact-layout {
    grid-template-columns: 1fr
  }
  .contact-cards {
    grid-template-columns: 1fr
  }
  .section-head {
    margin-bottom: 3rem
  }
  .section-title {
    font-size: 1.75rem
  }
  .section-subtitle {
    font-size: 1rem
  }
  .section-cta {
    margin-top: 2rem
  }
}
@media (max-width:640px) {
  .container {
    padding-inline: 1.1rem
  }
  .nav {
    height: 64px
  }
  .hero-title {
    font-size: 2.7rem
  }
  .hero-marquee-track {
    font-size: .74rem
  }
  .footer-grid {
    flex-direction: column;
    align-items: flex-start
  }
  .footer-copy {
    margin-top: .7rem
  }
  .nav {
    height: 70px
  }
  .nav .brand {
    gap: .85rem
  }
  .nav .brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px
  }
  .nav .brand-text strong {
    font-size: .9rem;
    letter-spacing: .22em
  }
  .nav .brand-text small {
    font-size: .75rem
  }
  .menu-toggle {
    width: 44px;
    height: 44px
  }
  .section-head {
    margin-bottom: 2.5rem
  }
  .section-kicker {
    font-size: .7rem;
    padding: .4rem 1rem
  }
  .section-title {
    font-size: 1.5rem;
    margin: 1.25rem 0 .75rem
  }
  .section-subtitle {
    font-size: .95rem
  }
}


/* Reveal on scroll (used by JS: add .visible) */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
  will-change: opacity, transform, filter;
}
.reveal.visible{
  opacity: 1;
  transform: none;
  filter: none;
}
.delay-1{ transition-delay: .08s; }
.delay-2{ transition-delay: .16s; }
.delay-3{ transition-delay: .24s; }
.delay-4{ transition-delay: .32s; }
.delay-5{ transition-delay: .40s; }

/* منع سكرول الخلفية عند فتح قائمة الموبايل */
body.menu-open{ overflow: hidden; }

/* موبايل فقط */
@media (max-width: 768px) {

  /* النصوص */
  .hero-content,
  .hero-text {
    text-align: center;
    align-items: center;
  }

  /* العنوان */
  .hero-title {
    text-align: center;
  }

  /* الوصف */
  .hero-desc {
    text-align: center;
    margin-inline: auto;
  }

  /* أزرار الهيرو */
  .hero-actions,
  .hero-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }

}
@media (max-width: 768px) {

  .hero-copy {
    align-items: center;
    text-align: center;
    font-size: 1.0rem;
  }

  .hero-kicker {
    justify-content: center;
    text-align: center;
  }

}
@media (max-width: 768px) {

  .hero-meta {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

}
@media (max-width: 768px) {
  .hero-chip {
    padding: 10px 4px;
    border-radius: 14px;
  }
}
/* ===== Hero Media – Mobile Version ===== */
@media (max-width: 768px) {

    .hero-media {
        display: grid;
        flex-direction: column;
        align-items: center;
        size: 14px;
        margin-top: -20px;
    }

  /* إطار الصورة */
  .hero-frame {
    width: 100%;
    max-width: 420px;
  }

  .hero-frame-inner {
    border-radius: 18px;
    overflow: hidden;
  }

  .hero-frame-inner img {
    width: 100%;
    height: inherit;
    display: block;
  }

  /* الكارد العائم */
  .hero-floating-card {
    position: absolute; /* يلغي العوم */
    transform: none;
    width: auto;
    text-align: center;
    padding: 12px 16px;
    border-radius: 40px;
  }

}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-items: center;
  gap: 22px;
}
/* منع أي خروج أفقي بسبب خلفيات الهيرو + الماركي */
.hero,
.shell,
.hero-wrap,
.hero-grid {
  overflow-x: clip;
}

/* تأكيد القص على الهيرو نفسه */
.hero {
  overflow: hidden; /* fallback */
}

/* خلفيات الهيرو تأكد ما تتسبب بسكرول */
.hero-bg {
  max-width: 100%;
  pointer-events: none;
}
/* قص أي خروج أفقي من شريط الماركي */
.hero-marquee {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  max-width: 100%;
}

/* التراك المتحرك */
.hero-marquee-track {
  will-change: transform;
}

/* أمان إضافي */
.hero-marquee,
.hero-marquee * {
  box-sizing: border-box;
}
.card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* ===== Services Cards (Premium) ===== */

/* Grid */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Card base */
.service-card{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 18px 16px;
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(220,38,38,.16), transparent 52%),
    linear-gradient(180deg, rgba(18,18,22,.92), rgba(10,10,12,.94));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              box-shadow .45s ease,
              border-color .45s ease;
}
/* Mobile: calmer hover (touch) */
@media (max-width: 768px){
  .service-card{ padding: 18px 16px; }
  .service-card:hover{ transform: translateY(-4px); }
  .service-card:hover::after{ animation: none; opacity: .6; }
}

/* glow frame */
.service-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 50% 0%,
            rgba(220,38,38,.45), transparent 60%);
  opacity: 0;
  pointer-events:none;
  transition: opacity .45s ease;
}

/* moving shine */
.service-card::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 120%;
  height: 140%;
  background: linear-gradient(120deg,
            transparent 30%,
            rgba(255,255,255,.10) 45%,
            transparent 60%);
  transform: translateX(-30%) rotate(8deg);
  opacity: 0;
  pointer-events:none;
}

/* Hover animation */
.service-card:hover{
  transform: translateY(-4px);
  border-color: rgba(220,38,38,.35);
  box-shadow:
    0 26px 90px rgba(0,0,0,.75),
    0 0 0 1px rgba(220,38,38,.22);
}
.service-card:hover::before{ opacity: 1; }
.service-card:hover::after{
  opacity: 1;
animation: none;
opacity: .6;
}

@keyframes cardShine{
  0%   { transform: translateX(-45%) rotate(10deg); }
  100% { transform: translateX(85%) rotate(10deg); }
}

/* Typography */
.service-card h3{
  margin: 6px 0 8px;
  font-size: 1.05rem;
  line-height: 1.25;
}
.service-card p{
  margin: 0 0 12px;
  color: rgba(255,255,255,.78);
  line-height: 1.7;
  font-size: .95rem;
}

/* List with check (RTL friendly) */
.service-card .card-list{
  margin: 0;
  padding: 0;
}
.service-card .card-list li{
  list-style: none;
  position: relative;
  padding-right: 24px;
  margin: 8px 0;
  color: rgba(255,255,255,.86);
  line-height: 1.6;
  transition: transform .25s ease, opacity .25s ease;
}
.service-card .card-list li::before{
  content: "✔";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent, #dc2626);
  font-weight: 900;
  font-size: .9rem;
  text-shadow: 0 0 10px rgba(220,38,38,.45);
}

/* Hover effect on list items */
.service-card:hover .card-list li{
  transform: translateX(-2px);
}
.service-card:hover .card-list li:nth-child(2){ opacity: .95; }
.service-card:hover .card-list li:nth-child(3){ opacity: .9; }

/* 1) سدّ أي سكرول أفقي عام */
html, body{
  overflow-x: hidden;
  width: 100%;
}

/* 2) قصّ الهيرو بشكل مؤكد */
.hero, .shell{
  overflow: hidden;
}

/* 3) أهم نقطة: عناصر داخل Grid/Flex لا تطلع برا */
.hero-grid,
.hero-copy,
.hero-media{
  min-width: 0;
}

/* 4) تأكد الكونتينر ما يتجاوز الشاشة */
.container{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 5) الصور لا تتجاوز */
.hero-frame,
.hero-frame-inner,
.hero-frame-inner img{
  max-width: 100%;
}
.hero-frame-inner img{
  display:block;
  height:inherit;
}
.hero-bg{
  contain: paint;
}
/* === Card Icon (NEW) === */
.card-icon{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}

.card-icon span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: .06em;
  color: #fff;

  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255,107,107,.35), transparent 55%),
    linear-gradient(180deg, #dc2626, #8f0f18);

  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 12px 34px rgba(220,38,38,.35),
    inset 0 1px 0 rgba(255,255,255,.15);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    filter .35s ease;
}

/* Hover subtle */
.service-card:hover .card-icon span{
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 18px 46px rgba(220,38,38,.45),
    inset 0 1px 0 rgba(255,255,255,.18);
}
/* Prevent horizontal scroll caused by moving marquee track */
.hero-marquee { 
  overflow: hidden;
}
.hero-marquee-track { 
  will-change: transform;
}
html, body { overflow-x: hidden; }
.hero {
  position: relative;
  overflow: hidden;
}

.hero-bg {
  pointer-events: none;
  max-width: 100%;
}
.hero-bg-2{
  right: 0;
  left: auto;
}