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

.di_home_hero {
    position: relative;

    width: 100%;
    min-height: 100svh;

    aspect-ratio: 1920 / 1080; /*1536 / 1024*/

    overflow: hidden;

    background: #020509;

    isolation: isolate;

    border-top: 2px solid transparent;
    border-image: linear-gradient(to right, #8e5f14, #f6e9bb, #72531f, #a07a31, #9f6b11, #bea86c, #8b580e) 1;
    border-left: none;
    border-right: none;
    border-bottom: none;    
}


/* =========================================================
   HTML HERO CONTENT
   ========================================================= */

.di_home_hero_content {
    position: absolute;

    left: 2%;
    top: 2%;

    width: 30.5%;

    z-index: 10;

    margin: 0;
    padding: 0;

    pointer-events: none;
}

.di_home_hero_kicker {
    margin: 0 0 15px;
    color: #f9d777;
    font-size: clamp(58px, 8vw, 110px);
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: -0.055em;
    /*text-shadow: 0 5px 18px rgba(0, 0, 0, 0.45);*/
}

.gradient-header {
    background: linear-gradient(to bottom, #faf7dc 0%, #eebf64 100%);
    background-clip: border-box;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: #eebf64;
}

.di_home_hero_content h1 {
    max-width: 530px;
    margin: 0;
    color: #fff;
    font-size: clamp(1.4rem, 5vw, 2.6rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.055em;
    text-shadow: 0 5px 18px rgba(0, 0, 0, 0.45);
}
.di_home_hero_content h1 span {
    color: #f9d777;
    letter-spacing: 1.8px;
}

.di_home_hero_text {
    max-width: 370px;
    margin: 18px 0 18px;
    color: #fff;
    font-size: 25px;
    font-weight: 900;
    line-height: 1.03;
    text-transform: uppercase;
}

.di_home_hero_subtext {
    max-width: 430px;
    margin: 10px 0 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.28em;
    line-height: 1.9;
    text-transform: uppercase;
}

.di_home_hero_subtext span {
    text-align: center;
}


/* =========================================================
   LAYER 1
   BACKGROUND ARTWORK
   ========================================================= */

.di_home_background {
    position: absolute;

    inset: 0;

    z-index: 1;

    background-image: var(--di-home-background);

    background-repeat: no-repeat;

    /*
     * The supplied background is 1471 × 890.
     *
     * Cover allows it to fill different screen
     * aspect ratios while the Doge layer remains
     * independent.
     */
    background-size: cover;

    background-position: center center;

    pointer-events: none;
}




/* =========================================================
   LAYER 2
   DOGE + WALLET
   ========================================================= */

.di_home_dog_wallet_layer {
    position: absolute;

    left: 50%;
    top: 34.5%;

    z-index: 5;

    /*
     * The original image is 633 × 394.
     *
     * Keeping the image width-based preserves the
     * Doge-to-wallet relationship exactly.
     */
    width: min(64vw, 852px);

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

    pointer-events: none;
}


.di_home_dog_wallet {
    display: block;

    width: 100%;
    height: auto;

    max-width: none;

    user-select: none;

    -webkit-user-drag: none;
}

/* =========================================================
   TILTED TEXT
   "TO THE MOON TOGETHER"
   ========================================================= */

.di_home_tilted_text {
    position: absolute;

    /*
     * Between the Doge and the rocket.
     */
    right: 21%;

    top: 13%;

    z-index: 7;

    width: 180px;

    color: #c1ffe6;

    font-family:
        "Caveat",
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: clamp(25px, 3.5vw, 46px);

    font-weight: 600;

    line-height: 1;

    text-align: center;

    transform:
        translate(-50%, -50%)
        rotate(-15deg);

    transform-origin: center center;

    text-shadow:
        0 0 28px rgba(193, 255, 230, 0.98);

    pointer-events: none;
}

/* =========================================================
   GLOBAL COMMUNITY
   RIGHT SIDE / EARTH
   ========================================================= */

.di_home_global_community {
    position: absolute;

    /*
     * Right side over the Earth.
     */
    right: 1%;

    top: 17%;

    z-index: 7;

    /*width: min(245px, 18vw);*/

    color: #ffffff;

    text-align: center;

    pointer-events: none;
}


.di_home_global_community_title {
    margin: 0 0 12px;

    color: #b6ff3b;

    font-size: clamp(15px, 1.45vw, 25px);

    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.04em;

    text-shadow:
        0 0 10px rgba(182, 255, 59, 0.3);
}


.di_home_global_community_text {
    color: #eceabd;

    font-size: clamp(12px, 1vw, 17px);

    font-weight: 700;

    line-height: 1.85;

    text-transform: uppercase;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.9);
}

/* =========================================================
   ROBINHOOD FEATURES HEADING IMAGE
   ========================================================= */

.di_home_features_heading_row {
    display: flex;

    align-items: center;

    justify-content: flex-start;

    width: 100%;

    gap: 10px;

    margin-bottom: 0;
}

.di_home_features_heading_image {
    flex: 0 0 auto;

    display: flex;

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

    width: 38px;
    height: 38px;
}


.di_home_features_heading_image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================================================
   HEADING
   ========================================================= */

.di_home_features_heading {
    flex: 1 1 auto;

    min-width: 0;

    margin: 0;

    color: #f5c542;

    font-size: clamp(13px, 1.15vw, 19px);

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.9);
}


@media (min-width: 1200px) {

    .di_home_features_heading_image {
        min-height: 42px;

        margin-bottom: 11px;
    }

    .di_home_features_heading_image img {
        height: 42px;
    }
}


@media (max-width: 480px) {

    .di_home_features_heading_row {
        gap: 5px;

        margin-bottom: 6px;
    }

    .di_home_features_heading_image {
        width: 28px;
        height: 28px;
    }

    .di_home_features_heading {
        font-size: 12px;
    }
}


/* =========================================================
   ROBINHOOD FEATURES
   LEFT SIDE
   ========================================================= */

.di_home_robinhood_features {
    position: absolute;

    left: 2.5%;

    top: 55%;

    z-index: 7;

    /*width: min(220px, 18vw);*/

    color: #ffffff;
}


.di_home_features_heading {
    margin: 0 0 16px;

    color: #fff;

    font-size: clamp(13px, 1.15vw, 19px);

    font-weight: 700;

    line-height: 1.05;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.9);
}

