:root {
  /* Colors — Dark (default) */
  --svg-filter: invert(1);
  --bg-primary: #000000;
  --bg-secondary: #0b1521;
  --bg-tertiary: #151515;
  --surface-primary: #c9c4b8;
  --surface-secondary: #d4cfc6;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-tertiary: #666666;
  --border-primary: #333333;
  --border-secondary: #555555;

  /* Typography */
  --font-base: "Geist", sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --size-display: 64px;
  --size-h1: 48px;
  --size-h2: 32px;
  --size-h3: 24px;
  --size-body: 20px;
  --size-body-sm: 16px;
  --size-label: 11px;

  /* Spacing — 8px system */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Shape */
  --radius-sharp: 0px;
  --radius-pill: 0px;

  /* Motion */
  --dur-fast: 120ms;
  --dur-normal: 200ms;
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
}

[data-theme="light"] {
  --svg-filter: none;
  --bg-primary: #f5f3ef;
  --bg-secondary: #f0ede6;
  --bg-tertiary: #e4ded5;
  --surface-primary: #5a5248;
  --surface-secondary: #6b6258;
  --text-primary: #1a1714;
  --text-secondary: #4a4540;
  --text-tertiary: #8a8278;
  --border-primary: #c8c2b8;
  --border-secondary: #b0a898;
}

/* ── NOISE OVERLAY ── */
.noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── MASK REVEAL ── */
.mask-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.mask-text {
  display: inline-block;
  transform: translateY(105%);
  will-change: transform;
  transition: none;
}
.mask-text.revealed {
  animation: maskReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes maskReveal {
  to {
    transform: translateY(0);
  }
}

/* ── RESET ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-base);
  font-size: var(--size-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .hero-title, .section-title, .title {
  font-family: var(--font-display);
}

/* ── DOT GRID (BG interativo) ── */
#dot-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

/* Cores dos dots — lidas do tema via CSS vars */
:root[data-theme="dark"] {
  --dot-base: rgba(201, 196, 184, 0.18);
  --dot-active: rgba(201, 196, 184, 1);
}
:root[data-theme="light"] {
  --svg-filter: none;
  --dot-base: rgba(90, 82, 72, 0.18);
  --dot-active: rgba(90, 82, 72, 1);
}

/* ── NAVIGATION ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-2xl);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
nav.nav {
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background var(--dur-normal) var(--ease-out),
    border-color var(--dur-normal) var(--ease-out) !important;
  will-change: transform;
}
nav.nav-hidden {
  transform: translateY(-100%) !important;
}

[data-theme="light"] .nav {
  background: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nav-logo {
  font-family: var(--font-mono);
  font-size: var(--size-body-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}
.nav-links {
  display: flex;
  gap: var(--space-xl);
  font-family: var(--font-mono);
  font-size: var(--size-body-sm);
  text-transform: uppercase;
}
.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast);
  cursor: pointer;
}
.nav-links a:hover {
  color: var(--text-primary);
}

/* ── SYSTEM BUTTONS (High Priority Overrides) ── */
.cta-primary {
  border: 2px solid rgba(201, 196, 184, 0.15) !important;
  background: rgba(201, 196, 184, 0.25) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px);
  color: var(--surface-primary) !important;
  font-weight: 800 !important;
  padding: 12px var(--space-lg) !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-md) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all var(--dur-fast) !important;
  font-family: var(--font-mono) !important;
}
.cta-primary:hover {
  background: rgba(201, 196, 184, 0.4) !important;
  border: 2px solid var(--surface-secondary) !important;
  color: var(--surface-secondary) !important;
  transform: none !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
}

.cta-secondary {
  border: 1px solid var(--border-primary) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  padding: 12px var(--space-lg) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  backdrop-filter: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-md) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all var(--dur-fast) !important;
  font-family: var(--font-mono) !important;
}
.cta-secondary:hover {
  border-color: var(--text-primary) !important;
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  transform: none !important;
}

[data-theme="light"] .cta-primary {
  background: rgba(90, 82, 72, 0.08) !important;
  color: var(--surface-primary) !important;
  border-color: rgba(90, 82, 72, 0.1) !important;
}
[data-theme="light"] .cta-primary:hover {
  background: rgba(90, 82, 72, 0.15) !important;
  border-color: var(--surface-secondary) !important;
}

