:root {
    --ink: #ffffff;
    --muted: #a5b1a9;
    --bg: #1c1f00;
    --green: #d2ed71;
    --red: rgb(255, 25, 0);
    --line: rgba(237, 245, 233, .16)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Manrope, system-ui, sans-serif;
    overflow-x: hidden
}

label {
    display: grid;
    gap: 4px;
    font: normal, bold;
    letter-spacing: .12em;
    text-transform: uppercase;
}

label.wide {
    grid-column: 1 / -1;

}

input,
textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #55564f;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    padding: 8px 0 11px;
    font: 11px/1.3 "Courier New";
    font-size: 16px;
    line-height: 1.4;
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: #696a63;
}

button {
    border: 0;
    background: #07110f;
    color: #ffffff;
    padding: 16px 21px;
    cursor: pointer;
    font: normal;
    text-transform: uppercase;
    letter-spacing: .1em;
}

button:hover {
    background: #e1f69a;
    color: #000000;
}

.contact {
    border: 1px solid var(--line);
    padding: clamp(28px, 6vw, 76px);
    display: grid;

    grid-template-columns: .85fr 1.15fr;
    gap: 60px;
    margin-bottom: 80px;
}

.contact h2 {
    margin: 18px 0;
    font-size: clamp(42px, 5vw, 68px);
    line-height: .95;
    font-weight: 400;
    letter-spacing: -.07em;
}

.contact-copy p {

    font-size: 14px;
    line-height: 1.7;
    max-width: 310px;
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at 72% 18%, rgba(85, 142, 85, .2), transparent 31%), radial-gradient(ellipse at 5% 62%, rgba(39, 91, 77, .16), transparent 32%), linear-gradient(135deg, #07110f 0%, #0a1713 58%, #101b12 100%)
}

.wrap {
    width: min(1280px, calc(100% - 56px));
    margin: auto
}

.nav {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line)
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .16em
}

.mark {
    height: 26px;
    width: 26px;
    border: 1px solid var(--green);
    border-radius: 50%;
    position: relative
}

.mark:before,
.mark:after {
    content: "";
    position: absolute;
    background: var(--green);
    height: 1px;
    width: 16px;
    top: 12px;
    left: 4px;
    transform: rotate(-48deg)
}

.mark:after {
    transform: rotate(48deg)
}

.nav-right {
    font: 11px 'DM Mono', monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted)
}

.nav-right span {
    color: var(--green);
    margin-right: 9px
}

.hero {
    min-height: 690px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 30px;
    padding: 72px 0 80px;
    position: relative
}

.eyebrow {
    font: 11px 'DM Mono', monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--green);
    display: flex;
    gap: 11px;
    align-items: center
}

.eyebrow:before {
    content: "";
    width: 25px;
    height: 1px;
    background: var(--green)
}

h1 {
    font-size: clamp(58px, 8vw, 108px);
    line-height: .96;
    letter-spacing: -.075em;
    margin: 29px 0 28px;
    max-width: 740px;
    font-weight: 600
}

h1 em {
    font-style: normal;
    color: var(--green)
}

h2 em {
    font-style: normal;
    color: var(--green)
}

.bits {
    font-style: normal;
    color: var(--red)
}

.intro {
    font-size: 18px;
    line-height: 1.7;
    color: #c0ccc2;
    max-width: 540px;
    margin: 0
}

.small {
    font: 11px 'DM Mono', monospace;
    color: var(--muted);
    margin-top: 34px;
    letter-spacing: .07em
}

.visual {
    height: 480px;
    position: relative;
    display: grid;
    place-items: center
}

.orb {
    width: min(390px, 75vw);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(197, 242, 119, .28);
    position: relative;
    background: radial-gradient(circle at 46% 52%, rgba(197, 242, 119, .2), rgba(70, 112, 73, .08) 40%, transparent 68%);
    box-shadow: 0 0 100px rgba(163, 225, 105, .08), inset 0 0 60px rgba(195, 237, 131, .08);
    animation: breathe 7s ease-in-out infinite
}

.orb:before,
.orb:after {
    content: "";
    position: absolute;
    inset: 11%;
    border: 1px solid rgba(197, 242, 119, .21);
    border-radius: 50%;
    transform: rotate(28deg) scaleX(.47)
}

.orb:after {
    transform: rotate(-39deg) scaleX(.47)
}

.core {
    position: absolute;
    width: 30%;
    aspect-ratio: 1;
    left: 35%;
    top: 35%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f0ffc8, #c5f277 34%, #5e8648 78%);
    box-shadow: 0 0 70px rgba(197, 242, 119, .42)
}

.dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 14px var(--green)
}

.d1 {
    top: 13%;
    left: 28%
}

