/* ===== أنماط خاصة بالصفحة الرئيسية ===== */
body {display:flex; flex-direction:column;}

#particles-js {position:absolute; inset:0; z-index:1;}
header {
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  background: radial-gradient(circle at 50% 20%, var(--brand-bg-alt), var(--brand-bg) 70%);
}
header .hero-content {position:relative; z-index:2;}
header .hero-content .eyebrow {
  display:inline-block; padding:.35rem 1rem; border:1px solid var(--brand-accent);
  color: var(--brand-accent); border-radius:50px; font-size:.9rem; margin-bottom:1rem; letter-spacing:.5px;
}
header h1 {color: var(--brand-text);}
header p.lead {color: var(--brand-text-muted); max-width:640px; margin-inline:auto;}
body.light-mode header {background: radial-gradient(circle at 50% 20%, #eef1f5, var(--brand-bg-light) 70%); color: var(--brand-text-light);}
body.light-mode header p.lead {color: var(--brand-text-light-muted);}

.scroll-down {position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-size:1.6rem; color: var(--brand-accent); animation: bounce 2s infinite;}
@keyframes bounce {0%,100% {transform:translate(-50%,0);} 50% {transform:translate(-50%,8px);}}

.typewriter {display:inline-block; border-inline-end:3px solid var(--brand-accent); white-space:nowrap; overflow:hidden; animation: typing 3.5s steps(30,end), blink .8s infinite;}
@keyframes typing {from {width:0;} to {width:100%;}}
@keyframes blink {50% {border-color:transparent;}}

/* ---------- نبذة عن الشركة ---------- */
.about-card {
  background: var(--brand-bg-elevated);
  border: 1px solid var(--brand-border);
  border-inline-start: 4px solid var(--brand-accent);
  border-radius: var(--brand-radius);
  padding: 2rem;
  box-shadow: var(--brand-shadow-soft);
}
body.light-mode .about-card {background: var(--brand-bg-light-card); border-color: var(--brand-border-light); border-inline-start-color: var(--brand-accent);}
.about-card h5 {line-height:2.1; font-weight:500; color: var(--brand-text-muted);}
body.light-mode .about-card h5 {color: var(--brand-text-light-muted);}

/* ---------- المعارض ---------- */
.gallery img {width:100%; height:520px; object-fit:cover; transition: transform .6s ease, box-shadow .6s ease, filter .6s ease; border-radius:1rem; cursor:pointer;}
.gallery img:hover {transform: scale(1.05); box-shadow:0 25px 50px rgba(0,0,0,0.4); filter:brightness(1.1) saturate(1.2);}

/* ---------- نموذج التواصل ---------- */
.contact-card {
  background: var(--brand-bg-elevated); border:1px solid var(--brand-border);
  border-radius: var(--brand-radius); padding:2.25rem; box-shadow: var(--brand-shadow);
}
body.light-mode .contact-card {background: var(--brand-bg-light-card); border-color: var(--brand-border-light); box-shadow: var(--brand-shadow-soft);}
.contact-card .form-control {
  background: rgba(255,255,255,.04); border-color: var(--brand-border); color: var(--brand-text);
}
.contact-card .form-control:focus {
  background: rgba(255,255,255,.06); border-color: var(--brand-accent); color: var(--brand-text);
  box-shadow: 0 0 0 .2rem rgba(198,154,78,.2);
}
body.light-mode .contact-card .form-control {background:#fff; border-color: var(--brand-border-light); color: var(--brand-text-light);}
body.light-mode .contact-card .form-control:focus {border-color: var(--brand-accent);}

/* ---------- الفوتر ---------- */
.footer-info {color: var(--brand-text-muted);}
.footer-info i {color: var(--brand-accent); margin-inline-end:.5rem;}
body.light-mode .footer-info {color: var(--brand-text-light-muted);}

/* ---------- Lightbox ---------- */
#lightbox img {max-height:85vh;}