/* === fonts.css === */
/* static/styles/fonts.css */
/* from project CoreDesk */
/* PT: fontes auto-hospedadas do site desk:NG, zero CDN */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

/* PT: Comfortaa, wordmark exclusivo, dois pesos para desk + NG */
@font-face
{
  font-family: 'Comfortaa';
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/comfortaa-300.woff2') format('woff2');
}

@font-face
{
  font-family: 'Comfortaa';
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/comfortaa-400.woff2') format('woff2');
}

/* PT: Cabinet Grotesk, display unico, peso 800 para headlines */
@font-face
{
  font-family: 'Cabinet Grotesk';
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/cabinet-grotesk-800.woff2') format('woff2');
}

/* PT: General Sans, corpo principal, tres pesos (paragrafo, botao, sub-headline) */
@font-face
{
  font-family: 'General Sans';
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/general-sans-400.woff2') format('woff2');
}

@font-face
{
  font-family: 'General Sans';
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/general-sans-500.woff2') format('woff2');
}

@font-face
{
  font-family: 'General Sans';
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/general-sans-600.woff2') format('woff2');
}

/* PT: Playfair Display, italico editorial, usado uma vez por pagina no maximo */
@font-face
{
  font-family: 'Playfair Display';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('/static/fonts/playfair-display-400i.woff2') format('woff2');
}

/* === vars.css === */
/* static/styles/vars.css */
/* from project CoreDesk */
/* PT: tokens de marca desk:NG, fonte unica de verdade para cor, tipografia, espaco, motion e geometria */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

:root
{
  /* PT: paleta base, escurido a claro */
  --bg:               #0F1117;
  --bg-soft:          #161922;
  --bg-deep:          #0A0C12;
  --surface-elevated: #1B1F2B;

  /* PT: tinta, do solido ao quase-fundo */
  --ink:       #FFFFFF;
  --ink-soft:  #C5CAD3;
  --ink-mute:  #8A93A1;
  --ink-dim:   #6B7280;

  /* PT: separadores */
  --line:        rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.12);

  /* PT: acento, verde por defeito (edicao .com), sobreposto a azul em .eu */
  --accent:       #22C55E;
  --accent-soft:  #16A34A;
  --accent-glow:  rgba(34, 197, 94, 0.32);
  --accent-faint: rgba(34, 197, 94, 0.08);

  /* PT: lima, usada como acento secundario em destaques editoriais */
  --lime: #A3E635;

  /* PT: cores semanticas para estados (ok, aviso, erro, info) */
  --ok:   #22C55E;
  --warn: #F59E0B;
  --bad:  #F47272;
  --info: #3B82F6;

  /* PT: familias tipograficas */
  --font-wordmark: 'Comfortaa', sans-serif;
  --font-display:  'Cabinet Grotesk', system-ui, sans-serif;
  --font-body:     'General Sans', system-ui, sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif:    'Playfair Display', Georgia, serif;

  /* PT: escala tipografica fluida (clamp min, preferido vw, max). Floors baixos para mobile;
     o vw e o max ficam iguais, logo o desktop (>=800px) e matematicamente identico ao anterior. */
  --type-display-2xl: clamp(40px, 9vw,   124px);
  --type-display-xl:  clamp(32px, 6vw,    88px);
  --type-display-lg:  clamp(28px, 4vw,    56px);
  --type-display-md:  clamp(22px, 2.4vw,  36px);
  --type-body-lg:     clamp(18px, 1.4vw,  22px);
  --type-body-md:     16px;
  --type-body-sm:     14px;
  --type-label:       12px;
  --type-micro:       11px;

  /* PT: espaco em escala geometrica */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  /* PT: raios de canto */
  --radius-1:     6px;
  --radius-2:    10px;
  --radius-3:    14px;
  --radius-4:    20px;
  --radius-pill: 999px;

  /* PT: sombras, profundidade crescente */
  --shadow-sm: 0 1px  2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.7);

  /* PT: curvas de easing */
  --ease-out:    cubic-bezier(0.22, 1,    0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0,    0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* PT: duracoes de motion */
  --dur-instant: 120ms;
  --dur-quick:   200ms;
  --dur-normal:  360ms;
  --dur-reveal:  600ms;
  --dur-slow:    900ms;

  /* PT: breakpoints responsivos, referencia apenas (o @media usa o px literal) */
  --bp-mobile:  640px;
  --bp-tablet:  1024px;
  --bp-laptop:  1280px;
  --bp-desktop: 1440px;
  --bp-wide:    1920px;

  /* PT: larguras de container */
  --container:      1280px;
  --container-wide: 1440px;

  /* PT: altura aproximada da nav fixed (28px padding + wordmark md + 28px padding), usada por scroll-padding-top em base.css */
  --nav-h: 96px;
}

/* PT: edicao europeia .eu, acento azul */
html[data-edition="eu"]
{
  --accent:       #3B82F6;
  --accent-soft:  #2563EB;
  --accent-glow:  rgba(59, 130, 246, 0.32);
  --accent-faint: rgba(59, 130, 246, 0.08);
}

/* === base.css === */
/* static/styles/base.css */
/* from project CoreDesk */
/* PT: reset minimo + defaults globais (body, html, a, button, img, form) */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body
{
  height: 100%;
}

