:root {
    --jc-blue: #063b78;
    --jc-blue-2: #0a66c2;
    --jc-sky: #eaf5ff;
    --jc-cyan: #18b7d8;
    --jc-orange: #ff8a00;
    --jc-ink: #062d5d;
    ;
    /* --jc-ink: #9c28a0; */
    --jc-muted: #64748b;
    --jc-line: #dbe7f3;
    --jc-soft: #f6faff;
    --white: #ffffff;
    --shadow: 0 15px 25px rgba(6, 59, 120, .14);
    --radius: 24px;
}

.page a {
    text-decoration: none;
}

.sol-nav {
    /* position: sticky; */
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .92);
    background: #f9fafb;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--jc-line)
}

.sol-container {
    width: min(1600px, 93vw);
    margin: 0 auto;
}

.sol-container.mid {
    display: flex;
    justify-content: center;
}


.sol-container.split {
    font-size: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    align-items: center;
}

.sol-container.split h2 {
    font-size: clamp(1.9rem, 3vw, 3rem);
    letter-spacing: -.035em;
}

.serv-container {
    width: 100%;
}

.sol-nav .sol-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    gap: 20px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--jc-blue);
    letter-spacing: .2px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--jc-blue), var(--jc-cyan));
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 12px 25px rgba(10, 102, 194, .22)
}

.brand small {
    display: block;
    font-weight: 600;
    color: var(--jc-muted);
    font-size: .75rem;
    margin-top: -3px
}

.sol-container.cards {
    max-width: 1200px;
    margin-top: 35px;
}

.sol-container .nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: .95rem;
    color: #334155;
    /* overflow-x: auto; */
    scrollbar-width: none;
    gap: 10px;
}

.nav-links a {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(240, 242, 247, 0.9) 100%);

    border: 1px solid rgba(180, 185, 200, 0.6);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 2px 10px rgba(120, 125, 145, 0.08);

    padding: 9px 14px;
    border-radius: 999px;
    color: inherit;
    white-space: nowrap;
    backdrop-filter: blur(8px);

    transition: all 220ms ease;
}

.nav-links a:hover {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(235, 238, 244, 1) 100%);

    border-color: rgba(131, 152, 209, 0.6);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 3px 12px rgba(120, 125, 145, 0.10);

    color: var(--jc-blue-2);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    padding: 13px 20px;
    font-weight: 600;
    transition: .25s ease;
    border: 1px solid transparent;
    white-space: nowrap
}

.btn.limit {
    max-width: 350px;
}

.btn-secondary {
    background: linear-gradient(135deg, var(--jc-orange), #ffb000);
    color: #1b2430;
    box-shadow: 0 16px 35px rgba(255, 138, 0, .28)
}

.btn.s {
    padding: 8px 15px;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(255, 138, 0, .36)
}

.btn-ghost {
    border-color: rgba(255, 255, 255, .36);
    color: #fff;
    background: rgba(255, 255, 255, .1)
}

.sol-hero {
    padding: 60px 0px 120px;
    margin: 0 auto;
    position: relative;
    background: radial-gradient(circle at 88% 10%, rgba(24, 183, 216, .25), transparent 28%), linear-gradient(135deg, #052e5d 0%, #073f82 48%, #061c38 100%);
    color: #fff;
}

.serv-hero {
    margin: -35px -35px 0px;
    background: radial-gradient(circle at 82% 12%, rgba(11, 93, 184, .17), transparent 34%), linear-gradient(135deg, #082d63 0%, #064a9f 56%, #0872d7 100%);
    color: #fff;
    padding: 35px;
}

.serv-hero p {
    color: #eaf3ff;
}

.serv-hero .grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 48px;
    align-items: center
}

.serv-container h1 {
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    line-height: .98;
    margin: 0 0 22px;
    letter-spacing: -1px;
}

.sol-hero:after {
    content: "";
    position: absolute;
    inset: auto -10% -50px -10%;
    height: 100px;
    background: var(--jc-soft);
    border-radius: 50% 50% 0% 0/100% 100% 0 0;
}

.sol-hero .grid {
    position: relative;
    z-index: 2;
    display: grid;
    /* grid-template-columns: 1.02fr .98fr; */
    grid-template-columns: 1.08fr .92fr;
    gap: 40px;
    align-items: center
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 8px 13px;
    border-radius: 999px;
    color: #dff7ff;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 20px
}

h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.1;
    margin: 0 0 22px;
    letter-spacing: -1px;
}

.lead {
    font-size: clamp(1.06rem, 1.5vw, 1.24rem);
    color: #d9ecff;
    max-width: 670px;
    margin: 0 0 30px;
}

.serv-lead {
    font-size: clamp(1.06rem, 1.5vw, 1rem);
    color: #d9ecff;
    margin: 0 0 30px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

.sol-auto-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.problem-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.problem-list li {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px;
    background: #f8fbff;
    border: 1px solid #e6efff;
    border-radius: 16px;
    font-weight: 600;
    color: var(--jc-ink);
}

.problem-list li .icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--jc-blue-2), var(--jc-cyan));
    color: #fff;
    margin: 0;
    font-weight: 600;
}

.trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 650px;
}

.trust.auto-grid {
    max-width: none;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.trust.c4 {
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
}

.trust-card {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 18px;
    background: rgba(255, 255, 255, .09)
}

.trust-card strong {
    display: block;
    font-size: 1.3rem;
    color: #fff;
    line-height: 1.1
}

.trust-card span {
    color: #c8def6;
    font-size: .9rem
}

.benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.benefit-card {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 24px;
    padding: 26px;
    backdrop-filter: blur(10px);
}

.benefit-card p {
    color: rgba(255, 255, 255, .78);
}

.device-scene {
    min-height: 520px;
    position: relative;
    display: grid;
    place-items: center
}

.device-card {
    background: #fff;
    border-radius: 26px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.device-card h3 {
    margin: 0 0 8px;
    color: #062d5d;
    font-size: 1.2rem;
}

.device-card p {
    margin: 0;
    color: #526176;
    font-size: .92rem;
}

.device-screen {
    position: relative;
    border: 1px solid var(--jc-line);
    border-radius: 22px;
    padding: 18px;
    background: linear-gradient(180deg, #f8fbff, #eef5ff);
    margin-bottom: 18px;
}

.device-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.device-tags .tag {
    border: 1px solid #d0e7ff;
    letter-spacing: 0.02em;
    padding: 6px 12px;
    background: #eef6ff;
    color: var(--jc-blue-2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.device-tags .tag::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: var(--jc-blue-2);
    border-radius: 50%;
    display: inline-block;
}

.barcode {
    height: 62px;
    border-radius: 14px;
    background: repeating-linear-gradient(90deg, #081827 0 4px, transparent 4px 8px, #081827 8px 10px, transparent 10px 15px);
    opacity: .88;
    margin: 12px 0;
}

.scan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
    font-weight: 600;
}

.scan-row .first {
    color: #16a34a;
}

.scan-row .second {
    color: #0067b1;
}

.scan-line {
    height: 12px;
    border-radius: 999px;
    background: #dbeafe;
    margin: 12px 0;
    overflow: hidden;
    position: relative;
}

.scan-line span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--jc-blue), #1fb6ff);
    border-radius: 999px;
}

.screen-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    color: var(--jc-muted);
    font-size: 13px;
    font-weight: 700;
}

.rfid-panel {
    width: min(550px, 100%);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 32px;
    padding: 20px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px)
}

.rfid-panel.no-limit {
    width: 100%;
    max-width: 900px;
}

.rfid-panel img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.panel-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px
}

.sol-dots {
    display: flex;
    gap: 7px
}

.sol-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #72d7ff
}

.dot:nth-child(2) {
    background: #ffd36e
}

.dot:nth-child(3) {
    background: #8dffb4
}

.reader {
    border-radius: 26px;
    background: linear-gradient(180deg, #f8fbff, #c9d9e9);
    padding: 22px;
    color: #123;
    position: relative;
    overflow: hidden
}

.reader h3 {
    margin: 0 0 8px;
    color: #062d5d;
    font-size: 1.2rem
}

.reader p {
    margin: 0;
    color: #526176;
    font-size: .92rem
}

.antenna-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 18px
}

.antenna-grid.col-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    font-size: 0.9rem;
}

.antenna {
    height: 80px;
    border-radius: 15px;
    background: linear-gradient(135deg, #fff, #dfeaf5);
    display: grid;
    place-items: center;
    color: #073f82;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(6, 59, 120, .08)
}

.tag-wave {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid rgba(24, 183, 216, .5);
    animation: pulse 2.4s infinite
}

.tag-wave:before,
.tag-wave:after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 2px solid rgba(24, 183, 216, .5)
}

.tag-wave:after {
    inset: 26px
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(.96);
        opacity: .8
    }

    50% {
        transform: scale(1.07);
        opacity: 1
    }
}

