:root {
  --black: #0a0a0a;
  --white: #f5f0eb;
  --cream: #e8e0d6;
  --accent: #00e5ff;
  --accent-glow: #5ff0ff;
  --purple: #8b5cf6;
  --weavly: #3dbbc8;
  --emerald: #10b981;
  --book99: #7c7ff2;
  --estacool: #f2b705;
  --dark-surface: #111111;
  --mid-gray: #2a2a2a;
  --text-muted: #888888;
  /* Light "paper" surface for the testimonials break + softer text-on-light tones */
  --paper: #f2ece2;
  --ink: #1a1610;
  --ink-muted: #766f63;
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
}

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

html {
  scroll-behavior: smooth;
  background: var(--black);
  overflow-x: hidden;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
  cursor: default;
}

::selection {
  background: var(--accent);
  color: var(--black);
}

/* ========================
   NAVIGATION
======================== */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.5rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  mix-blend-mode: difference;
  transition: padding 0.4s ease;
}

nav.scrolled {
  padding: 1rem 3rem;
}

/* The full-screen mobile menu is a child of <nav>, which normally blends
   itself (and everything painted inside it) against the page using
   "difference" — that's the intended effect on the logo/links while
   scrolling, but it also made the menu's solid background blend with the
   page behind it instead of covering it. Turning the blend off on nav
   only while the menu is open keeps the effect everywhere else and makes
   the open menu fully opaque. */
nav.menu-open {
  mix-blend-mode: normal;
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo-img {
  height: 32px;
  width: auto;
  transition: opacity 0.3s;
}

.nav-logo-img:hover {
  opacity: 0.8;
}

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  transition: opacity 0.3s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-cta {
  background: var(--accent) !important;
  color: var(--black) !important;
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.nav-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.4);
}

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

/* PRODUTOS dropdown — floating panel of product cards on desktop,
   folds into a plain stacked list inside the fullscreen mobile menu
   (see the 768px media query below). */
.nav-produtos details {
  position: relative;
}

.nav-produtos summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: opacity 0.3s;
}

.nav-produtos summary::-webkit-details-marker {
  display: none;
}

.nav-produtos summary::marker {
  content: '';
}

.nav-produtos summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s ease;
}

.nav-produtos details[open] summary::after {
  transform: rotate(-135deg) translateY(2px);
}

.nav-produtos summary:hover {
  opacity: 0.75;
}

/* Turning off the nav's difference blend while the panel is open —
   same fix as nav.menu-open below — keeps the dark panel opaque
   instead of blending with whatever is behind it. */
nav.produtos-open {
  mix-blend-mode: normal;
}

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 90vw);
  padding: 1.1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  background: var(--dark-surface);
  border: 1px solid var(--mid-gray);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  z-index: 500;
}

.nav-product-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.nav-product-card:hover {
  background: #171717;
  border-color: var(--product-color, var(--accent));
}

.nav-product-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.nav-product-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.nav-product-top {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.nav-product-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--white);
}

.nav-product-status {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--product-color, var(--accent));
}

.nav-product-desc {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-muted);
  font-weight: 300;
}

/* Mobile menu */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 24px;
  position: relative;
  z-index: 1001;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle span:nth-child(3) { bottom: 0; }

.menu-toggle.active span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

/* ========================
   HERO SECTION
======================== */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 3rem 4rem;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 80vw;
  height: 80vw;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.07) 0%, transparent 60%);
  pointer-events: none;
}

/* Second color: a quiet purple bloom, low-left, so the hero isn't a
   one-note cyan-on-black moment */
.hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -15%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 65%);
  pointer-events: none;
}

.hero-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 2rem;
  font-weight: 600;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 0.2s;
}

/* H1: Poppins per brand manual (Bebas Neue is reserved for H2/H3).
   Tight negative tracking is deliberate — dense, weighty letterforms
   that make someone slow down and actually read, instead of the
   condensed-display-face-at-huge-size look of generic SaaS sites. */
.hero-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(2.75rem, 7.2vw, 6.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 0.5rem;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 0.4s;
}

