/* ============================================================
   ERAYA INTELLIGENCE
   LAYERS SYSTEM
   ============================================================ */

:root {

    --navy: #071a3d;
    --navy-deep: #06152f;

    --ink: #0b1424;
    --text: #26364d;

    --muted: #718096;
    --light-muted: #9ba6b4;

    --line: #d6d9dc;
    --line-dark: #b9c0c8;

    --paper: #f4f2ec;
    --white: #ffffff;

    --blue-soft: #edf2f8;

    --max-width: 1240px;

}


/* ============================================================
   RESET
   ============================================================ */

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


html {
    scroll-behavior: smooth;
}


body {

    background: var(--paper);

    color: var(--ink);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

}


img {
    display: block;
    max-width: 100%;
}


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


button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* ============================================================
   SYSTEM BAR
   ============================================================ */

.system-bar {

    height: 30px;

    background: var(--navy);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0
        max(24px, calc((100% - 1240px) / 2));

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;

}


.system-left,
.system-right {

    display: flex;

    align-items: center;

    gap: 10px;

}


.system-right span {
    opacity: 0.45;
}


.system-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #5e987d;

}


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

.site-header {

    height: 88px;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0
        max(32px, calc((100% - 1240px) / 2));

    background: rgba(244,242,236,0.98);

}


.brand {
    width: 190px;
    height: 70px;

    display: flex;
    align-items: center;
}

.brand img {
    width: 175px;
    height: 64px;

    max-width: 175px;
    max-height: 64px;

    object-fit: contain;
    object-position: left center;
}


.main-nav {

    display: flex;

    align-items: center;

    gap: 32px;

    height: 100%;

}


.main-nav a {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    font-size: 11px;

    font-weight: 600;

    color: #182538;

}


.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 20px;

    height: 2px;

    background: var(--navy);

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 180ms ease;

}


.main-nav a:hover::after,
.main-nav a.active::after {

    transform: scaleX(1);

}


.main-nav a.active {
    color: var(--navy);
}


/* ============================================================
   GENERAL
   ============================================================ */

.section {

    width: min(
        calc(100% - 64px),
        var(--max-width)
    );

    margin: 0 auto;

}


.eyebrow,
.hero-kicker,
.section-number,
.layer-title span,
.principle-label,
.cross-domain-header > div > span {

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--navy);

}


.section-number {

    color: #8190a3;

}


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

.hero {

    min-height: 720px;

    padding-top: 82px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(500px, 1fr);

    gap: 56px;

    align-items: center;

}


.hero-content {

    padding-bottom: 40px;

}


.hero-kicker {

    margin-top: 46px;

    margin-bottom: 30px;

}


.hero h1 {

    font-size:
        clamp(68px, 7.5vw, 116px);

    line-height: 0.87;

    letter-spacing: -5px;

    font-weight: 800;

    max-width: 650px;

}


.hero h1 span {

    color: #7a8591;

}


.hero-description {

    margin-top: 46px;

    max-width: 620px;

    color: var(--text);

    font-size: 16px;

    line-height: 1.85;

}


/* ============================================================
   LAYER VISUAL
   ============================================================ */

.layer-visual {

    height: 620px;

    border: 1px solid var(--line-dark);

    position: relative;

    overflow: hidden;

    background:

        linear-gradient(
            rgba(255,255,255,0.2) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.2) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

}


.visual-label {

    height: 40px;

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

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 18px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;

    color: #5d6c80;

}


.stack {

    position: absolute;

    inset: 40px 0 0;

}


.stack-line {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 50%;

    width: 1px;

    background: #bdc6cf;

}


.stack-core {

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 190px;

    height: 190px;

    border-radius: 50%;

    background: var(--navy);

    color: white;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 8px;

    z-index: 5;

    box-shadow:
        0 0 0 12px rgba(7,26,61,0.04),
        0 0 0 28px rgba(7,26,61,0.025);

}


.stack-core small {

    font-size: 8px;

    letter-spacing: 2px;

    color: #9cacc2;

    font-weight: 700;

}


.stack-core strong {

    font-size: 19px;

    letter-spacing: 0.5px;

}


.stack-node {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    min-width: 190px;

    padding: 13px 18px;

    background: rgba(244,242,236,0.92);

    border: 1px solid #bac3cd;

    text-align: center;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.4px;

    z-index: 4;

}


.stack-node span {

    display: block;

    font-size: 8px;

    color: #8a98aa;

    margin-bottom: 3px;

}


.node-1 { top: 40px; }
.node-2 { top: 105px; }
.node-3 { top: 170px; }
.node-4 { top: 235px; }

