#checkdomain {
    position: relative; 
}
#checkdomain > .container {
    position: relative; 
    z-index: 10; 
}

/* 2. The Firefly Style */
.firefly {
    position: absolute;
    top: 100%; /* Start at the BOTTOM of the container */
    left: 50%;
    background: #ffcc00; /* Gold color */
    border-radius: 50%;
    opacity: 0; 
    pointer-events: none;
    /* Warm yellow glow */
    box-shadow: 0 0 8px 2px rgba(255, 204, 0, 0.6); 
    animation: rise linear forwards;
}

/* 3. The Rising Animation */
@keyframes rise {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1; /* Fade in quickly at the bottom */
    }
    100% {
        /* Move UP (negative Y) and drift sideways */
        transform: translateY(-120vh) translateX(40px);
        opacity: 0; /* Fade out at the top */
    }
}


.comparison-grid {display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px; background: rgba(10, 14, 41, 0.4); 
    backdrop-filter: blur(10px); border: 2px solid #ffe552; 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); 
    border-radius: 12px; overflow: hidden;position: relative; 
    box-shadow: 0 0 15px rgba(255, 220, 0, 0.7);}
.cell {padding: 15px 10px; display: flex; flex-direction: column;
    align-items: center; justify-content: center;text-align: center;font-size: 0.9em;}
.header-cell {font-weight: 700; text-transform: uppercase; font-size: 0.85rem;
    letter-spacing: 0.5px; padding-top: 20px; padding-bottom: 20px; position: sticky; 
    top: 0; z-index: 10;}
