/* ============================================================
   SETUP TECH v4 — Design System
   Fonte: design_handoff_setuptech_site/ (hi-fi). Ver DESIGN.md.
   Desktop-only base (min-width 1100px) + degradação mobile no fim.
   ============================================================ */

:root {
  --ink: #1A181E;
  --paper: #F2F2F2;
  --pink: #FF0B71;
  --pink-hover: #EC4899;
  --mint: #08F2B0;
  --mint-hover: #4ADE80;
  --white: #FFFFFF;
  --footer-muted: #9CA3AF;
  --nav-cta-bg: #F2EFF6;
  --max: 1366px;
  --gutter-m: 20px;   /* margem lateral única do mobile — ver bloco Responsive */
  --z-blob: 0;
  --z-content: 5;
  --z-nav: 40;
  --z-dropdown: 60;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Epilogue', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* height:auto é obrigatório ao lado de max-width — sem ele, uma <img> com
   width/height no HTML (precisos para reservar espaço e evitar CLS) fica com a
   largura limitada e a altura fixa, ou seja ESTICADA. Nunca deformar imagens. */
img { max-width: 100%; height: auto; }
a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--pink-hover); }
h1, h2, h3, p { margin: 0; }

.v4 { min-width: 1100px; overflow: hidden; }
.container { max-width: var(--max); margin: 0 auto; }
.section { position: relative; padding: 90px 40px; }
.section__inner { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; }
.section__inner--narrow { max-width: 1100px; }

/* ---------- Dark block + blobs ---------- */
.dark-block {
  background: var(--ink);
  position: relative;
  overflow: hidden;
  color: var(--white);
}
.blob {
  position: absolute;
  width: 34%;
  aspect-ratio: 3 / 1.5;
  border-radius: 9999px;
  filter: blur(140px);
  opacity: 0.5;
  pointer-events: none;
  z-index: var(--z-blob);
}
.blob--pink  { top: -64px; right: 0; transform: translateX(50%) rotate(-45deg); background: var(--pink); }
.blob--mint  { bottom: -240px; left: -16px; transform: rotate(-45deg); background: rgba(8,242,176,0.5); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(26,24,30,0.5);
  font-weight: 600;
  margin: 0 0 16px 0;
}
.eyebrow--dark { color: rgba(255,255,255,0.55); }

/* ---------- H2 + marker ---------- */
.h2-wrap { position: relative; width: fit-content; margin: 0 auto 70px auto; }
.h2 {
  position: relative; z-index: 1;
  font-size: 48px; font-weight: 700; text-align: center; margin: 0;
  text-wrap: balance;
}
.h2-marker {
  position: absolute; z-index: 0; top: 4px; left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: 45%; height: 44px; background: var(--mint);
}

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 16px; padding: 12px 24px; border-radius: 8px;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s; cursor: pointer; }
.btn--mint { background: var(--mint); color: var(--ink); box-shadow: 0 6px 0 rgba(8,242,176,0.4); font-size: 18px; padding: 14px 28px; }
.btn--mint:hover { background: var(--mint-hover); color: var(--ink); }
.btn--pink { background: var(--pink); color: var(--white); box-shadow: 0 6px 0 rgba(255,11,113,0.3); }
.btn--pink:hover { background: var(--pink-hover); color: var(--white); }
.btn--outline { border: 1px solid rgba(255,255,255,0.35); color: var(--white); font-weight: 600; font-size: 18px; padding: 14px 28px; }
.btn--outline:hover { border-color: var(--pink); color: var(--pink); }
.btn--outline-ink { border: 1px solid rgba(26,24,30,0.25); color: var(--ink); font-weight: 600; font-size: 18px; padding: 14px 28px; }
.btn--outline-ink:hover { border-color: var(--pink); color: var(--pink); }
.btn--nav { background: var(--nav-cta-bg); color: var(--ink); font-size: 15px; padding: 10px 18px; box-shadow: 0 6px 0 rgba(242,239,246,0.4); }
.btn--nav:hover { background: #E5E7EB; color: var(--ink); }
.btn--footer { border: 1px solid rgba(255,255,255,0.25); color: var(--white); font-weight: 500; font-size: 14px; padding: 8px 16px; gap: 8px; }
.btn--footer:hover { border-color: var(--pink); color: var(--pink); }

/* ---------- Signature cards ---------- */
/* .pstep/.process-step partilham o chassis — um só sistema de caixa no site */
.card, .pstep, .process-step { position: relative; border-radius: 10px; padding: 32px; }
.card::after, .pstep::after, .process-step::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid var(--ink); border-radius: 10px;
  transform: translate(8px, 8px); pointer-events: none;
}
.card--glass { background: rgba(255,255,255,0.55); backdrop-filter: blur(50px); }
.card--white { background: var(--white); }
a.card { color: var(--ink); transition: transform 0.3s; }
a.card:hover { transform: translate(-4px, -4px); color: var(--ink); }

/* ============================================================
   NAV
   ============================================================ */
.nav { position: relative; z-index: var(--z-nav); width: 100%; max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 16px; box-sizing: border-box; }
.nav__logo { width: 220px; display: block; }
.nav__right { display: flex; align-items: center; gap: 36px; }
.nav__links { display: flex; gap: 36px; align-items: center; font-size: 15px; }
.nav__links a { color: var(--white); transition: color 0.3s; }
.nav__links a:hover { color: var(--pink); }
.nav__links a.is-active { color: var(--pink); }
.nav__services { position: relative; }
.nav__services > a { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.nav__caret { font-size: 9px; }
.nav__dropdown { position: absolute; top: 100%; left: -16px; padding-top: 16px; width: 330px; z-index: var(--z-dropdown);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; }
.nav__services:hover .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown-inner { background: var(--ink); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
  padding: 10px; display: flex; flex-direction: column; box-shadow: 8px 8px 0 rgba(255,11,113,0.25); }
.nav__dd-item { padding: 12px 14px; border-radius: 8px; color: var(--white); font-weight: 600; transition: background 0.2s, color 0.2s; }
.nav__dd-item span { display: block; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.55); margin-top: 2px; }
.nav__dd-item:hover { background: rgba(255,255,255,0.06); color: var(--mint); }

