:root{
  --bg:          #05070a;
  --bg-2:        #080c11;
  --bg-3:        #0b1016;
  --surface:     #0d1218;
  --surface-2:   #10161d;
  --border:      rgba(255,255,255,0.08);
  --border-soft: rgba(255,255,255,0.05);

  --accent:      #00d47d;
  --accent-2:    #00f090;
  --accent-glow: rgba(0,212,125,0.18);
  --teal:        #0a7a52;
  --teal-2:      #00c47a;

  --text:        #f2f6f6;
  --text-dim2:   #9fb0b2;
  --text-mut:    #a9b8ba;
  --text-dimmer: #6b7c7e;

  --font-display: 'Space Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-body:    'Inter', sans-serif;

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 26px;
  --container: 1180px;
  --transition: all .25s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:var(--transition)}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.01em;
}
h1{color:var(--text-dim2)}
h1 b,h2 b{color:#fff;font-weight:600}
h2{font-size:clamp(1.8rem,3.2vw,2.4rem);color:var(--text-dim2)}
h3{font-size:1.05rem;color:#fff;font-weight:600}
p{color:var(--text-mut)}
.text-accent{color:var(--accent)}

.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem}
.section{padding:6rem 0}
.section-alt{background:var(--bg-2)}

/* Acessibilidade */
.skip-link{
  position:absolute;left:1rem;top:-60px;z-index:2000;
  background:var(--accent);color:#04110c;
  padding:.7rem 1.2rem;border-radius:999px;
  font-family:var(--font-mono);font-size:.85rem;font-weight:600;
  transition:top .2s ease;
}
.skip-link:focus{top:1rem}

a:focus-visible,
button:focus-visible,
.nav-toggle:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem 1.1rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-mut);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.02em;
  margin-bottom:1.4rem;
}

.section-header{text-align:center;max-width:600px;margin:0 auto 3.25rem}
.section-header p{margin-top:.85rem;font-size:.95rem}

/* Botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.6rem;
  border-radius:999px;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.85rem;
  border:1px solid transparent;
  transition:var(--transition);
  white-space:nowrap;
}
.btn-arrow{transition:transform .3s cubic-bezier(.4,0,.2,1);font-size:.8em}
.btn:hover .btn-arrow{transform:translateX(4px)}
.btn-dark{background:#0c1116;color:#fff;border-color:var(--border)}
.btn-dark:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-primary{background:#fff;color:#04110c}
.btn-primary:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 10px 30px -6px rgba(0,212,125,0.45)}
.btn-outline{border-color:var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:.6rem 1.3rem;font-size:.78rem}

.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:1.25rem 0;
  transition:padding .25s ease, background .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.navbar.scrolled{
  padding:.85rem 0;
  background:rgba(5,7,10,0.78);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--border-soft);
}
.navbar .container{display:flex;align-items:center;justify-content:space-between}
.navbar-brand{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:#fff;letter-spacing:.02em}
.navbar-brand img{height:30px;width:auto}

.nav-pill{
  display:flex;align-items:center;gap:1.7rem;
  padding:.65rem 1.6rem;
  border-radius:999px;
  background:rgba(4,8,7,0.55);
  border:1px solid var(--border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  position:absolute;left:50%;transform:translateX(-50%);
}
.nav-link{
  font-family:var(--font-mono);font-size:.8rem;color:var(--text-mut);
  text-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.nav-link:hover,.nav-link.active{color:#fff}

.nav-right{display:flex;align-items:center;gap:.9rem}
.nav-toggle{
  display:none;flex-direction:column;gap:5px;
  padding:.4rem;
}
.nav-toggle span{width:20px;height:2px;background:#fff;transition:var(--transition)}

/* HERO */
.hero{
  position:relative;
  padding:10rem 0 4.5rem;
  overflow:hidden;
  background:#050708;
}
.hero-glow{
  position:absolute;
  top:-8%;left:50%;transform:translateX(-50%);
  width:100%;
  max-width:none;
  height:1150px;
  background:
    radial-gradient(ellipse 90% 60% at 50% 12%, rgba(0,212,125,0.9), transparent 62%),
    radial-gradient(ellipse 130% 75% at 50% 18%, rgba(0,150,95,0.65), transparent 68%),
    radial-gradient(ellipse 160% 90% at 50% 24%, rgba(0,80,55,0.4), transparent 75%);
  mask-image:linear-gradient(180deg, black 0%, black 25%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.25) 65%, transparent 100%);
  z-index:0;
  animation:heroBreathe 9s ease-in-out infinite;
  transform-origin:50% 10%;
}
@keyframes heroBreathe{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.035)}
}
/* Grelha de quadrados — a textura técnica que o site tinha em produção.
   Feita em ::before para não precisar de HTML. A máscara apaga-a onde o
   brilho verde é intenso (centro-topo); sem isso, o grid era engolido lá
   e só aparecia nos cantos, com ar de acidente. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,212,125,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,125,0.045) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 75% 55% at 50% 12%, transparent 20%, #000 75%);
  mask-image:radial-gradient(ellipse 75% 55% at 50% 12%, transparent 20%, #000 75%);
}

.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* Teia de partículas (canvas). O rato é seguido no contentor do hero, não
   aqui — por isso o canvas fica inerte e nunca interceta cliques. */
