/* ─────────────────────────────────────────
   RESET & TOKENS
───────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --navy: #2B3BAB;
    --navy-d: #1e2c82;
    --navy-l: #5b72e8;
    --green: #5fa81e;
    --green-l: #7DC832;
    --dark: #0e1422;
    --text: #1c2333;
    --sub: #4b5568;
    --muted: #94a3b8;
    --bg: #f7f9fc;
    --white: #fff;
    --border: #e2e8f0;
    --border-blue: rgba(43,59,171,.12);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --shadow: 0 4px 12px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.04);
    --shadow-md: 0 8px 24px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.05);
    --shadow-lg: 0 16px 48px rgba(0,0,0,.1),0 6px 16px rgba(0,0,0,.06);
    --container: 1200px;
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter',sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

img {
    display: block;
    max-width: 100%
}

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

button {
    cursor: pointer;
    font-family: inherit
}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes shimmer {
    0% {
        background-position: -300% center
    }

    100% {
        background-position: 300% center
    }
}

@keyframes pulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(95,168,30,.45)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(95,168,30,0)
    }
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fillBar {
    from {
        width: 0
    }

    to {
        width: var(--w)
    }
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: scale(.85)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

/* ─── LAYOUT ─── */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 2rem
}

/* ─────────────────────────────────────────
   NAVBAR


/* ─────────────────────────────────────────
   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
}

/* ─────────────────────────────────────────
   TOOL IDENTITY BLOCK
───────────────────────────────────────── */
.tool-top {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.25rem
}

.tool-big-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    background: linear-gradient(135deg,#e8f0fe,#dce8fd);
    border: 1.5px solid rgba(43,59,171,.12);
    box-shadow: var(--shadow-md);
}

.tool-identity {
}

.tool-badges {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-bottom: .5rem
}

.tool-badge {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .18rem .55rem;
    border-radius: 100px
}

.tb-cat {
    background: #e8f0fe;
    color: #2B3BAB
}

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

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

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

.tool-name {
    font-family: 'Syne',sans-serif;
    font-size: clamp(1.6rem,3vw,2.2rem);
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -.03em;
    line-height: 1.1
}

.tool-maker {
    font-size: .875rem;
    color: var(--muted);
    margin-top: .3rem
}

    .tool-maker strong {
        color: var(--sub);
        font-weight: 600
    }

/* Quick rating strip */
.tool-quick-strip {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem
}

.qs-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--sub)
}

    .qs-item strong {
        color: var(--dark);
        font-weight: 600
    }

.stars {
    display: flex;
    gap: .1rem
}

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

    .star.half {
        opacity: .45
    }

/* Tool description */
.tool-desc {
    font-size: .95rem;
    color: var(--sub);
    line-height: 1.8;
    max-width: 680px;
    margin-bottom: 1.25rem
}

/* Tags */
.tool-tags {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem
}

.ttag {
    font-size: .72rem;
    font-weight: 500;
    padding: .25rem .7rem;
    border-radius: 100px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    color: var(--sub);
    transition: all .15s
}

    .ttag:hover {
        border-color: var(--navy);
        color: var(--navy);
        background: rgba(43,59,171,.04)
    }

/* Action buttons */
.tool-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap
}

.btn-visit {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .75rem 1.6rem;
    border-radius: var(--radius);
    border: none;
    background: var(--navy);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(43,59,171,.3);
    transition: background .15s,transform .15s,box-shadow .15s
}

    .btn-visit:hover {
        background: var(--navy-d);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(43,59,171,.38)
    }

.btn-save {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .75rem 1.25rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--sub);
    font-size: .9rem;
    font-weight: 600;
    transition: all .15s;
    box-shadow: var(--shadow-sm)
}

    .btn-save:hover {
        border-color: var(--navy);
        color: var(--navy);
        box-shadow: var(--shadow)
    }

