/* ═══════════════════════════════════════════════
   SARTEC DIGITAL — Versão Comercial
   ═══════════════════════════════════════════════ */

/* ── TOKENS ───────────────────────────────────── */
:root {
  --bg: #10245d;
  --bg-2: #142b68;
  --surface: rgba(19, 39, 91, 0.72);
  --surface-2: rgba(25, 49, 108, 0.78);

  --blue: #292D96;
  --blue-light: #8ea2ff;
  --blue-dim: rgba(142, 162, 255, 0.14);
  --blue-border: rgba(142, 162, 255, 0.28);

  --red: #FF1720;
  --red-light: #ff5b62;
  --red-dim: rgba(255, 23, 32, 0.12);
  --red-border: rgba(255, 23, 32, 0.32);

  --green: #00d69a;
  --green-dim: rgba(0, 214, 154, 0.10);
  --green-border: rgba(0, 214, 154, 0.28);

  --rose: #f43f5e;
  --rose-dim: rgba(244, 63, 94, 0.10);

  --amber: #f7b84b;
  --amber-dim: rgba(247, 184, 75, 0.12);
  --amber-border: rgba(247, 184, 75, 0.30);

  --text: #f4f7ff;
  --text-2: #c2cbed;
  --text-3: #a3b1de;

  --border: rgba(183, 199, 255, 0.16);
  --border-light: rgba(206, 216, 255, 0.26);

  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-pill: 100px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t:    0.22s;

  --max-w: 1200px;
  --font:  'Outfit', 'Inter', system-ui, -apple-system, sans-serif;

  --shadow-card:       0 8px 30px -12px rgba(4, 10, 32, 0.55);
  --shadow-card-hover: 0 18px 46px -14px rgba(4, 10, 32, 0.7);

  --project-phone-w:        300px;
  --project-phone-w-mobile: 200px;
  --project-phone-r:        38px;
}

/* ── RESET ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html   { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 0%, rgba(71, 103, 214, 0.22), transparent 32%),
    radial-gradient(circle at 85% 20%, rgba(41, 45, 150, 0.18), transparent 34%),
    linear-gradient(180deg, #132b68 0%, #0f2359 46%, #0b1844 100%);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(183, 199, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 199, 255, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35));
}

.grid-trails {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
}

@media (hover: none), (pointer: coarse) {
  .grid-trails {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grid-trails {
    display: none;
  }
}

a      { color: inherit; text-decoration: none; }
ul     { list-style: none; }
img, svg { display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ── LAYOUT ───────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; }

.section { padding: 96px 0; }

.section__head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 56px;
}
.section__head h2  { margin-bottom: 16px; }
.section__head p   { color: var(--text-2); font-size: 17px; line-height: 1.72; }
.section__head p + p { margin-top: 12px; }
.section__head--sm { max-width: 460px; }

/* ── TYPOGRAPHY ───────────────────────────────── */
h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: clamp(24px, 3.2vw, 40px); font-weight: 700; line-height: 1.14; letter-spacing: -0.022em; text-wrap: balance; }
h3 { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.008em; }
p  { text-wrap: pretty; }

*:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── ATOMS ────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 4px 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  margin-bottom: 20px;
  background: var(--blue-dim);
  border: 1px solid var(--blue-border);
  color: var(--blue-light);
}
.tag--blue  { background: var(--blue-dim);   border-color: var(--blue-border);  color: var(--blue-light); }
.tag--red   { background: var(--red-dim);    border-color: var(--red-border);   color: var(--red-light); }
.tag--amber { background: var(--amber-dim);  border-color: var(--amber-border); color: var(--amber); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-pill);
}

.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  border-radius: 50%;
  font-size: 10px;
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── BUTTONS ──────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: all var(--t) var(--ease);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 4px 20px rgba(41,45,150,0.40);
}
.btn--primary:hover {
  background: var(--blue-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(107,112,240,0.42);
}

.btn--ghost,
.btn--outline-card {
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-2);
  border: 1px solid rgba(206, 216, 255, 0.28);
}

.btn--ghost:hover,
.btn--outline-card:hover {
  border-color: rgba(142, 162, 255, 0.42);
  color: #ffffff;
  background: rgba(142, 162, 255, 0.12);
}

.btn--lg { padding: 17px 36px; font-size: 16px; }

/* ── HEADER ───────────────────────────────────── */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background var(--t) var(--ease), box-shadow var(--t), border-color var(--t);
  background: rgba(16, 36, 93, 0.66);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid rgba(206, 216, 255, 0.14);
  box-shadow: 0 1px 0 rgba(5, 12, 36, 0.10);
}
.header.is-scrolled {
  background: rgba(11, 24, 64, 0.92);
  border-bottom: 1px solid rgba(206, 216, 255, 0.20);
  box-shadow:
    0 1px 0 rgba(5, 12, 36, 0.14),
    0 12px 34px rgba(5, 12, 36, 0.30);
}

.header__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand__logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand__tagline {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
  border-left: 1px solid var(--border-light);
  padding-left: 14px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.brand__label        { font-size: 16px; font-weight: 500; color: var(--text); }
.brand__label strong { font-weight: 800; color: var(--text); }

.nav { display: flex; align-items: center; gap: 4px; }

.nav__link {
  padding: 7px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--text-2);
  border-radius: var(--r-pill);
  transition: color var(--t), background var(--t);
}
.nav__link:hover {
  color: var(--text);
  background: rgba(206, 216, 255, 0.10);
}

.nav__cta {
  margin-left: 10px;
  padding: 8px 18px;
  font-size: 14px; font-weight: 600;
  color: var(--blue-light);
  background: var(--blue-dim);
  border: 1px solid var(--blue-border);
  border-radius: var(--r-pill);
  transition: all var(--t) var(--ease);
}
.nav__cta:hover {
  background: rgba(142, 162, 255, 0.26);
  border-color: rgba(142, 162, 255, 0.5);
  color: #ffffff;
}

.burger {
  display: none;
  flex-direction: column; gap: 5px;
  padding: 8px;
  border-radius: var(--r-sm);
}
.burger i {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all var(--t) var(--ease);
}
.burger.is-open i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.is-open i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── LANGUAGE SWITCHER ───────────────────────── */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  margin: 0 6px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-light);
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.lang-switch__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border-radius: var(--r-pill);
  font-size: 15px;
  line-height: 1;
  /* Buttons don't inherit page text color by default in every browser —
     without this, the BR/US fallback label (shown when a platform lacks
     flag-emoji glyphs) can render in the browser's default dark button
     text on our dark header, which is unreadable. */
  color: var(--text-2);
  opacity: 0.45;
  filter: grayscale(0.5);
  transition: opacity var(--t) var(--ease), filter var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease);
}
.lang-switch__btn:hover {
  opacity: 0.8;
  color: var(--text);
}
.lang-switch__btn.is-active {
  opacity: 1;
  filter: none;
  color: var(--text);
  background: rgba(142, 162, 255, 0.18);
  box-shadow: inset 0 0 0 1px var(--blue-border);
}
.lang-switch__btn:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 2px;
  color: var(--text);
}
.lang-switch__flag {
  color: inherit;
  font-size: 15px;
  line-height: 1;
}

/* ── HERO ─────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 120px 0 72px;
  background: transparent;
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  top: -18%;
  left: 36%;
  transform: translateX(-50%);
  width: 980px;
  height: 720px;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(142,162,255,0.22) 0%, transparent 60%),
    radial-gradient(ellipse at 72% 60%, rgba(41,45,150,0.20) 0%, transparent 58%),
    radial-gradient(ellipse at 88% 92%, rgba(255,23,32,0.08) 0%, transparent 46%);
  pointer-events: none;
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(183,199,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,199,255,0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 42%, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.72) 65%, rgba(0,0,0,0.92) 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 42%, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.72) 65%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
}

/* Energy beam — subtle luminous pulse along grid edges */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(139,92,246,0.06) 30%, rgba(107,112,240,0.10) 50%, rgba(6,182,212,0.04) 70%, transparent 100%);
  background-size: 100% 300%;
  animation: energy-flow 12s ease-in-out infinite;
  mask-image: linear-gradient(90deg,
    rgba(0,0,0,0.5) 0%,
    transparent 22%,
    transparent 78%,
    rgba(0,0,0,0.5) 100%);
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0,0,0,0.5) 0%,
    transparent 22%,
    transparent 78%,
    rgba(0,0,0,0.5) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Split layout — o Hero agora é uma coluna única de texto; o vídeo
   deixou de ser uma "coluna direita" e virou o fundo de toda a seção
   (ver .hero__video-bg, que fica antes deste container no DOM). */