.hero-network{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}

.hero-particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-particles span{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--accent);opacity:.5;filter:blur(1px);
  animation:drift 9s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(10px,-26px)}
}
.hero-vignette{
  position:absolute;inset:0;z-index:1;
  /* Decorativo: sem isto ficava por cima do canvas e roubava-lhe o rato,
     e a teia deixava de reagir ao cursor. */
  pointer-events:none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 58%, var(--bg) 92%),
    radial-gradient(130% 100% at 48% 15%, transparent 45%, rgba(2,4,5,0.65) 100%);
}
.hero .container{position:relative;z-index:2}
.hero-grid{text-align:center}
.hero-inner{max-width:760px;margin:0 auto}
.hero-title{margin-bottom:1.4rem;font-size:clamp(2.4rem,5.4vw,4.2rem)}
.hero-subtitle{max-width:480px;margin:0 auto 2.5rem;font-size:1rem;color:var(--text-mut)}
.hero-actions{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap}

[data-hero]{visibility:hidden}
.no-js [data-hero],
.reduced-motion [data-hero]{visibility:visible}

.trust-strip{position:relative;z-index:2;text-align:center;margin-top:4.5rem}
.trust-label{
  font-family:var(--font-mono);
  font-size:.75rem;color:var(--text-dimmer);
  letter-spacing:.03em;margin-bottom:1.75rem;
}
.tech-marquee{
  position:relative;
  max-width:100%;
  overflow:hidden;
  padding:.5rem 0;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.tech-marquee::after{
  content:"";
  position:absolute;inset:0;
  z-index:2;pointer-events:none;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.10) 48%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.10) 52%, transparent 60%);
  background-size:250% 100%;
  animation:shimmerSweep 6s ease-in-out infinite;
}
@keyframes shimmerSweep{
  0%{background-position:160% 0}
  55%,100%{background-position:-60% 0}
}
.tech-track{
  display:flex;
  width:max-content;
  animation:marqueeScroll 36s linear infinite;
}
.tech-marquee:hover .tech-track{animation-play-state:paused}
.tech-set{
  display:flex;align-items:center;gap:3.25rem;
  padding-right:3.25rem;
}
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.tech-chip{
  display:flex;align-items:center;gap:.6rem;
  white-space:nowrap;
  transition:var(--transition);
}
.tech-chip i{
  font-size:1.7rem;
  color:#c7d3d4;
  filter:grayscale(1) brightness(1.15);
  opacity:.68;
  transition:filter .35s ease, opacity .35s ease, transform .35s ease, color .35s ease;
}
.tech-chip span{
  font-family:var(--font-mono);font-weight:600;font-size:.92rem;
  color:#c7d3d4;
  opacity:.68;
  transition:color .35s ease, opacity .35s ease;
}
.tech-chip:hover{transform:translateY(-3px)}
.tech-chip:hover i{filter:none;opacity:1;color:var(--accent);transform:scale(1.1)}
.tech-chip:hover span{color:#fff;opacity:1}

.reduced-motion .tech-track{animation:none}
.reduced-motion .tech-marquee::after{animation:none;display:none}
.reduced-motion .tech-set.dup{display:none}

/* CARDS & GRELHAS (Serviços e Blog) */
.card-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(160px,auto);
  grid-auto-flow:dense;
  gap:1.1rem;
}

