:root{
    --ogh-orange:#ff6500;
    --ogh-orange2:#ff7d00;
    --ogh-red:#ef2636;
    --ogh-navy:#121d34;
    --ogh-text:#20293a;
    --ogh-muted:#697486;
    --ogh-line:#e0e5eb;
    --ogh-soft:#f8f9fb;
    --ogh-green:#1aa951;
    --ogh-blue:#2879ef;
    --ogh-purple:#7846db;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

.ogh{
    background:#fff;
    color:var(--ogh-text);
    overflow:hidden;
}

.ogh a{
    color:inherit;
}


/* NAV */

.ogh-nav{
    width:min(1440px,calc(100% - 40px));
    min-height:78px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:30px;

    border-bottom:1px solid #edf0f4;
}

.ogh-brand{
    display:flex;
    align-items:center;
    gap:10px;
    width:max-content;

    text-decoration:none;
}

.ogh-brand-icon{
    position:relative;

    display:flex;
    width:42px;
    height:42px;

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

    border:5px solid var(--ogh-orange);
    border-radius:50%;

    background:#fff;
}

.ogh-brand-icon:before,
.ogh-brand-icon:after{
    content:"";

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;
}

.ogh-brand-icon:before{
    left:-11px;
    top:8px;
    background:#16a454;
}

.ogh-brand-icon:after{
    right:-10px;
    top:3px;
    background:#ff7100;
}

.ogh-brand-bars{
    display:flex;
    gap:3px;
    align-items:flex-end;
}

.ogh-brand-bars i{
    display:block;
    width:4px;

    border-radius:4px;
}

.ogh-brand-bars i:nth-child(1){
    height:11px;
    background:#19a34e;
}

.ogh-brand-bars i:nth-child(2){
    height:17px;
    background:#ff7900;
}

.ogh-brand-bars i:nth-child(3){
    height:22px;
    background:#ed2435;
}

.ogh-brand-name{
    color:#ff6510;

    font-size:28px;
    font-weight:900;
    letter-spacing:-.04em;
}

.ogh-brand-name b{
    color:#0d3265;
    font-size:17px;
    letter-spacing:-.02em;
}

.ogh-nav-links{
    display:flex;
    align-items:center;
    gap:34px;
}

.ogh-nav-links a,
.ogh-signin{
    text-decoration:none;

    color:var(--ogh-navy);

    font-size:14px;
    font-weight:750;
}

.ogh-nav-actions{
    justify-self:end;

    display:flex;
    align-items:center;
    gap:18px;
}

.ogh-nav-cta{
    display:inline-flex;
    min-height:46px;

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

    padding:10px 20px;

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            var(--ogh-orange),
            #ff4e14
        );

    color:#fff !important;

    text-decoration:none;

    font-size:14px;
    font-weight:850;

    box-shadow:
        0 7px 20px rgba(255,101,0,.16);
}


/* HERO */

.ogh-hero{
    width:min(1440px,calc(100% - 40px));
    margin:auto;
    padding:68px 0 76px;

    display:grid;
    grid-template-columns:minmax(430px,.82fr) minmax(620px,1.18fr);
    gap:56px;
    align-items:center;
}

.ogh-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-bottom:23px;
    padding:7px 12px;

    border:1px solid #ffd0ba;
    border-radius:999px;

    background:#fffaf7;
    color:#e95015;

    font-size:12px;
    font-weight:850;
}

.ogh-kicker span{
    width:7px;
    height:7px;

    border-radius:50%;
    background:var(--ogh-orange);
}

.ogh-hero h1{
    max-width:650px;

    margin:0 0 22px;

    color:var(--ogh-navy);

    font-size:59px;
    line-height:1.03;
    letter-spacing:-.047em;
    font-weight:900;
}

.ogh-hero h1 strong{
    color:var(--ogh-orange);
}

