/* ==========================================================
   RESPONSIVE DESIGN TOKENS
   ========================================================== */

/* ==========================================================
   LAPTOP (992px)
   ========================================================== */

@media (max-width: 992px) {

:root{

    /* ===========================
       Typography
    =========================== */

    --fs-display: 48px;

    --fs-h1: 42px;
    --fs-h2: 36px;
    --fs-h3: 22px;
    --fs-h4: 20px;

    --fs-body-lg: 16px;
    --fs-body: 15px;
    --fs-small: 12px;

    --fs-button: 17px;
    --fs-nav: 17px;

    /* ===========================
       Spacing
    =========================== */

    --space-xxs: 8px;
    --space-xs: 12px;
    --space-sm: 16px;
    --space-md: 20px;
    --space-lg: 28px;
    --space-xl: 40px;
    --space-2xl: 56px;
    --space-3xl: 72px;
    --space-4xl: 88px;
    --space-section: 80px;

    /* ===========================
       Layout
    =========================== */

    --container-padding: 20px;

    --grid-gap: 24px;

    /* ===========================
       Buttons
    =========================== */

    --btn-height: 48px;
    --btn-padding-x: 28px;

    /* ===========================
       Radius
    =========================== */

    --radius-card: 18px;
    --radius-image: 18px;

}

}

/* ==========================================================
   TABLET (768px)
   ========================================================== */

@media (max-width: 768px) {

:root{

    /* ===========================
       Typography
    =========================== */

    --fs-display: 40px;

    --fs-h1: 32px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-h4: 18px;

    --fs-body-lg: 18px;
    --fs-body: 16px;
    --fs-small: 12px;

    --fs-button: 16px;
    --fs-nav: 16px;

    /* ===========================
       Spacing
    =========================== */

    --space-xxs: 6px;
    --space-xs: 10px;
    --space-sm: 14px;
    --space-md: 18px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 56px;
    --space-4xl: 64px;
    --space-section: 64px;

    /* ===========================
       Layout
    =========================== */

    --container-padding: 18px;

    --grid-gap: 20px;

    /* ===========================
       Buttons
    =========================== */

    --btn-height: 46px;
    --btn-padding-x: 24px;

    /* ===========================
       Radius
    =========================== */

    --radius-card: 16px;
    --radius-image: 16px;

}

}


/* ==========================================================
   MOBILE (576px)
   ========================================================== */

@media (max-width: 576px) {

:root{

    /* ===========================
       Typography
    =========================== */

    --fs-display: 32px;

    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-h4: 18px;

    --fs-body-lg: 17px;
    --fs-body: 15px;
    --fs-small: 12px;

    --fs-button: 15px;
    --fs-nav: 15px;

    /* ===========================
       Spacing
    =========================== */

    --space-xxs: 6px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 28px;
    --space-2xl: 36px;
    --space-3xl: 48px;
    --space-4xl: 56px;
    --space-section: 48px;

    /* ===========================
       Layout
    =========================== */

    --container-padding: 16px;

    --grid-gap: 16px;

    /* ===========================
       Buttons
    =========================== */

    --btn-height: 44px;
    --btn-padding-x: 20px;

    /* ===========================
       Radius
    =========================== */

    --radius-card: 14px;
    --radius-image: 14px;

}

}

/* ==========================================================
   NAVIGATION
   ========================================================== */