.hero__split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 620px);
  align-items: center;
}

.hero__content { max-width: 540px; position: relative; z-index: 2; }
.hero__content .tag { margin-bottom: 20px; }

.hero__title   { margin-bottom: 24px; }

.hero__desc {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--text-2);
  margin-bottom: 32px;
  line-height: 1.74;
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.hero__micro {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 4px;
}

/* Hero primary CTA needs more presence against the dark royal-blue backdrop */
.hero__actions .btn--primary {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 140%);
  border: 1px solid rgba(142, 162, 255, 0.45);
  box-shadow: 0 6px 26px rgba(107, 112, 240, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.hero__actions .btn--primary:hover {
  background: linear-gradient(135deg, var(--blue) -20%, var(--blue-light) 100%);
  border-color: rgba(142, 162, 255, 0.7);
  box-shadow: 0 10px 38px rgba(107, 112, 240, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* ── HERO VIDEO BACKGROUND — o vídeo é o fundo da seção inteira ──
   Nada de card, moldura ou coluna: a camada cobre todo o .hero,
   fica atrás do conteúdo (z-index abaixo de .hero__split) e usa
   fade/overlay para se fundir ao grid e ao azul do site. */
.hero__video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__video-bg-poster,
.hero__video-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 46%;
  filter: saturate(1.05) brightness(0.72);
  /* Mais presente do centro para a direita, dissolvendo nas bordas e
     principalmente à esquerda (onde fica o texto) para não competir
     com a leitura. */
  mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.10) 18%,
    rgba(0,0,0,0.55) 38%,
    rgba(0,0,0,0.85) 58%,
    #000 74%,
    rgba(0,0,0,0.65) 96%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,0.10) 18%,
    rgba(0,0,0,0.55) 38%,
    rgba(0,0,0,0.85) 58%,
    #000 74%,
    rgba(0,0,0,0.65) 96%,
    transparent 100%);
}

/* Vinheta azul + escurecimento à esquerda — garante contraste total
   para o texto e "tinge" o vídeo com a paleta da marca em vez de
   deixá-lo como uma imagem crua colada no fundo. */
.hero__video-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(16,36,93,0.86) 30%, rgba(16,36,93,0.35) 52%, transparent 72%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(6,12,38,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 78% 20%, rgba(142,162,255,0.14) 0%, transparent 65%),
    linear-gradient(rgba(11,20,58,0.22), rgba(11,20,58,0.22));
  pointer-events: none;
}

/* Grade técnica fina por cima do vídeo, na mesma linguagem do
   .hero__grid, para amarrar a camada de vídeo ao restante do Hero. */
.hero__video-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image:
    linear-gradient(rgba(183,199,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,199,255,0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* O poster (primeiro frame real do vídeo) fica sempre por baixo como
   base estável — o <video poster="..."> usa o mesmo arquivo, então
   antes do primeiro frame decodificar a tela já mostra exatamente a
   mesma imagem, sem flash de composição diferente. */
.hero__video-bg.is-video-error .hero__video-bg-video { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__video-bg-video { display: none; }
}

.mockup-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 420px;
  max-height: 420px;
  box-sizing: border-box;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mockup-flip {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mockup-stage.is-flipped .mockup-flip {
  transform: rotateY(180deg);
}

.mockup-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.mockup-face--desktop {
  transform: rotateY(0deg);
  background: rgba(15, 32, 82, 0.95);
  border: 1px solid rgba(142, 162, 255, 0.34);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 40px 100px rgba(5, 10, 32, 0.7),
    0 0 0 1px rgba(183, 199, 255, 0.09) inset,
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 110px rgba(107, 112, 240, 0.16);
  opacity: 1;
  visibility: visible;
}

.mockup-stage.is-flipped .mockup-face--desktop {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 0.4s ease 0.2s, visibility 0.4s ease 0.2s, background-color 0.4s ease 0.2s, border-color 0.4s ease 0.2s, box-shadow 0.4s ease 0.2s, backdrop-filter 0.4s ease 0.2s;
}

.mockup-face--phone {
  transform: rotateY(180deg);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.mockup-stage.is-flipped .mockup-face--phone {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease 0.2s, visibility 0.4s ease 0.2s;
}

/* Mockup internal tech grid pseudo-element */
.mockup-face--desktop::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(107,112,240,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,112,240,0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* ── PHONE PREVIEW & CSS VIDEO APP STYLE ── */
.phone-mockup {
  width: 240px;
  height: 380px;
  padding: 6px;
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.03)) border-box, #091330;
  box-shadow:
    0 12px 32px rgba(8, 16, 45, 0.6),
    0 0 0 1px rgba(142, 162, 255, 0.12),
    0 0 24px rgba(107, 112, 240, 0.08);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #0b1a45;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.phone-screen__island {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 16px;
  border-radius: 8px;
  background: #02030a;
  z-index: 10;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.phone-app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 34px 12px 12px;
  box-sizing: border-box;
  background: #0a1c4b;
}

.phone-app,
.phone-screen,
.phone-screen * {
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Containment resets for all text inside phone */
.phone-screen h1,
.phone-screen h2,
.phone-screen h3,
.phone-screen h4,
.phone-screen h5,
.phone-screen h6,
.phone-screen p,
.phone-screen span,
.phone-screen a,
.phone-screen button,
.phone-screen input {
  font-size: inherit;
  line-height: 1.25 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0;
  padding: 0;
}

/* Time & top status bar */
.phone-app__topbar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  height: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
}

.phone-app__time {
  font-size: 8px !important;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  line-height: 1 !important;
}

.phone-app__status {
  display: flex;
  gap: 3px;
  align-items: center;
}

.phone-app__signal {
  width: 8px;
  height: 6px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 1px;
}

.phone-app__battery {
  width: 12px;
  height: 6px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 1px;
  position: relative;
}

.phone-app__battery::after {
  content: '';
  position: absolute;
  left: 1px; top: 1px; bottom: 1px;
  width: 6px;
  background: rgba(255, 255, 255, 0.8);
}

.phone-app__title {
  font-size: 11px !important;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2 !important;
}

/* Views & transitions */
.phone-app__home,
.phone-app__player-view {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.phone-app__player-view {
  position: absolute;
  top: 34px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 46px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
}

.phone-app.show-player .phone-app__player-view {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.phone-app.show-player .phone-app__home {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-15px);
}

/* Home view styles */
.phone-app__home {
  padding-top: 4px;
}

.phone-app__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  height: 14px;
}

.phone-app__avatar {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(142, 162, 255, 0.25);
  border: 1px solid rgba(142, 162, 255, 0.4);
}

.phone-app__welcome {
  font-size: 10px !important;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
  text-align: left;
}

.phone-app__chips {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.phone-app__chip {
  font-size: 7px !important;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 100px;
  background: rgba(25, 49, 108, 0.3);
  border: 1px solid rgba(142, 162, 255, 0.08);
  color: var(--text-3);
  line-height: 1 !important;
}

.phone-app__chip--active {
  background: var(--blue) !important;
  border-color: rgba(142, 162, 255, 0.3) !important;
  color: #ffffff !important;
}

.phone-app__continue-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(25, 49, 108, 0.5);
  border: 1px solid rgba(142, 162, 255, 0.15);
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
  text-align: left;
}

.phone-app__continue-card.is-highlighted {
  border-color: var(--blue-light);
  box-shadow: 0 0 12px rgba(142, 162, 255, 0.25);
  transform: scale(1.03);
}

.phone-app__continue-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.phone-app__continue-title {
  font-size: 9px !important;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone-app__continue-progress-text {
  font-size: 7px !important;
  color: var(--text-3);
}

.phone-app__continue-play {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.phone-app__continue-play-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 5px;
  border-color: transparent transparent transparent #ffffff;
  margin-left: 1px;
}

.phone-app__section-title {
  font-size: 7px !important;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
  text-align: left;
}

/* Home items styling & highlight */
.phone-app__item.is-highlighted {
  border-color: var(--blue-light) !important;
  box-shadow: 0 0 10px rgba(142, 162, 255, 0.2);
  transform: scale(1.02);
}

.phone-app__player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #081333;
  border: 1px solid rgba(142, 162, 255, 0.15);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
}

.phone-app__video-frame {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(25, 49, 108, 0.8) 0%, #091330 100%);
  position: relative;
}

.phone-app__play-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(41, 45, 150, 0.4);
  transition: all 0.3s ease;
}

.phone-app__play-btn.is-active {
  background: var(--blue-light, #8ea2ff) !important;
  transform: scale(1.08);
}

/* CSS only Play / Pause Icons */
.phone-app__play-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #ffffff;
  margin-left: 2px;
  transition: all 0.2s ease;
}

.phone-app__play-btn.is-active .phone-app__play-icon {
  border-style: double;
  border-width: 0px 0 0px 8px;
  border-color: transparent transparent transparent #ffffff;
  width: 8px;
  height: 10px;
  margin-left: 0;
}

.phone-app__progress-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  width: 100%;
}

.phone-app__progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--blue-light, #8ea2ff);
  transition: width 0.3s ease;
}

