/* =========================
   HOME.CSS — LANDING PAGE
   ========================= */

/* ---------- Hero ---------- */

.hero {
  padding: 10rem 0 0rem;
}

.hero-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  min-height: 70vh;
}

.hero-text-column {
  flex: 1;
  max-width: 640px;
}

.hero-subtitle {
  margin-top: 1.2rem;
  font-size: 1rem;
  color: var(--color-muted);
}

.hero-tagline {
  margin-top: 1.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.hero-actions {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-route-line {
  margin: 1.5rem 0 1rem;
  width: 140px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(207, 174, 89, 0),
    var(--color-gold),
    rgba(207, 174, 89, 0)
  );
}

.hero-highlights {
  margin-top: 1.5rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

.hero-highlights li {
  position: relative;
  padding-left: 1.25rem;
  max-width: 260px;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.hero-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: var(--color-gold);
}

.hero-video-column {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 100px;
}



/* ---------- Hero Image -------------------------------------------------------------- */

.hero-image-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
}

.hero-image {
  height: 75vh;
  max-height: 850px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 1rem;
  border: 1px solid var(--color-border);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.45);
}

/* ---------- Process (The Golden Route) ---------- */

.process-dark-bg {
  background: linear-gradient(180deg, #0a0f2c, #070b20); 
}

/* ---------- Video Section ---------- 
.video-section {
  padding: 6rem 2rem;
  background: linear-gradient(180deg, #0a0f2c, #070b20);
}

.video-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.video-text h2 {
  font-size: 2.4rem;
  margin-bottom: 1rem;
}

.video-text p {
  font-size: 1.1rem;
  opacity: 0.85;
  margin-bottom: 2rem;
} */

.video-wrapper video {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255, 215, 120, 0.25);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.video-wrapper.youtube {
  position: relative;
  width: 100%;
  line-height: 0; /* Remove o espaço fantasma em baixo */
  background-color: #000; /* Previne qualquer gap visível se o ratio falhar por 1px */
  padding-top: 56.25%; /* 16:9 ratio */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-gold);
  box-shadow: 
    0 0 0 1px rgba(13, 27, 42, 0.5), 
    0 0 35px rgba(193, 159, 76, 0.15), 
    0 20px 50px rgba(0, 0, 0, 0.6);   
  transition: all 0.4s ease;
}

.video-wrapper.youtube:hover {
  box-shadow: 
    0 0 0 1px rgba(13, 27, 42, 0.5),
    0 0 50px rgba(193, 159, 76, 0.25), /* Brilho aumenta */
    0 25px 60px rgba(0, 0, 0, 0.7);
  transform: translateY(-2px);
  border-color: #d7bb63; /* Um gold ligeiramente mais claro */
}

.video-wrapper.youtube iframe {
  position: absolute;
  
  /* Centrar perfeitamente */
  top: 50%;
  left: 50%;
  
  /* O TRUQUE: Aumentar ligeiramente o tamanho para "tapar buracos" */
  width: 100.5%;  /* Meio por cento a mais é suficiente */
  height: 100.5%;
  
  /* Puxa o vídeo de volta para o centro exato */
  transform: translate(-50%, -50%);
  
  display: block;
  border: none; /* Garante que o iframe não traz bordas próprias */
}

/* Mobile */
@media (max-width: 900px) {
  .video-container {
    grid-template-columns: 1fr;
  }
}
*/

/* ---------- Services Overview ---------- */

.service-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.service-icon {
  margin-bottom: 0.5rem;
}

