/* =========================================================
   YƐNSOM NGO MANAGEMENT / DISCOVERY APP
   PAGE-SPECIFIC STYLES
   Scoped exclusively to .yensom-page
========================================================= */


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

.yensom-page {

    --yensom-green: #5bb780;
    --yensom-green-dark: #3f9566;
    --yensom-green-soft: rgba(91, 183, 128, 0.08);
    --yensom-green-border: rgba(91, 183, 128, 0.24);

    --yensom-red: #961414;

    --yensom-black: #111111;
    --yensom-text: #383838;
    --yensom-muted: #707070;

    --yensom-white: #ffffff;

    --yensom-border:
        rgba(17, 17, 17, 0.09);

}


/* =========================================================
   GLOBAL PAGE CONTROL
========================================================= */

.yensom-page main {

    overflow: hidden;

}


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

.yensom-page .yensom-hero {

    position: relative;

    min-height:
        calc(100vh - 90px);

    display:
        flex;

    align-items:
        center;

    padding:
        clamp(100px, 10vw, 160px)
        0
        clamp(80px, 8vw, 120px);

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(91, 183, 128, 0.14),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7faf8 100%
        );

}


.yensom-page .yensom-hero-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, 0.95fr);

    align-items:
        center;

    gap:
        clamp(60px, 8vw, 120px);

}


/* =========================================================
   HERO CONTENT
========================================================= */

.yensom-page .yensom-hero-content {

    max-width:
        760px;

}


.yensom-page .yensom-eyebrow {

    display:
        inline-flex;

    margin-bottom:
        28px;

    color:
        var(--yensom-green-dark);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.yensom-page .yensom-hero-content h1 {

    margin:
        0;

    color:
        var(--yensom-black);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(3.5rem, 7vw, 7.5rem);

    font-weight:
        700;

    letter-spacing:
        -0.075em;

    line-height:
        0.94;

}


.yensom-page .yensom-hero-content h1 span {

    display:
        block;

    color:
        var(--yensom-green-dark);

}


.yensom-page .yensom-hero-lead {

    max-width:
        650px;

    margin:
        38px 0 0;

    color:
        var(--yensom-muted);

    font-size:
        clamp(1rem, 1.4vw, 1.2rem);

    line-height:
        1.8;

}


.yensom-page .yensom-hero-lead strong {

    color:
        var(--yensom-black);

}


/* =========================================================
   HERO ACTIONS
========================================================= */

.yensom-page .yensom-hero-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        28px;

    margin-top:
        42px;

}


.yensom-page .yensom-text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--yensom-black);

    font-size:
        0.85rem;

    font-weight:
        700;

    transition:
        color 0.3s ease,

        transform 0.3s ease;

}


.yensom-page .yensom-text-link:hover {

    color:
        var(--yensom-green-dark);

    transform:
        translateX(4px);

}


/* =========================================================
   HERO META
========================================================= */

.yensom-page .yensom-hero-meta {

    display:
        grid;

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

    gap:
        25px;

    max-width:
        650px;

    margin-top:
        70px;

    padding-top:
        28px;

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

}


.yensom-page .yensom-hero-meta div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.yensom-page .yensom-hero-meta span {

    color:
        var(--yensom-muted);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

}


.yensom-page .yensom-hero-meta strong {

    color:
        var(--yensom-black);

    font-size:
        0.85rem;

    font-weight:
        700;

}


/* =========================================================
   HERO VISUAL
========================================================= */

.yensom-page .yensom-hero-visual {

    position:
        relative;

    min-height:
        680px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.yensom-page .yensom-visual-glow {

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    border-radius:
        50%;

    background:
        rgba(91, 183, 128, 0.13);

    filter:
        blur(10px);

}


/* =========================================================
   MOBILE APP FRAME
========================================================= */

.yensom-page .yensom-app-frame {

    position:
        relative;

    z-index:
        2;

    width:
        min(360px, 72%);

    height:
        640px;

    padding:
        9px;

    overflow:
        hidden;

    border:
        8px solid
        var(--yensom-black);

    border-radius:
        42px;

    background:
        var(--yensom-black);

    box-shadow:

        0 35px 80px
        rgba(17, 17, 17, 0.22),

        0 0 0 1px
        rgba(255, 255, 255, 0.08);

}


.yensom-page .yensom-app-frame::before {

    content:
        "";

    position:
        absolute;

    top:
        10px;

    left:
        50%;

    z-index:
        3;

    width:
        90px;

    height:
        24px;

    transform:
        translateX(-50%);

    border-radius:
        999px;

    background:
        var(--yensom-black);

}


.yensom-page .yensom-app-frame img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        top center;

    border-radius:
        30px;

}


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

