/* ===== Landing Page Styles ===== */

/* Glow effects */
.glow-blue { box-shadow: 0 0 40px rgba(0,102,255,0.2), 0 0 80px rgba(0,102,255,0.05); }
.glow-green { box-shadow: 0 0 40px rgba(34,197,94,0.15), 0 0 80px rgba(34,197,94,0.05); }

/* Star canvas */
#stars-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; display: block; }

/* Hero gradient */
.hero-gradient { background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0,102,255,0.15) 0%, transparent 60%); }

/* Section divider */
.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }

/* Counter */
.counter { font-variant-numeric: tabular-nums; }

/* Floating animation */
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } }

/* Gradient text */
.text-gradient { background: linear-gradient(135deg, #ffffff 0%, #99c2ff 40%, #3399ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Sticky sub-nav */
.sub-nav { backdrop-filter: blur(20px); background: rgba(0,0,0,0.85); border-bottom: 1px solid rgba(255,255,255,0.06); }

/* Plan card hover lift */
.plan-card { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.plan-card:hover { transform: translateY(-8px); }

/* Trust check item */
.trust-check { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Gradient border for featured cards */
.gradient-border { position: relative; }
.gradient-border::before {
    content: ''; position: absolute; inset: -1px; border-radius: 1rem; padding: 1px;
    background: linear-gradient(135deg, rgba(0,102,255,0.3), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.gradient-border-green::before {
    background: linear-gradient(135deg, rgba(34,197,94,0.3), transparent 60%);
}

/* WhatsApp pulse */
#whatsapp-float::after {
    content: ''; position: absolute; inset: -4px; border-radius: 9999px;
    border: 2px solid rgba(34,197,94,0.4);
    animation: waPulse 2s ease-in-out infinite;
}
@keyframes waPulse { 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.15); opacity:0 } }

/* Transition overlay */
#transition-overlay { will-change: opacity; }
#transition-overlay.active { display: flex !important; pointer-events: all; }
#transition-overlay.visible { opacity: 1; }