/* ============================================================
   HERO (Home)
   ============================================================ */
.hero-block { padding: 16px 40px 24px 40px; min-height: 100vh; display: flex; flex-direction: column; }
.hero { position: relative; z-index: var(--z-content); max-width: var(--max); margin: 0 auto;
  padding: 40px 16px 0 16px; width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero__triangle { position: absolute; top: 30px; right: 40px; }
.hero__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,0.85fr); gap: 48px; align-items: center; }
/* 76px é o teto até aos ~1280px: o h1 é nowrap e a coluna do grid fica presa nos
   508px entre 1001 e 1100 (aí "YOUR WORLD" já ocupa 484 dos 508). Acima disso há
   folga e o título cresce — ver o @media mais abaixo. */
.hero__h1 { font-size: 76px; font-weight: 700; line-height: 1.06; color: var(--white); margin: 0 0 30px 0; white-space: nowrap; }
.hero__word { color: var(--pink); display: inline-block; width: 430px; white-space: nowrap; }
/* A partir dos 1280px a coluna do hero passa a ter folga (597px → 695px), portanto
   o título cresce com o ecrã: ~87px a 1280, ~94px a 1440, até ao teto de 104px
   (a coluna satura nos 695 e "YOUR WORLD" ocupa aí 662). Limites medidos. */
@media (min-width: 1280px) {
  .hero__h1 { font-size: clamp(76px, calc(33px + 4.25vw), 104px); }
}
.hero__sub { font-size: 23px; font-weight: 300; color: rgba(255,255,255,0.85); max-width: 620px; margin: 0 0 40px 0; text-wrap: pretty; }
.hero__actions { display: flex; gap: 20px; align-items: center; }
.hero__metrics { display: flex; gap: 44px; margin-top: 56px; }
.hero__metric-num { font-size: 38px; font-weight: 800; color: var(--mint); margin: 0; }
.hero__metric-label { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.6); margin: 4px 0 0 0; }
.hero__divider { width: 1px; background: rgba(255,255,255,0.15); }

/* Code card */
.codecard-wrap { position: relative; animation: card-float 6s ease-in-out infinite; }
.codecard { position: relative; background: rgba(255,255,255,0.06); backdrop-filter: blur(30px);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.codecard__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.codecard__dot { width: 11px; height: 11px; border-radius: 50%; }
.codecard__title { margin-left: 10px; font-family: monospace; font-size: 12px; color: rgba(255,255,255,0.45); }
.codecard__body { padding: 22px 24px; font-family: monospace; font-size: 13px; line-height: 2.1; color: rgba(255,255,255,0.85); }
.tok-pink { color: var(--pink); }
.tok-mint { color: var(--mint); }
.tok-dim { color: rgba(255,255,255,0.4); }
.cursor { display: inline-block; width: 9px; height: 18px; background: var(--mint); vertical-align: middle; animation: cursor-blink 1s step-end infinite; }

/* Scroll cue */
.scroll-cue-wrap { position: relative; z-index: var(--z-content); display: flex; justify-content: center; padding: 8px 0 12px 0; }
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,0.55); animation: arrow-bob 2s ease-in-out infinite; }
.scroll-cue:hover { color: var(--mint); }
.scroll-cue span { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; }

/* ---------- Grids ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 8px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pillar h3 { font-size: 20px; font-weight: 700; margin: 0 0 10px 0; }
.pillar p { font-size: 15px; font-weight: 300; line-height: 1.7; color: rgba(26,24,30,0.75); margin: 0; }
.pillar img { width: 40px; height: 40px; margin-bottom: 20px; }

/* Services list rows */
.svc-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 28px; align-items: center; padding: 28px 36px; }
.svc-row__num { font-size: 48px; font-weight: 800; color: var(--pink); }
.svc-row__title { display: block; font-size: 24px; font-weight: 600; margin-bottom: 6px; }
.svc-row__desc { display: block; font-size: 15px; font-weight: 300; color: rgba(26,24,30,0.7); }
.svc-list { display: flex; flex-direction: column; gap: 40px; padding: 8px; }

/* Testimonials */
.testi p.quote { font-size: 15px; font-weight: 300; line-height: 1.8; color: rgba(26,24,30,0.8); margin: 0 0 24px 0; }
.testi p.name { font-size: 16px; font-weight: 700; margin: 0; }
.testi p.role { font-size: 13px; font-weight: 300; color: rgba(26,24,30,0.55); margin: 4px 0 0 0; }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 44px; align-items: start; padding: 8px; }
.testi--offset { margin-top: 32px; }

/* Portfolio teaser */
.teaser-img { display: block; border-radius: 8px; overflow: hidden; transition: transform 0.3s; }
.teaser-img:hover { transform: translateY(-6px); }
.teaser-img img { width: 100%; height: auto; border-radius: 8px; }

/* CTA final */
.cta-lead { font-size: 48px; font-weight: 700; margin: 0; text-align: center; }
.cta-big-wrap { position: relative; width: fit-content; margin: 0 auto; }
.cta-big { position: relative; z-index: 1; font-size: 140px; font-weight: 700; line-height: 1.1; color: var(--pink); margin: 0; }
.cta-big-marker { position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-6deg); width: 110%; height: 60px; background: var(--white); }

