/* ================================================================
   SAVE YOUR COINS — LANDING PAGE V2
================================================================ */


/* ================================================================
   TOKENS
================================================================ */

:root {

    --landing-navy:
        #152c3e;

    --landing-navy-soft:
        #203a50;

    --landing-blue:
        #2980b9;

    --landing-blue-light:
        #3498db;

    --landing-teal:
        #1abc9c;

    --landing-teal-light:
        #39d4b3;

    --landing-green:
        #27ae60;

    --landing-green-dark:
        #218c5b;

    --landing-gold:
        #f2c14e;

    --landing-purple:
        #8e44ad;

    --landing-page:
        #f4f9fb;

    --landing-surface:
        #ffffff;

    --landing-soft:
        #eef6f8;

    --landing-border:
        #dfe9ef;

    --landing-text:
        #203a50;

    --landing-muted:
        #718096;

    --landing-shadow:
        0 16px 40px
        rgba(32, 58, 80, 0.10);

    --landing-shadow-large:
        0 28px 70px
        rgba(32, 58, 80, 0.15);

}


/* ================================================================
   BASE
================================================================ */

.landing_page {

    margin: 0;

    color:
        var(--landing-text);

    background:
        var(--landing-page);

    font-family:
        "Poppins",
        sans-serif;
}


.landing_page * {

    box-sizing:
        border-box;
}


.landing_page img {

    display:
        block;

    max-width:
        100%;
}


.landing_page a {

    color:
        inherit;

    text-decoration:
        none;
}


.landing_page h1,
.landing_page h2,
.landing_page h3,
.landing_page p {

    margin-top:
        0;
}


.landing_container {

    width:
        min(
            1280px,
            calc(100% - 42px)
        );

    margin:
        0 auto;
}


/* ================================================================
   LANDING HEADER — POLISHED
================================================================ */

.landing_header {
    position: sticky;

    top: 0;

    z-index: 1000;

    padding:
        10px
        18px;

    border-bottom:
        1px solid
        rgba(
            41,
            128,
            185,
            0.09
        );

    background:
        rgba(
            244,
            249,
            251,
            0.88
        );

    backdrop-filter:
        blur(18px);
}


.landing_nav_shell {
    width:
        min(
            1480px,
            100%
        );

    min-height:
        68px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(
            210px,
            1fr
        )
        auto
        minmax(
            210px,
            1fr
        );

    align-items:
        center;

    gap:
        28px;

    padding:
        7px
        10px
        7px
        18px;

    border:
        1px solid
        rgba(
            203,
            218,
            228,
            0.88
        );

    border-radius:
        19px;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    box-shadow:
        0 8px 28px
        rgba(
            32,
            58,
            80,
            0.065
        );
}


.landing_brand {
    width:
        fit-content;

    display:
        inline-flex;

    align-items:
        center;
}


.landing_brand img {
    width:
        205px;

    height:
        55px;

    object-fit:
        contain;

    object-position:
        left center;
}


/* ================================================================
   NAV
================================================================ */

.landing_navigation {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        4px;

    padding: 0;

    background:
        transparent;
}


.landing_navigation a {
    position:
        relative;

    padding:
        11px
        14px;

    border-radius:
        10px;

    color:
        #63798c;

    font-size:
        13px;

    font-weight:
        650;

    white-space:
        nowrap;

    transition:
        color
        0.18s
        ease,
        background
        0.18s
        ease;
}


.landing_navigation a::after {
    content: "";

    position:
        absolute;

    left:
        14px;

    right:
        14px;

    bottom:
        5px;

    height:
        2px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--landing-green),
            var(--landing-teal)
        );

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform
        0.18s
        ease;
}


.landing_navigation a:hover {
    color:
        var(--landing-navy);

    background:
        rgba(
            41,
            128,
            185,
            0.045
        );
}


.landing_navigation a:hover::after {
    transform:
        scaleX(1);
}


/* ================================================================
   HEADER ACTIONS
================================================================ */

.landing_header_actions {
    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    gap:
        10px;
}


.landing_sign_in {
    padding:
        11px
        14px;

    border-radius:
        10px;

    color:
        var(--landing-navy);

    font-size:
        13px;

    font-weight:
        700;

    transition:
        background
        0.18s
        ease;
}


.landing_sign_in:hover {
    background:
        rgba(
            41,
            128,
            185,
            0.06
        );
}


.landing_header_cta {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        44px;

    padding:
        10px
        17px;

    border-radius:
        12px;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            var(--landing-green),
            var(--landing-teal)
        );

    box-shadow:
        0 8px 20px
        rgba(
            39,
            174,
            96,
            0.2
        );

    font-size:
        13px;

    font-weight:
        750;

    transition:
        transform
        0.18s
        ease,
        box-shadow
        0.18s
        ease;
}


.landing_header_cta:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 11px 25px
        rgba(
            39,
            174,
            96,
            0.27
        );
}


/* ================================================================
   BUTTONS
================================================================ */