.btn-share {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .75rem 1.1rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--sub);
    font-size: .9rem;
    font-weight: 600;
    transition: all .15s;
    box-shadow: var(--shadow-sm)
}

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

/* ─────────────────────────────────────────
   QUICK INFO CARD
───────────────────────────────────────── */
.qic {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.qic-tool-top {
    background: linear-gradient(135deg,#eef2ff,#f0fdf4);
    padding: 1.1rem 1.1rem .9rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    border-bottom: 1.5px solid var(--border);
}

.qic-tool-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg,#e8f0fe,#dce8fd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    border: 1.5px solid rgba(43,59,171,.12);
    box-shadow: var(--shadow-sm);
}

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

.qic-tool-maker {
    font-size: .68rem;
    color: var(--muted);
    margin-top: .08rem
}

.qic-title {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .8rem 1.1rem .3rem;
}

.qic-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .48rem 1.1rem;
    border-bottom: 1px solid var(--border);
    gap: .5rem;
}

    .qic-row:last-of-type {
        border-bottom: none
    }

.qic-label {
    font-size: .73rem;
    color: var(--muted);
    flex-shrink: 0
}

.qic-val {
    font-size: .76rem;
    font-weight: 600;
    color: var(--dark);
    text-align: right
}

.qic-green {
    color: var(--green) !important
}

.qic-divider {
    height: 1px;
    background: var(--border);
    margin: .7rem 1.1rem .6rem
}

.qic-btn-primary {
    display: block;
    width: calc(100% - 2.2rem);
    margin: 0 1.1rem .45rem;
    padding: .62rem;
    border-radius: var(--radius);
    border: none;
    background: var(--navy);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 2px 10px rgba(43,59,171,.25);
    transition: background .15s,transform .15s;
}

    .qic-btn-primary:hover {
        background: var(--navy-d);
        transform: translateY(-1px)
    }

.qic-btn-sec {
    display: block;
    width: calc(100% - 2.2rem);
    margin: 0 1.1rem 1.1rem;
    padding: .58rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--sub);
    font-size: .82rem;
    font-weight: 600;
    text-align: center;
    transition: all .15s;
}

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

.price-pill {
    display: inline-flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 700;
    padding: .16rem .5rem;
    border-radius: 100px
}

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

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

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

/* ─────────────────────────────────────────
   INFO STRIP SECTION
───────────────────────────────────────── */
.info-strip {
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 2.5rem 0;
}

.info-strip-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.25rem;
    align-items: start;
}

.info-widget {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.iw-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.1rem;
    border-bottom: 1.5px solid var(--border);
    background: #fff;
}

.iw-icon {
    font-size: .95rem;
    line-height: 1
}

.iw-title {
    font-family: 'Syne',sans-serif;
    font-size: .78rem;
    font-weight: 700;
    color: var(--dark)
}

.iw-body {
    padding: .3rem 0
}

.iw-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .46rem 1.1rem;
    border-bottom: 1px solid var(--border);
    gap: .5rem;
}

    .iw-row:last-child {
        border-bottom: none
    }

.iw-lbl {
    font-size: .73rem;
    color: var(--muted)
}

.iw-val {
    font-size: .76rem;
    font-weight: 600;
    color: var(--dark);
    text-align: right
}

    .iw-val.accent {
        color: var(--navy);
        font-weight: 800
    }

.iw-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem 1.1rem;
    border-bottom: 1px solid var(--border);
    font-size: .76rem;
    color: var(--sub);
    text-decoration: none;
    transition: color .15s,background .15s;
}

    .iw-link:last-child {
        border-bottom: none
    }

    .iw-link:hover {
        color: var(--navy);
        background: rgba(43,59,171,.03)
    }

.iw-link-icon {
    font-size: .82rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0
}

.iw-link-arr {
    margin-left: auto;
    font-size: .68rem;
    color: var(--muted);
    transition: transform .15s
}

