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

:root {
  --bg:        #F7F3EE;
  --bg2:       #EFE8DE;
  --card:      #FFFFFF;
  --ink:       #1F1F1F;
  --ink2:      #5E5E5E;
  --muted:     #7D7D7D;
  --border:    #E5DED4;
  --accent:    #8B6F47;
  --accent2:   #6D7A5C;
  --accent-bg: rgba(139,111,71,0.07);
  --accent-line: rgba(139,111,71,0.22);
  --radius:    16px;
  --radius-btn:14px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans Arabic','Tajawal','Noto Sans Arabic',sans-serif;
  font-size:18px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}

/* ── NAV ── */
nav{
  position:fixed;top:0;right:0;left:0;z-index:99;
  height:68px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 52px;
  background:rgba(247,243,238,0.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.nav-links{display:flex;gap:4px;list-style:none;align-items:center;}
.nav-links a{
  font-size:15px;font-weight:500;
  color:var(--muted);text-decoration:none;
  padding:7px 14px;border-radius:10px;
  transition:all .2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--ink);background:var(--bg2);}
.nav-end{display:flex;align-items:center;gap:10px;}
.nav-login{
  font-size:14px;font-weight:600;
  color:var(--muted);text-decoration:none;
  padding:7px 14px;border-radius:10px;
  transition:all .2s;
}
.nav-login:hover{color:var(--ink);background:var(--bg2);}
.nav-cta{
  font-size:14px;font-weight:700;
  color:#fff;background:var(--accent);
  text-decoration:none;
  padding:8px 18px;border-radius:10px;
  transition:opacity .2s;
}
.nav-cta:hover{opacity:.88;}

/* ── AUTH NAV ── */
.auth-nav{
  height:68px;
  display:flex;align-items:center;
  padding:0 52px;
  border-bottom:1px solid var(--border);
  background:rgba(247,243,238,0.96);
}
@media(max-width:700px){.auth-nav{padding:0 18px;}}

/* ── BUTTONS ── */
.btn-primary{
  display:inline-block;
  background:var(--ink);color:var(--bg);
  font-size:16px;font-weight:600;
  padding:16px 38px;
  border-radius:var(--radius-btn);
  text-decoration:none;
  letter-spacing:.02em;
  transition:opacity .25s;
  font-family:'IBM Plex Sans Arabic','Tajawal',sans-serif;
}
.btn-primary:hover{opacity:.82;}

.btn-ghost{
  display:inline-block;
  background:transparent;color:var(--ink);
  font-size:16px;font-weight:600;
  padding:16px 38px;
  border-radius:var(--radius-btn);
  border:1px solid var(--border);
  text-decoration:none;
  transition:border-color .25s;
  font-family:'IBM Plex Sans Arabic','Tajawal',sans-serif;
}
.btn-ghost:hover{border-color:var(--ink2);}

.btn-accent{
  display:inline-block;
  background:var(--accent);color:#fff;
  font-size:16px;font-weight:600;
  padding:16px 38px;
  border-radius:var(--radius-btn);
  text-decoration:none;
  transition:opacity .25s;
  font-family:'IBM Plex Sans Arabic','Tajawal',sans-serif;
}
.btn-accent:hover{opacity:.88;}

/* ── SECTION ── */
.sec{
  padding:120px 24px;
  max-width:1200px;
  margin:0 auto;
}

.text-block{max-width:700px;}

.sec-tag{
  font-size:12px;font-weight:600;
  letter-spacing:.03em;
  color:var(--accent);
  text-transform:uppercase;
  margin-bottom:20px;
  display:flex;align-items:center;gap:14px;
}
.sec-tag::after{content:'';flex:1;height:1px;background:var(--border);}

.sec-title{
  font-size:40px;font-weight:700;
  line-height:1.15;letter-spacing:-.02em;
  margin-bottom:22px;color:var(--ink);
}
.sec-title em{font-style:normal;color:var(--accent);}

.sec-body{
  font-size:18px;color:var(--ink2);
  font-weight:400;max-width:700px;
  line-height:1.9;
}

.sec-divider{border:none;border-top:1px solid var(--border);}

/* ── FOOTER ── */
footer{
  border-top:1px solid var(--border);
  background:var(--bg2);
  padding:28px 52px;
  display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.footer-brand{font-size:18px;opacity:.5;}
.footer-links{display:flex;gap:24px;list-style:none;}
.footer-links a{font-size:14px;color:var(--muted);text-decoration:none;transition:color .2s;}
.footer-links a:hover{color:var(--ink2);}
.footer-copy{font-size:13px;color:var(--muted);}
.f-social{display:flex;align-items:center;gap:10px;}
.f-social-link{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;color:var(--muted);border:1px solid var(--border);transition:.2s;}
.f-social-link:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-bg);}
@media(max-width:700px){
  footer{flex-direction:column;padding:24px 18px;gap:14px;text-align:center;}
  .footer-links{flex-wrap:wrap;justify-content:center;}
}

/* ── ANIMATIONS ── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes pulse{
  0%,100%{opacity:.2;}50%{opacity:.7;}
}

.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── BRAND ── */
.brand{font-family:"Courier New",Courier,monospace;font-size:26px;font-weight:700;color:var(--ink);text-decoration:none;}
.brand span{color:var(--accent);}
.portal-logo{font-size:26px;}

/* ── MOBILE ── */
@media(max-width:700px){
  nav{padding:0 18px;}
  .nav-links{display:none;}
  .nav-login{display:none;}
  .sec{padding:80px 20px;}
  .sec-title{font-size:28px;}
}