/* ============================================================
 *  MATAPPLY
 *  MAIN STYLESHEET
 *  ============================================================ */


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

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background:
    radial-gradient(
        circle at 50% 0%,
        rgba(168, 117, 78, 0.08),
                    transparent 40%
    ),
    #07090d;

    color: #e9e5df;

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

    overflow-x: hidden;
}


/* ============================================================
 *  BACKGROUND NETWORK
 *  ============================================================ */

#network {
position: fixed;

inset: 0;

width: 100%;
height: 100%;

pointer-events: none;

z-index: 0;

opacity: 0.55;
}


/* ============================================================
 *  PAGE CONTENT
 *  ============================================================ */

body > *:not(#network) {
    position: relative;
    z-index: 1;
}


/* ============================================================
 *  COMMON CONTAINER
 *  ============================================================ */

.container,
.engine-container,
.problem-engine-inner {
    width: min(
        1180px,
        calc(100% - 40px)
    );

    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
 *  TYPOGRAPHY
 *  ============================================================ */

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    font-weight: 500;
    letter-spacing: -0.03em;
}

p {
    color: #989da5;
    line-height: 1.7;
}


/* ============================================================
 *  MATAPPLY LABELS
 *  ============================================================ */

.section-label,
.engine-label,
.section-eyebrow,
.missing-eyebrow,
.v7-eyebrow,
.path-label {
    font-size: 10px;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color: #a8754e;
}


/* ============================================================
 *  ENGINE SECTION
 *  ============================================================ */

.engine-section {
    position: relative;

    width: 100%;

    padding:
    110px 0
    80px;

    z-index: 2;
}


.engine-section h1 {
    max-width: 850px;

    margin:
    20px auto
    20px;

    text-align: center;

    font-size:
    clamp(
        42px,
        7vw,
        82px
    );

    line-height: 0.98;
}


.engine-section h1 span,
.engine-section h2 span {
    color: #a8754e;
}


.engine-section > p {
    max-width: 650px;

    margin:
    0 auto 50px;

    text-align: center;

    font-size: 16px;
}


/* ============================================================
 *  MATAPPLY ENGINE
 *  ============================================================ */

#engine {

position: relative;

width: 100%;

min-height: 650px;

margin:
0 auto;

padding:
70px 30px;

border:
1px solid
rgba(
    255,
     255,
     255,
     0.07
);

background:
rgba(
    10,
     12,
     17,
     0.72
);

backdrop-filter:
blur(14px);

overflow: hidden;
}


/* ============================================================
 *  ENGINE GLOW
 *  ============================================================ */

#engine::before {

content: "";

position: absolute;

width: 500px;
height: 500px;

left: 50%;
top: 50%;

transform:
translate(
    calc(-50% + var(--mx, 0px)),
          calc(-50% + var(--my, 0px))
);

border-radius: 50%;

background:
radial-gradient(
    circle,
    rgba(
        168,
         117,
         78,
         0.10
    ),
    transparent 70%
);

pointer-events: none;
}


/* ============================================================
 *  DOMAIN GRID
 *  ============================================================ */

.domains {

    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
    repeat(
        2,
        minmax(
            180px,
            260px
        )
    );

    justify-content: center;

    gap: 28px;

    margin:
    0 auto 70px;

    max-width: 620px;
}


/* ============================================================
 *  DOMAIN CARD
 *  ============================================================ */

