/* ==========================================================
   SAFE Platform Design System
   Used By:
   Connect | Learn | Ads | Work | Ventures
========================================================== */

/* ------------------------------
   Variables
------------------------------ */

:root{

    --safe-primary:#0B6E4F;
    --safe-primary-dark:#08543d;

    --safe-secondary:#F6A623;

    --safe-bg:#F7F9FC;

    --safe-white:#ffffff;

    --safe-text:#1F2937;

    --safe-light-text:#6B7280;

    --safe-border:#E5E7EB;

    --safe-radius:16px;

    --safe-shadow:
        0 10px 30px rgba(0,0,0,.06);

    --safe-transition:.25s ease;

}

/* ------------------------------
   Body
------------------------------ */

body{

    margin:0;

    background:var(--safe-bg);

    color:var(--safe-text);

    font-family:
        "Inter",
        "Segoe UI",
        sans-serif;

}

/* ------------------------------
   Links
------------------------------ */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--safe-transition);

}

a:hover{

    text-decoration:none;

}

/* ------------------------------
   Platform Wrapper
------------------------------ */

.safe-platform-wrapper{

    min-height:80vh;

}

/* ------------------------------
   Header
------------------------------ */

.safe-platform-header{

    background:#fff;

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

    position:sticky;

    top:0;

    z-index:1000;

}

.safe-header-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}

.safe-header-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.safe-logo img{

    height:48px;

}

.safe-platform-name{

    font-size:28px;

    font-weight:700;

    color:var(--safe-primary);

}

/* ------------------------------
   Navigation
------------------------------ */

.safe-platform-nav{

    display:flex;

    gap:30px;

}

.safe-platform-nav a{

    font-size:16px;

    font-weight:600;

    color:var(--safe-text);

}

.safe-platform-nav a:hover{

    color:var(--safe-primary);

}

/* ------------------------------
   Buttons
------------------------------ */

.btn-success{

    border-radius:60px;

    padding:14px 34px;

    font-weight:700;

    letter-spacing:.2px;

    transition:.35s;

}

.btn-success:hover{

    transform:translateY(-2px);

}

.btn-outline-success{

    border-radius:50px;

}

/* ------------------------------
   Cards
------------------------------ */

.safe-card{

    background:#fff;

    border-radius:20px;

    border:1px solid rgba(11,110,79,.08);

    box-shadow:
        0 10px 30px rgba(0,0,0,.04),
        0 1px 3px rgba(0,0,0,.03);

    overflow:hidden;

}

.safe-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 30px 70px rgba(0,0,0,.10);

}

/* ------------------------------
   Section
------------------------------ */

.safe-section{
    padding:110px 0;
    position:relative;
}

.safe-section-title{

    font-size:48px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:20px;

}

.safe-section-subtitle{

    font-size:20px;

    line-height:1.8;

    margin:auto;

}

.connect-badge{

    display:inline-block;

    padding:8px 20px;

    border-radius:100px;

    background:#E8F6F1;

    color:var(--safe-primary);

    font-weight:700;

    font-size:13px;

    letter-spacing:1px;

    margin-bottom:25px;

}

img{

    max-width:100%;

    height:auto;

}

.safe-section:nth-child(even){

    background:#FCFDFD;

}

h1,h2,h3,h4,h5{

    letter-spacing:-0.5px;

}

@media(min-width:1400px){

.container{

    max-width:1380px;

}

}

*{

    transition:

        background .25s,

        color .25s,

        border-color .25s,

        box-shadow .25s;

}

.expert-avatar{

    width:110px;

    height:110px;

    border-radius:50%;

    object-fit:cover;

    border:5px solid #fff;

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

}

.expert-name{

    font-size:22px;

    font-weight:700;

}

.expert-headline{

    color:var(--safe-light-text);

}

.expert-specialities{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:18px;

}

.expert-specialities span{

    padding:6px 14px;

    border-radius:40px;

    background:#F2F6F9;

    font-size:13px;

}

.expert-badge{

    display:inline-block;

    margin-top:18px;

    padding:7px 16px;

    border-radius:40px;

    background:#0B6E4F;

    color:#fff;

}

.safe-platform-header{

    backdrop-filter:blur(18px);

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

}

.connect-hero{

    background:

    linear-gradient(

        180deg,

        #ffffff,

        #F5FBF8

    );

}

/* ------------------------------
   Footer
------------------------------ */

.safe-platform-footer{

    background:#fff;

    margin-top:80px;

    padding:60px 0;

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

}

