/* =========================
   CONTENTS

    1.  VARIABLES
        - Colours

    2.  BASE STYLES
        - Site behaviour 
        - Page Background
        - Typography

    3.  NAVIGATION
        - Header 
        - Links 
        - Buttons 
        - Footer
    
    4.  SECTION FOUNDATIONS
        - Section padding
        - Section Wrap
        - Section Head
        - Utility Classes
    
    5.  REUSABLE LAYOUTS 
        - Splits
        - Grids
        - Stacked grids
        - Text columns
        - Feature strip

    6.  REUSABLE COMPONENTS
        - cards
        - image panel
        - Contact form

    7.  PAGE-SPECIFIC SECTIONS
        - Hero
        - Architecture
    

    8. LARGE SCREEN STYLES
    
    9. TABLET STYLES
    
    10. MOBILE STYLES
========================= */


/* =========================
   1.   VARIABLES
========================= */

:root {
    --navy: #071D28;
    --blue: #545DF7;
    --light-blue: #E6EFF4;
    --purple: #616CAB;
    --cyan: #19D3EB;
    --dark-blue: #2A2E4D;
    --black: #000000;
    --white: #FFFFFF;
    --off-white: #F6F6F6;
    --muted: rgba(230, 239, 244, .72);
    --line: rgba(230, 239, 244, .16);
    --panel: rgba(7, 29, 40, .68);
    --glass: rgba(230, 239, 244, .07);
    --shadow: 0 30px 90px rgba(0, 0, 0, .36);
    --radius: 28px;
    --max: 1180px;
}

/* =========================
   2.   BASE STYLES
        a. Site behaviour
        b. Page background
        d. Typography

========================= */

/*--------------------------
        2a. Site behaviour
--------------------------*/

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Montserrat, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--light-blue);
    background: #02080d;
    overflow-x: hidden;
}

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

/*--------------------------
    2b. Page Background
--------------------------*/

.page {
    position: relative;
    isolation: isolate;
}

.page:before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 18% 8%, rgba(84, 93, 247, .20), transparent 25%),
        radial-gradient(circle at 78% 80%, rgba(25, 211, 235, .14), transparent 30%),
        linear-gradient(180deg, #02070b 0%, #071D28 42%, #03080c 100%);
    z-index: -3;
}


.stars,
.stars:after {
    position: fixed;
    inset: 0;
    content: "";
    z-index: -2;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .9) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(25, 211, 235, .65) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(255, 255, 255, .45) 0 1px, transparent 1.2px);
    background-size: 190px 190px, 280px 280px, 430px 430px;
    background-position: 20px 40px, 120px 160px, 70px 20px;
    opacity: .28;
}

/* .stars:after {
          position: absolute;
          opacity: .45;
          transform: translateY(-20px);
          filter: blur(.2px);
        } */

/*--------------------------
    2c. Typography
--------------------------*/

h1 {
    font-size: clamp(2.4rem, 2.5vw, 3.5rem);
    line-height: 1.10;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 15px;
    letter-spacing: 0;
}

h2 {
    font-size: clamp(34px, 3.5vw, 68px);
    line-height: .98;
    letter-spacing: .02em;
    color: var(--white);
}

p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
    font-size: 15px;
}

.section-head p,
.copy {
    line-height: 1.75;
    font-size: 16px;
    margin: 16px
}


.kicker {
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: .26em;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 20px;
}


/* =========================
   3. NAVIGATION

   a. Header
   b. links
   c. buttons
   d. footer
========================= */

/*--------------------------
    3a. Header
--------------------------*/

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    backdrop-filter: blur(20px);
    background: linear-gradient(180deg, rgba(0, 0, 0, .50), rgba(0, 0, 0, .08));
    border-bottom: 1px solid rgba(230, 239, 244, .08);
}

