/* =========================================================
   WHY RYTHON
========================================================= */

.why-rython{
    position:relative;
    overflow:hidden;

    padding:120px 24px 90px;

    background:
        radial-gradient(circle at 50% 40%,
        rgba(37,99,235,.045),
        transparent 32%),
        linear-gradient(180deg,#ffffff,#f8fbff);
}

.why-rython-container{
    width:100%;
    max-width:1480px;

    margin:auto;

    position:relative;
    z-index:2;
}


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

.why-rython-header{
    max-width:1150px;

    margin:0 auto 55px;

    text-align:center;
}

.why-rython-tag{
    display:inline-flex;

    align-items:center;
    gap:9px;

    padding:10px 22px;

    margin-bottom:20px;

    border-radius:999px;

    background:
        linear-gradient(135deg,#1747c9,#2563eb);

    color:#fff;

    font-size:13px;
    font-weight:800;

    letter-spacing:1.2px;

    box-shadow:
        0 10px 25px rgba(37,99,235,.18);
}

.why-rython-tag svg{
    width:17px;
    height:17px;
}

.why-rython-header h2{
    margin:0;

    color:#081B4B;

    font-size:clamp(44px,4.5vw,68px);

    line-height:1.06;

    letter-spacing:-2.8px;

    font-weight:900;
}

.why-rython-header h2 span{
    color:#2563EB;
}

.why-rython-header p{
    max-width:1000px;

    margin:20px auto 0;

    color:#475569;

    font-size:18px;

    line-height:1.65;
}

.why-heading-line{
    width:60px;
    height:4px;

    margin:18px auto 0;

    border-radius:50px;

    background:#2563EB;
}


/* =========================================================
   COMPARISON
========================================================= */

.why-comparison{
    position:relative;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:stretch;
}


/* =========================================================
   CARD
========================================================= */

.why-compare-card{
    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:#fff;

    box-shadow:
        0 20px 60px rgba(15,23,42,.07);
}


/* BUILD */

.why-build{
    border:1px solid rgba(239,68,68,.25);
}


/* PARTNER */

.why-partner{
    border:1px solid rgba(22,163,74,.25);
}


/* =========================================================
   CARD HEADER
========================================================= */

.why-card-head{
    min-height:110px;

    display:flex;

    align-items:center;

    gap:25px;

    padding:20px 35px 20px 80px;
}


/* BUILD HEADER */

.why-build .why-card-head{
    background:
        linear-gradient(90deg,#fff5f5,#fff);
}

.why-build .why-card-head h3{
    color:#c81e1e;
}


/* PARTNER HEADER */

.why-partner .why-card-head{
    background:
        linear-gradient(90deg,#f0fdf4,#fff);
}

.why-partner .why-card-head h3{
    color:#15803d;
}


.why-card-head h3{
    margin:0 0 6px;

    font-size:25px;

    line-height:1.2;

    font-weight:900;
}

.why-card-head p{
    margin:0;

    color:#081B4B;

    font-size:14px;

    font-weight:600;
}


/* =========================================================
   HEADER ICON
========================================================= */

.why-head-icon{
    position:absolute;

    top:15px;
    left:70px;

    transform:translateX(-50%);

    width:74px;
    height:74px;

    display:flex;

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

    border-radius:50%;

    color:#fff;

    box-shadow:
        0 12px 25px rgba(15,23,42,.12);
}

.why-head-icon svg{
    width:37px;
    height:37px;
}

.why-build .why-head-icon{
    background:
        linear-gradient(145deg,#ef476f,#dc1f3f);
}

.why-partner .why-head-icon{
    background:
        linear-gradient(145deg,#16a34a,#07883b);
}


/* =========================================================
   CARD BODY
========================================================= */

.why-card-body{
    padding:12px 50px 20px;
}

.why-item{
    display:grid;

    grid-template-columns:72px 1fr;

    gap:22px;

    align-items:center;

    min-height:105px;

    padding:15px 0;

    border-bottom:
        1px solid rgba(148,163,184,.20);
}

.why-item:last-child{
    border-bottom:0;
}


/* ITEM ICON */

.why-item-icon{
    width:62px;
    height:62px;

    display:flex;

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

    border-radius:50%;
}

.why-item-icon svg{
    width:31px;
    height:31px;

    stroke-width:2;
}

.why-build .why-item-icon{
    color:#dc2626;

    background:#fff0f0;
}

.why-partner .why-item-icon{
    color:#079447;

    background:#ecf9f0;
}


/* TEXT */

.why-item h4{
    margin:0 0 6px;

    color:#081B4B;

    font-size:16px;

    line-height:1.35;

    font-weight:800;
}

.why-item p{
    margin:0;

    color:#475569;

    font-size:13px;

    line-height:1.55;
}


/* =========================================================
   VS
========================================================= */

.why-vs{
    position:absolute;

    z-index:10;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    width:88px;
    height:88px;

    display:flex;

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

    border-radius:50%;

    background:#fff;

    border:
        1px solid rgba(37,99,235,.15);

    box-shadow:
        0 15px 40px rgba(37,99,235,.14);
}

.why-vs::before{
    content:"";

    position:absolute;

    inset:-18px;

    border-radius:50%;

    border:
        1px dashed rgba(37,99,235,.25);
}

.why-vs span{
    color:#081B4B;

    font-size:28px;

    font-weight:900;
}


/* =========================================================
   INVESTMENT PANEL
========================================================= */

.why-investment{
    margin-top:25px;

    display:grid;

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

    align-items:stretch;

    padding:22px;

    border-radius:24px;

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

    border:
        1px solid rgba(37,99,235,.14);

    box-shadow:
        0 15px 45px rgba(15,23,42,.06);
}


/* =========================================================
   INVESTMENT MAIN
========================================================= */

.why-invest-main{
    display:grid;

    grid-template-columns:135px 1fr;

    gap:25px;

    align-items:center;

    padding:
        5px 30px 5px 10px;

    border-right:
        1px solid rgba(37,99,235,.18);
}

.why-invest-icon{
    width:120px;
    height:120px;

    display:flex;

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

    border-radius:50%;

    color:#1557e8;

    background:#f4f8ff;

    border:
        1px solid rgba(37,99,235,.12);

    box-shadow:
        0 10px 30px rgba(37,99,235,.08);
}

.why-invest-icon svg{
    width:58px;
    height:58px;

    stroke-width:1.6;
}

.why-invest-copy h3{
    margin:0 0 14px;

    color:#081B4B;

    font-size:25px;

    line-height:1.25;

    font-weight:900;
}

.why-invest-copy p{
    margin:0;

    max-width:420px;

    color:#334155;

    font-size:13px;

    line-height:1.65;
}


/* =========================================================
   BENEFITS
========================================================= */

.why-benefit{
    position:relative;

    padding:5px 18px;

    text-align:center;
}

.why-benefit:not(:last-child){
    border-right:
        1px solid rgba(37,99,235,.16);
}

.why-benefit-icon{
    width:60px;
    height:60px;

    margin:0 auto 13px;

    display:flex;

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

    border-radius:50%;

    color:#1557e8;

    background:#edf4ff;
}

.why-benefit-icon svg{
    width:30px;
    height:30px;

    stroke-width:1.8;
}

.why-benefit h4{
    margin:0 0 8px;

    color:#081B4B;

    font-size:15px;

    line-height:1.3;

    font-weight:800;
}

.why-benefit p{
    margin:0;

    color:#475569;

    font-size:11px;

    line-height:1.55;
}


/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.why-bottom-message{
    max-width:1200px;

    min-height:64px;

    margin:18px auto 0;

    display:flex;

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

    gap:25px;

    padding:16px 35px;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #1747c9,
            #0755e8,
            #1747c9
        );

    box-shadow:
        0 15px 35px rgba(37,99,235,.22);

    color:#fff;
}

.why-bottom-message svg{
    width:23px;
    height:23px;

    flex-shrink:0;
}

.why-bottom-message p{
    margin:0;

    color:#fff;

    text-align:center;

    font-size:19px;

    line-height:1.4;
}

.why-bottom-message strong{
    font-weight:900;
}


/* =========================================================
   HOVER EFFECTS
========================================================= */

.why-compare-card,
.why-benefit-icon,
.why-item-icon{
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

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

    box-shadow:
        0 28px 70px rgba(15,23,42,.10);
}

.why-item:hover .why-item-icon{
    transform:scale(1.08);
}

.why-benefit:hover .why-benefit-icon{
    transform:
        translateY(-3px)
        scale(1.06);
}


/* =========================================================
   1200PX
========================================================= */

@media(max-width:1200px){

    .why-comparison{
        gap:55px;
    }

    .why-card-body{
        padding:
            12px 30px 20px;
    }

    .why-investment{
        grid-template-columns:
            repeat(5,1fr);
    }

    .why-invest-main{
        grid-column:1/-1;

        border-right:0;

        border-bottom:
            1px solid rgba(37,99,235,.15);

        margin-bottom:20px;

        padding-bottom:25px;
    }

}


/* =========================================================
   900PX
========================================================= */

@media(max-width:900px){

    .why-rython{
        padding:
            90px 20px 75px;
    }

    .why-comparison{
        grid-template-columns:1fr;

        gap:25px;
    }

    .why-vs{
        position:relative;

        left:auto;
        top:auto;

        margin:-5px auto;

        transform:none;

        width:70px;
        height:70px;
    }

    .why-vs::before{
        inset:-10px;
    }

    .why-investment{
        grid-template-columns:
            repeat(2,1fr);
    }

    .why-invest-main{
        grid-column:1/-1;
    }

    .why-benefit{
        padding:20px;
    }

    .why-benefit:nth-child(even){
        border-right:0;
    }

}


/* =========================================================
   600PX
========================================================= */

@media(max-width:600px){

    .why-rython{
        padding:
            75px 14px 60px;
    }

    .why-rython-header{
        margin-bottom:40px;
    }

    .why-rython-header h2{
        font-size:34px;

        letter-spacing:-1.3px;
    }

    .why-rython-header p{
        font-size:14px;
    }

    .why-rython-header p br{
        display:none;
    }


    /* CARD */

    .why-card-head{
        min-height:auto;

        padding:
            22px 20px;

        gap:15px;
    }

    .why-head-icon{
        position:relative;

        top:auto;
        left:auto;

        transform:none;

        flex:0 0 58px;

        width:58px;
        height:58px;
    }

    .why-head-icon svg{
        width:29px;
        height:29px;
    }

    .why-card-head h3{
        font-size:19px;
    }

    .why-card-head p{
        font-size:11px;
        line-height:1.4;
    }


    /* ITEMS */

    .why-card-body{
        padding:
            5px 18px 15px;
    }

    .why-item{
        grid-template-columns:
            52px 1fr;

        gap:14px;

        min-height:auto;

        padding:18px 0;
    }

    .why-item-icon{
        width:48px;
        height:48px;
    }

    .why-item-icon svg{
        width:24px;
        height:24px;
    }

    .why-item h4{
        font-size:14px;
    }

    .why-item p{
        font-size:11px;
    }


    /* INVESTMENT */

    .why-investment{
        grid-template-columns:1fr;

        padding:
            15px;
    }

    .why-invest-main{
        display:flex;

        flex-direction:column;

        text-align:center;

        padding:
            15px 5px 25px;
    }

    .why-invest-icon{
        width:90px;
        height:90px;
    }

    .why-invest-icon svg{
        width:43px;
        height:43px;
    }

    .why-invest-copy h3{
        font-size:22px;
    }

    .why-invest-copy p{
        font-size:12px;
    }

    .why-benefit{
        border-right:0 !important;

        border-bottom:
            1px solid rgba(37,99,235,.13);

        padding:
            20px 10px;
    }

    .why-benefit:last-child{
        border-bottom:0;
    }

    .why-benefit h4 br{
        display:none;
    }

    .why-benefit p{
        max-width:300px;

        margin:auto;

        font-size:11px;
    }


    /* BOTTOM */

    .why-bottom-message{
        gap:10px;

        padding:
            18px 16px;

        border-radius:14px;
    }

    .why-bottom-message p{
        font-size:15px;
    }

    .why-bottom-message svg{
        width:17px;
        height:17px;
    }

}

/* =========================================================
   WHY RYTHON — VISUAL SCALE & SPACING FIX
   Paste at END of existing CSS
========================================================= */

.why-rython-container{
    max-width:1440px;
}


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

.why-rython-header{
    max-width:1200px;
    margin-bottom:65px;
}

.why-rython-header h2{
    max-width:1100px;
    margin:0 auto;

    font-size:clamp(48px,4.5vw,68px);
    line-height:1.08;
    letter-spacing:-2.5px;
}

.why-rython-header p{
    max-width:920px;
    margin:22px auto 0;

    font-size:17px;
    line-height:1.7;
}


/* ================= COMPARISON ================= */

.why-comparison{
    gap:90px;
}

.why-compare-card{
    min-height:650px;
}


/* ================= CARD HEADER ================= */

.why-card-head{
    min-height:125px;

    padding:
        26px 35px
        26px 125px;
}

.why-head-icon{
    left:62px;
    top:25px;

    width:72px;
    height:72px;
}

.why-head-icon svg{
    width:34px;
    height:34px;
}

.why-card-head h3{
    font-size:23px;
    line-height:1.2;
    margin-bottom:7px;
}

.why-card-head p{
    font-size:13px;
    line-height:1.5;
}


/* ================= CARD BODY ================= */

.why-card-body{
    padding:
        15px 42px 25px;
}

.why-item{
    grid-template-columns:
        64px minmax(0,1fr);

    gap:20px;

    min-height:102px;

    padding:17px 0;
}

.why-item-icon{
    width:56px;
    height:56px;
}

.why-item-icon svg{
    width:27px;
    height:27px;
}

.why-item h4{
    margin-bottom:7px;

    font-size:15px;
    line-height:1.4;
}

.why-item p{
    font-size:12px;
    line-height:1.65;

    max-width:100%;
}


/* ================= VS ================= */

.why-vs{
    width:82px;
    height:82px;
}

.why-vs span{
    font-size:25px;
}


/* ================= INVESTMENT ================= */

.why-investment{
    margin-top:32px;

    min-height:205px;

    padding:26px 22px;

    grid-template-columns:
        2.35fr repeat(5,1fr);
}

.why-invest-main{
    grid-template-columns:
        110px 1fr;

    gap:22px;

    padding:
        10px 30px 10px 5px;
}

.why-invest-icon{
    width:96px;
    height:96px;
}

.why-invest-icon svg{
    width:45px;
    height:45px;
}

.why-invest-copy h3{
    font-size:22px;
    line-height:1.25;

    margin-bottom:12px;
}

.why-invest-copy p{
    font-size:12px;
    line-height:1.65;
}


/* ================= SMALL BENEFITS ================= */

.why-benefit{
    padding:10px 17px;
}

.why-benefit-icon{
    width:56px;
    height:56px;

    margin-bottom:14px;
}

.why-benefit-icon svg{
    width:27px;
    height:27px;
}

.why-benefit h4{
    font-size:14px;
    line-height:1.35;

    margin-bottom:9px;
}

.why-benefit p{
    font-size:10.5px;
    line-height:1.55;
}


/* ================= BOTTOM MESSAGE ================= */

.why-bottom-message{
    max-width:1200px;

    min-height:68px;

    margin-top:22px;

    padding:17px 35px;
}

.why-bottom-message p{
    font-size:17px;
}


/* =========================================================
   HOVER — SUBTLE PREMIUM EFFECT
========================================================= */

.why-item{
    transition:
        transform .3s ease,
        background .3s ease;
}

.why-item:hover{
    transform:translateX(5px);
}

.why-build .why-item:hover{
    background:
        linear-gradient(
            90deg,
            rgba(239,68,68,.035),
            transparent
        );
}

.why-partner .why-item:hover{
    background:
        linear-gradient(
            90deg,
            rgba(22,163,74,.04),
            transparent
        );
}

.why-item-icon{
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.why-item:hover .why-item-icon{
    transform:scale(1.09);

    box-shadow:
        0 8px 20px rgba(15,23,42,.08);
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1200px) and (min-width:901px){

    .why-comparison{
        gap:65px;
    }

    .why-card-head{
        padding-left:105px;
    }

    .why-head-icon{
        left:55px;
    }

    .why-card-body{
        padding-left:30px;
        padding-right:30px;
    }

    .why-item{
        grid-template-columns:
            58px minmax(0,1fr);

        gap:16px;
    }

    .why-investment{
        grid-template-columns:
            repeat(5,1fr);
    }

    .why-invest-main{
        grid-column:1/-1;

        grid-template-columns:
            100px 1fr;

        padding-bottom:25px;

        margin-bottom:15px;
    }

}


/* =========================================================
   IMPORTANT: LARGE DESKTOP
========================================================= */

@media (min-width:1400px){

    .why-rython{
        padding-top:130px;
        padding-bottom:100px;
    }

    .why-comparison{
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);
    }

    .why-compare-card{
        min-height:680px;
    }

    .why-item{
        min-height:105px;
    }

}

/* =========================================================
   WHY RYTHON — FINAL MOBILE FIX
   Paste at VERY END of why-rython CSS
========================================================= */

@media (max-width: 600px){

    /* SECTION */
    .why-rython{
        padding: 70px 14px 55px;
        overflow: hidden;
    }

    .why-rython-container{
        width: 100%;
        max-width: 100%;
    }


    /* =========================
       COMPARISON CARDS
    ========================== */

    .why-comparison{
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        width: 100%;
    }

    .why-compare-card{
        width: 100%;
        min-width: 0;
        min-height: 0;
        border-radius: 20px;
        overflow: hidden;
    }


    /* =========================
       CARD HEADER
    ========================== */

    .why-card-head{
        position: relative;

        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        align-items: center;

        gap: 15px;

        min-height: 110px;

        padding: 20px 18px !important;

        text-align: left;
    }

    .why-head-icon{
        position: relative !important;

        top: auto !important;
        left: auto !important;

        transform: none !important;

        width: 56px;
        height: 56px;

        flex: none;

        margin: 0;
    }

    .why-head-icon svg{
        width: 27px;
        height: 27px;
    }


    /* HEADER TEXT */

    .why-card-head > div:not(.why-head-icon){
        min-width: 0;
        width: 100%;
    }

    .why-card-head h3{
        margin: 0 0 5px;

        font-size: 20px !important;
        line-height: 1.15;

        letter-spacing: -.3px;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .why-card-head p{
        margin: 0;

        font-size: 11px !important;
        line-height: 1.45;

        max-width: 100%;
    }


    /* =========================
       CARD BODY
    ========================== */

    .why-card-body{
        padding: 8px 18px 16px;
    }

    .why-item{
        display: grid;

        grid-template-columns: 50px minmax(0, 1fr);

        gap: 14px;

        min-height: 0;

        padding: 18px 0;
    }

    .why-item-icon{
        width: 48px;
        height: 48px;
    }

    .why-item-icon svg{
        width: 23px;
        height: 23px;
    }

    .why-item h4{
        margin: 0 0 5px;

        font-size: 14px;
        line-height: 1.35;
    }

    .why-item p{
        margin: 0;

        font-size: 11px;
        line-height: 1.55;
    }


    /* Disable desktop hover movement */
    .why-item:hover{
        transform: none;
    }


    /* =========================
       VS
    ========================== */

    .why-vs{
        position: relative;

        left: auto;
        top: auto;

        width: 60px;
        height: 60px;

        margin: -4px auto;

        transform: none;
    }

    .why-vs span{
        font-size: 20px;
    }


    /* =========================
       INVESTMENT PANEL
    ========================== */

    .why-investment{
        display: grid;

        grid-template-columns: 1fr !important;

        width: 100%;

        min-height: 0;

        margin-top: 24px;

        padding: 14px;

        border-radius: 20px;
    }

    .why-invest-main{
        grid-column: auto;

        display: grid;

        grid-template-columns: 64px minmax(0, 1fr);

        gap: 15px;

        align-items: center;

        width: 100%;

        margin: 0 0 5px;

        padding: 12px 5px 22px;

        text-align: left;

        border-right: 0;

        border-bottom:
            1px solid rgba(37,99,235,.13);
    }

    .why-invest-icon{
        width: 60px;
        height: 60px;

        margin: 0;
    }

    .why-invest-icon svg{
        width: 29px;
        height: 29px;
    }

    .why-invest-copy{
        min-width: 0;
    }

    .why-invest-copy h3{
        margin: 0 0 7px;

        font-size: 18px;
        line-height: 1.25;

        overflow-wrap: break-word;
    }

    .why-invest-copy p{
        margin: 0;

        max-width: none;

        font-size: 11px;
        line-height: 1.55;
    }


    /* =========================
       BENEFITS
    ========================== */

    .why-benefit{
        display: grid;

        grid-template-columns: 52px minmax(0, 1fr);

        gap: 14px;

        align-items: center;

        padding: 17px 5px;

        text-align: left;

        border-right: 0 !important;

        border-bottom:
            1px solid rgba(37,99,235,.12);
    }

    .why-benefit:last-child{
        border-bottom: 0;
    }

    .why-benefit-icon{
        width: 48px;
        height: 48px;

        margin: 0;
    }

    .why-benefit-icon svg{
        width: 23px;
        height: 23px;
    }

    .why-benefit h4{
        margin: 0 0 4px;

        font-size: 13px;
        line-height: 1.3;
    }

    .why-benefit h4 br{
        display: none;
    }

    .why-benefit p{
        max-width: none;

        margin: 0;

        font-size: 10.5px;
        line-height: 1.5;
    }


    /* =========================
       BOTTOM MESSAGE
    ========================== */

    .why-bottom-message{
        width: 100%;

        gap: 10px;

        margin-top: 18px;

        padding: 16px 14px;

        border-radius: 14px;
    }

    .why-bottom-message p{
        font-size: 13px;
        line-height: 1.45;
    }

}

/* =========================================================
   WHY RYTHON — MOBILE BENEFITS FINAL FIX
========================================================= */

@media (max-width:600px){

    .why-benefit{
        display:grid !important;
        grid-template-columns:52px minmax(0,1fr) !important;
        grid-template-rows:auto auto;

        column-gap:14px;
        row-gap:4px;

        align-items:start;

        padding:20px 5px;

        text-align:left;
    }

    .why-benefit-icon{
        grid-column:1;
        grid-row:1 / span 2;

        width:48px;
        height:48px;

        margin:0;
    }

    .why-benefit h4{
        grid-column:2;
        grid-row:1;

        margin:5px 0 0;

        font-size:14px;
        line-height:1.35;

        text-align:left;
    }

    .why-benefit p{
        grid-column:2;
        grid-row:2;

        width:100%;
        max-width:none;

        margin:0;

        font-size:11px;
        line-height:1.55;

        text-align:left;
    }

}