/* =========================================================
   VISUAL SYSTEM

   These illustrations (Business, Students, Academia) are
   intentionally designed as one coherent family.

   COLOR ROLES
   -----------------------------------------------------------------
   --na-ill-primary
       Main analytical content.
       Examples:
       - main curves
       - primary datasets
       - network structure
       - dominant chart elements

   --na-ill-secondary
       Supporting analytical content.
       Examples:
       - comparison datasets
       - secondary curves
       - helper relationships
       - less prominent objects

   --na-ill-gold
       References and guidance.
       Examples:
       - guide lines
       - expected/theoretical values
       - reference markers
       - helper annotations

   --na-ill-accent
       Highlights only.
       Examples:
       - selected point
       - significant result
       - preferred solution
       - important observation

   TEXT
   -----------------------------------------------------------------
   Use neutral dark gray-blue text.
   Typography should never compete with the graphics.

   GLASS
   -----------------------------------------------------------------
   All sections share identical glass styling.
   Differences between sections should come only from
   the illustrated content, never from the glass itself.

   CONSISTENCY
   -----------------------------------------------------------------
   Business      = decision making
   Students      = mathematics
   Academia      = statistical research

   They represent different domains, but should always feel
   like illustrations from the same design language.

   If adding new SVG elements:
   1. Ask which visual role the element has.
   2. Assign the color according to that role.
   3. Avoid introducing new colors unless absolutely necessary.
   ========================================================= */

/* =========================================================
   Services page visual compositions

   Order:
   1. Shared foundations
   2. Business
   3. Students
   4. Academia
   5. Shared responsive rules
   6. Motion and accessibility
   ========================================================= */

/* =========================================================
   Shared visual scene
   ========================================================= */

.service-section__media--visual {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}

.na-visual-stack {
    position: relative;

    width: 90%;
    max-width: 780px;
    height: 560px;

    perspective: 1400px;
    transform-style: preserve-3d;
}


/* =========================================================
   Shared glass plane
   ========================================================= */

.na-glass-plane {
    position: absolute;

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

    box-sizing: border-box;

    overflow: hidden;

    color: #2b211b;

    background:
        linear-gradient(
            145deg,
            rgba(224, 238, 250, 0.12),
            rgba(176, 207, 235, 0.05)
        );

    /* border: 1px solid rgba(255, 255, 255, 0.22); */
    border: 1px solid rgba(92, 132, 172, 0.26);
    border-radius: 16px;

    box-shadow:
        0 26px 55px rgba(35, 53, 78, 0.16),
        0 8px 18px rgba(35, 53, 78, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 -1px 0 rgba(98, 132, 170, 0.10);

    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);

    transform-style: preserve-3d;
    transform-origin: center;

    transition:
        transform 300ms ease,
        box-shadow 300ms ease;
}

/* Static glass lighting */
.na-glass-plane::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.42),
            transparent 32%,
            transparent 70%,
            rgba(121, 160, 204, 0.08)
        );
}

/* Occasional moving reflection */
.na-glass-plane::after {
    content: "";

    position: absolute;
    top: -25%;
    bottom: -25%;
    left: -55%;
    z-index: 2;

    width: 34%;

    pointer-events: none;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255, 255, 255, 0.04) 35%,
            rgba(255, 255, 255, 0.55) 50%,
            rgba(255, 255, 255, 0.04) 65%,
            transparent 100%
        );

    transform: translateX(0) skewX(-12deg);

    animation:
        naGlassReflection 10s ease-in-out infinite;
}


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

   Shared SVG styles
   ========================================================= */

.na-glass-plane svg {
    position: relative;
    z-index: 1;

    display: block;

    width: 90%;
    height: 90%;

    overflow: visible;
}

.na-glass-plane text {
    fill: rgba(35, 53, 78, 0.68);

    font-family: "Times New Roman", serif;
    font-size: 16px;
    font-weight: 500;
}