/* Underline uses text-decoration (not an absolutely-positioned ::after)
   so it hugs each wrapped line individually instead of stretching to the
   width of the whole box when the accent text breaks across lines on
   narrow screens. */
.hero-title .accent {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 300;
  color: var(--text-muted);
  max-width: 600px;
  line-height: 1.6;
  margin-top: 2rem;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 0.6s;
}

.hero-subtitle strong {
  color: var(--white);
  font-weight: 600;
}

.hero-ctas {
  display: flex;
  gap: 1.5rem;
  margin-top: 3rem;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 0.8s;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem;
  background: var(--accent);
  color: var(--black);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(0, 229, 255, 0.3);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem;
  background: transparent;
  color: var(--white);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 1px solid var(--mid-gray);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-ghost:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.05);
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 1.2s;
}

.scroll-line {
  width: 40px;
  height: 1px;
  background: var(--mid-gray);
  position: relative;
  overflow: hidden;
}

.scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--accent);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { left: -100%; }
  50% { left: 0; }
  100% { left: 100%; }
}

/* ========================
   MANIFESTO / ABOUT
======================== */
.manifesto {
  padding: 10rem 3rem;
  position: relative;
  background: var(--dark-surface);
  overflow: hidden;
}

.manifesto::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -10%;
  width: 45vw;
  height: 45vw;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 65%);
  pointer-events: none;
}

.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  max-width: 1400px;
  margin: 0 auto;
}

.manifesto-left {
  position: sticky;
  top: 8rem;
  height: fit-content;
}

.section-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 8rem;
  color: var(--mid-gray);
  line-height: 1;
  opacity: 0.3;
  margin-bottom: 1rem;
}

.section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: 2rem;
}

.manifesto-right p {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--cream);
  margin-bottom: 2rem;
  font-weight: 300;
}

.manifesto-right p strong {
  color: var(--accent);
  font-weight: 600;
}

.manifesto-right .stat-row {
  display: flex;
  gap: 4rem;
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--mid-gray);
}

.stat {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem;
  color: var(--accent);
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* ========================
   SERVICES
======================== */
.services {
  padding: 8rem 3rem;
  background: var(--black);
  position: relative;
}

.services::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.services-header {
  max-width: 1400px;
  margin: 0 auto 5rem;
}

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

.service-card {
  padding: 3rem;
  background: var(--dark-surface);
  border: 1px solid var(--mid-gray);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
  cursor: default;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  width: auto;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-card:hover {
  background: #141414;
  border-color: var(--accent);
}

.service-icon {
  font-size: 2rem;
  margin-bottom: 2rem;
  display: block;
}

.service-tag {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 1rem;
  font-weight: 600;
}

.service-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 1.5rem;
}

.service-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
  font-weight: 300;
}

.service-badge {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.4rem 1.1rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  border-radius: var(--radius-pill);
}

.badge-live {
  background: rgba(0, 229, 255, 0.15);
  color: var(--accent);
  border: 1px solid rgba(0, 229, 255, 0.3);
}

/* ========================
   PRODUTOS PRÓPRIOS (teaser grid)
   Each tile links out to that product's own page — the product list
   outgrew a single scrolling section, so full showcases now live on
   dedicated pages and this stays a compact entry point.
======================== */
.products-section {
  max-width: 1400px;
  margin: 5rem auto 0;
}

.products-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2rem;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.product-tile {
  display: flex;
  flex-direction: column;
  padding: 2.25rem 1.75rem;
  background: var(--dark-surface);
  border: 1px solid var(--mid-gray);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.product-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.25rem;
  right: 1.25rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--product-color, var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.product-tile:hover::before { transform: scaleX(1); }

.product-tile:hover {
  background: #141414;
  border-color: var(--product-color, var(--accent));
  transform: translateY(-3px);
}

.product-tile-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-bottom: 1.5rem;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.product-tile-status {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--product-color, var(--accent));
  margin-bottom: 0.75rem;
}

.product-tile-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.85rem;
}

.product-tile-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
  font-weight: 300;
  flex-grow: 1;
}

.product-tile-link {
  margin-top: 1.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
}

