/* ==========================================================
   CRESTBRIDGE PREMIUM DESIGN SYSTEM
   Components v3.0
   Reusable UI Components
==========================================================*/


/* ==========================================================
   BUTTONS
========================================================== */

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    min-height:58px;

    padding:0 34px;

    border:none;
    border-radius:999px;

    cursor:pointer;

    position:relative;
    overflow:hidden;

    text-decoration:none;
    white-space:nowrap;

    font-family:var(--font-heading);
    font-size:var(--fs-sm);
    font-weight:700;
    letter-spacing:.02em;

    transition:var(--transition);

}

.btn:focus-visible{

    outline:3px solid rgba(33,111,201,.25);
    outline-offset:3px;

}

.btn i{

    transition:var(--transition);

}

.btn:hover i{

    transform:translateX(5px);

}


/* ==========================================================
   BUTTON VARIANTS
========================================================== */

.btn--primary{

    background:var(--gold);
    color:var(--navy);

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

}

.btn--primary:hover{

    background:var(--navy);

    color:var(--white);

    transform:translateY(-4px);

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

}


.btn--gold{

    background:var(--gold);

    color:var(--navy);

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

}

.btn--gold:hover{

    background:var(--navy);

    color:var(--white);

    transform:translateY(-4px);

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

}


.btn--outline{

    background:transparent;

    border:2px solid var(--navy);

    color:var(--navy);

}

.btn--outline:hover{

    background:var(--gold);

    border-color:var(--gold);

    color:var(--navy);

}


.btn--premium{

    background:var(--white);

    color:var(--navy);

    border:1px solid var(--border);

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

}

.btn--premium:hover{

    background:var(--navy);

    color:var(--white);

    border-color:var(--navy);

    transform:translateY(-4px);

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

}


/* ==========================================================
   CARDS
========================================================== */

.card{

    position:relative;

    overflow:hidden;

    padding:var(--space-xl);

    background:var(--white);

    border:1px solid var(--border-light);

    border-radius:var(--radius-xl);

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

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

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

}


/* ==========================================================
   CARD MODIFIERS
========================================================== */

.card--premium{

    background:linear-gradient(
        180deg,
        var(--white),
        #FBFCFD
    );

}

.card--glass{

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

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

    border:1px solid rgba(255,255,255,.40);

}


/* ==========================================================
   CARD ELEMENTS
========================================================== */

.card__header{

    margin-bottom:var(--space-lg);

}

.card__body{

    position:relative;

}

.card__footer{

    margin-top:var(--space-xl);

}

.card__title{

    margin-bottom:12px;

}

.card__text{

    margin:0;

}

.card__icon{

    width:82px;
    height:82px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        145deg,
        var(--silver),
        var(--white)
    );

    border:1px solid var(--border);

    color:var(--navy);

    font-size:28px;

    transition:var(--transition);

}

.card:hover .card__icon{

    background:linear-gradient(
        145deg,
        var(--navy),
        var(--navy-dark)
    );

    color:var(--white);

    transform:rotate(-8deg);

}


/* ==========================================================
   LABELS
========================================================== */

.section-label{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:var(--space-md);

    font-family:var(--font-heading);

    font-size:13px;

    font-weight:700;

    letter-spacing:.20em;

    text-transform:uppercase;

    color:var(--gold);

}

.section-label::before{

    content:"";

    width:42px;

    height:2px;

    background:var(--gold);

}


/* ==========================================================
   BADGES
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.badge--primary{

    background:var(--navy);

    color:var(--white);

}

.badge--gold{

    background:var(--gold);

    color:var(--white);

}

.badge--outline{

    border:1px solid var(--border);

    background:transparent;

    color:var(--navy);

}


/* ==========================================================
   DIVIDERS
========================================================== */

.divider-gold{

    width:80px;

    height:2px;

    margin:var(--space-lg) 0;

    background:var(--gold);

}

.divider-light{

    width:100%;

    height:1px;

    margin:var(--space-xl) 0;

    background:var(--border-light);

}

.divider-vertical{

    width:2px;

    height:80px;

    background:var(--gold);

}




/* ==========================================================
   FEATURE COMPONENTS
========================================================== */

