/* ============================================
   Clone: vercel.com/frameworks/nextjs
   Light theme, Geist-style design system
   ============================================ */

/* --- Geist Sans --- */
@font-face {
  font-family: 'Geist';
  src: url('fonts/geist-sans/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('fonts/geist-sans/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('fonts/geist-sans/Geist-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Geist Mono --- */
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/geist-mono/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/geist-mono/GeistMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Reset --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
ul, ol { list-style: none; }
input, textarea, select { font-family: inherit; }

/* --- Variaveis --- */
:root {
  --bg: #fafafa;
  --bg-card: #fff;
  --bg-elevated: #fff;

  --border: #eaeaea;
  --border-hover: #999;

  --text-primary: #171717;
  --text-secondary: #4d4d4d;  /* era #666; Vercel computed: rgb(77,77,77) */
  --text-tertiary: #888;

  /* Vercel DS tokens usados no globe SVG */
  --ds-gray-900: hsl(0, 0%, 30%);      /* = rgb(77,77,77) — dot dos nós */
  --ds-gray-500: #C9C9C9;               /* linhas do wireframe — hsla(0,0%,79%,1) igual Vercel */
  --ds-background-100: #fff;            /* fundo branco dos nós */

  --accent: #000;

  --font-body: 'Geist', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'Roboto Mono', Menlo, Monaco, monospace;

  --section-padding: 100px;
  --section-padding-sm: 80px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.15s; /* era 0.2s; Vercel usa 0.15s */

  /* --- Camada 1: tokens Vercel corrigidos --- */
  --weight-heading: 600;          /* Vercel: SemiBold, nao Bold */
  --btn-height: 48px;             /* altura fixa dos CTAs */
  --btn-font-size: 16px;          /* Vercel: 16px (clone tinha 14px) */
  --radius-button: 100px;         /* pill shape, assinatura Vercel 2024+ */
  --shadow-button: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px,
                   rgba(0, 0, 0, 0.04) 0px 2px 2px 0px,
                   rgb(250, 250, 250) 0px 0px 0px 1px; /* double-ring do btn secondary */
  --padding-card: 96px 48px;      /* Vercel: 96px vertical (clone tinha 48px) */

  /* --- Bloco D: Grid crosshairs --- */
  --cross-size: 21px;
  --cross-half: calc((21px / 2) + 1px - .5px); /* ≈ 11px */
  --guide-color: hsla(0, 0%, 92%, 1);   /* #ebebeb — exato da Vercel */
  --cross-color: rgb(168, 168, 168);    /* #a8a8a8 — cor dos marcadores + */
}

/* --- Container --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Tipografia --- */
h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-heading);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-primary);
}

h1 {
  font-size: 40px;
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.03em;
}

h3 {
  font-size: 20px;
  font-weight: 600;
}

h4 {
  font-size: 16px;
  font-weight: 600;
}

p {
  color: var(--text-secondary);
  line-height: 1.7;
}

/* --- Botoes --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-height);
  padding: 0 20px;
  border-radius: var(--radius-button);
  font-weight: 500;
  font-size: var(--btn-font-size);
  line-height: 1;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.btn:active {
  transform: scale(0.98);
}

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

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}

.btn-primary:hover {
  background: #333;
  border-color: #333;
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-button);
}

.btn-secondary:hover {
  box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 0px 1px,
              rgba(0, 0, 0, 0.06) 0px 2px 4px 0px,
              rgb(250, 250, 250) 0px 0px 0px 1px;
}

.btn-sm {
  --btn-height: 40px;
  --btn-font-size: 14px;
  padding: 0 10px;
  border-radius: 100px;
}


/* ================================================================
   NAV
   ================================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 250, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); /* shadow-based border, como o original */
}

.nav-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.nav-logo {
  display: flex;
  align-items: center;
  color: var(--text-primary);
  flex-shrink: 0;
  transition: opacity var(--duration) var(--ease);
}

.nav-logo:hover { opacity: 0.7; }
.nav-logo svg { height: 32px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 6px;
  white-space: nowrap;
  transition: color var(--duration) var(--ease);
}

.nav-link:hover { color: var(--text-primary); }

.nav-chevron {
  opacity: 0.5;
  flex-shrink: 0;
  transition: opacity var(--duration) var(--ease);
}

.nav-link:hover .nav-chevron { opacity: 0.8; }

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

.nav-ask-ai {
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 6px;
  transition: color var(--duration) var(--ease);
}

.nav-ask-ai:hover { color: var(--text-primary); }

.nav-login {
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 6px;
  transition: color var(--duration) var(--ease);
}

.nav-login:hover { color: var(--text-primary); }

.nav-signup {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 100px;
  margin-left: 8px;
}

.nav-hamburger {
  display: none;
  padding: 8px;
  cursor: pointer;
  color: var(--text-primary);
}

.nav-hamburger .icon-hamburger { display: block; }
.nav-hamburger .icon-close    { display: none; }
body.menu-open .nav-hamburger .icon-hamburger { display: none; }
body.menu-open .nav-hamburger .icon-close    { display: block; }
body.menu-open { overflow: hidden; }
body.menu-open header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 300; }

.nav-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: #ffffff;
  flex-direction: column;
  padding: 64px 24px 32px;
  overflow-y: auto;
}

.nav-mobile.open { display: flex; }

.nav-mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 500;
  height: 48px;
  border-radius: 6px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.nav-mobile-cta:hover { opacity: 0.85; }

.nav-mobile a {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 12px;
  font-size: 16px;
  color: #666666;
}

.nav-mobile a:hover { color: #000000; }


/* ================================================================
   HERO
   ================================================================ */
.hero {
  text-align: center;
  padding: 244px 24px 80px;
  position: relative;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

/* --- Bloco D.3: CSS Grid real — 12 colunas, confinado a 1080px --- */
.hero-grid-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  width: 100%;
  max-width: 1080px;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 0;
  margin: 1px 0 0 1px; /* offset de 1px da borda, identico ao original */
  padding-top: 65px; /* grid-cells começam na mesma altura dos círculos (y≈129px viewport) */
}

/* --- Bloco D.4: Crosshairs nas intersecções do grid 1080px --- */
.cross {
  position: absolute;
  width: var(--cross-size);
  height: var(--cross-size);
  z-index: 2;
  pointer-events: none;
}

/* Hero: apenas TL — padrão Vercel (diagonal, não retangular) */
.cross-tl { top: 65px; left: 0; transform: translate(-50%, -50%); }

/* Trust section: cross no canto inferior-direito (junção trust→features) */
/* right: alinha à borda direita do container 1080px centralizado no viewport */
.trust { position: relative; }
.cross-trust-br { bottom: 0; right: calc((100% - 1080px) / 2); transform: translate(50%, 50%); }

/* Enterprise section: cross no canto superior-esquerdo */
.enterprise { position: relative; }
.cross-enterprise-tl { top: 238px; left: calc((100% - 1080px) / 2); transform: translate(-50%, -50%); }

.cross-line-h {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cross-size);
  height: var(--cross-half);
  border-bottom: 1px solid var(--cross-color);
}