/* ---------- Tags / pills ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { border: 1px solid rgba(26,24,30,0.3); background: var(--white); border-radius: 9999px; padding: 7px 14px; font-size: 13px; font-weight: 500; }
.tag--mint { border: 0; background: rgba(8,242,176,0.25); padding: 6px 12px; font-size: 12px; font-weight: 600; }

/* ---------- Service hub big cards ---------- */
.svc-card { padding: 44px 48px; transition: transform 0.3s; }
.svc-card:hover { transform: translate(-4px,-4px); }
.svc-card__head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 28px; }
.svc-card__num { font-size: 60px; font-weight: 800; line-height: 1; color: var(--pink); }
.svc-card h3 { font-size: 32px; font-weight: 600; color: var(--ink); margin: 0 0 16px 0; }
.svc-card p { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--ink); margin: 0 0 26px 0; text-wrap: pretty; }
.svc-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 15px; font-weight: 700; color: var(--pink); }
.svc-card__more:hover { color: var(--pink-hover); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 56px; padding: 8px; }

/* ---------- Process steps ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 40px; }
.process-num { font-size: 80px; font-weight: 800; line-height: 1; color: var(--pink); margin-bottom: 20px; }
.process-step h3 { font-size: 22px; font-weight: 700; margin: 0 0 10px 0; }
.process-step p { font-size: 15px; font-weight: 300; line-height: 1.7; color: rgba(26,24,30,0.75); margin: 0; text-wrap: pretty; }

/* ---------- Service detail bits ---------- */
.h2-marker--left { top: auto; bottom: 4px; left: -8px; transform: rotate(-4deg); }
.xlist { display: flex; flex-direction: column; gap: 14px; }
.xlist__row { display: flex; gap: 12px; align-items: baseline; }
.xlist__x { color: var(--pink); font-weight: 800; }
.feat-card { padding: 30px; }
.feat-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px 0; }
.feat-card p { font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(26,24,30,0.75); margin: 0; }
/* sem overflow:hidden — clipava a moldura ::after do .card (deslocada 8px) */
.cmp { position: relative; background: var(--white); border-radius: 10px; }
.cmp__row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; font-size: 14px; border-bottom: 1px solid rgba(26,24,30,0.08); }
.cmp__row > div { padding: 16px 24px; font-weight: 300; }
.cmp__row > div:first-child { font-weight: 600; }
.cmp__row--head { background: var(--ink); color: var(--white); font-weight: 700; font-size: 15px; border: 0; }
.cmp__row--head > div { font-weight: 700; }
.cmp__mint { color: var(--mint); }
.cmp__dim { color: rgba(255,255,255,0.6); }
.cmp__muted { color: rgba(26,24,30,0.55) !important; }
.dark-callout { position: relative; background: var(--ink); border-radius: 10px; padding: 48px 56px; color: var(--white); overflow: hidden; }
.dark-callout h2 { position: relative; font-size: 32px; font-weight: 700; margin: 0 0 16px 0; }
.dark-callout p { position: relative; font-size: 16px; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,0.8); margin: 0; max-width: 720px; text-wrap: pretty; }
.pstep__num { font-size: 52px; font-weight: 800; line-height: 1; color: var(--pink); margin-bottom: 16px; }
.pstep h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px 0; }
.pstep p { font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(26,24,30,0.75); margin: 0; text-wrap: pretty; }
.case-card { display: block; color: var(--ink); }
.case-card:hover { color: var(--ink); }
.case-card__img { position: relative; display: block; border-radius: 10px; }
.case-card__img img { width: 100%; height: auto; border-radius: 10px; display: block; position: relative; z-index: 1; }
.case-card__img::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--ink); border-radius: 10px; transform: translate(10px,10px); pointer-events: none; }
.case-card__label { display: block; margin-top: 24px; font-size: 20px; font-weight: 700; }
/* Grelha de portfólio: cartões de projecto (thumbnail + categoria + título). */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
/* Destaque (apps): 2 colunas, cartões maiores. */
.portfolio-featured { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px; }
.portfolio-featured .portfolio-card__img { aspect-ratio: 16 / 10; }
.portfolio-featured .portfolio-card__cat { font-size: 13px; margin-top: 20px; }
.portfolio-featured .portfolio-card__title { font-size: 28px; }
@media (max-width: 860px) { .portfolio-featured { grid-template-columns: 1fr; gap: 28px; } }
.portfolio-card { display: block; text-decoration: none; color: var(--ink); }
.portfolio-card__img { border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: rgba(26,24,30,0.05); }
.portfolio-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.portfolio-card:hover .portfolio-card__img img { transform: scale(1.04); }
.portfolio-card__cat { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink); font-weight: 600; margin: 16px 0 6px 0; }
.portfolio-card__title { font-size: 20px; font-weight: 700; margin: 0; line-height: 1.2; }
@media (max-width: 860px) { .portfolio-grid { grid-template-columns: 1fr; gap: 24px; } }
/* Header de projecto compacto: título+tags à esquerda, texto à direita. */
.project-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.project-hero__grid .tag { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); color: #fff; }
@media (max-width: 860px) {
  .project-hero__grid { grid-template-columns: 1fr; gap: 20px; }
}
/* Galeria de projecto: fatias de UMA imagem contínua (coladas) com a moldura
   preta descentrada do site aplicada ao BLOCO TODO, não a cada fatia. */
