:root {
    --bg-dark: #0a051a;
    --purple-neon: #bc13fe;
    --blue-neon: #18d1ff;
    --text-white: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.05);
}

body {
    margin: 0;
    padding: 0;
    padding-top: 90px;
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-white);
    background: radial-gradient(circle at top right, #1a0b3d, #0a051a);
    overflow-x: hidden;
}

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

/* Header & Nav */
/*
header {
    padding: 20px 0;
    border-bottom: 1px solid rgba(188, 19, 254, 0.2);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    margin: 0;
}

.logo span { color: var(--purple-neon); text-shadow: 0 0 10px var(--purple-neon); }

nav ul { display: flex; list-style: none; gap: 30px; align-items: center; }

nav a { text-decoration: none; color: white; font-weight: bold; transition: 0.3s; }

.btn-budget {
    border: 1px solid var(--blue-neon);
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px var(--blue-neon);
}

*/

/* --- Estilos para o Cabeçalho (Header) --- */
header {
    width: 100%;
    height: 90px;
    /* Mantendo o fundo escuro do design tech */
    background-color: #0a051a; 
    border-bottom: 1px solid rgba(188, 19, 254, 0.2); /* Linha neon sutil */
    padding: 10px 0;
    position: fixed; /* Opcional: fixa o cabeçalho no topo */
    top: 0;
    z-index: 1000;
}

/* Contêiner do Nav (Alinha logo e menu nas pontas opostas) */
nav.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between; /* Logo à esquerda, menu à direita */
    align-items: center; /* Alinhamento vertical central */
}

/* --- O segredo do alinhamento do Logo --- */
.logo {
    display: flex; /* Transforma o contêiner do logo em Flex */
    align-items: center; /* Alinha a imagem e o bloco de texto verticalmente no centro */
    gap: 15px; /* Adiciona um espaço de 15px entre a imagem e o texto */
}

/* Estilo da Imagem (Logo) */
.logo img {
    width: 80px; /* Define o tamanho da engrenagem */
    height: auto; /* Mantém a proporção */
}

/* Agrupamento dos Dizeres (Fica à direita da imagem) */
.logo-text {
    display: flex;
    flex-direction: column; /* Faz o <h1> e o <p> ficarem um em cima do outro */
}

/* --- Estilização do Texto (Mantendo a estética) --- */
.logo h1 {
    font-family: 'Orbitron', sans-serif; /* Fonte tech */
    font-size: 1.5rem;
    color: #ffffff;
    margin: 0; /* Remove margens padrão */
    line-height: 1.2;
}

/* O "Company" em roxo neon */
.logo h1 span {
    color: #bc13fe;
    text-shadow: 0 0 10px #bc13fe;
}

/* O subtítulo */
.logo p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    letter-spacing: 1px; /* Espaçamento entre letras para ar moderno */
}

/* --- Estilos do Menu (Só para contexto) --- */
nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
    align-items: center;
    margin: 0;
    padding: 0;
}

nav a {
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    transition: 0.3s;
}

nav a:hover {
    color: #18d1ff; /* Azul neon no hover */
}

.btn-budget {
    border: 1px solid #18d1ff;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px #18d1ff;
}

/* Hero Section */
.hero {
    display: flex;
    padding: 100px 20px;
    align-items: center;    
}

.hero-text h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5rem;
    line-height: 1.1;
}

.neon-text {
    color: var(--blue-neon);
    text-shadow: 0 0 20px var(--blue-neon);
}

.btn-main {
    display: inline-block;
    margin-top: 30px;
    padding: 15px 40px;
    background: linear-gradient(45deg, var(--purple-neon), var(--blue-neon));
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    box-shadow: 0 0 20px rgba(188, 19, 254, 0.5);
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 50px;
}