.d2 {
    bottom: 17%;
    right: 19%
}

.d3 {
    top: 47%;
    right: 2%
}

.orbit-label {
    position: absolute;
    font: 10px 'DM Mono', monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #b5c6b0
}

.l1 {
    top: 13%;
    right: 3%
}

.l2 {
    bottom: 15%;
    left: 1%
}

.index {
    position: absolute;
    bottom: 8%;
    right: 0;
    font: 10px 'DM Mono', monospace;
    color: var(--muted)
}

@keyframes breathe {
    50% {
        transform: scale(1.04);
        filter: brightness(1.14)
    }
}

.ticker {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    color: #c2cec3;
    font: 10px 'DM Mono', monospace;
    letter-spacing: .13em;
    text-transform: uppercase
}

.ticker b {
    color: var(--green);
    font-weight: 400
}

section {
    padding: 118px 0
}

.section-head {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 40px;
    align-items: start
}

.section-label {
    font: 11px "Courier New";
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: .16em;
    padding-top: 10px
}

.section-head h2 {
    font-size: clamp(36px, 5vw, 62px);
    line-height: 1.08;
    letter-spacing: -.06em;
    font-weight: 500;
    margin: 0;
    max-width: 760px
}

.section-head h2 span {
    color: var(--muted)
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 78px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.card {
    padding: 30px 28px 34px 0;
    min-height: 212px
}

.card+.card {
    border-left: 1px solid var(--line);
    padding-left: 28px
}

.num {
    font: 10px 'DM Mono', monospace;
    color: var(--green);
    letter-spacing: .12em
}

.card h3 {
    font-size: 19px;
    font-weight: 600;
    margin: 38px 0 12px;
    letter-spacing: -.03em
}

.card p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    max-width: 300px;
    margin: 0
}

.callout {
    padding: 72px;
    background: linear-gradient(115deg, rgba(224, 242, 119, 0.12), rgba(224, 242, 119, 0.025) 48%, rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(199, 242, 119, 0.22);
    position: relative;
    overflow: hidden
}

.callout:after {
    content: "X";
    position: absolute;
    right: 30px;
    top: -85px;
    font-size: 360px;
    font-weight: 800;
    line-height: 1;
    color: rgba(197, 242, 119, .045);
    letter-spacing: -.1em;
    pointer-events: none
}

input:focus,
textarea:focus {
    border-color: var(--green);
}

.callout .eyebrow {
    margin-bottom: 28px
}

.callout h2 {
    font-size: clamp(35px, 5vw, 64px);
    line-height: 1.06;
    letter-spacing: -.065em;
    font-weight: 500;
    max-width: 780px;
    margin: 0 0 26px;
    position: relative
}

.callout p {
    max-width: 590px;
    color: #bfcbc0;
    line-height: 1.75;
    font-size: 15px;
    position: relative
}

.status {
    color: var(--muted);
    font: 11px/1.3 "Courier New", monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.status::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--lime);
    border-radius: 50%;
    margin: 0 10px 1px 0;
    box-shadow: 0 0 12px #d2ed7180;
}

footer {
    border-top: 1px solid var(--line);
    padding: 25px 0 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 10px 'DM Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted)
}

footer strong {
    color: var(--ink);
    font-weight: 500
}

.foot-right {
    color: var(--green)
}

@media(max-width:760px) {
    .wrap {
        width: min(100% - 38px, 600px)
    }

    .nav {
        height: 70px
    }

    .hero {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 72px 0 45px;
        min-height: auto;
        gap: 0
    }

    .hero-copy {
        position: relative;
        z-index: 1
    }

    h1 {
        font-size: clamp(55px, 15vw, 88px)
    }

    .intro {
        font-size: 16px
    }

    .visual {
        height: 340px;
        width: 100%;
        margin-top: 10px
    }

    .orb {
        width: 280px
    }

    .l1 {
        right: 3%
    }

    .ticker {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 14px 27px;
        font-size: 9px
    }

    .ticker span {
        white-space: nowrap
    }

    section {
        padding: 82px 0
    }

    .section-head {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .cards {
        grid-template-columns: 1fr;
        margin-top: 48px
    }

    .card {
        min-height: auto;
        padding: 25px 0 28px
    }

    .card+.card {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0
    }

    .card h3 {
        margin: 24px 0 9px
    }

    .callout {
        padding: 39px 28px
    }

    .callout:after {
        font-size: 230px;
        right: 8px;
        top: -42px
    }

    footer {
        gap: 16px;
        align-items: flex-start;
        flex-direction: column
    }
}

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

    *,
    *:before,
    *:after {
        animation: none !important;
        scroll-behavior: auto !important
    }
}