/* ── SPOTLIGHT BORDER FOR BUTTONS ── */
.cta-primary,
.cta-secondary {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
}
.cta-primary .btn-edge-light,
.cta-secondary .btn-edge-light {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-normal) ease;
  mask-image: conic-gradient(
    from var(--cursor-angle, 45deg) at center,
    black 4%,
    transparent 12%,
    transparent 88%,
    black 96%
  );
  -webkit-mask-image: conic-gradient(
    from var(--cursor-angle, 45deg) at center,
    black 4%,
    transparent 12%,
    transparent 88%,
    black 96%
  );
}
.cta-primary:hover .btn-edge-light,
.cta-secondary:hover .btn-edge-light {
  opacity: 1;
}
.cta-primary .btn-edge-light::before,
.cta-secondary .btn-edge-light::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 2px var(--surface-primary),
    inset 0 0 8px 0 rgba(201, 196, 184, 0.5),
    0 0 8px 0 rgba(201, 196, 184, 0.5),
    0 0 20px 2px rgba(201, 196, 184, 0.2);
}
[data-theme="light"] .cta-primary .btn-edge-light::before,
[data-theme="light"] .cta-secondary .btn-edge-light::before {
  box-shadow:
    inset 0 0 0 2px var(--surface-primary),
    inset 0 0 8px 0 rgba(90, 82, 72, 0.5),
    0 0 8px 0 rgba(90, 82, 72, 0.5),
    0 0 20px 2px rgba(90, 82, 72, 0.2);
}
.cta-primary > *,
.cta-secondary > * {
  position: relative;
  z-index: 2;
}
.cta-primary:hover {
  border-color: transparent !important;
}
.cta-secondary:hover {
  border-color: transparent !important;
}

/* ── HERO ── */
.hero {
  padding: var(--space-4xl) var(--space-2xl) var(--space-3xl);
  max-width: 1366px;
  margin: 0 auto;
  margin-top: 80px;
}
.hero-title {
  font-size: clamp(48px, 10vw, 110px);
  font-weight: 200;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.hero-rail {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.dot-live {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--surface-primary);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* ── CASES GRID ── */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  max-width: 1366px;
  margin: 0 auto var(--space-4xl);
}

/* ── BORDER GLOW (Design System v1.2 Calibrated) ── */
.case-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 10;
  --glow-padding: 40px;
  --cone-spread: 25;

  --glow-color: hsl(40deg 80% 80% / 100%);
  --glow-color-60: hsl(40deg 80% 80% / 72%);
  --glow-color-50: hsl(40deg 80% 80% / 60%);
  --glow-color-40: hsl(40deg 80% 80% / 48%);
  --glow-color-30: hsl(40deg 80% 80% / 36%);
  --glow-color-20: hsl(40deg 80% 80% / 24%);
  --glow-color-10: hsl(40deg 80% 80% / 12%);

  background: var(--bg-secondary);
  cursor: pointer;
  position: relative;
  transition:
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 500ms ease-out,
    filter 700ms cubic-bezier(0.16, 1, 0.3, 1),
    background var(--dur-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-primary);
  overflow: visible !important;
  isolation: isolate;
  padding: 0 !important;
  transform: translate3d(0, 0, 0.01px);
  will-change: transform, opacity, filter;
  transform-origin: center;
}

.case-card.reveal-initial {
  opacity: 0.001;
  transform: scale(0.8) translateY(40px);
  filter: blur(6px);
}

.case-card:not(.reveal-initial) {
  animation: cardSettle 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cardSettle {
  0% {
    transform: scale(0.8) translateY(40px);
  }
  70% {
    transform: scale(1.01) translateY(0);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.case-card::before,
.case-card::after,
.case-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
  pointer-events: none;
}

.case-card:not(:hover)::before,
.case-card:not(:hover)::after,
.case-card:not(:hover) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

.case-card.entrance-glow::before,
.case-card.entrance-glow::after,
.case-card.entrance-glow > .edge-light {
  opacity: 1 !important;
  transition: opacity 0.1s ease-out !important;
}

.case-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  z-index: 1;
  mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    black 2.5%,
    transparent 10%,
    transparent 90%,
    black 97.5%
  );
  opacity: calc(
    (var(--edge-proximity) - var(--edge-sensitivity)) /
      (100 - var(--edge-sensitivity))
  );
  mix-blend-mode: plus-lighter;
}

.case-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 25px 2px var(--glow-color-20),
    0 0 6px 0 var(--glow-color-40),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}

.border-glow-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-secondary);
  padding: var(--space-2xl);
  transition: background var(--dur-fast);
}

.case-card:hover .border-glow-inner {
  background: var(--bg-tertiary);
}

.card-num {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  color: var(--text-tertiary);
  margin-bottom: var(--space-lg);
}
.card-title {
  font-size: var(--size-h2);
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}
.card-sub {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: auto;
}

.card-img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}
.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.case-card:hover img {
  transform: scale(1.04);
}

