* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }


 body {
   font-family: "Segoe UI", sans-serif;
   line-height: 1.6;
   color: #fff;
   background: url('https://cdnb.artstation.com/p/assets/images/images/037/263/051/original/karina-formanova-rainforest-animation.gif?1619929364%27') no-repeat center center fixed;
   background-size: cover;
   position: relative;
   overflow-x: hidden;
 }


 body::before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.0);
   z-index: -1;
 }


 .content-box {
   max-width: 1100px;
   margin: 0 auto;
   background: rgba(26, 26, 46, 0.85);
   border-radius: 16px;
   padding: 2rem;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
 }


 .navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem 2rem;
   background: rgba(0, 0, 0, 0.9);
   border-radius: 12px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
   position: sticky;
   top: 0;
   z-index: 10;
 }

 .logo {
   font-weight: bold;
   font-size: 1.2rem;
   color: #fff;
 }

 .nav-links {
   display: flex;
   gap: 1.5rem;
 }

 .nav-links a {
   text-decoration: none;
   color: #fff;
   transition: color 0.3s;
 }

 .nav-links a:hover {
   color: #00c3ff;
 }

 .nav-toggle {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   width: 44px;
   height: 44px;
   align-items: center;
   justify-content: center;
   padding: 0.25rem;
 }

 .nav-toggle .hamburger {
   display: block;
   width: 22px;
   height: 2px;
   background: #fff;
   position: relative;
   transition: all 0.3s ease;
 }

 .nav-toggle .hamburger::before,
 .nav-toggle .hamburger::after {
   content: "";
   position: absolute;
   left: 0;
   width: 22px;
   height: 2px;
   background: #fff;
   transition: all 0.3s ease;
 }

 .nav-toggle .hamburger::before {
   top: -7px;
 }

 .nav-toggle .hamburger::after {
   top: 7px;
 }

 .navbar.open .nav-toggle .hamburger {
   background: transparent;
 }

 .navbar.open .nav-toggle .hamburger::before {
   transform: rotate(45deg) translate(5px, 5px);
   top: 0;
 }

 .navbar.open .nav-toggle .hamburger::after {
   transform: rotate(-45deg) translate(5px, -5px);
   top: 0;
 }


 .hero {
   text-align: center;
   padding: 6rem 2rem;
 }

 .hero-title {
   font-size: 2.5rem;
   margin-bottom: 1rem;
 }

 .highlight {
   color: #00c3ff;
 }

 .hero-subtitle {
   margin-bottom: 2rem;
   font-size: 1.2rem;
   color: #ccc;
 }

 .btn {
   display: inline-block;
   padding: 0.8rem 1.5rem;
   background: #00c3ff;
   color: #fff;
   border-radius: 8px;
   text-decoration: none;
   transition: background 0.3s;
 }

 .btn:hover {
   background: #0099cc;
 }


 .section {
   padding: 4rem 2rem;
   max-width: 1000px;
   margin: auto;
 }

 .section-title {
   font-size: 2rem;
   margin-bottom: 1.5rem;
   text-align: center;
   color: #fff;
 }

 .gray-bg {
   background: rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   padding: 2rem;
 }


 #about {
   margin-bottom: 6rem;
 }

 .grid {
   place-items: center;
   display: grid;
   gap: 2rem;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   justify-content: center;
 }

 .gallery {
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }

 .gallery img {
   width: 120px;
   height: 120px;
   object-fit: contain;
   border-radius: 10px;
   transition: transform 0.3s;
   cursor: pointer;
   padding: 10px;
 }

 .gallery img:hover {
   transform: scale(1.08);
 }

 .card {
   cursor: pointer;
   background: rgba(255, 255, 255, 0.12);
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
   transition: transform 0.3s, box-shadow 0.3s;
   padding-bottom: 1rem;
   max-width: 380px;
   width: 100%;
   display: flex;
   flex-direction: column;
 }

 .card img {
   width: 100%;
   display: block;
   aspect-ratio: 3 / 2;
   object-fit: cover;
   height: auto;
   max-height: 260px;
 }

 .card h4 {
   margin: 1rem;
   font-size: 1.2rem;
   color: #fff;
 }

 .card p {
   margin: 0 1rem;
   color: #ccc;
   font-size: 0.9rem;
 }

 .card:hover {
   transform: translateY(-5px);
   box-shadow: 0 5px 12px rgba(0, 0, 0, 0.8);
 }


 footer {
   text-align: center;
   padding: 1.5rem;
   background: rgba(0, 0, 0, 0.9);
   border-radius: 12px;
   margin-top: 2rem;
   color: #aaa;
   font-size: 0.9rem;
 }

 footer p {
   color: #fff;
 }


 .btn-copy {
   display: inline-block;
   padding: 0.9rem 1.8rem;
   background: #00c3ff;
   color: #fff;
   border: none;
   border-radius: 8px;
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   margin-top: 20px;
 }

 .btn-copy:hover {
   background: #0099cc;
 }


 .social-links {
   margin-top: 1.5rem;
   display: flex;
   gap: 1.2rem;
   justify-content: center;
 }

 .social-links a img {
   width: 40px;
   height: 40px;
   filter: brightness(0) invert(1);
   transition: transform 0.3s, filter 0.3s;
 }

 .social-links a img:hover {
   transform: scale(1.15);
   filter: brightness(0) invert(1) drop-shadow(0 0 6px #00c3ff);
 }


 .hidden {
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.8s ease;
 }

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

 .tooltip {
   position: relative;
   display: inline-block;
   will-change: transform;
 }

 .tooltip .tooltiptext {
   position: absolute;
   bottom: 130%;
   left: 50%;
   transform: translate3d(-50%, 10px, 0);
   width: 220px;
   background-color: rgba(0, 0, 0, 0.85);
   color: #fff;
   text-align: center;
   border-radius: 8px;
   padding: 8px 10px;
   font-size: 0.85rem;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease, transform 0.3s ease;
   z-index: 10;
   white-space: normal;
 }

@media (hover: hover) and (pointer: fine) {
  .tooltip:hover .tooltiptext {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
    pointer-events: auto;
  }
}

@media (hover: none) and (pointer: coarse) {
  .tooltip:active .tooltiptext,
  .tooltip:focus .tooltiptext {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
    pointer-events: auto;
    display: block;
  }

  .tooltip .tooltiptext {
    opacity: 0;
    display: none;
  }
}





 @media (max-width: 768px) {
   .nav-links {
     display: none;
     position: absolute;
     top: calc(100% + 0.5rem);
     right: 1rem;
     background: rgba(0, 0, 0, 0.95);
     flex-direction: column;
     gap: 0;
     padding: 0.5rem 0.75rem;
     border-radius: 8px;
     min-width: 160px;
     z-index: 1100;
   }

   .nav-links li {
     list-style: none;
   }

   .nav-links a,
   .nav-links li a {
     padding: 0.6rem 0.8rem;
     display: block;
     color: #fff;
   }

   .navbar.open .nav-links {
     display: flex;
   }

   .navbar {
     padding: 0.6rem 1rem;
   }

   .content-box {
     padding: 1rem;
   }

   .hero {
     padding: 4rem 1rem;
   }

   .gallery img {
     max-width: 100%;
   }

   .nav-toggle {
     display: flex;
   }
 }