/**

 * HNG Desenvolvimentos - Main Stylesheet

 * Enhanced UI/UX with modern animations and effects

 */



/* ===== CSS Variables ===== */

:root {

    --brand-black: #050505;

    --brand-panel: #0a0a0a;

    --neon-green: #2AFFA3;

    --brand-blue: #2984F1;

    --accent-cyan: #22D3EE;

    --gray-50: #f9fafb;

    --gray-400: #9ca3af;

    --gray-500: #6b7280;

    --gray-600: #4b5563;

    

    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    --transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    

    --shadow-neon: 0 0 20px rgba(42, 255, 163, 0.3);

    --shadow-neon-lg: 0 0 40px rgba(42, 255, 163, 0.5);

    --shadow-blue-glow: 0 10px 30px rgba(41, 132, 241, 0.3);

    --shadow-blue-glow-lg: 0 20px 50px rgba(41, 132, 241, 0.5);

}



/* ===== Reset & Base Styles ===== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

/* ===== Status Badge Green Dot ===== */
.status-dot {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

.status-dot-ping {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background-color: var(--neon-green);
    opacity: 0.75;
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.status-dot-core {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: var(--neon-green);
}

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

/* Global smooth transitions for all interactive elements */
*, *::before, *::after {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Disable transitions for elements that shouldn't animate */
[class*="animate-"], 
.no-transition,
video, 
audio, 
canvas {
    transition-property: none;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    /* Smooth scrolling for the entire page */
    overflow-x: hidden;
}

/* Smooth scrolling with better performance */
html, body {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
}

/* Custom scrollbar for better UX */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--brand-black);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--neon-green) 0%, var(--brand-blue) 100%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neon-green);
}

body {
    background-color: var(--brand-black);
    color: #ffffff;

    font-family: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* ===== Typography ===== */

h1, h2, h3, h4, h5, h6 {

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -0.02em;

}



code, pre {

    font-family: 'Fira Code', 'Courier New', monospace;

}



/* ===== Glass Morphism Effects ===== */

.glass-nav {

    background: rgba(10, 10, 10, 0.7);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.glass-nav.scrolled {

    background: rgba(10, 10, 10, 0.95);

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

}



.glass-card {

    background: rgba(255, 255, 255, 0.03);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 20px;

    margin-bottom: 20px;

    padding: 10px;

}



.grid {

    display: grid;

    justify-content: center;

    gap: 15px;

}



.section-wrapper {

    max-width: 72rem; /* ~1152px */

    margin-left: auto;

    margin-right: auto;

    text-align: center;

    padding-left: 1.25rem;

    padding-right: 1.25rem;

}



.section-badge {

    display: inline-flex;

    align-items: center;

    gap: .5rem;

    padding: .5rem 1.5rem;

    border-radius: 999px;

    font-size: .75rem;

    font-weight: 700;

    letter-spacing: .05em;

    text-transform: uppercase;

    margin-bottom: 2rem;

}



.section-title {

    font-weight: 800;

    line-height: 1.15;

    margin-bottom: 2.75rem;

}



.section-title span.gradient {

    background: linear-gradient(90deg,var(--neon-green),var(--brand-blue),var(--accent-cyan));

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}



.section-subtitle {

    font-size: 1.25rem;

    line-height: 1.6;

    color: #d1d5db;

    max-width: 54rem;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 3.5rem;

    font-weight: 300;

}



@media (min-width: 768px) {

    .section-title { font-size: 3.5rem; }

    .section-subtitle { font-size: 1.375rem; }

}



@media (min-width: 1024px) {

    .section-title { font-size: 4.25rem; }

}



.glass-card:hover {

    background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.055) 100%);

    border-color: rgba(255,255,255,0.18);

    transform: translateY(-6px);

    box-shadow: 0 10px 30px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,0.05);

}



/* ===== Background Effects ===== */

.bg-grid-pattern {

    background-image: 

        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);

    background-size: 50px 50px;

}



/* ===== Animations ===== */

@keyframes float {

    0%, 100% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-20px);

    }

}



