body { font-family: Open Sans }
     


      {} *{} /*endBaseStyles*/@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;400;700;900&display=swap');

/* 1. GLOBAL BASE (Excluding icons from the override) */
html, body { background-color: #0A0A0A !important; color: #E2E2E2 !important; margin: 0; }

/* Apply brand font to everything EXCEPT icons */
body, p, h1, h2, h3, h4, span:not(.fa):not(.fas):not(.fab), div:not(.fa):not(.fas), li, input, button { 
    font-family: 'Plus Jakarta Sans', sans-serif !important; 
}

/* 2. THE GRADIENT (Staple Look) */
.gradient-text { 
    background: linear-gradient(135deg, #E6D0A3 0%, #C5A059 50%, #8C6F34 100%) !important; 
    -webkit-background-clip: text !important; 
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important; 
    color: transparent !important;
    display: inline-block !important;
    padding-bottom: 0.15em !important;
}

/* 3. BUILDER VISIBILITY */
.headline-reveal { opacity: 1; transform: none; }
.gpblsh .headline-reveal { opacity: 0; }

/* 4. LUXURY UI */
.glass-panel { background: linear-gradient(145deg, rgba(20,20,20,0.8) 0%, rgba(10,10,10,0.95) 100%); border: 1px solid rgba(197, 160, 89, 0.1); backdrop-filter: blur(20px); }
.liquid-gold-border { position: relative; z-index: 1; border-radius: 1.5rem; overflow: hidden; display: flex; flex-direction: column; }
.liquid-gold-border::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(transparent, #C5A059, transparent 30%, transparent 70%, #F9E498, transparent); animation: rotateGold 6s linear infinite; z-index: -1; }
.liquid-gold-inner { background: #0A0A0A; margin: 1px; border-radius: calc(1.5rem - 1px); height: calc(100% - 2px); width: calc(100% - 2px); display: flex; flex-direction: column; flex-grow: 1; }
@keyframes rotateGold { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* 5. ANIMATIONS */
.animate-float { animation: float 8s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* THE GLOSSY FLASH ANIMATION */
@keyframes glossy-flash {
    0% { left: -100%; }
    20% { left: 100%; } /* The speed of the actual slide */
    100% { left: 100%; } /* The pause before it starts again */
}

.shimmer-container {
    position: relative;
    overflow: hidden; /* Keeps the flash inside the button */
}

.shimmer-beam {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    animation: glossy-flash 4s infinite; /* Slides every 4 seconds */
    pointer-events: none;
}
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }