/*
 * BOSSEYE — MOBILE BRUTALIST LAYOUT
 * Carregado apenas em (max-width: 768px) via atributo media no <link>
 * Não afeta desktop.
 */

/* ═══════════════════════════════════════════
   TOKENS BRUTALISTAS MOBILE
═══════════════════════════════════════════ */
:root {
  --m-border:  1px solid rgba(255,255,255,0.12);
  --m-border-bold: 2px solid rgba(255,255,255,0.9);
  --m-pad: 20px;
  --m-gap: 0px;
}

/* ═══════════════════════════════════════════
   RESET MOBILE — REMOVE ARREDONDAMENTOS
═══════════════════════════════════════════ */
* { -webkit-tap-highlight-color: transparent; }

/* ═══════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════ */
.navbar {
  height: 64px !important;
  padding: 0 20px !important;
  background: var(--bg-base) !important;
  border-bottom: var(--m-border) !important;
  backdrop-filter: none !important;
}

.nav-logo img { height: 68px !important; }
.nav-logo-text { font-size: 24px !important; }
.nav-links, .nav-cta { display: none !important; }

/* Sem hamburguer */
.navbar::after { display: none !important; }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  align-items: flex-end !important;
  background-size: cover !important;
  min-height: 100svh !important;
}

.hero-overlay { background: rgba(0,0,0,0.72) !important; }

/* Linha de scan decorativa sobre o hero */
.hero::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(251,146,60,0.6);
  z-index: 4;
  animation: mobHeroScan 4s ease-in-out infinite;
}

@keyframes mobHeroScan {
  0%   { top: 0;    opacity: 0; }
  5%   { opacity: 1; }
  92%  { top: 100%; opacity: 0.4; }
  100% { top: 100%; opacity: 0; }
}

.hero-brand {
  position: relative !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  padding: 28px var(--m-pad) 36px !important;
  border-top: var(--m-border) !important;
  background: rgba(1,6,17,0.55) !important;
  backdrop-filter: blur(6px) !important;
}

.hero-brand-text {
  font-size: clamp(68px, 21vw, 108px) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.045em !important;
  animation: mobGlitch 9s linear infinite !important;
}

@keyframes mobGlitch {
  0%,88%,100%  { clip-path: none; transform: none; text-shadow: 7px 7px 0 rgba(55,85,140,1), 4px 4px 0 rgba(55,85,140,0.7); }
  89%  { clip-path: polygon(0 18%, 100% 18%, 100% 42%, 0 42%); transform: translateX(-5px); text-shadow: -5px 7px 0 rgba(251,146,60,0.7); }
  90%  { clip-path: polygon(0 58%, 100% 58%, 100% 78%, 0 78%); transform: translateX(5px);  text-shadow: 5px -4px 0 rgba(59,130,246,0.5); }
  91%  { clip-path: none; transform: none; text-shadow: 7px 7px 0 rgba(55,85,140,1); }
}

.hero-brand-sub {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  color: var(--gray) !important;
  margin-top: 14px !important;
  margin-left: 4px !important;
  text-shadow: none !important;
}

/* Botão CTA hero */
.hero-content { display: none !important; } /* esconde o hero-content central */

.hero-buttons {
  margin-top: 20px;
}

.btn-primary, .btn-secondary {
  width: 100%;
  text-align: center;
  padding: 16px !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
}

/* ═══════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════ */
.trust-label { font-size: 11px !important; padding: 20px 16px !important; }
.trust-name  { font-size: 11px !important; padding: 20px 14px !important; }

/* ═══════════════════════════════════════════
   SEÇÕES — padding edge-to-edge
═══════════════════════════════════════════ */
.flow-section,
.problem-section,
.showcase-section,
.features-section,
.testimonial-section,
.cta-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.numbers-section { padding: 0 !important; }
.pricing-section { padding: 64px 0 48px !important; }

/* Títulos das seções com padding lateral */
.section-title,
.flow-intro,
.pricing-intro,
.pricing-note,
.problem-headline,
.cta-headline,
.cta-sub,
.testimonial-inner {
  padding-left: var(--m-pad) !important;
  padding-right: var(--m-pad) !important;
}

/* ═══════════════════════════════════════════
   FLOW SECTION — carrossel horizontal com snap
═══════════════════════════════════════════ */
.flow-section .section-title { margin-bottom: 32px !important; }