.project-gallery { position: relative; font-size: 0; line-height: 0; }
.project-gallery img { display: block; width: 100%; height: auto; margin: 0; border: 0; position: relative; z-index: 1; }
.project-gallery img:first-child { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.project-gallery img:last-child { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.project-gallery::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--ink); border-radius: 10px; transform: translate(10px,10px); pointer-events: none; }
/* grid 0fr→1fr anima a altura REAL da resposta. O max-height fixo (0→400px) que
   aqui estava dava dois solavancos a fechar: de 400 até à altura real nada mexia
   (só o padding), e ao cruzá-la colapsava de golpe. */
.faq-item { position: relative; background: var(--white); border: 1px solid var(--ink); border-radius: 10px; overflow: hidden;
  display: grid; grid-template-rows: auto 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-item.is-open { grid-template-rows: auto 1fr; }
.faq-item__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 20px 24px; font-family: 'Epilogue', sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); }
.faq-item__icon { color: var(--pink); font-size: 20px; font-weight: 400; flex-shrink: 0; }
/* sem transição própria: é a linha do grid que revela/esconde (animar o padding em
   paralelo era o 1º dos dois saltos). min-height:0 deixa a linha colapsar a 0fr. */
.faq-item__a { font-size: 15px; font-weight: 300; line-height: 1.8; color: rgba(26,24,30,0.75); margin: 0;
  padding: 0 24px; min-height: 0; overflow: hidden; text-wrap: pretty; }
/* o respiro inferior é conteúdo, não padding — padding não colapsa com a linha e
   deixava 22px de espaço morto por baixo da pergunta fechada */