/* ESPECÍFICO DE BENTO PARA SERVIÇOS */
#cardGrid .card:nth-child(1){grid-column:span 2;grid-row:span 2}
#cardGrid .card:nth-child(2){grid-column:span 2;grid-row:span 1}
#cardGrid .card:nth-child(3){grid-column:span 1;grid-row:span 1}
#cardGrid .card:nth-child(4){grid-column:span 1;grid-row:span 1}
#cardGrid .card:nth-child(5){grid-column:span 2;grid-row:span 1}
#cardGrid .card:nth-child(6){grid-column:span 2;grid-row:span 1}

/* ESPECÍFICO PARA A GRELHA DO BLOG */
#blogGrid{
  grid-template-columns:repeat(3,1fr);
}
#blogGrid .card{
  grid-column:span 1 !important;
  grid-row:span 1 !important;
}

.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.9rem 1.7rem;
  transition:var(--transition);
  text-align:left;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(0,212,125,0.14), transparent 70%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.card:hover::before{opacity:1}
.card:hover{
  border-color:rgba(0,212,125,0.32);
  transform:translateY(-6px);
  box-shadow:0 24px 50px -24px rgba(0,212,125,0.28);
}
.card:hover .card-icon{transform:translateY(-3px) rotate(-4deg);color:var(--accent)}

.card-icon{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-size:1.3rem;
  margin-bottom:1.4rem;
  transition:transform .3s ease, color .3s ease;
}
.card h3{margin-bottom:.6rem}
.card p{font-size:.87rem}
.card-feature h3{font-size:1.3rem}
.card-feature p{font-size:.95rem;max-width:340px}
.card-accent{
  background:radial-gradient(140% 160% at 100% 0%, var(--accent-glow), transparent 60%), var(--surface);
}
.card-wireframe{margin-top:auto;padding-top:1.4rem;display:flex;flex-direction:column;gap:.5rem}
.wire-bar{height:20px;width:40%;border-radius:5px;background:var(--border)}
.wire-line{height:7px;border-radius:4px;background:var(--border-soft);border:1px solid var(--border)}
.wire-line.w1{width:100%}.wire-line.w2{width:80%}.wire-line.w3{width:60%}

.section-cta{text-align:center;margin-top:3rem}
.section-cta p{margin-bottom:1.1rem;font-size:.9rem;font-family:var(--font-mono)}

/* SOBRE E PORTFÓLIO (Why Grid) */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.1rem;
}
.why-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.6rem 1.6rem 1.8rem;
  text-align:left;
  overflow:hidden;
  transition:var(--transition);
}
.why-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(0,212,125,0.1), transparent 70%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.why-card:hover::before{opacity:1}
.why-card:hover{border-color:rgba(0,212,125,0.25);transform:translateY(-4px)}
.why-row-2{
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.1rem;
}
.why-visual{
  height:110px;display:flex;align-items:center;justify-content:center;
  margin-bottom:1.4rem;position:relative;
}
.why-card h3{font-size:1rem;margin-bottom:.45rem}
.why-card p{font-size:.85rem}

.mock-avatars{display:flex}
.mock-avatars span{
  width:46px;height:46px;border-radius:50%;
  border:2px solid var(--surface);
  margin-left:-14px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.75rem;color:#fff;font-weight:600;
}
.mock-avatars span:first-child{margin-left:0}

.mock-chat{width:100%;display:flex;flex-direction:column;gap:.4rem;align-items:flex-start}
.mock-bubble{
  background:var(--bg-3);border:1px solid var(--border);
  border-radius:12px;padding:.45rem .8rem;
  font-size:.72rem;color:var(--text-dim2);font-family:var(--font-mono);
}
.mock-bubble.dots{padding:.5rem .9rem;color:var(--text-dimmer)}

.mock-chart{display:flex;align-items:flex-end;gap:4px;height:70px;width:100%}
.mock-chart span{flex:1;background:var(--border);border-radius:3px 3px 0 0}
.mock-chart span.hi{background:var(--accent)}

