/* ==========================================================
   深圳市显科科技有限公司
   官网 V2.0
   Solutions Pages — Overview + Detail
========================================================== */


/* ==========================================================
   Overview Hero
========================================================== */

.sol-hero{

    position: relative;

    height: 100vh;

    min-height: 700px;

    margin-top: 0;

    display: flex;

    align-items: center;

    background: #061A32;

    overflow: hidden;

}


.sol-hero::before{

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        radial-gradient(circle at 30% 40%, rgba(26,58,92,.25), transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(28,156,255,.15), transparent 40%);

}


/* Particle Canvas */

.sol-hero__particle{

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

}


.sol-hero__canvas{

    width: 100%;

    height: 100%;

}


/* Content */

.sol-hero .container{

    position: relative;

    z-index: 3;

}


.sol-hero__content{

    max-width: 720px;

    color: #fff;

}


.sol-hero__badge{

    display: inline-flex;

    align-items: center;

    gap: 10px;

    height: 40px;

    padding: 0 18px;

    border-radius: 999px;

    background: rgba(255,255,255,.10);

    backdrop-filter: blur(12px);

    font-size: 14px;

    letter-spacing: 1px;

    margin-bottom: 28px;

}


.sol-hero__dot{

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #4DB8FF;

    box-shadow: 0 0 12px #4DB8FF;

    animation: dotPulse 2s infinite;

}


@keyframes dotPulse{

    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(1.6); }

}


.sol-hero__content h1{

    font-size: clamp(44px, 5vw, 72px);

    font-weight: 800;

    line-height: 1.15;

    margin-bottom: 28px;

}


.sol-hero__highlight{

    background: linear-gradient(135deg, #4DB8FF, #2d6a9e);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}


.sol-hero__content p{

    font-size: 18px;

    line-height: 1.9;

    color: rgba(255,255,255,.78);

    margin-bottom: 40px;

}


.sol-hero__actions{

    display: flex;

    gap: 20px;

}


/* Scroll Hint */

.sol-hero__scroll{

    position: absolute;

    left: 50%;

    bottom: 30px;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    color: rgba(255,255,255,.55);

    font-size: 11px;

    letter-spacing: 3px;

    animation: fadeUpDown 2s infinite;

}


.sol-hero__scroll-line{

    width: 2px;

    height: 36px;

    background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);

}


@keyframes fadeUpDown{

    0%, 100% { transform: translate(-50%, 0); opacity: .5; }
    50%      { transform: translate(-50%, 10px); opacity: 1; }

}


/* ==========================================================
   Stats Bar
========================================================== */

.sol-stats{

    padding: 60px 0;

    background: #fff;

    border-bottom: 1px solid #eef1f5;

}


.sol-stats__grid{

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}


.sol-stats__item{

    text-align: center;

    padding: 20px;

}


.sol-stats__number{

    font-size: 48px;

    font-weight: 800;

    color: var(--primary);

    line-height: 1.2;

    margin-bottom: 8px;

}


.sol-stats__label{

    font-size: 15px;

    color: var(--text-secondary);

    font-weight: 500;

}


/* ==========================================================
   Solution Cards Section
========================================================== */

.sol-cards{

    padding: 100px 0 120px;

    background: #fff;

}


.sol-cards__grid{

    display: flex;

    flex-direction: column;

    gap: 80px;

}


/* Card */

.sol-card{

    display: flex;

    gap: 60px;

    align-items: center;

}


.sol-card--reverse{

    flex-direction: row-reverse;

}


/* Visual Side */

.sol-card__visual{

    flex: 1;

    position: relative;

}


.sol-card__image{

    border-radius: 24px;

    overflow: hidden;

    box-shadow: var(--shadow-lg);

    position: relative;

    z-index: 1;

}


.sol-card__image img{

    width: 100%;

    height: 400px;

    object-fit: cover;

    display: block;

    transition: transform .6s ease;

}


.sol-card:hover .sol-card__image img{

    transform: scale(1.04);

}


/* Glow Effect */

.sol-card__glow{

    position: absolute;

    inset: -30px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(26,58,92,.15), transparent 60%);

    z-index: 0;

    opacity: 0;

    transition: opacity .5s;

}


.sol-card:hover .sol-card__glow{

    opacity: 1;

}


/* Card Number */

.sol-card__number{

    position: absolute;

    top: 20px;

    left: 20px;

    z-index: 2;

    font-size: 72px;

    font-weight: 800;

    color: rgba(255,255,255,.85);

    line-height: 1;

    text-shadow: 0 4px 20px rgba(0,0,0,.3);

}


/* Body Side */

.sol-card__body{

    flex: 1;

}


.sol-card__tag{

    display: inline-flex;

    align-items: center;

    height: 30px;

    padding: 0 14px;

    border-radius: 999px;

    background: rgba(26,58,92,.08);

    color: var(--primary);

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 16px;

}


