/* ==========================================
   ABOUT HERO
========================================== */

.about-hero{
    background:var(--bg);
    padding:120px 0;
    position:relative;
}

.about-container{
    width:min(100%,var(--container-width));
    margin:auto;
    padding:0 40px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
}

.about-badge{
    display:inline-flex;
    align-items:center;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(212,165,90,.12);

    color:var(--primary);

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

    margin-bottom:28px;
}

.about-hero h1{
    font-size:clamp(calc(var(--fs-xl) * 1.2),5vw,calc(var(--fs-xl) * 2));

    line-height:1.1;

    color:var(--text);

    margin-bottom:28px;

    font-weight:800;
}

.about-hero p{
    font-size:calc(var(--fs-md) * 1.1);

    line-height:2;

    color:var(--text-muted);

    max-width:620px;
}

.about-actions{
    display:flex;

    gap:18px;

    margin-top:45px;

    flex-wrap:wrap;
}

.about-actions>.btn-primary{
    padding:16px 34px;
    max-width: 200px;

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

    background:var(--primary);

    color:#fff;

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

    text-decoration:none;

    transition:var(--transition);

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

.btn-primary:hover{
    transform:translateY(-4px);

    background:var(--primary-dark);
}

.about-actions>.btn-secondary{
     max-width: 200px;
    width: 100%;
    text-align: center;
    padding:16px 34px;

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

    color:var(--text);

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

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

    text-decoration:none;

    transition:var(--transition);
}

.btn-secondary:hover{
    background:var(--surface-2);
}

.about-stats{
    display:flex;

    gap:70px;

    margin-top:70px;
}

.stat h3{
    font-size:calc(var(--fs-xl) * .9);

    color:var(--primary);

    margin-bottom:10px;
}

.stat span{
    color:var(--text-muted);

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

.about-hero__image{
    position:relative;
}

.about-hero__image img{
    width:100%;

    display:block;

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

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




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

@media(max-width:1100px){

    .about-container{
        grid-template-columns:1fr;

     
    }



    .about-actions{
        justify-content:center;
    }

    .about-actions>.btn-primary,.about-actions>.btn-secondary{
        max-width: unset;
    }
    .about-stats{
        justify-content:center;
    }

}

@media(max-width:768px){


    .about-container{
        padding:0 20px;
    }

    .about-stats{


        gap:30px;
    }

}

/* ==========================================
   STORY
========================================== */

.about-story{
    padding:120px 0;

    background:var(--surface-2);
}

.about-story__container{
    width:min(100%,var(--container-width));

    margin:auto;

    padding:0 40px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

    align-items:center;
}

.about-story__image img{
    width:100%;

    display:block;

   

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

.section-badge{
    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(212,165,90,.12);

    color:var(--primary);

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

    font-weight:600;

    margin-bottom:25px;
}

.about-story h2{
    font-size:calc(var(--fs-xl) * 1.2);

    line-height:1.3;

    color:var(--text);

    margin-bottom:30px;
}

.about-story p{
    color:var(--text-muted);

    line-height:2;

    margin-bottom:20px;

    font-size:calc(var(--fs-md) * 1.05);
}

.story-features{
    margin-top:45px;

    display:flex;

    flex-direction:column;

    gap:20px;
}

.story-card{
    display:flex;

    gap:20px;

    align-items:flex-start;

    background:var(--surface);

    padding:24px;

    border-radius:20px;

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

    transition:var(--transition);
}

.story-card:hover{
    transform:translateY(-5px);

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

.story-icon{
    width:60px;
    height:60px;

    border-radius:18px;

    background:rgba(212,165,90,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:calc(var(--fs-lg) * 1.3);

    flex-shrink:0;

    transition:transform .35s ease, background .35s ease;
}

.story-card:hover .story-icon{
    transform:scale(1.12) rotate(-6deg);
    background:rgba(212,165,90,.22);
}

.story-card h3{
    margin-bottom:8px;

    color:var(--text);

    font-size:calc(var(--fs-md) * 1.3);
}

.story-card p{
    margin:0;

    color:var(--text-muted);

    line-height:1.8;

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

@media(max-width:1000px){

    .about-story__container{
        grid-template-columns:1fr;

        gap:60px;
    }

}

@media(max-width:768px){

    .about-story__image{
        display: none;
    }

    .about-hero__image{
        display: none;
    }

    .about-story{
        padding:80px 0;
    }

    .about-story__container{
        padding:0 20px;
    }

    .about-story h2{
        font-size:var(--fs-xl);
    }

}