.nav {
    max-width: var(--max);
    margin: 0 auto;
    height: 74px;
    padding: 0 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.brand img {
    height: 26px;
    width: auto;
    display: block;
}

/*--------------------------
    3b. Links
--------------------------*/

.links {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(230, 239, 244, .72);
}

.links a {
    transition: .2s ease;
}

.links a:hover {
    color: var(--white);
}

.nav-cta {
    padding: 12px 18px;
    border: 1px solid rgba(25, 211, 235, .45);
    border-radius: 999px;
    color: var(--white);
    background: rgba(25, 211, 235, .08);
    box-shadow: 0 0 30px rgba(25, 211, 235, .08);
}


/*--------------------------
    3c. Buttons
--------------------------*/

.actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 38px;
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .17em;
    text-transform: uppercase;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button.primary {
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 18px 40px rgba(84, 93, 247, .28);
}

.button.secondary {
    border: 1px solid rgba(230, 239, 244, .24);
    background: rgba(230, 239, 244, .06);
    color: var(--light-blue);
}

/*--------------------------
    3c. footer
--------------------------*/

footer {
    padding: 40px 24px;
    border-top: 1px solid var(--line);
    color: rgba(230, 239, 244, .55);
}

.foot {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.foot img {
    height: 24px;
    width: auto;
    opacity: .9;
}

.foot-links {
    display: flex;
    gap: 22px;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
}


/* =========================
   4. SECTION FOUNDATIONS

   a. Section padding 
   b. Section Wrap
   c. Section Head
   d. Utility Classes
=========================*/


/*--------------------------
    4a. Section padding 
--------------------------*/

section {
    padding: 92px 24px;
}

.section-first {
    padding-top: 50px;
}

.section-last {
    padding-bottom: 120px;
}

/*--------------------------
    4b. Section layout 
--------------------------*/

.wrap {
    max-width: var(--max);
    margin: 0 auto;
}

/*--------------------------
    4c. Section head 
--------------------------*/

.section-head {
    max-width: 1200px;
    line-height: 1.70;
    margin-bottom: 38px;
}

/*--------------------------
    4d. Utility Classes 
--------------------------*/

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.hidden {
    display: none;
}

.mt-large {
    margin-top: 80px;
}



/* =========================
   5. REUSABLE LAYOUTS

   a. Splits
   b. Horizontal Grids
   c. Stacked Grids
   d. Text columns
   e. Feature strip
   f. Contact form
========================= */

/*--------------------------
    5a. Splits
--------------------------*/

.split-content-40-60 {
    display: grid;
    width: auto;
    grid-template-columns: 40% 60%;
    gap: 80px;
    align-items: start;
}

.split-content-right {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: 80px;
    align-items: start;
}

.split-content-copy h2 {
    max-width: 650px;
    margin-top: 0;
    margin-bottom: 0;
}

.split-content-copy p {
    max-width: 650px;
    line-height: 1.5;
    margin-bottom: 16px;
    margin-left: 0
}


/*--------------------------
    5b. Horizontal grids
--------------------------*/

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

/*--------------------------
    5c. Stacked grids
--------------------------*/

.stacked-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.stacked-grid-2x2 .card {
    min-height: 200px;
}

/*--------------------------
    5d. Text columns
--------------------------*/

.text-columns {
    display: grid;
    gap: 34px;
    padding: 20px 0;
}

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

.text-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.text-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.text-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.text-column {
    padding-right: 28px;
    border-right: 1px solid rgba(230, 239, 244, .13);
}

.text-column:last-child {
    border-right: 0;
    padding-right: 0;
}

.text-column h3 {
    margin: 0 0 20px;
    color: var(--white);
    font-size: 20px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding-bottom: 10px;
    border-bottom: 2px solid #19D3EB;
}

.text-column p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
    max-width: 360px;
}

/*--------------------------
    5e. Feature strip 
--------------------------*/

.feature-strip-section {
    margin-top: 0px;
    padding-bottom: 60px;
}

.feature-strip-inner {
    /*max-width: 1760px; */
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgba(230, 239, 244, .10);
    border-radius: 30px;
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
    /*box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
          backdrop-filter: blur(8px); */
}

.feature-strip-item {
    padding: clamp(1.45rem, 2vw, 2rem) clamp(1.6rem, 2.4vw, 2.4rem);
    min-height: 120px;
    border-right: 1px solid rgba(230, 239, 244, .09);
}

.feature-strip-item:last-child {
    border-right: 0;
}

.feature-strip-item h3 {
    margin: 0 0 .65rem;
    color: #FFFFFF;
    font-size: clamp(1.1rem, 1.35vw, 1.45rem);
    line-height: 1.12;
    letter-spacing: -.035em;
    min-height: 2.6em;
}

.feature-strip-item p {
    margin: 0;
    color: rgba(230, 239, 244, .70);
    font-size: clamp(.9rem, .98vw, 1.02rem);
    line-height: 1.5;
    max-width: 330px;
}


/* =========================
   6. REUSABLE COMPONENTS

   a. Baseline cards
   b. Image panel
   c. Contact form

========================= */

/*--------------------------
    6a. Baseline cards
--------------------------*/

.card {
    border: 1px solid var(--line);
    background: linear-gradient(160deg, rgba(230, 239, 244, .08), rgba(230, 239, 244, .03));
    border-radius: var(--radius);
    padding: 26px;
    min-height: 190px;
    position: relative;
    overflow: hidden;
}

.card:before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(25, 211, 235, .14), transparent 65%);
    opacity: .9;
}

