/* =========================================================
   DESIGN SYSTEM
   ========================================================= */

:root{

  --obsidian:#0D0D11;
  --charcoal:#22222A;

  --platinum:#DCDCE0;

  --gold:#FFE0A3;
  --ochre:#C29F68;

}

/* =========================================================
   GLOBAL
   ========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Montserrat', sans-serif;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--obsidian);
  color:var(--platinum);
  overflow-x:hidden;
  position:relative;
}

/* =========================================================
   PARTICLES
   ========================================================= */

.particles{

  position:fixed;
  inset:0;

  background-image:
  radial-gradient(var(--platinum) 1px, transparent 1px);

  background-size:50px 50px;

  opacity:0.03;

  z-index:-3;
}

/* =========================================================
   MOUSE GLOW
   ========================================================= */

.mouse-glow{

  position:fixed;

  width:320px;
  height:320px;

  border-radius:50%;

  background:
  radial-gradient(circle,
  rgba(255,224,163,0.08),
  transparent 72%);

  pointer-events:none;

  transform:translate(-50%,-50%);

  z-index:-2;
}

/* =========================================================
   NAVBAR
   ========================================================= */

header{

  position:fixed;

  top:0;
  width:100%;

  padding:26px 60px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  z-index:999;

  backdrop-filter:blur(14px);

  background:
  rgba(13,13,17,0.35);

  border-bottom:
  1px solid rgba(255,255,255,0.04);
}

.brand{

  font-size:22px;
  font-weight:600;

  letter-spacing:5px;

  color:var(--platinum);
}

/* =========================================================
   NAVIGATION
   ========================================================= */

nav{
  display:flex;
  gap:40px;
}

nav a{

  text-decoration:none;

  color:
  rgba(220,220,224,0.72);

  font-size:14px;

  letter-spacing:3px;

  position:relative;

  transition:0.35s ease;
}

nav a:hover{
  color:var(--gold);
}

nav a::after{

  content:'';

  position:absolute;

  left:0;
  bottom:-8px;

  width:0%;
  height:1px;

  background:var(--gold);

  transition:0.35s ease;
}

nav a:hover::after{
  width:100%;
}

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

.hero{

  min-height:100vh;

  position:relative;

  display:flex;
  justify-content:center;
  align-items:center;

  overflow:hidden;

  background:
  radial-gradient(
  circle at center,
  rgba(255,224,163,0.06),
  transparent 45%
  ),

  linear-gradient(
  to bottom,
  #07070B,
  #0D0D11
  );
}

/* =========================================================
   HORIZON
   ========================================================= */

.horizon-glow{

  position:absolute;

  top:38%;

  left:50%;

  transform:translateX(-50%);

  width:160%;
  height:700px;

  border-top:
  2px solid rgba(255,224,163,0.95);

  border-radius:50%;

  box-shadow:
  0 0 12px rgba(255,224,163,0.35),
  0 0 40px rgba(255,224,163,0.18),
  0 0 100px rgba(255,224,163,0.08);

  opacity:0.95;
}

/* =========================================================
   SUN
   ========================================================= */

.sun-core{

  position:absolute;

  top:37%;

  left:50%;

  transform:translate(-50%,-50%);

  width:18px;
  height:18px;

  border-radius:50%;

  background:var(--gold);

  box-shadow:
  0 0 20px rgba(255,224,163,1),
  0 0 50px rgba(255,224,163,0.8),
  0 0 120px rgba(255,224,163,0.35),
  0 0 220px rgba(255,224,163,0.15);

  animation:sunPulse 6s ease-in-out infinite;
}

@keyframes sunPulse{

  0%{
    opacity:0.8;
    transform:translate(-50%,-50%) scale(1);
  }

  50%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.08);
  }

  100%{
    opacity:0.8;
    transform:translate(-50%,-50%) scale(1);
  }

}

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

.hero-content{

  position:relative;

  z-index:5;

  text-align:center;

  margin-top:120px;
}

/* =========================================================
   LOGO
   ========================================================= */

.logo{

  font-size:9rem;

  font-weight:200;

  letter-spacing:24px;

  color:var(--platinum);

  margin-bottom:35px;
}

/* =========================================================
   SUBTITLE
   ========================================================= */

.subtitle{

  color:
  rgba(220,220,224,0.72);

  font-size:1.15rem;

  line-height:2.1;

  letter-spacing:9px;

  margin-bottom:60px;
}

/* =========================================================
   ARABIC
   ========================================================= */

.arabic{

  font-size:4.5rem;

  color:var(--ochre);

  font-weight:500;
}

/* =========================================================
   DIVIDER
   ========================================================= */

.divider{

  width:140px;
  height:1px;

  margin:100px auto;

  background:
  linear-gradient(
  to right,
  transparent,
  var(--ochre),
  transparent
  );

  opacity:0.5;
}

/* =========================================================
   ABOUT
   ========================================================= */

.about{

  padding:140px 20px;

  max-width:950px;

  margin:auto;

  text-align:center;
}

.about h2{

  font-size:3rem;
  font-weight:300;

  letter-spacing:7px;

  margin-bottom:32px;
}

.about p{

  color:
  rgba(220,220,224,0.72);

  line-height:2.2;

  font-size:1.05rem;
}

/* =========================================================
   ARTICLES
   ========================================================= */

.articles{

  width:86%;
  max-width:1280px;

  margin:120px auto;
}

.section-title{

  text-align:center;

  margin-bottom:75px;

  font-size:3rem;
  font-weight:300;

  letter-spacing:7px;
}

/* =========================================================
   GRID
   ========================================================= */

.article-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(290px,1fr));

  gap:38px;
}

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

.card{

  background:
  linear-gradient(
  145deg,
  rgba(255,255,255,0.03),
  rgba(255,255,255,0.015)
  );

  border:
  1px solid rgba(194,159,104,0.10);

  padding:38px;

  border-radius:28px;

  backdrop-filter:blur(20px);

  transition:0.45s ease;
}

.card:hover{

  transform:translateY(-10px);

  border:
  1px solid rgba(255,224,163,0.25);

  box-shadow:
  0 0 30px rgba(255,224,163,0.05);
}

.card a{
  text-decoration:none;
}

.card h2{

  color:var(--platinum);

  font-size:1.7rem;

  margin-bottom:20px;

  letter-spacing:2px;
}

.card p{

  color:
  rgba(220,220,224,0.60);

  line-height:1.9;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer{

  text-align:center;

  padding:45px;

  color:
  rgba(220,220,224,0.42);

  letter-spacing:2px;

  border-top:
  1px solid rgba(255,255,255,0.05);
}

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

@media(max-width:768px){

  header{
    padding:20px;
    flex-direction:column;
    gap:18px;
  }

  nav{
    gap:22px;
  }

  .logo{
    font-size:5rem;
    letter-spacing:10px;
  }

  .subtitle{
    font-size:0.82rem;
    letter-spacing:4px;
    line-height:2;
  }

  .arabic{
    font-size:2.8rem;
  }

  .horizon-glow{
    width:240%;
    top:40%;
  }

  .sun-core{
    top:39%;
  }

  .about h2,
  .section-title{
    font-size:2rem;
  }

}