* { font-family: 'Inter', system-ui, sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

body { background: #0a0a0a; color: #e5e5e5; overflow-x: hidden; perspective: 1px; }

.grid-bg {
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 48px 48px;
}

.grid-bg-3d {
    background-image:
        linear-gradient(rgba(16,185,129,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,185,129,0.08) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: perspective(500px) rotateX(60deg) translateY(-50px);
    transform-origin: center top;
    mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
}

.noise-bg::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    opacity: 0.04; pointer-events: none; mix-blend-mode: overlay;
}

.glow-emerald { box-shadow: 0 0 60px -12px rgba(16, 185, 129, 0.4), 0 30px 60px -20px rgba(0,0,0,0.5); }
.glow-emerald-strong { box-shadow: 0 0 100px -20px rgba(16, 185, 129, 0.6), 0 30px 80px -20px rgba(0,0,0,0.6); }

.text-gradient-emerald {
    background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-gradient-gold {
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-gradient-white {
    background: linear-gradient(180deg, #ffffff 0%, #a3a3a3 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
    will-change: transform;
}
.tilt-inner { transform: translateZ(40px); transform-style: preserve-3d; }
.tilt-inner-shallow { transform: translateZ(20px); }

.feature-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.8), rgba(15, 15, 15, 0.8));
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}
.feature-card::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.4), transparent);
    opacity: 0; transition: opacity 0.4s;
}
.feature-card:hover::after { opacity: 1; }
.feature-card:hover {
    border-color: rgba(16, 185, 129, 0.3);
    background: linear-gradient(180deg, rgba(20, 20, 20, 1), rgba(15, 15, 15, 1));
    box-shadow: 0 30px 60px -20px rgba(16, 185, 129, 0.15), 0 20px 40px -10px rgba(0,0,0,0.5);
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-3d-left {
    opacity: 0;
    transform: perspective(1200px) translateX(-80px) rotateY(25deg);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-3d-left.visible { opacity: 1; transform: perspective(1200px) translateX(0) rotateY(0); }

.reveal-3d-right {
    opacity: 0;
    transform: perspective(1200px) translateX(80px) rotateY(-25deg);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-3d-right.visible { opacity: 1; transform: perspective(1200px) translateX(0) rotateY(0); }

.reveal-3d-up {
    opacity: 0;
    transform: perspective(1200px) translateY(60px) rotateX(-15deg);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-3d-up.visible { opacity: 1; transform: perspective(1200px) translateY(0) rotateX(0); }

.shimmer-btn {
    background: linear-gradient(110deg, #10b981 0%, #34d399 25%, #6ee7b7 50%, #34d399 75%, #10b981 100%);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
    box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.shimmer-btn:hover {
    box-shadow: 0 20px 40px -10px rgba(16, 185, 129, 0.7), inset 0 1px 0 rgba(255,255,255,0.3);
}

.marquee-track { display: flex; width: max-content; }

.dashboard-glow { position: relative; transform-style: preserve-3d; }
.dashboard-glow::before {
    content: ''; position: absolute; inset: -30%;
    background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.25), transparent 60%);
    z-index: -1; filter: blur(60px);
}

.pricing-popular {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), rgba(20, 20, 20, 0.9));
    border: 1px solid rgba(16, 185, 129, 0.4);
    transform-style: preserve-3d;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #333333; }

.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.active .faq-content { max-height: 300px; }
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.3s; }

.mobile-menu { transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.mobile-menu.open { transform: translateY(0); }

.status-dot { position: relative; }
.status-dot::after {
    content: ''; position: absolute; inset: -2px; border-radius: 50%;
    background: inherit; opacity: 0.3; animation: pulse 2s infinite;
}

.code-badge {
    font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
    padding: 2px 8px; background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 4px; color: #34d399;
}

.shape-3d { position: absolute; transform-style: preserve-3d; pointer-events: none; }
.cube {
    width: 60px; height: 60px; transform-style: preserve-3d;
    animation: spinSlow 20s linear infinite;
}
.cube .face {
    position: absolute; width: 60px; height: 60px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
    backdrop-filter: blur(4px);
}
.cube .front  { transform: translateZ(30px); }
.cube .back   { transform: rotateY(180deg) translateZ(30px); }
.cube .right  { transform: rotateY(90deg) translateZ(30px); }
.cube .left   { transform: rotateY(-90deg) translateZ(30px); }
.cube .top    { transform: rotateX(90deg) translateZ(30px); }
.cube .bottom { transform: rotateX(-90deg) translateZ(30px); }

.text-3d {
    text-shadow:
        0 1px 0 rgba(16, 185, 129, 0.8),
        0 2px 0 rgba(16, 185, 129, 0.7),
        0 3px 0 rgba(16, 185, 129, 0.6),
        0 4px 0 rgba(16, 185, 129, 0.5),
        0 5px 0 rgba(16, 185, 129, 0.4),
        0 6px 0 rgba(16, 185, 129, 0.3),
        0 7px 15px rgba(16, 185, 129, 0.4);
}

.orb-3d {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 30% 30%, rgba(52, 211, 153, 0.8), rgba(16, 185, 129, 0.3) 40%, rgba(5, 150, 105, 0.1) 70%, transparent 100%);
    filter: blur(1px);
}

.glass-3d {
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 20px 40px -10px rgba(0,0,0,0.5);
}

.spotlight {
    position: absolute; pointer-events: none;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(16,185,129,0.15) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
    opacity: 0;
    z-index: 1;
}
.feature-card:hover .spotlight { opacity: 1; }

.step-3d {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-3d:hover {
    transform: perspective(1000px) rotateY(-8deg) rotateX(5deg) translateZ(20px);
}

.pricing-card-3d {
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s;
}
.pricing-card-3d:hover {
    transform: perspective(1000px) rotateX(5deg) translateY(-8px);
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6), 0 20px 40px -10px rgba(16,185,129,0.1);
}