body
{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a
{
  color: inherit;
  text-decoration: none;
}

button
{
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

img, svg
{
  display: block;
  max-width: 100%;
  height: auto;
}

input, textarea, select
{
  font: inherit;
  color: inherit;
}

:focus-visible
{
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* === layout.css === */
/* static/styles/layout.css */
/* from project CoreDesk */
/* PT: primitivos de layout, container/stack/grid utilitarios */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.container
{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 64px);
}

.container-wide
{
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 64px);
}

.stack > * + *
{
  margin-top: var(--space-4);
}

.stack-sm > * + *
{
  margin-top: var(--space-2);
}

.stack-lg > * + *
{
  margin-top: var(--space-6);
}

section
{
  padding-block: clamp(96px, 12vw, 160px);
}

/* === motion.css === */
/* static/styles/motion.css */
/* from project CoreDesk */
/* PT: catalogo de motion CSS-only do site desk:NG. Fail-open: sem JS, conteudo visivel. */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

/* PT: reveal-on-scroll, transicao definida mas estado escondido APENAS quando JS confirma boot
   adicionando html.js-reveal. Sem JS, tudo visivel imediato (fail-open). */
[data-reveal]
{
  transition:
    opacity   var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

html.js-reveal [data-reveal]:not(.is-revealed)
{
  opacity: 0;
  transform: translateY(16px);
}

/* PT: stagger por indice (cada filho declara --i: <n>) */
[data-reveal-stagger] > *
{
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* PT: hover-lift, utilitario para cards e CTAs */
.hover-lift
{
  transition:
    transform    var(--dur-normal) var(--ease-spring),
    border-color var(--dur-instant) var(--ease-out),
    box-shadow   var(--dur-normal) var(--ease-out);
  will-change: transform;
}

.hover-lift:hover
{
  transform: translateY(-4px);
}

/* PT: kill-switch global, honra preferencia do utilizador sem excepcoes */
@media (prefers-reduced-motion: reduce)
{
  *,
  *::before,
  *::after
  {
    animation-duration:      0.01ms !important;
    animation-iteration-count: 1    !important;
    transition-duration:     0.01ms !important;
    scroll-behavior:         auto   !important;
  }

  html.js-reveal [data-reveal]
  {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* === atmosphere.css === */
/* static/styles/atmosphere.css */
/* from project CoreDesk */
/* PT: camadas atmosfericas globais (dot pattern + accent atmosphere por seccao) e dividers entre seccoes */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

/* PT: sem pattern global, sem markers. Orbs (radial accents) + dividers entre seccoes + nav blur = personalidade.
   Background do site = limpo dark + orbs por seccao. Sem dot grid, sem hairlines, sem noise, sem section markers. */

/* PT: garante que conteudo fica acima das atmospheres */
.nav,
main,
.foot
{
  position: relative;
  z-index: 1;
}

/* ============================================================== */
/* PT: hairline divider entre seccoes consecutivas — gradient horizontal accent→transparente */
/* ============================================================== */

main > section + section::after
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
                              transparent 0%,
                              var(--line-strong) 35%,
                              var(--accent-faint) 50%,
                              var(--line-strong) 65%,
                              transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* ============================================================== */
/* PT: backdrops atmosfericos por-seccao — radial em posicoes diferentes */
/* ============================================================== */

.showcase
{
  position: relative;
  overflow: hidden;
}

.showcase > *
{
  position: relative;
  z-index: 1;
}

.suite-carousel
{
  position: relative;
  overflow: hidden;
}

.suite-carousel > *
{
  position: relative;
  z-index: 1;
}

.infra
{
  position: relative;
  overflow: hidden;
}

.infra > *
{
  position: relative;
  z-index: 1;
}

.europe
{
  position: relative;
  overflow: hidden;
}

.europe > *
{
  position: relative;
  z-index: 1;
}

.manifesto
{
  position: relative;
  overflow: hidden;
}

.manifesto > *
{
  position: relative;
  z-index: 1;
}

.plans
{
  position: relative;
  overflow: hidden;
}

.plans > *
{
  position: relative;
  z-index: 1;
}

/* PT: garante que conteudo fica acima da camada dot */
.nav,
main,
.foot
{
  position: relative;
  z-index: 1;
}

/* PT: hairline divider entre seccoes consecutivas — gradient horizontal accent→transparente */
main > section + section
{
  position: relative;
}

main > section + section::before
{
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
                              transparent 0%,
                              var(--line-strong) 35%,
                              var(--accent-faint) 50%,
                              var(--line-strong) 65%,
                              transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* ============================================================== */
/* PT: backdrops atmosfericos por-seccao — radial em posicoes diferentes
   para variedade visual ao scroll */
/* ============================================================== */

/* PT: showcase — radial accent na direita-baixo, contraposto ao hero (que tem em cima) */
.showcase
{
  position: relative;
}

.showcase::after
{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* PT: bridge do hero -- continua orb bottom-left atras */
    radial-gradient(ellipse 700px 320px at 12% 0%,
                    var(--accent-faint) 0%,
                    transparent 70%),
    /* PT: bridge do hero -- continua orb bottom-right atras */
    radial-gradient(ellipse 700px 280px at 95% 0%,
                    var(--accent-faint) 0%,
                    transparent 70%),
    /* PT: original -- accent direita-baixo */
    radial-gradient(ellipse 900px 500px at 85% 90%,
                    var(--accent-faint) 0%,
                    transparent 65%);
}

/* PT: suite carousel — radial accent esquerda-topo */
.suite-carousel
{
  position: relative;
  overflow: hidden;
}

.suite-carousel::before
{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 800px 600px at 10% 20%,
                              var(--accent-faint) 0%,
                              transparent 60%);
}

.suite-carousel > *
{
  position: relative;
  z-index: 1;
}

/* PT: infra — dot pattern denso adicional + accent a meio */
.infra
{
  position: relative;
  overflow: hidden;
}

.infra::after
{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 600px 400px at 50% 50%,
                    var(--accent-faint) 0%,
                    transparent 70%);
}

.infra > *
{
  position: relative;
  z-index: 1;
}

/* PT: europe (.eu) — radial accent direita */
.europe
{
  position: relative;
  overflow: hidden;
}

.europe::after
{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    /* PT: bridge do hero -- continua orb bottom-left atras (red local override) */
    radial-gradient(ellipse 700px 320px at 12% 0%,
                    var(--accent-faint) 0%,
                    transparent 70%),
    /* PT: bridge do hero -- continua orb bottom-right atras */
    radial-gradient(ellipse 700px 280px at 95% 0%,
                    var(--accent-faint) 0%,
                    transparent 70%),
    /* PT: original -- accent direita */
    radial-gradient(ellipse 700px 500px at 90% 50%,
                    var(--accent-faint) 0%,
                    transparent 65%);
}

.europe > *
{
  position: relative;
  z-index: 1;
}

/* PT: manifesto — radial accent topo-centro */
.manifesto
{
  position: relative;
  overflow: hidden;
}

.manifesto::after
{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 800px 500px at 50% 10%,
                              var(--accent-faint) 0%,
                              transparent 60%);
}

.manifesto > *
{
  position: relative;
  z-index: 1;
}

/* PT: plans — radial accent esquerda-baixo */
.plans
{
  position: relative;
  overflow: hidden;
}

.plans::after
{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 800px 500px at 15% 85%,
                              var(--accent-faint) 0%,
                              transparent 65%);
}

.plans > *
{
  position: relative;
  z-index: 1;
}

/* === components/wordmark.css === */
/*
 * static/styles/components/wordmark.css
 * from project desk:NG/web
 * PT: lockup desk:NG (símbolo + wordmark Comfortaa), três tamanhos
 * 2026+ Core Concept Collective
 * 2026+ Diogo <diogopinto>
 * 2026+ João <joao>
 */

.wm
{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-wordmark);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1;
}

.wm-symbol
{
  display: block;
  flex-shrink: 0;
}

.wm-d
{
  color: var(--ink);
}

.wm-sep
{
  color: var(--accent);
  margin: 0 0.02em;
}

/* PT: NG fixado a 0.69em do tamanho base do wordmark, spec canónica */
.wm-ng
{
  font-weight: 400;
  font-size: 0.69em;
  color: var(--accent);
  -webkit-text-stroke: 0.017em var(--accent);
}

/* PT: tamanhos do lockup, controlam font-size + símbolo proporcional */
.wm-vs { font-size: 16px; }
.wm-vs .wm-symbol { width: 28px; height: 28px; }

.wm-sm { font-size: 22px; }
.wm-sm .wm-symbol { width: 28px; height: 28px; }

.wm-md { font-size: 28px; }
.wm-md .wm-symbol { width: 36px; height: 36px; }

.wm-lg { font-size: 40px; }
.wm-lg .wm-symbol { width: 52px; height: 52px; }

/* === components/eyebrow.css === */
/* static/styles/components/eyebrow.css */
/* from project CoreDesk */
/* PT: eyebrow utilitario, label sans uppercase com letterspacing largo, acento por defeito */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.eyebrow
{
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* PT: variante neutra para footers e meta info, sem acento */
.eyebrow--mute
{
  color: var(--ink-mute);
}

/* === components/headline.css === */
/* static/styles/components/headline.css */
/* from project CoreDesk */
/* PT: utilitarios .h1/.h2/.h3 com escala fluida, font display + tracking negativo */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.h1, .h2, .h3
{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}

.h1
{
  font-size: var(--type-display-2xl);
  line-height: 0.95;
}

/* PT: variante para headlines longas (>60 chars), evita parede de texto a 124px */
.h1--long
{
  font-size: var(--type-display-xl);
  line-height: 1.05;
}

.h2
{
  font-size: var(--type-display-xl);
  line-height: 1.0;
}

.h3
{
  font-size: var(--type-display-lg);
  line-height: 1.05;
}

/* PT: word destacado dentro da headline, acento da edicao, nunca italico */
.h1 em, .h2 em, .h3 em
{
  font-style: normal;
  color: var(--accent);
}

/* === components/cta.css === */
/* static/styles/components/cta.css */
/* from project CoreDesk */
/* PT: botao call-to-action, variantes primary (preenchido) + ghost (border outline) com seta animada */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.cta
{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--type-body-md);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  border: 1px solid transparent;
  transition:
    transform    var(--dur-normal) var(--ease-spring),
    background   var(--dur-instant) var(--ease-out),
    color        var(--dur-instant) var(--ease-out),
    border-color var(--dur-instant) var(--ease-out),
    box-shadow   var(--dur-normal) var(--ease-out);
  will-change: transform;
  cursor: pointer;
}

.cta:hover
{
  transform: translateY(-1px);
}

/* PT: primary, fundo accent, texto escuro */
.cta--primary
{
  background: var(--accent);
  color: var(--bg);
  box-shadow: var(--shadow-sm);
}

.cta--primary:hover
{
  background: var(--accent-soft);
  box-shadow: var(--shadow-md);
}

/* PT: ghost, transparente com border, texto branco que vira accent no hover */
.cta--ghost
{
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

.cta--ghost:hover
{
  color: var(--accent);
  border-color: var(--accent);
}

/* PT: seta interna, anima para a direita no hover */
.cta__arrow
{
  display: inline-block;
  font-size: 1.1em;
  line-height: 1;
  transition: transform var(--dur-quick) var(--ease-out);
}

.cta:hover .cta__arrow
{
  transform: translateX(4px);
}

/* === components/nav.css === */
/* static/styles/components/nav.css */
/* from project CoreDesk */
/* PT: barra de topo do site, container para wordmark + (futuro) acoes a direita */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.nav
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px clamp(24px, 4vw, 48px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background      var(--dur-normal) var(--ease-out),
    backdrop-filter var(--dur-normal) var(--ease-out),
    border-color    var(--dur-normal) var(--ease-out);
}

/* PT: estado scrolled — fundo blur + border subtil quando user faz scroll > 40px */
.nav.is-scrolled
{
  background: rgba(15, 17, 23, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}

/* PT: o padding-top do hero (clearance da nav fixed) vive agora em hero.css, junto do resto do hero. */

@media (max-width: 640px)
{
  .nav
  {
    padding-block: 22px;
  }
}

/* === components/hero.css === */
/* static/styles/components/hero.css */
/* from project CoreDesk */
/* PT: hero full-viewport, text + CTAs + scroll cue. Dashboard movido para seccao propria. */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.hero
{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  /* PT: padding-top explicito garante clearance da nav fixed (~92px) mesmo quando o conteudo e alto
     e o flex-end o empurra para cima (ex: laptops 1366x768). NAO usar padding-block (anulava isto). */
  padding-top: clamp(120px, 18vh, 220px);
  padding-bottom: clamp(16px, 2vh, 32px);
  padding-inline: clamp(24px, 4vw, 64px);
  gap: var(--space-6);
  overflow: hidden;
  /* PT: nav agora e position:fixed, hero ocupa o viewport completo, sem cap */
  min-height: 100vh;
  /* PT: 4 orbs em profundidades diferentes — topo principal + secundarios em cantos opostos */
  background:
    radial-gradient(ellipse 1200px 600px at 50% -10%,
                    var(--accent-faint) 0%,
                    transparent 65%),
    radial-gradient(ellipse 700px 500px at 12% 110%,
                    var(--accent-faint) 0%,
                    transparent 60%),
    radial-gradient(ellipse 650px 450px at 95% 85%,
                    var(--accent-faint) 0%,
                    transparent 60%),
    radial-gradient(ellipse 450px 350px at 78% -5%,
                    var(--accent-faint) 0%,
                    transparent 60%),
    var(--bg);
}

/* PT: feixe de luz diagonal a varrer lentamente — gradient stripe rotacionado */
.hero__beam
{
  position: absolute;
  /* PT: maior que o hero para a rotacao 25deg nao deixar arestas visiveis */
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 38%,
    var(--accent-faint) 47%,
    rgba(255, 255, 255, 0.04) 50%,
    var(--accent-faint) 53%,
    transparent 62%,
    transparent 100%
  );
  transform: rotate(25deg) translateX(-40%);
  /* PT: cycle reduzido para o feixe voltar mais cedo, range -40% a +40% mantem
     velocidade do sweep visivel similar a antes (~34s) com pausa ~8s entre sweeps */
  animation: hero-beam-sweep 42s linear infinite;
  /* PT: delay negativo para o feixe ja estar a entrar no ecra ao carregar */
  animation-delay: -3s;
  will-change: transform;
}

@keyframes hero-beam-sweep
{
  0%   { transform: rotate(25deg) translateX(-40%); }
  100% { transform: rotate(25deg) translateX( 40%); }
}

@media (prefers-reduced-motion: reduce)
{
  .hero__beam
  {
    animation: none;
    opacity: 0.6;
  }
}

/* PT: conteudo do hero fica acima do feixe e orbs */
.hero > *:not(.hero__beam)
{
  position: relative;
  z-index: 1;
}

.hero .h1
{
  max-width: 18ch;
}

.hero .h1--long
{
  max-width: 26ch;
}

.hero__lede
{
  max-width: 56ch;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.55;
  color: var(--ink-soft);
}

.hero__ctas
{
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-7);
}

.hero__meta
{
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-top: var(--space-5);
}

/* PT: scroll cue clicavel, ultimo flex child do hero (centrado por align-items: center do pai), bounce subtil + fade-out via JS */
.hero__scroll
{
  margin-top: clamp(48px, 8vh, 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: none;
  border: 0;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  animation: cue-breathe 2.6s var(--ease-in-out) infinite;
  transition: opacity var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}

.hero__scroll:hover,
.hero__scroll:focus-visible
{
  color: var(--ink);
  outline: none;
}

.hero__scroll:focus-visible
{
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-1);
}

.hero__scroll-arrow
{
  display: inline-flex;
  color: var(--accent);
}

.hero__scroll-arrow svg
{
  width: 22px;
  height: 22px;
}

/* PT: palpitacao suave — opacity sobe e desce, sem deslocacao nem escala */
@keyframes cue-breathe
{
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1;    }
}