.service-points {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* ---------- Not For Section ---------- */

.not-for-section {
  padding: 6rem 0;
  background-color: #050816; /* Fundo muito escuro */
  position: relative;
}

/* Layout flex para alinhar titulo e lista em ecrãs grandes se quiseres, 
   ou coluna centralizada. Aqui mantive coluna focada. */
.not-for-layout {
  max-width: 800px;
  margin: 0 auto;
}

.not-for-header {
  margin-bottom: 3rem;
  text-align: center; /* Mantemos o titulo centrado para ancorar */
}

.not-for-header h2 {
  font-size: 2.2rem;
  color: var(--color-text);
}

/* O "sal": Destacar o NOT com uma cor subtil mas de aviso, ou apenas negrito */
.text-error {
  color: #CD7F68; /* Um vermelho desaturado premium, ou podes usar o Gold */
  /* Se preferires manter tudo Gold: color: var(--color-gold); */
  font-weight: 700;
  letter-spacing: 0.05em;
}

.not-for-header p {
  margin-top: 0.5rem;
  font-size: 1rem;
  opacity: 0.6;
}

/* O "Bloco" Monolítico */
.exclusion-panel {
  background: rgba(255, 255, 255, 0.02); /* Vidro muito subtil */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 2rem 3rem;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
  margin: 3rem auto 0;/* Sombra interna para profundidade */
  transition: all;
}



.exclusion-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.exclusion-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.3s ease;
  opacity: 0.7; /* Estado normal "dimmed" */
}

.exclusion-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Interaction: Ao passar o rato, foca no item */
.exclusion-item:hover {
  opacity: 1;
  transform: translateX(5px); /* Ligeiro movimento para a direita */
}

.exclusion-icon {
  flex-shrink: 0;
  color: #555; /* Icon apagado por defeito */
  padding-top: 0.2rem; /* Ajuste ótico para alinhar com o texto */
  transition: color 0.3s ease;
}

.exclusion-item:hover .exclusion-icon {
  color: #CD7F68; /* Vermelho desaturado no hover */
  /* Ou Gold: var(--color-gold) */
}

.exclusion-text {
  font-size: 1.05rem;
  color: var(--color-muted);
  line-height: 1.5;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
  .exclusion-panel {
    padding: 1.5rem;
  }
  
  .exclusion-item {
    gap: 1rem;
  }
  
  .not-for-header h2 {
    font-size: 1.8rem;
  }
}


/* ---------- Why Us ---------- */

.why-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.why-points {
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* ---------- Process ---------- */

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}


.process-step h3 {
  color: var(--color-gold); /* Headline a Dourado como pediste */
  font-size: 1.2rem;        /* Ajustado para destaque */
  margin-bottom: 0.75rem;
  font-family: var(--font-heading);
}

/* Adiciona uma linha ténue à esquerda de cada passo */
.process-step {
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.1); /* Linha subtil cinza */
  padding-left: 2rem;
  padding-bottom: 2rem;
}

/* A barra dourada que cresce no hover ou ativa */
.process-step::before {
  content: "";
  position: absolute;
  left: -1px; /* Sobrepõe a borda cinza */
  top: 0;
  width: 2px;
  height: 0%; /* Começa a zero */
  background-color: var(--color-gold);
  transition: height 0.4s ease;
}

.process-step:hover::before {
  height: 100%; /* Enche a barra a ouro ao passar o rato */
}


/* Remove a borda do último item para não ficar pendurada 
.process-steps .process-step:last-child {
  border-left-color: transparent;
}
.process-steps .process-step:last-child::before {
  display: none;
} */

.step-index {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  margin-bottom: 0.3rem;
}

/* ---------- Case Studies ---------- */

.case-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.case-badge {
  display: inline-flex;
  align-items: center;
}

.case-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

.case-detail {
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.case-detail dt {
  font-weight: bold;
  color: var(--color-text);
}

.case-detail dd {
  margin: 0 0 0.5rem;
  color: var(--color-muted);
}

/* ---------- Case Studies (List Layout) ---------- */
.case-studies-list-layout {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.case-row {
  display: grid;
  grid-template-columns: 2fr 2fr 50px; /* Título | Resultado | Seta */
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease, padding-left 0.3s ease;
  cursor: default; /* ou pointer se for clicável */
}

.case-row:hover {
  background: rgba(255, 255, 255, 0.02);
  padding-left: 1rem; /* Pequeno movimento de "slide" luxuoso */
}

.case-row-header h3 {
  font-size: 1.25rem;
  margin: 0.5rem 0 0;
  color: var(--color-text);
}

.case-row-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  border: 1px solid rgba(207, 174, 89, 0.3);
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
}

.case-row-result .label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.2rem;
}

