/*==================================================
PLATINUM EDGE UI COMPONENTS
Version: 1.0
====================================================*/


/*==================================================
01. BUTTONS
====================================================*/

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.75rem;

    padding:1rem 2rem;

    border:none;
    border-radius:var(--radius-md);

    cursor:pointer;

    font-family:inherit;
    font-size:0.95rem;
    font-weight:600;

    text-decoration:none;

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

.btn:focus-visible{
    outline:3px solid var(--color-accent);
    outline-offset:4px;
}

.btn:hover{
    transform:translateY(-2px);
}


/*----------------------------------*/

.btn-primary{

    background:var(--color-primary);

    color:#fff;

    box-shadow:0 10px 24px rgba(0,0,0,.08);

}

.btn-primary:hover{

    background:var(--color-accent);

    color:var(--color-primary);

}


/*----------------------------------*/

.btn-secondary{

    background:transparent;

    border:2px solid var(--color-primary);

    color:var(--color-primary);

}

.btn-secondary:hover{

    background:var(--color-primary);

    color:#fff;

}


/*----------------------------------*/

.btn-text{

    background:none;

    padding:0;

    color:var(--color-primary);

    font-weight:700;

}

.btn-text::after{

    content:"→";

    transition:transform .3s ease;

}

.btn-text:hover::after{

    transform:translateX(6px);

}


/*==================================================
02. LINKS
====================================================*/

.link{

    color:inherit;

    text-decoration:none;

    position:relative;

}

.link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:2px;

    background:var(--color-accent);

    transition:.3s ease;

}

.link:hover::after{

    width:100%;

}



/*==================================================
03. BADGES
====================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.45rem 1rem;

    border-radius:999px;

    background:rgba(201,170,113,.12);

    color:var(--color-accent);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}



/*==================================================
04. SECTION HEADER
====================================================*/

.section-heading{

    max-width:760px;

    margin-inline:auto;

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

}

.section-heading.center{

    text-align:center;

}

.section-heading.left{

    text-align:left;

}

.section-heading .eyebrow{

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

}

.section-heading h2{

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

}

.section-heading p{

    color:var(--color-muted);

    max-width:65ch;

}

.section-divider{

    width:80px;

    height:3px;

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

    background:var(--color-accent);

}



/*==================================================
05. CARDS
====================================================*/

.card{

    background:var(--color-surface);

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

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

    padding:var(--space-40);

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.card:hover{

    transform:translateY(-8px);

    border-color:rgba(201,170,113,.35);

    box-shadow:0 24px 48px rgba(0,0,0,.08);

}

.card h3{

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

}

.card p{

    color:var(--color-muted);

}



/*==================================================
06. SERVICE CARD
====================================================*/

.service-card{

    position:relative;

    overflow:hidden;

    isolation:isolate;

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    width:6px;

    background:var(--color-accent);

    transition:.35s ease;

}

.service-card:hover::before{

    width:100%;

    opacity:.06;

}

.service-card .icon{

    width:70px;

    height:70px;

    display:grid;

    place-items:center;

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

    border-radius:50%;

    background:rgba(201,170,113,.10);

}

.service-card h3{

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

}

.service-card p{

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

}



/*==================================================
07. LEADERSHIP CARD
====================================================*/

.leader-card{

    overflow:hidden;

    padding:0;

}

.leader-card img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    display:block;

}

.leader-content{

    padding:var(--space-32);

}

.leader-content h3{

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

}

.leader-role{

    display:block;

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

    color:var(--color-accent);

    font-weight:600;

}



/*==================================================
08. CTA PANEL
====================================================*/

.cta-panel{

    background:var(--color-primary);

    color:#fff;

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

    padding:var(--space-96);

    position:relative;

    overflow:hidden;

}

.cta-panel::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    right:-120px;

    top:-120px;

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

}

.cta-panel h2{

    color:#fff;

}

.cta-panel p{

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

    max-width:60ch;

}



/*==================================================
09. LISTS
====================================================*/

.check-list{

    list-style:none;

    padding:0;

    margin:0;

}

.check-list li{

    display:flex;

    align-items:flex-start;

    gap:1rem;

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

}

.check-list li::before{

    content:"✓";

    color:var(--color-accent);

    font-weight:bold;

}



/*==================================================
10. SIMPLE STAT
====================================================*/

.stat{

    text-align:center;

}

.stat-number{

    display:block;

    font-size:3rem;

    font-weight:800;

    color:var(--color-primary);

}

.stat-label{

    color:var(--color-muted);

}



/*==================================================
END OF PART ONE
====================================================*/

/*==================================================
11. FORMS
====================================================*/

.form-group {
    margin-bottom: var(--space-24);
}

.form-label {
    display: inline-block;
    margin-bottom: var(--space-8);

    font-size: .95rem;
    font-weight: 600;

    color: var(--color-primary);
}

.form-control,
.form-select,
.form-textarea {

    width: 100%;

    padding: 1rem 1.15rem;

    border: 1px solid rgba(0,0,0,.12);

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

    background: var(--color-surface);

    color: var(--color-text);

    font: inherit;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}

.form-control::placeholder,
.form-textarea::placeholder{

    color: rgba(0,0,0,.45);

}

.form-control:focus,
.form-select:focus,
.form-textarea:focus{

    outline:none;

    border-color:var(--color-accent);

    box-shadow:0 0 0 4px rgba(201,170,113,.15);

}

