/* 1. Reset Básico: Remove margens padrão dos navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#about-section {
    /* O site vai parar 100px antes da secção, dando espaço para respirar */
    scroll-margin-top: 100px; 
}

#profile-section {
    /* O site vai parar 100px antes da secção, dando espaço para respirar */
    scroll-margin-top: 100px; 
}

body {
    background-color: #050505;
    /* --- ALTERAÇÃO AQUI: Troca 'Inter' por 'Roboto' --- */
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    margin: 0;
    overflow-x: hidden; /* Evita barra de rolagem horizontal */
    
    /* Desenha o Grid Branco subtil */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 30px 30px; /* Tamanho dos quadrados */
    background-attachment: fixed;
    
}

/* 2. Configuração da Chuva (Canvas) */
#poker-rain {
position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    
    /* --- MUDANÇA AQUI: Opacidade global do efeito --- */
    opacity: 0.1; /* 30% visível (muito subtil) */
}

/* 3. Traz todo o conteúdo do site para a frente */
/* Adicionei aqui todas as classes de secções que criámos */
section, .hero-section, .about-section, .ecosystem-section, .what-we-do-section, .philosophy-section, .profile-section, .confidentiality-section {
    position: relative;
    z-index: 1; /* Camada 1: Acima da chuva */
}

/* --- Logo Principal (Acima do Título) --- */
.hero-logo {
    /* Define a largura (ajusta este valor conforme o gosto) */
    width: 250px; 
    
    /* Garante que a altura é automática para não esticar a imagem */
    height: auto;
    
    /* Dá um espaço de respiro entre a logo e o texto "ARLEQUIM" */
    margin-bottom: -50px;
    
    /* (Opcional) Sombra subtil para destacar do fundo, caso a logo seja escura */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    
    /* (Opcional) Animação de entrada suave */
    animation: fadeInDown 1s ease-out;

    position: relative; /* Ajuda a ficar na frente se sobrepor muito */
    z-index: 3;
}

/* Animação simples para a logo descer suavemente ao carregar */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. Configuração da Secção Hero */
.hero-section {
    position: relative; /* Obrigatório para o truque funcionar */
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

/* --- Camada da Logo de Fundo --- */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* A tua imagem (com a barra correta!) */
    background-image: url('img/logo-hero.png');
    
    /* Centraliza a logo perfeitamente */
    background-position: center center;
    background-repeat: no-repeat;
    
    /* --- CONTROLO TOTAL AQUI --- */
    
    /* 1. REGULAR O TAMANHO */
    /* Usa percentagem (%) para ser responsivo ou px para fixo */
    /* Sugestão: 40% ocupa quase metade da tela, ideal para desktop e mobile */
    background-size: 40%; 
    
    /* 2. REGULAR A OPACIDADE */
    /* 0.0 = Invisível | 1.0 = Totalmente Visível */
    opacity: 0; 
    
    /* Garante que fica atrás do texto */
    z-index: 0;
    pointer-events: none; /* Para não bloquear cliques */
}



/* 3. Container do Conteúdo */
.container {
    position: relative;
    z-index: 2; /* Garante que o texto fica acima do fundo */
    padding: 20px;
    max-width: 800px; /* Limita a largura para não esticar demais em ecrãs grandes */
}

/* 4. Estilos do Logótipo */
.logo {
    width: 120px; /* Ajusta o tamanho conforme necessário */
    margin-bottom: 20px;
    opacity: 0.8;
}

