/* ==========================================================
   KOKO Enterprise
   Premium Minimal Hero
   Version: 2.3.0
   ========================================================== */

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/

.hero{
    position:relative;

    display:flex;
    align-items:center;

    min-height:100vh;
    padding:170px 0 100px;

    overflow:hidden;

    color:#ffffff;
    background:#0d0d0d;
}

/* Fine red arc in the upper-right corner. */
.hero::before{
    position:absolute;
    top:-390px;
    right:-390px;

    width:760px;
    height:760px;

    content:"";

    border:1px solid rgba(215,25,32,.55);
    border-radius:50%;

    pointer-events:none;
}

/* Subtle red atmosphere in the lower-left corner. */
.hero::after{
    position:absolute;
    bottom:-430px;
    left:-420px;

    width:720px;
    height:720px;

    content:"";

    background:
        radial-gradient(
            circle,
            rgba(215,25,32,.15) 0%,
            rgba(215,25,32,.055) 34%,
            rgba(215,25,32,0) 70%
        );

    pointer-events:none;
}

/*--------------------------------------------------------------
# Inner Layout
--------------------------------------------------------------*/

.hero-inner{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;

    width:100%;
    min-height:calc(100vh - 270px);
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/

.hero-content{
    width:100%;
    max-width:780px;
}

/*--------------------------------------------------------------
# Kicker
--------------------------------------------------------------*/

.hero-kicker{
    display:flex;
    align-items:center;
    gap:1rem;

    margin:0 0 2.25rem;

    color:#ed1c24;

    font-size:.76rem;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.31em;
    text-transform:uppercase;
}

.hero-kicker-line{
    display:block;

    width:48px;
    height:1px;

    background:#ed1c24;
}

/*--------------------------------------------------------------
# Title
--------------------------------------------------------------*/

.hero-title{
    max-width:760px;
    margin:0;

    color:#ffffff;

    font-family:var(--font-heading);
    font-size:clamp(4.5rem,7.4vw,7.5rem);
    font-weight:500;
    line-height:.89;
    letter-spacing:-.046em;

    text-wrap:balance;
}

/*--------------------------------------------------------------
# Description
--------------------------------------------------------------*/

.hero-subtitle{
    max-width:620px;
    margin:2.75rem 0 0;

    color:rgba(255,255,255,.7);

    font-size:1.15rem;
    line-height:1.85;
}

/*--------------------------------------------------------------
# Actions
--------------------------------------------------------------*/

.hero-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:2.75rem;

    margin-top:3rem;
}

/*--------------------------------------------------------------
# Primary Action
--------------------------------------------------------------*/