.pallet {
    margin-top: 18px;
    border-radius: 22px;
    background: #fff;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #123
}

.pallet-icon {
    width: 72px;
    height: 58px;
    border-radius: 14px;
    background: repeating-linear-gradient(90deg, #c98737 0 12px, #e2a958 12px 24px);
    box-shadow: inset 0 -14px 0 rgba(95, 55, 18, .18)
}

.colch-icon {
    width: 82px;
    height: 54px;
    border-radius: 14px;
    background: repeating-linear-gradient(0deg, #eef5fb 0 8px, #fff 8px 16px);
    border: 2px solid #c8d7e8;
}

.pallet .tag {
    background: #eaf5ff;
    color: #063b78;
    border-radius: 12px;
    padding: 9px 11px;
    font-weight: 900;
    font-size: .82rem
}

.sol-section {
    padding: 60px 0;
}

.serv-section {
    padding: 30px 0;
}

.section-soft {
    background: linear-gradient(180deg, var(--jc-soft) 0%, #fff 50%, var(--jc-soft) 100%)
}

.section-benefit {
    background: linear-gradient(135deg, #073f82, #031e3d);
    color: #fff;
}

.section-benefit::after {
    content: "";
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgb(8, 170, 202);
    right: -50px;
    top: -50px
}

.section-title {
    max-width: 1000px;
    margin: 0 auto 46px;
    text-align: center
}

.serv-section .section-title {
    max-width: 900px;
    margin: 0px 0px 25px;
    text-align: start;
}

.kicker {
    color: var(--jc-blue-2);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    margin-bottom: 10px
}

.sol-section h2 {
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -1.3px;
    margin: 0;
    color: #0b2442;
}

.serv-section h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.06;
    letter-spacing: -1.3px;
    color: var(--jc-blue);
}

.section-title p {
    color: var(--jc-muted);
    font-size: 1.08rem;
    margin: 16px auto 0;
    max-width: 840px
}

.serv-section .section-title p {
    color: var(--on-text);
    font-size: 1rem;
    max-width: none;
}

.section-benefit .section-title p {
    color: rgba(255, 255, 255, .78);
}

.sol-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px
}

.sol-cards.col-3 {
    grid-template-columns: repeat(3, 1fr);
}

.sol-cards.auto-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.auto-grid-tag {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.sol-card {
    background: #fff;
    border: 1px solid var(--jc-line);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: 0 14px 36px rgba(7, 63, 130, .07);
    transition: .25s ease
}

.sol-card.grid {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 14px;
    padding: 18px;
}

.sol-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.sol-card .svg-icon {
    height: 100px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #f7fbff, #eef6ff);
    border-radius: 18px;
    border: 1px solid #dfeaf7;
}

.svg-icon svg {
    width: 104px;
    height: 72px;
}

.sol-card .icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--jc-sky);
    color: var(--jc-blue);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.sol-card h3 {
    margin: 0 0 10px;
    color: #0b2442;
    font-size: 1.12rem;
}

.sol-card p {
    margin: 0;
    color: var(--jc-muted);
    font-size: .97rem
}

.serv-eyebrow {
    display: inline-block;
    color: var(--jc-blue-2);
    font-size: 1rem;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 900;
}

.serv-card-body h3 {
    margin: 5px 0px;
    font-size: 1.2rem;
    color: #082d63;
}

.serv-card-body p {
    color: var(--on-text);
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.mini-list {
    display: grid;
    gap: 6px;
    font-size: 0.85rem;
    /* color: #334155; */
    color: #4d5b70;
}

.note-box {
    position: relative;
    padding: 18px 20px;
    border-radius: 14px;
    color: var(--jc-blue);
    font-weight: 600;

    background-color: #f4f9ff;
    border-right: 5px solid #0091ff;
    border-left: 5px solid #0091ff;
}

.serv-note {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 14px;
}

.case {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 34px;
    align-items: center
}


.case-box {
    background: linear-gradient(135deg, #073f82, #031e3d);
    color: #fff;
    border-radius: 34px;
    padding: 36px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden
}

.case-box:after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(24, 183, 216, .16);
    right: -80px;
    top: -80px
}

.logo-chip {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 9px 13px;
    margin-bottom: 18px;
    font-weight: 600;
    color: #dff7ff
}

.case-box h2 {
    color: #fff;
    margin-bottom: 16px;
}

.case-box p {
    color: #dcecff;
    margin-bottom: 8px;
}

.case-list {
    display: grid;
    gap: 16px
}

.case-list.col-2 {
    grid-template-columns: repeat(2, 1fr);
}

.case-item {
    display: flex;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--jc-line);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(7, 63, 130, .06)
}

.case-item strong {
    display: block;
    color: #0b2442;
    margin-bottom: 4px
}

.case-item span {
    color: var(--jc-muted)
}

.case-item .check {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
            #ffffff 0%,
            #e9fff3 35%,
            #b2dad1 100%);

    color: #244a40;
    display: grid;
    place-items: center;
    font-weight: 900
}

.flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px
}

.flow.auto-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.flow-step {
    background: #fff;
    border: 1px solid var(--jc-line);
    border-radius: 24px;
    padding: 22px;
    min-height: 190px;
    box-shadow: 0 12px 30px rgba(7, 63, 130, .06)
}

.step-num {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--jc-blue-2), var(--jc-cyan));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900;
    margin-bottom: 10px
}

