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

CTM PATH™ Guided Journey v6.0

Purpose
Premium Card System

Responsibility
• Glass Cards
• Hero Panels
• Message Cards
• Premium Dividers
• Decorative Elements
• Surface Effects
• Responsive Behaviour

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


/*==================================================
Premium Card
==================================================*/

.card{

    position:relative;

    width:100%;

    padding:48px;

    overflow:hidden;

    border-radius:32px;

    background:

        linear-gradient(
            180deg,
            rgba(22,27,40,.82),
            rgba(12,16,26,.92)
        );

    border:

        1px solid rgba(216,179,106,.16);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    box-shadow:

        0 24px 60px rgba(0,0,0,.45),

        inset 0 1px 0 rgba(255,255,255,.04);

}


/*==================================================
Top Accent
==================================================*/

.card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:2px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(216,179,106,.95),

            transparent

        );

}


/*==================================================
Ambient Glow
==================================================*/

.card::after{

    content:"";

    position:absolute;

    right:-180px;

    top:-180px;

    width:360px;

    height:360px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(22,165,106,.10),

            transparent 72%

        );

    pointer-events:none;

}


/*==================================================
Card Hover
==================================================*/

.card:hover{

    border-color:

        rgba(216,179,106,.30);

    box-shadow:

        0 34px 80px rgba(0,0,0,.55),

        0 0 35px rgba(216,179,106,.10);

}


/*==================================================
Hero Card
==================================================*/

.hero-card{

    max-width:900px;

    margin:auto;

}


/*==================================================
Message Card
==================================================*/

.message-card{

    max-width:760px;

    margin:auto;

}


/*==================================================
Premium Divider
==================================================*/

.gold-divider{

    position:relative;

    width:260px;

    height:1px;

    margin:12px auto;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(216,179,106,.95),

            transparent

        );

}


/*==================================================
Divider Jewel
==================================================*/

.gold-divider::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:12px;

    height:12px;

    border-radius:50%;

    transform:

        translate(-50%,-50%);

    background:

        radial-gradient(

            circle,

            #FFF9E8 0%,

            #F3D58A 45%,

            #D8B36A 100%

        );

    box-shadow:

        0 0 12px rgba(216,179,106,.55);

}


/*==================================================
Small Divider
==================================================*/

.gold-divider.small{

    width:180px;

}


/*==================================================
Large Divider
==================================================*/

.gold-divider.large{

    width:340px;

}


/*==================================================
Section Divider
==================================================*/

.section-divider{

    width:100%;

    height:1px;

    margin:40px 0;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.10),

            transparent

        );

}


/*==================================================
Glass Panel
==================================================*/

.glass-panel{

    position:relative;

    padding:36px;

    border-radius:28px;

    background:

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

    border:

        1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

}


/*==================================================
Hero Panel
==================================================*/

.hero-panel{

    max-width:820px;

    margin:auto;

}


/*==================================================
Quote Panel
==================================================*/

.quote-panel{

    border-left:

        4px solid rgba(216,179,106,.70);

}


/*==================================================
Highlight Panel
==================================================*/

.highlight-panel{

    background:

        linear-gradient(

            180deg,

            rgba(22,165,106,.10),

            rgba(22,165,106,.03)

        );

}


/*==================================================
Gold Border
==================================================*/

.border-gold{

    border:

        1px solid rgba(216,179,106,.28);

}


/*==================================================
Green Border
==================================================*/

.border-green{

    border:

        1px solid rgba(22,165,106,.28);

}


/*==================================================
Premium Surface
==================================================*/

.surface{

    background:

        rgba(255,255,255,.03);

}


/*==================================================
Soft Glow
==================================================*/

.glow-gold{

    box-shadow:

        0 0 28px rgba(216,179,106,.18);

}


.glow-green{

    box-shadow:

        0 0 28px rgba(22,165,106,.18);

}


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

@media (max-width:768px){

    .card{

        padding:28px;

        border-radius:24px;

    }

    .glass-panel{

        padding:24px;

    }

    .gold-divider{

        width:180px;

    }

    .gold-divider.large{

        width:240px;

    }

}


@media (max-width:480px){

    .card{

        padding:22px;

    }

    .gold-divider{

        width:140px;

    }

    .gold-divider.large{

        width:180px;

    }

}