.iw-link:hover .iw-link-arr {
    transform: translateX(3px);
    color: var(--navy)
}

.iw-tool {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .52rem 1.1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .15s;
}

    .iw-tool:last-child {
        border-bottom: none
    }

    .iw-tool:hover {
        background: rgba(43,59,171,.03)
    }

.iw-tool-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0
}

.iw-tool-info {
    flex: 1;
    min-width: 0
}

.iw-tool-name {
    font-size: .76rem;
    font-weight: 600;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.iw-tool-cat {
    font-size: .63rem;
    color: var(--muted);
    margin-top: .04rem
}

.iw-tool-price {
    font-size: .68rem;
    font-weight: 700;
    flex-shrink: 0
}
/* Newsletter card */
.iw-newsletter {
    background: linear-gradient(145deg,var(--navy) 0%,var(--navy-l) 100%);
    border-color: transparent
}

    .iw-newsletter .iw-header {
        background: rgba(255,255,255,.08);
        border-bottom-color: rgba(255,255,255,.12)
    }

    .iw-newsletter .iw-icon, .iw-newsletter .iw-title {
        color: #fff
    }

.iw-nl-top {
    padding: 1rem 1.1rem 0
}

.iw-nl-badge {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: rgba(255,255,255,.18);
    color: #fff;
    padding: .15rem .5rem;
    border-radius: 100px;
    margin-bottom: .55rem
}

.iw-nl-title {
    font-family: 'Syne',sans-serif;
    font-size: .95rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin-bottom: .4rem
}

.iw-nl-desc {
    font-size: .73rem;
    color: rgba(255,255,255,.62);
    line-height: 1.6;
    margin-bottom: .8rem
}

.iw-nl-stats {
    display: flex;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: .8rem;
    margin-bottom: .9rem
}

.iw-nl-stat {
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.12)
}

    .iw-nl-stat:last-child {
        border-right: none
    }

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

    .iw-nl-stat span {
        font-size: .6rem;
        color: rgba(255,255,255,.48);
        text-transform: uppercase;
        letter-spacing: .05em
    }

.iw-nl-form {
    padding: .85rem 1.1rem 1.1rem;
    border-top: 1px solid rgba(255,255,255,.12)
}

.iw-nl-input {
    width: 100%;
    padding: .58rem .8rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.12);
    color: #fff;
    font-family: 'Inter',sans-serif;
    font-size: .8rem;
    outline: none;
    margin-bottom: .45rem;
    transition: border-color .15s,background .15s;
}

    .iw-nl-input::placeholder {
        color: rgba(255,255,255,.42)
    }

    .iw-nl-input:focus {
        border-color: rgba(255,255,255,.5);
        background: rgba(255,255,255,.18)
    }

.iw-nl-btn {
    width: 100%;
    padding: .62rem;
    border-radius: var(--radius-sm);
    border: none;
    background: #fff;
    color: var(--navy);
    font-family: 'Inter',sans-serif;
    font-size: .82rem;
    font-weight: 700;
    transition: transform .15s,box-shadow .15s;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

    .iw-nl-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(0,0,0,.2)
    }

.iw-nl-note {
    font-size: .65rem;
    color: rgba(255,255,255,.38);
    text-align: center;
    margin-top: .45rem
}

