/* Hero */
    .hero { background:#0d0d14; border-bottom:1px solid #1e1e2e; padding:52px 20px 44px; text-align:center; }
    .hero h1 { font-size:clamp(1.5rem,5vw,2.6rem); font-weight:700; color:#fff; margin-bottom:10px; letter-spacing:-0.5px; line-height:1.25; }
    .hero h1 span { background:linear-gradient(90deg,#7c5ff5,#ec4899); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .hero p { font-size:clamp(0.875rem,2.5vw,1rem); color:#6b7280; margin:0 0 24px; }
    .search-wrap { max-width:520px; margin:0 auto; position:relative; }
    .search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#6b7280; font-size:1rem; pointer-events:none; }
    .search-input { width:100%; padding:12px 14px 12px 40px; font-size:0.9rem; font-family:'Inter',sans-serif; color:#e2e4ec; background:#13131f; border:1px solid #2a2a40; border-radius:10px; outline:none; transition:border-color .15s,box-shadow .15s; }
    .search-input::placeholder { color:#4b5563; }
    .search-input:focus { border-color:#7c5ff5; box-shadow:0 0 0 3px rgba(124,95,245,.18); }

    /* Stats Bar */
    .stats-bar { display:flex; align-items:center; justify-content:center; gap:32px; padding:16px 20px; border-bottom:1px solid #1e1e2e; background:#0d0d14; flex-wrap:wrap; }
    .stat-item { text-align:center; }
    .stat-num { font-size:1.1rem; font-weight:700; color:#fff; }
    .stat-lbl { font-size:0.72rem; color:#6b7280; margin-top:2px; }

    /* Filter Tabs */
    .filter-bar { background:#0d0d14; border-bottom:1px solid #1e1e2e; padding:0 16px; position:sticky; top:60px; z-index:100; overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
    .filter-bar::-webkit-scrollbar { display:none; }
    .filter-bar-inner { display:inline-flex; min-width:100%; justify-content:center; }
    .filter-btn { display:inline-block; padding:13px 18px; font-size:0.875rem; font-weight:500; color:#6b7280; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; transition:color .15s,border-color .15s; white-space:nowrap; }
    .filter-btn:hover { color:#e2e4ec; }
    .filter-btn.active { color:#fff; border-bottom-color:#7c5ff5; font-weight:600; }

    /* Grid */
    .main-content { max-width:1200px; margin:0 auto; padding:32px 16px 60px; }
    .section-heading { font-size:0.78rem; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px; }
    .cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

    /* Card */
    a.card-link-home {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
}
    .calc-card {     position: relative; background:#13131f; border:1px solid #1e1e2e; border-radius:12px; padding:18px 20px 16px; display:flex; flex-direction:column; gap:8px; transition:box-shadow .18s,transform .18s,border-color .18s; }
    .calc-card:hover { box-shadow:0 6px 28px rgba(0,0,0,0.45); border-color:#2a2a40; transform:translateY(-2px); }
    .card-top { display:flex; align-items:flex-start; gap:8px; }
    .category-badge { font-size:0.68rem; font-weight:600; letter-spacing:0.03em; padding:3px 8px; border-radius:20px; flex-shrink:0; }
    .badge-finance    { background:rgba(37,99,235,0.18);  color:#60a5fa; }
    .badge-health     { background:rgba(22,163,74,0.18);  color:#4ade80; }
    .badge-date       { background:rgba(147,51,234,0.18); color:#c084fc; }
    .badge-salary     { background:rgba(234,88,12,0.18);  color:#fb923c; }
    .badge-math       { background:rgba(202,138,4,0.18);  color:#facc15; }
    .badge-time       { background:rgba(2,132,199,0.18);  color:#38bdf8; }
    .badge-conversion { background:rgba(225,29,72,0.18);  color:#fb7185; }
    .calc-card h3 { font-size:0.93rem; font-weight:600; color:#e2e4ec; margin:0; line-height:1.3; }
    .calc-card p  { font-size:0.8rem; color:#6b7280; margin:0; line-height:1.5; flex-grow:1; }
    .open-btn { align-self:flex-start; margin-top:4px; padding:6px 16px; font-size:0.8rem; font-weight:500; color:#c9cbdb; background:#1c1c2c; border:1px solid #2a2a40; border-radius:7px; cursor:pointer; transition:background .14s,border-color .14s,color .14s; text-decoration:none; display:inline-block; }
    .open-btn:hover { background:#25253a; border-color:#3a3a55; color:#fff; }

    /* No results */
    .no-results { grid-column:1/-1; text-align:center; padding:60px 20px; color:#4b5563; font-size:0.95rem; }
    .no-results strong { display:block; font-size:1.5rem; margin-bottom:8px; color:#6b7280; }

    /* Footer */
    .site-footer { text-align:center; padding:28px 16px; font-size:0.8rem; color:#4b5563; border-top:1px solid #1e1e2e; background:#0d0d14; }
    .footer-links { display:flex; justify-content:center; gap:20px; margin-top:8px; flex-wrap:wrap; }
    .footer-links a { color:#4b5563; text-decoration:none; font-size:0.78rem; transition:color .14s; }
    .footer-links a:hover { color:#9ca3af; }

    .calc-card.hidden { display:none; }

    /* ── Responsive ── */
    @media (max-width:960px) {
      .cards-grid { grid-template-columns:repeat(2,1fr); }
      .filter-bar-inner { justify-content:flex-start; }
    }
    @media (max-width:700px) {
     
      .hero { padding:36px 16px 32px; }
      .stats-bar { gap:20px; padding:14px 16px; }
      .filter-btn { padding:12px 14px; font-size:0.82rem; }
    }
    @media (max-width:520px) {
      .cards-grid { grid-template-columns:1fr; gap:12px; }
      .main-content { padding:24px 12px 48px; }
      .calc-card { padding:16px; }
      .stats-bar { gap:16px; }
      .stat-num { font-size:1rem; }
    }
    @media (max-width:380px) {
       
      .hero { padding:28px 14px 26px; }
    }