.tags {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}
.tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 10px;
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 1024px) {
  .cases-grid {
    grid-template-columns: 1fr;
  }
  .nav,
  .hero {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

/* ── RESPONSIVE BREAKPOINTS (Conservador & Preciso) ── */

@media (max-width: 768px) {
  /* Tablet Pequeno / iPad */
  nav.nav {
    height: 64px;
    padding: 0 var(--space-lg);
  }
  /* Ajuste fino: compacta o cluster direito (theme-toggle / elemento
     âncora direito) para ficar rente à margem, sem alterar estrutura
     ou comportamento — apenas reduz espaçamento interno excedente. */
  .nav-right {
    gap: var(--space-sm);
    justify-content: flex-end;
  }
  .theme-toggle {
    margin: 0 !important;
  }
  /* Simplificação Mobile: mantém apenas os ícones (Sol/Lua), removendo o
     texto de apoio para liberar espaço horizontal. Comportamento, estados
     e interações permanecem inalterados — apenas a apresentação visual
     é simplificada. */
  .theme-toggle-option span:not(.theme-icon) {
    display: none;
  }
  .theme-toggle-option {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 8px !important;
    gap: 0 !important;
  }
  .nav-cta {
    padding: 8px var(--space-md);
    font-size: 11px;
  }
  .hero {
    padding: var(--space-3xl) var(--space-xl) var(--space-2xl);
    margin-top: 64px;
  }
  .hero-title {
    font-size: clamp(56px, 12vw, 80px);
  }
  .hero-rail {
    font-size: 12px;
    margin-top: var(--space-xl);
  }

  .cases-grid {
    margin-bottom: var(--space-3xl);
  }
  .case-card {
    padding: var(--space-xl);
  }
}

@media (max-width: 640px) {
  /* Mobile Landscape / Mobile Padrão */
  .nav {
    padding: 0 var(--space-lg);
  }
  .nav-links {
    display: none;
  } /* Priorizar Logo e CTA em telas pequenas */
  .hero {
    padding: var(--space-2xl) var(--space-lg);
  }
  .hero-title {
    font-size: clamp(40px, 14vw, 64px);
  }
  .hero-rail {
    font-size: 11px;
    line-height: 1.4;
  }

  .case-card {
    padding: var(--space-lg);
  }
  .card-title {
    font-size: 24px;
  }
  .card-sub {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  /* Mobile Pequeno (iPhone SE) */
  .nav {
    height: 56px;
    padding: 0 var(--space-md);
  }
  .nav-logo {
    font-size: 12px;
  }
  .theme-toggle {
    scale: 0.85;
    transform-origin: right center;
  }
  .nav-cta {
    padding: 6px var(--space-md);
    font-size: 10px;
  }

  .hero {
    padding: var(--space-xl) var(--space-md);
    margin-top: 56px;
  }
  .hero-title {
    font-size: 40px;
  }

  .case-card {
    padding: var(--space-md);
  }
  .card-title {
    font-size: 20px;
  }
}

@media (max-width: 320px) {
  /* Ultra Pequeno */
  .nav {
    padding: 0 var(--space-sm);
  }
  .nav-cta {
    padding: 5px var(--space-sm);
    font-size: 9px;
  }
  .hero-title {
    font-size: 32px;
  }
  .dot-live {
    margin-right: 4px;
  }
}

/* ── GLOBAL HOVER STANDARDIZATION ── */
.result-cell:hover,
.solution:hover,
.stat-cell:hover,
.test-stat:hover,
.soon-box:hover,
.finding-card:hover,
.jtbd-card:hover,
.feature-card:hover,
.result-box:hover {
  background: var(--bg-tertiary) !important;
}
[data-theme="light"] .result-cell:hover,
[data-theme="light"] .solution:hover,
[data-theme="light"] .stat-cell:hover,
[data-theme="light"] .test-stat:hover,
[data-theme="light"] .soon-box:hover,
[data-theme="light"] .finding-card:hover,
[data-theme="light"] .jtbd-card:hover,
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .result-box:hover {
  background: var(--bg-tertiary) !important;
}

/* ─── Page entrance curtain (double-curtain, brand-colored) ────
       Two stacked curtains slide up in sequence. Black on top (z 9991),
       Brand below (z 9990).
    ───────────────────────────────────────────────────────────── */
.page-curtain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9990;
  transition: transform 0.8s cubic-bezier(0.85, 0, 0.15, 1);
  transform: translateY(0);
  pointer-events: none;
}
.page-curtain[data-color="black"] {
  background: #000;
  z-index: 9991;
}
.page-curtain[data-color="brand"] {
  background: var(--surface-primary);
  z-index: 9990;
}
.page-curtain.retracted {
  transform: translateY(-100%);
}
.page-curtain[data-color="brand"].retracted {
  transition-delay: 100ms;
}

/* ── HERO IMMUTABILITY (Decisão de Design: Hero sempre escuro/branco) ── */
.case-hero-section,
.case-hero-section *,
.case-hero-title,
.case-hero-desc,
.case-meta-type,
.case-meta-item span {
  color: #ffffff !important;
}
.case-meta-item label {
  color: rgba(255, 255, 255, 0.5) !important;
}
.hero-video-overlay {
  background: linear-gradient(
    to top,
    #000000 0%,
    rgba(0, 0, 0, 0.4) 40%,
    transparent 100%
  ) !important;
}
.case-meta-row {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── THEME TOGGLE ── */
.theme-toggle {
  display: flex;
  background: rgba(201, 196, 184, 0.5);
  border-radius: 40px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 var(--space-sm);
}
[data-theme="light"] .theme-toggle {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.theme-toggle-option {
  background: transparent;
  border: none;
  color: #000000;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 84px;
}
[data-theme="light"] .theme-toggle-option {
  color: rgba(0, 0, 0, 0.6);
}
.theme-toggle-option.active {
  background: var(--surface-primary);
  color: var(--bg-primary) !important;
}
.theme-icon {
  width: var(--size-label) !important;
  height: var(--size-label) !important;
  background-color: currentColor !important;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  display: inline-block;
  transition: background-color 0.2s !important;
}
.icon-sun {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.09375 3.84375C7.33594 3.84375 8.32031 4.875 8.32031 6.09375C8.32031 7.33594 7.33594 8.34375 6.09375 8.34375C4.82812 8.34375 3.84375 7.28906 3.84375 6.07031C3.84375 4.85156 4.82812 3.84375 6.09375 3.84375ZM12.0234 8.22656C12.1641 8.46094 12.0469 8.74219 11.7891 8.78906L9.23438 9.25781L8.76562 11.8125C8.71875 12.0703 8.4375 12.1875 8.22656 12.0469L6.09375 10.5703L3.9375 12.0469C3.72656 12.1875 3.44531 12.0703 3.39844 11.8125L2.92969 9.25781L0.375 8.78906C0.117188 8.74219 0 8.46094 0.140625 8.25L1.61719 6.09375L0.140625 3.96094C0 3.75 0.117188 3.46875 0.375 3.42188L2.92969 2.95312L3.375 0.398438C3.42188 0.140625 3.70312 0.0234375 3.9375 0.164062L6.09375 1.64062L8.22656 0.140625C8.4375 0 8.71875 0.117188 8.76562 0.375L9.23438 2.92969L11.7891 3.39844C12.0469 3.44531 12.1641 3.72656 12.0234 3.96094L10.5469 6.09375L12.0234 8.22656ZM6.09375 9.09375C7.73438 9.09375 9.07031 7.75781 9.07031 6.09375C9.07031 4.47656 7.71094 3.11719 6.09375 3.11719C4.45312 3.11719 3.09375 4.45312 3.09375 6.09375C3.09375 7.73438 4.42969 9.09375 6.09375 9.09375Z' fill='black'/%3E%3C/svg%3E");
}
.icon-moon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='10' height='11' viewBox='0 0 10 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5.25C0 2.36719 2.34375 0 5.22656 0C5.50781 0 5.92969 0.046875 6.1875 0.09375C6.42188 0.140625 6.46875 0.445312 6.25781 0.5625C4.99219 1.28906 4.19531 2.64844 4.19531 4.125C4.19531 6.70312 6.51562 8.64844 9.07031 8.17969C9.30469 8.13281 9.44531 8.39062 9.30469 8.57812C8.32031 9.77344 6.84375 10.5 5.22656 10.5C2.34375 10.5 0 8.15625 0 5.25Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='10' height='11' viewBox='0 0 10 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5.25C0 2.36719 2.34375 0 5.22656 0C5.50781 0 5.92969 0.046875 6.1875 0.09375C6.42188 0.140625 6.46875 0.445312 6.25781 0.5625C4.99219 1.28906 4.19531 2.64844 4.19531 4.125C4.19531 6.70312 6.51562 8.64844 9.07031 8.17969C9.30469 8.13281 9.44531 8.39062 9.30469 8.57812C8.32031 9.77344 6.84375 10.5 5.22656 10.5C2.34375 10.5 0 8.15625 0 5.25Z' fill='black'/%3E%3C/svg%3E");
}

/* ── BORDER BEAM EFFECT ── */
@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes spin-beam {
  to {
    --beam-angle: 360deg;
  }
}
@keyframes spin-beam-pill {
  0% {
    --beam-angle: 0deg;
  }
  4.1% {
    --beam-angle: 37deg;
  }
  8.2% {
    --beam-angle: 56deg;
  }
  12.3% {
    --beam-angle: 66deg;
  }
  16.4% {
    --beam-angle: 71.5deg;
  }
  25% {
    --beam-angle: 90deg;
  }
  33.6% {
    --beam-angle: 108.5deg;
  }
  37.7% {
    --beam-angle: 114deg;
  }
  41.8% {
    --beam-angle: 124deg;
  }
  45.9% {
    --beam-angle: 143deg;
  }
  50% {
    --beam-angle: 180deg;
  }
  54.1% {
    --beam-angle: 217deg;
  }
  58.2% {
    --beam-angle: 236deg;
  }
  62.3% {
    --beam-angle: 246deg;
  }
  66.4% {
    --beam-angle: 251.5deg;
  }
  75% {
    --beam-angle: 270deg;
  }
  83.6% {
    --beam-angle: 288.5deg;
  }
  87.7% {
    --beam-angle: 294deg;
  }
  91.8% {
    --beam-angle: 304deg;
  }
  95.9% {
    --beam-angle: 323deg;
  }
  100% {
    --beam-angle: 360deg;
  }
}
.theme-toggle,
.sound-toggle-btn {
  position: relative;
}
.theme-toggle::after,
.sound-toggle-btn::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--beam-angle, 0deg) at 50% 50%,
    transparent 35%,
    var(--bg-secondary) 65%,
    var(--surface-secondary) 85%,
    var(--surface-primary) 95%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 10;
}
.theme-toggle::after {
  animation: spin-beam-pill 3s linear infinite;
}
.sound-toggle-btn::after {
  animation: spin-beam 3s linear infinite;
}
/* ── SKILLS GRID ── */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.skill-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 10;
  --glow-padding: 30px;
  --cone-spread: 25;

  --glow-color: hsl(40deg 80% 80% / 100%);
  --glow-color-60: hsl(40deg 80% 80% / 72%);
  --glow-color-50: hsl(40deg 80% 80% / 60%);
  --glow-color-40: hsl(40deg 80% 80% / 48%);
  --glow-color-30: hsl(40deg 80% 80% / 36%);
  --glow-color-20: hsl(40deg 80% 80% / 24%);
  --glow-color-10: hsl(40deg 80% 80% / 12%);

  background: var(--bg-secondary);
  cursor: pointer;
  position: relative;
  transition:
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 500ms ease-out,
    filter 700ms cubic-bezier(0.16, 1, 0.3, 1),
    background var(--dur-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-primary);
  overflow: visible !important;
  isolation: isolate;
  padding: 0 !important;
  transform: translate3d(0, 0, 0.01px);
  will-change: transform, opacity, filter;
  transform-origin: center;
  text-decoration: none;
}

.skill-card.reveal-initial {
  opacity: 0.001;
  transform: scale(0.8) translateY(40px);
  filter: blur(6px);
}

.skill-card:not(.reveal-initial) {
  animation: cardSettle 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.skill-card::before,
.skill-card::after,
.skill-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
  pointer-events: none;
}

.skill-card:not(:hover)::before,
.skill-card:not(:hover)::after,
.skill-card:not(:hover) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

.skill-card.entrance-glow::before,
.skill-card.entrance-glow::after,
.skill-card.entrance-glow > .edge-light {
  opacity: 1 !important;
  transition: opacity 0.1s ease-out !important;
}

.skill-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  z-index: 1;
  mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    black 2.5%,
    transparent 10%,
    transparent 90%,
    black 97.5%
  );
  opacity: calc(
    (var(--edge-proximity) - var(--edge-sensitivity)) /
      (100 - var(--edge-sensitivity))
  );
  mix-blend-mode: plus-lighter;
}

.skill-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 25px 2px var(--glow-color-20),
    0 0 6px 0 var(--glow-color-40),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}

.skill-card .border-glow-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-secondary);
  padding: var(--space-xl);
  transition: background var(--dur-fast);
}

.skill-card:hover .border-glow-inner {
  background: var(--bg-tertiary);
}

.skill-content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.skill-name {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.skill-card:hover .skill-name {
  color: var(--surface-primary);
}

/* ── HIGH IMPORTANCE CARD (INVERTED) ── */
.card-importance-high.neuform-card,
.card-importance-high.mira-card,
.card-importance-high.finding-card,
.card-importance-high.flow-diagram-wrap {
  background-color: var(--surface-primary) !important;
  color: var(--bg-primary) !important;
}

.card-importance-high.neuform-card:hover,
.card-importance-high.mira-card:hover,
.card-importance-high.finding-card:hover,
.card-importance-high.flow-diagram-wrap:hover {
  background-color: var(--surface-secondary) !important;
  color: var(--bg-primary) !important;
}

.card-importance-high p,
.card-importance-high span,
.card-importance-high li,
.card-importance-high strong,
.card-importance-high h1,
.card-importance-high h2,
.card-importance-high h3,
.card-importance-high h4,
.card-importance-high h5,
.card-importance-high h6,
.card-importance-high .section-body,
.card-importance-high .jtbd-text {
  color: var(--bg-primary) !important;
}

.card-importance-high .finding-label,
.card-importance-high .jtbd-label,
.card-importance-high .inline-label {
  color: rgba(0, 0, 0, 0.6) !important;
}

.card-importance-high .neuform-active-bar {
  background: var(--bg-primary) !important;
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.22);
}

/* ── OVERRIDES PARA TIMELINE & FLOW EM HIGH IMPORTANCE ── */
.card-importance-high .timeline-header,
.card-importance-high .timeline-step-title,
.card-importance-high .timeline-step-desc,
.card-importance-high .regulatory-title,
.card-importance-high .regulatory-col label,
.card-importance-high .regulatory-col p,
.card-importance-high .flow-diagram-label,
.card-importance-high .flow-node-box,
.card-importance-high .flow-node-tag,
.card-importance-high .flow-connector,
.card-importance-high .flow-fallback,
.card-importance-high .flow-fallback strong {
  color: var(--bg-primary) !important;
}