.node-5 { bottom: 235px; }
.node-6 { bottom: 170px; }
.node-7 { bottom: 105px; }
.node-8 { bottom: 40px; }


.node-9 {

    left: auto;

    right: 24px;

    top: 50%;

    transform: translateY(-50%);

    min-width: 120px;

    background: var(--navy);

    color: white;

    border-color: var(--navy);

}


/* ============================================================
   INTRODUCTION
   ============================================================ */

.introduction {

    padding:
        150px 0
        130px;

    border-top: 1px solid var(--line);

}


.intro-grid {

    display: grid;

    grid-template-columns:
        1.15fr
        0.85fr;

    gap: 100px;

    margin-top: 40px;

}


.intro-grid h2 {

    font-size:
        clamp(52px, 6vw, 82px);

    line-height: 0.94;

    letter-spacing: -4px;

    max-width: 700px;

}


.intro-grid h2 span {

    color: #7a8591;

}


.intro-copy {

    padding-top: 10px;

}


.intro-copy p {

    margin-bottom: 28px;

    font-size: 15px;

    line-height: 1.9;

    color: var(--text);

}


/* ============================================================
   LAYERS
   ============================================================ */

.layer-section {

    min-height: 430px;

    padding:
        85px 0;

    border-top: 1px solid var(--line);

    display: grid;

    grid-template-columns: 120px 1fr;

    gap: 40px;

}


.layer-index {

    font-size: 12px;

    font-weight: 700;

    color: #8b97a5;

    letter-spacing: 1px;

    padding-top: 6px;

}


.layer-content {

    display: grid;

    grid-template-columns:
        0.8fr
        1fr;

    gap: 80px;

}


.layer-title h2 {

    font-size:
        clamp(50px, 5vw, 78px);

    line-height: 0.92;

    letter-spacing: -3px;

    margin-top: 22px;

}


.layer-description {

    padding-top: 26px;

}


.layer-description p {

    font-size: 15px;

    line-height: 1.9;

    color: var(--text);

    margin-bottom: 24px;

}


.layer-tags {

    grid-column: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    align-self: end;

}


.layer-tags span {

    border: 1px solid #c3cad2;

    padding: 7px 11px;

    font-size: 8px;

    letter-spacing: 1.2px;

    font-weight: 700;

    text-transform: uppercase;

    color: #536277;

}


.highlight-layer {

    background: var(--navy);

    color: white;

    width: 100%;

    padding-left:
        max(32px, calc((100vw - 1240px) / 2));

    padding-right:
        max(32px, calc((100vw - 1240px) / 2));

}


.highlight-layer .layer-index,
.highlight-layer .layer-title span {

    color: #94a6c2;

}


.highlight-layer .layer-description p {

    color: #d3dbe7;

}


.highlight-layer .layer-tags span {

    color: #d9e1ec;

    border-color: #405273;

}


/* ============================================================
   CROSS DOMAIN
   ============================================================ */

.cross-domain {

    padding:
        150px 0;

}


.cross-domain-header {

    display: grid;

    grid-template-columns:
        1fr
        0.7fr;

    gap: 100px;

    margin-top: 42px;

}


.cross-domain-header h2 {

    font-size:
        clamp(55px, 6vw, 86px);

    line-height: 0.92;

    letter-spacing: -4px;

    margin-top: 22px;

}


.cross-domain-header h2 em {

    color: #7b8795;

    font-style: normal;

}


.cross-domain-header > p {

    padding-top: 18px;

    color: var(--text);

    font-size: 15px;

    line-height: 1.9;

}


.domain-matrix {

    margin-top: 90px;

    display: grid;

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

    border-top: 1px solid var(--line);

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

}


.domain-column {

    min-height: 300px;

    padding: 38px 34px;

    border-right: 1px solid var(--line);

}


.domain-column:last-child {

    border-right: none;

}


.domain-column small {

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.7px;

    color: #7c8999;

}


.domain-column h3 {

    font-size: 34px;

    letter-spacing: -1.5px;

    margin-top: 28px;

}


.domain-column p {

    color: var(--navy);

    font-weight: 700;

    font-size: 13px;

    margin-top: 8px;

}


.domain-column div {

    margin-top: 30px;

    color: var(--text);

    font-size: 13px;

    line-height: 1.8;

}


/* ============================================================
   PRINCIPLE
   ============================================================ */

.principle {

    padding:
        150px 0;

    border-top: 1px solid var(--line);

    display: grid;

    grid-template-columns:
        120px
        1fr;

    gap: 40px;

}


.principle-content {

    max-width: 900px;

}


