/* =============================================
           SOLUTIONS PAGE — CARD-DRIVEN STORYTELLING
           Consistent with homepage: white base, #E55A2C primary,
           soft grays, rounded cards, eyebrow labels
           ============================================= */

        /* --- Page Hero --- */
        .sol-page-hero {
            padding: 120px 0 70px !important;
            background: linear-gradient(160deg, #FFFBF8 0%, #FFFFFF 40%, #F8FAFE 100%);
            position: relative;
            overflow: hidden;
        }
        .sol-page-hero::after {
            content: '';
            position: absolute;
            top: -120px;
            right: -80px;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(229,90,44,0.06) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }
        .sol-hero-layout {
            display: grid;
            grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
            gap: 3rem;
            align-items: start;
            position: relative;
            z-index: 1;
        }
        .sol-hero-copy {
            position: sticky;
            top: 120px;
            padding-top: 1.5rem;
        }
        .sol-hero-copy .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--primary-light);
            color: var(--primary);
            padding: 6px 16px;
            border-radius: var(--radius-full);
            font-size: 0.8rem;
            font-weight: 700;
            margin-bottom: 1.2rem;
        }
        .sol-hero-copy h1 {
            font-size: clamp(2.5rem, 4.4vw, 4rem);
            line-height: 1.15;
            margin-bottom: 1.2rem;
            letter-spacing: 0;
        }
        .sol-hero-copy h1 br {
            display: none;
        }
        .sol-hero-copy h1 span {
            display: block;
            color: var(--primary);
        }
        .sol-hero-copy > p {
            font-size: 1.05rem;
            color: var(--gray-600);
            line-height: 1.7;
            margin-bottom: 2rem;
            max-width: 480px;
        }
        .sol-hero-copy .hero-actions {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        /* Hero Right - solution image collage */
        .sol-hero-visual {
            position: relative;
            min-height: 520px;
            border-radius: 28px;
            overflow: hidden;
            border: 1px solid rgba(229, 90, 44, 0.16);
            background: linear-gradient(145deg, #fff, #fff6f1);
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
        }
        .sol-hero-visual::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
            background-size: 64px 64px;
            pointer-events: none;
        }
        .sol-hero-main-img,
        .sol-hero-side-img {
            position: absolute;
            overflow: hidden;
            border-radius: 22px;
            background: #fff;
            border: 1px solid var(--gray-200);
            box-shadow: 0 16px 42px rgba(15, 23, 42, 0.12);
        }
        .sol-hero-main-img {
            left: 28px;
            top: 36px;
            width: 62%;
            height: 58%;
        }
        .sol-hero-side-img.one {
            right: 28px;
            top: 76px;
            width: 38%;
            height: 34%;
        }
        .sol-hero-side-img.two {
            right: 54px;
            bottom: 42px;
            width: 48%;
            height: 34%;
        }
        .sol-hero-main-img img,
        .sol-hero-side-img img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }
        .sol-hero-label {
            position: absolute;
            left: 44px;
            bottom: 48px;
            max-width: 310px;
            padding: 18px 20px;
            border-radius: 18px;
            color: var(--dark);
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid rgba(229, 90, 44, 0.18);
            box-shadow: 0 14px 38px rgba(15, 23, 42, 0.1);
            backdrop-filter: blur(12px);
        }
        .sol-hero-label strong {
            display: block;
            font-size: 1.08rem;
            margin-bottom: 0.35rem;
        }
        .sol-hero-label span {
            display: block;
            color: var(--gray-600);
            font-size: 0.88rem;
            line-height: 1.55;
        }
        .sol-hero-badges {
            position: absolute;
            right: 28px;
            bottom: 34px;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            width: 270px;
        }
        .sol-hero-badges span {
            padding: 7px 12px;
            border-radius: 999px;
            background: #fff;
            color: var(--primary);
            border: 1px solid rgba(229, 90, 44, 0.16);
            font-size: 0.78rem;
            font-weight: 700;
        }

        /* Legacy mini cards */
        .sol-hero-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.7rem;
            justify-items: center;
            align-items: center;
            justify-content: center;
        }
        .mini-sol-card {
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: 12px;
            padding: 0;
            aspect-ratio: 16 / 10;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            text-decoration: none;
            color: inherit;
            position: relative;
        }
        .mini-sol-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 32px -8px rgba(229,90,44,0.18);
            border-color: rgba(229,90,44,0.3);
        }
        .mini-sol-card .msc-img {
            width: 100%;
            height: 100%;
            border-radius: 0;
            overflow: hidden;
            background: linear-gradient(145deg, #FEF7F3, #FEF1EA);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .mini-sol-card .msc-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }
        .mini-sol-card:hover .msc-img img {
            transform: scale(1.06);
        }

        /* --- Solutions Main Section --- */
        .sol-main-section {
            padding: 80px 0 100px;
            overflow: visible;
        }
        .sol-main-section .section-header {
            margin-bottom: 3rem;
        }

        /* Horizontal Scroll Container */
        .sol-showcase-wrapper {
            position: relative;
            overflow: visible;
            padding: 0;
        }
        .sol-showcase-wrapper::before,
        .sol-showcase-wrapper::after {
            display: none;
        }

        /* Marquee Track */
        .sol-showcase {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1.5rem;
            width: 100%;
            animation: none;
        }

        @keyframes sol-marquee {
            from { transform: translateX(0); }
            to { transform: translateX(calc(-50% - 0.75rem)); }
        }

        /* Scroll Hint */
        .sol-scroll-hint {
            display: none;
        }
        .sol-scroll-hint .scroll-text {
            font-size: 0.78rem;
            color: var(--gray-400);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .sol-scroll-hint .scroll-text i {
            animation: swipe-hint 2s ease-in-out infinite;
        }
        @keyframes swipe-hint {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(6px); }
        }

        /* Solution Card — Image Top, Button Bottom */
        .sol-card {
            width: auto;
            min-width: 0;
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .sol-card:nth-child(odd) {
            margin-top: 0;
        }
        .sol-card:nth-child(even) {
            margin-top: 0;
        }
        .sol-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 16px 40px -10px rgba(229,90,44,0.15);
            border-color: rgba(229,90,44,0.3);
        }

        /* Card Visual (top) */
        .sol-card-visual {
            background: linear-gradient(145deg, #FEF7F3, #FEF1EA);
            height: 210px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .sol-card-visual img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }
        .sol-card-visual i {
            font-size: 3.5rem;
            color: var(--primary);
        }

        /* Card Label + Button */
        .sol-card-label {
            padding: 18px 20px;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            min-height: 112px;
        }
        .sol-card-copy {
            min-width: 0;
        }
        .sol-card-label h3 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 0.45rem;
        }
        .sol-card-label p {
            color: var(--gray-500);
            font-size: 0.82rem;
            line-height: 1.5;
            margin: 0;
        }
        .sol-card-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--primary-light);
            color: var(--primary);
            padding: 6px 14px;
            border-radius: var(--radius-full);
            font-size: 0.78rem;
            font-weight: 700;
            text-decoration: none;
            flex-shrink: 0;
            transition: all var(--ease-base);
            white-space: nowrap;
        }
        .sol-card-btn i {
            font-size: 0.7rem;
            transition: transform var(--ease-base);
        }
        .sol-card-btn:hover {
            background: var(--primary);
            color: var(--white);
        }
        .sol-card-btn:hover i {
            transform: translateX(2px);
        }

        /* --- Process Section --- */
        .sol-process {
            padding: 80px 0;
            background: var(--gray-50);
        }
        .process-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.2rem;
            margin-top: 3rem;
        }
        .process-card {
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: 20px;
            padding: 2rem 1.5rem;
            text-align: center;
            position: relative;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .process-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-sm);
            border-color: var(--primary-light);
        }
        .process-card .pc-num {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 26px;
            height: 26px;
            background: var(--primary);
            color: var(--white);
            border-radius: 50%;
            font-size: 0.72rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .process-card .pc-icon {
            width: 56px;
            height: 56px;
            background: var(--primary-light);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
        }
        .process-card .pc-icon i {
            font-size: 1.3rem;
            color: var(--primary);
        }
        .process-card h4 {
            font-size: 1rem;
            margin-bottom: 0.4rem;
        }
        .process-card p {
            font-size: 0.82rem;
            color: var(--gray-500);
            line-height: 1.5;
        }

        /* --- Responsive --- */
        @media (max-width: 1180px) {
            .sol-hero-cards { gap: 0.6rem; }
        }
        @media (max-width: 1000px) {
            .sol-hero-layout { grid-template-columns: 1fr; gap: 2.5rem; }
            .sol-hero-copy { position: static; padding-top: 0; }
            .sol-hero-visual { max-width: 680px; min-height: 440px; margin: 0 auto; }
            .sol-hero-cards { max-width: 600px; margin: 0 auto; }
            .sol-hero-copy { text-align: center; }
            .sol-hero-copy > p { margin-left: auto; margin-right: auto; }
            .sol-hero-copy .hero-actions { justify-content: center; }
            .process-cards { grid-template-columns: repeat(2, 1fr); }
            .sol-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 600px) {
            .sol-page-hero { padding: 90px 0 40px !important; }
            .sol-hero-copy h1 { font-size: 2.2rem; }
            .sol-hero-visual { min-height: 360px; }
            .sol-hero-main-img { left: 14px; top: 20px; width: 70%; height: 48%; }
            .sol-hero-side-img.one { right: 14px; top: 72px; width: 42%; height: 28%; }
            .sol-hero-side-img.two { right: 18px; bottom: 22px; width: 56%; height: 28%; }
            .sol-hero-label { left: 16px; bottom: 22px; max-width: 54%; padding: 14px; }
            .sol-hero-badges { display: none; }
            .sol-hero-cards { grid-template-columns: repeat(3, 1fr); max-width: 100%; margin: 0 auto; gap: 0.5rem; }
            .mini-sol-card:nth-child(2),
            .mini-sol-card:nth-child(4) { margin-top: 0; }
            .sol-showcase { grid-template-columns: 1fr; }
            .sol-card { width: auto; }
            .sol-card-visual { height: 160px; }
            .sol-card-visual i { font-size: 2.8rem; }
            .sol-card:nth-child(even) { margin-top: 0; }
            .sol-card-label { flex-direction: column; min-height: 0; }
            .process-cards { grid-template-columns: 1fr; }
        }