.card-importance-high .timeline-dot {
  background: transparent !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
  color: var(--bg-primary) !important;
}

.card-importance-high .timeline-dot.active {
  background: var(--bg-primary) !important;
  color: var(--surface-primary) !important;
}

.card-importance-high .timeline-line,
.card-importance-high .flow-diagram-label::after {
  background: rgba(0, 0, 0, 0.1) !important;
}

.card-importance-high .regulatory-wrap {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.card-importance-high .flow-nodes {
  align-items: flex-start !important;
}

.card-importance-high .flow-node-box {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.card-importance-high .flow-node-box:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  border-color: var(--bg-primary) !important;
}

.card-importance-high .flow-node-box.flow-hl {
  border-color: var(--bg-primary) !important;
  background: rgba(0, 0, 0, 0.1) !important;
}

.card-importance-high .flow-connector {
  margin-top: 16px; /* Equilíbrio entre 14px e 18px */
  line-height: 1;
}

.card-importance-high .flow-fallback {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.card-importance-high .flow-fallback-pill {
  border-color: var(--bg-primary) !important;
  color: var(--bg-primary) !important;
}

/* Limpar animações temporais antigas para o GSAP ScrollTrigger assumir */
.case-card:not(.reveal-initial) {
  animation: none !important;
}

/* ── SYSTEM BUTTON PRIMARIES OVERLAY ANIMATION ── */
:root {
  --svg-filter-hover: none;
}
[data-theme="light"] {
  --svg-filter-hover: invert(1);
}
.cta-primary {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  transition:
    color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.cta-primary::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--surface-primary) !important;
  z-index: -1 !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.cta-primary:hover::before {
  transform: scaleX(1) !important;
}
.cta-primary:hover {
  color: var(--bg-primary) !important;
  border-color: var(--surface-primary) !important;
  background: transparent !important;
}
.cta-primary:hover img,
.cta-primary:hover svg {
  filter: var(--svg-filter-hover) !important;
}

/* ── SMOOTH THEME TRANSITION ── */
body,
.nav,
.footer,
.content-section,
.result-box,
.finding-card,
.border-glow-inner,
.case-meta-row,
.mira-card,
.neuform-card,
.contact-input,
.contact-container,
.pgate-card,
.pgate-screen,
.pgate-input,
.case-card,
.flow-node-box,
.stat-cell,
.test-stat,
.soon-box,
.jtbd-card,
.feature-card,
.results-band,
.result-cell,
.border-glow-card,
.solution,
.timeline-dot,
.regulatory-wrap,
.hero,
.hero-container,
.pgate-nav,
.theme-toggle,
.theme-toggle-option,
.pgate-theme-toggle,
.pgate-theme-option {
  transition:
    background-color 0.5s ease,
    border-color 0.5s ease,
    background 0.5s ease;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
.section-title,
.section-body,
.result-val,
.result-label,
.result-note,
.nav-logo,
span:not(.mask-text):not(.pgate-mask-text):not(.edge-light),
li,
.input-label,
.contact-title,
.contact-desc,
a,
strong,
.card-title,
.card-sub {
  transition: color 0.5s ease;
}

/* ── SECTION STRIPING (Alternância de BGs) ── */
.stripe-alternate {
  position: relative;
}

.stripe-alternate::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  background: var(--bg-secondary);
  transition: background var(--dur-normal) var(--ease-out);
}

.stripe-alternate .case-card:not(.card-importance-high),
.stripe-alternate .mira-card:not(.card-importance-high),
.stripe-alternate .finding-card:not(.card-importance-high),
.stripe-alternate .skill-card:not(.card-importance-high),
.stripe-alternate .border-glow-card:not(.card-importance-high) {
  background: var(--bg-primary) !important;
}

.stripe-alternate .case-card .border-glow-inner,
.stripe-alternate .skill-card .border-glow-inner {
  background: var(--bg-primary) !important;
}

.stripe-alternate .case-card:hover .border-glow-inner,
.stripe-alternate .case-card:hover,
.stripe-alternate .skill-card:hover .border-glow-inner,
.stripe-alternate .skill-card:hover {
  background: var(--bg-secondary) !important;
}

/* IMAGE REVEAL ANIMATION (Scale + Clarity) */
.reveal-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: inset(15% 15% 15% 15%); /* starts slightly smaller to allow expansion */
  transition: clip-path 1.2s cubic-bezier(0.19, 1, 0.22, 1), transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: clip-path, transform;
  border-radius: var(--radius-md); /* optional rounded corners match DS */
}

/* Fallback for inline block images if they need it */
img.reveal-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transform: scale(1.15);
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}

.reveal-container.is-revealed {
  clip-path: inset(0% 0% 0% 0%);
}

.reveal-container.is-revealed .reveal-image {
  transform: scale(1);
}

.reveal-container.is-revealed:hover {
  transform: scale(1.02);
}