.safe-platform-footer h4,
.safe-platform-footer h5{

    font-weight:700;

    margin-bottom:20px;

}

.safe-platform-footer ul{

    padding:0;

    margin:0;

    list-style:none;

}

.safe-platform-footer li{

    margin-bottom:12px;

}

.safe-platform-footer a{

    color:var(--safe-light-text);

}

.safe-platform-footer a:hover{

    color:var(--safe-primary);

}

/* ------------------------------
   Responsive
------------------------------ */

@media(max-width:991px){

    .safe-header-wrapper{

        flex-direction:column;

        height:auto;

        padding:20px 0;

    }

    .safe-platform-nav{

        flex-wrap:wrap;

        justify-content:center;

        margin:20px 0;

        gap:18px;

    }

}

@media(max-width:768px){

    .safe-platform-name{

        font-size:22px;

    }

    .safe-section{

        padding:50px 0;

    }

    .safe-section-title{

        font-size:30px;

    }

}

/* ------------------------------------
   Header Scroll
------------------------------------ */

.safe-platform-header{

    transition:.3s ease;

}

.safe-platform-header.scrolled{

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

}

/* ------------------------------------
   Animation
------------------------------------ */

.safe-animate{

    opacity:0;

    transform:translateY(40px);

    transition:.6s ease;

}

.safe-visible{

    opacity:1;

    transform:translateY(0);

}

/* =====================================
   Profession Cards
===================================== */

.profession-card{

    cursor:pointer;

    transition:.3s ease;

    border:1px solid transparent;

}

.profession-card:hover{

    transform:translateY(-6px);

    border-color:var(--safe-primary);

}

.profession-icon{

    font-size:52px;

    margin-bottom:20px;

}

.profession-card h5{

    font-weight:700;

    margin-bottom:10px;

}

.profession-card small{

    color:var(--safe-light-text);

}

/* =========================================
   Brand Cards
========================================= */

.brand-card{

    cursor:pointer;

    transition:.3s;

    text-align:center;

}

.brand-card:hover{

    transform:translateY(-6px);

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

}

.brand-logo{

    width:72px;

    height:72px;

    border-radius:50%;

    margin:0 auto 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F5F5F5;

    font-size:28px;

    font-weight:700;

    color:var(--safe-primary);

}

.brand-card h6{

    font-weight:600;

}

/* ===========================================
   Machine Cards
=========================================== */

.machine-card{

    cursor:pointer;

    transition:.3s ease;

}

.machine-card:hover{

    transform:translateY(-6px);

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

}

.machine-icon{

    font-size:54px;

    margin-bottom:18px;

}

.machine-card h5{

    font-weight:700;

    margin-bottom:10px;

}

.machine-card small{

    color:var(--safe-light-text);

}

/* =====================================
   Location Cards
===================================== */

.location-card{

    cursor:pointer;

    transition:.3s ease;

}

.location-card:hover{

    transform:translateY(-6px);

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

}

.location-icon{

    width:70px;

    height:70px;

    margin:auto;

    margin-bottom:18px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F4F7FA;

    font-size:32px;

}

.location-card h5{

    font-weight:700;

    margin-bottom:10px;

}

.location-card small{

    color:var(--safe-light-text);

}

/* ===========================================
   Connect CTA
=========================================== */

.connect-cta-card{

    padding:70px;

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

    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fffc 100%
    );

}

.connect-cta-section .btn{

    min-width:240px;

}

/* ===========================================
   Active Badge
=========================================== */

.badge-success{

    background:var(--safe-primary);

    color:#fff;

    padding:8px 16px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

}

/* ===========================================
   Expert Rating
=========================================== */

.expert-rating{

    margin:12px 0;

    font-size:15px;

    font-weight:600;

    color:#F6A623;

}

.expert-rating small{

    color:var(--safe-light-text);

    font-weight:500;

}

/* ===========================================
   Why Connect
=========================================== */

#why-connect .display-4{

    font-size:60px;

}

#why-connect .lead{

    font-size:22px;

    font-weight:500;

    color:var(--safe-primary);

}

.platform-coming-soon{

    min-height:70vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:80px 20px;
}

.platform-coming-soon h1{

    font-size:52px;

    font-weight:700;

    color:#0f7b53;

    margin-bottom:20px;
}

.platform-coming-soon p{

    max-width:700px;

    margin:auto;

    color:#667085;

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;
}

.platform-coming-soon span{

    display:inline-block;

    padding:12px 28px;

    border-radius:40px;

    background:#eef8f3;

    color:#0f7b53;

    font-weight:600;
}