:root {
    --bg: #020811;
    --bg2: #061827;
    --blue: #72d3ff;
    --blue-light: #b9eaff;
    --text: #e2f2fb;
    --muted: rgba(205, 230, 244, .58);
    --line: rgba(111, 202, 249, .22);
    --line-bright: rgba(133, 217, 255, .75);
    --header-height: 70px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(26, 128, 185, .16),
            transparent 34%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(23, 111, 165, .18),
            transparent 40%
        ),
        linear-gradient(
            165deg,
            #01070d 0%,
            #04111d 45%,
            #020811 100%
        );

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

/* background grid */

.grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background-image:
        linear-gradient(
            rgba(68, 147, 190, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(68, 147, 190, .025) 1px,
            transparent 1px
        );

    background-size: 48px 48px;
}

/* stars */

.stars {
    position: fixed;
    inset: 0;

    z-index: 0;
    pointer-events: none;

    opacity: .40;

    background-image:
        radial-gradient(
            circle,
            rgba(197, 234, 255, .85) 1px,
            transparent 1.3px
        ),
        radial-gradient(
            circle,
            rgba(110, 202, 250, .55) 1px,
            transparent 1.2px
        ),
        radial-gradient(
            circle,
            rgba(255,255,255,.38) .8px,
            transparent 1px
        );

    background-size:
        127px 127px,
        187px 187px,
        233px 233px;

    background-position:
        24px 41px,
        76px 110px,
        110px 17px;
}

/* ambient glow */

.ambient-glow {
    position: fixed;

    width: 900px;
    height: 900px;

    left: 50%;
    top: 120px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        rgba(34, 145, 206, .11);

    filter: blur(150px);

    pointer-events: none;
    z-index: 0;
}

/* background diamonds */

.bg-diamonds {
    position: fixed;
    inset: 0;

    z-index: 0;
    pointer-events: none;

    overflow: hidden;
}

.bg-diamond {
    position: absolute;

    width: var(--size);
    height: calc(var(--size) * .72);

    opacity: var(--opacity);

    animation:
        diamondFloat var(--duration)
        ease-in-out infinite alternate;
}

.bg-diamond svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.bg-diamond path,
.bg-diamond polyline,
.bg-diamond line {
    fill: none;
    stroke: rgba(101, 194, 240, .85);
    stroke-width: 1;
}

.diamond-1 {
    --size: 95px;
    --opacity: .07;
    --duration: 12s;

    left: 8%;
    top: 14%;
}

.diamond-2 {
    --size: 155px;
    --opacity: .055;
    --duration: 17s;

    right: 7%;
    top: 12%;
}

@keyframes diamondFloat {
    from {
        transform:
            translate3d(0, 0, 0)
            rotate(-2deg);
    }

    to {
        transform:
            translate3d(0, -18px, 0)
            rotate(2deg);
    }
}

/* header */

header {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: var(--header-height);

    z-index: 100;

    display: flex;
    align-items: center;

    border-bottom:
        1px solid rgba(102, 190, 234, .12);

    background:
        rgba(2, 10, 18, .72);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.nav {
    width: min(1480px, calc(100% - 70px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.brand {
    font-size: 12px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: rgba(218, 241, 252, .82);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 48px;
}

.nav-links > a,
.nav-drop-button {
    position: relative;

    border: 0;
    background: none;

    color: rgba(211, 235, 247, .64);

    cursor: pointer;

    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .28em;

    transition: color .25s ease;
}

.nav-links > a:hover,
.nav-drop-button:hover {
    color: #dff5ff;
}

.nav-links > a::after,
.nav-drop-button::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -25px;

    height: 1px;

    transform: scaleX(0);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--blue),
            transparent
        );

    transition:
        transform .25s ease;
}

.nav-links > a:hover::after,
.nav-drop-button:hover::after {
    transform: scaleX(1);
}

.region {
    justify-self: end;

    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 9px;
    letter-spacing: .30em;
    text-transform: uppercase;

    color: rgba(207, 232, 244, .50);
}

.region-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #6ed4ff;
    box-shadow: 0 0 9px #6ed4ff;
}

/* dropdown */

.dropdown {
    position: relative;
}

