/* Reset e Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --preto: #0a0a0a;
    --preto-secundario: #1a1a1a;
    --azul-eletrico: #00d4ff;
    --roxo-neon: #b040ff;
    --verde-neon: #00ff88;
    --branco: #ffffff;
    --cinza: #cccccc;
    --cinza-escuro: #333333;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f4f6f8;
    color: var(--preto);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* Fundo de código animado */
body::before {
    content: '< /> { } [ ] function( ) var const let return if else for while do switch case break continue && || ! ? : . , ; = + - * / % < > <= >= == != === !== $ @ # ~ ^ & | \\ / ( ) [ ] { } < HTML /> <CSS/> <JS/> <React/> <Vue/> <Angular/> <Node/> <API/> const data = { }; function build() { } if (true) { console.log(); } let innovation = true; <develop/> <marketing/> <código/> <conversão/> 01010101 11001100 1010 0101 11 00 DEBUG LOG ERROR WARNING INFO SUCCESS LOADING COMPLETE CONNECTED PROCESSING ANALYZING DATA STRUCTURE FRAMEWORK LIBRARY PACKAGE MODULE COMPONENT SERVICE ROUTER CONTROLLER MODEL VIEW TEMPLATE DIRECTIVE PIPE GUARD RESOLVER INTERCEPTOR ';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    color: rgba(0, 212, 255, 0.05);
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-wrap;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    text-align: justify;
    letter-spacing: 1px;
    animation: codeFlow 20s linear infinite;
}

@keyframes codeFlow {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

/* Garantir que conteúdo fica na frente */
.navbar {
    position: relative;
    z-index: 1000;
}

section {
    position: relative;
    z-index: 1;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navegação */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(3, 8, 28, 0.95);
    backdrop-filter: blur(12px);
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 212, 255, 0.15);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-image {
    height: 105px;
    width: auto;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(30, 207, 255, 0.35));
}

.logo-image:hover {
    filter: drop-shadow(0 0 16px rgba(30, 207, 255, 0.65)) drop-shadow(0 0 10px rgba(255, 180, 40, 0.3));
    transform: translateY(-2px);
}

/* Logo alternativo (texto) - manter para compatibilidade */
.logo-text {
    font-size: 24px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--azul-eletrico), var(--roxo-neon));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-subtitle {
    font-size: 10px;
    color: var(--cinza);
    letter-spacing: 2px;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-link {
    color: var(--branco);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link:hover {
    color: var(--azul-eletrico);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--azul-eletrico), var(--roxo-neon));
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--branco);
    font-size: 28px;
    cursor: pointer;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 80px;
    background: linear-gradient(180deg, #0b1a3e 0%, #122040 50%, #0d1f3c 100%);
}

.hero::before {
    display: none;
}

/* Starfield Canvas */
.hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Central radiant glow beam from bottom */
.hero-glow {
    position: absolute;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 80%;
    background: radial-gradient(ellipse at 50% 100%,
        rgba(0, 160, 255, 0.45) 0%,
        rgba(0, 100, 220, 0.20) 25%,
        rgba(0, 60, 180, 0.08) 50%,
        transparent 70%);
    z-index: 1;
    pointer-events: none;
    animation: glowPulse 6s ease-in-out infinite;
}

.hero-glow--secondary {
    width: 40%;
    height: 50%;
    background: radial-gradient(ellipse at 50% 100%,
        rgba(80, 200, 255, 0.30) 0%,
        rgba(0, 150, 255, 0.10) 40%,
        transparent 70%);
    animation: glowPulse 6s ease-in-out 1s infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.hero-content {
    position: relative;
    text-align: center;
    max-width: 900px;
    padding: 40px 20px;
    z-index: 2;
}

/* Hero Logo Display */
.hero-logo-display {
    margin-bottom: 35px;
    display: flex;
    justify-content: center;
}

.hero-logo-img {
    height: 100px;
    width: auto;
    filter: drop-shadow(0 0 28px rgba(30, 207, 255, 0.75)) drop-shadow(0 0 55px rgba(30, 207, 255, 0.25)) drop-shadow(0 0 20px rgba(255, 180, 40, 0.25));
    animation: logoFloat 5s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 0 28px rgba(30, 207, 255, 0.75)) drop-shadow(0 0 55px rgba(30, 207, 255, 0.25)) drop-shadow(0 0 20px rgba(255, 180, 40, 0.25));
    }
    50% {
        transform: translateY(-12px);
        filter: drop-shadow(0 0 40px rgba(0, 212, 255, 1)) drop-shadow(0 0 80px rgba(0, 150, 255, 0.5));
    }
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.2;
}