.case-row-result p {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.arrow-icon {
  font-size: 1.5rem;
  color: var(--color-gold);
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.case-row:hover .arrow-icon {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile adjust */
@media (max-width: 768px) {
  .case-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem 0;
  }
  .case-row-action {
    display: none;
  }
}
/* ---------- Subtle Background Motion ---------- */

.subtle-motion-bg {
  background: linear-gradient(
    120deg,
    #010e01,
    #0e023a,
    #210d3b
  );
  background-size: 200% 200%;
  animation: bgShift 14s ease-in-out infinite;
}

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


/* ---------- About Teaser ---------- */

.about-grid {
  margin-top: 2rem;
}

.about-pill {
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background-color: var(--color-card-dark);
}

.about-actions {
  margin-top: 2rem;
  text-align: center;
}


@keyframes waveFloat {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-30px);
  }
}

/* ---------- Section Separator ---------- */

.section-separator {
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.section-separator img {
  width: 100%;
  height: auto;
  display: block;
}

/* base.css */

.section-header h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem; 
}

.section-header h2::after {
  content: "";
  display: block;
  width: 90%;           
  height: 2px;           
  background-color: var(--color-gold);
  margin: 0.1rem auto 0;    
  border-radius: 99px;    
}

/* ---------- Final CTA ---------- */

.final-cta {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.final-cta-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.subbbbtle-motion-bg {
  background: linear-gradient(
    120deg,
    #01040e,
    #0a0225,
    #1d0a36
  );
  background-size: 200% 200%;
  animation: bgShift 14s ease-in-out infinite;
}

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

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .hero-layout {
    flex-direction: column;
  }

  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .process-steps {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 3.5rem 0;
  }
}

/* ---------- Why Us (Manifesto Layout) ---------- */

.why-blueprint-layout { /* Podes manter a classe ou mudar para .why-manifesto */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem; /* Muito espaço entre colunas */
  padding-top: 2rem;
}

.why-pillar {
  /* Sem borders, sem background */
  position: relative;
}

.pillar-num {
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-gold);
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  display: block;
  border-bottom: 2px solid var(--color-gold); /* Pequena linha dourada só sob o número */
  width: fit-content;
  padding-bottom: 0.5rem;
}

.why-pillar h3 {
  font-size: 1.8rem; /* Título maior */
  line-height: 1.2;
  margin-bottom: 1rem;
}

.why-pillar p {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.why-list-minimal li {
  color: var(--color-muted); /* Texto da lista discreto */
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Linha subtil entre itens */
  padding: 0.5rem 0;
}

.why-list-minimal li::before {
  content: "+"; /* Símbolo mais técnico */
  color: var(--color-gold);
  margin-right: 0.5rem;
  font-weight: bold;
}

@media (max-width: 900px) {
  .why-blueprint-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}








/* ---------- Why Us (Asymmetrical Layout) ---------- */

/* Container Principal: Flex para desktop, Coluna para mobile */
.why-asym-layout {
  display: flex;
  gap: 4rem;
  align-items: flex-start; /* Alinha ao topo */
  padding-top: 2rem;
}

/* Coluna da Esquerda (Intro) */
.why-intro {
  flex: 0 0 35%; /* Ocupa 35% da largura */
  position: sticky; /* Fica preso se a lista for longa (opcional) */
  top: 6rem;
}

/* Ajuste para o texto header alinhar à esquerda nesta secção */
.section-header.align-left {
  text-align: left;
  margin-bottom: 0;
}

.section-header.align-left h2::after {
  display: none; /* Remove a linha centralizada default do h2 */
}

/* Texto de manifesto grande */
.why-big-statement {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--color-muted);
  margin-top: 1rem;
}

