﻿.clinictus-journey-wrap {
            background: #fafafa;
            padding: 1rem 1rem 0;
        }

        .clinictus-journey-hero-slot {
            width: min(1280px, calc(100% - 2rem));
        }

        .clinictus-home-main > .container {
            padding-top: 0.45rem !important;
        }

        .main-banner.main-banner--journey {
            height: clamp(380px, 30vw, 470px);
        }

        .main-banner.main-banner--journey:after {
            bottom: 75px;
        }

        .main-banner.main-banner--journey .inner-content.clinictus-journey-hero-slot {
            top: 48%;
        }

        .main-banner.main-banner--journey .pt-img4 {
            bottom: 6%;
        }

        .main-banner.main-banner--journey .pt-img6 {
            bottom: 72%;
            z-index: 0;
            pointer-events: none;
        }

        .main-banner.main-banner--journey .pt-img5 {
            bottom: 320px;
            z-index: 0;
            pointer-events: none;
        }

        .clinictus-journey-banner {
            width: min(1280px, 100%);
            margin: 0 auto;
            padding: clamp(1.25rem, 3vw, 2.2rem);
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.78);
            border-radius: 1.75rem;
            background:
                radial-gradient(circle at 10% 12%, rgba(31, 34, 120, 0.12), transparent 28%),
                radial-gradient(circle at 88% 18%, rgba(6, 182, 212, 0.12), transparent 28%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.92));
            box-shadow: 0 18px 55px rgba(31, 41, 55, 0.12);
        }

        .clinictus-journey-header {
            margin-bottom: clamp(1.25rem, 2.6vw, 2.25rem);
            text-align: center;
        }

        .clinictus-journey-title {
            margin: 0 0 0.65rem;
            color: #111827;
            font-size: clamp(1.75rem, 3vw, 3rem);
            font-weight: 900;
            letter-spacing: -0.045em;
            line-height: 1;
        }

        .main-banner .clinictus-journey-wrap--hero {
            position: relative;
            z-index: 2;
            background: transparent;
            padding: 0;
        }

        .main-banner .clinictus-journey-wrap--hero .clinictus-journey-banner {
            border-color: rgba(255, 255, 255, 0.86);
            background:
                radial-gradient(circle at 10% 12%, rgba(31, 34, 120, 0.12), transparent 28%),
                radial-gradient(circle at 88% 18%, rgba(245, 158, 11, 0.12), transparent 28%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(239, 246, 255, 0.9));
            box-shadow: 0 24px 70px rgba(31, 41, 55, 0.16);
            backdrop-filter: blur(10px);
        }

        .main-banner .clinictus-journey-wrap--hero .clinictus-journey-header {
            margin-top: clamp(0.85rem, 1.35vw, 1.35rem);
            margin-bottom: clamp(1rem, 2.2vw, 1.85rem);
        }

        .main-banner .clinictus-journey-wrap--hero .clinictus-journey-title {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 0 -1.2rem;
            padding: 1.35rem 0.95rem;
            border-radius: 0.8rem;
            background-image: url('{{ url('images/shap/ext-blue.png') }}');
            background-position: center;
            background-repeat: repeat;
            color: #1f2278;
            font-size: clamp(1.15rem, 1.9vw, 1.55rem);
            font-weight: 900;
            letter-spacing: 0;
            line-height: 1.25;
        }

        .clinictus-journey-eyebrow {
            display: flex;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            align-items: center;
            margin-top: 10px;
            margin-bottom: clamp(0.55rem, 1vw, 0.95rem);
            justify-content: center;
            gap: 0.45rem;
            padding: 0.55rem 0.9rem;
            border-radius: 999px;
            background: #eef2ff;
            color: #1f2278;
            font-size: 0.78rem;
            font-weight: 900;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .clinictus-journey-scroll {
            overflow-x: auto;
            padding: 1.25rem 0.15rem 0.9rem;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
        }

        .clinictus-journey-scroll::-webkit-scrollbar {
            height: 0.45rem;
        }

        .clinictus-journey-scroll::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: rgba(31, 34, 120, 0.16);
        }

        .clinictus-journey-steps {
            position: relative;
            display: flex;
            align-items: flex-start;
            width: max-content;
            margin: 0 auto;
        }

        .clinictus-journey-step {
            flex: 0 0 106px;
            text-align: center;
            animation: clinictusJourneyRise 0.55s ease both;
            animation-delay: calc(var(--step-index) * 60ms);
        }

        .clinictus-journey-connector {
            position: relative;
            flex: 0 0 42px;
            height: 106px;
            animation: clinictusJourneyRise 0.55s ease both;
            animation-delay: calc(var(--step-index) * 60ms + 110ms);
        }

        .clinictus-journey-connector::before {
            content: "";
            position: absolute;
            top: 49px;
            right: 6px;
            left: -1px;
            height: 0.45rem;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--from), var(--to));
            opacity: 0.72;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
        }

        .clinictus-journey-connector::after {
            content: "";
            position: absolute;
            top: 45px;
            right: 2px;
            width: 1rem;
            height: 1rem;
            border-top: 0.38rem solid var(--to);
            border-right: 0.38rem solid var(--to);
            border-radius: 0.35rem;
            opacity: 0.74;
            transform: rotate(45deg);
        }

        .clinictus-journey-icon {
            position: relative;
            display: grid;
            width: 106px;
            height: 106px;
            margin: 0 auto 0.75rem;
            place-items: center;
            border-radius: 1.5rem;
            background: var(--card-bg);
            box-shadow: 0 14px 28px rgba(31, 41, 55, 0.12);
            transition: transform 0.22s ease, box-shadow 0.22s ease;
        }

        .clinictus-journey-step:hover .clinictus-journey-icon {
            transform: translateY(-4px) scale(1.035);
            box-shadow: 0 20px 38px rgba(31, 41, 55, 0.18);
        }

        .clinictus-journey-icon svg {
            width: 94%;
            height: 94%;
        }

        .clinictus-journey-number {
            position: absolute;
            top: 0.55rem;
            right: 0.55rem;
            display: grid;
            width: 1.35rem;
            height: 1.35rem;
            place-items: center;
            border-radius: 999px;
            background: var(--accent);
            color: #fff;
            font-size: 0.68rem;
            font-weight: 900;
            box-shadow: 0 0.45rem 0.85rem rgba(31, 41, 55, 0.18);
        }

        .clinictus-journey-step-title {
            margin: 0 0 0.25rem;
            color: #111827;
            font-size: 0.82rem;
            font-weight: 900;
            line-height: 1.18;
        }

        .clinictus-journey-step-description {
            margin: 0;
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1.35;
        }

        @keyframes clinictusJourneyRise {
            from {
                opacity: 0;
                transform: translateY(16px);
            }

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

        @media (max-width: 680px) {
            .clinictus-journey-hero-slot {
                width: calc(100% - 1rem);
            }

            .main-banner.main-banner--journey {
                height: auto;
                padding-top: 3.5rem;
                padding-bottom: 2rem;
            }

            .clinictus-journey-wrap {
                padding-right: 0.75rem;
                padding-left: 0.75rem;
            }

            .clinictus-journey-banner {
                border-radius: 1.35rem;
                padding: 1rem 0 1rem 1rem;
            }

            .clinictus-journey-scroll {
                margin-right: -0.75rem;
                padding: 0.8rem 0.75rem 0.95rem 0;
                scroll-padding-inline: 0.75rem;
                scroll-snap-type: x proximity;
            }

            .clinictus-journey-steps {
                margin: 0;
                padding-right: 0.75rem;
            }

            .clinictus-journey-step {
                flex-basis: 96px;
                scroll-snap-align: start;
            }

            .clinictus-journey-connector {
                flex-basis: 38px;
                height: 96px;
            }

            .clinictus-journey-connector::before {
                top: 44px;
            }

            .clinictus-journey-connector::after {
                top: 37px;
            }

            .clinictus-journey-icon {
                width: 96px;
                height: 96px;
            }

            .clinictus-journey-icon svg {
                width: 92%;
                height: 92%;
            }

            .main-banner .clinictus-journey-wrap--hero {
                padding: 0;
            }
        }