@media (max-width:768px){

    .navbar{

        width:calc(100% - (var(--container-padding) * 2));

        height:64px;

        top:var(--space-md);

    }

    .navbar__logo img{

        width:48px;

    }

    .navbar__toggle{

        display:flex;

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

        width:44px;
        height:44px;

        color:var(--clr-white);

        background:none;

        border:none;

        cursor:pointer;

        z-index:1002;

    }

    .navbar__toggle svg{

        width:28px;
        height:28px;

        stroke-width:2.2;

    }

    /* ==========================================
       Mobile Menu
    ========================================== */

.navbar__menu{

    position:fixed;

    inset:0;

    width:100vw;

    height:100svh;

    margin:0;

    padding:
        var(--space-xl)
        var(--container-padding)
        var(--space-2xl);

    display:flex;

    flex-direction:column;

    gap:0;

    background:rgba(6,28,43,.88);

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

    transform:translateX(100%);

    transition:transform .35s var(--ease-smooth);

    z-index:9999;

    box-sizing:border-box;

    visibility:hidden;

    opacity:0;
    pointer-events:none;

    transition:
        transform .35s var(--ease-smooth),
        opacity .35s ease,
        visibility 0s linear .35s;
    

}

.navbar__menu.is-open{

    transform:translateX(0);
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    padding: 0 32px;
    transition:
        transform .35s var(--ease-smooth),
        opacity .35s ease;

}

    .navbar__actions{

        display:none;

    }

    /* ==========================================
       Toggle Icons
    ========================================== */

    .navbar__toggle .icon-close{

        display:none;

    }

    .navbar__toggle.is-open .icon-menu{

        display:none;

    }

    .navbar__toggle.is-open .icon-close{

        display:block;

    }

    body.menu-open{

        overflow:hidden;

    }

    .navbar__menu li{

    width:100%;

    border-bottom:1px solid rgba(248,248,248,.12);

}

.navbar__menu li:last-child{

    border-bottom:none;

}

.navbar__menu a{

    display:flex;

    align-items:center;

    min-height:56px;

    color:var(--clr-white);

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

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

}

.navbar__menu-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    margin-bottom:var(--space-2xl);

    border-bottom:none !important;

    gap: 0;

}

.navbar__close{

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    background:none;

    border:none;

    color:var(--clr-white);

    cursor:pointer;

}

.navbar__close svg{

    width:28px;

    height:28px;

}

.navbar__menu-header img{

    width:56px;

}

.navbar__menu a{

    display:flex;

    align-items:center;

    min-height:56px;

    color:var(--clr-white);

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

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

    transition:var(--transition);

}

.navbar__menu a:hover{

    color:var(--clr-accent);

    padding-left:var(--space-xs);

}

}

@media (max-width: 576px) {
/* ==========================================================
   INTERNAL NAVIGATION - MOBILE
   ========================================================== */

.navbar{

    width:calc(100% - (var(--container-padding) * 2));

    height:64px;

    top:var(--space-md);

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

    background:rgb(6, 28, 43);

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

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

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

}

.navbar__logo-light{

    display:block;

}

.navbar__logo-dark{

    display:none;

}

.navbar__menu{

    background:rgba(6,28,43,.88);

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

}

.navbar__menu a{

    color:var(--clr-white);

}

.navbar__menu a.active--page{

    color:var(--clr-accent);

}

.navbar__menu a.active--page::after{

    width:100%;

}

.navbar__profile,

.navbar__actions{

    display:none;

}
}


/* ==========================================================
   HOMEPAGE 
   ========================================================== */


/* ==========================================================
   LAPTOP (992px)
   ========================================================== */

@media (max-width:992px){

    .hero{

        min-height:700px;
        height:auto;

    }

    .hero::before:first-of-type{
        display:none;
    }

    .hero__background{

        background-size:950px auto;
        background-position:right -300px center;

    }

    .hero__overlay{

        background:linear-gradient(
            90deg,
            rgba(6,28,43,1) 0%,
            rgba(6,28,43,.98) 35%,
            rgba(6,28,43,.90) 55%,
            rgba(6,28,43,.35) 78%,
            rgba(6,28,43,0) 100%
        );

    }

    .hero__main{

        padding-top:140px;
        padding-bottom:72px;

    }

    .hero__inner{

        max-width:560px;
        gap:20px;
        padding-left:0;

    }

    .hero__description{

        max-width:520px;

    }

    .hero__buttons{

        gap:20px;

    }

    .hero__trust{

        display:none;

    }

}


