:root{
    --nxspark-purple: rgb(123, 31, 162);
    --nxspark-violet: rgb(103, 58, 183);
    --nxspark-pink: rgb(244, 143, 177);
}

.nxspark-heading{
    color:#fff;
    margin:0;
}

.nxspark-magic{
    display:inline-block;
    position:relative;
    overflow:visible !important;
}

.nxspark-text{
    background:linear-gradient(
        90deg,
        var(--nxspark-purple),
        var(--nxspark-violet),
        var(--nxspark-pink),
        var(--nxspark-purple)
    );

    background-size:200% auto;

    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;

    animation:nxsparkGradientMove 3s linear infinite;
}

.nxspark-star{
    position:absolute;
    width:26px;
    height:26px;
    pointer-events:none;
    z-index:9999;
    left:0;
    top:0;
}

.nxspark-star svg{
    width:100%;
    height:100%;
    display:block;
    animation:nxsparkRotate 1s linear infinite;
}

.nxspark-star svg path{
    fill:var(--nxspark-violet);
}

@keyframes nxsparkGradientMove{
    from{
        background-position:0% center;
    }
    to{
        background-position:-200% center;
    }
}

@keyframes nxsparkRotate{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(180deg);
    }
}

@keyframes nxsparkPop{
    0%{
        transform:scale(0);
        opacity:0;
    }

    50%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(0);
        opacity:0;
    }
}

.hero-headline {
   max-width: 1050px;
   margin: 0 auto;
   text-align: center;
   font-family: Arial, sans-serif;
}

.headline-top {
   font-size: clamp(18px, 2vw, 28px);
   font-weight: 800;
   letter-spacing: 2px;
   color: #ffffff;
   text-transform: uppercase;
   margin-bottom: 8px;
}

.headline-main {
font-size: clamp(38px, 5vw, 52px);
    line-height: 1.2;
    font-weight: 1000;
    letter-spacing: -2px;
    text-transform: uppercase;
}

.gradient-pink {
      background: linear-gradient(90deg, #0fbdd9, #e0c6ff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.white-text {
   color: #ffffff;
}

.gradient-cyan {
   background: linear-gradient(90deg, #00eaff, #45f3ff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.headline-open {
  display: inline-block;
    margin-top: 14px;
    padding: 5px 8px;
    font-size: clamp(24px, 3vw, 42px);
    font-weight: 1000;
    color: #ffffff;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(0, 234, 255, 0.3);
    border-radius: 10px;
}

.headline-open span {
   color: #00eaff;
   text-shadow: 0 0 20px rgba(0,234,255,.5);
}

.headline-sub {
   max-width: 950px;
   margin: 25px auto 0;
   color: #f5f5f5;
   font-size: clamp(19px, 2.2vw, 30px);
   line-height: 1.35;
   font-weight: 600;
}

.headline-sub strong {
   font-weight: 900;
   color: #ffffff;
}

.highlight-pink {
color: #6dedf9;
   font-weight: 900;
}

.highlight-cyan {
   color: #00eaff;
   font-weight: 900;
}

.tiktok-highlight {
   background: linear-gradient(90deg, #ff277f, #00eaff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.time-highlight {
    display: inline-block;
    color: #ffffff;
    font-weight: 1000;
    padding: 2px 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, #00adef, #005b88);

}

@media (max-width: 576px) {

   .headline-main {
      letter-spacing: -1px;
   }

   .headline-open {
      padding: 7px 14px;
   }

   .headline-sub {
      margin-top: 18px;
   }
}