@keyframes pulse-slow {

    0%, 100% {

        opacity: 0.3;

        transform: scale(1);

    }

    50% {

        opacity: 0.5;

        transform: scale(1.05);

    }

}



@keyframes fade-in-up {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes particle-float {

    0%, 100% {

        transform: translate(0, 0) scale(1);

        opacity: 0.3;

    }

    50% {

        transform: translate(var(--tx), var(--ty)) scale(1.2);

        opacity: 0.6;

    }

}



.animate-float {

    animation: float 6s ease-in-out infinite;

}



.animate-pulse-slow {

    animation: pulse-slow 4s ease-in-out infinite;

}



.animate-fade-in-up {

    animation: fade-in-up 1s ease-out forwards;

}



.animate-bounce {

    animation: bounce 2s infinite;

}



@keyframes bounce {

    0%, 100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

}

/* ===== Enhanced Scroll Behavior ===== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* Smooth scroll with easing for browsers that support it */
@supports (scroll-behavior: smooth) {
    html {
        scroll-behavior: smooth;
    }
}

/* ===== Mobile Menu Animations ===== */
@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-down {
    animation: slide-down 0.3s ease-out forwards;
}

/* ===== Enhanced Entry Animations ===== */
@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-scale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes blur-in {
    from {
        opacity: 0;
        filter: blur(10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes rotate-in {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

@keyframes text-reveal {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green);
    }
    50% {
        box-shadow: 0 0 20px var(--neon-green), 0 0 40px var(--neon-green);
    }
}

.animate-fade-in-left {
    animation: fade-in-left 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-in-right {
    animation: fade-in-right 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-in-scale {
    animation: fade-in-scale 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-blur-in {
    animation: blur-in 0.8s ease-out forwards;
}

.animate-rotate-in {
    animation: rotate-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-glow-pulse {
    animation: glow-pulse 2s ease-in-out infinite;
}

/* Animation delays for staggered effects */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Initially hidden for animation */
.animate-on-scroll {
    opacity: 0;
}

.animate-on-scroll.animated {
    opacity: 1;
}

/* ===== Enhanced Hover Effects ===== */

/* Magnetic hover effect for buttons */
.hover-magnetic {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-magnetic:hover {
    transform: translateY(-3px);
}

/* Glow effect on hover */
.hover-glow {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(42, 255, 163, 0.4), 0 10px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* Scale up effect */
.hover-scale {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Lift effect with shadow */
.hover-lift {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Border glow effect */
.hover-border-glow {
    position: relative;
    transition: border-color 0.3s ease;
}

.hover-border-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--neon-green), var(--brand-blue), var(--accent-cyan));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.hover-border-glow:hover::before {
    opacity: 1;
}

/* Text shimmer effect on hover */
.hover-shimmer {
    position: relative;
    overflow: hidden;
}

.hover-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.hover-shimmer:hover::after {
    left: 100%;
}

/* Icon rotation on hover */
.hover-icon-rotate svg,
.hover-icon-rotate i {
    transition: transform 0.3s ease;
}

.hover-icon-rotate:hover svg,
.hover-icon-rotate:hover i {
    transform: rotate(15deg);
}

/* Underline animation */
.hover-underline {
    position: relative;
}

.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-green), var(--brand-blue));
    transition: width 0.3s ease;
}

.hover-underline:hover::after {
    width: 100%;
}

/* Card tilt effect */
.hover-tilt {
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
}

.hover-tilt:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-5px);
}

/* Button press effect */
.hover-press {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hover-press:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(42, 255, 163, 0.3);
}

.hover-press:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(42, 255, 163, 0.2);
}

/* ===== Link hover effects ===== */
a {
    transition: color 0.3s ease;
}

/* ===== Button enhanced styles ===== */
.btn-primary {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(42, 255, 163, 0.4);
}



/* ===== Floating Particles ===== */

.particle {

    position: absolute;

    width: 4px;

    height: 4px;

    background: var(--neon-green);

    border-radius: 50%;

    opacity: 0;

    animation: particle-float 10s ease-in-out infinite;

}



.particle-1 {

    top: 20%;

    left: 10%;

    --tx: 50px;

    --ty: -30px;

    animation-delay: 0s;

}



.particle-2 {

    top: 40%;

    left: 80%;

    --tx: -40px;

    --ty: 50px;

    animation-delay: 2s;

}



.particle-3 {

    top: 60%;

    left: 30%;

    --tx: 30px;

    --ty: -50px;

    animation-delay: 4s;

}



.particle-4 {

    top: 80%;

    left: 70%;

    --tx: -50px;

    --ty: 30px;

    animation-delay: 6s;

}



.particle-5 {

    top: 50%;

    left: 50%;

    --tx: 40px;

    --ty: 40px;

    animation-delay: 8s;

}



/* ===== Gradient Text Effect ===== */

.gradient-text {

    background: linear-gradient(135deg, var(--neon-green) 0%, var(--brand-blue) 50%, var(--accent-cyan) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    background-size: 200% 200%;

    animation: gradient-shift 3s ease infinite;

}



@keyframes gradient-shift {

    0%, 100% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

}



/* ===== Glow Effects ===== */

.shadow-neon {
    box-shadow: var(--shadow-neon);
}

.shadow-neon-lg {
    box-shadow: var(--shadow-neon-lg);
}

/* Hover shadow utilities */
.hover\:shadow-neon:hover {
    box-shadow: var(--shadow-neon) !important;
}

.hover\:shadow-neon-lg:hover {
    box-shadow: var(--shadow-neon-lg) !important;
}

.shadow-blue-glow {
    box-shadow: var(--shadow-blue-glow);
}

.shadow-blue-glow-lg {
    box-shadow: var(--shadow-blue-glow-lg);
}

.hover-glow-neon:hover {
    box-shadow: var(--shadow-neon-lg);
    border-color: var(--neon-green);
}

.hover-glow-blue:hover {
    box-shadow: var(--shadow-blue-glow-lg);
    border-color: var(--brand-blue);

}



/* ===== Tech Logos Animation ===== */

.tech-logos {

    animation: slide-in 1s ease-out;

}



.tech-item {

    transition: all 0.3s ease;

    cursor: pointer;

}



.tech-item:hover {

    transform: translateY(-5px) scale(1.1);

    opacity: 1 !important;

}



@keyframes slide-in {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* ===== Button Enhancements ===== */

button, .btn {

    position: relative;

    overflow: hidden;

    transition: var(--transition-smooth);

}



button::before, .btn::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.2);

    transform: translate(-50%, -50%);

    transition: width 0.6s, height 0.6s;

}



button:hover::before, .btn:hover::before {

    width: 300px;

    height: 300px;

}



button:active, .btn:active {

    transform: scale(0.98);

}



/* ===== Smooth Scroll Bar ===== */

::-webkit-scrollbar {

    width: 10px;

}



::-webkit-scrollbar-track {

    background: var(--brand-panel);

}



::-webkit-scrollbar-thumb {

    background: linear-gradient(180deg, var(--neon-green), var(--brand-blue));

    border-radius: 10px;

}



::-webkit-scrollbar-thumb:hover {

    background: linear-gradient(180deg, var(--brand-blue), var(--accent-cyan));

}



/* ===== Link Hover Effects ===== */

a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition-smooth);

}



nav a {

    position: relative;

    color: rgba(255, 255, 255, 0.7);

    font-weight: 500;

    transition: color 0.3s ease;

}



nav a:hover {

    color: var(--neon-green);

}



nav a::after {

    content: '';

    position: absolute;

    bottom: -4px;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--neon-green);

    transition: width 0.3s ease;

}