.na-visual-axis {
    stroke: rgba(35, 53, 78, 0.35);
    stroke-width: 2;
}

.na-math-visual line,
.na-math-visual circle,
.na-math-visual path,
.na-stats-visual line,
.na-stats-visual path,
.na-calculus-visual line,
.na-calculus-visual path,
.na-calculus-visual circle {
    vector-effect: non-scaling-stroke;
}


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


   Business composition
   Complexity → reasoning → evaluated alternatives
   ========================================================= */

#business .na-glass-plane--business-network {
    width: 72%;
    height: 54%;

    top: 2%;
    left: 0;
    z-index: 1;

    --na-plane-z: -85px;
    --na-plane-float: -1px;
    --na-plane-rotate: 0deg;

    transform:
        rotateZ(var(--na-plane-rotate))
        translateY(0)
        translateZ(var(--na-plane-z));

    animation:
        naGlassFloat 13s ease-in-out infinite -2s;

    opacity: 0.84;

    background:
        linear-gradient(
            145deg,
            rgba(205, 228, 247, 0.05),
            rgba(134, 177, 216, 0.01)
        );

    border-color: rgba(96, 137, 178, 0.20);

    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
}

#business .na-glass-plane--business-reasoning {
    width: 64%;
    height: 47%;

    top: 46%;
    left: 17%;
    z-index: 2;

    --na-plane-z: 30px;
    --na-plane-float: -2px;
    --na-plane-rotate: 0deg;

    transform:
        rotateZ(var(--na-plane-rotate))
        translateY(0)
        translateZ(var(--na-plane-z));

    animation:
        naGlassFloat 11s ease-in-out infinite -6s;

    background:
        linear-gradient(
            145deg,
            rgba(235, 244, 252, 0.05),
            rgba(157, 194, 228, 0.01)
        );

    border-color: rgba(96, 137, 178, 0.26);

    backdrop-filter: blur(4px) saturate(110%);
    -webkit-backdrop-filter: blur(4px) saturate(110%);
}

#business .na-glass-plane--business-alternatives {
    width: 38%;
    height: 42%;

    top: 17%;
    right: 0;
    z-index: 3;

    --na-plane-z: 120px;
    --na-plane-float: -3px;
    --na-plane-rotate: 0deg;

    transform:
        rotateZ(var(--na-plane-rotate))
        translateY(0)
        translateZ(var(--na-plane-z));

    animation:
        naGlassFloat 9s ease-in-out infinite -4s;

    background:
        linear-gradient(
            145deg,
            rgba(245, 250, 255, 0.06),
            rgba(174, 207, 237, 0.01)
        );

    border-color: rgba(96, 137, 178, 0.32);

    backdrop-filter: blur(2px) saturate(110%);
    -webkit-backdrop-filter: blur(2px) saturate(110%);
}


/* =========================================================
   Business SVG typography
   ========================================================= */

#business .na-business-visual text {
    font-family: "Manrope", sans-serif;
}

#business .na-business-code text {
    fill: rgba(35, 53, 78, 0.72);

    font-family:
        "Courier New",
        monospace;
    font-size: 13px;
    font-weight: 500;
}

#business .na-business-code--faint text {
    opacity: 0.68;
}

#business .na-business-heading {
    fill: rgba(35, 53, 78, 0.86);

    font-size: 18px;
    font-weight: 700;
}

#business .na-business-note {
    fill: rgba(35, 53, 78, 0.48);

    font-family:
        "Courier New",
        monospace;
    font-size: 11px;
}

#business .na-business-easter-egg {
    fill: rgba(35, 53, 78, 0.14);

    font-family:
        "Courier New",
        monospace;
    font-size: 1px;

    pointer-events: none;
    user-select: text;
}


/* =========================================================
   Back plane – complex network
   ========================================================= */

#business .na-business-links path {
    fill: none;

    stroke: color-mix(in srgb, var(--na-ill-grid) 68%, transparent);
    stroke-width: 1.7;
    stroke-linecap: round;

    vector-effect: non-scaling-stroke;
}