.flow-wrap {
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  gap: 0 !important;
  padding: 0 0 32px var(--m-pad) !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}

.flow-wrap::-webkit-scrollbar { display: none; }

.flow-card {
  flex: 0 0 82vw !important;
  scroll-snap-align: start !important;
  padding: 0 var(--m-pad) 0 0 !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.flow-scene {
  max-width: 100% !important;
  width: 100% !important;
  border-radius: 0 !important;
}

.flow-step-title { font-size: 17px !important; }
.flow-step-desc  { font-size: 13px !important; }

.flow-connector { display: none !important; }

/* Swipe indicator */
.flow-wrap::after {
  content: 'deslize →';
  flex: 0 0 auto;
  align-self: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.45);
  padding: 0 var(--m-pad);
  white-space: nowrap;
  margin-bottom: 48px;
}

/* ═══════════════════════════════════════════
   PROBLEM SECTION — empilhado, bordas duras
═══════════════════════════════════════════ */
.problem-section { border-top: var(--m-border) !important; }

.problem-grid {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin-bottom: 0 !important;
}

.problem-col {
  padding: 28px var(--m-pad) !important;
  margin-bottom: 0 !important;
  border-bottom: var(--m-border) !important;
}

.problem-col:last-child { border-bottom: none !important; }

.problem-divider { display: none !important; }

.marker-label { display: none !important; }

.prob-pizza-svg { border-radius: 0 !important; }

.verdict {
  margin-top: 14px !important;
  display: inline-block;
}

.problem-headline {
  margin-top: 36px !important;
  font-size: clamp(15px, 4.5vw, 20px) !important;
  line-height: 1.5 !important;
  border-top: var(--m-border) !important;
  padding-top: 32px !important;
}

/* ═══════════════════════════════════════════
   SHOWCASE — mock simplificado
═══════════════════════════════════════════ */
.showcase-section .section-title { padding: 0 var(--m-pad) !important; }

.showcase-wrap { padding: 0 var(--m-pad) !important; }

.mock-window { border-radius: 0 !important; }

.mock-sidebar { display: none !important; }

.annot-row {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 0 !important;
}

.annot-card {
  padding: 12px !important;
  border-radius: 0 !important;
}

.annot-card-label { font-size: 9px !important; }
.annot-card-text  { font-size: 11px !important; }

/* ═══════════════════════════════════════════
   FEATURES — lista vertical com bordas
═══════════════════════════════════════════ */
.features-section .section-title {
  padding: 0 var(--m-pad) !important;
  margin-bottom: 0 !important;
  padding-bottom: 24px !important;
  border-bottom: var(--m-border) !important;
}

