body {
     margin: 0;
     background: #0e0e0e;
     font-family: 'Arial', sans-serif;
     color: #fff;
 }

 .center-logo,
 .intro-circle,
 .demo-section,
 .merge-section {
     position: absolute;
 }

 .center-logo {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(1);
     transition: transform 1.2s ease-in-out;
     z-index: 10;
 }

 .center-logo.zoomed {
     transform: translate(-50%, -50%) scale(3);
 }

 .intro-circle {
     color: white;
     width: 100px;
     height: 100px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     opacity: 0;
     transition: opacity 1s ease-in-out;
 }

 .fade-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #0e0e0e;
     opacity: 0;
     z-index: 20;
     transition: opacity 1s ease-in-out;
     pointer-events: none;
 }

 .fade-overlay.visible {
     opacity: 1;
     pointer-events: auto;
 }

 .demo-section,
 .merge-section {
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     display: none;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 20px;
     text-align: center;
     z-index: 5;
 }

 .demo-box {
     width: 280px;
     height: 280px;
     background: #1e1e1e;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
 }

 .demo-text {
     max-width: 600px;
 }

 .demo-text h2 {
     margin-bottom: 12px;
 }

 .demo-text p {
     line-height: 1.6;
 }

 .cta-button,
 .nav-button {
     padding: 10px 20px;
     color: #000;
     border: none;
     border-radius: 6px;
     font-weight: bold;
     margin: 4px;
     cursor: pointer;
     text-decoration: none;
 }

 .circle {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-weight: bold;
     position: absolute;
     opacity: 0;
 }

 .circle.fly-to-center {
     animation: flyToCenter 1s forwards;
 }

 @keyframes flyToCenter {
     to {
         top: 45%;
         left: 45%;
         transform: scale(0.9);
         opacity: 1;
     }
 }

 #center-circle {
     background: #ffffff;
     color: #000;
     z-index: 5;
     transform: scale(1);
     transition: transform 1.5s ease-in-out;
 }

 #center-circle.grow {
     transform: scale(2.5);
 }

 .merge-text {
     position: absolute;
     bottom: 80px;
     width: 100%;
     text-align: center;
     font-size: 1.4em;
     opacity: 0;
     transition: opacity 1s ease-in-out;
 }

 .merge-text.visible {
     opacity: 1;
 }

 .nav-controls {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     justify-content: center;
     margin-top: 10px;
 }

 .demo-box.coach-os {
     border: 2px solid #9900ffff;
 }

 .demo-box.fitness {
     border: 2px solid #2600ffff;
 }

 .demo-box.nutrition {
     border: 2px solid #038c05ff;
 }

 .demo-box.diary {
     border: 2px solid #8c0303ff;
 }

 .demo-box.running {
     border: 2px solid #dc660cff;
 }

 .demo-box.tools {
     border: 2px solid #6f6f6fff;
 }

 #demoTitle.coach-os {
     color: #9900ffff;
 }

 #demoTitle.fitness {
     color: #2600ffff;
 }

 #demoTitle.nutrition {
     color: #038c05ff;
 }

 #demoTitle.diary {
     color: #8c0303ff;
 }

 #demoTitle.tools {
     color: #6f6f6fff;
 }

 #demoTitle.running {
     color: #dc660cff;
 }

 .intro-circle.coach-os,
 .circle.coach-os {
     background-color: #9900ffff;
 }

 .intro-circle.fitness,
 .circle.fitness {
     background-color: #2600ffff;
 }

 .intro-circle.nutrition,
 .circle.nutrition {
     background-color: #038c05ff;
 }

 .intro-circle.diary,
 .circle.diary {
     background-color: #8c0303ff;
 }

 .intro-circle.tools,
 .circle.tools {
     background-color: #6f6f6fff;
 }

 .intro-circle.running,
 .circle.running {
     background-color: #dc660cff;
 }

 body {
     margin: 0;
     background: #0e0e0e;
     font-family: 'Arial', sans-serif;
     overflow-x: hidden;
     color: #ffffff;
 }

 .circle-container {
     width: 100vw;
     height: 100vh;
     position: relative;
     overflow: hidden;
     touch-action: pan-x pan-y;
     transform-origin: center center;
 }


 .logo-node {
     width: 80px;
     height: 80px;
     color: #fff;
     font-weight: bold;
     border-radius: 50%;
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: transform 0.3s ease;
     z-index: 2;
     background-color: var(--accent);
 }

 .logo-node:hover {
     transform: scale(1.1);
 }

 svg {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
 }

 img.logo {
     width: 180px;
 }

 .info-box {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     background: #1e1e1e;
     padding: 20px;
     border-radius: 8px;
     max-width: 700px;
     opacity: 0;
     transition: opacity 0.5s ease;
 }

 .info-box.visible {
     opacity: 1;
 }

 .connection-details {
     margin-top: 10px;
     font-size: 0.95em;
     color: #aaffcc;
 }

 section {
     position: relative;
     width: 100%;
     overflow: hidden;
 }

 .center-logo .logo img {
     max-width: 150px;
     display: block;
     margin: 0 auto;
 }

 #ctaLink {
     margin-top: 50px;
 }

 .system-intro {
     padding-top: 50px;
     max-width: 1000px;
     margin: 0 auto 100px;
 }

 .section-header {
     margin-bottom: 40px;
 }

 .section-intro {
     height: 100vh;
 }

 .system-function {
     margin-top: 100px;
     max-width: 1000px;
     margin: 100px auto 0;
 }

 .system-origin {
     margin-top: 80px;
     padding-bottom: 100px;
 }

 .expectation-section {
     padding: 80px 0px;
     background-color: #0e0e0e;
     color: #ffffff;
     max-width: 1000px;
     text-align: center;
     margin: 0 auto;
 }

 h2 {
     margin-bottom: 40px;
     font-size: 2.5em;
 }

 .expectation-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 40px;
     justify-content: center;
 }

 .expectation-column {
     flex: 1 1 200px;
     background-color: #1b1b1b;
     border: 1px solid var(--accent);
     border-radius: 12px;
     max-width: 100%;
 }

 .expectation-column h3 {
     margin-bottom: 16px;
     font-size: 1.5em;
     color: var(--accent);
 }

 .expectation-column ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .expectation-column li {
     margin-bottom: 12px;
     line-height: 1.6;
 }

 .why-this-system {
     padding: 80px 10px;
     background-color: #111;
     color: #fff;
     text-align: center;
 }

 .why-this-system h2 {
     margin-bottom: 40px;
     font-size: 2.5em;
     color: var(--accent);
 }

 .why-box {
     max-width: 900px;
     margin: 0 auto;
     background: #1c1c1c;
     border: 1px solid var(--accent);
     padding: 40px;
     border-radius: 12px;
     text-align: left;
     line-height: 1.7;
     font-size: 1.1em;
 }

 .why-tydra {
     background: #0e0e0e;
     color: #fff;
     padding: 100px 0px;
     text-align: center;
 }

 .why-tydra div {
     max-width: 900px;
     margin: 0 auto;
     line-height: 1.6;
 }

 .cta-button-entry {
     background: var(--accent);
     color: #000;
     padding: 16px 28px;
     border-radius: 8px;
     text-decoration: none;
     font-weight: bold;
     font-size: 1.2em;
     transition: background 0.3s ease, transform 0.2s ease;
 }

 .cta-button-entry:hover {
     background: var(--accent);
     transform: scale(1.05);
 }

 .cta-button-entry.dark {
     background: transparent;
     color: #fff;
     border: 2px solid var(--accent);
 }

 .cta-button-entry.dark:hover {
     background: var(--accent);
     color: #000;
 }

 @keyframes pulse {

     0%,
     100% {
         transform: translate(-50%, -50%) scale(1);
     }

     50% {
         transform: translate(-50%, -50%) scale(1.06);
     }
 }

 .section-relations {
     height: 110vh;
     padding-bottom: 100px;
 }

 .why-tydra {
     background: #0e0e0e;
     color: #fff;
     padding: 120px 0px;
     text-align: center;
     position: relative;
 }

 .cta-entry {
     padding-top: 50px;
     padding-bottom: 100px;
 }

 .mobile-connections {
     display: none;
 }

 @media (max-width: 768px) {
     .section-relations {
         display: none;
     }

     .mobile-connections {
         display: block;
         margin-top: 100px;
     }

 }

 @media (min-width: 769px) {
     .relation-mobile {
         display: none;
     }
 }

 @media (max-width: 768px) {
     .circle-container {
         display: none;
     }
 }

 details {
     border-top: 1px white solid;
     padding: 15px;
 }