#business .na-business-cluster circle {
    stroke: rgba(255, 255, 255, 0.80);
    stroke-width: 2;

    vector-effect: non-scaling-stroke;
}

#business .na-business-cluster--one circle {
    fill: var(--na-ill-primary);
}

#business .na-business-cluster--two circle {
    fill: var(--na-ill-secondary);
}

#business .na-business-cluster--three circle {
    fill: var(--na-ill-gold);
}

#business .na-business-cluster--four circle {
    fill: var(--na-ill-accent);
}


/* =========================================================
   Middle plane – weighted decision matrix
   ========================================================= */

#business .na-business-matrix-title {
    fill: rgba(35, 53, 78, 0.84);

    font-size: 17px;
    font-weight: 700;
}

#business .na-business-matrix-columns text,
#business .na-business-matrix-rows text {
    fill: rgba(35, 53, 78, 0.72);

    font-size: 12px;
    font-weight: 650;
}

#business .na-business-matrix-rows text {
    font-family:
        "Courier New",
        monospace;
    font-size: 15px;
    font-weight: 700;
}

#business .na-matrix-cell {
    stroke: rgba(255, 255, 255, 0.82);
    stroke-width: 2;

    vector-effect: non-scaling-stroke;
}

#business .na-matrix-cell--2 {
    fill: color-mix(in srgb, var(--na-ill-secondary) 28%, rgba(255, 255, 255, 0.72));
}

#business .na-matrix-cell--3 {
    fill: color-mix(in srgb, var(--na-ill-primary) 42%, rgba(255, 255, 255, 0.58));
}

#business .na-matrix-cell--4 {
    fill: color-mix(in srgb, var(--na-ill-gold) 66%, rgba(255, 255, 255, 0.34));
}

#business .na-matrix-cell--5 {
    fill: color-mix(in srgb, var(--na-ill-accent) 82%, rgba(255, 255, 255, 0.18));
}

#business .na-business-matrix-values text {
    fill: rgba(35, 53, 78, 0.82);

    font-family:
        "Courier New",
        monospace;
    font-size: 13px;
    font-weight: 700;
}

/* =========================================================
   Front plane – evaluated alternatives
   ========================================================= */

#business .na-business-option rect {
    fill: rgba(255, 255, 255, 0.16);

    stroke: rgba(96, 137, 178, 0.24);
    stroke-width: 1.5;

    vector-effect: non-scaling-stroke;
}

#business .na-business-option circle {
    fill: color-mix(in srgb, var(--na-ill-secondary) 46%, rgba(255, 255, 255, 0.54));

    stroke: rgba(255, 255, 255, 0.82);
    stroke-width: 2;

    vector-effect: non-scaling-stroke;
}

#business .na-business-option--preferred rect {
    fill: color-mix(in srgb, var(--na-ill-accent) 8%, transparent);

    stroke: var(--na-ill-primary);
    stroke-width: 2;
}

#business .na-business-option--preferred circle {
    fill: var(--na-ill-accent);

    filter:
        drop-shadow(
            0 3px 7px
            color-mix(in srgb, var(--na-ill-accent) 42%, transparent)
        );
}

#business .na-business-option-name {
    fill: rgba(35, 53, 78, 0.82);

    font-size: 15px;
    font-weight: 600;
}

#business .na-business-option-score {
    fill: rgba(35, 53, 78, 0.70);

    font-family:
        "Courier New",
        monospace;
    font-size: 15px;
    font-weight: 700;
}


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


   Students composition
   ========================================================= */