/* PT: estado fade-out apos scroll, JS adiciona .is-faded */
.hero__scroll.is-faded
{
  opacity: 0;
  animation: none;
}

@media (prefers-reduced-motion: reduce)
{
  .hero__scroll
  {
    animation: none;
    opacity: 0.7;
  }
}

/* PT: mobile — conteudo centrado verticalmente, clearance da nav fixed, CTAs full-width empilhados.
   100svh evita o salto causado pela barra de URL dinamica do browser mobile. */
@media (max-width: 640px)
{
  .hero
  {
    justify-content: center;
    padding-top: 104px;
    padding-bottom: var(--space-7);
    gap: var(--space-5);
    min-height: 100svh;
  }

  .hero__ctas
  {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: var(--space-6);
  }

  .hero__ctas .cta
  {
    width: 100%;
    justify-content: center;
  }

  .hero__scroll
  {
    margin-top: var(--space-6);
  }
}

/* PT: laptops/ecras baixos (ex 1366x768). O viewport e largo (H1 ~123px via 9vw) mas curto,
   entao o conteudo nao cabe e o flex-end empurra-o para cima do logo. Reduzir H1, centrar
   verticalmente e apertar o ritmo para o hero caber em ~768px sem colidir com a nav. */
@media (min-width: 641px) and (max-height: 820px)
{
  .hero
  {
    justify-content: center;
    padding-top: clamp(100px, 14vh, 132px);
    padding-bottom: var(--space-6);
    gap: var(--space-5);
  }

  .hero .h1
  {
    font-size: clamp(40px, 6.5vw, 84px);
  }

  .hero__lede
  {
    margin-top: var(--space-2);
  }

  .hero__ctas
  {
    margin-top: var(--space-5);
  }

  .hero__scroll
  {
    margin-top: clamp(20px, 4vh, 40px);
  }
}