.yensom-page .yensom-floating-card {

    position:
        absolute;

    z-index:
        4;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        15px 18px;

    border:
        1px solid
        rgba(255, 255, 255, 0.5);

    border-radius:
        16px;

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 18px 50px
        rgba(17, 17, 17, 0.12);

    backdrop-filter:
        blur(15px);

}


.yensom-page .yensom-floating-card-one {

    top:
        18%;

    left:
        0;

}


.yensom-page .yensom-floating-card-two {

    right:
        0;

    bottom:
        18%;

}


.yensom-page .yensom-floating-icon {

    width:
        36px;

    height:
        36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--yensom-green-soft);

    color:
        var(--yensom-green-dark);

    font-weight:
        800;

}


.yensom-page .yensom-floating-card div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.yensom-page .yensom-floating-card strong {

    color:
        var(--yensom-black);

    font-size:
        0.8rem;

}


.yensom-page .yensom-floating-card span:not(.yensom-floating-icon) {

    color:
        var(--yensom-muted);

    font-size:
        0.68rem;

}


/* =========================================================
   GENERAL SECTION
========================================================= */

.yensom-page .yensom-section {

    position:
        relative;

    padding:
        clamp(100px, 12vw, 180px)
        0;

}


.yensom-page .section-heading {

    max-width:
        850px;

}


.yensom-page .section-label {

    display:
        inline-block;

    margin-bottom:
        20px;

    color:
        var(--yensom-green-dark);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

}


.yensom-page .section-title {

    margin:
        0;

    color:
        var(--yensom-black);

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(2.4rem, 5vw, 5rem);

    font-weight:
        700;

    letter-spacing:
        -0.06em;

    line-height:
        1.02;

}


.yensom-page .section-description {

    max-width:
        700px;

    margin:
        28px 0 0;

    color:
        var(--yensom-muted);

    font-size:
        1rem;

    line-height:
        1.8;

}


/* =========================================================
   OVERVIEW
========================================================= */

.yensom-page .yensom-overview {

    background:
        #ffffff;

}


.yensom-page .yensom-overview-grid {

    display:
        grid;

    grid-template-columns:
        1.1fr 0.9fr;

    gap:
        100px;

    margin-top:
        80px;

}


.yensom-page .yensom-overview-intro p {

    max-width:
        720px;

    margin:
        0 0 25px;

    color:
        var(--yensom-muted);

    font-size:
        1.08rem;

    line-height:
        1.9;

}


.yensom-page .yensom-overview-statement {

    align-self:
        start;

    padding:
        45px;

    border-left:
        3px solid
        var(--yensom-green);

    background:
        var(--yensom-green-soft);

}


.yensom-page .yensom-overview-statement span {

    display:
        block;

    margin-bottom:
        20px;

    color:
        var(--yensom-green-dark);

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

}


.yensom-page .yensom-overview-statement strong {

    color:
        var(--yensom-black);

    font-family:
        "Manrope",
        sans-serif;

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

    line-height:
        1.1;

    letter-spacing:
        -0.05em;

}


/* =========================================================
   PROBLEM
========================================================= */

.yensom-page .yensom-problem {

    background:
        #f7faf8;

}


.yensom-page .yensom-problem-grid {

    display:
        grid;

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

    gap:
        20px;

    margin-top:
        70px;

}


.yensom-page .yensom-problem-card {

    min-height:
        500px;

    padding:
        45px;

    border:
        1px solid
        rgba(17, 17, 17, 0.07);

    border-radius:
        24px;

    background:
        #ffffff;

    transition:
        transform 0.35s ease,

        box-shadow 0.35s ease;

}


