/* =========================================================
   MILLERTECH CARD SYSTEM
========================================================= */


/* =========================================================
   BASE CARD
========================================================= */

.card,
.glass-card,
.feature-box,
.service-card,
.process-card,
.industry-card,
.testimonial-card{
    position:relative;
    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(57,196,255,.07),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(18,34,58,.94),
            rgba(9,20,37,.98)
        );

    box-shadow:
        0 18px 48px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.035);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.card::before,
.glass-card::before,
.feature-box::before,
.service-card::before,
.process-card::before,
.industry-card::before,
.testimonial-card::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            #39c4ff,
            #2f80ff,
            transparent
        );

    opacity:.55;

    transition:opacity .35s ease;
}

.card:hover,
.glass-card:hover,
.feature-box:hover,
.service-card:hover,
.process-card:hover,
.industry-card:hover,
.testimonial-card:hover{
    transform:translateY(-9px);

    border-color:rgba(57,196,255,.40);

    box-shadow:
        0 28px 70px rgba(0,0,0,.34),
        0 0 32px rgba(57,196,255,.10),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.card:hover::before,
.glass-card:hover::before,
.feature-box:hover::before,
.service-card:hover::before,
.process-card:hover::before,
.industry-card:hover::before,
.testimonial-card:hover::before{
    opacity:1;
}


/* =========================================================
   GLASS CARD
========================================================= */

.glass-card{
    padding:40px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(57,196,255,.09),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(21,39,66,.88),
            rgba(9,20,37,.94)
        );

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.glass-card h3{
    margin:0 0 15px;

    color:#ffffff;

    font-size:28px;
    line-height:1.2;
}

.glass-card p{
    margin:0;

    color:#9fb0c7;

    line-height:1.8;
}


/* =========================================================
   FEATURE CARD
========================================================= */

.feature-box{
    display:flex;
    flex-direction:column;

    min-height:300px;
    padding:38px;
}

.feature-box > span{
    display:flex;
    align-items:center;
    justify-content:center;

    width:60px;
    height:60px;
    flex:0 0 60px;

    margin-bottom:28px;

    border:1px solid rgba(57,196,255,.28);
    border-radius:18px;

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

    color:#7ee4ff;

    font-size:25px;
    line-height:1;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 24px rgba(57,196,255,.07);

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease;
}

.feature-box:hover > span{
    transform:translateY(-4px) rotate(-2deg);

    border-color:rgba(57,196,255,.52);

    background:rgba(57,196,255,.16);
}

.feature-box h3{
    margin:0 0 14px;

    color:#ffffff;

    font-size:27px;
    line-height:1.2;
}

.feature-box p{
    margin:0;

    color:#9fb0c7;

    font-size:15px;
    line-height:1.78;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.service-card{
    display:flex;
    flex-direction:column;

    min-height:355px;
    padding:38px;
}

.service-card .icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:62px;
    height:62px;
    flex:0 0 62px;

    margin-bottom:28px;

    border:1px solid rgba(57,196,255,.28);
    border-radius:18px;

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

    font-size:26px;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.service-card:hover .icon{
    transform:translateY(-4px) scale(1.04);

    border-color:rgba(57,196,255,.55);

    background:rgba(57,196,255,.16);
}

.service-card h3{
    margin:0 0 14px;

    color:#ffffff;

    font-size:28px;
    line-height:1.18;
}

.service-card p{
    margin:0 0 28px;

    color:#9fb0c7;

    line-height:1.78;
}

.service-card .btn,
.service-card .text-link{
    align-self:flex-start;

    margin-top:auto;
}


/* =========================================================
   PROCESS CARD
========================================================= */

.process-card{
    display:flex;
    flex-direction:column;

    min-height:285px;
    padding:36px 30px;
}

.process-card > span{
    display:flex;
    align-items:center;
    justify-content:center;

    width:62px;
    height:62px;
    flex:0 0 62px;

    margin-bottom:30px;

    border:1px solid rgba(57,196,255,.34);
    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(111,225,255,.18),
            rgba(47,128,255,.08)
        );

    color:#8ee7ff;

    font-size:14px;
    font-weight:800;
    letter-spacing:.08em;

    box-shadow:
        0 0 0 7px rgba(57,196,255,.03),
        0 0 24px rgba(57,196,255,.10);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.process-card:hover > span{
    transform:scale(1.06);

    border-color:rgba(57,196,255,.65);

    box-shadow:
        0 0 0 8px rgba(57,196,255,.05),
        0 0 32px rgba(57,196,255,.20);
}

.process-card h3{
    margin:0 0 14px;

    color:#ffffff;

    font-size:26px;
    line-height:1.2;
}

.process-card p{
    margin:0;

    color:#9fb0c7;

    font-size:15px;
    line-height:1.78;
}


/* =========================================================
   INDUSTRY CARD
========================================================= */

.industry-card{
    display:flex;
    flex-direction:column;

    min-height:360px;
    padding:36px;
}

.industry-card h3{
    margin:0 0 14px;

    color:#ffffff;

    font-size:27px;
    line-height:1.2;
}

.industry-card p{
    margin:0;

    color:#9fb0c7;

    line-height:1.75;
}

.industry-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:60px;
    height:60px;
    flex:0 0 60px;

    margin-bottom:27px;

    border:1px solid rgba(57,196,255,.28);
    border-radius:18px;

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

    color:#39c4ff;

    font-size:25px;
}

.industry-icon svg{
    width:28px;
    height:28px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   TESTIMONIAL CARD
========================================================= */

.testimonial-card{
    display:flex;
    flex-direction:column;

    min-height:430px;
    padding:40px;
}

.quote-mark{
    position:absolute;
    top:10px;
    left:24px;

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

    font-size:120px;
    font-weight:800;
    line-height:1;

    pointer-events:none;
}

.stars{
    position:relative;
    z-index:1;

    margin:18px 0 27px;

    color:#39c4ff;

    font-size:18px;
    letter-spacing:4px;
}

.testimonial-card > p{
    position:relative;
    z-index:1;

    margin:0 0 38px;

    color:#dce5f1;

    font-size:17px;
    line-height:1.85;
}

.testimonial-author{
    display:flex;
    align-items:center;
    gap:16px;

    margin-top:auto;
    padding-top:23px;

    border-top:1px solid rgba(255,255,255,.08);
}

.author-circle{
    display:flex;
    align-items:center;
    justify-content:center;

    width:56px;
    height:56px;
    flex:0 0 56px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #2f80ff,
            #39c4ff
        );

    color:#ffffff;

    font-size:16px;
    font-weight:800;

    box-shadow:0 10px 28px rgba(47,128,255,.24);
}

.testimonial-author strong{
    display:block;

    margin-bottom:4px;

    color:#ffffff;
}

.testimonial-author span{
    display:block;

    color:#8fa2bb;

    font-size:13px;
}


/* =========================================================
   MINI FEATURE
========================================================= */

.mini-feature{
    padding:21px 0;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.mini-feature:last-child{
    border-bottom:0;
}

.mini-feature strong{
    display:block;

    margin-bottom:7px;

    color:#ffffff;

    font-size:16px;
}

.mini-feature p{
    margin:0;

    color:#9fb0c7;

    font-size:14px;
    line-height:1.7;
}


/* =========================================================
   STAT CARD
========================================================= */

.stat-card{
    padding:24px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;

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

    text-align:center;

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.stat-card:hover{
    transform:translateY(-5px);

    border-color:rgba(57,196,255,.32);

    background:rgba(57,196,255,.07);
}

.stat-card strong{
    display:block;

    margin-bottom:8px;

    color:#39c4ff;

    font-size:27px;
    line-height:1.1;
}

.stat-card span{
    display:block;

    color:#9fb0c7;

    font-size:13px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:800px){

    .card,
    .glass-card,
    .feature-box,
    .service-card,
    .process-card,
    .industry-card,
    .testimonial-card{
        min-height:auto;
        padding:30px 26px;
    }

    .feature-box > span,
    .service-card .icon,
    .process-card > span,
    .industry-icon{
        margin-bottom:24px;
    }

    .testimonial-card{
        min-height:auto;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .card,
    .glass-card,
    .feature-box,
    .service-card,
    .process-card,
    .industry-card,
    .testimonial-card,
    .feature-box > span,
    .service-card .icon,
    .process-card > span{
        transition:none;
    }

    .card:hover,
    .glass-card:hover,
    .feature-box:hover,
    .service-card:hover,
    .process-card:hover,
    .industry-card:hover,
    .testimonial-card:hover{
        transform:none;
    }

}