nav a:hover::after {

    width: 100%;

}



/* ===== Card Hover Effects ===== */

.card-hover {

    position: relative;

    overflow: hidden;

}



.card-hover::after {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);

    transition: left 0.5s ease;

}



.card-hover:hover::after {

    left: 100%;

}



/* ===== Pulse Animation for Status Indicator ===== */

@keyframes ping {

    75%, 100% {

        transform: scale(2);

        opacity: 0;

    }

}



.animate-ping {

    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;

}



/* ===== Responsive Utilities ===== */

@media (max-width: 768px) {

    html {

        font-size: 14px;

    }

    

    .glass-card {

        padding: 1.5rem;

    }

    

    h1 {

        font-size: 2.5rem !important;

    }

    

    h2 {

        font-size: 2rem !important;

    }

}



/* ===== Loading States ===== */

.skeleton {

    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);

    background-size: 200% 100%;

    animation: skeleton-loading 1.5s ease-in-out infinite;

}



@keyframes skeleton-loading {

    0% {

        background-position: 200% 0;

    }

    100% {

        background-position: -200% 0;

    }

}



/* ===== Focus States for Accessibility ===== */

*:focus {

    outline: 2px solid var(--neon-green);

    outline-offset: 2px;

}



button:focus, a:focus {

    outline: 2px solid var(--brand-blue);

}