.ogh-hero-copy > p{
    max-width:615px;
    margin:0;

    color:var(--ogh-muted);

    font-size:19px;
    line-height:1.58;
}

.ogh-hero-actions{
    display:flex;
    gap:13px;
    flex-wrap:wrap;

    margin-top:30px;
}

.ogh-primary,
.ogh-secondary{
    display:inline-flex;
    min-height:57px;

    align-items:center;
    justify-content:center;
    gap:11px;

    padding:13px 23px;

    border-radius:9px;

    text-decoration:none;

    font-size:16px;
    font-weight:850;
}

.ogh-primary{
    border:1px solid var(--ogh-orange);

    background:
        linear-gradient(
            135deg,
            var(--ogh-orange),
            #ff4f14
        );

    color:#fff !important;

    box-shadow:
        0 10px 27px rgba(255,101,0,.18);
}

.ogh-secondary{
    border:1px solid #d3d9e1;
    background:#fff;
    color:var(--ogh-navy);
}

.ogh-trust-row{
    display:flex;
    flex-wrap:wrap;
    gap:23px;

    margin-top:25px;

    color:#5f6979;

    font-size:13px;
    font-weight:650;
}

.ogh-trust-row span{
    display:flex;
    align-items:center;
    gap:7px;
}

.ogh-trust-row b{
    display:flex;
    width:20px;
    height:20px;

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

    border-radius:50%;

    background:#e9f7ed;
    color:#1ca34b;

    font-size:11px;
}


/* PRODUCT */

.ogh-product{
    position:relative;
    min-height:555px;
}

.ogh-dashboard{
    position:absolute;
    inset:0 72px 52px 0;

    display:grid;
    grid-template-columns:145px 1fr;

    overflow:hidden;

    border:1px solid #dce1e8;
    border-radius:15px;

    background:#fff;

    box-shadow:
        0 22px 55px rgba(22,32,48,.11);
}

.ogh-side{
    padding:19px 13px;

    background:
        linear-gradient(
            180deg,
            #101b27,
            #182531
        );

    color:#fff;
}

.ogh-mini-brand{
    display:flex;
    align-items:center;
    gap:7px;

    margin-bottom:25px;

    font-size:12px;
    font-weight:850;
}

.ogh-mini-brand span{
    display:flex;
    width:23px;
    height:23px;

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

    border-radius:50%;

    background:var(--ogh-orange);

    font-size:9px;
}

.ogh-restaurant{
    margin-bottom:20px;

    font-size:10px;
    font-weight:800;
}

.ogh-restaurant small{
    display:block;
    margin-top:3px;

    opacity:.55;
}

.ogh-menu{
    margin:4px 0;
    padding:9px 10px;

    border-radius:5px;

    font-size:10px;
    opacity:.72;
}

.ogh-menu.active{
    background:#22456e;
    opacity:1;
}

.ogh-dash-main{
    padding:22px;
    background:#fbfcfd;
}

.ogh-dash-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    margin-bottom:16px;
}

.ogh-dash-head h3{
    margin:0;
    font-size:20px;
}

.ogh-dash-head small{
    color:#8993a1;
}

.ogh-dash-head > span{
    padding:7px 11px;

    border:1px solid #dfe3e9;
    border-radius:7px;

    background:#fff;

    font-size:10px;
}

.ogh-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;

    margin-bottom:14px;
}

.ogh-stats > div{
    padding:13px;

    border:1px solid #e1e5ea;
    border-radius:8px;

    background:#fff;
}

.ogh-stats small{
    display:block;
    margin-bottom:6px;

    color:#7f8997;
    font-size:9px;
}

.ogh-stats strong{
    font-size:22px;
}

.ogh-stats .good{
    color:#17a34c;
}

.ogh-stats .warn{
    color:#ff7d00;
}

.ogh-stats .bad{
    color:#ec2f40;
}

.ogh-dash-body{
    display:grid;
    grid-template-columns:minmax(0,1fr) 185px;
    gap:13px;
}