.yensom-page .yensom-problem-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 25px 60px
        rgba(17, 17, 17, 0.08);

}


.yensom-page .yensom-card-number {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    margin-bottom:
        45px;

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

    border-radius:
        50%;

    color:
        var(--yensom-green-dark);

    font-size:
        0.7rem;

    font-weight:
        800;

}


.yensom-page .yensom-problem-card h3 {

    margin:
        0 0 20px;

    color:
        var(--yensom-black);

    font-size:
        1.45rem;

    letter-spacing:
        -0.04em;

}


.yensom-page .yensom-problem-card p {

    margin:
        0 0 25px;

    color:
        var(--yensom-muted);

    line-height:
        1.8;

}


.yensom-page .yensom-problem-card ul {

    display:
        grid;

    gap:
        13px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.yensom-page .yensom-problem-card li {

    position:
        relative;

    padding-left:
        18px;

    color:
        var(--yensom-text);

    font-size:
        0.86rem;

    line-height:
        1.6;

}


.yensom-page .yensom-problem-card li::before {

    content:
        "";

    position:
        absolute;

    top:
        9px;

    left:
        0;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--yensom-green);

}


/* =========================================================
   FLOW
========================================================= */

.yensom-page .yensom-flow {

    background:
        var(--yensom-black);

}


.yensom-page .yensom-flow .section-title {

    color:
        #ffffff;

}


.yensom-page .yensom-flow .section-label {

    color:
        var(--yensom-green);

}


.yensom-page .yensom-flow-grid {

    position:
        relative;

    display:
        grid;

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

    gap:
        30px;

    margin-top:
        90px;

}


.yensom-page .yensom-flow-line {

    position:
        absolute;

    top:
        30px;

    left:
        7%;

    right:
        7%;

    height:
        1px;

    background:
        rgba(91, 183, 128, 0.3);

}


.yensom-page .yensom-flow-item {

    position:
        relative;

    z-index:
        1;

}


.yensom-page .yensom-flow-item > span {

    width:
        60px;

    height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        35px;

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

    border-radius:
        50%;

    background:
        var(--yensom-black);

    color:
        var(--yensom-green);

    font-size:
        0.7rem;

    font-weight:
        800;

}


.yensom-page .yensom-flow-item h3 {

    margin:
        0 0 15px;

    color:
        #ffffff;

    font-size:
        1.4rem;

}


.yensom-page .yensom-flow-item p {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.55);

    font-size:
        0.9rem;

    line-height:
        1.8;

}


/* =========================================================
   PRODUCT SYSTEM
========================================================= */

.yensom-page .yensom-system-grid {

    display:
        grid;

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

    gap:
        18px;

    margin-top:
        80px;

}


.yensom-page .yensom-system-card {

    min-height:
        360px;

    padding:
        40px;

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

    border-radius:
        22px;

    transition:
        transform 0.35s ease,

        background 0.35s ease,

        border-color 0.35s ease;

}


.yensom-page .yensom-system-card:hover {

    transform:
        translateY(-7px);

    border-color:
        var(--yensom-green-border);

    background:
        var(--yensom-green-soft);

}


.yensom-page .yensom-system-index {

    display:
        block;

    margin-bottom:
        60px;

    color:
        var(--yensom-green-dark);

    font-size:
        0.7rem;

    font-weight:
        800;

}


.yensom-page .yensom-system-card h3 {

    margin:
        0 0 18px;

    color:
        var(--yensom-black);

    font-size:
        1.35rem;

}


.yensom-page .yensom-system-card p {

    margin:
        0;

    color:
        var(--yensom-muted);

    font-size:
        0.9rem;

    line-height:
        1.8;

}


.yensom-page .yensom-system-tag {

    display:
        inline-block;

    margin-top:
        30px;

    color:
        var(--yensom-green-dark);

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


/* =========================================================
   TRANSPARENCY
========================================================= */

.yensom-page .yensom-transparency {

    background:
        #f7faf8;

}


.yensom-page .yensom-feature-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        100px;

}