.feature{

    display:grid;

    grid-template-columns:82px 1fr;

    gap:32px;

    align-items:flex-start;

}

.feature + .feature{

    margin-top:60px;

}

.feature__icon{

    width:82px;
    height:82px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        145deg,
        var(--silver),
        var(--white)
    );

    border:1px solid var(--border);

    color:var(--navy);

    font-size:28px;

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

    transition:var(--transition);

}

.feature__icon i{

    transition:inherit;

}

.feature:hover .feature__icon{

    background:linear-gradient(
        145deg,
        var(--navy),
        var(--navy-dark)
    );

    color:var(--white);

    transform:rotate(-8deg) scale(1.05);

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

}

.feature__content{

    display:flex;
    flex-direction:column;

}

.feature__title{

    margin-bottom:12px;

}

.feature__text{

    margin:0;

}


/* ==========================================================
   STATISTICS
========================================================== */

.stats{

    display:grid;

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

    gap:50px;

    padding:70px;

    background:linear-gradient(
        135deg,
        var(--white),
        var(--silver)
    );

    border-radius:var(--radius-xl);

}

.stat{

    display:flex;

    flex-direction:column;

    gap:10px;

    text-align:center;

}

.stat__number{

    font-family:var(--font-heading);

    font-size:64px;

    font-weight:800;

    line-height:1;

    color:var(--navy);

}

.stat__number span{

    color:var(--gold);

}

.stat__label{

    color:var(--text-light);

    font-size:var(--fs-md);

    margin:0;

}


/* ==========================================================
   IMAGE COMPONENTS
========================================================== */

.image{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-xl);

}

.image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:1s cubic-bezier(.4,0,.2,1);

}

.image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent,
        rgba(15,39,69,.20)
    );

    transition:var(--transition);

}

.image:hover img{

    transform:scale(1.05);

}

.image:hover::after{

    background:linear-gradient(
        transparent,
        rgba(15,39,69,.35)
    );

}


/* ==========================================================
   IMAGE MODIFIERS
========================================================== */

.image--shadow{

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

}

.image--rounded{

    border-radius:999px;

}

.image--square{

    border-radius:var(--radius-lg);

}


/* ==========================================================
   GLASS PANELS
========================================================== */

.glass{

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

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

    border:1px solid rgba(255,255,255,.40);

    border-radius:var(--radius-xl);

}

.glass--dark{

    background:rgba(15,39,69,.78);

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

    color:var(--white);

}


/* ==========================================================
   HOVER UTILITIES
========================================================== */

.hover-lift{

    transition:var(--transition);

}

.hover-lift:hover{

    transform:translateY(-8px);

}

.hover-scale{

    transition:var(--transition);

}

.hover-scale:hover{

    transform:scale(1.03);

}

.hover-gradient{

    position:relative;

    overflow:hidden;

}

.hover-gradient::before{

    content:"";

    position:absolute;

    inset:0;

    background:var(--gradient-primary);

    opacity:0;

    transition:var(--transition);

}

.hover-gradient > *{

    position:relative;

    z-index:1;

}

.hover-gradient:hover::before{

    opacity:1;

}

.hover-gradient:hover h1,
.hover-gradient:hover h2,
.hover-gradient:hover h3,
.hover-gradient:hover h4,
.hover-gradient:hover h5,
.hover-gradient:hover h6,
.hover-gradient:hover p{

    color:var(--white);

}

.hover-gradient:hover .section-label{

    color:var(--gold-light);

}

.hover-gradient:hover .section-label::before{

    background:var(--gold-light);

}




/* ==========================================================
   FORM COMPONENTS
========================================================== */

.form-group{

    margin-bottom:var(--space-lg);

}

.form-label{

    display:block;

    margin-bottom:12px;

    font-size:var(--fs-sm);

    font-weight:600;

    color:var(--text);

}

.form-control{

    width:100%;

    min-height:56px;

    padding:0 20px;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    font-family:var(--font-body);

    font-size:var(--fs-md);

    color:var(--text);

    transition:var(--transition);

}

textarea.form-control{

    min-height:160px;

    padding:18px 20px;

    resize:vertical;

}

.form-control::placeholder{

    color:var(--text-muted);

}

