/* منتزه البهيتة الوطني — الصفحة التعريفية (هوية فاتحة) */
:root{
  --bg:#faf5ea;        /* خلفية الهوية */
  --bg-soft:#f3e8dc;   /* أشكال الصخور الخلفية */
  --ink:#3a231a;       /* نص أساسي */
  --muted:#7b6659;
  --brown:#894330;     /* بني الهوية */
  --terra:#ac6146;     /* تيراكوتا */
  --tan:#bf7e52;
  --sand:#e1caa5;
  --green:#22503d;     /* أخضر الشجرة */
  --mint:#50bd90;
  --line:#89433030;
  --line-light:#ffffff30;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Tajawal,sans-serif;font-size:17px;line-height:1.7}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:2px solid var(--terra);outline-offset:7px}
h1,h2,h3,p{margin:0}
em{font-style:normal;color:var(--terra)}

/* الترويسة */
header{position:absolute;z-index:5;top:0;right:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:20px 5%;border-bottom:1px solid var(--line-light);gap:22px;color:#fff}
.brand img{width:170px;height:auto;display:block}
nav{display:flex;gap:36px;font-size:16px}
nav a:hover{color:var(--sand)}
.header-actions{display:flex;align-items:center;gap:10px;white-space:nowrap}
.nav-cta{border:1px solid #ffffff66;padding:9px 19px;font-size:15px;transition:background .2s,border-color .2s}
.nav-cta:hover{background:#ffffff1f}
.nav-cta span{margin-right:24px}
.nav-investor{background:var(--sand);border-color:var(--sand);color:#3a231a;font-weight:700}
.nav-investor:hover{background:#efdfc2;border-color:#efdfc2}

/* الواجهة */
.hero{min-height:790px;height:100svh;position:relative;isolation:isolate;overflow:hidden;color:#fff}
.hero-image,.hero-shade{position:absolute;width:100%;height:100%;inset:0;z-index:-2;object-fit:cover}
.hero-image{animation:drift 24s ease-in-out infinite alternate;object-position:center}
.hero-shade{z-index:-1;background:linear-gradient(0deg,#3a1d13e6 0%,transparent 42%),linear-gradient(270deg,#43200fef 0%,#5a2a1cb8 38%,#6b33224d 64%,#6b33220f 100%)}
.location{position:absolute;top:155px;right:6%;font-size:14px}
.location span{padding:0 12px;color:var(--sand)}
.hero-copy{position:absolute;right:10%;top:28%;max-width:900px}
.eyebrow,.small-title{color:var(--terra);font-size:16px;font-weight:500}
.hero .eyebrow{color:var(--sand)}
h1{font-size:clamp(3rem,6vw,6.5rem);line-height:1.35;font-weight:500;margin:14px 0 22px}
.hero em{color:var(--sand)}
.intro{font-size:22px;color:#f3e8dc;line-height:1.7;margin-bottom:30px}
.button{display:inline-flex;align-items:center;gap:40px;background:var(--green);color:#faf5ea;padding:13px 25px;transition:background .2s,transform .2s;font-weight:700}
.button:hover{background:#2c6650;transform:translateY(-3px)}
.hero .button{background:var(--sand);color:#3a231a}
.hero .button:hover{background:#efdfc2}
.hero-bottom{position:absolute;bottom:35px;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;font-size:14px}
.scroll{display:flex;align-items:center;gap:18px}
.scroll b{font-size:26px;font-weight:400;line-height:1}
.english{font-size:12px;letter-spacing:3px;color:var(--muted)}
.hero .english{color:#e1caa5cc}
.frame-count{position:absolute;left:5%;top:48%;font-size:24px;writing-mode:vertical-rl}
.frame-count span{color:#f3e8dc88;font-size:14px}

/* الأقسام */
.section{padding:95px 8%}
.section-label{display:flex;justify-content:space-between;color:var(--terra);border-top:1px solid var(--line);padding-top:23px;font-size:14px;margin-bottom:60px}
.story-grid,.invest-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%}
h2{font-size:clamp(2.8rem,4.7vw,5rem);font-weight:500;line-height:1.4;color:var(--brown)}
h2 em{color:var(--green)}
.story{position:relative;overflow:hidden;isolation:isolate}
/* شكل الصخور من دليل الهوية */
.story:before,.visit:before{content:"";position:absolute;z-index:-1;inset:auto -6% -8% auto;width:min(980px,90%);aspect-ratio:980/520;background:var(--bg-soft);clip-path:polygon(0 100%,7% 62%,30% 54%,36% 30%,58% 24%,62% 0,88% 6%,100% 100%,94% 100%,84% 22%,66% 16%,62% 38%,41% 43%,35% 68%,13% 74%,8% 100%);pointer-events:none}
.story-grid .large{font-size:27px;color:var(--ink);margin-bottom:24px;line-height:1.6}
.story-grid p,.invest-grid p{color:var(--muted)}
.text-link{display:inline-block;border-bottom:1px solid #89433066;padding:12px 0;margin-top:15px;transition:color .2s}
.text-link:hover{color:var(--terra)}
.text-link span{margin-right:40px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:65px;padding-top:35px;border-top:1px solid var(--line)}
.facts div{border-left:1px solid var(--line);padding-right:25px}
.facts div:first-child{padding-right:0}
.facts div:last-child{border:0}
.facts strong{display:block;font-size:25px;font-weight:500;color:var(--green)}
.facts span{color:var(--muted);font-size:15px}

.journey{padding-top:30px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}
.section-heading p{color:var(--muted);max-width:300px}
.experiences{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.experience{min-height:460px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background-size:auto 110%;background-repeat:no-repeat;transition:background-size .7s}
.experience:hover{background-size:auto 120%}
.gateway{background-image:linear-gradient(0deg,#2b140dee 0%,#3a1d1322 62%,#2b140d66 100%),url('assets/service-hub.jpg');background-position:62% center}
.village{background-image:linear-gradient(0deg,#2b140dee 0%,#3a1d1322 62%,#2b140d66 100%),url('assets/chalet.jpg');background-position:52% center}
.views{background-image:linear-gradient(0deg,#2b140dee 0%,#3a1d1322 62%,#2b140d66 100%),url('assets/hero.jpg');background-position:88% center}
.card-top{display:flex;justify-content:space-between;font-size:14px}
.card-top span:last-child{border:1px solid #ffffff88;padding:1px 12px;background:#2b140d55}
.experience h3{font-size:31px;line-height:1.45;font-weight:500;margin-bottom:14px}
.experience p{font-size:16px;color:#f3e8dc}

/* قسم الاستثمار — شريط أخضر من ألوان الهوية */
.investment{background:var(--green);color:#faf5ea}
.investment .section-label{color:var(--sand);border-color:var(--line-light)}
.investment .english{color:#e1caa599}
.investment h2{color:#faf5ea;margin:16px 0 22px}
.investment h2 em,.investment .small-title{color:var(--sand)}
.invest-grid p{color:#d5ddd2}
.invest-grid .button{margin-top:30px;background:var(--sand);color:#3a231a}
.invest-grid .button:hover{background:#efdfc2}
.opportunities>a{display:flex;gap:22px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line-light)}
.opportunities>a>span:last-child{margin-right:auto;font-size:28px;color:var(--sand);transition:transform .2s}
.opportunities>a:hover>span:last-child{transform:translate(-4px,-4px)}
.opp-num{color:var(--sand);font-size:14px}
.opportunities h3{font-size:26px;font-weight:500;transition:color .2s}
.opportunities p{font-size:15px}
.opportunities a:hover h3{color:var(--sand)}
.opportunities small{display:block;font-size:14px;color:#b9c6b9;margin-top:23px}

.visit{text-align:center;position:relative;overflow:hidden;isolation:isolate;padding:105px 8% 120px}
.visit:before{inset:auto auto -10% -8%;transform:scaleX(-1)}
.visit h2{font-size:clamp(3.5rem,6vw,6rem);margin:14px 0 20px}
.visit-actions{display:flex;justify-content:center;gap:35px;align-items:center;margin-top:25px}
.visit .text-link{margin:0}
.visit-note{color:var(--muted);font-size:14px;margin-top:30px}

footer{padding:45px 8% 20px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line)}
footer img{width:170px;height:auto;display:block}
.footer-links{display:flex;gap:26px;font-size:15px;color:var(--muted)}
.footer-links a:hover,.footer-bottom a:hover{color:var(--terra)}
.footer-bottom{width:100%;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;margin-top:25px;font-size:14px;color:var(--muted)}

.skip{position:fixed;z-index:20;top:-100px;background:var(--sand);color:#000;padding:10px}
.skip:focus{top:0}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .8s,transform .8s}
.reveal.visible{opacity:1;transform:none}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.08)}}

@media(max-width:1080px){
  header{padding-inline:3%}
  nav{gap:18px}
  .brand img{width:140px}
  .header-actions{gap:7px}
  .nav-cta{padding:8px 12px;font-size:13px}
  .nav-cta span{margin-right:10px}
}
@media(max-width:750px){
  header{padding:16px 6%;flex-wrap:wrap;gap:15px}
  .brand img{width:132px}
  .header-actions{margin-right:auto}
  nav{order:3;width:100%;justify-content:space-between;gap:14px;font-size:14px}
  .nav-cta{font-size:12px;padding:6px 10px}
  .nav-cta span{display:none}
  .hero{min-height:780px}
  .location{top:170px;font-size:12px}
  .hero-copy{right:7%;left:6%;top:31%}
  h1{font-size:clamp(2.2rem,7.4vw,4rem)}
  .intro{font-size:20px}
  .hero-bottom .english,.frame-count{display:none}
  .hero-image{object-position:70%}
  .hero-shade{background:linear-gradient(0deg,#3a1d13f2,transparent 70%),linear-gradient(270deg,#4a2317c4,#4a231760)}
  .section{padding:65px 7%}
  .section-label{margin-bottom:35px}
  .section-label .english{display:none}
  .story-grid,.invest-grid{grid-template-columns:1fr;gap:30px}
  .story-grid .large{font-size:23px}
  .facts{gap:15px}
  .facts div{padding-right:0}
  .facts strong{font-size:19px}
  .facts span{font-size:14px;display:block;padding-left:8px}
  .section-heading{display:block}
  .section-heading p{margin-top:15px}
  .experiences{grid-template-columns:1fr}
  .experience{min-height:370px;background-size:cover}
  .experience:hover{background-size:cover}
  .visit-actions{flex-direction:column;gap:15px}
  footer{padding:35px 7%}
  footer>span{font-size:15px}
  .footer-links{flex-wrap:wrap;gap:14px;font-size:14px}
  .footer-bottom{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}