#students .na-glass-plane--back {
    width: 64%;
    height: 56%;

    top: 3%;
    left: 0;

    z-index: 1;

    --na-plane-z: -85px;
    --na-plane-float: -1px;
    --na-plane-rotate: 0deg;

    transform:
        rotateZ(var(--na-plane-rotate))
        translateY(0)
        translateZ(var(--na-plane-z));

    animation:
        naGlassFloat 13s ease-in-out infinite -2s;

    opacity: 0.86;

    background:
        linear-gradient(
            145deg,
            rgba(205, 228, 247, 0.05),
            rgba(134, 177, 216, 0.01)
        );

    border-color: rgba(96, 137, 178, 0.20);

    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);

    box-shadow:
        0 20px 38px rgba(35, 53, 78, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

#students .na-glass-plane--middle {
    width: 61%;
    height: 49%;

    top: 43%;
    left: 20%;

    z-index: 2;

    --na-plane-z: 30px;
    --na-plane-float: -2px;
    --na-plane-rotate: 0deg;

    transform:
        rotateZ(var(--na-plane-rotate))
        translateY(0)
        translateZ(var(--na-plane-z));

    animation:
        naGlassFloat 11s ease-in-out infinite -6s;

    background:
        linear-gradient(
            145deg,
            rgba(235, 244, 252, 0.05),
            rgba(157, 194, 228, 0.01)
        );

    border-color: rgba(96, 137, 178, 0.26);

    backdrop-filter: blur(4px) saturate(110%);
    -webkit-backdrop-filter: blur(4px) saturate(110%);

    box-shadow:
        0 30px 58px rgba(35, 53, 78, 0.17),
        0 10px 24px rgba(35, 53, 78, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

#students .na-glass-plane--front {
    width: 43%;
    height: 39%;

    top: 20%;
    right: 0%;

    z-index: 3;

    --na-plane-z: 120px;
    --na-plane-float: -3px;
    --na-plane-rotate: 0deg;

    transform:
        rotateZ(var(--na-plane-rotate))
        translateY(0)
        translateZ(var(--na-plane-z));

    animation:
        naGlassFloat 9s ease-in-out infinite -4s;

    background:
        linear-gradient(
            145deg,
            rgba(245, 250, 255, 0.05),
            rgba(174, 207, 237, 0.01)
        );

    border-color: rgba(96, 137, 178, 0.32);

    backdrop-filter: blur(2px) saturate(110%);
    -webkit-backdrop-filter: blur(2px) saturate(110%);

    box-shadow:
        0 20px 38px rgba(35, 53, 78, 0.16),
        0 5px 12px rgba(35, 53, 78, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}


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

   Back plane – unit circle and sine wave
   ========================================================= */

.na-unit-circle > circle {
    fill: rgba(255, 255, 255, 0.04);

    stroke: var(--na-ill-accent);
    stroke-width: 2;
}

.na-unit-radius {
    stroke: var(--na-ill-primary);
    stroke-width: 3;
    stroke-linecap: round;
}

.na-unit-guide {
    stroke: color-mix(in srgb, var(--na-ill-gold) 72%, transparent);
    stroke-width: 1.5;
    stroke-dasharray: 6 5;
}

.na-unit-point {
    fill: var(--na-ill-primary);

    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 2.5;
}

.na-unit-angle {
    fill: none;

    stroke: var(--na-ill-gold);
    stroke-width: 2;
    stroke-linecap: round;
}

.na-sine-curve {
    fill: none;

    stroke: var(--na-ill-primary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.na-sine-ticks line {
    stroke: color-mix(in srgb, var(--na-ill-gold) 62%, transparent);
    stroke-width: 1.5;
}


/* =========================================================
   Middle plane – Gaussian distribution
   ========================================================= */

.na-stats-axis {
    stroke: var(--na-ill-axis);
    stroke-width: 2;
}

.na-gaussian-fill {
    fill: url("#naGaussianFill");
    color: var(--na-ill-secondary);
}

.na-gaussian-curve {
    fill: none;

    stroke: var(--na-ill-primary);
    stroke-width: 4;
    stroke-linecap: round;
}

.na-stats-guide {
    stroke: color-mix(in srgb, var(--na-ill-gold) 58%, transparent);
    stroke-width: 1.5;
    stroke-dasharray: 6 6;
}

.na-stats-center {
    stroke: color-mix(in srgb, var(--na-ill-accent) 78%, transparent);
    stroke-width: 2;
    stroke-dasharray: 7 5;
}

.na-stats-ticks line {
    stroke: color-mix(in srgb, var(--na-ill-gold) 60%, transparent);
    stroke-width: 1.5;
}

.na-stats-visual text {
    font-size: 16px;
    text-anchor: middle;
}

.na-stats-label {
    fill: rgba(35, 53, 78, 0.78);

    font-size: 18px;
    font-weight: 600;
}


/* =========================================================
   Front plane – logarithmic curve and tangent
   ========================================================= */

.na-calculus-plane {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 100%;
}

.na-calculus-visual {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

.na-calculus-axis {
    stroke: var(--na-ill-axis);
    stroke-width: 2;
}

.na-log-curve {
    fill: none;

    stroke: var(--na-ill-primary);
    stroke-width: 4;
    stroke-linecap: round;
}

.na-tangent-line {
    stroke: var(--na-ill-accent);
    stroke-width: 2.5;
    stroke-linecap: round;

    opacity: 0.82;
}

.na-calculus-guide {
    stroke: color-mix(in srgb, var(--na-ill-gold) 70%, transparent);
    stroke-width: 1.5;
    stroke-dasharray: 6 5;
}

.na-calculus-point {
    fill: var(--na-ill-accent);

    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 2.5;
}

.na-calculus-title {
    fill: rgba(35, 53, 78, 0.82);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-style: italic;
}

.na-calculus-label {
    fill: rgba(35, 53, 78, 0.62);

    font-size: 18px;
    font-weight: 600;
}

.na-calculus-formula {
    position: absolute;
    z-index: 3;

    right: 2%;
    bottom: 32%;

    display: flex;
    align-items: center;
    gap: 0.26em;

    padding: 0.3rem 0.5rem;

    color: rgba(35, 53, 78, 0.72);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.1;

    background: rgba(255, 255, 255, 0.16);
    border-radius: 6px;

    /* transform: rotate(-1.5deg); */
}

.na-calculus-limit {
    align-self: flex-end;

    margin-left: -0.12em;
    margin-right: 0.08em;

    font-size: 0.68em;

    transform: translate(-0.08em, 0.32em);
}

.na-calculus-fraction {
    display: inline-grid;
    grid-template-rows: auto auto;

    text-align: center;
}

.na-calculus-fraction span:first-child {
    padding: 0 0.22em 0.12em;

    border-bottom: 1px solid currentColor;
}

.na-calculus-fraction span:last-child {
    padding-top: 0.1em;
}


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


   Academia composition
   ========================================================= */

#academia .na-glass-plane--study {
    width: 72%;
    height: 56%;

    top: 2%;
    left: 0;
    z-index: 1;

    --na-plane-z: -80px;
    --na-plane-rotate: 0deg;
}

#academia .na-glass-plane--model {
    width: 65%;
    height: 50%;

    top: 43%;
    left: 17%;
    z-index: 2;

    --na-plane-z: 30px;
    --na-plane-rotate: 0deg;
}

#academia .na-glass-plane--result {
    width: 48%;
    height: 43%;

    top: 18%;
    right: 0;
    z-index: 3;

    --na-plane-z: 120px;
    --na-plane-rotate: 0deg;
}


/* =========================================================
   Academia shared SVG typography
   ========================================================= */

#academia .na-academia-heading {
    fill: rgba(35, 53, 78, 0.82);

    font-family: "Manrope", sans-serif;
    font-size: 18px;
    font-weight: 700;
}

#academia .na-academia-note,
#academia .na-academia-axis-label,
#academia .na-heatmap-labels text,
#academia .na-km-legend text,
#academia .na-forest-labels text,
#academia .na-forest-values text,
#academia .na-forest-axis text {
    fill: rgba(35, 53, 78, 0.68);

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 500;
}