.hero-primary-action,
.hero-primary-action:link,
.hero-primary-action:visited{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;

    min-width:240px;
    min-height:60px;
    padding:1rem 1.5rem;

    color:#ffffff;
    background:#df1b23;

    border:1px solid #df1b23;
    border-radius:0;

    font-family:var(--font-body);
    font-size:.82rem;
    font-weight:700;
    line-height:1;
    letter-spacing:.11em;
    text-decoration:none;
    text-transform:uppercase;

    box-shadow:
        0 18px 40px rgba(215,25,32,.18);

    transition:
        background-color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.hero-primary-action::before,
.hero-primary-action::after{
    display:none;
    content:none;
}

.hero-primary-action:hover{
    color:#ffffff;
    background:#bd151c;
    border-color:#bd151c;

    transform:translateY(-3px);

    box-shadow:
        0 24px 48px rgba(215,25,32,.26);
}

/*--------------------------------------------------------------
# Secondary Action
--------------------------------------------------------------*/

.hero-secondary-action,
.hero-secondary-action:link,
.hero-secondary-action:visited{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;

    min-height:52px;
    padding:.25rem 0;

    color:#ffffff;

    font-family:var(--font-body);
    font-size:.82rem;
    font-weight:700;
    line-height:1;
    letter-spacing:.11em;
    text-decoration:none;
    text-transform:uppercase;

    transition:color .25s ease;
}

.hero-secondary-action::after{
    position:absolute;
    right:0;
    bottom:0;
    left:0;

    height:1px;

    content:"";

    background:#d71920;

    transform:scaleX(1);
    transform-origin:left;

    transition:
        background-color .25s ease,
        transform .25s ease;
}

.hero-secondary-action:hover{
    color:#ed1c24;
}

.hero-secondary-action:hover::after{
    transform:scaleX(.72);
}

/*--------------------------------------------------------------
# Arrow
--------------------------------------------------------------*/

.hero-action-arrow{
    color:#ed1c24;

    font-size:1.15rem;

    transition:transform .25s ease;
}

.hero-primary-action .hero-action-arrow{
    color:#ffffff;
}

.hero-primary-action:hover .hero-action-arrow,
.hero-secondary-action:hover .hero-action-arrow{
    transform:translateX(5px);
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

.hero a:focus-visible{
    outline:2px solid #ffffff;
    outline-offset:5px;
}

/*--------------------------------------------------------------
# Large Desktop
--------------------------------------------------------------*/

@media (min-width:1500px){

    .hero-content{
        max-width:840px;
    }

    .hero-title{
        max-width:820px;
    }

}

/*--------------------------------------------------------------
# Laptop
--------------------------------------------------------------*/

@media (max-width:1200px){

    .hero{
        min-height:900px;
        padding:150px 0 90px;
    }

    .hero-inner{
        min-height:660px;
    }

    .hero-title{
        font-size:clamp(4rem,7vw,6.2rem);
    }

}

/*--------------------------------------------------------------
# Tablet
--------------------------------------------------------------*/

@media (max-width:992px){

    .hero{
        min-height:auto;
        padding:140px 0 90px;
    }

    .hero-inner{
        min-height:680px;
    }

    .hero-content{
        max-width:760px;
    }

    .hero-title{
        font-size:clamp(3.7rem,9vw,5.6rem);
    }

}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media (max-width:768px){

    .hero{
        padding:120px 0 75px;
    }

    .hero-inner{
        min-height:auto;
    }

    .hero-kicker{
        margin-bottom:1.75rem;
    }

    .hero-title{
        font-size:clamp(3.1rem,12vw,4.7rem);
        line-height:.92;
    }

    .hero-subtitle{
        margin-top:2rem;

        font-size:1rem;
        line-height:1.8;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
        gap:1.5rem;

        margin-top:2.5rem;
    }

    .hero-primary-action{
        width:100%;
    }

    .hero-secondary-action{
        width:100%;
    }

}

/*--------------------------------------------------------------
# Small Mobile
--------------------------------------------------------------*/

@media (max-width:576px){

    .hero{
        padding:105px 0 65px;
    }

    .hero::before{
        top:-300px;
        right:-350px;

        width:580px;
        height:580px;
    }

    .hero::after{
        bottom:-370px;
        left:-390px;

        width:620px;
        height:620px;
    }

    .hero-kicker{
        letter-spacing:.22em;
    }

    .hero-kicker-line{
        width:32px;
    }

    .hero-title{
        font-size:clamp(2.85rem,13vw,4rem);
    }

}
/* ==========================================================
   KOKO Hero — Final Launch Typography
   ========================================================== */

@media (min-width:1200px){

    .hero-content{
        width:100%;
        max-width:1180px;
    }

    .hero-title{
        max-width:1100px;

        font-size:clamp(6.5rem,8vw,8rem);
        line-height:.92;
        letter-spacing:-.055em;
    }

    .hero-description{
        max-width:650px;

        margin-top:2rem;

        font-size:1.2rem;
        line-height:1.75;
    }

    .hero-actions{
        margin-top:2.75rem;
    }

}

/* Large desktop */

@media (min-width:1500px){

    .hero-content{
        max-width:1280px;
    }

    .hero-title{
        max-width:1200px;

        font-size:8.5rem;
    }

}

/* Tablet */

@media (max-width:1199px){

    .hero-title{
        max-width:900px;

        font-size:clamp(4.75rem,8vw,6.5rem);
        line-height:.95;
        letter-spacing:-.05em;
    }

}

/* Mobile */

@media (max-width:768px){

    .hero-title{
        max-width:100%;

        font-size:clamp(3.2rem,13vw,5rem);
        line-height:.98;
        letter-spacing:-.045em;
    }

    .hero-description{
        max-width:540px;

        margin-top:1.5rem;

        font-size:1.05rem;
        line-height:1.7;
    }

    .hero-actions{
        margin-top:2rem;
    }

}

/* Small mobile */

@media (max-width:480px){

    .hero-title{
        font-size:clamp(2.85rem,13vw,4rem);
        line-height:1;
    }

}