.sol-card__body h2{

    font-size: 30px;

    font-weight: 700;

    line-height: 1.35;

    color: var(--text-primary);

    margin-bottom: 16px;

}


.sol-card__body > p{

    font-size: 16px;

    line-height: 1.8;

    color: var(--text-secondary);

    margin-bottom: 28px;

}


/* Feature List */

.sol-card__features{

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin-bottom: 32px;

}


.sol-card__feature{

    display: flex;

    gap: 14px;

    align-items: flex-start;

}


.sol-card__feature-icon{

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: rgba(26,58,92,.06);

    color: var(--primary);

}


.sol-card__feature-icon svg{

    width: 22px;

    height: 22px;

}


.sol-card__feature-title{

    font-size: 15px;

    font-weight: 600;

    color: var(--text-primary);

    margin-bottom: 2px;

}


.sol-card__feature-desc{

    font-size: 13px;

    color: var(--text-light);

}


/* Actions */

.sol-card__actions{

    display: flex;

    align-items: center;

    gap: 24px;

}


.sol-card__more{

    font-size: 15px;

    font-weight: 600;

    color: var(--primary);

    transition: .25s;

}


.sol-card__more:hover{

    color: var(--primary-dark);

    gap: 10px;

}


/* ==========================================================
   Process Flow
========================================================== */

.sol-process{

    padding: 100px 0;

}


.sol-process__flow{

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    margin-bottom: 60px;

}


.sol-process__step{

    text-align: center;

    position: relative;

    padding: 40px 24px;

    background: #fff;

    border-radius: 20px;

    box-shadow: var(--shadow-sm);

    transition: .35s;

}


.sol-process__step:hover{

    transform: translateY(-8px);

    box-shadow: var(--shadow-md);

}


.sol-process__icon{

    width: 72px;

    height: 72px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background: linear-gradient(135deg, rgba(26,58,92,.08), rgba(28,156,255,.08));

    color: var(--primary);

}


.sol-process__icon svg{

    width: 36px;

    height: 36px;

}


.sol-process__step h3{

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 10px;

    color: var(--text-primary);

}


.sol-process__step p{

    font-size: 14px;

    line-height: 1.8;

    color: var(--text-secondary);

}


.sol-process__arrow{

    position: absolute;

    right: -22px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 24px;

    color: var(--primary);

    opacity: .4;

}


/* Process Bar */

.sol-process__bar{

    max-width: 860px;

    margin: 0 auto;

    padding: 40px 0;

}


.sol-process__track{

    position: relative;

    height: 4px;

    background: #e0e5ec;

    border-radius: 2px;

    display: flex;

    justify-content: space-between;

}