/* 5. Tipografia */
.title {
font-family: 'Cinzel', serif;
    font-size: 3rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;

    /* SUBSTITUI A COR SÓLIDA POR ISTO: */
    background: linear-gradient(10deg, #c59d5f, #c59d5f, #c59d5f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.subtitle {
    font-size: 1rem;
    color: #e6e0d4; /* Cinza claro */
    line-height: 1.6;
    margin-bottom: 30px;
}

.subtitle strong {
    color: #e6e0d4;
    font-weight: 600;
}

.subtitle .highlight {
    color: #c59d5f; /* Dourado subtil no texto */
    display: block; /* Quebra a linha em ecrãs pequenos se necessário */
    margin-top: 5px;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* 6. Botões */
.buttons-wrapper {
    display: flex;
    gap: 15px; /* Espaço entre botões */
    justify-content: center;
}

.btn {
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    
    /* Esta linha é crucial: define que qualquer mudança demora 0.3s a acontecer */
    transition: all 0.3s ease; 
    
    display: inline-block; /* Garante que o scale funciona bem */
}

/* --- Efeito ao passar o mouse (Hover) --- */
.btn:hover {
    /* Aumenta o tamanho em 5% */
    transform: scale(1.05); 
    
    /* (Opcional) Adiciona um brilho subtil atrás para destacar */
    box-shadow: 0 0 20px rgba(197, 157, 95, 0.4); 
}

/* Botão Transparente (Learn more) */
.btn-outline {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.269);
}

/* Botão Dourado (Contact us) */
.btn-fill {
    background-color: #c59d5f;
    color: #ffffff;
    border: 0px solid #c59d5f;
}

.btn-fill:hover {
    background-color: #e4b060; /* Dourado um pouco mais escuro */
}

/* 7. Responsividade (Mobile) */
@media (max-width: 600px) {
    .title {
        font-size: 2rem; /* Título mais pequeno no telemóvel */
    }
    
    .buttons-wrapper {
        flex-direction: column; /* Botões um por cima do outro no mobile */
        width: 100%;
    }
    
    .btn {
        width: 100%; /* Botões ocupam a largura toda */
    }
}

/* --- Estilos da Secção Sobre --- */

.about-section {
    padding: 80px 20px; /* Espaçamento interno (topo/baixo e lados) */
    background-color: transparent; /* Deixa ver o fundo do body */
    display: flex;
    justify-content: center; /* Centraliza o bloco de texto no ecrã */
}

/* Container específico para texto, para não ficar muito largo */
.text-content {
    max-width: 800px;
    text-align: left; /* O texto nesta secção é alinhado à esquerda */
}

/* Título da Secção */
.section-title {
    font-family: 'Inter', sans-serif; /* Usando a fonte padrão, mas bold */
    font-size: 2.5rem;
    font-weight: 700;
    color: #e6e0d4;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* Destaque Dourado no Título */
.highlight-text {
    color: #c59d5f;
}

/* Linha Divisória */
.divider {
    height: 2px;
    width: 60px; /* Linha curta */
    background-color: #c59d5f; /* Cor dourada */
    margin-bottom: 30px;
    opacity: 0.7;
}

/* Texto do Corpo */
.text-body {
    font-size: 1.1rem;
    color: #e6e0d4; /* Cinza claro para leitura confortável */
    line-height: 1.8;
    margin-bottom: 20px;
}

.text-white {
    color: #e6e0d4; /* Destaque branco puro */
    font-weight: 600;
}

/* Frase Final em Destaque */
.final-statement {
    font-size: 1.2rem;
    color: #c59d5f;
    font-weight: 600;
    margin-top: 40px;
    line-height: 1.6;
}

/* --- Responsividade para a Secção Sobre --- */
@media (max-width: 600px) {
    .about-section {
        padding: 50px 20px;
    }

    .section-title {
        font-size: 1.8rem; /* Título menor no telemóvel */
    }

    .text-body, .final-statement {
        font-size: 1rem; /* Texto ajustado para leitura mobile */
    }
}

/* --- Secção Ecosystem Coverage --- */

.ecosystem-section {
    padding: 80px 20px;
    text-align: center;
    /* Fundo transparente para manter o background Matrix visível */
    background-color: transparent; 
}

/* Cabeçalho da secção */
.section-header {
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.ecosystem-title {
    font-size: 2.5rem;
    color: #c59d5f; /* Dourado */
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 3px solid #c59d5f; /* Linha sublinhada dourada */ 
    padding-bottom: 5px;
}

.ecosystem-subtitle {
    color: #e6e0d4;
    font-size: 1.1rem;
    margin-top: 15px;
}

.ecosystem-subtitle strong {
    color: #e6e0d4;
}

/* --- Secção Ecosystem Coverage --- */

.ecosystem-section {
    padding: 80px 20px;
    text-align: center;
    /* Fundo transparente para manter o background Matrix visível */
    background-color: transparent; 
}

/* Cabeçalho da secção */
.section-header {
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.ecosystem-title {
    font-size: 2.5rem;
    color: #c59d5f; /* Dourado */
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 3px solid #c59d5f; /* Linha sublinhada dourada */
    padding-bottom: 5px;
}

.ecosystem-subtitle {
    color: #e6e0d4;
    font-size: 1.1rem;
    margin-top: 15px;
}

.ecosystem-subtitle strong {
    color: #e6e0d4;
}

/* --- Secção Ecosystem Coverage (Refeita) --- */

.ecosystem-section {
    padding: 100px 20px; /* Mais espaço vertical */
    text-align: center;
    background-color: transparent; 
}

/* Cabeçalho da secção */
.section-header {
    max-width: 800px;
    margin: 0 auto 70px auto; /* Mais afastado dos cartões */
}

.ecosystem-title {
    font-size: 2.5rem;
    color: #c59d5f;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
    
    /* ESTA LINHA OBRIGA A BORDA ANTIGA A DESAPARECER: */
    border: none !important; 
}

/* Cria a linha amarela separada do texto */
.ecosystem-title::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px; /* Espessura da linha */
    background-color: #c59d5f;
    margin-top: 10px; /* Distância entre o texto e a linha */
}

.ecosystem-subtitle {
    color: #e6e0d4;
    font-size: 1.1rem;
    line-height: 1.5;
}

.ecosystem-subtitle strong {
    color: #e6e0d4;
    font-weight: 600;
}

/* --- Secção Ecosystem Coverage (Centralizada) --- */

.ecosystem-section {
    padding: 100px 20px;
    text-align: center;
    background-color: transparent;
    
    /* MÁGICA DE CENTRALIZAÇÃO: */
    display: flex;
    flex-direction: column;
    align-items: center; /* Alinha todos os filhos (título e grid) ao centro horizontalmente */
}

/* Cabeçalho */
.section-header {
    max-width: 800px;
    margin-bottom: 60px; /* Margem apenas em baixo */
    /* Removemos margin: 0 auto daqui porque o pai (ecosystem-section) já está a centralizar */
}

.ecosystem-title {
    font-size: 2.5rem;
    color: #c59d5f;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}


.ecosystem-subtitle {
    color: #e6e0d4;
    font-size: 1.1rem;
    line-height: 1.5;
}


/* --- GRID LAYOUT --- */
.cards-grid {
    display: grid;
    /* 3 Colunas iguais */
    grid-template-columns: repeat(3, 1fr); 
    gap: 24px;
    width: 100%; 
    max-width: 1200px;
    /* Garante que a grelha estica os itens para terem a mesma altura na linha */
    align-items: stretch; 
}

/* --- ESTILO DOS CARTÕES (Cards) --- */
.card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px 32px;
    text-align: left;
    
    /* O SEGREDOS PARA TAMANHO IGUAL: */
    height: 100%; /* Ocupa toda a altura disponível dada pela Grid */
    min-height: 250px; /* Define um tamanho mínimo fixo para que todos pareçam iguais, mesmo com pouco texto */
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
    position: relative; /* Para garantir o z-index correto */
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    z-index: 10; /* Traz o card para a frente ao passar o mouse */
}

.icon {
    margin-bottom: 24px;
}

.card h3 {
    color: #000000;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.3;
    padding-right: 10px;
    /* Opcional: define uma altura mínima para o título se eles variarem muito */
    /* min-height: 50px; */ 
}

.card p {
    color: #555555;
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 400;
    /* Isto empurra o texto para preencher o espaço, mas mantém o alinhamento no topo */
    flex-grow: 1; 
}

/* --- Responsividade --- */
@media (max-width: 1100px) {
    /* Em ecrãs médios, a grid ajusta-se */
    .cards-grid {
        grid-template-columns: repeat(2, 1fr); /* Passa a 2 colunas */
        max-width: 800px; /* Limita a largura para ficarem bonitos no centro */
    }
}

@media (max-width: 600px) {
    .cards-grid {
        grid-template-columns: 1fr; /* Passa a 1 coluna */
        width: 100%;
    }
    .ecosystem-title {
        font-size: 1.8rem;
    }
    .card {
        padding: 30px;
    }
}

/* --- Secção What We Do (Centralizada) --- */

.what-we-do-section {
    padding: 80px 20px;
    background-color: transparent;
    text-align: center;
    
    /* MÁGICA DE CENTRALIZAÇÃO: */
    display: flex;
    flex-direction: column;
    align-items: center; /* Alinha o título e a grelha ao centro */
}

/* Título Dourado */
.section-title-gold {
    font-size: 2.5rem;
    color: #c59d5f;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
    border: none !important; /* Garante que não há bordas duplicadas */
}

.section-title-gold::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: #c59d5f;
    margin-top: 10px;
}

/* --- Grelha de Serviços --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Colunas */
    gap: 60px 80px; /* Espaço entre linhas (60) e colunas (80) */
    width: 100%;
    max-width: 1100px; /* Largura boa para leitura */
    text-align: left;
}

/* --- Item de Serviço --- */
.service-item {
    padding: 10px;
}

.service-icon svg {
    width: 45px;
    height: 45px;
    margin-bottom: 20px;
}

.service-item h3 {
    color: #c59d5f;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

.service-item p {
    color: #e6e0d4;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
}

/* --- Responsividade --- */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; /* 1 Coluna no mobile */
        gap: 40px;
        max-width: 100%;
    }
    
    .section-title-gold {
        font-size: 2rem;
    }
}