.domain {

    position: relative;

    padding:
    28px 26px;

    min-height: 125px;

    border:
    1px solid
    rgba(
        255,
         255,
         255,
         0.08
    );

    background:
    rgba(
        255,
         255,
         255,
         0.025
    );

    cursor: pointer;

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


.domain:hover,
.domain.hovering {

    transform:
    translateY(-5px);

    border-color:
    rgba(
        168,
         117,
         78,
         0.45
    );

    background:
    rgba(
        168,
         117,
         78,
         0.06
    );
}


.domain.selected {

    transform:
    translateY(-4px);

    border-color:
    #a8754e;

    background:
    rgba(
        168,
         117,
         78,
         0.10
    );

    box-shadow:
    0 0 35px
    rgba(
        168,
         117,
         78,
         0.10
    );
}


.domain small {

    display: block;

    margin-bottom: 12px;

    font-size: 9px;

    letter-spacing: 0.2em;

    color: #6d727b;

    text-transform: uppercase;
}


.domain strong {

    display: block;

    font-size: 20px;

    font-weight: 500;

    color: #e9e5df;
}


/* ============================================================
 *  VALUE CORE
 *  ============================================================ */

#valueCore,
.value-core {

    position: relative;

    z-index: 4;

    display: flex;

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

    width: 150px;
    height: 150px;

    margin:
    0 auto;

    border-radius: 50%;

    border:
    1px solid
    rgba(
        168,
         117,
         78,
         0.25
    );

    background:
    radial-gradient(
        circle,
        rgba(
            168,
             117,
             78,
             0.15
        ),
        rgba(
            10,
             12,
             17,
             0.95
        )
    );

    text-align: center;

    transition:
    transform 0.5s ease,
    box-shadow 0.5s ease,
    border-color 0.5s ease;
}


#valueCore.active {

border-color:
#a8754e;

box-shadow:
0 0 60px
rgba(
    168,
     117,
     78,
     0.18
);

transform:
scale(1.05);
}


#valueCore::after {

content:
"CREATE VALUE";

display: block;

font-size: 11px;

letter-spacing: 0.18em;

color: #a8754e;
}


/* ============================================================
 *  CONNECTION SVG
 *  ============================================================ */

.problem-connections {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    overflow: visible;
}


.problem-connections line {

    stroke:
    rgba(
        168,
         117,
         78,
         0.42
    );

    stroke-width: 1;

    stroke-dasharray:
    5 8;

    animation:
    connectionFlow
    4s linear infinite;
}


@keyframes connectionFlow {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -50;
    }
}


/* ============================================================
 *  PROBLEM ENGINE
 *  ============================================================ */

.problem-engine {

    position: relative;

    z-index: 3;

    padding:
    100px 0
    80px;

    border-top:
    1px solid
    rgba(
        255,
         255,
         255,
         0.04
    );
}


.problem-engine-inner {
    max-width: 900px;
}


.problem-engine h2 {

    margin:
    14px 0;

    font-size:
    clamp(
        34px,
        5vw,
        58px
    );
}


.problem-engine h2 span {
    color: #a8754e;
}


.problem-intro {

    max-width: 620px;

    margin-bottom: 35px;

    font-size: 16px;
}


/* ============================================================
 *  PROBLEM INPUT
 *  ============================================================ */

.problem-input-wrap {

    display: flex;

    flex-direction: column;

    gap: 14px;
}


#problemInput {

width: 100%;

min-height: 140px;

padding:
20px;

resize: vertical;

border:
1px solid
rgba(
    255,
     255,
     255,
     0.10
);

outline: none;

background:
rgba(
    255,
     255,
     255,
     0.035
);

color:
#e9e5df;

font:
inherit;

line-height: 1.6;

transition:
border-color 0.25s ease,
box-shadow 0.25s ease;
}


#problemInput::placeholder {
color: #60656d;
}


#problemInput:focus {

border-color:
rgba(
    168,
     117,
     78,
     0.65
);

box-shadow:
0 0 30px
rgba(
    168,
     117,
     78,
     0.07
);
}


/* ============================================================
 *  BUTTON
 *  ============================================================ */

#analyzeProblem {

align-self:
flex-start;

padding:
14px 24px;

border:
1px solid
#a8754e;

background:
#a8754e;

color:
#08090c;

font-size: 11px;

font-weight: 600;

letter-spacing:
0.15em;

text-transform:
uppercase;

cursor: pointer;

transition:
transform 0.2s ease,
background 0.2s ease,
opacity 0.2s ease;
}