.form-control:focus{

    outline:none;

    border-color:var(--blue);

    box-shadow:0 0 0 4px rgba(33,111,201,.12);

}

.form-control:focus-visible{

    outline:3px solid rgba(33,111,201,.20);

    outline-offset:2px;

}

.form-control:disabled{

    background:var(--silver);

    color:var(--text-light);

    cursor:not-allowed;

    opacity:.75;

}


/* ==========================================================
   FORM HELPERS
========================================================== */

.form-row{

    display:grid;

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

    gap:24px;

}

.form-actions{

    display:flex;

    gap:16px;

    align-items:center;

    margin-top:var(--space-lg);

}

.form-message{

    margin-top:12px;

    font-size:var(--fs-sm);

    color:var(--text-light);

}


/* ==========================================================
   QUOTE COMPONENT
========================================================== */

.quote{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

.quote blockquote{

    margin:0;

    font-family:var(--font-heading);

    font-size:clamp(2rem,4vw,2.75rem);

    font-weight:700;

    line-height:1.4;

    color:var(--charcoal);

}

.quote cite{

    display:block;

    margin-top:28px;

    font-style:normal;

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--gold);

}


/* ==========================================================
   LIST COMPONENTS
========================================================== */

.list-check{

    display:flex;

    flex-direction:column;

    gap:18px;

    padding:0;

    margin:0;

    list-style:none;

}

.list-check li{

    display:flex;

    align-items:flex-start;

    gap:14px;

}

.list-check li::before{

    content:"✓";

    flex-shrink:0;

    color:var(--gold);

    font-weight:700;

}


/* ==========================================================
   ICON BOX
========================================================== */

.icon-box{

    width:64px;

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--silver);

    color:var(--navy);

    font-size:22px;

    transition:var(--transition);

}

.icon-box:hover{

    background:var(--navy);

    color:var(--white);

}




/* ==========================================================
   ALERTS
========================================================== */

.alert{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:20px 24px;

    border-radius:var(--radius-lg);

    border:1px solid transparent;

}

.alert__icon{

    flex-shrink:0;

    font-size:20px;

    line-height:1;

}

.alert__content{

    flex:1;

}

.alert__title{

    margin-bottom:6px;

    font-size:var(--fs-md);

    font-weight:700;

}

.alert__text{

    margin:0;

}

.alert--success{

    background:#F2FBF5;

    border-color:#B8E7C6;

    color:#0F6A35;

}

.alert--warning{

    background:#FFF8EA;

    border-color:#F2D28A;

    color:#8A5B00;

}

.alert--info{

    background:#EEF6FF;

    border-color:#B8D8FF;

    color:var(--blue);

}

.alert--error{

    background:#FFF2F2;

    border-color:#F2B9B9;

    color:#A12525;

}


/* ==========================================================
   ACCORDION
========================================================== */

.accordion{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.accordion__item{

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    overflow:hidden;

    background:var(--white);

}

.accordion__header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:24px;

    cursor:pointer;

    font-weight:700;

}

.accordion__header:focus-visible{

    outline:3px solid rgba(33,111,201,.20);

    outline-offset:2px;

}

.accordion__body{

    padding:0 24px 24px;

}


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

.testimonial{

    position:relative;

}

.testimonial__quote{

    margin-bottom:30px;

    font-size:1.25rem;

    font-style:italic;

}

.testimonial__author{

    font-weight:700;

}

.testimonial__role{

    color:var(--text-light);

}


/* ==========================================================
   AVATAR
========================================================== */

.avatar{

    width:72px;

    height:72px;

    border-radius:50%;

    overflow:hidden;

}

.avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.avatar--sm{

    width:48px;

    height:48px;

}

.avatar--lg{

    width:96px;

    height:96px;

}

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

@media (max-width:991px){

    .btn{
        width:100%;
    }

    .feature{
        grid-template-columns:1fr;
        gap:24px;
    }

    .stats{
        grid-template-columns:repeat(2,1fr);
        gap:35px;
        padding:40px;
    }

    .stat__number{
        font-size:48px;
    }

    .form-row{
        grid-template-columns:1fr;
    }

    .form-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .quote blockquote{
        font-size:2rem;
    }

}