/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --primary:#6C3AE8;
  --accent:#00C9A7;
  --bg:#0F0D1E;
  --bg2:#1A1730;
  --card:#1E1B35;
  --border:#2E2A4A;
  --text:#FFFFFF;
  --text-secondary:#C8C4E0;
  --text-muted:#9B96B8;
  --text-faint:#6B6485;
}

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

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}

/* ── Headings ── */
h1,h2,h3,h4,h5,h6{
  color:#FFFFFF;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
}

p{color:var(--text-secondary);line-height:1.7}

/* ── Buttons ── */
.btn-brand{
  background:linear-gradient(135deg,var(--primary),#5429d4);
  color:#fff !important;
  padding:10px 22px;
  border-radius:9px;
  font-weight:700;
  font-size:.9rem;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:.2s;
  text-decoration:none;
}
.btn-brand:hover{opacity:.88;color:#fff !important}

.btn-outline{
  background:transparent;
  color:var(--text-secondary) !important;
  padding:10px 22px;
  border-radius:9px;
  font-weight:600;
  font-size:.9rem;
  border:1px solid var(--border);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:.2s;
  text-decoration:none;
}
.btn-outline:hover{border-color:var(--primary);color:#fff !important}

.btn-primary-hero{
  background:var(--primary);
  color:#fff !important;
  padding:12px 28px;
  border-radius:10px;
  font-weight:700;
  font-size:.95rem;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:.2s;
  border:none;
  cursor:pointer;
  text-decoration:none;
}
.btn-primary-hero:hover{opacity:.88;color:#fff !important}

.btn-outline-hero{
  background:transparent;
  color:#fff !important;
  padding:12px 28px;
  border-radius:10px;
  font-weight:600;
  font-size:.95rem;
  border:1px solid rgba(255,255,255,.4);
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:.2s;
  text-decoration:none;
}
.btn-outline-hero:hover{border-color:#fff;color:#fff !important}

/* ── Section labels ── */
.section-badge{
  display:inline-block;
  background:rgba(108,58,232,.18);
  border:1px solid rgba(108,58,232,.45);
  color:#c4b7ff;
  padding:5px 14px;
  border-radius:50px;
  font-size:.78rem;
  font-weight:700;
  margin-bottom:12px;
  letter-spacing:.3px;
}

.section-title{
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:800;
  margin-bottom:12px;
  color:#FFFFFF;
}

.section-sub{
  color:var(--text-secondary);
  font-size:1rem;
  max-width:560px;
  line-height:1.7;
}

/* ── Cards ── */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:22px;
}

/* ── Search ── */
.search-wrap{position:relative;margin-bottom:16px}
.search-wrap .si{
  position:absolute;left:14px;top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);font-size:.9rem
}
.search-wrap input{
  width:100%;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 14px 10px 38px;
  color:#fff;
  font-size:.9rem;
  outline:none;
  font-family:'Inter',sans-serif;
}
.search-wrap input::placeholder{color:var(--text-muted)}
.search-wrap input:focus{border-color:var(--primary)}

/* ── Blog ── */
.blog-cat{
  font-size:.72rem;font-weight:700;
  color:var(--accent);text-transform:uppercase;
  margin-bottom:6px;letter-spacing:.6px;
}
.blog-title{font-size:1rem;font-weight:700;margin-bottom:8px;line-height:1.4;color:#fff}
.blog-excerpt{font-size:.85rem;color:var(--text-secondary);line-height:1.6}
.blog-meta{display:flex;gap:12px;font-size:.78rem;color:var(--text-muted);margin-top:10px}

/* ── Alerts ── */
.alert{padding:12px 16px;border-radius:8px;margin-bottom:12px;font-size:.9rem;font-weight:500}
.alert-success{background:rgba(0,201,167,.12);border:1px solid rgba(0,201,167,.35);color:#00e5b8}
.alert-danger{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#ff7b7b}
.alert-info{background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.35);color:#93C5FD}
.alert-warning{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);color:#fbbf24}

/* ── Tool cards on home ── */
.tc{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  transition:.25s;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-decoration:none !important;
  color:#fff !important;
  height:100%;
}
.tc:hover{border-color:var(--primary);transform:translateY(-3px);background:#221E3C;color:#fff !important}
.tc .tool-name{font-size:.97rem;font-weight:700;color:#fff}
.tc .tool-desc{font-size:.82rem;color:var(--text-secondary);flex:1;line-height:1.55}

.ti2{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}

.tf{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.72rem;border-radius:6px;padding:3px 10px;
  font-weight:700;
  background:rgba(0,201,167,.15);color:#00C9A7;
  border:1px solid rgba(0,201,167,.3);
}
.tp{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.72rem;border-radius:6px;padding:3px 10px;
  font-weight:700;
  background:rgba(245,158,11,.15);color:#F59E0B;
  border:1px solid rgba(245,158,11,.3);
}

/* ── Accordion toggle ── */
.st{
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:14px 20px;width:100%;
  text-align:left;color:#fff;font-size:.95rem;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;
  transition:.2s;margin-bottom:16px;cursor:pointer;
  font-family:'Inter',sans-serif;
}
.st:hover{border-color:var(--primary)}
.st .ar{transition:.3s;font-size:.8rem;color:var(--text-muted)}
.st.open .ar{transform:rotate(180deg)}
.cl{overflow:hidden;transition:max-height .4s ease}

/* ── Blog cards ── */
.bc{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;transition:.25s;height:100%;
}
.bc:hover{border-color:var(--primary);transform:translateY(-3px)}

/* ── Pricing ── */
.pc{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:32px 28px;height:100%;position:relative;transition:.25s;
}
.pc:hover{transform:translateY(-4px)}
.pc.pop{border-color:var(--primary);background:linear-gradient(135deg,var(--card),#1D1540)}
.pc.pop::before{
  content:'Most Popular';position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--primary);color:#fff;font-size:.75rem;font-weight:700;
  padding:5px 16px;border-radius:50px;white-space:nowrap;
}

.pf{
  display:flex;align-items:center;gap:10px;
  font-size:.88rem;color:var(--text-secondary);
  padding:6px 0;border-bottom:1px solid var(--border);
}
.pf:last-child{border:none}
.pf i{color:var(--accent);font-size:.85rem;width:16px}
.pf.no{opacity:.45}

/* ── Trending ── */
.tr{
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:18px 20px;
  display:flex;align-items:center;gap:16px;transition:.2s;
}
.tr:hover{border-color:var(--primary);transform:translateX(4px)}
.hot{background:rgba(239,68,68,.15);color:#ff7b7b;border:1px solid rgba(239,68,68,.3);font-size:.72rem;padding:4px 10px;border-radius:6px;font-weight:700}
.rising{background:rgba(0,201,167,.15);color:#00C9A7;border:1px solid rgba(0,201,167,.3);font-size:.72rem;padding:4px 10px;border-radius:6px;font-weight:700}

/* ── CTA section ── */
.cta{
  background:linear-gradient(135deg,#4B20C0,var(--primary));
  border-radius:24px;padding:60px 40px;text-align:center;
  position:relative;overflow:hidden;
}
.cta h3,.cta p{color:#fff !important}

/* ── Pulse animation ── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ── Force all text readable ── */
nav a{color:rgba(255,255,255,.85) !important}
nav a:hover{color:#fff !important}

footer{color:var(--text-secondary)}
footer a{color:var(--text-muted) !important}
footer a:hover{color:#fff !important}

/* ── Fix any section that may appear white ── */
section{background:inherit}
section p,section span,section div{
  -webkit-font-smoothing:antialiased;
}

/* ── Utility ── */
.text-white{color:#fff !important}
.text-muted-custom{color:var(--text-muted) !important}
.text-accent{color:var(--accent) !important}
.fw-800{font-weight:800}
.fw-700{font-weight:700}