.card h3 {
    font-size: 18px;
    color: var(--white);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

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

.num {
    color: var(--cyan);
    font-size: 13px;
    letter-spacing: .15em;
    font-weight: 800;
    margin-bottom: 20px;
}

/*--------------------------
    6c. Image panel
--------------------------*/

.image-panel {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: rgba(230, 239, 244, .03);
}

.image-panel img {
    display: block;
    width: 100%;
    height: auto;
}

.about-image-panel {
    aspect-ratio: 1024 / 1305;
}

.about-image-panel img {
    height: calc(100% / .85);
    object-fit: cover;
    transform: translateY(-10%);
}

.image-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 13, 0.28);
    pointer-events: none;
}

/*--------------------------
    6c. Contact form
--------------------------*/

.contact {
    border-radius: 38px;
    border: 1px solid rgba(230, 239, 244, .16);
    background: linear-gradient(135deg, rgba(84, 93, 247, .18), rgba(25, 211, 235, .08) 45%, rgba(7, 29, 40, .52));
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    box-shadow: var(--shadow);
}

form {
    display: grid;
    gap: 14px;
}

input,
textarea {
    width: 100%;
    border: 1px solid rgba(230, 239, 244, .18);
    border-radius: 16px;
    padding: 15px 16px;
    background: rgba(0, 0, 0, .24);
    color: var(--white);
    font: inherit;
    outline: none;
}

textarea {
    min-height: 130px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: rgba(230, 239, 244, .46);
}

button {
    border: 0;
    cursor: pointer;
    justify-content: center;
}

/* =========================
   7. PAGE-SPECIFIC SECTIONS
========================= */

/*--------------------------
    7a. HERO SECTION
--------------------------*/

.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    padding: 128px 24px 92px;
    overflow: hidden;
}

.hero-bg {
    display: block;
    position: absolute;
    inset: 0;
    background-image: url(Assets/hero_background.png);
    background-size: cover;
    background-position: center 56%;
    opacity: .60;
    filter: saturate(1.05) contrast(1.08);
    transform: scale(1.03);
    z-index: 0;
}

.hero-inner {
    max-width: var(--max);
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

.hero-copy {
    max-width: 700px;
    padding-top: 28px;
}

.lead {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    font-weight: 500;
    max-width: 650px;
    color: rgba(246, 246, 246, .92);
    letter-spacing: -.025em;
    margin-bottom: 5px;
}

.hero p {
    max-width: 650px;
    color: rgba(230, 239, 244, .68);
}


.hero-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 55px;
}

.hero-icon,
.hero-logo-icon,
.nexus-icon {
    width: clamp(88px, 8vw, 138px);
    height: auto;
    transform: scale(1.10);
    transform-origin: left center;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 18px rgba(84, 93, 247, .18));
}

.hero-wordmark,
.hero-logo-wordmark {
    width: min(90%, 380px);
    height: auto;
}

.partner-logo {
    margin-top: 32px;
}

.partner-logo img {
    display: block;
    width: min(100%, 380px);
    height: auto;
}


/*--------------------------
    7a. ARCHITECTURE SECTION
--------------------------*/

.architecture {
    border: 1px solid rgba(230, 239, 244, .16);
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(230, 239, 244, .07), rgba(0, 0, 0, .18));
    padding: 28px;
    box-shadow: var(--shadow);
}

.arch-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: 18px;
    align-items: stretch;
}

.arch-col {
    display: grid;
    gap: 14px;
}

.arch-label {
    color: var(--cyan);
    letter-spacing: .2em;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 6px;
}

.pill {
    border: 1px solid rgba(230, 239, 244, .16);
    background: rgba(0, 0, 0, .25);
    border-radius: 16px;
    padding: 15px 16px;
    color: var(--light-blue);
    font-weight: 600;
}