/* PORTFÓLIO — SWIPER */
.portfolio-swiper-wrap{position:relative}
.portfolio-swiper{overflow:hidden;padding:.3rem .3rem 2.6rem}
.portfolio-swiper .swiper-slide{height:auto}
.portfolio-swiper .why-card{height:100%}

.portfolio-swiper-nav{
  display:flex;align-items:center;justify-content:center;gap:1.4rem;
  margin-top:.6rem;
}
.swiper-nav-btn{
  width:42px;height:42px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text-mut);font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);
}
.swiper-nav-btn:hover{color:var(--accent);border-color:var(--accent)}
/* A paginação vive em .portfolio-swiper-nav (irmã do carrossel), não dentro
   de .portfolio-swiper. Os seletores antigos exigiam o contrário, por isso
   nunca casavam: ficava o position:absolute do Swiper, com width:100% e
   z-index:10 — a faixa cobria os botões de seta e só a borda de cima
   respondia ao clique. Os bullets ficavam azuis pela mesma razão.
   Passam a depender da classe do próprio elemento. */
/* Dois nomes de classe: o Swiper impõe width:100% através de
   `.swiper-pagination-bullets.swiper-pagination-horizontal` (especificidade
   0,2,0). Com um seletor só, a paginação continuava a ocupar a barra toda e
   empurrava as setas para as pontas. */
.portfolio-swiper-nav .portfolio-pagination{position:static;width:auto}
.portfolio-pagination .swiper-pagination-bullet{
  background:var(--border);opacity:1;width:7px;height:7px;
}
.portfolio-pagination .swiper-pagination-bullet-active{background:var(--accent);width:20px;border-radius:4px}

/* MODAL — DETALHE DO PROJETO */
.project-modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(3,6,9,0.82);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:2rem;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.project-modal-overlay.is-open{opacity:1;visibility:visible}

.project-modal{
  position:relative;width:100%;max-width:680px;max-height:88vh;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow-y:auto;
  transform:translateY(24px) scale(.98);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.project-modal-overlay.is-open .project-modal{transform:translateY(0) scale(1)}

.project-modal-image{
  width:100%;height:220px;background-size:cover;background-position:center;
  background-color:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.project-modal-body{padding:2rem 2.2rem 2.2rem}
.project-modal-body h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:.5rem 0 1rem}
.project-modal-desc{color:var(--text-dim2);line-height:1.75;font-size:.92rem}

.project-modal-meta{
  display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.3rem;
  padding-top:1.2rem;border-top:1px solid var(--border);
  font-size:.85rem;color:var(--text-dimmer);
}
.project-modal-meta div{display:flex;align-items:center;gap:.5rem}

.project-modal-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.project-modal-actions{margin-top:1.6rem}

@media (max-width:720px){
  .project-modal-body{padding:1.6rem 1.4rem 1.8rem}
  .project-modal-image{height:170px}
}

/* CARD CLICÁVEL — EQUIPA */
.why-card-clickable{cursor:pointer}
.why-card-clickable:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.why-card-hint{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:auto;padding-top:1rem;
  font-family:var(--font-mono);font-size:.72rem;color:var(--accent);
  opacity:0;transform:translateY(4px);
  transition:opacity .25s ease, transform .25s ease;
}
.why-card-clickable:hover .why-card-hint,
.why-card-clickable:focus-visible .why-card-hint{opacity:1;transform:translateY(0)}

/* MODAL — EQUIPA */
.team-modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(3,6,9,0.82);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:2rem;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.team-modal-overlay.is-open{opacity:1;visibility:visible}
body.team-modal-locked{overflow:hidden}

.team-modal{
  position:relative;
  width:100%;max-width:900px;max-height:88vh;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2.6rem 2.2rem 2.2rem;
  overflow-y:auto;
  transform:translateY(24px) scale(.98);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.team-modal-overlay.is-open .team-modal{transform:translateY(0) scale(1)}

.team-modal-close{
  position:absolute;top:1.2rem;right:1.2rem;
  width:38px;height:38px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-mut);font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);
}
.team-modal-close:hover{color:var(--accent);border-color:var(--accent)}

