/* Root color variables (used by CSS) */
:root{
  --bg: #0f1115;
  --card: #111318;
  --text: #e9eefc;
  --muted: #bfc8d8;
  --accent: #4d61ff;
  --accent-2: #8b5cf6;
  --glass: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.04);
  --tool-bg: rgba(255,255,255,0.02);
  --gap: 18px;
}

/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0;font-family: 'Poppins', system-ui, Arial;}

body{
  background: linear-gradient(180deg, var(--bg), #07070a);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* HEADER (fixed) */
.header{
  position:fixed;top:10px;left:0;right:0;
  display:flex;justify-content:flex-end;align-items:center;
  gap:12px;padding:10px 18px;z-index:1200;
}

/* search input */
.search-bar{
  width:260px;
  padding:10px 14px;border-radius:20px;
  background:var(--card);border:1px solid var(--border);
  color:var(--text);
  outline:none;
  box-shadow:0 6px 20px rgba(15,20,40,0.4);
}

/* menu button */
.menu-btn{
  padding:8px 12px;border-radius:10px;border:none;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;font-weight:600;cursor:pointer;box-shadow:0 8px 30px rgba(75,60,200,0.12);
}

/* SIDEBAR */
#sidebar{
  position:fixed;left:-300px;top:0;height:100vh;width:280px;
  background:linear-gradient(180deg, rgba(20,20,30,0.95), rgba(12,12,20,0.9));
  padding:24px 18px;border-right:1px solid rgba(255,255,255,0.03);
  transition:left .28s ease, box-shadow .2s;
  z-index:1300;backdrop-filter: blur(6px);
}
#sidebar.open{left:0;box-shadow:8px 0 40px rgba(2,6,23,0.6);}

#sidebar nav{display:flex;flex-direction:column;gap:8px;margin-top:20px;}
#sidebar .nav-link, #sidebar .btn-link{
  display:block;padding:12px 14px;border-radius:10px;color:var(--muted);text-decoration:none;background:transparent;border:none;text-align:left;cursor:pointer;
}
#sidebar .nav-link:hover, #sidebar .btn-link:hover{background:var(--glass);color:var(--text);}

/* main content wrapper */
.main-content{max-width:1100px;margin:120px auto 60px;padding:0 20px;}

/* logo */
.logo{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.logo img{width:64px;height:64px;border-radius:10px;object-fit:cover;}
.logo h1{font-size:20px;color:var(--text);line-height:1.05;}

/* hero */
.hero{max-width:760px;padding:20px;border-radius:16px;background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 10px 30px rgba(2,6,23,0.6);margin-bottom:26px;}
.hero h2{font-size:28px;color:var(--accent);margin-bottom:10px;}
.hero p{color:var(--muted);line-height:1.6}

/* categories preview */
.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:12px 0 26px;}
.cat-card{background:var(--card);padding:18px;border-radius:12px;text-align:center;cursor:pointer;border:1px solid var(--border);transition:transform .18s ease,box-shadow .18s;}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(49,64,255,0.09);}

/* categories block & buttons */
.categories-block{margin-top:10px;padding-top:6px;}
.section-title{font-size:20px;margin-bottom:12px;color:var(--text);}
.categories-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px;}
.cat-btn{padding:14px;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;border:none;cursor:pointer;font-weight:600;box-shadow:0 10px 30px rgba(75,70,200,0.08);transition:transform .18s;}
.cat-btn:hover{transform:translateY(-6px)}

/* tools list */
.tools-list{display:none;flex-direction:column;gap:8px;padding:14px;border-radius:12px;background:var(--tool-bg);border:1px solid rgba(255,255,255,0.03);margin-bottom:22px;}
.tools-list a{display:block;padding:10px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:var(--text);text-decoration:none;border:1px solid rgba(255,255,255,0.02);transition:transform .12s, background .12s;}
.tools-list a:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,0.45);} 
/* TOOL NAME CARDS */
.tools-list a {
  display: block;
  background: #1a1d22;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 8px;
  color: #8cc7ff;
  text-decoration: none;
  transition: 0.25s ease;
  border: 1px solid #22272e;
}

/* Hover animation */
.tools-list a:hover {
  background: #222831;
  transform: translateX(4px);
  border-color: #2f333a;
}
/* FOOTER STYLING */
.footer {
  background: #0b0d10;
  padding: 30px 20px;
  text-align: center;
  margin-top: 40px;
  border-top: 1px solid #1b1e23;
}

.footer-logo {
  font-size: 22px;
  margin-bottom: 8px;
  font-weight: bold;
  color: #ffffff;
}

.footer-desc {
  font-size: 14px;
  color: #9ea4ad;
  margin-bottom: 18px;
}

.footer-links {
  margin-bottom: 18px;
}

.footer-links a {
  color: #8cc7ff;
  text-decoration: none;
  margin: 0 10px;
  font-size: 14px;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-copy {
  font-size: 12px;
  color: #727a86;
}
/* utilities */
.hidden{display:none;}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* responsive */
@media (max-width:860px){
  .search-bar{width:160px}
  .main-content{margin:100px 14px 50px}
  .logo img{width:52px;height:52px}
}
/* ABOUT PAGE STYLING */
.about-text {
  margin: 10px 0 20px 0;
  color: #b9bec7;
  line-height: 1.6;
}

.about-list {
  margin-left: 20px;
  margin-bottom: 20px;
}

.about-list li {
  margin-bottom: 8px;
  color: #d1d5db;
}
/* CONTACT PAGE STYLING */
.contact-text {
  margin: 10px 0 20px 0;
  color: #b9bec7;
  line-height: 1.6;
}

.contact-list {
  margin-left: 20px;
  margin-bottom: 20px;
}

.contact-list li {
  margin-bottom: 8px;
  color: #d1d5db;
}