.landing_primary_button,
.landing_secondary_button,
.landing_dark_secondary_button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        42px;

    padding:
        10px 17px;

    border-radius:
        12px;

    font-size:
        11px;

    font-weight:
        700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.landing_primary_button {

    color:
        white;

    background:
        linear-gradient(
            135deg,
            var(--landing-green),
            var(--landing-teal)
        );

    box-shadow:
        0 9px 22px
        rgba(39, 174, 96, 0.22);
}


.landing_primary_button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 28px
        rgba(39, 174, 96, 0.28);
}


.landing_secondary_button {

    color:
        var(--landing-green-dark);

    border:
        1px solid
        rgba(39, 174, 96, 0.32);

    background:
        rgba(255, 255, 255, 0.78);
}


.landing_large_button {

    min-height:
        49px;

    padding:
        13px 20px;

    font-size:
        12px;
}


/* ================================================================
   SHARED TEXT
================================================================ */

.landing_eyebrow,
.landing_light_eyebrow {

    display:
        block;

    margin-bottom:
        8px;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


.landing_eyebrow {

    color:
        var(--landing-teal);
}


.landing_light_eyebrow {

    color:
        #9af2dd;
}


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

.landing_hero {

    position:
        relative;

    min-height:
        690px;

    padding:
        68px 0 70px;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(26, 188, 156, 0.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 89% 25%,
            rgba(41, 128, 185, 0.12),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #f5fcfb,
            #edf7f8
        );
}


.landing_hero_grid {

    position:
        relative;

    z-index:
        3;

    display:
        grid;

    grid-template-columns:
        0.78fr
        1.22fr;

    align-items:
        center;

    gap:
        45px;
}


.landing_hero_copy h1 {

    max-width:
        600px;

    margin-bottom:
        12px;

    color:
        var(--landing-navy);

    font-size:
        clamp(44px, 5.8vw, 74px);

    line-height:
        1.02;

    letter-spacing:
        -3px;
}


.landing_hero_copy h1 span {

    display:
        block;

    color:
        var(--landing-green);
}


.landing_hero_copy h2 {

    margin-bottom:
        18px;

    color:
        var(--landing-green-dark);

    font-size:
        21px;
}


.landing_hero_description {

    max-width:
        560px;

    margin-bottom:
        24px;

    color:
        var(--landing-muted);

    font-size:
        14px;

    line-height:
        1.8;
}


.landing_hero_actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;
}


.landing_trust_row {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        20px;
}


.landing_trust_row span {

    color:
        var(--landing-muted);

    font-size:
        9px;

    font-weight:
        600;
}


.landing_trust_row b {

    color:
        var(--landing-green);
}


/* ================================================================
   HERO SCREENSHOT / COINO
================================================================ */

.landing_hero_visual {

    position:
        relative;

    min-height:
        520px;
}


.landing_dashboard_frame {

    position:
        absolute;

    top:
        40px;

    right:
        0;

    width:
        87%;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.95);

    border-radius:
        23px;

    background:
        white;

    box-shadow:
        var(--landing-shadow-large);
}


.landing_window_bar {

    height:
        35px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        0 13px;

    border-bottom:
        1px solid
        var(--landing-border);

    background:
        #fbfdfe;
}


.landing_window_bar div {

    display:
        flex;

    gap:
        5px;
}


.landing_window_bar div span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #cdd8df;
}


.landing_window_bar small {

    color:
        #97a4ae;

    font-size:
        7px;
}


.landing_hero_coino {

    position:
        absolute;

    z-index:
        4;

    left:
        -28px;

    bottom:
        -8px;

    width:
        200px;

    max-height:
        300px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 18px 23px
            rgba(32, 58, 80, 0.17)
        );
}


.landing_coino_message {

    position:
        absolute;

    z-index:
        5;

    left:
        120px;

    bottom:
        10px;

    width:
        295px;

    display:
        flex;

    gap:
        10px;

    align-items:
        center;

    padding:
        12px 14px;

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

    border-radius:
        15px;

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        var(--landing-shadow);
}


.landing_coino_message img {

    width:
        43px;

    height:
        43px;

    flex:
        0 0 43px;
}


.landing_coino_message strong {

    display:
        block;

    margin-bottom:
        2px;

    font-size:
        10px;
}


.landing_coino_message p {

    margin:
        0;

    color:
        var(--landing-muted);

    font-size:
        8px;
}


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

.landing_hero_orbit {

    position:
        absolute;

    border:
        1px solid
        rgba(26, 188, 156, 0.13);

    border-radius:
        50%;
}


.orbit_one {

    width:
        410px;

    height:
        410px;

    top:
        -220px;

    right:
        -40px;
}


.orbit_two {

    width:
        250px;

    height:
        250px;

    left:
        -110px;

    bottom:
        -150px;
}


.landing_coin_shape {

    position:
        absolute;

    z-index:
        1;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        #a77500;

    background:
        linear-gradient(
            145deg,
            #ffe694,
            var(--landing-gold)
        );

    font-weight:
        800;

    box-shadow:
        0 7px 14px
        rgba(136, 100, 22, 0.13);

    transform:
        rotate(-12deg);
}


.coin_shape_one {

    top:
        155px;

    left:
        48%;

    width:
        35px;

    height:
        35px;

    font-size:
        15px;
}