/* ===== Selection Styles ===== */

::selection {

    background: var(--neon-green);

    color: var(--brand-black);

}



::-moz-selection {

    background: var(--neon-green);

    color: var(--brand-black);

}



/* ===== Improved Transitions ===== */

* {

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}



/* ===== Utility Classes ===== */

.text-neon-green {

    color: var(--neon-green);

}



.text-brand-blue {

    color: var(--brand-blue);

}



.text-accent-cyan {

    color: var(--accent-cyan);

}



.bg-neon-green {

    background-color: var(--neon-green);

    padding: 15px;

    margin-top: 20px;

    margin-bottom: 20px;

}



.bg-brand-blue {

    background-color: var(--brand-blue);

    padding: 20px;

}



.bg-brand-panel {

    background-color: var(--brand-panel);

}



.bg-brand-black {

    background-color: var(--brand-black);

}



.border-neon-green {

    border-color: var(--neon-green);

}



.border-brand-blue {

    border-color: var(--brand-blue);

}



/* ===== Micro-interactions ===== */

.interactive {

    cursor: pointer;

    user-select: none;

    -webkit-tap-highlight-color: transparent;

}



.interactive:active {

    transform: scale(0.96);

}



/* ===== Code Block Styling ===== */

pre {

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 8px;

    padding: 1rem;

    overflow-x: auto;

}



code {

    background: rgba(255, 255, 255, 0.05);

    padding: 0.2em 0.4em;

    border-radius: 4px;

    font-size: 0.9em;

}



/* ===== Enhanced Shadow System ===== */

.shadow-soft {

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



.shadow-medium {

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

}



.shadow-hard {

    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);

}



/* ===== Backdrop Blur Utilities ===== */

.backdrop-blur-sm {

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

}



.backdrop-blur {

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

}



.backdrop-blur-lg {

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

}



.backdrop-blur-xl {

    backdrop-filter: blur(30px);

    -webkit-backdrop-filter: blur(30px);

}



/* ===== RESPONSIVE DESIGN ===== */



/* ===== Tablet (768px - 1023px) ===== */

@media (max-width: 1023px) {

    /* Typography */

    html {

        font-size: 15px;

    }

    

    h1 {

        font-size: 3rem !important;

        line-height: 1.1;

    }

    

    h2 {

        font-size: 2.5rem !important;

    }

    

    h3 {

        font-size: 1.5rem !important;

    }

    

    /* Container */

    .container {

        padding-left: 2rem;

        padding-right: 2rem;

    }

    

    /* Hero Section */

    section.min-h-screen {

        min-height: auto;

        padding-top: 6rem;

        padding-bottom: 4rem;

    }

    

    /* Cards */

    .glass-card {

        padding: 1.5rem;

        border-radius: 1rem;

    }

    

    /* Grid Adjustments */

    .grid.lg\\:grid-cols-3 {

        grid-template-columns: repeat(2, 1fr);

    }

    

    /* Code Preview - Hide on Tablet (only hero code block) */

    .hero-code-block.animate-float {

        display: none;

    }

    

    /* Stats */

    .grid-cols-3 {

        gap: 1rem;

    }

    

    /* Buttons */

    .px-8 {

        padding-left: 1.5rem;

        padding-right: 1.5rem;

    }

    

    .py-4 {

        padding-top: 0.875rem;

        padding-bottom: 0.875rem;

    }

    

    /* Navigation - Keep desktop menu */

    #mobile-menu {

        display: none;

    }

    

    /* Portfolio Cards */

    .glass-card .relative.h-64 {

        height: 14rem;

    }

    

    /* Light performance tweak (remove global override for animations) */

}