.di_home_features_heading span {
    font-size: 11px;
    text-transform: capitalize;
}

.di_home_features_list {
    display: grid;
    grid-template-columns: 2fr 2fr;

    /*flex-direction: column;*/

    gap: 3px 11px;

    padding: 12px;

    background-color: rgba(0,0,0, 0.8);

    border: 1px solid #112915;
}


.di_home_feature {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;
}


.di_home_feature_icon {
    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    display: flex;

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


.di_home_feature_icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.di_home_feature_text {
    min-width: 0;

    color: #ffffff;

    font-size: clamp(9px, 0.9vw, 16px);

    font-weight: 700;

    line-height: 1.15;

    text-transform: uppercase;

    text-shadow:
        0 2px 7px rgba(0, 0, 0, 0.9);
}

/* =========================================================
   LAYER 3
   WALLET HTML
   ========================================================= */

.di_home_wallet {
    position: absolute;

    /*
     * These coordinates refer to the CENTER of the
     * black wallet area inside the Doge image.
     */
    left: 50%;
    top: 47.5%;

    z-index: 10;

    width: min(56vw, 845px);

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

    padding: 13px 18px 12px;

    border: 0;

    background: transparent;

    box-sizing: border-box;
}


/*
 * Wallet title
 */

.di_home_wallet_title {
    margin: 0 0 7px;

    color: #fef9c5;

    font-size: clamp(10px, 2.9vw, 20px);

    font-weight: 700;

    line-height: 1.1;

    text-align: center;

    letter-spacing: 0.035em;

    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.9);
}


/*
 * Address + COPY
 */

.di_home_wallet_input_row {
    display: flex;

    align-items: stretch;

    width: 100%;

    overflow: hidden;

    border: 1px solid rgba(245, 197, 66, 0.75);

    border-radius: 7px;

    background: rgba(0, 0, 0, 0.78);

    box-shadow:
        0 0 8px rgba(245, 197, 66, 0.16);
}


.di_home_wallet_input {
    flex: 1 1 auto;

    min-width: 0;

    height: 50px;

    padding: 0 9px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #ffffff;

    font-family: monospace;

    font-size: clamp(16px, 2.65vw, 26px);

    text-align: center;
}