.coin_shape_two {

    right:
        4%;

    bottom:
        100px;

    width:
        47px;

    height:
        47px;

    font-size:
        18px;
}


/* ================================================================
   COMMON SECTIONS
================================================================ */

.landing_section {

    position:
        relative;

    padding:
        68px 0;
}


.landing_section_heading {

    max-width:
        700px;

    margin-bottom:
        32px;
}


.landing_center_heading {

    margin-left:
        auto;

    margin-right:
        auto;

    text-align:
        center;
}


.landing_section_heading h2 {

    margin-bottom:
        10px;

    color:
        var(--landing-navy);

    font-size:
        clamp(30px, 4vw, 45px);

    line-height:
        1.15;

    letter-spacing:
        -1.5px;
}


.landing_section_heading p {

    margin-bottom:
        0;

    color:
        var(--landing-muted);

    font-size:
        13px;

    line-height:
        1.7;
}


/* ================================================================
   WHY
================================================================ */

.landing_why_section {

    overflow:
        hidden;

    background:
        #f7fbfd;
}


.landing_section_blob {

    position:
        absolute;

    pointer-events:
        none;
}


.why_blob {

    width:
        290px;

    height:
        290px;

    right:
        -150px;

    bottom:
        -150px;

    border-radius:
        50%;

    background:
        rgba(26, 188, 156, 0.04);
}


.landing_value_grid {

    display:
        grid;

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

    gap:
        16px;
}


.landing_value_card {

    position:
        relative;

    min-height:
        190px;

    padding:
        24px;

    overflow:
        hidden;

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

    border-radius:
        18px;

    background:
        white;

    box-shadow:
        0 8px 24px
        rgba(32, 58, 80, 0.055);
}


.landing_value_featured {

    transform:
        translateY(-8px);

    border-top:
        3px solid
        var(--landing-teal);
}


.landing_value_card::after {

    content:
        "";

    position:
        absolute;

    right:
        -38px;

    bottom:
        -52px;

    width:
        115px;

    height:
        115px;

    border-radius:
        50%;

    background:
        var(--landing-teal);

    opacity:
        0.03;
}


.landing_value_icon {

    width:
        43px;

    height:
        43px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        16px;

    border-radius:
        13px;

    color:
        var(--landing-blue);

    background:
        #edf6fb;

    font-weight:
        800;
}


.landing_value_card h3 {

    margin-bottom:
        7px;

    font-size:
        15px;
}


.landing_value_card p {

    margin:
        0;

    color:
        var(--landing-muted);

    font-size:
        10px;

    line-height:
        1.65;
}


/* ================================================================
   FIRSTS
================================================================ */

.landing_firsts_section {

    position:
        relative;

    padding:
        60px 0 65px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #e9f8f5,
            #eef8fb
        );

    border-top:
        1px solid
        rgba(26, 188, 156, 0.11);

    border-bottom:
        1px solid
        rgba(26, 188, 156, 0.11);
}


.landing_firsts_intro {

    display:
        flex;

    justify-content:
        center;

    align-items:
        flex-end;

    gap:
        25px;

    margin-bottom:
        30px;

    text-align:
        center;
}


.landing_firsts_intro h2 {

    margin-bottom:
        7px;

    color:
        var(--landing-navy);

    font-size:
        40px;

    letter-spacing:
        -1.4px;
}


.landing_firsts_intro p {

    color:
        var(--landing-muted);

    font-size:
        12px;
}


.landing_firsts_coino {

    width:
        92px;

    max-height:
        115px;

    object-fit:
        contain;
}


.landing_firsts_track {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}


.landing_first_item {

    width:
        128px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        9px;

    text-align:
        center;
}


.landing_first_icon {

    width:
        58px;

    height:
        58px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(26, 188, 156, 0.18);

    border-radius:
        18px;

    color:
        var(--landing-green-dark);

    background:
        white;

    box-shadow:
        0 7px 18px
        rgba(32, 58, 80, 0.07);

    font-size:
        21px;

    font-weight:
        800;
}


.landing_first_item span {

    font-size:
        10px;

    font-weight:
        700;
}


.landing_first_connector {

    width:
        clamp(20px, 4vw, 65px);

    height:
        2px;

    margin-bottom:
        28px;

    background:
        linear-gradient(
            90deg,
            rgba(41, 128, 185, 0.25),
            rgba(26, 188, 156, 0.55)
        );
}


.firsts_shape {

    position:
        absolute;

    border-radius:
        50%;

    border:
        1px solid
        rgba(26, 188, 156, 0.08);
}


.firsts_shape_left {

    width:
        230px;

    height:
        230px;

    left:
        -120px;

    top:
        -90px;
}


.firsts_shape_right {

    width:
        170px;

    height:
        170px;

    right:
        -70px;

    bottom:
        -75px;
}


/* ================================================================
   SHARED FEATURE COPY
================================================================ */

.landing_feature_copy h2 {

    margin-bottom:
        13px;

    color:
        var(--landing-navy);

    font-size:
        clamp(31px, 4vw, 48px);

    line-height:
        1.12;

    letter-spacing:
        -1.7px;
}