/* ==========================================================
   TABLET (768px)
   ========================================================== */

@media (max-width:768px){

    .hero{

        min-height:auto;
        height:auto;

    }

    .hero::before,
    .hero::after{

        display:none;

    }

    .hero__background{

        opacity:.15;

        background-size:700px auto;

        background-position:center top;

    }

    .hero__overlay{

        background:rgba(6,28,43,.94);

    }

    .hero__main{

        justify-content:center;

        padding-top:140px;
        padding-bottom:72px;

    }

    .hero__content{

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

    }

    .hero__inner{

        max-width:100%;
        align-items:center;

    }

    .hero__description{

        max-width:620px;

    }

    .hero__buttons{

        justify-content:center;
        flex-wrap:wrap;
        width:100%;

    }

    .hero__trust{

        display:none;

    }



    /* ==========================================================
   PERFORMANCE SECTION
   ========================================================== */

   .performance {
    margin-top: 60px;
   }

.performance__card{

    display:flex;

    flex-direction:column;

    gap:var(--space-xl);

    padding:var(--space-2xl);

    text-align:center;

}

.performance__left{

    width:100%;

}

.performance__right{

    width:100%;

}

.performance__left h2{

    max-width:340px;

    margin:0 auto;

}

.performance__right p{

    max-width:100%;

    margin:0 auto;

}

/* ==========================================================
   WHY CHOOSE LK CAPITAL
   ========================================================== */

.why__grid{

    display:grid;

    grid-template-columns:1fr;

    gap:var(--space-lg);

}

.why{

        padding-top:calc(var(--space-section) + var(--space-lg));

    }

    .partner{

        display:flex;
        flex-direction:column;

        gap:32px;

        margin-bottom:64px;

    }

    .partner--reverse{

        flex-direction:column;

    }

    .partner__media{

        width:100%;
        min-height:320px;

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

        order:1;

    }

    .partner__content{

        width:100%;

        order:2;

    }

    .partner__content h2{

        margin-bottom:20px;

    }

    .partner__content p{

        margin-bottom:28px;

    }


}

/* ==========================================================
   MOBILE (576px)
   ========================================================== */

@media (max-width:576px){

    .hero{

        min-height:100svh;
        height:100svh;

    }

.hero::before{
        content:none;
    }


.hero__background{

    opacity:.90;

    background-size:720px auto;

    background-position: center calc(100% + 30px);

}

.hero__overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(6,28,43,.98) 0%,
        rgba(6,28,43,.92) 35%,
        rgba(6,28,43,.65) 60%,
        rgba(6,28,43,.25) 78%,
        rgba(6,28,43,0) 100%
    );

    z-index:-2;

}

.hero__overlay{
    display:none;
}

 .hero__main{
    justify-content:flex-start;

    padding-top:124px;
    padding-bottom:40px;

}

    .hero__content{

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

    }

    .hero__inner{

        max-width:100%;
        align-items:center;
        gap:20px;

    }

    .hero__title{

        max-width:360px;
        margin-inline:auto;

    }

    .hero__description{

        max-width:100%;

    }

    .hero__buttons{

        justify-content:center;
        margin-top:8px;

    }

    .hero__buttons .btn{

        width:auto;
        min-width:240px;

    }

    .hero__trust{

        display:none;

    }

.markets__grid{

    display:grid;

    grid-template-columns:1fr;

    gap:var(--space-lg);

}

.internal-hero__banner img {

    display: block;

    width: 1024px;

    height: auto;

}

/* ==========================================================
   PLATFORMS
   ========================================================== */

.platforms__content{

    display:flex;

    flex-direction:column;

    gap:var(--space-2xl);

}

.platforms__left,
.platforms__right{

    width:100%;

    flex:0 0 100%;

}

.platform-panel{

    width:100%;

    max-width:100%;

}