.team-modal-header{text-align:center;max-width:520px;margin:0 auto 2.2rem}
.team-modal-header h2{margin:.6rem 0 .6rem;font-size:clamp(1.4rem,2.4vw,1.9rem)}
.team-modal-header p{color:var(--text-dim2);font-size:.92rem}

.team-mosaic{
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.team-row{overflow:hidden;padding:.6rem 0}
.team-track{display:flex;width:max-content;animation:teamScroll 30s linear infinite}
.team-track-rev{animation-name:teamScrollRev}
.team-row:hover .team-track{animation-play-state:paused}
.team-set{display:flex;gap:1.1rem;padding-right:1.1rem}

@keyframes teamScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes teamScrollRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.team-card{
  flex-shrink:0;width:150px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.3rem 1rem;text-align:center;
  transition:var(--transition);
}
.team-card:hover{border-color:rgba(0,212,125,0.32);transform:translateY(-4px)}
.team-avatar{
  width:56px;height:56px;border-radius:50%;
  margin:0 auto .8rem;
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:.9rem;color:#fff;
  border:2px solid var(--border);
}
.team-card strong{display:block;font-size:.85rem;color:var(--text);margin-bottom:.2rem}
.team-card span{display:block;font-size:.72rem;color:var(--text-dimmer)}

@media (max-width:720px){
  .team-modal{padding:2.2rem 1.3rem 1.6rem}
  .team-card{width:130px}
}

.mock-nodes{
  width:100%;height:100%;
  background-image:radial-gradient(circle at 25% 30%, var(--border) 0 2px, transparent 2px),
                    radial-gradient(circle at 75% 25%, var(--border) 0 2px, transparent 2px),
                    radial-gradient(circle at 20% 75%, var(--border) 0 2px, transparent 2px),
                    radial-gradient(circle at 80% 75%, var(--border) 0 2px, transparent 2px);
  position:relative;
}
.mock-nodes .core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:32px;height:32px;background:#fff;border-radius:8px;
}

.mock-timeline{width:100%;display:flex;flex-direction:column;gap:.45rem}
.mock-timeline .row{display:flex;gap:.4rem;font-family:var(--font-mono);font-size:.68rem}
.mock-timeline .chip{
  background:var(--bg-3);border:1px solid var(--border);border-radius:6px;
  padding:.25rem .55rem;color:var(--text-dim2);
}
.mock-timeline .chip.active{background:var(--teal-2);color:#04110c;border-color:transparent}

/* PROCESSO */
.process-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;
  position:relative;
}
.process-row::before{
  content:"";position:absolute;top:24px;left:12%;right:12%;height:1px;
  background:var(--border);z-index:0;
}
.process-step{position:relative;z-index:1;text-align:center;padding:0 .6rem}
.process-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  font-family:var(--font-mono);color:var(--accent);font-weight:600;
  margin-bottom:1.1rem;
}
.process-step h3{margin-bottom:.5rem;font-size:1rem}
.process-step p{font-size:.85rem}