.text-white {
  color: var(--color-text);
  font-weight: bold;
}

/* ---------- Why Us List Fix (Versão Flexbox - Mais estável) ---------- */

.why-list-minimal {
  list-style: none;
  padding: 0;
  margin: 0;
}

.why-list-minimal li {
  /* O Flexbox alinha a bola e o texto lado a lado automaticamente */
  display: flex;
  align-items: flex-start; /* Alinha ao topo da linha */
  gap: 0.1rem; /* Controla a distância entre a bola e o texto aqui */
  
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.5;
}

.why-list-minimal li::before {
  content: "";
  /* Garante que a bola não encolhe se o texto for comprido */
  flex-shrink: 0; 
  
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-gold);
  
  /* O SEGREDO DO ALINHAMENTO: */
  /* Como estamos a usar flex-start, usamos margin-top para empurrar a bola para baixo */
  /* Se ainda estiver alta, aumenta este valor (ex: 0.6rem, 0.65rem) */
  margin-top: 0.55rem; 
}

/* Cada Item da Lista */
.why-stack-item {
  display: flex;
  gap: 2rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

/* O primeiro item não precisa de tanto padding no topo */
.why-stack-item:first-child {
  padding-top: 0;
}

/* O último item não tem borda */
.why-stack-item:last-child {
  border-bottom: none;
}

/* Interaction: Hover subtil */
.why-stack-item:hover {
  transform: translateX(10px); /* Move ligeiramente para a direita */
}

.why-stack-item:hover h3 {
  color: var(--color-gold);
}

/* Número Gigante */
.stack-number {
  font-family: var(--font-heading); /* Ou mono */
  font-size: 2.5rem;
  color: rgba(207, 174, 89, 0.2); /* Gold muito transparente */
  line-height: 1;
  font-weight: bold;
}

/* Conteúdo */
.stack-content h3 {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
  transition: color 0.3s ease;
}

.stack-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 90%;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .why-asym-layout {
    flex-direction: column;
    gap: 3rem;
  }

  .why-intro {
    flex: auto;
    position: static;
    width: 100%;
  }

  .why-big-statement {
    font-size: 1.5rem;
  }
  
  .why-stack-item {
    gap: 1.5rem;
    padding: 2rem 0;
  }

  .stack-number {
    font-size: 2rem;
  }
}


/* =========================
   INFINITE TECH TICKER (Corrigido)
   ========================= */

.tech-ticker-section {
  padding: 0 0 5rem;
  text-align: center;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

/* --- CORREÇÃO DO TEXTO (LABEL) --- */
.stack-label {
  font-size: 0.85rem; /* Ligeiramente maior para leitura */
  font-weight: 600;    /* Mais peso para se destacar */
  text-transform: uppercase;
  letter-spacing: 0.15em; /* Espaçamento mais premium */
  color: var(--color-text); /* Usa a cor de texto principal */
  opacity: 0.8; /* Muito mais visível agora (era 0.5) */
  margin-bottom: 2rem;
}
/* -------------------------------- */

.ticker-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  /* Máscara de gradiente nas pontas */
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.ticker-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  animation: scrollTicker 40s linear infinite;
}

.ticker-track:hover {
  animation-play-state: paused;
}

/* --- CORREÇÃO DOS LOGOS --- */
.slide img {
  height: 32px; /* Um pouco maiores para se perceberem os detalhes */
  width: auto;
  
  /* O ESTADO "FANTASMA" VISÍVEL */
  /* Não usamos grayscale para não matar os detalhes */
  /* Usamos apenas opacidade para os tornar subtis */
  opacity: 0.6; /* Visíveis, mas não gritam. Ajusta entre 0.5 e 0.7 se precisares. */
  
  /* Se os logos forem pretos e o fundo escuro, inverte-os para branco: */
  /* filter: invert(1); */
  
  transition: all 0.3s ease;
  cursor: pointer;
  /* Um pequeno blur ajuda a integrá-los no fundo */
  filter: blur(0.5px); 
}