.cross-line-v {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cross-half);
  height: var(--cross-size);
  border-right: 1px solid var(--cross-color);
}

.grid-cell {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* fecha a borda direita do container */
.grid-cell:nth-child(12n) {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding-top: 24px;
}

/* --- Bloco E: 7 círculos decorativos (padrão Vercel — position: static em células de grid) --- */
.hero-circles-wrapper {
  position: absolute;
  top: 65px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.hero-circles-track {
  width: 100%;
  max-width: 1080px;
  margin-left: 1px; /* alinha com o hero-grid (margin: 1px 0 0 1px) */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  height: 179px;
}

/* cada bloco espelha grid-module__block do original */
.hero-circle-block {
  overflow: hidden;
  position: relative;
}

/* grid-column spans idênticos ao original */
.hero-circle-block:nth-child(1) { grid-column: 1 / 2; }   /* halfLeft: 1 col (~90px) */
.hero-circle-block:nth-child(2) { grid-column: 2 / 4; }   /* círculo 1: 2 cols */
.hero-circle-block:nth-child(3) { grid-column: 4 / 6; }   /* círculo 2: 2 cols */
.hero-circle-block:nth-child(4) { grid-column: 6 / 8; }   /* logo: 2 cols */
.hero-circle-block:nth-child(5) { grid-column: 8 / 10; }  /* círculo 4: 2 cols */
.hero-circle-block:nth-child(6) { grid-column: 10 / 12; } /* círculo 5: 2 cols */
.hero-circle-block:nth-child(7) { grid-column: 12 / 13; } /* halfRight: 1 col (~90px) */

/* círculo base: position static, preenche a célula naturalmente */
.hero-circle {
  width: 179px;
  height: 179px;
  border-radius: 100%;
  border: 1px solid #ebebeb;
  background: transparent;
}

/* half-circles: absolute dentro da célula de 1 coluna — clipping via overflow: hidden do bloco */
.hero-circle-block:nth-child(1) .hero-circle {
  position: absolute;
  top: 0;
  left: -90px;
}

.hero-circle-block:nth-child(7) .hero-circle {
  position: absolute;
  top: 0;
  left: 0;
}

/* logo circle */
.hero-circle--logo {
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.hero-icon {
  width: 90px;
  height: 90px;
  margin: 0;
  background: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 8px 40px rgba(0, 0, 0, 0.12);
}

.hero-title {
  max-width: 700px;
  margin: 0 auto 20px;
}

.hero-sub {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto 36px;
  line-height: 1.6;
}

.hero-sub strong {
  color: var(--text-primary);
  font-weight: 600;
}

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}


/* ================================================================
   TRUST LOGOS — Bloco C
   Animação: scroll marquee contínuo, 40s, --copies: 4
   Estrutura: 4 grupos de 7 logos, padding-right nos grupos = gap perfeito de loop
   ================================================================ */
.trust {
  padding: 90px 0;
  text-align: center;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.trust-label {
  font-size: 20px;
  font-weight: 600;
  color: #4d4d4d;
  margin-bottom: 40px;
  padding: 0 24px;
}

.trust-label strong {
  color: #4d4d4d;
}

.trust-carousel {
  width: 100%;
}

.trust-inner {
  max-width: 1080px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(255,255,255) 128px, rgb(255,255,255) calc(100% - 128px), rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(255,255,255) 128px, rgb(255,255,255) calc(100% - 128px), rgba(0,0,0,0) 100%);
}

.trust-track img {
  filter: none;
}

.trust-track {
  --copies: 4;
  display: flex;
  width: max-content;
  animation: scroll 40s linear infinite;
}

@keyframes scroll {
  0%   { transform: translate(0, 0); }
  100% { transform: translate3d(calc(-100% / var(--copies)), 0, 0); }
}

.trust-group {
  display: flex;
  align-items: center;
  gap: 56px;
  list-style: none;
  margin: 0;
  /* padding-right = mesmo valor do gap: cria o espaço de separação entre grupos,
     garantindo loop matematicamente perfeito (cada grupo tem largura idêntica) */
  padding: 0 56px 0 0;
}

.trust-group li {
  flex-shrink: 0;
}

.logo-placeholder {
  width: 100%;
  height: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #999;
  font-family: var(--font-sans);
  overflow: hidden;
  white-space: nowrap;
}


/* ================================================================
   FEATURE CARDS (3 colunas — confinado ao container 1080px)
   ================================================================ */
.features {
  padding: 0;
  /* sem border-bottom — Vercel não tem aqui */
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 1080px;
  margin: 0 auto;
}

/* F.1 — separadores verticais via border-right nos 2 primeiros cards */
.feature-card:nth-child(1),
.feature-card:nth-child(2) {
  border-right: 1px solid var(--border);
}

.feature-card {
  padding: var(--padding-card); /* 96px 48px */
  display: flex;
  flex-direction: column;
  align-items: center;          /* F.2 — centralizado */
  text-align: center;           /* F.2 — texto centralizado */
  background: transparent;      /* F.1 — transparent, não #fafafa */
  transition: all var(--duration);
  position: relative;
  z-index: 1;
}

/* F.3 — Ícone pill (pattern reutilizável: icon container com double ring) */
.feature-icon {
  background: #fafafa;                                  /* --ds-background-200 */
  border: 1px solid rgba(0, 0, 0, 0.12);               /* gray-900 em 20% */
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.07);           /* anel externo sutil */
  border-radius: 99px;
  padding: 10px 32px;
  display: grid;
  place-content: center;
  margin-bottom: 40px;          /* gap entre pill e texto */
  transition: all var(--duration);
}

.feature-icon svg {
  width: 32px;
  height: 32px;
  color: #171717;
}

.feature-title {
  margin-bottom: 8px;
}

.feature-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}


/* ================================================================
   FRONTEND CLOUD — G.1: Grid structure + CSS sticky
   ================================================================ */
.frontend-cloud {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 535px 583px;
  gap: 0;
  max-width: 1080px;
  margin: 0 auto;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}

/* solidCell: placeholder vazio (col 1, ambas as rows) */
.fc-solid-cell {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

/* introCell: container tall para o sticky (col 1, ambas as rows) */
.fc-intro-cell {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  border-right: 1px solid #ebebeb;
}

/* sticky inner: permanece visível enquanto os features sobem por trás */
.fc-intro {
  position: sticky;
  top: 112px;   /* 64px nav + 48px gap */
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 48px;
}

.fc-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -1.28px;
  color: #171717;
}

.fc-sub {
  font-size: 16px;
  line-height: 24px;
  color: #4d4d4d;
}

/* Features: colunas direitas (cols 2–3) */
.fc-feature {
  grid-column: 2 / 4;
  padding: 48px;
}