.di_home_wallet_copy {
    flex: 0 0 auto;

    min-width: 90px;

    height: 50px;

    padding: 0 9px;

    border: 0;

    border-left: 1px solid rgba(0, 0, 0, 0.25);

    background: #f5c542;

    color: #050505;

    font-size: 14px;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
}

.di_home_wallet_copy i {
    font-size: 20px;
}


.di_home_wallet_copy:hover {
    background: #ffffff;
}


.di_home_wallet_copy:active {
    transform: scale(0.97);
}


/*
 * Wallet note
 */

.di_home_wallet_note {
    margin: 6px 0 0;

    color: rgba(243, 231, 177, 1);

    font-size: 16px;

    line-height: 1.25;

    text-align: center;

    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.9);
}


/* =========================================================
   LAYER 4
   HERO BUTTONS
   ========================================================= */

.di_home_hero_actions {
    position: absolute;

    left: 50%;
    top: 59.5%;

    z-index: 12;

    display: flex;

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

    gap: 12px;

    transform: translateX(-50%);
}


.di_home_hero_actions .di_btn {
    min-width: 150px;

    min-height: 46px;
}

.di_home_robinhood_button {
    min-width: 240px;
}

.di_home_chart_button {
    border-color:  rgba(20,151,104,0.99);
    background-color:  rgba(0,0,0,0.85);
}

/* =========================================================
   BOTTOM FEATURE STRIP
   ========================================================= */

.di_home_bottom_features {
    position: absolute;

    left: 50%;
    right: 0;
    bottom: 13%;

    z-index: 15;

    padding: 10px 4%;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08),
            rgba(0, 0, 0, 0.72)
        );

    /*backdrop-filter: blur(2px);*/

    width: min(60vw, 800px);
    transform: translate(-50%, -50%);

    box-sizing: border-box;
   
}


.di_home_bottom_features_inner {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    max-width: 1300px;

    margin: 0 auto;
}


.di_home_bottom_feature {
    flex: 1 1 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-width: 0;

    padding: 0 20px;

    text-align: center;
}


.di_home_bottom_feature_icon {
    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    display: flex;

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


.di_home_bottom_feature_icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}



.di_home_bottom_feature_text {
    width: 100%;

    color: #f3dc8b;

    font-size: clamp(10px, 0.85vw, 14px);

    font-weight: 700;

    line-height: 1.15;

    text-align: center;

    text-transform: uppercase;

    text-shadow:
        0 2px 7px rgba(0, 0, 0, 0.9);
}


.di_home_bottom_feature_divider {
    flex: 0 0 1px;

    width: 1px;

    height: 36px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255, 255, 255, 0.5),
            transparent
        );
}



/* =========================================================
   1920px+
   ========================================================= */

@media (min-width: 1920px) {

    .di_home_dog_wallet_layer {
        width: 50%;

        top: 27.5%;
    }


    .di_home_wallet {
        width: 45%;

        top: 45.5%;
    }

    .di_home_tilted_text {
        left: auto;

        right: 20%;

        top: 10%;
    }


    .di_home_global_community {
        right: 2%;

        top: 24%;
    }


    .di_home_robinhood_features {
        left: 2%;

        top: 56%;
    }

    .di_home_hero_actions {
        top: 58%;
    }

    .di_home_bottom_features {
        bottom: 20%;
        background: none;
    }
}

/* =========================================================
   LARGE DESKTOP
   1440px+
   ========================================================= */

@media (min-width: 1440px) and (max-width: 1919px) {

    .di_home_dog_wallet_layer {
        /*width: min(60vw, 690px);*/

        top: 27.5%;
    }


    .di_home_wallet {
        width: min(40vw, 570px);

        top: 42%;
    }

    .di_home_tilted_text {
        left: auto;

        right: 10%;

        top: 10%;
    }


    .di_home_global_community {
        right: 7%;

        top: 34%;
    }


    .di_home_robinhood_features {
        left: 2%;

        top: 48%;
    }

    .di_home_hero_actions {
        top: 52%;
    }

    .di_home_bottom_features {
        bottom: 18%;
    }
}



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

    .di_home_wallet {
        top: 48%;
    }

    .di_home_hero_actions {
        top: 55%;
    }

    .di_home_robinhood_features {
        top: 52%;
    }

    .di_home_bottom_features {
        bottom: 20%;
        background: none;
    }

}

/* =========================================================
   TABLET
   768px – 1199px
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {


    .di_home_wallet {
        width: min(60vw, 850px);
        top: 45%;
    }

    .di_home_wallet_input {
        font-size: clamp(12px, 2.65vw, 16px);
    }

    .di_home_tilted_text {
        right: 10%;
        top: 8%;
    }

    .di_home_global_community {
        right: 20%;
        top: 20%;
    }

    .di_home_hero_actions {
        left: 50%;
        top: 52%;
    }

    .di_home_chart_button { 
        background-color: #030303;
    }

    .di_home_robinhood_features {
        
        left: 50%;
        top: 65%;
        
        width: 60vw;
        color: #ffffff;

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

@media (min-width: 768px) and (max-width: 991px) {

    .di_home_hero {
        /*min-height: 820px;*/
        aspect-ratio: 1536 / 1024;
    }

    .di_home_hero_content {
        width: 50.5%;
    }

    .di_home_tilted_text {
        left: auto;

        right: 10%;

        top: 9%;

        width: 130px;

        font-size: 28px;
    }


    .di_home_global_community {
        right: 14%;

        top: 19%;

        width: 155px;
    }


    .di_home_robinhood_features {
        left: 50%;

        top: 65%;

        width: 60vw;

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


    .di_home_features_heading {
        font-size: 12px;
    }


    .di_home_feature_text {
        font-size: 9px;
    }


    .di_home_feature_icon {
        flex-basis: 24px;

        width: 24px;
        height: 24px;
    }

    .di_home_dog_wallet_layer {
        width: min(70vw, 770px);

        top: 30%;
    }


    .di_home_wallet {
        width: min(63vw, 870px);

        top: 40%;
    }


    .di_home_wallet_title {
        font-size: clamp(10px, 1.9vw, 14px);
        font-weight: 600;
    }


    .di_home_wallet_input {
        height: 40px;

        font-size: 16px;
    }


    .di_home_wallet_copy {
        height: 40px;

        min-width: 54px;

        font-size: 12px;
    }


    .di_home_wallet_note {
        font-size: 13px;
    }


    .di_home_hero_actions {
        top: 50%;

        gap: 9px;

        width: calc(70% - 30px);
    }


    .di_home_hero_actions .di_btn {
        min-width: 125px;

        min-height: 42px;
    }


    .di_home_bottom_features {
        top: 80%;

        bottom: auto;

        width: min(92%, 850px);

        padding: 12px 12px;

        background: rgba(0, 0, 0, 0.85);
    }


    .di_home_bottom_feature {
        gap: 6px;

        padding: 0 12px;
    }


    .di_home_bottom_feature_icon {
        width: 30px;
        height: 30px;
    }


    .di_home_bottom_feature_text {
        font-size: 9px;
    }


    .di_home_bottom_feature_divider {
        height: 44px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .di_home_hero {
        min-height: 760px;
    }


    /*
     * Keep the background centered, but make the Doge
     * composition independent from it.
     */
    .di_home_background {
        background-position: center center;
    }


    .di_home_dog_wallet_layer {
        width: min(94vw, 520px);

        top: 43%;
    }


     /*
     * Tilted text
     *
     * It moves above/beside the Doge rather than
     * remaining at the desktop coordinates.
     */

    .di_home_tilted_text {
        right: 8%;

        top: 9%;

        width: 125px;

        font-size: 27px;

        line-height: 0.85;
    }


    /*
     * Global community
     */

    .di_home_global_community {
        right: 4%;

        top: 27%;

        width: 135px;
    }


    .di_home_global_community_title {
        margin-bottom: 7px;

        font-size: 13px;
    }


    .di_home_global_community_text {
        font-size: 9px;

        line-height: 1.35;
    }


    /*
     * Left features become a compact overlay.
     */

    .di_home_robinhood_features {
        left: 50%;
        
        top: 81.5%;
        
        width: 65vw;
        
        transform: translate(-50%, -50%);
    }


    .di_home_features_heading_row {
        gap: 6px;

        margin-bottom: 8px;
    }

    .di_home_features_heading_image {
        width: 36px;
        height: 36px;
    }


    .di_home_features_heading {
        margin-bottom: 8px;

        font-size: 14px;
    }


    .di_home_features_list {
        gap: 6px;
    }


    .di_home_feature {
        gap: 5px;
    }


    .di_home_feature_icon {
        flex-basis: 19px;

        width: 19px;
        height: 19px;
    }


    .di_home_feature_text {
        font-size: 12px;
    }


    /*
     * Wallet box follows the black wallet area
     * contained inside the transparent Doge image.
     */
    .di_home_wallet {
        top: 56.5%;

        width: min(90vw, 450px);

        padding: 9px 12px 8px;
    }


    .di_home_wallet_title {
        margin-bottom: 5px;

        font-size: 0.8rem;
    }


    .di_home_wallet_input_row {
        border-radius: 6px;
    }


    .di_home_wallet_input {
        height: 29px;

        padding: 0 7px;

        font-size: 0.9rem;
    }


    .di_home_wallet_copy {
        min-width: 50px;

        height: 29px;

        padding: 0 7px;

        font-size: 8px;
    }


    .di_home_wallet_note {
        margin-top: 4px;

        font-size: 0.7rem;
    }


    .di_home_hero_actions {
        top: 65.5%;

        width: calc(70% - 30px);

        gap: 8px;
    }


    .di_home_hero_actions .di_btn {
        min-width: 125px;

        min-height: 40px;
    }

    .di_home_hero_actions .di_btn_outline {
        background-color: #090909;
    }


    /*
     * Bottom feature strip
     *
     * Four items remain in one horizontal row,
     * but become compact.
     */

    .di_home_bottom_features {
        top: 95%;

        bottom: auto;

        width: 65vw;

        padding: 9px 5px;

        background: rgba(0, 0, 0, 0.85);
    }


    .di_home_bottom_features_inner {
        width: 100%;
    }


    .di_home_bottom_feature {
        gap: 5px;

        padding: 0 4px;
    }


    .di_home_bottom_feature_icon {
        width: 25px;
        height: 25px;
    }


    .di_home_bottom_feature_text {
        font-size: 10px;

        line-height: 1.1;
    }


    .di_home_bottom_feature_divider {
        height: 34px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .di_home_hero {
        min-height: 720px;
    }


    .di_home_dog_wallet_layer {
        width: 90vw;

        top: 40%;
    }


    .di_home_tilted_text {
        right: 0;

        top: 7%;

        width: 105px;

        font-size: 22px;
    }


    .di_home_global_community {
        right: 2%;

        top: 25%;

        width: 110px;
    }


    .di_home_global_community_title {
        font-size: 10px;
    }


    .di_home_global_community_text {
        font-size: 10px;
    }


    .di_home_robinhood_features {
        left: 50%;

        top: 81.5%;

        width: 90vw;

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


    .di_home_features_heading {
        font-size: 11px;
    }


    .di_home_feature_text {
        font-size: 10px;
    }


    .di_home_feature_icon {
        flex-basis: 16px;

        width: 16px;
        height: 16px;
    }


    .di_home_wallet {
        top: 50%;

        width: calc(83vw - 38px);

        padding: 7px 9px 6px;
    }


    .di_home_wallet_title {
        font-size: 7px;
    }


    .di_home_wallet_input {
        height: 27px;

        font-size: 6.5px;
    }


    .di_home_wallet_copy {
        min-width: 47px;

        height: 27px;

        font-size: 9px;
    }

    .di_home_wallet_copy i {
        font-size: 10px;
    }


    .di_home_wallet_note {
        font-size: 6.5px;
    }


    .di_home_hero_actions {
        top: 57%;

        flex-direction: column;

        width: calc(100% - 32px);
    }


    .di_home_hero_actions .di_btn {
        width: 100%;

        min-width: 0;

        min-height: 38px;
    }


     /*
     * Bottom strip remains horizontal but becomes
     * very compact.
     */

    .di_home_bottom_features {
        top: 95%;

        bottom: auto;

        width: 90vw;

        padding: 7px 2px;
    }


    .di_home_bottom_feature {
        gap: 4px;

        padding: 0 2px;
    }


    .di_home_bottom_feature_icon {
        width: 20px;
        height: 20px;
    }


    .di_home_bottom_feature_text {
        font-size: 10px;
    }


    .di_home_bottom_feature_divider {
        height: 27px;
    }
}