/* O ESTADO "ATIVO" (HOVER) */
.slide img:hover {
  opacity: 1; /* Opacidade total */
  filter: blur(0px); /* Foco total */
  /* Se usaste invert(1) em cima, tens de o manter aqui também: */
  /* filter: invert(1) blur(0px); */
  
  transform: scale(1.1); /* Ligeiro pop */
}
/* -------------------------- */

@keyframes scrollTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .ticker-track {
    gap: 2.5rem;
    animation-duration: 30s;
  }
  .slide img {
    height: 26px; /* Ajuste mobile */
  }

    /* --- Hero Section (Ajuste do Vídeo e Texto) --- */
    .hero {
        padding: 9rem 1.5rem 4rem !important; /* Espaço para não bater no header */
    }

    .hero-layout {
        flex-direction: column;
        text-align: center;
        gap: 4rem; /* Mais espaço entre texto e vídeo */
    }

    .hero-text-column {
        max-width: 100%;
    }



    .hero-video-container {
        width: 100% !important;
        max-width: none !important; 
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }
    
    .hero-video-container video {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    h1 {
        font-size: 2.1rem;
        line-height: 1.2;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-route-line {
        margin: 2rem auto;
    }

    /* --- Secção Process (Ajustes de espaçamento) --- */
    .process-steps {
        gap: 3rem;
    }

}

/* Especial para a secção de serviços na Homepage em Mobile */
@media (max-width: 768px) {
    
    #services-overview.bg-tech-grid {
        /* 1. Mudamos de radial (círculo) para linear (linha vertical) */
        /* Isso garante que as laterais não sejam cortadas e o fade só comece no fim */
        -webkit-mask-image: linear-gradient(
            to bottom, 
            black 0%, 
            black 92%,    /* Fica 100% visível até aos 92% da altura */
            transparent 100%
        ) !important;

        mask-image: linear-gradient(
            to bottom, 
            black 0%, 
            black 92%, 
            transparent 100%
        ) !important;

        /* 2. Aumentamos o respiro no fundo da secção */
        /* Assim, o "efeito de desaparecer" acontece no espaço vazio, não em cima do texto */
        padding-bottom: 4rem !important; 
    }

    /* 3. Ajuste dos cartões para não ficarem "colados" ao fade */
    #services-overview .grid {
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    /* 1. Fazemos o container do Hero ocupar a largura total do ecrã */
    #hero .container.hero-layout {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 2. Devolvemos o padding apenas ao TEXTO, para ele não colar às bordas */
    .hero-text-column {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin-bottom: 3rem; /* Espaço para o vídeo não colidir com o texto */
    }

    /* 3. O Vídeo agora pode crescer naturalmente sem ser empurrado */
    .hero-video-column {
        width: 100%;
        padding: 0; /* Se queres que o vídeo cole nas bordas */
        /* Se preferires que o vídeo tenha um mini respiro, usa: padding: 0 1rem; */
    }

    .video-wrapper.youtube {
        width: 100%;
        aspect-ratio: 16 / 9; /* Mantém o formato maior e proporcional */
        border-radius: 12px;    /* No mobile, sem bordas parece mais "cinematográfico" */
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);    /* Mantém a sombra para dar profundidade */
    }

    /* Garante que o iframe preenche tudo */
    .video-wrapper.youtube iframe {
        width: 100% !important;
        height: 100% !important;
    }
}

/* Hero underline fix: keep "for your business" together on mid-mobile widths */
@media (min-width: 360px) and (max-width: 520px) {
  #hero .keyword {
    white-space: nowrap;
  }

  /* opcional, mas ajuda a evitar "quase uma palavra por linha" */
  #hero h1 {
    font-size: 1.95rem;
    line-height: 1.08;
  }
}