#academia .na-heatmap-labels text {
    font-size: 12px;
}

#academia .na-forest-values text {
    font-size: 12px;
}

#academia .na-visual-axis {
    stroke: rgba(35, 53, 78, 0.36);
    stroke-width: 2;
}


/* =========================================================
   Subject characteristics heatmap
   ========================================================= */

#academia .na-heatmap-cell {
    stroke: rgba(255, 255, 255, 0.72);
    stroke-width: 2;

    rx: 4px;
    ry: 4px;
}

#academia .na-heatmap-cell--1 {
    fill: color-mix(
        in srgb,
        var(--na-ill-primary) 16%,
        rgba(255, 255, 255, 0.72)
    );
}

#academia .na-heatmap-cell--2 {
    fill: color-mix(
        in srgb,
        var(--na-ill-primary) 30%,
        rgba(255, 255, 255, 0.62)
    );
}

#academia .na-heatmap-cell--3 {
    fill: color-mix(
        in srgb,
        var(--na-ill-primary) 48%,
        rgba(255, 255, 255, 0.48)
    );
}

#academia .na-heatmap-cell--4 {
    fill: color-mix(
        in srgb,
        var(--na-ill-gold) 68%,
        rgba(255, 255, 255, 0.28)
    );
}

#academia .na-heatmap-cell--5 {
    fill: color-mix(
        in srgb,
        var(--na-ill-accent) 88%,
        rgba(255, 255, 255, 0.28)
    );
}