.landing_feature_copy > p {

    color:
        var(--landing-muted);

    font-size:
        13px;

    line-height:
        1.78;
}


.landing_number {

    width:
        37px;

    height:
        37px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        17px;

    border:
        1px solid
        rgba(26, 188, 156, 0.2);

    border-radius:
        11px;

    color:
        var(--landing-green-dark);

    background:
        rgba(26, 188, 156, 0.08);

    font-size:
        10px;

    font-weight:
        800;
}


.landing_feature_points {

    display:
        grid;

    gap:
        7px;

    margin-top:
        20px;
}


.landing_feature_points span {

    color:
        var(--landing-navy-soft);

    font-size:
        10px;

    font-weight:
        600;
}


/* ================================================================
   LIFE PATH
================================================================ */

.landing_lifepath_section {

    position:
        relative;

    padding:
        72px 0;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #f3fafb,
            #eaf5f9
        );
}


.landing_lifepath_grid {

    display:
        grid;

    grid-template-columns:
        0.62fr
        1.38fr;

    align-items:
        center;

    gap:
        55px;
}


.landing_lifepath_visual {

    position:
        relative;

    min-height:
        470px;
}


.landing_lifepath_screenshot {

    position:
        absolute;

    top:
        35px;

    right:
        -45px;

    width:
        105%;

    padding:
        8px;

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

    border-radius:
        23px;

    background:
        white;

    box-shadow:
        var(--landing-shadow-large);

    transform:
        rotate(0.7deg);
}


.landing_lifepath_screenshot img {

    border-radius:
        16px;
}


.lifepath_float_card {

    position:
        absolute;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        10px 13px;

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

    border-radius:
        13px;

    background:
        white;

    box-shadow:
        var(--landing-shadow);
}


.lifepath_float_card > span {

    font-size:
        21px;
}


.lifepath_float_card small {

    display:
        block;

    color:
        var(--landing-muted);

    font-size:
        7px;

    font-weight:
        700;
}


.lifepath_float_card strong {

    font-size:
        10px;
}


.lifepath_card_one {

    left:
        -25px;

    top:
        20px;
}


.lifepath_card_two {

    right:
        -15px;

    bottom:
        15px;
}


.lifepath_route {

    position:
        absolute;

    width:
        380px;

    height:
        380px;

    left:
        -260px;

    bottom:
        -190px;

    border:
        2px dashed
        rgba(41, 128, 185, 0.09);

    border-radius:
        50%;
}


/* ================================================================
   BUDGET
================================================================ */

.landing_budget_section {

    position:
        relative;

    padding:
        74px 0;

    overflow:
        hidden;

    background:
        white;
}


.landing_feature_grid {

    display:
        grid;

    grid-template-columns:
        1.15fr
        0.85fr;

    align-items:
        center;

    gap:
        55px;
}


.landing_budget_visual {

    position:
        relative;
}


.landing_screenshot_frame {

    padding:
        8px;

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

    border-radius:
        22px;

    background:
        white;

    box-shadow:
        var(--landing-shadow-large);

    transform:
        rotate(-1deg);
}


.landing_screenshot_frame img {

    border-radius:
        15px;
}


.budget_health_badge {

    position:
        absolute;

    right:
        -14px;

    bottom:
        -18px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        10px 13px;

    border:
        1px solid
        rgba(39, 174, 96, 0.18);

    border-radius:
        13px;

    background:
        white;

    box-shadow:
        var(--landing-shadow);
}


.budget_health_badge > span {

    width:
        28px;

    height:
        28px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    color:
        white;

    background:
        var(--landing-green);
}


.budget_health_badge small {

    display:
        block;

    color:
        var(--landing-muted);

    font-size:
        7px;
}


.budget_health_badge strong {

    font-size:
        10px;
}


.budget_shape {

    position:
        absolute;

    width:
        260px;

    height:
        260px;

    right:
        -120px;

    top:
        -130px;

    border-radius:
        50%;

    background:
        rgba(26, 188, 156, 0.035);
}


/* ================================================================
   ORGANIZATION
================================================================ */

.landing_organization_section {

    padding:
        70px 0;

    background:
        #eef6f9;
}


.landing_dual_showcase {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        18px;
}


.landing_product_panel {

    overflow:
        hidden;

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

    border-radius:
        22px;

    background:
        white;

    box-shadow:
        0 8px 25px
        rgba(32, 58, 80, 0.06);
}


.landing_product_panel_copy {

    padding:
        23px;
}


.landing_product_panel_copy > span {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--landing-teal);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.landing_product_panel_copy h3 {

    margin-bottom:
        6px;

    font-size:
        19px;
}


.landing_product_panel_copy p {

    margin:
        0;

    color:
        var(--landing-muted);

    font-size:
        10px;
}


.landing_product_panel_image {

    height:
        330px;

    overflow:
        hidden;

    border-top:
        1px solid
        var(--landing-border);
}


.landing_product_panel_image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        top;
}


/* ================================================================
   CALENDAR DARK FEATURE
================================================================ */