.runtime {
    border: 1px solid rgba(84, 93, 247, .45);
    background: linear-gradient(180deg, rgba(84, 93, 247, .18), rgba(7, 29, 40, .58));
    border-radius: 24px;
    padding: 20px;
    display: grid;
    align-content: center;
    gap: 14px;
}

.runtime-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}

.runtime-head img {
    width: 54px;
}

.runtime-title {
    color: var(--white);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.layer {
    border: 1px solid rgba(25, 211, 235, .22);
    background: rgba(230, 239, 244, .07);
    border-radius: 16px;
    padding: 16px;
}

.layer strong {
    display: block;
    color: var(--white);
    margin-bottom: 4px;
}

.layer span {
    color: var(--muted);
    font-size: 13px;
}

.band {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    background: rgba(0, 0, 0, .18);
}

.band div {
    padding: 22px;
    border-right: 1px solid var(--line);
}

.band div:last-child {
    border-right: 0;
}

.band strong {
    display: block;
    color: var(--white);
    margin-bottom: 8px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.band span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}










/* =========================
   11. LARGE SCREEN STYLES
========================= */

@media (min-width: 1800px) {
    :root {
        --max: 1440px;
    }

    section {
        padding: 118px 32px;
    }

    .section-first {
        padding-top: 150px;
    }

    .section-last {
        padding-bottom: 150px;
    }

    h1 {
        font-size: clamp(2.1rem, 2.5vw, 5.4rem);
    }

    h2 {
        font-size: clamp(48px, 3.8vw, 82px);
    }

    p {
        font-size: 16px;
    }

    .section-head {
        max-width: fit-content
    }

    .section-head p,
    .copy {
        font-size: 17px;
    }

    .hero-copy {
        max-width: 1000px;
    }

    .lead {
        max-width: 800px;
        font-size: clamp(1.05rem, 1.8vw, 1.5rem)
    }

    .hero-inner {
        max-width: 1440px;
    }

    .card {
        padding: 32px;
    }

    .text-columns {
        gap: 46px;
    }

    .feature-strip-item {
        min-height: 145px;
    }
}



/* 
@media (min-width: 2200px) {

    .hero-inner {
        max-width: 1600px;
    }

    .hero-copy {
        max-width: 800px;
    }
}


@media (max-width: 980px) {
    .platform-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .platform-features {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 980px) {

    .platform-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .platform-features {
        grid-template-columns: 1fr;
    }

}

*/

/* =========================
   12. TABLET STYLES
========================= */






/* =========================
   13. MOBILE STYLES
========================= */

@media (max-width: 980px) {

    .hero-inner,
    .about,
    .contact {
        grid-template-columns: 1fr;
    }

    .grid-4,
    .grid-5,
    .feature-strip-inner,
    .text-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split-content-40-60 {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .split-content-right {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .hero-copy {
        max-width: 100%;
    }

    .feature-strip-item {
        border-right: 0;
        border-bottom: 1px solid rgba(230, 239, 244, .09);
    }

    .feature-strip-item:last-child {
        border-bottom: 0;
    }

    .text-column {
        border-right: 0;
        border-bottom: 1px solid rgba(230, 239, 244, .13);
        padding-right: 0;
        padding-bottom: 28px;
    }

    .text-column:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .grid-3,
    .arch-grid {
        grid-template-columns: 1fr;
    }

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

    .links {
        gap: 14px;
    }

    .links a:not(.nav-cta) {
        display: none;
    }

    .nav-cta {
        padding: 10px 14px;
    }

    .earth {
        bottom: -18vw;
    }

    .system-card {
        max-width: 620px;
    }
}

@media (max-width: 620px) {
    .brand img {
        height: 28px;
    }

    .nav {
        height: 68px;
        padding: 0 18px;
    }

    .hero {
        padding-top: 100px;
    }

    .grid-4,
    .grid-3,
    .grid-5,
    .band,
    .feature-strip-inner,
    .text-columns,
    .stacked-grid-2x2 {
        grid-template-columns: 1fr;
    }

    .contact {
        padding: 24px;
    }

    .architecture {
        padding: 18px;
    }

    h1 {
        font-size: 42px;
    }

    section {
        padding: 70px 18px;
    }

    .card {
        min-height: auto;
    }
}