#analyzeProblem:hover {

transform:
translateY(-2px);

background:
#c18b62;
}


#analyzeProblem:disabled {

opacity: 0.5;

cursor:
wait;
}


/* ============================================================
 *  ANALYSIS
 *  ============================================================ */

.problem-analysis {

    margin-top:
    55px;
}


.analysis-placeholder {

    padding:
    25px;

    border-left:
    2px solid
    rgba(
        168,
         117,
         78,
         0.4
    );

    background:
    rgba(
        255,
         255,
         255,
         0.025
    );

    color:
    #777d86;

    font-size:
    13px;

    line-height:
    1.7;
}


.analysis-header small {

    color:
    #a8754e;

    font-size:
    10px;

    letter-spacing:
    0.2em;
}


.analysis-header h3 {

    margin:
    12px 0;

    font-size:
    clamp(
        28px,
        4vw,
        46px
    );
}


.analysis-header p {

    max-width:
    750px;

    font-size:
    15px;
}


/* ============================================================
 *  ANALYSIS DOMAINS
 *  ============================================================ */

.analysis-domains {

    display:
    grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(
            160px,
            1fr
        )
    );

    gap:
    12px;

    margin:
    35px 0;
}


.analysis-domain {

    padding:
    18px;

    border:
    1px solid
    rgba(
        255,
         255,
         255,
         0.07
    );

    background:
    rgba(
        255,
         255,
         255,
         0.025
    );

    opacity: 0;

    animation:
    analysisIn
    0.5s
    ease
    forwards;

    animation-delay:
    var(--delay);
}


.analysis-domain span {

    display: block;

    margin-bottom:
    12px;

    color:
    #a8754e;

    font-size:
    10px;

    letter-spacing:
    0.15em;
}


.analysis-domain strong {

    font-size:
    15px;

    font-weight:
    500;
}


@keyframes analysisIn {

    from {
        opacity: 0;
        transform:
        translateY(12px);
    }

    to {
        opacity: 1;
        transform:
        translateY(0);
    }
}


/* ============================================================
 *  PATH
 *  ============================================================ */

.analysis-path {

    margin-top:
    45px;
}


.path-flow {

    display:
    flex;

    flex-wrap:
    wrap;

    align-items:
    center;

    gap:
    10px;

    margin-top:
    15px;
}


.path-item {

    padding:
    11px 16px;

    border:
    1px solid
    rgba(
        168,
         117,
         78,
         0.3
    );

    color:
    #cfc8c0;

    background:
    rgba(
        168,
        117,
        78,
        0.05
    );

    font-size:
    12px;

    animation:
    analysisIn
    0.5s
    ease
    forwards;

    animation-delay:
    var(--delay);
}


.path-arrow {

    color:
    #a8754e;
}


/* ============================================================
 *  MISSING LINK
 *  ============================================================ */

.missing-link {

    margin-top:
    55px;

    padding:
    40px;

    border:
    1px solid
    rgba(
        168,
         117,
         78,
         0.16
    );

    background:
    rgba(
        168,
         117,
         78,
         0.035
    );

    opacity: 0;

    transform:
    translateY(20px);

    transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}


.missing-link.visible {

    opacity: 1;

    transform:
    translateY(0);
}


.missing-header h3 {

    margin:
    10px 0;

    font-size:
    28px;
}


.missing-system {

    display:
    flex;

    flex-direction:
    column;

    align-items:
    center;

    margin-top:
    35px;
}


.missing-node {

    width:
    min(
        700px,
        100%
    );

    padding:
    22px;

    border:
    1px solid
    rgba(
        255,
         255,
         255,
         0.08
    );

    background:
    rgba(
        255,
         255,
         255,
         0.025
    );
}


.missing-node small {

    display:
    block;

    margin-bottom:
    10px;

    color:
    #777d86;

    font-size:
    9px;

    letter-spacing:
    0.18em;
}


