@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800;900&display=swap');

:root{
  --forest:#0b2d24;
  --forest-2:#123d31;
  --forest-3:#1b5141;
  --gold:#d7ad68;
  --gold-light:#f0d49c;
  --ivory:#f7f5ef;
  --white:#ffffff;
  --ink:#10271f;
  --muted:#718079;
  --line:rgba(17,57,46,.10);
  --shadow:0 24px 70px rgba(6,31,24,.15);
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif !important;
  background:var(--ivory);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

::selection{
  background:var(--gold);
  color:var(--forest);
}

/* ===== HEADER ===== */

header{
  position:sticky;
  top:0;
  z-index:999;
  background:rgba(250,249,245,.92) !important;
  border-bottom:1px solid rgba(15,59,47,.07);
  box-shadow:0 6px 35px rgba(5,28,22,.05);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

header nav{
  min-height:92px;
}

header a{
  transition:
    color .25s ease,
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

header a:hover{
  transform:translateY(-1px);
}

header a[href*="cart"]{
  border-radius:999px !important;
  background:linear-gradient(135deg,var(--forest-2),var(--forest)) !important;
  color:#fff !important;
  box-shadow:0 12px 30px rgba(10,48,38,.17);
}

header a[href*="cart"]:hover{
  box-shadow:0 16px 36px rgba(10,48,38,.25);
  transform:translateY(-2px);
}

/* ===== HERO ===== */

.hero{
  position:relative;
  min-height:calc(100vh - 92px);
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  border-radius:0 0 34px 34px;
  box-shadow:0 25px 75px rgba(6,30,24,.18);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 77% 22%,
      rgba(218,178,106,.13),
      transparent 26%
    ),
    radial-gradient(
      circle at 90% 70%,
      rgba(255,255,255,.06),
      transparent 30%
    );
}

.hero::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-230px;
  top:-180px;
  border:1px solid rgba(229,193,128,.18);
  border-radius:50%;
  z-index:1;
  box-shadow:
    0 0 0 55px rgba(229,193,128,.025),
    0 0 0 110px rgba(229,193,128,.015);
  pointer-events:none;
}

.hero-shade{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(
      270deg,
      rgba(4,31,24,.97) 0%,
      rgba(7,46,36,.90) 33%,
      rgba(7,39,31,.65) 56%,
      rgba(6,18,15,.22) 78%,
      rgba(6,18,15,.08) 100%
    ) !important;
}

.hero-grid{
  position:relative;
  z-index:2;
  width:100%;
  min-height:calc(100vh - 92px);
  display:flex;
  align-items:center;
}

.hero-content{
  width:min(900px,100%);
  margin-inline-start:auto;
  padding-block:clamp(55px,8vw,120px);
}

.hero-kicker{
  width:max-content;
  max-width:100%;
  display:inline-flex !important;
  align-items:center;
  gap:12px;
  margin-bottom:25px;
  padding:11px 18px;
  border:1px solid rgba(232,197,131,.26);
  border-radius:999px;
  background:rgba(223,182,109,.09);
  color:var(--gold-light) !important;
  font-size:clamp(14px,1vw,18px);
  font-weight:800;
  letter-spacing:.2px;
  backdrop-filter:blur(12px);
}

.hero-kicker::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(216,174,104,.10);
}

.hero h1{
  max-width:960px;
  margin:0 0 26px;
  font-family:'Tajawal','Segoe UI',Tahoma,sans-serif !important;
  font-size:clamp(48px,6vw,102px) !important;
  line-height:1.03 !important;
  letter-spacing:-3px;
  font-weight:900 !important;
  color:#fff;
  text-wrap:balance;
  text-shadow:0 6px 30px rgba(0,0,0,.15);
}

