/* ─────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────── */
.breadcrumb {
    background: #fff;
    border-bottom: 1px solid var(--border)
}

.breadcrumb-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: .85rem 2rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    color: var(--muted)
}

.bc-sep {
    color: var(--border)
}

.bc-link {
    color: var(--sub);
    font-weight: 500;
    transition: color .15s
}

    .bc-link:hover {
        color: var(--navy)
    }

.bc-cur {
    color: var(--dark);
    font-weight: 600
}

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero2 {
    background: linear-gradient(to right, #4CAF50 0%, #4CAF50 51%, #4CAF50 100%);
    padding: 3.5rem 2rem 3rem;
    position: relative;
    overflow: hidden;
}

    .hero2::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 80% at 80% 50%,rgba(91,114,232,.25),transparent),radial-gradient(ellipse 40% 60% at 10% 80%,rgba(95,168,30,.1),transparent);
    }

    .hero2::after {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.08);
    }

.hero2-inner {
    max-width: var(--container);
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.hero2-left {
}

.hero2-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    padding: .3rem .85rem;
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    margin-bottom: 1.1rem;
    animation: fadeUp .5s ease both;
}

.hero2-title {
    font-family: 'Syne',sans-serif;
    font-size: clamp(1.9rem,3.5vw,2.8rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.03em;
    margin-bottom: .75rem;
    animation: fadeUp .55s .05s ease both;
}

    .hero2-title span {
        background: linear-gradient(90deg, #a6ff05, #e5f230);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.hero2-sub {
    font-size: .95rem;
    color: white;
    max-width: 520px;
    line-height: 1.7;
    animation: fadeUp .6s .1s ease both;
}

.hero2-stats {
    display: flex;
    gap: 2rem;
    animation: fadeUp .65s .15s ease both;
}

.hero2-stat strong {
    display: block;
    font-family: 'Syne',sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff
}

.hero2-stat span {
    font-size: .7rem;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .06em
}

/* ─────────────────────────────────────────
   SEARCH + FILTER BAR
───────────────────────────────────────── */
.filter-bar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 64px;
    z-index: 100;
}

.filter-bar-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: .85rem 2rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
}

.search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px
}

    .search-wrap svg {
        position: absolute;
        left: .85rem;
        top: 50%;
        transform: translateY(-50%);
        width: 15px;
        height: 15px;
        stroke: var(--muted);
        stroke-width: 2;
        fill: none;
        stroke-linecap: round;
        pointer-events: none
    }

.search-input {
    width: 100%;
    padding: .55rem .9rem .55rem 2.4rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: 'Inter',sans-serif;
    font-size: .84rem;
    color: var(--text);
    background: #f8fafc;
    outline: none;
    transition: border-color .15s,box-shadow .15s
}

    .search-input:focus {
        border-color: var(--navy);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(43,59,171,.09)
    }

    .search-input::placeholder {
        color: #c4c9d4
    }

.filter-selects {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap
}

.fselect {
    padding: .5rem .9rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: .9rem;
    color: var(--sub);
    background: #f8fafc;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    padding-right: 2rem;
    cursor: pointer;
    transition: border-color .15s
}

    .fselect:focus {
        border-color: var(--navy)
    }

.result-count {
    font-size: .8rem;
    color: var(--muted);
    margin-left: auto;
    white-space: nowrap
}

    .result-count strong {
        color: var(--dark);
        font-weight: 600
    }

.btn-clear {
    padding: .48rem .9rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: .78rem;
    font-weight: 500;
    color: var(--sub);
    display: none;
    transition: all .15s
}

    .btn-clear:hover {
        border-color: var(--navy);
        color: var(--navy)
    }

    .btn-clear.show {
        display: block
    }

/* ─────────────────────────────────────────
   CATEGORY NAV PILLS
───────────────────────────────────────── */
.cat-nav {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 122px;
    z-index: 99;
}

.cat-nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: .65rem 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem
}

.cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .38rem .95rem;
    border-radius: 100px;
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: .75rem;
    font-weight: 700;
    color: var(--sub);
    cursor: pointer;
    transition: all .15s
}

    .cat-pill:hover {
        border-color: var(--navy);
        color: var(--navy);
        background: #f0f4ff
    }

    .cat-pill.active {
        background: var(--navy);
        border-color: var(--navy);
        color: #fff;
        font-weight: 600
    }