.gradient-text {
    background: linear-gradient(135deg, var(--azul-eletrico), var(--roxo-neon), var(--verde-neon));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(20deg); }
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--cinza);
    margin-bottom: 40px;
    line-height: 1.8;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    display: inline-block;
}

.btn-primary {
    background: linear-gradient(135deg, var(--azul-eletrico), var(--roxo-neon));
    color: var(--preto);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.5);
}

.btn-secondary {
    background: transparent;
    color: var(--branco);
    border: 2px solid var(--azul-eletrico);
}

.btn-secondary:hover {
    background: var(--azul-eletrico);
    color: var(--preto);
    transform: translateY(-3px);
}

.btn-outline {
    background: transparent;
    color: var(--azul-eletrico);
    border: 1px solid var(--azul-eletrico);
    padding: 10px 30px;
}

.btn-outline:hover {
    background: var(--azul-eletrico);
    color: var(--preto);
}

.btn-large {
    padding: 20px 60px;
    font-size: 1.2rem;
}

.btn-full {
    width: 100%;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: var(--azul-eletrico);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

/* Sections */
section {
    padding: 100px 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
}

/* Conceito Section */
.conceito-section {
    background: var(--preto-secundario);
}

.conceito-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.conceito-text {
    font-size: 1.3rem;
    line-height: 1.8;
    margin-bottom: 30px;
    color: var(--cinza);
}

.highlight {
    color: #2a2a2a;
    font-weight: 700;
}

.brand-quote {
    font-size: 2.6rem;
    font-weight: 900;
    font-style: italic;
    background: linear-gradient(135deg, #00d4ff, #b040ff, #00e676);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 48px 0;
    text-align: center;
    letter-spacing: -0.5px;
    text-shadow: none;
    filter: drop-shadow(0 0 18px rgba(0, 212, 255, 0.4));
}

/* Sobre Section */
.sobre-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.sobre-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #3a3a3a;
}

.sobre-text p {
    margin-bottom: 20px;
}

.sobre-text strong {
    color: #1a1a1a;
    font-weight: 700;
}

.sobre-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card {
    background: var(--preto-secundario);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--azul-eletrico);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--azul-eletrico);
}

.card p {
    color: var(--cinza);
    line-height: 1.6;
}

/* Valores Section */
.valores-section {
    background: var(--preto-secundario);
}

.valores-carousel-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.valores-carousel {
    overflow: hidden;
    flex: 1;
}

.valores-track {
    display: flex;
    gap: 24px;
    transition: transform 0.4s ease;
    will-change: transform;
}

.valor-item {
    background: var(--preto);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid rgba(176, 64, 255, 0.2);
    transition: all 0.3s ease;
    flex: 0 0 calc(25% - 18px);
    min-width: 0;
}

.valor-item:hover {
    transform: translateY(-5px);
    border-color: var(--roxo-neon);
    box-shadow: 0 10px 30px rgba(176, 64, 255, 0.2);
}

.valor-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 15px;
}

.valor-item h4 {
    color: var(--branco);
    font-size: 1.1rem;
}

.carousel-btn {
    background: rgba(176, 64, 255, 0.15);
    border: 1px solid rgba(176, 64, 255, 0.4);
    color: var(--branco);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn:hover {
    background: var(--roxo-neon);
    border-color: var(--roxo-neon);
    box-shadow: 0 0 18px rgba(176, 64, 255, 0.5);
}

.carousel-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Serviços Section */
.servicos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.servico-card {
    background: var(--preto-secundario);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.servico-card:hover {
    transform: translateY(-10px);
    border-color: var(--azul-eletrico);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.3);
}

.servico-header {
    margin-bottom: 20px;
}

.servico-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
}