.hero h1 em{
  font-style:normal;
  background:linear-gradient(
    120deg,
    #f4dba5 0%,
    #d6aa62 42%,
    #efce91 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}

.hero p{
  max-width:760px;
  margin:0 0 32px;
  color:rgba(255,255,255,.79) !important;
  font-size:clamp(17px,1.3vw,24px) !important;
  line-height:2 !important;
  font-weight:400;
}

/* ===== HERO BUTTONS ===== */

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}

.hero-actions .btn{
  min-height:58px;
  padding-inline:27px !important;
  border-radius:16px !important;
  font-size:16px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.hero-actions .btn:hover{
  transform:translateY(-3px);
}

.hero-actions .primary{
  border:0 !important;
  color:var(--forest) !important;
  background:
    linear-gradient(
      135deg,
      #f0d39b 0%,
      #d6aa61 55%,
      #c18e3f 100%
    ) !important;
  box-shadow:
    0 14px 32px rgba(203,153,75,.24);
}

.hero-actions .primary:hover{
  box-shadow:
    0 18px 42px rgba(203,153,75,.34);
}

.hero-actions .glass{
  color:#fff !important;
  border:1px solid rgba(255,255,255,.20) !important;
  background:rgba(255,255,255,.075) !important;
  backdrop-filter:blur(14px);
}

.hero-actions .glass:hover{
  background:rgba(255,255,255,.13) !important;
}

/* ===== METRICS ===== */

.hero-metrics{
  width:min(650px,100%);
  margin-top:34px;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.hero-metrics > div{
  min-height:92px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.095),
      rgba(255,255,255,.035)
    );
  backdrop-filter:blur(15px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.hero-metrics strong{
  display:block;
  margin-bottom:4px;
  color:#fff;
  font-size:clamp(24px,2vw,33px);
  font-weight:900;
}

.hero-metrics span{
  display:block;
  color:rgba(255,255,255,.65);
  font-size:14px;
}

/* ===== HERO NOTE ===== */

.hero-note{
  position:relative;
  width:min(570px,100%);
  margin-top:16px;
  padding:20px 22px !important;
  overflow:hidden;
  border-radius:20px !important;
  border:1px solid rgba(219,178,105,.18);
  background:
    linear-gradient(
      130deg,
      rgba(217,176,102,.13),
      rgba(255,255,255,.045)
    ) !important;
  backdrop-filter:blur(14px);
  box-shadow:0 18px 45px rgba(4,25,20,.10);
}

.hero-note::after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  left:-35px;
  bottom:-45px;
  border-radius:50%;
  background:rgba(215,173,104,.08);
}

.hero-note strong{
  color:#fff;
  font-size:17px;
}

.hero-note p{
  margin:7px 0 0 !important;
  font-size:14px !important;
  line-height:1.8 !important;
}

.note-number{
  color:var(--gold) !important;
  font-weight:900;
}

/* ===== GENERAL SECTIONS ===== */

.section{
  padding-block:clamp(68px,7vw,115px);
}

.section-head h2{
  font-size:clamp(32px,4vw,58px);
  letter-spacing:-1.5px;
  font-weight:900;
  color:var(--forest);
}

.kicker{
  color:#b48742;
  font-weight:800;
}

.card,
.admin-card,
.product-card,
.research-card,
.museum-card{
  border-radius:22px !important;
  border:1px solid var(--line) !important;
  box-shadow:0 15px 45px rgba(11,44,35,.07);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.card:hover,
.product-card:hover,
.research-card:hover,
.museum-card:hover{
  transform:translateY(-6px);
  border-color:rgba(188,142,70,.28) !important;
  box-shadow:0 24px 60px rgba(11,44,35,.12);
}

/* ===== RESPONSIVE ===== */

@media (max-width:900px){

  header nav{
    min-height:76px;
  }

  .hero{
    min-height:auto;
    border-radius:0 0 24px 24px;
  }

  .hero-grid{
    min-height:760px;
  }

  .hero-content{
    padding-block:70px;
  }

  .hero h1{
    font-size:clamp(46px,11vw,76px) !important;
    letter-spacing:-2px;
  }

  .hero p{
    font-size:17px !important;
  }

  .hero-metrics{
    grid-template-columns:1fr 1fr;
  }

}

@media (max-width:600px){

  .hero-grid{
    min-height:720px;
  }

  .hero-content{
    padding-block:55px;
  }

  .hero h1{
    font-size:clamp(40px,12vw,62px) !important;
    line-height:1.08 !important;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .hero-actions .btn{
    width:100%;
  }

  .hero-metrics{
    grid-template-columns:1fr 1fr;
  }

  .hero-metrics > div{
    min-height:82px;
  }

}


/* =========================================================
   PREMIUM HOME V2
   ========================================================= */

body:has(.hero){
    background:
        radial-gradient(circle at 90% 10%,rgba(204,161,91,.08),transparent 25%),
        #f6f4ef;
}


/* ===== HERO REFINEMENT ===== */

body:has(.hero) .hero{
    min-height:720px !important;
    border-radius:0 0 38px 38px;
    box-shadow:
        0 30px 80px rgba(7,35,27,.18),
        inset 0 -1px 0 rgba(255,255,255,.08);
}

body:has(.hero) .hero-grid{
    min-height:720px !important;
}

body:has(.hero) .hero-content{
    width:min(780px,100%) !important;
    padding-top:75px !important;
    padding-bottom:75px !important;
}


/* العنوان أصغر وأكثر أناقة */

body:has(.hero) .hero h1{
    max-width:780px !important;
    font-size:clamp(42px,4.25vw,72px) !important;
    line-height:1.15 !important;
    letter-spacing:-1.8px !important;
    font-weight:900 !important;
    margin-bottom:25px !important;
    text-wrap:balance;
}

body:has(.hero) .hero h1 em{
    background:
        linear-gradient(
            115deg,
            #f4d79e 0%,
            #d9ad66 38%,
            #efcb87 65%,
            #c99243 100%
        ) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:transparent !important;
}


/* النص الوصفي */

body:has(.hero) .hero p{
    max-width:700px !important;
    font-size:clamp(16px,1.15vw,20px) !important;
    line-height:2 !important;
    color:rgba(255,255,255,.77) !important;
    margin-bottom:27px !important;
}


/* الكلمة الصغيرة أعلى الهيرو */

body:has(.hero) .hero-kicker{
    padding:10px 17px !important;
    border-radius:999px !important;
    font-size:14px !important;
    background:
        linear-gradient(
            135deg,
            rgba(219,177,104,.14),
            rgba(255,255,255,.04)
        ) !important;
    border:1px solid rgba(235,202,143,.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 30px rgba(0,0,0,.08);
}


/* طبقة الصورة */

body:has(.hero) .hero-shade{
    background:
        linear-gradient(
            270deg,
            rgba(3,31,23,.97) 0%,
            rgba(5,47,35,.90) 32%,
            rgba(6,42,32,.69) 54%,
            rgba(4,22,17,.25) 77%,
            rgba(2,12,9,.04) 100%
        ) !important;
}


/* ===== BUTTONS ===== */

body:has(.hero) .hero-actions{
    gap:13px !important;
}

body:has(.hero) .hero-actions .btn{
    min-height:54px !important;
    padding:0 25px !important;
    border-radius:15px !important;
    font-size:15px !important;
    font-weight:800 !important;
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

body:has(.hero) .hero-actions .btn::before{
    content:"";
    position:absolute;
    top:0;
    right:-130%;
    width:80%;
    height:100%;
    transform:skewX(-25deg);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.20),
            transparent
        );
    transition:right .55s ease;
    z-index:-1;
}

body:has(.hero) .hero-actions .btn:hover::before{
    right:150%;
}

body:has(.hero) .hero-actions .btn:hover{
    transform:translateY(-3px) scale(1.015);
}


/* ===== METRICS CARDS ===== */

body:has(.hero) .hero-metrics{
    gap:14px !important;
    margin-top:32px !important;
}

body:has(.hero) .hero-metrics > div{
    position:relative;
    overflow:hidden;
    min-height:92px !important;
    padding:17px 20px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.115),
            rgba(255,255,255,.035)
        ) !important;

    border:
        1px solid rgba(255,255,255,.13) !important;

    border-radius:20px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 18px 40px rgba(0,0,0,.08);

    backdrop-filter:blur(18px);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

    animation:
        premiumCardRise .75s cubic-bezier(.2,.8,.2,1) both;
}

body:has(.hero) .hero-metrics > div:nth-child(2){
    animation-delay:.08s;
}

body:has(.hero) .hero-metrics > div:nth-child(3){
    animation-delay:.16s;
}

body:has(.hero) .hero-metrics > div::before{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    top:-75px;
    left:-65px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(221,180,104,.20),
            transparent 67%
        );
    opacity:0;
    transition:
        opacity .35s ease,
        transform .45s ease;
}

body:has(.hero) .hero-metrics > div:hover{
    transform:translateY(-7px);
    border-color:rgba(232,197,132,.36) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.16),
            rgba(221,180,104,.06)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 26px 50px rgba(0,0,0,.15);
}