/* ===== Mobile Large (640px - 767px) ===== */

@media (max-width: 767px) {

    /* Typography */

    html {

        font-size: 14px;

    }

    

    h1 {

        font-size: 2rem !important;

        line-height: 1.2;

    }

    

    h2 {

        font-size: 1.75rem !important;

    }

    

    h3 {

        font-size: 1.25rem !important;

    }

    

    /* Container */

    .container {

        padding-left: 1.5rem;

        padding-right: 1.5rem;

    }

    

    /* Sections Spacing */

    .py-32 {

        padding-top: 3rem !important;

        padding-bottom: 3rem !important;

    }

    

    .py-20 {

        padding-top: 2rem !important;

        padding-bottom: 2rem !important;

    }

    

    .mb-20 {

        margin-bottom: 2rem !important;

    }

    

    /* Hero Section */

    section.min-h-screen {

        padding-top: 5rem;

        padding-bottom: 3rem;

    }

    

    /* Hide Desktop Navigation */

    nav.hidden.md\\:flex {

        display: none !important;

    }

    

    nav a.hidden.md\\:inline-flex {

        display: none !important;

    }

    

    /* Show Mobile Menu Button */

    button#mobile-menu-toggle {

        display: block !important;

    }

    

    /* REMOVIDO override global de .grid para não quebrar outras grades */

    

    /* Cards */

    .glass-card {

        padding: 1.25rem;

        border-radius: 1rem;

    }

    

    /* Buttons - Full Width */

    .flex.flex-col.sm\\:flex-row {

        flex-direction: column;

    }

    

    .flex.flex-col.sm\\:flex-row a,

    .flex.flex-col.sm\\:flex-row button {

        width: 100%;

    }

    

    /* Stats - Stack Vertically */

    .grid-cols-3 {

        grid-template-columns: 1fr !important;

        gap: 1rem;

        padding: 1rem 0;

    }

    

    .grid-cols-3 .border-x {

        border-left: none;

        border-right: none;

        border-top: 1px solid rgba(255, 255, 255, 0.1);

        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        padding: 1rem 0;

    }

    

    /* Tech Logos */

    .tech-logos {

        gap: 1rem !important;

        justify-content: center;

    }

    

    .tech-item {

        font-size: 0.875rem;

    }

    

    /* Portfolio Images */

    .glass-card .relative.h-64 {

        height: 12rem;

    }

    

    /* Footer Columns */

    .grid.md\\:grid-cols-3 {

        grid-template-columns: 1fr !important;

        gap: 2rem;

    }

    

    /* Badge Text */

    .text-xs {

        font-size: 0.65rem;

    }

    

    /* Trust Indicators */

    .flex.items-center.gap-4 {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.5rem;

    }

    

    /* Hide Particles on Mobile */

    .particle {

        display: none;

    }

    

    /* Reduce Blur Effects */

    .backdrop-blur-xl {

        backdrop-filter: blur(15px);

        -webkit-backdrop-filter: blur(15px);

    }

    

    .backdrop-blur-lg {

        backdrop-filter: blur(12px);

        -webkit-backdrop-filter: blur(12px);

    }

    

    /* Touch Targets - Minimum 44x44px */

    a, button {

        min-height: 44px;

        min-width: 44px;

    }

    

    /* Header Sticky */

    header.fixed {

        position: fixed;

        top: 0;

        width: 100%;

        z-index: 9999;

    }

    

    /* Mobile Menu Spacing */

    #mobile-menu {

        margin-top: 0;

    }

    

    #mobile-menu a {

        padding: 0.75rem 0;

        display: block;

        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    }

}