/* ==========================================================
   WHO WE SERVE
   ========================================================== */

.serve__grid{

    display:grid;

    grid-template-columns:1fr;

    gap:var(--space-lg);

}

.serve-card{

    width:100%;

}

/* ==========================================================
   WHO WE SERVE
   ========================================================== */

.serve-card{

    order:0;

}

.serve-card--cta{

    order:99;

}

/* ==========================================================
   START TRADING
   ========================================================== */

.signup__grid{

    display:grid;

    grid-template-columns:1fr;

    gap:var(--space-lg);

}

.signup-card{

    width:100%;
    min-height: 240px;

}

/* ==========================================================
   GLOBAL CTA
   ========================================================== */

.cta{

    padding-block:var(--space-section);

}

.cta__card{

    padding:
        var(--space-2xl)
        var(--space-lg);

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

    text-align:center;

}

.cta .section-header__title{

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

}

.cta .section-header__description{

    max-width:100%;

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

}

.cta .btn{

    width:auto;

    min-width:260px;

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

}


/* ==========================================
   Platforms Overview
========================================== */

@media (max-width:768px){

    .platform-block{

        display:flex;
        flex-direction:column;
        gap:var(--space-xl);

    }

    .platform-block__content {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .platforms-overview {
        background-color: rgb(231, 230, 230);
        padding-top: var(--space-2xl);
    }

    .platform-block--reverse .platform-block__image,
    .platform-block--reverse .platform-block__content{

        order:initial;

    }

    /* ==========================================
   Accounts
========================================== */

.accounts__grid{

    display:grid;

    grid-template-columns:1fr;

    gap:var(--space-xl);

}

.account-card{

    width:100%;

    max-width:none;
     min-height:auto;
        height:auto;

}

.account-card__body{

    padding:var(--space-xl);

}

.account-card h3{

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

}

.account-card__subtitle{

    display:block;

    margin:var(--space-sm) 0 var(--space-md);

}

.account-card p{

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

}

.account-list{

    gap:12px;

}

.account-list li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    line-height:1.5;

}

.account-list i{

    flex-shrink:0;

    margin-top:3px;

}

.account-card .btn{

    width:100%;

    justify-content:center;

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

}

.account-card__badge{

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

}

.account-card__icon{

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

}

}

/* ==========================================================
   FOOTER
   ========================================================== */

.footer{

    text-align:left;

}

.footer__top{

    display:grid;

    grid-template-columns:1fr;

    gap:var(--space-2xl);

}

.footer__brand{

    display:flex;

    flex-direction:column;

    align-items:left;

}

.footer__brand img{

    width:90px;

}

.company-slogan{

    margin-top:var(--space-lg);
        max-width: 280px;
        line-height: var(--lh-body);

}

.footer__features{

    display:flex;

    flex-direction:column;

    gap:var(--space-md);

    width:100%;

    margin-top:var(--space-xl);
    align-items: flex-start;

}

.footer__feature{

    display:flex;

    align-items:left;

    justify-content:center;

    gap:var(--space-sm);

}

.footer__column{

    display:flex;

    flex-direction:column;

    gap:var(--space-sm);

}

.footer__column h5{

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

}

.footer hr{

    margin-block:var(--space-2xl);

}

.footer__copyright{

    text-align:left;

}

.footer__disclaimer{

    display:flex;

    flex-direction:column;

    gap:var(--space-lg);

    text-align:left;

    max-width:100%;

}

.footer__disclaimer p{
    color: var(--clr-text);
}

.account-list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px 20px;

}

}


/* ==========================================================
   Markets
   ========================================================== */

