/* =========================
   Global Layout
========================= */

.container{

width:90%;

max-width:var(--container-width);

margin:auto;

}



/* =========================
   Dynamic Header
========================= */


.header{

background:rgba(255,255,255,.95);

box-shadow:var(--shadow-sm);

position:sticky;

top:0;

z-index:1000;

transition:transform .3s ease,
height .3s ease;

backdrop-filter:blur(10px);

}



.header.hide{

transform:translateY(-100%);

}



.header-container{

display:flex;

align-items:center;

justify-content:space-between;

padding:8px 0;

}



/* Logo */

.logo{

display:flex;

align-items:center;

gap:10px;

}



.logo-mark{

width:45px;

height:45px;

border-radius:10px;

font-size:13px;

background:linear-gradient(135deg, var(--primary-color), var(--primary-dark));

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-weight:800;

letter-spacing:-.5px;

flex-shrink:0;

}



.logo-text{

font-size:17px;

font-weight:700;

max-width:230px;

line-height:1.4;

}



/* Navigation */

.nav{

gap:18px;

}



.nav a{

font-size:15px;

}


/* =========================
 Navigation
========================= */


.nav{

display:flex;

gap:25px;

align-items:center;

}



.nav a{

font-weight:600;

color:var(--text-color);

}



.nav a:hover{

color:var(--primary-color);

}



/* =========================
 Hero Section
========================= */


.hero{

background:

linear-gradient(
135deg,
var(--primary-color),
var(--primary-dark)
);

color:white;

padding:80px 0;
position:relative;
overflow:hidden;

}

/* توهج خلفي متحرك خلف الترويسة بألوان الهوية - مكثَّف ليكون
   واضحًا للعين مباشرة، لا مجرد تفصيل زخرفي خافت */
.hero::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 15% 25%, rgba(245,180,0,.45), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,.30), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(245,180,0,.25), transparent 50%);
  pointer-events:none;
  z-index:0;
  filter:blur(2px);
}
.hero > *{position:relative;z-index:1;}

@media (prefers-reduced-motion: no-preference){
  .hero::before{ animation:auroraDrift 7s ease-in-out infinite alternate; }
}

@keyframes auroraDrift{
  0%{ transform:translate(0,0) scale(1) rotate(0deg); }
  50%{ transform:translate(-6%,4%) scale(1.15) rotate(4deg); }
  100%{ transform:translate(4%,-3%) scale(1.1) rotate(-3deg); }
}



.hero h1{

color:white;

font-size:45px;

}



.hero p{

color:white;

font-size:20px;

max-width:700px;

}



/* =========================
 Sections
========================= */


.section{

padding:var(--space-xl) 0;

}



.section-title{

text-align:center;

margin-bottom:40px;

}



.section-title h2{

position:relative;

}



.section-title h2::after{

content:"";

display:block;

width:70px;

height:4px;

background:var(--secondary-color);

margin:15px auto;

}




/* =========================
 Grid System
========================= */


.grid{

display:grid;

gap:25px;

}



.grid-3{

grid-template-columns:
repeat(3,1fr);

}



.grid-2{

grid-template-columns:
repeat(2,1fr);

}



/* =========================
 Sidebar
========================= */


.sidebar{

background:var(--surface-color);

padding:20px;

border-radius:var(--radius-md);

box-shadow:var(--shadow-sm);

}



.sidebar a{

display:block;

padding:12px;

border-bottom:1px solid var(--border-color);

}




/* =========================
 Footer
========================= */


.footer{

background:var(--primary-dark);

color:white;

padding:40px 0;

margin-top:50px;

}


.footer p{

color:white;

text-align:center;

}



/* =========================
 Responsive
========================= */


@media(max-width:768px){


.header-container{

flex-direction:column;

gap:15px;

}



.nav{

flex-direction:column;

}



.grid-3,
.grid-2{

grid-template-columns:1fr;

}



.hero{

padding:50px 0;

}



.hero h1{

font-size:32px;

}


}
.nav a.active{color:var(--primary-color);font-weight:800;}