.product-tile-link:hover {
  color: var(--product-color, var(--accent));
}

.product-tile-email {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--mid-gray);
  align-self: flex-start;
}

.product-tile-email:hover {
  color: var(--product-color, var(--accent));
  border-bottom-color: var(--product-color, var(--accent));
}

/* ========================
   BIG TEXT INTERRUPTER
======================== */
.interrupter {
  padding: 6rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--black);
}

.interrupter-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 10vw, 10rem);
  line-height: 0.85;
  letter-spacing: -0.07em;
  color: var(--mid-gray);
  opacity: 0.15;
  user-select: none;
}

.interrupter-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.5rem, 4vw, 3rem);
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
  /* Desktop: single line */
  white-space: nowrap;
  width: max-content;
}

/* ========================
   TESTIMONIALS — "Quem já parou o scroll"
   Presented as real chat bubbles (the medium the agency actually
   automates) on a warm paper surface — the one light "breath" in
   an otherwise dark page, and the natural home for the leftover
   purple in the palette.
======================== */
.testimonials {
  padding: 8rem 0 9rem;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

.testimonials-head {
  max-width: 1400px;
  margin: 0 auto 4.5rem;
  padding: 0 3rem;
  position: relative;
}

.testimonials-quote-mark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(8rem, 18vw, 16rem);
  line-height: 0.7;
  color: var(--purple);
  opacity: 0.12;
  position: absolute;
  top: -2.5rem;
  left: 1.5rem;
  pointer-events: none;
  user-select: none;
}

.testimonials-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--purple);
  margin-bottom: 1.5rem;
  font-weight: 600;
  position: relative;
}

.testimonials-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  position: relative;
  max-width: 700px;
}

.testimonials-sub {
  font-size: 1.05rem;
  color: var(--ink-muted);
  font-weight: 300;
  max-width: 480px;
  margin-top: 1.5rem;
  position: relative;
}

/* Single counter-scrolling row of chat-style testimonial bubbles */
.testimonial-row {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
}

.testimonial-track {
  display: flex;
  gap: 1.75rem;
  width: max-content;
  animation: testimonialScrollLeft 52s linear infinite;
}

/* Pause only around the card the cursor is actually on — not the
   whole row — so the rest of the belt keeps moving underneath */
@media (hover: hover) {
  .testimonial-row:has(.testimonial-bubble:hover) .testimonial-track {
    animation-play-state: paused;
  }
}

/* Mobile: tapping a card pauses its row (JS toggles this class),
   since touch devices have no :hover to rely on */
.testimonial-row.touch-paused .testimonial-track {
  animation-play-state: paused;
}

@keyframes testimonialScrollLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.testimonial-bubble {
  flex: 0 0 auto;
  width: min(360px, 82vw);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: var(--radius-md);
  border-bottom-left-radius: 6px;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 12px 30px rgba(26, 22, 16, 0.06);
  border-top: 3px solid var(--product-color, var(--accent));
}

.testimonial-quote {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink);
  font-weight: 400;
}

/* Bubbles in a row stretch to match the tallest one (flex default),
   so pin this to the bottom instead of a fixed margin — keeps every
   author flush with the card edge regardless of quote length. */
.testimonial-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.5rem;
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--product-color, var(--accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* When the avatar is a real photo instead of initials: swap the div
   for <img class="testimonial-avatar" src="..." alt="..."> and this
   rule makes it crop into the same circle. */
img.testimonial-avatar {
  object-fit: cover;
}

.testimonial-who {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.testimonial-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}

.testimonial-role {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.25;
}

.testimonial-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--product-color, var(--accent));
  font-weight: 600;
  margin-top: 0.1rem;
}

/* Small circular "acessar" button — only present on bubbles that
   actually have a destination (site or Instagram) to link to */
.testimonial-link {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 22, 16, 0.05);
  color: var(--product-color, var(--accent));
  transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.testimonial-link svg {
  width: 16px;
  height: 16px;
}

.testimonial-link:hover {
  background: var(--product-color, var(--accent));
  color: #fff;
  transform: scale(1.08);
}