/* ===== Mobile Small (< 640px) ===== */

@media (max-width: 639px) {

    /* Extra Small Screens */

    html {

        font-size: 13px;

    }

    

    h1 {

        font-size: 1.75rem !important;

    }

    

    h2 {

        font-size: 1.5rem !important;

    }

    

    .container {

        padding-left: 1rem;

        padding-right: 1rem;

    }

    

    /* Cards */

    .glass-card {

        padding: 1rem;

        border-radius: .875rem;

    }

    

    /* Buttons */

    .px-6 {

        padding-left: 1rem;

        padding-right: 1rem;

    }

    

    .py-4 {

        padding-top: 0.75rem;

        padding-bottom: 0.75rem;

    }

    

    /* Portfolio Images */

    .glass-card .relative.h-64 {

        height: 10rem;

    }

    

    /* Flex Gap Reduction */

    .gap-8 {

        gap: 1rem !important;

    }

    

    .gap-6 {

        gap: 0.75rem !important;

    }

    

    .gap-4 {

        gap: 0.5rem !important;

    }

}



/* ===== Landscape Orientation (Mobile) ===== */

@media (max-height: 500px) and (orientation: landscape) {

    /* Reduce vertical spacing in landscape */

    section.min-h-screen {

        min-height: auto;

        padding-top: 2rem;

        padding-bottom: 2rem;

    }

    

    .py-32 {

        padding-top: 3rem !important;

        padding-bottom: 3rem !important;

    }

    

    h1 {

        font-size: 1.5rem !important;

    }

    

    h2 {

        font-size: 1.25rem !important;

    }

}



/* ===== Print Styles ===== */

@media print {

    * {

        background: white !important;

        color: black !important;

        box-shadow: none !important;

        text-shadow: none !important;

    }

    

    a, a:visited {

        text-decoration: underline;

    }

    

    .glass-card {

        border: 1px solid #000;

        page-break-inside: avoid;

    }

    

    header, footer, nav, #mobile-menu-toggle, video {

        display: none;

    }

}



/* ===== High Contrast Mode ===== */

@media (prefers-contrast: high) {

    :root {

        --neon-green: #00ff00;

        --brand-blue: #0066ff;

    }

    

    .glass-card {

        border: 2px solid rgba(255, 255, 255, 0.3);

    }

}



/* ===== Reduced Motion ===== */

@media (prefers-reduced-motion: reduce) {

    * {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

    

    .particle,

    .animate-pulse,

    .animate-bounce,

    .animate-float {

        animation: none !important;

    }

}



/* ===== Dark Mode Support (Future) ===== */

@media (prefers-color-scheme: light) {

    /* Se quiser adicionar tema claro futuramente */

    /* body {

        background-color: #ffffff;

        color: #000000;

    } */

}



/* ===== ELEMENTOR COMPATIBILITY ===== */



/* Elementor Canvas - Remove conflitos */

.elementor-page,

.elementor-canvas {

    background: var(--bg-dark);

}



/* Não aplica estilos do tema em modo de edição Elementor */

.elementor-editor-active .glass-card,

.elementor-editor-active .glass-nav {

    background: transparent !important;

    backdrop-filter: none !important;

}



/* Elementor Full Width */

.elementor-page-content {

    width: 100%;

    max-width: 100%;

    padding: 0;

}



/* Remove padding do container em páginas Elementor */

.elementor-page .container {

    padding: 0;

}



/* Elementor Sections */

.elementor-section {

    position: relative;

}



/* Compatibilidade com widgets Elementor */

.elementor-widget-container {

    position: relative;

    z-index: 1;

}



/* Headings Elementor herdam variáveis do tema */

.elementor-heading-title {

    font-family: 'Rethink Sans', sans-serif;

}



/* Botões Elementor herdam estilo do tema */

.elementor-button {

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.elementor-button:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 40px rgba(42, 255, 163, 0.3);

}



/* Cards Elementor com glass effect */

.elementor-widget-container .glass-card {

    background: rgba(255, 255, 255, 0.03);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 20px;

}



/* Compatibilidade com Elementor Navigator */

.elementor-element {

    position: relative;

}



/* Elementor Preview Mode */

.elementor-preview-mode .animate-float,

.elementor-preview-mode .particle {

    animation-play-state: paused;

}



/* Elementor Pro Forms */

.elementor-field-group input,

.elementor-field-group textarea {

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #fff;

    padding: 0.75rem 1rem;

    border-radius: 8px;

    transition: all 0.3s ease;

}



.elementor-field-group input:focus,

.elementor-field-group textarea:focus {

    border-color: var(--neon-green);

    box-shadow: 0 0 0 2px rgba(42, 255, 163, 0.1);

    outline: none;

}



/* Elementor Icon Box */

.elementor-icon-box-wrapper {

    transition: transform 0.3s ease;

}



.elementor-icon-box-wrapper:hover {

    transform: translateY(-5px);

}



/* Responsive Elementor */

@media (max-width: 767px) {

    .elementor-column {

        width: 100% !important;

    }

    

    .elementor-section {

        padding: 2rem 1rem !important;

    }

}



/* WP Admin Bar Fix */

body.admin-bar #main-header {

    top: 32px;

}