.fc-feature-1 {
  grid-row: 1 / 2;
  border-bottom: 1px solid #ebebeb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* G.2 — DX Platform */
.dx-impact {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.dx-impact-text {
  font-size: 16px;
  line-height: 24px;
  color: #666;
  margin: 0;
  max-width: 340px;
}

.dx-impact-text b {
  color: #000;
  font-weight: 500;
}

.dx-pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  background: #171717;
  color: #fff;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.dx-visual {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.dx-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.dx-row--left {
  justify-content: flex-start;
}

.dx-row--right {
  justify-content: flex-end;
}

.dx-comment {
  position: relative;
}

.dx-comment--left {
  width: 291px;
}

.dx-comment--right {
  width: 253px;
}

.dx-bubble {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 2px 0px;
  padding: 12px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dx-bubble-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.dx-bubble-author {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.dx-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  outline: 1.5px solid var(--avatar-color, #888);
  outline-offset: 1px;
}

.dx-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dx-author-name {
  font-size: 12px;
  font-weight: 500;
  color: #000;
  font-family: 'Geist Mono', monospace;
}

.dx-bubble-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: #888;
}

.dx-bubble-icons svg {
  display: block;
}

.dx-bubble-body {
  position: relative;
  display: block;
}

.dx-bubble-text {
  font-size: 12px;
  line-height: 18px;
  color: #444;
  margin: 0;
}

.dx-bubble-text code {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  background: #f2f2f2;
  border-radius: 4px;
  padding: 1px 4px;
  color: #000;
}

.dx-cursor {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
  animation: 3s infinite float;
}

.dx-cursor--mirrored {
  animation-delay: 0.8s;
}

.dx-cursor-arrow {
  display: block;
  color: var(--cursor-color, #888);
}

.dx-cursor--mirrored .dx-cursor-arrow {
  transform: scaleX(-1);
}

.dx-cursor-name {
  height: 20px;
  padding: 0 6px;
  border-radius: 100px;
  background: var(--cursor-color, #888);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.dx-toolbar-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.dx-toolbar {
  width: 340px;
  height: 50px;
  background: #fff;
  border-radius: 99px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 2px 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.dx-toolbar-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dx-toolbar-divider {
  width: 1px;
  height: 24px;
  background: rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.dx-toolbar-avatars {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.dx-toolbar-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--avatar-color, #888);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: #fff;
}

.dx-avatar-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.dx-toolbar-label {
  font-size: 12px;
  color: #666;
}

.fc-feature-2 {
  grid-row: 2 / 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* G.3 — Infrastructure Globe */
.infra-impact {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.infra-impact-text {
  font-size: 16px;
  line-height: 24px;
  color: #666;
  margin: 0;
  max-width: 340px;
}

.infra-impact-text b {
  color: #000;
  font-weight: 600;
}

.infra-visual {
  flex: 1;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.infra-globe-wrapper {
  position: relative;
  width: 100%;
  height: 360px;
}

.infra-globe-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  mask-image: linear-gradient(black 0%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(black 0%, black 70%, transparent 100%);
}

/* G.3.3 — Badge deploy state machine */
.infra-badge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 259px;
  min-width: 127px;
  height: 40px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px,
              rgba(0, 0, 0, 0.04) 0px 2px 2px 0px,
              rgb(250, 250, 250) 0px 0px 0px 1px;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 2;
}

/* State visibility — show only the active template */
.infra-badge-start,
.infra-badge-typing,
.infra-badge-building,
.infra-badge-deployed { display: none; flex: 1; align-items: center; padding: 0 12px; }

.infra-badge[data-state="start"]    .infra-badge-start    { display: flex; }
.infra-badge[data-state="typing"]   .infra-badge-typing   { display: flex; }
.infra-badge[data-state="building"] .infra-badge-building { display: flex; }
.infra-badge[data-state="deployed"] .infra-badge-deployed { display: flex; }

/* Shared badge border when content visible */
.infra-badge[data-state="building"] .infra-badge-building,
.infra-badge[data-state="deployed"] .infra-badge-deployed {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* Mono text base */
.infra-badge-mono {
  font-size: 12px;
  font-family: 'Geist Mono', monospace;
  color: #111;
  white-space: nowrap;
  margin: 0;
}

/* Dimmed prefix */
.infra-badge-dim { color: #888; }

/* Row layout for typing / building states */
.infra-badge-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.infra-badge-row--building { gap: 12px; }

/* Cursor block */
.infra-badge-cursor {
  width: 8px;
  height: 14px;
  background: #111;
  animation: infra-cursor-blink 1s steps(2) infinite;
  flex-shrink: 0;
}

@keyframes infra-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Dots (building state) */
.infra-badge-dots {
  display: inline-flex;
  gap: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

.infra-badge-dots span {
  display: block;
  width: 1.5px;
  height: 1.5px;
  background: #111;
  border-radius: 9999px;
  animation: infra-dot-blink 1s steps(4) infinite;
}

.infra-badge-dots span:nth-child(2) { animation-timing-function: steps(3); }
.infra-badge-dots span:nth-child(3) { animation-timing-function: steps(2); }

@keyframes infra-dot-blink {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.infra-badge-replay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  color: #888;
  flex-shrink: 0;
  border-radius: 0 8px 8px 0;
  padding: 0;
  /* Oculto por padrão — aparece só no estado deployed */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.infra-badge[data-state="deployed"] .infra-badge-replay {
  opacity: 1;
  pointer-events: auto;
}

.infra-badge-replay:hover {
  background: rgba(0, 0, 0, 0.03);
  color: #111;
}

/* Crosshair na interseção dos dois separadores */
.fc-cross {
  position: absolute;
  left: 33.333%;   /* borda direita da col 1 */
  top: 535px;      /* fundo da row 1 */
  width: var(--cross-size);
  height: var(--cross-size);
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.fc-cross .cross-line-h {
  position: absolute;
  top: 0; left: 0;
  width: var(--cross-size);
  height: var(--cross-half);
  border-bottom: 1px solid var(--cross-color);
}

.fc-cross .cross-line-v {
  position: absolute;
  top: 0; left: 0;
  width: var(--cross-half);
  height: var(--cross-size);
  border-right: 1px solid var(--cross-color);
}

.showcase-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #0070f3;
  transition: opacity var(--duration) var(--ease);
}

.showcase-link:hover { opacity: 0.7; }

.showcase-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}



/* ================================================================
   SECTION TEXT (centrado)
   ================================================================ */
.section-text {
  padding: var(--section-padding) 24px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.section-text-title {
  margin-bottom: 20px;
}

.section-text-sub {
  font-size: 17px;
  max-width: 640px;
  margin: 0 auto 36px;
  color: var(--text-secondary);
}

.section-text-ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}


/* ================================================================
   OOB SUPPORT — section overrides
   ================================================================ */
#support.section-text {
  padding: 48px 24px;
  border-bottom: none;
}

#support .section-text-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -1.28px;
  line-height: 40px;
  color: #171717;
  margin-bottom: 16px;
}

#support .section-text-sub {
  font-size: 16px;
  line-height: 24px;
  max-width: 805px;
  margin-bottom: 32px;
}

/* ================================================================
   MERGING BUBBLE
   ================================================================ */
.merging-bubble {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 242px;
  height: 114px;
  margin: 0 auto 32px;
}

.mb-bubbles {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.mb-start,
.mb-end {
  width: 71px;
  height: 114px;
  display: block;
  flex-shrink: 0;
}

.mb-middle {
  width: 125px;
  height: 114px;
  display: block;
  flex-shrink: 0;
}

.mb-plus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 17px;
  color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mb-children {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  gap: 80px;
  align-items: center;
}

.mb-child {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mb-child svg {
  width: 48px;
  height: 48px;
}


/* ================================================================
   OOB FEATURES GRID (3x3)
   ================================================================ */
.oob-features {
  border-bottom: 1px solid #ebebeb;
}

.oob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 216px 240px 240px;
  max-width: 1080px;
  margin: 0 auto;
}

.oob-cell {
  padding: 24px 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
}

.oob-cell:not(:nth-child(3n)) {
  border-right: 1px solid #ebebeb;
}

.oob-cell:nth-child(-n+6) {
  /* border-bottom removed — horizontal lines not present in original */
}

.oob-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.oob-icon svg {
  width: 16px;
  height: 16px;
  color: #171717;
}

.oob-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oob-feature-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #171717;
  margin: 0;
}

.oob-feature-desc {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
  margin: 0;
}


/* ================================================================
   ENTERPRISE
   ================================================================ */
.enterprise {
  position: relative;
}

/* Sub-seção 1 — Heading */
.ent-heading {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  border-bottom: 1px solid #ebebeb;
}

.ent-heading h2 {
  padding: 150px 0 48px;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -1.28px;
  margin: 0;
}

/* Sub-seção 2 — Feature Cards */
.ent-cards {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  min-height: 481px;
  border-bottom: 1px solid #ebebeb;
}

.ent-card {
  padding: 48px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: space-between;
}

.ent-card:first-child {
  border-right: 1px solid #ebebeb;
}

/* Merging bubble — variante small (enterprise) */
.ent-bubble {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 39px;
  align-self: flex-start;
}

.ent-bubble-shapes {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: visible;
  pointer-events: none;
}

.ent-bubble-shapes svg {
  flex-shrink: 0;
  height: 39px;
}

.ent-mb-start,
.ent-mb-end { width: 24px; }

.ent-mb-middle { width: 43px; }

.ent-bubble-icons {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 21px;
  padding: 0 0 0 13px; /* lobe centers at x=24,67px; for 22px icons: padding=13, gap=21 */
}

.ent-bubble-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #171717;
  flex-shrink: 0;
}

/* Impact paragraph */
.ent-impact {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  color: #4d4d4d;
  margin: 0;
  min-height: 192px;
}

.ent-impact b {
  color: #171717;
  font-weight: 600;
}

.ent-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.ent-card > .btn-primary {
  align-self: flex-start;
}

/* Background SVG placeholder (decorativo, majoritariamente fora do card) */
.ent-bg {
  position: absolute;
  pointer-events: none;
}

.ent-card:first-child .ent-bg[data-illustration="shield"] {
  top: 240px; right: -92px; bottom: -240px; left: 269px;
}

.ent-card:last-child .ent-bg[data-illustration="ecosystem"] {
  top: 239px; right: -243px; bottom: -239px; left: 293px;
}

/* Sub-seção 3 — Testimonials */
.ent-testimonials {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1px solid #ebebeb;
}

.ent-testimonial {
  display: flex;
  flex-direction: column;
  padding: 48px;
  gap: 24px;
  text-decoration: none;
  color: inherit;
  transition: background var(--duration);
}

.ent-testimonial:hover {
  background: #fafafa;
}

.ent-testimonial:first-child {
  border-right: 1px solid #ebebeb;
}

.ent-testimonial img {
  display: block;
}

.ent-quote {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  color: #4d4d4d;
  flex: 1;
  margin: 0;
  quotes: none;
}

.ent-quote--sm {
  font-size: 20px;
  line-height: 28px;
}

.ent-quote b {
  color: #171717;
  font-weight: 600;
}

.ent-attribution {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.ent-author {
  font-size: 14px;
  font-weight: 500;
  color: #171717;
  margin: 0;
}

.ent-role {
  font-size: 14px;
  color: #4d4d4d;
  margin: 0;
}

.ent-attribution > svg {
  color: #171717;
  flex-shrink: 0;
}


/* ================================================================
   PARTIAL PRERENDERING (PPR) — Bloco J
   ================================================================ */

/* Transition variables */
#ppr-root {
  --ppr-duration: 0.4s;
  --ppr-easing: ease-in;
  --ppr-transition: background var(--ppr-duration) var(--ppr-easing),
                    border-color var(--ppr-duration) var(--ppr-easing),
                    opacity var(--ppr-duration) var(--ppr-easing);
}

/* Section */
.ppr {
  border-bottom: 1px solid #ebebeb;
  background: var(--bg);
}

/* Visual block — max-width 1080px centrado */
.ppr-visual {
  max-width: 1080px;
  margin: 0 auto;
  padding: 135px 48px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Heading row: H3 e P inline na mesma linha */
.ppr-heading-row {
  display: block;
  margin-bottom: 48px;
  text-align: center;
}

.ppr-h3 {
  display: inline;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.96px;
  color: #171717;
}

.ppr-h3-sub {
  display: inline;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.96px;
  color: #4d4d4d;
}

/* Content row: mockup + timeline + meta (matches Vercel original structure) */
.ppr-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

/* ============================================================
   RIGHT: META COLUMN (stage buttons + text)
   margin-left: 48px → gap between TL right edge and meta left
   This gap + translateX(-65px) on buttons = icon center on TL center
   ============================================================ */
.ppr-meta {
  display: flex;
  flex-direction: column;
  gap: 64px;
  flex-shrink: 0;
  width: 280px;
  margin-left: 48px;
}

/* Timeline area: narrow line + stages list side by side */
.ppr-timeline-area {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}

/* Timeline area: obsolete wrapper — kept for safety, hidden */
.ppr-timeline-area {
  display: contents;
}

/* Vertical timeline line (2px × 285px) — sibling of mockup and meta */
.ppr-tl {
  width: 2px;
  height: 300px;
  flex-shrink: 0;
  position: relative;
  transform: translateY(-48px);
  margin-left: 32px;
}

/* Background static line — light gray like Vercel */
.ppr-tl-bg {
  position: absolute;
  inset: 0;
  background: #ebebeb;
}

/* Animated gradient line — clip-path reveals from bottom (teal) to top (orange) */
.ppr-tl-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    #46dfc5   0%,
    #62dfff  25.63%,
    #5caaf9  51.26%,
    #fa9d59  76.88%,
    #ff990a 102.51%
  );
  transition: clip-path 0.3s ease-out;
}

/* Clip-path per state — reveals progress from bottom up */
.ppr-tl-grad[data-state="extract"]  { clip-path: inset(0 0 100% 0); }
.ppr-tl-grad[data-state="prerender"]{ clip-path: inset(0 0 50%  0); }
.ppr-tl-grad[data-state="stream"]   { clip-path: inset(0 0 0%   0); }

/* Stage list — gap: 56px matches Vercel original (step center-to-center = 128px = 72px step + 56px gap) */
.ppr-stages {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Individual stage row — position:relative so button can be absolutely positioned */
.ppr-stage {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  min-height: 32px;
}

/* Stage button — 32×32 full circle, pulled LEFT to overlap timeline via translateX(-65px)
   Ground truth: position:absolute, transform:translateX(-65px), border-radius:999px
   Inactive (light mode): bg=#fafafa, border=rgba(0,0,0,0.08), icon=#4d4d4d */
.ppr-stage-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fafafa;
  color: #4d4d4d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateX(-65px) translateY(-50%);
  z-index: 2;
  transition: background 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
}

.ppr-stage-btn:hover:not([data-active="true"]) {
  border-color: rgba(0, 0, 0, 0.2);
}

/* Active color per state — ground truth from DevTools (Vercel, 2026-05-08):
   extract #FF990A, prerender #52AEFF, stream #45DEC5 — icon always white when active */
.ppr-stage-btn[data-state="extract"]  { --active-color: #ff990a; }
.ppr-stage-btn[data-state="prerender"]{ --active-color: #52aeff; }
.ppr-stage-btn[data-state="stream"]   { --active-color: #45dec5; }

.ppr-stage-btn[data-active="true"] {
  background: var(--active-color);
  color: #ffffff;
  border-color: transparent;
}

/* Pulse ring on active button */
.ppr-stage-btn::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--active-color, transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.ppr-stage-btn[data-active="true"]::after {
  opacity: 0.35;
}

/* Stage label text — starts at meta left edge; button is absolute 65px to the LEFT (no overlap) */
.ppr-stage-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #888;
  margin: 4px 0 0;
  transition: color 0.15s ease-out;
}

.ppr-stage-label strong {
  font-weight: 600;
  color: #555;
  display: block;
  margin-bottom: 2px;
}

/* CTA row */
.ppr-cta-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: -8px;
}

/* CTA button — ghost pill 40px */
.ppr-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  background: #fff;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: #171717;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.04);
}

.ppr-cta:hover {
  opacity: 0.8;
}

/* Pattern: Inline suffix badge */
.ppr-exp-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 10px;
  background: #d4f7f0;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  color: #067a6e;
  line-height: 1;
}

/* ============================================================
   RIGHT: MOCKUP (animation)
   ============================================================ */
.ppr-mockup {
  flex: 1;
  min-height: 412px;
  background: transparent;
  border-radius: 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  box-shadow: none;
}

/* Header bar — changes bg color per state */
.ppr-store-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 8px;
  background: #f2f2f2;
  border-radius: 6px;
  border: 1px dashed transparent;
  transition: var(--ppr-transition);
}

/* Extract: amber header — Vercel: rgb(255,244,214) / rgb(255,178,36) */
.ppr-store-header[data-state="extract"] {
  background: #FFF4D6;
  border-color: #FFB224;
}

/* Prerender/Stream: return to gray (default) */
.ppr-store-header[data-state="prerender"],
.ppr-store-header[data-state="stream"] {
  background: #f2f2f2;
  border-color: transparent;
}

.ppr-store-logo {
  font-size: 14px;
  font-weight: 600;
  color: #171717;
  flex-shrink: 0;
}

.ppr-store-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: center;
}

.ppr-store-nav span {
  font-size: 12px;
  font-weight: 400;
  color: #4d4d4d;
}

/* Right section (cart + avatar) — separate state-driven bg */
.ppr-store-header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px dashed transparent;
  transition: var(--ppr-transition);
}

/* Prerender: blue right section — Vercel: rgb(235,245,255) / rgb(0,114,245) */
.ppr-store-header-right[data-state="prerender"] {
  background: rgb(235, 245, 255);
  border-color: rgb(0, 114, 245);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* Stream: teal right section — Vercel: rgb(229,250,246) / rgb(18,165,148) */
.ppr-store-header-right[data-state="stream"] {
  background: rgb(229, 250, 246);
  border-color: rgb(18, 165, 148);
}

/* Header placeholders (amber → blue) */
.ppr-header-placeholders {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.ppr-placeholder {
  width: 20px;
  height: 20px;
  background: hsla(42, 100%, 78%, 1); /* ds-amber-400 = #FFDD8F */
  transition: background 0.3s;
  flex-shrink: 0;
}

.ppr-placeholder:first-child { border-radius: 4px; }
.ppr-placeholder:last-child  { border-radius: 9999px; }

/* Prerender: placeholders viram azul */
.ppr-store-header-right[data-state="prerender"] .ppr-placeholder {
  background: hsla(209, 100%, 90%, 1); /* ds-blue-400 = #CCE6FF */
}

/* Stream: esconde placeholders, mostra ícones reais */
.ppr-header-icons {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.ppr-store-header-right[data-state="stream"] .ppr-header-placeholders { display: none; }
.ppr-store-header-right[data-state="stream"] .ppr-header-icons { display: flex; }

/* <Suspense> label via ::after */
.ppr-store-header-right[data-suspense="true"],
.ppr-banner[data-suspense="true"] {
  position: relative;
  overflow: visible;
}

.ppr-store-header-right[data-suspense="true"]::after,
.ppr-banner[data-suspense="true"]::after {
  content: "<Suspense>";
  white-space: nowrap;
  height: 16px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  font-family: var(--font-mono);
  color: #fff;
  background: hsla(212, 100%, 48%, 1); /* ds-blue-700 = #0072F5 */
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 0 0 4px 4px;
  padding: 0 4px;
  position: absolute;
  bottom: -16px;
  right: -1px;
  z-index: 10;
  display: block;
}

/* Suspense label aparece no prerender */
.ppr-store-header-right[data-state="prerender"]::after,
.ppr-banner[data-state="prerender"]::after {
  opacity: 1;
}

.ppr-cart-wrap {
  position: relative;
  display: flex;
  align-items: center;
  color: #171717;
}

.ppr-cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 13px;
  height: 13px;
  background: #171717;
  color: #fff;
  font-size: 8px;
  font-weight: 600;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Geist Mono', monospace;
}

.ppr-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #d4d4d4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: #4d4d4d;
}

/* Welcome banner — opacity + bg driven by state */
.ppr-banner {
  height: 66px;
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed transparent;
  transition: var(--ppr-transition);
  background: transparent;
  opacity: 0; /* extract: completely hidden */
}

/* Prerender: placeholder bars — Vercel: rgb(235,245,255) / rgb(0,114,245) */
.ppr-banner[data-state="prerender"] {
  background: rgb(235, 245, 255);
  border-color: rgb(0, 114, 245);
  opacity: 1;
  border-bottom-right-radius: 0;
}

/* Stream: fully visible teal — Vercel: rgb(229,250,246) / rgb(18,165,148) */
.ppr-banner[data-state="stream"] {
  background: rgb(229, 250, 246);
  border-color: rgb(18, 165, 148);
  opacity: 1;
}

/* Banner placeholder bars */
.ppr-banner-placeholders {
  display: none;
  flex-direction: row;
  gap: 8px;
  width: 100%;
  align-items: center;
}

.ppr-banner-placeholders [data-placeholder] {
  background: hsla(209, 100%, 90%, 1); /* ds-blue-400 */
  border-radius: 6px;
  height: 24px;
  flex-shrink: 0;
}

.ppr-banner-placeholders [data-placeholder]:first-child { width: 40%; }
.ppr-banner-placeholders [data-placeholder]:last-child  { width: 60%; }

/* Prerender: mostrar placeholder bars */
.ppr-banner[data-state="prerender"] .ppr-banner-placeholders { display: flex; }

/* Ocultar texto real fora do stream */
.ppr-banner:not([data-state="stream"]) .ppr-banner-name,
.ppr-banner:not([data-state="stream"]) .ppr-banner-offer { display: none; }

.ppr-banner-name {
  font-size: 14px;
  font-weight: 600;
  color: #171717;
}

.ppr-banner-offer {
  font-size: 14px;
  font-weight: 500;
  color: #4d4d4d;
}

/* Store body */
.ppr-store-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}

.ppr-store-desc {
  font-size: 13px;
  font-weight: 400;
  color: #4d4d4d;
  line-height: 1.5;
  flex: 1;
}

.ppr-shop-btn {
  height: 32px;
  padding: 0 14px;
  background: #fff;
  border: none;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: #171717;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.04);
  flex-shrink: 0;
}

/* Product grid */
.ppr-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  flex: 1;
}

.ppr-product {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border-radius: 6px;
  padding: 10px;
}

.ppr-product-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
}

