/* === Color Variables === */
:root {
    --text-color: white;
    /* Night */
    --day-text-color: black;
    /* Day */
}

/* === Text Color Transition === */
body,
.themeText,
#themeText {
    transition: color 0.5s ease, background-color 0.5s ease;
}

/* === Text Color Handling === */
.Noa,
.Proximus,
.Raka,
.Mae,
.themeText,
#themeText {
    color: var(--text-color);
    transition: color 0.5s ease;
}

body.day-mode .Noa,
body.day-mode .Proximus,
body.day-mode .Raka,
body.day-mode .Mae,
body.day-mode .themeText,
body.day-mode #themeText {
    color: var(--day-text-color);
}

/* === Neural Hero Section === */
/*.neural-hero {*/
/*    position: relative;*/
/*    z-index: 1;*/
/*    overflow: hidden;*/
/*    padding: 6rem 0;*/
/*    background: transparent;*/
/*}*/

/*.neural-canvas {*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    z-index: 0;*/
/*    pointer-events: none;*/
/*    background: transparent;*/
/*}*/

.neural-hero {
  position: relative;
  overflow: hidden;      /* already there, but keep it */
}

/* This is the important part */
.neural-canvas {
  position: absolute;
  inset: 0;              /* top:0; right:0; bottom:0; left:0; */
  width: 100%;           /* NOT 100vw */
  height: 100%;
  display: block;
}








.neural-hero .Noa {
    text-shadow: 0 0 15px rgba(2, 175, 244, 0.7);
}

.neural-hero .Proximus,
.neural-hero .Raka {
    text-shadow: 0 0 8px rgba(2, 175, 244, 0.6);
}

.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(2, 175, 244, 0.6);
}

/* === Table Transparency === */
.table-transparent th,
.table-transparent td {
    background-color: transparent !important;
}

/* === Fade-In Animation === */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* === Footer Collapsible === */
.footer-section.collapsible .footer-heading {
    cursor: pointer;
    transition: color 0.3s ease;
}

.footer-section.collapsible .footer-heading:hover {
    color: #02aff4;
}

.footer-section.collapsible:not(.active) .footer-content {
    display: none;
}