.faq-item__a::after { content: ''; display: block; height: 22px; }
.faq-list { display: flex; flex-direction: column; gap: 16px; }
.crosslinks { display: flex; justify-content: center; gap: 28px; margin-top: 44px; font-size: 14px; font-weight: 500; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(26,24,30,0.6);
  backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center;
  padding: 5vh 20px; overflow-y: auto; opacity: 0; transition: opacity 0.25s ease;
}
.modal-overlay.is-open { display: flex; opacity: 1; }
.modal {
  position: relative; background: var(--paper); border-radius: 14px; width: 100%; max-width: 780px;
  padding: 48px 48px 40px 48px; box-shadow: 0 40px 100px rgba(0,0,0,0.5); margin: auto;
  transform: translateY(16px); transition: transform 0.25s ease;
}
.modal-overlay.is-open .modal { transform: translateY(0); }
.modal__close {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(26,24,30,0.2); background: var(--white); cursor: pointer; font-size: 22px;
  line-height: 1; color: var(--ink); display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.modal__close:hover { border-color: var(--pink); color: var(--pink); }
.modal__head { text-align: center; margin-bottom: 32px; }
.modal__eyebrow { font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(26,24,30,0.5); font-weight: 600; margin: 0 0 10px 0; }
.modal__title { font-size: 34px; font-weight: 700; margin: 0; }
.modal__title span { color: var(--pink); }
.modal__sub { font-size: 15px; font-weight: 300; color: rgba(26,24,30,0.7); margin: 10px 0 0 0; }
body.modal-open { overflow: hidden; }
@media (max-width: 700px) { .modal { padding: 40px 20px 28px 20px; } }

/* ---------- Quote wizard ---------- */
.wiz { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.wiz__steps { display: flex; gap: 12px; justify-content: center; margin-bottom: 48px; }
.wiz__dot { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: rgba(26,24,30,0.4); }
.wiz__dot span { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(26,24,30,0.3); display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--white); }
.wiz__dot.is-active { color: var(--ink); }
.wiz__dot.is-active span { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.wiz__dot.is-done span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.wiz__sep { width: 40px; height: 1px; background: rgba(26,24,30,0.2); align-self: center; }
.wiz__panel { display: none; }
.wiz__panel.is-active { display: block; }
.wiz__field { position: relative; margin-bottom: 24px; }
/* a moldura envolve só o campo — no .wiz__field apanhava também o label (linha por trás do texto) */
.wiz__control { position: relative; display: block; line-height: 0; }
.wiz__control::after { content: ''; position: absolute; left: 6px; top: 6px; width: 100%; height: 100%; border: 1px solid var(--footer-muted); border-radius: 10px; z-index: 0; pointer-events: none; }
.wiz__field > label { display: block; position: relative; z-index: 1; font-size: 14px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.wiz__field input, .wiz__field select, .wiz__field textarea {
  position: relative; z-index: 1; width: 100%; border-radius: 8px; border: 1px solid var(--ink);
  background: #FAFAFA; font-size: 16px; font-family: 'Epilogue', sans-serif; outline: none; box-sizing: border-box; color: var(--ink);
}
.wiz__field input, .wiz__field select { height: 56px; padding: 0 16px; }
.wiz__field textarea { padding: 14px 16px; resize: vertical; min-height: 120px; }
.wiz__field .req { color: var(--pink); }

/* ---------- Dropdown personalizado (select.js) ---------- */
/* o nativo fica no DOM (submit + validação lêem-no); só sai do ecrã */
.dd__nativo { position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dd { position: relative; z-index: 1; }
/* aberto sobe o stacking context — senão a lista fica por baixo do campo seguinte */
.dd.is-aberto { z-index: 30; }
.dd__trigger { position: relative; z-index: 1; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; width: 100%; height: 56px; padding: 0 16px;
  border-radius: 8px; border: 1px solid var(--ink); background: #FAFAFA; cursor: pointer;
  font-size: 16px; font-family: 'Epilogue', sans-serif; color: var(--ink); text-align: left;
  line-height: normal; }
.dd--vazio .dd__valor { color: #9CA3AF; }
.dd__seta { width: 10px; height: 10px; flex: none; border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s ease; }
.dd.is-aberto .dd__seta { transform: rotate(-135deg) translate(-4px, -4px); }
.dd__lista { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: var(--white); border: 1px solid var(--ink); border-radius: 10px;
  box-shadow: 6px 6px 0 0 rgba(26,24,30,0.08);
  opacity: 0; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease; }
.dd.is-aberto .dd__lista { opacity: 1; transform: translateY(0); }
.dd__op { padding: 12px 14px; border-radius: 6px; font-size: 15px; font-weight: 300;
  color: var(--ink); cursor: pointer; line-height: normal; }
.dd__op.is-activo { background: rgba(26,24,30,0.06); }
.dd__op.is-sel { font-weight: 700; background: var(--mint); }
.dd__trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .dd__lista, .dd__seta { transition: none; }
}
.wiz__err { color: var(--pink); font-size: 14px; font-weight: 600; margin-top: 6px; position: relative; z-index: 1; }
.wiz__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; }
.wiz__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wiz__done { text-align: center; padding: 40px 0; }
.wiz__done h2 { font-size: 44px; font-weight: 700; color: var(--pink); margin: 0 0 16px 0; }
.wiz__done p { font-size: 18px; font-weight: 300; color: rgba(26,24,30,0.75); }

/* ---------- Dynamic wizard (schema-driven) ---------- */
.wiz-loading { text-align: center; padding: 40px 0; color: rgba(26,24,30,0.5); font-size: 15px; }
.wiz-progress { height: 6px; background: rgba(26,24,30,0.1); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.wiz-progress__bar { height: 100%; background: var(--mint); border-radius: 999px; transition: width 0.4s cubic-bezier(0.22,1,0.36,1); }
.wiz-progress__label { text-align: center; font-size: 13px; font-weight: 600; color: rgba(26,24,30,0.55); margin: 0 0 28px 0; }
.wiz-step__title { font-size: 24px; font-weight: 700; margin: 0 0 18px 0; line-height: 1.2; }
.wiz-field { margin-bottom: 22px; }
.wiz-field > label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.wiz-field .req { color: var(--pink); }
.wiz-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.wiz-opt { border: 1px solid rgba(26,24,30,0.22); background: var(--white); border-radius: 10px; padding: 11px 16px;
  font-size: 15px; font-weight: 500; font-family: 'Epilogue', sans-serif; color: var(--ink); cursor: pointer;
  transition: border-color 0.2s, background 0.2s; }
.wiz-opt:hover { border-color: var(--ink); }
.wiz-opt.is-selected { border-color: var(--mint); background: rgba(8,242,176,0.16); font-weight: 600; }
.wiz-opt--multi.is-selected::before { content: '✓'; color: var(--ink); font-weight: 800; margin-right: 8px; }
.wiz-field input, .wiz-field textarea {
  width: 100%; border-radius: 8px; border: 1px solid var(--ink); background: #FAFAFA; box-sizing: border-box;
  font-size: 16px; font-family: 'Epilogue', sans-serif; outline: none; color: var(--ink); }
.wiz-field input { height: 54px; padding: 0 16px; }
.wiz-field textarea { padding: 14px 16px; resize: vertical; min-height: 120px; }
.wiz-field input::placeholder, .wiz-field textarea::placeholder { color: var(--footer-muted); }
.wiz-field__err { color: var(--pink); font-size: 13px; font-weight: 600; margin-top: 8px; min-height: 0; }

/* Terms & conditions checkbox (override das regras de input do wizard) */
.wiz-field--terms label.wiz-terms { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink); cursor: pointer; }
.wiz-field--terms input[type="checkbox"] { width: 20px; height: 20px; min-width: 20px; flex: none; margin: 1px 0 0; padding: 0; accent-color: var(--pink); cursor: pointer; }
.wiz-field--terms .wiz-terms a { color: var(--pink); text-decoration: underline; }

/* ---------- Artigo de blog (v4) ---------- */
.article-body { font-size: 17px; line-height: 1.75; color: rgba(26,24,30,0.85); }
.article-body h2 { font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--ink); margin: 44px 0 16px; }
.article-body h3 { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--ink); margin: 36px 0 14px; }
.article-body h4 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 30px 0 12px; }
.article-body p { margin: 0 0 20px; }
.article-body a { color: var(--pink); text-decoration: underline; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 28px 0; }
.article-body blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--pink); font-style: italic; color: rgba(26,24,30,0.7); }
.article-body strong { font-weight: 700; color: var(--ink); }

