/* Seção principal */
.main-section {
    width: 100%;
    padding: 4rem 0 8rem;
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

/* Background decorativo */
.background-decorative {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
}

.bg-blur-1 {
    top: 5rem;
    right: 2.5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(255, 255, 255, 0.05);
    animation: pulse 4s ease-in-out infinite;
}

.bg-blur-2 {
    bottom: 5rem;
    left: 2.5rem;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.03);
    animation: pulse 4s ease-in-out infinite 1s;
}

.bg-gradient-radial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.decorative-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.decorative-line-1 {
    left: 25%;
}

.decorative-line-2 {
    right: 25%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
}

.floating-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.floating-dot-1 {
    top: 25%;
    left: 33%;
    width: 0.5rem;
    height: 0.5rem;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.floating-dot-2 {
    top: 75%;
    right: 33%;
    width: 0.25rem;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.2);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 1s;
}

.floating-dot-3 {
    top: 50%;
    left: 16%;
    width: 0.375rem;
    height: 0.375rem;
    background: rgba(255, 255, 255, 0.25);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 0.5s;
}

/* Container */
.container {
    max-width: 1400px !important;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
}

/* Hero Section */
.hero-section {
    display: grid;
    gap: 3rem;
    align-items: center;
    margin-bottom: 8rem;
}

@media (min-width: 1024px) {
    .hero-section {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

@media (min-width: 1280px) {
    .hero-section {
        gap: 5rem;
    }
}

.hero-content {
    opacity: 0;
    transform: translateX(-5rem);
    animation: slideInLeft 1s ease-out 0.5s forwards;
}

.hero-text {
    margin-bottom: 2rem;
}

.main-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 900;
    margin-bottom: 32px;
    letter-spacing: 0.15em;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, #ffffff, #cccccc, #ffffff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: title-glow 3s ease-in-out infinite;
    padding: 0 16px;
    overflow: visible;
    line-height: 1.1;
    margin-left: -15px !important;
}

/* Header title simple and elegant animation */
.title-animated {
    opacity: 0;
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, 
    #444444 0%, 
    #222222 25%, 
    #444444 50%, 
    #222222 75%, 
    #444444 100%
);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: 
        titleFadeInScale 1.8s ease-out forwards, 
        titleGradientMove 4s linear infinite;
    animation-delay: 0.3s, 1s;
    transform: scale(0.95) translateY(30px);
}

@keyframes titleFadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(30px);
        filter: blur(3px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0px);
        filter: blur(0px);
    }
}

@keyframes titleGradientMove {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes title-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Elemento decorativo futurista */
.decorative-element {
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: fadeInUp 1s ease-out 0.9s forwards;
    opacity: 0;
}

.decorative-line-animated {
    position: relative;
    width: 5rem;
    height: 2px;
    background: linear-gradient(to right, #ffffff, #9ca3af, transparent);
    animation: pulseGlow 2s ease-in-out infinite;
}

.sliding-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 2px;
    background: #ffffff;
    animation: slideRight 3s ease-in-out infinite;
}

.decorative-dots {
    display: flex;
    gap: 0.25rem;
}

.dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-1 {
    background: #ffffff;
}

.dot-2 {
    background: #9ca3af;
    animation-delay: 0.2s;
}

.dot-3 {
    background: #6b7280;
    animation-delay: 0.4s;
}

.decorative-line-static {
    width: 3rem;
    height: 2px;
    background: linear-gradient(to right, transparent, #6b7280, #374151);
}

/* Hero Description */
.hero-description {
    space-y: 1.5rem;
}

.description-main {
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1s forwards;
}

@media (min-width: 768px) {
    .description-main {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .description-main {
        font-size: 1.5rem;
    }
}

.description-secondary {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.2s forwards;
}

@media (min-width: 768px) {
    .description-secondary {
        font-size: 1.125rem;
    }
}

/* Quote Container */
.quote-container {
    padding-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.4s forwards;
}

.quote-card {
    position: relative;
    padding: 1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), transparent);
    border-radius: 1rem;
    border-left: 4px solid rgba(255, 255, 255, 0.3);
}

.quote-text {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    font-style: italic;
}

@media (min-width: 768px) {
    .quote-text {
        font-size: 1.125rem;
    }
}

.quote-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indicator-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Hero Image */
.hero-image {
    position: relative;
    opacity: 0;
    transform: translateX(5rem);
    animation: slideInRight 1s ease-out 0.8s forwards;
}

.image-bg {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    filter: blur(0.5rem);
}

.image-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(6deg);
    animation: float 6s ease-in-out infinite;
}

.image-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-3deg);
    animation: floatReverse 8s ease-in-out infinite;
}

.main-image {
    position: relative;
    border-radius: 1.5rem;
    width: 90%;
    aspect-ratio: 1;
    object-fit: cover;
    box-shadow: 0 10px 40px 10px rgba(255, 255, 255, 0.158);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.7s ease;
    margin-left: auto;
}

/* Image Decorators */
.image-decorator {
    position: absolute;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-decorator-1 {
    top: -1rem;
    right: -1rem;
    width: 4rem;
    height: 4rem;
}

.image-decorator-2 {
    bottom: -1rem;
    left: -1rem;
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
}

.image-decorator .icon {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.image-decorator-1 .icon {
    animation: pulse 2s ease-in-out infinite;
}

.image-decorator-2 .icon {
    animation: spinSlow 30s linear infinite;
}

/* Decoradores de imagem melhorados */
.decorator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.decorator-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.decorator-pulse {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, transparent 70%);
    animation: pulseGlow 2s ease-in-out infinite;
    z-index: -1;
}

.image-decorator:hover .decorator-text {
    transform: translateY(-2px);
    color: #c084fc;
}

.image-decorator:hover .decorator-pulse {
    animation-duration: 1s;
}

/* Essence Section */
.essence-section {
    margin-bottom: 8rem;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.section-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.section-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .section-title {
        font-size: 3rem;
    }
}

.title-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.line-segment {
    height: 2px;
    background: linear-gradient(to right, transparent, #ffffff);
}

.line-1 {
    width: 4rem;
}

.line-2 {
    width: 6rem;
    background: #ffffff;
}

.line-3 {
    width: 4rem;
    background: linear-gradient(to left, transparent, #ffffff);
}

.line-dot {
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

/* Essence Cards */
.essence-cards {
    display: grid;
    gap: 2rem;
    margin-top: -70px;
    margin-bottom: 100px;
}

@media (min-width: 768px) {
    .essence-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .essence-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.essence-card {
    position: relative;
    padding: 2rem;
    border-radius: 1.5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

.essence-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.essence-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.essence-card-wide {
    grid-column: span 2;
}

@media (min-width: 1024px) {
    .essence-card-wide {
        grid-column: span 1;
    }
}

.card-bg-blur {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.essence-card:hover .card-bg-blur {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
}

.card-content {
    position: relative;
}

.card-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.card-icon svg {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.essence-card:hover .card-icon {
    transform: scale(1.1);
}

.card-title {
    font-weight: 700;
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-title {
        font-size: 1.5rem;
    }
}

.essence-card:hover .card-title {
    color: #f3f4f6;
}

.card-description {
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-description {
        font-size: 1rem;
    }
}

.essence-card:hover .card-description {
    color: #e5e7eb;
}

/* Values List */
.values-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
}

@media (min-width: 768px) {
    .values-list {
        font-size: 1rem;
    }
}

.value-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.value-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
}

.value-item strong {
    color: #ffffff;
}

/* Team Section */
.team-section {
    position: relative;
    margin-bottom: 8rem;
}

.team-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.9), rgba(0, 0, 0, 0.8), rgba(31, 41, 55, 0.9));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.team-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.1), transparent, rgba(255, 255, 255, 0.05));
    border-radius: 4rem;
}

.team-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.team-bg-blur-1 {
    top: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.05);
}

.team-bg-blur-2 {
    bottom: 2.5rem;
    right: 2.5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.team-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.team-circle-1 {
    top: 33%;
    right: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.team-circle-2 {
    bottom: 33%;
    left: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.team-decorative-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.team-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .team-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-content {
        padding: 5rem;
    }
}

.team-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.team-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .team-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-title {
        font-size: 3.75rem;
    }
}

.title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.team-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.team-line-segment {
    height: 2px;
}

.team-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.team-line-2 {
    width: 8rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.team-line-3 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.team-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.team-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.team-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.team-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Team Cards */
.team-cards {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .team-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-cards {
        gap: 4rem;
    }
}

.team-card {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

@media (min-width: 768px) {
    .team-card {
        padding: 2.5rem;
    }
}

.team-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
}

.team-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-card-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.team-card:hover .team-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), transparent);
}

.team-card-decorator {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 5rem;
    height: 5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: rotate(45deg);
    transition: transform 0.7s ease;
}

.team-card-decorator-left {
    top: -0.75rem;
    left: -0.75rem;
    right: auto;
}

.team-card:hover .team-card-decorator {
    transform: rotate(90deg);
}

.team-member {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Member Photo */
.member-photo {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .member-photo {
        width: 10rem;
        height: 10rem;
    }
}

.photo-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.photo-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
}

.photo-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.2), transparent);
}

.team-card:hover .photo-bg-1 {
    transform: scale(1.1);
}

.team-card:hover .photo-bg-2 {
    transform: scale(1.05);
}

.member-image {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 4px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.7s ease;
}

.team-card:hover .member-image {
    transform: scale(1.05);
}

.status-badge {
    position: absolute;
    bottom: -0.5rem;
    right: -0.5rem;
    background: linear-gradient(to bottom right, #10b981, #059669);
    border-radius: 50%;
    padding: 0.5rem;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.status-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.rotating-ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

/* Member Info */
.member-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.member-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.member-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.3s ease;
}

@media (min-width: 1024px) {
    .member-name {
        font-size: 1.875rem;
    }
}

.team-card:hover .member-name {
    color: #f3f4f6;
}

.member-role {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    justify-self: center;
}

.role-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.member-role span {
    color: #d1d5db;
    font-weight: 500;
}

.member-description {
    color: #d1d5db;
    line-height: 1.75;
    max-width: 32rem;
    margin: 0 auto;
    transition: color 0.3s ease;
}

.team-card:hover .member-description {
    color: #e5e7eb;
}

/* Member Skills */
.member-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.skill-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: #d1d5db;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Member Social */
.member-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.5rem;
}

.social-link {
    position: relative;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

.social-link:hover {
    transform: scale(1.1);
}

.social-link svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #ffffff;
    transition: color 0.3s ease;
}

.social-instagram:hover {
    background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.5);
}

.social-instagram:hover svg {
    color: #ec4899;
}

.social-linkedin:hover {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.5);
}

.social-linkedin:hover svg {
    color: #3b82f6;
}

.social-facebook:hover {
    background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.3), rgba(29, 78, 216, 0.2));
    border-color: rgba(37, 99, 235, 0.5);
}

.social-facebook:hover svg {
    color: #2563eb;
}

/* Team Central Decorator */
.team-central-decorator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

@media (min-width: 768px) {
    .team-central-decorator {
        display: block;
    }
}

.central-circle {
    width: 6rem;
    height: 6rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner {
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
    animation: pulse 2s ease-in-out infinite;
}

/* Process Section */
.process-section {
    position: relative;
    margin-bottom: 15rem !important;
    margin-top: -15rem !important;
}

@media (max-width: 768px) {
    .process-section {
        margin-top: -5rem !important;
        margin-bottom: 12rem !important;
    }
}

.process-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.8), rgba(0, 0, 0, 0.7), rgba(31, 41, 55, 0.8));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.process-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.05), transparent, rgba(255, 255, 255, 0.1));
    border-radius: 4rem;
}

.process-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.process-bg-blur-1 {
    top: 5rem;
    left: 5rem;
    width: 8rem;
    height: 8rem;
    background: rgba(255, 255, 255, 0.05);
}

.process-bg-blur-2 {
    bottom: 5rem;
    right: 5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.process-decorative-circle {
    position: absolute;
    top: 50%;
    right: 2.5rem;
    width: 6rem;
    height: 6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

.process-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .process-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-content {
        padding: 5rem;
    }
}

.process-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.process-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.process-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .process-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-title {
        font-size: 3.75rem;
    }
}

.process-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.process-line-segment {
    height: 2px;
}

.process-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.process-line-2 {
    width: 10rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.process-line-3 {
    width: 10rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.process-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.process-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.process-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.process-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 64rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    height: calc(100% - 0px); /* Ajustado para ir até o projeto concluído com sucesso */
    z-index: 1;
}

.timeline-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

@media (min-width: 768px) {
    .timeline-line {
        display: block;
    }
}

.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.timeline-step {
    position: relative;
    display: grid;
    gap: 2rem;
    align-items: center;
    opacity: 0;
    transform: translateX(-5rem);
}

.timeline-step.visible {
    animation: slideInLeft 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step {
        grid-template-columns: 1fr 1fr;
    }
}

.timeline-step-right {
    transform: translateX(5rem);
}

.timeline-step-right.visible {
    animation: slideInRight 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step-left .step-content {
        text-align: right;
    }
}

.step-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 1.5rem;
    transition: all 0.5s ease;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-header {
        flex-direction: row-reverse;
    }
}

.step-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    transition: transform 0.3s ease;
}

.step-icon:hover {
    transform: scale(1.1);
}

.step-icon svg {
    width: 2rem;
    height: 2rem;
}

.step-icon-blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.step-icon-purple {
    background: linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.2));
    border-color: rgba(147, 51, 234, 0.3);
    color: #a78bfa;
}

.step-icon-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.step-icon-teal {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(14, 116, 144, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

.step-icon-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.step-icon-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
}

.step-icon-red {
    background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.2));
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
}

/* Novas cores adicionais para etapas da timeline */

/* Step Icons - Novas Cores */
.step-icon-pink {
    background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.3);
    color: #f472b6;
}

.step-icon-indigo {
    background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.3), rgba(79, 70, 229, 0.2));
    border-color: rgba(99, 102, 241, 0.3);
    color: #818cf8;
}

.step-icon-yellow {
    background: linear-gradient(to bottom right, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.2));
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.step-icon-cyan {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(8, 145, 178, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

/* Step Tags - Novas Cores */
.step-tag-pink {
    background: rgba(236, 72, 153, 0.2);
    color: #f9a8d4;
    border-color: rgba(236, 72, 153, 0.3);
}

.step-tag-indigo {
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
    border-color: rgba(99, 102, 241, 0.3);
}

.step-tag-yellow {
    background: rgba(245, 158, 11, 0.2);
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.3);
}

.step-tag-cyan {
    background: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.3);
}

/* Timeline Circles - Novas Cores */
.circle-pink {
    background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.3);
    color: #f472b6;
    position: relative;
}

.circle-pink::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, rgba(236, 72, 153, 0.25) 40%, rgba(236, 72, 153, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 3s;
}

.circle-indigo {
    background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.3), rgba(79, 70, 229, 0.2));
    border-color: rgba(99, 102, 241, 0.3);
    color: #818cf8;
    position: relative;
}

.circle-indigo::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, rgba(99, 102, 241, 0.25) 40%, rgba(99, 102, 241, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 3.5s;
}

.circle-yellow {
    background: linear-gradient(to bottom right, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.2));
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
    position: relative;
}

.circle-yellow::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, rgba(245, 158, 11, 0.25) 40%, rgba(245, 158, 11, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 4s;
}

.circle-cyan {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(8, 145, 178, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
    position: relative;
}

.circle-cyan::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, rgba(6, 182, 212, 0.25) 40%, rgba(6, 182, 212, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 4.5s;
}

/* Circle Ping Animations - Novas Cores */
.circle-ping-pink {
    border-color: rgba(236, 72, 153, 0.2);
}

.circle-ping-indigo {
    border-color: rgba(99, 102, 241, 0.2);
}

.circle-ping-yellow {
    border-color: rgba(245, 158, 11, 0.2);
}

.circle-ping-cyan {
    border-color: rgba(6, 182, 212, 0.2);
}

/* Step Labels - Cores para as novas etapas */
.timeline-step:nth-child(7) .step-label {
    color: #f472b6;
}

.timeline-step:nth-child(8) .step-label {
    color: #818cf8;
}

.timeline-step:nth-child(9) .step-label {
    color: #fbbf24;
}

.timeline-step:nth-child(10) .step-label {
    color: #22d3ee;
}

.step-info {
    display: flex;
    flex-direction: column;
}

.step-label {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.step-label {
    color: #60a5fa;
}

.timeline-step:nth-child(2) .step-label {
    color: #a78bfa;
}

.timeline-step:nth-child(3) .step-label {
    color: #22d3ee;
}

.timeline-step:nth-child(4) .step-label {
    color: #4ade80;
}

.timeline-step:nth-child(5) .step-label {
    color: #fb923c;
}

.timeline-step:nth-child(6) .step-label {
    color: #f87171;
}

.step-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

@media (min-width: 768px) {
    .step-title {
        font-size: 1.875rem;
    }
}

.step-description {
    color: #d1d5db;
    line-height: 1.75;
    font-size: 1.125rem;
}

.step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-tags {
        justify-content: flex-end;
    }
}

.step-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    border: 1px solid;
}

.step-tag-blue {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

.step-tag-purple {
    background: rgba(147, 51, 234, 0.2);
    color: #c4b5fd;
    border-color: rgba(147, 51, 234, 0.3);
}

.step-tag-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.step-tag-teal {
    background: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.3);
}

.step-tag-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.step-tag-orange {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.3);
}

.step-tag-red {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.3);
}

/* Timeline Circle */
.timeline-circle {
    position: relative;
    display: none;
    justify-content: center;
}

@media (min-width: 768px) {
    .timeline-circle {
        display: flex;
    }
}

.circle-inner {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid;
    backdrop-filter: blur(0.5rem);
}

.circle-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.circle-blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    position: relative;
}

.circle-blue::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0.25) 40%, rgba(59, 130, 246, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
}

.circle-purple {
    background: linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.2));
    border-color: rgba(147, 51, 234, 0.3);
    color: #a78bfa;
    position: relative;
}

.circle-purple::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, rgba(147, 51, 234, 0.25) 40%, rgba(147, 51, 234, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

.circle-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    position: relative;
}

.circle-green::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.circle-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
    position: relative;
}

.circle-teal {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(14, 116, 144, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
    position: relative;
}

.circle-teal::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, rgba(6, 182, 212, 0.25) 40%, rgba(6, 182, 212, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.circle-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    position: relative;
}

.circle-green::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

.circle-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
    position: relative;
}

.circle-orange::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.4) 0%, rgba(249, 115, 22, 0.25) 40%, rgba(249, 115, 22, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2s;
}

.circle-red {
    background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.2));
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
    position: relative;
}

.circle-red::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.4) 0%, rgba(220, 38, 38, 0.25) 40%, rgba(220, 38, 38, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2.5s;
}

.circle-ping {
    position: absolute;
    inset: 0;
    border: 2px solid;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.circle-ping-blue {
    border-color: rgba(59, 130, 246, 0.2);
}

.circle-ping-purple {
    border-color: rgba(147, 51, 234, 0.2);
}

.circle-ping-green {
    border-color: rgba(34, 197, 94, 0.2);
}

.circle-ping-orange {
    border-color: rgba(249, 115, 22, 0.2);
}

/* Timeline Final */
.timeline-final {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    z-index: 2;
    opacity: 0;
    transform: translateY(3rem);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-final.visible {
    opacity: 1;
    transform: translateY(0);
}

.final-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    position: relative;
}

.final-badge::before {
    content: '';
    position: absolute;
    top: -25px;
    bottom: -25px;
    left: -50px;
    right: -50px;
    background: radial-gradient(ellipse 150% 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(30px);
    animation: pulseGlow 3s ease-in-out infinite;
}

.final-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #4ade80;
}

.final-text {
    color: #ffffff;
    font-weight: 600;
}

.final-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #4ade80;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Services Section */
.services-section {
    position: relative;
    margin-top: -20rem;
    margin-bottom: 10rem;
}

@media (max-width: 768px) {
    .services-section {
        margin-top: 0rem;
    }
}

.services-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.services-bg-blur-1 {
    top: 2.5rem;
    right: 2.5rem;
    width: 15rem;
    height: 15rem;
    background: rgba(255, 255, 255, 0.05);
}

.services-bg-blur-2 {
    bottom: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.services-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.services-circle-1 {
    top: 50%;
    left: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.services-circle-2 {
    top: 25%;
    right: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.services-decorative-line {
    position: absolute;
    left: 5rem;
    right: 5rem;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.services-line-1 {
    top: 5rem;
}

.services-line-2 {
    bottom: 5rem;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.services-floating-dot {
    position: absolute;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.services-dot-1 {
    top: 33%;
    left: 20%;
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
}

.services-dot-2 {
    top: 66%;
    right: 20%;
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    animation-delay: 1s;
}

.services-dot-3 {
    top: 50%;
    right: 33%;
    width: 0.625rem;
    height: 0.625rem;
    background: rgba(255, 255, 255, 0.25);
    animation-delay: 0.5s;
}

.services-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .services-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .services-content {
        padding: 5rem;
    }
}

/* Services Header */
.services-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.services-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.services-title-container {
    margin-bottom: 2rem;
}

.services-title {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .services-title {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .services-title {
        font-size: 4.5rem;
    }
}

.services-title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.services-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.services-line-segment {
    height: 2px;
}

.services-line-1 {
    width: 8rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.services-line-2 {
    width: 12rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.services-line-3 {
    width: 12rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.services-line-4 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.services-line-dot {
    position: relative;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.services-dot-complex-1,
.services-dot-complex-2 {
    width: 2rem;
    height: 2rem;
    border: 2px solid #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.services-dot-simple {
    width: 1.25rem;
    height: 1.25rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-outer {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite 0.5s;
}

.services-description {
    font-size: 1.5rem;
    color: #d1d5db;
    max-width: 80rem;
    margin: 0 auto;
    line-height: 1.75;
    font-weight: 300;
}

@media (min-width: 768px) {
    .services-description {
        font-size: 1.875rem;
    }
}

.services-description .highlight {
    color: #ffffff;
    font-weight: 600;
}

/* Services Main Card */
.services-main-card {
    max-width: 96rem;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(5rem);
}

.services-main-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.services-card-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    border-radius: 3rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.7s ease;
}

.services-main-card:hover .services-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15));
    transform: scale(1.02);
}

.services-card-decorator {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 1s ease;
}

.services-decorator-1 {
    top: -2rem;
    right: -2rem;
    width: 8rem;
    height: 8rem;
    border-radius: 2rem;
    transform: rotate(45deg);
}

.services-decorator-2 {
    bottom: -1.5rem;
    left: -1.5rem;
    width: 6rem;
    height: 6rem;
    border-radius: 1rem;
    border-color: rgba(255, 255, 255, 0.15);
    transform: rotate(12deg);
}

.services-main-card:hover .services-decorator-1 {
    transform: rotate(90deg);
}

.services-main-card:hover .services-decorator-2 {
    transform: rotate(45deg);
}

.services-card-content {
    position: relative;
    display: grid;
    gap: 3rem;
    align-items: center;
    padding: 3rem;
}

@media (min-width: 768px) {
    .services-card-content {
        padding: 4rem;
    }
}

@media (min-width: 1024px) {
    .services-card-content {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        padding: 5rem;
    }
}

/* Services Text Content */
.services-text-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .services-text-content {
        text-align: left;
    }
}

.services-intro {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.services-icon-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .services-icon-header {
        justify-content: flex-start;
    }
}

.services-main-icon {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.5s ease;
}

.services-main-card:hover .services-main-icon {
    transform: scale(1.1);
}

.services-main-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: #ffffff;
}

.services-header-text {
    text-align: left;
}

.services-card-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.5s ease;
}

@media (min-width: 768px) {
    .services-card-title {
        font-size: 2.25rem;
    }
}

.services-main-card:hover .services-card-title {
    color: #f3f4f6;
}

.services-card-subtitle {
    color: #d1d5db;
    font-size: 1.125rem;
    font-weight: 500;
}

.services-main-description {
    font-size: 1.25rem;
    color: #d1d5db;
    line-height: 1.75;
    transition: color 0.5s ease;
}

@media (min-width: 768px) {
    .services-main-description {
        font-size: 1.5rem;
    }
}

.services-main-card:hover .services-main-description {
    color: #e5e7eb;
}

.services-main-description .highlight {
    color: #ffffff;
    font-weight: 600;
}

.services-secondary-description {
    font-size: 1.125rem;
    color: #9ca3af;
    line-height: 1.75;
    transition: color 0.5s ease;
}

.services-main-card:hover .services-secondary-description {
    color: #d1d5db;
}

/* Services CTA */
.services-cta {
    padding-top: 1rem;
}

.services-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(to right, #ffffff, #e5e7eb);
    color: #000000;
    padding: 1.25rem 2.5rem;
    border-radius: 1.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.5s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.services-btn:hover {
    background: linear-gradient(to right, #f3f4f6, #ffffff);
    transform: scale(1.1) translateY(-0.25rem);
    box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.2);
}

.btn-arrow {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.5s ease;
}

.services-btn:hover .btn-arrow {
    transform: translateX(0.5rem);
}

/* Services Badges */
.services-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1.5rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .services-badges {
        justify-content: flex-start;
    }
}

.quality-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.quality-badge svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.quality-badge:nth-child(1) svg {
    color: #4ade80;
}

.quality-badge:nth-child(2) svg {
    color: #fbbf24;
}

.quality-badge:nth-child(3) svg {
    color: #60a5fa;
}

.quality-badge span {
    color: #ffffff;
    font-weight: 500;
}

/* Services Visual */
.services-visual {
    position: relative;
}

.visual-bg {
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.visual-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(3deg);
}

.visual-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-2deg);
}

.services-main-card:hover .visual-bg-1 {
    transform: rotate(6deg);
}

.services-main-card:hover .visual-bg-2 {
    transform: rotate(-4deg);
}

.services-icons-grid {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 2rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .services-icons-grid {
        padding: 3rem;
    }
}

.service-icon-card {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.service-icon-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.service-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    transition: transform 0.3s ease;
}

.service-icon-card:hover .service-icon {
    transform: scale(1.1);
}

.service-icon-card:nth-child(1) .service-icon {
    color: #60a5fa;
}

.service-icon-card:nth-child(2) .service-icon {
    color: #a78bfa;
}

.service-icon-card:nth-child(3) .service-icon {
    color: #4ade80;
}

.service-icon-card:nth-child(4) .service-icon {
    color: #fb923c;
}

/* Seção principal */
.main-section {
    width: 100%;
    padding: 4rem 0 8rem;
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

/* Background decorativo */
.background-decorative {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
}

.bg-blur-1 {
    top: 5rem;
    right: 2.5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(255, 255, 255, 0.05);
    animation: pulse 4s ease-in-out infinite;
}

.bg-blur-2 {
    bottom: 5rem;
    left: 2.5rem;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.03);
    animation: pulse 4s ease-in-out infinite 1s;
}

.bg-gradient-radial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.decorative-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.decorative-line-1 {
    left: 25%;
}

.decorative-line-2 {
    right: 25%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
}

.floating-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.floating-dot-1 {
    top: 25%;
    left: 33%;
    width: 0.5rem;
    height: 0.5rem;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.floating-dot-2 {
    top: 75%;
    right: 33%;
    width: 0.25rem;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.2);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 1s;
}

.floating-dot-3 {
    top: 50%;
    left: 16%;
    width: 0.375rem;
    height: 0.375rem;
    background: rgba(255, 255, 255, 0.25);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 0.5s;
}

/* Container */
.container {
    max-width: 1400px !important;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
}

/* Hero Section */
.hero-section {
    display: grid;
    gap: 3rem;
    align-items: center;
    margin-bottom: 8rem;
}

@media (min-width: 1024px) {
    .hero-section {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

@media (min-width: 1280px) {
    .hero-section {
        gap: 5rem;
    }
}

.hero-content {
    opacity: 0;
    transform: translateX(-5rem);
    animation: slideInLeft 1s ease-out 0.5s forwards;
}

.hero-text {
    margin-bottom: 2rem;
}

.main-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 900;
    margin-bottom: 32px;
    letter-spacing: 0.15em;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, #ffffff, #cccccc, #ffffff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: title-glow 3s ease-in-out infinite;
    padding: 0 16px;
    overflow: visible;
    line-height: 1.1;
}

/* Header title simple and elegant animation */
.title-animated {
    opacity: 0;
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, 
    #444444 0%, 
    #222222 25%, 
    #444444 50%, 
    #222222 75%, 
    #444444 100%
);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: 
        titleFadeInScale 1.8s ease-out forwards, 
        titleGradientMove 4s linear infinite;
    animation-delay: 0.3s, 1s;
    transform: scale(0.95) translateY(30px);
}

@keyframes titleFadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(30px);
        filter: blur(3px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0px);
        filter: blur(0px);
    }
}

@keyframes titleGradientMove {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes title-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Elemento decorativo futurista */
.decorative-element {
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: fadeInUp 1s ease-out 0.9s forwards;
    opacity: 0;
}

.decorative-line-animated {
    position: relative;
    width: 5rem;
    height: 2px;
    background: linear-gradient(to right, #ffffff, #9ca3af, transparent);
    animation: pulseGlow 2s ease-in-out infinite;
}

.sliding-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 2px;
    background: #ffffff;
    animation: slideRight 3s ease-in-out infinite;
}

.decorative-dots {
    display: flex;
    gap: 0.25rem;
}

.dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-1 {
    background: #ffffff;
}

.dot-2 {
    background: #9ca3af;
    animation-delay: 0.2s;
}

.dot-3 {
    background: #6b7280;
    animation-delay: 0.4s;
}

.decorative-line-static {
    width: 3rem;
    height: 2px;
    background: linear-gradient(to right, transparent, #6b7280, #374151);
}

/* Hero Description */
.hero-description {
    space-y: 1.5rem;
}

.description-main {
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1s forwards;
}

@media (min-width: 768px) {
    .description-main {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .description-main {
        font-size: 1.5rem;
    }
}

.description-secondary {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.2s forwards;
}

@media (min-width: 768px) {
    .description-secondary {
        font-size: 1.125rem;
    }
}

/* Quote Container */
.quote-container {
    padding-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.4s forwards;
}

.quote-card {
    position: relative;
    padding: 1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), transparent);
    border-radius: 1rem;
    border-left: 4px solid rgba(255, 255, 255, 0.3);
}

.quote-text {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    font-style: italic;
}

@media (min-width: 768px) {
    .quote-text {
        font-size: 1.125rem;
    }
}

.quote-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indicator-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Hero Image */
.hero-image {
    position: relative;
    opacity: 0;
    transform: translateX(5rem);
    animation: slideInRight 1s ease-out 0.8s forwards;
}

.image-bg {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    filter: blur(0.5rem);
}

.image-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(6deg);
    animation: float 6s ease-in-out infinite;
}

.image-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-3deg);
    animation: floatReverse 8s ease-in-out infinite;
}

.main-image {
    position: relative;
    border-radius: 1.5rem;
    width: 90%;
    aspect-ratio: 1;
    object-fit: cover;
    box-shadow: 0 10px 40px 10px rgba(255, 255, 255, 0.158);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.7s ease;
    margin-left: auto;
}

/* Image Decorators */
.image-decorator {
    position: absolute;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-decorator-1 {
    top: -1rem;
    right: -1rem;
    width: 4rem;
    height: 4rem;
}

.image-decorator-2 {
    bottom: -1rem;
    left: -1rem;
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
}

.image-decorator .icon {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.image-decorator-1 .icon {
    animation: pulse 2s ease-in-out infinite;
}

.image-decorator-2 .icon {
    animation: spinSlow 30s linear infinite;
}

/* Decoradores de imagem melhorados */
.decorator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.decorator-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.decorator-pulse {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, transparent 70%);
    animation: pulseGlow 2s ease-in-out infinite;
    z-index: -1;
}

.image-decorator:hover .decorator-text {
    transform: translateY(-2px);
    color: #c084fc;
}

.image-decorator:hover .decorator-pulse {
    animation-duration: 1s;
}

/* Essence Section */
.essence-section {
    margin-bottom: 8rem;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.section-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.section-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .section-title {
        font-size: 3rem;
    }
}

.title-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.line-segment {
    height: 2px;
    background: linear-gradient(to right, transparent, #ffffff);
}

.line-1 {
    width: 4rem;
}

.line-2 {
    width: 6rem;
    background: #ffffff;
}

.line-3 {
    width: 4rem;
    background: linear-gradient(to left, transparent, #ffffff);
}

.line-dot {
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

/* Essence Cards */
.essence-cards {
    display: grid;
    gap: 2rem;
    margin-top: -70px;
    margin-bottom: 100px;
}

@media (min-width: 768px) {
    .essence-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .essence-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.essence-card {
    position: relative;
    padding: 2rem;
    border-radius: 1.5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

.essence-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.essence-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.essence-card-wide {
    grid-column: span 2;
}

@media (min-width: 1024px) {
    .essence-card-wide {
        grid-column: span 1;
    }
}

.card-bg-blur {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.essence-card:hover .card-bg-blur {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
}

.card-content {
    position: relative;
}

.card-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.card-icon svg {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.essence-card:hover .card-icon {
    transform: scale(1.1);
}

.card-title {
    font-weight: 700;
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-title {
        font-size: 1.5rem;
    }
}

.essence-card:hover .card-title {
    color: #f3f4f6;
}

.card-description {
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-description {
        font-size: 1rem;
    }
}

.essence-card:hover .card-description {
    color: #e5e7eb;
}

/* Values List */
.values-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
}

@media (min-width: 768px) {
    .values-list {
        font-size: 1rem;
    }
}

.value-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.value-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
}

.value-item strong {
    color: #ffffff;
}

/* Team Section */
.team-section {
    position: relative;
    margin-bottom: 8rem;
}

.team-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.9), rgba(0, 0, 0, 0.8), rgba(31, 41, 55, 0.9));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.team-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.1), transparent, rgba(255, 255, 255, 0.05));
    border-radius: 4rem;
}

.team-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.team-bg-blur-1 {
    top: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.05);
}

.team-bg-blur-2 {
    bottom: 2.5rem;
    right: 2.5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.team-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.team-circle-1 {
    top: 33%;
    right: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.team-circle-2 {
    bottom: 33%;
    left: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.team-decorative-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.team-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .team-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-content {
        padding: 5rem;
    }
}

.team-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.team-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .team-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-title {
        font-size: 3.75rem;
    }
}

.title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.team-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.team-line-segment {
    height: 2px;
}

.team-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.team-line-2 {
    width: 8rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.team-line-3 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.team-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.team-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.team-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.team-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Team Cards */
.team-cards {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .team-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-cards {
        gap: 4rem;
    }
}

.team-card {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

@media (min-width: 768px) {
    .team-card {
        padding: 2.5rem;
    }
}

.team-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
}

.team-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-card-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.team-card:hover .team-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), transparent);
}

.team-card-decorator {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 5rem;
    height: 5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: rotate(45deg);
    transition: transform 0.7s ease;
}

.team-card-decorator-left {
    top: -0.75rem;
    left: -0.75rem;
    right: auto;
}

.team-card:hover .team-card-decorator {
    transform: rotate(90deg);
}

.team-member {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Member Photo */
.member-photo {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .member-photo {
        width: 10rem;
        height: 10rem;
    }
}

.photo-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.photo-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
}

.photo-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.2), transparent);
}

.team-card:hover .photo-bg-1 {
    transform: scale(1.1);
}

.team-card:hover .photo-bg-2 {
    transform: scale(1.05);
}

.member-image {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 4px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.7s ease;
}

.team-card:hover .member-image {
    transform: scale(1.05);
}

.status-badge {
    position: absolute;
    bottom: -0.5rem;
    right: -0.5rem;
    background: linear-gradient(to bottom right, #10b981, #059669);
    border-radius: 50%;
    padding: 0.5rem;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.status-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.rotating-ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

/* Member Info */
.member-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.member-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.member-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.3s ease;
}

@media (min-width: 1024px) {
    .member-name {
        font-size: 1.875rem;
    }
}

.team-card:hover .member-name {
    color: #f3f4f6;
}

.member-role {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    justify-self: center;
}

.role-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.member-role span {
    color: #d1d5db;
    font-weight: 500;
}

.member-description {
    color: #d1d5db;
    line-height: 1.75;
    max-width: 32rem;
    margin: 0 auto;
    transition: color 0.3s ease;
}

.team-card:hover .member-description {
    color: #e5e7eb;
}

/* Member Skills */
.member-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.skill-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: #d1d5db;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Member Social */
.member-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.5rem;
}

.social-link {
    position: relative;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

.social-link:hover {
    transform: scale(1.1);
}

.social-link svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #ffffff;
    transition: color 0.3s ease;
}

.social-instagram:hover {
    background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.5);
}

.social-instagram:hover svg {
    color: #ec4899;
}

.social-linkedin:hover {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.5);
}

.social-linkedin:hover svg {
    color: #3b82f6;
}

.social-facebook:hover {
    background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.3), rgba(29, 78, 216, 0.2));
    border-color: rgba(37, 99, 235, 0.5);
}

.social-facebook:hover svg {
    color: #2563eb;
}

/* Team Central Decorator */
.team-central-decorator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

@media (min-width: 768px) {
    .team-central-decorator {
        display: block;
    }
}

.central-circle {
    width: 6rem;
    height: 6rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner {
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
    animation: pulse 2s ease-in-out infinite;
}

/* Process Section */
.process-section {
    position: relative;
    margin-bottom: 8rem;
    margin-top: 0rem;
}

@media (max-width: 768px) {
    .process-section {
        margin-top: 8rem;
    }
}

.process-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.8), rgba(0, 0, 0, 0.7), rgba(31, 41, 55, 0.8));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.process-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.05), transparent, rgba(255, 255, 255, 0.1));
    border-radius: 4rem;
}

.process-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.process-bg-blur-1 {
    top: 5rem;
    left: 5rem;
    width: 8rem;
    height: 8rem;
    background: rgba(255, 255, 255, 0.05);
}

.process-bg-blur-2 {
    bottom: 5rem;
    right: 5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.process-decorative-circle {
    position: absolute;
    top: 50%;
    right: 2.5rem;
    width: 6rem;
    height: 6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

.process-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .process-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-content {
        padding: 5rem;
    }
}

.process-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.process-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.process-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .process-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-title {
        font-size: 3.75rem;
    }
}

.process-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.process-line-segment {
    height: 2px;
}

.process-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.process-line-2 {
    width: 10rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.process-line-3 {
    width: 10rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.process-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.process-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.process-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.process-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 64rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    height: calc(100% - 0px); /* Ajustado para ir até o projeto concluído com sucesso */
    z-index: 1;
}

.timeline-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

@media (min-width: 768px) {
    .timeline-line {
        display: block;
    }
}

.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.timeline-step {
    position: relative;
    display: grid;
    gap: 2rem;
    align-items: center;
    opacity: 0;
    transform: translateX(-5rem);
}

.timeline-step.visible {
    animation: slideInLeft 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step {
        grid-template-columns: 1fr 1fr;
    }
}

.timeline-step-right {
    transform: translateX(5rem);
}

.timeline-step-right.visible {
    animation: slideInRight 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step-left .step-content {
        text-align: right;
    }
}

.step-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 1.5rem;
    transition: all 0.5s ease;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-header {
        flex-direction: row-reverse;
    }
}

.step-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    transition: transform 0.3s ease;
}

.step-icon:hover {
    transform: scale(1.1);
}

.step-icon svg {
    width: 2rem;
    height: 2rem;
}

.step-icon-blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.step-icon-purple {
    background: linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.2));
    border-color: rgba(147, 51, 234, 0.3);
    color: #a78bfa;
}

.step-icon-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.step-icon-teal {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(14, 116, 144, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

.step-icon-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.step-icon-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
}

.step-icon-red {
    background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.2));
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
}

.step-info {
    display: flex;
    flex-direction: column;
}

.step-label {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.step-label {
    color: #60a5fa;
}

.timeline-step:nth-child(2) .step-label {
    color: #a78bfa;
}

.timeline-step:nth-child(3) .step-label {
    color: #22d3ee;
}

.timeline-step:nth-child(4) .step-label {
    color: #4ade80;
}

.timeline-step:nth-child(5) .step-label {
    color: #fb923c;
}

.timeline-step:nth-child(6) .step-label {
    color: #f87171;
}

.step-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

@media (min-width: 768px) {
    .step-title {
        font-size: 1.875rem;
    }
}

.step-description {
    color: #d1d5db;
    line-height: 1.75;
    font-size: 1.125rem;
}

.step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-tags {
        justify-content: flex-end;
    }
}

.step-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    border: 1px solid;
}

.step-tag-blue {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

.step-tag-purple {
    background: rgba(147, 51, 234, 0.2);
    color: #c4b5fd;
    border-color: rgba(147, 51, 234, 0.3);
}

.step-tag-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.step-tag-teal {
    background: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.3);
}

.step-tag-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.step-tag-orange {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.3);
}

.step-tag-red {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.3);
}

/* Timeline Circle */
.timeline-circle {
    position: relative;
    display: none;
    justify-content: center;
}

@media (min-width: 768px) {
    .timeline-circle {
        display: flex;
    }
}

.circle-inner {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid;
    backdrop-filter: blur(0.5rem);
}

.circle-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.circle-blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    position: relative;
}

.circle-blue::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0.25) 40%, rgba(59, 130, 246, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
}

.circle-purple {
    background: linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.2));
    border-color: rgba(147, 51, 234, 0.3);
    color: #a78bfa;
    position: relative;
}

.circle-purple::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, rgba(147, 51, 234, 0.25) 40%, rgba(147, 51, 234, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

.circle-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    position: relative;
}

.circle-green::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.circle-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
    position: relative;
}

.circle-teal {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(14, 116, 144, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
    position: relative;
}

.circle-teal::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, rgba(6, 182, 212, 0.25) 40%, rgba(6, 182, 212, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.circle-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    position: relative;
}

.circle-green::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

.circle-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
    position: relative;
}

.circle-orange::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.4) 0%, rgba(249, 115, 22, 0.25) 40%, rgba(249, 115, 22, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2s;
}

.circle-red {
    background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.2));
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
    position: relative;
}

.circle-red::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.4) 0%, rgba(220, 38, 38, 0.25) 40%, rgba(220, 38, 38, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2.5s;
}

.circle-ping {
    position: absolute;
    inset: 0;
    border: 2px solid;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.circle-ping-blue {
    border-color: rgba(59, 130, 246, 0.2);
}

.circle-ping-purple {
    border-color: rgba(147, 51, 234, 0.2);
}

.circle-ping-green {
    border-color: rgba(34, 197, 94, 0.2);
}

.circle-ping-orange {
    border-color: rgba(249, 115, 22, 0.2);
}

/* Timeline Final */
.timeline-final {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    z-index: 2;
    opacity: 0;
    transform: translateY(3rem);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-final.visible {
    opacity: 1;
    transform: translateY(0);
}

.final-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    position: relative;
}

.final-badge::before {
    content: '';
    position: absolute;
    top: -25px;
    bottom: -25px;
    left: -50px;
    right: -50px;
    background: radial-gradient(ellipse 150% 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(30px);
    animation: pulseGlow 3s ease-in-out infinite;
}

.final-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #4ade80;
}

.final-text {
    color: #ffffff;
    font-weight: 600;
}

.final-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #4ade80;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Services Section */
.services-section {
    position: relative;
    margin-top: -20rem;
    margin-bottom: 10rem;
}

@media (max-width: 768px) {
    .services-section {
        margin-top: 0rem;
    }
}

.services-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.services-bg-blur-1 {
    top: 2.5rem;
    right: 2.5rem;
    width: 15rem;
    height: 15rem;
    background: rgba(255, 255, 255, 0.05);
}

.services-bg-blur-2 {
    bottom: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.services-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.services-circle-1 {
    top: 50%;
    left: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.services-circle-2 {
    top: 25%;
    right: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.services-decorative-line {
    position: absolute;
    left: 5rem;
    right: 5rem;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.services-line-1 {
    top: 5rem;
}

.services-line-2 {
    bottom: 5rem;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.services-floating-dot {
    position: absolute;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.services-dot-1 {
    top: 33%;
    left: 20%;
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
}

.services-dot-2 {
    top: 66%;
    right: 20%;
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    animation-delay: 1s;
}

.services-dot-3 {
    top: 50%;
    right: 33%;
    width: 0.625rem;
    height: 0.625rem;
    background: rgba(255, 255, 255, 0.25);
    animation-delay: 0.5s;
}

.services-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .services-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .services-content {
        padding: 5rem;
    }
}

/* Services Header */
.services-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.services-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.services-title-container {
    margin-bottom: 2rem;
}

.services-title {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .services-title {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .services-title {
        font-size: 4.5rem;
    }
}

.services-title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.services-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.services-line-segment {
    height: 2px;
}

.services-line-1 {
    width: 8rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.services-line-2 {
    width: 12rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.services-line-3 {
    width: 12rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.services-line-4 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.services-line-dot {
    position: relative;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.services-dot-complex-1,
.services-dot-complex-2 {
    width: 2rem;
    height: 2rem;
    border: 2px solid #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.services-dot-simple {
    width: 1.25rem;
    height: 1.25rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-outer {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite 0.5s;
}

.services-description {
    font-size: 1.5rem;
    color: #d1d5db;
    max-width: 80rem;
    margin: 0 auto;
    line-height: 1.75;
    font-weight: 300;
}

@media (min-width: 768px) {
    .services-description {
        font-size: 1.875rem;
    }
}

.services-description .highlight {
    color: #ffffff;
    font-weight: 600;
}

/* Services Main Card */
.services-main-card {
    max-width: 96rem;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(5rem);
}

.services-main-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.services-card-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    border-radius: 3rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.7s ease;
}

.services-main-card:hover .services-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15));
    transform: scale(1.02);
}

.services-card-decorator {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 1s ease;
}

.services-decorator-1 {
    top: -2rem;
    right: -2rem;
    width: 8rem;
    height: 8rem;
    border-radius: 2rem;
    transform: rotate(45deg);
}

.services-decorator-2 {
    bottom: -1.5rem;
    left: -1.5rem;
    width: 6rem;
    height: 6rem;
    border-radius: 1rem;
    border-color: rgba(255, 255, 255, 0.15);
    transform: rotate(12deg);
}

.services-main-card:hover .services-decorator-1 {
    transform: rotate(90deg);
}

.services-main-card:hover .services-decorator-2 {
    transform: rotate(45deg);
}

.services-card-content {
    position: relative;
    display: grid;
    gap: 3rem;
    align-items: center;
    padding: 3rem;
}

@media (min-width: 768px) {
    .services-card-content {
        padding: 4rem;
    }
}

@media (min-width: 1024px) {
    .services-card-content {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        padding: 5rem;
    }
}

/* Services Text Content */
.services-text-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .services-text-content {
        text-align: left;
    }
}

.services-intro {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.services-icon-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .services-icon-header {
        justify-content: flex-start;
    }
}

.services-main-icon {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.5s ease;
}

.services-main-card:hover .services-main-icon {
    transform: scale(1.1);
}

.services-main-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: #ffffff;
}

.services-header-text {
    text-align: left;
}

.services-card-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.5s ease;
}

@media (min-width: 768px) {
    .services-card-title {
        font-size: 2.25rem;
    }
}

.services-main-card:hover .services-card-title {
    color: #f3f4f6;
}

.services-card-subtitle {
    color: #d1d5db;
    font-size: 1.125rem;
    font-weight: 500;
}

.services-main-description {
    font-size: 1.25rem;
    color: #d1d5db;
    line-height: 1.75;
    transition: color 0.5s ease;
}

@media (min-width: 768px) {
    .services-main-description {
        font-size: 1.5rem;
    }
}

.services-main-card:hover .services-main-description {
    color: #e5e7eb;
}

.services-main-description .highlight {
    color: #ffffff;
    font-weight: 600;
}

.services-secondary-description {
    font-size: 1.125rem;
    color: #9ca3af;
    line-height: 1.75;
    transition: color 0.5s ease;
}

.services-main-card:hover .services-secondary-description {
    color: #d1d5db;
}

/* Services CTA */
.services-cta {
    padding-top: 1rem;
}

.services-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(to right, #ffffff, #e5e7eb);
    color: #000000;
    padding: 1.25rem 2.5rem;
    border-radius: 1.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.5s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.services-btn:hover {
    background: linear-gradient(to right, #f3f4f6, #ffffff);
    transform: scale(1.1) translateY(-0.25rem);
    box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.2);
}

.btn-arrow {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.5s ease;
}

.services-btn:hover .btn-arrow {
    transform: translateX(0.5rem);
}

/* Services Badges */
.services-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1.5rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .services-badges {
        justify-content: flex-start;
    }
}

.quality-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.quality-badge svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.quality-badge:nth-child(1) svg {
    color: #4ade80;
}

.quality-badge:nth-child(2) svg {
    color: #fbbf24;
}

.quality-badge:nth-child(3) svg {
    color: #60a5fa;
}

.quality-badge span {
    color: #ffffff;
    font-weight: 500;
}

/* Services Visual */
.services-visual {
    position: relative;
}

.visual-bg {
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.visual-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(3deg);
}

.visual-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-2deg);
}

.services-main-card:hover .visual-bg-1 {
    transform: rotate(6deg);
}

.services-main-card:hover .visual-bg-2 {
    transform: rotate(-4deg);
}

.services-icons-grid {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 2rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .services-icons-grid {
        padding: 3rem;
    }
}

.service-icon-card {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.service-icon-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.service-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    transition: transform 0.3s ease;
}

.service-icon-card:hover .service-icon {
    transform: scale(1.1);
}

.service-icon-card:nth-child(1) .service-icon {
    color: #60a5fa;
}

.service-icon-card:nth-child(2) .service-icon {
    color: #a78bfa;
}

.service-icon-card:nth-child(3) .service-icon {
    color: #4ade80;
}

.service-icon-card:nth-child(4) .service-icon {
    color: #fb923c;
}

.service-icon-title {
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.service-icon-description {
    font-size: 0.75rem;
    color: #9ca3af;
}

.visual-center-decorator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
    height: 4rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-dot {
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Services Stats */
.services-stats {
    position: relative;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    text-align: center;
}

@media (min-width: 768px) {
    .services-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-number {
    font-size: 3rem !important;
    font-weight: 700;
    color: #ffffff;
}

@media (min-width: 768px) {
    .stat-number {
        font-size: 3rem;
    }
}

.stat-label {
    color: #9ca3af;
    font-weight: 500;
}

.stat-bar {
    width: 4rem;
    height: 0.25rem;
    border-radius: 9999px;
    margin: 0 auto;
}

.stat-bar-blue {
    background: linear-gradient(to right, #3b82f6, #93c5fd);
}

.stat-bar-green {
    background: linear-gradient(to right, #10b981, #6ee7b7);
}

.stat-bar-purple {
    background: linear-gradient(to right, #8b5cf6, #c4b5fd);
}

/* Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-5rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(5rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(6deg);
    }
    50% {
        transform: translateY(-0.625rem) rotate(6deg);
    }
}

@keyframes floatReverse {
    0%, 100% {
        transform: translateY(0px) rotate(-3deg);
    }
    50% {
        transform: translateY(0.625rem) rotate(-3deg);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes heroGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(147, 51, 234, 0.6);
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(4rem);
    }
}

@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinVerySlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .main-section {
        padding: 2rem 0 4rem;
    }
    
    .container {
        padding: 0 0.5rem;
    }
    
    .hero-section {
        margin-bottom: 4rem;
    }
    
    .essence-section,
    .team-section,
    .process-section {
        margin-bottom: 4rem;
    }
    
    .team-content,
    .process-content,
    .services-content {
        padding: 1.5rem;
    }
}

/* Estrelas cadentes adicionais para Como Funciona */
.shooting-star-4,
.shooting-star-5,
.shooting-star-6,
.shooting-star-7,
.shooting-star-8,
.shooting-star-9,
.shooting-star-10 {
    position: absolute;
    width: 2px;
    height: 2px;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.8), transparent);
    border-radius: 50%;
    animation: shootingStar 6s linear infinite;
}

.shooting-star-4 {
    top: 15%;
    left: 20%;
    animation-delay: 1s;
    animation-duration: 4s;
}

.shooting-star-5 {
    top: 25%;
    right: 30%;
    animation-delay: 2.5s;
    animation-duration: 5s;
}

.shooting-star-6 {
    top: 60%;
    left: 15%;
    animation-delay: 3.2s;
    animation-duration: 4.5s;
}

.shooting-star-7 {
    top: 35%;
    right: 20%;
    animation-delay: 4s;
    animation-duration: 6s;
}

.shooting-star-8 {
    top: 75%;
    left: 35%;
    animation-delay: 0.8s;
    animation-duration: 5.5s;
}

.shooting-star-9 {
    top: 45%;
    right: 40%;
    animation-delay: 2s;
    animation-duration: 4.8s;
}

.shooting-star-10 {
    top: 85%;
    left: 60%;
    animation-delay: 3.8s;
    animation-duration: 5.2s;
}

/* Pontos de luz adicionais */
.light-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

.light-dot-1 {
    top: 5%;
    left: 15%;
    animation-delay: 0.5s;
}

.light-dot-2 {
    top: 35%;
    left: 88%;
    animation-delay: 1.2s;
}

.light-dot-3 {
    top: 68%;
    left: 5%;
    animation-delay: 2.1s;
}

.light-dot-4 {
    top: 85%;
    left: 75%;
    animation-delay: 0.8s;
}

.light-dot-5 {
    top: 18%;
    left: 60%;
    animation-delay: 1.8s;
}

.light-dot-6 {
    top: 92%;
    left: 45%;
    animation-delay: 2.5s;
}

.light-dot-7 {
    top: 52%;
    left: 30%;
    animation-delay: 1.5s;
}

.light-dot-8 {
    top: 78%;
    left: 95%;
    animation-delay: 3s;
}

/* Novas estrelas estáticas adicionais */
.light-dot-9 {
    top: 25%;
    left: 20%;
    animation-delay: 0.3s;
}

.light-dot-10 {
    top: 42%;
    left: 70%;
    animation-delay: 1.7s;
}

.light-dot-11 {
    top: 65%;
    left: 82%;
    animation-delay: 2.3s;
}

.light-dot-13 {
    top: 8%;
    left: 88%;
    animation-delay: 1.4s;
}

.light-dot-14 {
    top: 72%;
    left: 18%;
    animation-delay: 2.8s;
}

.light-dot-15 {
    top: 98%;
    left: 20%;
    animation-delay: 0.6s;
}

.light-dot-16 {
    top: 32%;
    left: 42%;
    animation-delay: 1.9s;
}

.light-dot-17 {
    top: 55%;
    left: 8%;
    animation-delay: 3.2s;
}

.light-dot-18 {
    top: 12%;
    left: 35%;
    animation-delay: 0.4s;
}

.light-dot-19 {
    top: 88%;
    left: 62%;
    animation-delay: 2.6s;
}

.light-dot-20 {
    top: 28%;
    left: 78%;
    animation-delay: 1.1s;
}

/* Estrelas adicionais para maior realismo - movimento suave e bem espalhadas */
.light-dot-21 {
    position: absolute;
    top: 7%;
    left: 8%;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat1 8s ease-in-out infinite;
    animation-delay: 0.2s;
}

.light-dot-22 {
    position: absolute;
    top: 23%;
    left: 85%;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat2 9s ease-in-out infinite;
    animation-delay: 1.8s;
}

.light-dot-23 {
    position: absolute;
    top: 45%;
    left: 12%;
    width: 2.5px;
    height: 2.5px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat3 7s ease-in-out infinite;
    animation-delay: 0.9s;
}

.light-dot-24 {
    position: absolute;
    top: 62%;
    left: 92%;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat1 10s ease-in-out infinite;
    animation-delay: 2.3s;
}

.light-dot-25 {
    position: absolute;
    top: 15%;
    left: 52%;
    width: 3.5px;
    height: 3.5px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat2 6s ease-in-out infinite;
    animation-delay: 1.2s;
}

.light-dot-26 {
    position: absolute;
    top: 83%;
    left: 25%;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat3 8.5s ease-in-out infinite;
    animation-delay: 0.6s;
}

.light-dot-27 {
    position: absolute;
    top: 38%;
    left: 78%;
    width: 2.8px;
    height: 2.8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat1 7.5s ease-in-out infinite;
    animation-delay: 2.1s;
}

.light-dot-28 {
    position: absolute;
    top: 72%;
    left: 65%;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat2 9.5s ease-in-out infinite;
    animation-delay: 1.5s;
}

.light-dot-29 {
    position: absolute;
    top: 28%;
    left: 38%;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat3 8s ease-in-out infinite;
    animation-delay: 0.8s;
}

.light-dot-30 {
    position: absolute;
    top: 95%;
    left: 88%;
    width: 2.2px;
    height: 2.2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat1 6.5s ease-in-out infinite;
    animation-delay: 1.9s;
}

/* Animações de movimento suave para cima e baixo */
@keyframes slowFloat1 {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-15px);
    opacity: 1;
  }
}

@keyframes slowFloat2 {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-12px);
    opacity: 1;
  }
}

@keyframes slowFloat3 {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-18px);
    opacity: 0.9;
  }
}

/* Linha gradiente decorativa após Como Funciona */
.como-funciona-bottom-line {
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
}

.gradient-line {
    width: 80%;
    height: 2px;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 20%, 
        rgba(255, 255, 255, 0.6) 40%, 
        rgba(255, 255, 255, 0.9) 50%, 
        rgba(255, 255, 255, 0.6) 60%, 
        rgba(255, 255, 255, 0.2) 80%, 
        transparent 100%
    );
    position: relative;
    animation: gradientPulse 4s ease-in-out infinite;
}



/* Fundo preto para Projeto Concluído com Sucesso */
.final-badge {
    background: #000000 !important;
    background-color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Segunda seção de serviços */
.services-section-2 {
    width: 100%;
    padding: 6rem 0;
    background: linear-gradient(135deg, #000000 0%, #111111 50%, #000000 100%);
    position: relative;
    overflow: hidden;
    margin-top: 4rem;
    z-index: 1;
    display: block;
}

.services-section-2 .services-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 2rem;
}

.services-section-2 .services-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
}

.services-section-2 .services-title-gradient {
    background: linear-gradient(135deg, #9333ea, #c084fc, #e879f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.services-section-2 .services-header {
    text-align: center;
    margin-bottom: 4rem;
    color: white;
}

.services-section-2 .services-title {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.services-section-2 .services-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.services-section-2 .services-main-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    padding: 3rem;
    backdrop-filter: blur(10px);
    color: white;
}

.services-section-2 .services-card-content {
    display: grid;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .services-section-2 .services-card-content {
        grid-template-columns: 1fr 1fr;
    }
}

/* Estilos específicos para elementos internos da segunda seção */
.services-section-2 .services-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.services-section-2 .services-line-segment {
    height: 1px;
    width: 2rem;
    background: rgba(255, 255, 255, 0.3);
}

.services-section-2 .services-line-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

.services-section-2 .dot-outer {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-section-2 .dot-inner {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

.services-section-2 .highlight {
    color: #c084fc;
    font-weight: 600;
}

.services-section-2 .services-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #9333ea, #c084fc);
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.services-section-2 .services-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(147, 51, 234, 0.3);
}

.services-section-2 .services-badges {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.services-section-2 .quality-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.services-section-2 .quality-badge svg {
    width: 1rem;
    height: 1rem;
    color: #c084fc;
}

.services-section-2 .services-icons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.services-section-2 .service-icon-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.services-section-2 .service-icon-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.services-section-2 .service-icon {
    width: 2rem;
    height: 2rem;
    color: #c084fc;
    margin-bottom: 0.5rem;
}

.services-section-2 .service-icon-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem;
}

.services-section-2 .service-icon-description {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.services-section-2 .services-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.services-section-2 .stat-item {
    text-align: center;
}

.services-section-2 .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #c084fc;
    margin-bottom: 0.5rem;
}

/* Seção de Projetos - Design Minimalista Preto e Branco */
.projects-section {
    padding: 3rem 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.projects-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.projects-card {
    position: relative;
    background: rgba(0, 0, 0, 0);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
    padding: 3rem;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Badge simplificado */
.projects-premium-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 3;
    backdrop-filter: blur(10px);
}

.projects-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
    position: relative;
    z-index: 2;
}

.projects-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.projects-title {
    color: #ffffff;
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em;
}

.title-line-1,
.title-line-2,
.title-line-3 {
    display: block;
}

.title-highlight {
    color: #ffffff;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.title-highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
}

.projects-title-decoration {
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 0.6;
}

.decoration-line {
    width: 30px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
}

.decoration-dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

.projects-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 550px;
    margin: 0;
}

.highlight-text {
    color: #ffffff;
    font-weight: 500;
}

.projects-cta {
    margin-top: 0.5rem;
}

.projects-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 36px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(20px);
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 
                0 0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.projects-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    opacity: 0;
    transition: opacity 0.5s ease;
}

.projects-button:hover::before {
    opacity: 1;
}

.projects-button:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
                0 0 0 1px rgba(255, 255, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.projects-button:active {
    transform: translateY(-2px) scale(1.01);
    transition: all 0.1s ease;
}

.btn-text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-text svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.projects-button:hover .btn-text svg {
    transform: translateX(4px);
}

/* Responsividade para Projects Section */
@media (max-width: 768px) {
    .projects-section {
        padding: 2rem 0;
    }

    .projects-container {
        padding: 0 1rem;
    }

    .projects-card {
        padding: 2rem;
        border-radius: 16px;
    }

    .projects-content {
        gap: 1.5rem;
    }

    .projects-title {
        font-size: 2.2rem;
    }

    .projects-description {
        font-size: 1rem;
        max-width: 100%;
    }

    .projects-premium-badge {
        position: static;
        align-self: center;
        margin-bottom: 1rem;
    }

    .projects-button {
        padding: 16px 30px;
        font-size: 15px;
    }

    .btn-text {
        gap: 10px;
    }

    .btn-text svg {
        width: 20px;
        height: 20px;
    }

    .projects-button:hover {
        transform: translateY(-3px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .projects-section {
        padding: 1.5rem 0;
    }

    .projects-card {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .projects-content {
        gap: 1.25rem;
    }

    .projects-title {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .projects-description {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .projects-button {
        padding: 14px 28px;
        font-size: 14px;
    }

    .btn-text {
        gap: 8px;
    }

    .btn-text svg {
        width: 18px;
        height: 18px;
    }

    .projects-button:hover {
        transform: translateY(-2px) scale(1.01);
    }

    .projects-title-decoration {
        gap: 0.75rem;
    }

    .decoration-line {
        width: 20px;
    }
}

.services-section-2 .stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.services-section-2 .stat-bar {
    height: 3px;
    background: linear-gradient(90deg, transparent, #c084fc, transparent);
    border-radius: 2px;
    margin-top: 0.5rem;
}

/* Elementos decorativos específicos */
.services-section-2 .visual-center-decorator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: rgba(192, 132, 252, 0.2);
    border-radius: 50%;
    border: 2px solid rgba(192, 132, 252, 0.4);
}

.services-section-2 .center-dot {
    width: 6px;
    height: 6px;
    background: #c084fc;
    border-radius: 50%;
    margin: 5px auto;
}

/* Responsividade específica */
@media (max-width: 768px) {
    .services-section-2 .services-title {
        font-size: 2rem;
    }
    
    .services-section-2 .services-card-content {
        grid-template-columns: 1fr;
    }
    
    .services-section-2 .services-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .services-section-2 .services-badges {
        flex-direction: column;
    }
}

/* Animações */
@keyframes shootingStar {
    0% {
        opacity: 0;
        transform: translateX(-100px) translateY(-100px) scale(0);
    }
    10% {
        opacity: 1;
        transform: translateX(-50px) translateY(-50px) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateX(100px) translateY(100px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(150px) translateY(150px) scale(0);
    }
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes gradientPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scaleX(1);
    }
    50% {
        opacity: 1;
        transform: scaleX(1.02);
    }
}

/* Services Section */
.services-section {
    position: relative;
    width: 100%;
    padding: 8rem 0;
    background: #000;
    color: #fff;
    overflow: hidden;
  }
  
  /* Background Effects */
  .background-effects {
    position: absolute;
    inset: 0;
  }
  
  .radial-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1), transparent 50%);
  }
  
  .blur-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
  }
  
  .blur-circle-1 {
    top: 0;
    left: 25%;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.05);
    animation: pulse 4s ease-in-out infinite;
  }
  
  .blur-circle-2 {
    bottom: 0;
    right: 25%;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.03);
    animation: pulse 4s ease-in-out infinite;
    animation-delay: 1s;
  }
  
  .geometric-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
  }
  
  .dot {
    position: absolute;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 2px;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  
  .dot-1 {
    top: 5rem;
    left: 5rem;
    width: 8px;
    height: 8px;
    animation-delay: 0.3s;
  }
  
  .dot-2 {
    top: 10rem;
    right: 8rem;
    width: 4px;
    height: 4px;
    opacity: 0.6;
    animation-delay: 0.7s;
  }
  
  .dot-3 {
    bottom: 8rem;
    left: 33%;
    width: 6px;
    height: 6px;
    opacity: 0.4;
    animation-delay: 1s;
  }
  
  .dot-4 {
    bottom: 5rem;
    right: 5rem;
    width: 8px;
    height: 8px;
    opacity: 0.3;
    animation-delay: 0.5s;
  }
  
  /* Container */
  .container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }
  
  /* Header Section */
  .header-section {
    text-align: center;
    margin-bottom: 5rem;
  }
  
  .premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    margin-bottom: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 9999px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .main-title {
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 900;
    margin-bottom: 2rem;
    margin-top: -50px;
    line-height: 0.9;
    letter-spacing: -0.02em;
  }
  
  .title-primary {
    display: block;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 6rem;
  }
  
  .title-secondary {
    display: block;
    color: rgba(255, 255, 255, 0.4);
    font-size: 5rem;
    font-weight: 300;
    margin-top: 0.5rem;
  }
  
  .header-description {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 60rem;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 300;
  }
  
  .highlight {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
  }
  
  /* Services Grid */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 5rem;
  }

  @media (max-width: 1200px) {
    .services-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .services-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .service-card {
    position: relative;
    padding: 2rem;
    border-radius: 1.5rem;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .service-card:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }
  
  .card-number {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 4rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.1);
    transition: color 0.5s ease;
  }
  
  .service-card:hover .card-number {
    color: rgba(255, 255, 255, 0.2);
  }
  
  .card-glow {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: blur(20px);
  }
  
  .service-card:hover .card-glow {
    opacity: 1;
  }
  
  .card-content {
    position: relative;
    z-index: 10;
  }
  
  .icon-container {
    margin-bottom: 2rem;
  }
  
  .icon-wrapper {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.5s ease;
  }
  
  .service-card:hover .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1) rotate(6deg);
  }
  
  .icon-wrapper i {
    font-size: 5rem !important;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.5s ease;
  }
  
  .service-card:hover .icon-wrapper i {
    color: #fff;
    transform: scale(1.1);
  }
  
  .service-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.3s ease;
  }
  
  .service-card:hover .service-title {
    color: #fff;
  }
  
  .service-description {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    line-height: 1.6;
    font-size: 1.125rem;
  }
  
  .features-list {
    margin-bottom: 2rem;
  }
  
  .feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
  }
  
  .feature-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    margin-right: 1rem;
    transition: all 0.3s ease;
  }
  
  .service-card:hover .feature-dot {
    background: #fff;
    transform: scale(1.25);
  }
  
  .feature-item span {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease;
  }
  
  .service-card:hover .feature-item span {
    color: rgba(255, 255, 255, 0.9);
  }
  
  .hover-arrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.5s ease;
  }
  
  .service-card:hover .hover-arrow {
    opacity: 1;
    transform: translateY(0);
  }
  
  .hover-arrow span {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
  }
  
  .hover-arrow i {
    color: #fff;
    transition: transform 0.3s ease;
  }
  
  .service-card:hover .hover-arrow i {
    transform: translateX(0.5rem);
  }
  
  /* Service-specific colors */
  .service-card[data-service="0"]:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.2));
  }
  
  .service-card[data-service="0"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.2));
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
  }
  
  .service-card[data-service="1"]:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
  }
  
  .service-card[data-service="1"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.2);
  }
  
  .service-card[data-service="2"]:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(20, 184, 166, 0.2));
  }
  
  .service-card[data-service="2"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(20, 184, 166, 0.2));
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.2);
  }
  
  .service-card[data-service="3"]:hover {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(239, 68, 68, 0.2));
  }
  
  .service-card[data-service="3"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(239, 68, 68, 0.2));
    box-shadow: 0 0 40px rgba(249, 115, 22, 0.2);
  }
  
  .service-card[data-service="4"]:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2));
  }
  
  .service-card[data-service="4"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2));
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.2);
  }
  
  .service-card[data-service="5"]:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
  }
  
  .service-card[data-service="5"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.2);
  }

  .service-card[data-service="6"]:hover {
    background: linear-gradient(135deg, rgba(220, 38, 127, 0.2), rgba(251, 113, 133, 0.2));
  }
  
  .service-card[data-service="6"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(220, 38, 127, 0.2), rgba(251, 113, 133, 0.2));
    box-shadow: 0 0 40px rgba(220, 38, 127, 0.2);
  }

    .service-card[data-service="7"]:hover {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.2), rgba(160, 82, 45, 0.2));
  }
  
  .service-card[data-service="7"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.2), rgba(160, 82, 45, 0.2));
    box-shadow: 0 0 40px rgba(139, 69, 19, 0.2);
  }

  /* Cor marrom para o ícone de paleta (perfume) */
  .service-card[data-service="2"] .icon-wrapper i.fa-palette {
    color: #8B4513 !important; /* Marrom */
  }

  .service-card[data-service="2"]:hover .icon-wrapper i.fa-palette {
    color: #A0522D !important; /* Marrom mais claro no hover */
  }

  /* CTA Section */
  .cta-section {
    position: relative;
  }
  
  .cta-background-effects {
    position: absolute;
    inset: -5rem;
  }
  
  .cta-blur-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50rem;
    height: 25rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), transparent);
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
  }
  
  .cta-blur-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 37.5rem;
    height: 18.75rem;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    animation: pulse 4s ease-in-out infinite;
    animation-delay: 1s;
  }
  
  .floating-elements {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  
  .floating-dot {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: bounce 2s infinite;
  }
  
  .floating-dot-1 {
    top: 2.5rem;
    left: 2.5rem;
    width: 12px;
    height: 12px;
    animation-delay: 0.3s;
  }
  
  .floating-dot-2 {
    top: 5rem;
    right: 5rem;
    width: 8px;
    height: 8px;
    opacity: 0.4;
    animation-delay: 0.7s;
  }
  
  .floating-dot-3 {
    bottom: 2.5rem;
    left: 25%;
    width: 6px;
    height: 6px;
    opacity: 0.5;
    animation-delay: 1s;
  }
  
  .floating-dot-4 {
    bottom: 5rem;
    right: 33%;
    width: 10px;
    height: 10px;
    opacity: 0.2;
    animation-delay: 0.5s;
  }
  
  .animated-line {
    position: absolute;
    top: 50%;
    height: 1px;
    width: 8rem;
    animation: pulse 2s ease-in-out infinite;
  }
  
  .animated-line-left {
    left: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
  }
  
  .animated-line-right {
    right: 0;
    background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation-delay: 0.5s;
  }
  
  .cta-container {
    position: relative;
    display: inline-block;
    max-width: 80rem;
    text-align: center;
  }
  
  .cta-outer-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
    border-radius: 1.5rem;
    filter: blur(2rem);
    transform: scale(1.1);
    animation: pulse 3s ease-in-out infinite;
  }
  
  .cta-border-animation {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent, rgba(255, 255, 255, 0.2));
    padding: 2px;
  }
  
  .cta-border-animation::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: calc(1.5rem - 2px);
    background: #000;
  }
  
  .cta-content {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1.5rem;
    padding: 4rem;
    overflow: hidden;
  }
  
  .cta-inner-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
  }
  
  .pattern-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
  }
  
  .pattern-circle-1 {
    top: 2rem;
    left: 2rem;
    width: 6rem;
    height: 6rem;
  }
  
  .pattern-circle-2 {
    bottom: 2rem;
    right: 2rem;
    width: 8rem;
    height: 8rem;
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .pattern-circle-3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10rem;
    height: 10rem;
    border-color: rgba(255, 255, 255, 0.05);
  }
  
  .cta-main-content {
    position: relative;
    z-index: 10;
  }
  
  .cta-premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    margin-bottom: 2rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 9999px;
  }
  
  .ping-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  
  .ping-dot-2 {
    animation-delay: 0.3s;
  }
  
  .cta-premium-badge span {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  
  .cta-title {
    font-size: clamp(2.5rem, 8vw, 7rem);
    font-weight: 900;
    margin-bottom: 2rem;
    line-height: 1.1;
  }
  
  .cta-title-line-1 {
    display: block;
    color: rgba(255, 255, 255, 0.9);
  }
  
  .cta-title-line-2 {
    display: block;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .cta-title-line-3 {
    position: relative;
    display: inline-block;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .title-underline {
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
    border-radius: 2px;
  }
  
  .cta-question {
    font-size: clamp(3rem, 8vw, 7rem);
  }
  
  .cta-subtitle {
    font-size: clamp(1.25rem, 3vw, 2rem);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3rem;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    font-weight: 300;
  }
  
  .subtitle-highlight {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
  }
  
  .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
  }
  
  @media (min-width: 1024px) {
    .cta-buttons {
      flex-direction: row;
    }
  }
  
  .primary-button-container {
    position: relative;
  }
  
  .primary-button-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    filter: blur(20px);
    transition: all 0.5s ease;
  }
  
  .primary-button-container:hover .primary-button-glow {
    filter: blur(40px);
  }
  
  .primary-button {
    position: relative;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.9));
    color: #000;
    padding: 2rem 3rem;
    font-size: 1.25rem;
    font-weight: 900;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .primary-button:hover {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    transform: scale(1.1);
    box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.3);
  }
  
  .secondary-button-container {
    position: relative;
  }
  
  .secondary-button-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1rem;
    filter: blur(16px);
    transition: all 0.5s ease;
  }
  
  .secondary-button-container:hover .secondary-button-glow {
    filter: blur(20px);
  }
  
  .secondary-button {
    position: relative;
    padding: 2rem 3rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .secondary-button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
  }
  
  .arrow-text {
    transition: transform 0.3s ease;
  }
  
  .secondary-button:hover .arrow-text {
    transform: translateX(0.5rem);
  }
  
  .stats-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin-top: -16rem;
  }
  
  @media (min-width: 1024px) {
    .stats-grid {
      gap: 4rem;
    }
  }
  
  .stat-item {
    text-align: center;
    transition: transform 0.3s ease;
  }
  
  .stat-item:hover {
    transform: translateY(-0.25rem);
  }
  
  .stat-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease;
  }
  
  .stat-item:hover .stat-icon {
    transform: scale(1.25);
  }
  
  .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
  }
  
  .stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
  }
  
  .cta-bottom-text {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.125rem;
    margin-top: 4rem;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    font-weight: 300;
    text-align: center;
  }
  
  .bottom-text-highlight {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
  }
  
  /* Animations */
  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  
/* Seção principal */
.main-section {
    width: 100%;
    padding: 4rem 0 8rem;
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

/* Background decorativo */
.background-decorative {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
}

.bg-blur-1 {
    top: 5rem;
    right: 2.5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(255, 255, 255, 0.05);
    animation: pulse 4s ease-in-out infinite;
}

.bg-blur-2 {
    bottom: 5rem;
    left: 2.5rem;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.03);
    animation: pulse 4s ease-in-out infinite 1s;
}

.bg-gradient-radial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.decorative-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.decorative-line-1 {
    left: 25%;
}

.decorative-line-2 {
    right: 25%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
}

.floating-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.floating-dot-1 {
    top: 25%;
    left: 33%;
    width: 0.5rem;
    height: 0.5rem;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.floating-dot-2 {
    top: 75%;
    right: 33%;
    width: 0.25rem;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.2);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 1s;
}

.floating-dot-3 {
    top: 50%;
    left: 16%;
    width: 0.375rem;
    height: 0.375rem;
    background: rgba(255, 255, 255, 0.25);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 0.5s;
}

/* Container */
.container {
    max-width: 1400px !important;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
}

/* Hero Section */
.hero-section {
    display: grid;
    gap: 3rem;
    align-items: center;
    margin-bottom: 8rem;
}

@media (min-width: 1024px) {
    .hero-section {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

@media (min-width: 1280px) {
    .hero-section {
        gap: 5rem;
    }
}

.hero-content {
    opacity: 0;
    transform: translateX(-5rem);
    animation: slideInLeft 1s ease-out 0.5s forwards;
}

.hero-text {
    margin-bottom: 2rem;
}

.main-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 900;
    margin-bottom: 32px;
    letter-spacing: 0.15em;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, #ffffff, #cccccc, #ffffff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: title-glow 3s ease-in-out infinite;
    padding: 0 16px;
    overflow: visible;
    line-height: 1.1;
}

/* Header title simple and elegant animation */
.title-animated {
    opacity: 0;
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, 
    #444444 0%, 
    #222222 25%, 
    #444444 50%, 
    #222222 75%, 
    #444444 100%
);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: 
        titleFadeInScale 1.8s ease-out forwards, 
        titleGradientMove 4s linear infinite;
    animation-delay: 0.3s, 1s;
    transform: scale(0.95) translateY(30px);
}

@keyframes titleFadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(30px);
        filter: blur(3px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0px);
        filter: blur(0px);
    }
}

@keyframes titleGradientMove {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes title-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Elemento decorativo futurista */
.decorative-element {
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: fadeInUp 1s ease-out 0.9s forwards;
    opacity: 0;
}

.decorative-line-animated {
    position: relative;
    width: 5rem;
    height: 2px;
    background: linear-gradient(to right, #ffffff, #9ca3af, transparent);
    animation: pulseGlow 2s ease-in-out infinite;
}

.sliding-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 2px;
    background: #ffffff;
    animation: slideRight 3s ease-in-out infinite;
}

.decorative-dots {
    display: flex;
    gap: 0.25rem;
}

.dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-1 {
    background: #ffffff;
}

.dot-2 {
    background: #9ca3af;
    animation-delay: 0.2s;
}

.dot-3 {
    background: #6b7280;
    animation-delay: 0.4s;
}

.decorative-line-static {
    width: 3rem;
    height: 2px;
    background: linear-gradient(to right, transparent, #6b7280, #374151);
}

/* Hero Description */
.hero-description {
    space-y: 1.5rem;
}

.description-main {
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1s forwards;
}

@media (min-width: 768px) {
    .description-main {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .description-main {
        font-size: 1.5rem;
    }
}

.description-secondary {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.2s forwards;
}

@media (min-width: 768px) {
    .description-secondary {
        font-size: 1.125rem;
    }
}

/* Quote Container */
.quote-container {
    padding-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.4s forwards;
}

.quote-card {
    position: relative;
    padding: 1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), transparent);
    border-radius: 1rem;
    border-left: 4px solid rgba(255, 255, 255, 0.3);
}

.quote-text {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    font-style: italic;
}

@media (min-width: 768px) {
    .quote-text {
        font-size: 1.125rem;
    }
}

.quote-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indicator-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Hero Image */
.hero-image {
    position: relative;
    opacity: 0;
    transform: translateX(5rem);
    animation: slideInRight 1s ease-out 0.8s forwards;
}

.image-bg {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    filter: blur(0.5rem);
}

.image-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(6deg);
    animation: float 6s ease-in-out infinite;
}

.image-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-3deg);
    animation: floatReverse 8s ease-in-out infinite;
}

.main-image {
    position: relative;
    border-radius: 1.5rem;
    width: 90%;
    aspect-ratio: 1;
    object-fit: cover;
    box-shadow: 0 10px 40px 10px rgba(255, 255, 255, 0.158);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.7s ease;
    margin-left: auto;
}

/* Image Decorators */
.image-decorator {
    position: absolute;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-decorator-1 {
    top: -1rem;
    right: -1rem;
    width: 4rem;
    height: 4rem;
}

.image-decorator-2 {
    bottom: -1rem;
    left: -1rem;
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
}

.image-decorator .icon {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.image-decorator-1 .icon {
    animation: pulse 2s ease-in-out infinite;
}

.image-decorator-2 .icon {
    animation: spinSlow 30s linear infinite;
}

/* Decoradores de imagem melhorados */
.decorator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.decorator-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.decorator-pulse {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, transparent 70%);
    animation: pulseGlow 2s ease-in-out infinite;
    z-index: -1;
}

.image-decorator:hover .decorator-text {
    transform: translateY(-2px);
    color: #c084fc;
}

.image-decorator:hover .decorator-pulse {
    animation-duration: 1s;
}

/* Essence Section */
.essence-section {
    margin-bottom: 8rem;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.section-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.section-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .section-title {
        font-size: 3rem;
    }
}

.title-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.line-segment {
    height: 2px;
    background: linear-gradient(to right, transparent, #ffffff);
}

.line-1 {
    width: 4rem;
}

.line-2 {
    width: 6rem;
    background: #ffffff;
}

.line-3 {
    width: 4rem;
    background: linear-gradient(to left, transparent, #ffffff);
}

.line-dot {
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

/* Essence Cards */
.essence-cards {
    display: grid;
    gap: 2rem;
    margin-top: -70px;
    margin-bottom: 100px;
}

@media (min-width: 768px) {
    .essence-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .essence-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.essence-card {
    position: relative;
    padding: 2rem;
    border-radius: 1.5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

.essence-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.essence-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.essence-card-wide {
    grid-column: span 2;
}

@media (min-width: 1024px) {
    .essence-card-wide {
        grid-column: span 1;
    }
}

.card-bg-blur {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.essence-card:hover .card-bg-blur {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
}

.card-content {
    position: relative;
}

.card-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.card-icon svg {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.essence-card:hover .card-icon {
    transform: scale(1.1);
}

.card-title {
    font-weight: 700;
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-title {
        font-size: 1.5rem;
    }
}

.essence-card:hover .card-title {
    color: #f3f4f6;
}

.card-description {
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-description {
        font-size: 1rem;
    }
}

.essence-card:hover .card-description {
    color: #e5e7eb;
}

/* Values List */
.values-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
}

@media (min-width: 768px) {
    .values-list {
        font-size: 1rem;
    }
}

.value-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.value-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
}

.value-item strong {
    color: #ffffff;
}

/* Team Section */
.team-section {
    position: relative;
    margin-bottom: 8rem;
}

.team-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.9), rgba(0, 0, 0, 0.8), rgba(31, 41, 55, 0.9));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.team-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.1), transparent, rgba(255, 255, 255, 0.05));
    border-radius: 4rem;
}

.team-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.team-bg-blur-1 {
    top: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.05);
}

.team-bg-blur-2 {
    bottom: 2.5rem;
    right: 2.5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.team-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.team-circle-1 {
    top: 33%;
    right: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.team-circle-2 {
    bottom: 33%;
    left: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.team-decorative-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.team-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .team-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-content {
        padding: 5rem;
    }
}

.team-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.team-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .team-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-title {
        font-size: 3.75rem;
    }
}

.title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.team-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.team-line-segment {
    height: 2px;
}

.team-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.team-line-2 {
    width: 8rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.team-line-3 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.team-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.team-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.team-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.team-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Team Cards */
.team-cards {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .team-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-cards {
        gap: 4rem;
    }
}

.team-card {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

@media (min-width: 768px) {
    .team-card {
        padding: 2.5rem;
    }
}

.team-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
}

.team-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-card-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.team-card:hover .team-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), transparent);
}

.team-card-decorator {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 5rem;
    height: 5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: rotate(45deg);
    transition: transform 0.7s ease;
}

.team-card-decorator-left {
    top: -0.75rem;
    left: -0.75rem;
    right: auto;
}

.team-card:hover .team-card-decorator {
    transform: rotate(90deg);
}

.team-member {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Member Photo */
.member-photo {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .member-photo {
        width: 10rem;
        height: 10rem;
    }
}

.photo-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.photo-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
}

.photo-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.2), transparent);
}

.team-card:hover .photo-bg-1 {
    transform: scale(1.1);
}

.team-card:hover .photo-bg-2 {
    transform: scale(1.05);
}

.member-image {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 4px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.7s ease;
}

.team-card:hover .member-image {
    transform: scale(1.05);
}

.status-badge {
    position: absolute;
    bottom: -0.5rem;
    right: -0.5rem;
    background: linear-gradient(to bottom right, #10b981, #059669);
    border-radius: 50%;
    padding: 0.5rem;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.status-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.rotating-ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

/* Member Info */
.member-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.member-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.member-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.3s ease;
}

@media (min-width: 1024px) {
    .member-name {
        font-size: 1.875rem;
    }
}

.team-card:hover .member-name {
    color: #f3f4f6;
}

.member-role {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    justify-self: center;
}

.role-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.member-role span {
    color: #d1d5db;
    font-weight: 500;
}

.member-description {
    color: #d1d5db;
    line-height: 1.75;
    max-width: 32rem;
    margin: 0 auto;
    transition: color 0.3s ease;
}

.team-card:hover .member-description {
    color: #e5e7eb;
}

/* Member Skills */
.member-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.skill-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: #d1d5db;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Member Social */
.member-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.5rem;
}

.social-link {
    position: relative;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

.social-link:hover {
    transform: scale(1.1);
}

.social-link svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #ffffff;
    transition: color 0.3s ease;
}

.social-instagram:hover {
    background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.5);
}

.social-instagram:hover svg {
    color: #ec4899;
}

.social-linkedin:hover {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.5);
}

.social-linkedin:hover svg {
    color: #3b82f6;
}

.social-facebook:hover {
    background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.3), rgba(29, 78, 216, 0.2));
    border-color: rgba(37, 99, 235, 0.5);
}

.social-facebook:hover svg {
    color: #2563eb;
}

/* Team Central Decorator */
.team-central-decorator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

@media (min-width: 768px) {
    .team-central-decorator {
        display: block;
    }
}

.central-circle {
    width: 6rem;
    height: 6rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner {
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
    animation: pulse 2s ease-in-out infinite;
}

/* Process Section */
.process-section {
    position: relative;
    margin-bottom: 8rem;
    margin-top: 0rem;
}

@media (max-width: 768px) {
    .process-section {
        margin-top: 8rem;
    }
}

.process-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.8), rgba(0, 0, 0, 0.7), rgba(31, 41, 55, 0.8));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.process-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.05), transparent, rgba(255, 255, 255, 0.1));
    border-radius: 4rem;
}

.process-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.process-bg-blur-1 {
    top: 5rem;
    left: 5rem;
    width: 8rem;
    height: 8rem;
    background: rgba(255, 255, 255, 0.05);
}

.process-bg-blur-2 {
    bottom: 5rem;
    right: 5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.process-decorative-circle {
    position: absolute;
    top: 50%;
    right: 2.5rem;
    width: 6rem;
    height: 6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

.process-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .process-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-content {
        padding: 5rem;
    }
}

.process-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.process-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.process-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .process-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-title {
        font-size: 3.75rem;
    }
}

.process-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.process-line-segment {
    height: 2px;
}

.process-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.process-line-2 {
    width: 10rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.process-line-3 {
    width: 10rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.process-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.process-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.process-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.process-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 64rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    height: calc(100% - 0px); /* Ajustado para ir até o projeto concluído com sucesso */
    z-index: 1;
}

.timeline-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

@media (min-width: 768px) {
    .timeline-line {
        display: block;
    }
}

.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.timeline-step {
    position: relative;
    display: grid;
    gap: 2rem;
    align-items: center;
    opacity: 0;
    transform: translateX(-5rem);
}

.timeline-step.visible {
    animation: slideInLeft 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step {
        grid-template-columns: 1fr 1fr;
    }
}

.timeline-step-right {
    transform: translateX(5rem);
}

.timeline-step-right.visible {
    animation: slideInRight 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step-left .step-content {
        text-align: right;
    }
}

.step-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 1.5rem;
    transition: all 0.5s ease;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: -0.8rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-header {
        flex-direction: row-reverse;
    }
}

.step-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    transition: transform 0.3s ease;
}

.step-icon:hover {
    transform: scale(1.1);
}

.step-icon svg {
    width: 2rem;
    height: 2rem;
}

.step-icon-blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.step-icon-purple {
    background: linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.2));
    border-color: rgba(147, 51, 234, 0.3);
    color: #a78bfa;
}

.step-icon-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.step-icon-teal {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(14, 116, 144, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

.step-icon-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.step-icon-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
}

.step-icon-red {
    background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.2));
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
}

/* Novas cores adicionais para etapas da timeline */

/* Step Icons - Novas Cores */
.step-icon-pink {
    background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.3);
    color: #f472b6;
}

.step-icon-indigo {
    background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.3), rgba(79, 70, 229, 0.2));
    border-color: rgba(99, 102, 241, 0.3);
    color: #818cf8;
}

.step-icon-yellow {
    background: linear-gradient(to bottom right, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.2));
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.step-icon-cyan {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(8, 145, 178, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

/* Step Tags - Novas Cores */
.step-tag-pink {
    background: rgba(236, 72, 153, 0.2);
    color: #f9a8d4;
    border-color: rgba(236, 72, 153, 0.3);
}

.step-tag-indigo {
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
    border-color: rgba(99, 102, 241, 0.3);
}

.step-tag-yellow {
    background: rgba(245, 158, 11, 0.2);
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.3);
}

.step-tag-cyan {
    background: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.3);
}

/* Timeline Circles - Novas Cores */
.circle-pink {
    background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.3);
    color: #f472b6;
    position: relative;
}

.circle-pink::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, rgba(236, 72, 153, 0.25) 40%, rgba(236, 72, 153, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 3s;
}

.circle-indigo {
    background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.3), rgba(79, 70, 229, 0.2));
    border-color: rgba(99, 102, 241, 0.3);
    color: #818cf8;
    position: relative;
}

.circle-indigo::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, rgba(99, 102, 241, 0.25) 40%, rgba(99, 102, 241, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 3.5s;
}

.circle-yellow {
    background: linear-gradient(to bottom right, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.2));
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
    position: relative;
}

.circle-yellow::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, rgba(245, 158, 11, 0.25) 40%, rgba(245, 158, 11, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 4s;
}

.circle-cyan {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(8, 145, 178, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
    position: relative;
}

.circle-cyan::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, rgba(6, 182, 212, 0.25) 40%, rgba(6, 182, 212, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 4.5s;
}

/* Circle Ping Animations - Novas Cores */
.circle-ping-pink {
    border-color: rgba(236, 72, 153, 0.2);
}

.circle-ping-indigo {
    border-color: rgba(99, 102, 241, 0.2);
}

.circle-ping-yellow {
    border-color: rgba(245, 158, 11, 0.2);
}

.circle-ping-cyan {
    border-color: rgba(6, 182, 212, 0.2);
}

/* Step Labels - Cores para as novas etapas */
.timeline-step:nth-child(7) .step-label {
    color: #f472b6;
}

.timeline-step:nth-child(8) .step-label {
    color: #818cf8;
}

.timeline-step:nth-child(9) .step-label {
    color: #fbbf24;
}

.timeline-step:nth-child(10) .step-label {
    color: #22d3ee;
}

.step-info {
    display: flex;
    flex-direction: column;
}

.step-label {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.step-label {
    color: #60a5fa;
}

.timeline-step:nth-child(2) .step-label {
    color: #a78bfa;
}

.timeline-step:nth-child(3) .step-label {
    color: #22d3ee;
}

.timeline-step:nth-child(4) .step-label {
    color: #4ade80;
}

.timeline-step:nth-child(5) .step-label {
    color: #fb923c;
}

.timeline-step:nth-child(6) .step-label {
    color: #f87171;
}

.step-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

@media (min-width: 768px) {
    .step-title {
        font-size: 1.875rem;
    }
}

.step-description {
    color: #d1d5db;
    line-height: 1.75;
    font-size: 1.125rem;
}

.step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-tags {
        justify-content: flex-end;
    }
}

.step-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    border: 1px solid;
}

.step-tag-blue {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

.step-tag-purple {
    background: rgba(147, 51, 234, 0.2);
    color: #c4b5fd;
    border-color: rgba(147, 51, 234, 0.3);
}

.step-tag-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.step-tag-teal {
    background: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.3);
}

.step-tag-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.step-tag-orange {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.3);
}

.step-tag-red {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.3);
}

/* Timeline Circle */
.timeline-circle {
    position: relative;
    display: none;
    justify-content: center;
}

@media (min-width: 768px) {
    .timeline-circle {
        display: flex;
    }
}

.circle-inner {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid;
    backdrop-filter: blur(0.5rem);
}

.circle-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.circle-blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    position: relative;
}

.circle-blue::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0.25) 40%, rgba(59, 130, 246, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
}

.circle-purple {
    background: linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.2));
    border-color: rgba(147, 51, 234, 0.3);
    color: #a78bfa;
    position: relative;
}

.circle-purple::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, rgba(147, 51, 234, 0.25) 40%, rgba(147, 51, 234, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

.circle-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    position: relative;
}

.circle-green::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.circle-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
    position: relative;
}

.circle-teal {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(14, 116, 144, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
    position: relative;
}

.circle-teal::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, rgba(6, 182, 212, 0.25) 40%, rgba(6, 182, 212, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.circle-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    position: relative;
}

.circle-green::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

.circle-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
    position: relative;
}

.circle-orange::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.4) 0%, rgba(249, 115, 22, 0.25) 40%, rgba(249, 115, 22, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2s;
}

.circle-red {
    background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.2));
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
    position: relative;
}

.circle-red::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.4) 0%, rgba(220, 38, 38, 0.25) 40%, rgba(220, 38, 38, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2.5s;
}

.circle-ping {
    position: absolute;
    inset: 0;
    border: 2px solid;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.circle-ping-blue {
    border-color: rgba(59, 130, 246, 0.2);
}

.circle-ping-purple {
    border-color: rgba(147, 51, 234, 0.2);
}

.circle-ping-green {
    border-color: rgba(34, 197, 94, 0.2);
}

.circle-ping-orange {
    border-color: rgba(249, 115, 22, 0.2);
}

/* Timeline Final */
.timeline-final {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    z-index: 2;
    opacity: 0;
    transform: translateY(3rem);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-final.visible {
    opacity: 1;
    transform: translateY(0);
}

.final-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    position: relative;
}

.final-badge::before {
    content: '';
    position: absolute;
    top: -25px;
    bottom: -25px;
    left: -50px;
    right: -50px;
    background: radial-gradient(ellipse 150% 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(30px);
    animation: pulseGlow 3s ease-in-out infinite;
}

.final-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #4ade80;
}

.final-text {
    color: #ffffff;
    font-weight: 600;
}

.final-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #4ade80;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Services Section */
.services-section {
    position: relative;
    margin-top: -20rem;
    margin-bottom: 10rem;
}

@media (max-width: 768px) {
    .services-section {
        margin-top: 0rem;
    }
}

.services-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.services-bg-blur-1 {
    top: 2.5rem;
    right: 2.5rem;
    width: 15rem;
    height: 15rem;
    background: rgba(255, 255, 255, 0.05);
}

.services-bg-blur-2 {
    bottom: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.services-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.services-circle-1 {
    top: 50%;
    left: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.services-circle-2 {
    top: 25%;
    right: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.services-decorative-line {
    position: absolute;
    left: 5rem;
    right: 5rem;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.services-line-1 {
    top: 5rem;
}

.services-line-2 {
    bottom: 5rem;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.services-floating-dot {
    position: absolute;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.services-dot-1 {
    top: 33%;
    left: 20%;
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
}

.services-dot-2 {
    top: 66%;
    right: 20%;
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    animation-delay: 1s;
}

.services-dot-3 {
    top: 50%;
    right: 33%;
    width: 0.625rem;
    height: 0.625rem;
    background: rgba(255, 255, 255, 0.25);
    animation-delay: 0.5s;
}

.services-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .services-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .services-content {
        padding: 5rem;
    }
}

/* Services Header */
.services-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.services-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.services-title-container {
    margin-bottom: 2rem;
}

.services-title {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .services-title {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .services-title {
        font-size: 4.5rem;
    }
}

.services-title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.services-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.services-line-segment {
    height: 2px;
}

.services-line-1 {
    width: 8rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.services-line-2 {
    width: 12rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.services-line-3 {
    width: 12rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.services-line-4 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.services-line-dot {
    position: relative;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.services-dot-complex-1,
.services-dot-complex-2 {
    width: 2rem;
    height: 2rem;
    border: 2px solid #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.services-dot-simple {
    width: 1.25rem;
    height: 1.25rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-outer {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite 0.5s;
}

.services-description {
    font-size: 1.5rem;
    color: #d1d5db;
    max-width: 80rem;
    margin: 0 auto;
    line-height: 1.75;
    font-weight: 300;
}

@media (min-width: 768px) {
    .services-description {
        font-size: 1.875rem;
    }
}

.services-description .highlight {
    color: #ffffff;
    font-weight: 600;
}

/* Services Main Card */
.services-main-card {
    max-width: 96rem;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(5rem);
}

.services-main-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.services-card-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    border-radius: 3rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.7s ease;
}

.services-main-card:hover .services-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15));
    transform: scale(1.02);
}

.services-card-decorator {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 1s ease;
}

.services-decorator-1 {
    top: -2rem;
    right: -2rem;
    width: 8rem;
    height: 8rem;
    border-radius: 2rem;
    transform: rotate(45deg);
}

.services-decorator-2 {
    bottom: -1.5rem;
    left: -1.5rem;
    width: 6rem;
    height: 6rem;
    border-radius: 1rem;
    border-color: rgba(255, 255, 255, 0.15);
    transform: rotate(12deg);
}

.services-main-card:hover .services-decorator-1 {
    transform: rotate(90deg);
}

.services-main-card:hover .services-decorator-2 {
    transform: rotate(45deg);
}

.services-card-content {
    position: relative;
    display: grid;
    gap: 3rem;
    align-items: center;
    padding: 3rem;
}

@media (min-width: 768px) {
    .services-card-content {
        padding: 4rem;
    }
}

@media (min-width: 1024px) {
    .services-card-content {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        padding: 5rem;
    }
}

/* Services Text Content */
.services-text-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .services-text-content {
        text-align: left;
    }
}

.services-intro {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.services-icon-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .services-icon-header {
        justify-content: flex-start;
    }
}

.services-main-icon {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.5s ease;
}

.services-main-card:hover .services-main-icon {
    transform: scale(1.1);
}

.services-main-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: #ffffff;
}

.services-header-text {
    text-align: left;
}

.services-card-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.5s ease;
}

@media (min-width: 768px) {
    .services-card-title {
        font-size: 2.25rem;
    }
}

.services-main-card:hover .services-card-title {
    color: #f3f4f6;
}

.services-card-subtitle {
    color: #d1d5db;
    font-size: 1.125rem;
    font-weight: 500;
}

.services-main-description {
    font-size: 1.25rem;
    color: #d1d5db;
    line-height: 1.75;
    transition: color 0.5s ease;
}

@media (min-width: 768px) {
    .services-main-description {
        font-size: 1.5rem;
    }
}

.services-main-card:hover .services-main-description {
    color: #e5e7eb;
}

.services-main-description .highlight {
    color: #ffffff;
    font-weight: 600;
}

.services-secondary-description {
    font-size: 1.125rem;
    color: #9ca3af;
    line-height: 1.75;
    transition: color 0.5s ease;
}

.services-main-card:hover .services-secondary-description {
    color: #d1d5db;
}

/* Services CTA */
.services-cta {
    padding-top: 1rem;
}

.services-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(to right, #ffffff, #e5e7eb);
    color: #000000;
    padding: 1.25rem 2.5rem;
    border-radius: 1.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.5s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.services-btn:hover {
    background: linear-gradient(to right, #f3f4f6, #ffffff);
    transform: scale(1.1) translateY(-0.25rem);
    box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.2);
}

.btn-arrow {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.5s ease;
}

.services-btn:hover .btn-arrow {
    transform: translateX(0.5rem);
}

/* Services Badges */
.services-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1.5rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .services-badges {
        justify-content: flex-start;
    }
}

.quality-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.quality-badge svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.quality-badge:nth-child(1) svg {
    color: #4ade80;
}

.quality-badge:nth-child(2) svg {
    color: #fbbf24;
}

.quality-badge:nth-child(3) svg {
    color: #60a5fa;
}

.quality-badge span {
    color: #ffffff;
    font-weight: 500;
}

/* Services Visual */
.services-visual {
    position: relative;
}

.visual-bg {
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.visual-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(3deg);
}

.visual-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-2deg);
}

.services-main-card:hover .visual-bg-1 {
    transform: rotate(6deg);
}

.services-main-card:hover .visual-bg-2 {
    transform: rotate(-4deg);
}

.services-icons-grid {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 2rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .services-icons-grid {
        padding: 3rem;
    }
}

.service-icon-card {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.service-icon-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.service-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    transition: transform 0.3s ease;
}

.service-icon-card:hover .service-icon {
    transform: scale(1.1);
}

.service-icon-card:nth-child(1) .service-icon {
    color: #60a5fa;
}

.service-icon-card:nth-child(2) .service-icon {
    color: #a78bfa;
}

.service-icon-card:nth-child(3) .service-icon {
    color: #4ade80;
}

.service-icon-card:nth-child(4) .service-icon {
    color: #fb923c;
}

/* Seção principal */
.main-section {
    width: 100%;
    padding: 4rem 0 8rem;
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

/* Background decorativo */
.background-decorative {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
}

.bg-blur-1 {
    top: 5rem;
    right: 2.5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(255, 255, 255, 0.05);
    animation: pulse 4s ease-in-out infinite;
}

.bg-blur-2 {
    bottom: 5rem;
    left: 2.5rem;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.03);
    animation: pulse 4s ease-in-out infinite 1s;
}

.bg-gradient-radial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.decorative-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.decorative-line-1 {
    left: 25%;
}

.decorative-line-2 {
    right: 25%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
}

.floating-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.floating-dot-1 {
    top: 25%;
    left: 33%;
    width: 0.5rem;
    height: 0.5rem;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.floating-dot-2 {
    top: 75%;
    right: 33%;
    width: 0.25rem;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.2);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 1s;
}

.floating-dot-3 {
    top: 50%;
    left: 16%;
    width: 0.375rem;
    height: 0.375rem;
    background: rgba(255, 255, 255, 0.25);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 0.5s;
}

/* Container */
.container {
    max-width: 1400px !important;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
}

/* Hero Section */
.hero-section {
    display: grid;
    gap: 3rem;
    align-items: center;
    margin-bottom: 8rem;
}

@media (min-width: 1024px) {
    .hero-section {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

@media (min-width: 1280px) {
    .hero-section {
        gap: 5rem;
    }
}

.hero-content {
    opacity: 0;
    transform: translateX(-5rem);
    animation: slideInLeft 1s ease-out 0.5s forwards;
}

.hero-text {
    margin-bottom: 2rem;
}

.main-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 900;
    margin-bottom: 32px;
    letter-spacing: 0.15em;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, #ffffff, #cccccc, #ffffff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: title-glow 3s ease-in-out infinite;
    padding: 0 16px;
    overflow: visible;
    line-height: 1.1;
}

/* Header title simple and elegant animation */
.title-animated {
    opacity: 0;
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, 
    #444444 0%, 
    #222222 25%, 
    #444444 50%, 
    #222222 75%, 
    #444444 100%
);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: 
        titleFadeInScale 1.8s ease-out forwards, 
        titleGradientMove 4s linear infinite;
    animation-delay: 0.3s, 1s;
    transform: scale(0.95) translateY(30px);
}

@keyframes titleFadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(30px);
        filter: blur(3px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0px);
        filter: blur(0px);
    }
}

@keyframes titleGradientMove {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes title-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Elemento decorativo futurista */
.decorative-element {
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: fadeInUp 1s ease-out 0.9s forwards;
    opacity: 0;
}

.decorative-line-animated {
    position: relative;
    width: 5rem;
    height: 2px;
    background: linear-gradient(to right, #ffffff, #9ca3af, transparent);
    animation: pulseGlow 2s ease-in-out infinite;
}

.sliding-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 2px;
    background: #ffffff;
    animation: slideRight 3s ease-in-out infinite;
}

.decorative-dots {
    display: flex;
    gap: 0.25rem;
}

.dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-1 {
    background: #ffffff;
}

.dot-2 {
    background: #9ca3af;
    animation-delay: 0.2s;
}

.dot-3 {
    background: #6b7280;
    animation-delay: 0.4s;
}

.decorative-line-static {
    width: 3rem;
    height: 2px;
    background: linear-gradient(to right, transparent, #6b7280, #374151);
}

/* Hero Description */
.hero-description {
    space-y: 1.5rem;
}

.description-main {
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1s forwards;
}

@media (min-width: 768px) {
    .description-main {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .description-main {
        font-size: 1.5rem;
    }
}

.description-secondary {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.2s forwards;
}

@media (min-width: 768px) {
    .description-secondary {
        font-size: 1.125rem;
    }
}

/* Quote Container */
.quote-container {
    padding-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.4s forwards;
}

.quote-card {
    position: relative;
    padding: 1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), transparent);
    border-radius: 1rem;
    border-left: 4px solid rgba(255, 255, 255, 0.3);
}

.quote-text {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    font-style: italic;
}

@media (min-width: 768px) {
    .quote-text {
        font-size: 1.125rem;
    }
}

.quote-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indicator-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Hero Image */
.hero-image {
    position: relative;
    opacity: 0;
    transform: translateX(5rem);
    animation: slideInRight 1s ease-out 0.8s forwards;
}

.image-bg {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    filter: blur(0.5rem);
}

.image-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(6deg);
    animation: float 6s ease-in-out infinite;
}

.image-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-3deg);
    animation: floatReverse 8s ease-in-out infinite;
}

.main-image {
    position: relative;
    border-radius: 1.5rem;
    width: 90%;
    aspect-ratio: 1;
    object-fit: cover;
    box-shadow: 0 10px 40px 10px rgba(255, 255, 255, 0.158);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.7s ease;
    margin-left: auto;
}

/* Image Decorators */
.image-decorator {
    position: absolute;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-decorator-1 {
    top: -1rem;
    right: -1rem;
    width: 4rem;
    height: 4rem;
}

.image-decorator-2 {
    bottom: -1rem;
    left: -1rem;
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
}

.image-decorator .icon {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.image-decorator-1 .icon {
    animation: pulse 2s ease-in-out infinite;
}

.image-decorator-2 .icon {
    animation: spinSlow 30s linear infinite;
}

/* Decoradores de imagem melhorados */
.decorator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.decorator-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.decorator-pulse {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, transparent 70%);
    animation: pulseGlow 2s ease-in-out infinite;
    z-index: -1;
}

.image-decorator:hover .decorator-text {
    transform: translateY(-2px);
    color: #c084fc;
}

.image-decorator:hover .decorator-pulse {
    animation-duration: 1s;
}

/* Essence Section */
.essence-section {
    margin-bottom: 8rem;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.section-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.section-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .section-title {
        font-size: 3rem;
    }
}

.title-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.line-segment {
    height: 2px;
    background: linear-gradient(to right, transparent, #ffffff);
}

.line-1 {
    width: 4rem;
}

.line-2 {
    width: 6rem;
    background: #ffffff;
}

.line-3 {
    width: 4rem;
    background: linear-gradient(to left, transparent, #ffffff);
}

.line-dot {
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

/* Essence Cards */
.essence-cards {
    display: grid;
    gap: 2rem;
    margin-top: -70px;
    margin-bottom: 100px;
}

@media (min-width: 768px) {
    .essence-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .essence-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.essence-card {
    position: relative;
    padding: 2rem;
    border-radius: 1.5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

.essence-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.essence-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.essence-card-wide {
    grid-column: span 2;
}

@media (min-width: 1024px) {
    .essence-card-wide {
        grid-column: span 1;
    }
}

.card-bg-blur {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.essence-card:hover .card-bg-blur {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
}

.card-content {
    position: relative;
}

.card-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.card-icon svg {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.essence-card:hover .card-icon {
    transform: scale(1.1);
}

.card-title {
    font-weight: 700;
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-title {
        font-size: 1.5rem;
    }
}

.essence-card:hover .card-title {
    color: #f3f4f6;
}

.card-description {
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-description {
        font-size: 1rem;
    }
}

.essence-card:hover .card-description {
    color: #e5e7eb;
}

/* Values List */
.values-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
}

@media (min-width: 768px) {
    .values-list {
        font-size: 1rem;
    }
}

.value-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.value-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
}

.value-item strong {
    color: #ffffff;
}

/* Team Section */
.team-section {
    position: relative;
    margin-bottom: 8rem;
}

.team-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.9), rgba(0, 0, 0, 0.8), rgba(31, 41, 55, 0.9));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.team-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.1), transparent, rgba(255, 255, 255, 0.05));
    border-radius: 4rem;
}

.team-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.team-bg-blur-1 {
    top: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.05);
}

.team-bg-blur-2 {
    bottom: 2.5rem;
    right: 2.5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.team-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.team-circle-1 {
    top: 33%;
    right: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.team-circle-2 {
    bottom: 33%;
    left: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.team-decorative-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.team-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .team-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-content {
        padding: 5rem;
    }
}

.team-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.team-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .team-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-title {
        font-size: 3.75rem;
    }
}

.title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.team-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.team-line-segment {
    height: 2px;
}

.team-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.team-line-2 {
    width: 8rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.team-line-3 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.team-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.team-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.team-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.team-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Team Cards */
.team-cards {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .team-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-cards {
        gap: 4rem;
    }
}

.team-card {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

@media (min-width: 768px) {
    .team-card {
        padding: 2.5rem;
    }
}

.team-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
}

.team-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-card-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.team-card:hover .team-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), transparent);
}

.team-card-decorator {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 5rem;
    height: 5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: rotate(45deg);
    transition: transform 0.7s ease;
}

.team-card-decorator-left {
    top: -0.75rem;
    left: -0.75rem;
    right: auto;
}

.team-card:hover .team-card-decorator {
    transform: rotate(90deg);
}

.team-member {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Member Photo */
.member-photo {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .member-photo {
        width: 10rem;
        height: 10rem;
    }
}

.photo-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.photo-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
}

.photo-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.2), transparent);
}

.team-card:hover .photo-bg-1 {
    transform: scale(1.1);
}

.team-card:hover .photo-bg-2 {
    transform: scale(1.05);
}

.member-image {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 4px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.7s ease;
}

.team-card:hover .member-image {
    transform: scale(1.05);
}

.status-badge {
    position: absolute;
    bottom: -0.5rem;
    right: -0.5rem;
    background: linear-gradient(to bottom right, #10b981, #059669);
    border-radius: 50%;
    padding: 0.5rem;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.status-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.rotating-ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

/* Member Info */
.member-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.member-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.member-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.3s ease;
}

@media (min-width: 1024px) {
    .member-name {
        font-size: 1.875rem;
    }
}

.team-card:hover .member-name {
    color: #f3f4f6;
}

.member-role {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    justify-self: center;
}

.role-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.member-role span {
    color: #d1d5db;
    font-weight: 500;
}

.member-description {
    color: #d1d5db;
    line-height: 1.75;
    max-width: 32rem;
    margin: 0 auto;
    transition: color 0.3s ease;
}

.team-card:hover .member-description {
    color: #e5e7eb;
}

/* Member Skills */
.member-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.skill-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: #d1d5db;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Member Social */
.member-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.5rem;
}

.social-link {
    position: relative;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

.social-link:hover {
    transform: scale(1.1);
}

.social-link svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #ffffff;
    transition: color 0.3s ease;
}

.social-instagram:hover {
    background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.5);
}

.social-instagram:hover svg {
    color: #ec4899;
}

.social-linkedin:hover {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.5);
}

.social-linkedin:hover svg {
    color: #3b82f6;
}

.social-facebook:hover {
    background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.3), rgba(29, 78, 216, 0.2));
    border-color: rgba(37, 99, 235, 0.5);
}

.social-facebook:hover svg {
    color: #2563eb;
}

/* Team Central Decorator */
.team-central-decorator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

@media (min-width: 768px) {
    .team-central-decorator {
        display: block;
    }
}

.central-circle {
    width: 6rem;
    height: 6rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner {
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
    animation: pulse 2s ease-in-out infinite;
}

/* Process Section */
.process-section {
    position: relative;
    margin-bottom: 8rem;
    margin-top: 0rem;
}

@media (max-width: 768px) {
    .process-section {
        margin-top: 8rem;
    }
}

.process-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.8), rgba(0, 0, 0, 0.7), rgba(31, 41, 55, 0.8));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.process-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.05), transparent, rgba(255, 255, 255, 0.1));
    border-radius: 4rem;
}

.process-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.process-bg-blur-1 {
    top: 5rem;
    left: 5rem;
    width: 8rem;
    height: 8rem;
    background: rgba(255, 255, 255, 0.05);
}

.process-bg-blur-2 {
    bottom: 5rem;
    right: 5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.process-decorative-circle {
    position: absolute;
    top: 50%;
    right: 2.5rem;
    width: 6rem;
    height: 6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

.process-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .process-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-content {
        padding: 5rem;
    }
}

.process-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.process-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.process-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .process-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-title {
        font-size: 3.75rem;
    }
}

.process-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.process-line-segment {
    height: 2px;
}

.process-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.process-line-2 {
    width: 10rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.process-line-3 {
    width: 10rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.process-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.process-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.process-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.process-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 64rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    height: calc(100% - 0px); /* Ajustado para ir até o projeto concluído com sucesso */
    z-index: 1;
}

.timeline-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

@media (min-width: 768px) {
    .timeline-line {
        display: block;
    }
}

.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.timeline-step {
    position: relative;
    display: grid;
    gap: 2rem;
    align-items: center;
    opacity: 0;
    transform: translateX(-5rem);
}

.timeline-step.visible {
    animation: slideInLeft 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step {
        grid-template-columns: 1fr 1fr;
    }
}

.timeline-step-right {
    transform: translateX(5rem);
}

.timeline-step-right.visible {
    animation: slideInRight 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step-left .step-content {
        text-align: right;
    }
}

.step-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 1.5rem;
    transition: all 0.5s ease;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-header {
        flex-direction: row-reverse;
    }
}

.step-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    transition: transform 0.3s ease;
}

.step-icon:hover {
    transform: scale(1.1);
}

.step-icon svg {
    width: 2rem;
    height: 2rem;
}

/* Seção principal */
.main-section {
    width: 100%;
    padding: 4rem 0 8rem;
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

/* Background decorativo */
.background-decorative {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
}

.bg-blur-1 {
    top: 5rem;
    right: 2.5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(255, 255, 255, 0.05);
    animation: pulse 4s ease-in-out infinite;
}

.bg-blur-2 {
    bottom: 5rem;
    left: 2.5rem;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.03);
    animation: pulse 4s ease-in-out infinite 1s;
}

.bg-gradient-radial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.decorative-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.decorative-line-1 {
    left: 25%;
}

.decorative-line-2 {
    right: 25%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
}

.floating-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.floating-dot-1 {
    top: 25%;
    left: 33%;
    width: 0.5rem;
    height: 0.5rem;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.floating-dot-2 {
    top: 75%;
    right: 33%;
    width: 0.25rem;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.2);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 1s;
}

.floating-dot-3 {
    top: 50%;
    left: 16%;
    width: 0.375rem;
    height: 0.375rem;
    background: rgba(255, 255, 255, 0.25);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 0.5s;
}

/* Container */
.container {
    max-width: 1400px !important;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
}

/* Hero Section */
.hero-section {
    display: grid;
    gap: 3rem;
    align-items: center;
    margin-bottom: 8rem;
}

@media (min-width: 1024px) {
    .hero-section {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

@media (min-width: 1280px) {
    .hero-section {
        gap: 5rem;
    }
}

.hero-content {
    opacity: 0;
    transform: translateX(-5rem);
    animation: slideInLeft 1s ease-out 0.5s forwards;
}

.hero-text {
    margin-bottom: 2rem;
}

.main-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 900;
    margin-bottom: 32px;
    letter-spacing: 0.15em;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, #ffffff, #cccccc, #ffffff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: title-glow 3s ease-in-out infinite;
    padding: 0 16px;
    overflow: visible;
    line-height: 1.1;
    margin-left: -15px !important;
}

/* Header title simple and elegant animation */
.title-animated {
    opacity: 0;
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, 
    #444444 0%, 
    #222222 25%, 
    #444444 50%, 
    #222222 75%, 
    #444444 100%
);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: 
        titleFadeInScale 1.8s ease-out forwards, 
        titleGradientMove 4s linear infinite;
    animation-delay: 0.3s, 1s;
    transform: scale(0.95) translateY(30px);
}

@keyframes titleFadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(30px);
        filter: blur(3px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0px);
        filter: blur(0px);
    }
}

@keyframes titleGradientMove {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes title-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Elemento decorativo futurista */
.decorative-element {
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: fadeInUp 1s ease-out 0.9s forwards;
    opacity: 0;
}

.decorative-line-animated {
    position: relative;
    width: 5rem;
    height: 2px;
    background: linear-gradient(to right, #ffffff, #9ca3af, transparent);
    animation: pulseGlow 2s ease-in-out infinite;
}

.sliding-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 2px;
    background: #ffffff;
    animation: slideRight 3s ease-in-out infinite;
}

.decorative-dots {
    display: flex;
    gap: 0.25rem;
}

.dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-1 {
    background: #ffffff;
}

.dot-2 {
    background: #9ca3af;
    animation-delay: 0.2s;
}

.dot-3 {
    background: #6b7280;
    animation-delay: 0.4s;
}

.decorative-line-static {
    width: 3rem;
    height: 2px;
    background: linear-gradient(to right, transparent, #6b7280, #374151);
}

/* Hero Description */
.hero-description {
    space-y: 1.5rem;
}

.description-main {
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1s forwards;
}

@media (min-width: 768px) {
    .description-main {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .description-main {
        font-size: 1.5rem;
    }
}

.description-secondary {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.2s forwards;
}

@media (min-width: 768px) {
    .description-secondary {
        font-size: 1.125rem;
    }
}

/* Quote Container */
.quote-container {
    padding-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.4s forwards;
}

.quote-card {
    position: relative;
    padding: 1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), transparent);
    border-radius: 1rem;
    border-left: 4px solid rgba(255, 255, 255, 0.3);
}

.quote-text {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    font-style: italic;
}

@media (min-width: 768px) {
    .quote-text {
        font-size: 1.125rem;
    }
}

.quote-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indicator-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Hero Image */
.hero-image {
    position: relative;
    opacity: 0;
    transform: translateX(5rem);
    animation: slideInRight 1s ease-out 0.8s forwards;
}

.image-bg {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    filter: blur(0.5rem);
}

.image-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(6deg);
    animation: float 6s ease-in-out infinite;
}

.image-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-3deg);
    animation: floatReverse 8s ease-in-out infinite;
}

.main-image {
    position: relative;
    border-radius: 1.5rem;
    width: 90%;
    aspect-ratio: 1;
    object-fit: cover;
    box-shadow: 0 10px 40px 10px rgba(255, 255, 255, 0.158);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.7s ease;
    margin-left: auto;
}

/* Image Decorators */
.image-decorator {
    position: absolute;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-decorator-1 {
    top: -1rem;
    right: -1rem;
    width: 4rem;
    height: 4rem;
}

.image-decorator-2 {
    bottom: -1rem;
    left: -1rem;
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
}

.image-decorator .icon {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.image-decorator-1 .icon {
    animation: pulse 2s ease-in-out infinite;
}

.image-decorator-2 .icon {
    animation: spinSlow 30s linear infinite;
}

/* Decoradores de imagem melhorados */
.decorator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.decorator-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.decorator-pulse {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, transparent 70%);
    animation: pulseGlow 2s ease-in-out infinite;
    z-index: -1;
}

.image-decorator:hover .decorator-text {
    transform: translateY(-2px);
    color: #c084fc;
}

.image-decorator:hover .decorator-pulse {
    animation-duration: 1s;
}

/* Essence Section */
.essence-section {
    margin-bottom: 8rem;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.section-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.section-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .section-title {
        font-size: 3rem;
    }
}

.title-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.line-segment {
    height: 2px;
    background: linear-gradient(to right, transparent, #ffffff);
}

.line-1 {
    width: 4rem;
}

.line-2 {
    width: 6rem;
    background: #ffffff;
}

.line-3 {
    width: 4rem;
    background: linear-gradient(to left, transparent, #ffffff);
}

.line-dot {
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

/* Essence Cards */
.essence-cards {
    display: grid;
    gap: 2rem;
    margin-top: -70px;
    margin-bottom: 100px;
}

@media (min-width: 768px) {
    .essence-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .essence-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.essence-card {
    position: relative;
    padding: 2rem;
    border-radius: 1.5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

.essence-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.essence-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.essence-card-wide {
    grid-column: span 2;
}

@media (min-width: 1024px) {
    .essence-card-wide {
        grid-column: span 1;
    }
}

.card-bg-blur {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.essence-card:hover .card-bg-blur {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
}

.card-content {
    position: relative;
}

.card-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.card-icon svg {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.essence-card:hover .card-icon {
    transform: scale(1.1);
}

.card-title {
    font-weight: 700;
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-title {
        font-size: 1.5rem;
    }
}

.essence-card:hover .card-title {
    color: #f3f4f6;
}

.card-description {
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-description {
        font-size: 1rem;
    }
}

.essence-card:hover .card-description {
    color: #e5e7eb;
}

/* Values List */
.values-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
}

@media (min-width: 768px) {
    .values-list {
        font-size: 1rem;
    }
}

.value-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.value-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
}

.value-item strong {
    color: #ffffff;
}

/* Team Section */
.team-section {
    position: relative;
    margin-bottom: 8rem;
}

.team-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.9), rgba(0, 0, 0, 0.8), rgba(31, 41, 55, 0.9));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.team-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.1), transparent, rgba(255, 255, 255, 0.05));
    border-radius: 4rem;
}

.team-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.team-bg-blur-1 {
    top: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.05);
}

.team-bg-blur-2 {
    bottom: 2.5rem;
    right: 2.5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.team-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.team-circle-1 {
    top: 33%;
    right: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.team-circle-2 {
    bottom: 33%;
    left: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.team-decorative-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.team-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .team-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-content {
        padding: 5rem;
    }
}

.team-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.team-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .team-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-title {
        font-size: 3.75rem;
    }
}

.title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.team-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.team-line-segment {
    height: 2px;
}

.team-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.team-line-2 {
    width: 8rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.team-line-3 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.team-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.team-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.team-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.team-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Team Cards */
.team-cards {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .team-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-cards {
        gap: 4rem;
    }
}

.team-card {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

@media (min-width: 768px) {
    .team-card {
        padding: 2.5rem;
    }
}

.team-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
}

.team-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-card-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.team-card:hover .team-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), transparent);
}

.team-card-decorator {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 5rem;
    height: 5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: rotate(45deg);
    transition: transform 0.7s ease;
}

.team-card-decorator-left {
    top: -0.75rem;
    left: -0.75rem;
    right: auto;
}

.team-card:hover .team-card-decorator {
    transform: rotate(90deg);
}

.team-member {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Member Photo */
.member-photo {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .member-photo {
        width: 10rem;
        height: 10rem;
    }
}

.photo-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.photo-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
}

.photo-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.2), transparent);
}

.team-card:hover .photo-bg-1 {
    transform: scale(1.1);
}

.team-card:hover .photo-bg-2 {
    transform: scale(1.05);
}

.member-image {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 4px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.7s ease;
}

.team-card:hover .member-image {
    transform: scale(1.05);
}

.status-badge {
    position: absolute;
    bottom: -0.5rem;
    right: -0.5rem;
    background: linear-gradient(to bottom right, #10b981, #059669);
    border-radius: 50%;
    padding: 0.5rem;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.status-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.rotating-ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

/* Member Info */
.member-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.member-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.member-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.3s ease;
}

@media (min-width: 1024px) {
    .member-name {
        font-size: 1.875rem;
    }
}

.team-card:hover .member-name {
    color: #f3f4f6;
}

.member-role {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    justify-self: center;
}

.role-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.member-role span {
    color: #d1d5db;
    font-weight: 500;
}

.member-description {
    color: #d1d5db;
    line-height: 1.75;
    max-width: 32rem;
    margin: 0 auto;
    transition: color 0.3s ease;
}

.team-card:hover .member-description {
    color: #e5e7eb;
}

/* Member Skills */
.member-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.skill-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: #d1d5db;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Member Social */
.member-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.5rem;
}

.social-link {
    position: relative;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

.social-link:hover {
    transform: scale(1.1);
}

.social-link svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #ffffff;
    transition: color 0.3s ease;
}

.social-instagram:hover {
    background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.5);
}

.social-instagram:hover svg {
    color: #ec4899;
}

.social-linkedin:hover {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.5);
}

.social-linkedin:hover svg {
    color: #3b82f6;
}

.social-facebook:hover {
    background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.3), rgba(29, 78, 216, 0.2));
    border-color: rgba(37, 99, 235, 0.5);
}

.social-facebook:hover svg {
    color: #2563eb;
}

/* Team Central Decorator */
.team-central-decorator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

@media (min-width: 768px) {
    .team-central-decorator {
        display: block;
    }
}

.central-circle {
    width: 6rem;
    height: 6rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner {
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
    animation: pulse 2s ease-in-out infinite;
}

/* Process Section */
.process-section {
    position: relative;
    margin-bottom: 8rem;
    margin-top: 0rem;
}

@media (max-width: 768px) {
    .process-section {
        margin-top: 8rem;
    }
}

.process-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.8), rgba(0, 0, 0, 0.7), rgba(31, 41, 55, 0.8));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.process-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.05), transparent, rgba(255, 255, 255, 0.1));
    border-radius: 4rem;
}

.process-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.process-bg-blur-1 {
    top: 5rem;
    left: 5rem;
    width: 8rem;
    height: 8rem;
    background: rgba(255, 255, 255, 0.05);
}

.process-bg-blur-2 {
    bottom: 5rem;
    right: 5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.process-decorative-circle {
    position: absolute;
    top: 50%;
    right: 2.5rem;
    width: 6rem;
    height: 6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

.process-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .process-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-content {
        padding: 5rem;
    }
}

.process-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.process-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.process-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .process-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-title {
        font-size: 3.75rem;
    }
}

.process-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.process-line-segment {
    height: 2px;
}

.process-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.process-line-2 {
    width: 10rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.process-line-3 {
    width: 10rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.process-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.process-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.process-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.process-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 64rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    height: calc(100% - 0px); /* Ajustado para ir até o projeto concluído com sucesso */
    z-index: 1;
}

.timeline-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

@media (min-width: 768px) {
    .timeline-line {
        display: block;
    }
}

.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.timeline-step {
    position: relative;
    display: grid;
    gap: 2rem;
    align-items: center;
    opacity: 0;
    transform: translateX(-5rem);
}

.timeline-step.visible {
    animation: slideInLeft 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step {
        grid-template-columns: 1fr 1fr;
    }
}

.timeline-step-right {
    transform: translateX(5rem);
}

.timeline-step-right.visible {
    animation: slideInRight 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step-left .step-content {
        text-align: right;
    }
}

.step-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 1.5rem;
    transition: all 0.5s ease;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-header {
        flex-direction: row-reverse;
    }
}

.step-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    transition: transform 0.3s ease;
}

.step-icon:hover {
    transform: scale(1.1);
}

.step-icon svg {
    width: 2rem;
    height: 2rem;
}

.step-icon-blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.step-icon-purple {
    background: linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.2));
    border-color: rgba(147, 51, 234, 0.3);
    color: #a78bfa;
}

.step-icon-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.step-icon-teal {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(14, 116, 144, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

.step-icon-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.step-icon-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
}

.step-icon-red {
    background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.2));
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
}

.step-info {
    display: flex;
    flex-direction: column;
}

.step-label {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.step-label {
    color: #60a5fa;
}

.timeline-step:nth-child(2) .step-label {
    color: #a78bfa;
}

.timeline-step:nth-child(3) .step-label {
    color: #22d3ee;
}

.timeline-step:nth-child(4) .step-label {
    color: #4ade80;
}

.timeline-step:nth-child(5) .step-label {
    color: #fb923c;
}

.timeline-step:nth-child(6) .step-label {
    color: #f87171;
}

.step-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

@media (min-width: 768px) {
    .step-title {
        font-size: 1.875rem;
    }
}

.step-description {
    color: #d1d5db;
    line-height: 1.75;
    font-size: 1.125rem;
}

.step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-tags {
        justify-content: flex-end;
    }
}

.step-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    border: 1px solid;
}

.step-tag-blue {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

.step-tag-purple {
    background: rgba(147, 51, 234, 0.2);
    color: #c4b5fd;
    border-color: rgba(147, 51, 234, 0.3);
}

.step-tag-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.step-tag-teal {
    background: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.3);
}

.step-tag-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.step-tag-orange {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.3);
}

.step-tag-red {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.3);
}

/* Timeline Circle */
.timeline-circle {
    position: relative;
    display: none;
    justify-content: center;
}

@media (min-width: 768px) {
    .timeline-circle {
        display: flex;
    }
}

.circle-inner {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid;
    backdrop-filter: blur(0.5rem);
}

.circle-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.circle-blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    position: relative;
}

.circle-blue::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0.25) 40%, rgba(59, 130, 246, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
}

.circle-purple {
    background: linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.2));
    border-color: rgba(147, 51, 234, 0.3);
    color: #a78bfa;
    position: relative;
}

.circle-purple::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, rgba(147, 51, 234, 0.25) 40%, rgba(147, 51, 234, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

.circle-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    position: relative;
}

.circle-green::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.circle-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
    position: relative;
}

.circle-teal {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(14, 116, 144, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
    position: relative;
}

.circle-teal::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, rgba(6, 182, 212, 0.25) 40%, rgba(6, 182, 212, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.circle-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    position: relative;
}

.circle-green::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

.circle-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
    position: relative;
}

.circle-orange::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.4) 0%, rgba(249, 115, 22, 0.25) 40%, rgba(249, 115, 22, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2s;
}

.circle-red {
    background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.2));
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
    position: relative;
}

.circle-red::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.4) 0%, rgba(220, 38, 38, 0.25) 40%, rgba(220, 38, 38, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2.5s;
}

.circle-ping {
    position: absolute;
    inset: 0;
    border: 2px solid;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.circle-ping-blue {
    border-color: rgba(59, 130, 246, 0.2);
}

.circle-ping-purple {
    border-color: rgba(147, 51, 234, 0.2);
}

.circle-ping-green {
    border-color: rgba(34, 197, 94, 0.2);
}

.circle-ping-orange {
    border-color: rgba(249, 115, 22, 0.2);
}

/* Timeline Final */
.timeline-final {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    z-index: 2;
    opacity: 0;
    transform: translateY(3rem);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-final.visible {
    opacity: 1;
    transform: translateY(0);
}

.final-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    position: relative;
}

.final-badge::before {
    content: '';
    position: absolute;
    top: -25px;
    bottom: -25px;
    left: -50px;
    right: -50px;
    background: radial-gradient(ellipse 150% 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(30px);
    animation: pulseGlow 3s ease-in-out infinite;
}

.final-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #4ade80;
}

.final-text {
    color: #ffffff;
    font-weight: 600;
}

.final-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #4ade80;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Services Section */
.services-section {
    position: relative;
    margin-top: -20rem;
    margin-bottom: 10rem;
}

@media (max-width: 768px) {
    .services-section {
        margin-top: 0rem;
    }
}

.services-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.services-bg-blur-1 {
    top: 2.5rem;
    right: 2.5rem;
    width: 15rem;
    height: 15rem;
    background: rgba(255, 255, 255, 0.05);
}

.services-bg-blur-2 {
    bottom: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.services-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.services-circle-1 {
    top: 50%;
    left: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.services-circle-2 {
    top: 25%;
    right: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.services-decorative-line {
    position: absolute;
    left: 5rem;
    right: 5rem;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.services-line-1 {
    top: 5rem;
}

.services-line-2 {
    bottom: 5rem;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.services-floating-dot {
    position: absolute;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.services-dot-1 {
    top: 33%;
    left: 20%;
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
}

.services-dot-2 {
    top: 66%;
    right: 20%;
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    animation-delay: 1s;
}

.services-dot-3 {
    top: 50%;
    right: 33%;
    width: 0.625rem;
    height: 0.625rem;
    background: rgba(255, 255, 255, 0.25);
    animation-delay: 0.5s;
}

.services-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .services-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .services-content {
        padding: 5rem;
    }
}

/* Services Header */
.services-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.services-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.services-title-container {
    margin-bottom: 2rem;
}

.services-title {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .services-title {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .services-title {
        font-size: 4.5rem;
    }
}

.services-title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.services-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.services-line-segment {
    height: 2px;
}

.services-line-1 {
    width: 8rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.services-line-2 {
    width: 12rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.services-line-3 {
    width: 12rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.services-line-4 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.services-line-dot {
    position: relative;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.services-dot-complex-1,
.services-dot-complex-2 {
    width: 2rem;
    height: 2rem;
    border: 2px solid #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.services-dot-simple {
    width: 1.25rem;
    height: 1.25rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-outer {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite 0.5s;
}

.services-description {
    font-size: 1.5rem;
    color: #d1d5db;
    max-width: 80rem;
    margin: 0 auto;
    line-height: 1.75;
    font-weight: 300;
}

@media (min-width: 768px) {
    .services-description {
        font-size: 1.875rem;
    }
}

.services-description .highlight {
    color: #ffffff;
    font-weight: 600;
}

/* Services Main Card */
.services-main-card {
    max-width: 96rem;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(5rem);
}

.services-main-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.services-card-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    border-radius: 3rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.7s ease;
}

.services-main-card:hover .services-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15));
    transform: scale(1.02);
}

.services-card-decorator {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 1s ease;
}

.services-decorator-1 {
    top: -2rem;
    right: -2rem;
    width: 8rem;
    height: 8rem;
    border-radius: 2rem;
    transform: rotate(45deg);
}

.services-decorator-2 {
    bottom: -1.5rem;
    left: -1.5rem;
    width: 6rem;
    height: 6rem;
    border-radius: 1rem;
    border-color: rgba(255, 255, 255, 0.15);
    transform: rotate(12deg);
}

.services-main-card:hover .services-decorator-1 {
    transform: rotate(90deg);
}

.services-main-card:hover .services-decorator-2 {
    transform: rotate(45deg);
}

.services-card-content {
    position: relative;
    display: grid;
    gap: 3rem;
    align-items: center;
    padding: 3rem;
}

@media (min-width: 768px) {
    .services-card-content {
        padding: 4rem;
    }
}

@media (min-width: 1024px) {
    .services-card-content {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        padding: 5rem;
    }
}

/* Services Text Content */
.services-text-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .services-text-content {
        text-align: left;
    }
}

.services-intro {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.services-icon-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .services-icon-header {
        justify-content: flex-start;
    }
}

.services-main-icon {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.5s ease;
}

.services-main-card:hover .services-main-icon {
    transform: scale(1.1);
}

.services-main-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: #ffffff;
}

.services-header-text {
    text-align: left;
}

.services-card-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.5s ease;
}

@media (min-width: 768px) {
    .services-card-title {
        font-size: 2.25rem;
    }
}

.services-main-card:hover .services-card-title {
    color: #f3f4f6;
}

.services-card-subtitle {
    color: #d1d5db;
    font-size: 1.125rem;
    font-weight: 500;
}

.services-main-description {
    font-size: 1.25rem;
    color: #d1d5db;
    line-height: 1.75;
    transition: color 0.5s ease;
}

@media (min-width: 768px) {
    .services-main-description {
        font-size: 1.5rem;
    }
}

.services-main-card:hover .services-main-description {
    color: #e5e7eb;
}

.services-main-description .highlight {
    color: #ffffff;
    font-weight: 600;
}

.services-secondary-description {
    font-size: 1.125rem;
    color: #9ca3af;
    line-height: 1.75;
    transition: color 0.5s ease;
}

.services-main-card:hover .services-secondary-description {
    color: #d1d5db;
}

/* Services CTA */
.services-cta {
    padding-top: 1rem;
}

.services-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(to right, #ffffff, #e5e7eb);
    color: #000000;
    padding: 1.25rem 2.5rem;
    border-radius: 1.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.5s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.services-btn:hover {
    background: linear-gradient(to right, #f3f4f6, #ffffff);
    transform: scale(1.1) translateY(-0.25rem);
    box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.2);
}

.btn-arrow {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.5s ease;
}

.services-btn:hover .btn-arrow {
    transform: translateX(0.5rem);
}

/* Services Badges */
.services-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1.5rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .services-badges {
        justify-content: flex-start;
    }
}

.quality-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.quality-badge svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.quality-badge:nth-child(1) svg {
    color: #4ade80;
}

.quality-badge:nth-child(2) svg {
    color: #fbbf24;
}

.quality-badge:nth-child(3) svg {
    color: #60a5fa;
}

.quality-badge span {
    color: #ffffff;
    font-weight: 500;
}

/* Services Visual */
.services-visual {
    position: relative;
}

.visual-bg {
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.visual-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(3deg);
}

.visual-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-2deg);
}

.services-main-card:hover .visual-bg-1 {
    transform: rotate(6deg);
}

.services-main-card:hover .visual-bg-2 {
    transform: rotate(-4deg);
}

.services-icons-grid {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 2rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .services-icons-grid {
        padding: 3rem;
    }
}

.service-icon-card {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.service-icon-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.service-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    transition: transform 0.3s ease;
}

.service-icon-card:hover .service-icon {
    transform: scale(1.1);
}

.service-icon-card:nth-child(1) .service-icon {
    color: #60a5fa;
}

.service-icon-card:nth-child(2) .service-icon {
    color: #a78bfa;
}

.service-icon-card:nth-child(3) .service-icon {
    color: #4ade80;
}

.service-icon-card:nth-child(4) .service-icon {
    color: #fb923c;
}

/* Seção principal */
.main-section {
    width: 100%;
    padding: 4rem 0 8rem;
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

/* Background decorativo */
.background-decorative {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
}

.bg-blur-1 {
    top: 5rem;
    right: 2.5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(255, 255, 255, 0.05);
    animation: pulse 4s ease-in-out infinite;
}

.bg-blur-2 {
    bottom: 5rem;
    left: 2.5rem;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.03);
    animation: pulse 4s ease-in-out infinite 1s;
}

.bg-gradient-radial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.decorative-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.decorative-line-1 {
    left: 25%;
}

.decorative-line-2 {
    right: 25%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
}

.floating-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.floating-dot-1 {
    top: 25%;
    left: 33%;
    width: 0.5rem;
    height: 0.5rem;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.floating-dot-2 {
    top: 75%;
    right: 33%;
    width: 0.25rem;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.2);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 1s;
}

.floating-dot-3 {
    top: 50%;
    left: 16%;
    width: 0.375rem;
    height: 0.375rem;
    background: rgba(255, 255, 255, 0.25);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 0.5s;
}

/* Container */
.container {
    max-width: 1400px !important;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
}

/* Hero Section */
.hero-section {
    display: grid;
    gap: 3rem;
    align-items: center;
    margin-bottom: 8rem;
}

@media (min-width: 1024px) {
    .hero-section {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

@media (min-width: 1280px) {
    .hero-section {
        gap: 5rem;
    }
}

.hero-content {
    opacity: 0;
    transform: translateX(-5rem);
    animation: slideInLeft 1s ease-out 0.5s forwards;
}

.hero-text {
    margin-bottom: 2rem;
}

.main-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 900;
    margin-bottom: 32px;
    letter-spacing: 0.15em;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, #ffffff, #cccccc, #ffffff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: title-glow 3s ease-in-out infinite;
    padding: 0 16px;
    overflow: visible;
    line-height: 1.1;
}

/* Header title simple and elegant animation */
.title-animated {
    opacity: 0;
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, 
    #444444 0%, 
    #222222 25%, 
    #444444 50%, 
    #222222 75%, 
    #444444 100%
);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: 
        titleFadeInScale 1.8s ease-out forwards, 
        titleGradientMove 4s linear infinite;
    animation-delay: 0.3s, 1s;
    transform: scale(0.95) translateY(30px);
}

@keyframes titleFadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(30px);
        filter: blur(3px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0px);
        filter: blur(0px);
    }
}

@keyframes titleGradientMove {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes title-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Elemento decorativo futurista */
.decorative-element {
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: fadeInUp 1s ease-out 0.9s forwards;
    opacity: 0;
}

.decorative-line-animated {
    position: relative;
    width: 5rem;
    height: 2px;
    background: linear-gradient(to right, #ffffff, #9ca3af, transparent);
    animation: pulseGlow 2s ease-in-out infinite;
}

.sliding-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 2px;
    background: #ffffff;
    animation: slideRight 3s ease-in-out infinite;
}

.decorative-dots {
    display: flex;
    gap: 0.25rem;
}

.dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-1 {
    background: #ffffff;
}

.dot-2 {
    background: #9ca3af;
    animation-delay: 0.2s;
}

.dot-3 {
    background: #6b7280;
    animation-delay: 0.4s;
}

.decorative-line-static {
    width: 3rem;
    height: 2px;
    background: linear-gradient(to right, transparent, #6b7280, #374151);
}

/* Hero Description */
.hero-description {
    space-y: 1.5rem;
}

.description-main {
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1s forwards;
}

@media (min-width: 768px) {
    .description-main {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .description-main {
        font-size: 1.5rem;
    }
}

.description-secondary {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.2s forwards;
}

@media (min-width: 768px) {
    .description-secondary {
        font-size: 1.125rem;
    }
}

/* Quote Container */
.quote-container {
    padding-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.4s forwards;
}

.quote-card {
    position: relative;
    padding: 1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), transparent);
    border-radius: 1rem;
    border-left: 4px solid rgba(255, 255, 255, 0.3);
}

.quote-text {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    font-style: italic;
}

@media (min-width: 768px) {
    .quote-text {
        font-size: 1.125rem;
    }
}

.quote-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indicator-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Hero Image */
.hero-image {
    position: relative;
    opacity: 0;
    transform: translateX(5rem);
    animation: slideInRight 1s ease-out 0.8s forwards;
}

.image-bg {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    filter: blur(0.5rem);
}

.image-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(6deg);
    animation: float 6s ease-in-out infinite;
}

.image-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-3deg);
    animation: floatReverse 8s ease-in-out infinite;
}

.main-image {
    position: relative;
    border-radius: 1.5rem;
    width: 90%;
    aspect-ratio: 1;
    object-fit: cover;
    box-shadow: 0 10px 40px 10px rgba(255, 255, 255, 0.158);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.7s ease;
    margin-left: auto;
}

/* Image Decorators */
.image-decorator {
    position: absolute;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-decorator-1 {
    top: -1rem;
    right: -1rem;
    width: 4rem;
    height: 4rem;
}

.image-decorator-2 {
    bottom: -1rem;
    left: -1rem;
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
}

.image-decorator .icon {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.image-decorator-1 .icon {
    animation: pulse 2s ease-in-out infinite;
}

.image-decorator-2 .icon {
    animation: spinSlow 30s linear infinite;
}

/* Decoradores de imagem melhorados */
.decorator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.decorator-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.decorator-pulse {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, transparent 70%);
    animation: pulseGlow 2s ease-in-out infinite;
    z-index: -1;
}

.image-decorator:hover .decorator-text {
    transform: translateY(-2px);
    color: #c084fc;
}

.image-decorator:hover .decorator-pulse {
    animation-duration: 1s;
}

/* Essence Section */
.essence-section {
    margin-bottom: 8rem;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.section-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.section-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .section-title {
        font-size: 3rem;
    }
}

.title-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.line-segment {
    height: 2px;
    background: linear-gradient(to right, transparent, #ffffff);
}

.line-1 {
    width: 4rem;
}

.line-2 {
    width: 6rem;
    background: #ffffff;
}

.line-3 {
    width: 4rem;
    background: linear-gradient(to left, transparent, #ffffff);
}

.line-dot {
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

/* Essence Cards */
.essence-cards {
    display: grid;
    gap: 2rem;
    margin-top: -70px;
    margin-bottom: 100px;
}

@media (min-width: 768px) {
    .essence-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .essence-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.essence-card {
    position: relative;
    padding: 2rem;
    border-radius: 1.5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

.essence-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.essence-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.essence-card-wide {
    grid-column: span 2;
}

@media (min-width: 1024px) {
    .essence-card-wide {
        grid-column: span 1;
    }
}

.card-bg-blur {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.essence-card:hover .card-bg-blur {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
}

.card-content {
    position: relative;
}

.card-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.card-icon svg {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.essence-card:hover .card-icon {
    transform: scale(1.1);
}

.card-title {
    font-weight: 700;
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-title {
        font-size: 1.5rem;
    }
}

.essence-card:hover .card-title {
    color: #f3f4f6;
}

.card-description {
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-description {
        font-size: 1rem;
    }
}

.essence-card:hover .card-description {
    color: #e5e7eb;
}

/* Values List */
.values-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
}

@media (min-width: 768px) {
    .values-list {
        font-size: 1rem;
    }
}

.value-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.value-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
}

.value-item strong {
    color: #ffffff;
}

/* Team Section */
.team-section {
    position: relative;
    margin-bottom: 8rem;
}

.team-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.9), rgba(0, 0, 0, 0.8), rgba(31, 41, 55, 0.9));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.team-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.1), transparent, rgba(255, 255, 255, 0.05));
    border-radius: 4rem;
}

.team-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.team-bg-blur-1 {
    top: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.05);
}

.team-bg-blur-2 {
    bottom: 2.5rem;
    right: 2.5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.team-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.team-circle-1 {
    top: 33%;
    right: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.team-circle-2 {
    bottom: 33%;
    left: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.team-decorative-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.team-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .team-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-content {
        padding: 5rem;
    }
}

.team-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.team-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .team-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-title {
        font-size: 3.75rem;
    }
}

.title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.team-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.team-line-segment {
    height: 2px;
}

.team-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.team-line-2 {
    width: 8rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.team-line-3 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.team-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.team-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.team-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.team-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Team Cards */
.team-cards {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .team-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-cards {
        gap: 4rem;
    }
}

.team-card {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

@media (min-width: 768px) {
    .team-card {
        padding: 2.5rem;
    }
}

.team-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
}

.team-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-card-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.team-card:hover .team-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), transparent);
}

.team-card-decorator {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 5rem;
    height: 5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: rotate(45deg);
    transition: transform 0.7s ease;
}

.team-card-decorator-left {
    top: -0.75rem;
    left: -0.75rem;
    right: auto;
}

.team-card:hover .team-card-decorator {
    transform: rotate(90deg);
}

.team-member {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Member Photo */
.member-photo {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .member-photo {
        width: 10rem;
        height: 10rem;
    }
}

.photo-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.photo-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
}

.photo-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.2), transparent);
}

.team-card:hover .photo-bg-1 {
    transform: scale(1.1);
}

.team-card:hover .photo-bg-2 {
    transform: scale(1.05);
}

.member-image {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 4px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.7s ease;
}

.team-card:hover .member-image {
    transform: scale(1.05);
}

.status-badge {
    position: absolute;
    bottom: -0.5rem;
    right: -0.5rem;
    background: linear-gradient(to bottom right, #10b981, #059669);
    border-radius: 50%;
    padding: 0.5rem;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.status-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.rotating-ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

/* Member Info */
.member-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.member-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.member-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.3s ease;
}

@media (min-width: 1024px) {
    .member-name {
        font-size: 1.875rem;
    }
}

.team-card:hover .member-name {
    color: #f3f4f6;
}

.member-role {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    justify-self: center;
}

.role-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.member-role span {
    color: #d1d5db;
    font-weight: 500;
}

.member-description {
    color: #d1d5db;
    line-height: 1.75;
    max-width: 32rem;
    margin: 0 auto;
    transition: color 0.3s ease;
}

.team-card:hover .member-description {
    color: #e5e7eb;
}

/* Member Skills */
.member-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.skill-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: #d1d5db;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Member Social */
.member-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.5rem;
}

.social-link {
    position: relative;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

.social-link:hover {
    transform: scale(1.1);
}

.social-link svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #ffffff;
    transition: color 0.3s ease;
}

.social-instagram:hover {
    background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.5);
}

.social-instagram:hover svg {
    color: #ec4899;
}

.social-linkedin:hover {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.5);
}

.social-linkedin:hover svg {
    color: #3b82f6;
}

.social-facebook:hover {
    background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.3), rgba(29, 78, 216, 0.2));
    border-color: rgba(37, 99, 235, 0.5);
}

.social-facebook:hover svg {
    color: #2563eb;
}

/* Team Central Decorator */
.team-central-decorator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

@media (min-width: 768px) {
    .team-central-decorator {
        display: block;
    }
}

.central-circle {
    width: 6rem;
    height: 6rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner {
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
    animation: pulse 2s ease-in-out infinite;
}

/* Process Section */
.process-section {
    position: relative;
    margin-bottom: 8rem;
    margin-top: 0rem;
}

@media (max-width: 768px) {
    .process-section {
        margin-top: 8rem;
    }
}

.process-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.8), rgba(0, 0, 0, 0.7), rgba(31, 41, 55, 0.8));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.process-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.05), transparent, rgba(255, 255, 255, 0.1));
    border-radius: 4rem;
}

.process-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.process-bg-blur-1 {
    top: 5rem;
    left: 5rem;
    width: 8rem;
    height: 8rem;
    background: rgba(255, 255, 255, 0.05);
}

.process-bg-blur-2 {
    bottom: 5rem;
    right: 5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.process-decorative-circle {
    position: absolute;
    top: 50%;
    right: 2.5rem;
    width: 6rem;
    height: 6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

.process-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .process-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-content {
        padding: 5rem;
    }
}

.process-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.process-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.process-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .process-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-title {
        font-size: 3.75rem;
    }
}

.process-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.process-line-segment {
    height: 2px;
}

.process-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.process-line-2 {
    width: 10rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.process-line-3 {
    width: 10rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.process-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.process-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.process-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.process-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 64rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    height: calc(100% - 0px); /* Ajustado para ir até o projeto concluído com sucesso */
    z-index: 1;
}

.timeline-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

@media (min-width: 768px) {
    .timeline-line {
        display: block;
    }
}

.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.timeline-step {
    position: relative;
    display: grid;
    gap: 2rem;
    align-items: center;
    opacity: 0;
    transform: translateX(-5rem);
}

.timeline-step.visible {
    animation: slideInLeft 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step {
        grid-template-columns: 1fr 1fr;
    }
}

.timeline-step-right {
    transform: translateX(5rem);
}

.timeline-step-right.visible {
    animation: slideInRight 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step-left .step-content {
        text-align: right;
    }
}

.step-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 1.5rem;
    transition: all 0.5s ease;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-header {
        flex-direction: row-reverse;
    }
}

.step-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    transition: transform 0.3s ease;
}

.step-icon:hover {
    transform: scale(1.1);
}

.step-icon svg {
    width: 2rem;
    height: 2rem;
}

.step-icon-blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.step-icon-purple {
    background: linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.2));
    border-color: rgba(147, 51, 234, 0.3);
    color: #a78bfa;
}

.step-icon-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.step-icon-teal {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(14, 116, 144, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

.step-icon-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.step-icon-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
}

.step-icon-red {
    background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.2));
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
}

.step-info {
    display: flex;
    flex-direction: column;
}

.step-label {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.step-label {
    color: #60a5fa;
}

.timeline-step:nth-child(2) .step-label {
    color: #a78bfa;
}

.timeline-step:nth-child(3) .step-label {
    color: #22d3ee;
}

.timeline-step:nth-child(4) .step-label {
    color: #4ade80;
}

.timeline-step:nth-child(5) .step-label {
    color: #fb923c;
}

.timeline-step:nth-child(6) .step-label {
    color: #f87171;
}

.step-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

@media (min-width: 768px) {
    .step-title {
        font-size: 1.875rem;
    }
}

.step-description {
    color: #d1d5db;
    line-height: 1.75;
    font-size: 1.125rem;
}

.step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-tags {
        justify-content: flex-end;
    }
}

.step-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    border: 1px solid;
}

.step-tag-blue {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

.step-tag-purple {
    background: rgba(147, 51, 234, 0.2);
    color: #c4b5fd;
    border-color: rgba(147, 51, 234, 0.3);
}

.step-tag-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.step-tag-teal {
    background: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.3);
}

.step-tag-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.step-tag-orange {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.3);
}

.step-tag-red {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.3);
}

/* Timeline Circle */
.timeline-circle {
    position: relative;
    display: none;
    justify-content: center;
}

@media (min-width: 768px) {
    .timeline-circle {
        display: flex;
    }
}

.circle-inner {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid;
    backdrop-filter: blur(0.5rem);
}

.circle-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.circle-blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    position: relative;
}

.circle-blue::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0.25) 40%, rgba(59, 130, 246, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
}

.circle-purple {
    background: linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.2));
    border-color: rgba(147, 51, 234, 0.3);
    color: #a78bfa;
    position: relative;
}

.circle-purple::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, rgba(147, 51, 234, 0.25) 40%, rgba(147, 51, 234, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

.circle-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    position: relative;
}

.circle-green::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.circle-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
    position: relative;
}

.circle-teal {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(14, 116, 144, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
    position: relative;
}

.circle-teal::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, rgba(6, 182, 212, 0.25) 40%, rgba(6, 182, 212, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.circle-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    position: relative;
}

.circle-green::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

.circle-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
    position: relative;
}

.circle-orange::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.4) 0%, rgba(249, 115, 22, 0.25) 40%, rgba(249, 115, 22, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2s;
}

.circle-red {
    background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.2));
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
    position: relative;
}

.circle-red::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.4) 0%, rgba(220, 38, 38, 0.25) 40%, rgba(220, 38, 38, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2.5s;
}

.circle-ping {
    position: absolute;
    inset: 0;
    border: 2px solid;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.circle-ping-blue {
    border-color: rgba(59, 130, 246, 0.2);
}

.circle-ping-purple {
    border-color: rgba(147, 51, 234, 0.2);
}

.circle-ping-green {
    border-color: rgba(34, 197, 94, 0.2);
}

.circle-ping-orange {
    border-color: rgba(249, 115, 22, 0.2);
}

/* Timeline Final */
.timeline-final {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    z-index: 2;
    opacity: 0;
    transform: translateY(3rem);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-final.visible {
    opacity: 1;
    transform: translateY(0);
}

.final-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    position: relative;
}

.final-badge::before {
    content: '';
    position: absolute;
    top: -25px;
    bottom: -25px;
    left: -50px;
    right: -50px;
    background: radial-gradient(ellipse 150% 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(30px);
    animation: pulseGlow 3s ease-in-out infinite;
}

.final-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #4ade80;
}

.final-text {
    color: #ffffff;
    font-weight: 600;
}

.final-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #4ade80;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Services Section */
.services-section {
    position: relative;
    margin-top: -20rem;
    margin-bottom: 10rem;
}

@media (max-width: 768px) {
    .services-section {
        margin-top: 0rem;
    }
}

.services-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.services-bg-blur-1 {
    top: 2.5rem;
    right: 2.5rem;
    width: 15rem;
    height: 15rem;
    background: rgba(255, 255, 255, 0.05);
}

.services-bg-blur-2 {
    bottom: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.services-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.services-circle-1 {
    top: 50%;
    left: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.services-circle-2 {
    top: 25%;
    right: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.services-decorative-line {
    position: absolute;
    left: 5rem;
    right: 5rem;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.services-line-1 {
    top: 5rem;
}

.services-line-2 {
    bottom: 5rem;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.services-floating-dot {
    position: absolute;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.services-dot-1 {
    top: 33%;
    left: 20%;
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
}

.services-dot-2 {
    top: 66%;
    right: 20%;
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    animation-delay: 1s;
}

.services-dot-3 {
    top: 50%;
    right: 33%;
    width: 0.625rem;
    height: 0.625rem;
    background: rgba(255, 255, 255, 0.25);
    animation-delay: 0.5s;
}

.services-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .services-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .services-content {
        padding: 5rem;
    }
}

/* Services Header */
.services-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.services-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.services-title-container {
    margin-bottom: 2rem;
}

.services-title {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .services-title {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .services-title {
        font-size: 4.5rem;
    }
}

.services-title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.services-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.services-line-segment {
    height: 2px;
}

.services-line-1 {
    width: 8rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.services-line-2 {
    width: 12rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.services-line-3 {
    width: 12rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.services-line-4 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.services-line-dot {
    position: relative;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.services-dot-complex-1,
.services-dot-complex-2 {
    width: 2rem;
    height: 2rem;
    border: 2px solid #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.services-dot-simple {
    width: 1.25rem;
    height: 1.25rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-outer {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite 0.5s;
}

.services-description {
    font-size: 1.5rem;
    color: #d1d5db;
    max-width: 80rem;
    margin: 0 auto;
    line-height: 1.75;
    font-weight: 300;
}

@media (min-width: 768px) {
    .services-description {
        font-size: 1.875rem;
    }
}

.services-description .highlight {
    color: #ffffff;
    font-weight: 600;
}

/* Services Main Card */
.services-main-card {
    max-width: 96rem;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(5rem);
}

.services-main-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.services-card-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    border-radius: 3rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.7s ease;
}

.services-main-card:hover .services-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15));
    transform: scale(1.02);
}

.services-card-decorator {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 1s ease;
}

.services-decorator-1 {
    top: -2rem;
    right: -2rem;
    width: 8rem;
    height: 8rem;
    border-radius: 2rem;
    transform: rotate(45deg);
}

.services-decorator-2 {
    bottom: -1.5rem;
    left: -1.5rem;
    width: 6rem;
    height: 6rem;
    border-radius: 1rem;
    border-color: rgba(255, 255, 255, 0.15);
    transform: rotate(12deg);
}

.services-main-card:hover .services-decorator-1 {
    transform: rotate(90deg);
}

.services-main-card:hover .services-decorator-2 {
    transform: rotate(45deg);
}

.services-card-content {
    position: relative;
    display: grid;
    gap: 3rem;
    align-items: center;
    padding: 3rem;
}

@media (min-width: 768px) {
    .services-card-content {
        padding: 4rem;
    }
}

@media (min-width: 1024px) {
    .services-card-content {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        padding: 5rem;
    }
}

/* Services Text Content */
.services-text-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .services-text-content {
        text-align: left;
    }
}

.services-intro {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.services-icon-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .services-icon-header {
        justify-content: flex-start;
    }
}

.services-main-icon {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.5s ease;
}

.services-main-card:hover .services-main-icon {
    transform: scale(1.1);
}

.services-main-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: #ffffff;
}

.services-header-text {
    text-align: left;
}

.services-card-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.5s ease;
}

@media (min-width: 768px) {
    .services-card-title {
        font-size: 2.25rem;
    }
}

.services-main-card:hover .services-card-title {
    color: #f3f4f6;
}

.services-card-subtitle {
    color: #d1d5db;
    font-size: 1.125rem;
    font-weight: 500;
}

.services-main-description {
    font-size: 1.25rem;
    color: #d1d5db;
    line-height: 1.75;
    transition: color 0.5s ease;
}

@media (min-width: 768px) {
    .services-main-description {
        font-size: 1.5rem;
    }
}

.services-main-card:hover .services-main-description {
    color: #e5e7eb;
}

.services-main-description .highlight {
    color: #ffffff;
    font-weight: 600;
}

.services-secondary-description {
    font-size: 1.125rem;
    color: #9ca3af;
    line-height: 1.75;
    transition: color 0.5s ease;
}

.services-main-card:hover .services-secondary-description {
    color: #d1d5db;
}

/* Services CTA */
.services-cta {
    padding-top: 1rem;
}

.services-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(to right, #ffffff, #e5e7eb);
    color: #000000;
    padding: 1.25rem 2.5rem;
    border-radius: 1.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.5s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.services-btn:hover {
    background: linear-gradient(to right, #f3f4f6, #ffffff);
    transform: scale(1.1) translateY(-0.25rem);
    box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.2);
}

.btn-arrow {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.5s ease;
}

.services-btn:hover .btn-arrow {
    transform: translateX(0.5rem);
}

/* Services Badges */
.services-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1.5rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .services-badges {
        justify-content: flex-start;
    }
}

.quality-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.quality-badge svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.quality-badge:nth-child(1) svg {
    color: #4ade80;
}

.quality-badge:nth-child(2) svg {
    color: #fbbf24;
}

.quality-badge:nth-child(3) svg {
    color: #60a5fa;
}

.quality-badge span {
    color: #ffffff;
    font-weight: 500;
}

/* Services Visual */
.services-visual {
    position: relative;
}

.visual-bg {
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.visual-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(3deg);
}

.visual-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-2deg);
}

.services-main-card:hover .visual-bg-1 {
    transform: rotate(6deg);
}

.services-main-card:hover .visual-bg-2 {
    transform: rotate(-4deg);
}

.services-icons-grid {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 2rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .services-icons-grid {
        padding: 3rem;
    }
}

.service-icon-card {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.service-icon-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.service-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    transition: transform 0.3s ease;
}

.service-icon-card:hover .service-icon {
    transform: scale(1.1);
}

.service-icon-card:nth-child(1) .service-icon {
    color: #60a5fa;
}

.service-icon-card:nth-child(2) .service-icon {
    color: #a78bfa;
}

.service-icon-card:nth-child(3) .service-icon {
    color: #4ade80;
}

.service-icon-card:nth-child(4) .service-icon {
    color: #fb923c;
}

.service-icon-title {
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.service-icon-description {
    font-size: 0.75rem;
    color: #9ca3af;
}

.visual-center-decorator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
    height: 4rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-dot {
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Services Stats */
.services-stats {
    position: relative;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    text-align: center;
}

@media (min-width: 768px) {
    .services-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-number {
    font-size: 3rem !important;
    font-weight: 700;
    color: #ffffff;
}

@media (min-width: 768px) {
    .stat-number {
        font-size: 3rem;
    }
}

.stat-label {
    color: #9ca3af;
    font-weight: 500;
}

.stat-bar {
    width: 4rem;
    height: 0.25rem;
    border-radius: 9999px;
    margin: 0 auto;
}

.stat-bar-blue {
    background: linear-gradient(to right, #3b82f6, #93c5fd);
}

.stat-bar-green {
    background: linear-gradient(to right, #10b981, #6ee7b7);
}

.stat-bar-purple {
    background: linear-gradient(to right, #8b5cf6, #c4b5fd);
}

/* Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-5rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(5rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(6deg);
    }
    50% {
        transform: translateY(-0.625rem) rotate(6deg);
    }
}

@keyframes floatReverse {
    0%, 100% {
        transform: translateY(0px) rotate(-3deg);
    }
    50% {
        transform: translateY(0.625rem) rotate(-3deg);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes heroGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(147, 51, 234, 0.6);
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(4rem);
    }
}

@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinVerySlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .main-section {
        padding: 2rem 0 4rem;
    }
    
    .container {
        padding: 0 0.5rem;
    }
    
    .hero-section {
        margin-bottom: 4rem;
    }
    
    .essence-section,
    .team-section,
    .process-section {
        margin-bottom: 4rem;
    }
    
    .team-content,
    .process-content,
    .services-content {
        padding: 1.5rem;
    }
}

/* Estrelas cadentes adicionais para Como Funciona */
.shooting-star-4,
.shooting-star-5,
.shooting-star-6,
.shooting-star-7,
.shooting-star-8,
.shooting-star-9,
.shooting-star-10 {
    position: absolute;
    width: 2px;
    height: 2px;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.8), transparent);
    border-radius: 50%;
    animation: shootingStar 6s linear infinite;
}

.shooting-star-4 {
    top: 15%;
    left: 20%;
    animation-delay: 1s;
    animation-duration: 4s;
}

.shooting-star-5 {
    top: 25%;
    right: 30%;
    animation-delay: 2.5s;
    animation-duration: 5s;
}

.shooting-star-6 {
    top: 60%;
    left: 15%;
    animation-delay: 3.2s;
    animation-duration: 4.5s;
}

.shooting-star-7 {
    top: 35%;
    right: 20%;
    animation-delay: 4s;
    animation-duration: 6s;
}

.shooting-star-8 {
    top: 75%;
    left: 35%;
    animation-delay: 0.8s;
    animation-duration: 5.5s;
}

.shooting-star-9 {
    top: 45%;
    right: 40%;
    animation-delay: 2s;
    animation-duration: 4.8s;
}

.shooting-star-10 {
    top: 85%;
    left: 60%;
    animation-delay: 3.8s;
    animation-duration: 5.2s;
}

/* Pontos de luz adicionais */
.light-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

.light-dot-1 {
    top: 5%;
    left: 15%;
    animation-delay: 0.5s;
}

.light-dot-2 {
    top: 35%;
    left: 88%;
    animation-delay: 1.2s;
}

.light-dot-3 {
    top: 68%;
    left: 5%;
    animation-delay: 2.1s;
}

.light-dot-4 {
    top: 85%;
    left: 75%;
    animation-delay: 0.8s;
}

.light-dot-5 {
    top: 18%;
    left: 60%;
    animation-delay: 1.8s;
}

.light-dot-6 {
    top: 92%;
    left: 45%;
    animation-delay: 2.5s;
}

.light-dot-7 {
    top: 52%;
    left: 30%;
    animation-delay: 1.5s;
}

.light-dot-8 {
    top: 78%;
    left: 95%;
    animation-delay: 3s;
}

/* Novas estrelas estáticas adicionais */
.light-dot-9 {
    top: 25%;
    left: 20%;
    animation-delay: 0.3s;
}

.light-dot-10 {
    top: 42%;
    left: 70%;
    animation-delay: 1.7s;
}

.light-dot-11 {
    top: 65%;
    left: 82%;
    animation-delay: 2.3s;
}

.light-dot-13 {
    top: 8%;
    left: 88%;
    animation-delay: 1.4s;
}

.light-dot-14 {
    top: 72%;
    left: 18%;
    animation-delay: 2.8s;
}

.light-dot-15 {
    top: 98%;
    left: 20%;
    animation-delay: 0.6s;
}

.light-dot-16 {
    top: 32%;
    left: 42%;
    animation-delay: 1.9s;
}

.light-dot-17 {
    top: 55%;
    left: 8%;
    animation-delay: 3.2s;
}

.light-dot-18 {
    top: 12%;
    left: 35%;
    animation-delay: 0.4s;
}

.light-dot-19 {
    top: 88%;
    left: 62%;
    animation-delay: 2.6s;
}

.light-dot-20 {
    top: 28%;
    left: 78%;
    animation-delay: 1.1s;
}

/* Estrelas adicionais para maior realismo - movimento suave e bem espalhadas */
.light-dot-21 {
    position: absolute;
    top: 7%;
    left: 8%;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat1 8s ease-in-out infinite;
    animation-delay: 0.2s;
}

.light-dot-22 {
    position: absolute;
    top: 23%;
    left: 85%;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat2 9s ease-in-out infinite;
    animation-delay: 1.8s;
}

.light-dot-23 {
    position: absolute;
    top: 45%;
    left: 12%;
    width: 2.5px;
    height: 2.5px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat3 7s ease-in-out infinite;
    animation-delay: 0.9s;
}

.light-dot-24 {
    position: absolute;
    top: 62%;
    left: 92%;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat1 10s ease-in-out infinite;
    animation-delay: 2.3s;
}

.light-dot-25 {
    position: absolute;
    top: 15%;
    left: 52%;
    width: 3.5px;
    height: 3.5px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat2 6s ease-in-out infinite;
    animation-delay: 1.2s;
}

.light-dot-26 {
    position: absolute;
    top: 83%;
    left: 25%;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat3 8.5s ease-in-out infinite;
    animation-delay: 0.6s;
}

.light-dot-27 {
    position: absolute;
    top: 38%;
    left: 78%;
    width: 2.8px;
    height: 2.8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat1 7.5s ease-in-out infinite;
    animation-delay: 2.1s;
}

.light-dot-28 {
    position: absolute;
    top: 72%;
    left: 65%;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat2 9.5s ease-in-out infinite;
    animation-delay: 1.5s;
}

.light-dot-29 {
    position: absolute;
    top: 28%;
    left: 38%;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat3 8s ease-in-out infinite;
    animation-delay: 0.8s;
}

.light-dot-30 {
    position: absolute;
    top: 95%;
    left: 88%;
    width: 2.2px;
    height: 2.2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat1 6.5s ease-in-out infinite;
    animation-delay: 1.9s;
}

/* Animações de movimento suave para cima e baixo */
@keyframes slowFloat1 {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-15px);
    opacity: 1;
  }
}

@keyframes slowFloat2 {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-12px);
    opacity: 1;
  }
}

@keyframes slowFloat3 {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-18px);
    opacity: 0.9;
  }
}

/* Linha gradiente decorativa após Como Funciona */
.como-funciona-bottom-line {
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
}

.gradient-line {
    width: 80%;
    height: 2px;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 20%, 
        rgba(255, 255, 255, 0.6) 40%, 
        rgba(255, 255, 255, 0.9) 50%, 
        rgba(255, 255, 255, 0.6) 60%, 
        rgba(255, 255, 255, 0.2) 80%, 
        transparent 100%
    );
    position: relative;
    animation: gradientPulse 4s ease-in-out infinite;
}



/* Fundo preto para Projeto Concluído com Sucesso */
.final-badge {
    background: #000000 !important;
    background-color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Segunda seção de serviços */
.services-section-2 {
    width: 100%;
    padding: 6rem 0;
    background: linear-gradient(135deg, #000000 0%, #111111 50%, #000000 100%);
    position: relative;
    overflow: hidden;
    margin-top: 4rem;
    z-index: 1;
    display: block;
}

.services-section-2 .services-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 2rem;
}

.services-section-2 .services-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
}

.services-section-2 .services-title-gradient {
    background: linear-gradient(135deg, #9333ea, #c084fc, #e879f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.services-section-2 .services-header {
    text-align: center;
    margin-bottom: 4rem;
    color: white;
}

.services-section-2 .services-title {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.services-section-2 .services-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.services-section-2 .services-main-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    padding: 3rem;
    backdrop-filter: blur(10px);
    color: white;
}

.services-section-2 .services-card-content {
    display: grid;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .services-section-2 .services-card-content {
        grid-template-columns: 1fr 1fr;
    }
}

/* Estilos específicos para elementos internos da segunda seção */
.services-section-2 .services-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.services-section-2 .services-line-segment {
    height: 1px;
    width: 2rem;
    background: rgba(255, 255, 255, 0.3);
}

.services-section-2 .services-line-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

.services-section-2 .dot-outer {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-section-2 .dot-inner {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

.services-section-2 .highlight {
    color: #c084fc;
    font-weight: 600;
}

.services-section-2 .services-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #9333ea, #c084fc);
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.services-section-2 .services-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(147, 51, 234, 0.3);
}

.services-section-2 .services-badges {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.services-section-2 .quality-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.services-section-2 .quality-badge svg {
    width: 1rem;
    height: 1rem;
    color: #c084fc;
}

.services-section-2 .services-icons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.services-section-2 .service-icon-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.services-section-2 .service-icon-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.services-section-2 .service-icon {
    width: 2rem;
    height: 2rem;
    color: #c084fc;
    margin-bottom: 0.5rem;
}

.services-section-2 .service-icon-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem;
}

.services-section-2 .service-icon-description {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.services-section-2 .services-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.services-section-2 .stat-item {
    text-align: center;
}

.services-section-2 .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #c084fc;
    margin-bottom: 0.5rem;
}

/* Seção de Projetos - Design Minimalista Preto e Branco */
.projects-section {
    padding: 3rem 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.projects-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.projects-card {
    position: relative;
    background: rgba(0, 0, 0, 0);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
    padding: 3rem;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Badge simplificado */
.projects-premium-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 3;
    backdrop-filter: blur(10px);
}

.projects-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
    position: relative;
    z-index: 2;
}

.projects-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.projects-title {
    color: #ffffff;
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em;
}

.title-line-1,
.title-line-2,
.title-line-3 {
    display: block;
}

.title-highlight {
    color: #ffffff;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.title-highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
}

.projects-title-decoration {
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 0.6;
}

.decoration-line {
    width: 30px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
}

.decoration-dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

.projects-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 550px;
    margin: 0;
}

.highlight-text {
    color: #ffffff;
    font-weight: 500;
}

.projects-cta {
    margin-top: 0.5rem;
}

.projects-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 36px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(20px);
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 
                0 0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.projects-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    opacity: 0;
    transition: opacity 0.5s ease;
}

.projects-button:hover::before {
    opacity: 1;
}

.projects-button:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
                0 0 0 1px rgba(255, 255, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.projects-button:active {
    transform: translateY(-2px) scale(1.01);
    transition: all 0.1s ease;
}

.btn-text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-text svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.projects-button:hover .btn-text svg {
    transform: translateX(4px);
}

/* Responsividade para Projects Section */
@media (max-width: 768px) {
    .projects-section {
        padding: 2rem 0;
    }

    .projects-container {
        padding: 0 1rem;
    }

    .projects-card {
        padding: 2rem;
        border-radius: 16px;
    }

    .projects-content {
        gap: 1.5rem;
    }

    .projects-title {
        font-size: 2.2rem;
    }

    .projects-description {
        font-size: 1rem;
        max-width: 100%;
    }

    .projects-premium-badge {
        position: static;
        align-self: center;
        margin-bottom: 1rem;
    }

    .projects-button {
        padding: 16px 30px;
        font-size: 15px;
    }

    .btn-text {
        gap: 10px;
    }

    .btn-text svg {
        width: 20px;
        height: 20px;
    }

    .projects-button:hover {
        transform: translateY(-3px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .projects-section {
        padding: 1.5rem 0;
    }

    .projects-card {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .projects-content {
        gap: 1.25rem;
    }

    .projects-title {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .projects-description {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .projects-button {
        padding: 14px 28px;
        font-size: 14px;
    }

    .btn-text {
        gap: 8px;
    }

    .btn-text svg {
        width: 18px;
        height: 18px;
    }

    .projects-button:hover {
        transform: translateY(-2px) scale(1.01);
    }

    .projects-title-decoration {
        gap: 0.75rem;
    }

    .decoration-line {
        width: 20px;
    }
}

.services-section-2 .stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.services-section-2 .stat-bar {
    height: 3px;
    background: linear-gradient(90deg, transparent, #c084fc, transparent);
    border-radius: 2px;
    margin-top: 0.5rem;
}

/* Elementos decorativos específicos */
.services-section-2 .visual-center-decorator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: rgba(192, 132, 252, 0.2);
    border-radius: 50%;
    border: 2px solid rgba(192, 132, 252, 0.4);
}

.services-section-2 .center-dot {
    width: 6px;
    height: 6px;
    background: #c084fc;
    border-radius: 50%;
    margin: 5px auto;
}

/* Responsividade específica */
@media (max-width: 768px) {
    .services-section-2 .services-title {
        font-size: 2rem;
    }
    
    .services-section-2 .services-card-content {
        grid-template-columns: 1fr;
    }
    
    .services-section-2 .services-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .services-section-2 .services-badges {
        flex-direction: column;
    }
}

/* Animações */
@keyframes shootingStar {
    0% {
        opacity: 0;
        transform: translateX(-100px) translateY(-100px) scale(0);
    }
    10% {
        opacity: 1;
        transform: translateX(-50px) translateY(-50px) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateX(100px) translateY(100px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(150px) translateY(150px) scale(0);
    }
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes gradientPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scaleX(1);
    }
    50% {
        opacity: 1;
        transform: scaleX(1.02);
    }
}

/* Services Section */
.services-section {
    position: relative;
    width: 100%;
    padding: 8rem 0;
    background: #000;
    color: #fff;
    overflow: hidden;
  }
  
  /* Background Effects */
  .background-effects {
    position: absolute;
    inset: 0;
  }
  
  .radial-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1), transparent 50%);
  }
  
  .blur-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
  }
  
  .blur-circle-1 {
    top: 0;
    left: 25%;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.05);
    animation: pulse 4s ease-in-out infinite;
  }
  
  .blur-circle-2 {
    bottom: 0;
    right: 25%;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.03);
    animation: pulse 4s ease-in-out infinite;
    animation-delay: 1s;
  }
  
  .geometric-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
  }
  
  .dot {
    position: absolute;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 2px;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  
  .dot-1 {
    top: 5rem;
    left: 5rem;
    width: 8px;
    height: 8px;
    animation-delay: 0.3s;
  }
  
  .dot-2 {
    top: 10rem;
    right: 8rem;
    width: 4px;
    height: 4px;
    opacity: 0.6;
    animation-delay: 0.7s;
  }
  
  .dot-3 {
    bottom: 8rem;
    left: 33%;
    width: 6px;
    height: 6px;
    opacity: 0.4;
    animation-delay: 1s;
  }
  
  .dot-4 {
    bottom: 5rem;
    right: 5rem;
    width: 8px;
    height: 8px;
    opacity: 0.3;
    animation-delay: 0.5s;
  }
  
  /* Container */
  .container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }
  
  /* Header Section */
  .header-section {
    text-align: center;
    margin-bottom: 5rem;
  }
  
  .premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    margin-bottom: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 9999px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .main-title {
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 900;
    margin-bottom: 2rem;
    margin-top: -50px;
    line-height: 0.9;
    letter-spacing: -0.02em;
  }
  
  .title-primary {
    display: block;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 6rem;
  }
  
  .title-secondary {
    display: block;
    color: rgba(255, 255, 255, 0.4);
    font-size: 5rem;
    font-weight: 300;
    margin-top: 0.5rem;
  }
  
  .header-description {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 60rem;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 300;
  }
  
  .highlight {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
  }
  
  /* Services Grid */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 5rem;
  }

  @media (max-width: 1200px) {
    .services-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .services-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .service-card {
    position: relative;
    padding: 2rem;
    border-radius: 1.5rem;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .service-card:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }
  
  .card-number {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 4rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.1);
    transition: color 0.5s ease;
  }
  
  .service-card:hover .card-number {
    color: rgba(255, 255, 255, 0.2);
  }
  
  .card-glow {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: blur(20px);
  }
  
  .service-card:hover .card-glow {
    opacity: 1;
  }
  
  .card-content {
    position: relative;
    z-index: 10;
  }
  
  .icon-container {
    margin-bottom: 2rem;
  }
  
  .icon-wrapper {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.5s ease;
  }
  
  .service-card:hover .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1) rotate(6deg);
  }
  
  .icon-wrapper i {
    font-size: 5rem !important;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.5s ease;
  }
  
  .service-card:hover .icon-wrapper i {
    color: #fff;
    transform: scale(1.1);
  }
  
  .service-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.3s ease;
  }
  
  .service-card:hover .service-title {
    color: #fff;
  }
  
  .service-description {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    line-height: 1.6;
    font-size: 1.125rem;
  }
  
  .features-list {
    margin-bottom: 2rem;
  }
  
  .feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
  }
  
  .feature-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    margin-right: 1rem;
    transition: all 0.3s ease;
  }
  
  .service-card:hover .feature-dot {
    background: #fff;
    transform: scale(1.25);
  }
  
  .feature-item span {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease;
  }
  
  .service-card:hover .feature-item span {
    color: rgba(255, 255, 255, 0.9);
  }
  
  .hover-arrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.5s ease;
  }
  
  .service-card:hover .hover-arrow {
    opacity: 1;
    transform: translateY(0);
  }
  
  .hover-arrow span {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
  }
  
  .hover-arrow i {
    color: #fff;
    transition: transform 0.3s ease;
  }
  
  .service-card:hover .hover-arrow i {
    transform: translateX(0.5rem);
  }
  
  /* Service-specific colors */
  .service-card[data-service="0"]:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.2));
  }
  
  .service-card[data-service="0"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.2));
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
  }
  
  .service-card[data-service="1"]:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
  }
  
  .service-card[data-service="1"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.2);
  }
  
  .service-card[data-service="2"]:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(20, 184, 166, 0.2));
  }
  
  .service-card[data-service="2"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(20, 184, 166, 0.2));
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.2);
  }
  
  .service-card[data-service="3"]:hover {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(239, 68, 68, 0.2));
  }
  
  .service-card[data-service="3"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(239, 68, 68, 0.2));
    box-shadow: 0 0 40px rgba(249, 115, 22, 0.2);
  }
  
  .service-card[data-service="4"]:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2));
  }
  
  .service-card[data-service="4"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2));
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.2);
  }
  
  .service-card[data-service="5"]:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
  }
  
  .service-card[data-service="5"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.2);
  }

  .service-card[data-service="6"]:hover {
    background: linear-gradient(135deg, rgba(220, 38, 127, 0.2), rgba(251, 113, 133, 0.2));
  }
  
  .service-card[data-service="6"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(220, 38, 127, 0.2), rgba(251, 113, 133, 0.2));
    box-shadow: 0 0 40px rgba(220, 38, 127, 0.2);
  }

    .service-card[data-service="7"]:hover {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.2), rgba(160, 82, 45, 0.2));
  }
  
  .service-card[data-service="7"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.2), rgba(160, 82, 45, 0.2));
    box-shadow: 0 0 40px rgba(139, 69, 19, 0.2);
  }

  /* Cor marrom para o ícone de paleta (perfume) */
  .service-card[data-service="2"] .icon-wrapper i.fa-palette {
    color: #8B4513 !important; /* Marrom */
  }

  .service-card[data-service="2"]:hover .icon-wrapper i.fa-palette {
    color: #A0522D !important; /* Marrom mais claro no hover */
  }

  /* CTA Section */
  .cta-section {
    position: relative;
  }
  
  .cta-background-effects {
    position: absolute;
    inset: -5rem;
  }
  
  .cta-blur-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50rem;
    height: 25rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), transparent);
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
  }
  
  .cta-blur-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 37.5rem;
    height: 18.75rem;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    animation: pulse 4s ease-in-out infinite;
    animation-delay: 1s;
  }
  
  .floating-elements {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  
  .floating-dot {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: bounce 2s infinite;
  }
  
  .floating-dot-1 {
    top: 2.5rem;
    left: 2.5rem;
    width: 12px;
    height: 12px;
    animation-delay: 0.3s;
  }
  
  .floating-dot-2 {
    top: 5rem;
    right: 5rem;
    width: 8px;
    height: 8px;
    opacity: 0.4;
    animation-delay: 0.7s;
  }
  
  .floating-dot-3 {
    bottom: 2.5rem;
    left: 25%;
    width: 6px;
    height: 6px;
    opacity: 0.5;
    animation-delay: 1s;
  }
  
  .floating-dot-4 {
    bottom: 5rem;
    right: 33%;
    width: 10px;
    height: 10px;
    opacity: 0.2;
    animation-delay: 0.5s;
  }
  
  .animated-line {
    position: absolute;
    top: 50%;
    height: 1px;
    width: 8rem;
    animation: pulse 2s ease-in-out infinite;
  }
  
  .animated-line-left {
    left: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
  }
  
  .animated-line-right {
    right: 0;
    background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation-delay: 0.5s;
  }
  
  .cta-container {
    position: relative;
    display: inline-block;
    max-width: 80rem;
    text-align: center;
  }
  
  .cta-outer-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
    border-radius: 1.5rem;
    filter: blur(2rem);
    transform: scale(1.1);
    animation: pulse 3s ease-in-out infinite;
  }
  
  .cta-border-animation {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent, rgba(255, 255, 255, 0.2));
    padding: 2px;
  }
  
  .cta-border-animation::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: calc(1.5rem - 2px);
    background: #000;
  }
  
  .cta-content {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1.5rem;
    padding: 4rem;
    overflow: hidden;
  }
  
  .cta-inner-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
  }
  
  .pattern-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
  }
  
  .pattern-circle-1 {
    top: 2rem;
    left: 2rem;
    width: 6rem;
    height: 6rem;
  }
  
  .pattern-circle-2 {
    bottom: 2rem;
    right: 2rem;
    width: 8rem;
    height: 8rem;
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .pattern-circle-3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10rem;
    height: 10rem;
    border-color: rgba(255, 255, 255, 0.05);
  }
  
  .cta-main-content {
    position: relative;
    z-index: 10;
  }
  
  .cta-premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    margin-bottom: 2rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 9999px;
  }
  
  .ping-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  
  .ping-dot-2 {
    animation-delay: 0.3s;
  }
  
  .cta-premium-badge span {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  
  .cta-title {
    font-size: clamp(2.5rem, 8vw, 7rem);
    font-weight: 900;
    margin-bottom: 2rem;
    line-height: 1.1;
  }
  
  .cta-title-line-1 {
    display: block;
    color: rgba(255, 255, 255, 0.9);
  }
  
  .cta-title-line-2 {
    display: block;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .cta-title-line-3 {
    position: relative;
    display: inline-block;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .title-underline {
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
    border-radius: 2px;
  }
  
  .cta-question {
    font-size: clamp(3rem, 8vw, 7rem);
  }
  
  .cta-subtitle {
    font-size: clamp(1.25rem, 3vw, 2rem);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3rem;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    font-weight: 300;
  }
  
  .subtitle-highlight {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
  }
  
  .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
  }
  
  @media (min-width: 1024px) {
    .cta-buttons {
      flex-direction: row;
    }
  }
  
  .primary-button-container {
    position: relative;
  }
  
  .primary-button-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    filter: blur(20px);
    transition: all 0.5s ease;
  }
  
  .primary-button-container:hover .primary-button-glow {
    filter: blur(40px);
  }
  
  .primary-button {
    position: relative;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.9));
    color: #000;
    padding: 2rem 3rem;
    font-size: 1.25rem;
    font-weight: 900;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .primary-button:hover {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    transform: scale(1.1);
    box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.3);
  }
  
  .secondary-button-container {
    position: relative;
  }
  
  .secondary-button-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1rem;
    filter: blur(16px);
    transition: all 0.5s ease;
  }
  
  .secondary-button-container:hover .secondary-button-glow {
    filter: blur(20px);
  }
  
  .secondary-button {
    position: relative;
    padding: 2rem 3rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .secondary-button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
  }
  
  .arrow-text {
    transition: transform 0.3s ease;
  }
  
  .secondary-button:hover .arrow-text {
    transform: translateX(0.5rem);
  }
  
  .stats-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin-top: -16rem;
  }
  
  @media (min-width: 1024px) {
    .stats-grid {
      gap: 4rem;
    }
  }
  
  .stat-item {
    text-align: center;
    transition: transform 0.3s ease;
  }
  
  .stat-item:hover {
    transform: translateY(-0.25rem);
  }
  
  .stat-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease;
  }
  
  .stat-item:hover .stat-icon {
    transform: scale(1.25);
  }
  
  .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
  }
  
  .stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
  }
  
  .cta-bottom-text {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.125rem;
    margin-top: 4rem;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    font-weight: 300;
    text-align: center;
  }
  
  .bottom-text-highlight {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
  }
  
  /* Animations */
  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  
/* Seção principal */
.main-section {
    width: 100%;
    padding: 4rem 0 8rem;
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

/* Background decorativo */
.background-decorative {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
}

.bg-blur-1 {
    top: 5rem;
    right: 2.5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(255, 255, 255, 0.05);
    animation: pulse 4s ease-in-out infinite;
}

.bg-blur-2 {
    bottom: 5rem;
    left: 2.5rem;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.03);
    animation: pulse 4s ease-in-out infinite 1s;
}

.bg-gradient-radial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.decorative-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.decorative-line-1 {
    left: 25%;
}

.decorative-line-2 {
    right: 25%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
}

.floating-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.floating-dot-1 {
    top: 25%;
    left: 33%;
    width: 0.5rem;
    height: 0.5rem;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.floating-dot-2 {
    top: 75%;
    right: 33%;
    width: 0.25rem;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.2);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 1s;
}

.floating-dot-3 {
    top: 50%;
    left: 16%;
    width: 0.375rem;
    height: 0.375rem;
    background: rgba(255, 255, 255, 0.25);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 0.5s;
}

/* Container */
.container {
    max-width: 1400px !important;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
}

/* Hero Section */
.hero-section {
    display: grid;
    gap: 3rem;
    align-items: center;
    margin-bottom: 8rem;
}

@media (min-width: 1024px) {
    .hero-section {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

@media (min-width: 1280px) {
    .hero-section {
        gap: 5rem;
    }
}

.hero-content {
    opacity: 0;
    transform: translateX(-5rem);
    animation: slideInLeft 1s ease-out 0.5s forwards;
}

.hero-text {
    margin-bottom: 2rem;
}

.main-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 900;
    margin-bottom: 32px;
    letter-spacing: 0.15em;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, #ffffff, #cccccc, #ffffff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: title-glow 3s ease-in-out infinite;
    padding: 0 16px;
    overflow: visible;
    line-height: 1.1;
}

/* Header title simple and elegant animation */
.title-animated {
    opacity: 0;
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, 
    #444444 0%, 
    #222222 25%, 
    #444444 50%, 
    #222222 75%, 
    #444444 100%
);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: 
        titleFadeInScale 1.8s ease-out forwards, 
        titleGradientMove 4s linear infinite;
    animation-delay: 0.3s, 1s;
    transform: scale(0.95) translateY(30px);
}

@keyframes titleFadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(30px);
        filter: blur(3px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0px);
        filter: blur(0px);
    }
}

@keyframes titleGradientMove {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes title-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Elemento decorativo futurista */
.decorative-element {
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: fadeInUp 1s ease-out 0.9s forwards;
    opacity: 0;
}

.decorative-line-animated {
    position: relative;
    width: 5rem;
    height: 2px;
    background: linear-gradient(to right, #ffffff, #9ca3af, transparent);
    animation: pulseGlow 2s ease-in-out infinite;
}

.sliding-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 2px;
    background: #ffffff;
    animation: slideRight 3s ease-in-out infinite;
}

.decorative-dots {
    display: flex;
    gap: 0.25rem;
}

.dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-1 {
    background: #ffffff;
}

.dot-2 {
    background: #9ca3af;
    animation-delay: 0.2s;
}

.dot-3 {
    background: #6b7280;
    animation-delay: 0.4s;
}

.decorative-line-static {
    width: 3rem;
    height: 2px;
    background: linear-gradient(to right, transparent, #6b7280, #374151);
}

/* Hero Description */
.hero-description {
    space-y: 1.5rem;
}

.description-main {
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1s forwards;
}

@media (min-width: 768px) {
    .description-main {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .description-main {
        font-size: 1.5rem;
    }
}

.description-secondary {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.2s forwards;
}

@media (min-width: 768px) {
    .description-secondary {
        font-size: 1.125rem;
    }
}

/* Quote Container */
.quote-container {
    padding-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.4s forwards;
}

.quote-card {
    position: relative;
    padding: 1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), transparent);
    border-radius: 1rem;
    border-left: 4px solid rgba(255, 255, 255, 0.3);
}

.quote-text {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    font-style: italic;
}

@media (min-width: 768px) {
    .quote-text {
        font-size: 1.125rem;
    }
}

.quote-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indicator-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Hero Image */
.hero-image {
    position: relative;
    opacity: 0;
    transform: translateX(5rem);
    animation: slideInRight 1s ease-out 0.8s forwards;
}

.image-bg {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    filter: blur(0.5rem);
}

.image-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(6deg);
    animation: float 6s ease-in-out infinite;
}

.image-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-3deg);
    animation: floatReverse 8s ease-in-out infinite;
}

.main-image {
    position: relative;
    border-radius: 1.5rem;
    width: 90%;
    aspect-ratio: 1;
    object-fit: cover;
    box-shadow: 0 10px 40px 10px rgba(255, 255, 255, 0.158);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.7s ease;
    margin-left: auto;
}

/* Image Decorators */
.image-decorator {
    position: absolute;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-decorator-1 {
    top: -1rem;
    right: -1rem;
    width: 4rem;
    height: 4rem;
}

.image-decorator-2 {
    bottom: -1rem;
    left: -1rem;
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
}

.image-decorator .icon {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.image-decorator-1 .icon {
    animation: pulse 2s ease-in-out infinite;
}

.image-decorator-2 .icon {
    animation: spinSlow 30s linear infinite;
}

/* Decoradores de imagem melhorados */
.decorator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.decorator-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.decorator-pulse {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, transparent 70%);
    animation: pulseGlow 2s ease-in-out infinite;
    z-index: -1;
}

.image-decorator:hover .decorator-text {
    transform: translateY(-2px);
    color: #c084fc;
}

.image-decorator:hover .decorator-pulse {
    animation-duration: 1s;
}

/* Essence Section */
.essence-section {
    margin-bottom: 8rem;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.section-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.section-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .section-title {
        font-size: 3rem;
    }
}

.title-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.line-segment {
    height: 2px;
    background: linear-gradient(to right, transparent, #ffffff);
}

.line-1 {
    width: 4rem;
}

.line-2 {
    width: 6rem;
    background: #ffffff;
}

.line-3 {
    width: 4rem;
    background: linear-gradient(to left, transparent, #ffffff);
}

.line-dot {
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

/* Essence Cards */
.essence-cards {
    display: grid;
    gap: 2rem;
    margin-top: -70px;
    margin-bottom: 100px;
}

@media (min-width: 768px) {
    .essence-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .essence-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.essence-card {
    position: relative;
    padding: 2rem;
    border-radius: 1.5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

.essence-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.essence-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.essence-card-wide {
    grid-column: span 2;
}

@media (min-width: 1024px) {
    .essence-card-wide {
        grid-column: span 1;
    }
}

.card-bg-blur {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.essence-card:hover .card-bg-blur {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
}

.card-content {
    position: relative;
}

.card-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.card-icon svg {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.essence-card:hover .card-icon {
    transform: scale(1.1);
}

.card-title {
    font-weight: 700;
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-title {
        font-size: 1.5rem;
    }
}

.essence-card:hover .card-title {
    color: #f3f4f6;
}

.card-description {
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-description {
        font-size: 1rem;
    }
}

.essence-card:hover .card-description {
    color: #e5e7eb;
}

/* Values List */
.values-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
}

@media (min-width: 768px) {
    .values-list {
        font-size: 1rem;
    }
}

.value-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.value-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
}

.value-item strong {
    color: #ffffff;
}

/* Team Section */
.team-section {
    position: relative;
    margin-bottom: 8rem;
}

.team-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.9), rgba(0, 0, 0, 0.8), rgba(31, 41, 55, 0.9));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.team-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.1), transparent, rgba(255, 255, 255, 0.05));
    border-radius: 4rem;
}

.team-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.team-bg-blur-1 {
    top: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.05);
}

.team-bg-blur-2 {
    bottom: 2.5rem;
    right: 2.5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.team-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.team-circle-1 {
    top: 33%;
    right: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.team-circle-2 {
    bottom: 33%;
    left: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.team-decorative-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.team-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .team-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-content {
        padding: 5rem;
    }
}

.team-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.team-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .team-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-title {
        font-size: 3.75rem;
    }
}

.title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.team-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.team-line-segment {
    height: 2px;
}

.team-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.team-line-2 {
    width: 8rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.team-line-3 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.team-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.team-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.team-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.team-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Team Cards */
.team-cards {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .team-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-cards {
        gap: 4rem;
    }
}

.team-card {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

@media (min-width: 768px) {
    .team-card {
        padding: 2.5rem;
    }
}

.team-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
}

.team-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-card-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.team-card:hover .team-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), transparent);
}

.team-card-decorator {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 5rem;
    height: 5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: rotate(45deg);
    transition: transform 0.7s ease;
}

.team-card-decorator-left {
    top: -0.75rem;
    left: -0.75rem;
    right: auto;
}

.team-card:hover .team-card-decorator {
    transform: rotate(90deg);
}

.team-member {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Member Photo */
.member-photo {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .member-photo {
        width: 10rem;
        height: 10rem;
    }
}

.photo-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.photo-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
}

.photo-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.2), transparent);
}

.team-card:hover .photo-bg-1 {
    transform: scale(1.1);
}

.team-card:hover .photo-bg-2 {
    transform: scale(1.05);
}

.member-image {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 4px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.7s ease;
}

.team-card:hover .member-image {
    transform: scale(1.05);
}

.status-badge {
    position: absolute;
    bottom: -0.5rem;
    right: -0.5rem;
    background: linear-gradient(to bottom right, #10b981, #059669);
    border-radius: 50%;
    padding: 0.5rem;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.status-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.rotating-ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

/* Member Info */
.member-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.member-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.member-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.3s ease;
}

@media (min-width: 1024px) {
    .member-name {
        font-size: 1.875rem;
    }
}

.team-card:hover .member-name {
    color: #f3f4f6;
}

.member-role {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    justify-self: center;
}

.role-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.member-role span {
    color: #d1d5db;
    font-weight: 500;
}

.member-description {
    color: #d1d5db;
    line-height: 1.75;
    max-width: 32rem;
    margin: 0 auto;
    transition: color 0.3s ease;
}

.team-card:hover .member-description {
    color: #e5e7eb;
}

/* Member Skills */
.member-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.skill-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: #d1d5db;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Member Social */
.member-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.5rem;
}

.social-link {
    position: relative;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

.social-link:hover {
    transform: scale(1.1);
}

.social-link svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #ffffff;
    transition: color 0.3s ease;
}

.social-instagram:hover {
    background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.5);
}

.social-instagram:hover svg {
    color: #ec4899;
}

.social-linkedin:hover {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.5);
}

.social-linkedin:hover svg {
    color: #3b82f6;
}

.social-facebook:hover {
    background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.3), rgba(29, 78, 216, 0.2));
    border-color: rgba(37, 99, 235, 0.5);
}

.social-facebook:hover svg {
    color: #2563eb;
}

/* Team Central Decorator */
.team-central-decorator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

@media (min-width: 768px) {
    .team-central-decorator {
        display: block;
    }
}

.central-circle {
    width: 6rem;
    height: 6rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner {
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
    animation: pulse 2s ease-in-out infinite;
}

/* Process Section */
.process-section {
    position: relative;
    margin-bottom: 8rem;
    margin-top: 0rem;
}

@media (max-width: 768px) {
    .process-section {
        margin-top: 8rem;
    }
}

.process-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.8), rgba(0, 0, 0, 0.7), rgba(31, 41, 55, 0.8));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.process-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.05), transparent, rgba(255, 255, 255, 0.1));
    border-radius: 4rem;
}

.process-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.process-bg-blur-1 {
    top: 5rem;
    left: 5rem;
    width: 8rem;
    height: 8rem;
    background: rgba(255, 255, 255, 0.05);
}

.process-bg-blur-2 {
    bottom: 5rem;
    right: 5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.process-decorative-circle {
    position: absolute;
    top: 50%;
    right: 2.5rem;
    width: 6rem;
    height: 6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

.process-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .process-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-content {
        padding: 5rem;
    }
}

.process-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.process-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.process-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .process-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-title {
        font-size: 3.75rem;
    }
}

.process-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.process-line-segment {
    height: 2px;
}

.process-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.process-line-2 {
    width: 10rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.process-line-3 {
    width: 10rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.process-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.process-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.process-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.process-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 64rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    height: calc(100% - 0px); /* Ajustado para ir até o projeto concluído com sucesso */
    z-index: 1;
}

.timeline-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

@media (min-width: 768px) {
    .timeline-line {
        display: block;
    }
}

.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.timeline-step {
    position: relative;
    display: grid;
    gap: 2rem;
    align-items: center;
    opacity: 0;
    transform: translateX(-5rem);
}

.timeline-step.visible {
    animation: slideInLeft 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step {
        grid-template-columns: 1fr 1fr;
    }
}

.timeline-step-right {
    transform: translateX(5rem);
}

.timeline-step-right.visible {
    animation: slideInRight 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step-left .step-content {
        text-align: right;
    }
}

.step-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 1.5rem;
    transition: all 0.5s ease;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-header {
        flex-direction: row-reverse;
    }
}

.step-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    transition: transform 0.3s ease;
}

.step-icon:hover {
    transform: scale(1.1);
}

.step-icon svg {
    width: 2rem;
    height: 2rem;
}

.step-icon-blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.step-icon-purple {
    background: linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.2));
    border-color: rgba(147, 51, 234, 0.3);
    color: #a78bfa;
}

.step-icon-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.step-icon-teal {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(14, 116, 144, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

.step-icon-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.step-icon-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
}

.step-icon-red {
    background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.2));
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
}

.step-info {
    display: flex;
    flex-direction: column;
}

.step-label {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.step-label {
    color: #60a5fa;
}

.timeline-step:nth-child(2) .step-label {
    color: #a78bfa;
}

.timeline-step:nth-child(3) .step-label {
    color: #22d3ee;
}

.timeline-step:nth-child(4) .step-label {
    color: #4ade80;
}

.timeline-step:nth-child(5) .step-label {
    color: #fb923c;
}

.timeline-step:nth-child(6) .step-label {
    color: #f87171;
}

.step-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

@media (min-width: 768px) {
    .step-title {
        font-size: 1.875rem;
    }
}

.step-description {
    color: #d1d5db;
    line-height: 1.75;
    font-size: 1.125rem;
}

.step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-tags {
        justify-content: flex-end;
    }
}

.step-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    border: 1px solid;
}

.step-tag-blue {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

.step-tag-purple {
    background: rgba(147, 51, 234, 0.2);
    color: #c4b5fd;
    border-color: rgba(147, 51, 234, 0.3);
}

.step-tag-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.step-tag-teal {
    background: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.3);
}

.step-tag-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.step-tag-orange {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.3);
}

.step-tag-red {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.3);
}

/* Timeline Circle */
.timeline-circle {
    position: relative;
    display: none;
    justify-content: center;
}

@media (min-width: 768px) {
    .timeline-circle {
        display: flex;
    }
}

.circle-inner {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid;
    backdrop-filter: blur(0.5rem);
}

.circle-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.circle-blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    position: relative;
}

.circle-blue::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0.25) 40%, rgba(59, 130, 246, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
}

.circle-purple {
    background: linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.2));
    border-color: rgba(147, 51, 234, 0.3);
    color: #a78bfa;
    position: relative;
}

.circle-purple::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, rgba(147, 51, 234, 0.25) 40%, rgba(147, 51, 234, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

.circle-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    position: relative;
}

.circle-green::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.circle-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
    position: relative;
}

.circle-teal {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(14, 116, 144, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
    position: relative;
}

.circle-teal::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, rgba(6, 182, 212, 0.25) 40%, rgba(6, 182, 212, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.circle-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    position: relative;
}

.circle-green::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

.circle-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
    position: relative;
}

.circle-orange::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.4) 0%, rgba(249, 115, 22, 0.25) 40%, rgba(249, 115, 22, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2s;
}

.circle-red {
    background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.2));
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
    position: relative;
}

.circle-red::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.4) 0%, rgba(220, 38, 38, 0.25) 40%, rgba(220, 38, 38, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2.5s;
}

.circle-ping {
    position: absolute;
    inset: 0;
    border: 2px solid;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.circle-ping-blue {
    border-color: rgba(59, 130, 246, 0.2);
}

.circle-ping-purple {
    border-color: rgba(147, 51, 234, 0.2);
}

.circle-ping-green {
    border-color: rgba(34, 197, 94, 0.2);
}

.circle-ping-orange {
    border-color: rgba(249, 115, 22, 0.2);
}

/* Timeline Final */
.timeline-final {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    z-index: 2;
    opacity: 0;
    transform: translateY(3rem);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-final.visible {
    opacity: 1;
    transform: translateY(0);
}

.final-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    position: relative;
}

.final-badge::before {
    content: '';
    position: absolute;
    top: -25px;
    bottom: -25px;
    left: -50px;
    right: -50px;
    background: radial-gradient(ellipse 150% 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(30px);
    animation: pulseGlow 3s ease-in-out infinite;
}

.final-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #4ade80;
}

.final-text {
    color: #ffffff;
    font-weight: 600;
}

.final-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #4ade80;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Services Section */
.services-section {
    position: relative;
    margin-top: -20rem;
    margin-bottom: 10rem;
}

@media (max-width: 768px) {
    .services-section {
        margin-top: 0rem;
    }
}

.services-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.services-bg-blur-1 {
    top: 2.5rem;
    right: 2.5rem;
    width: 15rem;
    height: 15rem;
    background: rgba(255, 255, 255, 0.05);
}

.services-bg-blur-2 {
    bottom: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.services-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.services-circle-1 {
    top: 50%;
    left: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.services-circle-2 {
    top: 25%;
    right: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.services-decorative-line {
    position: absolute;
    left: 5rem;
    right: 5rem;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.services-line-1 {
    top: 5rem;
}

.services-line-2 {
    bottom: 5rem;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.services-floating-dot {
    position: absolute;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.services-dot-1 {
    top: 33%;
    left: 20%;
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
}

.services-dot-2 {
    top: 66%;
    right: 20%;
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    animation-delay: 1s;
}

.services-dot-3 {
    top: 50%;
    right: 33%;
    width: 0.625rem;
    height: 0.625rem;
    background: rgba(255, 255, 255, 0.25);
    animation-delay: 0.5s;
}

.services-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .services-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .services-content {
        padding: 5rem;
    }
}

/* Services Header */
.services-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.services-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.services-title-container {
    margin-bottom: 2rem;
}

.services-title {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .services-title {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .services-title {
        font-size: 4.5rem;
    }
}

.services-title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.services-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.services-line-segment {
    height: 2px;
}

.services-line-1 {
    width: 8rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.services-line-2 {
    width: 12rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.services-line-3 {
    width: 12rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.services-line-4 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.services-line-dot {
    position: relative;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.services-dot-complex-1,
.services-dot-complex-2 {
    width: 2rem;
    height: 2rem;
    border: 2px solid #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.services-dot-simple {
    width: 1.25rem;
    height: 1.25rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-outer {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite 0.5s;
}

.services-description {
    font-size: 1.5rem;
    color: #d1d5db;
    max-width: 80rem;
    margin: 0 auto;
    line-height: 1.75;
    font-weight: 300;
}

@media (min-width: 768px) {
    .services-description {
        font-size: 1.875rem;
    }
}

.services-description .highlight {
    color: #ffffff;
    font-weight: 600;
}

/* Services Main Card */
.services-main-card {
    max-width: 96rem;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(5rem);
}

.services-main-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.services-card-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    border-radius: 3rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.7s ease;
}

.services-main-card:hover .services-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15));
    transform: scale(1.02);
}

.services-card-decorator {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 1s ease;
}

.services-decorator-1 {
    top: -2rem;
    right: -2rem;
    width: 8rem;
    height: 8rem;
    border-radius: 2rem;
    transform: rotate(45deg);
}

.services-decorator-2 {
    bottom: -1.5rem;
    left: -1.5rem;
    width: 6rem;
    height: 6rem;
    border-radius: 1rem;
    border-color: rgba(255, 255, 255, 0.15);
    transform: rotate(12deg);
}

.services-main-card:hover .services-decorator-1 {
    transform: rotate(90deg);
}

.services-main-card:hover .services-decorator-2 {
    transform: rotate(45deg);
}

.services-card-content {
    position: relative;
    display: grid;
    gap: 3rem;
    align-items: center;
    padding: 3rem;
}

@media (min-width: 768px) {
    .services-card-content {
        padding: 4rem;
    }
}

@media (min-width: 1024px) {
    .services-card-content {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        padding: 5rem;
    }
}

/* Services Text Content */
.services-text-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .services-text-content {
        text-align: left;
    }
}

.services-intro {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.services-icon-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .services-icon-header {
        justify-content: flex-start;
    }
}

.services-main-icon {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.5s ease;
}

.services-main-card:hover .services-main-icon {
    transform: scale(1.1);
}

.services-main-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: #ffffff;
}

.services-header-text {
    text-align: left;
}

.services-card-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.5s ease;
}

@media (min-width: 768px) {
    .services-card-title {
        font-size: 2.25rem;
    }
}

.services-main-card:hover .services-card-title {
    color: #f3f4f6;
}

.services-card-subtitle {
    color: #d1d5db;
    font-size: 1.125rem;
    font-weight: 500;
}

.services-main-description {
    font-size: 1.25rem;
    color: #d1d5db;
    line-height: 1.75;
    transition: color 0.5s ease;
}

@media (min-width: 768px) {
    .services-main-description {
        font-size: 1.5rem;
    }
}

.services-main-card:hover .services-main-description {
    color: #e5e7eb;
}

.services-main-description .highlight {
    color: #ffffff;
    font-weight: 600;
}

.services-secondary-description {
    font-size: 1.125rem;
    color: #9ca3af;
    line-height: 1.75;
    transition: color 0.5s ease;
}

.services-main-card:hover .services-secondary-description {
    color: #d1d5db;
}

/* Services CTA */
.services-cta {
    padding-top: 1rem;
}

.services-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(to right, #ffffff, #e5e7eb);
    color: #000000;
    padding: 1.25rem 2.5rem;
    border-radius: 1.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.5s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.services-btn:hover {
    background: linear-gradient(to right, #f3f4f6, #ffffff);
    transform: scale(1.1) translateY(-0.25rem);
    box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.2);
}

.btn-arrow {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.5s ease;
}

.services-btn:hover .btn-arrow {
    transform: translateX(0.5rem);
}

/* Services Badges */
.services-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1.5rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .services-badges {
        justify-content: flex-start;
    }
}

.quality-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.quality-badge svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.quality-badge:nth-child(1) svg {
    color: #4ade80;
}

.quality-badge:nth-child(2) svg {
    color: #fbbf24;
}

.quality-badge:nth-child(3) svg {
    color: #60a5fa;
}

.quality-badge span {
    color: #ffffff;
    font-weight: 500;
}

/* Services Visual */
.services-visual {
    position: relative;
}

.visual-bg {
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.visual-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(3deg);
}

.visual-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-2deg);
}

.services-main-card:hover .visual-bg-1 {
    transform: rotate(6deg);
}

.services-main-card:hover .visual-bg-2 {
    transform: rotate(-4deg);
}

.services-icons-grid {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 2rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .services-icons-grid {
        padding: 3rem;
    }
}

.service-icon-card {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.service-icon-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.service-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    transition: transform 0.3s ease;
}

.service-icon-card:hover .service-icon {
    transform: scale(1.1);
}

.service-icon-card:nth-child(1) .service-icon {
    color: #60a5fa;
}

.service-icon-card:nth-child(2) .service-icon {
    color: #a78bfa;
}

.service-icon-card:nth-child(3) .service-icon {
    color: #4ade80;
}

.service-icon-card:nth-child(4) .service-icon {
    color: #fb923c;
}

/* Seção principal */
.main-section {
    width: 100%;
    padding: 4rem 0 8rem;
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

/* Background decorativo */
.background-decorative {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
}

.bg-blur-1 {
    top: 5rem;
    right: 2.5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(255, 255, 255, 0.05);
    animation: pulse 4s ease-in-out infinite;
}

.bg-blur-2 {
    bottom: 5rem;
    left: 2.5rem;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.03);
    animation: pulse 4s ease-in-out infinite 1s;
}

.bg-gradient-radial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.decorative-line {
    position: absolute;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.decorative-line-1 {
    left: 25%;
}

.decorative-line-2 {
    right: 25%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
}

.floating-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.floating-dot-1 {
    top: 25%;
    left: 33%;
    width: 0.5rem;
    height: 0.5rem;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.floating-dot-2 {
    top: 75%;
    right: 33%;
    width: 0.25rem;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.2);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 1s;
}

.floating-dot-3 {
    top: 50%;
    left: 16%;
    width: 0.375rem;
    height: 0.375rem;
    background: rgba(255, 255, 255, 0.25);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 0.5s;
}

/* Container */
.container {
    max-width: 1400px !important;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
}

/* Hero Section */
.hero-section {
    display: grid;
    gap: 3rem;
    align-items: center;
    margin-bottom: 8rem;
}

@media (min-width: 1024px) {
    .hero-section {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

@media (min-width: 1280px) {
    .hero-section {
        gap: 5rem;
    }
}

.hero-content {
    opacity: 0;
    transform: translateX(-5rem);
    animation: slideInLeft 1s ease-out 0.5s forwards;
}

.hero-text {
    margin-bottom: 2rem;
}

.main-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 900;
    margin-bottom: 32px;
    letter-spacing: 0.15em;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, #ffffff, #cccccc, #ffffff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: title-glow 3s ease-in-out infinite;
    padding: 0 16px;
    overflow: visible;
    line-height: 1.1;
}

/* Header title simple and elegant animation */
.title-animated {
    opacity: 0;
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, 
    #444444 0%, 
    #222222 25%, 
    #444444 50%, 
    #222222 75%, 
    #444444 100%
);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: 
        titleFadeInScale 1.8s ease-out forwards, 
        titleGradientMove 4s linear infinite;
    animation-delay: 0.3s, 1s;
    transform: scale(0.95) translateY(30px);
}

@keyframes titleFadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(30px);
        filter: blur(3px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0px);
        filter: blur(0px);
    }
}

@keyframes titleGradientMove {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes title-glow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Elemento decorativo futurista */
.decorative-element {
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: fadeInUp 1s ease-out 0.9s forwards;
    opacity: 0;
}

.decorative-line-animated {
    position: relative;
    width: 5rem;
    height: 2px;
    background: linear-gradient(to right, #ffffff, #9ca3af, transparent);
    animation: pulseGlow 2s ease-in-out infinite;
}

.sliding-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 2px;
    background: #ffffff;
    animation: slideRight 3s ease-in-out infinite;
}

.decorative-dots {
    display: flex;
    gap: 0.25rem;
}

.dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-1 {
    background: #ffffff;
}

.dot-2 {
    background: #9ca3af;
    animation-delay: 0.2s;
}

.dot-3 {
    background: #6b7280;
    animation-delay: 0.4s;
}

.decorative-line-static {
    width: 3rem;
    height: 2px;
    background: linear-gradient(to right, transparent, #6b7280, #374151);
}

/* Hero Description */
.hero-description {
    space-y: 1.5rem;
}

.description-main {
    font-size: 1.125rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1s forwards;
}

@media (min-width: 768px) {
    .description-main {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .description-main {
        font-size: 1.5rem;
    }
}

.description-secondary {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.2s forwards;
}

@media (min-width: 768px) {
    .description-secondary {
        font-size: 1.125rem;
    }
}

/* Quote Container */
.quote-container {
    padding-top: 1.5rem;
    opacity: 0;
    transform: translateY(2.5rem);
    animation: slideInUp 1s ease-out 1.4s forwards;
}

.quote-card {
    position: relative;
    padding: 1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), transparent);
    border-radius: 1rem;
    border-left: 4px solid rgba(255, 255, 255, 0.3);
}

.quote-text {
    font-size: 1rem;
    line-height: 1.75;
    color: #d1d5db;
    font-style: italic;
}

@media (min-width: 768px) {
    .quote-text {
        font-size: 1.125rem;
    }
}

.quote-indicator {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.indicator-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Hero Image */
.hero-image {
    position: relative;
    opacity: 0;
    transform: translateX(5rem);
    animation: slideInRight 1s ease-out 0.8s forwards;
}

.image-bg {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    filter: blur(0.5rem);
}

.image-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(6deg);
    animation: float 6s ease-in-out infinite;
}

.image-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-3deg);
    animation: floatReverse 8s ease-in-out infinite;
}

.main-image {
    position: relative;
    border-radius: 1.5rem;
    width: 90%;
    aspect-ratio: 1;
    object-fit: cover;
    box-shadow: 0 10px 40px 10px rgba(255, 255, 255, 0.158);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.7s ease;
    margin-left: auto;
}

/* Image Decorators */
.image-decorator {
    position: absolute;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-decorator-1 {
    top: -1rem;
    right: -1rem;
    width: 4rem;
    height: 4rem;
}

.image-decorator-2 {
    bottom: -1rem;
    left: -1rem;
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
}

.image-decorator .icon {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.image-decorator-1 .icon {
    animation: pulse 2s ease-in-out infinite;
}

.image-decorator-2 .icon {
    animation: spinSlow 30s linear infinite;
}

/* Decoradores de imagem melhorados */
.decorator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.decorator-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.decorator-pulse {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, transparent 70%);
    animation: pulseGlow 2s ease-in-out infinite;
    z-index: -1;
}

.image-decorator:hover .decorator-text {
    transform: translateY(-2px);
    color: #c084fc;
}

.image-decorator:hover .decorator-pulse {
    animation-duration: 1s;
}

/* Essence Section */
.essence-section {
    margin-bottom: 8rem;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.section-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.section-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .section-title {
        font-size: 3rem;
    }
}

.title-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.line-segment {
    height: 2px;
    background: linear-gradient(to right, transparent, #ffffff);
}

.line-1 {
    width: 4rem;
}

.line-2 {
    width: 6rem;
    background: #ffffff;
}

.line-3 {
    width: 4rem;
    background: linear-gradient(to left, transparent, #ffffff);
}

.line-dot {
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

/* Essence Cards */
.essence-cards {
    display: grid;
    gap: 2rem;
    margin-top: -70px;
    margin-bottom: 100px;
}

@media (min-width: 768px) {
    .essence-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .essence-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.essence-card {
    position: relative;
    padding: 2rem;
    border-radius: 1.5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

.essence-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.essence-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.essence-card-wide {
    grid-column: span 2;
}

@media (min-width: 1024px) {
    .essence-card-wide {
        grid-column: span 1;
    }
}

.card-bg-blur {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.essence-card:hover .card-bg-blur {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
}

.card-content {
    position: relative;
}

.card-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.card-icon svg {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
}

.essence-card:hover .card-icon {
    transform: scale(1.1);
}

.card-title {
    font-weight: 700;
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-title {
        font-size: 1.5rem;
    }
}

.essence-card:hover .card-title {
    color: #f3f4f6;
}

.card-description {
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
    transition: color 0.3s ease;
}

@media (min-width: 768px) {
    .card-description {
        font-size: 1rem;
    }
}

.essence-card:hover .card-description {
    color: #e5e7eb;
}

/* Values List */
.values-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.75;
    color: #d1d5db;
}

@media (min-width: 768px) {
    .values-list {
        font-size: 1rem;
    }
}

.value-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.value-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
}

.value-item strong {
    color: #ffffff;
}

/* Team Section */
.team-section {
    position: relative;
    margin-bottom: 8rem;
}

.team-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.9), rgba(0, 0, 0, 0.8), rgba(31, 41, 55, 0.9));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.team-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.1), transparent, rgba(255, 255, 255, 0.05));
    border-radius: 4rem;
}

.team-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.team-bg-blur-1 {
    top: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.05);
}

.team-bg-blur-2 {
    bottom: 2.5rem;
    right: 2.5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.team-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.team-circle-1 {
    top: 33%;
    right: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.team-circle-2 {
    bottom: 33%;
    left: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.team-decorative-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.team-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .team-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-content {
        padding: 5rem;
    }
}

.team-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.team-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .team-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-title {
        font-size: 3.75rem;
    }
}

.title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.team-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.team-line-segment {
    height: 2px;
}

.team-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.team-line-2 {
    width: 8rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.team-line-3 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.team-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.team-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.team-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.team-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Team Cards */
.team-cards {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .team-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (min-width: 1024px) {
    .team-cards {
        gap: 4rem;
    }
}

.team-card {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1.5rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(5rem);
}

@media (min-width: 768px) {
    .team-card {
        padding: 2.5rem;
    }
}

.team-card:hover {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
}

.team-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.team-card-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    transition: background 0.5s ease;
}

.team-card:hover .team-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), transparent);
}

.team-card-decorator {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 5rem;
    height: 5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: rotate(45deg);
    transition: transform 0.7s ease;
}

.team-card-decorator-left {
    top: -0.75rem;
    left: -0.75rem;
    right: auto;
}

.team-card:hover .team-card-decorator {
    transform: rotate(90deg);
}

.team-member {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Member Photo */
.member-photo {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .member-photo {
        width: 10rem;
        height: 10rem;
    }
}

.photo-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.photo-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
}

.photo-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.2), transparent);
}

.team-card:hover .photo-bg-1 {
    transform: scale(1.1);
}

.team-card:hover .photo-bg-2 {
    transform: scale(1.05);
}

.member-image {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 4px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.7s ease;
}

.team-card:hover .member-image {
    transform: scale(1.05);
}

.status-badge {
    position: absolute;
    bottom: -0.5rem;
    right: -0.5rem;
    background: linear-gradient(to bottom right, #10b981, #059669);
    border-radius: 50%;
    padding: 0.5rem;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.status-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.rotating-ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

/* Member Info */
.member-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.member-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.member-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.3s ease;
}

@media (min-width: 1024px) {
    .member-name {
        font-size: 1.875rem;
    }
}

.team-card:hover .member-name {
    color: #f3f4f6;
}

.member-role {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    justify-self: center;
}

.role-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.member-role span {
    color: #d1d5db;
    font-weight: 500;
}

.member-description {
    color: #d1d5db;
    line-height: 1.75;
    max-width: 32rem;
    margin: 0 auto;
    transition: color 0.3s ease;
}

.team-card:hover .member-description {
    color: #e5e7eb;
}

/* Member Skills */
.member-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.skill-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: #d1d5db;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Member Social */
.member-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.5rem;
}

.social-link {
    position: relative;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

.social-link:hover {
    transform: scale(1.1);
}

.social-link svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #ffffff;
    transition: color 0.3s ease;
}

.social-instagram:hover {
    background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.5);
}

.social-instagram:hover svg {
    color: #ec4899;
}

.social-linkedin:hover {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.5);
}

.social-linkedin:hover svg {
    color: #3b82f6;
}

.social-facebook:hover {
    background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.3), rgba(29, 78, 216, 0.2));
    border-color: rgba(37, 99, 235, 0.5);
}

.social-facebook:hover svg {
    color: #2563eb;
}

/* Team Central Decorator */
.team-central-decorator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

@media (min-width: 768px) {
    .team-central-decorator {
        display: block;
    }
}

.central-circle {
    width: 6rem;
    height: 6rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner {
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-inner svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #ffffff;
    animation: pulse 2s ease-in-out infinite;
}

/* Process Section */
.process-section {
    position: relative;
    margin-bottom: 8rem;
    margin-top: 0rem;
}

@media (max-width: 768px) {
    .process-section {
        margin-top: 8rem;
    }
}

.process-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.8), rgba(0, 0, 0, 0.7), rgba(31, 41, 55, 0.8));
    border-radius: 4rem;
    backdrop-filter: blur(0.5rem);
}

.process-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(255, 255, 255, 0.05), transparent, rgba(255, 255, 255, 0.1));
    border-radius: 4rem;
}

.process-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.process-bg-blur-1 {
    top: 5rem;
    left: 5rem;
    width: 8rem;
    height: 8rem;
    background: rgba(255, 255, 255, 0.05);
}

.process-bg-blur-2 {
    bottom: 5rem;
    right: 5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.process-decorative-circle {
    position: absolute;
    top: 50%;
    right: 2.5rem;
    width: 6rem;
    height: 6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: spinVerySlow 60s linear infinite;
}

.process-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .process-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-content {
        padding: 5rem;
    }
}

.process-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.process-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.process-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .process-title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .process-title {
        font-size: 3.75rem;
    }
}

.process-decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.process-line-segment {
    height: 2px;
}

.process-line-1 {
    width: 6rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.process-line-2 {
    width: 10rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.process-line-3 {
    width: 10rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.process-line-4 {
    width: 6rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.process-line-dot {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.process-dot-2 {
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.process-description {
    font-size: 1.25rem;
    color: #d1d5db;
    max-width: 64rem;
    margin: 0 auto;
    line-height: 1.75;
}

/* Timeline */
.timeline {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    height: calc(100% - 0px); /* Ajustado para ir até o projeto concluído com sucesso */
    z-index: 1;
}

.timeline-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

@media (min-width: 768px) {
    .timeline-line {
        display: block;
    }
}

.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.timeline-step {
    position: relative;
    display: grid;
    gap: 2rem;
    align-items: center;
    opacity: 0;
    transform: translateX(-5rem);
}

.timeline-step.visible {
    animation: slideInLeft 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step {
        grid-template-columns: 1fr 1fr;
    }
}

.timeline-step-right {
    transform: translateX(5rem);
}

.timeline-step-right.visible {
    animation: slideInRight 1s ease-out forwards;
}

@media (min-width: 768px) {
    .timeline-step-left .step-content {
        text-align: right;
    }
}

.step-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 1.5rem;
    transition: all 0.5s ease;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-header {
        flex-direction: row-reverse;
    }
}

.step-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    transition: transform 0.3s ease;
}

.step-icon:hover {
    transform: scale(1.1);
}

.step-icon svg {
    width: 2rem;
    height: 2rem;
}

.step-icon-blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.step-icon-purple {
    background: linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.2));
    border-color: rgba(147, 51, 234, 0.3);
    color: #a78bfa;
}

.step-icon-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.step-icon-teal {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(14, 116, 144, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

.step-icon-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.step-icon-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
}

.step-icon-red {
    background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.2));
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
}

.step-info {
    display: flex;
    flex-direction: column;
}

.step-label {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.step-label {
    color: #60a5fa;
}

.timeline-step:nth-child(2) .step-label {
    color: #a78bfa;
}

.timeline-step:nth-child(3) .step-label {
    color: #22d3ee;
}

.timeline-step:nth-child(4) .step-label {
    color: #4ade80;
}

.timeline-step:nth-child(5) .step-label {
    color: #fb923c;
}

.timeline-step:nth-child(6) .step-label {
    color: #f87171;
}

.step-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

@media (min-width: 768px) {
    .step-title {
        font-size: 1.875rem;
    }
}

.step-description {
    color: #d1d5db;
    line-height: 1.75;
    font-size: 1.125rem;
}

.step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .timeline-step-left .step-tags {
        justify-content: flex-end;
    }
}

.step-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    border: 1px solid;
}

.step-tag-blue {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

.step-tag-purple {
    background: rgba(147, 51, 234, 0.2);
    color: #c4b5fd;
    border-color: rgba(147, 51, 234, 0.3);
}

.step-tag-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.step-tag-teal {
    background: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.3);
}

.step-tag-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.step-tag-orange {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.3);
}

.step-tag-red {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.3);
}

/* Timeline Circle */
.timeline-circle {
    position: relative;
    display: none;
    justify-content: center;
}

@media (min-width: 768px) {
    .timeline-circle {
        display: flex;
    }
}

.circle-inner {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid;
    backdrop-filter: blur(0.5rem);
}

.circle-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.circle-blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    position: relative;
}

.circle-blue::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0.25) 40%, rgba(59, 130, 246, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
}

.circle-purple {
    background: linear-gradient(to bottom right, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.2));
    border-color: rgba(147, 51, 234, 0.3);
    color: #a78bfa;
    position: relative;
}

.circle-purple::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, rgba(147, 51, 234, 0.25) 40%, rgba(147, 51, 234, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 0.5s;
}

.circle-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    position: relative;
}

.circle-green::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.circle-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
    position: relative;
}

.circle-teal {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(14, 116, 144, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
    position: relative;
}

.circle-teal::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, rgba(6, 182, 212, 0.25) 40%, rgba(6, 182, 212, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1s;
}

.circle-green {
    background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    position: relative;
}

.circle-green::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.25) 40%, rgba(34, 197, 94, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 1.5s;
}

.circle-orange {
    background: linear-gradient(to bottom right, rgba(249, 115, 22, 0.3), rgba(234, 88, 12, 0.2));
    border-color: rgba(249, 115, 22, 0.3);
    color: #fb923c;
    position: relative;
}

.circle-orange::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.4) 0%, rgba(249, 115, 22, 0.25) 40%, rgba(249, 115, 22, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2s;
}

.circle-red {
    background: linear-gradient(to bottom right, rgba(220, 38, 38, 0.3), rgba(185, 28, 28, 0.2));
    border-color: rgba(220, 38, 38, 0.3);
    color: #f87171;
    position: relative;
}

.circle-red::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.4) 0%, rgba(220, 38, 38, 0.25) 40%, rgba(220, 38, 38, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 2.5s;
}

.circle-ping {
    position: absolute;
    inset: 0;
    border: 2px solid;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.circle-ping-blue {
    border-color: rgba(59, 130, 246, 0.2);
}

.circle-ping-purple {
    border-color: rgba(147, 51, 234, 0.2);
}

.circle-ping-green {
    border-color: rgba(34, 197, 94, 0.2);
}

.circle-ping-orange {
    border-color: rgba(249, 115, 22, 0.2);
}

/* Timeline Final */
.timeline-final {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    z-index: 2;
    opacity: 0;
    transform: translateY(3rem);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-final.visible {
    opacity: 1;
    transform: translateY(0);
}

.final-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    position: relative;
}

.final-badge::before {
    content: '';
    position: absolute;
    top: -25px;
    bottom: -25px;
    left: -50px;
    right: -50px;
    background: radial-gradient(ellipse 150% 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(30px);
    animation: pulseGlow 3s ease-in-out infinite;
}

.final-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #4ade80;
}

.final-text {
    color: #ffffff;
    font-weight: 600;
}

.final-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #4ade80;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Services Section */
.services-section {
    position: relative;
    margin-top: -20rem;
    margin-bottom: 10rem;
}

@media (max-width: 768px) {
    .services-section {
        margin-top: 0rem;
    }
}

.services-bg-blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
}

.services-bg-blur-1 {
    top: 2.5rem;
    right: 2.5rem;
    width: 15rem;
    height: 15rem;
    background: rgba(255, 255, 255, 0.05);
}

.services-bg-blur-2 {
    bottom: 2.5rem;
    left: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.03);
    animation-delay: 1s;
}

.services-decorative-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.services-circle-1 {
    top: 50%;
    left: 25%;
    width: 8rem;
    height: 8rem;
    animation: spinVerySlow 60s linear infinite;
}

.services-circle-2 {
    top: 25%;
    right: 25%;
    width: 6rem;
    height: 6rem;
    border-color: rgba(255, 255, 255, 0.05);
    animation: spinSlow 30s linear infinite;
}

.services-decorative-line {
    position: absolute;
    left: 5rem;
    right: 5rem;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.services-line-1 {
    top: 5rem;
}

.services-line-2 {
    bottom: 5rem;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.services-floating-dot {
    position: absolute;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.services-dot-1 {
    top: 33%;
    left: 20%;
    width: 0.75rem;
    height: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
}

.services-dot-2 {
    top: 66%;
    right: 20%;
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    animation-delay: 1s;
}

.services-dot-3 {
    top: 50%;
    right: 33%;
    width: 0.625rem;
    height: 0.625rem;
    background: rgba(255, 255, 255, 0.25);
    animation-delay: 0.5s;
}

.services-content {
    position: relative;
    padding: 2rem;
}

@media (min-width: 768px) {
    .services-content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .services-content {
        padding: 5rem;
    }
}

/* Services Header */
.services-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(5rem);
}

.services-header.visible {
    animation: slideInUp 1s ease-out forwards;
}

.services-title-container {
    margin-bottom: 2rem;
}

.services-title {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .services-title {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .services-title {
        font-size: 4.5rem;
    }
}

.services-title-gradient {
    background: linear-gradient(to right, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.services-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.services-line-segment {
    height: 2px;
}

.services-line-1 {
    width: 8rem;
    background: linear-gradient(to right, transparent, #ffffff, rgba(255, 255, 255, 0.5));
}

.services-line-2 {
    width: 12rem;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.services-line-3 {
    width: 12rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.7), #ffffff);
}

.services-line-4 {
    width: 8rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.5), #ffffff, transparent);
}

.services-line-dot {
    position: relative;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.services-dot-complex-1,
.services-dot-complex-2 {
    width: 2rem;
    height: 2rem;
    border: 2px solid #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.services-dot-simple {
    width: 1.25rem;
    height: 1.25rem;
    background: #ffffff;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-outer {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.dot-inner {
    position: absolute;
    inset: 0.5rem;
    background: #ffffff;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite 0.5s;
}

.services-description {
    font-size: 1.5rem;
    color: #d1d5db;
    max-width: 80rem;
    margin: 0 auto;
    line-height: 1.75;
    font-weight: 300;
}

@media (min-width: 768px) {
    .services-description {
        font-size: 1.875rem;
    }
}

.services-description .highlight {
    color: #ffffff;
    font-weight: 600;
}

/* Services Main Card */
.services-main-card {
    max-width: 96rem;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(5rem);
}

.services-main-card.visible {
    animation: slideInUp 1s ease-out forwards;
}

.services-card-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
    border-radius: 3rem;
    backdrop-filter: blur(0.5rem);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.7s ease;
}

.services-main-card:hover .services-card-bg {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15));
    transform: scale(1.02);
}

.services-card-decorator {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 1s ease;
}

.services-decorator-1 {
    top: -2rem;
    right: -2rem;
    width: 8rem;
    height: 8rem;
    border-radius: 2rem;
    transform: rotate(45deg);
}

.services-decorator-2 {
    bottom: -1.5rem;
    left: -1.5rem;
    width: 6rem;
    height: 6rem;
    border-radius: 1rem;
    border-color: rgba(255, 255, 255, 0.15);
    transform: rotate(12deg);
}

.services-main-card:hover .services-decorator-1 {
    transform: rotate(90deg);
}

.services-main-card:hover .services-decorator-2 {
    transform: rotate(45deg);
}

.services-card-content {
    position: relative;
    display: grid;
    gap: 3rem;
    align-items: center;
    padding: 3rem;
}

@media (min-width: 768px) {
    .services-card-content {
        padding: 4rem;
    }
}

@media (min-width: 1024px) {
    .services-card-content {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        padding: 5rem;
    }
}

/* Services Text Content */
.services-text-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

@media (min-width: 1024px) {
    .services-text-content {
        text-align: left;
    }
}

.services-intro {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.services-icon-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .services-icon-header {
        justify-content: flex-start;
    }
}

.services-main-icon {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.5s ease;
}

.services-main-card:hover .services-main-icon {
    transform: scale(1.1);
}

.services-main-icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: #ffffff;
}

.services-header-text {
    text-align: left;
}

.services-card-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.5s ease;
}

@media (min-width: 768px) {
    .services-card-title {
        font-size: 2.25rem;
    }
}

.services-main-card:hover .services-card-title {
    color: #f3f4f6;
}

.services-card-subtitle {
    color: #d1d5db;
    font-size: 1.125rem;
    font-weight: 500;
}

.services-main-description {
    font-size: 1.25rem;
    color: #d1d5db;
    line-height: 1.75;
    transition: color 0.5s ease;
}

@media (min-width: 768px) {
    .services-main-description {
        font-size: 1.5rem;
    }
}

.services-main-card:hover .services-main-description {
    color: #e5e7eb;
}

.services-main-description .highlight {
    color: #ffffff;
    font-weight: 600;
}

.services-secondary-description {
    font-size: 1.125rem;
    color: #9ca3af;
    line-height: 1.75;
    transition: color 0.5s ease;
}

.services-main-card:hover .services-secondary-description {
    color: #d1d5db;
}

/* Services CTA */
.services-cta {
    padding-top: 1rem;
}

.services-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(to right, #ffffff, #e5e7eb);
    color: #000000;
    padding: 1.25rem 2.5rem;
    border-radius: 1.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.5s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.services-btn:hover {
    background: linear-gradient(to right, #f3f4f6, #ffffff);
    transform: scale(1.1) translateY(-0.25rem);
    box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.2);
}

.btn-arrow {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.5s ease;
}

.services-btn:hover .btn-arrow {
    transform: translateX(0.5rem);
}

/* Services Badges */
.services-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1.5rem;
    justify-content: center;
}

@media (min-width: 1024px) {
    .services-badges {
        justify-content: flex-start;
    }
}

.quality-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.quality-badge svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.quality-badge:nth-child(1) svg {
    color: #4ade80;
}

.quality-badge:nth-child(2) svg {
    color: #fbbf24;
}

.quality-badge:nth-child(3) svg {
    color: #60a5fa;
}

.quality-badge span {
    color: #ffffff;
    font-weight: 500;
}

/* Services Visual */
.services-visual {
    position: relative;
}

.visual-bg {
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    filter: blur(0.5rem);
    transition: transform 0.7s ease;
}

.visual-bg-1 {
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(3deg);
}

.visual-bg-2 {
    background: linear-gradient(to top left, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(-2deg);
}

.services-main-card:hover .visual-bg-1 {
    transform: rotate(6deg);
}

.services-main-card:hover .visual-bg-2 {
    transform: rotate(-4deg);
}

.services-icons-grid {
    position: relative;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 2rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.5rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .services-icons-grid {
        padding: 3rem;
    }
}

.service-icon-card {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.service-icon-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.service-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    transition: transform 0.3s ease;
}

.service-icon-card:hover .service-icon {
    transform: scale(1.1);
}

.service-icon-card:nth-child(1) .service-icon {
    color: #60a5fa;
}

.service-icon-card:nth-child(2) .service-icon {
    color: #a78bfa;
}

.service-icon-card:nth-child(3) .service-icon {
    color: #4ade80;
}

.service-icon-card:nth-child(4) .service-icon {
    color: #fb923c;
}

.service-icon-title {
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.service-icon-description {
    font-size: 0.75rem;
    color: #9ca3af;
}

.visual-center-decorator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem;
    height: 4rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-dot {
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* Services Stats */
.services-stats {
    position: relative;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    text-align: center;
}

@media (min-width: 768px) {
    .services-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-number {
    font-size: 3rem !important;
    font-weight: 700;
    color: #ffffff;
}

@media (min-width: 768px) {
    .stat-number {
        font-size: 3rem;
    }
}

.stat-label {
    color: #9ca3af;
    font-weight: 500;
}

.stat-bar {
    width: 4rem;
    height: 0.25rem;
    border-radius: 9999px;
    margin: 0 auto;
}

.stat-bar-blue {
    background: linear-gradient(to right, #3b82f6, #93c5fd);
}

.stat-bar-green {
    background: linear-gradient(to right, #10b981, #6ee7b7);
}

.stat-bar-purple {
    background: linear-gradient(to right, #8b5cf6, #c4b5fd);
}

/* Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-5rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(5rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(6deg);
    }
    50% {
        transform: translateY(-0.625rem) rotate(6deg);
    }
}

@keyframes floatReverse {
    0%, 100% {
        transform: translateY(0px) rotate(-3deg);
    }
    50% {
        transform: translateY(0.625rem) rotate(-3deg);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes heroGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(147, 51, 234, 0.6);
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(4rem);
    }
}

@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinVerySlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .main-section {
        padding: 2rem 0 4rem;
    }
    
    .container {
        padding: 0 0.5rem;
    }
    
    .hero-section {
        margin-bottom: 4rem;
    }
    
    .essence-section,
    .team-section,
    .process-section {
        margin-bottom: 4rem;
    }
    
    .team-content,
    .process-content,
    .services-content {
        padding: 1.5rem;
    }
}

/* Estrelas cadentes adicionais para Como Funciona */
.shooting-star-4,
.shooting-star-5,
.shooting-star-6,
.shooting-star-7,
.shooting-star-8,
.shooting-star-9,
.shooting-star-10 {
    position: absolute;
    width: 2px;
    height: 2px;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.8), transparent);
    border-radius: 50%;
    animation: shootingStar 6s linear infinite;
}

.shooting-star-4 {
    top: 15%;
    left: 20%;
    animation-delay: 1s;
    animation-duration: 4s;
}

.shooting-star-5 {
    top: 25%;
    right: 30%;
    animation-delay: 2.5s;
    animation-duration: 5s;
}

.shooting-star-6 {
    top: 60%;
    left: 15%;
    animation-delay: 3.2s;
    animation-duration: 4.5s;
}

.shooting-star-7 {
    top: 35%;
    right: 20%;
    animation-delay: 4s;
    animation-duration: 6s;
}

.shooting-star-8 {
    top: 75%;
    left: 35%;
    animation-delay: 0.8s;
    animation-duration: 5.5s;
}

.shooting-star-9 {
    top: 45%;
    right: 40%;
    animation-delay: 2s;
    animation-duration: 4.8s;
}

.shooting-star-10 {
    top: 85%;
    left: 60%;
    animation-delay: 3.8s;
    animation-duration: 5.2s;
}

/* Pontos de luz adicionais */
.light-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

.light-dot-1 {
    top: 5%;
    left: 15%;
    animation-delay: 0.5s;
}

.light-dot-2 {
    top: 35%;
    left: 88%;
    animation-delay: 1.2s;
}

.light-dot-3 {
    top: 68%;
    left: 5%;
    animation-delay: 2.1s;
}

.light-dot-4 {
    top: 85%;
    left: 75%;
    animation-delay: 0.8s;
}

.light-dot-5 {
    top: 18%;
    left: 60%;
    animation-delay: 1.8s;
}

.light-dot-6 {
    top: 92%;
    left: 45%;
    animation-delay: 2.5s;
}

.light-dot-7 {
    top: 52%;
    left: 30%;
    animation-delay: 1.5s;
}

.light-dot-8 {
    top: 78%;
    left: 95%;
    animation-delay: 3s;
}

/* Novas estrelas estáticas adicionais */
.light-dot-9 {
    top: 25%;
    left: 20%;
    animation-delay: 0.3s;
}

.light-dot-10 {
    top: 42%;
    left: 70%;
    animation-delay: 1.7s;
}

.light-dot-11 {
    top: 65%;
    left: 82%;
    animation-delay: 2.3s;
}

.light-dot-12 {
    top: 48%;
    left: 58%;
    animation-delay: 0.9s;
}

.light-dot-13 {
    top: 8%;
    left: 88%;
    animation-delay: 1.4s;
}

.light-dot-14 {
    top: 72%;
    left: 18%;
    animation-delay: 2.8s;
}

.light-dot-15 {
    top: 98%;
    left: 20%;
    animation-delay: 0.6s;
}

.light-dot-16 {
    top: 32%;
    left: 42%;
    animation-delay: 1.9s;
}

.light-dot-17 {
    top: 55%;
    left: 8%;
    animation-delay: 3.2s;
}

.light-dot-18 {
    top: 12%;
    left: 35%;
    animation-delay: 0.4s;
}

.light-dot-19 {
    top: 88%;
    left: 62%;
    animation-delay: 2.6s;
}

.light-dot-20 {
    top: 28%;
    left: 78%;
    animation-delay: 1.1s;
}

/* Estrelas adicionais para maior realismo - movimento suave e bem espalhadas */
.light-dot-21 {
    position: absolute;
    top: 7%;
    left: 8%;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat1 8s ease-in-out infinite;
    animation-delay: 0.2s;
}

.light-dot-22 {
    position: absolute;
    top: 23%;
    left: 85%;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat2 9s ease-in-out infinite;
    animation-delay: 1.8s;
}

.light-dot-23 {
    position: absolute;
    top: 45%;
    left: 12%;
    width: 2.5px;
    height: 2.5px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat3 7s ease-in-out infinite;
    animation-delay: 0.9s;
}

.light-dot-24 {
    position: absolute;
    top: 62%;
    left: 92%;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat1 10s ease-in-out infinite;
    animation-delay: 2.3s;
}

.light-dot-25 {
    position: absolute;
    top: 15%;
    left: 52%;
    width: 3.5px;
    height: 3.5px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat2 6s ease-in-out infinite;
    animation-delay: 1.2s;
}

.light-dot-26 {
    position: absolute;
    top: 83%;
    left: 25%;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat3 8.5s ease-in-out infinite;
    animation-delay: 0.6s;
}

.light-dot-27 {
    position: absolute;
    top: 38%;
    left: 78%;
    width: 2.8px;
    height: 2.8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat1 7.5s ease-in-out infinite;
    animation-delay: 2.1s;
}

.light-dot-28 {
    position: absolute;
    top: 72%;
    left: 65%;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat2 9.5s ease-in-out infinite;
    animation-delay: 1.5s;
}

.light-dot-29 {
    position: absolute;
    top: 28%;
    left: 38%;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat3 8s ease-in-out infinite;
    animation-delay: 0.8s;
}

.light-dot-30 {
    position: absolute;
    top: 95%;
    left: 88%;
    width: 2.2px;
    height: 2.2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: slowFloat1 6.5s ease-in-out infinite;
    animation-delay: 1.9s;
}

/* Animações de movimento suave para cima e baixo */
@keyframes slowFloat1 {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-15px);
    opacity: 1;
  }
}

@keyframes slowFloat2 {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-12px);
    opacity: 1;
  }
}

@keyframes slowFloat3 {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-18px);
    opacity: 0.9;
  }
}

/* Linha gradiente decorativa após Como Funciona */
.como-funciona-bottom-line {
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
}

.gradient-line {
    width: 80%;
    height: 2px;
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.2) 20%, 
        rgba(255, 255, 255, 0.6) 40%, 
        rgba(255, 255, 255, 0.9) 50%, 
        rgba(255, 255, 255, 0.6) 60%, 
        rgba(255, 255, 255, 0.2) 80%, 
        transparent 100%
    );
    position: relative;
    animation: gradientPulse 4s ease-in-out infinite;
}



/* Fundo preto para Projeto Concluído com Sucesso */
.final-badge {
    background: #000000 !important;
    background-color: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Segunda seção de serviços */
.services-section-2 {
    width: 100%;
    padding: 6rem 0;
    background: linear-gradient(135deg, #000000 0%, #111111 50%, #000000 100%);
    position: relative;
    overflow: hidden;
    margin-top: 4rem;
    z-index: 1;
    display: block;
}

.services-section-2 .services-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 2rem;
}

.services-section-2 .services-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
}

.services-section-2 .services-title-gradient {
    background: linear-gradient(135deg, #9333ea, #c084fc, #e879f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.services-section-2 .services-header {
    text-align: center;
    margin-bottom: 4rem;
    color: white;
}

.services-section-2 .services-title {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.services-section-2 .services-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.services-section-2 .services-main-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    padding: 3rem;
    backdrop-filter: blur(10px);
    color: white;
}

.services-section-2 .services-card-content {
    display: grid;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .services-section-2 .services-card-content {
        grid-template-columns: 1fr 1fr;
    }
}

/* Estilos específicos para elementos internos da segunda seção */
.services-section-2 .services-decorative-line-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.services-section-2 .services-line-segment {
    height: 1px;
    width: 2rem;
    background: rgba(255, 255, 255, 0.3);
}

.services-section-2 .services-line-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

.services-section-2 .dot-outer {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-section-2 .dot-inner {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

.services-section-2 .highlight {
    color: #c084fc;
    font-weight: 600;
}

.services-section-2 .services-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #9333ea, #c084fc);
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.services-section-2 .services-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(147, 51, 234, 0.3);
}

.services-section-2 .services-badges {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.services-section-2 .quality-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.services-section-2 .quality-badge svg {
    width: 1rem;
    height: 1rem;
    color: #c084fc;
}

.services-section-2 .services-icons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.services-section-2 .service-icon-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.services-section-2 .service-icon-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.services-section-2 .service-icon {
    width: 2rem;
    height: 2rem;
    color: #c084fc;
    margin-bottom: 0.5rem;
}

.services-section-2 .service-icon-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem;
}

.services-section-2 .service-icon-description {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.services-section-2 .services-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.services-section-2 .stat-item {
    text-align: center;
}

.services-section-2 .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #c084fc;
    margin-bottom: 0.5rem;
}

/* Seção de Projetos - Design Minimalista Preto e Branco */
.projects-section {
    padding: 3rem 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.projects-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.projects-card {
    position: relative;
    background: rgba(0, 0, 0, 0);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
    padding: 3rem;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Badge simplificado */
.projects-premium-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 3;
    backdrop-filter: blur(10px);
}

.projects-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
    position: relative;
    z-index: 2;
}

.projects-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.projects-title {
    color: #ffffff;
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em;
}

.title-line-1,
.title-line-2,
.title-line-3 {
    display: block;
}

.title-highlight {
    color: #ffffff;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.title-highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
}

.projects-title-decoration {
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 0.6;
}

.decoration-line {
    width: 30px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
}

.decoration-dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
}

.projects-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 550px;
    margin: 0;
}

.highlight-text {
    color: #ffffff;
    font-weight: 500;
}

.projects-cta {
    margin-top: 0.5rem;
}

.projects-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 36px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(20px);
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 
                0 0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.projects-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    opacity: 0;
    transition: opacity 0.5s ease;
}

.projects-button:hover::before {
    opacity: 1;
}

.projects-button:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
                0 0 0 1px rgba(255, 255, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.projects-button:active {
    transform: translateY(-2px) scale(1.01);
    transition: all 0.1s ease;
}

.btn-text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-text svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.projects-button:hover .btn-text svg {
    transform: translateX(4px);
}

/* Responsividade para Projects Section */
@media (max-width: 768px) {
    .projects-section {
        padding: 2rem 0;
    }

    .projects-container {
        padding: 0 1rem;
    }

    .projects-card {
        padding: 2rem;
        border-radius: 16px;
    }

    .projects-content {
        gap: 1.5rem;
    }

    .projects-title {
        font-size: 2.2rem;
    }

    .projects-description {
        font-size: 1rem;
        max-width: 100%;
    }

    .projects-premium-badge {
        position: static;
        align-self: center;
        margin-bottom: 1rem;
    }

    .projects-button {
        padding: 16px 30px;
        font-size: 15px;
    }

    .btn-text {
        gap: 10px;
    }

    .btn-text svg {
        width: 20px;
        height: 20px;
    }

    .projects-button:hover {
        transform: translateY(-3px) scale(1.02);
    }
}

@media (max-width: 480px) {
    .projects-section {
        padding: 1.5rem 0;
    }

    .projects-card {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .projects-content {
        gap: 1.25rem;
    }

    .projects-title {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .projects-description {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .projects-button {
        padding: 14px 28px;
        font-size: 14px;
    }

    .btn-text {
        gap: 8px;
    }

    .btn-text svg {
        width: 18px;
        height: 18px;
    }

    .projects-button:hover {
        transform: translateY(-2px) scale(1.01);
    }

    .projects-title-decoration {
        gap: 0.75rem;
    }

    .decoration-line {
        width: 20px;
    }
}

.services-section-2 .stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.services-section-2 .stat-bar {
    height: 3px;
    background: linear-gradient(90deg, transparent, #c084fc, transparent);
    border-radius: 2px;
    margin-top: 0.5rem;
}

/* Elementos decorativos específicos */
.services-section-2 .visual-center-decorator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: rgba(192, 132, 252, 0.2);
    border-radius: 50%;
    border: 2px solid rgba(192, 132, 252, 0.4);
}

.services-section-2 .center-dot {
    width: 6px;
    height: 6px;
    background: #c084fc;
    border-radius: 50%;
    margin: 5px auto;
}

/* Responsividade específica */
@media (max-width: 768px) {
    .services-section-2 .services-title {
        font-size: 2rem;
    }
    
    .services-section-2 .services-card-content {
        grid-template-columns: 1fr;
    }
    
    .services-section-2 .services-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .services-section-2 .services-badges {
        flex-direction: column;
    }
}

/* Animações */
@keyframes shootingStar {
    0% {
        opacity: 0;
        transform: translateX(-100px) translateY(-100px) scale(0);
    }
    10% {
        opacity: 1;
        transform: translateX(-50px) translateY(-50px) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateX(100px) translateY(100px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(150px) translateY(150px) scale(0);
    }
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes gradientPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scaleX(1);
    }
    50% {
        opacity: 1;
        transform: scaleX(1.02);
    }
}

/* Services Section */
.services-section {
    position: relative;
    width: 100%;
    padding: 8rem 0;
    background: #000;
    color: #fff;
    overflow: hidden;
  }
  
  /* Background Effects */
  .background-effects {
    position: absolute;
    inset: 0;
  }
  
  .radial-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1), transparent 50%);
  }
  
  .blur-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(3rem);
  }
  
  .blur-circle-1 {
    top: 0;
    left: 25%;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.05);
    animation: pulse 4s ease-in-out infinite;
  }
  
  .blur-circle-2 {
    bottom: 0;
    right: 25%;
    width: 24rem;
    height: 24rem;
    background: rgba(255, 255, 255, 0.03);
    animation: pulse 4s ease-in-out infinite;
    animation-delay: 1s;
  }
  
  .geometric-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
  }
  
  .dot {
    position: absolute;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 2px;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  
  .dot-1 {
    top: 5rem;
    left: 5rem;
    width: 8px;
    height: 8px;
    animation-delay: 0.3s;
  }
  
  .dot-2 {
    top: 10rem;
    right: 8rem;
    width: 4px;
    height: 4px;
    opacity: 0.6;
    animation-delay: 0.7s;
  }
  
  .dot-3 {
    bottom: 8rem;
    left: 33%;
    width: 6px;
    height: 6px;
    opacity: 0.4;
    animation-delay: 1s;
  }
  
  .dot-4 {
    bottom: 5rem;
    right: 5rem;
    width: 8px;
    height: 8px;
    opacity: 0.3;
    animation-delay: 0.5s;
  }
  
  /* Container */
  .container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }
  
  /* Header Section */
  .header-section {
    text-align: center;
    margin-bottom: 5rem;
  }
  
  .premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    margin-bottom: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 9999px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .main-title {
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 900;
    margin-bottom: 2rem;
    margin-top: -50px;
    line-height: 0.9;
    letter-spacing: -0.02em;
  }
  
  .title-primary {
    display: block;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 6rem;
  }
  
  .title-secondary {
    display: block;
    color: rgba(255, 255, 255, 0.4);
    font-size: 5rem;
    font-weight: 300;
    margin-top: 0.5rem;
  }
  
  .header-description {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 60rem;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 300;
  }
  
  .highlight {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
  }
  
  /* Services Grid */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 5rem;
  }

  @media (max-width: 1200px) {
    .services-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .services-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .service-card {
    position: relative;
    padding: 2rem;
    border-radius: 1.5rem;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .service-card:hover {
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }
  
  .card-number {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 4rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.1);
    transition: color 0.5s ease;
  }
  
  .service-card:hover .card-number {
    color: rgba(255, 255, 255, 0.2);
  }
  
  .card-glow {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: blur(20px);
  }
  
  .service-card:hover .card-glow {
    opacity: 1;
  }
  
  .card-content {
    position: relative;
    z-index: 10;
  }
  
  .icon-container {
    margin-bottom: 2rem;
  }
  
  .icon-wrapper {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.5s ease;
  }
  
  .service-card:hover .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1) rotate(6deg);
  }
  
  .icon-wrapper i {
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.5s ease;
  }
  
  .service-card:hover .icon-wrapper i {
    color: #fff;
    transform: scale(1.1);
  }
  
  .service-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.3s ease;
  }
  
  .service-card:hover .service-title {
    color: #fff;
  }
  
  .service-description {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    line-height: 1.6;
    font-size: 1rem;
  }

  .service-description strong {
    font-size: 1.1em !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px;
  }
  
  .features-list {
    margin-bottom: 2rem;
  }
  
  .feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
  }
  
  .feature-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    margin-right: 1rem;
    transition: all 0.3s ease;
  }
  
  .service-card:hover .feature-dot {
    background: #fff;
    transform: scale(1.25);
  }
  
  .feature-item span {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease;
  }
  
  .service-card:hover .feature-item span {
    color: rgba(255, 255, 255, 0.9);
  }
  
  .hover-arrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.5s ease;
  }
  
  .service-card:hover .hover-arrow {
    opacity: 1;
    transform: translateY(0);
  }
  
  .hover-arrow span {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
  }
  
  .hover-arrow i {
    color: #fff;
    transition: transform 0.3s ease;
  }
  
  .service-card:hover .hover-arrow i {
    transform: translateX(0.5rem);
  }
  
  /* Service-specific colors */
  .service-card[data-service="0"]:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.2));
  }
  
  .service-card[data-service="0"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.2));
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
  }
  
  .service-card[data-service="1"]:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
  }
  
  .service-card[data-service="1"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.2);
  }
  
  .service-card[data-service="2"]:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(20, 184, 166, 0.2));
  }
  
  .service-card[data-service="2"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(20, 184, 166, 0.2));
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.2);
  }
  
  .service-card[data-service="3"]:hover {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(239, 68, 68, 0.2));
  }
  
  .service-card[data-service="3"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(239, 68, 68, 0.2));
    box-shadow: 0 0 40px rgba(249, 115, 22, 0.2);
  }
  
  .service-card[data-service="4"]:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2));
  }
  
  .service-card[data-service="4"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2));
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.2);
  }
  
  .service-card[data-service="5"]:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
  }
  
  .service-card[data-service="5"]:hover .card-glow {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.2);
  }
  
  /* CTA Section */
  .cta-section {
    position: relative;
  }
  
  .cta-background-effects {
    position: absolute;
    inset: -5rem;
  }
  
  .cta-blur-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50rem;
    height: 25rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), transparent);
    border-radius: 50%;
    filter: blur(3rem);
    animation: pulse 4s ease-in-out infinite;
  }
  
  .cta-blur-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 37.5rem;
    height: 18.75rem;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    filter: blur(2rem);
    animation: pulse 4s ease-in-out infinite;
    animation-delay: 1s;
  }
  
  .floating-elements {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  
  .floating-dot {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: bounce 2s infinite;
  }
  
  .floating-dot-1 {
    top: 2.5rem;
    left: 2.5rem;
    width: 12px;
    height: 12px;
    animation-delay: 0.3s;
  }
  
  .floating-dot-2 {
    top: 5rem;
    right: 5rem;
    width: 8px;
    height: 8px;
    opacity: 0.4;
    animation-delay: 0.7s;
  }
  
  .floating-dot-3 {
    bottom: 2.5rem;
    left: 25%;
    width: 6px;
    height: 6px;
    opacity: 0.5;
    animation-delay: 1s;
  }
  
  .floating-dot-4 {
    bottom: 5rem;
    right: 33%;
    width: 10px;
    height: 10px;
    opacity: 0.2;
    animation-delay: 0.5s;
  }
  
  .animated-line {
    position: absolute;
    top: 50%;
    height: 1px;
    width: 8rem;
    animation: pulse 2s ease-in-out infinite;
  }
  
  .animated-line-left {
    left: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
  }
  
  .animated-line-right {
    right: 0;
    background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation-delay: 0.5s;
  }
  
  .cta-container {
    position: relative;
    display: inline-block;
    max-width: 80rem;
    text-align: center;
  }
  
  .cta-outer-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
    border-radius: 1.5rem;
    filter: blur(2rem);
    transform: scale(1.1);
    animation: pulse 3s ease-in-out infinite;
  }
  
  .cta-border-animation {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent, rgba(255, 255, 255, 0.2));
    padding: 2px;
  }
  
  .cta-border-animation::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: calc(1.5rem - 2px);
    background: #000;
  }
  
  .cta-content {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1.5rem;
    padding: 4rem;
    overflow: hidden;
  }
  
  .cta-inner-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
  }
  
  .pattern-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
  }
  
  .pattern-circle-1 {
    top: 2rem;
    left: 2rem;
    width: 6rem;
    height: 6rem;
  }
  
  .pattern-circle-2 {
    bottom: 2rem;
    right: 2rem;
    width: 8rem;
    height: 8rem;
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .pattern-circle-3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10rem;
    height: 10rem;
    border-color: rgba(255, 255, 255, 0.05);
  }
  
  .cta-main-content {
    position: relative;
    z-index: 10;
  }
  
  .cta-premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    margin-bottom: 2rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 9999px;
  }
  
  .ping-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  
  .ping-dot-2 {
    animation-delay: 0.3s;
  }
  
  .cta-premium-badge span {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  
  .cta-title {
    font-size: clamp(2.5rem, 8vw, 7rem);
    font-weight: 900;
    margin-bottom: 2rem;
    line-height: 1.1;
  }
  
  .cta-title-line-1 {
    display: block;
    color: rgba(255, 255, 255, 0.9);
  }
  
  .cta-title-line-2 {
    display: block;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .cta-title-line-3 {
    position: relative;
    display: inline-block;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .title-underline {
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
    border-radius: 2px;
  }
  
  .cta-question {
    font-size: clamp(3rem, 8vw, 7rem);
  }
  
  .cta-subtitle {
    font-size: clamp(1.25rem, 3vw, 2rem);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3rem;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    font-weight: 300;
  }
  
  .subtitle-highlight {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
  }
  
  .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
  }
  
  @media (min-width: 1024px) {
    .cta-buttons {
      flex-direction: row;
    }
  }
  
  .primary-button-container {
    position: relative;
  }
  
  .primary-button-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    border-radius: 1rem;
    filter: blur(20px);
    transition: all 0.5s ease;
  }
  
  .primary-button-container:hover .primary-button-glow {
    filter: blur(40px);
  }
  
  .primary-button {
    position: relative;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.9));
    color: #000;
    padding: 2rem 3rem;
    font-size: 1.25rem;
    font-weight: 900;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .primary-button:hover {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    transform: scale(1.1);
    box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.3);
  }
  
  .secondary-button-container {
    position: relative;
  }
  
  .secondary-button-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 1rem;
    filter: blur(16px);
    transition: all 0.5s ease;
  }
  
  .secondary-button-container:hover .secondary-button-glow {
    filter: blur(20px);
  }
  
  .secondary-button {
    position: relative;
    padding: 2rem 3rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .secondary-button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
  }
  
  .arrow-text {
    transition: transform 0.3s ease;
  }
  
  .secondary-button:hover .arrow-text {
    transform: translateX(0.5rem);
  }
  
  .stats-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin-top: -16rem;
  }
  
  @media (min-width: 1024px) {
    .stats-grid {
      gap: 4rem;
    }
  }
  
  .stat-item {
    text-align: center;
    transition: transform 0.3s ease;
  }
  
  .stat-item:hover {
    transform: translateY(-0.25rem);
  }
  
  .stat-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease;
  }
  
  .stat-item:hover .stat-icon {
    transform: scale(1.25);
  }
  
  .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
  }
  
  .stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
  }
  
  .cta-bottom-text {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.125rem;
    margin-top: 4rem;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    font-weight: 300;
    text-align: center;
  }
  
  .bottom-text-highlight {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
  }
  
  /* Animations */
  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  
  @keyframes ping {
    75%,
    100% {
      transform: scale(2);
      opacity: 0;
    }
  }
  
  @keyframes bounce {
    0%,
    100% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: translateY(0);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .services-section {
      padding: 4rem 0;
      margin-bottom: 0rem;
    }
  
    .container {
      padding: 0 1rem;
    }
  
    .services-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  
    .service-card {
      padding: 1.5rem;
    }
  
    .cta-content {
      padding: 2rem;
    }
  
    .cta-buttons {
      flex-direction: column;
      gap: 1rem;
    }
  
    .primary-button,
    .secondary-button {
      padding: 1.5rem 2rem;
      font-size: 1rem;
    }
  
    .stats-grid {
      flex-direction: column;
      gap: 1.5rem;
    }
  }
  
  @media (max-width: 480px) {
    .header-section {
      margin-bottom: 3rem;
    }
  
    .services-grid {
      margin-bottom: 3rem;
    }
  
    .service-card {
      padding: 1rem;
    }
  
    .icon-wrapper {
      width: 4rem;
      height: 4rem;
    }
  
    .icon-wrapper i {
      font-size: 2.5rem;
    }
  }

/* Modificações solicitadas pelo usuário */
/* Ajustar o texto "Explorar serviço" para ficar menor */
.hover-arrow span {
    font-size: 0.85rem !important;
}

/* Centralizar e aumentar largura do card CTA */
.cta-content {
    max-width: 900px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.cta-container {
    max-width: 950px !important;
    margin: 0 auto !important;
}

/* Ajustar ícones profissionais */
.stat-icon svg {
    color: #9333ea !important;
    width: 24px !important;
    height: 24px !important;
}

/* Remover efeito de linha decorativa nos títulos */
.title-underline {
    display: none !important;
}

.cta-title-line-3 .title-underline {
    display: none !important;
}
 
/* Seção Principal */
.testimonials-section {
    background: linear-gradient(135deg, #050505 0%, #111111 25%, #1a1a1a 50%, #111111 75%, #050505 100%);
    padding: 8rem 1rem;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    margin-top: -300px;
}

@media screen and (max-width: 1020px) {
  .testimonials-section {
    margin-top: -100px;
  }
}

/* Elementos de Fundo */
.background-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.floating-dot {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.dot-1 {
    top: 5rem;
    left: 2.5rem;
    width: 8px;
    height: 8px;
}

.dot-2 {
    top: 10rem;
    right: 5rem;
    width: 4px;
    height: 4px;
    opacity: 0.6;
    animation-delay: 1s;
}

.dot-3 {
    bottom: 8rem;
    left: 25%;
    width: 6px;
    height: 6px;
    opacity: 0.4;
    animation-delay: 2s;
}

.dot-4 {
    top: 33%;
    right: 33%;
    width: 4px;
    height: 4px;
    opacity: 0.5;
    animation-delay: 0.5s;
}

.gradient-overlay-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
}

.gradient-overlay-2 {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1), transparent 50%);
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

/* Cabeçalho dos Testimonials */
.testimonials-header {
    text-align: center;
    margin-bottom: 5rem;
    opacity: 0;
    transform: translateY(3rem);
    animation: slideInFromTop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.testimonials-main-title {
    font-size: 5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
    margin-top: -50px;
    line-height: 1.1;
    opacity: 0;
    transform: translateY(2rem);
    animation: slideInFromTop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s forwards;
}

.title-gradient {
    background: linear-gradient(135deg, #ffffff, #d1d5db, #9ca3af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.testimonials-subtitle {
    color: #9ca3af;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    max-width: 48rem;
    margin: 0 auto 2rem;
    line-height: 1.6;
    font-weight: 300;
    opacity: 0;
    transform: translateY(1.5rem);
    animation: slideInFromTop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s forwards;
}

.highlight-text {
    color: #d1d5db;
    font-weight: 500;
}

.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255,255,255,0.3);
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin: 0 auto;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 
        0 15px 35px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255,255,255,0.3);
    position: relative;
    overflow: hidden;
}


.star-icon {
    width: 1rem;
    height: 1rem;
    color: #fbbf24;
}

.stars-group {
    display: flex;
    gap: 0.25rem;
    margin-left: 0.5rem;
}

.mini-star {
    width: 0.75rem;
    height: 0.75rem;
    color: #fbbf24;
}

.main-title {
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 700;
    color: white;
    margin-bottom: 2rem;
    line-height: 1.1;
}

.gradient-text {
    display: block;
    background: linear-gradient(to right, white, #d1d5db, white);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pulse 2s infinite;
}

.subtitle {
    color: #9ca3af;
    font-size: clamp(1.25rem, 3vw, 2rem);
    max-width: 64rem;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 300;
}

/* Container dos Depoimentos */
.testimonials-container {
    position: relative;
    margin-bottom: 6rem;
    padding: 3\rem 0;
    margin-top: -100px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Setas de Navegação */
.nav-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.5s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.nav-arrow:hover {
    background: white;
    color: black;
    transform: translateY(-50%) scale(1.1);
}

.nav-arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-prev {
    left: 0;
}

.nav-next {
    right: 0;
}

.nav-arrow svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Wrapper dos Depoimentos */
.testimonials-wrapper {
    margin: 0 5rem;
    overflow: visible;
    padding: 2rem 0;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Cards de Depoimentos */
.testimonial-card {
    position: relative;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    transition: all 0.7s ease;
    overflow: hidden;
    opacity: 0;
    transform: translateY(5rem);
    display: flex;
    flex-direction: column;
    min-height: 300px;
    justify-content: space-between;
}

.testimonial-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.testimonial-card:nth-child(1) { animation-delay: 0ms; }
.testimonial-card:nth-child(2) { animation-delay: 200ms; }
.testimonial-card:nth-child(3) { animation-delay: 400ms; }

/* Efeitos de Hover */
.testimonial-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    background: linear-gradient(45deg, rgba(59,130,246,0.2), rgba(147,51,234,0.2), rgba(236,72,153,0.2));
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: blur(20px);
}

.testimonial-card:hover::before {
    opacity: 1;
}

.testimonial-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
    transition: transform 1s ease-in-out;
}

.testimonial-card:hover::after {
    transform: translateX(100%);
}

.testimonial-card:hover {
    transform: translateY(-0.75rem) scale(1.02);
    box-shadow: 0 32px 64px -12px rgba(0,0,0,0.4);
}

/* Conteúdo do Card */
.card-content {
    position: relative;
    z-index: 10;
    transition: all 0.5s ease;
}

.testimonial-card:hover .card-content {
    transform: scale(1.02);
}

.quote-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.5rem;
    height: 2.5rem;
    color: rgba(255,255,255,0.2);
    transition: all 0.5s ease;
}

.testimonial-card:hover .quote-icon {
    color: rgba(255,255,255,0.6);
    transform: scale(1.25) rotate(12deg);
}

.rating {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.rating-star {
    width: 1.25rem;
    height: 1.25rem;
    color: #fbbf24;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.5));
}

.testimonial-card:hover .rating-star {
    transform: scale(1.25) rotate(12deg);
}

.testimonial-content {
    flex: 1;
    margin-bottom: 2rem;
}

.testimonial-text {
    color: white;
    font-size: 1.25rem;
    line-height: 1.6;
    font-weight: 300;
    transition: all 0.5s ease;
}

.testimonial-card:hover .testimonial-text {
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.author-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.5s ease;
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.testimonial-card:hover .author-info {
    transform: translateX(0.5rem);
}

.author-avatar {
    position: relative;
}

.author-avatar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(45deg, #3b82f6, #8b5cf6);
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: blur(10px);
    transform: scale(1.1);
}

.testimonial-card:hover .author-avatar::before {
    opacity: 0.5;
}

.avatar-img {
    position: relative;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.2);
    transition: all 0.5s ease;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.testimonial-card:hover .avatar-img {
    border-color: rgba(255,255,255,0.6);
}

.avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.testimonial-card:hover .avatar-img img {
    transform: scale(1.1);
}

.author-details {
    transition: all 0.5s ease;
}

.testimonial-card:hover .author-details {
    transform: translateY(-2px);
}

.author-name {
    color: white;
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
    transition: all 0.5s ease;
}

.testimonial-card:hover .author-name {
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.author-role {
    color: #9ca3af;
    font-size: 0.875rem;
    transition: all 0.5s ease;
}

.testimonial-card:hover .author-role {
    color: #d1d5db;
}

/* Partículas Flutuantes */
.floating-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s ease;
}

.particle-1 {
    top: 1rem;
    left: 1rem;
}

.particle-2 {
    bottom: 2rem;
    right: 2rem;
    animation-delay: 300ms;
}

.testimonial-card:hover .floating-particle {
    opacity: 1;
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Indicador de Progresso */
.progress-indicator {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
    gap: 0.75rem;
}

.progress-dot {
    height: 8px;
    border-radius: 9999px;
    transition: all 0.5s ease;
    cursor: pointer;
    margin-top: -3.5rem;
}

.progress-dot:hover {
    transform: scale(1.25);
}

.progress-dot.active {
    background: white;
    width: 3rem;
    box-shadow: 0 0 20px rgba(255,255,255,0.5);
}

.progress-dot:not(.active) {
    background: rgba(255,255,255,0.3);
    width: 8px;
}

.progress-dot:not(.active):hover {
    background: rgba(255,255,255,0.5);
}

/* Botão Google Reviews */
.google-reviews-button-container {
    text-align: center;
    margin-bottom: 3rem;
    margin-top: 230px;
}

.google-reviews-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%);
    color: #1e293b;
    padding: 1.25rem 2.5rem;
    border-radius: 2rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.15),
        0 0 0 1px rgba(255,255,255,0.9),
        inset 0 1px 0 rgba(255,255,255,0.8);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.google-reviews-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.google-reviews-btn:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 
        0 25px 50px rgba(0,0,0,0.25),
        0 0 0 1px rgba(255,255,255,1),
        inset 0 1px 0 rgba(255,255,255,1);
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%);
}

@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(3rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.google-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.google-stars {
    font-size: 0.875rem;
    color: #f59e0b;
}

.stats-section.animate-in {
    opacity: 1;
    transform: translateY(0);
    margin-top: 12rem;
}

@media (max-width: 768px) {
    .stats-section.animate-in {
        margin-top: 22rem;
        margin-bottom: -10rem;
    }
}

.stat-number {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.stat-item:hover .stat-number {
    transform: scale(1.1);
}

.stat-label {
    color: #9ca3af;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.stat-item:hover .stat-label {
    color: #d1d5db;
}

/* Animações */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Responsividade */
@media (max-width: 1024px) {
    .testimonials-wrapper {
        margin: 0 3rem;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .testimonials-section {
        padding: 4rem 1rem;
    }
    
    .testimonials-wrapper {
        margin: 0 1rem;
    }
    
    .stats-section {
        padding: 2rem;
    }
    
    .stats-grid {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .header {
        margin-bottom: 3rem;
    }
    
    .testimonial-card {
        padding: 1.5rem;
    }
    
    .testimonial-text {
        font-size: 1rem;
    }
}

.background-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.orb-1 {
  top: 80px;
  left: 40px;
  width: 384px;
  height: 384px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), transparent);
  animation: pulse 4s ease-in-out infinite;
}

.orb-2 {
  bottom: 80px;
  right: 40px;
  width: 500px;
  height: 500px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03), transparent);
  animation: pulse 4s ease-in-out infinite 1s;
}

.orb-3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 1000px;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.05), transparent, rgba(255, 255, 255, 0.05));
  border-radius: 50%;
  filter: blur(80px);
  animation: spin-slow 20s linear infinite;
}

.grid-pattern {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
}

.mouse-follower {
  position: absolute;
  width: 384px;
  height: 384px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  transition: all 0.3s ease-out;
}

.content {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

/* Premium Badge */
.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(20px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
  margin-bottom: 48px;
}

.premium-badge:hover {
  transform: scale(1.05);
}

.sparkle-icon {
  position: relative;
  color: white;
}

.sparkle-icon svg {
  animation: pulse 2s ease-in-out infinite;
}

.sparkle-glow {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  filter: blur(8px);
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.badge-text {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

/* Main Title */
.heading-section {
  margin-bottom: 64px;
}

.main-title {
  font-size: clamp(3rem, 8vw, 8rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}

.title-line {
  display: block;
  background: linear-gradient(to right, white, #e5e5e5, white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
}

.title-line-1 {
  animation: gradient 3s ease infinite;
}

.title-line-2 {
  background: linear-gradient(to right, #d1d5db, white, #d1d5db);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradient-reverse 3s ease infinite;
}

.title-line-3 {
  position: relative;
}

.title-underline {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 128px;
  height: 4px;
  background: linear-gradient(to right, transparent, white, transparent);
  border-radius: 2px;
}

.subtitle {
  font-size: clamp(1.25rem, 3vw, 2rem);
  color: #d1d5db;
  max-width: 768px;
  margin: 0 auto;
  line-height: 1.6;
  font-weight: 300;
}



/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin: 64px 0;
}

.feature-card {
  padding: 32px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(20px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: all 0.5s ease;
  cursor: pointer;
}

.feature-card:hover {
  transform: scale(1.05) translateY(-8px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
}

.feature-icon {
  position: relative;
  margin: 0 auto 24px;
  width: 48px;
  height: 48px;
  color: white;
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
  transform: scale(1.1);
}

.icon-glow {
  position: absolute;
  inset: 0;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  filter: blur(20px);
  transition: all 0.3s ease;
}

.feature-card:hover .icon-glow {
  background: rgba(255, 255, 255, 0.3);
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

.feature-card:hover .feature-title {
  color: white;
}

.feature-description {
  color: #9ca3af;
  transition: color 0.3s ease;
}

.feature-card:hover .feature-description {
  color: #d1d5db;
}

.feature-line {
  width: 32px;
  height: 4px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.5), transparent);
  border-radius: 2px;
  margin: 16px auto 0;
  transition: width 0.3s ease;
}

.feature-card:hover .feature-line {
  width: 48px;
}

/* CTA Section */
.cta-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  margin: 48px 0;
}

@media (min-width: 640px) {
  .cta-section {
    flex-direction: row;
    justify-content: center;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 200px;
  align-items: center;
  justify-content: center;
  display: flex;
  text-align: center;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-item {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.stat-item:hover {
  transform: scale(1.1);
}

.stat-number {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  background: linear-gradient(to bottom, white, #9ca3af);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.stat-stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 8px;
}

.stat-label {
  color: #9ca3af;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

.stat-item:hover .stat-label {
  color: #d1d5db;
}

.stat-item:hover .stat-line {
  width: 64px;
}

/* Animations */
@keyframes gradient {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes gradient-reverse {
  0%,
  100% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 0% 50%;
  }
}

@keyframes spin-slow {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    padding: 40px 16px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .feature-card {
    padding: 24px;
  }

  .cta-section {
    gap: 16px;
  }

  .btn-primary,
  .btn-secondary {
    padding: 20px 32px;
    font-size: 1.125rem;
  }

  .stats-grid {
    gap: 32px;
  }
}

/* Enhanced CTA Buttons for Hero Section */
.btn-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
    color: white;
    padding: 1.25rem 2.5rem;
    border-radius: 2rem;
    border: none;
    font-weight: 700;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 
        0 25px 50px rgba(99, 102, 241, 0.4),
        0 0 0 1px rgba(255,255,255,0.2),
        inset 0 1px 0 rgba(255,255,255,0.3);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.btn-primary:hover::before {
    opacity: 1;
    animation: shimmer 0.6s ease-in-out;
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 35px 60px rgba(99, 102, 241, 0.6),
        0 0 0 1px rgba(255,255,255,0.4),
        inset 0 1px 0 rgba(255,255,255,0.5);
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
}

.btn-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-arrow {
    transition: transform 0.3s ease;
}

.btn-primary:hover .btn-arrow {
    transform: translateX(0.25rem);
}

.btn-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-primary:hover .btn-bg {
    opacity: 1;
}

/* Showcase Section Styles */
.showcase-section {
  position: relative;
  padding: 8rem 0;
  background: #000;
  margin-top: -260px;
  color: #fff;
  overflow: hidden;
}

/* Background Visuals */
.background-visuals {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gradient-sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.sphere-1 {
  top: 80px;
  left: 40px;
  width: 384px;
  height: 384px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04), transparent);
  animation: pulse 4s ease-in-out infinite;
}

.sphere-2 {
  bottom: 80px;
  right: 40px;
  width: 500px;
  height: 500px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02), transparent);
  animation: pulse 4s ease-in-out infinite 1s;
}

.sphere-3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 1000px;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.03), transparent, rgba(255, 255, 255, 0.03));
  border-radius: 50%;
  filter: blur(80px);
  animation: spin-slow 20s linear infinite;
}

.mesh-pattern {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 50px 50px;
}

.float-element {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.element-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.element-2 {
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.element-3 {
  bottom: 30%;
  left: 20%;
  animation-delay: 4s;
}

.cursor-tracker {
  position: absolute;
  width: 384px;
  height: 384px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.03), transparent);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  transition: all 0.3s ease-out;
}

/* Title Section */
.title-section {
  margin-bottom: 64px;
}

.primary-heading {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 32px;
  text-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.heading-line {
  display: block;
  background: linear-gradient(to right, white, #e5e5e5, white);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
}

.heading-line-1 {
  animation: gradient 3s ease infinite;
}

.heading-line-2 {
  background: linear-gradient(to right, #d1d5db, white, #d1d5db);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradient-reverse 3s ease infinite;
}

.heading-line-3 {
  position: relative;
}

.heading-underline {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 128px;
  height: 4px;
  background: linear-gradient(to right, transparent, white, transparent);
  border-radius: 2px;
}

.description {
  font-size: clamp(1.25rem, 3vw, 2rem);
  color: #d1d5db;
  max-width: 768px;
  margin: 0 auto;
  line-height: 1.6;
  font-weight: 300;
}

.emphasis {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* Showcase Grid */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin: 64px 0;
}

.showcase-card {
  padding: 32px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(20px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: all 0.5s ease;
  cursor: pointer;
}

.showcase-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 35px 70px -12px rgba(0, 0, 0, 0.4);
}

.showcase-icon {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.showcase-card:hover .showcase-icon {
  transform: scale(1.05);
}

.icon-aura {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.showcase-card:hover .icon-aura {
  opacity: 1;
}

.showcase-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 16px;
  text-align: center;
}

.showcase-card:hover .showcase-title {
  color: #f8f9fa;
}

.showcase-description {
  color: #d1d5db;
  text-align: center;
  line-height: 1.6;
}

.showcase-card:hover .showcase-description {
  color: #e5e7eb;
}

.showcase-line {
  width: 64px;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
  margin: 24px auto 0;
  transition: all 0.5s ease;
}

.showcase-card:hover .showcase-line {
  width: 128px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
}

/* Action Section */
.action-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  margin-top: 64px;
}

@media (min-width: 640px) {
  .action-section {
    flex-direction: row;
    justify-content: center;
    gap: 32px;
  }
}

.btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(20px);
  color: white;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 
              0 0 0 1px rgba(255, 255, 255, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  opacity: 0;
  transition: opacity 0.5s ease;
}

.btn-secondary:hover::before {
  opacity: 1;
}

.btn-secondary:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
              0 0 0 1px rgba(255, 255, 255, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-icon {
  transition: transform 0.3s ease;
}

.btn-secondary:hover .btn-icon {
  transform: translateX(4px);
}

.btn-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

  .btn-secondary:hover .btn-background {
    opacity: 1;
  }

/* Services Button Styles */
.btn-primary-services {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  border: 2px solid #ffffff;
  border-radius: 50px;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 8px 32px rgba(255, 255, 255, 0.3), 
              0 0 0 1px rgba(255, 255, 255, 0.8),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.btn-primary-services::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.05), transparent, rgba(0, 0, 0, 0.05));
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: 50px;
}

.btn-primary-services:hover::before {
  opacity: 1;
}

.btn-primary-services:hover {
  transform: translateY(-6px) scale(1.05);
}

.btn-text-services {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 18px;
}

.btn-icon-services {
  width: 25px !important;
  height: auto !important;
  transition: transform 0.3s ease;
  filter: brightness(0) saturate(100%); /* Torna a imagem preta para combinar com o botão branco */
}

.btn-primary-services:hover .btn-icon-services {
  transform: translateX(4px) rotate(15deg);
  filter: brightness(0) saturate(100%); /* Mantém a cor preta no hover */
}

.btn-background-services {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.btn-primary-services:hover .btn-background-services {
  opacity: 1;
}

  /* Showcase Statistics */
  .showcase-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    margin-top: 5rem;
    padding: 2rem 0;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  .stat-card {
    text-align: center;
    padding: 1.5rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    min-width: 160px;
    flex-shrink: 0;
  }

  .stat-card:hover {
    transform: translateY(-5px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  }

  .stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #ffffff, #e5e5e5);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .stat-description {
    font-size: 0.9rem;
    color: #d1d5db;
    font-weight: 500;
    letter-spacing: 0.5px;
  }

  /* Responsive Design for Showcase Section */
  @media (max-width: 768px) {
    .showcase-section {
      padding: 4rem 0;
      margin-top: -200px !important;
    }
    
    .showcase-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    
    .showcase-card {
      padding: 24px;
    }
    
    .btn-secondary,
    .btn-primary-services {
      padding: 14px 28px;
      font-size: 14px;
    }

    .btn-primary-services {
      margin-top: 16px;
    }

    .showcase-stats {
      flex-direction: column;
      gap: 2rem;
      margin-top: 3rem;
      align-items: center;
      text-align: center;
    }

    .stat-card {
      min-width: 200px;
    }
  }

  .portfolio-hero-showcase {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    position: relative;
    overflow: hidden;
  }
  
  .hero-content-wrapper {
    max-width: 72rem;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 10;
  }
  
  /* Main container */
  .hero-main-container {
    position: relative;
    margin-bottom: 3rem;
  }
  
  .hero-content-panel {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.5rem;
    padding: 4rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05), transparent);
    backdrop-filter: blur(12px);
  }
  
  .magic-sparkles-accent {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(255, 255, 255, 0.6);
    animation: pulse 2s infinite;
  }
  
  /* Title */
  .portfolio-title-section {
    margin-bottom: 2rem;
  }
  
  .portfolio-main-heading {
    font-size: 6rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.05em;
    line-height: 1;
    margin-bottom: 1.5rem;
  }
  
  .portfolio-title-underline {
    width: 8rem;
    height: 0.25rem;
    background: rgba(255, 255, 255, 0.6);
    margin: 0 auto;
    border-radius: 9999px;
  }
  
  /* Description */
  .portfolio-description-text {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 3rem;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    font-weight: 300;
  }

  @media (max-width: 768px) {
    .portfolio-description-text {
      font-size: 1rem;
    }
  }
  
  .description-highlight-primary {
    color: #fff;
    font-weight: 500;
  }
  
  /* Stats grid */
  .expertise-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
  }
  
  .expertise-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  .expertise-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
  }
  
  .expertise-icon {
    width: 2rem;
    height: 2rem;
    color: #fff;
    margin: 0 auto 1rem;
    transition: transform 0.3s ease;
  }
  
  .expertise-card:hover .expertise-icon {
    transform: rotate(12deg);
  }
  
  .expertise-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
  }
  
  .expertise-subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
  }
  
  /* CTA Section */
  .call-to-action-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  
  .portfolio-explore-button {
    position: relative;
    background: #fff;
    color: #000;
    border: none;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 1.5rem 3rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
  }
  
  .portfolio-explore-button:hover {
    background: #f3f4f6;
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.2);
  }
  
  .explore-button-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  
  .explore-arrow-icon {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s ease;
  }
  
  .portfolio-explore-button:hover .explore-arrow-icon {
    transform: translateX(0.25rem);
  }
  
  .explore-button-shine-effect {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.7s ease;
  }
  
  .portfolio-explore-button:hover .explore-button-shine-effect {
    transform: translateX(100%);
  }
  
  .call-to-action-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
  }
  
  .subtitle-highlight-accent {
    color: rgba(255, 255, 255, 0.8);
  }
  
  /* Bottom decoration */
  .hero-bottom-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
  }
  
  /* Animations */
  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .hero-content-panel {
      padding: 2rem;
    }
  
    .expertise-showcase-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
  
    .orbital-decoration-primary,
    .orbital-decoration-secondary {
      display: none;
    }
  }  




/* Animações de entrada para seções */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sistema de animações com scroll trigger */
.animate-fade-in-up,
.animate-fade-in-left, 
.animate-fade-in-right,
.animate-scale-in,
.animate-slide-in-bottom {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-fade-in-up {
  transform: translateY(30px);
}

.animate-fade-in-left {
  transform: translateX(-30px);
}

.animate-fade-in-right {
  transform: translateX(30px);
}

.animate-scale-in {
  transform: scale(0.9);
}

.animate-slide-in-bottom {
  transform: translateY(50px);
}

/* Estado ativo - quando a animação é ativada pelo scroll */
.animate-fade-in-up.animate-active,
.animate-fade-in-left.animate-active,
.animate-fade-in-right.animate-active, 
.animate-scale-in.animate-active,
.animate-slide-in-bottom.animate-active {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Companies Section */
.companies-section {
margin-top: -80px;
margin-bottom: -100px;
}

.companies-section .container {
    max-width: 900px !important;
    margin: 0 auto;
    padding: 0 2rem;
}

.companies-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bg-gradient-1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
}

.bg-gradient-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(225deg, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
}

.bg-blur-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.bg-blur-1 {
    top: 20%;
    left: 10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    animation: float 12s ease-in-out infinite;
}

.bg-blur-2 {
    bottom: 20%;
    right: 10%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    animation: float 15s ease-in-out infinite reverse;
}

/* Companies Header */
.companies-header {
    text-align: center;
    margin-bottom: 5rem;
}

.badge-premium {
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
}

.badge-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sparkle-star {
    color: #fff;
    animation: rotate 4s linear infinite;
    opacity: 0.7;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.title-main {
    display: block;
    color: #fff;
    font-weight: 300;
}

.title-accent {
    display: block;
    color: #fff;
    font-weight: 700;
}

.section-description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
    font-weight: 300;
}

.highlight-number {
    color: #fff;
    font-weight: 600;
}

.highlight-text {
    color: #fff;
    font-weight: 500;
}

/* Companies Slider */
.companies-slider {
    margin-bottom: 5rem;
    overflow: hidden;
    position: relative;
    padding: 2rem 0;
}

.companies-slider::before,
.companies-slider::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.companies-slider::before {
    left: 0;
    background: linear-gradient(to right, #000, transparent);
}

.companies-slider::after {
    right: 0;
    background: linear-gradient(to left, #000, transparent);
}

.companies-track {
    display: flex;
    gap: 6rem;
    animation: scroll-infinite 60s linear infinite;
    width: fit-content;
    align-items: center;
}

.company-logo {
    flex-shrink: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.company-logo:hover {
    transform: scale(1.1);
}

.company-logo img {
    height: 100%;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.company-logo:hover img {
    opacity: 0.8;
    filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

/* Companies Stats */
.companies-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 0 auto;
}

.stat-card-animated {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    border-radius: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    min-width: 160px;
    position: relative;
}

.stat-card-animated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #fff;
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.stat-card-animated:hover::after {
    transform: scaleX(1);
}

.stat-card-animated:hover {
    transform: translateY(-5px);
}

.stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number-container {
    display: flex;
    align-items: baseline;
    gap: 0.1rem;
    margin-bottom: 0.5rem;
}

.stat-number-animated {
    font-size: 3rem;
    font-weight: 100;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0;
}

.stat-suffix {
    display: inline-block;
    font-size: 3rem;
    font-weight: 100;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1;
}

.stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    margin-top: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Animations para companies */
@keyframes scroll-infinite {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes countUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive para companies */
@media (max-width: 768px) {
    .companies-section {
        padding: 4rem 0;
    }

    .companies-header {
        margin-bottom: 3rem;
    }

    .section-title {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .section-description {
        font-size: 1rem;
        max-width: 90%;
    }

    .companies-slider {
        margin-bottom: 3rem;
        padding: 1rem 0;
    }

    .companies-track {
        gap: 4rem;
        animation-duration: 45s;
    }

    .company-logo {
        height: 40px;
    }

    .company-logo img {
        max-width: 100px;
    }

    .companies-stats {
        flex-direction: column;
        gap: 2rem;
    }

    .stat-card-animated {
        min-width: 280px;
        padding: 1.25rem 1.5rem;
    }

    .stat-number-animated,
    .stat-suffix {
        font-size: 1.875rem;
    }
}

/* CSS para o título "Quem Somos" que sumiu */
.title-gradient-quem-somos {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    background: linear-gradient(45deg, #ffffff, #f0f0f0, #ffffff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientPulse 3s ease-in-out infinite;
    display: inline-block;
    letter-spacing: -0.02em;
}

@keyframes gradientPulse {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes heroGlow {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Estilos para a seção de projetos CTA */
.projects-cta-section {
    text-align: center;
    margin: 4rem 0;
    padding: 3rem 0;
    position: relative;
    z-index: 9999;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(20, 20, 20, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.projects-cta-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    position: relative;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.projects-cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #9333ea, #c084fc, #e879f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.projects-cta-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2.5rem;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.projects-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #9333ea, #c084fc);
    color: white;
    padding: 1.25rem 2.5rem;
    border-radius: 1rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.projects-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(147, 51, 234, 0.4);
    background: linear-gradient(135deg, #a855f7, #d8b4fe);
}

.projects-cta-button:active {
    transform: translateY(-1px);
}

.button-text {
    position: relative;
    z-index: 2;
}

.button-icon {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.button-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.projects-cta-button:hover .button-icon {
    transform: translateX(3px);
}

.button-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.3), rgba(192, 132, 252, 0.3));
    border-radius: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.projects-cta-button:hover .button-glow {
    opacity: 1;
}

/* Responsividade */
@media (max-width: 768px) {
    .projects-cta-section {
        margin: 3rem 0;
        padding: 2rem 0;
    }
    
    .projects-cta-title {
        font-size: 2rem;
    }
    
    .projects-cta-description {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }
    
    .projects-cta-button {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .projects-cta-title {
        font-size: 1.75rem;
    }
    
    .projects-cta-description {
        font-size: 1rem;
    }
    
    .projects-cta-button {
        padding: 0.875rem 1.75rem;
        font-size: 0.95rem;
    }
}



/* Efeitos de Fundo */
.cta-background-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cta-gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  animation: float 8s ease-in-out infinite;
}

.cta-orb-1 {
  top: 20%;
  left: 10%;
  width: 400px;
  height: 400px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  animation-delay: 0s;
}

.cta-orb-2 {
  bottom: 20%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  animation-delay: 4s;
}

.cta-mesh-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.5;
}

.cta-floating-elements {
  position: absolute;
  inset: 0;
}

.cta-floating-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.cta-dot-1 {
  top: 25%;
  left: 20%;
  animation-delay: 0s;
}

.cta-dot-2 {
  top: 70%;
  right: 30%;
  animation-delay: 2s;
}

.cta-dot-3 {
  bottom: 40%;
  left: 70%;
  animation-delay: 4s;
}

/* Conteúdo da Seção */
.services-cta-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Badge Premium */
.services-cta-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  backdrop-filter: blur(20px);
  margin-bottom: 2rem;
  overflow: hidden;
}

.badge-glow-ring {
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), transparent, rgba(255, 255, 255, 0.3));
  border-radius: 50px;
  opacity: 0;
  animation: ping 2s ease-in-out infinite;
}

.badge-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.5px;
}

/* Título Principal */
.services-cta-header {
  margin-bottom: 2rem;
}

.services-cta-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.title-line-1,
.title-line-3 {
  display: block;
  color: #fff;
  margin-bottom: 0.25rem;
}

.title-line-2 {
  display: block;
  margin-bottom: 0.25rem;
}

.title-highlight {
  background: linear-gradient(135deg, #ffffff, #f0f0f0, #ffffff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientPulse 3s ease-in-out infinite;
  position: relative;
}

.title-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.decoration-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
}

.decoration-dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

/* Descrição */
.services-cta-description {
  margin-bottom: 3rem;
}

.services-cta-description p {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 700px;
  margin: 0 auto;
}

.highlight-accent {
  color: #fff;
  font-weight: 600;
  position: relative;
}

.highlight-accent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
  opacity: 0.7;
}

/* Botão Principal */
.services-cta-action {
  margin-bottom: 4rem;
}

.services-explore-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 2.5rem;
  background: linear-gradient(135deg, #ffffff, #f5f5f5);
  color: #000;
  border: none;
  border-radius: 50px;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 20px 40px rgba(255, 255, 255, 0.1);
}

.btn-glow-effect {
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.8));
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.services-explore-btn:hover .btn-glow-effect {
  opacity: 1;
  animation: rotate 2s linear infinite;
}

.services-explore-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 30px 60px rgba(255, 255, 255, 0.2);
}

.btn-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.btn-arrow {
  transition: transform 0.3s ease;
}

.services-explore-btn:hover .btn-arrow {
  transform: translateX(2px) translateY(-2px);
}

.btn-shine-effect {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: rotate(45deg);
  transition: all 0.6s ease;
  opacity: 0;
}

.services-explore-btn:hover .btn-shine-effect {
  opacity: 1;
  animation: shimmer 0.6s ease-in-out;
}

/* Estatísticas */
.services-cta-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.services-cta-stats .stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.25rem;
  background: linear-gradient(135deg, #ffffff, #e5e5e5);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
}

/* Animações */
@keyframes shimmer {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsividade */
@media (max-width: 768px) {
  .services-cta-section {
    padding: 5rem 0;
    min-height: 70vh;
  }
  
  .services-cta-content {
    padding: 0 1rem;
  }
  
  .services-cta-badge {
    padding: 0.5rem 1rem;
    margin-bottom: 2rem;
  }
  
  .badge-text {
    font-size: 0.75rem;
  }
  
  .services-cta-title {
    margin-bottom: 1rem;
    margin-top: 1rem;
  }
  
  .services-cta-description {
    margin-bottom: 2rem;
  }
  
  .services-explore-btn {
    padding: 1rem 2rem;
    font-size: 1rem;
  }
  
  .services-cta-action {
    margin-bottom: 3rem;
  }
  
  .services-cta-stats {
    gap: 2rem;
    flex-direction: column;
  }
  
  .stat-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
  }
  
  .stat-number {
    font-size: 1.75rem;
  }
}

/* ========================================
   MOON 3D SECTION STYLES
   ======================================== */

/* Nova seção de texto sobreposta */
.moon-text-overlay {
  position: absolute;
  top: 46%;
  left: 2%;
  transform: translateY(-50%);
  z-index: 1000;
  max-width: 950px;
  padding: 2rem;
}

.moon-text-overlay .moon-badge {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 8px 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.moon-text-overlay .badge-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.moon-text-overlay .moon-badge span {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
}

.moon-text-overlay .moon-title {
  font-size: 4.2rem !important;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.moon-text-overlay .title-main {
  color: #ffffff;
  display: block;
}

.moon-text-overlay .title-accent {
  background: linear-gradient(135deg, #ffffff, #cccccc, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.moon-text-overlay .moon-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.5rem !important;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

.moon-text-overlay .moon-buttons {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

@media screen and (max-width: 1000px) {
  .moon-text-overlay {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    max-width: 100%;
    text-align: center;
    padding: 2rem 1rem;
  }
  
  .moon-text-overlay .moon-title {
    font-size: 2.5rem;
  }
  
  .moon-text-overlay .moon-buttons {
    justify-content: center;
  }
}

/* Moon 3D Section Styles */
.moon-3d-section {
  background: 
    /* Campo de estrelas ultra realista - muito mais estrelas */
    /* Estrelas supergigantes brilhantes */
    radial-gradient(4px 4px at 15% 25%, #ffffff, rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.4) 60%, transparent),
    radial-gradient(3.5px 3.5px at 85% 15%, #e6f3ff, rgba(230,243,255,0.8) 25%, rgba(230,243,255,0.3) 50%, transparent),
    radial-gradient(3px 3px at 45% 35%, #ffffff, rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.4) 55%, transparent),
    radial-gradient(4px 4px at 65% 85%, #ffffff, rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.4) 60%, transparent),
    radial-gradient(3px 3px at 92% 55%, #e6f3ff, rgba(230,243,255,0.8) 25%, rgba(230,243,255,0.3) 50%, transparent),
    radial-gradient(4px 4px at 8% 75%, #ffffff, rgba(255,255,255,0.95) 30%, rgba(255,255,255,0.4) 60%, transparent),
    
    /* Estrelas gigantes */
    radial-gradient(2.5px 2.5px at 75% 45%, #cce7ff, rgba(204,231,255,0.8) 40%, rgba(204,231,255,0.2) 80%, transparent),
    radial-gradient(2px 2px at 25% 65%, #ffffff, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0.3) 80%, transparent),
    radial-gradient(2.5px 2.5px at 95% 75%, #e6f3ff, rgba(230,243,255,0.7) 40%, rgba(230,243,255,0.2) 80%, transparent),
    radial-gradient(2px 2px at 5% 85%, #cce7ff, rgba(204,231,255,0.8) 40%, rgba(204,231,255,0.2) 80%, transparent),
    radial-gradient(2px 2px at 58% 15%, #ffffff, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0.3) 80%, transparent),
    radial-gradient(2.5px 2.5px at 78% 95%, #e6f3ff, rgba(230,243,255,0.8) 40%, rgba(230,243,255,0.2) 80%, transparent),
    radial-gradient(2px 2px at 13% 55%, #cce7ff, rgba(204,231,255,0.9) 40%, rgba(204,231,255,0.3) 80%, transparent),
    radial-gradient(2px 2px at 88% 25%, #ffffff, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0.2) 80%, transparent),
    
    /* Estrelas médias com halo maior */
    radial-gradient(1.8px 1.8px at 30% 10%, rgba(255,255,255,0.9), rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.1) 80%, transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(230,243,255,0.8), rgba(230,243,255,0.3) 50%, rgba(230,243,255,0.1) 80%, transparent),
    radial-gradient(1.2px 1.2px at 10% 40%, rgba(255,255,255,0.8), rgba(255,255,255,0.3) 60%, rgba(255,255,255,0.05) 90%, transparent),
    radial-gradient(1px 1px at 90% 50%, rgba(204,231,255,0.9), rgba(204,231,255,0.4) 50%, rgba(204,231,255,0.1) 80%, transparent),
    radial-gradient(1.5px 1.5px at 50% 70%, rgba(255,255,255,0.9), rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.1) 80%, transparent),
    radial-gradient(1px 1px at 20% 90%, rgba(230,243,255,0.7), rgba(230,243,255,0.3) 60%, rgba(230,243,255,0.05) 90%, transparent),
    radial-gradient(1.5px 1.5px at 85% 35%, rgba(255,255,255,0.8), rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.1) 80%, transparent),
    radial-gradient(1px 1px at 35% 85%, rgba(204,231,255,0.9), rgba(204,231,255,0.3) 60%, rgba(204,231,255,0.05) 90%, transparent),
    radial-gradient(1.5px 1.5px at 65% 5%, rgba(230,243,255,0.8), rgba(230,243,255,0.4) 50%, rgba(230,243,255,0.1) 80%, transparent),
    radial-gradient(1px 1px at 95% 95%, rgba(255,255,255,0.7), rgba(255,255,255,0.3) 60%, rgba(255,255,255,0.05) 90%, transparent),
    
    /* Constelação de estrelas pequenas - muito mais */
    radial-gradient(0.8px 0.8px at 5% 5%, rgba(255,255,255,0.8), rgba(255,255,255,0.2) 70%, transparent 90%),
    radial-gradient(0.6px 0.6px at 35% 8%, rgba(255,255,255,0.7), rgba(255,255,255,0.1) 60%, transparent 80%),
    radial-gradient(0.8px 0.8px at 60% 12%, rgba(230,243,255,0.8), rgba(230,243,255,0.2) 70%, transparent 90%),
    radial-gradient(0.6px 0.6px at 80% 25%, rgba(255,255,255,0.6), rgba(255,255,255,0.1) 60%, transparent 80%),
    radial-gradient(0.7px 0.7px at 12% 30%, rgba(204,231,255,0.7), rgba(204,231,255,0.2) 65%, transparent 85%),
    radial-gradient(0.8px 0.8px at 40% 45%, rgba(255,255,255,0.8), rgba(255,255,255,0.2) 70%, transparent 90%),
    radial-gradient(0.6px 0.6px at 75% 55%, rgba(230,243,255,0.6), rgba(230,243,255,0.1) 60%, transparent 80%),
    radial-gradient(0.7px 0.7px at 25% 75%, rgba(255,255,255,0.7), rgba(255,255,255,0.2) 65%, transparent 85%),
    radial-gradient(0.8px 0.8px at 55% 80%, rgba(204,231,255,0.8), rgba(204,231,255,0.2) 70%, transparent 90%),
    radial-gradient(0.6px 0.6px at 85% 90%, rgba(255,255,255,0.6), rgba(255,255,255,0.1) 60%, transparent 80%),
    radial-gradient(0.7px 0.7px at 18% 95%, rgba(230,243,255,0.7), rgba(230,243,255,0.2) 65%, transparent 85%),
    radial-gradient(0.8px 0.8px at 48% 22%, rgba(255,255,255,0.7), rgba(255,255,255,0.2) 70%, transparent 90%),
    radial-gradient(0.6px 0.6px at 72% 38%, rgba(230,243,255,0.6), rgba(230,243,255,0.1) 60%, transparent 80%),
    radial-gradient(0.7px 0.7px at 28% 52%, rgba(204,231,255,0.8), rgba(204,231,255,0.2) 65%, transparent 85%),
    radial-gradient(0.8px 0.8px at 82% 68%, rgba(255,255,255,0.7), rgba(255,255,255,0.2) 70%, transparent 90%),
    radial-gradient(0.6px 0.6px at 38% 92%, rgba(230,243,255,0.6), rgba(230,243,255,0.1) 60%, transparent 80%),
    radial-gradient(0.7px 0.7px at 92% 18%, rgba(204,231,255,0.7), rgba(204,231,255,0.2) 65%, transparent 85%),
    radial-gradient(0.8px 0.8px at 62% 42%, rgba(255,255,255,0.8), rgba(255,255,255,0.2) 70%, transparent 90%),
    radial-gradient(0.6px 0.6px at 18% 72%, rgba(230,243,255,0.6), rgba(230,243,255,0.1) 60%, transparent 80%),
    radial-gradient(0.7px 0.7px at 42% 28%, rgba(204,231,255,0.7), rgba(204,231,255,0.2) 65%, transparent 85%),
    
    /* Estrelas distantes (pontos de luz) - ainda mais */
    radial-gradient(0.4px 0.4px at 22% 15%, rgba(255,255,255,0.5), rgba(255,255,255,0.1) 70%, transparent),
    radial-gradient(0.3px 0.3px at 67% 28%, rgba(230,243,255,0.4), rgba(230,243,255,0.05) 60%, transparent),
    radial-gradient(0.4px 0.4px at 88% 42%, rgba(204,231,255,0.5), rgba(204,231,255,0.1) 70%, transparent),
    radial-gradient(0.3px 0.3px at 33% 58%, rgba(255,255,255,0.4), rgba(255,255,255,0.05) 60%, transparent),
    radial-gradient(0.4px 0.4px at 77% 73%, rgba(230,243,255,0.5), rgba(230,243,255,0.1) 70%, transparent),
    radial-gradient(0.3px 0.3px at 44% 88%, rgba(204,231,255,0.4), rgba(204,231,255,0.05) 60%, transparent),
    radial-gradient(0.4px 0.4px at 11% 33%, rgba(255,255,255,0.5), rgba(255,255,255,0.1) 70%, transparent),
    radial-gradient(0.3px 0.3px at 54% 47%, rgba(230,243,255,0.4), rgba(230,243,255,0.05) 60%, transparent),
    radial-gradient(0.4px 0.4px at 91% 61%, rgba(204,231,255,0.5), rgba(204,231,255,0.1) 70%, transparent),
    radial-gradient(0.3px 0.3px at 26% 77%, rgba(255,255,255,0.4), rgba(255,255,255,0.05) 60%, transparent),
    radial-gradient(0.4px 0.4px at 69% 91%, rgba(230,243,255,0.5), rgba(230,243,255,0.1) 70%, transparent),
    radial-gradient(0.3px 0.3px at 37% 19%, rgba(204,231,255,0.4), rgba(204,231,255,0.05) 60%, transparent),
    radial-gradient(0.4px 0.4px at 81% 36%, rgba(255,255,255,0.5), rgba(255,255,255,0.1) 70%, transparent),
    radial-gradient(0.3px 0.3px at 14% 52%, rgba(230,243,255,0.4), rgba(230,243,255,0.05) 60%, transparent),
    radial-gradient(0.4px 0.4px at 58% 69%, rgba(204,231,255,0.5), rgba(204,231,255,0.1) 70%, transparent),
    radial-gradient(0.3px 0.3px at 96% 83%, rgba(255,255,255,0.4), rgba(255,255,255,0.05) 60%, transparent),
    radial-gradient(0.4px 0.4px at 29% 6%, rgba(230,243,255,0.5), rgba(230,243,255,0.1) 70%, transparent),
    radial-gradient(0.3px 0.3px at 73% 14%, rgba(204,231,255,0.4), rgba(204,231,255,0.05) 60%, transparent),
    radial-gradient(0.4px 0.4px at 46% 31%, rgba(255,255,255,0.5), rgba(255,255,255,0.1) 70%, transparent),
    radial-gradient(0.3px 0.3px at 89% 49%, rgba(230,243,255,0.4), rgba(230,243,255,0.05) 60%, transparent),
    radial-gradient(0.4px 0.4px at 25% 82%, rgba(232,232,232,0.6), transparent 70%),
    radial-gradient(0.6px 0.6px at 95% 25%, rgba(255,255,255,0.8), transparent 70%),
    radial-gradient(0.3px 0.3px at 5% 65%, rgba(212,212,212,0.5), transparent 70%),
    radial-gradient(0.5px 0.5px at 48% 32%, rgba(255,255,255,0.7), transparent 70%),
    radial-gradient(0.4px 0.4px at 68% 92%, rgba(232,232,232,0.6), transparent 70%),
    
    /* Mais pontos de luz pequenos */
    radial-gradient(0.2px 0.2px at 22% 35%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.2px 0.2px at 67% 15%, rgba(232,232,232,0.3), transparent),
    radial-gradient(0.2px 0.2px at 88% 52%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.2px 0.2px at 33% 78%, rgba(212,212,212,0.3), transparent),
    radial-gradient(0.2px 0.2px at 77% 73%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.2px 0.2px at 44% 18%, rgba(232,232,232,0.3), transparent),
    radial-gradient(0.2px 0.2px at 11% 83%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.2px 0.2px at 54% 97%, rgba(212,212,212,0.3), transparent),
    radial-gradient(0.2px 0.2px at 91% 8%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.2px 0.2px at 26% 47%, rgba(232,232,232,0.3), transparent),
    radial-gradient(0.2px 0.2px at 69% 61%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.2px 0.2px at 37% 29%, rgba(212,212,212,0.3), transparent),
    radial-gradient(0.2px 0.2px at 81% 86%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.2px 0.2px at 14% 52%, rgba(232,232,232,0.3), transparent),
    radial-gradient(0.2px 0.2px at 58% 19%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.2px 0.2px at 96% 43%, rgba(212,212,212,0.3), transparent),
    radial-gradient(0.2px 0.2px at 29% 76%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.2px 0.2px at 73% 24%, rgba(232,232,232,0.3), transparent),
    radial-gradient(0.2px 0.2px at 46% 81%, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.2px 0.2px at 89% 59%, rgba(212,212,212,0.3), transparent),
    
    /* Fundo base preto profundo */
    linear-gradient(135deg, #000000 0%, #0a0a0a 25%, #000000 50%, #0a0a0a 75%, #000000 100%);
  padding: 0rem 0 !important;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  z-index: 1 !important;
}

.moon-3d-section .space-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* Estrelas cadentes realistas para seção da lua */
.moon-3d-section .shooting-star-1 {
  position: absolute;
  top: 8%;
  left: 15%;
  width: 4px;
  height: 140px;
  background: 
    linear-gradient(-45deg, 
      #ffffff 0%, 
      rgba(255,255,255,0.9) 20%, 
      rgba(255,255,255,0.6) 50%, 
      rgba(255,255,255,0.3) 80%, 
      transparent 100%);
  border-radius: 8px;
  box-shadow: 
    0 0 20px rgba(255,255,255,0.8),
    0 0 40px rgba(255,255,255,0.4),
    0 0 60px rgba(255,255,255,0.2);
  animation: moonShootingStar1 20s linear infinite;
  transform: rotate(-45deg);
  transform-origin: center;
  z-index: 2;
  opacity: 0;
}

.moon-3d-section .shooting-star-2 {
  position: absolute;
  top: 25%;
  right: 20%;
  width: 3px;
  height: 110px;
  background: 
    linear-gradient(-45deg, 
      #ffffff 0%, 
      rgba(255,255,255,0.8) 25%, 
      rgba(255,255,255,0.5) 60%, 
      rgba(255,255,255,0.2) 85%, 
      transparent 100%);
  border-radius: 6px;
  box-shadow: 
    0 0 15px rgba(255,255,255,0.7),
    0 0 30px rgba(255,255,255,0.3);
  animation: moonShootingStar2 25s linear infinite;
  animation-delay: 7s;
  transform: rotate(-45deg);
  transform-origin: center;
  z-index: 2;
  opacity: 0;
}

.moon-3d-section .shooting-star-3 {
  position: absolute;
  top: 60%;
  left: 5%;
  width: 2.5px;
  height: 90px;
  background: 
    linear-gradient(-45deg, 
      #ffffff 0%, 
      rgba(255,255,255,0.7) 30%, 
      rgba(255,255,255,0.4) 70%, 
      rgba(255,255,255,0.1) 90%, 
      transparent 100%);
  border-radius: 5px;
  box-shadow: 
    0 0 12px rgba(255,255,255,0.6),
    0 0 24px rgba(255,255,255,0.2);
  animation: moonShootingStar3 30s linear infinite;
  animation-delay: 12s;
  transform: rotate(-45deg);
  transform-origin: center;
  z-index: 2;
  opacity: 0;
}

.moon-3d-section .shooting-star-4 {
  position: absolute;
  top: 40%;
  right: 10%;
  width: 3.5px;
  height: 120px;
  background: 
    linear-gradient(-45deg, 
      #ffffff 0%, 
      rgba(255,255,255,0.85) 15%, 
      rgba(255,255,255,0.6) 45%, 
      rgba(255,255,255,0.25) 75%, 
      transparent 100%);
  border-radius: 7px;
  box-shadow: 
    0 0 18px rgba(255,255,255,0.75),
    0 0 35px rgba(255,255,255,0.35);
  animation: moonShootingStar4 22s linear infinite;
  animation-delay: 15s;
  transform: rotate(-45deg);
  transform-origin: center;
  z-index: 2;
  opacity: 0;
}

.moon-3d-section .shooting-star-5 {
  position: absolute;
  top: 80%;
  left: 70%;
  width: 2px;
  height: 80px;
  background: 
    linear-gradient(-45deg, 
      #ffffff 0%, 
      rgba(255,255,255,0.75) 35%, 
      rgba(255,255,255,0.4) 75%, 
      transparent 100%);
  border-radius: 4px;
  box-shadow: 
    0 0 10px rgba(255,255,255,0.65),
    0 0 20px rgba(255,255,255,0.25);
  animation: moonShootingStar5 18s linear infinite;
  animation-delay: 3s;
  transform: rotate(-45deg);
  transform-origin: center;
  z-index: 2;
  opacity: 0;
}

/* Animações das estrelas cadentes */
@keyframes moonShootingStar1 {
  0% {
    transform: translateX(-80px) translateY(-80px) rotate(-45deg);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  15% {
    transform: translateX(100px) translateY(100px) rotate(-45deg);
    opacity: 1;
  }
  45% {
    transform: translateX(400px) translateY(400px) rotate(-45deg);
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateX(600px) translateY(600px) rotate(-45deg);
    opacity: 0;
  }
}

@keyframes moonShootingStar2 {
  0% {
    transform: translateX(-100px) translateY(-100px) rotate(-45deg);
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  12% {
    transform: translateX(80px) translateY(80px) rotate(-45deg);
    opacity: 1;
  }
  50% {
    transform: translateX(350px) translateY(350px) rotate(-45deg);
    opacity: 1;
  }
  96% {
    opacity: 1;
  }
  100% {
    transform: translateX(620px) translateY(620px) rotate(-45deg);
    opacity: 0;
  }
}

@keyframes moonShootingStar3 {
  0% {
    transform: translateX(-70px) translateY(-70px) rotate(-45deg);
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  10% {
    transform: translateX(60px) translateY(60px) rotate(-45deg);
    opacity: 1;
  }
  55% {
    transform: translateX(300px) translateY(300px) rotate(-45deg);
    opacity: 1;
  }
  97% {
    opacity: 1;
  }
  100% {
    transform: translateX(450px) translateY(450px) rotate(-45deg);
    opacity: 0;
  }
}

@keyframes moonShootingStar4 {
  0% {
    transform: translateX(-90px) translateY(-90px) rotate(-45deg);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  18% {
    transform: translateX(100px) translateY(100px) rotate(-45deg);
    opacity: 1;
  }
  48% {
    transform: translateX(380px) translateY(380px) rotate(-45deg);
    opacity: 1;
  }
  94% {
    opacity: 1;
  }
  100% {
    transform: translateX(580px) translateY(580px) rotate(-45deg);
    opacity: 0;
  }
}

@keyframes moonShootingStar5 {
  0% {
    transform: translateX(-60px) translateY(-60px) rotate(-45deg);
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  20% {
    transform: translateX(50px) translateY(50px) rotate(-45deg);
    opacity: 1;
  }
  60% {
    transform: translateX(250px) translateY(250px) rotate(-45deg);
    opacity: 1;
  }
  93% {
    opacity: 1;
  }
  100% {
    transform: translateX(380px) translateY(380px) rotate(-45deg);
    opacity: 0;
  }
}

.moon-container {
  max-width: 600px;
  margin: 0.5rem auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 1670px) {
  .moon-container {
    max-width: 400px;
  }
}

@media screen and (max-width: 1600px) {
  .moon-container {
    max-width: 300px;
  }
  .moon-text-overlay {
    top: 46%;
    left: 0%;
    max-width: 800px;
  }
}

@media screen and (max-width: 1500px) {
  .moon-container {
    max-width: 300px;
  }
  .moon-text-overlay {
    top: 46%;
    left: 0%;
    max-width: 800px;
  }
  .moon-text-overlay .moon-title {
    font-size: 3.5rem !important;
  }
  .moon-text-overlay .moon-description {
    font-size: 1.2rem !important;
  }
}

@media screen and (max-width: 1400px) {
  .moon-container {
    max-width: 200px;
  }
  .moon-text-overlay {
    top: 46%;
    left: 0%;
    max-width: 800px;
  }
}

@media screen and (max-width: 1350px) {
  .moon-container {
    max-width: 200px;
  }
  .moon-text-overlay {
    top: 46%;
    left: 0%;
    max-width: 700px;
  }
}

@media screen and (max-width: 1300px) {
  .moon-container {
    max-width: 100px;
  }
  .moon-text-overlay {
    top: 46%;
    left: 0%;
    max-width: 700px;
  }
}

@media screen and (max-width: 1250px) {
  .moon-container {
    max-width: 50px;
  }
  .moon-text-overlay {
    top: 46%;
    left: -1%;
    max-width: 700px;
  }
}

@media screen and (max-width: 1200px) {
  .moon-container {
    max-width: 0px;
  }
  .moon-text-overlay {
    top: 46%;
    left: -1%;
    max-width: 600px;
  }
  .moon-text-overlay .moon-title {
    font-size: 3rem !important;
  }
  .moon-text-overlay .moon-description {
    font-size: 1.2rem !important;
  }
}

@media screen and (max-width: 1100px) {
  .moon-container {
    max-width: 0px;
  }
  .moon-text-overlay {
    top: 49%;
    left: -1%;
    max-width: 600px;
  }
  .moon-title {
    font-size: 2.5rem !important;
    max-width: 500px;
  }
  .moon-text-overlay .moon-description {
    font-size: 1.5rem !important;
    max-width: 500px;
  }
}

@media screen and (max-width: 1050px) {
  .moon-text-overlay {
    top: 49%;
    left: -1%;
    max-width: 600px;
  }
  .moon-title {
    font-size: 2.2rem !important;
    max-width: 400px !important;
  }
  .moon-text-overlay .moon-description {
    font-size: 1.2rem !important;
    max-width: 450px;
  }
  .moon-buttons {
    gap: 1rem !important;
    margin-top: 1.5rem !important;
  }
  
  .btn-moon-dark,
  .btn-contact-dark {
    padding: 14px 28px !important;
    font-size: 16px !important;
  }
  
  .btn-text-moon,
  .btn-text-contact {
    font-size: 14px !important;
    gap: 8px !important;
  }
}

@media screen and (max-width: 1000px) {
  .moon-text-overlay {
    margin-top: 50px !important;
  }

  .moon-text-overlay {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    max-width: 100%;
    text-align: center;
    padding: 2rem 1rem;
  }
  
  .moon-text-overlay .moon-badge {
    margin: 0 auto 2rem auto;
    justify-content: center;
  }
  
  .moon-text-overlay .moon-title {
    font-size: 2.5rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  
  .moon-text-overlay .moon-description {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  
  .moon-text-overlay .moon-buttons {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  .moon-3d-wrapper,
  #moon-3d-container {
    display: none !important;
  }
}

.moon-content {
  z-index: 10;
}

.moon-badge {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 8px 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem !important;
  position: relative;
  overflow: hidden;
}

.badge-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.moon-badge span {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.moon-title {
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1.2;
  max-width: 700px;
  margin-bottom: 1.5rem;
}

.title-main {
  color: #ffffff;
  display: block;
}

.title-accent {
  background: linear-gradient(135deg, #ffffff, #cccccc, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.moon-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.4rem !important;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

.moon-buttons {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* Botão escuro baseado no btn-primary-services */
.btn-moon-dark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  border: 2px solid #333333;
  border-radius: 50px;
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 
              0 0 0 1px rgba(255, 255, 255, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-moon-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(147, 51, 234, 0.1), transparent, rgba(147, 51, 234, 0.1));
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: 50px;
}

.btn-moon-dark:hover::before {
  opacity: 1;
}

.btn-moon-dark:hover {
  transform: translateY(-6px) scale(1.05);
  border-color: #9333ea;
  box-shadow: 0 12px 40px rgba(147, 51, 234, 0.3), 
              0 0 0 1px rgba(147, 51, 234, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-text-moon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
}

.btn-icon-moon {
  width: 25px !important;
  height: auto !important;
  transition: transform 0.3s ease;
  filter: brightness(0) saturate(100%) invert(100%); /* Torna o ícone branco */
}

.btn-moon-dark:hover .btn-icon-moon {
  transform: translateX(4px) rotate(15deg);
}

.btn-background-moon {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(147, 51, 234, 0.05), rgba(147, 51, 234, 0.02));
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.btn-moon-dark:hover .btn-background-moon {
  opacity: 1;
}

/* Botão de contato escuro */
.btn-contact-dark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  border: 2px solid #333333;
  border-radius: 50px;
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 
              0 0 0 1px rgba(255, 255, 255, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-contact-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(34, 197, 94, 0.1), transparent, rgba(34, 197, 94, 0.1));
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: 50px;
}

.btn-contact-dark:hover::before {
  opacity: 1;
}

.btn-contact-dark:hover {
  transform: translateY(-6px) scale(1.05);
  border-color: #22c55e;
  box-shadow: 0 12px 40px rgba(34, 197, 94, 0.3), 
              0 0 0 1px rgba(34, 197, 94, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-text-contact {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
}

.btn-icon-contact {
  font-size: 22px;
  color: #ffffff;
  transition: all 0.3s ease;
}

.btn-contact-dark:hover .btn-icon-contact {
  transform: rotate(15deg) scale(1.1);
  color: #22c55e;
}

.btn-background-contact {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(34, 197, 94, 0.05), rgba(34, 197, 94, 0.02));
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.btn-contact-dark:hover .btn-background-contact {
  opacity: 1;
}

.moon-3d-wrapper {
  position: relative;
  height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999 !important;
}

.moon-3d-wrapper, #moon-3d-container {
  width: 100vw;         /* Ocupa toda a largura da tela */
  height: 100vh;        /* Ocupa toda a altura da tela */
  max-width: 100vw;
  max-height: 100vh;
  overflow: visible;    /* Não corta nada */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* Ou o fundo desejado */
  z-index: 9999 !important;
}

canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain; /* Garante que não estique/corte */
  background: transparent;
}

#moon-3d-container {
  transform: translateX(-190px); /* Move todo o canvas para a esquerda */
  filter: brightness(0.95) drop-shadow(-25px 35px 50px rgba(0, 0, 0, 0.9)) drop-shadow(-40px 60px 80px rgba(0, 0, 0, 0.7)) drop-shadow(-15px 25px 35px rgba(0, 0, 0, 0.95)) drop-shadow(-60px 90px 120px rgba(0, 0, 0, 0.5));
}

.moon-glow-effect {
  display: none; /* Removendo o brilho para deixar a lua fosca */
}

@keyframes glow {
  0% {
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
      transform: translate(-50%, -50%) scale(1);
  }
  100% {
      box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%) scale(1.1);
  }
}

.space-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.space-particles .particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

.space-particles .particle:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.space-particles .particle:nth-child(2) {
  top: 60%;
  left: 20%;
  animation-delay: 1s;
}

.space-particles .particle:nth-child(3) {
  top: 30%;
  right: 15%;
  animation-delay: 2s;
}

.space-particles .particle:nth-child(4) {
  bottom: 20%;
  right: 25%;
  animation-delay: 3s;
}

.space-particles .particle:nth-child(5) {
  bottom: 40%;
  left: 30%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% {
      transform: translateY(0px);
      opacity: 0.5;
  }
  50% {
      transform: translateY(-20px);
      opacity: 1;
  }
}

/* Loading indicator for 3D model */
.moon-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 1.2rem;
  text-align: center;
  z-index: 10;
}

.moon-loading::after {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  margin: 20px auto;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsividade */
@media screen and (max-width: 768px) {
  .moon-container {
      grid-template-columns: 1fr;
      gap: 3rem;
      text-align: center;
  }
  
  .moon-title {
      font-size: 2.5rem;
  }
  
  .moon-3d-wrapper {
      height: 400px;
  }
  
  .moon-buttons {
      justify-content: center;
      gap: 1rem;
  }
  
  .btn-moon-dark,
  .btn-contact-dark {
      padding: 16px 28px;
      font-size: 16px;
      justify-content: center;
  }
  
  .btn-text-moon,
  .btn-text-contact {
      font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  .moon-3d-section {
      padding: 4rem 0;
  }
  
  .moon-container {
      padding: 0 1rem;
  }
  
  .moon-title {
      font-size: 2rem;
  }
  
  .moon-3d-wrapper {
      height: 300px;
  }
}

/* ... existing code ... */

/* Adicione estas media queries no final do arquivo ou junto com as outras media queries mobile */


@media screen and (max-width: 1020px) {
  .hero-image {
    display: none !important;
  }
}

/* Mobile - Essence cards em coluna única e remover hero-image */
@media screen and (max-width: 767px) {
  /* Essence cards em coluna única */
  .essence-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    margin-top: 2rem !important;
    margin-bottom: 3rem !important;
  }
  
  /* Ajustar hero-section para ocupar toda a largura sem a imagem */
  .hero-section {
    flex-direction: column !important;
  }

}

/* Ajustes adicionais para telas muito pequenas */
@media screen and (max-width: 480px) {
  .essence-cards {
    gap: 1rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 2rem !important;
  }
  
  .essence-card {
    padding: 1.5rem !important;
  }
}

/* ... existing code ... */

/* Mobile - Timeline adjustments */
@media screen and (max-width: 767px) {
  /* Remover timeline-line no mobile */
  .timeline-line {
    display: none !important;
  }
  
  /* Mover step-content mais para a esquerda */
  .step-content {
    margin-left: -30px !important;
    padding-left: 0rem !important;
    padding-right: 0rem !important;
    text-align: left !important;
  }
  
  /* Ajustar timeline-step para ocupar toda a largura */
  .timeline-step {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Remover alinhamento à direita no mobile */
  .timeline-step-left .step-content,
  .timeline-step-left .step-header,
  .timeline-step-left .step-tags {
    text-align: left !important;
    justify-content: flex-start !important;
  }
  
  /* Ajustar header para alinhar à esquerda */
  .timeline-step-left .step-header {
    flex-direction: row !important;
  }
  
  /* Ajustar tags para alinhar à esquerda */
  .timeline-step-left .step-tags {
    justify-content: flex-start !important;
  }
  
  /* Remover timeline-circle no mobile (se existir) */
  .timeline-circle {
    display: none !important;
  }
  
  /* Ajustar espaçamento geral */
  .timeline-steps {
    gap: 2rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ... existing code ... */

/* Mobile - Aumentar largura das descrições */
@media screen and (max-width: 767px) {
  /* Aumentar largura do process-description */
  .process-description {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: -50px !important;
  }
  .process-content {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* Ajustes adicionais para telas muito pequenas */
@media screen and (max-width: 480px) {
  .process-description {
    font-size: 1.125rem !important;
    line-height: 1.7 !important;
  }
  .process-content {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* ... existing code ... */

/* Mobile - Diminuir tamanho dos títulos */
@media screen and (max-width: 767px) {
  /* Diminuir testimonials-main-title */
  .testimonials-main-title {
    font-size: 3em !important;
    margin-bottom: 1rem !important;
    margin-top: -70px !important;
  }

  .testimonials-section {
    margin-top: -130px !important;
    margin-bottom: -200px !important;
  }
  
  /* Diminuir main-title */
  .title-primary, .title-secondary {
    font-size: 3rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Diminuir header-description */
  .header-description {
    font-size: 1.2rem !important;
    max-width: 100% !important;
    line-height: 1.5 !important;
  }
}

/* ... existing code ... */

/* Mobile - Diminuir brilho do "Projeto Concluído" */
@media screen and (max-width: 767px) {
  /* Diminuir o brilho do final-badge no mobile */
  .final-badge::before {
    background: radial-gradient(ellipse 100% 80%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.04) 70%, transparent 90%) !important;
    filter: blur(15px) !important;
    animation: none !important; /* Remove a animação de pulse no mobile */
  }
  
  /* Ajustar o tamanho do brilho no mobile */
  .final-badge::before {
    top: -15px !important;
    bottom: -15px !important;
    left: -30px !important;
    right: -30px !important;
  }
}

/* Mobile - Diminuir ainda mais para telas muito pequenas */
@media screen and (max-width: 480px) {
  /* Diminuir ainda mais o brilho */
  .final-badge::before {
    background: radial-gradient(ellipse 80% 60%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.02) 70%, transparent 90%) !important;
    filter: blur(10px) !important;
  }
  
  /* Ajustar ainda mais o tamanho do brilho */
  .final-badge::before {
    top: -10px !important;
    bottom: -10px !important;
    left: -20px !important;
    right: -20px !important;
  }
}

/* ... existing code ... */

/* Mobile - Correção para testimonials-wrapper */
@media screen and (max-width: 767px) {
  /* Garantir que testimonials-wrapper seja visível */
  .testimonials-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 1rem !important;
  }
  
  /* Garantir que testimonials-grid seja visível */
  .testimonials-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Mostrar apenas testimonials ativos no mobile */
  .testimonial-card {
    display: none !important;
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: all 0.3s ease !important;
  }
  
  .testimonial-card.active {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  
  /* Garantir que testimonials-container seja visível */
  .testimonials-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Garantir que testimonials-section seja visível */
  .testimonials-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 4rem 1rem !important;
  }
  
  /* Garantir que testimonials-header seja visível */
  .testimonials-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Garantir que progress-indicator seja visível */
  .progress-indicator {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin-top: 2rem !important;
  }
}

/* ... existing code ... */

/* ... existing code ... */

/* Mobile - Correção para testimonials e setas */
@media screen and (max-width: 767px) {
  
  /* Progress indicator */
  .progress-indicator {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 80px !important;
    margin: 2rem 0 3rem 0; /* Mais espaço embaixo */
  }
  
  /* Navigation arrows - mostrar no mobile */
  .nav-arrow {
    display: flex;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: 10;
  }
  
  .nav-arrow:hover {
    background: rgba(255,255,255,0.1);
    color: white;
    transform: scale(1.1);
  }
  
  .nav-arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .nav-arrow svg {
    width: 1rem;
    height: 1rem;
  }

  .nav-prev, .nav-next {
    bottom: 8rem;
  }
  
  /* Posicionar setas mais para baixo e para os lados */
  .nav-prev {
    position: absolute;
    left: 2rem; /* Mais para a esquerda */
    margin: 0;
  }
  
  .nav-next {
    position: absolute;
    right: 2rem; /* Mais para a direita */
    margin: 0;
  }
}

/* ... existing code ... */

/* Mobile - Diminuir altura dos cards de avaliações */
@media screen and (max-width: 767px) {
  /* Testimonials wrapper */
  .testimonials-wrapper {
    display: block;
    margin: 0 1rem;
  }
  
  /* Testimonials grid */
  .testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem; /* Reduzir gap entre cards */
  }
  
  /* Testimonial cards - diminuir altura */
  .testimonial-card {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    min-height: 250px; /* Reduzir altura mínima (era 350px) */
    padding: 1.5rem; /* Reduzir padding (era 2rem) */
  }
  
  .testimonial-card.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Reduzir espaçamentos internos */
  .testimonial-content {
    flex: 1;
    margin-bottom: 1rem; /* Reduzir (era 2rem) */
  }
  
  .testimonial-text {
    color: white;
    font-size: 1.1rem; /* Reduzir tamanho da fonte (era 1.25rem) */
    line-height: 1.5; /* Reduzir line-height (era 1.6) */
    font-weight: 300;
    transition: all 0.5s ease;
  }
  
  .rating {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem; /* Reduzir (era 1.5rem) */
  }
  
  .rating-star {
    width: 1rem; /* Reduzir (era 1.25rem) */
    height: 1rem; /* Reduzir (era 1.25rem) */
    color: #fbbf24;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.5));
  }
  
  /* Reduzir altura do author-info */
  .author-info {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Reduzir (era 1rem) */
    transition: all 0.5s ease;
    margin-top: auto;
    padding-top: 1rem; /* Reduzir (era 1.5rem) */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* Reduzir tamanho do avatar */
  .avatar-img {
    position: relative;
    width: 3rem; /* Reduzir (era 4rem) */
    height: 3rem; /* Reduzir (era 4rem) */
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.2);
    transition: all 0.5s ease;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  }
  
  /* Reduzir tamanho dos textos do autor */
  .author-name {
    font-size: 1rem; /* Reduzir se necessário */
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem; /* Reduzir (era 0.5rem) */
  }
  
  .author-role {
    font-size: 0.875rem; /* Reduzir (era 1rem) */
    color: rgba(255,255,255,0.7);
  }
  
  /* Reduzir tamanho do quote icon */
  .quote-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 2rem; /* Reduzir (era 2.5rem) */
    height: 2rem; /* Reduzir (era 2.5rem) */
    color: rgba(255,255,255,0.2);
    transition: all 0.5s ease;
  }
  
  /* Testimonials container */
  .testimonials-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  
  /* Testimonials section */
  .testimonials-section {
    padding: 3rem 1rem; /* Reduzir padding vertical (era 4rem) */
  }
  .google-reviews-button-container {
    margin-top: -200px;
}
}

@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

.rock-wrap.faq-page, .rock-wrap-overlay, .bg-wrapper {
  display: none; /* Oculta completamente */
}

@media (max-width: 900px) {
  .stats-grid {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1em !important;
  }
  
  .stat-item {
    flex: 1;
    min-width: 120px;
    max-width: 150px;
    margin-bottom: 1.5em !important;
  }
}

/* ===== Container de Rating e Reviews ===== */
.rating-and-reviews-container {
  position: relative;
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.rating-badge {
  display: inline-block;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.compact-google-reviews-container {
  position: absolute !important;
  top: 50% !important;
  right: 20px !important;
  transform: translateY(-50%) !important;
  z-index: 999 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ===== REMOVIDO: CSS ANTIGO DO compact-google-reviews-btn ===== */

/* ===== Seção de Logos das Empresas ===== */
.enterprise-logos-showcase {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  margin-top: -17rem;
  margin-bottom: -10rem;
}

.enterprise-logos-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.logos-container-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.logos-infinite-scroll {
  position: relative;
  overflow: hidden;
  mask: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

.brand-carousel-track {
  display: flex;
  align-items: center;
  animation: brandScrollMotion 30s linear infinite;
  width: calc(200% + 80px);
}

.company-logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  height: 120px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.company-logo-item:hover {
  transform: scale(1.1);
}

.brand-image {
  max-width: 120px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(0.7) contrast(1.2);
  transition: all 0.4s ease;
  opacity: 0.6;
}

.company-logo-item:hover .brand-image {
  filter: grayscale(0%) brightness(1) contrast(1);
  opacity: 1;
  transform: scale(1.05);
}

@keyframes brandScrollMotion {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ===== Responsividade para Logos ===== */
@media (max-width: 1024px) {
  .enterprise-logos-showcase {
    padding: 60px 0;
  }
  
  .company-logo-item {
    padding: 0 30px;
    height: 100px;
  }
  
  .brand-image {
    max-width: 100px;
    max-height: 50px;
  }
}

@media (max-width: 768px) {
  .enterprise-logos-showcase {
    padding: 50px 0;
  }
  
  .brand-carousel-track {
    animation: brandScrollMotion 25s linear infinite;
  }
  
  .company-logo-item {
    padding: 0 25px;
    height: 80px;
  }
  
  .brand-image {
    max-width: 80px;
    max-height: 40px;
  }
}

@media (max-width: 480px) {
  .enterprise-logos-showcase {
    padding: 40px 0;
  }
  
  .brand-carousel-track {
    animation: brandScrollMotion 20s linear infinite;
  }
  
  .company-logo-item {
    padding: 0 20px;
    height: 70px;
  }
  
  .brand-image {
    max-width: 70px;
    max-height: 35px;
  }
}

/* ===== POSICIONAMENTO FINAL AJUSTADO ===== */
.rating-and-reviews-container {
  position: relative !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 25px !important;
  flex-wrap: nowrap !important;
}

.rating-badge {
  display: inline-block !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  order: 1 !important;
}

.compact-google-reviews-container {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  order: 2 !important;
}

/* ===== ELEGANT GOOGLE REVIEW BUTTON - DESIGN PRETO E BRANCO PREMIUM ===== */

@keyframes elegantTextShimmer {
  0% { background-position: -300% 0; }
  50% { background-position: 300% 0; }
  100% { background-position: -300% 0; }
}

@keyframes elegantPulse {
  0%, 100% { 
    box-shadow: 
      0 15px 40px rgba(0, 0, 0, 0.8),
      0 0 0 1px rgba(255, 255, 255, 0.12),
      inset 0 2px 0 rgba(255, 255, 255, 0.25),
      inset 0 -2px 0 rgba(0, 0, 0, 0.4),
      0 0 60px rgba(255, 255, 255, 0.05);
  }
  50% { 
    box-shadow: 
      0 20px 50px rgba(0, 0, 0, 0.9),
      0 0 0 1px rgba(255, 255, 255, 0.18),
      inset 0 3px 0 rgba(255, 255, 255, 0.35),
      inset 0 -3px 0 rgba(0, 0, 0, 0.5),
      0 0 80px rgba(255, 255, 255, 0.08);
  }
}

@keyframes elegantFloat {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-3px) scale(1.02); }
}

.elegant-google-review-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 16px 32px !important;
  background: linear-gradient(145deg, #0a0a0a 0%, #1c1c1c 30%, #2a2a2a 60%, #1c1c1c 90%, #0a0a0a 100%) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 35px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4),
    0 0 60px rgba(255, 255, 255, 0.05) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
  min-width: 180px !important;
  white-space: nowrap !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(15px) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  animation: elegantPulse 4s ease-in-out infinite, elegantFloat 6s ease-in-out infinite !important;
}

.elegant-google-review-button:hover::before {
  opacity: 1 !important;
}

.elegant-google-review-button:hover::after {
  left: 150% !important;
}



.elegant-google-review-button .google-icon {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  filter: 
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6)) 
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.4)) !important;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
  z-index: 2 !important;
  position: relative !important;
}

.elegant-google-review-button span {
  font-size: 17px !important;
  font-weight: 800 !important;
  text-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(255, 255, 255, 0.4) !important;
  letter-spacing: 1.2px !important;
  position: relative !important;
  z-index: 2 !important;
  background: linear-gradient(45deg, 
    #ffffff 0%, 
    #f5f5f5 25%, 
    #ffffff 50%, 
    #f5f5f5 75%, 
    #ffffff 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  background-size: 300% 300% !important;
  animation: elegantTextShimmer 4s ease-in-out infinite !important;
}

/* ===== Fim do Design Premium ===== */

/* ===== MEDIA QUERIES RESPONSIVAS PARA ELEGANT GOOGLE REVIEW BUTTON ===== */

@media (max-width: 1024px) {
  .elegant-google-review-button {
    padding: 14px 28px !important;
    font-size: 16px !important;
    gap: 12px !important;
    min-width: 160px !important;
    border-radius: 32px !important;
    box-shadow: 
      0 12px 35px rgba(0, 0, 0, 0.7),
      0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 2px 0 rgba(255, 255, 255, 0.2),
      inset 0 -2px 0 rgba(0, 0, 0, 0.35),
      0 0 50px rgba(255, 255, 255, 0.04) !important;
  }
  
  .elegant-google-review-button:hover {
    transform: translateY(-4px) scale(1.06) !important;
    box-shadow: 
      0 20px 50px rgba(0, 0, 0, 0.85),
      0 0 0 1px rgba(255, 255, 255, 0.25),
      inset 0 3px 0 rgba(255, 255, 255, 0.35),
      inset 0 -3px 0 rgba(0, 0, 0, 0.55),
      0 0 80px rgba(255, 255, 255, 0.12) !important;
  }
  
  .elegant-google-review-button .google-icon {
    width: 20px !important;
    height: 20px !important;
  }
  
  .elegant-google-review-button span {
    font-size: 16px !important;
  }
}

@media (max-width: 768px) {
  .elegant-google-review-button {
    padding: 12px 24px !important;
    font-size: 15px !important;
    gap: 10px !important;
    min-width: 140px !important;
    border-radius: 28px !important;
    box-shadow: 
      0 10px 30px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -1px 0 rgba(0, 0, 0, 0.3),
      0 0 40px rgba(255, 255, 255, 0.03) !important;
  }
  
  .elegant-google-review-button:hover {
    transform: translateY(-3px) scale(1.04) !important;
    box-shadow: 
      0 16px 40px rgba(0, 0, 0, 0.8),
      0 0 0 1px rgba(255, 255, 255, 0.2),
      inset 0 2px 0 rgba(255, 255, 255, 0.3),
      inset 0 -2px 0 rgba(0, 0, 0, 0.5),
      0 0 60px rgba(255, 255, 255, 0.1) !important;
  }
  
  .elegant-google-review-button .google-icon {
    width: 18px !important;
    height: 18px !important;
  }
  
  .elegant-google-review-button span {
    font-size: 15px !important;
    letter-spacing: 1px !important;
  }
}

@media (max-width: 480px) {
  .elegant-google-review-button {
    padding: 10px 20px !important;
    font-size: 14px !important;
    gap: 8px !important;
    min-width: 120px !important;
    border-radius: 25px !important;
    box-shadow: 
      0 8px 25px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      inset 0 -1px 0 rgba(0, 0, 0, 0.25),
      0 0 30px rgba(255, 255, 255, 0.02) !important;
  }
  
  .elegant-google-review-button:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 
      0 12px 30px rgba(0, 0, 0, 0.7),
      0 0 0 1px rgba(255, 255, 255, 0.15),
      inset 0 2px 0 rgba(255, 255, 255, 0.25),
      inset 0 -2px 0 rgba(0, 0, 0, 0.45),
      0 0 45px rgba(255, 255, 255, 0.08) !important;
  }
  
  .elegant-google-review-button .google-icon {
    width: 16px !important;
    height: 16px !important;
  }
  
  .elegant-google-review-button span {
    font-size: 14px !important;
    letter-spacing: 0.8px !important;
  }
}

/* ===== ESTILOS FORÇADOS ===== */
a.elegant-google-review-button,
.compact-google-reviews-container a.elegant-google-review-button,
.rating-and-reviews-container a.elegant-google-review-button {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}

/* Container específico para services */
.services-section .container {
  max-width: 1800px !important;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  z-index: 10;
}

/* ===== NOVAS CORES PARA TIMELINE - ETAPAS ADICIONAIS ===== */

/* Step Icon - Cor Cinza */
.step-icon-gray {
    background: linear-gradient(to bottom right, rgba(107, 114, 128, 0.3), rgba(75, 85, 99, 0.2));
    border-color: rgba(107, 114, 128, 0.3);
    color: #9ca3af;
}

/* Step Tag - Cor Cinza */
.step-tag-gray {
    background: rgba(107, 114, 128, 0.2);
    color: #d1d5db;
    border-color: rgba(107, 114, 128, 0.3);
}

/* Timeline Circle - Cor Cinza */
.circle-gray {
    background: linear-gradient(to bottom right, rgba(107, 114, 128, 0.3), rgba(75, 85, 99, 0.2));
    border-color: rgba(107, 114, 128, 0.3);
    color: #9ca3af;
    position: relative;
}

.circle-gray::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(107, 114, 128, 0.4) 0%, rgba(107, 114, 128, 0.25) 40%, rgba(107, 114, 128, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 5s;
}

/* Circle Ping Animation - Cor Cinza */
.circle-ping-gray {
    border-color: rgba(107, 114, 128, 0.2);
}

/* Step Icons - Novas Cores */
.step-icon-pink {
    background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.3);
    color: #f472b6;
}

.step-icon-indigo {
    background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.3), rgba(79, 70, 229, 0.2));
    border-color: rgba(99, 102, 241, 0.3);
    color: #818cf8;
}

.step-icon-yellow {
    background: linear-gradient(to bottom right, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.2));
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.step-icon-cyan {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(8, 145, 178, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
}

/* Step Tags - Novas Cores */
.step-tag-pink {
    background: rgba(236, 72, 153, 0.2);
    color: #f9a8d4;
    border-color: rgba(236, 72, 153, 0.3);
}

.step-tag-indigo {
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
    border-color: rgba(99, 102, 241, 0.3);
}

.step-tag-yellow {
    background: rgba(245, 158, 11, 0.2);
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.3);
}

.step-tag-cyan {
    background: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.3);
}

/* Timeline Circles - Novas Cores */
.circle-pink {
    background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.3), rgba(219, 39, 119, 0.2));
    border-color: rgba(236, 72, 153, 0.3);
    color: #f472b6;
    position: relative;
}

.circle-pink::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, rgba(236, 72, 153, 0.25) 40%, rgba(236, 72, 153, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 3s;
}

.circle-indigo {
    background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.3), rgba(79, 70, 229, 0.2));
    border-color: rgba(99, 102, 241, 0.3);
    color: #818cf8;
    position: relative;
}

.circle-indigo::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, rgba(99, 102, 241, 0.25) 40%, rgba(99, 102, 241, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 3.5s;
}

.circle-yellow {
    background: linear-gradient(to bottom right, rgba(245, 158, 11, 0.3), rgba(217, 119, 6, 0.2));
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
    position: relative;
}

.circle-yellow::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, rgba(245, 158, 11, 0.25) 40%, rgba(245, 158, 11, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 4s;
}

.circle-cyan {
    background: linear-gradient(to bottom right, rgba(6, 182, 212, 0.3), rgba(8, 145, 178, 0.2));
    border-color: rgba(6, 182, 212, 0.3);
    color: #22d3ee;
    position: relative;
}

.circle-cyan::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, rgba(6, 182, 212, 0.25) 40%, rgba(6, 182, 212, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 4.5s;
}

/* Circle Ping Animations - Novas Cores */
.circle-ping-pink {
    border-color: rgba(236, 72, 153, 0.2);
}

.circle-ping-indigo {
    border-color: rgba(99, 102, 241, 0.2);
}

.circle-ping-yellow {
    border-color: rgba(245, 158, 11, 0.2);
}

.circle-ping-cyan {
    border-color: rgba(6, 182, 212, 0.2);
}

/* Step Labels - Cores para as novas etapas */
.timeline-step:nth-child(7) .step-label {
    color: #f472b6;
}

.timeline-step:nth-child(8) .step-label {
    color: #818cf8;
}

.timeline-step:nth-child(9) .step-label {
    color: #fbbf24;
}

.timeline-step:nth-child(10) .step-label {
    color: #22d3ee;
}

/* ===== CORREÇÕES DAS CORES DOS STEP-LABELS ===== */
/* Etapa 7: Validação Final - Amarelo */
.timeline-step:nth-child(7) .step-label {
    color: #fbbf24 !important;
}

/* Etapa 8: Projeto Concluído - Cinza */
.timeline-step:nth-child(8) .step-label {
    color: #9ca3af !important;
}

/* Etapa 9: Monitoramento - Rosa */
.timeline-step:nth-child(9) .step-label {
    color: #f472b6 !important;
}

/* ===== NOVA COR VERDE ESCURO ===== */
/* Step Icon - Cor Verde Escuro */
.step-icon-darkgreen {
    background: linear-gradient(to bottom right, rgba(5, 150, 105, 0.3), rgba(4, 120, 87, 0.2));
    border-color: rgba(5, 150, 105, 0.3);
    color: #10b981;
}

/* Step Tag - Cor Verde Escuro */
.step-tag-darkgreen {
    background: rgba(5, 150, 105, 0.2);
    color: #6ee7b7;
    border-color: rgba(5, 150, 105, 0.3);
}

/* Timeline Circle - Cor Verde Escuro */
.circle-darkgreen {
    background: linear-gradient(to bottom right, rgba(5, 150, 105, 0.3), rgba(4, 120, 87, 0.2));
    border-color: rgba(5, 150, 105, 0.3);
    color: #10b981;
    position: relative;
}

.circle-darkgreen::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, rgba(5, 150, 105, 0.4) 0%, rgba(5, 150, 105, 0.25) 40%, rgba(5, 150, 105, 0.08) 70%, transparent 90%);
    border-radius: 50%;
    z-index: -1;
    filter: blur(20px);
    animation: pulseGlow 3s ease-in-out infinite;
    animation-delay: 5.5s;
}

/* Circle Ping Animation - Cor Verde Escuro */
.circle-ping-darkgreen {
    border-color: rgba(5, 150, 105, 0.2);
}

/* Step Label - Cor Verde Escuro */
.timeline-step:nth-child(10) .step-label {
    color: #10b981 !important;
}

/* ===== CORREÇÕES FINAIS DOS STEP-LABELS ===== */
/* Forçando as cores corretas para as etapas 8 e 10 */
.timeline-step:nth-child(8) .step-label {
    color: #9ca3af !important; /* Cinza - Etapa 8: Projeto Concluído */
}

.timeline-step:nth-child(10) .step-label {
    color: #10b981 !important; /* Verde Escuro - Etapa 10: Suporte Contínuo */
}

/* Garantindo que as outras etapas também estejam corretas */
.timeline-step:nth-child(7) .step-label {
    color: #fbbf24 !important; /* Amarelo - Etapa 7: Validação Final */
}

.timeline-step:nth-child(9) .step-label {
    color: #f472b6 !important; /* Rosa - Etapa 9: Monitoramento */
}

/* ===== CORREÇÕES FINAIS DOS STEP-LABELS ===== */

.timeline-step:nth-child(10) .step-label {
    color: #9ca3af !important; /* Cinza - Etapa 8: Projeto Concluído */
}

.timeline-step:nth-child(8) .step-label {
    color: #10b981 !important; /* Verde Escuro - Etapa 10: Suporte Contínuo */
}