/* =========================================================
   Treatment-duration histogram
   ========================================================= */

#academia .na-histogram rect {
    fill: color-mix(
        in srgb,
        var(--na-ill-gold) 34%,
        rgba(255, 255, 255, 0.58)
    );

    stroke: color-mix(
        in srgb,
        var(--na-ill-gold) 48%,
        transparent
    );

    stroke-width: 1.5;
}

#academia .na-histogram rect:nth-of-type(1) {
    fill: color-mix(
        in srgb,
        var(--na-ill-gold) 72%,
        rgba(255, 255, 255, 0.24)
    );
}

#academia .na-histogram rect:nth-of-type(2) {
    fill: color-mix(
        in srgb,
        var(--na-ill-gold) 62%,
        rgba(255, 255, 255, 0.30)
    );
}

#academia .na-histogram rect:nth-of-type(3) {
    fill: color-mix(
        in srgb,
        var(--na-ill-gold) 54%,
        rgba(255, 255, 255, 0.36)
    );
}

#academia .na-histogram-curve {
    fill: none;

    stroke: var(--na-ill-secondary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#academia .na-histogram-points circle {
    fill: var(--na-ill-primary);

    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 2;

    vector-effect: non-scaling-stroke;
}

/* =========================================================
   Kaplan–Meier chart
   ========================================================= */

#academia .na-km-grid line {
    stroke: rgba(35, 53, 78, 0.10);
    stroke-width: 1;
}

#academia .na-km-ci {
    stroke: none;
    pointer-events: none;
}

#academia .na-km-ci--a {
    fill: color-mix(
        in srgb,
        var(--na-ill-primary) 18%,
        transparent
    );
}

#academia .na-km-ci--b {
    fill: color-mix(
        in srgb,
        var(--na-ill-accent) 18%,
        transparent
    );
}

#academia .na-km-line {
    fill: none;

    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#academia .na-km-line--a {
    stroke: var(--na-ill-primary);
}

#academia .na-km-line--b {
    stroke: var(--na-ill-accent);
}

#academia .na-km-censor path {
    fill: none;

    stroke-width: 1.5;
    stroke-linecap: round;
}

#academia .na-km-censor--a path {
    stroke: var(--na-ill-primary);
}

#academia .na-km-censor--b path {
    stroke: var(--na-ill-secondary);
}

#academia .na-km-legend line {
    fill: none;

    stroke-width: 4;
    stroke-linecap: round;
}