.ogh-task-table,
.ogh-summary{
    border:1px solid #e1e5ea;
    border-radius:8px;

    background:#fff;
}

.ogh-table-title{
    display:block;
    padding:12px 13px;

    border-bottom:1px solid #edf0f3;

    font-size:11px;
}

.ogh-task-row{
    display:grid;
    grid-template-columns:1.5fr 1fr auto;
    gap:8px;
    align-items:center;

    padding:10px 13px;

    border-bottom:1px solid #f0f2f5;

    font-size:9px;
}

.ogh-task-row:last-child{
    border-bottom:0;
}

.ogh-task-row > span{
    color:#7d8795;
}

.ogh-task-row em{
    padding:4px 7px;

    border-radius:999px;

    font-style:normal;
    font-size:8px;
}

.ogh-task-row .completed{
    background:#e8f6ec;
    color:#138c3e;
}

.ogh-task-row .pending{
    background:#fff2df;
    color:#df7500;
}

.ogh-task-row .overdue{
    background:#ffe9eb;
    color:#d62437;
}

.ogh-summary{
    padding:13px;
}

.ogh-summary > strong{
    font-size:11px;
}

.ogh-ring{
    width:96px;
    height:96px;

    margin:17px auto;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #fff 57%,
            transparent 58%
        ),
        conic-gradient(
            #1eaa52 0 73%,
            #ff9300 73% 91%,
            #ef3340 91% 100%
        );
}

.ogh-ring span{
    font-size:19px;
    font-weight:900;
}

.ogh-ring small{
    font-size:8px;
}

.ogh-summary p{
    margin:7px 0;

    color:#737e8e;

    font-size:9px;
}

.ogh-summary p b{
    display:inline-block;
    width:7px;
    height:7px;

    margin-right:5px;

    border-radius:50%;
}

.ogh-summary .g{
    background:#1eaa52;
}

.ogh-summary .o{
    background:#ff9300;
}

.ogh-summary .r{
    background:#ef3340;
}


/* PHONE */

.ogh-phone{
    position:absolute;
    right:0;
    bottom:0;

    width:180px;
    height:360px;

    padding:25px 11px 14px;

    overflow:hidden;

    border:7px solid #111;
    border-radius:30px;

    background:#fff;

    box-shadow:
        0 18px 44px rgba(0,0,0,.19);
}

.ogh-notch{
    position:absolute;
    top:7px;
    left:50%;

    width:63px;
    height:14px;

    border-radius:20px;
    background:#111;

    transform:translateX(-50%);
}

.ogh-phone-brand{
    margin:2px 0 17px;

    text-align:center;

    color:var(--ogh-orange);

    font-size:9px;
    font-weight:900;
}

.ogh-phone h4{
    margin:0 0 12px;
}

.ogh-phone-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:4px;

    margin-bottom:14px;
}

.ogh-phone-stats b{
    font-size:11px;
}

.ogh-phone-stats small{
    display:block;

    margin-top:2px;

    color:#8c95a1;

    font-size:5px;
    font-weight:500;
}

.ogh-phone-task{
    padding:10px 0;

    border-bottom:1px solid #edf0f3;

    font-size:7px;
}

.ogh-phone-task b{
    float:right;
    color:#18a24a;
}

.ogh-phone-task em{
    float:right;

    color:#e98000;

    font-style:normal;
}


/* FEATURES */

.ogh-features{
    width:min(1440px,calc(100% - 40px));
    margin:auto;

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

    border:1px solid var(--ogh-line);
    border-radius:13px;

    overflow:hidden;
}

.ogh-features article{
    min-height:245px;

    padding:23px 20px;

    border-right:1px solid var(--ogh-line);
}

.ogh-features article:last-child{
    border-right:0;
}

.ogh-fi{
    display:flex;
    width:39px;
    height:39px;

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

    margin-bottom:16px;

    border-radius:9px;

    font-size:18px;
    font-weight:900;
}

