@import "base/variables.css";
@import "base/fonts.css";
@import "base/normalize.css";
@import "base/behavior.css";

:root {
    --primary-color: #000425;
    --secondary-color: #F9EDDF;
    --accent-color: #7BDCFF;
    --accent-second-color: #68D7FF;
}

html {
    height: 100%;
    min-height: 100vh;
    overflow-y: auto;
    color: var(--text);
    font: var(--f16) 'site_font', Helvetica, sans-serif;
    font-weight: 300;
    line-height: 1.3;
    -webkit-text-size-adjust: none;
}

body {
    background: #00396B;
    color: var(--white);
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    -webkit-text-size-adjust: none;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    overflow-wrap: break-word;
    hyphens: auto;
}

.main {
    display: flex;
    flex-flow: column nowrap;
    justify-content: stretch;
    gap: var(--p20);
    width: min(1386px, 100%);
    margin: 0 auto;
    padding: var(--p20);

}

.block {
    border: 2px solid var(--accent-color);
    border-radius: var(--info-radius);
    padding: var(--p40);
    overflow: hidden;
}

.row {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--p20);

    .col {
        overflow-x: auto;
        line-height: 1;
        padding: 0;

        &.wide {
            grid-column: span 2;
        }
    }

    &.cols2 {
        grid-template-columns: repeat(2, 1fr);
        @media (max-width: 1024px) {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    &.cols3 {
        grid-template-columns: repeat(3, 1fr);
        @media (max-width: 768px) {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    &.cols4 {
        grid-template-columns: repeat(4, 1fr);
        @media (max-width: 1024px) {
            grid-template-columns: repeat(2, 1fr);
        }
        @media (max-width: 560px) {
            grid-template-columns: repeat(1, 1fr);
        }
    }
}

.bg_gradient {
    background: linear-gradient(240.94deg, rgba(0, 0, 0, 0.2) 11.98%, rgba(44, 176, 233, 0.2) 52.6%, rgba(0, 0, 0, 0.2) 97.46%);
    backdrop-filter: blur(4px);
}

.item_bg_gradient {
    background: linear-gradient(0deg, rgba(0, 4, 37, 0.2), rgba(0, 4, 37, 0.2)),
    linear-gradient(240.94deg, rgba(0, 0, 0, 0.1) 11.98%, rgba(44, 176, 233, 0.1) 52.6%, rgba(0, 0, 0, 0.1) 97.46%);
    background: #00042533;
    backdrop-filter: blur(20px);
}

.accent_letter {
    font-family: "site_hdr";
    color: var(--header);
    text-align: center;

    &::first-letter {
        color: var(--accent-color);
        font-size: 2em;
    }

    &.brief {
        &::first-letter {
            letter-spacing: -0.2em;
        }
    }
}

.button {
    font-family: "site_hdr";
    text-align: center;
    font-size: var(--f18);
    cursor: pointer;
    color: var(--primary-color);
    background: var(--accent-color);
    display: inline-block;
    white-space: nowrap;
    padding: var(--p10) var(--p80);
    border-radius: var(--form-radius);
    border: none;
    text-decoration: none;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -o-transition: all 0.7s;
    transition: all 0.7s;

    &:before {
        content: '';
        display: block;
        background: url('./images/button_decor.svg') no-repeat center center;
        background-size: contain;
        position: absolute;
        left: var(--p10);
        top: 50%;
        width: var(--f30);
        height: var(--f30);
        transform: translateY(-50%);
    }

    &:after {
        content: '';
        display: block;
        background: url('./images/button_decor.svg') no-repeat center center;
        background-size: contain;
        position: absolute;
        right: var(--p10);
        top: 50%;
        width: var(--f30);
        height: var(--f30);
        transform: translateY(-50%) scalex(-1);
    }

    &:hover {
        color: var(--white);
        background: var(--accent-second-color);
        text-decoration: none;
        border: none;
    }
}

h1 {
    text-transform: uppercase;
    font-size: var(--f160);
    line-height: 1;
    width: fit-content;
    margin: 0 auto;
    @media (max-width: 640px) {
        font-size: var(--f120);
    }
    @media (max-width: 520px) {
        font-size: var(--f80);
    }
}

h2 {
    font-family: "site_hdr", serif;
    text-align: center;
    font-size: var(--f32);
    margin: calc(var(--p20) * -1) auto var(--p20);
    width: min(100%, 635px);
}

.hdr {
    font-family: 'site_hdr', serif;
    font-size: var(--f60);
    color: var(--white);
    line-height: 1;
    text-transform: uppercase;

    .bg2 & {
        color: var(--text);
    }
}

.bg {
    &.hero {
        background: url('./images/landing/bg.png') no-repeat center/cover;
    }

    &:after {
        content: '';
        position: absolute;
        inset: 0;
        background: url('./images/landing/bg.png') no-repeat center/cover;
        pointer-events: none;
        z-index:-1;
    }
}

.bg2 {
    color: var(--text);
    background: var(--accent-color);

    &.points {
        &:after {
            content: '';
            position: absolute;
            inset: 0;
            background: url(./images/landing/bg.png) no-repeat center / cover;
            pointer-events: none;
            z-index: -1;
        }
    }
}

.hero {
    h1, h2 {
        z-index: 1;
    }
    .row {
        margin-top: var(--p120);
        z-index: 1;
    }

    .button {
        display: block;
        width: fit-content;
        margin: 0 auto;
        z-index: 1;
    }

    .col {
        border: 1px solid var(--accent-color);
        border-radius: var(--radius);
        padding: var(--p10);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        gap: var(--p20);

        .icon {
            flex: 0 0 var(--p60);
            width: var(--p60);
            height: var(--p60);
            background-color: var(--accent-color);
            background-size: 70%;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: var(--radius);

            &.icon1 {
                background-image: url("images/landing/hero/hero_icon1.svg");
            }

            &.icon2 {
                background-image: url("images/landing/hero/hero_icon2.svg");
            }

            &.icon3 {
                background-image: url("images/landing/hero/hero_icon3.svg");
            }

            &.icon4 {
                background-image: url("images/landing/hero/hero_icon4.svg");
            }
        }

        .txt {
        }
    }

    &:after, &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('images/landing/fb.png') no-repeat left bottom;
        background-size: auto 100%;
        pointer-events: none;
        z-index: 0;
        @media screen and (max-width: 640px){
            background-size: auto 90%;
        }
        @media screen and (max-width: 520px){
            background-size: auto 80%;
        }
        @media screen and (max-width: 440px){
            background-size: auto 70%;
        }
        @media screen and (max-width: 400px){
            background-size: auto 60%;
        }
    }

    &:before {
        left: unset;
        right: 0;
        transform: scaleX(-1);
    }
}

.levels {
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        aspect-ratio: 490/300;
        background: url('images/landing/hlght_top.png') no-repeat center top/contain;
        pointer-events: none;
    }

    .hdr {
        text-align: center;
        width: min(100%, 635px);
        margin: 0 auto;
        line-height: 1;

    }

    .col {
        display: flex;
        flex-flow: column nowrap;
        justify-content: stretch;
        gap: var(--p15);
        overflow: initial;
    }

    .desc {
        flex: 1 1 100%;
        border: 1px solid var(--accent-color);
        border-radius: var(--p30);
        margin-top: var(--p60);
        padding: var(--p40) var(--p20) var(--p20);
        text-align: center;
        display: flex;
        flex-flow: column nowrap;
        gap: var(--p15);

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateY(-70%) translateX(-50%);
            background: url('./images/landing/decor_c.svg') no-repeat center/contain;
            width: min(60%, 150px);
            aspect-ratio: 178/52;
        }

        .sttl {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            background: var(--accent-color);
            color: var(--text);
            padding: var(--p5) var(--p10);
            border-radius: var(--radius);
            font-size: var(--f14);
        }

        .ttl {
            font-family: 'site_hdr', serif;
            font-size: var(--f32);
        }

        .txt {
            line-height: 1.2;
        }
    }

    .img {
        aspect-ratio: 305/407;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;

        .level1 & {
            background-image: url('images/landing/pers/pers1.png');
        }

        .level2 & {
            background-image: url('images/landing/pers/pers2.png');
        }

        .level3 & {
            background-image: url('images/landing/pers/pers3.png');
        }

        .level4 & {
            background-image: url('images/landing/pers/pers4.png');
        }
    }

}