.phone-app__lesson-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.phone-app__lesson-title {
  font-size: 9px !important;
  font-weight: 600;
  color: #ffffff;
  text-align: left;
  line-height: 1.2 !important;
}

.phone-app__desc-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
}

.phone-app__desc-line {
  height: 3px;
  width: 90%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 1px;
}

.phone-app__desc-line--sm {
  width: 60%;
}

/* Video List items */
.phone-app__list-header {
  font-size: 7px !important;
  font-weight: 700;
  color: var(--text-3, #8d9bcf);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0;
  transition: opacity 0.4s ease;
  text-align: left;
  line-height: 1 !important;
}

.phone-app__list-header.is-visible {
  opacity: 0.6;
}

.phone-app__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.phone-app__item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(25, 49, 108, 0.3);
  border: 1px solid rgba(142, 162, 255, 0.08);
  border-radius: 6px;
  padding: 6px;
  transition: all 0.3s ease;
}

.phone-app__item--active {
  background: rgba(107, 112, 240, 0.2) !important;
  border-color: rgba(107, 112, 240, 0.5) !important;
}

.phone-app__item-thumb {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  background: rgba(142, 162, 255, 0.12);
}

.phone-app__item--active .phone-app__item-thumb {
  background: rgba(142, 162, 255, 0.35) !important;
}

.phone-app__item-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.phone-app__item-line-1 {
  height: 4px;
  width: 70%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

.phone-app__item--active .phone-app__item-line-1 {
  background: rgba(255, 255, 255, 0.25) !important;
}

.phone-app__item-line-2 {
  height: 3px;
  width: 40%;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1px;
}

.phone-app__item--active .phone-app__item-line-2 {
  background: rgba(107, 112, 240, 0.2) !important;
}

/* Media Query accessibility prefers-reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
  .mockup-stage {
    transition: none !important;
  }
  .mockup-flip {
    transition: none !important;
    transform: none !important;
  }
  .mockup-face--desktop {
    position: relative !important;
    transform: none !important;
    backface-visibility: visible !important;
    z-index: 2 !important;
  }
  .mockup-face--phone {
    display: none !important;
  }
}

.mockup__bar,
.mockup__toolbar,
.mockup__body {
  position: relative;
  z-index: 1;
}

.mockup__wa { z-index: 2; }

.mockup__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px 16px 0 0;
}

.mockup__dots { display: flex; gap: 5px; }
.mockup__dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.mockup__dots span:nth-child(1) { background: #ff5f57; }
.mockup__dots span:nth-child(2) { background: #febc2e; }
.mockup__dots span:nth-child(3) { background: #28c840; }

.mockup__title {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  flex: 1;
  text-align: center;
  letter-spacing: 0.03em;
}

.mockup__badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #10b981;
  white-space: nowrap;
}

.mockup__body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mockup__kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  height: 168px;
}

.mockup__col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mockup__col-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  padding-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mockup__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
}

.mockup__count--blue {
  background: rgba(107, 112, 240, 0.2);
  color: var(--blue-light);
}

.mockup__card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(25, 49, 108, 0.4);
  border: 1px solid rgba(142, 162, 255, 0.12);
  border-radius: 6px;
  margin-bottom: 4px;
  transition: max-height 0.4s ease, opacity 0.4s ease, margin-bottom 0.4s ease, padding 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
  max-height: 48px;
  opacity: 1;
  overflow: hidden;
  flex-shrink: 0;
}

.mockup__card.is-collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  pointer-events: none;
}

.mockup__card--active {
  background: rgba(41, 45, 150, 0.3);
  border-color: rgba(142, 162, 255, 0.32);
}

.mockup__card-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}

.mockup__card-avatar--blue {
  background: rgba(107, 112, 240, 0.28);
  color: var(--blue-light);
}

.mockup__card-info { flex: 1; min-width: 0; }

.mockup__card-name {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup__card-msg {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.2;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup__card-resp {
  font-size: 7px;
  font-weight: 600;
  color: var(--blue-light);
  background: rgba(107, 112, 240, 0.15);
  padding: 1px 4px;
  border-radius: 100px;
  flex-shrink: 0;
  white-space: nowrap;
  align-self: center;
  margin-top: 0;
}

.mockup__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.mockup__metric {
  text-align: center;
  padding: 8px 4px;
  background: rgba(25, 49, 108, 0.3);
  border: 1px solid rgba(142, 162, 255, 0.08);
  border-radius: 8px;
}

.mockup__metric-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}

.mockup__metric-val--green { color: var(--green); }

.mockup__metric-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.48);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 500;
}

/* WhatsApp bubble */
.mockup__wa {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(16, 32, 82, 0.95);
  border: 1px solid rgba(37, 211, 102, 0.25);
  border-radius: 12px 12px 4px 12px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  max-width: 186px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  animation: wa-bubble-bounce 8s ease infinite;
}

.mockup__wa-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: #25d366;
  margin-top: 1px;
  animation: wa-pulse 2s ease infinite;
}

@keyframes wa-bubble-bounce {
  0%, 15% {
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;
  }
  20%, 80% {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  85%, 100% {
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;
  }
}

@keyframes wa-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}
.mockup__wa-icon svg { width: 16px; height: 16px; }

.mockup__wa-msg {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
}

.mockup__wa-time {
  font-size: 9px;
  color: rgba(37, 211, 102, 0.55);
  margin-top: 3px;
  font-weight: 500;
}

/* ── MOCKUP TOOLBAR & CHART ───────────────────── */
.mockup__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.mockup__search {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(25, 49, 108, 0.3);
  border: 1px solid rgba(142, 162, 255, 0.1);
  border-radius: 6px;
  flex: 0 1 120px;
}

.mockup__search-icon { width: 10px; height: 10px; color: rgba(255, 255, 255, 0.4); flex-shrink: 0; }
.mockup__search-icon svg { width: 10px; height: 10px; }

.mockup__search-text {
  display: block;
  width: 48px; height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

.mockup__tabs { display: flex; gap: 2px; }

.mockup__tab {
  font-size: 8px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}

.mockup__tab--active {
  background: rgba(107, 112, 240, 0.18);
  color: var(--blue-light);
}

.mockup__count--green {
  background: rgba(16, 185, 129, 0.2);
  color: var(--green);
}

.mockup__card--done {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.12);
}

.mockup__card-avatar--green {
  background: rgba(16, 185, 129, 0.2);
  color: var(--green);
}

.mockup__metric-val--blue { color: var(--blue-light); }

.mockup__chart {
  padding: 6px 0 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.mockup__chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 32px;
  padding: 0 4px;
}

.mockup__chart-bar {
  flex: 1;
  height: var(--h, 50%);
  background: rgba(25, 49, 108, 0.65);
  border-radius: 2px 2px 0 0;
  transition: background var(--t), height 0.4s ease;
}

.mockup__chart-bar--active { background: var(--blue-light); }

.mockup__chart-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.42);
  text-align: right;
  padding: 3px 4px 0;
  letter-spacing: 0.03em;
}

/* ── ANTES VS DEPOIS ──────────────────────────── */
.ba-section { background: rgba(8, 22, 62, 0.28); }

.ba-wrapper {
  max-width: 920px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(16, 34, 84, 0.68);
  border: 1px solid rgba(183, 199, 255, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ba-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.ba-col {
  padding: 13px 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ba-col--before { background: var(--rose-dim);  color: var(--rose); }
.ba-col--after  { background: var(--green-dim); color: var(--green); }

.ba-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
}

.ba-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.ba-before,
.ba-after {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px;
}
.ba-before { background: var(--surface); }
.ba-after  { background: rgba(24, 48, 111, 0.78); }

.ba-x, .ba-check {
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
}
.ba-x     { color: var(--rose); }
.ba-check { color: var(--green); }

.ba-before p { font-size: 14px; color: var(--text-2); line-height: 1.58; }
.ba-after  p { font-size: 14px; color: var(--text);   line-height: 1.58; font-weight: 500; }

/* "Ver mais comparações" — mobile-only progressive disclosure toggle.
   Hidden by default so it has zero effect on desktop. */
.ba-more-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-light);
  background: rgba(16, 34, 84, 0.4);
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--font);
  transition: color var(--t), background var(--t);
}
.ba-more-toggle:hover,
.ba-more-toggle:focus-visible {
  color: var(--text);
  background: rgba(142, 162, 255, 0.10);
}

