@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Noto+Naskh+Arabic:wght@400;600;700&family=Cinzel:wght@400;500;600;700&display=swap');

:root{
  --bg:            #03143D;
  --bg-soft:       #061D50;
  --primary:       #087BFF;
  --cyan:          #19D9FF;
  --green:         #20E86A;
  --heading:       #FFFFFF;
  --body-text:     #B8C7E6;

  --gradient-brand: linear-gradient(100deg, var(--primary) 0%, var(--cyan) 55%, var(--green) 100%);
  --glow-blue:  0 0 40px rgba(8,123,255,.35);
  --glow-cyan:  0 0 40px rgba(25,217,255,.30);
  --glow-green: 0 0 30px rgba(32,232,106,.25);

  --glass-bg:     rgba(6,29,80,.55);
  --glass-border: rgba(184,199,230,.14);

  --font-ar-display: 'Aref Ruqaa', serif;
  --font-ar-body:    'Noto Naskh Arabic', serif;
  --font-en-display: 'Cinzel', serif;

  --container: 1180px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --nav-h: 84px;
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(25,217,255,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(32,232,106,.08), transparent 55%),
    var(--bg);
  color:var(--body-text);
  font-family:var(--font-ar-body);
  line-height:1.8;
  direction:rtl;
  overflow-x:hidden;
  min-height:100vh;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, textarea{ font-family:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-ar-display);
  color:var(--heading);
  font-weight:700;
  line-height:1.35;
}

.eng{ font-family:var(--font-en-display); letter-spacing:.02em; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

.section{
  padding:110px 0;
  position:relative;
}

.section-tag{
  display:inline-block;
  font-family:var(--font-en-display);
  font-size:13px;
  color:var(--cyan);
  border:1px solid rgba(25,217,255,.35);
  padding:6px 18px;
  border-radius:999px;
  background:rgba(25,217,255,.06);
  margin-bottom:18px;
}

.section-title{
  font-size:clamp(30px,4vw,46px);
  margin-bottom:16px;
}

.section-lead{
  max-width:640px;
  font-size:17px;
  color:var(--body-text);
}

.grad-text{
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:999px;
  font-family:var(--font-ar-body);
  font-weight:700;
  font-size:15.5px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, filter .35s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--gradient-brand);
  color:#03143D;
  box-shadow:var(--glow-blue);
}
.btn-primary:hover{ transform:translateY(-3px); filter:brightness(1.08); box-shadow:0 12px 40px rgba(25,217,255,.4); }

.btn-ghost{
  border:1px solid var(--glass-border);
  color:var(--heading);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-3px); }

.glass-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

::-selection{ background:var(--cyan); color:#03143D; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--bg-soft); border-radius:10px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--primary); }

.divider-glow{
  height:1px;
  width:100%;
  background:linear-gradient(90deg, transparent, rgba(25,217,255,.5), transparent);
  border:none;
}

@media (max-width:900px){
  .section{ padding:80px 0; }
}

.page-hero{
  padding:calc(var(--nav-h) + 70px) 0 60px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:600px; height:400px;
  background:radial-gradient(circle, rgba(8,123,255,.18), transparent 70%);
  z-index:-1;
}
.page-hero-title{
  font-size:clamp(34px,5vw,52px);
  margin:14px 0 18px;
}
.page-hero .section-lead{ margin-inline:auto; }

@media (max-width:600px){
  .page-hero{ padding:calc(var(--nav-h) + 46px) 0 44px; }
}