.nav-drop-button {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-drop-button span {
    display: inline-block;

    width: 6px;
    height: 6px;

    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    transform:
        rotate(45deg)
        translateY(-2px);
}

.dropdown-menu {
    position: absolute;

    top: 28px;
    left: 50%;

    width: 220px;

    padding: 10px;

    transform:
        translateX(-50%)
        translateY(-6px);

    border:
        1px solid rgba(107, 200, 247, .17);

    background:
        rgba(2, 12, 21, .96);

    box-shadow:
        0 20px 55px rgba(0,0,0,.38);

    backdrop-filter: blur(18px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}

.dropdown-menu a {
    display: block;

    padding: 12px 14px;

    font-size: 11px;

    color:
        rgba(202, 230, 245, .60);

    letter-spacing: .12em;
    text-transform: uppercase;

    transition:
        background .2s ease,
        color .2s ease;
}

.dropdown-menu a:hover {
    color: #e4f7ff;
    background: rgba(79, 180, 230, .08);
}

/* hero */

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

    min-height: 100vh;

    padding:
        calc(var(--header-height) + 65px)
        25px
        70px;

    display: flex;
    flex-direction: column;

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

    text-align: center;
}

/* emblem */

.emblem {
    width: 250px;
    height: 250px;

    object-fit: contain;

    margin-bottom: 34px;

    animation:
        emblemFloat 6s ease-in-out infinite;

    filter:
        drop-shadow(
            0 0 8px
            rgba(93, 201, 255, .38)
        )
        drop-shadow(
            0 0 35px
            rgba(37, 144, 202, .18)
        );
}

@keyframes emblemFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

/* hero typography */

h1 {
    max-width: 1200px;

    font-size:
        clamp(38px, 5.6vw, 78px);

    font-weight: 200;
    line-height: 1.15;

    letter-spacing: .18em;
    margin-right: -.18em;

    text-transform: uppercase;

    text-shadow:
        0 0 35px
        rgba(93, 194, 245, .14);
}

.hero-line,
.section-line {
    position: relative;

    width: 90px;
    height: 1px;

    margin: 28px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(126, 213, 255, .95),
            transparent
        );
}

.hero-line::after,
.section-line::after {
    content: "";

    position: absolute;

    width: 24px;
    height: 5px;

    left: 50%;
    top: 50%;

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

    background:
        rgba(86, 194, 246, .18);

    filter: blur(5px);
}

.subtitle {
    font-size:
        clamp(15px, 2vw, 21px);

    font-weight: 300;

    letter-spacing: .34em;
    margin-right: -.34em;

    color:
        rgba(214, 238, 250, .77);
}

.hero-description {
    margin-top: 26px;

    max-width: 690px;

    font-size: 14px;
    line-height: 1.8;
    letter-spacing: .06em;

    color:
        rgba(208, 231, 243, .54);

    font-weight: 300;
}

.location {
    margin-top: 28px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size: 10px;

    letter-spacing: .38em;
    margin-right: -.38em;

    color:
        rgba(195, 225, 240, .48);
}

/* scroll down */

.scroll-down {
    position: absolute;

    bottom: 30px;

    width: 36px;
    height: 36px;

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

    opacity: .70;

    animation:
        scrollPulse 2s ease-in-out infinite;
}

.scroll-down::before {
    content: "";

    width: 12px;
    height: 12px;

    border-right: 1px solid #75d5ff;
    border-bottom: 1px solid #75d5ff;

    transform:
        rotate(45deg)
        translate(-2px, -2px);

    box-shadow:
        4px 4px 8px
        rgba(77, 190, 247, .22);
}

@keyframes scrollPulse {
    0%,
    100% {
        transform: translateY(0);
        opacity: .35;
    }

    50% {
        transform: translateY(8px);
        opacity: 1;
    }
}

/* settlements */

.settlements {
    position: relative;
    z-index: 2;

    min-height: 100vh;

    padding:
        90px 35px 130px;

    border-top:
        1px solid rgba(100, 195, 240, .11);

    background:
        linear-gradient(
            180deg,
            rgba(2, 13, 22, .15),
            rgba(1, 7, 13, .52)
        );
}

.section-inner {
    width: min(1200px, 100%);
    margin: 0 auto;
}

.section-title {
    text-align: center;

    font-size:
        clamp(24px, 3vw, 34px);

    font-weight: 250;
    text-transform: uppercase;

    letter-spacing: .35em;
    margin-right: -.35em;
}

.section-intro {
    text-align: center;

    font-size: 13px;

    color:
        rgba(205, 230, 244, .53);

    letter-spacing: .05em;

    margin:
        0 auto 45px;

    max-width: 700px;
}

/* cards */

.settlement-grid {
    display: grid;

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

    gap: 22px;
}

.settlement-card {
    position: relative;

    min-height: 180px;

    border:
        1px solid rgba(106, 204, 251, .25);

    border-radius: 7px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

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

    padding:
        30px 20px 24px;

    background:
        linear-gradient(
            145deg,
            rgba(16, 48, 67, .25),
            rgba(3, 18, 29, .30)
        );

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

.settlement-card::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0;

    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(72, 190, 244, .15),
            transparent 55%
        );

    transition: opacity .3s ease;
}