.bento-grid {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.bento-card {
  border-radius: 0 !important;
  border: none !important;
  border-bottom: var(--m-border) !important;
  padding: 28px var(--m-pad) !important;
  background: transparent !important;
}

.bento-card.wide { grid-column: span 1 !important; }

.bento-card:last-child { border-bottom: none !important; }

.bento-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Accent left bar on bento cards */
.bento-card { position: relative; padding-left: calc(var(--m-pad) + 14px) !important; }

.bento-card::before {
  content: '';
  position: absolute;
  left: var(--m-pad);
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: var(--orange);
  opacity: 0.5;
}

.bento-icon { width: 36px !important; height: 36px !important; margin-bottom: 14px !important; }
.bento-title { font-size: 15px !important; }
.bento-text  { font-size: 13px !important; }

/* ═══════════════════════════════════════════
   NUMBERS — 2 × 2 grid, células com borda
═══════════════════════════════════════════ */
.numbers-section {
  border-top: var(--m-border) !important;
  border-bottom: var(--m-border) !important;
}

.numbers-grid {
  max-width: 100% !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  display: grid !important;
}

.numbers-grid > div {
  padding: 36px var(--m-pad) !important;
  border-right: var(--m-border) !important;
  border-bottom: var(--m-border) !important;
  text-align: left !important;
}

.numbers-grid > div:nth-child(2n) { border-right: none !important; }
.numbers-grid > div:nth-child(3),
.numbers-grid > div:nth-child(4)  { border-bottom: none !important; }

.number-value {
  font-size: clamp(36px, 10vw, 52px) !important;
  letter-spacing: -0.03em !important;
}

.number-label {
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-top: 6px !important;
}

/* ═══════════════════════════════════════════
   PRICING — carrossel horizontal
═══════════════════════════════════════════ */
.pricing-section .section-title {
  padding: 0 var(--m-pad) !important;
  white-space: normal !important;
  margin-bottom: 8px !important;
}

.pricing-intro { padding-bottom: 32px !important; }

.pricing-grid {
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  gap: 12px !important;
  padding: 22px 11vw 32px !important;   /* (100vw - 78vw)/2 → centraliza o card focado */
  align-items: stretch !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pricing-grid::-webkit-scrollbar { display: none; }

.pricing-card {
  flex: 0 0 78vw !important;
  scroll-snap-align: center !important;
  border-radius: 0 !important;
  transform: none !important;
  transition: opacity 300ms ease !important;
}

.pricing-card.featured { transform: none !important; }

.pricing-card:hover {
  transform: none !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25) !important;
}

/* ═══════════════════════════════════════════
   TESTIMONIAL
═══════════════════════════════════════════ */
.testimonial-inner {
  border: var(--m-border) !important;
  padding: 32px var(--m-pad) !important;
  margin: 0 var(--m-pad) !important;
}

.testimonial-quote { font-size: clamp(16px, 4.5vw, 20px) !important; }

/* ═══════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════ */
.cta-content {
  grid-template-columns: 1fr !important;
  gap: 32px !important;
  padding: 0 var(--m-pad) !important;
}

.cta-headline { font-size: clamp(28px, 8vw, 40px) !important; padding: 0 !important; }
.cta-sub      { padding: 0 !important; }
.cta-form     { padding: 28px var(--m-pad) !important; }
.form-disclaimer { padding: 0 !important; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.footer-inner {
  grid-template-columns: 1fr !important;
  text-align: center !important;
  padding: 48px var(--m-pad) !important;
  gap: 28px !important;
  border-top: var(--m-border) !important;
}

.footer-logo-wrap { justify-content: center !important; }
.footer-nav { justify-content: center !important; flex-wrap: wrap !important; gap: 20px !important; }
.footer-copy { text-align: center !important; }

/* ═══════════════════════════════════════════
   ANIMAÇÕES BRUTALISTAS MOBILE
═══════════════════════════════════════════ */

/* Stamp — entra como carimbo */
@keyframes mobStamp {
  0%   { transform: scale(1.1) translateY(-10px); opacity: 0; }
  65%  { transform: scale(0.97) translateY(2px);  opacity: 1; }
  100% { transform: scale(1)   translateY(0);     opacity: 1; }
}

/* Slice da esquerda */
@keyframes mobSliceL {
  0%   { transform: translateX(-32px); opacity: 0; }
  100% { transform: translateX(0);     opacity: 1; }
}

/* Slice da direita */
@keyframes mobSliceR {
  0%   { transform: translateX(32px); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}

/* Reveal de baixo */
@keyframes mobRiseUp {
  0%   { transform: translateY(28px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* Linha que aparece puxando o conteúdo */
@keyframes mobLineIn {
  0%   { width: 0; opacity: 0; }
  100% { width: 40px; opacity: 1; }
}

/* Classes ativadas via IntersectionObserver (JS mobile-only) */
.mob-stamp   { opacity: 0; }
.mob-slice-l { opacity: 0; }
.mob-slice-r { opacity: 0; }
.mob-rise    { opacity: 0; }

.mob-stamp.mob-in   { animation: mobStamp  550ms cubic-bezier(0.22,1,0.36,1) forwards; }
.mob-slice-l.mob-in { animation: mobSliceL 500ms cubic-bezier(0.16,1,0.3,1) forwards; }
.mob-slice-r.mob-in { animation: mobSliceR 500ms cubic-bezier(0.16,1,0.3,1) forwards; }
.mob-rise.mob-in    { animation: mobRiseUp 500ms cubic-bezier(0.16,1,0.3,1) forwards; }

/* Stagger para filhos */
.mob-in-stagger > *           { opacity: 0; transform: translateY(20px); transition: opacity 450ms ease, transform 450ms ease; }
.mob-in-stagger.mob-in > *    { opacity: 1; transform: none; }
.mob-in-stagger.mob-in > *:nth-child(1) { transition-delay:  40ms; }
.mob-in-stagger.mob-in > *:nth-child(2) { transition-delay: 100ms; }
.mob-in-stagger.mob-in > *:nth-child(3) { transition-delay: 160ms; }
.mob-in-stagger.mob-in > *:nth-child(4) { transition-delay: 220ms; }
.mob-in-stagger.mob-in > *:nth-child(5) { transition-delay: 280ms; }
.mob-in-stagger.mob-in > *:nth-child(6) { transition-delay: 340ms; }

/* Decoração: linha laranja antes de section titles no mobile */
.section-title::before {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: var(--orange);
  margin-bottom: 16px;
  transition: width 600ms cubic-bezier(0.16,1,0.3,1);
}

.section-title.mob-in::before { width: 40px; }

/* ═══════════════════════════════════════════
   GLITCH NUMBERS (classe adicionada por JS)
═══════════════════════════════════════════ */
@keyframes mobNumGlitch {
  0%,100% { opacity: 1; transform: none; }
  20%     { opacity: 0.6; transform: skewX(-8deg); }
  40%     { opacity: 1;   transform: skewX(4deg);  }
  60%     { opacity: 0.8; transform: skewX(0deg);  }
}

.mob-num-glitch { animation: mobNumGlitch 0.4s ease; }

/* ═══════════════════════════════════════════
   MISC
═══════════════════════════════════════════ */
.scroll-indicator { display: none; }
.hero-hud { display: none !important; }

/* Case section */
.case-logo { height: 120px !important; max-width: 260px !important; }
.case-header-inner { padding: 0 var(--m-pad) !important; }

/* ═══════════════════════════════════════════
   CASE SECTION — edge-to-edge, sem bordas
═══════════════════════════════════════════ */
.case-section {
  padding: 0 !important;
}

.case-header {
  padding: 28px var(--m-pad) !important;
  border-top: none !important;
  border-bottom: none !important;
}

.case-header-inner {
  padding: 0 !important;
}

.case-body {
  padding: 32px var(--m-pad) !important;
  grid-template-columns: 1fr !important;
  gap: 40px !important;
}

.case-card,
.case-card-left,
.case-card-right {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}

/* Remove qualquer borda residual interna */
.brut-quote,
.case-card-stats,
.case-card-results {
  border: none !important;
}


/* ═══════════════════════════════════════════
   GIF PIZZA — HERO MOBILE
═══════════════════════════════════════════ */

/* Remove imagem estática, usa o gifPizza */
.hero {
  background-image: none !important;
  background-color: var(--bg-base) !important;
  align-items: flex-start !important;
}

/* Remove a scan line decorativa do hero */
.hero::before { display: none !important; }

/* Container do gif — fixo na tela, atrás de tudo */
.mob-pizza3d {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Vídeo cobre a tela inteira */
.mob-gif-pizza {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.35;
}

/* Overlay escuro sobre o gif */
.hero-overlay { display: none !important; }

/* Base escura no html (canvas); body transparente p/ o gif z-index:-1 aparecer */
html { background: var(--bg-base) !important; }
body { background: transparent !important; }

.trust-bar,
.flow-section,
.problem-section,
.showcase-section,
.features-section,
.numbers-section,
.pricing-section,
.testimonial-section,
.cta-section,
.case-section,
footer.footer {
  position: relative !important;
  z-index: 1 !important;
  background: rgba(1,6,17,0.88) !important;
}

.hero {
  position: relative !important;
  z-index: auto !important;   /* sem stacking-context, p/ não prender o hero-brand */
  background: transparent !important;
}

/* Título + subtítulo dentro da navbar, ao lado da logo */
.hero-brand {
  position: fixed !important;
  top: 0 !important;
  left: 80px !important;   /* após o ícone da logo */
  right: 0 !important;
  bottom: auto !important;
  height: 64px !important;
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 0 16px !important;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  z-index: 1001 !important;
}

.hero-brand-text {
  font-size: clamp(22px, 7vw, 32px) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 3px 3px 0 rgba(55,85,140,0.9) !important;
  animation: none !important;
}

.hero-brand-sub {
  font-size: clamp(8px, 2.5vw, 11px) !important;
  letter-spacing: 0.1em !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  text-shadow: none !important;
}

/* Hero não precisa mais de padding-top */
.hero { padding-top: 0 !important; }

/* Hero brand some junto com o navbar no scroll */
.hero-brand {
  transition: transform 380ms cubic-bezier(0.22,1,0.36,1) !important;
}
.hero-brand.nav-hidden {
  transform: translateY(-100%) !important;
}