@media (max-width:768px){

    .market{

        display:flex;

        flex-direction:column;

        gap:24px;

        margin-bottom:48px;

    }

    .market:last-child{

    margin-bottom:0;

}

    .market--reverse{
        flex-direction:column;
    }

    .market__media{
        width:100%;
        aspect-ratio:16/10;
        border-radius:var(--radius-card);
        order:1;
        background-size: 640px;
    }

    .market__content{
        width:100%;
        order:2;
        text-align:center;
        align-items:center;
    }

    .market__content .btn{

        width:100%;

        max-width:280px;

    }

    .internal-hero__banner.\.markets__hero-banner {
    transform: scale(1.25) translateY(10px);
}


    /* ==========================================
   Internal Hero
========================================== */

.internal-hero__container{

    padding-top:140px;

}

.internal-hero__grid{

    display:flex;

    flex-direction:column;

    gap:40px;

}

.internal-hero__content{

    width:100%;

    order:1;

    text-align:center;
    

}

.internal-hero__grid .internal-hero__content {
padding-right: 0;
}


.internal-hero__inner{

    max-width:100%;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.internal-hero__content {
    text-align: left;
}

.internal-hero__content .section-header__title{

    margin-inline:auto;

}

.internal-hero__content p{

    max-width:100%;

}

.internal-hero__banner{

    width:100%;

    order:2;

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

    overflow:hidden;

}

.internal-hero__banner img{

    width:100%;

    display:block;

    aspect-ratio:16/10;

    object-fit:contain;

}

/* Background banner */

.internal-hero__banner:last-child{

    order:3;

    min-height:220px;

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

    background-position:center;

    background-size:cover;

    background-repeat:no-repeat;

}

}

/* ==========================================
   Education Overview
========================================== */

@media (max-width:768px){

    .education-overview__grid{

        display:flex;
        flex-direction:column;

        gap:40px;

    }

    .education-overview__content,
    .education-overview__categories{

        width:100%;

    }

    .education-overview__content{

        order:1;

    }

    .education-overview__categories{

        order:2;

    }

    

}

/* ==========================================
   Story Section
========================================== */

@media (max-width: 768px) {

    .story {
        padding: var(--space-3xl) 0;
    }

    .story__grid {

        display: flex;
        flex-direction: column-reverse;
        gap: 2rem;
        align-items: center;

    }

    .story__image {

        order: 1;
        width: 100%;
        display: flex;
        justify-content: center;

    }

    .story__image img {

        width: 100%;
        
        border-radius: var(--radius-card);

    }

    .story__content {

        order: 2;
        width: 100%;
        text-align: left;

    }

    .story__content .section-header {

        margin-bottom: 1.5rem;

    }

    .story__content p {

        margin-bottom: 2rem;

    }

    .story__content .btn {

        width: 100%;
        justify-content: center;

    }

}

/* ==========================================
   Difference
========================================== */

@media (max-width:768px){

    .difference{
        padding:var(--space-3xl) 0;
    }

    .difference__grid{

        display:flex;
        flex-direction:column;
        gap:2rem;
        align-items:center;

    }

    /* Intro */

    .difference__intro{

        width:100%;
        text-align:center;
        order:1;

    }

    .difference__intro .section-header{

        margin-bottom:1rem;

    }

    .difference__intro p{

        max-width:100%;
        margin:0 auto;
        text-align: left;

    }

    /* Image */

    .difference__image{

        order:2;
        width:100%;
        display:flex;
        justify-content:center;

    }

    .difference__image img{

        width:100%;
        border-radius:var(--radius-card);

    }

    /* Content */

    .difference__content{

        order:3;
        width:100%;
        text-align:left;

    }

    .difference__content h3{

        margin-bottom:1.5rem;

    }

    .difference__list{

        display:flex;
        flex-direction:column;
        gap:1rem;
        margin:2rem 0;
        text-align:left;

    }

    .difference__list li{

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

        display: inherit;
        flex-direction: column;
        gap: 16px;
        justify-content: center;
        text-align: center;

    }

    .difference__content p{

        margin-bottom:2rem;

    }

    .difference__content .btn{

        width:100%;
        justify-content:center;

    }

}