/* === components/screenshot.css === */
/* static/styles/components/screenshot.css */
/* from project CoreDesk */
/* PT: moldura para screenshots de produto, lift shadow + hairline outline + top inset highlight */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.hero-screenshot
{
  position: relative;
  padding-inline: clamp(24px, 4vw, 64px);
  padding-bottom: clamp(48px, 8vw, 96px);
  margin-top: clamp(-48px, -6vw, -24px);
}

.hero-screenshot__frame
{
  position: relative;
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  border-radius: var(--radius-4);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 -1px 0 rgba(255, 255, 255, 0.04) inset;
  aspect-ratio: 16 / 9;
}

.hero-screenshot__img
{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hero-screenshot__caption
{
  display: block;
  text-align: center;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--type-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* PT: em mobile o frame perde radius para parecer edge-to-edge, melhor leitura */
@media (max-width: 640px)
{
  .hero-screenshot
  {
    padding-inline: 0;
  }

  .hero-screenshot__frame
  {
    border-radius: 0;
    aspect-ratio: 16 / 10;
  }
}

/* === components/showcase.css === */
/* static/styles/components/showcase.css */
/* from project CoreDesk */
/* PT: secção que mostra a dashboard como prova visual, full-width com lift shadow */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.showcase
{
  padding-block: clamp(96px, 12vw, 160px);
  padding-inline: clamp(24px, 4vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
  /* PT: backdrop radial accent ao centro — bg-image em vez de ::before */
  background:
    radial-gradient(ellipse 1200px 600px at 50% 40%,
                    var(--accent-faint) 0%,
                    transparent 60%),
    var(--bg);
}

.showcase__head
{
  max-width: var(--container);
  margin: 0 auto clamp(48px, 6vw, 80px) auto;
  position: relative;
  z-index: 1;
}

.showcase__h
{
  margin-top: var(--space-3);
}

.showcase__sub
{
  max-width: 60ch;
  margin: var(--space-5) auto 0 auto;
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.5;
  color: var(--ink-mute);
}

.showcase__frame
{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  border-radius: var(--radius-4);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow:
    0 32px 96px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 -1px 0 rgba(255, 255, 255, 0.04) inset;
  aspect-ratio: 16 / 9;
}

.showcase__frame picture
{
  display: block;
  width: 100%;
  height: 100%;
}

.showcase__img
{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.showcase__caption
{
  display: block;
  text-align: center;
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--type-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  position: relative;
  z-index: 1;
}

@media (max-width: 640px)
{
  .showcase
  {
    padding-inline: 0;
  }

  .showcase__head
  {
    padding-inline: 24px;
  }

  .showcase__frame
  {
    border-radius: 0;
  }
}

/* === components/feat-row.css === */
/* static/styles/components/feat-row.css */
/* from project CoreDesk */
/* PT: linha feature, texto + screenshot lado-a-lado. Alterna text-left/text-right por indice. */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.features-suite
{
  padding-block: clamp(96px, 12vw, 160px);
  padding-inline: clamp(24px, 4vw, 64px);
  background: var(--bg);
}

.features-suite__head
{
  text-align: center;
  max-width: var(--container);
  margin: 0 auto clamp(64px, 8vw, 112px) auto;
}

.features-suite__h
{
  margin-top: var(--space-3);
}

.features-suite__sub
{
  max-width: 60ch;
  margin: var(--space-5) auto 0 auto;
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.5;
  color: var(--ink-mute);
}

.features-suite__stack
{
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 10vw, 144px);
}

.feat-row
{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

/* PT: reverse, screenshot fica a esquerda, texto a direita */
.feat-row--reverse .feat-row__text
{
  order: 2;
}

.feat-row--reverse .feat-row__media
{
  order: 1;
}

.feat-row__eyebrow
{
  margin-bottom: var(--space-4);
}

.feat-row__title
{
  margin-bottom: var(--space-5);
  max-width: 18ch;
}

.feat-row__body
{
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: var(--space-6);
  max-width: 48ch;
}

.feat-row__bullets
{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 48ch;
}

.feat-row__bullets li
{
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--type-body-md);
  line-height: 1.5;
  color: var(--ink-soft);
}

.feat-row__bullets li::before
{
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.feat-row__media
{
  width: 100%;
}

.feat-row__frame
{
  width: 100%;
  border-radius: var(--radius-3);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 -1px 0 rgba(255, 255, 255, 0.04) inset;
  aspect-ratio: 16 / 10;
  transition:
    transform    var(--dur-normal) var(--ease-spring),
    box-shadow   var(--dur-normal) var(--ease-out);
  will-change: transform;
}

.feat-row__frame:hover
{
  transform: translateY(-4px);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.65),
    0 0 0 1px var(--accent),
    0 -1px 0 rgba(255, 255, 255, 0.04) inset;
}

.feat-row__frame picture
{
  display: block;
  width: 100%;
  height: 100%;
}

.feat-row__img
{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 1024px)
{
  .feat-row
  {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  /* PT: em mobile, texto sempre primeiro, screenshot abaixo, ignora reverse */
  .feat-row--reverse .feat-row__text { order: 1; }
  .feat-row--reverse .feat-row__media { order: 2; }
}

/* === components/suite-carousel.css === */
/* static/styles/components/suite-carousel.css */
/* from project CoreDesk */
/* PT: carousel da suite — 1 feature destacada (stage) + setas prev/next + linha de pills clicáveis */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.suite-carousel
{
  padding-block: clamp(96px, 12vw, 160px);
  padding-inline: clamp(24px, 4vw, 64px);
  background: var(--bg);
}

.suite-carousel__head
{
  text-align: center;
  max-width: var(--container);
  margin: 0 auto clamp(48px, 6vw, 80px) auto;
}

.suite-carousel__h
{
  margin-top: var(--space-3);
}

.suite-carousel__sub
{
  max-width: 60ch;
  margin: var(--space-5) auto 0 auto;
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.5;
  color: var(--ink-mute);
}

/* PT: container principal carousel — setas + stage */
.carousel
{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
  max-width: var(--container-wide);
  margin: 0 auto;
}

.carousel__nav
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-soft);
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    color        var(--dur-instant) var(--ease-out),
    border-color var(--dur-instant) var(--ease-out),
    transform    var(--dur-normal)  var(--ease-spring),
    background   var(--dur-instant) var(--ease-out);
}

.carousel__nav:hover
{
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg);
  transform: translateY(-2px);
}

.carousel__nav:active
{
  transform: translateY(0);
}

/* PT: stage onde aparece o slide activo. min-height fixo para evitar layout shift entre slides com mais/menos texto. */
.carousel__stage
{
  position: relative;
  min-height: 520px;
}

.feat-slide
{
  display: none;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.feat-slide.is-active
{
  display: grid;
  animation: feat-slide-in var(--dur-normal) var(--ease-out);
}

@keyframes feat-slide-in
{
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.feat-slide__text
{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.feat-slide__eyebrow
{
  margin-bottom: var(--space-2);
}

.feat-slide__title
{
  max-width: 16ch;
}

.feat-slide__body
{
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 44ch;
}

.feat-slide__bullets
{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 44ch;
}

.feat-slide__bullets li
{
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--type-body-md);
  line-height: 1.5;
  color: var(--ink-soft);
}

.feat-slide__bullets li::before
{
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.feat-slide__media
{
  width: 100%;
}

.feat-slide__frame
{
  position: relative;
  width: 100%;
  border-radius: var(--radius-3);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, var(--accent-faint) 0%, transparent 60%),
    var(--bg-soft);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 -1px 0 rgba(255, 255, 255, 0.04) inset;
  aspect-ratio: 16 / 9;
}

/* PT: placeholder CSS visivel enquanto img nao carrega/nao existe. Img cobre quando presente. */
.feat-slide__frame::before
{
  content: "SCREENSHOT PENDING";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.22);
}

.feat-slide__frame picture
{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.feat-slide__img
{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* PT: linha de pills, todas as 10 features clicáveis em UMA linha (nowrap, padding compacto) */
.carousel__pills
{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 10px;
  max-width: var(--container-wide);
  margin: clamp(4px, 0.6vw, 12px) auto 0 auto;
  padding-inline: clamp(16px, 2vw, 32px);
}

.carousel__pill
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    color        var(--dur-instant) var(--ease-out),
    border-color var(--dur-instant) var(--ease-out),
    background   var(--dur-instant) var(--ease-out),
    transform    var(--dur-normal)  var(--ease-spring);
}

.carousel__pill:hover
{
  color: var(--ink);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.carousel__pill.is-active
{
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 16px var(--accent-glow);
}

.carousel__pill .icon
{
  color: currentColor;
}

/* PT: ===== MOBILE / TABLET (<=1024px) =====
   Redesign: imagem em cima + texto, setas sobrepostas a imagem, slides empilhados na
   mesma celula de grid (stage auto-dimensiona ao slide mais alto => ZERO layout shift),
   pills numa strip horizontal com scroll, swipe handled em carousel.js. */
@media (max-width: 1024px)
{
  .carousel
  {
    display: block;
    position: relative;
    max-width: 560px;
  }

  /* PT: todos os slides ocupam a mesma celula 1/1; o stage fica com a altura do mais alto.
     So o activo e visivel (visibility/opacity). Sem numero magico, sem salto entre slides. */
  .carousel__stage
  {
    display: grid;
    min-height: 0;
    /* PT: touch-action pan-y deixa o scroll vertical da pagina mas reserva o gesto horizontal para o swipe */
    touch-action: pan-y;
  }

  .feat-slide,
  .feat-slide.is-active
  {
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
    gap: var(--space-6);
    animation: none;
  }

  .feat-slide:not(.is-active)
  {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .feat-slide.is-active
  {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--dur-normal) var(--ease-out);
  }

  /* PT: media com altura fixa fluida; o centro acompanha as setas (clamp do top = metade) */
  .feat-slide__frame
  {
    aspect-ratio: auto;
    height: clamp(200px, 40vw, 300px);
  }

  /* PT: setas sobrepostas a imagem, centradas verticalmente na media (top = metade da altura da media) */
  .carousel__nav
  {
    position: absolute;
    top: clamp(100px, 20vw, 150px);
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    background: rgba(10, 12, 16, 0.55);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--ink);
  }

  .carousel__nav:hover
  {
    transform: translateY(-50%);
    background: rgba(10, 12, 16, 0.78);
  }

  .carousel__nav--prev { left: 8px; }
  .carousel__nav--next { right: 8px; }

  /* PT: pills numa strip horizontal scrollavel, snap suave, scrollbar escondida */
  .carousel__pills
  {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: var(--space-6);
    padding-block: 4px;
  }

  .carousel__pills::-webkit-scrollbar
  {
    display: none;
  }

  .carousel__pill
  {
    scroll-snap-align: center;
  }
}

/* === components/fabric.css === */
/*
 * static/styles/components/fabric.css
 * from project desk:NG/Web
 * PT: seccao "the fabric" — 3 cards demonstrando que todos os objectos partilham o mesmo modelo (mention, share, search)
 * 2026+ Core Concept Collective
 * 2026+ Diogo <diogopinto>
 */

.fabric
{
  padding-block: clamp(96px, 12vw, 160px);
  padding-inline: clamp(24px, 4vw, 64px);
  background: var(--bg);
  border-block: 1px solid var(--line);
}

.fabric__head
{
  text-align: center;
  max-width: var(--container);
  margin: 0 auto clamp(48px, 6vw, 80px) auto;
}

.fabric__h
{
  margin-top: var(--space-3);
}

.fabric__sub
{
  max-width: 64ch;
  margin: var(--space-5) auto 0 auto;
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.55;
  color: var(--ink-mute);
}

.fabric__grid
{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  max-width: var(--container);
  margin: 0 auto;
  align-items: stretch;
}

.fabric-card
{
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition:
    transform    var(--dur-normal) var(--ease-spring),
    border-color var(--dur-instant) var(--ease-out),
    box-shadow   var(--dur-normal) var(--ease-out);
  will-change: transform;
}

.fabric-card:hover
{
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px var(--accent-glow);
}

.fabric-card__icon
{
  width: 36px;
  height: 36px;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.fabric-card__title
{
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}

.fabric-card__body
{
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* PT: marcador @ inline destacado no body da card "mention anything" */
.fabric-card__at
{
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--accent);
}

@media (max-width: 1280px)
{
  .fabric__grid
  {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px)
{
  .fabric__grid
  {
    grid-template-columns: 1fr;
    max-width: 56ch;
  }
}

/* === components/infra-grid.css === */
/* static/styles/components/infra-grid.css */
/* from project CoreDesk */
/* PT: grelha infraestrutura, cards densos icon+title+1-frase, sem screenshots */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.infra
{
  padding-block: clamp(96px, 12vw, 160px);
  padding-inline: clamp(24px, 4vw, 64px);
  background: var(--bg-deep);
  border-block: 1px solid var(--line);
}

.infra__head
{
  text-align: center;
  max-width: var(--container);
  margin: 0 auto clamp(48px, 6vw, 80px) auto;
}

.infra__h
{
  margin-top: var(--space-3);
}

.infra__sub
{
  max-width: 60ch;
  margin: var(--space-5) auto 0 auto;
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.5;
  color: var(--ink-mute);
}

.infra__grid
{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(16px, 2vw, 24px);
  max-width: var(--container);
  margin: 0 auto;
}

.infra-card
{
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  padding: var(--space-6);
  transition:
    transform    var(--dur-normal) var(--ease-spring),
    border-color var(--dur-instant) var(--ease-out),
    box-shadow   var(--dur-normal) var(--ease-out);
  will-change: transform;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.infra-card:hover
{
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px var(--accent-glow);
}

.infra-card__icon
{
  width: 28px;
  height: 28px;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.infra-card__title
{
  font-family: var(--font-display);
  font-size: var(--type-body-lg);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}

.infra-card__body
{
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* PT: ultima card "+ more" tem tratamento mais leve, hint que ha mais para descobrir */
.infra-card--more
{
  background: transparent;
  border-style: dashed;
}

.infra-card--more .infra-card__icon
{
  color: var(--ink-mute);
}

@media (max-width: 1024px)
{
  .infra__grid
  {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px)
{
  .infra__grid
  {
    grid-template-columns: 1fr;
    max-width: 56ch;
  }
}

/* === components/why-merged.css === */
/* static/styles/components/why-merged.css */
/* from project CoreDesk */
/* PT: bloco editorial compacto (manifesto + why-now fundidos). Eyebrow + statement forte + 3 sub-lines + mega-stat + pull-quote Playfair */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.why-merged
{
  padding-block: clamp(96px, 12vw, 160px);
  padding-inline: clamp(24px, 4vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
  /* PT: backdrop radial accent ao centro — bg-image em vez de ::before */
  background:
    radial-gradient(ellipse 1200px 600px at 50% 50%,
                    var(--accent-faint) 0%,
                    transparent 60%),
    var(--bg);
}

.why-merged__inner
{
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
}

.why-merged__h
{
  margin-top: var(--space-3);
  max-width: 22ch;
  margin-inline: auto;
}

.why-merged__statements
{
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  max-width: 56rem;
  margin-inline: auto;
}

.why-merged__statement
{
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--type-body-md);
  line-height: 1.5;
}

.why-merged__statement strong
{
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-display-md);
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.why-merged__statement p
{
  color: var(--ink-soft);
  max-width: 28ch;
}

.why-merged__mega
{
  margin-top: clamp(64px, 8vw, 112px);
  max-width: 48ch;
  margin-inline: auto;
}

.why-merged__mega-num
{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(120px, 15vw, 200px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--accent);
}

.why-merged__mega-cap
{
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--type-body-md);
  line-height: 1.55;
  color: var(--ink-soft);
}

.why-merged__quote
{
  margin-top: clamp(56px, 7vw, 96px);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.1;
  color: var(--ink);
  max-width: 28ch;
  margin-inline: auto;
}

@media (max-width: 1024px)
{
  .why-merged__statements
  {
    grid-template-columns: 1fr;
    max-width: 36ch;
  }

  .why-merged__statement
  {
    text-align: center;
  }

  .why-merged__statement p
  {
    margin-inline: auto;
  }
}

/* === components/europe-moment.css === */
/* static/styles/components/europe-moment.css */
/* from project CoreDesk */
/* PT: bloco editorial europeu — h2 + mapa europa + flag pins + 5 stats. Portado do GROUND deck slide 02. */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.europe
{
  /* PT: seccao "THE PROBLEM" usa accent vermelho local (override do azul da edicao .eu).
     Cascade afecta atmosphere::after, eyebrow, em da h2, flag-pin__base e europe__stat-num. */
  --accent:       #F47272;
  --accent-soft:  #DC2626;
  --accent-glow:  rgba(244, 114, 114, 0.32);
  --accent-faint: rgba(244, 114, 114, 0.08);

  padding-block: clamp(96px, 12vw, 160px);
  padding-inline: clamp(24px, 4vw, 64px);
  background: var(--bg-deep);
  border-block: 1px solid var(--line);
}

.europe__inner
{
  max-width: var(--container-wide);
  margin: 0 auto;
}

.europe__row
{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.europe__head
{
  max-width: 30ch;
}

.europe__h
{
  margin-top: var(--space-3);
}

.europe__h em
{
  white-space: nowrap;
}

.europe__map
{
  position: relative;
  width: clamp(440px, 50vw, 720px);
  flex-shrink: 0;
}

/* PT: halo accent atras do mapa, integra com a atmosphere da seccao */
.europe__map::before
{
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse 55% 55% at 50% 50%,
                              var(--accent-faint) 0%,
                              transparent 72%);
}

.europe__map-svg
{
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.42;
  filter: invert(1) brightness(1.45) contrast(0.6);
  /* PT: mask radial esbate os bordos para o mapa dissolver na seccao */
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, black 52%, transparent 100%);
          mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, black 52%, transparent 100%);
}

.flag-pin
{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -100%);
}

.flag-pin__flag
{
  width: 36px;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.flag-pin__flag img
{
  display: block;
  width: 100%;
  height: auto;
}

.flag-pin__pole
{
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.4);
}

.flag-pin__base
{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-faint);
}

.europe__attribution
{
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  text-align: right;
  margin-top: var(--space-3);
  opacity: 0.6;
}

.europe__attribution a
{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
}

.europe__attribution a:hover
{
  color: var(--ink-soft);
}

.europe__stats
{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.europe__stat
{
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  padding: var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.europe__stat-num
{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4vw, 56px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--accent);
}

.europe__stat-cap
{
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  line-height: 1.45;
  color: var(--ink-soft);
}

.europe__stat-src
{
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: auto;
}

@media (max-width: 1024px)
{
  .europe__row
  {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .europe__head
  {
    max-width: 100%;
    margin-inline: auto;
  }

  .europe__map
  {
    margin: 0 auto;
  }

  .europe__stats
  {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px)
{
  .europe__stats
  {
    grid-template-columns: 1fr;
    max-width: 36ch;
    margin: 0 auto;
  }

  /* PT: o floor de 440px do mapa ultrapassa a largura do telemovel e cria scroll horizontal.
     Deixar encolher abaixo de 440px nos ecras estreitos. */
  .europe__map
  {
    width: 100%;
    max-width: 440px;
  }

  /* PT: nowrap no em forcava "is not European." a transbordar a direita; deixar quebrar no mobile. */
  .europe__h em
  {
    white-space: normal;
  }
}

/* === components/icon.css === */
/* static/styles/components/icon.css */
/* from project CoreDesk */
/* PT: estilo base dos SVGs inline, herda currentColor da text-color do parent */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.icon
{
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* === components/manifesto.css === */
/* static/styles/components/manifesto.css */
/* from project CoreDesk */
/* PT: bloco manifesto, eyebrow + headline + 3 cards verticais (privacy/sovereignty/control) */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.manifesto
{
  padding-block: clamp(96px, 12vw, 160px);
  padding-inline: clamp(24px, 4vw, 64px);
  text-align: center;
}

.manifesto__head
{
  max-width: var(--container);
  margin: 0 auto var(--space-8) auto;
}

.manifesto__h
{
  margin-top: var(--space-3);
}

.manifesto__grid
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
  max-width: var(--container);
  margin: 0 auto;
}

.manifesto-card
{
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  padding: var(--space-7);
  transition:
    transform    var(--dur-normal) var(--ease-spring),
    border-color var(--dur-instant) var(--ease-out),
    box-shadow   var(--dur-normal) var(--ease-out);
  will-change: transform;
}

.manifesto-card:hover
{
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px var(--accent-glow);
}

.manifesto-card__icon
{
  width: 32px;
  height: 32px;
  color: var(--accent);
  margin-bottom: var(--space-5);
}

.manifesto-card__title
{
  font-family: var(--font-display);
  font-size: var(--type-display-md);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.manifesto-card__body
{
  font-family: var(--font-body);
  font-size: var(--type-body-md);
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 1024px)
{
  .manifesto__grid
  {
    grid-template-columns: 1fr;
    max-width: 56ch;
  }
}

/* === components/why-now.css === */
/* static/styles/components/why-now.css */
/* from project CoreDesk */
/* PT: bloco editorial Why Now, typographic only. Eyebrow + H2 + sub + 3 cards atribuidos + mega-stat + pull-quote Playfair */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.why-now
{
  padding-block: clamp(96px, 12vw, 160px);
  padding-inline: clamp(24px, 4vw, 64px);
  background: var(--bg-deep);
  border-block: 1px solid var(--line);
}

.why-now__head
{
  max-width: var(--container);
  margin: 0 auto var(--space-9) auto;
  text-align: center;
}

.why-now__h
{
  margin-top: var(--space-3);
}

.why-now__sub
{
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.5;
  color: var(--ink-mute);
}

.why-now__grid
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
  max-width: var(--container);
  margin: 0 auto;
}

.why-now-card
{
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  padding: var(--space-7);
  transition:
    transform    var(--dur-normal) var(--ease-spring),
    border-color var(--dur-instant) var(--ease-out);
  will-change: transform;
}

.why-now-card:hover
{
  transform: translateY(-2px);
  border-color: var(--accent);
}

.why-now-card__source
{
  display: block;
  margin-bottom: var(--space-5);
}

.why-now-card__body
{
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
}

.why-now-card__link
{
  display: inline-block;
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--dur-quick) var(--ease-out);
}

.why-now-card__link:hover
{
  opacity: 0.7;
}

.why-now__mega
{
  margin-top: clamp(64px, 8vw, 128px);
  text-align: center;
  max-width: 48ch;
  margin-inline: auto;
}

.why-now__mega-num
{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(144px, 18vw, 240px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--accent);
}

.why-now__mega-cap
{
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.5;
  color: var(--ink-soft);
}

.why-now__mega-src
{
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.why-now__quote
{
  margin-top: clamp(64px, 8vw, 128px);
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1.05;
  color: var(--ink);
  max-width: 28ch;
  margin-inline: auto;
}

@media (max-width: 1024px)
{
  .why-now__grid
  {
    grid-template-columns: 1fr;
    max-width: 56ch;
  }
}

/* === components/feat-grid.css === */
/* static/styles/components/feat-grid.css */
/* from project CoreDesk */
/* PT: bloco produto, eyebrow + headline + sub + grelha 4x2 de 8 feature cards */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.features
{
  padding-block: clamp(96px, 12vw, 160px);
  padding-inline: clamp(24px, 4vw, 64px);
  text-align: center;
}

.features__head
{
  max-width: var(--container);
  margin: 0 auto var(--space-9) auto;
}

.features__h
{
  margin-top: var(--space-3);
}

.features__sub
{
  max-width: 60ch;
  margin: var(--space-5) auto 0 auto;
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.5;
  color: var(--ink-mute);
}

.features__grid
{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
  max-width: var(--container);
  margin: 0 auto;
}

.feat-card
{
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  padding: var(--space-6);
  transition:
    transform    var(--dur-normal) var(--ease-spring),
    border-color var(--dur-instant) var(--ease-out),
    box-shadow   var(--dur-normal) var(--ease-out);
  will-change: transform;
}

.feat-card:hover
{
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 32px var(--accent-glow);
}

.feat-card__icon
{
  width: 32px;
  height: 32px;
  color: var(--accent);
  margin-bottom: var(--space-5);
}

.feat-card__title
{
  font-family: var(--font-display);
  font-size: var(--type-body-lg);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.feat-card__body
{
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 1024px)
{
  .features__grid
  {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px)
{
  .features__grid
  {
    grid-template-columns: 1fr;
    max-width: 56ch;
  }
}

/* === components/plan-cards.css === */
/* static/styles/components/plan-cards.css */
/* from project CoreDesk */
/* PT: bloco planos, 3 cards (Cloud/CoreCloud sugerido/On-prem) com ✓/✗/⚠ por linha */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.plans
{
  padding-block: clamp(96px, 12vw, 160px);
  padding-inline: clamp(24px, 4vw, 64px);
  text-align: center;
  background: var(--bg-deep);
  border-block: 1px solid var(--line);
}

.plans__head
{
  max-width: var(--container);
  margin: 0 auto var(--space-9) auto;
}

.plans__h
{
  margin-top: var(--space-3);
}

.plans__sub
{
  max-width: 56ch;
  margin: var(--space-5) auto 0 auto;
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.5;
  color: var(--ink-mute);
}

.plans__grid
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
  max-width: var(--container);
  margin: 0 auto;
  align-items: stretch;
}

.plan-card
{
  position: relative;
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  transition:
    transform    var(--dur-normal) var(--ease-spring),
    border-color var(--dur-instant) var(--ease-out),
    box-shadow   var(--dur-normal) var(--ease-out);
  will-change: transform;
}

.plan-card:hover
{
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 32px var(--accent-glow);
}

/* PT: variante suggested, sobe -12px no resting, accent border, glow forte */
.plan-card--suggested
{
  background: var(--surface-elevated);
  border-color: var(--accent);
  transform: translateY(-12px);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 32px var(--accent-glow);
}

.plan-card--suggested:hover
{
  transform: translateY(-16px);
  box-shadow: 0 0 0 1px var(--accent), 0 16px 48px var(--accent-glow);
}

.plan-card__eyebrow
{
  margin-bottom: var(--space-5);
}

.plan-card__icon
{
  width: 28px;
  height: 28px;
  color: var(--ink-mute);
  margin-bottom: var(--space-4);
}

.plan-card--suggested .plan-card__icon
{
  color: var(--accent);
}

.plan-card__title
{
  font-family: var(--font-display);
  font-size: var(--type-display-md);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.plan-card__meter
{
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--space-6);
}

.plan-card--suggested .plan-card__meter
{
  color: var(--accent);
}

.plan-card__divider
{
  height: 1px;
  background: var(--line);
  margin-bottom: var(--space-6);
}

.plan-card ul
{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.plan-card li
{
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}

.plan-card li.no
{
  color: var(--ink-dim);
}

/* PT: "maybe" = depende do fornecedor, não é fail nem warn, é incógnita */
.plan-card li.maybe
{
  color: var(--ink-soft);
}

.plan-card li .mark
{
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.plan-card li.yes   .mark { background: rgba(34, 197, 94, 0.20);  color: var(--ok); }
.plan-card li.no    .mark { background: rgba(244, 114, 114, 0.22); color: var(--bad); }
.plan-card li.maybe .mark { background: rgba(245, 158, 11, 0.22); color: var(--warn); }
.plan-card li.warn  .mark { background: rgba(244, 114, 114, 0.22); color: var(--bad); }

.plan-card__cta
{
  margin-top: var(--space-7);
}

@media (max-width: 1024px)
{
  .plans__grid
  {
    grid-template-columns: 1fr;
    max-width: 48ch;
  }

  .plan-card--suggested
  {
    transform: none;
  }
}

/* === components/cta-band.css === */
/* static/styles/components/cta-band.css */
/* from project CoreDesk */
/* PT: bloco final convite ao contacto, headline + email visivel + nota "form coming soon" */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.cta-band
{
  padding-block: clamp(96px, 12vw, 160px);
  padding-inline: clamp(24px, 4vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
  /* PT: backdrop radial accent no fundo — bg-image em vez de ::before */
  background:
    radial-gradient(ellipse 1200px 600px at 50% 110%,
                    var(--accent-faint) 0%,
                    transparent 65%),
    var(--bg);
}

.cta-band__h
{
  max-width: var(--container);
  margin: var(--space-3) auto var(--space-5) auto;
}

.cta-band__sub
{
  max-width: 56ch;
  margin: 0 auto var(--space-8) auto;
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* PT: alternativa por email, mesmo espacamento que send para nota (gap do form__submit) */
.cta-band__alt
{
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  color: var(--ink-mute);
}

.cta-band__alt a
{
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-instant) var(--ease-out);
}

.cta-band__alt a:hover
{
  color: var(--accent);
}

/* === components/form.css === */
/* static/styles/components/form.css */
/* from project CoreDesk */
/* PT: formulario de contacto, inputs sobre bg-soft, estados focus/invalid/success, honeypot escondido */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

/* PT: margem-top curta, o espacamento ao sub vem do margin-bottom dele (colapsam) */
.form
{
  max-width: 640px;
  margin: var(--space-6) auto 0 auto;
  text-align: left;
}

/* PT: nome + email lado a lado em desktop */
.form__grid
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.form__row
{
  margin-bottom: var(--space-5);
}

.form__grid .form__row
{
  margin-bottom: var(--space-5);
}

.form__row label
{
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.form__optional
{
  color: var(--ink-mute);
  text-transform: none;
  letter-spacing: 0;
}

.form__required
{
  color: var(--accent);
  text-decoration: none;
  border: none;
}

.form input,
.form textarea
{
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  padding: 12px 16px;
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--type-body-md);
  color: var(--ink);
  transition: border-color var(--dur-instant) var(--ease-out);
}

.form textarea
{
  resize: vertical;
  min-height: 130px;
}

.form input:focus,
.form textarea:focus
{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* PT: invalid so depois de interaccao (user-invalid), shake unico ao blur */
.form input:user-invalid:not(:focus),
.form textarea:user-invalid:not(:focus)
{
  animation: input-shake var(--dur-quick) var(--ease-out) 1;
  border-color: var(--bad);
}

@keyframes input-shake
{
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-2px); }
  75%      { transform: translateX(2px); }
}

/* PT: honeypot fora do ecra, nunca display:none (bots detectam) */
.form__honeypot
{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}

.form__submit
{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
  text-align: center;
}

/* PT: send maior e centrado */
.form__send
{
  padding: 18px 56px;
  font-size: var(--type-body-lg);
}

/* PT: spinner inline no botao durante o envio */
.form__submit .cta.is-sending
{
  opacity: 0.7;
  pointer-events: none;
}

.form__submit .cta.is-sending::before
{
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: form-spin 700ms linear infinite;
}

@keyframes form-spin
{
  to { transform: rotate(360deg); }
}

.form__note
{
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  line-height: 1.5;
  color: var(--ink-mute);
}

.form__note a
{
  color: var(--ink-soft);
  text-decoration: underline;
}

.form__status
{
  margin-top: var(--space-5);
  padding: 12px 16px;
  border: 1px solid var(--bad);
  border-radius: var(--radius-2);
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  color: var(--ink-soft);
  animation: form-status-in var(--dur-quick) var(--ease-out) both;
}

.form__status a
{
  color: var(--ink);
  text-decoration: underline;
}

@keyframes form-status-in
{
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* PT: cartao de sucesso substitui o formulario */
.form-success
{
  max-width: 640px;
  margin: var(--space-9) auto 0 auto;
  padding: var(--space-8);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  animation: form-success var(--dur-normal) var(--ease-spring) both;
}

.form-success h3
{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  color: var(--accent);
  margin: 0 0 var(--space-4) 0;
}

.form-success p
{
  font-family: var(--font-body);
  font-size: var(--type-body-md);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.form-success__sig
{
  margin-top: var(--space-5) !important;
  color: var(--ink-mute) !important;
}

@keyframes form-success
{
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* PT: mobile, coluna unica e send full-width */
@media (max-width: 640px)
{
  .form__grid
  {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .form__send
  {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce)
{
  .form input:user-invalid:not(:focus),
  .form textarea:user-invalid:not(:focus)
  {
    animation: none;
  }

  .form-success
  {
    animation: none;
  }
}

/* === components/palette.css === */
/* static/styles/components/palette.css */
/* from project CoreDesk */
/* PT: paleta de comandos Cmd+K, overlay full-viewport + painel central com input e lista */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.palette
{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 17, 23, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(48px, 12vh, 160px);
}

.palette__panel
{
  width: 100%;
  max-width: 560px;
  background: var(--surface-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.palette__input
{
  width: 100%;
  padding: var(--space-5);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: var(--type-body-md);
  color: var(--ink);
  outline: none;
}

.palette__input::placeholder
{
  color: var(--ink-mute);
}

.palette__list
{
  list-style: none;
  padding: var(--space-3);
  margin: 0;
  max-height: 50vh;
  overflow-y: auto;
}

.palette__list li
{
  margin: 0;
}

.palette__list a
{
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-2);
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  color: var(--ink-soft);
  transition: background var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out);
}

.palette__list a:hover,
.palette__list a:focus
{
  background: var(--bg-soft);
  color: var(--accent);
}

/* === components/footer.css === */
/* static/styles/components/footer.css */
/* from project CoreDesk */
/* PT: rodape do site, wordmark + edition switcher + meta + social, layout simples */
/* 2026+ Core Concept Collective */
/* 2026+ Diogo <diogopinto> */

.foot
{
  padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 64px) clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
}

.foot__inner
{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-7);
  align-items: start;
}

.foot__brand
{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 36ch;
}

.foot__tag
{
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  line-height: 1.5;
  color: var(--ink-mute);
}

.foot__links
{
  display: flex;
  gap: var(--space-7);
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.foot__col
{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.foot__col-h
{
  color: var(--ink-mute);
  font-weight: 600;
}

.foot__col a
{
  color: var(--ink-soft);
  transition: color var(--dur-instant) var(--ease-out);
}

.foot__col a:hover
{
  color: var(--accent);
}

.foot__col a.is-current
{
  color: var(--accent);
}

.foot__bottom
{
  max-width: var(--container);
  margin: clamp(48px, 6vw, 80px) auto 0 auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--type-micro);
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

@media (max-width: 1024px)
{
  .foot__inner
  {
    grid-template-columns: 1fr;
  }

  .foot__links
  {
    flex-wrap: wrap;
    gap: var(--space-5) var(--space-7);
  }

  /* PT: tap targets >=32px no mobile/tablet (DoD §8.1) — expande a area tactil
     PT: vertical dos links do rodape; sem efeito no desktop (>1024px) */
  .foot__col a
  {
    display: inline-block;
    padding-block: 8px;
  }

  .foot__bottom
  {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
}

/* === components/lightbox.css === */
/* static/styles/components/lightbox.css */
/* from project desk:NG/Web */
/* PT: overlay tipo Discord para amplificar imgs (dashboard + carousel features). Click backdrop fecha. */
/* 2026+ desk:NG */
/* 2026+ Diogo <diogopinto> */

.feat-slide__img,
.showcase__img
{
  cursor: zoom-in;
  transition: filter var(--dur-instant) var(--ease-out);
}

.feat-slide__img:hover,
.showcase__img:hover
{
  filter: brightness(1.04);
}

.lightbox-overlay
{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 80px);
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  cursor: zoom-out;
  transition: opacity var(--dur-normal) var(--ease-out);
}

.lightbox-overlay.is-open
{
  opacity: 1;
  pointer-events: auto;
}

.lightbox-overlay__img
{
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-3);
  box-shadow:
    0 32px 96px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  cursor: default;
  transform: scale(0.96);
  transition: transform var(--dur-normal) var(--ease-spring);
}

.lightbox-overlay.is-open .lightbox-overlay__img
{
  transform: scale(1);
}

.lightbox-overlay__close
{
  position: absolute;
  top: clamp(16px, 2vw, 32px);
  right: clamp(16px, 2vw, 32px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.85);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background   var(--dur-instant) var(--ease-out),
    border-color var(--dur-instant) var(--ease-out),
    transform    var(--dur-normal)  var(--ease-spring);
}

.lightbox-overlay__close:hover
{
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce)
{
  .lightbox-overlay,
  .lightbox-overlay__img
  {
    transition: none;
  }
}