.about {
    .hdr {
        font-size: var(--f55)
    }

    .ttl {
        margin-top: var(--p20);
        font-family: 'site_hdr', serif;
        font-size: var(--f32);
        line-height: 1.2;
    }

    .desc {
        margin-top: var(--p40);
        border: 1px solid var(--accent-color);
        border-radius: var(--form-radius);
        padding: var(--p15);
        display: flex;
        justify-content: stretch;
        flex-flow: column nowrap;
        gap: var(--p15);

        .sttl {
            font-family: 'site_hdr', serif;
            font-size: var(--f32);
        }

        ul {
            list-style: none;
            margin: 0 0 var(--p10);
            padding: 0;
            font-size: var(--f18);

            li {
                background: url('./images/landing/arrow_w.svg') no-repeat left var(--p7);
                background-size: var(--f50);
                padding-left: var(--p66);
                margin-bottom: var(--p10);
            }
        }

        .comment {
            font-style: italic;
            font-size: var(--f18);
        }
    }
}

.target {
    .hdr {
        font-size: var(--f55)
    }

    ul {
        list-style: none;
        margin: var(--p30) 0 0;
        padding: 0;
        font-size: var(--f18);

        li {
            background: url('./images/landing/arrow_b.svg') no-repeat left var(--p13);
            background-size: var(--f50);
            padding: var(--p10) 0 var(--p10) var(--p66);

            .ttl {
                font-family: 'site_hdr', serif;
                font-size: var(--f32);
                line-height: 0.8;
                margin-bottom: var(--p10);
            }

            .txt {
                font-size: var(--f18);
            }
        }

        li + li {
            border-top: 1px solid rgba(0, 4, 37, .2);
        }
    }
}

