* {

    box-sizing: border-box;

}



:root {

    --navy: #06224a;

    --blue: #1155cc;

    --purple: #6a25b8;

    --green: #087a4c;

    --bank: #0c6fb8;

    --text: #12213a;

    --muted: #6d7890;

    --line: #dfe6f0;

    --page: #f6f8fc;

}



body {

    margin: 0;

    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    background: var(--page);

    color: var(--text);

}





/* =========================================================

   HEADER

   ========================================================= */



.portal-header {

    background: linear-gradient(120deg, #041a39, #08295a);

    color: #ffffff;

    border-bottom: 3px solid #0f58d5;

}



.portal-header-inner {

    width: min(1460px, calc(100% - 36px));

    margin: auto;

    min-height: 132px;



    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 36px;

}



.brand-wrap {

    display: flex;

    align-items: center;

    gap: 18px;

}



.brand-logo {

    width: 94px;

    height: 94px;

    object-fit: contain;

}



.brand-copy h1 {

    margin: 0;

    font-size: 28px;

}



.brand-copy p {

    margin: 7px 0 0;

    color: #f4ad19;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

}



.portal-heading {

    max-width: 500px;

    padding-left: 32px;

    border-left: 1px solid rgba(255, 255, 255, 0.35);

}



.portal-heading h2 {

    margin: 0 0 5px;

    font-size: 26px;

}



.portal-heading p {

    margin: 0;

    color: #e5edf9;

}





/* =========================================================

   MAIN LAYOUT

   ========================================================= */



.page-shell {

    width: min(1460px, calc(100% - 36px));

    margin: 18px auto 0;



    display: grid;

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

    gap: 18px;

    align-items: start;

}





/* =========================================================

   SECTIONS

   ========================================================= */



.portal-section {

    margin-bottom: 16px;

    padding: 12px 14px 14px;



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

    border-radius: 16px;

    background: #ffffff;

}



.section-heading {

    min-height: 44px;

    margin: -2px -2px 12px;

    padding: 0 14px;



    display: flex;

    align-items: center;

    gap: 10px;



    border-radius: 10px;

    color: #ffffff;

}



.section-heading h2 {

    margin: 0;

    font-size: 18px;

}





/* WLC Websites */



.section-websites .section-heading {

    background: linear-gradient(90deg, #0b46ad, #125cd7);

}





/* WLC Applications */



.section-apps .section-heading {

    background: linear-gradient(90deg, #5e22ad, #7b2bc8);

}





/* Business Tools */



.section-tools .section-heading {

    background: linear-gradient(90deg, #08744a, #10955f);

}





/* Banks */



.section-banks .section-heading {

    background: linear-gradient(90deg, #0b5b97, #0d79c8);

}





/* =========================================================

   GRIDS

   ========================================================= */



.card-grid {

    display: grid;

    gap: 12px;

}



.grid-3 {

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

}



.grid-2 {

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

}



.grid-tools {

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

}





/* =========================================================

   CARDS

   ========================================================= */

.portal-card {

    height: 130px;

    padding: 14px 15px;



    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;



    text-align: center;



    border: 1px solid #dbe3ee;

    border-radius: 13px;



    background: #ffffff;



    box-shadow: 0 4px 14px rgba(20, 40, 75, 0.055);



    transition:

        transform 0.18s ease,

        box-shadow 0.18s ease,

        border-color 0.18s ease;

}



/* =========================================================

   LOGOS

   ========================================================= */






/* =========================================================

   CARD TEXT

   ========================================================= */



.card-copy {

    min-height: 48px;



    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}


.card-copy h3 {

    margin: 0 0 4px;



    font-size: 14px;

    font-weight: 700;



    line-height: 1.2;

}



.card-copy p {

    margin: 0;



    color: var(--muted);



    font-size: 11.5px;

    line-height: 1.3;

}




/* =========================================================

   BUTTONS

   All buttons have exactly the same dimensions

   ========================================================= */



.portal-btn {

    width: 150px;

    height: 34px;



    margin-top: 10px;



    display: inline-flex;

    align-items: center;

    justify-content: center;



    border-radius: 7px;



    background: #0e4db7;

    color: #ffffff;



    text-decoration: none;



    font-size: 12px;

    font-weight: 800;

}


.portal-btn:hover {

    background: #083b91;

    transform: translateY(-1px);

}





/* =========================================================

   RIGHT SIDEBAR

   ========================================================= */



.sidebar {

    position: sticky;

    top: 18px;



    display: flex;

    flex-direction: column;

    gap: 12px;

}



.side-card {

    border: 1px solid #dce5f0;

    border-radius: 16px;



    background: #ffffff;



    box-shadow: 0 5px 18px rgba(20, 40, 75, 0.06);

}





/* =========================================================

   DATE / TIME

   ========================================================= */



.clock-card {

    padding: 20px 22px;



    background: linear-gradient(145deg, #061d43, #0a316d);



    color: #ffffff;

}



.date-line {

    margin: 0 0 4px;



    color: #dce8fa;



    font-size: 13px;

    font-weight: 700;

}



.time-line {

    font-size: 38px;

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: 0.5px;

}



.timezone-line {

    margin-top: 9px;

    padding-top: 9px;



    border-top: 1px solid rgba(255, 255, 255, 0.20);



    font-size: 11px;

    color: #b9cbea;

}





/* =========================================================

   WELCOME CARD

   ========================================================= */



.welcome-card {

    padding: 21px 22px;



    background: linear-gradient(150deg, #061e45, #0b326b);



    color: #ffffff;

}



.welcome-kicker {

    display: block;



    margin-bottom: 6px;



    color: #ffb31d;



    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;

}



.welcome-card h2 {

    margin: 0 0 10px;



    font-size: 21px;

}



.welcome-card p {

    margin: 0;



    color: #e1ebf9;



    font-size: 13px;

    line-height: 1.6;

}





/* =========================================================

   INFO CARD

   ========================================================= */



.info-card {

    padding: 18px 20px;

}



.info-card h3 {

    margin: 0 0 8px;



    font-size: 16px;

}



.info-card p {

    margin: 0;



    color: var(--muted);



    font-size: 12px;

    line-height: 1.55;

}





/* =========================================================

   FOOTER

   ========================================================= */



.portal-footer {

    width: min(1460px, calc(100% - 36px));



    margin: 0 auto 18px;

    padding: 14px 20px;



    display: flex;

    flex-direction: column;

    align-items: center;



    border-radius: 12px;



    background: #eaf2ff;

    color: #12489d;



    text-align: center;



    font-size: 11px;

}



.portal-footer strong {

    font-size: 12px;

}





/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 1180px) {



    .page-shell {

        grid-template-columns: 1fr;

    }



    .sidebar {

        position: static;



        display: grid;

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

    }



    .grid-tools {

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

    }



}





/* =========================================================

   SMALL TABLET

   ========================================================= */



@media (max-width: 850px) {



    .portal-header-inner {

        padding: 24px 0;

        min-height: auto;



        flex-direction: column;

        align-items: flex-start;

    }



    .portal-heading {

        padding-left: 0;

        border-left: 0;

    }



    .grid-3,

    .grid-tools {

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

    }



    .sidebar {

        grid-template-columns: 1fr;

    }



}





/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width: 620px) {



    .portal-header-inner,

    .page-shell,

    .portal-footer {

        width: min(100% - 20px, 1460px);

    }



    .brand-logo {

        width: 70px;

        height: 70px;

    }



    .brand-copy h1 {

        font-size: 20px;

    }



    .portal-heading h2 {

        font-size: 22px;

    }



    .grid-3,

    .grid-2,

    .grid-tools {

        grid-template-columns: 1fr;

    }



    .portal-card {

        height: 180px;

    }



}