@media(max-width:900px) {
    .info-strip-inner {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:540px) {
    .info-strip-inner {
        grid-template-columns: 1fr
    }
}


/* ─────────────────────────────────────────
   UNIFIED PAGE LAYOUT
───────────────────────────────────────── */
.page-layout {
    max-width: var(--container);
    margin: 0 auto;
    padding: 2rem 2rem 3rem;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}

.page-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.page-right {
    position: sticky;
    top: 76px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: calc(110vh - 90px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: .5rem;
}

    .page-right::-webkit-scrollbar {
        width: 3px
    }

    .page-right::-webkit-scrollbar-track {
        background: transparent
    }

    .page-right::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 2px
    }

/* Identity block */
.tool-identity-block {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.75rem 2rem;
}

/* Content (tabs) block */
.tool-content-block {
    margin-top: 25px;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.75rem 2rem;
}


/* ─── TAB NAV ─── */
.tab-nav {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: .35rem;
    display: flex;
    gap: .25rem;
    margin-bottom: 1.75rem;
    overflow-x: auto
}

.tab-btn {
    padding: .5rem 1.1rem;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    font-size: .83rem;
    font-weight: 500;
    color: #273a9b;
    transition: all .15s;
    white-space: nowrap
}

    .tab-btn:hover {
        color: var(--sub);
        background: var(--bg)
    }

    .tab-btn.on {
        background: var(--navy);
        color: #fff;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(43,59,171,.25)
    }

/* ─── TAB PANELS ─── */
.tab-panel {
    display: none;
    animation: fadeUp .25s ease both
}

    .tab-panel.on {
        display: block
    }

/* ─── SECTION BLOCKS ─── */
.detail-section {
    margin-bottom: 2.5rem
}

.ds-title {
    font-family: 'Syne',sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem
}

    .ds-title::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border)
    }

/* ─── OVERVIEW ─── */
.overview-text p {
    font-size: .9rem;
    color: var(--sub);
    line-height: 1.85;
    margin-bottom: .9rem
}

    .overview-text p:last-child {
        margin-bottom: 0
    }

/* ─── KEY FEATURES ─── */
.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem
}

.feat-item {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.2rem;
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    transition: transform .15s,box-shadow .15s,border-color .15s;
    animation: cardIn .3s ease both
}

    .feat-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
        border-color: rgba(43,59,171,.18)
    }

.feat-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0
}

.feat-item-title {
    font-family: 'Syne',sans-serif;
    font-size: .85rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: .25rem
}

.feat-item-desc {
    font-size: .78rem;
    color: var(--sub);
    line-height: 1.6
}

/* ─── PERFORMANCE / BENCHMARK ─── */
.bench-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem;
    margin-bottom: 1.5rem
}

.bench-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    text-align: center;
    animation: cardIn .3s ease both
}

.bench-score {
    font-family: 'Syne',sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
    animation: countUp .5s ease both
}

.bench-label {
    font-size: .7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .35rem
}

.bench-change {
    font-size: .7rem;
    font-weight: 600;
    margin-top: .2rem
}

.bench-up {
    color: var(--green)
}

.bench-down {
    color: #ef4444
}

.bar-compare {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem
}

.bc-title {
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 1rem
}

.bc-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: .75rem
}

    .bc-row:last-child {
        margin-bottom: 0
    }

.bc-name {
    font-size: .8rem;
    font-weight: 500;
    color: var(--sub);
    width: 120px;
    flex-shrink: 0
}

.bc-track {
    flex: 1;
    height: 8px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden
}

.bc-fill {
    height: 100%;
    border-radius: 4px;
    animation: fillBar .8s ease both
}

    .bc-fill.self {
        background: linear-gradient(90deg,var(--navy),var(--navy-l))
    }

    .bc-fill.comp {
        background: var(--border)
    }

.bc-pct {
    font-size: .78rem;
    font-weight: 700;
    color: var(--dark);
    width: 36px;
    text-align: right;
    flex-shrink: 0
}