.yensom-page .yensom-feature-content h2 {

    margin:
        0 0 30px;

    color:
        var(--yensom-black);

    font-size:
        clamp(2.4rem, 4vw, 4.5rem);

    letter-spacing:
        -0.06em;

    line-height:
        1.02;

}


.yensom-page .yensom-feature-content p {

    max-width:
        650px;

    margin:
        0 0 22px;

    color:
        var(--yensom-muted);

    line-height:
        1.8;

}


.yensom-page .yensom-feature-visual {

    display:
        flex;

    justify-content:
        center;

}


.yensom-page .yensom-impact-card {

    width:
        min(100%, 430px);

    padding:
        45px;

    border-radius:
        28px;

    background:
        var(--yensom-black);

    box-shadow:
        0 30px 80px
        rgba(17, 17, 17, 0.15);

}


.yensom-page .yensom-impact-card > span {

    display:
        block;

    margin-bottom:
        40px;

    color:
        var(--yensom-green);

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

}


.yensom-page .yensom-impact-card strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        1.2rem;

}


.yensom-page .yensom-impact-line {

    width:
        1px;

    height:
        35px;

    margin:
        10px 0 10px 8px;

    background:
        var(--yensom-green);

}


/* =========================================================
   MANAGEMENT
========================================================= */

.yensom-page .yensom-management {

    background:
        #ffffff;

}


.yensom-page .yensom-management-grid {

    display:
        grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap:
        100px;

}


.yensom-page .yensom-management-intro h2 {

    margin:
        0;

    color:
        var(--yensom-black);

    font-size:
        clamp(2.5rem, 5vw, 5rem);

    letter-spacing:
        -0.06em;

    line-height:
        1.02;

}


.yensom-page .yensom-management-content > p {

    max-width:
        700px;

    margin:
        0 0 50px;

    color:
        var(--yensom-muted);

    line-height:
        1.8;

}


.yensom-page .yensom-management-list {

    display:
        grid;

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

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

}


.yensom-page .yensom-management-list div {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    padding:
        22px 0;

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

}


.yensom-page .yensom-management-list span {

    color:
        var(--yensom-green-dark);

    font-size:
        0.7rem;

    font-weight:
        800;

}


.yensom-page .yensom-management-list strong {

    color:
        var(--yensom-black);

    font-size:
        0.9rem;

}


/* =========================================================
   VISION
========================================================= */

.yensom-page .yensom-vision {

    background:
        var(--yensom-green);

}


.yensom-page .yensom-vision-inner {

    max-width:
        1000px;

}


.yensom-page .yensom-vision .section-label {

    color:
        rgba(17, 17, 17, 0.6);

}


.yensom-page .yensom-vision h2 {

    margin:
        0;

    color:
        var(--yensom-black);

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

    letter-spacing:
        -0.075em;

    line-height:
        0.98;

}


.yensom-page .yensom-vision p {

    max-width:
        700px;

    margin:
        40px 0 0;

    color:
        rgba(17, 17, 17, 0.68);

    font-size:
        1rem;

    line-height:
        1.8;

}


.yensom-page .yensom-vision-path {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        18px;

    margin-top:
        60px;

}


.yensom-page .yensom-vision-path span {

    padding:
        10px 18px;

    border:
        1px solid
        rgba(17, 17, 17, 0.2);

    border-radius:
        999px;

    color:
        var(--yensom-black);

    font-size:
        0.75rem;

    font-weight:
        800;

}


.yensom-page .yensom-vision-path i {

    font-style:
        normal;

    color:
        rgba(17, 17, 17, 0.5);

}


/* =========================================================
   RESEARCH
========================================================= */

.yensom-page .yensom-research {

    background:
        #ffffff;

}


.yensom-page .yensom-research-grid {

    display:
        grid;

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

    gap:
        18px;

    margin-top:
        70px;

}


.yensom-page .yensom-research-card {

    display:
        grid;

    grid-template-columns:
        50px 1fr;

    gap:
        25px;

    padding:
        40px;

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

    border-radius:
        22px;

}