/* ESTATÍSTICAS */
.stats-section{
  position:relative;text-align:center;
  padding:4rem 0 2rem;
  overflow:hidden;
}
.stats-row{
  position:relative;z-index:1;
  display:flex;justify-content:center;gap:5rem;flex-wrap:wrap;
}
.stat-block{display:flex;flex-direction:column;align-items:center}
.stat-block strong{
  display:block;font-family:var(--font-display);
  font-size:clamp(2.1rem,4vw,2.9rem);color:#fff;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.stat-block span{font-size:.85rem;color:var(--text-mut)}
.stat-spark{width:90px;height:26px;margin-top:.7rem;overflow:visible}
.stat-spark polyline{
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:300;stroke-dashoffset:300;
  transition:stroke-dashoffset 1.3s ease .3s;
}
.stat-block.in-view .stat-spark polyline{stroke-dashoffset:0}

/* FOOTER & CTA */
.footer-cta{
  padding:6rem 0 4rem;
  position:relative;overflow:hidden;
  background:
    radial-gradient(60% 90% at 80% 40%, rgba(0,196,122,0.18), transparent 70%),
    var(--bg-2);
}
.footer-cta-inner{
  /* minmax(0,…) em vez de 1fr: sem isto, o max-width do <p> abaixo torna-se
     a largura mínima da coluna e o CTA sai fora do ecrã em telemóveis. */
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:2rem;
}
.footer-cta h2{font-size:clamp(1.7rem,3.4vw,2.3rem);text-align:left;margin-bottom:1rem}
.footer-cta p{max-width:min(380px,100%);margin-bottom:2rem;font-size:.92rem}
.footer-cta-actions{display:flex;flex-wrap:wrap;gap:.9rem}

.node-graphic{position:relative;width:100%;height:340px}
.node{
  position:absolute;border-radius:50%;
  background:var(--bg-3);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--text-dim2);
}
.node.core{
  width:70px;height:70px;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#fff;color:#04110c;font-size:1.4rem;z-index:3;
  box-shadow:0 0 40px rgba(255,255,255,0.25);
}
.node.n{width:46px;height:46px;font-size:1rem}
.node-line{
  position:absolute;background:var(--border);height:1px;
  transform-origin:left center;z-index:1;
  transform:rotate(var(--angle,0deg)) scaleX(0);
  transition:transform .8s cubic-bezier(.4,0,.2,1);
}
.node-line.drawn{transform:rotate(var(--angle,0deg)) scaleX(1)}