.settlement-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(116, 215, 255, .48);

    background:
        linear-gradient(
            145deg,
            rgba(18, 62, 86, .33),
            rgba(3, 20, 31, .40)
        );

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.20);
}

.settlement-card:hover::before {
    opacity: 1;
}

.card-number {
    position: absolute;

    top: 14px;
    left: 15px;

    font-size: 11px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    color:
        rgba(211, 236, 249, .58);
}

.card-title {
    position: relative;

    font-size: 18px;
    font-weight: 300;

    letter-spacing: .20em;
    margin-right: -.20em;

    text-transform: uppercase;
}

.card-description {
    position: relative;

    margin-top: 9px;

    font-size: 11px;

    color:
        rgba(191, 222, 237, .47);

    letter-spacing: .04em;
}

.card-glow-line {
    position: relative;

    width: 34px;
    height: 1px;

    margin-top: 18px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #55c8ff,
            transparent
        );

    box-shadow:
        0 0 7px
        rgba(72, 194, 249, .35);
}

/* footer */

footer {
    position: relative;
    z-index: 2;

    padding: 25px;

    border-top:
        1px solid rgba(97, 191, 237, .09);

    text-align: center;

    font-size: 9px;
    letter-spacing: .30em;

    color:
        rgba(188, 217, 232, .28);

    text-transform: uppercase;
}

/* mobile menu button */

.mobile-menu-button {
    display: none;

    width: 32px;
    height: 32px;

    border: 0;
    background: none;

    cursor: pointer;
}

.mobile-menu-button span {
    display: block;

    width: 20px;
    height: 1px;

    margin: 5px auto;

    background:
        rgba(206, 235, 249, .70);
}

/* responsive */

@media (max-width: 1000px) {

    .settlement-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .emblem {
        width: 210px;
        height: 210px;
    }

    .nav-links {
        gap: 25px;
    }
}

@media (max-width: 760px) {

    :root {
        --header-height: 60px;
    }

    .nav {
        width:
            calc(100% - 35px);

        display: flex;

        justify-content:
            space-between;
    }

    .brand {
        font-size: 10px;
    }

    .region {
        display: none;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu-button {
        display: block;
    }

    .hero {
        padding-left: 18px;
        padding-right: 18px;
    }

    .emblem {
        width: 170px;
        height: 170px;

        margin-bottom: 28px;
    }

    h1 {
        font-size:
            clamp(34px, 11vw, 48px);

        letter-spacing: .10em;
        margin-right: -.10em;
    }

    .subtitle {
        font-size: 14px;

        letter-spacing: .18em;
        margin-right: -.18em;

        line-height: 1.6;
    }

    .hero-description {
        font-size: 13px;
        line-height: 1.75;
    }

    .location {
        font-size: 9px;

        letter-spacing: .20em;
        margin-right: -.20em;
    }

    .settlements {
        padding:
            70px 18px 110px;
    }

    .section-title {
        font-size: 23px;

        line-height: 1.5;

        letter-spacing: .20em;
        margin-right: -.20em;
    }

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

    .settlement-card {
        min-height: 160px;
    }

    .bg-diamond {
        opacity: .04;
    }
}

@media (max-height: 800px) and (min-width: 761px) {

    .hero {
        padding-top:
            calc(var(--header-height) + 35px);
    }

    .emblem {
        width: 185px;
        height: 185px;

        margin-bottom: 20px;
    }

    .hero-line {
        margin: 20px auto;
    }

    .hero-description {
        margin-top: 18px;
    }

    .location {
        margin-top: 20px;
    }
}

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.card-icon {
    position: relative;

    width: 88px;
    height: 64px;

    margin-bottom: 16px;

    object-fit: contain;

    opacity: .72;

    filter:
        drop-shadow(
            0 0 7px
            rgba(72, 199, 255, .18)
        );

    transition:
        transform .3s ease,
        opacity .3s ease,
        filter .3s ease;
}

.settlement-card:hover .card-icon {
    transform: translateY(-4px);

    opacity: 1;

    filter:
        drop-shadow(
            0 0 12px
            rgba(72, 199, 255, .45)
        );
}

/* dropdown hover bridge */

.dropdown::after {
    content: "";

    position: absolute;

    left: -30px;
    right: -30px;

    top: 20px;

    height: 20px;
}

/* Footer contact */

.footer-email {
    display: inline-block;
    margin-top: 10px;
    color: rgba(185, 234, 255, .48);
    text-decoration: none;
    letter-spacing: .14em;
    transition: color .2s ease, text-shadow .2s ease;
}

.footer-email:hover {
    color: #72d3ff;
    text-shadow: 0 0 12px rgba(114, 211, 255, .25);
}