.missing-node strong {

    display:
    block;

    font-size:
    15px;

    font-weight:
    500;

    line-height:
    1.5;
}


.missing-arrow {

    padding:
    12px;

    color:
    #a8754e;

    font-size:
    20px;
}


.opportunity-node {

    border-color:
    rgba(
        168,
         117,
         78,
         0.3
    );
}


.missing-insight {

    display:
    grid;

    grid-template-columns:
    200px 1fr;

    gap:
    30px;

    margin-top:
    35px;

    padding-top:
    30px;

    border-top:
    1px solid
    rgba(
        255,
         255,
         255,
         0.06
    );
}


.missing-insight span {

    color:
    #a8754e;

    font-size:
    9px;

    letter-spacing:
    0.15em;
}


.missing-insight h4 {

    margin-top:
    12px;

    font-size:
    12px;

    letter-spacing:
    0.1em;
}


.missing-insight p {

    margin:
    0;

    font-size:
    14px;
}


/* ============================================================
 *  ACTION SECTION
 *  ============================================================ */

.backend-action {

    margin-top:
    55px;

    padding:
    40px;

    border:
    1px solid
    rgba(
        255,
         255,
         255,
         0.07
    );

    background:
    rgba(
        255,
         255,
         255,
         0.02
    );

    opacity: 0;

    transform:
    translateY(20px);

    transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}


.backend-action.visible {

    opacity: 1;

    transform:
    translateY(0);
}


.v7-header h3 {

    margin:
    12px 0;

    font-size:
    30px;
}


.v7-header h3 span {
    color:
    #a8754e;
}


.v7-options {

    display:
    grid;

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

    gap:
    15px;

    margin-top:
    30px;
}


.v7-card {

    min-height:
    180px;

    padding:
    25px;

    border:
    1px solid
    rgba(
        255,
         255,
         255,
         0.07
    );

    background:
    rgba(
        255,
         255,
         255,
         0.025
    );
}


.v7-card small {

    color:
    #a8754e;

    font-size:
    9px;

    letter-spacing:
    0.18em;
}


.v7-time {

    margin:
    12px 0 18px;

    color:
    #656a72;

    font-size:
    10px;

    letter-spacing:
    0.15em;
}


.v7-card p {

    margin:
    0;

    color:
    #c4c0ba;

    font-size:
    13px;
}


.v7-core {

    border-color:
    rgba(
        168,
         117,
         78,
         0.3
    );
}


.v7-big {

    border-color:
    rgba(
        168,
         117,
         78,
         0.5
    );
}


.v7-first-action {

    margin-top:
    25px;

    padding:
    22px;

    border-left:
    2px solid
    #a8754e;

    background:
    rgba(
        168,
         117,
         78,
         0.04
    );
}


.v7-action-label {

    margin-bottom:
    8px;

    color:
    #a8754e;

    font-size:
    9px;

    letter-spacing:
    0.18em;
}


.v7-action-text {

    color:
    #ded8d1;

    line-height:
    1.6;
}


.v7-value {

    display:
    flex;

    flex-direction:
    column;

    gap:
    8px;

    margin-top:
    25px;

    padding-top:
    25px;

    border-top:
    1px solid
    rgba(
        255,
         255,
         255,
         0.06
    );
}


.v7-value small {

    color:
    #777d86;

    font-size:
    9px;

    letter-spacing:
    0.15em;
}


.v7-value strong {

    color:
    #d9a77c;

    font-size:
    18px;

    font-weight:
    500;
}


/* ============================================================
 *  PRIORITY RESULT
 *  ============================================================ */

.v8-result {

    margin-top:
    35px;

    padding:
    30px;

    border:
    1px solid
    rgba(
        168,
         117,
         78,
         0.25
    );

    background:
    rgba(
        168,
         117,
         78,
         0.035
    );
}


.v8-result-header small {

    color:
    #a8754e;

    font-size:
    9px;

    letter-spacing:
    0.18em;
}