/* --- Secção Philosophy --- */

.philosophy-section {
    padding: 100px 20px; /* Espaço generoso em cima e em baixo */
    background-color: transparent;
    
    /* CENTRALIZAÇÃO TOTAL DO BLOCO */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container específico para esta secção para controlar a largura do texto */
.philosophy-container {
    max-width: 800px; /* Impede que o texto fique demasiado largo em ecrãs grandes */
    text-align: center; /* Centraliza o texto linha a linha */
    width: 100%;
}

/* Estilo dos parágrafos principais */
.philosophy-text {
    font-size: 1.3rem; /* Texto ligeiramente maior para leitura fácil */
    color: #e6e0d4; /* Cinza claro */
    line-height: 1.6;
    margin-bottom: 40px; /* Espaço entre os parágrafos */
}

/* Classe utilitária para os destaques em branco (usada no HTML) */
.text-white {
    color: #e6e0d4;
    font-weight: 700;
}

/* Estilo da frase final de impacto */
.philosophy-footer {
    font-size: 1.4rem;
    color: #c59d5f; /* Branco puro */
    font-weight: 700;
    margin-top: 60px; /* Mais afastado do texto anterior */
    letter-spacing: 1px; /* Letras ligeiramente espaçadas */
}

/* --- Responsividade --- */
@media (max-width: 600px) {
    .philosophy-text {
        font-size: 1.1rem;
    }
    
    .philosophy-footer {
        font-size: 1.2rem;
    }
}

/* --- Secção de Perfil (Profile) --- */

.profile-section {
    padding: 80px 20px 100px 20px; /* Espaço generoso em baixo para finalizar o site */
    background-color: transparent;
    
    /* CENTRALIZAÇÃO TOTAL */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Container opcional para manter largura controlada */
.profile-container {
    max-width: 600px;
    width: 100%;
}

/* Foto de Perfil */
.profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid transparent; /* Podes mudar para #c59d5f se quiseres uma borda dourada */
    margin-bottom: 30px;
    
    /* Sombra inicial */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    
    /* --- MÁGICA DA ANIMAÇÃO --- */
    /* Isto define que a transformação vai demorar 0.4s e ter um efeito elástico suave */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    
    /* Garante que a imagem fica sobre os outros elementos ao crescer */
    position: relative;
    z-index: 2;
}


    /* --- Efeito ao Passar o Rato (Hover) --- */
.profile-pic:hover {
    /* Aumenta a imagem em 10% */
    transform: scale(1.1);
    
    /* Aumenta a sombra para dar a ilusão de que está a "levantar" */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    
    /* Opcional: Se quiseres que a borda fique dourada ao passar o rato */
    /* border-color: #c59d5f; */
}

/* Nome e Nickname */
.profile-name, .profile-nickname {
    color: #c59d5f;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.profile-nickname {
    margin-bottom: 25px; /* Espaço abaixo do nome */
    font-style: italic; /* Opcional: estilo itálico para o nickname */
}

/* Cargos / Títulos */
.profile-roles p {
    color: #e6e0d4;
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 400;
}

/* Bloco "Representing" */
.representing-block {
    margin-top: 30px;
    margin-bottom: 40px;
    color: #888888; /* Cinza mais escuro */
    font-size: 1rem;
}

.representing-block .company {
    display: block; /* Força a empresa a ficar na linha de baixo */
    color: #e6e0d4; /* Nome da empresa mais claro */
    font-weight: 600;
    margin-top: 5px;
}

/* --- Redes Sociais --- */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 25px; /* Espaço entre os ícones */
}