body:has(.hero) .hero-metrics > div:hover::before{
    opacity:1;
    transform:scale(1.25);
}

body:has(.hero) .hero-metrics strong{
    font-size:27px !important;
    font-weight:900 !important;
    letter-spacing:-.5px;
}

body:has(.hero) .hero-metrics span{
    color:rgba(255,255,255,.63) !important;
    font-size:13px !important;
}


/* ===== HERO NOTE ===== */

body:has(.hero) .hero-note{
    border-radius:21px !important;
    border:1px solid rgba(224,185,112,.20) !important;

    background:
        linear-gradient(
            135deg,
            rgba(207,159,81,.13),
            rgba(255,255,255,.045)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 20px 45px rgba(0,0,0,.08);

    transition:
        transform .35s ease,
        border-color .35s ease;
}

body:has(.hero) .hero-note:hover{
    transform:translateY(-5px);
    border-color:rgba(230,193,126,.38) !important;
}


/* =========================================================
   HOME SECTIONS / CARDS
   ========================================================= */

body:has(.hero) .section{
    position:relative;
}

body:has(.hero) .section-head{
    margin-bottom:36px !important;
}

body:has(.hero) .section-head h2{
    font-size:clamp(30px,3.1vw,48px) !important;
    line-height:1.25 !important;
    letter-spacing:-1.2px !important;
}

body:has(.hero) .section-head p{
    color:#78837e;
    line-height:1.9;
}


/* جميع البطاقات في الرئيسية */

body:has(.hero) .card,
body:has(.hero) .product-card,
body:has(.hero) .research-card,
body:has(.hero) .museum-card{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(250,248,243,.94)
        ) !important;

    border:
        1px solid rgba(14,58,46,.09) !important;

    border-radius:26px !important;

    box-shadow:
        0 15px 40px rgba(9,44,34,.055),
        0 2px 7px rgba(9,44,34,.035);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;

    animation:
        premiumCardRise .8s cubic-bezier(.2,.8,.2,1) both;
}