/* ─────────────────────────────────────────
   MAIN LAYOUT
───────────────────────────────────────── */
.page-wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
    position: relative;
    z-index: 1
}

/* ─────────────────────────────────────────
   CATEGORY SECTION
───────────────────────────────────────── */
.cat-section {
    margin-bottom: 3.5rem;
    scroll-margin-top: 180px
}

.cat-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
    gap: .75rem;
}

.csh-left {
    display: flex;
    align-items: center;
    gap: .85rem
}

.csh-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    border: 1.5px solid var(--border);
}

.csh-name {
    font-family: 'Syne',sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--dark)
}

.csh-count {
    font-size: .78rem;
    color: var(--muted);
    margin-top: .1rem
}

.csh-right {
    display: flex;
    align-items: center;
    gap: .65rem
}

.csh-tag {
    font-size: .68rem;
    font-weight: 600;
    padding: .22rem .65rem;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: .06em
}

.tag-hot {
    background: #fff1f2;
    color: #f43f5e;
    border: 1px solid #fecdd3
}

.tag-new {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0
}

.tag-trending {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--navy);
    padding: .4rem .9rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--border-blue);
    background: rgba(43,59,171,.04);
    transition: all .15s
}

    .btn-view-all:hover {
        background: rgba(43,59,171,.09);
        border-color: var(--navy)
    }

    .btn-view-all svg {
        width: 13px;
        height: 13px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round
    }

/* ─────────────────────────────────────────
   TOOL CARDS GRID
───────────────────────────────────────── */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem
}

.tool-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    transition: transform .18s,box-shadow .18s,border-color .18s;
    animation: cardIn .3s ease both;
    cursor: pointer;
    position: relative;
    z-index: 0;
}

    .tool-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
        border-color: rgba(43,59,171,.18)
    }

.tc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-top: 15px;
}

.tc-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 1.5px solid var(--border)
}

.tc-badges {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    align-items: flex-end
}

.tc-badge {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .14rem .48rem;
    border-radius: 100px
}

.tb-free {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0
}

.tb-paid {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa
}

.tb-freemium {
    background: #eff6ff;
    color: #2B3BAB;
    border: 1px solid #bfdbfe
}

.tb-new {
    background: #fff1f2;
    color: #f43f5e;
    border: 1px solid #fecdd3
}

.tb-hot {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a
}

/*.tc-name {
    font-family: 'Syne',sans-serif;
    font-size: .9rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.2
}*/

.tc-maker {
    font-size: .95rem;
    color: var(--muted);
    margin-top: .08rem
}

/*.tc-desc {
    font-size: .76rem;
    color: var(--sub);
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}*/

.tc-rating {
    display: flex;
    align-items: center;
    gap: .35rem
}

.tc-stars {
    display: flex;
    gap: .08rem
}

.tc-star {
    color: #f59e0b;
    font-size: .72rem
}

    .tc-star.dim {
        opacity: .25
    }

.tc-score {
    font-size: .75rem;
    font-weight: 700;
    color: var(--dark)
}

.tc-reviews {
    font-size: .68rem;
    color: var(--muted)
}

.tc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: .6rem;
    border-top: 1px solid var(--border);
    margin-top: auto
}

.tc-tags {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap
}

.tc-tag {
    font-size: .62rem;
    font-weight: 500;
    padding: .18rem .55rem;
    border-radius: 100px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--sub)
}

.tc-save {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
    transition: all .15s
}

    .tc-save:hover {
        border-color: var(--navy);
        background: #f0f4ff
    }

    .tc-save.saved {
        border-color: var(--green);
        background: #f0fdf4
    }