/* ── ORIGIN SECTION ───────────────────────────── */
.origin-section { background: transparent; }

.origin-sub {
  font-size: 15px;
  color: var(--text-3);
  font-style: italic;
  margin-top: 8px;
}

.origin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}

.origin-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 980px;
}

.origin-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  background: rgba(16, 34, 84, 0.68);
  border: 1px solid rgba(183, 199, 255, 0.22);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.origin-card:hover {
  border-color: var(--blue-border);
  transform: translateY(-2px);
}

.origin-card__icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-dim);
  border-radius: var(--r-sm);
  color: var(--blue-light);
  flex-shrink: 0;
}
.origin-card__icon svg { width: 20px; height: 20px; }

.origin-card strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.origin-card p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
}

/* ── ECOSSISTEMA (4 CARDS) ────────────────────── */
.ecosystem { background: rgba(8, 22, 62, 0.28); }

.eco-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
}

.eco-card {
  position: relative;
  padding: 32px;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 40%),
    rgba(16, 34, 84, 0.68);
  border: 1px solid rgba(183, 199, 255, 0.22);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  overflow: hidden;
}
.eco-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-light), transparent 70%);
  opacity: 0.55;
}
.eco-card:hover {
  border-color: var(--blue-border);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.eco-card:nth-child(3)::after { background: linear-gradient(90deg, var(--red-light), transparent 70%); }

.eco-card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-dim);
  border-radius: var(--r-sm);
  color: var(--blue-light);
  margin-bottom: 20px;
  transition: background var(--t);
}
.eco-card:hover .eco-card__icon { background: rgba(107,112,240,0.22); }
.eco-card__icon svg { width: 24px; height: 24px; }

.eco-card h3 { font-size: 16px; margin-bottom: 10px; }
.eco-card p  { font-size: 14px; color: rgba(255, 255, 255, 0.70); line-height: 1.65; }

/* ── SOBRE LUCAS ──────────────────────────────── */
.about-lucas { background: transparent; }

.about-lucas__wrap {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  align-items: start;
}

.about-lucas__text .tag { margin-bottom: 18px; }
.about-lucas__text h2   { margin-bottom: 14px; }
.about-lucas__text p {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 12px;
}

.lucas__quote {
  margin: 20px 0 28px;
  padding: 14px 20px;
  background: var(--surface);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 15px;
  font-style: italic;
  color: var(--text);
  line-height: 1.6;
}

.lucas-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.lucas-proof-card {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.lucas-proof-card h3 {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 6px;
}
.lucas-proof-card p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 0;
}

.lucas-card {
  background: rgba(16, 34, 84, 0.68);
  border: 1px solid rgba(183, 199, 255, 0.22);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}

.lucas-card__top {
  display: flex; align-items: center;
  gap: 14px;
  padding: 24px;
  border-bottom: 1px solid var(--border);
}

.lucas-card__avatar {
  width: 56px; height: 56px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--blue-border);
  background: var(--bg-2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.lucas-card__id strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.lucas-card__id span   { font-size: 12px; color: var(--blue-light); font-weight: 500; }

.lucas-card__facts { padding: 6px 0; }

.lucas-fact {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 24px;
  border-bottom: 1px solid var(--border);
  transition: background var(--t);
}
.lucas-fact:last-child { border-bottom: none; }
.lucas-fact:hover { background: var(--surface-2); }
.lucas-fact dt {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3);
}
.lucas-fact dd { font-size: 13px; color: var(--text-2); font-weight: 500; line-height: 1.5; }

/* ── PRICING ──────────────────────────────────── */
.pricing { background: rgba(8, 22, 62, 0.28); }

.pricing-tabs {
  display: none;
}

/* Drag hint for the mobile pricing carousel — hidden on desktop */
.pricing__hint {
  display: none;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  margin: -16px 0 20px;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  /* Row height tokens — cards use these to form aligned grid rows */
  --pkg-head-h:     165px;
  --pkg-price-h:    112px;
  --pkg-cta-h:       60px;
  --pkg-includes-h: 190px;
  --pkg-resolve-h:  150px;
  --pkg-include-h:  190px;
  --pkg-fit-h:      110px;
}

.pricing-card {
  background: rgba(16, 34, 84, 0.68);
  border: 1px solid rgba(183, 199, 255, 0.22);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: grid;
  grid-template-rows:
    var(--pkg-head-h)
    var(--pkg-price-h)
    var(--pkg-cta-h)
    var(--pkg-includes-h)
    auto;
  row-gap: 20px;
  align-items: start;
  cursor: pointer;
  position: relative;
  outline: none;
  min-width: 0;
  width: 100%;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease), background var(--t) var(--ease);
}

.pricing-card:not(.is-selected):not(.pricing-card--highlight):hover {
  border-color: var(--border-light);
  transform: translateY(-2px);
}

.pricing-card:focus-visible {
  box-shadow: 0 0 0 2px var(--blue-light);
}

.pricing-card.is-selected:not(.pricing-card--highlight) {
  border-color: var(--blue-light);
  background: rgba(24, 48, 111, 0.78);
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(107, 112, 240, 0.20), 0 0 0 1px var(--blue-light);
}

/* Highlight card — default (not selected): subtle premium indicator */
.pricing-card--highlight {
  background: rgba(16, 34, 84, 0.68);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position: relative;
  border: none;
  box-shadow: 0 4px 18px rgba(107, 112, 240, 0.08), 0 0 28px rgba(139, 92, 246, 0.07);
}

.pricing-card--highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  background: linear-gradient(135deg, var(--blue-light), #8b5cf6, #e040fb, var(--blue-light));
  background-size: 300% 300%;
  border-radius: var(--r-lg);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: glow-move 14s linear infinite;
  opacity: 0.28;
}

/* Border ring — selected: vivid multicolor, energetic pulse */
.pricing-card--highlight.is-selected::after {
  background: linear-gradient(135deg, var(--blue-light), #8b5cf6, #e040fb, #06b6d4, #f59e0b, var(--blue-light));
  background-size: 400% 400%;
  animation: glow-move 5s ease infinite, glow-pulse 2s ease-in-out infinite;
  opacity: 1;
}

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

@keyframes glow-pulse {
  0%, 100% { opacity: 0.80; }
  50%       { opacity: 1; }
}

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

.pricing-card--highlight:not(.is-selected):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(107, 112, 240, 0.14), 0 0 40px rgba(139, 92, 246, 0.10);
}

/* Highlight card — selected: strong jump + intense multicolor glow */
.pricing-card--highlight.is-selected {
  background: rgba(24, 48, 111, 0.78);
  transform: translateY(-6px);
  box-shadow:
    0 20px 52px rgba(107, 112, 240, 0.30),
    0 0 80px rgba(139, 92, 246, 0.24),
    0 0 40px rgba(224, 64, 251, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card--highlight::after,
  .pricing-card--highlight.is-selected::after {
    animation: none;
    opacity: 0.55;
  }
  .hero::after {
    animation: none;
    background-position: 0% 50%;
    opacity: 0.5;
  }
}

.pricing-card--custom { border-style: dashed; }

.pricing-card__recommended {
  display: inline-block;
  padding: 3px 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: var(--r-pill);
  margin-bottom: 8px;
}

.pricing-card__head h3 {
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 800;
}
.pricing-card__head p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
}

.pricing-card__price {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--r-md);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
/* highlight pricing card: same internal bg as standard cards */

.price-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.price-line__label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-3); flex-shrink: 0;
}
.price-line__val  { font-size: 13px; color: var(--text-2); text-align: right; }
.price-line__val strong { color: var(--text); font-size: 15px; font-weight: 700; }
.price-line__val em     { font-style: normal; font-size: 11px; color: var(--text-3); }

.price-line--setup .price-line__label { color: var(--text-3); font-size: 10px; }
.price-line--setup .price-line__val   { font-size: 12px; color: var(--text-3); }
.price-line--setup .price-line__val strong { font-size: 13px; color: var(--text-3); font-weight: 500; }

.price-line--monthly .price-line__label { color: var(--text-2); font-size: 11px; }
.price-line--monthly .price-line__val   { font-size: 14px; color: var(--text-2); }
.price-line--monthly .price-line__val strong { font-size: 18px; color: var(--blue-light); font-weight: 800; }