.v8-result-header h4 {

    margin:
    12px 0;

    font-size:
    24px;
}


.v8-decision {

    margin-top:
    25px;

    padding:
    20px;

    background:
    rgba(
        255,
         255,
         255,
         0.025
    );
}


.v8-decision-label {

    margin-bottom:
    10px;

    color:
    #a8754e;

    font-size:
    9px;

    letter-spacing:
    0.16em;
}


.v8-decision-text {

    color:
    #d7d1ca;

    line-height:
    1.6;
}


.v8-input-context,
.v8-next {

    display:
    flex;

    flex-direction:
    column;

    gap:
    8px;

    margin-top:
    20px;
}


.v8-input-context span,
.v8-next span {

    color:
    #6e737b;

    font-size:
    9px;

    letter-spacing:
    0.15em;
}


.v8-input-context strong,
.v8-next strong {

    color:
    #c6c1ba;

    font-weight:
    400;

    line-height:
    1.5;
}


/* ============================================================
 *  BACKEND ERROR
 *  ============================================================ */

.backend-status {

    margin-top:
    30px;

    padding:
    25px;

    border:
    1px solid
    rgba(
        180,
         80,
         70,
         0.25
    );

    background:
    rgba(
        180,
         80,
         70,
         0.04
    );
}


.backend-status small {

    color:
    #c17b6f;

    font-size:
    9px;

    letter-spacing:
    0.18em;
}


.backend-status p {

    margin:
    10px 0 0;

    font-size:
    13px;
}


/* ============================================================
 *  PRIORITY OPTIONS
 *  ============================================================ */

[data-priority] {

    cursor:
    pointer;

    transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.25s ease;
}


[data-priority]:hover {

    transform:
    translateY(-3px);

    border-color:
    rgba(
        168,
         117,
         78,
         0.4
    );
}


[data-priority].selected {

    border-color:
    #a8754e;

    background:
    rgba(
        168,
         117,
         78,
         0.08
    );
}


/* ============================================================
 *  GENERIC CARDS
 *  ============================================================ */

.card,
.panel,
.option {

    border:
    1px solid
    rgba(
        255,
         255,
         255,
         0.07
    );

    background:
    rgba(
        255,
         255,
         255,
         0.025
    );
}


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

footer {

    position:
    relative;

    z-index:
    2;

    padding:
    60px 20px;

    text-align:
    center;

    color:
    #555a62;

    font-size:
    11px;

    letter-spacing:
    0.1em;
}


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

@media (max-width: 800px) {

    .engine-section {

        padding-top:
        70px;

    }


    #engine {

    min-height:
    560px;

    padding:
    50px 18px;

    }


    .domains {

        grid-template-columns:
        1fr;

        max-width:
        420px;

        gap:
        15px;

    }


    #valueCore,
    .value-core {

        width:
        125px;

        height:
        125px;

    }


    .v7-options {

        grid-template-columns:
        1fr;

    }


    .missing-insight {

        grid-template-columns:
        1fr;

        gap:
        10px;

    }


    .backend-action,
    .missing-link {

        padding:
        25px;

    }

}


@media (max-width: 520px) {

    .container,
    .engine-container,
    .problem-engine-inner {

        width:
        calc(
            100% - 28px
        );

    }


    .engine-section h1 {

        font-size:
        44px;

    }


    .problem-engine {

        padding:
        70px 0;

    }


    .problem-engine h2 {

        font-size:
        38px;

    }


    #analyzeProblem {

    width:
    100%;

    }


    .path-flow {

        flex-direction:
        column;

        align-items:
        flex-start;

    }


    .path-arrow {

        transform:
        rotate(90deg);

    }

}


/* ============================================================
 *  REDUCED MOTION
 *  ============================================================ */

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

    *,
    *::before,
    *::after {

        animation-duration:
        0.01ms !important;

        animation-iteration-count:
        1 !important;

        transition-duration:
        0.01ms !important;

    }

}