/* ─── PRICING ─── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem
}

.price-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    position: relative;
    transition: transform .15s,box-shadow .15s
}

    .price-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md)
    }

    .price-card.popular {
        border-color: var(--navy);
        box-shadow: 0 0 0 3px rgba(43,59,171,.1)
    }

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .22rem .75rem;
    border-radius: 100px;
    white-space: nowrap
}

.price-plan {
    font-family: 'Syne',sans-serif;
    font-size: .85rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .6rem
}

.price-amount {
    font-family: 'Syne',sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1
}

    .price-amount span {
        font-size: .95rem;
        font-weight: 500;
        color: var(--muted)
    }

.price-period {
    font-size: .75rem;
    color: var(--muted);
    margin-top: .2rem;
    margin-bottom: 1.1rem
}

.price-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.25rem
}

    .price-features li {
        font-size: .8rem;
        color: var(--sub);
        display: flex;
        align-items: flex-start;
        gap: .5rem
    }

        .price-features li::before {
            content: '✓';
            color: var(--green);
            font-weight: 700;
            font-size: .8rem;
            flex-shrink: 0;
            margin-top: .05rem
        }

        .price-features li.no::before {
            content: '✕';
            color: var(--muted)
        }

        .price-features li.no {
            color: var(--muted)
        }

.price-btn {
    width: 100%;
    padding: .65rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    background: #fff;
    color: var(--navy);
    font-size: .85rem;
    font-weight: 600;
    transition: all .15s
}

    .price-btn:hover {
        background: var(--bg);
        border-color: var(--navy)
    }

    .price-btn.primary {
        background: var(--navy);
        border-color: var(--navy);
        color: #fff;
        box-shadow: 0 2px 10px rgba(43,59,171,.28)
    }

        .price-btn.primary:hover {
            background: var(--navy-d)
        }

/* ─── USE CASES ─── */
.usecases-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: .85rem
}

.uc-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.2rem;
    display: flex;
    gap: .85rem;
    cursor: pointer;
    transition: all .15s;
    animation: cardIn .3s ease both
}

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

.uc-emoji {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1
}

.uc-title {
    font-family: 'Syne',sans-serif;
    font-size: .85rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: .25rem
}

.uc-desc {
    font-size: .77rem;
    color: var(--sub);
    line-height: 1.55
}
/* ─── WRITE REVIEW ─── */
.reviews-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.1rem
}

    .reviews-top .ds-title {
        margin-bottom: 0;
        flex: 1
    }

.btn-add-review {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .52rem 1.15rem;
    border-radius: var(--radius);
    border: none;
    background: var(--navy);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(43,59,171,.28);
    transition: background .15s,transform .15s;
    cursor: pointer
}

    .btn-add-review:hover {
        background: var(--navy-d);
        transform: translateY(-2px)
    }

    .btn-add-review svg {
        width: 13px;
        height: 13px;
        stroke: #fff;
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round;
        flex-shrink: 0
    }

.review-scroll {
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent
}

    .review-scroll::-webkit-scrollbar {
        width: 5px
    }

    .review-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px
    }
/* ─── REVIEWS ─── */
.reviews-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 1.25rem
}

.rh-score {
    text-align: center;
    flex-shrink: 0
}

.rh-big {
    font-family: 'Syne',sans-serif;
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1
}

.rh-stars {
    display: flex;
    gap: .15rem;
    justify-content: center;
    margin: .25rem 0
}

.rh-count {
    font-size: .75rem;
    color: var(--muted)
}

.rh-bars {
    flex: 1
}

.rh-bar-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .4rem;
    font-size: .75rem;
    color: var(--sub)
}

    .rh-bar-row span:first-child {
        width: 32px;
        flex-shrink: 0
    }

.rh-track {
    flex: 1;
    height: 6px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden
}

.rh-fill {
    height: 100%;
    border-radius: 3px;
    background: #f59e0b;
    animation: fillBar .8s ease both
}

.rh-pct {
    width: 30px;
    text-align: right;
    flex-shrink: 0;
    font-weight: 500
}

.review-scroll {
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent
}

    .review-scroll::-webkit-scrollbar {
        width: 5px
    }

    .review-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px
    }

.review-list {
    display: flex;
    flex-direction: column;
    gap: .85rem
}

.review-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    animation: cardIn .3s ease both
}

.rev-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: .75rem
}

.rev-user {
    display: flex;
    align-items: center;
    gap: .65rem
}

.rev-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    border: 1px solid var(--border);
    flex-shrink: 0
}

