/* Rocha Builders - Styles */
:root {
    --rocha-black: #1a1a1a;
    --rocha-gray: #4F4F4F;
    --rocha-gray-light: #6B6B6B;
    --rocha-gray-dark: #3A3A3A;
    --rocha-purple: #9333ea;
    --rocha-purple-light: #a855f7;
    --rocha-purple-dark: #7e22ce;
    --rocha-white: #ffffff;
    --rocha-off-white: #f8f8f8;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--rocha-gray); }
::-webkit-scrollbar-thumb { background: var(--rocha-gray-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--rocha-purple); }

body { overflow-x: hidden; }

/* Navigation */
.nav-link {
    @apply text-gray-300 hover:text-white transition-colors text-sm font-medium relative;
}
.nav-link::after {
    content: '';
    @apply absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-500 to-gray-500 transition-all;
}
.nav-link:hover::after { @apply w-full; }

/* Buttons */
.btn-primary {
    @apply bg-gradient-to-r from-purple-700 to-gray-600 hover:from-purple-800 hover:to-gray-700 text-white px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-lg;
}
.btn-primary-lg {
    @apply bg-gradient-to-r from-purple-700 to-purple-800 hover:from-purple-800 hover:to-purple-900 text-white px-8 py-4 rounded-xl text-lg font-semibold transition-all flex items-center justify-center gap-2 shadow-lg shadow-purple-700/30 hover:shadow-purple-700/50 hover:scale-105;
}
.btn-secondary-lg {
    @apply bg-gray-700/20 border border-gray-600/40 hover:bg-gray-700/30 text-white px-8 py-4 rounded-xl text-lg font-semibold transition-all flex items-center justify-center backdrop-blur-sm hover:scale-105;
}
.btn-white {
    @apply inline-flex items-center gap-3 bg-white text-gray-900 hover:bg-gray-100 px-8 py-4 rounded-xl font-bold transition-all hover:scale-105 shadow-xl;
}
.btn-whatsapp {
    @apply flex items-center justify-center gap-3 bg-green-500 hover:bg-green-600 text-white px-6 py-4 rounded-xl font-bold transition-all hover:scale-105 shadow-lg;
}
.btn-email {
    @apply flex items-center justify-center gap-3 bg-gray-700/20 border border-gray-600/40 text-white px-6 py-4 rounded-xl font-bold hover:bg-gray-700/30 transition-all;
}
.btn-submit {
    @apply w-full bg-gradient-to-r from-purple-700 to-gray-600 hover:from-purple-800 hover:to-gray-700 text-white font-bold py-4 rounded-xl transition-all flex justify-center items-center gap-2 shadow-lg;
}

/* Hero Background */
.hero-bg {
    @apply absolute inset-0 z-0;
}
.hero-bg::before {
    content: '';
    @apply absolute top-0 right-0 w-[800px] h-[800px] rounded-full blur-[150px] -translate-y-1/2 translate-x-1/3;
    background: rgba(123, 0, 181, 0.1);
}
.hero-bg::after {
    content: '';
    @apply absolute bottom-0 left-0 w-[600px] h-[600px] rounded-full blur-[120px] translate-y-1/3 -translate-x-1/4;
    background: rgba(79, 79, 79, 0.2);
}

/* Contact Background */
.contact-bg {
    @apply absolute inset-0;
}
.contact-bg::before {
    content: '';
    @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full blur-[150px];
    background: rgba(123, 0, 181, 0.1);
}

/* Glass Panel */
.glass-panel {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(147, 51, 234, 0.2);
    color: #1a1a1a;
}

/* Co-Founders Section */
.cofounder-card {
    @apply bg-white/95 backdrop-blur-xl rounded-2xl p-6 text-center shadow-xl border border-gray-200;
}
.cofounder-card img {
    @apply w-32 h-32 rounded-full mx-auto mb-4 object-cover border-4 border-purple-100 shadow-lg;
}
.cofounder-card h4 {
    @apply text-xl font-bold text-gray-900 mb-1;
}
.cofounder-card p {
    @apply text-purple-600 font-medium text-sm mb-2;
}
.cofounder-card span {
    @apply text-gray-500 text-xs;
}

/* 3D Cube */
.cube-container {
    perspective: 1000px;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}
.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 20s infinite linear;
}
@keyframes rotateCube {
    from { transform: rotateX(0deg) rotateY(0deg); }
    to { transform: rotateX(360deg) rotateY(360deg); }
}
.cube-face {
    position: absolute;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(255, 255, 255, 0.9));
    border: 2px solid rgba(147, 51, 234, 0.3);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(147, 51, 234, 0.1);
}
.cube-face.front { transform: translateZ(100px); }
.cube-face.back { transform: rotateY(180deg) translateZ(100px); }
.cube-face.right { transform: rotateY(90deg) translateZ(100px); }
.cube-face.left { transform: rotateY(-90deg) translateZ(100px); }
.cube-face.top { transform: rotateX(90deg) translateZ(100px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(100px); }

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

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(123, 0, 181, 0.3); }
    50% { box-shadow: 0 0 40px rgba(123, 0, 181, 0.6); }
}
.pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.gradient-text {
    background: linear-gradient(90deg, #7b00b5, #4F4F4F, #7b00b5);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease infinite;
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-slide-up { animation: slideInUp 0.8s ease forwards; }
.animate-slide-right { animation: slideInRight 0.8s ease forwards; }
.animate-fade { animation: fadeIn 1s ease forwards; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Service Cards */
.service-card {
    @apply bg-white border border-gray-200 p-8 rounded-2xl hover:border-purple-400 hover:shadow-xl transition-all duration-500 text-gray-900;
}
.service-card.featured {
    @apply border-purple-700/40 relative overflow-hidden;
}
.featured-badge {
    @apply absolute top-0 right-0 bg-purple-700 text-white text-xs font-bold px-3 py-1 rounded-bl-lg;
}
.service-icon {
    @apply w-14 h-14 bg-gradient-to-br from-purple-100 to-purple-50 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform;
}

/* Card 3D Effect */
.card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.6s ease;
}
.card-3d:hover {
    transform: rotateY(3deg) rotateX(3deg) translateZ(10px);
}

/* Step Numbers */
.step-number {
    @apply w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-purple-700 to-purple-800 rounded-2xl flex items-center justify-center text-2xl font-black shadow-lg shadow-purple-700/30 relative z-10;
}
.step-number.gray {
    @apply from-gray-600 to-gray-700 shadow-gray-600/30;
}

/* Info Cards */
.info-card {
    @apply bg-gray-700/10 border border-gray-700/20 p-4 rounded-xl;
}

/* Diff Cards */
.diff-card {
    @apply text-center p-6 rounded-2xl bg-gradient-to-b from-gray-700/10 to-transparent border border-gray-700/20 hover:border-purple-700/50 transition-all;
}
.diff-icon {
    @apply w-16 h-16 mx-auto mb-4 rounded-full bg-purple-700/10 flex items-center justify-center;
}

/* Contact Icons */
.contact-icon {
    @apply w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0;
}
.contact-icon.purple {
    @apply bg-purple-700/20 text-purple-500;
}
.contact-icon.gray {
    @apply bg-gray-700/20 text-gray-500;
}

/* Form */
.form-card {
    @apply bg-white backdrop-blur-xl rounded-3xl p-10 shadow-2xl border border-purple-100;
}
.form-input {
    @apply w-full bg-gray-50 border-2 border-gray-200 rounded-xl px-5 py-4 text-gray-900 placeholder-gray-400 focus:outline-none focus:border-purple-500 focus:ring-4 focus:ring-purple-100 transition-all text-base;
}
.form-input:hover {
    @apply border-purple-300;
}

/* Social Icons */
.social-icon {
    @apply w-10 h-10 rounded-full bg-gray-700/20 flex items-center justify-center text-gray-500 hover:bg-purple-700 hover:text-white transition-all;
}
.social-icon.whatsapp:hover {
    @apply bg-green-500;
}

/* WhatsApp Float */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}

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