.social-link svg {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease, stroke 0.3s ease;
}

/* Efeito ao passar o rato nos ícones */
.social-link:hover svg {
    transform: translateY(-5px); /* O ícone sobe ligeiramente */
    stroke: #e6e0d4; /* Muda para branco ao passar o rato */
}

/* --- Secção de Confidencialidade --- */
.confidentiality-section {
    padding: 100px 20px;
    background-color: transparent;
    
    /* Mantém a centralização tal como na secção anterior */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* O resto (cards, grid, títulos) já está configurado no CSS anterior! */

/* --- Rodapé (Footer) Centralizado --- */
.site-footer {
    padding: 60px 20px 40px 20px;
    background-color: transparent;
    
    /* --- MÁGICA DA CENTRALIZAÇÃO --- */
    display: flex;
    flex-direction: column; /* Coloca um item debaixo do outro */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza o bloco inteiro na tela */
    text-align: center;      /* Centraliza o texto dentro do bloco */
    
    /* Camadas (para ficar acima da chuva) */
    position: relative;
    z-index: 1;
}

/* Opcional: Garante que o container interno não seja mais largo que a tela */
.site-footer .container {
    width: 100%;
    max-width: 800px; /* Controla a largura máxima do texto */
}

/* Estilos de texto (iguais ao que já tinhas) */
.copyright {
    color: #888888;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 15px;
}

.footer-disclaimer {
    color: #555555;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Responsividade */
@media (max-width: 600px) {
    .site-footer {
        padding: 40px 20px;
    }
    .footer-disclaimer {
        font-size: 0.85rem;
    }
}