.card {
    background: var(--glass-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    text-align: center;
    border-radius: 15px;
    transition: 0.4s;
    backdrop-filter: blur(5px);
}

.card:hover {
    border-color: var(--purple-neon);
    transform: translateY(-10px);
    box-shadow: 0 0 30px rgba(188, 19, 254, 0.3);
}

/* Founder Section */
.founder-card {
    background: linear-gradient(135deg, rgba(20, 10, 40, 0.8), rgba(0, 0, 0, 0.9));
    margin-top: 100px;
    padding: 50px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    border-left: 5px solid var(--purple-neon);
}

.founder-info h3 { font-family: 'Orbitron'; color: var(--purple-neon); }
.founder-info ul { list-style: none; padding: 0; }
.founder-info li { margin: 10px 0; font-size: 1.1rem; }

/* Seção de Contato */
.contact {
    padding: 80px 20px;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    margin-top: 40px;
}

.info-item {
    margin-bottom: 30px;
}

.info-item h4 {
    color: var(--blue-neon);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.info-item p {
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Formulário Tech */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form input, 
.contact-form textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(188, 19, 254, 0.3);
    padding: 15px;
    color: white;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    transition: 0.3s;
}

.contact-form input:focus, 
.contact-form textarea:focus {
    outline: none;
    border-color: var(--blue-neon);
    box-shadow: 0 0 15px rgba(24, 209, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.contact-form button {
    cursor: pointer;
    border: none;
    align-self: flex-start;
}

/* Rodapé */
footer {
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 50px;
    text-align: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0.6;
    font-size: 0.9rem;
}

.social-dots {
    display: flex;
    gap: 10px;
}

.social-dots span {
    width: 8px;
    height: 8px;
    background: var(--purple-neon);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--purple-neon);
}

/* Ajuste Responsivo */
@media (max-width: 768px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
    }
    .footer-content {
        flex-direction: column;
        gap: 20px;
    }
}

.hero-banner {
    width: 100%;
    min-height: 80vh; /* Ajusta a altura conforme a tela */
    background: url('banner.png') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Camada escura opcional para dar leitura ao texto caso a imagem seja muito clara */
.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(10, 5, 26, 0.8) 30%, transparent 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2; /* Fica acima da camada escura */
    display: flex;
    width: 100%;
}

.hero-text h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem); /* Fonte que diminui no celular */
    line-height: 1.2;
    margin-bottom: 20px;
    color: #fff;
}

.hero-text p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 500px;
}

/* Responsividade para Celulares */
@media (max-width: 768px) {
    .hero-banner {
        background-position: 20% center; /* Ajusta o foco da imagem para não cortar o prédio no mobile */
        min-height: 60vh;
        text-align: center;
    }
    
    .hero-content {
        justify-content: center;
    }

    .hero-banner::before {
        background: rgba(10, 5, 26, 0.6); /* Escurece mais no mobile para o texto aparecer */
    }
}

/* --- Estilização da Foto do Fundador (Estilo Glass) --- */

/* 1. O Contêiner Principal da Imagem (Pai de todos) */
.founder-img {
    display: flex;
    justify-content: center; /* Centraliza a foto horizontalmente */
    align-items: center;    /* Centraliza verticalmente */
    padding: 20px;
    
    /* Importante para a animação: define a perspectiva 3D */
    perspective: 1000px; 
}

/* 2. A Moldura de Vidro (img-placeholder) */
.img-placeholder {
    /* Define o tamanho da moldura */
    width: 320px; /* Um pouco maior que a imagem para criar a borda */
    height: 320px;
    
    /* Efeito de Vidro Fosco (Glassmorphism) */
    background: rgba(255, 255, 255, 0.03); /* Fundo branco quase transparente */
    backdrop-filter: blur(10px); /* Desfoca o que está atrás */
    -webkit-backdrop-filter: blur(10px); /* Suporte Safari */
    
    /* Borda e Cantos Arredondados */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil */
    border-radius: 20px; /* Cantos arredondados elegantes */
    
    /* Camadas de Sombra (O segredo do volume) */
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5),      /* Sombra projetada escura (profundidade) */
        0 0 15px rgba(188, 19, 254, 0.2),     /* Brilho neon sutil roxo (identidade) */
        inset 0 0 10px rgba(255, 255, 255, 0.05); /* Sombra interna sutil */

    /* Alinhamento da imagem dentro da moldura */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Garante que a imagem não saia dos cantos arredondados */

    /* Prepara para a animação suave */
    transition: all 0.4s ease-out; 
    transform-style: preserve-3d; /* Mantém o efeito 3D dos filhos */
}