.rev-name {
    font-size: .83rem;
    font-weight: 600;
    color: var(--dark)
}

.rev-role {
    font-size: .7rem;
    color: var(--muted)
}

.rev-meta {
    text-align: right
}

.rev-stars {
    display: flex;
    gap: .1rem;
    justify-content: flex-end;
    margin-bottom: .2rem
}

.rev-date {
    font-size: .68rem;
    color: var(--muted)
}

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

.rev-body {
    font-size: .8rem;
    color: var(--sub);
    line-height: 1.7
}

.rev-foot {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .75rem;
    padding-top: .65rem;
    border-top: 1px solid var(--border)
}

.rev-helpful {
    font-size: .72rem;
    color: var(--muted)
}

.rev-vote {
    font-size: .72rem;
    font-weight: 600;
    color: var(--navy);
    padding: .18rem .55rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-blue);
    background: #fff;
    transition: all .15s
}

    .rev-vote:hover {
        background: rgba(43,59,171,.06)
    }

.rev-tag {
    font-size: .65rem;
    font-weight: 600;
    padding: .12rem .45rem;
    border-radius: 100px;
    background: var(--bg);
    color: var(--muted);
    border: 1px solid var(--border)
}

/* ─── ALTERNATIVES ─── */
.alts-list {
    display: flex;
    flex-direction: column;
    gap: .7rem
}

.alt-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all .15s;
    animation: cardIn .3s ease both
}

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

.alt-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0
}

.alt-name {
    font-family: 'Syne',sans-serif;
    font-size: .85rem;
    font-weight: 700;
    color: var(--dark)
}

.alt-cat {
    font-size: .68rem;
    color: var(--muted);
    margin-top: .1rem
}

.alt-score {
    margin-left: auto;
    text-align: right;
    flex-shrink: 0
}

.alt-score-n {
    font-family: 'Syne',sans-serif;
    font-size: .9rem;
    font-weight: 800;
    color: var(--navy)
}

.alt-score-l {
    font-size: .6rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em
}

.alt-price {
    font-size: .68rem;
    font-weight: 600;
    margin-top: .15rem
}

.alt-arrow {
    color: var(--muted);
    font-size: .85rem;
    flex-shrink: 0;
    transition: transform .15s
}

.alt-card:hover .alt-arrow {
    transform: translateX(3px);
    color: var(--navy)
}

.sidebar-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.2rem;
    width: 100%;
    box-sizing: border-box
}

.sc-title {
    font-family: 'Syne',sans-serif;
    font-size: .75rem;
    font-weight: 700;
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .85rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border)
}

/* Stats widget */
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .48rem 0;
    border-bottom: 1px solid var(--border);
    gap: .5rem
}

    .stat-row:last-child {
        border-bottom: none;
        padding-bottom: 0
    }

.stat-lbl {
    font-size: .76rem;
    color: var(--muted);
    flex-shrink: 0
}

.stat-val {
    font-size: .78rem;
    font-weight: 600;
    color: var(--dark);
    text-align: right
}

/* Quick links */
.ql-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .48rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .78rem;
    color: var(--sub);
    cursor: pointer;
    transition: color .15s
}

    .ql-item:last-child {
        border-bottom: none
    }

    .ql-item:hover {
        color: var(--navy)
    }

.ql-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    background: var(--bg);
    flex-shrink: 0
}

.ql-arrow {
    margin-left: auto;
    opacity: .4;
    font-size: .7rem;
    flex-shrink: 0
}

/* Similar tools widget */
.sim-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .48rem 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: all .15s
}

    .sim-item:last-child {
        border-bottom: none
    }

    .sim-item:hover .sim-name {
        color: var(--navy)
    }

.sim-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0
}

.sim-name {
    font-size: .78rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.2;
    transition: color .15s
}

.sim-cat {
    font-size: .65rem;
    color: var(--muted);
    margin-top: .06rem
}