.sol-process__track::before{

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    border-radius: 2px;

    background: linear-gradient(90deg, #1a3a5c, #2d6a9e);

    animation: trackFill 2s ease forwards;

}


@keyframes trackFill{

    from { width: 0; }
    to   { width: 100%; }

}


.sol-process__dot{

    position: relative;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: var(--primary);

    border: 3px solid #fff;

    box-shadow: 0 0 0 4px rgba(26,58,92,.20);

    margin-top: -6px;

}


.sol-process__dot span{

    position: absolute;

    top: 28px;

    left: 50%;

    transform: translateX(-50%);

    font-size: 13px;

    font-weight: 600;

    color: var(--text-primary);

    white-space: nowrap;

}


/* ==========================================================
   Compare / Why Us
========================================================== */

.sol-compare{

    padding: 100px 0;

    background: #fff;

}


.sol-compare__grid{

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 24px;

}


.sol-compare__card{

    padding: 40px 28px;

    background: #fff;

    border-radius: 18px;

    border: 1px solid #eef1f5;

    text-align: center;

    transition: .35s;

}


.sol-compare__card:hover{

    border-color: rgba(26,58,92,.30);

    box-shadow: 0 12px 40px rgba(26,58,92,.08);

    transform: translateY(-6px);

}


.sol-compare__icon{

    width: 56px;

    height: 56px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: linear-gradient(135deg, rgba(26,58,92,.08), rgba(28,156,255,.06));

    color: var(--primary);

}


.sol-compare__icon svg{

    width: 28px;

    height: 28px;

}


.sol-compare__card h3{

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 12px;

    color: var(--text-primary);

}


.sol-compare__card p{

    font-size: 14px;

    line-height: 1.8;

    color: var(--text-secondary);

}


/* ==========================================================
   Tech Cloud
========================================================== */

.sol-tech{

    padding: 80px 0 90px;

}


.sol-tech__cloud{

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    justify-content: center;

    max-width: 860px;

    margin: 0 auto;

}


.sol-tech__badge{

    height: 42px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    border-radius: 999px;

    font-size: 14px;

    font-weight: 600;

    color: var(--primary);

    background: #fff;

    border: 1px solid rgba(26,58,92,.15);

    cursor: default;

    transition: .3s;

}


.sol-tech__badge:hover{

    background: var(--primary);

    color: #fff;

    transform: translateY(-4px);

    box-shadow: 0 8px 24px rgba(26,58,92,.25);

}


/* ==========================================================
   CTA Section
========================================================== */

.sol-cta{

    position: relative;

    padding: 100px 0;

    background: #061A32;

    overflow: hidden;

    text-align: center;

}


.sol-cta__bg{

    position: absolute;

    inset: 0;

    background:
        radial-gradient(circle at 20% 50%, rgba(26,58,92,.25), transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(28,156,255,.15), transparent 40%);

}


.sol-cta__content{

    position: relative;

    z-index: 1;

}


.sol-cta__content h2{

    font-size: clamp(28px, 3vw, 40px);

    font-weight: 700;

    color: #fff;

    margin-bottom: 16px;

}


.sol-cta__content p{

    font-size: 17px;

    color: rgba(255,255,255,.70);

    margin-bottom: 36px;

}


.sol-cta__actions{

    display: flex;

    gap: 20px;

    justify-content: center;

    align-items: center;

}


.sol-cta__link{

    font-size: 15px;

    font-weight: 600;

    color: rgba(255,255,255,.80);

    transition: .25s;

}


.sol-cta__link:hover{

    color: #4DB8FF;

}


/* ==========================================================
   Reveal Animation
========================================================== */

.reveal{

    opacity: 0;

    transform: translateY(40px);

    transition: opacity .6s ease, transform .6s ease;

}


.reveal.visible{

    opacity: 1;

    transform: translateY(0);

}


/* ==========================================================


/* ==========================================================
   Hero (shared)
========================================================== */

.solution-hero{

    height: 420px;

    margin-top: 68px;

    display: flex;

    align-items: center;

    background-size: cover;

    background-position: center;

}


.solution-hero__content{

    text-align: center;

    color: #fff;

    max-width: 800px;

    margin: 0 auto;

}


.solution-hero__content h1{

    font-size: clamp(32px, 3.5vw, 48px);

    font-weight: 700;

    margin-bottom: 16px;

}


.solution-hero__content p{

    font-size: 18px;

    line-height: 1.8;

    color: rgba(255,255,255,.85);

}


/* ==========================================================
   Solutions Overview — Cards
========================================================== */

.solutions-overview{

    padding: 100px 0;

}


.solutions-overview__grid{

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 40px;

}


.solution-overview-card{

    position: relative;

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: var(--shadow-md);

    transition: .4s ease;

}


.solution-overview-card:hover{

    transform: translateY(-12px);

    box-shadow: var(--shadow-lg);

}


.solution-overview-card__image{

    height: 280px;

    overflow: hidden;

}


.solution-overview-card__image img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;

}


.solution-overview-card:hover .solution-overview-card__image img{

    transform: scale(1.06);

}


.solution-overview-card__content{

    padding: 36px 32px;

}


.solution-overview-card__tag{

    display: inline-flex;

    align-items: center;

    height: 30px;

    padding: 0 14px;

    border-radius: 999px;

    background: rgba(26,58,92,.08);

    color: var(--primary);

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 16px;

}


.solution-overview-card__content h2{

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 14px;

    color: var(--text-primary);

}


.solution-overview-card__content p{

    font-size: 15px;

    line-height: 1.8;

    color: var(--text-secondary);

    margin-bottom: 24px;

}


.solution-overview-card__link{

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 15px;

    font-weight: 600;

    color: var(--primary);

    transition: .25s;

}


.solution-overview-card__link:hover{

    gap: 14px;

    color: var(--primary-dark);

}


/* ==========================================================
   Solution Detail — Layout
========================================================== */

.solution-detail{

    padding: 80px 0 100px;

}


.solution-detail__intro{

    max-width: 860px;

    margin: 0 auto 60px;

    text-align: center;

}


.solution-detail__intro h2{

    font-size: 30px;

    font-weight: 700;

    margin-bottom: 20px;

    color: var(--text-primary);

}


.solution-detail__intro p{

    font-size: 17px;

    line-height: 2;

    color: var(--text-secondary);

}


/* ==========================================================
   Solution Detail — Features Grid
========================================================== */

.solution-features{

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-bottom: 80px;

}


.solution-feature-card{

    padding: 40px 30px;

    background: #fff;

    border-radius: 16px;

    box-shadow: var(--shadow-sm);

    text-align: center;

    transition: .35s;

}


.solution-feature-card:hover{

    transform: translateY(-8px);

    box-shadow: var(--shadow-md);

}


.solution-feature-card__icon{

    width: 64px;

    height: 64px;

    margin: 0 auto 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: rgba(26,58,92,.08);

    font-size: 28px;

    font-weight: 700;

    color: var(--primary);

}


