/* Base */
:root{
  --bg:#011d17; /* خلفية خضراء غامقة - من اللوقو */
  --bg-2:#05261e;
  --text:#f5f3e7; /* أبيض مائل */
  --muted:#c9c5b5; /* بيج خفيف للثانوي */
  --brand:#d4a827; /* ذهبي */
  --card:#072b23;  /* كروت داكنة */
  --line:#164236;  /* حدود خضراء أغمق */
  --shadow:0 10px 30px rgba(0,0,0,.15);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Almarai',system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
}

/* Containers */
.container{width:min(1200px, 92%); margin-inline:auto}

/* Topbar */
.topbar{background:linear-gradient(90deg,var(--bg),var(--bg-2)); border-bottom:1px solid var(--line); font-size:.95rem}
.topbar .container{display:flex; gap:16px; align-items:center; justify-content:space-between; padding:10px 0}
.topbar .btn-ghost{padding:.4rem .9rem}

/* Header */
.header{position:sticky; top:0; z-index:50; background:rgba(1,29,23,.9); backdrop-filter:saturate(150%) blur(6px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:20px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.brand-mark{width:44px; height:44px; border-radius:8px; display:grid; place-items:center; font-weight:800; background:linear-gradient(145deg, #1c2b25, #011d17); border:1px solid var(--line); box-shadow:var(--shadow)}
.brand-mark-sm{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(145deg,#1c2b25,#011d17);border:1px solid var(--line);font-weight:800}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text small{color:var(--muted); font-size:.8rem}

/* Nav */
.menu{display:flex; gap:18px; align-items:center}
.menu a{color:var(--text); text-decoration:none; padding:10px 14px; border-radius:10px; border:1px solid transparent}
.menu a:hover{border-color:var(--line); background:#083127}
.btn{background:var(--brand); color:#011d17; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:800}
.btn:hover{filter:brightness(1.1)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--line); border-radius:10px; text-decoration:none}
.btn-ghost:hover{background:#083127}
.phone{color:var(--text); text-decoration:none; opacity:.9}
.hamburger{display:none; cursor:pointer; font-size:1.5rem}
#nav-toggle{display:none}
@media (max-width: 900px){
  .hamburger{display:block}
  .menu{position:fixed; inset-inline:0; top:66px; background:rgba(1,29,23,.98); border-top:1px solid var(--line); padding:16px; display:none; flex-direction:column; align-items:stretch}
  #nav-toggle:checked ~ .menu{display:flex}
}

/* Hero with Parallax & Tiles */
.hero{position:relative; min-height:78vh; background:url('https://images.unsplash.com/photo-1555371363-5e2c3203c6b0?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat; display:grid; align-items:center; overflow:hidden}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(1,29,23,.65), rgba(1,29,23,.85) 60%, rgba(1,29,23,1))}
.hero-inner{position:relative; padding:80px 0}
.hero h1{font-size:clamp(1.8rem, 2.5rem + 1.5vw, 3.2rem); margin:0 0 12px; text-wrap:balance}
.hero p{color:var(--muted); margin:0 0 22px; max-width:65ch}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.badges{display:flex; gap:10px; flex-wrap:wrap}
.badges span{border:1px solid var(--line); padding:6px 10px; border-radius:100px; background:rgba(0,0,0,.2); font-size:.95rem}

.hero-tiles{position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:18px 0 8px}
.tile{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); transform:translateY(0); transition:transform .5s ease, box-shadow .5s ease}
.tile img{width:100%; height:220px; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02)}
.tile figcaption{position:absolute; inset-inline:10px; bottom:10px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); padding:6px 10px; border-radius:10px; font-size:.9rem; backdrop-filter:blur(2px)}
.tile:hover{transform:translateY(-6px); box-shadow:0 18px 35px rgba(0,0,0,.25)}

/* Infinite marquee */
.marquee{position:absolute; bottom:0; inset-inline:0; color:#a7c5b9; opacity:.55; border-top:1px solid var(--line); background:rgba(8,49,39,.35); overflow:hidden}
.marquee-track{display:flex; gap:36px; padding:8px 0; width:max-content; animation:marquee 20s linear infinite}
.marquee span{padding-inline:8px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Sections */
.section{padding:64px 0}
.section-contrast{background:linear-gradient(180deg, #0f2a22, #011d17)}
.section-head{margin-bottom:26px}
.section-head h2{margin:0 0 6px}
.section-head p{margin:0; color:var(--muted)}

/* Grids & Cards */
.grid{display:grid; gap:18px}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.templates-3{grid-template-columns:repeat(3,1fr)}
.templates-2{grid-template-columns:1.2fr .8fr}
@media (max-width: 1100px){ .cards-4{grid-template-columns:repeat(2,1fr)} .templates-2{grid-template-columns:1fr}}
@media (max-width: 800px){ .cards-3{grid-template-columns:repeat(2,1fr)} .templates-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 580px){ .cards-3, .cards-4, .templates-3{grid-template-columns:1fr}}

/* Basic Card / Post / Person */
.card, .post, .person, .mc{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow);
}
.card .icon{font-size:1.6rem; margin-bottom:8px}
.card h3{margin:0 0 6px}
.card p{margin:0 0 10px; color:var(--muted)}
.more{color:var(--brand); text-decoration:none; font-weight:700}

/* About */
.about{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
.about .ticks{margin:12px 0 18px; padding:0 18px}
.about .ticks li{margin:6px 0}
.stats{display:flex; gap:16px; flex-wrap:wrap}
.stat{background:#083127; border:1px solid var(--line); border-radius:14px; padding:12px 16px; min-width:120px; text-align:center}
.stat strong{display:block; font-size:1.6rem}
.about-media{position:relative}
.about-media .frame{position:absolute; inset:18px -18px -18px 18px; border:2px solid var(--brand); border-radius:18px; z-index:0}
.about-media img{position:relative; z-index:1; width:100%; height:auto; border-radius:18px; box-shadow:var(--shadow)}

/* Team */
.person .avatar{width:88px; height:88px; border-radius:50%; background:linear-gradient(145deg,#164236,#0a1f19); border:1px solid var(--line); margin-bottom:10px}

/* Posts */
.post .tag{display:inline-block; background:#083127; border:1px solid var(--line); color:var(--muted); border-radius:100px; padding:4px 10px; margin-bottom:8px}

/* Contact */
.contact{display:grid; grid-template-columns: .9fr 1.1fr; gap:26px; align-items:start}
.contact-list{margin:0; padding:0 18px}
.form{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.form label{display:block; font-weight:700; margin:10px 0}
.form input,.form textarea,.form select{width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line); margin-top:8px; background:#083127; color:var(--text)}
.form button{margin-top:8px}
@media (max-width:900px){ .about{grid-template-columns:1fr} .contact{grid-template-columns:1fr}}

/* Footer */
.footer{border-top:1px solid var(--line); background:#03140f; padding:22px 0; color:var(--muted)}
.footer-grid{display:grid; grid-template-columns: 1fr auto auto; gap:18px; align-items:center}
.footer-links{list-style:none; display:flex; gap:16px; margin:0; padding:0}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:var(--text)}
.social{display:flex; gap:12px}
.social a{color:var(--muted); text-decoration:none; border:1px solid var(--line); padding:6px 10px; border-radius:8px}
.social a:hover{color:var(--text)}

/* ---------- Image Templates (Masks & Frames) ---------- */

/* Frame: double border + inner gap */
.tmpl-frame{position:relative; border-radius:18px; overflow:hidden; background:#083127; border:1px solid var(--line); padding:10px}
.tmpl-frame::before{content:""; position:absolute; inset:8px; border:2px solid var(--brand); border-radius:14px; pointer-events:none}
.tmpl-frame img{display:block; width:100%; height:260px; object-fit:cover; border-radius:12px; filter:contrast(1.02)}

/* Arch mask using radial gradient */
.tmpl-arch{position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#083127; padding:10px}
.tmpl-arch img{width:100%; height:260px; object-fit:cover; --r: 220px; -webkit-mask: radial-gradient(220px 200px at 50% 0, #000 98%, transparent 100%) top/100% 70% no-repeat, linear-gradient(#000 0 0); mask: radial-gradient(220px 200px at 50% 0, #000 98%, transparent 100%) top/100% 70% no-repeat, linear-gradient(#000 0 0); border-radius:12px}

/* Cut corner (clip-path) */
.tmpl-cut{position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#083127}
.tmpl-cut img{width:100%; height:260px; object-fit:cover; clip-path:polygon(0 0, 85% 0, 100% 15%, 100% 100%, 0 100%)}

/* Diagonal big mask */
.tmpl-diag{position:relative; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#083127}
.tmpl-diag img{width:100%; height:100%; min-height:360px; object-fit:cover; clip-path:polygon(0 0,100% 0,100% 75%,0 100%)}

/* Masonry */
.masonry{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.m-item{border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#083127}
.m-item img{display:block; width:100%; height:100%; object-fit:cover}
.m1{grid-row:span 2; height:420px}
.m2{height:200px}
.m3{height:180px}
.m4{height:220px}

/* Motion cards */
.motion-cards .mc{overflow:hidden}
.mc-media{position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line); margin-bottom:10px}
.mc-media img{display:block; width:100%; height:220px; object-fit:cover; transform:scale(1); transition:transform .6s ease}
.mc:hover .mc-media img{transform:scale(1.06)}

/* Shimmer highlight */
.shimmer::after{content:""; position:absolute; inset:-20%; background:linear-gradient(120deg, transparent 45%, rgba(255,255,255,.13) 50%, transparent 55%); transform:translateX(-100%); animation:shimmer 3.5s ease-in-out infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* Hover tilt */
.hover-tilt{transform-style:preserve-3d; transition:transform .3s ease}
.hover-tilt:hover{transform:perspective(800px) rotateX(3deg) rotateY(-5deg)}

/* Float Y (subtle) */
.float-y{animation:floatY var(--dur, 5s) ease-in-out infinite alternate; transform:translateY(0)}
@keyframes floatY{to{transform:translateY(var(--amt, 10px))}}

/* ---------- Reveal on Scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); will-change:transform, opacity}
.reveal.in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease}

/* ---------- Accessibility: Reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  .float-y, .shimmer::after, .marquee-track{animation:none}
  .reveal{opacity:1; transform:none}
  .mc-media img{transform:none}
}

/* Utilities */
figcaption{color:var(--muted); font-size:.92rem; padding:8px 4px}




.brand-logo img {
  height: 56px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: brightness(1.1);
}

@media (max-width: 600px) {
  .brand-logo img {
    height: 48px;
  }
}


.social {
  display: flex;
  gap: 12px;
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #05261e;
  transition: all 0.3s ease;
}

.social a:hover {
  background: var(--brand);
}

.social img {
  width: 20px;
  height: 20px;
  filter: invert(84%) sepia(57%) saturate(650%) hue-rotate(10deg) brightness(103%) contrast(93%);
  /* يحوّل الأيقونة إلى ذهبي */
  transition: filter 0.3s ease;
}

.social a:hover img {
  filter: brightness(0) saturate(100%) invert(10%) sepia(56%) saturate(597%) hue-rotate(94deg) brightness(95%) contrast(88%);
  /* يصير لونها أخضر غامق لما تمر الماوس */
}


/* روابط التواصل (الهاتف والبريد) */
.contact-list a {
  color: var(--brand);        /* الذهبي من اللوقو */
  text-decoration: none;      /* يشيل الخط */
  font-weight: 600;
}

.contact-list a:hover {
  text-decoration: underline; /* يظهر خط بسيط عند التمرير */
  color: #f5e19c;             /* درجة أفتح للهوفر */
}






/* ====================== */
/*   Mobile Fixes (<=640) */
/* ====================== */
@media (max-width: 640px) {
  /* الحاوية والمسافات العامة */
  .container { padding-inline: 16px; }
  .section { padding: 48px 0; }
  .section-contrast { padding: 48px 0; }

  /* الهيدر والبراند */
  .header .nav { gap: 12px; }
  .brand-logo img { height: 32px; width: auto; }
  .brand-text strong { font-size: 14px; line-height: 1.1; }
  .brand-text small { font-size: 11px; opacity: .9; }

  /* القائمة */
  .menu a { padding: 10px 12px; font-size: 14px; }
  .btn { padding: 10px 14px; min-height: 44px; }

  /* الهيرو */
  .hero-inner { padding: 56px 0; }
  .hero-inner h1 { font-size: 22px; }
  .hero-inner p { font-size: 14px; max-width: 100%; }
  .hero-actions { gap: 10px; }

  /* الشبكات/الكروت */
  .grid, .cards-3, .cards-4, .templates-3 {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .card, .post { padding: 16px; }

  /* قسم من نحن */
  .about { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .about .frame { display: none; }
  .about-media img { width: 100%; height: auto; }

  /* نموذج الاتصال */
  .contact { grid-template-columns: 1fr; gap: 18px; }
  .contact .contact-info { margin-bottom: 6px; }
  .contact-list { gap: 8px; }
  .contact-list li { font-size: 14px; }

  .form { padding: 16px; border-radius: 14px; }
  .form label { font-size: 14px; }
  .form input,
  .form select,
  .form textarea {
    width: 100%;
    font-size: 16px;             /* يمنع الزوم في iOS */
    min-height: 44px;
    padding: 10px 12px;
  }
  .form textarea { min-height: 140px; }

  /* الفوتر */
  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }
  .footer .brand-logo img { height: 34px; }
  .footer-links {
    display: flex; gap: 16px;
    padding: 0; margin: 0; list-style: none;
    justify-content: flex-start;
  }
  .footer-links a { font-size: 14px; }

  /* أيقونات السوشيال */
  .social { display: flex; gap: 10px; flex-wrap: wrap; }
  .social a { width: 40px; height: 40px; border-radius: 10px; }
  .social img { width: 18px; height: 18px; }
}

/* تحسين التفاف نص الفوتر */
.footer p { max-width: 28ch; line-height: 1.8; }

/* منع تمرير أفقي */
html, body { overflow-x: hidden; }



/* الفوتر */
.footer {
  position: relative;
  background-color: #062019;     /* نفس درجات الهيدر */
  padding: 28px 0 48px;          /* مساحة للفوق وتحت عشان الزخرفة */
  color: #dfeee9;
  overflow: hidden;
}

.footer-wrap {
  position: relative;
  z-index: 1;                    /* فوق الزخرفة */
  display: flex;
  align-items: center;
  justify-content: center;       /* السوشال بالوسط */
  gap: 18px;
}

/* زر السوشال بشكل كبسّة مستديرة */
.social {
  display: flex;
  gap: 12px;
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(16, 60, 45, 0.8);
  border: 1px solid rgba(164, 255, 90, 0.25); /* أخضر فاتح ناعم */
  backdrop-filter: blur(2px);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.social a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(164, 255, 90, 0.15);
  background: rgba(16, 60, 45, 0.95);
}

.social img {
  width: 22px;
  height: 22px;
}

/* الزخرفة الخلفية للفوتر */
.footer-decor {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -94px;     /* تنزل شوي لتكون كزخرفة أسفل */
  width: 1200%;        /* تحكم بعرضها */
  max-width: 1200px;
  height: auto;
  opacity: 0.9;      /* خفيفة */
  pointer-events: none;
  z-index: 0;        /* وراء كل شيء */
}

/* استجابة */
@media (max-width: 768px) {
  .footer { padding: 22px 0 42px; }
  .footer-decor { width: 85%; bottom: -10px; }
  .social a { width: 42px; height: 42px; border-radius: 10px; }
  .social img { width: 20px; height: 20px; }
}