@media screen and (max-width: 782px) {

    body.admin-bar #main-header {

        top: 46px;

    }

}



.flex-col {

    flex-direction: column;

    padding: 20px;

}



.hidden {

    display: flex;

}

/* ===== Button Hover Fixes ===== */
/* Garante que texto e ícones permaneçam escuros no hover de botões verdes */
.bg-neon-green,
a.bg-neon-green,
button.bg-neon-green {
    color: var(--brand-black, #050505) !important;
}

.bg-neon-green *,
a.bg-neon-green *,
button.bg-neon-green * {
    color: var(--brand-black, #050505) !important;
}

/* Garante que SVGs dentro de botões verdes permaneçam escuros */
.bg-neon-green svg,
a.bg-neon-green svg,
button.bg-neon-green svg {
    color: var(--brand-black, #050505) !important;
    stroke: var(--brand-black, #050505) !important;
}

/* Classes específicas para botões sem hover brand */
.no-brand-hover {
    color: var(--brand-black, #050505) !important;
}

.no-brand-hover svg {
    color: var(--brand-black, #050505) !important;
    stroke: var(--brand-black, #050505) !important;
}

/* ===== Animation on Load Fix ===== */
/* Garante que animações funcionem corretamente */
.animate-fade-in-up {
    animation: fade-in-up 1s ease-out forwards !important;
}

.animate-on-scroll.animated {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Glass cards e elementos animáveis */
.glass-card,
.tech-item,
.animate-on-scroll {
    will-change: opacity, transform;
}

/* Forçar elementos a mostrar após carregamento e animação */
body.loaded .glass-card,
body.loaded .tech-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Elementos dentro do hero section devem estar sempre visíveis */
.min-h-screen .glass-card,
.min-h-screen [class*="animate-"] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== Mobile Specific Styles ===== */
@media (max-width: 768px) {
    /* Centralizar ícones e botões nos cards de serviço no mobile */
    .glass-card .w-16.h-16,
    .glass-card .relative > div:first-child {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .glass-card h3,
    .glass-card .text-2xl {
        text-align: center !important;
    }
    
    .glass-card > p,
    .glass-card .text-gray-400 {
        text-align: center !important;
    }
    
    .glass-card ul {
        text-align: left !important;
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .glass-card .space-y-1 {
        text-align: center !important;
    }
    
    .glass-card a.w-full,
    .glass-card a.inline-flex,
    .glass-card button {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Garantir que grid fique em coluna única no mobile */
    .grid.md\:grid-cols-2,
    .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* Forçar visibilidade dos elementos animados no mobile */
    .glass-card,
    .animate-on-scroll,
    .tech-item {
        opacity: 1 !important;
        transform: translateY(0) !important;
        visibility: visible !important;
    }
}