.solution-feature-card h3{

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 12px;

    color: var(--text-primary);

}


.solution-feature-card p{

    font-size: 14px;

    line-height: 1.8;

    color: var(--text-secondary);

}


/* ==========================================================
   Solution Detail — Content Sections
========================================================== */

.solution-section{

    margin-bottom: 70px;

}


.solution-section h2{

    font-size: 26px;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 28px;

    padding-left: 16px;

    border-left: 4px solid var(--primary);

}


.solution-section h3{

    font-size: 20px;

    font-weight: 700;

    color: var(--text-primary);

    margin: 32px 0 16px;

}


.solution-section p{

    font-size: 16px;

    line-height: 2;

    color: var(--text-secondary);

    margin-bottom: 20px;

}


.solution-section ul{

    list-style: none;

    padding: 0;

    margin: 0 0 28px;

}


.solution-section ul li{

    position: relative;

    padding: 8px 0 8px 24px;

    font-size: 15px;

    line-height: 1.8;

    color: var(--text-secondary);

}


.solution-section ul li::before{

    content: "";

    position: absolute;

    left: 0;

    top: 15px;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--primary);

}


/* ==========================================================
   Solution Detail — Image / Video
========================================================== */

.solution-media{

    margin: 40px 0;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: var(--shadow-md);

}


.solution-media img,
.solution-media video{

    width: 100%;

    display: block;

}


/* ==========================================================
   Solution Detail — Architecture Diagram
========================================================== */

.solution-arch{

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    margin: 40px 0;

}


.solution-arch__layer{

    padding: 28px 20px;

    background: #fff;

    border-radius: 14px;

    box-shadow: var(--shadow-sm);

    text-align: center;

}


.solution-arch__layer h4{

    font-size: 16px;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 10px;

}


.solution-arch__layer p{

    font-size: 13px;

    line-height: 1.7;

    color: var(--text-secondary);

}


/* ==========================================================
   Solution Detail — CTA
========================================================== */

.solution-cta{

    text-align: center;

    padding: 60px 0 0;

    border-top: 1px solid #eef1f5;

    margin-top: 40px;

}


.solution-cta p{

    font-size: 16px;

    color: var(--text-secondary);

    margin-bottom: 24px;

}


/* ==========================================================
   Back Link
========================================================== */

.solution-back{

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 15px;

    font-weight: 600;

    color: var(--primary);

    margin-bottom: 40px;

    transition: .25s;

}


.solution-back:hover{

    gap: 12px;

    color: var(--primary-dark);

}


/* ==========================================================
   Responsive
========================================================== */

@media (max-width: 1200px){

    .solution-features{

        grid-template-columns: repeat(2, 1fr);

    }


    .solution-arch{

        grid-template-columns: repeat(2, 1fr);

    }


    .solutions-overview__grid{

        gap: 24px;

    }

}


@media (max-width: 768px){

    .solution-hero{

        height: 320px;

    }


    .solution-hero__content h1{

        font-size: 28px;

    }


    .solutions-overview{

        padding: 60px 0;

    }


    .solutions-overview__grid{

        grid-template-columns: 1fr;

    }


    .solution-overview-card__image{

        height: 200px;

    }


    .solution-overview-card__content{

        padding: 24px 20px;

    }


    .solution-overview-card__content h2{

        font-size: 20px;

    }


    .solution-detail{

        padding: 40px 0 60px;

    }


    .solution-detail__intro h2{

        font-size: 24px;

    }


    .solution-detail__intro p{

        font-size: 15px;

    }


    .solution-features{

        grid-template-columns: 1fr;

    }


    .solution-section h2{

        font-size: 22px;

    }


    .solution-arch{

        grid-template-columns: 1fr;

    }


    /* Overview responsive */

    .sol-hero{

        min-height: 600px;

    }


    .sol-hero__content h1{

        font-size: 36px;

    }


    .sol-hero__actions{

        flex-direction: column;

    }


    .sol-stats__grid{

        grid-template-columns: repeat(2, 1fr);

    }


    .sol-stats__number{

        font-size: 36px;

    }


    .sol-card{

        flex-direction: column !important;

        gap: 32px;

    }


    .sol-card__image img{

        height: 240px;

    }


    .sol-card__body h2{

        font-size: 24px;

    }


    .sol-card__number{

        font-size: 48px;

    }


    .sol-process__flow{

        grid-template-columns: 1fr;

    }


    .sol-process__arrow{

        display: none;

    }


    .sol-process__track{

        display: none;

    }


    .sol-compare__grid{

        grid-template-columns: 1fr;

    }


    .sol-card__actions{

        flex-direction: column;

        align-items: flex-start;

    }


    .sol-cta__actions{

        flex-direction: column;

    }


}