/* Light Theme */
    [data-theme="light"] {
      --title-color: #9ca7f2;
      --background-elements: #9CA7F2;
      --accent-color: #B5AEA8;
      --accent2-color: #1A1A1A;
      --background-color: #E2E1DF;
      --secondary-background-color: #d2d2d29a;
      --invert-color: 1;
      --no-invert-color: 0;
      /* Full lockup, in the accent of the active theme. */
      --brand-logo: url('/brand/novvative-black.png');
      /* Accent rule: brand deep blue reads on the light ground (6.69:1). */
      --accent-rule: #312ECD;
      /* Text-safe tokens. --accent-color and --title-color are brand colours
         that fail contrast as text on the light background (1.68:1 and 1.74:1),
         so text uses these instead and they flip per theme. */
      --text-muted: color-mix(in srgb, var(--accent2-color) 78%, var(--background-color));
      --text-accent: var(--accent-rule);
      /* Gradient-text stops. The brand sand and periwinkle vanish on the light
         ground (1.68:1 and 1.74:1), so text gradients use these darker
         counterparts instead. Decorative background gradients still use the
         brand colours directly. */
      --grad-warm: #665D54;
      --grad-cool: #312ECD;
    }

    /* Dark Theme */
    [data-theme="dark"] {
      --title-color: #9ca7f2;
      --background-elements: #9CA7F2;
      --accent-color: #B5AEA8;
      --accent2-color: #E2E1DF;
      --background-color: #1A1A1A;
      --secondary-background-color: #2c2c2c82;
      --invert-color: 0;
      --no-invert-color: 1;
      --brand-logo: url('/brand/novvative-sand.png');
      /* Accent rule: brand light blue reads on the dark ground (7.64:1). */
      --accent-rule: #9CA7F2;
      --text-muted: var(--accent-color);
      --text-accent: var(--title-color);
      /* On the dark ground the brand colours already read, so gradient text
         keeps them unchanged. */
      --grad-warm: var(--accent-color);
      --grad-cool: var(--title-color);
    }

    body {
      margin: 0;
      padding: 0;
      background-color: var(--background-color);
      color: var(--accent2-color);
      overflow-x: hidden;
      font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      background-color: var(--secondary-background-color);
      backdrop-filter: blur(10px);
      max-width: 1000px;
      margin: 10px auto;
      border-radius: 15px;
      position: sticky;
      top: 10px;
      z-index: 100;
    }

    .logo {
      display: block;
      width: 120px;
      height: 35px;
      background: var(--brand-logo) no-repeat left center / contain;
      transition: transform 0.3s ease;
      cursor: pointer;
    }

    .logo:hover {
      transform: scale(1.05);
    }

    nav ul {
      display: flex;
      gap: 20px;
      margin: 0;
      list-style: none;
    }

    nav ul li a {
      text-decoration: none;
      color: var(--text-muted);
      transition: color 0.3s ease, margin 0.3s ease;
    }

    nav ul li a:hover {
      color: var(--accent2-color);
      margin: 0 20px;
    }

    nav ul li .active {
      color: var(--accent2-color);
    }

    nav button {
      padding: 10px 20px;
      border-radius: 10px;
      background-color: var(--accent2-color);
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      align-items: center;
      color: var(--background-color);
    }

    nav button p {
      margin: 0 0 0 10px;
      transition: margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    nav button:hover .redirection-icon {
      width: 15px;
    }

    nav button:hover p {
      margin: 0 10px 0 0;
    }

    nav button:hover .btn-logo {
      width: 0;
      opacity: 0;
    }

    .btn-logo {
      height: 15px;
      filter: invert(var(--no-invert-color));
      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      width: 15px;
      opacity: 1;
      overflow: hidden;
    }

    .redirection-icon {
      height: 15px;
      width: 0;
      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      filter: invert(var(--invert-color));
    }

    .burger-menu-icon {
      background: none;
      width: 50px;
      height: 50px;
      position: relative;
      display: none;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      margin: -30px 0;
    }

    .burger-menu-icon svg {
      fill: none;
      stroke: var(--accent2-color);
      stroke-width: 6px;
      stroke-linecap: round;
      stroke-linejoin: round;
      width: 45px;
      height: 45px;
      transform: scale(1.2);
    }

    .burger-menu-icon svg use:nth-of-type(1) {
      opacity: 1;
      stroke-dashoffset: 221;
      stroke-dasharray: 46 249;
      transition: stroke-dashoffset 0.12s linear 0.2s, stroke-dasharray 0.12s linear 0.2s, opacity 0s linear 0.2s;
    }

    .burger-menu-icon svg use:nth-of-type(2) {
      -webkit-animation: stroke-animation-reverse 1.2s ease-out forwards;
      animation: stroke-animation-reverse 1.2s ease-out forwards;
    }

    .burger-menu-icon input {
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 11;
      cursor: pointer;
      opacity: 0;
    }

    .burger-menu-icon input:checked+svg use:nth-of-type(1) {
      stroke-dashoffset: 175;
      stroke-dasharray: 0 295;
      opacity: 0;
      transition: stroke-dashoffset 0.07s linear 0.07s, stroke-dasharray 0.07s linear 0.07s, opacity 0s linear 0.14s;
    }

    .burger-menu-icon input:checked+svg use:nth-of-type(2) {
      -webkit-animation: stroke-animation 1.2s ease-out forwards;
      animation: stroke-animation 1.2s ease-out forwards;
    }

    @-webkit-keyframes stroke-animation {
      0% {
        stroke-dashoffset: 295;
        stroke-dasharray: 25 270;
      }

      50% {
        stroke-dashoffset: 68;
        stroke-dasharray: 59 236;
      }

      65% {
        stroke-dashoffset: 59;
        stroke-dasharray: 59 236;
      }

      100% {
        stroke-dashoffset: 68;
        stroke-dasharray: 59 236;
      }
    }

    @keyframes stroke-animation {
      0% {
        stroke-dashoffset: 295;
        stroke-dasharray: 25 270;
      }

      50% {
        stroke-dashoffset: 68;
        stroke-dasharray: 59 236;
      }

      65% {
        stroke-dashoffset: 59;
        stroke-dasharray: 59 236;
      }

      100% {
        stroke-dashoffset: 68;
        stroke-dasharray: 59 236;
      }
    }

    @-webkit-keyframes stroke-animation-reverse {
      0% {
        stroke-dashoffset: 68;
        stroke-dasharray: 59 236;
      }

      50% {
        stroke-dashoffset: 290;
        stroke-dasharray: 25 270;
      }

      65% {
        stroke-dashoffset: 295;
        stroke-dasharray: 25 270;
      }

      100% {
        stroke-dashoffset: 290;
        stroke-dasharray: 25 270;
      }
    }

    @keyframes stroke-animation-reverse {
      0% {
        stroke-dashoffset: 68;
        stroke-dasharray: 59 236;
      }

      50% {
        stroke-dashoffset: 290;
        stroke-dasharray: 25 270;
      }

      65% {
        stroke-dashoffset: 295;
        stroke-dasharray: 25 270;
      }

      100% {
        stroke-dashoffset: 290;
        stroke-dasharray: 25 270;
      }
    }

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      display: flex;
      align-items: flex-end;
      z-index: 900;
    }

    .overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .mob-nav {
      background: var(--background-color);
      width: 100%;
      padding: 20px;
      border-radius: 20px 20px 0 0;
      transform: translateY(100%);
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .overlay.active .mob-nav {
      transform: translateY(0);
    }

    .mob-nav ul {
      list-style: none;
      padding: 0;
      margin: 0 0 20px 0;
    }

    .mob-nav ul li {
      margin: 10px 0;
    }

    .mob-nav ul li a {
      color: var(--text-muted);
      text-decoration: none;
      font-size: 1.2rem;
      display: block;
      padding: 10px;
      transition: color 0.3s ease, margin 0.3s ease;
    }

    .mob-nav ul li a:hover {
      color: var(--accent2-color);
      margin: 0 5px;
    }

    .mob-nav ul li .active {
      color: var(--accent2-color);
    }

    .mob-nav button {
      width: 100%;
      margin-top: 10px;
      padding: 10px 20px;
      border-radius: 10px;
      background-color: var(--accent2-color);
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mob-nav button p {
      margin: 0 0 0 10px;
      transition: margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      color: var(--background-color);
    }

    .mob-nav button:hover .redirection-icon {
      width: 15px;
    }

    .mob-nav button:hover p {
      margin: 0 10px 0 0;
    }

    .mob-nav button:hover .btn-logo {
      width: 0;
      opacity: 0;
    }

    .slider {
      height: 5px;
      background-color: #4b4b4b;
      max-width: 100px;
      border-radius: 10px;
      margin: 0 auto;
    }

    main {
      padding: 20px 0;
    }

    @media (max-width: 568px) {
      .burger-menu-icon {
        display: flex;
      }

      nav {
        margin: 10px;
      }

      nav ul,
      nav button {
        display: none;
      }
    }

    .hero-section {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      background: transparent;
      padding: 30vh 0;
      margin: -25vh 0;
      z-index: 10;
    }

    /* Large floating spheres */
    .hero-sphere {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
      filter: blur(1px);
      animation: floatSphere 20s ease-in-out infinite;
      pointer-events: none;
      z-index: 1;
    }

    .hero-sphere-1 {
      width: 300px;
      height: 300px;
      top: 10%;
      left: -100px;
      background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent-rule) 30%, transparent), color-mix(in srgb, var(--accent-rule) 15%, transparent), color-mix(in srgb, var(--accent-rule) 5%, transparent));
      animation: floatSphere1 25s ease-in-out infinite;
      box-shadow: 0 0 100px color-mix(in srgb, var(--accent-rule) 30%, transparent);
    }

    .hero-sphere-2 {
      width: 400px;
      height: 400px;
      top: 30%;
      right: -150px;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
      animation: floatSphere2 30s ease-in-out infinite;
      box-shadow: 0 0 120px rgba(255, 255, 255, 0.2);
    }

    @keyframes floatSphere1 {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
      }

      25% {
        transform: translate(50px, -30px) scale(1.1);
        opacity: 0.8;
      }

      50% {
        transform: translate(80px, 20px) scale(0.9);
        opacity: 0.5;
      }

      75% {
        transform: translate(30px, 40px) scale(1.05);
        opacity: 0.7;
      }
    }

    @keyframes floatSphere2 {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
      }

      30% {
        transform: translate(-40px, 50px) scale(0.95);
        opacity: 0.6;
      }

      60% {
        transform: translate(-80px, -20px) scale(1.08);
        opacity: 0.3;
      }

      90% {
        transform: translate(-20px, 30px) scale(0.98);
        opacity: 0.5;
      }
    }

    /* Ensure hero content is above spheres */
    .hero-content {
      position: relative;
      z-index: 100;
    }

    /* Ensure interactive elements are clickable */
    .hero-content .shiny-cta,
    .hero-content .search-container {
      position: relative;
      z-index: 101;
    }


/* Footer theme toggle. Lived in a page-level <style> on the old single-page
   site, so the split pages lost it. Shared here because every page has the footer. */
.theme-toggle {
display: flex;
justify-content: space-between;
align-items: center;
gap: 5px;
background-color: var(--background-color);
padding: 3px;
border-radius: 20px;
cursor: pointer;}

.theme-toggle img {
filter: invert(var(--no-invert-color));
height: 15px;
pointer-events: none;
/* Prevents image from capturing clicks */}

.mode-cover {
aspect-ratio: 1;
padding: 3px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;}

.active-mode {
background-color: var(--secondary-background-color);}