.sim-price {
    margin-left: auto;
    font-size: .67rem;
    font-weight: 600;
    flex-shrink: 0
}

/* Newsletter widget */
.nl-card {
    background: linear-gradient(140deg,var(--navy),var(--navy-l));
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    border: none;
    width: 100%
}

.nl-title {
    font-family: 'Syne',sans-serif;
    font-size: .88rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .3rem
}

.nl-sub {
    font-size: .73rem;
    color: rgba(255,255,255,.65);
    line-height: 1.55;
    margin-bottom: .85rem
}

.nl-input {
    width: 100%;
    padding: .55rem .8rem;
    border-radius: var(--radius-sm);
    border: none;
    font-family: 'Inter',sans-serif;
    font-size: .8rem;
    background: rgba(255,255,255,.15);
    color: #fff;
    outline: none;
    margin-bottom: .45rem;
    transition: background .15s
}

    .nl-input::placeholder {
        color: rgba(255,255,255,.5)
    }

    .nl-input:focus {
        background: rgba(255,255,255,.22)
    }

.nl-btn {
    width: 100%;
    padding: .55rem;
    border-radius: var(--radius-sm);
    border: none;
    background: #fff;
    color: var(--navy);
    font-size: .8rem;
    font-weight: 700;
    transition: transform .15s
}

    .nl-btn:hover {
        transform: scale(1.02)
    }

/* ─── RELATED TOOLS SECTION ─── */
.related-section {
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 3.5rem 0
}

.rs-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 2rem
}

.rs-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem
}

.rs-title {
    font-family: 'Syne',sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -.02em
}

.rs-link {
    font-size: .82rem;
    font-weight: 600;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .9rem;
    border-radius: 100px;
    border: 1.5px solid var(--border-blue);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: all .15s
}

    .rs-link:hover {
        background: var(--navy);
        color: #fff;
        border-color: var(--navy)
    }

.related-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem
}

.rc {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem;
    transition: all .18s;
    animation: cardIn .3s ease both;
    cursor: pointer
}

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

.rc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: .7rem
}

.rc-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem
}

.rc-score {
    font-size: .65rem;
    font-weight: 700;
    color: var(--muted)
}

    .rc-score strong {
        color: var(--navy)
    }

.rc-name {
    font-family: 'Syne',sans-serif;
    font-size: .85rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: .25rem
}

.rc-cat {
    font-size: .67rem;
    color: var(--muted)
}

.rc-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .75rem;
    padding-top: .65rem;
    border-top: 1px solid var(--border)
}

.rc-price {
    font-size: .68rem;
    font-weight: 600
}

/* ─── FOOTER ─── */
footer {
    background: #0e1422;
    color: rgba(255,255,255,.5);
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 2rem 0
}

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

.footer-logo img {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .7
}

.footer-copy {
    font-size: .78rem
}

.footer-links {
    display: flex;
    gap: 1.5rem
}

    .footer-links a {
        font-size: .78rem;
        color: rgba(255,255,255,.45);
        transition: color .15s
    }

        .footer-links a:hover {
            color: #fff
        }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media(max-width:1024px) {
    .page-layout {
        grid-template-columns: 1fr
    }

    .page-right {
        position: static;
        max-height: none;
        overflow: visible
    }

    .related-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:768px) {
    .page-layout {
        padding: 1rem 1.1rem 2rem
    }

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

    .features-grid, .usecases-grid, .pricing-grid, .bench-grid {
        grid-template-columns: 1fr
    }

    .reviews-header {
        flex-direction: column;
        gap: 1rem
    }

    .related-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .tool-actions {
        flex-wrap: wrap
    }

    .tool-identity-block, .tool-content-block {
        padding: 1.25rem
    }
}

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

    .tab-nav {
        gap: 0
    }

    .tab-btn {
        padding: .45rem .7rem;
        font-size: .75rem
    }
}