.ppr-product-name {
  font-size: 12px;
  font-weight: 400;
  color: #171717;
}

.ppr-product-price {
  font-size: 12px;
  font-weight: 400;
  color: #4d4d4d;
  font-family: 'Geist Mono', monospace;
}

/* ================================================================
   PPR — SANDBOX WINDOWS (Passo 4)
   ================================================================ */

/* Window base — hidden by default, shown by data-state match */
.ppr-sb-window {
  display: none;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.04), 0 8px 16px -4px rgba(0,0,0,0.04);
  overflow: hidden;
  flex-direction: column;
  flex: 1;
}
.ppr-mockup[data-state="extract"]   .ppr-sb-window[data-screen="extract"]   { display: flex; }
.ppr-mockup[data-state="prerender"] .ppr-sb-window[data-screen="prerender"] { display: flex; }
.ppr-mockup[data-state="stream"]    .ppr-sb-window[data-screen="stream"]    { display: flex; }

/* macOS window chrome — matches Vercel Sandbox reference (36px height, shadow separator) */
.ppr-sb-chrome {
  height: 36px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.07);
  flex-shrink: 0;
  background: #fff;
}

.ppr-sb-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ppr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.ppr-dot-r { background: #ee6d5e; }
.ppr-dot-y { background: #f3bf4a; }
.ppr-dot-g { background: #5dc753; }

.ppr-sb-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 500;
  color: #666;
  font-family: 'Geist Mono', 'SF Mono', monospace;
  white-space: nowrap;
}

/* Terminal content */
.ppr-sb-terminal {
  padding: 16px 18px;
  background: #fafafa;
  flex: 1;
  overflow: auto;
}
.ppr-sb-terminal pre {
  margin: 0;
  font-family: 'Geist Mono', 'SF Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
  color: #333;
  white-space: pre;
}

/* Code editor content */
.ppr-sb-code {
  padding: 16px 18px;
  background: #fafafa;
  flex: 1;
  overflow: auto;
}
.ppr-sb-code pre {
  margin: 0;
  font-family: 'Geist Mono', 'SF Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre;
  color: #374151;
}

/* Terminal token colors */
.ppr-t-comment { color: #666; }
.ppr-t-cmd     { color: #333; font-weight: 500; }
.ppr-t-ok      { color: #16a34a; }
.ppr-t-err     { color: #dc2626; }

/* Code syntax colors — light mode, WCAG AA contrast on #fafafa */
.ppr-c-comment { color: #6b7280; }
.ppr-c-kw      { color: #be185d; }
.ppr-c-var     { color: #374151; }
.ppr-c-fn      { color: #2563eb; }
.ppr-c-str     { color: #059669; }
.ppr-c-num     { color: #7c3aed; }



/* ================================================================
   BLOCO K — DEPLOY WITH VERCEL
   ================================================================ */
.deploy-k {
  border-bottom: 1px solid #ebebeb;
  background: var(--bg);
}

.k-grid {
  display: grid;
  grid-template-columns: 359px 718px;
  max-width: 1080px;
  margin: 0 auto;
}

/* Col esquerda */
.k-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 48px 48px 135px;
}

.k-h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -1.28px;
  color: #171717;
  margin: 0;
}

.k-desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #4d4d4d;
  margin: 0;
}

.k-ctas {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-wrap: wrap;
}

/* Col direita: card grid — 2×3, 311px cards, 48px row-gap */
.k-right {
  display: grid;
  grid-template-columns: repeat(2, 311px);
  grid-template-rows: 154px 154px 154px;
  row-gap: 48px;
  column-gap: 48px;
  padding: 48px 0 135px;
  align-items: stretch;
}

/* Folded card (dog-ear) — 311px wide */
.k-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 311px;
  height: 100%;
  padding: 24px;
  background: #fff;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  /* sem right border — o dog-ear corner cobre o canto superior direito */
  border-top:    1px solid #ebebeb;
  border-left:   1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}

.k-card:hover {
  background: #fafafa;
}

/* Dog-ear corner */
.k-card-corner {
  position: absolute;
  top: -1px;
  right: 0;
  width: 33px;
  height: 33px;
  overflow: hidden;
  z-index: 10;
  border-bottom: 1px solid #ebebeb;
  border-left: 1px solid #ebebeb;
}

/* Triângulo cinza — borda do dobramento */
.k-card-corner::before {
  content: "";
  position: absolute;
  border-left: 35px solid #ebebeb;
  border-top: 35px solid #fff;
  top: -3px;
  right: 0;
  z-index: 5;
}

/* Triângulo branco — página dobrada por cima */
.k-card-corner::after {
  content: "";
  position: absolute;
  border-left: 35px solid #fff;
  border-top: 35px solid transparent;
  top: -1px;
  right: 0;
  z-index: 10;
}

/* Wrapper agrupa título+desc (top), meta fica no bottom via justify-content: space-between no card) */
.k-card-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.k-card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: #171717;
  margin: 0;
}

.k-card-desc {
  font-size: 14px;
  font-weight: 400;
  color: #4d4d4d;
  margin: 0;
  line-height: 20px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.k-card-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 16px;
  flex-shrink: 0;
}

.k-card-meta svg {
  flex-shrink: 0;
  border-radius: 2px;
}

.k-card-path {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  color: #171717;
}


/* ================================================================
   BLOCO L — CTA FINAL
   ================================================================ */
.cta-l {
  position: relative;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  background: var(--bg);
}

.l-grid {
  display: grid;
  grid-template-columns: 359px 359px 359px;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}

/* Primary cell: largura total */
.l-primary {
  grid-column: 1 / -1;
  padding: 48px 48px 48px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.l-heading {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.96px;
  color: #4d4d4d;
  margin: 0;
}

.l-heading b {
  font-weight: 600;
  color: #171717;
}

.l-heading i {
  font-style: normal;
  font-weight: 600;
  color: #0068d6;
}

.l-heading u {
  text-decoration: none;
  font-weight: 600;
  color: #7820bc;
}

.l-buttons {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

/* Secondary cell: col 3 */
.l-secondary {
  grid-column: 3 / 4;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.l-secondary-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #4d4d4d;
  margin: 0;
}

.l-secondary-text b {
  font-weight: 600;
  color: #171717;
}

/* Crosshair TL (junção K/L — left edge do container 1080px) */
.cross-l-tl {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

/* Crosshair BR (junção L/footer — right edge do container 1080px) */
.cross-l-br {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
}


/* ================================================================
   FOOTER (simplified)
   ================================================================ */
.footer {
  padding: 24px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.footer-simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 24px;
}

.footer-logo-link {
  display: flex;
  align-items: center;
  color: var(--text-primary);
  opacity: 0.5;
  transition: opacity var(--duration) var(--ease);
}

.footer-logo-link:hover {
  opacity: 1;
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  font-size: 14px;
  color: var(--text-secondary);
  transition: color var(--duration) var(--ease);
}

.footer-links a:hover {
  color: var(--text-primary);
}

.footer-credit {
  font-size: 13px;
  color: var(--text-tertiary);
}

.footer-credit-product {
  font-weight: 600;
  color: var(--text-secondary);
}


/* ================================================================
   ANIMACOES
   ================================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-stagger > .fade-in:nth-child(1) { transition-delay: 0s; }
.fade-in-stagger > .fade-in:nth-child(2) { transition-delay: 0.08s; }
.fade-in-stagger > .fade-in:nth-child(3) { transition-delay: 0.08s; }
.fade-in-stagger > .fade-in:nth-child(4) { transition-delay: 0.16s; }
.fade-in-stagger > .fade-in:nth-child(5) { transition-delay: 0.24s; }
.fade-in-stagger > .fade-in:nth-child(6) { transition-delay: 0.24s; }
.fade-in-stagger > .fade-in:nth-child(7) { transition-delay: 0.32s; }
.fade-in-stagger > .fade-in:nth-child(8) { transition-delay: 0.32s; }
.fade-in-stagger > .fade-in:nth-child(9) { transition-delay: 0.40s; }

@keyframes float {
  0%   { transform: translate(0px, 0px); }
  50%  { transform: translate(var(--x), var(--y)); }
  100% { transform: translate(0px, 0px); }
}

.float {
  animation: float 6s ease-in-out infinite;
}

@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;
  }
  .fade-in { opacity: 1; transform: none; }
  .float { animation: none; }
}


/* ================================================================
   RESPONSIVE — Tablet
   ================================================================ */
@media (max-width: 1024px) {
  :root {
    --section-padding: 80px;
    --section-padding-sm: 64px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .frontend-cloud {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .fc-solid-cell {
    display: none;
  }

  .fc-intro-cell {
    grid-column: 1;
    grid-row: auto;
    border-right: none;
    border-bottom: 1px solid #ebebeb;
  }

  .fc-intro {
    position: static;
    padding: 40px 24px;
  }

  .fc-feature {
    grid-column: 1;
    grid-row: auto;
    padding: 40px 24px;
  }

  .fc-cross {
    display: none;
  }

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

  .oob-cell:nth-child(3n) {
    border-right: none;
  }

  .oob-cell:not(:nth-child(2n)) {
    border-right: 1px solid #ebebeb;
  }

  .oob-cell:nth-child(-n+6) {
    border-bottom: 1px solid #ebebeb;
  }

  .oob-cell:nth-child(7),
  .oob-cell:nth-child(8),
  .oob-cell:nth-child(9) {
    border-bottom: none;
  }

  .ent-cards {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .ent-card:first-child {
    border-right: none;
    border-bottom: 1px solid #ebebeb;
  }

  .ent-testimonials {
    grid-template-columns: 1fr;
  }

  .ent-testimonial:first-child {
    border-right: none;
    border-bottom: 1px solid #ebebeb;
  }

  .ppr-container {
    flex-direction: column;
    gap: 32px;
  }

  .ppr-mockup {
    width: 100%;
  }

  .k-grid {
    grid-template-columns: 1fr;
  }

  .k-left {
    padding: 48px 48px 32px;
    border-right: none;
    border-bottom: 1px solid #ebebeb;
  }

  .k-right {
    padding: 32px 24px 48px;
  }
}


/* ================================================================
   RESPONSIVE — Mobile (clone fiel vercel.com/frameworks/nextjs @ 375px)
   Computed styles extraídos via chrome-devtools MCP — sem valores chutados
   ================================================================ */
@media (max-width: 768px) {
  :root {
    --section-padding: 64px;
    --section-padding-sm: 48px;
  }

  /* ── HEADER ───────────────────────────────────────────────────── */
  .nav-links { display: none; }
  .nav-actions .nav-ask-ai,
  .nav-actions .nav-login { display: none; }
  .nav-cta { display: none; }
  /* Sem CTA no header mobile — apenas logo (esquerda) + hamburger (direita) */
  .nav-signup { display: none; }

  /* Hamburger: círculo outline 32×32px (Vercel: border 1px solid rgba(255,255,255,0.14), 50%) */
  .nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: end;   /* grid col 3 (1fr) — empurra para borda direita */
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 50%;
  }
  .nav-hamburger .icon-hamburger,
  .nav-hamburger .icon-close { width: 14px; height: 14px; }

  /* ── HERO ─────────────────────────────────────────────────────── */
  /* Oculta grid decorativo de círculos (causa bracket artifact em mobile) */
  .hero-circles-wrapper { display: none; }

  /* Padding equivalente ao Vercel (h1 ~130px abaixo do header) */
  .hero { padding: 32px 24px 48px; }
  .hero-content { padding-top: 0; }

  /* Ícone decorativo 84×84px preto com isotipo S — via ::before CSS puro */
  /* Vercel: 84.5px, bg #000, border 1px solid #1f1f1f, img 50px centered */
  .hero-content::before {
    content: '';
    display: block;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #000 url('logos/studio-labs-mark.svg') center / 50px 50px no-repeat;
    border: 1px solid #1f1f1f;
    margin: 0 auto 16px;
  }

  /* Flex column com gap 16px (Vercel: gap-4 = 16px entre h1, sub, ctas) */
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* H1: Vercel 24px / 600 / -0.96px letter-spacing */
  h1 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.96px;
    margin-bottom: 0;
  }

  /* Subhead: 16px / 400 / 24px — sem bold interno */
  .hero-sub {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0;
  }
  .hero-sub strong { font-weight: 400; color: inherit; }

  /* CTAs: gap 16px, botões 40px height / 14px (ajuste intencional: acima do min 32px Vercel por acessibilidade touch) */
  .hero-ctas {
    gap: 16px;
    justify-content: center;
    margin-top: 0;
    --btn-height: 40px;
    --btn-font-size: 14px;
  }
  .hero-ctas .btn { padding: 0 16px; }

  /* ── TRUST MARQUEE ────────────────────────────────────────────── */
  /* Vercel: padding 46px 0, text 16px/500 */
  .trust { padding: 46px 0; }
  .trust-label {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 32px;
  }
  .trust-group {
    gap: 28px;
    padding-right: 28px;
  }

  /* ── GRID / SECTIONS (preservados do desktop) ─────────────────── */
  .features-grid,
  .oob-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .oob-cell,
  .oob-cell:not(:nth-child(3n)),
  .oob-cell:not(:nth-child(2n)) {
    border-right: none;
  }

  .oob-cell:nth-child(-n+8) {
    border-bottom: 1px solid #ebebeb;
  }

  .oob-cell:nth-child(9) {
    border-bottom: none;
  }

  .oob-cell {
    padding: 24px 32px;
  }

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

  /* ── P1: Stack cards — fill container ───────────────────────── */
  .k-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .k-card {
    width: 100%;
    max-width: none;
  }

  /* ── P2: Stack meta — respiro do texto ───────────────────────── */
  .k-card-meta {
    margin-top: 12px;
  }

  /* ── P3: CTA section — centered, no overflow ─────────────────── */
  .l-grid {
    grid-template-columns: 1fr;
  }

  .l-primary {
    grid-column: 1 / -1;
    padding: 48px 24px;
    text-align: center;
  }

  .l-buttons {
    justify-content: center;
  }

  /* ── P4: PPR — label e CTA centralizados ─────────────────────── */
  .ppr-stage-label {
    text-align: center;
    padding: 0 24px;
    font-size: 16px;
    line-height: 24px;
  }

  .ppr-cta-row {
    justify-content: center;
  }

  .feature-card { padding: 28px 24px; }
  .benefit-card { padding: 24px; }

  .fade-in-stagger > .fade-in {
    transition-delay: 0s !important;
  }

  .footer-simple {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .footer-links {
    flex-direction: column;
    gap: 8px;
  }

  /* ── PPR section — mobile fix ─────────────────────────────────── */
  .ppr-tl { display: none; }

  .ppr-visual { padding: 64px 24px; }

  .ppr-meta { width: 100%; margin-left: 0; gap: 20px; }

  .ppr-stages {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 256px;
    margin: 0 auto;
    padding-bottom: 168px;
    position: relative;
  }

  .ppr-stage { position: static; z-index: 2; min-height: 0; gap: 0; }
  .ppr-stage-btn { position: relative; transform: none; left: auto; top: auto; }

  .ppr-stages::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #666, #666, transparent);
    z-index: 1;
  }

  .ppr-stage-label {
    display: none;
    position: absolute;
    top: 52px;
    left: 50%;
    width: 280px;
    min-height: 146px;
    transform: translateX(-50%);
  }

  .ppr-stage-label.is-active { display: block; }

  .ppr-h3 { font-size: 24px; line-height: 32px; letter-spacing: -0.96px; text-align: center; }

  /* ── Headings uniformes 24px ──────────────────────────────────── */
  .fc-title {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.96px;
  }

  .ent-heading {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.96px;
  }

  .section-text-title,
  #support .section-text-title {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.96px;
  }

  .k-h2 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.96px;
    text-align: center;
  }

  .k-desc {
    font-size: 16px;
    line-height: 24px;
    text-align: center;
  }

  .k-ctas {
    justify-content: center;
  }

  /* ── FC section — centralização mobile ───────────────────────── */
  .fc-intro {
    text-align: center;
    align-items: center;
  }

  .dx-impact-text { text-align: center; }
  .dx-visual { justify-content: center; margin-top: 32px; max-width: 100%; overflow-x: clip; }
  .infra-impact-text { text-align: center; }

  /* ── P1: Enterprise heading 24px ─────────────────────────────── */
  .enterprise h2 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.96px;
  }

  .ent-heading {
    padding: 0 24px;
  }

  /* ── P2: PPR CTA respiro ─────────────────────────────────────── */
  .ppr-cta-row {
    margin-top: 24px;
  }

  /* ── P3: Enterprise cards ────────────────────────────────────── */
  .ent-impact {
    font-size: 20px;
    line-height: 28px;
  }

  .ent-bubble {
    margin-bottom: 32px;
  }

  /* ── P4: FC grid containment ─────────────────────────────────── */
  .frontend-cloud {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 480px) {
  .ppr-products {
    grid-template-columns: 1fr 1fr;
  }

  .ent-card,
  .ent-testimonial {
    padding: 24px;
  }
}


/* ================================================================
   UTILITY CLASSES
   ================================================================ */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.font-mono { font-family: var(--font-mono); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

::selection {
  background: rgba(0, 112, 243, 0.15);
  color: var(--text-primary);
}

/* ============================================
   Booking Modal (Cal.com inline)
   ============================================ */

.booking-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.booking-modal.is-open {
  display: flex;
}

.booking-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.booking-modal-container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.booking-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #eaeaea;
  flex-shrink: 0;
}

.booking-modal-title {
  margin: 0;
  font-family: var(--font-geist-sans), -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  letter-spacing: -0.01em;
}

.booking-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #666666;
  transition: background 0.15s ease, color 0.15s ease;
}

.booking-modal-close:hover {
  background: #f5f5f5;
  color: #000000;
}

.booking-modal-body {
  flex: 1;
  overflow: auto;
  min-height: 600px;
}

@media (max-width: 767px) {
  .booking-modal-container {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }

  .booking-modal-body {
    min-height: 0;
  }
}

body.modal-open {
  overflow: hidden;
}

/* ============================================
   Skip Link (Accessibility)
   ============================================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: #0a0a0a;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 8px;
}