/* ── HERO FULL-BLEED VIDEO (Vimeo) — implementação única, desktop + mobile ──
   Aplicado sem media query: o mesmo comportamento vale em qualquer largura.
   O iframe do Vimeo não suporta object-fit, então o "cover" é simulado
   superdimensionando-o em vw/vh e centralizando com transform, sempre maior
   que o container em ambas as dimensões — isso garante 100% de cobertura
   sem barras pretas, sangrando propositalmente para fora das bordas. */
.case-hero-section.full-bleed {
  position: relative !important;
  overflow: hidden !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  justify-content: center !important;
}

.hero-video-wrap {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  background: #000 !important;
}

.hero-video-wrap iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vw !important;
  height: 56.25vw !important; /* proporção 16:9 a partir da largura */
  min-width: 177.78vh !important; /* proporção 16:9 a partir da altura — cobre containers mais altos que largos */
  min-height: 100vh !important;
  max-width: none !important;
  transform: translate(-50%, -50%) scale(var(--video-scale, 1)) !important;
  transform-origin: center !important;
  border: 0 !important;
  pointer-events: none !important; /* o vídeo é só decorativo; cliques atravessam para o conteúdo/página */
  will-change: transform;
  backface-visibility: hidden;
}

/* O conteúdo de texto fica centralizado verticalmente por cima do vídeo,
   em qualquer largura de tela. `.case-hero-inner` tem `flex:1` na regra
   local de cada página (herança antiga), o que o faz ocupar 100% da
   altura do container e anula silenciosamente qualquer justify-content —
   por isso o flex-grow também precisa ser desligado aqui. Isso NUNCA
   afeta o tamanho do vídeo, que é posicionado de forma independente
   (position:absolute relativo à section, não ao .case-hero-inner). */
.case-hero-section.full-bleed .case-hero-inner {
  flex: 0 1 auto !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 3 !important;
}

