/* ========
   ROOT VARS
   simple rakh… kal ko maintain kar paun.
   ========== */
:root{
  --bg-color:#f7f9fb;
  --text-color:#222;
  --primary:#0066ff;
  --accent:#14b8a6;          /* header & footer — meri pehchaan */
  --button-color:#111051;    /* login/signup — ziddi purple-blue */
  --card-gradient:linear-gradient(135deg,#ffffff,#f0f4ff);
  --card-gradient-dark:linear-gradient(135deg,#1f2937,#374151);

  /* dark mode ke sapne… */
  --dark-bg:#111827;
  --dark-text:#f0f0f0;
  --dark-border:#333;
}

/* thoda sa saaf, thoda sa sacha */
body{
  margin:0;
  font-family:"Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg-color);
  color:var(--text-color);
  transition:background .3s, color .3s;
  line-height:1.6;
}

/* ==========================
   HEADER
   is stripe me meri mehnat ka rang hai.
   =================== */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 30px;
  background:var(--accent);
  border-bottom:1px solid #0e9486;
  position:sticky; top:0; z-index:100;
}
.logo{font-size:1.4rem; font-weight:700; color:#fff;}
.logo span{color:#111;}

.nav-links a{
  margin:0 12px; text-decoration:none; color:#fff;
  font-size:.95rem; font-weight:500;
}

/* ========
   BUTTONS
   hover pe thoda utho, par girna nahin.
   =================== */
.btn{
  padding:6px 14px; border:none; background:var(--button-color);
  color:#fff; border-radius:4px; font-size:.85rem; text-decoration:none;
  cursor:pointer; transition:all .25s ease-in-out; /* smooth hover */
}
.btn.small{padding:4px 10px; font-size:.8rem;}
.btn:hover{
  background:#0a0a3c;
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 6px 14px rgba(0,0,0,.2);
}

/* moon/sun… bas toggle kar, jaise life ki roshni */
#modeToggle{
  background:none; border:none; font-size:1.2rem; cursor:pointer; color:#fff;
}

/* =================
   HERO
   yahan awaaz seedhi, lafz kam.
   ================ */
.hero{text-align:center; padding:50px 20px;}
.hero h1{font-size:2.2rem; margin-bottom:10px;}
.hero p{font-size:1rem; max-width:600px; margin:auto; color:#444;}

/* ================
   TOOLS GRID
   har card me ek umeed ki chamak — subtle shine same in light/dark.
   ================= */
.tools{padding:40px 20px; max-width:1100px; margin:auto;}
.tools h2{text-align:center; margin-bottom:25px;}
.tools-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px;
}
.tool-card{
  display:block; background:var(--card-gradient);
  border-radius:8px; padding:30px 20px; text-align:center;
  font-weight:600; color:#111; text-decoration:none;
  transition:transform .2s, box-shadow .3s, background .3s;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  /* halki si reflective feel */
  background-image:linear-gradient(135deg,rgba(255,255,255,.8),rgba(240,244,255,.9));
}
.tool-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 12px rgba(0,0,0,.15);
}

/* ================
   ARTICLES
   aaj teen… kal tees.
   ============== */
.articles{background:#f1f5f9; padding:40px 20px;}
.articles h2{text-align:center; margin-bottom:25px;}
.article-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;
}
.article-card{
  background:var(--card-gradient); padding:20px; border-radius:8px; color:#111;
  transition:transform .2s; box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.article-card:hover{transform:translateY(-3px);}
.article-card h3{margin:0 0 10px; font-size:1.1rem;}
.article-card p{font-size:.9rem; margin-bottom:10px; color:#444;}
.article-card a{font-size:.85rem; color:var(--primary); text-decoration:none;}

/* ================
   FOOTER
   neeche tak same hausla — #14b8a6
   ============= */
footer{
  text-align:center; padding:20px; font-size:.85rem; color:#fff; background:var(--accent);
}

/* ======
   DARK MODE
   andhera hoga par nazar saaf — colors same, contrast theek.
   ====*/
body.dark{background:var(--dark-bg); color:var(--dark-text);}
body.dark .site-header{background:var(--accent);}
body.dark .nav-links a{color:#fff;}
body.dark .tool-card,
body.dark .article-card{
  background:var(--card-gradient-dark);
  color:var(--dark-text);
}
body.dark footer{background:var(--accent); color:#fff;}
body.dark .hero p{color:#cfe6e1;} /* halka sa readable cyanish */

/* ====
   AR-VIBE ANIMATED BACKGROUND
   naam bar-bar ubharta — jaise sapna.
   ============= */
.bg-animation{
  position:fixed; inset:0; z-index:-1; display:flex; justify-content:center; align-items:center;
  overflow:hidden; pointer-events:none;
}
.bg-animation span{
  position:absolute; font-size:5rem; font-weight:900; color:var(--accent);
  opacity:0; letter-spacing:2px; text-transform:uppercase; animation:floatText 10s linear infinite;
}
.bg-animation span:nth-child(1){top:10%; left:20%; animation-delay:0s;}
.bg-animation span:nth-child(2){top:40%; left:60%; animation-delay:3s;}
.bg-animation span:nth-child(3){bottom:15%; left:30%; animation-delay:6s;}
.bg-animation span:nth-child(4){bottom:25%; right:15%; animation-delay:9s;}

@keyframes floatText{
  0%{opacity:0; transform:scale(.8) translateY(40px); filter:blur(10px);}
  20%{opacity:.6; transform:scale(1) translateY(0); filter:blur(2px);
      text-shadow:0 0 15px #14b8a6, 0 0 30px #14b8a6;}
  50%{opacity:.8; transform:scale(1.1) translateY(-20px);
      text-shadow:0 0 25px #14b8a6, 0 0 50px #14b8a6;}
  80%{opacity:.5; transform:scale(1) translateY(0); filter:blur(2px);}
  100%{opacity:0; transform:scale(.9) translateY(40px); filter:blur(10px);}
}