.landing_calendar_section {

    position:
        relative;

    padding:
        68px 0;

    overflow:
        hidden;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            var(--landing-navy),
            #285269 58%,
            #168b80
        );
}


.landing_calendar_grid {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        0.65fr
        1.35fr;

    align-items:
        center;

    gap:
        45px;
}


.landing_calendar_copy h2 {

    margin-bottom:
        12px;

    color:
        white;

    font-size:
        clamp(30px, 4vw, 47px);

    line-height:
        1.12;

    letter-spacing:
        -1.6px;
}


.landing_calendar_copy p {

    color:
        rgba(255, 255, 255, 0.7);

    font-size:
        12px;

    line-height:
        1.75;
}


.landing_number_light {

    color:
        white;

    border-color:
        rgba(255, 255, 255, 0.18);

    background:
        rgba(255, 255, 255, 0.09);
}


.landing_calendar_points {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        20px;
}


.landing_calendar_points span {

    padding:
        7px 10px;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius:
        999px;

    color:
        rgba(255, 255, 255, 0.8);

    background:
        rgba(255, 255, 255, 0.06);

    font-size:
        9px;

    font-weight:
        600;
}


.landing_calendar_image {

    padding:
        8px;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius:
        22px;

    background:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 25px 55px
        rgba(0, 0, 0, 0.19);

    transform:
        rotate(0.5deg);
}


.landing_calendar_image img {

    border-radius:
        15px;
}


.calendar_ring {

    position:
        absolute;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        50%;
}


.calendar_ring_one {

    width:
        330px;

    height:
        330px;

    top:
        -200px;

    right:
        4%;
}


.calendar_ring_two {

    width:
        220px;

    height:
        220px;

    left:
        -120px;

    bottom:
        -130px;
}


/* ================================================================
   MORE
================================================================ */

.landing_more_section {

    position:
        relative;

    padding:
        68px 0;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            #fbfefd,
            #f0f9f7
        );
}


.landing_more_grid {

    display:
        grid;

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

    gap:
        14px;
}


.landing_more_grid article {
    min-height:
        145px;

    padding:
        19px
        21px;

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

    border-radius:
        16px;

    background:
        white;

    box-shadow:
        0 6px 18px
        rgba(
            32,
            58,
            80,
            0.045
        );
}


.landing_more_grid h3 {

    margin-bottom:
        6px;

    font-size:
        13px;
}


.landing_more_grid p {

    margin:
        0;

    color:
        var(--landing-muted);

    font-size:
        9px;

    line-height:
        1.6;
}


.landing_more_icon {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        11px;

    border-radius:
        11px;

    color:
        var(--landing-blue);

    background:
        #edf6fb;

    font-weight:
        800;
}


.more_green .landing_more_icon {

    color:
        var(--landing-green);

    background:
        rgba(39, 174, 96, 0.09);
}


.more_teal .landing_more_icon {

    color:
        var(--landing-teal);

    background:
        rgba(26, 188, 156, 0.09);
}


.more_gold .landing_more_icon {

    color:
        #a57600;

    background:
        rgba(242, 193, 78, 0.15);
}


.more_purple .landing_more_icon {

    color:
        var(--landing-purple);

    background:
        rgba(142, 68, 173, 0.09);
}


.landing_more_future {

    border-style:
        dashed !important;

    background:
        linear-gradient(
            135deg,
            rgba(26, 188, 156, 0.06),
            rgba(41, 128, 185, 0.035)
        ) !important;
}


.more_dot_pattern {

    position:
        absolute;

    right:
        5%;

    top:
        55px;

    width:
        110px;

    height:
        110px;

    opacity:
        0.25;

    background-image:
        radial-gradient(
            circle,
            rgba(41, 128, 185, 0.28)
            1.5px,
            transparent 1.5px
        );

    background-size:
        13px 13px;
}


/* ================================================================
   PREFERENCES
================================================================ */

.landing_preferences_preview {

    margin-top:
        23px;

    display:
        grid;

    grid-template-columns:
        0.62fr
        1.38fr;

    align-items:
        center;

    gap:
        35px;

    min-height:
        350px;

    padding:
        28px 28px 0;

    overflow:
        hidden;

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

    border-radius:
        22px;

    background:
        white;

    box-shadow:
        0 7px 20px
        rgba(32, 58, 80, 0.05);
}


.landing_preferences_preview h3 {

    margin-bottom:
        8px;

    font-size:
        24px;
}


.landing_preferences_preview p {

    color:
        var(--landing-muted);

    font-size:
        10px;

    line-height:
        1.7;
}


.preferences_image_wrapper {

    align-self:
        end;

    max-height:
        320px;

    overflow:
        hidden;

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

    border-radius:
        17px 17px 0 0;

    box-shadow:
        0 8px 20px
        rgba(32, 58, 80, 0.07);
}


.preferences_image_wrapper img {

    width:
        100%;

    object-fit:
        cover;

    object-position:
        top;
}


/* ================================================================
   ROADMAP
================================================================ */

.landing_roadmap_section {

    padding:
        68px 0;

    background:
        #f5fafc;
}


