:root {
    --brand: #b40000;
    --brand2: #d82020;
    --text: #1f2937;
    --muted: #6b7280;
    --bg: #f6f7fb;
    --card: #ffffff;
    --line: #e7e9f1;
    --shadow: 0 10px 30px rgba(15, 23, 42, .08);
    --radius: 18px;
}

* {
    box-sizing: border-box
}





/* HERO */
.hero {
    border-radius: 24px;
    padding: 26px 26px 18px;
    background: linear-gradient(135deg,var(--brand) 0%, var(--brand2) 55%, #f23a3a 120%);
    color: #fff;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

    .hero:before {
        content: "";
        position: absolute;
        inset: -120px -120px auto auto;
        width: 340px;
        height: 340px;
        border-radius: 999px;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
        transform: rotate(18deg);
        pointer-events: none;
    }

    .hero h3 {
        margin: 0 0 10px;
        font-size: 1.2em;
        line-height: 1.18;
        font-weight: 800;
        letter-spacing: .2px;
        color: #fff;
    }
    .hero b{color:#fff}

    .hero p {
        margin: 0; 
        font-size: 15.8px;
        line-height: 1.8;
        opacity: .95;
    }

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    font-size: 13.6px;
    white-space: nowrap;
}

    .pill b {
        font-weight: 800
    }

    .pill .dot {
        width: 8px;
        height: 8px;
        border-radius: 99px;
        background: rgba(255,255,255,.85);
        box-shadow: 0 0 0 3px rgba(255,255,255,.15);
    }

/* SECTION CARD */
.section {
    margin-top: 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(15,23,42,.05);
    overflow: hidden;
}

    .section .head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 18px;
        border-bottom: 1px solid rgba(180,0,0,.10);
        background: linear-gradient(180deg, rgba(180,0,0,.04) 0%, rgba(180,0,0,0) 100%);
    }

.badgeIcon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 10px 18px rgba(180,0,0,.18);
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 900;
}

.section h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 850;
    color: var(--brand);
    letter-spacing: .2px;
}

.section .body {
    padding: 16px 18px 18px
}

.section p {
    margin: 0 0 10px;
    line-height: 1.85;
    color: var(--text);
    font-size: 15.5px;
}

    .section p:last-child {
        margin-bottom: 0
    }

.muted {
    color: var(--muted)
}

.k {
    color: var(--brand);
    font-weight: 900;
}

/* GRID */
.grid2 {
    display: grid;
    gap: 14px
}

@media(min-width:900px) {
    .grid2 {
        grid-template-columns: 1fr 1fr
    }
}

/* Benefit/Feature cards */
.miniCard {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    padding: 14px 14px 12px;
    box-shadow: 0 10px 24px rgba(15,23,42,.04);
    border-bottom: 4px solid #d8b4b4;
}

    .miniCard .t {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-weight: 850;
        color: #111827;
        margin: 0 0 6px;
        font-size: 16px;
    }

    .miniCard .pin {
        width: 10px;
        height: 10px;
        border-radius: 99px;
        background: var(--brand);
        margin-top: 6px;
        box-shadow: 0 0 0 4px rgba(180,0,0,.10);
        flex: 0 0 auto;
    }

    .miniCard .d {
        margin: 0;
        color: var(--muted);
        line-height: 1.8;
        font-size: 14.8px
    }

/* Lists */
ul.clean {
    margin: 10px 0 0;
    padding-left: 18px
}

    ul.clean li {
        margin: 8px 0;
        line-height: 1.85;
        color: var(--text)
    }

    ul.clean b {
        color: #111827
    }

/* Package & Pinout placeholder blocks (image slot only) */
.mediaSlot {
    margin-top: 14px;
    border: 1px dashed rgba(180,0,0,.30);
    border-radius: 16px;
    padding: 28px 14px;
    text-align: center;
    color: #6b7280;
}

/* Specs table (single, not split) */
table.spec {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
}

    table.spec th, table.spec td {
        padding: 14px 14px;
        border-bottom: 1px solid var(--line);
        font-size: 14.8px;
        line-height: 1.55;
        vertical-align: top;
    }

    table.spec th {
        text-align: left;
        background: rgba(180,0,0,.04);
        color: #111827;
        font-weight: 900;
        width: 34%;
    }

    table.spec tr:last-child th, table.spec tr:last-child td {
        border-bottom: none
    }

    table.spec td {
        color: #374151
    }

/* Application block */
.appTop {
    display: grid;
    gap: 14px;
    align-items: stretch;
}

@media(min-width:980px) {
    .appTop {
        grid-template-columns: 1fr
    }
}

.appGrid {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

@media(min-width:900px) {
    .appGrid {
        grid-template-columns: 1fr 1fr
    }
}

.appCard {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    padding: 16px 14px 14px;
    box-shadow: 0 10px 24px rgba(15,23,42,.04);
    display: flex;
    flex-direction: column; /* 变为竖排：图标在上 */
    align-items: center;
    text-align: center;
    gap: 10px;
}

.appIco {
    width: 80px;
    height: 80px;
    border-radius: 999px; /* 圆形 */
    overflow: hidden; /* 裁切成圆 */
    background: rgba(180,0,0,.08);
    border: 1px solid rgba(180,0,0,.18);
    display: grid;
    place-items: center;
    padding: 0;
    box-shadow: 0 10px 20px rgba(180,0,0,.12);
}

    .appIco img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.appCard h4 {
    margin: 2px 0 6px;
    font-size: 16px;
    font-weight: 900;
    color: #111827;
}

.appCard p {
    margin: 0;
    color: var(--muted);
    font-size: 14.6px;
    line-height: 1.8
}

/* Disclaimer */
.noteBox {
    margin-top: 12px;
    border: 1px solid rgba(180,0,0,.18);
    background: rgba(180,0,0,.04);
    border-radius: 16px;
    padding: 14px;
    color: #374151;
    line-height: 1.9;
    font-size: 14.8px;
}