.hero-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* ── MOBILE CANONICAL LAYOUT (iPhone 12 first) ── */
@media (max-width: 768px) {
  :root {
    --cols: 8;
    --bl: 8px;
    --lh: 24px;
    --gutter: 16px;
    --margin: 48px;
    --pad: 64px;
    --maxw: 1366px;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  nav.nav {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding-left: var(--margin) !important;
    padding-right: var(--margin) !important;
  }

  .nav-right {
    gap: var(--space-sm) !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  .nav .nav-links,
  .nav .nav-cta {
    display: none !important;
  }

  .mobile-menu {
    padding-left: var(--margin) !important;
    padding-right: var(--margin) !important;
  }

  html body .nav .theme-toggle,
  html body .theme-toggle {
    margin: 0 !important;
    transform: none !important;
  }

  html body .nav .theme-toggle .theme-toggle-option,
  html body .theme-toggle .theme-toggle-option {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 8px !important;
    gap: 0 !important;
  }

  html body .nav .theme-toggle .theme-toggle-option span:not(.theme-icon),
  html body .theme-toggle .theme-toggle-option span:not(.theme-icon) {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }

  .theme-icon {
    flex: 0 0 var(--size-label) !important;
  }
}

@media (max-width: 640px) {
  :root {
    --cols: 4;
    --margin: 24px;
    --pad: 48px;
    --case-meta-mobile-margin: 48px;
  }

  nav.nav {
    height: 56px !important;
    min-height: 56px !important;
    padding-left: var(--margin) !important;
    padding-right: var(--margin) !important;
    align-items: center !important;
  }

  .hamburger-btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 6px !important;
    flex-shrink: 0 !important;
  }

  .nav-logo {
    min-width: 0 !important;
    max-width: calc(100vw - 160px) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .hero,
  .cases-grid,
  .content-section,
  .case-hero-inner,
  .footer-cta,
  .mobile-menu {
    padding-left: var(--margin) !important;
    padding-right: var(--margin) !important;
  }

  .content-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section-num,
  .section-title,
  .section-body,
  .case-hero-title,
  .case-meta-type,
  .case-hero-desc,
  .img-cap {
    width: auto !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .two-col,
  .process-item,
  .split-grid,
  .insight-grid,
  .findings-grid,
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .two-col > *,
  .process-item > *,
  .split-grid > *,
  .insight-grid > *,
  .findings-grid > *,
  .stats-grid > * {
    min-width: 0 !important;
  }

  .case-hero-section.full-bleed .case-hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body .case-meta-row,
  html body .case-hero-section.full-bleed .case-meta-row {
    width: calc(100vw - (var(--case-meta-mobile-margin) * 2)) !important;
    max-width: calc(100vw - (var(--case-meta-mobile-margin) * 2)) !important;
    margin-left: calc(50% - 50vw + var(--case-meta-mobile-margin)) !important;
    margin-right: auto !important;
    margin-top: var(--space-2xl) !important;
    padding: var(--space-lg) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-md) !important;
    align-items: start !important;
    justify-content: stretch !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
  }

  html body .case-meta-row .case-meta-item {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-xs) !important;
  }

  html body .case-meta-row .case-meta-item label,
  html body .case-meta-row .case-meta-item span {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .flow-nodes {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-md) !important;
  }

  .flow-node {
    width: 100% !important;
    min-width: 0 !important;
  }

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

  .img-full,
  .img-std,
  img.reveal-image {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .reveal-container {
    clip-path: none !important;
    overflow: hidden !important;
  }

  .edge-light,
  .btn-edge-light {
    display: none !important;
  }

  /* ── "LET'S KEEP IN TOUCH" — padrão único mobile (about.html como referência) ──
     Funciona independente do wrapper (com ou sem .scroll-reveal-footer),
     pois força os botões diretamente, sem depender do container pai. */
  .footer-cta .nav-cta {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    justify-content: center !important;
    text-align: center !important;
    transform: none !important;
  }

  /* Botão secundário ("Back to Home") não é exibido no mobile —
     apenas Email e LinkedIn permanecem, um por linha. */
  .footer-cta .cta-secondary {
    display: none !important;
  }

  .footer-cta > div,
  .footer-cta .scroll-reveal-footer,
  .scroll-reveal-footer > div {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .footer-cta .scroll-reveal-footer,
  .footer-cta [style*="display: flex"],
  .footer-cta [style*="display:flex"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: var(--space-md) !important;
  }

  .footer-cta .animated-content,
  .scroll-reveal-footer .animated-content {
    transform: none !important;
  }

  .benchmark-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  .benchmark-table th,
  .benchmark-table td {
    padding: var(--space-sm) !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .benchmark-table th > div {
    min-width: 0 !important;
    width: 100% !important;
  }

  .benchmark-logo {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 320px) {
  :root {
    --margin: 16px;
  }
}

/* --- Mobile Read More for Case Meta Row --- */
.meta-read-more-btn {
  display: none !important;
}

@media (max-width: 768px) {
  html body .case-meta-row.collapsed .case-meta-item:nth-child(n+3) {
    display: none !important;
  }
  html body .case-meta-row .meta-read-more-btn {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: var(--space-sm) !important;
  }
}

/* --- Fix extra divider on last case-meta-item on Desktop --- */
@media (min-width: 769px) {
  html body .case-meta-row .case-meta-item:last-of-type {
    border-right: none !important;
  }
}


/* ── BORDER GLOW CARDS ── */
  .border-glow-card {
    --edge-proximity: 0;
    --cursor-angle: 45deg;
    --edge-sensitivity: 10;
    --glow-padding: 40px;
    --cone-spread: 25;

    --glow-color: hsl(40deg 80% 80% / 100%);
    --glow-color-60: hsl(40deg 80% 80% / 72%);
    --glow-color-50: hsl(40deg 80% 80% / 60%);
    --glow-color-40: hsl(40deg 80% 80% / 48%);
    --glow-color-30: hsl(40deg 80% 80% / 36%);
    --glow-color-20: hsl(40deg 80% 80% / 24%);
    --glow-color-10: hsl(40deg 80% 80% / 12%);

    position: relative;
    isolation: isolate;
    transition:
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 500ms ease-out,
    filter 800ms cubic-bezier(0.16, 1, 0.3, 1),
    background 0.25s ease-out;
    cursor: default;
    overflow: visible;
    transform: translate3d(0, 0, 0.01px);
    will-change: transform, opacity, filter;
  }

  .border-glow-card.reveal-initial {
    opacity: 0.001;
    transform: scale(0.80) translateY(40px);
    filter: blur(6px);
  }

  .border-glow-card:not(.reveal-initial) {
    animation: cardSettle 800ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes cardSettle {
    0% {
    transform: scale(0.80) translateY(40px);
    }

    70% {
    transform: scale(1.01) translateY(0);
    }

    100% {
    transform: scale(1) translateY(0);
    }
  }

  }

  .border-glow-card.entrance-glow::before,
  .border-glow-card.entrance-glow::after,
  .border-glow-card.entrance-glow>.edge-light {
    opacity: 1 !important;
    transition: opacity 0.1s ease-out !important;
  }

  .border-glow-card::before,
  .border-glow-card::after,
  .border-glow-card>.edge-light {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transition: opacity 0.25s ease-out;
    z-index: -1;
    pointer-events: none;
  }

  .border-glow-card:not(:hover)::before,
  .border-glow-card:not(:hover)::after,
  .border-glow-card:not(:hover)>.edge-light {
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
  }

  .border-glow-card>.edge-light {
    inset: calc(var(--glow-padding) * -1);
    z-index: 1;
    mask-image: conic-gradient(from var(--cursor-angle) at center,
      black 2.5%, transparent 10%, transparent 90%, black 97.5%);
    opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
    mix-blend-mode: plus-lighter;
  }

  .border-glow-card>.edge-light::before {
    content: "";
    position: absolute;
    inset: var(--glow-padding);
    border-radius: inherit;
    box-shadow:
    inset 0 0 0 1px var(--glow-color),
    0 0 6px 0 var(--glow-color-40),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
  }

  .border-glow-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }