@font-face {
         font-family: 'Satoshi';
         src: url('https://assets-persist.lovart.ai/agent-static-assets/AlimamaShuHeiTi-Bold.otf') format('opentype');
         font-weight: bold;
     }

     @font-face {
         font-family: 'Inter';
         src: url('https://assets-persist.lovart.ai/agent-static-assets/NotoSansHans-Regular.otf') format('opentype');
         font-weight: normal;
     }

     :root {
         --midnight-mirage: #001F3F;
         --nuit-blanche: #1E488F;
         --picture-book-green: #00804C;
         --mantis: #74C365;
         --first-colors-spring: #DBE64C;
         --sunrise-gold: #F5A623;
         --praxeti-white: #F6F7ED;
     }

     body {
         font-family: 'Inter', sans-serif;
         background-color: var(--midnight-mirage);
         color: var(--praxeti-white);
         max-width: 1400px;
         margin: 0 auto;
         overflow-x: hidden;
     }

     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
         font-family: 'Satoshi', sans-serif;
         font-weight: bold;
     }

     .navbar {
         padding: 1.5rem 0;
         background-color: transparent;
     }

     .navbar-brand img {
         height: 75px;
     }

     .navbar-nav .nav-link {
         color: var(--praxeti-white);
         margin: 0 1rem;
         font-weight: 500;
         transition: color 0.3s ease;
     }

     .navbar-nav .nav-link:hover {
         color: var(--mantis);
     }

     .btn-primary {
         background-color: var(--first-colors-spring);
         border: none;
         color: var(--midnight-mirage);
         font-weight: 600;
         padding: 0.75rem 1.5rem;
         border-radius: 4px;
         transition: all 0.3s ease;
     }

     .btn-primary:hover {
         background-color: var(--sunrise-gold);
         transform: translateY(-2px);
     }

     .btn-outline {
         background-color: transparent;
         border: 2px solid var(--praxeti-white);
         color: var(--praxeti-white);
         font-weight: 600;
         padding: 0.75rem 1.5rem;
         border-radius: 4px;
         transition: all 0.3s ease;
         margin-left: 1rem;
     }

     .btn-outline:hover {
         background-color: var(--praxeti-white);
         color: var(--midnight-mirage);
         transform: translateY(-2px);
     }

     .hero {
         padding: 6rem 0;
         position: relative;
         overflow: hidden;
     }

     .hero h1 {
         font-size: 3.5rem;
         margin-bottom: 1.5rem;
         line-height: 1.2;
     }

     .hero p {
         font-size: 1.25rem;
         margin-bottom: 2.5rem;
         opacity: 0.9;
     }

     .hero-graphic {
         position: relative;
     }

     .hero-graphic img {
         max-width: 100%;
         height: auto;
     }

     .horizon-line {
         height: 1px;
         background-color: var(--praxeti-white);
         opacity: 0.3;
         margin: 3rem 0;
     }

     .features {
         padding: 6rem 0;
         background-color: rgba(30, 72, 143, 0.1);
         position: relative;
     }

     .features h2 {
         text-align: center;
         margin-bottom: 3rem;
         font-size: 2.5rem;
     }

     .feature-card {
         background-color: rgba(0, 31, 63, 0.5);
         border-radius: 8px;
         padding: 2rem;
         height: 100%;
         transition: transform 0.3s ease;
         border-top: 3px solid var(--mantis);
     }

     .feature-card:hover {
         transform: translateY(-10px);
     }

     .feature-icon {
         font-size: 2.5rem;
         color: var(--mantis);
         margin-bottom: 1.5rem;
     }

     .feature-card h3 {
         margin-bottom: 1rem;
         font-size: 1.5rem;
     }

     .about {
         padding: 6rem 0;
         position: relative;
     }

     .about h2 {
         margin-bottom: 2rem;
         font-size: 2.5rem;
     }

     .about-image {
         position: relative;
     }

     .about-image img {
         max-width: 60%;
         margin: 0 auto;
         display: block;
     }

     .about-image .triangle-overlay {
         position: absolute;
         width: 300px;
         height: 300px;
         background-color: rgba(116, 195, 101, 0.2);
         clip-path: polygon(0 0, 100% 0, 50% 100%);
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%) rotate(45deg);
         z-index: -1;
     }

     .contact {
         padding: 6rem 0;
         background-color: rgba(30, 72, 143, 0.1);
         position: relative;
     }

     .contact h2 {
         text-align: center;
         margin-bottom: 3rem;
         font-size: 2.5rem;
     }

     .form-control {
         background-color: rgba(246, 247, 237, 0.1);
         border: 1px solid rgba(246, 247, 237, 0.2);
         color: var(--praxeti-white);
         padding: 0.75rem;
         margin-bottom: 1.5rem;
     }

     .form-control:focus {
         background-color: rgba(246, 247, 237, 0.15);
         border-color: var(--mantis);
         color: var(--praxeti-white);
         box-shadow: none;
     }

     .signal-wave {
         position: absolute;
         border: 1px dotted var(--mantis);
         border-radius: 50%;
         opacity: 0.2;
     }

     .wave-1 {
         width: 300px;
         height: 300px;
         bottom: -150px;
         right: -150px;
     }

     .wave-2 {
         width: 200px;
         height: 200px;
         bottom: -100px;
         right: -100px;
     }

     .wave-3 {
         width: 100px;
         height: 100px;
         bottom: -50px;
         right: -50px;
     }

     .geometric-overlay {
         position: absolute;
         width: 200px;
         height: 200px;
         background-color: rgba(219, 230, 76, 0.1);
         clip-path: polygon(0 0, 100% 0, 100% 100%);
         transform: rotate(45deg);
     }

     .overlay-1 {
         top: 10%;
         left: -100px;
     }

     .overlay-2 {
         bottom: 20%;
         right: -100px;
         transform: rotate(60deg);
     }

     .tessellated-pattern {
         position: absolute;
         width: 100%;
         height: 100%;
         background-image: linear-gradient(45deg, var(--mantis) 25%, transparent 25%),
             linear-gradient(-45deg, var(--mantis) 25%, transparent 25%);
         background-size: 20px 20px;
         opacity: 0.05;
         z-index: -1;
     }

     footer {
         padding: 3rem 0;
         text-align: center;
         position: relative;
     }

     footer p {
         margin-bottom: 0;
         opacity: 0.7;
     }

     .social-icons {
         margin-top: 1.5rem;
     }

     .social-icons a {
         color: var(--praxeti-white);
         font-size: 1.5rem;
         margin: 0 0.5rem;
         transition: color 0.3s ease;
     }

     .social-icons a:hover {
         color: var(--mantis);
     }

     .about-section {
         padding: 6rem 0;
         position: relative;
     }

     .about-section h2 {
         margin-bottom: 2rem;
         font-size: 2.5rem;
     }

     .about-content {
         padding-right: 2rem;
     }

     .about-content .lead {
         font-size: 1.1rem;
         margin-bottom: 2rem;
         opacity: 0.9;
     }

     .mission-points {
         margin-top: 2rem;
     }

     .mission-point {
         display: flex;
         align-items: flex-start;
         margin-bottom: 1.5rem;
     }

     .point-marker {
         display: inline-block;
         width: 12px;
         height: 12px;
         background-color: var(--mantis);
         border-radius: 50%;
         margin-right: 1rem;
         margin-top: 0.5rem;
         flex-shrink: 0;
     }

     .mission-point p {
         margin: 0;
         line-height: 1.6;
     }

     .features-section {
         padding: 6rem 0;
         background-color: rgba(30, 72, 143, 0.1);
         position: relative;
     }

     .features-section h2 {
         text-align: center;
         margin-bottom: 2rem;
         font-size: 2.5rem;
     }

     .features-section p {
         text-align: center;
         max-width: 800px;
         margin: 0 auto 3rem;
         font-size: 1.1rem;
         opacity: 0.9;
     }

     .features-section ul {
         column-count: 2;
         column-gap: 2rem;
         list-style: none;
         padding-left: 0;
     }

     .contact-form-container {
         text-align: center;
     }

     .contact-form-container h2 {
         margin-bottom: 1.5rem;
     }

     .contact-form-container p {
         max-width: 900px;
         margin: 0 auto 2rem;
         font-size: 1.1rem;
         line-height: 1.6;
     }

     .section-header {
         text-align: center;
         margin-bottom: 3rem;
     }

     .section-header h2 {
         font-size: 2.5rem;
     }

     .signal-waves-bg {
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         pointer-events: none;
         z-index: 0;
     }

     .btn-outline-light {
         background-color: transparent;
         border: 2px solid var(--praxeti-white);
         color: var(--praxeti-white);
         font-weight: 600;
         padding: 0.75rem 1.5rem;
         border-radius: 4px;
         transition: all 0.3s ease;
         text-decoration: none;
         display: inline-block;
     }

     .btn-outline-light:hover {
         background-color: var(--praxeti-white);
         color: var(--midnight-mirage);
         transform: translateY(-2px);
     }