/* خط ذهبي صغير أعلى البطاقة */

body:has(.hero) .card::before,
body:has(.hero) .product-card::before,
body:has(.hero) .research-card::before,
body:has(.hero) .museum-card::before{
    content:"";
    position:absolute;
    top:0;
    right:28px;
    width:0;
    height:3px;

    border-radius:0 0 5px 5px;

    background:
        linear-gradient(
            90deg,
            #c58d3c,
            #e3bd78
        );

    transition:width .4s ease;
}


/* لمعة خفيفة */

body:has(.hero) .card::after,
body:has(.hero) .product-card::after,
body:has(.hero) .research-card::after,
body:has(.hero) .museum-card::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    top:-120px;
    left:-110px;
    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(214,171,98,.14),
            transparent 65%
        );

    opacity:0;
    transition:
        opacity .4s ease,
        transform .5s ease;

    pointer-events:none;
}

body:has(.hero) .card:hover,
body:has(.hero) .product-card:hover,
body:has(.hero) .research-card:hover,
body:has(.hero) .museum-card:hover{
    transform:
        translateY(-10px)
        scale(1.012);

    border-color:
        rgba(194,144,67,.28) !important;

    box-shadow:
        0 28px 65px rgba(9,44,34,.115),
        0 5px 15px rgba(9,44,34,.055);
}