.yensom-page .yensom-research-card > span {

    color:
        var(--yensom-green-dark);

    font-size:
        0.7rem;

    font-weight:
        800;

}


.yensom-page .yensom-research-card h3 {

    margin:
        0 0 15px;

    color:
        var(--yensom-black);

    font-size:
        1.3rem;

}


.yensom-page .yensom-research-card p {

    margin:
        0;

    color:
        var(--yensom-muted);

    font-size:
        0.9rem;

    line-height:
        1.8;

}


.yensom-page .yensom-research-card a {

    display:
        inline-block;

    margin-top:
        25px;

    color:
        var(--yensom-green-dark);

    font-size:
        0.75rem;

    font-weight:
        800;

}


.yensom-page .yensom-research-card a:hover {

    color:
        var(--yensom-red);

}


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

.yensom-page .yensom-cta {

    padding:
        clamp(100px, 12vw, 180px)
        0;

    background:
        var(--yensom-black);

}


.yensom-page .yensom-cta-inner {

    max-width:
        1000px;

}


.yensom-page .yensom-cta .section-label {

    color:
        var(--yensom-green);

}


.yensom-page .yensom-cta h2 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(3rem, 6vw, 6.5rem);

    letter-spacing:
        -0.07em;

    line-height:
        1;

}


.yensom-page .yensom-cta p {

    max-width:
        650px;

    margin:
        35px 0;

    color:
        rgba(255, 255, 255, 0.6);

    line-height:
        1.8;

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1100px) {


    .yensom-page .yensom-hero-grid {

        grid-template-columns:
            1fr;

    }


    .yensom-page .yensom-hero-content {

        max-width:
            850px;

    }


    .yensom-page .yensom-hero-visual {

        min-height:
            620px;

    }


    .yensom-page .yensom-problem-grid {

        grid-template-columns:
            1fr;

    }


    .yensom-page .yensom-problem-card {

        min-height:
            auto;

    }


    .yensom-page .yensom-system-grid {

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

    }


    .yensom-page .yensom-feature-grid {

        grid-template-columns:
            1fr;

    }


    .yensom-page .yensom-management-grid {

        grid-template-columns:
            1fr;

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {


    .yensom-page .yensom-hero {

        padding-top:
            90px;

    }


    .yensom-page .yensom-hero-content h1 {

        font-size:
            clamp(3rem, 16vw, 5rem);

    }


    .yensom-page .yensom-hero-meta {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .yensom-page .yensom-hero-visual {

        min-height:
            580px;

    }


    .yensom-page .yensom-app-frame {

        width:
            280px;

        height:
            520px;

    }


    .yensom-page .yensom-floating-card {

        padding:
            11px 13px;

    }


    .yensom-page .yensom-floating-card-one {

        left:
            -5px;

    }


    .yensom-page .yensom-floating-card-two {

        right:
            -5px;

    }


    .yensom-page .yensom-overview-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }


    .yensom-page .yensom-system-grid {

        grid-template-columns:
            1fr;

    }


    .yensom-page .yensom-management-list {

        grid-template-columns:
            1fr;

    }


    .yensom-page .yensom-research-grid {

        grid-template-columns:
            1fr;

    }


    .yensom-page .yensom-research-card {

        grid-template-columns:
            1fr;

        gap:
            20px;

        padding:
            30px;

    }


    .yensom-page .yensom-flow-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .yensom-page .yensom-flow-line {

        top:
            30px;

        bottom:
            30px;

        left:
            29px;

        right:
            auto;

        width:
            1px;

        height:
            auto;

    }


    .yensom-page .yensom-flow-item {

        padding-left:
            80px;

    }


    .yensom-page .yensom-flow-item > span {

        position:
            absolute;

        top:
            0;

        left:
            0;

    }


    .yensom-page .yensom-vision-path {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .yensom-page .yensom-vision-path i {

        transform:
            rotate(90deg);

    }


    .yensom-page .yensom-feature-grid {

        gap:
            60px;

    }


    .yensom-page .yensom-cta h2 {

        font-size:
            clamp(2.8rem, 13vw, 5rem);

    }

}