:root {
   --blue-deep: #24379E;
   --blue-mid: #3453D6;
   --blue-bright: #4C6BEF;
   --node-cyan: #8FC7FF;
   --star-gold: #F4D742;
   --star-green: #7FD957;
 }

 body {
   font-family: 'Inter', sans-serif;
   margin: 0;
 }

 .hero-wrap {
   position: relative;
   background: linear-gradient(120deg, var(--blue-deep) 0%, var(--blue-mid) 55%, var(--blue-bright) 100%);
   overflow: hidden;
   min-height: 100vh;
 }

 /* soft background bubbles like the reference */
 .bubble {
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.05);
 }

 /* ===== Navbar ===== */
 .navbar-star {
   padding: 1.3rem 0;
   position: relative;
   z-index: 5;
 }

 .brand-lockup {
   display: flex;
   align-items: center;
   gap: 0.7rem;
 }

 .brand-emblem {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.12);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 1.3rem;
   flex-shrink: 0;
 }

 .brand-text {
   line-height: 1.15;
 }

 .brand-text .name {
   font-family: 'Poppins', sans-serif;
   font-weight: 700;
   color: #fff;
   font-size: 1.05rem;
   letter-spacing: 0.3px;
 }

 .brand-text .sub {
   color: rgba(255, 255, 255, 0.65);
   font-size: 0.68rem;
   font-weight: 500;
 }

 .navbar-star .nav-link {
   color: #fff;
   font-family: 'Poppins', sans-serif;
   font-weight: 600;
   font-size: 0.85rem;
   letter-spacing: 0.4px;
   padding: 0.5rem 0.9rem !important;
   opacity: 0.9;
 }

 .navbar-star .nav-link:hover {
   opacity: 1;
 }

 .navbar-star .dropdown-menu {
   border: none;
   border-radius: 10px;
   padding: 0.5rem;
 }

 .btn-login {
   border: 1.5px solid var(--star-gold);
   color: #fff;
   font-family: 'Poppins', sans-serif;
   font-weight: 600;
   font-size: 0.85rem;
   padding: 0.5rem 1.6rem;
   border-radius: 8px;
   transition: all 0.2s ease;
 }

 .btn-login:hover {
   background: var(--star-gold);
   color: var(--blue-deep);
 }

 /* ===== Hero content ===== */
 .hero-content {
   position: relative;
   z-index: 5;
   padding-top: 5vh;
   padding-bottom: 6vh;
 }

 .hero-title {
   font-family: 'Poppins', sans-serif;
   font-weight: 800;
   color: #fff;
   font-size: clamp(2rem, 4vw, 2.9rem);
   line-height: 1.2;
 }

 .hero-text {
   color: rgba(255, 255, 255, 0.85);
   font-size: 1.05rem;
   max-width: 480px;
   line-height: 1.6;
 }

 /* ===== Network graphic ===== */
 .network-wrap {
   position: relative;
   z-index: 3;
   width: 100%;
   max-width: 560px;
   margin: 0 auto;
 }

 .network-wrap svg {
   width: 100%;
   height: auto;
   overflow: visible;
 }

 .node {
   fill: var(--node-cyan);
 }

 .node-lg {
   fill: var(--node-cyan);
 }

 .net-line {
   stroke: rgba(143, 199, 255, 0.35);
   stroke-width: 1.4;
 }

 .star-badge {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   width: 260px;
 }

 .star-badge svg {
   width: 130px;
   height: auto;
   filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
 }

 .star-wordmark {
   font-family: 'Poppins', sans-serif;
   font-style: italic;
   font-weight: 800;
   font-size: 2.3rem;
   color: #fff;
   letter-spacing: 1px;
   margin-top: -0.6rem;
   text-shadow: 0 2px 0 var(--blue-deep);
 }

 .star-tagline {
   font-size: 0.62rem;
   color: rgba(255, 255, 255, 0.75);
   letter-spacing: 0.3px;
   margin-top: -0.3rem;
 }

 .star-caption {
   font-family: 'Poppins', sans-serif;
   font-weight: 700;
   font-size: 0.85rem;
   color: #fff;
   letter-spacing: 0.5px;
   margin-top: 0.2rem;
 }

 .image-lago {
   width: 270%;
   margin-left: -162px;
 }


 @media (max-width: 991.98px) {
   .network-wrap {
     margin-top: 3rem;
     max-width: 380px;
   }

   .hero-content {
     text-align: center;
   }

   .hero-text {
     margin-left: auto;
     margin-right: auto;
   }

   .image-lago {
     width: 205%;
     margin-left: -134px;
   }

 }