body:has(.hero) .card:hover::before,
body:has(.hero) .product-card:hover::before,
body:has(.hero) .research-card:hover::before,
body:has(.hero) .museum-card:hover::before{
    width:68px;
}

body:has(.hero) .card:hover::after,
body:has(.hero) .product-card:hover::after,
body:has(.hero) .research-card:hover::after,
body:has(.hero) .museum-card:hover::after{
    opacity:1;
    transform:scale(1.35);
}


/* صور البطاقات */

body:has(.hero) .product-card img,
body:has(.hero) .research-card img,
body:has(.hero) .museum-card img{
    transition:
        transform .7s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;
}

body:has(.hero) .product-card:hover img,
body:has(.hero) .research-card:hover img,
body:has(.hero) .museum-card:hover img{
    transform:scale(1.055);
    filter:saturate(1.07) contrast(1.03);
}


/* ===== ANIMATIONS ===== */

@keyframes premiumCardRise{

    from{
        opacity:0;
        transform:translateY(24px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes premiumHeroIn{

    from{
        opacity:0;
        transform:translateY(20px);
        filter:blur(4px);
    }

    to{
        opacity:1;
        transform:translateY(0);
        filter:blur(0);
    }

}

body:has(.hero) .hero-kicker{
    animation:
        premiumHeroIn .65s ease .05s both;
}

body:has(.hero) .hero h1{
    animation:
        premiumHeroIn .8s cubic-bezier(.2,.8,.2,1) .10s both;
}

body:has(.hero) .hero p{
    animation:
        premiumHeroIn .8s cubic-bezier(.2,.8,.2,1) .20s both;
}

body:has(.hero) .hero-actions{
    animation:
        premiumHeroIn .8s cubic-bezier(.2,.8,.2,1) .30s both;
}


/* ===== MOBILE ===== */

@media(max-width:900px){

    body:has(.hero) .hero,
    body:has(.hero) .hero-grid{
        min-height:680px !important;
    }

    body:has(.hero) .hero-content{
        padding-top:58px !important;
        padding-bottom:58px !important;
    }

    body:has(.hero) .hero h1{
        font-size:clamp(38px,8vw,56px) !important;
        line-height:1.18 !important;
    }

}


@media(max-width:600px){

    body:has(.hero) .hero,
    body:has(.hero) .hero-grid{
        min-height:640px !important;
    }

    body:has(.hero) .hero h1{
        font-size:clamp(34px,10.5vw,48px) !important;
        letter-spacing:-1px !important;
    }

    body:has(.hero) .hero p{
        font-size:15px !important;
        line-height:1.9 !important;
    }

    body:has(.hero) .hero-metrics{
        gap:9px !important;
    }

    body:has(.hero) .hero-metrics > div{
        min-height:80px !important;
        padding:13px !important;
        border-radius:16px !important;
    }

    body:has(.hero) .hero-metrics strong{
        font-size:22px !important;
    }

}


/* احترام إعداد تقليل الحركة */

@media(prefers-reduced-motion:reduce){

    body:has(.hero) *,
    body:has(.hero) *::before,
    body:has(.hero) *::after{
        animation:none !important;
        transition:none !important;
    }

}