/* =========================================================
   Forest plot
   ========================================================= */

#academia .na-forest-null {
    stroke: color-mix(
        in srgb,
        var(--na-ill-gold) 72%,
        transparent
    );

    stroke-width: 2;
    stroke-dasharray: 6 5;
}

#academia .na-forest-rows line {
    stroke: var(--na-ill-primary);
    stroke-width: 3;
    stroke-linecap: round;
}

#academia .na-forest-rows circle {
    fill: var(--na-ill-primary);

    stroke: rgba(255, 255, 255, 0.94);
    stroke-width: 2.5;
}

#academia .na-forest-axis line {
    stroke: rgba(35, 53, 78, 0.40);
    stroke-width: 1.5;
}

#academia .na-forest-labels text {
    fill: rgba(35, 53, 78, 0.74);
}

#academia .na-forest-values text {
    fill: rgba(35, 53, 78, 0.70);
}

#academia .na-forest-row--sig line,
#academia .na-forest-row--sig circle {
    stroke: var(--na-ill-accent);
    fill: var(--na-ill-accent);
}

#academia .na-forest-row--ns line,
#academia .na-forest-row--ns circle {
    stroke: var(--na-ill-secondary);
    fill: var(--na-ill-accent);
}

#academia .na-forest-legend text {
    fill: rgba(35,53,78,.72);
    font-size: 11px;
    font-family: "Manrope", sans-serif;
}

#academia .na-forest-legend circle {
    fill: var(--na-ill-accent);
}

#academia .na-forest-legend-ns {
    fill: var(--na-ill-secondary) !important;
}

/* =========================================================
   Shared responsive layout
   All section-specific mobile adjustments live here.
   ========================================================= */

@media (max-width: 1100px) {
    .na-visual-stack {
        width: 100%;
        height: 540px;
    }

    /* Business */
    #business .na-glass-plane--business-network {
        width: 74%;
    }

    #business .na-glass-plane--business-reasoning {
        width: 67%;
    }

    #business .na-glass-plane--business-alternatives {
        width: 41%;
    }

    /* Students */
    #students .na-glass-plane--back {
        width: 70%;
    }

    #students .na-glass-plane--middle {
        width: 63%;
    }

    #students .na-glass-plane--front {
        width: 45%;
    }

    /* Academia */
    #academia .na-glass-plane--study {
        width: 74%;
    }

    #academia .na-glass-plane--model {
        width: 67%;
    }

    #academia .na-glass-plane--result {
        width: 50%;
    }
}

@media (max-width: 900px) {
    .na-visual-stack {
        max-width: 720px;
        height: 500px;
    }

    /* Business */
    #business .na-glass-plane--business-network {
        width: 72%;
        height: 52%;

        top: 2%;
        left: 0;
    }

    #business .na-glass-plane--business-reasoning {
        width: 66%;
        height: 46%;

        top: 46%;
        left: 18%;
    }

    #business .na-glass-plane--business-alternatives {
        width: 42%;
        height: 40%;

        top: 18%;
        right: 0;
    }

    /* Students */
    #students .na-glass-plane--back {
        width: 68%;
        height: 54%;

        left: 1%;
    }

    #students .na-glass-plane--middle {
        width: 61%;
        height: 47%;

        top: 44%;
        left: 25%;
    }

    #students .na-glass-plane--front {
        width: 42%;
        height: 34%;

        top: 20%;
        right: 1%;
    }

    /* Academia */
    #academia .na-glass-plane--study {
        width: 72%;
        height: 54%;

        top: 2%;
        left: 0;
    }

    #academia .na-glass-plane--model {
        width: 65%;
        height: 48%;

        top: 44%;
        left: 17%;
    }

    #academia .na-glass-plane--result {
        width: 49%;
        height: 42%;

        top: 18%;
        right: 0;
    }
}