.servico-card h3 {
    font-size: 1.5rem;
    color: var(--azul-eletrico);
    margin-bottom: 20px;
}

.servico-list {
    list-style: none;
    margin-bottom: 30px;
    flex-grow: 1;
}

.servico-list li {
    padding: 10px 0;
    color: var(--cinza);
    position: relative;
    padding-left: 25px;
}

.servico-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--roxo-neon);
    font-weight: bold;
}

/* Portfolio Section */
.portfolio-section {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(176, 64, 255, 0.1));
    text-align: center;
}

.portfolio-subtitle {
    font-size: 1.3rem;
    color: #2a2a2a;
    margin-bottom: 40px;
}

.portfolio-cta {
    margin-top: 40px;
}

/* Planos de Assinatura */
.planos-section {
    background: var(--preto);
    padding: 80px 0;
}

.planos-img-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.planos-img {
    width: 100%;
    max-width: 1000px;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.15);
}

/* Contato Section */
.contato-section {
    background: var(--preto-secundario);
}

.contato-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contato-info h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--azul-eletrico);
}

.contato-info p {
    color: var(--cinza);
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.contato-methods {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contato-method {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--preto);
    border-radius: 15px;
    border: 1px solid rgba(0, 212, 255, 0.2);
    text-decoration: none;
    color: var(--branco);
    transition: all 0.3s ease;
}

.contato-method:hover {
    border-color: var(--azul-eletrico);
    transform: translateX(10px);
}

.method-icon {
    font-size: 2rem;
}

.contato-method strong {
    display: block;
    color: var(--azul-eletrico);
    margin-bottom: 5px;
}

.contato-method p {
    margin: 0;
    color: var(--cinza);
    font-size: 0.9rem;
}

/* Form */
.contato-form {
    background: var(--preto);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.form-group {
    margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    background: var(--preto-secundario);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 10px;
    color: var(--branco);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--azul-eletrico);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}

.form-group textarea {
    resize: vertical;
}

/* Footer */
.footer {
    background: var(--preto);
    padding: 60px 0 20px;
    border-top: 1px solid rgba(0, 212, 255, 0.2);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    margin-bottom: 40px;
}

.footer-brand h3 {
    font-size: 2rem;
    background: linear-gradient(135deg, var(--azul-eletrico), var(--roxo-neon));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.footer-logo {
    height: 60px;
    width: auto;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 10px rgba(30, 207, 255, 0.3));
}

.footer-tagline {
    font-style: italic;
    color: var(--cinza);
    margin-top: 10px;
}

.footer-links h4 {
    color: var(--azul-eletrico);
    margin-bottom: 20px;
}

.footer-links ul {
    list-style: none;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links ul li a {
    color: var(--cinza);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links ul li a:hover {
    color: var(--azul-eletrico);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 212, 255, 0.1);
    color: var(--cinza);
}

/* Fixed Contact Button */
.fixed-contact-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--azul-eletrico), var(--roxo-neon));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
    z-index: 999;
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

.fixed-contact-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.6);
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4); }
    50% { box-shadow: 0 10px 40px rgba(0, 212, 255, 0.8); }
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}

.modal-content {
    position: relative;
    background: var(--preto-secundario);
    margin: 5% auto;
    padding: 40px;
    border: 1px solid var(--azul-eletrico);
    border-radius: 20px;
    width: 80%;
    max-width: 600px;
    box-shadow: 0 20px 60px rgba(0, 212, 255, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    color: var(--cinza);
    cursor: pointer;
    transition: color 0.3s ease;
}

.modal-close:hover {
    color: var(--azul-eletrico);
}

/* Responsive */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }

    .nav-menu {
        display: none;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .sobre-content,
    .contato-grid,
    .footer-content {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .valores-grid {
        grid-template-columns: 1fr;
    }

    .servicos-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.5rem;
    }

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

    .brand-quote {
        font-size: 1.5rem;
    }
}