/* ---------- Contact form ---------- */
.cform { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cform__field { position: relative; }
.cform__field--full { grid-column: span 2; }
.cform__field::after { content: ''; position: absolute; left: 6px; top: 6px; width: 100%; height: 100%; border: 1px solid var(--footer-muted); border-radius: 10px; z-index: 0; pointer-events: none; }
.cform input, .cform select, .cform textarea {
  position: relative; z-index: 1; width: 100%; border-radius: 8px; border: 1px solid var(--ink);
  background: #FAFAFA; font-size: 16px; font-family: 'Epilogue', sans-serif; outline: none; box-sizing: border-box; color: var(--ink);
}
.cform input, .cform select { height: 56px; padding: 0 16px; }
.cform textarea { padding: 14px 16px; resize: vertical; }
.cform input::placeholder, .cform textarea::placeholder { color: var(--footer-muted); opacity: 1; }
.cform__err { grid-column: span 2; color: var(--pink); font-size: 14px; font-weight: 500; }
.cform__ok { grid-column: span 2; color: #059669; font-size: 16px; font-weight: 700; text-align: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink); color: var(--white); position: relative; overflow: hidden; }
.footer__grid { max-width: var(--max); margin: 0 auto; padding: 90px 16px 40px 16px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px; }
.footer__logo { width: 201px; height: auto; margin-bottom: 32px; }
.footer__tagline { font-size: 14px; font-weight: 300; line-height: 2; color: var(--footer-muted); margin: 0 0 32px 0; max-width: 280px; }
.footer address { font-size: 14px; font-weight: 300; line-height: 2; color: var(--footer-muted); margin-top: 32px; font-style: normal; }
.footer h3 { font-size: 15px; font-weight: 700; margin: 12px 0 40px 0; }
.footer__col { display: flex; flex-direction: column; gap: 20px; font-size: 14px; }
.footer__col a { transition: color 0.2s; }
.footer__col--light a { color: var(--white); }
.footer__col--muted a { color: var(--footer-muted); }
.footer__col a:hover { color: var(--pink); }
.footer__bottom { max-width: var(--max); margin: 0 auto; padding: 24px 16px; font-size: 13px; color: var(--footer-muted); }
.footer__deco { position: absolute; bottom: 0; right: 48px; }

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes nav-item-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes card-float { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-10px); } }
@keyframes arrow-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
/* ---------- Skeleton das imagens ----------
   As <img> levam width/height reais, portanto o espaço já fica reservado antes de
   a imagem chegar (sem saltos). Isto preenche esse espaço com um shimmer, para a
   espera se ler como "a carregar" e não como buraco. Só nas imagens de conteúdo:
   nos decorativos (PNG transparente) o shimmer apareceria com a forma da bola.
   A classe .is-loaded é posta pelo site.js quando a imagem termina. */
.case-card__img:not(.is-loaded),
.blog-card__img:not(.is-loaded),
.codecard-wrap .img-skeleton:not(.is-loaded) {
  background: linear-gradient(100deg, rgba(26,24,30,0.06) 30%, rgba(26,24,30,0.12) 50%, rgba(26,24,30,0.06) 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 10px;
}
/* a imagem entra suave em vez de aparecer de golpe por cima do shimmer */
.case-card__img img, .blog-card__img img { opacity: 0; transition: opacity 0.45s ease; }
.case-card__img.is-loaded img, .blog-card__img.is-loaded img { opacity: 1; }
/* sem JS as imagens têm de aparecer na mesma */
html:not(.js) .case-card__img img, html:not(.js) .blog-card__img img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .case-card__img:not(.is-loaded), .blog-card__img:not(.is-loaded) { animation: none; }
  .case-card__img img, .blog-card__img img { transition: none; }
}

/* Reveal-on-scroll — protegido contra servidor lento / JS em falta.
   Antes: [data-reveal]{opacity:0} escondia o conteúdo já no HTML e só o site.js
   o revelava; enquanto o JS não chegasse a página ficava BRANCA (failsafe só aos 4s).
   Agora só esconde se .js estiver no <html> (posto por um script inline no head) e
   .reveal-fallback (mesmo script, timer de 1.2s) devolve tudo se o JS tardar. */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
.js.reveal-fallback [data-reveal] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .codecard-wrap, .scroll-cue { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .faq-item { transition: none; }
  .nav__right { transition: none; }
  .nav.nav--open .nav__links > a,
  .nav.nav--open .nav__services,
  .nav.nav--open .btn--nav { animation: none; }
}