@media (max-width: 600px) {
    .na-visual-stack {
        height: 400px;
    }

    /* Business */
    #business .na-glass-plane--business-network {
        width: 76%;
        height: 49%;

        top: 2%;
        left: 0;

        --na-plane-z: -50px;
    }

    #business .na-glass-plane--business-reasoning {
        width: 70%;
        height: 44%;

        top: 45%;
        left: 14%;

        --na-plane-z: 15px;
    }

    #business .na-glass-plane--business-alternatives {
        width: 47%;
        height: 38%;

        top: 18%;
        right: 0;

        --na-plane-z: 65px;
    }

    #business .na-business-heading {
        font-size: 16px;
    }

    #business .na-business-code text,
    #business .na-business-option-name,
    #business .na-business-option-score {
        font-size: 12px;
    }

    #business .na-business-note {
        font-size: 10px;
    }

    /* Students — intentionally no plane rotation on mobile. */
    #students .na-glass-plane--back {
        width: 72%;
        height: 50%;

        top: 3%;
        left: 0;

        --na-plane-z: -50px;
        --na-plane-rotate: 0deg;
    }

    #students .na-glass-plane--middle {
        width: 65%;
        height: 45%;

        top: 43%;
        left: 20%;

        --na-plane-z: 15px;
        --na-plane-rotate: 0deg;
    }

    #students .na-glass-plane--front {
        width: 48%;
        height: 34%;

        top: 19%;
        right: 0;

        --na-plane-z: 65px;
        --na-plane-rotate: 0deg;
    }

    .na-glass-plane text {
        font-size: 14px;
    }

    .na-stats-label {
        font-size: 16px;
    }

    .na-calculus-title {
        font-size: 20px;
    }

    .na-calculus-formula {
        right: 5%;
        bottom: 5%;

        font-size: 0.62rem;
    }

    /* Academia */
    #academia .na-glass-plane--study {
        width: 76%;
        height: 51%;

        top: 2%;
        left: 0;

        --na-plane-z: -50px;
    }

    #academia .na-glass-plane--model {
        width: 69%;
        height: 45%;

        top: 45%;
        left: 15%;

        --na-plane-z: 15px;
    }

    #academia .na-glass-plane--result {
        width: 53%;
        height: 40%;

        top: 18%;
        right: 0;

        --na-plane-z: 65px;
    }

    #academia .na-academia-heading {
        font-size: 16px;
    }

    #academia .na-academia-note,
    #academia .na-academia-axis-label,
    #academia .na-heatmap-labels text,
    #academia .na-km-legend text,
    #academia .na-forest-labels text,
    #academia .na-forest-values text,
    #academia .na-forest-axis text {
        font-size: 11px;
    }
}

/* =========================================================
   Motion
   ========================================================= */

/* Intentionally almost imperceptible glass breathing. */
@keyframes naGlassFloat {
    0%,
    100% {
        transform:
            rotateZ(var(--na-plane-rotate))
            translateY(0)
            translateZ(var(--na-plane-z));
    }

    50% {
        transform:
            rotateZ(var(--na-plane-rotate))
            translateY(var(--na-plane-float))
            translateZ(var(--na-plane-z));
    }
}

/*
   A narrow reflection crosses each plane only occasionally.
   Negative delays keep the three reflections out of sync.
*/
@keyframes naGlassReflection {
    0%,
    22% {
        transform:
            translateX(0)
            skewX(-12deg);
    }

    58%,
    100% {
        transform:
            translateX(520%)
            skewX(-12deg);
    }
}

#students .na-glass-plane--back::after {
    animation-delay: -4s;
}

#students .na-glass-plane--middle::after {
    animation-delay: -15s;
}

#students .na-glass-plane--front::after {
    animation-delay: -9s;
}


/* =========================================================
   Reduced motion support
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .na-glass-plane,
    .na-glass-plane::after,
    .na-glass-plane *,
    .na-visual-stack {
        animation: none !important;
        transition: none !important;
    }
}