.ogh-fi.green{
    background:#e8f7ed;
    color:#1ba44b;
}

.ogh-fi.blue{
    background:#eaf1ff;
    color:#2878ed;
}

.ogh-fi.orange{
    background:#fff1df;
    color:#ef8210;
}

.ogh-fi.red{
    background:#ffebed;
    color:#ed3142;
}

.ogh-fi.purple{
    background:#f1eafd;
    color:#7846db;
}

.ogh-fi.gold{
    background:#fff4df;
    color:#ee990b;
}

.ogh-features h3{
    margin:0 0 11px;

    color:var(--ogh-navy);

    font-size:15px;
}

.ogh-features p{
    min-height:95px;
    margin:0;

    color:#6d7788;

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

.ogh-features small{
    display:block;
    margin-top:14px;

    color:var(--ogh-orange);

    font-size:11px;
    font-weight:800;
}


/* VALUES */

.ogh-values{
    width:min(1320px,calc(100% - 40px));
    margin:58px auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:36px;
}

.ogh-values article{
    display:flex;
    gap:14px;
}

.ogh-values article > span{
    flex:0 0 45px;

    display:flex;
    width:45px;
    height:45px;

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

    border-radius:50%;

    background:#fff2e7;
    color:var(--ogh-orange);

    font-size:20px;
    font-weight:900;
}

.ogh-values h3{
    margin:1px 0 6px;

    color:var(--ogh-navy);

    font-size:14px;
}

.ogh-values p{
    margin:0;

    color:#747e8d;

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


/* HOW */

.ogh-how{
    width:min(1280px,calc(100% - 40px));
    margin:72px auto;

    padding:53px;

    border-radius:17px;

    background:#f8f9fb;
}

.ogh-how header{
    max-width:640px;
    margin-bottom:32px;
}

.ogh-how header small{
    color:var(--ogh-orange);

    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.ogh-how h2{
    margin:8px 0 0;

    color:var(--ogh-navy);

    font-size:35px;
    letter-spacing:-.02em;
}

.ogh-how-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:19px;
}

.ogh-how-grid article{
    padding:24px;

    border:1px solid #e0e5ea;
    border-radius:12px;

    background:#fff;
}

.ogh-how-grid b{
    color:var(--ogh-orange);
    font-size:12px;
}

.ogh-how-grid h3{
    margin:14px 0 8px;

    color:var(--ogh-navy);
}

.ogh-how-grid p{
    margin:0;

    color:#6f7989;

    line-height:1.55;
}


/* FINAL CTA */

.ogh-final{
    width:min(1320px,calc(100% - 40px));
    margin:0 auto 42px;

    padding:32px 40px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;

    border:1px solid #ffb081;
    border-radius:14px;

    background:
        linear-gradient(
            90deg,
            #fff9f5,
            #fff
        );
}

.ogh-final small{
    color:var(--ogh-orange);
    font-weight:900;
}

.ogh-final h2{
    margin:5px 0 5px;

    color:var(--ogh-navy);
}

.ogh-final p{
    margin:0;
    color:#737d8d;
}

.ogh-final-actions{
    flex-shrink:0;

    display:flex;
    gap:11px;
}


/* FOOTER */

.ogh-footer{
    width:min(1320px,calc(100% - 40px));
    margin:auto;

    padding:34px 0 52px;

    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:42px;

    border-top:1px solid #e6eaef;

    color:#697486;
    font-size:12px;
}

.ogh-footer > div{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.ogh-footer strong{
    color:var(--ogh-navy);
}

.ogh-footer a{
    text-decoration:none;
}

.ogh-footer-brand p{
    margin:3px 0 0;
}


/* TABLET */

@media(max-width:1100px){

    .ogh-nav{
        grid-template-columns:1fr auto;
    }

    .ogh-nav-links{
        display:none;
    }

    .ogh-hero{
        grid-template-columns:1fr;
    }

    .ogh-hero-copy{
        max-width:800px;
    }

    .ogh-product{
        min-height:570px;
    }

    .ogh-features{
        grid-template-columns:repeat(3,1fr);
    }

    .ogh-features article{
        border-bottom:1px solid var(--ogh-line);
    }

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


/* MOBILE */

@media(max-width:700px){

    .ogh-nav{
        width:calc(100% - 28px);
        min-height:68px;
    }

    .ogh-brand-name{
        font-size:22px;
    }

    .ogh-brand-name b{
        font-size:12px;
    }

    .ogh-brand-icon{
        width:35px;
        height:35px;
    }

    .ogh-signin{
        display:none;
    }

    .ogh-nav-cta{
        min-height:40px;
        padding:8px 11px;

        font-size:11px;
    }

    .ogh-hero{
        width:calc(100% - 28px);
        padding:35px 0 46px;
        gap:34px;
    }

    .ogh-hero h1{
        font-size:42px;
    }

    .ogh-hero-copy > p{
        font-size:17px;
    }

    .ogh-hero-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .ogh-primary,
    .ogh-secondary{
        width:100%;
    }

    .ogh-trust-row{
        display:grid;
        gap:9px;
    }

    .ogh-product{
        min-height:360px;
    }

    .ogh-dashboard{
        inset:0;

        min-height:340px;

        grid-template-columns:72px 1fr;
    }

    .ogh-side{
        padding:11px 6px;
    }

    .ogh-mini-brand,
    .ogh-restaurant,
    .ogh-menu{
        font-size:6px;
    }

    .ogh-dash-main{
        padding:12px 9px;
    }

    .ogh-dash-head h3{
        font-size:14px;
    }

    .ogh-stats{
        gap:4px;
    }

    .ogh-stats > div{
        padding:7px 4px;
    }

    .ogh-stats small{
        font-size:5px;
    }

    .ogh-stats strong{
        font-size:13px;
    }

    .ogh-dash-body{
        display:block;
    }

    .ogh-summary{
        display:none;
    }

    .ogh-task-row{
        grid-template-columns:1fr auto;

        padding:7px;

        font-size:6px;
    }

    .ogh-task-row > span{
        display:none;
    }

    .ogh-task-row em{
        font-size:5px;
    }

    .ogh-phone{
        display:none;
    }

    .ogh-features{
        width:calc(100% - 28px);
        grid-template-columns:1fr;
    }

    .ogh-features article{
        min-height:auto;

        border-right:0;
        border-bottom:1px solid var(--ogh-line);
    }

    .ogh-features p{
        min-height:0;
    }

    .ogh-values{
        width:calc(100% - 28px);

        margin:42px auto;

        grid-template-columns:1fr;
    }

    .ogh-how{
        width:calc(100% - 28px);

        margin:48px auto;
        padding:29px 19px;
    }

    .ogh-how h2{
        font-size:28px;
    }

    .ogh-how-grid{
        grid-template-columns:1fr;
    }

    .ogh-final{
        width:calc(100% - 28px);

        display:block;

        padding:24px 19px;
    }

    .ogh-final-actions{
        display:grid;

        margin-top:20px;
    }

    .ogh-footer{
        width:calc(100% - 28px);

        grid-template-columns:1fr 1fr;
    }
}


/* =====================================================
   OGEGOS BILINGUAL HOMEPAGE
   ===================================================== */

.ogh-language{
    display:flex;
    align-items:center;
    gap:6px;

    padding:5px 8px;

    border:1px solid #e2e6eb;
    border-radius:7px;

    background:#fff;

    font-size:12px;
    font-weight:750;
}

.ogh-language a{
    text-decoration:none;
    color:#8a93a1;
}

.ogh-language a.active{
    color:var(--ogh-orange);
    font-weight:900;
}

.ogh-language span{
    color:#c3c8cf;
}


.ogh-section-heading{
    width:min(920px,calc(100% - 40px));
    margin:12px auto 38px;

    text-align:center;
}

.ogh-section-heading h2{
    margin:0 0 12px;

    color:var(--ogh-navy);

    font-size:36px;
    line-height:1.15;
    letter-spacing:-.025em;
}

.ogh-section-heading p{
    max-width:760px;
    margin:0 auto;

    color:#6d7888;

    font-size:16px;
    line-height:1.65;
}


.ogh-social{
    width:min(1280px,calc(100% - 40px));
    margin:75px auto;

    padding:54px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #fff9f5,
            #ffffff 56%
        );

    border:1px solid #ffe0cf;
}

.ogh-social > header{
    max-width:800px;
    margin-bottom:35px;
}

.ogh-social > header small{
    color:var(--ogh-orange);

    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.ogh-social > header h2{
    margin:8px 0 12px;

    color:var(--ogh-navy);

    font-size:38px;
    line-height:1.15;
    letter-spacing:-.03em;
}

.ogh-social > header p{
    margin:0;

    color:#6d7889;

    font-size:16px;
    line-height:1.65;
}

.ogh-social-steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.ogh-social-steps article{
    padding:25px;

    border:1px solid #e8e9ec;
    border-radius:13px;

    background:#fff;
}

.ogh-social-steps b{
    color:var(--ogh-orange);

    font-size:12px;
}

.ogh-social-steps h3{
    margin:15px 0 9px;

    color:var(--ogh-navy);

    font-size:18px;
}

.ogh-social-steps p{
    margin:0;

    color:#6f7989;

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

.ogh-control{
    margin-top:25px;
    padding-top:22px;

    border-top:1px solid #f0d6c8;

    color:var(--ogh-orange);

    text-align:center;

    font-size:20px;
    font-weight:900;
}


.ogh-how-five{
    grid-template-columns:repeat(5,1fr);
}

.ogh-how-five article{
    min-height:205px;
}


.ogh-philosophy{
    width:min(1000px,calc(100% - 40px));
    margin:0 auto 65px;

    text-align:center;
}

.ogh-philosophy p{
    margin:0;

    color:var(--ogh-navy);

    font-size:27px;
    line-height:1.45;
    font-weight:850;
    letter-spacing:-.02em;
}


/* Chinese typography */

html:has(.ogh) .ogh{
    word-break:normal;
}

.ogh h1,
.ogh h2,
.ogh h3,
.ogh p{
    text-wrap:pretty;
}


@media(max-width:1250px){

    .ogh-how-five{
        grid-template-columns:repeat(3,1fr);
    }
}


@media(max-width:1100px){

    .ogh-language{
        margin-left:auto;
    }
}


@media(max-width:700px){

    .ogh-nav-actions{
        gap:7px;
    }

    .ogh-language{
        padding:4px 6px;
        gap:4px;

        font-size:10px;
    }

    .ogh-nav-cta{
        display:none;
    }

    .ogh-section-heading{
        width:calc(100% - 28px);

        margin-top:4px;
        margin-bottom:28px;
    }

    .ogh-section-heading h2{
        font-size:29px;
    }

    .ogh-section-heading p{
        font-size:15px;
    }

    .ogh-social{
        width:calc(100% - 28px);

        margin:48px auto;
        padding:29px 19px;
    }

    .ogh-social > header h2{
        font-size:29px;
    }

    .ogh-social-steps{
        grid-template-columns:1fr;
    }

    .ogh-control{
        font-size:18px;
    }

    .ogh-how-five{
        grid-template-columns:1fr;
    }

    .ogh-how-five article{
        min-height:0;
    }

    .ogh-philosophy{
        width:calc(100% - 28px);

        margin-bottom:45px;
    }

    .ogh-philosophy p{
        font-size:22px;
    }
}