/* AVA DECO – Minimal, élégant, responsive */
:root{
  --bg:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#b08a3c; 
}

/* ==== Base ==== */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
  background:var(--bg); color:var(--ink);
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }

/* ==== Layout ==== */
.container{ max-width:1120px; margin:0 auto; padding:0 16px }
.section{ padding:56px 0 }
.section--tight{ padding:28px 0 }

/* ==== Header / Nav ==== */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.header .nav{
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px; padding:6px 0; 
}
.nav__links{ display:flex; gap:18px; align-items:center }
.nav__links a{ padding:8px 10px; border-radius:12px; color:#374151 }
.nav__links a.active, .nav__links a:hover{ color:var(--accent) }
.nav__toggle{ display:none; background:none; border:1px solid var(--line); padding:8px 12px; border-radius:10px }

/* Brand / Logo */
.brand{ display:flex; align-items:center }
.brand__link{ display:inline-flex; align-items:center; gap:10px }
.brand__logo{ height:90px; width:auto; display:block }   /* Desktop */
@media (max-width:1024px){ .brand__logo{ height:80px } } /* Laptop/Tablet */
@media (max-width:767px) { .brand__logo{ height:60px } } /* Mobile */

/* ==== Hero ==== */
.hero{ padding:64px 0 }
.hero--soft{ background:linear-gradient(180deg,#fff,#fff7e6) }
.hero__layout{ display:grid; gap:28px; grid-template-columns:1fr }
.hero__text{ display:flex; flex-direction:column; gap:16px }
.eyebrow{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:#6b7280 }
.h1{ font-size:clamp(28px,5vw,44px); line-height:1.1; margin:0 }
.subtitle{ color:var(--muted); margin:0 }

/* Hero image (مع هوفر ناعم) */
.hero__photo{ overflow:hidden; border-radius:24px }
.hero__photo img{
  width:100%; max-width:560px; height:auto;
  border-radius:24px; object-fit:cover; margin:0 auto;
  transition:transform .5s ease;
}
.hero__photo:hover img{ transform:scale(1.05) }
@media (max-width:767px){ .hero__photo img{ max-width:90% } }

/* ==== Cards / Buttons ==== */
.card{
  border:1px solid var(--line); border-radius:22px; padding:20px;
  background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition:box-shadow .3s ease, transform .3s ease;
}
.card:hover{ box-shadow:0 8px 30px rgba(0,0,0,0.07); transform:translateY(-5px) }
.card h2{ color:var(--accent); margin:0 0 10px }
.small{ font-size:.9rem; color:#6b7280 }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:16px; border:1px solid var(--line); cursor:pointer
}
.btn.primary{ background:var(--accent); border-color:transparent; color:#fff }
.btn.ghost{ background:#fff; color:#111827 }
.cta{ display:inline-block; margin-top:10px; padding:10px 16px; border-radius:16px; border:1px solid var(--line) }
.cta.ghost{ margin-left:8px }

/* ==== Forms ==== */
.form input,.form textarea{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:12px; outline:none
}
.form input:focus,.form textarea:focus{
  box-shadow:0 0 0 3px rgba(176,138,60,.25); border-color:#e5d2a4
}
.form .row{ display:grid; gap:12px }
.alert{
  padding:10px 12px; border:1px dashed #eab308; border-radius:10px; background:#fffbeb; color:#854d0e
}

/* ==== Footer (متمركز في كل الصفحات) ==== */
footer.footer{ border-top:1px solid var(--line) }
.footer .inner{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center;
  color:#6b7280;
}

/* ==== Animations: reveal ==== */
@keyframes fadeSlideUp{ 0%{opacity:0;transform:translateY(40px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes fadeSlideDown{ 0%{opacity:0;transform:translateY(-30px)} 100%{opacity:1;transform:translateY(0)} }
.reveal{ opacity:0; transform:translateY(40px); will-change:transform,opacity }
.reveal.in{ animation:fadeSlideUp 1s ease-out forwards }
.reveal-down{ opacity:0; transform:translateY(-30px); will-change:transform,opacity }
.reveal-down.in{ animation:fadeSlideDown 1s ease-out forwards }
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-down{ opacity:1; transform:none; animation:none }
}

/* ==== Lists with icons (نسخة واحدة نظيفة) ==== */
/* HTML: <ul class="list-ico"><li data-ico="home">… */
.list-ico{
  list-style:none; padding:0; margin:0;
  display:grid; gap:12px;
}
.list-ico li{
  /* تحكّم سريع في الأحجام */
  --ico-size:32px;   /* قطر الدائرة */
  --ico-gap:12px;    /* المسافة مع النص */
  --ico-inner:16px;  /* حجم الأيقونة داخل الدائرة */
  --ico-url:url('../images/icons/check.svg'); /* fallback */

  position:relative;
  padding-left:calc(var(--ico-size) + var(--ico-gap));
  line-height:1.7;
}

/* دائرة محيطة بحدّ ذهبي خفيف */
.list-ico li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:var(--ico-size); height:var(--ico-size); border-radius:9999px; background:#fff;
  border:1px solid rgba(176,138,60,.50);
  box-shadow:0 1px 2px rgba(0,0,0,.05), inset 0 0 0 2px rgba(176,138,60,.12);
}

/* الأيقونة نفسها باللون الذهبي (نفس var(--accent)) */
.list-ico li::after{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%) scale(.92);
  width:var(--ico-size); height:var(--ico-size);
  background-color:var(--accent);
  -webkit-mask:var(--ico-url) center/var(--ico-inner) var(--ico-inner) no-repeat;
          mask:var(--ico-url) center/var(--ico-inner) var(--ico-inner) no-repeat;
  transition:transform .25s ease, filter .25s ease;
}
.list-ico li:hover::after{ transform:translateY(-50%) scale(1.04); filter:saturate(1.05) }

/* ربط data-ico بالأيقونات (المسارات نسبةً لـ css/) */
.list-ico li[data-ico="home"]    { --ico-url:url('../images/home.svg') }
.list-ico li[data-ico="graph"]   { --ico-url:url('../images/graph.svg') }
.list-ico li[data-ico="palette"] { --ico-url:url('../images/palette.svg') }
.list-ico li[data-ico="office"]  { --ico-url:url('../images/office.svg') }
.list-ico li[data-ico="plan"]    { --ico-url:url('../images/plan.svg') }
.list-ico li[data-ico="sofa"]    { --ico-url:url('../images/sofa.svg') }
.list-ico li[data-ico="truck"]   { --ico-url:url('../images/truck.svg') }
.list-ico li[data-ico="staging"] { --ico-url:url('../images/staging.svg') }

/* Stagger لطيف عند الظهور مع .reveal.in */
.card .list-ico li{ opacity:0; transform:translateY(6px); transition:.28s ease }
.card.reveal.in .list-ico li{ opacity:1; transform:none }
.card.reveal.in .list-ico li:nth-child(1){ transition-delay:.05s }
.card.reveal.in .list-ico li:nth-child(2){ transition-delay:.10s }
.card.reveal.in .list-ico li:nth-child(3){ transition-delay:.15s }
.card.reveal.in .list-ico li:nth-child(4){ transition-delay:.20s }

/* (اختياري) ستايل بديل: list-chic */
.list-chic{ list-style:none; padding-left:0; margin:0; display:grid; gap:12px }
.list-chic li{ position:relative; padding-left:54px; line-height:1.75 }
.list-chic li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:9999px; background:#fff;
  border:1px solid rgba(176,138,60,.45);
  box-shadow:0 1px 2px rgba(0,0,0,.05), inset 0 0 0 2px rgba(176,138,60,.10);
}
.list-chic li::after{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:36px; height:36px; background:var(--accent);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10"><path fill="%23000" d="M5.3 9.3L0.9 5.1l1.5-1.6 2.8 2.7L11.7 0.7 13.1 2z"/></svg>') center/14px 10px no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10"><path fill="%23000" d="M5.3 9.3L0.9 5.1l1.5-1.6 2.8 2.7L11.7 0.7 13.1 2z"/></svg>') center/14px 10px no-repeat;
  opacity:.95;
}

/* ==== Grids / Responsive ==== */
.grid{ display:grid; gap:20px }
.columns-2{ grid-template-columns:1fr }
.grid-services{ display:grid; gap:16px }
.service{ transition:.2s; border:1px solid var(--line); border-radius:22px; padding:18px }
.service:hover{ box-shadow:0 6px 24px rgba(0,0,0,.06); border-color:rgba(176,138,60,.4) }

.testimonials{ display:grid; gap:16px }
blockquote{ margin:0; color:#374151 }

.follow a{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:12px; padding:8px 12px
}

/* Nav responsive */
@media (min-width:768px){
  .nav__toggle{ display:none }
  .hero__layout{ grid-template-columns:1fr 1fr }
  .columns-2{ grid-template-columns:1fr 1fr }
  .grid-services{ grid-template-columns:repeat(4,1fr) }
  .testimonials{ grid-template-columns:repeat(3,1fr) }
}
@media (max-width:767px){
  .nav__toggle{ display:inline-block }
  .nav__links{
    display:none; position:absolute; top:64px; right:16px; background:#fff;
    border:1px solid var(--line); border-radius:16px; padding:8px 10px;
    flex-direction:column; gap:6px; min-width:180px;
    box-shadow:0 10px 30px rgba(0,0,0,.08)
  }
  .nav__links.open{ display:flex }
}