.label-header {display: none;}
.them-header {color: #a0a0c0; background: rgba(10, 14, 41, 0.95);border-bottom: 1px solid rgba(255, 255, 255, 0.05);}
.us-header {color: #00ffaa; background: rgba(10, 14, 41, 0.95); 
    border-bottom: 1px solid rgba(0, 255, 170, 0.3);text-shadow: 0 0 10px rgba(0, 255, 170, 0.4); }
.label-cell {grid-column: 1 / -1; background-color: rgba(255, 255, 255, 0.05);
    color: #fff;font-weight: 600; padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-transform: uppercase; letter-spacing: 1px; font-size: 0.75rem;}
.them-cell {color: #8899a6; background-color: rgba(255, 50, 50, 0.02); }
.us-cell {color: #fff; background: linear-gradient(180deg, rgba(0, 255, 170, 0.05) 0%, rgba(0, 255, 170, 0.0) 100%);
    font-weight: 500;border-left: 1px solid rgba(0, 255, 170, 0.1); }
.icon {font-size: 1.2rem; margin-bottom: 5px; }
.badge {background: #00ffaa; color: #030832; font-size: 0.7rem; padding: 2px 6px; border-radius: 4px;
    margin-left: 5px; font-weight: 800; box-shadow: 0 0 10px rgba(0, 255, 170, 0.5); }
.fluid2cols .demo {order: 1;}
.fluid2cols .demolaunchtrades, .fluid2cols .demolaunchcroppers {order: 1;}
.fluid2cols .left {order: 2;}

.demo {background: url(../images/twodevices.avif) no-repeat;min-height: 220px; position: relative; background-position: top;
  background-size: contain; justify-items: center; align-content: end; border-radius: 13px;}
  .demolaunchtrades {background: url(../images/twodevices-plaster.avif) no-repeat;min-height: 220px; position: relative; background-position: top;
  background-size: contain; justify-items: center; align-content: end; border-radius: 13px;}
    .demolaunchcroppers {background: url(../images/twodevices-gocroppers.avif) no-repeat;min-height: 220px; position: relative; background-position: top;
  background-size: contain; justify-items: center; align-content: end; border-radius: 13px;}


.scroll-indicator {display: flex;flex-direction: column;align-items: center; justify-content: center;gap: 0px; }
 .chevron {position: relative;width: 50px; height: 20px; opacity: 0;
    animation: move-chevron 4s ease-out infinite;}
.chevron::before,.chevron::after {content: '';position: absolute;bottom: 0;
    height: 5px; width: 51%; background:#01F49F;border-radius: 5px; }
.chevron::before {left: 0;transform-origin: bottom right; transform: rotate(30deg);}
.chevron::after {right: 0;transform-origin: bottom left; transform: rotate(-30deg); }
  @keyframes move-chevron { 0% {opacity: 0;transform: translateY(-5px); }
    10% {opacity: 1;}
    20% { opacity: 0;transform: translateY(5px);}
    21% { opacity: 0; }
    100% { opacity: 0;}}
 .chevron:nth-child(2) {margin-top: -10px; animation-delay: 0.15s;}

 #secure-now-div {margin-bottom: 20px;}



.sticky-offer-bar {position: fixed; bottom: 0; left: 0; width: 100%; left:0;
  background: rgba(10, 14, 41, 0.95); border-top: 2px solid #ffe552; z-index: 9999;}
.sticky-offer-bar .inner {display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; margin-left: auto;  margin-right: auto;}  
.offer-text { display: flex; flex-direction: column; line-height: 1.2; }
.offer-label { color: #ffe552; font-size: 0.85em; text-transform: uppercase; font-weight: 500;}
.offer-price { color: #fff; font-weight: 800; font-size: 1.2rem; }
.offer-btn {background: linear-gradient(90deg, #b88a00 0%, #ffe552 100%); box-shadow: 0 0 15px rgba(255, 220, 0, 0.7);
    color: #000; font-weight: 700; padding: 10px 20px; border-radius: 9px; text-decoration: none;
    text-transform: uppercase; text-align: center; transition: all 0.3s ease-in-out;  line-height: normal;}
.offer-btn.maxbut {width: 100%; padding:10px 40px; margin-left: auto; margin-right: auto;}
.offer-btn:hover { background:linear-gradient(90deg, #a8a8a7 0%, #ffffff 100%); box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);transform: translateY(-2px) scale(1.1);}



.NY2026-display {background: url(../images/banners/bauble-banner3.avif) no-repeat;  ;
  background-size: auto 100%; background-position: right; background-color: #6546ac; }


  @media (min-width: 2000px)
{
  .NY2026-display{background-image: url(../images/banners/bauble-banner.avif) !important; background-repeat:  no-repeat; background-size: auto !important; background-position: right !important; background-color: #150c3b !important; }
}

@media (min-width: 600px)
{
  .NY2026-display {background-image: url(../images/banners/bauble-banner2.avif); background-repeat:  no-repeat; background-size: auto 100%; background-position: right; background-color: #150c3b; }
}





@media (min-width: 900px)
{
        .demo {background: url(../images/mobonly.avif) no-repeat; min-width: 300px; height: 665px; position: relative;
  background-size: auto auto; justify-items: center; align-content: end;}
  .demolaunchtrades {background: url(../images/mobonlyplaster.avif) no-repeat; min-width: 300px; height: 665px; position: relative;
  background-size: auto auto; justify-items: center; align-content: end;}
    .demolaunchcroppers {background: url(../images/mobonly-gocroppers.avif) no-repeat; min-width: 300px; height: 665px; position: relative;
  background-size: auto auto; justify-items: center; align-content: end;}
  .fluid2cols .demo {order: 2;}
    .fluid2cols .demolaunchtrades, .fluid2cols .demolaunchcroppers {order: 2;}

  
.fluid2cols .left {order: 1;}
}

@media (min-width: 768px) {
    .comparison-grid {grid-template-columns: 0.8fr 1fr 1.2fr;  max-width: 900px; margin: 0 auto;}
    .cell {flex-direction: row; text-align: left;justify-content: flex-start;
        padding: 18px 20px;font-size: 1rem;}
    .header-cell {justify-content: center;}
    .label-header {display: flex; color: #a0a0c0; background: rgba(10, 14, 41, 0.95);}
    .label-cell {grid-column: auto; color: #fff;background-color: transparent;
        border-bottom: none; font-weight: 600; text-transform: none;letter-spacing: normal; font-size: 1rem;}
    .icon {margin-bottom: 0; margin-right: 12px;}
}


@media (min-width: 600px)
{
  .demo {min-height: 400px;}
  .demolaunchtrades, .demolaunchcroppers {min-height: 400px;}
}

@media (min-width: 480px)
{
.offer-btn.maxbut {width: max-content; padding:10px 40px;}
}

@media (min-width: 389px){

.demo {min-height: 250px;}
.demolaunchtrades, .demolaunchcroppers {min-height: 250px;}

}