.landing_roadmap {

    position:
        relative;

    display:
        grid;

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

    gap:
        20px;

    margin-top:
        40px;
}


.landing_roadmap::before {

    content:
        "";

    position:
        absolute;

    top:
        20px;

    left:
        16%;

    right:
        16%;

    height:
        3px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--landing-green),
            var(--landing-teal),
            var(--landing-blue)
        );
}


.landing_roadmap_stage {

    position:
        relative;

    z-index:
        1;
}


.landing_roadmap_marker {

    width:
        42px;

    height:
        42px;

    margin:
        0 auto 15px;

    display:
        grid;

    place-items:
        center;

    border:
        5px solid
        #f5fafc;

    border-radius:
        50%;

    color:
        white;

    background:
        var(--landing-green);

    box-shadow:
        0 0 0 2px
        rgba(39, 174, 96, 0.16);
}


.landing_roadmap_next
.landing_roadmap_marker {
    background:
        var(--landing-teal);
}


.landing_roadmap_future
.landing_roadmap_marker {
    background:
        var(--landing-blue);
}


.landing_roadmap_marker span {

    font-size:
        10px;

    font-weight:
        800;
}


.landing_roadmap_card {

    min-height:
        300px;

    padding:
        22px;

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

    border-radius:
        18px;

    background:
        white;

    box-shadow:
        0 7px 22px
        rgba(32, 58, 80, 0.055);
}


.landing_roadmap_status {

    display:
        inline-flex;

    margin-bottom:
        10px;

    padding:
        5px 8px;

    border-radius:
        999px;

    color:
        var(--landing-green-dark);

    background:
        rgba(39, 174, 96, 0.09);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.6px;

    text-transform:
        uppercase;
}


.landing_roadmap_card h3 {

    margin-bottom:
        5px;

    font-size:
        17px;
}


.landing_roadmap_card > p {

    margin-bottom:
        15px;

    color:
        var(--landing-muted);

    font-size:
        9px;
}


.landing_roadmap_card ul {

    display:
        grid;

    gap:
        7px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.landing_roadmap_card li {

    display:
        flex;

    gap:
        7px;

    color:
        var(--landing-navy-soft);

    font-size:
        9px;

    font-weight:
        600;
}


.landing_roadmap_card li span {

    color:
        var(--landing-green);
}


.landing_roadmap_note {

    margin:
        22px auto 0;

    max-width:
        650px;

    color:
        #91a0ad;

    font-size:
        8px;

    text-align:
        center;
}


/* ================================================================
   ABOUT — EXPANDED
================================================================ */

.landing_about_section {
    position:
        relative;

    padding:
        72px
        0;

    overflow:
        hidden;

    background:
        white;
}


.landing_about_card {
    position:
        relative;

    min-height:
        500px;

    display:
        grid;

    grid-template-columns:
        minmax(
            300px,
            0.7fr
        )
        minmax(
            500px,
            1.3fr
        );

    align-items:
        center;

    gap:
        60px;

    padding:
        48px
        58px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            26,
            188,
            156,
            0.16
        );

    border-radius:
        28px;

    background:
        linear-gradient(
            135deg,
            #effbf8,
            #eef7fb
        );

    box-shadow:
        0 14px 38px
        rgba(
            32,
            58,
            80,
            0.07
        );
}


/* ================================================================
   ABOUT COINO
================================================================ */

.landing_about_visual {
    position:
        relative;

    min-height:
        390px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.about_coino_backdrop {
    position:
        absolute;

    width:
        285px;

    height:
        285px;

    border:
        1px solid
        rgba(
            26,
            188,
            156,
            0.15
        );

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                26,
                188,
                156,
                0.1
            ),
            rgba(
                41,
                128,
                185,
                0.035
            )
            64%,
            transparent
            65%
        );
}


.about_coino_backdrop::before {
    content: "";

    position:
        absolute;

    inset:
        24px;

    border:
        1px dashed
        rgba(
            39,
            174,
            96,
            0.14
        );

    border-radius:
        50%;
}


.landing_about_coino_image {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            270px,
            90%
        );

    max-height:
        345px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 18px 24px
            rgba(
                32,
                58,
                80,
                0.15
            )
        );
}


.about_coino_label {
    position:
        absolute;

    z-index:
        3;

    left:
        10px;

    bottom:
        15px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        10px
        13px;

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

    border-radius:
        13px;

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    box-shadow:
        var(--landing-shadow);
}


.about_coino_label img {
    width:
        35px;

    height:
        35px;
}


.about_coino_label small {
    display:
        block;

    margin-bottom:
        1px;

    color:
        var(--landing-teal);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.7px;
}


.about_coino_label strong {
    font-size:
        10px;
}


/* ================================================================
   ABOUT COPY
================================================================ */

.landing_about_content {
    position:
        relative;

    z-index:
        2;
}


.landing_about_content h2 {
    max-width:
        720px;

    margin-bottom:
        17px;

    color:
        var(--landing-navy);

    font-size:
        clamp(
            36px,
            4.4vw,
            52px
        );

    line-height:
        1.12;

    letter-spacing:
        -1.7px;
}