.task {
    &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        aspect-ratio: 490/300;
        background: url('images/landing/hlght_bottom.png') no-repeat center bottom/contain;
        pointer-events: none;
    }

    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    gap: var(--p20);

    @media (max-width: 768px) {
        flex-flow: column nowrap;
        gap: var(--p10);
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    li {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        gap: var(--p10);
        @media (max-width: 768px) {
            justify-content: stretch;
            width: 100%;
        }

        .txt {
            border: 1px solid var(--accent-color);
            border-radius: var(--radius);
            background: rgba(44, 176, 233, 0.2);
            padding: var(--p10);
            @media (max-width: 768px) {
                flex: 1 1 100%;
            }
        }

        .icon {
            flex: 0 0 var(--p45);
            height: var(--p45);
            border: 1px solid var(--accent-color);
            border-radius: var(--radius);
            background-color: rgba(44, 176, 233, 0.2);
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
        }

        &.task1 .icon {
            background-image: url('images/landing/task/task_icon1.svg');
        }

        &.task2 .icon {
            background-image: url('images/landing/task/task_icon2.svg');
        }

        &.task3 .icon {
            background-image: url('images/landing/task/task_icon3.svg');
        }

        &.task4 .icon {
            background-image: url('images/landing/task/task_icon4.svg');
        }

        &.task5 .icon {
            background-image: url('images/landing/task/task_icon5.svg');
        }

        &.task6 .icon {
            background-image: url('images/landing/task/task_icon6.svg');
        }

        &.task7 .icon {
            background-image: url('images/landing/task/task_icon7.svg');
        }

        &.task8 .icon {
            background-image: url('images/landing/task/task_icon8.svg');
        }
    }

    .left {
        display: flex;
        flex-flow: column nowrap;
        justify-content: stretch;
        align-content: flex-start;
        align-items: flex-start;
        gap: var(--p10);
        @media (max-width: 768px) {
            align-content: stretch;
            align-items: stretch;
            width: 100%;
        }
    }

    .right {
        order: 2;
        display: flex;
        flex-flow: column nowrap;
        justify-content: stretch;
        align-content: flex-end;
        align-items: flex-end;
        gap: var(--p10);
        @media (max-width: 768px) {
            align-content: stretch;
            align-items: stretch;
            width: 100%;
        }

        li {
            flex-flow: row-reverse nowrap;
            @media (max-width: 768px) {
                flex-flow: row nowrap;
            }
        }
    }

    .hdr {
        order: 1;
        font-family: 'site_hdr', serif;
        font-size: var(--f60);
        text-align: center;
        @media (max-width: 768px) {
            order: 0;
        }

        span {
            display: block;
            color: var(--accent-color);
        }
    }
}

.points {
    .row {
        margin-top: var(--p80);
        @media (max-width: 768px) {
            gap: var(--p50);
        }
    }

    .col {
        background: var(--accent-second-color);
        flex: 1 1 100%;
        border: 1px solid var(--text);
        border-radius: var(--p30);
        padding: var(--p30) var(--p15) var(--p15);
        text-align: center;
        display: flex;
        flex-flow: column nowrap;
        gap: var(--p10);
        overflow: initial;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateY(-70%) translateX(-50%);
            background: url('./images/landing/decor_b.svg') no-repeat center/contain;
            width: min(60%, 200px);
            aspect-ratio: 178/52;
            @media (max-width: 768px) {
                width: min(50%, 160px);
            }
        }

        .sttl {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            background: var(--accent-second-color);
            color: var(--text);
            padding: var(--p5) var(--p10);
            border: 1px solid var(--text);
            border-radius: var(--radius);
            font-size: var(--f14);
        }

        .ttl {
            font-family: 'site_hdr', serif;
            font-size: var(--f32);
        }

        .img {
            width: var(--p76);
            height: var(--p76);
            margin: 0 auto;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }

        .progress {
            height: var(--p35);
            border: 1px solid var(--white);
            border-radius: var(--radius);

            span {
                display: block;
                background: var(--white);
                border-radius: var(--radius);
                height: var(--p33);
            }
        }

        &.trust .img {
            background-image: url('images/landing/points/points_trust.svg');
        }

        &.technology .img {
            background-image: url('images/landing/points/points_technology.svg');
        }

        &.secure .img {
            background-image: url('images/landing/points/points_secure.svg');
        }
    }
}

.copyright {
    padding: var(--p5) var(--p20);
    border: 1px solid var(--accent-color);
    border-radius: var(--radius);
    font-size: var(--f14);
    text-align: center;
}

.footer {
    display: flex;
    justify-content: space-between;

    a {
        padding: var(--p5) var(--p20);
        border: 1px solid var(--accent-color);
        border-radius: var(--radius);
        color: var(--accent-color);
    }
}