.form-textarea{

    min-height:180px;

    resize:vertical;

}

.input-error{

    border-color:var(--color-error)!important;

}

.input-success{

    border-color:var(--color-success)!important;

}

.form-error{

    display:block;

    margin-top:.5rem;

    font-size:.82rem;

    color:var(--color-error);

}



/*==================================================
12. INDUSTRY CARD
====================================================*/

.industry-card{

    position:relative;

    padding:var(--space-40);

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

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

    background:var(--color-surface);

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

}

.industry-card:hover{

    transform:translateY(-6px);

    border-color:rgba(201,170,113,.35);

}

.industry-card .industry-number{

    display:block;

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

    font-size:3rem;

    font-weight:800;

    color:rgba(0,0,0,.08);

}

.industry-card h3{

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

}



/*==================================================
13. PARTNER LOGO CARD
====================================================*/

.partner-card{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:170px;

    padding:var(--space-32);

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

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

    background:#fff;

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

}

.partner-card:hover{

    transform:translateY(-5px);

    border-color:rgba(201,170,113,.35);

}

.partner-card img{

    max-width:170px;

    max-height:70px;

    width:auto;

    height:auto;

    filter:grayscale(100%);

    opacity:.8;

    transition:.35s ease;

}

.partner-card:hover img{

    filter:none;

    opacity:1;

}



/*==================================================
14. TESTIMONIAL
====================================================*/

.testimonial{

    position:relative;

    padding:var(--space-48);

    background:var(--color-surface);

    border-left:4px solid var(--color-accent);

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

}

.testimonial blockquote{

    margin:0;

    font-size:1.2rem;

    line-height:1.8;

}

.testimonial footer{

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

    font-weight:600;

    color:var(--color-primary);

}



/*==================================================
15. QUOTE BLOCK
====================================================*/

.quote{

    max-width:900px;

    margin-inline:auto;

    text-align:center;

}

.quote p{

    font-size:clamp(1.5rem,3vw,2.3rem);

    font-weight:600;

    line-height:1.5;

}

.quote cite{

    display:block;

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

    font-style:normal;

    color:var(--color-muted);

}



/*==================================================
16. ACCORDION
====================================================*/

.accordion{

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

}

.accordion-item{

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

}

.accordion-button{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:var(--space-24);

    background:none;

    border:none;

    cursor:pointer;

    font:inherit;

    font-weight:600;

}

.accordion-button:hover{

    color:var(--color-accent);

}

.accordion-button:focus-visible{

    outline:3px solid var(--color-accent);

}

.accordion-content{

    display:none;

    padding:0 var(--space-24) var(--space-24);

    color:var(--color-muted);

}

.accordion-item.active .accordion-content{

    display:block;

}



/*==================================================
17. TABLE
====================================================*/

.table{

    width:100%;

    border-collapse:collapse;

}

.table th{

    text-align:left;

    padding:1rem;

    background:var(--color-primary);

    color:#fff;

}

.table td{

    padding:1rem;

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

}

.table tbody tr:hover{

    background:rgba(201,170,113,.05);

}



/*==================================================
18. BREADCRUMB
====================================================*/

.breadcrumb{

    display:flex;

    flex-wrap:wrap;

    gap:.75rem;

    font-size:.9rem;

}

.breadcrumb a{

    text-decoration:none;

    color:var(--color-muted);

}

.breadcrumb span{

    color:var(--color-primary);

}



/*==================================================
19. PAGINATION
====================================================*/

.pagination{

    display:flex;

    justify-content:center;

    gap:.75rem;

}

.pagination a{

    width:46px;

    height:46px;

    display:grid;

    place-items:center;

    border:1px solid rgba(0,0,0,.1);

    border-radius:50%;

    text-decoration:none;

    color:var(--color-primary);

    transition:.3s ease;

}

.pagination a:hover,

.pagination a.active{

    background:var(--color-primary);

    color:#fff;

}



/*==================================================
20. BACK TO TOP
====================================================*/

.back-to-top{

    position:fixed;

    right:2rem;

    bottom:2rem;

    width:52px;

    height:52px;

    display:grid;

    place-items:center;

    border:none;

    border-radius:50%;

    background:var(--color-primary);

    color:#fff;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s ease;

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    background:var(--color-accent);

    color:var(--color-primary);

}



/*==================================================
21. DIVIDERS
====================================================*/

.divider{

    width:100%;

    height:1px;

    background:rgba(0,0,0,.08);

}

.divider.gold{

    background:var(--color-accent);

}



/*==================================================
22. CHIP / TAG
====================================================*/

.tag{

    display:inline-flex;

    align-items:center;

    padding:.55rem 1rem;

    border-radius:999px;

    background:rgba(0,0,0,.05);

    font-size:.85rem;

    font-weight:500;

}

/*====================================================
SECTION HEADER
====================================================*/

.section-header{

    max-width:760px;

    margin-bottom:80px;

}

.section-label{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-bottom:20px;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--color-accent);

}

.section-label::before{

    content:"";

    width:42px;

    height:2px;

    background:var(--color-accent);

}

.section-header h2{

    max-width:13ch;

    margin-bottom:28px;

}

.section-header p{

    max-width:62ch;

    color:var(--color-muted);

}

/*==================================================
END OF COMPONENT LIBRARY
====================================================*/