/* featured card variant */
.tool-card.featured {
    border-color: rgba(43,59,171,.25);
    background: linear-gradient(135deg,#fafbff,#fff);
    box-shadow: 0 16px 40px rgba(43, 59, 171, .1), 0 4px 12px rgba(0, 0, 0, .05);
    border-color:  #2b3bab2e;
}

    .tool-card.featured::before {
        content: '⭐ Featured';
        position: absolute;
        top: -.5px;
        left: 1rem;
        font-size: .58rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        background: var(--navy);
        color: #fff;
        padding: .2rem .6rem;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 16px 40px rgba(43, 59, 171, .1), 0 4px 12px rgba(0, 0, 0, .05);
        border-color: #2b3bab2e;
    }

/* load more */
.load-more-wrap {
    text-align: center;
    margin-top: 1.5rem
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.5rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: .84rem;
    font-weight: 600;
    color: var(--sub);
    transition: all .15s
}

    .btn-load-more:hover {
        border-color: var(--navy);
        color: var(--navy);
        background: #f0f4ff
    }

    .btn-load-more svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
        stroke-linecap: round
    }

/* ─────────────────────────────────────────
   EMPTY STATE
───────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    display: none
}

    .empty-state.show {
        display: block
    }

.es-icon {
    font-size: 3rem;
    margin-bottom: 1rem
}

.es-title {
    font-family: 'Syne',sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: .4rem
}

.es-sub {
    font-size: .85rem;
    color: var(--muted)
}

/* ─── RESPONSIVE ─── */
@media(max-width:1024px) {
    .tools-grid {
        grid-template-columns: repeat(3,1fr)
    }
}

@media(max-width:768px) {
    .tools-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .nav-links, .nav-search-btn {
        display: none
    }

    .hero-inner {
        flex-direction: column
    }

    .hero-stats {
        gap: 1.25rem
    }

    .filter-bar-inner {
        gap: .55rem
    }

    .fselect {
        font-size: .75rem
    }
}

@media(max-width:480px) {
    .tools-grid {
        grid-template-columns: 1fr
    }
}

/* ── VALUES ── */
.values-section {
    padding: 1rem 0;
    background: #fefeff;
}

.values-header {
    text-align: center;
    margin-bottom: 3.5rem
}

    .values-header .section-eyebrow {
        margin-bottom: .5rem
    }

    .values-header p {
        font-size: .95rem;
        color: var(--sub);
        max-width: 520px;
        margin: .85rem auto 0;
        line-height: 1.75
    }

.values-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.5rem
}

.val-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    transition: all .2s;
}

    .val-card:hover {
        border-color: rgba(43,59,171,.2);
        box-shadow: var(--shadow-md);
        transform: translateY(-3px)
    }

.val-ico {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1.1rem
}

.val-title {
    font-family: 'Syne',sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -.01em;
    margin-bottom: .6rem
}

.val-desc {
    font-size: .85rem;
    color: var(--sub);
    line-height: 1.75
}

.stats-section .section-title {
    color: #fff
}

    .stats-section .section-title span {
        background: linear-gradient(90deg,var(--green-l),#a3e635);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent
    }

.section-title {
    font-family: 'Syne',sans-serif;
    font-size: clamp(1.7rem,3vw,2.4rem);
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--dark);
    line-height: 1.15
}

    .section-title span {
        background: linear-gradient(90deg,var(--navy),var(--navy-l));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.tl-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .5rem;
    font-size: .63rem;
    font-weight: 700;
    padding: .16rem .52rem;
    border-radius: 100px
}

    .tl-tag.g {
        background: rgba(95,168,30,.1);
        color: var(--green)
    }

    .tl-tag.n {
        background: rgba(43,59,171,.08);
        color: var(--navy)
    }

    .tl-tag.a {
        background: rgba(245,158,11,.1);
        color: #92400e
    }

/* ─── FAQ ─── */
.faq-section {
    background: var(--bg)
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 920px;
    margin: 3.5rem auto 0
}

.faq-item {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .15s
}

    .faq-item:hover {
        border-color: rgba(43,59,171,.2)
    }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.05rem 1.2rem;
    font-size: .83rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    gap: .65rem;
    user-select: none
}

    .faq-q svg {
        width: 13px;
        height: 13px;
        stroke: var(--muted);
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round;
        flex-shrink: 0;
        transition: transform .22s,stroke .22s
    }

.faq-item.open .faq-q {
    color: var(--navy)
}

    .faq-item.open .faq-q svg {
        transform: rotate(180deg);
        stroke: var(--navy)
    }

.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease,padding .3s ease;
    font-size: .78rem;
    color: var(--sub);
    line-height: 1.78;
    padding: 0 1.2rem
}

.faq-item.open .faq-body {
    max-height: 200px;
    padding-bottom: 1.05rem
}