.principle-content h2 {

    margin-top: 28px;

    font-size:
        clamp(55px, 6vw, 88px);

    line-height: 0.92;

    letter-spacing: -4px;

}


.principle-content p {

    max-width: 720px;

    margin-top: 42px;

    font-size: 16px;

    line-height: 1.9;

    color: var(--text);

}


/* ============================================================
   CLOSING
   ============================================================ */

.closing {

    background: var(--navy);

    color: white;

    padding:
        110px
        max(32px, calc((100% - 1240px) / 2));

}


.closing-line {

    height: 1px;

    background: #344767;

    margin-bottom: 50px;

}


.closing p {

    color: #9caec8;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}


.closing h2 {

    font-size:
        clamp(42px, 5vw, 72px);

    letter-spacing: -3px;

    margin-top: 18px;

}


.closing-meta {

    margin-top: 60px;

    display: flex;

    justify-content: space-between;

    color: #9caec8;

    font-size: 10px;

    letter-spacing: 1px;

    text-transform: uppercase;

}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {

    background: #06152f;

    color: white;

    padding:
        75px
        max(32px, calc((100% - 1240px) / 2))
        30px;

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1fr;

    gap: 60px;

}


.footer-brand img {
    width: 112px;
    height: auto;
    object-fit: contain;
    margin-bottom: 24px;
    filter: none;
    background: transparent;
}


.footer-brand p {

    max-width: 300px;

    color: #9caec8;

    font-size: 12px;

    line-height: 1.8;

}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.footer-column span {

    font-size: 8px;

    letter-spacing: 1.8px;

    font-weight: 800;

    color: #7386a4;

    margin-bottom: 8px;

}


.footer-column a {

    color: #d4dce8;

    font-size: 11px;

    transition: color 180ms ease;

}


.footer-column a:hover {

    color: white;

}


.footer-bottom {

    grid-column: 1 / -1;

    border-top: 1px solid #253653;

    padding-top: 22px;

    margin-top: 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #7587a2;

    font-size: 9px;

    letter-spacing: 0.5px;

}


.footer-bottom a {

    color: #9caec8;

}


/* ============================================================
   REVEAL
   ============================================================ */

.layer-section,
.domain-column,
.principle-content {

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 600ms ease,
        transform 600ms ease;

}


.layer-section.visible,
.domain-column.visible,
.principle-content.visible {

    opacity: 1;

    transform: translateY(0);

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {

    .hero {

        grid-template-columns: 1fr;

    }


    .layer-visual {

        height: 560px;

    }


    .intro-grid,
    .cross-domain-header {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .layer-content {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .layer-tags {

        grid-column: auto;

    }


    .domain-matrix {

        grid-template-columns: 1fr;

    }


    .domain-column {

        border-right: none;

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

    }


    .domain-column:last-child {

        border-bottom: none;

    }


    .site-footer {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 700px) {

    .system-right {

        display: none;

    }


    .site-header {

        height: 76px;

        padding:
            0 20px;

    }


    .brand {

        width: 100px;

    }


    .brand img {

        width: 90px;

    }


    .main-nav {

        gap: 13px;

    }


    .main-nav a {

        font-size: 9px;

    }


    .main-nav a:nth-child(2),
    .main-nav a:nth-child(3),
    .main-nav a:nth-child(4),
    .main-nav a:nth-child(6) {

        display: none;

    }


    .section {

        width: min(
            calc(100% - 40px),
            var(--max-width)
        );

    }


    .hero {

        padding-top: 60px;

        min-height: auto;

    }


    .hero h1 {

        font-size: 62px;

        letter-spacing: -3px;

    }


    .hero-description {

        font-size: 14px;

    }


    .layer-visual {

        height: 500px;

    }


    .stack-node {

        min-width: 140px;

        font-size: 8px;

    }


    .stack-core {

        width: 150px;

        height: 150px;

    }


    .stack-core strong {

        font-size: 15px;

    }


    .node-9 {

        right: 10px;

        min-width: 90px;

    }


    .layer-section {

        grid-template-columns: 45px 1fr;

        gap: 15px;

        padding: 65px 0;

    }


    .layer-title h2 {

        font-size: 48px;

    }


    .cross-domain {

        padding: 90px 0;

    }


    .cross-domain-header h2 {

        font-size: 50px;

    }


    .principle {

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 90px 0;

    }


    .principle-content h2 {

        font-size: 52px;

    }


    .closing {

        padding:
            80px 20px;

    }


    .closing-meta {

        flex-direction: column;

        gap: 12px;

    }


    .site-footer {

        grid-template-columns: 1fr;

        padding-left: 20px;

        padding-right: 20px;

    }


    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

}