/* 3. A Imagem Real do Filipe */
.img-placeholder img {
    /* Ajusta a imagem para preencher a moldura mantendo a proporção */
    width: 90%; /* Deixa uma bordinha de vidro aparecendo */
    height: 90%;
    object-fit: cover; /* Recorta a imagem para preencher o quadrado */
    border-radius: 15px; /* Cantos arredondados na imagem também */
    
    /* Adiciona profundidade à própria imagem */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 
    
    /* Prepara a imagem para flutuar no hover */
    transition: transform 0.4s ease-out;
}

/* --- Microinteração ao Passar o Mouse (Hover) --- */

/* Quando o mouse passa sobre o contêiner (moldura) */
.founder-img:hover .img-placeholder {
    /* Efeito 3D: Inclina levemente a moldura */
    transform: rotateX(5deg) rotateY(-5deg) translateY(-10px);
    
    /* Intensifica as sombras para dar sensação de flutuação */
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.7),      /* Sombra projetada maior e mais escura */
        0 0 25px rgba(188, 19, 254, 0.4),     /* Brilho neon roxo mais forte */
        inset 0 0 15px rgba(255, 255, 255, 0.1); 
        
    /* Aumenta ligeiramente a nitidez do vidro */
    background: rgba(255, 255, 255, 0.06);
}

/* Quando o mouse passa sobre a moldura, a IMAGEM INTERNA também se move */
.founder-img:hover .img-placeholder img {
    /* Faz a imagem "pular" para frente (Efeito Parallax sutil) */
    transform: translateZ(20px) scale(1.02); 
}

.code-terminal {
    background: #0d0d1a;
    border: 1px solid rgba(188, 19, 254, 0.3);
    border-radius: 8px;
    width: 350px;
    height: 220px;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 13px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    margin: 0 20px;
    overflow: hidden;
}