.footer-links{
  padding:4rem 0 0;background:var(--bg-2);
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:2rem;
  padding-bottom:3rem;border-bottom:1px solid var(--border-soft);
}
.footer-brand img{height:32px;width:auto;margin-bottom:1rem}
.footer-brand p{font-size:.85rem;margin-bottom:1.25rem;max-width:260px}
.social-links{display:flex;gap:.6rem}
.social-links a{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--text-mut);
}
.social-links a:hover{border-color:var(--accent);color:var(--accent)}
.footer-col h4{font-family:var(--font-mono);font-size:.82rem;color:#fff;margin-bottom:1.2rem;font-weight:500}
.footer-col ul li{margin-bottom:.75rem}
.footer-col ul li a{font-size:.85rem;color:var(--text-mut)}
.footer-col ul li a:hover{color:var(--accent)}
.contact-list li{display:flex;align-items:flex-start;gap:.5rem;font-size:.85rem;color:var(--text-mut);margin-bottom:.85rem}
.footer-contact-icon{color:var(--accent);margin-top:.15rem}
.footer-bottom{padding:1.5rem 0;text-align:center;font-size:.78rem;color:var(--text-dimmer);font-family:var(--font-mono)}

.floating-whatsapp{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:900;
  width:52px;height:52px;border-radius:50%;
  background:var(--accent);color:#04110c;
  display:flex;align-items:center;justify-content:center;font-size:1.35rem;
  box-shadow:0 8px 24px rgba(0,212,125,0.35);
}

/* REVEAL ANIMATIONS */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.reveal-item{
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
}
.reduced-motion .reveal-item{opacity:1;transform:none;filter:none}

/* RESPONSIVIDADE */
@media (max-width:960px){
  .tech-chip i{font-size:1.4rem}
  .tech-chip span{font-size:.8rem}
  .tech-set{gap:2.2rem;padding-right:2.2rem}
  .card-grid, #blogGrid{grid-template-columns:repeat(2,1fr)}
  #cardGrid .card:nth-child(1),#cardGrid .card:nth-child(2),#cardGrid .card:nth-child(5),#cardGrid .card:nth-child(6){grid-column:span 2}
  #cardGrid .card:nth-child(3),#cardGrid .card:nth-child(4){grid-column:span 1}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .why-row-2{grid-template-columns:1fr}
  .process-row{grid-template-columns:repeat(2,1fr);row-gap:2.5rem}
  .process-row::before{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-cta-inner{grid-template-columns:minmax(0,1fr)}
  .node-graphic{height:220px}
}
@media (max-width:720px){
  .nav-pill{
    position:fixed;top:70px;left:1.25rem;right:1.25rem;
    background:var(--bg-2);border:1px solid var(--border);
    flex-direction:column;padding:1.25rem;gap:1rem;
    transform:none;display:none;
  }
  .nav-pill.open{display:flex}
  .nav-toggle{display:flex}
  .card-grid, #blogGrid, .why-grid{grid-template-columns:1fr}
  #cardGrid .card{grid-column:span 1 !important; grid-row:span 1 !important;}
  .process-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .stats-row{gap:2rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
  .reveal-item{opacity:1;transform:none;filter:none}
  [data-hero]{visibility:visible}
  .node-line{transform:rotate(var(--angle,0deg)) scaleX(1)}
  .stat-spark polyline{stroke-dashoffset:0}
}
/* ══════════════════════════════════════
   MODAL — EQUIPA (mosaico em loop infinito)
   ══════════════════════════════════════ */
.team-trigger{ cursor:pointer; }
.team-trigger .why-visual{ transition:var(--transition); }
.team-trigger:hover .why-visual{ transform:scale(1.03); }
.team-trigger-hint{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1rem; font-family:var(--font-mono); font-size:.75rem;
  color:var(--accent); font-weight:600; letter-spacing:.02em;
  opacity:0; transform:translateY(4px);
  transition:var(--transition);
}
.team-trigger:hover .team-trigger-hint{ opacity:1; transform:translateY(0); }

.team-modal-overlay{
  position:fixed; inset:0; z-index:3000;
  background:rgba(2,4,6,0.82);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:2rem 1rem;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.team-modal-overlay.open{ opacity:1; visibility:visible; }

.team-modal{
  position:relative;
  width:100%; max-width:920px;
  max-height:86vh;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2.4rem 0 2.6rem;
  overflow:hidden;
  transform:translateY(24px) scale(.98);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.team-modal-overlay.open .team-modal{ transform:translateY(0) scale(1); }

.team-modal-head{ padding:0 2.4rem; margin-bottom:1.8rem; }
.team-modal-head .eyebrow{ margin-bottom:.6rem; }
.team-modal-head h2{ font-size:1.7rem; }
.team-modal-head p{ color:var(--text-mut); font-size:.9rem; margin-top:.4rem; max-width:520px; }

.team-modal-close{
  position:absolute; top:1.4rem; right:1.4rem; z-index:2;
  width:38px; height:38px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-mut); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--transition);
}
.team-modal-close:hover{ background:var(--accent); color:#04110c; border-color:var(--accent); transform:rotate(90deg); }

.team-marquee{ display:flex; flex-direction:column; gap:1.2rem; }
.team-marquee-row{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.team-marquee-track{
  display:flex; gap:1.2rem; width:max-content;
  animation:teamScrollLeft var(--marquee-duration, 32s) linear infinite;
}
.team-marquee-row.reverse .team-marquee-track{
  animation-name:teamScrollRight;
}
.team-marquee-row:hover .team-marquee-track{ animation-play-state:paused; }

@keyframes teamScrollLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes teamScrollRight{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

.team-member-card{
  flex:0 0 auto;
  width:200px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.4rem 1.2rem;
  text-align:center;
  transition:var(--transition);
}
.team-member-card:hover{ border-color:rgba(0,212,125,0.32); transform:translateY(-4px); }

.team-member-avatar{
  width:64px; height:64px; border-radius:50%;
  margin:0 auto .9rem;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  color:#fff; overflow:hidden;
  border:2px solid rgba(255,255,255,0.08);
}
.team-member-avatar img{ width:100%; height:100%; object-fit:cover; }

.team-member-card h4{ font-size:.95rem; color:var(--text); margin-bottom:.2rem; }
.team-member-card .team-member-role{ font-size:.74rem; color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.6rem; }
.team-member-card p{ font-size:.78rem; color:var(--text-dimmer); line-height:1.6; }
.team-member-card .team-member-link{ display:inline-flex; margin-top:.7rem; color:var(--text-dimmer); font-size:1rem; transition:var(--transition); }
.team-member-card .team-member-link:hover{ color:var(--accent); }

.team-modal-empty{ text-align:center; padding:2.5rem 2.4rem; color:var(--text-dimmer); font-size:.9rem; }

@media (max-width:600px){
  .team-modal{ padding:1.8rem 0 2rem; max-height:82vh; }
  .team-modal-head{ padding:0 1.4rem; }
  .team-modal-close{ top:1rem; right:1rem; }
  .team-member-card{ width:160px; }
}