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

    .hero {
        --hero-floor: 240px;

        position: relative;
        padding-top: calc(var(--header-height) + var(--padding-large));
        padding-bottom: var(--padding-large);
    }

    .hero-height-auto{
        --hero-floor: 0;
    }

    /* Tinted band ends above the floor so the stage straddles the fold */
    .hero-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: var(--hero-floor);
        /*background:
            radial-gradient(75% 55% at 38% 92%, var(--primary-color-15), transparent 70%),
            radial-gradient(55% 45% at 68% 88%, var(--accent-color-15), transparent 72%),
            linear-gradient(180deg, #ffffff 0%, var(--surface-color) 100%);*/
    }

    .hero-backdrop::after {
        content: '';
        position: absolute;
        inset: 0;

        background-image: radial-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1px);
        background-size: 22px 22px;

        -webkit-mask-image: radial-gradient(60% 70% at 75% 45%, #000 10%, transparent 75%);
        mask-image: radial-gradient(60% 70% at 75% 45%, #000 10%, transparent 75%);
    }

    

    


    .hero-content {
        position: relative;
    }


    /*===================================================
    // INTRO
    /==================================================*/

    .hero-intro {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 860px;
        margin: 0 auto;
        text-align: center;
    }

    .hero-overline {
        display: inline-flex;
        align-items: center;
        gap: var(--gap-xsmall);
        padding: var(--padding-xsmall) var(--padding-small);
        border-radius: 999px;
        border: 1px solid var(--hairline-color);
        background: rgba(255, 255, 255, 0.75);
        font-size: 11px;
        color: var(--ink-color);
    }

    .hero-overline .fa {
        font-size: 12px;
        color: var(--primary-color);
    }

    .hero-title {
        margin-top: var(--margin-medium);
        font-size: clamp(46px, 7.2vw, 60px);
        line-height: 0.98;
        letter-spacing: -0.048em;
    }

    .hero-title-highlight {
        display: block;
        padding-bottom: 0.08em;
        /*background: linear-gradient(100deg, var(--primary-dark-color) 0%, var(--primary-color) 40%, var(--secondary-color) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;*/
    }

    .hero-text {
        max-width: 560px;
        margin-top: var(--margin-small);
        padding-bottom: 0;
        font-size: clamp(17px, 1.5vw, 20px);
        line-height: 1.55;
        letter-spacing: -0.01em;
    }

    .hero-cta {
        margin-top: var(--margin-medium);
        padding: var(--padding-xsmall) var(--padding-small);
        background: var(--primary-color);
    }

    .hero-cta:hover {
        background: var(--primary-light-color);
    }


    /*=== Entrance ===*/

    @keyframes heroRise {
        from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
        to { opacity: 1; transform: none; filter: none; }
    }

    @keyframes heroFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .hero-intro > * {
        animation: heroRise 1100ms var(--ease-out) both;
    }

    .hero-intro > :nth-child(2) { animation-delay: 90ms; }
    .hero-intro > :nth-child(3) { animation-delay: 180ms; }
    .hero-intro > :nth-child(4) { animation-delay: 270ms; }


    /*===================================================
    // PHONE
    /==================================================*/

    .hero-phone {
        position: relative;
        width: 300px;
        height: 624px;
    }

    .phone {
        position: relative;
        height: 100%;
        padding: 10px;
        border-radius: 54px;
        background:#00091a;
        box-shadow:
            inset 0 0 0 1.5px rgba(255, 255, 255, 0.9),
            0 0 0 0px rgba(0, 13, 35, 0.3),
            0 60px 110px -40px rgba(0, 13, 35, 0.15),
            0 30px 60px -30px rgba(0, 13, 35, 0.05);
    }

    .phone-screen {
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 44px;
        background: #fff;
        z-index: 1;
    }


    .phone.lock-screen:after{
        content: '';
        position: absolute;
        inset: 0;
        background:var(--surface-color) url(../images/wave.png) no-repeat bottom center;
        background-size: 260%;
        border-radius: 44px;
        margin:10px;
    }

    .phone.lock-screen .phone-screen{
        background:none
    }


    

    .phone.unlock-screen:after{
        opacity: 0;
    }

    .phone.unlock-screen .phone-screen{
        background:var(--surface-color) ;
    }

    .phone-island {
        position: absolute;
        top: 11px;
        left: 50%;
        z-index: 3;
        width: 90px;
        height: 26px;
        margin-left: -45px;
        border-radius: 20px;
        background: #05070b;
    }

    .phone-status {
        flex: 0 0 auto;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 26px 0 32px;
        background: #fff;
        font-size: 13px;
        font-weight: 600;
        color: #05070b;
    }

    .phone-status-icons {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .phone-signal {
        display: flex;
        align-items: flex-end;
        gap: 1.5px;
        height: 10px;
    }

    .phone-signal i {
        width: 3px;
        border-radius: 1px;
        background: #05070b;
    }

    .phone-signal i:nth-child(1) { height: 4px; }
    .phone-signal i:nth-child(2) { height: 6px; }
    .phone-signal i:nth-child(3) { height: 8px; }
    .phone-signal i:nth-child(4) { height: 10px; }

    .phone-battery {
        position: relative;
        width: 22px;
        height: 11px;
        padding: 1.5px;
        border-radius: 3.5px;
        border: 1px solid rgba(5, 7, 11, 0.4);
    }

    .phone-battery::before {
        content: '';
        display: block;
        width: 80%;
        height: 100%;
        border-radius: 2px;
        background: #05070b;
    }

    .phone-home {
        flex: 0 0 auto;
        position: relative;
        height: 24px;
        background: #fff;
    }

    .phone-home::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 8px;
        width: 108px;
        height: 4px;
        margin-left: -54px;
        border-radius: 4px;
        background: #05070b;
    }


    /*=== App Bar ===*/

    .phone-bar {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: 26px 1fr 26px;
        align-items: center;
        padding: var(--padding-xxsmall) var(--padding-small) var(--padding-xsmall);
        background: #fff;
    }

    .phone-bar img {
        display: block;
        width: 24px;
        height: 24px;
    }

    .phone-bar-title {
        text-align: center;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--dark-dark-color);
    }


    /*=== Goal Rings ===*/

    .phone-goals {
        width: 26px;
        height: 26px;
        transform: rotate(-90deg);
    }

    .phone-goal-track,
    .phone-goal {
        fill: none;
        stroke-width: 3.5;
    }

    .phone-goal-track {
        stroke: #e9edf2;
    }

    .phone-goal {
        stroke: var(--primary-color);
        stroke-linecap: round;
        stroke-dasharray: 100;
    }

    .phone-goal-rewards {
        stroke: var(--accent-color);
    }

    .phone-marker {
        justify-self: end;
        font-size: 18px;
        color: var(--dark-dark-color);
    }


    /*===================================================
    // PATHWAY
    /==================================================*/

    /* One pathway look for every hero phone, as in the app */
    .pathway-head {
        display: flex;
        align-items: center;
        gap: var(--gap-small);
        padding: var(--padding-small);
    }

    .pathway-cover {
        flex: 0 0 56px;
        display: block;
        width: 56px;
        height: 56px;
        object-fit: cover;
        border-radius: 16px;
    }

    .pathway-copy {
        display: flex;
        flex-direction: column;
        gap: var(--gap-xxsmall);
    }

    .pathway-title {
        font-size: 18px;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--dark-dark-color);
    }

    .pathway-status {
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ink-soft-color);
    }

    .pathway-steps {
        list-style: none;
        padding: 0 var(--padding-small);
    }

    .pathway-step {
        display: grid;
        grid-template-columns: 40px 1fr 18px;
        align-items: center;
        gap: var(--gap-small);
        padding: var(--padding-small) 0;
        border-top: 1px solid var(--hairline-color);
    }

    .pathway-step-icon {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--primary-color);
        color: #fff;
        outline: 1.5px solid var(--primary-color-15);
        outline-offset: 3px;
        transition: background-color 400ms ease, color 400ms ease, outline-color 600ms ease;
    }

    .pathway-step-icon .fa {
        grid-area: 1 / 1;
        font-size: 16px;
    }

    .pathway-step.is-complete .pathway-step-icon {
        outline-color: var(--primary-color);
    }

    .pathway-step.is-locked .pathway-step-icon {
        background: #e6ebf1;
        color: var(--ink-soft-color);
        outline-color: transparent;
    }

    .pathway-step-copy {
        min-width: 0;
    }

    .pathway-step-title {
        display: block;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--dark-dark-color);
    }

    .pathway-step-text {
        display: block;
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.35;
        color: var(--ink-muted-color);
    }

    .pathway-step-status {
        position: relative;
        width: 18px;
        height: 18px;
        color: var(--dark-light-color);
    }

    .pathway-step-status > * {
        position: absolute;
        inset: 0;
        font-size: 16px;
        transition: opacity 400ms ease, transform 500ms var(--ease-out);
    }

    .pathway-step-status .fa-circle-check {
        color: var(--primary-color);
    }


    /*===================================================
    // RESPONSIVE
    /==================================================*/

    @media screen and (max-width: 1180px) {

        .hero-phone {
            width: 280px;
            height: 590px;
        }

    }

    @media (prefers-reduced-motion: reduce) {

        .hero *,
        .hero *::before,
        .hero *::after {
            animation: none !important;
            transition: none !important;
        }

    }