/* Base Reset */
::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth; }

/* Typography - Transparent Lettering Effect for Dark Mode */
.text-transparent-custom {
    color: rgba(255, 255, 255, 0.75);
    mix-blend-mode: screen;
}
.heading-transparent {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6);
    opacity: 0.9;
}

/* Animations from Template 1 (Beams & Particles) */
@keyframes beam-fall {
    0% { transform: translateY(-100%); opacity: 0; }
    5% { opacity: 0.5; }
    50% { opacity: 1; }
    95% { opacity: 0.5; }
    100% { transform: translateY(120vh); opacity: 0; }
}
.animate-beam-1 { animation: beam-fall 6s linear infinite; }
.animate-beam-2 { animation: beam-fall 8s linear infinite; animation-delay: 2s; }

.button-custom {
    cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; transition: all 0.25s ease;
    background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(242, 159, 5, 0.8) 0%, rgba(242, 159, 5, 0) 100%), linear-gradient(0deg, #f29f05, #f29f05);
    border-radius: 9999px; border: none; padding: 10px 24px; min-height: 44px; color: white;
}
.points_wrapper { overflow: hidden; width: 100%; height: 100%; pointer-events: none; position: absolute; z-index: 1; }
.points_wrapper .point { bottom: -10px; position: absolute; animation: floating-points infinite ease-in-out; pointer-events: none; width: 3px; height: 3px; background-color: #fff; border-radius: 9999px; }
@keyframes floating-points { 0% { transform: translateY(0); } 85% { opacity: 0; } 100% { transform: translateY(-55px); opacity: 0; } }
.points_wrapper .point:nth-child(1) { left: 10%; opacity: 1; animation-duration: 2.35s; animation-delay: 0.2s; }
.points_wrapper .point:nth-child(2) { left: 30%; opacity: 0.7; animation-duration: 2.5s; animation-delay: 0.5s; }
.points_wrapper .point:nth-child(3) { left: 50%; opacity: 1; animation-duration: 1.9s; }
.points_wrapper .point:nth-child(4) { left: 75%; opacity: 0.5; animation-duration: 1.5s; animation-delay: 1.5s; }

/* Animations from Template 3 (Card Tilt & Intens Glow) */
.glow-card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    background: rgba(10, 10, 12, 0.9);
    backdrop-filter: blur(10px);
}
.glow-card:hover {
    transform: translateY(-8px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 60px rgba(20, 184, 166, 0.15);
}
.glow-teal-intense {
    box-shadow: 0 0 20px rgba(20, 184, 166, 0.3), 0 0 40px rgba(20, 184, 166, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glow-teal-intense:hover {
    box-shadow: 0 0 30px rgba(20, 184, 166, 0.5), 0 0 60px rgba(20, 184, 166, 0.2);
    transform: translateY(-2px) scale(1.05);
}

/* New Components CSS (Modal, Accordion, Tooltip) */
.tooltip-group { position: relative; }
.tooltip-content {
    visibility: hidden; opacity: 0; transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%) translateY(10px);
    background: #fff; color: #000; padding: 6px 12px; border-radius: 6px; font-size: 12px; white-space: nowrap; z-index: 50;
}
.tooltip-group:hover .tooltip-content {
    visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0);
}

.accordion-content {
    max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out;
}
.accordion-active .accordion-content { max-height: 200px; }
.accordion-active .accordion-icon { transform: rotate(180deg); }

.modal-overlay {
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content {
    transform: scale(0.95); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-overlay.active .modal-content { transform: scale(1); opacity: 1; }

/* New Custom Hero Styles */
.hero-gradient-text {
    background: linear-gradient(135deg, #ffffff 0%, #05aff2 50%, #0644bf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.bg-grid-pattern {
    position: absolute; inset: 0; pointer-events: none; z-index: -1;
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    mask-image: radial-gradient(circle at center, black, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
}

.button-premium-glow {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(6, 68, 191, 0.05); border: 1px solid rgba(6, 68, 191, 0.3);
    backdrop-filter: blur(10px); transition: all 0.3s ease; overflow: hidden;
}
.button-premium-glow::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(5, 175, 242, 0.2), transparent);
    transform: skewX(-20deg); transition: 0.5s; z-index: 0;
}
.button-premium-glow:hover {
    background: rgba(6, 68, 191, 0.2); border-color: rgba(5, 175, 242, 0.8);
    box-shadow: 0 0 20px rgba(6, 68, 191, 0.5), inset 0 0 10px rgba(5, 175, 242, 0.3);
    transform: translateY(-2px);
}
.button-premium-glow:hover::before { left: 150%; }

.ambient-orb-1 {
    position: absolute; width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, rgba(6,68,191,0.15) 0%, transparent 60%);
    top: -100px; right: -100px; filter: blur(60px); pointer-events: none; z-index: -2;
    animation: orbFloat 10s ease-in-out infinite alternate;
}
.ambient-orb-2 {
    position: absolute; width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(5,175,242,0.1) 0%, transparent 60%);
    bottom: -100px; left: -100px; filter: blur(60px); pointer-events: none; z-index: -2;
    animation: orbFloat 8s ease-in-out infinite alternate-reverse;
}
@keyframes orbFloat { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-50px, 50px) scale(1.1); } }

/* Scroll Reveal & Glowing Orbs */
.reveal { opacity: 0; transform: translateY(20px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.hero-glow { position: absolute; filter: blur(100px); border-radius: 50%; z-index: -1; animation: orbFloat 10s ease-in-out infinite alternate; }
.glow-blue { background: rgba(6, 68, 191, 0.1); width: 600px; height: 600px; top: -100px; right: -100px; }
.glow-cyan { background: rgba(5, 175, 242, 0.08); width: 500px; height: 500px; bottom: -100px; left: -100px; }

/* Interactive Keyframes */
@keyframes neonPulse {
    0%, 100% { text-shadow: 0 0 20px rgba(5, 175, 242, 0.7); opacity: 1; }
    50% { text-shadow: 0 0 40px rgba(5, 175, 242, 0.9); opacity: 0.9; }
}
@keyframes floatTitle {
    0%, 100% { transform: translateY(0) scale(1.0) italic; }
    50% { transform: translateY(-10px) scale(1.2) italic; }
}
.animate-neon-pulse { animation: neonPulse 3s ease-in-out infinite; }
.animate-float-title { animation: floatTitle 4s ease-in-out infinite; }

@media (max-width: 768px) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    .glow-card {
        border: 1px solid rgba(5, 175, 242, 0.1);
        border-radius: 8px;
    }
}