.landing_about_content > p {
    max-width:
        760px;

    color:
        var(--landing-muted);

    font-size:
        13.5px;

    line-height:
        1.78;
}


.landing_about_lead {
    color:
        var(--landing-navy-soft) !important;

    font-size:
        15px !important;

    font-weight:
        500;
}


/* ================================================================
   ABOUT PRINCIPLES
================================================================ */

.landing_about_principles {
    display:
        grid;

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

    gap:
        10px;

    margin-top:
        23px;
}


.landing_about_principles article {
    padding:
        14px;

    border:
        1px solid
        rgba(
            41,
            128,
            185,
            0.11
        );

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            0.68
        );
}


.landing_about_principles article > span {
    width:
        31px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        9px;

    border-radius:
        9px;

    color:
        var(--landing-green-dark);

    background:
        rgba(
            39,
            174,
            96,
            0.09
        );

    font-size:
        13px;

    font-weight:
        800;
}


.landing_about_principles strong {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--landing-navy);

    font-size:
        11px;
}


.landing_about_principles p {
    margin:
        0;

    color:
        var(--landing-muted);

    font-size:
        9px;

    line-height:
        1.55;
}


/* ================================================================
   ABOUT TAGLINE
================================================================ */

.landing_about_statement {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        18px;

    padding-top:
        17px;

    border-top:
        1px solid
        rgba(
            41,
            128,
            185,
            0.1
        );
}


.landing_about_statement strong {
    color:
        var(--landing-green-dark);

    font-size:
        12px;
}


.landing_about_statement span {
    color:
        var(--landing-muted);

    font-size:
        10px;
}


/* ================================================================
   ABOUT BACKGROUND SHAPES
================================================================ */

.about_background_ring {
    position:
        absolute;

    border:
        1px solid
        rgba(
            26,
            188,
            156,
            0.06
        );

    border-radius:
        50%;
}


.about_ring_one {
    width:
        280px;

    height:
        280px;

    left:
        -155px;

    top:
        -100px;
}


.about_ring_two {
    width:
        200px;

    height:
        200px;

    right:
        -90px;

    bottom:
        -80px;
}


/* ================================================================
   FINAL CTA
================================================================ */

.landing_final_cta {

    position:
        relative;

    padding:
        64px 0;

    overflow:
        hidden;

    color:
        white;

    background:
        linear-gradient(
            130deg,
            #152c3e,
            #285269 58%,
            #168b80
        );
}


.landing_final_cta_inner {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1fr
        260px;

    align-items:
        center;

    gap:
        45px;
}


.landing_final_eyebrow {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #98f0dc;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


.landing_final_cta h2 {

    max-width:
        700px;

    margin-bottom:
        10px;

    color:
        white;

    font-size:
        clamp(34px, 5vw, 55px);

    line-height:
        1.1;

    letter-spacing:
        -2px;
}


.landing_final_cta p {

    max-width:
        620px;

    color:
        rgba(255, 255, 255, 0.7);

    font-size:
        11px;

    line-height:
        1.7;
}


.landing_final_actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        20px;
}


.landing_dark_secondary_button {

    color:
        white;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    background:
        rgba(255, 255, 255, 0.06);
}


.landing_final_coino {
    position:
        relative;

    min-height:
        280px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.landing_final_coino_ring {
    position:
        absolute;

    width:
        240px;

    height:
        240px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    border-radius:
        50%;
}


.landing_final_coino_ring::after {
    content: "";

    position:
        absolute;

    inset:
        20px;

    border:
        1px dashed
        rgba(
            152,
            240,
            220,
            0.12
        );

    border-radius:
        50%;
}


.landing_final_coino img {
    position:
        relative;

    z-index:
        2;

    max-height:
        270px;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 20px 28px
            rgba(
                0,
                0,
                0,
                0.2
            )
        );
}

.landing_final_shape {

    position:
        absolute;

    border-radius:
        50%;
}