.testimonials-cta {
  max-width: 1400px;
  margin: 4rem auto 0;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.testimonials-cta .btn-primary {
  background: var(--purple);
  color: #fff;
}

.testimonials-cta .btn-primary:hover {
  box-shadow: 0 8px 40px rgba(139, 92, 246, 0.3);
}

.testimonials-cta span {
  color: var(--ink-muted);
  font-size: 0.85rem;
}

/* ========================
   CTA / CONTACT
======================== */
.contact {
  padding: 10rem 3rem;
  position: relative;
  background: var(--black);
}

.contact-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.contact-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  margin-bottom: 2rem;
}

.contact-title .accent {
  color: var(--accent);
}

.contact-sub {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--text-muted);
  max-width: 500px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* ========================
   FOOTER
======================== */
footer {
  padding: 3rem;
  border-top: 1px solid var(--mid-gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  background: var(--black);
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.footer-brand {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.footer-institute {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.3s;
}

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

.footer-copy {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ========================
   ANIMATIONS
======================== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================
   RESPONSIVE
======================== */
@media (max-width: 1024px) {
  .manifesto-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .manifesto-left {
    position: static;
  }

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

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

@media (max-width: 768px) {
  nav {
    padding: 1.2rem 1.5rem;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--black);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    z-index: 999;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links a {
    font-size: 1.5rem;
  }

  .nav-produtos {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .nav-produtos details {
    width: 100%;
    max-width: 420px;
  }

  .nav-produtos summary {
    justify-content: center;
    font-size: 1.5rem;
  }

  .nav-dropdown-panel {
    position: static;
    transform: none;
    width: 100%;
    grid-template-columns: 1fr;
    margin-top: 1.25rem;
    max-height: 45vh;
    overflow-y: auto;
  }

  .menu-toggle {
    display: block;
  }

  .hero {
    padding: 7rem 1.5rem 4rem;
  }

  .hero-ctas {
    flex-direction: column;
  }

  .btn-primary, .btn-ghost {
    text-align: center;
    justify-content: center;
  }

  .manifesto {
    padding: 5rem 1.5rem;
  }

  .services {
    padding: 5rem 1.5rem;
  }

  .service-card {
    padding: 2rem;
  }

  /* Services and Produtos Próprios are short, fixed-length lists —
     they just stack full-width so everything is visible without
     interaction. */
  .services-grid,
  .products-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .contact {
    padding: 5rem 1.5rem;
  }

  .contact-buttons {
    flex-direction: column;
    align-items: center;
  }

  footer {
    padding: 2rem 1.5rem;
    flex-direction: column;
    text-align: center;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .manifesto-right .stat-row {
    flex-direction: column;
    gap: 2rem;
  }

  .section-number {
    font-size: 5rem;
  }

  .hero-scroll-indicator {
    display: none;
  }

  .testimonials {
    padding: 5rem 0 6rem;
  }

  .testimonials-head {
    padding: 0 1.5rem;
    margin-bottom: 3rem;
  }

  .testimonials-quote-mark {
    font-size: 6rem;
    top: -1.5rem;
    left: 0.5rem;
  }

  .testimonials-cta {
    padding: 0 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .testimonial-bubble {
    width: 78vw;
    padding: 1.5rem 1.5rem 1.25rem;
  }

  .interrupter {
    padding: 3rem 1.5rem;
  }

  .interrupter-overlay {
    white-space: normal;
    width: 90%;
    text-align: center;
    font-size: clamp(1.4rem, 6.5vw, 2rem);
    letter-spacing: 0.06em;
    line-height: 1.25;
  }

  .interrupter-text {
    font-size: clamp(2rem, 15vw, 10rem);
    opacity: 0.12;
  }

  .interrupter-line2 {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-track {
    animation: none;
  }
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .hero-label, .hero-title, .hero-subtitle, .hero-ctas, .hero-scroll-indicator {
    animation: none;
    opacity: 1;
  }
}

/* ========================
   CUSTOM CURSOR (desktop)
======================== */
@media (hover: hover) {
  .cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease;
    mix-blend-mode: difference;
  }
}