.flow-step h3 {
    font-size: 1rem;
    margin: 0 0 5px;
    color: var(--jc-ink);
}

.flow-step p {
    font-size: .94rem;
    margin: 0;
    color: var(--jc-muted);
}

.tech-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 80%;
    margin: 0 auto;
}

.tech-card {
    background: #fff;
    border: 1px solid var(--jc-line);
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 14px 36px rgba(7, 63, 130, .07)
}

.tech-card h3 {
    margin-top: 0;
    color: #0b2442;
    margin-bottom: 8px;
}

.tech-card p {
    color: var(--jc-muted);
}

.specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.spec {
    border-radius: 18px;
    background: var(--jc-soft);
    padding: 16px;
    border: 1px solid #e3eef9;
}

.spec b {
    display: block;
    color: var(--jc-blue);
    font-size: 1.1rem;
}

.spec span {
    color: var(--jc-muted);
    font-size: .9rem;
}

.software {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    max-width: 80%;
    margin: 0 auto;
}

.software.auto {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.software.col-2 {
    grid-template-columns: 1fr 1fr;
}

.glass-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 auto;
    max-width: 1100px;
}

.flow.col-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.metrics.col-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.metrics.grid-device {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.metrics.grid-device .sol-card {
    padding: 15px;
    border-radius: 16px;
}

.metrics b {
    display: block;
    font-size: 2.1rem;
    color: var(--jc-blue);
    line-height: 1;
}

.metrics strong {
    display: block;
    font-size: 1.3rem;
    color: var(--jc-blue);
    line-height: 1;
}

.metrics span {
    display: block;
    color: #334155;
    font-weight: 600;
    margin-top: 10px;
}

.metrics small {
    display: block;
    color: var(--jc-muted);
    margin-top: 6px;
}

.sol-card .big {
    font-size: 2rem;
    font-weight: 600;
    color: var(--jc-blue);
    line-height: 1.05;
    margin-bottom: 10px;
}

.sol-card.select {
    background: linear-gradient(135deg, #f7fcff, #eaf5ff);
}

.sol-card.glass {
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .1);
}

.sol-card.glass .check {
    color: #67a6f9;
    font-weight: 600;
}

.sol-card.glass h3 {
    color: #fff;
    font-size: 1.35rem;
}

.sol-card.glass li {
    color: rgba(255, 255, 255, .78);
}

.glass-grid .sol-card.glass ul {
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.glass-grid li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.software .sol-card ul {
    padding: 0;
    margin: 12px 0 0;
    list-style: none;
    color: var(--jc-muted);
}

.software .sol-card li {
    padding: 8px 0;
    border-top: 1px solid #bacfe68a;
}

.software .sol-card li:before {
    content: "•";
    color: var(--jc-orange);
    font-weight: 900;
    margin-right: 8px;
}

.cta {
    background: linear-gradient(135deg, #052e5d, #0a66c2);
    color: #fff;
    border-radius: 36px;
    padding: 46px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 30px;
    box-shadow: 0 28px 70px rgba(6, 59, 120, .23)
}

.cta.min {
    max-width: 80%;
    margin: auto;
}

.cta.min span {
    color: var(--jc-orange);
}

.cta h2 {
    color: #fff;
    margin-bottom: 16px;
}

.cta.min h2 {
    font-size: 2rem;
}

.cta p {
    color: #ddf0ff;
    margin: 0;
    max-width: 760px
}

.mock-browser {
    background: #fff;
    border: 1px solid var(--jc-line);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(8, 59, 131, .12);
}

.browser-top {
    height: 42px;
    background: #e3edf7;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    border-bottom: 1px solid var(--jc-line);
}

.bw-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #99acc4;
}

.browser-screen {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 2 / 1;
    background: #fff;
    overflow: hidden;
}

.browser-screen img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    transition:
        opacity .45s ease,
        transform .6s ease;
}

.phone-stage {
    position: relative;
    display: grid;
    grid-template-columns: auto auto;

    justify-content: center;
    gap: 38px;
    align-items: start;
}

.phone {
    perspective: 900px;
    /* display: flex;
    justify-content: center; */
}

.phone-inner {
    position: relative;

    background-color: #1a1a1a;
    border-radius: 20px;
    padding: 8px;

    overflow: hidden;

    box-shadow:
        0px 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 10px #333;

    display: inline-flex;

    transition:
        transform .9s cubic-bezier(.65, .05, .36, 1),
        filter .6s ease;

    transform-style: preserve-3d;

    transform: rotateY(0deg);
    image-rendering: auto;
}

.phone img {
    display: block;

    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 600px;

    border-radius: 15px;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform: translateZ(0);

    image-rendering: auto;
}


@media (max-width: 1440px) {
    .sol-container.grid.img {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 980px) {
    .sol-container.split {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    .sol-container.split.reverse {
        flex-direction: column-reverse;
    }

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

    .sol-container.grid {
        grid-template-columns: 1fr;
    }

    .device-scene {
        min-height: auto;
    }

    .sol-cards {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .case {
        grid-template-columns: 1fr;
    }

    .cta {
        grid-template-columns: 1fr;
        padding: 32px
    }

    .tech-grid {
        grid-template-columns: 1fr;
    }

    .software {
        grid-template-columns: 1fr;
    }

    .software.auto {
        grid-template-columns: 1fr;
    }
}

@media (max-width:620px) {
    .sol-cards.col-3 {
        grid-template-columns: 1fr;
    }

    .glass-grid {
        grid-template-columns: 1fr;
    }

    .case-list.col-2 {
        grid-template-columns: 1fr;
    }

    .metrics.grid-device {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .benefits {
        grid-template-columns: 1fr;
    }

    .sol-cards.auto-grid {
        grid-template-columns: 1fr;
    }

    .btn {
        padding: 10px 15px;
    }

    .btn-secondary {
        box-shadow: 0 5px 10px rgba(255, 138, 0, .28);
    }

    .btn-secondary:hover {
        box-shadow: 0 8px 15px rgba(255, 138, 0, .36);
    }

    .hero-actions {
        max-width: 350px;
        margin: 0 auto 34px;
    }

    .sol-cards,
    .flow,
    .specs {
        grid-template-columns: 1fr;
    }

    .antenna-grid.col-4 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .software.col-2 {
        grid-template-columns: 1fr;
    }

    .flow.col-4 {
        grid-template-columns: 1fr;
    }

    .sol-container.scroll {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .metrics {
        grid-template-columns: 1fr;
    }

    .sol-hero {
        padding: 40px 0px 120px;
    }

    .reader {
        padding: 15px;
    }

    .antenna {
        height: 60px;
        border-radius: 10px;
    }

    h1 {
        letter-spacing: -1.4px
    }

    .sol-section {
        padding: 62px 0
    }

    .section-title {
        margin-bottom: 30px;
    }

    .tech-grid {
        max-width: none;
    }

    .software {
        max-width: none;
    }

    .rfid-panel {
        padding: 18px
    }

    .cta {
        border-radius: 26px
    }

    .hero-actions {
        display: grid
    }

    .btn {
        width: 100%
    }

    .phone-inner {
        border-radius: 20px;
        padding: 7px;
    }

    .phone img {
        border-radius: 15px;
    }
}

@media (max-width: 450px) {
    .scan-row {
        flex-direction: column;
    }

    .metrics.col-2 {
        grid-template-columns: 1fr;
    }

    .pallet {
        display: flex;
        flex-direction: column;
        justify-items: center;
    }

    .phone-inner {
        border-radius: 15px;
        padding: 5px;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 40px, rgb(51, 51, 51) 0px 0px 0px 7px;
    }

    .phone img {
        border-radius: 10px;
    }
}


.serv-toolbar {
    display: grid;
    grid-template-columns: 1.3fr .7fr .7fr;
    gap: 12px;
    margin-bottom: 18px;
}

.serv-toolbar input,
.serv-toolbar select {
    width: 100%;
    height: 48px;
    border: 1px solid #cfdbea;
    border-radius: 14px;
    padding: 0 14px;
    background: white;
    color: #17223a;
    font-weight: 600;
    outline: none
}

.serv-toolbar input:focus,
.serv-toolbar select:focus {
    border-color: #0b5db8;
    box-shadow: 0 0 0 5px rgba(11, 93, 184, .1)
}

.table-card {
    background: white;
    border: 1px solid var(--jc-line);
    border-radius: 15px;
    box-shadow: 0 18px 45px rgba(13, 55, 99, 0.12);
    overflow: hidden;
}

.table-meta {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--jc-line);
}

.table-meta strong {
    color: #082d63
}

.table-tag {
    overflow: auto;
    max-height: 480px;
}

.table-tag table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px;
    min-width: 1320px;
    font-size: 0.85rem;
}

.table-tag thead th {
    position: sticky;
    top: 0;
    background: #082d63;
    color: white;
    padding: 13px 12px;
    text-align: left;
    z-index: 2;
    font-size: 0.8rem;
    letter-spacing: .25px;
    /* white-space: nowrap; */
    text-align: center;
}

.table-tag tbody td {
    padding: 12px;
    border-bottom: 1px solid #e9eff6;
    vertical-align: middle;
    color: #233044;
    text-align: center;
}

.table-comp {
    overflow: auto;
    border-radius: 14px;
    border: 1px solid var(--jc-line);
    box-shadow: 0 16px 44px rgba(8, 59, 131, .08);
    background: #fff;
}

.table-comp table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1220px;
    font-size: 0.95rem;
    background: #fff;
}

.table-comp thead th {
    position: sticky;
    padding: 13px 12px;
    text-align: left;
    /* white-space: nowrap; */
    background: #f0f6ff;
    color: var(--jc-blue);
    font-size: .88rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.table-comp thead th .nn {
    text-transform: none;
}

.td-focus {
    display: inline-flex;
    border-radius: 10px;
    padding: 5px 10px;
    background: #ffa938;
    color: white;
    font-weight: 600;
}

.table-comp tbody td {
    padding: 12px;
    border-bottom: 1px solid #e9eff6;
    vertical-align: middle;
    color: #233044;
}

tbody tr:hover {
    background: #f6fbff
}

/* .antenna-cell {
     min-width: 250px 
} */

.antenna-cell img {
    max-width: 128px;
    max-height: 62px;
    object-fit: contain;
    border: 1px solid #dfe8f3;
    border-radius: 10px;
    background: white;
    padding: 6px;
    margin: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .05)
}

.chip-feature {
    min-width: 280px;
    /* color: #475569 */
}

.distance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eaf4ff;
    color: #064a9f;
    font-weight: 900;
    white-space: nowrap
}

.sol-feature-list {
    display: grid;
    gap: 13px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.sol-feature-list li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    color: #44536b;
}

.sol-feature-list.back li {
    color: #dcecff;
}

.sol-feature-list li::before {
    content: "✓";
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e2f7df;
    color: #0a6612;
    font-size: .82rem;
    font-weight: 900;
    margin-top: 1px;
}

.sol-feature-list.back li::before {
    background: #ffffff;
    border-radius: 6px;
    color: rgb(18, 180, 32);
    font-size: 1rem;
    font-weight: 600;
}

@media(max-width:1500px) {
    .serv-hero .grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media(max-width:1400px) {
    .case.sec-tall {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

@media(max-width:1100px) {
    .sol-cards.auto-grid-tag {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .sol-card.grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media(max-width:980px) {
    .sol-cards.col-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .case.sec-tall {
        grid-template-columns: 1fr;
    }

    .table-comp table {
        font-size: 0.85rem;
    }
}

@media(max-width:640px) {
    .sol-cards.col-3{
        grid-template-columns: repeat(1, 1fr);
    }
    .serv-hero {
        margin: -30px -15px 0px;
        padding: 30px 15px;
    }

    .trust.c4 {
        grid-template-columns: 1fr 1fr;
    }

    .sol-card.grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sol-card .svg-icon {
        width: fit-content;
        height: 100%;
    }

    .serv-toolbar {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 18px;
    }

    .cta h2 {
        font-size: 1.7rem;
    }

    .cta p {
        font-size: 0.9rem;
    }

    .cta.min {
        max-width: none;
        margin: auto;
    }
}

.sol-resalt-tittle{
    color: var(--jc-orange);
    position: relative;
    display: inline-block;
}

.sol-resalt-tittle::after{
    content: "by JC Servicios"; 
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0px; 
    white-space: nowrap;
    vertical-align: middle;
}