.terminal-header {
    background: #1a1a2e;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot { width: 10px; height: 10px; border-radius: 50%; }
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }
.terminal-title { color: #888; font-size: 10px; margin-left: 10px; }

.code-content { padding: 15px; color: #fff; line-height: 1.6; }

/* Cores do Código Sintaxe */
.keyword { color: #c678dd; } /* roxo */
.function { color: #61afef; } /* azul */
.string { color: #98c379; } /* verde */
.variable { color: #e06c75; } /* vermelho/coral */

.cursor {
    animation: blink 1s infinite;
    color: var(--purple-neon);
}

@keyframes blink { 50% { opacity: 0; } }

#inicio {
    scroll-margin-top: 110px; /* Ajuste esse valor de acordo com a altura do seu header */
}

#produtos {
    scroll-margin-top: 110px; /* Ajuste esse valor de acordo com a altura do seu header */
}

#fundador {
    scroll-margin-top: 110px; /* Ajuste esse valor de acordo com a altura do seu header */
}

#contato {
    scroll-margin-top: 110px; /* Ajuste esse valor de acordo com a altura do seu header */
}

html {
    scroll-behavior: smooth;
}

/* --- Estilização dos Links de Contato --- */

.info-item p a {
    text-decoration: none; /* Remove o sublinhado padrão */
    color: inherit;       /* Herda a cor branca/opaca do parágrafo */
    transition: all 0.3s ease;
    display: inline-block;
}

/* Efeito ao passar o mouse sobre o link */
.info-item p a:hover {
    color: var(--blue-neon); /* O texto brilha em azul ao passar o mouse */
    text-shadow: 0 0 8px var(--blue-neon);
    transform: translateX(5px); /* Pequeno movimento para a direita */
}

/* Garante que o ícone também brilhe quando o usuário passar o mouse no link */
.info-item:hover h4 i {
    color: #fff;
    text-shadow: 0 0 15px var(--purple-neon);
}

/* --- Estilização dos Ícones nos Cards de Serviço --- */

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin-top: 50px;
}

.card i {
    font-size: 2.5rem; /* Tamanho do ícone */
    color: var(--blue-neon); /* Azul Neon */
    margin-bottom: 20px;
    display: block;
    
    /* Brilho Neon Azul */
    text-shadow: 0 0 10px rgba(24, 209, 255, 0.6),
                 0 0 20px rgba(24, 209, 255, 0.2);
    
    /* Transição para suavizar o hover */
    transition: all 0.4s ease;
}

/* Efeito ao passar o mouse no CARD inteiro */
.card:hover i {
    transform: translateY(-10px) scale(1.1); /* Ícone sobe e aumenta levemente */
    color: #fff; /* Muda para branco para destacar o brilho */
    text-shadow: 0 0 15px var(--blue-neon), 
                 0 0 30px var(--blue-neon);
}

/* Ajuste nos títulos dos cards para combinar com os ícones */
.card h4 {
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.card p {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* BOTÃO HAMBURGUER */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
}

/* MOBILE */
@media (max-width: 768px) {

    .menu-toggle {
        display: block;
        z-index: 1100;
    }

    nav ul.menu {
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;

        background: rgba(10, 5, 26, 0.95);
        backdrop-filter: blur(10px);

        flex-direction: column;
        align-items: center;

        /* estado fechado */
        max-height: 0;
        overflow: hidden;

        padding: 0;
        gap: 0;

        opacity: 0;
        transform: translateY(-15px);

        transition: 
            max-height 0.4s ease,
            opacity 0.3s ease,
            transform 0.3s ease;
    }

    nav ul.menu.active {
        max-height: 500px;

        padding: 20px 0;
        gap: 20px;

        opacity: 1;
        transform: translateY(0);
    }

    nav ul.menu li {
        width: 100%;
        text-align: center;
    }

    nav ul.menu li a {
        display: block;
        padding: 12px;
    }

    .founder-card {
        flex-direction: column; /* 🔥 empilha tudo */
        gap: 30px; /* espaço entre os blocos */
        padding: 30px 20px; /* opcional: reduz padding */
    }

    .code-terminal {
        width: 100%; /* evita estourar */
        margin: 0;
    }

    .img-placeholder {
        width: 100%;
        max-width: 300px;
        height: auto;
    }

    .img-placeholder img {
        width: 100%;
        height: auto;
    }

    .founder-img {
        padding: 0;
    }
}

/* OVERLAY */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(10, 5, 26, 0.85);
    backdrop-filter: blur(8px);

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;

    z-index: 2000;
}

/* ATIVO */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* BOX */
.modal-box {
    width: 90%;
    max-width: 500px;
    padding: 30px;

    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;

    border: 1px solid rgba(188, 19, 254, 0.3);

    box-shadow:
        0 0 25px rgba(188, 19, 254, 0.3),
        0 0 60px rgba(24, 209, 255, 0.1);

    text-align: center;
    animation: modalFade 0.3s ease;
}

/* HEADER */
.modal-header h3 {
    font-family: 'Orbitron', sans-serif;
    color: var(--blue-neon);
    margin-bottom: 15px;
}

/* TEXTO */
.modal-body p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* FOOTER */
.modal-footer {
    margin-top: 25px;
}

/* ANIMAÇÃO */
@keyframes modalFade {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}