.pricing-card__includes {
  display: flex; flex-direction: column; gap: 9px;
  padding-top: 4px;
  width: 100%;
  box-sizing: border-box;
}
.pricing-card__includes li {
  display: flex; align-items: baseline;
  gap: 10px;
  font-size: 13px; color: var(--text-2); line-height: 1.5;
  min-width: 0;
}

/* ── PACKAGE DETAILS ──────────────────────────── */
.pricing-card__cta {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-self: start;
  white-space: normal;
  text-align: center;
}

.pkg-details {
  border-top: 1px solid var(--border);
  align-self: stretch;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.pkg-details__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  padding: 14px 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-light);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font);
  transition: color var(--t);
  user-select: none;
  letter-spacing: 0.01em;
  text-align: left;
  box-sizing: border-box;
  overflow: hidden;
}
.pkg-details__toggle:hover { color: var(--text); }

.pkg-details__icon {
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--t) var(--ease);
}

.pricing__grid.is-details-open .pkg-details__icon {
  transform: rotate(45deg);
}

.pkg-details__body {
  padding: 4px 0 8px;
  display: grid;
  grid-template-rows:
    var(--pkg-resolve-h)
    var(--pkg-include-h)
    var(--pkg-fit-h)
    auto;
  row-gap: 10px;
}

.pkg-details__body[hidden] { display: none; }

.pkg-details__block strong {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 3px;
}

.pkg-details__block p {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
}

.pkg-details__note {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* ── PACKAGE COMPARISON TABLE ─────────────────── */
.pkg-compare {
  margin-top: 64px;
}

.pkg-compare__title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.pkg-compare__wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

.pkg-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 560px;
}

.pkg-compare__table th,
.pkg-compare__table td {
  padding: 13px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.pkg-compare__table th:first-child,
.pkg-compare__table td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--text-2);
  width: 30%;
}

.pkg-compare__table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--bg);
  white-space: nowrap;
}

.pkg-compare__table tbody tr:last-child td { border-bottom: none; }

.pkg-compare__table tbody tr { background: var(--surface); }
.pkg-compare__table tbody tr:nth-child(even) { background: var(--surface-2); }

.pkg-compare__table td.cmp-yes  { color: var(--green); font-weight: 600; font-size: 15px; }
.pkg-compare__table td.cmp-no   { color: var(--text-3); font-size: 18px; }
.pkg-compare__table td.cmp-opt  { font-size: 11px; color: var(--amber); font-weight: 500; }

/* ── COMPARATIVO DE SOLUÇÕES (solucoes.html) ──────
   Tabela densa (11 linhas) só faz sentido em telas largas o bastante para
   caber sem rolagem horizontal escondendo o contexto. Até 1024px, mostra
   um card por solução (.sol-compare__mobile) em vez da tabela. */
.sol-compare { margin-top: 24px; }
.sol-compare__wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.sol-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 760px;
}
.sol-compare__table th,
.sol-compare__table td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
}
.sol-compare__table tbody tr:last-child td { border-bottom: none; }

/* Coluna de recursos (esquerda) — diferenciada do resto da tabela */
.sol-compare__table th:first-child,
.sol-compare__table td:first-child {
  font-weight: 600;
  color: var(--text);
  width: 18%;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.025);
  border-right: 1px solid var(--border);
}

/* Cabeçalho dos pacotes — mais peso visual para bater o olho rápido */
.sol-compare__table thead th {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--bg);
  border-bottom: 2px solid var(--blue-border);
}
.sol-compare__table tbody tr { background: var(--surface); }
.sol-compare__table td { color: var(--text-3); }

/* Coluna do Ecossistema Digital — pacote mais completo, recebe destaque sutil */
.sol-compare__table th.sol-compare__col--highlight,
.sol-compare__table td.sol-compare__col--highlight {
  background: rgba(142, 162, 255, 0.07);
  border-left: 1px solid var(--blue-border);
  border-right: 1px solid var(--blue-border);
}
.sol-compare__table thead th.sol-compare__col--highlight {
  color: var(--blue-light);
  background: rgba(142, 162, 255, 0.14);
}

/* Hierarquia clara entre os 4 estados possíveis de cada recurso */
.sol-compare__table td.cmp-yes {
  color: var(--green);
  font-weight: 700;
  font-size: 14px;
}
.sol-compare__table td.cmp-yes span { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.sol-compare__table td.cmp-no {
  color: var(--text-3);
  opacity: 0.55;
  font-size: 13px;
}
.sol-compare__table td.cmp-no span { margin-left: 4px; }
.sol-compare__table td.cmp-opt {
  color: var(--amber);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sol-compare__table td.cmp-scope {
  color: var(--blue-light);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sol-compare__mobile { display: none; }

.sol-compare__card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 22px 20px;
}
.sol-compare__card + .sol-compare__card { margin-top: 14px; }
.sol-compare__card h3 { font-size: 17px; margin-bottom: 8px; }
.sol-compare__card--highlight {
  border-color: var(--blue-border);
  background: rgba(142, 162, 255, 0.06);
}
.sol-compare__card-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-light);
  background: var(--blue-dim);
  border: 1px solid var(--blue-border);
  border-radius: var(--r-pill);
}
.sol-compare__card-ideal {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.sol-compare__rows { display: flex; flex-direction: column; }
.sol-compare__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.sol-compare__row:last-child { border-bottom: none; }
.sol-compare__row dt { color: var(--text-3); }
.sol-compare__row dd { text-align: right; flex-shrink: 0; }
.sol-compare__row dd.cmp-yes { color: var(--green); font-weight: 700; }
.sol-compare__row dd.cmp-no { color: var(--text-3); opacity: 0.55; font-size: 12px; }
.sol-compare__row dd.cmp-opt {
  color: var(--amber);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sol-compare__row dd.cmp-scope {
  color: var(--blue-light);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sol-compare__card-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-light);
}
.sol-compare__card-link:hover { color: var(--text); }

.sol-compare__note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.65;
}

@media (max-width: 1024px) {
  .sol-compare__wrap { display: none; }
  .sol-compare__mobile { display: block; }
}

/* ── APLICAÇÃO REAL ───────────────────────────── */
.real-app-section { background: transparent; }

.real-app-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
  background: rgba(16, 34, 84, 0.68);
  border: 1px solid rgba(183, 199, 255, 0.22);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 48px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.3),
    0 0 48px rgba(107, 112, 240, 0.06);
}

/* Tech grid inside real-app card */
.real-app-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(107,112,240,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,112,240,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 20%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.6) 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 20%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* Sartec Papelaria accent line */
.real-app-card::after {
  content: '';
  position: absolute;
  top: 0; left: 48px; right: 48px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,23,32,0.35), rgba(107,112,240,0.35), transparent);
  border-radius: 0 0 2px 2px;
  z-index: 1;
}

.real-app-card > * {
  position: relative;
  z-index: 1;
}

.real-app-card__visual {
  position: relative;
}

.browser-frame {
  background: rgba(13, 14, 34, 0.9);
  border: 1px solid rgba(107, 112, 240, 0.18);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.2);
}

.browser-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.browser-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
}
.browser-dots span:nth-child(1) { background: rgba(255, 95, 87, 0.5); }
.browser-dots span:nth-child(2) { background: rgba(254, 188, 46, 0.5); }
.browser-dots span:nth-child(3) { background: rgba(40, 200, 64, 0.5); }

.browser-url {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 4px 10px;
  letter-spacing: 0.01em;
}
.browser-url svg { opacity: 0.4; flex-shrink: 0; }

.browser-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.browser-sim-hero {
  background: rgba(107, 112, 240, 0.06);
  border: 1px solid rgba(107, 112, 240, 0.1);
  border-radius: 8px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.browser-sim-logo {
  width: 60px; height: 12px;
  background: rgba(107, 112, 240, 0.35);
  border-radius: 3px;
  margin-bottom: 4px;
}

.browser-sim-h1 {
  width: 80%; height: 10px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.browser-sim-h1--sm {
  width: 60%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.browser-sim-cta {
  width: 100px; height: 24px;
  background: rgba(41, 45, 150, 0.6);
  border-radius: 100px;
  margin-top: 4px;
}

.browser-sim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.browser-sim-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.browser-sim-icon {
  width: 24px; height: 24px;
  background: rgba(107, 112, 240, 0.2);
  border-radius: 5px;
}

.browser-sim-line {
  height: 7px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
.browser-sim-line--sm {
  width: 70%;
  background: rgba(255, 255, 255, 0.06);
}

.real-app-card__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.real-app-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  border-radius: var(--r-pill);
  padding: 3px 11px;
  align-self: flex-start;
}

.real-app-name {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.real-app-card__info p {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.72;
}

/* ── PROJECTS GRID ───────────────────────────── */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.project-card {
  background: linear-gradient(135deg, rgba(13,14,34,0.95) 0%, rgba(19,21,48,0.90) 100%);
  border: 1px solid rgba(107, 112, 240, 0.18);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.3),
    0 0 48px rgba(107, 112, 240, 0.06);
}

.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(107,112,240,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,112,240,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 20%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.6) 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 20%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

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

.project-card__visual {
  width: 100%;
  min-height: calc(var(--project-phone-w) * 16 / 9);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.project-card__visual--phone {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ── Phone preview: mockup idêntico nos dois cards ── */
.phone-preview {
  position: relative;
  width: var(--project-phone-w);
  aspect-ratio: 9 / 16;
  padding: 9px;
  border-radius: var(--project-phone-r);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04)) border-box,
    #050610;
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 48px rgba(107, 112, 240, 0.10);
  overflow: hidden;
  box-sizing: border-box;
}

.phone-preview::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 30px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 28px rgba(0, 0, 0, 0.30);
  z-index: 2;
}

.phone-preview__island {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 23px;
  border-radius: 999px;
  background: #02030a;
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.phone-preview__video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  object-fit: cover;
  background: #050610;
  transform: none;
}

.project-card__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.project-card__info p {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.72;
}

/* Label azul para projetos que não estão em produção */
.real-app-label--blue {
  color: var(--blue-light);
  background: var(--blue-dim);
  border-color: var(--blue-border);
}

/* ── PILOT ────────────────────────────────────── */
.pilot { background: transparent; }

.pilot__wrap { max-width: 820px; margin: 0 auto; }

.pilot__content { text-align: center; }
.pilot__content h2,
.pilot__content h1 { margin-bottom: 16px; }
.pilot__content > p {
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.72;
  max-width: 600px;
  margin: 0 auto 40px;
}

.pilot__steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 1080px;
  margin: 44px auto 0;
}

.pilot-step {
  flex: 1; min-width: 200px; max-width: 248px;
  padding: 28px 22px;
  background: rgba(16, 34, 84, 0.68);
  border: 1px solid rgba(183, 199, 255, 0.22);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: left;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.pilot-step:hover {
  border-color: var(--blue-border);
  transform: translateY(-3px);
}
.pilot-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue-dim);
  border: 1px solid var(--blue-border);
  color: var(--blue-light);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 16px;
}
.pilot-step h3    { font-size: 16px; margin-bottom: 8px; }
.pilot-step p      { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.pilot-step__arrow {
  align-self: center;
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--text-3);
}

.pilot__cta { text-align: center; margin-top: 36px; }

/* ── ECOSSISTEMA REAL (cases.html) ───────────────
   Fluxo de nós conectados em CSS puro — reaproveita o vocabulário visual
   já usado no .pilot-step (selo numerado) e no .flow-node do hero mobile
   (cartão + conector), agora para os 7 pontos do ecossistema. */
.eco-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 1120px;
  margin: 0 auto;
}
.eco-flow__node {
  flex: 1 1 190px;
  max-width: 210px;
  padding: 22px 18px;
  background: rgba(16, 34, 84, 0.68);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: left;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.eco-flow__node:hover { border-color: var(--blue-border); transform: translateY(-3px); }
.eco-flow__node--brand {
  border-color: rgba(37, 211, 102, 0.4);
  background: rgba(16, 60, 40, 0.45);
}
.eco-flow__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-dim);
  border: 1px solid var(--blue-border);
  color: var(--blue-light);
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 12px;
}
.eco-flow__node--brand .eco-flow__num {
  background: rgba(37, 211, 102, 0.16);
  border-color: rgba(37, 211, 102, 0.45);
  color: #25d366;
}
.eco-flow__node h3 { font-size: 14px; margin-bottom: 6px; }
.eco-flow__node p  { font-size: 12px; color: var(--text-2); line-height: 1.55; }
.eco-flow__connector {
  flex: 0 0 26px;
  align-self: center;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-border), transparent, var(--blue-border));
  opacity: 0.6;
}

.pilot__note {
  font-size: 14px;
  color: var(--text-3);
  margin-top: 28px;
  font-style: italic;
}

/* ── FAQ ──────────────────────────────────────── */
.faq { background: rgba(8, 22, 62, 0.28); }

.faq__list { max-width: 680px; margin: 0 auto; }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 22px 0;
  gap: 20px;
  text-align: left;
}
.faq-q span:first-child { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.4; }
.faq-icon {
  font-size: 22px; font-weight: 300;
  color: var(--blue-light);
  flex-shrink: 0;
  transition: transform var(--t) var(--ease);
  line-height: 1;
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); }

.faq-a {
  height: 0;
  overflow: hidden;
  transition: height 0.28s var(--ease);
}
.faq-a__inner {
  padding: 0 0 22px;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.72;
}

/* ── CTA FINAL ────────────────────────────────── */
.cta-final {
  background: rgba(8, 22, 62, 0.28);
  position: relative;
  padding: 112px 0;
  overflow: hidden;
}
.cta-final__glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(41,45,150,0.14), transparent 68%);
  pointer-events: none;
}
.cta-final__wrap {
  position: relative;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.cta-final__wrap h2 { margin-bottom: 20px; }
.cta-final__wrap > p {
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 36px;
}
.cta-final__sub { margin-top: 18px; font-size: 0; }
.cta-final__wa-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--blue-light);
  transition: color var(--t);
}
.cta-final__wa-link:hover { color: var(--text); }
.cta-final__note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-3);
}

/* ── FOOTER ───────────────────────────────────── */
.footer {
  background: rgba(9, 23, 62, 0.72);
  border-top: 1px solid rgba(183, 199, 255, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 48px 0 0;
}
.footer__wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border);
}
.footer__left { display: flex; flex-direction: column; gap: 10px; }
.footer__tagline { font-size: 13px; color: var(--text-3); max-width: 300px; line-height: 1.55; }

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.footer__contact p { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.footer__contact strong { color: var(--text-2); font-weight: 600; }
.footer__contact a { color: var(--text-3); transition: color var(--t); }
.footer__contact a:hover { color: var(--text-2); }

.footer__nav {
  display: flex; gap: 4px;
  align-items: center; flex-wrap: wrap;
}
.footer__nav a {
  padding: 6px 12px;
  font-size: 13px; color: var(--text-3);
  border-radius: var(--r-pill);
  transition: color var(--t), background var(--t);
}
.footer__nav a:hover { color: var(--text-2); background: rgba(255,255,255,0.04); }

.footer__disclaimer { padding: 18px 0; border-top: 1px solid var(--border); }
.footer__disclaimer p {
  font-size: 11px; color: var(--text-3); line-height: 1.65; opacity: 0.7; max-width: 860px;
}

.footer__bottom { padding: 14px 0 20px; text-align: center; }
.footer__bottom p { font-size: 11px; color: var(--text-3); opacity: 0.4; }

/* ── WHATSAPP FLOAT ───────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 150;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 24px rgba(37,211,102,0.40);
  transition: transform var(--t) var(--ease), box-shadow var(--t);
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 8px 32px rgba(37,211,102,0.55); }
.wa-float svg   { width: 28px; height: 28px; color: #fff; }

/* ── INNER PAGES (reorganização da arquitetura) ──
   h1 substitui h2 como heading principal nas páginas internas (1 h1 por
   página, por semântica/SEO), mas deve ler visualmente igual a um h2 de
   seção — sem isso herdaria o tamanho de .hero__title. */
main h1:not(.hero__title) {
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.024em;
}
.section__head h1 { margin-bottom: 16px; }

/* Primeira seção de cada página interna (sem hero acima) precisa de
   espaço para não ficar atrás do header fixo. */
.page-intro { padding-top: 140px; }

/* Footer — linha discreta de autoria */
.footer__authorship { font-size: 12px; color: var(--text-3); }

/* Cards de solução (Home + solucoes.html) — CTA "Saiba mais" dentro do eco-card */
.eco-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-light);
  transition: color var(--t);
}
.eco-card__link:hover { color: var(--text); }

/* 5 cards de solução na Home: flex-wrap em vez de grid fixo, para que a
   3ª linha (2 itens) feche centralizada em vez de esticar para preencher
   uma coluna vazia — "3 em cima, 2 embaixo centralizados". */
.eco-grid--solutions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1040px;
}
.eco-grid--solutions .eco-card {
  flex: 1 1 300px;
  max-width: 320px;
}

/* Frase de transição entre "Soluções" e "Como funciona" na Home */
.transition-line {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 28px 48px;
  text-align: center;
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.7;
}

/* "Ver todos os projetos" — Home */
.projects-seeall { text-align: center; margin-top: 36px; }

/* Páginas individuais de solução — coluna de leitura central */
.solution-page { max-width: 720px; margin: 0 auto; }
/* O título do bloco Antes → Depois vive FORA da caixa (.ba-wrapper),
   como uma legenda acima da tabela — assim ele respira em vez de ficar
   colado no topo arredondado do componente. */
.solution-before-after {
  margin: 36px 0 40px;
  text-align: center;
}
.solution-before-after__heading {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.solution-before-after .ba-wrapper { margin: 0; }
.solution-page .pkg-details__block { margin-bottom: 28px; }
.solution-page .pkg-details__block strong {
  font-size: 12px;
  margin-bottom: 8px;
}
.solution-page .pkg-details__block p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
}
.solution-page .pricing-card__includes { margin-top: 14px; }
.solution-page .pricing-card__includes li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-2);
  margin-bottom: 8px;
}
.solution-page .pkg-details__note {
  margin-bottom: 28px;
  font-size: 13px;
}
.solution-cta { margin: 8px 0 20px; }
.solution-plan-mention {
  font-size: 14px;
  color: var(--text-3);
}
.solution-plan-mention a { color: var(--blue-light); text-decoration: underline; }
.solution-plan-mention a:hover { color: var(--text); }

/* Pacotes dentro de Como Trabalhamos — link secundário para a página de solução */
.pkg-learn-more {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-light);
  text-align: center;
  transition: color var(--t);
}
.pkg-learn-more:hover { color: var(--text); }

/* Cases — pequena tag de "tipo de solução" */
.case-type {
  display: block;
  font-size: 12px;
  color: var(--text-3);
}
.case-type span:last-child { color: var(--text-2); font-weight: 600; }

/* Hero — composição visual leve para mobile (nós conectados). Escondida
   no desktop; a versão desktop do mockup (.hero__visual) some no mobile,
   então essa é a única visual do hero em telas pequenas. */
.hero__mobile-flow { display: none; }

/* Grade de 9 blocos de capacidade (solucoes.html — "O que pode ser entregue") */
.eco-grid--capabilities {
  grid-template-columns: repeat(3, 1fr);
  max-width: 980px;
}

/* Grade de 8 cards de contratação (como-trabalhamos.html) — 4 colunas para
   fechar em duas linhas parelhas em vez de 3+3+2. */
.contracting-grid { grid-template-columns: repeat(4, 1fr); }

/* Timeline vertical do processo de trabalho (como-trabalhamos.html) —
   pensada para muitos passos (10), por isso não reaproveita o layout
   horizontal de setas do .pilot__steps (feito para 4-5 itens). */
.process-timeline {
  max-width: 640px;
  margin: 0 auto;
  list-style: none;
}
.process-step {
  display: flex;
  gap: 18px;
  padding-bottom: 28px;
  position: relative;
}
.process-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: var(--border-light);
}
.process-step__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue-dim);
  border: 1px solid var(--blue-border);
  color: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.process-step__body h3 { font-size: 16px; margin-bottom: 4px; }
.process-step__body p { font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* Bloco "processo por tipo de solução" — lista de perguntas dentro do
   card de Presença Digital */
.process-questions {
  margin-top: 12px;
  padding-left: 18px;
}
.process-questions li {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.6;
  list-style: disc;
  margin-bottom: 4px;
}

/* CTA intermediário discreto, no meio de páginas longas (como-trabalhamos.html) */
.mid-page-cta {
  text-align: center;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-3);
}
.mid-page-cta a {
  display: inline-block;
  margin-left: 8px;
  font-weight: 600;
  color: var(--blue-light);
}
.mid-page-cta a:hover { color: var(--text); }

/* ── HOME — prova de origem/autoria (resumo compacto) ───────────
   Toque breve de credibilidade (Sartec real + Lucas) sem recriar as
   seções completas, que vivem em sobre.html. */
.home-proof { padding: 8px 0 80px; }
.home-proof__inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.home-proof__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--blue-border);
}
.home-proof__text {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.65;
}
.home-proof__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-light);
  transition: color var(--t);
}
.home-proof__link:hover { color: var(--text); }

/* ── ANIMATIONS ───────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.fade-up.in-view { opacity: 1; transform: translateY(0); }
.fade-up:nth-child(2) { transition-delay: 0.07s; }
.fade-up:nth-child(3) { transition-delay: 0.14s; }
.fade-up:nth-child(4) { transition-delay: 0.21s; }

/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero__split         { grid-template-columns: 1fr; }
  .hero__content       { max-width: 100%; }
  .pricing__grid       { grid-template-columns: repeat(2, 1fr); }
  .about-lucas__wrap   { grid-template-columns: 1fr; gap: 48px; }
  .about-lucas__card   { max-width: 460px; }
  .origin-grid         { gap: 16px; }
  .origin-grid--3      { grid-template-columns: repeat(3, 1fr); }
  .real-app-card       { grid-template-columns: 1fr; gap: 36px; padding: 32px; }
  .real-app-card::after { left: 32px; right: 32px; }
  .real-app-card__visual { max-width: 560px; margin: 0 auto; width: 100%; }
  .projects-grid       { gap: 20px; }

  /* The language switcher widens the nav enough that the tagline can wrap
     and collide with the nav links in this range, so it steps aside here
     (it already hides below 680px via the mobile rule). */
  .brand__tagline { display: none; }

  /* 5 nav items (Soluções/Cases/Como trabalhamos/Sobre) + lang-switch + CTA
     is wider than the 4 items this used to be — tighten a bit more so it
     doesn't get as close to the edge as before. */
  .nav            { gap: 0; }
  .nav__link      { padding: 7px 11px; }
  .lang-switch    { margin: 0 4px; }

  /* Grids novos de 8-9 itens curtos ficam apertados em 3-4 colunas neste
     intervalo — duas colunas dão mais respiro até a quebra para 1 no mobile. */
  .eco-grid--capabilities { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
  .contracting-grid       { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 680px)
   ══════════════════════════════════════════════ */
@media (max-width: 680px) {
  .container { padding: 0 20px; }
  .section   { padding: 56px 0; }
  .section__head { margin-bottom: 32px; }
  .section__head p { line-height: 1.62; }

  /* Secondary text contrast — slightly brighter than the desktop dim
     tone so long descriptions read comfortably on a mobile screen,
     without going fully white. Scoped to content sections only (not
     hero/header/footer) so desktop and the hero mockup are untouched. */
  .ba-section, .origin-section, .ecosystem, .real-app-section,
  .about-lucas, .pricing, .pilot, .faq, .cta-final {
    --text-3: #a8b8e3;
  }

  /* Header */
  .header__wrap {
    height: 76px;
  }
  .brand__logo    { height: 32px; }
  .brand__tagline { display: none; }
  .nav {
    display: none;
    position: fixed;
    top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    padding: 20px; gap: 4px;
    background: rgba(11, 24, 64, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(206, 216, 255, 0.16);
  }
  .nav.is-open { display: flex; }
  .nav__link   { padding: 12px 16px; font-size: 15px; border-radius: var(--r-sm); color: var(--text-2); }
  .nav__link:hover { color: var(--text); background: rgba(206, 216, 255, 0.08); }
  .nav__cta    { margin-left: 0; margin-top: 4px; text-align: center; padding: 13px; }
  .burger      { display: flex; }

  /* Language switcher inside the mobile dropdown menu */
  .lang-switch {
    align-self: center;
    margin: 8px 0 4px;
  }

  /* Hero — poster do vídeo como pano de fundo sutil (sem custo de
     vídeo no mobile), com overlay forte para preservar leitura. */
  .hero {
    min-height: auto;
    padding: 108px 0 60px;
    background:
      linear-gradient(180deg, rgba(15,32,82,0.94) 0%, rgba(11,24,64,0.97) 55%, #0b1844 100%),
      url('assets/hero/sartec-hero-poster.webp');
    background-size: cover;
    background-position: center 30%;
  }
  .hero__actions { flex-direction: column; align-items: stretch; }
  /* O <video> de fundo some no mobile — o poster já assumiu como
     background da própria .hero acima, então a camada fica escondida
     para não pagar peso de vídeo à toa. */
  .hero__video-bg { display: none; }

  /* Hero — composição visual leve, só no mobile: nós conectados em coluna
     no lugar do mockup de dashboard (que já não aparece no mobile). */
  .hero__mobile-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 32px 0 12px;
  }
  .flow-node {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    background: rgba(16, 34, 84, 0.78);
    border: 1px solid var(--border-light);
    border-radius: var(--r-pill);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
      0 12px 28px rgba(8, 16, 45, 0.45),
      0 0 0 1px rgba(183, 199, 255, 0.06) inset;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    min-width: 220px;
  }
  .flow-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
    background: var(--blue-dim);
    border: 1px solid var(--blue-border);
    border-radius: 50%;
  }
  .flow-node__connector {
    width: 2px;
    height: 18px;
    background: linear-gradient(180deg, var(--blue-light), transparent);
    opacity: 0.7;
  }

  /* Páginas internas — primeira seção precisa de menos espaço para o
     header fixo de 76px (vs. 140px usados no desktop). */
  .page-intro { padding-top: 100px; }

  .transition-line { padding: 0 20px 36px; font-size: 16px; }

  .home-proof { padding: 0 0 56px; }
  .home-proof__inner { padding: 26px 20px; }

  .mid-page-cta { display: flex; flex-direction: column; gap: 6px; }
  .mid-page-cta a { margin-left: 0; }

  /* Antes vs Depois */
  .ba-row    { grid-template-columns: 1fr; }
  .ba-header { grid-template-columns: 1fr; }
  .ba-col--after { display: none; }
  .ba-after  { background: var(--surface-2); border-left: 3px solid var(--green); }
  .ba-before, .ba-after { padding: 18px 20px; }

  /* Show only the 3 priority comparisons by default; the rest stay
     reachable via "Ver mais comparações" instead of a long stacked list. */
  .ba-row--more { display: none; }
  .ba-rows.is-expanded .ba-row--more { display: grid; }
  .ba-more-toggle { display: flex; }

  /* Origin */
  .origin-grid,
  .origin-grid--3 { grid-template-columns: 1fr; gap: 14px; }
  .origin-card { padding: 22px 20px; }

  /* Aplicação real / Projetos */
  .real-app-card { gap: 28px; padding: 24px 20px; }
  .real-app-card::after { left: 20px; right: 20px; }
  .browser-sim-grid { grid-template-columns: repeat(3, 1fr); }
  .projects-grid { grid-template-columns: 1fr; gap: 14px; }
  .project-card  { padding: 20px 18px; gap: 18px; }
  .project-card__visual {
    min-height: calc(var(--project-phone-w-mobile) * 16 / 9);
  }

  .phone-preview {
    width: var(--project-phone-w-mobile);
    padding: 8px;
    border-radius: 34px;
  }

  .phone-preview::before {
    inset: 7px;
    border-radius: 27px;
  }

  .phone-preview__video {
    border-radius: 27px;
  }

  .phone-preview__island {
    top: 15px;
    width: 64px;
    height: 19px;
  }

  .project-card__info {
    margin-top: 16px;
    gap: 10px;
  }


  /* Tech grid subtle on mobile */
  .hero__grid { opacity: 0.6; }

  /* Ecossistema */
  .eco-grid { grid-template-columns: 1fr; gap: 16px; }
  .eco-grid--solutions { flex-direction: column; align-items: stretch; }
  .eco-grid--solutions .eco-card { max-width: none; }
  .eco-card { padding: 22px; }
  .eco-card p { color: rgba(255, 255, 255, 0.80); }

  /* About Lucas */
  .about-lucas__wrap { gap: 32px; }
  .about-lucas__card { max-width: 100%; }
  .lucas-proof-grid  { grid-template-columns: 1fr; gap: 12px; }
  .lucas-card__top { padding: 20px; }
  .lucas-fact      { padding: 11px 20px; }

  /* Pricing — Tabs Navigation instead of carousel */
  .pricing__hint { display: none; }
  
  .pricing-tabs {
    display: flex;
    background: rgba(16, 34, 84, 0.4);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 4px;
    margin: -10px auto 28px;
    max-width: 480px;
    width: 100%;
    gap: 3px;
    overflow: hidden; /* Evita rolagem horizontal, já que todas as abas cabem */
  }
  
  .pricing-tab {
    flex: 1 1 0;
    text-align: center;
    padding: 9px 2px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-3);
    border-radius: var(--r-pill);
    transition: all var(--t) var(--ease);
    white-space: nowrap;
    cursor: pointer;
    letter-spacing: -0.02em;
  }
  .pricing-tab:hover {
    color: var(--text);
  }
  .pricing-tab--active {
    background: var(--blue);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(41, 45, 150, 0.3);
  }

  .pricing__grid {
    display: block;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  
  .pricing-card {
    display: none !important;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    scroll-snap-align: none;
    flex-shrink: 1;
    margin: 0 auto;
  }
  
  .pricing-card.is-active-tab {
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    padding: 22px 20px;
    transform: none !important;
  }
  
  .pkg-details { align-self: auto; margin-top: auto; }
  .pkg-details__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Progressive disclosure: show only the first 3 included items by
     default; the rest appear together with "Ver detalhes do pacote",
     reusing the existing is-details-open toggle (no extra JS needed). */
  .pricing-card__includes li:nth-child(n + 4) { display: none; }
  .pricing__grid.is-details-open .pricing-card__includes li:nth-child(n + 4) {
    display: flex;
  }

  /* Ocultar tabela comparativa no mobile */
  .pkg-compare {
    display: none !important;
  }

  /* Pilot */
  .pilot__steps { flex-direction: column; align-items: stretch; }
  .pilot-step    { padding: 20px 18px; max-width: none; }
  .pilot-step__arrow { transform: rotate(90deg); text-align: center; }

  /* Ecossistema real — vira coluna única, conector vira tracinho vertical */
  .eco-flow { flex-direction: column; align-items: stretch; }
  .eco-flow__node { max-width: none; }
  .eco-flow__connector { width: 2px; height: 18px; flex: 0 0 18px; align-self: center; }

  /* FAQ — a touch tighter so long answers read comfortably */
  .faq-q { padding: 18px 0; }
  .faq-a__inner { padding: 0 0 18px; line-height: 1.66; }

  /* CTA */
  .cta-final { padding: 80px 0; }
  .btn--lg   { padding: 16px 24px; font-size: 15px; }

  /* Footer */
  .footer {
    text-align: center;
  }
  .footer__wrap {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-bottom: 28px;
  }
  .footer__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .footer__tagline {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
  }
  .footer__contact {
    max-width: 100%;
    width: 100%;
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: 14px;
  }
  .footer__nav {
    justify-content: center;
    width: 100%;
  }
  .footer__disclaimer p {
    margin: 0 auto;
    text-align: center;
  }

  /* WA float */
  .wa-float { bottom: 20px; right: 20px; width: 50px; height: 50px; }
  .wa-float svg { width: 24px; height: 24px; }

  /* Ambient Grid Glow for Mobile */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
      linear-gradient(rgba(142, 162, 255, 0.32) 1.2px, transparent 1.2px),
      linear-gradient(90deg, rgba(142, 162, 255, 0.32) 1.2px, transparent 1.2px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle 100px, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 100px, black 30%, transparent 100%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 200px 200px;
    -webkit-mask-size: 200px 200px;
    mask-position: 5% -220px;
    -webkit-mask-position: 5% -220px;
    animation: mobile-ambient-glow-left 14s ease-in-out infinite;
  }

  main::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
      linear-gradient(rgba(142, 162, 255, 0.32) 1.2px, transparent 1.2px),
      linear-gradient(90deg, rgba(142, 162, 255, 0.32) 1.2px, transparent 1.2px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle 100px, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 100px, black 30%, transparent 100%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 200px 200px;
    -webkit-mask-size: 200px 200px;
    mask-position: 95% 120%;
    -webkit-mask-position: 95% 120%;
    animation: mobile-ambient-glow-right 18s ease-in-out infinite;
    animation-delay: 4s;
  }

  @keyframes mobile-ambient-glow-left {
    0% {
      mask-position: 5% -220px;
      -webkit-mask-position: 5% -220px;
    }
    50% {
      mask-position: 12% 120%;
      -webkit-mask-position: 12% 120%;
    }
    100% {
      mask-position: 5% -220px;
      -webkit-mask-position: 5% -220px;
    }
  }

  @keyframes mobile-ambient-glow-right {
    0% {
      mask-position: 95% 120%;
      -webkit-mask-position: 95% 120%;
    }
    50% {
      mask-position: 88% -220px;
      -webkit-mask-position: 88% -220px;
    }
    100% {
      mask-position: 95% 120%;
      -webkit-mask-position: 95% 120%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body::after,
    main::before {
      display: none !important;
      animation: none !important;
    }
  }
}

@media (max-width: 420px) {
  .ba-col--before { display: block; }
}