:root {
        --jc-teal: #00b894;
        --jc-teal-700: #008d73;
        --jc-teal-100: #e6f7f4;
        --jc-teal-50: #f3fbfa;

        --jc-black: #111111;
        --jc-ink: #171a1f;
        --jc-slate: #5b5d63;
        --jc-muted: #80858f;
        --jc-line: #e9ecef;
        --jc-soft: #f5f7f9;
        --jc-white: #ffffff;

        --jc-shadow:
            0 18px 60px rgba(17, 17, 17, 0.08);

        --jc-shadow-sm:
            0 8px 24px rgba(17, 17, 17, 0.07);

        --jc-radius: 16px;
        --jc-radius-lg: 24px;
        --jc-radius-xl: 34px;

        --jc-max: 1280px;
    }

    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        background: var(--jc-white);
        color: var(--jc-ink);
        font-family:
            Inter,
            ui-sans-serif,
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
    }

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

    button,
    input,
    select,
    textarea {
        font: inherit;
    }

    svg {
        display: block;
    }

    .jc-software-page,
    .jc-software-page * {
        box-sizing: border-box;
    }

    .jc-software-page {
        position: relative;
        overflow: hidden;
        background: var(--jc-white);
    }

    .jc-container {
        position: relative;
        z-index: 2;
        width: min(
            var(--jc-max),
            calc(100% - 40px)
        );
        margin: auto;
    }

    .jc-section {
        position: relative;
        padding: 104px 0;
        border-top: 1px solid var(--jc-line);
        background: var(--jc-white);
        overflow: hidden;
    }

    .jc-grid {
        display: grid;
        gap: 22px;
    }

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

    .jc-grid-3 {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .jc-grid-4 {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .jc-section-header {
        max-width: 840px;
        margin-bottom: 54px;
    }

    .jc-section-header.center {
        margin-inline: auto;
        text-align: center;
    }

    .jc-kicker {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 20px;
        color: var(--jc-teal-700);
        font-size: 12px;
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .jc-kicker::before {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--jc-teal);
        content: "";
    }

    .jc-title-xl {
        max-width: 1080px;
        margin: 0;
        font-size: clamp(50px, 7vw, 88px);
        font-weight: 720;
        letter-spacing: -0.065em;
        line-height: 0.96;
    }

    .jc-title-lg {
        margin: 0;
        font-size: clamp(36px, 4.8vw, 62px);
        font-weight: 680;
        letter-spacing: -0.05em;
        line-height: 1.02;
    }

    .jc-title-md {
        margin: 0;
        font-size: clamp(28px, 3.4vw, 44px);
        font-weight: 680;
        letter-spacing: -0.04em;
        line-height: 1.08;
    }

    .jc-lead {
        max-width: 790px;
        margin: 24px 0 0;
        color: var(--jc-slate);
        font-size: clamp(18px, 2vw, 22px);
        line-height: 1.62;
    }

    .jc-copy {
        color: var(--jc-slate);
        font-size: 17px;
        line-height: 1.7;
    }

    .jc-accent {
        color: var(--jc-teal-700);
    }

    /*
    BOTONES
    */

    .jc-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        margin-top: 34px;
    }

    .jc-btn {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 20px;
        border: 1px solid transparent;
        border-radius: 11px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 750;
        transition:
            transform 180ms ease,
            background 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease;
    }

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

    .jc-btn-primary {
        background: var(--jc-teal);
        color: var(--jc-white);
        box-shadow:
            0 9px 24px rgba(0, 184, 148, 0.25);
    }

    .jc-btn-primary:hover {
        background: var(--jc-teal-700);
    }

    .jc-btn-secondary {
        border-color: var(--jc-line);
        background: var(--jc-white);
        color: var(--jc-black);
    }

    .jc-btn-secondary:hover {
        border-color: rgba(0, 184, 148, 0.55);
    }

    .jc-arrow {
        transition: transform 180ms ease;
    }

    .jc-btn:hover .jc-arrow,
    .jc-card-link:hover .jc-arrow {
        transform: translateX(4px);
    }

    /*
    RECURSOS VISUALES
    */

    .jc-wave {
        position: absolute;
        z-index: 0;
        width: 760px;
        height: 390px;
        pointer-events: none;
    }

    .jc-wave.right {
        right: -110px;
        bottom: -80px;
    }

    .jc-wave.left {
        left: -150px;
        bottom: -70px;
        transform: scaleX(-1);
    }

    .jc-dot-field {
        position: absolute;
        z-index: 0;
        width: 145px;
        height: 145px;
        background-image:
            radial-gradient(
                var(--jc-teal) 1.3px,
                transparent 1.3px
            );
        background-size: 14px 14px;
        opacity: 0.24;
        pointer-events: none;
    }

    .jc-dot-field.top-left {
        top: 42px;
        left: 28px;
    }

    .jc-dot-field.bottom-right {
        right: 32px;
        bottom: 28px;
    }

    .jc-blob {
        position: absolute;
        z-index: 0;
        border: 1px solid rgba(0, 184, 148, 0.18);
        border-radius:
            46% 54% 38% 62%
            / 48% 42% 58% 52%;
        pointer-events: none;
    }

    .jc-blob.large {
        width: 480px;
        height: 480px;
    }

    .jc-blob.medium {
        width: 310px;
        height: 310px;
    }

    .jc-blob.right {
        top: 50%;
        right: -240px;
        transform:
            translateY(-50%)
            rotate(-16deg);
    }

    .jc-blob.left {
        top: 50%;
        left: -180px;
        transform:
            translateY(-50%)
            rotate(17deg);
    }

    /*
    HERO
    */

    .jc-hero {
        position: relative;
        min-height: 830px;
        display: flex;
        align-items: center;
        padding: 100px 0 80px;
        overflow: hidden;
        background:
            radial-gradient(
                circle at 79% 35%,
                rgba(0, 184, 148, 0.12),
                transparent 22%
            ),
            linear-gradient(
                180deg,
                #ffffff 0%,
                #fbfcfc 100%
            );
    }

    .jc-hero-grid {
        display: grid;
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(390px, 0.9fr);
        align-items: center;
        gap: 76px;
    }

    .jc-breadcrumb {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-bottom: 24px;
        color: var(--jc-muted);
        font-size: 12px;
        font-weight: 650;
    }

    .jc-breadcrumb a:hover {
        color: var(--jc-teal-700);
    }

    .jc-breadcrumb span {
        color: #b2b7bd;
    }

    .jc-hero-proof {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 28px;
        margin-top: 39px;
        color: var(--jc-slate);
        font-size: 13px;
    }

    .jc-proof-item {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .jc-proof-icon {
        display: grid;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        place-items: center;
        border-radius: 50%;
        background: var(--jc-teal-100);
        color: var(--jc-teal-700);
        font-size: 11px;
        font-weight: 800;
    }

    .jc-hero-visual {
        position: relative;
        min-height: 590px;
    }

    .jc-software-orb {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 410px;
        height: 410px;
        border-radius:
            42% 58% 55% 45%
            / 48% 42% 58% 52%;
        background:
            linear-gradient(
                145deg,
                #ffffff 5%,
                #eff8f6 42%,
                #c7eee7 100%
            );
        box-shadow:
            0 35px 80px rgba(0, 141, 115, 0.18),
            inset -18px -18px 45px rgba(0, 184, 148, 0.12);
        transform:
            translate(-50%, -50%)
            rotate(-14deg);
    }

    .jc-software-orb::after {
        position: absolute;
        inset: -45px;
        border: 1px solid rgba(0, 184, 148, 0.18);
        border-radius:
            50% 50% 43% 57%
            / 57% 42% 58% 43%;
        content: "";
        transform: rotate(22deg);
    }

    .jc-software-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 295px;
        height: 295px;
        border: 1px solid rgba(0, 184, 148, 0.3);
        border-radius:
            47% 53% 56% 44%
            / 41% 49% 51% 59%;
        transform:
            translate(-50%, -50%)
            rotate(10deg);
    }

    .jc-software-center {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        display: grid;
        width: 146px;
        height: 146px;
        place-items: center;
        border-radius: 50%;
        background: var(--jc-black);
        color: var(--jc-white);
        font-size: 17px;
        font-weight: 750;
        text-align: center;
        transform: translate(-50%, -50%);
        box-shadow:
            0 22px 55px rgba(17, 17, 17, 0.18);
    }

    .jc-software-node {
        position: absolute;
        z-index: 4;
        min-width: 132px;
        padding: 13px 15px;
        border: 1px solid var(--jc-line);
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: var(--jc-shadow-sm);
        font-size: 12px;
        font-weight: 750;
        text-align: center;
        backdrop-filter: blur(14px);
    }

    .jc-software-node.one {
        top: 7%;
        left: 50%;
        transform: translateX(-50%);
    }

    .jc-software-node.two {
        top: 35%;
        right: -1%;
    }

    .jc-software-node.three {
        right: 10%;
        bottom: 9%;
    }

    .jc-software-node.four {
        bottom: 4%;
        left: 31%;
        transform: translateX(-50%);
    }

    .jc-software-node.five {
        top: 35%;
        left: -3%;
    }

    /*
    CONTEXTO
    */

    .jc-context-layout {
        display: grid;
        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(0, 1.15fr);
        gap: 86px;
        align-items: start;
    }

    .jc-context-panel {
        border: 1px solid var(--jc-line);
        border-radius: var(--jc-radius-lg);
        background: var(--jc-white);
        box-shadow: var(--jc-shadow-sm);
        overflow: hidden;
    }

    .jc-context-item {
        display: grid;
        grid-template-columns:
            48px
            minmax(0, 1fr);
        gap: 18px;
        padding: 28px 30px;
        border-bottom: 1px solid var(--jc-line);
    }

    .jc-context-item:last-child {
        border-bottom: 0;
    }

    .jc-context-number {
        color: var(--jc-teal-700);
        font-size: 12px;
        font-weight: 800;
    }

    .jc-context-title {
        margin: 0 0 7px;
        font-size: 20px;
        font-weight: 680;
        letter-spacing: -0.025em;
    }

    .jc-context-text {
        margin: 0;
        color: var(--jc-slate);
        font-size: 15px;
    }

    /*
    QUÉ DESARROLLAMOS
    */

    .jc-solutions-grid {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .jc-solution-card {
        position: relative;
        min-height: 260px;
        padding: 29px;
        border: 1px solid var(--jc-line);
        border-radius: var(--jc-radius-lg);
        background: var(--jc-white);
        box-shadow: var(--jc-shadow-sm);
        overflow: hidden;
        transition:
            transform 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease;
    }

    .jc-solution-card:hover {
        transform: translateY(-4px);
        border-color: rgba(0, 184, 148, 0.35);
        box-shadow: var(--jc-shadow);
    }

    .jc-solution-icon {
        display: grid;
        width: 46px;
        height: 46px;
        place-items: center;
        margin-bottom: 36px;
        border-radius: 13px;
        background: var(--jc-teal-100);
        color: var(--jc-teal-700);
        font-size: 16px;
        font-weight: 800;
    }

    .jc-solution-title {
        position: relative;
        z-index: 2;
        margin: 0 0 10px;
        font-size: 22px;
        font-weight: 680;
        letter-spacing: -0.03em;
    }

    .jc-solution-text {
        position: relative;
        z-index: 2;
        margin: 0;
        color: var(--jc-slate);
        font-size: 14px;
    }

    .jc-solution-wave {
        position: absolute;
        right: -130px;
        bottom: -115px;
        width: 320px;
        height: 250px;
        opacity: 0.5;
    }

    /*
    SOFTWARE ESTÁNDAR O A MEDIDA
    */

    .jc-comparison-layout {
        display: grid;
        grid-template-columns:
            minmax(0, 0.78fr)
            minmax(0, 1.22fr);
        gap: 82px;
        align-items: start;
    }

    .jc-comparison-panel {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        border: 1px solid var(--jc-line);
        border-radius: var(--jc-radius-lg);
        background: var(--jc-white);
        box-shadow: var(--jc-shadow-sm);
        overflow: hidden;
    }

    .jc-comparison-column {
        padding: 30px;
    }

    .jc-comparison-column + .jc-comparison-column {
        border-left: 1px solid var(--jc-line);
    }

    .jc-comparison-label {
        display: inline-flex;
        margin-bottom: 34px;
        color: var(--jc-teal-700);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .jc-comparison-title {
        margin: 0 0 12px;
        font-size: 24px;
        font-weight: 680;
        letter-spacing: -0.03em;
    }

    .jc-comparison-text {
        margin: 0 0 23px;
        color: var(--jc-slate);
        font-size: 14px;
    }

    .jc-comparison-list {
        display: grid;
        gap: 13px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jc-comparison-list li {
        display: grid;
        grid-template-columns:
            18px
            minmax(0, 1fr);
        gap: 9px;
        font-size: 13px;
        font-weight: 650;
    }

    .jc-comparison-list li::before {
        color: var(--jc-teal-700);
        content: "✓";
    }

    /*
    PROCESO
    */

    .jc-process-layout {
        display: grid;
        grid-template-columns:
            minmax(0, 0.82fr)
            minmax(430px, 1.18fr);
        gap: 82px;
        align-items: center;
    }

    .jc-process-list {
        margin-top: 35px;
        border-top: 1px solid var(--jc-line);
    }

    .jc-process-item {
        display: grid;
        grid-template-columns:
            34px
            minmax(0, 1fr);
        gap: 14px;
        padding: 18px 0;
        border-bottom: 1px solid var(--jc-line);
    }

    .jc-process-number {
        color: var(--jc-teal-700);
        font-size: 11px;
        font-weight: 800;
    }

    .jc-process-item strong {
        display: block;
        margin-bottom: 4px;
        font-size: 16px;
    }

    .jc-process-item p {
        margin: 0;
        color: var(--jc-slate);
        font-size: 14px;
    }

    .jc-process-visual {
        position: relative;
        min-height: 610px;
        border: 1px solid var(--jc-line);
        border-radius: var(--jc-radius-xl);
        background: var(--jc-white);
        box-shadow: var(--jc-shadow);
        overflow: hidden;
    }

    .jc-process-track {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 76%;
        transform: translate(-50%, -50%);
    }

    .jc-process-line {
        position: absolute;
        top: 24px;
        bottom: 24px;
        left: 21px;
        width: 1px;
        background: rgba(0, 184, 148, 0.35);
    }

    .jc-process-step {
        position: relative;
        display: grid;
        grid-template-columns:
            44px
            minmax(0, 1fr);
        gap: 17px;
        margin-bottom: 22px;
    }

    .jc-process-step:last-child {
        margin-bottom: 0;
    }

    .jc-process-dot {
        position: relative;
        z-index: 2;
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        border: 1px solid rgba(0, 184, 148, 0.4);
        border-radius: 50%;
        background: var(--jc-white);
        color: var(--jc-teal-700);
        font-size: 11px;
        font-weight: 800;
    }

    .jc-process-content {
        padding: 11px 14px;
        border: 1px solid var(--jc-line);
        border-radius: 11px;
        background: var(--jc-white);
        box-shadow: var(--jc-shadow-sm);
    }

    .jc-process-content strong {
        display: block;
        margin-bottom: 3px;
        font-size: 14px;
    }

    .jc-process-content span {
        color: var(--jc-muted);
        font-size: 11px;
    }

    /*
    INTEGRACIONES
    */

    .jc-integration-layout {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(390px, 0.9fr);
        align-items: center;
        gap: 84px;
    }

    .jc-integration-list {
        margin-top: 34px;
        border-top: 1px solid var(--jc-line);
    }

    .jc-integration-item {
        display: grid;
        grid-template-columns:
            24px
            minmax(0, 1fr);
        gap: 14px;
        padding: 18px 0;
        border-bottom: 1px solid var(--jc-line);
    }

    .jc-integration-item strong {
        display: block;
        margin-bottom: 4px;
        font-size: 16px;
    }

    .jc-integration-item p {
        margin: 0;
        color: var(--jc-slate);
        font-size: 14px;
    }

    .jc-integration-map {
        position: relative;
        min-height: 530px;
        border: 1px solid var(--jc-line);
        border-radius: var(--jc-radius-xl);
        background:
            radial-gradient(
                circle at 50% 50%,
                rgba(0, 184, 148, 0.1),
                transparent 32%
            ),
            var(--jc-white);
        box-shadow: var(--jc-shadow);
        overflow: hidden;
    }

    .jc-integration-core {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        display: grid;
        width: 145px;
        height: 145px;
        place-items: center;
        border-radius:
            44% 56% 51% 49%
            / 55% 43% 57% 45%;
        background: var(--jc-black);
        color: var(--jc-white);
        text-align: center;
        transform:
            translate(-50%, -50%)
            rotate(-7deg);
    }

    .jc-integration-core span {
        transform: rotate(7deg);
        font-size: 16px;
        font-weight: 750;
    }

    .jc-integration-orbit {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 340px;
        height: 340px;
        border: 1px solid rgba(0, 184, 148, 0.26);
        border-radius:
            47% 53% 56% 44%
            / 41% 49% 51% 59%;
        transform:
            translate(-50%, -50%)
            rotate(10deg);
    }

    .jc-integration-node {
        position: absolute;
        z-index: 4;
        min-width: 118px;
        padding: 12px 14px;
        border: 1px solid var(--jc-line);
        border-radius: 10px;
        background: var(--jc-white);
        box-shadow: var(--jc-shadow-sm);
        font-size: 12px;
        font-weight: 750;
        text-align: center;
    }

    .jc-integration-node.one {
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
    }

    .jc-integration-node.two {
        top: 32%;
        right: 5%;
    }

    .jc-integration-node.three {
        right: 11%;
        bottom: 12%;
    }

    .jc-integration-node.four {
        bottom: 7%;
        left: 34%;
        transform: translateX(-50%);
    }

    .jc-integration-node.five {
        top: 35%;
        left: 3%;
    }

    /*
    BENEFICIOS
    */

    .jc-benefit-card {
        min-height: 260px;
        padding: 28px;
        border: 1px solid var(--jc-line);
        border-radius: var(--jc-radius-lg);
        background: var(--jc-white);
        box-shadow: var(--jc-shadow-sm);
    }

    .jc-benefit-number {
        display: inline-flex;
        margin-bottom: 36px;
        color: var(--jc-teal-700);
        font-size: 12px;
        font-weight: 800;
    }

    .jc-benefit-title {
        margin: 0 0 11px;
        font-size: 21px;
        font-weight: 680;
        letter-spacing: -0.025em;
    }

    .jc-benefit-text {
        margin: 0;
        color: var(--jc-slate);
        font-size: 14px;
    }

    /*
    IDEAL PARA
    */

    .jc-ideal-layout {
        display: grid;
        grid-template-columns:
            minmax(0, 0.8fr)
            minmax(0, 1.2fr);
        gap: 80px;
        align-items: start;
    }

    .jc-ideal-panel {
        border: 1px solid var(--jc-line);
        border-radius: var(--jc-radius-lg);
        background: var(--jc-white);
        box-shadow: var(--jc-shadow-sm);
        overflow: hidden;
    }

    .jc-ideal-item {
        display: grid;
        grid-template-columns:
            24px
            minmax(0, 1fr);
        gap: 14px;
        padding: 22px 25px;
        border-bottom: 1px solid var(--jc-line);
    }

    .jc-ideal-item:last-child {
        border-bottom: 0;
    }

    .jc-ideal-item p {
        margin: 0;
        color: var(--jc-slate);
        font-size: 15px;
    }

    /*
    FAQ
    */

    .jc-faq-list {
        border-top: 1px solid var(--jc-line);
    }

    .jc-faq-item {
        border-bottom: 1px solid var(--jc-line);
    }

    .jc-faq-item summary {
        position: relative;
        padding: 24px 45px 24px 0;
        cursor: pointer;
        list-style: none;
        font-size: 18px;
        font-weight: 680;
    }

    .jc-faq-item summary::-webkit-details-marker {
        display: none;
    }

    .jc-faq-item summary::after {
        position: absolute;
        top: 50%;
        right: 4px;
        color: var(--jc-teal-700);
        content: "+";
        font-size: 24px;
        font-weight: 400;
        transform: translateY(-50%);
    }

    .jc-faq-item[open] summary::after {
        content: "−";
    }

    .jc-faq-answer {
        max-width: 900px;
        padding: 0 0 25px;
        color: var(--jc-slate);
        font-size: 15px;
    }

    /*
    CONTACTO
    */

    .jc-contact-section {
        position: relative;
        padding: 108px 0;
        border-top: 1px solid var(--jc-line);
        background: var(--jc-white);
        overflow: hidden;
    }

    .jc-contact-layout {
        display: grid;
        grid-template-columns:
            minmax(0, 0.92fr)
            minmax(420px, 0.78fr);
        align-items: start;
        gap: 80px;
    }

    .jc-contact-card {
        padding: 30px;
        border: 1px solid var(--jc-line);
        border-radius: var(--jc-radius-lg);
        background: var(--jc-white);
        box-shadow: var(--jc-shadow);
    }

    .jc-form-title {
        margin: 0 0 23px;
        font-size: 21px;
        font-weight: 680;
        letter-spacing: -0.025em;
    }

    .jc-form-grid {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .jc-field {
        display: grid;
        gap: 7px;
    }

    .jc-field.full {
        grid-column: 1 / -1;
    }

    .jc-field label {
        font-size: 12px;
        font-weight: 700;
    }

    .jc-control {
        width: 100%;
        height: 46px;
        padding: 0 13px;
        border: 1px solid #dfe3e7;
        border-radius: 10px;
        outline: none;
        background: var(--jc-white);
        color: var(--jc-ink);
        transition:
            border-color 180ms ease,
            box-shadow 180ms ease;
    }

    textarea.jc-control {
        min-height: 108px;
        padding-top: 12px;
        resize: vertical;
    }

    .jc-control:focus {
        border-color: var(--jc-teal);
        box-shadow:
            0 0 0 4px rgba(0, 184, 148, 0.12);
    }

    .jc-control::placeholder {
        color: #9aa0a7;
    }

    .jc-submit {
        width: 100%;
        margin-top: 15px;
    }

    .jc-form-note {
        margin: 12px 0 0;
        color: var(--jc-muted);
        font-size: 11px;
    }

    /*
    RESPONSIVE
    */

    @media (max-width: 1050px) {
        .jc-hero-grid,
        .jc-context-layout,
        .jc-comparison-layout,
        .jc-process-layout,
        .jc-integration-layout,
        .jc-ideal-layout,
        .jc-contact-layout {
            grid-template-columns: 1fr;
        }

        .jc-hero-visual {
            min-height: 510px;
        }

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

    @media (max-width: 820px) {
        .jc-section,
        .jc-contact-section {
            padding: 76px 0;
        }

        .jc-solutions-grid,
        .jc-grid-3 {
            grid-template-columns: 1fr 1fr;
        }

        .jc-software-orb {
            width: 350px;
            height: 350px;
        }
    }

    @media (max-width: 640px) {
        .jc-container {
            width: min(
                100% - 24px,
                var(--jc-max)
            );
        }

        .jc-title-xl {
            font-size: clamp(45px, 14vw, 64px);
        }

        .jc-hero {
            min-height: auto;
            padding: 72px 0 55px;
        }

        .jc-hero-visual {
            min-height: 440px;
        }

        .jc-software-orb {
            width: 300px;
            height: 300px;
        }

        .jc-software-ring {
            width: 220px;
            height: 220px;
        }

        .jc-software-center {
            width: 116px;
            height: 116px;
            font-size: 14px;
        }

        .jc-software-node {
            min-width: 98px;
            padding: 10px;
            font-size: 10px;
        }

        .jc-software-node.two {
            right: -25px;
        }

        .jc-software-node.five {
            left: -25px;
        }

        .jc-solutions-grid,
        .jc-grid-2,
        .jc-grid-3,
        .jc-grid-4,
        .jc-form-grid,
        .jc-comparison-panel {
            grid-template-columns: 1fr;
        }

        .jc-comparison-column + .jc-comparison-column {
            border-top: 1px solid var(--jc-line);
            border-left: 0;
        }

        .jc-actions {
            display: grid;
        }

        .jc-btn {
            width: 100%;
        }

        .jc-context-item {
            grid-template-columns: 1fr;
        }

        .jc-process-visual {
            min-height: 570px;
        }

        .jc-integration-map {
            min-height: 470px;
        }

        .jc-integration-orbit {
            width: 270px;
            height: 270px;
        }

        .jc-integration-node {
            min-width: 98px;
            font-size: 10px;
        }

        .jc-contact-card {
            padding: 23px;
        }
    }

.jc-project-page{position:relative;overflow:hidden;background:var(--jc-white)}
.jc-project-hero{position:relative;min-height:820px;display:flex;align-items:center;padding:100px 0 82px;overflow:hidden;background:radial-gradient(circle at 79% 33%,rgba(0,184,148,.12),transparent 23%),linear-gradient(180deg,#fff 0%,#fbfcfc 100%)}
.jc-project-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);gap:76px;align-items:center}
.jc-project-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}.jc-project-chip{display:inline-flex;min-height:34px;align-items:center;padding:0 12px;border:1px solid rgba(0,184,148,.24);border-radius:999px;background:rgba(255,255,255,.82);color:var(--jc-slate);font-size:12px;font-weight:700}
.jc-project-visual{position:relative;min-height:590px}.jc-project-shell{position:absolute;inset:30px 0 0 35px;border:1px solid var(--jc-line);border-radius:28px;background:rgba(255,255,255,.94);box-shadow:var(--jc-shadow);overflow:hidden;transform:rotate(2deg)}
.jc-project-shell::after{position:absolute;right:-110px;bottom:-125px;width:300px;height:300px;border:1px solid rgba(0,184,148,.18);border-radius:47% 53% 56% 44%/41% 49% 51% 59%;content:"";transform:rotate(16deg)}
.jc-ui-topbar{display:flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-bottom:1px solid var(--jc-line);background:var(--jc-white)}.jc-ui-dot{width:8px;height:8px;border-radius:50%;background:#d9dde1}.jc-ui-dot.active{background:var(--jc-teal)}
.jc-ui-body{position:relative;z-index:2;display:grid;grid-template-columns:110px minmax(0,1fr);min-height:500px}.jc-ui-sidebar{padding:18px 12px;border-right:1px solid var(--jc-line);background:#fbfcfc}.jc-ui-sidebar span{display:block;height:9px;margin-bottom:13px;border-radius:999px;background:#e5e8ea}.jc-ui-sidebar span:nth-child(2),.jc-ui-sidebar span:nth-child(5){background:rgba(0,184,148,.24)}
.jc-ui-main{padding:22px}.jc-ui-title{width:44%;height:18px;margin-bottom:28px;border-radius:999px;background:var(--jc-black)}.jc-ui-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.jc-ui-card{min-height:120px;padding:15px;border:1px solid var(--jc-line);border-radius:15px;background:var(--jc-white)}.jc-ui-card strong{display:block;width:48%;height:10px;margin-bottom:16px;border-radius:999px;background:#cfd4d8}.jc-ui-line{height:8px;margin-bottom:8px;border-radius:999px;background:#edf0f2}.jc-ui-line.teal{width:68%;background:rgba(0,184,148,.25)}
.jc-story-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:84px;align-items:start}.jc-story-panel{border:1px solid var(--jc-line);border-radius:var(--jc-radius-lg);background:var(--jc-white);box-shadow:var(--jc-shadow-sm);overflow:hidden}.jc-story-item{display:grid;grid-template-columns:46px minmax(0,1fr);gap:17px;padding:26px 28px;border-bottom:1px solid var(--jc-line)}.jc-story-item:last-child{border-bottom:0}.jc-story-number{color:var(--jc-teal-700);font-size:12px;font-weight:800}.jc-story-item h3{margin:0 0 7px;font-size:20px;letter-spacing:-.025em}.jc-story-item p{margin:0;color:var(--jc-slate);font-size:14px;line-height:1.68}
.jc-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.jc-feature-card{position:relative;min-height:285px;padding:28px;border:1px solid var(--jc-line);border-radius:var(--jc-radius-lg);background:var(--jc-white);box-shadow:var(--jc-shadow-sm);overflow:hidden}.jc-feature-card::after{position:absolute;right:-95px;bottom:-110px;width:230px;height:230px;border:1px solid rgba(0,184,148,.16);border-radius:43% 57% 51% 49%/52% 44% 56% 48%;content:"";transform:rotate(15deg)}.jc-feature-index{position:relative;z-index:2;display:inline-flex;margin-bottom:34px;color:var(--jc-teal-700);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.jc-feature-card h3{position:relative;z-index:2;margin:0 0 11px;font-size:21px;line-height:1.17;letter-spacing:-.03em}.jc-feature-card p{position:relative;z-index:2;margin:0;color:var(--jc-slate);font-size:14px;line-height:1.68}
.jc-flow{display:grid;gap:0;margin-top:40px;border-top:1px solid var(--jc-line)}.jc-flow-step{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;padding:22px 0;border-bottom:1px solid var(--jc-line)}.jc-flow-step span{color:var(--jc-teal-700);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.jc-flow-step h3{margin:0 0 6px;font-size:18px;letter-spacing:-.02em}.jc-flow-step p{margin:0;color:var(--jc-slate);font-size:14px;line-height:1.65}
.jc-impact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.jc-impact-card{min-height:235px;padding:27px;border:1px solid var(--jc-line);border-radius:var(--jc-radius-lg);background:var(--jc-white);box-shadow:var(--jc-shadow-sm)}.jc-impact-card span{display:inline-flex;margin-bottom:32px;color:var(--jc-teal-700);font-size:12px;font-weight:800}.jc-impact-card h3{margin:0 0 10px;font-size:20px;letter-spacing:-.025em}.jc-impact-card p{margin:0;color:var(--jc-slate);font-size:14px;line-height:1.64}
.jc-related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.jc-related-card{position:relative;display:block;padding:25px 60px 25px 25px;border:1px solid var(--jc-line);border-radius:var(--jc-radius-lg);background:var(--jc-white);box-shadow:var(--jc-shadow-sm);transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease}.jc-related-card:hover{transform:translateY(-3px);border-color:rgba(0,184,148,.35);box-shadow:var(--jc-shadow)}.jc-related-card strong{display:block;margin-bottom:8px;font-size:19px;letter-spacing:-.02em}.jc-related-card span{color:var(--jc-slate);font-size:14px;line-height:1.58}.jc-related-card::after{position:absolute;top:50%;right:25px;color:var(--jc-teal-700);content:"→";font-size:20px;transform:translateY(-50%)}
.jc-case-cta{position:relative;padding:48px;border:1px solid rgba(0,184,148,.25);border-radius:var(--jc-radius-xl);background:radial-gradient(circle at 87% 18%,rgba(0,184,148,.15),transparent 28%),linear-gradient(180deg,#fbfffe 0%,#f4fbf9 100%);overflow:hidden}.jc-case-cta h2{max-width:920px;margin:0;font-size:clamp(34px,4vw,55px);line-height:1.03;letter-spacing:-.05em}.jc-case-cta p{max-width:780px;margin:20px 0 0;color:var(--jc-slate);font-size:18px;line-height:1.7}.jc-tech-stack{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.jc-tech-stack span{display:inline-flex;min-height:34px;align-items:center;padding:0 12px;border:1px solid var(--jc-line);border-radius:999px;background:var(--jc-soft);color:var(--jc-slate);font-size:12px;font-weight:700}
.jc-local-intro{position:relative;padding:36px;border:1px solid var(--jc-line);border-radius:var(--jc-radius-xl);background:radial-gradient(circle at 90% 10%,rgba(0,184,148,.11),transparent 24%),var(--jc-white);box-shadow:var(--jc-shadow-sm)}.jc-local-intro p{margin:0;color:var(--jc-slate);font-size:16px;line-height:1.75}.jc-local-intro p+p{margin-top:16px}
@media(max-width:1050px){.jc-project-hero-grid,.jc-story-grid{grid-template-columns:1fr}.jc-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.jc-impact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.jc-feature-grid,.jc-impact-grid,.jc-related-grid{grid-template-columns:1fr}.jc-project-hero{min-height:auto;padding:72px 0 56px}.jc-project-visual{min-height:460px}.jc-project-shell{inset:20px 0 0 0}.jc-ui-body{grid-template-columns:78px minmax(0,1fr)}.jc-flow-step{grid-template-columns:1fr;gap:8px}.jc-case-cta{padding:28px 24px}}