.final_shape_one {

    width:
        330px;

    height:
        330px;

    top:
        -225px;

    right:
        8%;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.final_shape_two {

    width:
        200px;

    height:
        200px;

    left:
        -85px;

    bottom:
        -120px;

    background:
        rgba(255, 255, 255, 0.035);
}


/* ================================================================
   LANDING TYPOGRAPHY POLISH
================================================================ */

/* Standard supporting copy */

.landing_section_heading p,
.landing_feature_copy > p,
.landing_calendar_copy p,
.landing_about_content p,
.landing_preferences_preview p {
    font-size:
        14px;

    line-height:
        1.75;
}


/* Card titles */

.landing_value_card h3 {
    font-size:
        17px;
}


.landing_product_panel_copy h3 {
    font-size:
        20px;
}


.landing_more_grid h3 {
    font-size:
        15px;
}


.landing_roadmap_card h3 {
    font-size:
        19px;
}


/* Card/supporting descriptions */

.landing_value_card p,
.landing_product_panel_copy p,
.landing_more_grid p,
.landing_roadmap_card > p {
    font-size:
        11.5px;

    line-height:
        1.65;
}


.landing_feature_points span {
    font-size:
        11.5px;
}


.landing_calendar_points span {
    font-size:
        10.5px;
}


.landing_roadmap_card li {
    font-size:
        10.5px;
}


.landing_roadmap_note {
    font-size:
        9px;
}


/* Eyebrow text */

.landing_eyebrow,
.landing_light_eyebrow,
.landing_final_eyebrow {
    font-size:
        10.5px;
}


/* ================================================================
   TABLET
================================================================ */

@media (max-width: 1050px) {

    .landing_hero_grid,
    .landing_lifepath_grid,
    .landing_feature_grid,
    .landing_calendar_grid {

        grid-template-columns:
            1fr;
    }


    .landing_hero_copy {

        max-width:
            760px;

        margin:
            0 auto;

        text-align:
            center;
    }


    .landing_hero_description {

        margin-left:
            auto;

        margin-right:
            auto;
    }


    .landing_hero_actions,
    .landing_trust_row {

        justify-content:
            center;
    }


    .landing_hero_visual {

        width:
            min(830px, 100%);

        margin:
            0 auto;
    }


    .landing_lifepath_visual {

        min-height:
            500px;
    }


    .landing_lifepath_screenshot {

        right:
            0;

        width:
            100%;
    }


    .landing_feature_copy {

        max-width:
            720px;
    }


    .landing_calendar_copy {

        max-width:
            700px;
    }

}


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

@media (max-width: 780px) {

    .landing_container {

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


    .landing_header {

        position:
            relative;
    }


    .landing_nav_shell {

        grid-template-columns:
            1fr auto;
    }


    .landing_navigation {

        grid-column:
            1 / -1;

        grid-row:
            2;

        overflow-x:
            auto;
    }


    .landing_header_actions {

        grid-column:
            2;

        grid-row:
            1;
    }


    .landing_header_actions
    .landing_primary_button {

        display:
            none;
    }


    .landing_brand img {

        width:
            145px;
    }


    .landing_hero {

        min-height:
            auto;

        padding:
            50px 0;
    }


    .landing_hero-copy h1 {

        font-size:
            clamp(40px, 13vw, 59px);
    }


    .landing_value_grid,
    .landing_dual_showcase,
    .landing_more_grid,
    .landing_roadmap {

        grid-template-columns:
            1fr;
    }


    .landing_value_featured {

        transform:
            none;
    }


    .landing_firsts-intro {

        flex-direction:
            column;

        align-items:
            center;
    }


    .landing_firsts_track {

        display:
            grid;

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

        gap:
            16px;
    }


    .landing_first_connector {

        display:
            none;
    }


    .landing_first_item {

        width:
            auto;
    }


    .landing_preferences_preview,
    .landing_about_card,
    .landing_final_cta_inner {

        grid-template-columns:
            1fr;
    }


    .landing_about_card {

        padding:
            30px 25px;
    }


    .landing_about_coino img {

        max-height:
            210px;
    }


    .landing_final_cta_inner {

        text-align:
            center;
    }


    .landing_final_actions {

        justify-content:
            center;
    }


    .landing_final_cta_inner > img {

        max-height:
            210px;
    }


    .landing_roadmap::before {

        display:
            none;
    }


    .landing_roadmap_marker {

        margin:
            0 0 10px;
    }

}


@media (max-width: 780px) {

    .landing_header {
        padding:
            8px;
    }


    .landing_nav_shell {
        width:
            100%;

        grid-template-columns:
            1fr
            auto;

        gap:
            8px;

        padding:
            7px
            9px;
    }


    .landing_navigation {
        grid-column:
            1 / -1;

        grid-row:
            2;

        width:
            100%;

        justify-content:
            flex-start;

        overflow-x:
            auto;

        padding-bottom:
            2px;
    }


    .landing_navigation a {
        flex:
            0 0
            auto;

        padding:
            9px
            11px;

        font-size:
            11px;
    }


    .landing_brand img {
        width:
            160px;
    }


    .landing_header_actions {
        grid-column:
            2;

        grid-row:
            1;
    }


    .landing_header_cta {
        display:
            none;
    }


    .landing_about_card {
        grid-template-columns:
            1fr;

        gap:
            25px;

        padding:
            30px
            25px;
    }


    .landing_about_visual {
        min-height:
            280px;
    }


    .landing_about_coino_image {
        max-height:
            250px;
    }


    .landing_about_principles {
        grid-template-columns:
            1fr;
    }


    .landing_final_coino {
        min-height:
            230px;
    }


    .landing_final_coino img {
        max-height:
            220px;
    }

}



/* ================================================================
   LANDING DENSITY POLISH
================================================================ */

.landing_why_section,
.landing_organization_section,
.landing_more_section,
.landing_roadmap_section {
    padding-top:
        60px;

    padding-bottom:
        60px;
}


.landing_budget_section,
.landing_lifepath_section {
    padding-top:
        66px;

    padding-bottom:
        66px;
}


.landing_section_heading {
    margin-bottom:
        28px;
}


.landing_more_grid {
    gap:
        12px;
}


.landing_dual_showcase {
    gap:
        16px;
}