/* ---- Mobile nav toggle (hidden on desktop) ---- */
.nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; z-index: var(--z-dropdown); }
.nav__toggle span { display: block; height: 2px; width: 100%; background: var(--white); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
.nav.nav--open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Responsive — o handoff é desktop-only; abaixo de 1000px o
   layout reflui para tablet/telemóvel. Tipografia fluida via
   clamp() + !important (as páginas têm font-size inline).
   ============================================================ */

/* ---------- Tablet & mobile: nav vira menu, grelhas refluem ---------- */
@media (max-width: 1000px) {
  .v4 { min-width: 0; }

  /* ---- CONTAINER ÚNICO ----
     As 54 secções trazem o padding lateral inline (40px) do handoff desktop, que
     vence a media query — davam larguras diferentes na mesma página (40px aqui,
     18px ali). Um gutter só, com !important para bater o inline, evita reescrever
     os templates todos. Mesma regra para os max-width inline (1100/860/820/…):
     no telemóvel nenhum deles é menor que o ecrã, portanto só estorvam. */
  .section, .dark-block, .hero-block {
    padding-left: var(--gutter-m) !important;
    padding-right: var(--gutter-m) !important;
  }
  .container, .section__inner, .section__inner--narrow,
  .section > div[style*="max-width"],
  .dark-block > div[style*="max-width"],
  .hero-block > div[style*="max-width"] { max-width: 100% !important; }

  /* nada pode exceder a coluna (img já tem max-width/height:auto no reset global) */
  .section video, .section iframe { max-width: 100%; }

  /* Triângulo do hero: em coluna única caía em cima do "YOUR WORLD". O texto acaba
     em ~284px de 390 — encolhido e encostado à margem cabe na folga, sem tocar
     no título e sem perder presença (é opaco e faz parte da marca). */
  .hero__triangle { top: 22px; right: 0; }
  .hero__triangle svg { width: 62px; height: auto; display: block; }

  /* Decorativos de fundo — desenhados para desktop, onde há margem livre ao lado do
     texto. Em coluna única o texto ocupa 340 dos 390px: só ficariam fora dele
     encolhidos a ~50px, e aí lêem-se como lasca, não como forma. Escondidos no
     telemóvel (nada por baixo do texto); no desktop ficam intactos.
     Selector por src: os styles são inline nos templates (35×). */
  .section > img[src*="blast.png"],
  .section > img[src*="black-hole.png"],
  .section > img[src*="Isolation_Mode.png"],
  .section > img[src*="menu_rev.svg"] { display: none !important; }

  /* ---- Nav → menu full-page ----
     O painel era uma caixa no fluxo: empurrava o hero e lia-se como dropdown.
     Agora é um overlay fixo que cobre o ecrã, com a nav (logo + X) por cima. */
  .nav { padding: 18px 20px; }
  .nav__logo { width: 168px; position: relative; z-index: 2; }
  .nav__toggle { display: flex; position: relative; z-index: 2; }

  .nav__right {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column; justify-content: center;
    /* stretch vence o align-items:center do desktop — em coluna encolhia os
       links a fit-content e centrava-os (indentação de 83px) */
    align-items: stretch;
    gap: 0; margin: 0; border: 0; border-radius: 0;
    padding: 104px 24px calc(24px + env(safe-area-inset-bottom, 0px)) 24px;
    background: var(--ink);
    overflow-y: auto; overscroll-behavior: contain;
    /* fechado: fora do fluxo de foco e do ecrã, sem display:none (mataria a transição) */
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.32s cubic-bezier(0.4,0,0.2,1),
                transform 0.32s cubic-bezier(0.4,0,0.2,1),
                visibility 0s linear 0.32s;
  }
  .nav.nav--open .nav__right {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 0.32s cubic-bezier(0.4,0,0.2,1),
                transform 0.32s cubic-bezier(0.4,0,0.2,1),
                visibility 0s;
  }

  .nav__links { flex-direction: column; align-items: stretch; gap: 0; font-size: inherit; }
  /* links grandes, com divisória — hierarquia de menu, não de barra */
  .nav__links > a, .nav__services > a {
    padding: 18px 0; border-radius: 0; font-size: clamp(26px, 7vw, 34px); font-weight: 700;
    line-height: 1.15; color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .nav__links > a.is-active, .nav__services > a.is-active { color: var(--pink); }
  .nav__services { position: static; }
  .nav__caret { display: none; }

  /* sub-serviços: presentes mas subordinados.
     visibility:inherit e NÃO visible — o painel fechado é visibility:hidden, e um
     "visible" explícito aqui quebrava a herança: os 4 links ficavam invisíveis
     (opacity:0 do painel) mas a apanhar toques por cima da página inteira.
     opacity não bloqueia cliques; visibility sim. */
  .nav__dropdown { position: static; opacity: 1; visibility: inherit; transform: none;
    width: 100%; padding-top: 0; }
  /* cinto e suspensórios: com o menu fechado nada aqui dentro recebe input */
  .nav:not(.nav--open) .nav__right { pointer-events: none; }
  .nav.nav--open .nav__right { pointer-events: auto; }
  .nav__dropdown-inner { box-shadow: none; border: 0; background: transparent; padding: 4px 0 12px 0; }
  .nav__dd-item { padding: 10px 0 10px 14px; font-size: 15px; font-weight: 400; color: rgba(255,255,255,0.72);
    border-left: 2px solid rgba(255,255,255,0.14); border-radius: 0; }
  .nav__dd-item span { font-size: 13px; color: rgba(255,255,255,0.4); }

  /* CTA fecha o menu: destacado, não mais um link */
  .btn--nav { text-align: center; margin-top: 28px; padding: 16px 24px; font-size: 17px;
    background: var(--mint); color: var(--ink); border: 0; border-radius: 8px; }

  /* entrada escalonada — o menu monta-se, não aparece de bloco */
  .nav.nav--open .nav__links > a,
  .nav.nav--open .nav__services,
  .nav.nav--open .btn--nav {
    animation: nav-item-in 0.4s cubic-bezier(0.4,0,0.2,1) backwards;
  }
  .nav.nav--open .nav__links > *:nth-child(1) { animation-delay: 0.06s; }
  .nav.nav--open .nav__links > *:nth-child(2) { animation-delay: 0.10s; }
  .nav.nav--open .nav__links > *:nth-child(3) { animation-delay: 0.14s; }
  .nav.nav--open .nav__links > *:nth-child(4) { animation-delay: 0.18s; }
  .nav.nav--open .nav__links > *:nth-child(5) { animation-delay: 0.22s; }
  .nav.nav--open .nav__links > *:nth-child(6) { animation-delay: 0.26s; }
  .nav.nav--open .btn--nav { animation-delay: 0.30s; }

  /* Blocos escuros e secções mais compactos */
  .dark-block, .hero-block { padding-left: 20px !important; padding-right: 20px !important; }
  .section { padding: 60px 20px; }

  /* Tipografia fluida (vence os font-size inline) */
  .dark-block h1, .hero__h1 { font-size: clamp(40px, 8vw, 76px) !important; line-height: 1.08 !important; white-space: normal !important; }
  .hero__word { width: auto !important; }
  .h2 { font-size: clamp(30px, 5.2vw, 46px) !important; }
  .cta-big { font-size: clamp(64px, 13vw, 120px) !important; }
  .cta-lead { font-size: clamp(30px, 5vw, 46px); }

  /* Hero: empilha, cartão de código a seguir */
  .hero { padding-top: 24px; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__metrics { flex-wrap: wrap; gap: 24px 32px; }

  /* Grelhas → 2 colunas no tablet */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; padding: 60px 20px 32px; }

  /* Splits inline (about, portfolio, problema, contacto) empilham — tabelas não */
  .section [style*="grid-template-columns"]:not(.cmp__row) { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Tabelas comparativas: no tablet ainda cabem em grelha estreita */
  .cmp__row { font-size: 13px; }
  .cmp__row > div { padding: 12px 14px; }

  /* Cartões-serviço da home: número mais pequeno */
  .svc-row { grid-template-columns: 56px 1fr auto; gap: 18px; padding: 22px 24px; }
  .svc-row__num { font-size: 40px; }

  /* Cartões com padding de desktop (44px 48px) rebentavam a coluna em /servicos */
  .svc-card { padding: 28px 22px; }
  .svc-card h3 { font-size: 24px; }
  .svc-card__num { font-size: 44px; }
  .card { padding: 24px 20px; }
  /* a moldura ::after sai 8px → o grid tem de a acomodar, senão corta */
  .grid-2, .grid-3, .grid-4 { padding: 0 8px 8px 0; }

  /* Decorativos que transbordam */
  .blob { width: 60%; }
}

/* ---------- Telemóvel: tudo em 1 coluna ---------- */
@media (max-width: 640px) {
  /* só a altura muda — o gutter lateral é o mesmo de cima (container único) */
  .section { padding-top: 48px; padding-bottom: 48px; }
  .grid-4, .grid-3, .grid-2, .testi-grid, .process-grid { grid-template-columns: 1fr; }
  .testi--offset { margin-top: 0; }

  /* ---- Tabelas comparativas → linhas empilhadas ----
     Tinham overflow-x:auto + min-width:520px: uma caixa com scroll lateral dentro
     da página (colunas cortadas, ver /software-a-medida). Cada linha passa a
     bloco; o rótulo de cada valor vem do cabeçalho, injectado por site.js em
     data-label (os cabeçalhos diferem por tabela — não dá para os fixar no CSS). */
  .cmp { padding: 0; background: transparent; }
  .cmp::after { display: none; }              /* sem moldura à volta do conjunto */
  .cmp__row {
    display: block; border: 1px solid rgba(26,24,30,0.14); border-radius: 10px;
    background: var(--white); margin-bottom: 12px; padding: 4px 0; font-size: 15px;
  }
  /* depois de .cmp__row: o head tem as duas classes e mesma especificidade —
     declarado antes, o display:block de cima vencia e o cabeçalho reaparecia */
  .cmp__row--head { display: none; }          /* o cabeçalho vive nos data-label */
  .cmp__row:last-child { margin-bottom: 0; }
  .cmp__row > div { padding: 10px 16px; }
  .cmp__row > div:first-child {              /* o critério é o título do bloco */
    font-weight: 700; font-size: 16px; color: var(--ink);
    border-bottom: 1px solid rgba(26,24,30,0.1); margin-bottom: 4px; padding-bottom: 12px;
  }
  .cmp__row > div[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(26,24,30,0.45);
  }
  .cmp__muted { color: rgba(26,24,30,0.6) !important; }

  /* ---- Botões: empilhados, nunca lado a lado ----
     Os pares vivem em divs com display:flex inline e sem classe; uns em .section,
     outros no <header> do hero — daí o :has sem escopo de pai. O .wiz__nav fica
     de fora: Voltar|Continuar é navegação de wizard, não um par de CTAs.
     (Os dois formatos de style porque o DOM re-serializa "display:flex" com
     espaço se algum script tocar no style do elemento.) */
  .hero__actions,
  .v4 div[style*="display:flex"]:has(> .btn + .btn),
  .v4 div[style*="display: flex"]:has(> .btn + .btn) {
    flex-direction: column !important; align-items: stretch !important; gap: 12px !important;
  }
  .hero__actions > .btn,
  .v4 div[style*="display:flex"]:has(> .btn + .btn) > .btn,
  .v4 div[style*="display: flex"]:has(> .btn + .btn) > .btn {
    width: 100%; justify-content: center; text-align: center;
  }

  /* ---- Blocos de info lado a lado (contactos: Telemóvel/E-mail/Horário) ----
     Eram flex sem wrap com gap:60px → saíam do ecrã cortados dos dois lados. */
  .section div[style*="display:flex"]:not(:has(.btn)),
  .section div[style*="display: flex"]:not(:has(.btn)) {
    flex-wrap: wrap; gap: 28px !important;
  }

  /* ---- Portfólio: imagem → texto, sempre ----
     No desktop os casos alternam (texto|img, img|texto). Empilhados, a ordem do
     DOM juntava duas imagens e dois textos seguidos. Fixar a imagem em primeiro
     devolve a cadência imagem-texto-imagem-texto. */
  .section > div[style*="grid-template-columns"] > div:has(.case-card__img) { order: -1; }
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__deco { display: none; }
  .hero__metrics { gap: 20px 28px; }
  .hero__metrics .hero__divider { display: none; }
  .dark-block h1, .hero__h1 { font-size: clamp(34px, 10vw, 52px) !important; }
  .h2 { font-size: clamp(26px, 7vw, 36px) !important; }
  .cta-big { font-size: clamp(48px, 16vw, 88px) !important; }

  /* Modal / wizard ocupam quase todo o ecrã */
  .modal-overlay { padding: 3vh 12px; }
  .modal { padding: 44px 18px 28px; }
  .modal__title { font-size: 26px; }
  .wiz__steps { gap: 4px; font-size: 12px; }
  .wiz__sep { width: 16px; }
  .wiz__dot span { width: 26px; height: 26px; }

  /* Cartão de código do hero encolhe */
  .codecard__body { font-size: 12px; }

  /* Botões full-width em pilha */
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
}

/* ---------- Ecrãs muito pequenos ---------- */
@media (max-width: 380px) {
  .nav__logo { width: 148px; }
  .dark-block h1, .hero__h1 { font-size: clamp(30px, 11vw, 44px) !important; }
}