/* ── TOKENS ── */
    :root {
        --gold: #0F1A2E;
        --gold-lt: #f0c060;
        --mist: #f5f5f3;
        --mist-2: #e8e8e6;
        --slate: #383838;
        --white: #ffffff;
        --radius: 10px;
        --shadow: 0 4px 28px rgba(0, 0, 0, .08);
        --shadow-h: 0 8px 40px rgba(0, 0, 0, .16);
        --ink: #0e0e0e;
        --ink2: #1e1e1e;
        --mid: #555555;
        --muted: #888888;
        --border: #e4e4e4;
        --off: #f8f7f5;
        --navy: #0f1a2e;
        --blue: #1a6fd4;
        --red: #c0392b;
        --ease: cubic-bezier(.22, 1, .36, 1);
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .about-hero {
        padding-top: 0px;
        background: var(--navy);
        position: relative;
        overflow: hidden;
    }

    .about-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("../../image/b.png") no-repeat;
        background-size: 100%;
        background-position: center;
        opacity: 0.7;
        pointer-events: none;
        z-index: 0;
    }

    .about-hero-inner {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: clamp(4.4rem, 6vw, 5rem) 0 clamp(8.4rem, 5vw, 7rem) 0 ;
    }

    .ah-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-size: .78rem;
        font-weight: 600;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 1);
        margin-bottom: .9rem;
    }

    .ah-eyebrow::before {
        content: '';
        width: 20px;
        height: 1px;
        background: rgba(255, 255, 255, .25);
        display: block;
        border-radius: 1px
    }

    .ah-title {
        font-weight: 600;
        font-size: clamp(2rem, 5vw, 3.8rem);
        color: #fff;
        line-height: 1.1;
        letter-spacing: -.01em;
        margin-bottom: .8rem;
        max-width: 700px;
        text-transform: uppercase;
    }

    .ah-title span {
        color: rgba(255, 255, 255, 0.49)
    }

    .ah-sub {
        font-size: clamp(.85rem, 1.3vw, .98rem);
        font-weight: 400;
        color: rgba(255, 255, 255, 0.67);
        line-height: 1.5;
        max-width: 540px;
    }



    .hero-chips {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: .6rem;
        margin-top: 1.8rem;
        justify-content: center;
    }

    .hero-chip {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        background: rgba(255, 255, 255, 0.17);
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 20px;
        padding: .35rem .85rem;
        font-size: .85rem;
        font-weight: 500;
        letter-spacing: .04em;
        color: rgb(192 192 192 / 96%);
    }

    .hero-chip svg {
        width: 13px;
        height: 13px;
        stroke: rgba(255, 255, 255, 0.77);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

 .hero-scroll {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .4rem;
    }

    .scroll-dot {
        width: 1px;
        height: 40px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
        border-radius: 1px;
        animation: scrollDot 2s ease-in-out infinite
    }

    @keyframes scrollDot {

        0%,
        100% {
            transform: scaleY(1);
            opacity: .7
        }

        50% {
            transform: scaleY(.5);
            opacity: .3
        }
    }

    .scroll-label {
        font-size: .6rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.68);
        font-weight: 500
    }


    /* ════ HERO ════ */
    .cat-hero {
        background: var(--ink);
        padding: 100px 24px 72px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .cat-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            radial-gradient(ellipse 65% 50% at 50% -5%, rgba(200, 150, 42, .16) 0%, transparent 70%),
            repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(255, 255, 255, .022) 59px, rgba(255, 255, 255, .022) 60px),
            repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255, 255, 255, .022) 59px, rgba(255, 255, 255, .022) 60px);
    }

    .cat-hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 18px;
    }

    .cat-hero-eyebrow span {
        display: block;
        width: 28px;
        height: 1px;
        background: var(--gold);
    }

    .cat-hero h1 {
        font-size: clamp(2rem, 5vw, 3.2rem);
        font-weight: 900;
        color: var(--white);
        letter-spacing: -.5px;
        line-height: 1.1;
        max-width: 660px;
        margin: 0 auto 16px;
    }

    .cat-hero h1 em {
        font-style: normal;
        color: var(--gold);
    }

    .cat-hero p {
        font-size: 15px;
        color: #777;
        max-width: 500px;
        margin: 0 auto;
        line-height: 1.7;
    }

    .cat-hero-stats {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 44px;
        gap: 0;
    }

    .cat-stat {
        padding: 0 30px;
        text-align: center;
        position: relative;
    }

    .cat-stat+.cat-stat::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 30px;
        width: 1px;
        background: rgba(255, 255, 255, .1);
    }

    .cat-stat-val {
        font-size: 1.55rem;
        font-weight: 900;
        color: var(--white);
        letter-spacing: -.5px;
        line-height: 1;
    }

    .cat-stat-val em {
        font-style: normal;
        color: var(--gold);
    }

    .cat-stat-lbl {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #555;
        margin-top: 4px;
    }


    /* ════ CATALOG SECTION ════ */
    .cat-section {
        background: var(--mist);
        padding: 64px 24px 80px;
    }

    .cat-inner {
        max-width: 1140px;
        margin: 0 auto;
    }

    .sec-label {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 28px;
    }

    .sec-label .line {
        width: 32px;
        height: 2px;
        background: var(--gold);
        flex-shrink: 0;
    }

    .sec-label .dots {
        display: flex;
        gap: 4px;
    }

    .sec-label .dots span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--gold);
        opacity: .4;
    }

    .sec-label .lbl {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--slate);
    }

    /* Filter tabs */
    .cat-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 36px;
    }

    .cat-filter {
        padding: 7px 18px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: .4px;
        border: 1.5px solid var(--mist-2);
        background: var(--white);
        color: var(--slate);
        cursor: pointer;
        transition: all .2s;
    }

    .cat-filter:hover {
        border-color: var(--gold);
        color: var(--gold);
    }

    .cat-filter.active {
        background: var(--ink);
        color: var(--white);
        border-color: var(--ink);
    }

    /* Grid */
    .cat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 22px;
    }

    /* ════ CARD ════ */
    .cat-card {
        background: var(--white);
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
        transition: box-shadow .25s, transform .25s;
    }

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

    .cat-card[data-hidden="true"] {
        display: none;
    }

    /* Cover */
    .card-cover {
        position: relative;
        aspect-ratio: 3/2;
        background: var(--ink-2);
        overflow: hidden;
    }

    .card-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .4s ease;
    }

    .cat-card:hover .card-cover img {
        transform: scale(1.04);
    }

    .card-no-cover {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: linear-gradient(135deg, #141414 0%, #222 100%);
    }

    .card-no-cover svg {
        width: 44px;
        height: 44px;
        color: rgba(255, 255, 255, .15);
    }

    .card-no-cover span {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .2);
    }

    /* Badges on cover */
    .card-badge {
        position: absolute;
        top: 12px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 20px;
    }

    .card-badge.lang {
        left: 12px;
        background: rgb(255, 255, 255);
        color: var(--gold);
        border: 1px solid rgb(13, 0, 39);
        backdrop-filter: blur(4px);
    }

    .card-badge.year {
        right: 12px;
        background: rgba(13, 13, 13, .99);
        color: #ffffff;
        backdrop-filter: blur(1px);
    }

    /* Download count pill */
    .card-dl-count {
        position: absolute;
        bottom: 12px;
        right: 12px;
        display: flex;
        align-items: center;
        gap: 5px;
        background: rgba(13, 13, 13, .75);
        color: #ccc;
        font-size: 9px;
        font-weight: 600;
        padding: 4px 9px;
        border-radius: 20px;
        backdrop-filter: blur(4px);
    }

    .card-dl-count svg {
        width: 10px;
        height: 10px;
    }

    /* Body */
    .card-body {
        padding: 20px 20px 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .card-category {
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 5px;
    }

    .card-title {
        font-size: 19px;
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -.15px;
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .card-desc {
        font-size: 12px;
        color: var(--slate);
        line-height: 1.6;
        flex: 1;
    }

    /* Meta row */
    .card-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--mist-2);
    }

    .card-meta-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: #bbb;
    }

    .card-meta-item svg {
        width: 12px;
        height: 12px;
    }

    .card-version {
        margin-left: auto;
        font-size: 10px;
        font-weight: 700;
        color: #ccc;
        background: var(--mist);
        padding: 2px 8px;
        border-radius: 10px;
    }

    /* CTA button */
    .card-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        padding: 13px 0;
        background: var(--ink);
        color: var(--white);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        border: none;
        cursor: pointer;
        border-radius: 0 0 var(--radius) var(--radius);
        position: relative;
        overflow: hidden;
        transition: color .3s;
    }

    .card-btn::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background: var(--gold);
        transition: width .32s ease;
        z-index: 0;
    }

    .card-btn:hover::before {
        width: 100%;
    }

    .card-btn>* {
        position: relative;
        z-index: 1;
    }

    .card-btn svg {
        width: 20px;
        height: 20px;
        transition: transform .2s;
    }

    .card-btn:hover svg {
        transform: translateY(2px);
    }

    /* ════ MODAL ════ */
    .dl-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(0, 0, 0, .6);
        backdrop-filter: blur(6px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s, visibility .3s;
    }

    .dl-overlay.open {
        opacity: 1;
        visibility: visible;
    }

    .dl-modal {
        background: var(--white);
        border-radius: 14px;
        width: 100%;
        max-width: 460px;
        overflow: hidden;
        box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
        transform: translateY(22px) scale(.96);
        transition: transform .36s cubic-bezier(.34, 1.5, .64, 1);
    }

    .dl-overlay.open .dl-modal {
        transform: none;
    }

    /* Modal header */
    .dl-head {
        background: var(--ink);
        padding: 24px 26px;
        position: relative;
    }

    .dl-head::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--gold);
    }

    .dl-eyebrow {
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: 5px;
    }

    .dl-title {
        font-size: 16px;
        font-weight: 800;
        color: var(--white);
        letter-spacing: -.2px;
        line-height: 1.3;
    }

    .dl-sub {
        font-size: 11px;
        color: #555;
        margin-top: 4px;
    }

    .dl-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .08);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #777;
        transition: background .2s, color .2s;
    }

    .dl-close:hover {
        background: rgba(255, 255, 255, .16);
        color: #fff;
    }

    .dl-close svg {
        width: 13px;
        height: 13px;
    }

    /* Modal body */
    .dl-body {
        padding: 22px 26px 26px;
    }

    .dl-field {
        margin-bottom: 14px;
    }

    .dl-field label {
        display: block;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: #999;
        margin-bottom: 6px;
    }

    .dl-field input,
    .dl-field select {
        width: 100%;
        padding: 10px 13px;
        border: 1.5px solid #e4e4e4;
        border-radius: 7px;
        font-size: 13px;
        color: var(--ink);
        background: #fafafa;
        outline: none;
        transition: border-color .2s, background .2s;
        appearance: none;
    }

    .dl-field input:focus,
    .dl-field select:focus {
        border-color: var(--gold);
        background: #fff;
    }

    .dl-field .err-msg {
        font-size: 11px;
        color: #e53e3e;
        margin-top: 4px;
        display: none;
    }

    .dl-field.has-err .err-msg {
        display: block;
    }

    .dl-field.has-err input,
    .dl-field.has-err select {
        border-color: #e53e3e;
    }

    .dl-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .dl-consent {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        margin: 16px 0 20px;
    }

    .dl-consent input[type="checkbox"] {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
        margin-top: 2px;
        accent-color: var(--gold);
    }

    .dl-consent span {
        font-size: 11px;
        color: #999;
        line-height: 1.5;
    }

    .dl-btn {
        width: 100%;
        padding: 13px;
        background: var(--ink);
        color: var(--white);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
        border: none;
        border-radius: 7px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        position: relative;
        overflow: hidden;
        transition: color .3s;
    }

    .dl-btn::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background: var(--gold);
        transition: width .32s ease;
        z-index: 0;
    }

    .dl-btn:hover:not(:disabled)::before {
        width: 100%;
    }

    .dl-btn>* {
        position: relative;
        z-index: 1;
    }

    .dl-btn svg {
        width: 17px;
        height: 17px;
    }

    .dl-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    /* Success panel */
    .dl-success {
        text-align: center;
        padding: 8px 0 4px;
        display: none;
    }

    .dl-success.show {
        display: block;
    }

    .dl-success-icon {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: #e8f5e9;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 14px;
    }

    .dl-success-icon svg {
        width: 24px;
        height: 24px;
        color: #2e7d32;
    }

    .dl-success h3 {
        font-size: 17px;
        font-weight: 800;
        color: var(--ink);
        margin-bottom: 6px;
    }

    .dl-success p {
        font-size: 13px;
        color: var(--slate);
        line-height: 1.6;
        margin-bottom: 18px;
    }

    .dl-dl-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 12px 26px;
        background: var(--ink);
        color: var(--white);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .5px;
        text-decoration: none;
        border-radius: 7px;
        transition: background .2s;
    }

    .dl-dl-btn:hover {
        background: var(--gold);
    }

    .dl-dl-btn svg {
        width: 15px;
        height: 15px;
    }

    /* ════ RESPONSIVE ════ */
    @media (max-width: 640px) {
        .cat-hero {
            padding: 80px 18px 56px;
        }

        .cat-stat {
            padding: 10px 16px;
        }

        .dl-row {
            grid-template-columns: 1fr;
        }

        .why-item+.why-item::before {
            display: none;
        }

        .why-inner {
            gap: 24px;
        }
    }